/* =====================================================================
   Observatorio de la Sociedad Civil del Biobío · estilos-v1.css
   Rediseño V1 (web/BRIEF_V1.md) · una sola hoja: reemplaza a estilos.css + extra.css.
   Identidad Comunidad Biobío (diseno-cb.md v2.1) con las reglas de design-pro.md
   §A, §3, §5, §7, §10 por delante cuando difieren: fondo blanco luminoso,
   separación por filetes hairline y aire, capas de marca (degradés en bandas
   finas y tintes, radios 8/16/24/999, íconos Material en círculo de color,
   ilustración oficial fondo-01 / fondo-03), crema solo como acento.
   Lint (COMPONENTES_V1.md §Comprobaciones): 0 hex fuera de :root · radios solo
   por token o 50 % · sin mayúsculas forzadas · sin texto en degradé ·
   ≤ 5 tokens de degradé · una sola sombra (--elev) y solo en flotantes ·
   variantes -t solo en texto, bordes ≤ 2 px, outline y fondo de botón con texto ·
   :focus-visible en lugar de :focus · el CSS no genera cadenas «·».
   ===================================================================== */

/* ---------- Tipografía autoalojada (OFL) ---------- */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fuentes/nunito-sans-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Color oficial Comunidad Biobío (extraído de web/marca/, 24-10-2026) */
  --cb-azul: #0971B7;
  --cb-celeste: #37A6DE;
  --cb-coral: #FF714B;
  --cb-verde: #2CAB67;
  --cb-lima: #92C01F;
  --cb-gris: #595963;
  --cb-crema: #F9E4B2;
  --cb-crema-claro: #FDF2D6;
  --cb-rosa: #FF8899;      /* solo ilustración */
  --cb-mostaza: #FBC973;   /* solo ilustración y --g-sol */

  /* Variantes -t: solo texto y elementos pequeños (aprobadas 24-10-2026) */
  --azul-t: #0971B7;
  --celeste-t: #1B74A2;
  --coral-t: #CE2B00;
  --verde-t: #217E4C;
  --lima-t: #5B7813;

  /* Neutros de interfaz (no son de marca). V1: la página es blanca; --fondo-suave
     solo para realces de fila al pasar el cursor y pistas de control. */
  --fondo: #FFFFFF;
  --superficie: #FFFFFF;
  --fondo-suave: #F4F5F5;
  --linea: #E2E4E6;
  --blanco: #FFFFFF;

  /* Tintes de pilar (V1): color oficial al 8 % sobre blanco (92 % blanco + 8 % color,
     mezcla lineal en sRGB). Parada clara de --g-pilar y fondo de .pilar/.participar.
     Texto permitido encima: gris (≥ 6,2:1) y cualquier -t (≥ 4,54:1). */
  --tinte-azul: #EBF4F9;
  --tinte-celeste: #EFF8FC;
  --tinte-coral: #FFF4F1;
  --tinte-verde: #EEF8F3;
  --tinte-lima: #F6FAED;

  /* Rampa coroplética (V1): 5 pasos del celeste al azul. 0–2 = celeste mezclado con
     blanco al 12 %, 35 % y 75 %; 3 = celeste oficial; 4 = azul oficial. */
  --mapa-0: #E7F4FB;
  --mapa-1: #B9E0F3;
  --mapa-2: #69BCE6;
  --mapa-3: #37A6DE;
  --mapa-4: #0971B7;

  /* Degradés de marca: cinco tokens, ≤ 3 paradas, solo colores oficiales o tintes */
  --g-institucional: linear-gradient(135deg, #0971B7 0%, #37A6DE 100%);
  --g-espectro: linear-gradient(90deg, #37A6DE 0%, #2CAB67 50%, #92C01F 100%);
  --g-calido: linear-gradient(135deg, #FDF2D6 0%, #F9E4B2 100%);
  --g-sol: linear-gradient(135deg, #FF714B 0%, #FBC973 100%);
  /* El quinto token, --g-pilar (tinte del pilar → blanco), se declara más abajo en
     «:root, [data-pilar]» porque var() dentro de una propiedad personalizada se
     resuelve en el elemento que la declara: así toma el tinte del pilar del contenedor. */

  /* Elevación: una sola sombra, solo para lo que flota */
  --elev: 0 8px 24px rgba(89, 89, 99, 0.16);
  --velo: rgba(89, 89, 99, 0.4);  /* velo del cajón móvil */

  /* Radios */
  --r-s: 8px;
  --r-m: 16px;
  --r-l: 24px;
  --r-full: 999px;

  /* Espaciado (múltiplos de 4) */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-6: 24px;
  --e-8: 32px;
  --e-12: 48px;
  --e-16: 64px;

  /* Escala tipográfica: 10 tamaños */
  --t-xs: 13px;
  --t-s: 14px;
  --t-m: 16px;
  --t-l: 18px;
  --t-xl: 20px;
  --t-h3: clamp(20px, 1.4vw + 14px, 24px);
  --t-h2: clamp(24px, 1.8vw + 16px, 32px);
  --t-h1: clamp(32px, 2.4vw + 20px, 44px);
  --t-cifra: clamp(40px, 2vw + 32px, 48px);
  --t-cifra-xl: clamp(48px, 3vw + 36px, 64px);

  /* Medidas de maqueta */
  --contenedor: 1280px;
  --lateral: 264px;
  --alto-banner: 44px;
  --alto-cabecera: 72px;
  --alto-filtros: 64px;
  --gutter: 24px;
  --franja: 6px;           /* alto de .franja-degrade y de las bandas de degradé */

  /* Pilar por defecto (institucional); se redefine con [data-pilar] */
  --pilar: var(--cb-azul);
  --pilar-t: var(--azul-t);
  --pilar-tinte: var(--tinte-azul);
}

/* Color = pilar. El color nunca se asigna por posición. */
[data-pilar="conocer"]        { --pilar: var(--cb-coral);   --pilar-t: var(--coral-t);   --pilar-tinte: var(--tinte-coral); }
[data-pilar="articular"]      { --pilar: var(--cb-celeste); --pilar-t: var(--celeste-t); --pilar-tinte: var(--tinte-celeste); }
[data-pilar="movilizar"]      { --pilar: var(--cb-verde);   --pilar-t: var(--verde-t);   --pilar-tinte: var(--tinte-verde); }
[data-pilar="movilizar-lima"] { --pilar: var(--cb-lima);    --pilar-t: var(--lima-t);    --pilar-tinte: var(--tinte-lima); }
[data-pilar="institucional"]  { --pilar: var(--cb-azul);    --pilar-t: var(--azul-t);    --pilar-tinte: var(--tinte-azul); }
:root, [data-pilar] { --g-pilar: linear-gradient(180deg, var(--pilar-tinte) 0%, var(--blanco) 100%); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: "Nunito Sans", "Nunito", sans-serif;
  font-size: var(--t-m);
  line-height: 1.5;
  color: var(--cb-gris);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--alto-cabecera) + var(--e-4));
  overflow-wrap: break-word;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--e-3);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--cb-gris);
}
h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); font-weight: 700; }
h3 { font-size: var(--t-h3); font-weight: 700; }
h4 { font-size: var(--t-l); font-weight: 700; }

p { margin: 0 0 var(--e-3); }
.medida { max-width: 68ch; }

a { color: var(--cb-azul); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 700; }
small, .peq { font-size: var(--t-s); }
.xs { font-size: var(--t-xs); }

ul, ol { margin: 0 0 var(--e-3); padding-left: 1.25em; }

img, svg { display: block; max-width: 100%; }

/* Controles: heredan la tipografía de marca (incluye el desplegable nativo) */
button, input, select, textarea, option { font: inherit; color: inherit; }

/* Cifras siempre tabulares */
.num, .cifra__valor, .anillo__num, .barra__num, td.num, th.num, .hallazgo__cifra, .org__nivel-num, .hero__num, .mosaico-comuna__n {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Foco visible solo con teclado: ninguna regla usa :focus */
:focus-visible {
  outline: 3px solid var(--cb-azul);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
.btn:focus-visible, .chip:focus-visible { outline-offset: 3px; }

/* Rótulos: caja baja, peso 600 (sin mayúsculas) */
.rotulo { font-size: var(--t-s); font-weight: 600; color: var(--cb-gris); margin-bottom: var(--e-1); }

/* Fuente y fecha bajo una cifra o gráfico */
.fuente { font-size: var(--t-xs); color: var(--cb-gris); margin: 0; }
.fuente a { color: var(--cb-azul); }

/* Metadatos con jerarquía (sustituye a las cadenas «A · B · C») */
.meta { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; min-width: 0; }
.meta--fila { flex-direction: row; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: center; }
.meta__principal { font-size: var(--t-l); font-weight: 600; color: var(--cb-gris); }
.meta__secundario { font-size: var(--t-s); color: var(--cb-gris); display: inline-flex; align-items: center; gap: var(--e-1); }
.meta__secundario .ico { width: 18px; height: 18px; }

/* Etiqueta y resalte en crema (acento, nunca fondo de bloque) */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-full);
  background: var(--cb-crema);
  color: var(--cb-gris);
  font-size: var(--t-s);
  font-weight: 700;
  line-height: 1.3;
}
.etiqueta .ico { width: 18px; height: 18px; }
.resalte { background: var(--cb-crema-claro); border-radius: var(--r-s); padding: 0 var(--e-1); }

/* ---------- Íconos ---------- */
.ico {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}
.ico--s { width: 20px; height: 20px; }
.ico--xs { width: 18px; height: 18px; }

/* Círculo de pilar: 44/24 px; --s 36/20; --xs 28/16 (rótulos de gráfico); --l 64/32 (cifra protagonista) */
.ico-circulo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pilar);
  color: var(--blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ico-circulo .ico { width: 24px; height: 24px; }
.ico-circulo--s { width: 36px; height: 36px; }
.ico-circulo--s .ico { width: 20px; height: 20px; }
.ico-circulo--xs { width: 28px; height: 28px; }
.ico-circulo--xs .ico { width: 16px; height: 16px; }
.ico-circulo--l { width: 64px; height: 64px; }
.ico-circulo--l .ico { width: 32px; height: 32px; }
.ico-circulo--sol { background: var(--g-sol); background-color: var(--cb-coral); }
.ico-circulo--institucional { background: var(--g-institucional); background-color: var(--cb-azul); }
.ico-circulo--crema { background: var(--cb-crema); color: var(--cb-gris); }
@media (max-width: 599px) {
  .ico-circulo { width: 36px; height: 36px; }
  .ico-circulo .ico { width: 20px; height: 20px; }
  .ico-circulo--xs { width: 28px; height: 28px; }
  .ico-circulo--xs .ico { width: 16px; height: 16px; }
  .ico-circulo--l { width: 52px; height: 52px; }
  .ico-circulo--l .ico { width: 28px; height: 28px; }
}

/* ---------- Franjas y separadores de marca ---------- */
.franja-degrade {
  height: var(--franja);
  border-radius: var(--r-full);
  background: var(--g-espectro);
  background-color: var(--cb-celeste);
  margin: var(--e-4) 0;
}
.franja-degrade--institucional { background: var(--g-institucional); background-color: var(--cb-azul); }
.franja-degrade--sol { background: var(--g-sol); background-color: var(--cb-coral); }
.franja-degrade--calida { background: var(--g-calido); background-color: var(--cb-crema); }
.franja-degrade--pilar { background: var(--pilar); }

.separador-marca {
  margin: var(--e-12) 0;
  display: grid;
  gap: var(--e-3);
  justify-items: center;
}
.separador-marca__img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  object-position: left top;
  border-radius: var(--r-m);
}
.separador-marca--s { margin: var(--e-6) 0; }
.separador-marca--s .separador-marca__img { height: 56px; }
@media (max-width: 599px) { .separador-marca__img { height: 17.5vw; } }  /* dos filas completas de pictogramas */

/* ---------- Saltar al contenido ---------- */
.saltar {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  z-index: 100;
  background: var(--cb-azul);
  color: var(--blanco);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-full);
  font-weight: 600;
}
.saltar:focus-visible { top: var(--e-2); }

/* ---------- Banner de edición (etiqueta de edición: crema como acento) ---------- */
.banner-edicion {
  background: var(--cb-crema);
  color: var(--cb-gris);
  min-height: var(--alto-banner);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-s);
  font-weight: 600;
  text-align: center;
}
.banner-edicion .ico { color: var(--cb-gris); }
.banner-edicion a { color: var(--cb-gris); text-decoration-thickness: 2px; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--superficie);
}
.cabecera__int {
  height: var(--alto-cabecera);
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.cabecera__filete { height: 4px; background: var(--g-espectro); background-color: var(--cb-celeste); }
.logo { display: inline-flex; align-items: center; flex: none; border-radius: var(--r-s); min-height: 44px; min-width: 44px; }
.logo img { height: 40px; width: auto; }
.logo--extendido { display: none; }
.logo--extendido img { height: 20px; }
.cabecera__corte {
  margin-left: auto;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--cb-gris);
  white-space: nowrap;
}
.btn-menu { display: none; }

/* Buscador */
.buscador {
  flex: 1 1 auto;
  max-width: 520px;
  position: relative;
  display: flex;
}
.buscador__campo {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--e-4) 0 var(--e-12);
  border: 2px solid var(--linea);
  border-radius: var(--r-full);
  font: inherit;
  color: var(--cb-gris);
  background: var(--superficie);
}
.buscador__campo::placeholder { color: var(--cb-gris); opacity: 0.8; }
.buscador__campo:focus-visible { border-color: var(--cb-azul); outline: none; }
.buscador__ico {
  position: absolute;
  left: var(--e-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--cb-gris);
  pointer-events: none;
}
.buscador__boton {
  position: absolute;
  right: 0;
  top: 0;
  height: 44px;
  width: 44px;
  border: 0;
  background: transparent;
  color: var(--cb-azul);
  border-radius: var(--r-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Buscador grande (hero) y sugerencias */
.buscador-grande { position: relative; display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-4); }
.buscador-grande .buscador__campo { flex: 1 1 240px; padding-left: var(--e-4); }
.sugerencias {
  position: absolute; top: calc(100% + var(--e-1)); left: 0; right: 0; z-index: 60;
  background: var(--superficie); border-radius: var(--r-m); box-shadow: var(--elev);
  padding: var(--e-2); margin: 0; list-style: none; max-height: 70vh; overflow-y: auto;
}
.sugerencias[hidden] { display: none; }
.sugerencias .sug-grupo { font-weight: 700; font-size: var(--t-s); padding: var(--e-2) var(--e-3) var(--e-1); }
.sugerencias a { display: flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: var(--e-1) var(--e-3); border-radius: var(--r-s); color: var(--cb-gris); text-decoration: none; }
.sugerencias a:hover, .sugerencias [aria-selected="true"] a { background: var(--cb-crema-claro); }
.sugerencias .sug-meta { font-size: var(--t-xs); margin-left: auto; text-align: right; }

/* ---------- Marco: lateral + principal ---------- */
.marco {
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  flex: 1;
}
.principal {
  min-width: 0;
  padding: var(--e-6) 0 var(--e-12);
}
.seccion { margin-bottom: var(--e-12); }
.seccion__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-4); }
.seccion__cabeza h2 { margin-bottom: 0; }
.seccion--filete { padding-top: var(--e-8); border-top: 1px solid var(--linea); }

/* Navegación lateral clara: 9 destinos × 48 px caben en 900 px */
.lateral {
  background: var(--superficie);
  border-right: 1px solid var(--linea);
}
.lateral__lista { list-style: none; margin: 0; padding: var(--e-4) 0; }
.lateral__item a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  margin: 0 var(--e-2) var(--e-1);
  border-radius: var(--r-s);
  color: var(--cb-gris);
  text-decoration: none;
  font-weight: 600;
}
.lateral__item a:hover { background: var(--fondo-suave); }
.lateral__item a[aria-current="page"] { background: var(--cb-crema-claro); color: var(--azul-t); }
.lateral__item .ico { color: var(--cb-gris); }
.lateral__item a[aria-current="page"] .ico { color: var(--azul-t); }
.lateral__cerrar { display: none; }

@media (min-width: 1024px) {
  .marco { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); gap: 0 var(--e-8); }
  .lateral {
    position: sticky;
    top: var(--alto-cabecera);
    height: calc(100vh - var(--alto-cabecera));
    overflow-y: auto;
    margin-left: calc(-1 * var(--e-4));
    padding-right: var(--e-2);
  }
}

/* Cajón móvil (< 1024 px) */
@media (max-width: 1023px) {
  .btn-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--cb-gris);
    border-radius: var(--r-s);
    cursor: pointer;
    flex: none;
  }
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 85vw);
    z-index: 60;
    transform: translateX(-104%);
    transition: transform 0.25s ease;
    box-shadow: none;
    border-right: 0;
    overflow-y: auto;
    padding-top: var(--e-2);
  }
  .lateral.abierta { transform: none; box-shadow: var(--elev); }
  .lateral__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: var(--e-2) var(--e-2) 0 auto;
    border: 0;
    background: transparent;
    color: var(--cb-gris);
    border-radius: var(--r-s);
    cursor: pointer;
  }
  .lateral__velo {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--velo);
    display: none;
  }
  .lateral__velo.visible { display: block; }
  .cabecera__corte { display: none; }
}
@media (max-width: 767px) {
  :root { --alto-cabecera: 60px; --gutter: 16px; }
  .logo--horizontal { display: none; }
  .logo--extendido { display: inline-flex; }
  .buscador { max-width: none; }
}
@media (max-width: 599px) {
  .logo--extendido img { height: 16px; }
  .cabecera__int { gap: var(--e-2); }
  .btn-buscar { display: inline-flex; margin-left: auto; }
  .buscador {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: var(--e-2) var(--gutter) var(--e-3);
    background: var(--superficie);
    box-shadow: var(--elev);
    border-radius: 0 0 var(--r-m) var(--r-m);
  }
  .cabecera.buscar-abierto .buscador { display: flex; }
  .buscador__boton { right: var(--gutter); top: var(--e-2); }
  .buscador__ico { left: calc(var(--gutter) + var(--e-4)); top: calc(var(--e-2) + 22px); }
}
.btn-buscar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--cb-gris);
  border-radius: var(--r-s);
  cursor: pointer;
  flex: none;
}
@media (max-width: 599px) { .btn-buscar { display: inline-flex; } }

/* Anterior / siguiente al pie de cada vista */
.paginar-vistas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: 1px solid var(--linea);
}
.paginar-vistas__pos { font-size: var(--t-s); font-weight: 600; }
.paginar-vistas .btn { flex: 0 1 auto; }

/* Avance de lectura bajo la cabecera */
.avance { height: 3px; background: var(--linea); }
.avance__valor { height: 100%; width: 0; background: var(--cb-azul); border-radius: var(--r-full); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-6);
  border-radius: var(--r-full);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  background: transparent;
  color: var(--cb-azul);
}
.btn--primario { background: var(--cb-azul); color: var(--blanco); border-color: var(--cb-azul); }
.btn--primario:hover { background: var(--celeste-t); border-color: var(--celeste-t); }
.btn--secundario { border-color: var(--cb-azul); color: var(--cb-azul); background: var(--superficie); }
.btn--secundario:hover { background: var(--tinte-azul); }
.btn--pilar { background: var(--pilar-t); color: var(--blanco); border-color: var(--pilar-t); }
.btn--texto { padding-left: var(--e-3); padding-right: var(--e-3); }
.btn--ico { width: 44px; padding: 0; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Objetivos táctiles de enlaces sueltos (≥ 44 px) */
.migas a, .pie a, .enlace-solo, .con-anillo__leyenda a, .org__nombre a, .listas-provincia h3 a, .indice-local a, .lista-comunas a, .pilar a, .ficha-cabecera__nivel a, .participar__tarjeta a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
}
@media (max-width: 599px) { .tabla td a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } }

/* ---------- Barra de filtros fija ---------- */
.filtros {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 30;
  background: var(--superficie);
  border-radius: var(--r-m);
  box-shadow: var(--elev);
  margin-bottom: var(--e-6);
}
.filtros__fila {
  min-height: var(--alto-filtros);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  flex-wrap: wrap;
}
.filtros__rotulo { font-weight: 700; display: inline-flex; align-items: center; gap: var(--e-2); margin-right: var(--e-2); }
.filtros__contador { font-weight: 600; font-size: var(--t-s); white-space: normal; margin-left: 0; flex: 1 1 200px; }
.filtros__facetas { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.filtros .filtros__toggle { display: none; }
.filtros__buscar { flex: 1 1 220px; min-width: 180px; max-width: 320px; }
.faceta {
  min-height: 44px;
  padding: 0 var(--e-3);
  border: 2px solid var(--linea);
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--cb-gris);
  font: inherit;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  cursor: pointer;
}
.faceta:hover { border-color: var(--cb-azul); }
.faceta__n { font-size: var(--t-xs); font-weight: 600; color: var(--cb-gris); }
.faceta-wrap { position: relative; }
.faceta[aria-pressed="true"], .faceta[aria-expanded="true"] { border-color: var(--cb-azul); }
.panel-faceta {
  position: absolute; top: calc(100% + var(--e-1)); left: 0; z-index: 50; min-width: 300px; max-width: min(380px, 92vw);
  max-height: 60vh; overflow-y: auto; background: var(--superficie); border-radius: var(--r-m); box-shadow: var(--elev); padding: var(--e-3);
}
.panel-faceta[hidden] { display: none; }
.panel-faceta fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.panel-faceta legend { font-weight: 700; padding: 0; margin-bottom: var(--e-2); }
.opcion { display: flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-2); border-radius: var(--r-s); cursor: pointer; }
.opcion:hover { background: var(--fondo-suave); }
.opcion input { width: 20px; height: 20px; flex: none; accent-color: var(--cb-azul); }
.opcion__n { margin-left: auto; font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.opcion[aria-disabled="true"] { font-style: italic; cursor: default; }
.opcion-grupo { font-weight: 700; font-size: var(--t-s); padding: var(--e-2) var(--e-2) 0; }
.opcion[hidden], .opcion-grupo[hidden] { display: none; }
.ver-resultados { display: none; }
.filtros__fila--chips[hidden] { display: none; }

/* Chip de filtro activo: blanco, borde 2 px, texto -t del pilar */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 44px;
  padding: 0 var(--e-1) 0 var(--e-3);
  border-radius: var(--r-full);
  background: var(--superficie);
  border: 2px solid var(--pilar-t);
  color: var(--pilar-t);
  font-weight: 700;
  font-size: var(--t-s);
}
.chip__quitar {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chip__quitar:hover { background: var(--fondo-suave); }
@media (max-width: 767px) {
  .chip__quitar { width: 44px; height: 44px; }
  .filtros { border-radius: var(--r-s); }
  .filtros__facetas { display: none; width: 100%; }
  .filtros.desplegada .filtros__facetas { display: flex; }
  .filtros .filtros__toggle { display: inline-flex; }
  .filtros__rotulo { display: none; }
  .filtros__buscar { max-width: none; flex: 1 1 140px; min-width: 0; }
  .faceta-wrap { width: 100%; }
  .faceta-wrap > .faceta, .filtros__facetas > .faceta { width: 100%; justify-content: space-between; }
  .panel-faceta { position: static; box-shadow: none; max-width: none; max-height: 50vh; margin-top: var(--e-1); background: var(--fondo-suave); }
  .filtros.desplegada { max-height: calc(100vh - var(--alto-cabecera) - var(--e-4)); overflow-y: auto; }
  .filtros.desplegada .ver-resultados { display: inline-flex; width: 100%; }
}
#resultados .tabla th { top: calc(var(--alto-cabecera) + var(--alto-barra, var(--alto-filtros))); }
.paginacion button { min-width: 44px; min-height: 44px; border: 0; border-radius: var(--r-s); background: transparent; font: inherit; font-weight: 600; color: var(--cb-azul); cursor: pointer; padding: 0 var(--e-2); }
.paginacion button:hover { background: var(--fondo-suave); }
.paginacion button:disabled { color: var(--cb-gris); cursor: default; }

/* Estado vacío: ilustración de marca + mensaje */
.vacio {
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: var(--e-6);
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  flex-wrap: wrap;
}
/* fondo-03 recortado: una fila de pictogramas (la fila mide ≈ 8 % del ancho de la imagen) */
.vacio__img { flex: 1 0 100%; width: 100%; height: 64px; object-fit: cover; object-position: left top; border-radius: var(--r-s); }
.vacio p { margin: 0; flex: 1 1 280px; }

/* ---------- Panel genérico: blanco, filete hairline, radio --r-m ---------- */
.panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); padding: var(--e-6); min-width: 0; }

/* ---------- Hero blanco con ilustración oficial ---------- */
.hero {
  position: relative;
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  padding: var(--e-8);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e-6);
  align-items: end;
  overflow: hidden;
  min-height: 460px;
  background: var(--superficie);
}
.hero__cuerpo { grid-column: span 7; min-width: 0; position: relative; z-index: 1; }
.hero__cuerpo h1 { margin-bottom: var(--e-3); }
.hero__cuerpo p { max-width: 56ch; font-size: var(--t-l); }
.hero__acciones { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-4); }
.hero__ilustracion {
  /* Ocupa el 56 % inferior de la columna derecha: la cifra (arriba) nunca queda sobre los pictogramas */
  position: absolute;
  right: 0;
  bottom: 0;
  height: 56%;
  width: 42%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  user-select: none;
}
.hero__cifra {
  grid-column: span 5;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-width: 0;
  padding-left: var(--e-6);
  border-left: 1px solid var(--linea);
  align-self: start;
}
.hero__cifra-texto { min-width: 0; }
.hero__num { display: block; font-size: var(--t-cifra); font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--cb-gris); overflow-wrap: anywhere; }
.hero__rotulo { font-weight: 700; margin: var(--e-1) 0; max-width: 24ch; line-height: 1.3; }
.hero__cifra .fuente { max-width: 32ch; }
.hero + .franja-degrade { margin-top: var(--e-3); margin-bottom: var(--e-8); }
@media (max-width: 1199px) {
  .hero__cuerpo { grid-column: span 12; }
  .hero__cifra { grid-column: span 12; border-left: 0; padding-left: 0; padding-top: var(--e-4); border-top: 1px solid var(--linea); }
  .hero__ilustracion { position: static; grid-column: span 12; order: -1; width: 100%; height: 160px; object-position: right center; }
  .hero { min-height: 0; }
}
@media (max-width: 599px) {
  .hero { padding: var(--e-6) var(--e-4); border-radius: var(--r-m); }
  .hero__ilustracion { display: none; }
}

/* ---------- Pilares (El Observatorio) ---------- */
.pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.pilar {
  background: var(--g-pilar);
  background-color: var(--pilar-tinte);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: var(--e-6);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  min-width: 0;
}
.pilar h3 { margin: 0; font-size: var(--t-xl); }
.pilar p { margin: 0; }
.pilar--activo { border: 2px solid var(--pilar); }
.pilar__cabeza { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.pilar__cabeza .etiqueta { margin-left: auto; }
.pilar a { color: var(--pilar-t); font-weight: 700; }
@media (max-width: 1023px) { .pilares { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Hallazgo: cifra protagonista + gráfico anotado + conclusión ---------- */
.hallazgos { display: grid; gap: 0; }
.hallazgo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e-4) var(--e-6);
  padding: var(--e-8) 0;
  border-top: 1px solid var(--linea);
}
.hallazgo:first-child { border-top: 0; padding-top: 0; }
.hallazgo__cifra {
  grid-column: span 4;
  font-size: var(--t-cifra-xl);
  font-weight: 800;
  line-height: 1;
  color: var(--cb-gris);
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.hallazgo__cifra .ico-circulo { margin-bottom: var(--e-2); }
.hallazgo__unidad { font-size: var(--t-m); font-weight: 600; line-height: 1.3; }
.hallazgo__texto { grid-column: span 8; min-width: 0; }
.hallazgo__texto h3 { margin-bottom: var(--e-2); }
.hallazgo__texto p { max-width: 68ch; }
.hallazgo__grafico { margin: var(--e-4) 0; }
.hallazgo__conclusion {
  border: 2px solid var(--pilar);
  border-radius: var(--r-m);
  padding: var(--e-4) var(--e-6);
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  margin: var(--e-4) 0 var(--e-3);
}
.hallazgo__conclusion p { margin: 0; font-weight: 600; }
.hallazgo__conclusion .ico { color: var(--pilar-t); flex: none; margin-top: 2px; }
.hallazgo .fuente { margin-top: var(--e-2); }
@media (max-width: 767px) {
  .hallazgo__cifra, .hallazgo__texto { grid-column: span 12; }
  .hallazgo { padding: var(--e-6) 0; }
}

/* Alias de V0 conservado: la franja cálida deja de ser bloque crema */
.franja-calida { border: 1px solid var(--linea); border-radius: var(--r-l); padding: var(--e-8) var(--e-6); background: var(--superficie); }
.franja-calida::before { content: ""; display: block; height: var(--franja); border-radius: var(--r-full); background: var(--g-calido); background-color: var(--cb-crema); margin-bottom: var(--e-6); }
@media (max-width: 767px) { .franja-calida { padding: var(--e-6) var(--e-4); } }

/* ---------- Mosaico de cifras ---------- */
.mosaico {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}
.mosaico > * { grid-column: span 3; min-width: 0; }
.mosaico > .col-4 { grid-column: span 4; }
.mosaico > .col-6 { grid-column: span 6; }
.mosaico > .col-12 { grid-column: span 12; }
@media (max-width: 1023px) { .mosaico > *, .mosaico > .col-4 { grid-column: span 6; } .mosaico > .col-6 { grid-column: span 12; } }
@media (max-width: 599px) { .mosaico > *, .mosaico > .col-4, .mosaico > .col-6 { grid-column: span 12; } }

.cifra {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: var(--e-6);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.cifra--tinte { background: var(--g-pilar); background-color: var(--pilar-tinte); }
.cifra__valor {
  margin: var(--e-2) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  flex-wrap: wrap;
  line-height: 1;
}
.cifra__num { font-size: var(--t-cifra); font-weight: 800; color: var(--cb-gris); letter-spacing: -0.01em; }
.cifra__num--texto { font-size: var(--t-h2); white-space: nowrap; }
.fecha { white-space: nowrap; }
.cifra__unidad { font-size: var(--t-m); font-weight: 600; color: var(--pilar-t); }
.cifra__rotulo { font-size: var(--t-m); font-weight: 700; margin: 0; max-width: 32ch; line-height: 1.3; }
.cifra__denominador { font-size: var(--t-s); margin: 0; }
.cifra__sin-dato { font-size: var(--t-h3); font-weight: 700; color: var(--cb-gris); }
.cifra .fuente { margin-top: auto; padding-top: var(--e-2); border-top: 1px solid var(--linea); }

/* ---------- Anillo de completitud / cobertura ---------- */
.anillo {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0;
  flex: none;
}
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo__pista { fill: none; stroke: var(--linea); stroke-width: 8; }
.anillo__valor { fill: none; stroke: var(--pilar); stroke-width: 8; stroke-linecap: round; }
.anillo--espectro .anillo__valor { stroke: url(#g-espectro-svg); }
.anillo__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--cb-gris);
}
.anillo--s { width: 40px; height: 40px; }
.anillo--s .anillo__num { font-size: var(--t-xs); }
.anillo--s .anillo__pista, .anillo--s .anillo__valor { stroke-width: 10; }
.anillo--xs { width: 24px; height: 24px; }
.anillo--xs .anillo__pista, .anillo--xs .anillo__valor { stroke-width: 12; }
.con-anillo { display: flex; align-items: center; gap: var(--e-4); }
.con-anillo__leyenda { min-width: 0; }
.anillos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e-4); margin: var(--e-3) 0; }
.anillo-dato { margin: 0; display: flex; align-items: center; gap: var(--e-3); }
.anillo-dato .anillo { flex: none; }
.anillo-dato figcaption { font-size: var(--t-s); }
@media (max-width: 599px) { .con-anillo { flex-direction: column; align-items: flex-start; } }

/* ---------- Barras en HTML (gráficos de Panorama y Hallazgos) ----------
   Puntas redondeadas siempre (--r-full). La leyenda es HTML accesible:
   rótulo con nombre de la causa e ícono en círculo del pilar. */
.barras { display: flex; flex-direction: column; gap: var(--e-3); }
.barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3); align-items: center; min-width: 0; }
.barra__rotulo { grid-column: 1 / -1; font-size: var(--t-s); font-weight: 600; margin: 0; display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.barra__pista {
  position: relative;
  height: 10px;
  background: var(--linea);
  border-radius: var(--r-full);
  overflow: visible;
  display: flex;
  gap: 2px;
}
.barra__valor { height: 100%; background: var(--pilar); border-radius: var(--r-full); min-width: 10px; }
.barra__valor[style*="width: 0%"], .barra__valor[data-cero] { min-width: 0; width: 0; }
.barra--espectro .barra__valor { background: var(--g-espectro); background-color: var(--cb-celeste); }
.barra--a .barra__valor { background: var(--cb-azul); }
.barra--b .barra__valor { background: var(--cb-celeste); }
.barra__valor--a { background: var(--cb-azul); }
.barra__valor--b { background: var(--cb-celeste); }
.barra__valor--sin { background: transparent; border: 2px solid var(--cb-gris); }
.barra__ref {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 18px;
  background: var(--cb-gris);
  transform: translateX(-1px);
  border-radius: var(--r-full);
}
.barra__num { font-weight: 700; font-size: var(--t-s); min-width: 4ch; text-align: right; white-space: nowrap; }
.barra__ref-texto { grid-column: 1 / -1; font-size: var(--t-xs); margin: 0; }
/* Apilada: segmentos separados 2 px, cada uno con puntas redondeadas */
.barra--apilada .barra__pista { height: 14px; background: transparent; }
.barra--apilada .barra__valor { flex: 0 0 auto; }
.barra--apilada .barra__num { display: none; }
.barra--apilada .barra__pista--fondo { background: var(--linea); }

/* Gráficos SVG de V0 (compatibilidad): rx en CSS para puntas redondeadas */
.grafico { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); padding: var(--e-6); min-width: 0; }
.grafico__dato, .grafico__denominador { margin: 0 0 var(--e-2); max-width: 72ch; }
.grafico__svg { width: 100%; max-width: 520px; height: auto; margin: var(--e-3) 0; overflow: visible; }
.grafico .tabla { margin-top: var(--e-2); }
.g-rot, .g-val { font-family: inherit; font-size: var(--t-m); font-weight: 600; fill: var(--cb-gris); }
@media (max-width: 599px) { .g-rot, .g-val { font-size: 17px; } }
.g-pista { fill: var(--linea); rx: 7px; }
.g-valor { fill: var(--pilar); rx: 7px; }
.g-valor--a { fill: var(--cb-azul); }
.g-valor--b { fill: var(--cb-celeste); }
.g-valor--sin { fill: var(--superficie); stroke: var(--cb-gris); stroke-width: 2; }
.g-clip { rx: 7px; }
.g-trama-linea { stroke: var(--cb-gris); stroke-width: 2; }
.g-rotulo { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-s); font-weight: 600; }

/* ---------- Tarjeta de organización ---------- */
.rejilla-org { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e-4); }
.org {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: var(--e-6);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
}
.org__nombre { font-size: var(--t-l); margin: 0; line-height: 1.3; }
.org__nombre a { color: var(--cb-gris); text-decoration: none; }
.org__nombre a:hover { color: var(--cb-azul); text-decoration: underline; }
.org__meta { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: var(--t-s); }
.org__meta .ico { color: var(--cb-gris); }
.org__causa { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-1) 0 0; font-weight: 600; }
.org__nivel { display: flex; align-items: center; gap: var(--e-3); margin-top: auto; padding-top: var(--e-3); border-top: 1px solid var(--linea); font-size: var(--t-s); }
.org__universo { font-size: var(--t-xs); font-weight: 600; }

/* ---------- Tabla con encabezado fijo respecto de la página ---------- */
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); overflow: visible; }
.tabla caption { text-align: left; padding: var(--e-4) var(--e-4) var(--e-2); font-weight: 700; caption-side: top; }
.tabla caption .fuente { font-weight: 400; margin-top: var(--e-1); }
.tabla th {
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--alto-filtros) + var(--e-6));
  z-index: 20;
  background: var(--superficie);
  text-align: left;
  font-weight: 600;
  font-size: var(--t-s);
  padding: var(--e-3) var(--e-4);
  border-bottom: 2px solid var(--linea);
}
.tabla--sin-filtros th { top: var(--alto-cabecera); }
.tabla td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--fondo-suave); }
.tabla th.num, .tabla td.num { text-align: right; white-space: nowrap; }
.tabla .subtotal td { background: var(--tinte-azul); font-weight: 600; }
.tabla td, .tabla th { overflow-wrap: normal; }
.tabla td a[href^="http"], .tabla td[data-th="Archivo"], .tabla td[data-th^="Copia local"] { overflow-wrap: anywhere; }
.tabla th .orden { white-space: nowrap; }
@media (min-width: 600px) and (max-width: 1023px) { .tabla .col-sec { display: none; } }
.tabla .orden {
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--cb-gris);
  padding: var(--e-2) 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  cursor: pointer;
}
.tabla th[aria-sort] .orden { color: var(--cb-azul); }
@media (max-width: 599px) {
  .tabla, .tabla thead, .tabla tbody, .tabla tr, .tabla td, .tabla caption { display: block; width: 100%; }
  .tabla thead { position: absolute; left: -9999px; }
  .tabla tr { padding: var(--e-4); border-bottom: 1px solid var(--linea); }
  .tabla tr[hidden] { display: none; }
  .tabla td { border: 0; padding: var(--e-1) 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-2); }
  .tabla td::before { content: attr(data-th); font-weight: 600; font-size: var(--t-s); flex: 0 0 38%; }
  .tabla td.num { white-space: normal; justify-content: space-between; }
  .tabla td .aviso--sede { flex: 1 0 100%; }
}
.filtro-tabla { margin-bottom: var(--e-4); max-width: 480px; display: grid; gap: var(--e-1); }

/* ---------- Módulos de ficha y estado del dato ---------- */
.modulo { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); padding: var(--e-6); margin-bottom: var(--e-4); }
.modulo__cabeza { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.modulo__cabeza h2 { margin: 0; font-size: var(--t-h3); }
.datos { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-4) var(--e-6); }
.dato { min-width: 0; padding-bottom: var(--e-3); border-bottom: 1px solid var(--linea); }
.dato dt { font-size: var(--t-s); font-weight: 600; margin-bottom: var(--e-1); }
.dato dd { margin: 0; font-size: var(--t-m); }
.dato__valor { display: block; margin-bottom: var(--e-1); }
.dato__fuente { display: block; font-size: var(--t-xs); margin-top: var(--e-1); }
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  white-space: nowrap;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--cb-gris);
}
.estado .ico { width: 18px; height: 18px; }
.estado--oculto { color: var(--cb-gris); font-style: italic; }
.estado--verificado { color: var(--verde-t); }
.estado--autodeclarado { color: var(--azul-t); }
.estado--inferido { color: var(--coral-t); }
.estado--sin { color: var(--cb-gris); font-weight: 600; }

/* Lo que falta (campos vacíos ocultos, un solo aviso plegado) */
.falta { border: 1px solid var(--linea); border-radius: var(--r-m); padding: var(--e-2) var(--e-6); margin-bottom: var(--e-4); }
.falta summary { min-height: 44px; display: flex; align-items: center; gap: var(--e-2); font-weight: 600; cursor: pointer; list-style: none; }
.falta summary::-webkit-details-marker { display: none; }
.falta ul { margin: var(--e-2) 0 var(--e-3); columns: 2; column-gap: var(--e-6); }
@media (max-width: 599px) { .falta ul { columns: 1; } }

/* Fuentes numeradas y llamadas [n] */
.fuentes-numeradas { list-style: none; margin: 0; padding: 0; counter-reset: fuente; display: grid; gap: var(--e-2); font-size: var(--t-s); }
.fuentes-numeradas li { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: var(--e-2); scroll-margin-top: calc(var(--alto-cabecera) + var(--e-4)); }
.fuentes-numeradas li::before { counter-increment: fuente; content: "[" counter(fuente) "]"; font-weight: 700; color: var(--cb-gris); }
.fuentes-numeradas li:target { background: var(--cb-crema-claro); border-radius: var(--r-s); }
.llamada { font-size: 0.7em; line-height: 0; vertical-align: super; text-decoration: none; font-weight: 700; padding: 0 0.15em; }
.llamada:hover { text-decoration: underline; }

/* ---------- Cabecera de ficha: panel blanco, banda de degradé, círculo de ícono ---------- */
.ficha-cabecera { margin-bottom: var(--e-6); }
.ficha-cabecera__banda { height: var(--franja); border-radius: var(--r-full); background: var(--g-institucional); background-color: var(--cb-azul); margin-bottom: var(--e-3); }
.ficha-cabecera__panel {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  padding: var(--e-6);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--e-4) var(--e-6);
  align-items: center;
}
.ficha-cabecera__panel h1 { font-size: var(--t-h2); margin-bottom: var(--e-2); }
.ficha-cabecera__meta { display: flex; gap: var(--e-2) var(--e-4); flex-wrap: wrap; margin: 0; font-size: var(--t-s); }
.ficha-cabecera__meta span { display: inline-flex; align-items: center; gap: var(--e-1); }
.ficha-cabecera__nivel { display: flex; align-items: center; gap: var(--e-3); }
@media (max-width: 767px) {
  .ficha-cabecera__panel { grid-template-columns: auto minmax(0, 1fr); border-radius: var(--r-m); }
  .ficha-cabecera__nivel { grid-column: 1 / -1; padding-top: var(--e-3); border-top: 1px solid var(--linea); }
}

/* Llamado («Esta es mi organización»): panel blanco con banda e ícono, sin bloque azul */
.llamado { margin-bottom: var(--e-8); }
.llamado__banda { height: var(--franja); border-radius: var(--r-full); background: var(--g-institucional); background-color: var(--cb-azul); margin-bottom: var(--e-3); }
.llamado__panel {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  padding: var(--e-6);
  display: flex;
  gap: var(--e-4);
  align-items: center;
  flex-wrap: wrap;
}
.llamado__panel p { margin: 0; max-width: 60ch; flex: 1 1 280px; }
.llamado__panel .btn { margin-left: auto; }
.llamado__acciones { display: flex; gap: var(--e-3); flex-wrap: wrap; width: 100%; }

/* Migas */
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-1); padding: 0; margin: 0 0 var(--e-4); font-size: var(--t-s); }
.migas li { display: inline-flex; align-items: center; gap: var(--e-1); }
.migas a { color: var(--cb-azul); }
.migas [aria-current="page"] { font-weight: 600; }

/* Puertas (explorador por causa) */
.puertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e-3); }
.puerta {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: var(--e-3) var(--e-4);
  min-height: 72px;
  color: var(--cb-gris);
  text-decoration: none;
  font-weight: 700;
}
.puerta:hover { background: var(--pilar-tinte); border-color: var(--pilar); }
.puerta__n { margin-left: auto; flex: 0 1 auto; text-align: right; font-weight: 600; font-size: var(--t-s); color: var(--pilar-t); font-variant-numeric: tabular-nums lining-nums; }

/* Lista con íconos */
.lista-ico { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.lista-ico li { display: flex; gap: var(--e-2); align-items: flex-start; }
.lista-ico .ico { color: var(--pilar-t); margin-top: 1px; }

/* Leyendas */
.leyenda { display: flex; gap: var(--e-4); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: var(--t-s); }
.leyenda li { display: inline-flex; align-items: center; gap: var(--e-2); }
.leyenda__muestra { width: 16px; height: 16px; border-radius: 50%; background: var(--pilar); flex: none; }
.leyenda__muestra--a { background: var(--cb-azul); }
.leyenda__muestra--b { background: var(--cb-celeste); }
.leyenda__muestra--sin { background: transparent; border: 2px solid var(--cb-gris); }
.leyenda--mapa { gap: var(--e-2) var(--e-3); margin-top: var(--e-3); }
.leyenda--mapa .leyenda__muestra { width: 28px; height: 14px; border-radius: var(--r-full); border: 1px solid var(--linea); }
.leyenda--mapa [data-clase="0"] { background: var(--mapa-0); }
.leyenda--mapa [data-clase="1"] { background: var(--mapa-1); }
.leyenda--mapa [data-clase="2"] { background: var(--mapa-2); }
.leyenda--mapa [data-clase="3"] { background: var(--mapa-3); }
.leyenda--mapa [data-clase="4"] { background: var(--mapa-4); }
.leyenda__muestra--trama { background: var(--superficie); border: 2px solid var(--cb-gris); }

/* ---------- Mapa coroplético ---------- */
.dos-col { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-6); align-items: start; }
.dos-col--mapa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 1023px) { .dos-col, .dos-col--mapa { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .solo-md { display: none; } }
.solo-lista { display: none; }
@media (max-width: 767px) { .solo-lista { display: block; } }

.mapa-caja { min-width: 0; }
.mapa-caja--comuna { max-width: 560px; }
.mapa { width: 100%; height: auto; max-height: 720px; display: block; }
.mapa path { fill: var(--mapa-0); stroke: var(--blanco); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mapa path[data-dentro="0"] { fill: var(--superficie); stroke: var(--linea); }
.mapa path[data-prov="arauco"] { fill: var(--mapa-1); }
.mapa path[data-prov="biobio"] { fill: var(--mapa-2); }
.mapa path[data-prov="concepcion"] { fill: var(--mapa-3); }
.mapa path[data-dentro="1"] { fill: var(--mapa-2); }
.mapa path[data-clase="0"] { fill: var(--mapa-0); }
.mapa path[data-clase="1"] { fill: var(--mapa-1); }
.mapa path[data-clase="2"] { fill: var(--mapa-2); }
.mapa path[data-clase="3"] { fill: var(--mapa-3); }
.mapa path[data-clase="4"] { fill: var(--mapa-4); }
.mapa .mapa__c--activa path { fill: var(--cb-azul); stroke: var(--cb-gris); stroke-width: 2; }
.mapa a:hover path { fill: var(--cb-coral); }
.mapa a:focus-visible { outline: none; }
.mapa a:focus-visible path { stroke: var(--cb-gris); stroke-width: 3; }
.mapa-pie { margin-top: var(--e-2); }
.capas { margin-bottom: var(--e-3); display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: center; }

/* ---------- Atlas: mosaicos por comuna agrupados por provincia ---------- */
.provincia-grupo { margin-bottom: var(--e-8); }
.provincia-grupo__cabeza { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-4); }
.provincia-grupo__cabeza h3 { margin: 0; }
.provincia-grupo__cabeza .meta__secundario { margin-left: auto; }
.mosaicos-comuna { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-3); }
.mosaico-comuna {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: var(--e-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-2) var(--e-3);
  align-items: center;
  min-width: 0;
  text-decoration: none;
  color: var(--cb-gris);
}
.mosaico-comuna:hover { border-color: var(--cb-azul); background: var(--tinte-azul); }
.mosaico-comuna__nombre { font-weight: 700; font-size: var(--t-m); margin: 0; line-height: 1.3; min-width: 0; }
.mosaico-comuna__n { font-size: var(--t-h2); font-weight: 800; line-height: 1; letter-spacing: -0.01em; }
.mosaico-comuna__unidad { font-size: var(--t-xs); font-weight: 600; display: block; margin-top: var(--e-1); }
.mosaico-comuna .ico-circulo { grid-row: 1 / span 2; grid-column: 2; }
.mosaico-comuna__barra { grid-column: 1 / -1; display: flex; gap: 2px; height: 8px; min-width: 0; }
.mosaico-comuna__seg { height: 100%; border-radius: var(--r-full); min-width: 6px; }
.mosaico-comuna__seg--a { background: var(--cb-azul); }
.mosaico-comuna__seg--b { background: var(--cb-celeste); }
.mosaico-comuna__seg[data-cero] { display: none; }
.mosaico-comuna__leyenda { grid-column: 1 / -1; font-size: var(--t-xs); margin: 0; display: flex; gap: var(--e-3); flex-wrap: wrap; }
.mosaico-comuna__leyenda span { display: inline-flex; align-items: center; gap: var(--e-1); }
.mosaico-comuna__leyenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mosaico-comuna__leyenda i.a { background: var(--cb-azul); }
.mosaico-comuna__leyenda i.b { background: var(--cb-celeste); }
.mosaico-comuna--vacio .mosaico-comuna__n { font-size: var(--t-h3); }

/* Listas de comunas (V0, conservadas para tabla plegada y comuna) */
.lista-comunas { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 var(--e-4); }
.lista-comunas li { display: flex; align-items: center; gap: var(--e-1); min-height: 44px; flex-wrap: wrap; }
.listas-provincia { display: grid; gap: var(--e-4); align-content: start; }
.indice-local { border: 1px solid var(--linea); border-radius: var(--r-m); padding: var(--e-4) var(--e-6); margin-bottom: var(--e-4); }
.indice-local .lista-ico { flex-direction: row; flex-wrap: wrap; gap: 0 var(--e-4); }
.indice-local .lista-ico li { align-items: center; }
@media (max-width: 599px) { .lista-comunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Cómo participar ---------- */
.participar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.participar__tarjeta {
  background: var(--g-pilar);
  background-color: var(--pilar-tinte);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: var(--e-6);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  min-width: 0;
}
.participar__tarjeta h3 { margin: 0; font-size: var(--t-xl); }
.participar__tarjeta p { margin: 0; max-width: 48ch; }
.participar__tarjeta .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 767px) { .participar { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cita de Comunidad Biobío (en su propia voz) ---------- */
.voz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); align-items: start; padding: var(--e-6); border: 1px solid var(--linea); border-radius: var(--r-m); }
.voz blockquote { margin: 0; font-size: var(--t-xl); font-weight: 600; line-height: 1.35; max-width: 56ch; }
.voz figcaption { grid-column: 2; font-size: var(--t-xs); }

/* ---------- Pie sobre fondo-03 ---------- */
.pie { background: var(--superficie); border-top: 1px solid var(--linea); margin-top: var(--e-8); }
.pie__int {
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: var(--e-8) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e-6);
  font-size: var(--t-s);
}
.pie__marca { grid-column: span 3; }
.pie__marca img { width: 140px; height: auto; }
.pie__col { grid-column: span 3; }
.pie__col h4 { font-size: var(--t-m); margin-bottom: var(--e-2); }
.pie__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-1); }
.pie__col a { color: var(--cb-gris); }
.pie__iniciativa { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.pie__iniciativa a { color: var(--cb-azul); }
.pie-marca { display: block; width: 100%; height: clamp(48px, 8.4vw, 136px); object-fit: cover; object-position: left top; }
@media (max-width: 767px) { .pie__marca, .pie__col { grid-column: span 12; } }
@media (max-width: 599px) { .pie-marca { height: 17.5vw; } }

/* Volver arriba (flotante) */
.volver {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 35;
  box-shadow: var(--elev);
  background: var(--superficie);
}

/* ---------- Bloque «Contactar» ---------- */
.contactar { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); padding: var(--e-6); margin-bottom: var(--e-4); }
.contactar h2 { font-size: var(--t-h3); display: flex; align-items: center; gap: var(--e-3); }
.canales {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--e-2);
  display: flex;
  gap: var(--e-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.canal { flex: 0 0 auto; width: 220px; min-width: 0; scroll-snap-align: start; display: grid; gap: var(--e-1); }
.btn--canal { width: 100%; justify-content: flex-start; border-color: var(--celeste-t); color: var(--celeste-t); background: var(--superficie); }
.btn--canal:hover { background: var(--tinte-celeste); }
.btn--canal .ico--xs { margin-left: auto; }
.canal__fuente { font-size: var(--t-xs); padding: 0 var(--e-1); }
.contactar--vacio .contactar__panel {
  border: 2px solid var(--cb-crema);
  border-radius: var(--r-m);
  padding: var(--e-4) var(--e-6);
  display: flex;
  gap: var(--e-4);
  align-items: center;
  flex-wrap: wrap;
}
.contactar--vacio p { margin: 0; flex: 1 1 280px; }
.contacto { display: inline-flex; gap: var(--e-1); color: var(--celeste-t); }
@media (max-width: 599px) {
  .contactar { padding: var(--e-4); }
  .canal { width: 200px; }
}

/* ---------- Avisos, cita, plegados, segmentos, paginación ---------- */
.aviso {
  border: 2px solid var(--cb-crema);
  border-radius: var(--r-m);
  padding: var(--e-4) var(--e-6);
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  margin-bottom: var(--e-6);
  background: var(--superficie);
}
.aviso .ico { color: var(--cb-gris); flex: none; margin-top: 2px; }
.aviso p { margin: 0; max-width: 72ch; }
.aviso--sede { font-size: var(--t-s); padding: var(--e-2) var(--e-3); margin: var(--e-1) 0 0; border-width: 1px; }
.cita { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); padding: var(--e-6); display: grid; gap: var(--e-3); }
.cita__texto { margin: 0; overflow-wrap: anywhere; font-size: var(--t-s); background: var(--fondo-suave); border-radius: var(--r-s); padding: var(--e-3) var(--e-4); }
.cita .btn { justify-self: start; }
.plegado { border: 1px solid var(--linea); border-radius: var(--r-m); padding: 0 var(--e-6); margin-bottom: var(--e-4); }
.plegado summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 600;
  list-style: none;
}
.plegado summary::-webkit-details-marker { display: none; }
.plegado summary .ico { transition: transform 0.2s; }
.plegado[open] summary .ico--flecha { transform: rotate(180deg); }
.plegado--suelto { border: 0; padding: 0; }
.sub-bloque { padding: var(--e-3) 0; border-top: 1px solid var(--linea); }
.sub-bloque h3 { font-size: var(--t-m); margin-bottom: var(--e-2); }
.vista-cabeza { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-4); }
.vista-cabeza .resultado { font-weight: 600; margin: 0; }
.segmento { display: inline-flex; border: 2px solid var(--linea); border-radius: var(--r-full); overflow: hidden; }
.segmento button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--e-4);
  border: 0;
  background: var(--superficie);
  color: var(--cb-gris);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
}
.segmento button[aria-pressed="true"] { background: var(--cb-crema-claro); color: var(--azul-t); }
.paginacion { display: flex; gap: var(--e-1); align-items: center; flex-wrap: wrap; margin-top: var(--e-6); }
.paginacion a, .paginacion span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-s); padding: 0 var(--e-2); text-decoration: none; font-weight: 600; }
.paginacion a:hover { background: var(--fondo-suave); }
.paginacion [aria-current="page"] { background: var(--cb-azul); color: var(--blanco); }

/* ---------- Campos y formulario de actualización ---------- */
.campo {
  width: 100%; min-height: 44px; padding: var(--e-2) var(--e-3); border: 2px solid var(--linea); border-radius: var(--r-s);
  font: inherit; color: var(--cb-gris); background: var(--superficie);
}
textarea.campo { min-height: 96px; resize: vertical; }
.campo:focus-visible { border-color: var(--cb-azul); outline: none; }
select.campo { appearance: auto; }
.pasos { list-style: none; display: flex; gap: var(--e-2); flex-wrap: wrap; padding: 0; margin: var(--e-4) 0; }
.pasos li { padding: var(--e-2) var(--e-4); border-radius: var(--r-full); background: var(--superficie); font-weight: 600; font-size: var(--t-s); border: 2px solid var(--linea); }
.pasos li[aria-current="step"] { background: var(--cb-crema-claro); color: var(--azul-t); border-color: var(--azul-t); }
.formulario { display: grid; gap: var(--e-3); max-width: 720px; }
.formulario section { display: grid; gap: var(--e-2); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); padding: var(--e-6); }
.formulario section[hidden] { display: none; }
.formulario .campo-grupo { border: 0; padding: 0; margin: 0; }
.formulario h2 { font-size: var(--t-h3); }
.error { color: var(--coral-t); font-weight: 600; margin: 0; }
.error:empty { display: none; }
.lista-resultados { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-resultados button { width: 100%; min-height: 44px; text-align: left; border: 0; background: transparent; font: inherit; color: var(--cb-azul); cursor: pointer; border-radius: var(--r-s); padding: var(--e-2) var(--e-3); }
.lista-resultados button:hover { background: var(--fondo-suave); }
.pasos-nav { justify-content: space-between; max-width: 720px; }
#diff table { margin-bottom: var(--e-3); }

/* ---------- Utilidades ---------- */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fila { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Impresión ---------- */
@media print {
  .cabecera, .filtros, .lateral, .lateral__velo, .volver, .btn-menu, .saltar, .buscador, .hero__ilustracion, .pie-marca, .separador-marca { display: none !important; }
  .banner-edicion { border-bottom: 1px solid var(--linea); }
  .marco { display: block; max-width: none; padding: 0; }
  .tabla th { position: static; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--t-xs); }
  .cifra, .org, .modulo, .pilar, .hallazgo { break-inside: avoid; }
}

/* Ajustes del ingeniero de plataforma sobre estilos-v1.css (director-arte). Se concatenan al final en dist-v1/estilos.css.
   Solo corrigen comportamiento; no introducen colores ni tipografías nuevas. */
[hidden] { display: none !important; }
.tabla .ico-circulo { margin-right: var(--e-2); vertical-align: middle; }

/* Sublistas de la lateral (WIREFRAMES_V1 §3.2): Hallazgos (titulares) y Territorio (provincias), solo en la vista activa */
.lateral__sub { list-style: none; margin: 0 0 var(--e-1); padding: 0; }
.lateral__item .lateral__sub a {
  display: block;
  min-height: 36px;
  margin: 0 var(--e-2) 0 calc(var(--e-4) + 24px + var(--e-3));
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-s);
  font-weight: 400;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lateral__item .lateral__sub a:hover { background: var(--fondo-suave); }
.lateral__item .lateral__sub a[aria-current="page"] { font-weight: 700; }

/* Fuentes numeradas: llamada [n] baja a #fuente-n y «Volver al dato» sube a la primera llamada */
.llamada, .fuentes-numeradas li { scroll-margin-top: calc(var(--alto-cabecera) + var(--e-6)); }
.fuentes-numeradas .volver-dato { display: inline-flex; align-items: center; gap: var(--e-1); margin-left: var(--e-2); white-space: nowrap; }

/* Botón «Vistas» (< 1024 px): ícono más texto visible, al final de la cabecera */
@media (max-width: 1023px) {
  .btn-menu { order: 10; width: auto; min-width: 44px; gap: var(--e-1); padding: 0 var(--e-3); border: 1px solid var(--linea); font-family: inherit; font-size: var(--t-m); font-weight: 700; }
  .btn-menu__texto { line-height: 1; }
}
/* A 390 px caben logo extendido, buscador y «Vistas» en una fila: el logo se encoge en proporción si falta ancho */
@media (max-width: 599px) {
  .logo--extendido { flex: 0 1 auto; min-width: 0; }
  .logo--extendido img { width: 256px; max-width: 100%; height: auto; }
  .btn-menu { padding: 0 var(--e-2); font-size: var(--t-s); }
}

/* Versión pública (G3): sin mapa de límites comunales, la escala se lee en una banda de color en cada mosaico de comuna (misma rampa y leyenda del mapa) */
.mosaico-comuna__escala { grid-column: 1 / -1; display: block; height: 10px; border-radius: var(--r-full); border: 1px solid var(--linea); background: var(--mapa-0); }
.mosaico-comuna__escala[data-clase="1"] { background: var(--mapa-1); }
.mosaico-comuna__escala[data-clase="2"] { background: var(--mapa-2); }
.mosaico-comuna__escala[data-clase="3"] { background: var(--mapa-3); }
.mosaico-comuna__escala[data-clase="4"] { background: var(--mapa-4); }

/* Cartograma hexagonal de las 33 comunas (.hexmapa): un hexágono por comuna, sin límites. Relleno por clase con --mapa-0..4.
   Texto: gris sobre clases 0-1 (6,17 y 4,95:1), chapa blanca bajo el texto en clases 2-3 (gris sobre blanco, más de 7:1) y blanco sobre clase 4 (5,18:1). */
.hex-caja { width: 100%; max-width: 760px; margin: var(--e-4) 0 0; }
.hex-previa .hex-caja { margin-top: var(--e-3); }
.hexmapa { display: block; width: 100%; height: auto; }
.hexmapa__c { cursor: pointer; text-decoration: none; }
.hexmapa__c polygon { fill: var(--mapa-0); stroke: var(--cb-gris); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.hexmapa__c[data-prov="arauco"] polygon { stroke: var(--cb-verde); }
.hexmapa__c[data-prov="biobio"] polygon { stroke: var(--cb-coral); }
.hexmapa__c[data-clase="1"] polygon { fill: var(--mapa-1); }
.hexmapa__c[data-clase="2"] polygon { fill: var(--mapa-2); }
.hexmapa__c[data-clase="3"] polygon { fill: var(--mapa-3); }
.hexmapa__c[data-clase="4"] polygon { fill: var(--mapa-4); }
.hexmapa__c .hexmapa__foco { fill: none; stroke: none; }
.hexmapa__chapa { display: none; fill: var(--blanco); rx: var(--r-s); }
.hexmapa__c[data-clase="2"] .hexmapa__chapa--n, .hexmapa__c[data-clase="3"] .hexmapa__chapa--n { display: block; }
.hexmapa__ab, .hexmapa__n { fill: var(--cb-gris); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-family: inherit; }
.hexmapa__ab { display: none; font-size: 15px; font-weight: 600; }
.hexmapa__n { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums lining-nums; transform: translateY(-14px); }
.hexmapa__c[data-clase="4"] .hexmapa__ab, .hexmapa__c[data-clase="4"] .hexmapa__n { fill: var(--blanco); }
.hexmapa__prov { fill: var(--cb-gris); font-size: 30px; font-weight: 700; font-family: inherit; dominant-baseline: central; }
.hexmapa__nota { margin: var(--e-2) 0 0; }
.hexmapa__c:hover polygon { stroke: var(--cb-gris); stroke-width: 4px; filter: brightness(1.07); }
.hexmapa__c:focus-visible { outline: none; }
.hexmapa__c:focus-visible .hexmapa__foco { stroke: var(--cb-azul); stroke-width: 3px; vector-effect: non-scaling-stroke; }
/* desde 640 px el hexágono mide más de 66 px y la abreviatura se dibuja a 11 px o más una vez escalada (a 600 px eran 10,4 px); por debajo solo la cifra, y la comuna va en el aria-label y el título */
@media (min-width: 640px) {
  .hexmapa__ab { display: block; }
  .hexmapa__n { transform: translateY(0); }
  .hexmapa__c[data-clase="2"] .hexmapa__chapa--ab, .hexmapa__c[data-clase="3"] .hexmapa__chapa--ab { display: block; }
  .hexmapa__c[data-clase="2"] .hexmapa__chapa--n, .hexmapa__c[data-clase="3"] .hexmapa__chapa--n { display: none; }
}

/* revisión 002: hexmapa (director-arte, 24-10-2026, qa/REVISION_DISENO_002.md). Solo se añaden reglas; nada de lo anterior se reescribe.
   1. Trazo uniforme blanco: el color de pilar nunca va por posición (diseno-cb «Íconos» y COMPONENTES_V1 §5.7 «trazos blancos»); la provincia la dicen el rótulo, la agrupación y el aria-label.
   2. Halo blanco bajo el texto en las clases 2 y 3 en vez de la chapa rectangular: la chapa tapaba el color (la clase 2 y la 3 se leían iguales) y se veía como píldora.
      Contraste medido: gris sobre --mapa-2 3,27:1 y sobre --mapa-3 2,53:1 (no AA); blanco 2,11 y 2,74 (no AA); gris sobre el halo blanco 6,92:1 (AA). El halo es de 2 px
      visibles a cualquier escala (stroke 4 px centrado, non-scaling); paint-order lo pinta bajo el relleno. */
.hexmapa__c polygon { stroke: var(--blanco); stroke-width: 2px; stroke-linejoin: round; }
.hexmapa__c[data-prov="arauco"] polygon, .hexmapa__c[data-prov="biobio"] polygon { stroke: var(--blanco); }
.hexmapa__c .hexmapa__chapa { display: none; }
.hexmapa__c[data-clase="2"] .hexmapa__ab, .hexmapa__c[data-clase="2"] .hexmapa__n,
.hexmapa__c[data-clase="3"] .hexmapa__ab, .hexmapa__c[data-clase="3"] .hexmapa__n {
  paint-order: stroke fill; stroke: var(--blanco); stroke-width: 4px; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
/* 3. Rótulos de provincia subordinados a la cifra (600 frente a 800). */
.hexmapa__prov { font-weight: 600; }
/* 4. Hover: trazo gris de 3 px, sin filtro de brillo (el brillo alteraba el color de la clase). Foco: anillo azul de 3 px (como el resto del sitio) separado del relleno por una banda blanca de 3 px,
   para que se vea también sobre la clase 4 (azul sobre azul). */
.hexmapa__c:hover polygon { stroke: var(--cb-gris); stroke-width: 3px; filter: none; }
.hexmapa__c:hover .hexmapa__foco { stroke: none; }
.hexmapa__c:focus-visible polygon { stroke: var(--blanco); stroke-width: 3px; }
.hexmapa__c:focus-visible .hexmapa__foco { stroke: var(--cb-azul); stroke-width: 3px; }
/* 5. Leyenda con muestras hexagonales (misma forma que el dato): filete --linea de 1 px con pseudoelemento, sin sombra ni borde. */
.leyenda--mapa .leyenda__muestra { width: 22px; height: 24px; border: 0; border-radius: 0; position: relative; background: var(--linea); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.leyenda--mapa .leyenda__muestra::after { content: ""; position: absolute; inset: 1px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--mapa-0); }
.leyenda--mapa [data-clase="1"]::after { background: var(--mapa-1); }
.leyenda--mapa [data-clase="2"]::after { background: var(--mapa-2); }
.leyenda--mapa [data-clase="3"]::after { background: var(--mapa-3); }
.leyenda--mapa [data-clase="4"]::after { background: var(--mapa-4); }
/* 6. Orden de lectura: mapa, leyenda, notas, fuente (la nota «Representación esquemática» ya no separa la leyenda del mapa). Retícula de una columna con áreas;
   las dos leyendas y las dos notas de escala comparten área porque solo una está visible ([hidden]). */
#g-mapa, .hex-previa { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tit" "capas" "mapa" "ley" "notaesc" "medida" "nota" "fuente" "btn"; }
#g-mapa > h2 { grid-area: tit; }
#g-mapa > .capas { grid-area: capas; }
.hex-caja { grid-area: mapa; }
.leyenda--mapa { grid-area: ley; margin-top: var(--e-4); }
[data-nota-escala] { grid-area: notaesc; }
#g-mapa > .medida { grid-area: medida; }
.hexmapa__nota { grid-area: nota; }
#g-mapa > .fuente, .hex-previa > .fuente { grid-area: fuente; }
.hex-previa > p:not(.fuente):not(.hexmapa__nota) { grid-area: btn; }
/* 7. Conmutador de escala a 390 px: los dos botones reparten el ancho y el texto no se recorta («Organizacione»). */
@media (max-width: 599px) {
  .capas .segmento { display: flex; width: 100%; }
  .capas .segmento button { flex: 1 1 0; min-width: 0; padding: var(--e-2) var(--e-3); justify-content: center; text-align: center; font-size: var(--t-s); line-height: 1.2; }
}
/* 8. Leyenda del mapa en una columna bajo 600 px (evita el reparto 2+1+1+1). */
@media (max-width: 599px) { .leyenda--mapa { flex-direction: column; gap: var(--e-2); } }