/* nav-familia.css · Nav recíproco de los cuatro buscadores en BuscadorTributario (12-nov-2026).
   Maqueta aprobada: workspace 5-design/nav-reciproco-2026-11/ · plan 7-docs/superpowers/plans/2026-11-12-nav-reciproco-verticales.md
   Marcado: tools/patch_nav_familia.py. Comportamiento del celular: assets/ssr/nav-familia.js.

   Se carga AL FINAL del <head>, después de ocn-css, header-trending y bt-home-editorial, y no edita ninguna: solo agrega.
   Dos variantes de cabecera conviven y las dos se cubren acá (la portada también es un header.oc-header, por eso las
   reglas de las estáticas van con :not(.bt-home-world *)):
     · la portada y todas las fichas SSR (index.html): `.bt-home-world`, carril de 1264 px;
     · las páginas estáticas (acerca, q/*, fallos-superiores…): `header.oc-header` de header-trending, carril de 1200 px.
   Cero hex: tokens y blancos translúcidos sobre la banda, como el resto del nav. */

/* ── Fila de la marca: la cuenta, a la derecha ───────────────────────────── */
.oc-header .oc-header-brand { flex-wrap: nowrap; }
.oc-header-cuenta { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.oc-header-cuenta .ocn-pill { margin: 0; }
/* Invariante de sesión (era `.ocn-bar1:has(#nav-cuenta a) #nav-ingresar`): con sesión no se ven Ingresar y Mi cuenta. */
.oc-header-cuenta:has(#nav-cuenta a) #nav-ingresar { display: none; }
.oc-header-cuenta #nav-cuenta { display: inline-flex; align-items: center; gap: 10px; }
.oc-header-cuenta #nav-cuenta:empty { display: none; }
/* nav-auth.js y app.js escriben `<a>` pelados (Guardados, Mi cuenta): salen como pastilla fantasma. */
.oc-header-cuenta #nav-cuenta a {
  display: inline-flex; align-items: center; justify-content: center; margin: 0 !important;
  font-family: var(--oc-font-sans); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 8px 15px; border-radius: var(--oc-r); text-decoration: none;
  color: var(--oc-on-navy-soft); border: 1px solid rgba(255, 255, 255, .35); background: transparent;
  transition: border-color var(--oc-dur) var(--oc-ease), color var(--oc-dur) var(--oc-ease);
}
.oc-header-cuenta #nav-cuenta a:hover { border-color: var(--oc-on-navy-soft); color: var(--oc-on-navy); }
.oc-header-cuenta #nav-cuenta a:focus-visible { outline: 2px solid var(--oc-focus-on-dark); outline-offset: 2px; }
.bt-home-world .oc-header-cuenta .ocn-pill,
.bt-home-world .oc-header-cuenta #nav-cuenta a { min-height: 38px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
/* Páginas estáticas: la bajada es la de la portada, en una línea (cabe con la cuenta con sesión, la más ancha). */
header.oc-header:not(.bt-home-world *) .oc-header-tagline { min-width: 0; flex: 0 1 auto; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .25); }
header.oc-header:not(.bt-home-world *) .oc-header-tagline p { max-width: none !important; white-space: nowrap; font-size: 15px !important; }

.ocn-menu { display: none; }

/* ── Banda del nav: secciones | correo e IA | los otros buscadores ──────── */
.ocn-sep { flex: none; align-self: center; width: 1px; height: 22px; margin: 0 4px; background: rgba(255, 255, 255, .22); }
.ocn-ico { width: 17px; height: 17px; flex: none; }
.ocn-ia img { display: block; width: 36px; height: 16px; flex: none; margin-left: 2px; }
.ocn .ocn-rapido { gap: 8px; }

.ocn-familia {
  display: flex; align-items: stretch; flex: none; align-self: center; height: 38px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; overflow: hidden;
}
/* `assets/style.css` declara `nav a{border-bottom:2px solid transparent}` y su hover: se neutralizan (ver ocn-css). */
.ocn .ocn-familia a {
  display: flex; align-items: center; gap: 8px; padding: 0 13px 0 9px; margin: 0; border: 0;
  font-family: var(--oc-font-sans); font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--oc-on-navy); text-decoration: none; transition: background-color var(--oc-dur) var(--oc-ease);
}
.ocn .ocn-familia a + a { border-left: 1px solid rgba(255, 255, 255, .18); }
.ocn .ocn-familia a:hover { background: rgba(255, 255, 255, .09); border-bottom: 0; }
.ocn .ocn-familia a:focus-visible { outline: 2px solid var(--oc-focus-on-dark); outline-offset: -2px; }
.ocn-familia img { display: block; width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .26); }

/* Páginas estáticas: la banda alinea al pie (flex-end, ver ocn-css); los nuevos se centran con el texto. */
header.oc-header:not(.bt-home-world *) .ocn-bar1 { align-items: center; }
header.oc-header:not(.bt-home-world *) .ocn-familia { margin-bottom: 0; }

.ocn-hoja { display: none; }

/* Bajo 1150 px los hermanos quedan solo con su sello (el nombre sigue en el title y para el lector de pantalla). */
@media (max-width: 1150px) {
  .ocn .ocn-familia a { padding: 0 9px; }
  .ocn-familia-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bt-home-world .oc-header-tagline, header.oc-header:not(.bt-home-world *) .oc-header-tagline { display: none; }
}

/* ── Celular y tableta (< 1024 px): marca + menú; correo e IA siempre a la vista; lo demás en la hoja ─ */
@media (max-width: 1023px) {
  .oc-header .oc-header-brand { flex-direction: row !important; align-items: center !important; gap: 10px !important; }
  .oc-header .oc-header-tagline { display: none !important; }
  .bt-home-world .oc-header-brand { min-height: 64px; }
  .bt-home-world .oc-logo { width: 262px !important; }
  .oc-logo-link { min-width: 0; flex: 0 1 auto !important; }
  header.oc-header:not(.bt-home-world *) .oc-logo { height: auto !important; width: 262px !important; max-width: 100%; }
  .oc-header-cuenta[data-cuenta-escritorio] { display: none; }

  .ocn-menu {
    display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: auto;
    width: 44px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px;
    background: transparent; color: var(--oc-on-navy); cursor: pointer;
  }
  .ocn-menu svg { width: 20px; height: 20px; }
  .ocn-menu:focus-visible { outline: 2px solid var(--oc-focus-on-dark); outline-offset: 2px; }

  /* La banda queda con dos botones: el alta del correo y «En tu IA». Sin scroll lateral ni máscara. */
  .ocn .ocn-bar1 {
    width: min(calc(100% - 64px), 1264px); max-width: none; min-height: 0; margin: 0 auto;
    gap: 8px; padding: 10px 0 12px; overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
  .ocn .ocn-bar1 > :not(.ocn-rapido) { display: none !important; }
  .ocn .ocn-bar1 > .ocn-rapido {
    flex: 1 1 auto; justify-content: center; height: 40px; min-width: 0; padding: 0 10px; margin: 0;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; background: transparent;
    font-size: 14.5px; font-weight: 600; color: var(--oc-on-navy);
  }
  .ocn-shelf { display: none !important; }

  /* En las páginas estáticas el header tiene padding: la hoja cuelga del header, no del nav, para ir a sangre. */
  header.oc-header:not(.bt-home-world *) .ocn { position: static; }
  header.oc-header:not(.bt-home-world *) .ocn .ocn-bar1 { width: 100%; }
  /* Abierta, la hoja pasa sobre el botón flotante del chat (z 9999 dentro de su propio contexto). */
  .ocn:has(.ocn-hoja[data-abierta="1"]), header.oc-header:has(.ocn-hoja[data-abierta="1"]) { z-index: 10000 !important; }
  .ocn-hoja {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 70;
    max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--oc-ink); border-top: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 18px 40px rgba(15, 31, 61, .40);
  }
  .ocn-hoja[data-abierta="1"] { display: block; }
  .ocn-hoja-in { width: min(calc(100% - 64px), 1264px); margin: 0 auto; padding: 6px 0 22px; }
  .ocn-hoja-t { margin: 14px 0 2px; font-family: var(--oc-font-sans); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--oc-on-navy-soft); }
  .ocn .ocn-hoja a { border-bottom: 1px solid rgba(255, 255, 255, .10); text-decoration: none; color: var(--oc-on-navy); }
  .ocn-hoja-lista a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0;
                      font-family: var(--oc-font-sans); font-size: 15.5px; font-weight: 500; line-height: 1.2; }
  .ocn-hoja-meta { font-size: 13px; font-weight: 500; color: var(--oc-on-navy-soft); text-align: right; }
  .ocn-hoja-hermanos a { display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 12px; padding: 9px 0; }
  .ocn-hoja-hermanos img { display: block; width: 34px; height: 34px; }
  .ocn-hoja-hermanos b { display: block; font-family: var(--oc-font-sans); font-size: 15.5px; font-weight: 600; line-height: 1.2; }
  .ocn-hoja-hermanos small { display: block; margin-top: 3px; font-family: var(--oc-font-sans); font-size: 13px; line-height: 1.3; color: var(--oc-on-navy-soft); }
  .ocn-hoja-hermanos svg { width: 16px; height: 16px; color: var(--oc-on-navy-soft); }
  .ocn-hoja .oc-header-cuenta { margin: 18px 0 0; gap: 10px; }
  .ocn-hoja .oc-header-cuenta .ocn-pill, .ocn-hoja .oc-header-cuenta #nav-cuenta a {
    flex: 1 1 0; justify-content: center; min-height: 40px; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .35);
  }
  .ocn-hoja .oc-header-cuenta .ocn-pill--solid { border-bottom-color: var(--oc-surface); color: var(--oc-navy); }
  .ocn-hoja .oc-header-cuenta #nav-cuenta { flex: 2 1 0; }
}

/* Bajo 720 px el carril de la portada pasa a 18 px por lado (bt-home-editorial): la banda y la hoja lo siguen. */
@media (max-width: 720px) {
  .ocn .ocn-bar1, .ocn-hoja-in { width: min(calc(100% - 36px), 1264px); }
  header.oc-header:not(.bt-home-world *) .ocn .ocn-bar1 { width: 100%; }
  header.oc-header:not(.bt-home-world *) .ocn-hoja-in { width: calc(100% - 32px); }
}

/* Teléfonos chicos (320–360): correo e IA se aprietan sin perder los logos. */
@media (max-width: 360px) {
  .ocn .ocn-bar1 > .ocn-rapido { gap: 6px; padding: 0 6px; font-size: 13.5px; }
  .ocn .ocn-bar1 > .ocn-rapido .ocn-ico { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ocn .ocn-familia a, .oc-header-cuenta #nav-cuenta a { transition: none; }
}