/*!
 * Caronte — foglio di stile unico.
 * Copyright (c) 2026 Fix Solutions S.r.l.s.
 *
 * Stessa lingua visiva di Pluto (navy scuro, sidebar fissa, icone Lucide),
 * ma scritto da zero e più asciutto: qui le pagine sono poche e dense.
 */

:root {
  /* Il chiaro, per chi lavora davanti a una vetrina col sole addosso.
     Stessa famiglia calda dello scuro: carta e caffe, non carta e inchiostro. */
  --bg:        #F6F1EC;
  --panel:     #FFFFFF;
  --panel-2:   #FBF7F3;
  --text:      #241A14;
  --muted:     #7A6557;
  --border:    #E6DACE;
  --border-2:  #D2C0B1;
  --input-bg:  #FFFFFF;
  --nav:       #FFFFFF;
  --nav-text:  #2A1E16;
  --nav-hover: #F3E8DF;
  --nav-active:#B96A35;
  --nav-bordo: #E6DACE;   /* i bordi dentro la colonna */
  --nav-velo:  #FBF6F1;   /* il fondo delle schede in fondo al menu */
  --accent:    #B96A35;
  --ok:        #15803D;
  --warn:      #B45309;
  --err:       #B91C1C;
  --info:      #A16207;
  --row-alt:   #FBF7F3;
  --row-hover: #F4E9DF;
  --label:     #8A6A52;
  --ombra:     0 1px 2px rgba(36,26,20,.06), 0 4px 12px rgba(36,26,20,.05);
  --raggio:    10px;
}

html.dark {
  /* Campionati dal mockup, uno per uno. */
  --bg:        #161411;   /* fondo pagina */
  --panel:     #201C18;   /* pannelli e schede */
  --panel-2:   #1B1815;
  --text:      #FFFFFF;
  --muted:     #A89484;
  --border:    #2E2721;
  --border-2:  #463A31;
  --input-bg:  #2B2520;   /* campo di ricerca in alto */
  --nav:       #1D1A17;   /* sidebar */
  --nav-text:  #FFFFFF;
  --nav-hover: #2A231D;
  --nav-active:#5C3E29;   /* la voce selezionata */
  --nav-bordo: rgba(255,255,255,.08);
  --nav-velo:  rgba(255,255,255,.03);
  --accent:    #AB6A40;   /* il bottone «Vai al banco» */
  --accent-2:  #FFB47B;   /* i link e le frecce */
  --ok:        #7BE08C;
  --warn:      #FFC937;
  --err:       #F08A6B;
  --info:      #FEBE35;
  --row-alt:   #1E1B17;
  --row-hover: #2A231D;
  --label:     #C9A98F;
  --ombra:     0 1px 2px rgba(0,0,0,.5), 0 8px 26px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);

  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  /* Il corpo e l interlinea di Pluto. La famiglia era gia la stessa —
     Segoe UI — quindi la differenza stava tutta qui: 14/1.45 contro
     13/1.35. Un punto di corpo non sembra niente, ma su una tabella di
     trenta righe fa mezzo schermo. */
  font-size: 13px; line-height: 1.35;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 10px; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 21px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; color: var(--label); }
small, .muted { color: var(--muted); }
.mono { font-family: "Cascadia Mono", Consolas, "SF Mono", monospace; }

/* ══════════════ LAYOUT ══════════════ */
.app {
  display: flex;

  /* Lo zoom dell interfaccia sta QUI e non su `body`: la pagina d accesso
     ha una misura sua e non deve seguire la scelta fatta per il magazzino.

     `zoom` e non `transform: scale` perche zoom rifa i conti del layout: i
     clic continuano a cadere dove si vedono le cose.

     L altezza si divide per lo zoom PRIMA, perche lo zoom poi moltiplica
     tutto: senza questo l applicazione diventa alta 112 schermi su cento,
     e la colonna di sinistra scorre via insieme alla pagina. */
  height: calc(100vh / var(--zoom, 1.12));
  overflow: hidden;
  zoom: var(--zoom, 1.12);
}


.sidebar {
  width: 248px; flex: 0 0 248px; background: var(--nav); color: var(--nav-text);
  display: flex; flex-direction: column; height: 100%;
  /* Lo scorrimento sta sulla BARRA, non sul menu — come in Pluto.
     Con `overflow` sul menu compariva una barra di scorrimento interna,
     che spezzava la colonna in due pezzi che si muovevano separatamente:
     il menu scorreva e le schede in fondo restavano ferme. Cosi invece o
     ci sta tutto, o si muove tutto insieme. */
  overflow-y: auto;
}
.brand {
  display: flex; align-items: center; gap: 16px; padding: 14px 14px 13px;
  border-bottom: 1px solid var(--nav-bordo);
}
/* L anello e largo: dentro un riquadro quadrato la palla resta piccola.
   `width: auto` la lascia crescere in orizzontale quanto le serve, cosi a
   comandare e l altezza — che e quella che si vede. */
.brand .marchio-luna {
  flex: 0 0 auto; width: auto; height: 56px;
  filter: drop-shadow(0 0 16px rgba(200,121,65,.32));
}
.brand b { font-size: 19px; font-weight: 400; letter-spacing: 3px; color: var(--nav-text);
           display: block; line-height: 1.1; }
.brand span { font-size: 9px; color: var(--nav-text); letter-spacing: .16em; text-transform: uppercase;
              display: block; margin-top: 3px; }

.nav { padding: 10px 8px; flex: 1; }
.nav .gruppo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--nav-text); opacity: .72; padding: 14px 10px 6px; font-weight: 700;
}
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 1px 0;
  border-radius: 8px; color: #FFFFFF; font-size: 13.5px; text-decoration: none;
}
.nav a:hover { background: var(--nav-hover); text-decoration: none; }
.nav a.attiva { background: var(--nav-active); color: #fff; font-weight: 600; }
.nav a i, .nav a svg { width: 17px; height: 17px; flex: 0 0 17px; }
.nav .badge {
  margin-left: auto; background: var(--nav-hover); border-radius: 20px;
  padding: 1px 7px; font-size: 11px; font-weight: 600;
}
.sidebar-piede { padding: 10px 16px 14px; font-size: 11px; color: #8A7263; }

.principale {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}

.topbar {
  height: 64px; flex: 0 0 64px; background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; padding: 0 20px; z-index: 30;
}
.ricerca-globale { position: relative; flex: 1; max-width: 480px; }
.ricerca-globale input { width: 100%; padding-left: 34px; padding-right: 64px; }
.ricerca-globale .lente {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; display: flex;
}
.risultati {
  position: absolute; top: 44px; left: 0; right: 0; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--raggio); box-shadow: var(--ombra);
  max-height: 420px; overflow-y: auto; z-index: 60; display: none;
}
.risultati .titolo {
  padding: 8px 12px 4px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
}
.risultati a { display: block; padding: 8px 12px; color: var(--text); }
.risultati a:hover { background: var(--row-hover); text-decoration: none; }
.risultati a b { display: block; font-weight: 600; }
.risultati a span { font-size: 12px; color: var(--muted); }

/* L unica parte che scorre. */
.contenuto { padding: 26px 28px; flex: 1; overflow-y: auto; min-height: 0; }
.intestazione {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.intestazione h1 { margin: 0; }
.intestazione .spazio { flex: 1; }

/* ══════════════ PANNELLI ══════════════ */
.pannello {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--ombra); padding: 14px; margin-bottom: 14px;
}
.pannello > h2 { display: flex; align-items: center; gap: 8px; }
.griglia { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.kpi {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--raggio);
  padding: 14px 16px; box-shadow: var(--ombra); display: flex; gap: 12px; align-items: center;
}
.kpi .icona {
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  flex: 0 0 38px;
}
.kpi .valore { font-size: 22px; font-weight: 680; line-height: 1.1; letter-spacing: -.02em; }
.kpi .etichetta { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi.ok    .icona { background: color-mix(in srgb, var(--ok) 15%, transparent);   color: var(--ok); }
.kpi.warn  .icona { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.kpi.err   .icona { background: color-mix(in srgb, var(--err) 15%, transparent);  color: var(--err); }

/* ══════════════ FORM ══════════════ */
label { display: block; font-size: 11.5px; font-weight: 600; color: var(--label);
        text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border-2);
  border-radius: 8px; outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
input[type=checkbox] { width: auto; accent-color: var(--accent); }

/* La tendina di un <select> la disegna Windows, non noi: le voci
   prendevano il nostro colore del testo — bianco — sopra il fondo bianco
   di sistema, e sparivano tutte tranne quella evidenziata. `color-scheme`
   dice a Windows di disegnare la tendina scura, e le voci hanno comunque
   il loro fondo dichiarato per i browser che lo ignorano. */
select { color-scheme: light; }
html.dark select { color-scheme: dark; }
select option, select optgroup {
  background: var(--panel); color: var(--text);
}
textarea { min-height: 70px; resize: vertical; }
.campo { margin-bottom: 12px; }
.campo-inline { display: flex; align-items: center; gap: 8px; }
.campo-inline label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid var(--border-2); background: var(--panel); color: var(--text);
  border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--row-hover); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn i, .btn svg { width: 16px; height: 16px; }
.btn.primario { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primario:hover { filter: brightness(1.08); }
.btn.ok   { background: var(--ok);   border-color: var(--ok);   color: #fff; }
.btn.err  { background: var(--err);  border-color: var(--err);  color: #fff; }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.piccolo { padding: 4px 9px; font-size: 12.5px; }
.btn.icona { padding: 7px; }
.barra-azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ══════════════ TABELLE ══════════════ */
.tabella-wrap { overflow-x: auto; border-radius: var(--raggio); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th {
  text-align: left; padding: 9px 10px; background: var(--panel-2); color: var(--muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5;
}
tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:hover { background: var(--row-hover); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.vuoto { padding: 28px; text-align: center; color: var(--muted); }

/* ══════════════ PILLOLE ══════════════ */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted);
}
.pill.blue   { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.pill.green  { background: color-mix(in srgb, var(--ok) 17%, transparent);     color: var(--ok); }
.pill.red    { background: color-mix(in srgb, var(--err) 16%, transparent);    color: var(--err); }
.pill.orange { background: color-mix(in srgb, var(--warn) 18%, transparent);   color: var(--warn); }
.pill.yellow { background: color-mix(in srgb, #EAB308 20%, transparent);       color: #A16207; }
html.dark .pill.yellow { color: #EFA451; }
.pill.gray   { background: color-mix(in srgb, var(--muted) 16%, transparent);  color: var(--muted); }

/* ══════════════ MODALI ══════════════ */
.velo {
  /* COPRE DAVVERO. Prima si leggeva tutta la pagina dietro, testo
     selezionato compreso: al banco, mentre si conta il resto davanti a
     un cliente, quel rumore visivo da fastidio — e li l errore si paga
     in soldi veri. */
  position: fixed; inset: 0; background: rgba(2,6,23,.88); backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center; z-index: 90; padding: 40px 16px;
  overflow-y: auto;
}
.velo.aperto { display: flex; }
.modale {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); width: 100%; max-width: 620px;
}
.modale.larga { max-width: 950px; }
/* La stessa cosa, ma come pagina: aprire un pacco e un lavoro lungo e
   interrompibile, e undici prodotti dentro 950 pixel stanno stretti. */
/* Come pagina resta comunque una cosa che si apre e si chiude: senza
   questo l esito del carico si vedrebbe gia prima di caricare. */
.velo.a-pagina {
  position: static; display: none; background: none; backdrop-filter: none;
  padding: 0; overflow: visible; z-index: auto;
}
.velo.a-pagina.aperto { display: block; }
.modale.larga.a-pagina {
  max-width: none; box-shadow: var(--ombra); border-radius: var(--raggio);
}
/* Appiccicata in alto DEVE avere un fondo suo: trasparente si legge
   sopra le righe che le scorrono sotto, e non si capisce piu niente. */
.modale.a-pagina header {
  position: sticky; top: 0; z-index: 10;
  background: var(--panel); border-radius: var(--raggio) var(--raggio) 0 0;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.5);
}
/* Aprendo il pacco si guarda SOLO il pacco: l anagrafica dell ordine
   resta nel documento ma non si vede, e torna con «Torna all ordine».
   Lasciarla visibile vorrebbe dire scorrere mezza pagina per arrivare al
   lavoro che si sta facendo.

   Si nasconde quello che sta ACCANTO al pacco, invece di avvolgere mezza
   pagina in un <div>: un contenitore aggiunto a mano dipende dal fatto
   che tutto quello che ci sta dentro sia bilanciato, e quando non lo e si
   mangia anche quello che viene dopo — il pacco compreso, e la pagina si
   apre vuota. E successo.

   Si nascondono i PEZZI DI PAGINA, non «tutto tranne il pacco»: le
   finestre (`.velo`) restano fuori dalla regola, tutte quante. Elencare
   gli id uno per uno sembra piu preciso ed e piu fragile — l esito del
   carico non era nell elenco, e dopo aver caricato la merce si restava
   davanti a una pagina bianca con dentro le etichette da stampare,
   invisibili. La prossima finestra avrebbe fatto lo stesso.

   Una finestra chiusa resta nascosta comunque: `.velo` senza `.aperto`
   non si vede gia per conto suo. */
.contenuto:has(> #m-ricevi.a-pagina) > *:not(.velo) { display: none; }
.modale header {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modale header h2 { margin: 0; flex: 1; }
.modale .corpo { padding: 18px; }
.modale footer {
  display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px;
  border-top: 1px solid var(--border); background: var(--panel-2);
  border-radius: 0 0 14px 14px;
}
.chiudi { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; }

/* ══════════════ AVVISI E TOAST ══════════════ */
.avviso {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 9px;
  border: 1px solid; margin-bottom: 14px; font-size: 13.5px;
}
.avviso.info { background: color-mix(in srgb, var(--info) 10%, transparent); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.avviso.warn { background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.avviso.err  { background: color-mix(in srgb, var(--err) 10%, transparent);  border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.avviso.ok   { background: color-mix(in srgb, var(--ok) 10%, transparent);   border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

#toast-box { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex;
             flex-direction: column; gap: 8px; }
.toast {
  background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 9px; padding: 11px 15px; box-shadow: var(--ombra); min-width: 240px;
  max-width: 420px; animation: entra .18s ease-out;
}
.toast.ok  { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ══════════════ BANCO ══════════════ */
.banco-scan {
  display: flex; gap: 10px; align-items: center;
  background: var(--panel); border: 2px solid var(--accent); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.banco-scan input {
  border: none; background: none; font-size: 21px; font-weight: 600; padding: 4px 0;
}
.banco-scan input:focus { box-shadow: none; }
.banco-modo { display: flex; gap: 6px; }
.banco-modo button {
  padding: 9px 16px; border-radius: 9px; border: 1px solid var(--border-2);
  background: var(--panel); color: var(--muted); font: inherit; font-weight: 650; cursor: pointer;
}
.banco-modo button.scelto { background: var(--accent); border-color: var(--accent); color: #fff; }
.banco-modo button.scelto[data-tipo="carico"] { background: var(--ok); border-color: var(--ok); }
.banco-modo button.scelto[data-tipo="riparazione"] { background: var(--warn); border-color: var(--warn); }

.scheda-articolo {
  display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--border);
}
.scheda-articolo .nome { font-size: 18px; font-weight: 680; }
.scheda-articolo .giacenza { font-size: 30px; font-weight: 700; line-height: 1; }
.scheda-articolo .giacenza.bassa { color: var(--warn); }
.scheda-articolo .giacenza.zero { color: var(--err); }

.riga-scontrino {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}
.riga-scontrino .q { font-weight: 700; min-width: 34px; }
.riga-scontrino .d { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════ ETICHETTE ══════════════ */
.et-griglia { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.et-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: pointer;
  background: var(--panel); display: flex; gap: 9px; align-items: flex-start;
}
.et-card.scelto { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ══════════════ VARIE ══════════════ */
.filtri { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filtri .campo { margin: 0; min-width: 140px; }
.filtri .campo.largo { flex: 1; min-width: 220px; }
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab-bar button {
  padding: 9px 14px; border: none; background: none; color: var(--muted);
  font: inherit; font-weight: 620; cursor: pointer; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab-bar button.attiva { color: var(--accent); border-bottom-color: var(--accent); }
.tab-bar button i[data-lucide], .tab-bar button svg.lucide { width: 16px; height: 16px; }
.caricamento { padding: 30px; text-align: center; color: var(--muted); }
.solo-stampa { display: none; }

@media print {
  .sidebar, .topbar, .barra-azioni, .no-stampa { display: none !important; }
  .contenuto { padding: 0; }
  .solo-stampa { display: block; }
  body { background: #fff; color: #000; }
  .pannello { border: none; box-shadow: none; padding: 0; }
}

@media (max-width: 900px) {
  .sidebar { position: fixed; left: -226px; z-index: 100; transition: left .18s; }
  .sidebar.aperta { left: 0; }
  .contenuto { padding: 14px; }
}

/* Il modo di disfare, dentro il messaggio che annuncia la cosa fatta.
   Dove c'e questo, chiedere «procedo?» prima e tempo perso. */
.toast-annulla {
  margin-left: 12px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  font: inherit; font-weight: 600; color: inherit;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
}
.toast-annulla:hover { background: rgba(255, 255, 255, .3); }


/* ═══════════════════════════════════════════════════════════════════
   LA PAGINA D ACCESSO
   E la prima cosa che si vede la mattina: vale la pena che sia bella.
   ═══════════════════════════════════════════════════════════════════ */
.pagina-accesso {
  /* `overflow: hidden` teneva fuori la luna ma tagliava anche la scheda su
     uno schermo basso, e senza scorrimento non si arrivava al bottone.
     La luna si tiene a bada da sola: e in `position: fixed`. */
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  position: relative; overflow-x: hidden; overflow-y: auto;
  padding: 32px 16px 84px;
  /* Il fondo non e piatto: una luce fredda in alto a sinistra e il navy
     che si fa piu cupo verso il basso. Senza questo la scheda sembra
     appoggiata su un cartone. */
  background:
    radial-gradient(1200px 700px at 12% -10%, #3B2416 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #4A2C19 0%, transparent 55%),
    linear-gradient(160deg, #1B120D 0%, #100B08 100%);
}

/* La luna che affaccia dall angolo in alto a destra, mezza fuori dallo
   schermo: e quello che da profondita: qualcosa di grande che continua
   oltre il bordo. */
.cielo {
  /* Uno spicchio in alto a destra, non una luna piena in mezzo allo
     schermo: deve dare profondita al fondo, non contendere l attenzione
     al modulo. Per questo e per meta fuori, poco opaca, e sfuma verso il
     basso a sinistra — dove sta la scheda. */
  position: fixed; top: -34vh; right: -20vw; width: 70vw; min-width: 700px;
  pointer-events: none; opacity: .5;
  -webkit-mask-image: radial-gradient(70% 70% at 78% 22%, #000 35%, transparent 78%);
          mask-image: radial-gradient(70% 70% at 78% 22%, #000 35%, transparent 78%);
}
.cielo svg { width: 100%; height: auto; }

/* Lo sfondo vero: copre tutto e resta fermo. `cover` perche un fondo
   stellato tagliato ai bordi non perde niente, mentre schiacciato si. */
.cielo-foto {
  position: fixed; inset: 0; background-size: cover; background-position: center;
  background-repeat: no-repeat; pointer-events: none;
}

/* Il lockup intero: si adatta alla larghezza della scheda e non sgrana. */
.marchio-intero { display: block; max-width: 320px; width: 78%; height: auto;
                  margin: 0 auto 26px; }

.scheda-accesso {
  position: relative; z-index: 1; width: min(94vw, 560px); padding: 40px 48px 30px;
  border-radius: 18px; border: 1px solid rgba(200,121,65,.20);
  /* Vetro: lascia intravedere il cielo dietro invece di coprirlo. */
  background: rgba(36, 26, 20, .66);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.marchio { display: flex; align-items: center; gap: 16px; justify-content: center;
           margin-bottom: 26px; }
.marchio-nome { font-size: 40px; font-weight: 300; letter-spacing: 6px; line-height: 1;
                color: #FFFFFF; }
/* Il sottotitolo non c e piu: il nome parla da solo. */

.scheda-accesso h1 { text-align: center; font-size: 30px; margin: 0 0 6px; color: #FFFFFF; }
.scheda-accesso .sottotitolo { text-align: center; color: #B29A89; margin: 0 0 28px; }

/* Qui le etichette si leggono come parole, non come sigle: il maiuscolo
   con la spaziatura serve alle tabelle fitte, non a un modulo di due campi. */
.scheda-accesso label {
  display: block; font-size: 13.5px; font-weight: 400; color: #D9C8BC;
  text-transform: none; letter-spacing: 0; margin-bottom: 7px;
}

/* Il campo con l icona dentro: l icona sta nel campo, non accanto. */
.campo-icona { position: relative; margin-bottom: 18px; }
.campo-icona i[data-lucide], .campo-icona svg.lucide {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: #9A8071; pointer-events: none;
}
.campo-icona input {
  width: 100%; padding: 15px 16px 15px 48px; font-size: 15px;
  color: var(--text); background: rgba(22, 15, 11, .78);
  border: 1px solid rgba(200,121,65,.22); border-radius: 11px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo-icona input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,121,65,.22);
}
.campo-icona .occhio {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--muted); cursor: pointer;
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 9px;
  transition: color .15s, background .15s;
}
.campo-icona .occhio i[data-lucide], .campo-icona .occhio svg.lucide {
  /* L icona dentro il bottone non eredita la posizione assoluta di quella
     a sinistra del campo: qui e un contenuto normale, centrato. */
  position: static; transform: none; width: 20px; height: 20px; color: inherit;
}
.campo-icona .occhio:hover,
.campo-icona .occhio:focus-visible {
  color: var(--accent-2); background: rgba(200,121,65,.16); outline: none;
}

/* Spazio a destra per l occhio: senza, una password lunga ci scorre sotto. */
.campo-icona input[type="password"], .campo-icona input[type="text"] {
  padding-right: 54px;
}

.ricorda { display: flex; align-items: center; gap: 10px; margin: 4px 0 22px;
           color: #D9C8BC; cursor: pointer; }
.ricorda input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.btn.grande { width: 100%; justify-content: center; padding: 15px; font-size: 16px;
              border-radius: 11px; }

.piede-scheda {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(200,121,65,.16);
  color: #94796A; font-size: 13px;
}
.piede-scheda i[data-lucide], .piede-scheda svg.lucide { width: 14px; height: 14px; }

/* Il piede sta nel flusso, non incollato in fondo allo schermo: incollato
   finiva sopra al bottone «Accedi» appena la finestra si abbassava. */
.piede-cielo {
  position: absolute; bottom: 24px; left: 0; right: 0; text-align: center;
  color: #8A7263; font-size: 13px; z-index: 1; pointer-events: none;
}

@media (max-width: 560px) {
  .scheda-accesso { padding: 30px 24px 22px; }
  .marchio-nome { font-size: 30px; letter-spacing: 4px; }
  .cielo { opacity: .5; }
}


/* ═══════════════════════════════════════════════════════════════════
   IL GUSCIO
   ═══════════════════════════════════════════════════════════════════ */

/* Il motto, in alto a destra. Sparisce quando lo schermo si stringe: e la
   prima cosa che si puo togliere senza togliere niente a chi lavora. */
.motto {
  font-size: 9px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase;
  color: #8A7263; text-align: right; margin-right: 14px; white-space: nowrap;
}
@media (max-width: 1100px) { .motto { display: none; } }

.topbar .utente i[data-lucide], .topbar .utente svg.lucide { width: 18px; height: 18px; }

/* Lo stato del ponte con Pluto, in fondo al menu. */
.sidebar-piede {
  padding: 9px 10px 4px; font-size: 11px; color: var(--nav-text);
  border-top: 1px solid var(--nav-bordo);
  display: flex; align-items: center;
}
.stato-pluto {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--nav-text); text-decoration: none; padding: 5px 8px; border-radius: 8px;
  /* Senza questi, «Pluto non risponde» non si restringe e spinge fuori
     dalla colonna tutto quello che gli sta a destra — il bottone del tema
     finiva a x = -86, cioe oltre il bordo dello schermo. */
  min-width: 0; flex: 1 1 auto;
}
.stato-pluto .testo {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stato-pluto:hover { background: var(--nav-hover); color: var(--nav-text); }
.stato-pluto .pallino {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
  background: var(--err); box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}
.stato-pluto.ok .pallino {
  background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  /* Un respiro lento: dice «e vivo» senza chiedere attenzione. */
  animation: respiro 2.6s ease-in-out infinite;
}
@keyframes respiro { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .stato-pluto.ok .pallino { animation: none; } }

/* Giallo: l indirizzo c e, ma se risponda ancora non lo sappiamo. Dura il
   tempo di una richiesta, e non e mai una bugia. */
.stato-pluto.forse .pallino {
  background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}

.sidebar-piede .versione { color: var(--nav-text); opacity: .7; }


/* ═══════════════════════════════════════════════════════════════════
   LE PASTIGLIE, COL FONDO DEL MOCKUP
   Un verde al 15% di trasparenza su un fondo caldo esce grigio: qui i
   fondi sono i due bruni campionati dal file, non un calcolo.
   ═══════════════════════════════════════════════════════════════════ */
html.dark .pill.green  { background: #262D20; color: #7BE08C; }
html.dark .pill.ok     { background: #262D20; color: #7BE08C; }
html.dark .pill.yellow,
html.dark .pill.orange { background: #3B2B17; color: #FFC937; }
html.dark .pill.red,
html.dark .pill.err    { background: #33211B; color: #F08A6B; }
html.dark .pill.blue   { background: #33261B; color: #FFB47B; }
html.dark .pill.gray   { background: #262220; color: #A89484; }

/* Il bottone principale: nel mockup non e piatto, ha un filo di luce in
   alto che lo fa sembrare premibile. */
html.dark .btn.primario {
  background: linear-gradient(180deg, #B9754A 0%, #A0632F 100%);
  border-color: #8E5527; color: #FFFFFF;
}
html.dark .btn.primario:hover {
  background: linear-gradient(180deg, #C8814F 0%, #AB6A36 100%);
}

/* I link dentro le tabelle e le testate: l arancio chiaro del mockup. */
html.dark a { color: var(--accent-2); }
html.dark .nav a { color: var(--nav-text); }


/* ── «Password dimenticata?» ─────────────────────────────────────── */
.riga-ricorda {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 22px;
}
.riga-ricorda .ricorda { margin: 0; }

.link-scarno {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-2); font: inherit; font-size: 13.5px;
  text-decoration: underline; text-underline-offset: 3px;
}
.link-scarno:hover { color: #FFFFFF; }

.aiuto { color: #D9C8BC; font-size: 14px; line-height: 1.6; }
.aiuto h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 19px; color: #FFFFFF; margin: 0 0 16px;
}
.aiuto h2 i[data-lucide], .aiuto h2 svg.lucide { width: 20px; height: 20px; }
.aiuto p { margin: 0 0 14px; }
.aiuto b { color: #FFFFFF; }
.aiuto code {
  display: block; margin: 0 0 14px; padding: 12px 14px; border-radius: 9px;
  background: rgba(22,15,11,.8); border: 1px solid rgba(200,121,65,.20);
  color: var(--accent-2); font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.7; word-break: break-all;
}
.aiuto .nota { color: #A89484; font-size: 13px; }
.aiuto .nota i[data-lucide], .aiuto .nota svg.lucide {
  width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px;
}
.aiuto .btn { width: 100%; justify-content: center; margin-top: 6px; }


/* ── Il cambio tema, in fondo al menu ────────────────────────────── */
/* Come in Pluto: la sola icona, fondo trasparente che si accende al
   passaggio. Non e una destinazione, quindi non prende lo spazio di una
   voce di menu. */
.icona-scarna {
  background: transparent; border: 1px solid transparent; color: var(--nav-text);
  padding: 7px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.icona-scarna:hover { background: var(--nav-hover); color: var(--nav-text); }
.icona-scarna i[data-lucide], .icona-scarna svg.lucide { width: 19px; height: 19px; }

/* La seconda riga: versione a sinistra, tema a destra. Cosi il bottone ha
   lo spazio per farsi vedere invece di stare in coda a una scritta lunga. */
.piede-riga2 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 10px; font-size: 11px; color: var(--nav-text);
}


/* ═══════════════════════════════════════════════════════════════════
   LA PAGINA D ACCESSO, DI GIORNO
   Vale quando il tema chiaro e attivo: `html` senza la classe `dark`.
   ═══════════════════════════════════════════════════════════════════ */
html:not(.dark) .pagina-accesso {
  background:
    radial-gradient(1200px 700px at 12% -10%, #FBEFE2 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #F7E6D4 0%, transparent 55%),
    linear-gradient(160deg, #FAF5F0 0%, #F0E7DE 100%);
}

/* La luna e una foto scura: su fondo chiaro va tenuta molto indietro, o
   diventa una macchia nera in mezzo alla stanza. */
html:not(.dark) .cielo-foto { opacity: .16; }
html:not(.dark) .cielo { opacity: .2; }

html:not(.dark) .scheda-accesso {
  background: rgba(255, 253, 251, .86);
  border-color: rgba(122, 85, 55, .18);
  box-shadow: 0 24px 60px rgba(60, 40, 26, .16);
}

html:not(.dark) .marchio-nome { color: #2A1D14; }
html:not(.dark) .scheda-accesso h1 { color: #2A1D14; }
html:not(.dark) .scheda-accesso .sottotitolo { color: #7A6557; }
html:not(.dark) .scheda-accesso label { color: #5A4638; }

/* Il marchio e pensato per il fondo scuro: la scritta e chiara e su carta
   sparirebbe. Si scurisce l immagine intera invece di averne due file. */
html:not(.dark) .marchio-intero { filter: invert(1) hue-rotate(180deg) saturate(.7) brightness(.82); }

html:not(.dark) .campo-icona input {
  background: #FFFFFF; border-color: rgba(122, 85, 55, .22); color: #2A1D14;
}
html:not(.dark) .campo-icona input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(185,106,53,.16);
}
html:not(.dark) .campo-icona i[data-lucide],
html:not(.dark) .campo-icona svg.lucide { color: #9A8071; }
html:not(.dark) .campo-icona .occhio { color: #7A6557; }
html:not(.dark) .campo-icona .occhio:hover {
  color: var(--accent); background: rgba(185,106,53,.10);
}

html:not(.dark) .ricorda { color: #5A4638; }
html:not(.dark) .link-scarno { color: var(--accent); }
html:not(.dark) .link-scarno:hover { color: #2A1D14; }

html:not(.dark) .piede-scheda {
  color: #8A7263; border-top-color: rgba(122, 85, 55, .16);
}
html:not(.dark) .piede-cielo { color: #8A7263; }

html:not(.dark) .aiuto { color: #4A3A2E; }
html:not(.dark) .aiuto h2, html:not(.dark) .aiuto b { color: #2A1D14; }
html:not(.dark) .aiuto code {
  background: #FBF5EF; border-color: rgba(122, 85, 55, .20); color: #8A4A18;
}
html:not(.dark) .aiuto .nota { color: #7A6557; }

/* Il bottone del tema, in alto a destra della pagina d accesso. Sta fuori
   dalla scheda: e una scelta sulla stanza, non sul modulo. */
.tema-accesso {
  position: fixed; top: 20px; right: 22px; z-index: 2;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid rgba(200,121,65,.22);
  background: rgba(36, 26, 20, .55); color: #D9C8BC;
  backdrop-filter: blur(8px);
  transition: background .15s, color .15s, border-color .15s;
}
.tema-accesso:hover { background: rgba(200,121,65,.22); color: #FFFFFF; }
.tema-accesso i[data-lucide], .tema-accesso svg.lucide { width: 19px; height: 19px; }

html:not(.dark) .tema-accesso {
  background: rgba(255, 253, 251, .78); border-color: rgba(122, 85, 55, .20);
  color: #5A4638;
}
html:not(.dark) .tema-accesso:hover { background: #FFFFFF; color: #2A1D14; }


/* ═══════════════════════════════════════════════════════════════════
   LA BARRA IN ALTO, COME IN PLUTO
   ═══════════════════════════════════════════════════════════════════ */
.topbar-toggle {
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  padding: 7px; border-radius: 8px; display: inline-flex;
}
.topbar-toggle:hover { background: var(--row-hover); }
.topbar-toggle i[data-lucide], .topbar-toggle svg.lucide { width: 21px; height: 21px; }

/* Il titolo della pagina vive qui: cosi si sa dove si e anche a pagina
   scorsa in fondo, che e proprio quando ci si perde. */
.topbar-titolo {
  font-size: 16px; font-weight: 620; margin: 0 4px 0 2px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw;
}
.topbar-titolo:empty { display: none; }

.topbar-comandi { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Il suggerimento della scorciatoia dentro il campo: una scorciatoia che
   non si vede non la usa nessuno. */
.ricerca-globale kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 10.5px; letter-spacing: .04em;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px;
  pointer-events: none;
}
.ricerca-globale input:focus ~ kbd { opacity: 0; }
@media (max-width: 900px) { .ricerca-globale kbd { display: none; } }

/* ── L utente, in alto a destra ─────────────────────────────────── */
/* Una pastiglia sola invece di due bersagli: dentro ci sta chi sei, che
   ruolo hai, e le due cose che puoi fare su di te. */
.pastiglia-utente {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius: 10px;
  padding: 5px 9px 5px 7px; color: var(--text); font: inherit;
  transition: background .15s, border-color .15s;
}
.pastiglia-utente:hover { background: var(--row-hover); border-color: var(--border-2); }
.pastiglia-utente .avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--nav-active); color: #FFFFFF; flex: 0 0 30px;
}
.pastiglia-utente .avatar i[data-lucide], .pastiglia-utente .avatar svg.lucide {
  width: 19px; height: 19px;
}
.pastiglia-utente .chi { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.pastiglia-utente .nome { font-size: 13.5px; font-weight: 600; }
.pastiglia-utente .ruolo { font-size: 10.5px; color: var(--muted); }
.pastiglia-utente .freccia i[data-lucide], .pastiglia-utente .freccia svg.lucide {
  width: 14px; height: 14px; color: var(--muted);
}
@media (max-width: 760px) { .pastiglia-utente .chi, .pastiglia-utente .freccia { display: none; } }

.topbar-utente, .avvisi-guscio { position: relative; }

.menu-utente, .avvisi-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: var(--ombra); overflow: hidden;
}
.menu-utente { min-width: 208px; padding: 5px; }
.menu-utente a, .menu-utente button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font: inherit; font-size: 14px; text-align: left;
  text-decoration: none; cursor: pointer;
}
.menu-utente a:hover, .menu-utente button:hover { background: var(--row-hover); }
.menu-utente i[data-lucide], .menu-utente svg.lucide { width: 17px; height: 17px; opacity: .8; }

.nascosto { display: none !important; }

/* ── La campanella ──────────────────────────────────────────────── */
.pallina {
  position: absolute; top: 1px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--accent); color: #FFFFFF;
  font-size: 10px; font-weight: 700; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
#btn-avvisi { position: relative; }

.avvisi-menu { width: 330px; max-width: 92vw; }
.avvisi-menu header { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); }
.avvisi-menu h3 { margin: 0; font-size: 14px; }
.avvisi-menu .vuoto { padding: 20px 14px; color: var(--muted); text-align: center; font-size: 13.5px; }

.avviso-voce {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px;
  color: var(--text); text-decoration: none; font-size: 13.5px; line-height: 1.45;
  border-bottom: 1px solid var(--border);
}
.avviso-voce:last-child { border-bottom: 0; }
.avviso-voce:hover { background: var(--row-hover); }
.avviso-voce b { font-size: 15px; }
.avviso-voce i[data-lucide], .avviso-voce svg.lucide {
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; color: var(--muted);
}
.avviso-voce.ok i[data-lucide], .avviso-voce.ok svg.lucide { color: var(--ok); }
.avviso-voce.warn i[data-lucide], .avviso-voce.warn svg.lucide { color: var(--warn); }


/* ═══════════════════════════════════════════════════════════════════
   IL RIEMPIMENTO AUTOMATICO DEL BROWSER
   Quando Chrome propone una password salvata dipinge il campo di suo —
   bianco azzurrino — e il `background` del foglio di stile non lo ferma:
   quel colore lo mette con una regola interna piu forte.
   L unico modo di coprirlo e un'ombra INTERNA grande quanto il campo, che
   gli sta sopra. Il testo si ricolora a parte, perche l ombra non lo tocca.
   ═══════════════════════════════════════════════════════════════════ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px var(--input-bg) !important;
          box-shadow: inset 0 0 0 1000px var(--input-bg) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  /* La transizione lunghissima e il trucco che tiene buono Safari, che
     rimette il suo colore dopo qualche istante. */
  transition: background-color 9999s ease-in-out 0s;
}

/* Nella pagina d accesso i campi hanno un fondo loro, piu scuro della
   scheda: l ombra deve essere di quel colore, non di quello generale. */
.campo-icona input:-webkit-autofill,
.campo-icona input:-webkit-autofill:hover,
.campo-icona input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px rgba(22, 15, 11, .98) !important;
          box-shadow: inset 0 0 0 1000px rgba(22, 15, 11, .98) !important;
  -webkit-text-fill-color: var(--text) !important;
}
html:not(.dark) .campo-icona input:-webkit-autofill,
html:not(.dark) .campo-icona input:-webkit-autofill:hover,
html:not(.dark) .campo-icona input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px #FFFFFF !important;
          box-shadow: inset 0 0 0 1000px #FFFFFF !important;
  -webkit-text-fill-color: #2A1D14 !important;
}


/* ── Lo zoom dell interfaccia ────────────────────────────────────── */
.btn.icona.scala {
  gap: 5px; padding-left: 9px; padding-right: 7px; width: auto;
}
.scala-etichetta { font-size: 12px; font-weight: 600; color: var(--muted); }
.scala-freccia i[data-lucide], .scala-freccia svg.lucide {
  width: 13px; height: 13px; color: var(--muted);
}
@media (max-width: 1000px) { .btn.icona.scala { display: none; } }

/* ── Il menu chiuso ──────────────────────────────────────────────── */
/* Su schermo largo il menu si ritira lasciando il posto al lavoro; su
   schermo stretto e gia fuori di suo e il bottone lo fa entrare. */
@media (min-width: 981px) {
  html.menu-chiuso .sidebar { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   LE SCHEDE IN FONDO AL MENU, E IL PIEDE DI PAGINA
   ═══════════════════════════════════════════════════════════════════ */
.schede-piede { padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 7px; }

.scheda-sys, .scheda-guida {
  border: 1px solid var(--nav-bordo); border-radius: 10px;
  padding: 8px 10px; background: var(--nav-velo);
}
.scheda-guida { display: block; text-decoration: none; color: inherit; }
.scheda-guida:hover { background: var(--nav-hover); text-decoration: none; }

.scheda-titolo {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--nav-text); opacity: .72; margin-bottom: 5px;
}
.scheda-riga {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--nav-text); margin-bottom: 3px;
}
.scheda-riga .pallino {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--muted);
}
.scheda-riga .pallino.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(74,222,128,.15); }
.scheda-riga .pallino.no { background: var(--err); box-shadow: 0 0 0 3px rgba(240,115,107,.15); }
.scheda-riga .pallino.forse { background: var(--warn); box-shadow: 0 0 0 3px rgba(255,201,55,.15); }

.scheda-sotto { font-size: 11px; color: var(--nav-text); opacity: .78; margin-top: 5px; }

/* IL SALVATAGGIO CHE NON VA SI DEVE VEDERE.
   La classe c'era nel codice da sempre, ma qui non c'era nessuna regola:
   l'indicatore restava grigio uguale, e la guida raccontava un colore
   che non si accendeva. Un avviso che non si vede è peggio di nessun
   avviso, perché qualcuno ci conta. */
.scheda-sotto.attenzione {
  color: #ffb4a8;
  opacity: 1;
  font-weight: 600;
  border-left: 3px solid #ff5a44;
  padding-left: 7px;
}

.guida-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 7px;
  font-size: 12px; color: var(--nav-text);
}
.guida-btn i[data-lucide], .guida-btn svg.lucide { width: 14px; height: 14px; }

/* Il piede della pagina: chi siamo e come ci si trova. Sta in fondo al
   contenuto, non incollato allo schermo — si legge quando si arriva. */
.piede-pagina {
  margin-top: 34px; padding: 18px 2px 4px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 11.5px; text-align: center; line-height: 1.7;
}
.piede-pagina a { color: var(--muted); }
.piede-pagina a:hover { color: var(--accent-2); }
.piede-pagina b { color: var(--text); }


/* ── La ricerca a pagina intera ──────────────────────────────────── */
.elenco-risultati { display: flex; flex-direction: column; }
.risultato {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
.risultato:last-child { border-bottom: 0; }
.risultato:hover { background: var(--row-hover); text-decoration: none; }
.risultato i[data-lucide], .risultato svg.lucide {
  width: 17px; height: 17px; color: var(--muted); flex: 0 0 17px;
}

/* ── La guida ────────────────────────────────────────────────────── */
.guida-testo { max-width: 780px; font-size: 15px; line-height: 1.75; }
.guida-testo h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; margin: 34px 0 12px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
.guida-testo h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
.guida-testo h2 i[data-lucide], .guida-testo h2 svg.lucide {
  width: 20px; height: 20px; color: var(--accent-2);
}
.guida-testo p { margin: 0 0 13px; }
.guida-testo b { color: var(--text); }
.guida-testo .mono { font-family: Consolas, monospace; font-size: 13.5px; color: var(--accent-2); }
.guida-testo table { max-width: 420px; margin: 8px 0 0; }
.guida-testo td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--border); }

pre.comando {
  margin: 4px 0 14px; padding: 13px 15px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--accent-2); font-family: Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.7; overflow-x: auto;
}

kbd {
  display: inline-block; padding: 2px 7px; border-radius: 5px;
  background: var(--panel-2); border: 1px solid var(--border-2);
  font-family: inherit; font-size: 12px; color: var(--text);
}


/* ── Tutto il menu in bianco ─────────────────────────────────────── */
/* Le icone Lucide non hanno un colore proprio: disegnano con `currentColor`,
   cioe col colore del testo che le contiene. Basta dire bianco al testo e
   seguono da sole — senza doverle elencare una per una. */
.sidebar { color: #FFFFFF; }
.sidebar i[data-lucide], .sidebar svg.lucide { color: inherit; }
.nav a, .nav a:hover { color: var(--nav-text); }


@media print {
  .app { height: auto; overflow: visible; zoom: 1; }
  .principale { height: auto; overflow: visible; }
  .contenuto { overflow: visible; }
}


/* ═══════════════════════════════════════════════════════════════════
   LE BARRE DI SCORRIMENTO
   Stessa forma di Pluto — 10 pixel, cursore arrotondato, niente frecce —
   ma nei colori di Caronte: i suoi sono grigio-azzurri, e in mezzo al
   bruno sarebbero una striscia fredda in una stanza calda.
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #B3A091; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #8A7263; }
::-webkit-scrollbar-corner { background: transparent; }

html.dark ::-webkit-scrollbar-thumb { background: #4E3B2E; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #6B5140; }

/* Firefox non conosce le regole qui sopra e ha le sue due. */
* { scrollbar-width: thin; scrollbar-color: #B3A091 transparent; }
html.dark * { scrollbar-color: #4E3B2E transparent; }

/* Nella colonna scura il cursore deve staccarsi dal fondo del menu, che e
   piu scuro del resto della pagina. */
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }
.sidebar { scrollbar-color: rgba(255,255,255,.14) transparent; }


/* ── La sede, nella barra in alto ────────────────────────────────── */
/* Stessa forma di Pluto: un riquadro solo, con l etichetta dentro. Il
   menu non ha un bordo suo — il bordo e quello del riquadro — se no in
   fila con la campanella e la pastiglia dell utente diventano tre
   rettangoli uno attaccato all altro. */
.topbar-sede {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--input-bg); border: 1px solid var(--border);
}
.topbar-sede .ts-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.topbar-sede .sede-sel {
  width: auto; border: none; background: transparent; color: var(--text);
  font: inherit; font-weight: 600; font-size: 13px; padding: 2px 4px;
  outline: none; cursor: pointer;
}
.topbar-sede .sede-targa { color: var(--text); font-weight: 600; font-size: 13px; }
/* Sullo stretto resta il nome della sede: l etichetta si capisce lo
   stesso, il nome no. */
@media (max-width: 1100px) { .topbar-sede .ts-label { display: none; } }
@media (max-width: 760px) { .topbar-sede { display: none; } }


/* ── Tutto il menu di un colore solo ──────────────────────────────── */
/* Bianco sullo scuro, scuro sul chiaro: un unico token, `--nav-text`.
   Le Lucide disegnano con `currentColor`, quindi seguono il testo da
   sole senza doverle elencare una per una.
   I pallini di stato restano fuori: li il colore non e decorazione, e
   quello che dicono. */
.sidebar, .sidebar a, .sidebar b, .sidebar span, .sidebar div,
.sidebar button, .sidebar small,
.sidebar i[data-lucide], .sidebar svg.lucide,
html.dark .sidebar a, html.dark .sidebar .nav a {
  color: var(--nav-text);
}
.sidebar .pallino, .sidebar .scheda-riga .pallino { color: inherit; }

/* La voce selezionata sta su un fondo pieno in tutti e due i temi:
   li il bianco ci vuole sempre. */
.sidebar .nav a.attiva, html.dark .sidebar .nav a.attiva,
.sidebar .nav a.attiva i[data-lucide], .sidebar .nav a.attiva svg.lucide {
  color: #FFFFFF;
}

/* Sul chiaro la colonna e bianca: serve una riga che la stacchi dalla
   pagina, se no i due bianchi si confondono e il menu sembra galleggiare. */
html:not(.dark) .sidebar {
  border-right: 1px solid var(--border);
}
html:not(.dark) .sidebar::-webkit-scrollbar-thumb { background: rgba(36,26,20,.16); }
html:not(.dark) .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(36,26,20,.3); }
html:not(.dark) .sidebar { scrollbar-color: rgba(36,26,20,.16) transparent; }


/* ── Le sedi di un utente ─────────────────────────────────────────── */
/* Caselle, non una tendina: le sedi sono tre o quattro e si scelgono
   insieme. Una tendina a scelta multipla costringe a tenere premuto un
   tasto per prendere la seconda, e nessuno lo scopre da solo. */
.scelta-sedi {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px;
}
.scelta-sedi label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel-2); cursor: pointer; font-size: 13px;
  transition: border-color .15s, background .15s;
}
.scelta-sedi label:hover { border-color: var(--border-2); }
.scelta-sedi input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.scelta-sedi label:has(input:checked) {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.scelta-sedi small { font-weight: 400; }
/* Una sede spenta resta scegliibile — c e chi ci ha lavorato — ma si vede
   che e spenta. */
.scelta-sedi label.spenta { opacity: .55; }
.scelta-sedi label.spenta b { text-decoration: line-through; }


/* ── Le cose che il sistema non ha capito ─────────────────────────── */
/* Non e un errore e non e un successo: e una domanda. Quindi non rosso e
   non verde — il colore lo da la gravita, una riga sul fianco, come i
   segnalibri di un quaderno. */
.pannello-dubbi { border-left: 3px solid var(--warn); }
.dubbio {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 12px; margin-top: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid var(--muted); border-radius: 9px;
  font-size: 13px;
}
.dubbio.alto  { border-left-color: var(--err); }
.dubbio.medio { border-left-color: var(--warn); }
.dubbio.basso { border-left-color: var(--info); }
.dubbio > i[data-lucide], .dubbio > svg.lucide {
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; color: var(--muted);
}
.dubbio.alto  > svg.lucide { color: var(--err); }
.dubbio.medio > svg.lucide { color: var(--warn); }
.dubbio .muted { font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
/* Cosa fare: e la riga per cui l avviso esiste, quindi si vede. */
.dubbio .che-fare {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent-2, var(--accent));
}
.dubbio .che-fare i[data-lucide], .dubbio .che-fare svg.lucide {
  width: 14px; height: 14px; flex: 0 0 14px;
}

/* Nell elenco: il totale che non si e potuto leggere non si scrive come
   un numero. Uno zero in colonna si legge «e costato zero». */
td .muted { font-style: italic; }


/* ── Ordinare le tabelle cliccando sull intestazione ──────────────── */
/* La doppia freccia smorzata dice «qui si puo cliccare» senza gridarlo;
   diventa una freccia sola, accesa, sulla colonna che comanda davvero. */
th.ord { cursor: pointer; user-select: none; white-space: nowrap; }
th.ord::after {
  content: " \21C5"; opacity: .28; font-weight: 400; margin-left: 3px;
}
th.ord:hover { color: var(--text); }
th.ord:hover::after { opacity: .6; }
th.ord.su::after  { content: " \25B2"; opacity: 1; color: var(--accent); font-size: .78em; }
th.ord.giu::after { content: " \25BC"; opacity: 1; color: var(--accent); font-size: .78em; }
th.ord.su, th.ord.giu { color: var(--text); }

@media print { th.ord::after { content: ""; } }

/* ── «Ce l abbiamo già»: collegare una riga a un articolo che esiste ── */
/* Sta dentro una cella stretta di una finestra: i candidati escono sopra
   la tabella invece di allargarla, se no aprire l elenco sposta tutte le
   righe e si perde di vista quella su cui si stava lavorando. */
.scelta-articolo { position: relative; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.scelta-articolo .collega { font-size: 11.5px; padding: 3px 8px; }
/* La proposta sta SOPRA al bottone: si legge prima di decidere, e quasi
   sempre e gia la risposta. */
.proposta-articolo {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; line-height: 1.3;
  padding: 4px 7px; border-radius: 7px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
}
.proposta-articolo .btn { font-size: 11px; padding: 2px 8px; }
.scelta-articolo .candidati {
  position: absolute; top: 100%; left: 0; z-index: 40; min-width: 280px; max-width: 420px;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 9px;
  box-shadow: var(--ombra); max-height: 260px; overflow-y: auto; padding: 4px;
}
.scelta-articolo .candidati a {
  display: block; padding: 7px 9px; border-radius: 7px; text-decoration: none; color: var(--text);
}
.scelta-articolo .candidati a:hover { background: var(--row-hover); text-decoration: none; }
.scelta-articolo .candidati a b { display: block; font-size: 12.5px; font-weight: 600; }
.scelta-articolo .candidati a span { display: block; font-size: 11px; color: var(--muted); }
.scelta-articolo .cerca-riga { padding: 5px; border-top: 1px solid var(--border); margin-top: 4px; }
.scelta-articolo .cerca-riga input { font-size: 12.5px; padding: 6px 8px; }


/* ── Pannelli a tendina ───────────────────────────────────────────── */
.pannello.apribile > h2 { user-select: none; }
.pannello.apribile .tendina {
  padding: 3px 7px; transition: transform .18s;
}
.pannello.apribile.chiuso .tendina { transform: rotate(-90deg); }
.pannello.apribile.chiuso .corpo-pannello { display: none; }
/* Chiuso resta solo il titolo: il pannello non deve lasciare un buco. */
.pannello.apribile.chiuso { padding-bottom: 12px; }
.pannello.apribile.chiuso > h2 { margin-bottom: 0; }

/* ── Caselle dei numeri: niente freccette ─────────────────────────── */
/* Nessuno conta i pezzi di un pacco cliccando una freccia, e intanto
   rubano spazio alla cifra e si premono per sbaglio con la rotella. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
}


/* ── La mail da cui vengono i dati ────────────────────────────────── */
/* Si mostra come TESTO, non impaginata: la mail di un fornitore e codice
   scritto da qualcun altro, e farlo girare dentro Caronte per comodita di
   lettura non vale il rischio. */
.sorgente-mail {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 11.5px; line-height: 1.45;
  max-height: 52vh; overflow: auto; margin: 0;
  /* Non si va a capo: le conferme sono tabelle di testo, e mandare a capo
     scolla i prezzi dalle righe a cui appartengono — cioe rompe proprio
     la cosa che si e venuti a controllare. Meglio scorrere di lato. */
  white-space: pre;
}


/* ── Il codice del fornitore, nell ordine ─────────────────────────── */
/* Il codice si legge per confrontarlo con quello stampato sulla scatola:
   quindi per intero, sempre. Se e lungo va a capo — anche in mezzo, che
   su un codice non toglie niente — invece di essere tagliato. */
.cella-sku { font-size: 11.5px; line-height: 1.5; }
.cella-sku .sku {
  font-weight: 600; word-break: break-all; margin-right: 5px;
}
.cella-sku .pill { font-size: 10px; white-space: nowrap; }


/* ── Il dato che non torna ────────────────────────────────────────── */
/* Rosso fisso finche e sbagliato. Il colore e l informazione: dice «qui
   manca qualcosa» anche a chi arriva sulla pagina senza aver letto
   l avviso in cima. */
.non-torna {
  background: color-mix(in srgb, var(--err) 14%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 55%, transparent);
  border-radius: 6px;
}
input.non-torna { border-color: var(--err); }
.non-torna .manca, td.non-torna .manca {
  color: var(--err); font-weight: 600; font-style: italic;
}

/* Tre battiti per farsi trovare, poi basta. Un rosso che lampeggia per
   sempre insegna a non guardare piu quel punto — e dopo due giorni si
   ignora anche quando conta. */
.accendi { animation: battito 0.85s ease-in-out 3; }
@keyframes battito {
  0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 55%, transparent); }
  50% {
    box-shadow: inset 0 0 0 2px var(--err), 0 0 0 4px color-mix(in srgb, var(--err) 28%, transparent);
    background: color-mix(in srgb, var(--err) 26%, transparent);
  }
}
/* Chi ha chiesto meno animazioni vede il rosso e basta: quello che conta
   e il colore, i battiti servono solo a dire «sono qui». */
@media (prefers-reduced-motion: reduce) {
  .accendi { animation: none; box-shadow: inset 0 0 0 2px var(--err); }
}

.dubbio .che-fare .btn { margin-left: 8px; font-size: 11px; padding: 2px 8px; }


/* ── La finestra che si sposta ────────────────────────────────────── */
/* Non una modale: niente velo, niente blocco della pagina. Sta sopra e
   si lavora sotto — e tutto il punto. */
.finestra-mobile {
  position: fixed; z-index: 120;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display: flex; flex-direction: column; overflow: hidden;
  min-width: 280px; min-height: 180px;
}
.fin-barra {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  cursor: move; user-select: none; flex: 0 0 auto;
}
.fin-titolo { font-size: 12.5px; font-weight: 650; }
.fin-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 3px 5px; border-radius: 6px; display: inline-flex;
}
.fin-btn:hover { background: var(--row-hover); color: var(--text); }
.fin-btn i[data-lucide], .fin-btn svg.lucide { width: 15px; height: 15px; }
.fin-corpo { flex: 1; min-height: 0; overflow: auto; background: var(--panel); }
.fin-corpo iframe, .fin-corpo embed, .fin-corpo object {
  width: 100%; height: 100%; border: none; display: block; background: #fff;
}
/* Quello che si apre dentro la finestra: un immagine, un testo, un
   elenco incolonnato. Tutto scorre dentro `.fin-corpo`. */
.fin-immagine { display: block; max-width: 100%; margin: 0 auto; }
.fin-avviso { padding: 14px 12px; margin: 0; font-size: 12.5px; }
.fin-testo {
  margin: 0; padding: 12px; font-size: 12px; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre; color: var(--text);
}
.fin-tabella { width: 100%; border-collapse: collapse; font-size: 12px; }
.fin-tabella th, .fin-tabella td {
  padding: 5px 9px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top; white-space: nowrap;
}
.fin-tabella th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); font-weight: 650;
  color: var(--label); text-transform: uppercase; font-size: 10.5px;
  letter-spacing: .4px;
}
.fin-tabella tr:nth-child(even) td { background: var(--row-alt); }

.fin-angolo {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--border-2) 50%);
}
/* Mentre si trascina, il testo non si seleziona e il contenuto della
   finestra non ruba il mouse: senza questo, passando sopra un PDF il
   trascinamento si pianta a meta. */
body.sto-trascinando { user-select: none; }
body.sto-trascinando iframe, body.sto-trascinando embed { pointer-events: none; }

@media print { .finestra-mobile { display: none !important; } }


/* ── La barretta degli allegati, sopra le righe dell ordine ───────── */
.barra-allegati {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 12.5px;
}
.barra-allegati > i[data-lucide], .barra-allegati > svg.lucide {
  width: 15px; height: 15px; color: var(--muted);
}
.barra-allegati .btn { font-family: var(--mono, monospace); font-size: 11.5px; }


/* ── Colonne che si allargano trascinando ─────────────────────────── */
/* Perche le larghezze comandino serve `fixed`: il browser smette di
   guardare il contenuto e guarda i numeri che gli diamo. Le larghezze di
   partenza pero si MISURANO da come si era disposto da solo, cosi
   accendendo il ridimensionamento la tabella non si muove di un pixel. */
table.colonne-fisse { table-layout: fixed; }
/* I tre pezzi vanno insieme, e il terzo e quello che tutti dimenticano:
   senza `nowrap` il testo va a capo, e una colonna che va a capo non si
   stringe piu — diventa alta invece che stretta. */
table.colonne-fisse td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* I puntini dicono «qui c e altro testo tagliato». In una cella che
   contiene COMANDI — un bottone, una casella, una pillola — di testo
   tagliato non ce n e: i puntini comparivano dopo l ultimo bottone e
   facevano cercare qualcosa che non esiste. */
table.colonne-fisse td:has(button, input, select, textarea, a.btn, .pill) {
  text-overflow: clip;
}
/* Le INTESTAZIONI invece non tagliano: dentro ci sta la maniglia, che
   sporge oltre il bordo per stare a cavallo della riga di separazione.
   A tagliare il titolo lungo ci pensa lo <span> messo dal programma. */
table.colonne-fisse th { overflow: visible; }
table.colonne-fisse th .testa-testo {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La freccetta dell ordinamento va dentro lo <span>, non attaccata alla
   cella: lo span e un blocco, e fuori la freccetta finirebbe su una riga
   per conto suo sotto al titolo. */
table.colonne-fisse th.ord::after { content: none; }
table.colonne-fisse th.ord .testa-testo::after {
  content: " \21C5"; opacity: .28; font-weight: 400; margin-left: 3px;
}
table.colonne-fisse th.ord:hover .testa-testo::after { opacity: .6; }
table.colonne-fisse th.ord.su  .testa-testo::after {
  content: " \25B2"; opacity: 1; color: var(--accent); font-size: .78em;
}
table.colonne-fisse th.ord.giu .testa-testo::after {
  content: " \25BC"; opacity: 1; color: var(--accent); font-size: .78em;
}
/* Le caselle in modifica si stringono con la colonna invece di fare da
   fermo: una casella larga quanto il suo contenuto impedirebbe di
   accorciare la colonna, che e proprio quello che si vuole poter fare. */
table.colonne-fisse td input, table.colonne-fisse td select {
  min-width: 0; max-width: 100%;
}

.tira-colonna {
  /* A CAVALLO del bordo: meta sulla colonna di sinistra e meta su quella
     di destra. E li che va la mano — sulla riga che si vede — e li deve
     esserci qualcosa da prendere. Dodici pixel, non otto. */
  position: absolute; top: 0; right: -6px; width: 12px; height: 100%;
  cursor: col-resize; z-index: 6; user-select: none; touch-action: none;
}
/* Una tacca sottile fra i titoli, e basta: niente righe verticali lungo
   tutta la tabella. Serve a dire dove si afferra per tirare la colonna,
   non a disegnare una gabbia intorno ai dati.
   Sta nelle intestazioni perche e li che vive la maniglia — una riga che
   scendesse fra le celle sarebbe una decorazione, e di decorazioni che
   non dicono niente ce n e gia troppe in giro. */
.tira-colonna::after {
  content: ""; position: absolute; top: 20%; left: 5.5px; width: 1px; height: 60%;
  background: var(--border-2); transition: background .12s, width .12s, top .12s, height .12s;
}
.tira-colonna:hover::after, .tira-colonna.attiva::after {
  top: 0; height: 100%; left: 5px; width: 2px;
  background: var(--accent); box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* La colonna delle azioni: stretta, e non si accorcia mai sotto il
   bottone che contiene. */
table.colonne-fisse td.azioni-riga, table.colonne-fisse th.azioni-riga {
  overflow: visible; text-align: right;
}
/* Mentre si trascina il cursore resta quello giusto su tutta la pagina, e
   niente si seleziona: se no si finisce per evidenziare mezza tabella. */
body.sto-tirando, body.sto-tirando * {
  cursor: col-resize !important; user-select: none !important;
}

@media print { .tira-colonna { display: none; } }


/* ── «A quanto lo vendo?»: il calcolatore nel menu ─────────────────
   Sta qui e non in una pagina sua perche e una cosa da dieci secondi:
   due numeri e la risposta, senza perdere quello che si stava facendo. */
.calcolo-prezzo { margin: 10px 12px 0; }
.calcolo-testa {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 7px 10px; border-radius: 9px;
  color: var(--nav-text); font-size: 12.5px; font-weight: 600; text-align: left;
}
.calcolo-testa:hover { background: var(--nav-hover); }
.calcolo-testa i[data-lucide], .calcolo-testa svg.lucide { width: 16px; height: 16px; }
.calcolo-prezzo.aperta .calcolo-freccia { transform: rotate(180deg); }
.calcolo-freccia { transition: transform .18s; }
.calcolo-corpo {
  padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 7px;
}
.calcolo-corpo label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--label); text-transform: uppercase; letter-spacing: .04em;
}
.calcolo-corpo label small { text-transform: none; letter-spacing: 0; opacity: .75; }
.calcolo-spunta {
  flex-direction: row !important; align-items: center; gap: 7px !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 12px !important; color: var(--muted) !important; cursor: pointer;
}
.calcolo-spunta input { width: auto !important; }
.calcolo-spunta b { color: var(--text); font-weight: 600; }
/* La riga del titolo con la freccetta che inverte: sotto ci sta la
   casella, che e una sola perche la domanda e una sola guardata da due
   lati. */
.calcolo-titolo {
  flex-direction: row !important; align-items: center; justify-content: space-between;
  gap: 6px !important;
}
.calcolo-inverti {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); cursor: pointer; padding: 2px 5px; line-height: 0;
}
.calcolo-inverti:hover { color: var(--accent); border-color: var(--accent); }
.calcolo-inverti i[data-lucide], .calcolo-inverti svg.lucide { width: 13px; height: 13px; }
.calcolo-corpo input {
  width: 100%; padding: 6px 8px; font-size: 13px;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
}
.calcolo-esito {
  padding: 8px 10px; border-radius: 9px; text-align: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 17px; font-weight: 700; color: var(--text);
}
.calcolo-esito small { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); }
/* Sottocosto si vende eccome, ma si deve sapere di farlo: una perdita che
   passa in silenzio si scopre a fine anno. */
.calcolo-esito.in-perdita {
  background: color-mix(in srgb, var(--err) 16%, transparent);
  border-color: color-mix(in srgb, var(--err) 45%, transparent);
  color: var(--err);
}
.calcolo-corpo input:disabled { opacity: .5; cursor: not-allowed; }


/* ── Una domanda ancora senza risposta ────────────────────────────
   Su undici righe una casella vuota non si nota, e quella rimasta senza
   risposta arriva fino alla fine del carico — dove la domanda si
   ripresenta e sembra che il programma chieda due volte. Giallo finche
   non si risponde: si vede da lontano e sparisce da sola. */
.campo-inline.senza-risposta {
  padding: 3px 5px; border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent);
}


/* ── Un comando che e solo un icona ───────────────────────────────
   Su undici righe un bottone con su scritto «Foto» sono undici parole
   che dicono tutte la stessa cosa e si portano via una colonna. */
.btn-icona {
  background: none; border: 1px solid var(--border); border-radius: 7px;
  color: var(--muted); cursor: pointer; padding: 4px 6px; line-height: 0;
  margin-top: 4px;
}
.btn-icona:hover { color: var(--accent); border-color: var(--accent); }
.btn-icona i[data-lucide], .btn-icona svg.lucide { width: 15px; height: 15px; }
/* Chi la foto ce l ha gia si distingue da chi non ce l ha: cosi si sa in
   anticipo se cliccando si guarda o si sceglie. */
.btn-icona.ha-foto { color: var(--accent); border-color: var(--border-2); }

/* ── La foto aperta grande ──────────────────────────────────────── */
.fin-corpo.fin-foto {
  display: flex; align-items: center; justify-content: center;
  overflow: auto; background: #111; padding: 0;
}
.fin-corpo.fin-foto img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: center center; transition: transform .08s linear;
  user-select: none;
}
.fin-piede {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-top: 1px solid var(--border);
  background: var(--panel-2); flex: 0 0 auto; font-size: 11.5px;
}


/* Un comando che non si disfa si vede che non si disfa. */
.btn.pericolo { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.btn.pericolo:hover {
  background: color-mix(in srgb, var(--err) 14%, transparent);
  border-color: var(--err);
}

/* ══════════════ COSE CHE ASPETTANO UNA PERSONA ══════════════
 *
 * Dal magazzino non esce niente da solo: quando Pluto dice che una
 * riparazione e stata consegnata, il pezzo va scaricato a mano. Quella
 * richiesta deve farsi vedere in due posti, perche una richiesta che
 * vive in una pagina dove non passi e un promemoria che nessuno legge:
 * un numero nella barra di sinistra, e un pannello in cima alla pagina.
 */
.nav .badge.da-fare { background: var(--warn); color: #FFFFFF; font-weight: 700; }
.pannello.da-fare { border-left: 3px solid var(--warn); }
.pannello.da-fare > h2 { color: var(--warn); }

/* ══════════════ LA BUCA DOVE SI LASCIA CADERE UN FILE ══════════════
 *
 * Un listino arriva come file. Deve vedersi che li si puo trascinare:
 * un bordo tratteggiato lo dice senza bisogno di scriverlo.
 */
.buca-file {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 30px 18px; text-align: center; cursor: pointer;
  border: 2px dashed var(--border); border-radius: 10px;
  background: var(--row-hover); transition: border-color .12s, background .12s;
}
.buca-file:hover, .buca-file.sopra {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.buca-file i[data-lucide], .buca-file svg.lucide {
  width: 30px; height: 30px; opacity: .65;
}
.buca-file.sopra i[data-lucide], .buca-file.sopra svg.lucide { opacity: 1; }

/* ══════════════ LA CASSA ══════════════
 *
 * Due colonne: a sinistra quello che si batte, a destra quello che si
 * incassa. Il totale grande perche e la cosa che si guarda mentre si
 * parla col cliente, senza abbassare la testa.
 */
.cassa-griglia {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
}
@media (max-width: 1100px) { .cassa-griglia { grid-template-columns: 1fr; } }

.totale-box { text-align: right; }
.totale-grande {
  font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.reparti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.reparti .btn { flex: 1 1 auto; }

/* I campi da copiare sul portale dell Agenzia.
 *
 * L ordine e quello della pagina dell Agenzia, e i valori sono in
 * monospazio perche si leggono una cifra per volta: chi batte guarda
 * di qua e scrive di la, e un «0» scambiato per «O» e uno scontrino
 * sbagliato. */
.gruppo-campi {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 12px 0 4px;
}
.campo-copia {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
  margin-bottom: 5px; background: var(--row-hover);
}
.campo-copia .nome { flex: 0 0 140px; font-size: 12.5px; color: var(--muted); }
.campo-copia .valore { flex: 1; font-size: 15px; font-weight: 600; word-break: break-word; }
.campo-copia .btn.fatto { background: var(--ok); color: #fff; border-color: var(--ok); }

/* ══════════════ IL TASTIERINO ══════════════
 *
 * Si digita l importo e si preme il reparto, come su una cassa vera.
 * I tasti sono grandi perche si premono guardando il cliente, non lo
 * schermo.
 */
.tastierino-box { margin-top: 12px; }
.tastierino-schermo {
  text-align: right; padding: 8px 12px; border-radius: 8px;
  background: var(--row-hover); border: 1px solid var(--border);
}
.tastierino-schermo > div:nth-child(2) {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.tastierino { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tastierino .btn {
  font-size: 19px; font-weight: 600; padding: 13px 0; justify-content: center;
}
.reparti .btn { flex-direction: column; gap: 2px; padding: 9px 10px; line-height: 1.25; }
.reparti .btn small { font-size: 10.5px; }

/* I due tasti dell incasso: grandi, e si distinguono a colpo d occhio. */
.incasso { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.incasso .btn.grande {
  flex-direction: column; gap: 5px; padding: 16px 8px; font-size: 15px; font-weight: 600;
}
.incasso .btn.grande i[data-lucide], .incasso .btn.grande svg.lucide {
  width: 24px; height: 24px;
}

/* ══════════════ LA COPIA DI CORTESIA ══════════════
 *
 * Si vede solo in stampa. NON e il documento commerciale: quello lo ha
 * emesso l Agenzia, e questa lo dice in fondo.
 */
#scontrino-stampa { display: none; }

/* LA CARTA E UN ROTOLO DA 80 MM, non un foglio.
 *
 * Senza questo il browser stampava su A4: su una termica vuol dire far
 * scorrere venti centimetri di carta per uno scontrino di cinque, e poi
 * tagliarli a mano. Altezza `auto` perche un rotolo non ha una fine: si
 * taglia dove finisce lo scontrino.
 *
 * 72 mm e l area che la testina raggiunge davvero; gli altri 8 sono i
 * bordi. */
/* LA PAGINA E L AREA STAMPABILE, non il rotolo.
 *
 * Il rotolo e 80mm, ma la termica stampa su 72: il resto e carta che
 * scorre sotto al rullo. Chiedendo 80 si finisce oltre il bordo, e
 * l ultima colonna — i prezzi, a destra — sparisce. E successo.
 *
 * Con la pagina a 72 e il margine a zero, il contenuto lo centra il
 * foglio invece di un calcolo che deve tornare. */
@page {
  size: 72mm auto;
  margin: 0;
}

@media print {
  /* Via tutto quello che non è lo scontrino. `.piede-pagina` ci
     finiva in fondo al foglio — «© 2026 iFix … Via Merulana 257» —
     stampato sotto uno scontrino di Tiburtina. */
  .no-stampa, .cassa-griglia, .velo,
  .piede-pagina, .topbar, .menu, nav, header { display: none !important; }
  #scontrino-stampa { display: block; }
  /* Due millimetri d aria per lato, e il resto lo centra la pagina.
   *
   * IL CORPO E 13px E NON 11,5: su una termica a 203 punti per pollice
   * un carattere piccolo diventa una macchia, e quello che non e in
   * grassetto non si legge piu. Sulla carta si misura, sullo schermo
   * no. */
  .scontrino {
    width: 68mm; margin: 0 auto; padding: 0 2mm;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px; line-height: 1.4; color: #000;
  }
  /* Il logo: gia in bianco e nero, perche la termica i grigi non li fa.
     Dentro non c e l indirizzo — quello cambia con la sede. */
  .scontrino .logo {
    display: block; width: 46mm; margin: 0 auto 2px; }
  .scontrino .testa { text-align: center; }
  /* La frase sotto il marchio: era dentro l immagine, ora e testo. */
  .scontrino .claim { font-size: 11px; margin: 0 0 4px; }
  .scontrino h3 { font-size: 15px; font-weight: 700; margin: 0 0 1px; }
  .scontrino hr { border: none; border-top: 1px dashed #000; margin: 5px 0; }
  .scontrino .sr { display: flex; justify-content: space-between; gap: 8px; }
  .scontrino .sr .d { flex: 1; min-width: 0; }
  .scontrino .sr .v { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .scontrino .sr.tot { font-size: 17px; font-weight: 700; margin: 3px 0; }
  /* 11px, non 9: a 203 punti per pollice nove pixel fanno sette
     puntini di altezza, e sette puntini sono una macchia. */
  .scontrino .muted { font-size: 11px; line-height: 1.35; }
  .scontrino .doc { text-align: center; }
  .scontrino .doc .num { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
  /* Il QR: 20 mm di lato. Piu piccolo non si legge quando la carta si
     sbiadisce, piu grande mangia mezzo scontrino. */
  .scontrino .qr { text-align: center; margin-top: 6px; font-size: 11px; }
  .scontrino .qr img { display: block; width: 20mm; height: 20mm; margin: 0 auto 2px; }
  .scontrino .qr .sito { font-weight: 700; font-size: 12px; }
  /* Un po di carta in fondo, se no il taglio passa sull ultima riga. */
  .scontrino .coda { height: 8mm; }
}

/* ══════════════ IL CONTO DEL RESTO ══════════════
 *
 * Tre numeri grandi, e il resto e il piu grande di tutti: e quello che
 * si guarda mentre si apre il cassetto, con il cliente davanti.
 */
.conto-cassa { display: grid; gap: 6px; margin-bottom: 12px; }
.riga-conto {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 12px; border-radius: 8px; background: var(--row-hover);
}
.riga-conto span { color: var(--muted); font-size: 13px; }
.riga-conto b { font-size: 22px; font-variant-numeric: tabular-nums; }
.riga-conto.ricevuto b { color: var(--accent); }
.riga-conto.resto {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
}
.riga-conto.resto b { font-size: 32px; font-weight: 700; color: var(--ok); }
.riga-conto.resto.manca {
  background: color-mix(in srgb, var(--err) 14%, transparent);
  border-color: color-mix(in srgb, var(--err) 40%, transparent);
}
.riga-conto.resto.manca b { color: var(--err); }

.banconote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.banconote .btn { justify-content: center; font-weight: 600; }


/* ══════════════ LE FINESTRE DELLA CASSA ══════════════
   `.finestra` era usata in cinque posti e non era MAI stata definita:
   nessuna larghezza, nessun bordo. Il riquadro si restringeva al
   contenuto, e il tastierino dei contanti usciva grande come un
   francobollo. Leggendo il codice sembrava tutto a posto — si vedeva
   solo usandolo.

   E piu larga di una modale normale di proposito: ci stanno dentro dei
   tasti, e al banco si premono col dito e di fretta. */
.finestra {
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  width: 100%; max-width: 540px;
  display: flex; flex-direction: column; overflow: hidden;
}
.finestra-testa {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.finestra-testa h3 { margin: 0; flex: 1; font-size: 17px; }
.finestra-corpo { padding: 18px; }
.finestra-piede {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.finestra-piede .spazio { flex: 1; }

/* `larga` esisteva nei template e non era mai stata definita: una
   tabella di sei colonne dentro 540 pixel si accartoccia, e le
   intestazioni diventano «QUAN...», «DOCUMEN...». */
.finestra.larga { max-width: 980px; }
.finestra-corpo { max-height: 76vh; overflow-y: auto; }

/* La tabella degli scontrini: le colonne hanno larghezze diverse perche
   contengono cose diverse — una data non e un totale. */
/* COLONNE A MISURA FISSA, se no la tabella sborda.
 *
 * Con le larghezze decise dal contenuto bastava un numero di documento
 * lungo per spingere i bottoni fuori dal bordo: restavano raggiungibili
 * solo scorrendo di lato, e nessuno scorre di lato per premere un
 * bottone — semplicemente non lo trova.
 *
 * `table-layout: fixed` taglia la testa al toro: le colonne stanno dove
 * dico io, e quello che non ci sta va a puntini. */
.tab-scontrini { width: 100%; table-layout: fixed; }
.tab-scontrini th, .tab-scontrini td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 8px; padding-right: 8px;
}
.tab-scontrini .col-quando { width: 96px; }
.tab-scontrini .col-num    { width: 108px; }
.tab-scontrini .col-doc    { width: auto; }     /* lo spazio che avanza */
.tab-scontrini .col-tot    { width: 84px; }
.tab-scontrini .col-stato  { width: 86px; }
/* I bottoni non si stringono mai: sono tre, e si devono poter premere. */
.tab-scontrini .azioni-riga { width: 132px; overflow: visible; }

@media (max-width: 1040px) {
  .finestra.larga { max-width: 100%; }
}

/* Dentro una finestra, i tasti si allargano: al banco si premono col
   dito e di fretta, e il tastierino e il motivo per cui la finestra e
   piu larga di una modale normale. */
.finestra .tastierino { gap: 10px; }
.finestra .tastierino .btn { padding: 17px 0; font-size: 22px; }
.finestra .banconote { gap: 9px; margin-bottom: 12px; }
.finestra .banconote .btn { padding: 12px 0; font-size: 15px; }

@media (max-width: 640px) {
  .finestra { max-width: 100%; }
  .finestra .tastierino .btn { padding: 14px 0; font-size: 19px; }
}

/* I bottoni in fondo alla riga della cassa: in asse col testo, non coi
   numeri. Stavano in una cella `.num`, che allinea a destra e in alto
   per incolonnare le cifre — e cosi la matita e il cestino pendevano. */
.azioni-riga {
  text-align: right; white-space: nowrap; vertical-align: middle;
}
.azioni-riga .btn { display: inline-flex; align-items: center; justify-content: center; }
.azioni-riga .btn + .btn { margin-left: 6px; }

/* Il totale parziale, sotto al totale grande. Piccolo di proposito: e
   un appoggio per l occhio mentre si batte, non un secondo totale. */
.parziale { margin-top: 2px; }
.parziale .pz { color: var(--muted); font-size: 12.5px; }