/* =========================================================
   RESET Y CONFIGURACIÓN BASE
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================================
   CONTENEDOR BASE CON ANIMACIÓN CÍCLICA
========================================================= */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1; /* Cambiado a -1 para estar detrás de todo */
    
    /* Color inicial y animación */
    background-color: #1e3c72;
    
    /* Animación cíclica - solo azul marino a azul suave y vuelta */
    animation-name: cicloAzul;
    animation-duration: 30s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    
    /* Prefijos para compatibilidad */
    -webkit-animation-name: cicloAzul;
    -webkit-animation-duration: 30s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: cicloAzul;
    -moz-animation-duration: 30s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    
    -o-animation-name: cicloAzul;
    -o-animation-duration: 30s;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    
    /* Suavizar las transiciones */
    transition: background-color 1.5s ease;
}

/* =========================================================
   DEFINICIÓN DE LA ANIMACIÓN CÍCLICA
   Azul marino → Azul 30% más suave → Azul marino
========================================================= */

/* Para navegadores WebKit (Chrome, Safari, Edge) */
@-webkit-keyframes cicloAzul {
    0% { background-color: #1e3c72; }
    50% { background-color: #2a4f96; }
    100% { background-color: #1e3c72; }
}

/* Para Firefox */
@-moz-keyframes cicloAzul {
    0% { background-color: #1e3c72; }
    50% { background-color: #2a4f96; }
    100% { background-color: #1e3c72; }
}

/* Para Opera */
@-o-keyframes cicloAzul {
    0% { background-color: #1e3c72; }
    50% { background-color: #2a4f96; }
    100% { background-color: #1e3c72; }
}

/* Estándar */
@keyframes cicloAzul {
    0% { background-color: #1e3c72; }
    50% { background-color: #2a4f96; }
    100% { background-color: #1e3c72; }
}


/* =========================================================
   ESTILOS PARA EL CONTENIDO SOBRE EL FONDO
========================================================= */
.contenido-principal {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 20px;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Asegurar que el texto sea legible sobre los fondos */
.texto-contraste {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* =========================================================
   MEDIA QUERIES PARA RESPONSIVIDAD
========================================================= */
@media (max-width: 768px) {
    .background-container {
        animation-duration: 40s; /* Más lento en móviles para ahorro de batería */
        -webkit-animation-duration: 40s;
        -moz-animation-duration: 40s;
        -o-animation-duration: 40s;
    }
}

/* =========================================================
   MODOS DE ACCESIBILIDAD
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .background-container {
        animation: none !important;
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        background-color: #1e3c72; /* Color fijo para usuarios con sensibilidad a movimiento */
    }
}

/* =========================================================
   FALLBACK PARA NAVEGADORES SIN SOPORTE DE ANIMACIÓN
========================================================= */
.no-cssanimations .background-container {
    background: linear-gradient(135deg, #1e3c72, #2a4f96);
    background-size: 400% 400%;
}