/* Animaciones */
@keyframes slideOutLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Estilos para el spinner */
.spinner {
    border: 8px solid #f3f3f3;        /* Fondo del spinner */
    border-top: 8px solid #3498db;     /* Color de la parte superior del spinner */
    border-radius: 50%;                /* Hacerlo redondo */
    width: 50px;                       /* Tamaño del spinner */
    height: 50px;                      /* Tamaño del spinner */
    animation: spin 1s linear infinite; /* Gira continuamente */
}

/* Estilos para el contenedor de carga */
.loading-container {
    width: 80%;                          /* Ancho */
    height: 300px;                       /* Altura */
    margin: 50px;                        /* Margen */
    display: flex;                       /* Centrado */
    align-items: center;                 /* Centrado vertical */
    justify-content: center;             /* Centrado horizontal */
    position: relative;                  /* Posicionamiento relativo */
    z-index: 2000;                       /* Por encima de otros elementos */
}