/* ¿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); }

/* 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: "┈"; }

.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); }

.cifras {
  display: flex; gap: 18px; flex-wrap: wrap; font-size: 20px; font-weight: 700;
}

/* ---------------------------------------------------------------- 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;
}

/* ------------------------------------------------------------------ álbum */

.album {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}

.cromo-mini {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 5px 6px;
  background: var(--papel-nuevo);
  border: 2px solid var(--tinta);
  border-top: 7px solid var(--color-grupo, var(--nc));
  box-shadow: 3px 3px 0 rgba(31, 27, 22, .18);
  text-decoration: none; color: var(--tinta);
  text-align: center;
}
.cromo-mini:hover { background: var(--papel-sombra); }

.cromo-mini-nombre {
  font-size: 10px; font-weight: 700; line-height: 1.2;
  word-break: break-word;
}
.cromo-mini-meta { font-size: 9px; color: var(--tinta-suave); }

.cromo-mini-cifras {
  display: flex; gap: 5px; font-size: 10px; font-weight: 700;
  border-top: 1px dashed var(--tinta-suave);
  padding-top: 3px; margin-top: 2px; width: 100%;
  justify-content: center;
}

/* ----------------------------------------------------------------- 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;
}

/* ------------------------------------------------------------- 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); } }
}