/* ---------------------------------------------------------------------------
   Inter — SIL Open Font License 1.1. Il testo integrale e in OFL.txt, in questa
   stessa cartella: la licenza **deve** accompagnare i file, ed e il motivo per cui
   sta qui e non in docs/ (docs/ non va sul server del cliente).

   Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
   Prelevati dalla release ufficiale v4.1 (Inter-4.1.zip, extras/woff-hinted/),
   il 2026-11-07. Le impronte sha256 stanno nella documentazione del fornitore:
   qui il controllo dell'interfaccia le scambierebbe per numeri dell'azienda.

   File **intatti**: nessun subsetting, nessuna riconversione. Conta, perche la OFL
   riserva il nome: una versione modificata non potrebbe piu chiamarsi Inter.
   Il ragionamento completo e nella documentazione del fornitore.
   --------------------------------------------------------------------------- */
/* ===========================================================================
   BSS//CORE — stile di base.
   I token di colore sono quelli del prototipo grafico fornito dal committente.
   Non si cambiano a occhio: il cliente riconosce la propria azienda dai colori.
   (Il riferimento interno sta nella documentazione del fornitore, non qui: questi
   file non vengono compilati, quindi viaggiano in chiaro sul server del cliente.)

   ⚠️ NESSUN `@import` e nessun `<link>` verso internet. Questa interfaccia gira
   sul server del cliente, in rete locale: una richiesta a fonts.googleapis.com
   su una macchina senza internet non "degrada", BLOCCA il rendering per tutto il
   tempo del timeout DNS.

   ⭐ Il carattere del testo arriva da questa stessa cartella: dal 2026-10-03
   era Barlow, dal 2026-11-07 e' INTER, per una frase di Elisa davanti alla chat:
   «questo carattere non e' molto leggibile, ci sono delle lettere che non sono
   alte uguali, da' fastidio leggerlo». Barlow e' stretto e, ai corpi piccoli su
   Windows, irregolare; Inter e' disegnato per lo schermo. Versione «hinted»,
   quella che rende meglio su Windows. I due `.woff2`, la licenza SIL OFL e la
   provenienza stanno in `stile/`, accanto a questo file — vedi `stile/OFL.txt`.
   =========================================================================== */

/* ============================== I CARATTERI ==============================
   🔴 Percorsi RELATIVI a questo file, serviti dalla stessa origine dell'API.
   Nessun `src: url(https://...)`: la regola di non uscire in rete vale anche
   per un carattere, e un `url()` esterno in un `@font-face` e' una richiesta
   esterna esattamente come un `<link>` — solo meno visibile.

   `font-display:swap`: il testo si legge subito col carattere di sistema e
   passa a Inter appena il file e' pronto. Da disco sono 280 KB e non si vede,
   ma un testo invisibile per tre secondi e' peggio di un testo che cambia
   carattere, e `swap` e' l'unico valore che non ha quel rischio.

   ⚠️ Due pesi, non nove: 400 per il testo corrente e 600 per `strong`. Ogni
   peso in piu' e' un file in piu' nell'artefatto che nessuna regola chiede.
   ⚠️ I file sono INTATTI, non sottoinsiemati: la OFL riserva il nome «Inter»
   alla versione non modificata, e questi lo sono. Chi li tocca cambia nome.
   ========================================================================== */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("Inter-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("Inter-SemiBold.woff2") format("woff2");
}

:root{
  color-scheme: dark;

  /* --- i token del prototipo, invariati --- */
  --bg:#070a0d; --panel:#0d1217; --panel-2:#111820; --line:#1b252e; --line-2:#26333e;
  --fg:#d7dee4; --muted:#7c8996; --dim:#4b5763;
  --idle:#48c9dc; --think:#ff3434; --talk:#35f07c; --warn:#f0b43c;
  --state:var(--idle);

  /* --- il marchio: scudo araldico, blu istituzionale e argento ---
     Il blu NON si usa come colore di interfaccia: un blu scuro su fondo scuro
     non si vede. Si usa per l'identita' e per lo stato attivo del selettore. */
  --blu:#003e7b; --argento:#d2d3d5;

  /* --- caratteri: Inter arriva da `stile/`, gli altri due se ci sono ---
     ⚠️ `--f-display` e `--f-mono` restano "se c'e'": Chakra Petch e JetBrains
     Mono non sono nell'artefatto, e i loro ripieghi sono dichiarati in coda.
     Chi un giorno li porta dentro segue la stessa strada di Inter: file in
     questa cartella, licenza accanto, `@font-face` qui sopra. */
  --f-display:"Chakra Petch","Rajdhani","Arial Narrow","Segoe UI",sans-serif;
  --f-body:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;

  /* scala del testo: la vista campo la alza (vedi campo.css) */
  --scala:1;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg); margin:0;
  font:calc(15px * var(--scala))/1.5 var(--f-body);
  -webkit-text-size-adjust:100%;
}
button,input,textarea,select{font:inherit;color:inherit}
/* ⚠️ 600 e non il `bold` predefinito: dei pesi di Inter nell'artefatto ci sono
   400 e 600, e un `font-weight:700` farebbe scegliere al browser il 600 per
   sostituzione — che e' lo stesso esito, deciso da qualcun altro. Dichiararlo
   evita anche il grassetto SINTETICO (lettere ingrassate a calcolo) nel caso in
   cui un giorno si aggiunga un peso 700 per un altro carattere. */
strong{font-weight:600}
:focus-visible{outline:2px solid var(--state);outline-offset:2px}
a{color:var(--state)}
[hidden]{display:none !important}

/* `body.chiuso` non nasconde un pannello SOPRA i dati: tiene `.app` fuori dal
   documento visibile. Senza cookie il menu e l'area centrale sono vuoti perche'
   non sono stati costruiti, non perche' sono coperti. */
body.chiuso .app{display:none}

/* ======================= ACCESSO E CAMBIO PASSWORD ======================= */
.accesso{
  min-height:100%; display:grid; place-items:center; padding:24px 16px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(72,201,220,.07), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    var(--bg);
}
.accesso-riquadro{
  width:100%; max-width:420px; border:1px solid var(--line);
  background:var(--panel); padding:26px 22px 22px;
}
.marchio{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:700;letter-spacing:.12em}
.marchio small{display:block;font:500 10px/1.4 var(--f-mono);letter-spacing:.14em;color:var(--muted);letter-spacing:.12em}
/* ⭐ Il marchio e' quello vero: scudo araldico, blu istituzionale #003e7b e
   argento #d2d3d5. Il file e' servito dalla stessa origine — nessun CDN.

   ⚠️ NIENTE RIQUADRO (Elisa, 2026-10-06: «non lo voglio nel riquadro»). Il PNG
   adesso e' scontornato — 21% di pixel trasparenti — quindi il fondo blu che stava
   qui non serve piu' a coprire un rettangolo bianco.

   🔴 Ma il blu non si puo' semplicemente togliere e basta: il 46% dei pixel opachi
   dello scudo e' #002060, che su questo fondo (#070a0d) sta a **1,28:1** di
   contrasto, cioe' non si vede. Al suo posto un'ombra che segue il **contorno** del
   PNG e non un rettangolo — la stessa strada che il prototipo usa gia' per lo stesso
   file (`.gate .marchio img`). Resta visibile l'argento, che e' il 26%. */
.marchio .scudo{
  width:auto;height:34px;flex:none;object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(29,111,192,.45));
}
/* Nei due pannelli di accesso il marchio sta IN COLONNA: scudo grande e centrato,
   e il nome dell'azienda SOTTO (Elisa, 2026-10-06). `.grande` si usa soltanto li',
   quindi l'intestazione del gestionale resta una riga. */
.marchio.grande{
  flex-direction:column;align-items:center;text-align:center;
  gap:14px;font-size:15px;margin-bottom:26px;
}
.marchio.grande .scudo{
  height:96px;
  filter:drop-shadow(0 0 14px rgba(29,111,192,.45));
}

.accesso-modulo{display:flex;flex-direction:column;gap:6px}
.accesso-modulo label{font:500 10px var(--f-mono);letter-spacing:.14em;color:var(--muted);margin-top:10px}
.accesso-modulo input{
  background:var(--bg);border:1px solid var(--line-2);color:var(--fg);
  padding:12px;border-radius:3px;min-height:48px;
}
.accesso-modulo input:focus{outline:none;border-color:var(--state)}
.accesso-modulo button{
  margin-top:18px;min-height:52px;cursor:pointer;border-radius:3px;
  border:1px solid var(--state);background:transparent;color:var(--state);
  font:600 13px var(--f-display);letter-spacing:.18em;
}
.accesso-modulo button:hover:not(:disabled){background:var(--state);color:var(--bg)}
.accesso-modulo button:disabled{opacity:.45;cursor:progress}

.accesso-errore{
  margin:14px 0 0;padding:10px 12px;border:1px solid var(--think);
  color:#ffb4b4;font-size:14px;background:rgba(255,52,52,.07);
}
.accesso-regola{margin:16px 0 0;font:12px/1.55 var(--f-body);color:var(--muted)}
.accesso-nota{margin:0 0 4px;font:13px var(--f-body);color:var(--fg)}
.accesso-altra-area{margin:14px 0 0;font:13px/1.5 var(--f-body);color:var(--fg)}
.accesso-altra-area a{display:inline-flex;align-items:center;min-height:44px;color:var(--state)}
.accesso-origine{
  margin:14px 0 0;padding:10px 12px;border:1px dashed var(--warn);
  color:var(--warn);font:12px/1.5 var(--f-mono);
}

/* ============================== IL GUSCIO ============================== */
.app{
  height:100%;
  display:grid;
  grid-template-columns:224px minmax(0,1fr) var(--colonna-chat,var(--larghezza-chat,400px));
  grid-template-rows:56px minmax(0,1fr);
}

/* --- barra in alto --- */
.top{
  grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:0 16px;
  border-bottom:1px solid var(--line);background:var(--panel);min-width:0;
}
.top .spazio{flex:1}
.top .meta{font:12px var(--f-mono);color:var(--muted);display:flex;gap:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.top .meta b{color:var(--fg);font-weight:500}
.top .esci{
  border:1px solid var(--line-2);background:none;color:var(--muted);
  padding:7px 12px;border-radius:3px;cursor:pointer;
  font:500 10px var(--f-mono);letter-spacing:.14em;min-height:34px;
}
.top .esci:hover{color:var(--fg);border-color:var(--muted)}

/* Il badge di manutenzione sta in ogni schermata, in alto a destra.
   ⚠️ Dice solo cose vere: in caso di dubbio non accusa. */
.badge{
  font:500 10px var(--f-mono);letter-spacing:.1em;padding:4px 8px;
  border:1px solid currentColor;border-radius:2px;white-space:nowrap;
}
.badge.ok{color:var(--muted)}
.badge.attenzione{color:var(--warn)}

/* --- menu di sinistra: si costruisce dai moduli di `GET /api/io` --- */
.nav{
  border-right:1px solid var(--line);background:var(--panel);
  padding:14px 10px;display:flex;flex-direction:column;gap:2px;overflow:auto;
}
.nav .etichetta{font:500 10px var(--f-mono);letter-spacing:.16em;color:var(--dim);padding:10px 10px 6px}
/* Il passaggio fra area di lavoro e area personale: un bottone, o un collegamento se
   le due aree stanno su due indirizzi. */
.nav .cambia-area{
  display:flex;align-items:center;justify-content:center;flex:none;min-height:44px;
  margin:0 0 8px;padding:6px 10px;border:1px solid var(--state);border-radius:3px;
  background:none;color:var(--state);font:600 12px var(--f-display);letter-spacing:.06em;
  text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;
}
.nav .cambia-area:hover{background:var(--panel-2)}
.nav .voce{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px;border:0;border-radius:3px;background:none;text-align:left;
  color:var(--muted);font-weight:500;cursor:pointer;width:100%;min-height:42px;
}
.nav .voce:hover{background:var(--panel-2);color:var(--fg)}
.nav .voce[aria-current="true"]{background:var(--panel-2);color:var(--fg);box-shadow:inset 2px 0 0 var(--blu)}
/* Quante cose aspettano una decisione: «Da confermare» (ADR-012). */
.nav .voce .conteggio{
  font:600 11px var(--f-mono);color:var(--warn);border:1px solid currentColor;
  border-radius:2px;padding:1px 6px;min-width:20px;text-align:center;
}
.nav .sotto{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px 10px}
.nav .sotto button{
  border:0;background:none;color:var(--dim);text-align:left;cursor:pointer;
  padding:7px 10px;border-radius:3px;font-size:13.5px;min-height:34px;
}
.nav .sotto button:hover{color:var(--fg)}
.nav .sotto button[aria-current="true"]{color:var(--state)}

/* --- area centrale --- */
.main{overflow:auto;padding:18px;display:flex;flex-direction:column;gap:18px;min-width:0}

/* Il nucleo ha due formati, e la scelta non e' estetica: dipende da cosa sta
   facendo la persona (pieno in centrale, ridotto sopra la chat, assente sul
   campo). E' UN SOLO canvas, agganciato all'uno o all'altro contenitore. */
.palco{
  position:relative;flex:none;
  height:clamp(300px,42vh,520px);
  border:1px solid var(--line);overflow:hidden;
  background:
    radial-gradient(ellipse at center,rgba(255,255,255,.025),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),#05080a;
}
.palco canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.palco.ridotto{height:120px}
.hud{position:absolute;font:500 11px var(--f-mono);letter-spacing:.14em;color:var(--state);transition:color .6s;pointer-events:none}
.hud.tl{top:12px;left:14px;color:var(--muted)}
.hud.tr{top:12px;right:14px;text-align:right}
.hud.bl{bottom:12px;left:14px;color:var(--muted)}
.palco.ridotto .hud.bl{display:none}
.hud .cur{animation:lampeggia 1s steps(1) infinite}
@keyframes lampeggia{50%{opacity:0}}

/* --- schede in alto nell'area centrale (le stesse del menu: ridondanza voluta) --- */
.schede{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);padding-bottom:10px}
/* Una sezione con una scheda sola non ha linguette (`disegnaSchede`): senza questa riga
   restava una riga vuota col suo bordo, che sul telefono e' un'altezza buttata. */
.schede:empty{display:none}
.schede button{
  border:1px solid var(--line-2);background:none;color:var(--muted);
  padding:7px 12px;border-radius:3px;cursor:pointer;min-height:38px;
  font:500 12px var(--f-display);letter-spacing:.1em;text-transform:uppercase;
}
.schede button:hover{color:var(--fg)}
.schede button[aria-current="true"]{color:var(--fg);border-color:var(--blu);background:rgba(0,62,123,.35)}

.titolo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0}
.titolo h2{margin:0;font:600 18px var(--f-display);letter-spacing:.06em}
.titolo .fonte{font:10px var(--f-mono);letter-spacing:.12em;color:var(--dim);border:1px solid var(--line-2);padding:3px 6px}
.spiega{margin:0;font:12.5px/1.6 var(--f-body);color:var(--muted);max-width:76ch}
.spiega.avviso{color:var(--warn);border-left:2px solid var(--warn);padding-left:10px}

/* --- riquadri e tabelle --- */
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.riquadro{border:1px solid var(--line);background:var(--panel);padding:13px 15px;min-width:0}
.riquadro h3{
  margin:0 0 10px;font:600 11px var(--f-display);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;
  align-items:baseline;gap:10px;
}
.riquadro h3 b{font:600 24px var(--f-display);color:var(--fg);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.riquadro .nota{margin:8px 0 0;font:11.5px/1.5 var(--f-body);color:var(--dim)}

.righe{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.righe li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 0;border-top:1px solid var(--line);font-size:13.5px;
}
.righe li:first-child{border-top:0}
.righe .t{font:12px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.righe .x{min-width:0;overflow-wrap:anywhere}
.righe .x small{display:block;color:var(--muted);font-size:11.5px}

.tabella-involucro{overflow-x:auto;border:1px solid var(--line);background:var(--panel)}
table.tabella{border-collapse:collapse;width:100%;font-size:13px}
table.tabella th,table.tabella td{
  text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:top;
}
table.tabella th{
  font:500 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;position:sticky;top:0;background:var(--panel-2);
}
table.tabella td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--f-mono)}
table.tabella tr:last-child td{border-bottom:0}

.pillola{
  font:500 10px var(--f-mono);letter-spacing:.08em;padding:2px 6px;
  border:1px solid currentColor;border-radius:2px;white-space:nowrap;display:inline-block;
}
.p-alta{color:var(--think)} .p-media{color:var(--warn)} .p-bassa{color:var(--muted)} .p-ok{color:var(--talk)}

.vuoto{margin:0;padding:18px 0;color:var(--dim);font:13px var(--f-body)}
.errore{
  margin:0;padding:11px 13px;border:1px solid var(--think);color:#ffb4b4;
  background:rgba(255,52,52,.07);font-size:13.5px;overflow-wrap:anywhere;
}
.caricamento{margin:0;padding:18px 0;color:var(--state);font:12px var(--f-mono);letter-spacing:.14em}

/* --- bottoni d'azione --- */
.azioni{display:flex;flex-wrap:wrap;gap:8px}
button.agisci{
  border:1px solid var(--state);background:transparent;color:var(--state);cursor:pointer;
  padding:9px 15px;border-radius:3px;min-height:42px;
  font:600 12px var(--f-display);letter-spacing:.14em;
}
button.agisci:hover:not(:disabled){background:var(--state);color:var(--bg)}
button.agisci.calmo{border-color:var(--line-2);color:var(--muted)}
button.agisci.calmo:hover:not(:disabled){background:var(--panel-2);color:var(--fg)}
button.agisci:disabled{opacity:.45;cursor:progress}

form.campi{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}
form.campi label{display:flex;flex-direction:column;gap:4px;font:500 10px var(--f-mono);letter-spacing:.12em;color:var(--muted)}
/* ⚠️ `font-size` scritto e non ereditato: i controlli hanno `font:inherit`, e qui il
   genitore e' la `label` da 10px in carattere a spaziatura fissa. Fino al 2026-11-07
   «Tutti» in una scelta e le date dei filtri si leggevano a 10px, anche sul desktop. */
form.campi input,form.campi select,form.campi textarea{
  background:var(--bg);border:1px solid var(--line-2);color:var(--fg);
  padding:9px 10px;border-radius:3px;min-height:40px;font-family:var(--f-body);
  font-size:13.5px;letter-spacing:normal;
}
form.campi input:focus,form.campi select:focus,form.campi textarea:focus{outline:none;border-color:var(--state)}

/* ============================== LA CHAT ============================== */
.chat{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0;position:relative}
/* La maniglia per allargare la colonna: il bordo sinistro, largo abbastanza da prenderlo. */
.chat-maniglia{position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:5;touch-action:none}
.chat-maniglia:hover,.chat-maniglia:focus-visible{background:linear-gradient(90deg,transparent 3px,var(--blu) 3px,var(--blu) 5px,transparent 5px);outline:none}
body.trascina-chat{cursor:col-resize;user-select:none}
/* La linguetta (2026-11-07): apre e chiude la colonna. A colonna chiusa la
   colonna e' larga zero e restano visibili solo la linguetta e il bordo. */
.chat-linguetta{
  position:absolute;left:-22px;top:50%;transform:translateY(-50%);z-index:6;
  width:22px;height:56px;padding:0;border:1px solid var(--line);border-right:0;
  border-radius:6px 0 0 6px;background:var(--panel);color:var(--muted);
  font:16px/1 var(--f-mono);cursor:pointer;
}
.chat-linguetta:hover,.chat-linguetta:focus-visible{color:var(--fg);background:var(--panel-2);outline:none;box-shadow:inset 2px 0 0 var(--blu)}
/* ⚠️ Solo sopra gli 860px: sotto, la chat e' impilata sotto la pagina e non c'e'
   una colonna da chiudere — la linguetta li' e' nascosta. */
@media (min-width:861px){
  :root.chat-chiusa{--colonna-chat:0px}
  :root.chat-chiusa .chat{border-left:0}
  :root.chat-chiusa .chat > :not(.chat-linguetta){display:none}
}
/* 🔴 LA TESTA VA A CAPO, e il chip del motore non spinge la pagina (2026-11-07).
   Il chip e' `nowrap` — un nome di motore spezzato a meta' non si legge — e con
   «MOTORE: FINTO-DETERMINISTICO» accanto a titolo e «COME FUNZIONA» la riga era
   larga ~430px: in una colonna da 400 (1600px di finestra) e a tutta larghezza su un
   telefono da 360 la pagina scorreva di lato di 63px, senza nessun errore. Adesso la
   testa va a capo e il chip, se da solo e' ancora troppo largo, si tronca coi puntini:
   il nome intero resta nel suo `title`, che `assistente.js` riempie. */
.chat-testa{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.chat-testa .ttl{font:600 13px var(--f-display);letter-spacing:.1em}
.chat-testa .st{font:11px var(--f-mono);color:var(--state);letter-spacing:.1em;transition:color .6s}
.chat-testa .motore{margin-left:auto;font:10px var(--f-mono);letter-spacing:.08em;color:var(--muted);border:1px solid var(--line-2);padding:3px 6px;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Il contenitore del nucleo in formato RIDOTTO, sopra la chat. Porta anche
   `.palco.ridotto`: e' quello che gli da' altezza e `position:relative`, e senza
   cui il canvas non sta in assoluto. Vedi la nota in `app/assistente.js`. */
.chat .palco-chat{border:0;border-bottom:1px solid var(--line)}

.diario{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:13px;min-height:0}
.msg{max-width:94%;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.msg.io{align-self:flex-end;background:var(--panel-2);border:1px solid var(--line-2);padding:9px 12px;border-radius:10px 10px 2px 10px}
.msg.lui{align-self:flex-start;padding-left:12px;border-left:2px solid var(--line-2)}
.msg.lui.vivo{border-left-color:var(--state)}
.msg.lui .chi{display:block;font:500 10px var(--f-mono);letter-spacing:.14em;color:var(--muted);margin-bottom:3px}
.msg.lui.attesa .corpo{color:var(--state);font-family:var(--f-mono);font-size:12.5px}
.msg .strumenti{display:block;margin-top:7px;font:10.5px/1.5 var(--f-mono);color:var(--dim);letter-spacing:.06em}
.msg .avviso-chat{display:block;margin-top:7px;font:11px/1.5 var(--f-body);color:var(--warn)}
.msg .conferma{display:block;margin-top:8px;padding:8px 10px;border:1px dashed var(--warn);color:var(--warn);font:11.5px/1.5 var(--f-body)}
.msg.errore-chat{border-left-color:var(--think);color:#ffb4b4}
.diario p{margin:0 0 .5em}
.diario p:last-child{margin-bottom:0}

.composizione{display:flex;gap:8px;padding:11px 16px calc(13px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.composizione textarea{
  flex:1;resize:none;background:var(--bg);border:1px solid var(--line-2);color:var(--fg);
  font:14.5px/1.4 var(--f-body);padding:10px 12px;border-radius:3px;height:46px;min-width:0;
}
.composizione textarea:focus{outline:none;border-color:var(--state)}
.composizione button{
  flex:none;border:1px solid var(--state);background:transparent;color:var(--state);
  font:600 12px var(--f-display);letter-spacing:.14em;padding:0 15px;cursor:pointer;
  border-radius:3px;min-height:46px;min-width:70px;
}
.composizione button:hover:not(:disabled){background:var(--state);color:var(--bg)}
.composizione button:disabled{opacity:.45;cursor:progress}
.chat-nota{font:11px/1.5 var(--f-mono);color:var(--dim);padding:0 16px 10px}

/* ======================= LA MODALITA' AUTOMATICA =======================
   Il pannello sotto il nucleo: sta in `.area`, cioe' nella sezione aperta.
   Quando la modalita' non e' attiva questo pannello NON ESISTE — non e'
   nascosto: `guscio.js` svuota l'area a ogni cambio di scheda, e l'area
   appartiene a chi sta lavorando (vedi `app/sezioni/automatica.js`).

   ⚠️ Qui non si da' MAI altezza o `position` a un contenitore di canvas: il
   nucleo sta in `.palco`, sopra quest'area, e non si duplica. */
.automatica-corpo{display:flex;flex-direction:column;gap:14px}
.domanda-fatta{margin:0;font-size:14.5px;line-height:1.55;color:var(--fg);overflow-wrap:anywhere}
/* Ambra tratteggiata: e' il segno che nel prototipo marca una cosa che il
   sistema NON fa senza un si' umano. Lo stesso segno, lo stesso significato. */
.riquadro.in-attesa-di-si{border:1px dashed var(--warn)}
.riquadro.in-attesa-di-si h3 b{color:var(--warn)}
/* Un collegamento che e' un bottone: porta a un'altra SEZIONE, non a un indirizzo.
   Resta un `<button>` perche' non e' una navigazione del browser. */
button.come-link{
  border:0;background:none;padding:0;cursor:pointer;color:var(--state);
  font:inherit;text-decoration:underline;text-underline-offset:2px;
}

/* ============================== RESPONSIVO ==============================
   Le guardie usano il telefono. A 360px non deve esserci scorrimento
   orizzontale da nessuna parte: ronde, timbrature e incasso sul campo. */
@media (max-width:1180px){
  .app{grid-template-columns:minmax(0,1fr) var(--colonna-chat,var(--larghezza-chat,360px));grid-template-rows:56px auto minmax(0,1fr)}
  .nav{grid-column:1/-1;flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line);padding:6px 12px;overflow-x:auto}
  .nav .etichetta{display:none}
  .nav .voce{width:auto;white-space:nowrap}
  .nav .voce[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--blu)}
  .nav .sotto{display:none}   /* su schermo stretto le schede stanno solo in alto */
}
/* ⚠️ Sotto gli 860px la testa, il menu e la chat del telefono stanno nel blocco
   «IL TELEFONO», in fondo al file: qui resta solo l'impaginazione della pagina. */
@media (max-width:860px){
  html,body{height:auto}
  .app{display:flex;flex-direction:column;height:auto;min-height:100%}
  .main{overflow:visible;padding:12px}
  .palco{height:clamp(220px,62vw,340px)}
  .chat-maniglia{display:none}   /* la chat sul telefono e' a tutto schermo: niente da allargare */
  .chat-linguetta{display:none} /* ...e la apre il bottone ASSISTENTE della testa */
  .griglia{grid-template-columns:minmax(0,1fr)}
  table.tabella{font-size:12.5px}
  table.tabella th,table.tabella td{padding:7px 9px}
}
@media (max-width:400px){
  .main{padding:10px}
  .riquadro{padding:11px 12px}
  .marchio{font-size:12px;letter-spacing:.08em}
}

@media (prefers-reduced-motion:reduce){
  .hud .cur{animation:none}
  .nav{transition:none !important}
}

/* ================= ELENCHI, POPUP E L'ICONA «i» (2026-10-06) =================
   Elisa, provando il gestionale: *«sto notando un sacco di riquadri e un sacco di
   indicazioni [...] troppo testo in giro»*, *«clicco sopra la voce -> si apre il
   popup -> modifico e salvo»*, *«un tasto con un + per fare un nuovo cliente»*.
   Le regole che seguono sono quella forma. Il comportamento sta in
   `app/sezioni/comune.js` (`popup`, `informazioni`, `elencoCliccabile`), la
   regola scritta nelle convenzioni, alla voce «elenchi e popup».

   ⚠️ SOLO TOKEN del tema, come tutto il resto di questo file. Il velo e le ombre
   non introducono un nero nuovo: sono `--bg` reso trasparente con `color-mix`.
   Prima di `color-mix` c'e' sempre la riga con il colore pieno, che un browser
   piu' vecchio usa — un velo opaco e' brutto, un velo assente mostra due
   interfacce una sopra l'altra.

   ⚠️ A 360px NON si scorre in orizzontale (base.css lo promette per le guardie):
   il popup e' larghezza piena meno il margine, i campi vanno su una colonna, e
   i due bottoni del piede si allargano a meta' ciascuno.
   ========================================================================== */

/* --- la testa di un elenco: titolo a sinistra, «i» accanto, `+` a destra --- */
.elenco-testa{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.elenco-testa .spazio{flex:1 1 0}
button.agisci.piu{
  min-width:44px;padding:0 13px;letter-spacing:0;
  font:400 22px/1 var(--f-body);
}

/* La riga di riepilogo sopra l'elenco: UNA riga, non una scheda a parte.
   ⚠️ `.filtri` e `.interruttore` sono usate da tre sezioni (clienti, impianti,
   mezzi) e non avevano nessuna regola: erano un `div` e una `label` grezzi. */
.sommario{display:flex;flex-direction:column;gap:6px}
.sommario .nota{margin:0;font:12.5px/1.6 var(--f-body);color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.filtri{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.interruttore{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:500 11px var(--f-mono);letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;min-height:34px;
}
.interruttore:hover{color:var(--fg)}
.interruttore input{accent-color:var(--state);width:16px;height:16px}

/* --- le righe che aprono il popup ---
   ⚠️ `outline-offset` NEGATIVO: su un `<tr>` il contorno a +2px viene tagliato
   dall'involucro con `overflow-x:auto`, e il fuoco da tastiera si vedrebbe a
   meta' sulla prima e sull'ultima riga. */
table.tabella tr.cliccabile{cursor:pointer}
table.tabella tr.cliccabile:hover{background:var(--panel-2)}
table.tabella tr.cliccabile:focus-visible{outline:2px solid var(--state);outline-offset:-2px}

/* --- l'icona «i» e la sua bolla --- */
.informazioni{position:relative;display:inline-flex;vertical-align:middle;flex:none}
.informazioni-icona{
  width:19px;height:19px;flex:none;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--muted);
  font:600 11px/1 var(--f-display);
}
.informazioni-icona:hover{color:var(--state);border-color:var(--state)}
.informazioni-bolla{
  display:none;position:absolute;z-index:60;top:calc(100% + 7px);left:0;
  width:max-content;max-width:min(380px,76vw);
  padding:9px 11px;border:1px solid var(--line-2);
  background:var(--panel-2);color:var(--fg);
  font:12.5px/1.6 var(--f-body);text-transform:none;letter-spacing:normal;
  white-space:normal;overflow-wrap:anywhere;
  box-shadow:0 10px 26px var(--bg);
  box-shadow:0 10px 26px color-mix(in srgb,var(--bg) 70%,transparent);
}
.informazioni:hover .informazioni-bolla,
.informazioni.aperta .informazioni-bolla,
.informazioni-icona:focus-visible + .informazioni-bolla{display:block}

/* --- il popup --- */
.sovrapposizione{
  position:fixed;inset:0;z-index:90;padding:16px;overflow:auto;
  display:grid;place-items:center;
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 84%,transparent);
}
body.con-popup{overflow:hidden}
.popup{
  width:min(620px,100%);max-height:calc(100vh - 32px);min-width:0;
  display:flex;flex-direction:column;
  border:1px solid var(--line-2);background:var(--panel);
  box-shadow:0 20px 60px var(--bg);
  box-shadow:0 20px 60px color-mix(in srgb,var(--bg) 72%,transparent);
}
.popup-testa{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line);background:var(--panel-2);
  position:relative;
}
/* ⚠️ Nella testa del popup la bolla si ancora alla TESTA, non all'icona: ancorata
   all'icona (che sta a meta' riga) sporgeva fuori dalla finestra sulla destra —
   visto rendendo la schermata, non dedotto. `position:static` sull'involucro fa
   risolvere l'assoluto su `.popup-testa`, che e' relativa. */
.popup-testa .informazioni{position:static}
.popup-testa .informazioni-bolla{left:13px;right:13px;width:auto;max-width:none}
.popup-testa h2{
  margin:0;min-width:0;overflow-wrap:anywhere;
  font:600 15px var(--f-display);letter-spacing:.06em;
}
.popup-testa .spazio{flex:1 1 0}
.popup-chiudi{
  flex:none;width:34px;height:34px;cursor:pointer;border-radius:3px;
  border:1px solid var(--line-2);background:none;color:var(--muted);
  font:400 19px/1 var(--f-body);
}
.popup-chiudi:hover{color:var(--fg);border-color:var(--muted)}
.popup-modulo{display:flex;flex-direction:column;min-height:0}
.popup-corpo{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:12px}

/* ⚠️ I campi del popup stanno in un `<div>` dentro il `<form>`, non in un
   `form.campi`: le regole di `form.campi` (piu' sopra) non li raggiungono, e
   senza queste righe i controlli tornerebbero quelli grezzi del browser —
   fondo bianco su tema scuro. Stessi valori, stesso aspetto. */
.popup-campi{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.popup-campi label{display:flex;flex-direction:column;gap:5px;min-width:0}
.popup-campi .campo-nome{
  display:inline-flex;align-items:center;gap:6px;
  font:500 10px var(--f-mono);letter-spacing:.12em;color:var(--muted);
  text-transform:uppercase;
}
.popup-campi input,.popup-campi select,.popup-campi textarea{
  background:var(--bg);border:1px solid var(--line-2);color:var(--fg);
  padding:9px 10px;border-radius:3px;min-height:40px;
  font-family:var(--f-body);width:100%;min-width:0;
}
.popup-campi input:focus,.popup-campi select:focus,.popup-campi textarea:focus{
  outline:none;border-color:var(--state);
}
/* `classe:"larga"` su un campo -> occupa la riga intera. La regola sta sulla
   `<label>` e non sul controllo, perche' l'elemento della griglia e' la label. */
.popup-campi > label.larga{grid-column:1/-1}

/* L'errore dell'API sta QUI, dentro la finestra: vedi la nota in `comune.js`. */
.popup-errore:empty{display:none}
.popup-piede{
  display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;
  padding:11px 14px;border-top:1px solid var(--line);background:var(--panel-2);
}
.popup-nota{margin:0;font:12px/1.6 var(--f-body);color:var(--muted)}

/* --- l'editor di un modello (`sezioni/editor_modelli.js`) --- */
.popup.popup-largo{width:min(920px,100%)}
.editor{border:1px solid var(--line-2);border-radius:3px;background:var(--bg);min-width:0}
.editor-barra{
  position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;gap:4px;padding:6px;
  border-bottom:1px solid var(--line);background:var(--panel-2);
}
.editor-bottone{
  min-width:34px;height:34px;padding:0 7px;cursor:pointer;border-radius:3px;
  border:1px solid var(--line-2);background:none;color:var(--fg);
  font:500 12px var(--f-mono);
}
.editor-bottone:hover{border-color:var(--muted)}
.editor-bottone[aria-pressed="true"]{background:var(--state);border-color:var(--state);color:var(--bg)}
.editor-g{font-weight:700}
.editor-c{font-style:italic}
.editor-s{text-decoration:underline}
.editor-scelta{
  height:34px;min-width:0;max-width:100%;padding:0 6px;border-radius:3px;
  border:1px solid var(--line-2);background:var(--bg);color:var(--fg);
  font:13px var(--f-body);
}
.editor-testo{
  min-height:280px;padding:14px;outline:none;white-space:pre-wrap;overflow-wrap:anywhere;
  font:14.5px/1.6 var(--f-body);color:var(--fg);
}
.editor-testo:focus{box-shadow:inset 0 0 0 1px var(--state)}
.editor-testo p{margin:0 0 8px}
.editor-testo h1{margin:14px 0 8px;font:700 20px/1.3 var(--f-body)}
.editor-testo h2{margin:12px 0 6px;font:700 16.5px/1.3 var(--f-body)}
.editor-testo ul,.editor-testo ol{margin:0 0 8px;padding-left:28px}

@media (max-width:420px){
  .sovrapposizione{padding:8px;place-items:start center}
  .popup{max-height:calc(100vh - 16px)}
  .popup-corpo{padding:11px}
  .popup-campi{grid-template-columns:minmax(0,1fr)}
  .popup-piede{padding:10px 11px}
  .popup-piede button.agisci{flex:1 1 40%}
  .informazioni-bolla{max-width:min(300px,84vw)}
}

/* ======================= LA DASHBOARD A TESSERE (2026-11-06) =======================
   Elisa, sulla Dashboard: *«completamente un casino, i testi sono troppi, non si capisce
   niente, tutto in disordine»*. Il comportamento sta in `app/sezioni/cruscotto.js`.

   ⭐ UNA TESSERA = UN NUMERO: numero grande, etichetta di due-quattro parole, UNA riga
   sotto, e il BORDO SINISTRO che dice lo stato. Lo stato arriva dall'API (`livello`) e
   qui si disegna soltanto: ok verde, attenzione ambra, grave rosso, non misurato grigio
   tratteggiato, neutro la linea normale.

   🔴 LE COLONNE LE DECIDE LA LARGHEZZA DELLA PAGINA, NON DELLA FINESTRA. Nel gestionale
   l'area centrale e' larga quanto resta fra il menu e la colonna dell'assistente, che si
   allarga trascinandola: a 1280 sono circa 620px. Una `@media` misurerebbe la finestra e
   darebbe cinque colonne in 620px. Quindi `.cruscotto` e' un CONTENITORE e le regole sono
   `@container`: cinque tessere per fila dai 1100px, tre fino agli 860, due sotto, una
   sotto i 400. A 360px non si scorre in orizzontale.

   ⚠️ SOLO TOKEN DEL TEMA. I due nuovi (`--ok`, `--grave`) sono nomi per due colori che
   il tema ha gia': la tessera dice uno stato, non lo stato dell'assistente, e un nome suo
   evita che cambiando l'uno si cambi l'altro per sbaglio.

   🔴 OGNI COLORE VUOL DIRE UNA COSA SOLA, IN TUTTA LA DASHBOARD (2026-11-09). Elisa:
   *«incassato e costi hanno lo stesso colore, non va bene, si confonde il dato»*. Il rosso
   era insieme «costi» e «grave», il verde «utile» e «a posto»:
     --idle     ciano    i ricavi e il fatturato
     --talk     verde    i soldi entrati: Incassato, Entrate in banca, Incassi arrivati
     --think    rosso    i costi, e nient'altro
     --argento  argento  l'utile e il margine
     --warn     ambra    lo stato che chiede di guardare: bordo ed etichetta, MAI il numero
     --muted    grigio   lo stato «a posto», e il saldo IVA che non e' ne' costo ne' utile
   ⚠️ `grave` e `attenzione` sono la stessa famiglia: li separa l'etichetta GRAVE e il bordo
   piu' spesso, non un secondo colore, perche' il tema non ne ha uno libero.
   ========================================================================== */
:root{--ok:var(--muted);--grave:var(--warn)}

.cruscotto{container:cruscotto/inline-size;display:flex;flex-direction:column;gap:18px;min-width:0}

/* --- la testa: titolo, «i», periodo, il pallino del nucleo --- */
.cruscotto-testa{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;min-width:0}
.cruscotto-testa h2{margin:0;font:600 18px var(--f-display);letter-spacing:.06em}
.cruscotto-testa .spazio{flex:1 1 0}
.periodo{display:inline-flex;border:1px solid var(--line-2)}
.periodo button{
  background:transparent;border:0;border-left:1px solid var(--line-2);color:var(--muted);
  font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:7px 11px;cursor:pointer;
}
.periodo button:first-child{border-left:0}
.periodo button:hover{color:var(--fg)}
.periodo button[aria-pressed="true"]{
  color:var(--fg);background:var(--panel-2);
  background:color-mix(in srgb,var(--blu) 45%,transparent);
}
.periodo-testo{display:inline-flex;align-items:center;gap:4px;font:11px var(--f-mono);color:var(--dim);white-space:nowrap}

/* --- una fila: la riga sottile col nome, le tessere, il pannello --- */
.fila{display:flex;flex-direction:column;gap:8px;min-width:0}
.fila-titolo{
  display:flex;align-items:center;gap:8px;margin:0;
  font:500 10px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.fila-titolo::after{content:"";flex:1 1 0;border-top:1px solid var(--line)}
.tessere{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;min-width:0}
.tessere.quattro{grid-template-columns:repeat(4,minmax(0,1fr))}
.tessere.sei{grid-template-columns:repeat(3,minmax(0,1fr))}

/* --- la tessera --- */
.tessera{
  container-type:inline-size;
  display:flex;flex-direction:column;gap:6px;min-width:0;
  padding:11px 13px 12px;border:1px solid var(--line);border-left:3px solid var(--line-2);
  background:var(--panel);
}
.tessera[role="button"]{cursor:pointer}
.tessera[role="button"]:hover{background:var(--panel-2)}
.tessera.istituzionale{border-top-color:var(--blu)}
.tessera-testa{
  display:flex;align-items:center;gap:6px;min-width:0;
  font:600 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.tessera-testa .nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tessera-testa .spazio{flex:1 1 0}
.tessera-numero{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 28px/1.08 var(--f-display);font-size:clamp(20px,14cqi,38px);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--fg);
}
.tessera-sotto{min-width:0;font:11.5px/1.45 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}

/* lo stato: il bordo, e l'etichetta se e' grave. Mai il colore del numero */
.tessera.liv-ok{border-left-color:var(--ok)}
.tessera.liv-attenzione{border-left-color:var(--warn)}
.tessera.liv-grave{border-left:5px solid var(--grave);padding-left:11px}
.tessera.liv-non_misurato{border-left-style:dashed;border-left-color:var(--dim)}
.tessera.liv-non_misurato .tessera-numero{color:var(--dim)}

/* di che soldi si parla: il colore del numero (vedi la mappa in testa al blocco) */
.tessera.tono-ricavi .tessera-numero{color:var(--idle)}
.tessera.tono-entrate .tessera-numero{color:var(--talk)}
.tessera.tono-utile .tessera-numero{color:var(--argento)}
.tessera.tono-entrate .barra .pista i{background:var(--talk)}

/* le pillole dello scarico, nella Dashboard: il verde e il rosso qui sono gia' due soldi */
.cruscotto .pillola.p-ok{color:var(--ok)}
.cruscotto .pillola.p-alta{color:var(--grave)}

/* il chip di due parole al posto del paragrafo; il testo intero sta nella sua «i» */
.chip{
  display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
  font:500 9.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  padding:1px 2px 1px 5px;border:1px solid currentColor;color:var(--warn);
}
.chip.grigio{color:var(--muted)}
.chip.pieno{padding:1px 5px;color:var(--bg);background:var(--warn);border-color:var(--warn)}

/* la terna F · D · R: tre micro-numeri, la lettera davanti */
.terna{display:flex;flex-wrap:wrap;gap:2px 10px;color:var(--fg)}
.terna span{white-space:nowrap}
.terna abbr{font-size:10px;color:var(--dim);text-decoration:none;margin-right:3px}

/* la barra di una quota, e quella delle quattro fasce dello scaduto.
   ⚠️ La larghezza e' la quota che l'API manda: qui non si calcola niente. */
.barra,.fasce{display:flex;align-items:center;gap:8px;min-width:0}
.barra .pista,.fasce .pista{flex:1 1 auto;min-width:24px;height:5px;background:var(--line-2);overflow:hidden;display:flex}
.barra .pista i,.fasce .pista i{display:block;height:100%;flex:none}
.barra .pista i{background:var(--muted)}
.fasce .f1{background:var(--muted);background:color-mix(in srgb,var(--muted) 55%,transparent)}
.fasce .f2{background:var(--muted)}
.fasce .f3{background:var(--warn);background:color-mix(in srgb,var(--warn) 55%,transparent)}
.fasce .f4{background:var(--grave)}

/* --- la finestra del dettaglio (2026-11-07): una sola, per ogni numero ---
   ⭐ Prima il dettaglio si apriva in un pannello sotto la fila; dalla Dashboard a grafici
   si apre in una finestra, come nella Control Room: ESC, clic fuori o X. Le classi del
   popup di `comune.js` danno la cornice, queste il contenuto. */
.finestra-dettaglio{width:min(760px,calc(100vw - 32px))}
.finestra-periodo{display:block;margin-top:2px;font:500 10.5px var(--f-mono);letter-spacing:.08em;color:var(--dim)}
.finestra-dettaglio h4{margin:0 0 6px;font:600 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.finestra-dettaglio h5{margin:4px 0 2px;font:500 10px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.finestra-dettaglio .colonne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.finestra-dettaglio .righe li,.bolla-dettaglio .righe li{grid-template-columns:minmax(0,1fr) auto}
.finestra-dettaglio .righe li.altri,.bolla-dettaglio .righe li.altri{color:var(--dim);font-size:12px}
.finestra-dettaglio .nota{margin:6px 0 0;font:11.5px/1.5 var(--f-body);color:var(--dim)}
.dettaglio-corpo{display:flex;flex-direction:column;gap:14px;min-width:0}
.dettaglio-sezione{min-width:0}
.dettaglio-fascia{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:9px 12px;border:1px solid var(--line-2);background:var(--panel-2);
  font:600 12px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.dettaglio-fascia b{font:600 15px var(--f-mono);color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:0}
.dettaglio-fascia.utile{border-left:3px solid var(--argento)}
.dettaglio-fascia.grave{border-left:3px solid var(--grave)}
/* la formula scritta, poi la stessa con i numeri dentro */
.formula{
  margin:0;padding:10px 12px;border:1px solid var(--line-2);border-left:3px solid var(--idle);
  background:var(--panel-2);font:12.5px/1.5 var(--f-mono);color:var(--fg);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.formula.risultato{border-left-color:var(--muted)}
.finestra-dettaglio .formula:not(.risultato){border-left-color:var(--argento)}
.avvertenze{margin:0;padding-left:18px;font:12px/1.5 var(--f-body);color:var(--warn)}
/* le barre orizzontali con la percentuale: per cliente, per categoria di costo.
   ⚠️ La larghezza e' la percentuale che l'API manda, sul valore piu' grande. */
.barre-orizzontali{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.barre-orizzontali li{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(40px,1fr) auto auto;gap:10px;align-items:center;
  padding:7px 0;border-top:1px solid var(--line);font-size:13px;
}
.barre-orizzontali li:first-child{border-top:0}
.barre-orizzontali .x{min-width:0;overflow-wrap:anywhere}
.barre-orizzontali .x small{display:block;color:var(--muted);font-size:11px}
.barre-orizzontali .pista{height:6px;background:var(--line-2);overflow:hidden;display:flex}
.barre-orizzontali .pista i{display:block;height:100%;background:var(--idle)}
.barre-orizzontali.costi .pista i{background:var(--think)}
.barre-orizzontali .q,.barre-orizzontali .t{font:12px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.barre-orizzontali .t{color:var(--fg)}
.barre-orizzontali li.spenta{opacity:.5}
.barre-orizzontali li.spenta .pista i{background:var(--dim)}
.righe.numerate{counter-reset:riga}
.righe.numerate li{grid-template-columns:auto minmax(0,1fr) auto auto;counter-increment:riga}
.righe.numerate li::before{content:counter(riga) ".";font:11px var(--f-mono);color:var(--dim)}
/* la bolla al passaggio: le prime righe, senza cliccare */
.bolla-dettaglio{
  position:fixed;z-index:80;width:min(340px,calc(100vw - 16px));pointer-events:none;
  padding:9px 12px;border:1px solid var(--line-2);background:var(--panel-2);
  box-shadow:0 10px 30px var(--bg);font-size:12.5px;
}
.bolla-testa{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px;font:600 11px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bolla-testa span{font-family:var(--f-mono);color:var(--fg);letter-spacing:0}
.bolla-dettaglio .righe li{padding:5px 0;font-size:12.5px}

/* --- la banca: un blocco per banca, le tessere del conto dentro --- */
.banche{display:flex;flex-direction:column;gap:10px;min-width:0}
.banca-blocco{border:1px solid var(--line);background:var(--panel);min-width:0}
.banca-blocco .tessere{padding:10px}
.banca-blocco .tessera{background:var(--panel-2)}
.banca-testa{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 13px;border-bottom:1px solid var(--line);min-width:0}
.banca-testa b{font:600 13px var(--f-display);letter-spacing:.1em;text-transform:uppercase}
.banca-testa > span{font:11px var(--f-mono);color:var(--muted);white-space:nowrap}
.banca-blocco.spenta{border-style:dashed}
.banca-blocco.spenta .banca-testa{border-bottom:0;color:var(--dim)}
.banca-blocco.spenta .banca-testa b{color:var(--muted)}

/* --- le colonne, sulla larghezza della PAGINA (vedi la nota in testa) --- */
@container cruscotto (max-width:1100px){
  .tessere{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container cruscotto (min-width:1500px){
  .tessere.sei{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@container cruscotto (max-width:860px){
  .tessere,.tessere.quattro,.tessere.sei{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container cruscotto (max-width:400px){
  .tessere,.tessere.quattro,.tessere.sei{grid-template-columns:minmax(0,1fr)}
}

/* ======================= LA DASHBOARD A GRAFICI (2026-11-07) =======================
   Elisa: *«vorrei mantenere i grafici, le voci di dettaglio ec... ec..»* — la Dashboard
   sul modello della Control Room di un progetto precedente. Il comportamento sta in
   `app/sezioni/cruscotto.js`.

   ⭐ IN ORDINE: i grafici del periodo, la fila dei numeri, la mezzaluna del margine accanto
   ai badge delle categorie di costo. In Anno tre riquadri da un terzo, in Mese e Trimestre
   uno a tutta larghezza; sotto gli 860px della PAGINA (container query, non la finestra)
   tutto in colonna. I colori dei grafici li legge `cruscotto.js` da questi token, adesso:
   `--idle` i ricavi, `--think` i costi, `--argento` l'utile, `--muted` il saldo IVA.

   ⚠️ SOLO TOKEN DEL TEMA, come tutto il resto del file.
   ========================================================================== */
.periodo-scelta{
  background:var(--panel);border:1px solid var(--line-2);color:var(--fg);
  font:500 11px var(--f-mono);letter-spacing:.06em;padding:6px 8px;min-height:30px;
}
.grafici{display:grid;gap:10px;min-width:0}
.grafici.uno{grid-template-columns:minmax(0,1fr)}
.grafici.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.grafico{display:flex;flex-direction:column;gap:8px;min-width:0;padding:11px 13px 12px;border:1px solid var(--line);background:var(--panel)}
.grafico-titolo{
  display:flex;align-items:center;gap:6px;margin:0;min-width:0;
  font:600 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.grafico-tela{position:relative;height:250px;min-width:0}
.grafici.uno .grafico-tela{height:290px}
.grafico-tela canvas{display:block;max-width:100%}
.grafico-nota{margin:0}
.grafico-totali{display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid var(--line);padding-top:8px}
.grafico-totali .totale{
  display:flex;flex-direction:column;gap:1px;min-width:0;background:none;border:0;padding:0;
  text-align:left;color:var(--muted);font:500 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
}
.grafico-totali .totale b{font:600 16px var(--f-mono);letter-spacing:0;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.grafico-totali .totale.ricavi{cursor:pointer;border-bottom:1px dotted var(--idle)}
.grafico-totali .totale.ricavi b{color:var(--idle)}
.grafico-totali .totale.costi b{color:var(--think)}

/* --- la riga bassa: la mezzaluna (un terzo) e i badge (due terzi) --- */
.riga-margine{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px;min-width:0;align-items:start}
.mezzaluna{
  display:flex;flex-direction:column;gap:6px;min-width:0;cursor:pointer;
  padding:11px 13px 12px;border:1px solid var(--line);border-left:3px solid var(--line-2);background:var(--panel);
}
.mezzaluna:hover{background:var(--panel-2)}
.mezzaluna-disegno{position:relative;width:100%;max-width:300px;margin:0 auto}
.mezzaluna-disegno svg{display:block;width:100%;height:auto}
.mezzaluna path{fill:none;stroke-width:14;stroke-linecap:round}
.mezzaluna .pista{stroke:var(--line-2)}
.mezzaluna .arco{stroke:var(--argento)}
.mezzaluna.liv-grave{border-left-color:var(--grave)}
.mezzaluna.liv-non_misurato{border-left-style:dashed;border-left-color:var(--dim)}
.mezzaluna-numero{position:absolute;left:0;right:0;bottom:2px;display:flex;flex-direction:column;align-items:center;gap:2px}
.mezzaluna-numero b{font:600 30px/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--fg)}
.mezzaluna.liv-non_misurato .mezzaluna-numero b{color:var(--dim)}
.mezzaluna-numero span{font:12px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mezzaluna-chip{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}

.costi{display:flex;flex-direction:column;gap:8px;min-width:0}
.costi-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.costi-barra .spazio{flex:1 1 0}
.costi-testa{
  display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0;cursor:pointer;
  padding:8px 12px;border:1px solid var(--line);border-left:3px solid var(--think);background:var(--panel);
  color:var(--muted);font:600 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;
}
.costi-testa b{font:600 18px var(--f-mono);letter-spacing:0;color:var(--think);font-variant-numeric:tabular-nums;white-space:nowrap}
.costi-testa .quante{font:500 10.5px var(--f-mono);letter-spacing:.06em;color:var(--dim);text-transform:none}
.costi-testa .freccia{color:var(--dim)}
button.agisci.piccolo{padding:5px 10px;font-size:11px}
.costi-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
.badge-costo{
  display:flex;flex-direction:column;gap:5px;min-width:0;cursor:pointer;
  padding:9px 11px 10px;border:1px solid var(--line);border-left:3px solid var(--think);background:var(--panel);
}
.badge-costo:hover{background:var(--panel-2)}
.badge-costo.a-mano{border-left-style:dashed}
.badge-costo.spenta{opacity:.45;border-left-color:var(--dim)}
.badge-costo.in-volo{outline:1px dashed var(--muted)}
.badge-testa{display:flex;align-items:center;gap:6px;min-width:0;font:600 10.5px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.badge-testa .nome{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maniglia{cursor:grab;color:var(--dim);letter-spacing:-.2em}
.nel-margine{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font:500 9.5px var(--f-mono);letter-spacing:.06em;text-transform:none;color:var(--dim);white-space:nowrap}
.nel-margine input{accent-color:var(--state);width:14px;height:14px;margin:0}
.badge-importo{font:600 18px/1.1 var(--f-mono);color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge-costo .barra{font:11px var(--f-mono);color:var(--muted)}
.badge-costo .barra .pista i{background:var(--think)}

@container cruscotto (max-width:1100px){
  .costi-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container cruscotto (max-width:860px){
  .grafici.tre,.riga-margine{grid-template-columns:minmax(0,1fr)}
  .grafici.uno .grafico-tela{height:250px}
}
@container cruscotto (max-width:400px){
  .costi-griglia{grid-template-columns:minmax(0,1fr)}
  .grafico-tela,.grafici.uno .grafico-tela{height:220px}
  .barre-orizzontali li{grid-template-columns:minmax(0,1fr) auto;row-gap:3px}
  .barre-orizzontali .pista{grid-column:1/-1;grid-row:2}
  .barre-orizzontali .q{display:none}
}
/* ⚠️ La finestra sta FUORI dal contenitore `.cruscotto`, quindi le sue regole strette sono
   `@media`: la finestra e' larga quanto lo schermo, non quanto la pagina. Misurato a 360px:
   senza, le barre per cliente spingevano la finestra oltre il bordo sinistro. */
@media (max-width:480px){
  .finestra-dettaglio{width:calc(100vw - 16px)}
  .finestra-dettaglio .colonne{grid-template-columns:minmax(0,1fr)}
  .finestra-dettaglio .barre-orizzontali li{grid-template-columns:minmax(0,1fr) auto;row-gap:3px}
  .finestra-dettaglio .barre-orizzontali .pista{grid-column:1/-1;grid-row:2}
  .finestra-dettaglio .barre-orizzontali .q{display:none}
}

/* ⚠️ I due blocchi del telefono stanno QUI, prima del margine, e non in fondo: le regole
   del margine sono tarate sotto i 500px (`test_sezione_margine.py` legge tutto quello che
   le segue), queste sulla finestra del telefono, e le due cose non si toccano. */
/* ============================ IL TELEFONO (2026-11-07) ============================
   Elisa: *«ottimizzazione visiva per mobile»*. La regola scritta e il perche' di ogni
   scelta stanno in `20-architettura/16-il-gestionale-sul-telefono.md`; qui la forma.

   ⭐ SOTTO GLI 860px IL GUSCIO CAMBIA FORMA, non solo misura:
     - la TESTA e' una riga sola che resta in cima: ☰, marchio, ASSISTENTE, ESCI;
     - il MENU e' un cassetto che esce da sinistra (`:root.menu-aperto`, `guscio.js`);
     - l'ASSISTENTE non sta impilato sotto la pagina: si apre sopra, a tutto schermo
       (`:root.assistente-aperto`, `assistente.js`).
   Sopra gli 860px nessuna di queste regole vale, e i tre bottoni non si vedono.

   🔴 A 360px NON SI SCORRE IN ORIZZONTALE: lo misura la pagina della wiki, a quattro
   larghezze, su ogni scheda. E i bersagli del dito sono di 44px almeno, i campi di
   16px di carattere almeno — sotto i 16px iOS ingrandisce la pagina a ogni tocco.

   ⚠️ La VISTA CAMPO (`body.campo`, `campo.css`) ha regole sue e piu' forti — bersagli
   da 78px — e qui non si toccano: le regole di questo blocco sono scritte con la
   specificita' piu' bassa che basta, cosi' quelle di `campo.css` continuano a vincere.

   ⚠️ SOLO TOKEN DEL TEMA, come tutto il resto del file. Il velo e' `--bg` reso
   trasparente con `color-mix`, con la riga piena prima per il browser che non lo ha.
   ========================================================================== */

/* I bottoni e il velo che esistono solo sul telefono: fuori dal telefono non ci sono. */
.apri-menu,.apri-assistente,.chat-chiudi-telefono,.velo-menu,.nav-piede{display:none}

@media (max-width:860px){
  /* --- la testa: una riga, che resta in cima mentre la pagina scorre --- */
  .top{
    position:sticky;top:0;z-index:70;
    min-height:56px;padding:6px 8px;gap:0 6px;flex-wrap:wrap;
  }
  .top .meta{display:none}          /* l'orologio e il nome stanno nel cassetto */
  .top .marchio{gap:8px;min-width:0}
  .top .marchio small{display:none}
  .top .marchio .scudo{height:30px}
  /* LICENZA OK scende nel piede del cassetto; un AVVISO resta in testa, su una riga
     sua se non c'e' posto: un avviso nascosto in un cassetto non avvisa. */
  .top .badge.ok{display:none}
  .top .badge.attenzione{order:9;margin:2px auto 0}
  .apri-menu{
    display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;
    border:1px solid var(--line-2);border-radius:3px;background:none;color:var(--fg);
    font:400 20px/1 var(--f-body);cursor:pointer;
  }
  .apri-assistente{
    display:inline-flex;align-items:center;flex:none;min-height:44px;padding:0 10px;
    border:1px solid var(--state);border-radius:3px;background:none;color:var(--state);
    font:600 11px var(--f-display);letter-spacing:.12em;cursor:pointer;
  }
  .top .esci{min-height:44px;padding:0 10px}

  /* --- il menu: un cassetto da sinistra ---
     ⚠️ `visibility` oltre a `transform`: un cassetto solo spostato fuori schermo resta
     raggiungibile col tabulatore, e il fuoco finirebbe su voci che non si vedono. */
  .nav{
    position:fixed;top:0;bottom:0;left:0;z-index:90;width:min(300px,86vw);
    flex-direction:column;align-items:stretch;gap:2px;
    padding:14px 10px calc(14px + env(safe-area-inset-bottom,0px));
    border-right:1px solid var(--line);border-bottom:0;overflow-x:hidden;overflow-y:auto;
    transform:translateX(-101%);visibility:hidden;
    transition:transform .2s ease,visibility 0s linear .2s;
  }
  :root.menu-aperto .nav{transform:none;visibility:visible;transition:transform .2s ease}
  .nav .etichetta{display:block}
  .nav .voce{width:100%;white-space:normal;min-height:48px}
  .nav .voce[aria-current="true"]{box-shadow:inset 2px 0 0 var(--blu)}
  .nav .sotto{display:flex}
  .nav .sotto button{min-height:44px}
  .nav-piede{
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
    margin-top:auto;padding:14px 10px 4px;border-top:1px solid var(--line);
    font:11px var(--f-mono);letter-spacing:.08em;color:var(--muted);
  }
  .nav-piede b{color:var(--fg);font-weight:500}
  :root.menu-aperto .velo-menu{
    display:block;position:fixed;inset:0;z-index:89;
    background:var(--bg);
    background:color-mix(in srgb,var(--bg) 70%,transparent);
  }
  /* la pagina sotto non scorre mentre sopra c'e' il cassetto o l'assistente */
  :root.menu-aperto body,:root.assistente-aperto body{overflow:hidden}

  /* --- l'assistente: una schermata sopra, non una colonna sotto --- */
  .chat{display:none}
  :root.assistente-aperto .chat{
    display:flex;position:fixed;inset:0;z-index:95;
    height:100%;height:100dvh;border:0;
  }
  .chat-testa{padding:8px 8px 8px 14px}
  .chat-testa .chat-titolo{flex:1 1 auto;min-width:0}
  .chat-testa .motore{order:3;margin-left:0}
  .chat-chiudi-telefono{
    display:inline-grid;place-items:center;flex:none;order:2;width:44px;height:44px;padding:0;
    border:1px solid var(--line-2);border-radius:3px;background:none;color:var(--muted);
    font:400 22px/1 var(--f-body);cursor:pointer;
  }
  .chat-testa .chat-guida-apri{order:1;min-height:44px;padding:0 10px}
  .chat-guida-chiudi{min-height:44px;padding:0 10px}
  .diario{max-height:none}
  /* «NUOVA CONVERSAZIONE» su una riga sua: accanto a INVIA lasciava alla casella 90px */
  .composizione{flex-wrap:wrap}
  .composizione button.chat-nuova{order:3;flex:1 1 100%;min-height:44px}
  .proposta{min-height:44px}

  /* --- le linguette delle schede: una striscia che scorre, non tre righe di bottoni ---
     ⚠️ Fuori dalla vista campo: la' le schede sono bersagli da 78px che vanno a capo
     apposta (`campo.css`), e una striscia li stringerebbe. */
  body:not(.campo) .schede{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  body:not(.campo) .schede button{flex:none}
  .schede button{min-height:44px}

  /* --- i bersagli del dito: 44px --- */
  button.agisci{min-height:44px}
  button.come-link{min-height:44px;display:inline-flex;align-items:center}
  .interruttore{min-height:44px}
  .popup-chiudi{width:44px;height:44px}
  /* Sul telefono la barra e' alta tre righe: fissa si mangerebbe il foglio a tastiera aperta. */
  .editor-barra{position:static}
  .editor-bottone{min-width:44px;height:44px}
  .scarica-modello button.agisci{min-width:44px}
  .editor-scelta{height:44px;font-size:16px;flex:1 1 130px}
  .editor-testo{font-size:16px;padding:11px}
  /* L'icona «i» resta piccola a vedersi e diventa grande da toccare: l'area intorno e'
     un `::after` trasparente, e il disegno della riga non cambia. */
  .informazioni-icona{position:relative}
  .informazioni-icona::after{content:"";position:absolute;inset:-13px}

  /* --- i campi: una colonna, 44px, e 16px di carattere ---
     ⚠️ Prima la regola per elemento, che vale per i campi che non hanno classe; poi
     quelle con la classe, che battono le loro regole di sopra. `body.campo` ne ha di
     piu' forti ancora, e restano sue. */
  input,select,textarea{font-size:16px}
  form.campi input,form.campi select,form.campi textarea,
  .popup-campi input,.popup-campi select,.popup-campi textarea{min-height:44px;font-size:16px}
  .accesso-modulo input,.composizione textarea{font-size:16px}
  form.campi,.popup-campi{grid-template-columns:minmax(0,1fr)}
}

/* ======================= LE TABELLE SUL TELEFONO (2026-11-07) =======================
   🔴 UNA TABELLA NON ALLARGA MAI LA PAGINA. Le strade sono due, e la scelta e' scritta in
   `20-architettura/16-il-gestionale-sul-telefono.md`:

   1. ⭐ RIGHE A SCHEDA, per le tabelle di `dom.tabella()` con quattro colonne o piu'
      (`.a-schede`): sotto i 560px ogni riga e' un riquadro, e ogni cella porta davanti il
      titolo della sua colonna (`data-etichetta`, scritto da `dom.js`). Con cinque colonne
      in 336px una tabella si legge solo scorrendo di lato, e scorrendo si perde la prima
      colonna, cioe' di CHI e' la riga.
   2. Lo SCORRIMENTO DENTRO `.tabella-involucro` per tutte le altre: due o tre colonne, o
      tabelle costruite a mano in una sezione. Scorre il riquadro, non la pagina.

   ⚠️ L'etichetta sta su UNA riga e si tronca coi puntini: un'etichetta su due righe
   posizionata accanto al valore finirebbe sopra la cella dopo. Il titolo intero resta
   nell'intestazione, che c'e' ancora per chi legge con un lettore di schermo.
   ⚠️ L'involucro continua a scorrere anche a schede: e' la rete per una cella con
   dentro qualcosa che non va a capo (una pillola, un codice lungo).
   ========================================================================== */
@media (max-width:560px){
  .tabella-involucro.a-schede{border:0;background:none}
  .a-schede table.tabella,.a-schede table.tabella tbody,
  .a-schede table.tabella tr,.a-schede table.tabella td{display:block;width:100%}
  /* l'intestazione esce dalla vista ma non dal documento */
  .a-schede table.tabella thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .a-schede table.tabella tr{
    border:1px solid var(--line);background:var(--panel);
    padding:6px 0;margin-bottom:8px;
  }
  .a-schede table.tabella tr:last-child{margin-bottom:0}
  .a-schede table.tabella td,
  .a-schede table.tabella tr:last-child td{
    position:relative;border:0;padding:5px 12px 5px calc(38% + 10px);
    min-height:30px;text-align:left;overflow-wrap:anywhere;
  }
  .a-schede table.tabella td::before{
    content:attr(data-etichetta);position:absolute;left:12px;top:7px;width:calc(38% - 14px);
    font:500 10px/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .a-schede table.tabella td:not([data-etichetta]){padding-left:12px}
  .a-schede table.tabella td:not([data-etichetta])::before{content:none}
  .a-schede table.tabella td.num{text-align:left}
  /* un recapito nella scheda (il telefono di un dipendente) e' un bersaglio, non una parola */
  .a-schede table.tabella td a[href]{display:inline-flex;align-items:center;min-height:44px}
  /* la riga che apre il popup e' tutto il riquadro: si tocca dove si vuole */
  .a-schede table.tabella tr.cliccabile:hover{background:var(--panel-2)}
}


/* ================= IL MARGINE E LA CATENA DI UN NUMERO (2026-10-07) =================
   Decisione della cliente, 2026-10-07: *«per il margine si costruisce il ciclo passivo, e
   come dato devi lasciarlo nella dashboard; come quella per Hammer, copia quella»*.
   Il comportamento sta in `app/sezioni/margine.js`, la regola scritta in
   `20-architettura/14-il-numero-porta-la-formula.md`.

   🔴 I DUE BLOCCHI CHE PORTANO IL SENSO, e non sono decorazione:

   1. `.misura-assente` — il posto del numero grande quando IL NUMERO NON SI PUO'
      MISURARE. Oggi `core_documenti_acquisto` ha zero righe, quindi il margine di BSS e'
      identico ai ricavi e la percentuale vale 100,00% sempre. Un cento per cento disegnato
      come un numero e' una buona notizia falsa, quindi al suo posto va una PIASTRA
      TRATTEGGIATA A RIGHE con la parola. ⚠️ Il tratteggio e' un'OMBREGGIATURA (righe a 45
      gradi) e non un BORDO tratteggiato: `.riquadro.in-attesa-di-si` usa gia' il bordo
      tratteggiato ambra per «il sistema non lo fa senza un si' umano», e lo stesso segno
      con due significati e' un segno in meno.
   2. `.catena-*` — la formula di un numero. Tutto in cifre tabulari e in carattere a
      spaziatura fissa: una formula e le sue colonne di importi si leggono incolonnate, ed
      e' la convenzione da cui non si deroga in nessun elenco di questo progetto.

   ⚠️ SOLO TOKEN DEL TEMA, come tutto il resto del file: `--warn`, `--line`, `--muted`,
   `--panel-2`. Il tratteggio e' `--warn` reso trasparente con `color-mix`, e prima c'e'
   sempre la riga col colore pieno per un browser che non ce l'ha.

   ⚠️ A 360px non si scorre in orizzontale, e nemmeno nell'area centrale vera del
   gestionale (620px a 1280, cioe' 1280 meno il menu da 224 e la chat da 400): la griglia
   dei termini passa a due colonne e la formula va a capo fra i termini, mai dentro un
   importo.
   ========================================================================== */

/* --- un riquadro il cui numero non e' misurabile --- */
.riquadro.non-misurato{border-color:var(--warn)}
.riquadro.non-misurato h3 b{color:var(--warn)}

/* --- la piastra: al posto del numero, la parola e il perche' --- */
.misura-assente{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  margin:0 0 10px;padding:11px 13px;border:1px solid var(--warn);
  background:var(--panel-2);
  background:repeating-linear-gradient(
    135deg,
    color-mix(in srgb,var(--warn) 13%,transparent) 0 7px,
    transparent 7px 14px);
}
.misura-assente b{
  font:600 19px var(--f-display);letter-spacing:.1em;color:var(--warn);
}
.misura-assente span{font:11.5px/1.55 var(--f-body);color:var(--fg)}

/* --- la catena: la formula, i termini, il risultato --- */
.catena-etichetta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:12px 0 5px;font:500 10px var(--f-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.catena-etichetta:first-of-type{margin-top:0}
.catena-etichetta .spazio{flex:1 1 0}
.catena-formula{
  margin:0;padding:9px 11px;border:1px solid var(--line);background:var(--panel-2);
  font:13px/1.7 var(--f-mono);font-variant-numeric:tabular-nums;
  overflow-wrap:break-word;
}
.catena-formula.coi-numeri{color:var(--fg)}
.catena-segno{color:var(--warn);padding:0 3px}

/* ⚠️ Quattro colonne e non le tre di `.righe`: un termine porta il SEGNO davanti al nome,
   e il segno davanti e' la meta' della leggibilita' di una formula. */
.catena-termini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.catena-termini li{
  display:grid;grid-template-columns:1.4em minmax(0,1fr) minmax(90px,auto) auto;
  gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);
  font-size:13.5px;
}
.catena-termini li:first-child{border-top:0}
.catena-termini .s{
  font:600 14px var(--f-mono);color:var(--warn);text-align:center;
}
.catena-termini .x{min-width:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:6px}
.catena-termini .q{
  display:flex;flex-direction:column;gap:4px;
  font:11.5px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;
}
.catena-termini .v{font:12.5px var(--f-mono);color:var(--fg);font-variant-numeric:tabular-nums}

/* --- la barra di una quota: una PROPORZIONE, non un giudizio ---
   ⚠️ Nessuna soglia e nessun colore di merito: «da quale percentuale un margine e' buono
   per BSS» non e' scritto da nessuna parte, e non e' un valore da copiare da un altro
   cliente. Finche' non c'e', qui si disegna solo quanto pesa una voce.
   ⭐ La pista RITAGLIA il riempimento: una quota sopra il cento non si riscrive come un
   pieno esatto, e il numero accanto resta quello vero. */
.quota-pista{display:block;height:4px;background:var(--line-2);overflow:hidden}
.quota-pista i{display:block;height:100%;width:var(--quota);background:var(--muted)}

/* --- il risultato della catena: una fascia, non una riga come le altre --- */
.catena-risultato{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,auto) auto;
  gap:10px;align-items:center;margin-top:10px;
  padding:10px 11px;border:1px solid var(--line-2);background:var(--panel-2);
}
.catena-risultato .x{
  min-width:0;display:flex;align-items:center;gap:6px;
  font:600 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;
}
.catena-risultato .q{font:11.5px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.catena-risultato .v{
  font:600 17px var(--f-display);color:var(--fg);font-variant-numeric:tabular-nums;
}

/* 🔴 LA SOGLIA E' 430px E NON 620px, e la differenza non e' di gusto: una regola
   `@media` misura la FINESTRA, e nel gestionale l'area centrale non e' larga quanto la
   finestra — a 1280 restano 620px fra il menu (224) e la chat (400). Tarata a 620px
   questa regola **non scatterebbe mai dove serve** e scatterebbe su un'area centrale che
   e' larga il doppio. Le quattro colonne reggono fino a un'area da ~430px; sotto, e' il
   telefono, dove la finestra e l'area coincidono. */
@media (max-width:430px){
  /* Il segno e il nome in alto, quota e valore sotto: a questa larghezza quattro
     colonne costringono il nome di una voce a una colonna da sei caratteri. */
  .catena-termini li{grid-template-columns:1.4em minmax(0,1fr);row-gap:6px}
  .catena-termini .q{grid-column:2}
  .catena-termini .v{grid-column:2;justify-self:start}
  .catena-risultato{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .catena-formula{font-size:12px}
}