/* =====================================================================
DLXHUB Design System v2 · token e componenti condivisi
---------------------------------------------------------------------
UNICO foglio di stile condiviso per PMS desktop, gestionale e app
collegate (prenota.php, portale ospite, pulizie, proprietario).
L'app mobile /m/ ha un sistema suo: qui non vale (vedi documento, §13).
Regole che questo file presuppone:
- un solo font (Manrope self-hosted), pesi 400 / 500 / 600;
- icone solo Material Symbols Outlined, niente emoji;
- niente viola, mai;
- nessuna pagina ridefinisce :root e nessuna pagina scrive hex:
ogni colore, spazio, raggio e ombra passa da questi token;
- numeri it-IT (1.000,00) e date gg/mm/aaaa: helper in fondo al
documento e nella skill dlxhub-ui.
Installazione: /assets/css/dlx-design-system.css, font in /assets/fonts/.
Versione 2.1 · 10/10/2026 (colori OTA differenziati) · derivato dal mockup approvato della Home.
Notte (12/10/2026): html[data-theme="dark"] ridefinisce solo primitive e semantici.
Il tema chiaro qui sopra non cambia. La stampa forza sempre i token chiari.
===================================================================== */
/* ---------------------------------------------------------------------
0. Font self-hosted (mai Google Fonts)
--------------------------------------------------------------------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;
src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;
src:url('/assets/fonts/manrope-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:100 700;font-display:block;
src:url('/assets/fonts/material-symbols-outlined.woff2') format('woff2')}
:root{
/* -------------------------------------------------------------------
1. Primitive (una sola scala per tinta). Non usarle nelle pagine:
le pagine usano i token semantici del punto 2.
------------------------------------------------------------------- */
--navy-900:#1d3047; /* blu notte: sidebar e hero. Bianco 13,41:1 */
--navy-800:#2a455f; /* hover del primario, rilievo su navy. Bianco 9,93:1 */
--navy-700:#34567a; /* navy Deluxe: accent (bottoni, link). Su bianco 7,61:1 */
--navy-100:#e9eef4; /* selezione, sfondo info. Navy-700 sopra 6,53:1 */
--navy-50: #f3f6f9;
--gold-500:#e6a540; /* oro Deluxe: SOLO riempimenti e grafica. Mai testo su chiaro (2,14:1) */
--gold-700:#8a5a12; /* oro per testo e icone su chiaro: 5,91:1 su bianco */
--gold-50: #fbf3e2; /* gold-700 sopra: 5,36:1 */
--ink-900:#1e2b38; /* testo principale: 14,4:1 su bianco, 13,93:1 su pagina */
--ink-600:#56636e; /* testo secondario: 6,17:1 su bianco, 5,50:1 su paper-2 */
--slate-400:#8a96a3; /* bordo dei campi e linee di riferimento: 3,01:1 (soglia 3:1 UI). Mai per testo */
--line-300:#d3d0c9; /* bordo forte decorativo (bottoni secondari, separatori) */
--line-200:#e6e4df; /* bordo standard di pannelli e righe */
--paper-0:#fcfbf9; /* sfondo pagina, off-white caldo */
--paper-1:#ffffff; /* pannelli */
--paper-2:#f3f2ee; /* hover, intestazioni, superfici secondarie */
--green-700:#1b6b43; --green-50:#e7f3ec; /* 6,50:1 su bianco · 5,70:1 sul suo sfondo */
--red-700:#b3362a; --red-50:#fbecea; /* 6,04:1 · 5,26:1 */
--amber-800:#8a5300; --amber-50:#fdf2dc; /* 6,33:1 · 5,70:1 */
/* Zone e categorie: sempre accompagnate da un'etichetta di testo */
--azure-700:#236b99; /* Assisi (sostituisce #2b7fb5, che come testo era 4,37:1): 5,78:1 */
--terra-700:#a14a26; /* Roma: 5,96:1 */
--teal-700:#1b6b6b; /* Veneto: 6,25:1 */
--slate-600:#5b6b7a; /* altro / non assegnato: 5,48:1 */
/* -------------------------------------------------------------------
2. Token semantici (gli unici da usare nelle pagine)
------------------------------------------------------------------- */
--bg:var(--paper-0); --surface:var(--paper-1); --surface-2:var(--paper-2);
--text:var(--ink-900); --text-2:var(--ink-600);
--border:var(--line-200); --border-strong:var(--line-300); --border-input:var(--slate-400);
--accent:var(--navy-700); --accent-hover:var(--navy-800); --accent-soft:var(--navy-100);
--on-accent:#ffffff; /* 7,61:1 sull'accent, 9,93:1 sull'hover */
--brand-2:var(--gold-500); --brand-2-text:var(--gold-700); --brand-2-soft:var(--gold-50);
--on-brand-2:var(--ink-900); /* testo scuro sull'oro: 6,74:1 (mai bianco: 2,14:1) */
--good:var(--green-700); --good-bg:var(--green-50);
--bad:var(--red-700); --bad-bg:var(--red-50); --on-bad:#ffffff; /* bianco sul rosso 6,04:1 */
--warn:var(--amber-800); --warn-bg:var(--amber-50);
--info:var(--navy-700); --info-bg:var(--navy-100);
--focus:var(--navy-700);
--overlay:rgba(29,48,71,.38); /* fondo dei dialog */
/* Grafici */
--chart-1:var(--navy-700); --chart-2:var(--gold-500); --chart-3:var(--azure-700);
--chart-4:var(--teal-700); --chart-5:var(--terra-700); --chart-6:var(--slate-600);
--chart-ref:var(--slate-400); --chart-grid:var(--line-200);
/* Barre di raggiungimento: solo riempimento, mai testo. Rosso e verde restano --bad / --good. */
--reach-50:#e06a12; --reach-70:#d4a20a; --reach-90:#2b8fc4;
/* Zone */
--zone-assisi:var(--azure-700); --zone-roma:var(--terra-700); --zone-veneto:var(--teal-700); --zone-altro:var(--slate-600);
/* ---- Canali OTA: tre token per canale ----
--ota-X colore di marca (riempimenti: marchio, logo, serie dei grafici; sempre con il nome accanto)
--ota-X-text testo della stessa tinta, AA su bianco e sul fondo tenue
--ota-X-bg fondo tenue della pill
Contrasti: testo su fondo tenue · testo su bianco. Nessun viola. */
--ota-bdc:#003580; --ota-bdc-text:#003580; --ota-bdc-bg:#e6edf7; /* Booking.com 9,79 · 11,53 */
--ota-abb:#ff5a5f; --ota-abb-text:#b3242b; --ota-abb-bg:#ffeded; /* Airbnb 5,80 · 6,55 */
--ota-exp:#ffc72c; --ota-exp-text:#6e5000; --ota-exp-bg:#fff5d6; /* Expedia (e gruppo: Hotels.com, Egencia, Orbitz…) 6,86 · 7,47 */
--ota-vrb:#245abc; --ota-vrb-text:#1f4fa6; --ota-vrb-bg:#e8f0fd; /* VRBO / HomeAway 6,71 · 7,70 */
--ota-dir:#e6a540; --ota-dir-text:#8a5a12; --ota-dir-bg:#fbf3e2; /* Diretta / booking engine / sito (oro Deluxe) 5,36 · 5,91 */
--ota-bnb:#5d8a3e; --ota-bnb-text:#3f6526; --ota-bnb-bg:#edf4e6; /* Bed-and-Breakfast.it 6,03 · 6,77 */
--ota-wa:#25d366; --ota-wa-text:#0d6b38; --ota-wa-bg:#e3f7ea; /* WhatsApp (canale di messaggi, solo Inbox) 5,90 · 6,61 */
--ota-alt:#5b6b7a; --ota-alt-text:#4b5866; --ota-alt-bg:#eef0f2; /* Altro (Agoda, telefono, canali non mappati) 6,37 · 7,27 */
/* -------------------------------------------------------------------
3. Superficie scura (sidebar e hero, fondo --navy-900).
Contrasti: primo valore su navy-900, secondo su navy-800.
------------------------------------------------------------------- */
--dark-bg:var(--navy-900); --dark-raise:var(--navy-800);
--on-dark:#ffffff; /* 13,41 / 9,93 */
--on-dark-2:#c9d6e3; /* testo secondario: 9,07 / 6,72 */
--on-dark-3:rgba(255,255,255,.66); /* solo etichette di gruppo in sidebar: 6,76 su navy-900 */
--on-dark-line:rgba(255,255,255,.14);
--on-dark-hover:rgba(255,255,255,.08);
--on-dark-active:rgba(255,255,255,.12);
--on-dark-good:#8fd1ad; /* 7,59 / 5,62 */
--on-dark-warn:#f2c374; /* 8,20 / 6,07 */
--on-dark-bad:#ffa69c; /* 7,14 / 5,29 */
--focus-on-dark:var(--gold-500); /* 6,27:1 sul blu notte */
/* -------------------------------------------------------------------
4. Tipografia: un font, tre pesi, sette taglie
------------------------------------------------------------------- */
--font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
--fw-regular:400; /* testo */
--fw-medium:500; /* etichette, controlli, intestazioni di tabella */
--fw-strong:600; /* titoli e numeri importanti. 700/800 non si usano */
--fs-12:12px; /* minimo assoluto: meta, assi dei grafici, tooltip */
--fs-13:13px; /* testo secondario, sotto-righe dei KPI, pill grandi */
--fs-14:14px; /* testo dell'interfaccia (body) */
--fs-16:16px; /* titoli di pannello; body delle app pubbliche */
--fs-20:20px; /* valori KPI, titoli di dialog */
--fs-28:28px; /* titolo di pagina (h1), numeri chiave */
--fs-48:48px; /* un solo numero per pagina: la cifra dell'hero */
--lh-tight:1.15; --lh-ui:1.4; --lh-text:1.6;
--ls-tight:-.02em; /* h1 e numeri grandi */
/* -------------------------------------------------------------------
5. Spazi (scala 4 px), raggi, controlli, ombre, movimento, livelli
------------------------------------------------------------------- */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;
--r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px;
--ctl-h:36px; --ctl-h-sm:30px; --ctl-h-lg:44px; /* lg: app pubbliche, area di tocco */
--ic-16:16px; --ic-18:18px; --ic-20:20px;
--shadow-pop:0 12px 32px -8px rgba(29,48,71,.22),0 2px 6px rgba(29,48,71,.08); /* solo livelli sopra la pagina */
--ease:cubic-bezier(.2,.7,.2,1); --dur:160ms;
--z-topbar:50; --z-pop:80; --z-dialog:100;
/* Layout */
--sb-w:244px; --sb-w-collapsed:72px; --tb-h:60px;
--page-max:1560px; --page-pad:32px;
}
/* ---------------------------------------------------------------------
6. Alias legacy (hub-style.css v1). Servono SOLO durante la migrazione,
perché le pagine non ancora migrate continuino a funzionare.
Da eliminare quando nessuna pagina li usa più (verifica con rg).
--------------------------------------------------------------------- */
:root{
--bg-0:var(--bg); --bg-1:var(--surface); --bg-2:var(--surface-2); --bg-3:var(--surface-2);
--muted:var(--text-2); --accent-2:var(--brand-2);
--space-1:var(--s-1); --space-2:var(--s-2); --space-3:var(--s-3); --space-4:var(--s-4); --space-5:var(--s-6); --space-6:var(--s-8);
--radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg);
--shadow-sm:none; --shadow-md:var(--shadow-pop);
--font-sans:var(--font);
--fs-xs:var(--fs-12); --fs-sm:var(--fs-13); --fs-base:var(--fs-14); --fs-lg:var(--fs-16); --fs-xl:var(--fs-20); --fs-2xl:var(--fs-28);
}
/* =====================================================================
7. Base
===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--line-300) transparent}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fw-regular) var(--fs-14)/var(--lh-ui) var(--font);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-strong);line-height:var(--lh-tight)}
h1{font-size:var(--fs-28);letter-spacing:var(--ls-tight)}
h2,h3{font-size:var(--fs-16)}
h4{font-size:var(--fs-14)}
p{margin:0 0 var(--s-3)}
::selection{background:var(--gold-500);color:var(--ink-900)}
input,select,button,textarea{font:inherit;color:inherit;caret-color:var(--accent)}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-300);border-radius:10px;border:3px solid transparent;background-clip:content-box}
/* Utility minime */
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1} /* OGNI cifra in tabelle, KPI, importi */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t-2{color:var(--text-2)} .t-12{font-size:var(--fs-12)} .t-13{font-size:var(--fs-13)}
.pos{color:var(--good)} .neg{color:var(--bad)}
.r{text-align:right}
.cellclip{overflow:hidden;min-width:0}
.cellclip>*{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* =====================================================================
8. Icone: Material Symbols Outlined, peso 300, FILL 0
nome
===================================================================== */
.ic,.icon{font-family:'Material Symbols Outlined';font-weight:300;font-style:normal;font-size:var(--ic-20);line-height:1;
display:inline-block;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;
font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20;-webkit-font-smoothing:antialiased;flex:none;user-select:none}
.ic.sm,.icon.sm{font-size:var(--ic-18)} .ic.xs{font-size:var(--ic-16)}
.ic.fill{font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 20} /* solo stati "attivo" (stella, puntina) */
/* =====================================================================
9. Bottoni
.btn (secondario) · .primary · .ghost · .danger · .on-dark · .sm · .lg
Un solo .primary per area visibile.
===================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--ctl-h);padding:0 var(--s-4);border-radius:var(--r-md);
border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:var(--fs-14);font-weight:var(--fw-medium);
cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 80ms}
.btn .ic{font-size:var(--ic-18)}
.btn:hover{background:var(--surface-2);border-color:var(--ink-600);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2);border-color:transparent}
.btn.danger{background:var(--surface);border-color:var(--bad);color:var(--bad)}
.btn.danger:hover{background:var(--bad);color:var(--on-bad)}
.btn.on-dark{background:transparent;border-color:rgba(255,255,255,.32);color:var(--on-dark)}
.btn.on-dark:hover{background:var(--dark-raise);border-color:rgba(255,255,255,.5)}
.btn.sm{height:var(--ctl-h-sm);padding:0 var(--s-3);font-size:var(--fs-13);border-radius:var(--r-sm)}
.btn.lg{height:var(--ctl-h-lg);padding:0 var(--s-5);font-size:var(--fs-16)}
.btn.block{width:100%}
.btn:disabled,.btn[aria-disabled=true]{background:var(--surface-2);border-color:var(--border);color:var(--text-2);cursor:not-allowed;transform:none}
.btn[aria-busy=true]{pointer-events:none}
.btn[aria-busy=true]::before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.icon-btn{width:var(--ctl-h);height:var(--ctl-h);display:inline-grid;place-items:center;border-radius:var(--r-md);border:1px solid transparent;
background:transparent;color:var(--text);cursor:pointer;position:relative;transition:background var(--dur) var(--ease)}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn.sm{width:var(--ctl-h-sm);height:var(--ctl-h-sm)}
.icon-btn .count{position:absolute;top:2px;right:0}
/* Link d'azione «Analytics →» */
.more{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-13);font-weight:var(--fw-medium);color:var(--accent);white-space:nowrap}
.more .ic{font-size:var(--ic-18);transition:transform var(--dur) var(--ease)}
.more:hover{text-decoration:none}
.more:hover .ic{transform:translateX(2px)}
/* =====================================================================
10. Contatori, pill, tag di zona e di canale
===================================================================== */
.count{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--brand-2);color:var(--on-brand-2);
font-size:var(--fs-12);font-weight:var(--fw-strong);line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:var(--fs-12);
font-weight:var(--fw-medium);white-space:nowrap;background:var(--surface-2);color:var(--text-2)}
.pill .ic{font-size:15px}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.gold{background:var(--brand-2-soft);color:var(--brand-2-text)} /* solo funzioni AI / assistente */
/* Pill di canale OTA: fondo tenue + testo scuro della stessa tinta + marchio pieno.
Booking.com · il nome è sempre scritto. */
.pill.ota{background:var(--ota-c-bg);color:var(--ota-c-text);gap:6px}
.pill.ota::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--ota-c);flex:none}
.pill.ota .ic{font-size:14px}
.ota.bdc{--ota-c:var(--ota-bdc);--ota-c-text:var(--ota-bdc-text);--ota-c-bg:var(--ota-bdc-bg)}
.ota.abb{--ota-c:var(--ota-abb);--ota-c-text:var(--ota-abb-text);--ota-c-bg:var(--ota-abb-bg)}
.ota.exp{--ota-c:var(--ota-exp);--ota-c-text:var(--ota-exp-text);--ota-c-bg:var(--ota-exp-bg)}
.ota.vrb{--ota-c:var(--ota-vrb);--ota-c-text:var(--ota-vrb-text);--ota-c-bg:var(--ota-vrb-bg)}
.ota.dir{--ota-c:var(--ota-dir);--ota-c-text:var(--ota-dir-text);--ota-c-bg:var(--ota-dir-bg)}
.ota.bnb{--ota-c:var(--ota-bnb);--ota-c-text:var(--ota-bnb-text);--ota-c-bg:var(--ota-bnb-bg)}
.ota.wa{--ota-c:var(--ota-wa);--ota-c-text:var(--ota-wa-text);--ota-c-bg:var(--ota-wa-bg)}
.ota.alt,.ota:not(.bdc):not(.abb):not(.exp):not(.vrb):not(.dir):not(.bnb):not(.wa){--ota-c:var(--ota-alt);--ota-c-text:var(--ota-alt-text);--ota-c-bg:var(--ota-alt-bg)}
/* Marchio quadrato 20 px (al posto di .cbadge): fondo di marca + logo. Per la diretta la casa Deluxe in blu notte. */
.ota-mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--ota-c);flex:none;overflow:hidden}
.ota-mark img{width:15px;height:15px;object-fit:contain}
.ota-mark svg{width:15px;height:15px;fill:var(--navy-900)}
/* Tile 36 px dell'Inbox */
.ota-tile{background:var(--ota-c-bg);color:var(--ota-c-text)}
/* Zona: pallino colorato + nome in testo normale */
.zone{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-13);color:var(--text)}
.zone::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--zone,var(--zone-altro));flex:none}
.zone.assisi{--zone:var(--zone-assisi)} .zone.roma{--zone:var(--zone-roma)} .zone.veneto{--zone:var(--zone-veneto)}
/* =====================================================================
11. Pannello (card) e intestazione di pagina
===================================================================== */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-6);min-width:0}
.panel.flush{padding:0}
.panel-head{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-5)}
.panel-head h2,.panel-head h3{font-size:var(--fs-16);font-weight:var(--fw-strong);letter-spacing:-.005em}
.panel-head .meta{font-size:var(--fs-13);color:var(--text-2)}
.panel-head .end{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.ph{display:flex;align-items:flex-end;gap:var(--s-4);margin-bottom:var(--s-6)}
.ph h1{font-size:var(--fs-28)}
.ph p{margin:6px 0 0;color:var(--text-2);font-size:var(--fs-14)}
.ph .end{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.crumbs{display:flex;gap:6px;align-items:center;font-size:var(--fs-13);color:var(--text-2);margin-bottom:var(--s-2)}
.crumbs a{color:var(--text-2)} .crumbs .ic{font-size:var(--ic-16)}
/* =====================================================================
12. Hero (blu notte). Uno per pagina, solo nei cruscotti.
Anatomia: .h-in > .h-top (titolo, data, .svc, azioni) + .h-body
(.h-fig cifra + .hpills, .h-chart) + .h-kpi ; poi .today in fondo.
===================================================================== */
.hero{background:var(--dark-bg);color:var(--on-dark);border-radius:var(--r-lg);position:relative}
.hero h1,.hero h2{color:var(--on-dark)}
.hero :focus-visible{outline-color:var(--focus-on-dark)}
.hero a{color:inherit}
.h-in{padding:var(--s-6) var(--s-8) 0}
.h-top{display:flex;align-items:flex-start;gap:var(--s-4)}
.h-top>div:first-child{flex:1;min-width:0}
.h-top h1{font-size:var(--fs-28)}
.h-top .date{margin:6px 0 0;color:var(--on-dark-2);font-size:var(--fs-14)}
.h-top .end{margin-left:auto;flex:none;display:flex;align-items:center;gap:var(--s-2)}
.svc{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:var(--s-2);font-size:var(--fs-13);color:var(--on-dark-2)}
.svc>*{position:relative;display:inline-flex;align-items:center;gap:5px;border-radius:6px;text-decoration:none}
.svc .ic{font-size:var(--ic-16)}
.svc .ok .ic{color:var(--on-dark-good)}
.svc .warn{color:var(--on-dark-warn);font-weight:var(--fw-medium)}
.svc .bad{color:var(--on-dark-bad);font-weight:var(--fw-medium)}
.svc a:hover{text-decoration:underline}
.h-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:end;margin-top:var(--s-5)}
.h-fig .lbl{font-size:var(--fs-14);color:var(--on-dark-2);font-weight:var(--fw-medium)}
.h-fig .v{font-size:var(--fs-48);font-weight:var(--fw-strong);letter-spacing:-.03em;line-height:1;margin-top:8px;font-variant-numeric:tabular-nums}
.h-fig .of{margin-top:8px;color:var(--on-dark-2);font-size:var(--fs-14)}
.h-fig .of b{color:var(--on-dark);font-weight:var(--fw-medium)}
.hpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-4)}
.hpill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--dark-raise);color:var(--on-dark);
font-size:var(--fs-13);font-weight:var(--fw-medium);white-space:nowrap;font-variant-numeric:tabular-nums}
.hpill .ic{font-size:var(--ic-16)}
.hpill.good{color:var(--on-dark-good)} .hpill.warn{color:var(--on-dark-warn)} .hpill.bad{color:var(--on-dark-bad)}
.h-chart .chart text{fill:var(--on-dark-2)}
.h-chart .chart text.k{fill:var(--on-dark);font-weight:var(--fw-medium)}
.h-leg{display:flex;gap:var(--s-4);font-size:var(--fs-12);color:var(--on-dark-2);margin-top:6px;align-items:center}
.h-leg i{display:inline-block;width:14px;height:0;border-top:2px solid var(--on-dark);vertical-align:middle;margin-right:6px}
.h-leg i.ref{border-top:2px dashed var(--gold-500)}
.h-leg .r{margin-left:auto}
.h-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s-6);border-top:1px solid var(--on-dark-line)}
.h-kpi>div{padding:var(--s-4) var(--s-5) var(--s-5)}
.h-kpi>div:first-child{padding-left:0}
.h-kpi>div+div{border-left:1px solid var(--on-dark-line)}
.h-kpi .l{font-size:var(--fs-13);color:var(--on-dark-2);font-weight:var(--fw-medium)}
.h-kpi .v{font-size:var(--fs-20);font-weight:var(--fw-strong);letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums}
.h-kpi .d{font-size:var(--fs-13);color:var(--on-dark-2);margin-top:2px}
/* =====================================================================
13. Barra «Oggi»: riga di 44 px con contatori in linea.
In fondo all'hero (fondo navy-800) oppure da sola su chiaro (.today.light).
Colore solo su ciò che chiede un'azione; dettaglio nel tooltip.
===================================================================== */
.today{display:flex;align-items:center;gap:2px;height:44px;padding:0 calc(var(--s-8) - 8px);background:var(--dark-raise);border-radius:0 0 var(--r-lg) var(--r-lg)}
.today .lead{font-size:var(--fs-13);font-weight:var(--fw-strong);color:var(--on-dark);padding-right:12px;margin:0 6px 0 8px;border-right:1px solid var(--on-dark-line);height:20px;display:flex;align-items:center}
.chip{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border-radius:var(--r-sm);color:var(--on-dark-2);
font-size:var(--fs-13);white-space:nowrap;text-decoration:none;transition:background var(--dur)}
.chip:hover{background:var(--on-dark-hover);text-decoration:none}
.chip .ic{font-size:var(--ic-18);color:var(--on-dark-2)}
.chip b{font-size:var(--fs-14);font-weight:var(--fw-strong);color:var(--on-dark);font-variant-numeric:tabular-nums}
.chip .x{font-weight:var(--fw-medium)}
.chip .x::before{content:'·';margin-right:6px}
.chip.warn,.chip.warn .ic,.chip.warn b{color:var(--on-dark-warn)}
.chip.bad,.chip.bad .ic,.chip.bad b{color:var(--on-dark-bad)}
.chip:nth-last-of-type(-n+3) .tip{left:auto;right:0}
/* variante su chiaro */
.today.light{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:0 6px}
.today.light .lead{color:var(--text);border-color:var(--border)}
.today.light .chip{color:var(--text-2)} .today.light .chip .ic{color:var(--text-2)} .today.light .chip b{color:var(--text)}
.today.light .chip:hover{background:var(--surface-2)}
.today.light .chip.warn,.today.light .chip.warn .ic,.today.light .chip.warn b{color:var(--warn)}
.today.light .chip.bad,.today.light .chip.bad .ic,.today.light .chip.bad b{color:var(--bad)}
/* =====================================================================
14. Tooltip (testo breve, mai contenuto indispensabile senza alternativa)
……
Compare al passaggio del mouse E al focus da tastiera.
===================================================================== */
.has-tip,.chip,.svc>*{position:relative}
.tip{position:absolute;left:0;top:calc(100% + 6px);transform:translateY(-2px);opacity:0;pointer-events:none;z-index:var(--z-pop);
background:var(--surface);color:var(--text);font-size:var(--fs-12);font-weight:var(--fw-medium);line-height:1.35;padding:6px 10px;border-radius:var(--r-sm);
border:1px solid var(--border);white-space:nowrap;box-shadow:var(--shadow-pop);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.tip.end{left:auto;right:0}
:is(.has-tip,.chip,.svc>*):is(:hover,:focus-visible)>.tip{opacity:1;transform:none}
/* =====================================================================
15. KPI su chiaro: riga di metriche separate da filetti (niente card annidate)
===================================================================== */
.metrics{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));border-top:1px solid var(--border)}
.metric{padding:var(--s-4) var(--s-4) 0}
.metric:first-child{padding-left:0}
.metric+.metric{border-left:1px solid var(--border)}
.metric .l{font-size:var(--fs-13);color:var(--text-2);font-weight:var(--fw-medium)}
.metric .v{font-size:var(--fs-20);font-weight:var(--fw-strong);letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums}
.metric .d{font-size:var(--fs-13);color:var(--text-2);margin-top:2px}
.big{font-size:var(--fs-28);font-weight:var(--fw-strong);letter-spacing:var(--ls-tight);line-height:1.1;font-variant-numeric:tabular-nums}
/* =====================================================================
16. Tabelle
Numeri a destra con .r + .num; azioni nell'ultima colonna senza a capo.
.table.dense per elenchi lunghi; .table.sticky per l'intestazione fissa.
===================================================================== */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-14)}
.table th{text-align:left;font-size:var(--fs-12);font-weight:var(--fw-medium);color:var(--text-2);padding:0 var(--s-3) var(--s-2);border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:11px var(--s-3);border-bottom:1px solid var(--border);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table th:first-child,.table td:first-child{padding-left:0}
.table th:last-child,.table td:last-child{padding-right:0;white-space:nowrap}
.table .r{text-align:right}
.table td.r,.table .num{font-variant-numeric:tabular-nums}
.table tbody tr{transition:background var(--dur)}
.table.hover tbody tr:hover{background:var(--surface-2)}
.table tr[aria-selected=true]{background:var(--accent-soft)}
.table tfoot td{font-weight:var(--fw-strong);border-top:1px solid var(--border-strong);border-bottom:0}
.table.dense td{padding:7px var(--s-3)}
.table.sticky thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.panel.flush .table th:first-child,.panel.flush .table td:first-child{padding-left:var(--s-6)}
.panel.flush .table th:last-child,.panel.flush .table td:last-child{padding-right:var(--s-6)}
.panel.flush .table th{padding-top:var(--s-4)}
.th-sort{display:inline-flex;align-items:center;gap:2px;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.th-sort .ic{font-size:var(--ic-16)}
.th-sort[aria-sort=ascending],.th-sort[aria-sort=descending]{color:var(--text)}
/* =====================================================================
17. Form
.field > label + .input|.select|.textarea + .help | .err
Etichetta sempre visibile sopra il campo (niente solo-placeholder).
===================================================================== */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.label{font-size:var(--fs-13);font-weight:var(--fw-medium);color:var(--text)}
.field .req{color:var(--bad);margin-left:2px}
.input,.select,.textarea{width:100%;height:var(--ctl-h);padding:0 var(--s-3);border:1px solid var(--border-input);border-radius:var(--r-md);
background:var(--surface);color:var(--text);font-size:var(--fs-14);transition:border-color var(--dur),box-shadow var(--dur)}
.textarea{height:auto;min-height:88px;padding:10px var(--s-3);line-height:var(--lh-text);resize:vertical}
.select{appearance:none;padding-right:34px;cursor:pointer;
background:var(--surface) no-repeat right 10px center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%2356636e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.input::placeholder,.textarea::placeholder{color:var(--text-2)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-600)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input[aria-invalid=true],.select[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--bad)}
.input[aria-invalid=true]:focus{box-shadow:0 0 0 3px var(--bad-bg)}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--surface-2);color:var(--text-2);border-color:var(--border);cursor:not-allowed}
.input.num{text-align:right} /* solo importi e quantità; le date restano allineate a sinistra */
.help{font-size:var(--fs-13);color:var(--text-2)}
.err{display:flex;align-items:center;gap:4px;font-size:var(--fs-13);color:var(--bad);font-weight:var(--fw-medium)}
.err .ic{font-size:var(--ic-16)}
.input-group{display:flex;align-items:center;border:1px solid var(--border-input);border-radius:var(--r-md);background:var(--surface);height:var(--ctl-h)}
.input-group:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input-group .input{border:0;box-shadow:none;height:100%;background:transparent}
.input-group .affix{padding:0 var(--s-3);color:var(--text-2);font-size:var(--fs-14);white-space:nowrap}
.check{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-14);cursor:pointer}
.check input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.switch{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-14);cursor:pointer}
.switch input{appearance:none;width:34px;height:20px;margin:0;border-radius:var(--r-pill);background:var(--slate-400);transition:background var(--dur);cursor:pointer;position:relative}
.switch input::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--dur) var(--ease)}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(14px)}
.form-grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--s-4) var(--s-5)}
.form-grid .span-all{grid-column:1/-1}
.form-sec{padding:var(--s-6) 0;border-top:1px solid var(--border)}
.form-sec:first-child{border-top:0;padding-top:0}
.form-sec>h3{margin-bottom:var(--s-1)}
.form-sec>.help{margin:0 0 var(--s-4)}
.form-actions{position:sticky;bottom:0;display:flex;gap:var(--s-2);justify-content:flex-end;padding:var(--s-3) var(--s-6);
background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-top:1px solid var(--border);margin:0 calc(var(--s-6) * -1) calc(var(--s-6) * -1);border-radius:0 0 var(--r-lg) var(--r-lg)}
/* =====================================================================
18. Tab e controllo segmentato
===================================================================== */
.tabs{display:flex;align-items:flex-end;gap:var(--s-6);border-bottom:1px solid var(--border)}
.tab{display:inline-flex;align-items:center;gap:var(--s-2);height:44px;padding:0 2px;border:0;background:none;cursor:pointer;
color:var(--text-2);font-size:var(--fs-14);font-weight:var(--fw-medium);position:relative;text-decoration:none}
.tab .ic{font-size:var(--ic-18)}
.tab:hover{color:var(--text);text-decoration:none}
.tab[aria-selected=true],.tab[aria-current=page]{color:var(--text)}
.tab[aria-selected=true]::after,.tab[aria-current=page]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
.seg{display:inline-flex;padding:3px;border-radius:var(--r-md);background:var(--surface-2);gap:2px}
.seg button{height:28px;padding:0 var(--s-3);border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);font-size:var(--fs-13);font-weight:var(--fw-medium);cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(29,48,71,.12)}
/* =====================================================================
19. Dialog (sempre