/* todoloquepagas — sitio.
   Lo que el manual de marca no trae y una web necesita: reset, página, cabecera, navegación,
   prosa, tablas, rejillas y utilidades. Se carga después de tokens.css y componentes.css.
   Regla: todos los colores salen de tokens.css. Aquí no se escribe ningún color literal. */

/* ---- Reset mínimo --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
img, svg, video { max-width: 100%; height: auto; }
/* Una imagen con el alto fijado que se estrecha (max-width) no se deforma: se ajusta dentro de su caja (los logos de
   /prensa/ a 320 px salían un 14 % más estrechos). */
img { object-fit: contain; }
button, input, select, textarea { font: inherit; color: inherit; }
/* WebKit (Safari) mide el texto de un <select> por su opción más larga y lo deja desbordar la caja aunque esta mida lo
   que debe: a 320 px, «Actividad o puesto» (coste de un trabajador) ensanchaba el documento a 837 px y el territorio
   foral (venta de vivienda), a 330. Recortado en su caja, el desplegable se ve igual en los tres motores. Lo vigila
   herramientas/navegadores.test.mjs y el barrido de otros-navegadores.mjs. */
select { overflow: hidden; }
table { border-collapse: collapse; border-spacing: 0; }
/* El manual no usa cursivas: el énfasis se da con peso. */
em, i, cite, address, dfn { font-style: normal; }
em { font-weight: 650; }
[hidden] { display: none !important; }

/* ---- Página ---------------------------------------------------------------- */
:root { --margen-lateral: var(--espacio-4); --entre-secciones: var(--espacio-12); }
@media (min-width: 50em) {
  :root { --margen-lateral: var(--espacio-8); --entre-secciones: var(--espacio-16); }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font: var(--tipo-cuerpo);
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; }
/* Las negritas, con los pesos del kit (marca final): 650 en el texto; dentro de un titular o de un rótulo, la suya. Sin
   especificidad: cualquier regla con clase manda (los navegadores daban 700, que el kit no usa). */
:where(b, strong) { font-weight: 650; }
:where(h1, h2, h3, h4, legend, [class*="titular"], [class*="titulo"], [class*="rotulo"]) :where(b, strong) { font-weight: inherit; }

h1, h2, h3 { text-wrap: balance; }
/* Un titular largo en el móvil pasaba de seis renglones, y ahí Chromium ya no lo reparte (`balance` llega a seis) y dejaba
   una palabra sola en el último («…en régimen / común» a 320 px): en el móvil va a 26 px, como los titulares del
   resultado de la calculadora (calculadora.css). <Bloque> le pone la clase a los de más de 75 letras. */
@media (max-width: 40em) { .titular-2--largo { font-size: 26px; line-height: 32px; } }
/* (Con la marca 2, por debajo de 360 px, los titulares largos iban con `pretty`: Plus Jakarta Sans en Bold era más
   ancha y `balance` dejaba alguna palabra sola. Con Albert Sans, en la marca final, es al revés: `balance` reparte bien
   todos los de la web a 320 px y `pretty` dejaba sola «gasto» o «pública». Así que `balance` en todos los anchos.) */
/* Lo que se lee como un titular corto (el de una tarjeta, una llamada, una pregunta del formulario, un desplegable) se
   reparte igual entre sus renglones: sin una palabra sola en el último («…comunidad / autónoma»). El texto corrido de
   una o dos frases, sin una palabra sola al final donde el motor sabe hacerlo (`pretty`; donde no, se queda como estaba).
   Lo vigila «sinViudas» (herramientas/pruebas/maqueta.mjs). */
:is(.tarjeta-enlace__titulo, .llamada__titulo, .aviso__titulo, .tlqp-desplegable__titulo, .tlqp-campo__etiqueta, legend, .calc-tecnicos > summary, .calc-detalle > summary, .lista-iconos__titulo, .vistazo__celda--cifra .vistazo__etiqueta, .cifras-clave__etiqueta) { text-wrap: balance; }
:is(.bloque__cabecera p, .entradilla, .tlqp-campo__ayuda, .calc-supuesto, .tarjeta-enlace__texto, .calc-panel__pie, .calc-entrada__guardado, .calc-tique__nota, .llamada p:not(.llamada__titulo)) { text-wrap: pretty; }
.titular-1 { max-width: 18em; }

/* ---- La rejilla de la página: la regla está en docs/CONSTRUCCION.md («Maquetación») ----
   Un contenedor; desde 60em, dos pistas (--pistas: rail y lectura, con --canal en medio). Titulares en el rail, texto
   en la lectura, lo ancho en las dos. Ningún max-width propio dentro de una pista. */
.contenedor { width: 100%; max-width: calc(var(--ancho-pagina) + 2 * var(--margen-lateral)); margin-inline: auto; padding-inline: var(--margen-lateral); }
.lectura { max-width: var(--ancho-lectura); }
.seccion { padding-block: var(--entre-secciones); }
.seccion + .seccion { padding-top: 0; }

/* ---- Foco y ayudas de accesibilidad -------------------------------------- */
:focus-visible { outline: var(--grosor-foco) solid var(--foco); outline-offset: 2px; }

.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.tlqp .saltar { position: absolute; top: var(--espacio-2); left: var(--espacio-2); z-index: 100; display: inline-flex; align-items: center; min-height: var(--alto-control); padding: var(--espacio-3) var(--espacio-5); border-radius: var(--radio-m); background: var(--inverso); color: var(--sobre-inverso); font: var(--tipo-boton); text-decoration: none; transform: translateY(-200%); }
.tlqp .saltar:focus { transform: none; }

/* Una imagen para cada tema. Las variables las pone tokens.css según el tema activo (el del sistema o el forzado). */
.solo-claro { display: var(--ver-en-claro); }
.solo-oscuro { display: var(--ver-en-oscuro); }

/* ---- Cabecera -------------------------------------------------------------- */
.sitio-cabecera { position: relative; z-index: 10; border-bottom: var(--grosor-linea) solid var(--linea); background: var(--papel); }
/* Con el menú o un desplegable abiertos, la cabecera va por encima de la barra fija de la calculadora (z-index 20), para
   que no tape los últimos enlaces. */
.sitio-cabecera:has(.sitio-menu[open], .megamenu[open]) { z-index: 30; }
.sitio-cabecera__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4); min-height: 72px; }

.sitio-logo { display: inline-flex; flex: none; align-items: center; min-height: var(--alto-control); }
/* El logo principal (marca final): a 30 px de alto en el móvil (166 de ancho) y a 40 desde 40em (222 de ancho). */
.sitio-logo img { width: auto; height: 30px; }
@media (min-width: 40em) { .sitio-logo img { height: 40px; } }
/* El logo (30 px de alto: 166 de ancho), el botón «Menú» y sus márgenes piden unos 316 px. En una ventana más estrecha
   (la de 320 px; con barra de desplazamiento clásica quedan 303-308 útiles; el zoom al 400 %) el hueco entre los dos baja
   a 8 px y, si aún falta sitio, el logo encoge sin deformarse hasta su mínimo del manual, 24 px de alto (133 de ancho): la
   caja de la imagen se estrecha y el dibujo se ajusta dentro, entero (`object-fit: contain`). De 340 px de ventana en
   adelante no cambia nada. */
@media (max-width: 339.98px) {
  .sitio-cabecera__barra { gap: var(--espacio-2); }
  .sitio-logo { flex: 0 1 auto; min-width: 133px; }
  .sitio-logo picture, .sitio-logo img { min-width: 0; }
  .sitio-logo img { max-width: 100%; object-fit: contain; object-position: left center; }
}
/* El logo es un <picture>: el navegador descarga solo el del tema del sistema. Si el tema se fuerza con <html data-tema>,
   el <picture> no se entera: se esconde y deciden las dos imágenes de reserva (claro y oscuro), que no se descargan
   mientras no se ven (loading="lazy"). */
.sitio-logo picture, .sitio-logo__forzado { display: none; }
.sitio-logo picture img { display: block; }
:root:not([data-tema]) .sitio-logo .sitio-logo__sistema { display: block; }
:root[data-tema] .sitio-logo__forzado.solo-claro { display: var(--ver-en-claro); }
:root[data-tema] .sitio-logo__forzado.solo-oscuro { display: var(--ver-en-oscuro); }
.tlqp a.sitio-logo:hover { background: transparent; }

/* ---- Navegación ------------------------------------------------------------
   La misma lista se pinta dos veces: en línea (pantallas anchas) y dentro de un <details>
   (pantallas estrechas). Solo una de las dos se ve; ninguna necesita JavaScript. */
.sitio-nav { display: none; margin-right: calc(-1 * var(--espacio-3)); }
.sitio-nav__lista { display: flex; gap: var(--espacio-1); margin: 0; padding: 0; list-style: none; }
.sitio-nav__enlace { display: inline-flex; align-items: center; min-height: var(--alto-control); padding-inline: var(--espacio-3); font: 650 16px/20px var(--font-sans); text-decoration: none; white-space: nowrap; }
.sitio-nav__enlace[aria-current] { text-decoration: underline; }

.sitio-menu__boton { display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: var(--alto-control); padding-inline: var(--espacio-4); border: var(--grosor-control) solid var(--tinta); border-radius: var(--radio-m); font: var(--tipo-boton); list-style: none; cursor: pointer; user-select: none; }
.sitio-menu__boton::-webkit-details-marker { display: none; }
.sitio-menu__boton::after { content: "+"; width: 14px; font: 450 22px/20px var(--font-sans); text-align: center; }
.sitio-menu[open] > .sitio-menu__boton::after { content: "−"; }
.sitio-menu__boton:hover, .sitio-menu[open] > .sitio-menu__boton { background: var(--subrayador-suave); }
/* Por debajo de 320 px de ventana (un móvil plegado: 280 px) ya no cabe ni con el logo en su mínimo: el botón pierde
   el signo y se queda en la palabra. Abierto se sigue distinguiendo por el fondo. Así cabe desde 275 px. */
@media (max-width: 319.98px) { .sitio-menu__boton::after { display: none; } }
.sitio-menu__panel { position: absolute; top: 100%; right: 0; left: 0; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--margen-lateral) var(--espacio-6); border-bottom: var(--grosor-control) solid var(--tinta); background: var(--papel); }
.sitio-menu__panel .sitio-nav__lista { flex-direction: column; gap: 0; }
.sitio-menu__panel .sitio-nav__lista li + li { border-top: var(--grosor-linea) solid var(--linea); }
.sitio-menu__panel .sitio-nav__enlace { display: flex; min-height: 52px; padding-inline: 0; font-size: 17px; white-space: normal; }
/* El menú del móvil (18-10-2026): todas las secciones, agrupadas como en el desplegable de escritorio, cada grupo con su
   título en versalitas. */
.menu-movil { display: grid; gap: var(--espacio-2); }
.menu-movil__grupo { padding-top: var(--espacio-3); border-top: var(--grosor-control) solid var(--tinta); }
.menu-movil__titulo { margin: 0; font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.menu-movil__suelto .sitio-nav__enlace { font-weight: 760; }

/* El desplegable de cada entrada en pantallas anchas (Navegacion.astro): un <details> cuyo panel ocupa todo el ancho de
   la cabecera, debajo de ella, con una columna por grupo de enlaces. Cada enlace lleva una línea que dice qué hay. */
.sitio-nav__grupo { position: static; }
.megamenu > summary { list-style: none; cursor: pointer; user-select: none; }
.megamenu > summary::-webkit-details-marker { display: none; }
.megamenu__boton { gap: var(--espacio-1); }
.megamenu__boton::after { content: ""; width: 8px; height: 8px; margin-left: var(--espacio-1); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.megamenu[open] > .megamenu__boton::after { transform: translateY(2px) rotate(-135deg); }
.megamenu__boton:hover, .megamenu[open] > .megamenu__boton { background: var(--subrayador-suave); border-radius: var(--radio-s); }
.sitio-nav__enlace[data-actual] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.megamenu__panel { position: absolute; top: 100%; right: 0; left: 0; z-index: 20; padding-block: var(--espacio-8) var(--espacio-10); border-top: var(--grosor-linea) solid var(--linea); border-bottom: var(--grosor-control) solid var(--tinta); background: var(--papel); box-shadow: var(--sombra-elevada); }
.megamenu__columnas { display: grid; grid-template-columns: repeat(var(--columnas, 3), minmax(0, 1fr)); gap: var(--espacio-8) var(--canal); align-items: start; }
.megamenu__columna { display: grid; gap: var(--espacio-3); align-content: start; }
.megamenu__titulo { margin: 0; padding-bottom: var(--espacio-2); border-bottom: var(--grosor-control) solid var(--tinta); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.megamenu__enlaces { display: grid; gap: var(--espacio-1); margin: 0; padding: 0; list-style: none; }
/* Una columna larga sin notas (las nueve áreas), en dos. */
.megamenu__enlaces--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--espacio-8); }
.megamenu__enlace { display: grid; gap: 2px; padding: var(--espacio-2) var(--espacio-3); margin-inline: calc(-1 * var(--espacio-3)); border-radius: var(--radio-s); text-decoration: none; }
.megamenu__texto { font: 650 17px/22px var(--font-sans); }
.megamenu__nota { font: var(--tipo-nota); color: var(--tinta-suave); }
.tlqp a.megamenu__enlace:hover { background: var(--subrayador-suave); color: var(--tinta); }
.tlqp a.megamenu__enlace:hover .megamenu__texto { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.megamenu__enlace[aria-current] .megamenu__texto { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Las cinco entradas, en línea desde 64em; por debajo, en el menú plegado. De 64 a 68em, algo más juntas. Si la
   navegación crece, se vuelve a medir (la prueba «cabeceraEnTodosLosAnchos», en herramientas/pruebas/maqueta.mjs, mira
   de 280 a 1920 px). */
@media (min-width: 64em) {
  .sitio-nav { display: block; }
  .sitio-menu { display: none; }
}
@media (min-width: 64em) and (max-width: 67.99em) {
  .sitio-nav { margin-right: calc(-1 * var(--espacio-2)); }
  .sitio-nav__enlace { padding-inline: var(--espacio-2); }
}

/* ---- Pie: el componente «Pie» del manual, alineado con el contenedor ------ */
.sitio-pie.tlqp-pie { padding-inline: 0; }
.sitio-pie > .contenedor { display: grid; gap: var(--espacio-6); }
.sitio-pie .tlqp-pie__enlaces { gap: 0 var(--espacio-6); }
.sitio-pie .tlqp-pie__enlaces a { display: inline-flex; align-items: center; min-height: var(--alto-control); }
/* El mapa de la web en el pie (18-10-2026): una columna por entrada de la navegación, con todos sus enlaces. */
.tlqp-pie__mapa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-8) var(--espacio-6); }
/* Desde 22em, dos columnas, con la de la calculadora (un solo enlace) a lo ancho: las otras cuatro, de dos en dos. En
   escritorio, las cinco en una fila. */
@media (min-width: 22em) {
  .tlqp-pie__mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlqp-pie__columna:first-child { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .tlqp-pie__mapa { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--espacio-8); }
  .tlqp-pie__columna:first-child { grid-column: auto; }
}
.tlqp-pie__columna { display: grid; gap: var(--espacio-2); align-content: start; }
.tlqp-pie__titulo { margin: 0; padding-bottom: var(--espacio-2); border-bottom: var(--grosor-linea) solid currentColor; font: 760 13px/18px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.tlqp-pie__mapa .tlqp-pie__enlaces { display: grid; gap: 0; font: 650 15px/20px var(--font-sans); }
/* Con relleno arriba y abajo y no solo altura mínima: un enlace de dos líneas deja el mismo aire que uno de una. */
.tlqp-pie__mapa .tlqp-pie__enlaces a { min-height: 40px; padding-block: 10px; }
.tlqp-pie__legales { padding-top: var(--espacio-4); border-top: var(--grosor-linea) solid currentColor; }
/* El renglón de abajo (6-11-2026): los legales y, a la derecha, un botón por red, del tamaño de un control táctil. En el
   móvil, las redes van debajo, en una sola fila que se estrecha antes que partirse. */
.tlqp-pie__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-4) var(--espacio-6); padding-top: var(--espacio-4); border-top: var(--grosor-linea) solid currentColor; }
.tlqp-pie__base > .tlqp-pie__legales { padding-top: 0; border-top: 0; }
.tlqp-pie__redes { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.tlqp-pie__red { display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; border: var(--grosor-linea) solid currentColor; border-radius: var(--radio-m); color: inherit; text-decoration: none; transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out; }
.tlqp-pie__red svg { display: block; width: 20px; height: 20px; }
.tlqp-pie__red:hover { border-color: var(--subrayador); background: var(--subrayador); color: var(--sobre-subrayador); }
@media (max-width: 39.99em) {
  .tlqp-pie__base { display: grid; justify-content: stretch; }
  .tlqp-pie__redes { display: grid; grid-template-columns: repeat(7, minmax(0, 44px)); justify-content: space-between; gap: var(--espacio-1); }
  .tlqp-pie__red { width: 100%; height: auto; aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) { .tlqp-pie__red { transition: none; } }

/* ---- Migas de pan ---------------------------------------------------------- */
.migas { font: var(--tipo-nota); color: var(--tinta-suave); }
.migas__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.migas__lista li { display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: var(--alto-control); }
.migas__lista li + li::before { content: "/"; }
.migas__lista a { display: inline-flex; align-items: center; min-height: var(--alto-control); color: var(--tinta); }

/* ---- Prosa: páginas de texto largo ---------------------------------------- */
.prosa { max-width: var(--ancho-lectura); font: var(--tipo-cuerpo); }
.prosa > * + * { margin-top: var(--espacio-4); }
.prosa h2 { margin-top: var(--espacio-12); font: var(--tipo-titular-2); letter-spacing: var(--tipo-titular-2-espaciado); }
.prosa h3 { margin-top: var(--espacio-8); font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); }
.prosa h2 + *, .prosa h3 + * { margin-top: var(--espacio-3); }
.prosa > :first-child { margin-top: 0; }
.prosa p, .prosa li { max-width: 65ch; }
.prosa ul, .prosa ol { padding-left: var(--espacio-6); }
.prosa li + li { margin-top: var(--espacio-2); }
.prosa li > ul, .prosa li > ol { margin-top: var(--espacio-2); }
.prosa strong, .prosa b { font-weight: 760; }
.prosa small { font: var(--tipo-nota); color: var(--tinta-suave); }
.prosa code, .prosa kbd { padding: 0 var(--espacio-1); border-radius: var(--radio-s); background: var(--superficie-hundida); font-family: var(--font-mono); font-size: 0.88em; }
.prosa blockquote { padding-left: var(--espacio-4); border-left: var(--grosor-control) solid var(--tinta); }
.prosa hr { height: 0; margin-block: var(--espacio-8); border: 0; border-top: var(--grosor-linea) solid var(--linea); }
/* El pie de una figura, como nota. La frase de una cifra destacada (<CifraDestacada> dentro de <Prosa>) no es un pie: es
   texto que se lee, con el estilo que le da ritmo.css. */
.prosa figure:not(.cifra-destacada) > figcaption { margin-top: var(--espacio-2); font: var(--tipo-nota); color: var(--tinta-suave); }
/* Las tablas dentro de la prosa se desplazan ellas solas: la página nunca se mueve de lado. */
.prosa table { display: block; width: max-content; max-width: 100%; overflow-x: auto; font: var(--tipo-cuerpo-pequeno); }
.prosa th, .prosa td { padding: var(--espacio-2) var(--espacio-4) var(--espacio-2) 0; border-bottom: var(--grosor-linea) solid var(--linea); text-align: left; vertical-align: top; }
.prosa th { font-weight: 650; }
.prosa thead th { border-bottom: var(--grosor-control) solid var(--tinta); }

/* ---- Tabla de datos --------------------------------------------------------
   <div class="tabla-marco" role="region" aria-label="…" tabindex="0"><table class="tabla-datos">…</table></div>
   El marco es el que se desplaza en horizontal. Las columnas de cifras llevan la clase .num. */
/* Cuando la tabla no cabe (en móvil, casi todas):
   - un filete de 2 px en el borde derecho dice que hay más a la derecha, y desaparece al llegar al final.
     Son dos fondos lisos (el manual no admite degradados): el filete, fijo en el borde del marco, y una
     tapa del color del fondo que viaja con el contenido y lo cubre cuando ya no queda nada por ver (la
     tapa mide 16 px: si lo que sobra son unos píxeles, no se avisa de nada);
   - la primera columna (la cabecera de cada fila) se queda fija, para no perder de qué fila es cada cifra,
     y lleva un filete a su derecha mientras hay columnas escondidas debajo ([data-desplazada] lo pone
     cliente/sitio.ts);
   - el <caption> se queda a la vista y se parte en líneas dentro de lo visible.
   --fondo-tabla es el color de lo que hay detrás: quien ponga una tabla sobre otro fondo lo cambia en su caja.
   --ancho-tabla-visible es el ancho del marco: quien meta la tabla en una caja con relleno lo ajusta. */
.tabla-marco {
  max-width: 100%; overflow-x: auto;
  background:
    linear-gradient(var(--fondo-tabla, var(--papel)), var(--fondo-tabla, var(--papel))) right / 16px 100% no-repeat local,
    linear-gradient(var(--linea-control), var(--linea-control)) right / 2px 100% no-repeat scroll;
}
.tarjeta, .llamada { --fondo-tabla: var(--superficie); }
.aviso { --fondo-tabla: var(--superficie-hundida); }
.tabla-datos { width: 100%; font: var(--tipo-cuerpo-pequeno); }
.tabla-datos caption { padding-bottom: var(--espacio-2); font: var(--tipo-nota); color: var(--tinta-suave); text-align: left; }
.tabla-datos caption:not(.visualmente-oculto) { position: sticky; left: 0; max-width: var(--ancho-tabla-visible, calc(100vw - 2 * var(--margen-lateral))); padding-left: var(--espacio-2); }
.tabla-datos th, .tabla-datos td { padding: var(--espacio-3) var(--espacio-4) var(--espacio-3) 0; border-bottom: var(--grosor-linea) solid var(--linea); text-align: left; vertical-align: top; }
.tabla-datos th:last-child, .tabla-datos td:last-child { padding-right: 0; }
.tabla-datos th { font-weight: 650; }
.tabla-datos thead th { border-bottom: var(--grosor-control) solid var(--tinta); white-space: nowrap; }
.tabla-datos .num { font: var(--tipo-dato); font-variant-numeric: tabular-nums; line-height: 22px; text-align: right; white-space: nowrap; }
.tabla-datos thead .num { font: inherit; font-weight: 650; }
.tabla-datos .fila-resaltada { --fondo-tabla: var(--subrayador-suave); }
/* Lo de las tablas de components/datos/Tabla.astro (.tabla-datos--zona) que estaba solo en datos.css: en las páginas que no
   cargan esa hoja (comunidades, provincias, países) la nota de cada fila salía pegada al nombre, en negrita, y el título de
   la tabla, a tamaño de párrafo (revisión del 18-10-2026). Va acotado a esas tablas para no cambiar las demás. */
.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--zona small { display: block; font: var(--tipo-nota); font-weight: 450; color: var(--tinta-suave); white-space: normal; }
.tabla-datos--zona tbody th { min-width: 9.5em; }
.tabla-datos--zona tfoot > tr > * { border-top: var(--grosor-control) solid var(--tinta); border-bottom: 0; font-weight: 650; }
.tabla-datos--zona .fila-suave > * { color: var(--tinta-suave); }
.tabla-datos--zona td.texto { min-width: 16em; }
.tabla-datos--ajustada { width: auto; min-width: min(100%, 520px); }
.tabla-datos .fila-resaltada > * { background: var(--subrayador-suave); }
/* La primera columna, fija. */
/* (Con :where() estas reglas pesan lo mismo que las de una hoja de zona, que se carga después y manda.) */
.tabla-datos th[scope="row"], .tabla-datos :where(thead) th:first-child { position: sticky; left: 0; z-index: 1; background: var(--fondo-tabla, var(--papel)); }
/* El filete de la columna fija es un fondo liso de 2 px en su borde derecho (una sombra no se pinta en una celda de tabla). */
:where(.tabla-marco[data-desplazada]) .tabla-datos th[scope="row"], :where(.tabla-marco[data-desplazada]) .tabla-datos :where(thead) th:first-child { background-image: linear-gradient(var(--linea-control), var(--linea-control)); background-position: right; background-size: 2px 100%; background-repeat: no-repeat; }
/* Si la cabecera de fila es la segunda columna (delante va el puesto), en la cabecera se fija esa misma columna. */
.tabla-datos:has(tbody td:first-child + th[scope="row"]) :where(thead) th:first-child { position: static; background-image: none; }
.tabla-datos:has(tbody td:first-child + th[scope="row"]) :where(thead) th:nth-child(2) { position: sticky; left: 0; z-index: 1; background-color: var(--fondo-tabla, var(--papel)); }
:where(.tabla-marco[data-desplazada]) .tabla-datos:has(tbody td:first-child + th[scope="row"]) :where(thead) th:nth-child(2) { background-image: linear-gradient(var(--linea-control), var(--linea-control)); background-position: right; background-size: 2px 100%; background-repeat: no-repeat; }
/* Una primera columna que ocupa más de medio marco no se fija: no dejaría ver las demás ([data-primera-ancha] lo pone cliente/sitio.ts). */
:where(.tabla-marco[data-primera-ancha]) .tabla-datos th[scope="row"], :where(.tabla-marco[data-primera-ancha]) .tabla-datos :where(thead) th:first-child { position: static; background-image: none; }
/* El marco recorta lo que se sale de él, también el anillo del foco (3 px a 2 px de distancia). En la última columna,
   los enlaces llevan 8 px de aire a su derecha y un botón (ordenar la tabla, que ocupa la celda entera), el anillo por
   dentro; el título de una tabla (caption) con un enlace baja 5 px, para que su anillo no se corte por arriba (y, como
   todos los títulos de tabla, empieza a 8 px del borde, donde empieza el texto de la primera columna). Lo vigila la
   comprobación «foco» de herramientas/auditar-maqueta.mjs. */
.tabla-datos :is(td, th):last-child:has(> a) { padding-right: var(--espacio-2); }
.tlqp .tabla-datos :is(td, th):last-child > button:focus-visible { outline-offset: -3px; }
.tabla-datos caption:has(a) { padding-top: 5px; }
/* Los enlaces dentro de una tabla o de una lista miden una línea de alto (18 px): su zona táctil se estira
   hacia arriba y hacia abajo sin mover nada, hasta 34 px en las tablas y 26 px en las listas, que es lo que
   cabe sin pisar el enlace de la fila de al lado. (Una hoja de zona puede hacer lo mismo con las suyas.) */
.tabla-datos a, .definiciones a, .fuentes a { position: relative; }
.tabla-datos a::after, .definiciones a::after, .fuentes a::after { content: ""; position: absolute; inset: calc(-1 * var(--espacio-1)) 0; }
.tabla-datos a::after { inset-block: calc(-1 * var(--espacio-2)); }

/* ---- «Dónde estás» en un índice de la página --------------------------------
   <nav data-indice-activo>: cliente/sitio.ts pone aria-current="location" en el enlace del apartado que se lee.
   Una sola señal, la de todo enlace: el subrayado del texto (mide lo que el rótulo, también en dos renglones). Nunca
   además una sombra o un borde de la caja, que es más ancha que el texto: salían dos rayas desalineadas. Con el
   puntero, el fondo de subrayador y sin subrayado. Lo vigila «indiceUnaSenal» (herramientas/pruebas/maqueta.mjs). */
[data-indice-activo] a[aria-current] { text-decoration: underline; }

/* Algo suelto (fuera de un <Bloque>) en la columna de lectura: un aviso, una nota. */
@media screen and (min-width: 60em) {
  .en-lectura { margin-left: calc((100% - var(--canal)) * 5 / 14 + var(--canal)); }
}

/* ---- Página con índice (components/Indice.astro) ------------------------------
   En una columna, el índice es una tira pegada arriba; desde 60em, va pegado en el rail y los bloques, enteros, en la
   lectura. Con .con-indice--tira, la tira a cualquier ancho y los bloques como en el resto de la web (/datos/). */
.con-indice { display: grid; grid-template-columns: minmax(0, 1fr); }
.con-indice > * { min-width: 0; }
.con-indice [id] { scroll-margin-top: calc(var(--alto-control) + var(--espacio-5)); }
.con-indice--tira { display: block; }
/* Pegada arriba, la tira tapa lo que pasa por debajo de lado a lado de la ventana, también una banda: su fondo y sus dos
   filetes siguen por fuera de la caja con border-image, como las bandas (ritmo.css, apartado 4). Sin eso, en /datos/,
   /paises/ y /a-donde-van-tus-impuestos/ (la tira a cualquier ancho), una banda asomaba a los lados de la tira.
   Sin `fill`: los dos lados (100vw cada uno, la columna de 1 px de la izquierda de la imagen estirada) y los dos filetes
   (la fila de 1 px de arriba y la de abajo); el centro no se pinta, y se ve el fondo de la caja con la barra de progreso
   (ritmo.css, apartado 11), que un relleno taparía. */
.indice-pegado { position: sticky; top: 0; z-index: 5; margin-inline: calc(-1 * var(--margen-lateral)); padding-inline: var(--margen-lateral); border-block: var(--grosor-linea) solid var(--linea); background: var(--papel);
  border-image: linear-gradient(var(--linea) 0 1px, var(--papel) 1px calc(100% - 1px), var(--linea) calc(100% - 1px)) 1 / var(--grosor-linea) 100vw / 0 100vw; }
.indice-pegado__titulo { display: none; }
/* La tira: la lista se desplaza a lo ancho, sin barra; cuando no cabe, unas flechas con su degradado a cada lado dicen que
   hay más y la llevan (resources/js/_indice.js, 30-10-2026), y la tira sigue sola al apartado que se lee. */
.indice-pegado ol { display: flex; gap: var(--espacio-5); margin: 0; padding: 0; list-style: none; font: 650 15px/22px var(--font-sans); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.indice-pegado ol::-webkit-scrollbar { display: none; }
.indice-pegado li { flex: none; }
.indice-pegado__flecha { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; width: calc(var(--margen-lateral) + var(--espacio-12)); padding: 0 0 0 var(--margen-lateral); border: 0; background: linear-gradient(to right, var(--papel) 60%, transparent); color: var(--tinta); cursor: pointer; }
.indice-pegado__flecha--antes { left: 0; }
.indice-pegado__flecha--despues { right: 0; justify-content: flex-end; padding: 0 var(--margen-lateral) 0 0; background: linear-gradient(to left, var(--papel) 60%, transparent); }
.indice-pegado__flecha[hidden] { display: none; }
.indice-pegado__circulo { display: grid; place-items: center; width: 32px; height: 32px; border: var(--grosor-control) solid var(--tinta); border-radius: 50%; background: var(--papel); }
.indice-pegado__circulo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .indice-pegado__flecha:hover .indice-pegado__circulo { background: var(--subrayador-suave); } }
.tlqp .indice-pegado a { display: inline-flex; align-items: center; min-height: var(--alto-control); white-space: nowrap; text-decoration: none; }
/* El apartado que se lee: subrayado (ver «Dónde estás»); con el puntero, el fondo. */
.tlqp .indice-pegado a[aria-current] { text-decoration: underline; }
.tlqp .indice-pegado a[aria-current]:hover { text-decoration: none; }
/* El anillo de foco va por dentro: el índice recorta lo que se sale por los lados. */
.tlqp .indice-pegado a:focus-visible { outline-offset: -3px; }
.indice-pegado + * > .bloque:first-child, .indice-pegado + .bloque { border-top: 0; }
@media screen and (min-width: 60em) {
  .con-indice:not(.con-indice--tira) { grid-template-columns: var(--pistas); column-gap: var(--canal); align-items: start; border-top: var(--grosor-linea) solid var(--linea); }
  .con-indice:not(.con-indice--tira) [id] { scroll-margin-top: var(--espacio-6); }
  /* 6 px de aire a cada lado, compensados con el margen: el anillo del foco cabe por fuera sin que lo recorte el índice. */
  /* Un índice que no cabe en la ventana (la metodología, con 19 entradas, en una pantalla baja) se desplaza él solo, con
     una barra fina, y cliente/sitio.ts lleva a la vista el apartado que se lee. */
  .con-indice:not(.con-indice--tira) > .indice-pegado { grid-column: rail; max-height: 100vh; margin-inline: -6px; padding: var(--espacio-10) 6px var(--espacio-6); border: 0; border-image: none; background: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .tlqp .con-indice:not(.con-indice--tira) .indice-pegado a:focus-visible { outline-offset: 2px; }
  .con-indice:not(.con-indice--tira) > .con-indice__bloques { grid-column: lectura; }
  .con-indice:not(.con-indice--tira) .indice-pegado__titulo { display: block; margin-bottom: var(--espacio-2); }
  .con-indice:not(.con-indice--tira) .indice-pegado ol { display: grid; justify-items: start; gap: 0; width: auto; overflow: visible; }
  .con-indice:not(.con-indice--tira) .indice-pegado__flecha { display: none; }
  /* Cada enlace mide lo que su rótulo: el fondo del puntero lo sigue. 34 px por entrada: las 19 de la metodología caben
     en una ventana de 800 px de alto. */
  .tlqp .con-indice:not(.con-indice--tira) .indice-pegado a { min-height: 34px; white-space: normal; }
}
@media print { .con-indice { display: block; } .indice-pegado { border-image: none; } }

/* ---- Rejillas y bloques ---------------------------------------------------- */
.rejilla { display: grid; gap: var(--espacio-6); }
.rejilla--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 50em) {
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla { gap: var(--espacio-8); }
}
.pila { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-4); }
.pila--2 { gap: var(--espacio-2); }
.pila--6 { gap: var(--espacio-6); }
.pila--8 { gap: var(--espacio-8); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3) var(--espacio-4); }
/* Una tarjeta es un objeto (una cifra, un enlace, una calculadora): blanca, redondeada y con la sombra suave de la
   lámina. No para envolver texto corrido. */
.tarjeta { padding: var(--espacio-6); border: var(--grosor-linea) solid var(--borde-tarjeta); border-radius: var(--radio-l); background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.texto-suave { color: var(--tinta-suave); }
/* Lo que no se parte va entero a otro renglón si no cabe en este; solo si no cabe en ninguno (la letra ampliada al 200 %)
   se parte por dentro, en vez de salirse de la página. */
.sin-partir { display: inline-block; max-width: 100%; }

/* Un botón del manual también puede ser un enlace (<a class="tlqp-boton …">). La regla «.tlqp a» de
   componentes.css pesa más que la del botón y le quitaría su color: aquí se le devuelve, con el
   mismo aspecto y el mismo hover que define el manual para cada variante. */
.tlqp a.tlqp-boton--destacado { color: var(--sobre-subrayador); }
.tlqp a.tlqp-boton--destacado:hover { background: var(--inverso); color: var(--sobre-inverso); }
.tlqp a.tlqp-boton--principal { color: var(--sobre-inverso); }
.tlqp a.tlqp-boton--principal:hover { background: var(--subrayador); color: var(--sobre-subrayador); }
.tlqp a.tlqp-boton--secundario, .tlqp a.tlqp-boton--texto { color: var(--tinta); }
.tlqp a.tlqp-boton--secundario:hover { background: var(--subrayador-suave); color: var(--tinta); }
.tlqp a.tlqp-boton--texto:hover { color: var(--sobre-subrayador); }

/* Un campo con sufijo («€ al año») no puede ensanchar la columna que lo contiene: sin esto, el ancho propio
   del <input> (20 caracteres) más el sufijo desbordan la página a 320 px. El campo sigue ocupando todo el
   hueco, porque el manual le da flex: 1. */
.tlqp-campo__caja > .tlqp-campo__control { width: 0; }

/* El botón de texto no tiene caja: se saca su relleno para que el texto quede alineado con la columna. */
.tlqp-boton--texto { margin-inline: calc(-1 * var(--espacio-1)); }

/* En móvil, el botón destacado ocupa todo el ancho (manual, «Botón»). */
@media (max-width: 640px) {
  .tlqp-boton--destacado { display: flex; width: 100%; }
}

/* El desplegable del manual reserva dos filas para el signo (título y supuesto). Sin supuesto, la segunda fila vacía se
   llevaba la mitad del alto y el «+» quedaba 6 px por debajo de la pregunta (las preguntas frecuentes): con una sola
   fila, el signo va centrado con el título. Lo vigila «desplegablesAlineados» (herramientas/pruebas/maqueta.mjs). */
.tlqp-desplegable summary:not(:has(> .tlqp-desplegable__supuesto))::after { grid-row: 1; }

/* ---- Utilidades de espaciado: un paso de la escala por clase -------------- */
.margen-arriba-0 { margin-top: 0; }
.margen-arriba-2 { margin-top: var(--espacio-2); }
.margen-arriba-4 { margin-top: var(--espacio-4); }
.margen-arriba-6 { margin-top: var(--espacio-6); }
.margen-arriba-8 { margin-top: var(--espacio-8); }
.margen-arriba-12 { margin-top: var(--espacio-12); }
.margen-arriba-16 { margin-top: var(--espacio-16); }
.margen-abajo-0 { margin-bottom: 0; }
.margen-abajo-2 { margin-bottom: var(--espacio-2); }
.margen-abajo-4 { margin-bottom: var(--espacio-4); }
.margen-abajo-6 { margin-bottom: var(--espacio-6); }
.margen-abajo-8 { margin-bottom: var(--espacio-8); }
.margen-abajo-12 { margin-bottom: var(--espacio-12); }
.margen-abajo-16 { margin-bottom: var(--espacio-16); }

/* ---- Impresión ------------------------------------------------------------- */
@media print and (prefers-color-scheme: dark) {
  :root:not([data-logo-impreso]):not([data-tema]) .sitio-logo { padding: var(--espacio-1) var(--espacio-3); background: var(--fijo-tinta); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media print {
  /* En el papel las cifras no se animan ni hay que alinearlas con las de arriba: van con sus números de siempre. Las
     tabulares de Albert Sans (las que le añade packages/ui/herramientas/albert-sans.py, como antes las de Plus Jakarta Sans
     y Bricolage Grotesque) son glifos alternativos, y Firefox los deja en el PDF sin su letra (no se pueden buscar ni
     copiar: la cifra principal salía ilegible). Las columnas de cifras van en Geist Mono, que ya es de paso fijo.
     Lo mismo con las ligaduras («fi» y «fl» salían sin su letra en el PDF de Firefox: «�scal», «o�cial»). En el papel,
     cada letra con su glifo. */
  * { font-variant-numeric: normal !important; font-variant-ligatures: no-common-ligatures !important; }
  /* El ticket, sin su sombra: un filtro lo convierte en una imagen dentro del PDF. Sus ondas son SVG y salen como trazados. */
  .tlqp-ticket { filter: none; }
  .saltar, .sitio-nav, .sitio-menu, .tlqp-pie__enlaces, .tlqp-pie__mapa, .no-imprimir { display: none !important; }
  body { display: block; min-height: 0; background: none; }
  .sitio-cabecera { border-bottom: var(--grosor-linea) solid var(--tinta); background: none; }
  /* El logo al imprimir. Con el sistema en oscuro, el logo descargado es el negativo, y el papel es blanco.
     Si cliente/sitio.ts ya ha traído el principal (<html data-logo-impreso>), se imprime ese. Si no, se imprime
     el negativo sobre su fondo de tinta (regla de arriba), que sale aunque el navegador no imprima fondos. */
  :root[data-logo-impreso]:not([data-tema]) .sitio-logo .sitio-logo__sistema { display: none; }
  :root[data-logo-impreso]:not([data-tema]) .sitio-logo__forzado.solo-claro { display: block; }
  :root[data-tema="oscuro"] .sitio-logo { padding: var(--espacio-1) var(--espacio-3); background: var(--fijo-tinta); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :root[data-tema="oscuro"] .sitio-logo .sitio-logo__forzado.solo-claro { display: none; }
  :root[data-tema="oscuro"] .sitio-logo .sitio-logo__forzado.solo-oscuro { display: block; }
  .sitio-pie.tlqp-pie { padding-block: var(--espacio-4); border-top: var(--grosor-linea) solid var(--tinta); background: none; color: var(--tinta); }
  /* El logo del pie es el negativo (blanco): en el papel claro no se vería, y el de la cabecera ya está arriba. */
  .tlqp-pie__marca { display: none; }
  .seccion { padding-block: var(--espacio-6); }
  .prosa h2, .prosa h3 { break-after: avoid; }
  .prosa table, .tabla-marco { overflow: visible; background: none; --fondo-tabla: transparent; }
  .tabla-datos caption:not(.visualmente-oculto), .tabla-datos th[scope="row"], .tabla-datos :where(thead) th:first-child { position: static; max-width: none; }
  tr, figure, .tarjeta { break-inside: avoid; }
  .prosa a[href^="http"]::after { content: " (" attr(href) ")"; font: var(--tipo-nota); overflow-wrap: anywhere; }
}

/* ==== Bloques de las páginas de contenido ====================================
   Los usan las fichas, las provincias, los datos y las páginas de texto. Cada uno tiene su
   componente en apps/web/src/components (mismo nombre). */

/* ---- Portadilla: migas, título y entradilla de una página interior --------- */
.portadilla { display: grid; gap: var(--espacio-4); padding-block: var(--espacio-6) var(--espacio-8); }
/* El título no parte una palabra por la mitad («Aprovechamien-tos», «telecomunicacio-nes» a 320 px): Portadilla.astro y
   la ficha ponen en --titular-em lo que mide en em su palabra más larga (lib/medida.ts), y en una columna estrecha el
   cuerpo baja lo justo para que quepa. Nunca por debajo de 24 px; con sitio, el de siempre (--tamano-titular-1: el del
   estilo titular-1, o el de la ficha).
   El ancho, el del contenedor calculado con la ventana (16 px menos por si hay barra de desplazamiento), y no 100cqi: con
   la portadilla como contenedor (container-type), WebKit dejaba la página con los estilos del ancho de antes al girar la
   pantalla o cambiar el tamaño de la ventana (de 1.280 a 820 px, la navegación en línea sin plegar y la página
   desplazándose de lado; lo vio otros-navegadores.mjs en /sobre-nosotros/ y en las calculadoras sueltas). */
:root { --tamano-titular-1: 48px; --ancho-portadilla: calc(min(100vw - 16px, var(--ancho-pagina) + 2 * var(--margen-lateral)) - 2 * var(--margen-lateral)); }
@media (max-width: 640px) { :root { --tamano-titular-1: 34px; } }
.portadilla .titular-1[style*="--titular-em"] { font-size: max(24px, min(var(--tamano-titular-1), var(--ancho-portadilla) / var(--titular-em))); }
.portadilla > * { min-width: 0; }
.portadilla__antetitulo { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
/* El trozo del título que dice de qué va la página (`destacar`, Portadilla.astro) va sobre la brocha amarilla, como
   «pagas» en el logo. Sin trazos sueltos debajo: el subrayado ya es la brocha. */
.portadilla .entradilla { max-width: var(--ancho-lectura); }
@media (min-width: 50em) { .portadilla { padding-block: var(--espacio-8) var(--espacio-12); } }
/* «Con tus respuestas / Con la media» (components/Vista.astro y cliente/_tu-caso/vista.ts, 18-10-2026): debajo del título,
   una franja con lo que se está viendo y, si hay un resultado, el conmutador. Alto fijo para que rellenarla no mueva nada. */
.vista { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-3) var(--espacio-5); min-height: 60px; padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-4); border-radius: var(--radio-m); background: var(--superficie-hundida); font: var(--tipo-cuerpo-pequeno); }
.vista__texto { margin: 0; text-wrap: pretty; }
.vista__opciones { display: inline-flex; gap: 2px; padding: 2px; border: var(--grosor-linea) solid var(--linea-control); border-radius: var(--radio-pastilla); background: var(--superficie); }
.vista__opcion { min-height: var(--alto-control); min-width: 44px; padding: 0 var(--espacio-4); border: 0; border-radius: var(--radio-pastilla); background: none; color: var(--tinta); font: 650 15px/18px var(--font-sans); cursor: pointer; }
.vista__opcion:hover { background: var(--subrayador-suave); }
.vista__opcion[aria-pressed="true"] { background: var(--inverso); color: var(--sobre-inverso); }

/* ---- Bloque: una sección con su titular 2 -----------------------------------
   La pieza de la regla de maquetación. Las piezas se separan con un margen por debajo y no con `gap`: así el titular
   ocupa todas las filas de su columna sin que las filas vacías sumen nada. */
.bloque { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--espacio-8); border-top: var(--grosor-linea) solid var(--linea); }
.bloque > * { min-width: 0; }
.bloque > :not(:last-child) { margin-bottom: var(--espacio-6); }
.bloque__cabecera { display: grid; gap: var(--espacio-2); max-width: var(--ancho-lectura); }
.bloque__cabecera p { color: var(--tinta-suave); }
@media (min-width: 50em) { .bloque { padding-block: var(--espacio-12); } }

/* Lo que ocupa las dos pistas: .ancho-total y las piezas comunes anchas por naturaleza (una tabla, con cinco columnas
   o más; una rejilla de tarjetas, con tres o más). .lectura le lleva la contraria. Las zonas no añaden aquí: ponen
   .ancho-total en su HTML. */
@media screen and (min-width: 60em) {
  /* Los bloques de una página con índice (.con-indice__bloques) no entran: van enteros dentro de la lectura. */
  :where(:not(.con-indice__bloques)) > .bloque { grid-template-columns: var(--pistas); column-gap: var(--canal); }
  :where(:not(.con-indice__bloques)) > .bloque > * { grid-column: lectura; }
  :where(:not(.con-indice__bloques)) > .bloque > :is(.ancho-total, .cifras-clave, .enlaces-rejilla:has(> li:nth-child(3)), .lista-columnas, .rejilla, .pareja, .figura, :is(.tabla-marco, .tabla-bloque, .tabla-plegada):has(thead th:nth-child(5))):not(.lectura) { grid-column: total; }
  /* El titular, en el rail, en todas las filas hasta la primera pieza ancha o el primer h3 (50: las vacías no miden).
     No va pegado: Firefox y WebKit miden lo pegado contra toda la rejilla y pisaría las tablas anchas de debajo. */
  :where(:not(.con-indice__bloques)) > .bloque > .bloque__cabecera { display: contents; }
  :where(:not(.con-indice__bloques)) > .bloque > .bloque__cabecera > h2 { grid-column: rail; grid-row: 1 / span 50; align-self: start; margin-bottom: var(--espacio-6); font-size: clamp(25px, 2.6vw, 32px); line-height: 1.19; }
  /* La frase de contexto abre la columna de lectura. */
  :where(:not(.con-indice__bloques)) > .bloque > .bloque__cabecera > p { grid-column: lectura; margin-bottom: var(--espacio-6); }
  /* Un h3 suelto va en el rail, en la fila de lo que rotula (o encima, si es ancho), y los dos con el mismo aire. */
  :where(:not(.con-indice__bloques)) > .bloque > h3 { grid-column: rail; align-self: start; margin-top: var(--espacio-8); }
  :where(:not(.con-indice__bloques)) > .bloque > h3 + :not(.ancho-total, .cifras-clave, .enlaces-rejilla:has(> li:nth-child(3)), .lista-columnas, .rejilla, .pareja, .figura, :is(.tabla-marco, .tabla-bloque, .tabla-plegada):has(thead th:nth-child(5))) { margin-top: var(--espacio-8); }
}

/* ---- Cifras clave: tres o cuatro datos grandes en fila ---------------------- */
.cifras-clave { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--espacio-6) var(--espacio-8); margin: 0; padding: 0; list-style: none; }
/* Cada cifra, una tarjeta de dato: el rótulo arriba, la cifra grande y la nota debajo (la de la lámina, sin flechas de
   subida o bajada: aquí una cifra no es buena ni mala). */
.cifras-clave__item { display: grid; align-content: start; gap: var(--espacio-1); padding: var(--espacio-5); border: var(--grosor-linea) solid var(--borde-tarjeta); border-radius: var(--radio-l); background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
:is(.banda--superficie, .bloque--superficie) .cifras-clave__item { background: var(--papel); box-shadow: none; }
.cifras-clave[style*="--cifras-em"] > .cifras-clave__item { container-type: inline-size; }
.cifras-clave__etiqueta { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.cifras-clave__valor { font: 860 clamp(32px, 6vw, 44px)/1.05 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* La cifra va entera y cabe en su columna: CifrasClave.astro pone en --cifras-em lo que mide la más larga («1,74 billones
   €» se salía 60 px sobre la de al lado a 768 px) y el cuerpo de todas baja lo justo, nunca por debajo de 24 px. Solo si
   puede no caber (más de 5 em: lib/medida.ts, estiloCifrasClave): solo entonces cada cifra es un contenedor. */
@supports (width: 1cqi) {
  .cifras-clave[style*="--cifras-em"] .cifras-clave__valor { font-size: max(24px, min(clamp(32px, 6vw, 44px), 100cqi / var(--cifras-em))); }
}
.cifras-clave__nota { font: var(--tipo-nota); color: var(--tinta-suave); }

/* ---- Tarjeta de dato: una cifra con su rótulo y su pastilla (la de la lámina) ----
   <div class="tarjeta-dato" data-familia="consumo"><span class="tarjeta-dato__rotulo">…</span>
   <span class="tarjeta-dato__cifra">…</span><span class="tlqp-chip">…</span></div>. Arriba, la raya corta y gruesa del
   color de su familia (de tinta si no tiene). La pastilla dice lo que acompaña a la cifra (su parte del total, su año),
   sin flechas ni colores de subida o bajada: aquí una cifra no es buena ni mala. */
.tarjeta-dato { display: grid; justify-items: start; gap: var(--espacio-1); padding: var(--espacio-5); border: var(--grosor-linea) solid var(--borde-tarjeta); border-radius: var(--radio-l); background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.tarjeta-dato::before { content: ""; width: 44px; height: 6px; margin-bottom: var(--espacio-3); background: var(--familia); }
.tarjeta-dato__rotulo { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.tarjeta-dato__cifra { font: 860 clamp(30px, 4vw, 40px)/1.05 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ---- Tarjeta-enlace: una caja entera que lleva a otra página ---------------- */
.enlaces-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--espacio-4); margin: 0; padding: 0; list-style: none; }
/* Con cinco, seis o nueve tarjetas, como mucho tres por fila: a lo ancho de la página cabían cuatro y quedaban filas a
   medias (4 + 2 en «Sigue por aquí» de la portada y de cada provincia, 4 + 1). Donde no caben tres, como siempre. */
.enlaces-rejilla:not(.enlaces-rejilla--pares, .enlaces-rejilla--tres):is(:has(> li:nth-child(5):last-child), :has(> li:nth-child(6):last-child), :has(> li:nth-child(9):last-child)) { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 260px), calc((100% - 2 * var(--espacio-4)) / 3 - 1px)), 1fr)); }
/* Con cuatro, las cuatro en fila o dos y dos: nunca tres y una sola debajo (la fila coja que dejaba la rejilla automática
   entre 768 y 1.088 px). Siete o diez tarjetas, igual: de cuatro en cuatro, o de dos en dos. Es el mismo «interruptor» en todas las rejillas de cuatro (cifras clave, «En 30 segundos», las
   cifras de una ficha, el probador de /datos/): la columna mínima es la cuarta parte si caben las cuatro con su mínimo
   (W4 = 4 × mínimo + 3 × hueco) y la mitad si no; `(W4 - 100%) * 999` salta de un lado a otro de golpe. Por debajo de
   dos mínimos, una sola columna. Lo vigila la prueba «rejillas» (herramientas/pruebas/maqueta.mjs). */
.enlaces-rejilla:not(.enlaces-rejilla--pares, .enlaces-rejilla--tres):is(:has(> li:nth-child(4):last-child), :has(> li:nth-child(7):last-child), :has(> li:nth-child(10):last-child)) { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 260px), clamp(calc(25% - 12px - 1px), calc((1088px - 100%) * 999), calc(50% - 8px - 1px))), 1fr)); }
.cifras-clave:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 220px), clamp(calc(25% - 24px - 1px), calc((976px - 100%) * 999), calc(50% - 16px - 1px))), 1fr)); }
.tlqp-franja__leyenda:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 150px), clamp(calc(25% - 18px - 1px), calc((672px - 100%) * 999), calc(50% - 12px - 1px))), 1fr)); }
/* De dos en dos; la última, si queda sola, ocupa la fila. Dos columnas en cuanto caben dos de 260 px (sin consulta de
   medios: con la letra ampliada, una consulta en em salta antes y dejaba tres y una). */
.enlaces-rejilla--pares { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 260px), calc(50% - 8px - 1px)), 1fr)); }
.enlaces-rejilla--pares > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Una columna (flex): el dato de abajo (.tarjeta-enlace__dato, margin-top: auto) va al pie de la tarjeta, así que en una
   fila de tarjetas de la misma altura los datos y su filete quedan a la misma altura aunque los textos midan distinto
   (en la rejilla de antes el margen automático no empujaba y cada dato iba detrás de su texto). */
.tlqp a.tarjeta-enlace { display: flex; flex-direction: column; gap: var(--espacio-2); height: 100%; color: var(--tinta); text-decoration: none; }
.tlqp a.tarjeta-enlace:hover { background: none; color: var(--tinta); }
.tarjeta-enlace__titulo { font: 760 19px/24px var(--font-sans); letter-spacing: -0.015em; }
.tarjeta-enlace__texto { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.tarjeta-enlace__dato { margin-top: auto; padding-top: var(--espacio-2); font: var(--tipo-dato); font-variant-numeric: tabular-nums; }

/* ---- Lista de enlaces en columnas (provincias, municipios, conceptos) ------- */
.lista-columnas { columns: 3 200px; column-gap: var(--espacio-8); margin: 0; padding: 0; list-style: none; }
.lista-columnas.lectura { columns: 2 240px; }
.lista-columnas li { break-inside: avoid; }
/* Cada enlace, 40 px de alto con un renglón (8 px de aire arriba y abajo); con dos, los mismos 8 px: los renglones de
   las columnas empiezan a la misma altura y entre un nombre y el siguiente hay siempre el mismo aire (centrados en 40
   px, uno de un renglón iba más bajo que uno de dos en la columna de al lado, y dos de dos renglones iban pegados). */
.lista-columnas a { display: block; width: fit-content; max-width: 100%; padding-block: var(--espacio-2); }

/* ---- Aviso: una nota que hay que leer (límites del cálculo, textos pendientes) */
.aviso { display: grid; gap: var(--espacio-2); max-width: var(--ancho-lectura); padding: var(--espacio-4) var(--espacio-5); border-left: 4px solid var(--tinta); border-radius: 0 var(--radio-m) var(--radio-m) 0; background: var(--superficie-hundida); font: var(--tipo-cuerpo-pequeno); }
/* Varios párrafos dentro de un aviso (components/Aviso.astro los mete en un <div>): el mismo aire que entre el título y el texto. */
.aviso > div > * + * { margin-top: var(--espacio-2); }
.aviso__titulo { font-weight: 760; }
.aviso--pendiente { border-left-style: dashed; }

/* ---- «Ver mi cifra en la web» (App\Web\MiCifra; lo rellena resources/js/_mi-cifra.js) ----
   Tu tique, a la derecha del título (Julián, 31-10-2026: la opción A de Interfaz/bloques/mi-cifra/), con las medidas del de la
   portada. Va escondido y vacío, y solo se enseña si se pulsó el botón del resultado: sin eso, la página es la de siempre. Con
   un resumen válido, la plantilla marca <html data-mi-cifra> antes de pintar y el contenido espera a que estén tus cifras,
   para que no se mueva; si el JavaScript no llegara, aparece igual. */
.mi-cifra { display: grid; gap: var(--espacio-2); min-width: 0; }
.mi-cifra[hidden] { display: none; }
html[data-mi-cifra=""] main { visibility: hidden; animation: mi-cifra-aparece 0s 1.5s forwards; }
@keyframes mi-cifra-aparece { to { visibility: visible; } }
.mi-cifra .calc-tique { max-width: none; }
.mi-cifra__isotipo { flex: none; width: 19px; height: 22px; }
/* Sin renglones, el total va justo debajo de la cabecera: una sola línea de corte. */
.mi-cifra .calc-tique__cabecera + .calc-tique__total { padding-top: 0; border-top: 0; }
.mi-cifra__acciones { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espacio-1) var(--espacio-4); margin: var(--espacio-2) 0 0; font: var(--tipo-nota); color: var(--tinta-suave); }
.mi-cifra .mi-cifra__acciones { margin: 0; }
.mi-cifra__acciones[hidden] { display: none; }
.mi-cifra__acciones a, .mi-cifra__acciones button { padding: 0; border: 0; background: none; font: inherit; color: var(--tinta); text-decoration: underline; cursor: pointer; }
/* Lo que iba en la portadilla pasa a su columna; en una pantalla estrecha, el tique va debajo. */
.mi-cifra-texto { display: contents; }
@media (min-width: 64em) {
  .portadilla:has(> .mi-cifra:not([hidden])) { grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--espacio-8); align-items: start; }
  .mi-cifra-texto { display: grid; gap: var(--espacio-4); min-width: 0; }
  .mi-cifra-texto > * { min-width: 0; }
}
/* En las calculadoras sueltas, encima de las preguntas: «Usar mis datos». */
.mi-cifra-suelta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espacio-4); margin-bottom: var(--espacio-4); padding: var(--espacio-3) var(--espacio-4); border-left: 6px solid var(--subrayador); background: var(--subrayador-suave); }
.mi-cifra-suelta[hidden] { display: none; }
.mi-cifra-suelta p { flex: 1 1 16em; margin: 0; text-wrap: pretty; }
.mi-cifra-suelta .tlqp-boton { padding-block: 0; }

/* ---- Lista de definiciones: «concepto … valor» en filas --------------------- */
.definiciones { display: grid; margin: 0; max-width: var(--ancho-lectura); }
.definiciones > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-4); align-items: baseline; padding-block: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); }
.definiciones dt { font: var(--tipo-cuerpo); }
.definiciones dt small { display: block; font: var(--tipo-nota); color: var(--tinta-suave); }
.definiciones dd { font: var(--tipo-dato); font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* La nota de fuente es texto: no pasa de la medida de lectura aunque vaya bajo algo ancho. */
.tlqp-nota { max-width: var(--ancho-lectura); }

/* ---- Lo esencial: rótulo a la izquierda y respuesta a la derecha (fichas cortas, «¿Qué es…?») ---- */
.esencial { display: grid; margin: 0; border-top: var(--grosor-control) solid var(--tinta); }
.esencial > div { display: grid; gap: var(--espacio-1) var(--espacio-6); padding-block: var(--espacio-4); border-bottom: var(--grosor-linea) solid var(--linea); }
.esencial dt { font: 760 15px/26px var(--font-sans); }
.esencial dd { margin: 0; }
@media (min-width: 40em) { .esencial > div { grid-template-columns: 160px minmax(0, 1fr); } }

/* ---- ¿Qué es…? (components/QueEs.astro) -------------------------------------- */
.que-es__entran { display: grid; gap: var(--espacio-2); }
.que-es__entran ul { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--grosor-control) solid var(--tinta); }
.que-es__entran li { display: grid; gap: var(--espacio-1); padding-block: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.que-es__entran a { justify-self: start; display: inline-flex; align-items: center; min-height: 32px; font: 760 17px/24px var(--font-sans); color: var(--tinta); }
/* La ficha completa: el enlace destacado, con el filete de lo que lleva a otra página. */
.que-es__ficha { display: grid; justify-items: start; gap: var(--espacio-1); padding: var(--espacio-1) 0 var(--espacio-1) var(--espacio-4); border-left: var(--grosor-control) solid var(--tinta); }
.que-es__ficha a { display: inline-flex; align-items: center; min-height: var(--alto-control); font: 760 19px/26px var(--font-sans); letter-spacing: -0.015em; }
.que-es__ficha-texto { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }

/* ---- Fuentes de una página --------------------------------------------------- */
.fuentes { display: grid; gap: var(--espacio-2); max-width: var(--ancho-lectura); margin: 0; padding: 0; list-style: none; font: var(--tipo-cuerpo-pequeno); }
.fuentes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espacio-3); align-items: baseline; }
.fuentes small { display: block; font: var(--tipo-nota); color: var(--tinta-suave); }

/* ---- Llamada a la calculadora: cierra las páginas de contenido -------------- */
.llamada { display: grid; gap: var(--espacio-4); justify-items: start; padding: var(--espacio-8) var(--espacio-6); border: var(--grosor-control) solid var(--tinta); border-radius: var(--radio-l); background: var(--superficie); }
.llamada__titulo { font: var(--tipo-titular-2); letter-spacing: var(--tipo-titular-2-espaciado); max-width: 20em; }
.llamada p:not(.llamada__titulo) { max-width: var(--ancho-lectura); color: var(--tinta-suave); }

/* ---- Gráficas en SVG: texto y líneas con los colores de la marca ------------ */
.grafica { display: block; width: 100%; height: auto; overflow: visible; }
.grafica text { font: 500 12px/1 var(--font-sans); fill: var(--tinta-suave); }
.grafica .eje { stroke: var(--linea); stroke-width: 1; }
.grafica .tinta { fill: var(--tinta); }
.grafica .tinta-linea { fill: none; stroke: var(--tinta); stroke-width: 2; }
.grafica .neutro { fill: var(--dato-neutro); }
.grafica .destacado { fill: var(--subrayador); stroke: var(--sobre-subrayador); stroke-width: 2; }
.grafica .grupo-trabajo { fill: var(--grupo-trabajo); }
.grafica .grupo-consumo { fill: var(--grupo-consumo); }
.grafica .grupo-bienes { fill: var(--grupo-bienes); }
.grafica .grupo-resto { fill: var(--grupo-resto); }
.grafica .etiqueta-fuerte { font-weight: 760; fill: var(--tinta); }
.grafica-pie { margin-top: var(--espacio-3); }

/* ---- Mapa de provincias -------------------------------------------------------
   Lo pintan components/Mapa.astro (con <use>) y la calculadora de la portada (con <path>): las mismas
   reglas valen para los dos. El relleno y el borde se heredan del <svg>; cada provincia cambia el suyo
   con su clase (.paso-1 … .paso-5, .sin-dato, .es-destacada). */
.mapa { display: block; width: 100%; max-width: 540px; height: auto; fill: var(--superficie-hundida); stroke: var(--papel); stroke-width: 1;
  /* Cinco pasos de una sola tinta, del más cercano al papel al más lejano, a distancias parecidas. */
  --mapa-paso-1: color-mix(in srgb, var(--tinta) 14%, var(--papel));
  --mapa-paso-2: color-mix(in srgb, var(--tinta) 34%, var(--papel));
  --mapa-paso-3: color-mix(in srgb, var(--tinta) 54%, var(--papel));
  --mapa-paso-4: color-mix(in srgb, var(--tinta) 75%, var(--papel));
  --mapa-paso-5: var(--tinta); }
.mapa :is(path, circle), .mapa use { vector-effect: non-scaling-stroke; }
.mapa .recuadro { fill: none; stroke: var(--linea-control); stroke-width: 1; }
.mapa .paso-1 { fill: var(--mapa-paso-1); }
.mapa .paso-2 { fill: var(--mapa-paso-2); }
.mapa .paso-3 { fill: var(--mapa-paso-3); }
.mapa .paso-4 { fill: var(--mapa-paso-4); }
.mapa .paso-5 { fill: var(--mapa-paso-5); }
/* El contorno: los tres rellenos que se parecen al papel (sin dato y los dos primeros pasos) no se distinguen
   de la página por sí solos, así que llevan el borde en linea-control (3,6:1 sobre papel en claro y 4,8:1 en
   oscuro). Los tres oscuros ya contrastan con la página y llevan el borde del color del papel, que es el que
   los separa entre sí. */
.mapa a > :not([class*="paso-"]), .mapa .sin-dato, .mapa .paso-1, .mapa .paso-2 { stroke: var(--linea-control); }
.mapa__rayado rect { fill: var(--superficie-hundida); stroke: none; }
.mapa__rayado line { stroke: var(--linea-control); stroke-width: 2.5; }
.mapa a:hover > :is(path, use), .mapa :is(path, use).es-actual { stroke: var(--tinta); stroke-width: 2; }
.mapa .es-destacada { fill: var(--subrayador); stroke: var(--sobre-subrayador); stroke-width: 2; }
/* El foco dibuja la silueta de la provincia, no el rectángulo que la envuelve. */
.mapa a:focus-visible { outline: none; }
.mapa a:focus-visible > :is(path, use) { stroke: var(--foco); stroke-width: 3; }
.mapa-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-4); margin: var(--espacio-3) 0 0; padding: 0; list-style: none; font: var(--tipo-dato); color: var(--tinta-suave);
  --mapa-paso-1: color-mix(in srgb, var(--tinta) 14%, var(--papel));
  --mapa-paso-2: color-mix(in srgb, var(--tinta) 34%, var(--papel));
  --mapa-paso-3: color-mix(in srgb, var(--tinta) 54%, var(--papel));
  --mapa-paso-4: color-mix(in srgb, var(--tinta) 75%, var(--papel));
  --mapa-paso-5: var(--tinta); }
.mapa-leyenda li { display: inline-flex; align-items: center; gap: var(--espacio-2); }
.mapa-leyenda i { display: inline-block; flex: none; width: 14px; height: 14px; }
.mapa-leyenda .paso-1 { background: var(--mapa-paso-1); box-shadow: inset 0 0 0 1px var(--linea-control); }
.mapa-leyenda .paso-2 { background: var(--mapa-paso-2); box-shadow: inset 0 0 0 1px var(--linea-control); }
.mapa-leyenda .paso-3 { background: var(--mapa-paso-3); }
.mapa-leyenda .paso-4 { background: var(--mapa-paso-4); }
.mapa-leyenda .paso-5 { background: var(--mapa-paso-5); }
/* El mismo rayado que en el mapa (el del manual para lo que va aparte, en línea más fina). */
.mapa-leyenda .sin-dato { background: repeating-linear-gradient(135deg, var(--linea-control) 0 2px, var(--superficie-hundida) 2px 5px); box-shadow: inset 0 0 0 1px var(--linea-control); }

/* Las filas de barras del manual, cuando el nombre es un enlace largo. */
.tlqp-barras__nombre a { text-decoration-thickness: 1px; }
.tlqp-barras--anchas .tlqp-barras__fila { grid-template-columns: minmax(130px, 260px) minmax(40px, 1fr) minmax(84px, auto); }
@media (max-width: 420px) { .tlqp-barras--anchas .tlqp-barras__fila { grid-template-columns: 1fr auto; } }

/* ---- La letra ampliada ---------------------------------------------------------
   Con la letra al 200 % (el tamaño del texto de los ajustes de accesibilidad, o «Ampliar solo el texto» de Firefox, que
   también hace saltar las consultas de medios en em: la navegación pasa al menú plegado) nada se sale de la página ni
   pisa a lo de al lado: las cifras grandes
   y lo que va en un solo renglón se parten como último recurso (a su tamaño de siempre caben enteras: lib/medida.ts, las
   unidades de contenedor y los espacios de no separación). Lo vigila herramientas/auditar-maqueta.mjs --motor=firefox
   --letra=2 (docs/CONSTRUCCION.md, «Auditar la maquetación»). */
:is(.treinta__valor, .cifras-clave__valor, .cifra-destacada__valor, .lista-iconos__cifra, .recuadro__cifra, .hay-en-la-web__cifra, .tlqp-cifra__valor, .tlqp-franja__pct, .definiciones dd, .tu-caso__fila dd) { overflow-wrap: anywhere; }
:is(.cifras-clave__valor, .definiciones dd, .tlqp-ticket__total .tlqp-subrayado, .tlqp-cifra__valor) { white-space: normal; overflow-wrap: anywhere; }
/* Lo que va en fila (el total del ticket y su cifra, el icono y el nombre de una calculadora, una tarjeta de «Hay en la
   web») puede estrecharse: si no, su palabra más larga ensancha la fila. */
:is(.tlqp-ticket__total, .portada-calculadoras li, .hay-en-la-web li) > * { min-width: 0; }
/* El total del ticket, si no cabe junto a «Total», baja entero al renglón siguiente (a su tamaño cabe de sobra). */
.tlqp-ticket__total { flex-wrap: wrap; }
.hay-en-la-web a { overflow-wrap: anywhere; }

/* ---- «Usa este gráfico» -----------------------------------------------------
   La descarga en PNG de una gráfica, con la atribución que se pide (components/UsaEsteGrafico.astro y los indicadores de
   las áreas, components/areas/Indicador.astro). */
.grafica-uso__texto { margin: 0 0 var(--espacio-3); font: var(--tipo-cuerpo-pequeno); text-wrap: pretty; }
.grafica-uso__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3) var(--espacio-5); margin: 0 0 var(--espacio-5); font: var(--tipo-cuerpo-pequeno); }
.grafica-uso__aviso { font: var(--tipo-nota); color: var(--tinta-suave); }

/* ---- «Usa este gráfico» (components/Compartir.astro y cliente/sitio.ts, 18-10-2026) -------------------------------------
   Un botón pequeño con el icono de compartir, debajo de la gráfica y a la derecha, que abre un recuadro con los tres
   formatos (horizontal, vertical e historia), la atribución y, en las áreas, el código para insertarla. Es un <details>. */
/* Ocupa su columna entera (la regla de la maqueta) y lleva el botón a la derecha. */
.compartir { position: relative; justify-self: stretch; align-self: start; margin: 0; text-align: right; }
.figura > .compartir, .indicador > .compartir { margin-top: calc(-1 * var(--espacio-2)); }
/* La firma de la web junto al botón, a la izquierda (19-10-2026): sale en las capturas de pantalla de la gráfica sin
   taparla. Las imágenes que se descargan llevan además la marca de agua (cliente/_calculadora/compartir/lienzo.ts). */
.compartir[data-firma]::before { content: attr(data-firma); position: absolute; left: 0; top: 0; font: 650 13px/var(--alto-control) var(--font-sans); letter-spacing: 0.01em; color: var(--tinta-suave); pointer-events: none; }
@media (max-width: 22.4em) { .compartir[data-firma]::before { content: none; } }
.compartir__boton { display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: var(--alto-control); padding: 0 var(--espacio-4) 0 var(--espacio-3); border: var(--grosor-linea) solid var(--linea-control); border-radius: var(--radio-pastilla); background: var(--superficie); color: var(--tinta); font: 650 14px/18px var(--font-sans); list-style: none; cursor: pointer; user-select: none; }
.compartir__boton::-webkit-details-marker { display: none; }
.compartir__boton:hover, .compartir[open] > .compartir__boton { border-color: var(--tinta); background: var(--subrayador-suave); }
/* Con dos clases: las reglas de las figuras que estiran sus svg (.cien__figura svg, de 420 px) no lo agrandan. */
.compartir .compartir__icono { flex: none; width: 18px; height: 18px; max-width: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compartir__panel { position: absolute; right: 0; top: calc(100% + var(--espacio-2)); z-index: 15; display: grid; gap: var(--espacio-3); width: min(380px, calc(100vw - 2 * var(--margen-lateral))); padding: var(--espacio-5); border: var(--grosor-linea) solid var(--borde-tarjeta); border-radius: var(--radio-m); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-elevada); text-align: left; }
.compartir__titulo { margin: 0; font: 760 16px/22px var(--font-sans); }
.compartir__formatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-2); }
.compartir__formatos[hidden] { display: none; }
.compartir__formato { display: grid; justify-items: center; align-content: start; gap: var(--espacio-1); min-height: 92px; padding: var(--espacio-3) var(--espacio-1); border: var(--grosor-linea) solid var(--linea-control); border-radius: var(--radio-s); background: var(--papel); color: var(--tinta); font: 650 14px/18px var(--font-sans); cursor: pointer; text-align: center; }
.compartir__formato small { font: 450 12px/16px var(--font-sans); color: var(--tinta-suave); }
.compartir__formato:hover { border-color: var(--tinta); background: var(--subrayador-suave); }
.compartir__formato:disabled { opacity: 0.6; cursor: progress; }
.compartir__forma { display: block; margin-bottom: var(--espacio-1); border: 2px solid currentColor; border-radius: 3px; }
.compartir__forma--horizontal { width: 34px; height: 19px; margin-top: 6px; }
.compartir__forma--vertical { width: 22px; height: 27px; margin-top: 2px; }
.compartir__forma--historia { width: 17px; height: 30px; }
.compartir__aviso { margin: 0; font: var(--tipo-nota); color: var(--tinta-suave); }
.compartir__aviso:empty { display: none; }
.compartir__texto { margin: 0; font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }
.compartir__insertar[hidden] { display: none; }
.compartir__insertar { display: grid; gap: var(--espacio-2); padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
.compartir .copiable__texto { max-height: 8em; overflow: auto; font: 400 12px/18px var(--font-mono); }
/* Dentro de un plegable («Para consultar» de las áreas), a la vista: sin botón ni recuadro flotante, y lo que había en el
   recuadro en su sitio, con el código para insertar debajo (30-10-2026). */
.compartir--en-linea { justify-self: start; text-align: left; }
.compartir--en-linea .compartir__etiqueta { margin: 0 0 var(--espacio-3); }
.compartir--en-linea .compartir__panel { position: static; width: auto; max-width: min(100%, 520px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
@media print { .compartir { display: none !important; } }
/* Fuera de las áreas (components/UsaEsteGrafico.astro) el botón va al final, sin el código para insertar debajo. */
.grafica-uso__acciones:last-child { margin-bottom: 0; }

/* Las fuentes de una respuesta de las preguntas frecuentes (components/FuentesDeRespuesta.astro), pegadas a ella. */
.respuesta-fuentes { max-width: var(--ancho-lectura); }
.respuesta-fuentes > span { min-width: 0; }
.tlqp-desplegable__cuerpo > .respuesta-fuentes { margin-top: calc(var(--espacio-3) - var(--espacio-6)); }
.portada-preguntas .tlqp-desplegable__cuerpo > .respuesta-fuentes { margin-top: 0; }

/* Los mapas de provincias: qué mide la leyenda, cómo se ve la cifra de cada una (components/AyudaMapa.astro) y el globo
   con esa cifra (cliente/_mapas.ts). La ayuda de ratón o de dedo según el aparato: sin ratón no hay «pasar por encima». */
.mapa-leyenda__titulo { margin: var(--espacio-3) 0 0; font: var(--tipo-dato); color: var(--tinta); }
.mapa-leyenda__titulo + .mapa-leyenda { margin-top: var(--espacio-1); }
.mapa-ayuda { margin: var(--espacio-2) 0 0; font: var(--tipo-dato); font-weight: 450; color: var(--tinta-suave); }
.mapa-ayuda__tactil { display: none; }
@media (hover: none) {
  .mapa-ayuda__raton { display: none; }
  .mapa-ayuda__tactil { display: inline; }
}
.mapa-globo { position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 16px)); padding: 6px 10px; border: var(--grosor-linea) solid var(--tinta); border-radius: var(--radio-s); background: var(--papel); color: var(--tinta); font: var(--tipo-dato); pointer-events: none; }
.mapa-globo[hidden] { display: none; }