/* 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; /* 03/10/2026 Andrea: SOLO gli stati critici nella riga sopra le tabelle (PkRigaTabella) */
  --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-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-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;
}