:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --page: #f9f9f7;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #6e6d66;     /* 4,9:1: las notas al pie también hay que poder leerlas */
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  /* Medidas compartidas: el mismo margen lateral, el mismo ancho de página y la
     misma medida de lectura en portada, páginas y fichas municipales. */
  --gutter: 20px;
  --ancho-pagina: 1100px;
  --ancho-lectura: 70ch;
  --s1: #2470cc;   /* prensa · 4,7:1 sobre el fondo claro (era #2a78d6, 4,2:1) */
  --s2: #eb6834;   /* chatmap serie */
  --s3: #1baf7a;   /* feeds abiertos */
  --s7: #4a3aa7;   /* ciudadano */
  --s8: #8a5a1d;   /* solo registro municipal (RUD) */
  --good: #0a850a;      /* coincide · 4,6:1 como texto sobre el fondo claro */
  --s9: #0f8f8f;   /* evaluado por UNOSAT (2.º satélite) */
  /* --good vivía aquí una segunda vez, con el verde vivo del tema oscuro: la
     redeclaración ganaba y devolvía el texto «coincide» a 3,3:1. Un solo verde
     por tema. */
  --warning: #fab219;   /* pendiente · ámbar de RELLENO, no de letra (1,8:1) */
  --warning-ink: #8a5a00;  /* el mismo aviso cuando hay que escribirlo · 5,8:1 */
  --s1-solid: #2470cc;  /* fondo de los botones llenos: el texto va en blanco y
                           el azul aclarado del tema oscuro no llegaría a AA */
  --critical: #d03b3b;
  /* Un solo margen de página: cabecera, secciones, tablas y pie se apoyan en el
     mismo eje, midan lo que midan. Antes la prosa se detenía en --ancho-pagina
     y las secciones seguían creciendo con la pantalla: dos bordes derechos
     distintos, cada vez más separados. Con max() las barras pintadas (la
     navegación y el pie) siguen llegando de borde a borde. */
  --margen: max(var(--gutter), (100% - var(--ancho-pagina)) / 2);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page: #0d0d0d;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --grid: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s7: #9085e9;
    --s8: #c99a52;
    --muted: #8f8d87;     /* sobre fondo oscuro hay que aclarar, no oscurecer */
    --good: #0ca30c;      /* el verde vivo recupera contraste en oscuro (5,8:1) */
    --warning-ink: #f0b429;  /* sobre fondo oscuro el aviso se aclara, no se apaga */
    --s9: #2fb3b3;
  }
}
* { box-sizing: border-box; }
/* Navegar con teclado tiene que verse: un solo anillo para todo el sitio. */
:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* --warning es un color de relleno (los puntos «daño posible» del mapa, el
   tinte de los avisos). Escrito, da 1,8:1 y no se lee. Donde el marcado lo usó
   como color de letra —la banda de hitos de la portada y el «+N» de UNOSAT en
   la tabla de municipios— se cambia por su versión legible; el relleno intacto. */
[style*="color:var(--warning)"] { color: var(--warning-ink) !important; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink);
}
header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 18px var(--margen) 6px;
}
h1 { font-size: 25px; line-height: 1.18; letter-spacing: -.015em; margin: 0 0 5px; }
h2 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 10px; }
.sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 0; max-width: var(--ancho-lectura); }
/* Bajo un h1 el subtítulo va pegado a propósito; bajo un h2 encabeza una
   sección y lo que sigue (tarjetas, filtros, gráfica) se le echaba encima. */
h2 + .sub { margin-bottom: 12px; }
/* Ni la franja de métricas ni una tabla traen margen propio: dejaban el bloque
   anterior sin aire. */
* + .metric-strip, * + .tabla-scroll { margin-top: 12px; }
.sub a { color: var(--s1); }
.meta { text-align: right; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.support-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--ink-2); font-size: 12px; line-height: 1.35;
}
.support-line a { color: var(--s1); text-decoration: none; font-weight: 600; }
.support-line a:hover { text-decoration: underline; }
.support-pill, .repo-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--ink) !important; font-size: 11.5px;
}
.repo-link svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }
.coffee-link { border-color: color-mix(in srgb, #bd5fff 35%, var(--border)); }
.support-line-header {
  width: 100%; justify-content: flex-end; padding-top: 2px;
}
.support-line-footer {
  justify-content: space-between; padding: 10px 0 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.btn {
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px;
  text-decoration: none; color: var(--ink); background: var(--surface-1); font-size: 12px;
}
.btn.primary {
  background: var(--s1-solid); color: #fff; border-color: transparent; font-weight: 600;
}
.intro { margin: 6px var(--margen) 12px; }
.intro p + p { margin-top: 8px; }
.intro p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: var(--ancho-lectura); }
html { scroll-behavior: smooth; }
section[id], main[id], footer[id] { scroll-margin-top: 66px; }
#indice {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px var(--margen) 0;
}
#indice a {
  padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--ink-2); text-decoration: none;
  font-size: 12px; white-space: nowrap;
}
#indice a:hover {
  color: var(--s1); border-color: color-mix(in srgb, var(--s1) 45%, transparent);
  background: color-mix(in srgb, var(--s1) 7%, var(--surface-1));
}
/* Desplegables. El mismo gesto («esto se abre») tenía tres aspectos: caja con
   borde en la entradilla, triángulo desnudo en las alertas y en la banda de
   silencio de municipios. Uno solo. */
#como-leer, .intro details, .aviso details, #alerts-section > details {
  margin-top: 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-1); font-size: 13px;
}
#como-leer summary, .intro details summary, .aviso details summary,
#alerts-section > details summary {
  padding: 9px 14px; cursor: pointer; color: var(--ink); user-select: none;
}
#como-leer summary:hover, .intro details summary:hover,
.aviso details summary:hover, #alerts-section > details summary:hover { background: color-mix(in srgb, var(--s1) 6%, transparent); border-radius: 8px; }
#como-leer[open] summary, .intro details[open] summary,
.aviso details[open] summary, #alerts-section > details[open] summary { border-bottom: 1px solid var(--grid); }
#como-leer ol, .intro details ol, .aviso details ol { margin: 10px 0; padding: 0 18px 4px 34px; line-height: 1.6; color: var(--ink-2); }
#como-leer li, .intro details li, .aviso details li { margin-bottom: 8px; }
#como-leer li strong, .intro details li strong, .aviso details li strong { color: var(--ink); }
#como-leer a, .intro details a, .aviso details a { color: var(--s1); }
main#mapa {
  display: flex; flex-direction: column;
  gap: 12px; padding: 0 var(--margen);
}
#map {
  min-height: 62vh; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-1);
}
#panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
  /* el desplazamiento horizontal es de la tabla (`.tabla-scroll`), no del panel:
     antes el título, las notas y la leyenda se iban de lado con ella */
}
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--grid); }
th { color: var(--muted); font-weight: 600; font-size: 11.5px; }
/* La cabecera compartía filete con las filas y se leía como una fila más. */
thead th { border-bottom-color: var(--baseline); }
th[title], th[data-tip] { cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--muted) 60%, transparent); text-underline-offset: 3px; }
.th-tip {
  position: fixed; z-index: 1200; line-height: 1.5; font-weight: 400;
  text-align: left; white-space: normal;
}
/* Cabecera ordenable. Va DESPUÉS de th[title] a propósito: las cabeceras
   llevan explicación (cursor help) y además se pueden pulsar — gana el
   puntero, que es la acción, y el subrayado punteado sigue avisando de que
   hay texto explicativo debajo. */
th.ord { cursor: pointer; user-select: none; white-space: nowrap; }
th.ord:hover, th.ord:focus-visible { color: var(--ink-2); }
th.ord::after { content: "↕"; opacity: .35; margin-left: 4px; font-size: 10px; }
th.ord[aria-sort="ascending"]::after { content: "▲"; opacity: 1; }
th.ord[aria-sort="descending"]::after { content: "▼"; opacity: 1; }
th.ord[aria-sort="ascending"], th.ord[aria-sort="descending"] { color: var(--s1); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* La mano solo donde la fila lleva de verdad a algún sitio: la tabla del cruce
   de la portada. En las demás (municipios, RUD, balances, fichas) el enlace
   está dentro de la celda y el cursor prometía un clic que no existe. El
   resaltado al pasar sí se queda en todas: en una tabla ancha ayuda a no
   perder el renglón. */
#tabla tbody tr { cursor: pointer; }
tbody tr:hover { background: color-mix(in srgb, var(--s1) 7%, transparent); }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--bc, var(--muted)) 18%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--bc, var(--muted)) 45%, transparent);
  white-space: nowrap;
}
.badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--bc, var(--muted));
}
/* Dentro de un aviso el distintivo no rotula una celda: es una frase entera.
   Con `nowrap` heredado, la ficha municipal hacía que el móvil se desplazara en
   horizontal. En tablas y leyendas siguen sin partirse, que ahí son etiquetas
   cortas y su contenedor ya se desplaza solo. */
.aviso .badge, .destacado .badge { white-space: normal; }
.badge.critical { --bc: var(--critical); }
.note { font-size: 12px; color: var(--muted); line-height: 1.5; max-width: var(--ancho-lectura); }
#leyenda, .leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.prensa-toggle { color: var(--s1); text-decoration: none; white-space: nowrap; }
.prensa-detalle td { background: color-mix(in srgb, var(--s1) 5%, transparent); font-size: 12px; }
.prensa-detalle ul { margin: 4px 0 2px; padding-left: 18px; }
.prensa-detalle a { color: var(--s1); }
#timeline { margin: 0; padding-left: 2px; list-style: none; font-size: 13px; line-height: 1.7; }
#timeline li { padding-left: 16px; border-left: 2px solid var(--grid); margin-left: 6px; }
#timeline li.entrega { border-left-color: var(--critical); }
#timeline li.evento { border-left-color: var(--critical); }
#timeline li.local { border-left-color: var(--good); }
#timeline li.monitor { border-left-color: var(--warning); }
#timeline .t-fecha { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
#timeline .t-tipo {
  font-size: 10.5px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 7px; margin-right: 6px; white-space: nowrap;
}
#timeline a { color: var(--s1); text-decoration: none; }
/* chips de filtro reutilizables (cronología, y donde hagan falta) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; align-items: center; }
* + .chips { margin-top: 12px; }
/* La misma pastilla hace dos oficios: dentro de `.chips` es un botón de filtro
   y en la lista de titulares, una etiqueta de zona. `inline-block` porque el
   marcado las pega sin espacio entre ellas y en `inline` la línea no tenía por
   dónde partirse: en móvil una tira de municipios sacaba la página de cuadro. */
.chip {
  display: inline-block; margin: 2px 4px 2px 0;
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
  font-size: 12px; line-height: 1.35; background: var(--surface-1); color: var(--ink-2);
  font-family: inherit;
}
/* El filtro se pulsa; la etiqueta, no. El cursor y el resalte son del botón. */
.chips .chip { margin: 0; padding: 5px 12px; }
button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--s1); }
.chip.activa {
  border-color: var(--s1); color: var(--ink);
  background: color-mix(in srgb, var(--s1) 12%, transparent);
}
#colombia-acts p { margin: 6px 0; font-size: 13px; }
#colombia-acts a { color: var(--s1); text-decoration: none; }
.page-section,
#metodologia, #timeline-section, #colombia-acts-section, #municipios-section,
#chart-section, #balances-section, #alerts-section,
#balance-hero, #balance-chart-section, #balance-table-section {
  margin: 16px var(--margen); background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
}
/* La prosa de una sección no se estira más allá de lo que el ojo sigue cómodo,
   aunque la tabla de al lado sí lo haga: el ancho de la tabla es información. */
.page-section > p, .page-section > ul, .page-section > ol,
#alerts-section > ul { max-width: var(--ancho-lectura); }
#chart svg { display: block; }
#balance-chart svg { display: block; }
#chart .tooltip, #map .leaflet-popup-content { font-size: 12px; }
.tooltip {
  position: fixed; pointer-events: none; z-index: 999;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 9px; font-size: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.12);
  color: var(--ink);
}
#alerts { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
#metodologia-box summary { cursor: pointer; color: var(--ink); font-size: 14px; padding: 2px 0; }
#metodologia-box summary:hover { color: var(--s1); }
#metodologia-box h3 { font-size: 15px; margin: 20px 0 8px; }
#metodologia-box p, #metodologia-box ol { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); max-width: var(--ancho-lectura); }
#metodologia-box ol { padding-left: 22px; }
#metodologia-box li { margin-bottom: 6px; }
#metodologia-box a { color: var(--s1); text-decoration: none; }
#metodologia-box a:hover { text-decoration: underline; }
#metodologia-box dl {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 6px 14px; margin: 0; font-size: 12.5px; line-height: 1.5;
}
#metodologia-box dt { font-weight: 600; color: var(--ink); }
#metodologia-box dd { margin: 0; color: var(--ink-2); }
@media (max-width: 700px) {
  #metodologia-box dl { grid-template-columns: 1fr; gap: 2px; }
  #metodologia-box dd { margin-bottom: 8px; }
}
footer { padding: 10px var(--gutter) 24px; font-size: 12px; color: var(--muted); line-height: 1.5; max-width: var(--ancho-pagina); }
footer a { color: var(--s1); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.note a { color: var(--s1); }
.metric-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 8px; align-items: stretch;
}
.metric-card {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px;
  background: color-mix(in srgb, var(--surface-1) 88%, var(--page));
}
.metric-card span {
  display: block; color: var(--muted); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .045em; margin-bottom: 3px;
}
.metric-card strong {
  display: block; font-size: 21px; line-height: 1.15; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.metric-card small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
a.metric-card { text-decoration: none; color: inherit; display: block; }
a.metric-card:hover { border-color: var(--s1); }
.metric-strip .full { grid-column: 1 / -1; margin: 2px 0 0; }
/* filtros reutilizables: buscador + selects sobre una tabla */
.filtros {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; align-items: center;
}
.filtros input, .filtros select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-1); color: var(--ink); font-size: 13px;
  font-family: inherit; line-height: 1.35; min-height: 34px;  /* el select medía distinto */
}
/* El buscador es el filtro principal: se queda con el hueco que sobra en vez
   de un ancho fijo que no cuadraba con el de ningún desplegable. */
.filtros input { flex: 1 1 260px; min-width: 200px; max-width: 420px; }
#balance-table a, #balances-resumen a, #balance-cards a { color: var(--s1); text-decoration: none; }
#balance-table a:hover, #balances-resumen a:hover, #balance-cards a:hover { text-decoration: underline; }
.leaflet-container { background: var(--page); font: inherit; }
.leaflet-popup-content img { max-width: 220px; border-radius: 6px; display: block; margin-top: 6px; }
@media (max-width: 900px) {
  #map { min-height: 46vh; }
  header { flex-direction: column; }
  .meta, .support-line-header { justify-content: flex-start; text-align: left; }
}

/* ---- barra de navegación y pie de sitio compartidos (common.js) ---- */
#site-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 10px var(--margen);
  background: var(--surface-1); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1100;
}
#site-nav .brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1.25; }
#site-nav .brand span { font-size: 11px; color: var(--muted); }
#site-nav .nav-links { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#site-nav .nav-links a {
  padding: 5px 11px; border-radius: 999px; text-decoration: none;
  color: var(--ink-2); font-size: 13px; border: 1px solid transparent;
}
#site-nav .nav-links a:hover { color: var(--s1); background: color-mix(in srgb, var(--s1) 8%, transparent); }
#site-nav .nav-links a.activa { color: var(--ink); background: color-mix(in srgb, var(--s1) 14%, var(--surface-1)); border-color: color-mix(in srgb, var(--s1) 40%, transparent); font-weight: 600; }
#site-nav .nav-cta { color: #fff !important; background: var(--s1-solid) !important; font-weight: 600; }
#site-footer {
  margin-top: 20px; padding: 18px var(--margen) 26px; border-top: 1px solid var(--border);
  background: var(--surface-1); font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
}
#site-footer .sf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; max-width: var(--ancho-pagina); }
#site-footer a { color: var(--s1); text-decoration: none; }
#site-footer a:hover { text-decoration: underline; }
#site-footer .sf-line { margin: 14px 0 0; color: var(--muted); max-width: var(--ancho-pagina); }
.leyenda-sep { color: var(--muted); font-size: 12px; margin-left: 6px; align-self: center; }
/* Paginador. Estaba atado al id `#paginado`, así que la tabla de municipios
   —que usa `#mun-paginado`— salía con los botones grises del navegador. Es un
   componente: se nombra por clase y los ids quedan de red de seguridad. */
.paginado, #paginado, #mun-paginado {
  display: flex; gap: 6px; align-items: center; justify-content: center;
  margin: 16px 0 0; flex-wrap: wrap;
}
.paginado button, #paginado button, #mun-paginado button {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-1); color: var(--ink-2); font-size: 13px;
  font-family: inherit; line-height: 1.35; cursor: pointer;
}
.paginado button:hover:not(:disabled),
#paginado button:hover:not(:disabled),
#mun-paginado button:hover:not(:disabled) { color: var(--s1); border-color: var(--s1); }
.paginado button.actual, #paginado button.actual, #mun-paginado button.actual {
  background: var(--s1-solid); color: #fff; border-color: transparent; font-weight: 600;
}
.paginado button:disabled, #paginado button:disabled,
#mun-paginado button:disabled { opacity: .45; cursor: default; }

/* Botones de la barra (compartir, alertas). Estaban estilados uno a uno por
   id: el de alertas se quedó fuera y salía como un rectángulo gris del
   navegador entre pastillas. Se nombran por lo que son, no por cuál son. */
#site-nav .nav-links button {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--ink-2); font-size: 13px;
  font-family: inherit; line-height: 1.35; cursor: pointer;
}
#site-nav .nav-links button:hover { color: var(--s1); border-color: var(--s1); }
#menu-compartir {
  position: fixed; z-index: 1300; display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.16); padding: 6px; min-width: 170px;
}
#menu-compartir a {
  padding: 7px 12px; border-radius: 6px; text-decoration: none;
  color: var(--ink); font-size: 13px;
}
#menu-compartir a:hover { background: color-mix(in srgb, var(--s1) 10%, transparent); color: var(--s1); }

/* lista de titulares (noticias.html) — vivía en un <style> propio de la página,
   con copias de .filtros y de .badge que se desincronizaban solas */
#lista { list-style: none; margin: 0; padding: 0; }
#lista li {
  padding: 9px 0; border-bottom: 1px solid var(--grid);
  font-size: 13.5px; line-height: 1.55;
}
#lista li:last-child { border-bottom: 0; }
/* Fecha y medio en su renglón: las etiquetas de zona venían pegadas al final
   de la línea de firma y partían el «vía Google News» por la mitad. */
#lista .meta-n { display: block; color: var(--muted); font-size: 12px; }
/* El titular es la unidad: la firma arriba, las etiquetas de zona en medio y
   el titular abajo, cada cosa en su renglón. El <br> del marcado sobraba y
   dejaba una línea en blanco en los titulares sin etiquetas. */
#lista li br { display: none; }
#lista li > a { display: block; margin-top: 3px; }
#lista a { color: var(--s1); text-decoration: none; }
#lista a:hover { text-decoration: underline; }
#lista .badge { margin-left: 6px; font-weight: 500; }
/* Línea de resumen sobre una tabla filtrada («23 de 23 snapshots · …»). En
   balances se quedó sin estilo —16 px en negro, con más peso que el subtítulo
   de la sección— mientras en titulares era letra pequeña y apagada. */
.resumen, #resumen, #balance-resumen { color: var(--ink-2); font-size: 13px; margin: 4px 0 12px; }

/* ————— componentes compartidos por portada, páginas y fichas municipales —————
   Nacen con las fichas de municipio pero NO son suyos: se usan en todo el sitio
   para que una misma idea se vea igual en cualquier página. Si añades uno nuevo,
   aplícalo también donde ya existía ese patrón a mano. */

/* Columna de lectura. Las fichas municipales son un documento, no un tablero:
   sin tope de ancho, en una pantalla grande la línea se estira hasta que el ojo
   pierde el renglón. Las páginas con mapa o tabla ancha no la usan — ahí el
   ancho ES información. */
.contenido { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
/* El margen lateral lo pone la columna: los bloques que lo traen puesto de
   serie (para vivir a ancho de página) lo sueltan al entrar aquí. */
.contenido header { padding-inline: 0; }
.contenido .page-section, .contenido .nota-pie, .contenido .migas { margin-inline: 0; }
/* La medida de lectura la pone la propia columna. Repetirla dentro dejaba
   cajas con borde de 720 px cuyo texto acababa en 617: un canal vacío a la
   derecha de cada aviso, cada nota y cada destacado de las 96 fichas. */
.contenido .destacado, .contenido .note, .contenido .sub,
.contenido .aviso p, .contenido .aviso ul,
.contenido .page-section > p, .contenido .page-section > ul,
.contenido .page-section > ol { max-width: none; }

/* Respuesta corta: la cifra del día en prosa, arriba de la página. Es lo que
   citan los buscadores y los sistemas de IA, así que va siempre en el HTML.
   Panel completo y no una franja de color al margen: el énfasis lo pone el
   texto, el recuadro solo lo separa de lo que viene después. */
.destacado {
  background: color-mix(in srgb, var(--s8) 7%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--s8) 28%, var(--border));
  border-radius: 10px; padding: 16px 18px; margin: 0 0 4px;
  font-size: 15.5px; line-height: 1.62; max-width: var(--ancho-lectura);
}
.destacado strong { font-weight: 650; }

/* Avisos: mismo cuerpo, distinto color según para qué sirven. El color entra
   por --ac, igual que .badge lo recibe por --bc — un solo mecanismo de tinte
   en toda la hoja. */
.aviso {
  --ac: var(--muted);
  background: color-mix(in srgb, var(--ac) 8%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--ac) 32%, var(--border));
  border-radius: 10px; padding: 14px 16px; margin: 14px 0;
  font-size: 14px; line-height: 1.55;
}
.aviso--accion { --ac: var(--s7); }       /* pide algo a quien lee */
.aviso--laguna { --ac: var(--warning); }  /* lo que NO sabemos */
.aviso p { margin: .7em 0; max-width: var(--ancho-lectura); }
.aviso ul { margin: .4em 0 0; padding-left: 1.15em; max-width: var(--ancho-lectura); }
.aviso li { margin: .45em 0; }
.aviso > :first-child { margin-top: 0; }
.aviso > :last-child { margin-bottom: 0; }
/* Sobre el tinte del panel el azul de enlace se quedaba en 4,2:1. Se escribe
   un punto más adentro —hacia la tinta en claro, hacia el papel en oscuro— y
   el aviso conserva su color sin que el enlace pierda legibilidad. */
.aviso a { color: color-mix(in srgb, var(--s1) 80%, var(--ink)); }
/* las bandas de hallazgo (portada y municipios) son avisos a ancho de página */
#banner-brechas, #banner-silencio { margin: 10px var(--margen); }

/* Migas de pan: orientan a quien llega desde un buscador y le dan al buscador
   la jerarquía del sitio. Lista ordenada porque es una ruta, no una frase. */
.migas { font-size: 12.5px; color: var(--muted); margin: 12px 0 2px; padding: 0; }
.migas ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 7px; margin: 0; padding: 0;
}
.migas li::after { content: "›"; margin-left: 7px; color: var(--baseline); }
.migas li:last-child::after { content: none; }
.migas a { color: var(--ink-2); text-decoration: none; }
.migas a:hover { color: var(--s1); text-decoration: underline; }

/* Tablas anchas: se desplazan dentro de su caja y nunca hacen que la página
   entera se mueva en horizontal. El mínimo evita que en móvil las columnas se
   aplasten hasta romper las palabras: mejor arrastrar que adivinar. */
.tabla-scroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  /* Sombra en el borde por el que aún queda tabla, y solo mientras queda: en
     móvil nada indicaba que la tabla seguía a la derecha y el lector se creía
     que las columnas de datos no existían. Sin JS: las capas `local` viajan con
     el contenido y tapan a las `scroll`, que están fijas al marco. */
  background:
    linear-gradient(to right, var(--surface-1), transparent) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left, var(--surface-1), transparent) 100% 0 / 28px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--ink) 16%, transparent), transparent) 0 0 / 14px 100% no-repeat,
    linear-gradient(to left, color-mix(in srgb, var(--ink) 16%, transparent), transparent) 100% 0 / 14px 100% no-repeat;
}
.tabla-scroll table { min-width: 30rem; }

/* Nota suelta al pie del contenido, alineada con el resto de la página. */
.nota-pie { margin: 10px var(--margen) 22px; }

/* Mapas estáticos en SVG: se generan en el build, se indexan y no necesitan JS.
   Los interactivos (Leaflet) siguen siendo solo de la portada. */
.mapa-estatico {
  width: 100%; height: auto; display: block; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 8px;
}
.mapa-estatico .m-name { font: 700 16px system-ui, sans-serif; fill: var(--ink); }
.mapa-estatico .m-lbl  { font: 600 13px system-ui, sans-serif; fill: var(--ink); }
.mapa-estatico .m-sub  { font: 11.5px system-ui, sans-serif; fill: var(--ink-2); }
/* Halo del color del fondo: el rótulo sobrevive encima del polígono, de la
   retícula y de los puntos, sin necesidad de buscarle un hueco vacío. */
.mapa-estatico text {
  paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px;
  stroke-linejoin: round;
}
/* El texto vive dentro del viewBox: al encoger el mapa encoge con él. Por eso
   aquí la letra CRECE en pantallas estrechas — al revés de lo habitual, pero es
   lo que mantiene los rótulos legibles cuando el mapa mide 330 px de ancho. */
@media (max-width: 760px) {
  .mapa-estatico .m-name { font-size: 23px; }
  .mapa-estatico .m-lbl  { font-size: 19px; }
  .mapa-estatico .m-sub  { font-size: 17px; }
  .mapa-estatico text { stroke-width: 4px; }
}
@media (max-width: 480px) {
  .mapa-estatico .m-name { font-size: 32px; }
  .mapa-estatico .m-lbl  { font-size: 26px; }
  .mapa-estatico .m-sub  { font-size: 23px; }
  .mapa-estatico text { stroke-width: 5px; }
}

/* En móvil el margen lateral de 20 px se come una décima parte del ancho útil:
   un solo token y toda la página se estrecha a la vez. */
@media (max-width: 560px) {
  :root { --gutter: 13px; }
  h1 { font-size: 22px; }
  .destacado { font-size: 15px; padding: 14px 15px; }
  /* dos por dos se lee como una rejilla; tres y uno suelto, como un error */
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card strong { font-size: 19px; }
  /* La barra ocupaba tres filas: 152 px pegados arriba, el 19 % de la pantalla
     de un móvil, y este monitor se lee sobre todo en móvil. En una sola fila
     deslizable baja a la mitad y no desaparece ningún destino. */
  #site-nav { padding: 8px var(--margen); gap: 6px; }
  #site-nav .nav-links {
    flex: 1 0 100%; gap: 4px; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    /* la fila sangra hasta el borde: así se ve que hay más a la derecha */
    margin-inline-end: calc(-1 * var(--margen)); padding-inline-end: var(--margen);
  }
  #site-nav .nav-links::-webkit-scrollbar { display: none; }
  #site-nav .nav-links > * { flex: 0 0 auto; }
  #site-nav .nav-links a { padding: 5px 9px; font-size: 12.5px; }
  /* la barra pegada mide dos renglones aquí: el ancla no puede quedar debajo */
  section[id], main[id], footer[id] { scroll-margin-top: 96px; }
  /* La cabecera de página: la fecha en su renglón y las descargas juntas en el
     siguiente, en vez de un botón huérfano colgando de la fecha. */
  .meta > #generado { flex: 1 0 100%; }
  /* Apilados y cada uno con el ancho de su opción más larga (311, 308, 196,
     176, 319 px en titulares), los filtros parecían un error de maqueta. En
     columna comparten el ancho de la caja. */
  .filtros { flex-direction: column; align-items: stretch; }
  /* en columna el eje principal es vertical: el `flex-basis` del buscador
     pasaría a ser su ALTURA */
  .filtros input, .filtros select { flex: 0 0 auto; width: 100%; max-width: none; }
}

/* Un mapa estático que lleva al interactivo. La ficha no carga Leaflet ni los
   geojson —son megabytes que la mayoría de lectores no necesita—, así que la
   imagen es el enlace y el mapa completo se pide expresamente. */
.mapa-enlace { display: block; border-radius: 8px; }
.mapa-enlace:hover .mapa-estatico,
.mapa-enlace:focus-visible .mapa-estatico { border-color: var(--s1); }
.mapa-enlace:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
/* «vía Google News»: el enlace no lleva al medio sino al agregador, y eso se
   dice en la propia línea de firma en vez de dejar que el lector lo descubra
   al hacer clic. */
.via { color: var(--muted); font-style: italic; }