/* Sistema di design della dashboard — variante Mix (issue #64).
 *
 * Non scritto a mano: appiattito dall'anteprima `docs/ui-preview/index.html`
 * del branch `design/ui-preview-crm-style`, riferimento 39c0bd1. Li' le quattro
 * varianti convivono nello stesso foglio e si commutano con `html[data-mode]`,
 * `data-side` e `data-kpi`; qui la variante e' una sola, quindi le regole di
 * Navy, Ambra e Clean sono state tolte e quelle della Mix hanno perso il
 * prefisso. L'ordine delle regole e' quello originale, perche' e' cosi' che la
 * Mix sovrascrive le regole di base.
 *
 * I commenti vengono dall'anteprima e spiegano il PERCHE' di ogni scelta
 * (perche' quel grigio, perche' quella soglia): non toglierli.
 *
 * Le regole della Mix portano il prefisso `html[data-ui="mix"]`, che il
 * guscio mette sul tag <html>. Non e' decorazione: senza, la specificita'
 * scende sotto quella delle utility di Tailwind (che sono classi) e queste
 * vincono dove deve vincere il disegno.
 *
 * Le @font-face stanno in fonts.css, le utility in base.css.
 */

/* Shell: rail 64px, espansa 256px. Nessun hover: si apre solo col tasto. */
#sidebar { width: 4rem; transition: width .22s cubic-bezier(.4,0,.2,1); }
#main { padding-left: 4rem; transition: padding-left .22s cubic-bezier(.4,0,.2,1); }
html[data-nav="open"] #sidebar { width: 16rem; }
html[data-nav="open"] #main { padding-left: 16rem; }
html[data-nav="rail"] .nav-label,
html[data-nav="rail"] .nav-section,
html[data-nav="rail"] .nav-badge,
html[data-nav="rail"] .rail-hide { display: none; }
html[data-nav="rail"] .nav-item { justify-content: center; }
html[data-nav="rail"] .rail-only { display: flex; }
.rail-only { display: none; }
/* Tabella varianza: prima colonna ancorata */
.var-table th:first-child,
.var-table td:first-child {
    position: sticky; left: 0; z-index: 1; background: inherit;
  }
.var-table thead th:first-child { background: #fafafa; }
.var-table tbody td:first-child { background: #fff; }
.var-table tbody tr:hover td { background: #fafafa; }
/* Superfici AI: gradiente navy -> navy schiarito, con una deriva di tinta
     appena percettibile verso il viola (217 gradi -> 228 gradi). */
.ai-grad { background-image: linear-gradient(135deg,#13294b 0%,#34457e 100%);
             box-shadow: 0 2px 8px rgba(19,41,75,.22); }
.ai-grad:hover { background-image: linear-gradient(135deg,#0d1c33 0%,#2a3a6b 100%); }
/* ── Fascia KPI a sparkline ──────────────────────────────────────────
     Tre celle flex a peso uguale. Quella sotto il mouse porta il flex-grow
     a 1.8 e le altre si stringono: l'altezza della fascia non cambia mai,
     quindi grafici e tabella sotto non si spostano. Anche il dettaglio
     occupa gia' il suo spazio a riposo (opacita' 0), niente scarti. */
.kpi-spark { display:none; }
.spark-cell {
    flex:1 1 0; min-width:0; display:flex; align-items:center; gap:16px;
    padding:18px 20px; border-right:1px solid #e5e5e5;
    transition:flex-grow .35s cubic-bezier(.4,0,.2,1);
  }
.spark-cell:last-child { border-right:0; }
.spark-cell:hover { flex-grow:1.8; }
.spark-txt { min-width:0; flex:1 1 auto; }
.spark-lab {
    display:flex; align-items:center; gap:8px; font-size:11px; font-weight:500;
    text-transform:uppercase; letter-spacing:.06em; color:#a3a3a3; white-space:nowrap;
  }
.spark-chg { display:inline-flex; align-items:center; gap:2px; font-weight:600; letter-spacing:0; }
.spark-chg svg { width:12px; height:12px; }
.spark-val {
    margin-top:8px; font-size:26px; font-weight:600; letter-spacing:-.02em;
    font-variant-numeric:tabular-nums; color:#171717; white-space:nowrap;
  }
.spark-det {
    margin-top:5px; height:20px; font-size:12px; color:#737373;
    font-variant-numeric:tabular-nums; white-space:nowrap;
    opacity:0; transform:translateY(-3px);
    transition:opacity .25s ease, transform .25s ease;
  }
.spark-cell:hover .spark-det { opacity:1; transform:none; }
.spark-nav { display:inline-flex; align-items:center; gap:4px; margin-left:10px; vertical-align:middle; }
.spark-nav button {
    width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid #e5e5e5; border-radius:5px; background:#fff; color:#737373; cursor:pointer; padding:0;
  }
.spark-nav button:hover { background:#fafafa; color:#171717; }
.spark-chart { flex:0 0 44%; height:58px; }
.spark-chart svg { width:100%; height:100%; display:block; }
@media (max-width:900px) {
.spark-cell { border-right:0; border-bottom:1px solid #e5e5e5; }
.spark-cell:last-child { border-bottom:0; }
.spark-cell:hover { flex-grow:1; }
.spark-cell .spark-det { opacity:1; transform:none; }
}
/* ── Domande frequenti, nella chat ─────────────────────────────────────
     Non stanno piu' nella riga dell'AI di ogni pagina: la chat si apre con
     l'elenco. Ogni voce porta il colore della risposta che si aspetta sul
     pallino e, in hover, come tinta leggera del fondo e del testo. */
.faq { display:flex; flex-direction:column; gap:2px; margin-bottom:16px; }
.faq[hidden] { display:none; }
.faq-titolo { padding:0 10px 6px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#a3a3a3; }
.faq-voce {
    display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:10px;
    background:transparent; font:inherit; font-size:13px; font-weight:500; color:#404040; text-align:left;
    transition:background-color .15s ease, color .15s ease;
  }
.faq-voce i { flex:none; width:7px; height:7px; border-radius:999px; background:var(--qc); }
.faq-voce span { flex:1 1 auto; min-width:0; }
.faq-voce svg { flex:none; width:14px; height:14px; color:#d4d4d4; }
.faq-voce:hover,
.faq-voce:focus-visible { background:color-mix(in srgb, var(--qc) 10%, #fff); color:var(--qc); outline:none; }
.faq-voce:hover svg,
.faq-voce:focus-visible svg { color:currentColor; }
/* ═══════════ Variante Ambra ═══════════
     Cornice fredda, tela chiara, card bianche flottanti senza bordo.
     Niente sidebar: la navigazione e' una pillola in topbar, l'attiva e'
     navy piena. Il navy resta il colore dell'interfaccia, l'ambra tocca
     solo i dati: serie dei grafici e sparkline. Verde e rosso restano al
     giudizio (freccia e percentuale), perche' li' il colore e' semantica,
     non decorazione. */
html[data-ui="mix"] body { background:#c9d8e2; }
html[data-ui="mix"] #sidebar { display:none; }
/* Il foglio non arriva al vivo: la pagina si stringe per far vedere la
     cornice. Il margine laterale segue la finestra — 3vw, con un minimo di
     14px, sotto il quale su schermi stretti mangerebbe il contenuto, e un
     tetto di 56px, oltre il quale la cornice diventerebbe una fascia. */
/* overflow:clip e non hidden: taglia gli angoli allo stesso modo, ma non
     fa del foglio un contenitore di scorrimento, che fermerebbe la testata
     sticky dentro il foglio invece che in cima alla finestra. */
/* La cornice e' la stessa sui quattro lati (prima 20px sopra e sotto e fino
     a 56px ai lati): 2vw, fra 12px sul telefono e 28px sugli schermi larghi.
     Il foglio e' alto almeno quanto la finestra meno la cornice, anche con
     poco contenuto (l'admin con due clienti), e il piede sta sempre in fondo. */
html[data-ui="mix"] { --cornice:clamp(12px, 2vw, 28px); }
html[data-ui="mix"] #main {
    padding-left:0; margin:var(--cornice);
    display:flex; flex-direction:column;
    min-height:calc(100vh - 2 * var(--cornice));
    min-height:calc(100dvh - 2 * var(--cornice));
    border-radius:22px; overflow:clip;
    background:#f4f7f9; box-shadow:0 3px 22px rgba(28,58,88,.12);
  }
html[data-ui="mix"] #main > main { flex:1 1 auto; display:flex; flex-direction:column; }
html[data-ui="mix"] #main > main > .sheet-foot { margin-top:auto; }
/* Testata sticky: prende il colore del foglio, cosi' il contenuto non si
     vede passare sotto; quando la pagina e' scorsa un filetto e un'ombra
     leggera la staccano da quello che scorre. */
html[data-ui="mix"] header {
    background:inherit; border-bottom:0; backdrop-filter:none;
    height:70px; padding-left:18px; padding-right:18px;
    transition:box-shadow .2s ease;
  }
/* La pillola di navigazione sta al centro esatto e non si sposta cambiando
     pagina: tre colonne, le due laterali uguali. Con justify-between la
     pillola seguiva la larghezza del blocco di sinistra, che cambia quando il
     selettore d'anno c'e' o non c'e' (62px di salto fra Monitor e Carica
     Dati). Sotto i 640px la testata va su due righe (regole in fondo). */
@media (min-width:640px) {
  html[data-ui="mix"] #main > header {
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  }
  html[data-ui="mix"] #main > header > :first-child { justify-self:start; }
  html[data-ui="mix"] #main > header > :last-child:not(:first-child) { justify-self:end; }
}
html[data-ui="mix"] [data-scorso] header { box-shadow:0 1px 0 #e2e8f0, 0 8px 16px -12px rgba(28,58,88,.25); }
html[data-ui="mix"] #main > main { padding:0 18px 22px; }
html[data-ui="mix"] #pageTitle { display:none; }
#brand { display:none; }
html[data-ui="mix"] #brand { display:flex; }
#topNav { display:none; }
html[data-ui="mix"] #topNav {
    display:flex; align-items:center; gap:2px; padding:4px;
    border-radius:999px; background:#fff; box-shadow:0 2px 10px rgba(28,58,88,.07);
  }
.tn-item {
    padding:7px 14px; border-radius:999px; white-space:nowrap;
    font-size:12.5px; font-weight:600; color:#64748b; transition:.15s;
  }
.tn-item:hover { background:#eef3f7; color:#0f172a; }
.tn-item.tn-active { background:#13294b; color:#fff; }
.tn-item.tn-active:hover { background:#0d1c33; }
.tn-item { display:inline-flex; align-items:center; gap:5px; border:0; cursor:pointer; font-family:inherit; }
.tn-chev { width:13px; height:13px; opacity:.55; transition:transform .18s ease; }
.tn-group:hover .tn-chev,
.tn-group:focus-within .tn-chev { transform:rotate(180deg); }
/* Il menu si apre in hover o quando un figlio prende il fuoco. Lo pseudo
     ::before copre gli 8px fra pillola e pannello: senza quel ponte il menu
     si chiude mentre ci stai andando sopra. */
.tn-group { position:relative; }
.tn-menu {
    position:absolute; top:100%; left:50%; z-index:50; min-width:196px; margin-top:8px;
    transform:translateX(-50%) translateY(-5px);
    background:#fff; border-radius:14px; padding:6px;
    box-shadow:0 12px 34px rgba(28,58,88,.17);
    opacity:0; visibility:hidden;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
.tn-menu::before { content:''; position:absolute; left:0; right:0; top:-10px; height:10px; }
.tn-group:hover .tn-menu,
.tn-group:focus-within .tn-menu {
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }
.tn-menu a,
.tn-menu .tn-lock {
    display:block; padding:8px 12px; border-radius:9px;
    font-size:12.5px; font-weight:500; color:#334155; white-space:nowrap;
  }
.tn-menu a:hover { background:#f1f5f9; color:#0f172a; }
.tn-menu a.tn-cur { background:#13294b; color:#fff; }
.tn-menu .tn-lock {
    display:flex; align-items:center; justify-content:space-between; gap:14px; color:#94a3b8;
  }
.tn-menu .tn-lock em {
    font-style:normal; font-size:9px; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em;
  }
/* Superfici: card bianche, angoli larghi, ombra morbida, zero bordi. */
html[data-ui="mix"] .kpi-spark {
    display:flex; gap:14px; background:transparent; border:0; margin:0;
  }
html[data-ui="mix"] .spark-cell {
    background:#fff; border:0; border-radius:18px; padding:20px;
    box-shadow:0 2px 12px rgba(28,58,88,.07);
  }
html[data-ui="mix"] .panel-toolbar {
    background:transparent; border:0; padding:0; margin:0 0 14px;
  }
html[data-ui="mix"] .panel-charts { gap:14px; margin-top:14px; border:0; background:transparent; }
html[data-ui="mix"] .panel-cell {
    background:#fff; border:0 !important; border-radius:18px !important;
    box-shadow:0 2px 12px rgba(28,58,88,.07) !important;
  }
html[data-ui="mix"] .panel-table {
    background:#fff; border:0; border-radius:18px; margin-top:14px;
    overflow:hidden; box-shadow:0 2px 12px rgba(28,58,88,.07);
  }
html[data-ui="mix"] .panel-table > div:first-child { border-bottom-color:#eef2f6; }
html[data-ui="mix"] .var-table thead th { background:#f8fafc; }
html[data-ui="mix"] .var-table tbody td:first-child { background:#fff; }
html[data-ui="mix"] .sheet-foot { padding:18px 2px 0; }
/* Numeri: valore grande con l'unita' piccola attaccata, come nel
     riferimento. L'unita' e' un <span> dentro il valore, non un secondo
     blocco, cosi' resta sulla stessa riga di base. */
.u { font-size:.5em; font-weight:600; letter-spacing:.02em; color:#94a3b8; margin-left:1px; }
html[data-ui="mix"] .spark-val { font-size:30px; font-weight:800; letter-spacing:-.03em; }
html[data-ui="mix"] .spark-lab { color:#94a3b8; letter-spacing:.08em; }
/* ── Ambra: navy ammorbidito e chat in oro ──────────────────────────
     In Ambra il blu e' quello del marchio Abako portato scuro: #08085e,
     il tono che prima toccava alla sola pillola attiva sotto il mouse.
     Scelto a occhio: il navy ufficiale del pacchetto logo e' #000080, piu'
     chiaro e piu' saturo; per allinearsi va cambiato qui e in BLU_ABAKO. L'hover
     scende di un altro gradino, a #050540 (stessa tinta, luminosita' da
     20% a 13,5%), cosi' la pillola attiva reagisce ancora al mouse.
     Il bottone della chat va in senso opposto: oro, con il badge blu. */
html[data-ui="mix"] .bg-navy { background-color:#08085e !important; }
html[data-ui="mix"] .tn-item.tn-active { background:#08085e; }
html[data-ui="mix"] .tn-item.tn-active:hover { background:#050540; }
html[data-ui="mix"] .tn-menu a.tn-cur { background:#08085e; }
/* In Ambra tutte le superfici AI sono oro: bottone Analisi AI, marchio e
     invio nel pannello chat, bottone flottante. Il blu del marchio resta
     all'interfaccia. Il bottone Analisi AI qui va senza icona. */
html[data-ui="mix"] .ai-grad {
    background-image:linear-gradient(135deg,#c69a3f 0%,#a17530 100%);
    box-shadow:0 2px 8px rgba(161,117,48,.26);
  }
html[data-ui="mix"] .ai-grad:hover {
    background-image:linear-gradient(135deg,#b78c34 0%,#8f6728 100%);
  }
html[data-ui="mix"] .ico-chip { display:none; }
html[data-ui="mix"] #fab {
    background-image:linear-gradient(135deg,#c69a3f 0%,#a17530 100%);
    box-shadow:0 6px 20px rgba(161,117,48,.34);
  }
html[data-ui="mix"] #fab:hover {
    background-image:linear-gradient(135deg,#b78c34 0%,#8f6728 100%);
  }
html[data-ui="mix"] .fab-badge {
    background:#08085e; color:#fff; border-color:#fff;
  }
/* ═══════════ Variante Clean ═══════════
     Ambra in tutto — cornice fredda, card flottanti, blu del marchio, AI in
     oro — tranne la fascia KPI: li' i tre blocchi escono dalla card e
     appoggiano direttamente sulla tela, divisi da filetti verticali come
     nella Navy. Sparkline, numeri e formati restano quelli dell'Ambra:
     cambia il contenitore, non il contenuto.
     Clean e' Ambra a tutti gli effetti (data-side="soft"), quindi tutto il
     resto arriva gratis: serve solo il secondo attributo, data-kpi. Le due
     graffe di attributo bastano anche a battere per specificita' le regole
     dell'Ambra, senza dipendere dall'ordine di scrittura.
     La Mix porta lo stesso data-kpi="flat": tutto questo blocco vale anche
     per lei, e i suoi ritocchi stanno piu' sotto, nel blocco Variante Mix. */
html[data-ui="mix"] .kpi-spark { gap:0; }
html[data-ui="mix"] .spark-cell {
    background:transparent; border-radius:0; box-shadow:none;
    padding:14px 22px; border-right:1px solid #dbe3eb;
  }
html[data-ui="mix"] .spark-cell:last-child { border-right:0; }
/* Il blocco di testo non e' piu' appoggiato al filo sinistro: si centra
     nella meta' di cella che gli resta, cosi' i numeri stanno verso il
     centro del riquadro invece che schiacciati sul bordo. Per questo le
     tre celle hanno lo stesso padding — un rientro asimmetrico su prima e
     ultima sposterebbe i tre centri di quantita' diverse. .spark-lab e'
     un flex, quindi non lo centra text-align ma justify-content. */
html[data-ui="mix"] .spark-txt { text-align:center; }
html[data-ui="mix"] .spark-lab { justify-content:center; }
/* Il testo ha la precedenza sulla sparkline. Quando lo spazio non basta
     cede prima la sparkline: flex-shrink 1000 contro 1, e siccome il flex
     ripartisce il restringimento in proporzione a fattore per base, al
     testo tocca meno di un pixel finche' la sparkline non arriva a zero.
     Solo dopo si stringe il testo, e l'etichetta, centrata, esce di pari
     misura dai due lati dentro il padding della cella, dove non c'e' piu'
     niente da coprire. Prima il blocco centrato si stringeva insieme al
     grafico e sbordava oltre il filetto: a 1280px AVANZAMENTO BUDGET
     (200px in 134) lo passava di 11px e copriva la sparkline per 17.
     La fisarmonica resta accesa a ogni larghezza in cui le celle stanno
     in riga. */
html[data-ui="mix"] .spark-txt { flex:1 1 auto; min-width:0; }
html[data-ui="mix"] .spark-chart {
    flex:0 1000 44%; min-width:0; container-type:inline-size;
  }
/* Sotto i 30px una sparkline non si legge piu' come andamento e sembra
     un difetto: li' sparisce, in dissolvenza. La soglia la misura la
     sparkline stessa (container query), non la finestra. */
html[data-ui="mix"] .spark-chart svg { transition:opacity .2s ease; }
@container (max-width:30px) {
html[data-ui="mix"] .spark-chart svg { opacity:0; }
}
/* Peso: etichetta, variazione e unita' salgono tutte a 700. La variazione
     resta distinta dall'etichetta per colore, non piu' per peso. */
html[data-ui="mix"] .spark-lab { font-weight:700; }
html[data-ui="mix"] .spark-chg { font-weight:700; }
/* L'unita' prende il colore del numero invece del grigio: e' parte della
     cifra, non un'annotazione. Toglie anche di mezzo, in Clean, il #94a3b8
     accanto ai numeri, che stava a 2,38:1 sulla tela. */
html[data-ui="mix"] .spark-val .u { font-weight:700; color:inherit; }
/* ── Grafici fuori dalla card ─────────────────────────────────────────
     Con le KPI sulla tela, le due lastre bianche restavano l'unico peso
     della pagina e si leggevano come appiccicate sopra. Via anche quelle:
     titolo, comandi e disegno stanno sulla tela come la fascia KPI.
     Le righe di griglia sono tarate su bianco (#f5f5f5) e sulla tela
     sparirebbero: le riprende il CSS sovrascrivendo l'attributo di
     presentazione dell'SVG, senza toccare il JS che lo disegna.
     La tabella varianza resta l'unica card della pagina: li' il bianco
     serve davvero, sotto righe fitte di numeri.
     Il passo fra le due colonne sale da 14 a 32px: senza i bordi delle card
     a separarle, a distanza corta i due disegni si leggevano come uno. */
html[data-ui="mix"] .panel-charts { gap:32px; margin-top:20px; }
html[data-ui="mix"] .panel-charts > .panel-cell {
    background:transparent; padding:0 2px;
    box-shadow:none !important; border-radius:0 !important;
  }
html[data-ui="mix"] #barChart  line[stroke="#f5f5f5"],
html[data-ui="mix"] #lineChart line[stroke="#f5f5f5"],
html[data-ui="mix"] #yoyBarChart  line[stroke="#f5f5f5"],
html[data-ui="mix"] #cliBarChart  line[stroke="#f5f5f5"] { stroke:#e2e9ef; }
/* I due grafici devono partire dalla stessa quota. Erano sfalsati per due
     motivi che si sommavano: a sinistra l'intestazione e' piu' alta, perche'
     contiene i due tasti del mese (28px), e la fascia bassa e' piu' profonda,
     perche' le dieci etichette vanno inclinate. Qui il CSS pareggia le
     intestazioni; la fascia bassa la pareggia renderLine, che in Clean prende
     lo stesso padB di renderBar. */
html[data-ui="mix"] .panel-charts > .panel-cell > :first-child {
    min-height:28px; display:flex; align-items:center;
  }
/* ── Cornice ──────────────────────────────────────────────────────────
     In Clean le superfici si tolgono, non si aggiungono: la cornice deve fare
     una cosa sola, dare un bordo al foglio, e non deve essere un colore.
     #dae0e7 — hsl(214, 22%, 88%) — e' lo stesso slate dei neutri gia' in
     uso qui (#94a3b8, #64748b, #f8fafc): dieci punti di luminosita'
     sotto il foglio, quindi il bordo si legge da solo, e saturazione bassa,
     quindi legge come fondo e non come tinta. Cosi' gli unici colori in
     pagina restano quelli che significano qualcosa: blu del marchio, oro
     per l'AI, pastelli per linea, verde e rosso per il giudizio.
     Scartati: il blu del marchio, che a 14px di banda legge come un bordo e
     annulla l'ombra; il #c9d8e2 dell'Ambra, abbastanza saturo da leggersi
     come colore e comunque gia' identita' di un'altra variante; un panna
     azzurrino #e7edee, troppo vicino al foglio per distinguersene; un panna
     caldo #efe8dc preso dall'oro delle superfici AI — l'oro qui e' un
     segnale, e una cornice dorata e' la piu' grande area d'oro dello
     schermo, quindi spende il segnale in decorazione.
     Se serve piu' calda senza tirare in ballo l'oro: #e3e1de. */
html[data-ui="mix"] body { background:#dae0e7; }
/* Il foglio resta freddo e sale un pelo verso il bianco: #f4f7f9 ->
     #f8fafc, lo slate-50 gia' in uso qui per le intestazioni di tabella.
     E' il 40% della distanza dal bianco: dE76 1,2 dal colore di prima e 2,2
     dal bianco puro. Piu' in la' non conviene andare: sotto circa 2,3 la
     differenza col bianco smette di percepirsi, e le superfici bianche
     appoggiate sul foglio — la card della varianza, la pillola di
     navigazione — perderebbero il bordo, tenute solo dall'ombra. Il testo
     ci guadagna appena: #94a3b8 passa da 2,38 a 2,45:1.
     Provato e scartato un foglio panna, #f9f6f3. */
html[data-ui="mix"] #main { background:#f8fafc; }
/* Il cliente principale della linea sta in una chip: e' un'entita', non
     una cifra, e cosi' si stacca dai numeri della riga senza alzare la voce.
     Fondo slate-100 e filetto slate-200, gli stessi neutri del resto della
     Clean; raggio 6px come i bottoni, non la pillola piena della barra
     domande, che in una tabella fitta leggerebbe troppo giocosa. Fuori da
     Clean e Mix lo span non ha stile e il nome resta testo semplice. */
html[data-ui="mix"] .cli-chip {
    display:inline-block; margin-bottom:3px; padding:1px 7px; border-radius:6px;
    background:#f1f5f9; border:1px solid #e2e8f0;
    color:#334155; font-size:12px; font-weight:500; line-height:18px;
    white-space:nowrap;
  }
/* Sotto la chip la quota del cliente e' verde: si colora la cifra, il resto
     della didascalia resta grigio, come nel dettaglio delle KPI. */
html[data-ui="mix"] .cli-pct { color:#047857; font-weight:600; }
/* ── Firma nel piè di pagina ─────────────────────────────────────────
     Al posto del titolo, il lockup ufficiale Abako rifatto in HTML invece
     che incollato come immagine: "abak" e' testo in Schibsted Grotesk 800,
     l'abaco e' l'SVG del pacchetto logo copiato forma per forma. Le quote
     vengono da Abako-logo-lockup-navy.svg, dove il testo e' a 200px:
     letter-spacing -6 -> -0.03em; il testo avanza per 478,25 (misurato) e
     il simbolo parte a x 487,25 -> 0.045em di stacco; il riquadro del
     simbolo e' 134 unita' -> 0.67em e scende 12 sotto la linea di base ->
     vertical-align -0.06em. Cosi' la "o" e' quella del logo a qualsiasi
     dimensione. Nel logo l'abaco e' volutamente un 9% piu' alto della "a"
     (0.609em contro 0.56em): e' la compensazione ottica di una forma chiusa,
     e le regole del pacchetto vietano di cambiare le proporzioni. Colori
     solo quelli ammessi: navy #000080, spark #FCA311 sul pallino. */
.foot-brand { display:none; }
html[data-ui="mix"] .foot-title { display:none; }
html[data-ui="mix"] .foot-brand {
    display:inline-block; font-family:'Schibsted Grotesk', sans-serif;
    font-weight:800; font-size:18px; line-height:1; letter-spacing:-0.03em;
    color:#000080; white-space:nowrap;
  }
html[data-ui="mix"] .foot-mark {
    display:inline-block; width:0.67em; height:0.67em;
    margin-left:0.045em; vertical-align:-0.06em;
  }
/* A colonna singola i filetti verticali diventano orizzontali. La regola
     dell'Ambra non stacca mai in colonna, quindi qui va dichiarata. */
@media (max-width:900px) {
html[data-ui="mix"] .kpi-spark { flex-direction:column; }
html[data-ui="mix"] .spark-cell {
      border-right:0; border-bottom:1px solid #dbe3eb;
    }
html[data-ui="mix"] .spark-cell:last-child { border-bottom:0; }
}
/* ═══════════ Variante Mix ═══════════
     Clean in tutto — stesso data-side e stesso data-kpi, quindi valgono
     tutte le regole qui sopra — con tre ritocchi; la distingue data-mode.
     Bottoni: selettore anno, pillola di navigazione, barra domande, frecce
     delle KPI, Fino a oggi, frecce del grafico a barre e comandi del
     Confronto Anni (anni, periodo, chip dei filtri) sono solo contorno:
     fondo trasparente, cioe' il foglio, e filetto #cbd5e1, lo slate-300
     gia' in uso qui, dE OKLab 12,3 dal foglio; in hover si riempiono di
     #f1f5f9. La pillola di navigazione non ha un bordo suo: il filetto e'
     un'ombra interna da 1px, cosi' la misura non cambia. Il testo grigio
     dei bottoni resta a 4,62:1. Restano come sono i bottoni pieni — voce
     attiva blu, Analisi AI e chat in oro — e quelli dentro la card della
     varianza e nel pannello chat, dove lo sfondo e' il bianco della card.
     Provato e scartato il colore della cornice, #dae0e7, come riempimento:
     un grigio piatto legge come bottone disattivato, lo stesso colore della
     cornice fa sembrare i bottoni buchi nel foglio, e il testo grigio
     scende a 3,57:1.
     Grafici: barre nei colori della Navy, con tre linee ricolorate al posto
     dei verdi; trend nel blu del marchio. Non stanno qui ma nel JS, in
     colSbu, nel campo mix di SBUS e in renderLine. */
html[data-ui="mix"] #topNav { background:transparent; box-shadow:inset 0 0 0 1px #cbd5e1; }
html[data-ui="mix"] .tn-item:not(.tn-active):hover { background:#f1f5f9; }
html[data-ui="mix"] .yr-nav,
html[data-ui="mix"] .spark-nav button,
html[data-ui="mix"] .ytd-toggle,
html[data-ui="mix"] #barPrev,
html[data-ui="mix"] #barNext { background:transparent; border-color:#cbd5e1; }
html[data-ui="mix"] .yr-nav button:hover,
html[data-ui="mix"] .spark-nav button:hover,
html[data-ui="mix"] .ytd-toggle:hover,
html[data-ui="mix"] #barPrev:hover:not(:disabled),
html[data-ui="mix"] #barNext:hover:not(:disabled) { background:#f1f5f9; }
/* Comandi del Confronto Anni. Solo background-color: il selettore d'anno
     porta la freccia come immagine di sfondo. */
html[data-ui="mix"] .yoy-select,
html[data-ui="mix"] .yoy-seg,
html[data-ui="mix"] #yoyFiltroLinea,
html[data-ui="mix"] #yoyFiltroMese,
html[data-ui="mix"] #cliFiltroCliente { background-color:transparent; border-color:#cbd5e1; }
html[data-ui="mix"] .yoy-select:hover,
html[data-ui="mix"] .yoy-seg button:not([aria-pressed="true"]):hover,
html[data-ui="mix"] #yoyFiltroLinea:hover,
html[data-ui="mix"] #yoyFiltroMese:hover,
html[data-ui="mix"] #cliFiltroCliente:hover { background-color:#f1f5f9; }
/* Foglio: in Mix sale ancora verso il bianco, #f8fafc -> #fbfcfd, di
     nuovo il 40% della distanza dal bianco nella stessa tinta fredda: dE76
     0,96 dal foglio della Clean e 1,25 dal bianco. E' sotto la soglia di
     circa 2,3 detta nel blocco del foglio, e il prezzo e' quello: la card
     bianca della varianza si stacca ormai quasi solo per l'ombra. In Mix e'
     l'unica superficie bianca rimasta sul foglio, perche' la pillola di
     navigazione e' solo contorno. La cornice invece si legge
     meglio: da dE76 9,7 a 10,6 dal foglio. Tre graffe di attributo per
     battere la regola della Clean, che ne ha due. */
html[data-ui="mix"] #main { background:#fbfcfd; }
#legActualWrap { display:none; }
#legPerLinea { display:flex; }
/* Le dieci linee di business hanno bisogno di larghezza; il trend, che e'
     una curva sola, ne ha molta meno. 1.5 contro 1 invece che meta' e meta'.
     La classe lg:grid-cols-2 di Tailwind e' stata tolta dal markup: aveva la
     stessa specificita' di questa regola ed essendo iniettata dopo vinceva. */
.panel-charts { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
.panel-charts { grid-template-columns: 1fr 1fr; }
html[data-ui="mix"] .panel-charts { grid-template-columns: 1.5fr 1fr; }
}
/* La terza variante e' la navy con un altro carattere: percio' il font e'
     un attributo a se' (data-font) invece di una copia di tutte le regole
     di data-side. Il testo dentro gli SVG dei grafici e' scritto con un
     attributo di presentazione, che una regola CSS sovrascrive: cosi'
     anche assi ed etichette seguono il cambio senza toccare il JS. */
#barChart svg,
#lineChart svg,
#yoyBarChart svg,
#yoyLineChart svg,
#cliBarChart svg,
#cliDonut svg { font-family:inherit; }
/* Barre e pallini si scelgono col clic. Sopra ogni colonna c'e' un
     rettangolo trasparente largo quanto la colonna e alto fino alle
     etichette: anche la barra di Formazione, alta pochi pixel, si prende al
     primo colpo, e cliccare il nome della linea o del mese vale uguale. Al
     passaggio del mouse la colonna si vela appena, per dire che si puo'. */
.hit { cursor:pointer; fill:transparent; outline:none; }
.hit:hover { fill:rgba(15,23,42,.035); }
.hit:focus-visible { stroke:#94a3b8; stroke-width:1.5; stroke-dasharray:3 3; }
/* Cursori di tutta l'app: una freccia e una manina nere piene, disegnate in
     SVG. Sono immagini del cursore di sistema, le disegna il browser come i
     cursori normali, quindi non costano nulla e non restano indietro al
     mouse. !important perche' devono vincere su ogni cursor delle regole
     sparse e di Tailwind. La manina va su quello che si clicca: link con un
     indirizzo, bottoni e select attivi, etichette di un campo, elementi con
     role="button" (colonne, spicchi e mesi dei grafici) e le righe della
     tabella clienti. I bottoni disabilitati e le
     voci inerti della navigazione restano con la freccia. Nei campi di testo
     resta la barretta, che dice dove si scrive. */
html,
html * { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2.5v17.2l4.6-4.4 3.1 6.8 2.9-1.3-3.1-6.7h6.4z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, default !important; }
/* Ogni campo in cui si scrive ha il cursore di testo: l'anteprima lo dava
   solo a search e textarea, ma importi del Budget, giorni, riga a mano e
   admin sono campi veri. */
html input[type="search"],
html input[type="text"],
html input[type="password"],
html input[type="number"],
html input[type="email"],
html input:not([type]),
html textarea { cursor:text !important; }
html a[href],
html button:not(:disabled),
html select:not(:disabled),
html label[for],
html [role="button"],
html .cli-riga { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M9 1.5c1 0 1.5.7 1.5 1.5v6.3c.4-.4.9-.5 1.5-.5.9 0 1.4.5 1.5 1.1.4-.3.9-.4 1.4-.3.8.1 1.3.7 1.4 1.4.4-.2.9-.2 1.4 0 .8.3 1.3 1 1.3 1.8v3.7c0 3-1.5 5.5-4.5 6h-3c-2 0-3.2-1-4.3-2.7l-3.6-5.6c-.5-.8-.3-1.8.5-2.2.8-.4 1.7-.1 2.2.6l1.2 1.6V3c0-.8.5-1.5 1.5-1.5z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M10.5 9.3v4M13.5 9.9v3.6M16.3 11v2.8' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 9 2, pointer !important; }
/* Trend del Confronto Anni. Al passaggio del mouse non si vela la colonna:
     una linea verticale scivola sul mese piu' vicino e porta con se' il
     cartellino col valore. */
#yoyLineChart { position:relative; }
#yoyLineChart .hit:hover { fill:transparent; }
#yoyCursore { transition:opacity .15s; }
#yoyLineChart text.yt-mese-on { font-weight:700; fill:#171717; }
.yt-tip {
    position:absolute; left:0; top:4px; pointer-events:none;
    opacity:0; transition:opacity .15s; will-change:transform;
  }
.yt-tip.yt-on { opacity:1; }
.yt-riga { display:flex; align-items:center; gap:6px; }
.yt-tag {
    padding:3px 8px; border-radius:4px; color:#fff;
    font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;
  }
.yt-sub { margin-top:3px; font-size:11px; color:#737373; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* La classe inline-flex di Tailwind batterebbe l'attributo hidden. */
#varFiltroLinea[hidden],
#varFiltroMese[hidden],
#varCerca[hidden] { display:none !important; }
#barPrev[hidden],
#barNext[hidden] { display:none !important; }
/* Interruttore "Fino a oggi": alto 28px come le frecce accanto, bordo
     neutral-200 come loro. Acceso, la pista prende il blu dell'interfaccia. */
.ytd-toggle {
    display:inline-flex; align-items:center; gap:8px; height:28px; margin-right:8px;
    padding:0 10px 0 7px; border:1px solid #e5e5e5; border-radius:6px; background:transparent;
    font:inherit; font-size:12px; font-weight:500; color:#737373; cursor:pointer; white-space:nowrap;
    transition:background-color .15s ease, color .15s ease;
  }
.ytd-toggle:hover { background:#fafafa; color:#404040; }
.ytd-toggle:focus-visible { outline:2px solid #94a3b8; outline-offset:2px; }
.ytd-track {
    position:relative; flex:none; width:26px; height:14px; border-radius:999px;
    background:#d4d4d4; transition:background-color .18s ease;
  }
.ytd-knob {
    position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:999px;
    background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.18); transition:transform .18s ease;
  }
.ytd-toggle[aria-checked="true"] { color:#171717; }
.ytd-toggle[aria-checked="true"] .ytd-track { background:#13294b; }
html[data-ui="mix"] .ytd-toggle[aria-checked="true"] .ytd-track { background:#08085e; }
.ytd-toggle[aria-checked="true"] .ytd-knob { transform:translateX(12px); }
/* ═══════════ Navigazione e viste ═══════════
     Quattro viste nello stesso file, scelte dall'indirizzo:
     #actual-vs-budget, #confronto-anni, #analisi-clienti e #carica-dati. Le
     altre voci della sidebar e dei menu restano visibili ma inerti — niente
     href, niente manina, niente hover da link. */
.nav-inerte { cursor:default; }
.tn-menu a.nav-inerte:hover { background:transparent; color:#334155; }
[data-vista-pannello][hidden] { display:none !important; }
/* ═══════════ Carica Dati ═══════════
     Quarta vista, #carica-dati. Riprogettata sulla pagina di produzione
     (allocator/upload.html): stesso caricamento della griglia mensile, ma i
     selettori di mese e anno diventano un calendario dei dodici mesi col loro
     stato, e il mese si sceglie li'. Due funzioni in produzione non esistono,
     e in pagina non sono marcate (lo dice il README): sostituire un mese gia'
     caricato ed escludere le fatture gia' caricate. Il colore del trend arriva
     dal JS in --cd-col. */
#caricaComandi { display:none; }
html[data-vista="carica"] #caricaComandi { display:flex; }
html[data-vista="carica"] .yr-nav { display:none; }
.cd-cal { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:6px; padding:16px 20px 0; }
.cd-mese {
    display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0;
    padding:9px 9px 8px; border:1px solid #e5e5e5; border-radius:10px; background:#fff;
    font:inherit; text-align:left; transition:border-color .15s ease, background-color .15s ease;
  }
.cd-mese:hover:not(:disabled) { border-color:#cbd5e1; background:#f8fafc; }
.cd-mese:focus-visible { outline:2px solid #94a3b8; outline-offset:2px; }
.cd-mese[aria-pressed="true"] { border-color:var(--cd-col); box-shadow:inset 0 0 0 1px var(--cd-col); background:#f8fafc; }
.cd-mese:disabled { background:transparent; border-style:dashed; }
.cd-sigla { font-size:12px; font-weight:600; color:#171717; }
.cd-mese:disabled .cd-sigla,
.cd-mese:disabled .cd-imp { color:#a3a3a3; }
.cd-stato { display:flex; align-items:center; gap:5px; max-width:100%; font-size:10.5px; color:#737373; white-space:nowrap; }
.cd-stato em { min-width:0; overflow:hidden; text-overflow:ellipsis; font-style:normal; }
.cd-imp { font-size:11px; color:#525252; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cd-stato i,
.cd-chip i { flex:none; width:7px; height:7px; border-radius:999px; }
/* Pallino verde sul mese confermato: qui il verde segna uno stato, non uno
     scostamento. */
.cd-ok i { background:#059669; }
.cd-rev i { background:#d97706; }
.cd-vuoto i { background:transparent; box-shadow:inset 0 0 0 1.5px #a3a3a3; }
/* Fra 900 e 1360px le caselle non tengono "Confermato" per intero (a
     1224px restava "Conferma..."): resta il pallino, lo stato scritto va nel
     title. */
@media (min-width:901px) and (max-width:1360px) {
.cd-stato em { display:none; }
}
/* Bottone accanto ai ricavi non allocati: apre il pannello delle regole di
     allocazione, con in cima i codici rimasti fuori. In oro, lo stesso
     gradiente del bottone Analisi AI, in tutte le varianti: e' l'azione che la
     cella chiede di fare. Sta dentro .spark-val, quindi rimette carattere,
     spaziatura e colore del testo. */
.cd-regole {
    display:inline-flex; align-items:center; height:28px; margin-left:12px; padding:0 11px; vertical-align:middle;
    border:0; border-radius:7px;
    background-image:linear-gradient(135deg,#c69a3f 0%,#a17530 100%); box-shadow:0 2px 8px rgba(161,117,48,.26);
    font:inherit; font-size:12px; font-weight:600; letter-spacing:0; color:#fff;
  }
.cd-regole:hover { background-image:linear-gradient(135deg,#b78c34 0%,#8f6728 100%); }
.cd-pannello { padding:16px 20px 20px; }
.cd-testa { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; }
.cd-testa h4 { font-size:14px; font-weight:600; color:#171717; }
.cd-chip {
    display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px;
    background:#f1f5f9; font-size:11.5px; font-weight:500; color:#334155; white-space:nowrap;
  }
.cd-drop {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%;
    min-height:150px; padding:20px; border:1.5px dashed #cbd5e1; border-radius:14px; background:#f8fafc;
    font:inherit; color:#525252; text-align:center; transition:border-color .15s ease, background-color .15s ease;
  }
.cd-drop:hover { border-color:#94a3b8; background:#f1f5f9; }
.cd-drop svg { width:26px; height:26px; color:#94a3b8; }
.cd-drop b { font-size:13.5px; font-weight:600; color:#171717; }
.cd-drop span { font-size:12px; color:#737373; }
.cd-file { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 16px; border:1px solid #e5e5e5; border-radius:12px; }
.cd-file > svg { flex:none; width:22px; height:22px; color:#94a3b8; }
.cd-file-txt { flex:1 1 180px; min-width:0; }
.cd-file-nome { display:block; font-size:13px; font-weight:600; color:#171717; }
.cd-file-info { font-size:12px; color:#737373; font-variant-numeric:tabular-nums; }
.cd-bottone {
    height:32px; padding:0 14px; border:0; border-radius:8px; background:var(--cd-col); color:#fff;
    font:inherit; font-size:12.5px; font-weight:600; white-space:nowrap;
  }
.cd-bottone:hover { filter:brightness(1.2); }
.cd-secondario {
    display:inline-flex; align-items:center; height:32px; padding:0 12px; border:1px solid #e5e5e5; border-radius:8px;
    background:#fff; font:inherit; font-size:12.5px; font-weight:500; color:#404040; white-space:nowrap;
  }
.cd-secondario:hover { background:#fafafa; }
.cd-spento { opacity:.5; }
html[data-ui="mix"] .cd-secondario,
html[data-ui="mix"] .cd-mese:not(:disabled) { background-color:transparent; border-color:#cbd5e1; }
.cd-inerte { font-size:12px; color:#a3a3a3; }
.cd-passi { display:flex; flex-direction:column; gap:10px; margin-top:14px; padding:0 2px; }
.cd-passo { display:flex; align-items:center; gap:10px; font-size:13px; color:#a3a3a3; }
.cd-passo i {
    flex:none; display:flex; align-items:center; justify-content:center; width:18px; height:18px;
    border:1.5px solid #d4d4d4; border-radius:999px;
  }
.cd-passo.cd-in-corso { color:#171717; }
.cd-passo.cd-in-corso i { border:2px solid #e5e5e5; border-top-color:var(--cd-col); animation:cd-giro .8s linear infinite; }
.cd-passo.cd-fatto { color:#525252; }
.cd-passo.cd-fatto i { border-color:var(--cd-col); background:var(--cd-col); }
.cd-passo i svg { width:11px; height:11px; color:#fff; }
@keyframes cd-giro {
to { transform:rotate(360deg); }
}
.cd-esito { display:flex; flex-direction:column; gap:16px; }
.cd-titolo { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:15px; color:#404040; }
.cd-titolo b { font-weight:700; color:#171717; font-variant-numeric:tabular-nums; }
.cd-pill { padding:2px 8px; border-radius:999px; background:#f1f5f9; font-size:11.5px; font-weight:600; color:#334155; font-variant-numeric:tabular-nums; }
.cd-alloc { display:flex; height:10px; border-radius:999px; overflow:hidden; background:#e2e8f0; }
.cd-alloc i { display:block; height:100%; background:var(--cd-col); }
.cd-alloc-leg { display:flex; justify-content:space-between; gap:12px; margin-top:6px; font-size:12px; color:#737373; font-variant-numeric:tabular-nums; }
.cd-alloc-leg b { font-weight:600; color:#171717; }
.cd-linee { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2px 32px; }
.cd-linea { display:grid; grid-template-columns:110px minmax(40px, 1fr) 96px; align-items:center; gap:10px; height:24px; font-size:12.5px; }
.cd-linea-nome { display:flex; align-items:center; gap:7px; min-width:0; color:#404040; white-space:nowrap; overflow:hidden; }
.cd-linea-nome i { flex:none; width:8px; height:8px; border-radius:999px; }
.cd-linea-barra { height:6px; border-radius:999px; background:#eef1f4; overflow:hidden; }
.cd-linea-barra i { display:block; height:100%; border-radius:999px; }
.cd-linea-imp { text-align:right; font-weight:500; color:#171717; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cd-avviso {
    display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 14px; border-radius:10px;
    background:#fffbeb; border:1px solid #fde68a; font-size:12.5px; color:#78350f;
  }
.cd-avviso > span:first-child { flex:1 1 260px; }
.cd-avviso.cd-risolto { background:#f8fafc; border-color:#e2e8f0; color:#475569; }
.cd-azioni { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
/* I numeri del mese caricato non stanno nel pannello: sono la sua riga nella
     tabella dei caricamenti, che col mese scelto mostra solo quella. */
.cd-scelta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:14px; font-size:12.5px; color:#525252; }
.cd-testa + .cd-scelta { margin-top:0; }
.cd-testa + .cd-avviso { margin-top:0; }
.cd-pannello .cd-avviso { margin-top:14px; }
.cd-esito .cd-avviso { margin-top:0; }
@media (max-width:900px) {
.cd-cal { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.cd-linee { grid-template-columns:1fr; }
}
/* ═══════════ Budget Ricavi ═══════════
     Vista #budget, solo nella Mix: nelle altre varianti la voce del menu resta
     inerte, aprire #budget porta alla Mix e lasciare la Mix riporta ad Actual
     vs Budget. Riprogettata sulla pagina di produzione
     (allocator/budget.html, static/js/allocator.js), in sola lettura: la
     granularita' cambia la tabella, importi e giorni non si modificano, Azzera
     e Salva sono spenti. Gli importi hanno l'aspetto del campo che sono in
     produzione, cosi' si vede dove si scrive. Il colore del trend arriva dal
     JS in --cd-col, come in Carica Dati. */
.tn-menu a.tn-bud { display:none; }
html[data-ui="mix"] .tn-menu a.tn-bud { display:block; }
html[data-ui="mix"] .tn-menu a.tn-bud-inerte { display:none; }
.bu-testa { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.bu-azioni { display:flex; align-items:center; gap:8px; }
.bu-campo {
    display:block; padding:4px 8px; border:1px solid #e5e5e5; border-radius:6px; background:#fff;
    text-align:right; font-weight:500; color:#171717; font-variant-numeric:tabular-nums; white-space:nowrap;
  }
.bu-quota { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.bu-quota .kx-quota { flex:none; width:64px; }
.bu-quota span:last-child { width:40px; text-align:right; }
/* Giorni lavorativi: la stessa griglia dei dodici mesi di Carica Dati, ma
     le caselle non si scelgono — in produzione sono campi. Un mese modificato
     rispetto al calendario prende il bordo nel colore del trend e dice da
     quanti giorni parte. */
.bu-gg {
    display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0;
    padding:9px 9px 8px; border:1px solid #e5e5e5; border-radius:10px; background:#fff;
  }
html[data-ui="mix"] .bu-gg { background-color:transparent; border-color:#cbd5e1; }
html[data-ui="mix"] .bu-gg.bu-mod { border-color:var(--cd-col); box-shadow:inset 0 0 0 1px var(--cd-col); }
.bu-gg-n { font-size:15px; font-weight:600; color:#171717; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bu-gg-n small { margin-left:2px; font-size:11px; font-weight:500; color:#737373; }
.bu-mod .bu-gg-n { color:var(--cd-col); }
/* A 1024px la casella e' larga circa 60px: il testo va corto e, se non
     basta, si tronca invece di sbordare nella casella accanto. */
.bu-gg-p { max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:11px; color:#737373; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bu-testo { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:14px 20px 18px; font-size:12.5px; color:#525252; }
.bu-nota { padding:10px 20px; border-top:1px solid #f1f5f9; font-size:12px; color:#737373; }
/* ═══════════ Review classificazione ═══════════
     Vista #review, aperta da Carica Dati. In cima la coda delle righe senza
     linea (proposta), sotto tutte le righe della griglia in una tabella che
     scorre dentro la sua card, con l'intestazione ferma. Il colore del trend
     arriva dal JS in --cd-col, come in Carica Dati. */
html[data-vista="rev"] .yr-nav { display:none; }
#revCodaSez[hidden] { display:none; }
#revTabSez { scroll-margin-top:80px; }
.rv-barra { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.rv-sx { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.rv-stato { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-left:4px; font-size:13px; color:#525252; }
.rv-indietro {
    display:inline-flex; align-items:center; gap:3px; height:28px; padding:0 8px 0 4px; border-radius:6px;
    font-size:12px; font-weight:500; color:#525252; white-space:nowrap;
  }
.rv-indietro:hover { background:#f5f5f5; color:#171717; }
.rv-indietro svg { width:14px; height:14px; }
.rv-az {
    display:inline-flex; align-items:center; height:28px; padding:0 10px; border:1px solid #e5e5e5; border-radius:6px;
    background:#fff; font:inherit; font-size:12px; font-weight:500; color:#404040; white-space:nowrap;
  }
button.rv-az:hover:not(:disabled) { background:#fafafa; }
.rv-spento { color:#a3a3a3; }
.rv-conferma { border-color:transparent; background:var(--cd-col); color:#fff; font-weight:600; }
/* Il bottone pieno resta pieno al passaggio del mouse: l'hover di .rv-az (sfondo
   #fafafa) e' piu' specifico e lasciava il testo bianco su bianco (#148). */
button.rv-conferma:hover:not(:disabled) { background:var(--cd-col); filter:brightness(1.2); }
.rv-conferma:disabled { opacity:.45; }
html[data-ui="mix"] .rv-az:not(.rv-conferma) { background-color:transparent; border-color:#cbd5e1; }
.cd-bottone:disabled { opacity:.45; filter:none; }
.rv-gruppo { padding:12px 20px 14px; }
.rv-gruppo + .rv-gruppo { border-top:1px solid #f1f5f9; }
.rv-testa { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.rv-desc { font-size:13px; font-weight:500; color:#171717; }
.rv-info { font-size:12px; color:#737373; }
.rv-imp { margin-left:auto; font-size:13px; font-weight:600; color:#171717; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rv-scelte { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.rv-scelte select,
.rv-scelte .yoy-seg { opacity:.6; }
.rv-link {
    padding:0; border:0; background:transparent; font:inherit; font-size:12px; font-weight:500; color:#334155; white-space:nowrap;
    text-decoration:underline; text-decoration-color:#cbd5e1; text-underline-offset:3px;
  }
.rv-link:hover { color:#171717; text-decoration-color:currentColor; }
.rv-scelte .rv-link { margin-left:auto; }
#revFiltri .rv-n { margin-left:3px; font-weight:400; opacity:.7; font-variant-numeric:tabular-nums; }
.rv-scroll { max-height:600px; overflow-y:auto; }
.rv-scroll thead th { position:sticky; top:0; z-index:2; background:#fafafa; }
.rv-scroll thead th:first-child { z-index:3; }
html[data-ui="mix"] .rv-scroll thead th { background:#f8fafc; }
.rv-cod { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color:#404040; }
.rv-td-desc { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#404040; }
.rv-senza { font-size:12px; font-weight:500; color:#b45309; }
.rv-doppia { display:block; font-size:11px; color:#b45309; }
.rv-badge {
    display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px;
    background:#f1f5f9; font-size:10.5px; font-weight:700; color:#475569;
  }
.rv-badge-nc { background:#fef3c7; color:#b45309; }
/* ═══════════ Regole di allocazione ═══════════
     Pannello laterale sopra Carica Dati, aperto solo da "Vedi regole",
     essenziale come il pannello "Regole Allocazione" della produzione: una
     riga per regola. Bianco in tutte le varianti, come la chat. Da chiuso e'
     fuori schermo e invisibile, cosi' il Tab non ci entra; la visibilita'
     cambia a fine corsa, dopo la chiusura. */
#regoleVelo {
    position:fixed; inset:0; z-index:55; background:rgba(15,23,42,.28);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
html[data-regole="open"] #regoleVelo { opacity:1; pointer-events:auto; }
#regole {
    position:fixed; top:0; right:0; bottom:0; z-index:60; display:flex; flex-direction:column;
    width:100%; max-width:480px; border-left:1px solid #e5e5e5; background:#fff;
    box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    transform:translateX(100%); visibility:hidden;
    transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
  }
html[data-regole="open"] #regole { transform:none; visibility:visible; transition:transform .28s cubic-bezier(.4,0,.2,1); }
.rg-testa {
    display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px;
    height:56px; padding:0 12px 0 20px;
  }
.rg-testa h2 { font-size:15px; font-weight:600; color:#171717; }
.rg-chiudi {
    display:flex; flex:none; align-items:center; justify-content:center; width:32px; height:32px;
    border:0; border-radius:8px; background:transparent; color:#a3a3a3;
  }
.rg-chiudi:hover { background:#f5f5f5; color:#404040; }
.rg-chiudi svg { width:20px; height:20px; }
.rg-cerca { position:relative; flex:none; padding:0 20px 12px; }
.rg-cerca svg { position:absolute; left:31px; top:18px; width:16px; height:16px; transform:translateY(-50%); color:#a3a3a3; pointer-events:none; }
.rg-cerca input {
    width:100%; height:36px; padding:0 12px 0 34px; border:1px solid #e5e5e5; border-radius:8px;
    background:#fff; font:inherit; font-size:13px; color:#171717; outline:none;
  }
.rg-cerca input:focus { border-color:#94a3b8; }
.rg-corpo { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 20px 16px; border-top:1px solid #f1f5f9; }
.rg-tipo {
    margin:16px 0 4px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#737373;
  }
.rg-tipo span { font-weight:500; letter-spacing:0; color:#a3a3a3; font-variant-numeric:tabular-nums; }
/* Colonne fisse per pattern e linea: frecce e linee restano in colonna, la
     nota prende quello che avanza e si tronca. */
.rg-regola {
    display:grid; grid-template-columns:104px 12px 112px minmax(0, 1fr) 16px; align-items:center;
    gap:8px; height:32px; font-size:12.5px;
  }
.rg-regola + .rg-regola { border-top:1px solid #f5f5f5; }
.rg-pat {
    justify-self:start; max-width:100%; overflow:hidden; text-overflow:ellipsis; padding:0 6px;
    border:1px solid #e2e8f0; border-radius:5px; background:#f1f5f9;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; font-weight:600;
    line-height:19px; color:#1e293b; white-space:nowrap;
  }
.rg-freccia { color:#a3a3a3; text-align:center; }
.rg-linea { display:inline-flex; align-items:center; gap:6px; min-width:0; overflow:hidden; color:#404040; white-space:nowrap; }
.rg-linea i { flex:none; width:8px; height:8px; border-radius:999px; }
.rg-nota { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:11.5px; color:#a3a3a3; white-space:nowrap; }
.rg-elimina { display:flex; justify-content:center; color:#d4d4d4; }
.rg-elimina svg { width:14px; height:14px; }
.rg-linee { display:flex; flex-wrap:wrap; gap:4px 14px; padding:4px 0; font-size:12.5px; }
.rg-info { margin-top:6px; font-size:11.5px; color:#a3a3a3; }
.rg-vuoto { padding:40px 0; font-size:13px; color:#a3a3a3; text-align:center; }
.rg-piede { display:flex; flex:none; align-items:center; padding:12px 20px; border-top:1px solid #e5e5e5; }
/* Comandi del confronto, nella riga dell'AI: i due anni, il periodo e le
     chip dei filtri attivi. Il selettore d'anno della testata nel confronto
     non ha senso — gli anni sono due — e sparisce. Altezze a 28px e bordo
     neutral-200 come Fino a oggi e le frecce del grafico a barre. */
#yoyComandi { display:none; }
html[data-vista="yoy"] #yoyComandi { display:flex; }
html[data-vista="yoy"] .yr-nav { display:none; }
.yoy-select {
    height:28px; padding:0 26px 0 10px; border:1px solid #e5e5e5; border-radius:6px;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px 12px;
    -webkit-appearance:none; appearance:none; font:inherit; font-size:12px; font-weight:600;
    color:#171717; cursor:pointer; font-variant-numeric:tabular-nums;
  }
.yoy-select:hover { background-color:#fafafa; }
.yoy-select:focus-visible,
.yoy-seg button:focus-visible { outline:2px solid #94a3b8; outline-offset:2px; }
.yoy-vs,
.cmd-lab { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#a3a3a3; }
.yoy-seg {
    display:inline-flex; align-items:center; gap:2px; height:28px; padding:2px;
    border:1px solid #e5e5e5; border-radius:6px; background:#fff;
  }
.yoy-seg button {
    height:22px; padding:0 10px; border:0; border-radius:4px; background:transparent;
    font:inherit; font-size:12px; font-weight:500; color:#737373; cursor:pointer; white-space:nowrap;
  }
.yoy-seg button:hover { color:#171717; }
.yoy-seg button[aria-pressed="true"] { background:#13294b; color:#fff; }
html[data-ui="mix"] .yoy-seg button[aria-pressed="true"] { background:#08085e; }
.yoy-periodo { font-size:12px; color:#737373; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Fascia KPI del Confronto Anni. Tre celle nell'ordine in cui si legge il
     confronto — anno A, variazione, anno B — con una freccetta su ciascuno
     dei due filetti. La variazione sta in mezzo ed e' l'unico importo
     colorato; A e' in grigio perche' e' il riferimento. Importi interi,
     all'euro. Niente sparkline: la fisarmonica resta, ma la cella sotto il
     mouse, allargandosi, apre quello che serve a leggere il numero — il
     dettaglio sotto l'importo e, nella variazione, le tre linee che l'hanno
     mossa di piu', con la barretta delle tabelle. */
.kx-cell { position:relative; }
.kx-rif .spark-val { color:#64748b; }
.kx-freccia {
    position:absolute; left:0; top:50%; z-index:1; transform:translate(-50%,-50%);
    width:22px; height:22px; border:1px solid #e5e5e5; border-radius:999px; background:#fff;
    display:flex; align-items:center; justify-content:center; color:#94a3b8;
  }
.kx-freccia svg { width:12px; height:12px; }
/* Ambra: le celle sono card staccate di 14px, la freccetta sta nel mezzo. */
html[data-ui="mix"] .kx-freccia { left:-7px; border-color:#e2e8f0; }
html[data-ui="mix"] .kx-freccia { left:0; border-color:#dbe3eb; background:#f8fafc; }
html[data-ui="mix"] .kx-freccia { background:#fbfcfd; }
.kx-pannello {
    flex:0 1000 auto; min-width:0; max-width:0; opacity:0; overflow:hidden;
    transition:max-width .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  }
.spark-cell:hover .kx-pannello { max-width:260px; opacity:1; }
/* Stretto apposta, circa 190px: a 1024px la cella allargata ne lascia al
     pannello poco piu' di 200 accanto all'importo. */
.kx-riga { display:flex; align-items:center; gap:5px; height:20px; font-size:11.5px; white-space:nowrap; }
.kx-nome { display:flex; align-items:center; gap:6px; flex:none; width:80px; color:#525252; }
.kx-nome i { flex:none; width:7px; height:7px; border-radius:999px; }
.kx-nt { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.kx-riga .dlt-barra { width:36px; }
.kx-imp { flex:none; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
/* Analisi Clienti: barra della quota sui ricavi sotto l'importo. Le tre
     celle si contengono — ricavi, clienti mostrati, un cliente — e la barra
     dice quanto dei ricavi sta in ciascuna. */
.kx-quota-riga {
    display:flex; align-items:center; gap:8px; margin-top:8px; max-width:250px;
    font-size:11.5px; color:#737373; white-space:nowrap;
  }
html[data-ui="mix"] .kx-quota-riga { margin-left:auto; margin-right:auto; }
.kx-quota { position:relative; flex:1 1 60px; min-width:40px; height:4px; border-radius:999px; background:#e8edf3; overflow:hidden; }
.kx-quota i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; transition:width .9s cubic-bezier(.4,0,.2,1); }
.kx-quota-txt { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.kx-quota-txt b { font-weight:600; color:#404040; }
.kx-riga-cli .kx-nome { width:96px; }
.kx-pct { flex:none; width:38px; text-align:right; color:#a3a3a3; font-variant-numeric:tabular-nums; }
/* In colonna la freccetta scende sul filetto orizzontale e punta in basso,
     e il pannello della variazione va a capo sotto l'importo, sempre aperto
     come il dettaglio delle altre fasce. Selettori con la stessa specificita'
     delle regole per variante qui sopra, altrimenti il left:0 della Clean
     vincerebbe. L'Ambra non va mai in colonna. */
@media (max-width:900px) {
html[data-ui="mix"] .kx-freccia { left:50%; top:0; transform:translate(-50%,-50%) rotate(90deg); }
html[data-ui="mix"] .kx-cell { flex-wrap:wrap; }
.kx-pannello { flex:1 1 100%; max-width:none; opacity:1; }
html[data-ui="mix"] .kx-riga { justify-content:center; }
}
#yoyFiltroLinea[hidden],
#yoyFiltroMese[hidden] { display:none !important; }
/* Cella della variazione nel Confronto Anni. La varianza di Actual vs
     Budget mette due colonne di numeri, Delta euro e Delta percento; qui la
     variazione e' una cella sola: l'importo, una barretta che parte dallo
     zero al centro — a destra se l'anno B ha guadagnato, a sinistra se ha
     perso, lunga in proporzione allo scostamento piu' grande della tabella —
     e la percentuale in una pillola. Cosi' le righe si confrontano a occhio
     senza leggere le cifre, e la tabella non somiglia piu' a quella della
     varianza. */
.dlt { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.dlt-num { font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap; }
.dlt-barra { position:relative; flex:none; width:96px; height:12px; }
.dlt-barra::before {
    content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:#e5e5e5;
  }
.dlt-barra i { position:absolute; top:2px; height:8px; border-radius:2px; }
.dlt-su { left:50%; background:#059669; }
.dlt-giu { right:50%; background:#dc2626; }
.dlt-pct {
    flex:none; min-width:64px; padding:2px 8px; border-radius:999px; text-align:center;
    font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums;
  }
.dlt-pct-su { background:#ecfdf5; color:#047857; }
.dlt-pct-giu { background:#fef2f2; color:#b91c1c; }
.dlt-pct-vuota { color:#a3a3a3; }
/* Campioni della legenda del grafico a barre del confronto: la banda della
     variazione, tratteggiata come nel disegno, nei due versi. */
.leg-banda {
    display:inline-block; width:12px; height:12px; border-radius:2px;
    background:repeating-linear-gradient(45deg, #ecfdf5 0 3px, #059669 3px 5px);
  }
.leg-banda-giu { background:repeating-linear-gradient(45deg, #fef2f2 0 3px, #dc2626 3px 5px); }
/* ═══════════ Analisi Clienti ═══════════
     Terza vista, #analisi-clienti. La pagina non ha la coppia di grafici
     affiancati delle altre due: la ciambella della concentrazione con la sua
     legenda e le barre impilate per linea vogliono tutta la larghezza, e
     .panel-solo tiene il pannello unico anche dove le altre viste ne mettono
     due. */
#cliComandi { display:none; }
html[data-vista="cli"] #cliComandi { display:flex; }
@media (min-width: 1024px) {
.panel-charts.panel-solo,
html[data-ui="mix"] .panel-charts.panel-solo { grid-template-columns:1fr; }
}
.cli-donut-row { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.cli-donut { flex:none; width:240px; }
.cli-donut svg { display:block; width:100%; height:auto; }
/* Legenda a colonne che si moltiplicano con la larghezza: con venti clienti
     resta leggibile invece di diventare una lista alta mezzo schermo. */
.cli-legenda {
    flex:1 1 340px; min-width:0;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:1px 20px;
  }
.cli-voce {
    display:flex; align-items:center; gap:8px; padding:3px 6px; border:0; border-radius:6px;
    background:transparent; font:inherit; font-size:12px; color:#404040; cursor:pointer; text-align:left;
  }
.cli-voce:hover { background:#f5f5f5; }
.cli-voce[aria-pressed="true"] { background:#f1f5f9; color:#171717; font-weight:600; }
.cli-voce:focus-visible { outline:2px solid #94a3b8; outline-offset:1px; }
.cli-voce-ferma { cursor:default; color:#737373; }
.cli-voce-ferma:hover { background:transparent; }
.cli-pallino { flex:none; width:10px; height:10px; border-radius:3px; }
.cli-nome { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cli-cifra { flex:none; font-variant-numeric:tabular-nums; color:#525252; }
.cli-quota { flex:none; width:44px; text-align:right; font-variant-numeric:tabular-nums; color:#a3a3a3; }
.cli-riga { cursor:pointer; }
/* Pannello chat */
#chat { transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); }
html[data-chat="open"] #chat { transform: translateX(0); }

/* ═══════════ Contrasto AA (#64) ═══════════
   Non dall'anteprima: #64 chiede WCAG AA su tutto il testo, e i grigi del
   mockup usati come testo erano a 2,5:1 sul foglio #fbfcfd (le etichette KPI
   #94a3b8, le didascalie #a3a3a3). Qui scuriscono fino a 4,5:1 tenendo la
   tinta: gli slate restano slate (#64748b), i neutri restano neutri
   (#737373). Restano chiari icone decorative e controlli disabilitati, che la
   norma esenta. Misurato su tutte le pagine da frontend/anteprima/contrasto.mjs. */
html[data-ui="mix"] .spark-lab,
html[data-ui="mix"] .u { color:#64748b; }
html[data-ui="mix"] .faq-titolo,
html[data-ui="mix"] .cmd-lab,
html[data-ui="mix"] .yoy-vs,
html[data-ui="mix"] .kx-pct,
html[data-ui="mix"] .cli-quota,
html[data-ui="mix"] .dlt-pct-vuota,
html[data-ui="mix"] .cd-inerte,
html[data-ui="mix"] .cd-passo,
html[data-ui="mix"] .rv-spento,
html[data-ui="mix"] .rg-tipo span,
html[data-ui="mix"] .rg-freccia,
html[data-ui="mix"] .rg-nota,
html[data-ui="mix"] .rg-info,
html[data-ui="mix"] .rg-vuoto { color:#737373; }

/* L'oro delle superfici AI con testo bianco: nel mockup #c69a3f -> #a17530,
   cioe' 2,59:1 nel punto piu' chiaro, sotto anche la soglia 3:1 delle icone.
   Stesso oro un tono piu' profondo: 4,55:1 -> 6,55:1 su tutto il gradiente. */
html[data-ui="mix"] .ai-grad,
html[data-ui="mix"] #fab,
html[data-ui="mix"] .cd-regole {
  background-image:linear-gradient(135deg,#94702c 0%,#7a5719 100%);
}
html[data-ui="mix"] .ai-grad:hover,
html[data-ui="mix"] #fab:hover,
html[data-ui="mix"] .cd-regole:hover {
  background-image:linear-gradient(135deg,#87611f 0%,#6b4c15 100%);
}

/* Larghezza massima dei testi (#64): su un monitor largo il foglio arriva a
   2400px, e una riga di spiegazione da 380 caratteri non si legge. I
   paragrafi si fermano a 80 caratteri; quelli centrati (i messaggi di attesa
   e di errore) restano al centro. Tabelle e grafici restano a tutta
   larghezza: sono loro a volere lo spazio. */
html[data-ui="mix"] main p { max-width:80ch; }
html[data-ui="mix"] main p.text-center,
html[data-ui="mix"] main .text-center p { margin-left:auto; margin-right:auto; }

/* Testata sul telefono (#64). L'anteprima tiene marchio, anno, pillola di
   navigazione e utente su una riga sola: sotto i 640px non ci stanno e si
   sovrappongono. Qui la pillola scende su una seconda riga, centrata, e i
   menu del primo e dell'ultimo gruppo si ancorano al proprio bordo invece
   di centrarsi, cosi' non escono dallo schermo. */
@media (max-width:639px) {
  html[data-ui="mix"] header {
    flex-wrap:wrap; height:auto; row-gap:10px; padding-top:12px; padding-bottom:12px;
  }
  html[data-ui="mix"] header > div:first-child { flex:1 1 0; }
  html[data-ui="mix"] #brand { min-width:0; }
  html[data-ui="mix"] #topNav { order:3; width:100%; justify-content:space-between; }
  html[data-ui="mix"] #topNav .tn-group { flex:1 1 0; display:flex; justify-content:center; }
  html[data-ui="mix"] #topNav .tn-item { justify-content:center; width:100%; padding-left:6px; padding-right:6px; }
  html[data-ui="mix"] .tn-group:first-child .tn-menu { left:0; transform:translateY(-5px); }
  html[data-ui="mix"] .tn-group:last-child .tn-menu { left:auto; right:0; transform:translateY(-5px); }
  html[data-ui="mix"] .tn-group:first-child.tn-aperto .tn-menu,
  html[data-ui="mix"] .tn-group:first-child:focus-within .tn-menu,
  html[data-ui="mix"] .tn-group:last-child.tn-aperto .tn-menu,
  html[data-ui="mix"] .tn-group:last-child:focus-within .tn-menu { transform:none; }
}

/* Scrollbar nostra (#77): sottile, arrotondata, nei colori della Mix, per la
   pagina e per ogni riquadro che scorre (tabelle larghe, chat, pannelli).
   Standard (Firefox, Chrome 121+) e ::-webkit-scrollbar per Safari: dove il
   browser capisce lo standard, le regole -webkit- non si applicano. Il
   cursore si stacca dalla cornice (#c9d8e2) e dalle card bianche; dove il
   browser lo permette (Safari, -webkit-) diventa navy al passaggio. */
html[data-ui="mix"],
html[data-ui="mix"] * { scrollbar-width:thin; scrollbar-color:#7d8fa3 transparent; }
html[data-ui="mix"] ::-webkit-scrollbar { width:10px; height:10px; }
html[data-ui="mix"] ::-webkit-scrollbar-track { background:transparent; }
html[data-ui="mix"] ::-webkit-scrollbar-thumb {
  background:#7d8fa3; border-radius:999px;
  border:2px solid transparent; background-clip:padding-box;
}
html[data-ui="mix"] ::-webkit-scrollbar-thumb:hover { background-color:#13294b; }
html[data-ui="mix"] ::-webkit-scrollbar-corner { background:transparent; }

/* Cambio pagina senza scatti.
   - Lo spazio della scrollbar e' sempre riservato: prima, mentre la pagina
     nuova caricava, il documento diventava corto, la scrollbar spariva e il
     foglio si allargava di 10px per poi restringersi all'arrivo dei dati.
   - "Carico i dati..." compare solo se l'attesa dura: nella gran parte dei
     casi i dati arrivano prima e la pagina passa diretta al contenuto,
     senza il lampo del messaggio. */
html[data-ui="mix"] { scrollbar-gutter:stable; }
.in-attesa { animation:in-attesa-appari .2s ease .35s both; }
@keyframes in-attesa-appari { from { opacity:0; } to { opacity:1; } }

/* Logo del cliente nella testata, al posto delle iniziali quando l'admin
   l'ha caricato. Alto quanto il riquadro delle iniziali, largo quanto serve:
   i loghi sono quasi sempre orizzontali. Sul telefono il logo dice gia' chi
   e' l'azienda (lo dice anche l'alt): il nome accanto, che li' arrivava
   troncato a "Rossi Ut...", lascia il posto al logo. */
html[data-ui="mix"] .brand-logo {
  display:block; flex:0 1 auto; min-width:0; height:36px; width:auto; max-width:180px;
  object-fit:contain; object-position:left center;
}
@media (max-width:639px) {
  html[data-ui="mix"] .brand-logo { max-width:100%; }
  html[data-ui="mix"] #brand.con-logo .brand-nome { display:none; }
}

/* Bottone della chat sul telefono. Prima spariva sotto i 640px (#55), perche'
   copriva l'ultimo punto dei grafici, e chi scorreva non trovava piu' la
   chat. Ora resta: piu' piccolo (48px, sopra la misura minima di un
   bersaglio al dito), sopra la barra di sistema dell'iPhone, e il foglio
   lascia in fondo lo spazio per lui, cosi' a pagina finita non copre niente.
   Solo dove il bottone c'e' (la SPA): l'admin usa lo stesso #main. */
@media (max-width:639px) {
  html[data-ui="mix"] #fab {
    width:48px; height:48px; right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }
  html[data-ui="mix"] #main:has(~ #fab) > main { padding-bottom:78px; }
}