/* todoloquepagas — zona «Calculadoras» (/calculadoras/).
   Las calculadoras sueltas son la misma herramienta que la calculadora de toda una vida de la portada: sus páginas
   cargan también calculadora.css (<Base estilos={['calculadora', 'calculadoras']}>) y usan sus clases tal
   cual: .calc-preguntas y .calc-pregunta (las preguntas), .calc-supuesto («Ahora usamos: …»), .calc-select
   (desplegable), .calc-panel__caja (la caja del resultado), .calc-nomina__pasos (el desglose) y .calc-barra
   (la barra fija del móvil). Los controles son el «Campo», las «Opciones» y el «Desplegable» del manual
   (componentes.css). Aquí solo va lo que es propio de esta zona.
   Regla: todos los colores salen de tokens.css. */

/* ---- La calculadora: las preguntas y, a su lado, la caja del resultado.
   En el móvil van una debajo de otra y la cifra se queda en la barra fija de abajo mientras se responde.
   En pantallas anchas, dos columnas iguales y la caja acompaña al desplazamiento, como el contador de la portada. ---- */
.minicalc-zona { padding-bottom: var(--espacio-8); }
/* La calculadora es un objeto: una tarjeta blanca, redondeada y con la sombra suave de la marca (marca 2). */
.minicalc { padding: var(--espacio-5) var(--espacio-4); border: var(--grosor-linea) solid var(--borde-tarjeta); border-radius: var(--radio-l); background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
/* Las tablas de dentro (la comparación del resultado) van sobre la tarjeta: su columna fija y la tapa del filete, del mismo color. */
.minicalc { --fondo-tabla: var(--superficie); }
@media (min-width: 40em) { .minicalc { padding: var(--espacio-8); } }
/* En el móvil, de lado a lado de la pantalla: con su margen, su borde y su relleno dentro de la página, a 320 px se comía
   34 px, y las tablas de tres columnas de cifras del resultado («Lo que le queda al trabajador») se salían de la tarjeta.
   Así, por dentro, mide lo mismo que la página. */
@media (max-width: 39.99em) { .minicalc { margin-inline: calc(-1 * var(--margen-lateral)); padding-inline: var(--margen-lateral); border-inline: 0; border-radius: 0; } }
.minicalc__dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-8); }
.minicalc__dentro > * { min-width: 0; }
@media (min-width: 60em) {
  .minicalc__dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--canal); align-items: start; }
  .minicalc-panel { position: sticky; top: var(--espacio-6); }
}

/* «Ponla en tu web» (components/InsertarCalculadora.astro): el botón de «Usa este gráfico», debajo de la calculadora y a la
   derecha, con el código del <iframe>. */
.minicalc-insertar { margin-top: var(--espacio-4); }

/* La calculadora para insertar en otra web (/insertar/calculadora/…, layouts/Insertado.astro): más ancha que una gráfica,
   para que en un marco ancho vaya en dos columnas, y sin la tarjeta de lado a lado del móvil, que dentro de un marco
   ajeno no tiene página a la que pegarse. */
.insertado--calculadora { max-width: 1120px; }
.insertado--calculadora .minicalc { margin-inline: 0; }
@media (max-width: 39.99em) { .insertado--calculadora .minicalc { padding-inline: var(--espacio-4); border-inline: var(--grosor-linea) solid var(--borde-tarjeta); border-radius: var(--radio-m); } }

/* El título de la página: el nombre con el que se busca, pequeño, y la pregunta, grande. Todo es el <h1>. */
.minicalc-titulo { display: grid; gap: var(--espacio-4); }
.minicalc-titulo > * { display: block; }

/* Las preguntas: lo que añade esta zona a .calc-pregunta. */
.minicalc .calc-pregunta > .calc-opciones + .tlqp-campo__ayuda { margin-top: calc(-1 * var(--espacio-1)); }
/* Las opciones con texto largo (parentescos) no se salen de la columna en el móvil. */
.minicalc .tlqp-opcion { max-width: 100%; }
.minicalc .tlqp-opcion span { min-width: 0; }
/* Lo opcional de cada calculadora, plegado como su última pregunta: «Afina el cálculo» (plegable.tsx), «Más datos» y
   «Más opciones» (Plegable, en campos.tsx) y «Más supuestos» (mas-supuestos.tsx), los tres con el mismo marcado. Es el
   desplegable del manual dentro de una pregunta, sin sus filetes (la pregunta ya lleva el suyo) y con el número delante
   del título, como las demás. */
.calc-pregunta > .minicalc-mas { border-top: 0; border-bottom: 0; }
.minicalc-mas > summary { min-height: var(--alto-control); padding-block: 0; }
.minicalc-mas > .tlqp-desplegable__cuerpo { padding-bottom: 0; }
.minicalc-mas > .tlqp-desplegable__cuerpo > * { min-width: 0; }
/* Los requisitos de una reducción, una casilla por requisito: ocupan dos renglones a menudo, así que la casilla va arriba. */
.minicalc-requisitos { display: grid; gap: var(--espacio-2); }
.minicalc-requisitos .calc-casilla { align-items: flex-start; max-width: 100%; font-weight: 500; }
.minicalc-requisitos .calc-casilla > span { min-width: 0; padding-top: 3px; }
/* El supuesto general y la línea de privacidad cierran las preguntas, como en la portada. */
.minicalc__supuesto { gap: var(--espacio-3); }
.minicalc__supuesto .calc-supuesto { max-width: 62ch; }
/* Sin JavaScript, en el lugar de las preguntas va el ejemplo con el que se ha hecho la cuenta. */
.minicalc-ejemplo .entradilla { max-width: 30em; }

/* La caja del resultado: la «Cifra» del manual, a la medida de la caja. */
.minicalc-panel .calc-panel__caja { gap: var(--espacio-4); scroll-margin-top: var(--espacio-4); }
.minicalc-panel .calc-panel__caja:focus { outline: none; }
.minicalc-panel .calc-panel__caja > * { min-width: 0; max-width: 100%; margin: 0; }
.minicalc-panel .tlqp-cifra { gap: var(--espacio-3); }
/* Lo que cuesta el trabajo, en una barra (sueldo neto y coste de un trabajador): la pieza `.coste` de ritmo.css. */
.minicalc__coste { display: grid; gap: var(--espacio-3); }
.minicalc__coste > * { min-width: 0; margin: 0; }
.minicalc-panel .tlqp-cifra__valor { max-width: 100%; font-size: clamp(36px, 11.5vw, 64px); }
.minicalc-panel .tlqp-cifra__valor.minicalc-cifra--larga { font-size: clamp(26px, 7.6vw, 44px); }
@media (min-width: 60em) {
  .minicalc-panel .tlqp-cifra__valor { font-size: clamp(44px, 5vw, 64px); }
  .minicalc-panel .tlqp-cifra__valor.minicalc-cifra--larga { font-size: clamp(32px, 3.4vw, 44px); }
}
.minicalc-panel .tlqp-cifra__pie { max-width: 30em; }
.minicalc--espera > * { opacity: 0.45; }

/* El desglose paso a paso: la misma lista que «Tu año de hoy» en la portada, a todo el ancho de la caja. */
.minicalc__subtitulo { margin-top: var(--espacio-4) !important; font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); }
.minicalc-panel .definiciones, .minicalc-panel .aviso, .minicalc__comparacion { justify-self: stretch; width: 100%; max-width: none; }
.minicalc-panel .definiciones > div:first-child { border-top: var(--grosor-linea) solid var(--linea); }
.minicalc-panel .definiciones dt { min-width: 0; overflow-wrap: break-word; }

/* Una lista con textos largos en vez de cifras (las estimaciones publicadas de «Deflactar el IRPF»): quién y cuándo encima, el
   texto debajo. En dos columnas, el texto se comía la del título y en el móvil salía letra a letra (Javier, 4-11-2026). */
.definiciones--texto > div { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-2); }
.definiciones--texto dt { font-weight: 700; }
.definiciones--texto dd { margin: 0; font: var(--tipo-cuerpo); text-align: start; }
.definiciones--texto dd > p { margin: 0; }

.minicalc__comparacion { display: grid; gap: var(--espacio-2); }
.minicalc__comparacion caption { font: var(--tipo-cuerpo-pequeno); font-weight: 650; color: var(--tinta); }
/* Con tres columnas de cifras (autónomo o sociedad), las cabeceras se parten y la primera columna se estrecha; por debajo
   de unos 390 px, la tabla se desplaza dentro de su marco (.tabla-marco), con la primera columna fija. */
.minicalc__comparacion thead th.num { white-space: normal; vertical-align: bottom; overflow-wrap: normal; }
.minicalc__comparacion tbody th { white-space: normal; }
@media (max-width: 49.99em) {
  .minicalc__comparacion th, .minicalc__comparacion td { padding-right: var(--espacio-3); }
  .minicalc__comparacion th:last-child, .minicalc__comparacion td:last-child { padding-right: 0; }
  .minicalc__comparacion tbody th { min-width: 0; }
  /* Una celda con palabras delante de la cifra («A devolver: 152,48 €») se parte detrás de las palabras; la cifra y su
     «€» van con un espacio que no se parte. */
  .minicalc__comparacion td.num { white-space: normal; }
}

@media print {
  .minicalc-panel { position: static; }
}

/* ---- Tablas de casos típicos ----
   La primera columna dice de qué es cada fila: se queda fija a la izquierda mientras el resto se desplaza dentro
   del marco, para no perder de vista la comunidad o el sueldo al mirar la última columna en el móvil. Las cabeceras
   pueden partirse en dos líneas, que es lo que hace que la tabla quepa o se desplace poco. */
.tabla-casos th[scope="row"], .tabla-casos thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--fondo-tabla, var(--papel)); padding-right: var(--espacio-4); }
.tabla-casos th[scope="row"] { font-weight: 450; white-space: nowrap; }
.tabla-casos .fila-resaltada th[scope="row"] { background: var(--subrayador-suave); }
.tabla-casos thead th { white-space: normal; vertical-align: bottom; }
.tabla-casos thead th.num { min-width: 5.5rem; }
.tabla-casos .es-nota { min-width: 12rem; font: var(--tipo-nota); color: var(--tinta-suave); white-space: normal; }
@media (max-width: 40em) {
  /* En el móvil la primera columna puede partirse: si no, una comunidad de nombre largo se come media pantalla. */
  .tabla-casos th[scope="row"] { max-width: 9.5rem; white-space: normal; overflow-wrap: break-word; }
  .tabla-casos .es-nota { min-width: 10rem; }
}
@media print {
  .tabla-casos th[scope="row"], .tabla-casos thead th:first-child { position: static; }
}

/* ---- Los bloques de texto de una calculadora suelta (ritmo editorial) ---------------------------------------------
   Debajo de la calculadora, que no cambia: «¿Qué es…?» como apertura en el fondo suave de la familia de su grupo
   (components/calculadoras/familia.ts), «Cómo se calcula» con ladillos y «Para saber más», los casos en la banda
   superficie con lo de consulta plegado, «Qué no tiene en cuenta», las preguntas, las otras calculadoras por grupos en
   otra banda superficie, las fichas en tarjetas de color y las fuentes plegadas. Cada bloque lleva el color de la
   familia (data-familia), que pinta la raya de su titular, los guiones de las listas y los ladillos. Sin iconos. */

/* El título: el nombre con el que se busca, en versales, encima de la pregunta (todo sigue siendo el <h1>). */
.minicalc-titulo__sello { display: flex; align-items: center; gap: var(--espacio-3); }

/* «¿Qué es…?» */
.que-es__datos { display: grid; margin: 0; border-top: var(--grosor-control) solid var(--familia); }
.que-es__datos > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-1) var(--espacio-6); align-items: start; padding-block: var(--espacio-4); border-bottom: var(--grosor-linea) solid var(--linea); }
.que-es__datos dt { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--familia-tinta); padding-top: 4px; }
.que-es__datos dd { margin: 0; font: 450 17px/26px var(--font-sans); text-wrap: pretty; }
@media (min-width: 40em) {
  .que-es__datos > div { grid-template-columns: 160px minmax(0, 1fr); }
}
.que-es__entran { display: grid; gap: var(--espacio-2); }
.que-es__entran ul { border-top-color: var(--familia); }
.que-es__entran li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: var(--espacio-3); align-items: start; color: var(--tinta); }
.que-es__entran li::before { content: ""; grid-row: 1 / span 2; width: 12px; height: 12px; margin-top: 7px; border-radius: 2px; background: var(--familia); }
.que-es__entran li > * { grid-column: 2; }
/* La ficha completa: una tarjeta blanca sobre el fondo de la familia, con su flecha. */
.que-es__ficha { display: block; padding: 0; border: 0; }
.tlqp .que-es__ficha a { position: relative; display: grid; width: 100%; justify-items: start; gap: var(--espacio-1); min-height: 0; padding: var(--espacio-4) var(--espacio-12) var(--espacio-4) var(--espacio-5); border-radius: var(--radio-l); background: var(--superficie); color: var(--tinta); font: inherit; text-decoration: none; }
.tlqp .que-es__ficha a:hover { background: var(--subrayador-suave); color: var(--tinta); }
.que-es__ficha .tlqp-etiqueta { color: var(--familia-tinta); }
.que-es__ficha-nombre { font: 650 21px/28px var(--font-sans); letter-spacing: -0.01em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.que-es__ficha-texto { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.que-es__ficha-flecha { position: absolute; top: 50%; right: var(--espacio-5); width: 22px; height: 22px; margin-top: -11px; color: var(--familia-tinta); }


/* Los casos: lo de consulta va plegado (<Detalle class="tabla-plegada ancho-total">), uno debajo de otro, de lado a lado,
   compartiendo los filetes; la primera tabla, la que se ve sin abrir nada, sigue a la vista. */
.minicalc-casos > .tabla-plegada:has(+ .tabla-plegada) { margin-bottom: 0; }
.minicalc-casos > .tabla-plegada + .tabla-plegada { border-top: 0; }
.minicalc-casos > .tabla-plegada > .detalle__cuerpo > p:not(.tlqp-nota) { max-width: var(--ancho-lectura); }
/* Lo que presenta una tabla o lleva a otra calculadora es texto que se lee: en tinta, no en el gris de las notas. */
.minicalc-entradilla { max-width: var(--ancho-lectura); margin: 0; font: var(--tipo-cuerpo); color: var(--tinta); text-wrap: pretty; }

/* «Otras calculadoras», por grupos, cada uno con su color: enlaces con la altura de un control táctil. */
.minicalc-otras { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--espacio-6) var(--espacio-8); }
.minicalc-otras__grupo { display: grid; align-content: start; gap: var(--espacio-1); padding-top: var(--espacio-3); border-top: 3px solid var(--familia); }
.minicalc-otras__nombre { display: flex; align-items: center; gap: var(--espacio-3); margin-bottom: var(--espacio-1); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--familia-tinta); }
.minicalc-otras ul { display: grid; gap: var(--espacio-1); margin: 0; padding: 0; list-style: none; }
.minicalc-otras a { display: inline-flex; align-items: center; min-height: 40px; padding-block: var(--espacio-1); font: 450 16px/22px var(--font-sans); }

/* ---- Índice: arriba, la calculadora de toda una vida y, debajo, las sueltas por grupos ------------------------------
   Ritmo editorial: la calculadora de toda una vida es el momento fuerte, en la banda de tinta, antes de la lista; cada
   grupo, con el color de su familia de impuestos (components/calculadoras/familia.ts; data-familia en .calc-grupo), su
   nombre en el rail y sus tarjetas de color de dos en dos en la lectura; lo que tienen en común, en una lista de cifras. */
.calc-grupos { display: grid; gap: var(--espacio-12); }
/* Marca final: los grupos, en los cuatro grupos de color (.grupo-color, ritmo.css), con el color una vez en su rótulo;
   cada grupo de calculadoras, separado del de antes por el filete de siempre. */
.calc-grupo { display: grid; gap: var(--espacio-5); padding-top: var(--espacio-6); border-top: var(--grosor-linea) solid var(--linea); }
.grupo-color__rotulo + .calc-grupo { border-top: 0; padding-top: var(--espacio-4); }
/* El filete entre dos grupos de un mismo color, con el mismo aire encima que debajo: sin él, se pegaba a las tarjetas. */
.calc-grupo + .calc-grupo { margin-top: var(--espacio-6); }
.calc-grupo > * { min-width: 0; }
.calc-grupo__cabecera { display: grid; align-content: start; justify-items: start; gap: var(--espacio-2); max-width: var(--ancho-lectura); }
.calc-grupo__cabecera p { color: var(--tinta); }
.calc-grupo__cabecera .calc-grupo__cuenta { font: var(--tipo-dato); font-weight: 760; color: var(--familia-tinta); }
.enlaces-rejilla--tres { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
/* Con cuatro, las cuatro en fila o dos y dos (el interruptor de sitio.css, «Tarjeta-enlace»). */
.enlaces-rejilla--tres:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 320px), clamp(calc(25% - 12px - 1px), calc((1328px - 100%) * 999), calc(50% - 8px - 1px))), 1fr)); }
/* Las tarjetas de una calculadora: el fondo de su familia, la pregunta en tinta y el dato del ejemplo, abajo. */
.calc-grupo .tarjeta-enlace__titulo { font-size: 20px; line-height: 26px; }
/* Con dos pistas, cada grupo es una fila de la rejilla de la página: su nombre en el rail y sus tarjetas en la lectura. */
@media screen and (min-width: 60em) {
  .calc-grupo { grid-template-columns: var(--pistas); column-gap: var(--canal); padding-top: var(--espacio-8); }
  .calc-grupo + .calc-grupo { margin-top: var(--espacio-8); }
  .grupo-color__rotulo + .calc-grupo { padding-top: var(--espacio-5); }
  .calc-grupo__cabecera { position: sticky; top: var(--espacio-6); }
  .calc-grupo > .enlaces-rejilla { grid-column: lectura; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-grupo > .enlaces-rejilla > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Las 35, en tique (Julián, 30-10-2026: «Calculadoras la opción TICKET es la mejor»; Interfaz/bloques/tarjeta-enlace):
   papel recto con el borde de arriba y el de abajo en ondas (una máscara), la familia en la línea de puntos del troquel y
   el dato del ejemplo al pie, como el total. La máscara recorta lo que sale de la caja: el perfil de 1 px del tique va en
   el <li> (drop-shadow, que sigue las ondas) y el anillo del foco, también en el <li>. */
.calc-grupo .enlaces-rejilla { row-gap: var(--espacio-6); }
.calc-grupo .enlaces-rejilla > li { filter: drop-shadow(1px 0 0 var(--linea-control)) drop-shadow(-1px 0 0 var(--linea-control)) drop-shadow(0 1px 0 var(--linea-control)) drop-shadow(0 -1px 0 var(--linea-control)); }
.calc-grupo .enlaces-rejilla > li:has(> a:focus-visible) { outline: var(--grosor-foco) solid var(--foco); outline-offset: 4px; }
.tlqp .calc-grupo a.tarjeta-enlace { padding: calc(var(--espacio-6) + 10px) var(--espacio-5) calc(var(--espacio-5) + 10px); border-top: 0; background: var(--superficie);
  -webkit-mask: var(--ondas-tique); mask: var(--ondas-tique); }
.tlqp .calc-grupo a.tarjeta-enlace:focus-visible { outline: none; }
.tlqp .calc-grupo a.tarjeta-enlace::before { top: 16px; right: var(--espacio-5); left: var(--espacio-5); width: auto; height: 0; border-top: 2px dashed var(--familia); background: none; -webkit-mask: none; mask: none; }
.tlqp .calc-grupo a.tarjeta-enlace:hover { background: var(--subrayador-suave); }
.tlqp .calc-grupo a.tarjeta-enlace:hover .tarjeta-enlace__titulo { text-decoration-color: currentColor; }
.calc-grupo .tarjeta-enlace__dato { padding-top: var(--espacio-3); border-top: var(--grosor-linea) dashed var(--linea-control); font-weight: 650; font-variant-numeric: tabular-nums; }
.calc-grupo .tarjeta-enlace__flecha { right: var(--espacio-5); bottom: calc(var(--espacio-5) + 10px); }
:root { --ondas-tique: radial-gradient(6px at 50% 0, transparent 96%, black) 50% 0 / 16px 51% repeat-x, radial-gradient(6px at 50% 100%, transparent 96%, black) 50% 100% / 16px 51% repeat-x; }

/* El destacado: la calculadora de toda una vida en un tique ancho (components/calculadora/tique-familias.blade.php), con
   el mismo borde en ondas y el mismo perfil que las 35. A la izquierda la pregunta y el botón; a la derecha, la cuenta:
   las cuatro familias de debajo, cada una con su color, sus calculadoras y su parte de la vida, y el total. */
.calc-destacado { margin-block: var(--espacio-6) var(--espacio-12); filter: drop-shadow(1px 0 0 var(--linea-control)) drop-shadow(-1px 0 0 var(--linea-control)) drop-shadow(0 1px 0 var(--linea-control)) drop-shadow(0 -1px 0 var(--linea-control)); }
.calc-destacado__tique { display: grid; gap: var(--espacio-6) var(--canal); padding: calc(var(--espacio-10) + 12px) var(--espacio-5) calc(var(--espacio-10) + 12px); background: var(--superficie); -webkit-mask: var(--ondas-tique); mask: var(--ondas-tique); }
@media (min-width: 40em) { .calc-destacado__tique { padding-inline: var(--espacio-6); } }
@media screen and (min-width: 60em) { .calc-destacado__tique { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); padding-inline: var(--espacio-8); } }
.calc-destacado__texto { display: grid; align-content: start; justify-items: start; gap: var(--espacio-4); }
.calc-destacado__titulo { max-width: 14em; margin: 0; font: 860 clamp(28px, 3.4vw, 38px)/1.1 var(--font-sans); letter-spacing: -0.025em; text-wrap: balance; }
.calc-destacado__parrafo { max-width: 32em; margin: 0; font: 450 18px/27px var(--font-sans); text-wrap: pretty; }
.tlqp a.calc-destacado__ir { display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: 52px; margin-top: var(--espacio-2); padding: var(--espacio-3) var(--espacio-6); border-radius: var(--radio-m); background: var(--subrayador); color: var(--sobre-subrayador); font: var(--tipo-boton); font-size: 18px; font-weight: 860; text-decoration: none; box-shadow: var(--sombra-tarjeta); }
.calc-destacado__ir .icono { width: 20px; height: 20px; }
.tlqp a.calc-destacado__ir:hover { background: var(--subrayador-intenso); color: var(--sobre-subrayador); box-shadow: var(--sombra-elevada); }
.calc-destacado__notas { display: grid; gap: var(--espacio-2); margin-top: var(--espacio-2); }
.calc-destacado__notas > p { margin: 0; font: var(--tipo-cuerpo-pequeno); }
/* La cuenta, en la letra del tique. */
.calc-destacado__cuenta { display: grid; align-content: start; font: 500 15px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
.calc-destacado__cuenta p { margin: 0; }
.calc-destacado__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--espacio-3); padding-bottom: var(--espacio-2); border-bottom: 2px dashed var(--subrayador); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-suave); }
.calc-destacado__cabeza > span { white-space: nowrap; }
.calc-destacado__familias { margin: 0; padding: 0; list-style: none; }
.calc-destacado__familias > li { display: grid; gap: 2px; padding-block: var(--espacio-3); border-bottom: var(--grosor-linea) dashed var(--linea-control); }
.tlqp a.calc-destacado__linea { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--espacio-3); color: var(--tinta); text-decoration: none; }
.calc-destacado__marca { align-self: center; width: 12px; height: 12px; background: var(--familia); }
.calc-destacado__nombre { font: 760 16px/22px var(--font-sans); }
.calc-destacado__n { grid-column: 2; font-size: 13px; color: var(--tinta-suave); }
.tlqp a.calc-destacado__linea:hover .calc-destacado__nombre { text-decoration: underline; text-decoration-color: var(--familia); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.calc-destacado__parte { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-left: calc(12px + var(--espacio-3)); font-size: 14px; color: var(--tinta-suave); }
.calc-destacado__redondeo { display: flex; justify-content: space-between; padding-block: var(--espacio-2); font-size: 13px; color: var(--tinta-suave); }
.calc-destacado__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--espacio-3); padding-top: var(--espacio-3); border-top: 2px dashed var(--tinta); }
.calc-destacado__total-rotulo { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.calc-destacado__cifra { font: 860 clamp(36px, 4vw, 48px)/1.05 var(--font-sans); letter-spacing: -0.03em; }
.calc-destacado__cifra .tlqp-subrayado { --brocha-izq: 0.1em; --brocha-der: 0.16em; }
.calc-destacado__pie { flex-basis: 100%; font-size: 13px; color: var(--tinta-suave); }
/* En el móvil, la cuenta antes de las notas de la fuente: el tique primero, la letra pequeña al final. */
@media (max-width: 59.99em) {
  .calc-destacado__texto { display: contents; }
  .calc-destacado__tique > :is(.tlqp-etiqueta, .calc-destacado__titulo, .calc-destacado__parrafo) { margin: 0; }
  .calc-destacado__tique { justify-items: start; }
  .calc-destacado__cuenta { justify-self: stretch; }
  .calc-destacado__notas { order: 2; }
}
@media print { .calc-destacado__tique { -webkit-mask: none; mask: none; } .calc-destacado { filter: none; } }

/* En móvil la primera columna puede partir en líneas: así cabe fija a la izquierda sin comerse medio marco. */
@media (max-width: 40em) { .tabla-casos th[scope="row"] { white-space: normal; min-width: 8.5em; max-width: 42vw; } }

/* WebKit (Safari) mide un <select> por su opción más larga aunque se le diga width: 100 %, y un <fieldset> pide de
   mínimo lo que mide su contenido: con listas largas (productos del IVA, «Más datos» de sueldo neto) la página se
   ensanchaba unos píxeles en el móvil. Nada dentro de una calculadora suelta se ensancha por su contenido. Lo vigila el
   bloque «calculadoras» de herramientas/otros-navegadores.mjs. */
.minicalc :is(.tlqp-campo, .tlqp-campo__caja, .tlqp-desplegable, .tlqp-desplegable__cuerpo, details, fieldset, .calc-opciones) { min-width: 0; max-width: 100%; }
.minicalc .tlqp-desplegable__cuerpo { grid-template-columns: minmax(0, 1fr); }
.minicalc select { max-width: 100%; }
/* La cifra de cada paso mide lo que mide su texto y el concepto se queda con el resto. WebKit no recolocaba esta
   columna al cambiar la cifra o al cargar la tipografía (a 390 px, «2.262,70 €» se salía 11 px de la página): lo
   resuelve el ancho mínimo en «ch» que pone Calculadora.tsx en cada cifra. */
.minicalc-panel .definiciones > div { grid-template-columns: minmax(0, 1fr) max-content; }
.minicalc-panel .definiciones dd { white-space: nowrap; }
/* La frase de una cifra («Te devuelven», «Pagas»), encima del importe y pequeña: entera en la columna de la cifra, el
   concepto se quedaba a 390 px con un tercio del ancho y tres renglones (cifra-del-paso.ts). */
.minicalc-paso__que { display: block; font: var(--tipo-nota); color: var(--tinta-suave); }

/* ---- r22 curiosidad: las calculadoras del grupo «Curiosidades» ---------------------------------------------------
   Impuestos del alcohol: las cinco bebidas de la primera pregunta, cada una con su campo, en una rejilla (dos columnas
   cuando caben). La leyenda tiene la letra de las demás preguntas (la de .tlqp-opciones). */
.minicalc-bebidas { margin: 0; padding: 0; border: 0; min-width: 0; }
.minicalc-bebidas > legend { padding: 0; margin-bottom: var(--espacio-3); font: 650 17px/24px var(--font-sans); }
.minicalc-bebidas__campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3) var(--espacio-4); }
.minicalc-bebidas__campos > * { min-width: 0; }
@media (min-width: 30em) {
  .minicalc-bebidas__campos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
}
/* IVA de la compra, por tipos de producto: los ocho campos, en dos columnas cuando caben. Con subgrid, cada campo ocupa
   cuatro filas de la rejilla (la etiqueta, la caja, la ayuda y el «Ahora usamos») y las etiquetas de una misma fila,
   de uno o de dos renglones, dejan las cajas a la misma altura. */
.minicalc-cesta__campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-4); }
.minicalc-cesta__campos > * { min-width: 0; }
@media (min-width: 30em) {
  .minicalc-cesta__campos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
  @supports (grid-template-rows: subgrid) {
    .minicalc-cesta__campos > * { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--espacio-2); }
    .minicalc-cesta__campos .tlqp-campo { display: contents; }
    .minicalc-cesta__campos .tlqp-campo__etiqueta { align-self: end; }
  }
}
/* IVA de la compra, con el ticket: el cuadro de texto, de ocho renglones y en la letra del ticket; cada renglón es una
   línea (no se parten: si no caben, el cuadro se desplaza de lado). Debajo, lo leído, en el papel del ticket. */
.minicalc-ticket { max-width: none; }
.minicalc-ticket__caja { align-items: stretch; }
.minicalc-ticket__texto { height: auto; min-height: calc(8 * 22px + 2 * var(--espacio-3)); padding: var(--espacio-3) var(--espacio-4); font: 400 15px/22px var(--font-mono); white-space: pre; overflow-x: auto; resize: vertical; }
.minicalc-tique { margin-top: var(--espacio-5); }
.minicalc-tique__fuera :is(th, td) { color: var(--tinta-suave); }
/* El ticket de la compra media, en «Cómo se calcula»: a la izquierda, con su pie debajo. */
.minicalc-figura-tique { display: grid; gap: var(--espacio-3); justify-items: start; margin: var(--espacio-6) 0; }
.minicalc-figura-tique .minicalc-tique { margin-top: 0; }
.minicalc-figura-tique figcaption { max-width: 440px; margin: 0; }
/* En «Cómo se calcula» el ticket va dentro de .prosa, que da a las tablas y a la letra pequeña su estilo de texto
   (sitio.css): aquí se les devuelve el del ticket de la portada. */
.minicalc-figura-tique .calc-tique__tabla { display: table; width: 100%; max-width: none; overflow: visible; font: var(--tipo-ticket-linea); font-variant-numeric: tabular-nums; }
.minicalc-figura-tique .calc-tique__quien { font: 400 11.5px/15px var(--font-mono); color: var(--tinta-suave); }
/* Días trabajados para impuestos: «Compártelo», debajo de la calculadora y de lado a lado, separado por un filete. La
   vista previa, los botones y el texto son los de la portada (calculadora.css, «Compartir»). */
.minicalc-compartir { display: grid; gap: var(--espacio-6); margin-top: var(--espacio-12); padding-top: var(--espacio-8); border-top: var(--grosor-linea) solid var(--linea); }
.minicalc-compartir > * { min-width: 0; }
.minicalc-compartir__titulo { margin: 0; font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); }

/* ---- El índice, de un vistazo (ronda 23) ----
   En el móvil, cada tarjeta lleva su pregunta y su ejemplo; lo que explica la calculadora (`ampliacion` de TarjetaEnlace)
   sale solo con sitio, y entero en la página de cada una. */
@media (max-width: 39.99em) {
  .calc-grupo .tarjeta-enlace__ampliacion { display: none; }
}
.minicalc-como .prosa > .minicalc-como__pliegue { margin-top: var(--espacio-4); }
.minicalc-como .prosa > .minicalc-como__pliegue + .minicalc-como__pliegue { margin-top: 0; }
.minicalc-otras__resto { grid-column: 1 / -1; }
.minicalc-otras__resto > .detalle__cuerpo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--espacio-6) var(--espacio-8); padding-left: 0; border-left: 0; margin-left: 0; }
.minicalc-limites .prosa > .minicalc-limites__pliegue { margin-top: var(--espacio-2); }

/* «El mismo caso en cada comunidad» (minicalculadoras, comparar.ts): plegado, una barra por comunidad. La tuya, en el
   amarillo de la marca con su borde de tinta, como la fila destacada de las barras de la web. */
.minicalc__comunidades { margin-top: var(--espacio-5); }
.minicalc__comunidades > p { margin: 0 0 var(--espacio-3); }
.minicalc-comunidades { display: grid; gap: var(--espacio-1); margin: 0 0 var(--espacio-3); padding: 0; list-style: none; }
.minicalc-comunidades li { display: grid; grid-template-columns: minmax(7rem, 9.5rem) minmax(0, 1fr) auto; align-items: center; gap: var(--espacio-3); min-height: 24px; font: var(--tipo-cuerpo-pequeno); }
.minicalc-comunidades__nombre { min-width: 0; overflow-wrap: anywhere; }
.minicalc-comunidades__barra { display: block; height: 12px; }
.minicalc-comunidades__barra i { display: block; height: 100%; background: var(--tinta); }
.minicalc-comunidades li.es-tuya { font-weight: 760; }
.minicalc-comunidades li.es-tuya .minicalc-comunidades__barra i { background: var(--subrayador); box-shadow: inset 0 0 0 1.5px var(--sobre-subrayador); }
.minicalc-comunidades__cifra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media print { .minicalc__comunidades:not([open]) { display: none; } }