/* ══════════════════════════════════════════════════════════════════════════
   nav-2niveles.css · Navegación de dos bandas — Oficio&Circular
   Creado 2026-08-21. Maqueta y decisiones: 5-design/nav-dos-niveles-2026-08/

   POR QUÉ EL MARCADO ES <nav><div class="ocn-bar1">…</div></nav> Y NO <nav>…
   `css/polish.css` declara `nav>a,nav>span,nav>div{order:99}` mas siete
   overrides por href. Esas reglas alcanzan HIJOS DIRECTOS de <nav>. Colgando
   los items un nivel mas abajo ninguna los toca, y no hace falta un solo
   !important para defenderse. No "aplanes" este marcado.

   POR QUÉ LA PASTILLA DE PLANES NO LLEVA .nav-pro-highlight
   polish.css la esconde: `.nav-pro-highlight{display:none!important}`. Hoy se
   ve solo porque `.oc-nav a{display:inline-flex!important}` de
   header-trending.css:55 le gana por especificidad (0,1,1 contra 0,1,0). Ese
   equilibrio no sobrevive al cambio de clase, asi que la pastilla nueva usa
   .ocn-pill y queda fuera de la pelea.

   OJO CON `assets/style.css`: declara TRES reglas de ELEMENTO que caen sobre
   este componente sin nombrarlo, y cada una costo un rato encontrarla:
     nav   { display:flex; overflow-x:auto }     -> recortaba el estante entero
     nav a { border-bottom:2px solid transparent } -> segunda linea en el hover
     nav a:hover { border-bottom-color:blanco }
   Las tres se neutralizan aca. Si algo del nav se ve raro y no esta en esta
   hoja, mira ahi antes que en cualquier otro lado.

   COLOR: cero hex. Los translucidos salen de los tokens con color-mix, asi
   el nav sigue a la paleta si la paleta cambia.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Zona de nav: contexto de posicionamiento del estante ───────────────── */
/* DOS RECORTES ENCADENADOS QUE HACIAN INVISIBLE AL ESTANTE (medidos 21-ago).
   El estante es `position:absolute` y cuelga de esta zona, asi que cualquier
   ancestro con overflow != visible lo corta. Habia dos, y probandolos de a uno
   cada prueba parecia fallar:

   1. `assets/style.css:1` declara una regla de ELEMENTO sobre `nav`:
      `nav{margin-top:.6rem;display:flex;gap:1.2rem;justify-content:flex-start;
      flex-wrap:nowrap;overflow-x:auto;...}`. Un <nav> pelado ya computa
      overflow:auto. De ahi tambien salia un `display:flex` que esta zona nunca
      declaro: por eso se fijan display y gap aca, y no se heredan por accidente.
   2. `header.oc-header` lleva `overflow:hidden` con marca (header-trending.css).
      Se suelta abajo.

   No basta con arreglar uno: hay que soltar los dos. */
.ocn {
  position: relative;
  z-index: 40;
  display: block;
  gap: 0;
  overflow: visible;
  margin: 14px 0 0;
}

/* El unico !important de esta hoja, y esta pagado: `.oc-header` declara
   `overflow:hidden !important` y sin ganarle el estante nunca se ve. Va acotado
   con :has(.ocn) para tocar SOLO las cabeceras que ya llevan el nav nuevo —
   especificidad (0,3,1) contra (0,1,1), gana sin importar el orden de carga.
   Medido: soltar el recorte NO cambia el alto del header (137px antes y
   despues) y sus dos hijos no desbordan; el ::before es inset:0. */
header.oc-header:has(.ocn) { overflow: visible !important; }

/* ── Banda 1 ────────────────────────────────────────────────────────────── */
.ocn-bar1 {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.ocn-spacer { flex: 1 1 auto; min-width: 16px; }

/* Grupos: <button>, no <a> — no existe una pagina "Tribunales". Esa eleccion
   semantica es la que hace que teclado y tactil funcionen sin codigo extra. */
.ocn-top {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--oc-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--oc-on-navy-dim);
  background: transparent;
  border: 0;
  border-radius: var(--oc-r-sm) var(--oc-r-sm) 0 0;
  padding: 9px 14px 10px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--oc-dur) var(--oc-ease),
              background-color var(--oc-dur) var(--oc-ease);
}
.ocn-top:hover { color: var(--oc-on-navy); }

/* Sobre navy el anillo navy es invisible. Unica excepcion documentada al
   veto del calido en la paleta. */
.ocn-top:focus-visible {
  outline: 2px solid var(--oc-focus-on-dark);
  outline-offset: -2px;
}

.ocn-caret {
  width: 9px; height: 9px; flex: none;
  opacity: .6;
  transition: transform var(--oc-dur) var(--oc-ease),
              opacity var(--oc-dur) var(--oc-ease);
}
.ocn-top:hover .ocn-caret { opacity: 1; }

/* El grupo abierto toma el color del estante y se funde con el. Deja de leerse
   como "un menu abierto" y pasa a ser "la pestaña de este estante". */
.ocn-top[aria-expanded="true"] {
  background: var(--oc-navy-500);
  color: var(--oc-on-navy);
}
.ocn-top[aria-expanded="true"] .ocn-caret { transform: rotate(180deg); opacity: 1; }

/* Grupo al que pertenece la pagina actual */
.ocn-top[data-current="1"]:not([aria-expanded="true"]) { color: var(--oc-on-navy); }

/* ── Pastillas ──────────────────────────────────────────────────────────── */
.ocn-pill {
  font-family: var(--oc-font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 15px;
  border-radius: var(--oc-r);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  transition: background-color var(--oc-dur) var(--oc-ease),
              border-color var(--oc-dur) var(--oc-ease),
              color var(--oc-dur) var(--oc-ease);
}
/* Un enlace de cuenta no debe competir con el CTA comercial: fantasma. */
.ocn-pill--ghost {
  color: var(--oc-on-navy-soft);
  border: 1px solid var(--oc-navy-300);
  background: transparent;
}
.ocn-pill--ghost:hover { border-color: var(--oc-on-navy-soft); color: var(--oc-on-navy); }
.ocn-pill--solid {
  color: var(--oc-navy);
  background: var(--oc-surface);
  border: 1px solid var(--oc-surface);
}
.ocn-pill--solid:hover { background: var(--oc-navy-100); border-color: var(--oc-navy-100); }
.ocn-pill:focus-visible { outline: 2px solid var(--oc-focus-on-dark); outline-offset: 2px; }

.ocn-dot { width: 7px; height: 7px; border-radius: var(--oc-r-circle); background: var(--oc-navy-500); flex: none; }

/* Invariante de sesion, equivalente al `:has()` de header-trending.css:73 pero
   para el marcado nuevo: logueado no pueden verse "Ingresar" Y "Mi cuenta".
   Sin !important a proposito — aca no hay ninguna marca contra la que pelear,
   y assets/nav-auth.js escribe display inline, que gana igual. */
.ocn-bar1:has(#nav-cuenta a) #nav-ingresar { display: none; }
#nav-cuenta:empty { display: none; }

/* assets/nav-auth.js escribe `<a href="/mi-cuenta">Mi cuenta</a>` pelado dentro
   de #nav-cuenta. Sin esto sale como texto suelto entre dos pastillas. */
.ocn-bar1 #nav-cuenta a {
  font-family: var(--oc-font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 15px;
  border-radius: var(--oc-r);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  color: var(--oc-on-navy-soft);
  border: 1px solid var(--oc-navy-300);
  background: transparent;
  transition: border-color var(--oc-dur) var(--oc-ease), color var(--oc-dur) var(--oc-ease);
}
.ocn-bar1 #nav-cuenta a:hover { border-color: var(--oc-on-navy-soft); color: var(--oc-on-navy); }
.ocn-bar1 #nav-cuenta a:focus-visible { outline: 2px solid var(--oc-focus-on-dark); outline-offset: 2px; }
.ocn-bar1 #nav-cuenta { display: inline-flex; align-items: center; margin-bottom: 6px; }

/* ── Banda 2 · el estante ───────────────────────────────────────────────── */
/* Se SUPERPONE (no ocupa layout): abrir y cerrar no mueve un pixel de la
   pagina. Con estante persistente esto podria ir en flujo; no es el caso. */
.ocn-shelf {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--oc-navy-500);
  min-height: 44px;
  display: flex;
  align-items: center;
  box-shadow: var(--oc-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--oc-dur-fast) var(--oc-ease),
              transform var(--oc-dur-fast) var(--oc-ease),
              visibility 0s linear var(--oc-dur-fast);
}
.ocn-shelf[data-open="1"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--oc-dur-fast) var(--oc-ease),
              transform var(--oc-dur-fast) var(--oc-ease),
              visibility 0s;
}
.ocn-shelf-in { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 4px; }

/* Los cinco grupos estan TODOS en el DOM y se muestra uno por vez. No van en
   <template> a proposito: ahi los enlaces quedan fuera del DOM renderizado y
   el nav es la principal red de enlaces internos de un sitio que vive de
   busqueda organica. Con el estante cerrado el contenedor es
   visibility:hidden, asi que los ocultos no aportan nada al arbol de
   accesibilidad ni ocupan layout. */
.ocn-g { display: none; }
.ocn-g[data-on="1"] {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ocn-shelf-in a {
  font-family: var(--oc-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--oc-on-navy-soft);
  text-decoration: none;
  padding: 8px 11px 10px;
  position: relative;
  white-space: nowrap;
  /* `assets/style.css` declara `nav a{border-bottom:2px solid transparent}` y
     `nav a:hover{border-bottom-color:var(--blanco)}` a nivel de ELEMENTO. Sin
     esto, al pasar el cursor se pintan DOS lineas: la de ese borde, en el borde
     de la caja, y el filete de este componente, 4px mas arriba. */
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--oc-dur) var(--oc-ease);
}
/* HOVER: filete que se dibuja de izquierda a derecha, NO una pastilla con
   fondo translucido y esquinas redondeadas. Tres razones:
     · la banda 1 y el nav viejo ya marcan lo activo con filete inferior, asi
       que la caja era un idioma ajeno dentro del mismo componente;
     · la marca es "el expediente bien llevado": plana por defecto, la jerarquia
       la hace el peso del texto y el color de la tinta, nunca una caja de color;
     · el hover pasa a ser una PREVISUALIZACION del estado activo (que deja el
       mismo filete puesto), en vez de dos tratamientos sin relacion.
   Solo transform, que va por GPU y no reflowea. */
.ocn-shelf-in a::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: 4px;
  height: 2px;
  background: var(--oc-on-navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--oc-dur) var(--oc-ease-out);
}
.ocn-shelf-in a:hover { color: var(--oc-on-navy); }
.ocn-shelf-in a:hover::after { transform: scaleX(1); }
.ocn-shelf-in a:focus-visible {
  outline: 2px solid var(--oc-focus-on-dark);
  outline-offset: -1px;
}
.ocn-shelf-in a:focus-visible::after { transform: scaleX(1); }

/* Pagina actual: el mismo filete, ya dibujado. La diferencia con el hover la
   hace el peso, no otro tratamiento. */
.ocn-shelf-in a[data-current="1"] {
  color: var(--oc-on-navy);
  font-weight: 600;
}
.ocn-shelf-in a[data-current="1"]::after { transform: scaleX(1); }
.ocn-meta {
  font-size: 12px;
  font-weight: 400;
  color: color-mix(in srgb, var(--oc-on-navy-soft) 66%, transparent);
}
/* El descriptor NO se ilumina con el hover: es metadato y se queda atras.
   Que suba junto con la etiqueta aplana la jerarquia dentro del propio enlace. */
.ocn-shelf-in a[data-current="1"] .ocn-meta {
  color: color-mix(in srgb, var(--oc-on-navy) 72%, transparent);
}
.ocn-badge {
  font-family: var(--oc-font-sans);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--oc-r-sm);
  background: color-mix(in srgb, var(--oc-on-navy) 22%, transparent);
  color: var(--oc-on-navy);
}

/* ── Movil ──────────────────────────────────────────────────────────────── */
/* A 375px la fila no cabe y hace scroll horizontal — decision del founder del
   2026-08-04, que se mantiene. Lo que se agrega es el desvanecido al borde
   derecho: hoy la fila se corta a secas y no avisa que hay mas. */
@media (max-width: 900px) {
  .ocn { margin-top: 11px; }
  .ocn-bar1 {
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, currentColor 0, currentColor calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, currentColor 0, currentColor calc(100% - 26px), transparent 100%);
  }
  .ocn-bar1::-webkit-scrollbar { display: none; }
  .ocn-top { font-size: 14px; padding: 8px 11px 9px; }
  .ocn-spacer { display: none; }
  .ocn-pill { font-size: 13px; padding: 6px 11px; margin-bottom: 5px; }
  .ocn-shelf-in { overflow-x: auto; scrollbar-width: none; }
  .ocn-g[data-on="1"] { flex-wrap: nowrap; }
  .ocn-shelf-in::-webkit-scrollbar { display: none; }
  .ocn-shelf-in a { font-size: 13px; padding: 7px 9px; }
  .ocn-meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ocn-top, .ocn-pill, .ocn-caret, .ocn-shelf, .ocn-shelf-in a { transition: none; }
  .ocn-shelf-in a::after { transition: none; }
}