/* ==========================================================================
   NAVEGACIÓN COMPACTA — por medida real, no por ancho de pantalla.
   ==========================================================================

   EL PROBLEMA. El diseño aprobado plegaba el menú en la hamburguesa a los
   1420 px. Esa cifra se eligió a ojo, y por eso fallaba: en español la barra
   necesita hasta 1467 px, así que a 1440 se salía 35 px. En inglés cabía de
   sobra y la misma regla la plegaba antes de tiempo.

   Un ancho de pantalla no dice si el contenido cabe. Dice cuánto sitio hay.
   Lo que hace falta saber es si lo que tiene que entrar es más grande que el
   hueco, y eso depende del idioma, de si hay sesión, del nombre de la persona
   y de cuántos elementos tenga el menú.

   LA REGLA. `nav-compacta.js` mide lo que la barra NECESITA y lo compara con
   lo que TIENE. Si no cabe, pone `data-compacto="true"` en la cabecera y estas
   reglas pliegan el menú. Nada más.

   LO QUE NO SE TOCA, y era el motivo de que esto llevara meses pendiente:
   ni el tamaño de letra, ni los textos, ni el espaciado, ni una excepción
   para el español. El menú se pliega entero, que es lo que el diseño ya hacía
   en móvil; sólo cambia CUÁNDO.
   ========================================================================== */

/* La hamburguesa aparece exactamente cuando el menú se pliega. */
.topnav[data-compacto="true"] .navtoggle {
  display: inline-flex;
}

/* El menú desaparece de la fila y pasa a colgar de la hamburguesa, igual que
   en móvil: mismo panel, mismo comportamiento. */
.topnav[data-compacto="true"] .topnav__nav {
  position: absolute;
  top: calc(100% + var(--s-2));
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--surface-raised, #150A22);
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: var(--r-xl, 20px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  z-index: 60;
}

.topnav[data-compacto="true"] .topnav__nav[data-open="true"] {
  display: flex;
  animation: hy-drop var(--dur, 180ms) var(--ease, ease);
}

.topnav[data-compacto="true"] .topnav__nav .menu {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-1);
  width: 100%;
}

.topnav[data-compacto="true"] .topnav__nav .menu__item {
  width: 100%;
}

.topnav[data-compacto="true"] .topnav__nav .menu__link {
  width: 100%;
  justify-content: space-between;
  padding: var(--s-2) var(--s-3);
}

/* TODO A LA VISTA (24/09/2026). Antes cada sección era un segundo nivel
   plegado dentro de la hamburguesa: había que abrir el menú y luego cada
   puerta para descubrir qué había. Ahora la puerta es el título de su
   sección y sus enlaces van debajo, en rejilla, siempre desplegados. */
.topnav[data-compacto="true"] .topnav__nav .menu__item[data-dropdown] {
  margin-top: var(--s-1);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-hairline, rgba(255, 255, 255, .07));
}

.topnav[data-compacto="true"] .topnav__nav .menu__item[data-dropdown] > .menu__link {
  justify-content: flex-start;
  height: auto;
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-12, 12px);
  font-weight: var(--fw-black, 800);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  pointer-events: none;
}

.topnav[data-compacto="true"] .topnav__nav .menu__item[data-dropdown] > .menu__link .menu__caret {
  display: none;
}

/* Los desplegables dejan de flotar: dentro del panel van en el flujo, si no
   se salen por abajo en pantallas cortas. */
.topnav[data-compacto="true"] .topnav__nav .dropdown {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px var(--s-2);
  min-width: 0;
  padding: 0 0 var(--s-2);
  border: 0;
  box-shadow: none;
  background: transparent;
  animation: none;
}

.topnav[data-compacto="true"] .topnav__nav .dropdown::before,
.topnav[data-compacto="true"] .topnav__nav .dropdown__titulo {
  display: none;
}

.topnav[data-compacto="true"] .topnav__nav .dropdown__grupo {
  display: contents;
}

/* La barra necesita ser el ancla del panel desplegado. */
.topnav[data-compacto="true"] .topnav__bar {
  position: relative;
}

/* ==========================================================================
   EL ESTADO «MIDIENDO» — cuánto pide la barra de verdad.
   ==========================================================================

   Para saber si el contenido cabe hay que saber cuánto ocupa SIN que lo
   aprieten. Y en una fila flexible el contenido se deja apretar: si se mide
   tal cual está, una barra estrujada mide exactamente lo que tiene y contesta
   siempre que sí. Es el fallo que tuve: entre 1.920 y 1.200 px la barra
   cambiaba de estado cinco veces porque cada ancho daba una medida distinta
   de lo mismo.

   Aquí se la saca del flujo, se le quita el tope y se le pide `max-content`:
   el ancho que pediría si nadie la apretase. Es invisible y dura un fotograma
   —se mide y se deshace en la misma línea de código— y devuelve un número que
   no depende del ancho de la ventana.

   `!important` porque esto tiene que ganarle a cualquier regla del diseño
   durante ese instante. No pinta nada: sólo mide.
   ========================================================================== */
.topnav[data-compacto="midiendo"] .topnav__bar {
  position: absolute !important;
  left: -99999px !important;
  top: 0 !important;
  width: max-content !important;
  max-width: none !important;
  visibility: hidden !important;
}

/* Mientras se mide, en el primer pintado, no se enseña un estado a medias. */
.topnav:not([data-compacto]) .topnav__nav {
  visibility: hidden;
}