/* todoloquepagas — /a-donde-van-tus-impuestos/: a qué se destina el gasto público y la deuda.
   Se carga con <Base estilos={['datos', 'destino']}>, después de tokens.css, componentes.css, sitio.css y datos.css.
   Regla: todos los colores salen de tokens.css. Aquí no se escribe ningún color literal.
   Las piezas anchas (.cien, .tus-euros) usan las mismas pistas que la página (--pistas y --canal): lo visual en el rail y
   lo que se lee en la lectura, como manda «Maquetación» (docs/CONSTRUCCION.md). */

/* ---- De cada 100 €: la barra de 100 € y las cifras que más pesan -------------- */
.cien { display: grid; gap: var(--espacio-8); align-items: start; }
.cien > * { min-width: 0; }
.cien__figura { display: grid; gap: var(--espacio-3); margin: 0; }
.cien__figura svg { display: block; width: 100%; max-width: 420px; height: auto; }
@media screen and (min-width: 60em) {
  .cien { grid-template-columns: var(--pistas); column-gap: var(--canal); }
  .cien__figura { grid-column: rail; grid-row: 1; }
  .cien__texto { grid-column: lectura; grid-row: 1; }
}
.cien__texto { display: grid; gap: var(--espacio-8); }
.cien__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-6); margin: 0; padding: 0; list-style: none; }
.cien__item { display: grid; align-content: start; gap: var(--espacio-1); padding-top: var(--espacio-3); border-top: var(--grosor-control) solid var(--tinta); }
.cien__valor { font: 860 clamp(44px, 11vw, 72px)/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cien__valor .tlqp-subrayado { --brocha-izq: 0.1em; --brocha-der: 0.16em; }
.cien__que { font: 650 19px/24px var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
.cien__detalle { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
/* Tres datos sueltos debajo de las cifras: una frase y su cifra. */
.cien__datos { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--grosor-linea) solid var(--linea); }
.cien__datos li { padding-block: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); font: var(--tipo-cuerpo-pequeno); text-wrap: pretty; }
.cien__datos b { font-weight: 760; font-variant-numeric: tabular-nums; }

/* La barra de 100 €, en SVG (components/destino/BarraCien.astro). */
.grafica-cien .segmento { fill: var(--tinta); }
.grafica-cien .segmento--destacado { fill: var(--subrayador); stroke: var(--sobre-subrayador); stroke-width: 2; }
.grafica-cien .guia { fill: none; stroke: var(--linea-control); stroke-width: 1; }
.grafica-cien .rotulo-cifra { font: 760 15px/1 var(--font-sans); fill: var(--tinta); }
.grafica-cien .rotulo-nombre { font: 450 15px/1 var(--font-sans); fill: var(--tinta); }
.grafica-cien .rotulo-extremo { font: 650 13px/1 var(--font-sans); fill: var(--tinta-suave); }

/* ---- Con tus euros: lo de toda una vida, repartido como el gasto ------------------
   Con un resultado guardado en el navegador, cliente/destino.ts cambia las cifras y los textos antes de que se pinte la
   página (va en `antesDePintar`): la misma caja, las mismas filas, sin saltos. */
.tus-euros { display: grid; gap: var(--espacio-8); align-items: start; }
.tus-euros > * { min-width: 0; }
/* En el móvil, «Cómo se reparte» va después del ticket. */
.tus-euros__como { order: 1; }
@media screen and (min-width: 60em) {
  .tus-euros { grid-template-columns: var(--pistas); grid-template-rows: auto 1fr; column-gap: var(--canal); }
  .tus-euros__ticket { grid-column: rail; grid-row: 1 / span 2; }
  .tus-euros__texto { grid-column: lectura; grid-row: 1; }
  /* «Cómo se reparte y qué incluye», debajo de la caja del texto y al lado del ticket (26-10-2026). */
  .tus-euros__como { grid-column: lectura; grid-row: 2; }
}
.tus-euros__texto { display: grid; align-content: start; gap: var(--espacio-4); padding: var(--espacio-5); border-left: var(--grosor-control) solid var(--tinta); background: var(--superficie-hundida); }
.tus-euros[data-con-respuestas] .tus-euros__texto { background: var(--subrayador-suave); }
.tus-euros__texto > * { margin: 0; max-width: 100%; }
.tus-euros__rotulo.tlqp-etiqueta { color: var(--tinta); }
.tus-euros__frase { font: 450 clamp(19px, 2.6vw, 24px)/1.35 var(--font-sans); text-wrap: pretty; }
.tus-euros__frase:focus { outline: none; }
.tus-euros__frase:focus-visible { outline: var(--grosor-foco) solid var(--foco); outline-offset: 4px; }
.tus-euros__frase b { font-weight: 860; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tus-euros__anio { font: var(--tipo-cuerpo); text-wrap: pretty; }
.tus-euros__anio b { font-weight: 760; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tus-euros__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-5); }
.tus-euros__acciones .tlqp-boton--texto { padding-block: 0; }
.tus-euros__nota { font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }
.tus-euros__ticket { display: flex; justify-content: center; }
/* Con las medidas del tique de la portada (.calc-tique--resumen en componentes.css). */
.tus-euros__ticket .tlqp-ticket { flex: 0 1 380px; min-width: 0; }
.tus-euros__ticket .tlqp-ticket__papel { container-type: inline-size; }
.tus-euros__ticket .tlqp-ticket__cabecera { margin-bottom: var(--espacio-3); padding-bottom: var(--espacio-2); border-bottom: 2px dashed var(--tinta); font: 600 12px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tus-euros__ticket .tlqp-ticket__cabecera small { font: var(--tipo-dato); letter-spacing: 0; text-transform: none; }
.tus-euros__ticket .tlqp-ticket__fila { padding-block: 2px; font: 450 15px/22px var(--font-mono); }
.tus-euros__ticket .tlqp-ticket__total { display: grid; gap: var(--espacio-1); font: 700 20px/26px var(--font-mono); text-transform: uppercase; }
.tus-euros__ticket .tlqp-ticket__total .tlqp-subrayado { justify-self: start; padding: 0; margin: 0; background: none; font: 860 min(56px, 16cqi)/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-transform: none; }
.tus-euros__ticket .tlqp-ticket__nota { font: 400 12px/17px var(--font-mono); }
@media screen and (min-width: 60em) { .tus-euros__ticket .tlqp-ticket__fila { font-size: 13px; line-height: 19px; } }
@media (max-width: 25em) { .tus-euros__ticket .tlqp-ticket__fila { font-size: 14px; line-height: 20px; } }
@media screen and (min-width: 60em) { .tus-euros__ticket { justify-content: flex-start; } }
.tus-euros .tlqp-ticket { max-width: 23.75rem; } /* 380 px; en rem, crece con la letra ampliada */
.tus-euros .tlqp-ticket__fila > :first-child { min-width: 0; }
.tus-euros .tlqp-ticket__fila--aparte > :first-child { padding-left: var(--espacio-4); }
.tus-euros .tlqp-ticket__total > :last-child { white-space: nowrap; }

/* ---- Partida a partida: una función por desplegable -------------------------------
   Un <details> propio (no el del manual): el resumen lleva la cuadrícula de 100, el nombre y la cifra. El signo es
   el del manual (+ / −) y el foco, el de toda la web. */
.funciones { display: grid; margin: 0; padding: 0; border-top: var(--grosor-control) solid var(--tinta); }
.funcion { border-bottom: var(--grosor-linea) solid var(--linea); }
.funcion > summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 24px; align-items: center; gap: var(--espacio-2) var(--espacio-4); min-height: 76px; padding-block: var(--espacio-4); cursor: pointer; list-style: none; }
.funcion > summary::-webkit-details-marker { display: none; }
.funcion > summary::after { content: "+"; font: 450 28px/1 var(--font-sans); text-align: center; }
.funcion[open] > summary::after { content: "−"; }
.funcion > summary:hover .funcion__nombre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.funcion__cuadricula { display: block; width: 48px; height: 48px; }
.funcion__cuadricula .lleno { fill: var(--tinta); }
.funcion__cuadricula .vacio { fill: var(--linea); }
.funcion__textos { display: grid; gap: 2px; }
.funcion__nombre { font: 650 19px/24px var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
.funcion__resumen { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
.funcion__cifra { display: grid; justify-items: end; font: 860 26px/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.funcion__cifra small { margin-top: var(--espacio-1); font: var(--tipo-nota); letter-spacing: normal; color: var(--tinta-suave); }
@media (max-width: 30em) {
  .funcion > summary { grid-template-columns: 40px minmax(0, 1fr) auto 20px; gap: var(--espacio-2) var(--espacio-3); }
  .funcion__cuadricula { width: 40px; height: 40px; }
  .funcion__nombre { font-size: 17px; line-height: 22px; }
  .funcion__cifra { font-size: 22px; }
}
.funcion__cuerpo { display: grid; gap: var(--espacio-5); padding: var(--espacio-2) 0 var(--espacio-8); }
.partidas { display: grid; gap: var(--espacio-5); margin: 0; padding: 0; list-style: none; }
.partida { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-1) var(--espacio-4); align-items: baseline; }
.partida__nombre { font: 650 17px/24px var(--font-sans); }
.partida__cifra { font: 760 17px/24px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.partida__pista { grid-column: 1 / -1; height: 10px; background: var(--superficie-hundida); }
.partida__barra { display: block; height: 100%; min-width: 2px; background: var(--familia); }
.partida__detalle { grid-column: 1 / -1; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
.partida__datos { grid-column: 1 / -1; font: var(--tipo-dato); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.funcion__pie { padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); font: var(--tipo-nota); color: var(--tinta-suave); }
/* Lo que se obtiene con el gasto de la función: los primeros indicadores de su área y el enlace a su página (desde el
   18-10-2026, cuando «Cómo se usan tus impuestos» se juntó con esta página). */
.funcion__obtiene { display: grid; gap: var(--espacio-3); padding: var(--espacio-4) var(--espacio-5); border-radius: var(--radio-m); background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.funcion__obtiene-titulo { margin: 0; font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.funcion__area { display: grid; gap: var(--espacio-2); }
.funcion__area + .funcion__area { padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
.funcion__datos { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.funcion__datos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-1) var(--espacio-4); align-items: baseline; padding-block: var(--espacio-2); border-bottom: var(--grosor-linea) solid var(--linea); font: var(--tipo-cuerpo-pequeno); }
.funcion__datos b { font-weight: 760; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.funcion__datos small { grid-column: 1 / -1; font: var(--tipo-nota); color: var(--tinta-suave); }
.funcion__area-enlace { justify-self: start; font: 650 16px/22px var(--font-sans); }
@media print {
  .funcion > summary::after { display: none; }
  .funcion:not([open]) > .funcion__cuerpo { display: grid; }
}

/* El dato que cruza las funciones (la investigación) es un <Recuadro tipo="dato"> (ritmo.css). */

/* ---- Comparación entre países ------------------------------------------------------- */
.comparacion { display: grid; gap: var(--espacio-10); }
@media (min-width: 60em) { .comparacion { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-8); } }
.comparacion .figura { align-content: start; }
.comparacion .figura__titulo { font: 650 19px/24px var(--font-sans); letter-spacing: -0.01em; }
.comparacion .tlqp-barras__fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
.comparacion .tlqp-barras__pista { grid-column: 1 / -1; grid-row: 2; }
.comparacion .tlqp-barras__nombre { font-size: 15px; }
/* Las medias (de la UE y de la zona del euro): el mismo gris, con borde, para que no se confundan con un país. */
.comparacion .es-media .tlqp-barras__barra { border: var(--grosor-linea) solid var(--tinta-suave); border-left: 0; }
.comparacion .es-media .tlqp-barras__nombre { color: var(--tinta-suave); }
/* El saldo: las barras salen de un cero en medio, a la izquierda el déficit y a la derecha el superávit. */
.saldo { display: grid; gap: var(--espacio-3); margin: 0; padding: 0; list-style: none; }
.saldo__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; align-items: center; }
.saldo__nombre { font: 450 15px/20px var(--font-sans); }
.saldo__valor { font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.saldo__pista { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, var(--izquierda)) 2px minmax(0, var(--derecha)); height: 16px; }
.saldo__pista::before { content: ""; grid-column: 2; grid-row: 1; background: var(--tinta-suave); }
.saldo__barra { grid-row: 1; height: 100%; min-width: 2px; background: var(--dato-neutro); }
.saldo__barra--deficit { grid-column: 1; justify-self: end; border-radius: 4px 0 0 4px; }
.saldo__barra--superavit { grid-column: 3; justify-self: start; border-radius: 0 4px 4px 0; }
.saldo__fila--tu .saldo__barra { height: 24px; margin-block: -4px; background: var(--subrayador); border: var(--grosor-control) solid var(--sobre-subrayador); }
.saldo__fila--tu :is(.saldo__nombre, .saldo__valor) { font-weight: 860; }
.saldo__fila.es-media .saldo__barra { border: var(--grosor-linea) solid var(--tinta-suave); }
.saldo__fila.es-media .saldo__nombre { color: var(--tinta-suave); }
.saldo__ejes { display: flex; justify-content: space-between; font: var(--tipo-nota); color: var(--tinta-suave); }

/* ---- Las gráficas de la serie (components/destino/SerieAnual.astro) ------------------- */
.grafica .columna { fill: var(--tinta); }
.grafica .columna--ultima { fill: var(--tinta); }
.grafica .punto-ultimo { fill: var(--subrayador); stroke: var(--sobre-subrayador); stroke-width: 2; }

/* Lo que va aparte (el déficit entre los ingresos): rayado, como en el manual. */
.partida--aparte .partida__nombre { color: var(--tinta-suave); }
.partida--aparte .partida__barra { background: repeating-linear-gradient(135deg, var(--tinta-suave) 0 2px, transparent 2px 6px); border: var(--grosor-linea) solid var(--tinta-suave); }

/* La variante media de las series: en una figura de media página (de 521 a 859 px), con el texto a 12,5 px. */
.grafica--media { display: none; }
.grafica--media text { font-size: 12.5px; }
@media screen { .grafica--media text { paint-order: stroke; stroke: var(--papel); stroke-width: 3px; stroke-linejoin: round; } }
@container (min-width: 521px) and (max-width: 859.98px) {
  .grafica--movil.serie-anual { display: none; }
  .grafica--media.serie-anual { display: block; }
}
@media print { .grafica--media { display: none; } }

/* La figura del saldo: la lista y, debajo, a qué lado va cada cosa. */
.saldo-figura { display: grid; gap: var(--espacio-2); }
.saldo__ejes span + span { text-align: right; }

/* El ticket de «Con tus euros», a 14 px: los nombres largos caben en un renglón dentro del rail. */
.tus-euros .tlqp-ticket__papel { font-size: 14px; line-height: 20px; }

/* De dónde sale: cada línea de los ingresos con el color de su familia de impuestos (ritmo editorial; la leyenda va
   debajo). Lo que no son impuestos, en el gris de datos; el déficit, rayado. */
.ingresos .partida:not([data-familia]):not(.partida--aparte) .partida__barra { background: var(--dato-neutro); }

/* ---- En 30 años: el empleo público, las demás ayudas, la extranjería y el fraude medido ---------------------------
   «Tu parte» (components/destino/TuParte.astro): lo que iría a cada línea de lo que se paga en toda la vida. Es «lo
   tuyo», en amarillo suave con su raya, como «Con tus respuestas» en las demás páginas; con un resultado guardado,
   cliente/destino.ts cambia la frase antes de pintar. */
.tu-parte { display: grid; gap: var(--espacio-2); padding: var(--espacio-4) var(--espacio-5); border-left: 6px solid var(--subrayador); border-radius: 0 var(--radio-m) var(--radio-m) 0; background: var(--subrayador-suave); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tu-parte p { margin: 0; }
.tu-parte__rotulo.tlqp-etiqueta { color: var(--tinta); }
.tu-parte__frase { font: 450 clamp(18px, 2.3vw, 21px)/1.4 var(--font-sans); text-wrap: pretty; }
.tu-parte__frase b { font-weight: 860; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tu-parte__nota { font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }

/* Los estudios de la extranjería: quién, con qué datos, qué sale y cómo lo calcula. Entre filetes, sin cajas. */
.estudios { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--grosor-control) solid var(--tinta); }
.estudio { display: grid; gap: var(--espacio-1); padding-block: var(--espacio-4); border-bottom: var(--grosor-linea) solid var(--linea); }
.estudio > p { margin: 0; text-wrap: pretty; }
.estudio__quien { font: 760 19px/26px var(--font-sans); letter-spacing: -0.01em; }
.estudio__datos { font: var(--tipo-nota); color: var(--tinta-suave); }
.estudio__resultado { font: var(--tipo-cuerpo-lectura); }
.estudio__metodo { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.estudio__metodo b { font-weight: 650; color: var(--tinta); }

/* Lo que se mide del fraude y la corrupción: una tarjeta por medida, con la cifra grande, lo que supone por habitante y,
   debajo, lo que mide y lo que no (lo que no mide, con una raya rayada: lo que queda fuera). */
.medidas { display: grid; gap: var(--espacio-8) var(--canal); margin: 0; padding: 0; list-style: none; }
@media (min-width: 46em) { .medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .medidas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.medida { display: grid; gap: var(--espacio-2); align-content: start; padding-top: var(--espacio-4); border-top: 6px solid var(--tinta); }
.medida > p { margin: 0; }
.medida__nombre { font: 760 19px/26px var(--font-sans); letter-spacing: -0.015em; }
.medida__cifra { font: 860 clamp(30px, 4vw, 40px)/1.05 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.medida__habitante { font: var(--tipo-cuerpo-pequeno); }
.medida__habitante b { font-weight: 760; font-variant-numeric: tabular-nums; }
.medida__detalle { font: var(--tipo-cuerpo-pequeno); text-wrap: pretty; }
.medida__alcance { display: grid; gap: var(--espacio-2); margin: var(--espacio-2) 0 0; }
.medida__alcance > div { display: grid; gap: 2px; padding-left: var(--espacio-3); border-left: 4px solid var(--tinta); }
.medida__alcance > .medida__no { border-left: 4px dashed var(--tinta-suave); }
.medida__alcance dt { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; }
.medida__alcance dd { margin: 0; font: var(--tipo-cuerpo-pequeno); text-wrap: pretty; }
.medida__fuente { font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }

/* Las prestaciones por tipo: cuatro gráficas pequeñas con la misma escala, de dos en dos desde 46 em. */
.multiples { display: grid; gap: var(--espacio-8) var(--canal); }
@media (min-width: 46em) { .multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.multiples__figura { align-content: start; }
.multiples__nota { font: var(--tipo-nota); color: var(--tinta-suave); }