/**
 * estilos.css - ITF México
 * Hoja de estilos principal unificada y responsiva
 */

/* =========================================
   1. VARIABLES Y BASE
========================================= */
:root {
    --azul-fondo: #1A252F;        
    --azul-tarjetas: #243447;     
    --rojo-marcial: #C0392B;      
    --rojo-brillante: #E74C3C;    
    --texto-principal: #F8F9FA;   
    --texto-secundario: #BDC3C7;  
    --borde-suave: #34495E;       
    --sombra: 0 8px 15px rgba(0,0,0,0.2);
    --transicion: all 0.3s ease;
}


        * { box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; margin: 0; padding: 20px; background-color: var(--azul-fondo); color: var(--texto-principal); }
        .contenedor-principal { max-width: 1000px; margin: 0 auto; padding: 10px; position: relative; z-index: 1; }
body { 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    margin: 0; 
    padding: 10px; /* Padding para móviles */
    background-color: var(--azul-fondo); 
    color: var(--texto-principal); 
    line-height: 1.6; 
}

@media (min-width: 768px) {
    body { padding: 20px; }
}

.contenedor-principal { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 10px; 
    position: relative; 
    z-index: 1; 
}

.seccion-titulo { 
    border-left: 5px solid var(--rojo-marcial); 
    padding-left: 15px; 
    margin-bottom: 30px; 
    text-transform: uppercase; 
    font-size: 1.4em; 
}

/* =========================================
   2. HEADER Y NAVEGACIÓN (COMÚN)
========================================= */
.cabecera-organizacion {
    display: flex; 
    flex-direction: row; /* Ahora siempre se mantiene en fila (horizontal) */
    align-items: center; 
    justify-content: space-between;
    text-align: center; 
    gap: 10px; 
    padding: 15px 0 20px 0;
}

/* Distribución del espacio: Los extremos toman 1 parte, el centro toma 2 partes */
.lado-izq { flex: 1; display: flex; justify-content: flex-start; }
.lado-der { flex: 1; display: flex; justify-content: flex-end; }
.titulos-organizacion { flex: 2; padding: 0 5px; } 

/* Tamaños Base (Para Celulares) */
.logo-fed { 
    width: 80px; /* Proporcional para móvil */
    height: 80px; 
    border-radius: 50%; 
    border: 2px solid var(--rojo-marcial); 
    box-shadow: 0 2px 5px rgba(192, 57, 43, 0.3); 
    object-fit: cover; 
}

.bandera-mexico { 
    width: 60px; /* Proporcional para móvil */
    height: auto; 
    border-radius: 4px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.4); 
}

.titulos-organizacion h1 { 
    color: var(--texto-principal); 
    margin: 0; 
    font-size: 0.8em; /* Letra más pequeña para que quepa en celular */
    font-weight: 800; 
    text-transform: uppercase; 
    line-height: 1.2;
}

.titulos-organizacion p { 
    color: var(--rojo-brillante); 
    margin: 5px 0 0 0; 
    font-weight: 900; 
    font-size: 0.7em; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
}

/* Tamaños para Tablets y Pantallas Medianas */
@media (min-width: 600px) {
    .logo-fed { width: 90px; height: 90px; }
    .bandera-mexico { width: 90px; }
    .titulos-organizacion h1 { font-size: 1.5em; }
    .titulos-organizacion p { font-size: 1em; letter-spacing: 3px; }
}

/* Tamaños para Computadoras de Escritorio */
@media (min-width: 850px) {
    .cabecera-organizacion { gap: 20px; padding: 20px 0 30px 0; }
    .logo-fed { width: 180px; height: 180px; border: 3px solid var(--rojo-marcial); }
    .bandera-mexico { width: 120px; }
    .titulos-organizacion h1 { font-size: 2em; }
    .titulos-organizacion p { font-size: 1.5em; letter-spacing: 4px; margin-top: 10px; }
}

/* --- NAVEGACIÓN --- */
.nav-principal { 
    border-bottom: 1px solid var(--borde-suave); 
    margin-bottom: 30px; 
    padding: 10px 0; 
}

.lista-nav { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-wrap: nowrap; /* Obliga a que todos los elementos estén en una sola línea */
    justify-content: flex-start; /* Inicia a la izquierda para permitir el scroll */
    gap: 5px; 
    overflow-x: auto; /* Habilita el scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Scroll suave como mantequilla en iPhones/Androids */
    scrollbar-width: none; /* Oculta la barra de scroll en Firefox */
}

/* Oculta la barra de scroll en Chrome, Safari y Edge (se ve más limpio) */
.lista-nav::-webkit-scrollbar { 
    display: none; 
}

/* En computadoras, si hay espacio suficiente, centramos el menú automáticamente */
@media (min-width: 850px) {
    .lista-nav {
        justify-content: center;
        overflow-x: visible; /* Apagamos el scroll en escritorio para que funcione bien el dropdown */
    }
}

.link-nav {
    text-decoration: none; 
    color: var(--texto-secundario); 
    font-weight: 700;
    font-size: 0.85em; 
    text-transform: uppercase; 
    padding: 10px 14px;
    border-radius: 5px; 
    transition: var(--transicion); 
    border-bottom: 3px solid transparent; 
    display: block;
    white-space: nowrap; /* Evita que el texto (ej. "Acerca de") se rompa en dos líneas */
}

.link-nav:hover { 
    color: var(--texto-principal); 
    background-color: rgba(255, 255, 255, 0.05); 
    border-bottom: 3px solid var(--rojo-marcial); 
}

.link-nav.activo { 
    color: var(--rojo-brillante); 
    border-bottom: 3px solid var(--rojo-brillante); 
    background-color: rgba(231, 76, 60, 0.1); 
}
/* =========================================
   3. PÁGINA: INICIO (HERO, RELOJES, VALORES)
========================================= */
.hero {
    background: linear-gradient(rgba(26, 37, 47, 0.85), rgba(26, 37, 47, 0.85)), url('img/hero-bg.jpg');
    background-size: cover; background-position: center; border-radius: 20px;
    padding: 60px 20px; text-align: center; border: 1px solid var(--borde-suave); margin-bottom: 50px;
}
.hero h2 { font-size: 2em; color: var(--texto-principal); text-transform: uppercase; margin-bottom: 20px; }
.hero p { font-size: 1.1em; color: var(--texto-secundario); max-width: 700px; margin: 0 auto 30px; }
.btn-cta { display: inline-block; padding: 15px 40px; background-color: var(--rojo-marcial); color: white; text-decoration: none; font-weight: 800; border-radius: 50px; text-transform: uppercase; letter-spacing: 2px; transition: var(--transicion); }
.btn-cta:hover { background-color: var(--rojo-brillante); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(192, 57, 43, 0.4); }

.grid-cuenta-regresiva, .grid-valores, .grid-noticias, .grid-escuelas, .grid-cintas {
    display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px;
}

@media (min-width: 650px) {
    .grid-cuenta-regresiva, .grid-valores, .grid-noticias, .grid-escuelas, .grid-cintas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .grid-cuenta-regresiva, .grid-valores, .grid-noticias, .grid-escuelas { grid-template-columns: repeat(3, 1fr); }
    .grid-cintas { grid-template-columns: repeat(4, 1fr); }
}

/* Relojes */
.card-contador { background: var(--azul-tarjetas); border: 1px solid var(--borde-suave); border-radius: 15px; padding: 25px; text-align: center; border-top: 4px solid var(--rojo-marcial); }
.reloj-display { display: flex; justify-content: center; gap: 8px; margin-top:15px; }
.bloque-tiempo { background: var(--azul-fondo); padding: 10px; border-radius: 8px; min-width: 65px; border: 1px solid var(--borde-suave); }
.numero-tiempo { display: block; font-size: 1.4em; font-weight: 800; color: var(--rojo-brillante); line-height: 1; }
.etiqueta-tiempo { font-size: 0.6em; text-transform: uppercase; color: var(--texto-secundario); margin-top: 5px; display: block; }

/* Valores */
.valor-card { background: var(--azul-tarjetas); padding: 30px; border-radius: 12px; text-align: center; border: 1px solid var(--borde-suave); }
.valor-card h3 { color: var(--rojo-brillante); margin-top: 0; text-transform: uppercase; }


/* =========================================
   4. TARJETAS GENERALES (Noticias, Escuelas, Alumnos)
========================================= */
.tarjeta-base {
    background: var(--azul-tarjetas); border-radius: 12px; overflow: hidden;
    border: 1px solid var(--borde-suave); transition: var(--transicion); display: flex; flex-direction: column;
}
.tarjeta-base:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: var(--rojo-marcial); }

/* Alumnos Específico */
.tarjeta-persona { text-align: center; padding: 20px 15px; position: relative; }
.tarjeta-persona::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background-color: var(--rojo-marcial); }
.contenedor-foto { width: 120px; height: 120px; margin: 0 auto 10px; }
.foto-perfil { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--azul-fondo); }
.nombre-persona { color: var(--texto-principal); font-size: 1.15em; font-weight: 700; margin: 0; }
.dan-numero { color: var(--texto-secundario); font-size: 0.8em; font-weight: 700; letter-spacing: 1px; margin: 5px 0; }
.grado-persona { background-color: var(--rojo-marcial); padding: 3px 10px; border-radius: 4px; font-size: 0.8em; font-weight: 700; display: inline-block; margin-bottom: 10px; }

/* Noticias / Escuelas Específico */
.img-tarjeta { width: 100%; height: 180px; object-fit: cover; border-bottom: 3px solid var(--rojo-marcial); }
.cuerpo-tarjeta { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.btn-accion-tarjeta { display: block; width: 100%; padding: 12px; background-color: var(--rojo-marcial); color: white; text-align: center; text-decoration: none; font-weight: 800; text-transform: uppercase; font-size: 0.85em; transition: var(--transicion); }
.btn-accion-tarjeta:hover { background-color: var(--rojo-brillante); }

        /* --- NOTICIAS HOME --- */
        .grid-noticias-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
        .mini-noticia { background: var(--azul-tarjetas); border-radius: 12px; overflow: hidden; border: 1px solid var(--borde-suave); transition: var(--transicion); display: flex; flex-direction: column; }
        .mini-noticia img { width: 100%; height: 200px; object-fit: cover; object-position: center top; }
        .mini-cuerpo { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
        .mini-cuerpo h4 { margin: 0 0 10px 0; color: var(--texto-principal); font-size: 1.1em; }
        .mini-cuerpo p { font-size: 0.9em; color: var(--texto-secundario); margin-bottom: 20px; flex-grow: 1; }
        .link-mas { color: var(--rojo-brillante); font-weight: 700; text-decoration: none; font-size: 0.8em; text-transform: uppercase; align-self: flex-start; }


/* =========================================
   5. CALENDARIO Y CONTACTO
========================================= */
/* Calendario */
.evento-card { display: flex; gap: 15px; background: var(--azul-tarjetas); border-radius: 12px; margin-bottom: 20px; padding: 15px; border: 1px solid var(--borde-suave); transition: var(--transicion); }
.evento-card:hover { transform: translateX(5px); border-color: var(--rojo-marcial); }
.fecha-bloque { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 70px; background: var(--azul-fondo); border-radius: 10px; border: 2px solid var(--rojo-marcial); padding: 10px; }
.dia-num { font-size: 1.5em; font-weight: 800; line-height: 1; }
.mes-nom { font-size: 0.8em; text-transform: uppercase; color: var(--rojo-brillante); font-weight: 700; }

/* Contacto */
.seccion-contacto { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 900px) { .seccion-contacto { grid-template-columns: 1fr 1.5fr; } }
.info-contacto, .formulario-contacto { background: var(--azul-tarjetas); padding: 30px; border-radius: 12px; border: 1px solid var(--borde-suave); }
.input-form, .textarea-form { width: 100%; padding: 12px; background-color: var(--azul-fondo); border: 2px solid var(--borde-suave); border-radius: 6px; color: white; margin-top: 5px; }
.textarea-form { min-height: 120px; resize: vertical; }

/* Utilidades */
#mensaje-vacio { text-align: center; padding: 40px; color: var(--texto-secundario); display: none; width: 100%; grid-column: 1/-1; }
.input-busqueda { width: 100%; padding: 15px; background-color: var(--azul-tarjetas); color: white; border: 2px solid var(--borde-suave); border-radius: 8px; font-size: 16px; margin-bottom: 30px; }
.footer { text-align: center; padding: 40px; border-top: 1px solid var(--borde-suave); color: var(--texto-secundario); font-size: 0.85em; margin-top: 50px; }

                /* --- Diseño de Agenda --- */
        .agenda-container { margin-top: 20px; }
        
        .evento-card {
            display: flex;
            gap: 20px;
            background: var(--azul-tarjetas);
            border-radius: 12px;
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid var(--borde-suave);
            transition: var(--transicion);
            position: relative;
        }

        .evento-card:hover { transform: translateX(10px); border-color: var(--rojo-marcial); }

        /* Columna de Fecha */
        .fecha-bloque {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 80px;
            background: var(--azul-fondo);
            border-radius: 10px;
            border: 2px solid var(--rojo-marcial);
            padding: 10px;
        }

        .dia-num { font-size: 1.8em; font-weight: 800; color: var(--texto-principal); line-height: 1; }
        .mes-nom { font-size: 0.9em; text-transform: uppercase; color: var(--rojo-brillante); font-weight: 700; }

        /* Contenido del Evento */
        .evento-info { flex-grow: 1; }
        .evento-info h3 { margin: 0 0 5px 0; font-size: 1.3em; color: var(--texto-principal); }
        .tag-evento { 
            display: inline-block; 
            font-size: 0.7em; 
            background: var(--rojo-marcial); 
            color: white; 
            padding: 2px 8px; 
            border-radius: 4px; 
            text-transform: uppercase; 
            margin-bottom: 10px;
            font-weight: 800;
        }
        .evento-detalle { font-size: 0.9em; color: var(--texto-secundario); margin-bottom: 10px; }
        .evento-meta { font-size: 0.85em; color: var(--rojo-brillante); font-weight: 600; }



        #mensaje-vacio { text-align: center; padding: 40px; color: var(--texto-secundario); }

        /* =========================================
   6. GALERÍA Y LIGHTBOX (ACTUALIZADO)
========================================= */
.grid-galeria { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 15px; 
    margin-bottom: 50px; 
}

.item-galeria { 
    border-radius: 10px; 
    overflow: hidden; 
    border: 2px solid var(--borde-suave); 
    cursor: pointer; 
    transition: var(--transicion); 
    background: var(--azul-tarjetas); 
    position: relative;
}

.item-galeria:hover { 
    border-color: var(--rojo-marcial); 
    transform: translateY(-5px); 
    box-shadow: var(--sombra); 
}

.img-galeria { 
    width: 100%; 
    height: 220px; 
    object-fit: cover; 
    transition: transform 0.4s ease; 
    display: block; 
}

.item-galeria:hover .img-galeria { 
    transform: scale(1.08); 
}

/* Efecto Lightbox con controles y pie de foto */
.lightbox { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.95); 
    z-index: 9999; 
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
}

.lightbox.activo { 
    display: flex; 
}

.lightbox-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
    position: relative;
}

.lightbox-img { 
    max-width: 100%; 
    max-height: 80vh; 
    border: 3px solid var(--rojo-marcial); 
    border-radius: 8px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.8); 
}

/* Pie de foto */
.lightbox-caption {
    color: var(--texto-principal);
    margin-top: 15px;
    font-size: 1.1em;
    text-align: center;
    background: var(--azul-tarjetas);
    padding: 10px 25px;
    border-radius: 8px;
    border-bottom: 3px solid var(--rojo-marcial);
    font-weight: 600;
}

/* Botones de navegación y cerrar */
.lightbox-cerrar { 
    position: absolute; 
    top: 20px; right: 30px; 
    color: white; 
    font-size: 40px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: var(--transicion); 
    z-index: 10000;
}

.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 40px;
    cursor: pointer;
    background: rgba(0,0,0,0.6);
    border: 2px solid var(--borde-suave);
    padding: 15px 20px;
    border-radius: 8px;
    transition: var(--transicion);
    z-index: 10000;
    user-select: none;
}

.lightbox-btn:hover { background: var(--rojo-marcial); border-color: var(--rojo-brillante); }
.btn-prev { left: 20px; }
.btn-next { right: 20px; }

.lightbox-cerrar:hover { color: var(--rojo-brillante); transform: scale(1.1); }

/* =========================================
   8. PESTAÑAS (TABS) PARA ACERCA DE
========================================= */
.contenedor-acercade { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    margin-bottom: 50px;
}

@media (min-width: 850px) { 
    .contenedor-acercade { 
        flex-direction: row; 
        align-items: flex-start; 
    } 
}

/* Menú lateral de subdirectorios */
.menu-tabs { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    width: 100%; 
}

@media (min-width: 850px) { 
    .menu-tabs { 
        width: 320px; 
        position: sticky; 
        top: 20px; /* Hace que el menú baje contigo al hacer scroll */
    } 
}

.btn-tab { 
    background: var(--azul-tarjetas); 
    color: var(--texto-secundario); 
    border: 1px solid var(--borde-suave); 
    padding: 15px 20px; 
    text-align: left; 
    font-size: 0.95em; 
    font-weight: 700; 
    cursor: pointer; 
    border-radius: 8px; 
    transition: var(--transicion); 
    text-transform: uppercase;
    font-family: inherit;
}

.btn-tab:hover { 
    background: rgba(255,255,255,0.05); 
    color: var(--texto-principal); 
    border-color: var(--rojo-marcial); 
    transform: translateX(5px);
}

.btn-tab.activo { 
    background: var(--rojo-marcial); 
    color: white; 
    border-color: var(--rojo-brillante); 
    transform: translateX(5px);
}

/* Contenedor del contenido */
.paneles-tabs { 
    flex-grow: 1; 
    background: var(--azul-tarjetas); 
    border: 1px solid var(--borde-suave); 
    border-radius: 12px; 
    padding: 30px; 
    min-height: 400px;
}

.panel-tab { 
    display: none; /* Oculta todos por defecto */
    animation: fadeInTab 0.4s ease; 
}

.panel-tab.activo { 
    display: block; /* Solo muestra el activo */
}

@keyframes fadeInTab { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.panel-tab h2 { 
    color: var(--rojo-brillante); 
    margin-top: 0; 
    margin-bottom: 20px; 
    border-bottom: 2px solid var(--borde-suave); 
    padding-bottom: 10px; 
    text-transform: uppercase; 
}

.panel-tab p { margin-bottom: 15px; color: var(--texto-principal); font-size: 1.05em; }
.panel-tab img { width: 100%; border-radius: 8px; margin-bottom: 20px; border: 2px solid var(--borde-suave); }

/* =========================================
   9. MENÚ DESPLEGABLE (DROPDOWN)
========================================= */
.item-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-contenido {
    display: none;
    position: absolute;
    background-color: var(--azul-tarjetas);
    min-width: 250px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    border: 1px solid var(--borde-suave);
    border-radius: 8px;
    z-index: 1000;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.dropdown-contenido a {
    color: var(--texto-secundario);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid var(--borde-suave);
    transition: var(--transicion);
}

.dropdown-contenido a:last-child {
    border-bottom: none;
}

.dropdown-contenido a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--texto-principal);
    border-left: 4px solid var(--rojo-marcial);
}

/* Mostrar el menú al pasar el mouse (Escritorio) */
@media (min-width: 850px) {
    .item-dropdown:hover .dropdown-contenido {
        display: block;
    }
}

/* Comportamiento en Móviles (Corregido) */
@media (max-width: 849px) {
    .dropdown-contenido {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        display: none; /* Oculto por defecto */
        margin-top: 10px;
        background-color: rgba(0, 0, 0, 0.2); /* Fondo sutil para diferenciarlo */
        border-radius: 8px;
    }
    
    /* El menú se muestra solo cuando JavaScript le añade la clase 'desplegado' */
    .item-dropdown.desplegado .dropdown-contenido {
        display: block;
    }
    
    .dropdown-contenido a {
        padding: 12px 16px;
        border-bottom: 1px solid var(--borde-suave);
    }
    
    .dropdown-contenido a:last-child {
        border-bottom: none;
    }
}