/* =====================================================================
   FTH leggero — la base comune degli strumenti FTH (proposta, 03/11/2026)
   ---------------------------------------------------------------------
   Un solo foglio. Gli strumenti di Noleggiare e Tomasi useranno lo stesso,
   cambiando solo i colori di marca con data-marca="noleggiare" | "tomasi".
   Tutte le classi hanno il prefisso fs- (niente collisioni con il CSS che
   c'è già nei prodotti: brain/apprendimenti/nome-css-gia-preso-...).
   Regole in breve:
   - 3 pesi: 400 testo, 500 etichette e menu, 600 titoli e numeri. Mai 700.
   - 7 misure di carattere, base 14 px (16 px nei campi sul telefono).
   - Bordi da 1 px, colore --linea. Ombre solo su ciò che galleggia.
   - Il colore di marca si usa poco: voce attiva, bottone principale,
     la "nostra" serie in un grafico, il fuoco. Mai per dire "male".
   ===================================================================== */

/* ---------- 1. Token ---------- */
:root {
  /* neutri (leggermente freddi, come Vercel/Linear) */
  --fondo:        #ffffff;   /* la pagina */
  --fondo-2:      #fafafa;   /* barra laterale, intestazioni di tabella, zone tenui */
  --fondo-3:      #f4f4f5;   /* controlli a riposo, hover */
  --superficie:   #ffffff;   /* schede e finestre */
  --linea:        #ebebed;   /* tutti i bordi: 1 px */
  --linea-forte:  #d9d9de;   /* bordo dei campi, divisori che devono vedersi */
  --testo:        #18181b;
  --testo-2:      #52525b;   /* secondario */
  --testo-3:      #8b8b94;   /* didascalie, unità, assi */

  /* marca (FTH). Le aziende cambiano solo queste tre righe. */
  --marca:        #bc242d;
  --marca-testo:  #ffffff;
  --marca-tenue:  #fbeced;

  /* stati: mai il colore di marca */
  --bene:         #15803d;  --bene-tenue:       #ecfdf3;
  --attenzione:   #b45309;  --attenzione-tenue: #fff7ed;
  --critico:      #dc2626;  --critico-tenue:    #fef2f2;
  --info:         #2563eb;  --info-tenue:       #eff6ff;
  --nonso:        #71717a;  --nonso-tenue:      #f4f4f5;  /* «non so»: grigio, tratteggiato */

  /* serie dei grafici: la prima è la marca, poi neutri freddi */
  --serie-1: var(--marca);
  --serie-2: #3f3f46;
  --serie-3: #a1a1aa;
  --serie-4: #64748b;
  --serie-confronto: #a1a1aa; /* il periodo prima, tratteggiato */

  /* carattere */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Inter", ui-sans-serif, system-ui, sans-serif;
  --t-xs: 12px;   /* didascalie, unità, assi */
  --t-s:  13px;   /* tabelle, menu, etichette */
  --t-m:  14px;   /* testo */
  --t-l:  16px;   /* titoli di scheda */
  --t-xl: 20px;   /* titolo di pagina */
  --t-2xl: 24px;  /* numeri delle tessere */
  --t-3xl: 32px;  /* il numero solo, raro */
  --peso-testo: 400; --peso-medio: 500; --peso-titolo: 600;

  /* spazi: passo di 4 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* forme */
  --r-1: 6px;    /* controlli, chip */
  --r-2: 8px;    /* schede, tessere */
  --r-3: 12px;   /* finestre */
  --r-tondo: 999px;
  --bordo: 1px solid var(--linea);
  --ombra-pop: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);
  --ombra-fin: 0 0 0 1px rgba(0,0,0,.02), 0 16px 48px rgba(0,0,0,.16);
  --fuoco: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent);

  --menu-largo: 232px;
  --contenuto-max: 1320px;
  --veloce: 120ms cubic-bezier(.2,.0,0,1);

  color-scheme: light;
}

/* le aziende: solo il colore di marca (e il logo, nel markup) */
[data-marca] { --serie-1: var(--marca); } /* la serie segue la marca anche dentro un'area */
[data-marca="noleggiare"] { --marca: #c01a74; --marca-tenue: #fbe0ef; }
[data-marca="tomasi"]     { --marca: #d2232a; --marca-tenue: #fdecec; }

/* modo scuro: dal sistema, salvo scelta esplicita */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --fondo: #0b0b0c; --fondo-2: #111113; --fondo-3: #1a1a1d; --superficie: #111113;
    --linea: #232326; --linea-forte: #2f2f34;
    --testo: #ededef; --testo-2: #a1a1aa; --testo-3: #71717a;
    --marca: #f0656c; --marca-testo: #1a0a0b; --marca-tenue: #2a1416;
    --bene: #4ade80; --bene-tenue: #0f2418; --attenzione: #fbbf24; --attenzione-tenue: #2a2010;
    --critico: #f87171; --critico-tenue: #2c1414; --info: #60a5fa; --info-tenue: #111f33;
    --nonso: #a1a1aa; --nonso-tenue: #1a1a1d;
    --serie-2: #d4d4d8; --serie-3: #52525b; --serie-confronto: #52525b;
    --ombra-pop: 0 0 0 1px var(--linea), 0 8px 24px rgba(0,0,0,.5);
    --ombra-fin: 0 0 0 1px var(--linea-forte), 0 16px 48px rgba(0,0,0,.6);
    color-scheme: dark;
  }
  :root:not([data-tema="chiaro"]) [data-marca="noleggiare"] { --marca: #f472b6; --marca-tenue: #2a1220; }
  :root:not([data-tema="chiaro"]) [data-marca="tomasi"]     { --marca: #f87171; --marca-tenue: #2c1414; }
}
:root[data-tema="scuro"] {
  --fondo: #0b0b0c; --fondo-2: #111113; --fondo-3: #1a1a1d; --superficie: #111113;
  --linea: #232326; --linea-forte: #2f2f34;
  --testo: #ededef; --testo-2: #a1a1aa; --testo-3: #71717a;
  --marca: #f0656c; --marca-testo: #1a0a0b; --marca-tenue: #2a1416;
  --bene: #4ade80; --bene-tenue: #0f2418; --attenzione: #fbbf24; --attenzione-tenue: #2a2010;
  --critico: #f87171; --critico-tenue: #2c1414; --info: #60a5fa; --info-tenue: #111f33;
  --nonso: #a1a1aa; --nonso-tenue: #1a1a1d;
  --serie-2: #d4d4d8; --serie-3: #52525b; --serie-confronto: #52525b;
  --ombra-pop: 0 0 0 1px var(--linea), 0 8px 24px rgba(0,0,0,.5);
  --ombra-fin: 0 0 0 1px var(--linea-forte), 0 16px 48px rgba(0,0,0,.6);
  color-scheme: dark;
}
:root[data-tema="scuro"] [data-marca="noleggiare"] { --marca: #f472b6; --marca-tenue: #2a1220; }
:root[data-tema="scuro"] [data-marca="tomasi"]     { --marca: #f87171; --marca-tenue: #2c1414; }

/* ---------- 1b. Il carattere di ciascuna azienda (proposta TOM-451, 03/11/2026) ----------
   Additivo: data-marca resta com'è (cambia solo il colore di marca). data-carattere
   si mette sul contenitore dello strumento e cambia neutri, forme e profondità.
   Senza data-carattere una pagina è identica a prima (FTH, Mercato, Sentinel…).
   - tomasi: concessionaria. Quasi-nero caldo, angoli netti, niente ombre,
     il rosso del marchio solo come firma e per la voce attiva; «male» è un rosso più scuro.
   - noleggiare: noleggio. Blu inchiostro, fondi azzurrati, forme morbide,
     voti con la loro scala (mai in oro), i competitor in grigio. */
[data-carattere="tomasi"] {
  --fondo: #ffffff; --fondo-2: #f7f7f8; --fondo-3: #f0f1f3; --superficie: #ffffff;
  --linea: #e6e8ec; --linea-forte: #d3d6dc;
  --testo: #17181a; --testo-2: #54585f; --testo-3: #878d96;
  --critico: #b91c1c; --critico-tenue: #fdf2f2;
  --serie-2: #2b2e33; --serie-3: #9aa0a8; --serie-4: #5d6470; --serie-confronto: #9aa0a8;
  --r-1: 4px; --r-2: 6px; --r-3: 8px;
  --ombra-pop: 0 0 0 1px var(--linea-forte), 0 6px 16px rgba(0,0,0,.06);
}
[data-carattere="noleggiare"] {
  --fondo: #ffffff; --fondo-2: #f5f7fb; --fondo-3: #eef2f8; --superficie: #ffffff;
  --linea: #dbe3ef; --linea-forte: #c6d2e3;
  --testo: #132038; --testo-2: #4a5c78; --testo-3: #5f7190;
  --serie-2: #8494ac; --serie-3: #b9c4d5; --serie-4: #4a5c78; --serie-confronto: #8494ac;
  --info: #2557d6; --info-tenue: #edf2fd;
  --r-1: 8px; --r-2: 12px; --r-3: 16px;
  --voto-male: #ef5b6b; --voto-attenzione: #f2a63b; --voto-ok: #7bc86a; --voto-ottimo: #33b98a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) [data-carattere="tomasi"] {
    --fondo: #0c0c0d; --fondo-2: #121214; --fondo-3: #1b1c1f; --superficie: #121214;
    --linea: #24262a; --linea-forte: #313338; --testo: #ececee; --testo-2: #a3a6ad; --testo-3: #74787f;
    --critico: #f87171; --critico-tenue: #2c1414; --serie-2: #d6d8dc; --serie-3: #53575e; --serie-confronto: #53575e;
    --ombra-pop: 0 0 0 1px var(--linea-forte), 0 8px 24px rgba(0,0,0,.5);
  }
  :root:not([data-tema="chiaro"]) [data-carattere="noleggiare"] {
    --fondo: #0b1220; --fondo-2: #0f1729; --fondo-3: #17213a; --superficie: #0f1729;
    --linea: #1f2b45; --linea-forte: #2b3a5a; --testo: #e6ecf6; --testo-2: #9fb0cc; --testo-3: #7487a8;
    --serie-2: #7487a8; --serie-3: #33425f; --serie-confronto: #7487a8; --info: #7ea2ff; --info-tenue: #142142;
  }
}
:root[data-tema="scuro"] [data-carattere="tomasi"] {
  --fondo: #0c0c0d; --fondo-2: #121214; --fondo-3: #1b1c1f; --superficie: #121214;
  --linea: #24262a; --linea-forte: #313338; --testo: #ececee; --testo-2: #a3a6ad; --testo-3: #74787f;
  --critico: #f87171; --critico-tenue: #2c1414; --serie-2: #d6d8dc; --serie-3: #53575e; --serie-confronto: #53575e;
  --ombra-pop: 0 0 0 1px var(--linea-forte), 0 8px 24px rgba(0,0,0,.5);
}
:root[data-tema="scuro"] [data-carattere="noleggiare"] {
  --fondo: #0b1220; --fondo-2: #0f1729; --fondo-3: #17213a; --superficie: #0f1729;
  --linea: #1f2b45; --linea-forte: #2b3a5a; --testo: #e6ecf6; --testo-2: #9fb0cc; --testo-3: #7487a8;
  --serie-2: #7487a8; --serie-3: #33425f; --serie-confronto: #7487a8; --info: #7ea2ff; --info-tenue: #142142;
}
/* Tomasi: la firma (una barretta rossa sotto il titolo di pagina) e la voce attiva con il filo rosso */
[data-carattere="tomasi"] .fs-titolo::after { content: ""; display: block; width: 24px; height: 3px; margin-top: 8px; background: var(--marca); }
[data-carattere="tomasi"] .fs-voce[aria-current="page"] { box-shadow: inset 2px 0 0 var(--marca), 0 0 0 1px var(--linea); }
/* Noleggiare: chip e filtri a pillola, voti con la loro scala */
[data-carattere="noleggiare"] .fs-chip, [data-carattere="noleggiare"] .fs-seg, [data-carattere="noleggiare"] .fs-seg button { border-radius: var(--r-tondo); }
.fs-voto { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--peso-titolo); font-variant-numeric: tabular-nums; color: var(--testo); }
.fs-voto::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--voto-ok, var(--bene)); flex: none; }
.fs-voto.male::before { background: var(--voto-male, var(--critico)); }
.fs-voto.attenzione::before { background: var(--voto-attenzione, var(--attenzione)); }
.fs-voto.ottimo::before { background: var(--voto-ottimo, var(--bene)); }
.fs-voto.nonso::before { background: none; border: 1.5px dashed var(--nonso); }
.fs-scala { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; }
.fs-scala i { flex: 1; background: var(--voto-ok, var(--bene)); }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--testo);
  font: var(--peso-testo) var(--t-m)/1.5 var(--font);
  font-feature-settings: "cv11", "ss01"; /* Inter: 1 e a più leggibili */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: var(--peso-titolo); letter-spacing: -0.011em; }
p { margin: 0; }
b, strong { font-weight: var(--peso-titolo); } /* mai 700 */
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--fuoco); border-radius: var(--r-1); }
.fs-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fs-muto { color: var(--testo-2); }
.fs-tenue { color: var(--testo-3); }
.fs-piccolo { font-size: var(--t-s); }
.fs-xs { font-size: var(--t-xs); }
.fs-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- 3. Guscio: barra laterale + contenuto ---------- */
.fs-app { display: grid; grid-template-columns: var(--menu-largo) 1fr; min-height: 100vh; min-height: 100dvh; }
.fs-side {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-3) var(--s-2); background: var(--fondo-2);
}
.fs-prodotto { display: flex; align-items: center; gap: 10px; padding: 6px var(--s-2) var(--s-3); }
.fs-prodotto img, .fs-logo { height: 18px; width: auto; display: block; }
.fs-prodotto b { font-size: var(--t-m); font-weight: var(--peso-titolo); letter-spacing: -0.01em; }
.fs-gruppo { margin-top: var(--s-4); padding: 0 var(--s-2) var(--s-1); font-size: var(--t-xs); color: var(--testo-3); font-weight: var(--peso-medio); }
.fs-voce {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 var(--s-2);
  border-radius: var(--r-1); color: var(--testo-2); font-size: var(--t-s); font-weight: var(--peso-medio);
  transition: background var(--veloce), color var(--veloce);
}
.fs-voce svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; opacity: .85; }
.fs-voce:hover { background: var(--fondo-3); color: var(--testo); }
.fs-voce[aria-current="page"] { background: var(--superficie); color: var(--testo); box-shadow: 0 0 0 1px var(--linea); }
.fs-voce[aria-current="page"] svg { color: var(--marca); opacity: 1; }
.fs-voce .fs-conta { margin-left: auto; font-size: var(--t-xs); color: var(--testo-3); font-variant-numeric: tabular-nums; }
.fs-voce .fs-conta.urgente { color: var(--critico); font-weight: var(--peso-titolo); }
.fs-side-piede { margin-top: auto; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); font-size: var(--t-s); color: var(--testo-2); border-top: var(--bordo); }
.fs-avatar { width: 24px; height: 24px; border-radius: var(--r-tondo); background: var(--fondo-3); color: var(--testo-2); display: grid; place-items: center; font-size: 11px; font-weight: var(--peso-titolo); flex: none; }
.fs-avatar.l { width: 32px; height: 32px; font-size: 13px; }

/* selettore di area / azienda (in cima al menu) */
.fs-area { display: flex; align-items: center; gap: var(--s-2); width: 100%; height: 36px; padding: 0 var(--s-2); border: var(--bordo); border-radius: var(--r-1); background: var(--superficie); font-size: var(--t-s); font-weight: var(--peso-medio); cursor: pointer; text-align: left; }
.fs-area .pallino { width: 8px; height: 8px; border-radius: 2px; background: var(--marca); }
.fs-area svg { margin-left: auto; width: 14px; height: 14px; stroke: var(--testo-3); fill: none; stroke-width: 1.6; }

.fs-app { background: linear-gradient(90deg, var(--fondo-2) var(--menu-largo), var(--fondo) 0); }
.fs-main { min-width: 0; display: flex; flex-direction: column; border-left: var(--bordo); background: var(--fondo); }
.fs-pagina { width: 100%; max-width: var(--contenuto-max); margin: 0 auto; padding: var(--s-6) var(--s-8) var(--s-12); }

/* striscia «dati di prova»: una riga sottile, non un cartello */
.fs-striscia { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 28px; padding: 4px var(--s-4); text-align: center; line-height: 1.35; font-size: var(--t-xs); color: var(--attenzione); background: var(--attenzione-tenue); border-bottom: 1px solid color-mix(in srgb, var(--attenzione) 18%, transparent); }

/* barra in alto (telefono) e barra delle schede in basso */
.fs-top { display: none; }
.fs-tabbar { display: none; }

/* ---------- 4. Intestazione di pagina ---------- */
.fs-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-bottom: var(--s-5); }
.fs-titolo { font-size: var(--t-xl); line-height: 28px; }
.fs-sotto { margin-top: 2px; font-size: var(--t-s); color: var(--testo-2); }
.fs-azioni { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.fs-briciole { display: flex; gap: 6px; font-size: var(--t-s); color: var(--testo-3); margin-bottom: var(--s-1); }
.fs-briciole a:hover { color: var(--testo); }

/* barra degli strumenti sotto il titolo: filtri a sinistra, vista a destra */
.fs-barra { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding-bottom: var(--s-5); }
.fs-barra .spinta { margin-left: auto; }

/* ---------- 5. Bottoni, campi, segmenti, chip ---------- */
.fs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--r-1); border: 1px solid var(--linea-forte); background: var(--superficie);
  font-size: var(--t-s); font-weight: var(--peso-medio); color: var(--testo); cursor: pointer; white-space: nowrap;
  transition: background var(--veloce), border-color var(--veloce);
}
.fs-btn:hover { background: var(--fondo-3); }
.fs-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.fs-btn.primario { background: var(--testo); border-color: var(--testo); color: var(--fondo); }
.fs-btn.primario:hover { opacity: .88; }
.fs-btn.marca { background: var(--marca); border-color: var(--marca); color: var(--marca-testo); }
.fs-btn.fantasma { border-color: transparent; background: transparent; color: var(--testo-2); }
.fs-btn.fantasma:hover { background: var(--fondo-3); color: var(--testo); }
.fs-btn.pericolo { background: var(--critico); border-color: var(--critico); color: #fff; }
.fs-btn.icona { width: 32px; padding: 0; }
.fs-btn.s { height: 28px; padding: 0 10px; font-size: var(--t-xs); }

.fs-campo {
  display: flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 10px; min-width: 0;
  border: 1px solid var(--linea-forte); border-radius: var(--r-1); background: var(--superficie); color: var(--testo-3);
}
.fs-campo:focus-within { border-color: var(--marca); box-shadow: var(--fuoco); }
.fs-campo svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.fs-campo input { border: 0; outline: 0; background: none; width: 100%; font-size: var(--t-s); color: var(--testo); }
.fs-campo input::placeholder { color: var(--testo-3); }
.fs-tasto { font-size: 11px; color: var(--testo-3); border: var(--bordo); border-radius: 4px; padding: 0 5px; line-height: 16px; }

/* segmenti: grigio tenue, la scelta su bianco (Vercel) */
.fs-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--fondo-3); border-radius: var(--r-1); }
.fs-seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 4px; background: none; font-size: var(--t-s); font-weight: var(--peso-medio); color: var(--testo-2); cursor: pointer; white-space: nowrap; }
.fs-seg button:hover { color: var(--testo); }
.fs-seg button[aria-pressed="true"] { background: var(--superficie); color: var(--testo); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--linea); }

/* schede (tab) con la riga sotto: per cambiare vista dentro una pagina */
.fs-schede { display: flex; gap: var(--s-5); border-bottom: var(--bordo); margin-bottom: var(--s-5); overflow-x: auto; scrollbar-width: none; }
.fs-schede a { padding: 0 0 10px; font-size: var(--t-s); font-weight: var(--peso-medio); color: var(--testo-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.fs-schede a[aria-current="page"] { color: var(--testo); border-color: var(--testo); }

/* filtro a chip: «+ Sede» → «Sede: Milano ×» */
.fs-filtro { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px dashed var(--linea-forte); border-radius: var(--r-tondo); background: none; font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--testo-2); cursor: pointer; }
.fs-filtro.attivo { border-style: solid; background: var(--fondo-3); color: var(--testo); }
.fs-filtro b { font-weight: var(--peso-titolo); }

/* chip neutra (etichette, temi) */
.fs-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--fondo-3); color: var(--testo-2); font-size: var(--t-xs); font-weight: var(--peso-medio); white-space: nowrap; }

/* stato: pallino + parola. Mai solo colore. */
.fs-stato { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--testo-2); white-space: nowrap; }
.fs-stato::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fs-stato.bene { color: var(--bene); } .fs-stato.attenzione { color: var(--attenzione); } .fs-stato.critico { color: var(--critico); }
.fs-stato.nonso { color: var(--nonso); } .fs-stato.nonso::before { background: none; border: 1.5px dashed currentColor; width: 7px; height: 7px; }

/* variazione: freccia + numero, colore tenue */
.fs-delta { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; font-size: var(--t-xs); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; }
.fs-delta.su { color: var(--bene); } .fs-delta.giu { color: var(--critico); } .fs-delta.piatto { color: var(--testo-3); }
.fs-delta.nonso { color: var(--nonso); } .fs-delta.attenzione { color: var(--attenzione); }

/* ---------- 6. «Non so»: il terzo stato ---------- */
/* Un dato che manca non è zero né un trattino muto: si dice che manca e perché. */
.fs-nonso {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 6px; border-radius: var(--r-tondo);
  border: 1px dashed var(--linea-forte); color: var(--nonso); font-size: var(--t-xs); font-weight: var(--peso-medio);
  background: transparent; cursor: help; white-space: nowrap; font-variant-numeric: normal; letter-spacing: 0;
}
.fs-nonso { line-height: 18px; }
.fs-nonso::before { content: "?"; line-height: 1; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--nonso-tenue); font-size: 10px; font-weight: var(--peso-titolo); }
.fs-kpi .fs-valore .fs-nonso { font-size: var(--t-s); padding: 3px 10px 3px 6px; }

/* ---------- 7. Tessere dei numeri ---------- */
/* Una fila sola, divisa da filetti (Stripe): niente schede staccate con ombra. */
.fs-kpis { display: grid; grid-template-columns: repeat(var(--colonne, 4), minmax(0, 1fr)); border: var(--bordo); border-radius: var(--r-2); background: var(--superficie); margin-bottom: var(--s-6); overflow: hidden; }
.fs-kpi { display: flex; flex-direction: column; gap: 6px; padding: var(--s-4) var(--s-5); border-left: var(--bordo); min-width: 0; text-align: left; background: none; border-top: 0; border-right: 0; border-bottom: 0; color: inherit; font: inherit; }
.fs-kpi:first-child { border-left: 0; }
button.fs-kpi { cursor: pointer; transition: background var(--veloce); }
button.fs-kpi:hover { background: var(--fondo-2); }
.fs-etichetta { font-size: var(--t-s); color: var(--testo-2); font-weight: var(--peso-medio); display: flex; align-items: center; gap: 6px; }
.fs-valore { font-size: var(--t-2xl); line-height: 32px; font-weight: var(--peso-titolo); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 4px; }
.fs-valore small { font-size: var(--t-s); font-weight: var(--peso-medio); color: var(--testo-3); letter-spacing: 0; }
.fs-riga-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--t-xs); color: var(--testo-3); }

/* ---------- 8. Schede (pannelli) e griglia ---------- */
.fs-griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.fs-c12 { grid-column: span 12; } .fs-c8 { grid-column: span 8; } .fs-c7 { grid-column: span 7; } .fs-c6 { grid-column: span 6; } .fs-c5 { grid-column: span 5; } .fs-c4 { grid-column: span 4; }
.fs-card { background: var(--superficie); border: var(--bordo); border-radius: var(--r-2); min-width: 0; }
.fs-card-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5) 0; }
.fs-card-titolo { font-size: var(--t-m); font-weight: var(--peso-titolo); }
.fs-card-sotto { font-size: var(--t-xs); color: var(--testo-3); margin-top: 2px; }
.fs-card-corpo { padding: var(--s-4) var(--s-5) var(--s-5); }
.fs-card-piede { padding: var(--s-3) var(--s-5); border-top: var(--bordo); font-size: var(--t-xs); color: var(--testo-3); display: flex; justify-content: space-between; gap: var(--s-3); }
.fs-link { font-size: var(--t-s); font-weight: var(--peso-medio); color: var(--testo-2); display: inline-flex; align-items: center; gap: 4px; }
.fs-link:hover { color: var(--testo); }

/* la risposta: UNA frase in cima, senza cornice colorata */
.fs-risposta { font-size: var(--t-l); line-height: 1.5; color: var(--testo-2); max-width: 72ch; margin-bottom: var(--s-6); }
.fs-risposta b { color: var(--testo); font-weight: var(--peso-titolo); }

/* ---------- 9. Tabella ---------- */
.fs-tab-scatola { overflow-x: auto; }
.fs-tabella { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.fs-tabella th { height: 36px; padding: 0 var(--s-3); text-align: left; font-weight: var(--peso-medio); font-size: var(--t-xs); color: var(--testo-3); border-bottom: var(--bordo); white-space: nowrap; background: var(--fondo-2); position: sticky; top: 0; }
.fs-tabella td { height: 44px; padding: 0 var(--s-3); border-bottom: var(--bordo); vertical-align: middle; }
.fs-tabella tr:last-child td { border-bottom: 0; }
.fs-tabella tbody tr { transition: background var(--veloce); }
.fs-tabella tbody tr:hover { background: var(--fondo-2); }
.fs-tabella .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-tabella th:first-child, .fs-tabella td:first-child { padding-left: var(--s-5); }
.fs-tabella th:last-child, .fs-tabella td:last-child { padding-right: var(--s-5); }
.fs-tabella .principale { font-weight: var(--peso-medio); color: var(--testo); }
.fs-tabella .sotto { display: block; font-size: var(--t-xs); color: var(--testo-3); }

/* barra dentro la cella / elenco a barre */
.fs-barre { display: grid; gap: var(--s-3); }
.fs-barra-riga { display: grid; grid-template-columns: minmax(0, 1fr) 96px 52px; align-items: center; gap: var(--s-3); font-size: var(--t-s); }
.fs-barra-riga .traccia { height: 6px; border-radius: 3px; background: var(--fondo-3); overflow: hidden; }
.fs-barra-riga .traccia i { display: block; height: 100%; background: var(--serie-2); border-radius: 3px; }
.fs-barra-riga.nostro .traccia i { background: var(--marca); }
.fs-barra-riga .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--testo-2); }

/* ---------- 10. Grafici (SVG in linea) ---------- */
.fs-grafico { width: 100%; height: auto; display: block; overflow: visible; }
.fs-grafico .griglia line { stroke: var(--linea); stroke-width: 1; }
.fs-grafico .asse text { fill: var(--testo-3); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.fs-grafico .s1 { stroke: var(--serie-1); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.fs-grafico .s2 { stroke: var(--serie-2); stroke-width: 1.5; fill: none; }
.fs-grafico .conf { stroke: var(--serie-confronto); stroke-width: 1.5; fill: none; stroke-dasharray: 3 4; }
.fs-grafico .area { fill: color-mix(in srgb, var(--serie-1) 5%, transparent); stroke: none; }
.fs-grafico .buco { fill: var(--fondo-3); }
.fs-legenda { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--testo-2); }
.fs-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fs-legenda i { width: 12px; height: 2px; background: var(--serie-1); border-radius: 1px; }
.fs-legenda i.conf { background: repeating-linear-gradient(90deg, var(--serie-confronto) 0 3px, transparent 3px 6px); }

/* ---------- 11. Elenchi (righe cliccabili: avvisi, conversazioni) ---------- */
.fs-elenco { display: flex; flex-direction: column; }
.fs-riga { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-5); border-top: var(--bordo); cursor: pointer; transition: background var(--veloce); }
.fs-riga:first-child { border-top: 0; }
.fs-riga:hover { background: var(--fondo-2); }
.fs-riga[aria-selected="true"] { background: var(--fondo-3); }
.fs-riga[aria-selected="true"] .fs-avatar, .fs-riga[aria-selected="true"] .fs-chip { background: var(--superficie); box-shadow: 0 0 0 1px var(--linea); }
.fs-riga .titolo { font-size: var(--t-s); font-weight: var(--peso-medio); color: var(--testo); display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.fs-riga .anteprima { font-size: var(--t-s); color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-riga .meta { font-size: var(--t-xs); color: var(--testo-3); white-space: nowrap; text-align: right; }
.fs-riga .non-letto { width: 6px; height: 6px; border-radius: 50%; background: var(--info); display: inline-block; }
.fs-sezione-elenco { padding: var(--s-4) var(--s-5) var(--s-2); font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--testo-3); display: flex; gap: 6px; }

/* ---------- 12. Avvisi in pagina ---------- */
.fs-avviso { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); border: var(--bordo); border-radius: var(--r-2); background: var(--superficie); font-size: var(--t-s); }
.fs-avviso svg { width: 16px; height: 16px; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.fs-avviso b { font-weight: var(--peso-titolo); }
.fs-avviso p { color: var(--testo-2); }
.fs-avviso.attenzione { border-color: color-mix(in srgb, var(--attenzione) 30%, var(--linea)); background: var(--attenzione-tenue); } .fs-avviso.attenzione svg { color: var(--attenzione); }
.fs-avviso.critico { border-color: color-mix(in srgb, var(--critico) 30%, var(--linea)); background: var(--critico-tenue); } .fs-avviso.critico svg { color: var(--critico); }
.fs-avviso.info svg { color: var(--info); }
.fs-avviso.nonso { border-style: dashed; } .fs-avviso.nonso svg { color: var(--nonso); }

/* ---------- 13. Aiuto a scomparsa (al posto dei paragrafi) ---------- */
.fs-aiuto { position: relative; display: inline-flex; }
.fs-aiuto > button { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: help; text-decoration: underline dotted var(--testo-3); text-underline-offset: 3px; }
.fs-aiuto .fs-bolla {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: max-content; max-width: min(280px, calc(100vw - 32px));
  padding: var(--s-2) var(--s-3); border-radius: var(--r-1); background: var(--testo); color: var(--fondo);
  font-size: var(--t-xs); line-height: 1.45; font-weight: var(--peso-testo); box-shadow: var(--ombra-pop);
  display: none; /* chiusa non occupa spazio: niente pagina che scorre di lato */
}
.fs-aiuto:hover .fs-bolla, .fs-aiuto:focus-within .fs-bolla, .fs-aiuto.aperto .fs-bolla { display: block; animation: fs-entra var(--veloce); }
@keyframes fs-entra { from { opacity: 0; transform: translateY(-2px); } }
.fs-dettagli > summary { list-style: none; cursor: pointer; font-size: var(--t-s); color: var(--testo-2); font-weight: var(--peso-medio); display: inline-flex; align-items: center; gap: 6px; }
.fs-dettagli > summary::-webkit-details-marker { display: none; }
.fs-dettagli > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--veloce); }
.fs-dettagli[open] > summary::before { transform: rotate(45deg); }
.fs-dettagli > div { padding-top: var(--s-3); font-size: var(--t-s); color: var(--testo-2); display: grid; gap: var(--s-2); max-width: 80ch; }

/* ---------- 14. Stato vuoto ---------- */
.fs-vuoto { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-10) var(--s-5); text-align: center; }
.fs-vuoto svg { width: 28px; height: 28px; stroke: var(--testo-3); fill: none; stroke-width: 1.4; margin-bottom: var(--s-1); }
.fs-vuoto b { font-size: var(--t-m); font-weight: var(--peso-titolo); }
.fs-vuoto p { font-size: var(--t-s); color: var(--testo-2); max-width: 40ch; }

/* ---------- 15b. Elenco e dettaglio (posta, conversazioni, schede) ---------- */
.fs-diviso { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); flex: 1; min-height: 0; height: calc(100vh - var(--alto-sopra, 0px)); height: calc(100dvh - var(--alto-sopra, 0px)); }
.fs-diviso > .lista { display: flex; flex-direction: column; min-height: 0; border-right: var(--bordo); }
.fs-diviso > .lista .scorre, .fs-diviso > .dettaglio .scorre { overflow-y: auto; flex: 1; min-height: 0; }
.fs-diviso > .dettaglio { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fs-pannello-testa { padding: var(--s-5) var(--s-5) var(--s-3); display: grid; gap: var(--s-3); border-bottom: var(--bordo); }
.fs-proprieta { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px var(--s-4); font-size: var(--t-s); }
.fs-proprieta dt { color: var(--testo-3); }
.fs-proprieta dd { margin: 0; color: var(--testo); min-width: 0; }
@media (max-width: 900px) {
  .fs-diviso { display: block; height: auto; }
  .fs-diviso > .lista { border-right: 0; }
  .fs-diviso > .dettaglio { display: none; }
}

/* ---------- 15. Finestra in-app (mai alert/confirm del browser) ---------- */
.fs-velo { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s-4); background: rgba(9, 9, 11, .32); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--veloce); }
.fs-velo.aperto { opacity: 1; pointer-events: auto; }
.fs-finestra { width: min(440px, 100%); background: var(--superficie); border-radius: var(--r-3); box-shadow: var(--ombra-fin); transform: translateY(6px) scale(.99); transition: transform var(--veloce); }
.fs-velo.aperto .fs-finestra { transform: none; }
.fs-finestra-testa { padding: var(--s-5) var(--s-5) 0; }
.fs-finestra-testa h2 { font-size: var(--t-l); }
.fs-finestra-corpo { padding: var(--s-2) var(--s-5) var(--s-5); font-size: var(--t-s); color: var(--testo-2); display: grid; gap: var(--s-3); }
.fs-finestra-piede { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: var(--bordo); background: var(--fondo-2); border-radius: 0 0 var(--r-3) var(--r-3); }
.fs-scelta { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); border: var(--bordo); border-radius: var(--r-2); cursor: pointer; color: var(--testo); }
.fs-scelta:has(input:checked) { border-color: var(--testo); box-shadow: 0 0 0 1px var(--testo); }
.fs-scelta input { margin-top: 3px; accent-color: var(--testo); }
.fs-scelta small { display: block; color: var(--testo-3); font-size: var(--t-xs); }

/* notifica breve in basso */
.fs-toast { position: fixed; left: 50%; bottom: var(--s-6); z-index: 110; transform: translate(-50%, 12px); display: flex; align-items: center; gap: var(--s-3); padding: 10px 14px; border-radius: var(--r-2); background: var(--testo); color: var(--fondo); font-size: var(--t-s); box-shadow: var(--ombra-pop); opacity: 0; pointer-events: none; transition: opacity var(--veloce), transform var(--veloce); }
.fs-toast.aperto { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fs-toast button { border: 0; background: none; color: inherit; opacity: .7; font-weight: var(--peso-medio); cursor: pointer; }

/* sagoma durante il caricamento */
.fs-sagoma { background: linear-gradient(90deg, var(--fondo-3), var(--fondo-2), var(--fondo-3)); background-size: 200% 100%; animation: fs-luce 1.4s infinite; border-radius: 4px; color: transparent !important; }
@keyframes fs-luce { to { background-position: -200% 0; } }

/* ---------- 16. Telefono (prima di tutto: il layout si ripensa, non si stringe) ---------- */
@media (max-width: 1100px) {
  .fs-c8, .fs-c7, .fs-c6, .fs-c5, .fs-c4 { grid-column: span 12; }
  .fs-kpis { --colonne: 2 !important; }
  .fs-kpi:nth-child(2n+1) { border-left: 0; }
  .fs-kpi:nth-child(n+3) { border-top: var(--bordo); }
  .fs-kpi:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 900px) {
  .fs-app { grid-template-columns: 1fr; background: var(--fondo); }
  .fs-main { border-left: 0; }
  .fs-side { display: none; }
  .fs-top { display: flex; align-items: center; gap: var(--s-3); height: 52px; padding: 0 var(--s-4); padding-top: env(safe-area-inset-top); border-bottom: var(--bordo); background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 40; }
  .fs-top .fs-logo { height: 16px; }
  .fs-top b { font-size: var(--t-m); font-weight: var(--peso-titolo); }
  .fs-top .spinta { margin-left: auto; }
  .fs-pagina { padding: var(--s-5) var(--s-4) calc(88px + env(safe-area-inset-bottom)); }
  .fs-titolo { font-size: 22px; }
  .fs-tabbar { display: grid; grid-template-columns: repeat(var(--schede, 4), 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(12px); border-top: var(--bordo); }
  .fs-tabbar a { display: grid; justify-items: center; gap: 2px; padding: 4px 0; font-size: 11px; font-weight: var(--peso-medio); color: var(--testo-3); position: relative; min-height: 44px; }
  .fs-tabbar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .fs-tabbar a[aria-current="page"] { color: var(--testo); }
  .fs-tabbar a[aria-current="page"] svg { color: var(--marca); }
  .fs-tabbar .fs-conta { position: absolute; top: 0; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--critico); color: #fff; font-size: 10px; line-height: 16px; font-weight: var(--peso-titolo); }
  .fs-btn { height: 36px; } .fs-seg button { height: 32px; } .fs-campo { height: 40px; }
  .fs-campo input, select, textarea { font-size: 16px; } /* iOS non ingrandisce la pagina */
  .fs-card-testa, .fs-card-corpo { padding-left: var(--s-4); padding-right: var(--s-4); }
  .fs-tabella th:first-child, .fs-tabella td:first-child { padding-left: var(--s-4); position: sticky; left: 0; background: var(--superficie); z-index: 1; }
  .fs-tabella th:first-child { background: var(--fondo-2); z-index: 2; }
  .fs-riga { padding: var(--s-3) var(--s-4); }
  .fs-finestra { align-self: end; width: 100%; border-radius: var(--r-3) var(--r-3) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .fs-velo { padding: 0; }
  .fs-kpi { padding: var(--s-3) var(--s-4); }
  .fs-valore { font-size: 22px; line-height: 28px; }
  .fs-risposta { font-size: 15px; }
  .fs-barra .spinta { margin-left: 0; }
  .fs-largo { display: none !important; } /* colonne e testi che sul telefono non servono */
  .fs-tabella td:first-child { min-width: 140px; }
}