/*
|--------------------------------------------------------------------------
| I colori e i caratteri dell'intera piattaforma, in un posto solo
|--------------------------------------------------------------------------
|
| Questo file esiste perche' non ce n'era uno. Il 21 agosto 2026 una
| ricognizione ha contato SEI tavolozze diverse: due blocchi :root in
| style.css, due variabili sparse in plan-cards.css, e altre due tavolozze
| scritte dentro il PHP — legal_layout.php e site_availability.php — con
| nomi in inglese le une e in italiano le altre.
|
| Il costo si era gia' visto: il blu dell'azione era scritto a mano in
| QUARANTAQUATTRO punti su tredici file. Cambiandolo nel foglio della
| Console, il sito pubblico, la pagina di download, la procedura guidata e
| le pagine legali erano rimasti con quello vecchio — e nessuno di quei
| punti aveva modo di accorgersene.
|
| Da qui in avanti il colore si cambia UNA volta. Chi aggiunge una pagina
| carica questo file e usa var(--nome): non deve piu' sapere quali sono le
| tinte, deve solo saperle chiedere.
|
| VA CARICATO PER PRIMO, prima di ogni altro foglio e di ogni <style>
| interno alla pagina: le variabili devono esistere quando le regole che le
| usano vengono lette. tests/tema.php verifica che ogni pagina che usa
| var(--...) lo carichi davvero.
|
| I DUE MODI DI DIRE "SCURO", e sono tutti e due necessari:
|
|   [data-theme="dark"]      la Console, dove il tema e' una SCELTA salvata
|                            dall'utente con l'interruttore in testata;
|   prefers-color-scheme     il sito pubblico e le pagine legali, che
|                            l'interruttore non ce l'hanno e seguono il
|                            sistema operativo di chi le apre.
|
| L'ordine conta: la scelta esplicita e' scritta dopo, quindi vince sul
| sistema operativo. Chi mette la Console in chiaro su un computer in tema
| scuro deve vederla chiara.
|
| I VALORI NON SONO CAMBIATI spostandoli qui: sono gli stessi di prima,
| riga per riga. Uno spostamento che cambia anche i colori e' due modifiche
| in una, e quando qualcosa si guasta non si sa quale delle due e' stata.
*/

:root{
    /*
    | Altezza della striscia di stato: la usano la striscia stessa e lo spazio
    | che il corpo pagina le riserva in fondo. Due punti, un valore solo.
    |
    | L'altezza dell'INTESTAZIONE non c'e' piu', e non e' una dimenticanza.
    | Era un 60px scritto a mano che tre regole scontavano dall'altezza della
    | finestra, con un commento che ammetteva l'approssimazione: l'intestazione
    | va a capo con i nomi di Centro lunghi, e nessuna proprieta' CSS sa
    | misurarla. Ora il guscio e' una colonna flessibile — la barra prende
    | quello che le serve, il resto va alle due colonne — e la misura non
    | serve piu' a nessuno.
    */
    --footer-h:38px;

    /*
    |----------------------------------------------------------------------
    | Superfici: il bianco pieno se n'e' andato, e non e' una scelta di gusto
    |----------------------------------------------------------------------
    |
    | Questa Console la si guarda per SEDICI ORE, e a decidere la fatica non
    | e' il contrasto ma la LUCE che il monitor spara addosso: una scheda
    | #ffffff e' luminanza 1,000, cioe' la sorgente massima che lo schermo
    | sa produrre, tenuta sotto gli occhi tutto il giorno.
    |
    | Le superfici emettono adesso il 9% di luce in meno (schede) e il 12%
    | in meno (fondo pagina). Il gradino fra le due resta ampio — 0,910
    | contro 0,811 — quindi le schede si staccano dalla pagina come prima:
    | si e' abbassata la luce, non il disegno.
    |
    | Non si scende oltre: sotto #eef2f7 la scheda smette di leggersi come
    | "foglio" e comincia a sembrare grigia, cioe' sporca.
    */
    --page-bg:#e4e9f0;
    --surface:#f2f5f9;
    --surface-alt:#eaeef4;

    --table-head:#dde4ec;

    /*
    |----------------------------------------------------------------------
    | Il fondo di un campo: l'unico bianco rimasto, e per una ragione
    |----------------------------------------------------------------------
    |
    | Tolto il bianco alle superfici, un campo si e' trovato dello stesso
    | colore della scheda che lo contiene: restava riconoscibile solo dal
    | bordo, e una casella che non si vede vuota non invita a scriverci.
    | Non se n'era accorto nessuno perche' i campi dell'indirizzo e dei
    | dati del titolare avevano un foglio a parte, con il bianco scritto a
    | mano rimasto da prima: erano gli unici bianchi della pagina, e la
    | differenza si leggeva come un difetto di quei due riquadri.
    |
    | Il bianco qui non contraddice la scelta sulla luce: quella riguarda
    | le SUPERFICI — pagina e schede, che occupano lo schermo intero — non
    | il rettangolo di una casella. E il gradino serve due volte, perche'
    | i campi spenti e quelli di sola lettura stanno un gradino sotto la
    | scheda: acceso, scheda, spento restano tre livelli distinti.
    */
    --campo:#ffffff;

    /*
    | Inchiostro con una punta di blu-ardesia invece del grigio neutro: si
    | intona al guscio scuro della barra e del menu, che quel blu ce l'hanno
    | gia'. Contrasto 11,4 sulla scheda — sopra il livello che regge una
    | giornata intera, senza arrivare al nero pieno che a lungo andare
    | "taglia".
    |
    | Il testo attenuato e' stato SCURITO, ed e' una correzione, non un
    | ritocco: #6b7280 sul fondo pagina dava 4,47, cioe' sotto il minimo di
    | leggibilita' per il testo normale. Adesso supera 5 su tutte e tre le
    | superfici.
    */
    --text:#2b3542;
    --muted:#57636f;
    --border:#c6cfdb;

    /*
    | L'ombra dei pannelli che si aprono sopra la pagina: il pannello
    | laterale dell'Aiuto e, dal 14/09/2026, il menu delle colonne e la barra
    | delle azioni ferma in fondo al telefono. Sta qui e non nel foglio
    | perche' un colore scritto a mano fuori da :root non ha la sua
    | seconda versione, e sul tema scuro un'ombra tarata sul chiaro o non
    | si vede o sembra sporco.
    */
    --ombra-pannello:rgba(0,0,0,.18);

    /*
    | LA BARRA DEL SITO PUBBLICO, che e' velata e non opaca.
    |
    | Era rgba(255,255,255,.96) scritta a mano nel foglio della barra: un
    | bianco che il tema non poteva seguire, e che nessuna ricognizione dei
    | colori trovava, perche' non e' un esadecimale. In tema scuro la barra
    | restava chiara mentre il marchio sopra diventava chiaro: bianco su
    | bianco, sulla prima cosa che si vede di ogni pagina pubblica.
    |
    | Sta qui e non e' var(--surface) perche' la velatura serve: sotto scorre
    | la pagina, e la barra deve lasciarla intravedere.
    */
    --nav-pubblica:rgba(255,255,255,.96);
    --nav:#333e4d;
    --header:#1e2733;

    /*
    | Il testo tenue SULLA BARRA LATERALE, che e' scura in tutti e due i temi.
    |
    | Non e' --muted con un altro nome: --muted e' calibrato sul fondo della
    | PAGINA, e nel tema chiaro vale #57636f — su una barra blu scuro fa 1,6 di
    | contrasto, cioe' si intuisce che c'e' scritto qualcosa. E' esattamente
    | quello che era successo alla riga delle scorciatoie da tastiera, marcata
    | "muted" come se fosse testo di pagina (segnalato il 30/08/2026).
    |
    | Vale lo stesso valore nei tre blocchi, ed e' voluto: il fondo sotto non
    | cambia col tema, quindi non deve cambiare nemmeno il testo.
    |
    | #a5adb9 e non il #9ca3af che era gia' scritto a mano in cinque punti del
    | foglio: quello dava 4,27 sulla barra chiara, cioe' SOTTO il minimo di 4,5
    | per il testo normale — e questa riga e' scritta piccola. Adesso 4,79 sulla
    | barra del tema chiaro e 7,66 su quella del tema scuro.
    */
    --menu-tenue:#a5adb9;

    /*
    | L ANELLO DI FUOCO SUL MENU SCURO.
    |
    | La Console segna dove si trova il fuoco con var(--accent), che sul fondo
    | chiaro delle pagine si vede benissimo e sulla barra scura del menu
    | affoga: e proprio li che si arriva con il tabulatore appena aperta una
    | pagina.
    |
    | Vale lo stesso valore nei tre blocchi, come per --menu-tenue e per la
    | stessa ragione: il fondo sotto il menu non cambia col tema, quindi non
    | deve cambiare nemmeno cio che ci si disegna sopra.
    */
    --fuoco-su-menu:#ffffff;

    /*
    | LA RIGA DI STACCO SUL MENU SCURO: fra le voci e le preferenze in fondo,
    | fra un gruppo e l'altro nel menu a sole icone, attorno alla bolla
    | dell'etichetta, e nel pannello del telefono.
    |
    | Era scritta a mano in due punti del foglio, e il menu a icone ne
    | chiedeva altri due: quattro copie dello stesso bianco velato. Stesso
    | valore nei tre blocchi, per la ragione di --menu-tenue.
    */
    --riga-su-menu:rgba(255,255,255,.15);

    /*
    |----------------------------------------------------------------------
    | Il colore dell'azione
    |----------------------------------------------------------------------
    |
    | Prima non esisteva come variabile: #0d6efd stava scritto a mano in
    | ventisette punti del foglio, piu' il suo scuro e il rosso del pericolo.
    | Cambiarlo voleva dire trovarli tutti, e chi ne dimenticava uno lasciava
    | un pulsante di un altro colore in una pagina che nessuno riapre spesso.
    |
    | La tinta e' scesa di luminosita' e di saturazione. Il blu di prima era
    | quello predefinito di Bootstrap: acceso, e su una schermata che ne
    | mostra tre o quattro insieme grida piu' di quanto informi. Questo resta
    | riconoscibile come "il pulsante" e smette di essere la cosa piu'
    | luminosa dello schermo.
    |
    | --on-accent e' il testo che ci va sopra: sul chiaro e' bianco, sul
    | fondo scuro diventa scuro, perche' li' l'azzurro schiarisce.
    */
    --accent:#1f62c4;

    /*
    | Le stesse tre componenti, separate: servono a comporre un accento
    | TRASPARENTE -- rgba(var(--accent-rgb), .08) -- che con la sola
    | --accent non si puo' scrivere. Erano quattro rgba(13,110,253,...)
    | scritti a mano in style.css, cioe' l'accento di PRIMA di questo
    | token: un blu che nessuna delle due tavolozze usa piu', rimasto sui
    | fondi al passaggio del mouse e nell'ombra della barra fissa.
    |
    | tests/tema.php vietava la forma #0d6efd e non questa, che e' lo
    | stesso colore scritto in un altro modo.
    */
    --accent-rgb:31,98,196;
    --accent-hover:#174e9e;
    --accent-soft:#dbe6f7;
    --on-accent:#ffffff;
    --danger:#c0322c;
    --danger-hover:#9c2521;

    /*
    | Due fondi che portano SEMPRE testo bianco, e per questo non possono
    | seguire il tema: erano l'uno --muted e l'altro un'ambra scritta a mano,
    | e sul fondo scuro il bianco ci finiva sopra a 2,5 e a 3,2 — cioe' sotto
    | la soglia di leggibilita' per il testo piccolo. Sono l'icona del sistema
    | operativo nella scheda device e il numero accanto alle voci di menu:
    | due cose che si leggono di sfuggita, che e' proprio quando il contrasto
    | serve.
    |
    | Restano identici nei due temi perche' il bianco sopra e' fisso: un
    | fondo che schiarisse col tema scuro ricreerebbe il difetto.
    */
    --chip-neutro:#4b5563;
    --chip-avviso:#9a5808;

    /*
    | Il giallo dell'attenzione: fondo tenue e testo scuro sopra. Serviva un
    | token perche' la stessa coppia era scritta a mano in cinque punti —
    | contrassegni, avviso di sessione, nota interna del ticket, risultato
    | evidenziato nella guida — e NESSUNO di quei cinque aveva una versione
    | per il tema scuro: sul fondo scuro restavano cinque rettangoli color
    | crema in mezzo alla pagina.
    */
    --avviso-fondo:#fdf3e2;
    --avviso-testo:#8a5300;
    --avviso-bordo:#e8c07a;
    --evidenza:#fff3a3;
    --evidenza-testo:#2b3542;

    /*
    | Tavolozza dei grafici.
    |
    | Quattro tinte in ordine FISSO: la serie prende il colore dalla sua
    | posizione nell'elenco, mai dalla sua posizione in classifica. Un
    | filtro che toglie una serie non deve ridipingere quelle rimaste, o
    | due schermate dello stesso grafico racconterebbero due cose diverse.
    |
    | L'ordine non e' estetico: e' l'ordine in cui le coppie vicine restano
    | distinguibili anche a chi non separa il rosso dal verde, ed e' il
    | motivo per cui il giallo sta in fondo — accanto all'arancio sarebbe
    | proprio la coppia che si perde. Oltre la quarta serie non si aggiunge
    | una tinta nuova: si accorpa in "altri".
    |
    | Positivo e negativo NON sono la prima e la seconda tinta: sono due
    | colori riservati allo stato, e usarli anche come serie farebbe leggere
    | come "in perdita" una barra che era solo la seconda dell'elenco.
    */
    --viz-1:#2a78d6;
    --viz-2:#eb6834;
    --viz-3:#1baf7a;
    --viz-4:#eda100;
    --viz-positivo:#1baf7a;
    --viz-negativo:#e34948;
    --viz-saldo:#64748b;
    --viz-parziale:#9dc2ef;

    /* Verde e ambra leggibili sul fondo chiaro: i delta dei riquadri. */
    --esito-buono:#19632f;
    --esito-cattivo:#9c2317;

    /*
    | La stella dei preferiti accesa. Sta fra le variabili e non scritta nel
    | punto in cui si usa perche' il fondo scuro ne pretende una versione
    | diversa: l'ambra scelta per il bianco, sul grigio scuro, si spegne
    | proprio mentre deve dire "questa riga e' una delle tue".
    */
    --preferito:#b07800;

    /*
    | I due fondi dei riquadri dei piani. Stavano in plan-cards.css, che era
    | l ultima tavolozza rimasta fuori da qui.
    */

    /*
    | I tre esiti degli avvisi: fondo tenue e testo scuro sopra. Erano scritti
    | a mano in popup.css e in style.css, e popup.css non aveva versione
    | scura: nel tema scuro i tre riquadri restavano color pastello.
    */
    --esito-ok-fondo:#e6f4ea;
    --esito-ok-testo:#1a6634;
    --esito-errore-fondo:#fdecea;
    --esito-errore-testo:#9c2317;

    /*
    | Il terzo esito, quello NEUTRO: "non si sa", "mai vista", "disattivato".
    | Non e' ne' buono ne' cattivo, e usare il grigio del testo secondario lo
    | avrebbe fatto sparire dentro la pagina -- un badge che non si vede non
    | e' un badge. Era scritto a mano in sei regole di style.css, tutte senza
    | versione scura: nel tema scuro restavano sei pillole grigio chiaro.
    */
    --esito-neutro-fondo:#f0f1f3;
    --esito-neutro-testo:#555555;

    --plan-scelto-bg:#f5f9ff;
    --plan-rilievo-bg:#ffffff;

    /*
    | I pallini delle schede device: la tinta piena del sistema operativo e
    | quella dello stato. Erano sette esadecimali scritti a mano in style.css
    | (undicesima ricognizione, F11): qui hanno un nome, e un domani una
    | versione scura si scrive in un punto solo. Nessuna per ora, di proposito:
    | sono pallini pieni con dentro una lettera bianca, leggibili su tutti e
    | due i fondi. Non sono i colori dei badge, che sono fondi pastello con
    | testo scuro: un pallino da nove pixel ha bisogno della tinta piena.
    */
    --sistema-win:#2f6fd0;
    --sistema-linux:#c9740a;
    --sistema-android:#2e9e5b;
    --sistema-ignoto:#9aa4b0;
    --stato-online:#1baf7a;
    --stato-offline:#e08e3c;
    --stato-mai:#9aa4b0;

    /*
    | L'immagine ingrandita (assets/css/ingranditore.css), per Console e sito.
    | Nessuna versione scura, di proposito: il velo e' scuro in tutti e due i
    | temi, perche' deve staccare l'immagine qualunque sia il fondo della pagina.
    */
    --ingranditore-velo:rgba(15,23,35,.82);
    --ingranditore-ombra:rgba(0,0,0,.45);
    --ingranditore-x:rgba(255,255,255,.14);
    --ingranditore-x-attiva:rgba(255,255,255,.26);
    --ingranditore-x-testo:#fff;
    --ingranditore-fondo-immagine:var(--surface);
}

:root{
    /*
    |----------------------------------------------------------------------
    | I caratteri
    |----------------------------------------------------------------------
    |
    | Erano NOVE pile scritte a mano in nove file, e divergevano gia': sette
    | scrivevano Segoe UI senza virgolette — che con lo spazio dentro il nome
    | e' CSS non valido, e i browser perdonano finche' perdonano — una ne
    | aveva una versione piu' corta, e una diceva solo "sans-serif".
    |
    | system-ui prende il carattere d'interfaccia della macchina: su Windows
    | e' Segoe UI, disegnato per lo schermo, con le minuscole piu' alte e le
    | forme piu' aperte di Arial. A parita' di corpo si legge piu' grande.
    |
    | Nessun carattere scaricato dalla rete, ed e' deliberato: sarebbe una
    | dipendenza esterna su un prodotto che gira anche in reti chiuse, e i
    | fogli di Google Fonts consegnano l'indirizzo IP di chi apre la pagina a
    | un terzo. Su una Console che i Centri usano davanti ai propri Clienti
    | non e' una scelta che spetta a noi.
    |
    | L'elenco finisce su Arial: dove nessuno dei nomi precedenti esiste, si
    | torna esattamente a com'era prima.
    |
    | LE EMAIL NON POSSONO USARLI. I client di posta non conoscono le
    | variabili CSS: nei template la pila resta scritta per esteso, ed e'
    | l'unica eccezione ammessa.
    */
    --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,"Liberation Mono",monospace;

    /*
    |----------------------------------------------------------------------
    | La scala dei corpi: sette gradini e nessun altro valore (15/09/2026)
    |----------------------------------------------------------------------
    |
    | Nei fogli della Console c'erano VENTUNO dimensioni diverse, da 10 a 34
    | pixel, compresi 11.5, 12.5 e 13.5: ognuna scelta guardando un pezzo
    | solo, e nessuna che dicesse a quale famiglia apparteneva. Il risultato
    | si vedeva solo mettendo due pagine accanto — la stessa etichetta a 11
    | in una e a 12 nell'altra — e soprattutto sul telefono, dove 10 e 11
    | pixel non si leggono.
    |
    | Adesso un corpo si sceglie per RUOLO. Sotto i 12 non si scende: e' il
    | minimo che si legge su uno schermo piccolo tenuto in mano.
    | tests/soglie_responsive.php rifiuta un font-size in pixel nei fogli
    | della Console: chi ne scrive uno nuovo sceglie il gradino.
    */
    --corpo-min:12px;               /* etichette, contrassegni, note minute */
    --corpo-piccolo:13px;           /* tabelle, spiegazioni, comandi secondari */
    --corpo:14px;                   /* il testo della Console */
    --corpo-lettura:16px;           /* lettura, campi sul telefono, simboli dei pulsanti */
    --corpo-titolo:18px;            /* titoli di riquadro e pannello */
    --corpo-titolo-grande:22px;     /* il nome del Centro, i numeri dei riquadri compatti */
    --corpo-numero:28px;            /* i numeri grandi dei riquadri */

    /*
    |----------------------------------------------------------------------
    | Lo spazio fra due riquadri di primo livello
    |----------------------------------------------------------------------
    |
    | Stessa storia dei colori, un mese dopo. .card non aveva nessun
    | margine: la distanza fra due schede non era una regola del foglio, era
    | cio' che ogni pagina scriveva a mano in mezzo. Una ricognizione del 21
    | agosto 2026 ha contato CENTODODICI confini fra schede consecutive:
    | sessantotto separati da un <br>, trentaquattro da niente, due da due
    | <br> di fila. Nove pagine si contraddicevano da sole — sulla stessa
    | schermata certe schede si toccavano e altre no.
    |
    | I ventuno pixel del <br> non li aveva scelti nessuno: sono l'altezza
    | di una riga di testo al corpo predefinito del browser, cioe' quello
    | che avanzava. Non corrispondono a nessun'altra misura del foglio.
    |
    | E un <br> e' markup, non stile: non si cambia in un punto solo, non si
    | puo' stringere sul telefono, e sopravvive alla STAMPA — dove le schede
    | perdono imbottitura e ombra e si toccano davvero, mentre i <br>
    | continuano a spingere.
    |
    | Da qui in avanti lo spazio lo mette il foglio. Nelle pagine, fra un
    | riquadro e il successivo, non ci va niente: tests/spaziatura_box.php
    | non lascia rientrare i <br> dalla finestra.
    */
    --stacco-riquadri:16px;

    /*
    |----------------------------------------------------------------------
    | Il margine laterale della pagina
    |----------------------------------------------------------------------
    |
    | Uno solo per la testata, il contenuto e la striscia di stato. Fino al
    | 14/09/2026 erano tre numeri scritti a mano — 30px sullo schermo largo;
    | 16px per testata e striscia e 12px per il contenuto sul telefono — e
    | sul telefono il marchio stava 4px piu' in dentro del bordo delle schede:
    | la colonna non era allineata con niente.
    |
    | Questo e' il valore fisso, per i browser che clamp() non lo conoscono
    | (Chrome sotto il 79); quello fluido sta subito sotto, dentro @supports.
    */
    --margine-pagina:16px;

    /*
    | La riga di testo piu' lunga che si legge senza perdere il filo.
    |
    | La Console non ha una larghezza massima — le tabelle vogliono spazio —
    | e il testo si prendeva quella del riquadro: su uno schermo da 1920 le
    | spiegazioni di Impostazioni Centro arrivavano a 245 caratteri per riga
    | (misurato il 14/09/2026), e a fine riga l'occhio tornava a capo su
    | quella sbagliata. Settanta caratteri circa e' la misura dei libri.
    |
    | NELLA CONSOLE NON SI USA PIU' (16/09/2026), e non va rimessa sui
    | paragrafi: in un riquadro largo quanto la finestra una misura fissa
    | ferma il testo a un terzo e il resto resta bianco, che si legge come un
    | taglio. Li' il tetto e' --modulo-larghezza, il perche' sta sulla regola
    | dei paragrafi in console/assets/css/style.css. Resta per il sito
    | pubblico, dove la colonna e' centrata e il bianco sta fuori.
    */
    --misura-testo:72ch;

    /*
    | LA LARGHEZZA DI UN MODULO.
    |
    | Il numero c'era gia' — scritto dentro .form-grid il 15/09/2026, per non
    | avere sei colonne di caselle su uno schermo da 1920 — ma viveva li' e
    | basta. Il 16/09/2026 lo usava anche la didascalia dei moduli; dal giorno
    | stesso il testo ha un tetto suo, --testo-larghezza, qui sotto.
    |
    | Il difetto, segnalato il 16/09/2026: su «SMTP del Centro» la didascalia si
    | fermava a --misura-testo (circa 640px) e il modulo sotto arrivava a 1100.
    | Due bordi destri diversi nello stesso riquadro, a quattrocentosessanta
    | pixel di distanza: il testo non si legge come "corto", si legge come
    | TAGLIATO. Non era la misura a essere sbagliata, era l'unico elemento
    | stretto in mezzo a elementi larghi.
    */
    --modulo-larghezza:1100px;

    /*
    | IL TETTO DEL TESTO DELLA CONSOLE: il riquadro intero, fino a 1920.
    |
    | Deciso da Roberto il 16/09/2026, dopo tre tentativi di fermare il testo
    | prima del bordo del riquadro. A 72ch e poi a 1100px, sullo schermo da
    | 1920 su cui si lavora la Console restava un bianco di 450-1000px a
    | destra, e il testo si leggeva come TAGLIATO. 1600 e' piu' largo del
    | riquadro a 1920 col menu aperto (circa 1550), quindi li' non scatta mai:
    | ferma il testo solo su un monitor da 2560 o col menu nascosto.
    |
    | Il costo e' dichiarato: a 1920 una descrizione arriva a ~220 caratteri
    | per riga, il difetto misurato il 14/09. Si accetta perche' sono
    | didascalie di due o tre righe, e un testo che sembra mozzato era peggio.
    | Non si abbassa sotto la larghezza del riquadro a 1920 senza chiederlo.
    */
    --testo-larghezza:1600px;

    /*
    | La larghezza del sito pubblico, e di tutto cio' che si allinea a lui:
    | la sua barra, le pagine legali, la registrazione, lo scaricamento, il
    | piede e il riquadro della configurazione guidata. Erano 1120px scritti
    | a mano in quindici punti di dodici file — tre dei quali ripetevano la
    | regola che il guscio del sito dava gia' a tutte le pagine — e un
    | collaudo controllava che fossero uguali uno per uno. Adesso sono una
    | variabile, e l'uguaglianza non c'e' piu' da controllare.
    */
    --sito-larghezza:1120px;
}

/*
| IL VALORE FLUIDO DENTRO @supports, e non una seconda dichiarazione sotto
| la prima come si fa di solito.
|
| Il ripiego «scrivi prima il fisso, poi quello nuovo» funziona sulle
| proprieta' vere, dove un valore sconosciuto viene scartato e resta il
| precedente. Su una variabile no: il browser accetta qualunque testo come
| valore di una variabile, e l'errore salta fuori solo dove la si usa —
| dove la proprieta' diventa NULLA. Un Chrome vecchio avrebbe perso tutti i
| margini della pagina, non ripiegato sui 16px.
|
| I DUE ESTREMI SONO DECISIONI, non gusti. 12px su ogni telefono tenuto
| dritto (fino a 400px di larghezza): e' la misura scelta da Roberto il
| 14/09/2026 per il contenuto, perche' sedici per lato erano un sesto dello
| schermo di sola cornice — e adesso la segue anche la testata, che restava a
| sedici. 30px dai 760 in su, gli stessi dello schermo largo di prima: sul
| portatile non cambia niente. In mezzo — telefoni di traverso, tablet
| piccoli — il margine cresce con la finestra invece di saltare.
*/
@supports (width:clamp(1px, 1vw, 2px)){
    :root{
        --margine-pagina:clamp(12px, 5vw - 8px, 30px);
    }
}

/*
|--------------------------------------------------------------------------
| Quando la Console e' «sul telefono»
|--------------------------------------------------------------------------
|
| La condizione e' quella dei blocchi del telefono di style.css, scritta
| identica (tests/soglie_responsive.php lo impone): la finestra stretta,
| oppure bassa e larga fino a un telefono di traverso.
|
| Serve agli SCRIPT. Chiedevano matchMedia('(max-width: 768px)') in tre punti
| (app.js e menu-posto.js), e il 14/09/2026 la condizione del foglio e'
| cambiata: tre copie in JavaScript sarebbero rimaste a pensare la vecchia,
| con il menu del telefono disegnato e lo script convinto di stare su un
| computer. Adesso leggono questa variabile con guscioTelefono(), e la soglia
| non e' scritta in nessun .js.
|
| Sta qui e non in style.css perche' le variabili si dichiarano in questo
| file e in nessun altro (tests/tema.php). Il sito pubblico la riceve e non
| la guarda nessuno: non ha script che la leggano.
*/
@media (max-width:768px), (max-height:500px) and (max-width:1023px){
    :root{
        --guscio:telefono;
    }
}

/*
| E il tablet: fra il telefono e il portatile, cioe' largo da 769 a 1023 e
| non basso (basso e' il telefono di traverso, qui sopra). Lo legge
| menuFormaLarga() in menu-posto.js: chi non ha mai scelto la forma del menu
| qui ci trova le sole icone, perche' il menu intero accanto al contenuto gli
| lasciava 552 pixel su 820 (misurato il 14/09/2026). Il perche' della forma
| «non scelta» sta su MENU_FORMA_AUTOMATICA (user_preferences.php).
*/
@media (min-width:769px) and (max-width:1023px) and (min-height:501px){
    :root{
        --guscio:tablet;
    }
}

/*
|--------------------------------------------------------------------------
| Cinque pagine restano fuori di qui, ed e' una decisione
|--------------------------------------------------------------------------
|
| register.php, console/setup_wizard.php, download.php,
| public/agent_download.php e console/includes/auth_shell_top.php hanno un
| <style> proprio con i colori scritti per esteso. Non e' una dimenticanza da
| correggere: e' stato guardato il 22 agosto 2026 e si e' scelto di
| lasciarle.
|
| IL MOTIVO E' CHE TOKENIZZARLE NON SAREBBE NEUTRO. Le tinte li' dentro sono
| quelle di prima del giro sull'affaticamento: la scheda del login e' #fff
| dove --surface dice #f2f5f9, il testo e' #172235 dove --text dice #2b3542,
| il blu e' #1769d2 dove --accent dice #1f62c4. Usare le variabili
| sposterebbe l'aspetto di cinque pagine, fra cui la registrazione, che e' la
| prima cosa che vede un Centro nuovo — e il tema scuro non si puo'
| fotografare con l'anteprima, quindi il controllo sarebbe a occhio nudo su
| pagine che nessuno riapre spesso.
|
| Chi ritocca la tavolozza qui dentro deve quindi sapere che quelle cinque
| pagine NON lo seguono. Se un giorno si decide di allinearle, si allineano
| tutte insieme e si guardano una per una: e' un lavoro a se', non
| l'effetto collaterale di un ritocco.
*/

:root[data-theme="dark"]{
    /*
    | Sul fondo scuro il problema e' l'opposto: non la luce emessa, ma
    | l'alone che il testo troppo chiaro lascia intorno alle lettere dopo
    | qualche ora. Il testo e' quindi sceso di un gradino — 12,2 invece di
    | 11,9 sulla scheda nuova, che e' a sua volta piu' scura — e le superfici
    | si sono separate un po' di piu' fra loro, cosi' le righe alternate
    | delle tabelle si distinguono senza bisogno di bordi piu' forti.
    */
    --page-bg:#0f151d;
    --surface:#1a222c;
    --surface-alt:#222b37;
    --text:#dae1e9;
    --muted:#98a5b4;
    --border:#333f4d;
    --ombra-pannello:rgba(0,0,0,.45);
    --table-head:#28323f;
    --nav-pubblica:rgba(26,34,44,.96);
    --nav:#141b24;
    --header:#0a1017;

    /* Vedi il perche' accanto alla prima definizione. */
    --menu-tenue:#a5adb9;

    /*
    | L ANELLO DI FUOCO SUL MENU SCURO.
    |
    | La Console segna dove si trova il fuoco con var(--accent), che sul fondo
    | chiaro delle pagine si vede benissimo e sulla barra scura del menu
    | affoga: e proprio li che si arriva con il tabulatore appena aperta una
    | pagina.
    |
    | Vale lo stesso valore nei tre blocchi, come per --menu-tenue e per la
    | stessa ragione: il fondo sotto il menu non cambia col tema, quindi non
    | deve cambiare nemmeno cio che ci si disegna sopra.
    */
    --fuoco-su-menu:#ffffff;

    /* Vedi il perche' accanto alla prima definizione. */
    --riga-su-menu:rgba(255,255,255,.15);

    /* Sul fondo scuro il campo SCHIARISCE, per lo stesso motivo. */
    --campo:#273449;

    /*
    | L'azzurro dell'azione SCHIARISCE sul fondo scuro invece di scurire:
    | il blu del tema chiaro, messo qui, diventa una macchia scura su fondo
    | scuro — si vede il pulsante, non si legge. E per la stessa ragione il
    | testo che ci va sopra torna scuro.
    */
    --accent:#5b9bf0;
    --accent-rgb:91,155,240;
    --accent-hover:#7db0f5;
    --accent-soft:#1c2b40;
    --on-accent:#0b1220;
    --danger:#ef7a72;
    --danger-hover:#f59b95;

    /*
    | I due chip NON si ridichiarano: portano testo bianco fisso, e sul
    | chiaro come sullo scuro devono restare abbastanza scuri da reggerlo.
    |
    | Il giallo dell'attenzione invece si capovolge: fondo bruno profondo e
    | testo ambra chiara. Cosi' l'avviso resta un avviso — si nota — senza
    | diventare la macchia piu' luminosa di una schermata scura.
    */
    --avviso-fondo:#3a2c14;
    --avviso-testo:#f0c274;
    --avviso-bordo:#6b5220;
    --evidenza:#5c4a12;
    --evidenza-testo:#f7e9b8;

    /*
    | Le stesse otto tinte ristampate per il fondo scuro, non le chiare
    | capovolte: un colore scelto per il bianco, messo sul grigio scuro,
    | perde il contrasto e diventa una macchia. Vale soprattutto per i due
    | esiti — il verde e il rosso dei delta erano illeggibili, e sono
    | esattamente il numero che si va a cercare.
    */
    --viz-1:#3987e5;
    --viz-2:#d95926;
    --viz-3:#199e70;
    --viz-4:#c98500;
    --viz-positivo:#199e70;
    --viz-negativo:#e66767;
    --viz-saldo:#94a3b8;
    --viz-parziale:#2c5c94;

    --esito-buono:#5dd39e;
    --esito-cattivo:#f08c8c;

    /* Piu' chiara della gemella: sul fondo scuro l'ambra deve schiarire. */
    --preferito:#f3ba36;


    --esito-ok-fondo:#12301f;
    --esito-ok-testo:#7fd8a3;
    --esito-errore-fondo:#33191a;
    --esito-errore-testo:#f0a099;
    --esito-neutro-fondo:#2a2f38;
    --esito-neutro-testo:#a8b0bd;

    --plan-scelto-bg:#1d3a5f;
    --plan-rilievo-bg:#2e3f5b;
}

@media (prefers-color-scheme:dark){
    /*
    | Le pagine pubbliche non hanno l'interruttore del tema: seguono il
    | sistema. :not([data-theme="light"]) lascia che la scelta esplicita
    | della Console vinca comunque.
    */
    :root:not([data-theme="light"]){
    /*
    | I SEI CHE MANCAVANO, e non era una svista qualunque.
    |
    | I due blocchi scuri devono dichiarare gli STESSI token: quello sopra
    | vale per chi preme l'interruttore nella Console, questo per chi ha il
    | sistema operativo in tema scuro -- ed e' l'unico che il SITO PUBBLICO
    | possa usare, perche' li' l'interruttore non c'e'.
    |
    | Mancando qui, --esito-ok-fondo restava #e6f4ea anche su una pagina
    | scura: un riquadro verde chiaro con dentro il proprio testo verde
    | scuro, in mezzo a una pagina nera. Si vedeva sul terzo passaggio della
    | pagina "Scarica l'Agent", che e' quella che guarda un Cliente.
    |
    | tests/tema.php adesso confronta i due elenchi: chi ne aggiunge uno da
    | una parte sola lo scopre subito.
    */
    --esito-ok-fondo:#12301f;
    --esito-ok-testo:#7fd8a3;
    --esito-errore-fondo:#33191a;
    --esito-errore-testo:#f0a099;
    --esito-neutro-fondo:#2a2f38;
    --esito-neutro-testo:#a8b0bd;
    --plan-scelto-bg:#1d3a5f;
    --plan-rilievo-bg:#2e3f5b;

    /*
    | Sul fondo scuro il problema e' l'opposto: non la luce emessa, ma
    | l'alone che il testo troppo chiaro lascia intorno alle lettere dopo
    | qualche ora. Il testo e' quindi sceso di un gradino — 12,2 invece di
    | 11,9 sulla scheda nuova, che e' a sua volta piu' scura — e le superfici
    | si sono separate un po' di piu' fra loro, cosi' le righe alternate
    | delle tabelle si distinguono senza bisogno di bordi piu' forti.
    */
    --page-bg:#0f151d;
    --surface:#1a222c;
    --surface-alt:#222b37;
    --text:#dae1e9;
    --muted:#98a5b4;
    --border:#333f4d;
    --ombra-pannello:rgba(0,0,0,.45);
    --table-head:#28323f;
    --nav-pubblica:rgba(26,34,44,.96);
    --nav:#141b24;
    --header:#0a1017;

    /* Vedi il perche' accanto alla prima definizione. */
    --menu-tenue:#a5adb9;

    /*
    | L ANELLO DI FUOCO SUL MENU SCURO.
    |
    | La Console segna dove si trova il fuoco con var(--accent), che sul fondo
    | chiaro delle pagine si vede benissimo e sulla barra scura del menu
    | affoga: e proprio li che si arriva con il tabulatore appena aperta una
    | pagina.
    |
    | Vale lo stesso valore nei tre blocchi, come per --menu-tenue e per la
    | stessa ragione: il fondo sotto il menu non cambia col tema, quindi non
    | deve cambiare nemmeno cio che ci si disegna sopra.
    */
    --fuoco-su-menu:#ffffff;

    /* Vedi il perche' accanto alla prima definizione. */
    --riga-su-menu:rgba(255,255,255,.15);

    /* Sul fondo scuro il campo SCHIARISCE, per lo stesso motivo. */
    --campo:#273449;

    /*
    | L'azzurro dell'azione SCHIARISCE sul fondo scuro invece di scurire:
    | il blu del tema chiaro, messo qui, diventa una macchia scura su fondo
    | scuro — si vede il pulsante, non si legge. E per la stessa ragione il
    | testo che ci va sopra torna scuro.
    */
    --accent:#5b9bf0;
    --accent-rgb:91,155,240;
    --accent-hover:#7db0f5;
    --accent-soft:#1c2b40;
    --on-accent:#0b1220;
    --danger:#ef7a72;
    --danger-hover:#f59b95;

    /*
    | I due chip NON si ridichiarano: portano testo bianco fisso, e sul
    | chiaro come sullo scuro devono restare abbastanza scuri da reggerlo.
    |
    | Il giallo dell'attenzione invece si capovolge: fondo bruno profondo e
    | testo ambra chiara. Cosi' l'avviso resta un avviso — si nota — senza
    | diventare la macchia piu' luminosa di una schermata scura.
    */
    --avviso-fondo:#3a2c14;
    --avviso-testo:#f0c274;
    --avviso-bordo:#6b5220;
    --evidenza:#5c4a12;
    --evidenza-testo:#f7e9b8;

    /*
    | Le stesse otto tinte ristampate per il fondo scuro, non le chiare
    | capovolte: un colore scelto per il bianco, messo sul grigio scuro,
    | perde il contrasto e diventa una macchia. Vale soprattutto per i due
    | esiti — il verde e il rosso dei delta erano illeggibili, e sono
    | esattamente il numero che si va a cercare.
    */
    --viz-1:#3987e5;
    --viz-2:#d95926;
    --viz-3:#199e70;
    --viz-4:#c98500;
    --viz-positivo:#199e70;
    --viz-negativo:#e66767;
    --viz-saldo:#94a3b8;
    --viz-parziale:#2c5c94;

    --esito-buono:#5dd39e;
    --esito-cattivo:#f08c8c;

    /* Piu' chiara della gemella: sul fondo scuro l'ambra deve schiarire. */
    --preferito:#f3ba36;
    }
}