/* Simulador del 29N: estética de periódico (Source Serif 4 en titulares y cifras, papel crema, filetes negros).
   Primero el móvil: zonas táctiles de 44 px, sin scroll horizontal a 360 px y el foco siempre visible. */

@font-face {
  font-family: "Source Serif 4";
  src: url("fuentes/source-serif-4.woff2") format("woff2");
  font-weight: 400 700;
  font-display: optional;
}

:root {
  --tinta: #222;
  --papel: #f6f5f1;
  --blanco: #fffefa;
  --rojo: #b3121b;
  --gris: #666;
  --gris-claro: #8a877f;
  --filete: #dcd9d0;
  --fondo-barra: #e6e3dc;
  --verde: #2a7a2a;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 16px/1.5 var(--sans);
  color: var(--tinta);
  background: var(--papel);
}

.contenedor {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

h1, h2, h3, .cifra, .serif {
  font-family: var(--serif);
}

h1, h2, h3 {
  margin: 0 0 8px;
  font-weight: 600;
  line-height: 1.15;
}

h1 { font-size: 28px; letter-spacing: -0.01em; }
h2 { font-size: 23px; font-weight: 600; }
h3 { font-size: 18px; margin-top: 22px; }

p { margin: 0 0 12px; }

a { color: var(--tinta); text-underline-offset: 2px; }
a:hover { color: var(--rojo); }

:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 2px;
}

.oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gris { color: var(--gris); }
.js .sin-js, .solo-js { display: none; }
.js .solo-js { display: block; }
.js .noche:not([hidden]):empty { min-height: 60vh; }
.partido { white-space: nowrap; }
.nota { font-size: 14px; color: var(--gris); }
.aviso { color: var(--gris); }

/* ---------- Cabecera ---------- */

.cabecera {
  border-top: 6px solid var(--tinta);
  border-bottom: 4px double var(--tinta);
  padding: 10px 0 12px;
  margin-bottom: 14px;
}

.barra-sitio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.sitio {
  margin: 0;
  font-size: 14px;
  color: var(--gris);
}

.sitio a, .idioma {
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #cfccc3;
}

.idioma {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  border-bottom: 0;
  text-decoration: underline;
}

.sitio a:hover, .idioma:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.antetitulo {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rojo);
}

.antetitulo a { color: inherit; text-decoration: none; }

.antetitulo-sec {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rojo);
}

/* ---------- Botones ---------- */

button, input, select {
  font: inherit;
  color: inherit;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--blanco);
  cursor: pointer;
  font-weight: 600;
  touch-action: manipulation;
}

.boton:hover:not(:disabled) { background: #ecebe5; }
.boton:disabled { color: #aaa; border-color: #bbb; cursor: default; }

.boton.principal {
  background: var(--tinta);
  color: #fff;
}

.boton.principal:hover:not(:disabled) { background: #000; }

.boton.peligro { color: #a00; border-color: #a00; }

button.enlace {
  border: 0;
  padding: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 0;
}

button.enlace:hover { color: var(--rojo); }

/* ---------- La porra (lo primero que se ve) ---------- */

.porra { margin-bottom: 8px; }

.rotulo {
  margin: 0 0 6px;
  font-size: 14px;
  color: #444;
  border-left: 3px solid var(--rojo);
  padding-left: 8px;
}

.aviso-porra {
  margin: 0 0 8px;
  padding: 8px 10px;
  background: #fff6d6;
  border: 1px solid #d8c27a;
  font-size: 14px;
}

.aviso-porra .boton { min-height: 40px; padding: 4px 12px; margin: 6px 8px 0 0; font-size: 14px; }

.hemiciclo-fig { margin: 0; }

.hemiciclo {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}

.hemiciclo circle {
  stroke: rgba(0, 0, 0, 0.18);
  stroke-width: 0.004;
  transition: opacity 0.2s;
}

.hemiciclo circle.libre { fill: none; stroke: var(--gris-claro); stroke-width: 0.006; }
.hemiciclo circle.apagado { opacity: 0.14; }
.hemiciclo .mayoria { stroke: var(--tinta); stroke-width: 0.005; stroke-dasharray: 0.014 0.012; }
.hemiciclo .marca { font: 600 0.05px var(--serif); fill: var(--tinta); }
.hemiciclo .centro { font: 600 0.16px var(--serif); fill: var(--tinta); }
.hemiciclo .centro-txt { font: 0.056px var(--sans); fill: var(--gris); }
.hemiciclo .centro-txt.ok { fill: var(--verde); }
.hemiciclo.pequeno { max-width: 420px; }
.hemiciclo.pequeno .centro { font-size: 0.3px; }

figcaption {
  margin: 2px 0 6px;
  text-align: center;
  font-size: 14px;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

figcaption:empty { display: none; }

/* Escaños por partido: una línea de cifras (y una tabla oculta para los lectores de pantalla) */
.totales { margin: 0 0 10px; }

.totales-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.totales-lista li { display: flex; align-items: baseline; font-size: 15px; }

.totales-lista b {
  margin-left: 5px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  font-variant-numeric: lining-nums tabular-nums;
}

.provincias-en { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto 10px; }
.provincias-en circle { stroke: rgba(0, 0, 0, 0.2); stroke-width: 1; }
.provincias-en .fila-nombre { font: 600 22px var(--serif); fill: var(--tinta); }
.provincias-en .fila-num { font: 600 22px var(--serif); fill: var(--gris); }

.muestra {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  vertical-align: -1px;
  flex: none;
}

.acciones {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.acciones .boton { flex: 1 1 140px; max-width: 260px; }

.tambien {
  text-align: center;
  font-size: 14px;
  color: var(--gris);
  margin-bottom: 6px;
  line-height: 2.2;
}

.tambien a, .tambien button.enlace { color: var(--tinta); padding: 6px 2px; }

.caja-nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 4px 0 8px;
  font-size: 14px;
}

.caja-nombre input {
  min-height: 44px;
  width: 200px;
  padding: 6px 10px;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--blanco);
}

.estado-accion {
  min-height: 1.5em;
  text-align: center;
  font-size: 14px;
  color: var(--verde);
  margin: 0;
}

/* ---------- Índice ---------- */

.indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 10px 0 0;
  padding: 6px 0;
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
  font-size: 14px;
}

.indice a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: #555;
  text-decoration: none;
}

.indice a:hover { color: var(--tinta); text-decoration: underline; }

/* ---------- Secciones ---------- */

.seccion {
  border-top: 1px solid var(--tinta);
  padding-top: 12px;
  margin-top: 36px;
}

.contenido > p, .seccion > p { max-width: 720px; }

.destacado {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.4;
  border-left: 3px solid var(--tinta);
  padding-left: 12px;
}

.lista-hechos { padding-left: 20px; max-width: 760px; }
.lista-hechos li { margin-bottom: 10px; }

.anuncio { margin: 28px 0; min-height: 280px; }

/* ---------- Editor de la porra ---------- */

.reparto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.lista-ccaa { display: none; }

.selector-ccaa {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-bottom: 10px;
}

.selector-ccaa select {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--blanco);
  font-weight: 600;
}

.selector-ccaa .boton { padding: 6px 12px; min-width: 44px; }

.editor { min-width: 0; }
.editor h3 { margin-top: 0; }

.editor-info {
  margin: 0 0 8px;
  color: #555;
  font-variant-numeric: tabular-nums;
}

.editor-info .libres { font-weight: 700; color: var(--rojo); }
.editor-info .completa { font-weight: 700; color: var(--verde); }

.escanos-ccaa {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0 0 10px;
}

.escanos-ccaa span {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 1px solid var(--gris-claro);
}

.escanos-ccaa span.lleno { border-color: rgba(0, 0, 0, 0.2); }

.fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #e5e3dc;
}

.fila .nombre { display: flex; align-items: center; min-width: 0; }
.fila .nombre label { overflow-wrap: anywhere; }

.control { display: flex; align-items: stretch; }

.control button {
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--blanco);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.control button:disabled { color: #bbb; border-color: #c9c6be; cursor: default; }

.control input {
  width: 52px;
  min-height: 44px;
  text-align: center;
  border: 1px solid var(--tinta);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: var(--blanco);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  -moz-appearance: textfield;
  appearance: textfield;
}

.control input::-webkit-outer-spin-button,
.control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.editor-aviso { min-height: 1.5em; font-size: 14px; color: var(--rojo); margin: 6px 0 0; }

.editor-pie { display: flex; gap: 8px; margin-top: 10px; }
.editor-pie .hueco { flex: 1; }

.acciones-porra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.desplegable { margin-top: 16px; max-width: 760px; }

/* ---------- Pactos ---------- */

.pacto-partidos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.pacto-partidos label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 10px;
  border: 1px solid #b9b5ab;
  background: var(--blanco);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.pacto-partidos input { width: 18px; height: 18px; margin: 0; accent-color: var(--tinta); }
.pacto-partidos label:has(input:checked) { border-color: var(--tinta); background: #fff6d6; }
.pacto-partidos b { font-family: var(--serif); }

.barra-pacto {
  position: relative;
  display: flex;
  height: 18px;
  background: var(--fondo-barra);
  margin: 8px 0;
}

.barra-pacto span { height: 100%; }

.barra-pacto .linea {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 50.2857%;
  width: 2px;
  background: var(--tinta);
}

.suma-pacto { margin: 0 0 8px; font-size: 17px; }
.suma-pacto .cifra { font-size: 30px; margin-right: 4px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.suma-pacto.ok { color: var(--verde); }

/* Los cuatro pactos: en dos columnas, las parejas arriba y los bloques abajo */
.pactos-ref {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 760px;
}

.pacto-ref {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 10px 12px;
  text-align: left;
  color: var(--tinta);
  border: 1px solid #cfccc3;
  border-radius: 0;
  background: var(--blanco);
  cursor: pointer;
}

.pacto-ref:hover:not(:disabled) { border-color: var(--tinta); }
.pacto-ref.elegida { background: #fff6d6; border-color: #b89a2e; }
.pacto-ref:disabled { color: var(--gris-claro); cursor: default; }
.pacto-ref-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pacto-ref-nombre { font-weight: 600; }
.pacto-ref-suma { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.pacto-ref .barra-pacto { height: 10px; margin: 8px 0 6px; }
.pacto-ref .barra-pacto .linea { top: -4px; bottom: -4px; }
.pacto-ref-estado, .pacto-ref-partidos { display: block; font-size: 14px; color: var(--gris); }
.pacto-ref-estado.ok { color: var(--verde); font-weight: 600; }
.pacto-ref-partidos { margin-top: 2px; }

/* ---------- Liga de porras con tus amigos ---------- */

/* Arriba, si se llega con el enlace de una liga */
.aviso-liga {
  margin: 0 0 8px;
  padding: 8px 10px;
  background: var(--blanco);
  border: 1px solid var(--tinta);
  border-left: 4px solid var(--rojo);
  font-size: 14px;
}

.aviso-liga p { margin: 0; overflow-wrap: anywhere; }
.aviso-liga .boton { min-height: 40px; padding: 4px 12px; margin: 6px 0 0; font-size: 14px; }

.liga-pasos { max-width: 720px; margin: 0 0 12px; padding-left: 22px; }
.liga-pasos li { margin-bottom: 4px; }

.liga-panel {
  max-width: 760px;
  margin: 14px 0 6px;
  padding: 10px 12px 12px;
  background: var(--blanco);
  border: 2px solid var(--tinta);
}

.liga-panel > .aviso { margin: 0; }
.liga-panel h3 { margin-top: 0; overflow-wrap: anywhere; }
.liga-panel h4 { margin: 0 0 6px; font-size: 16px; }

.liga-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tinta);
}

.liga-cabeza h3 { margin: 0; min-width: 0; }
.liga-meta { margin: 0; font-size: 14px; color: var(--gris); font-variant-numeric: tabular-nums; }

.liga-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 0; font-size: 14px; }

.liga-sel select {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 420px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--blanco);
  font-weight: 600;
}

.liga-miembros { list-style: none; margin: 0; padding: 0; }

.liga-miembro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid #e5e3dc;
}

.liga-miembro > * { grid-column: 1; }
.liga-miembro > .liga-ver { grid-column: 2; grid-row: 1 / span 3; }
.liga-miembro.yo, .tabla-liga tr.yo, .liga-podio li.yo { background: #fff6d6; }

.liga-quien { margin: 0; overflow-wrap: anywhere; }
.liga-nombre { font-weight: 600; }

.liga-tu {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rojo);
}

.liga-cuando { font-size: 13px; color: var(--gris); white-space: nowrap; }

.liga-reparto {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

.barra-porra { height: 12px; margin: 5px 0 3px; }
.barra-porra .linea { top: -3px; bottom: -3px; }
.liga-ver { min-width: 56px; padding: 4px 12px; }

.tabla-liga { margin-top: 4px; }
.tabla-liga th, .tabla-liga td { padding-left: 6px; vertical-align: middle; }
.tabla-liga th[scope="row"] { overflow-wrap: anywhere; }
.tabla-liga .puesto { font-family: var(--serif); font-weight: 600; font-size: 17px; white-space: nowrap; }
.tabla-liga td.num { font-size: 22px; }
.tabla-liga .liga-ver { min-height: 44px; font-size: 14px; }

.liga-form { margin-top: 2px; }
.liga-panel #liga-accion .liga-form { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #b9b5ab; }
.liga-tu-porra { margin: 0 0 6px; font-size: 14px; color: #444; }

.liga-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  max-width: 420px;
  margin: 8px 0 0;
  font-size: 14px;
}

.liga-campos label { margin-top: 6px; font-weight: 600; }

.liga-campos input {
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--blanco);
}

.liga-error { min-height: 1.5em; margin: 6px 0; font-size: 14px; color: var(--rojo); }
.liga-form .acciones, .liga-pregunta .acciones { justify-content: flex-start; margin-bottom: 0; }

.liga-pregunta, .liga-actualizar {
  margin-top: 14px;
  padding: 8px 10px;
  background: #fff6d6;
  border: 1px solid #d8c27a;
}

.liga-pregunta p, .liga-actualizar p { margin: 0 0 6px; }
.liga-tarde { margin: 12px 0 0; }

.liga-compartir { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #b9b5ab; }
.liga-compartir .tambien { margin-bottom: 0; }
.liga-pie { margin: 8px 0 0; font-size: 14px; color: var(--gris); line-height: 2.2; }
.liga-pie button.enlace { padding: 6px 2px; color: #555; }
.liga-estado { text-align: left; max-width: 760px; }

/* La noche electoral, en el bloque de los resultados */
.liga-noche { margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--tinta); }
.liga-noche h3 { margin-top: 0; overflow-wrap: anywhere; }
.liga-noche p { margin-bottom: 0; }
.liga-noche button.enlace { padding: 6px 2px; }
.liga-podio { list-style: none; margin: 6px 0 8px; padding: 0; max-width: 480px; }

.liga-podio li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 6px;
  border-bottom: 1px solid #e5e3dc;
}

.liga-podio .puesto { min-width: 2.4em; font-family: var(--serif); font-weight: 600; }
.liga-podio .liga-nombre { min-width: 0; overflow-wrap: anywhere; }
.liga-podio b { margin-left: auto; font-family: var(--serif); font-size: 20px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Mapa ---------- */

/* El hueco del mapa se reserva antes de que llegue (800×701 y la leyenda), para que no salte nada */
.mapa-caja { min-height: calc(min(100vw - 32px, 720px) * 0.876 + 48px); }

.mapa {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}

.mapa path, .mapa circle { stroke: var(--papel); stroke-width: 1; stroke-linejoin: round; fill-rule: evenodd; }
.mapa [data-ccaa], .mapa [data-ine] { cursor: pointer; }
.mapa [data-ccaa]:hover, .mapa [data-ine]:hover { filter: brightness(0.85); }
.mapa .activa { stroke: var(--tinta); stroke-width: 2; }
.mapa path.marco { fill: none; stroke: #999; }
.mapa text { font-size: 12px; fill: #555; }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 14px;
  margin: 8px 0 0;
  font-size: 14px;
}

.leyenda span { display: inline-flex; align-items: center; }

/* ---------- Modo porcentaje ---------- */

.modo-porcentaje { margin-top: 12px; }

.pct-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

.pct-filas { margin: 0; padding: 0; list-style: none; }

.pct-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid #e5e3dc;
}

.pct-fila .control input { width: 66px; font-size: 17px; }
.pct-fila .control button { font-size: 18px; }
.pct-fila.derivado { color: var(--gris); }
.pct-fila .resultante { font-size: 13px; color: var(--gris); display: block; }
.pct-fila .tocado { font-weight: 700; }

.pct-mas { margin: 8px 0; }

.pct-resumen {
  padding: 10px 12px;
  background: var(--blanco);
  border: 1px solid var(--filete);
}

.pct-resumen .totales { margin-bottom: 6px; }
.pct-avisos { font-size: 14px; color: var(--rojo); margin: 6px 0; }
.pct-avisos:empty { display: none; }
.pct-aire { font-size: 15px; padding-left: 20px; margin: 6px 0 10px; }
.pct-aire li { margin-bottom: 4px; }

.pct-ccaa {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed #b9b5ab;
}

.pct-ccaa .selector-ccaa { max-width: 420px; }

/* ---------- Tablas de consulta ---------- */

table { border-collapse: collapse; width: 100%; }

th, td {
  text-align: left;
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid #e5e3dc;
  vertical-align: baseline;
}

thead th { font-weight: 400; color: #777; font-size: 13px; }
th[scope="row"] { font-weight: 400; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.tabla-datos td.num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
}

.tabla-datos tr.gris td.num, .tabla-datos tr.gris th { color: var(--gris); font-weight: 400; }

.tabla-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabla-qhp, .tabla-2023 { max-width: 560px; }
.tabla-inicio td { font-size: 15px; }
.tabla-coste, .tabla-aire { max-width: 760px; }
.sube { color: var(--verde); }
.baja { color: var(--rojo); }

.tabla-cocientes td.num { font-size: 14px; font-weight: 400; color: var(--gris); padding-left: 8px; }
.tabla-cocientes td.gana { color: var(--tinta); font-weight: 700; }
.tabla-cocientes td.corte { text-decoration: underline dotted; }

.calendario {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  max-width: 760px;
}

.calendario li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 7px 0;
  border-bottom: 1px solid #e5e3dc;
}

.calendario time { font-family: var(--serif); font-weight: 600; }

details { max-width: 760px; border-bottom: 1px solid #e5e3dc; }

summary {
  cursor: pointer;
  padding: 10px 0;
  min-height: 44px;
  font-weight: 600;
}

details > p { color: #444; }

/* ---------- Noche electoral ---------- */

.noche {
  margin: 0 0 20px;
  padding: 10px 12px 12px;
  background: var(--blanco);
  border: 2px solid var(--tinta);
}

.noche h2 { font-size: 26px; }

.noche-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 14px;
  color: var(--gris);
  margin-bottom: 6px;
}

.noche-meta b { color: var(--tinta); font-family: var(--serif); font-size: 18px; }

.barra-escrutado {
  height: 6px;
  background: var(--fondo-barra);
  margin: 4px 0 10px;
}

.barra-escrutado span { display: block; height: 100%; background: var(--tinta); }

.acierto {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px dashed var(--tinta);
}

.acierto .cifra { font-size: 40px; font-weight: 600; line-height: 1; }

.ensayo-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 0 0 12px;
  background: #222;
  color: #fff;
  font-size: 14px;
}

.ensayo-barra .boton { min-height: 36px; padding: 2px 10px; font-size: 14px; color: var(--tinta); }
.ensayo-barra .boton[aria-pressed="true"] { background: #fff6d6; }

/* ---------- Pie ---------- */

.pie {
  color: #777;
  font-size: 14px;
  margin-top: 44px;
  border-top: 1px solid var(--filete);
  padding-top: 10px;
  padding-bottom: 30px;
}

.pie nav { display: flex; flex-wrap: wrap; gap: 0 16px; margin-bottom: 8px; }
.pie nav a { display: inline-flex; align-items: center; min-height: 40px; color: #555; }
.pie a { color: inherit; }

.legal p { max-width: 720px; }

/* ---------- Pantallas grandes ---------- */

@media (min-width: 760px) {
  h1 { font-size: 38px; }
  h2 { font-size: 26px; }

  .cabecera { padding: 14px 0 16px; margin-bottom: 20px; }

  .porra {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas:
      "rotulo rotulo"
      "aviso aviso"
      "liga liga"
      "hemi totales"
      "hemi acciones"
      "hemi tambien"
      "hemi nombre"
      "hemi estado";
    column-gap: 28px;
    align-items: start;
  }

  .porra > h2 { position: absolute; }
  .rotulo { grid-area: rotulo; }
  .aviso-porra { grid-area: aviso; }
  .aviso-liga { grid-area: liga; }
  .hemiciclo-fig { grid-area: hemi; }
  .porra .totales { grid-area: totales; margin-top: 18px; }
  .porra .totales-lista { justify-content: flex-start; }
  .acciones { grid-area: acciones; justify-content: flex-start; }
  .tambien { grid-area: tambien; text-align: left; }
  .caja-nombre { grid-area: nombre; justify-content: flex-start; }
  .estado-accion { grid-area: estado; text-align: left; }

  .reparto { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
  .js .reparto { min-height: 790px; }   /* el hueco de la lista de comunidades, antes de que la pinte app.js */

  .lista-ccaa { display: block; border-top: 1px solid var(--tinta); }

  .lista-ccaa button {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    width: 100%;
    min-height: 40px;
    padding: 6px 8px 5px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--filete);
    border-radius: 0;
    text-align: left;
    cursor: pointer;
  }

  .lista-ccaa button:hover:not(.activa) { background: #ecebe5; }
  .lista-ccaa .cuenta { color: #888; font-size: 13px; font-variant-numeric: tabular-nums; }
  .lista-ccaa .completa .cuenta { color: var(--verde); }
  .lista-ccaa .activa { background: var(--tinta); color: #fff; }
  .lista-ccaa .activa .cuenta { color: #ddd; }
  .mini { grid-column: 1 / -1; display: flex; height: 3px; background: var(--fondo-barra); }
  .mini span { height: 100%; }

  .selector-ccaa.solo-movil { display: none; }

  .pactos-ref { grid-template-columns: 1fr 1fr; }

  .pct-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

  .calendario li { grid-template-columns: 150px 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .acciones, .tambien, .indice, .anuncio, #cambiar, #mapa-sec, #porcentaje, .aviso-liga, .liga-form, .liga-pie, .liga-ver { display: none; }
}