/* 29N · ¿Qué pasaría si…? · identidad de De Madrid a Europa: azul #003399, amarillo #FFDE59 y negro; Roboto y, de acento, Kalam.
   Cinco páginas con pestañas (Congreso, ¿Y si…?, Tu encuesta, Tu mesa, Cómo funciona; La Porra va aparte), la cinta
   «Novedades» arriba de todo y una barra azul pegada arriba, «Estás viendo», que abre la ficha con lo elegido: abajo en
   el móvil y a la derecha en el ordenador.
   Usa todo el ancho de la pantalla (petición de Ignacio, 09/10/2026): el margen lateral crece con la pantalla (--margen)
   y las rejillas añaden columnas; los párrafos conservan un largo de línea legible. */
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fuentes/roboto-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fuentes/roboto-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fuentes/roboto-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 900; font-style: normal; font-display: swap; src: url(../fuentes/roboto-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fuentes/kalam-latin-700-normal.woff2) format("woff2"); }
:root {
  --papel: #f4f6fb;
  --hoja: #ffffff;
  --tinta: #000000;
  --tenue: #4d5670;
  --linea: #d3d9e8;
  --laton: #003399;
  --laton-suave: #fff3b8;
  --amarillo: #ffde59;
  --sobre-azul: #ffffff;
  --si: #1f7a4a;
  --no: #6b4e00;
  --vacio: #e3e8f3;
  --f-disp: "Roboto", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Roboto", "Segoe UI", system-ui, sans-serif;
  --f-num: "Roboto", "Segoe UI", system-ui, sans-serif;
  --f-mano: "Kalam", "Segoe Print", cursive;
  --r: 6px;
  --alto-fija: 136px;
  --margen: clamp(16px, 3vw, 56px);   /* margen lateral de toda la web */            /* pestañas + barra «Estás viendo», para que un ancla no quede debajo */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0b1230; --hoja: #121b42; --tinta: #f1f4fb; --tenue: #a9b3cc; --linea: #27325c;
    --laton: #a9bcff; --laton-suave: #3a3210; --amarillo: #ffde59; --sobre-azul: #0b1230; --si: #6fdc9b; --no: #ffde59; --vacio: #26305a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0b1230; --hoja: #121b42; --tinta: #f1f4fb; --tenue: #a9b3cc; --linea: #27325c;
  --laton: #a9bcff; --laton-suave: #3a3210; --amarillo: #ffde59; --sobre-azul: #0b1230; --si: #6fdc9b; --no: #ffde59; --vacio: #26305a; color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f-texto); font-size: 16px; line-height: 1.5; }
.envoltura { margin: 0; padding-inline: var(--margen); padding-block: 0 56px; }
h1, h2, h3 { font-family: var(--f-disp); text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 900; color: var(--laton); }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
small { color: var(--tenue); }
.num, .kpi-v, .cod, output { font-family: var(--f-num); font-variant-numeric: tabular-nums; }

/* Cabecera */
.cabecera { position: relative; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding-block: 26px 18px; border-bottom: 2px solid var(--laton); }
.cabecera::before { content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 12px; background: var(--amarillo); }
.marca { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.marca img { height: 78px; width: auto; display: block; }
.marca .barra-v { width: 1px; align-self: stretch; background: var(--laton); }
.marca-txt { display: flex; flex-direction: column; gap: 2px; }
.marca h1, .marca .marca-h { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 900; line-height: 1.05; color: var(--laton); display: flex; flex-wrap: wrap; align-items: center; gap: .1em .32em; }
.m29 { background: var(--amarillo); color: #000; padding: .04em .2em .06em; border-radius: 8px; letter-spacing: -.02em; transform: rotate(-2deg); display: inline-block; }
.lema { font-family: var(--f-mano); font-weight: 700; font-size: 1.3rem; color: var(--tinta); }
@media (max-width: 560px) {
  .cabecera { padding-block: 18px 12px; }
  .marca { gap: 10px 14px; }
  .marca img { height: 46px; } .marca .barra-v { display: none; }
  .marca h1, .marca .marca-h { font-size: 1.75rem; }
  .lema { font-size: 1.05rem; }
}
/* Selector de idioma (las páginas en español y en /en/, /fr/, /de/ e /it/: mesa_idiomas.py) */
.idiomas { display: flex; gap: 2px; align-self: flex-start; }
.idiomas a { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--laton); text-decoration: none; padding: 5px 8px; border-radius: 6px; }
.idiomas a:hover { background: var(--vacio); }
.idiomas a[aria-current] { background: var(--laton); color: var(--sobre-azul); }
.idiomas a:focus-visible { outline: 3px solid var(--laton); outline-offset: 2px; }
@media (max-width: 560px) { .idiomas { order: -1; align-self: flex-end; margin-left: auto; } }
/* Cinta «Novedades», arriba de todo (comun/novedades.js): se mueve solo si no cabe, se para al pasar el ratón, al llegar
   con el teclado o con su botón, y no se mueve si el sistema pide menos movimiento */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cinta { display: flex; align-items: center; gap: 12px; height: 40px; margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen);
  background: #003399; color: #fff; font-size: .86rem; line-height: 1; }
.cinta a { color: inherit; text-decoration: none; }
.cinta-k { flex: none; display: inline-flex; align-items: center; gap: 7px; background: #ffde59; color: #000 !important; font-weight: 900; font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.cinta-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e1251b; }
.cinta-vent { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent); }
.cinta-pista { display: flex; width: max-content; }
.cinta-lista { display: flex; flex: none; list-style: none; margin: 0; padding: 0 0 0 18px; }
.cinta-lista li { display: flex; align-items: center; white-space: nowrap; }
.cinta-lista li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ffde59; margin-inline: 18px; opacity: .8; }
.cinta-lista a { display: inline-flex; align-items: baseline; gap: 7px; padding-block: 6px; }
.cinta-lista a:hover .ci-t, .cinta-lista a:focus-visible .ci-t { text-decoration: underline; text-underline-offset: 3px; }
.cinta a:focus-visible, .cinta-pausa:focus-visible { outline: 2px solid #ffde59; outline-offset: 2px; border-radius: 4px; }
.ci-f { color: #ffde59; font-weight: 700; font-variant-numeric: tabular-nums; }
.ci-nuevo { background: #ffde59; color: #000; font-weight: 900; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; align-self: center; }
.ci-ext { opacity: .75; }
.cinta-pausa { flex: none; width: 26px; height: 26px; display: none; place-items: center; padding: 0; cursor: pointer; background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 50%; }
.cinta-pausa span { display: block; width: 8px; height: 9px; border-inline: 3px solid #fff; }
.cinta-pausa[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 8px solid #fff; border-block: 5px solid transparent; margin-left: 2px; }
.cinta-todas { flex: none; font-weight: 700; white-space: nowrap; }
.cinta-todas::after { content: " ›"; }
.cinta:not(.cinta-mueve) .cinta-lista[aria-hidden] { display: none; }
.cinta-mueve .cinta-pausa { display: grid; }
@media (prefers-reduced-motion: no-preference) {
  .cinta-mueve .cinta-pista { animation: cinta var(--cinta-dur, 40s) linear 2s infinite; }   /* empieza a los 2 s: da tiempo a leer la primera */
  .cinta-mueve .cinta-vent:hover .cinta-pista, .cinta-mueve .cinta-vent:focus-within .cinta-pista, .cinta-parada .cinta-pista { animation-play-state: paused; }
  .cinta-k::before { animation: latido 2s ease-in-out infinite; }
}
@keyframes cinta { to { transform: translateX(-50%); } }
@keyframes latido { 50% { opacity: .25; } }
/* Sin movimiento: la cinta se desliza con el dedo o la rueda */
@media (prefers-reduced-motion: reduce) {
  .cinta-vent { overflow-x: auto; scrollbar-width: none; }
  .cinta-vent::-webkit-scrollbar { display: none; }
  .cinta .cinta-lista[aria-hidden], .cinta .cinta-pausa { display: none; }
}
@media (max-width: 560px) {
  .cinta { height: 36px; gap: 8px; font-size: .82rem; }
  .cinta-k { padding: 5px 8px; font-size: .64rem; }
  .cinta-todas { display: none; }
}
/* Lo que hace la web: censo mesa a mesa × encuestas → escenarios */
.pitch { padding-block: 26px 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pitch-t { font-size: clamp(1.45rem, 3.2vw, 2.05rem); font-weight: 900; color: var(--tinta); line-height: 1.12; }
.pitch-t em { font-style: normal; color: var(--laton); background: linear-gradient(transparent 62%, var(--amarillo) 62%); padding-inline: 2px; }
.pitch-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: paso; }
@media (max-width: 760px) {
  .pitch { padding-block: 18px 4px; gap: 12px; }
  .pitch-t { font-size: 1.3rem; }
  .pitch-pasos { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pitch-pasos li:first-child { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .pp-mas { display: none; }
  .pitch-pasos li { padding: 10px 10px 9px; border-radius: 12px; gap: 1px; }
  .pitch-pasos li::before { display: none; }
  .pp-n { font-size: 1.25rem; }
  .pp-l { font-size: .74rem; line-height: 1.2; font-weight: 500; }
  .pp-d { display: none; }
}
.pitch-pasos li { position: relative; background: var(--hoja); border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; display: grid; gap: 3px; align-content: start; min-width: 0; }
.pitch-pasos li::before { counter-increment: paso; content: counter(paso); position: absolute; top: 10px; right: 14px; font-family: var(--f-num); font-weight: 900; font-size: .8rem; color: var(--tenue); }
.pitch-pasos a { color: inherit; text-decoration: none; display: grid; gap: 3px; }
.pp-n { font-family: var(--f-num); font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--laton); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-l { font-weight: 700; }
.pp-d { font-size: .82rem; color: var(--tenue); }
.pitch-pasos .pp-esc { background: var(--amarillo); border-color: #000; color: #000; }
.pitch-pasos .pp-esc::before, .pitch-pasos .pp-esc .pp-d { color: #333; }
.pitch-pasos .pp-esc .pp-n { color: #003399; }
.pitch-pasos .pp-esc:hover { box-shadow: 0 4px 0 #000; }
.sello-muestra { font-family: var(--f-num); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid var(--laton); color: var(--laton); padding: 4px 8px; border-radius: 3px; }

/* Controles */
.controles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 12px 4px; }
.ctl { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.ctl-l { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); font-weight: 700; }
.chips { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.chips-mini { margin-block: 4px 10px; }
.chip { font: inherit; border: 2px solid var(--laton); background: var(--hoja); color: var(--tinta); border-radius: 999px; padding: 6px 14px; display: inline-flex; flex-direction: column; align-items: flex-start; cursor: pointer; white-space: nowrap; line-height: 1.2; }
.chip-t { font-weight: 700; font-size: .9rem; }
.chip-n { font-size: .7rem; color: var(--tenue); }
.chip[aria-pressed="true"] { background: var(--laton); color: var(--sobre-azul); border-color: var(--laton); }
.chip:not([aria-pressed="true"]) .chip-t { color: var(--laton); }
.chip[aria-pressed="true"] .chip-n { color: inherit; opacity: .75; }
.chip:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--laton); outline-offset: 2px; }
.conmutador { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--linea); border-radius: 999px; background: var(--hoja); }
.conmutador .chip { border: 0; padding: 4px 12px; }
@media (max-width: 640px) { .ctl { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* La regla de los 176 */
.regla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; padding-block: 30px 10px; align-items: center; }
@media (max-width: 820px) { .regla { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 20px 6px; } }
.regla-k { font-family: var(--f-mano); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.25; margin-bottom: 6px; color: var(--laton); }
.titular { font-family: var(--f-disp); font-weight: 800; font-size: clamp(1.7rem, 4.6vw, 2.9rem); line-height: 1.05; text-wrap: balance; }
.titular em { font-style: normal; color: var(--laton); background: linear-gradient(transparent 62%, var(--amarillo) 62%); padding-inline: 2px; }
.sub { color: var(--tenue); margin-top: 14px; font-size: .88rem; }
.medidor { margin-top: 22px; }
.medidor-barra { position: relative; height: 44px; background: var(--vacio); border-radius: 4px; overflow: hidden; display: flex; }
.medidor-barra .lado { height: 100%; display: flex; }
.medidor-barra .lado span { height: 100%; flex-basis: 0; }
.medidor-barra .hueco { flex: 1; }
.medidor-marca { position: relative; height: 22px; margin-top: 4px; font-family: var(--f-num); font-size: .72rem; color: var(--tenue); }
.medidor-marca .m176 { position: absolute; transform: translateX(-50%); top: 0; color: var(--tinta); font-weight: 600; }
.medidor-marca .izq { position: absolute; left: 0; }
.medidor-marca .der { position: absolute; right: 0; }
.medidor-linea { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--tinta); left: 50%; }
.medidor-leyenda { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; margin-top: 2px; }
.medidor-leyenda b { font-family: var(--f-num); font-size: 1.1rem; }
/* Las tres cifras grandes bajo la regla */
.medidor-cifras { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 2px; }
.mc { display: grid; gap: 1px; min-width: 0; }
.mc b { font-family: var(--f-num); font-weight: 900; font-size: clamp(2rem, 6vw, 2.7rem); line-height: 1; font-variant-numeric: tabular-nums; }
.mc span { font-size: .8rem; font-weight: 700; line-height: 1.2; }
.mc small { font-size: .74rem; line-height: 1.2; }
.mc-otros { text-align: center; }
.mc-otros b { font-size: 1.25rem; color: var(--tenue); }
.mc-otros span { font-weight: 400; color: var(--tenue); }
.mc-der { text-align: right; }
.mc-si b { color: var(--laton); }
.mc-si span::after { content: " · mayoría"; color: var(--si); }
/* En las páginas /en/, /fr/, /de/ e /it/ (mesa_idiomas.py) */
:lang(en) .mc-si span::after, :lang(en) .rp-may span::after { content: " · majority"; }
:lang(fr) .mc-si span::after, :lang(fr) .rp-may span::after { content: " · majorité"; }
:lang(de) .mc-si span::after, :lang(de) .rp-may span::after { content: " · Mehrheit"; }
:lang(it) .mc-si span::after, :lang(it) .rp-may span::after { content: " · maggioranza"; }
.hemi-caja { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px; width: 100%; max-width: 780px; justify-self: end; }
.hemiciclo { width: 100%; height: auto; display: block; }
/* Sitio reservado para lo que rellena ui.js al cargar (PageSpeed, 12/10/2026): sin él, el titular, el medidor y el
   hemiciclo aparecían de golpe y empujaban hacia abajo todo lo demás. Solo mientras está vacío; después manda el contenido.
   Medidas tomadas de 360 a 1.350 píxeles. El hemiciclo lleva en index.html un dibujo vacío del mismo tamaño. */
#congreso .titular:empty { min-height: 2.1em; }
#congreso .medidor:empty { min-height: 147px; }
#congreso .sub:empty { min-height: 42px; }
@media (max-width: 640px) {
  #congreso .medidor:empty { min-height: 136px; }
  #congreso .sub:empty { min-height: 63px; }
}
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: .8rem; }
.ley { display: inline-flex; align-items: center; gap: 5px; }
.ley i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ley b { font-family: var(--f-num); }

/* Resumen */
.resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; margin-top: 22px; }
@media (max-width: 760px) { .resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--hoja); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-v { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.kpi-principal .kpi-v { font-size: 1.25rem; }
.kpi-l { font-size: .82rem; color: var(--tenue); }
.pill { align-self: flex-start; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pill-si { background: color-mix(in srgb, var(--si) 16%, transparent); color: var(--si); }
.pill-no { background: var(--laton-suave); color: var(--no); }
.resumen-nota { margin-top: 10px; color: var(--tenue); font-size: .9rem; }

/* Secciones */
.seccion { padding-block: 36px 6px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.seccion, .regla, .a-fondo, .preguntas, [id^="t-"] { scroll-margin-top: var(--alto-fija); }
select { max-width: 100%; }
/* Cabecera de sección: el título y, debajo, su explicación (09/10/2026: antes iban lado a lado y dejaban un hueco) */
.seccion-cab { display: grid; gap: 6px; border-top: 1px solid var(--linea); padding-top: 18px; }
.seccion-cab p { color: var(--tenue); margin: 0; }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 820px) { .dos { grid-template-columns: minmax(0, 1fr); } }

/* Tablas */
.tabla-env { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r); background: var(--hoja); }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla thead th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); font-weight: 700; background: var(--papel); position: sticky; top: 0; }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla th small { display: block; font-weight: 400; font-size: .74rem; }
.tabla-partidos .tp-votos { display: none; }
@media (max-width: 600px) {   /* en el móvil caben las cinco columnas: los votos van debajo del porcentaje (repaso de 11/2026) */
  .tabla { font-size: .84rem; }
  .tabla th, .tabla td { padding: 7px 8px; }
  .tabla-partidos th:nth-child(4), .tabla-partidos td:nth-child(4) { display: none; }
  .tabla-partidos .tp-votos { display: block; font-size: .72rem; font-weight: 400; color: var(--tenue); }
}
.tabla-compacta th, .tabla-compacta td { padding: 6px 10px; font-size: .82rem; }
.tabla-mesas { max-height: 460px; overflow: auto; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: 0; }
.sw-blanco { background: var(--vacio); border: 1px solid var(--linea); }
.sube { color: var(--si); }
.baja { color: #c0392b; }
:root[data-theme="dark"] .baja { color: #ff8a7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .baja { color: #ff8a7a; } }
.fila-menor th, .fila-menor td { color: var(--tenue); font-weight: 400; }
.celda-barra { min-width: 180px; }
.barra { display: flex; height: 12px; border-radius: 2px; overflow: hidden; background: var(--vacio); }
.esc-txt { display: block; margin-top: 4px; font-size: .74rem; }
.ult { font-size: .85rem; }

/* Último escaño */
.ajustadas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }
.ajustadas li { background: var(--hoja); padding: 12px 14px; display: grid; grid-template-columns: 9rem 1fr auto; gap: 4px 14px; align-items: baseline; }
@media (max-width: 640px) { .ajustadas li { grid-template-columns: 1fr; } }
.aj-prov { font-family: var(--f-disp); font-weight: 700; font-size: .95rem; }
.aj-rel { font-family: var(--f-num); font-size: .78rem; color: var(--tenue); }

/* Municipio */
.campos { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.campo { display: grid; gap: 4px; flex: 1 1 260px; min-width: 0; }
.campo > span { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); font-weight: 700; }
select, input[type="search"] { font: inherit; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--linea); background: var(--hoja); color: var(--tinta); width: 100%; }
.nota-muestra, .nota { font-size: .82rem; color: var(--tenue); flex-basis: 100%; }
.campo-ancho { flex-basis: 100%; }
.campo-ancho input { font: inherit; font-size: 1.05rem; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--hoja); color: var(--tinta); width: 100%; }
.tu-mesa-sel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
@media (max-width: 560px) { .tu-mesa-sel { grid-template-columns: minmax(0, 1fr); } }
.tu-mesa-sel + .nota { margin-bottom: 14px; }
.tu-mesa-sel + .nota a { color: inherit; }
.tu-mesa { background: var(--hoja); border: 2px solid var(--laton); border-top: 10px solid var(--amarillo); border-radius: 14px; padding: 16px 18px; display: grid; gap: 8px; margin-bottom: 14px; }
.tu-mesa h4 { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--laton); }
.tm-k { font-family: var(--f-mano); font-weight: 700; font-size: 1.05rem; }
.tm-s { color: var(--tenue); font-size: .9rem; }
.tu-mesa .origen li { grid-template-columns: 6.5rem minmax(0, 1fr) 9.5rem; }
.fila-tuya th, .fila-tuya td { background: var(--laton-suave); font-weight: 700; }
.mun-cab { margin-block: 16px 10px; }
.mun-t { font-size: 1.5rem; }
.mun-s { color: var(--tenue); font-size: .9rem; }
.mun-partidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mp { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 2px; }
.mp-n { font-weight: 700; font-size: .85rem; }
.mp-v { font-family: var(--f-num); font-size: 1.15rem; font-weight: 600; }
.mp-p { font-family: var(--f-num); font-size: .78rem; color: var(--tenue); }
.mp-bar { height: 4px; background: var(--vacio); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.mp-bar span { display: block; height: 100%; }
/* «Tu mesa»: la tarjeta de la provincia, a dos tercios del ancho (Ignacio, 10/11/2026), y su explicación al lado */
.mun-prov { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px 20px; align-items: start; margin-bottom: 16px; }
.mun-prov .prov-puntos i { width: 16px; height: 16px; }
.mun-prov .prov-nombres { font-size: .9rem; }
.mun-prov-t h4 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 900; }
.mun-prov-t p { margin: 0 0 6px; font-size: .88rem; line-height: 1.5; color: var(--tenue); }
.mun-prov-t a { font-weight: 700; }
@media (max-width: 720px) { .mun-prov { grid-template-columns: minmax(0, 1fr); } }
.mun-pesa { margin: 0 0 10px; padding: 10px 12px; background: var(--laton-suave); border-radius: var(--r); font-size: .95rem; line-height: 1.45; color: var(--tinta); }
.mun-aviso { margin: -6px 0 10px; font-size: .85rem; color: var(--tenue); }
.mun-aviso:empty { display: none; }
/* Tarjeta de provincia: quién ocuparía cada escaño (BOE), el último con nombre y el margen (11/2026) */
.prov-nombres { font-size: .84rem; border-top: 1px solid var(--linea); padding-top: 6px; }
.prov-nombres summary { cursor: pointer; font-weight: 700; color: var(--laton); }
.prov-nombres ul { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 4px; line-height: 1.4; }
.prov-nombres .nota { margin: 2px 0 0; font-size: .74rem; }
.pn-sin { color: var(--tenue); font-style: italic; }
.pn-nom { white-space: normal; }
.pn-nom small { color: var(--tenue); font-family: var(--f-num); }
.pn-sep { color: var(--laton); font-weight: 700; }
.prov-ult-n { margin: -2px 0 0; font-size: .82rem; line-height: 1.45; color: var(--tenue); }
.prov-ult-n b { color: var(--tinta); }
.prov-margen { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--tenue); }
.prov-margen b { color: var(--tinta); font-family: var(--f-num); }
.prov-foco { outline: 3px solid var(--amarillo); outline-offset: 2px; }
/* ¿Dónde se decide el último escaño? Mapa de las provincias (11/2026) */
.mapa { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px 24px; align-items: start; }
.mapa-svg { width: 100%; height: auto; display: block; }
.mapa-svg path, .mapa-svg circle { stroke: var(--hoja); stroke-width: .8; transition: opacity .15s; }
.mapa-svg a:hover path, .mapa-svg a:hover circle, .mapa-svg a:focus path, .mapa-svg a:focus circle { stroke: var(--tinta); stroke-width: 1.6; }
.mapa-svg .mapa-canarias { fill: none; stroke: var(--linea); stroke-width: 1; }
.mapa-ley { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; font-size: .78rem; color: var(--tenue); }
.mapa-ley span { display: inline-flex; align-items: center; gap: 4px; }
.mapa-ley i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.mapa-t { margin: 0 0 6px; font-weight: 900; }
.mapa-top { margin: 0 0 10px; padding-left: 1.4em; display: grid; gap: 3px; font-size: .9rem; }
.mapa-top b { font-family: var(--f-num); }
.mapa-top small { color: var(--tenue); }
@media (max-width: 720px) { .mapa { grid-template-columns: minmax(0, 1fr); } }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.btn { font: inherit; font-weight: 700; font-size: .9rem; border: 2px solid var(--laton); background: transparent; color: var(--laton); border-radius: 999px; padding: 8px 16px; cursor: pointer; min-height: 40px; }
.btn-fuerte { background: var(--laton); color: var(--sobre-azul); }
.btn-amarillo { background: var(--amarillo); color: #000; border-color: #000; }
.campo-rango { margin-bottom: 12px; }
.campo-rango > span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .85rem; }
input[type="range"] { width: 100%; accent-color: var(--laton); }

/* Tus propias cifras */
.pro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 820px) { .pro { grid-template-columns: minmax(0, 1fr); } }
.pro-bloque { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.deslizador { display: grid; grid-template-columns: 7.5rem 1fr 4.8rem; gap: 10px; align-items: center; font-size: .85rem; }
.dz-ccaa { grid-template-columns: 9.5rem 1fr 3.6rem; font-size: .8rem; }
.dz-n { min-width: 0; overflow-wrap: anywhere; }
output { text-align: right; font-size: .8rem; }
.check { display: flex; gap: 8px; align-items: center; font-size: .88rem; }
.pro-bloque .btn { justify-self: start; }

/* Informe */
.informe { position: fixed; inset: 0; background: color-mix(in srgb, var(--tinta) 55%, transparent); z-index: 20; overflow-y: auto; padding: 24px 16px; }
.inf-hoja { max-width: 760px; margin: 0 auto; background: var(--hoja); color: var(--tinta); border-radius: var(--r); padding: 28px; display: grid; gap: 12px; position: relative; }
.inf-hoja h2 { font-size: 1.5rem; padding-right: 90px; }
.inf-eyebrow { font-family: var(--f-num); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--laton); }
.inf-cerrar { position: absolute; top: 18px; right: 18px; }
@media (max-width: 560px) { .informe { padding: 12px 8px; } .inf-hoja { padding: 18px 14px; } .inf-cerrar { top: 12px; right: 12px; } }
.inf-lista { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .9rem; }
.ir-hoja { max-width: 860px; margin: 4vh auto 0; background: var(--hoja); color: var(--tinta); border-radius: 18px; border-top: 10px solid var(--amarillo); padding: 24px; display: grid; gap: 12px; position: relative; }
.ir-hoja h2 { padding-right: 90px; }
.ir-hoja img { width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 8px; display: block; }
.ir-cerrar { position: absolute; top: 18px; right: 18px; }
.inf-pie { font-size: .78rem; color: var(--tenue); border-top: 1px solid var(--linea); padding-top: 10px; }

/* Avisos y pie */
.veda { margin-top: 12px; background: var(--laton-suave); border-left: 4px solid var(--laton); padding: 10px 14px; border-radius: 4px; font-size: .9rem; }
/* El pie: una sola línea de enlaces (09/10/2026) */
.pie { margin-top: 44px; border-top: 2px solid var(--laton); padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: .86rem; color: var(--tenue); }
.pie img { height: 22px; width: auto; margin-right: -10px; }
.aviso-muestra { font-size: .82rem; color: var(--no); margin-top: 6px; }
.enlace-veda { font: inherit; background: none; border: 0; color: var(--laton); text-decoration: underline; cursor: pointer; padding: 0; }
@media (prefers-reduced-motion: no-preference) { .medidor-barra .lado span { transition: flex-grow .5s ease; } }

.chip:disabled { opacity: .45; cursor: not-allowed; }
.sondeo-ficha { font-size: .8rem; color: var(--tenue); margin-top: 8px; line-height: 1.45; }
.sondeo-ficha a { color: inherit; }
.sondeo-ficha p { margin: 0; }
.ficha { margin-top: 6px; }
.ficha summary { cursor: pointer; font-weight: 700; color: var(--laton); }
.ficha dl { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 3px 12px; margin: 8px 0 0; }
.ficha dt { color: var(--tenue); }
.ficha dd { margin: 0; color: var(--tinta); }
@media (max-width: 560px) { .ficha dl { grid-template-columns: minmax(0, 1fr); } .ficha dd { margin-bottom: 6px; } }
.pie a { color: inherit; }

/* ¿Qué pasaría si…? */
.qp-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.qp-intro { color: var(--tenue); }
.qp-cuenta { font-size: .85rem; font-weight: 700; }
.qp-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; align-items: start; }
.qp-card { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; border-top: 4px solid var(--linea); }
.qp-card[data-activa="true"] { border-top-color: var(--laton); }
.qp-cab { display: flex; gap: 10px; align-items: baseline; }
.qp-num { font-family: var(--f-num); font-weight: 600; color: var(--laton); font-size: .9rem; }
.qp-cab h3 { font-size: 1rem; line-height: 1.25; }
.qp-exp { font-size: .86rem; color: var(--tenue); }
.qp-card .chips { flex-wrap: wrap; overflow: visible; }
.qp-card .chip { white-space: normal; text-align: left; border-radius: 14px; padding: 6px 12px; }
.qp-pro { display: grid; gap: 8px; border-top: 1px dashed var(--linea); padding-top: 10px; }
.qp-pro .btn { justify-self: start; }
.qp-dz { grid-template-columns: 7rem 1fr 4.4rem; }
.enlace-sec { font: inherit; font-weight: 700; background: none; border: 0; padding: 0; color: var(--laton); text-decoration: underline; cursor: pointer; }
.qp-efecto { background: var(--papel); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 6px; font-size: .86rem; }
.qp-efecto.qp-cargando { opacity: .55; }
.qp-ef-t { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); font-weight: 700; }
.qp-vacio { color: var(--tenue); font-size: .85rem; }
.qp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.qp-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto 3rem; gap: 8px; align-items: baseline; }
.qp-lista li .num:last-of-type { text-align: right; }
.qp-bloques { border-top: 1px solid var(--linea); padding-top: 6px; }
.qp-p { min-width: 0; overflow-wrap: anywhere; }
.qp-igual { color: var(--tenue); display: block !important; }
.qp-cruza { font-weight: 700; }
.qp-aviso { grid-column: 1 / -1; font-size: .74rem; color: var(--si); font-weight: 700; }
.qp-voto { font-size: .78rem; color: var(--tenue); }
.qp-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qp-filas li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .86rem; }
.qp-nuevo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.qp-nuevo select { padding: 6px 8px; }
.qp-checks { border: 1px solid var(--linea); border-radius: var(--r); padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; margin: 0; }
.qp-checks legend { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); font-weight: 700; padding-inline: 4px; }
.qp-mas summary { cursor: pointer; font-size: .82rem; font-weight: 700; }
.qp-mas .nota { margin-top: 6px; }
.btn-mini { padding: 3px 10px; font-size: .78rem; }
.qp-rango { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.qp-rango li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 4.6rem; gap: 8px; align-items: center; }
.qp-rango .num { text-align: right; }
.rango { position: relative; height: 10px; background: var(--vacio); border-radius: 2px; }
.rango span { position: absolute; top: 0; bottom: 0; border-radius: 2px; opacity: .85; }
.rango i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta); margin-left: -1px; }
.qp-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin-top: 18px; padding: 10px 14px; background: var(--laton-suave); border-left: 4px solid var(--laton); border-radius: 4px; }
.qp-banner-t { font-family: var(--f-disp); font-weight: 700; font-size: .85rem; grid-column: 1; }
.qp-banner .btn-mini { grid-column: 2; grid-row: 1 / span 3; }
.qp-tags { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1; }
.qp-tag { font-size: .8rem; background: var(--hoja); border: 1px solid var(--linea); border-radius: 999px; padding: 2px 10px 2px 3px; display: inline-flex; gap: 6px; align-items: center; }
.qp-tag b { font-family: var(--f-num); background: var(--laton); color: var(--hoja); border-radius: 999px; min-width: 1.4em; height: 1.4em; display: inline-grid; place-items: center; font-size: .72rem; }
.qp-banner-s { font-size: .8rem; color: var(--tenue); grid-column: 1; }
@media (max-width: 560px) { .qp-banner { grid-template-columns: minmax(0, 1fr); } .qp-banner .btn-mini { grid-column: 1; grid-row: auto; justify-self: start; } }
.qp-bloques .qp-p { white-space: normal; }
/* Los 20 escenarios */
.esc-intro { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.esc-intro .mano { font-family: var(--f-mano); font-weight: 700; font-size: 1.25rem; }
.esc-rejilla { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px; }
/* En el móvil, los 20 en un carrusel que se desliza con el dedo */
@media (max-width: 640px) {
  .esc-rejilla { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: 10px;
    margin-inline: calc(-1 * var(--margen)); padding: 4px var(--margen) 14px; scroll-padding-inline: var(--margen); scrollbar-width: none; }
  .esc-rejilla::-webkit-scrollbar { display: none; }
  .esc-btn { flex: 0 0 68%; scroll-snap-align: start; min-height: 112px; }
}
.esc-btn { font: inherit; text-align: left; background: var(--hoja); color: var(--tinta); border: 2px solid var(--linea); border-radius: 14px; padding: 12px 14px 14px; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-content: start; cursor: pointer; min-height: 96px; }
.esc-btn:hover { border-color: var(--laton); }
.esc-btn:focus-visible { outline: 3px solid var(--laton); outline-offset: 2px; }
.esc-n { font-family: var(--f-num); font-weight: 900; color: var(--laton); font-size: .95rem; }
.esc-g { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); font-weight: 700; align-self: center; }
.esc-t { grid-column: 1 / -1; font-weight: 700; font-size: .95rem; line-height: 1.25; margin-top: 4px; }
.esc-btn[aria-pressed="true"] { background: var(--laton); border-color: var(--laton); color: var(--sobre-azul); box-shadow: 0 6px 0 var(--amarillo); }
.esc-btn[aria-pressed="true"] .esc-n { color: var(--amarillo); }
.esc-btn[aria-pressed="true"] .esc-g { color: inherit; opacity: .8; }
@media (prefers-reduced-motion: no-preference) { .esc-btn { transition: transform .15s ease, border-color .15s ease; } .esc-btn:hover { transform: translateY(-2px); } }
.escena { scroll-margin-top: var(--alto-fija); margin-top: 18px; background: var(--hoja); border: 1px solid var(--linea); border-top: 12px solid var(--amarillo); border-radius: 18px; padding: clamp(18px, 3vw, 30px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.escena-vacia { border-style: dashed; border-top: 1px dashed var(--linea); color: var(--tenue); text-align: center; padding: 26px; }
.escena-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.escena-nav > span { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 560px) { .escena-kicker { font-size: 1rem; } .escena-nav .btn-mini { padding: 3px 8px; } }
.escena-kicker { font-family: var(--f-mano); font-weight: 700; font-size: 1.15rem; }
.escena h3 { font-size: clamp(1.5rem, 3.8vw, 2.4rem); font-weight: 900; color: var(--laton); line-height: 1.08; }
.escena-sobre { font-size: .82rem; color: var(--tenue); }
.escena-titular { font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 700; line-height: 1.3; }
.escena-titular span { display: block; font-weight: 500; color: var(--tenue); margin-top: 4px; font-size: .9em; }
.escena-cuerpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 820px) { .escena-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.escena-bloques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.eblq { background: var(--papel); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.eblq-si { background: var(--amarillo); color: #000; }
.eblq-n { font-size: .72rem; line-height: 1.2; }
.eblq-v { font-family: var(--f-num); font-size: 1.2rem; }
.eblq-v s { color: var(--tenue); font-size: .8em; }
.eblq-si .eblq-v s { color: #4d4d4d; }
.escena-cambios h4 { margin: 0 0 8px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.eb { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.eb li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2.6rem 4.6rem; gap: 8px; align-items: center; font-size: .88rem; }
.eb-n { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.eb-barra { position: relative; height: 16px; background: linear-gradient(var(--linea), var(--linea)) center / 2px 100% no-repeat; }
.eb-mas, .eb-menos { position: absolute; top: 0; bottom: 0; }
.eb-mas { left: 50%; border-radius: 0 4px 4px 0; transform-origin: left; }
.eb-menos { right: 50%; border-radius: 4px 0 0 4px; opacity: .5; transform-origin: right; }
@media (prefers-reduced-motion: no-preference) { .eb-mas, .eb-menos { animation: crece .7s cubic-bezier(.2, .8, .2, 1) both .25s; } }
@keyframes crece { from { transform: scaleX(0); } }
.escena.quieta .eb-mas, .escena.quieta .eb-menos { animation: none; }
.eb-d { font-family: var(--f-num); font-weight: 900; text-align: right; }
.eb-v { font-family: var(--f-num); font-size: .78rem; color: var(--tenue); text-align: right; white-space: nowrap; }
.eb-igual { display: block !important; color: var(--tenue); }
.eb-quieto .eb-n { font-weight: 500; color: var(--tenue); }
.eb-quieto .eb-d { color: var(--tenue); font-weight: 700; }
@media (max-width: 560px) { .escena-bloques { grid-template-columns: minmax(0, 1fr); } .eblq { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .eblq-n { font-size: .8rem; } }
@media (max-width: 560px) { .eb li { grid-template-columns: 5.2rem minmax(0, 1fr) 2.2rem 3.9rem; gap: 6px; } .eb-v { font-size: .74rem; } }
.escena-supuestos summary { cursor: pointer; font-weight: 700; color: var(--laton); }
.escena-supuestos p { margin-top: 8px; font-size: .92rem; }
.escena-supuestos .nota a { color: inherit; }
.escena-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.escena-juego { margin-left: auto; font-weight: 900; color: #000; background: var(--amarillo); border: 2px solid #000; border-radius: 999px; padding: 7px 14px; text-decoration: none; box-shadow: 0 3px 0 #000; }
.escena-juego:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
@media (max-width: 560px) { .escena-juego { margin-left: 0; } }
.escena-msg { min-height: 1.3em; font-size: .86rem; font-weight: 700; color: var(--laton); }
.esc-banner { border-left-color: var(--amarillo); }
.esc-propon { margin-top: 14px; font-size: 1rem; }
.esc-propon a { color: var(--laton); font-weight: 700; }
.esc-var { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.esc-var .chips { flex-wrap: wrap; overflow: visible; }
.region { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; border-top: 1px solid var(--linea); padding-top: 14px; }
@media (max-width: 820px) { .region { grid-template-columns: minmax(0, 1fr); } }
.region h4 { margin: 0 0 8px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.region .tabla td { font-size: .82rem; }
.origen { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.origen li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 5.5rem; gap: 8px; align-items: center; font-size: .88rem; }
.origen .num { text-align: right; font-family: var(--f-num); }
.origen-barra { height: 12px; background: var(--vacio); border-radius: 3px; overflow: hidden; }
.origen-barra span { display: block; height: 100%; }

/* Propón tu escenario */
.propon { background: var(--amarillo); color: #000; border-radius: 18px; padding: clamp(20px, 3.4vw, 34px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 26px; align-items: start; }
@media (max-width: 820px) { .propon { grid-template-columns: minmax(0, 1fr); } }
.propon h2 { color: #003399; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.propon .mano { font-family: var(--f-mano); font-weight: 700; font-size: 1.3rem; margin-top: 6px; }
.propon-txt p + p { margin-top: 10px; }
.propon-form { display: grid; gap: 12px; }
.propon-form label > span { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.propon-form textarea, .propon-form input[type="text"], .propon-form input[type="email"] { font: inherit; width: 100%; padding: 10px 14px; border-radius: 14px; border: 2px solid #000; background: #fff; color: #000; }
.propon-form textarea { min-height: 130px; resize: vertical; }
.propon-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 560px) { .propon-dos { grid-template-columns: minmax(0, 1fr); } }
.propon-form .check { align-items: flex-start; font-size: .85rem; }
.propon-form .check > span { display: inline; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .85rem; margin: 0; }
.propon-form .check input { margin-top: 4px; }
.propon-form a { color: #003399; }
.propon-form .btn { justify-self: start; background: #003399; border-color: #003399; color: #fff; }
.propon-msg { min-height: 1.3em; font-weight: 700; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qp-prob { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 3px; font-size: .84rem; }

/* Aviso de cookies (solo con Google Analytics configurado) */
.cookies { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: 760px; margin: 0 auto; background: var(--hoja); color: var(--tinta); border: 2px solid var(--laton); border-top: 8px solid var(--amarillo); border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); font-size: .9rem; }
.cookies a { color: var(--laton); }
.cookies-botones { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .cookies { grid-template-columns: minmax(0, 1fr); } }
.enlace-pie { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }
.solo-medicion { display: none; }
[data-medicion="si"] .solo-medicion { display: inline; }

/* Compartir en redes, bajo cada escenario */
.redes { display: flex; flex-wrap: wrap; gap: 6px; }
.red { font-size: .82rem; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--linea); color: var(--tinta); background: var(--papel); }
.red:hover, .red:focus-visible { border-color: var(--laton); color: var(--laton); }

/* Páginas de provincia y municipio (buscadores) */
.marca .marca-h { margin: 0; }
.marca .marca-h a { color: inherit; text-decoration: none; display: flex; flex-wrap: wrap; align-items: center; gap: .1em .32em; }
.migas { font-size: .82rem; color: var(--tenue); padding-block: 14px 0; }
.migas a { color: var(--laton); }
.seo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 18px 10px; }
.seo h1 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); font-weight: 900; color: var(--tinta); line-height: 1.1; }
.seo h2 { margin-top: 18px; }
.seo-lead { font-size: 1.08rem; }
.seo-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }
@media (max-width: 760px) { .seo-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.btn-grande { display: inline-flex; padding: 12px 22px; font-size: 1rem; text-decoration: none; }
.seo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.seo a { color: var(--laton); }
.seo a.btn-fuerte { color: var(--sobre-azul); text-decoration: none; }   /* si no, el botón azul lleva el texto azul */
.seo-lista-larga { columns: 3 14rem; display: block; }
.seo-lista-larga li { break-inside: avoid; margin-bottom: 4px; }
/* Páginas de candidatos por provincia (BOE, 11/2026) */
.seo-cand { margin: 2px 0 8px; padding-left: 1.6em; columns: 2 17rem; column-gap: 2rem; }
.seo-cand li { break-inside: avoid; margin-bottom: 2px; }
.seo-cand small { color: var(--tenue); }
.seo-circ { margin-top: 18px; color: var(--laton); }
/* Páginas ligeras con la estructura de la web (petición de Ignacio, 11/2026): las mismas pestañas arriba, la provincia en
   tarjetas y una tarjeta abierta por lista de candidatos. En las listas del Congreso, comun/listas.js sombrea a quien
   saldría elegido con la media de las encuestas, traza la línea de corte y marca el último escaño y quién lo ganaría. */
.pestanas-ligera { margin-top: 4px; border-bottom: 1px solid var(--linea); }
.campo-combo input { text-overflow: ellipsis; }   /* «Todos (11) · escribe el nombre o el núm…» en el móvil */
.pv-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.seo a.btn { display: inline-flex; align-items: center; max-width: 100%; text-decoration: none; }   /* un botón que no cabe en una línea sigue siendo un botón */
.pv-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; align-items: start; }
.pv-tarjeta { background: var(--hoja); border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.seo .pv-tarjeta h2 { margin: 0; }
.pv-tarjeta .nota, .pv-tarjeta p { margin: 0; }
.pv-barras { display: grid; gap: 9px; }
.pv-barra { display: grid; grid-template-columns: minmax(4.5rem, 6.5rem) minmax(0, 1fr) minmax(4.6rem, auto); gap: 10px; align-items: center; font-size: .92rem; }
.pv-barra > span { height: 14px; border-radius: 7px; background: var(--vacio); overflow: hidden; }
.pv-barra > span i { display: block; height: 100%; background: var(--c); border-radius: 7px; }
.pv-barra em { font-style: normal; font-weight: 700; text-align: right; font-family: var(--f-num); }
.pv-barra em small { display: block; font-size: .74rem; font-weight: 400; color: var(--tenue); }
.pv-cabezas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 11px max-content minmax(0, 1fr); gap: 6px 8px; align-items: baseline; font-size: .92rem; }
.pv-cabezas li { display: contents; }   /* una tabla: siglas y nombres alineados en columna */
@media (max-width: 560px) { .pv-cabezas { grid-template-columns: 11px minmax(0, 1fr); row-gap: 2px; } .pv-cabezas b { margin-top: 6px; overflow-wrap: anywhere; } .pv-cabezas span { grid-column: 2; } }
.pv-cabezas i, .lc-indice i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); display: inline-block; flex: 0 0 auto; }
.pv-mun summary { cursor: pointer; color: var(--laton); }
.pv-mun summary h2 { display: inline; margin: 0; }
.lc-resumen { margin: 0; font-size: 1.08rem; }
.lc-resumen b { font-family: var(--f-num); }
.lc-indice { display: flex; flex-wrap: wrap; gap: 6px; }
.seo .lc-indice a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; color: var(--laton); text-decoration: none; border: 2px solid var(--linea); border-radius: 999px; padding: 4px 12px; }
.seo .lc-indice a:hover { border-color: var(--laton); }
.lc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: start; }
.lc { background: var(--hoja); border: 1px solid var(--linea); border-top: 6px solid var(--c); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; min-width: 0; scroll-margin-top: 16px; }
.lc-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.seo .lc-cab h3 { margin: 0; font-size: 1.1rem; font-weight: 900; color: var(--tinta); overflow-wrap: anywhere; }
.lc-voto { font-size: .84rem; color: var(--tenue); white-space: nowrap; }
.lc-voto b { color: var(--tinta); font-size: 1rem; }
.lc-nombre { margin: 0; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; color: var(--tenue); }
.lc details { border-top: 1px solid var(--linea); padding-top: 6px; font-size: .92rem; }
.lc summary { cursor: pointer; font-weight: 700; font-size: .84rem; color: var(--laton); }
.lc-ol { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 1px; }
.lc-ol li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); column-gap: 6px; row-gap: 2px; align-items: baseline; padding: 3px 6px; border-radius: 6px; line-height: 1.35; }
.lc-ol .n { text-align: right; font-size: .8rem; color: var(--tenue); }
.lc-ol li.sale { background: color-mix(in srgb, var(--c) 16%, transparent); font-weight: 700; }
.lc-ol li.fuera { color: var(--tenue); }
.lc-ol li.lc-corte { display: block; margin: 4px 0; padding: 2px 0 0; border-top: 2px dashed var(--c); border-radius: 0; font-size: .74rem; font-weight: 700; color: var(--tenue); }
.lc-tag { grid-column: 2; justify-self: start; font-size: .72rem; font-weight: 700; line-height: 1.5; border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.lc-ult { background: var(--amarillo); color: #000; }
.lc-luego { border: 1.5px solid currentColor; color: var(--tinta); }
.lc-sin { grid-column: 1 / -1; margin: 6px 0 0; font-size: .9rem; color: var(--tenue); }
.lc-sup { margin: 4px 0 0; font-size: .76rem; color: var(--tenue); }
.lc-fuente { margin-top: 18px; }
/* Buscador de candidatos «¿Saldría elegido?» (comun/buscador.js; 11/2026): en la pestaña Congreso y en /buscar-candidato/ */
.bc { display: grid; gap: 8px; min-width: 0; }
.bc-etq { font-weight: 700; font-size: .9rem; }
.bc-q { font: inherit; font-size: 1.05rem; width: 100%; max-width: 640px; padding: 12px 16px; border: 2px solid var(--linea); border-radius: 12px; background: var(--hoja); color: var(--tinta); }
.bc-q:focus { outline: 3px solid var(--amarillo); outline-offset: 1px; border-color: var(--laton); }
.bc-ayuda { margin: 0; min-height: 1.3em; font-size: .86rem; color: var(--tenue); }
.bc-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bc-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 10px 14px; background: var(--hoja); border: 1px solid var(--linea); border-left: 6px solid var(--c); border-radius: 12px; }
.bc-txt { display: grid; min-width: 0; }
.bc-txt b { font-size: 1rem; overflow-wrap: anywhere; }
.bc-txt span { font-size: .84rem; color: var(--tenue); }
.bc-txt mark { background: var(--amarillo); color: #000; border-radius: 3px; }
.bc-est { justify-self: start; font-size: .78rem; font-weight: 700; line-height: 1.6; border-radius: 999px; padding: 0 10px; white-space: nowrap; }
.bc-si { background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--tinta); }
.bc-ult { background: var(--amarillo); color: #000; }
.bc-casi { border: 1.5px solid currentColor; color: var(--tinta); }
.bc-no { background: var(--vacio); color: var(--tenue); }
.bc-neutro { border: 1px dashed var(--linea); color: var(--tenue); }
.bc-ver { font-size: .84rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) { .bc-r { grid-template-columns: minmax(0, 1fr) auto; } .bc-est { grid-column: 1; max-width: 100%; white-space: normal; border-radius: 10px; } .bc-ver { grid-column: 2; grid-row: 1 / span 2; } }
.lc-ol li.lc-yo { outline: 3px solid var(--amarillo); outline-offset: 1px; }
/* Página /novedades/: dos columnas en pantallas anchas (encuestas | lo nuevo de la web y las fechas oficiales) */
.nov-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 8px 56px; align-items: start; }
.nov-cols h2 { margin: 18px 0 10px; }
.nov-mas { margin-top: 12px; }
.nov-lista { list-style: none; margin: 0; padding: 0; }
.nov-lista li { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 3px 16px; align-items: baseline; padding-block: 12px; border-top: 1px solid var(--linea); }
.nov-acc, .nov-fuente { grid-column: 2; }   /* los enlaces y la fuente, debajo del texto */
.nov-lista li:last-child { border-bottom: 1px solid var(--linea); }
.nov-f { font-size: .86rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.nov-nuevo { justify-self: start; background: var(--amarillo); color: #000; font-weight: 900; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; }
.nov-t { font-weight: 700; }
.seo a.nov-t { color: var(--tinta); text-decoration-color: var(--linea); text-underline-offset: 3px; }
.seo a.nov-t:hover { color: var(--laton); }
.nov-acc { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; white-space: nowrap; }
.nov-fuente { font-size: .86rem; color: var(--tenue); }
@media (max-width: 640px) {
  .nov-lista li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .nov-acc, .nov-fuente { grid-column: 1; }
  .nov-acc { white-space: normal; }
}
/* Guías (mesa_guias.py): calendario, cómo votar y cómo se reparten los escaños */
.seo-indice { display: flex; flex-wrap: wrap; gap: 6px; }
.seo-indice a, .seo-guias a { font-weight: 700; font-size: .9rem; color: var(--laton); text-decoration: none; border: 2px solid var(--linea); border-radius: 999px; padding: 6px 14px; }
.seo-indice a:hover, .seo-guias a:hover { border-color: var(--laton); }
.seo-guias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--linea); }
.seo-pasos { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.seo-pasos li::marker { color: var(--laton); font-weight: 700; }
.seo-fuentes { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: .92rem; }
.seo h2[id] { scroll-margin-top: 16px; }
.cal-anadir { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-anadir .btn { text-decoration: none; display: inline-flex; align-items: center; }
.cal { list-style: none; margin: 0; padding: 0; }
.cal-f { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 3px 20px; padding: 12px 10px; border-top: 1px solid var(--linea); align-items: baseline; }
.cal-f:last-child { border-bottom: 1px solid var(--linea); }
.cal-cuando { font-weight: 700; color: var(--laton); }
.cal-cuando::first-letter { text-transform: uppercase; }
.cal-que { font-size: 1rem; }
.cal-quien { display: inline-block; font-size: .7rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); border: 1px solid var(--linea); border-radius: 4px; padding: 1px 6px; margin-right: 4px; vertical-align: 1px; }
.cal-fuente { grid-column: 2; font-size: .84rem; color: var(--tenue); }
.cal-fuente a { color: var(--tenue); }
.cal-pasado { opacity: .55; }
.cal-hoy { background: var(--laton-suave); border-left: 4px solid var(--amarillo); }
.cal-hoy .cal-cuando::after { content: " · hoy"; color: var(--tinta); }
:lang(en) .cal-hoy .cal-cuando::after { content: " · today"; }
:lang(fr) .cal-hoy .cal-cuando::after { content: " · aujourd’hui"; }
:lang(de) .cal-hoy .cal-cuando::after { content: " · heute"; }
:lang(it) .cal-hoy .cal-cuando::after { content: " · oggi"; }
@media (max-width: 640px) {
  .cal-f { grid-template-columns: minmax(0, 1fr); }
  .cal-fuente { grid-column: 1; }
}
.seo > ul.esc-prov { max-width: none; }
.esc-prov { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 6px; }
.esc-prov li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 8px 12px; background: var(--hoja); border: 1px solid var(--linea); border-radius: 8px; }
.esc-prov span { flex: 1; min-width: 0; }
.esc-prov b { font-size: 1.15rem; color: var(--laton); font-variant-numeric: tabular-nums; }
.esc-prov small { flex-basis: 100%; font-weight: 700; color: var(--tinta); }
.tabla-dh caption { caption-side: bottom; text-align: left; font-size: .82rem; color: var(--tenue); padding-top: 6px; }
.tabla-dh td.dh-si { background: var(--amarillo); color: #000; font-weight: 700; }
/* «Cómo funciona»: tarjetas de las guías */
.guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.guia { display: grid; gap: 4px; padding: 14px 16px; border: 2px solid var(--linea); border-radius: 12px; background: var(--hoja); color: var(--tinta); text-decoration: none; }
.guia b { color: var(--laton); font-size: 1.02rem; }
.guia b::after { content: " ›"; }
.guia span { font-size: .9rem; color: var(--tenue); }
.guia:hover { border-color: var(--laton); }

/* El punto de partida, en una línea que se despliega */
.ajuste { margin-top: 14px; background: var(--hoja); border: 1px solid var(--linea); border-radius: 14px; }
.ajuste > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: .88rem; color: var(--tenue); }
.ajuste > summary::-webkit-details-marker { display: none; }
.ajuste-txt b { color: var(--tinta); }
.ajuste-cambiar { flex-shrink: 0; font-weight: 700; color: var(--laton); border: 2px solid var(--laton); border-radius: 999px; padding: 3px 12px; }
.ajuste-cambiar::after { content: " ▾"; }
.ajuste[open] .ajuste-cambiar::after { content: " ▴"; }
.ajuste[open] > summary { border-bottom: 1px solid var(--linea); }
.ajuste .controles { padding: 12px 14px; }

/* «Las preguntas del 29N»: el muro de preguntas con su respuesta al momento */
.preguntas { padding-block: 34px 6px; display: grid; gap: 14px; }
.preguntas-cab h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--tinta); }
.preguntas-cab p { color: var(--tenue); margin-top: 4px; }
.muro { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
@media (max-width: 600px) { .muro { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.preg { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; border-radius: 18px; background: var(--hoja); color: var(--tinta);
  border: 2px solid var(--linea); text-decoration: none; }
a.preg:hover { border-color: var(--laton); }
@media (prefers-reduced-motion: no-preference) { a.preg { transition: transform .15s ease, border-color .15s ease; } a.preg:hover { transform: translateY(-2px); } }
.preg-q { font-weight: 900; font-size: 1.15rem; line-height: 1.15; color: var(--laton); letter-spacing: -.01em; }
.preg-a { font-weight: 800; font-size: 1.05rem; line-height: 1.3; }
.preg-d { font-size: .86rem; color: var(--tenue); line-height: 1.4; }
.preg-ir { margin-top: auto; padding-top: 4px; font-size: .86rem; font-weight: 700; color: var(--laton); }
.preg-juego { background: #003399; border-color: #003399; color: #fff; box-shadow: 0 6px 0 var(--amarillo); }
.preg-juego .preg-q { color: var(--amarillo); font-size: 1.35rem; }
.preg-juego .preg-a { font-size: 1.6rem; font-weight: 900; line-height: 1.05; }
.preg-juego .preg-d { color: #dbe3f5; }
.preg-juego .preg-ir { align-self: flex-start; background: var(--amarillo); color: #000; border: 2px solid #000; border-radius: 999px; padding: 6px 18px; font-size: 1rem; font-weight: 900; box-shadow: 0 3px 0 #000; }
.preg-pueblo { border-color: var(--laton); }
.preg-fijo { border-style: dashed; }
.entrada-campo { display: flex; gap: 8px; margin-top: 4px; }
.entrada-campo input { flex: 1; min-width: 0; font: inherit; padding: 10px 14px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--hoja); color: var(--tinta); }
.entrada-msg { font-size: .82rem; color: var(--tenue); min-height: 1.2em; }
.muro-pie { display: none; }
@media (max-width: 600px) {
  .muro:not(.abierto) > .preg:nth-child(n+7) { display: none; }
  .muro-pie { display: block; }
}
/* «Cómo lo calculamos»: en el móvil, los tres pasos con su explicación */
@media (max-width: 760px) {
  .como .pitch-pasos { grid-template-columns: minmax(0, 1fr); }
  .como .pitch-pasos li:first-child { display: grid; }
  .como .pp-d { display: block; }
  .como .pp-n { font-size: 1.6rem; }
  .como .pp-l { font-size: .95rem; font-weight: 700; }
}

/* «A fondo» */
.a-fondo { margin-top: 44px; padding: 22px 0 4px; border-top: 6px solid var(--laton); display: grid; gap: 6px; }
.a-fondo-k { font-family: var(--f-mano); font-weight: 700; font-size: 1.25rem; }
.a-fondo h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--tinta); }
.a-fondo p:last-child { color: var(--tenue); }

.solo-movil { display: none; }
@media (max-width: 640px) { .solo-movil { display: inline; } }
.seo-juego { margin-top: 30px; }
.seo-juego .escena-juego { display: inline-block; margin: 0; }
/* En modo oscuro, el logo (azul sobre transparente) va sobre una pastilla blanca */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca img { background: #fff; border-radius: 10px; padding: 4px 8px; } }
:root[data-theme="dark"] .marca img { background: #fff; border-radius: 10px; padding: 4px 8px; }
/* Cambios por provincia: cada cambio se parte entero, no a trozos */
.region td span { white-space: nowrap; }
.mas-mesas { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 10px; }
/* Las 52 circunscripciones en el móvil: cada provincia, una ficha */
@media (max-width: 640px) {
  .tabla-prov thead { display: none; }
  .tabla-prov, .tabla-prov tbody, .tabla-prov tr, .tabla-prov th, .tabla-prov td { display: block; }
  .tabla-prov tr { padding: 10px 12px; border-bottom: 1px solid var(--linea); }
  .tabla-prov tbody tr:last-child { border-bottom: 0; }
  .tabla-prov th, .tabla-prov td { padding: 2px 0; border: 0; }
  .tabla-prov .celda-barra { min-width: 0; margin-block: 4px; }
}
.mun-modelo { margin-top: 6px; font-size: .86rem; color: var(--tenue); }
.mun-modelo b { color: var(--tinta); }
.como-leer { margin-bottom: 4px; }
.esc-txt .sube, .esc-txt .baja { font-weight: 700; }
/* «Busca tu mesa por tu calle» */
.calle { background: var(--hoja); border: 2px solid var(--laton); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; margin-bottom: 14px; }
.calle-t { font-size: .95rem; }
.calle-t b { color: var(--laton); font-size: 1.05rem; margin-right: 6px; }
.calle-campos { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: 8px; align-items: end; }
.calle-campos input { width: 100%; }
@media (max-width: 560px) { .calle-campos { grid-template-columns: minmax(0, 1fr) 6rem; } .calle-campos .btn { grid-column: 1 / -1; } }
.calle-res:empty { display: none; }
.calle-res { display: grid; gap: 6px; font-size: .92rem; border-top: 1px solid var(--linea); padding-top: 8px; }
.calle-op { display: flex; flex-wrap: wrap; gap: 6px; }
.calle-op .btn-mini { text-align: left; white-space: normal; }
.tm-n { font-size: .85rem; color: var(--tenue); margin-top: -4px; }
/* CERA: los electores en el extranjero y la mesa del voto exterior de la provincia */
.acciones .chip[data-accion="cera"] { margin-right: 4px; }
.cera-nota { background: var(--laton-suave); border-left: 4px solid var(--laton); border-radius: 4px; padding: 10px 14px; margin-bottom: 10px; display: grid; gap: 4px; font-size: .9rem; }
.fila-exterior th, .fila-exterior td { background: var(--laton-suave); border-top: 2px solid var(--laton); }
.fila-exterior th small { display: block; font-weight: 400; font-size: .72rem; color: var(--tenue); }
.campo-num input { font: inherit; font-size: 1.05rem; padding: 12px 14px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--hoja); color: var(--tinta); width: 100%; }
.calle .btn-fuerte { padding-block: 12px; }
/* «¿Y si votaran más los que viven fuera?»: el voto exterior (CERA) en todo el cálculo */
.ext-ctl { padding-top: 0; }
.ext-ctl .chips { flex-wrap: wrap; overflow: visible; }
.ext-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ext-cifra { background: var(--hoja); border: 1px solid var(--linea); border-top: 4px solid var(--laton); border-radius: var(--r); padding: 10px 14px; display: grid; gap: 1px; min-width: 0; }
.ext-cifra b { font-family: var(--f-num); font-weight: 900; font-size: 1.5rem; line-height: 1.1; color: var(--laton); }
.ext-cifra span { font-weight: 700; font-size: .88rem; }
.ext-cifra small { color: var(--tenue); font-size: .76rem; }
.ext-rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ext-card { background: var(--hoja); border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; display: grid; gap: 12px; min-width: 0; }
.ext-card h3 { font-size: 1.05rem; }
.ext-impacto { border: 2px solid var(--laton); }
.ext-titular { font-size: 1.15rem; line-height: 1.3; }
.ext-titular b { color: var(--laton); }
.ext-difs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.ext-dif { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-family: var(--f-num); padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--papel); border: 1.5px solid var(--linea); }
.ext-dif i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ext-bloques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ext-bl { background: var(--papel); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; border-left: 4px solid var(--linea); }
.ext-bl-may { border-left-color: var(--si); }
.ext-bl-n { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); font-weight: 700; }
.ext-bl-v { font-family: var(--f-num); font-size: 1.05rem; color: var(--tenue); }
.ext-bl-v b { font-size: 1.7rem; font-weight: 900; color: var(--tinta); }
.ext-bl-v small { font-size: .9rem; font-weight: 800; }
.ext-bl-m { font-size: .8rem; color: var(--tenue); }
.ext-bl-may .ext-bl-m { color: var(--si); font-weight: 700; }
.ext-donde h4 { margin: 0 0 4px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.ext-donde ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; }
.ext-donde li b { margin-right: 4px; }
.ext-todos summary { cursor: pointer; font-weight: 700; color: var(--laton); font-size: .9rem; }
.ext-todos[open] summary { margin-bottom: 8px; }
.ext-ley { display: flex; gap: 14px; font-size: .78rem; color: var(--tenue); margin-top: -6px; }
.ext-ley span { display: inline-flex; align-items: center; gap: 6px; }
.ext-ley-b { width: 18px; height: 8px; border-radius: 4px; background: var(--tinta); opacity: .55; }
.ext-ley-r { width: 3px; height: 14px; border-radius: 2px; background: var(--tinta); }
.ext-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ext-barras li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 4.4rem; gap: 10px; align-items: center; font-size: .9rem; }
.ext-p { font-weight: 700; overflow-wrap: anywhere; }
.ext-b { position: relative; height: 14px; background: var(--papel); border-radius: 7px; }
.ext-b i { display: block; height: 100%; min-width: 3px; border-radius: 7px; }
.ext-b em { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--tinta); }
.ext-v { text-align: right; font-family: var(--f-num); font-weight: 800; line-height: 1.1; }
.ext-v small { display: block; font-weight: 400; font-size: .72rem; color: var(--tenue); }
.ext-tabla .ext-ahora { background: var(--laton-suave); }
.ext-tabla thead th { white-space: normal; }
.ext-tabla thead th small { display: block; font-size: .66rem; letter-spacing: .04em; color: var(--laton); }
@media (max-width: 860px) { .ext-rejilla { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .ext-cifras { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ext-cifra { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; } .ext-cifra b { grid-row: span 2; font-size: 1.3rem; } }
@media (max-width: 560px) { .ext-tabla th, .ext-tabla td { padding: 6px 7px; } .ext-tabla thead th { letter-spacing: .02em; font-size: .66rem; } .ext-barras li { grid-template-columns: 5rem minmax(0, 1fr) 4rem; gap: 8px; } .ext-card { padding: 14px; } .ext-bloques { gap: 8px; } .ext-bl-v b { font-size: 1.45rem; } }
@media (max-width: 560px) { .ext-ctl .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ext-ctl .chip { white-space: normal; border-radius: 16px; min-width: 0; text-align: left; } }

/* ------------------------------------------------------------------ Páginas, pestañas y «Estás viendo» */
.vista[hidden] { display: none; }
.seccion-primera { padding-top: 22px; }
.seccion-primera .seccion-cab { border-top: 0; padding-top: 0; }
.fija { position: sticky; top: 0; z-index: 8; margin-inline: calc(-1 * var(--margen)); padding: 0 var(--margen) 8px;
  background: color-mix(in srgb, var(--papel) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pestanas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { flex: 0 0 auto; font-weight: 700; font-size: .95rem; color: var(--laton); text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 2px solid transparent; }
.pestanas a:hover { border-color: var(--linea); }
.pestanas a[aria-current="page"] { background: var(--laton); color: var(--sobre-azul); }
.pestanas .pestana-juego { background: var(--amarillo); color: #000; border-color: #000; font-weight: 900; }
.pestanas a:focus-visible { outline: 3px solid var(--laton); outline-offset: 2px; }
.viendo { display: flex; align-items: center; gap: 10px; background: #003399; color: #fff; border-radius: 14px; padding: 6px 6px 6px 14px; }
.viendo-txt { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.viendo-k { flex: none; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #c9d5f5; }
.viendo-items { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.viendo-items::-webkit-scrollbar { display: none; }
.vi { font: inherit; flex: none; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 10px; padding: 4px 10px; display: grid; text-align: left; cursor: pointer; white-space: nowrap; line-height: 1.25; }
.vi:hover { background: rgba(255, 255, 255, .22); }
.vi-k { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: #c9d5f5; }
.vi-v { font-weight: 700; font-size: .88rem; }
.vi-x { font: inherit; flex: none; width: 28px; height: 28px; margin-left: -4px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .22); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.viendo-movil { display: none; }
.viendo-cambiar { font: inherit; flex: none; cursor: pointer; background: #ffde59; color: #000; font-weight: 900; font-size: .9rem; border: 2px solid #000; border-radius: 999px; padding: 7px 14px; }
.vi:focus-visible, .vi-x:focus-visible, .viendo-cambiar:focus-visible { outline: 3px solid #ffde59; outline-offset: 2px; }
@media (max-width: 640px) {
  :root { --alto-fija: 124px; }
  .pestanas a { font-size: .86rem; padding: 6px 10px; }
}
@media (max-width: 900px) {   /* en tableta, lo elegido en texto, como en el móvil: en fila no cabía y se cortaba (repaso de 11/2026) */
  .viendo { padding: 6px 6px 6px 12px; }
  .viendo-txt { flex-direction: column; align-items: flex-start; gap: 0; }
  .viendo-k { font-size: .62rem; }
  .viendo-items { display: none; }
  .viendo-movil { display: block; width: 100%; font: inherit; font-weight: 700; font-size: .86rem; text-align: left; color: #fff; background: none; border: 0; padding: 0; cursor: pointer;
    line-height: 1.35; }
  .viendo-movil:empty { min-height: 4.05em; }   /* tres líneas, hasta que ui.js pone el texto (ver «Sitio reservado») */
  .viendo-movil:focus-visible { outline: 3px solid #ffde59; outline-offset: 2px; }
}

/* La ficha «Lo que estás viendo» */
.hoja { position: fixed; inset: 0; z-index: 30; background: rgba(11, 18, 48, .55); display: flex; align-items: flex-end; justify-content: center; }
.hoja[hidden] { display: none; }
.hoja-panel { background: var(--hoja); color: var(--tinta); width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 22px 22px 0 0; padding: 0 18px; display: grid; gap: 14px; box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
@media (min-width: 900px) {
  .hoja { justify-content: flex-end; align-items: stretch; }
  .hoja-panel { max-width: 460px; max-height: none; height: 100%; border-radius: 0; box-shadow: -10px 0 30px rgba(0, 0, 0, .25); align-content: start; }
}
.hoja-cab { position: sticky; top: 0; z-index: 1; background: var(--hoja); display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; }
.hoja-cab h2 { font-size: 1.3rem; color: var(--tinta); }
.hoja-x { font: inherit; width: 44px; height: 44px; flex: none; font-size: 1.8rem; line-height: 1; background: none; border: 0; color: var(--tinta); cursor: pointer; border-radius: 50%; }
.hoja-x:hover { background: var(--papel); }
.hoja-panel > .nota { margin-top: -10px; }
.aj-grupo h3 { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); margin-bottom: 6px; }
.hoja .controles { padding: 0; }
.hoja .ctl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.hoja .chips { flex-wrap: wrap; overflow: visible; }
.hoja .chip { white-space: normal; text-align: left; border-radius: 14px; }
.aj-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1.5px dashed var(--linea); border-radius: 14px; padding: 10px 12px; }
.aj-t { display: grid; gap: 1px; min-width: 0; }
.aj-k { font-size: .74rem; color: var(--tenue); }
.aj-t b { font-size: .95rem; line-height: 1.25; }
.aj-acc { display: flex; gap: 6px; flex: none; }
.aj-acc .btn { text-decoration: none; display: inline-flex; align-items: center; min-height: 34px; }
.hoja-pie { position: sticky; bottom: 0; background: var(--hoja); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px;
  padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); }
.hoja-pie .btn { min-height: 48px; font-size: 1rem; }
body.con-hoja { overflow: hidden; }

/* Tu mesa: casillas en las que se escribe para buscar, y el voto exterior en una línea */
.campo-combo input { font: inherit; padding: 10px 12px; border-radius: var(--r); border: 1.5px solid var(--tenue); background: var(--hoja); color: var(--tinta); width: 100%; }
.combo-msg { min-height: 1.2em; font-weight: 700; color: var(--laton); margin-top: -2px; }
.combo-msg:empty { display: none; }
.mun-exterior { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; background: var(--hoja); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; font-size: .92rem; line-height: 1.45; }
.mun-exterior svg { flex: none; color: var(--laton); margin-top: 1px; }
.mun-exterior a { color: var(--laton); font-weight: 700; white-space: nowrap; }

/* Cómo funciona: preguntas frecuentes */
.faq { display: grid; gap: 8px; }
.faq details { background: var(--hoja); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 16px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--laton); }
.faq p { margin-top: 8px; }

/* Buscador de municipios: sugerencias propias, solo por el nombre (ui.js, autocompletar) */
.ac { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.campo > .ac { text-transform: none; letter-spacing: normal; font-size: 1rem; font-weight: 400; color: inherit; }   /* no hereda el rótulo de la casilla */
.ac > input { width: 100%; }
.ac-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 25; display: grid; padding: 4px; max-height: 320px; overflow-y: auto;
  background: var(--hoja); color: var(--tinta); border: 2px solid var(--laton); border-radius: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.ac-lista[hidden] { display: none; }
.ac-op { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left; font-size: .95rem; line-height: 1.3; }
.ac-op b { font-weight: 700; min-width: 0; }
.ac-op small { flex: none; color: var(--tenue); font-size: .8rem; }
.ac-op[aria-selected="true"], .ac-op:hover { background: var(--laton-suave); }

/* Encuestas: lista desplegable en «Lo que estás viendo» y tabla «Todas las encuestas» (09/10/2026) */
.sondeo-sel { margin-top: 10px; }
.sondeo-sel select { font: inherit; font-size: .95rem; width: 100%; padding: 9px 12px; border: 2px solid var(--laton); border-radius: 10px; background: var(--hoja); color: var(--tinta); }
.tabla-enc { min-width: 980px; }
.tabla-enc caption { caption-side: top; text-align: left; padding: 0 0 8px; }
.tabla-enc .enc-campo { white-space: nowrap; font-family: var(--f-num); font-variant-numeric: tabular-nums; color: var(--tenue); }
.tabla-enc th[scope="row"] { min-width: 10rem; }
.tabla-enc .enc-nd { color: var(--tenue); }
.tabla-enc .enc-media td, .tabla-enc .enc-media th { background: var(--laton-suave); border-bottom: 2px solid var(--laton); }
.tabla-enc .enc-media b { color: var(--tinta); }
.tabla-enc tr:not(.enc-en):not(.enc-media) .num:not(.enc-nd) { color: var(--tenue); }
.enc-si { display: inline-block; font-weight: 700; color: var(--si); }
.enc-no { display: inline-block; font-size: .78rem; color: var(--tenue); white-space: nowrap; }
.enc-enl { white-space: nowrap; }
.enc-enl a, .enc-fuera a { color: var(--laton); }
.enc-ficha { margin: 0; }
.enc-ficha summary { font-size: .8rem; }
.enc-ficha dl { grid-template-columns: 9rem minmax(14rem, 1fr); font-size: .78rem; }
.enc-h3 { font-size: 1rem; margin: 18px 0 6px; }
.enc-fuera { margin: 0; padding-left: 1.2em; font-size: .85rem; color: var(--tenue); display: grid; gap: 4px; }

/* El resultado, siempre igual (09/10/2026): panel fijo a la derecha en el ordenador; en el móvil, barra abajo que lo abre */
.con-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.cp-main { min-width: 0; }
.rp { background: var(--hoja); border: 1px solid var(--linea); border-top: 8px solid var(--amarillo); border-radius: 18px; padding: 16px 18px 18px; display: grid; gap: 10px; align-content: start; }
.rp-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rp-k { margin: 0; font-family: var(--f-mano); font-weight: 700; font-size: 1.3rem; color: var(--laton); line-height: 1.1; }
.rp-cerrar { display: none; font: inherit; font-size: 1.6rem; line-height: 1; background: none; border: 0; color: var(--tenue); cursor: pointer; padding: 2px 6px; }
.rp-activo { margin: 0; font-size: .82rem; color: var(--tenue); line-height: 1.4; }
.rp-activo b { color: var(--tinta); }
.rp-hemi svg { width: 100%; height: auto; max-height: clamp(130px, calc(100vh - var(--alto-fija) - 500px), 34vh); display: block; margin: 0 auto; }
.rp-bloques { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 1px; text-align: center; }
.rp-b { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; }
.rp-b > b { align-self: end; }
.rp-b > span { align-self: start; }
.rp-b > small { align-self: start; min-height: 1em; }
.rp-b b { font-family: var(--f-num); font-weight: 900; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.rp-b span { font-size: .72rem; color: var(--tenue); line-height: 1.2; }
.rp-b small { font-family: var(--f-num); font-weight: 700; font-size: .8rem; }
.rp-176 b { font-size: 1.05rem; color: var(--tenue); }
.rp-may b, b.rp-may { color: var(--laton); }
.rp-may span::after { content: " · mayoría"; font-weight: 700; color: var(--laton); }
.rp-socios { margin: 0; text-align: center; font-size: .8rem; color: var(--tenue); }
.rp-socios b { color: var(--tinta); font-family: var(--f-num); }
.rp-frente { margin: 4px 0 0; font-size: .8rem; font-weight: 700; color: var(--tenue); }
.rp-cambios { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.rp-cambios li { display: inline-flex; align-items: baseline; gap: 6px; font-size: .84rem; padding: 4px 9px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); }
.rp-p { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.rp-p i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rp-v { font-family: var(--f-num); color: var(--tenue); font-variant-numeric: tabular-nums; }
.rp-v b { color: var(--tinta); }
.rp-d { font-family: var(--f-num); font-weight: 900; }
.rp-nada { margin: 0; font-size: .86rem; color: var(--tenue); }
.rp-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rp-acc .btn { min-height: 34px; padding: 5px 12px; font-size: .82rem; text-decoration: none; }
.rp-barra { display: none; }
@media (min-width: 1100px) {
  .con-panel { grid-template-columns: minmax(0, 1fr) minmax(360px, 30%); }
  .rp { position: sticky; top: calc(var(--alto-fija) + 14px); max-height: calc(100vh - var(--alto-fija) - 28px); overflow: auto; margin-top: 36px; }
  @media (max-height: 720px) { .rp { position: static; max-height: none; overflow: visible; } }
  .con-panel .escena-cuerpo { display: none; }          /* en el ordenador, el hemiciclo y quién gana van en el panel */
  .rp-barra { display: none !important; }
}
@media (max-width: 1099px) {
  .rp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 86vh; overflow: auto; border-radius: 18px 18px 0 0;
        transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -12px 34px rgba(0, 0, 0, .28); padding-bottom: 24px; }
  body.rp-abierto main > .vista:not([hidden]) .rp { transform: none; }
  .rp-cerrar { display: block; }
  .rp-barra:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; gap: 10px; width: 100%;
        font: inherit; text-align: left; cursor: pointer; background: #003399; color: #fff; border: 0; border-top: 4px solid var(--amarillo);
        padding: 8px var(--margen) calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0, 0, 0, .22); }
  body:has(.rp-barra:not([hidden])) .envoltura { padding-bottom: 92px; }
  .rpb-hemi { flex: none; width: 66px; background: #fff; border-radius: 8px; padding: 3px; }
  .rpb-hemi svg { width: 100%; height: auto; display: block; }
  .rpb-t { flex: 1; min-width: 0; font-size: .86rem; line-height: 1.3; }
  .rpb-t b { font-weight: 900; color: #fff; }
  .rpb-t b.rp-may { color: var(--amarillo); }
  .rpb-t small { display: block; color: #c9d5f5; font-size: .76rem; }
  .rpb-ver { flex: none; font-weight: 900; font-size: .86rem; background: var(--amarillo); color: #000; border-radius: 999px; padding: 6px 12px; }
  @media (prefers-reduced-motion: reduce) { .rp { transition: none; } }
}

/* «Tu encuesta»: la calculadora */
.calc { display: grid; gap: 14px; }
.calc-desde { display: grid; gap: 6px; }
.calc-sel select, .calc-sel { max-width: 560px; }
.calc-sel select { font: inherit; font-size: .95rem; width: 100%; padding: 9px 12px; border: 2px solid var(--laton); border-radius: 10px; background: var(--hoja); color: var(--tinta); }
.calc-barra { display: flex; height: 34px; border-radius: 8px; overflow: hidden; background: var(--vacio); border: 1px solid var(--linea); }
.calc-barra span { display: flex; align-items: center; justify-content: center; min-width: 0; transition: flex-grow .2s ease; }
.calc-barra em { font-style: normal; font-size: .72rem; font-weight: 700; color: #fff; white-space: nowrap; padding: 0 4px; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.calc-suma { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: .95rem; }
.calc-suma b { font-family: var(--f-num); font-size: 1.15rem; }
.calc-ok { color: var(--si); font-weight: 700; font-size: .86rem; }
.calc-ayuda { margin: 0; }
.calc-msg { margin: 0; min-height: 1em; font-size: .86rem; font-weight: 700; color: var(--laton); }
.calc-msg:empty { display: none; }
.cz-grupo { background: var(--hoja); border: 1px solid var(--linea); border-radius: 14px; padding: 4px 14px 10px; }
.cz-grupo > summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; padding: 10px 0 6px; font-weight: 900; color: var(--laton); list-style-position: inside; }
.cz-grupo > summary b { font-family: var(--f-num); color: var(--tinta); }
.cz, .cz-cab { display: grid; grid-template-columns: 30px 8.6rem 34px minmax(80px, 1fr) 34px 5.6rem 3.4rem 3.2rem; gap: 8px; align-items: center; }
.cz-cab { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); font-weight: 700; padding: 2px 0 4px; border-bottom: 1px solid var(--linea); }
.cz-cab-r { grid-column: 3 / 6; text-align: center; }
.cz-cab span:nth-child(5), .cz-cab span:nth-child(6) { text-align: right; }
.calc-filas { display: grid; }
.cz { padding: 6px 0; border-bottom: 1px solid var(--linea); }
.cz:last-child { border-bottom: 0; }
.cz-fijo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--linea); background: var(--hoja); color: var(--tenue); cursor: pointer; padding: 0; }
.cz-fijo[aria-pressed="true"] { background: var(--laton); border-color: var(--laton); color: var(--sobre-azul); }
.cz-fijo.cz-sin { border-style: dashed; cursor: default; }
.cz-n { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 700; font-size: .92rem; }
.cz-n i { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.cz-b { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--laton); background: var(--hoja); color: var(--laton); font: inherit; font-weight: 900; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0; }
.cz-b:active { background: var(--laton); color: var(--sobre-azul); }
.cz-r { width: 100%; }
.cz-v { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.cz-v input { width: 4.2em; font: inherit; font-family: var(--f-num); font-weight: 700; font-size: 1rem; text-align: right; padding: 5px 6px; border: 1px solid var(--linea); border-radius: 8px; background: var(--papel); color: var(--tinta); font-variant-numeric: tabular-nums; }
.cz-v input:focus { border-color: var(--laton); background: var(--hoja); }
.cz-v span { color: var(--tenue); font-size: .85rem; }
.cz-d { font-family: var(--f-num); font-size: .8rem; font-weight: 700; text-align: right; }
.cz-e { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 3px; }
.cz-e b { font-family: var(--f-num); font-weight: 900; font-size: 1.05rem; }
.cz-e small { font-size: .68rem; color: var(--tenue); }
.cz-fijada .cz-n { color: var(--laton); }
.calc-mas { background: var(--hoja); border: 1px solid var(--linea); border-radius: 14px; padding: 10px 14px; display: grid; gap: 8px; }
.calc-mas > summary { cursor: pointer; font-weight: 700; color: var(--laton); }
@media (max-width: 640px) {
  .cz-cab { display: none; }
  .cz { grid-template-columns: 30px minmax(0, 1fr) auto auto; grid-template-areas: "f n v e" "m r r p" ". d d d"; row-gap: 4px; }
  .cz-fijo { grid-area: f; } .cz-n { grid-area: n; } .cz-v { grid-area: v; } .cz-e { grid-area: e; }
  .cz-menos { grid-area: m; } .cz-r { grid-area: r; } .cz-mas { grid-area: p; } .cz-d { grid-area: d; text-align: left; }
  .cz { grid-template-columns: 34px minmax(0, 1fr) auto 3.2rem; }
  .cz-d:empty { display: none; }
}
/* Aviso de la calculadora en «¿Y si…?» y su pregunta en el muro */
.calc-aviso { display: grid; gap: 6px; text-decoration: none; color: var(--tinta); background: var(--hoja); border: 2px solid var(--laton); border-radius: 18px; padding: 18px 20px; box-shadow: 0 6px 0 var(--amarillo); }
.calc-aviso-t { font-weight: 900; font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--laton); }
.calc-aviso-d { color: var(--tenue); }
.preg-calc { border-color: var(--laton); }

/* ¿Cómo quedaría cada provincia? En tarjetas (09/10/2026) */
.prov-cab { display: grid; gap: 6px; margin-bottom: 4px; }
.prov-cab .nota { margin: 0; }
.prov-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.prov { background: var(--hoja); border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.prov-top { border-color: var(--laton); box-shadow: 0 4px 0 var(--amarillo); }
.prov header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prov h3 { margin: 0; font-size: 1.1rem; font-weight: 900; color: var(--tinta); }
.prov h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--linea); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prov h3 a:hover { color: var(--laton); text-decoration-color: currentColor; }
.prov-n { font-size: .8rem; color: var(--tenue); white-space: nowrap; }
.prov-puntos { display: flex; flex-wrap: wrap; gap: 3px; }
.prov-puntos i { width: 13px; height: 13px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.prov-rep { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .84rem; }
.prov-p { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.prov-p i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.prov-p b { font-family: var(--f-num); }
.prov-p small { font-family: var(--f-num); font-weight: 700; }
.prov-ult { margin: 0; font-size: .86rem; line-height: 1.45; border-top: 1px solid var(--linea); padding-top: 8px; }
.prov-ult small { color: var(--tenue); }
.prov-faltan { display: inline-block; background: var(--laton-suave); border-radius: 6px; padding: 0 6px; }
.prov-faltan b { font-family: var(--f-num); font-size: 1.05rem; color: var(--tinta); }
.prov-meta { margin: 0; font-size: .76rem; color: var(--tenue); }

/* Tu mesa: votos y % en cada casilla, «Otros» por dentro y municipios de un solo distrito (09/10/2026) */
.tabla-mesas td small.pct { display: block; font-size: .7rem; color: var(--tenue); font-weight: 400; }
.th-otros { font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: 700; color: var(--laton); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.celda-otros { cursor: pointer; }
.celda-otros:hover { background: var(--laton-suave); }
.mp-otros { cursor: pointer; border-color: var(--laton); }
.mp-otros:hover, .mp-otros:focus-visible { background: var(--laton-suave); }
.mp-ver { font-size: .72rem; font-weight: 700; color: var(--laton); margin-left: 4px; }
.otros-det { margin: 14px 0; background: var(--hoja); border: 2px solid var(--laton); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; scroll-margin-top: var(--alto-fija); }
.od-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.od-cab h4 { margin: 0; font-size: 1.05rem; color: var(--laton); }
.od-lista { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: .88rem; }
.od-lista li span:not(.num) { color: var(--tenue); }
.od-lista .num { float: right; font-family: var(--f-num); }
.od-tabla { max-height: 420px; overflow: auto; }
.od-cero { color: var(--linea); }
.campo-fijo .campo-v { margin: 0; padding: 10px 12px; border: 1px dashed var(--linea); border-radius: 10px; background: var(--papel); font-size: .95rem; }
.campo-fijo .campo-v small { color: var(--tenue); }
.od-tabla table { width: auto; min-width: 60%; }