:root {
  --papel: #f6f1e8;
  --papel-2: #efe7da;
  --tinta: #1d1a17;
  --tinta-suave: #5f574d;
  --cobre: #9c4a22;
  --linea: #e3dacb;
  --comuna: #d0c4ae;
  --sin-dato: #e4ddd2;
  --globo-fondo: #1d1a17;
  --globo-texto: #f6f1e8;
  /* escala secuencial para el mapa (de menor a mayor) */
  --c1: #f1e2cf;
  --c2: #e2b98f;
  --c3: #cc8b57;
  --c4: #a85e2c;
  --c5: #6f3313;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ancho: 1160px;
  /* categorías del tablero (zonas, tamaños, ruralidad) */
  --g1: #b5562a; --g2: #c99a2e; --g3: #4f8a5b; --g4: #3f6e9e; --g5: #7d5aa6; --g6: #8a8178;
  /* escala divergente (bajó ↔ subió) para el mapa de cambios electorales */
  --s1: #2f6f73; --s2: #8fbab7; --s3: #e9e2d6; --s4: #dba680; --s5: #9c4a22;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #171513;
    --papel-2: #201d1a;
    --tinta: #f1ebe2;
    --tinta-suave: #b2a897;
    --cobre: #e0895a;
    --linea: #312b26;
    --comuna: #4a423a;
    --sin-dato: #2a2622;
    --globo-fondo: #f1ebe2;
    --globo-texto: #171513;
    --c1: #3a2b21;
    --c2: #6b4228;
    --c3: #9c5c31;
    --c4: #cf7f46;
    --c5: #f3b17e;
    --g1: #e0895a; --g2: #e2c25e; --g3: #7fbf8c; --g4: #7fa8d6; --g5: #b49ad6; --g6: #b2a897;
    --s1: #6cc0bd; --s2: #356b69; --s3: #3a342e; --s4: #8a5a35; --s5: #f0a070;
  }
}

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
a:hover { color: var(--cobre); }
:focus-visible { outline: 2px solid var(--cobre); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0 0 1rem; }
h3 { font-size: 1.05rem; margin: 0 0 .5rem; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.nota { color: var(--tinta-suave); font-size: .8125rem; line-height: 1.5; }

/* ---------- Barra superior ---------- */

.barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--linea);
}
.marca { font: 600 1.15rem/1 var(--serif); text-decoration: none; }
.sello {
  padding: .2rem .55rem;
  border: 1px solid var(--cobre);
  border-radius: 999px;
  color: var(--cobre);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.menu { display: flex; align-items: center; gap: 1.1rem; font-size: .9375rem; }
.menu a { text-decoration: none; color: var(--tinta-suave); }
.menu a:hover { color: var(--cobre); }

/* ---------- Portada ---------- */

.portada { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: 2rem; }
.portada h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0 0 1rem; }
.bajada { max-width: 34rem; margin: 0 0 2rem; color: var(--tinta-suave); font-size: clamp(1.1rem, 2vw, 1.25rem); }

.buscador { max-width: 34rem; }
.buscador label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .9375rem; }
.buscador-fila { display: flex; gap: .5rem; }
.buscador input, select {
  flex: 1;
  min-width: 0;
  padding: .7rem .85rem;
  border: 1px solid var(--linea);
  border-radius: .55rem;
  background: var(--papel-2);
  color: var(--tinta);
  font: inherit;
}
.buscador button, .boton {
  display: inline-block;
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: .55rem;
  background: var(--tinta);
  color: var(--papel);
  font: 600 .9375rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.buscador button:hover, .boton:hover { background: var(--cobre); color: var(--papel); }
.mensaje { min-height: 1.4em; margin: .4rem 0 0; color: var(--cobre); font-size: .875rem; }

/* ---------- Explorador (mapa de la portada) ---------- */

.explorador {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--linea);
}
.mapa-chile { --alto: min(calc(100svh - 6rem), 900px); width: calc(var(--alto) * 240 / 1423); margin: 0; }
.mapa-chile .lienzo { height: var(--alto); }
.lienzo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.comunas path {
  fill: var(--comuna);
  stroke: var(--papel);
  stroke-width: .6px;
  vector-effect: non-scaling-stroke;
  transition: fill .15s ease;
}
.mapa-chile .comunas path, .mapa-ubicacion .comunas path { cursor: pointer; }
.comunas path.c1 { fill: var(--c1); }
.comunas path.c2 { fill: var(--c2); }
.comunas path.c3 { fill: var(--c3); }
.comunas path.c4 { fill: var(--c4); }
.comunas path.c5 { fill: var(--c5); }
.comunas path.sd { fill: var(--sin-dato); }
.comunas path.activa { stroke: var(--tinta); stroke-width: 1.6px; }
.ayuda { margin-top: .6rem; color: var(--tinta-suave); font-size: .75rem; line-height: 1.4; }

.explorador-panel { align-self: start; position: sticky; top: 1.5rem; }
.etiqueta { display: block; margin-bottom: .35rem; font-size: .8125rem; font-weight: 600; color: var(--tinta-suave); }
.explorador-panel select { width: 100%; max-width: 28rem; }
.descripcion { min-height: 3em; margin: .6rem 0 1rem; color: var(--tinta-suave); font-size: .9375rem; }

.leyenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: 1.5rem; font-size: .8125rem; }
.leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.leyenda i { display: inline-block; width: .9rem; height: .9rem; border-radius: .2rem; }
.leyenda i.c1 { background: var(--c1); } .leyenda i.c2 { background: var(--c2); } .leyenda i.c3 { background: var(--c3); }
.leyenda i.c4 { background: var(--c4); } .leyenda i.c5 { background: var(--c5); } .leyenda i.sd { background: var(--sin-dato); }

.extremos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 1rem; }
.extremos ol { margin: 0; padding-left: 1.3rem; font-size: .9rem; }
.extremos li { margin-bottom: .2rem; }
.extremos li span { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.globo {
  position: fixed;
  z-index: 10;
  max-width: 17rem;
  padding: .45rem .65rem;
  border-radius: .5rem;
  background: var(--globo-fondo);
  color: var(--globo-texto);
  font-size: .8125rem;
  line-height: 1.3;
  pointer-events: none;
  box-shadow: 0 6px 20px rgb(0 0 0 / .18);
}
.globo strong { display: block; }
.globo span { opacity: .8; }

/* ---------- Índice de comunas ---------- */

.indice { padding-top: 2.5rem; padding-bottom: 2.5rem; border-top: 1px solid var(--linea); }
.regiones { columns: 3 16rem; column-gap: 2.5rem; }
.region { break-inside: avoid; margin-bottom: 1.75rem; }
.region ul { margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.region li { padding: .1rem 0; }
.region a { text-decoration: none; }
.region a:hover { text-decoration: underline; }

.datos { padding-top: 2.5rem; padding-bottom: 3rem; border-top: 1px solid var(--linea); }
.datos p { max-width: 40rem; }

/* ---------- Ficha comunal ---------- */

.ficha { padding-top: 1.5rem; padding-bottom: 3rem; }
.migas { color: var(--tinta-suave); font-size: .875rem; }
.ficha-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: 2rem;
  align-items: start;
  margin: 1.5rem 0 2rem;
}
.antetitulo { margin: 0 0 .4rem; color: var(--cobre); font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ficha h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); margin: 0 0 1rem; }
.ubicacion { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0; }
.ubicacion dt { color: var(--tinta-suave); font-size: .78rem; }
.ubicacion dd { margin: 0; font-weight: 600; }
.aviso { margin-top: 1rem; padding: .75rem 1rem; border-left: 3px solid var(--cobre); background: var(--papel-2); font-size: .9375rem; }

.mapa-ubicacion { margin: 0; }
.mapa-ubicacion .lienzo { max-height: 22rem; }
.mapa-ubicacion svg { max-height: 22rem; overflow: hidden; }
.mapa-ubicacion .comunas path.esta { fill: var(--cobre); }
.mapa-ubicacion .comunas path:hover { fill: var(--c2); }
.mapa-ubicacion .comunas path.esta:hover { fill: var(--cobre); }

.cifras-clave {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--linea);
  border-radius: .75rem;
  background: var(--linea);
  overflow: hidden;
}
.cifra { padding: 1rem 1.15rem; background: var(--papel); }
.cifra p { margin: 0; }
.cifra-nombre { color: var(--tinta-suave); font-size: .8125rem; }
.cifra-valor { margin: .25rem 0 !important; font: 600 clamp(1.5rem, 3vw, 2rem)/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.cifra-valor .unidad { font: 400 .9rem var(--sans); color: var(--tinta-suave); }
.cifra-comparacion { color: var(--tinta-suave); font-size: .8125rem; }

.leyenda-pista { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-bottom: 2rem; color: var(--tinta-suave); font-size: .8125rem; }
.leyenda-pista span { display: inline-flex; align-items: center; gap: .35rem; }
.leyenda-pista svg { width: .8rem; height: .8rem; }
.leyenda-pista .texto { flex-basis: 100%; }

.marca-comuna { fill: var(--cobre); stroke: var(--papel); stroke-width: 1.5; }
.marca-region { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.5; }
.marca-pais { fill: var(--tinta-suave); }
.marca-parecidas { fill: var(--papel); stroke: var(--cobre); stroke-width: 1.5; }

.resumen { max-width: 46rem; margin: 0 0 2rem; }
.resumen p:first-child { margin: 0 0 .5rem; font: 400 clamp(1.05rem, 1.8vw, 1.2rem)/1.6 var(--serif); }
.resumen a { color: inherit; text-decoration-color: var(--cobre); text-underline-offset: .15em; }
.resumen a:hover { color: var(--cobre); }

.parecidas { margin: 0 0 2rem; }
.parecidas h2 { margin-bottom: .35rem; }
.parecidas .nota { max-width: 46rem; margin: 0 0 .9rem; }
.lista-parecidas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.lista-parecidas li { padding: .35rem .7rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .875rem; }
.lista-parecidas a { font-weight: 600; text-decoration: none; }
.lista-parecidas span { color: var(--tinta-suave); font-size: .78rem; }
.indicadores tr:target { background: var(--papel-2); }
.riel { stroke: var(--linea); stroke-width: 3; stroke-linecap: round; }

.tema { margin-bottom: 2.5rem; }
.indicadores { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.indicadores th, .indicadores td { padding: .7rem .6rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
.indicadores thead th { color: var(--tinta-suave); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom-width: 2px; }
.indicadores tbody th { font-weight: 400; width: 30%; }
.ind-nombre { display: inline; font-weight: 600; color: inherit; text-decoration: none; }
a.ind-nombre:hover { color: var(--cobre); text-decoration: underline; }
.ancla { margin-left: .4rem; color: var(--tinta-suave); text-decoration: none; opacity: 0; }
.indicadores tr:hover .ancla, .ancla:focus-visible { opacity: 1; }
@media (hover: none) { .ancla { opacity: .55; } }
.ind-desc { display: block; color: var(--tinta-suave); font-size: .8125rem; line-height: 1.4; }
.ind-fuente { display: block; margin-top: .2rem; color: var(--tinta-suave); font-size: .7rem; letter-spacing: .02em; opacity: .8; }
.evolucion { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
.evolucion svg { width: 5.5rem; height: auto; overflow: visible; }
.evolucion polyline { fill: none; stroke: var(--cobre); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.evolucion circle { fill: var(--cobre); }
.evolucion span { color: var(--tinta-suave); font: 400 .68rem/1 var(--sans); }
.valor { font: 600 1.15rem/1.2 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nota-valor { display: block; max-width: 16rem; color: var(--tinta-suave); font: 400 .75rem/1.4 var(--sans); white-space: normal; }
.col-pista { width: 24%; min-width: 10rem; }
.nota-valor.dudoso { color: var(--cobre); }
.nota-valor.dudoso::before { content: "⚠ "; }
.pista { display: block; width: 100%; height: auto; }
.extremos-pista { display: flex; justify-content: space-between; color: var(--tinta-suave); font-size: .7rem; font-variant-numeric: tabular-nums; }
.parte { color: var(--tinta-suave); font-size: .875rem; }
.ref { color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }

.elecciones-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2rem; }
.elecciones h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.alcaldes .periodo { display: block; color: var(--cobre); font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.concejo { margin: 0; padding: 0; list-style: none; }
.concejo li { padding: .4rem 0; border-bottom: 1px solid var(--linea); }
.concejal { display: block; font-weight: 600; font-size: .9rem; }
.concejo .partido { display: block; color: var(--tinta-suave); font-size: .78rem; line-height: 1.35; }
.electos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; }
.electos .pct { grid-column: 2; grid-row: 1; font: 600 .95rem var(--serif); font-variant-numeric: tabular-nums; }
.electos .partido { grid-column: 1 / -1; }
.pacto-primaria { margin: 1rem 0 .25rem; color: var(--cobre); font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.pacto-primaria:first-of-type { margin-top: 0; }
.marca-nominado { color: var(--cobre); font-weight: 600; }
.alerta { color: var(--cobre); font-weight: 600; }
.acciones-ficha { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }
.acciones-ficha .boton { padding: .45rem .85rem; font-size: .8125rem; }
.votacion { margin: 0; padding: 0; list-style: none; }
.votacion li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .75rem; padding: .45rem 0; border-bottom: 1px solid var(--linea); }
.votacion .candidato { font-weight: 600; font-size: .9rem; }
.votacion .otros .candidato { font-weight: 400; color: var(--tinta-suave); }
.votacion .barra { grid-column: 1; }
.votacion .barra svg { display: block; width: 100%; height: .4rem; }
.votacion .fondo { fill: var(--linea); }
.votacion .comuna { fill: var(--cobre); }
.votacion .pct { grid-column: 2; grid-row: 1; font: 600 1rem var(--serif); text-align: right; }
.votacion .pct-pais { grid-column: 2; grid-row: 2; color: var(--tinta-suave); font-size: .75rem; text-align: right; }
.metodo { margin-top: 1rem; padding-top: 2rem; border-top: 1px solid var(--linea); }
.metodo p { max-width: 44rem; }
.fuentes { max-width: 44rem; padding-left: 1.2rem; }
.fuentes li { margin-bottom: .35rem; }
.metodo details { margin: 1rem 0 1.5rem; }
.metodo summary { cursor: pointer; font-weight: 600; }
.calculos { margin: 1rem 0 0; display: grid; gap: .6rem; font-size: .9rem; }
.calculos dt { font-weight: 600; }
.calculos dd { margin: 0; color: var(--tinta-suave); }

.vecinas { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--linea); }
.vecinas ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.vecinas a { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .875rem; text-decoration: none; }
.vecinas a:hover { border-color: var(--cobre); }

.pie-sitio { padding: 2rem 0 3rem; border-top: 1px solid var(--linea); font-size: .9375rem; }
.pie-sitio p { margin: 0 0 .4rem; }

/* ---------- Pantallas medianas y celulares ---------- */

/* ---------- Página de indicador ---------- */

.enlace-flecha { font-weight: 600; }
.indicador, .indicadores-indice { padding-top: 1.5rem; padding-bottom: 3rem; }
.indicador h1, .indicadores-indice h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 1rem; }
.indicador-cabecera { max-width: 50rem; margin: 1.5rem 0; }
.indicador-cabecera .bajada { margin-bottom: .75rem; }
.indicador-explorar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  margin-bottom: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}
.indicador-panel { min-width: 0; }
.indicador-panel h2 { margin-top: .5rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: .5rem; color: var(--tinta-suave); font-size: .8125rem; }
.filtros label { display: flex; flex-direction: column; gap: .25rem; }
.filtros select, .filtros input { padding: .45rem .6rem; border: 1px solid var(--linea); border-radius: .45rem; background: var(--papel-2); color: var(--tinta); font: inherit; font-size: .875rem; }
.ranking-caja { max-height: 34rem; overflow: auto; border: 1px solid var(--linea); border-radius: .6rem; }
.ranking { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ranking th, .ranking td { padding: .45rem .7rem; border-bottom: 1px solid var(--linea); text-align: left; }
.ranking thead th { position: sticky; top: 0; background: var(--papel); color: var(--tinta-suave); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.ranking .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranking tbody td:first-child { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.ranking tr.total td { border-top: 2px solid var(--linea); color: inherit; font-weight: 600; }
.regiones-tabla { max-width: 32rem; }
.regiones-tabla tbody td:first-child { color: inherit; }
.fuera-ranking { margin-top: 1rem; font-size: .875rem; }
.fuera-ranking summary { cursor: pointer; font-weight: 600; }
.fuera-ranking ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .25rem 0 .75rem; padding: 0; list-style: none; }

.grafico-caja { max-width: 46rem; margin: 0; }
.grafico { display: block; width: 100%; height: auto; }
.grafico-caja figcaption { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; margin-top: .6rem; color: var(--tinta-suave); font-size: .8125rem; }
.clave { display: inline-flex; align-items: center; gap: .4rem; }
.clave i { display: inline-block; width: 1.4rem; }
.clave-chile { border-top: 3px solid var(--cobre); }
.clave-mediana { border-top: 2px dashed var(--tinta-suave); }
.clave-banda { height: .6rem; border: 1px solid var(--linea); background: var(--papel-2); }
.g-reja { stroke: var(--linea); }
.g-texto { fill: var(--tinta-suave); }
.g-texto-chile, .g-punto { fill: var(--cobre); }
.g-chile { stroke: var(--cobre); }
.g-mediana { stroke: var(--tinta-suave); }
.g-banda { fill: var(--papel-2); }
.g-barra { fill: var(--c3); }
.g-barra:hover { fill: var(--cobre); }

/* ---------- Descargar, citar e insertar ---------- */

.compartir { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--linea); }
.descargas { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-start; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.descargas .nota { display: block; max-width: 22rem; margin-top: .3rem; }
.boton.secundario { border: 1px solid var(--linea); background: transparent; color: var(--tinta); }
.boton.secundario:hover { border-color: var(--cobre); background: transparent; color: var(--cobre); }
.copiables { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem 2rem; max-width: 64rem; }
.copiable label { display: block; margin-bottom: .35rem; color: var(--tinta-suave); font-size: .8125rem; font-weight: 600; }
.copiable textarea, .copiable input {
  display: block;
  width: 100%;
  margin-bottom: .5rem;
  padding: .55rem .65rem;
  border: 1px solid var(--linea);
  border-radius: .45rem;
  background: var(--papel-2);
  color: var(--tinta);
  font: .8125rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
.copiable .boton { padding: .45rem .8rem; font-size: .8125rem; }

/* ---------- Comparador ---------- */

.comparar { padding-top: 1.5rem; padding-bottom: 3rem; }
.comparar h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 1.5rem 0 1rem; }
.elegidas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
.elegidas li { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .35rem .3rem .8rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .875rem; }
.elegidas a { font-weight: 600; text-decoration: none; }
.elegidas span { color: var(--tinta-suave); font-size: .78rem; }
.elegidas button { width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: var(--papel-2); color: var(--tinta); font-size: 1rem; line-height: 1; cursor: pointer; }
.elegidas button:hover { background: var(--cobre); color: var(--papel); }
.acciones-comparar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.acciones-comparar .boton { padding: .5rem .9rem; font-size: .875rem; }
.comparar-vacio { color: var(--tinta-suave); }
.comparar-caja { margin-bottom: 1rem; overflow-x: auto; border: 1px solid var(--linea); border-radius: .6rem; }
.tabla-comparar { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla-comparar th, .tabla-comparar td { padding: .55rem .7rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla-comparar thead th { font: 600 .95rem/1.25 var(--serif); }
.tabla-comparar tbody th { position: sticky; left: 0; min-width: 12rem; background: var(--papel); font-weight: 400; }
.tabla-comparar tbody th a { color: inherit; font-weight: 600; text-decoration: none; }
.tabla-comparar tbody th a:hover { color: var(--cobre); }
.tabla-comparar tbody th span { display: block; color: var(--tinta-suave); font-size: .7rem; }
.tabla-comparar td { min-width: 7.5rem; }
.tabla-comparar td span, .tabla-comparar td strong { display: block; font-variant-numeric: tabular-nums; }
.tabla-comparar td small { display: block; color: var(--tinta-suave); font-size: .7rem; }
.tabla-comparar .fila-tema th { padding-top: 1.1rem; background: var(--papel-2); color: var(--cobre); font: 600 .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.barra-comparar { display: block; width: var(--ancho); height: .3rem; margin: .25rem 0 .15rem; border-radius: .15rem; background: var(--c3); }
.tabla-comparar td.mayor { box-shadow: inset 3px 0 0 var(--cobre); }
.tabla-comparar td.mayor > span:first-child::after { content: " ▲"; color: var(--cobre); font-size: .7em; }
.tabla-comparar td.menor > span:first-child::after { content: " ▼"; color: var(--tinta-suave); font-size: .7em; }
.tabla-comparar td.chile, .tabla-comparar td.sin-dato { color: var(--tinta-suave); }

/* ---------- Datos abiertos ---------- */

.datos-abiertos { padding-top: 1.5rem; padding-bottom: 3rem; }
.datos-abiertos h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 1.5rem 0 1rem; }
.paquete { max-width: 52rem; margin-bottom: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--linea); }
.paquete > p { max-width: 44rem; }
.ficha-paquete { display: grid; gap: .35rem; margin: 1rem 0 1.25rem; font-size: .875rem; }
.ficha-paquete div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; }
.ficha-paquete dt { color: var(--tinta-suave); }
.ficha-paquete dd { margin: 0; overflow-wrap: anywhere; }
.ficha-paquete .hash { font: .75rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tinta-suave); }
.paquete .copiable { max-width: 44rem; margin: 1.25rem 0 .5rem; }
.paquete code { font-size: .8rem; overflow-wrap: anywhere; }

/* ---------- Navegación: saltar, buscador global, menú ---------- */

.saltar { position: absolute; left: .5rem; top: -3rem; z-index: 50; padding: .5rem .8rem; border-radius: .4rem; background: var(--tinta); color: var(--papel); }
.saltar:focus { top: .5rem; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.busqueda { position: relative; }
.busqueda input { width: 100%; padding: .55rem .8rem; border: 1px solid var(--linea); border-radius: .55rem; background: var(--papel-2); color: var(--tinta); font: inherit; }
.busqueda-barra { flex: 1 1 14rem; max-width: 24rem; margin-left: auto; }
.busqueda-barra input { padding-right: 2rem; font-size: .875rem; }
.atajo { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); padding: 0 .35rem; border: 1px solid var(--linea); border-radius: .25rem; color: var(--tinta-suave); font: .72rem var(--sans); pointer-events: none; }
.busqueda-barra input:focus + .atajo { display: none; }
.busqueda-grande { max-width: 36rem; }
.busqueda-grande label { display: block; margin-bottom: .45rem; font-weight: 600; }
.busqueda-grande input { padding: .85rem 1rem; font-size: 1.05rem; }
.resultados { position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 40; max-height: min(70vh, 30rem); overflow-y: auto; padding: .35rem; border: 1px solid var(--linea); border-radius: .6rem; background: var(--papel); box-shadow: 0 12px 30px rgb(0 0 0 / .18); }
.busqueda-barra .resultados { min-width: 20rem; }
.resultados .grupo { margin: .4rem .5rem .15rem; color: var(--cobre); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.resultados a { display: block; padding: .4rem .55rem; border-radius: .4rem; color: var(--tinta); text-decoration: none; }
.resultados a strong { display: block; font-weight: 600; font-size: .9rem; }
.resultados a span { display: block; color: var(--tinta-suave); font-size: .75rem; }
.resultados a:hover, .resultados a[aria-selected="true"] { background: var(--papel-2); }
.resultados .sin-resultados { margin: .5rem; color: var(--tinta-suave); font-size: .85rem; }
@media (min-width: 761px) { .menu-boton { display: none !important; } }
.menu-boton { padding: .4rem .75rem; border: 1px solid var(--linea); border-radius: .45rem; background: transparent; color: var(--tinta); font: inherit; font-size: .875rem; cursor: pointer; }
.submenu { position: relative; }
.submenu summary { color: var(--tinta-suave); cursor: pointer; list-style: none; white-space: nowrap; }
.submenu summary::-webkit-details-marker { display: none; }
.submenu summary::after { content: " ▾"; font-size: .75em; }
.submenu summary:hover, .menu a:hover { color: var(--cobre); }
.submenu-lista { position: absolute; right: 0; top: calc(100% + .6rem); z-index: 40; display: grid; min-width: 15rem; padding: .4rem; border: 1px solid var(--linea); border-radius: .6rem; background: var(--papel); box-shadow: 0 12px 30px rgb(0 0 0 / .18); }
.submenu-lista a { padding: .45rem .6rem; border-radius: .35rem; white-space: nowrap; }
.submenu-lista a:hover { background: var(--papel-2); }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1rem; font-size: .875rem; }
.pie-enlaces a { color: var(--tinta-suave); }

/* ---------- Portada: puertas por público y lo nuevo ---------- */

.puertas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-bottom: 2.5rem; }
.puerta { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.3rem; border: 1px solid var(--linea); border-radius: .8rem; color: var(--tinta-suave); font-size: .9rem; text-decoration: none; }
.puerta:hover { border-color: var(--cobre); }
.puerta-titulo { color: var(--tinta); font: 600 1.3rem/1.2 var(--serif); }
.puerta-accion { margin-top: auto; color: var(--cobre); font-weight: 600; }
.lo-nuevo { padding-bottom: 2.5rem; }
.lo-nuevo h2 { font-size: 1.3rem; }

/* ---------- Ficha: índice fijo, capítulos, ayudas ---------- */

.indice-ficha { position: sticky; top: 0; z-index: 6; display: flex; gap: .3rem; margin: 0 -.5rem 1.5rem; padding: .55rem .5rem; overflow-x: auto; border-bottom: 1px solid var(--linea); background: var(--papel); scrollbar-width: none; }
.indice-ficha::-webkit-scrollbar { display: none; }
.indice-ficha a { flex: none; padding: .3rem .7rem; border-radius: 999px; color: var(--tinta-suave); font-size: .82rem; text-decoration: none; white-space: nowrap; }
.indice-ficha a:hover { color: var(--cobre); }
.indice-ficha a[aria-current="true"] { background: var(--tinta); color: var(--papel); }
.capitulo, .resumen, .parecidas { scroll-margin-top: 4rem; }
.capitulo { margin-top: 1rem; padding-top: 1.5rem; border-top: 2px solid var(--linea); }
.capitulo > h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
.capitulo .tema h3 { margin: .5rem 0 .75rem; color: var(--cobre); font: 600 .8rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.como-leer, .historia-electoral, .datos-grafico { margin: 0 0 1.5rem; }
.como-leer summary, .historia-electoral summary, .datos-grafico summary { cursor: pointer; color: var(--cobre); font-weight: 600; }
.como-leer ol { max-width: 46rem; margin: .75rem 0 0; padding-left: 1.3rem; font-size: .9375rem; }
.como-leer li { margin-bottom: .4rem; }
.historia-electoral { margin-top: 1.5rem; }
.historia-electoral > summary { padding: .8rem 1rem; border: 1px solid var(--linea); border-radius: .6rem; }
.historia-electoral[open] > summary { margin-bottom: 1.5rem; }
.datos-grafico table { max-width: 40rem; margin-top: .5rem; }
.por-que { max-width: 46rem; margin: 0 0 .75rem; font-size: 1rem; }

/* Términos del glosario: explicación al pasar el cursor o al tocar (y siempre para lectores de pantalla). */
.termino { position: relative; border-bottom: 1px dotted currentColor; cursor: help; }
.termino:focus { outline: 2px solid var(--cobre); outline-offset: 1px; }
.termino .def { position: absolute; left: 0; top: calc(100% + .4rem); z-index: 30; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
                padding: .55rem .7rem; border-radius: .45rem; background: var(--globo-fondo); color: var(--globo-texto);
                font: 400 .78rem/1.45 var(--sans); letter-spacing: 0; text-transform: none; white-space: normal; }
.termino:hover .def, .termino:focus .def { width: max-content; max-width: min(19rem, 80vw); height: auto; overflow: visible; clip-path: none; }

/* ---------- Páginas de texto ---------- */

.pagina-texto { max-width: 48rem; padding-top: 1.5rem; padding-bottom: 3rem; }
.pagina-texto h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 1.5rem 0 1rem; }
.pagina-texto h2 { margin-top: 2rem; font-size: 1.35rem; }
.pagina-texto li { margin-bottom: .45rem; }
.principios li { margin-bottom: .7rem; }
.glosario div { padding: .8rem 0; border-bottom: 1px solid var(--linea); scroll-margin-top: 2rem; }
.glosario dt { font-weight: 600; }
.glosario dd { margin: .25rem 0 0; color: var(--tinta-suave); }
.glosario div:target { background: var(--papel-2); }

/* ---------- Tablero ---------- */

.tablero { padding-top: 1.5rem; padding-bottom: 3rem; }
.tablero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 1.5rem 0 1rem; }
.historias-caja h2 { margin-bottom: .6rem; font-size: 1.1rem; }
.historias { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.historia { padding: .45rem .8rem; border: 1px solid var(--linea); border-radius: 999px; background: transparent; color: var(--tinta); font: inherit; font-size: .8125rem; cursor: pointer; text-align: left; }
.historia:hover { border-color: var(--cobre); color: var(--cobre); }
.tablero-controles { display: grid; gap: .75rem; margin: 0 -.5rem 1.25rem; padding: .75rem .5rem; border-bottom: 1px solid var(--linea); background: var(--papel); }
/* Los controles quedan fijos arriba solo en pantallas altas: en las demás taparían los gráficos. */
@media (min-height: 1050px) and (min-width: 1000px) { .tablero-controles { position: sticky; top: 0; z-index: 5; } }
.ejes, .filtros-tablero { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.ejes label, .filtros-tablero label { display: flex; flex-direction: column; gap: .25rem; color: var(--tinta-suave); font-size: .75rem; }
.ejes select, .filtros-tablero select { max-width: 22rem; padding: .45rem .6rem; border: 1px solid var(--linea); border-radius: .45rem; background: var(--papel-2); color: var(--tinta); font: inherit; font-size: .875rem; }
.ejes .boton, .filtros-tablero .boton { padding: .45rem .8rem; font-size: .875rem; }
.segmentado-caja { display: flex; flex-direction: column; gap: .25rem; color: var(--tinta-suave); font-size: .75rem; }
.segmentado { display: flex; flex-wrap: wrap; border: 1px solid var(--linea); border-radius: .45rem; overflow: hidden; }
.segmentado button { padding: .4rem .6rem; border: 0; border-right: 1px solid var(--linea); background: transparent; color: var(--tinta); font: inherit; font-size: .78rem; cursor: pointer; }
.segmentado button:last-child { border-right: 0; }
.segmentado button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.tablero-cifras { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tablero-cifras .cifra-valor { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.tablero-cuerpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem 2rem; margin-bottom: 1.5rem; scroll-margin-top: 9rem; }
.panel { min-width: 0; }
.panel h2 { margin-bottom: .6rem; font-size: 1.05rem; }
.panel-mapa .mapa-chile { --alto: min(calc(100svh - 14rem), 620px); margin: 0 auto; }
.dispersion { touch-action: none; user-select: none; }
.punto { stroke: var(--papel); stroke-width: .8; opacity: .8; cursor: pointer; }
.punto:hover, .punto:focus-visible { opacity: 1; stroke: var(--tinta); stroke-width: 1.5; outline: none; }
.punto.atenuada { opacity: .15; }
.punto.elegida { opacity: 1; stroke: var(--tinta); stroke-width: 2; }
.g1 { fill: var(--g1); } .g2 { fill: var(--g2); } .g3 { fill: var(--g3); } .g4 { fill: var(--g4); } .g5 { fill: var(--g5); } .g6 { fill: var(--g6); } .g0 { fill: var(--sin-dato); }
.muestra { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.muestra.g1 { background: var(--g1); } .muestra.g2 { background: var(--g2); } .muestra.g3 { background: var(--g3); }
.muestra.g4 { background: var(--g4); } .muestra.g5 { background: var(--g5); } .muestra.g6 { background: var(--g6); }
.g-eje { fill: var(--tinta-suave); font-size: 12px; }
.g-tendencia { stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: .6; }
.g-rectangulo { fill: var(--cobre); fill-opacity: .12; stroke: var(--cobre); stroke-dasharray: 4 3; }
.tablero-leyenda { margin: .4rem 0 0; }
.comunas path.fuera { fill: var(--sin-dato) !important; opacity: .45; }
.comunas path.elegida { stroke: var(--tinta); stroke-width: 1.4px; }
.barras-regiones { display: grid; gap: .2rem; }
.barra-region { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .2rem .3rem; border: 0; border-radius: .3rem; background: transparent; color: var(--tinta); font: inherit; font-size: .78rem; text-align: left; cursor: pointer; }
.barra-region:hover { background: var(--papel-2); }
.barra-region[aria-pressed="true"] { background: var(--papel-2); box-shadow: inset 3px 0 0 var(--cobre); }
.barra-region span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-region i { display: block; width: var(--ancho); height: .55rem; border-radius: .2rem; background: var(--c3); }
.barra-region strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.panel-tabla .ranking-caja { max-height: 26rem; }
.panel-tabla th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.ranking tr.elegida td { background: var(--papel-2); font-weight: 600; }
.enlace-boton { padding: 0; border: 0; background: none; color: var(--cobre); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Tableros: parecidas, evolución, elecciones, finanzas ---------- */

.elegir-comuna { max-width: 30rem; margin: 0 0 1.5rem; }
.elegir-comuna label { display: block; margin-bottom: .35rem; color: var(--tinta-suave); font-size: .8125rem; font-weight: 600; }
.elegir-comuna input { flex: 1; padding: .6rem .8rem; border: 1px solid var(--linea); border-radius: .5rem; background: var(--papel-2); color: var(--tinta); font: inherit; }
.elegir-comuna .boton { padding: .6rem 1rem; }
.tablero-controles .elegir-comuna { margin: 0; }
.casilla { flex-direction: row !important; align-items: center; gap: .45rem !important; color: var(--tinta) !important; font-size: .875rem !important; }
.parecidas-cabecera h2 a { text-decoration-color: var(--cobre); }
.parecidas-cabecera .lista-parecidas { margin: .75rem 0; }
.franja { display: block; width: 100%; height: auto; max-width: 300px; }
.punto-grupo { fill: var(--tinta-suave); opacity: .55; }
.tabla-parecidas .col-pista { width: 28%; }
.tabla-parecidas td:last-child { min-width: 7rem; white-space: normal; }
.comunas path.s1 { fill: var(--s1); } .comunas path.s2 { fill: var(--s2); } .comunas path.s3 { fill: var(--s3); }
.comunas path.s4 { fill: var(--s4); } .comunas path.s5 { fill: var(--s5); }
.leyenda i.s1 { background: var(--s1); } .leyenda i.s2 { background: var(--s2); } .leyenda i.s3 { background: var(--s3); border: 1px solid var(--linea); }
.leyenda i.s4 { background: var(--s4); } .leyenda i.s5 { background: var(--s5); }
.linea-chile { stroke: var(--tinta); stroke-width: 2.5; fill: var(--tinta); }
polyline.linea-chile { fill: none; }
.linea-region { stroke: var(--tinta-suave); stroke-width: 1.6; stroke-dasharray: 5 4; fill: none; }
.linea-comuna { stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.g-guia { stroke: var(--tinta-suave); stroke-width: 1; stroke-dasharray: 3 3; }
.clave-linea { display: inline-block; width: 1.4rem; border-top: 3px solid var(--tinta); }
.clave-linea.linea-region { border-top: 2px dashed var(--tinta-suave); }
.muestra.cuadrada { border-radius: .15rem; }
.elegidas .muestra { width: .7rem; height: .7rem; }

/* ---------- Novedades ---------- */

.novedades { padding-top: 1.5rem; padding-bottom: 3rem; }
.novedades h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 1.5rem 0 1rem; }
.novedades section { max-width: 52rem; margin-bottom: 2rem; }
.novedades-lista { margin: 0 0 1.25rem; padding: 0; list-style: none; max-width: 52rem; }
.novedades-lista li { padding: .7rem 0 .7rem .9rem; border-bottom: 1px solid var(--linea); border-left: 3px solid var(--linea); }
.novedades-lista li.novedad-alerta, .novedades-lista li.novedad-dudoso { border-left-color: var(--cobre); }
.novedades-lista .fecha { display: block; color: var(--tinta-suave); font-size: .75rem; }
.novedades-lista a { font-weight: 600; }
.novedades-lista .detalle { display: block; margin-top: .2rem; color: var(--tinta-suave); font-size: .875rem; white-space: pre-line; }

/* ---------- Índice de indicadores ---------- */

.lista-indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem 2rem; margin: 0; padding: 0; list-style: none; }
.lista-indicadores li { padding-bottom: .9rem; border-bottom: 1px solid var(--linea); }
.lista-indicadores a { font-weight: 600; }
.lista-indicadores .nota { display: block; }
.lista-indicadores p { margin: .3rem 0 0; color: var(--tinta-suave); font-size: .875rem; }

/* ---------- Versión para insertar en otros sitios ---------- */

.insertar { padding: 1rem; }
.insertar h1 { margin: 0 0 1rem; font-size: 1.5rem; }
.insertar-cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; }
.insertar .mapa-chile { --alto: min(calc(100svh - 9rem), 600px); }
.insertar .extremos h2 { margin: 0 0 .4rem; font-size: .95rem; }

/* Con la columna «Parecidas» la tabla tiene 7 columnas: en pantallas medianas, menos aire y las
   referencias pueden partir la unidad en otra línea. */
@media (max-width: 1200px) {
  .indicadores { font-size: .875rem; }
  .indicadores th, .indicadores td { padding: .6rem .4rem; }
  .indicadores .ref { white-space: normal; }
  .col-pista { min-width: 8rem; }
}

@media (max-width: 900px) {
  .ficha-cabecera { grid-template-columns: minmax(0, 1fr); }
  .mapa-ubicacion { max-width: 26rem; }
  .cifras-clave { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* En celular: el buscador en su propia fila y el menú detrás del botón «Menú». Sin JavaScript, el menú
     queda a la vista como una fila que se desliza de lado. */
  .barra { flex-wrap: wrap; row-gap: .6rem; }
  .busqueda-barra { order: 4; flex-basis: 100%; max-width: none; }
  .busqueda-barra .resultados { min-width: 0; }
  .atajo { display: none; }
  .menu-boton { margin-left: auto; }
  .menu { order: 3; flex-basis: 100%; gap: 1.1rem; margin: 0 -1rem; padding: .1rem 1rem .2rem; overflow-x: auto;
          white-space: nowrap; scrollbar-width: none; font-size: .875rem; }
  .menu::-webkit-scrollbar { display: none; }
  .js .menu { display: none; }
  .js .menu.abierto { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: .25rem 0; overflow: visible; white-space: normal; }
  .js .menu.abierto > a, .js .menu.abierto summary { padding: .6rem 0; border-bottom: 1px solid var(--linea); }
  .js .menu.abierto .submenu-lista { position: static; min-width: 0; padding: 0 0 .4rem 1rem; border: 0; box-shadow: none; }
  .puertas { grid-template-columns: minmax(0, 1fr); }
  .explorador, .indicador-explorar, .insertar-cuerpo, .tablero-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .tablero-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablero-controles { position: static; }
  .ranking-caja .ranking th:nth-child(3), .ranking-caja .ranking td:nth-child(3) { display: none; }
  .mapa-chile { width: 100%; }
  .mapa-chile .lienzo { height: auto; aspect-ratio: 1423 / 240; }
  .explorador-panel { position: static; }

  /* La tabla se vuelve tarjetas: cada indicador en su bloque. */
  .indicadores thead { display: none; }
  .indicadores, .indicadores tbody, .indicadores tr, .indicadores th, .indicadores td { display: block; width: auto; }
  .indicadores tr { padding: 1rem 0; border-bottom: 1px solid var(--linea); }
  .indicadores th, .indicadores td, .indicadores tbody th { width: auto; padding: .15rem 0; border: 0; }
  .indicadores .valor { margin: .35rem 0; font-size: 1.4rem; }
  .indicadores .col-pista { margin: .4rem 0; }
  .indicadores .ref { display: inline-block; margin-right: 1rem; font-size: .8125rem; }
  .indicadores .ref::before { content: attr(data-etiqueta) " "; font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .comunas path { transition: none; }
}

/* ---------- Impresión y PDF ----------
   La ficha se imprime (o se guarda como PDF desde el navegador) en A4: siempre en colores claros,
   la tabla compacta y sin lo que solo sirve en pantalla. */

.solo-impresion { display: none; }

@media print {
  @page { size: A4; margin: 12mm 11mm 14mm; }
  :root {
    --papel: #fff;
    --papel-2: #f3efe8;
    --tinta: #1d1a17;
    --tinta-suave: #4f483f;
    --cobre: #9c4a22;
    --linea: #ddd3c3;
    --comuna: #d0c4ae;
    --sin-dato: #e4ddd2;
    --c1: #f1e2cf; --c2: #e2b98f; --c3: #cc8b57; --c4: #a85e2c; --c5: #6f3313;
    color-scheme: light;
  }
  html { font-size: 10.5pt; }
  body { background: #fff; color: var(--tinta); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .barra .menu, .menu-boton, .busqueda, .saltar, .indice-ficha, .como-leer, .termino .def, .historia-electoral,
  .barra .menu, .sello, .ancla, .compartir, .vecinas, .boton, .enlace-flecha, .globo,
  .mapa-ubicacion figcaption, .resumen .nota, .metodo details, .parecidas .nota { display: none !important; }
  .solo-impresion { display: block; margin: 0 0 .5rem; color: var(--tinta-suave); font-size: .8rem; }
  .barra { padding: 0 0 .4rem; }
  .envoltura { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  h1 { font-size: 26pt !important; }
  h2 { break-after: avoid; font-size: 15pt; }
  h3 { break-after: avoid; }
  .ficha-cabecera { grid-template-columns: minmax(0, 1fr) 13rem; }
  .mapa-ubicacion .lienzo { max-height: 12rem; }
  .cifras-clave { grid-template-columns: repeat(4, minmax(0, 1fr)); break-inside: avoid; }
  .resumen { max-width: none; }

  /* La tabla vuelve a ser tabla aunque la página sea angosta (en pantalla, bajo 760 px se vuelve tarjetas). */
  .indicadores { display: table !important; font-size: .8rem; }
  .indicadores thead { display: table-header-group !important; }
  .indicadores tbody { display: table-row-group !important; }
  .indicadores tr { display: table-row !important; padding: 0; break-inside: avoid; }
  .indicadores th, .indicadores td, .indicadores tbody th { display: table-cell !important; padding: .3rem .3rem; border-bottom: 1px solid var(--linea) !important; }
  .indicadores tbody th { width: 30% !important; }
  .indicadores .ref::before { content: none !important; }
  .indicadores .valor { margin: 0; font-size: .95rem; }
  .ind-desc { display: none; }
  .col-pista { min-width: 0; width: 18%; }
  .tema { break-inside: auto; margin-bottom: 1.2rem; }

  .elecciones-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
  .elecciones-grilla > div { break-inside: avoid; }
  .pie-sitio { padding: .5rem 0 0; font-size: .75rem; }
}