/* Oculta el contenido de la página mientras se carga */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* Color de fondo del overlay */
    z-index: 9999; /* Asegura que esté encima de todo el contenido */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor del spinner y la imagen */
.spinner-container {
    position: relative;
    width: 120px; /* Ajusta el tamaño según sea necesario */
    height: 120px; /* Ajusta el tamaño según sea necesario */
}

/* Estilo para el spinner */
.spinner {
    border: 16px solid #f3f3f3; /* Color de fondo del spinner */
    border-top: 16px solid #128A42; /* Color del spinner */
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: spin 2s linear infinite;
}

/* Estilo para la imagen dentro del spinner */
.spinner-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px; /* Ajusta el tamaño de la imagen según sea necesario */
    height: 60px;
    transform: translate(-50%, -50%);
}

/* Animación del spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Oculta el overlay cuando el contenido se carga */
.content {
    display: none; /* Oculta el contenido mientras se carga */
}