/* Veri*Factu: la cadena de factures · el que és d'aquesta app i de cap altra.
   Tot el que és comú (barra, botons, taules, etiquetes…) és a ../_comu/comu.css.

   Una idea per pantalla: la cadena. Un fil d'1 px de tinta lliga els
   registres; on l'enllaç es trenca, el tram passa a vermell. L'empremta de
   cada fila i l'«anterior» de la fila de sota queden a la mateixa columna,
   alineades a la dreta, perquè es vegi a ull que són iguals. */

.vf {
  --vf-fil: 20px;          /* la columna del fil */
  --vf-col-total: 116px;
  --vf-col-emp: 228px;
}

/* Una sola columna que no pot créixer per sobre de l'amplada: sense això, les
   pestanyes (que no es parteixen) eixamplen la zona al mòbil. */
.vf-zona, .vf-panell { grid-template-columns: minmax(0, 1fr); }
.vf-curt { display: none; }

/* ═══ Zona: l'avís, les xifres i les pestanyes ═════════════════════════ */
.vf-avis {
  margin: var(--sf-e4) var(--sf-gutter) 0;
  padding: 8px 12px;
  border: var(--sf-linia) solid var(--sf-filet);
  border-left: 2px solid var(--sf-tinta);
  font-size: var(--sf-t-nota); line-height: 1.45; color: var(--sf-gris-fort);
}
.vf-avis b { color: var(--sf-tinta); font-weight: 600; }

.vf-comptadors { padding-top: var(--sf-e4); padding-bottom: var(--sf-e4); }
/* El nombre de registres va en Archivo amb xifres tabulars: en Bodoni, l'«1» es llegeix com una «I»
   («11» semblava «II»). Per id, perquè la regla de la carcassa per al mòbil no el trepitgi. */
#c-registres-n { font-family: var(--sf-sans); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
/* L'empremta no és una xifra: va en mono, i a la mateixa línia de base. */
.sf-xifra.vf-xifra-mono { font-family: var(--sf-mono); font-size: 26px; line-height: 40px; letter-spacing: -.02em; }
.vf-comptador-cadena.vf-trencada { border-top-color: var(--sf-error); }
.vf-trencada .sf-xifra, .vf-trencada .sf-comptador__nom > span:first-child { color: var(--sf-error); }
.vf-avis-refetes { color: var(--sf-dubte-text); font-weight: 600; }

/* ═══ La cadena ═════════════════════════════════════════════════════════ */
.vf-zona__cos { position: relative; }
.vf-cadena { list-style: none; margin: 0; padding: 0; }

.vf-cadena__cap, .registre {
  display: grid;
  grid-template-columns: var(--vf-fil) minmax(0, 1fr) var(--vf-col-total) var(--vf-col-emp);
  column-gap: var(--sf-e4);
  padding-left: var(--sf-gutter); padding-right: var(--sf-gutter);
}
.vf-cadena__cap {
  position: sticky; top: 0; z-index: 3;
  align-items: end;
  padding-top: var(--sf-e3); padding-bottom: 7px;
  background: var(--sf-paper);
  border-bottom: var(--sf-linia) solid var(--sf-tinta);
  font-size: var(--sf-t-petit); line-height: 1.3; color: var(--sf-gris);
}
.vf-cadena__cap .n, .vf-cadena__cap-emp { text-align: right; }
.vf-cadena__cap-sub { display: block; }

.registre {
  --vf-x: calc(var(--sf-gutter) + var(--vf-fil) / 2);   /* on passa el fil */
  --vf-y: 22px;                                          /* on és el punt */
  position: relative;
  grid-template-areas:
    "fil cap tot ant"
    "fil sub tot hash"
    "fil nota nota nota";
  row-gap: 2px;
  min-height: 60px;
  padding-top: 10px; padding-bottom: 10px;
  border-top: var(--sf-linia) solid var(--sf-filet);
  cursor: pointer;
  transition: background-color var(--sf-transicio);
}
.vf-cadena > .registre:first-child { border-top: 0; }
.registre__factura, .registre__emp { display: contents; }

/* El fil: el tram que entra (::before) i el que surt (::after). */
.registre::before, .registre::after {
  content: ''; position: absolute; z-index: 1;
  left: calc(var(--vf-x) - .5px); width: 1px; background: var(--sf-tinta);
}
.registre::before { top: -1px; height: calc(var(--vf-y) + 1px); }
.registre::after { top: var(--vf-y); bottom: 0; }
.registre[data-enllac='primer']::before, .registre[data-ultim]::after { display: none; }
.registre[data-enllac='trencat']::before { left: calc(var(--vf-x) - 1px); width: 2px; background: var(--sf-error); }
.registre__fil { grid-area: fil; }
.registre__fil i {
  position: absolute; z-index: 2;
  left: calc(var(--vf-x) - 4px); top: calc(var(--vf-y) - 4px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--sf-tinta);
}
.registre[data-enllac='primer'] .registre__fil i { background: var(--sf-paper); border: 1.5px solid var(--sf-tinta); }
.registre[data-integre='no'] .registre__fil i {
  left: calc(var(--vf-x) - 5px); top: calc(var(--vf-y) - 5px);
  width: 10px; height: 10px; background: var(--sf-error); border: 0;
}

.registre__cap { grid-area: cap; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 24px; min-width: 0; }
.registre__num { font-size: var(--sf-t-cos); font-weight: 600; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.registre__sub { grid-area: sub; font-size: var(--sf-t-nota); line-height: 1.35; color: var(--sf-gris); min-width: 0; }
.vf-ara { color: var(--sf-tinta); font-weight: 600; }
.vf-num { white-space: nowrap; }
.registre__total { grid-area: tot; display: grid; align-content: start; justify-items: end; font-variant-numeric: tabular-nums; }
.registre__import { font-size: var(--sf-t-cos); line-height: 24px; white-space: nowrap; }
.registre__abans { font-size: var(--sf-t-petit); line-height: 1.35; color: var(--sf-gris); white-space: nowrap; }
.registre__anterior, .registre__huella {
  justify-self: end; white-space: nowrap;
  font-family: var(--sf-mono); font-size: 13px; letter-spacing: -.01em;
}
.registre__anterior { grid-area: ant; line-height: 24px; color: var(--sf-gris); }
.registre__clau { font-family: var(--sf-sans); font-size: var(--sf-t-petit); letter-spacing: 0; margin-right: 2px; }
.registre__huella { grid-area: hash; display: flex; align-items: baseline; gap: 8px; line-height: 1.45; color: var(--sf-tinta); }
.registre__refeta { order: -1; font-family: var(--sf-sans); font-size: var(--sf-t-petit); letter-spacing: 0; color: var(--sf-dubte-text); }
.registre__nota { grid-area: nota; margin-top: 4px; font-size: var(--sf-t-nota); line-height: 1.4; color: var(--sf-error); }

/* Estats */
.registre[data-integre='no'] .registre__hash { color: var(--sf-error); text-decoration: line-through; text-decoration-thickness: 1px; }
.registre__anterior[data-ko] { color: var(--sf-error); }
.registre[aria-selected='true'] { background: var(--sf-paper-2); box-shadow: inset 3px 0 0 var(--sf-terra); }
.registre:focus-visible { outline-offset: -2px; }
.registre.sf-assenyalat { outline-offset: -3px; }
/* La fila de pestanyes fa scroll de costat i retallaria el contorn per dalt i per baix:
   es dibuixa per dins, amb una mica d'aire als costats que no mou res de lloc. */
.sf-pestanya.sf-assenyalat { outline-offset: -2px; padding-inline: 8px; margin-inline: -8px; }
@media (hover: hover) {
  .registre:hover { background: #fafaf8; }
  .registre[aria-selected='true']:hover { background: var(--sf-paper-2); }
}
/* «Tocada»: un segell de tinta, perquè no es confongui amb les etiquetes d'origen. */
.vf-etiq-tocada {
  min-height: 20px; padding: 0 6px; border: var(--sf-linia) solid var(--sf-tinta);
  color: var(--sf-tinta); font-weight: 600; background: var(--sf-paper);
}
.vf-etiq-tocada::before { display: none; }
/* «No quadra»: el mateix segell, en vermell. És un fet calculat, no un dubte. */
.vf-etiq-ko {
  min-height: 20px; padding: 0 6px; border: var(--sf-linia) solid var(--sf-error);
  color: var(--sf-error); font-weight: 600; background: var(--sf-paper);
}
.vf-etiq-ko::before { display: none; }
.vf-carregant { list-style: none; }

/* ═══ Peu de la zona ═══════════════════════════════════════════════════ */
.vf-zona__peu { padding-top: var(--sf-e2); padding-bottom: var(--sf-e2); }
.vf-zona__botons .sf-boto--text { margin-left: var(--sf-e3); font-size: var(--sf-t-nota); }

/* ═══ Vistes de text de la zona (exemples i «el que encerta») ═══════════ */
.vf-vista-text { padding: var(--sf-e5) var(--sf-gutter) var(--sf-e10); }
.vf-vista-text > * + * { margin-top: var(--sf-e6); }
.vf-seccio > .vf-emp-cap { margin-bottom: var(--sf-e2); }
.vf-seccio .sf-reglat { margin-top: var(--sf-e2); }
.vf-regles .sf-text, .vf-encerta .sf-text { max-width: 72ch; }
.vf-regla__peu { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vf-ref { font-family: var(--sf-mono); font-size: 13px; color: var(--sf-gris); }
.vf-h4 { font-size: var(--sf-t-nota); font-weight: 600; letter-spacing: 0; color: var(--sf-tinta); }
.vf-h4--sep { margin-top: var(--sf-e5); margin-bottom: 4px; }
.vf-taula-text td { vertical-align: top; font-size: var(--sf-t-nota); }
.vf-taula-text td.codi { white-space: nowrap; }
.vf-bases { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--sf-e4); margin-top: var(--sf-e3); font-size: var(--sf-t-nota); }
.vf-bases dt { color: var(--sf-gris); }
.vf-bases dd { overflow-wrap: anywhere; }
.vf-original { font-size: var(--sf-t-petit); color: var(--sf-gris); }
.vf-docs a { font-size: var(--sf-t-cos); font-weight: 600; }
.vf-docs .sf-nota { margin-top: 2px; }
.vf-encerta__dubte { display: grid; justify-items: start; gap: 6px; }

/* Els tres exemples de l'AEAT */
.vf-exemples { width: 100%; border-collapse: collapse; }
.vf-exemples td { padding: var(--sf-e4) 0; border-top: var(--sf-linia) solid var(--sf-filet); vertical-align: top; }
.vf-exemples tr:last-child td { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.vf-ex__cas { width: 28%; padding-right: var(--sf-e5) !important; }
.vf-ex__titol { font-size: var(--sf-t-cos); font-weight: 600; line-height: 1.35; color: var(--sf-tinta); }
.vf-veredicte { margin-top: var(--sf-e2); font-size: var(--sf-t-nota); font-weight: 600; }
.vf-veredicte--ok { color: var(--sf-ok); }
.vf-veredicte--ko { color: var(--sf-error); }
.vf-ex__dl { display: grid; gap: 4px; }
.vf-ex__dl dt { display: flex; align-items: center; gap: 8px; margin-top: var(--sf-e2); font-size: var(--sf-t-petit); color: var(--sf-gris); }
.vf-ex__dl dt:first-child { margin-top: 0; }
.vf-ex__dl .vf-hash { font-size: 14px; }

/* ═══ Panell ═══════════════════════════════════════════════════════════ */
.vf-panell { grid-template-rows: minmax(0, 1fr); }
.vf-nova { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.vf-nova__cos { padding: var(--sf-e5) var(--sf-gutter) var(--sf-e6); }
.vf-cap { display: grid; gap: 4px; min-width: 0; }
.vf-cap__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
#nova-num { font-variant-numeric: tabular-nums; }
.vf-bloc { margin-top: var(--sf-e6); }
.vf-bloc__titol { margin-bottom: var(--sf-e2); font-size: var(--sf-t-nota); font-weight: 600; letter-spacing: 0; color: var(--sf-tinta); }
.vf-client-dades { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: var(--sf-e2); }
.vf-linies td { padding-top: 6px; padding-bottom: 6px; }
.vf-linies th:nth-child(2) { width: 104px; }
.vf-linies th:nth-child(3), .vf-linies th:nth-child(4) { width: 96px; }
.vf-linies th:last-child { width: 44px; }
.vf-linia__art { font-size: var(--sf-t-cos); line-height: 1.35; }
.vf-q { width: 92px; height: var(--sf-control-petit); padding: 0 8px; font-size: var(--sf-t-cos); }
.vf-linia__treure { text-align: right; }
.vf-treure { width: var(--sf-control-petit); padding: 0; font-size: 18px; font-weight: 400; color: var(--sf-gris-fort); }
.vf-linies__buit { padding-top: var(--sf-e3) !important; }
.vf-afegeix { gap: 6px; }
.vf-afegeix__max { margin-top: var(--sf-e2); }
.vf-bloc--notes { display: grid; gap: 2px; }

.vf-nova__peu {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sf-e3) var(--sf-e5);
  padding: var(--sf-e3) var(--sf-gutter) var(--sf-e4);
  border-top: var(--sf-linia) solid var(--sf-filet); background: var(--sf-paper);
}
.vf-totals__desglos { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: var(--sf-t-nota); color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.vf-totals__total { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.vf-totals__nom { font-size: var(--sf-t-cos); font-weight: 600; }
.vf-totals__xifra { font-family: var(--sf-serif); font-size: 34px; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: lining-nums; }
.vf-emetre { display: grid; justify-items: end; gap: 6px; }
.vf-emetre .sf-boto--principal { min-height: 48px; padding: 0 28px; font-size: var(--sf-t-base); }
.vf-emetre__motiu { max-width: 30ch; text-align: right; }

/* ── El detall d'un registre ────────────────────────────────────────── */
.vf-detall { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; }
.vf-detall__dalt { display: grid; gap: var(--sf-e3); padding: var(--sf-e4) var(--sf-gutter) var(--sf-e3); }
.vf-tornar { display: none; justify-self: start; }
.vf-cap--detall { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sf-e4); }
.vf-cap__titols { display: grid; gap: 2px; min-width: 0; }
.vf-cap--detall .sf-boto { flex: none; }
.vf-d-estat { padding: 8px 12px; font-size: var(--sf-t-nota); }
.vf-d-estat:empty { display: none; }
.vf-tocar { padding-top: var(--sf-e3); border-top: var(--sf-linia) solid var(--sf-filet); }
.vf-tocar__cap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.vf-tocar__titol { font-size: var(--sf-t-nota); font-weight: 600; letter-spacing: 0; }
.vf-tocar__estat:empty { display: none; }
.vf-tocar__cap .sf-boto--text { margin-left: auto; font-size: var(--sf-t-nota); }
.vf-tocar__camps { display: flex; flex-wrap: wrap; gap: var(--sf-e2) var(--sf-e5); margin-top: var(--sf-e2); }
.vf-toc { display: grid; gap: 4px; min-width: 0; }
.vf-toc__nom { font-size: var(--sf-t-petit); color: var(--sf-gris); }
.vf-toc__control { display: flex; align-items: center; gap: 8px; }
.vf-toc__q { width: 92px; height: var(--sf-control-petit); padding: 0 8px; font-size: var(--sf-t-cos); }
.vf-toc__data { width: 158px; height: var(--sf-control-petit); padding: 0 8px; font-size: var(--sf-t-cos); }
.vf-toc__unitat { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.vf-vista { padding-top: var(--sf-e5); }

/* ── Vista «Factura»: el full, amb el QR a dalt i centrat ───────────── */
.vf-full { padding: var(--sf-e5) var(--sf-e6) var(--sf-e6); border: var(--sf-linia) solid var(--sf-filet); background: var(--sf-paper); font-size: var(--sf-t-nota); line-height: 1.45; }
.vf-qr { display: grid; justify-items: center; gap: 4px; padding-bottom: var(--sf-e4); margin-bottom: var(--sf-e4); border-bottom: var(--sf-linia) solid var(--sf-filet); }
.vf-qr__text { font-size: var(--sf-t-nota); line-height: 1.2; color: var(--sf-tinta); }
/* Només a la pantalla: diu, al costat del QR, que porta a l'entorn de proves de l'AEAT. */
.vf-qr__proves { margin-top: 2px; font-size: var(--sf-t-nota); line-height: 1.35; color: var(--sf-gris); text-align: center; max-width: 30ch; }
.vf-qr__codi { line-height: 0; }
.vf-qr__svg { width: 164px; height: 164px; }
.vf-full__cap { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sf-e4); }
.vf-full__emissor { font-size: var(--sf-t-cos); font-weight: 600; }
.vf-full__gris { color: var(--sf-gris); }
.vf-full__etiq { margin-top: 4px; }
.vf-full__num { display: grid; grid-template-columns: auto auto; gap: 2px 12px; text-align: right; }
.vf-full__num dt { color: var(--sf-gris); }
.vf-full__num dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.vf-full__client { margin-top: var(--sf-e4); }
.vf-full__linies { width: 100%; margin-top: var(--sf-e4); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vf-full__linies th { padding: 0 8px 6px 0; border-bottom: var(--sf-linia) solid var(--sf-tinta); text-align: left; font-size: var(--sf-t-petit); font-weight: 400; color: var(--sf-gris); }
.vf-full__linies td { padding: 8px 8px 8px 0; border-bottom: var(--sf-linia) solid var(--sf-filet); vertical-align: top; }
.vf-full__linies .n { text-align: right; white-space: nowrap; }
.vf-full__linies th:last-child, .vf-full__linies td:last-child { padding-right: 0; }
.vf-full__totals { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 4px 0; margin-top: var(--sf-e3); font-variant-numeric: tabular-nums; }
.vf-full__totals dt { padding-right: var(--sf-e6); text-align: right; color: var(--sf-gris); }
.vf-full__totals dd { text-align: right; }
.vf-full__avis { display: none; }
.vf-full__totals .vf-full__total { padding-top: 6px; margin-top: 2px; border-top: var(--sf-linia) solid var(--sf-tinta); font-size: var(--sf-t-base); font-weight: 600; color: var(--sf-tinta); }
.vf-full__anulada {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sf-e3);
  margin: calc(-1 * var(--sf-e2)) 0 var(--sf-e4); padding-bottom: var(--sf-e2);
  border-bottom: var(--sf-linia) solid var(--sf-error);
  font-size: var(--sf-t-cos); font-weight: 600; color: var(--sf-error);
}
.vf-full__anulada .sf-boto--text { font-size: var(--sf-t-nota); font-weight: 500; }
.vf-full--anul { display: grid; gap: var(--sf-e3); }
.vf-full__anul { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--sf-t-cos); font-weight: 600; }
.vf-full__dades { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--sf-e4); }
.vf-full__dades dt { color: var(--sf-gris); }
.vf-mono { font-family: var(--sf-mono); font-size: 13px; }

.vf-avis-qr { margin-top: var(--sf-e3); font-size: var(--sf-t-nota); }
.vf-url, .vf-params { margin-top: var(--sf-e6); }
.vf-url__cap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; }
.vf-url__copia { margin-left: auto; }
.vf-url__text { padding: 10px 12px; background: var(--sf-paper-2); font-family: var(--sf-mono); font-size: 13px; line-height: 1.5; color: var(--sf-tinta); word-break: break-all; }
.vf-url .sf-nota { margin-top: 6px; }
.vf-params__ok, .vf-params__ko { margin-top: var(--sf-e2); font-size: var(--sf-t-nota); }
.vf-params__ok { color: var(--sf-ok); }
.vf-params__ko { color: var(--sf-error); }
.vf-imprimir { margin-top: var(--sf-e5); padding-bottom: var(--sf-e2); }

/* ── Vista «Empremta»: el moment de la demo ─────────────────────────── */
.vf-emp-vered { border: var(--sf-linia) solid var(--sf-filet); }
.vf-emp-hashos { display: grid; gap: 4px; padding: var(--sf-e3) var(--sf-e4) var(--sf-e4); }
.vf-emp-hash__nom { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.vf-emp-hash__nom:not(:first-child) { margin-top: var(--sf-e3); }
/* Les empremtes en grups de 8: el text seguit (es copia sense espais), els grups els separa la graella. */
.vf-hash { display: grid; grid-template-columns: repeat(4, max-content); gap: 2px 12px; font-family: var(--sf-mono); font-size: 15px; letter-spacing: .02em; color: var(--sf-tinta); }
.vf-hash > span { white-space: nowrap; }
.vf-dif { color: var(--sf-error); }
.vf-resultat { padding: 10px var(--sf-e4); border-top: var(--sf-linia) solid var(--sf-filet); font-size: var(--sf-t-cos); line-height: 1.45; }
.vf-resultat b { font-weight: 600; }
.vf-resultat--ok { background: var(--sf-ok-fons); color: var(--sf-ok); }
.vf-resultat--ko { background: var(--sf-error-fons); color: var(--sf-error); }

.vf-emp-seccio { margin-top: var(--sf-e6); }
.vf-emp-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; }
.vf-emp-seccio > .sf-nota { margin-bottom: var(--sf-e2); }
.vf-emp-seccio > .vf-emp-origen { display: grid; justify-items: start; gap: 2px; margin-bottom: 2px; }
.vf-emp-camps { width: 100%; border-collapse: collapse; }
.vf-emp-camps th, .vf-emp-camps td { padding: 8px 10px; border-top: var(--sf-linia) solid var(--sf-filet); text-align: left; vertical-align: top; font-weight: 400; }
.vf-emp-camps tbody tr:last-child th, .vf-emp-camps tbody tr:last-child td { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.vf-emp-camps th { width: 50%; }
.vf-camp__nom { display: block; font-family: var(--sf-mono); font-size: 13px; color: var(--sf-tinta); }
.vf-camp__ca { display: block; margin-top: 1px; font-size: var(--sf-t-petit); line-height: 1.35; color: var(--sf-gris); }
.vf-camp__valor { display: block; font-family: var(--sf-mono); font-size: 14px; color: var(--sf-tinta); word-break: break-all; }
.vf-camp__buit { font-family: var(--sf-sans); font-size: var(--sf-t-petit); color: var(--sf-gris); }
.vf-camp__abans { display: block; margin-top: 2px; font-family: var(--sf-mono); font-size: 13px; color: var(--sf-gris); }
.vf-emp-camps tr[data-canviat] > * { background: var(--sf-error-fons); }
.vf-emp-camps tr[data-canviat] > th { box-shadow: inset 2px 0 0 var(--sf-error); }
.vf-emp-camps tr[data-canviat] .vf-camp__valor { color: var(--sf-error); font-weight: 600; }

.vf-text-mono { padding: 10px 12px; background: var(--sf-paper-2); font-family: var(--sf-mono); font-size: 13px; line-height: 1.6; color: var(--sf-gris-fort); word-break: break-all; overflow-wrap: anywhere; }
.vf-amp { color: var(--sf-tinta); font-weight: 700; }
.vf-canvi { color: var(--sf-error); font-weight: 600; text-decoration: underline 2px; text-underline-offset: 3px; }

.vf-emp-enllac { list-style: none; display: grid; gap: 6px; font-size: var(--sf-t-nota); line-height: 1.45; color: var(--sf-gris-fort); }
.vf-emp-enllac li { position: relative; padding-left: 16px; overflow-wrap: anywhere; }
.vf-emp-enllac li::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: currentColor; }
.vf-emp-enllac li[data-ko] { color: var(--sf-error); }
.vf-emp-anomalia ul { list-style: none; display: grid; gap: var(--sf-e2); }
.vf-emp-anomalia li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: var(--sf-t-nota); line-height: 1.45; color: var(--sf-tinta); }
.vf-codi { grid-row: span 2; font-family: var(--sf-mono); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--sf-error); }
.vf-emp-refes .sf-nota { margin-top: var(--sf-e2); }
.vf-comparacio__frase { max-width: 62ch; margin-bottom: var(--sf-e2); font-size: var(--sf-t-nota); line-height: 1.45; color: var(--sf-gris-fort); }
.vf-comparacio th { white-space: normal; }
.vf-comparacio td.codi { white-space: nowrap; }
/* La desada és la referència; el vermell només on ha canviat: la d'ara. */
.vf-comparacio tr[data-diferent] .vf-comp__ara { color: var(--sf-error); }
.vf-cua-curta { display: none; }

/* ── Vista «Registre (XML)» ─────────────────────────────────────────── */
.vf-vista > .sf-avis { margin-bottom: var(--sf-e3); font-size: var(--sf-t-nota); }
.vf-xml__cap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sf-e3); margin-bottom: var(--sf-e2); }
.vf-xml {
  margin: var(--sf-e3) 0 var(--sf-e4); padding: var(--sf-e3) 0;
  border: var(--sf-linia) solid var(--sf-filet); background: var(--sf-paper);
  font-family: var(--sf-mono); font-size: 13px; line-height: 1.6; color: var(--sf-tinta);
  white-space: pre; overflow: auto; tab-size: 2;
}
.vf-xml code { display: block; min-width: max-content; font: inherit; }
.vf-xml__l { display: block; padding: 0 var(--sf-e3); }
/* L'empremta i el registre anterior: un fons molt suau, sense colors de sintaxi. */
.vf-xml__l--marca { background: var(--sf-paper-3); }

/* ═══ «Prova això» ═════════════════════════════════════════════════════
   La posa la carcassa (v2): a l'ordinador, una franja d'una línia a baix de
   tot, i la pàgina s'escurça el que fa la franja; al mòbil, plegada.
   No la toquem: no tapa ni la cadena ni el panell. */
/* L'avís flotant de la carcassa: amb `left: 50%` s'encongia fins a mitja pantalla
   i partia «FE-2026/0151» en dues línies. Aquí fa l'amplada del text. */
.sf-flota { width: max-content; }

/* ═══ Tauleta i mòbil ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .vf-nova, .vf-detall { display: block; }
  .vf-nova__cos { padding-bottom: var(--sf-e4); }
  .vf-tornar { display: inline-flex; min-height: 44px; }
  .vf-detall__dalt { padding-top: var(--sf-e2); }
  .vf-cadena__cap { position: static; }
}

@media (max-width: 760px) {
  /* El títol de la barra passa a la fila de sota i el filet quedaria sol al costat del logotip.
     (Cal fer-ho a la carcassa per a totes les demos: és a pendents.md.) */
  .sf-barra__sep { display: none; }
  .vf-avis { margin-top: var(--sf-e3); }
  .vf-comptadors { padding-top: var(--sf-e3); }
  #c-ultima-h { font-size: 13px; line-height: 22px; padding-top: 6px; letter-spacing: 0; }
  #c-cadena-estat { font-size: 24px; line-height: 28px; }

  .vf-zona__peu { padding-top: var(--sf-e3); padding-bottom: var(--sf-e3); }
  .vf-zona__botons { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .vf-zona__botons .sf-boto { width: 100%; min-height: 44px; }
  .vf-zona__botons .sf-boto--text { margin-left: 0; }

  /* La factura nova: segments en una fila, línies com a targetes. */
  .vf-clients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .vf-clients .sf-segment { padding: 0 6px; min-height: 44px; }
  .vf-linies thead { display: none; }
  .vf-linies, .vf-linies tbody { display: block; }
  .vf-linies tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "art art treure" "q preu imp";
    align-items: center; gap: 6px 12px; padding: 10px 0; border-top: var(--sf-linia) solid var(--sf-filet);
  }
  .vf-linies tr:first-child { border-top: 0; }
  .vf-linies td { display: block; padding: 0 !important; border: 0 !important; }
  .vf-linia__art { grid-area: art; font-weight: 600; }
  .vf-linia__q { grid-area: q; }
  .vf-linia__preu { grid-area: preu; text-align: left !important; color: var(--sf-gris); }
  .vf-linia__preu::before { content: '× '; }
  .vf-linia__import { grid-area: imp; font-weight: 600; }
  .vf-linia__treure { grid-area: treure; }
  .vf-q { width: 104px; height: 44px; }
  .vf-afegeix .sf-boto { min-height: 44px; }
  .vf-nova__peu { display: grid; justify-content: stretch; }
  .vf-emetre { justify-items: stretch; }
  .vf-emetre .sf-boto--principal { width: 100%; }
  .vf-emetre__motiu { max-width: none; text-align: left; }

  /* El detall: «Anul·lar-la» al costat del número, i cada dada que es pot
     tocar en una sola fila, perquè la factura no quedi tan avall. */
  .vf-cap__titols { min-width: 0; }
  .vf-tocar__camps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-e2); }
  .vf-toc { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sf-e3); }
  .vf-toc__nom { font-size: var(--sf-t-nota); line-height: 1.35; color: var(--sf-gris-fort); }
  .vf-toc__q { width: 88px; height: 44px; }
  .vf-toc__data { width: 168px; height: 44px; }
  .vf-tocar__cap .sf-boto--text, .vf-imprimir .sf-boto--text { min-height: 44px; }
  .vf-full { padding: var(--sf-e4); }
  .vf-full__cap { flex-wrap: wrap; }
  .vf-full__num { text-align: left; }

  .vf-hash { grid-template-columns: repeat(2, max-content); }
  .vf-emp-camps, .vf-emp-camps tbody, .vf-emp-camps tr, .vf-emp-camps th, .vf-emp-camps td { display: block; width: auto; }
  .vf-emp-camps th { padding-bottom: 2px; }
  .vf-emp-camps td { padding-top: 0; border-top: 0; }
  .vf-emp-camps tbody tr:last-child th { border-bottom: 0; }
  .vf-comparacio td.codi { font-size: 13px; }
  .vf-xml { max-height: 50vh; }

  .vf-exemples, .vf-exemples tbody, .vf-exemples tr, .vf-exemples td { display: block; width: auto; }
  .vf-exemples td { border-top: 0; padding-top: 0; }
  .vf-exemples .vf-ex__cas { padding: var(--sf-e4) 0 var(--sf-e3) !important; border-top: var(--sf-linia) solid var(--sf-filet); }
  .vf-exemples tr:last-child td { border-bottom: 0; }
  .vf-exemples tr:last-child .vf-ex__dades { border-bottom: var(--sf-linia) solid var(--sf-filet); padding-bottom: var(--sf-e4); }
  .vf-bases { grid-template-columns: minmax(0, 1fr); }
}

/* Les tres pestanyes de la zona hi han de cabre senceres. */
@media (max-width: 480px) {
  .vf-llarg, .vf-cua { display: none; }
  .vf-curt, .vf-cua-curta { display: inline; }
  .vf-zona__cap .sf-pestanyes { gap: 14px; }
  .vf-zona__cap .sf-pestanya { font-size: var(--sf-t-nota); }
}

/* La cadena al mòbil: dues línies per fila. L'«anterior» s'ensenya al detall. */
@media (max-width: 640px) {
  .vf { --vf-fil: 16px; }
  .vf-cadena__cap { display: none; }
  .registre {
    grid-template-columns: var(--vf-fil) minmax(0, 1fr) auto;
    grid-template-areas:
      "fil cap tot"
      "fil sub hash"
      "fil nota nota";
    column-gap: var(--sf-e3);
    min-height: 64px;
  }
  .registre__anterior, .registre__abans { display: none; }
  .registre__huella { align-self: end; }
  /* Les que s'acaben d'emetre ensenyen també l'«anterior»: a sota de l'empremta de la fila
     d'abans, i a la mateixa columna, perquè es vegi com s'enganxen. */
  .registre[data-nova] {
    grid-template-areas:
      "fil cap tot"
      "fil sub sub"
      "fil ant ant"
      "fil hash hash"
      "fil nota nota";
  }
  .registre[data-nova] .registre__anterior { display: block; line-height: 1.45; margin-top: 4px; }
}

/* ═══ Impressió: només el full de la factura ═══════════════════════════ */
@media print {
  .vf-imprimeix-factura .vf-zona,
  .vf-imprimeix-factura #nova,
  .vf-imprimeix-factura .vf-detall__dalt,
  .vf-imprimeix-factura .vf-pestanyes-detall,
  .vf-imprimeix-factura #vista-empremta,
  .vf-imprimeix-factura #vista-xml,
  .vf-imprimeix-factura .vf-avis-qr,
  .vf-imprimeix-factura .sf-peu { display: none !important; }
  .vf-imprimeix-factura .sf-panell,
  .vf-imprimeix-factura #detall,
  .vf-imprimeix-factura .vf-detall__cos { display: block !important; height: auto; overflow: visible; }
  .vf-imprimeix-factura #vista-factura { display: block !important; padding: 0; }
  .vf-full { border: 0; padding: 0; font-size: 10pt; }
  .vf-qr__text { font-size: 10pt; }
  /* 38 mm amb el marge blanc: el codi en fa 32 i, amb el marge, no passa dels 40. */
  .vf-qr__svg { width: 38mm; height: 38mm; }
  .vf-full__linies tr, .vf-full__totals { break-inside: avoid; }
  .vf-imprimeix-factura .vf-full__avis {
    display: block; margin-top: 10mm; padding-top: 3mm; border-top: var(--sf-linia) solid var(--sf-filet);
    font-size: 9pt; line-height: 1.4; color: var(--sf-gris-fort);
  }
}