/* todoloquepagas — la portada: la calculadora, su resultado y las piezas para compartir.
   Se carga con <Base estilos={['calculadora']}>, después de tokens.css, componentes.css y sitio.css.
   Aquí solo está lo que el manual no trae: la disposición de la pantalla y los controles que faltan
   (casilla, deslizador, desplegable nativo, autocompletado). Los componentes del manual se usan con
   sus clases, tal cual. Regla: ningún color literal; todo sale de las variables de tokens.css. */

/* ---- La página ------------------------------------------------------------ */
.portada-cabecera { padding-block: var(--espacio-8) var(--espacio-6); }
.portada-cabecera .titular-1 { max-width: 20em; }
/* «¿Eres empresa?»: una línea bajo el titular con las dos calculadoras de empresas. */
.portada-empresa { margin: var(--espacio-4) 0 0; font: var(--tipo-cuerpo); color: var(--tinta-suave); }
.portada-empresa strong { color: var(--tinta); font-weight: 650; }
/* «en una sola cifra» va entera en una línea… salvo en una ventana de menos de 340 px (un móvil plegado: 280), donde no
   cabe y desbordaba la página 10 px: ahí se parte, y el subrayado sigue a cada trozo (box-decoration-break). */
@media (max-width: 339.98px) { .portada-cabecera .titular-1 .sin-partir { white-space: normal; } }
@media (min-width: 50em) { .portada-cabecera { padding-block: var(--espacio-12) var(--espacio-8); } }
/* Mientras llega el JavaScript, #calculadora lleva ya la entradilla, el aviso y la primera pregunta (index.astro):
   se le reserva la altura de la primera pantalla para que el resto de la página no salte al montarse la calculadora. */
#calculadora:empty, .calc-espera-js { min-height: 70vh; }
.calc-espera-js { align-content: start; }
.calc-espera-js noscript .aviso { margin: 0 0 var(--espacio-6); }
/* La calculadora no ha llegado (resources/js/_espera.js): el aviso y «Reintentar», encima de la primera pregunta. */
.calc-espera__fallo { display: grid; justify-items: start; gap: var(--espacio-3); max-width: var(--ancho-lectura); margin: 0 0 var(--espacio-6); }
.calc-espera__fallo p { margin: 0; }
/* La barra fija del móvil no debe tapar lo que recibe el foco ni el destino de un ancla. */
@media (max-width: 59.99em) { html { scroll-padding-bottom: 96px; } }
html { scroll-padding-top: var(--espacio-4); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media screen { .solo-imprimir { display: none !important; } }
.calc-anonimo { display: none; }

/* ---- Primera pantalla: preguntas y contador -------------------------------- */
.calc { display: grid; min-width: 0; }
.calc > * { min-width: 0; }
.calc-inicio { display: grid; gap: var(--espacio-8); padding-bottom: var(--entre-secciones); }
@media (min-width: 60em) {
  /* El contador (el tique, fijo a la derecha) no baja de 340 px: a 1.024 px, con 300 y 64 de hueco, «Ahorro, herencias y
     tasas» y «Consumo y energía» se partían en dos y tres renglones. El hueco es el canal de la página. */
  .calc-inicio { grid-template-columns: minmax(0, var(--ancho-lectura)) minmax(340px, 1fr); gap: var(--canal); align-items: start; }
}

/* (Las columnas van con minmax(0, 1fr): con la columna automática, el ancho propio de un campo con sufijo ensancha la página a 320 px.) */
.calc-preguntas { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--ancho-lectura); min-width: 0; }
/* La entrada: qué hay que hacer y, antes de la primera pregunta, qué pasa con las respuestas y la casilla para decidirlo. */
.calc-entrada { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); max-width: 62ch; padding-bottom: var(--espacio-6); }
.calc-entrada p { margin: 0; }
.calc-entrada__que { font: var(--tipo-cuerpo); }
.calc-entrada__guardado { display: grid; justify-items: start; gap: var(--espacio-1); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
/* La casilla es una decisión de la persona: va en tinta, no en el gris del aviso. */
.calc-entrada__guardado .calc-casilla { color: var(--tinta); }
.calc-entrada__guardado [role="status"] { font-weight: 650; color: var(--tinta); }
.calc-pregunta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); min-width: 0; padding-block: var(--espacio-6); border-top: var(--grosor-linea) solid var(--linea); }
.calc-pregunta:first-child, .calc-entrada + .calc-pregunta { padding-top: 0; border-top: 0; }
/* minmax(0, 1fr), como en .calc-pregunta: la columna no se ensancha con lo que pida su contenido. WebKit (Safari) mide un
   <select> por su opción más larga aunque se le dé `width: 0`, y con la columna en `auto` un desplegable de nombres largos
   (los municipios navarros de la compra de vivienda) ensanchaba el campo hasta sus 420 px y desbordaba la página en el móvil. */
.calc-pregunta__extra { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); padding-top: var(--espacio-3); }
.calc-pregunta__n { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; margin-right: var(--espacio-3); border: var(--grosor-linea) solid var(--tinta-suave); border-radius: var(--radio-s); font: var(--tipo-dato); color: var(--tinta-suave); vertical-align: 2px; }
.calc-pregunta > .tlqp-campo__etiqueta, .calc-pregunta > .tlqp-campo__ayuda { margin: 0; }
.calc-opciones { row-gap: var(--espacio-2); }
.calc-opciones > legend { width: 100%; }
.calc-supuesto { margin: 0; max-width: 62ch; font: var(--tipo-dato); line-height: 20px; color: var(--tinta-suave); }
.calc-ingresos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); max-width: 420px; }
.calc-privacidad { display: grid; gap: var(--espacio-1); justify-items: start; padding-top: var(--espacio-6); border-top: var(--grosor-linea) solid var(--linea); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.calc-privacidad p { max-width: 60ch; margin: 0; }

/* ---- Los dos recorridos (rápido y completo) -------------------------------- */
/* Elegir recorrido: dos opciones del manual con su título, su medida y una línea de lo que trae, una al lado de la otra si caben. */
.calc-recorrido__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--espacio-3); }
.calc-recorrido__opciones > legend { grid-column: 1 / -1; }
.calc-recorrido__opcion { display: flex; }
.calc-recorrido__opcion span { display: grid; gap: 2px; align-content: start; width: 100%; padding: var(--espacio-3) var(--espacio-10) var(--espacio-3) var(--espacio-4); }
.calc-recorrido__opcion strong { font: 860 18px/24px var(--font-sans); }
.calc-recorrido__opcion em { font: var(--tipo-dato); font-style: normal; }
.calc-recorrido__opcion small { font: 450 14px/20px var(--font-sans); text-wrap: pretty; }
/* La marca de elegida va en la esquina: no mueve el texto al elegir. */
.calc-recorrido__opcion input:checked + span::before { position: absolute; top: var(--espacio-4); right: var(--espacio-4); margin: 0; }
.calc-progreso { display: grid; gap: var(--espacio-2); }
.calc-progreso__texto { margin: 0; max-width: 62ch; font: var(--tipo-cuerpo-pequeno); }
.calc-progreso__texto strong { font-weight: 860; }
.calc-progreso__pista { height: 10px; border: var(--grosor-linea) solid var(--linea-control); background: var(--superficie); }
.calc-progreso__barra { display: block; height: 100%; background: var(--tinta); }
@media (prefers-reduced-motion: no-preference) { .calc-progreso__barra { transition: width 120ms ease-out; } }
/* Lo que afina cada pregunta en el recorrido completo: debajo de ella, con un filete a la izquierda. */
.calc-mas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-5); min-width: 0; margin-top: var(--espacio-3); padding-left: var(--espacio-4); border-left: var(--grosor-control) solid var(--linea-control); }
.calc-mas__titulo { margin: 0; font: 650 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
.calc-mas > *, .calc-lista > *, .calc-elemento > * { min-width: 0; }
.calc-importe, .calc-habitos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); min-width: 0; }
.calc-importe .tlqp-campo__etiqueta, .calc-importe .tlqp-campo__ayuda, .calc-habitos .tlqp-campo__etiqueta, .calc-habitos .tlqp-campo__ayuda { margin: 0; }
/* Las listas que crecen (otras viviendas, otros coches): cada elemento, un grupo con su leyenda y su «Quitar». */
.calc-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-4); justify-items: start; }
.calc-lista > .tlqp-opciones, .calc-lista > .calc-supuesto, .calc-lista > .calc-elemento { justify-self: stretch; }
.calc-elemento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-4); justify-items: start; min-width: 0; margin: 0; padding: var(--espacio-4); border: var(--grosor-linea) solid var(--linea-control); border-radius: var(--radio-m); }
.calc-elemento > legend { padding: 0 var(--espacio-2); font: 650 17px/24px var(--font-sans); }
.calc-elemento > .tlqp-opciones, .calc-elemento > .calc-rejilla-campos, .calc-elemento > .calc-catalogo, .calc-elemento > .calc-tecnicos, .calc-elemento > .calc-supuesto { justify-self: stretch; }
.calc-tecnicos > summary { display: inline-flex; align-items: center; min-height: var(--alto-control); font: 650 15px/20px var(--font-sans); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.calc-tecnicos > summary:hover { background: var(--subrayador); color: var(--sobre-subrayador); text-decoration: none; }
.calc-tecnicos[open] > summary { margin-bottom: var(--espacio-3); }
/* Al final del recorrido: pasar al completo (o volver al rápido). */
.calc-al-completo, .calc-al-rapido { justify-items: start; }
.calc-al-completo p, .calc-al-rapido p { max-width: 62ch; margin: 0; font: var(--tipo-cuerpo); }
.calc-al-completo { padding-inline: var(--espacio-4); border-left: var(--grosor-control) solid var(--tinta); background: var(--superficie-hundida); }
/* En «Afina tu resultado» (dentro del resultado): lo estimado por defecto, pregunta a pregunta, con un enlace a cada una. */
.calc-estimado { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); justify-items: start; }
.calc-estimado__frase { max-width: 62ch; margin: 0; font: var(--tipo-cuerpo); }
.calc-estimado__frase strong { font-weight: 860; }
.calc-estimado__grupo { display: grid; gap: var(--espacio-1); }
.calc-estimado__titulo { margin: 0; font: 650 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
.calc-estimado__lista { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-5); margin: 0; padding: 0; list-style: none; }
.calc-estimado__lista a { display: inline-flex; align-items: center; min-height: var(--alto-control); font: 650 15px/20px var(--font-sans); }

/* Desplegable nativo dentro de la caja del componente «Campo». */
.calc-select { position: relative; }
.calc-select select { width: 100%; padding-right: var(--espacio-12); border-radius: var(--radio-m); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.calc-select select:disabled { cursor: not-allowed; color: var(--tinta-suave); }
.calc-select::after { content: ""; position: absolute; top: 50%; right: var(--espacio-5); width: 9px; height: 9px; margin-top: -8px; border-right: var(--grosor-control) solid var(--tinta); border-bottom: var(--grosor-control) solid var(--tinta); transform: rotate(45deg); pointer-events: none; }
.calc-select select option, .calc-select select optgroup { background: var(--superficie); color: var(--tinta); }

/* Casilla: la opción marcada, en amarillo y con su marca, como las «Opciones» del manual. */
.calc-casilla { display: inline-flex; align-items: center; gap: var(--espacio-3); min-height: var(--alto-control); font: 650 16px/20px var(--font-sans); cursor: pointer; }
.calc-casilla input { flex: none; display: grid; place-content: center; width: 26px; height: 26px; margin: 0; border: var(--grosor-control) solid var(--linea-control); border-radius: var(--radio-s); background: var(--superficie); appearance: none; -webkit-appearance: none; cursor: pointer; }
.calc-casilla:hover input { border-color: var(--tinta); }
.calc-casilla input:checked { border-color: var(--sobre-subrayador); background: var(--subrayador); }
.calc-casilla input:checked::before { content: ""; width: 12px; height: 7px; margin-top: -3px; border-left: 3px solid var(--sobre-subrayador); border-bottom: 3px solid var(--sobre-subrayador); transform: rotate(-45deg); }

/* Deslizador. */
.calc-deslizador { display: grid; max-width: 420px; }
.calc-deslizador input { width: 100%; height: var(--alto-control); margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.calc-deslizador input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--linea-control); }
.calc-deslizador input::-moz-range-track { height: 6px; border-radius: 3px; background: var(--linea-control); }
.calc-deslizador input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; border: 3px solid var(--papel); border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 var(--grosor-control) var(--tinta); appearance: none; -webkit-appearance: none; }
.calc-deslizador input::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--papel); border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 var(--grosor-control) var(--tinta); }
.calc-deslizador input:focus-visible { outline: var(--grosor-foco) solid var(--foco); outline-offset: 2px; border-radius: var(--radio-s); }
/* Sin margen negativo: el anillo de foco del deslizador no tacha los extremos. */
.calc-deslizador__extremos { display: flex; justify-content: space-between; margin: 0; font: var(--tipo-dato); color: var(--tinta-suave); }

/* Autocompletado: la lista va en el flujo, debajo del campo, para que nada la tape. */
.calc-auto__lista { max-width: 420px; margin: 0; padding: var(--espacio-1) 0; border: var(--grosor-control) solid var(--tinta); border-radius: var(--radio-m); background: var(--superficie); list-style: none; }
.calc-auto__lista li { display: flex; align-items: center; min-height: var(--alto-control); padding: var(--espacio-2) var(--espacio-4); cursor: pointer; }
.calc-auto__lista li:hover, .calc-auto__lista li.es-activa { background: var(--subrayador-suave); }

/* El contador, fijo a la derecha en pantallas anchas. En el móvil lo sustituye la barra de abajo. */
.calc-panel { display: none; }
@media (min-width: 60em) {
  .calc-panel { display: block; position: sticky; top: var(--espacio-6); }
}
/* La caja del contador ya no es una tarjeta: es el tique (ver «El tique»), con el botón y el aviso debajo, fuera del papel. */
.calc-panel__caja { display: grid; gap: var(--espacio-4); justify-items: stretch; }
.calc-panel .tlqp-boton { width: 100%; }
/* «Ver mi resultado» mientras faltan el año o la provincia: con el aspecto de botón desactivado del manual
   (sitio.css le devolvía el color del botón destacado, que en oscuro no se lee). Se puede pulsar: lleva al campo que falta. */
.tlqp a.tlqp-boton[aria-disabled="true"], .tlqp a.tlqp-boton[aria-disabled="true"]:hover { background: var(--superficie-hundida); color: var(--tinta-suave); border-color: var(--linea-control); cursor: pointer; }
.calc-panel__falta { margin: 0; font: var(--tipo-cuerpo-pequeno); font-weight: 650; }

.calc-barra { position: fixed; z-index: 20; right: env(safe-area-inset-right, 0px); bottom: 0; left: env(safe-area-inset-left, 0px); display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); padding: var(--espacio-2) var(--margen-lateral) calc(var(--espacio-2) + env(safe-area-inset-bottom, 0px)); border-top: var(--grosor-control) solid var(--tinta); background: var(--papel); }
.calc-barra--oculta { visibility: hidden; transform: translateY(100%); }
@media (prefers-reduced-motion: no-preference) { .calc-barra { transition: transform 120ms ease-out, visibility 120ms; } }
@media (min-width: 60em) { .calc-barra { display: none; } }
.calc-barra__cifra { display: grid; min-width: 0; }
/* El rótulo puede ocupar dos líneas (a 320 px, o con el espaciado de texto ampliado): no se recorta con puntos suspensivos. */
.calc-barra__rotulo { font: var(--tipo-nota); color: var(--tinta-suave); white-space: normal; }
.calc-barra__valor { font: 860 24px/28px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-barra .tlqp-boton { flex: none; width: auto; padding-inline: var(--espacio-4); white-space: nowrap; }

/* ---- El resultado ---------------------------------------------------------- */
.calc-resultado { display: grid; min-width: 0; }
.calc-seccion { display: grid; gap: var(--espacio-6); min-width: 0; padding-block: var(--espacio-10); border-top: var(--grosor-linea) solid var(--linea); scroll-margin-top: var(--espacio-2); }
/* Dos anchos y no más: el texto, al ancho de lectura; todo lo demás (barras, gráficas, tablas, listas), a 860 px. */
/* .calc-junto envuelve un titular y lo que va pegado a él (su gráfica, su primer bloque) para que al imprimir no se
   separen (ver «Impresión»). En pantalla no existe: sus hijos se colocan como hijos del apartado, y por eso las reglas
   de «los hijos del apartado» valen también para ellos. */
.calc-junto { display: contents; }
:is(.calc-seccion, .calc-junto) > * { min-width: 0; max-width: 860px; margin: 0; }
:is(.calc-seccion, .calc-junto) > p, :is(.calc-seccion, .calc-junto) > .aviso, :is(.calc-seccion, .calc-junto) > .tlqp-cifra, :is(.calc-seccion, .calc-junto) > .tlqp-nota, :is(.calc-seccion, .calc-junto) > .calc-detalle > p { max-width: var(--ancho-lectura); }
.calc-seccion:focus { outline: none; }
.calc-seccion:focus-visible { outline: none; }
@media (min-width: 50em) { .calc-seccion { padding-block: var(--espacio-16); gap: var(--espacio-8); } }
.calc-seccion__cabecera { display: grid; gap: var(--espacio-2); }
:is(.calc-seccion, .calc-junto) > .calc-seccion__cabecera { max-width: var(--ancho-lectura); }
@media (max-width: 640px) { .calc-seccion .titular-2 { font-size: 26px; line-height: 32px; } }
.calc-seccion .tlqp-subrayado--suave { font-weight: 860; }
.calc-texto { max-width: var(--ancho-lectura); font: var(--tipo-cuerpo); }
.calc-texto--grande { font: var(--tipo-entradilla); }
/* La fila «Quienes han hecho el cálculo…» llega del panel un momento después que el resultado. Tiene su sitio desde el
   principio y mide lo mismo con la mediana, mientras llega, sin grupo suficiente y sin respuesta: si apareciera al
   llegar, empujaría lo que hay debajo (y WebKit, que no ancla el desplazamiento, movería lo que se está leyendo).
   - En el móvil el rótulo y la cifra comparten renglón: la cifra ocupa siempre lo que la más larga («1.234.567 €»), para
     que el rótulo parta igual en todos los estados. (Por encima de 420 px el rótulo tiene su columna y no depende de ella.)
   - Las notas posibles van apiladas en la misma celda; solo se ve una, y la caja mide lo que la más alta.
   Nada se anima: el contenido cambia en su sitio. */
.calc-parecidos .tlqp-barras__valor { min-height: 18px; }
@media (max-width: 420px) { .calc-parecidos .tlqp-barras__valor { min-width: 11ch; } }
.calc-parecidos--vacia .tlqp-barras__nombre, .calc-parecidos--vacia .tlqp-barras__valor { color: var(--tinta-suave); }
.calc-parecidos--vacia .tlqp-barras__barra { display: none !important; }
.calc-parecidos-nota { display: grid; }
.calc-parecidos-nota__capa { grid-area: 1 / 1; min-width: 0; }
.calc-parecidos-nota__capa--oculta { visibility: hidden; }
.calc-espera .entradilla { max-width: 30em; color: var(--tinta-suave); }

/* a) La cifra, este año y el tique. En una columna: la cifra, este año, el tique y los mandos (conmutador, notas,
   avisos). Desde 64em, en dos: la cifra, este año y los mandos a la izquierda, y el tique a la derecha, a lo alto de
   todo. La cifra se mide con su columna (unidades cqi): con el tique al lado, a 1.024 px, no cabría a 96 px. */
.calc-cifra { gap: var(--espacio-6); border-top: var(--grosor-control) solid var(--tinta); }
:is(.calc-seccion, .calc-junto) > .calc-cifra__rejilla { max-width: none; }
.calc-cifra__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-8); align-items: start; }
.calc-cifra__principal, .calc-cifra__mandos { display: grid; gap: var(--espacio-6); min-width: 0; max-width: var(--ancho-lectura); container-type: inline-size; }
.calc-cifra__principal > *, .calc-cifra__mandos > * { min-width: 0; margin: 0; }
.calc-cifra .tlqp-cifra { gap: var(--espacio-3); }
.calc-cifra .tlqp-cifra__valor { font-size: min(clamp(56px, 13vw, 96px), 17.5cqi); }
.calc-cifra .tlqp-cifra__pie, .calc-recibes .tlqp-cifra__pie { max-width: 30em; }
.tlqp-cifra__valor.calc-cifra--larga { font-size: clamp(44px, 11.4vw, 96px); }
.calc-cifra .tlqp-cifra__valor.calc-cifra--larga { font-size: min(clamp(44px, 11.4vw, 96px), 14.6cqi); }
/* La línea de debajo del total: cuánto de él ingresa tu empresa por ti (por-ti.ts). En tinta: se lee, no es una nota. */
.calc-cifra__empresa { max-width: 62ch; font: var(--tipo-cuerpo-pequeno); color: var(--tinta); text-wrap: pretty; }
.calc-cifra__empresa strong { font-weight: 860; color: var(--grupo-trabajo-tinta); white-space: nowrap; }
@media (min-width: 64em) {
  /* La última fila se lleva lo que sobre de alto del tique: los mandos, «Lo que tu empresa ingresa por ti» y el botón de
     «Lo que recibes» van uno debajo de otro, junto al tique. */
  .calc-cifra__rejilla { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); grid-template-rows: auto auto auto 1fr; column-gap: var(--espacio-16); row-gap: var(--espacio-8); }
  .calc-cifra__principal { grid-column: 1; grid-row: 1; }
  .calc-cifra__mandos { grid-column: 1; grid-row: 2; }
  .calc-cifra__rejilla > .calc-porti { grid-column: 1; grid-row: 3; }
  .calc-cifra__rejilla > .calc-cifra__siguiente { grid-column: 1; grid-row: 4; }
  .calc-cifra__rejilla > .calc-tique { grid-column: 2; grid-row: 1 / span 4; }
}
/* Este año, junto a la cifra de toda la vida: una frase con su cifra y una nota que dice qué es. */
.calc-esteanio { display: grid; gap: var(--espacio-2); padding-top: var(--espacio-5); border-top: 2px dashed var(--linea-control); }
.calc-esteanio p { margin: 0; }
.calc-esteanio__frase { font: var(--tipo-entradilla); max-width: 30em; text-wrap: pretty; }
.calc-esteanio__frase strong { font-weight: 860; white-space: nowrap; }
.calc-esteanio__nota { max-width: 62ch; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
/* «De ellos, tu empresa ingresa por ti…»: en tinta, con la cifra en el azul de «Trabajo» (por-ti.ts). */
.calc-esteanio__porti { max-width: 62ch; font: var(--tipo-cuerpo-pequeno); color: var(--tinta); text-wrap: pretty; }
.calc-esteanio__porti strong { font-weight: 860; color: var(--grupo-trabajo-tinta); white-space: nowrap; }

/* «Lo que tu empresa ingresa por ti» (PorTi.tsx): un filete arriba del azul de «Trabajo», el titular, y por cada periodo
   su frase con la cifra destacada en la tinta de la familia (el subrayado grande es el de la cifra de la vida), la barra
   de lo que cuesta tu trabajo y su leyenda (`.coste`, en ritmo.css: la misma pieza que las fichas y las calculadoras). */
:is(.calc-seccion, .calc-junto) .calc-porti { max-width: var(--ancho-lectura); }
.calc-porti { display: grid; gap: var(--espacio-6); min-width: 0; padding-top: var(--espacio-5); border-top: 4px solid var(--familia); container-type: inline-size; }
.calc-porti > *, .calc-porti__periodo > *, .calc-porti__que-es > * { min-width: 0; margin: 0; }
.calc-porti__titulo { font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); color: var(--familia-tinta); text-wrap: balance; }
.calc-porti__periodo { display: grid; gap: var(--espacio-3); }
.calc-porti__periodo + .calc-porti__periodo { padding-top: var(--espacio-5); border-top: 2px dashed var(--linea-control); }
.calc-porti__rotulo { color: var(--tinta); }
.calc-porti__frase { font: var(--tipo-cuerpo); text-wrap: pretty; }
.calc-porti__cifra { font-weight: 860; font-size: 1.25em; line-height: 1; letter-spacing: -0.01em; color: var(--familia-tinta); white-space: nowrap; }
.calc-porti__nota { font: var(--tipo-cuerpo-pequeno); }
.calc-porti__que-es { display: grid; gap: var(--espacio-2); padding: var(--espacio-4) var(--espacio-5); border-radius: var(--radio-m); background: var(--familia-suave); font: var(--tipo-cuerpo-pequeno); color: var(--tinta); }
.calc-porti__incidencia { color: var(--tinta-suave); }
.calc-conmutador > legend { margin: 0; }

/* b) Afina tu resultado */
:is(.calc-seccion, .calc-junto) > .calc-afina-rejilla { max-width: none; }
.calc-afina-rejilla { display: grid; gap: var(--espacio-8); }
.calc-afina { display: grid; gap: var(--espacio-8); max-width: var(--ancho-lectura); min-width: 0; }
.calc-afina__panel { display: none; }
@media (min-width: 60em) {
  .calc-afina-rejilla { grid-template-columns: minmax(0, var(--ancho-lectura)) minmax(260px, 1fr); gap: var(--espacio-16); align-items: start; }
  .calc-afina__panel { display: grid; gap: var(--espacio-2); position: sticky; top: var(--espacio-6); padding: var(--espacio-6); border: var(--grosor-linea) solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); }
}
.calc-afina__cifra { margin: 0; font-size: clamp(36px, 3.6vw, 48px); white-space: nowrap; }
.calc-afina__anio { margin: 0; font-weight: 760; }
.calc-precision { display: grid; gap: var(--espacio-3); }
.calc-precision__frase { margin: 0; font: var(--tipo-entradilla); }
.calc-precision__frase strong { font-weight: 860; }
.calc-precision__pista { height: 14px; border: var(--grosor-linea) solid var(--linea-control); border-radius: var(--radio-0); background: var(--superficie); }
.calc-precision__barra { display: block; height: 100%; background: var(--tinta); }
@media (prefers-reduced-motion: no-preference) { .calc-precision__barra { transition: width 120ms ease-out; } }
.calc-apartado .tlqp-desplegable__cuerpo > * { min-width: 0; }
.calc-apartado .tlqp-desplegable__supuesto { line-height: 19px; }
.calc-rejilla-campos, .calc-catalogo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--espacio-6); align-items: start; }
/* ---- El buscador del catálogo de coches (elegir-coche.tsx): el campo, la lista de versiones encontradas y «Mi versión
   no está». Cada resultado es un botón a todo el ancho con la altura de un control táctil. Va en esta hoja, que cargan
   la portada y las calculadoras sueltas: en la de las sueltas, la portada pintaba la lista sin estilo (con viñetas). ---- */
.calc-buscador { display: grid; gap: var(--espacio-2); }
.calc-buscador input[type="search"] { -webkit-appearance: none; appearance: none; }
.calc-buscador__estado { margin: 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.calc-buscador__estado:empty { display: none; }
.calc-buscador__resultados { display: grid; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.calc-buscador__resultado { display: grid; gap: 2px; width: 100%; min-height: var(--alto-control); padding: var(--espacio-3) var(--espacio-4); border: var(--grosor-linea) solid var(--linea); border-radius: var(--radio-m); background: var(--papel); color: var(--tinta); font: var(--tipo-cuerpo); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.calc-buscador__resultado:hover, .calc-buscador__resultado:focus-visible { border-color: var(--tinta); background: var(--subrayador-suave); }
.calc-buscador__nombre { font-weight: 650; }
.calc-buscador__detalle { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.calc-buscador__o { margin: var(--espacio-2) 0 0; }
.calc-buscador__no-esta { margin: 0; }
.calc-a-mano { display: grid; gap: var(--espacio-4); padding: var(--espacio-4) var(--espacio-5); border-left: var(--grosor-control) solid var(--tinta); background: var(--superficie-hundida); }
.calc-a-mano > * { min-width: 0; margin: 0; }
.calc-a-mano__potencia { display: grid; gap: var(--espacio-2); align-content: start; }

.calc-dato-nuevo { max-width: 62ch; margin: 0; padding: var(--espacio-4) var(--espacio-5); border-left: var(--grosor-control) solid var(--tinta); background: var(--superficie-hundida); font: var(--tipo-cuerpo-pequeno); }
.calc-dato-nuevo strong { font-weight: 650; }
.calc-hijos { display: grid; gap: var(--espacio-4); justify-items: start; }
.calc-hijos__fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espacio-2) var(--espacio-4); width: 100%; }
.calc-hijos__fila .tlqp-campo { flex: 1 1 240px; }
/* Lo que ya se respondió en otra pregunta: el valor, como texto, y «Cambiar», que lleva a ella. */
.calc-ya-respondido { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--espacio-2); margin: 0; font: var(--tipo-cuerpo); }
.calc-ya-respondido strong { font-weight: 650; }
.calc-ya-respondido a { display: inline-flex; align-items: center; min-height: var(--alto-control); padding-inline: var(--espacio-1); font-weight: 650; }
.calc-convenciones { display: grid; gap: var(--espacio-2); margin: 0; padding-left: var(--espacio-5); font: var(--tipo-cuerpo-pequeno); }
.calc-convenciones strong { font-weight: 650; }

/* c) Por dónde lo pagas: tu año de hoy */
.calc-nomina { display: grid; gap: var(--espacio-4); margin-top: var(--espacio-4); padding-top: var(--espacio-8); border-top: var(--grosor-linea) solid var(--linea); }
.calc-nomina > * { margin: 0; }
.calc-nomina__pasos .es-suma dt, .calc-nomina__pasos .es-suma dd { font-weight: 650; }
.calc-nomina__pasos .es-resta dt { padding-left: var(--espacio-4); }
.calc-nomina__pasos > div:last-child { border-bottom: var(--grosor-control) solid var(--tinta); }

/* e) La línea de tu vida */
.calc-vida { width: 100%; }
.calc-vida__svg { max-width: 100%; }
/* Un halo del color del papel para que los rótulos se lean encima de las áreas y de las líneas. */
.calc-vida__svg text { paint-order: stroke; stroke: var(--papel); stroke-width: 3px; stroke-linejoin: round; }
.calc-vida__area { stroke: var(--papel); stroke-width: 0.75; stroke-linejoin: round; }
.calc-vida__velo { fill: var(--papel); opacity: 0.6; }
.grafica .calc-vida__base { stroke: var(--tinta-suave); }
.calc-vida__hoy { stroke: var(--tinta); stroke-width: 2; }
.calc-vida__jubilacion { stroke: var(--tinta-suave); stroke-width: 1; stroke-dasharray: 3 4; }
.calc-leyenda { display: grid; gap: var(--espacio-2); padding: 0; list-style: none; font: var(--tipo-cuerpo-pequeno); }
.calc-leyenda li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--espacio-3); }
.calc-leyenda i { align-self: center; display: block; width: 14px; height: 14px; }
.calc-leyenda .dato { white-space: nowrap; }
.calc-leyenda__linea { height: 3px !important; background: var(--tinta); }
.calc-leyenda__velo { border: var(--grosor-linea) solid var(--tinta-suave); background: color-mix(in srgb, var(--grupo-resto) 40%, var(--papel)); }
.calc-detalle > summary { display: inline-flex; align-items: center; min-height: var(--alto-control); font: var(--tipo-boton); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.calc-detalle > summary:hover { background: var(--subrayador); color: var(--sobre-subrayador); text-decoration: none; }
.calc-detalle[open] > summary { margin-bottom: var(--espacio-3); }
/* «Qué incluye y qué no», debajo del ticket del resultado: tres párrafos cortos en letra de nota. */
.calc-incluye > p { margin: 0; font: var(--tipo-cuerpo-pequeno); }
/* «Ver mi cifra en la web» (App\Web\MiCifra) */
.calc-mi-cifra { display: grid; justify-items: start; gap: var(--espacio-2); }
.calc-mi-cifra p { margin: 0; }
.calc-mi-cifra__nota { font: var(--tipo-nota); color: var(--tinta-suave); }
.calc-mi-cifra__texto { font: var(--tipo-cuerpo-pequeno); padding: var(--espacio-3) var(--espacio-4); border-left: 6px solid var(--subrayador); background: var(--subrayador-suave); }
.calc-mi-cifra .tlqp-boton--texto { padding-block: 0; }
.calc-incluye > p + p { margin-top: var(--espacio-3); }

/* f') «¿Y si tu próximo coche fuera eléctrico?» (SiElectrico.tsx): un bloque breve al final de las familias, con su raya
   arriba, como «Tu año de hoy»: la frase, «Cómo lo calculamos» plegado, lo que no cuenta y la nota. */
.calc-electrico { display: grid; gap: var(--espacio-4); margin-top: var(--espacio-4); padding-top: var(--espacio-8); border-top: var(--grosor-linea) solid var(--linea); }
.calc-electrico > * { margin: 0; }
.calc-electrico .calc-detalle > :is(p, dl) { margin: 0; }
.calc-electrico .calc-detalle > :is(p, dl) + :is(p, dl) { margin-top: var(--espacio-3); }
.calc-electrico__de-donde dd { white-space: nowrap; }
.calc-electrico__no-cuenta { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }

/* f) Las familias: una fila de barras del manual por familia, que se abre hasta cada concepto */
.calc-familias { display: grid; padding: 0; list-style: none; }
.calc-familias > li { border-top: var(--grosor-linea) solid var(--linea); }
.calc-familias > li:last-child { border-bottom: var(--grosor-linea) solid var(--linea); }
.calc-familias summary { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; column-gap: var(--espacio-3); min-height: 60px; padding-block: var(--espacio-3); list-style: none; cursor: pointer; }
.calc-familias summary::-webkit-details-marker { display: none; }
.calc-familias summary::after { content: "+"; font: 450 28px/1 var(--font-sans); text-align: center; }
.calc-familias details[open] > summary::after { content: "−"; }
.calc-familias summary:hover .tlqp-barras__nombre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.calc-familias .tlqp-barras__nombre { font-weight: 650; font-size: 17px; }
@media (min-width: 421px) { .calc-familias .tlqp-barras__fila { grid-template-columns: minmax(110px, 190px) minmax(40px, 1fr) minmax(150px, auto); } }
.calc-conceptos { display: grid; gap: var(--espacio-5); padding: var(--espacio-2) 0 var(--espacio-6); list-style: none; font: var(--tipo-cuerpo-pequeno); }
.calc-conceptos > li { display: grid; gap: var(--espacio-1); justify-items: start; padding-left: var(--espacio-4); border-left: var(--grosor-control) solid var(--linea); }
.calc-conceptos__linea { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--espacio-4); width: 100%; }
.calc-conceptos__nombre { font-weight: 650; font-size: 16px; }
.calc-conceptos a { display: inline-flex; align-items: center; min-height: var(--alto-control); }
.calc-conceptos strong { font-weight: 650; }

/* a') Lo que recibes (Recibes.tsx), justo después del ticket: la cifra («Para ti») con el mismo peso que la de arriba,
   sin subrayado (solo hay uno grande por pantalla); debajo y aparte, la segunda (la parte del resto del gasto público),
   más pequeña y tras una raya; el botón de compartir; las partidas en barras a la misma escala, en dos grupos, una
   debajo de otra; el aviso de que no es un saldo y la tabla de los tres niveles de ingresos. */
.calc-recibes .tlqp-cifra { gap: var(--espacio-3); }
.calc-recibes .tlqp-cifra__pie { max-width: 30em; }
:is(.calc-seccion, .calc-junto) > .calc-recibes__resto { max-width: var(--ancho-lectura); }
.calc-recibes__resto { display: grid; gap: var(--espacio-2); padding-top: var(--espacio-4); border-top: var(--grosor-linea) solid var(--linea); }
.calc-recibes__resto > * { min-width: 0; margin: 0; }
.calc-recibes__resto-cifra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--espacio-1) var(--espacio-4); font: 650 19px/26px var(--font-sans); text-wrap: balance; }
.calc-recibes__resto-valor { font: 860 30px/34px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-recibes__resto-que { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
.calc-recibes__compartir .tlqp-boton { gap: var(--espacio-2); }
:is(.calc-seccion, .calc-junto) > .calc-recibido { max-width: 860px; }
.calc-recibido { display: grid; gap: var(--espacio-10); }
.calc-recibido__grupo { display: grid; gap: var(--espacio-3); min-width: 0; }
.calc-recibido__grupo > * { min-width: 0; margin: 0; }
/* El nombre del grupo y su suma: la suma, siempre a la derecha y en el último renglón del nombre, aunque este se parta
   («Tu parte del resto del gasto público», en el móvil, dejaba la suma sola a la izquierda en otro renglón). */
.calc-recibido__titulo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 var(--espacio-4); padding-bottom: var(--espacio-2); border-bottom: var(--grosor-control) solid var(--tinta); font: 650 19px/26px var(--font-sans); text-wrap: balance; }
.calc-recibido__suma { font: 760 18px/26px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-recibido__que { max-width: var(--ancho-lectura); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
.calc-recibido__lista { gap: var(--espacio-4); padding-top: var(--espacio-1); }
/* El nombre con su línea de detalle debajo; la barra, centrada en los dos renglones. Más sitio para el nombre que en las
   otras barras: lleva una frase. */
.calc-recibido .tlqp-barras__fila { grid-template-columns: minmax(150px, 340px) minmax(40px, 1fr) minmax(92px, auto); }
@media (max-width: 420px) { .calc-recibido .tlqp-barras__fila { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.calc-recibido .tlqp-barras__nombre { display: grid; gap: 2px; min-width: 0; }
.calc-recibido__nombre { font-weight: 650; }
.calc-recibido__detalle { font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }
.calc-recibido__detalle .calc-privado { display: inline; }
.calc-recibido .tlqp-barras__valor { font-size: 14px; }
.calc-recibido__aparte { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-4); padding-top: var(--espacio-3); border-top: var(--grosor-linea) dashed var(--linea-control); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.calc-recibido__aparte strong { font-weight: 650; color: var(--tinta); }
.calc-recibido__aparte .dato { font: 500 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Con otros ingresos: tres filas (bajos, medios, altos, de menos a más), con la de la persona resaltada. */
:is(.calc-seccion, .calc-junto) > .calc-niveles { max-width: var(--ancho-lectura); }
.calc-niveles { display: grid; gap: var(--espacio-4); min-width: 0; }
.calc-niveles > * { min-width: 0; margin: 0; }
.calc-niveles__tabla th[scope="row"] { font-weight: 450; }
.calc-niveles__quien { display: block; font-weight: 650; }
.calc-niveles__tabla :is(th, td) small { display: block; font: var(--tipo-nota); color: var(--tinta-suave); }
.calc-niveles__tabla td small { white-space: nowrap; }
/* Qué es cada columna, debajo de su nombre: en dos renglones, para que la tabla quepa a 320 px sin desplazarse. */
.calc-niveles__tabla thead th { vertical-align: bottom; }
.calc-niveles__tabla thead th small { max-width: 8.5em; margin-left: auto; font-weight: 450; white-space: normal; text-wrap: balance; }
.calc-niveles__tabla td.num { vertical-align: top; }
/* «¿Y con las normas de otros años?» (OtrasNormas.tsx): al final de «Lo que recibes», con su raya arriba, como «¿Y si tu
   próximo coche fuera eléctrico?». Una fila por año: el año a la izquierda y su frase, lo que más la explica y la pensión
   aparte; «Cómo lo calculamos» plegado. A 390 px el año va encima. */
:is(.calc-seccion, .calc-junto) > .calc-otras-normas { max-width: var(--ancho-lectura); }
.calc-otras-normas { display: grid; gap: var(--espacio-4); min-width: 0; margin-top: var(--espacio-4); padding-top: var(--espacio-8); border-top: var(--grosor-linea) solid var(--linea); }
.calc-otras-normas > * { min-width: 0; margin: 0; }
.calc-otras-normas__anios { display: grid; gap: var(--espacio-5); margin: 0; padding: 0; list-style: none; }
.calc-otras-normas__anio { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--espacio-4); padding-top: var(--espacio-4); border-top: var(--grosor-linea) dashed var(--linea-control); }
.calc-otras-normas__marca { margin: 0; font: 860 24px/26px var(--font-sans); white-space: nowrap; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc-otras-normas__texto { display: grid; gap: var(--espacio-2); min-width: 0; }
.calc-otras-normas__texto > * { margin: 0; }
.calc-otras-normas__frase { font: 650 17px/24px var(--font-sans); text-wrap: pretty; }
.calc-otras-normas__explica { font: var(--tipo-cuerpo-pequeno); }
.calc-otras-normas__pension, .calc-otras-normas__neutral { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
.calc-otras-normas .calc-detalle > :is(p, div) { margin: 0; }
.calc-otras-normas .calc-detalle > :is(p, div) + :is(p, div) { margin-top: var(--espacio-3); }
.calc-otras-normas__tabla td.num { white-space: nowrap; }
.calc-otras-normas__tabla th[scope="row"] { font-weight: 450; }
.calc-otras-normas__grupo th { padding-top: var(--espacio-3); font-weight: 650; text-align: left; }
.calc-otras-normas__tabla .calc-otras-normas__total :is(th, td) { font-weight: 650; border-top: var(--grosor-linea) solid var(--tinta); }
.calc-otras-normas__fuentes { font: var(--tipo-nota); color: var(--tinta-suave); }
@media (max-width: 479px) {
  .calc-otras-normas__anio { grid-template-columns: minmax(0, 1fr); row-gap: var(--espacio-1); }
  /* Cuatro columnas de cifras (2026 y tres años, desde el 14-10-2026): en el móvil, más pequeñas y más juntas, para que
     quepan sin desplazar la tabla de lado con las cifras de una vida normal. */
  .calc-otras-normas__tabla { font-size: 13px; line-height: 18px; }
  .calc-otras-normas__tabla :is(th, td) { padding-right: 6px; padding-block: var(--espacio-2); }
  .calc-otras-normas__tabla :is(th, td):last-child { padding-right: 0; }
  .calc-otras-normas__tabla .num { font-size: 13px; line-height: 18px; letter-spacing: -0.01em; }
  .calc-otras-normas__tabla th[scope="row"] { min-width: 0; hyphens: auto; }
}
/* El botón del ticket que lleva aquí: con su flecha (trazo de 2 px, extremos redondeados, como pide el manual). */
.calc-cifra__siguiente { padding-top: var(--espacio-2); }
.calc-cifra__siguiente .tlqp-boton { gap: var(--espacio-2); }
.calc-cifra__flecha { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* i) Provincias */
.calc-provincias { display: grid; gap: var(--espacio-6); }
.calc-provincias > * { min-width: 0; margin: 0; }
.calc-mapa { margin: 0; }
.calc-mapa .mapa { max-width: 540px; }
.calc-mapa__tu { background: var(--subrayador); box-shadow: inset 0 0 0 2px var(--sobre-subrayador); }
/* El círculo que señala una provincia demasiado pequeña para verse (Ceuta, Melilla): el mismo amarillo, traslúcido, con borde de tinta. */
.mapa .calc-mapa__anillo { fill-opacity: 0.55; stroke: var(--tinta); vector-effect: non-scaling-stroke; }

/* ---- El ticket (Tique.tsx) ------------------------------------------------------
   El de componentes.css (la caja con su trazo y las ondas del logo arriba y abajo, que pinta cliente/_marca/ondas.ts),
   más ancho, con la sombra que sigue las ondas (drop-shadow, del color fijo de la tinta: en oscuro no se ve). */
/* El tique: en componentes.css, porque también lo llevan las páginas con «Ver mi cifra en la web». */

/* k) Compartir */
:is(.calc-seccion, .calc-junto) > .calc-compartir { max-width: 860px; }
.calc-compartir { display: grid; gap: var(--espacio-8); }
.calc-compartir > * { min-width: 0; }
@media (min-width: 50em) {
  .calc-compartir { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--espacio-12); align-items: start; }
  /* La vista previa se queda a la vista mientras se eligen las opciones de al lado: cambia al momento. */
  .calc-compartir__previa { position: sticky; top: var(--espacio-6); }
}
.calc-compartir__previa { width: 100%; max-width: 340px; }
.calc-compartir__previa--historia { max-width: 250px; }
.calc-compartir__previa--cuadrada { max-width: 320px; }
.calc-compartir__previa canvas { display: block; width: 100%; height: auto; border: var(--grosor-linea) solid var(--linea-control); }
.calc-compartir__mandos { display: grid; gap: var(--espacio-8); }
.calc-compartir__opciones { display: grid; gap: var(--espacio-6); }
.calc-compartir__otros { display: grid; gap: var(--espacio-6); padding-top: var(--espacio-6); border-top: var(--grosor-linea) solid var(--linea); }
.calc-compartir__otros > div { display: grid; gap: var(--espacio-2); justify-items: start; }
.calc-compartir__grupo { display: grid; gap: var(--espacio-2); }
/* Una pieza que no se puede hacer con lo elegido (este año sin importes): apagada, y la ayuda de debajo dice por qué. */
.calc-opcion--apagada span { opacity: 0.45; border-style: dashed; }
.calc-opcion--apagada input { cursor: not-allowed; }
/* «Qué se ve»: las casillas de lo que lleva la pieza, cada una con su ayuda. */
.calc-compartir__contenido { display: grid; gap: var(--espacio-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.calc-compartir__contenido > legend { padding: 0; margin-bottom: var(--espacio-3); font: 650 17px/24px var(--font-sans); }
.calc-compartir__lineas { display: grid; justify-items: start; gap: var(--espacio-1); }
.calc-compartir__rotulo { margin: 0; font: 650 17px/24px var(--font-sans); }
.calc-compartir__texto { display: grid; gap: var(--espacio-2); justify-items: start; }
.calc-compartir__cita { margin: 0; padding: var(--espacio-3) var(--espacio-4); border-left: 4px solid var(--subrayador); background: var(--superficie); font: var(--tipo-cuerpo-pequeno); overflow-wrap: anywhere; }
.calc-botones { display: grid; gap: var(--espacio-2); }
.calc-botones__fila { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
/* En el móvil, los tres en una fila, iguales: sin esto «Compartir» se queda solo en una segunda línea, cinco veces en la página. */
@media (max-width: 30em) {
  .calc-botones__fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc-botones__fila .tlqp-boton { width: 100%; min-width: 0; padding-inline: var(--espacio-1); font-size: 14px; line-height: 18px; white-space: normal; text-align: center; }
}
.calc-estado { min-height: 22px; margin: 0; font: var(--tipo-cuerpo-pequeno); font-weight: 650; }

/* l) «Invítanos a un café», al final del resultado (solo si está encendido: si no, no hay nada que colocar).
   La hoja del bloque es apoyo.css; aquí, solo su sitio: alineado con el texto y separado de lo que sigue. */
.calc-resultado > .apoyo { margin-bottom: var(--entre-secciones); }

/* ---- El contenido estático de debajo ---------------------------------------- */
.portada-pasos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-6) var(--espacio-8); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
/* Los tres pasos, en una fila en cuanto caben (con columnas de 240 px quedaban dos y uno solo debajo de 784 px). */
@media (min-width: 40em) { .portada-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.portada-pasos li { display: grid; align-content: start; gap: var(--espacio-2); padding-top: var(--espacio-3); border-top: var(--grosor-control) solid var(--tinta); counter-increment: paso; }
.portada-pasos li::before { content: counter(paso); font: 860 44px/1 var(--font-sans); letter-spacing: -0.02em; }
.portada-pasos strong { font: 650 19px/24px var(--font-sans); }
.portada-pasos span { color: var(--tinta-suave); font: var(--tipo-cuerpo-pequeno); }
.portada-ejemplo { display: grid; gap: var(--espacio-8); }
.portada-ejemplo > * { min-width: 0; max-width: 860px; }
.portada-ejemplo > p { max-width: var(--ancho-lectura); }
.portada-ejemplo__grafica { display: grid; gap: var(--espacio-4); }
.portada-familias { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--espacio-5) var(--espacio-8); margin: 0; padding: 0; list-style: none; }
.portada-familias li { display: grid; align-content: start; gap: var(--espacio-1); padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
.portada-familias strong { font: 650 17px/24px var(--font-sans); }
.portada-familias span { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.portada-preguntas { max-width: var(--ancho-lectura); }
.portada-preguntas .tlqp-desplegable__cuerpo { gap: var(--espacio-3); max-width: 65ch; }
/* Ritmo editorial: las familias con su color, siempre con su nombre al lado (docs/marca/5-ritmo-editorial.md).
   «Qué entra en el cálculo»: el nombre de cada familia en su tinta; las barras del ejemplo, del color de su familia; las
   calculadoras sueltas, con la muestra del color de su grupo. Sin iconos (marca final). */
/* Marca final: las familias en sus cuatro grupos de color (.grupo-color, ritmo.css), cada grupo con su rótulo y su color
   una vez; dentro, cada familia con su filete fino debajo. Con una sola
   familia, a lo ancho; con dos o más, de dos en dos si caben. */
.portada-grupos { display: grid; gap: var(--espacio-8); }
.portada-grupos .portada-familias { gap: 0 var(--espacio-8); }
.portada-familias li { display: block; padding-top: 0; border-top: 0; border-bottom: var(--grosor-linea) solid var(--linea); }
.portada-familia > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--espacio-3); min-height: 64px; padding-block: var(--espacio-2); cursor: pointer; list-style: none; }
.portada-familia > summary::-webkit-details-marker { display: none; }
.portada-familia > summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border: var(--grosor-control) solid var(--tinta); border-radius: 50%; font: 450 20px/1 var(--font-sans); }
.portada-familia[open] > summary::after { content: "−"; background: var(--tinta); color: var(--papel); }
.portada-familia > summary > strong { grid-column: 1; color: var(--familia-tinta); }
.portada-familia__n { grid-column: 1; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.portada-familia > summary:hover { background: var(--subrayador-suave); }
.portada-familia__conceptos { display: block; padding: 0 var(--espacio-10) var(--espacio-4) 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.portada-mas { margin-top: var(--espacio-2); }
.portada-mas > summary { display: inline-flex; align-items: center; min-height: var(--alto-control); font: var(--tipo-boton); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.portada-mas > summary:hover { background: var(--subrayador); color: var(--sobre-subrayador); text-decoration: none; }
.portada-mas[open] > summary { margin-bottom: var(--espacio-3); }
/* Los tres pasos, en el móvil, con el número a un lado: menos alto. */
@media (max-width: 39.99em) {
  .portada-pasos li { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--espacio-3); }
  .portada-pasos li::before { grid-row: 1 / span 2; font-size: 36px; }
  .portada-pasos li > * { grid-column: 2; }
}
.portada-calculadoras li { display: flex; align-items: baseline; gap: var(--espacio-2); }
/* Cada calculadora, con la muestra del color de la familia de lo que calcula (el nombre del impuesto va en el enlace). */
.portada-calculadoras li[data-familia]::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--familia); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ---- De un vistazo (ronda 23) ---------------------------------------------------
   El índice del resultado (pastillas que llevan a cada bloque) y lo plegado con su resumen (Pliegue, cliente/_calculadora/plegado.tsx: las clases de <Detalle> de ritmo.css). */
.calc-indice { display: grid; gap: var(--espacio-3); padding-block: var(--espacio-6) var(--espacio-2); }
.calc-indice__lista { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.calc-indice__enlace { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--espacio-4); border: var(--grosor-linea) solid var(--linea); border-radius: var(--radio-pastilla); background: var(--superficie); color: var(--tinta); font: 650 15px/20px var(--font-sans); text-decoration: none; box-shadow: var(--sombra-tarjeta); }
.calc-indice__enlace:hover { background: var(--subrayador); border-color: var(--subrayador); color: var(--sobre-subrayador); }
.calc-indice__enlace:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

:is(.calc-seccion, .calc-junto) > .calc-pliegue, .calc-compartir__aviso { max-width: var(--ancho-lectura); }
.calc-pliegue > .detalle__cuerpo > p { margin: 0; }
.calc-compartir__aviso { display: grid; gap: var(--espacio-3); }
.calc-compartir__aviso > p { margin: 0; }
.calc-porti__que-es .calc-pliegue, .calc-otras-normas__mas { margin-top: var(--espacio-3); }
.calc-otras-normas__mas .detalle__cuerpo { padding-bottom: var(--espacio-4); }
.calc-nomina__pliegue .detalle__cuerpo { padding-left: 0; border-left: 0; }
.calc-recibido__grupo--plegado { display: block; border-bottom: var(--grosor-linea) solid var(--linea); }
.calc-recibido__grupo--plegado > summary .calc-recibido__titulo { padding-bottom: 0; border-bottom: 0; }
.calc-recibido__grupo--plegado > .detalle__cuerpo { display: grid; gap: var(--espacio-3); }
.calc-recibido__grupo--plegado > .detalle__cuerpo > * { min-width: 0; margin: 0; }

/* ---- Impresión: el PDF -------------------------------------------------------
   «Guardar en PDF» usa window.print(). Cuando hay un resultado, la calculadora pone
   <body data-pdf="anonimo"> (o "respuestas" si la persona marca «Añadir mis respuestas»):
   se imprime el resultado completo, sin el cuestionario, y en modo anónimo sin nada de lo que
   la persona respondió (todo lo que lleva .calc-privado). Sin resultado, se imprime la página tal cual. */
@media print {
  @page { margin: 16mm 14mm; }
  details.calc-pliegue::details-content { content-visibility: visible; display: block; }
  .calc-seccion__cabecera--ilustrada { display: block; }
  .calc, .calc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .calc-barra, .calc-panel { display: none !important; }
  body[data-pdf] .calc-inicio, body[data-pdf] .portada-estatico, body[data-pdf] .llamada { display: none !important; }
  body[data-pdf] .solo-imprimir { display: block; }
  body[data-pdf] table.solo-imprimir { display: table; }
  body[data-pdf] section.solo-imprimir { display: grid; }
  body[data-pdf="anonimo"] .calc-privado { display: none !important; }
  body[data-pdf="anonimo"] .calc-anonimo { display: inline; }
  /* Lo que sustituye a una pieza entera en el PDF sin respuestas (el ticket discreto, la tabla discreta de familias) es
     una caja, no un trozo de frase. Y en el PDF con respuestas no sale nada de lo anónimo, aunque sea `solo-imprimir`. */
  body[data-pdf="anonimo"] div.calc-anonimo { display: block; }
  body[data-pdf="anonimo"] table.calc-anonimo { display: table; }
  body:not([data-pdf="anonimo"]) .calc-anonimo { display: none !important; }
  .portada-cabecera { padding-block: var(--espacio-4); }
  /* En papel no se reserva nada: de las notas de «quienes han hecho el cálculo» solo queda la que se ve. */
  .calc-parecidos-nota { display: block; }
  .calc-parecidos-nota__capa--oculta { display: none !important; }
  /* En bloque y no en rejilla: así el navegador parte bien las páginas y respeta los «no cortes aquí». */
  .calc, .calc-resultado, .calc-seccion, .calc-provincias, .calc-nomina, .calc-electrico { display: block; }
  .calc-seccion { padding-block: var(--espacio-6); }
  :is(.calc-seccion, .calc-junto) > * + *, .calc-nomina > * + *, .calc-electrico > * + *, .calc-provincias > * + * { margin-top: var(--espacio-4); }
  /* En el papel, la frase y lo que no cuenta (el «Cómo lo calculamos» plegado no se imprime), juntos. */
  .calc-electrico { padding-top: var(--espacio-4); break-inside: avoid; }
  .calc-electrico .calc-detalle { display: none; }
  /* «¿Y con las normas de otros años?»: las dos filas y la nota; «Cómo lo calculamos» no se imprime. */
  .calc-otras-normas { display: block; padding-top: var(--espacio-4); }
  .calc-otras-normas > * + * { margin-top: var(--espacio-3); }
  .calc-otras-normas .calc-detalle { display: none; }
  .calc-otras-normas__anio { break-inside: avoid; }
  :is(.calc-seccion, .calc-junto) > .solo-imprimir, :is(.calc-seccion, .calc-junto) > .no-imprimir { margin-top: 0; }
  :is(.calc-seccion, .calc-junto) > table.solo-imprimir { margin-top: var(--espacio-4); }
  .calc-seccion__cabecera { display: block; break-inside: avoid; }
  /* Un titular no se queda solo al pie de una hoja. En Chromium y WebKit basta `break-after: avoid` (aquí debajo), y con
     él el párrafo que sigue al titular todavía puede partirse para aprovechar la hoja. Firefox no lo respeta, pero sí
     `break-inside: avoid`: solo en él (Gecko), el envoltorio del titular y lo que va pegado a él (.calc-junto) es una
     caja que no se parte. En los demás sigue sin existir, y el PDF sale como salía.
     Donde no hay envoltorio (el titular de una tabla larga, que sí puede partirse; el de las provincias; un titular de
     tercer nivel y su párrafo), en Firefox el titular se reserva debajo el sitio de lo que le sigue: la caja mide eso de
     más y no se parte, y lo siguiente sube a ocuparlo (el margen negativo). */
  @supports (-moz-appearance: none) {
    .calc-junto { display: block; break-inside: avoid; }
    :is(.calc-seccion > .calc-seccion__cabecera, .calc-nomina > h3, .portada-pdf > h2) { break-inside: avoid; }
    :is(.calc-seccion > .calc-seccion__cabecera, .calc-nomina > h3, .portada-pdf > h2)::after { content: ""; display: block; height: 150px; margin-bottom: -150px; }
    :is(.calc-nomina > h3, .portada-pdf > h2)::after { height: 72px; margin-bottom: -72px; }
  }
  .calc-seccion__cabecera, .calc-seccion h2, .calc-seccion h3, .calc-seccion .tlqp-etiqueta { break-after: avoid; }
  .tlqp-franja, .tlqp-barras, .calc-vida, .calc-leyenda, .tlqp-ticket, .calc-mapa, .cifras-clave, .definiciones, .aviso, .tlqp-cifra { break-inside: avoid; }
  /* Lo que recibes: cada grupo de partidas con su título; la lista larga del resto puede partirse, pero no una fila. */
  .calc-recibido, .calc-recibido__grupo { display: block; }
  .calc-recibido__grupo + .calc-recibido__grupo { margin-top: var(--espacio-5); }
  .calc-recibido__grupo > * + * { margin-top: var(--espacio-2); }
  .calc-recibido .tlqp-barras { break-inside: auto; }
  .calc-recibido .tlqp-barras__fila, .calc-niveles { break-inside: avoid; }
  .calc-recibido__titulo { break-after: avoid; }
  /* Compacto, para que quepa en una hoja (y el PDF sin respuestas siga en ocho): cada partida en un renglón, con su
     detalle detrás del nombre, y la barra estrecha. */
  .calc-recibes .tlqp-cifra { gap: 2px; }
  .calc-recibes .tlqp-cifra__valor { font-size: 44px; line-height: 1.05; }
  .calc-recibes .tlqp-cifra .entradilla, .calc-recibes .tlqp-cifra__pie { font-size: 14px; line-height: 19px; }
  .calc-recibes__resto { gap: 2px; padding-top: 4px; break-inside: avoid; }
  .calc-recibes__resto-cifra { font-size: 13px; line-height: 17px; }
  .calc-recibes__resto-valor { font-size: 17px; line-height: 20px; }
  .calc-recibes__resto-que { font-size: 10px; line-height: 13px; }
  .calc-recibido__grupo + .calc-recibido__grupo { margin-top: var(--espacio-3); }
  .calc-recibido__grupo > * + * { margin-top: 3px; }
  .calc-recibido__titulo { padding-bottom: 2px; font-size: 13px; line-height: 17px; }
  .calc-recibido__suma { font-size: 12.5px; line-height: 17px; }
  .calc-recibido__que, .calc-recibido__aparte { font-size: 10px; line-height: 13px; }
  .calc-recibido__aparte { padding-top: 3px; }
  .calc-recibido__aparte .dato { font-size: 10.5px; line-height: 13px; }
  .calc-recibido__lista { gap: 3px; padding-top: 0; }
  .calc-recibido .tlqp-barras__fila { grid-template-columns: minmax(0, 1fr) 38mm 22mm; column-gap: 3mm; }
  .calc-recibido .tlqp-barras__nombre { display: block; font-size: 10.5px; line-height: 13px; }
  .calc-recibido__nombre { display: inline; }
  .calc-recibido__nombre::after { content: " · "; font-weight: 450; }
  .calc-recibido__detalle { display: inline; font-size: 9px; line-height: 12px; }
  .calc-recibido .tlqp-barras__pista { height: 7px; }
  .calc-recibido .tlqp-barras__valor { font-size: 10.5px; line-height: 13px; }
  .calc-recibes .aviso { padding: 6px 10px; }
  .calc-recibes .aviso p { font-size: 10px; line-height: 13px; }
  .calc-recibes .aviso__titulo { margin-bottom: 2px; }
  .calc-recibes .tlqp-nota { font-size: 9px; line-height: 12px; }
  /* Cada supuesto de «Tus respuestas», entero en su hoja: «Hábitos.» se quedaba solo al pie y su frase, en la siguiente. */
  .calc-conceptos > li { break-inside: avoid; }
  /* La leyenda va con su gráfica: no se queda sola al principio de una página. */
  .calc-leyenda { break-before: avoid; }
  :is(.calc-seccion, .calc-junto) > .tabla-marco { break-inside: avoid; }
  /* La tabla por familias y conceptos es larga: puede partirse, para empezar en la página de su titular y no dejar media hoja en blanco. */
  #familias .tabla-marco, #familias > table { break-inside: auto; }
  #familias tr { break-inside: avoid; }
  /* La cabecera de la tabla no se queda sola al pie de una página: va con sus dos primeras filas. */
  .calc-tabla-pdf thead { break-after: avoid; }
  .calc-tabla-pdf tbody tr:nth-child(-n+2) { break-before: avoid; }
  /* El párrafo que va entre un titular y su gráfica o su tabla no rompe la cadena: titular, párrafo y lo que sigue van juntos. */
  .calc-seccion h2 + p, .calc-seccion h3 + p, .calc-seccion__cabecera + p { break-after: avoid; }
  /* La cifra y el tique, uno al lado del otro en la primera hoja, y el tique más pequeño, con sus ondas y su pie. */
  .calc-cifra__rejilla { grid-template-columns: minmax(0, 1fr) 84mm; grid-template-rows: auto auto 1fr; column-gap: 7mm; row-gap: var(--espacio-4); break-inside: avoid; }
  .calc-cifra__principal { grid-column: 1; grid-row: 1; }
  .calc-cifra__mandos { grid-column: 1; grid-row: 2; }
  .calc-cifra__rejilla > .calc-tique { grid-column: 2; grid-row: 1 / span 3; }
  /* «Lo que tu empresa ingresa por ti» no va en el papel: con él, la cifra y el tique ya no cabían en la primera hoja
     (14-10-2026). Lo dicen la línea de debajo del total, la de este año y las notas del tique, que sí se imprimen; el
     bloque entero va en el informe en PDF. */
  .calc-cifra__rejilla > .calc-porti { display: none; }
  .calc-cifra__empresa, .calc-esteanio__porti { font-size: 11.5px; line-height: 15px; }
  :is(.calc-cifra__principal, .calc-cifra__mandos) > * + * { margin-top: 0; }
  /* En la primera hoja caben el título de la página, la cifra y el tique entero: el tique, compacto (unos 600 px). */
  .calc-tique { --trazo: 5px; }
  .calc-tique .tlqp-ticket__papel { gap: 5px; padding: 6px 12px 8px; }
  .calc-tique__marca { font-size: 15px; line-height: 18px; }
  .calc-tique__cabecera { gap: 0; padding-bottom: 4px; }
  .calc-tique__rotulo, .calc-tique__apartado th, .calc-tique__pie { font-size: 10.5px; line-height: 13px; }
  .calc-tique__datos, .calc-tique__tabla thead th, .calc-tique__nota, .calc-tique__total small, .calc-tique small { font-size: 9.5px; line-height: 12px; }
  .calc-tique__datos { padding-top: 2px; }
  .calc-tique__rotulo { letter-spacing: 0.02em; }
  .calc-tique__tabla, .calc-tique :is(.calc-tique__anio, .calc-tique__aparte) { font-size: 11px; line-height: 12.5px; }
  .calc-tique__tabla :is(th, td) { padding-block: 1px; }
  .calc-tique__tabla thead th { padding-bottom: 2px; }
  .calc-tique__apartado th, .calc-tique__tabla tbody:first-of-type .calc-tique__apartado th { padding-top: 4px; }
  .calc-tique__subtotal :is(th, td) { padding-top: 2px; }
  .calc-tique__redondeo :is(th, td) { padding-top: 3px; }
  .calc-tique__total { font-size: 14px; line-height: 18px; }
  .calc-tique :is(.calc-tique__total, .calc-tique__anio, .calc-tique__aparte, .calc-tique__pie) { padding-top: 4px; }
  /* El título de la página, más pequeño en el papel: es la cabecera del PDF, no la portada. */
  body[data-pdf] .portada-cabecera .titular-1 { font-size: 26px; line-height: 32px; }
  .calc-esteanio { padding-top: var(--espacio-3); }
  .calc-esteanio__frase { font-size: 17px; line-height: 24px; }
  /* Las ondas del ticket, en el papel: las mismas tiras de SVG (trazados, en el PDF de todos los motores), pintadas al
     ancho de la columna de 84 mm (cliente/_marca/ondas.ts, al imprimir). Sin la sombra: un filtro convierte el ticket en
     una imagen dentro del PDF. */
  .calc-tique { filter: none; }
  .calc-tabla-pdf small { display: block; font: var(--tipo-nota); color: var(--tinta-suave); }
  .calc-tabla-pdf__familia > *, .calc-tabla-pdf__total > * { border-top: var(--grosor-control) solid var(--tinta); font-weight: 650; }
  .calc-detalle > summary { display: none; }
  .calc-seccion a { text-decoration: none; }
  .tlqp-ticket { box-shadow: none; }
  .portada-pdf { padding-block: var(--espacio-6); border-top: var(--grosor-control) solid var(--tinta); }
  /* El título, la lista y la nota de fuentes, separados: iban pegados unos a otros. */
  .portada-pdf > * + * { margin-top: var(--espacio-3); }
}