/* todoloquepagas — zona de datos: /metodologia/ y /datos/.
   Se carga con <Base estilos={['datos']}>, después de tokens.css, componentes.css y sitio.css.
   Regla: todos los colores salen de tokens.css. Aquí no se escribe ningún color literal. */

/* El índice de la página («En esta página») es común: .con-indice e .indice-pegado, en sitio.css. */

/* Los bloques NO llevan `content-visibility: auto`, aunque las páginas sean largas. Con él, el navegador calcula adónde
   lleva un enlace del índice con el alto supuesto de los bloques que aún no ha maquetado, y aterriza en otro sitio: en
   Firefox y en WebKit (Safari), siempre, a varias pantallas del apartado; en Chromium, según por dónde se haya pasado antes.
   Lo vigilan herramientas/pruebas/datos.mjs (con Chromium) y herramientas/otros-navegadores.mjs (con Firefox y WebKit). */

/* El salto a un ancla deja aire encima del titular. */
.bloque[id], .ancla { scroll-margin-top: var(--espacio-6); }

/* ---- Figura: gráfica, leyenda y nota de fuente --------------------------------- */
.figura { display: grid; gap: var(--espacio-4); margin: 0; }
.figura > * { min-width: 0; }
.figura__titulo { font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); max-width: var(--ancho-lectura); }

/* Cada gráfica se dibuja dos veces: una para sitios estrechos y otra para anchos. Manda el ancho de la figura, no el
   de la pantalla: media columna, o una columna con el índice al lado, usa la estrecha. Así el texto de la gráfica no
   baja de 12 px: la estrecha (400 de ancho, texto de 14) se enseña entre 344 y 520 px; la ancha (880, texto de 12,5),
   desde 860, que es lo que mide la columna cuando lleva el índice al lado. Un navegador sin consultas de contenedor
   enseña siempre la estrecha. */
.figura { container-type: inline-size; }
.grafica--movil { max-width: 520px; }
.grafica--movil text { font-size: 14px; }
/* La ancha ocupa todo el ancho de su figura: en /datos/ las figuras van de lado a lado de la página (1.120 px). */
.grafica--escritorio { display: none; }
.grafica--escritorio text { font-size: 12.5px; }
/* Un halo del color del papel, como en «La línea de tu vida» de la calculadora: en el móvil la línea de «lo que recibe»
   pasaba por encima de «10.000 €» y la raya de la jubilación, por «Lo que recibe». Solo en pantalla: Firefox traza en el
   PDF todo texto con contorno, y dejaría de ser texto. */
@media screen { :is(.grafica--movil, .grafica--escritorio) text { paint-order: stroke; stroke: var(--papel); stroke-width: 3px; stroke-linejoin: round; } }
@container (min-width: 860px) {
  .grafica--movil { display: none; }
  .grafica--escritorio { display: block; }
}
.grafica-unidad { font: var(--tipo-nota); color: var(--tinta-suave); }
/* Lo que hay que leer antes de sacar conclusiones de una gráfica por año (los últimos años de la corrupción salen bajos
   porque aún no se sabe): debajo de la gráfica, con una raya a la izquierda para que no se pierda entre las notas. */
.figura__aviso { font: var(--tipo-nota); color: var(--tinta); max-width: var(--ancho-lectura); padding-left: var(--espacio-3); border-left: 3px solid var(--subrayador); margin: 0; }
@media print {
  .grafica--movil { display: none; }
  .grafica--escritorio { display: block; }
}
.grafica .marca { stroke: var(--tinta-suave); stroke-width: 1; stroke-dasharray: 3 3; }
.grafica .linea-tinta { fill: none; stroke: var(--tinta); stroke-width: 2; }
/* Los años sin dato de una serie anual (SerieAnual): el tramo que los cruza, en raya discontinua. */
.grafica .linea-hueco { fill: none; stroke: var(--tinta-suave); stroke-width: 1.5; stroke-dasharray: 3 4; }
.grafica .linea-neutra { fill: none; stroke: var(--dato-neutro); stroke-width: 2; }
.grafica .punto-tinta { fill: var(--tinta); }
.grafica .punto-neutra { fill: var(--dato-neutro); }

/* ---- Leyenda: muestra de color, nombre y valor, con el texto en tinta ----------- */
.leyenda { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-6); margin: 0; padding: 0; list-style: none; font: var(--tipo-cuerpo-pequeno); }
.leyenda li { display: inline-flex; align-items: baseline; gap: var(--espacio-2); }
.leyenda b { margin-left: var(--espacio-2); font: var(--tipo-dato); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leyenda__muestra { flex: none; width: 14px; height: 14px; transform: translateY(2px); }
.leyenda__muestra--tinta { background: var(--tinta); }
.leyenda__muestra--neutro { background: var(--dato-neutro); }
.leyenda__muestra--destacado { background: var(--subrayador); border: var(--grosor-control) solid var(--sobre-subrayador); }
.leyenda__muestra--linea { height: 0; border-top: var(--grosor-control) solid var(--tinta); transform: translateY(-4px); }
.leyenda__muestra--marca { width: 0; border-left: 1px dashed var(--tinta-suave); }
.leyenda__muestra--aparte { background: repeating-linear-gradient(135deg, var(--tinta-suave) 0 2px, transparent 2px 6px); border: 1px solid var(--tinta-suave); }
.leyenda__muestra--grupo-trabajo { background: var(--grupo-trabajo); }
.leyenda__muestra--grupo-consumo { background: var(--grupo-consumo); }
.leyenda__muestra--grupo-bienes { background: var(--grupo-bienes); }
.leyenda__muestra--grupo-resto { background: var(--grupo-resto); }

/* ---- Tablas de datos: detalles que sitio.css no trae ----------------------------- */
.tabla-titulo { max-width: var(--ancho-lectura); font: var(--tipo-nota); color: var(--tinta-suave); }
.tabla-bloque { display: grid; gap: var(--espacio-2); min-width: 0; }
.tabla-bloque > * { min-width: 0; }
.tabla-datos--zona thead th { white-space: normal; vertical-align: bottom; }
.tabla-datos--zona thead th.num { min-width: 5.5em; }
.tabla-datos small { display: block; font: var(--tipo-nota); font-weight: 450; color: var(--tinta-suave); white-space: normal; }
.tabla-datos tbody th { min-width: 9.5em; }
.tabla-datos tfoot > tr > * { border-top: var(--grosor-control) solid var(--tinta); border-bottom: 0; font-weight: 650; }
.tabla-datos .fila-suave > * { color: var(--tinta-suave); }
.tabla-datos td.texto { min-width: 16em; }
.tabla-datos--ajustada { width: auto; min-width: min(100%, 520px); }
/* Tablas de muchas columnas de cifras (el contraste): las cabeceras se parten y, en pantallas estrechas,
   la primera columna se estrecha para que quepan más cifras a la vez. */
.tabla-datos--compacta thead th.num { white-space: normal; }
@media (max-width: 49.99em) {
  .tabla-datos--compacta th, .tabla-datos--compacta td { padding-right: var(--espacio-3); }
  /* Sin partir una palabra: si la más larga no cabe en 7,6 em, la columna crece lo justo (overflow-wrap normal). Con 6,6,
     «Absolutorias» se pegaba a «Condenatorias» (revisión del 18-10-2026). */
  .tabla-datos--compacta thead th.num { min-width: 4.6em; max-width: 7.6em; padding-left: var(--espacio-2); overflow-wrap: normal; }
  .tabla-datos--compacta tbody th { min-width: 7.5em; }
  .tabla-datos--notas-anchas tbody th small { display: none; }
}

/* Una tabla larga dentro de un desplegable (components/datos/TablaPlegada.astro): es el .detalle de ritmo.css, que trae
   también lo suyo (ocupa lo que ocupe la tabla y va sin filete al lado). */

/* ---- Metodología ------------------------------------------------------------------- */
/* El resumen de arriba: «En 30 segundos» y, debajo, «En corto», en la misma banda. En corto va en dos columnas a lo
   ancho de la página: siete frases, cada una con su idea en negrita. */
.metodo-en-corto { display: grid; gap: var(--espacio-4); margin-top: var(--espacio-10); padding-top: var(--espacio-6); border-top: var(--grosor-linea) solid var(--linea); }
.metodo-en-corto__titulo { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta); }
.metodo-en-corto ul { margin: 0; padding: 0; list-style: none; font: 450 17px/26px var(--font-sans); column-gap: var(--espacio-8); }
.metodo-en-corto li { position: relative; padding-left: 1.5em; text-wrap: pretty; break-inside: avoid; }
.metodo-en-corto li + li { margin-top: var(--espacio-4); }
.metodo-en-corto li:first-child { margin-top: 0; }
.metodo-en-corto li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.75em; height: 3px; background: var(--tinta); }
.metodo-en-corto strong { font-weight: 760; }
/* En dos columnas, una detrás de otra (se lee hacia abajo y sigue arriba en la segunda). */
@media screen and (min-width: 60em) { .metodo-en-corto ul { columns: 2; } .metodo-en-corto li, .metodo-en-corto li + li { display: inline-block; width: 100%; margin-top: 0; margin-bottom: var(--espacio-4); } }

/* El índice por temas: una tarjeta por tema, con su raya de tinta, una frase y sus apartados. Tres por fila desde 60em, y el
   de las familias ocupa dos. Sin sombra: el borde fino de las tarjetas de la web. */
.metodo-temas { display: grid; gap: var(--espacio-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .metodo-temas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metodo-tema--ancho { grid-column: span 2; } }
@media screen and (min-width: 60em) { .metodo-temas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.metodo-tema { display: grid; align-content: start; gap: var(--espacio-3); padding: var(--espacio-5); border: var(--grosor-linea) solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); }
.metodo-tema__titulo { display: flex; align-items: center; gap: var(--espacio-3); margin: 0; font: 650 19px/24px var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
.metodo-tema__texto { margin: 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta); text-wrap: pretty; }
.metodo-tema__apartados { display: flex; flex-wrap: wrap; gap: var(--espacio-1) var(--espacio-4); margin: 0; padding: var(--espacio-3) 0 0; border-top: var(--grosor-linea) solid var(--linea); list-style: none; font: 650 15px/22px var(--font-sans); }
.metodo-tema__apartados li { display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: 32px; }
/* Las familias, en columnas: cada una con la muestra del color de su familia y su nombre al lado. */
.metodo-tema__apartados li[data-familia]::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--familia); }
.metodo-tema__apartados--familias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 0 var(--espacio-4); }
@media (max-width: 30em) { .metodo-tema { padding: var(--espacio-4); } }

/* La cifra de cada familia (components/datos/DatoFamilia.astro): el recuadro «dato» más bajo, con la cifra a la
   izquierda y la frase a la derecha. */
.dato-familia { padding-block: var(--espacio-4); }
@media (min-width: 40em) {
  .dato-familia { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--espacio-6); }
  .dato-familia > .recuadro__rotulo { grid-column: 1 / -1; }
  .dato-familia > .recuadro__cifra { font-size: clamp(36px, 4vw, 44px); }
}

/* Lo que recibes, en la metodología: las tres partidas, una al lado de otra, con su raya encima. */
@media (min-width: 40em) {
  .lista-iconos--compacta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-6); }
  .lista-iconos--compacta > li { grid-template-columns: minmax(0, 1fr); }
  .lista-iconos--compacta .lista-iconos__cifra { font-size: clamp(28px, 3vw, 34px); }
}

/* Las convenciones, numeradas: el número, en la tinta de la familia, delante de cada una. */
.metodo-numeradas { counter-reset: convencion; }
.metodo-numeradas > .detalle { counter-increment: convencion; }
.metodo-numeradas > .detalle > summary .detalle__titulo::before { content: counter(convencion) ". "; font: 860 15px/1 var(--font-sans); color: var(--familia-tinta); }
/* Dos columnas en pantallas anchas: el texto a la izquierda y la cifra de referencia a la derecha. */
.metodo-resumen { display: grid; gap: var(--espacio-3); max-width: var(--ancho-lectura); padding: var(--espacio-4) var(--espacio-5); border: var(--grosor-linea) solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); font: var(--tipo-cuerpo-pequeno); }
.metodo-resumen__titulo { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.metodo-resumen dl { display: grid; gap: var(--espacio-1); margin: 0; }
.metodo-resumen dl > div { display: flex; justify-content: space-between; gap: var(--espacio-4); align-items: baseline; }
.metodo-resumen dd { margin: 0; font: var(--tipo-dato); font-variant-numeric: tabular-nums; white-space: nowrap; }
.metodo-resumen .es-total { padding-top: var(--espacio-2); border-top: var(--grosor-linea) solid var(--linea); font-weight: 650; }

/* Listas de límites y pendientes: texto pequeño, en una o dos columnas. */
.lista-notas { display: grid; gap: var(--espacio-2); max-width: var(--ancho-lectura); margin: 0; padding-left: var(--espacio-5); font: var(--tipo-cuerpo-pequeno); }
.lista-notas li::marker { color: var(--tinta-suave); }

/* El registro de cambios: fecha y texto. */
.cambios { display: grid; gap: var(--espacio-3); max-width: var(--ancho-lectura); margin: 0; padding: 0; list-style: none; }
.cambios > li { display: grid; gap: var(--espacio-2); padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
.cambios time { font: var(--tipo-dato); color: var(--tinta-suave); }

/* ---- Explorador ---------------------------------------------------------------------- */
/* Dos mapas, o dos gráficas, lado a lado en pantallas anchas. */
.pareja { display: grid; gap: var(--espacio-8); }
.pareja > * { min-width: 0; }
@media (min-width: 60em) { .pareja { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* El probador: elegir sueldo y provincia y ver la cifra (mejora con JavaScript). */
.probador { display: grid; gap: var(--espacio-5); padding: var(--espacio-6) var(--espacio-5); border: var(--grosor-control) solid var(--tinta); border-radius: var(--radio-l); background: var(--superficie); }
.probador__controles { display: grid; gap: var(--espacio-5); align-items: start; }
@media (min-width: 50em) { .probador__controles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.probador__resultado { display: grid; gap: var(--espacio-6); }
.probador__resultado > * { min-width: 0; }
/* El desplegable, con la flecha de la marca (la misma de la portada y las calculadoras, calculadora.css). */
.probador__select { position: relative; }
.probador__select select { width: 100%; padding-right: var(--espacio-12); border-radius: var(--radio-m); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.probador__select::after { content: ""; position: absolute; top: 50%; right: var(--espacio-5); width: 9px; height: 9px; margin-top: -8px; border-right: var(--grosor-control) solid var(--tinta); border-bottom: var(--grosor-control) solid var(--tinta); transform: rotate(45deg); pointer-events: none; }
.probador__select select option { background: var(--superficie); color: var(--tinta); }
.probador__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--espacio-4) var(--espacio-6); margin: 0; padding: 0; list-style: none; }
/* Con cuatro, las cuatro en fila o dos y dos (el interruptor de sitio.css, «Tarjeta-enlace»). */
.probador__cifras:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 200px), clamp(calc(25% - 18px - 1px), calc((872px - 100%) * 999), calc(50% - 12px - 1px))), 1fr)); }
.probador__cifras li { display: grid; gap: var(--espacio-1); padding-top: var(--espacio-3); border-top: var(--grosor-control) solid var(--tinta); }
.probador__cifras span { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.probador__cifras b { font: 860 clamp(26px, 5vw, 34px)/1.05 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.probador__cifras small { font: var(--tipo-nota); color: var(--tinta-suave); }

/* ---- /lo-que-recibes/, «Con otros ingresos»: lo que se paga y lo que se recibe, en barras a la misma escala ---------
   Dos barras por nivel: lo que se paga en tinta y lo que se recibe en el gris de datos (lo recibido no es de ninguna
   familia de impuestos: no lleva color de familia). Va con la tabla de las mismas cifras; la etiqueta del conjunto las
   dice todas. */
.paga-recibe { display: grid; gap: var(--espacio-5); max-width: var(--ancho-lectura); }
.paga-recibe__leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-3); margin: 0; font: var(--tipo-cuerpo-pequeno); }
.paga-recibe__muestra { display: inline-block; width: 14px; height: 14px; margin-left: var(--espacio-2); }
.paga-recibe__muestra:first-child { margin-left: 0; }
.paga-recibe__muestra--paga, .paga-recibe__barra--paga { background: var(--tinta); }
.paga-recibe__muestra--recibe, .paga-recibe__barra--recibe { background: var(--dato-neutro); }
.paga-recibe__nivel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-1) var(--espacio-3); align-items: center; }
.paga-recibe__nombre { grid-column: 1 / -1; margin: 0; font: 650 17px/24px var(--font-sans); }
.paga-recibe__barra { display: block; height: 14px; min-width: 2px; border-radius: 0 3px 3px 0; }
.paga-recibe__cifra { font: var(--tipo-dato); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
/* En el área de inmigración (areas/VidaEntera.astro), debajo del nombre: el sueldo y la diferencia, en pequeño. */
.paga-recibe__nota { display: block; font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }

/* Las normas que pueden caer: el aviso, en su recuadro «Ojo»; la lista de lo que tocan, debajo, como texto (dentro del
   recuadro era una caja amarilla de una pantalla). */
.normas-pendientes__lista { margin-top: var(--espacio-5); }

/* ---- Descargas (/datos/descargas/): un fichero por fila, entre filetes ------------------------------------------- */
.descargas { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--grosor-control) solid var(--tinta); }
.descarga { display: grid; gap: var(--espacio-1); padding-block: var(--espacio-4); border-bottom: var(--grosor-linea) solid var(--linea); }
.descarga > p { margin: 0; }
.descarga__nombre { font: 760 19px/26px var(--font-sans); letter-spacing: -0.01em; }
.descarga__texto { font: var(--tipo-cuerpo-pequeno); text-wrap: pretty; }
.descarga__datos { font: var(--tipo-nota); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
/* Con varias líneas, la segunda y las siguientes, además, en trama discontinua (26-10-2026, gráficas accesibles): se
   distinguen sin depender del color, como la serie secundaria de las gráficas del panel. */
.grafica .linea-trama { stroke-dasharray: 7 4; }