/* ============================================================================
   tokens.css — capa de ESTRUCTURA compartida por TODAS las skins del sitio.
   Se carga ANTES de despegue.css (dark) y despegue-gente.css (clara):
       fonts.css  ->  tokens.css  ->  {skin}.css
   ----------------------------------------------------------------------------
   REGLA (no negociable): un valor entra acá SOLO si DEBE ser idéntico entre
   skins (legibilidad, ritmo de espaciado). Lo que difiere por skin a propósito
   — color, sombra, radio de panel, tamaño base de cuerpo (audiencia) — NO va
   acá: vive en el :root de cada skin. Si no podés escribir el motivo de una
   divergencia en una línea, es deriva (bug), no decisión: unificá acá.
   Cambiar un valor de estructura/legibilidad = editar UN token, no las dos skins.
   ============================================================================ */
:root{
  /* escala tipográfica de texto chico (la banda de legibilidad). Canónico = dark, aprobado. */
  /* Banda subida en 2 pasos (2026-06-21, pedido usuario: la letra de contenido se leia chica)
     y OTRO +0.5 el 2026-07-06 (lectura de las paginas de oficio, mismo pedido: "las letras mas
     pequenas de contenido cuestan, en general, no solo en oficio"). --fs-label (micro-rotulos
     mono uppercase: th/badges/chips/sellos) queda en 11.5 a proposito — es rotulo, no lectura;
     el resto es la banda de CONTENIDO (captions, prosa secundaria, listas, fichas). */
  --fs-label:11.5px;   /* piso: labels mono uppercase, th, badges (.b), .fch, .chip */
  --fs-micro:13px;     /* mono secundario: entsub, foot, fd-cta, sub de stats, cap labels */
  --fs-sub:13.5px;     /* body chico: .u, .nota, .tend, .qh, of-sec, embudo, piezas */
  --fs-body-sm:14px;   /* .kv, .li, .mh-titulo, .ff-desc, .dsr-cap */
  --fs-body:14.5px;    /* font-size de table, ref-q, cap text, prosa secundaria */
  --fs-body-lg:15px;   /* .prosa, .sig .tx, .sem-origen, hero-p */

  /* espaciado de celda / panel (lo que se desincronizó entre skins) */
  --pad-th:7px 9px;
  --pad-td:10px 9px;
  --pad-panel:16px 18px;

  /* radio chico uniforme (fch, badges, chips) */
  --r-sm:4px;
}

/* ============================================================================
   HEADER — chrome compartido (2026-07-02). Las MEDIDAS de la barra superior
   (marca + back + chip + langsw + coords) son ÚNICAS entre skins; cada skin
   pone SOLO color/fondo/hover encima (dark cy/ac · gente teal). Marca
   750/17.5px = voto usuario; el resto de valores viene de la piel clara.
   Los var(--bd)/var(--bd2)/etc. resuelven a la paleta de la skin que cargue.
   ============================================================================ */
header{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;row-gap:6px;align-items:center;gap:12px;min-height:54px;padding:8px 16px;border-bottom:1px solid var(--bd);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand svg{display:block}
.brand-name{font-weight:750;font-size:17.5px;letter-spacing:-.01em}
.brand-tag{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding-left:13px;border-left:1px solid var(--bd2)}
.back{font-family:var(--mono);font-size:var(--fs-micro);text-decoration:none;border:1px solid var(--bd2);padding:6px 11px;border-radius:6px;transition:.13s;white-space:nowrap}
.chip{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;padding:4px 10px;border-radius:5px;border:1px solid var(--bd2)}
/* ES/EN va al racimo DERECHO (utilidades: idioma + actualizado), separado de la navegación
   (back/chip/toggle). Si un header no tiene langsw (mapa-datos), coords conserva el empuje. */
.langsw{flex:0 0 auto;display:inline-flex;margin-left:auto;border:1px solid var(--bd2);border-radius:5px;overflow:hidden;font-family:var(--mono);font-size:var(--fs-label);font-weight:700}
.langsw b{padding:5px 9px}
.langsw a{padding:5px 9px;text-decoration:none}
.coords{margin-left:auto;font-family:var(--mono);font-size:var(--fs-label)}
.langsw+.coords{margin-left:0}
/* conmutador de nichos/oficios — vive en el HEADER sticky (disponible a cualquier scroll).
   La miga visible se descartó (2026-07-03: duplicaba header + H1); el SEO queda en el JSON-LD. */
.swn-d{position:relative;flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-micro)}
.swn-d summary{list-style:none;cursor:pointer;border:1px solid var(--bd2);border-radius:6px;padding:5px 11px;white-space:nowrap;user-select:none;transition:.13s}
.swn-d summary::-webkit-details-marker{display:none}
.swn-m{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:280px;max-width:min(92vw,370px);max-height:min(62vh,480px);overflow:auto;border:1px solid var(--bd2);border-radius:10px;padding:7px}
.swn-g{font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 9px 5px;margin-top:5px;border-top:1px solid var(--bd)}
.swn-g:first-child{margin-top:0;border-top:0;padding-top:6px}
.swn-i{display:block;padding:6px 9px;border-radius:6px;text-decoration:none;line-height:1.45}
.swn-hub{flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-micro);text-decoration:none;border:1px solid var(--bd2);border-radius:6px;padding:5px 11px;white-space:nowrap;transition:.13s}
/* en movil el panel se ancla al VIEWPORT (fixed bajo el header sticky), no al boton: con el summary
   fusionado el boton quedo centro-derecha en la fila 1 y un ancla left/right al boton desborda
   (visto en captura 2026-07-05). max-width none -> usa el ancho util de la pantalla. */
@media(max-width:760px){.swn-m{position:fixed;left:12px;right:12px;top:62px;max-width:none}}
/* fusion chip+boton SOLO movil (decision usuario 2026-07-05): <760px el chip de contexto esta
   oculto y el summary muestra el tipo corto ("NICHO ▾") -> header sticky de 1 fila; desktop
   conserva el label largo explicito. Espejo del patron .back span (icono solo). */
.swn-d .swn-sm{display:none}
@media(max-width:760px){.swn-d .swn-lg{display:none}.swn-d .swn-sm{display:inline}}
/* hides responsive compartidos; lo que se oculta POR CONTENIDO (qué chip pesa
   en cada página) queda en la skin (.chip.am dark / .chip.cy gente) */
@media(max-width:760px){.brand-tag{display:none}.coords{display:none}.back span{display:none}}