/* /voto-util/: rótulo del cálculo, ficha de provincia, gráficos y simulador. */

/* Rótulo: va antes que los datos para que se lea qué son. Separado con filetes, sin contenedor. */
.rotulo {
  margin-block-end: var(--e-5);
  padding-block: var(--e-3);
  border-block: 1px solid var(--linea);
  font-size: var(--t-nota);
  line-height: 1.45;
}
.rotulo p { max-width: var(--medida); margin-block-end: var(--e-2); }
.rotulo p:last-child { margin-block-end: 0; }
.rotulo__titulo { font-size: var(--t-base); font-weight: 700; }
.rotulo__detalle summary { display: flex; align-items: center; min-height: var(--objetivo); color: var(--acento); font-weight: 600; }
.rotulo__detalle p:first-of-type { margin-block-start: var(--e-1); }

.ficha-voto__escanos { margin-block: calc(var(--e-2) * -1) var(--e-3); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.ficha-voto__sub, .provincia-2023 h3 { margin: 0 0 var(--e-2); font-size: var(--t-medio); line-height: 1.2; font-weight: 700; }
.ficha-voto__aviso { margin-block: var(--e-2) 0; }

/* Último escaño y quien va detrás: el nombre manda y la explicación queda debajo. */
.ultimo { margin: 0 0 var(--e-4); }
.ultimo > div { padding-block: var(--e-3); border-block-start: 1px solid var(--linea); }
.ultimo > div:last-child { border-block-end: 1px solid var(--linea); }
.ultimo dt { color: var(--texto-suave); font-size: var(--t-nota); }
.ultimo dd { margin: 0; }
.ultimo strong { display: block; font-size: var(--t-titulo); line-height: 1.15; font-weight: 700; }

/* Reparto: tres columnas caben en 320 px porque el voto va bajo el nombre de la lista. */
.reparto { margin-block-start: var(--e-4); }
.reparto tbody th { min-width: 5.5rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.reparto__voto { display: block; color: var(--texto-suave); font-size: var(--t-nota); font-weight: 400; }
.reparto td.reparto__escanos, .reparto th.reparto__escanos { width: 3.5rem; text-align: end; }
.reparto td.reparto__escanos { font-size: var(--t-medio); font-weight: 700; color: var(--texto-suave); }
.reparto__con-escano td.reparto__escanos { color: var(--texto); }
.reparto td.reparto__estado, .reparto th.reparto__estado { text-align: start; padding-inline-start: var(--e-3); }
.reparto td.reparto__estado { font-size: var(--t-nota); line-height: 1.25; }

/* Cocientes: dos líneas por fila, con el texto arriba y la barra debajo. */
.grafico-cocientes { margin: var(--e-5) 0 0; }
.cocientes li:not(.cocientes__corte) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--e-3);
  padding-block: var(--e-1);
  font-size: var(--t-nota);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.cocientes__valor { font-weight: 600; }
.cocientes__barra { grid-column: 1 / -1; display: block; width: 100%; height: 0.625rem; margin-block-start: 2px; }
.cocientes__entra rect { fill: var(--tinta-4); }
.cocientes__fuera rect { fill: var(--tinta-2); stroke: var(--linea-fuerte); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cocientes__fuera .cocientes__lista, .cocientes__fuera .cocientes__valor { color: var(--texto-suave); font-weight: 400; }
.cocientes__corte {
  margin-block: var(--e-2);
  padding-block: var(--e-1);
  border-block: 2px solid var(--texto);
  font-size: var(--t-nota);
  font-weight: 700;
}
.grafico-cocientes figcaption { margin-block-start: var(--e-3); }

/* Bloques de la página */
.dos-columnas--voto { padding-block-start: var(--e-7); }
.bloque-voto { padding-block-start: var(--e-7); }
.bloque-voto .desplegable p.medida { margin-block-start: var(--e-3); }

/* Total nacional: la barra se ve desde que hay sitio para ella; las cifras, siempre. */
.nacional__barra { display: none; }
.nacional .nota, #nacional .nota { max-width: var(--medida); }
#nacional .tabla { margin-block-end: var(--e-3); }
#nacional .nota { margin-block-end: var(--e-2); }
.nacional tbody th { font-weight: 600; }
.nacional td { font-size: var(--t-base); }
.nacional__fondo { fill: var(--tinta-1); }
.nacional__valor { fill: var(--tinta-4); }
.nacional__mayoria { fill: var(--texto); }
td.nacional__barra svg { display: block; width: 100%; height: 0.75rem; }

.aviso-simulacion { padding-block: var(--e-2); font-weight: 700; border-block: 2px solid var(--texto); }

.disputadas { list-style: none; }
.disputadas li { padding-block: var(--e-2); border-block-end: 1px solid var(--linea); }
.disputadas li:first-child { border-block-start: 1px solid var(--linea); }
.disputadas a {
  display: flex;
  align-items: center;
  min-height: var(--objetivo);
  font-size: var(--t-medio);
  font-weight: 600;
}
.disputadas span { display: block; }
#disputadas .nota { margin-block-start: var(--e-3); margin-block-end: 0; max-width: var(--medida); }

.estados { margin: 0 0 var(--e-4); max-width: 46rem; }
.estados > div { padding-block: var(--e-2); border-block-start: 1px solid var(--linea); }
.estados > div:last-child { border-block-end: 1px solid var(--linea); }
.estados dt { font-weight: 700; }
.estados dd { margin: 0; }

/* Desplegables: simulador y método */
.desplegable summary {
  min-height: var(--objetivo);
  padding-block: var(--e-2);
  font-size: var(--t-medio);
  line-height: 1.3;
  font-weight: 700;
  cursor: pointer;
}
.supuestos { max-width: var(--medida); list-style: disc; padding-inline-start: var(--e-5); }
.supuestos li { margin-block-end: var(--e-2); }

.simulador {
  display: grid;
  gap: var(--e-3) var(--e-6);
  margin-block-end: var(--e-4);
  max-width: 46rem;
}
.simulador__control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--e-3); }
.simulador__control label { font-weight: 600; }
.simulador__control output { font-weight: 700; font-variant-numeric: tabular-nums; }
.simulador__control input {
  grid-column: 1 / -1;
  width: 100%;
  min-height: var(--objetivo);
  margin: 0;
  background: transparent;
  cursor: pointer;
}

/* Cálculo sin JS: una sección por provincia. */
.provincia-2023 { max-width: 46rem; margin-block-start: var(--e-6); padding-block-start: var(--e-4); border-block-start: 1px solid var(--linea-fuerte); scroll-margin-block-start: var(--e-3); }
.provincia-2023:target h3 { background: var(--tinta-1); color: var(--sobre-tinta-1); }

@media (min-width: 32.5em) {
  .nacional__barra { display: table-cell; width: 35%; }
  .simulador { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* La ficha lleva tabla y gráfico: en escritorio pide algo más de ancho que la de /escanos/. */
@media (min-width: 64em) {
  .consulta--voto { grid-template-columns: minmax(0, 1fr) 28rem; }
  .consulta--voto .consulta__mapa { position: sticky; inset-block-start: var(--e-3); }
}