/* todoloquepagas — componentes. Todo color, radio, sombra y fuente sale de tokens.css.
   Hasta la marca 2 era una copia del bundle.css del manual de marca. La marca 2 (15-10-2026) llegó en dos láminas, sin
   bundle: desde entonces esta hoja es nuestra y se edita aquí (importar-manual.mjs ya no la pisa). El estilo de interfaz
   de la lámina: botón principal amarillo con flecha, tarjetas blancas redondeadas con sombra suave, pastillas y campos
   redondeados (docs/marca/6-componentes.md). */

.tlqp { font-family: var(--font-sans); font-size: 17px; line-height: 26px; color: var(--tinta); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.tlqp, .tlqp *, .tlqp *::before, .tlqp *::after { box-sizing: border-box; }
.tlqp :focus-visible { outline: var(--grosor-foco) solid var(--foco); outline-offset: 2px; }
.tlqp a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tlqp a:hover { background: var(--subrayador); color: var(--sobre-subrayador); text-decoration: none; }
.tlqp-etiqueta { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); margin: 0; }

/* ---- La brocha: el gesto de la marca (marca final) -----------------------
   La mancha amarilla del logo detrás de «pagas», detrás de la palabra o la cifra que importa. La dibujan tres capas de
   fondo de la propia palabra (los trozos de packages/ui/herramientas/brocha.mjs, en tokens.css): la punta izquierda y la
   derecha, que no se deforman, y el centro, que se estira a lo que mida la palabra (y un pelo más, para tapar las juntas).
   Mide --brocha-alto (1,08 em) y empieza 0,12 em por debajo de lo alto de la letra (Albert Sans: 0,95 em por encima de
   la línea base y 0,25 por debajo; la caja de la palabra mide 1,2 em). Sale por los lados lo que digan --brocha-izq y
   --brocha-der (en una palabra, 0,22 y 0,16 em; en una cifra, 0,1 y 0,16), con un margen negativo igual: la palabra no
   se mueve, y lo de antes y lo de después va donde iba (por la izquierda, como en el kit, la punta se come el espacio de
   antes; por la derecha sale menos que en el kit, que saca 0,30 em, para que la palabra de después no caiga encima de la
   punta; un punto o una coma, sí). Es un fondo, así que va detrás de su texto sin
   z-index (nada lo tapa: ni la banda ni la tarjeta en que va) y, partida en dos renglones, cada trozo lleva sus dos
   puntas (box-decoration-break: clone). Sobre un fondo amarillo, la brocha va en tinta y la palabra en amarillo
   (.sobre-amarillo). --brocha-color dice a las pruebas de contraste sobre qué color va el texto. */
.tlqp-subrayado {
  --brocha-izq: 0.22em;
  --brocha-der: 0.16em;
  --brocha-color: var(--subrayador);
  --brocha-i: var(--brocha-amarilla-izquierda);
  --brocha-c: var(--brocha-amarilla-centro);
  --brocha-d: var(--brocha-amarilla-derecha);
  padding: 0 var(--brocha-der) 0 var(--brocha-izq);
  margin: 0 calc(-1 * var(--brocha-der)) 0 calc(-1 * var(--brocha-izq));
  background:
    var(--brocha-i) left 0 top 0.12em / var(--brocha-punta) var(--brocha-alto) no-repeat,
    var(--brocha-d) right 0 top 0.12em / var(--brocha-punta) var(--brocha-alto) no-repeat,
    var(--brocha-c) 50% 0.12em / calc(100% - 2 * var(--brocha-punta) + 0.015em) var(--brocha-alto) no-repeat;
  color: var(--sobre-subrayador);
  font-weight: 860;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
:is(.sobre-amarillo, .tlqp-boton--destacado) .tlqp-subrayado { --brocha-color: var(--sobre-subrayador); --brocha-i: var(--brocha-tinta-izquierda); --brocha-c: var(--brocha-tinta-centro); --brocha-d: var(--brocha-tinta-derecha); color: var(--subrayador); }
/* La suave, en el texto corrido: un resaltado suave, sin brocha (va dentro de una frase, no es un titular ni una cifra
   grande). En un titular (los del resultado, que la usan para no competir con la cifra de la vida), la brocha. */
.tlqp-subrayado--suave:not(:is(h1, h2, h3, h4) *) { --brocha-color: initial; padding: 0 0.16em; margin: 0; border-radius: 0.16em; background: var(--subrayador-suave); color: var(--tinta); font-weight: inherit; }
/* Una brocha corta suelta bajo un titular (la «raya» amarilla de la lámina, ahora un trazo de brocha): el fondo de una caja
   de 72 × 18 px (las puntas, a ese alto, miden 8,3 px). En la hoja que la usa: `width: 72px; height: 18px;
   background: var(--brocha-corta)` (o --brocha-corta-tinta, sobre amarillo). */
:root {
  --brocha-corta: var(--brocha-amarilla-izquierda) left center / 8.3px 100% no-repeat, var(--brocha-amarilla-derecha) right center / 8.3px 100% no-repeat, var(--brocha-amarilla-centro) center / calc(100% - 16.4px) 100% no-repeat;
  --brocha-corta-tinta: var(--brocha-tinta-izquierda) left center / 8.3px 100% no-repeat, var(--brocha-tinta-derecha) right center / 8.3px 100% no-repeat, var(--brocha-tinta-centro) center / calc(100% - 16.4px) 100% no-repeat;
}

/* ---- Botón ---------------------------------------------------------------
   El principal de la lámina es el destacado: amarillo, texto negro y, cuando lleva a otro sitio, flecha. */
:root { --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14.5M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.tlqp-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2); min-height: var(--alto-control); padding: var(--espacio-3) var(--espacio-5); border: var(--grosor-control) solid transparent; border-radius: var(--radio-m); font: var(--tipo-boton); text-decoration: none; cursor: pointer; }
.tlqp-boton--destacado { background: var(--subrayador); color: var(--sobre-subrayador); border-color: var(--subrayador); font-weight: 860; box-shadow: var(--sombra-tarjeta); }
.tlqp-boton--destacado:hover { background: var(--subrayador-intenso); color: var(--sobre-subrayador); border-color: var(--subrayador-intenso); box-shadow: var(--sombra-elevada); }
/* La flecha: en los enlaces con aspecto de botón principal y en los botones que llevan a otra parte (.tlqp-boton--flecha).
   Es una máscara del color del texto: sale igual en los dos temas y no depende de que la tipografía tenga «→». */
a.tlqp-boton--destacado::after, .tlqp-boton--flecha::after { content: ""; flex: none; width: 1.2em; height: 1.2em; margin-right: -0.15em; background: currentColor; -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; }
.tlqp-boton--principal { background: var(--inverso); color: var(--sobre-inverso); border-color: var(--inverso); }
.tlqp-boton--principal:hover { background: var(--subrayador); color: var(--sobre-subrayador); border-color: var(--sobre-subrayador); }
.tlqp-boton--secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.tlqp-boton--secundario:hover { background: var(--subrayador-suave); }
.tlqp-boton--texto { background: transparent; color: var(--tinta); padding-inline: var(--espacio-1); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tlqp-boton--texto:hover { background: var(--subrayador); color: var(--sobre-subrayador); text-decoration: none; }
.tlqp-boton:disabled, .tlqp-boton[aria-disabled="true"] { background: var(--superficie-hundida); color: var(--tinta-suave); border-color: var(--linea); cursor: not-allowed; }

/* ---- Campo --------------------------------------------------------------- */
.tlqp-campo { display: flex; flex-direction: column; gap: var(--espacio-2); max-width: 420px; }
.tlqp-campo__etiqueta { font: 760 17px/24px var(--font-sans); }
.tlqp-campo__ayuda { font-size: 15px; line-height: 22px; color: var(--tinta-suave); margin: 0; }
.tlqp-campo__caja { display: flex; align-items: center; min-height: 52px; border: var(--grosor-control) solid var(--linea-control); border-radius: var(--radio-m); background: var(--superficie); }
.tlqp-campo__caja:hover { border-color: var(--tinta); }
.tlqp-campo__caja:focus-within { border-color: var(--tinta); outline: var(--grosor-foco) solid var(--foco); outline-offset: 2px; }
.tlqp-campo__control { flex: 1; min-width: 0; height: 48px; padding: 0 var(--espacio-4); border: 0; background: transparent; color: var(--tinta); font: 450 17px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.tlqp-campo__control:focus-visible { outline: none; }
.tlqp-campo__control::placeholder { color: var(--tinta-suave); opacity: 1; }
.tlqp-campo__sufijo { padding-right: var(--espacio-4); font: 500 13px/18px var(--font-sans); color: var(--tinta-suave); white-space: nowrap; }
.tlqp-campo--error .tlqp-campo__caja { border-color: var(--estado-error); }
.tlqp-campo__error { margin: 0; font-size: 15px; line-height: 22px; font-weight: 650; color: var(--estado-error); }

/* ---- Campo de búsqueda: el de la lámina -----------------------------------
   Redondo del todo, con la lupa delante y la sombra suave de las tarjetas. Lo lleva cualquier `type="search"` dentro
   de un .tlqp-campo__caja (el buscador de coches); el del catálogo lo pinta impuestos.css con la misma lupa. */
:root { --lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E"); }
.tlqp-campo__caja:has(> input[type="search"]) { border-radius: var(--radio-pastilla); box-shadow: var(--sombra-tarjeta); }
.tlqp-campo__caja:has(> input[type="search"])::before { content: ""; flex: none; width: 20px; height: 20px; margin-left: var(--espacio-4); background: var(--tinta-suave); -webkit-mask: var(--lupa) center / contain no-repeat; mask: var(--lupa) center / contain no-repeat; }
.tlqp-campo__caja > input[type="search"] { padding-left: var(--espacio-3); }

/* ---- Opciones ------------------------------------------------------------ */
.tlqp-opciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.tlqp-opciones legend { padding: 0; margin-bottom: var(--espacio-3); font: 760 17px/24px var(--font-sans); }
.tlqp-opcion { position: relative; display: inline-flex; }
.tlqp-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tlqp-opcion span { display: inline-flex; align-items: center; min-height: var(--alto-control); padding: 10px var(--espacio-4); border: var(--grosor-control) solid var(--linea-control); border-radius: var(--radio-m); background: var(--superficie); font: 760 16px/20px var(--font-sans); }
.tlqp-opcion input:hover + span { border-color: var(--tinta); }
.tlqp-opcion input:checked + span { background: var(--subrayador); color: var(--sobre-subrayador); border-color: var(--sobre-subrayador); font-weight: 860; }
.tlqp-opcion input:checked + span::before { content: ""; width: 11px; height: 6px; margin: -3px 10px 0 0; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); }
.tlqp-opcion input:focus-visible + span { outline: var(--grosor-foco) solid var(--foco); outline-offset: 2px; }

/* ---- Desplegable --------------------------------------------------------- */
.tlqp-desplegable { border-top: var(--grosor-linea) solid var(--linea); }
.tlqp-desplegable:last-of-type { border-bottom: var(--grosor-linea) solid var(--linea); }
.tlqp-desplegable summary { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--espacio-4); min-height: 64px; padding: var(--espacio-3) 0; cursor: pointer; list-style: none; }
.tlqp-desplegable summary::-webkit-details-marker { display: none; }
.tlqp-desplegable summary::after { content: "+"; grid-row: 1 / span 2; grid-column: 2; font: 450 28px/1 var(--font-sans); width: 28px; text-align: center; }
.tlqp-desplegable[open] summary::after { content: "−"; }
.tlqp-desplegable__titulo { font: 760 17px/24px var(--font-sans); }
.tlqp-desplegable__supuesto { grid-column: 1; font: 500 13px/18px var(--font-sans); color: var(--tinta-suave); }
.tlqp-desplegable__cuerpo { padding: var(--espacio-2) 0 var(--espacio-6); display: grid; gap: var(--espacio-6); }

/* ---- Cifra de una vida --------------------------------------------------- */
.tlqp-cifra { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-4); }
.tlqp-cifra__valor { margin: 0; font: 860 clamp(52px, 12.5vw, 96px)/0.95 var(--font-sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tlqp-cifra__valor .tlqp-subrayado { --brocha-izq: 0.1em; --brocha-der: 0.16em; }
.tlqp-cifra__pie { margin: 0; max-width: 34ch; font: 450 22px/30px var(--font-sans); }

/* ---- Pastilla (chip) y nota de fuente -----------------------------------
   La pastilla de la lámina: redonda del todo, sobre gris claro, en letra de texto. Con data-familia, un punto de su color
   delante (como el punto verde de «Suscripciones» en la lámina, pero con el color que identifica la familia). */
.tlqp-chip { display: inline-flex; align-items: center; gap: 0.45em; min-height: 26px; padding: 3px 0.8em; border: var(--grosor-linea) solid transparent; border-radius: var(--radio-pastilla); background: var(--superficie-hundida); font: 760 12px/16px var(--font-sans); letter-spacing: 0.02em; color: var(--tinta-suave); }
.tlqp-chip[data-familia]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--familia); }
.tlqp-nota { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espacio-2) var(--espacio-3); margin: 0; font: 450 13px/18px var(--font-sans); color: var(--tinta-suave); }
.tlqp-nota a { color: var(--tinta); }

/* ---- Ticket ---------------------------------------------------------------
   El ticket del logo de la marca final: papel con un trazo de tinta (--trazo) y ONDAS arriba y abajo (antes, dientes en
   zigzag). La caja del medio (__borde) lleva el papel y los dos lados del trazo, y crece con lo que lleve dentro; arriba y
   abajo, una tira de SVG (__onda, de 2 trazos de alto más un píxel que pisa la caja, para que no se vea la junta) con la
   onda, las esquinas redondeadas y el principio de los lados: la de abajo es la de arriba volteada. Las pinta
   cliente/_marca/ondas.ts con la geometría del kit (amplitud 0,67 S, periodo de unos 2,46 S, la primera cresta a 0,78 S
   del lado y esquinas de 0,56 S, con S el trazo) a su ancho, y las repinta si cambia; al imprimir, el ticket del
   resultado, al ancho de su columna de papel. Son vectores: nítidos con cualquier zoom, y en el PDF salen como trazados.
   Sin JavaScript (o mientras no se han pintado), un marco liso con las esquinas redondeadas. La sombra es un drop-shadow:
   sigue las ondas. */
.tlqp-ticket { --trazo: 6px; --onda: calc(2 * var(--trazo)); position: relative; width: 100%; max-width: 360px; padding-block: var(--onda); filter: drop-shadow(0 7px 6px color-mix(in srgb, var(--fijo-tinta) 18%, transparent)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tlqp-ticket__onda { position: absolute; left: 0; display: block; width: 100%; height: calc(var(--onda) + 1px); overflow: visible; pointer-events: none; }
.tlqp-ticket__onda--arriba { top: 0; }
.tlqp-ticket__onda--abajo { bottom: 0; transform: scaleY(-1); }
.tlqp-ticket__onda-papel { fill: var(--superficie); stroke: none; }
.tlqp-ticket__onda-trazo { fill: none; stroke: var(--tinta); stroke-width: var(--trazo); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tlqp-ticket__borde { position: relative; border-inline: var(--trazo) solid var(--tinta); background: var(--superficie); }
/* Sin las ondas (sin JavaScript, o hasta que las pinta sitio.ts), un marco liso: los lados, los de siempre, y arriba y abajo
   un filete pintado con sombras, que no ocupa sitio. El papel y su marco no se mueven nada al llegar las ondas (las pruebas
   de /a-donde-van-tus-impuestos/ y de las fichas miran que la página no dé saltos). */
.tlqp-ticket:not([data-ondas]) > .tlqp-ticket__onda { display: none; }
.tlqp-ticket:not([data-ondas]) > .tlqp-ticket__borde { box-shadow: 0 calc(-1 * var(--trazo)) 0 var(--tinta), 0 var(--trazo) 0 var(--tinta); }
.tlqp-ticket__papel { padding: var(--espacio-4) var(--espacio-5) var(--espacio-5); color: var(--tinta); font: 400 15px/22px var(--font-mono); }
.tlqp-ticket__cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-3); margin: 0 0 var(--espacio-4); font: 450 20px/1 var(--font-sans); letter-spacing: -0.02em; }
.tlqp-ticket__cabecera small { font: 500 12px/16px var(--font-mono); letter-spacing: 0; color: var(--tinta-suave); }
.tlqp-ticket__lista { margin: 0; padding: 0; list-style: none; }
.tlqp-ticket__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-4); padding: 5px 0; }
.tlqp-ticket__fila > :last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tlqp-ticket__fila--aparte { color: var(--tinta-suave); }
.tlqp-ticket__corte { height: 0; margin: var(--espacio-3) 0; border: 0; border-top: 2px dashed var(--tinta); }
.tlqp-ticket__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-4); margin: 0; font: 700 20px/26px var(--font-mono); }
.tlqp-ticket__total .tlqp-subrayado { --brocha-izq: 0.1em; --brocha-der: 0.16em; font-weight: 760; white-space: nowrap; }
.tlqp-ticket__nota { margin: var(--espacio-4) 0 0; font: 400 12px/17px var(--font-mono); color: var(--tinta-suave); }
/* El ticket amarillo del kit (TicketAmarillo.astro): la cifra que importa de una página. Papel amarillo, contorno y letra
   en tinta en los dos temas (sobre amarillo manda la tinta), Albert Sans y no Geist Mono (no es un ticket de desglose:
   es el de «El ticket dice cuánto»), con el trazo del kit para su tamaño (4 px en una tarjeta). Ocupa su columna entera;
   `--giro` lo inclina como pegado a mano. */
.tlqp-ticket--amarillo { --trazo: 4px; max-width: none; color: var(--fijo-tinta); filter: drop-shadow(0 6px 5px color-mix(in srgb, var(--fijo-tinta) 16%, transparent)); }
.tlqp-ticket--amarillo .tlqp-ticket__onda-papel { fill: var(--subrayador); }
.tlqp-ticket--amarillo .tlqp-ticket__onda-trazo { stroke: var(--fijo-tinta); }
.tlqp-ticket--amarillo > .tlqp-ticket__borde { border-color: var(--fijo-tinta); background: var(--subrayador); }
.tlqp-ticket--amarillo:not([data-ondas]) > .tlqp-ticket__borde { box-shadow: 0 calc(-1 * var(--trazo)) 0 var(--fijo-tinta), 0 var(--trazo) 0 var(--fijo-tinta); }
.tlqp-ticket--amarillo .tlqp-ticket__papel { display: grid; gap: var(--espacio-2); padding: var(--espacio-3) var(--espacio-5) var(--espacio-4); color: var(--fijo-tinta); font: var(--tipo-cuerpo); }
.tlqp-ticket--amarillo .tlqp-ticket__papel > * { margin: 0; }
.tlqp-ticket--amarillo .tlqp-ticket__papel a { color: var(--fijo-tinta); }
.tlqp-ticket--amarillo .tlqp-ticket__papel a:hover { background: var(--fijo-tinta); color: var(--subrayador); }
.tlqp-ticket__rotulo { padding-bottom: var(--espacio-2); border-bottom: 3px solid var(--fijo-tinta); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; }
.tlqp-ticket--girado { transform: rotate(var(--giro, -1.5deg)); }
/* El foco, en tinta: en el tema oscuro el anillo de siempre es amarillo y se perdía sobre el papel amarillo. */
.tlqp-ticket--amarillo :focus-visible { outline-color: var(--fijo-tinta); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .tlqp-ticket--amarillo { filter: none; } }
:root[data-tema="oscuro"] .tlqp-ticket--amarillo { filter: none; }

/* ---- Franja apilada: capas y grupos ------------------------------------- */
.tlqp-franja { display: grid; gap: var(--espacio-4); }
.tlqp-franja__barra { display: flex; gap: 2px; height: 32px; }
.tlqp-franja__tramo { min-width: 6px; }
.tlqp-franja__tramo:first-child { border-radius: 4px 0 0 4px; }
.tlqp-franja__tramo:last-child { border-radius: 0 4px 4px 0; }
.tlqp-franja__leyenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--espacio-4) var(--espacio-6); margin: 0; padding: 0; list-style: none; }
.tlqp-franja__item { display: grid; grid-template-columns: 14px 1fr; column-gap: var(--espacio-2); align-items: start; }
.tlqp-franja__muestra { width: 14px; height: 14px; margin-top: 9px; }
.tlqp-franja__pct { display: block; font: 860 30px/32px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.tlqp-franja__nombre { display: block; font: 450 15px/21px var(--font-sans); color: var(--tinta-suave); }
.tlqp--capa-precios { background: var(--capa-precios); }
.tlqp--capa-nomina { background: var(--capa-nomina); }
.tlqp--capa-recibo { background: var(--capa-recibo); }
.tlqp--grupo-trabajo { background: var(--grupo-trabajo); }
.tlqp--grupo-consumo { background: var(--grupo-consumo); }
.tlqp--grupo-bienes { background: var(--grupo-bienes); }
.tlqp--grupo-resto { background: var(--grupo-resto); }

/* ---- Filas de barras: familias y comparativas --------------------------- */
.tlqp-barras { display: grid; gap: var(--espacio-3); margin: 0; padding: 0; list-style: none; }
.tlqp-barras__fila { display: grid; grid-template-columns: minmax(110px, 190px) minmax(40px, 1fr) minmax(84px, auto); align-items: center; column-gap: var(--espacio-3); }
.tlqp-barras__nombre { font: 450 15px/20px var(--font-sans); }
.tlqp-barras__nota { display: block; margin-top: 2px; font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }
.tlqp-barras__fila--tu .tlqp-barras__nota { font-weight: 450; }
.tlqp-barras__pista { height: 16px; }
.tlqp-barras__barra { height: 100%; min-width: 2px; background: var(--tinta); border-radius: 0 4px 4px 0; }
/* Una barra negativa sale del cero hacia la izquierda: el redondeo, del otro lado (Barras.astro le pone la clase). */
.tlqp-barras__barra--negativa { border-radius: 4px 0 0 4px; }
.tlqp-barras__valor { font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tlqp-barras__fila--contexto .tlqp-barras__barra { background: var(--dato-neutro); }
.tlqp-barras__fila--tu .tlqp-barras__pista { height: 24px; }
.tlqp-barras__fila--tu .tlqp-barras__barra { background: var(--subrayador); border: var(--grosor-control) solid var(--sobre-subrayador); border-left: 0; }
.tlqp-barras__fila--tu .tlqp-barras__nombre, .tlqp-barras__fila--tu .tlqp-barras__valor { font-weight: 860; }
.tlqp-barras__fila--aparte .tlqp-barras__barra { background: repeating-linear-gradient(135deg, var(--tinta-suave) 0 2px, transparent 2px 6px); border: 1px solid var(--tinta-suave); border-left: 0; }
.tlqp-barras__fila--aparte .tlqp-barras__nombre { color: var(--tinta-suave); }
@media (max-width: 420px) { .tlqp-barras__fila { grid-template-columns: 1fr auto; row-gap: 4px; } .tlqp-barras__pista { grid-column: 1 / -1; grid-row: 2; } }

/* ---- Tarjeta para compartir --------------------------------------------- */
.tlqp-tarjeta { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 320px; aspect-ratio: 4 / 5; padding: 28px; overflow: hidden; background: var(--fijo-tinta); color: var(--fijo-papel); font-family: var(--font-sans); }
.tlqp-tarjeta--papel { background: var(--fijo-papel); color: var(--fijo-tinta); }
.tlqp-tarjeta__marca { font-size: 19px; line-height: 1; }
.tlqp-tarjeta__marca img { display: block; height: 28px; width: auto; }
.tlqp-tarjeta__antetitulo { margin: 0 0 10px; font: 450 17px/22px var(--font-sans); }
.tlqp-tarjeta__cifra { margin: 0; font: 860 54px/0.95 var(--font-sans); letter-spacing: -0.03em; white-space: nowrap; }
.tlqp-tarjeta__cifra .tlqp-subrayado { --brocha-izq: 0.1em; --brocha-der: 0.16em; }
.tlqp-tarjeta__frase { margin: 14px 0 0; font: 450 17px/22px var(--font-sans); }
.tlqp-tarjeta__pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font: 500 11px/15px var(--font-sans); }
.tlqp-tarjeta__pie > span { flex: none; }
.tlqp-tarjeta__pie > span:first-child { opacity: 0.8; }
.tlqp-tarjeta__llamada { font: 860 15px/1 var(--font-sans); white-space: nowrap; }

/* ---- Pie: negro fijo, con el logo en negativo ---------------------------- */
.tlqp-pie { display: grid; gap: var(--espacio-6); padding: var(--espacio-10) var(--espacio-6) var(--espacio-8); background: var(--fijo-tinta); color: var(--fijo-papel); border-top: var(--grosor-linea) solid var(--linea); }
.tlqp-pie :focus-visible { outline-color: var(--subrayador); }
.tlqp-pie__marca { font-size: 22px; line-height: 1; }
.tlqp-pie__marca img { display: block; width: auto; height: 40px; }
.tlqp-pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-6); margin: 0; padding: 0; list-style: none; font: 760 15px/22px var(--font-sans); }
.tlqp-pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espacio-2) var(--espacio-6); margin: 0; font: 450 13px/18px var(--font-sans); }
.tlqp-pie__legal > span { opacity: 0.8; }

@media (prefers-reduced-motion: no-preference) {
  .tlqp-boton, .tlqp-opcion span, .tlqp-campo__caja { transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; }
}

/* ---- La palabra en texto vivo (la cabecera del ticket del resultado) -----
   Como el logo: las dos partes en ExtraBold y juntas, «pagas» sobre la brocha. Fuera del ticket, el logo va en imagen
   (marca/*.svg). */
.tlqp-palabra { font-family: var(--font-sans); font-weight: 860; letter-spacing: -0.02em; white-space: nowrap; }
.tlqp-palabra b { --brocha-color: var(--subrayador); padding: 0 0.12em 0 0.06em; margin: 0 -0.12em 0 0; background: var(--brocha-amarilla-izquierda) left 0 top 0.12em / var(--brocha-punta) var(--brocha-alto) no-repeat, var(--brocha-amarilla-derecha) right 0 top 0.12em / var(--brocha-punta) var(--brocha-alto) no-repeat, var(--brocha-amarilla-centro) 50% 0.12em / calc(100% - 2 * var(--brocha-punta) + 0.015em) var(--brocha-alto) no-repeat; color: var(--sobre-subrayador); font-weight: 860; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ---- Bloque de texto para copiar (la cita y el código del enlace de /prensa/, el código para insertar una gráfica) ----- */
.copiable { display: grid; gap: var(--espacio-3); justify-items: start; max-width: var(--ancho-lectura); }
.copiable__texto { width: 100%; margin: 0; padding: var(--espacio-4) var(--espacio-5); border: var(--grosor-linea) solid var(--linea-control); border-radius: var(--radio-m); background: var(--superficie); font: 450 15px/23px var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.copiable__texto code { font: inherit; }
.copiable__aviso { font: var(--tipo-nota); color: var(--tinta-suave); }

/* ---- El tique de la calculadora y de la portada (venía de calculadora.css): el mismo en las páginas con «Ver mi cifra en la
   web» (App\Web\MiCifra). Todos los tiques con tus cifras llevan estas medidas. ---- */
.calc-panel__cifra { margin: 0; font: 860 min(56px, 16cqi)/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-panel__pie { margin: 0; font: var(--tipo-cuerpo-pequeno); }
.calc-tique { max-width: 440px; }
.calc-tique .tlqp-ticket__papel { display: grid; gap: var(--espacio-4); padding: var(--espacio-4) clamp(12px, 4.5vw, 20px) var(--espacio-5); container-type: inline-size; }
.calc-tique .tlqp-ticket__papel > * { min-width: 0; margin: 0; }
.calc-tique p { margin: 0; }
/* La cabecera, como la de un comercio: la marca y qué es, en el centro; la fecha y la base, a los lados. */
.calc-tique__cabecera { display: grid; gap: var(--espacio-1); justify-items: center; padding-bottom: var(--espacio-3); border-bottom: 2px dashed var(--tinta); text-align: center; }
.calc-tique__marca { display: inline-flex; align-items: center; gap: var(--espacio-2); font-size: 22px; line-height: 28px; }
/* El ticket del logo (cliente/_marca/isotipo.tsx y components/TicketMarca.astro), con el papel del color del ticket. */
.calc-tique__isotipo { flex: none; width: 19px; height: 22px; overflow: visible; }
.calc-tique__rotulo { font: 600 13px/18px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; text-wrap: balance; }
.calc-tique__rotulo .tlqp-etiqueta { font-family: var(--font-mono); color: var(--tinta); }
.calc-tique__datos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--espacio-4); width: 100%; padding-top: var(--espacio-2); font: var(--tipo-dato); color: var(--tinta-suave); }
/* Las líneas: concepto e importe, en mono y con cifras tabulares. Un nombre largo parte en dos renglones y su importe
   se apoya en el último, como en un tique. */
.calc-tique__tabla { width: 100%; table-layout: fixed; font: var(--tipo-ticket-linea); font-variant-numeric: tabular-nums; }
/* La columna de los importes mide lo que el más largo (Tique.tsx la da en `--ancho-importe`), más su separación. */
.calc-tique__col-importe { width: calc(var(--ancho-importe, 11ch) + var(--espacio-3) + 2px); }
.calc-tique__tabla :is(th, td) { padding: 3px 0; border: 0; font-weight: 450; text-align: left; vertical-align: bottom; overflow-wrap: break-word; }
.calc-tique__tabla td { padding-left: var(--espacio-3); text-align: right; white-space: nowrap; }
.calc-tique__tabla thead th { padding-bottom: var(--espacio-2); font: var(--tipo-dato); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); }
.calc-tique__tabla thead th:last-child { text-align: right; }
.calc-tique__apartado th { padding-top: var(--espacio-4); font: 600 13px/18px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.calc-tique__tabla tbody:first-of-type .calc-tique__apartado th { padding-top: var(--espacio-2); }
.calc-tique__subtotal :is(th, td) { padding-top: 5px; font-weight: 650; }
.calc-tique__subtotal th { text-align: right; }
.calc-tique__subtotal td { background-image: linear-gradient(to right, var(--linea-control) 50%, transparent 50%); background-size: 6px 1px; background-repeat: repeat-x; background-position: 0 0; }
.calc-tique__redondeo :is(th, td) { padding-top: var(--espacio-2); color: var(--tinta-suave); }
/* El total: TOTAL a la izquierda y el importe subrayado a la derecha, tras la línea de corte. */
.calc-tique__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--espacio-1) var(--espacio-3); padding-top: var(--espacio-3); border-top: 2px dashed var(--tinta); font: var(--tipo-ticket-total); font-size: 22px; line-height: 30px; font-variant-numeric: tabular-nums; }
.calc-tique__total-rotulo { text-transform: uppercase; }
.calc-tique__total small { display: block; font: var(--tipo-dato); text-transform: none; color: var(--tinta-suave); }
.calc-tique__total .tlqp-subrayado { --brocha-izq: 0.1em; --brocha-der: 0.16em; font-weight: 760; white-space: nowrap; }
/* Este año y lo de aparte: renglones como los de arriba, entre líneas de corte, que no suman. */
.calc-tique :is(.calc-tique__anio, .calc-tique__aparte) { display: grid; gap: 2px; padding-top: var(--espacio-3); border-top: 2px dashed var(--tinta); font: var(--tipo-ticket-linea); font-variant-numeric: tabular-nums; }
.calc-tique :is(.calc-tique__anio, .calc-tique__aparte) > div { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--espacio-3); }
.calc-tique :is(.calc-tique__anio, .calc-tique__aparte) :is(dt, dd) { margin: 0; }
.calc-tique :is(.calc-tique__anio, .calc-tique__aparte) dd { white-space: nowrap; }
.calc-tique__anio > div:first-child { font-weight: 760; }
.calc-tique__anio small, .calc-tique__aparte small { font: var(--tipo-dato); color: var(--tinta-suave); white-space: nowrap; }
.calc-tique__mes { padding-left: var(--espacio-4); color: var(--tinta-suave); }
.calc-tique__aparte { color: var(--tinta-suave); border-top-color: var(--linea-control) !important; border-top-width: var(--grosor-linea) !important; }
.calc-tique__pie { padding-top: var(--espacio-3); border-top: 2px dashed var(--tinta); font: 600 14px/20px var(--font-mono); text-align: center; text-wrap: balance; }
.calc-tique__nota { font: 400 12px/17px var(--font-mono); color: var(--tinta-suave); }
/* Quién ingresa cada línea de «Trabajo» (desglose.ts): debajo del nombre, pequeña. */
.calc-tique__quien { display: block; font: 400 11.5px/15px var(--font-mono); color: var(--tinta-suave); }
/* El del contador: más apretado (va fijo a la derecha mientras se responde y tiene que caber en la ventana), con el
   rótulo y la fecha en un renglón y el total grande, con su frase, entre los renglones y este año. */
.calc-tique--resumen { max-width: none; }
.calc-tique--resumen .tlqp-ticket__papel { gap: var(--espacio-3); padding-block: var(--espacio-3) var(--espacio-4); }
.calc-tique--resumen .calc-tique__cabecera { padding-bottom: var(--espacio-2); }
.calc-tique--resumen .calc-tique__datos { align-items: baseline; padding-top: var(--espacio-1); }
.calc-tique--resumen .calc-tique__datos .calc-tique__rotulo { font-size: 12px; line-height: 16px; color: var(--tinta); text-align: left; }
.calc-tique--resumen .calc-tique__tabla :is(th, td) { padding-block: 2px; }
.calc-tique--resumen .calc-panel__pie { font: var(--tipo-nota); }
/* En una ventana baja (un portátil con la barra del navegador), lo prescindible del contador se va: así el botón se ve. */
@media (min-width: 60em) and (max-height: 800px) {
  .calc-tique--resumen :is(.calc-tique__mes, .calc-tique__nota:not([data-prueba])) { display: none; }
  .calc-tique--resumen .calc-panel__cifra { font-size: min(44px, 14cqi); }
  .calc-tique--resumen .calc-tique__tabla :is(th, td) { padding-block: 1px; }
  .calc-panel__caja { gap: var(--espacio-3); }
}
/* Y si aun así no cabe, deja de ir fijo: se lee entero bajando la página. */
@media (min-width: 60em) and (max-height: 620px) {
  .calc-panel { position: static; }
}
.calc-tique--resumen .calc-tique__total--grande { display: grid; justify-content: stretch; gap: var(--espacio-1); }
.calc-tique--resumen .calc-tique__total-rotulo { font: var(--tipo-ticket-total); }
.calc-tique--resumen .calc-tique__anio { padding-top: var(--espacio-3); }
/* En una pantalla ancha con el tique estrecho (el contador y el resultado a 1.024 px), la letra de las líneas un poco más
   pequeña: con la de siempre, el concepto y su importe no caben en un renglón. (El papel es contenedor: se mide él.) */
@media screen and (min-width: 60em) {
  @container (max-width: 320px) {
    .calc-tique__tabla, .calc-tique :is(.calc-tique__anio, .calc-tique__aparte) { font-size: 13px; line-height: 19px; }
  }
}
/* En un móvil estrecho, la letra de las líneas un punto más pequeña: caben más conceptos en un renglón. */
@media (max-width: 25em) {
  .calc-tique__tabla, .calc-tique :is(.calc-tique__anio, .calc-tique__aparte) { font-size: 14px; line-height: 20px; }
  .calc-tique__total { font-size: 19px; line-height: 26px; }
}