/* ============================================================================
 * nav.css — MENÚ DE LA CUENTA del ecosistema iustitia.mx
 * ----------------------------------------------------------------------------
 * Fuente única. Nace de Clausia/web/public/app/nav.css (probado con clientes),
 * con TODOS los nombres de clase reescritos con el prefijo `ius-`.
 *
 * Decidido en _branding/_DISENO_MENU_AGRUPADO_2026-08-02.md:
 *   - PROHIBIDO reutilizar .nav-menu, .nav-group, .nav-top, .nav-toggle y
 *     .nav-links: este último choca a la vez con el Portal, Clausia y Deudia.
 *   - El desplegable es <details>/<summary> nativo: abre y cierra sin una sola
 *     línea de programa. Los hermanos comparten name="ius-menu", así el
 *     navegador cierra uno al abrir el otro, gratis.
 *   - El corte a menú de hamburguesa sube a 1024px (piso de seguridad del hueco
 *     de tabletas 601-1150). Encima, nav.js mide desbordamiento real.
 *   - Renglones de 44px mínimo (ergonomía táctil).
 *
 * Este archivo se COPIA a cada producto (no se carga desde iustitia.mx: el
 * candado de seguridad versionado no permite hojas de estilo desde ese origen).
 * El candado `_branding/check_nav_unico.py` verifica que las copias sean
 * idénticas byte por byte.
 *
 * VERSIÓN: 3  ← subir junto con la VERSION del sw.js de cada producto.
 *   v2 (2026-08-03): grupos desplegables en la barra de arriba (.ius-grupo /
 *   .ius-sub) para Clausia, que ya tenía Analizar ▾ · Redactar ▾ · Comparar ▾ y
 *   cuyos clientes viven con esa forma. Es ADITIVO: los productos que no emiten
 *   grupos no cambian ni un píxel.
 *   v3 (2026-08-17): el menú entra en la paleta y en la escala del ecosistema.
 *   Tres cosas, ninguna de forma, todas de valor:
 *     · Los RESPALDOS contradecían el patrón oro: `--line` caía a #E4E1DA
 *       (el bueno es #E6DFD2), `--cream` a #F7F4EE (#FAF7F2) y `--radius` a
 *       12px (10px). Solo se ven si `app-shell.css` no carga — que es
 *       justamente cuando más se nota que el menú es de otro producto.
 *     · Los tonos escritos a mano que ya tenían token pasaron al token
 *       (#1a1a1a → --ink, #5b6675 → --muted), y el punto rojo de aviso usaba
 *       #E5484D mientras el «Salir» de dos renglones abajo usaba #B4232A:
 *       ahora el menú tiene UN rojo.
 *     · La letra baja de 7 tamaños sueltos (.7 · .72 · .78 · .85 · .9 · .92 ·
 *       1.3 rem) a los 4 de la escala del ecosistema (12 · 13 · 14 · 22 px).
 *       Eso además saca de pantalla el texto de 11.2 y 11.5 px que tenían el
 *       contador y las iniciales del avatar. Ningún valor se movió más de un
 *       7%, así que a ojo el menú es el mismo.
 *   Esquinas: 6px no está en la escala (4 · 8 · 10 · 16) y pasó a 8px.
 * ========================================================================== */

/* Solo para lectores de pantalla. */
.ius-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Barra ────────────────────────────────────────────────────────────────── */
.ius-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
}

/* Botón/enlace de primer nivel (Nuevo pliego, Historial, …) */
.ius-nav .ius-top {
  color: var(--white, #fff);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font: 600 .875rem/1 'Inter', system-ui, sans-serif;
  padding: .45rem .6rem;
  border-radius: 8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.ius-nav .ius-top:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.ius-nav .ius-top:focus-visible { outline: 2px solid var(--gold, #C9A86B); outline-offset: 2px; }
.ius-nav .ius-top.ius-activo {
  background: rgba(201,168,107,.22);
  box-shadow: inset 0 -2px 0 var(--gold, #C9A86B);
}

/* Contador (Tareas, Coincidencias, Avisos): NUNCA se esconde en el panel. */
.ius-nav .ius-contador {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--gold, #C9A86B); color: var(--ink, #1A1F2B);
  font: 700 .75rem/1 'Inter', system-ui, sans-serif;
}

/* ── Grupo desplegable de la barra de arriba (Analizar ▾ · Redactar ▾ …) ──── */
/* Mismo <details> del menú de la cuenta y mismo name="ius-menu": el navegador
 * cierra uno al abrir otro, gratis. Los renglones de adentro son `.ius-item`,
 * los mismos del panel, para que todo el ecosistema se vea igual por dentro. */
.ius-grupo { position: relative; }
.ius-grupo > summary { list-style: none; }
.ius-grupo > summary::-webkit-details-marker { display: none; }
.ius-grupo > summary::marker { content: ''; }
.ius-grupo[open] > summary .ius-caret { transform: rotate(180deg); }

.ius-sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  min-width: 230px;
  max-width: min(320px, calc(100vw - 24px));
  border: 1px solid var(--line, #E6DFD2);
  border-radius: var(--radius, 10px);
  box-shadow: 0 12px 32px rgba(0,0,0,.20);
  padding: .35rem;
  z-index: 60;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-height: 700px) {
  .ius-sub { max-height: calc(100vh - 90px); }
}

/* ── Menú de la cuenta (details/summary nativo) ───────────────────────────── */
.ius-cuenta { position: relative; }
.ius-cuenta > summary {
  list-style: none;
  cursor: pointer;
  color: var(--white, #fff);
  font: 600 .875rem/1 'Inter', system-ui, sans-serif;
  padding: .35rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.22);
}
.ius-cuenta > summary::-webkit-details-marker { display: none; }
.ius-cuenta > summary::marker { content: ''; }
.ius-cuenta > summary:hover { background: rgba(255,255,255,.14); }
.ius-cuenta > summary:focus-visible { outline: 2px solid var(--gold, #C9A86B); outline-offset: 2px; }

.ius-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold, #C9A86B); color: var(--ink, #1A1F2B);
  font: 700 .75rem/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
}
.ius-cuenta-nombre {
  max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ius-caret { font-size: .75rem; opacity: .85; }
.ius-cuenta[open] > summary .ius-caret { transform: rotate(180deg); }

/* Punto de aviso cuando el saldo está bajo (el número vive dentro del panel,
 * pero el aviso no se pierde de vista). */
.ius-cuenta > summary .ius-punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: #B4232A; flex: none;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.ius-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  min-width: 250px;
  max-width: min(320px, calc(100vw - 24px));
  border: 1px solid var(--line, #E6DFD2);
  border-radius: var(--radius, 10px);
  box-shadow: 0 12px 32px rgba(0,0,0,.20);
  padding: .35rem;
  z-index: 60;
  /* Convivencia con el botón flotante para saltar entre productos: el panel
   * nunca crece más allá de la ventana y se desplaza por dentro. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Pantallas bajas (1366x768 típica): el botón flotante vive abajo a la derecha. */
@media (max-height: 700px) {
  .ius-panel { margin-right: 60px; max-height: calc(100vh - 90px); }
}

.ius-panel-cab {
  padding: .55rem .7rem .5rem;
  border-bottom: 1px solid var(--line, #E6DFD2);
  margin-bottom: .3rem;
}
.ius-panel-cab strong {
  display: block;
  color: var(--navy, #0F2A4A);
  font: 700 .875rem/1.3 'Inter', system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.ius-panel-cab small {
  display: block;
  color: var(--muted, #5A6474);
  font: 400 .75rem/1.35 'Inter', system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.ius-panel-cab .ius-viendo { color: var(--navy, #0F2A4A); font-weight: 600; }

/* El saldo y el Salir son bloques OPACOS: cada app los entrega ya hechos y el
 * armador jamás los reescribe (son cinco mecanismos de salida distintos). */
.ius-saldo {
  padding: .45rem .7rem .55rem;
  font: 600 .8125rem/1.3 'Inter', system-ui, sans-serif;
  color: var(--navy, #0F2A4A);
}
.ius-saldo .chip, .ius-saldo .pill { font-size: .8125rem; }

.ius-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--navy, #0F2A4A);
  padding: .5rem .7rem;
  min-height: 44px;
  border-radius: 8px;
  font: 500 .875rem/1.25 'Inter', system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.ius-item:hover { background: var(--cream, #FAF7F2); text-decoration: none; color: var(--navy, #0F2A4A); }
.ius-item:focus-visible { outline: 2px solid var(--gold, #C9A86B); outline-offset: -2px; }
.ius-item.ius-activo { background: var(--cream, #FAF7F2); font-weight: 700; }

.ius-sep { height: 1px; background: var(--line, #E6DFD2); margin: .3rem .3rem; }

/* Contenedor del bloque de salida que entrega la app tal cual. */
.ius-salir { border-top: 1px solid var(--line, #E6DFD2); margin-top: .3rem; padding-top: .3rem; }
.ius-salir a, .ius-salir button {
  display: flex; align-items: center; gap: .5rem;
  color: #B4232A; padding: .5rem .7rem; min-height: 44px;
  border-radius: 8px; font: 600 .875rem/1.25 'Inter', system-ui, sans-serif;
  text-decoration: none; background: none; border: 0; width: 100%;
  text-align: left; cursor: pointer;
}
.ius-salir a:hover, .ius-salir button:hover { background: #fdeced; text-decoration: none; }
.ius-salir form { margin: 0; }

/* ── Defensa contra el CSS viejo de cada producto ─────────────────────────── */
/* Casi todas las apps traen, de cuando el menú era una fila de enlaces sueltos,
 * una regla como `header.topbar nav a{color:#fff;margin-left:1.2rem}`. Esa regla
 * (una clase + tres elementos) es MÁS específica que `.ius-item` (una clase), así
 * que pintaría de BLANCO SOBRE BLANCO todos los renglones del panel y les metería
 * sangría. Estas líneas la ganan por especificidad, sin tener que editar a mano
 * el CSS de las diez aplicaciones ni confiar en que nadie la vuelva a escribir. */
.ius-nav .ius-top { margin: 0; }
.ius-nav .ius-panel .ius-item,
.ius-nav .ius-sub .ius-item { color: var(--navy, #0F2A4A); margin: 0; font-size: .875rem; }
.ius-nav .ius-panel .ius-item:hover,
.ius-nav .ius-sub .ius-item:hover { color: var(--navy, #0F2A4A); }
.ius-nav .ius-salir a,
.ius-nav .ius-salir button { color: #B4232A; margin: 0; font-size: .875rem; }
.ius-nav .ius-saldo, .ius-nav .ius-saldo a { margin: 0; }
.ius-nav .ius-panel-cab strong { color: var(--navy, #0F2A4A); }
.ius-nav .ius-panel-cab small { color: var(--muted, #5A6474); }

/* ── Hamburguesa (bajo 1024px, o cuando nav.js detecta desbordamiento) ────── */
.ius-burger {
  display: none;
  background: none; border: 0; color: var(--white, #fff); cursor: pointer;
  padding: .4rem; border-radius: 8px; font-size: 1.375rem; line-height: 1;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.ius-burger:hover { background: rgba(255,255,255,.14); }
.ius-burger:focus-visible { outline: 2px solid var(--gold, #C9A86B); outline-offset: 2px; }

@media (max-width: 1024px) {
  /* Para que la barra caiga a su propio renglón bajo la marca hace falta que
   * el encabezado envuelva. Varios productos lo traen en `nowrap` desde antes
   * (Posicia, entre otros) y sin esto el menú se queda apretado a la derecha
   * en vez de desplegarse a lo ancho. Se hace con :has() para que funcione sin
   * una sola línea de programa; nav.js además marca .ius-header por si el
   * navegador es viejo. */
  header:has(> .ius-burger), header:has(> .ius-nav), header.ius-header {
    flex-wrap: wrap;
  }
  .ius-burger { display: inline-flex; order: 1; }
  .ius-nav {
    display: none;
    width: 100%;
    order: 5;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    background: rgba(6,18,34,.97);
    border-radius: 8px;
    margin-top: .6rem;
    padding: .4rem;
  }
  .ius-nav.ius-abierto { display: flex; }
  .ius-nav .ius-top { width: 100%; justify-content: space-between; min-height: 44px; padding: .6rem .75rem; }
  /* Los grupos de arriba se despliegan en línea, igual que el panel: nunca se
   * salen de la pantalla y no tapan lo que hay debajo. */
  .ius-grupo { width: 100%; }
  .ius-grupo > summary { width: 100%; justify-content: space-between; }
  .ius-grupo > summary .ius-caret { margin-left: auto; }
  .ius-sub {
    position: static;
    box-shadow: none;
    border: 0;
    min-width: 0;
    max-width: none;
    max-height: none;
    padding: .1rem 0 .3rem .6rem;
    background: transparent;
  }
  .ius-cuenta { width: 100%; }
  .ius-cuenta > summary { width: 100%; justify-content: flex-start; border-radius: 8px; min-height: 44px; }
  .ius-cuenta > summary .ius-caret { margin-left: auto; }
  /* En chico el panel se despliega en línea: nunca se sale de la pantalla. */
  .ius-panel {
    position: static;
    box-shadow: none;
    border: 0;
    min-width: 0;
    max-width: none;
    max-height: none;
    margin-right: 0;
    padding: .1rem 0 .3rem .6rem;
    background: transparent;
  }
  .ius-panel-cab { border-bottom-color: rgba(255,255,255,.18); }
  .ius-panel-cab strong { color: #fff; }
  .ius-panel-cab small { color: rgba(255,255,255,.72); }
  .ius-panel-cab .ius-viendo { color: var(--gold, #C9A86B); }
  .ius-saldo { color: #fff; }
  .ius-item { color: #fff; }
  .ius-item:hover, .ius-item.ius-activo { background: rgba(255,255,255,.12); color: #fff; }
  /* Misma defensa de especificidad que arriba, ahora en oscuro. */
  .ius-nav .ius-panel-cab strong { color: #fff; }
  .ius-nav .ius-panel-cab small { color: rgba(255,255,255,.72); }
  .ius-nav .ius-panel .ius-item,
  .ius-nav .ius-sub .ius-item,
  .ius-nav .ius-panel .ius-item:hover,
  .ius-nav .ius-sub .ius-item:hover { color: #fff; }
  .ius-nav .ius-salir a, .ius-nav .ius-salir button { color: var(--gold, #C9A86B); }
  .ius-sep, .ius-salir { background: rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.18); }
  .ius-sep { height: 1px; }
  .ius-salir a, .ius-salir button { color: var(--gold, #C9A86B); }
  .ius-salir a:hover, .ius-salir button:hover { background: rgba(255,255,255,.12); }
}

/* nav.js marca esto cuando la barra se desborda por encima de 1024px
 * (traducciones largas, zoom del navegador, ventanas angostas de escritorio). */
header.ius-desborda { flex-wrap: wrap; }
header.ius-desborda .ius-burger { display: inline-flex; order: 1; }
header.ius-desborda .ius-nav { display: none; width: 100%; order: 5; flex-direction: column; align-items: stretch; margin-left: 0; background: rgba(6,18,34,.97); border-radius: 8px; margin-top: .6rem; padding: .4rem; }
header.ius-desborda .ius-nav.ius-abierto { display: flex; }
header.ius-desborda .ius-panel { position: static; box-shadow: none; border: 0; min-width: 0; max-width: none; max-height: none; margin-right: 0; padding: .1rem 0 .3rem .6rem; background: transparent; }
header.ius-desborda .ius-grupo { width: 100%; }
header.ius-desborda .ius-grupo > summary { width: 100%; justify-content: space-between; }
header.ius-desborda .ius-sub { position: static; box-shadow: none; border: 0; min-width: 0; max-width: none; max-height: none; padding: .1rem 0 .3rem .6rem; background: transparent; }
header.ius-desborda .ius-panel-cab strong { color: #fff; }
header.ius-desborda .ius-panel-cab small { color: rgba(255,255,255,.72); }
header.ius-desborda .ius-saldo, header.ius-desborda .ius-item { color: #fff; }
header.ius-desborda .ius-item:hover { background: rgba(255,255,255,.12); }
header.ius-desborda .ius-salir a, header.ius-desborda .ius-salir button { color: var(--gold, #C9A86B); }
header.ius-desborda .ius-nav .ius-panel .ius-item,
header.ius-desborda .ius-nav .ius-sub .ius-item,
header.ius-desborda .ius-nav .ius-panel .ius-item:hover,
header.ius-desborda .ius-nav .ius-sub .ius-item:hover { color: #fff; }
header.ius-desborda .ius-nav .ius-salir a,
header.ius-desborda .ius-nav .ius-salir button { color: var(--gold, #C9A86B); }

@media print { .ius-nav, .ius-burger { display: none !important; } }