/* todoloquepagas — «Cómo se usan tus impuestos» (/como-se-usan-tus-impuestos/ y sus áreas).
   Se carga con <Base estilos={['datos', 'destino', 'areas']}>, después de tokens.css, componentes.css, sitio.css, datos.css
   y destino.css. Regla: todos los colores salen de tokens.css; aquí no se escribe ningún color literal.
   Neutral: ningún color dice «bien» o «mal». España va en amarillo en las comparaciones (Barras, tipo «tu»), como en el
   resto de la web; lo demás, en tinta o en el gris de contexto. */

/* ---- Un indicador (components/areas/Indicador.astro): la pregunta en el rail, lo demás en la lectura ---------------- */
.indicador__pregunta { text-wrap: balance; }
.indicador { display: grid; gap: var(--espacio-5); }
.indicador > * { margin: 0; min-width: 0; }
.indicador__nombre { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }

/* Hoy, hace 10 y hace 20 años: tres cifras en fila, la de hoy más grande. */
.indicador__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--espacio-4) var(--espacio-6); margin: 0; }
.indicador__cifra { display: grid; align-content: start; gap: 2px; padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
.indicador__cifra dt { font: var(--tipo-nota); color: var(--tinta-suave); }
.indicador__cifra dd { display: grid; gap: 2px; margin: 0; }
.indicador__valor { font: 760 clamp(22px, 2.6vw, 28px)/1.1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.indicador__cifra--hoy { border-top: var(--grosor-control) solid var(--tinta); }
.indicador__cifra--hoy .indicador__valor { font-weight: 860; font-size: clamp(30px, 4vw, 40px); }
.indicador__unidad { font: var(--tipo-cuerpo-pequeno); color: var(--tinta); text-wrap: pretty; }
.indicador__cambio { font: var(--tipo-nota); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.indicador__figura, .indicador__desglose { display: grid; gap: var(--espacio-2); }
.indicador__pie { display: grid; gap: 2px; font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }

/* La raya discontinua de un cambio de método en la serie (SerieAnual, `rupturas`). */
.grafica .ruptura { stroke: var(--tinta-suave); stroke-width: 1.5; stroke-dasharray: 4 4; }

/* Lo que mide y lo que no: dos líneas con su raya (la de «no mide», discontinua: lo que queda fuera). */
.alcance { display: grid; gap: var(--espacio-2); margin: 0; }
.alcance > div { display: grid; gap: 2px; padding-left: var(--espacio-3); border-left: 4px solid var(--tinta); }
.alcance > .alcance__no { border-left-style: dashed; border-left-color: var(--tinta-suave); }
.alcance dt { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; }
.alcance dd { margin: 0; font: var(--tipo-cuerpo-pequeno); text-wrap: pretty; }

/* Lo que mide y lo que no, y el dato de cada comunidad: plegados uno debajo de otro, con los filetes compartidos. */
.indicador__plegables { display: grid; }

/* ---- La portada de la sección: una tarjeta por área -------------------------------------------------------------- */
.areas { display: grid; gap: var(--espacio-8) var(--canal); margin: 0; padding: 0; list-style: none; }
@media (min-width: 46em) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area-tarjeta { display: grid; gap: var(--espacio-3); align-content: start; padding-top: var(--espacio-4); border-top: 6px solid var(--tinta); }
.area-tarjeta > * { margin: 0; }
.area-tarjeta__nombre { font: 760 22px/28px var(--font-sans); letter-spacing: -0.015em; }
.area-tarjeta__nombre a { color: inherit; text-decoration: none; }
.area-tarjeta__nombre a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.area-tarjeta__texto { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
.area-tarjeta__datos { display: grid; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.area-tarjeta__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); }
.area-tarjeta__datos b { font-weight: 760; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.area-tarjeta__datos small { grid-column: 1 / -1; font: var(--tipo-nota); color: var(--tinta-suave); }

/* ---- Las reglas de la sección: cuatro, numeradas (la misma forma que .razones) ------------------------------------ */
.reglas { display: grid; gap: var(--espacio-6) var(--espacio-8); margin: 0; padding: 0; list-style: none; counter-reset: regla; }
@media (min-width: 46em) { .reglas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reglas > li { padding-top: var(--espacio-4); border-top: var(--grosor-control) solid var(--tinta); font: var(--tipo-cuerpo); counter-increment: regla; text-wrap: pretty; }
.reglas > li::before { content: counter(regla, decimal-leading-zero); display: block; margin-bottom: var(--espacio-2); font: 860 22px/1 var(--font-sans); letter-spacing: -0.02em; }
.reglas > li > strong:first-child { display: block; margin-bottom: var(--espacio-1); font: 760 19px/26px var(--font-sans); letter-spacing: -0.01em; }

/* ---- «Indicadores de España» (pages/indicadores-de-espana/): una tarjeta por dato, con su gráfica de pendiente ----- */
.pendientes { display: grid; gap: var(--espacio-8) var(--canal); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .pendientes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .pendientes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pendientes > li { display: grid; min-width: 0; }
/* Con subgrid, las cuatro filas de cada tarjeta (pregunta, gráfica, unidad y cambio, fuente) se alinean con las de al lado. */
@supports (grid-template-rows: subgrid) {
  .pendientes > li { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--espacio-3); }
  .pendientes > li > .pendiente { grid-row: span 4; grid-template-rows: subgrid; }
  /* Con «Usa este gráfico» (lo pone cliente/sitio.ts, al final de cada tarjeta), una fila más. */
  .pendientes:has(.pendiente > .compartir) > li, .pendientes > li > .pendiente:has(> .compartir) { grid-row: span 5; }
}
.pendiente { display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--espacio-3); align-content: start; padding-top: var(--espacio-4); border-top: var(--grosor-control) solid var(--tinta); scroll-margin-top: var(--espacio-6); }
.pendiente > * { margin: 0; min-width: 0; }
.pendiente__pregunta { font: 760 17px/23px var(--font-sans); letter-spacing: -0.01em; text-wrap: pretty; }
.pendiente__pregunta a { color: inherit; text-decoration: none; }
.pendiente__pregunta a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pendiente__grafica { display: grid; gap: var(--espacio-1); align-self: end; }
.pendiente__grafica > p { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-3); margin: 0; }
.pendiente__antes, .pendiente__antes20 { font: 650 17px/22px var(--font-sans); color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Con el de hace veinte años, el primer tramo (de hace veinte a hace diez), en el gris de la tinta suave. */
.pendiente__linea.pendiente__linea--antes { stroke: var(--tinta-suave); }
/* Tres cifras en el renglón: algo más pequeñas, para que quepan a 320 px. */
.pendiente--tres .pendiente__grafica > p { gap: var(--espacio-2); }
.pendiente--tres :is(.pendiente__antes, .pendiente__antes20) { font-size: 15px; }
.pendiente--tres .pendiente__hoy { font-size: 24px; line-height: 28px; }
.pendiente__hoy { font: 860 28px/32px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pendiente__dibujo { display: block; width: 100%; height: 64px; overflow: visible; }
.pendiente__cero { stroke: var(--linea); stroke-width: 1; }
.pendiente__linea { stroke: var(--tinta); stroke-width: 2.5; stroke-linecap: round; }
.pendiente__punto { stroke: var(--tinta); stroke-width: 12; stroke-linecap: round; }
.pendiente__hueco { stroke: var(--papel); stroke-width: 6; stroke-linecap: round; }
.bloque--superficie .pendiente__hueco { stroke: var(--superficie); }
.pendiente__periodos { font: var(--tipo-nota); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.pendiente__que { display: grid; gap: 2px; font: var(--tipo-cuerpo-pequeno); }
.pendiente__unidad { color: var(--tinta-suave); text-wrap: pretty; }
.pendiente__cambio { font-weight: 760; font-variant-numeric: tabular-nums; }
.pendiente__fuente { font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; overflow-wrap: anywhere; }
.pendiente__fuente a { color: inherit; }

/* El recuento de arriba: cuántos suben, bajan o siguen igual (contar, no juzgar). */
.sentidos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-4); margin: 0; padding: 0; list-style: none; }
.sentidos > li { display: grid; gap: 2px; padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
.sentidos b { font: 860 32px/36px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sentidos span { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }

/* ---- «Usa este gráfico» (components/areas/Indicador.astro): descargarlo en PNG o copiar el código para insertarlo ---- */
/* .grafica-uso__texto, __acciones y __aviso: en sitio.css (también las usa components/UsaEsteGrafico.astro fuera de las áreas). */
.grafica-uso .copiable__texto { font: 400 13px/20px var(--font-mono); }

/* ---- La página para insertar en otras webs (pages/insertar/, layouts/Insertado.astro) --------------------------------
   Sin cabecera ni pie: la gráfica con su nombre, su última cifra, la fuente y la atribución, en el ancho que le dé el
   <iframe> de quien la inserta (hasta 760 px). */
.insertado { background: var(--papel); }
/* El <main> acaba donde acaba la pieza (en la web, crece hasta el pie): dentro del marco no queda papel vacío debajo. */
.insertado main { flex: none; padding: var(--espacio-5) var(--espacio-4); }
.insertado__pieza { display: grid; gap: var(--espacio-4); max-width: 760px; margin: 0 auto; }
.insertado__cabeza { display: grid; gap: var(--espacio-1); }
.insertado__area { margin: 0; font: var(--tipo-nota); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; }
.insertado__titulo { margin: 0; font: 760 19px/25px var(--font-sans); letter-spacing: -0.01em; text-wrap: pretty; }
.insertado__cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--espacio-3); margin: 0; }
.insertado__valor { font: 860 32px/38px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.insertado__unidad { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.insertado__pie { display: grid; gap: var(--espacio-3); padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
.insertado__fuente { margin: 0; font: var(--tipo-nota); color: var(--tinta-suave); overflow-wrap: anywhere; }
.insertado__fuente a { color: inherit; }
.insertado__marca { margin: 0; }
.insertado__marca a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-4); color: var(--tinta); font: 650 14px/20px var(--font-sans); }
.insertado__marca img { display: block; width: 150px; height: auto; }
/* La marca de agua de la gráfica insertada: el dominio, muy suave, sobre la zona de la gráfica y sin tapar nada (lo pidió la
   dueña el 18-10-2026). Va encima del SVG, que no tiene fondo, y no recibe el puntero ni se selecciona. */
.insertado .indicador__figura { position: relative; }
.indicador__agua { position: absolute; left: 0; right: 0; top: 34%; z-index: 1; text-align: center; font: 760 clamp(24px, 7vw, 46px)/1 var(--font-sans); letter-spacing: -0.02em; color: var(--tinta); opacity: 0.07; pointer-events: none; user-select: none; }

/* Un reparto que suma 100 (Indicador.astro, `desglose.reparto`): una franja al 100 % y su leyenda con las cifras exactas. La
   parte que es la cifra del indicador, en amarillo; la primera, en tinta; las demás, en el gris de las gráficas. */
.reparto { display: grid; gap: var(--espacio-4); }
.reparto__barra { display: flex; height: 40px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--papel); }
.reparto__tramo { display: block; min-width: 4px; }
.reparto__tramo--tinta { background: var(--tinta); }
.reparto__tramo--neutro { background: var(--dato-neutro); }
.reparto__tramo--destacado { background: var(--subrayador); box-shadow: inset 0 0 0 1px var(--tinta); }
.reparto__leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-3); }
.reparto__item { display: grid; grid-template-columns: 16px 5.5em 1fr; gap: var(--espacio-3); align-items: baseline; }
.reparto__muestra { width: 16px; height: 16px; border-radius: 3px; align-self: center; }
.reparto__cifra { font: 650 18px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.reparto__nombre { display: grid; gap: 2px; }
.reparto__nota { font: var(--tipo-nota); color: var(--tinta-suave); }

/* «Dentro de 20 o 30 años» (components/areas/Proyecciones.astro): las otras proyecciones, una debajo de otra. */
.proyecciones__otras { display: grid; gap: var(--espacio-4); max-width: var(--ancho-lectura); }
.proyecciones__otras p { margin: 0; }
.proyecciones__otras > div { display: grid; gap: var(--espacio-2); }