/*? ═══════════════════════════════════════════════════════════════════════════
    IESDE · ENCABEZADO — hoja del parcial
    ---------------------------------------------------------------------------
    FUENTE CANÓNICA del encabezado. Las demos de `demos-uikit/` llevan hoy una
    COPIA de este bloque dentro de su `styles.css`; si tocas algo aquí, tócalo
    también allá hasta que producción lo consuma por `include`.

    Depende de, y en este orden:
      core/ui.css  ·  brands/iesde.css  ·  components/panorama/panorama.css

    Reserva los prefijos `pg-nav*` y `pg-mega*`: una página que los use para otra
    cosa chocará con el parcial.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NAVEGACIÓN ─────────────────────────────────────────────────────────── */

/*? Tokens medidos en `panorama.css`, declarados SOBRE el propio nodo (0-2-0):
    el componente los declara en su regla, así que en un ancestro serían inertes. */
.pg-nav.upaep__panorama {
    --upaep-panorama-bar-bg: var(--iesde-navy-deep);
    --upaep-panorama-bar-shadow: none;
    --upaep-panorama-bar-min-height: 84px;
    --upaep-panorama-bar-padding: 12px var(--pg-gutter);
    --upaep-panorama-item-fz: 14px;
    --upaep-panorama-item-fw: 400;

    position: sticky;
    top: 0;
}

/*? ⚠ La hamburguesa y el botón de CERRAR del cajón comparten token
    (`--upaep-panorama-toggle-color`). La hamburguesa está sobre la barra navy y
    necesita blanco —su default, `--ui-text-strong`, es azul marino e invisible
    ahí—, pero el botón de cerrar vive dentro del cajón BLANCO: en blanco
    desaparece. Como el cierre solo existe mientras la raíz está `is-elevated`, el
    blanco se acota a cuando NO lo está, y al abrir manda el color del componente. */
.pg-nav.upaep__panorama:not(.is-elevated) {
    --upaep-panorama-toggle-color: #FFFFFF;
    --upaep-panorama-toggle-hover-bg: rgba(255, 255, 255, .14);
}

/*? ⚠ El z-index del sticky SOLO mientras el cajón está cerrado. Panorama eleva su
    raíz con `.is-elevated { z-index: var(--upaep-panorama-overlay-zindex) }`, que
    pesa lo mismo que esta regla (0-2-0) pero carga ANTES: sin el `:not`, el 60 de
    aquí gana, el `<nav>` crea su contexto de apilamiento y el cajón queda
    **atrapado bajo su propio backdrop**. */
.pg-nav.upaep__panorama:not(.is-elevated) {
    z-index: 60;
}

/*? ⚠ El blanco de los enlaces es SOLO para la barra navy. En móvil los mismos
    items se mudan a la superficie del cajón, que es blanca: pintarlos de blanco
    ahí los hace desaparecer —el menú se abría vacío—. Por eso el color se acota
    al estado de escritorio, y en móvil manda el del componente. */
.pg-nav.upaep__panorama:not(.is-mobile) {
    --upaep-panorama-item-color: #FFFFFF;
    --upaep-panorama-item-hover-color: #FFFFFF;
    --upaep-panorama-item-hover-bg: rgba(255, 255, 255, .14);
    --upaep-panorama-item-active-color: #FFFFFF;
    --upaep-panorama-item-active-bg: transparent;
    --upaep-panorama-item-open-color: #FFFFFF;
    --upaep-panorama-item-open-bg: rgba(255, 255, 255, .14);
}

/*? La barra ocupa TODO el ancho de la pantalla, como el original: el navy llega
    a los dos bordes y es su contenido el que se centra. */
.pg-nav .upaep__panorama-bar {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.pg-nav .upaep__panorama-link,
.pg-nav .upaep__panorama-trigger-label {
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/*? ⚠ EL ALTO DEL LOGO SE PIDE POR TOKEN, no declarando `.pg-nav-logo`.
    Panorama anida `& img` dentro de `.upaep__panorama-brand`, lo que compila a
    `.upaep__panorama-brand img` (0-1-1) y gana a `.pg-nav-logo` (0-1-0): la
    regla local se ignoraba en silencio y el logo salía a los 36px del
    componente (`--upaep-panorama-brand-logo-height: 2.25rem`) en las CUATRO
    pantallas, cuando los lienzos lo ponen a 46 (Ecos, a 50). Con el token en la
    raíz del componente sí manda. `object-fit` no lo toca Panorama, así que esa
    sí puede quedarse en la clase. */
.pg-nav {
    --upaep-panorama-brand-logo-height: 46px;
}

.pg-nav-logo {
    object-fit: contain;
}

/*? Maestro-detalle del mega menú: es del diseño original, no de Panorama. */
.pg-mega {
    display: grid;
    gap: 1px;
    width: 100%;
    min-width: 0;
}

/*? ⚠ En la superficie móvil el panel hereda `--upaep-panorama-panel-width:
    max-content` y con una rejilla anidada dentro colapsa: medido, el panel salía
    de **16px de ancho** con `overflow: hidden`, así que el contenido existía pero
    se recortaba entero —se veía la línea del `gap` y nada más—. Dentro del cajón
    el panel ocupa el ancho disponible y el maestro-detalle se apila. */
.pg-nav.is-mobile .upaep__panorama-panel {
    width: 100%;
    max-width: none;
}

.pg-nav.is-mobile .pg-mega-lineas,
.pg-nav.is-mobile .pg-mega-grupo {
    width: 100%;
}

.pg-mega-lineas {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: #F4F7F7;
    border-radius: 9px;
}

.pg-mega-linea {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--iesde-navy);
    font-family: var(--ui-font-base);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease-out, color .16s ease-out;
}

.pg-mega-linea span {
    flex: 1 1 auto;
}

.pg-mega-linea .pg-svg {
    width: 13px;
    height: 13px;
}

.pg-mega-linea[aria-current="true"] {
    background: var(--iesde-green-active);
    color: #FFFFFF;
}

.pg-mega-grupo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 14px 14px 16px;
    min-width: 0;
}

.pg-mega-entrada {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-height: 44px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .16s ease-out;
}

.pg-mega-entrada:hover {
    background: #F1F7F6;
}

.pg-mega-sigla {
    flex: 0 0 auto;
    font-family: var(--ui-font-base);
    font-weight: 700;
    font-size: 13px;
    color: var(--iesde-turquoise-deep);
}

.pg-mega-nombre {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--iesde-navy);
}

@media (width >=64rem) {
    .pg-mega {
        grid-template-columns: 38% 1fr;
        gap: 0;
    }
}