/* =======================================================================
   FUENTES LOCALES Y VARIABLES
   ======================================================================= */
@font-face {
    font-family: 'sevenseg';
    src: url('fonts/LCD14.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --color-principal: #0b3c75;       
    --color-hover-enlace: #cbd5e1;    
    --color-desplegable-bg: #ffffff;  
    --color-desplegable-texto: #333333;
    --altura-max-logo: 60px;          
}

/* =======================================================================
   ESTILOS DE LA BARRA DE NAVEGACIÓN (PC GENERAL)
   ======================================================================= */
.mi-navbar-institucional {
    background-color: var(--color-principal) !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    position: relative; /* Base necesaria para que el absolute móvil no se mueva */
}

.fila-redes i {
    font-size: 1.2rem;
    transition: color 0.2s ease;
}

.fila-redes i:hover {
    color: var(--color-hover-enlace) !important;
}

/* Configuración de Escritorio / Pantallas Grandes (PC) */
@media (min-width: 992px) {
    #menuColegio {
        display: flex !important;
    }

    .dropdown-menu {
        display: none; /* Controlado por JS mouseenter/mouseleave */
        background-color: var(--color-desplegable-bg);
        border: none;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
        border-radius: 6px;
        position: absolute;
    }
    
    .dropdown-item {
        color: var(--color-desplegable-texto) !important;
        font-weight: 500;
        padding: 0.6rem 1.5rem;
    }

    .dropdown-item:hover {
        background-color: var(--color-principal) !important;
        color: #ffffff !important;
    }

    .mi-navbar-institucional .nav-link {
        font-family: 'Arial', sans-serif;
        font-size: 1.4rem;               
        font-weight: 800;                 
        letter-spacing: 2px;              
        text-transform: uppercase;        
        color: #ffffff !important;        
        margin-right: 1%;
    }

    .LOI {
        margin-left: 25%;
        width: 10rem;
    }
}

/* =======================================================================
   MODO CELULAR ESTABLE (RESPONSIVE NAVBAR OVERLAP FLOTANTE)
   ======================================================================= */
@media (max-width: 991.98px) {
    .collapse:not(.show) {
        display: none; 
    }

    /* CAPA FLOTANTE ABSOLUTA: Se sobrepone en frente de la cuenta regresiva */
    #menuColegio {
        display: none; /* Lo administra nuestro script */
        position: absolute !important;
        top: 100%; /* Inicia exactamente debajo de la barra azul */
        left: 0;
        width: 100%;
        background-color: rgba(11, 60, 117, 0.98) !important; /* Capa azul con ligera opacidad */
        padding-top: 15px;
        padding-bottom: 20px;
        box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.4); 
        z-index: 9999 !important; /* Capa suprema sobrepuesta */
    }

    #menuColegio ul {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    .row-redes {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding-bottom: 10px !important;
        margin-bottom: 10px;
        width: 80%; /* Centrado estético en celulares */
    }

    /* Submenú de Comités embebido dentro del Overlap */
    .dropdown-menu {
        display: none; 
        position: static !important; 
        float: none !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        border: none;
        text-align: center;
        width: 90% !important;
        margin: 5px auto !important; 
        border-radius: 8px !important;
    }

    .dropdown-item {
        font-size: 1.2rem !important; 
        font-weight: 600;
        color: #ffffff !important;
        padding: 0.5rem 1rem;
    }

    .mi-navbar-institucional .nav-link {
        font-family: 'Arial', sans-serif;
        font-size: 1.8rem;               
        font-weight: 800;                 
        letter-spacing: 2px;              
        text-transform: uppercase;        
        color: #ffffff !important;        
    }

    .LOI {
        margin-left: 10%;
        margin-bottom: -5%;
        width: 8rem;
        padding: 10px;
    }
}

/* =======================================================================
   ESTILOS DE LA CUENTA REGRESIVA
   ======================================================================= */
.contenedor-countdown-premium {
    background: #c0512e;
    margin-top: 1%;
    border-radius: 30px;
    margin-left: 1%;
    margin-right: 1%;
}

.tarjeta-cristal {
    padding: 2%;
}

.titulo-evento-premium {
    color: white;
    font-weight: 600;
    font-size: 250%;
    padding: 1%;
    margin-top: -3%;
}

.reloj-premium-grid {
    display: flex !important;       
    flex-direction: row !important; 
    justify-content: center;        
    align-items: flex-start;
    gap: 20px;                      
    margin-top: 30px;
    width: 100%;
}

.bloque-tiempo {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center;
    text-align: center;
}

/* Tarjeta numérica premium ajustada al archivo LCD14.otf */
.tarjeta-numero {
    background-color: #ffffff !important;
    color: #103a71 !important;
    font-family: 'sevenseg', monospace !important;
    font-size: 5rem;
    font-weight: 100;
    padding: 10px 30px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    min-width: 140px; 
    text-align: center;
    line-height: 1;
    border-bottom: 4px solid #cbd5e1;
}

.etiqueta-tiempo {
    color: #ffffff !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* =======================================================================
   RESPONSIVE ESCALABLE DEL RELOJ PARA TABLETS Y CELULARES
   ======================================================================= */
@media (max-width: 840px) {
    .tarjeta-numero {
        font-size: 3.5rem;
        padding: 10px 15px;
        min-width: 100px;
    }
    .titulo-evento-premium {
        font-size: 200%;
    }
}

@media (max-width: 500px) {
    .reloj-premium-grid {
        gap: 8px !important; 
    }
    .tarjeta-numero {
        font-size: 2.2rem;
        padding: 8px 6px;
        min-width: 68px;
        border-radius: 8px;
        border-bottom-width: 3px;
    }
    .titulo-evento-premium {
        font-size: 140%;
    }
    .etiqueta-tiempo {
        font-size: 0.65rem;
        letter-spacing: 0.5px;
    }
}
.infosec{
    margin-top: 13%;
}
.logosec img{
    width: 25%;
    margin-left: 5%;
    margin-bottom: 5%;
    margin-top: 1%;
}
.infotxt{
    margin-left: 40%;
    margin-top: -35%;
    margin-right: 5%;
    background-color:#0b3c75 ;
    padding: 20px;
    border-radius: 20px;
}
.infotxt p{
    font-size: 150%;
    font-family: 'Arial', sans-serif;
    font-weight: 600;
    color: white;
}
@media(max-width:1200px){
    .infosec{
    margin-top: -50%;
}
.logosec img{
    margin-top: 65%;
    width: 25%;
    margin-left: 5%;
    
}
.infotxt{
    margin-left: 40%;
    margin-top: -39%;
    margin-right: 5%;
    background-color:#0b3c75 ;
    padding: 20px;
    border-radius: 20px;
}
.infotxt p{
    font-size: 150%;
    font-family: 'Arial', sans-serif;
    font-weight: 600;
    color: white;

}
}

@media(max-width:1050px){
    .infosec{
    margin-top: 5%;
}
.logosec img{
    margin-top: 10%;
    width: 50%;
    margin-left: 5%;
    margin-left: 25%;
    
}
.infotxt{

    margin-top: 10%;
    margin-left:5%;
    background-color:#0b3c75 ;
    
    border-radius: 20px;
}
.infotxt p{
    font-size: 150%;
    font-family: 'Arial', sans-serif;
    font-weight: 600;
    color: white;
    text-align: center;

}
}
/* =======================================================================
   SECCIÓN DE COMITÉS RESPONSIVE
   ======================================================================= */
.tarjeta-comite {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e2e8f0;
}

/* Efecto sutil al pasar el mouse en PC */
.tarjeta-comite:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

/* Contenedor equilibrado para los logos */
.contenedor-logo-comite {
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #ffffff;
}

.logo-comite {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Ajuste específico para escudos circulares estilo ONU */
.logo-circular {
    transform: scale(1.15);
}

/* Área de información inferior */
.cuerpo-comite {
    background-color: #f8fafc; /* Gris ultra-claro para contrastar el logo blanco */
    padding: 25px;
}

.titulo-comite {
    font-size: 1.25rem;
    color: #1e293b;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
    min-height: 56px; /* Mantiene alineadas las tarjetas en PC */
}

.dificultad-comite {
    padding-left: 20px;
    margin-bottom: 20px;
    color: #64748b;
    font-size: 0.95rem;
}

.detalles-temas p {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
    margin-bottom: 15px;
}

.mesa-directiva p {
    font-size: 0.9rem;
    color: #475569;
    margin-bottom: 6px;
}

/* Botón personalizado integrado al esquema de color institucional */
.btn-handbook {
    background-color: #2563eb !important; /* Azul característico del botón de la imagen */
    color: #ffffff !important;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-handbook:hover {
    background-color: #1d4ed8 !important; /* Azul más oscuro al hacer hover */
}

/* =======================================================================
   AJUSTES PARA DISPOSITIVOS MÓVILES (CELULARES)
   ======================================================================= */
@media (max-width: 767.98px) {
    .contenedor-logo-comite {
        height: 180px; /* Reducimos la altura del logo en celular para no forzar scroll */
        padding: 15px;
    }
    
    .cuerpo-comite {
        padding: 20px;
    }

    .titulo-comite {
        font-size: 1.15rem;
        min-height: auto; /* Se adapta dinámicamente al texto largo sin dejar huecos */
    }

    .btn-handbook {
        width: 100% !important; /* El botón se expande a todo lo ancho en celular para mejor ergonomía */
        text-align: center;
    }
}
/* Estilos del Footer */
.site-footer {
    background-color: #f8f9fa; /* Color gris claro sutil */
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #6c757d;
    border-top: 1px solid #e9ecef;
    position: relative;
}

/* Estado inicial del texto secreto: completamente invisible y colapsado */
.hidden-credits {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    font-size: 15px;
    color: #a0aec0; /* Un gris aún más claro para que sea discreto */
    margin-top: 0;
    transition: opacity 0.5s ease, max-height 0.5s ease;
    /* Aquí está el truco: espera 10 segundos antes de empezar a mostrarse */
    transition-delay: 10s; 
}

/* Cuando el cursor pasa por encima del footer, se activa la cuenta regresiva */
.site-footer:hover .hidden-credits {
    opacity: 100;
    max-height: 200px; /* Le damos espacio para que se despliegue */
    margin-top: 15px;
}