/* =====================================================================
   Gestionale Moovy - foglio di stile
   Tema: Vetro (DR-047). Palette campionata dal logo.

   La struttura non conosce i colori: tutto passa dalle variabili qui
   sotto. Cambiare tema significa cambiare un attributo sul <html>, non
   toccare una regola.

   Due verdi, non uno (DR-048):
     --mint      #08CEB7  il verde del logo. Decorazioni, sfumature.
                          Come testo darebbe 1,5:1 - illeggibile.
     --mint-ink           la stessa tinta, scurita fino a 4,5:1.
                          E' l'unico che puo' scrivere.
   ===================================================================== */

/* ---------------------------------------------------------------- */
/* 0. I caratteri, che stanno in casa                               */
/* ---------------------------------------------------------------- */

/*  MANROPE E IBM PLEX MONO ARRIVANO DA QUI, NON DA GOOGLE.

    Erano un `<link>` a fonts.googleapis.com in testa a ogni pagina, e
    un foglio di stile esterno FERMA il disegno: finche' non risponde,
    la pagina non si vede, e con lei non partono nemmeno gli script che
    rimettono gli elenchi dov'erano. E' il «rinfresca tutto lo schermo
    per un istante» che si vedeva a ogni ricaricamento, e il motivo per
    cui capitava «non sempre»: dipende da quanto ci mette la rete.

    Otto file, 115 kB in tutto, dentro `static/fonts`. Chiude anche il
    punto aperto del capitolo 15 - il banco deve funzionare senza rete
    (cap. 9), e con i caratteri su un server di Google non funzionava.

    `font-display: optional` e non `swap`: il browser usa il carattere
    solo se ce l'ha gia' pronto, altrimenti tiene il ripiego per QUEL
    disegno e lo prende dalla volta dopo. `swap` invece riscrive la
    pagina in un altro carattere a meta' strada, e ogni riga di testo si
    sposta di un pixel: e' l'altra meta' del tremolio. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;
  font-display:optional;src:url('../fonts/manrope-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;
  font-display:optional;src:url('../fonts/manrope-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;
  font-display:optional;src:url('../fonts/manrope-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;
  font-display:optional;src:url('../fonts/manrope-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;
  font-display:optional;src:url('../fonts/manrope-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;
  font-display:optional;src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;
  font-display:optional;src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;
  font-display:optional;src:url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2')}

/* ---------------------------------------------------------------- */
/* 1. Temi                                                          */
/* ---------------------------------------------------------------- */

/*  `color-scheme` dice al browser di che colore e' la pagina, e da quello
    lui tinge le cose che disegna DA SOLO e che il nostro CSS non
    raggiunge: la barra di scorrimento, il calendario dei campi data, la
    freccia delle tendine di sistema.

    Serve da quando l'elenco clienti scorre dentro il suo riquadro: senza,
    su Notturno compariva una barra di scorrimento chiara in mezzo a una
    pagina scura - lo stesso rettangolo bianco fuori posto del campo di
    ricerca, solo disegnato dal browser invece che da noi. */
/* Vetro - predefinito */
:root,
:root[data-tema="vetro"]{
  color-scheme: light;
  --ink:#0E2B3F;  --dim:#456580;  --bg:#E4F1F2;
  --surf:rgba(255,255,255,.66);   --surf2:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.72);   --surf-border:rgba(255,255,255,.85);
  --accent:#0A79B8; --mint:#08CEB7; --mint-ink:#047164;
  --good:#047164;   --warn:#8A5A0C; --bad:#B02A37;
  --action-info:#07547D; --action-secondary:#5A328D; --action-warm:#86330F;
  --control-border:#577180; --on-accent:#FFFFFF; --on-good:#FFFFFF; --on-warn:#FFFFFF; --on-bad:#FFFFFF;
  --primary-start:#047164; --primary-end:#0A79B8; --primary-ink:#FFFFFF;
  --disabled-bg:#E0E7EB; --disabled-ink:#526471; --disabled-border:#617784;
  --radius:16px;    --blur:blur(18px) saturate(1.35);
  --card-shadow:0 1px 1px rgba(255,255,255,.8) inset,0 10px 30px rgba(14,60,90,.16);
  /* Piu' tenue di quella del mockup: li' stava dentro una cornice di 700px,
     qui copre uno schermo intero e alla stessa intensita' diventa invadente.
     Un fondo si nota quando manca, non quando c'e'. */
  --ground:
    radial-gradient(52% 58% at 2% 0%,rgba(8,206,183,.42),transparent 64%),
    radial-gradient(54% 62% at 100% 6%,rgba(6,155,249,.34),transparent 62%),
    radial-gradient(60% 50% at 24% 100%,rgba(4,187,207,.26),transparent 66%),
    linear-gradient(158deg,#EDF8F7 0%,#E2EDF8 100%);
}

/* Sabbia (chiave salina conservata): sabbia e blu, opaco e intermedio. */
:root[data-tema="salina"]{
  color-scheme: light;
  --ink:#193E59;  --dim:#30424F;  --bg:#B3AFA6;
  --surf:#D7CBB8; --surf2:#C9BBA5;
  --line:#938673; --surf-border:#938673;
  --accent:#244C6D; --mint:#7DB8A2; --mint-ink:#1B4832;
  --good:#1B4832;   --warn:#583900; --bad:#742A39;
  --action-info:#16374F; --action-secondary:#462853; --action-warm:#5D220B;
  --control-border:#465C6B; --on-accent:#FFFFFF; --on-good:#FFFFFF; --on-warn:#FFFFFF; --on-bad:#FFFFFF;
  --primary-start:#2A5B56; --primary-end:#244C6D; --primary-ink:#FFFFFF;
  --disabled-bg:#C8BCA9; --disabled-ink:#3B4F5D; --disabled-border:#546776;
  --sand-start:#E3D9CA; --sand-end:#D7CBB8;
  --control-start:#F0E7D9; --control-end:#D3C3AA;
  --radius:12px;    --blur:none;
  --card-shadow:0 1px 1px rgba(255,248,236,.35) inset,0 6px 18px rgba(53,48,39,.13);
  --ground:linear-gradient(150deg,#C0B4A2,#B3AFA6);
}
/* Notturno - scuro */
:root[data-tema="notturno"]{
  color-scheme: dark;
  --ink:#E7F1F6;  --dim:#8CA6B6;  --bg:#0B1926;
  --surf:#122735; --surf2:#17303F;
  --line:#22404F; --surf-border:#22404F;
  --accent:#3FB2F5; --mint:#08CEB7; --mint-ink:#09DDC4;
  --good:#09DDC4;   --warn:#EDB55E; --bad:#FF7B84;
  --action-info:#5CB8FF; --action-secondary:#C9A7FF; --action-warm:#FF9F7A;
  --control-border:#6A899B; --on-accent:#04121B; --on-good:#04121B; --on-warn:#271D05; --on-bad:#27131A;
  --primary-start:#08CEB7; --primary-end:#3FB2F5; --primary-ink:#04121B;
  --disabled-bg:#203541; --disabled-ink:#A0B4C0; --disabled-border:#6A899B;
  --radius:12px;    --blur:none;
  --card-shadow:0 1px 2px rgba(0,0,0,.34),0 8px 22px rgba(0,0,0,.30);
  --ground:none;
}

/* Ripiego per gli apparati che non sanno sfocare, o non se lo possono
   permettere (DR-049). La sfocatura dietro un pannello e' l'effetto piu'
   caro dell'interfaccia: su un tablet economico si sente. Qui i pannelli
   diventano opachi; palette, spaziature e tipografia non cambiano. */
@supports not (backdrop-filter: blur(2px)){
  :root,:root[data-tema="vetro"]{
    --surf:rgba(255,255,255,.94);
    --surf2:rgba(255,255,255,.80);
    --surf-border:rgba(160,196,214,.55);
    --blur:none;
  }
}
:root[data-solido="1"]:not([data-tema]),:root[data-solido="1"][data-tema="vetro"]{
  --surf:rgba(255,255,255,.94)!important;
  --surf2:rgba(255,255,255,.80)!important;
  --surf-border:rgba(160,196,214,.55)!important;
  --blur:none!important;
}

/* ---------------------------------------------------------------- */
/* 2. Fondamenta                                                    */
/* ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

/* L'attributo hidden e' solo un display:none del browser, e QUALUNQUE
   regola che imposti display lo scavalca in silenzio: .btn e'
   inline-flex, quindi un pulsante nascosto con .hidden restava li',
   visibile e inerte. Costato una segnalazione sul primo modulo a piu'
   passi. Qui vale per tutto il gestionale. */
[hidden]{display:none!important}

html{background:var(--bg)}
body{
  margin:0;min-height:100vh;
  background:var(--ground),var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Gli importi, le quantita' e i codici stanno in un carattere a spaziatura
   fissa: in una colonna di prezzi un '1' largo quanto un '8' e' la
   differenza fra leggere e ricontare. */
.num,.mono{
  font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-variant-numeric:tabular-nums;
}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
/*  I collegamenti semplici (quelli senza classe: le briciole «Negozi ›»,
    i nomi cliccabili nel testo) si vedono di piu' (Alessio, 29/9): sono
    comodi per muoversi e prima sembravano testo. I pulsanti a forma di
    link hanno una classe e non cambiano. */
a:not([class]){font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}
a:not([class]):hover{filter:brightness(1.15)}
/*  Le briciole in testa alla pagina: piu' grandi del testo grigio che le
    circonda, perche' e' da li' che si torna indietro. */
.codice a:not([class]){font-size:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.2}
h1{font-size:26px;font-weight:800}
h2{font-size:19px;font-weight:700}
h3{font-size:15px;font-weight:700}

.dim{color:var(--dim)}
.eyebrow{
  font-size:13.5px;text-transform:uppercase;letter-spacing:.11em;
  font-weight:700;color:var(--dim);
}

/* ---------------------------------------------------------------- */
/* 3. Impaginazione                                                 */
/* ---------------------------------------------------------------- */
/* Fascia dell'ispezione. E' l'unico rosso dell'interfaccia, di proposito:
   deve essere impossibile dimenticarsi di stare dentro i dati di un cliente. */
.ispezione{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 22px;font-size:13.5px;line-height:1.4;
  background:#8C1D2B;color:#FFF1F1;position:sticky;top:0;z-index:40;
}
.ispezione > b{
  font-size:13.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;
  background:rgba(255,255,255,.16);padding:3px 9px;border-radius:999px;flex:none;
}
.ispezione b{color:#fff}
.ispezione .sp{flex:1}
.ispezione button{
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  background:#FFF1F1;color:#8C1D2B;border:none;border-radius:999px;padding:6px 16px;
}
.ispezione button:hover{background:#fff}
.ispezione + .topbar{top:39px}

.topbar{
  /*  Il passo scende da 16 a 12: la barra ha nove figli, quindi otto
      spazi, e quattro pixel a testa sono trentadue pixel - esattamente
      quello che mancava alla settima voce per stare su una riga. */
  display:flex;align-items:center;gap:12px;padding:12px 22px;
  background:var(--surf);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--surf-border);
  position:sticky;top:0;z-index:30;
}
.topbar .logo{height:24px;width:auto;display:block}
/*  Il nome della sede e' la prima cosa da sapere entrando: dice DOVE si
    sta lavorando, e sbagliare sede vuol dire ricaricare il braccialetto
    di un ospite in un'altra struttura. Va nel colore dei valori che
    contano (DR-156), non in quello delle etichette. */
/*  Misurato su 1366: oltre 290 px questo blocco spinge la settima voce
    della barra a capo (misurato: 260). Il nome resta grande; se e'
    lunghissimo si taglia con i puntini - la sede si riconosce dalle prime
    parole, e per esteso c'e' comunque il titolo al passaggio.

    TRAPPOLA GIA' PAGATA: i puntini vogliono `overflow:hidden`, e
    `overflow:hidden` sul CONTENITORE ritaglia tutto quello che ne esce -
    comprese le tendine che si aprono verso il basso. Messo qui, spegneva
    il menu del tema e quello del cambio sede: i due `details` restavano
    aperti, alti 135 px e con lo sfondo giusto, ma tagliati a zero e
    quindi invisibili. Sembrava un pulsante rotto, ed era una riga di CSS
    su un altro elemento.

    Il taglio va quindi sul TESTO, non sulla scatola: `.nome-sede` e il
    sottotitolo si accorciano, il contenitore resta aperto e le tendine
    escono. */
.topbar .sede{font-weight:800;font-size:17px;line-height:1.2;color:var(--mint-ink);
  letter-spacing:-.01em;max-width:260px}
/*  La barra dell'amministratore di struttura ha SEI voci, non sette: i
    260 px qui sopra erano tarati sulla settima, che qui non c'e'. Con
    340 px la riga «<struttura> · amministratore» si legge per intero. */
.topbar.barra-admin .sede{max-width:340px}
.topbar .sede .nome-sede{display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .sede span{display:block;font-weight:500;font-size:13.5px;color:var(--dim);
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .sp{flex:1}

/*  Le voci stanno al centro, fra i due spaziatori. Misurato su 1366: con
    il nome della sede piu' grande le sette voci ci stanno solo
    stringendo i fianchi delle pastiglie da 13 a 10 px - togliere una
    voce non era un'opzione, e rimpicciolire il testo sotto i 13,5 px
    nemmeno (DR-155). */
.nav{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.nav a{
  font-size:13.5px;font-weight:600;text-decoration:none;color:var(--dim);
  padding:7px 10px;border-radius:999px;border:1px solid transparent;
}
.nav a:hover{color:var(--ink);background:var(--surf2)}
.nav a[aria-current="page"]{
  color:var(--ink);background:var(--surf2);border-color:var(--surf-border);
}

.oper{
  display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  background:var(--surf2);border:1px solid var(--surf-border);
  border-radius:999px;padding:4px 6px 4px 4px;text-decoration:none;color:var(--ink);
}
.avatar{
  width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--mint),var(--accent));
  color:#fff;font-size:13.5px;font-weight:800;flex:none;
}
.oper .esci{
  font-size:13.5px;font-weight:600;color:var(--dim);text-decoration:none;
  padding:3px 9px;border-radius:999px;
}
.oper .esci:hover{background:var(--surf);color:var(--bad)}

main{max-width:1100px;margin:0 auto;padding:30px 22px 70px}
.intestazione{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.intestazione .sp{flex:1}

/* ---------------------------------------------------------------- */
/* 4. Schede                                                        */
/* ---------------------------------------------------------------- */
.card{
  background:var(--surf);backdrop-filter:var(--blur);
  border:1px solid var(--surf-border);border-radius:var(--radius);
  box-shadow:var(--card-shadow);padding:22px;
}
.card + .card{margin-top:16px}
/* La sfumatura e' opaca: non cambia la leggibilita' in base a cosa c'e' dietro. */
:root[data-tema="salina"] .card{
  background:linear-gradient(130deg,var(--sand-start),var(--sand-end));
}
:root[data-tema="salina"] .topbar{
  background:linear-gradient(120deg,var(--sand-start),var(--surf2));
}
/* ...ma non dentro una griglia: li' lo spazio lo mette gia' il gap, e
   questo margine in piu' faceva crescere la riga di 16px. La prima carta,
   che il margine non ce l'ha, si stirava per riempirla ed era piu' alta
   delle altre. Un difetto che si vede solo affiancandole. */
.griglia > .card + .card{margin-top:0}
.card > h2{margin-bottom:4px}
.card > .eyebrow{margin-bottom:14px;display:block}

.griglia{display:grid;gap:16px}
.griglia.due{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.griglia.tre{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.dato{display:flex;flex-direction:column;gap:2px}
.dato b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.dato b.num{font-size:24px;font-weight:600}

/* ---------------------------------------------------------------- */
/* 5. Pastiglie di stato                                            */
/* ---------------------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:4px 10px;border-radius:999px;border:1px solid;
  background:var(--surf2);
}
.pill.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.pill.att{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.pill.no{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.pill.neutro{color:var(--dim);border-color:var(--surf-border)}
.pill i{width:6px;height:6px;border-radius:99px;background:currentColor;flex:none}

/* ---------------------------------------------------------------- */
/* 6. Tabelle                                                       */
/* ---------------------------------------------------------------- */
.tabella-wrap{overflow-x:auto;margin:0 -6px;padding:0 6px}
/*  Area di contenuto a scorrimento opt-in. Nasconde soltanto la
    rappresentazione delle barre: touch, rotella, trackpad e tastiera
    continuano a usare l'overflow nativo. Va aggiunta esplicitamente alle
    singole aree dopo aver verificato che titoli e comandi restino fuori. */
.scorrimento-contenuto{
  overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
}
.scorrimento-contenuto::-webkit-scrollbar{display:none;width:0;height:0}
table{border-collapse:collapse;width:100%;font-size:14px}
th{
  text-align:left;font-size:13.5px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:var(--dim);padding:0 12px 9px;white-space:nowrap;
}
td{
  padding:11px 12px;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent);
  vertical-align:middle;
}
tbody tr:hover td{background:var(--surf2)}
td.num,th.num{text-align:right}
.vuoto{padding:34px 12px;text-align:center;color:var(--dim);font-size:14px}

/* ---------------------------------------------------------------- */
/* 7. Moduli                                                        */
/* ---------------------------------------------------------------- */
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{
  font-size:13.5px;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;color:var(--dim);
}
/*  Il vestito dei campi sta sugli ELEMENTI, non su `.campo`.

    Legato alla classe, un campo che nasce FUORI da un `.campo` - la
    ricerca dei clienti, la tendina «quanti per pagina» - si prendeva il
    rettangolo bianco del browser in mezzo a una pagina scura. E si
    notava.

    Il verso giusto e' lo stesso di DR-154 per la selezione del testo:
    si veste tutto e si scopre l'eccezione, invece di elencare i pezzi da
    vestire e dimenticarne sempre uno. Ogni pagina nuova ne porta di suoi.

    Fuori restano le caselle e i pallini: hanno un disegno loro - la leva
    di `.interruttore` - e un fondo con un bordo li deformerebbe. Fuori
    anche i nascosti, che non si vedono per definizione. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
select, textarea{
  font:inherit;font-size:15px;color:var(--ink);
  background:var(--surf2);border:1px solid var(--control-border);
  border-radius:10px;padding:11px 13px;
}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:1}
input:not([type=checkbox]):not([type=radio]):focus,
select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
/*  Le tendine hanno la freccetta del sistema, che su fondo scuro sparisce
    o resta nera. Se ne disegna una nostra e si spegne quella - `appearance`
    va messa anche col prefisso, che Safari la vuole ancora. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),
                      calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
/*  Dentro un `.campo` occupano la riga: e' la colonna che decide la
    larghezza, non il contenuto. Fuori, ognuno si dice la sua. */
.campo input,.campo select,.campo textarea{width:100%}
.campo .aiuto{font-size:13.5px;color:var(--dim);line-height:1.45}

/* Campo password con il pulsante mostra/nascondi.
   Chi digita una password lunga su una tastiera che non conosce ha diritto
   di controllare cosa ha scritto: senza, l'unico responso e' "non corretti". */
.con-occhio{position:relative;display:flex;align-items:center}
.con-occhio input{padding-right:46px}
.occhio{
  position:absolute;right:6px;
  display:grid;place-items:center;width:34px;height:34px;
  background:none;border:none;border-radius:8px;cursor:pointer;
  color:var(--dim);padding:0;
}
.occhio:hover{color:var(--ink);background:var(--surf)}
.occhio:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.altra-porta{
  font-size:13.5px;color:var(--dim);text-align:center;line-height:1.5;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--surf-border);
}
.altra-porta a{color:var(--accent);font-weight:600}

.btn{
  font:inherit;font-size:var(--font-comando,14px);font-weight:600;cursor:pointer;
  padding:11px 18px;border-radius:10px;
  border:1px solid var(--control-border);background:var(--fondo-comando,var(--surf2));color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{border-color:var(--accent)}
.btn.primario{
  border:none;color:var(--primary-ink);font-weight:700;font-size:var(--font-comando-forte,15px);padding:13px 20px;
  background:linear-gradient(135deg,var(--primary-start),var(--primary-end));
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 32%,transparent);
  justify-content:center;
}
.btn.primario:hover{filter:brightness(.96)}
/* Spento non significa illeggibile. Fondo neutro e bordo tratteggiato,
   mai opacità sull'intero comando. Specificità sufficiente anche per i
   pulsanti della cassa, senza alterarne disabled o i relativi controlli. */
:root :is(button,.btn,.mini):disabled,
:root[data-tema] :is(button,.btn,.mini):disabled,
:root[data-tema] :is(.btn,.mini)[aria-disabled="true"]{
  opacity:1;cursor:not-allowed;color:var(--disabled-ink);
  background:var(--disabled-bg);background-image:none;
  border:1px dashed var(--disabled-border);box-shadow:none;text-shadow:none;filter:none;
}
:root[data-tema] :is(button,.btn,.mini):disabled small{opacity:1;color:inherit}

/* ---------------------------------------------------------------- */
/* 8. Avvisi                                                        */
/* ---------------------------------------------------------------- */
.avviso{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;border-radius:11px;font-size:14px;line-height:1.5;
  border:1px solid;margin-bottom:16px;background:var(--surf2);
}
.avviso b{display:block;font-weight:700;margin-bottom:1px}
.avviso.err{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 38%,transparent)}
.avviso.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 38%,transparent)}
.avviso.info{color:var(--ink);border-color:var(--surf-border)}
.avviso.info .eyebrow{color:var(--dim)}

/* ---------------------------------------------------------------- */
/* 9. Accesso                                                       */
/* ---------------------------------------------------------------- */
.accesso{min-height:100vh;display:grid;place-items:center;padding:34px 20px}
.accesso .card{width:100%;max-width:380px;padding:30px}
.accesso .logo{height:32px;width:auto;display:block;margin:0 auto 22px}
.accesso form{display:flex;flex-direction:column;gap:15px}
.accesso .nota{
  font-size:13.5px;color:var(--dim);text-align:center;line-height:1.5;
  margin:4px 0 0;
}

/* DR-307: stesso pannello grande prima e dopo un errore. Lo spazio del
   messaggio e' gia' riservato; testi lunghi restano liberi di crescere. */
.accesso-gestionale .centro{width:100%;min-width:0}
.accesso-gestionale .card{max-width:334px}
.accesso-gestionale .messaggi-accesso{min-height:65px}
.accesso-gestionale .messaggi-accesso .avviso{margin:0}
.accesso-gestionale .messaggi-accesso .avviso + .avviso{margin-top:8px}
@media(max-width:480px){
  .accesso-gestionale .messaggi-accesso{min-height:86px}
}

/* ---------------------------------------------------------------- */
/* 10. Pie' di pagina                                               */
/* ---------------------------------------------------------------- */
.piede{
  max-width:1100px;margin:0 auto;padding:0 22px 30px;
  font-size:13.5px;color:var(--dim);display:flex;gap:14px;flex-wrap:wrap;
}
.piede .sp{flex:1}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --------------------------------------------------------------------
   Cambio di sede e di struttura (migrazione 009).
   Compare solo a chi ha davvero piu' di una scelta: con una sede sola
   la parola "sede" non deve nemmeno apparire (DR-076).
   -------------------------------------------------------------------- */
/*  Blocco, non riga: cosi' il nome della sede tiene la sua riga e il
    cambio sede va sotto. In linea, con il taglio a 260 px, i due finivano
    sulla stessa riga e a essere tagliato era il nome - cioe' l'unica cosa
    che si doveva vedere. */
.sede .passa { position: relative; display: block; }
.sede .passa > summary {
  cursor: pointer; list-style: none; border-radius: 8px;
  padding: 2px 20px 2px 6px; margin-left: -6px;
}
.sede .passa > summary::-webkit-details-marker { display: none; }
.sede .passa > summary::after {
  content: ""; position: absolute; right: 7px; top: 50%;
  width: 5px; height: 5px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.sede .passa[open] > summary { background: var(--velo, rgba(0,0,0,.05)); }
.sede .passa > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sede .passa .menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: -6px;
  min-width: 200px; padding: 8px; border-radius: 12px;
  background: var(--surf); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.sede .passa .menu p {
  margin: 2px 8px 8px; font-size:13.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); font-weight: 700;
}
.sede .passa .menu form { display: block; }
.sede .passa .menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--ink);
}
.sede .passa .menu button:hover { background: var(--velo, rgba(0,0,0,.05)); }
.sede .passa .menu button[aria-current] { font-weight: 700; color: var(--accent); }

/* ---------------------------------------------------------------- */
/* Una voce di barra con la sua freccetta                           */
/* ---------------------------------------------------------------- */
/* La voce resta un link e si preme come sempre; accanto, una freccetta
   apre i comandi RARI di quella pagina - quelli che si usano una volta
   nella vita di una struttura. Tenerli nella testata della pagina
   voleva dire dare a un comando che si preme una volta lo stesso posto
   di quelli che si premono cento volte, e uno dei due cancella.

   Stessa meccanica del menu del tema (`details`/`summary`, niente
   JavaScript per aprirlo): un pattern in piu' e' una cosa in piu' da
   imparare, e questa barra ne ha gia' uno che funziona. */
.voce-con-menu { position: relative; display: inline-flex; align-items: center; }
.voce-con-menu > .passa { position: static; display: inline-flex; }
.voce-con-menu > .passa > summary {
  cursor: pointer; list-style: none; position: relative;
  width: 18px; height: 22px; border-radius: 6px;
}
.voce-con-menu > .passa > summary::-webkit-details-marker { display: none; }
/* La freccetta e' disegnata, non scritta: un carattere «▾» cambia forma
   e allineamento da un sistema all'altro, e in barra si vede. */
.voce-con-menu > .passa > summary::after {
  content: ""; position: absolute; left: 5px; top: 50%;
  width: 5px; height: 5px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .6;
}
.voce-con-menu > .passa > summary:hover::after { opacity: 1; }
.voce-con-menu > .passa[open] > summary::after { opacity: 1; }
.voce-con-menu > .passa > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.voce-con-menu .menu {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0;
  min-width: 250px; padding: 8px; border-radius: 12px;
  background: var(--surf); border: 1px solid var(--line); box-shadow: var(--shadow);
}
/* Le voci della tendina si scrivono tutte allo stesso modo, che siano
   pulsanti o collegamenti. «Varianti» è un <a> perché porta a una
   pagina, gli altri sono <button> perché aprono una finestra: è una
   differenza che conta per il browser e per chi naviga da tastiera, e
   non deve contare per niente per chi guarda. Scritta solo sui
   <button>, questa regola lasciava «Varianti» blu e sottolineata in
   mezzo a quattro righe nere - sembrava un'altra cosa. */
.voce-con-menu .menu button,
.voce-con-menu .menu a {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 9px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink); white-space: nowrap;
  text-decoration: none;
}
.voce-con-menu .menu button:hover,
.voce-con-menu .menu a:hover { background: var(--velo, rgba(0,0,0,.05)); }
.voce-con-menu .menu a[aria-current] { font-weight: 700; color: var(--accent); }
/* La riga che separa il «vai a» dal «fai»: sottile, del colore dei
   bordi, senza margini laterali - divide, non decora. */
.voce-con-menu .menu hr {
  border: none; border-top: 1px solid var(--line); margin: 6px 4px;
}

/* ---------------------------------------------------------------- */
/* Cruscotto della sede                                             */
/* ---------------------------------------------------------------- */
/* L'area dei negozi: a sinistra l'insieme, a destra il singolo. Con
   un negozio solo la divisione sparisce da se' - la colonna di sinistra
   resta, ma non c'e' niente da confrontare e la tabella e' corta. */
.cruscotto-negozi{display:grid;grid-template-columns:250px 1fr;gap:0}
.cn-insieme{padding-right:20px;border-right:1px solid var(--surf-border)}
.cn-singolo{padding-left:20px;min-width:0}
@media (max-width:820px){
  .cruscotto-negozi{grid-template-columns:1fr}
  .cn-insieme{padding:0 0 16px;border-right:none;border-bottom:1px solid var(--surf-border)}
  .cn-singolo{padding:16px 0 0}
}
.cn-insieme .num{font-size:32px;font-weight:600;display:block;line-height:1.1}
.cn-insieme .num.presto{color:var(--dim);opacity:.5}
.cn-reali{margin-top:20px;padding-top:16px;border-top:1px solid var(--surf-border);
  display:flex;flex-direction:column;gap:10px}
.cn-reali .num{font-size:20px;display:inline;margin-right:8px}
.cn-reali span{font-size:13.5px;color:var(--dim)}

/* La pastiglia che dice «non ancora, e da quando». Tratteggiata: si
   distingue a colpo d'occhio da cio' che funziona davvero. */
.fase-nota{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:13.5px;color:var(--dim);border:1px dashed var(--surf-border);
  border-radius:999px;padding:1px 8px;white-space:nowrap;vertical-align:middle}

.porte{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.porta{flex:1 1 240px;background:var(--surf);border:1px solid var(--surf-border);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--card-shadow)}
.porta.spenta{opacity:.72;border-style:dashed;box-shadow:none;background:var(--surf2)}
.porta b{font-size:16px}
.porta span.dim{display:block;margin-top:5px;font-size:13.5px}

.in-arrivo{background:var(--surf2);border:1px dashed var(--surf-border);
  border-radius:12px;padding:12px 14px}
.in-arrivo span.dim{display:block;margin-top:4px;font-size:13.5px}

/* Voce di menu non ancora attiva: si vede che c'e' e che non si clicca.
   Prende la stessa forma delle altre - senza, le voci si appiccicano
   fra loro e si leggono come una parola sola. */
.nav .presto{
  font-size:13.5px;font-weight:600;color:var(--dim);opacity:.45;
  padding:7px 13px;border-radius:999px;border:1px dashed var(--surf-border);
  cursor:default;
}

/* =====================================================================
   L'AREA DELL'AMMINISTRATORE DI STRUTTURA
   e le due schermate d'ingresso (accesso, scelta della sede).

   Tutto quello che sta qui sotto usa le stesse variabili di sopra: sul
   tema Notturno cambiano i valori, non le regole. Una classe che
   nominasse un colore invece di una variabile funzionerebbe su un tema
   solo, e si scoprirebbe cambiando tema - cioe' tardi.
   ===================================================================== */

/* ---------------------------------------------------------------- */
/* Ingresso: marchio in alto a sinistra, pannello al centro         */
/* ---------------------------------------------------------------- */
.accesso .marchio{padding:26px 30px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.accesso .marchio img{height:30px;width:auto;display:block}
.accesso .marchio .claim{
  flex-basis:100%;font-size:13.5px;color:var(--dim);
  letter-spacing:.02em;font-weight:500;margin-top:-2px;
}
.accesso .marchio .chi{margin-left:auto;font-size:13.5px;color:var(--dim)}
.accesso .centro{flex:1;display:grid;place-items:center;padding:0 20px 40px}
.accesso h2{margin-bottom:20px}
.accesso .sotto{font-size:13.5px;color:var(--dim);margin:-16px 0 20px}

/* La versione in fondo, sotto una riga. E' la prima domanda
   dell'assistenza al telefono, e questa e' l'unica pagina che si vede
   senza essere entrati. */
.accesso .versione{
  margin:0;padding:16px 30px 26px;border-top:1px solid var(--surf-border);
  display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--dim);
}
.accesso .versione .sp{flex:1}

.come-link{
  font:inherit;font-size:13.5px;background:none;border:none;cursor:pointer;
  color:var(--accent);padding:0;text-decoration:underline;
}

/* Scelta della struttura o della sede: righe grandi, un bersaglio solo */
.elenco-scelte{display:flex;flex-direction:column;gap:12px}
.elenco-scelte form{display:block}
.scelta{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  cursor:pointer;font:inherit;color:var(--ink);
  background:var(--surf2);border:1px solid var(--surf-border);
  border-radius:var(--radius);padding:14px 16px;
}
.scelta:hover{border-color:var(--accent)}
.scelta .sp{flex:1;min-width:0}
.scelta b{font-size:16px;font-weight:700;display:block;letter-spacing:-.02em}
.scelta .riga2{display:block;font-size:13.5px;color:var(--dim);margin-top:2px}
.scelta .freccia{color:var(--dim);font-size:20px;flex:none;line-height:1}
.scelta.grande{
  background:var(--surf);box-shadow:var(--card-shadow);padding:18px 20px;
}
.scelta.grande b{font-size:17px}
.scelta-sede .dentro{width:100%;max-width:620px}
.scelta-sede h1{margin-bottom:4px}

/* ---------------------------------------------------------------- */
/* Impaginazione delle pagine di amministrazione                    */
/* ---------------------------------------------------------------- */
.topbar .sede .ruolo{display:block;font-weight:500;font-size:13.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sezione{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.sezione:first-of-type{margin-top:0}
.testata{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.testata .sp{flex:1}
.testata .spiega{font-size:13.5px;color:var(--dim)}
.intestazione .codice{font-size:13.5px;color:var(--dim);margin:4px 0 0}
.intestazione .codice b{color:var(--ink);font-weight:600}
.card.stretta{padding:18px 20px}
.card.vuoto-vero{padding:26px 22px}
.card.vuoto-vero b{font-size:16px;display:block;margin-bottom:6px}
.card.vuoto-vero p{margin:0;font-size:14px;line-height:1.55}

/* Quello che chiede di essere fatto. Questa riga deve essere vuota
   quasi sempre: un riquadro che dice «tutto a posto» dopo due giorni
   non lo legge piu' nessuno, e con lui non si legge piu' nemmeno il
   giorno in cui c'e' scritto qualcosa. */
.attenzione{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.riga-avviso{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:12px 15px;border-radius:11px;font-size:14px;line-height:1.45;
  border:1px solid;background:var(--surf2);
}
.riga-avviso .sp{flex:1;min-width:60px}
.riga-avviso .segno{
  font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;flex:none;
}
.riga-avviso.att{border-color:color-mix(in srgb,var(--warn) 38%,transparent)}
.riga-avviso.att .segno{color:var(--warn)}
.riga-avviso.no{border-color:color-mix(in srgb,var(--bad) 38%,transparent)}
.riga-avviso.no .segno{color:var(--bad)}

/* ---------------------------------------------------------------- */
/* I riquadri: un servizio in licenza, oppure una sede              */
/* ---------------------------------------------------------------- */
.servizi{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.servizio{
  background:var(--surf);border:1px solid var(--surf-border);
  border-radius:var(--radius);box-shadow:var(--card-shadow);
  padding:0;display:flex;flex-direction:column;overflow:hidden;
}
.servizio header{padding:16px 18px 12px;display:flex;gap:12px;align-items:flex-start}
.servizio header .sp{flex:1;min-width:0}
.servizio .tipo{
  font-size:13.5px;text-transform:uppercase;letter-spacing:.11em;
  font-weight:700;color:var(--dim);
}
.servizio h3{font-size:17px;margin-top:3px}
.servizio h3.vuoto{color:var(--warn)}
.servizio .corpo{padding:0 18px 14px;display:flex;flex-direction:column}
.servizio footer{
  margin-top:auto;padding:11px 18px;background:var(--surf2);
  border-top:1px solid var(--surf-border);display:flex;gap:8px;flex-wrap:wrap;
}
/* Un negozio che non vende resta leggibile: i suoi dati ci sono tutti,
   e il gestore ci deve poter guardare dentro (DR-103). Si smorza, non
   si spegne. */
.servizio.fermo{opacity:.74}

.riga{
  display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px;
  border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.riga .sp{flex:1;min-width:0}
.riga .val{font-weight:600;font-size:14px}
.riga .val.piccolo,.mono.piccolo{font-size:13.5px}

/* ---------------------------------------------------------------- */
/* Mezzi di pagamento                                                */
/* ---------------------------------------------------------------- */
.mezzi{display:flex;gap:10px;flex-wrap:wrap}
.mezzo{
  display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  background:var(--surf2);border:1px solid var(--surf-border);
  border-radius:999px;padding:7px 15px;
}
.mezzo i{width:7px;height:7px;border-radius:99px;background:var(--good);flex:none}
.mezzo.spento{color:var(--dim);border-style:dashed;font-weight:500}
.mezzo.spento i{background:var(--dim);opacity:.5}

/* ---------------------------------------------------------------- */
/* Pulsanti piccoli dentro i riquadri e le tabelle                  */
/* ---------------------------------------------------------------- */
.mini{
  font:inherit;font-size:var(--font-comando-mini,13.5px);font-weight:600;color:var(--ink);cursor:pointer;
  padding:5px 11px;border-radius:999px;border:1px solid var(--control-border);
  background:var(--fondo-comando,transparent);text-decoration:none;display:inline-flex;align-items:center;
}
.mini:hover{color:var(--ink);border-color:var(--accent)}
.mini.forte{color:var(--ink)}
.mini.pericolo:hover{color:var(--bad);border-color:var(--bad)}
.mini.cassa-disattiva{color:var(--bad);border-color:var(--bad)}
.mini.spento{color:var(--disabled-ink);background:var(--disabled-bg);opacity:1;border:1px dashed var(--disabled-border);cursor:default}
.mini.spento:hover{border-color:var(--disabled-border);color:var(--disabled-ink)}
/*  L'azione che INVITA, quando la riga esiste proprio perche' la si
    faccia: «metti a listino» su un articolo che a listino non c'e'.

    Un `.mini` normale e' grigio su grigio - e' giusto per «modifica»,
    «spegni», le cose che stanno li' in attesa - ma a colpo d'occhio si
    legge DISABILITATO, e chi guarda la riga pensa di non poterci fare
    niente. Questa prende l'asola e il testo del verde dell'interfaccia:
    resta un pulsantino di riga, ma si vede che si preme. */
.mini.invita{color:var(--mint-ink);border-color:var(--mint);
  background:color-mix(in srgb, var(--mint) 12%, transparent)}
.mini.invita:hover{color:var(--ink);border-color:var(--mint-ink);
  background:color-mix(in srgb, var(--mint) 22%, transparent)}
.btn.piccolo{font-size:var(--font-comando-mini,13.5px);padding:6px 12px;border-radius:8px}
.btn.primario.stretto{font-size:var(--font-comando,14px);padding:11px 20px}

td.azioni{text-align:right;white-space:nowrap}
td.azioni .mini + .mini{margin-left:6px}

/*  Le pagine di amministrazione stanno su una workstation, non al banco:
    la tabella delle persone ha sette colonne e l'ultima e' fatta di
    pulsanti. In 1100 px non ci sta, e quello che avanza finiva dietro a
    una barra di scorrimento orizzontale - il modo peggiore di nascondere
    delle colonne, perche' a essere nascosta era proprio quella con i
    comandi. */
body.admin main{max-width:1400px}

/*  LE PAGINE A PANNELLO PRENDONO TUTTO LO SCHERMO.

    Il tetto di 1400 ha senso per una pagina che si legge - la tabella
    delle persone, il registro - dove una riga larga due metri non si
    segue con l'occhio. Le due pagine `schermo-pieno` (Catalogo e
    Varianti) non si leggono: sono due pannelli affiancati che non
    scorrono, e ogni pixel in piu' e' una riga in piu' visibile senza
    scorrere. Su un monitor grande il tetto lasciava mezzo schermo vuoto
    ai lati e gli elenchi corti al centro. */
/*  E il `margin:0 auto` di `main` va tolto insieme al tetto: in un
    corpo che è una colonna flex, un margine automatico sul lato corto
    NON centra un blocco largo quanto la finestra - impedisce che si
    allarghi, e il blocco resta della larghezza del suo contenuto. Tolto
    il tetto e lasciato il margine, la pagina restava larga uguale e
    sembrava che la regola non avesse funzionato. */
body.schermo-pieno main{max-width:none;margin:0}

/*  L'ALBERO NON SI FA VEDERE MENTRE SI SISTEMA.

    Il server manda tutte le righe visibili - non sa quali rami il
    browser tiene aperti, quello sta in `sessionStorage` - e `albero.js`
    ne nasconde due terzi appena parte. Fra il primo disegno e quel
    momento si vedono settantanove righe al posto di ventitre', e poi
    l'elenco si accorcia di colpo: e' il salto che si vede a ogni clic
    sull'albero, perche' ogni clic ricarica la pagina davvero. Misurato:
    0,272 di spostamento, quando 0,25 e' gia' considerato pessimo.

    La classe la mette uno script in riga dentro la pagina - quindi
    prima che si disegni - e `albero.js` la toglie quando ha finito.
    `visibility` e non `display`: la scatola resta della sua altezza, e
    non si muove nemmeno il resto della colonna. Senza JavaScript la
    classe non viene mai messa, e l'albero si vede normalmente. */
.albero-in-arrivo [data-albero]{visibility:hidden}

/*  E NEMMENO LA SUA BARRA DI SCORRIMENTO.

    `visibility:hidden` nasconde le righe ma NON la barra: la scatola e'
    alta duemilaseicento pixel di contenuto anche mentre e' nascosta, e
    la barra si disegna lo stesso. Quando la pagina si dipinge - e cioe'
    prima che `albero.js` parta, perche' e' `defer` - quella barra sta in
    cima, allo zero, perche' nessuno ha ancora rimesso lo scorrimento
    dov'era: si vede il cursore saltare su per un istante e poi tornare
    giu'. E' il tremolio che restava dopo aver tolto tutti gli altri, e
    si vede solo quando la macchina dipinge prima che lo script parta -
    per questo capitava «non sempre».

    Il colore trasparente e non `overflow:hidden`: togliere lo
    scorrimento toglierebbe anche il posto che `scrollbar-gutter` tiene
    occupato, e il contenuto si allargherebbe di quindici pixel per un
    istante - un tremolio al posto dell'altro. Cosi' invece non cambia
    niente nella misura: la barra c'e', occupa il suo posto, e per quel
    momento non si vede. La riga `::-webkit-` fa la stessa cosa sui
    browser che non conoscono ancora `scrollbar-color`. */
.albero-in-arrivo [data-albero]{scrollbar-color:transparent transparent}
.albero-in-arrivo [data-albero]::-webkit-scrollbar-thumb{background:transparent}

/*  E LO STESSO VALE PER GLI ELENCHI CHE SI RITROVANO DOV'ERANO.

    Un elenco che ricorda la sua posizione viene disegnato in cima e
    rimesso al suo posto un decimo di secondo dopo: misurato, disegnato
    a 0 al fotogramma 514 ms e a 1440 al fotogramma 612. Non e' un
    difetto dello script - e' che il browser dipinge mentre legge la
    pagina, e a quel momento la riga che rimette la posizione non l'ha
    ancora letta.

    Quindi l'elenco resta invisibile finche' non e' a posto, e si
    scopre da solo (`data-pronto`) appena lo e': non tutti insieme alla
    fine, ma uno per uno, appena ciascuno e' pronto. La classe la mette
    uno script in testa alla pagina SOLO se c'e' davvero qualcosa da
    rimettere - se l'elenco parte dall'alto non c'e' niente da
    nascondere, e infatti la stragrande maggioranza delle volte non
    succede niente. */
.liste-in-arrivo [data-scorri]:not([data-albero]):not([data-pronto]){visibility:hidden}

/*  IL POSTO DELLA BARRA DI SCORRIMENTO RESTA SEMPRE OCCUPATO.

    Un elenco che si accorcia perde la barra, e senza la barra il
    contenuto si allarga di colpo di quindici pixel: e' il tremolio
    ORIZZONTALE che si vedeva a ogni clic sull'albero, e solo qualche
    volta - esattamente quando il numero di righe attraversa l'altezza
    della scatola. Sull'albero succede a ogni ricaricamento, perche' le
    righe passano da settantanove a ventitre'.

    `scrollbar-gutter` tiene il posto anche quando la barra non c'e':
    quindici pixel di margine sempre, e niente che si sposta. Meglio di
    `overflow-y:scroll`, che la barra la mostrerebbe sempre anche vuota.

    Vale per tutte le scatole che scorrono di queste pagine: i due
    elenchi, l'albero, le scelte dentro la scheda e le domande
    agganciate. */
.elenco,[data-scorri],.tabella-lista{scrollbar-gutter:stable}

/*  L'elenco che scorre da solo.

    Regola: scorre la LISTA, non la pagina e non l'intestazione. Se le
    righe diventano trenta, si scorre dentro il riquadro e i nomi delle
    colonne restano in cima - una tabella lunga di cui non si vede piu'
    l'intestazione si legge contando le colonne con il dito.

    Niente barra orizzontale: `overflow-x:hidden`. Non taglia niente,
    perche' i pulsanti dell'ultima colonna adesso vanno a capo invece di
    allargare la riga all'infinito. */
.tabella-lista{overflow-x:hidden;max-height:62vh;overflow-y:auto}
.tabella-lista td.azioni{white-space:normal}
.tabella-lista td.azioni .mini{margin:2px 0 2px 6px}
.tabella-lista td.azioni .mini + .mini{margin-left:6px}
/*  L'intestazione ferma vuole uno sfondo OPACO, se no le righe le
    passano sotto e si leggono attraverso. Su Notturno e Salina `--surf`
    e' gia' pieno; su Vetro e' semitrasparente, quindi sotto ci va il
    colore della pagina: i due strati insieme danno esattamente la tinta
    che il riquadro ha gia'. */
.tabella-lista thead th{
  position:sticky;top:0;z-index:1;padding-top:4px;
  background-color:var(--bg);
  background-image:linear-gradient(var(--surf),var(--surf));
}
tr.spenta td{color:var(--dim)}

/* ---------------------------------------------------------------- */
/* La finestra a due passi                                          */
/* ---------------------------------------------------------------- */
body.fermo{overflow:hidden}
.velo{
  position:fixed;inset:0;z-index:80;background:rgba(4,12,20,.72);
  display:grid;place-items:center;padding:24px;
}
.modale{
  width:100%;max-width:490px;background:var(--surf);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden;
  max-height:calc(100vh - 60px);display:flex;flex-direction:column;
}
/* Piu' larga, per le finestre con due gruppi di campi affiancati (la
   pagina lo chiede con data-largo="1" sul template). A 490 px il
   secondo gruppo finirebbe sotto il bordo, e si scorrerebbe per
   scoprire che esiste. Sotto i 900 torna stretta e i gruppi si
   impilano: e' il portatile, e li' la larghezza non c'e'. */
.modale.larga{max-width:1180px}
/*  (30/9) Le finestre con uno o due campi corti - i tempi del catalogo -
    non hanno bisogno di mezzo schermo: piu' strette si leggono meglio. */
.modale.stretta{max-width:400px}
/*  (109, Alessio 8/10) «Nuovo account» in orizzontale: due colonne, chi e'
    a sinistra e cosa puo' fare a destra; niente barra di scorrimento. */
.modale.larga:has(.na-due){max-width:980px}
.na-due{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.na-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.na-col .spunte[data-solo-operatore]{margin-top:0 !important}
.na-col .spunta{min-height:40px}
@media (max-width:900px){.na-due{grid-template-columns:1fr}}
@media (max-width:900px){.modale.larga{max-width:520px}}
.modale > header{
  padding:20px 24px 14px;border-bottom:1px solid var(--surf-border);
  display:flex;gap:12px;align-items:flex-start;
}
.modale > header .sp{flex:1}
.modale .passo{
  display:block;margin-bottom:3px;font-size:13.5px;text-transform:uppercase;
  letter-spacing:.11em;font-weight:700;color:var(--dim);
}
.modale .contenuto{padding:22px 24px;display:flex;flex-direction:column;gap:16px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.modale > footer{
  padding:14px 24px 18px;border-top:1px solid var(--surf-border);
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;background:var(--surf2);
}
.modulo-modale{display:flex;flex-direction:column;gap:16px}
.modulo-modale .spiega{margin:0;font-size:13.5px;line-height:1.5}
.chiudi{
  font:inherit;background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:22px;line-height:1;padding:2px 6px;border-radius:8px;flex:none;
}
.chiudi:hover{color:var(--ink);background:var(--surf2)}

/* Il riepilogo del secondo passo. Non e' un «sei sicuro?»: quello si
   clicca senza leggerlo, ed e' peggio di niente perche' fa credere che
   ci sia una protezione. Qui ci sono i valori veri appena scritti. */
.riepilogo{
  background:var(--surf2);border:1px solid var(--surf-border);
  border-radius:12px;padding:2px 16px;
}
.riepilogo dl{margin:0}
.riepilogo div{
  display:flex;gap:14px;align-items:baseline;padding:10px 0;
  border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.riepilogo div:first-child{border-top:none}
.riepilogo dt{
  font-size:13.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  color:var(--dim);flex:none;width:130px;
}
.riepilogo dd{margin:0;font-size:14.5px;font-weight:600;flex:1;word-break:break-word}
/*  (29/9) Nelle finestre larghe lo spazio c'e': l'etichetta sta su una
    riga sola (prima «Credito minimo per fruire del servizio» andava su
    quattro) e le righe sono piu' basse, cosi' il riepilogo di un servizio
    si legge tutto senza scorrere. */
.modale.larga .riepilogo div{padding:6px 0}
.modale.larga .riepilogo dt{width:340px;white-space:nowrap;font-size:12.5px}
.modale.larga .riepilogo dd{font-size:14px}
/*  E niente barra di scorrimento nelle finestre larghe (Alessio, 29/9):
    il contenuto ci sta, e se su uno schermo basso non ci stesse si scorre
    lo stesso con la rotella. */
.modale.larga .contenuto{scrollbar-width:none}
.modale.larga .contenuto::-webkit-scrollbar{display:none}

/* La conseguenza: cosa succede, e cosa non si torna indietro. */
.conseguenza{
  display:flex;gap:11px;align-items:flex-start;padding:13px 15px;
  border-radius:11px;font-size:13.5px;line-height:1.5;border:1px solid;
  background:var(--surf2);color:var(--ink);
}
.conseguenza b{display:block;margin-bottom:2px}
.conseguenza.att{border-color:color-mix(in srgb,var(--warn) 38%,transparent)}
.conseguenza.att b{color:var(--warn)}
.conseguenza.no{border-color:color-mix(in srgb,var(--bad) 42%,transparent)}
.conseguenza.no b{color:var(--bad)}

/* ---------------------------------------------------------------- */
/* La password che si consegna                                      */
/* ---------------------------------------------------------------- */
/* Sta in cima alla pagina e non in una finestra: una finestra si
   chiude per riflesso, e con lei se ne andrebbe l'unica copia. */
.consegna{
  background:var(--surf);border:1px solid color-mix(in srgb,var(--mint-ink) 45%,transparent);
  border-radius:var(--radius);box-shadow:var(--card-shadow);
  padding:20px 22px;margin-bottom:22px;display:flex;flex-direction:column;gap:14px;
}
.consegna .testata{display:block}
.consegna h2{margin-top:2px}
.consegna .coppia{display:flex;gap:34px;flex-wrap:wrap}
.consegna .coppia b{display:block;font-size:17px;font-weight:600;margin-top:2px}
.consegna .coppia b.grande{font-size:22px;color:var(--mint-ink);letter-spacing:.04em}
.consegna p{margin:0;font-size:13.5px;line-height:1.5}

/* ---------------------------------------------------------------- */
/* Il piede di pagina legale                                        */
/* ---------------------------------------------------------------- */
/* Sta in fondo alla FINESTRA, non in fondo al contenuto: la pagina
   d'accesso e' una colonna flex e il pannello resta al centro, quindi
   questa riga non lo spinge mai sotto la piega (DR-094 - la misura e'
   1366x768, cioe' 648 pixel utili).

   Testo piccolo, bersagli no (DR-098): sui monitor del settore si clicca
   col dito, e sotto i 44 pixel si apre «Cookie» volendo «Privacy». Il
   padding verticale e' quello che porta ogni voce all'altezza giusta -
   togliendolo si risparmiano 20 pixel e si perde il senso della riga. */
.piede-legale{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  padding:6px 24px 14px;min-height:44px;
  font-size:13.5px;color:var(--dim);
}
.piede-legale a{
  color:var(--dim);
  /* Sempre sottolineato, mai solo al passaggio del mouse: su un touch il
     passaggio del mouse non esiste, quindi un collegamento che si
     annuncia cosi' non si annuncia mai. */
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  padding:12px 10px;border-radius:8px;
  display:inline-flex;align-items:center;min-height:44px;
}
/* Il verde del marchio come testo da 1,5:1 e non si legge (DR-048):
   qui si usa --mint-ink, che e' la stessa tinta portata a 4,5:1. */
.piede-legale a:hover{color:var(--mint-ink)}
.piede-legale a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Il separatore non e' un bersaglio e non si legge ad alta voce. */
.piede-legale .sep{opacity:.5;padding:0 2px;user-select:none}
.piede-legale .sp{flex:1;min-width:12px}
.piede-legale .versione{font-size:13.5px;white-space:nowrap;padding:12px 0}

/* Su finestra stretta la versione va a capo sotto le voci e la riga
   resta centrata: e' l'unico punto in cui l'ordine cambia. */
@media (max-width:560px){
  .piede-legale{justify-content:center;padding-left:14px;padding-right:14px}
  .piede-legale .sp{flex-basis:100%;height:0;min-width:0}
}

/* ---------------------------------------------------------------- */
/* Le pagine legali                                                 */
/* ---------------------------------------------------------------- */
.pagina-legale .marchio{padding:26px 30px}
.pagina-legale .marchio img{height:26px;width:auto;display:block}
.pagina-legale .centro{align-items:start;padding-top:8px}
.documento{
  width:100%;max-width:640px;
  background:var(--surf);border:1px solid var(--surf-border);
  border-radius:var(--radius);box-shadow:var(--card-shadow);padding:30px 34px;
}
.documento h1{margin:4px 0 16px;font-size:24px}
/* Il testo lungo si legge su una colonna stretta: oltre i 70 caratteri
   l'occhio perde la riga di ritorno. */
.documento .corpo{margin:0 0 14px;font-size:15px;line-height:1.65;max-width:62ch}
.documento .chi-firma{
  margin:0 0 18px;padding:12px 15px;font-size:13.5px;line-height:1.5;
  background:var(--surf2);border:1px solid var(--surf-border);border-radius:11px;
}
.documento .quando{
  margin:20px 0 0;padding-top:14px;border-top:1px solid var(--surf-border);
  font-size:13.5px;color:var(--dim);
}
.documento .altra-porta{margin-top:14px;text-align:left}

/* ---------------------------------------------------------------- */
/* I poteri del responsabile di sede (DR-126)                       */
/* ---------------------------------------------------------------- */
/* Dieci interruttori in fila si leggono male; tre gruppi da tre o
   quattro si leggono. Il raggruppamento non e' decorazione: e' l'unica
   cosa che rende la domanda «chi puo' stornare una riga?» una domanda a
   cui si risponde guardando. */
.poteri{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.gruppo-poteri{
  background:var(--surf);border:1px solid var(--surf-border);
  border-radius:var(--radius);box-shadow:var(--card-shadow);padding:16px 18px;
}
.gruppo-poteri > .eyebrow{display:block;margin-bottom:10px}
.gruppo-poteri ul{list-style:none;margin:0;padding:0}
.gruppo-poteri li{
  display:flex;gap:11px;align-items:flex-start;padding:11px 0;
  border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.gruppo-poteri li:first-child{border-top:none}
.gruppo-poteri li .sp{flex:1;min-width:0}
.gruppo-poteri li b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.gruppo-poteri li .dim{display:block;font-size:13.5px;line-height:1.45;margin-top:2px}
/* Il segno vale piu' del colore: su un elenco lungo il verde e il grigio
   si confondono, un ✓ e un ✕ no - e chi non distingue i colori legge
   comunque. */
.segno-potere{
  flex:none;width:20px;text-align:center;font-size:14px;font-weight:700;
  line-height:1.5;
}
.gruppo-poteri li.si  .segno-potere{color:var(--good)}
.gruppo-poteri li.no  .segno-potere{color:var(--dim);opacity:.6}
.gruppo-poteri li.no b{color:var(--dim)}
.gruppo-poteri li .pill,.gruppo-poteri li .fase-nota{flex:none;margin-top:1px}

/* L'interruttore dentro la finestra */
.campo-poteri{display:flex;flex-direction:column;gap:2px}
.campo-poteri > .eyebrow{display:block;margin-bottom:6px}
.interruttore{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  padding:10px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.campo-poteri .interruttore:first-of-type{border-top:none}
.interruttore .sp{flex:1;min-width:0}
.interruttore b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.interruttore .dim{display:block;font-size:13.5px;line-height:1.45;margin-top:2px}
/* La casella vera resta nel modulo - e' lei che viene inviata - ma non
   si vede: si vede la leva. Nasconderla con display:none la toglierebbe
   anche dalla tastiera. */
.interruttore input{
  position:absolute;opacity:0;width:0;height:0;
}
.leva{
  flex:none;width:38px;height:22px;border-radius:999px;margin-top:1px;
  background:var(--surf2);border:1px solid var(--surf-border);
  position:relative;transition:background .12s,border-color .12s;
}
.leva::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:999px;background:var(--dim);transition:transform .12s,background .12s;
}
.interruttore input:checked + .leva{
  background:color-mix(in srgb,var(--good) 26%,transparent);
  border-color:color-mix(in srgb,var(--good) 55%,transparent);
}
.interruttore input:checked + .leva::after{transform:translateX(16px);background:var(--good)}
.interruttore input:focus-visible + .leva{outline:2px solid var(--accent);outline-offset:2px}
/* Lo stato a parole sta sempre, la nota sulla fase solo dove serve:
   in colonna, cosi' la riga non si allarga e i due pezzi non si
   confondono fra loro. */
.stato-potere{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-top:1px;
}

/* ---------------------------------------------------------------- */
/* Il registro                                                      */
/* ---------------------------------------------------------------- */
/* I tre filtri affiancati: l'etichetta sopra, le schegge sotto in UNA
   riga che non va a capo. Niente si sposta quando si sceglie - cambia
   solo il colore di quella premuta. Un filtro i cui pulsanti cambiano
   posto a ogni clic obbliga a rileggerli tutti ogni volta. */
.filtri{
  display:flex;flex-wrap:wrap;gap:16px 30px;margin-bottom:18px;align-items:flex-start;
  background:var(--surf);border:1px solid var(--surf-border);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--card-shadow);
}
/* Ogni gruppo e' largo quanto gli serve, e va a capo INTERO quando non
   ci sta. La prima versione lo incastrava in una colonna di griglia
   fissa: le schegge in fondo finivano fuori dal bordo e sparivano - un
   filtro nascosto e' peggio di un filtro assente, perche' chi lo cerca
   crede che non esista. Misurato a 1366: due file, niente di tagliato. */
.gruppo-filtro{display:flex;flex-direction:column;gap:8px;flex:0 1 auto;min-width:0}
.gruppo-filtro > .eyebrow{display:block}
/* Le schegge di un gruppo restano su una riga sola: se le sedi diventano
   tante scorre quel gruppo, non la pagina. */
.filtri .fila{
  display:flex;gap:6px;flex-wrap:nowrap;max-width:100%;
  overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;
}
.scheggia{
  flex:0 0 auto;                       /* non si allarga e non si stringe */
  display:inline-flex;align-items:center;gap:7px;
  min-height:36px;padding:7px 14px;border-radius:999px;
  font-size:13.5px;font-weight:600;white-space:nowrap;
  color:var(--dim);text-decoration:none;
  background:var(--surf2);border:1px solid var(--surf-border);
}
.scheggia:hover{color:var(--ink);border-color:var(--accent)}
.scheggia b{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;
  font-weight:600;opacity:.75;
}
/* Lo stato scelto sta su aria-current e non su una classe: «.scelta»
   esisteva gia' in questo foglio - e' la riga grande della scelta della
   sede, larga il 100% - e il filtro selezionato diventava largo quanto
   la pagina. Un nome di classe riusato rompe cose lontane. */
.scheggia[aria-current]{
  color:var(--on-good);background:var(--mint-ink);border-color:var(--mint-ink);
}
.scheggia[aria-current] b{opacity:1}
.scheggia[aria-current]:hover{filter:brightness(.96)}
.scheggia.verde[aria-current] {background:var(--good);border-color:var(--good);color:var(--on-good)}
.scheggia.giallo[aria-current]{background:var(--warn);border-color:var(--warn);color:var(--on-warn)}
.scheggia.rosso[aria-current] {background:var(--bad);border-color:var(--bad);color:var(--on-bad)}

table.registro td{vertical-align:top}
table.registro td.quando{white-space:nowrap;font-size:13.5px;color:var(--dim);padding-top:13px}
table.registro td.dettaglio{font-size:13.5px;color:var(--dim);line-height:1.5;max-width:46ch}
table.registro .sotto{font-size:13.5px;opacity:.55}
/* Il pallino porta il colore del livello. Un pallino e non una riga
   colorata: dieci righe gialle di fila diventano un muro e smettono di
   segnalare qualcosa. */
.pallino{
  display:inline-block;width:7px;height:7px;border-radius:99px;
  margin-right:9px;vertical-align:middle;background:var(--dim);flex:none;
}
tr.liv-info    .pallino{background:var(--good)}
tr.liv-warning .pallino{background:var(--warn)}
tr.liv-error   .pallino{background:var(--bad)}
tr.liv-warning td:nth-child(2){color:var(--warn)}
tr.liv-error   td:nth-child(2){color:var(--bad);font-weight:600}
.nota-registro{font-size:13.5px;line-height:1.55;margin:16px 0 0;max-width:62ch}

/* L'estensione appiccicata al campo: si vede che c'e' e non si puo'
   cancellare per sbaglio. Scriverla dentro il campo la renderebbe
   modificabile, e un foglio Excel chiamato «.xls» non si apre. */
.con-coda{display:flex;align-items:stretch}
.con-coda input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.con-coda .coda{
  display:flex;align-items:center;padding:0 13px;flex:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;color:var(--dim);
  background:var(--surf);border:1px solid var(--surf-border);
  border-top-right-radius:10px;border-bottom-right-radius:10px;
}


/* ---------------------------------------------------------------- */
/* Il logo segue il tema                                            */
/* ---------------------------------------------------------------- */
/* Il marchio scuro sparisce su fondo scuro e quello chiaro su fondo
   chiaro. Fino a DR-151 lo sceglieva il server, perche' il tema era
   deciso dalla pagina; adesso si cambia nel browser senza ricaricare,
   quindi il server non lo sa piu'. Ci sono tutte e due le immagini e
   qui se ne nasconde una - e' la sola cosa che sa reagire al cambio.

   La specificita' non e' un caso: «.topbar .logo{display:block}» piu'
   sopra vale 0,2,0, quindi una regola con una classe sola perderebbe. */
.logo.logo-chiaro{display:none}
:root[data-tema="notturno"] .logo.logo-scuro{display:none}
:root[data-tema="notturno"] .logo.logo-chiaro{display:block}


/* ---------------------------------------------------------------- */
/* Niente si seleziona, tranne quello che si copia davvero          */
/* ---------------------------------------------------------------- */
/* Strisciare il mouse e vedersi evidenziare mezza pagina fa sembrare
   il gestionale un documento invece che un programma. Un programma non
   si evidenzia: si usa.

   Il verso giusto e' spegnere TUTTO e riaccendere le poche cose che si
   copiano per davvero. Provando a elencare i pezzi da spegnere se ne
   dimentica sempre uno, e ogni pagina nuova ne porta di suoi.

   Restano selezionabili:
     - quello che si sta scrivendo (campi, aree di testo, tendine);
     - i CODICI in carattere a spaziatura fissa - licenze, nomi utente,
       identificativi: si dettano al telefono E si incollano in una
       mail, e toglierli alla copia sarebbe un fastidio vero. */
body{-webkit-user-select:none; user-select:none}
input, textarea, select,
.mono, code, pre, .consegna b{
  -webkit-user-select:text; user-select:text;
}

/* ---------------------------------------------------------------- */
/* Il colore nei titoli                                             */
/* ---------------------------------------------------------------- */
/* Una pagina tutta grigia si legge bene e non si guarda. Il colore
   serve a far trovare le cose senza leggerle: il titolo di un riquadro,
   il nome di un negozio, un orario.

   Si usano --mint-ink e --accent, MAI --mint: misurato, il verde del
   marchio come colore di testo sul tema Vetro da' 1,9:1 - illeggibile
   (DR-048). Le due varianti scelte danno da 4,3:1 a 8,9:1 sui tre temi.

     --mint-ink   i titoli e i valori che contano
     --accent     le etichette e i sottotitoli */

/* Il titolo della pagina: sfumatura del marchio, con il ripiego
   dichiarato prima per i browser che non sanno ritagliare lo sfondo. */
.intestazione h1{
  color:var(--mint-ink);
  background:linear-gradient(100deg,var(--mint-ink),var(--accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  width:fit-content;
}

/* I titoli dei riquadri, con la barretta davanti che li fa trovare
   scorrendo la pagina con la coda dell'occhio. */
.card > h2, .testata h2{
  color:var(--mint-ink);display:flex;align-items:center;gap:10px;
}
.card > h2::before, .testata h2::before{
  content:"";width:4px;height:1.05em;border-radius:99px;flex:none;
  background:linear-gradient(180deg,var(--mint-ink),var(--accent));
}

/* Il nome di un negozio nella sua scheda, e il tipo sopra. */
.servizio h3{color:var(--accent)}
.servizio .tipo{color:var(--mint-ink)}
.eyebrow{color:var(--accent)}

/* Le fasce dei tempi di attesa: l'orario e' il dato, e si vede. */
.fascia .n{color:var(--accent)}
.fascia .val{color:var(--mint-ink)}
.scaglione{
  color:var(--mint-ink);
  border-color:color-mix(in srgb,var(--mint-ink) 40%,transparent);
  background:color-mix(in srgb,var(--mint-ink) 8%,transparent);
}

/* Nelle finestre: l'etichetta del riepilogo e il passo. */
.riepilogo dt{color:var(--accent)}
.modale > header h2{color:var(--mint-ink)}
.campo label,.spunte > .titolo{color:var(--accent)}


/* ---------------------------------------------------------------- */
/* Righe di spunta dentro le finestre a due passi                   */
/* ---------------------------------------------------------------- */
/*  Le righe di spunta della finestra.

    Nomi nuovi e non `.campo` o `.scelta`: la prima rende le etichette
    maiuscole e minuscole e stira gli input al 100% della larghezza - su
    una casella di spunta viene fuori un quadratino perso in mezzo a un
    riquadro; la seconda e' la scheda grande usata altrove. E' la quarta
    volta che un nome di classe riusato rompe qualcosa di lontano. */
.spunte{display:flex;flex-direction:column;gap:7px}
.spunte > .titolo{font-size:13.5px;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;color:var(--dim)}
/* La riga sopra le spunte: il titolo a sinistra, «abilita tutte» a destra. */
.capo-spunte{display:flex;align-items:center;gap:10px}
.capo-spunte .sp{flex:1}
.spunta{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;
  padding:9px 13px;border:1px solid var(--surf-border);border-radius:10px;
  background:var(--surf2);font-size:14.5px}
.spunta:hover{border-color:var(--accent)}
.spunta input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--accent)}
.spunta b{font-weight:600}
.spunta em{font-style:normal;font-size:13.5px;color:var(--dim);margin-left:auto;
  text-align:right}
.spunta.spento{opacity:.55;cursor:not-allowed;border-style:dashed}
.spunta.spento:hover{border-color:var(--surf-border)}


/* ---------------------------------------------------------------- */
/* Elenchi che si scorrono con due pulsanti, non con la barra        */
/*                                                                   */
/* Al banco si tocca il vetro con il dito, e la barra e' larga dodici */
/* pixel: per prenderla si sbaglia, e sbagliando si trascina la       */
/* lista. Due pulsanti da 46 px non si sbagliano. Il comportamento    */
/* sta in `js/scorri_lista.js`, il disegno qui - e valgono in tutte   */
/* le pagine, non solo alla cassa: la finestra dello storno ha lo     */
/* stesso problema e lo stesso dito.                                 */
/* ---------------------------------------------------------------- */
.righe-box{display:flex;gap:8px;min-width:0;min-height:0}
.righe-box .righe{flex:1 1 auto;min-width:0;overflow:auto;
  margin:0 -4px;padding:0 4px;scrollbar-width:none;overscroll-behavior:contain;touch-action:manipulation}
.righe-box .righe::-webkit-scrollbar{display:none}
.frecce{display:flex;flex-direction:column;justify-content:center;gap:8px;
  flex:0 0 auto}
.freccia{width:46px;min-height:52px;padding:0;font-size:17px;
  display:flex;align-items:center;justify-content:center}
.freccia[disabled]{opacity:.3;cursor:not-allowed}


/* ---------------------------------------------------------------- */
/* Scelte grandi: un elenco da premere col dito, una risposta sola   */
/*                                                                   */
/* Come `.spunta`, ma il pallino non si vede: si vede la riga, e la  */
/* riga scelta si accende tutta. Un pallino da 18 px chiede al dito  */
/* una precisione che al banco non c'e' - qui il bersaglio e' tutta  */
/* la riga, e non si sbaglia.                                        */
/* ---------------------------------------------------------------- */
.scelte-box{max-height:232px}
.scelte{display:flex;flex-direction:column;gap:6px}
/*  E' un <label> dentro un `.campo`, quindi eredita il vestito delle
    etichette: maiuscoletto, spaziato, colore d'accento. Qui non e'
    un'etichetta - e' una RISPOSTA da premere - e va scritta come si
    legge. */
.campo .scelta-grande{display:flex;align-items:center;min-height:52px;
  cursor:pointer;padding:10px 14px;border:1px solid var(--surf-border);
  border-radius:10px;background:var(--surf2);
  font-size:15px;font-weight:500;text-transform:none;letter-spacing:normal;
  color:var(--ink)}
.campo .scelta-grande b{font-size:15px;font-weight:600;color:var(--ink)}
.scelta-grande:hover{border-color:var(--accent)}
.scelta-grande input{position:absolute;opacity:0;width:0;height:0}
.scelta-grande b{font-weight:600}
.scelta-grande:has(input:checked){
  background:color-mix(in srgb,var(--accent) 18%,var(--surf2));
  border-color:var(--accent)}
.scelta-grande:has(input:focus-visible){outline:2px solid var(--accent);
  outline-offset:2px}

/*  La finestra del servizio (069): a sinistra cos'è, a destra come lo
    eroga la periferica. */
.srv-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
@media (max-width:900px){.srv-form{grid-template-columns:1fr}}
.periferica{border:2px solid var(--mint);border-radius:14px;padding:16px;background:var(--surf2);
  display:flex;flex-direction:column;gap:14px}
.per-testa{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.per-testa .eyebrow{margin:0;flex:1;color:var(--mint-ink)}
.segmenti{display:inline-flex;border:1px solid var(--control-border);border-radius:12px;overflow:hidden}
.segmenti .seg{position:relative;display:inline-flex;align-items:center;font-size:var(--font-selettore,15px);font-weight:700;
  min-height:44px;padding:0 18px;background:var(--surf2);color:var(--dim);cursor:pointer}
.segmenti .seg input{position:absolute;opacity:0;pointer-events:none}
.segmenti .seg:has(input:checked){background:var(--accent);color:var(--on-accent)}
.segmenti .seg:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-4px}
.tre-colonne{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:700px){.tre-colonne{grid-template-columns:1fr}}
.srv-form [hidden]{display:none!important}
/*  I campi di una riga allineati in basso: un'etichetta che va a capo
    («Reparto fiscale (registratore)») non abbassa il suo campo rispetto
    a quello accanto. */
.srv-form .campo{justify-content:flex-end}
/* (074) Numero e unita' nello stesso riquadro: lo scatto «7 | minuti». */
.numero-unita{display:flex;gap:6px}
/* (075) Il modo che il tipo di slot non ammette: spento, non premibile. */
.segmenti .seg.spento{opacity:.35;cursor:not-allowed}
.numero-unita input{flex:1;min-width:0}
.numero-unita select{flex:0 0 108px;width:108px}
/* (29/9) I minuti della durata, dentro il campo a destra: non spostano niente. */
.srv-form .campo.con-dopo{position:relative}
.srv-form .campo.con-dopo .dopo{position:absolute;right:12px;bottom:0;height:46px;
  display:flex;align-items:center;font-size:13px;pointer-events:none;z-index:1}
.sola-lettura{background:transparent!important;border-style:dashed!important;color:var(--dim)!important}

/* (106) Una spunta che non si puo' ancora toccare (es. «Chiude un conto
   senza incasso» senza «Annulla un conto aperto»): si vede spenta. */
.spunta:has(input:disabled){opacity:.45;cursor:not-allowed}