/* 0.6.2 (28/09/2026 · B4, CHI ASPETTA LO SPOGLIO IA): la lista d'attesa nella scheda «Motore IA» (.att-lista,
   .att-riga: nome, produzione, da quando, feedback, stato; a 390 px va a capo) e l'esito di «Ripristina clienti». */
/* 0.6.1 (26/09/2026 notte · N3): via `.mot-onesta`, lo stile dell'avviso «il tasto usa ancora il lettore
   di prima» — falso dal 25/09, tolto dalla scheda «Motore IA». */
/* 0.6.0 (26/09/2026 · LA CHIAVE DI ANTHROPIC): il riquadro della chiave nella scheda «Motore IA»
   (.mot-chiave, riusa .mot-giro e .campo) e la fascia arancione della scadenza (.fascia-chiave),
   fuori dalle schede perche' si deve vedere da qualunque parte si guardi. */
/* 0.5.0 (24/09/2026 · IL MOTORE DELLO SPOGLIO IA): la scheda «Motore IA» (.mot-*) e il
   modale del prompt (#motPrompt, .mp-*). Riusa `.campo`, `.modale`, `.det-testa`: qui solo
   la griglia dei due giri e le caselle di testo lunghe. */
/* 0.4.3 (23/09/2026 · ELIMINARE UNA PRODUZIONE): la zona rossa in fondo alla scheda e la
   fascia «In eliminazione» riusano `.ac-sez-rossa`; qui solo il respiro intorno a loro
   (negli scatti la fascia toccava il conteggio sotto, a 1440 e a 390). */
/* 0.4.2 (10/09/2026 pomeriggio) — la RAGIONE sotto lo stato nella tabella: una
   produzione in standby non e' piu' indistinguibile da una attiva. */
/* 0.4.1 (10/09/2026) — le pillole dei TRE MODI passano da 36px a 44, la misura del
   dito. Le ha contate la prova sul DOMINIO VERO: sei comandi sotto misura (tre modi ×
   due ruoli). Nate cosi' stamattina col 3N, vissute mezza giornata. */
/* 0.4.0 (10/09/2026) — IL MODALE DI UN ACCOUNT (.ac-*) e il tasto unico «Modifica»
   (.btn-mod). Spariscono `.riga-tetto` e `.tetto-box`: l'editor infilato dentro la
   tabella non esiste più — le modifiche passano tutte dallo stesso posto. C2. */
/* 0.3.0 (10/09/2026) — il selettore dei TRE MODI di vendita (.pv-modi/.pv-modo), i numeri
   per reparto (.pv-divisi) e il totale calcolato non digitabile (.pv-calcolato). 3N. */
/* 0.2.2 (09/09/2026, notte) — E ANCHE LA SPUNTA DELL'ODG: casella a 24px, riga a
   44. Non e' del lotto di stasera — esiste dal lotto 8 — ma si perdeva nel mucchio
   dei dodici, e adesso che gli altri sono a posto e' rimasta sola.

   0.2.1 (09/09/2026, notte) — I CAMPI DEI POSTI SI PREMONO COL DITO. Trovato da
   `prova_console_dominio` sul sito VERO subito dopo il deploy: 12 input sotto i 44px
   a 390px. Non stavano dentro un `.campo`, quindi la regola che da' l'altezza a tutti
   gli altri non li vedeva.

   0.2.0 (09/09/2026) — IL RIQUADRO DEI POSTI PER REPARTO (3M) e le due facce
   dell'esito dell'invito (D1). Nessun colore scritto a mano: solo token.
   ⚠ E `.np-riga2` passa da `repeat(4,…)` a `auto-fit`: da oggi ci resta dentro
     la sola durata, e quattro colonne cablate le davano un quarto di larghezza
     con tre buchi accanto.

   0.1.0 (03/09/2026) — DA QUI SI CONTA, e il numero non racconta il passato.
   Questo foglio è cambiato 19 volte prima d'oggi senza mai portare un numero: la console
   non aveva il cache-bust, quindi non serviva a nessuno. Da oggi `console_web/*.html` lo
   serve come `console.css?v=0.1.0` e `tools/versioni-lint.js` pretende che i due combacino.
   ⛔ `0.1.0` NON vuol dire «prima versione»: vuol dire «prima versione numerata». Fingere
   una 0.19.0 per far tornare i conti con la storia sarebbe un numero inventato, e un
   numero inventato in un cache-bust è peggio del silenzio — fa credere che qualcuno lo
   sorvegli. Chi tocca questo file da adesso bumpa QUESTA riga e il `?v=` delle due pagine
   nella stessa modifica: se se ne dimentica, il lint diventa rosso.

   FlowSet · console dei fondatori — foglio di stile
   (D5.3, 04/08/2026 · allineato al design system il 05/08/2026)

   ⚠ QUI NON NASCONO TOKEN. I valori arrivano da `/tokens.css`, che una macchina
   estrae da `web/style.css` — la fonte unica di FlowSet — e che `console.py` serve
   accanto a questo foglio. Fino al 05/08 i token erano RICOPIATI a mano in cima a
   questo file: una copia è una seconda verità, e infatti aveva già divergato (font
   di sistema al posto di Plus Jakarta, misure fisse al posto delle scale elastiche,
   il tema di base al posto di quello in servizio). Se serve un valore nuovo si
   aggiunge a `web/style.css` e si rigenera con `tools/v1/genera_tokens.py`;
   `tools/v1/z78_tokens.py` diventa rossa se i due si allontanano.

   La separazione dei due programmi resta intatta: qui viaggiano VALORI, non codice.
   La console ha la sua origine, il suo processo e il suo segreto di sessione. */

*{box-sizing:border-box}
/* invariante anti-sbordo, sulla radice e non su un elenco di selettori: un elenco
   protegge solo i componenti che c'erano quando è stato scritto (lezione O) */
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--ff-sans);
     font-size:var(--fs-md);line-height:1.45;overflow-wrap:anywhere}


/* ⛔⛔ 10/09/2026 · `hidden` È UNA PROMESSA, E QUI NON VALEVA — TROVATO GUARDANDO
   UNO SCATTO, con venti misure verdi. Nel modale di un account il modo «Misti»
   mostrava lo stesso i numeri per reparto E le forbici almeno/al massimo: tre
   modi di vendita aperti insieme sopra la stessa riga. E non era un difetto del
   modale — era di TUTTO il foglio, modulo di vendita compreso.
   LA CAUSA: `hidden` è `display:none` scritto dal browser con specificità ZERO;
   qualunque `.classe{display:flex}` lo scavalca. Il foglio se n'era accorto
   QUINDICI volte e aveva rimediato quindici volte, una classe alla volta
   (`.modale[hidden]`, `.dosso-corpo[hidden]`, `.fascia-prod[hidden]`…): un
   ELENCO, che protegge solo chi c'era quando è stato scritto — e le classi nate
   stamattina (`.pv-divisi`, `.pv-reparti`) non c'erano.
   ⭐ Una regola sola, sulla radice, e vale anche per quelle che verranno. Le
   quindici righe per-classe sono state tolte: tenerle sarebbe stato dire due
   volte la stessa cosa, e la seconda copia è quella che un giorno resta indietro. */
[hidden]{display:none !important}

.testa{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
       background:var(--surface);border-bottom:1px solid var(--border);
       position:sticky;top:0;z-index:10}
/* i titoli prendono il carattere da titolo del tema (serif in «istituzionale»): è
   quello che si vede nel gestionale, e due caratteri diversi fanno due prodotti */
.testa h1{font-family:var(--ff-display);font-size:var(--fs-lg);margin:0;font-weight:600;
          letter-spacing:-.01em}
.testa .marchio{width:26px;height:26px;border-radius:var(--r-sm);background:var(--accent);
                display:grid;place-items:center;color:#fff;font-weight:700;
                font-size:var(--fs-sm)}
.testa .spazio{flex:1}
.testa .chi{color:var(--t2);font-size:var(--fs-base)}

/* ⚠ `white-space:nowrap` NON è estetica: l'invariante anti-sbordo del body
   (`overflow-wrap:anywhere`) è ereditata e prende anche i bottoni, che a 390px
   spezzavano l'etichetta a metà parola — «Esci» diventava «Es/ci». È la lezione
   O.3: il testo dell'UTENTE cede ovunque perché è imprevedibile, l'ETICHETTA di
   un comando è testo nostro, corto e noto, e non si spezza mai. Il gestionale ce
   l'aveva già (`web/style.css:770`); questo foglio è nato a parte e se l'era
   persa per strada. Visto guardando lo scatto a 390px del dominio vero. */
.btn{font:inherit;font-size:var(--fs-base);padding:var(--sp-1) var(--sp-3);
     border-radius:var(--r-pill);
     border:1px solid var(--border2);background:var(--surface);color:var(--t1);
     cursor:pointer;min-height:44px;white-space:nowrap;overflow-wrap:normal}
.btn:hover{border-color:var(--accent-bord);background:var(--accent-mute)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-forte{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn-forte:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
/* ⚠ Un comando SPENTO deve sembrarlo. «Converti» nasce disabilitato finché non si
   seleziona qualcuno, ma senza questa regola restava pieno e blu accanto alla
   scritta «nessuno selezionato»: premibile a vedersi, inerte a premerlo. È il
   divieto 8 del canone — una promessa dell'interfaccia che il prodotto non
   mantiene — e nessuna misura l'aveva presa: si è visto GUARDANDO lo scatto del
   dominio a 390px, il 04/08. */
.btn:disabled,.btn-forte:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover,.btn-forte:disabled:hover{background:var(--accent);
                                              border-color:var(--accent)}
.btn:not(.btn-forte):disabled:hover{background:var(--surface);border-color:var(--border2)}

/* ⚠ 1240 e non 1100 dal LOTTO 9: 1100 era la misura giusta quando questa pagina
   era UNA tabella; da oggi la vista dei preventivi è un banco a DUE colonne, e
   con 1100 la colonna del documento restava a 688 px — abbastanza stretta da
   troncare i nomi delle voci. Misurato guardando, non deciso a tavolino. */
.foglio{max-width:1240px;margin:0 auto;padding:var(--sp-4)}

/* i tre numeri: il riassunto della lista, non una vista a sé */
.semaforo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
          gap:var(--sp-2);margin-bottom:var(--sp-4)}
.tessera{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
         padding:var(--sp-3) var(--sp-4);box-shadow:var(--sh-1);min-width:0}
/* il numero è un titolo, non un testo: stesso carattere dei numeri grandi del
   gestionale (la tessera nera dell'ODG), e cresce con lo schermo invece di
   rimpicciolirsi a gradini in una media query.
   ⚠ Il fattore 1.35 non è un capriccio: portato al solo `--fs-xl` il numero
   finiva a un soffio dalla sua etichetta e la tessera perdeva la gerarchia —
   visto GUARDANDO lo scatto, con il collaudo già tutto verde. Moltiplicare il
   token invece di scrivere «34px» conserva l'elasticità: cresce e cala con lo
   schermo insieme a tutto il resto. */
.tessera .n{font-family:var(--ff-display);font-size:calc(var(--fs-xl) * 1.35);
            font-weight:700;letter-spacing:-.02em;line-height:1.1}
.tessera .k{color:var(--t2);font-size:var(--fs-sm);text-transform:uppercase;
            letter-spacing:.04em}
.tessera.allarme .n{color:var(--c-warn)}

.barra{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;
       margin-bottom:var(--sp-2)}
.cerca{position:relative;flex:1;min-width:min(220px,100%)}
/* ⚠ 16px REALI e non un token elastico: sotto i 16px iOS ingrandisce la pagina da
   solo quando il campo prende il fuoco, e l'utente si ritrova la console zoomata.
   È la stessa eccezione dichiarata nella scala tipografica del gestionale. */
.cerca input{width:100%;font:inherit;font-size:16px;padding:9px 34px 9px 12px;
             border-radius:var(--r-pill);
             border:1px solid var(--border2);background:var(--surface);min-height:44px}
.cerca input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cerca button{position:absolute;right:6px;top:50%;transform:translateY(-50%);
              border:0;background:transparent;cursor:pointer;color:var(--t3);
              font-size:var(--fs-md);width:28px;height:28px;border-radius:50%}
.cerca button:hover{background:var(--s3);color:var(--t1)}
.pillole{display:flex;gap:var(--sp-1);flex-wrap:wrap}
/* ⚠ 44px e non 38: è la misura del polpastrello (UI_SYSTEM §responsive), la
   stessa già imposta a `.btn`. Le pillole erano nate a 38 e nessuno le aveva mai
   misurate — la prova del dominio guardava solo i campi del modulo. Alzarle qui
   le alza TUTTE (filtri di stato, categorie dello swap, livello di arrivo): è il
   rastrello, non il rattoppo sulla pillola nuova. */
.pillola{font:inherit;font-size:var(--fs-base);padding:7px var(--sp-3);
         border-radius:var(--r-pill);
         border:1px solid var(--border2);background:var(--surface);color:var(--t2);
         cursor:pointer;min-height:44px;white-space:nowrap;overflow-wrap:normal}
.pillola:disabled{opacity:.45;cursor:not-allowed}
.pillola:hover{border-color:var(--accent-bord)}
.pillola.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pillola:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.conteggio{color:var(--t2);font-size:var(--fs-base);margin:0 0 var(--sp-1)}

.tabella-guscio{background:var(--surface);border:1px solid var(--border);
                border-radius:var(--r);box-shadow:var(--sh-1);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
th,td{text-align:left;padding:var(--sp-2) var(--sp-3);
      border-bottom:1px solid var(--border-soft);
      overflow-wrap:normal}          /* nelle tabelle l'invariante si sospende (lezione O.2) */
thead th{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;
         color:var(--t2);
         font-weight:600;white-space:nowrap;background:var(--s2);position:sticky;top:0}
th[data-fond-sort]{cursor:pointer;user-select:none}
th[data-fond-sort]:hover{color:var(--t1)}
th[data-fond-sort]::after{content:'';margin-left:6px;opacity:.4}
th[aria-sort="ascending"]::after{content:'▲';opacity:1;color:var(--accent)}
th[aria-sort="descending"]::after{content:'▼';opacity:1;color:var(--accent)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--s2)}
td .codice{font-family:var(--ff-mono);font-size:var(--fs-sm);color:var(--t3)}
/* ⭐ 0.4.2 · LA RAGIONE SOTTO LO STATO (console.js `PERCHE_PROD`). Stessi due token
   della riga del codice qui sopra — misura e grigio — perche' e' la stessa specie di
   testo: un di piu' che si legge se serve e non compete con la pastiglia.
   ⚠ `max-width` in ch e non in px: la colonna non deve allargarsi per una frase, o
     a 390px mangerebbe lo spazio del nome della produzione. */
/* ⭐ 0.4.2 · la riga dell'ANNULLA nel riquadro d'esito del dosso. `align-items:center`
   perche' il tasto e il testo stanno sulla stessa linea di base ottica; il `gap`
   sostituisce lo spazio scritto a mano, che sparisce quando il testo va a capo. */
.annulla-riga{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.annulla-riga .btn-mini{min-height:34px}
td .stato-perche{margin-top:3px;font-size:var(--fs-sm);color:var(--t3);line-height:1.35;max-width:34ch}
.vuoto{padding:34px var(--sp-4);text-align:center;color:var(--t2)}

.chip{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
      font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.chip-ok{background:var(--c-ok-bg);color:var(--c-ok)}
.chip-warn{background:var(--c-warn-bg);color:var(--c-warn)}
.chip-crit{background:var(--c-crit-bg);color:var(--c-crit)}
.chip-info{background:var(--c-info-bg);color:var(--c-info)}
.chip-neutro{background:var(--s3);color:var(--t2)}

/* il dettaglio è un PANNELLO in colonna, non un modale: si guarda col telefono
   in mano, e a 390px un modale nasconde la tabella da cui sei partito */
#fondDettaglio{margin-top:var(--sp-4);background:var(--surface);
               border:1px solid var(--border);
               border-radius:var(--r);box-shadow:var(--sh-2);overflow:hidden}
.det-testa{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
           background:var(--s2);border-bottom:1px solid var(--border)}
.det-testa h2{font-family:var(--ff-display);font-size:var(--fs-md);margin:0;font-weight:600}
.det-testa .spazio{flex:1}
.det-corpo{padding:4px 0}
/* ⚠ classe e non style="" nell'HTML: la CSP severa (style-src 'self') BLOCCA gli
   stili in linea, e infatti li ha bloccati al primo collaudo nel browser. È il
   modo giusto di scoprirlo — la regola che si fa sentire mentre scrivi, non il
   giorno del deploy. */
.det-tabella{border:0;box-shadow:none;border-radius:0}
.nota{color:var(--t2);font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-4);
      background:var(--s3);
      border-top:1px solid var(--border-soft)}

.avviso{background:var(--c-crit-bg);color:var(--c-crit);border-radius:var(--r-sm);
        padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2);font-size:var(--fs-base)}

/* ── ACCESSO ── */
.accesso{min-height:100dvh;display:grid;place-items:center;padding:var(--sp-5)}
.scheda{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
        box-shadow:var(--sh-2);padding:var(--sp-6);width:min(380px,100%)}
/* 05/08/2026: via il sottotitolo dell'accesso (e con lui la regola `.scheda p.sotto`, che
   restava senza un solo elemento a cui applicarsi). I 18px di stacco che dava lui passano
   al titolo: togliere un elemento senza ereditarne lo spazio lascia il campo incollato
   all'h1 — il difetto si vede, non si deduce. */
.scheda h1{font-family:var(--ff-display);font-size:var(--fs-xl);font-weight:600;
           margin:0 0 var(--sp-4)}
.campo{margin-bottom:var(--sp-2)}
.campo label{display:block;font-size:var(--fs-base);color:var(--t2);margin-bottom:5px}
.campo input{width:100%;font:inherit;font-size:16px;padding:var(--sp-2) var(--sp-2);
             border-radius:var(--r-sm);
             border:1px solid var(--border2);min-height:44px}
.campo input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.scheda .btn-forte{width:100%;margin-top:6px}

@media (max-width:640px){
  thead th{position:static}
  /* ⚠ Le tre tessere in COLONNA occupavano quasi metà schermo prima di arrivare a
     quello che si è venuti a fare. Sono tre numeri: stanno in riga. Visto
     guardando lo screenshot a 390 px, non misurando. */
  .semaforo{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
  .tessera{padding:var(--sp-2)}
  .tessera .n{font-size:var(--fs-xl)}
  .tessera .k{font-size:10px;letter-spacing:0}
}

/* ── D5.4 · IL MODULO CHE VENDE UNA PRODUZIONE ─────────────────────────────
   ⚠ Non è un popup su <body>: vive dentro #console, cioè dentro la radice della
   vista, così il gate dei comandi lo raggiunge senza dichiarare un portale. Il
   velo è `position:fixed` ma l'elemento resta figlio della vista: le due cose
   sono indipendenti, e va ricordato a chi un giorno lo sposterà «per pulizia». */
.modale{position:fixed;inset:0;z-index:50;display:grid;place-items:start center;
        background:rgba(15,18,32,.44);padding:var(--sp-5) var(--sp-3);overflow-y:auto}
.modale-carta{background:var(--surface);border:1px solid var(--border);
              border-radius:var(--r);box-shadow:var(--sh-2);width:min(720px,100%);
              padding:var(--sp-4)}
.np-corpo{display:grid;gap:var(--sp-3);margin-top:6px}
.campo{display:grid;gap:5px;font-size:var(--fs-base);color:var(--t2);min-width:0}
.campo>span{font-weight:600}
.campo em{font-style:normal;font-weight:400;color:var(--t3)}
.campo input{font:inherit;font-size:16px;padding:9px 11px;border-radius:var(--r-sm);
             border:1px solid var(--border2);background:var(--surface);color:var(--t1);
             min-height:44px;width:100%}   /* 44px: la misura del dito, UI_SYSTEM §responsive */
.campo input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;
                           border-color:var(--accent)}
.campo small{color:var(--t3);font-size:var(--fs-sm);line-height:1.35}
.np-master{border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-2);margin:0}
.np-master legend{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;
                  color:var(--t2);font-weight:600;padding:0 6px}
.np-master-riga{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:var(--sp-2);
                align-items:end;margin-bottom:var(--sp-2)}
.np-togli{min-height:44px;padding:8px 12px}
/* ⚠ `auto-fit` e non `repeat(4,…)`: da quando i posti hanno un riquadro tutto
   loro (3M/09-09) qui dentro resta la sola durata, e una griglia cablata a quattro
   colonne le avrebbe dato un quarto di larghezza con tre buchi accanto. */
.np-riga2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
          gap:var(--sp-2)}

/* ══ 3M/09-09-2026 · I POSTI CHE SI VENDONO, E IN QUALE REPARTO ══════════════
   Emanuele vende «10 account trucco, 3 costumi, 1 capo crew TRUCCO, 1 capo crew
   COSTUMI»: ruolo x reparto, non ruolo soltanto. Il riquadro ricalca la forma
   del gruppo dei master (`.np-master`) perche' e' lo stesso gesto — si dichiara
   cosa si compra — e due riquadri gemelli con due vestiti diversi nello stesso
   modulo si leggono come due cose che non c'entrano.
   ⚠ Nessun colore scritto a mano: solo token. */
.np-posti{border:1px solid var(--border);border-radius:var(--r);
          padding:var(--sp-2);margin:0}
.np-posti legend{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;
                 color:var(--t2);padding:0 var(--sp-1)}
.pv-lista{display:grid;gap:var(--sp-2)}
.pv-riga{border:1px solid var(--border-soft);border-radius:var(--r-sm);
         padding:var(--sp-2);background:var(--surface)}
.pv-testa{display:flex;align-items:flex-end;gap:var(--sp-2);flex-wrap:wrap}
.pv-n{display:grid;gap:2px;flex:0 0 auto}
.pv-n>span{font-size:var(--fs-sm);color:var(--t2);text-transform:capitalize}
/* ⚠ Larghezza fissa e cifre tabellari: tre numeri incolonnati si confrontano a
   colpo d'occhio, e il conto che si sta vendendo si legge senza rileggere. */
/* ⛔ 44px E 16px, e li si scrive QUI perche' questi input non stanno dentro un
   `.campo`: la regola che li da' a tutti gli altri (`.campo input`, piu' sotto) non
   li vede. Il 44px e' la misura del dito (UI_SYSTEM §responsive) e l'ha trovato
   `prova_console_dominio` sul sito vero — 12 sotto misura a 390px. Il 16px non e'
   estetica: sotto quella soglia iOS ingrandisce la pagina da solo appena si tocca
   il campo, e chi sta compilando si ritrova lo schermo spostato. */
.pv-n>input,.pv-rep-c>input{min-height:44px;font-size:16px}
.pv-n>input{width:6.5rem;font-variant-numeric:tabular-nums;text-align:center}
.pv-reparti{display:grid;gap:var(--sp-1);margin-top:var(--sp-2);
            padding-top:var(--sp-2);border-top:1px dashed var(--border-soft)}
.pv-rep{display:flex;align-items:flex-end;gap:var(--sp-2);flex-wrap:wrap}
.pv-rep-nome{min-width:5.5rem;font-size:var(--fs-sm);color:var(--t1);
             font-weight:600;padding-bottom:6px}
.pv-rep-c{display:grid;gap:2px}
.pv-rep-c>span{font-size:var(--fs-xs);color:var(--t2)}
.pv-rep-c>input{width:5.5rem;font-variant-numeric:tabular-nums;text-align:center}
/* ⭐ LA RIGA VIVA. Dice a parole cosa si sta vendendo mentre si digita: e' il
   pezzo che rende leggibile «min 10 / max 8», che come modulo compilato sembra
   giusto e come vendita non esiste. */
.pv-conto{margin:var(--sp-1) 0 0;font-size:var(--fs-sm);color:var(--t2)}
.pv-conto.pv-guaio{color:var(--c-crit);font-weight:600}
@media (max-width:560px){
  /* ⚠ A schermo stretto le due forbici vanno UNA PER RIGA: appaiate si
     stringono sotto i quattro caratteri e «al massimo» va a capo dentro il
     campo. Visto guardando, non leggendo il codice. */
  .pv-rep{gap:var(--sp-1)}
  .pv-rep-nome{flex:1 0 100%;padding-bottom:0}
  .pv-rep-c{flex:1 1 auto}
  .pv-rep-c>input{width:100%}
}

/* D1/09-09 · le due facce dell'esito: chi ha ricevuto il link, e chi ha in mano
   qualcosa da consegnare a voce. La seconda deve saltare all'occhio — chi chiude
   la finestra senza copiarla ha creato un account irraggiungibile. */
/* 3M/09-09 · il vincolo di reparto sotto i posti di un master. Piccolo e grigio:
   e' una postilla del contratto, non un numero da confrontare a colpo d'occhio. */
.posti-vincolo{font-size:var(--fs-xs);color:var(--t2);margin-top:2px}

.np-inv-ok{border-left:3px solid var(--c-ok);padding-left:var(--sp-2)}
.np-inv-ko{border-left:3px solid var(--c-warn);padding-left:var(--sp-2)}
.np-inv-nota{color:var(--t2);font-size:var(--fs-sm)}

.np-piede{display:flex;gap:var(--sp-2);justify-content:flex-end}
.np-errore{margin:0;color:var(--c-crit);background:var(--c-crit-bg);
           border:1px solid var(--c-crit);border-radius:var(--r-sm);
           padding:var(--sp-2) var(--sp-2);
           font-size:var(--fs-base)}
.np-esito h3{font-family:var(--ff-display);margin:4px 0 8px;font-size:var(--fs-lg);
             font-weight:600}
.np-esito p{margin:6px 0;font-size:var(--fs-base);color:var(--t2)}
.np-avviso{color:var(--c-crit);font-weight:600}
.np-nota{color:var(--t3);font-size:var(--fs-base)}
.np-chiavi{list-style:none;padding:0;margin:var(--sp-2) 0;display:grid;gap:var(--sp-1)}
.np-chiavi li{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center;
              background:var(--s2);border:1px solid var(--border);
              border-radius:var(--r-sm);
              padding:var(--sp-2) var(--sp-2)}
.np-pw{font-family:var(--ff-mono);font-size:var(--fs-md);background:var(--surface);
       border:1px solid var(--border2);border-radius:8px;padding:4px 9px;
       /* la password si seleziona con un doppio clic: si deve poter copiare */
       user-select:all;overflow-wrap:anywhere}

/* Sotto i 760px le tre colonne del master diventano una fila sola: a 390px tre
   campi affiancati sarebbero tre campi inutilizzabili. */
@media (max-width:760px){
  .np-master-riga{grid-template-columns:1fr;gap:var(--sp-1)}
  .np-togli{justify-self:end}
  .np-riga2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:430px){
  .np-riga2{grid-template-columns:1fr}
  .modale{padding:10px 8px}
  .modale-carta{padding:var(--sp-3)}
}

/* Le righe master si separano a vista: senza, a 390px sono sei caselle di fila
   e non si sa a chi appartengono (visto nello scatto del dominio, 04/08). */
.np-master-testa{display:flex;align-items:center;gap:var(--sp-1);grid-column:1/-1}
.np-master-n{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;
             font-weight:700;color:var(--t3)}
.np-master-testa .np-togli{margin-left:auto;min-height:44px;min-width:44px;padding:6px 12px}
.np-master-riga+.np-master-riga{border-top:1px solid var(--border-soft);
                                padding-top:var(--sp-2)}

/* ── LOTTO 11 (25/08/2026) · COSA È STATO VENDUTO ─────────────────────────── */
/* Il riquadro sta sopra la tabella degli account e sotto lo standby: prima si
   legge cosa il cliente ha comprato, poi chi c'è dentro. L'ordine è quello delle
   domande che si fanno al telefono. */
.det-venduto{padding:var(--sp-2) var(--sp-4);background:var(--s2);
             border-bottom:1px solid var(--border-soft)}
/* ⚠ Come per `.det-barra`: `display` esplicito VINCE sull'attributo `hidden`, che
   funziona solo perché il foglio del browser gli dà `display:none`. Senza questa
   riga il riquadro resterebbe visibile anche su una produzione che non ha niente
   da mostrare — è già successo con la barra dello swap, e si scrive due volte
   invece di scoprirlo due volte. */
.venduto-testa{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center}
.venduto-testa .spazio{flex:1}
.venduto-titolo{margin:0;font-size:var(--fs-base);font-weight:700;color:var(--t1)}
.venduto-scadenza{padding:0;white-space:nowrap;overflow-wrap:normal}
.venduto-lista{list-style:none;margin:var(--sp-2) 0 0;padding:0;
               display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.venduto-riga{display:flex;align-items:center;gap:6px;padding:4px 10px;
              border:1px solid var(--border-soft);border-radius:var(--r-sm);
              background:var(--s1)}
.venduto-che{font-weight:600;color:var(--t1);font-size:var(--fs-base)}
/* Il modulo di C3 si apre SOTTO l'elenco, non in un modale: chi aggiunge posti
   deve vedere quelli che ci sono già mentre scrive quanti ne aggiunge. */
.venduto-modulo{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:end;
                margin-top:var(--sp-2);padding-top:var(--sp-2);
                border-top:1px dashed var(--border-soft)}
.venduto-modulo .np-campo{display:grid;gap:5px;font-size:var(--fs-sm);color:var(--t2)}
/* ⚠ 3N-bis · nel modulo «Aggiungi posti» il guscio delle pillole NON aggiunge
   altezza. MISURATO: col padding il campo «Reparto» veniva 75px contro i 64 degli
   altri quattro, e la sua etichetta saliva di 11px sopra le altre — si vede a
   occhio nudo, ed è così che è stato trovato (guardando lo scatto, con trentasei
   misure verdi). ⚠ Le pillole restano 44px: quella è la misura del dito e non si
   tocca per far quadrare un allineamento. */
.venduto-modulo .pv-modi{padding:0;border:0}
.venduto-modulo .np-campo>span{line-height:1.35}
.venduto-modulo select,.venduto-modulo input{font:inherit;font-size:16px;
                padding:8px 10px;border-radius:var(--r-sm);
                border:1px solid var(--border);background:var(--s1);color:var(--t1)}
.venduto-modulo input[type=number]{width:7em}
.venduto-modulo select:focus-visible,.venduto-modulo input:focus-visible{
                outline:2px solid var(--accent);outline-offset:1px}
/* L'errore prende la riga intera: un messaggio schiacciato fra due caselle si
   legge come l'etichetta della casella accanto. */
.venduto-modulo .np-errore{flex-basis:100%;margin:0}
/* Il riepilogo dentro il modulo di vendita: stesse pastiglie, sfondo del modale. */
.np-venduto{margin-top:var(--sp-2);padding:var(--sp-2);border-radius:var(--r-sm);
            background:var(--s2);border:1px solid var(--border-soft)}
.np-venduto-titolo{display:block;font-size:var(--fs-sm);text-transform:uppercase;
            letter-spacing:.04em;color:var(--t3);font-weight:700}
.np-venduto-lista{list-style:none;margin:6px 0 0;padding:0;
            display:flex;flex-wrap:wrap;gap:var(--sp-1)}

/* ⚠ SOTTO I 700px la riga del modulo va in colonna: quattro caselle affiancate su
   un telefono diventano quattro caselle da due caratteri. Il CSS sotto il
   breakpoint è letteralmente un altro programma, e si guarda a due larghezze. */
@media (max-width:700px){
  .venduto-modulo{flex-direction:column;align-items:stretch}
  .venduto-modulo input[type=number]{width:100%}
  .venduto-scadenza{white-space:normal}
}

/* ── D5.5 · LE QUOTE E LO SWAP ─────────────────────────────────────────────── */
/* La barra dello swap: a sinistra CHI si converte, a destra IN COSA. Due domande
   diverse, due gruppi separati — la stessa ragione per cui la testata del
   gestionale tiene la navigazione fuori dalle azioni (lezione V). */
.det-barra{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center;
           padding:var(--sp-2) var(--sp-4);background:var(--s2);
           border-bottom:1px solid var(--border-soft)}
/* ⚠ `display:flex` VINCE sull'attributo `hidden`, che nasconde solo perché il
   foglio del browser gli dà `display:none` — la regola più specifica lo riaccende.
   Nascondere la barra da JavaScript non bastava: restava lì, visibile, e la prova
   del dominio l'ha vista. È la stessa riga che `.modale[hidden]` ha già in questo
   foglio, e valeva la pena scriverla due volte invece di scoprirlo due volte. */
.det-barra .spazio{flex:1}
.sel-conta{font-size:var(--fs-base);color:var(--t2);white-space:nowrap;overflow-wrap:normal}
.sel-etichetta{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;
               color:var(--t3);font-weight:700;align-self:center;
               white-space:nowrap;overflow-wrap:normal}
.cat-n{display:inline-block;min-width:20px;margin-left:4px;padding:0 6px;
       border-radius:var(--r-pill);background:var(--s3);color:var(--t2);
       font-size:var(--fs-xs);font-weight:700}
.pillola.on .cat-n{background:rgba(255,255,255,.22);color:#fff}
.det-errore,.det-esito{margin:var(--sp-2) var(--sp-4)}

/* La spunta è ridisegnata (`appearance:none`) per una ragione sola: una casella
   di sistema misura 13px e la regola di casa è 44. Il quadrato che si vede resta
   di 22px — è l'AREA premibile a valere 44, non il disegno. */
.col-sel{width:56px;padding-right:0}
[data-fond-sel]{appearance:none;-webkit-appearance:none;margin:0;border:0;
                background:transparent;width:44px;height:44px;display:grid;
                place-items:center;cursor:pointer}
[data-fond-sel]::before{content:"";width:22px;height:22px;border-radius:7px;
                        border:2px solid var(--border2);background:var(--surface)}
[data-fond-sel]:checked::before{background:var(--accent);border-color:var(--accent);
                                box-shadow:inset 0 0 0 3px var(--surface)}
[data-fond-sel]:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;
                              border-radius:var(--r-sm)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}

.col-posti{white-space:nowrap}
.posti-testo{display:inline-block;margin-right:8px}
.btn-mini{font-size:var(--fs-sm);padding:6px 11px}

/* ⛔ 10/09/2026 · QUI STAVA `.riga-tetto`, l'editor dei posti infilato dentro la
   tabella, e il commento diceva che un modale «staccherebbe l'editor dalla persona
   di cui parla». Era vero per QUELL'editor — tre caselle nude — e non lo è più per
   questo: il modale si apre col nome, il nickname e le pastiglie in testa, quindi
   di chi parla lo dice per esteso invece di lasciarlo capire dalla posizione.
   La ragione vera del cambio, però, è un'altra e sta a monte: cinque bottoni per
   riga non si leggono, e l'editor mandava al server un tetto SENZA i reparti —
   cancellando la divisione che il cliente aveva pagato (console.js 0.10.0). */

/* ── C2 · IL TASTO UNICO DELLA RIGA ────────────────────────────────────────
   ⚠ Non è `btn-mini`: quella classe è fatta per stare in cinque in una cella, ed
     è esattamente ciò che non deve più succedere. Parola scritta e 44px, la
     misura del dito (UI_SYSTEM §responsive). */
.btn-mod{font-weight:600}

/* ── C2 · IL MODALE DI UN ACCOUNT ──────────────────────────────────────────
   Vive dentro `.modale`, il velo che questa console ha già: cambia solo ciò che
   sta nella carta. */
.ac-carta{max-width:640px}
.ac-corpo{display:grid;gap:var(--sp-3);padding:var(--sp-3) 0}

.ac-testa{display:grid;gap:4px;padding-bottom:var(--sp-2);
          border-bottom:1px solid var(--border-soft)}
.ac-nome{font-family:var(--ff-display);font-size:var(--fs-lg);font-weight:600;color:var(--t1)}
.ac-sotto{color:var(--t2)}
.ac-chip{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.ac-giorni{color:var(--t2);font-size:var(--fs-sm)}

.ac-sez{display:grid;gap:var(--sp-2);padding:var(--sp-3);border:1px solid var(--border);
        border-radius:var(--r);background:var(--s2)}
.ac-sez-tit{margin:0;font-family:var(--ff-display);font-size:var(--fs-md);font-weight:600}
.ac-sez-nota{margin:0;color:var(--t2);font-size:var(--fs-sm);line-height:1.45}
/* Il rosso è quello del semaforo di casa, come il `.btn-rischio`: un gesto che fa
   male deve somigliare a tutto ciò che in questa pagina già dice «attenzione». */
.ac-sez-rossa{border-color:var(--c-crit);background:var(--c-crit-bg)}
.ac-sez-rossa .ac-sez-tit{color:var(--c-crit)}
/* L8 · la fascia sopra l'elenco e la zona rossa della scheda: stessa carta di pericolo,
   e un margine perche' non si incollino a cio' che sta accanto. */
.in-elim{margin:var(--sp-2) 0 var(--sp-3)}
.det-elimina{margin-top:var(--sp-3)}
.in-elim-riga + .in-elim-riga{margin-top:var(--sp-2);padding-top:var(--sp-2);
                              border-top:1px solid var(--border-soft)}

/* ⭐ LA VOCE. Riga intera cliccabile, titolo grande e spiegazione SCRITTA sotto —
   non in un `title=`, che su un tablet non esiste: è il difetto che questo lotto
   corregge, e riproporlo qui dentro sarebbe rifarlo in piccolo. */
.ac-voce{display:flex;align-items:center;gap:var(--sp-2);width:100%;text-align:left;
         font:inherit;min-height:44px;padding:10px var(--sp-2);cursor:pointer;
         border:1px solid var(--border);border-radius:var(--r-sm);
         background:var(--surface);color:var(--t1)}
.ac-voce:hover{border-color:var(--accent-bord);background:var(--accent-mute)}
.ac-voce:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ac-voce-txt{display:grid;gap:2px;flex:1;min-width:0}
.ac-voce-txt b{font-size:var(--fs-base);font-weight:600}
.ac-voce-txt small{color:var(--t2);font-size:var(--fs-sm);line-height:1.4;white-space:normal}
.ac-voce-freccia{color:var(--t3);font-size:var(--fs-md)}
.ac-voce-warn{border-color:var(--c-warn)}
.ac-voce-warn b{color:var(--c-warn)}
.ac-voce-danger{border-color:var(--c-crit);background:var(--surface)}
.ac-voce-danger b{color:var(--c-crit)}
.ac-voce-danger:hover{border-color:var(--c-crit);background:var(--c-crit-bg)}

.ac-riga-azione{display:flex;justify-content:flex-end}
.ac-usati{margin:0;color:var(--t2);font-size:var(--fs-sm)}
/* Lo stesso riquadro dice il no e il sì: due posti diversi per l'esito dello
   stesso gesto sono due punti da guardare invece di uno. */
.ac-ok{background:var(--c-ok-bg);color:var(--c-ok);border-color:var(--c-ok)}

@media (max-width:640px){
  .ac-riga-azione .btn{width:100%}
  .ac-sez{padding:var(--sp-2)}
}

/* ── D5.6 · IL DOSSO ────────────────────────────────────────────────────────
   Il colore del rischio è quello del semaforo di casa (`--c-crit`), non un rosso
   nuovo: un gesto che fa male deve somigliare a tutto ciò che in questa pagina
   già dice «attenzione», altrimenti diventa un'altra cosa da imparare. */
.btn-rischio{background:var(--c-crit);border-color:var(--c-crit);color:#fff;font-weight:600}
.btn-rischio:hover{background:#b83e32;border-color:#b83e32}
.btn:not(.btn-forte).btn-rischio{background:var(--surface);color:var(--c-crit);
                                 border-color:rgba(206,74,60,.45)}
.btn:not(.btn-forte).btn-rischio:hover{background:var(--c-crit-bg);border-color:var(--c-crit)}
/* ⚠ Anche qui il disabilitato deve VEDERSI disabilitato: la regola generica
   `.btn-forte:disabled` rimette lo sfondo dell'accento al passaggio del mouse, e
   sopra un bottone rosso sarebbe il colore sbagliato che torna. */
.btn-forte.btn-rischio:disabled:hover{background:var(--c-crit);border-color:var(--c-crit)}

/* ── D5.8 · I DUE COMANDI CHE NON SI DEVONO SOMIGLIARE ───────────────────────
   Emanuele, 05/08: due nomi che non si scambiano. Il colore fa la stessa cosa
   delle parole, e qui i tre gesti della colonna «Azioni» stanno su tre semafori
   diversi, non su tre sfumature dello stesso rosso:

     Revoca          rosso (--c-crit)   non si disfa, e porta fuori una catena
     Blocca          giallo (--c-warn)  si disfa, e restituisce i giorni fermi
     Password nuova  blu   (--c-info)   non si disfa, ma non toglie l'accesso

   ⚠ Il giallo NON è un rosso più chiaro: è il colore che in questa pagina dice
     già «sospeso» sul chip di stato, cioè esattamente ciò che il blocco fa. Chi
     lo vede ha già imparato che vuol dire. Un quarto rosso, invece, sarebbe una
     cosa nuova da imparare per dire una cosa che il semaforo diceva già. */
.btn:not(.btn-forte).btn-attenzione{background:var(--surface);color:var(--c-warn);
                                    border-color:var(--c-warn-bg)}
.btn:not(.btn-forte).btn-attenzione:hover{background:var(--c-warn-bg);border-color:var(--c-warn)}
.btn-forte.btn-attenzione{background:var(--c-warn);border-color:var(--c-warn);
                          color:#fff;font-weight:600}
.btn-forte.btn-attenzione:disabled:hover{background:var(--c-warn);border-color:var(--c-warn)}
.btn:not(.btn-forte).btn-chiave{background:var(--surface);color:var(--c-info);
                                border-color:var(--c-info-bg)}
.btn:not(.btn-forte).btn-chiave:hover{background:var(--c-info-bg);border-color:var(--c-info)}
.btn-forte.btn-chiave{background:var(--c-info);border-color:var(--c-info);
                      color:#fff;font-weight:600}
.btn-forte.btn-chiave:disabled:hover{background:var(--c-info);border-color:var(--c-info)}

/* La password temporanea: si legge caratere per carattere e si copia a mano, come
   quella del modulo «nuova produzione». Stessa forma, perché è la stessa cosa. */
.pw-nuova{font-family:var(--ff-mono);font-size:var(--fs-lg);letter-spacing:.06em;
          display:inline-block;background:var(--s3);border:1px solid var(--border);
          border-radius:8px;padding:6px 12px;user-select:all}

.dosso-carta{max-width:560px}
.dosso-conto{margin:0 0 var(--sp-3);font-size:var(--fs-base);line-height:1.5;color:var(--t1)}
.dosso-ricopia{margin-bottom:var(--sp-3)}
.dosso-ricopia strong{font-family:var(--ff-mono);font-size:var(--fs-sm);
                      background:var(--s3);border:1px solid var(--border);
                      border-radius:7px;padding:1px 6px}
.dosso-ricopia input{font-family:var(--ff-mono)}
.col-azioni{white-space:nowrap}

@media (max-width:760px){
  .det-barra{align-items:stretch}
  .det-barra .spazio{display:none}
  .det-barra .pillole{width:100%}
  .det-barra .btn{width:100%}
  .tetto-campo{flex:1 1 100%;min-width:0}
  .tetto-campo input{max-width:none}
  /* Il piede del dosso si impila: due bottoni affiancati a 390px diventano due
     bersagli stretti, ed è il posto sbagliato dove sbagliare mira. */
  .dosso-carta .np-piede{flex-direction:column-reverse}
  .dosso-carta .np-piede .btn{width:100%}
}

/* B5 (20/08/2026) · il link da consegnare al cliente. Sta in fondo al riquadro
   della produzione appena nata ed e' la cosa che ci si porta via da quel gesto:
   si vede, si seleziona, si copia. Nessun bottone «copia» — sarebbe un comando
   nuovo, e un comando vuole il suo contratto (CANONE_DEI_COMANDI.md). */
.np-link {
  margin-top: 14px;
  word-break: break-all;
}
.np-link a {
  font-weight: 600;
}

/* ═══ LOTTO 9 · IL BANCO DI LAVORO DEI PREVENTIVI ════════════════════════════
   Nessun colore nuovo e nessuna misura inventata: solo i token che la console già
   ha. Un pannello che si veste da sé è un pannello che stona il giorno che il
   tema cambia. */

.schede{margin:0 0 var(--sp-3)}

/* la spunta dell'ODG e il campo dello spoglio nel modulo di vendita */
/* ⛔ 44px SULLA RIGA, 24 sulla casella, e i due numeri non sono lo stesso numero
   detto due volte: il dito preme la RIGA — l'input sta dentro il <label>, quindi
   toccare il testo spunta la casella — e la casella e' solo il quadratino
   disegnato. Una casella nativa di 13px la sbaglia chiunque abbia le mani fredde
   su un set. Trovato il 09/09 da prova_console_dominio sul sito vero, e NOMINATO
   da shot_console_posti.js: la prima sa contare, la seconda sa dire quale. */
.riga-spunta{display:flex;align-items:flex-start;gap:var(--sp-2);min-height:44px;
  margin:var(--sp-2) 0;cursor:pointer;line-height:1.35;padding:6px 0}
.riga-spunta input{margin-top:2px;flex:0 0 auto;width:24px;height:24px;
  accent-color:var(--accent)}
.riga-spunta small{color:var(--t3);display:block}
.campo-spoglio input{max-width:160px}

/* il modulo del preventivo nuovo */
#prevNuovo .campi{display:grid;gap:var(--sp-2);margin:var(--sp-3) 0}
#prevNuovo .campi label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
#prevNuovo .campi input,#prevNuovo .campi select,#prevNuovo .campi textarea{
  font:inherit;padding:7px var(--sp-2);border:1px solid var(--border);
  border-radius:var(--r);background:var(--bg);color:inherit}

/* lo stato, a colpo d'occhio */
.tag{display:inline-block;padding:3px var(--sp-2);border-radius:999px;
  font-size:var(--fs-sm);border:1px solid var(--border)}
.st-bozza{color:var(--t3)}
.st-inviato{color:var(--c-info)}
.st-accettato{color:var(--c-ok);font-weight:600}
.st-rifiutato,.st-annullato{color:var(--c-crit)}

/* ── LE DUE COLONNE · la lista non sparisce mai ─────────────────────────────
   ⭐ La prima delle sei cose che cambiano. Prima il documento si apriva SOTTO la
   lista, che restava lì a confondere: si perdeva il filo di quale preventivo si
   stesse guardando. */
.banco{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--sp-4);
  align-items:start}
/* ⚠ `minmax(0,1fr)` e non `1fr`: senza, una tabella larga dentro la colonna di
   destra allargherebbe la griglia oltre lo schermo invece di stringersi. È il
   difetto che fa uscire le pagine a destra, e non si vede finché non c'è dentro
   qualcosa di largo. */
@media (max-width:900px){ .banco{grid-template-columns:1fr} }

.colonna{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden}
.col-lista{position:sticky;top:var(--sp-2)}
@media (max-width:900px){ .col-lista{position:static} }

.testa-col{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);
  display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.pillole-mini .pillola{font-size:var(--fs-xs);padding:5px 10px}
.riga-ordine{gap:var(--sp-1)}
.riga-ordine .ord-eti{font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.04em;color:var(--t3);font-weight:600}
.riga-ordine select{flex:1;min-width:0;font:inherit;font-size:var(--fs-sm);
  padding:5px 8px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--bg);color:inherit}

.elenco{max-height:min(58vh,560px);overflow-y:auto}
@media (max-width:900px){ .elenco{max-height:none} }

.voce{display:block;width:100%;text-align:left;font:inherit;border:0;
  background:transparent;padding:var(--sp-2) var(--sp-3);cursor:pointer;
  border-bottom:1px solid var(--border);color:var(--t1)}
.voce:hover{background:var(--accent-mute)}
.voce:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.voce.on{background:var(--accent);color:#fff}
.voce.on .sotto,.voce.on .euro{color:rgba(255,255,255,.88)}
.voce.on .bollo{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.voce .riga1{display:flex;justify-content:space-between;gap:var(--sp-2);
  align-items:baseline}
.voce .nome{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voce .euro{font-variant-numeric:tabular-nums;font-size:var(--fs-sm);flex:0 0 auto}
.voce .sotto{display:flex;gap:6px;align-items:center;color:var(--t3);
  font-size:var(--fs-xs);margin-top:3px}
.voce .titolo{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Il bollino dello stato: RIEMPIE il colore, mentre `.st-*` lo mette sul testo. */
.bollo{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:currentColor}
.bollo.st-bozza{background:var(--t3)}
.bollo.st-inviato{background:var(--c-info)}
.bollo.st-accettato{background:var(--c-ok)}
.bollo.st-rifiutato,.bollo.st-annullato{background:var(--c-crit)}

.piede-col{padding:var(--sp-3);display:grid;gap:var(--sp-2);
  border-top:1px solid var(--border)}
.btn.largo{width:100%;justify-content:center;text-align:center}
.vuoto-mini{padding:var(--sp-4);font-size:var(--fs-sm)}

/* ── IL DOCUMENTO ──────────────────────────────────────────────────────────── */
.doc-testa{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
/* ⚠ MISURATO a 390 px: aprendo un preventivo, lo `scrollIntoView` portava la
   testata a `top:0` — cioè ESATTAMENTE sotto l'intestazione fissa della console
   (`.testa` è `position:sticky; top:0`), che la copriva. Chi apriva un preventivo
   sul telefono si trovava davanti «La storia di questo preventivo» senza sapere
   di QUALE preventivo. Il margine di scorrimento lascia passare l'intestazione. */
#prevDettaglio{scroll-margin-top:64px}
.doc-testa .doc-chi{min-width:0}
.doc-testa h2{font-family:var(--ff-display);font-size:var(--fs-md);margin:0 0 2px;
  font-weight:600}
.doc-testa .chi{color:var(--t2);font-size:var(--fs-sm);display:block}
.doc-testa .spazio{flex:1}
.doc-corpo{padding:var(--sp-4)}
.doc-eti{margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-weight:600}

/* ── LA STORIA · le revisioni in verticale ──────────────────────────────────
   ⭐ La seconda delle sei cose, e la prima che Emanuele ha nominato: «non si
   capisce come si gestiscono le revisioni». Prima erano una scritta in mezzo al
   sottotitolo: non si vedevano, non si aprivano, non si confrontavano. */
.tempo{list-style:none;margin:0 0 var(--sp-3);padding:0 0 0 var(--sp-4);
  position:relative}
.tempo:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;
  width:2px;background:var(--border)}
.tempo li{position:relative;padding:6px 0 6px var(--sp-3);border-radius:var(--r-sm)}
.tempo li[data-prev-rev]{cursor:pointer}
.tempo li[data-prev-rev]:hover{background:var(--accent-mute)}
.tempo li:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tempo li:before{content:"";position:absolute;left:calc(var(--sp-4) * -1 + 1px);
  top:12px;width:12px;height:12px;border-radius:50%;background:var(--bg);
  border:2px solid var(--border)}
.tempo li.fatta:before{background:var(--t3);border-color:var(--t3)}
.tempo li.viva:before{background:var(--accent);border-color:var(--accent)}
.tempo li.ok:before{background:var(--c-ok);border-color:var(--c-ok)}
.tempo li.no:before{background:var(--c-crit);border-color:var(--c-crit)}
.tempo li.aperta{background:var(--accent-mute)}
.tempo .tit{font-weight:600;font-size:var(--fs-sm);display:block}
.tempo .det{color:var(--t3);font-size:var(--fs-xs);display:block}

.avviso-storica{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;
  background:var(--c-warn-bg);border:1px solid var(--c-warn);color:var(--t1);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r);font-size:var(--fs-sm);
  margin:0 0 var(--sp-3)}
/* ⛔ `hidden` PERDE contro un `display:` scritto in una classe, e mi ha morso due
   volte il 24/08/2026: l'elemento resta visibile mentre il programma è convinto
   di averlo nascosto, e la prova in JavaScript dice «nascosto» perché guarda il
   flag e non i pixel. Ogni classe qui dentro che porta un `display:` ha la sua
   riga `[hidden]` accanto. */

/* ── LE RIGHE ─────────────────────────────────────────────────────────────── */
#prevRighe{width:100%;border-collapse:collapse}
#prevRighe th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.04em;color:var(--t3);padding:0 6px var(--sp-1);font-weight:600}
#prevRighe td{padding:5px 6px;border-top:1px solid var(--border);vertical-align:middle}
#prevRighe .num{text-align:right}
#prevRighe input,#prevRighe select{font:inherit;font-size:var(--fs-sm);
  padding:6px 8px;border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:inherit;width:100%;min-width:0}
#prevRighe input.num{text-align:right}
#prevRighe input:hover,#prevRighe select:hover{border-color:var(--border)}
#prevRighe input:focus,#prevRighe select:focus{border-color:var(--accent);
  background:var(--bg);outline:none}
#prevRighe input:disabled,#prevRighe select:disabled{color:var(--t2);
  -webkit-text-fill-color:var(--t2);opacity:1;cursor:default}
#prevRighe .imp{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
/* «gg» accanto al numero, non DENTRO il campo: un campo che contiene «120 giorni»
   va riletto a ogni battuta, e chi cancella per correggere cancella «giorni». */
/* ⛔ 24/08/2026 · IL NUMERO DEI GIORNI ERA SPARITO, e l'ho visto solo GUARDANDO
   lo screenshot: nella colonna «Durata» c'era «gg» e basta. La causa era qui: la
   prima stesura metteva `display:flex` su questa `<td>`, e una cella con un
   display diverso da `table-cell` ESCE dal layout della tabella — non si allinea
   più alla sua intestazione e collassa. È la stessa famiglia del `display:` che
   batte `hidden` (mi ha morso tre volte in due giorni): un `display:` cambia
   molto più di come una cosa è disposta.
   ⚠ Su TELEFONO invece va bene, perché lì tutte le `td` sono già `display:flex`
     (sono schede, non celle) — ed è per questo che la prova a 390 px era verde
     mentre a 1280 px il dato non c'era. Una larghezza sola non basta a guardare. */
#prevRighe td[data-eti="Durata"]{white-space:nowrap;text-align:right}
#prevRighe td[data-eti="Durata"] input{width:calc(100% - 20px);display:inline-block}
#prevRighe .suff{color:var(--t3);font-size:var(--fs-xs);margin-left:3px}
#prevRighe .col-x{width:34px;text-align:right}
#prevRighe .btn-mini{width:28px;height:28px;padding:0;line-height:1;
  border-radius:var(--r-sm);font-size:var(--fs-sm);min-width:0}
/* ⚠ La VOCE ha la fetta più larga, e non è un capriccio: le etichette sono quelle
   che legge il cliente sul PDF («Dashboard di produzione», «Account Capo Crew») e
   NON si possono accorciare qui — sarebbero due nomi per la stessa cosa. La prima
   stesura dava il 20% e a schermo compariva «Dashboard di p», che non si capisce. */
#prevRighe th:nth-child(1),#prevRighe td:nth-child(1){width:24%}
#prevRighe th:nth-child(2),#prevRighe td:nth-child(2){width:22%}
#prevRighe th:nth-child(3),#prevRighe td:nth-child(3){width:7%}
#prevRighe th:nth-child(4),#prevRighe td:nth-child(4){width:11%}
#prevRighe th:nth-child(5),#prevRighe td:nth-child(5){width:13%}
#prevRighe th:nth-child(6),#prevRighe td:nth-child(6){width:16%;white-space:nowrap}

.riga-agg{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
  margin:var(--sp-2) 0 0}
.riga-agg small{color:var(--t3);font-size:var(--fs-xs);line-height:1.35;flex:1;
  min-width:200px}

.conti{margin-top:var(--sp-4);display:flex;justify-content:flex-end}
.conti table{border-collapse:collapse;min-width:260px}
.conti td{padding:4px var(--sp-3);text-align:right;font-variant-numeric:tabular-nums}
.conti td:first-child{color:var(--t2);text-align:left}
.conti tr:last-child td{border-top:2px solid var(--t1);font-size:var(--fs-lg);
  font-weight:700;padding-top:var(--sp-2)}

/* ── LA FASCIA VERDE · da qui nasce la produzione ───────────────────────────
   ⭐ La sesta delle sei cose, e la richiesta esplicita: «deve essere collegato
   alla creazione delle produzioni». Prima, dopo «Accettato», il legame spariva. */
.fascia-prod{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
  background:var(--c-ok-bg);border:1px solid var(--c-ok);border-radius:var(--r);
  padding:var(--sp-3);margin-top:var(--sp-4)}
.fascia-testo{flex:1;min-width:220px;font-size:var(--fs-sm);line-height:1.4}
.fascia-testo b{display:block;margin-bottom:2px}

/* ── IL PIEDE · un tasto scuro solo ─────────────────────────────────────────
   ⭐ La quinta delle sei cose. Prima erano cinque bottoni uguali in fila e non si
   capiva quale fosse il gesto normale e quale chiudesse il documento per sempre. */
.piede-doc{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);
  background:var(--bg)}
.piede-doc .spazio{flex:1}
.piede-doc .secondari{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.piede-doc .secondari .btn{color:var(--t2)}
.salvato{font-size:var(--fs-sm);color:var(--t3);min-width:0}
.salvato.ok{color:var(--c-ok)}
.salvato.attesa{color:var(--t3);font-style:italic}
/* ⛔ Il salvataggio che NON è riuscito si dice, e si dice in rosso. Scrivere
   «salvato» quando non lo è sarebbe il divieto 8 nel posto peggiore: chi legge
   chiude la finestra. */
.salvato.male{color:var(--c-crit);font-weight:600}

/* ── IL TELEFONO · la tabella diventa SCHEDE ────────────────────────────────
   ⛔ MISURATO, NON SUPPOSTO: a 390 px questa tabella era larga 446 px e usciva
      dallo schermo — «IMPORTO» tagliato, la voce ridotta a una freccetta, il
      prezzo troncato in «1800». Sette colonne su 390 px non ci stanno, e non è
      una questione di percentuali: sei campi di testo hanno una larghezza minima.
   ⭐ Quindi sotto 760 px ogni riga diventa una SCHEDA, con l'etichetta accanto al
      valore. Il markup resta UNA tabella sola — due markup per lo stesso dato
      sarebbero due cose da tenere allineate (divieto 7) — e il travestimento lo
      fa `data-eti`, che il JavaScript scrive su ogni cella.
   ⚠ Il gate dei comandi rifiuta un banco con un `thead` invisibile: il collaudo
      del contratto si fa a finestra LARGA, e questo comportamento è dichiarato in
      `stati_non_coperti` di `web/contracts/preventivi.json`. */
@media (max-width:760px){
  #prevRighe thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  #prevRighe,#prevRighe tbody,#prevRighe tr,#prevRighe td{display:block;width:auto}
  #prevRighe tr{border:1px solid var(--border);border-radius:var(--r);
    padding:var(--sp-2);margin-bottom:var(--sp-2);background:var(--surface);
    position:relative}
  #prevRighe td{border-top:0;display:flex;align-items:center;gap:var(--sp-2);
    padding:3px 0;width:auto!important}
  #prevRighe td:before{content:attr(data-eti);flex:0 0 92px;color:var(--t3);
    font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;
    font-weight:600}
  /* il «gg» attaccato al suo numero: staccato all'altro capo della scheda
     sembrava l'etichetta di un altro campo */
  #prevRighe td[data-eti="Durata"]{justify-content:flex-start}
  #prevRighe td[data-eti="Durata"] input{flex:0 0 auto;width:88px}
  #prevRighe input,#prevRighe select{border-color:var(--border);background:var(--bg);
    flex:1;min-width:0}
  #prevRighe input.num{text-align:left}
  #prevRighe .imp{justify-content:flex-start;font-size:var(--fs-base)}
  /* la ✕ va in alto a destra della scheda, dove non si preme per sbaglio */
  #prevRighe .col-x{position:absolute;top:6px;right:6px;width:auto;padding:0}
  #prevRighe .col-x:before{content:""}
  .conti table{min-width:0;width:100%}
  .piede-doc{gap:var(--sp-2)}
  .piede-doc .secondari{width:100%;order:3}
  .piede-doc .btn-forte{width:100%;order:2;justify-content:center}
  .salvato{width:100%;order:1}
}

/* il pannellino dei nostri dati: stessa forma degli altri moduli */
#prevAzienda .campi{display:grid;gap:var(--sp-2);margin:var(--sp-3) 0}
#prevAzienda .campi label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
#prevAzienda .campi input{font:inherit;padding:7px var(--sp-2);
  border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:inherit}
#prevAzienda .sotto{color:var(--t3);font-size:var(--fs-sm);line-height:1.4}


/* ══ I GUASTI · punto A del piano (24/08/2026) ═══════════════════════════════
   ⭐ La spia e' ROSSA e non arancione: «in scadenza fra 7 giorni» e' una cosa da
   sapere, «si e' rotto qualcosa» e' una cosa da guardare adesso. Due urgenze
   diverse non possono avere lo stesso colore, o si impara a ignorarle entrambe. */
.tessera-spia{
  border:1px solid var(--c-crit); background:#fff5f4; cursor:pointer;
  text-align:left; font:inherit; color:inherit;
}
.tessera-spia:hover{ background:#ffece9; }
.tessera-spia .n{ color:var(--c-crit); }

.pannello-guasti{
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); padding:18px 20px; margin:0 0 18px;
}
.testa-guasti{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.testa-guasti h2{ margin:0 0 2px; font-size:1.05rem; }
.sotto-guasti{ margin:0; font-size:.86rem; color:var(--t3); }

.elenco-guasti{ list-style:none; margin:14px 0 0; padding:0; }
.elenco-guasti li{
  padding:10px 0; border-top:1px solid var(--border);
  display:grid; grid-template-columns:150px 1fr; gap:4px 16px;
}
.elenco-guasti li:first-child{ border-top:0; }
.g-quando{ font-size:.82rem; color:var(--t3); font-variant-numeric:tabular-nums; }
.g-dove{ font-weight:600; word-break:break-word; }
.g-cosa{ grid-column:2; font-size:.88rem; color:var(--t3); word-break:break-word; }
.g-chi{ grid-column:1; font-size:.82rem; color:var(--t3); }

/* ⚠ Sotto i 700 px la griglia a due colonne stringe la seconda a nulla: qui si
   impila, come le righe del preventivo diventano schede. */
@media (max-width:700px){
  .elenco-guasti li{ grid-template-columns:1fr; }
  .g-cosa,.g-chi{ grid-column:1; }
}

/* ══ ⭐ 3M (03/09/2026) · LA CELLA DEL REPARTO nella tabella dei preventivi ══
   Una tendina e, sotto, due caselline piccole che compaiono solo quando servono.
   ⚠ Niente `style="…"` nel JS: la CSP di questa console vieta gli stili in linea
     (`style-src 'self'`), e ci è già costata un difetto una volta. */
#prevRighe .col-rep { min-width: 9.5rem; }
#prevRighe .col-rep select { width: 100%; }
#prevRighe .rip {
  display: flex; align-items: center; gap: .25rem;
  margin-top: .3rem; font-size: .82em;
}
#prevRighe .rip .suff { opacity: .7; }
#prevRighe input.mini { width: 3.1rem; text-align: right; padding: .15rem .3rem; }

/* ══ 3N (10/09/2026) · I TRE MODI DI VENDERE UN RUOLO ═══════════════════════════
   Emanuele, 10/09: «io gliene vendo 5 di trucco 5 di costumi e lui sceglie solo
   quelle di quei 10 … a me deve pagare gli account separati per mansione».
   Il modo si SCEGLIE da un selettore che dice i tre nomi, invece di un bottone
   «Dividi per reparto» che apriva un pannello senza dire cosa contenesse. */
.pv-modi{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-pill,999px);
  background:var(--s2);padding:3px;gap:2px;flex-wrap:wrap}
.pv-modo{border:0;background:transparent;color:var(--t3);font:600 11.5px var(--ff-sans);
  /* ⛔ 10/09/2026 · 44px E NON 36. Le tre pillole erano nate a 36 e la prova sul
     DOMINIO VERO le ha contate: sei comandi sotto la misura del dito (tre modi ×
     due ruoli), su una schermata che si usa col tablet in mano. La misura sta in
     UI_SYSTEM §responsive e non si abbassa per far stare meglio un segmentato. */
  padding:7px 11px;min-height:44px;border-radius:var(--r-pill,999px);cursor:pointer;
  transition:background var(--dur-fast,.15s) var(--ease-out,ease),color var(--dur-fast,.15s) var(--ease-out,ease)}
.pv-modo:hover{color:var(--t1)}
.pv-modo.on{background:var(--surface);color:var(--t1);box-shadow:var(--sh-1)}
/* I numeri per reparto del modo «divisi»: una casella per reparto, il totale lo fa
   la somma. Cifre tabulari perche' passando da 9 a 10 la fila non balli. */
.pv-divisi{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2);
  padding-top:var(--sp-2);border-top:1px dashed var(--border-soft)}
.pv-div-c{display:grid;gap:3px}
.pv-div-c>span{font-size:var(--fs-xs);color:var(--t2)}
.pv-div-c>input{width:6rem;min-height:44px;font-size:16px;text-align:center;
  font-variant-numeric:tabular-nums}
/* Il totale calcolato: si vede ma non si tocca — due caselle che devono tornare
   sarebbero due verita', e la prima che l'utente sbaglia diventa un guaio. */
.pv-calcolato{background:var(--s2);color:var(--t2);cursor:not-allowed}

/* ══ IL MOTORE DELLO SPOGLIO IA · 0.5.0 (24/09/2026) ═════════════════════════
   ⚠ `minmax(0,1fr)` e non `1fr`: il nome di un modello lungo dentro una tendina
   allargherebbe la colonna oltre lo schermo (invariante anti-sbordo, legge O). */
#vistaMotore{display:grid;gap:var(--sp-3)}
#vistaMotore[hidden]{display:none}
.mot-testa{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-3)}
.mot-testa h2{font-family:var(--ff-display);font-size:var(--fs-md);margin:0 0 4px;font-weight:600}
.mot-testa .spazio{flex:1}
.mot-catalogo{display:grid;gap:4px;justify-items:end}
.mot-giri{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--sp-3)}
.mot-giro{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
          padding:var(--sp-4);display:grid;gap:var(--sp-3);min-width:0}
.mot-giro h3{margin:0;font-family:var(--ff-display);font-size:var(--fs-md);font-weight:600}
.mot-giro select,#motPrompt textarea{font:inherit;font-size:16px;padding:9px 11px;
          border-radius:var(--r-sm);border:1px solid var(--border2);background:var(--surface);
          color:var(--t1);min-height:44px;width:100%;min-width:0}
.mot-giro select:disabled{color:var(--t3)}
.mot-giro select:focus-visible,#motPrompt textarea:focus-visible{outline:2px solid var(--accent);
          outline-offset:1px;border-color:var(--accent)}
.mot-piede{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:flex-end}
.mot-piede .btn,.mot-catalogo .btn{min-height:44px}
#vistaMotore .sotto{color:var(--t3);font-size:var(--fs-sm);line-height:1.4;margin:0}
.mot-nota{max-width:78ch}
.mot-carta{width:min(960px,100%)}
#motPrompt .campo{margin-top:var(--sp-3)}
#motPrompt textarea{font-family:var(--ff-mono);font-size:14px;
          line-height:1.45;resize:vertical}
.mp-formato{margin-top:var(--sp-3)}
.mp-formato summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--t2)}
.mp-formato pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;background:var(--bg);
          border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--sp-2);
          max-height:40vh;overflow:auto;margin:0}
#motPrompt .det-piede{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
@media (max-width:760px){
  .mot-catalogo{justify-items:stretch;width:100%}
  .mot-piede .btn,#motPrompt .det-piede .btn{flex:1 1 100%}
}

/* ══ LA CHIAVE DI ANTHROPIC · 0.6.0 (26/09/2026) ═════════════════════════════
   ⚠ Stessa misura delle tendine dei giri: 16px (niente zoom su iPhone), 44px di dito. */
.mot-chiave input{font:inherit;font-size:16px;padding:9px 11px;border-radius:var(--r-sm);
          border:1px solid var(--border2);background:var(--surface);color:var(--t1);
          min-height:44px;width:100%;min-width:0}
.mot-chiave input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;
          border-color:var(--accent)}
.mot-giorni{max-width:240px}
.fascia-chiave{background:var(--c-warn-bg);border:1px solid var(--c-warn);border-radius:var(--r);
          padding:var(--sp-3);font-size:var(--fs-sm);line-height:1.4;margin-bottom:var(--sp-3);
          color:var(--t1)}
.fascia-chiave.grave{background:var(--c-crit-bg);border-color:var(--c-crit)}

/* 0.6.2 · B4 · chi aspetta lo spoglio IA */
.att-lista{list-style:none;margin:var(--sp-2) 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.att-riga{display:flex;flex-wrap:wrap;gap:2px var(--sp-3);align-items:baseline;padding:var(--sp-2) var(--sp-3);
          border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.att-riga .att-chi{font-weight:600;color:var(--t1)}
.att-riga .att-dove,.att-riga .att-quando,.att-riga .att-fb{color:var(--t2)}
.att-riga .att-stato{margin-left:auto;color:var(--t2)}
.att-riga.avvisato{opacity:.72}
.att-vuota{color:var(--t2);padding:var(--sp-2) 0}
.att-esito:not([hidden]){display:block;margin:var(--sp-2) 0}
@media (max-width:560px){.att-riga .att-stato{margin-left:0;flex-basis:100%}}