/* ─────────────────────────────────────────────────────────────────────────
 * Demos de SANFELIU · carcassa comuna · v2 (3/11/2026)
 *
 * El mateix llenguatge que la prova del plànol a la planilla (la demo 1) i
 * que sanfeliusoftware.com: tinta sobre blanc amb filets d'1 px, Archivo per
 * a tot el que es llegeix, Bodoni Moda NOMÉS per al logotip i les xifres, i
 * la mono del sistema per a codis i dades tècniques.
 *
 *   · Res de degradats, ombres ni cantonades arrodonides (els controls, 4 px).
 *   · El terra (#a63d26) és l'accent: el focus del teclat i UNA cosa
 *     seleccionada per pantalla. Mai per decorar.
 *   · Cap animació d'entrada ni de scroll. Només transicions curtes quan el
 *     visitant fa una acció, i cap amb prefers-reduced-motion.
 *   · Cap text de la pantalla per sota de 13 px.
 *
 * Totes les classes porten el prefix `sf-` perquè cada app pugui tenir les
 * seves sense trepitjar-les. Les variables (--sf-…) es poden fer servir a
 * l'estil.css de cada app; no s'hi han de redefinir.
 * ───────────────────────────────────────────────────────────────────────── */

/* ═══ Tipografia (auto-allotjada: cap petició a fora) ═══════════════════ */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/Archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/Archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('fonts/Archivo-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('fonts/Archivo-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/BodoniModa-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/BodoniModa-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══ Variables ══════════════════════════════════════════════════════════ */
:root {
  /* Color: els de la prova del plànol (demo 1), que surten de la web. */
  --sf-tinta: #111111;
  --sf-paper: #ffffff;
  --sf-paper-2: #f4f4f2;     /* llenç, files alternes, hover */
  --sf-paper-3: #ebebe8;     /* fila seleccionada */
  --sf-gris-fort: #4a4a4a;   /* cos secundari */
  --sf-gris: #6c6c6c;        /* etiquetes, peus · 5,4:1 sobre blanc (AA) */
  --sf-gris-suau: #a3a3a3;   /* NOMÉS traços i marques, mai text */
  --sf-filet: #e3e3e0;       /* filets i graelles */
  --sf-filet-fort: #c9c9c5;  /* contorn de controls */
  --sf-terra: #a63d26;       /* focus i UNA selecció per pantalla */
  --sf-terra-tint: #f6ebe8;

  /* Color funcional: només per a estat, mai decoratiu. */
  --sf-llegit: #2f6b4f;      /* el que surt tal qual del document o de la font */
  --sf-calculat: #2f5d8c;    /* el que calculem a partir del que s'ha llegit */
  --sf-dubte: #b7791f;       /* traç del que cal revisar */
  --sf-dubte-text: #6a470b;  /* text sobre fons de dubte · 7,6:1 */
  --sf-dubte-fons: #fbf1da;
  --sf-dubte-filet: #e8cf94;
  --sf-error: #9c2f1c;
  --sf-error-fons: #f8e9e5;
  --sf-ok: #2f6b4f;
  --sf-ok-fons: #e8f1ec;

  /* Tipus */
  --sf-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --sf-serif: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --sf-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --sf-t-petit: 13px;   /* el mínim de la pantalla */
  --sf-t-nota: 14px;
  --sf-t-cos: 15px;
  --sf-t-base: 16px;
  --sf-t-h3: 17px;
  --sf-t-h2: 22px;
  --sf-t-titol: 20px;   /* el títol de la barra */
  --sf-t-xifra: 40px;

  /* Espais (escala de 4) */
  --sf-e1: 4px; --sf-e2: 8px; --sf-e3: 12px; --sf-e4: 16px; --sf-e5: 20px;
  --sf-e6: 24px; --sf-e8: 32px; --sf-e10: 40px; --sf-e12: 48px;
  --sf-gutter: 24px;     /* marge lateral de la pantalla (16 px al mòbil) */

  /* Línies i controls */
  --sf-linia: 1px;
  --sf-radi: 4px;        /* només els controls; els blocs no s'arrodoneixen */
  --sf-control: 40px;    /* alçada dels botons (44 px amb dit) */
  --sf-control-petit: 32px;
  --sf-barra-alt: 60px;
  --sf-transicio: .16s cubic-bezier(.4, 0, .2, 1);
}
@media (max-width: 760px) { :root { --sf-gutter: 16px; --sf-t-xifra: 34px; } }
@media (pointer: coarse) { :root { --sf-control: 44px; --sf-control-petit: 44px; } }

/* ═══ Base ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sf-sans);
  font-size: var(--sf-t-base);
  line-height: 1.5;
  color: var(--sf-tinta);
  background: var(--sf-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga';
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }
::selection { background: var(--sf-tinta); color: var(--sf-paper); }
:focus-visible { outline: 2px solid var(--sf-terra); outline-offset: 2px; }
.sf-amagat {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sf-mono { font-family: var(--sf-mono); font-size: .9em; }
.sf-num { font-variant-numeric: tabular-nums; }
.sf-gris { color: var(--sf-gris); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ═══ Estructura de la pàgina ════════════════════════════════════════════
 * <body class="sf"> amb tres fills: la barra, l'app (<main class="sf-app">)
 * i el peu. Amb `sf--pantalla`, a l'ordinador l'app omple la finestra i no
 * hi ha scroll de pàgina (com la prova); al mòbil sempre es fa scroll.
 */
.sf { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.sf-app { min-width: 0; min-height: 0; }
@media (min-width: 901px) {
  .sf--pantalla { height: 100vh; height: 100dvh; overflow: hidden; }
}

/* ── La barra ────────────────────────────────────────────────────────── */
.sf-barra {
  display: flex; align-items: center; gap: var(--sf-e4);
  min-height: var(--sf-barra-alt);
  padding: 0 var(--sf-gutter);
  border-bottom: var(--sf-linia) solid var(--sf-filet);
  background: var(--sf-paper);
  min-width: 0;
}
.sf-barra__logo { display: block; flex: none; line-height: 0; border-radius: 2px; }
/* 34 px d'alt: 111 px d'ample, per sobre del mínim de la marca (104 px). */
.sf-barra__logo img { height: 34px; width: auto; }
.sf-barra__sep { width: 1px; height: 28px; background: var(--sf-filet-fort); flex: none; }
.sf-barra__titols { display: flex; align-items: baseline; gap: var(--sf-e4); min-width: 0; flex: 1 1 auto; }
.sf-barra__titol { font-size: var(--sf-t-titol); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; white-space: nowrap; flex: none; }
.sf-barra__subtitol { font-size: var(--sf-t-cos); color: var(--sf-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sf-barra__accions { display: flex; align-items: center; gap: var(--sf-e2); flex: none; margin-left: auto; }
.sf-barra__accions .sf-etiq { margin-right: var(--sf-e2); }
.sf-barra .sf-boto { height: 36px; min-height: 36px; padding: 0 14px; font-size: var(--sf-t-nota); }
.sf-boto__curt { display: none; }
@media (max-width: 1180px) { .sf-barra__subtitol { display: none; } }
@media (max-width: 960px) { .sf-barra__accions .sf-etiq { display: none; } }
/* Al mòbil, dues files: la marca i el títol a dalt; els tres botons a sota,
   sempre a la vista i sempre al mateix lloc. */
@media (max-width: 760px) {
  .sf-barra { flex-wrap: wrap; gap: 0 var(--sf-e3); padding-top: var(--sf-e2); padding-bottom: var(--sf-e2); }
  .sf-barra__logo img { height: 28px; }
  .sf-barra__sep { height: 24px; }
  .sf-barra__titols { min-height: 44px; align-items: center; }
  .sf-barra__titol { font-size: 17px; white-space: normal; flex: 1 1 auto; }
  .sf-barra__accions {
    flex: 1 0 100%; margin: var(--sf-e1) 0 0;
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--sf-e2);
  }
  .sf-barra .sf-boto { height: 44px; min-height: 44px; padding: 0 12px; }
  .sf-boto__llarg { display: none; }
  .sf-boto__curt { display: inline; }
}

/* ── El peu: la font, citada ─────────────────────────────────────────── */
.sf-peu {
  display: flex; align-items: center; gap: var(--sf-e3) var(--sf-e6); flex-wrap: wrap;
  min-height: 44px; padding: var(--sf-e2) var(--sf-gutter);
  border-top: var(--sf-linia) solid var(--sf-filet);
  font-size: var(--sf-t-nota); line-height: 1.4; color: var(--sf-gris-fort);
  background: var(--sf-paper);
}
.sf-peu__font { min-width: 0; flex: 1 1 28rem; }
.sf-peu__font b { font-weight: 600; color: var(--sf-tinta); }
.sf-peu__font .sf-boto--text { font-size: inherit; }
.sf-peu__nota { color: var(--sf-gris); margin-left: auto; }
.sf-peu__nota a { color: var(--sf-gris); }
@media (max-width: 760px) {
  .sf-peu { padding-top: var(--sf-e4); padding-bottom: calc(var(--sf-e4) + env(safe-area-inset-bottom)); }
  .sf-peu__nota { margin-left: 0; }
}

/* ═══ Disposicions ═══════════════════════════════════════════════════════
 * `sf-dividit`: la zona principal (plànol, gràfic, document) a l'esquerra i
 * el panell de treball a la dreta, com a la prova. Al mòbil, s'apilen.
 */
.sf-dividit { display: grid; grid-template-columns: minmax(0, 60fr) minmax(min(520px, 100%), 40fr); min-height: 0; height: 100%; }
.sf-zona { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; border-right: var(--sf-linia) solid var(--sf-filet); }
.sf-panell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.sf-desplacable { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
@media (max-width: 900px) {
  .sf-dividit { grid-template-columns: minmax(0, 1fr); height: auto; }
  .sf-zona { border-right: 0; border-bottom: var(--sf-linia) solid var(--sf-filet); grid-template-rows: auto minmax(0, auto) auto; }
  .sf-panell { grid-template-rows: auto; }
  .sf-desplacable { overflow: visible; }
}

/* Una sola columna de lectura, per a les demos que no són una eina. */
.sf-pagina { max-width: 1120px; margin: 0 auto; padding: var(--sf-e10) var(--sf-gutter) var(--sf-e12); }

/* Barra d'eines d'una zona o d'un panell (52 px, filet a sota). */
.sf-eines {
  display: flex; align-items: center; gap: var(--sf-e3);
  min-height: 52px; padding: var(--sf-e2) var(--sf-gutter);
  border-bottom: var(--sf-linia) solid var(--sf-filet);
  font-size: var(--sf-t-cos); min-width: 0; flex-wrap: wrap;
}
.sf-eines__titol { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sf-eines__titol span { font-weight: 400; color: var(--sf-gris); }
.sf-eines__dreta { margin-left: auto; display: flex; gap: var(--sf-e2); align-items: center; flex-wrap: wrap; }

/* El llenç: on viu el plànol, el gràfic o el document. */
.sf-llenc { position: relative; min-height: 0; overflow: hidden; background: var(--sf-paper-2); }
@media (max-width: 900px) { .sf-llenc { height: min(62vh, 520px); } }

/* Peu d'una zona: la llegenda i la nota de la font del que es veu. */
.sf-zona__peu {
  display: flex; align-items: center; gap: var(--sf-e3) var(--sf-e5); flex-wrap: wrap;
  min-height: 40px; padding: 6px var(--sf-gutter);
  border-top: var(--sf-linia) solid var(--sf-filet);
  font-size: var(--sf-t-nota); line-height: 1.35; color: var(--sf-gris-fort);
}
.sf-zona__peu > :last-child:not(:first-child) { margin-left: auto; }
@media (max-width: 760px) { .sf-zona__peu > :last-child:not(:first-child) { margin-left: 0; } }

.sf-seccio { padding: var(--sf-e5) var(--sf-gutter); }
.sf-seccio + .sf-seccio { border-top: var(--sf-linia) solid var(--sf-filet); }
.sf-peu-panell {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sf-e3); flex-wrap: wrap;
  padding: var(--sf-e3) var(--sf-gutter); border-top: var(--sf-linia) solid var(--sf-filet); background: var(--sf-paper);
}

/* ═══ Text ═══════════════════════════════════════════════════════════════ */
.sf-h2 { font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.sf-h3 { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.sf-entrada { font-size: var(--sf-t-base); color: var(--sf-gris-fort); max-width: 62ch; }
.sf-text { font-size: var(--sf-t-cos); color: var(--sf-gris-fort); max-width: 66ch; }
.sf-text p + p, .sf-text p + ul, .sf-text ul + p { margin-top: .7em; }
.sf-text ul { padding-left: 1.1em; }
.sf-text li + li { margin-top: .3em; }
.sf-text strong { color: var(--sf-tinta); font-weight: 600; }
.sf-nota { font-size: var(--sf-t-nota); color: var(--sf-gris); line-height: 1.45; }

/* Llista reglada: el patró de la marca per a passos, fonts i resultats. */
.sf-reglat { list-style: none; padding: 0; margin: 0; }
.sf-reglat > li { border-top: var(--sf-linia) solid var(--sf-filet); padding: var(--sf-e3) 0; }
.sf-reglat > li:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }

/* ═══ Xifres ═════════════════════════════════════════════════════════════
 * Bodoni només aquí. Un filet de tinta a sobre; el nom, a sota, en gris.
 */
.sf-comptadors {
  display: grid; grid-template-columns: repeat(var(--sf-comptadors, 3), minmax(0, 1fr));
  gap: var(--sf-e4) var(--sf-e5); padding: var(--sf-e4) var(--sf-gutter) var(--sf-e4);
}
.sf-comptador { border-top: var(--sf-linia) solid var(--sf-tinta); padding-top: var(--sf-e2); min-width: 0; }
.sf-xifra { font-family: var(--sf-serif); font-weight: 400; font-size: var(--sf-t-xifra); line-height: 1; letter-spacing: -.01em; white-space: nowrap; display: block; font-variant-numeric: lining-nums; }
.sf-xifra small { font-family: var(--sf-sans); font-size: var(--sf-t-cos); color: var(--sf-gris); margin-left: 4px; letter-spacing: 0; }
.sf-comptador__nom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--sf-t-nota); color: var(--sf-gris); margin-top: 6px; line-height: 1.35; }
.sf-comptador--alerta .sf-xifra { color: var(--sf-dubte); }
/* Al mòbil, dues columnes; amb tres comptadors curts, l'app pot posar
   --sf-comptadors-mobil: 3 i la xifra es fa una mica més petita. */
@media (max-width: 760px) {
  .sf-comptadors { grid-template-columns: repeat(var(--sf-comptadors-mobil, 2), minmax(0, 1fr)); gap: var(--sf-e4) var(--sf-e3); }
  .sf-comptadors[style*='--sf-comptadors-mobil: 3'] .sf-xifra { font-size: 28px; }
}

/* ═══ Botons ═════════════════════════════════════════════════════════════
 * Un sol principal (tinta plena) per pantalla. La resta, contorn.
 */
.sf-boto {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-e2);
  min-height: var(--sf-control); padding: 0 18px;
  border: var(--sf-linia) solid var(--sf-tinta); border-radius: var(--sf-radi);
  background: var(--sf-paper); color: var(--sf-tinta);
  font-family: var(--sf-sans); font-size: var(--sf-t-cos); font-weight: 600; letter-spacing: -.005em; line-height: 1.15;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--sf-transicio), border-color var(--sf-transicio), color var(--sf-transicio);
}
.sf-boto--principal { background: var(--sf-tinta); color: var(--sf-paper); }
.sf-boto--discret { border-color: var(--sf-filet-fort); color: var(--sf-gris-fort); font-weight: 500; }
.sf-boto--petit { min-height: var(--sf-control-petit); padding: 0 12px; font-size: var(--sf-t-nota); }
.sf-boto--text {
  min-height: 0; padding: 0; border: 0; background: none; font-weight: 500; color: inherit;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sf-filet-fort);
}
.sf-boto:disabled, .sf-boto[aria-disabled='true'] { border-color: var(--sf-filet-fort); color: var(--sf-gris-suau); background: var(--sf-paper); cursor: not-allowed; }
.sf-boto--principal:disabled { background: var(--sf-paper-3); color: var(--sf-gris); border-color: var(--sf-paper-3); }
.sf-boto__fora::after { content: '↗'; font-weight: 400; margin-left: 2px; }
.sf-botonera { display: flex; flex-wrap: wrap; gap: var(--sf-e2); align-items: center; }

/* Eina: botó quadrat d'una barra d'eines (−, +, Ajustar). */
.sf-eina {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--sf-control-petit); min-width: var(--sf-control-petit); padding: 0 10px;
  border: var(--sf-linia) solid var(--sf-filet-fort); border-radius: var(--sf-radi);
  background: var(--sf-paper); font-size: var(--sf-t-cos); font-weight: 600; line-height: 1; cursor: pointer;
  transition: border-color var(--sf-transicio);
}
.sf-eina[aria-pressed='false'] { color: var(--sf-gris); }

/* Segments: triar una opció d'un grup curt (sectors, vistes, unitats). */
.sf-segments { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sf-segment {
  min-height: var(--sf-control-petit); padding: 0 12px;
  border: var(--sf-linia) solid var(--sf-filet-fort); border-radius: var(--sf-radi);
  background: var(--sf-paper); color: var(--sf-gris-fort);
  font-size: var(--sf-t-nota); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: border-color var(--sf-transicio), background-color var(--sf-transicio), color var(--sf-transicio);
}
.sf-segment[aria-pressed='true'] { background: var(--sf-tinta); border-color: var(--sf-tinta); color: var(--sf-paper); }

/* ═══ Pestanyes ═════════════════════════════════════════════════════════ */
.sf-pestanyes { display: flex; gap: var(--sf-e5); padding: 0 var(--sf-gutter); border-bottom: var(--sf-linia) solid var(--sf-filet); overflow-x: auto; scrollbar-width: none; }
.sf-pestanyes::-webkit-scrollbar { display: none; }
.sf-pestanya {
  flex: none; background: none; border: 0; padding: 12px 0 11px; margin-bottom: -1px;
  min-height: 44px; min-width: 44px;
  font-size: var(--sf-t-cos); font-weight: 600; color: var(--sf-gris); cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--sf-transicio), border-color var(--sf-transicio);
}
.sf-pestanya[aria-selected='true'] { color: var(--sf-tinta); border-bottom-color: var(--sf-tinta); }
.sf-pestanya:focus-visible { outline-offset: -2px; }
.sf-vista { padding: var(--sf-e4) var(--sf-gutter) var(--sf-e6); }

/* ═══ Camps ═════════════════════════════════════════════════════════════ */
.sf-camp { display: grid; gap: 6px; min-width: 0; }
.sf-camp__nom { font-size: var(--sf-t-nota); color: var(--sf-gris-fort); display: flex; justify-content: space-between; gap: var(--sf-e2); }
.sf-camp__nom output, .sf-camp__valor { color: var(--sf-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-entrada-text, .sf-selector {
  height: var(--sf-control); padding: 0 12px; width: 100%;
  border: var(--sf-linia) solid var(--sf-filet-fort); border-radius: var(--sf-radi);
  background: var(--sf-paper); font-size: var(--sf-t-base);
  transition: border-color var(--sf-transicio);
}
.sf-entrada-text:focus, .sf-selector:focus { border-color: var(--sf-tinta); outline: none; }
.sf-entrada-text:focus-visible, .sf-selector:focus-visible { outline: 2px solid var(--sf-terra); outline-offset: 1px; }
.sf-entrada-text--num { text-align: right; font-variant-numeric: tabular-nums; }
.sf-selector { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23111' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
textarea.sf-entrada-text { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.sf-casella { display: inline-flex; align-items: center; gap: var(--sf-e2); font-size: var(--sf-t-cos); cursor: pointer; min-height: 32px; }
.sf-casella input { width: 18px; height: 18px; margin: 0; accent-color: var(--sf-tinta); }

/* Control lliscant: un fil fi, la part triada en tinta i un cercle blanc.
   comu.js manté --sf-pc (0-100 %) a cada <input type=range class=sf-lliscant>. */
.sf-lliscant {
  --sf-pc: 50%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
}
.sf-lliscant::-webkit-slider-runnable-track {
  height: 2px; border-radius: 1px;
  background: linear-gradient(to right, var(--sf-tinta) 0 var(--sf-pc), var(--sf-filet-fort) var(--sf-pc) 100%);
}
.sf-lliscant::-moz-range-track { height: 2px; background: var(--sf-filet-fort); }
.sf-lliscant::-moz-range-progress { height: 2px; background: var(--sf-tinta); }
.sf-lliscant::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -8px; border-radius: 50%;
  background: var(--sf-paper); border: 1.5px solid var(--sf-tinta);
}
.sf-lliscant::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--sf-paper); border: 1.5px solid var(--sf-tinta); }
.sf-lliscant:focus { outline: none; }
.sf-lliscant:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--sf-terra); outline-offset: 2px; }
.sf-lliscant:focus-visible::-moz-range-thumb { outline: 2px solid var(--sf-terra); outline-offset: 2px; }
@media (pointer: coarse) {
  .sf-lliscant { height: 44px; }
  .sf-lliscant::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -12px; }
  .sf-lliscant::-moz-range-thumb { width: 24px; height: 24px; }
}
.sf-lliscant__marques { display: flex; justify-content: space-between; font-size: var(--sf-t-petit); color: var(--sf-gris); margin-top: -2px; }

/* Zona per deixar-hi un fitxer. */
.sf-deixar {
  display: grid; place-items: center; gap: var(--sf-e2); text-align: center;
  padding: var(--sf-e8) var(--sf-e5); border: 1px dashed var(--sf-filet-fort); border-radius: var(--sf-radi);
  font-size: var(--sf-t-cos); color: var(--sf-gris-fort); cursor: pointer;
  transition: border-color var(--sf-transicio), background-color var(--sf-transicio);
}
.sf-deixar[data-sobre] { border-color: var(--sf-tinta); background: var(--sf-paper-2); }

/* ═══ Taules ════════════════════════════════════════════════════════════ */
.sf-taula-caixa { overflow-x: auto; min-width: 0; }
.sf-taula { width: 100%; border-collapse: collapse; font-size: var(--sf-t-cos); font-variant-numeric: tabular-nums; }
.sf-taula th {
  position: sticky; top: 0; z-index: 1; background: var(--sf-paper);
  text-align: left; font-weight: 400; font-size: var(--sf-t-nota); color: var(--sf-gris);
  padding: 10px 8px 8px; border-bottom: var(--sf-linia) solid var(--sf-tinta); white-space: nowrap; vertical-align: bottom;
}
.sf-taula td { padding: 9px 8px; border-top: var(--sf-linia) solid var(--sf-filet); vertical-align: middle; }
.sf-taula tbody tr:first-child td { border-top: 0; }
.sf-taula th:first-child, .sf-taula td:first-child { padding-left: 0; }
.sf-taula th:last-child, .sf-taula td:last-child { padding-right: 0; }
.sf-taula .n { text-align: right; white-space: nowrap; }
.sf-taula .codi { font-family: var(--sf-mono); font-size: var(--sf-t-nota); }
.sf-taula tbody tr[data-clicable] { cursor: pointer; }
.sf-taula tbody tr[data-clicable]:hover td { background: #fafaf8; }
.sf-taula tbody tr[aria-selected='true'] td { background: var(--sf-paper-3); }
.sf-taula tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--sf-terra); padding-left: 8px; }
.sf-taula tbody tr.sf-fila--dubte td { background: var(--sf-dubte-fons); }
.sf-taula tfoot td { border-top: var(--sf-linia) solid var(--sf-tinta); font-weight: 600; padding-top: 10px; }
.sf-taula caption { caption-side: bottom; text-align: left; font-size: var(--sf-t-nota); color: var(--sf-gris); padding-top: var(--sf-e3); }
@media (pointer: coarse) { .sf-taula td { padding-top: 12px; padding-bottom: 12px; } }

/* ═══ Etiquetes d'honestedat ════════════════════════════════════════════
 * Diuen d'on surt cada cosa. Sempre amb text, mai només amb color.
 *   Llegit          tal qual del document o de la font
 *   Calculat        ho hem calculat a partir del que s'ha llegit
 *   Dubte           cal que ho miri una persona
 *   Dades d'exemple inventat per a la demo, amb noms genèrics
 *   Dada pública    d'una font oficial o oberta, citada al panell de fonts
 */
.sf-etiq {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 2px 8px;
  border: var(--sf-linia) solid currentColor; border-radius: 2px;
  font-size: var(--sf-t-petit); font-weight: 600; line-height: 1.2; letter-spacing: 0;
  white-space: nowrap; vertical-align: middle; background: var(--sf-paper);
}
.sf-etiq::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sf-etiq--llegit { color: var(--sf-llegit); }
.sf-etiq--calculat { color: var(--sf-calculat); }
.sf-etiq--calculat::before { border-radius: 0; transform: rotate(45deg) scale(.85); }
.sf-etiq--dubte { color: var(--sf-dubte-text); background: var(--sf-dubte-fons); border-color: var(--sf-dubte-filet); }
.sf-etiq--dubte::before { background: var(--sf-dubte); }
.sf-etiq--exemple { color: var(--sf-gris-fort); border-style: dashed; border-color: var(--sf-gris); }
.sf-etiq--exemple::before { background: none; border: 1.5px solid currentColor; width: 6px; height: 6px; }
.sf-etiq--public { color: var(--sf-tinta); }
.sf-etiq--public::before { border-radius: 0; width: 6px; height: 6px; }
/* Variant sense vora, per a una cel·la de taula o un nom de comptador. */
.sf-etiq--pla { border: 0; padding: 0; min-height: 0; background: none; font-weight: 500; }
.sf-etiq--dubte.sf-etiq--pla { background: none; }

/* Llegenda d'un gràfic o d'un plànol. */
.sf-llegenda { display: flex; align-items: center; gap: var(--sf-e2) var(--sf-e4); flex-wrap: wrap; font-size: var(--sf-t-nota); color: var(--sf-gris-fort); }
.sf-llegenda > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sf-llegenda i { display: inline-block; flex: none; width: 18px; height: 0; border-top: 2px solid currentColor; }
.sf-llegenda i.sf-quadre { width: 12px; height: 12px; border: 2px solid currentColor; }
.sf-llegenda i.sf-puntejat { border-top-style: dashed; }

/* ═══ Avisos ════════════════════════════════════════════════════════════ */
.sf-avis {
  display: grid; gap: 4px;
  padding: var(--sf-e3) var(--sf-e4); border: var(--sf-linia) solid var(--sf-filet); border-left: 2px solid var(--sf-tinta);
  font-size: var(--sf-t-cos); line-height: 1.45; color: var(--sf-gris-fort); background: var(--sf-paper);
}
.sf-avis b, .sf-avis strong, .sf-avis__titol { color: var(--sf-tinta); font-weight: 600; }
.sf-avis--dubte { background: var(--sf-dubte-fons); border-color: var(--sf-dubte-filet); border-left-color: var(--sf-dubte); color: var(--sf-dubte-text); }
.sf-avis--dubte b, .sf-avis--dubte strong, .sf-avis--dubte .sf-avis__titol { color: var(--sf-dubte-text); }
.sf-avis--error { background: var(--sf-error-fons); border-color: #e6c3b9; border-left-color: var(--sf-error); color: var(--sf-error); }
.sf-avis--error b, .sf-avis--error strong, .sf-avis--error .sf-avis__titol { color: var(--sf-error); }
.sf-avis--ok { background: var(--sf-ok-fons); border-color: #c4dccd; border-left-color: var(--sf-ok); color: var(--sf-ok); }
.sf-avis--ok b, .sf-avis--ok strong, .sf-avis--ok .sf-avis__titol { color: var(--sf-ok); }

/* Avís flotant curt («CSV baixat»): apareix com a resposta a una acció. */
.sf-flota {
  position: fixed; z-index: 70; left: 50%; bottom: calc(var(--sf-e6) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100vw - 2 * var(--sf-gutter));
  padding: 10px 16px; background: var(--sf-tinta); color: var(--sf-paper);
  font-size: var(--sf-t-cos); line-height: 1.4; border-radius: var(--sf-radi);
  pointer-events: none;
}

/* ═══ Estats: buit, carregant, error ════════════════════════════════════ */
.sf-estat {
  display: grid; justify-items: start; align-content: center; gap: var(--sf-e3);
  min-height: 200px; padding: var(--sf-e8) var(--sf-gutter);
  font-size: var(--sf-t-cos); color: var(--sf-gris-fort);
}
.sf-estat__titol { font-size: var(--sf-t-h3); font-weight: 600; color: var(--sf-tinta); letter-spacing: -.015em; }
.sf-estat__text { max-width: 52ch; }
.sf-estat--error .sf-estat__titol { color: var(--sf-error); }
.sf-progres { width: min(280px, 100%); height: 2px; background: var(--sf-filet); position: relative; overflow: hidden; }
.sf-progres > span { position: absolute; inset: 0 auto 0 0; width: var(--sf-pc, 0%); background: var(--sf-tinta); transition: width var(--sf-transicio); }

/* ═══ Diàlegs i calaix lateral (<dialog>) ═══════════════════════════════
 * Els obre comu.js amb showModal(): el focus hi queda atrapat, Esc tanca i
 * el fons queda inert.
 */
.sf-dialeg, .sf-calaix {
  padding: 0; border: var(--sf-linia) solid var(--sf-tinta); border-radius: 0;
  background: var(--sf-paper); color: var(--sf-tinta);
  max-width: calc(100vw - 2 * var(--sf-gutter));
}
.sf-dialeg::backdrop, .sf-calaix::backdrop { background: rgba(17, 17, 17, .38); }
.sf-dialeg { width: min(680px, 100%); max-height: calc(100dvh - 48px); overflow: hidden; }
.sf-dialeg[open], .sf-calaix[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.sf-calaix {
  position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: none;
  width: min(520px, 100vw); max-width: 100vw;
  border-width: 0 0 0 var(--sf-linia);
}
.sf-dialeg__cap { display: flex; align-items: center; gap: var(--sf-e4); padding: var(--sf-e5) var(--sf-e6) var(--sf-e4); border-bottom: var(--sf-linia) solid var(--sf-filet); }
.sf-dialeg__cap h2 { font-size: var(--sf-t-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.sf-dialeg__cap .sf-boto { margin-left: auto; }
.sf-dialeg__cos { overflow-y: auto; padding: var(--sf-e5) var(--sf-e6) var(--sf-e6); overscroll-behavior: contain; }
.sf-dialeg__peu { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-e3); flex-wrap: wrap; padding: var(--sf-e3) var(--sf-e6); border-top: var(--sf-linia) solid var(--sf-filet); }
.sf-dialeg__cos > * + * { margin-top: var(--sf-e5); }
.sf-dialeg__cos h3 { font-size: var(--sf-t-cos); font-weight: 600; color: var(--sf-tinta); margin-bottom: var(--sf-e2); }
@media (max-width: 760px) {
  .sf-dialeg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; }
  .sf-dialeg__cap, .sf-dialeg__cos, .sf-dialeg__peu { padding-left: var(--sf-gutter); padding-right: var(--sf-gutter); }
  .sf-dialeg__peu { padding-bottom: calc(var(--sf-e3) + env(safe-area-inset-bottom)); }
  .sf-calaix { border: 0; }
}

/* ── Panell de fonts ─────────────────────────────────────────────────── */
.sf-fonts { list-style: none; padding: 0; margin: 0; }
.sf-fonts > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 var(--sf-e3); padding: var(--sf-e4) 0; border-top: var(--sf-linia) solid var(--sf-filet); }
.sf-fonts > li:last-child { border-bottom: var(--sf-linia) solid var(--sf-filet); }
.sf-fonts__num { font-family: var(--sf-sans); font-size: var(--sf-t-cos); font-weight: 600; line-height: 1.5; color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.sf-fonts__nom { font-size: var(--sf-t-base); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.sf-fonts__titular { font-size: var(--sf-t-nota); color: var(--sf-gris); margin-top: 2px; }
.sf-fonts__us { font-size: var(--sf-t-cos); color: var(--sf-gris-fort); margin-top: var(--sf-e2); }
.sf-fonts dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--sf-e3); margin-top: var(--sf-e3); font-size: var(--sf-t-nota); }
.sf-fonts dt { color: var(--sf-gris); }
.sf-fonts dd { color: var(--sf-tinta); overflow-wrap: anywhere; }
.sf-fonts .sf-etiq { margin-top: var(--sf-e2); }
.sf-fonts__grup { font-size: var(--sf-t-cos); font-weight: 600; margin: var(--sf-e6) 0 var(--sf-e2); display: flex; align-items: center; gap: var(--sf-e2); }
.sf-fonts__grup:first-child { margin-top: 0; }

/* ── Com funciona ────────────────────────────────────────────────────── */
.sf-fa { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-e5); }
.sf-fa ul { list-style: none; padding: 0; font-size: var(--sf-t-cos); color: var(--sf-gris-fort); }
.sf-fa li { border-top: var(--sf-linia) solid var(--sf-filet); padding: 8px 0; }
@media (max-width: 760px) { .sf-fa { grid-template-columns: 1fr; } }

/* ═══ «Prova això»: els tres passos (v2) ════════════════════════════════
 * No és modal: es pot fer servir l'app amb la guia oberta. Només s'hi veu el
 * pas d'ara (el comptador diu quants se n'han fet). comu.js decideix on va:
 *
 *   · .sf-guia (sense res més): la targeta de la v1, fixa a baix a l'esquerra.
 *     És la base que recol·loquen les apps de la v1; no se'n canvia la posició.
 *   · .sf-guia--franja: a l'ordinador, quan l'app no l'ha recol·locada. Una
 *     franja fixa a baix de tot, i <html class="sf-guia-franja"> fa que la
 *     pàgina s'escurci el que fa la franja: no tapa res.
 *   · .sf-guia--en-lloc: dins d'un lloc de l'app (iniciar({ guia: { lloc } })).
 *   · Al mòbil, una franja fixa a baix, plegada en una línia
 *     ([data-sf-guia='plegada']) o oberta, mai més alta que un quart de pantalla.
 */
.sf-guia {
  position: fixed; z-index: 40;
  /* Per sobre del peu i del peu d'una zona (40 px), perquè no tapi la llegenda. */
  left: var(--sf-gutter); bottom: calc(var(--sf-peu-alt, 44px) + 56px);
  width: min(380px, calc(100vw - 2 * var(--sf-gutter)));
  background: var(--sf-paper); border: var(--sf-linia) solid var(--sf-tinta);
}
.sf-guia__cap { display: flex; align-items: baseline; gap: var(--sf-e3); padding: var(--sf-e4) var(--sf-e5) var(--sf-e2); }
.sf-guia__cap h2 { font-size: var(--sf-t-h3); font-weight: 600; letter-spacing: -.015em; }
.sf-guia__compte { margin-left: auto; font-size: var(--sf-t-nota); color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.sf-guia ol { list-style: none; padding: 0 var(--sf-e5); margin: 0; }
.sf-guia li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 var(--sf-e2); padding: 10px 0; border-top: var(--sf-linia) solid var(--sf-filet); }
/* Només el pas d'ara; fets tots tres, només la frase final. */
.sf-guia li:not([aria-current='step']) { display: none; }
.sf-guia[data-sf-acabada] ol { display: none; }
/* El número, en Archivo: en Bodoni, a aquesta mida l'1 es llegeix «I». */
.sf-guia__n { font-family: var(--sf-sans); font-size: var(--sf-t-cos); font-weight: 600; line-height: 1.4; color: var(--sf-gris); font-variant-numeric: tabular-nums; }
.sf-guia__text { font-size: var(--sf-t-cos); line-height: 1.4; color: var(--sf-gris-fort); min-width: 0; }
.sf-guia li[aria-current='step'] .sf-guia__n { color: var(--sf-tinta); }
.sf-guia li[aria-current='step'] .sf-guia__text { color: var(--sf-tinta); }
.sf-guia li[data-fet] .sf-guia__text { color: var(--sf-gris); text-decoration: line-through; text-decoration-color: var(--sf-gris-suau); }
.sf-guia li[data-fet] .sf-guia__n { color: var(--sf-llegit); }
.sf-guia__mostra { grid-column: 2; justify-self: start; margin-top: 6px; }
.sf-guia__final { padding: 10px var(--sf-e5) 0; font-size: var(--sf-t-cos); color: var(--sf-tinta); border-top: var(--sf-linia) solid var(--sf-filet); }
.sf-guia__peu { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-e3); padding: var(--sf-e3) var(--sf-e5) var(--sf-e4); }
/* «Entesos» és secundari: mai el botó ple. Al final porta sf-boto--principal
   només per compatibilitat amb proves de la v1; es veu de contorn. */
.sf-guia .sf-guia__entesos.sf-boto--principal { background: var(--sf-paper); color: var(--sf-tinta); border-color: var(--sf-tinta); }
.sf-guia__plega { display: none; }

/* ── Franja (ordinador) i dins d'un lloc de l'app ─────────────────────── */
@media (min-width: 761px) {
  .sf-guia.sf-guia--franja {
    left: 0; right: 0; bottom: 0; width: auto;
    border-width: var(--sf-linia) 0 0;
    padding: 10px var(--sf-gutter) calc(10px + env(safe-area-inset-bottom));
  }
  .sf-guia-franja body { padding-bottom: var(--sf-guia-alt, 0px); }
  /* El que porta el focus o un scrollIntoView no queda a sota de la franja. */
  :where(html.sf-guia-franja) { scroll-padding-bottom: var(--sf-guia-alt, 0px); }
  /* L'avís de baix, per sobre de la franja (si l'app no el col·loca ella). */
  :where(.sf-guia-franja) .sf-flota { bottom: calc(var(--sf-guia-alt, 0px) + var(--sf-e6)); }
}
.sf-guia.sf-guia--en-lloc {
  position: static; z-index: auto; width: auto;
  border: 0; border-bottom: var(--sf-linia) solid var(--sf-filet);
  padding: 10px var(--sf-gutter);
}
.sf-guia:is(.sf-guia--franja, .sf-guia--en-lloc) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-e2) var(--sf-e6); }
.sf-guia:is(.sf-guia--franja, .sf-guia--en-lloc)[hidden] { display: none; }
:is(.sf-guia--franja, .sf-guia--en-lloc) .sf-guia__cap { flex: none; padding: 0; gap: var(--sf-e2); }
:is(.sf-guia--franja, .sf-guia--en-lloc) .sf-guia__cap h2 { font-size: var(--sf-t-cos); }
:is(.sf-guia--franja, .sf-guia--en-lloc) .sf-guia__compte { margin-left: 0; }
:is(.sf-guia--franja, .sf-guia--en-lloc) ol,
:is(.sf-guia--franja, .sf-guia--en-lloc) .sf-guia__final { flex: 1 1 22rem; min-width: 0; padding: 0; border: 0; }
:is(.sf-guia--franja, .sf-guia--en-lloc) li { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 var(--sf-e3); padding: 0; border: 0; }
:is(.sf-guia--franja, .sf-guia--en-lloc) .sf-guia__text { max-width: 70ch; }
:is(.sf-guia--franja, .sf-guia--en-lloc) .sf-guia__mostra { grid-column: 3; margin: 0; }
:is(.sf-guia--franja, .sf-guia--en-lloc) .sf-guia__peu { flex: none; margin-left: auto; padding: 0; gap: var(--sf-e5); }

/* ── Mòbil: una franja a baix, plegada en una línia o oberta ─────────── */
@media (max-width: 760px) {
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia] {
    left: 0; right: 0; bottom: 0; width: 100%;
    border-width: var(--sf-linia) 0 0;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; grid-auto-flow: column; align-items: center; gap: 0 var(--sf-e2);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)) var(--sf-gutter);
    max-height: 25vh; max-height: 25dvh; overflow-y: auto; overscroll-behavior: contain;
  }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia][hidden] { display: none; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia] :is(.sf-guia__cap, ol, .sf-guia__final, .sf-guia__peu) { padding: 0; border: 0; }
  /* La carcassa mana al mòbil: es diu explícitament què es veu. */
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia]:not([data-sf-acabada]) ol { display: block; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia][data-sf-acabada] ol { display: none; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia] .sf-guia__final { display: block; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia] li[aria-current='step'] { display: grid; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia] li { grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--sf-e2); padding: 0; border: 0; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia] .sf-guia__plega { display: inline-flex; width: 44px; height: 44px; border-color: transparent; color: var(--sf-tinta); }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia] .sf-guia__peu .sf-boto--text { min-height: 44px; }

  /* Plegada: el pas d'ara en una línia i «Mostra-m'ho»; acabada, l'enllaç i «Entesos». */
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='plegada'] .sf-guia__cap { display: none; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='plegada'] :is(ol, .sf-guia__final) { grid-column: 1; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='plegada'] li { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='plegada'] .sf-guia__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='plegada'] .sf-guia__mostra { grid-column: 3; margin: 0 0 0 var(--sf-e2); }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='plegada'] .sf-guia__final { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='plegada'] .sf-guia__final-text { display: none; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='plegada'] .sf-guia__peu { display: none; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='plegada'][data-sf-acabada] .sf-guia__peu { display: flex; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='plegada'][data-sf-acabada] .sf-guia__peu .sf-boto--text { display: none; }

  /* Oberta: el títol i el botó de plegar a dalt; el pas sencer; «Com funciona» i «Entesos». */
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='oberta'] { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='oberta'] .sf-guia__plega { grid-row: 1; grid-column: 2; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='oberta'] .sf-guia__cap { display: flex; grid-row: 1; grid-column: 1; align-items: baseline; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='oberta'] .sf-guia__peu { display: flex; }
  /* A la capçalera, només el títol i el comptador: plegar i obrir ja ho fa la carcassa. */
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia] .sf-guia__cap > :not(h2, .sf-guia__compte) { display: none; }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='oberta'] :is(ol, .sf-guia__final, .sf-guia__peu) { grid-column: 1 / -1; padding-right: calc(var(--sf-gutter) - 4px); }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='oberta'] .sf-guia__compte { margin-left: var(--sf-e2); }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='oberta'] .sf-guia__mostra { margin-top: var(--sf-e2); }
  .sf-guia:not(.sf-guia--en-lloc)[data-sf-guia='oberta'] .sf-guia__peu { padding-top: var(--sf-e1); }
  .sf-amb-guia body { padding-bottom: var(--sf-guia-alt, 0px); }
  :where(html.sf-amb-guia) { scroll-padding-bottom: var(--sf-guia-alt, 0px); }
  /* L'avís de baix, per sobre de la guia. */
  :where(.sf-amb-guia) .sf-flota { bottom: calc(var(--sf-guia-alt, 0px) + var(--sf-e3)); }
}
/* El que un pas assenyala: un contorn terra, fix, fins que s'hi fa clic. */
.sf-assenyalat { outline: 2px solid var(--sf-terra) !important; outline-offset: 3px; }

/* ═══ Hover ═══════════════════════════════════════════════════════════════
 * Només on hi ha ratolí: amb el dit, el :hover es queda enganxat després del toc.
 */
@media (hover: hover) {
  .sf-boto:not(:disabled):hover { background: var(--sf-paper-2); }
  .sf-boto--principal:not(:disabled):hover { background: #2a2a2a; }
  .sf-boto--discret:not(:disabled):hover { border-color: var(--sf-tinta); color: var(--sf-tinta); background: var(--sf-paper); }
  .sf-guia .sf-guia__entesos.sf-boto--principal:not(:disabled):hover { background: var(--sf-paper-2); }
  .sf-boto--text:hover { background: none; text-decoration-color: currentColor; color: var(--sf-tinta); }
  .sf-eina:hover { border-color: var(--sf-tinta); }
  .sf-segment:not([aria-pressed='true']):hover { border-color: var(--sf-tinta); color: var(--sf-tinta); }
  .sf-pestanya:hover { color: var(--sf-tinta); }
  .sf-entrada-text:hover, .sf-selector:hover { border-color: var(--sf-gris); }
  .sf-deixar:hover { border-color: var(--sf-tinta); background: var(--sf-paper-2); }
}

/* ═══ Impressió ═════════════════════════════════════════════════════════
 * Es queda amb el logotip, el títol, el contingut i la font. Cada app diu
 * què més amaga amb `.sf-no-imprimir` o amb el seu propi @media print.
 */
@media print {
  @page {
    size: A4;
    margin: 12mm 12mm 16mm;
    @bottom-left {
      content: "SANFELIU · Enginyeria de software i IA · Barcelona · sanfeliusoftware.com · me@joansanfeliu.com";
      font-family: 'Archivo', Arial, sans-serif; font-size: 7.5pt; color: #666; vertical-align: top; padding-top: 3mm;
    }
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-family: 'Bodoni Moda', 'Times New Roman', serif; font-size: 10pt; color: #111; vertical-align: top; padding-top: 2.5mm;
    }
  }
  html, body { height: auto !important; overflow: visible !important; }
  body { font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sf--pantalla { height: auto; overflow: visible; }
  .sf { display: block; }
  .sf-barra { min-height: 0; padding: 0 0 4mm; margin-bottom: 4mm; }
  .sf-barra__accions, .sf-guia, .sf-flota, .sf-dialeg, .sf-calaix, .sf-no-imprimir, .sf-peu__nota, .sf-peu .sf-boto { display: none !important; }
  .sf-barra__subtitol { display: block; white-space: normal; overflow: visible; }
  .sf-dividit { display: block; height: auto; }
  .sf-zona { border: 0; }
  .sf-desplacable { overflow: visible; }
  .sf-peu { padding: 3mm 0 0; min-height: 0; }
  .sf-taula th { position: static; }
  .sf-taula tr { break-inside: avoid; }
}