/* ============================================================================
 * nav-claro.css — VARIANTE DE ENCABEZADO CLARO del menú de la cuenta
 * ----------------------------------------------------------------------------
 * `nav.css` da por hecho un encabezado OSCURO (azul marino con letras blancas):
 * es lo que traen las nueve herramientas. El Portal y el hub iustitia.mx tienen
 * el encabezado CLARO (crema con letras azul marino), porque replican la página
 * pública. Con la hoja oscura a secas, los renglones salen BLANCOS SOBRE CREMA,
 * que es exactamente el fallo del aprendizaje 9 con otra cara.
 *
 * Esta hoja se carga DESPUÉS de nav.css y SOLO donde el encabezado es claro.
 * Los nueve productos no la cargan y no cambian ni un píxel.
 *
 * Por qué todos los selectores empiezan con `#ius-nav`: un identificador gana a
 * cualquier cantidad de clases, así que estas reglas ganan tanto a `nav.css`
 * como al CSS viejo del propio Portal, sin depender del orden de carga ni de
 * cuántas clases tenga el encabezado de cada pantalla.
 *
 * VERSIÓN: 1 (2026-08-03, fase 7 del menú agrupado)
 * ========================================================================== */

/* ── Barra de arriba ──────────────────────────────────────────────────────── */
#ius-nav .ius-top,
#ius-nav .ius-grupo > summary {
  color: var(--navy, #0F2A4A);
}
#ius-nav .ius-top:hover,
#ius-nav .ius-grupo > summary:hover {
  background: rgba(15, 42, 74, .07);
  color: var(--gold-dark, #A8873F);
}
#ius-nav .ius-top.ius-activo {
  background: rgba(201, 168, 107, .20);
  box-shadow: inset 0 -2px 0 var(--gold-dark, #A8873F);
  color: var(--navy, #0F2A4A);
}
#ius-nav .ius-top:focus-visible,
#ius-nav .ius-cuenta > summary:focus-visible {
  outline: 2px solid var(--gold-dark, #A8873F);
  outline-offset: 2px;
}

/* ── Botón de la cuenta ───────────────────────────────────────────────────── */
#ius-nav .ius-cuenta > summary {
  color: var(--navy, #0F2A4A);
  background: var(--white, #fff);
  border: 1px solid var(--line, #E4E1DA);
}
#ius-nav .ius-cuenta > summary:hover {
  background: var(--cream, #F7F4EE);
  border-color: var(--gold-dark, #A8873F);
}

/* ── Panel desplegado ─────────────────────────────────────────────────────── */
/* En claro el panel ya nace blanco: lo único que hay que reponer son los
 * colores que la hoja oscura cambia a blanco cuando la barra se colapsa. */
#ius-nav .ius-panel,
#ius-nav .ius-sub {
  background: #fff;
  border: 1px solid var(--line, #E4E1DA);
  box-shadow: 0 12px 32px rgba(15, 42, 74, .16);
  padding: .35rem;
}
#ius-nav .ius-panel-cab { border-bottom: 1px solid var(--line, #E4E1DA); }
#ius-nav .ius-panel-cab strong { color: var(--navy, #0F2A4A); }
#ius-nav .ius-panel-cab small { color: #5b6675; }
#ius-nav .ius-panel-cab .ius-viendo { color: var(--navy, #0F2A4A); }
#ius-nav .ius-saldo { color: var(--navy, #0F2A4A); }
#ius-nav .ius-item { color: var(--navy, #0F2A4A); }
#ius-nav .ius-item:hover,
#ius-nav .ius-item.ius-activo { background: var(--cream, #F7F4EE); color: var(--navy, #0F2A4A); }
#ius-nav .ius-sep { background: var(--line, #E4E1DA); }
#ius-nav .ius-salir { border-top: 1px solid var(--line, #E4E1DA); background: none; }
#ius-nav .ius-salir a,
#ius-nav .ius-salir button { color: #B4232A; }
#ius-nav .ius-salir a:hover,
#ius-nav .ius-salir button:hover { background: #fdeced; }

/* ── Hamburguesa ──────────────────────────────────────────────────────────── */
.ius-burger { color: var(--navy, #0F2A4A); }
.ius-burger:hover { background: rgba(15, 42, 74, .07); }
.ius-burger:focus-visible { outline: 2px solid var(--gold-dark, #A8873F); }

/* ── Barra colapsada (bajo 1024px, o cuando nav.js detecta desbordamiento) ─── */
/* La hoja oscura pinta aquí un cajón azul casi negro; en un encabezado crema
 * eso es un parche negro a media pantalla. Aquí queda blanco con borde. */
@media (max-width: 1024px) {
  #ius-nav.ius-nav {
    background: #fff;
    border: 1px solid var(--line, #E4E1DA);
    box-shadow: 0 8px 24px rgba(15, 42, 74, .12);
  }
  #ius-nav .ius-panel,
  #ius-nav .ius-sub {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: .1rem 0 .3rem .6rem;
  }
  #ius-nav .ius-panel-cab { border-bottom: 1px solid var(--line, #E4E1DA); }
  #ius-nav .ius-top { color: var(--navy, #0F2A4A); }
}
header.ius-desborda #ius-nav.ius-nav {
  background: #fff;
  border: 1px solid var(--line, #E4E1DA);
  box-shadow: 0 8px 24px rgba(15, 42, 74, .12);
}
header.ius-desborda #ius-nav .ius-panel,
header.ius-desborda #ius-nav .ius-sub {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: .1rem 0 .3rem .6rem;
}
header.ius-desborda #ius-nav .ius-top { color: var(--navy, #0F2A4A); }