/**
 * Navegación responsive (F1) — un solo sistema para la portada y las páginas
 * internas.
 *
 * `header.php` recorre `otrn_nav_estructura()` (functions.php) y pinta la misma
 * estructura en los tres modos; `assets/otrn-menu.js` solo gobierna el estado
 * (abierto/cerrado, aria, foco, Escape). El CSS decide qué se ve en cada ancho,
 * sin repetir ningún punto de corte en el JS.
 *
 *   - Escritorio (≥ 1152 px): fila completa con desplegables. Incluye a quien
 *     tiene sesión: agrupar los destinos deja la fila en 1066 px en el peor
 *     caso (portada + sesión), así que la hamburguesa nunca hace falta aquí.
 *   - Tableta ancha (910–1151 px): la misma fila con los cinco destinos de mayor
 *     prioridad y «Más» (Material de apoyo y, con sesión, Autoevaluación).
 *   - Tableta estrecha (680–909 px): la fila conserva Inicio, Datos y Buenas
 *     prácticas; «Más» reúne Observatorio, Planificación, Material de apoyo y
 *     Autoevaluación.
 *   - Móvil (≤ 679 px): panel lateral accesible con acordeones (mismo markup:
 *     el desplegable de escritorio pasa a ser un acordeón dentro del panel).
 *
 * En tableta la copia de cada grupo colapsado solo se muestra dentro de «Más»
 * cuando su original está oculto (ver «Colapso progresivo»), de modo que nunca
 * hay dos veces el mismo destino a la vista.
 *
 * Puntos de corte medidos en navegador (texto a 13,5 px). El contenedor de la
 * cabecera (`.otrn .wrap`) nunca pasa de 1440 px, así que el ancho útil real es
 * 1376 px (1440 − 32 px de padding por lado) y el peor caso siempre es la
 * portada, cuyo logo mide 56 px de alto (≈158 px de ancho) frente a 46 px
 * (≈130 px) en las internas. Fila natural medida (ancho del contenido, sin el
 * padding del contenedor) y viewport mínimo que la contiene:
 *
 *   - Fila completa: 1066 px → 1130 px (portada + sesión).
 *   - Tableta ancha:  831 px →  895 px (portada).
 *   - Tableta estrecha: 590 px → 654 px (portada).
 *
 * Los umbrales (1152 / 910 / 680) dejan 22, 15 y 26 px de holgura sobre esos
 * mínimos, para que ninguna etiqueta llegue a partirse ni a desbordar.
 *
 * Notas de arquitectura:
 *   - Selectores anclados a `.otrn-header` para ganar por especificidad a
 *     `style.css` sin depender del orden de carga.
 *   - Panel lateral: `position:fixed` a altura completa, anclado con `top:0` y
 *     `height:100vh` porque en la portada el `backdrop-filter` de la cabecera la
 *     convierte en su bloque contenedor (por eso no se usa `inset`/`bottom:0`).
 *   - Barra de administración de WordPress: ocupa los 32 px superiores (46 px a
 *     ≤782 px) con `z-index:99999`. El `html{margin-top}` de core solo desplaza
 *     el flujo estático, así que la cabecera `fixed` de la portada se desplaza a
 *     mano y el panel se ancla bajo la barra.
 *
 * Tokens: solo los globales de `style.css` (`--paper`, `--grey`, `--blue-dark`,
 * `--primary`, `--primary-dark`, `--primary-soft`, `--text3`, `--radius-sm`).
 * No se definen tokens nuevos.
 */

/* ---- Base compartida por los tres modos ------------------------------ */
.otrn-header .otrn-nav__lista{
  display:flex; align-items:center; gap:18px;
  margin:0; padding:0; list-style:none;
}
.otrn-header .otrn-nav__item{position:relative; display:flex; align-items:center;}

/* Enlaces y botones de grupo comparten tipografía y comportamiento: la fila
   nunca se estira ni parte etiquetas (`flex:0 0 auto` + `nowrap`). */
.otrn-header .otrn-nav a,
.otrn-header .otrn-nav__boton{
  flex:0 0 auto;
  font:inherit; font-size:13.5px; font-weight:600; line-height:1.3;
  color:inherit; background:none; border:0; padding:0; margin:0;
  display:inline-flex; align-items:center; white-space:nowrap;
  text-decoration:none; cursor:pointer;
}
/* Especificidad deliberada (5 clases) para que el estado abierto y el hover
   también ganen en la portada, donde `otrn-arauco.css` fija el color de los
   enlaces del nav con (0,4,1). Se usa el azul accesible del sistema
   (`--primary-dark`, 7,4:1 sobre blanco) y no `--primary` (4,41:1), que no
   alcanza el contraste AA en texto de 13,5 px. */
.otrn-header .otrn-nav .otrn-nav__lista .otrn-nav__item .otrn-nav__enlace:hover,
.otrn-header .otrn-nav .otrn-nav__lista .otrn-nav__item .otrn-nav__boton:hover,
.otrn-header .otrn-nav .otrn-nav__lista .otrn-nav__item.is-abierto > .otrn-nav__boton,
.otrn-header .otrn-nav .otrn-nav__lista .otrn-nav__item .otrn-nav__boton[aria-current="true"]{
  color:var(--primary-dark);
}
/* Destino actual. `style.css` ya trae `.otrn-nav a.active{color:var(--primary-dark)}`
   (0,2,1) —regla que hasta ahora nunca se aplicaba—, así que se sobreescribe
   aquí por contraste (AA) y por coherencia con la portada, que ya pinta su
   enlace activo con el azul accesible. */
.otrn-header .otrn-nav .otrn-nav__enlace.active,
.otrn-header .otrn-nav .otrn-nav__boton.active,
.otrn-header .otrn-nav .otrn-subnav a.active{
  color:var(--primary-dark);
}
.otrn-header .otrn-nav__enlace:focus-visible,
.otrn-header .otrn-nav__boton:focus-visible,
.otrn-header .otrn-subnav a:focus-visible{
  outline:2px solid var(--primary-dark); outline-offset:3px; border-radius:4px;
}

/* Indicador de desplegable: galón discreto dibujado con bordes. La opacidad se
   queda en 0,65 (≈5:1 sobre blanco) para que el indicador se perciba aunque el
   galón sea decorativo. */
.otrn-header .otrn-nav__caret{
  width:6px; height:6px; margin-left:7px; flex:0 0 auto;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .2s ease; opacity:.65;
}
.otrn-header .otrn-nav__item.is-abierto > .otrn-nav__boton .otrn-nav__caret{
  transform:rotate(-135deg) translate(-2px,-2px);
}

/* Desplegable: tarjeta discreta con los tokens del sitio. */
.otrn-header .otrn-subnav{
  position:absolute; top:calc(100% + 12px); left:-14px; z-index:62;
  min-width:220px; margin:0; padding:10px 8px; list-style:none;
  background:var(--paper); border:1px solid var(--grey); border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(16,28,40,.10);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Abierto por JS (`is-abierto`) o, si el script no corre, por teclado/ratón. */
.otrn-header .otrn-nav__item.is-abierto > .otrn-subnav,
.otrn-header:not(.otrn-js) .otrn-nav__item:focus-within > .otrn-subnav,
.otrn-header:not(.otrn-js) .otrn-nav__item:hover > .otrn-subnav{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
/* Cada destino es una fila con aire propio: 12 px arriba y abajo, 2 px de
   descanso entre filas y el resalte insertado (los 8 px de relleno del panel),
   no de borde a borde. `border:0` neutraliza el borde inferior que
   `otrn-landing.css` aplica a `.otrn-nav a` entre 680 y 768 px.
   Ojo con la cascada: el restablecimiento del modo fila
   (`.otrn-header .otrn-nav a`, más abajo) tiene la misma especificidad que esta
   regla, así que si volviera a apuntar a cualquier `a` del nav anularía el
   relleno —fue justo el defecto por el que los destinos se veían pegados— y por
   eso allí se apunta a `.otrn-nav__enlace` y `.otrn-nav__boton`. */
.otrn-header .otrn-subnav a{
  display:block; padding:12px; border:0; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600;
}
.otrn-header .otrn-subnav > li + li{margin-top:2px;}
.otrn-header .otrn-subnav a:hover,
.otrn-header .otrn-subnav a:focus-visible{
  background:var(--primary-soft);
}

/* «Más» (tableta): panel con los grupos que no caben en la fila. Va anclado a
   la derecha porque es el último destino de la fila: si creciera hacia la
   derecha, su panel (oculto pero maquetado) añadiría desborde horizontal a la
   página en las internas, donde la cabecera es `static`. */
.otrn-header .otrn-subnav--mas{
  left:auto; right:0;
  min-width:250px; max-height:min(70vh,520px); overflow-y:auto; padding:12px 8px;
}
/* Título de grupo dentro de «Más». Con el gris `--text2` (#707070) se queda en
   4,95:1 sobre blanco, por encima del mínimo AA para texto de 10,5 px, y sigue
   leyéndose como texto secundario. Comparte el sangrado de 12 px de las
   filas para que títulos y destinos queden alineados. */
.otrn-header .otrn-mas__titulo{
  margin:0; padding:10px 12px 4px;
  font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text2);
}
.otrn-header .otrn-subnav--mas .otrn-mas__grupo + .otrn-mas__grupo .otrn-mas__titulo{padding-top:14px;}
.otrn-header .otrn-mas__lista{margin:0 0 8px; padding:0; list-style:none;}

/* Por defecto la fila muestra todos los grupos y «Más» no existe. */
.otrn-header .otrn-nav__item--mas{display:none;}
.otrn-header .otrn-mas__grupo{display:none;}

/* ---- Modo fila (escritorio y tableta) -------------------------------- */
/* Repone el layout en línea frente al panel de `otrn-landing.css` (≤768 px,
   solo portada) cuando el ancho aún permite la fila. */
@media (min-width:680px){
  .otrn-header .otrn-nav{
    display:block; position:static; inset:auto; width:auto; height:auto;
    max-height:none; margin-left:auto; padding:0; overflow:visible;
    background:none; border:0; box-shadow:none; transform:none;
    visibility:visible; z-index:auto; transition:none;
  }
  /* Restablecimiento del panel de la portada para la fila de escritorio. Se
     apunta a los dos elementos reales de la fila (`__enlace` y `__boton`) y no
     a todo `a` del nav: con la misma especificidad que
     `.otrn-header .otrn-subnav a`, un selector genérico anulaba el relleno de
     los destinos del desplegable y los dejaba pegados. */
  .otrn-header .otrn-nav__enlace,
  .otrn-header .otrn-nav__boton{
    padding:0; border:0; background:none;
  }
  /* Puente de ratón sobre el hueco de 12 px del desplegable. Los paneles van
     `top:calc(100% + 12px)`, de modo que el puntero cruza una franja que no
     pertenece al grupo y `mouseleave` (o el `:hover` del respaldo sin JS) cerraba
     la tarjeta justo antes de llegar a ella. El puente cuelga del propio grupo
     —que no recorta—, mide exactamente el hueco y no invade el botón, así que no
     intercepta clics. Va aquí y no dentro del panel porque el de «Más» lleva
     `overflow-y:auto` y recortaría el pseudo-elemento. Solo en modo fila: en el
     panel lateral (≤679 px) el subnav es `position:static` (acordeón) y este
     puente taparía el botón. */
  .otrn-header .otrn-nav__item--grupo::after,
  .otrn-header .otrn-nav__item--mas::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:12px;
  }
}

/* Colapso progresivo en tableta: lo que no cabe se ofrece en «Más». */
@media (min-width:680px) and (max-width:1151px){
  .otrn-header .otrn-nav__lista{gap:14px;}
  .otrn-header .otrn-nav__item--mas{display:flex;}
  .otrn-header .otrn-nav__item--grupo[data-prioridad="5"],
  .otrn-header .otrn-nav__item--grupo[data-prioridad="6"]{display:none;}
  .otrn-header .otrn-mas__grupo[data-prioridad="5"],
  .otrn-header .otrn-mas__grupo[data-prioridad="6"]{display:block;}
}
@media (min-width:680px) and (max-width:909px){
  .otrn-header .otrn-nav__item--grupo[data-prioridad="3"],
  .otrn-header .otrn-nav__item--grupo[data-prioridad="4"]{display:none;}
  .otrn-header .otrn-mas__grupo[data-prioridad="3"],
  .otrn-header .otrn-mas__grupo[data-prioridad="4"]{display:block;}
}

/* ---- Icono de cuenta ------------------------------------------------- */
/* Sin borde, sin fondo, sin forma de píldora: solo el icono. El área táctil
   son 44×44 px, invisibles (el icono mide 21 px y queda centrado). */
.otrn-header .otrn-cuenta{position:relative; flex:0 0 auto; margin-left:20px; z-index:61;}
.otrn-header .otrn-cuenta__boton{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; margin:0;
  background:none; border:0; border-radius:0; box-shadow:none;
  color:inherit; cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:color .18s ease, opacity .18s ease;
}
.otrn-header .otrn-cuenta__icono{display:block; width:21px; height:21px;}
.otrn-header .otrn-cuenta__boton:hover{color:var(--primary-dark);}
.otrn-header .otrn-cuenta__boton:active{opacity:.7;}
.otrn-header .otrn-cuenta__boton:focus-visible{outline:2px solid var(--primary-dark); outline-offset:2px; border-radius:6px;}
.otrn-header .otrn-cuenta__panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:62;
  min-width:190px; padding:10px 8px;
  background:var(--paper); border:1px solid var(--grey); border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(16,28,40,.10);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Mismo puente de ratón que los desplegables del nav, sobre los 8 px de hueco.
   Con JS el menú de cuenta se abre al pulsar (no depende del puntero); esto
   cubre el respaldo sin JS, donde la apertura es por `:hover`. */
.otrn-header .otrn-cuenta__panel::before{
  content:""; position:absolute; left:0; right:0; top:-8px; height:8px;
}
.otrn-header .otrn-cuenta.is-abierto .otrn-cuenta__panel,
.otrn-header:not(.otrn-js) .otrn-cuenta:hover .otrn-cuenta__panel,
.otrn-header:not(.otrn-js) .otrn-cuenta:focus-within .otrn-cuenta__panel{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
/* Misma fila que los desplegables del nav, para que ambos menús se lean igual. */
.otrn-header .otrn-cuenta__panel a{
  display:block; padding:12px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;
}
.otrn-header .otrn-cuenta__panel a:hover,
.otrn-header .otrn-cuenta__panel a:focus-visible{background:var(--primary-soft);}

/* ---- Botón de menú (hamburguesa) ------------------------------------- */
.otrn-header .otrn-burger{
  display:none; flex:0 0 auto; width:46px; height:46px; margin-left:6px;
  background:none; border:0; cursor:pointer; padding:0; position:relative; z-index:61;
}
.otrn-header .otrn-burger__box{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 11px;}
.otrn-header .otrn-burger__line{display:block; height:2px; width:100%; background:var(--blue-dark); border-radius:2px; transition:transform .28s ease, opacity .2s ease;}
.otrn-header .otrn-burger.is-active .otrn-burger__line:nth-child(1){transform:translateY(8px) rotate(45deg);}
.otrn-header .otrn-burger.is-active .otrn-burger__line:nth-child(2){opacity:0;}
.otrn-header .otrn-burger.is-active .otrn-burger__line:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.otrn-header .otrn-burger:focus-visible{outline:2px solid var(--primary-dark); outline-offset:3px;}

/* ---- Barra de administración de WordPress ---------------------------- */
/* La cabecera de la portada es `fixed` (`.otrn.home .otrn-header{top:0}`, en
   otrn-arauco.css): hay que bajarla por debajo de la barra. Se añade `.home`
   para ganar en especificidad —y porque esa regla es justo la que fija el
   `top:0`—. En las páginas internas la cabecera es `static` y la desplaza el
   margen de core, así que ahí `top` no tiene efecto. */
body.admin-bar.home .otrn-header{ top:32px; }
body.admin-bar.home .otrn-header .otrn-nav{ max-height:calc(100vh - 32px); }
body.admin-bar:not(.home) .otrn-header .otrn-nav{ top:32px; max-height:calc(100vh - 32px); }
@media screen and (max-width:782px){
  body.admin-bar.home .otrn-header{ top:46px; }
  body.admin-bar.home .otrn-header .otrn-nav{ max-height:calc(100vh - 46px); }
  body.admin-bar:not(.home) .otrn-header .otrn-nav{ top:46px; max-height:calc(100vh - 46px); }
}

/* ---- Modo panel (móvil) ---------------------------------------------- */
/* Mismo markup que la fila: el desplegable se vuelve acordeón y el nav, panel
   lateral a altura completa con captura de foco (assets/otrn-menu.js). */
@media (max-width:679px){
  .otrn-header .otrn-burger{display:flex;}
  .otrn-header .otrn-cuenta{margin-left:auto;}
  .otrn-header .otrn-nav{
    display:flex; flex-direction:column;
    position:fixed; top:0; right:0;
    height:100vh; max-height:100vh;
    width:min(86vw,340px);
    margin:0; padding:88px 24px 32px;
    background:var(--paper);
    border-left:1px solid var(--grey);
    box-shadow:-20px 0 60px rgba(16,28,40,.18);
    overflow-y:auto;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .34s ease, visibility 0s linear .34s;
    z-index:60;
  }
  body.otrn-menu-abierto .otrn-header .otrn-nav{
    transform:translateX(0); visibility:visible;
    transition:transform .34s ease, visibility 0s linear 0s;
  }
  .otrn-header .otrn-nav__lista{flex-direction:column; align-items:stretch; gap:0;}
  .otrn-header .otrn-nav__item{display:block;}
  /* En el panel lateral sobra «Más»: se listan los grupos completos. */
  .otrn-header .otrn-nav__item--mas{display:none;}
  .otrn-header .otrn-nav a,
  .otrn-header .otrn-nav__boton{
    width:100%; justify-content:space-between;
    font-size:16px; font-weight:600; padding:13px 0;
    border-bottom:1px solid var(--primary-soft);
  }
  .otrn-header .otrn-nav__caret{margin-left:auto;}
  /* Acordeón: el panel absoluto pasa a lista en línea, cerrada por defecto. */
  .otrn-header .otrn-subnav{
    position:static; min-width:0; max-height:none; overflow:visible;
    display:none; margin:0; padding:0 0 6px 14px;
    background:none; border:0; border-radius:0; box-shadow:none;
    opacity:1; visibility:visible; transform:none; transition:none;
  }
  .otrn-header .otrn-nav__item.is-abierto > .otrn-subnav{display:block;}
  .otrn-header .otrn-subnav > li + li{margin-top:0;}
  .otrn-header .otrn-subnav a{
    display:block; font-size:15px; font-weight:600; padding:11px 0;
    border-bottom:1px solid var(--grey); border-radius:0;
  }
  .otrn-header .otrn-nav a:focus-visible,
  .otrn-header .otrn-nav__boton:focus-visible{outline:2px solid var(--primary-dark); outline-offset:2px;}
}

/* ---- Accesibilidad: movimiento reducido ------------------------------ */
@media (prefers-reduced-motion:reduce){
  .otrn-header .otrn-burger__line,
  .otrn-header .otrn-nav,
  .otrn-header .otrn-subnav,
  .otrn-header .otrn-nav__caret,
  .otrn-header .otrn-cuenta__panel,
  .otrn-header .otrn-cuenta__boton{transition:none;}
}