/* Report components: the visual pieces of the pillar guides and of any public page that explains with figures
   (identidad-visual.md). Loaded after kuotia-blog.css on articles (base_blog.html), so these rules keep their
   precedence over the article's own list styles, and on their own on other pages (calculadora de cuota).
   Tokens from kuotia-site.css; light and dark follow automatically. */
/* ───────────── Report components (pillar guides, calculators) ─────────────
   - .kstat: quotable figures, one .kstat-i per figure (<b> figure, <span> what it is, <a> official source).
   - .kled: an example as a visual ledger, .kled-r rows with an icon tile, name, base, IVA and casilla chips (.kf-c).
   - .kprof / .kout: cards with an icon tile (_i.html), a title, casilla chips and one line.
   - .kerr: common mistakes, icon + the mistake + "Cómo evitarlo".
   - .krec: horizontal bars for the late-filing recargo (width = % / 15).
   - .knew: dated changes, a date badge and the change.
   - .kpv: a portal view (public/pv/) inside the article, with its copy.
   - .kclu: the cluster around a pillar guide, link cards with an icon.
   - .kyr: a cumulative return over the year's four quarters (the 130 guide): a real table, one column per quarter,
     casilla chips, sub-rows (.kyr-sub), negatives (.is-neg), the result with a word tag (.kyr-tag), carry markers
     (.kyr-m) explained in .kyr-notes, and the cumulative paid amount as bars that grow with it (.kyr-paid).
     A quarter with nothing to file is muted (td.is-off, the 111 guide).
   - .kdual: two parallel lives that meet once (the autónomo y asalariado guide): two cards (.kdual-col, the second
     .is-act) with dt/dd rows and a joining bar (.kdual-join) under a bracket; plays once with [data-play].
   - .kcap: stacked bars against a limit (the pluriactividad refund): each .kcap-r is a label, a track with
     segments (i.is-sal, i.is-cuo; widths from the figures) and the result; the limit is --lim on .kcap, drawn as a
     dashed line on every track, and the legend (.kcap-key) names each colour. Grows once with [data-play].
   - .ksum: a worked calculation as a receipt, one row per step with its operator, subtotals (.is-sub) and the
     result (.is-res).
   From the carta de Hacienda guide:
   - .kladder: steps that get more serious (kinds of letter), one card per step on a rail that goes from blue to
     amber to red; .lv-1 to .lv-6 colour the tile and the deadline chip (.kladder-t); .kladder-do is what you do.
   - .kcal: a deadline counted on a calendar, 7 columns of day cells (.kcal-d) with states: weekend (.is-we),
     arrival or any other marked day (.is-arr, with .k-arr in the legend), opened (.is-open), counted working day with its number in <em> (.is-n), last day (.is-end),
     natural days running (.is-nat, an amber underline) and a second last day (.is-end2); the legend (.kcal-key)
     names each mark in words.
   - .kfork: two roads side by side (.kfork-cols with two .ksum, the second .kfork-b in red) and what each costs as
     two bars (.kfork-bars, widths from the figures) that grow once with [data-play].
   From the modelo 036 guide:
   - .klife: one census declaration across a working life, three stages on a line that fills once with [data-play]
     (.klife-s: a node with its icon, the stage, casilla chips and the deadline in .kdue; the middle one is .is-mid).
   - .kmap: what a declaration sets in motion, one row per casilla (.kmap-c, a kf-c chip and its name), an arrow and the
     returns it leads to (.kmap-m, the second .is-yr for annual ones); a blank casilla row is .is-off. Rows rise in
     turn with [data-play].
   - .kdue: a deadline chip for any card: .is-now red (Antes), .is-soon amber (En un mes), .is-dec and .is-any muted
     (En diciembre, Cuando cambien). .kmap-key in .kmap-h names the three card styles (quarterly, yearly, dashed .is-none
     for what changes without a return).
   - .kb-lanes: the comparison lanes (kuotia-site.css, used with .cmp for their colours and Tú / Tu gestor chips)
     inside an article column, with the row name stacked on top.
   From the modelo 347 guide:
   - .kcap also measures each client or supplier against the 3.005,06 € line (base and IVA as the two segments, up to five
     rows); .kf-c.kf-no is the chip for what stays out of a return, muted and with its word.
   From the darse de baja guide:
   - .ktl: what follows a date, as a dated timeline: one row per step (.ktl-r) with its date (<time class="ktl-d">, day
     in <b>, month and year in <small>), a node on a vertical rail that fills once with [data-play] and a card (.ktl-c)
     with who it is for in words (.ktl-org), what to do and, optionally, the returns as kf-c chips. Blue is the default
     (Hacienda); .is-ss is amber (Seguridad Social, as the cuota in the calculators) and .is-you neutral (your own step).
     .is-later makes a row dashed (what comes later, without a fixed day), on top of its organism colour. The rail is
     drawn per row from node to node, so it stops at the last one, dashed into a .is-later row, and fills row by row
     with [data-play]. .is-key marks a deadline card. The legend (.ktl-key) names the colours.
   - .krec.is-acc: the .krec bars in the accent blue, for a scale that is not a cost (months of a benefit).
   - .lane.is-us.is-ss: a comparison lane in the Seguridad Social amber, next to a blue Hacienda lane.
   From the factura rectificativa guide:
   - .kled-r.is-neg: a ledger row that subtracts (a rectificativa in casillas 14 and 15), its amounts in amber like the
     negatives of .kyr.
   - .af-box.af-neg: a negative amount in a drawn form or invoice (public/_factura_rect.html), in the same amber; the minus
     sign is always written.
   From the cuota de autónomos guide:
   - .ktramo: the RETA tramos as a real table (template tag reta_table): a group row per table (.ktramo-g), the example's
     row marked with a word chip (.is-mine, .ktramo-you), and the cuota as a bar from 0 to the minimum (solid amber, the
     Seguridad Social colour) extended to the tramo's maximum (pale), widths from the figures (--w, --wmax). Under 600 px
     each row becomes a card with the bar across it.
   - .kwin: the six windows to change the base de cotización (from the calculator's .cq-win), one card per window with
     the date it takes effect on top; .is-next marks one in words.
   - .acn.acn-ss: a Seguridad Social letter drawn with the .acn-* pieces (public/_tgss_regularizacion.html), amber rule
     under the header; .acn-fig is a block of figures inside it (dt/dd rows, the result in .is-res).
   From the recibo de autónomos guide:
   - .af-rr: a drawn Seguridad Social receipt (public/_recibo_reta.html); on a phone its result strip stacks the amount and
     the chip under the label, left-aligned.
   From the VeriFactu guide:
   - .kchain: records chained by their hash, one card per record (.kchain-r: number, date and total, the previous hash in
     .kchain-p and its own in .kchain-h2, monospaced) joined by arrows, three in a row (stacked with down arrows on a
     phone); .is-bad is the full-width card of an edited record whose new hash breaks the chain (.kchain-x says so in
     words, in red). Cards rise in turn with [data-play].
   - .af-vf: a VeriFactu invoice (public/_factura_vf.html): the QR and the VERI*FACTU phrase in the header (.af-qrb), the
     hashes as short monospaced boxes (.af-hash) and the record block (.af-sec-rec) on the muted surface, since it is not
     printed. */
.kc-tile { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
.kc-tile .pv-i { width: 18px; height: 18px; }
.kc-tile.is-warn { background: var(--warn-soft); color: #8a5300; }
.kc-tile.is-bad { background: var(--danger-soft); color: #a32a19; }
:root[data-theme="dark"] .kc-tile.is-warn { color: #f0b552; }
:root[data-theme="dark"] .kc-tile.is-bad { color: #f59585; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kc-tile.is-warn { color: #f0b552; }
  :root:not([data-theme="light"]) .kc-tile.is-bad { color: #f59585; }
}
.kchips { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.kstat { list-style: none; margin: 1.6em 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kstat-i { margin: 0 !important; padding: 16px 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.kstat-i b { font-size: 1.875rem; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.kstat-i span { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink); }
.kstat-i a { margin-top: auto; padding-top: 8px; font-size: 11.5px; font-weight: 500; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.kstat-i a:hover { color: var(--accent-ink); }

.kled { margin: 1.4em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; font-size: var(--fs-sm); }
.kled-h { display: grid; grid-template-columns: 36px minmax(0, 1fr) 6.4rem 5.6rem 5.6rem; gap: 12px; align-items: end; padding: 12px 16px 8px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.kled-h > :nth-child(n+2) { text-align: right; }
.kled-h > b { grid-column: 1 / 3; color: var(--ink); font-size: var(--fs-sm); }
.kled-r { display: grid; grid-template-columns: 36px minmax(0, 1fr) 6.4rem 5.6rem 5.6rem; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); margin: 0 !important; }
.kled-n { min-width: 0; line-height: 1.35; }
.kled-n b { display: block; color: var(--ink); font-weight: 600; }
.kled-n small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.kled-r > .kled-m { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.kled-r > .kled-m.is-zero { color: var(--muted); }
.kled-r > .kchips { justify-content: flex-end; }
.kled-t { background: var(--surface-2); }
.kled-t .kled-n b { font-weight: 700; }
.kled-t > .kled-m { font-weight: 700; }
.kled-note { margin: 0 !important; padding: 10px 16px 12px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

.kprof, .kout, .kerr, .kclu { list-style: none; margin: 1.4em 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kprof li, .kout li, .kerr li { margin: 0 !important; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; align-content: start; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.kprof li > .kc-tile, .kout li > .kc-tile, .kerr li > .kc-tile { grid-row: 1 / span 3; }
.kprof b, .kout b, .kerr b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); line-height: 1.35; }
.kprof .kchips, .kout .kchips { margin-top: 4px; }
.kerr li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kerr li em { font-style: normal; display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line-strong); color: var(--ink); }
.kerr li em::before { content: "Cómo evitarlo: "; font-weight: 650; color: var(--success); }
.kout li.is-pay { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }

.krec { margin: 1.4em 0 !important; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.krec-h { margin: 0 0 10px !important; display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); color: var(--muted); }
.krec-h b { color: var(--ink); font-weight: 650; }
.krec-r { display: grid; grid-template-columns: 11em minmax(0, 1fr) 11.5em; gap: 10px; align-items: center; padding: 4px 0; margin: 0 !important; font-size: var(--fs-sm); color: var(--ink-2); }
.krec-t { height: 12px; border-radius: 0 4px 4px 0; background: var(--bg-soft); position: relative; overflow: hidden; }
.krec-t i { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; background: color-mix(in srgb, #d98e04 70%, var(--surface)); }
.krec-r b { text-align: right; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.krec-r.is-bad .krec-t i { background: color-mix(in srgb, #d0432d 75%, var(--surface)); }
.krec-foot { margin: 10px 0 0 !important; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

.knew { list-style: none; margin: 1.4em 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.knew li { margin: 0 !important; display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.knew time { display: block; padding: 6px 4px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: var(--fs-xs); text-align: center; line-height: 1.3; }
.knew b { display: block; color: var(--ink); font-weight: 650; font-size: var(--fs-base); }

.kpv { margin: 2em 0 !important; padding: 22px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); }
.kb-content .pv li { margin-top: 0; padding-left: 0; }
.kpv-copy { margin: 0 0 16px !important; font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); }
.kpv-copy b { color: var(--ink); }
.kpv-label { display: block; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-ink); }

.kclu li { margin: 0 !important; }
.kb-content .kclu a { height: 100%; display: grid; align-content: start; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; font-weight: 400; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; transition: border-color .15s, background-color .15s; }
.kb-content .kclu a:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.kclu a > .kc-tile { grid-row: 1 / span 2; }
.kclu a b { color: var(--ink); font-weight: 650; }
.kclu a:hover b { color: var(--accent-ink); }


.kyr { margin: 1.6em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.kyr-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); }
.kyr-h b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.kb-content .kyr-t { width: 100%; margin: 0 !important; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.35; font-variant-numeric: tabular-nums; table-layout: fixed; }
.kyr-t col.kyr-cl { width: 40%; }
.kyr-t th, .kyr-t td { padding: 7px 16px 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; color: var(--ink); font-weight: 400; }
.kyr-t th[scope="row"] { text-align: left; white-space: normal; padding-left: 16px; color: var(--ink-2); }
.kyr-t th[scope="row"] .kf-c { display: inline-block; margin-right: 8px; min-width: 30px; }
.kyr-t thead th { padding-top: 10px; padding-bottom: 8px; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); border-bottom-color: var(--line-strong); }
.kyr-t thead th:first-child { text-align: left; padding-left: 16px; }
.kyr-t thead small { display: block; font-weight: 500; }
.kyr-g th { padding: 12px 16px 5px !important; text-align: left !important; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-ink) !important; border-bottom-color: transparent; }
.kyr-sub th[scope="row"], .kyr-sub td { font-size: var(--fs-xs); color: var(--muted); padding-top: 3px; padding-bottom: 3px; }
.kyr-sub th[scope="row"] { padding-left: 54px; }
.kyr-key td { font-weight: 650; }
.kyr-t td.is-neg { color: #8a5300; background: var(--warn-soft); font-weight: 650; }
.kyr-t td.is-carry { background: var(--accent-soft); font-weight: 650; color: var(--accent-ink); }
.kyr-m { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; vertical-align: 1px; }
.kyr-res th[scope="row"], .kyr-res td { border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 10px; padding-bottom: 10px; background: var(--surface-2); }
.kyr-res td b { display: block; font-size: var(--fs-base); font-weight: 700; color: var(--ink); }
.kyr-tag { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface); }
.kyr-tag.is-pay { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.kyr-tag.is-ded { color: #8a5300; border-color: color-mix(in srgb, #d98e04 45%, var(--line)); }
.kyr-paid td { vertical-align: bottom; padding-top: 12px; border-bottom: 0; }
.kyr-paid th[scope="row"] { vertical-align: bottom; border-bottom: 0; padding-top: 12px; }
.kyr-bar { display: block; height: 8px; margin: 0 0 5px auto; border-radius: 4px; background: var(--accent); transform-origin: 100% 50%; }
.kyr-bar.is-flat { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 8px); }
.kyr-paid b { font-weight: 700; }
.kyr-notes { list-style: none; margin: 0 !important; padding: 12px 16px 14px !important; display: grid; gap: 6px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-2); }
.kyr-notes li { margin: 0 !important; padding: 0 0 0 24px; position: relative; }
.kyr-notes .kyr-m { position: absolute; left: 0; top: 1px; margin: 0; }
:root[data-theme="dark"] .kyr-t td.is-neg, :root[data-theme="dark"] .kyr-tag.is-ded { color: #f0b552; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kyr-t td.is-neg, :root:not([data-theme="light"]) .kyr-tag.is-ded { color: #f0b552; }
}

@media (max-width: 600px) {
  .kyr-h { padding: 12px 12px 10px; }
  .kb-content .kyr-t { font-size: var(--fs-xs); }
  .kyr-t col.kyr-cl { width: 34%; }
  .kyr-t th, .kyr-t td { padding: 6px 6px 6px 2px; }
  .kyr-t th[scope="row"] { padding-left: 10px; }
  .kyr-t thead th:first-child { padding-left: 10px; }
  .kyr-t th[scope="row"] .kf-c { display: block; width: max-content; margin: 0 0 2px; min-width: 0; }
  .kyr-sub th[scope="row"] { padding-left: 10px; }
  .kyr-res td b { font-size: var(--fs-sm); }
  .kyr-tag { padding: 1px 5px; font-size: 10px; }
  .kyr-m { width: 14px; height: 14px; margin-left: 2px; font-size: 9px; }
  .kyr-notes { padding: 10px 12px 12px !important; }
  .kstat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kstat-i b { font-size: 1.625rem; }
  .kled-h { grid-template-columns: 32px minmax(0, 1fr) 6rem 5rem; gap: 4px 8px; padding: 10px 12px 8px; }
  .kled-h > b { grid-column: 1 / -1; }
  .kled-h > .kled-hb { grid-column: 3; }
  .kled-h > .kled-hv { grid-column: 4; }
  .kled-h > .kled-hc { display: none; }
  .kled-r { grid-template-columns: 32px minmax(0, 1fr) 6rem 5rem; gap: 4px 8px; padding: 10px 12px; }
  .kled-r > .kc-tile { grid-row: 1 / span 2; width: 32px; height: 32px; }
  .kled-n { grid-column: 2 / -1; }
  .kled-r > .kled-m { grid-row: 2; }
  .kled-r > .kled-b { grid-column: 3; }
  .kled-r > .kled-v { grid-column: 4; }
  .kled-r > .kchips { grid-row: 2; grid-column: 2; justify-content: flex-start; }
  .kprof, .kout, .kerr, .kclu { grid-template-columns: minmax(0, 1fr); }
  .krec { padding: 14px 12px 12px; }
  .krec-r { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 5px 0; font-size: var(--fs-xs); }
  .krec-t { grid-column: 1 / -1; grid-row: 2; }
  .krec-h { flex-direction: column; gap: 2px; }
  .knew li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .knew time { justify-self: start; padding: 3px 10px; }
  .kpv { padding: 16px 12px; }
}

/* ── .kdual, .kcap, .ksum (first used in the autónomo y asalariado guide) ── */
.kdual { position: relative; margin: 1.6em 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kdual-col { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.kdual-col.is-act { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.kdual-h { margin: 0 0 10px !important; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; align-items: center; line-height: 1.25; }
.kdual-h .kc-tile { grid-row: span 2; }
.kdual-h b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.kdual-h small { color: var(--muted); font-size: var(--fs-xs); }
.kdual-rows { margin: 0 !important; }
.kdual-rows > div { padding: 9px 0 8px; border-top: 1px dashed var(--line-strong); }
.kdual-rows dt { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.kdual-rows dd { margin: 2px 0 0 !important; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); }
.kdual-join { grid-column: 1 / -1; position: relative; margin: 26px 0 0 !important; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-sm); line-height: 1.5; }
.kdual-join b { display: block; font-size: var(--fs-base); font-weight: 700; }
.kdual-join .kc-tile { background: color-mix(in srgb, var(--on-accent) 18%, transparent); color: var(--on-accent); }
.kdual-join::before { content: ""; position: absolute; left: 25%; right: 25%; top: -40px; height: 26px; border: 2px solid color-mix(in srgb, var(--accent) 50%, var(--line)); border-top: 0; border-radius: 0 0 14px 14px; }
.kdual-join::after { content: ""; position: absolute; left: calc(50% - 1px); top: -14px; width: 2px; height: 14px; background: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.kdual[data-play-ready]:not(.is-playing) .kdual-col, .kdual[data-play-ready]:not(.is-playing) .kdual-join { opacity: 0; }
.kdual[data-play-ready]:not(.is-playing) .kdual-join::before, .kdual[data-play-ready]:not(.is-playing) .kdual-join::after { opacity: 0; }
.kdual.is-playing .kdual-col { animation: who-in .5s ease both; }
.kdual.is-playing .kdual-col + .kdual-col { animation-delay: .15s; }
.kdual.is-playing .kdual-join::before { animation: kdual-draw .5s ease-out .45s both; }
.kdual.is-playing .kdual-join::after { animation: who-in .3s ease .8s both; }
.kdual.is-playing .kdual-join { animation: who-in .5s ease .85s both; }
@keyframes kdual-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.kcap { margin: 1.6em 0 !important; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.kcap-h { margin: 0 0 6px !important; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: var(--fs-sm); color: var(--muted); }
.kcap-h b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.kcap-rows { display: grid; gap: 4px; }
.kcap-r { display: grid; grid-template-columns: 15.5em minmax(0, 1fr) 10.5em; gap: 14px; align-items: center; margin: 0 !important; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.kcap-l { color: var(--ink); font-weight: 600; line-height: 1.3; }
.kcap-l small, .kcap-v small { display: block; letter-spacing: -.01em; font-weight: 500; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.kcap-t { position: relative; display: flex; height: 16px; border-radius: 4px; background: var(--bg-soft); }
.kcap-t i { display: block; height: 100%; transform-origin: 0 50%; }
.kcap-t i.is-sal { border-radius: 4px 0 0 4px; background: var(--accent); }
.kcap-t i.is-cuo { border-radius: 0 4px 4px 0; background: color-mix(in srgb, #d98e04 75%, var(--surface)); }
.kcap-t::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: var(--lim, 80.84%); border-left: 2px dashed var(--ink); }
.kcap-v { text-align: right; color: var(--ink); font-weight: 700; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.kcap-v.is-zero { color: var(--muted); }
.kcap-key { margin: 10px 0 0 !important; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-xs); color: var(--ink-2); }
.kcap-key span { display: inline-flex; align-items: center; gap: 6px; }
.kcap-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.kcap-key i.is-sal { background: var(--accent); }
.kcap-key i.is-cuo { background: color-mix(in srgb, #d98e04 75%, var(--surface)); }
.kcap-key i.is-lim { width: 0; height: 14px; border-radius: 0; border-left: 2px dashed var(--ink); }
.kcap[data-play-ready]:not(.is-playing) .kcap-t i { transform: scaleX(0); }
.kcap.is-playing .kcap-t i { animation: kcap-grow .7s cubic-bezier(.2, .8, .3, 1) both; }
.kcap.is-playing .kcap-t i.is-cuo { animation-delay: .55s; }
.kcap.is-playing .kcap-r:nth-child(2) .kcap-t i { animation-delay: .15s; }
.kcap.is-playing .kcap-r:nth-child(2) .kcap-t i.is-cuo { animation-delay: .7s; }
.kcap.is-playing .kcap-r:nth-child(3) .kcap-t i { animation-delay: .3s; }
.kcap.is-playing .kcap-r:nth-child(3) .kcap-t i.is-cuo { animation-delay: .85s; }
.kcap.is-playing .kcap-r:nth-child(4) .kcap-t i { animation-delay: .45s; }
.kcap.is-playing .kcap-r:nth-child(4) .kcap-t i.is-cuo { animation-delay: 1s; }
.kcap.is-playing .kcap-r:nth-child(5) .kcap-t i { animation-delay: .6s; }
.kcap.is-playing .kcap-r:nth-child(5) .kcap-t i.is-cuo { animation-delay: 1.15s; }
@keyframes kcap-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ksum { margin: 1.4em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.ksum-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); }
.ksum-h b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.kb-content .ksum-rows { list-style: none; margin: 0 !important; padding: 6px 16px 0 !important; }
.ksum-rows li { margin: 0 !important; padding: 9px 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.4; }
.ksum-rows li:last-child { border-bottom: 0; }
.ksum-op { font-weight: 700; color: var(--accent-ink); text-align: center; }
.ksum-rows li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ksum-rows li.is-sub { color: var(--ink); }
.ksum-rows li.is-sub b { font-weight: 700; }
.ksum-rows li.is-res { margin: 0 -16px !important; padding: 12px 16px; background: var(--accent); color: var(--on-accent); font-weight: 650; }
.ksum-rows li.is-res b, .ksum-rows li.is-res .ksum-op { color: var(--on-accent); font-size: var(--fs-base); font-weight: 700; }

:root[data-theme="dark"] .kdual-join, :root[data-theme="dark"] .ksum-rows li.is-res { background: color-mix(in srgb, var(--accent) 55%, #0b1220); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kdual-join, :root:not([data-theme="light"]) .ksum-rows li.is-res { background: color-mix(in srgb, var(--accent) 55%, #0b1220); }
}
@media (max-width: 600px) {
  .kdual { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kdual-join { margin-top: 22px !important; }
  .kdual-join::before { left: calc(50% - 1px); right: auto; width: 2px; top: -32px; height: 32px; border: 0; border-radius: 0; background: color-mix(in srgb, var(--accent) 50%, var(--line)); }
  .kdual-join::after { display: none; }
  .kcap { padding: 14px 12px 12px; }
  .kcap-r { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .kcap-t { grid-column: 1 / -1; grid-row: 2; }
  .ksum-h { padding: 12px 12px 10px; }
  .kb-content .ksum-rows { padding: 4px 12px 0 !important; }
  .ksum-rows li { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; font-size: var(--fs-xs); }
  .ksum-rows li.is-res { margin: 0 -12px !important; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kdual.is-playing *, .kdual.is-playing .kdual-join::before, .kdual.is-playing .kdual-join::after, .kcap.is-playing .kcap-t i { animation: none !important; }
}

/* ───────────── Carta de Hacienda guide: .kladder, .kcal, .kfork, .kb-lanes ───────────── */
.kb-content .kladder { list-style: none; position: relative; margin: 1.4em 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.kladder::before { content: ""; position: absolute; left: 33px; top: 30px; bottom: 30px; width: 3px; border-radius: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, #d98e04 80%, var(--surface)) 62%, color-mix(in srgb, #d0432d 80%, var(--surface))); }
.kb-content .kladder li { position: relative; margin: 0 !important; padding: 14px 16px; display: grid; grid-template-columns: 36px minmax(0, 1.3fr) minmax(0, 1fr); gap: 4px 14px; align-items: start; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.kladder-what b { display: block; color: var(--ink); font-weight: 650; font-size: var(--fs-base); line-height: 1.35; }
.kladder-t { display: table; margin-top: 8px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 650; line-height: 1.5; }
.kb-content .kladder-do { margin: 0 !important; padding-left: 14px; border-left: 1px dashed var(--line-strong); color: var(--ink); font-size: var(--fs-sm); }
.kladder-do::before { content: "Qué haces"; display: block; margin-bottom: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.kladder .lv-4 .kc-tile, .kladder .lv-5 .kc-tile { background: var(--warn-soft); color: #8a5300; }
.kladder .lv-4 .kladder-t, .kladder .lv-5 .kladder-t { background: var(--warn-soft); color: #8a5300; }
.kladder .lv-6 .kc-tile, .kladder .lv-6 .kladder-t { background: var(--danger-soft); color: #a32a19; }
.kb-content .kladder li.lv-6 { border-color: color-mix(in srgb, var(--danger-line) 35%, var(--line)); }

.kcal { margin: 1.6em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.kcal-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); }
.kcal-h b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.kcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 14px 16px 4px; }
.kcal-dow { text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.kcal-d { position: relative; min-height: 64px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kcal-d small { margin-left: 3px; font-size: 10px; font-weight: 600; color: var(--muted); }
.kcal-d i { display: block; margin-top: 4px; font-style: normal; font-size: 10.5px; font-weight: 650; line-height: 1.2; color: var(--accent-ink); }
.kcal-d em { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-style: normal; font-size: 10px; font-weight: 700; }
.kcal-d.is-we { background: var(--bg-soft); border-color: transparent; color: var(--muted); font-weight: 500; }
.kcal-d.is-arr { border: 1.5px dashed color-mix(in srgb, var(--accent) 70%, var(--line)); }
.kcal-d.is-open, .kcal-d.is-n { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.kcal-d.is-nat { box-shadow: inset 0 -4px 0 color-mix(in srgb, #d98e04 75%, var(--surface)); }
.kcal-d.is-end { background: #1d6fa5; border-color: #1d6fa5; color: #fff; }
.kcal-d.is-end i { color: #fff; }
.kcal-d.is-end em { background: #fff; color: #1d6fa5; }
.kcal-d.is-end2 { background: var(--warn-soft); border: 2px solid color-mix(in srgb, #d98e04 80%, var(--surface)); }
.kcal-d.is-end2 i { color: #8a5300; }
.kcal-key { margin: 0 !important; padding: 10px 16px 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-xs); color: var(--ink-2); }
.kcal-key span { display: inline-flex; align-items: center; gap: 6px; }
.kcal-key i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.kcal-key i.k-n { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--line)); }
.kcal-key i.k-end { background: #1d6fa5; }
.kcal-key i.k-nat { height: 4px; border-radius: 2px; background: color-mix(in srgb, #d98e04 75%, var(--surface)); }
.kcal-key i.k-end2 { background: var(--warn-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, #d98e04 80%, var(--surface)); }
.kyr-115 .kyr-res th small, .kyr-111 .kyr-res th small { display: block; margin-top: 2px; }
.kyr-t td.is-off { color: var(--muted); }
.kcal-key i.k-arr { border: 1.5px dashed color-mix(in srgb, var(--accent) 70%, var(--line)); }

.kfork { margin: 1.6em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); overflow: hidden; }
.kfork-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.kfork-h b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.kfork-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 16px 0; }
.kfork-cols > .ksum { display: flex; flex-direction: column; }
.kfork-cols > .ksum > .kfork-note { margin-top: auto !important; }
.kfork-cols > .ksum > .ksum-rows { flex: 1; display: flex; flex-direction: column; }
.kfork-cols > .ksum .ksum-rows > li.is-res { margin-top: auto !important; }
.kfork .ksum { margin: 0 !important; }
.kfork-k { margin: 0 !important; padding: 12px 16px 10px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
.kfork-k b { display: block; color: var(--ink); font-weight: 650; font-size: var(--fs-sm); }
.kfork-b .ksum-rows li.is-res { background: #b5392a; }
.kfork-note { margin: 0 !important; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.kfork-bars { padding: 12px 16px 16px; display: grid; gap: 4px; }
.kfork-bars p { margin: 0 !important; display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 11em; gap: 12px; align-items: center; padding: 4px 0; font-size: var(--fs-sm); color: var(--ink-2); }
.kfork-bars b { text-align: right; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.kfork-t { height: 14px; border-radius: 4px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.kfork-t i { display: block; height: 100%; border-radius: 4px; transform-origin: 0 50%; }
.kfork-t i.is-a { background: var(--accent); }
.kfork-t i.is-b { background: color-mix(in srgb, #d0432d 80%, var(--surface)); }
.kfork[data-play-ready]:not(.is-playing) .kfork-t i { transform: scaleX(0); }
.kfork.is-playing .kfork-t i { animation: kcap-grow .8s cubic-bezier(.2, .8, .3, 1) both; }
.kfork.is-playing .kfork-t i.is-b { animation-duration: 1.2s; animation-delay: .25s; }

.kb-content .kb-lanes { margin: 1.6em 0 !important; }
.kb-content .kb-lanes .lane { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 22px 24px; }
.kb-content .kb-lanes .lane-brand { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 12px; padding-top: 0; font-size: 1.125rem; }
.kb-content .kb-lanes .lane-steps { margin: 0 !important; padding: 0 !important; }
.kb-content .kb-lanes .lane-steps li { margin: 0 !important; padding: 0; }
.kb-content .kb-lanes .lane-txt small { font-size: var(--fs-xs); }
.kb-lane-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.kb-lane-name .pv-i { width: 18px; height: 18px; color: var(--accent-ink); }

:root[data-theme="dark"] .kladder .lv-4 .kc-tile, :root[data-theme="dark"] .kladder .lv-5 .kc-tile, :root[data-theme="dark"] .kladder .lv-4 .kladder-t, :root[data-theme="dark"] .kladder .lv-5 .kladder-t, :root[data-theme="dark"] .kcal-d.is-end2 i { color: #f0b552; }
:root[data-theme="dark"] .kladder .lv-6 .kc-tile, :root[data-theme="dark"] .kladder .lv-6 .kladder-t { color: #f59585; }
:root[data-theme="dark"] .kfork-b .ksum-rows li.is-res { background: #8f2c20; }
:root[data-theme="dark"] .kcal-d.is-open, :root[data-theme="dark"] .kcal-d.is-n, :root[data-theme="dark"] .kcal-key i.k-n { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kladder .lv-4 .kc-tile, :root:not([data-theme="light"]) .kladder .lv-5 .kc-tile, :root:not([data-theme="light"]) .kladder .lv-4 .kladder-t, :root:not([data-theme="light"]) .kladder .lv-5 .kladder-t, :root:not([data-theme="light"]) .kcal-d.is-end2 i { color: #f0b552; }
  :root:not([data-theme="light"]) .kladder .lv-6 .kc-tile, :root:not([data-theme="light"]) .kladder .lv-6 .kladder-t { color: #f59585; }
  :root:not([data-theme="light"]) .kfork-b .ksum-rows li.is-res { background: #8f2c20; }
  :root:not([data-theme="light"]) .kcal-d.is-open, :root:not([data-theme="light"]) .kcal-d.is-n, :root:not([data-theme="light"]) .kcal-key i.k-n { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
}
@media (max-width: 600px) {
  .kb-content .kladder li { grid-template-columns: 36px minmax(0, 1fr); padding: 12px; gap: 4px 12px; }
  .kladder::before { left: 29px; }
  .kb-content .kladder-do { grid-column: 2; margin-top: 6px !important; padding: 8px 0 0; border-left: 0; border-top: 1px dashed var(--line-strong); }
  .kcal-grid { gap: 4px; padding: 12px 10px 4px; }
  .kcal-d { min-height: 58px; padding: 4px 4px; font-size: var(--fs-xs); }
  .kcal-d i { font-size: 11px; letter-spacing: -.01em; }
  .kcal-d em { right: 2px; top: 3px; min-width: 16px; height: 16px; font-size: 10px; }
  .kcal-d small { display: block; margin: 0; font-size: 10px; }
  .kcal-d.is-end em { display: none; }
  .kcal-h, .kfork-h { padding: 12px 12px 10px; }
  .kcal-key { padding: 8px 12px 12px; }
  .kfork-cols { grid-template-columns: minmax(0, 1fr); padding: 12px 10px 0; }
  .kfork-k { padding: 10px 12px; }
  .kfork-note { padding: 8px 12px 10px; }
  .kfork-bars { padding: 10px 12px 14px; }
  .kfork-bars p { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: var(--fs-xs); }
  .kfork-t { grid-column: 1 / -1; grid-row: 2; }
  .kb-content .kb-lanes .lane { padding: 18px 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .kfork.is-playing .kfork-t i { animation: none !important; }
}

.kdue { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 6px; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 650; line-height: 1.5; white-space: nowrap; }
.kdue .pv-i { width: 13px; height: 13px; }
.kdue.is-soon { background: var(--warn-soft); color: #8a5300; }
.kdue.is-dec, .kdue.is-any { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.kdue.is-now { background: var(--danger-soft); color: #a32a19; }
.kprof li > .kdue, .kout li > .kdue { grid-column: 2; }

.klife { position: relative; list-style: none; margin: 1.6em 0 !important; padding: 22px 18px 18px !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.klife::before, .klife::after { content: ""; position: absolute; left: calc(16.6% + 6px); right: calc(16.6% + 6px); top: 44px; height: 3px; border-radius: 2px; background: var(--line-strong); }
.klife::after { background: var(--accent); transform-origin: 0 50%; }
.klife[data-play-ready]:not(.is-playing)::after { transform: scaleX(0); }
.klife.is-playing::after { animation: kcap-grow 1.4s cubic-bezier(.3, .7, .3, 1) both; }
.klife-s { position: relative; z-index: 1; margin: 0 !important; display: grid; justify-items: center; text-align: center; gap: 4px; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.klife-s > .kc-tile { width: 46px; height: 46px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 3px var(--accent), 0 0 0 7px var(--surface-2); color: var(--accent-ink); }
.klife-s > .kc-tile .pv-i { width: 20px; height: 20px; }
.klife-s.is-mid > .kc-tile { box-shadow: 0 0 0 3px #d98e04, 0 0 0 7px var(--surface-2); color: #8a5300; }
.klife-s > b { margin-top: 8px; color: var(--ink); font-weight: 650; font-size: var(--fs-base); line-height: 1.3; }
.klife-s .kchips { justify-content: center; }
.klife-s .kdue { margin-top: 2px; }
.klife[data-play-ready]:not(.is-playing) .klife-s { opacity: 0; transform: translateY(8px); }
.klife.is-playing .klife-s { animation: klife-in .5s ease both; animation-delay: calc(var(--s, 0) * .45s); }
@keyframes klife-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes klife-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kmap { margin: 1.6em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.kmap-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); }
.kmap-h b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.kmap-rows { list-style: none; margin: 0 !important; padding: 6px 0 !important; }
.kmap-rows > li { margin: 0 !important; display: grid; grid-template-columns: minmax(0, 15em) 28px minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px 12px; align-items: stretch; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.kmap-rows > li:last-child { border-bottom: 0; }
.kmap-c { align-self: center; display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 2px 10px; align-items: center; color: var(--ink-2); line-height: 1.35; }
.kmap-c .kf-c { justify-self: stretch; white-space: nowrap; text-align: center; }
.kmap-arr { align-self: center; position: relative; height: 2px; background: var(--line-strong); }
.kmap-arr::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--line-strong); border-right: 0; }
.kmap-m { min-width: 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--ink-2); line-height: 1.35; }
.kmap-m b { display: block; color: var(--accent-ink); font-weight: 700; }
.kmap-m small { display: block; font-size: var(--fs-xs); }
.kmap-m.is-yr { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.kmap-m.is-yr b { color: var(--ink); }
.kmap-m.is-none { background: transparent; border: 1px dashed var(--line-strong); }
.kmap-m.is-none b { color: var(--ink); }
.kmap-key { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); }
.kmap-key > span { display: inline-flex; align-items: center; gap: 5px; }
.kmap-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.kmap-key i.k-q { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--line)); }
.kmap-key i.k-y { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.kmap-key i.k-n { border: 1px dashed var(--line-strong); }
.kmap-rows > li.is-off .kmap-c, .kmap-rows > li.is-off .kmap-m b { color: var(--muted); }
.kmap-rows > li.is-off .kmap-m { background: var(--bg-soft); }
.kmap-note { margin: 0 !important; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.kmap[data-play-ready]:not(.is-playing) .kmap-rows > li { opacity: 0; transform: translateX(-8px); }
.kmap.is-playing .kmap-rows > li { animation: kmap-in .45s ease both; animation-delay: calc(var(--s, 0) * .18s); }
@keyframes kmap-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
:root[data-theme="dark"] .kdue.is-soon, :root[data-theme="dark"] .klife-s.is-mid > .kc-tile { color: #f0b552; }
:root[data-theme="dark"] .kdue.is-now { color: #f59585; }
:root[data-theme="dark"] .kmap-m b { color: var(--accent-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kdue.is-soon, :root:not([data-theme="light"]) .klife-s.is-mid > .kc-tile { color: #f0b552; }
  :root:not([data-theme="light"]) .kdue.is-now { color: #f59585; }
}
@media (max-width: 600px) {
  .klife { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 14px 16px !important; }
  .klife::before, .klife::after { display: none; }
  .klife-s:not(:last-child)::after { content: ""; position: absolute; left: 21.5px; top: 50px; bottom: -14px; width: 3px; border-radius: 2px; background: var(--accent); transform-origin: 50% 0; }
  .klife[data-play-ready]:not(.is-playing) .klife-s::after { transform: scaleY(0); }
  .klife.is-playing .klife-s::after { animation: klife-grow-y .6s ease both; animation-delay: calc(var(--s, 0) * .45s + .3s); }
  .klife-s { grid-template-columns: 46px minmax(0, 1fr); justify-items: start; text-align: left; gap: 2px 14px; }
  .klife-s > .kc-tile { grid-row: 1 / span 4; }
  .klife-s > b { margin-top: 0; }
  .klife-s .kchips { justify-content: flex-start; }
  .kmap-rows > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; gap: 8px; }
  .kmap-c { grid-column: 1 / -1; }
  .kmap-arr { display: none; }
  .kmap-h, .kmap-note { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .klife.is-playing::after, .klife.is-playing .klife-s, .klife.is-playing .klife-s::after, .kmap.is-playing .kmap-rows > li { animation: none !important; }
}

/* ── modelo 347 guide ── */
.kf-c.kf-no { border-color: var(--line-strong); background: var(--surface-2); color: var(--muted); font-weight: 600; }
.kyr-347 .kyr-t th[scope="row"] small { display: block; margin-top: 1px; font-size: var(--fs-xs); color: var(--muted); }
.kyr-347 .kyr-t td.is-nil { color: var(--muted); }
.kyr-347 .kyr-res td { text-align: right; }
.kyr-347 .kyr-res .kyr-tag { margin-left: 8px; }
.kcal-d.is-end small { color: rgba(255, 255, 255, .85); }
.kcal-d.is-out { background: var(--bg-soft); border-color: transparent; color: var(--muted); font-weight: 500; }
.kstat-i b.is-long { font-size: 1.625rem; }
@media (max-width: 600px) {
  .kyr-347 .kyr-t td:last-child, .kyr-347 .kyr-res td { padding-right: 12px; }
  .kstat-i b.is-long { font-size: 1.5rem; }
}

/* ── epígrafe IAE y CNAE guide ──
   - .kcode: one activity and its two codes, the IAE epígrafe for Hacienda (.kcode-t.is-aeat) and the CNAE for the
     Seguridad Social (.kcode-t.is-ss), under a bracket (.kcode-fork); the tickets rise once with [data-play].
   - .ksec: the section chip of an epígrafe, always with its word: .is-pro Profesional (2.ª), .is-emp Empresarial (1.ª),
     .is-art Artística (3.ª).
   - .kfind: the finder, a real table (one row per activity: the activity as th, with an IVA chip .kfind-iva where it is
     not the usual 21 %, the epígrafe and the CNAE-2025) with a search box shown only with JS (js/kuotia-guides.js filters rows by any word or code, the CNAE-2009
     one in .kfind-was included); on the phone each row is a card with the two codes side by side. */
.kcode { margin: 1.6em 0 !important; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.kcode-act { display: flex; align-items: center; gap: 12px; width: max-content; max-width: 100%; margin: 0 auto !important; padding: 10px 18px 10px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); line-height: 1.3; }
.kcode-act small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.kcode-act b { display: block; color: var(--ink); font-weight: 650; }
.kcode-fork { position: relative; height: 26px; margin: 0 25%; border: 2px solid var(--line-strong); border-bottom: 0; border-radius: 10px 10px 0 0; top: 12px; }
.kcode-fork::before { content: ""; position: absolute; left: 50%; top: -14px; height: 12px; width: 2px; margin-left: -1px; background: var(--line-strong); }
.kcode-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.kcode-t { min-width: 0; padding: 12px 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); line-height: 1.35; }
.kcode-t.is-aeat { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
.kcode-who { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 650; color: var(--ink-2); }
.kcode-who .pv-i { width: 15px; height: 15px; flex: none; }
.kcode-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 4px; }
.kcode-n b { font-size: 2rem; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.kcode-t.is-ss .kcode-n b { color: var(--ink); }
.kcode-t small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.kcode-t small + small { margin-top: 4px; color: var(--ink-2); }
.kcode-cap { margin: 12px 0 0 !important; font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.5; }
.kcode[data-play-ready]:not(.is-playing) .kcode-t { opacity: 0; transform: translateY(8px); }
.kcode.is-playing .kcode-t { animation: kcode-in .5s ease both; animation-delay: calc(var(--s, 0) * .25s + .15s); }
@keyframes kcode-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ksec { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 650; line-height: 1.5; white-space: nowrap; background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--line)); }
.ksec.is-emp { background: var(--warn-soft); color: #8a5300; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn-line) 35%, var(--line)); }
.ksec.is-art { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
:root[data-theme="dark"] .ksec.is-emp { color: #f0b552; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ksec.is-emp { color: #f0b552; } }

.kfind { margin: 1.6em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.kfind-h { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); }
.kfind-h > b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.kfind-q { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--surface); color: var(--muted); }
.kfind-q[hidden] { display: none; }
.kfind-q:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.kfind-q .pv-i { width: 18px; height: 18px; flex: none; }
.kfind-q input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.kfind-q input::placeholder { color: var(--muted); }
.kfind-n { flex: none; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.kfind-key { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: var(--fs-xs); }
.kfind-k { display: inline-flex; align-items: center; gap: 6px; }
.kfind-t { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.4; }
.kfind-t thead th { padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.kfind-t thead th .pv-i { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.kfind-t tbody th, .kfind-t tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.kfind-t tbody tr:last-child > * { border-bottom: 0; }
.kfind-t tbody tr[hidden] { display: none; }
.kfind-t tbody tr:hover > * { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.kfind-act { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 1px 12px; align-items: center; min-width: 12em; }
.kfind-act > .kc-tile { grid-row: 1 / span 3; align-self: start; }
.kfind-act b { color: var(--ink); font-weight: 650; }
.kfind-act small { font-size: var(--fs-xs); color: var(--muted); }
.kfind-c { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kfind-c > b { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.kfind-t td.is-ss .kfind-c > b { color: var(--ink); }
.kfind-t td small { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); }
.kfind-was { display: inline-flex; padding: 0 7px; border: 1px dashed var(--line-strong); border-radius: 999px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kfind-iva { grid-column: 2; justify-self: start; margin-top: 4px; padding: 0 7px; border-radius: 999px; background: var(--success-soft, color-mix(in srgb, var(--success-mark) 14%, var(--surface))); color: #03664a; font-size: var(--fs-xs); font-weight: 650; line-height: 1.5; max-width: 100%; }
:root[data-theme="dark"] .kfind-iva { color: #6ee7b7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kfind-iva { color: #6ee7b7; } }
.kfind-key .kfind-iva { margin: 0; }
.kfind-t tbody th { width: 32%; }
.kfind-t td.is-aeat { width: 38%; }
.kfind-empty { margin: 0 !important; padding: 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.kfind-empty[hidden] { display: none; }
.kfind-note { margin: 0 !important; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) {
  .kfind-t thead { display: none; }
  .kfind-t, .kfind-t tbody { display: block; }
  .kfind-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; padding: 12px; border-bottom: 1px solid var(--line); }
  .kfind-t tbody tr:last-child { border-bottom: 0; }
  .kfind-t tbody th, .kfind-t tbody td { display: block; width: auto; padding: 0; border: 0 !important; }
  .kfind-t td.is-aeat, .kfind-t tbody th { width: auto; }
  .kfind-act { min-width: 0; }
  .kfind-t tbody th { grid-column: 1 / -1; }
  .kfind-t td.is-aeat, .kfind-t td.is-ss { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
  .kfind-t td.is-aeat { background: var(--accent-soft); }
  .kfind-t td.is-aeat::before, .kfind-t td.is-ss::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
  .kfind-t tbody tr:hover > * { background: inherit; }
  .kfind-t tbody tr:hover > td.is-aeat { background: var(--accent-soft); }
  .kfind-t tbody tr:hover > td.is-ss { background: var(--surface-2); }
  .kfind-h, .kfind-note { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 600px) {
  .kcode { padding: 14px 12px; }
  .kcode-fork { margin: 0 22%; }
  .kcode-pair { gap: 8px; }
  .kcode-t { padding: 10px 10px; }
  .kcode-n b { font-size: 1.625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kcode.is-playing .kcode-t { animation: none !important; }
}
/* .kfork with an empresarial road (the IAE guide): same weight as the first, in the amber of .ksec.is-emp, not red. */
.kfork .ksum.is-emp .ksum-rows li.is-res { background: #9a5d00; }
.kfork-t i.is-emp { background: var(--warn-line); }
:root[data-theme="dark"] .kfork .ksum.is-emp .ksum-rows li.is-res { background: #7a4a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kfork .ksum.is-emp .ksum-rows li.is-res { background: #7a4a00; } }
.kfind .kfind-q input, .kfind .kfind-q input:focus { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; }
/* .kfork.is-even: the two roads keep their rows, result and note aligned when the notes differ in length. */
.kfork.is-even .kfork-cols { grid-template-rows: auto 1fr auto; align-items: start; }
.kfork.is-even .kfork-cols > .ksum > .kfork-note { align-self: end; }
.kfork.is-even .kfork-cols > .ksum { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.kfork.is-even .kfork-cols > .ksum > .ksum-rows { flex: none; }
.kfork.is-even .kfork-cols > .ksum .ksum-rows > li.is-res { margin-top: 0 !important; }
/* A CNAE chip next to an IAE one (the IAE guide's cases): neutral, like the CNAE column of .kfind. */
.kf-c.is-ss { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink); }
.kfind-t td.is-aeat .ksec { white-space: nowrap; }

/* ── darse de baja guide: .ktl ── */
.ktl { margin: 1.6em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.ktl-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); }
.ktl-h > b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.ktl-key { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); }
.ktl-key > span { display: inline-flex; align-items: center; gap: 5px; }
.ktl-key i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 3px solid var(--accent); background: var(--surface); }
.ktl-key i.k-ss { border-color: #d98e04; }
.ktl-key i.k-you { border-color: var(--ink-2); background: var(--ink-2); }
.ktl-key i.k-later { border: 2px dashed var(--muted); }
.kb-content .ktl-rows, .ktl-rows { --ktl-d: 5.4rem; --ktl-g: 12px; list-style: none; margin: 0 !important; padding: 16px 16px 6px !important; }
.kb-content .ktl-r, .ktl-r { position: relative; margin: 0 0 10px !important; padding: 0 !important; display: grid; grid-template-columns: var(--ktl-d) 20px minmax(0, 1fr); gap: 0 var(--ktl-g); align-items: start; }
.ktl-r:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--ktl-d) + var(--ktl-g) + 10px); top: 20px; bottom: -30px; width: 2px; margin-left: -1px; background: var(--accent); transform-origin: 50% 0; }
.ktl-r:has(+ .is-later)::before { background: repeating-linear-gradient(180deg, var(--muted) 0 4px, transparent 4px 8px); }
.ktl[data-play-ready]:not(.is-playing) .ktl-r::before { transform: scaleY(0); }
.ktl.is-playing .ktl-r::before { animation: klife-grow-y .4s ease both; animation-delay: calc(var(--s, 0) * .22s + .2s); }
.ktl-d { padding-top: 6px; text-align: right; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ktl-d b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.ktl-d small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.ktl-node { position: relative; z-index: 1; justify-self: center; width: 16px; height: 16px; margin-top: 12px; border-radius: 50%; border: 3px solid var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--surface); }
.ktl-r.is-ss .ktl-node { border-color: #d98e04; }
.ktl-r.is-you .ktl-node { border-color: var(--ink-2); background: var(--ink-2); }
.ktl-r.is-later .ktl-node { border-width: 2px; border-style: dashed; }
.ktl-r.is-you.is-later .ktl-node { border-color: var(--muted); background: var(--surface); }
.ktl-c { min-width: 0; padding: 10px 14px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.ktl-c > b { display: block; margin-top: 4px; color: var(--ink); font-weight: 650; font-size: var(--fs-base); line-height: 1.35; }
.ktl-c > span:last-child { display: block; margin-top: 2px; }
.ktl-c > b { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ktl-r.is-key .ktl-c { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--accent); }
.ktl-r.is-ss.is-key .ktl-c { border-color: color-mix(in srgb, #d98e04 45%, var(--line)); box-shadow: inset 3px 0 0 #d98e04; }
.ktl-r.is-later .ktl-c { background: var(--bg-soft); border-style: dashed; }
.ktl-org { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 650; line-height: 1.5; }
.ktl-r.is-ss .ktl-org { background: var(--warn-soft); color: #8a5300; }
.ktl-r.is-you .ktl-org { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ktl-note { margin: 0 !important; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.ktl[data-play-ready]:not(.is-playing) .ktl-r { opacity: 0; transform: translateY(8px); }
.ktl.is-playing .ktl-r { animation: klife-in .45s ease both; animation-delay: calc(var(--s, 0) * .22s); }
.krec.is-acc .krec-t i { background: color-mix(in srgb, var(--accent) 80%, var(--surface)); }
.lane.is-us.is-ss { --lane-c: #b87503; }
.kout li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.krec.is-acc .krec-h { flex-direction: column; gap: 2px; }
:root[data-theme="dark"] .ktl-r.is-ss .ktl-org { color: #f0b552; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ktl-r.is-ss .ktl-org { color: #f0b552; } }
@media (max-width: 600px) {
  .kb-content .ktl-rows, .ktl-rows { --ktl-d: 4rem; --ktl-g: 8px; padding: 14px 12px 4px !important; }
  .ktl-d b { font-size: 1.25rem; }
  .ktl-c { padding: 9px 11px 10px; }
  .ktl-h, .ktl-note { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ktl.is-playing .ktl-r::before, .ktl.is-playing .ktl-r { animation: none !important; }
}

/* ── factura rectificativa guide: negative rows and boxes ── */
.kled-r.is-neg > .kled-m, .af-box.af-neg { color: #8a5300; }
.af-fr .af-per { grid-column: -2; justify-self: end; }
.kled-r.is-neg { background: color-mix(in srgb, var(--warn-soft) 60%, var(--surface)); }
:root[data-theme="dark"] .kled-r.is-neg > .kled-m, :root[data-theme="dark"] .af-box.af-neg { color: #f0b552; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kled-r.is-neg > .kled-m, :root:not([data-theme="light"]) .af-box.af-neg { color: #f0b552; }
}

/* ── cuota de autónomos guide: .ktramo, .kwin, .acn-ss ── */
.ktramo { margin: 1.6em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.ktramo-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); }
.ktramo-h > b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.ktramo-key { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); }
.ktramo-key > span { display: inline-flex; align-items: center; gap: 5px; }
.ktramo-key i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; background: var(--warn-line); }
.ktramo-key i.k-max { background: color-mix(in srgb, var(--warn-line) 28%, var(--surface)); }
.ktramo table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ktramo th, .ktramo td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ktramo thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; background: var(--surface); }
.ktramo thead th.is-num, .ktramo td.is-num { text-align: right; white-space: nowrap; }
.ktramo tbody th { font-weight: 650; color: var(--ink); white-space: nowrap; }
.ktramo td { color: var(--ink-2); }
.ktramo td.is-cuota { width: 34%; }
.ktramo tr.ktramo-g th { padding: 10px 12px 6px; background: var(--bg-soft); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ktramo-bar { position: relative; display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.ktramo-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; }
.ktramo-bar i.is-max { width: var(--wmax); background: color-mix(in srgb, var(--warn-line) 28%, var(--surface)); }
.ktramo-bar i.is-min { width: var(--w); background: var(--warn-line); transform-origin: 0 50%; }
.ktramo-v { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ktramo-v > span:last-child { text-align: right; }
.ktramo-v b { display: block; }
.ktramo-b { display: none; }
.ktramo-v b { color: var(--ink); font-weight: 650; }
.ktramo tr.is-mine > * { background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); }
.ktramo tr.is-mine > th:first-child { box-shadow: inset 3px 0 0 var(--warn-line); }
.ktramo-you { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--warn-line); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.6; vertical-align: 1px; }
.ktramo-note { margin: 0 !important; padding: 10px 16px 12px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.ktramo[data-play-ready]:not(.is-playing) .ktramo-bar i.is-min { transform: scaleX(0); }
.ktramo.is-playing .ktramo-bar i.is-min { animation: kcap-grow .7s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--n, 0) * 50ms); }
:root[data-theme="dark"] .ktramo-you { color: #1d1606; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ktramo-you { color: #1d1606; } }
@media (max-width: 600px) {
  .ktramo-h, .ktramo-note { padding-left: 12px; padding-right: 12px; }
  .ktramo thead { display: none; }
  .ktramo table, .ktramo tbody { display: block; }
  .ktramo tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .ktramo tbody tr.ktramo-g { display: block; padding: 0; }
  .ktramo tbody tr.ktramo-g th { display: block; }
  .ktramo th, .ktramo td { padding: 0; border: 0; }
  .ktramo tr.is-mine > * { background: none; }
  .ktramo tr.is-mine { background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); box-shadow: inset 3px 0 0 var(--warn-line); }
  .ktramo tr.is-mine > th:first-child { box-shadow: none; }
  .ktramo td.is-base { display: none; }
  .ktramo td.is-cuota { grid-column: 1 / -1; width: auto; margin-top: 6px; }
  .ktramo-v { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ktramo-b { display: block; }
  .ktramo-v > span:nth-child(2) { text-align: center; }
}

.kwin { margin: 1.6em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 16px 16px 14px; }
.kwin-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.kwin-h b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.kb-content .kwin-row, .kwin-row { list-style: none; margin: 14px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.kb-content .kwin-row li, .kwin-row li { margin: 0 !important; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kwin-asks { order: 2; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.4; }
.kwin-row b { order: 1; display: block; padding: 9px 10px 10px; font-size: 1.0625rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; border-radius: 10px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn-line) 35%, transparent); color: #8a5300; font-weight: 700; line-height: 1.3; }
.kwin-row b small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0; opacity: .85; }
.kwin-row li.is-next b { background: var(--warn-line); border-color: var(--warn-line); color: #fff; }
.kwin-row li.is-next .kwin-asks { color: var(--ink); font-weight: 600; }
.kwin-foot { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0 !important; padding-top: 12px; border-top: 1px dashed var(--line-strong); color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.5; }
.kwin-foot .pv-i { width: 15px; height: 15px; margin-top: 1px; color: var(--warn-line); flex: none; }
.kwin-row.is-playing b { animation: who-in .4s ease both; animation-delay: calc(var(--n) * 110ms); }
:root[data-theme="dark"] .kwin-row b { color: #f0b552; }
:root[data-theme="dark"] .kwin-row li.is-next b { color: #1d1606; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kwin-row b { color: #f0b552; }
  :root:not([data-theme="light"]) .kwin-row li.is-next b { color: #1d1606; }
}
@media (max-width: 760px) { .kb-content .kwin-row, .kwin-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } }

.acn-ss .acn-top { border-bottom-color: var(--warn-line); }
.acn-ss .acn-org b { color: #8a5300; }
.acn-fig dl { margin: 0 !important; display: grid; gap: 0; }
.acn-fig dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dotted var(--line-strong); }
.acn-fig dt { color: var(--ink-2); }
.acn-fig dd { margin: 0; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acn-fig dl > div.is-res { margin-top: 4px; padding: 7px 8px; border: 0; border-radius: 6px; background: var(--warn-soft); }
.acn-fig dl > div.is-res dt, .acn-fig dl > div.is-res dd { color: #8a5300; font-weight: 700; }
:root[data-theme="dark"] .acn-ss .acn-org b, :root[data-theme="dark"] .acn-fig dl > div.is-res dt, :root[data-theme="dark"] .acn-fig dl > div.is-res dd { color: #f0b552; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .acn-ss .acn-org b, :root:not([data-theme="light"]) .acn-fig dl > div.is-res dt, :root:not([data-theme="light"]) .acn-fig dl > div.is-res dd { color: #f0b552; }
}
@media (prefers-reduced-motion: reduce) {
  .ktramo.is-playing .ktramo-bar i.is-min, .kwin-row.is-playing b { animation: none !important; }
}
/* Two-road figures without bars (the cuota guide; also the rectificativa one): air under the cards, and in .is-even the
   result rows sit at the bottom of their list so both bands line up. */
.kfork-cols:last-child { padding-bottom: 16px; }
.kfork.is-even .kfork-cols > .ksum > .ksum-rows { align-self: stretch; display: flex; flex-direction: column; }
.kfork.is-even .kfork-cols > .ksum .ksum-rows > li.is-res { margin-top: auto !important; }
@media (max-width: 640px) { .kfork-cols:last-child { padding-bottom: 12px; } }
/* ── recibo de autónomos guide: the receipt's result strip on a phone ── */
@media (max-width: 480px) {
  .af-rr .af-res { justify-content: flex-start; }
  .af-rr .af-res b { margin-left: 0; }
}
/* ── cómo hacer una factura guide ──
   .knum: invoice numbering as series, one row per series (.knum-row, .is-r for the rectificativas), the numbers as paper chips
   in order (.knum-seq), the example's own number (.is-mine) and the next one, dashed (.is-next).
   .kdl: a free download as a card, a drawn preview of the file (.kdl-prev: a spreadsheet grid, .kdl-grid) and what it brings
   with the button (.kdl-c). Used for the Excel invoice template.
   .kb-marks: a .ktable-marks table (comparison pages) inside an article, with a word legend. */
.knum { margin: 1.6em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.knum-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); }
.knum-h b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.knum-row { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: 10px 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.knum-k { color: var(--ink); font-weight: 650; font-size: var(--fs-sm); line-height: 1.3; }
.knum-k small { display: block; color: var(--muted); font-weight: 500; font-size: var(--fs-xs); }
.knum-seq { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
.knum-seq > li { margin: 0 !important; position: relative; min-width: 0; padding: 8px 9px 7px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); line-height: 1.25; }
.knum-seq > li + li::before { content: ""; position: absolute; left: -11px; top: 50%; width: 8px; height: 2px; background: var(--line-strong); }
.knum-seq > li > span { display: block; color: var(--ink); font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.knum-seq > li > small { display: block; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knum-seq > li.is-mine { border-color: var(--accent); background: var(--accent-soft); }
.knum-seq > li.is-mine > span { color: var(--accent-ink); }
.knum-seq > li.is-next { border-style: dashed; background: transparent; }
.knum-seq > li.is-next > span { color: var(--ink-2); font-weight: 600; }
.knum-row.is-r .knum-seq > li:not(.is-next) { border-color: var(--warn-line); background: var(--warn-soft); }
.knum-row.is-r .knum-seq > li:not(.is-next) > span { color: #8a5300; }
.knum-note { margin: 0 !important; padding: 10px 16px 12px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
:root[data-theme="dark"] .knum-row.is-r .knum-seq > li:not(.is-next) > span { color: #f0b552; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .knum-row.is-r .knum-seq > li:not(.is-next) > span { color: #f0b552; } }
@media (max-width: 600px) {
  .knum-row { grid-template-columns: minmax(0, 1fr); }
  .knum-seq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knum-seq > li:nth-child(odd)::before { display: none; }
}

.kdl { margin: 1.6em 0 !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.kdl-prev { padding: 22px 28px 0; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.kdl-prev > * { box-shadow: 0 10px 28px -18px rgba(16, 24, 40, .35); }
.kdl-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--surface-2); font-size: 11.5px; color: var(--muted); }
.kdl-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.kdl-bar span { margin-left: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kdl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 5.4em 7em 7.4em; border: 1px solid var(--line); border-bottom: 0; border-radius: 0; background: var(--surface); font-size: 12.5px; overflow: hidden; }
.kdl-grid > span { padding: 6px 9px; border-bottom: 1px solid var(--line); border-right: 1px solid color-mix(in srgb, var(--line) 60%, transparent); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kdl-grid > span:nth-child(4n) { border-right: 0; }
.kdl-grid > span.h { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 11.5px; }
.kdl-grid > span.n { text-align: right; }
.kdl-grid > span.t { color: var(--ink); }
.kdl-grid > span em { font-style: normal; color: var(--muted); margin-left: 4px; }
.kdl-grid > span.is-neg { color: #8a5300; }
.kdl-grid > span.is-res { border-bottom: 0; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.kdl-c { padding: 20px 24px 22px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 28px; align-items: start; }
.kdl-c > figcaption, .kdl-c > .kdl-list { grid-column: 1; }
.kdl-c > .kdl-btn { grid-column: 2; grid-row: 1; justify-self: start; }
.kdl-c > .kdl-note { grid-column: 2; grid-row: 2; }
.kdl-c figcaption b { display: block; color: var(--ink); font-weight: 700; font-size: var(--fs-lg, 1.15rem); line-height: 1.3; }
.kdl-c figcaption span { display: block; color: var(--muted); font-size: var(--fs-sm); }
.kdl-list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.4; }
.kdl-list li { margin: 0 !important; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; }
.kdl-list .pv-i { width: 16px; height: 16px; margin-top: 2px; color: var(--success); }
.kdl-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.kdl-btn .pv-i { width: 16px; height: 16px; }
.kdl-note { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
:root[data-theme="dark"] .kdl-grid > span.is-neg { color: #f0b552; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kdl-grid > span.is-neg { color: #f0b552; } }
@media (max-width: 760px) {
  .kdl-prev { padding: 14px 14px 0; }
  .kdl-c { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .kdl-c > .kdl-btn, .kdl-c > .kdl-note { grid-column: 1; grid-row: auto; }
  .kdl-grid { grid-template-columns: minmax(0, 1fr) 2.2em 6em 6.2em; font-size: 11.5px; }
  .kdl-grid > span.h { font-size: 11px; }
  .kdl-grid > span { padding: 6px 6px; text-overflow: clip; }
  .kdl-grid > span:first-child, .kdl-grid > span:nth-child(4n+1) { padding-left: 8px; }
}

.kb-marks { margin: 1.6em 0 !important; }
.kb-marks .ktable-marks thead th { font-size: var(--fs-base); color: var(--ink); }
.kb-marks .mk-legend { margin: 12px 0 0 !important; }
/* The retention as its own card style in the IVA map (it is what your client subtracts), with its swatch. */
.kmap-m.is-ret { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.kmap-m.is-ret b { color: #8a5300; }
.kmap-key i.k-r { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
:root[data-theme="dark"] .kmap-m.is-ret b { color: #f0b552; }
:root[data-theme="dark"] .kmap-key i.k-q, :root[data-theme="dark"] .kmap-key i.k-y { box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kmap-m.is-ret b { color: #f0b552; }
  :root:not([data-theme="light"]) .kmap-key i.k-q, :root:not([data-theme="light"]) .kmap-key i.k-y { box-shadow: inset 0 0 0 1px var(--line-strong); }
}
@media (max-width: 600px) { .kled-r > .kchips { flex-wrap: nowrap; } }
@media (max-width: 400px) { .kdl-grid { grid-template-columns: minmax(0, 1fr) 1.8em 6em 6.2em; } .kdl-grid > span:nth-child(4n+1) { padding-right: 8px; } }
/* The year and its annual summary (the modelo 390 guide): .kyr with a fifth column for the annual return, each cell with
   the casilla it goes to (a kf-c chip above the figure) on a soft accent band, so the eye reads across into it. */
.kyr-390 .kyr-t col.kyr-cl { width: 30%; }
.kyr-390 .kyr-t col.kyr-y { width: 16%; }
.kyr-390 .kyr-t td.kyr-y, .kyr-390 .kyr-t th.kyr-yh { background: var(--accent-soft); border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.kyr-390 .kyr-t th.kyr-yh { color: var(--accent-ink); }
.kyr-390 .kyr-t td.kyr-y { font-weight: 650; color: var(--ink); }
.kyr-390 .kyr-t td.kyr-y .kf-c { display: block; width: max-content; margin: 0 0 2px auto; }
.kyr-390 .kyr-g th { background: transparent; }
.kyr-390 .kyr-res td.kyr-y b { color: var(--accent-ink); }
/* The colour key for the amber quarter, said in words (on phones the result tags go, so this line carries it). */
.kyr-notes li.kyr-key-neg { color: var(--muted); }
.kyr-sw { position: absolute; left: 1px; top: 3px; width: 14px; height: 12px; border-radius: 3px; background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, #d98e04 55%, var(--line)); }
/* The legend of the 303-to-390 map: swatches that match its cards in light and dark. */
.kmap-390 .kmap-key i.k-q, .kmap-vf .kmap-key i.k-q { background: color-mix(in srgb, var(--accent) 35%, var(--accent-soft)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.kmap-390 .kmap-key i.k-y, .kmap-vf .kmap-key i.k-y { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.kmap-390 .kmap-key i.k-n, .kmap-vf .kmap-key i.k-n { border: 1px dashed var(--muted); }
.kcal-key i.k-off { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 600px) {
  .kyr-390 .kyr-t col.kyr-cl { width: 23%; }
  .kyr-390 .kyr-t col.kyr-y { width: 19%; }
  .kyr-390 .kyr-t th, .kyr-390 .kyr-t td { padding: 6px 4px; font-size: 12px; }
  .kyr-390 .kyr-t th[scope="row"] { padding-left: 8px; overflow-wrap: anywhere; }
  .kyr-390 .kyr-res td b { font-size: 12.5px; }
  .kyr-390 .kyr-tag { display: none; }
  .kyr-390 .kyr-long, .kyr-390 .kyr-t thead th:not(.kyr-yh) small { display: none; }
  .kcal-d.is-arr i { font-size: 8px; letter-spacing: -.04em; white-space: nowrap; }
}

/* ── VeriFactu guide: the chain of records (.kchain) and the VeriFactu invoice (.af-vf) ── */
.kchain { margin: 1.6em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.kchain-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); }
.kchain-h > b { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.kb-content .kchain-rows, .kchain-rows { list-style: none; margin: 0 !important; padding: 18px 16px 16px !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 30px; }
.kb-content .kchain-r, .kchain-r { position: relative; margin: 0 !important; padding: 12px 14px !important; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: var(--fs-sm); line-height: 1.35; }
.kchain-r:not(.is-bad):not(:nth-child(3))::after { content: ""; position: absolute; right: -26px; bottom: 18px; width: 22px; height: 12px; background: var(--accent); clip-path: polygon(0 42%, 62% 42%, 62% 0, 100% 50%, 62% 100%, 62% 58%, 0 58%); }
.kchain-n { color: var(--ink); font-weight: 700; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.kchain-d { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.kchain-p, .kchain-h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 9px; border-radius: 8px; font-size: var(--fs-xs); color: var(--muted); }
.kchain-p { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.kchain-h2 { margin-top: auto; background: var(--accent-soft); color: var(--accent-ink); }
.kchain-p + .kchain-h2 { margin-top: 0; }
.kchain-p b, .kchain-h2 b, .af-hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 650; letter-spacing: 0; }
.kchain-p b { color: var(--ink); }
.kchain-h2 b { color: var(--accent-ink); }
.kb-content .kchain-r.is-bad, .kchain-r.is-bad { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; border: 1.5px dashed var(--danger-line); background: color-mix(in srgb, var(--danger-soft) 70%, var(--surface)); }
.kchain-r.is-bad .kchain-h2 { margin: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--danger-line); color: var(--muted); }
.kchain-r.is-bad .kchain-h2 b { color: #a32a19; }
.kchain-x { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; color: #a32a19; font-weight: 600; }
.kchain-x .pv-i { width: 18px; height: 18px; flex: none; }
:root[data-theme="dark"] .kchain-x, :root[data-theme="dark"] .kchain-r.is-bad .kchain-h2 b { color: #f59585; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kchain-x, :root:not([data-theme="light"]) .kchain-r.is-bad .kchain-h2 b { color: #f59585; } }
.kchain[data-play-ready]:not(.is-playing) .kchain-r { opacity: 0; transform: translateY(8px); }
.kchain.is-playing .kchain-r { animation: klife-in .45s ease both; animation-delay: calc(var(--s, 0) * .3s); }
@media (max-width: 760px) {
  .kb-content .kchain-rows, .kchain-rows { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 14px 12px 14px !important; }
  .kchain-r:not(.is-bad):not(:nth-child(3))::after, .kchain-r:nth-child(3)::after { content: ""; position: absolute; right: auto; left: 50%; bottom: -22px; width: 12px; height: 18px; margin-left: -6px; background: var(--accent); clip-path: polygon(42% 0, 58% 0, 58% 62%, 100% 62%, 50% 100%, 0 62%, 42% 62%); }
  .kchain-r:nth-child(3)::after { content: none; }
  .kb-content .kchain-r.is-bad, .kchain-r.is-bad { margin-top: 6px !important; }
  .kb-content .kchain-r.is-bad, .kchain-r.is-bad { grid-column: auto; flex-direction: column; align-items: stretch; }
  .kchain-x { flex: none; align-items: flex-start; min-width: 0; }
  .kchain-h { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .kchain.is-playing .kchain-r { animation: none !important; } }

.af-vf .af-top { grid-template-columns: minmax(0, 1fr) auto; }
.af-vf .af-org { grid-column: 1; }
.af-vf .af-id { grid-column: 1; }
.af-qrb { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: center; gap: 4px; }
.af-qr { display: block; width: 74px; height: 74px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; }
.af-qr-svg { display: block; width: 100%; height: 100%; }
.af-vfl { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--ink); }
.kx.is-live .af-qr[data-in].on, .kx:not(.is-live) .af-qr { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.af-box.af-hash { font-size: 12px; }
.af-sec-rec { background: var(--surface-2); }
.af-sec-rec .af-box { background: var(--surface); }
@media (max-width: 600px) {
  .af-vf .af-top { grid-template-columns: minmax(0, 1fr) auto; }
  .af-vf .af-id { grid-column: 1; }
  .af-qr { width: 62px; height: 62px; }
}
/* VeriFactu guide: the map's situation column wider, the yes/no marks of the two ways to comply, their bands aligned at
   the bottom, and the three steps aligned at the top. */
@media (min-width: 601px) { .kmap-vf .kmap-rows > li { grid-template-columns: minmax(0, 16.5em) 18px minmax(0, 1fr) minmax(0, 1fr); } }
.kfork-vf .ksum-op { color: var(--muted); }
.kfork-vf .kfork-cols > .ksum > .kfork-note { margin-top: 0 !important; }
@media (min-width: 601px) { .kfork-vf .kfork-note { min-height: 5.9em; } }
.klife-top { align-items: start; }
