/* ═══════════════════════════════════════════════════════
   area-cantieri.css — Modulo Cantieri. PR 9 del nuovo design (spec §6.1 riga 9, §6.2).
   9a: i pannelli a tutta pagina: dashboard Cantieri col semaforo, Cassa, Modello lavori.
   9b: la tab Cantiere della scheda (contratti e rate, computo, misure, programma lavori).
   Caricato dopo area-task.css e prima di area-shell.css, che resta l'ultimo foglio.
   Disciplina (tests/area-cantieri.test.js): solo token, niente esadecimali, niente !important,
   niente font-family, niente rem, niente transition né animation (il blocco "Riduci movimento"
   di area-shell.css non cresce), testo mai sotto gli 11 px, ogni @media con larghezza
   "screen and", ogni :hover dentro (hover:hover), ogni superficie dichiara fondo e testo.
   ═══════════════════════════════════════════════════════ */

/* ── Ditte e contratti (js/modules/ditte.js, contratti PR 1, 29-set-2026) ──
   Erano in style.css fino alla PR 15 (Task 2): spostati com'erano, in testa al file, così la
   cascata resta quella di prima (style.css veniva prima di questo foglio). Il primario e il link
   prendono l'accento (--fc-primary non esisteva: restava l'indaco scritto a mano). Le misure erano
   in rem: il Task 3 della PR 15, con la caduta della radice a 19 px da telefono, le ha portate in px
   al valore da computer (D-15.2); i 44 px da telefono stanno subito dopo questo blocco.
   Eccezioni dichiarate, solo in questo blocco (tests/area-cantieri.test.js le ritaglia):
   - @media (max-width:640px) e (max-width:760px) senza "screen", com'erano: stesse larghezze
     anche in stampa (la pagina A4 è larga 741 px);
   - Georgia nell'anteprima del contratto (è l'aspetto del documento) e il monospazio
     nell'editor degli articoli e nel confronto delle versioni. ── */
#ditteContent{padding:16px 20px;max-width:1100px}
.dt-testa{display:flex;flex-wrap:wrap;align-items:center;gap:12.8px;justify-content:space-between}
.dt-testa h2{margin:0}
.dt-schede{display:flex;gap:4.8px}
.dt-sub{margin:6.4px 0 12.8px;color:var(--fc-label2);font-size:14.4px;line-height:1.45}
.dt-btn{border:1px solid var(--fc-sep);background:var(--fc-card);border-radius:8px;padding:6.4px 12.8px;font-size:13.6px;cursor:pointer;min-height:36px}
.dt-btn:disabled{opacity:.6;cursor:default}
.dt-on{background:var(--fc-info-soft);font-weight:600}
.dt-primario{background:var(--fc-accent-fill);color:var(--fc-on-accent);border-color:transparent}
.dt-leggero{background:transparent}
.dt-link{background:none;border:none;padding:0;color:var(--fc-accent);font-weight:600;cursor:pointer;text-align:left;font-size:inherit}
.dt-filtri{display:flex;flex-wrap:wrap;gap:12.8px;align-items:flex-end;margin-bottom:9.6px}
.dt-campo{display:flex;flex-direction:column;gap:3.2px;font-size:12.8px;color:var(--fc-label);min-width:192px;flex:1 1 192px}
.dt-campo input,.dt-campo select,.dt-campo textarea{font-size:14.4px;padding:5.6px 8px;border:1px solid var(--fc-sep);border-radius:6px}
/* Fondo dai token (PR 15, Task 6): senza, in scuro restava il grigio del browser (#3B3B3B, segnaposto a 1,87:1).
   In chiaro identico (--fc-card è il bianco del browser); il testo resta quello del browser (bianco in scuro,
   grigio se disabilitato). Spunte e file fuori: non hanno fondo. Stessa regola per Programma e Modello lavori. */
.dt-campo input:not([type=checkbox]):not([type=file]),.dt-campo select,.dt-campo textarea{background:var(--fc-card)}
.dt-largo{flex:1 1 100%}
.dt-riga{flex-direction:row;align-items:center;gap:6.4px;min-width:0}
.dt-riassunto{font-weight:600;margin:3.2px 0 9.6px}
.dt-tabella{width:100%;border-collapse:collapse;font-size:14.08px}
.dt-tabella th,.dt-tabella td{text-align:left;padding:7.2px 8.8px;border-bottom:1px solid var(--fc-sep);vertical-align:top}
.dt-spenta td{color:var(--fc-label2)}
.dt-storico td{color:var(--fc-label2)}
.dt-pallino{display:inline-block;width:11.2px;height:11.2px;border-radius:50%;margin-right:5.6px;vertical-align:middle}
.dt-verde{background:var(--fc-ok)}
.dt-giallo{background:var(--fc-warn)}
.dt-rosso{background:var(--fc-danger)}
.dt-motivi{font-size:12.8px}
.dt-muto{color:var(--fc-label2)}
.dt-errore{color:var(--fc-danger);margin:9.6px 0}
.dt-scheda-testa{display:flex;align-items:center;gap:12.8px;margin:9.6px 0}
.dt-scheda-testa h3{margin:0}
.dt-blocco{display:flex;flex-wrap:wrap;gap:9.6px 14.4px;border:1px solid var(--fc-sep);border-radius:10px;padding:9.6px 14.4px 14.4px;margin:9.6px 0;background:var(--fc-card)}
.dt-blocco legend{font-weight:700;padding:0 4.8px}
.dt-blocco .dt-tabella{flex:1 1 100%}
.dt-stato{flex:1 1 100%;margin:0}
.dt-azioni{display:flex;flex-wrap:wrap;gap:9.6px;align-items:center;flex:1 1 100%;margin:6.4px 0}
.dt-carica-doc{display:flex;flex-wrap:wrap;gap:9.6px 14.4px;align-items:flex-end;flex:1 1 100%;border-top:1px dashed var(--fc-sep);padding-top:9.6px}
.dt-carica-doc > b{flex:1 1 100%}
@media (max-width:640px){.dt-tabella th:nth-child(3),.dt-tabella td:nth-child(3),.dt-tabella th:nth-child(4),.dt-tabella td:nth-child(4){display:none}.dt-campo{min-width:100%}}
.cm-barra{display:flex;flex-wrap:wrap;gap:8px 12.8px;align-items:center;margin:6.4px 0 11.2px;padding:8px 11.2px;border:1px solid var(--fc-sep);border-radius:8px;background:var(--fc-card)}
.cm-barra .dt-errore{margin:0}
.cm-modi{margin-bottom:11.2px}
.cm-editor{display:grid;grid-template-columns:minmax(192px,304px) 1fr;gap:16px;align-items:start}
.cm-voci{list-style:none;margin:0;padding:0;max-height:70vh;overflow:auto;border:1px solid var(--fc-sep);border-radius:8px;background:var(--fc-card)}
.cm-voci li{border-bottom:1px solid var(--fc-sep)}
.cm-voci li:last-child{border-bottom:none}
.cm-voce{display:block;width:100%;padding:7.2px 9.6px;font-weight:400;min-height:36px}
.cm-sel{background:var(--fc-info-soft)}
.cm-sel .cm-voce{font-weight:700}
.cm-stretto{flex:0 0 104px;min-width:104px}
.cm-articolo textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.6px;line-height:1.45;min-height:352px;resize:vertical}
.cm-errori{margin:4.8px 0;padding-left:19.2px;font-size:13.6px}
.cm-anteprima{border:1px solid var(--fc-sep);border-radius:8px;padding:16px 22.4px;background:var(--fc-card);font-family:Georgia,'Times New Roman',serif;font-size:15.2px;line-height:1.55;max-width:832px}
.cm-anteprima h3{font-size:16px;margin:19.2px 0 6.4px}
.cm-anteprima p{margin:7.2px 0;text-align:justify}
.cm-centro{text-align:center}
.cm-tabella{width:100%;border-collapse:collapse;font-size:13.6px}
.cm-tabella th,.cm-tabella td{border:1px solid var(--fc-sep);padding:4.8px 7.2px;text-align:left;vertical-align:top}
.cm-firme{margin-top:19.2px}
.cm-muto{color:var(--fc-label2)}
.cm-titolo-cfr{margin:16px 0 6.4px;font-size:16px}
.cm-diff{margin:12.8px 0}
.cm-righe{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.8px;border:1px solid var(--fc-sep);border-radius:6px;padding:6.4px 8px;margin:4.8px 0;background:var(--fc-card);white-space:pre-wrap;overflow-wrap:anywhere}
.cm-piu{background:var(--fc-accent-soft)}
.cm-meno{background:var(--fc-danger-soft);text-decoration:line-through}
.cm-uguale{color:var(--fc-label2)}
@media (max-width:760px){.cm-editor{grid-template-columns:1fr}.cm-voci{max-height:224px}.cm-anteprima{padding:12.8px}}
/* ── fine Ditte e contratti ── */
/* Ditte e contratti da telefono (PR 15, Task 3): con la radice a 19 px e le misure in rem le schede in
   testa (Ditte, Società, Modello contratto) erano alte 55 px a 390; in px da computer scendevano a 36, e i
   campi Cerca e Titolare da 33-34 a 31. Bottoni e filtri alti 44 per il dito («Nuova ditta» era già a 36). */
@media screen and (max-width:768px){
  .dt-btn,.dt-filtri input,.dt-filtri select{min-height:44px}
}

/* ── Bottoni dell'area (9a): uno solo per dashboard, Cassa e Modello lavori ──
   .btn (in base.css, era in style.css) è maiuscolo con letter-spacing 2px, e .btn-sm sta a 9,9 px (.btn-xs, 9,6 px con
   !important, è sparita con la 12b): i pannelli dell'area non li usano più. Il Modello lavori ha i suoi nomi
   (.mod-primario, .mod-on, .mod-btn-via, .mod-mini: li scrive cantiere-modello-editor-view.js); prima
   stava in style.css a .65rem, alto 21 px. */
.cn-btn,.cassa-btn,.mod-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:32px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;font-weight:600;line-height:18px;white-space:nowrap;cursor:pointer}
.cn-btn.is-primary,.cassa-btn.is-primary,.mod-btn.mod-primario{border-color:var(--fc-accent-fill);background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.cn-btn.is-danger{border-color:var(--fc-danger);background:var(--fc-card);color:var(--fc-danger)}
/* La riga aperta nell'editor; «Togli» in rosso sul fondo del bottone (era un nome vecchio
   di --fc-danger: stesso colore); le frecce ↑↓ quadrate. */
.mod-btn.mod-on{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-label)}
.mod-btn.mod-btn-via{color:var(--fc-danger)}
.mod-btn.mod-mini{min-width:32px;padding:0 var(--sp-1)}
/* Dopo le varianti: un «Controlla e pubblica» spento è grigio come gli altri (era opacity .5). */
.cn-btn:disabled,.cassa-btn:disabled,.mod-btn:disabled{border-color:var(--fc-sep);background:var(--fc-card);color:var(--fc-label2);cursor:default}
.cn-btn:focus-visible,.cassa-btn:focus-visible,.mod-btn:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}

/* ── Pannello Cantieri: dashboard e semaforo (Fase 3; era style.css e mobile.css, design-09a) ──
   Un solo markup: sotto i 768 px la tabella diventa una scheda per cantiere, ogni cella una riga
   con l'etichetta da data-label (è il CSS a scegliere, non il JavaScript). Il semaforo è
   .semaforo di base.css, pallino più parola; .cn-dot resta la classe che i test contano. */
.cn-toolbar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.cn-titolo{font-size:17px;line-height:22px;font-weight:700;color:var(--fc-label)}
.cn-sotto{margin-top:2px;font-size:12px;line-height:16px;color:var(--fc-label2)}
.cn-azioni{display:flex;align-items:center;gap:var(--sp-2)}
.cn-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-3)}
.cn-stat[data-cn-colore]{cursor:pointer}
.cn-stat[data-cn-attivo="1"]{box-shadow:0 0 0 2px var(--fc-accent)}
.cn-stat .stat-val{font-size:20px}
.cn-stat-rosso{border-color:var(--fc-danger)}
.cn-stat-giallo{border-color:var(--fc-warn-fill)}
.cn-stat-verde{border-color:var(--fc-ok)}
.cn-filtri{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.cn-filtri select,.cn-filtri input{min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px}
.cn-filtri select:focus,.cn-filtri input:focus{border-color:var(--fc-accent);outline:none;box-shadow:0 0 0 3px var(--fc-accent-soft)}
.cn-filtri input{flex:1;min-width:180px}
.cn-stato{padding:var(--sp-5) var(--sp-4);text-align:center;font-size:13px;color:var(--fc-label2)}
.cn-stato-errore{color:var(--fc-danger)}
.cn-tabella-wrap{overflow-x:auto;border:1px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card);color:var(--fc-label)}
.cn-tabella{width:100%;border-collapse:collapse}
.cn-tabella thead{background:var(--fc-bg)}
/* A 1366 la tabella era larga 1138 px in 1061 e «Dettaglio» si vedeva solo scorrendo (prova visiva
   5-ott-2026): le intestazioni vanno a capo (niente nowrap) e stanno in basso. */
.cn-tabella thead th{padding:var(--sp-2) var(--sp-1);border-bottom:1px solid var(--fc-sep);background:var(--fc-bg);color:var(--fc-label2);font-size:11px;line-height:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:normal;vertical-align:bottom}
.cn-tabella thead th.cn-num{text-align:right}
.cn-tabella td{padding:var(--sp-2) var(--sp-1);border-bottom:1px solid var(--fc-sep);font-size:12px;line-height:16px;vertical-align:top}
.cn-tabella td.cn-num{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* "* limite superiore: rate condivise" ereditava nowrap da td.cn-num: tabella 1237 px in 1152 (PR 2b);
   lo stesso "ciclo non avviato" (5-ott). */
.cn-tabella td.cn-num .cn-sub{white-space:normal}
.cn-tabella td.cn-num .cn-muted{white-space:normal}
/* La colonna del bottone resta ferma a destra mentre il resto scorre, così «Dettaglio» si vede a
   ogni larghezza. Da 769: sotto, la tabella è fatta a schede fino a 768 compreso (review della #408). */
@media screen and (min-width:769px){
  .cn-tabella thead th:last-child,.cn-tabella td.cn-det-btn{position:sticky;right:0;z-index:1}
  .cn-tabella td.cn-det-btn{background:var(--fc-card);box-shadow:-1px 0 0 var(--fc-sep)}
}
.cn-riga{border-left:3px solid transparent}
.cn-riga.cn-rosso{border-left-color:var(--fc-danger)}
.cn-riga.cn-giallo{border-left-color:var(--fc-warn-fill)}
.cn-riga.cn-verde{border-left-color:var(--fc-ok)}
.cn-op{font-weight:700;color:var(--fc-accent);text-decoration:none}
.cn-sub{margin-top:2px;font-size:11px;line-height:14px;font-weight:400;color:var(--fc-label2)}
/* Ultimo sopralluogo dentro la cella Lavori (6-ott-2026): staccato dalle date dei lavori. */
.cn-sopr{margin-top:var(--sp-1)}
/* Era #9E9E9E, 2,68:1 sul bianco ("ciclo non avviato", il badge della fonte del budget). */
.cn-muted{font-weight:400;color:var(--fc-label2)}
.cn-warn{color:var(--fc-warn)}
.cn-ok{color:var(--fc-ok)}
.cn-spazio{margin-top:var(--sp-2)}
.cn-val{min-width:0}
.cn-dot{white-space:nowrap}
.cn-dot-sm{gap:var(--sp-1);font-size:12px;font-weight:500}
.cn-dot-sm::before{width:6px;height:6px}
.cn-badge{display:inline-flex;align-items:center;min-height:18px;padding:0 var(--sp-1);border-radius:var(--r-pill);background:var(--fc-bg);color:var(--fc-label);font-size:11px;line-height:14px;font-weight:600;vertical-align:middle}
/* Il badge «scheda» (fonte del budget) è anche .cn-muted: .cn-badge, che viene dopo, gli toglierebbe il grigio. */
.cn-badge.cn-muted{color:var(--fc-label2)}
.cn-badge-ov{margin:0 var(--sp-1);background:var(--fc-info-soft);color:var(--fc-info)}
.cn-det-btn{text-align:right;white-space:nowrap}
.cn-det td{padding:var(--sp-3) var(--sp-4);background:var(--fc-bg);color:var(--fc-label)}
.cn-det-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.cn-det-col{min-width:0}
.cn-det-h{margin-bottom:var(--sp-1);font-size:11px;line-height:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fc-label2)}
.cn-regole{margin:0;padding:0;list-style:none}
.cn-regole li{margin-bottom:var(--sp-1);font-size:13px;line-height:18px}
.cn-fatti{display:grid;grid-template-columns:auto 1fr;gap:2px var(--sp-3);margin:0;font-size:12px;line-height:16px}
.cn-fatti dt{color:var(--fc-label2)}
.cn-fatti dd{margin:0;font-weight:600}
.cn-ov-form{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2);font-size:13px}
.cn-ov-form label{display:flex;flex-direction:column;gap:2px;font-size:12px;font-weight:600;color:var(--fc-label)}
.cn-ov-form select,.cn-ov-form input,.cn-ov-form textarea{min-height:36px;padding:var(--sp-1) var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px}
.cn-ov-form select:focus,.cn-ov-form input:focus,.cn-ov-form textarea:focus{border-color:var(--fc-accent);outline:none;box-shadow:0 0 0 3px var(--fc-accent-soft)}
.cn-ov-btn{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* ── Gantt di tutti i cantieri: la vista «Gantt lavori» della pagina (spec Gantt, parte B, 1-ott-2026;
   era style.css e mobile.css, design-09a). Disegno in js/modules/cantieri-gantt.js: posizioni e
   avanzamento arrivano come variabili CSS (--x, --w, --av). Stesse barre del Gantt della scheda
   (.cgt-*, 9b): baseline sottile sopra, piano col fatto dentro, una riga per cantiere, scala a mesi
   interi. I nomi restano fermi e le barre scorrono di lato quando lo schermo è più stretto della
   traccia (min-width). Colori di main coi nomi nuovi: verde → accento, blu → info. ── */
.cng{--cng-h:34px;--cng-th:22px;display:grid;grid-template-columns:minmax(144px,240px) 1fr;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);overflow:hidden;color:var(--fc-label)}
/* Dopo .cn-sub (è anche .cn-sub): il margine sotto vince sul margin-top della riga. */
.cng-nota{margin:0 0 var(--sp-1)}
.cng-nomi{display:flex;flex-direction:column;border-right:1px solid var(--fc-sep);min-width:0}
.cng-testa{height:var(--cng-th);padding:0 var(--sp-2);display:flex;align-items:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--fc-label2);border-bottom:1px solid var(--fc-sep)}
.cng-nome{height:var(--cng-h);padding:0 var(--sp-2);border:0;border-bottom:1px solid var(--fc-sep);background:transparent;color:var(--fc-label);font:inherit;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;cursor:pointer}
.cng-cod{font-size:12px;line-height:16px;font-weight:800;color:var(--fc-accent)}
.cng-ind{font-size:11px;line-height:14px;color:var(--fc-label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cng-scroll{overflow-x:auto;min-width:0}
/* .cng ha overflow:hidden: l'anello del fuoco sta dentro, se no il bordo sinistro lo taglia. */
.cng-nome:focus-visible,.cng-scroll:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
.cng-tracce{position:relative;min-width:720px}
.cng-mesi{position:relative;height:var(--cng-th);border-bottom:1px solid var(--fc-sep)}
.cng-mese{position:absolute;top:0;bottom:0;left:var(--x);width:var(--w);padding:0 var(--sp-1);display:flex;align-items:center;font-size:11px;color:var(--fc-label2);white-space:nowrap;overflow:hidden}
.cng-linea,.cng-oggi{position:absolute;top:0;bottom:0;left:var(--x)}
.cng-linea{width:1px;background:var(--fc-sep)}
.cng-oggi{width:2px;background:var(--fc-accent);z-index:1}
.cng-riga{position:relative;height:var(--cng-h);border-bottom:1px solid var(--fc-sep);cursor:pointer}
.cng-bl,.cng-piano{position:absolute;left:var(--x);width:var(--w)}
.cng-bl{top:6px;height:3px;background:var(--fc-label3);border-radius:2px}
.cng-piano{top:12px;height:12px;border-radius:3px;background:var(--fc-info-soft);border:1px solid var(--fc-info);overflow:hidden}
.cng-piano::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--av,0%);background:var(--fc-info)}
.cng-rosso .cng-piano{background:var(--fc-danger-soft);border-color:var(--fc-danger)}
.cng-rosso .cng-piano::after{background:var(--fc-danger)}
.cng-slitt{position:absolute;top:11px;left:calc(var(--x) + 4px);font-size:11px;font-weight:700;line-height:14px;color:var(--fc-label2);white-space:nowrap;z-index:2}
.cng-slitt.cng-slitt-sx{left:auto;right:calc(100% - var(--x) + 4px);padding:0 3px;border-radius:3px;background:var(--fc-card)}
.cng-rosso .cng-slitt{color:var(--fc-danger)}
.cng-senza-date{position:absolute;left:var(--sp-2);top:50%;transform:translateY(-50%);font-size:11px;color:var(--fc-label2);font-style:italic;white-space:nowrap}
.cng-legenda{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);padding:var(--sp-1) var(--sp-2);font-size:11px;color:var(--fc-label2);border-top:1px solid var(--fc-sep)}
.cng-leg::before{content:"";display:inline-block;width:14px;height:6px;margin-right:4px;vertical-align:middle;border-radius:2px}
.cng-leg-bl::before{height:3px;background:var(--fc-label3)}
.cng-leg-piano::before{background:var(--fc-info-soft);border:1px solid var(--fc-info)}
.cng-leg-fatto::before{background:var(--fc-info)}
.cng-leg-rosso::before{background:var(--fc-danger)}
.cng-leg-oggi::before{width:2px;height:10px;background:var(--fc-accent)}
.cng-scala{margin-left:auto}
.cng-senza{margin:var(--sp-2) var(--sp-1);font-size:11px;color:var(--fc-label2)}

/* ── Cassa: pagamenti in uscita ed entrate attese (era style.css 53-69, #408 e giro visivo 28-set; design-09a) ──
   I colori delle sezioni sono quelli degli stati (--st-*), solo come filetto a sinistra (--sez):
   come testo non reggono il 4,5:1. Le cifre prendono il colore dal segno (data-level), non dalla sezione.
   .card di style.css aveva #fff scritto a mano: il corpo del pannello dichiara fondo e testo. */
#pan-cassa .card-b{background:var(--fc-card);color:var(--fc-label)}
.cassa-intro{margin-bottom:var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-info-soft);color:var(--fc-label);font-size:12px;line-height:17px}
.cassa-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-bg);color:var(--fc-label)}
/* I campi portano anche .fg: .fg input in coda a base.css (0,1,1; in style.css aveva fondo #F8F8F6 e a fuoco #fff)
   si carica prima di questo file, e le due regole qui sotto, di pari peso, la battono per ordine. */
.cassa-data{margin:0}
.cassa-data label{display:block;margin-bottom:var(--sp-1);font-size:11px;line-height:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fc-label2)}
.cassa-data input{width:auto;min-height:32px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font-size:13px;line-height:18px}
.cassa-data input:focus{border-color:var(--fc-accent);background:var(--fc-card);box-shadow:0 0 0 3px var(--fc-accent-soft)}
/* +30/+60/+90: in un riquadro stretto il terzo va a capo invece di uscire (prova visiva 5-ott-2026). */
.cassa-range{display:flex;flex-wrap:wrap;gap:var(--sp-1);min-width:0}
.cassa-export{margin-left:auto}
/* Totali: cifre in euro interi, non in k€. Con 140 px di minimo a 1024 tre totali su sette uscivano dal
   riquadro (giro visivo 28-set-2026). Cifra e riquadro in px, così non crescono con la radice del telefono:
   "-3.949.400 €" a 20 px sta nei 176. .cassa-totali pesa come .stats-row dei 768 e dei 480 di base.css (erano in style.css)
   e vince perché viene dopo (tests/area-pipeline.test.js). */
.cassa-totali{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-3)}
.cassa-tot{padding:var(--sp-3);border:1px solid var(--fc-sep);border-left:3px solid var(--sez,var(--fc-rail));border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);text-align:left;box-shadow:none}
.cassa-tot .stat-val{font-size:20px;line-height:24px;font-weight:700;white-space:nowrap;color:var(--fc-label)}
.cassa-tot-sub{margin-top:2px;font-size:11px;line-height:14px;color:var(--fc-label2)}
.cassa-sez{margin-bottom:var(--sp-5);padding-left:var(--sp-3);border-left:3px solid var(--sez,var(--fc-rail))}
.cassa-sez[data-sez="proposta"],.cassa-tot[data-sez="proposta"]{--sez:var(--st-proposta)}
.cassa-sez[data-sez="preliminare"],.cassa-tot[data-sez="preliminare"]{--sez:var(--st-preliminare)}
.cassa-sez[data-sez="rogito"],.cassa-tot[data-sez="rogito"]{--sez:var(--st-rogito)}
.cassa-sez[data-sez="imprese"],.cassa-tot[data-sez="imprese"]{--sez:var(--st-cantiere)}
.cassa-sez[data-sez="vendite"],.cassa-tot[data-sez="vendite"],.cassa-sez[data-sez="compromesso"]{--sez:var(--st-in_vendita)}
.cassa-tot[data-sez] .stat-val{color:var(--fc-label)}
.cassa-tot[data-level="ok"] .stat-val{color:var(--fc-ok)}
.cassa-tot[data-level="danger"] .stat-val{color:var(--fc-danger)}
.cassa-sez-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.cassa-sez-titolo{margin:0;font-size:15px;line-height:20px;font-weight:700;color:var(--fc-label)}
.cassa-sez-n{font-size:12px;line-height:16px;color:var(--fc-label2)}
/* A destra, in un gruppo: le stime, il totale e le voci senza importo (3b). */
.cassa-sez-dx{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-left:auto}
.cassa-sez-tot{font-size:15px;line-height:20px;font-weight:700;white-space:nowrap;color:var(--fc-label)}
.cassa-sez-hint{margin-bottom:var(--sp-2);font-size:12px;line-height:16px;color:var(--fc-label2)}
.cassa-sez-tot[data-level="ok"],.cassa-imp[data-level="ok"]{color:var(--fc-ok)}
.cassa-sez-tot[data-level="danger"],.cassa-imp[data-level="danger"]{color:var(--fc-danger)}
/* La tabella scorre dentro il suo riquadro (800 px di minimo, come prima). La testata sta sul fondo della
   card, come .op-tab: il th bianco al 55% che stava in style.css (pensato per la testata nera) non si leggeva. */
.cassa-tab-wrap{overflow-x:auto;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
.cassa-tab-wrap:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
.cassa-tab{width:100%;min-width:800px;border-collapse:collapse;font-size:13px;line-height:18px}
.cassa-thead{background:transparent}
.cassa-th{padding:6px var(--sp-2);text-align:left;font-weight:700;border-bottom:1px solid var(--fc-sep);font-size:11px;line-height:14px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;background:var(--fc-card);color:var(--fc-label2)}
.cassa-th-num{text-align:right}
.cassa-tab td{padding:var(--sp-2);border-bottom:1px solid var(--fc-sep);font-size:13px;line-height:18px;vertical-align:top}
.cassa-tab td.cassa-vuoto{padding:var(--sp-4);text-align:center;color:var(--fc-label2)}
.cassa-riga{cursor:pointer}
/* La riga si apre anche con Invio (data-action="op.open", role="link"): l'anello sta dentro, così il
   riquadro che scorre non lo taglia, e il fondo è quello del passaggio del mouse (3b). */
.cassa-riga:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px;background:var(--fc-bg)}
.cassa-tab td.cassa-quando{font-weight:600;white-space:nowrap}
.cassa-tab td.cassa-op{font-weight:700;white-space:nowrap}
.cassa-tab td.cassa-st{white-space:nowrap}
.cassa-num{text-align:right;white-space:nowrap}
.cassa-imp{font-weight:700;color:var(--fc-label)}
.cassa-tab td.cassa-note{font-size:12px;color:var(--fc-label2)}
.cassa-chip{display:inline-flex;align-items:center;padding:0 var(--sp-1);border-radius:4px;background:var(--fc-fill);color:var(--fc-label);font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.cassa-chip[data-level="warn"]{background:var(--fc-warn-soft);color:var(--fc-warn)}
.cassa-chip[data-level="info"]{background:var(--fc-info-soft);color:var(--fc-info)}
.cassa-chip[data-level="ok"]{background:var(--fc-accent-soft);color:var(--fc-ok)}
.cassa-avviso{display:flex;align-items:flex-start;gap:var(--sp-2);margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-warn-fill);border-radius:var(--rs);background:var(--fc-warn-soft);color:var(--fc-label);font-size:12px;line-height:17px}
.cassa-avviso-testo{flex:1;min-width:0}
.cassa-avviso-elenco{margin:var(--sp-1) 0 0;padding-left:var(--sp-4)}
.cassa-avviso-elenco li{margin:2px 0}
.cassa-avviso .cassa-btn{flex:none}
/* Le note sotto una tabella (IVA dei pagamenti alle imprese, op escluse dalla curva) e il picco (3b). */
.cassa-nota{margin-top:var(--sp-1);font-size:12px;line-height:16px;color:var(--fc-label2)}
.cassa-picco{margin-bottom:var(--sp-2);font-size:13px;line-height:18px;font-weight:700;color:var(--fc-label)}
.cassa-picco[data-level="ok"]{color:var(--fc-ok)}
.cassa-stato{padding:var(--sp-4);text-align:center;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label2);font-size:13px;line-height:18px}
.cassa-stato[data-level="danger"]{color:var(--fc-danger)}
.cassa-grafico{position:relative;height:260px;padding:var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}

/* ── Modello lavori, l'editor dell'Admin (#pan-modelloLavori, js/modules/cantiere-modello-editor*.js;
   era style.css e mobile.css, design-09a) ── */
.mod{margin:var(--sp-2) 0;font-size:13px;line-height:18px;color:var(--fc-label)}
.mod-head{padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
.mod-titolo{font-size:15px;line-height:20px;font-weight:700}
.mod-sub{font-size:12px;font-weight:400;color:var(--fc-label2)}
.mod-muto{margin:2px 0;font-size:12px;color:var(--fc-label2)}
.mod-stato{margin:var(--sp-1) 0 2px}
.mod-stato-bozza{font-weight:600;color:var(--fc-label)}
.mod-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);margin-top:var(--sp-1)}
.mod-avviso{margin:var(--sp-2) 0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-warn);border-radius:var(--rs);background:var(--fc-warn-soft);color:var(--fc-label)}
.mod-avviso-forte{border-color:var(--fc-danger);background:var(--fc-danger-soft);color:var(--fc-label)}
.mod-errori{margin:var(--sp-2) 0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-danger);border-radius:var(--rs);background:var(--fc-danger-soft);color:var(--fc-label)}
.mod-card{margin:var(--sp-2) 0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
.mod-card-tit{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-1);font-weight:700}
.mod-sotto{margin:var(--sp-2) 0 2px;font-weight:600}
.mod-riga{margin:var(--sp-1) 0}
.mod-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2)}
.mod-griglia label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--fc-label)}
.mod-griglia label.mod-check{flex-direction:row;align-items:center;gap:var(--sp-1)}
.mod-scorre{overflow-x:auto}
.mod-tab{width:100%;border-collapse:collapse;font-size:12px;line-height:16px}
.mod-tab th,.mod-tab td{padding:var(--sp-1);border-bottom:1px solid var(--fc-sep);text-align:left;vertical-align:middle}
.mod-tab th{background:var(--fc-bg);color:var(--fc-label2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.mod-tab input[type=text]{width:100%;min-width:96px}
.mod-griglia input:not([type=checkbox]),.mod-tab input:not([type=checkbox]){background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--rs)}
.mod-tab tr.mod-sel td{background:var(--fc-accent-soft);color:var(--fc-label)}
.mod-tab tr.mod-riga-err td:first-child{box-shadow:inset 3px 0 0 var(--fc-danger)}
.mod-frecce,.mod-azioni-riga{white-space:nowrap}
.mod-azioni-riga .mod-btn+.mod-btn{margin-left:var(--sp-1)}
/* Il codice di tre lettere: cifre e lettere della stessa larghezza, senza un font a parte (niente
   font-family nei file di area; era ui-monospace). */
.mod-codice{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.mod-cod{width:58px;text-transform:uppercase;letter-spacing:.04em}
.mod-num{width:72px}
.mod-lista{margin:2px 0;padding:0;list-style:none}
.mod-lista li{padding:2px 0;border-bottom:1px solid var(--fc-sep)}
.mod-lav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}
.mod-lav .mod-largo{flex:1 1 256px}
.mod-prova{padding:0 var(--sp-1);border-radius:var(--r-pill);background:var(--fc-info-soft);color:var(--fc-label);font-size:11px}
.mod-nota{display:flex;flex-direction:column;gap:2px;margin:var(--sp-2) 0 2px;font-size:12px;color:var(--fc-label)}
/* La versione attiva: chip verde chiaro (fix del 1-ott: era --fc-ok pieno col
   testo nero sopra, 4,1:1). Il testo è quello del pannello, ora scritto. */
.mod-attiva{padding:1px var(--sp-1);border-radius:var(--r-pill);background:var(--fc-accent-soft);color:var(--fc-label)}
.mod-sez{margin:var(--sp-2) 0;padding:var(--sp-1) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
.mod-sez summary{font-weight:600;cursor:pointer}

/* ── Tab Cantiere della scheda (#cantTestataRoot e #cantRoot, js/modules/opmodal-cantiere.js; design-09b) ──
   Il vocabolario dei passi (.op-box, .op-chip, .op-azione, .op-hint, .op-vuoto, .op-err, .op-riga) è di
   area-opmodal.css, come le regole delle Fasi 7-11 (bozze, varianti, task, chiusura, gate). Qui la forma
   propria della tab: testata, riquadri, coppie etichetta-valore, rate. Era stile inline nelle costanti S_*. */
.cant-testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.cant-titolo{font-size:15px;line-height:20px;font-weight:700;color:var(--fc-label)}
.cant-card{margin-bottom:var(--sp-3);padding:var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-bg);color:var(--fc-label)}
.cant-kvs{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.cant-kv{flex:0 1 auto;min-width:0}
.cant-kv-v{font-size:13px;line-height:18px;overflow-wrap:anywhere}
.cant-lbl{font-size:11px;line-height:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fc-label2)}
.cant-muto{color:var(--fc-label2);font-style:italic}
.cant-spazio{margin-top:var(--sp-2)}
.cant-a-capo{overflow-wrap:anywhere}
.cant-forte{font-weight:600}
.cant-drive{font-size:13px;font-weight:600;color:var(--fc-accent);text-decoration:none;overflow-wrap:anywhere}
.cant-iva-btn{margin-left:var(--sp-1)}
.cant-agg{padding:var(--sp-2)}
.cant-box{margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
.cant-card-testa,.cant-rata-testa,.cant-rate-testa{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}
.cant-rate-testa{align-items:center;margin-top:var(--sp-3)}
.cant-impresa{min-width:0;font-size:15px;line-height:20px;font-weight:700;overflow-wrap:anywhere}
.cant-chips{gap:var(--sp-1)}
.cant-piccolo{font-size:12px}
.cant-cifra{font-size:15px;line-height:20px;font-weight:700;font-variant-numeric:tabular-nums}
.cant-da-fare{font-size:12px;line-height:16px;color:var(--fc-warn)}
.cant-rata{padding:var(--sp-2) 0;border-top:1px solid var(--fc-sep)}
.cant-rata-t{min-width:0;font-size:13px;line-height:18px;font-weight:600;overflow-wrap:anywhere}
.cant-rata-imp{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-1)}
.cant-avanza{margin-top:var(--sp-2)}

/* ── Computo metrico (#cantComputoRoot, js/modules/cantiere-computo.js; design-09b) ──
   La griglia si aggiorna per pezzi mentre si scrive: .is-ko (cella rifiutata, con aria-invalid e il
   motivo nel title) e .is-esclusa (voce esclusa) li mette e li toglie il JavaScript sul posto,
   senza ricostruire la riga né togliere il fuoco alla cella. Il campo dell'aliquota di default è
   spento mentre la scrittura è in corso: resta sbiadito, come prima. */
.cme{margin-top:var(--sp-3)}
.cme-blocco{margin-top:var(--sp-2)}
.cme-budget{margin-top:0;margin-bottom:var(--sp-2)}
.cme-cifra{font-size:17px;line-height:22px;font-weight:700;font-variant-numeric:tabular-nums}
.cme-fonte{margin-top:var(--sp-1)}
.cme-comandi{margin-bottom:var(--sp-2)}
.cme-fase-box{margin-top:0;margin-bottom:var(--sp-2)}
.cme-voce{min-width:0;padding:var(--sp-2) 0;border-top:1px solid var(--fc-sep)}
.cme-voce.is-esclusa{opacity:.6}
.cme-voce-testa{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-1)}
.cme-codice{min-width:0;font-size:12px;font-weight:700;overflow-wrap:anywhere}
.cme-desc{margin-top:2px;font-size:13px;line-height:18px;overflow-wrap:anywhere}
.cme-motivo{margin-top:2px;font-size:12px;color:var(--fc-label2);overflow-wrap:anywhere}
.cme-celle{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);margin-top:var(--sp-1)}
.cme-cella-l{display:flex;flex:1 1 88px;flex-direction:column;gap:2px;min-width:0}
.cme-cella[readonly]{background:var(--fc-bg);color:var(--fc-label2);cursor:default}
.op-campo.is-ko{border-color:var(--fc-danger);background:var(--fc-danger-soft);color:var(--fc-danger)}
.cme-derivate{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-1)}
.cme-iva-l{display:flex;align-items:center;gap:var(--sp-1);min-width:0}
.cme-iva{width:68px;flex:0 0 auto}
.cme-iva:disabled{opacity:.6;cursor:default}
.cme-fase{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);margin-top:2px;font-size:12px}
.cme-fase-cod{font-weight:600}
.cme-off{margin-top:var(--sp-2)}
.cme-off.is-scartata{opacity:.6}
.cme-off-numeri{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin-top:var(--sp-1);font-size:13px}
.cme-scost{color:var(--fc-label2)}
.cme-scost[data-level="warn"]{font-weight:700;color:var(--fc-warn)}
.cme-off-riga{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);padding:var(--sp-1) 0;border-top:1px solid var(--fc-sep)}
.cme-off-cella{font-size:12px;color:var(--fc-label2)}
.cme-off-cella[data-cmp-migliore]{font-weight:700;color:var(--fc-accent)}

/* ── Misure dei SAL (Fase 6, js/modules/cantiere-misure.js; era style.css e mobile.css, design-09b) ──
   .cmis-riga, .cmis-muto e .cmis-btn li usa anche la tab (opmodal-cantiere.js: totali, rate, lavoro
   fatto). Il bottone spento è grigio come gli altri dell'area (era opacity .5, anche sul verde). */
.cmis-voci,.cmis-rata{margin-top:var(--sp-2);font-size:12px;line-height:18px}
.cmis-riga{margin-top:var(--sp-1);overflow-wrap:anywhere}
.cmis-etichetta{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.cmis-muto{font-style:italic;color:var(--fc-label2)}
.cmis-stima{padding:0 var(--sp-1);border:1px dashed var(--fc-sep);border-radius:var(--r-pill);color:var(--fc-label2)}
.cmis-avviso{margin-top:var(--sp-1);padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-warn-fill);border-radius:var(--rs);background:var(--fc-warn-soft);color:var(--fc-label)}
.cmis-recupero,.cmis-negativo{color:var(--fc-danger)}
.cmis-recupero{padding:0 var(--sp-1);border:1px solid var(--fc-danger);border-radius:var(--r-pill);font-weight:600}
.cmis-extra{padding:0 var(--sp-1);border:1px solid var(--fc-warn-fill);border-radius:var(--r-pill);color:var(--fc-warn)}
.cmis-btn{min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.cmis-btn-go{min-height:44px;border-color:var(--fc-accent-fill);background:var(--fc-accent-fill);color:var(--fc-on-accent);font-weight:700}
.cmis-btn:disabled{border-color:var(--fc-sep);background:var(--fc-card);color:var(--fc-label2);cursor:default}
.cmis-residuo{margin:var(--sp-2) 0;padding:var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font-size:12px}
.cmis-kpi{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4)}
.cmis-kpi-voce{min-width:0}
.cmis-kpi-val{font-size:13px;font-weight:700}
.cmis-pannello{margin:var(--sp-3) 0;padding:var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-bg);color:var(--fc-label);font-size:12px}
.cmis-testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-1)}
.cmis-griglia{margin-top:var(--sp-2)}
.cmis-g-testa,.cmis-g-riga{display:grid;grid-template-columns:2.2fr 1.3fr 1fr 1fr 1fr 1fr;align-items:center;gap:var(--sp-1);padding:var(--sp-1) 0;border-top:1px solid var(--fc-sep)}
.cmis-g-testa{border-top:0;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)}
.cmis-g-voce{overflow-wrap:anywhere}
.cmis-input{width:100%;min-height:36px;padding:var(--sp-1) var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px}
.cmis-totali{margin-top:var(--sp-2);font-weight:600}
.cmis-lista{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-1)}
.cmis-scelta{display:flex;align-items:baseline;gap:var(--sp-1)}

/* ── Programma lavori (Fase 8 e 8b, js/modules/cantiere-planning*.js; era style.css e mobile.css,
   design-09b). La stampa sta in stampa.css (era in style.css fino alla PR 15; misure in pt, !important); il Gantt della
   scheda è la sezione dopo. Era: «finita» col testo nero su --fc-ok (C1), la fonte delle date
   grigia su --fc-fill, 4,16:1 (C2), «Ricalcola programma» bianco su --fc-accent, 2,01:1 in scuro (C3);
   la testata della tabella nera che stava in style.css; testi da 9,3 a 10,4 px. ── */
.prog{margin:var(--sp-2) 0;font-size:13px;line-height:18px;color:var(--fc-label)}
.prog-head{padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
.prog-titolo{font-size:15px;line-height:20px;font-weight:700}
.prog-sub{font-size:12px;font-weight:400;color:var(--fc-label2)}
.prog-kpi{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:var(--sp-1) 0}
.prog-kpi i{font-style:normal;color:var(--fc-label2)}
.prog-azioni{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-1)}
.prog-btn{min-height:28px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-bg);color:var(--fc-label);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.prog-btn.prog-on{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-accent)}
.prog-btn.prog-primario{border-color:var(--fc-accent-fill);background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.prog-btn.prog-btn-piccolo{min-height:24px;padding:0 var(--sp-1);font-size:11px}
.prog-btn.prog-btn-rischio{border-color:var(--fc-danger);color:var(--fc-danger)}
/* Dopo le varianti, stessa specificità: «Crea il programma» e «Aggiungi» (verdi) spenti sono grigi
   come gli altri (era opacity .5 su tutto il bottone). */
.prog-btn:disabled{border-color:var(--fc-sep);background:var(--fc-bg);color:var(--fc-label2);cursor:not-allowed}
.prog-avviso{margin:var(--sp-2) 0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-warn-fill);border-radius:var(--rs);background:var(--fc-warn-soft);color:var(--fc-label)}
.prog-avviso-forte{border-color:var(--fc-danger);background:var(--fc-danger-soft);color:var(--fc-label)}
.prog-anticipo{border-color:var(--fc-info);background:var(--fc-info-soft);color:var(--fc-label)}
.prog-card{margin:var(--sp-2) 0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
.prog-card-tit{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-1);font-weight:700}
.prog-muto{font-size:12px;color:var(--fc-label2)}
.prog-sotto{margin:var(--sp-2) 0 2px;font-weight:600}
.prog-riga{margin:var(--sp-1) 0}
.prog-riga-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-1) var(--sp-3);margin:var(--sp-1) 0}
.prog-riga-form label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--fc-label)}
.prog-riga-form input:not([type=checkbox]){background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--rs)}
.prog-lista{margin:2px 0;padding:0;list-style:none}
.prog-lista li{padding:2px 0;border-bottom:1px solid var(--fc-sep)}
.prog-tab{width:100%;border-collapse:collapse;font-size:12px;line-height:16px}
.prog-tab th,.prog-tab td{padding:2px var(--sp-1);border-bottom:1px solid var(--fc-sep);text-align:left}
.prog-tab thead{background:var(--fc-bg)}
.prog-tab th{background:var(--fc-bg);color:var(--fc-label2);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.prog-elenco tr[data-prog-att]{cursor:pointer}
.prog-crit td:first-child{box-shadow:inset 3px 0 0 var(--fc-danger)}
.prog-annullata td{opacity:.55}
.prog-annullata td:first-child{text-decoration:line-through}
.prog-critica{font-weight:600;color:var(--fc-danger)}
.prog-rit{color:var(--fc-danger)}
.prog-stato{padding:1px var(--sp-1);border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label)}
.prog-stato-in_corso{background:var(--fc-info-soft);color:var(--fc-label)}
.prog-stato-completata{background:var(--fc-accent-soft);color:var(--fc-label)}
.prog-stato-bloccata,.prog-stato-sospesa{background:var(--fc-danger-soft);color:var(--fc-label)}
.prog-fonte{padding:0 var(--sp-1);border-radius:var(--r-pill);background:var(--fc-bg);color:var(--fc-label2);font-size:11px}
.prog-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp-1) var(--sp-3)}
.prog-griglia label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--fc-label)}
.prog-largo{grid-column:1/-1}
.prog-num{width:72px}
.prog-fatta{text-decoration:line-through;color:var(--fc-label2)}
.prog-sez{margin:var(--sp-2) 0;padding:var(--sp-1) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
.prog-sez summary{font-weight:600;cursor:pointer}
.prog-sett-nav{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0}
.prog-sett-att{margin-top:var(--sp-2);cursor:pointer}
/* 8b: attività e legami aggiunti a mano (cantiere-planning-attivita*.js), caselle del varo con attività
   già partite (cantiere-planning-varo.js). */
.prog-agg{padding:0 var(--sp-1);border-radius:var(--r-pill);background:var(--fc-info-soft);color:var(--fc-label);font-size:11px;font-weight:600}
.prog-str-barra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);margin:var(--sp-2) 0}
.prog-str-scelte{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:2px var(--sp-3);max-height:192px;overflow-y:auto;padding:2px var(--sp-1);border:1px solid var(--fc-sep);border-radius:var(--rs)}
.prog-str-scelte label{display:flex;align-items:center;gap:var(--sp-1);font-size:12px}
.prog-str-legame{padding-top:2px;border-top:1px solid var(--fc-sep)}
.prog-prova{font-size:11px;font-style:italic;color:var(--fc-label2)}
.prog-partite{margin:var(--sp-2) 0;padding:var(--sp-1) var(--sp-2);border:1px solid var(--fc-warn-fill);border-radius:var(--rs);background:var(--fc-warn-soft);color:var(--fc-label)}
.prog-partita{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);padding:2px 0;border-bottom:1px solid var(--fc-sep)}
.prog-partita:last-child{border-bottom:0}
.prog-partita label{display:flex;align-items:center;gap:var(--sp-1)}
.prog-partita-att{min-width:192px}

/* ── Gantt della scheda (Fase 8 e 8b, js/modules/cantiere-gantt*.js; era style.css e mobile.css,
   design-09b). Posizioni e avanzamento arrivano come variabili CSS (--x, --w, --av, --cgt-n). La stampa
   del Programma, in stampa.css (era in style.css), usa queste regole e ci aggiunge le sue. Era: la linea
   dell'effettivo in --fc-ink, in scuro #1C1C1E come la card (C4); il codice della riga scelta in
   --fc-label2 su --fc-accent-soft, 4,39:1 in scuro (C5); testi da 8,8 a 9,9 px. ── */
.cgt{--cgt-h:28px;display:grid;grid-template-columns:minmax(128px,208px) 1fr;margin:var(--sp-2) 0;overflow:hidden;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
.cgt-nomi{display:flex;flex-direction:column;border-right:1px solid var(--fc-sep)}
.cgt-nome{height:var(--cgt-h);padding:0 6px;overflow:hidden;border:0;border-bottom:1px solid var(--fc-sep);background:transparent;color:var(--fc-label);font:inherit;font-size:12px;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cgt-nome.cgt-sel{background:var(--fc-accent-soft)}
.cgt-nome.cgt-annullata{opacity:.55;text-decoration:line-through}
.cgt-cod{font-weight:700;color:var(--fc-label2)}
/* --fc-label2 su --fc-accent-soft è 4,39:1 in scuro: sulla riga scelta il codice è testo pieno. */
.cgt-nome.cgt-sel .cgt-cod{color:var(--fc-label)}
.cgt-agg{padding:0 var(--sp-1);border-radius:6px;background:var(--fc-info-soft);color:var(--fc-label);font-size:11px}
.cgt-scroll{overflow-x:auto}
.cgt-tracce{position:relative;min-width:720px;background-image:repeating-linear-gradient(to right,var(--fc-sep) 0,var(--fc-sep) 1px,transparent 1px,transparent var(--sett));background-position:var(--off) 0}
.cgt-riga{position:relative;height:var(--cgt-h);border-bottom:1px solid var(--fc-sep);cursor:pointer}
.cgt-riga.cgt-manuale{background:repeating-linear-gradient(135deg,transparent 0,transparent 6px,var(--fc-fill) 6px,var(--fc-fill) 8px)}
/* Dopo .cgt-manuale, stesso peso: una riga aggiunta a mano e scelta prende il fondo della scelta. */
.cgt-riga.cgt-sel{background:var(--fc-accent-soft)}
.cgt-senza{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:11px;font-style:italic;color:var(--fc-label2)}
.cgt-bl,.cgt-piano,.cgt-eff,.cgt-chiuso,.cgt-oggi{position:absolute;left:var(--x)}
.cgt-bl,.cgt-piano,.cgt-eff,.cgt-chiuso{width:var(--w)}
.cgt-bl{top:3px;height:3px;border-radius:2px;background:var(--fc-label3)}
.cgt-piano{top:8px;height:12px;overflow:hidden;border:1px solid var(--fc-info);border-radius:3px;background:var(--fc-info-soft)}
.cgt-piano::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--av,0%);background:var(--fc-info)}
.cgt-critica .cgt-piano{border-color:var(--fc-danger);background:var(--fc-danger-soft)}
.cgt-critica .cgt-piano::after{background:var(--fc-danger)}
/* Era --fc-ink: in scuro è #1C1C1E come la card, e la linea dell'effettivo spariva. */
.cgt-eff{top:22px;height:3px;border-radius:2px;background:var(--fc-label)}
.cgt-stato-completata .cgt-piano{opacity:.55}
.cgt-stato-annullata .cgt-piano{opacity:.25}
.cgt-chiuso{top:0;bottom:0;background:var(--fc-fill);opacity:.7}
.cgt-oggi{top:0;bottom:0;z-index:1;width:2px;background:var(--fc-accent)}
.cgt-frecce{position:absolute;left:0;top:0;width:100%;height:calc(var(--cgt-n) * var(--cgt-h));overflow:visible;pointer-events:none}
.cgt-frecce path,.cgt-frecce-riga path{fill:none;stroke:var(--fc-label3);stroke-width:1;vector-effect:non-scaling-stroke}
.cgt-frecce path.cgt-freccia-critica,.cgt-frecce-riga path.cgt-freccia-critica{stroke:var(--fc-danger)}
/* Le frecce a fette della stampa (model.frecceRighe): ogni riga mostra la sua fascia del disegno, alta
   quanto la riga col suo bordo, il resto tagliato. */
.cgt-frecce-riga{position:absolute;left:0;top:0;width:100%;height:calc(100% + 1px);pointer-events:none;overflow:hidden}
/* Trascinare le barre (spec Gantt, parte C): solo le righe con data-prog-trascina, che il Gantt disegna
   così solo da computer e per chi scrive il programma. Fantasma ed etichetta li mette e li toglie
   js/modules/cantiere-gantt-trascina.js, posizionati con --x e --w. La maniglia sotto il mouse è nel
   blocco (hover:hover) della 9b, in coda al file. */
.cgt-riga[data-prog-trascina]{user-select:none;-webkit-user-select:none}
.cgt-riga[data-prog-trascina~="sposta"] .cgt-piano{cursor:grab}
.cgt-maniglia{position:absolute;left:calc(var(--x) - 4px);top:6px;width:8px;height:16px;border-radius:2px;cursor:ew-resize;z-index:2}
.cgt-trascina-bordo .cgt-maniglia{background:var(--fc-info);opacity:.45}
.cgt-trascinando.cgt-trascina-sposta,.cgt-trascinando.cgt-trascina-sposta .cgt-piano{cursor:grabbing}
.cgt-trascinando.cgt-trascina-bordo{cursor:ew-resize}
.cgt-fantasma{position:absolute;left:var(--x);width:var(--w);top:8px;height:12px;border:1px dashed var(--fc-accent);border-radius:3px;background:var(--fc-accent-soft);pointer-events:none;z-index:2}
/* L'etichetta a 11 px (era .58rem, 9,28 px): la stima della sua larghezza in cantiere-gantt-trascina.js
   (_serve) è 6 px a carattere, la colonna di quella lunga 240 px. */
.cgt-trascina-et{position:absolute;left:var(--x);top:50%;transform:translateY(-50%);margin-left:4px;margin-top:var(--dy,0px);padding:0 4px;border:1px solid var(--fc-sep);border-radius:4px;background:var(--fc-card);color:var(--fc-label);font-size:11px;white-space:nowrap;pointer-events:none;z-index:3}
.cgt-trascina-et.cgt-trascina-et-sx{margin-left:0;transform:translate(calc(-100% - 4px),-50%)}
.cgt-trascina-et.cgt-trascina-et-lunga{width:240px;white-space:normal;line-height:1.15}
.cgt-legenda{display:flex;flex-wrap:wrap;grid-column:1/-1;gap:var(--sp-3);padding:var(--sp-1) var(--sp-2);border-top:1px solid var(--fc-sep);font-size:11px;color:var(--fc-label2)}
.cgt-leg::before{content:"";display:inline-block;width:14px;height:6px;margin-right:var(--sp-1);border-radius:2px;vertical-align:middle}
.cgt-leg-bl::before{height:3px;background:var(--fc-label3)}
.cgt-leg-piano::before{background:var(--fc-info)}
.cgt-leg-crit::before{background:var(--fc-danger)}
.cgt-leg-eff::before{height:3px;background:var(--fc-label)}
.cgt-scala{margin-left:auto}
.cgt-vuoto{padding:var(--sp-2);color:var(--fc-label2)}

/* ── Passaggio del mouse, tocco, telefono (9a) ── */
@media (hover:hover){
  .cn-btn:not(.is-primary):not(.is-danger):not(:disabled):hover,.cassa-btn:not(.is-primary):not(:disabled):hover,.mod-btn:not(.mod-primario):not(.mod-on):not(:disabled):hover{background:var(--fc-bg)}
  .cn-btn.is-danger:not(:disabled):hover{background:var(--fc-danger-soft)}
  .cn-op:hover{text-decoration:underline}
  /* La cella ferma prende il colore della riga sotto il mouse (tbody tr:hover di base.css, che era in style.css). */
  .cn-tabella tbody tr:hover td.cn-det-btn{background:var(--fc-bg)}
  .cng-riga:hover,.cng-nome:hover{background:var(--fc-accent-soft)}
  .cassa-riga:hover{background:var(--fc-bg)}
}
@media (hover:none){
  .cn-btn,.cassa-btn,.mod-btn{min-height:44px}
}
@media screen and (max-width:768px){
  .cn-toolbar{flex-direction:column}
  .cn-stats{grid-template-columns:repeat(2,1fr)}
  .cn-filtri select,.cn-filtri input{width:100%;min-width:0;min-height:44px;font-size:16px}
  .cn-tabella-wrap{overflow:visible;border:0;background:transparent}
  .cn-tabella,.cn-tabella tbody,.cn-tabella tr,.cn-tabella td{display:block;width:100%}
  .cn-tabella thead{display:none}
  .cn-riga{margin-bottom:var(--sp-2);padding:var(--sp-1) 0;border:1px solid var(--fc-sep);border-left-width:4px;border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)}
  .cn-tabella td{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-1) var(--sp-3);border-bottom:0;font-size:13px;line-height:18px}
  .cn-tabella td .cn-val{flex:1;min-width:0;text-align:right}
  .cn-tabella td .cn-val .cn-sub{text-align:right}
  .cn-tabella td.cn-det-btn .cn-val{text-align:right}
  .cn-tabella td::before{content:attr(data-label);flex-shrink:0;padding-top:2px;font-size:11px;line-height:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fc-label2)}
  .cn-tabella td[data-label=""]::before{content:none}
  .cn-tabella td.cn-num{text-align:right}
  .cn-det-btn{justify-content:flex-end}
  .cn-det{margin:calc(-1 * var(--sp-2)) 0 var(--sp-2)}
  .cn-det td{display:block;padding:var(--sp-3)}
  .cn-det td::before{content:none}
  .cn-det-box{grid-template-columns:1fr;gap:var(--sp-3)}
  .cn-fatti{grid-template-columns:1fr}
  .cn-fatti dt{margin-top:var(--sp-1)}
  .cn-ov-form,.cn-ov-form label{font-size:13px}
  .cn-ov-form select,.cn-ov-form input,.cn-ov-form textarea{min-height:44px;font-size:16px}
  /* Gantt: righe da 44 px per il dito, nomi stretti e fermi, la traccia (720 px) scorre di lato. */
  .cng{--cng-h:44px;grid-template-columns:120px 1fr}
  .cng-bl{top:9px}
  .cng-piano{top:16px;height:16px}
  .cng-slitt{top:17px}
  /* Cassa: campi e bottoni a tutta riga, alti 44 e a 16 px (sotto i 16 iOS ingrandisce la pagina). */
  .cassa-toolbar{align-items:stretch}
  .cassa-data{flex:1 1 140px;min-width:0}
  .cassa-data input{width:100%;min-height:44px;font-size:16px}
  .cassa-range{width:100%}
  .cassa-range .cassa-btn{flex:1}
  .cassa-export{width:100%;margin-left:0}
  /* Modello lavori (era mobile.css, 7-ott): misurato a 375 px, 155 comandi su 155 sotto i 44 px (bottoni
     29-31, frecce 29x29, campi 23, la casella delle durate 35, «Versioni pubblicate» 20). Il pannello
     sta fuori da #opModalBody: le regole generali del telefono non lo toccano. La griglia va a una
     colonna e la descrizione della lavorazione a tutta riga. */
  .mod-griglia{grid-template-columns:1fr}
  .mod-lav .mod-largo{flex-basis:100%}
  #pan-modelloLavori .mod-btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  #pan-modelloLavori input[type="text"],#pan-modelloLavori input[type="number"],#pan-modelloLavori select,#pan-modelloLavori textarea{min-height:44px}
  #pan-modelloLavori label.mod-check{min-height:44px}
  #pan-modelloLavori .mod-sez>summary{min-height:44px;padding:12.35px 0;box-sizing:border-box}
}

/* ── Passaggio del mouse, tocco, telefono (9b) ── */
@media (hover:hover){
  .cant-drive:hover{text-decoration:underline}
  .cgt-maniglia:hover{background:var(--fc-info);opacity:.45}
}
@media (hover:none){
  .prog-btn,.cmis-btn{min-height:44px}
  .prog-btn.prog-btn-piccolo{min-height:44px}
}
@media screen and (max-width:768px){
  .cant-kvs{gap:var(--sp-2) var(--sp-3)}
  .cme-cella-l{flex-basis:120px}
  /* Misure dei SAL: la griglia diventa un blocco per voce (descrizione a tutta riga, il resto a due
     colonne; l'intestazione sparisce, ogni campo ha la sua aria-label). «Soggetta a ritenuta», le voci
     da scegliere per un contratto e il link al contratto su Drive erano alti 18 e 15 px (7-ott, BS127):
     44. Il prefisso #opModalBody è quello che avevano in mobile.css: stessa specificità di prima. */
  .cmis-g-testa{display:none}
  .cmis-g-riga{grid-template-columns:1fr 1fr}
  .cmis-g-voce{grid-column:1 / -1}
  #opModalBody .cmis-scelta{min-height:44px;align-items:center}
  #opModalBody a[data-cant-drive]{min-height:44px;display:inline-flex;align-items:center}
  /* Programma lavori: indicatori in colonna, caselle del varo e form «Aggiungi attività» a una colonna,
     date a tutta riga. Tocchi da 44 px (7-ott, misurati a 375 px): titoli delle sezioni (erano 20 px),
     campi di testo e numero (22), note (40), etichette con la casella dentro (sabato 33, rata del
     ricalcolo, partite del varo): la casella resta quella del sistema, si allarga l'etichetta. La rata
     del ricalcolo è una <label> inline: senza display il min-height non varrebbe. */
  .prog-kpi{flex-direction:column;gap:2px}
  .prog-btn{padding:var(--sp-2) var(--sp-3)}
  .prog-partita{flex-direction:column;align-items:flex-start}
  .prog-partita input[type="date"]{width:100%}
  .prog-str-scelte{grid-template-columns:1fr;max-height:266px}
  .prog-str-scelte label{min-height:44px}
  .prog-sez summary{min-height:44px;padding:12.35px 0;box-sizing:border-box}
  #cantProgrammaRoot input[type="text"],#cantProgrammaRoot input[type="number"],#cantProgrammaRoot textarea{min-height:44px}
  .prog-riga-form label,.prog-partita label{min-height:44px}
  .prog-lista label{display:flex;align-items:center;gap:var(--sp-1);min-height:44px}
  /* Gantt della scheda: righe da 44 px (barre, fantasma e maniglia scendono con loro), nomi a 133 px
     (erano 7rem con la radice a 19 px). */
  .cgt{--cgt-h:44px;grid-template-columns:133px 1fr}
  .cgt-piano,.cgt-fantasma{top:14px;height:16px}
  .cgt-maniglia{top:12px;height:20px}
  .cgt-eff{top:34px}
}