/* QORVA — base grafica condivisa (mandato 4.4, 28/09/2026).
UNA sola sorgente per token e componenti di base di tutti i software. I singoli software
NON ridefiniscono i token: li usano. Identita' del core gia' approvata: Inter, blu notte,
accento ciano #00D4FF, temi notte (predefinito) / giorno / tramonto condivisi con la stessa
preferenza utente (localStorage `qorva_theme_override`, vedi qorva-theme.js).
Scala tipografica unica (in unita' relative, base 16px):
corpo e campi 1rem (16px)
navigazione, pulsanti, tabelle .875rem (14px)
metadati .75rem (12px) <- minimo: nessun testo operativo sotto questa soglia
titolo pagina 1.75rem (28px)
sezione 1.375rem (22px)
sottosezione 1.125rem (18px)
La gerarchia dei titoli resta: l'uniformita' e' fra elementi EQUIVALENTI nei vari software. */
:root,
:root[data-theme="day"]{
/* ======================================================================================
SORGENTE UNICA DEI TOKEN QORVA (redesign 06/10/2026).
I valori --q-* sono quelli approvati. Tutto il resto di questo blocco e' una MAPPATURA
dei nomi storici su quei valori: i ventisette applicativi usano gia' --bg, --line,
--card, --text, --c... e continuano a usarli, ma adesso puntano alla palette approvata.
Cosi' l'identita' cambia in un posto solo invece che in ventisette, e nessun modulo puo'
ridefinirsi una palette propria senza che si veda.
====================================================================================== */
--q-blue:#076AFA;
--q-cyan:#32DFFF;
--q-canvas:#F3F6FB;
--q-panel:#FFFFFF;
--q-surface:#EDF3FA;
--q-hover:#E5EEF9;
--q-border:#DCE5F0;
--q-border-strong:#ADC5DF;
--q-text:#16283E;
--q-muted:#526780;
--q-subtle:#647890;
--q-accent:#0869D7;
--q-accent-soft:#E8F3FF;
/* I canali dell'accento separati, perche' CSS non sa prendere l'alpha di un colore gia'
scritto in esadecimale: `rgba(var(--q-accent-rgb),.16)` si', `rgba(var(--q-accent),.16)`
no. Serve alla voce di navigazione attiva, che vuole una velatura dell'accento e non una
tinta piatta: trasparente si compone sopra qualunque fondo ci sia dietro. Tenere i due
valori in riga e' l'unico obbligo di questo token. */
--q-accent-rgb:8,105,215;
--q-header:#FFFFFF;
/* Il testo SOPRA l'accento. In Giorno l'accento e' un blu medio e vuole testo bianco; in
Notte e' un ciano chiaro e vuole testo scuro. Era scritto a mano come #04121c in ogni
applicativo: su fondo blu faceva circa 2,5:1, e il censimento dei pannelli interni lo ha
segnalato su ogni pannello di ogni applicativo. */
--q-on-accent:#FFFFFF;
--q-success:#147052; --q-success-soft:#E2F4EC;
/* L'INFORMATIVO E' L'ACCENTO. Deciso il 07/10/2026: niente viola, l'identita' e' blu e ciano.
Questi due sono ALIAS, non copie: non hanno un valore proprio, quindi non possono andare
fuori sincrono con l'accento e non c'e' una seconda tavolozza da mantenere.
Il significato del token resta: «informativo» continua a essere una cosa diversa da successo,
attenzione ed errore, e non e' diventato un avviso. Cio' che cambia e' COME si distingue da
una pastiglia d'accento che gli sta accanto: non piu' per tinta, ma per riempimento - vedi
--q-info-contorno qui sotto. */
--q-info:var(--q-accent); --q-info-soft:var(--q-accent-soft);
/* IL FONDO DELLA PASTIGLIA INFORMATIVA «A CONTORNO», e perche' non e' `transparent`.
In tre applicativi una pastiglia informativa sta nella STESSA colonna di una d'accento -
«Inviato» accanto ad «Approvato», «Qualificato» accanto a «Proposta», e in Operations e
Procurement il tipo «pallet»/«hardware» accanto al tipo predefinito, che e' gia' l'accento.
Con l'alias diventerebbero identiche: due stati diversi, stessa pastiglia, in una colonna che
si legge a colpo d'occhio. Si distinguono per riempimento invece che per tinta - una piena,
una a contorno - che e' la stessa convenzione gia' usata da `.type-badge.other`.
Il fondo e' --q-panel e NON `transparent` per una ragione misurata: in Giorno l'accento sopra
--q-hover, cioe' la riga sotto il puntatore, sta a 4,47:1 - sotto la soglia di 4,5. Una
pastiglia trasparente diventerebbe illeggibile proprio mentre la si indica. Con il fondo del
pannello il contrasto non dipende da cosa c'e' dietro: 5,23:1 in Giorno, 9,68:1 in Notte. */
--q-info-contorno:var(--q-panel);
--q-warning:#8C5705; --q-warning-soft:#FFF1D7;
--q-danger:#B4324E; --q-danger-soft:#FDE8ED;
/* Il testo SOPRA il rosso pieno, non sulla sua velatura. Oggi vale quanto --q-on-accent,
perche' in Giorno accento e rosso sono tutti e due scuri e in Notte tutti e due chiari;
ha un nome suo lo stesso, cosi' il giorno in cui uno dei due cambia lato non si porta
dietro l'altro. Serviva alla pastiglia delle notifiche di Finance, che aveva #04121c
fissato a mano: 2,9:1 sul rosso di Giorno, cioe' un numero che non si leggeva proprio
nell'elemento che esiste per farsi notare. */
--q-on-danger:#FFFFFF;
--q-radius-panel:16px;
--q-radius-control:9px;
--q-sidebar-width:242px;
--q-header-height:76px;
--q-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
color-scheme:light;
/* --- tipografia: una sola scala, stessa misura per lo stesso ruolo ovunque -------------
Testo operativo di base 14px. I metadati restano a 12px: sotto quella soglia non scende
niente che una persona debba leggere per lavorare. I numeri usano le cifre tabulari, cosi'
importi e quantita' incolonnano. */
--font:var(--q-font);
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--fs-body:.875rem;--fs-ui:.875rem;--fs-meta:.75rem;
--fs-h1:1.75rem;--fs-h2:1.375rem;--fs-h3:1.125rem;
--lh-body:1.5;--lh-tight:1.25;
/* --- geometria --- */
--radius:var(--q-radius-control);--radius-lg:var(--q-radius-panel);--radius-pill:999px;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:30px;
--field-h:40px;--btn-pad:10px 14px;--cell-pad:10px;
/* --- mappatura dei nomi storici sulla palette approvata --- */
--qorva-brand-color:var(--q-cyan);
--bg:var(--q-canvas);--bg2:var(--q-canvas);
--line:var(--q-border);--text:var(--q-text);--muted:var(--q-muted);
--card:var(--q-panel);--card2:var(--q-panel);--card-blur:0px;
--c:var(--q-accent);--bl:var(--q-accent);
--g:var(--q-success);--y:var(--q-warning);--o:var(--q-warning);--r:var(--q-danger);
--pu:var(--q-accent);--pk:var(--q-danger);
--shadow:0 1px 2px rgba(22,40,62,.06),0 8px 24px rgba(22,40,62,.06);
--btn-bg:var(--q-surface);--btn-text:var(--q-text);
--focus:0 0 0 3px rgba(8,105,215,.35);
--theme-transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
:root[data-theme="night"]{
--q-canvas:#060E1B;
--q-panel:#0D192B;
--q-surface:#112239;
--q-hover:#163049;
--q-border:#1C3048;
--q-border-strong:#315776;
--q-text:#EBF4FF;
--q-muted:#9AADBF;
--q-subtle:#8BA1B9;
--q-accent:#45CEFF;
--q-accent-soft:#102D49;
--q-accent-rgb:69,206,255;
--q-header:#091524;
--q-on-accent:#06121F;
--q-success:#77D8AE; --q-success-soft:#122F2B;
/* Alias anche qui: il tema Notte non ridefinisce --q-info, perche' --q-accent cambia gia'
da solo. Le righe restano per rendere esplicito che la scelta vale per i due temi. */
--q-info:var(--q-accent); --q-info-soft:var(--q-accent-soft);
--q-info-contorno:var(--q-panel);
--q-warning:#F6C573; --q-warning-soft:#352C1C;
--q-danger:#FF9BAC; --q-danger-soft:#352333;
--q-on-danger:#06121F;
color-scheme:dark;
--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
--focus:0 0 0 3px rgba(69,206,255,.4);
}
/* ---- elementi di base (bassa specificita': i software possono specializzare, non ridefinire) ---- */
*{box-sizing:border-box}
html{font-size:100%;transition:var(--theme-transition)}
body{margin:0;background:linear-gradient(135deg,var(--bg),var(--bg2));color:var(--text);font:var(--fs-body)/var(--lh-body) var(--font);transition:var(--theme-transition)}
h1{margin:0;font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:800;text-wrap:balance}
h2{margin:0;font-size:var(--fs-h2);line-height:var(--lh-tight);font-weight:700}
h3{margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);font-weight:700}
a{color:inherit}
small,.meta{font-size:var(--fs-meta)}
/* TESTO PER I SOLI LETTORI DI SCHERMO. Finance ce l'aveva (.sr-only in tokens.css), i ventiquattro
applicativi in HTML semplice no, e si vedeva: una colonna di azioni in coda alla tabella aveva
l'intestazione vuota, quindi senza nome per chi naviga ad ascolto, e la ricognizione dei pannelli
interni lo segnalava come `empty-table-header`.
`left:0;top:0` NON e' decorativo, ed e' la lezione del 06/10/2026 scritta in
qorva-finance/src/styles/tokens.css: un riquadro di 1x1 px posizionato in modo assoluto, se non
trova un antenato posizionato, si riferisce al documento e finisce dove capita - una di queste
etichette atterrava a 763 px dal bordo e faceva scorrere di lato un'intera schermata da 390 px,
senza che nessun controllo di accessibilita' se ne accorgesse, perche' per il lettore di schermo
era perfetta. Qui si chiude in due modi: `th` genera il proprio blocco contenitore, e anche
quando non lo generasse l'etichetta sta all'origine invece che fuori dallo schermo. */
th{position:relative}
.sr-only{
position:absolute;left:0;top:0;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
button,select,input,textarea{font-family:inherit}
button{font-size:var(--fs-ui)}
input,select,textarea{font-size:var(--fs-body);color:var(--text);background:var(--card2);border:1px solid var(--line);border-radius:var(--radius);min-height:var(--field-h);padding:8px 10px}
textarea{min-height:calc(var(--field-h) * 2)}
:where(button,input,select,textarea,a,[tabindex]):focus-visible{outline:2px solid var(--c);outline-offset:2px;box-shadow:var(--focus)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-ui)}
th{text-align:left;color:var(--muted);font-size:var(--fs-meta);letter-spacing:.06em;padding:8px var(--cell-pad);border-bottom:1px solid var(--line)}
td{padding:var(--cell-pad);border-bottom:1px solid var(--line);font-size:var(--fs-ui)}
::selection{background:var(--c);color:#04121c}
/* ---- componenti condivisi (stesse classi gia' usate dai software) ---- */
.muted{color:var(--muted)}
.card{background:var(--card);backdrop-filter:blur(var(--card-blur));border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow)}
.badge{display:inline-block;padding:3px 8px;border-radius:var(--radius-pill);font-size:var(--fs-meta);font-weight:700;border:1px solid var(--line);white-space:nowrap}
.result{margin-top:var(--space-3);font-size:var(--fs-ui);color:var(--muted);white-space:pre-line}
.result.error-text,.error-text{color:var(--r)}
.result.success-text,.success-text{color:var(--g)}
.empty{padding:30px;text-align:center;color:var(--muted);font-size:var(--fs-ui)}
.nav-label{font-size:var(--fs-meta);color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin:16px 10px 6px;font-weight:700}
.nav-item{font-size:var(--fs-ui)}
.section-title{font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:var(--space-3)}
label,.field label{font-size:var(--fs-meta);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
/* L'ETICHETTA CHE CONTIENE IL SUO CAMPO.
Accounting e Healthcare scrivono ``: l'etichetta si vede,
ma non e' COLLEGATA al campo - niente `for`, niente annidamento - quindi chi naviga ad ascolto
sente «campo di testo» e nient'altro. Gli altri ventidue applicativi usano `for=` in 491 punti;
questi due, in 84, no. La ricognizione dei pannelli interni li segnalava come `label` e
`select-name`.
Si e' scelto l'annidamento invece di generare 84 `id`: due `id` uguali sono un difetto peggiore
di quello che si voleva riparare, e in app.js alcuni di questi campi nascono dentro un modello
che si ridisegna piu' volte.
Queste due regole sono il prezzo dell'annidamento, e vanno insieme alla modifica del markup:
la prima restituisce lo stacco di 4 px che prima dava la griglia di `.field` fra etichetta e
campo, la seconda ferma l'ereditarieta'. Senza la seconda il campo erediterebbe
`text-transform:uppercase` e `font-size:var(--fs-meta)` dalla riga qui sopra, cioe' si
scriverebbe tutto in maiuscolo a 12 px dentro una casella di testo. */
.field label{display:grid;gap:4px}
.field label>input,.field label>select,.field label>textarea{
font-size:var(--fs-ui);font-family:var(--q-font);
letter-spacing:normal;text-transform:none;color:var(--q-text);
}
.mini-btn{font-size:var(--fs-meta);padding:6px 10px;min-height:32px;display:inline-flex;align-items:center}
/* Tabelle larghe a larghezza telefono: la scala a 16/14 px allunga il contenuto minimo delle tabelle e un
contenitore a griglia/flex si allarga con esso ("min-content"), spingendo la pagina a scorrere in orizzontale
(regressione trovata dal collaudo del 29/09 in Archivio, Compliance, Contracts). Il contenitore non si allarga
mai oltre lo spazio disponibile: scorre lui, non la pagina. */
.card,.panel,main,section{min-width:0}
/* Campi: a 16 px un input ha una larghezza intrinseca (attributo size) maggiore della colonna minima delle
griglie dei moduli, e il selettore di file e' ancora piu' largo: la griglia si allargava oltre lo schermo
(Compliance, Contracts, Archivio a 375 px). Un campo non e' mai piu' largo del suo contenitore. */
input,select,textarea{min-width:0;max-width:100%}
.field,.formgrid>*,form>*{min-width:0}
.card:has(> table),.card:has(> div > table),.table-wrap,:where(div):has(> table){overflow-x:auto;max-width:100%}
/* stati */
.state-loading,.state-empty,.state-error,.state-denied,.state-done{padding:var(--space-4);border-radius:var(--radius);border:1px solid var(--line);font-size:var(--fs-ui)}
.state-error{border-color:var(--r);color:var(--r)}
.state-denied{border-color:var(--y);color:var(--y)}
.state-done{border-color:var(--g);color:var(--g)}
@media (prefers-reduced-motion:reduce){html,body,*{transition:none!important}}
/* ---- Mandato UX 4.7: contesto azienda/software in testa a ogni software, switcher grafico, breadcrumb ---- */
.qorva-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card2);color:var(--text);font:600 var(--fs-ui)/1 var(--font);cursor:pointer;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .15s ease,background .15s ease}
.qorva-chip:hover,.qorva-chip:focus-visible{border-color:var(--c)}
.qorva-chip .qorva-chip-ico{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(var(--q-accent-rgb),.22),rgba(var(--q-accent-rgb),.06));font-size:var(--fs-meta);font-weight:800;flex:0 0 22px}
.qorva-chip .qorva-chip-caret{opacity:.7;font-size:var(--fs-meta)}
select.tb-select,select#companyPicker{height:36px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card2);color:var(--text);font:600 var(--fs-ui)/1 var(--font);max-width:240px}
/* switcher: finestra ampia, coerente con /software */
.qorva-switcher{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 16px;background:rgba(4,10,18,.62);backdrop-filter:blur(6px);opacity:0;transition:opacity .15s ease}
.qorva-switcher.on{opacity:1}
.qorva-switcher[hidden]{display:none}
.qorva-switcher .qorva-switcher-box{width:min(1040px,100%);max-height:88vh;overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 30px 80px rgba(0,0,0,.5);padding:22px;transform:translateY(8px) scale(.985);transition:transform .15s ease}
.qorva-switcher.on .qorva-switcher-box{transform:none}
.qorva-switcher .qorva-switcher-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.qorva-switcher .qorva-switcher-head h2{font-size:var(--fs-h2);margin:0}
.qorva-switcher .qorva-switcher-head p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-ui)}
.qorva-switcher .qorva-close{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:var(--fs-h3);cursor:pointer;flex:0 0 40px}
.qorva-switcher .qorva-close:hover,.qorva-switcher .qorva-close:focus-visible{border-color:var(--c)}
.qorva-switcher .qorva-sezione{margin:14px 0 8px;font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}
.qorva-switcher .qorva-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.qorva-switcher a.qorva-card{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);color:var(--text);text-decoration:none;min-height:118px;transition:transform .15s ease,border-color .15s ease}
.qorva-switcher a.qorva-card:hover,.qorva-switcher a.qorva-card:focus-visible{transform:translateY(-2px);border-color:var(--c)}
.qorva-switcher a.qorva-card.corrente{border-color:var(--c);box-shadow:inset 3px 0 0 var(--c)}
.qorva-switcher .qorva-card .testa{display:flex;align-items:center;gap:10px}
/* ================================================================================================
LA TESTA DELLA TESSERA: il nome non si spezza a meta' parola (08/10/2026).
Il difetto, visto nelle schermate di consegna e poi misurato: «Contro l», «Financ e»,
«Conta bilita'» - quindici tessere su ventidue nella pagina di scelta software. La colonna del
nome era 63 px e «Procurement» ne vuole 115: accanto all'icona non ci sta, e nessuna regola di
a-capo poteva farcela stare.
Le tre righe fanno una cosa sola e vanno lette insieme:
- `min-width:0` sui figli: senza, un figlio di flex non scende mai sotto la larghezza del
proprio contenuto e il nome finisce OLTRE il bordo della tessera (difetto del 07/10);
- `min-width:min-content` sul solo nome: lo riporta sopra quel limite, ma solo fino alla sua
parola piu' lunga. E' la riga che rende efficace `break-word` invece di lasciarlo decorativo;
- `flex-wrap:wrap` sulla testa: quando la parola piu' lunga non sta accanto all'icona, il nome
SCENDE SOTTO e dispone della larghezza della tessera, invece di rompersi.
Sta qui e non nelle pagine perche' la tessera e' un componente condiviso: la usano sia la scelta
software sia il selettore nella testata di ogni applicativo. Ventidue eccezioni per prodotto
sarebbero ventidue posti dove sbagliare. */
.qorva-card .testa{flex-wrap:wrap}
.qorva-card .testa > *{min-width:0}
.qorva-card .testa .nome{min-width:min-content;overflow-wrap:break-word}
.qorva-switcher .qorva-card .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(var(--q-accent-rgb),.22),rgba(var(--q-accent-rgb),.06));border:1px solid var(--line);font-weight:900;font-size:var(--fs-ui)}
.qorva-switcher .qorva-card .nome{font-size:var(--fs-body);font-weight:800}
.qorva-switcher .qorva-card .desc{color:var(--muted);font-size:var(--fs-meta);flex:1}
.qorva-switcher .qorva-card .piede{display:flex;gap:6px;flex-wrap:wrap;font-size:var(--fs-meta);color:var(--muted)}
.qorva-switcher .qorva-card .badge.recente{border-color:var(--c);color:var(--c)}
:root[data-theme="day"] .qorva-switcher .qorva-card .badge.recente{color:var(--q-accent);border-color:var(--q-accent)}
@media(max-width:640px){.qorva-switcher{padding:0}.qorva-switcher .qorva-switcher-box{max-height:100vh;height:100vh;border-radius:0}.qorva-switcher .qorva-griglia{grid-template-columns:1fr}.qorva-chip{max-width:150px}}
/* breadcrumb: visibile ma non invasivo */
.qorva-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--fs-meta);color:var(--muted);padding:6px 0 10px;letter-spacing:.02em}
.qorva-breadcrumb a{color:var(--muted);text-decoration:none;border-bottom:1px dotted transparent}
.qorva-breadcrumb a:hover,.qorva-breadcrumb a:focus-visible{color:var(--text);border-bottom-color:var(--c)}
.qorva-breadcrumb .sep{opacity:.5}
.qorva-breadcrumb [aria-current="page"]{color:var(--text);font-weight:700}
/* ---- IL MARCHIO: supporto scuro in entrambi i temi -------------------------------------
Il logo originale e' disegnato su fondo scuro, con un cerchio luminoso. Appoggiarlo sul
bianco del tema Giorno lo lascerebbe galleggiare in un alone grigio. Il supporto scuro
non e' una decorazione: e' la condizione in cui quel marchio e' leggibile. Nessun filtro,
nessuna ricolorazione, proporzioni intatte. */
.brand .mark.qorva-marchio{
display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;flex:0 0 42px;
background:#060E1B;border:1px solid var(--q-border-strong);
border-radius:12px;overflow:hidden;
}
.brand .mark.qorva-marchio img{display:block;width:34px;height:34px;object-fit:contain}
/* Le icone di sezione nella navigazione interna seguono il colore della voce. */
.nav-item .ic{display:inline-flex;align-items:center;justify-content:center;width:20px;flex:0 0 20px}
.nav-item .ic svg{display:block}
/* LA VOCE ATTIVA, UNA VOLTA SOLA.
Stava scritta a mano in venti index.html: diciotto copie identiche e due diverse. Le due
diverse mettevano l'accento come fondo pieno con un testo scuro fissato a mano (#2a1a04,
un marrone dell'epoca dell'oro, e #04241c): su fondo blu non arrivavano a 4,5:1, e la
ricognizione dei pannelli interni le ha segnalate su ogni pannello di Accounting e
Healthcare. Le diciotto identiche avevano un difetto piu' discreto ma piu' diffuso: la
velatura era `rgba(0,212,255,...)`, il ciano, anche in tema Giorno, dove l'accento e' un
blu. La voce attiva non seguiva l'accento in nessuno dei venti.
Ora segue il tema da sola, e si cambia da qui. */
.nav-item.active{
background:linear-gradient(135deg,rgba(var(--q-accent-rgb),.16),rgba(var(--q-accent-rgb),.04));
color:var(--q-text);
box-shadow:inset 3px 0 0 var(--q-accent);
}
/* ---- IL SELETTORE DELLE TRE MODALITA' -----------------------------------------------------
Stava solo dentro Finance: gli altri applicativi lo disegnavano a modo loro, e quello che la
barra condivisa crea dove mancava non aveva alcuno stile - testo nudo sulla testata, che il
censimento dei pannelli interni ha segnalato come contrasto insufficiente su OGNI pannello
di OGNI applicativo (174 rilievi, un difetto solo ripetuto). Qui sta una volta per tutti.
Il colore del testo non selezionato e' --q-text, non --q-muted: a 11px grassetto il muted
regge appena, e «appena» su una cosa che compare in ogni schermata non basta. */
.theme-switch{
display:inline-flex;gap:2px;align-items:center;
background:var(--q-surface);border:1px solid var(--q-border);
border-radius:var(--q-radius-control);padding:2px;
}
.theme-switch button{
appearance:none;border:0;background:transparent;cursor:pointer;
font:600 var(--fs-meta)/1 var(--q-font);letter-spacing:.02em;
color:var(--q-text);padding:7px 10px;border-radius:7px;
min-height:30px;display:inline-flex;align-items:center;
}
.theme-switch button:hover{background:var(--q-hover)}
.theme-switch button:focus-visible{outline:none;box-shadow:var(--focus)}
.theme-switch button.on{background:var(--q-accent);color:#FFFFFF}
/* ---- IMPOSTAZIONI TEMA: l'accesso e il pannello ----------------------------------------------
Nessun colore proprio: tutto dai token condivisi, come il resto. Il pannello e' una finestra
sopra la pagina e NON una navigazione: chi stava compilando qualcosa lo trova dov'era quando
chiude. */
.qorva-tema-apri{
all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:7px;color:var(--q-muted);
}
.qorva-tema-apri:hover{background:var(--q-hover);color:var(--q-text)}
.qorva-tema-apri:focus-visible{box-shadow:var(--focus)}
.qorva-tema-fondo{
position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;
background:rgba(6,14,27,.55);
}
.qorva-tema-pannello{
width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;
background:var(--q-panel);color:var(--q-text);
border:1px solid var(--q-border);border-radius:14px;box-shadow:var(--shadow);
padding:20px;display:flex;flex-direction:column;gap:14px;
}
.qorva-tema-testa{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qorva-tema-testa h2{font-size:var(--fs-h3);margin:0}
.qorva-tema-chiudi{
all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:7px;color:var(--q-muted);
}
.qorva-tema-chiudi:hover{background:var(--q-hover);color:var(--q-text)}
.qorva-tema-chiudi:focus-visible{box-shadow:var(--focus)}
.qorva-tema-nota{margin:0;color:var(--q-muted);font-size:var(--fs-meta);line-height:var(--lh-body)}
/* due orari affiancati finche' c'e' spazio, uno sotto l'altro sul telefono: il nome del campo e
l'orario devono starci interi, non e' un posto dove stringere */
.qorva-tema-orari{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.qorva-tema-pannello .field input,.qorva-tema-pannello .field select{width:100%}
.qorva-tema-esito{margin:0;font-size:var(--fs-meta);color:var(--q-muted);min-height:1.2em}
.qorva-tema-esito.ok{color:var(--q-success)}
.qorva-tema-esito.errore{color:var(--q-danger)}
.qorva-tema-piede{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.qorva-tema-piede button{
cursor:pointer;border-radius:9px;padding:9px 16px;font-size:var(--fs-ui);font-weight:700;
border:1px solid var(--q-border-strong);background:var(--q-surface);color:var(--q-text);
}
.qorva-tema-piede .qorva-tema-salva{
background:var(--q-accent);border-color:var(--q-accent);color:var(--q-on-accent);
}
.qorva-tema-piede button:disabled{opacity:.6;cursor:progress}
.qorva-tema-piede button:focus-visible{box-shadow:var(--focus)}
:root[data-theme="night"] .theme-switch button.on{color:#06121F}