/* I COLORI DI QUADRA, IN UN POSTO SOLO.
   ‼‼ 31/08/2026 — questi token vivevano dentro `index.html`, e `mobile.html` li
   USAVA senza che nessuno li definisse: 15 `var(--pk-...)` che sul telefono non
   valevano niente. La testata blu diventava trasparente e tutto quello che ci
   stava sopra in bianco spariva sul bianco — i due tasti icona invisibili e
   l'«Esci» rosa della foto di Andrea. Cambiare un fondo cambia tutti gli
   inchiostri sopra: se il fondo sparisce, spariscono anche loro.
   ⭐ Ora il file è uno e lo caricano tutte e due le pagine. Un colore aggiunto
   qui arriva da solo anche sul telefono, tema scuro compreso. */
:root{
  --pk-tela:#eef1f6;      /* la tela sotto tutto, col suo reticolo */
  --pk-tela-filo:#e7ebf3; /* la riga del reticolo, passo 26px      */
  --pk-ghiaccio:#faf9f8;  /* superficie tenue: caselle, fondi soffici */
  --pk-scheda:#ffffff;    /* la superficie di una scheda    */
  --pk-filo:#e1dfdd;      /* le separazioni                 */
  --pk-ink:#201f1e;       /* testo primario                 */
  --pk-ink2:#605e5c;      /* testo secondario               */
  --pk-spento:#6f6d6b;    /* testo tenue — 15/09/2026 Andrea «scurisci»: da #a19f9d (2,6:1) a 4,9:1 sul ghiaccio */
  --pk-blu:#273785;       /* azione, attivo, collegamento   */
  --pk-rosso:#a4262c;     /* errore, in ritardo             */
  --pk-rosso-critico:#e21c2b; --pk-rosso-critico-testo:#d01926; /* 03/10/2026 Andrea: SOLO gli stati critici nella riga sopra le tabelle (PkRigaTabella) */
  /* 31/10/2026 Andrea: «controlla il contrasto (WCAG AA 4,5:1) di badge e testi su sfondo ghiaccio, in particolare il rosso #e21c2b
     su grigio chiaro, e correggi solo quelli che non passano, senza cambiare la palette». #e21c2b come TESTO sta a 4,46:1 sul
     ghiaccio, 4,30 sulla tela, 4,35 sul fondo pericolo, 3,93 sul badge: non passa. Il testo rosso usa --pk-rosso-critico-testo,
     cioè #d01926 — lo stesso rosso critico che la tavola chiara usa già (18/10): 4,53-5,46:1 su tutti i fondi chiari.
     Pallini, bordi e riempimenti restano #e21c2b (non sono testo). Al buio è lo stesso valore del rosso critico. */
  --pk-verde:#107c10;     /* fatto, in regola               */
  /* ‼‼ 16/09/2026 (grafica B7) — L'AMBRA ERA SOTTO SOGLIA DI POCO, IN 157 PUNTI.
     Misurato col controllo dei contrasti su 397 superfici, tema CHIARO — che fino a
     oggi non era mai stato passato al setaccio: i giri di agosto guardavano solo il
     buio, perche' il buio era la novita'. #a86a00 dava 4,44:1 sul bianco e 4,23:1 sul
     ghiaccio: sotto 4,5 tutte e due, di un soffio. Un soffio moltiplicato per 157
     scritte — ogni «⚠ 3 rate non dicono quando si paga», ogni conteggio ambra, ogni
     riga «da controllare».
     ⭐ Un colore, non 157 scritte: e' tutto il motivo per cui questi valori stanno in
       un file solo. #8f5a00 → bianco 5,78 · ghiaccio 5,50 · tela 5,11: margine vero, e
       a occhio e' lo stesso ambra, appena piu' fondo.
     ⚠️ Cambia anche `-pieno`, perche' erano LO STESSO NUMERO e lo restano: il bianco
       sopra passa da 4,44 (sotto soglia pure lui, su una pastiglia piena) a 5,78.
     ⚠️ E un token NON puo' risolvere tutto: dopo questo cambio restavano 3 scritte
       sotto soglia, ed erano di un'altra natura — un inchiostro colorato su un FONDO
       GRIGIO (`--pk-filo`, #e1dfdd), dove non e' il colore del testo a essere
       sbagliato, e' l'accoppiata. Li' la cura e' la pastiglia di stato
       (`--pk-stato-*`), che ha la sua terna fondo/testo/filo gia' misurata in tutti e
       due i temi: corretto al punto di chiamata (le quattro pastiglie del livello in
       views-personale.jsx). Dopo, il setaccio e' a ZERO su 397 superfici. */
  --pk-ambra:#8f5a00;     /* attenzione                     */
  /* i pieni: fondo di un bottone colorato, e il testo che ci sta sopra */
  --pk-blu-pieno:#273785; --pk-rosso-pieno:#a4262c; --pk-verde-pieno:#107c10;
  --pk-ambra-pieno:#8f5a00;
  --pk-su-pieno:#ffffff;
  /* i TENUI: il fondo di un avviso. Nel chiaro sono bianchi appena sporcati; nel
     buio NON schiariscono, si tingono — un fondo scuro e colorato. Se nel buio si
     schiarissero, l'avviso diventerebbe la cosa piu' luminosa della schermata e
     mangerebbe l'attenzione che serve altrove. */
  --pk-blu-tenue:#f5f7fd; --pk-rosso-tenue:#fdf3f4;
  --pk-verde-tenue:#f3f9f1; --pk-ambra-tenue:#fff8f0;
  --pk-blu-cupo:#172150;   /* i numeri grossi dei cruscotti: piu' fondo del blu azione */
  /* ‼ 15/09/2026 (grafica A5) — IL FILO E IL TESTO DI UN AVVISO. Gli avvisi ambra, verdi,
     azzurri e rossi avevano il filo e il testo scritti a mano (#f0d9b8, #8a5a00, #cfe6cf...):
     il fondo `-tenue` diventava scuro al buio, il testo marrone restava marrone e si leggeva
     a meno di 3:1. Ora vanno in coppia col fondo, come i `-pieno` con `--pk-su-pieno`. */
  --pk-ambra-testo:#8a5a00; --pk-ambra-filo:#f0d9b8; --pk-verde-filo:#cfe6cf;
  --pk-blu-filo:#cfd8ec;    --pk-rosso-filo:#e9b7ba;
  /* la cornice: barra laterale e barra in alto, col loro reticolo */
  --pk-barra:#eef1f6; --pk-barra-filo:#e7ebf3; --pk-filo-barra:#cdd4e4;
  --pk-badge:#dde3f0; --pk-spento-barra:#8a93a8;
  /* ⭐ 15/09/2026 (grafica B2) — LA PASTIGLIA DELLO STATO (`PkStato`, index.html). Sei toni,
     ognuno una TERNA fondo/testo/filo come i `-pieno` con `--pk-su-pieno`: il fondo quasi
     non si stacca dalla scheda (1,1:1), a disegnare la forma e' il filo; il testo e' misurato
     sul SUO fondo — chiaro 6,4÷9,5:1, buio 7,8÷10:1 (scratchpad contrasto.js). */
  --pk-stato-neutro-fondo:#f3f2f1;     --pk-stato-neutro-testo:#484644;     --pk-stato-neutro-filo:#e1dfdd;
  --pk-stato-info-fondo:#eef2fc;       --pk-stato-info-testo:#273785;       --pk-stato-info-filo:#cfd8ec;
  --pk-stato-successo-fondo:#f1faf1;   --pk-stato-successo-testo:#0b6a0b;   --pk-stato-successo-filo:#bfe3bf;
  --pk-stato-attenzione-fondo:#fff6e5; --pk-stato-attenzione-testo:#7a4f00; --pk-stato-attenzione-filo:#f0d9b8;
  --pk-stato-pericolo-fondo:#fdf3f4;   --pk-stato-pericolo-testo:#a4262c;   --pk-stato-pericolo-filo:#eeb9bd;
  --pk-stato-speciale-fondo:#f5f1fb;   --pk-stato-speciale-testo:#5b2d8e;   --pk-stato-speciale-filo:#dccdf0;
  /* ⭐ 16/09/2026 (grafica B4) — LO SCHELETRO DEL CARICAMENTO. `.pk-skel` dipingeva un
     gradiente fatto di TRE VOLTE `--pk-tela`: tre volte lo stesso colore non e' un
     gradiente, e infatti il luccichio non si vedeva — e sul fondo bianco di una scheda
     `--pk-tela` (#eef1f6) e' quasi invisibile. Servono DUE colori dichiarati: il corpo
     del blocco e la luce che ci passa sopra. Misurati sul fondo scheda: chiaro il corpo
     si stacca di 1,12:1 dal bianco (si vede senza gridare), buio 1,35:1 dal #0F1730. */
  --pk-skel-corpo:#e4e6ec;
  --pk-skel-luce:rgba(255,255,255,.72);
  /* ⭐ 03/10/2026 — «colori tutti uguali». LE OMBRE E I VELI. L'ombra della scheda era copiata a mano
     ~30 volte (`0 1px 2px rgba(32,31,30,.04), 0 10px 28px rgba(32,31,30,.05)`), le altre ombre e i
     veli dietro le finestre avevano ~15 valori diversi (rgba(15,23,42,.45) · (0,0,0,.42) · (28,25,23,.5)…).
     Nel buio un'ombra grigio-caldo al 5% su un fondo notte non si vede, e un velo blu-notte al 45%
     sopra una pagina gia' scura non stacca la finestra: qui sotto il buio ha i suoi.
     --pk-ombra-scheda e' un'ombra INTERA (si usa da sola: boxShadow:"var(--pk-ombra-scheda)");
     --pk-ombra-tenue / -forte sono il COLORE di un'ombra («0 1px 2px var(--pk-ombra-tenue)»);
     --pk-velo e' il fondo dietro una finestra modale. */
  --pk-ombra-scheda:0 1px 2px rgba(32,31,30,.04), 0 10px 28px rgba(32,31,30,.05);
  --pk-ombra-tenue:rgba(22,27,43,.07);
  --pk-ombra-forte:rgba(20,32,43,.24);
  --pk-velo:rgba(15,23,42,.5);
}
html[data-tema="buio"]{
  color-scheme:dark;
  --pk-tela:#080C1B;
  --pk-tela-filo:#161D3C;
  --pk-ghiaccio:#131C36;
  --pk-scheda:#0F1730;
  --pk-filo:#212A4E;
  /* ‼‼ 31/08/2026 — Andrea: «tema scuro da rivedere in profondità: testi leggermente
     più chiari se no faccio difficoltà a leggerli». MISURATO sul fondo scheda (#0F1730)
     prima di toccare:
        --pk-ink    14,96:1   gia' altissimo
        --pk-ink2    7,65:1   sopra soglia ma faticoso a lungo
        --pk-spento  2,41:1   ‼ SOTTO 3, cioe' fuori norma
     ⭐ Il colpevole vero era `--pk-spento`, non l'inchiostro principale: e' il colore
     dei trattini «—», dei suggerimenti e dei valori assenti, che in una tabella sono
     meta' della pagina. Su un fondo notte 2,41:1 non e' «tenue», e' illeggibile.
     ▶️ Adesso: ink 16,07 · ink2 10,11 · spento 4,73 — tutti e tre misurati, non
     scelti a occhio, e spento passa la soglia con margine. */
  --pk-ink:#F0F4FC;
  --pk-ink2:#B8C4DE;
  /* ⭐ 15/09/2026 (grafica A5) — #7683AB stava a 4,73 sulla scheda ma a 4,49 sul ghiaccio e
     4,0 sul badge: la misura su tutte le schermate l'ha trovato 17 volte. #8290B8: 5,59
     scheda · 5,32 ghiaccio · 4,73 badge, e resta sotto ink2 (10,1). */
  --pk-spento:#8290B8;
  --pk-blu:#8CA2FF;
  --pk-rosso:#FF6B71;
  --pk-rosso-critico:#FF5A64; --pk-rosso-critico-testo:#FF5A64; /* 17/10/2026: #e21c2b al buio stava a 3,7:1 sulla scheda; questo 5,8 */
  --pk-verde:#4ADE80;
  --pk-ambra:#E8AC26;
  --pk-blu-pieno:#3A50C0; --pk-rosso-pieno:#B3323B; --pk-verde-pieno:#1B7A2B;
  --pk-ambra-pieno:#8A5A11;
  --pk-su-pieno:#ffffff;
  --pk-blu-tenue:#16224A; --pk-rosso-tenue:#33161C;
  --pk-verde-tenue:#12291B; --pk-ambra-tenue:#2E2311;
  --pk-blu-cupo:#C3CEFF;
  --pk-ambra-testo:#F2C66D; --pk-ambra-filo:#5A4520; --pk-verde-filo:#24502F;
  --pk-blu-filo:#2E3D78;    --pk-rosso-filo:#7A3540;
  --pk-barra:#0C1226; --pk-barra-filo:#161D3C; --pk-filo-barra:#212A4E;
  --pk-badge:#1B2547; --pk-spento-barra:#4A5578;
  --pk-stato-neutro-fondo:#1B2547;     --pk-stato-neutro-testo:#C9D2E8;     --pk-stato-neutro-filo:#2E3A62;
  --pk-stato-info-fondo:#16224A;       --pk-stato-info-testo:#A9BAFF;       --pk-stato-info-filo:#2E3D78;
  --pk-stato-successo-fondo:#12291B;   --pk-stato-successo-testo:#6EE7A0;   --pk-stato-successo-filo:#24502F;
  --pk-stato-attenzione-fondo:#2E2311; --pk-stato-attenzione-testo:#F2C66D; --pk-stato-attenzione-filo:#5A4520;
  --pk-stato-pericolo-fondo:#3A1820;   --pk-stato-pericolo-testo:#FF9A9F;   --pk-stato-pericolo-filo:#7A3540;
  --pk-stato-speciale-fondo:#2A1C4A;   --pk-stato-speciale-testo:#D2BCFF;   --pk-stato-speciale-filo:#4B3A7A;
  --pk-skel-corpo:#1D2748;
  --pk-skel-luce:rgba(255,255,255,.07);
  --pk-ombra-scheda:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.25);
  --pk-ombra-tenue:rgba(0,0,0,.3);
  --pk-ombra-forte:rgba(0,0,0,.6);
  --pk-velo:rgba(2,5,15,.72);
}
/* ⭐ 29/08/2026 — L'ISOLA CHIARA. Andrea: «cruscotto Sinapsi mi piace con sfondo
   chiaro», e c'e' una ragione oltre al gusto: le linee fra i nodi sono disegnate
   su un <canvas>, in JavaScript. Nessun foglio di stile ci arriva. Ridipingere la
   cornice attorno a un disegno che resta com'e' vuol dire cambiare la parete e
   lasciare appesa la vecchia fotografia.
   ⭐⭐ E si fa senza una riga di eccezioni: dentro questo riquadro si RIDEFINISCONO
   le variabili sui valori del chiaro. Tutto quello che sta dentro — schede, testi,
   fili, anche cose scritte da altri domani — torna chiaro da solo, perche' le
   variabili CSS scendono lungo l'albero. E' tutto il motivo per cui il tema si fa
   con i token e non con le regole. */
html[data-tema="buio"] .pk-isola-chiara{
  --pk-tela:#eef1f6; --pk-tela-filo:#e7ebf3; --pk-ghiaccio:#faf9f8;
  --pk-scheda:#ffffff; --pk-filo:#e1dfdd;
  --pk-ink:#201f1e; --pk-ink2:#605e5c; --pk-spento:#6f6d6b;
  --pk-blu:#273785; --pk-rosso:#a4262c; --pk-verde:#107c10; --pk-ambra:#8f5a00; --pk-rosso-critico:#e21c2b; --pk-rosso-critico-testo:#d01926;
  --pk-blu-pieno:#273785; --pk-rosso-pieno:#a4262c; --pk-verde-pieno:#107c10;
  --pk-ambra-pieno:#8f5a00; --pk-su-pieno:#ffffff;
  --pk-blu-tenue:#f5f7fd; --pk-rosso-tenue:#fdf3f4;
  --pk-verde-tenue:#f3f9f1; --pk-ambra-tenue:#fff8f0; --pk-blu-cupo:#172150;
  --pk-ambra-testo:#8a5a00; --pk-ambra-filo:#f0d9b8; --pk-verde-filo:#cfe6cf;
  --pk-blu-filo:#cfd8ec;    --pk-rosso-filo:#e9b7ba;
  --pk-stato-neutro-fondo:#f3f2f1;     --pk-stato-neutro-testo:#484644;     --pk-stato-neutro-filo:#e1dfdd;
  --pk-stato-info-fondo:#eef2fc;       --pk-stato-info-testo:#273785;       --pk-stato-info-filo:#cfd8ec;
  --pk-stato-successo-fondo:#f1faf1;   --pk-stato-successo-testo:#0b6a0b;   --pk-stato-successo-filo:#bfe3bf;
  --pk-stato-attenzione-fondo:#fff6e5; --pk-stato-attenzione-testo:#7a4f00; --pk-stato-attenzione-filo:#f0d9b8;
  --pk-stato-pericolo-fondo:#fdf3f4;   --pk-stato-pericolo-testo:#a4262c;   --pk-stato-pericolo-filo:#eeb9bd;
  --pk-stato-speciale-fondo:#f5f1fb;   --pk-stato-speciale-testo:#5b2d8e;   --pk-stato-speciale-filo:#dccdf0;
  --pk-skel-corpo:#e4e6ec;  --pk-skel-luce:rgba(255,255,255,.72);
  --pk-ombra-scheda:0 1px 2px rgba(32,31,30,.04), 0 10px 28px rgba(32,31,30,.05);
  --pk-ombra-tenue:rgba(22,27,43,.07); --pk-ombra-forte:rgba(20,32,43,.24); --pk-velo:rgba(15,23,42,.5);
}
/* ═══════════════════════════════════════════════════════════════════════════
   ⭐ 16/09/2026 (grafica B9) — UNA TAVOLOZZA SOLA PER I GRAFICI.
   Prima ogni grafico si sceglieva i colori da se': il fatturato del CdG in blu,
   quello delle Fatture in «blu pieno», le entrate della Tesoreria in VERDE di stato,
   il confronto anni con due volte lo stesso blu nella stessa legenda, e le righe
   della griglia disegnate con `--pk-su-pieno` — bianco su bianco nel chiaro (non si
   vedevano), bianco su notte nel buio (erano la cosa piu' accesa del disegno).
   ⭐ Qui stanno i colori, `app-grafici.js` (PK_GRAFICI) li distribuisce, e la guardia
     `scripts/grafici-a-token.js` impedisce che un grafico convertito torni al codice
     esadecimale.
   MISURATO, non scelto a occhio (validatore della skill dataviz, OKLab ×100, CVD
   Machado 2009) contro il fondo scheda VERO:
     chiaro su #ffffff — fascia L, croma, CVD adiacenti peggiore 9,0 (verde acqua ↔
       arancio, protan), vista normale peggiore 18,2, tutti gli 8 ≥ 3:1
       (blu 5,42 · arancio 3,91 · verde acqua 4,47); i primi 3 passano anche a
       coppie TUTTE (CVD 9,0 · normale 22,0).
     buio su #0F1730 — CVD adiacenti peggiore 10,2, normale 18,0, tutti ≥ 3:1 anche
       sul ghiaccio #131C36; i primi 3 a coppie tutte: CVD 10,2 · normale 21,1.
   ‼ L'ORDINE E' IL MECCANISMO, non un gusto: si assegna 1,2,3… e non si salta.
     Oltre l'ottava serie non si inventa un colore: si raggruppa in «Altre».
   ‼ I colori di STATO (--pk-verde/rosso/ambra) restano allo stato (aperta/chiusa,
     zona rossa, obiettivo raggiunto): una serie non li usa mai. Per questo le
     entrate non sono piu' «verde di stato» ma verde acqua (serie 3), le uscite
     arancio (serie 2): si leggono lo stesso «dentro/fuori», e non si confondono con
     un semaforo.
   ⚠️ Valori SCRITTI anche nell'isola chiara, non `var()`: un `var()` dichiarato su
     :root si risolve su :root, e dentro l'isola resterebbe il valore del buio.
     Gli ALIAS semantici invece sono `var()` apposta, e la regola vale su :root E
     sull'isola: cosi' si risolvono sull'elemento giusto. */
:root{
  /* serie categoriali — ordine fisso */
  --pk-graf-1:#2f63d6; --pk-graf-2:#d9581f; --pk-graf-3:#12876a; --pk-graf-4:#b07800;
  --pk-graf-5:#c74a80; --pk-graf-6:#6a4fc9; --pk-graf-7:#5f7d0f; --pk-graf-8:#0f7fa3;
  /* sequenziale (un tono, chiaro → scuro). Per una scala ORDINALE (fasce, tappe)
     si parte dal gradino 2: il 1 si confonde col fondo (1,6:1), dal 2 in su ≥ 2,3:1. */
  --pk-graf-seq-1:#dbe6fb; --pk-graf-seq-2:#86aaee; --pk-graf-seq-3:#5a88e3;
  --pk-graf-seq-4:#2f63d6; --pk-graf-seq-5:#224ca8; --pk-graf-seq-6:#16357a;
  /* divergente (scostamenti, margini): rosso = sotto, grigio = zero, blu = sopra.
     Blu e non verde: rosso↔verde e' la coppia che un daltonico non separa. */
  --pk-graf-div-neg-3:#b3262f; --pk-graf-div-neg-2:#d9636a; --pk-graf-div-neg-1:#f0b1b4;
  --pk-graf-div-zero:#e4e2df;
  --pk-graf-div-pos-1:#a9c1f2; --pk-graf-div-pos-2:#5a86e0; --pk-graf-div-pos-3:#1f4fb8;
  /* la cornice: tutto recessivo, tranne le scritte che devono leggersi (≥ 4,5:1) */
  --pk-graf-griglia:#ebe9e6;      /* 1,21:1 — si vede senza disegnare */
  --pk-graf-asse:#c8c6c4;         /* linea di base / dello zero, 1,70:1 */
  --pk-graf-testo:#605e5c;        /* tacche e nomi: 6,46:1 scheda · 6,14:1 ghiaccio */
  --pk-graf-riferimento:#8a8886;  /* obiettivo, budget, OGGI: 3,53:1, tratteggiata */
  --pk-graf-anello:#ffffff;       /* l'anello attorno ai punti = il fondo scheda */
  --pk-graf-tip-fondo:#201f1e; --pk-graf-tip-testo:#ffffff;   /* 16,5:1 */
}
html[data-tema="buio"]{
  --pk-graf-1:#4f86f0; --pk-graf-2:#e8692e; --pk-graf-3:#1f9e7c; --pk-graf-4:#b98200;
  --pk-graf-5:#dc5e94; --pk-graf-6:#8a73ea; --pk-graf-7:#6f9420; --pk-graf-8:#1f95bd;
  /* nel buio lo «zero» e' scuro e la grandezza SCHIARISCE */
  --pk-graf-seq-1:#1c2b57; --pk-graf-seq-2:#2f55a8; --pk-graf-seq-3:#4274d6;
  --pk-graf-seq-4:#6594ee; --pk-graf-seq-5:#93b5f6; --pk-graf-seq-6:#c3d5fb;
  --pk-graf-div-neg-3:#f07178; --pk-graf-div-neg-2:#b8484f; --pk-graf-div-neg-1:#6a2a33;
  --pk-graf-div-zero:#2c3553;
  --pk-graf-div-pos-1:#2e4a8c; --pk-graf-div-pos-2:#4a78d8; --pk-graf-div-pos-3:#8fb0ff;
  --pk-graf-griglia:#1f2947;      /* 1,24:1 sul #0F1730 */
  --pk-graf-asse:#36416a;         /* 1,79:1 */
  --pk-graf-testo:#B8C4DE;        /* 10,1:1 scheda · 9,6:1 ghiaccio */
  --pk-graf-riferimento:#5d6a92;  /* 3,33:1 */
  --pk-graf-anello:#0F1730;
  --pk-graf-tip-fondo:#F0F4FC; --pk-graf-tip-testo:#0F1730;   /* 16,1:1 */
}
html[data-tema="buio"] .pk-isola-chiara{
  --pk-graf-1:#2f63d6; --pk-graf-2:#d9581f; --pk-graf-3:#12876a; --pk-graf-4:#b07800;
  --pk-graf-5:#c74a80; --pk-graf-6:#6a4fc9; --pk-graf-7:#5f7d0f; --pk-graf-8:#0f7fa3;
  --pk-graf-seq-1:#dbe6fb; --pk-graf-seq-2:#86aaee; --pk-graf-seq-3:#5a88e3;
  --pk-graf-seq-4:#2f63d6; --pk-graf-seq-5:#224ca8; --pk-graf-seq-6:#16357a;
  --pk-graf-div-neg-3:#b3262f; --pk-graf-div-neg-2:#d9636a; --pk-graf-div-neg-1:#f0b1b4;
  --pk-graf-div-zero:#e4e2df;
  --pk-graf-div-pos-1:#a9c1f2; --pk-graf-div-pos-2:#5a86e0; --pk-graf-div-pos-3:#1f4fb8;
  --pk-graf-griglia:#ebe9e6; --pk-graf-asse:#c8c6c4; --pk-graf-testo:#605e5c;
  --pk-graf-riferimento:#8a8886; --pk-graf-anello:#ffffff;
  --pk-graf-tip-fondo:#201f1e; --pk-graf-tip-testo:#ffffff;
}
/* IL SIGNIFICATO — un colore per una cosa, in TUTTA Quadra:
   entrate/ricavi/fatturato = serie 3 · uscite/costi = serie 2 ·
   saldo/consuntivo/valore = serie 1 · la PREVISIONE e' lo stesso colore del
   consuntivo, tratteggiato (lo dice PK_GRAFICI.tratteggio) · budget/obiettivo =
   la linea di riferimento neutra. */
:root, .pk-isola-chiara{
  --pk-graf-entrate:var(--pk-graf-3);
  --pk-graf-uscite:var(--pk-graf-2);
  --pk-graf-consuntivo:var(--pk-graf-1);
  --pk-graf-negativo:var(--pk-graf-div-neg-3);
  --pk-graf-positivo:var(--pk-graf-div-pos-3);
}
/* ═══════════════════════════════════════════════════════════════════════════
   ⭐ 26/09/2026 — LO STILE NUOVO (in prova, per persona: `html[data-stile="nuovo"]`,
   lo accende il tasto «Stile» accanto al tema — app-tema.js). Andrea: «fai tutti i
   punti», dopo la pagina di prova.
     1. un carattere solo: IBM Plex Sans (e Plex Mono per codici e numeri di documento),
        ospitato in /lib/fonts/plex, non su Google;
     2. angoli morbidi e ombre leggere al posto del filo grigio intorno alle schede;
     3. grigi FREDDI intonati al blu PromeK (quelli di oggi sono caldi, alla Microsoft);
     4. il buio aggiornato: lo stesso blu notte, un gradino piu' su, fili piu' visibili;
     5. le tessere dei numeri con l'andamento (views-plancia.jsx).
   ‼ Questi token DEFAULT hanno il valore di oggi: chi non accende lo stile nuovo non
     vede cambiare niente, nemmeno un pixel. I colori del nuovo stanno solo qui sotto.
   MISURATO (contrasto WCAG, scheda · ghiaccio · tela):
     chiaro  ink 17,1 · 16,1 · 15,6   ink2 6,7 · 6,3 · 6,1   spento 5,6 · 5,3 · 5,1
     buio    ink 15,4 · 14,4 · 17,0   ink2 9,6 · 9,0 · 10,6  spento 6,0 · 5,6 · 6,6
             blu 8,0 · 7,5 · 8,8      ambra 8,5 · rosso 6,9 · verde 10,3 (sulla scheda) */
:root{
  /* 02/10/2026 — UN CARATTERE SOLO, IBM Plex Sans, anche nello stile «attuale». Andrea, dall'iPad: «caratteri tutti diversi»,
     poi «Segoe UI non dovrebbe piu' esserci su Quadra». Segoe esiste solo su Windows: altrove ogni parte ripiegava su un
     carattere suo (Selawik, Helvetica, quello di sistema). Plex e' ospitato da Quadra (lib/fonts/plex): uguale ovunque. */
  --pk-font:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --pk-mono:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --pk-raggio:4px;          /* schede */
  --pk-raggio-ctl:4px;      /* bottoni e campi */
  --pk-ombra:none;
  --pk-bordo-scheda:1px solid var(--pk-filo);
  --pk-th-maiuscolo:uppercase;
}
html[data-stile="nuovo"]{
  --pk-font:'IBM Plex Sans',system-ui,-apple-system,'IBM Plex Sans',sans-serif;
  --pk-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --pk-raggio:12px;
  --pk-raggio-ctl:8px;
  --pk-ombra:0 1px 2px rgba(22,27,43,.06),0 2px 8px rgba(22,27,43,.04);
  --pk-bordo-scheda:1px solid rgba(22,27,43,.07);
  --pk-th-maiuscolo:none;
}
html[data-stile="nuovo"]:not([data-tema="buio"]){
  --pk-tela:#f2f4f8; --pk-tela-filo:#eaedf3; --pk-ghiaccio:#f7f8fb; --pk-scheda:#ffffff;
  --pk-filo:#e2e6ee; --pk-ink:#161b2b; --pk-ink2:#535c72; --pk-spento:#5f6780;
  --pk-blu-tenue:#eef1fb;
  --pk-barra:#ffffff; --pk-barra-filo:#eef1f6; --pk-filo-barra:#e2e6ee;
  --pk-badge:#e6eaf3; --pk-spento-barra:#7c859c;
  --pk-stato-neutro-fondo:#f1f3f7; --pk-stato-neutro-testo:#3f4659; --pk-stato-neutro-filo:#dfe3ec;
  --pk-skel-corpo:#e6e9f0;
  --pk-graf-griglia:#e8ebf1; --pk-graf-asse:#c9cfdb; --pk-graf-testo:#535c72;
}
html[data-stile="nuovo"][data-tema="buio"]{
  --pk-tela:#0a0f1e; --pk-tela-filo:#141c34; --pk-ghiaccio:#162039; --pk-scheda:#111a30;
  --pk-filo:#243052; --pk-ink:#eef2fb; --pk-ink2:#b7c1d9; --pk-spento:#8d98b6;
  --pk-blu:#98acff; --pk-rosso:#ff7a80; --pk-verde:#58e08a; --pk-ambra:#e8ac26;
  --pk-blu-tenue:#18234a; --pk-blu-cupo:#d3dcff;
  --pk-barra:#0d1426; --pk-barra-filo:#141c34; --pk-filo-barra:#1d2746;
  --pk-badge:#1c2748; --pk-spento-barra:#56618a;
  --pk-stato-neutro-fondo:#1a2442; --pk-stato-neutro-testo:#cdd5ea; --pk-stato-neutro-filo:#2c3860;
  --pk-skel-corpo:#1b2544;
  --pk-graf-griglia:#1c2646; --pk-graf-testo:#b7c1d9; --pk-graf-anello:#111a30; --pk-graf-tip-testo:#111a30;
  /* al buio un'ombra non si vede: al suo posto un filo di luce sul bordo alto */
  --pk-ombra:inset 0 1px 0 rgba(255,255,255,.04);
  --pk-bordo-scheda:1px solid #222d4f;
}

/* ⭐ 09/10/2026 — DUE PAGINE VERE CON LA GRAFICA DELLA TAVOLA «tre direzioni grafiche». Andrea: «una schermata reale con la
   grafica di "offerte scura - robot tenui" e una con "A+B+C Offerte"»; al primo giro (solo un riquadro scuro dentro la pagina):
   «non è cambiata la grafica ma solo lo sfondo». ▶️ Adesso cambia TUTTA l'app mentre si è su quella pagina: menu, barra in alto,
   avvisi e contenuto. L'attributo `data-pagina` sull'<html> lo mette la pagina stessa (Offerte: views-offerte.jsx; Commesse:
   index.html) e lo toglie quando si esce. Il tema chiaro/buio scelto dall'utente resta com'era sulle altre pagine.
   ‼ L'attributo ripetuto ([data-pagina][data-pagina]) alza la precedenza sopra html[data-stile="nuovo"]:not([data-tema="buio"]),
     che se no ridipingeva di bianco schede e testi (prima prova: testo chiaro su schede bianche).
   · offerte-robot   → notte, i due robot della schermata di accesso molto tenui in fondo alla finestra (sfondi/cella-tenue.svg,
                       copia attenuata; l'originale cella.svg non cambia)
   · commesse-tavola → la «tavola tecnica»: blu da disegno, quadrettatura, testi chiari */
html[data-tavola][data-tavola][data-tavola]{
  color-scheme:dark;
  color-scheme:dark;
  --pk-tela:#080C1B;
  --pk-tela-filo:#161D3C;
  --pk-ghiaccio:#131C36;
  --pk-scheda:#0F1730;
  --pk-filo:#212A4E;
  --pk-ink:#F0F4FC;
  --pk-ink2:#B8C4DE;
  --pk-spento:#8290B8;
  --pk-blu:#8CA2FF;
  --pk-rosso:#FF6B71;
  --pk-rosso-critico:#FF5A64; --pk-rosso-critico-testo:#FF5A64; /* 17/10/2026: #e21c2b al buio stava a 3,7:1 sulla scheda; questo 5,8 */
  --pk-verde:#4ADE80;
  --pk-ambra:#E8AC26;
  --pk-blu-pieno:#3A50C0; --pk-rosso-pieno:#B3323B; --pk-verde-pieno:#1B7A2B;
  --pk-ambra-pieno:#8A5A11;
  --pk-su-pieno:#ffffff;
  --pk-blu-tenue:#16224A; --pk-rosso-tenue:#33161C;
  --pk-verde-tenue:#12291B; --pk-ambra-tenue:#2E2311;
  --pk-blu-cupo:#C3CEFF;
  --pk-ambra-testo:#F2C66D; --pk-ambra-filo:#5A4520; --pk-verde-filo:#24502F;
  --pk-blu-filo:#2E3D78;    --pk-rosso-filo:#7A3540;
  --pk-barra:#0C1226; --pk-barra-filo:#161D3C; --pk-filo-barra:#212A4E;
  --pk-badge:#1B2547; --pk-spento-barra:#4A5578;
  --pk-stato-neutro-fondo:#1B2547;     --pk-stato-neutro-testo:#C9D2E8;     --pk-stato-neutro-filo:#2E3A62;
  --pk-stato-info-fondo:#16224A;       --pk-stato-info-testo:#A9BAFF;       --pk-stato-info-filo:#2E3D78;
  --pk-stato-successo-fondo:#12291B;   --pk-stato-successo-testo:#6EE7A0;   --pk-stato-successo-filo:#24502F;
  --pk-stato-attenzione-fondo:#2E2311; --pk-stato-attenzione-testo:#F2C66D; --pk-stato-attenzione-filo:#5A4520;
  --pk-stato-pericolo-fondo:#3A1820;   --pk-stato-pericolo-testo:#FF9A9F;   --pk-stato-pericolo-filo:#7A3540;
  --pk-stato-speciale-fondo:#2A1C4A;   --pk-stato-speciale-testo:#D2BCFF;   --pk-stato-speciale-filo:#4B3A7A;
  --pk-skel-corpo:#1D2748;
  --pk-skel-luce:rgba(255,255,255,.07);
  --pk-ombra-scheda:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.25);
  --pk-ombra-tenue:rgba(0,0,0,.3);
  --pk-ombra-forte:rgba(0,0,0,.6);
  --pk-velo:rgba(2,5,15,.72);
}
html[data-tavola][data-tavola][data-tavola]{
  --pk-tela:transparent; --pk-tela-filo:rgba(156,199,255,.18); --pk-ghiaccio:rgba(14,33,72,.75);
  --pk-scheda:rgba(10,25,56,.9); --pk-filo:rgba(156,199,255,.28); --pk-barra:rgba(10,25,56,.94); --pk-barra-filo:rgba(156,199,255,.28);
  /* 10/10/2026 «carica ancora i testi»: secondario, spento e colori più luminosi */
  --pk-ink:#ffffff; --pk-ink2:#dde9fb; --pk-spento:#bcd9ff;
  --pk-blu:#b6d7ff; --pk-verde:#9aedc9; --pk-ambra:#ffd06e; --pk-rosso:#ffa292;
  --pk-blu-tenue:rgba(156,199,255,.14); --pk-badge:rgba(156,199,255,.14);
}
html[data-tavola][data-tavola][data-tavola] body{
  background-color:#0e2148 !important;
  background-image:linear-gradient(rgba(156,199,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(156,199,255,.08) 1px,transparent 1px) !important;
  background-size:24px 24px !important; background-attachment:fixed !important;
}
/* i numeri e i codici in carattere da quota (IBM Plex Mono), come nella tavola */
html[data-tavola][data-tavola][data-tavola] [data-pk-quota]{font-family:'IBM Plex Mono',monospace;letter-spacing:.02em}

/* ⭐ 09/10/2026 (2° giro) — LA «PELLE» DELLA TAVOLA. Andrea: «la grafica è comunque diversa dalle anteprime». I colori
   da soli non bastano: le anteprime hanno un'altra FORMA dei pezzi comuni. Qui si ridisegnano, solo su queste due pagine:
   · stessi colori «da disegno» delle anteprime anche su Offerte (azzurro #9cc7ff, verde #7ee2b8, ambra #ffc24d)
   · menu asciutto: titoli in carattere da quota maiuscolo spaziato, voce attiva con la riga verde, icone e stelline smorzate
   · linguette e intestazioni di tabella in carattere da quota maiuscolo spaziato; righe sottili, niente scatole
   · schede piatte (angoli 4, niente ombra), stati scritti in colore senza «pillola», codici e importi in carattere da quota
   · il pulsante principale è verde con il testo scuro, come «+ Nuova offerta» nell'anteprima
   ‼ Il prefisso :is(...)[data-pagina]×3 vale 0,4,1: sopra html[data-stile="nuovo"] e html:not(.pk-niente). */
html[data-tavola][data-tavola][data-tavola][data-tavola]{
  --pk-blu-pieno:#7ee2b8; --pk-su-pieno:#0e2148;
  /* 18/10/2026 (contrasto misurato): il testo sui «pieni» qui è scuro (#0e2148), ma rosso e ambra pieni restavano scuri: 2,6:1
     («195 gg fa» in Plancia, conteggi SdI). Ora i pieni sono i colori da disegno della tavola: 6,9 · 9,8 · 10,1. */
  --pk-rosso-pieno:#ff8a78; --pk-ambra-pieno:#ffc24d; --pk-verde-pieno:#7ee2b8;
  --pk-stato-neutro-fondo:transparent; --pk-stato-info-fondo:transparent; --pk-stato-successo-fondo:transparent;
  --pk-stato-attenzione-fondo:transparent; --pk-stato-pericolo-fondo:transparent; --pk-stato-speciale-fondo:transparent;
  --pk-stato-neutro-testo:#c3d6f5; --pk-stato-info-testo:#9cc7ff; --pk-stato-successo-testo:#7ee2b8;
  --pk-stato-attenzione-testo:#ffc24d; --pk-stato-pericolo-testo:#ff8a78;
  --pk-ombra-scheda:none;
  --pk-ambra-tenue:rgba(255,194,77,.12); --pk-rosso-tenue:rgba(255,138,120,.12); --pk-verde-tenue:rgba(126,226,184,.1);
}
/* menu a sinistra */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar{
  background:rgba(10,25,56,.85) !important; border-right:1px solid rgba(156,199,255,.3) !important; box-shadow:none !important;
}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navlabel{
  font-family:'IBM Plex Mono',monospace !important; font-size:14px !important; letter-spacing:.2em !important;
  text-transform:uppercase !important; color:#9cc7ff !important; font-weight:500 !important;
}
/* 10/10/2026 — Andrea: «Preferiti» e «Aree» erano piccoli → 14 px come le voci; col menu stretto restano nascosti */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar.stretta:not(:hover):not(:focus-within) .pk-navlabel{font-size:0 !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem{
  border-radius:0 !important; background:transparent !important; color:#dbe8ff !important; font-weight:400 !important;
}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem:hover{color:#ffffff !important;background:rgba(156,199,255,.06) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem.active{
  color:#ffffff !important; border-left:3px solid #7ee2b8 !important; background:rgba(126,226,184,.08) !important;
}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem svg{opacity:.45}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem.active svg{opacity:1;color:#7ee2b8 !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navstella:not(.on){opacity:0}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navriga:hover .pk-navstella{opacity:1}
/* barra in alto */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-appbar{
  box-shadow:none !important; border-bottom:1px solid rgba(156,199,255,.3) !important;
}
/* linguette */
html[data-tavola][data-tavola][data-tavola][data-tavola] :is([role="tablist"] :is(button,[role="tab"]),.app-main>nav>button){
  font-family:'IBM Plex Mono',monospace !important; font-size:12px !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; font-weight:500 !important; color:#9cc7ff !important; border-radius:0 !important;
}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is([role="tablist"] [aria-selected="true"],.app-main>nav>button[aria-current="page"]){
  color:#ffffff !important; border-bottom-color:#7ee2b8 !important; box-shadow:inset 0 -2px 0 #7ee2b8 !important;
}
/* tabelle: righe sottili sul fondo, intestazioni da quota */
html[data-tavola][data-tavola][data-tavola][data-tavola] thead th{
  background:rgba(12,26,54,.96) !important; font-family:'IBM Plex Mono',monospace !important; font-size:12px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important; font-weight:500 !important; color:#9cc7ff !important;
  border:0 !important; border-bottom:1px solid rgba(156,199,255,.5) !important;
}
html[data-tavola][data-tavola][data-tavola][data-tavola] thead th::after{background:rgba(156,199,255,.5) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] tbody :is(td,th){
  background:transparent !important; border:0 !important; border-bottom:1px solid rgba(156,199,255,.15) !important;
}
html[data-tavola][data-tavola][data-tavola][data-tavola] tbody tr{background:transparent !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] tbody tr:hover>td{background:rgba(156,199,255,.06) !important}
/* 09/10/2026 — la prima colonna (nomi, voci) resta nel carattere di Quadra: il carattere da quota solo sui numeri */
html[data-tavola][data-tavola][data-tavola][data-tavola] tbody td[style*="right"]{
  font-family:'IBM Plex Mono',monospace !important; letter-spacing:.02em;
}
/* schede piatte, angoli 4, niente ombre; stati senza pillola */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content :is(div,section,article,button,input,select,textarea,a,span,table):not([style*="50%"]){
  border-radius:4px !important; box-shadow:none !important;
}
/* 16/10/2026 sera (voto misurato): 12 → 14, la regola «mai sotto 14 px» vale anche per il contatore delle linguette («Fatture emesse 25») */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content .pk-badge{
  font-family:'IBM Plex Mono',monospace !important; font-size:14px !important; letter-spacing:.08em !important; text-transform:uppercase;
}
/* campi e filtri */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  background:rgba(14,33,72,.9) !important; border:1px solid rgba(156,199,255,.45) !important; color:#ffffff !important;
}
/* le aree del menu come «PREFERITI» nell'anteprima: carattere da quota maiuscolo; le schermate sotto restano normali */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navgroup>div>.pk-navriga>.pk-navitem .pk-navtesto{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:500;
}

/* ⭐ 09/10/2026 (3° giro) — LE NOTE IN ROSSO DI ANDREA sulla foto di Commesse:
   1) «Tutti i testi con il font che abbiamo stabilito»: linguette, aree del menu, titoli del menu e intestazioni di
      tabella tornano nel carattere di Quadra (IBM Plex Sans), senza maiuscolo forzato. Il carattere da quota resta
      solo su numeri e codici ([data-pk-quota], prima colonna e colonne a destra delle tabelle).
   2) TRASPARENTE (si vede la carta a quadretti): avviso in alto, testata «Commesse · N operative», le cinque tessere,
      menu a sinistra, fondo della tabella e delle colonne del Kanban. Le schede delle commesse restano piene: si leggono.
   3) «OK sfondo a quadratini ma aggiungi il disegno dei 2 robot»: i due robot della schermata di accesso, solo a filo
      azzurro (sfondi/robot-tavola.svg, ricavato da cella.svg: niente fondo, niente scintille), sopra la quadrettatura. */
html[data-tavola][data-tavola][data-tavola][data-tavola] :is([role="tablist"] :is(button,[role="tab"]),.app-main>nav>button),
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navlabel,
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navgroup>div>.pk-navriga>.pk-navitem .pk-navtesto,
html[data-tavola][data-tavola][data-tavola][data-tavola] thead th{
  font-family:inherit !important; text-transform:none !important; letter-spacing:normal !important;
}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is([role="tablist"] :is(button,[role="tab"]),.app-main>nav>button){font-size:14px !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-navgroup>div>.pk-navriga>.pk-navitem .pk-navtesto{font-size:14px}
/* 10/10/2026 — Andrea: «i testi della descrizione delle colonne sono diventati piccoli»: tolto il maiuscolo, i 12 px
   della testata erano troppo pochi → 14 px, come le linguette */
/* 10/10/2026 sera — Andrea: «aumenta dimensioni testi descrizione colonne»: 14 erano uguali al contenuto → 16 */
html[data-tavola][data-tavola][data-tavola][data-tavola] thead th,html[data-tavola][data-tavola][data-tavola][data-tavola] thead th *{font-size:16px !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-riga-oggi],
html[data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-testata],
html[data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-testata][style*="sticky"],
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-tessera,
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content div:has(>table),
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content table,
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content thead th,
html[data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-kanban-colonna]{
  background:transparent !important; backdrop-filter:none !important;
}
@media (min-width:1025px){ html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar{background:transparent !important} }
/* ‼ 12/10/2026 — Andrea, foto dall'iPad: il menu aperto era TRASPARENTE. Sotto i 1025 px la barra galleggia sopra la
   pagina e prendeva il blu scuro velato (.85) della regola qui sopra in tutti e due i temi: scritte scure su blu, con la
   pagina che si leggeva attraverso. Sull'iPad e sul telefono il fondo è pieno, quello della barra del tema. */
@media (max-width:1024px){ html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar{background:var(--pk-barra) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important} }
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-tessera{border-color:rgba(156,199,255,.35) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-testata]{border-color:rgba(156,199,255,.3) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] body{
  background-image:url("/sfondi/robot-tavola.svg?v=3"),linear-gradient(rgba(156,199,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(156,199,255,.08) 1px,transparent 1px) !important;
  background-size:100% auto,24px 24px,24px 24px !important; background-repeat:no-repeat,repeat,repeat !important;
  background-position:center bottom,0 0,0 0 !important;
}

/* il saluto della Plancia ha il suo fondo scuro fisso (cella.svg): il testo resta bianco anche dove il pulsante pieno
   della tavola scura vuole il testo scuro (--pk-su-pieno #0e2148) */
html[data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-saluto]{--pk-su-pieno:#ffffff}
/* ⭐ 09/10/2026 (4° giro) — LA TAVOLA SU TUTTO QUADRA, SCURA E CHIARA. Andrea: «mi piacerebbe fare tutta quadra come la
   schermata commesse di ora e poi avere la schermata bianca, chiara», poi, viste le anteprime: «applica la visualizzazione
   scura e chiara». Le regole qui sopra valevano solo su Commesse (e la notte coi robot su Offerte): ora valgono ovunque,
   con `data-tavola` sull'<html> che segue il tasto del tema (index.html nella <head> e app-tema.js): tema scuro → «scura»,
   tema chiaro → «chiara».
   · CHIARA = la stessa tavola su carta bianca: quadretti azzurri, inchiostro blu scuro, i due robot a tratto blu tenue
     (sfondi/robot-tavola-chiara.svg). Solo colori: la forma (carattere, trasparenze, righe) e' quella della scura.
   · ‼ Il prefisso della chiara ha UN [data-tavola] in piu' delle regole scure: vince sempre su di loro.
   · STAMPA: sempre su carta bianca, senza robot e senza quadretti, qualunque sia il tema. */
/* 10/10/2026 — Andrea: «rendi i testi un pò più carichi perchè non si vedono molto bene»: nella chiara tutti gli
   inchiostri (testo, secondario, spento, blu, verde, ambra, rosso, viola) un gradino più scuri; poi «carica ancora i testi»: un altro gradino. */
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola]{
  color-scheme:light;
  --pk-tela-filo:rgba(31,79,154,.14); --pk-ghiaccio:rgba(31,79,154,.06);
  --pk-scheda:transparent; --pk-filo:rgba(31,79,154,.22); --pk-barra:rgba(255,255,255,.94); --pk-barra-filo:rgba(31,79,154,.22); --pk-filo-barra:rgba(31,79,154,.22);
  --pk-ink:#030c20; --pk-ink2:#15294d; --pk-spento:#2c3f63;
  --pk-blu:#0f3470; --pk-verde:#07523a; --pk-ambra:#683c00; --pk-rosso:#851f10; --pk-rosso-critico:#d01926; --pk-rosso-critico-testo:#d01926; /* 18/10/2026: #e21c2b come testo sulla tavola chiara stava a 4,4:1, questo 5,0 */
  --pk-blu-pieno:#07523a; --pk-su-pieno:#ffffff; --pk-rosso-pieno:#851f10; --pk-verde-pieno:#07523a; --pk-ambra-pieno:#683c00;
  --pk-blu-tenue:rgba(31,79,154,.08); --pk-badge:rgba(31,79,154,.08); --pk-blu-cupo:#030c20;
  --pk-ambra-tenue:rgba(154,91,0,.08); --pk-rosso-tenue:rgba(184,50,31,.07); --pk-verde-tenue:rgba(15,122,82,.07);
  --pk-ambra-testo:#683c00; --pk-ambra-filo:rgba(154,91,0,.35); --pk-verde-filo:rgba(15,122,82,.35); --pk-blu-filo:rgba(31,79,154,.35); --pk-rosso-filo:rgba(184,50,31,.35);
  --pk-spento-barra:#2c3f63;
  --pk-stato-neutro-testo:#15294d; --pk-stato-info-testo:#0f3470; --pk-stato-successo-testo:#07523a; --pk-stato-attenzione-testo:#683c00; --pk-stato-pericolo-testo:#851f10; --pk-stato-speciale-testo:#3c2878;
  --pk-stato-neutro-filo:rgba(31,79,154,.25); --pk-stato-info-filo:rgba(31,79,154,.35); --pk-stato-successo-filo:rgba(15,122,82,.35);
  --pk-stato-attenzione-filo:rgba(154,91,0,.35); --pk-stato-pericolo-filo:rgba(184,50,31,.35); --pk-stato-speciale-filo:rgba(91,63,168,.35);
  --pk-skel-corpo:rgba(31,79,154,.08); --pk-skel-luce:rgba(255,255,255,.6);
  --pk-ombra-tenue:rgba(14,33,72,.08); --pk-ombra-forte:rgba(14,33,72,.2); --pk-velo:rgba(14,33,72,.35);
}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] body{
  background-color:#fbfcfe !important;
  background-image:url("/sfondi/robot-tavola-chiara.svg?v=4"),linear-gradient(rgba(31,79,154,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,79,154,.07) 1px,transparent 1px) !important;
  background-size:100% auto,24px 24px,24px 24px !important; background-repeat:no-repeat,repeat,repeat !important; background-position:center bottom,0 0,0 0 !important;
}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar{border-right:1px solid rgba(31,79,154,.25) !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] .pk-navlabel{color:#0f3470 !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem{color:#030c20 !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem:hover{color:#030c20 !important;background:rgba(31,79,154,.06) !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem.active{color:#030c20 !important;border-left-color:#07523a !important;background:rgba(15,122,82,.08) !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem.active svg{color:#07523a !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] .pk-appbar{border-bottom:1px solid rgba(31,79,154,.25) !important;background:rgba(255,255,255,.9) !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] :is([role="tablist"] :is(button,[role="tab"]),.app-main>nav>button){color:#15294d !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] :is([role="tablist"] [aria-selected="true"],.app-main>nav>button[aria-current="page"]){color:#030c20 !important;border-bottom-color:#07523a !important;box-shadow:inset 0 -2px 0 #07523a !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] thead th{color:#0f3470 !important;border-bottom:1px solid rgba(31,79,154,.4) !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] thead th::after{background:rgba(31,79,154,.4) !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] tbody :is(td,th){border-bottom:1px solid rgba(31,79,154,.12) !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] tbody tr:hover>td{background:rgba(31,79,154,.05) !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] .pk-content :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){background:#ffffff !important;border:1px solid rgba(31,79,154,.35) !important;color:#030c20 !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] .pk-tessera{border-color:rgba(31,79,154,.3) !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-testata]{border-color:rgba(31,79,154,.25) !important}
/* ⭐ 09/10/2026 (5° giro) — Andrea: «per avere una grafica uniforme tutte le tessere, riquadri, bottoni devono essere
   trasparenti» e «devono avere lo stesso colore del testo». Quindi:
   · --pk-scheda (il fondo di schede, riquadri, tessere, pulsanti secondari) diventa TRASPARENTE: si vede la carta;
   · il BORDO di riquadri, tessere, testate e pulsanti prende il colore del loro testo (currentColor);
   · i pulsanti PIENI (primario, attivo, verde, rosso) diventano a filo: fondo trasparente, testo e bordo nel colore
     che prima era il fondo. Il pulsante acceso di un interruttore resta riconoscibile col peso forte (BTNS.attivo).
   ‼ ECCEZIONE VOLUTA: quello che si apre SOPRA la pagina resta pieno (finestre .pk-finestra, pannello «Chiedi», menu,
     tendine e tutto cio' che e' posizionato assoluto/fisso), altrimenti attraverso si legge la tabella di sotto. E le
     intestazioni che restano attaccate in alto scorrendo (thead, testata sticky) prendono il colore della carta:
     ferme sembrano trasparenti, scorrendo non lasciano vedere le righe sotto. */
html[data-tavola][data-tavola][data-tavola][data-tavola]{--pk-scheda:transparent; --pk-carta:#0e2148; --pk-scheda-piena:#132a57}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola]{--pk-carta:#fbfcfe; --pk-scheda-piena:#ffffff}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(.pk-finestra,.pk-pannello,[role="dialog"],[role="alertdialog"],.pk-dlg,[role="menu"],[role="listbox"],[role="tooltip"],[style*="position: absolute"],[style*="position: fixed"]){--pk-scheda:var(--pk-scheda-piena)}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content thead th,html[data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-testata][style*="sticky"]{background:var(--pk-carta) !important}
/* 31/10/2026 (controllo del contrasto, WCAG AA) — nella tavola CHIARA le intestazioni delle tabelle FUORI dalla pagina
   (finestre: «Importa commesse dal server») restavano col fondo blu notte della tavola scura (riga ~453) mentre il testo
   passava al blu #0f3470 della chiara (riga ~573): 1,3:1, illeggibile. Prendono la carta come quelle dentro la pagina.
   Solo la chiara: al buio il testo è #9cc7ff sul blu notte e passa. */
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] thead th{background:var(--pk-carta) !important}
/* ⭐ 10/10/2026 — Andrea, «voglio che quadra diventi 10», scelta A: MENO CORNICI. Tessere e riquadri sono schede piene
   (bianche nella chiara, blu velato al buio) senza bordo, con un'ombra appena; il colore resta sul numero e sul pallino.
   Sostituisce la cornice del colore degli € (09-10/10): era il colore usato come decorazione, ora dice solo lo stato.
   Le tessere dentro un riquadro (Sinapsi) non fanno scheda nella scheda: fondo appena azzurro, niente ombra. */
html[data-tavola][data-tavola][data-tavola][data-tavola]{--pk-velata:rgba(19,42,87,.62);--pk-ombra-scheda-a:0 1px 2px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.18)}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola]{--pk-velata:rgba(255,255,255,.96);--pk-ombra-scheda-a:0 0 0 1px rgba(14,33,72,.06),0 1px 3px rgba(14,33,72,.08),0 6px 18px rgba(14,33,72,.07)}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(.pk-riquadro,.pk-tessera,[style*="--pk-tessera"],.pk-scheda-fissa,[style*="var(--pk-bordo-scheda"])[class][class],html[data-tavola][data-tavola][data-tavola][data-tavola] :is(.pk-riquadro,.pk-tessera,[style*="--pk-tessera"],.pk-scheda-fissa,[style*="var(--pk-bordo-scheda"]){border-color:transparent !important;background:var(--pk-velata) !important;box-shadow:var(--pk-ombra-scheda-a) !important;border-radius:8px !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(.pk-riquadro,.pk-scheda-fissa,[style*="var(--pk-bordo-scheda"]) :is(.pk-tessera,[style*="--pk-tessera"])[style]{box-shadow:none !important;background:color-mix(in srgb,var(--pk-blu) 5%,transparent) !important}
/* la testata di pagina non è una scheda: il suo filo (e il nastro) resta sottile */
html[data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-testata][class][class],html[data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-testata]{border-color:var(--pk-filo) !important}
/* i pulsanti secondari: fondo tenue del loro colore, niente filo (col bordo trasparente restano senza niente: Indietro, Annulla…);
   il pulsante acceso di un interruttore (aria-pressed/aria-selected) un fondo più carico */
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"])[style*="border: 1px solid"]:not([style*="solid transparent"]):not(.pk-tessera):not([style*="--pk-tessera"]):not([style*="-pieno)"]):not([aria-pressed="true"]):not([aria-selected="true"]){border-color:transparent !important;background:color-mix(in srgb,currentColor 9%,transparent) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"])[style*="border: 1px solid"]:is([aria-pressed="true"],[aria-selected="true"]):not([role="tab"]){border-color:transparent !important;background:color-mix(in srgb,currentColor 20%,transparent) !important}
/* il pulsante principale (fondo -pieno reso trasparente qui sotto) resta col filo del suo colore */
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"])[style*="border: 1px solid"][style*="-pieno)"]{border-color:currentColor !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] body{background-color:#f4f7fb !important}
/* ‼ 12/10/2026, Andrea: «problemi di grafica» (26001) — la scheda commessa è un pannello FISSO sopra la pagina (.pk-sfondo-app,
   z-index 1000) e prendeva il fondo da --pk-tela, che nella tavola vale `transparent` (il disegno sta solo sul body): si vedevano
   attraverso la pagina sotto e il menu principale, sovrapposti al menu della commessa. Gli si dà lo STESSO fondo del body, pieno,
   ancorato alla finestra (fixed) così il reticolo combacia al pixel con quello della pagina. */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-sfondo-app{
  background-color:#0e2148 !important;
  background-image:url("/sfondi/robot-tavola.svg?v=3"),linear-gradient(rgba(156,199,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(156,199,255,.08) 1px,transparent 1px) !important;
  background-size:100% auto,24px 24px,24px 24px !important; background-repeat:no-repeat,repeat,repeat !important;
  background-position:center bottom,0 0,0 0 !important; background-attachment:fixed !important;
}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sfondo-app{
  background-color:#f4f7fb !important;
  background-image:url("/sfondi/robot-tavola-chiara.svg?v=4"),linear-gradient(rgba(31,79,154,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,79,154,.07) 1px,transparent 1px) !important;
}
@media (hover:none){ html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-sfondo-app{background-attachment:scroll !important} }
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"]):is([style*="background: var(--pk-blu-pieno)"],[style*="background: var(--pk-verde-pieno)"],[style*="background: var(--pk-rosso-pieno)"],[style*="background: var(--pk-ambra-tenue)"]){background:transparent !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"])[style*="background: var(--pk-blu-pieno)"]{color:var(--pk-blu-pieno) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"])[style*="background: var(--pk-verde-pieno)"]{color:var(--pk-verde) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"])[style*="background: var(--pk-rosso-pieno)"]{color:var(--pk-rosso) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"])[style*="background: var(--pk-ambra-tenue)"]{color:var(--pk-ambra) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"])[style*="background: var(--pk-blu-pieno)"] svg{color:currentColor !important;stroke:currentColor}
/* ⭐ 09/10/2026 — Andrea: «nella visualizzazione scura logo bianco (il quadratino rimane rosso)». Le due copie bianche sono
   il marchio di app-logo.js con il blu #273785 cambiato in bianco (sfondi/logo-quadra-*bianco.svg); `content` sostituisce
   l'immagine senza toccare le regole che mostrano il logo intero o solo il segno quando il menu e' stretto. */
html[data-tavola="scura"] .pk-logo img.pk-logo-intero{content:url("/sfondi/logo-quadra-bianco.svg?v=1")}
html[data-tavola="scura"] .pk-logo img.pk-logo-segno{content:url("/sfondi/logo-quadra-q-bianco.svg?v=1")}
/* ⭐ 09/10/2026 — Andrea: «non ci deve essere un riquadro con sfondo bianco». `.pk-isola-chiara` (la barra «54 commesse ·
   Valore …» delle tabelle, il riquadro Sinapsi della Plancia) si ridava da sola i colori del tema chiaro: nella tavola
   eredita quelli della pagina (`inherit` su tutte le variabili che l'isola riscrive), e la barra delle tabelle e' trasparente. */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-isola-chiara{--pk-ambra:inherit; --pk-ambra-filo:inherit; --pk-ambra-pieno:inherit; --pk-ambra-tenue:inherit; --pk-ambra-testo:inherit; --pk-blu:inherit; --pk-blu-cupo:inherit; --pk-blu-filo:inherit; --pk-blu-pieno:inherit; --pk-blu-tenue:inherit; --pk-filo:inherit; --pk-ghiaccio:inherit; --pk-graf-1:inherit; --pk-graf-2:inherit; --pk-graf-3:inherit; --pk-graf-4:inherit; --pk-graf-5:inherit; --pk-graf-6:inherit; --pk-graf-7:inherit; --pk-graf-8:inherit; --pk-graf-anello:inherit; --pk-graf-asse:inherit; --pk-graf-consuntivo:inherit; --pk-graf-div-neg-1:inherit; --pk-graf-div-neg-2:inherit; --pk-graf-div-neg-3:inherit; --pk-graf-div-pos-1:inherit; --pk-graf-div-pos-2:inherit; --pk-graf-div-pos-3:inherit; --pk-graf-div-zero:inherit; --pk-graf-entrate:inherit; --pk-graf-griglia:inherit; --pk-graf-negativo:inherit; --pk-graf-positivo:inherit; --pk-graf-riferimento:inherit; --pk-graf-seq-1:inherit; --pk-graf-seq-2:inherit; --pk-graf-seq-3:inherit; --pk-graf-seq-4:inherit; --pk-graf-seq-5:inherit; --pk-graf-seq-6:inherit; --pk-graf-testo:inherit; --pk-graf-tip-fondo:inherit; --pk-graf-tip-testo:inherit; --pk-graf-uscite:inherit; --pk-ink:inherit; --pk-ink2:inherit; --pk-ombra-forte:inherit; --pk-ombra-scheda:inherit; --pk-ombra-tenue:inherit; --pk-rosso:inherit; --pk-rosso-critico:inherit; --pk-rosso-critico-testo:inherit; --pk-rosso-filo:inherit; --pk-rosso-pieno:inherit; --pk-rosso-tenue:inherit; --pk-scheda:inherit; --pk-skel-corpo:inherit; --pk-skel-luce:inherit; --pk-spento:inherit; --pk-stato-attenzione-filo:inherit; --pk-stato-attenzione-fondo:inherit; --pk-stato-attenzione-testo:inherit; --pk-stato-info-filo:inherit; --pk-stato-info-fondo:inherit; --pk-stato-info-testo:inherit; --pk-stato-neutro-filo:inherit; --pk-stato-neutro-fondo:inherit; --pk-stato-neutro-testo:inherit; --pk-stato-pericolo-filo:inherit; --pk-stato-pericolo-fondo:inherit; --pk-stato-pericolo-testo:inherit; --pk-stato-speciale-filo:inherit; --pk-stato-speciale-fondo:inherit; --pk-stato-speciale-testo:inherit; --pk-stato-successo-filo:inherit; --pk-stato-successo-fondo:inherit; --pk-stato-successo-testo:inherit; --pk-su-pieno:inherit; --pk-tela:inherit; --pk-tela-filo:inherit; --pk-velo:inherit; --pk-verde:inherit; --pk-verde-filo:inherit; --pk-verde-pieno:inherit; --pk-verde-tenue:inherit}
html[data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-riga-tabella]{background:transparent !important}
@media print{
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola]{
  color-scheme:light;
  --pk-tela-filo:rgba(31,79,154,.14); --pk-ghiaccio:rgba(31,79,154,.06);
  --pk-scheda:rgba(255,255,255,.92); --pk-filo:rgba(31,79,154,.22); --pk-barra:rgba(255,255,255,.94); --pk-barra-filo:rgba(31,79,154,.22); --pk-filo-barra:rgba(31,79,154,.22);
  --pk-ink:#0e2148; --pk-ink2:#3d5480; --pk-spento:#5f7399;
  --pk-blu:#1f4f9a; --pk-verde:#0f7a52; --pk-ambra:#9a5b00; --pk-rosso:#b8321f; --pk-rosso-critico:#e21c2b; --pk-rosso-critico-testo:#d01926;
  --pk-blu-pieno:#0f7a52; --pk-su-pieno:#ffffff; --pk-rosso-pieno:#b8321f; --pk-verde-pieno:#0f7a52; --pk-ambra-pieno:#9a5b00;
  --pk-blu-tenue:rgba(31,79,154,.08); --pk-badge:rgba(31,79,154,.08); --pk-blu-cupo:#0e2148;
  --pk-ambra-tenue:rgba(154,91,0,.08); --pk-rosso-tenue:rgba(184,50,31,.07); --pk-verde-tenue:rgba(15,122,82,.07);
  --pk-ambra-testo:#9a5b00; --pk-ambra-filo:rgba(154,91,0,.35); --pk-verde-filo:rgba(15,122,82,.35); --pk-blu-filo:rgba(31,79,154,.35); --pk-rosso-filo:rgba(184,50,31,.35);
  --pk-spento-barra:#5f7399;
  --pk-stato-neutro-testo:#3d5480; --pk-stato-info-testo:#1f4f9a; --pk-stato-successo-testo:#0f7a52; --pk-stato-attenzione-testo:#9a5b00; --pk-stato-pericolo-testo:#b8321f; --pk-stato-speciale-testo:#5b3fa8;
  --pk-stato-neutro-filo:rgba(31,79,154,.25); --pk-stato-info-filo:rgba(31,79,154,.35); --pk-stato-successo-filo:rgba(15,122,82,.35);
  --pk-stato-attenzione-filo:rgba(154,91,0,.35); --pk-stato-pericolo-filo:rgba(184,50,31,.35); --pk-stato-speciale-filo:rgba(91,63,168,.35);
  --pk-skel-corpo:rgba(31,79,154,.08); --pk-skel-luce:rgba(255,255,255,.6);
  --pk-ombra-tenue:rgba(14,33,72,.08); --pk-ombra-forte:rgba(14,33,72,.2); --pk-velo:rgba(14,33,72,.35);
}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] body{
  background-color:#fbfcfe !important;
  background-image:none !important;
}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar{border-right:1px solid rgba(31,79,154,.25) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-navlabel{color:#1f4f9a !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem{color:#0e2148 !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem:hover{color:#0e2148 !important;background:rgba(31,79,154,.06) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem.active{color:#0e2148 !important;border-left-color:#0f7a52 !important;background:rgba(15,122,82,.08) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-navitem.active svg{color:#0f7a52 !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-appbar{border-bottom:1px solid rgba(31,79,154,.25) !important;background:rgba(255,255,255,.9) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] :is([role="tablist"] :is(button,[role="tab"]),.app-main>nav>button){color:#3d5480 !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] :is([role="tablist"] [aria-selected="true"],.app-main>nav>button[aria-current="page"]){color:#0e2148 !important;border-bottom-color:#0f7a52 !important;box-shadow:inset 0 -2px 0 #0f7a52 !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] thead th{color:#1f4f9a !important;border-bottom:1px solid rgba(31,79,154,.4) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] thead th::after{background:rgba(31,79,154,.4) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] tbody :is(td,th){border-bottom:1px solid rgba(31,79,154,.12) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] tbody tr:hover>td{background:rgba(31,79,154,.05) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-content :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){background:#ffffff !important;border:1px solid rgba(31,79,154,.35) !important;color:#0e2148 !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-tessera{border-color:rgba(31,79,154,.3) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-testata]{border-color:rgba(31,79,154,.25) !important}
}

/* ⭐ 10/10/2026 — Andrea: «testi nei riquadri e riquadri devono avere tutti le stesse dimensioni in tutta quadra».
   Misurato su Ordini clienti, Offerte e Fatture ricevute: i pulsanti sono gia' quasi tutti 14 px di testo e 32 di
   altezza; facevano eccezione le PASTIGLIE di stato (pkStileStato: 12 px, alte 20-22, e la tendina dello stato 26) e i
   pulsanti piccoli a 12 px. Ora, nella pagina, tutti alla misura del pulsante: 14 px, alti 32.
   · Il conteggio accanto al titolo ([data-pk-conteggio]) resta piccolo: non e' un riquadro, e' un numero.
   · Solo la tavola (html[data-tavola], cioe' sempre): la stampa e il telefono non cambiano. */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content :is(span,div,select)[style*="border-radius: 999px"][style*="height: 2"]:not([data-pk-conteggio]){
  height:32px !important; font-size:14px !important; padding:0 12px !important; line-height:30px !important; display:inline-flex !important; align-items:center !important; gap:6px;
}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content :is(button,a,label,[role="button"])[style*="border: 1px solid"][style*="font-size: 12px"]:not(.pk-tessera):not(.pk-mini):not([style*="--pk-tessera"]){
  font-size:14px !important; min-height:32px !important; box-sizing:border-box !important;
}
/* 10/10/2026 — Andrea, sugli Avvisi: «anche qui i testi sono piccoli». Le etichette con la cornice scritte a 12 px
   (destinatario, «a 5 persone», piccoli contatori in riga) salgono a 14 come il resto del testo. Il conteggio accanto al
   titolo resta com'e'. */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content span[style*="font-size: 12px"][style*="border: 1px solid"]:not([data-pk-conteggio]){font-size:14px !important}
/* ⭐ 10/10/2026 — Andrea, per la quinta volta in un giorno («anche qui il testo è piccolissimo, quasi illeggibile»; prima
   avvisi, tessere, colonne, menu). Invece di inseguirli uno a uno: nella pagina NESSUN testo sotto i 14 px. I 12 e 13
   scritti a mano salgono a 14. Restano piccoli solo il conteggio accanto al titolo ([data-pk-conteggio]), il «?»
   delle tessere (.pk-mini, ha la sua misura) e il disegno dei grafici (svg). Stampa e telefono non cambiano. */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content :is([style*="font-size: 12px"],[style*="font-size: 13px"],[style*="font-size: 11px"]):not([data-pk-conteggio]):not(.pk-mini):not(svg *){font-size:14px !important}

/* ⭐ 10/10/2026 (grafica verso il 10, punto 6) — dove c'è una tabella la tavola si spegne: niente robot, quadrettatura appena
   accennata. Plancia, Oggi e il login (senza tabelle in pagina) la tengono intera. */
html[data-tavola][data-tavola][data-tavola][data-tavola] body:has(.pk-content table):not(:has([data-pk-saluto],[data-pk-cruscotto])){background-image:linear-gradient(rgba(156,199,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(156,199,255,.035) 1px,transparent 1px) !important;background-size:24px 24px,24px 24px !important;background-repeat:repeat,repeat !important;background-position:0 0,0 0 !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola] body:has(.pk-content table):not(:has([data-pk-saluto],[data-pk-cruscotto])){background-image:linear-gradient(rgba(31,79,154,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(31,79,154,.03) 1px,transparent 1px) !important}
/* punto 7 — «Righe compatte nelle tabelle» TOLTO l'11/10/2026: doppione del tasto densità in ⋯ › Aspetto (app-densita.js) */

/* ⭐ 10/10/2026 (grafica verso il 10, blocco 1) — TABELLE UGUALI IN TUTTE LE PAGINE. MISURATO su 12 pagine: testo 14 e campi 32
   erano gia' uguali; cambiavano le celle (5/10, 6/8, 8/12 px) e le intestazioni. Ora celle e intestazioni stanno a 8/12 dove
   chi le ha scritte aveva messo un passo piu' stretto (le regole guardano lo stile scritto: 0 px, 10 px e oltre restano).
   ⚠️ Non tocca le tabelle larghe per dichiarazione (.pk-largo: Gantt, calendari) e cede alla densità «compatta» di ⋯ › Aspetto. */
html[data-tavola][data-tavola][data-tavola][data-tavola]:not([data-pk-densita="compatta"]) .pk-content table:not(.pk-largo) :is(td,th):is([style*="padding: 4px 6px"],[style*="padding: 4px 8px"],[style*="padding: 4px 10px"],[style*="padding: 5px"],[style*="padding: 6px"],[style*="padding: 7px"]){padding:8px 12px !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content table:not(.pk-largo) thead th{vertical-align:bottom}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content table:not(.pk-largo) tbody td{vertical-align:middle}
/* blocco 2 — LA TABELLA VUOTA: la riga unica con la cella che prende tutta la larghezza («Niente in scadenza», «Nessuna fattura…»)
   diventa uno stato vuoto vero: al centro, con un segno, non piu' una riga in corsivo persa in mezzo al bianco. */
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content tbody > tr:only-child > td[colspan]:only-child{text-align:center !important;padding:28px 12px !important;font-style:normal !important;color:var(--pk-ink2) !important;background:transparent !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content tbody > tr:only-child > td[colspan]:only-child::before{content:"";display:block;width:28px;height:28px;margin:0 auto 8px;background:var(--pk-spento);opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 2.5h5L16 13h5'/%3E%3Cpath d='M5.5 5.5h13L21 13v5.5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V13z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 2.5h5L16 13h5'/%3E%3Cpath d='M5.5 5.5h13L21 13v5.5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V13z'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-tavola][data-tavola][data-tavola][data-tavola] .pk-content tbody > tr:only-child > td[colspan]:only-child *{font-style:normal !important}
/* blocco 3 — MOVIMENTO DISCRETO: la tessera che si apre (role=button, .pk-tessera) si solleva di un pixel al passaggio del mouse;
   schede e pulsanti cambiano fondo e ombra in 150 ms invece che di colpo. Con «riduci movimento» del sistema si spegne (regola in index.html). */
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(.pk-tessera,[style*="--pk-tessera"],.pk-riquadro,.pk-scheda-fissa){transition:box-shadow .15s ease,transform .15s ease,background-color .15s ease}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(.pk-tessera,[style*="--pk-tessera"][role="button"],[style*="--pk-tessera"][style*="cursor: pointer"]):hover{transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--pk-blu) 18%,transparent),0 6px 20px var(--pk-ombra-tenue) !important}
html[data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"]){transition:background-color .15s ease,color .15s ease,border-color .15s ease}
@media (prefers-reduced-motion:reduce){html[data-tavola][data-tavola][data-tavola][data-tavola] :is(.pk-tessera,[style*="--pk-tessera"]):hover{transform:none}}

/* ‼ 11/10/2026 (giro grafica, foto di Andrea su iPad e giro PC) — LA BARRA IN ALTO PIENA. Era al 94% (scura) e al 90% (chiara):
   scorrendo, i numeri grandi delle tessere si leggevano SOTTO la barra («1.598.020,30 €» dietro «Annulla»). Una barra che resta
   ferma sopra il contenuto deve coprirlo. Sei attributi: devono vincere sulle due regole da cinque qui sopra (righe ~555 e ~640). */
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-appbar{background:#0a1938 !important}
html[data-tavola="chiara"][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-appbar{background:#ffffff !important}

/* ══ 17/10/2026 Andrea — LE TABELLE QUIETE ══════════════════════════════════════════════
   «via i riquadri e gli sfondi non necessari, gerarchia con peso del testo e spaziatura invece che con box
   colorati, e riserva il rosso #e21c2b solo a errori o scadenze bloccanti».
   Una tabella densa che porta `data-pk-quieta` (sul contenitore o sulla <table>):
   · le pastiglie di stato (PkStato) diventano PAROLE: niente fondo, niente cornice;
   · neutro/info/speciale in grigio secondario, successo verde, attenzione ambra, tutte di peso normale;
   · pericolo nel rosso critico e in grassetto: e' l'unico rosso della tabella.
   ⚠️ Si mette tabella per tabella, non ovunque: le pastiglie piene restano dove la riga e' una scheda
      (Kanban, testate). Il rosso «decorativo» (numeri negativi, cestini, andamenti in calo) si toglie
      nella vista, non qui. */
[data-pk-quieta] [data-pk-stato]{background:transparent !important;border-color:transparent !important;padding:0 !important;height:auto !important;font-size:14px !important;font-weight:400 !important}
[data-pk-quieta] [data-pk-stato="neutro"],[data-pk-quieta] [data-pk-stato="info"],[data-pk-quieta] [data-pk-stato="speciale"]{color:var(--pk-ink2) !important}
[data-pk-quieta] [data-pk-stato="successo"]{color:var(--pk-verde) !important}
[data-pk-quieta] [data-pk-stato="attenzione"]{color:var(--pk-ambra) !important}
[data-pk-quieta] [data-pk-stato="pericolo"]{color:var(--pk-rosso-critico-testo) !important;font-weight:600 !important}
/* ‼ 24/10/2026 — la regola delle pastiglie della tavola (`.pk-content :is(span,div,select)[style*="border-radius: 999px"]…`,
   padding 0 12px) e' piu' specifica di quella qui sopra e la batteva: nelle tabelle quiete ogni stato si portava 24 px
   di margine trasparente. Si vedeva solo ora, con l'icona nei badge: ai DDT a 1500 px «Consegnato» diventava «Conseg…».
   Selettore ripetuto apposta per vincere senza toccare la regola della tavola. */
html [data-pk-quieta] span[data-pk-stato][data-pk-stato][data-pk-stato][data-pk-stato][data-pk-stato][data-pk-stato][data-pk-stato][data-pk-stato]{padding:0 !important}
/* 18/10/2026 — Andrea, punto 4 delle proposte «guardando il mondo» (Linear, marzo 2026): il menu fa orientare, non deve
   competere col lavoro. Voci non attive in ink2, icone più leggere; il numero della schermata in grigio senza pastiglia
   né pulsazione; sull'area un punto ambra al posto della somma. */
html .pk-sidebar .pk-navitem:not(.active),html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar .pk-navitem:not(.active){color:var(--pk-ink2) !important}
html .pk-sidebar .pk-navitem:not(.active) svg,html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar .pk-navitem:not(.active) svg{opacity:.7 !important}
html .pk-sidebar .pk-navitem .pk-badge,html .pk-sidebar .pk-navitem.active .pk-badge,html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar .pk-navitem .pk-badge,html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar .pk-navitem.active .pk-badge{background:transparent !important;color:var(--pk-ink2) !important;animation:none !important;padding:0 2px !important;min-width:0 !important;font-family:inherit !important;letter-spacing:normal !important;font-variant-numeric:tabular-nums}
.pk-navpunto{margin-left:auto;margin-right:18px;width:7px;height:7px;border-radius:50%;background:var(--pk-ambra);flex:none}
/* 18/10/2026 — Andrea, punto 5 (meno bordi, come Linear): i tasti DENTRO le righe delle tabelle non hanno fondo né filo,
   sono parole blu; il fondo tenue torna al passaggio del mouse o col fuoco. Restano pieni i principali (-pieno) e i
   pulsanti accesi (aria-pressed). Fuori dalle tabelle non cambia niente. */
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-content td :is(button,a,[role="button"])[style*="border: 1px solid"]:not([style*="-pieno)"]):not([aria-pressed="true"]):not(.pk-tessera):not([style*="--pk-tessera"]),
.pk-content td :is(button,a,[role="button"])[style*="border: 1px solid"]:not([style*="-pieno)"]):not([aria-pressed="true"]):not(.pk-tessera):not([style*="--pk-tessera"]){background:transparent !important;border-color:transparent !important;box-shadow:none !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-content td :is(button,a,[role="button"])[style*="border: 1px solid"]:not([style*="-pieno)"]):not([aria-pressed="true"]):not(.pk-tessera):not([style*="--pk-tessera"]):is(:hover,:focus-visible){background:color-mix(in srgb,currentColor 10%,transparent) !important}
/* 18/10/2026 — Andrea, punto 1: «togli percorso nella barra in alto». Il nome della pagina c'era tre volte (percorso,
   linguetta accesa, titolo): resta linguetta + titolo. Il percorso si nasconde solo dove la pagina ha la sua testata,
   così una schermata senza titolo proprio non resta senza nome. */
body:has(.app-main [data-pk-testata]) .pk-appbar [data-pk-percorso]{display:none !important}
/* 19/10/2026 — Andrea: «errori se compatto la sidebar» (foto col menu stretto).
   1) Il menu stretto si allarga sopra la pagina al passaggio (o finché il ««» ha il fuoco), ma con la tavola il fondo
      della sidebar è trasparente: le voci finivano scritte SOPRA le tabelle. Allargato ha il fondo della barra.
   2) Stretto restavano la freccina ▸ dell'area (è una .pk-navlabel: le prendeva anche il filo dei titoli di gruppo)
      e il puntino ambra in fila dopo l'icona, tagliati dai 64 px: via la freccina, il puntino va all'angolo dell'icona. */
@media (min-width:1025px){
  html .pk-sidebar.stretta:is(:hover,:focus-within),html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar.stretta:is(:hover,:focus-within){background:var(--pk-barra) !important;backdrop-filter:blur(12px) !important;-webkit-backdrop-filter:blur(12px) !important}
  html .pk-sidebar.stretta:not(:hover):not(:focus-within) .pk-navriga>.pk-navlabel,html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar.stretta:not(:hover):not(:focus-within) .pk-navriga>.pk-navlabel{display:none !important}
  html .pk-sidebar.stretta:not(:hover):not(:focus-within) .pk-navpunto,html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] .pk-sidebar.stretta:not(:hover):not(:focus-within) .pk-navpunto{position:absolute;left:28px;top:4px;margin:0 !important}
}
/* 20/10/2026 — Andrea: «tutta quadra con velo schede tinto di blu ed togli sfondo nero a offerte» (provato prima su
   Commesse, confrontato con Offerte in nero grafite: scelto il blu). Solo grafica scura. Il grigio non veniva dal fondo: schede del kanban e pulsanti hanno per
   fondo il 9% del colore del LORO testo (regola «i pulsanti secondari» qui sopra), e il testo bianco al 9% sul blu notte fa
   grigio. Qui il velo è blu (#3d7bff), le tessere un blu più pieno. Fondo #0e2148 invariato. */
html[data-tavola="scura"][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola]{--pk-velata:rgba(24,56,132,.62)}
html[data-tavola="scura"][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"])[style*="border: 1px solid"]:not([style*="solid transparent"]):not(.pk-tessera):not([style*="--pk-tessera"]):not([style*="-pieno)"]):not([aria-pressed="true"]):not([aria-selected="true"]){background:color-mix(in srgb,#3d7bff 14%,transparent) !important}
html[data-tavola="scura"][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] :is(button,a,[role="button"])[style*="border: 1px solid"]:is([aria-pressed="true"],[aria-selected="true"]):not([role="tab"]){background:color-mix(in srgb,#3d7bff 28%,transparent) !important}
/* 20/10/2026 — Andrea: «aggiorna i colori anche sul mobile». Il telefono al buio usava ancora la palette scura vecchia
   (quasi nero #080C1B): ora ha il blu della tavola del PC (#0e2148) e le schede col velo blu scelto il 20/10 su tutta Quadra
   (rgba(24,56,132,.62) sul blu notte = #142f6d, qui pieno perché il telefono non ha la tavola sotto). Testi come sul PC.
   Vale dove non c'è `data-tavola`, cioè sul telefono (mobile.html): il PC ha sempre la tavola. */
html[data-tema="buio"]:not([data-tavola])[data-tema][data-tema][data-tema]{
  --pk-tela:#0e2148; --pk-tela-filo:rgba(156,199,255,.12); --pk-ghiaccio:#12295a; --pk-scheda:#142f6d; --pk-scheda-piena:#142f6d; --pk-carta:#0e2148;
  --pk-filo:rgba(156,199,255,.28); --pk-barra:#0c1d40; --pk-barra-filo:rgba(156,199,255,.22); --pk-filo-barra:rgba(156,199,255,.22);
  --pk-ink:#ffffff; --pk-ink2:#dde9fb; --pk-spento:#bcd9ff; --pk-blu:#b6d7ff;
  --pk-blu-tenue:rgba(61,123,255,.16); --pk-badge:rgba(61,123,255,.16);
}
html[data-tema="buio"]:not([data-tavola])[data-tema][data-tema][data-tema] body{background-color:#0e2148 !important}
html[data-tema="buio"]:not([data-tavola])[data-tema][data-tema][data-tema] .btnG{background:color-mix(in srgb,#3d7bff 16%,transparent)}
/* 20/10/2026 — Andrea, proposte grafiche punto 4: il colore fisso di ogni commessa (pkColoreCommessa in index.html mette
   data-pk-cc="0…7" sul codice). Solo blu, indaco, viola, lilla, magenta, rosa, turchese, azzurro: rosso/ambra/verde sono
   degli stati. Una lineetta prima del codice, alta quanto il testo; il codice resta del suo colore. */
:root{--pk-cc-0:#4f7ff0;--pk-cc-1:#8a63e6;--pk-cc-2:#c25bd0;--pk-cc-3:#23a8c4;--pk-cc-4:#e06fa8;--pk-cc-5:#5b5fd6;--pk-cc-6:#49b0f0;--pk-cc-7:#b08ce8}
.app-main [data-pk-cc]::before{content:"";display:inline-block;width:4px;height:.95em;border-radius:2px;margin-right:6px;vertical-align:-.12em;background:var(--pk-cc-0)}
.app-main [data-pk-cc="1"]::before{background:var(--pk-cc-1)}
.app-main [data-pk-cc="2"]::before{background:var(--pk-cc-2)}
.app-main [data-pk-cc="3"]::before{background:var(--pk-cc-3)}
.app-main [data-pk-cc="4"]::before{background:var(--pk-cc-4)}
.app-main [data-pk-cc="5"]::before{background:var(--pk-cc-5)}
.app-main [data-pk-cc="6"]::before{background:var(--pk-cc-6)}
.app-main [data-pk-cc="7"]::before{background:var(--pk-cc-7)}
/* 20/10/2026 — punto 6 delle proposte grafiche: la scheda del kanban che si allarga nella pagina della commessa
   (pkApriConTransizione in index.html). Breve: 280 ms, partenza veloce e arrivo morbido; il resto della pagina sfuma. */
::view-transition-group(pk-scheda-aperta){animation-duration:.28s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}

/* 23/10/2026 — Andrea, foto del calcolatore offerte: «non si leggono le scritte». La fascia di ogni attrezzo è blu-pieno, che nel
   tema scuro è verde acqua con testo scuro: la freccia e l'etichetta «✓ nell'offerta» (verde su verde) sparivano. Nel tema scuro la
   fascia diventa un blu come il resto di Quadra, testo bianco. */
html[data-tavola="scura"][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-fascia-att]{--pk-blu-pieno:color-mix(in srgb,#3d7bff 34%,#0e2148);--pk-su-pieno:#ffffff}

/* 25/10/2026 — Andrea: «fai tutte con la tua sequenza» (proposte grafiche 3 e 5), PROVA su Fatture emesse (data-pk-tabella-calma).
   3) lo stato è una parola colorata con la sua icona, senza scatola: la scatola sembrava un pulsante, e due colonne di scatole
      (Incasso, SdI) per riga facevano rumore. Colori e icone restano quelli dei toni.
   5) i titoli delle colonne restano a 16 px (Andrea 10/10: «aumenta dimensioni testi descrizione colonne»), ma grigi e di peso
      normale: si leggono prima i dati. */
html[data-tema] [data-pk-tabella-calma] [data-pk-stato][data-pk-stato]{background:transparent !important;border-color:transparent !important;padding-left:0 !important;padding-right:0 !important}
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-tabella-calma] thead th,
html[data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola][data-tavola] [data-pk-tabella-calma] thead th *{color:var(--pk-ink2) !important;font-weight:var(--pk-peso-corpo,400) !important}

/* 25/10/2026 — proposta 6 «tornare dove eri» (index.html, rTornaLi): la riga appena chiusa resta accesa un momento e si spegne. */
/* ⚠️ Contorno, non ombra né fondo: le schede del tema scuro hanno ombra e fondo `!important`, e un'animazione non li vince. */
@keyframes pk-appena-aperta{0%,60%{outline-color:var(--pk-blu)}100%{outline-color:transparent}}
[data-pk-appena-aperta]{outline:2px solid transparent;outline-offset:-2px;animation:pk-appena-aperta 2.5s ease-out}
@media (prefers-reduced-motion: reduce){[data-pk-appena-aperta]{animation:none;outline-color:var(--pk-blu)}}

/* 26/10/2026 — «modifica direttamente nella tabella»: la cella che si può cambiare lo dice al passaggio (sottolineatura tratteggiata). */
@media (hover:hover){[data-pk-cella-mod]:hover{text-decoration:underline dashed;text-decoration-color:var(--pk-blu);text-underline-offset:3px}}
/* ⭐ 26/10/2026 — Andrea, «soluzioni innovative in giro per il mondo»: la somma di quello che selezioni in una tabella
   (barra di stato di Excel/Airtable), disegnata da app-somma.js. In basso a destra, sopra la pagina: fondo pieno. */
[data-pk-somma-sel]{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:940;display:flex;flex-direction:column;gap:4px;max-width:min(560px,calc(100vw - 32px));
  padding:10px 16px;border-radius:8px;background:var(--pk-scheda-piena,var(--pk-scheda,#fff));color:var(--pk-ink,#201f1e);
  border:1px solid var(--pk-filo,#e1dfdd);box-shadow:0 12px 32px var(--pk-ombra-forte,rgba(0,0,0,.2));font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums;pointer-events:none}
[data-pk-somma-sel][hidden]{display:none}
[data-pk-somma-sel] b{font-weight:var(--pk-peso-corpo,400);color:var(--pk-ink2,#605e5c)}
[data-pk-somma-num]{font-weight:600;font-size:16px}
[data-pk-somma-sub]{color:var(--pk-ink2,#605e5c)}
@media (max-width:640px){[data-pk-somma-sel]{left:16px;right:16px;transform:none;bottom:16px}}