/* ¿Quién vota? — sistema visual "oficina de registro parlamentario".
   Estética burocrática retro: papel de archivo, tinta, sellos de goma y
   bordes duros. El humor viene de la forma, nunca de las personas.

   Regla de color: los colores de partido solo aparecen como franja
   lateral. Los únicos colores con carga semántica son los cuatro
   estados de voto. */

:root {
  --papel: #e8e2d4;
  --papel-sombra: #d6cebc;
  --papel-nuevo: #f7f3e9;
  --tinta: #1f1b16;
  --tinta-suave: #5a5245;
  --sello: #b23a2e;
  --carpeta: #2e5c7a;

  --si: #3e7a4e;
  --no: #b23a2e;
  --abs: #c79a2e;
  --nc: #8c8577;

  --borde: 3px solid var(--tinta);
  --mono: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  /* Trama de papel milimetrado, muy sutil */
  background-image:
    repeating-linear-gradient(0deg, rgba(31, 27, 22, .035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(31, 27, 22, .035) 0 1px, transparent 1px 4px);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--carpeta); }
a:hover { color: var(--sello); }

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 8px; top: 8px; z-index: 10;
  background: var(--tinta); color: var(--papel); padding: 8px 12px;
}

/* ------------------------------------------------------------ cabecera */

.cabecera {
  border-bottom: var(--borde);
  padding: 14px 18px 0;
  background: var(--papel-nuevo);
}

.marca {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--tinta);
  font-size: 26px; font-weight: 700; letter-spacing: 1px;
}
.marca-sello { color: var(--sello); }
.marca-texto { text-transform: uppercase; }

.lema {
  margin: 2px 0 12px;
  color: var(--tinta-suave);
  font-size: 13px;
}

.menu {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-bottom: -3px;
}
.menu a {
  padding: 8px 14px;
  border: var(--borde);
  border-bottom-color: var(--papel-nuevo);
  margin-right: 6px;
  background: var(--papel-sombra);
  text-decoration: none;
  color: var(--tinta);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.menu a:hover { background: var(--papel-nuevo); }
.menu a[aria-current="page"] {
  background: var(--papel-nuevo);
  font-weight: 700;
}

.contenido {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 18px 60px;
}

/* --------------------------------------------------------------- piezas */

.ficha {
  background: var(--papel-nuevo);
  border: var(--borde);
  box-shadow: 6px 6px 0 rgba(31, 27, 22, .18);
  padding: 16px 18px;
  margin-bottom: 22px;
}

.ficha-cabecera {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 2px dashed var(--tinta-suave);
  padding-bottom: 8px; margin-bottom: 12px;
}

h1, h2, h3 {
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  margin: 0 0 10px;
}
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 14px; color: var(--tinta-suave); }

.sello {
  display: inline-block;
  border: 2px solid var(--sello);
  color: var(--sello);
  padding: 1px 8px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  transform: rotate(-2deg);
}

.dato-fuente {
  font-size: 11px; color: var(--tinta-suave);
  border-top: 2px dashed var(--tinta-suave);
  margin-top: 14px; padding-top: 8px;
  word-break: break-word;
}

.aviso {
  border-left: 6px solid var(--nc);
  background: var(--papel-sombra);
  padding: 8px 12px;
  font-size: 12px;
  margin: 12px 0;
}

.cargando { color: var(--tinta-suave); }

/* La explicación del trámite es elaboración propia, no texto oficial:
   va visualmente separada para que no se confunda con el dato. */
.explicacion {
  border: 2px dashed var(--carpeta);
  background: var(--papel-sombra);
  padding: 10px 14px;
  margin: 14px 0;
}
.explicacion h3 { color: var(--carpeta); margin-bottom: 6px; }
.en-una-frase { font-size: 17px; line-height: 1.45; }
.explicacion p { margin: 6px 0; }
.explicacion-aviso {
  font-size: 11px; color: var(--tinta-suave);
  border-top: 1px dashed var(--tinta-suave); padding-top: 6px;
}

/* ------------------------------------------------------- estados de voto */

.v { font-weight: 700; white-space: nowrap; }
.v-si  { color: var(--si); }
.v-no  { color: var(--no); }
.v-abs { color: var(--abs); }
.v-nc  { color: var(--nc); }
/* El voto anulado no es ninguno de los otros cuatro estados: ni una
   posición, ni una ausencia. Se le da su propia marca. */
.v-nulo { color: var(--tinta); text-decoration: line-through; }

/* Cada estado se distingue por forma además de por color: el color solo
   no basta para quien no lo percibe igual. */
.v::before { display: inline-block; margin-right: 5px; }
.v-si::before  { content: "●"; }
.v-no::before  { content: "■"; }
.v-abs::before { content: "◆"; }
.v-nc::before  { content: "┈"; }
.v-nulo::before { content: "✕"; }

.barra {
  display: flex; height: 26px; border: var(--borde); margin: 10px 0;
  background: var(--papel-sombra); overflow: hidden;
}
.barra span {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--papel-nuevo);
  min-width: 0;
}
.barra .b-si  { background: var(--si); }
.barra .b-no  { background: var(--no); }
.barra .b-abs { background: var(--abs); }
.barra .b-nc  { background: var(--nc); }
/* Rayado: el voto anulado no es una posición, así que no le corresponde un
   color pleno como a los demás. */
.barra .b-nulo {
  background: repeating-linear-gradient(45deg,
    var(--tinta) 0 3px, var(--papel-sombra) 3px 6px);
}

.cifras {
  display: flex; gap: 18px; flex-wrap: wrap; font-size: 20px; font-weight: 700;
}
/* El porcentaje acompaña al recuento, no lo sustituye: el hecho es cuántas
   veces, y la proporción solo ayuda a situarlo. */
.cifras small {
  display: block; font-size: 12px; font-weight: 400;
  color: var(--tinta-suave); letter-spacing: .5px;
}

/* ---------------------------------------------------------------- rejilla */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.tarjeta {
  display: flex; gap: 10px;
  background: var(--papel-nuevo);
  border: var(--borde);
  padding: 10px;
  text-decoration: none; color: var(--tinta);
  position: relative;
}
.tarjeta:hover { background: var(--papel-sombra); }
.tarjeta::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--color-grupo, var(--nc));
}

.retrato {
  width: 62px; height: 78px; flex: 0 0 62px;
  border: 2px solid var(--tinta);
  object-fit: cover;
  /* El escalado duro convierte la foto oficial en algo cercano al pixel
     art sin retocarla ni deformar a nadie. */
  image-rendering: pixelated;
  background: var(--papel-sombra);
}
.retrato-grande { width: 120px; height: 150px; flex-basis: 120px; }

/* Silueta genérica: se usa cuando no puede mostrarse la fotografía
   oficial, o cuando cargarla supondría cientos de peticiones al
   servidor del Congreso. */
.es-silueta { object-fit: fill; }

.tarjeta-cuerpo { min-width: 0; }
.tarjeta-nombre {
  font-weight: 700; font-size: 13px; line-height: 1.25;
  margin-bottom: 4px; word-break: break-word;
}
.tarjeta-meta { font-size: 11px; color: var(--tinta-suave); }

.enmiendas li { align-items: flex-start; }
.enmienda-icono {
  display: inline-block; width: 22px; color: var(--sello); font-weight: 700;
}

/* El enlace al boletín de enmiendas es la respuesta a "¿de qué va esto?",
   así que no puede quedar perdido en una lista. */
.destacado {
  border: 2px solid var(--carpeta);
  background: var(--papel-sombra);
  padding: 10px 14px; margin: 12px 0;
}
.destacado a { font-weight: 700; font-size: 16px; }

/* ------------------------------------------------------------- resultados */

.res {
  display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; border: 2px solid;
}
.res-si  { color: var(--si);  border-color: var(--si); }
.res-no  { color: var(--no);  border-color: var(--no); }
.res-emp { color: var(--abs); border-color: var(--abs); }
.res-ind { color: var(--nc);  border-color: var(--nc); }

.recorrido { list-style: none; padding: 0; margin: 10px 0; }
.recorrido li {
  border-left: 4px solid var(--tinta-suave);
  padding: 6px 0 10px 14px; margin-left: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.recorrido li.aqui { border-left-color: var(--sello); background: var(--papel-sombra); }
.recorrido-fecha { font-size: 11px; color: var(--tinta-suave); text-transform: uppercase; }

.resumen-bloque {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 6px; font-size: 12px;
}

/* Los recuentos de la tarjeta de diputado. Venían del álbum, que era una
   pantalla aparte con la mitad de lo que hacía falta; ahora van en la
   única tarjeta que hay. */
.tarjeta-cifras {
  display: flex; gap: 8px;
  font-size: 12px; font-weight: 700;
  border-top: 1px dashed var(--tinta-suave);
  padding-top: 4px; margin-top: 5px;
}

/* ----------------------------------------------------------------- listas */

.lista { list-style: none; padding: 0; margin: 0; }
.lista li {
  border-bottom: 1px dashed var(--tinta-suave);
  padding: 8px 0;
  display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap;
}
.lista li:last-child { border-bottom: 0; }

.fila-votacion { display: block; text-decoration: none; color: inherit; }
.fila-votacion:hover .fv-titulo { color: var(--sello); }
.fv-cab { font-size: 11px; color: var(--tinta-suave); }
.fv-titulo { font-weight: 700; font-size: 14px; }
.fv-sub { font-size: 12px; color: var(--tinta-suave); }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px dashed var(--tinta-suave); }
th { text-transform: uppercase; font-size: 11px; color: var(--tinta-suave); }

/* --------------------------------------------------------------- filtros */

.filtros {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
input, select, button {
  font-family: var(--mono); font-size: 13px;
  padding: 7px 10px;
  border: var(--borde);
  background: var(--papel-nuevo);
  color: var(--tinta);
}
button { cursor: pointer; text-transform: uppercase; letter-spacing: .5px; }
button:hover { background: var(--papel-sombra); }
button.primario { background: var(--tinta); color: var(--papel-nuevo); }
button.primario:hover { background: var(--sello); }

.chip {
  border: 2px solid var(--tinta); padding: 3px 8px; font-size: 11px;
  background: var(--papel-sombra); text-transform: uppercase;
}

/* Una tabla ancha nunca debe desplazar la página entera: se desplaza ella
   dentro de su caja. */
.tabla-caja { overflow-x: auto; margin: 10px 0; }

/* El 0 % de cobertura no se disimula: es el hallazgo de la auditoría. */
.cob-cero { color: var(--no); font-weight: 700; }

/* ---------------------------------------------------- correcciones */

.correcciones { margin: 0; padding-left: 20px; }
.correcciones li {
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 2px solid rgba(31, 27, 22, .18);
}
.correcciones li:last-child { border-bottom: 0; }

.correccion-cab {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 6px;
}

/* «Decía» y «Dice» con el mismo ancho: puestas una encima de otra, el
   cambio se lee de un vistazo sin tener que buscar dónde empieza cada una. */
.etiqueta-antes, .etiqueta-ahora {
  display: inline-block; min-width: 62px;
  font-size: 11px; text-transform: uppercase; font-weight: 700;
  padding: 1px 6px; margin-right: 6px;
  border: 2px solid var(--tinta);
}
.etiqueta-antes { background: var(--papel-sombra); color: var(--tinta-suave); }
.etiqueta-ahora { background: var(--tinta); color: var(--papel-nuevo); }

/* -------------------------------------------------------- frescura */

/* Vacío hasta que el JavaScript lo rellena: un hueco reservado que se
   quedara visible sería otra forma de mentir sobre el estado del dato. */
.frescura:empty { display: none; }

.frescura {
  display: flex; align-items: center; gap: 8px;
  max-width: 1100px; margin: 0 auto 14px;
  padding: 7px 12px;
  border: var(--borde);
  background: var(--papel-nuevo);
  font-size: 12px; line-height: 1.4;
}
.frescura-punto {
  width: 10px; height: 10px; flex: 0 0 10px;
  border: 1px solid rgba(31, 27, 22, .5);
}
.frescura-al-dia .frescura-punto { background: var(--si); }
.frescura-tibio  .frescura-punto { background: var(--abs); }
.frescura-viejo  .frescura-punto { background: var(--no); }

/* Cuando el dato lleva mucho sin comprobarse, el aviso deja de ser un
   detalle del pie y pasa a ser lo primero que se lee. */
.frescura-viejo {
  border-width: 5px; border-color: var(--no);
  background: var(--papel-sombra);
  font-weight: 700;
}

/* ------------------------------------------------------- hemiciclo */

/* En un móvil de 375 px, 350 escaños salen a 4,5 px cada uno: ni se pulsan
   ni se distinguen. El dibujo conserva un ancho mínimo y es la caja la que
   se desplaza, para que la página nunca tenga scroll horizontal. */
.hemiciclo-caja { overflow-x: auto; margin: 8px 0 4px; }

.hemiciclo {
  display: block; width: 100%; height: auto;
  min-width: 620px; max-width: 720px; margin: 0 auto;
}
.escano circle {
  stroke: rgba(31, 27, 22, .45); stroke-width: 1;
  transition: none;   /* el sitio es de estética dura, sin transiciones */
}
.escano:hover circle, .escano:focus circle {
  stroke: var(--tinta); stroke-width: 3;
}

/* La lista equivalente al mapa. Va plegada porque son 341 nombres, pero
   está siempre en el HTML: si dependiera de un clic con ratón no serviría
   a quien no puede darlo. */
.escanos-lista {
  border: var(--borde); background: var(--papel-nuevo);
  padding: 8px 12px; margin: 10px 0;
}
.escanos-lista summary {
  cursor: pointer; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px;
}
.escanos-lista h4 {
  margin: 14px 0 4px; font-size: 12px; text-transform: uppercase;
  color: var(--tinta-suave); border-bottom: 2px solid rgba(31, 27, 22, .18);
}
.lista-escanos { list-style: none; margin: 0; padding: 0; }
.lista-escanos li {
  display: flex; align-items: baseline; gap: 7px;
  padding: 3px 0; font-size: 12px;
}
/* Objetivo táctil holgado: es la alternativa al mapa justo para quien no
   puede acertarle a un punto de nueve píxeles. */
.lista-escanos a { padding: 4px 0; }
.lista-escanos .punto {
  width: 9px; height: 9px; flex: 0 0 9px;
  border: 1px solid rgba(31, 27, 22, .5);
}

.leyenda {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 4px 0 12px;
}
.chip-grupo {
  display: inline-flex; align-items: center; gap: 5px;
  border: 2px solid var(--tinta); padding: 3px 8px;
  font-size: 11px; text-transform: uppercase;
  text-decoration: none; color: var(--tinta);
  background: var(--papel-nuevo);
}
.chip-grupo:hover { background: var(--papel-sombra); }
.chip-grupo .punto {
  width: 10px; height: 10px; display: inline-block;
  border: 1px solid rgba(31, 27, 22, .5);
}

.recorrido { margin: 10px 0 0 20px; padding: 0; }
.recorrido li { margin-bottom: 7px; line-height: 1.45; }

.glosario { margin: 10px 0 0; }
.glosario dt { margin-top: 10px; font-weight: 700; }
/* Una viñeta a la izquierda separa cada trámite del siguiente: sin ella,
   «Reforma del Reglamento» y su explicación se leen de corrido. El cuadrado
   es el mismo signo del sello de la cabecera. */
.glosario-tramites dt {
  padding-left: 18px; position: relative;
}
.glosario-tramites dt::before {
  content: "▪"; position: absolute; left: 0;
  color: var(--sello);
}
.glosario-tramites dd { margin-left: 18px; }
.glosario dd { margin: 3px 0 0 18px; line-height: 1.45; }
.glosario dd em { color: var(--tinta-suave); font-style: italic; }

/* Los enlaces que la gente busca en un pie: contacto y aviso legal
   primero, y con sitio suficiente para pulsarlos con el dedo. */
.pie-enlaces {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin: 10px 0;
}
.pie-enlaces a { padding: 6px 0; font-weight: 700; }

/* ------------------------------------------- búsqueda con diputado */

/* Lo primero que se lee en cada fila cuando se filtra por una persona:
   es la respuesta a la pregunta que trajo al lector. */
.fv-suyo {
  display: inline-block; margin-bottom: 5px;
  border: 2px solid var(--tinta); padding: 2px 8px;
  background: var(--papel-nuevo); font-size: 12px;
}

/* Las palabras que hemos añadido por nuestra cuenta van marcadas: el
   lector tiene que poder ver qué se ha buscado además de lo que pidió. */
.traduccion {
  border-left: 6px solid var(--sello);
  background: var(--papel-sombra);
  padding: 7px 11px;
}

/* --------------------------------------------------- autocompletado */

.autocompletar { position: relative; display: inline-block; }

.sugerencias {
  position: absolute; z-index: 20;
  left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 0; list-style: none;
  max-height: 288px; overflow-y: auto;
  border: var(--borde);
  background: var(--papel-nuevo);
  box-shadow: 3px 3px 0 rgba(31, 27, 22, .18);
}

.sugerencia a {
  display: block; padding: 6px 10px;
  text-decoration: none; color: var(--tinta);
}
.sugerencia b { display: block; font-size: 12px; line-height: 1.3; }
.sugerencia span {
  font-size: 10px; color: var(--tinta-suave); text-transform: uppercase;
}
/* El teclado y el ratón se resaltan igual: quien navega con flechas debe
   ver lo mismo que quien pasa el ratón por encima. */
.sugerencia.activa a, .sugerencia a:hover, .sugerencia a:focus {
  background: var(--papel-sombra);
}

.sugerencia-vacia {
  padding: 6px 10px; font-size: 12px; color: var(--tinta-suave);
}

/* ------------------------------------------------------------- histórico */

.tira { display: flex; flex-wrap: wrap; gap: 2px; margin: 10px 0; }
.tira a {
  width: 12px; height: 12px; display: block;
  border: 1px solid rgba(0, 0, 0, .25);
  transition: transform .08s;
}
/* La celda es diminuta: al señalarla crece para que se vea cuál se va a
   abrir, y el borde de foco la hace alcanzable por teclado. */
.tira a:hover { transform: scale(1.6); border-color: var(--tinta); z-index: 1; }
.tira a:focus-visible { outline: 2px solid var(--sello); outline-offset: 1px; }
.t1 { background: var(--si); }
.t2 { background: var(--no); }
.t3 { background: var(--abs); }
.t0 { background: var(--papel-sombra); }

/* ---------------------------------------------------------------- cromos */

.cromo-taller { display: grid; grid-template-columns: 1fr; gap: 18px; }
.cromo-vista {
  border: var(--borde); background: var(--papel-sombra);
  padding: 12px; display: flex; justify-content: center;
}
.cromo-vista canvas { width: 100%; max-width: 360px; height: auto; image-rendering: pixelated; }

@media (min-width: 860px) {
  .cromo-taller { grid-template-columns: 380px 1fr; align-items: start; }
}

/* ------------------------------------------------------------------- pie */

.pie {
  border-top: var(--borde);
  background: var(--papel-nuevo);
  padding: 16px 18px;
  font-size: 12px; color: var(--tinta-suave);
}
.pie p { margin: 4px 0; }
.pie-aviso { border-left: 6px solid var(--nc); padding-left: 10px; margin-top: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .ficha { animation: entrar .18s ease-out; }
  @keyframes entrar { from { opacity: 0; transform: translateY(4px); } }
}