/* todoloquepagas — zona «Impuestos»: el índice (/impuestos/), la ficha de cada tributo
   (/impuestos/<id>/) y el catálogo (/impuestos/catalogo/). Se carga con <Base estilos={['impuestos']}>,
   después de tokens.css, componentes.css y sitio.css.
   Aquí solo está lo que esas hojas no traen. Ningún color literal: todo sale de tokens.css.

   Orden: 1. la ficha (cabecera, de un vistazo, caja de la calculadora, índice y bloques);
          2. las piezas que ya usaban las fichas de concepto (tablas, plegables, gráfica, mapa, datos);
          3. el índice de /impuestos/;  4. el catálogo. */

/* ==== 1. La ficha de un tributo ==============================================================
   Con el ritmo editorial (ritmo.css; docs/CONSTRUCCION.md): la apertura en el fondo suave de la familia (.ficha lleva
   data-familia), «En 30 segundos», la caja de la calculadora en amarillo suave, la vida entera en una banda invertida,
   «Cuánto se paga» y «Los datos» en banda blanca, los bloques de una frase en breve y las tarjetas de color. */

/* ---- La apertura: migas, sello de la familia, nombre, entradilla y «En 30 segundos» ---------- */
.ficha-apertura { padding-top: 0; }
.ficha-cabecera { padding-bottom: var(--espacio-6); }
.ficha-cabecera__sello { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3) var(--espacio-4); }
.ficha-etiquetas { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.ficha-cabecera .tlqp-chip { background: var(--superficie); color: var(--tinta); }
.ficha-cabecera .ficha-etiquetas__familia { background: var(--familia-tinta); color: var(--familia-suave); }
.ficha-cabecera__nombre { display: grid; gap: var(--espacio-2); min-width: 0; }
/* Una palabra larga del nombre («telecomunicaciones», «urbanísticos») cabe entera: el cuerpo baja lo justo (--titular-em,
   sitio.css, «Portadilla»). Sin guiones: con `hyphens: auto`, Firefox partía palabras que cabían para equilibrar los
   renglones. Solo con la letra ampliada, si aun así no cabe, se parte. */
.ficha-cabecera__nombre > * { min-width: 0; overflow-wrap: break-word; }
.ficha-cabecera__nombre .titular-1 { --tamano-titular-1: clamp(38px, 6vw, 64px); font-size: var(--tamano-titular-1); line-height: 1.02; letter-spacing: -0.03em; }
.ficha-cabecera__oficial { max-width: var(--ancho-lectura); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.ficha-cabecera .entradilla { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.4; }
/* Un nombre oficial largo (los del catálogo, mientras su ficha no tiene nombre de la calle) no puede ocupar media pantalla. */
.ficha-cabecera__nombre .titular-1--largo { --tamano-titular-1: clamp(26px, 3.6vw, 36px); max-width: 26em; font-size: var(--tamano-titular-1); line-height: 1.14; letter-spacing: -0.02em; }

/* Multas, recargos e intereses: lo dicen arriba, con el borde discontinuo de lo que va aparte. */
.ficha-no-tributo { display: grid; gap: var(--espacio-1); max-width: var(--ancho-lectura); margin-top: var(--espacio-2); padding: var(--espacio-4) var(--espacio-5); border: var(--grosor-control) dashed var(--tinta); background: var(--superficie); font: var(--tipo-cuerpo-pequeno); }
.ficha-no-tributo__titulo { font: 860 22px/28px var(--font-sans); letter-spacing: -0.01em; }

/* El enlace a la ficha principal (de una parte a su tributo, de una partida a los tributos que junta). */
.ficha-lleva-a { display: grid; gap: var(--espacio-1); max-width: var(--ancho-lectura); margin-top: var(--espacio-2); padding: var(--espacio-1) 0 var(--espacio-1) var(--espacio-4); border-left: 4px solid var(--familia); }
.ficha-lleva-a .tlqp-etiqueta { color: var(--familia-tinta); }
.ficha-lleva-a__enlace { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; font: 760 19px/26px var(--font-sans); letter-spacing: -0.015em; }
.ficha-lleva-a__lista { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-5); margin: 0; padding: 0; list-style: none; font: 650 17px/26px var(--font-sans); }
.ficha-lleva-a__lista a { display: inline-flex; align-items: center; min-height: 40px; }

/* ---- En 30 segundos (antes «De un vistazo»): las cifras en grande y los datos en su rejilla ---- */
.vistazo { display: grid; gap: var(--espacio-6); padding-top: var(--espacio-6); border-top: var(--grosor-linea) solid var(--familia); container: vistazo / inline-size; }
.vistazo__titulo { display: flex; align-items: center; gap: var(--espacio-2); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta); }
.vistazo__cifras, .vistazo__datos { display: grid; margin: 0; }
.vistazo__cifras { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--espacio-6) var(--espacio-8); }
/* Con cuatro, las cuatro en fila o dos y dos (el interruptor de sitio.css, «Tarjeta-enlace»). */
.vistazo__cifras--4 { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 240px), clamp(calc(25% - 24px - 1px), calc((1056px - 100%) * 999), calc(50% - 16px - 1px))), 1fr)); }
.vistazo__celda { display: grid; align-content: start; gap: var(--espacio-1); min-width: 0; }
/* Marca final: la primera cifra, en el ticket amarillo del kit (TicketAmarillo.astro), que dice cuánto; las demás, sin
   caja, debajo de una raya gruesa del color de la familia (como «En 30 segundos», ritmo.css). */
.vistazo__cifras { align-items: start; margin: 0; padding: 0; list-style: none; }
.vistazo__celda--cifra { gap: var(--espacio-2); padding-top: var(--espacio-4); border-top: 6px solid var(--familia); container-type: inline-size; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.vistazo__celda--ticket { padding-top: 0; border-top: 0; container-type: normal; }
.vistazo__ticket .tlqp-ticket__papel { container-type: inline-size; gap: var(--espacio-2); padding-block: var(--espacio-3) var(--espacio-4); }
.vistazo__ticket .vistazo__nota, .vistazo__ticket .vistazo__nota a { color: var(--fijo-tinta); }
.vistazo__celda--cifra .vistazo__etiqueta { font: 760 17px/24px var(--font-sans); letter-spacing: normal; text-transform: none; color: var(--tinta); text-wrap: balance; }
.vistazo__ticket .vistazo__etiqueta { padding-top: var(--espacio-2); border-top: 3px solid var(--fijo-tinta); color: var(--fijo-tinta); }
.vistazo__etiqueta { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.vistazo__valor { margin: 0; font: 650 17px/24px var(--font-sans); letter-spacing: -0.005em; }
.vistazo__valor--cifra { font: 860 clamp(40px, 5vw, 58px)/1 var(--font-sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* La cifra cabe entera en su columna: Vistazo.astro pone en --vistazo-em lo que mide la más larga y el cuerpo baja lo
   justo (como en «En 30 segundos»), nunca por debajo de 28 px. */
@supports (width: 1cqi) {
  .vistazo__valor--cifra { font-size: max(28px, min(clamp(40px, 5vw, 58px), 100cqi / var(--vistazo-em, 1))); }
}
.vistazo__unidad { display: block; margin-top: var(--espacio-2); font: 760 19px/24px var(--font-sans); letter-spacing: -0.01em; }
.vistazo__nota { margin: 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.vistazo__nota a { color: var(--tinta); }
.vistazo__ancla { margin-top: var(--espacio-1); }
/* Los datos: una columna; desde 532 px de ancho, dos; desde 814, tres; desde 1.096, cuatro (250 px como poco cada una,
   como la rejilla automática de antes). Cuántas se usan de verdad y qué datos van anchos lo pone Vistazo.astro en
   --columnas-N y --en-N (planDeRejilla(), en rejilla-vistazo.ts): sin filas cojas ni huecos. */
.vistazo__datos { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-5) var(--espacio-8); }
@container vistazo (min-width: 532px) {
  .vistazo__datos { grid-template-columns: repeat(var(--columnas-2, 2), minmax(0, 1fr)); }
  .vistazo__datos > .vistazo__celda { grid-column: var(--en-2, auto); }
}
@container vistazo (min-width: 814px) {
  .vistazo__datos { grid-template-columns: repeat(var(--columnas-3, 3), minmax(0, 1fr)); }
  .vistazo__datos > .vistazo__celda { grid-column: var(--en-3, auto); }
}
@container vistazo (min-width: 1096px) {
  .vistazo__datos { grid-template-columns: repeat(var(--columnas-4, 4), minmax(0, 1fr)); }
  .vistazo__datos > .vistazo__celda { grid-column: var(--en-4, auto); }
}
.vistazo__datos .vistazo__celda { padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea-control); }
.vistazo__notas { display: grid; gap: var(--espacio-2); }
.vistazo__aclaracion { max-width: var(--ancho-lectura); font: var(--tipo-nota); color: var(--tinta-suave); }
/* Una sola cifra: el ticket, a la medida de lo que lleva (no de lado a lado). */
.vistazo__cifras--1 { grid-template-columns: minmax(0, 32em); }
/* Cuando lo que acompaña a la cifra es una frase («de la base con contrato indefinido…», la cotización por desempleo), la
   cifra va arriba y la frase debajo, a lo ancho de la lectura, como en las demás celdas: al lado, el rótulo se quedaba en
   una letra por renglón. */
.vistazo__celda--frase .vistazo__unidad { max-width: var(--ancho-lectura); text-wrap: pretty; }

/* ---- La caja de la calculadora: la llamada a la acción de arriba, en amarillo suave ---------- */
.caja-calculadora { display: grid; gap: var(--espacio-6); margin-block: var(--espacio-8); padding: var(--espacio-6) var(--espacio-5); border-radius: var(--radio-l); background: var(--subrayador-suave); color: var(--tinta); }
.caja-calculadora__texto { display: grid; gap: var(--espacio-2); }
.caja-calculadora__antetitulo { display: flex; align-items: center; gap: var(--espacio-3); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta); }
.caja-calculadora__pregunta { max-width: 20em; font: 860 clamp(26px, 4.4vw, 38px)/1.1 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.caja-calculadora__linea { max-width: var(--ancho-lectura); color: var(--tinta); }
.caja-calculadora__acciones { display: grid; gap: var(--espacio-2); }
/* El botón principal de la marca (amarillo, con flecha), más grande; sobre el amarillo suave lo separa su sombra. */
.tlqp .caja-calculadora a.tlqp-boton--destacado { min-height: 56px; padding-inline: var(--espacio-6) var(--espacio-5); font-size: 18px; box-shadow: var(--sombra-elevada); }
.tlqp .caja-calculadora a.caja-calculadora__otra { display: inline-flex; align-items: center; justify-self: start; min-height: var(--alto-control); color: var(--tinta); font: var(--tipo-cuerpo-pequeno); }
.tlqp .caja-calculadora a.caja-calculadora__otra:hover { background: var(--subrayador); color: var(--sobre-subrayador); }
@media (min-width: 50em) {
  .caja-calculadora { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--espacio-8) var(--espacio-12); margin-block: var(--espacio-10) var(--espacio-12); padding: var(--espacio-8) var(--espacio-10); }
  .caja-calculadora__acciones { justify-items: start; max-width: 320px; }
}

/* El aviso de «ficha en preparación» va entre la caja y los bloques. */
.ficha > .aviso { margin-block: var(--espacio-8); }
.ficha-apertura + .aviso { margin-top: var(--espacio-8); }

/* Una norma en vigor que puede caer (un decreto-ley sin convalidar): dentro del bloque al que afecta,
   con el borde discontinuo de lo que no es firme. Su tabla va dentro y no lleva margen propio. */
.aviso-norma { display: grid; gap: var(--espacio-3); max-width: var(--ancho-lectura); margin-top: var(--espacio-6); padding: var(--espacio-4) var(--espacio-5); border: var(--grosor-linea) solid var(--linea); border-left: var(--grosor-control) solid var(--tinta); background: var(--superficie-hundida); --fondo-tabla: var(--superficie-hundida); }
.aviso-norma--pendiente { border-left-style: dashed; }
.aviso-norma__titulo { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; }
.aviso-norma__procedencia, .aviso-norma__enlace { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.aviso-norma__enlace a { color: var(--tinta); }
.aviso-norma .tabla-ficha { margin-top: 0; min-width: 0; }
.aviso-norma:has(.tabla-ficha) { max-width: none; }

/* ---- Cuerpo: índice y bloques ----------------------------------------------------------------
   El índice y su maqueta (rail y lectura) son los de toda la web: .con-indice e .indice-pegado, en sitio.css. */
/* En el móvil los titulares de bloque bajan un punto: muchos llevan una cifra y una frase. */
.ficha-bloques .bloque > .bloque__cabecera .titular-2 { font-size: clamp(25px, 6.6vw, 32px); line-height: 1.18; }
.ficha-bloques .bloque--breve > .bloque__cabecera .titular-2 { font-size: 24px; line-height: 30px; }

/* ---- Piezas de los bloques ------------------------------------------------------------------- */
/* El tipo de 2026, rotulado, antes de la explicación: en grande, con el filete de la familia. */
.dato-rotulado { display: grid; gap: var(--espacio-2); max-width: var(--ancho-lectura); padding-left: var(--espacio-5); border-left: 6px solid var(--familia); }
.dato-rotulado__valor { font: 760 clamp(21px, 2.6vw, 26px)/1.3 var(--font-sans); letter-spacing: -0.015em; }

/* El tipo de 2026 cuando es una cifra («8 % de la prima»): en grande, con su nota de fuente debajo. */
.ficha-tipo-cifra { display: grid; gap: var(--espacio-4); max-width: var(--ancho-lectura); }

/* El ejemplo con números: un trozo de ticket (el recuadro «Un ejemplo» de ritmo.css). */
.ejemplo { display: grid; gap: var(--espacio-3); max-width: var(--ancho-lectura); padding: var(--espacio-5); border: var(--grosor-control) solid var(--tinta); background: var(--superficie); }
.ejemplo__rotulo { display: flex; align-items: center; gap: var(--espacio-2); padding-bottom: var(--espacio-3); border-bottom: var(--grosor-control) dashed var(--tinta); color: var(--tinta); }
.ejemplo__texto { font: 650 19px/28px var(--font-sans); letter-spacing: -0.005em; }

.ficha-exenciones, .ficha-norma, .ficha-grafica, .ficha-calculo, .ficha-regla { display: grid; gap: var(--espacio-4); min-width: 0; }
.ficha-exenciones > *, .ficha-norma > *, .ficha-grafica > *, .ficha-calculo > *, .ficha-regla > * { min-width: 0; }
.ficha-exenciones .lista-limpia, .ficha-norma .lista-limpia { max-width: var(--ancho-lectura); font: var(--tipo-cuerpo-lectura); }
.ficha-exenciones .lista-limpia li { background-position: 0 14px; }
.ficha-regla { gap: var(--espacio-6); }

/* La vida entera: la banda invertida del momento fuerte, con las barras del color de la familia. */
.ficha-grafica.banda { padding-block: var(--espacio-8); }
.ficha-grafica .titular-3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; font-weight: 760; letter-spacing: -0.015em; }
.ficha-grafica__enlaces a { color: var(--tinta); }

/* Las normas: cada una con su documento. */
.normas { display: grid; gap: var(--espacio-2); max-width: var(--ancho-lectura); margin: 0; padding: 0; list-style: none; }
.normas li { position: relative; padding-left: var(--espacio-6); font: var(--tipo-cuerpo); }
.normas li::before { content: ""; position: absolute; top: 12px; left: 0; width: 14px; height: 3px; background: var(--familia); }

/* «Lo esencial» de una ficha corta (.esencial) es común: está en sitio.css. */

/* «¿Entra en la calculadora?»: la marca y el motivo, en grande. */
.entra { display: grid; justify-items: start; gap: var(--espacio-3); max-width: var(--ancho-lectura); }
.entra .marca { min-height: 32px; padding-inline: var(--espacio-3); font-size: 13px; }
.entra__motivo { font: 650 clamp(21px, 2.4vw, 26px)/1.3 var(--font-sans); letter-spacing: -0.015em; }
.entra__nota { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }

/* Preguntas frecuentes: los desplegables del manual, a ancho de lectura. */
.preguntas { max-width: var(--ancho-lectura); }
.preguntas .tlqp-desplegable summary:hover { background: var(--subrayador-suave); }
.preguntas .tlqp-desplegable__cuerpo { padding-right: var(--espacio-8); }

.nota-catalogo, .ficha-verificacion { max-width: var(--ancho-lectura); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.ficha-verificacion { display: flex; gap: var(--espacio-2); align-items: baseline; }

/* Un grupo de plegables seguidos: comparten los filetes (el aspecto es el de .detalle, en ritmo.css). */
.plegables { display: grid; max-width: var(--ancho-lectura); }
.plegables .plegable { max-width: none; }

/* ==== 2. Piezas de las fichas de concepto ====================================================== */

/* ---- Tablas de las fichas ------------------------------------------------------------------ */
.tabla-ficha { display: grid; gap: var(--espacio-3); min-width: 0; max-width: 920px; }
.tabla-ficha > * { min-width: 0; }
.tabla-ficha--estrecha { max-width: var(--ancho-lectura); }
.tabla-ficha .tabla-datos th[scope="row"] { font-weight: 450; }
.tabla-ficha .tabla-datos tbody th, .tabla-ficha .tabla-datos tbody td { padding-block: var(--espacio-2); }
.tabla-ficha .tabla-datos tbody tr:last-child > * { border-bottom-color: var(--tinta); }
.tabla-ficha .tabla-datos tbody tr.fila-resaltada > * { font-weight: 760; }
.tabla-ficha__aclaracion { display: block; font: var(--tipo-nota); color: var(--tinta-suave); }
.tabla-ficha__pie { max-width: var(--ancho-lectura); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
/* En móvil la primera columna no puede comerse la pantalla: se deja partir el texto. */
@media (max-width: 40em) {
  .tabla-ficha .tabla-datos th, .tabla-ficha .tabla-datos td { padding-right: var(--espacio-3); }
  .tabla-ficha .tabla-datos thead th { white-space: normal; vertical-align: bottom; }
}

/* ---- Plegable: es el .detalle de ritmo.css; aquí solo lo que cambia dentro de una ficha ------ */
.plegable { max-width: var(--ancho-lectura); }
.bloque > .plegable + .plegable, .ficha-regla > .plegable + .plegable { margin-top: calc(-1 * var(--espacio-6)); }
.plegable-titulo { margin-bottom: calc(-1 * var(--espacio-2)); }

/* ---- «Cómo lo calculamos»: el supuesto, como un trozo de ticket ----------------------------- */
.supuesto { display: grid; gap: var(--espacio-3); max-width: var(--ancho-lectura); padding: var(--espacio-4) var(--espacio-5); border: var(--grosor-control) solid var(--tinta); background: var(--superficie); }
.supuesto__rotulo { display: flex; align-items: center; gap: var(--espacio-2); padding-bottom: var(--espacio-3); border-bottom: var(--grosor-control) dashed var(--tinta); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; }
.supuesto__frase { font: 450 16px/24px var(--font-sans); }
.lista-limpia { display: grid; gap: var(--espacio-3); margin: 0; padding: 0; list-style: none; font: var(--tipo-cuerpo-pequeno); }
.lista-limpia li { padding-left: var(--espacio-6); background: linear-gradient(var(--familia), var(--familia)) 0 10px / 12px 3px no-repeat; }
.persona-referencia { max-width: var(--ancho-lectura); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.persona-referencia a { color: var(--tinta); }

/* ---- Gráfica por edad ----------------------------------------------------------------------- */
.grafica-edad { display: grid; gap: var(--espacio-1); max-width: var(--ancho-lectura); margin: 0; }
.grafica-edad .grafica { height: 170px; }
.grafica-edad__barra { fill: var(--familia); }
.grafica-edad__maximo { font: var(--tipo-dato); color: var(--tinta-suave); }
.grafica-edad__tope { stroke-dasharray: 2 4; }
.grafica-edad .grafica-edad__base { stroke: var(--tinta); }
/* La separación entre barras: 1 px en pantallas estrechas, donde cada barra mide unos 4 px, y los 2 px del manual en las anchas.
   Del color del fondo que tenga detrás (en la banda invertida, el papel oscuro). */
.grafica-edad__corte { stroke: var(--papel); stroke-width: 1px; }
@media (min-width: 40em) { .grafica-edad__corte { stroke-width: 2px; } }
/* Las marcas van sueltas (absolutas): el eje mide lo que ellas, 6 px y un renglón, también con la letra ampliada. */
.grafica-edad__eje { position: relative; height: 24px; height: calc(6px + 1lh); margin: 0; padding: 0; list-style: none; font: var(--tipo-dato); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.grafica-edad__eje li { position: absolute; top: 0; transform: translateX(-50%); padding-top: 6px; }
.grafica-edad__eje li::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 4px; background: var(--tinta-suave); }
/* La primera y la última marca se pegan a los bordes para no salirse de la gráfica. */
.grafica-edad__eje .es-primera { left: 0; transform: none; }
.grafica-edad__eje .es-primera::before { left: 2px; }
.grafica-edad__eje .es-ultima { right: 0; transform: none; }
.grafica-edad__eje .es-ultima::before { left: auto; right: 2px; }
.grafica-edad__unidad { font: var(--tipo-nota); color: var(--tinta-suave); }

/* ---- Mapa de una ficha ---------------------------------------------------------------------- */
.mapa-ficha { display: grid; gap: var(--espacio-3); max-width: 760px; }
.mapa-ficha figure { margin: 0; }

/* ---- «Los datos»: cada cifra con su fuente, de dos en dos sobre la banda blanca ---------------- */
.datos-ficha { display: grid; gap: var(--espacio-6) var(--espacio-8); margin: 0; }
.datos-ficha > div { display: grid; align-content: start; gap: var(--espacio-2); padding-top: var(--espacio-3); border-top: 3px solid var(--familia); }
.datos-ficha dt { font: 650 15px/22px var(--font-sans); color: var(--tinta); }
.datos-ficha dd { display: grid; gap: var(--espacio-2); margin: 0; }
.datos-ficha__valor { font: 760 21px/28px var(--font-sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (min-width: 46em) { .datos-ficha:not(.datos-ficha--una) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==== 3. El índice de /impuestos/ ===============================================================
   Con el ritmo editorial (ritmo.css; docs/CONSTRUCCION.md): las dos puertas con su cifra en grande; «En 30 segundos»;
   las familias en sus cuatro grupos de color (.grupo-color, con su rótulo y su color una vez), cada una con su nombre y
   su total en la tinta del grupo, pegados en el rail mientras se lee la lista; los conceptos con el guion de la familia;
   el reparto por familias en la banda de tinta, cada barra de su color; y las familias del catálogo, en la banda
   superficie. Sin iconos (marca final). */

/* ---- Las dos puertas: los conceptos de la calculadora y el catálogo --------------------------- */
.puertas { display: grid; gap: var(--espacio-4); }
.tlqp a.puerta { position: relative; display: flex; flex-direction: column; gap: var(--espacio-3); padding: var(--espacio-6) var(--espacio-5); border: var(--grosor-control) solid var(--tinta); border-radius: var(--radio-l); background: var(--superficie); color: var(--tinta); text-decoration: none; }
.tlqp a.puerta:hover { background: var(--subrayador-suave); color: var(--tinta); }
.tlqp a.puerta:hover .puerta__titulo { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.puerta__cabeza { display: flex; align-items: center; gap: var(--espacio-3); }
.puerta__cabeza .tlqp-etiqueta { color: var(--tinta); }
.puerta__titulo { font: 860 clamp(24px, 3.4vw, 30px)/1.12 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.puerta__texto { font: var(--tipo-cuerpo-pequeno); color: var(--tinta); text-wrap: pretty; }
/* El dato de cada puerta va abajo, tras una línea de corte, como el total de un ticket: la cifra en grande. */
.puerta__dato { display: block; margin-top: auto; padding: var(--espacio-4) var(--espacio-10) 0 0; border-top: var(--grosor-control) dashed var(--tinta); font: 650 17px/24px var(--font-sans); }
.puerta__cifra { display: block; margin-bottom: var(--espacio-1); font: 860 clamp(34px, 4vw, 46px)/1.02 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.puerta__flecha { position: absolute; right: var(--espacio-5); bottom: var(--espacio-6); width: 24px; height: 24px; }
.puertas__notas { display: grid; gap: var(--espacio-2); padding-block: var(--espacio-4) var(--espacio-8); }
@media (min-width: 50em) {
  .puertas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-6); }
  .tlqp a.puerta { padding: var(--espacio-8); }
  .puerta__flecha { right: var(--espacio-8); bottom: var(--espacio-8); }
  .puertas__notas { padding-bottom: var(--espacio-10); }
}
/* «Es un perfil, no una media»: debajo de las cifras de «En 30 segundos», a la medida de la lectura. */
.impuestos-perfil { max-width: var(--ancho-lectura); margin-top: var(--espacio-8); }

/* ---- Las familias del catálogo, cada una con su color y cuántas figuras tiene -----------------------
   La caja entera lleva a su familia en el catálogo (el enlace se estira por encima con ::after, sin pintar nada). */
/* En sus cuatro grupos de color (.grupo-color, ritmo.css), uno debajo de otro; las tarjetas de cada uno, en fila. */
.familias-catalogo-grupos { display: grid; gap: var(--espacio-6); margin-bottom: var(--espacio-6); container-type: inline-size; }
.familias-catalogo-grupos .grupo-color__rotulo { margin-bottom: var(--espacio-2); }
.familias-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); gap: var(--espacio-3); margin: 0; padding: 0; list-style: none; }
.familias-catalogo li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--espacio-3); min-height: 56px; padding: var(--espacio-2) var(--espacio-3); border: var(--grosor-control) solid transparent; border-radius: var(--radio-m); background: var(--familia-suave); }
.familias-catalogo li:hover { border-color: var(--tinta); }
/* Con tres columnas (de 612 a 819 px de ancho), un grupo de 4, 7, 10… familias dejaba una sola en la última fila: las
   cuatro últimas van de dos en dos (seis pistas; cada familia ocupa dos y esas cuatro, tres). */
@container (min-width: 612px) and (max-width: 819.98px) {
  .familias-catalogo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .familias-catalogo > li { grid-column: span 2; }
  .familias-catalogo > li:first-child:nth-last-child(3n + 4) ~ li:nth-last-child(-n + 4),
  .familias-catalogo > li:first-child:nth-last-child(4) { grid-column: span 3; }
}
.familias-catalogo a { font: 650 16px/22px var(--font-sans); color: var(--tinta); }
.familias-catalogo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.familias-catalogo span:last-child { font: 650 15px/22px var(--font-sans); color: var(--familia-tinta); font-variant-numeric: tabular-nums; }

/* ---- Índice: las familias, cada una con su color, y sus conceptos ---------------------------------- */
.familia { display: grid; gap: var(--espacio-5); padding-block: var(--espacio-8); border-top: var(--grosor-linea) solid var(--linea); }
.familia__cabecera { display: grid; justify-items: start; gap: var(--espacio-2); }
.familia__sello { display: flex; align-items: center; gap: var(--espacio-4); }
.familia__sello .titular-3 { margin: 0; }
.familia__total { display: grid; gap: var(--espacio-1); margin-top: var(--espacio-2); font: 860 clamp(32px, 3.4vw, 42px)/1.04 var(--font-sans); letter-spacing: -0.03em; color: var(--familia-tinta); font-variant-numeric: tabular-nums; }
.familia__total small { font: var(--tipo-dato); letter-spacing: normal; color: var(--tinta-suave); }
.familia__total--depende small { font: 650 19px/26px var(--font-sans); letter-spacing: -0.01em; color: var(--familia-tinta); }
.familia__texto { max-width: var(--ancho-lectura); color: var(--tinta); text-wrap: pretty; }
/* Con dos pistas, cada familia es una fila de la rejilla de la página: su nombre y su total en el rail, que acompañan
   pegados mientras se lee la lista; los conceptos, en la lectura. */
@media screen and (min-width: 60em) {
  .familia { grid-template-columns: var(--pistas); column-gap: var(--canal); align-items: start; padding-block: var(--espacio-8); }
  .familia__cabecera { position: sticky; top: var(--espacio-6); padding-right: var(--espacio-4); }
  .familia > :not(.familia__cabecera) { grid-column: lectura; }
}

/* La lista de una familia: el filete de arriba y el guion de cada concepto, del color de la familia. */
.conceptos { display: grid; margin: 0; padding: 0; list-style: none; border-top: 4px solid var(--familia); }
.conceptos__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-1) var(--espacio-6); align-items: start; padding-block: var(--espacio-4); border-bottom: var(--grosor-linea) solid var(--linea); }
.conceptos__texto { position: relative; display: grid; gap: var(--espacio-1); padding-left: var(--espacio-6); }
.conceptos__texto::before { content: ""; position: absolute; top: 12px; left: 0; width: 14px; height: 3px; background: var(--familia); }
.conceptos__nombre { justify-self: start; font: 650 19px/26px var(--font-sans); letter-spacing: -0.01em; }
.conceptos__linea { font: 450 16px/24px var(--font-sans); color: var(--tinta); text-wrap: pretty; }
.conceptos__cifra { display: grid; justify-items: end; gap: 2px; padding-top: 4px; text-align: right; }
.conceptos__importe { font: 760 16px/22px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.conceptos__depende, .conceptos__nota { font: var(--tipo-dato); color: var(--tinta-suave); }
.conceptos__nota { max-width: 16ch; }
@media (max-width: 30em) {
  .conceptos__fila { grid-template-columns: minmax(0, 1fr); }
  .conceptos__cifra { justify-items: start; padding-top: 0; padding-left: var(--espacio-6); text-align: left; }
  .conceptos__nota { max-width: none; }
}

/* Los grupos de color (marca final; .grupo-color, en ritmo.css): las nueve familias en sus cuatro grupos de lib/familias.ts
   (trabajo; consumo y energía; vivienda y vehículos; ahorro, herencias, tasas y lo demás), cada grupo con su rótulo y su
   color UNA vez. Dentro, las familias se separan con el filete de siempre y su
   lista va sin la raya de color (el color ya lo ha dicho el rótulo); el guion y el total siguen en su tinta. */
#conceptos .grupo-color { margin-top: var(--espacio-12); }
#conceptos .grupo-color:first-of-type { margin-top: 0; }
.grupo-color > .familia:nth-child(2) { border-top: 0; padding-top: var(--espacio-5); }
.grupo-color .conceptos { border-top: var(--grosor-control) solid var(--linea); }

/* Las sanciones van aparte: mismo listado, con el borde rayado del manual. */
.familia--aparte { border-top-style: dashed; border-top-color: var(--tinta-suave); }
.familia--aparte .conceptos { border-top: var(--grosor-control) dashed var(--tinta-suave); }

/* ==== 4. El catálogo ============================================================================ */

/* ---- Catálogo: filtros --------------------------------------------------------------------- */
.catalogo-filtros { display: grid; gap: var(--espacio-4); 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); }
.catalogo-filtros__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-4) var(--espacio-3); }
@media (min-width: 50em) { .catalogo-filtros__campos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio-4); } }
.catalogo-filtros label { display: grid; align-content: start; gap: var(--espacio-1); min-width: 0; font: 650 15px/22px var(--font-sans); }
.catalogo-filtros input, .catalogo-filtros select { width: 100%; min-height: var(--alto-control); padding: 0 var(--espacio-3); border: var(--grosor-control) solid var(--linea-control); border-radius: var(--radio-m); background: var(--superficie); color: var(--tinta); font: 450 16px/24px var(--font-sans); }
.catalogo-filtros input:hover, .catalogo-filtros select:hover { border-color: var(--tinta); }
.catalogo-filtros__buscar { position: relative; grid-column: 1 / -1; }
/* El buscador, como el campo de búsqueda de la lámina (componentes.css): redondo, con sombra y la lupa delante. */
.catalogo-filtros input[type="search"] { padding-left: calc(var(--espacio-4) + 20px + var(--espacio-3)); border-radius: var(--radio-pastilla); box-shadow: var(--sombra-tarjeta); }
.catalogo-filtros__buscar::after { content: ""; position: absolute; left: var(--espacio-4); bottom: 14px; width: 20px; height: 20px; background: var(--tinta-suave); -webkit-mask: var(--lupa) center / contain no-repeat; mask: var(--lupa) center / contain no-repeat; pointer-events: none; }
/* Los desplegables, con la flecha de la marca (la de la portada, las calculadoras y /datos/): eran los nativos del sistema. */
.catalogo-filtros__select { position: relative; display: block; min-width: 0; }
.catalogo-filtros__select select { padding-right: var(--espacio-10); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.catalogo-filtros__select::after { content: ""; position: absolute; top: 50%; right: var(--espacio-4); width: 9px; height: 9px; margin-top: -7px; border-right: var(--grosor-control) solid var(--tinta); border-bottom: var(--grosor-control) solid var(--tinta); transform: rotate(45deg); pointer-events: none; }
.catalogo-filtros__select select option { background: var(--superficie); color: var(--tinta); }
.catalogo-filtros__estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-2) var(--espacio-4); font: var(--tipo-dato); color: var(--tinta-suave); }

/* ---- Catálogo: familias plegables, ámbitos y figuras ------------------------------------------
   La sección del catálogo es un .bloque (sitio.css): titular en el rail, leyenda en la lectura y, de lado a lado, los
   filtros y la lista. Cada familia plegada se alinea con las mismas pistas: su nombre en el rail; su texto,
   sus cifras y el signo, en la lectura; y lo que se abre, también en la lectura. Ritmo editorial: cada familia abre con
   el filete grueso del color de su grupo (data-familia va en el <summary> y en el cuerpo, porque el del
   <details> es el id de la familia del catálogo, que lee cliente/catalogo.tsx); el signo es el del <Detalle>. */

.catalogo { display: grid; border-bottom: var(--grosor-linea) solid var(--linea); }
/* Las familias, en sus cuatro grupos de color (.grupo-color, ritmo.css): el color, una vez en el rótulo; cada familia, con
   el filete de siempre. Un grupo sin ninguna familia a la vista (por el buscador o los filtros) se esconde entero
   (cliente/catalogo.tsx). */
.catalogo-color { margin-top: var(--espacio-10); }
.catalogo-color:first-child { margin-top: 0; }
.catalogo-color[hidden] { display: none; }
.catalogo-familia { scroll-margin-top: var(--espacio-4); }
.catalogo-familia > summary { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: var(--espacio-2) var(--espacio-4); align-items: start; padding-block: var(--espacio-4) var(--espacio-5); border-top: var(--grosor-linea) solid var(--linea); cursor: pointer; list-style: none; }
.grupo-color__rotulo + .catalogo-familia > summary { border-top: 0; }
.catalogo-familia > summary::-webkit-details-marker { display: none; }
.catalogo-familia > summary::after { content: "+"; grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 32px; height: 32px; margin-top: 4px; border: var(--grosor-control) solid var(--tinta); border-radius: 50%; font: 450 22px/1 var(--font-sans); }
.catalogo-familia[open] > summary::after { content: "−"; background: var(--tinta); color: var(--papel); }
.catalogo-familia > summary:hover { background: var(--subrayador-suave); }
.catalogo-familia > summary > *, .catalogo-familia__resto > * { grid-column: 1; }
.catalogo-familia__nombre { display: flex; align-items: center; gap: var(--espacio-3); font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); }
.catalogo-familia__texto { max-width: var(--ancho-lectura); font: 450 16px/24px var(--font-sans); color: var(--tinta); text-wrap: pretty; }
.catalogo-familia__cuenta { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-4); font: var(--tipo-dato); font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.catalogo-familia__cuenta > :first-child { font-weight: 760; color: var(--familia-tinta); }
.catalogo-familia__cuerpo { display: grid; gap: var(--espacio-6); padding-block: var(--espacio-2) var(--espacio-8); }
.catalogo-ambito { display: grid; gap: var(--espacio-2); }
.catalogo-ambito__titulo { display: flex; align-items: baseline; gap: var(--espacio-3); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--familia-tinta); }
.catalogo-familia__resto { display: contents; }
@media screen and (min-width: 60em) {
  .catalogo-familia > summary { grid-template-columns: var(--pistas); column-gap: var(--canal); align-items: center; padding-block: var(--espacio-5); }
  .catalogo-familia > summary::after { content: none; }
  .catalogo-familia__nombre { grid-column: rail; }
  .catalogo-familia > summary > .catalogo-familia__resto { grid-column: lectura; display: grid; grid-template-columns: minmax(0, 1fr) 190px 32px; column-gap: var(--espacio-6); align-items: center; }
  /* Texto, cifras y signo, cada uno en su columna (la regla general de arriba los mandaba a todos a la primera: las
     cifras caían debajo del texto y el «+» se quedaba a 150 px del borde derecho). */
  .catalogo-familia__resto > .catalogo-familia__cuenta { grid-column: 2; }
  .catalogo-familia__resto::after { content: "+"; grid-column: 3; display: grid; place-items: center; width: 32px; height: 32px; border: var(--grosor-control) solid var(--tinta); border-radius: 50%; font: 450 22px/1 var(--font-sans); }
  .catalogo-familia[open] .catalogo-familia__resto::after { content: "−"; background: var(--tinta); color: var(--papel); }
  .catalogo-familia__cuenta { display: grid; justify-items: end; text-align: right; }
  .catalogo-familia__cuerpo { padding-left: calc((100% - var(--canal)) * 5 / 14 + var(--canal)); }
}
/* «Lo que falta», dentro de su desplegable. */
.catalogo-pendientes { font: var(--tipo-cuerpo); }

/* Cada figura es una fila: el nombre (que lleva a su ficha) y cómo llega; a la derecha, lo que recauda y la marca. */
.figuras { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--grosor-linea) solid var(--tinta); }
.figura { display: grid; gap: var(--espacio-1); padding-block: var(--espacio-2) var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); }
.figura__principal { display: grid; justify-items: start; }
.figura__nombre { display: inline-flex; align-items: center; min-height: 40px; font: 650 17px/24px var(--font-sans); letter-spacing: -0.005em; }
.figura__llega { font: var(--tipo-nota); color: var(--tinta-suave); }
.figura__datos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-4); }
.figura__cifra { font: var(--tipo-dato); font-variant-numeric: tabular-nums; }
.figura__cifra--sin { color: var(--tinta-suave); }
@media (min-width: 46em) {
  .figura { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--espacio-6); align-items: center; }
  .figura__datos { display: grid; grid-template-columns: 170px 156px; }
  .figura__cifra { text-align: right; }
}

/* La marca que dice si la figura entra en la calculadora. La forma del borde distingue los tres casos, no el color. */
.marca { display: inline-flex; align-items: center; gap: var(--espacio-2); width: fit-content; min-height: 24px; padding: 2px var(--espacio-2); border: var(--grosor-linea) solid var(--tinta); border-radius: var(--radio-s); font: 760 12px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.marca--si { background: var(--inverso); color: var(--sobre-inverso); border-color: var(--inverso); }
.marca--aparte { border-style: dashed; }
.marca--no { border-color: var(--tinta-suave); color: var(--tinta-suave); }
/* Leyenda de las tres marcas, al principio del catálogo. */
.marcas-leyenda { display: grid; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; max-width: var(--ancho-lectura); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.marcas-leyenda li { display: grid; grid-template-columns: minmax(170px, auto) minmax(0, 1fr); gap: var(--espacio-3); align-items: baseline; }
@media (max-width: 30em) { .marcas-leyenda li { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-1); } }

@media print {
  .catalogo-filtros { display: none; }
  /* El chip de la familia va relleno en pantalla; en el papel, sin fondo, con su texto en la tinta de la familia. */
  .ficha-cabecera .ficha-etiquetas__familia { background: none; color: var(--familia-tinta); }
  .plegables { display: block; }
  .catalogo-familia > summary::after { content: none; }
}

/* Los avisos con más de un párrafo. */
.aviso > div > * + * { margin-top: var(--espacio-2); }

/* Zona táctil de los enlaces de «De un vistazo»: más alta que el texto, sin mover nada. */
.vistazo a { position: relative; }
.vistazo a::after { content: ""; position: absolute; inset: calc(-1 * var(--espacio-2)) 0; }


/* El mapa de una ficha, en la rampa del color de su familia (de cerca del papel a su tinta), en vez de la de tinta: es
   la gráfica de la ficha (ritmo editorial). La provincia destacada sigue en amarillo. */
.ficha :is(.mapa, .mapa-leyenda) {
  --mapa-paso-1: color-mix(in srgb, var(--familia) 22%, var(--papel));
  --mapa-paso-2: color-mix(in srgb, var(--familia) 45%, var(--papel));
  --mapa-paso-3: color-mix(in srgb, var(--familia) 75%, var(--papel));
  --mapa-paso-4: var(--familia);
  --mapa-paso-5: var(--familia-tinta);
}

/* ---- Tablas apiladas en el móvil (TablaFicha.astro, ronda 23) ----
   Cada fila, una ficha: su nombre arriba y cada dato con el rótulo de su columna. La cabecera queda para los lectores de
   pantalla (role="table" mantiene la tabla aunque cambie cómo se pinta). */
.tabla-ficha__rotulo { display: none; }
@media (max-width: 40em) {
  .tabla-ficha--apilable .tabla-marco { overflow-x: visible; }
  .tabla-ficha--apilable table { display: block; min-width: 0; }
  .tabla-ficha--apilable caption { display: block; }
  .tabla-ficha--apilable thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-ficha--apilable tbody { display: block; border-top: var(--grosor-control) solid var(--tinta); }
  .tabla-ficha--apilable tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-2); padding: var(--espacio-4) 0; border-bottom: var(--grosor-linea) solid var(--linea); }
  .tabla-ficha--apilable .tabla-marco .tabla-datos :is(th, td) { display: block; position: static; min-width: 0; padding: 0; border: 0; background: none; text-align: left; white-space: normal; }
  .tabla-ficha--apilable .tabla-marco .tabla-datos th[scope="row"] { font: 760 17px/24px var(--font-sans); }
  .tabla-ficha--apilable .tabla-ficha__rotulo { display: block; margin-bottom: 2px; font: var(--tipo-nota); color: var(--tinta-suave); }
}

/* ---- Quién no paga o paga menos: con más de cuatro casos, tres a la vista y el resto plegado (Exenciones.astro) ---- */
.ficha-exenciones .detalle { margin-top: var(--espacio-3); }

/* ---- En 30 segundos en el móvil: el ticket a lo ancho y las demás cifras debajo, de dos en dos si caben. Flexible, con
   bases en em: con la letra ampliada, cada cifra pasa a su propia fila. Cada cifra baja su cuerpo lo justo para caber
   (--vistazo-em, arriba). ---- */
@media (max-width: 39.99em) {
  .vistazo__cifras:has(> :nth-child(3)) { display: flex; flex-wrap: wrap; gap: var(--espacio-5) var(--espacio-4); }
  .vistazo__cifras:has(> :nth-child(3)) > * { flex: 1 1 9em; }
  .vistazo__cifras:has(> :nth-child(3)) > :first-child { flex-basis: 100%; }
  .vistazo__cifras:has(> :nth-child(3)) > :not(:first-child) .vistazo__etiqueta, .vistazo__cifras:has(> :nth-child(3)) > :not(:first-child) .vistazo__unidad { font-size: 15px; line-height: 20px; }
}