/* ════════════════════════════════════════════════════════════════════
   LDS SUISSE  —  GESTIONE E AREA CLIENTI
   Stesso sistema della home (lds-home.css), applicato a due strumenti.
   ════════════════════════════════════════════════════════════════════
   Le sei regole della home valgono anche qui, con una eccezione.

   1. Fondo crema, non nero.
   2. Filetti, non riquadri. Nessun angolo arrotondato, nessuna ombra.
   3. Titoli piccoli in serif leggero. Il grottesco pesante non entra.
   4. Una sola azione scura per schermata; tutto il resto e' testo.
   5. Numeri in cifre tabulari: incolonnati, si leggono a colpo d'occhio.

   L'eccezione: qui il vuoto non e' un lusso. La home puo' permettersi
   260px di crema prima di parlare, un banco di lavoro no. La densita'
   resta alta — cambiano il colore, il carattere e i bordi, non la
   quantita' di informazione per schermata.

   Sostituisce lds-vip-theme.css e i due blocchi <style> in pagina.
   Il file vecchio resta su disco, non e' piu' collegato.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Sistema della home ───────────────────────────────────────── */
  /* Piu' scuro del #918C84 del sito: qui le etichette minuscole
     portano informazione, non decorazione. 5,21:1 su crema. */
  --gut:var(--gut-denso);

  /* ── Colori di stato ──────────────────────────────────────────────
     Non decorativi: dicono in che stato e' una richiesta. Scelti scuri
     perche' devono restare leggibili su crema — il verde e il rosso da
     interfaccia scura, portati qui, sparirebbero. */
  --ok:#3D6B45;      /* confermata  */
  --warn:#8A5E1E;    /* in attesa   */
  --bad:#9B3B34;     /* annullata   */
  --wait:#4C4386;    /* da approvare*/
  --accent:#7A5C28;  /* bronzo: al posto dell'oro, che su crema svanisce */

  /* ── Alias del tema vecchio ───────────────────────────────────────
     Restano una sessantina di attributi style="" nel corpo delle due
     pagine che chiamano questi nomi. Rimapparli qui li tiene vivi
     senza dover toccare l'HTML riga per riga. */
  --gold:var(--accent); --gl:#8F6C2E; --gd:#6E5426;
  --bk:var(--cream); --dp:var(--white); --dk:var(--cream-2); --dm:var(--cream-2);
  --db:var(--hair); --w:var(--ink); --dim:var(--ink-3); --mid:var(--ink-2);
  --grn:var(--ok); --red:var(--bad); --amb:var(--warn); --pnd:var(--wait);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.6;
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
table{border-collapse:collapse;width:100%}
svg{display:block}
/* Ogni cifra della stessa larghezza: le colonne di numeri si allineano. */
.sn,.mgmt-command-stat-value,.member-lounge-stat-value,.bdg,.fc,.pay-card-val,
.log-stat-n,td,.tab-badge{font-variant-numeric:lining-nums tabular-nums}

::selection{background:var(--ink);color:var(--cream)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ════════════════════════════════════════════════════════════════════
   1. ACCESSO
   ════════════════════════════════════════════════════════════════════
   Due campate: la fotografia a sinistra, il modulo a destra. Nient'altro.
   Chi arriva qui vuole entrare, non leggere che cosa sa fare il pannello:
   il testo pubblicitario che c'era prima (metriche finte, elenco dei
   pregi, nota di chiusura) resta nell'HTML ma non si mostra piu'. */
#loginScreen{position:fixed;inset:0;z-index:9000;background:var(--cream);overflow-y:auto}
#loginScreen.h{display:none}
.login-shell{display:grid;grid-template-columns:1.02fr .98fr;min-height:100vh}

.login-showcase{
  position:relative;overflow:hidden;background:var(--cream-2);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.6rem,4vw,3.2rem);
}
.login-showcase::before{
  content:'';position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.03);animation:lgdrift 30s ease-in-out infinite alternate;
}
@keyframes lgdrift{from{transform:scale(1.03)}to{transform:scale(1.09) translate3d(-1%,-.6%,0)}}
/* Il testo sta sopra la fotografia: senza una sfumatura non si legge.
   Non un riquadro — un buio che nasce dal basso e non si vede finire. */
.login-showcase::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:64%;
  background:linear-gradient(transparent,rgba(12,12,11,.72));
}
.login-showcase--mgmt::before{background-image:url('foto/serie7-quartiere-sera.jpg');background-image:image-set(url('foto/serie7-quartiere-sera.webp') type('image/webp'), url('foto/serie7-quartiere-sera.jpg') type('image/jpeg'))}
.login-showcase--user::before{background-image:url('foto/classe-e-albergo.jpg');background-image:image-set(url('foto/classe-e-albergo.webp') type('image/webp'), url('foto/classe-e-albergo.jpg') type('image/jpeg'))}
.login-showcase > div{position:relative;z-index:2}
.login-kicker{
  font-size:10px;font-weight:300;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,253,248,.7);margin-bottom:1rem;
}
.login-showcase-title{
  font-family:var(--disp);font-weight:300;font-size:clamp(1.7rem,3.2vw,2.6rem);
  line-height:1.16;letter-spacing:.005em;color:#FCFBF8;max-width:16ch;
}
.login-showcase-title em,.login-showcase-title i{font-style:italic;color:inherit}
/* Il riempitivo: fuori dalla vista, dentro il file. */
.login-showcase-text,.login-showcase-metrics,.login-showcase-metric,
.login-showcase-card,.login-points,.login-showcase-note,
.login-showcase-footer,.login-showcase-label{display:none}

.lcard{
  background:var(--cream);padding:clamp(2rem,5vw,3rem);
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;
}
.llogo-link{display:block}
.llogo{
  font-family:var(--sans);font-size:12px;font-weight:300;letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink);
}
.llogo s2{display:none}   /* il rombo dorato: via, come sul sito */
.ltag{
  font-size:10px;font-weight:300;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.7rem;
}
.ldiv{display:none}
.ltitle{
  font-family:var(--disp);font-weight:300;font-size:clamp(1.8rem,3.4vw,2.6rem);
  line-height:1.18;margin-top:clamp(2rem,5vh,3.4rem);
}
.ltitle em{font-style:italic;color:inherit}
.lsub{
  color:var(--ink-2);font-size:13.5px;line-height:1.8;
  max-width:34ch;margin:1rem auto 0;
}
/* Le pastiglie dei ruoli non dicono niente a chi deve entrare. */
.role-pills,.lroles{display:none}

#gsiBtn{display:flex;justify-content:center;margin-top:clamp(1.8rem,4vh,2.6rem);min-height:44px}
.fbtn-google{
  width:100%;max-width:320px;margin:0 auto;display:flex;align-items:center;
  justify-content:center;gap:.7rem;background:var(--ink);color:var(--cream);
  font-size:12.5px;font-weight:300;letter-spacing:.06em;padding:1.05rem 2rem;
  transition:opacity .4s ease;
}
.fbtn-google:hover{opacity:.82}
.lbtn{
  width:100%;max-width:320px;margin:.6rem auto 0;background:var(--ink);color:var(--cream);
  font-size:12.5px;font-weight:300;letter-spacing:.06em;padding:1.05rem 2rem;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  transition:opacity .4s ease;
}
.lbtn:hover{opacity:.82}
.lbtn:disabled{opacity:.4;cursor:not-allowed}

.pending-msg,.auth-err{
  max-width:38ch;margin:1.6rem auto 0;padding:1rem 1.2rem;
  border-left:2px solid var(--warn);background:var(--cream-2);
  font-size:12.5px;line-height:1.7;color:var(--ink-2);text-align:left;
}
.pending-msg em{font-style:normal;color:var(--ink)}
.auth-err,.authtab{border-left-color:var(--bad)}
.authtab{
  flex:1;padding:.8rem 0;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);border:none;border-bottom:1px solid transparent;
}
.authtab.active{color:var(--ink);border-bottom-color:var(--ink)}

/* Configurazione: strumento da tecnico, resta discreto in fondo. */
.lcfg{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--hair);text-align:left}
.lcfg-lbl,.lcfg-l{
  display:block;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.5rem;
}
.ci,.lcfg-i{
  width:100%;background:var(--white);border:1px solid var(--hair);color:var(--ink);
  font-size:12.5px;padding:.65rem .8rem;outline:none;margin-bottom:.5rem;
  transition:border-color .3s ease;
}
.ci:focus,.lcfg-i:focus{border-color:var(--ink)}
.ci::placeholder,.lcfg-i::placeholder{color:var(--ink-3)}
.cfg-row{display:flex;gap:.5rem}
.gbtn,.lcfg-btn{
  background:var(--ink);color:var(--cream);font-size:11px;font-weight:300;
  letter-spacing:.14em;text-transform:uppercase;padding:.6rem 1.2rem;white-space:nowrap;
  transition:opacity .3s ease;
}
.gbtn:hover,.lcfg-btn:hover{opacity:.82}
.chint{font-size:11px;color:var(--ink-3);margin-top:.5rem;line-height:1.6}
.chint a{color:var(--accent);border-bottom:1px solid var(--hair)}

@media(max-width:880px){
  .login-shell{grid-template-columns:1fr}
  .login-showcase{min-height:34vh}
  .lcard{padding-block:2.5rem 3.5rem}
}

/* ════════════════════════════════════════════════════════════════════
   2. BARRA IN ALTO
   ════════════════════════════════════════════════════════════════════
   Come la navigazione del sito: alta poco, un filetto sotto, nessun
   fondo scuro. Resta appiccicata perche' i pulsanti servono sempre. */
.topbar{
  position:sticky;top:0;z-index:200;
  background:rgba(243,239,232,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
  padding:0 var(--gut);min-height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.tlogo{
  font-family:var(--sans);font-size:11px;font-weight:300;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.tlogo s2{display:none}
.tsub{
  font-size:10px;font-weight:300;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);padding-left:.9rem;border-left:1px solid var(--hair);
}
.tr{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}

/* Il pallino di sincronia: verde se parla col foglio, ambra se ci prova. */
.syn{display:flex;align-items:center;gap:.45rem;font-size:10.5px;color:var(--ink-3);
  letter-spacing:.08em}
.sd{width:5px;height:5px;border-radius:50%;background:var(--ok);flex:none}
.sd.off{background:var(--bad)} .sd.wait{background:var(--warn)}

/* Un solo pulsante pieno per schermata: "Nuova". Gli altri sono filetti. */
.cb,.bsm,.cb2{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:11px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);padding:.55rem .9rem;border:1px solid var(--hair);
  transition:border-color .3s ease,color .3s ease;white-space:nowrap;
}
.cb:hover,.bsm:hover,.cb2:hover{border-color:var(--ink);color:var(--ink)}
.bico,.newreq-btn,.pref-save-btn,.member-lounge-button,.chat-send{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--ink);color:var(--cream);
  font-size:11px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;
  padding:.6rem 1.2rem;transition:opacity .35s ease;white-space:nowrap;
}
.bico:hover,.newreq-btn:hover,.pref-save-btn:hover,
.member-lounge-button:hover,.chat-send:hover{opacity:.82}
.bdg{
  min-width:26px;text-align:center;font-size:11px;color:var(--ink-2);
  padding:.35rem .5rem;border:1px solid var(--hair);
}
.uchip{display:flex;align-items:center;gap:.5rem;padding-left:.4rem}
.uav,.uavfb{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.uavfb{display:flex;align-items:center;justify-content:center;background:var(--cream-2);
  font-size:10px;letter-spacing:.06em;color:var(--ink-2)}
.uname{font-size:12px;color:var(--ink-2);max-width:16ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rbadge{
  font-size:10.5px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);padding:.3rem .6rem;border:1px solid var(--hair);white-space:nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   3. LINGUETTE
   ════════════════════════════════════════════════════════════════════
   Testo con un filetto sotto quella attiva. Le pastiglie scure di prima
   pesavano quanto il contenuto che dovevano indicizzare. */
.mgmt-tabs,.tabs,.up-nav{
  display:flex;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;flex-wrap:wrap;
  padding:0 var(--gut);border-bottom:1px solid var(--hair);background:var(--cream);
}
.mgmt-tab,.tab,.up-tab{
  position:relative;padding:1.1rem 0;
  font-size:11px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid transparent;margin-bottom:-1px;
  transition:color .3s ease,border-color .3s ease;
}
.mgmt-tab:hover,.tab:hover,.up-tab:hover{color:var(--ink-2)}
.mgmt-tab.active,.tab.active,.up-tab.active{color:var(--ink);border-bottom-color:var(--ink)}
.tab-badge,.mgmt-tab span,.tab span{
  display:inline-block;margin-left:.4rem;font-size:10px;letter-spacing:.06em;
  color:var(--ink-3)!important;background:none!important;padding:0!important;
}
.mgmt-section,.up-section{display:none;padding:0 0 4rem}
.up-section{padding-inline:var(--gut)}
.mgmt-section > .main{padding:clamp(1.6rem,4vh,2.6rem) var(--gut) 0}
.mgmt-section.active,.up-section.active{display:block}
.pnd{color:var(--warn)}

/* ════════════════════════════════════════════════════════════════════
   4. IL BANCO DEI NUMERI
   ════════════════════════════════════════════════════════════════════
   Prima era una fotografia di un'automobile con sopra un titolo
   pubblicitario e quattro riquadri. In uno strumento di lavoro la
   fotografia non informa: al suo posto i numeri, grandi, su crema.
   Il titolo e il testo di lancio non si mostrano piu'. */
.mgmt-command-deck,.member-lounge{
  padding:clamp(2rem,5vh,3.4rem) var(--gut) clamp(1.6rem,4vh,2.6rem);
  border-bottom:1px solid var(--hair);
}
.mgmt-command-copy > .mgmt-command-title,
.mgmt-command-copy > .mgmt-command-text,
.member-lounge-heading,.member-lounge-summary,
.member-lounge-media,.member-lounge-badges,.member-lounge-pill{display:none}
.mgmt-command-kicker,.member-lounge-kicker{
  display:block;font-size:10px;font-weight:300;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1.4rem;
}
.mgmt-command-actions{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-bottom:2rem}
.mgmt-command-action{
  font-size:11.5px;font-weight:300;letter-spacing:.1em;color:var(--ink-2);
  border-bottom:1px solid var(--hair);padding-bottom:.25rem;
  transition:border-color .3s ease,color .3s ease;
}
.mgmt-command-action:hover{border-bottom-color:var(--ink);color:var(--ink)}

.mgmt-command-grid,.member-lounge-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--hair);
}
.mgmt-command-stat,.member-lounge-stat{
  display:flex;flex-direction:column;gap:.5rem;
  padding:1.5rem 1.4rem 1.5rem 0;border-bottom:1px solid var(--hair);
}
.mgmt-command-stat.wide{grid-column:1/-1;border-bottom:none}
.mgmt-command-stat-label,.member-lounge-stat-label{
  font-size:10.5px;font-weight:300;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);
}
.mgmt-command-stat-value,.member-lounge-stat-value{
  font-family:var(--sans);font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:200;
  line-height:1;letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
}
/* La corsa in evidenza non e' un numero ma un luogo: torna in serif. */
.mgmt-command-route,.member-lounge-route{
  font-family:var(--disp);font-weight:300;font-size:clamp(1.2rem,2.4vw,1.7rem);
  line-height:1.3;letter-spacing:.005em;
}
.mgmt-command-stat-sub,.member-lounge-stat-sub{
  font-size:12px;color:var(--ink-2);line-height:1.65;max-width:32ch;
}

/* ════════════════════════════════════════════════════════════════════
   5. IMPIANTO: FIANCO E CORPO
   ════════════════════════════════════════════════════════════════════ */
.layout{display:grid;grid-template-columns:216px minmax(0,1fr);gap:clamp(1.5rem,3vw,2.6rem);
  padding:clamp(1.6rem,4vh,2.6rem) var(--gut) 0;align-items:start}
.sidebar{position:sticky;top:76px;display:flex;flex-direction:column;gap:2rem}
.srch{display:flex;align-items:center;gap:.6rem;border-bottom:1px solid var(--hair);
  padding-bottom:.6rem;color:var(--ink-3)}
.srch input{flex:1;background:none;border:none;outline:none;font-size:13px;color:var(--ink)}
.srch input::placeholder{color:var(--ink-3)}
.sec{display:flex;flex-direction:column}
.sl{font-size:10.5px;font-weight:300;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.8rem}
/* Il filtro attivo si segna con un filetto a sinistra, non con un blocco
   di colore: cosi' resta leggibile qual e' senza gridarlo. */
.sb{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  text-align:left;font-size:13px;font-weight:300;color:var(--ink-2);
  padding:.5rem 0 .5rem .8rem;border-left:1px solid transparent;
  transition:color .3s ease,border-color .3s ease,padding-left .3s var(--e);
}
.sb:hover{color:var(--ink);padding-left:1.1rem}
.sb.active{color:var(--ink);border-left-color:var(--ink)}
.fc{font-size:11px;color:var(--ink-3)}
.sb.active .fc{color:var(--ink-2)}
.main{min-width:0}

/* Riepilogo sopra la tabella: una riga di filetti, non quattro schede. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-bottom:2rem}
.sc{padding:1rem .8rem 1rem 0}
.sn{font-family:var(--sans);font-size:1.8rem;font-weight:200;line-height:1;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums}
.sl2{font-size:10.5px;font-weight:300;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.5rem}
.th{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.2rem}
.ttl{font-family:var(--disp);font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:300;
  line-height:1.2;color:var(--ink)}
.ttl em{font-style:italic}
.sf{
  font-size:11.5px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);padding:.45rem .95rem;border:1px solid var(--hair);
  transition:border-color .3s ease,color .3s ease;
}
.sf:hover{border-color:var(--ink-2);color:var(--ink)}
.sf.active{border-color:var(--ink);color:var(--ink)}

/* ════════════════════════════════════════════════════════════════════
   6. TABELLE
   ════════════════════════════════════════════════════════════════════
   Righe separate da un filetto e nient'altro: niente zebratura, niente
   cornice esterna. La riga si accende al passaggio del mouse. */
.tw{overflow-x:auto;border-top:1px solid var(--hair);-webkit-overflow-scrolling:touch}
.tw table,.log-table,.pay-table{width:100%;min-width:720px}
.pay-table{min-width:520px}
th{
  text-align:left;font-size:10.5px;font-weight:300;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);
  padding:.9rem .9rem .9rem 0;border-bottom:1px solid var(--hair);white-space:nowrap;
}
th[onclick]{cursor:pointer;transition:color .3s ease}
th[onclick]:hover{color:var(--ink)}
td{
  padding:1rem .9rem 1rem 0;border-bottom:1px solid var(--hair-2);
  font-size:13px;color:var(--ink-2);vertical-align:top;
}
tbody tr{transition:background .25s ease}
tbody tr:hover{background:var(--cream-2)}
td strong,td b{font-weight:400;color:var(--ink)}

/* Stato: una parola con un punto davanti. Il colore e' il segnale, ma
   la parola resta — chi non distingue i colori legge lo stesso. */
/* Stato della richiesta: una parola con un punto davanti. Il colore e'
   il segnale rapido, ma la parola resta — chi non distingue i colori
   legge lo stesso. */
.sbg{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-size:11.5px;letter-spacing:.1em;color:var(--ink-2)}
.sbg::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.sbg.s-new{color:var(--warn)}
.sbg.s-conf{color:var(--ok)}
.sbg.s-done{color:var(--ink-3)}
.sbg.s-cancel{color:var(--bad)}
/* La cella delle azioni: i simboli stanno in fila e non vanno a capo. */
.tda{display:flex;align-items:center;gap:.15rem}

/* Pulsante primario in fondo ai moduli: uno solo, pieno, scuro. */
.bs{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--ink);color:var(--cream);
  font-size:11.5px;font-weight:300;letter-spacing:.14em;
  padding:.75rem 1.6rem;transition:opacity .35s ease;white-space:nowrap;
}
.bs:hover{opacity:.82}
.bs:disabled{opacity:.45;cursor:not-allowed}
/* Il secondario si tira indietro: un filetto, nessun fondo. */
.bc,.mst{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:11.5px;font-weight:300;letter-spacing:.14em;color:var(--ink-2);
  padding:.75rem 1.2rem;border:1px solid var(--hair);
  transition:border-color .3s ease,color .3s ease;white-space:nowrap;
}
.bc:hover,.mst:hover{border-color:var(--ink);color:var(--ink)}

.empty{padding:4rem 1rem;text-align:center;color:var(--ink-3)}
/* Al posto del rombo dorato: un filetto. Sul sito non ci sono ornamenti. */
.empty-ico{font-size:0;line-height:0;margin:0 auto 1.2rem;width:34px;height:1px;background:var(--hair)}
.empty p{font-size:13px}

.log-stat{display:inline-flex;flex-direction:column;gap:.3rem;margin-right:2.4rem}
.log-stat-n{font-family:var(--sans);font-size:1.4rem;font-weight:200;line-height:1;
  font-variant-numeric:lining-nums tabular-nums}
.log-stat-l{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.log-pagination{display:flex;gap:.9rem;align-items:center;justify-content:center;
  padding:1.6rem 0;font-size:12px;color:var(--ink-2)}
.log-page-btn{
  font-size:11px;letter-spacing:.1em;color:var(--ink-2);
  padding:.4rem .8rem;border:1px solid var(--hair);transition:border-color .3s ease;
}
.log-page-btn:hover,.log-page-btn.active{border-color:var(--ink);color:var(--ink)}

/* ════════════════════════════════════════════════════════════════════
   7. FINESTRE E MODULI
   ════════════════════════════════════════════════════════════════════ */
.ov,.chat-ov{
  position:fixed;inset:0;z-index:8000;background:rgba(26,26,24,.42);
  backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;
  padding:var(--gut);
}
.ov.show,.chat-ov.show{display:flex}
.modal,.chat-panel{
  background:var(--cream);width:100%;max-width:620px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:mrise .45s var(--e) both;
}
.modal.full{max-width:920px}
@keyframes mrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.mh{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.6rem var(--gut) 1.2rem;border-bottom:1px solid var(--hair)}
.mt{font-family:var(--disp);font-size:1.4rem;font-weight:300;line-height:1.2}
.mt em{font-style:italic}
.mx{font-size:1.3rem;line-height:1;color:var(--ink-3);padding:.2rem .4rem;
  transition:color .3s ease}
.mx:hover{color:var(--ink)}
.mb{padding:1.6rem var(--gut);overflow-y:auto;flex:1}
.mf{display:flex;gap:.7rem;justify-content:flex-end;flex-wrap:wrap;
  padding:1.2rem var(--gut) 1.6rem;border-top:1px solid var(--hair)}

.fg,.pref-field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem}
.fg2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 1.1rem}
.fg label,.pref-field label,.fst{
  font-size:10.5px;font-weight:300;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);
}
.fg input,.fg select,.fg textarea,
.pref-field input,.pref-field select,.pref-field textarea{
  width:100%;background:var(--white);border:1px solid var(--hair);color:var(--ink);
  font-size:13.5px;padding:.7rem .85rem;outline:none;transition:border-color .3s ease;
}
.fg input:focus,.fg select:focus,.fg textarea:focus,
.pref-field input:focus,.pref-field select:focus,.pref-field textarea:focus{border-color:var(--ink)}
.fg textarea,.pref-field textarea{resize:vertical;min-height:80px;line-height:1.6}
.det-m,.conf-m{font-size:13.5px;line-height:1.8;color:var(--ink-2)}
.det-m strong,.conf-m strong{font-weight:400;color:var(--ink)}
.so{padding:.5rem 0}

/* Avviso: compare in basso a destra, non copre niente, se ne va da solo. */
.toast{
  position:fixed;right:var(--gut);bottom:var(--gut);z-index:9500;
  background:var(--ink);color:var(--cream);font-size:12.5px;letter-spacing:.04em;
  padding:.9rem 1.3rem;max-width:34ch;opacity:0;transform:translateY(10px);
  pointer-events:none;transition:opacity .35s ease,transform .35s var(--e);
}
.toast.show{opacity:1;transform:none}

/* ════════════════════════════════════════════════════════════════════
   8. CHAT
   ════════════════════════════════════════════════════════════════════ */
.chat-panel{max-width:520px;height:min(78vh,660px)}
.chat-msgs{flex:1;overflow-y:auto;padding:1.4rem var(--gut);display:flex;
  flex-direction:column;gap:.9rem}
.chat-input-area{display:flex;gap:.6rem;align-items:flex-end;
  padding:1rem var(--gut) 1.2rem;border-top:1px solid var(--hair)}
.chat-input{
  flex:1;background:var(--white);border:1px solid var(--hair);color:var(--ink);
  font-size:13.5px;padding:.7rem .85rem;outline:none;resize:none;max-height:120px;
  transition:border-color .3s ease;
}
.chat-input:focus{border-color:var(--ink)}
.chat-ph{padding:3rem 1rem;text-align:center;color:var(--ink-3)}
.chat-ph-title{font-family:var(--disp);font-size:1.3rem;font-weight:300;color:var(--ink)}
.chat-ph-sub,.chat-ph-info{font-size:12.5px;margin-top:.6rem;line-height:1.7}
.chat-loading{font-size:12px;color:var(--ink-3);padding:.8rem 0;text-align:center}

/* ════════════════════════════════════════════════════════════════════
   9. AREA CLIENTI: quel che ha in piu'
   ════════════════════════════════════════════════════════════════════ */
.user-hero{display:flex;align-items:center;gap:1.1rem;
  padding:clamp(2rem,5vh,3rem) var(--gut) 0}
.user-hero-av,.user-hero-av-ph{width:46px;height:46px;border-radius:50%;object-fit:cover;
  flex:none;background:var(--cream-2);display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-size:14px}
.user-hero-name{font-family:var(--disp);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:300;
  line-height:1.2}
.user-hero-email{font-size:12px;color:var(--ink-3);letter-spacing:.04em;margin-top:.2rem}

.member-lounge-wrap,.member-lounge-content{display:block}
.member-lounge-support{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--hair);
}
.member-lounge-support strong{font-family:var(--disp);font-size:1.25rem;font-weight:300;
  display:block;margin-bottom:.3rem}
.member-lounge-support p{font-size:12.5px;color:var(--ink-2);max-width:44ch;line-height:1.7}
.member-lounge-meta,.member-lounge-badge{font-size:11px;color:var(--ink-3);
  letter-spacing:.16em;text-transform:uppercase}

/* La tessera: un rettangolo di filetti, nessun oro, nessuna ombra. */
.vip-card-wrap{padding:0 var(--gut)}
.vip-card{border:1px solid var(--hair);padding:1.6rem;display:grid;
  grid-template-columns:1fr auto;gap:1.2rem;align-items:start;background:var(--white)}
.vip-card-left{display:flex;flex-direction:column;gap:.4rem}
.vip-card-name{font-family:var(--disp);font-size:1.4rem;font-weight:300}
.vip-card-tier,.vip-card-badge{font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent)}
.vip-card-since{font-size:11.5px;color:var(--ink-3)}
.vip-card-dots{display:flex;gap:.3rem}
.vip-card-perks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  padding-top:1.1rem;border-top:1px solid var(--hair)}
.vip-perk{font-size:12px;color:var(--ink-2)}

.pay-card{border-top:1px solid var(--hair);padding:1rem 0;display:flex;
  align-items:baseline;justify-content:space-between;gap:1rem}
.pay-card-lbl{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
.pay-card-val{font-family:var(--sans);font-size:1.4rem;font-weight:200;
  font-variant-numeric:lining-nums tabular-nums}
.pay-total{font-family:var(--sans);font-size:1.6rem;font-weight:300;
  font-variant-numeric:lining-nums tabular-nums}
.pay-placeholder{padding:3rem 1rem;text-align:center;color:var(--ink-3);font-size:13px}

.pref-section{padding:clamp(1.6rem,4vh,2.4rem) var(--gut);border-bottom:1px solid var(--hair)}
.pref-section-title{font-family:var(--disp);font-size:1.3rem;font-weight:300;
  margin-bottom:1.2rem}

/* ════════════════════════════════════════════════════════════════════
   10. SCHERMI STRETTI
   ════════════════════════════════════════════════════════════════════
   Il fianco dei filtri passa sopra il contenuto e scorre di lato: su un
   telefono una colonna da 216px mangerebbe meta' della larghezza. */
@media(max-width:900px){
  .layout{grid-template-columns:1fr;gap:1.6rem}
  .sidebar{position:static;flex-direction:row;overflow-x:auto;gap:1.6rem;
    padding-bottom:.6rem;scrollbar-width:none}
  .sidebar::-webkit-scrollbar{display:none}
  .sec{flex-direction:row;align-items:center;gap:.4rem;flex:none}
  .sl{margin-bottom:0;margin-right:.4rem;white-space:nowrap}
  .sb{white-space:nowrap;padding:.4rem .7rem;border-left:none;border-bottom:1px solid transparent}
  .sb:hover{padding-left:.7rem}
  .sb.active{border-left:none;border-bottom-color:var(--ink)}
  .srch{flex:none;min-width:200px}
}
@media(max-width:640px){
  .topbar{padding-block:.7rem;gap:.6rem}
  .tsub{display:none}
  .uname{display:none}
  .mgmt-command-stat,.member-lounge-stat{padding-right:.8rem}
  .modal,.chat-panel{max-height:94vh}
  .mf{justify-content:stretch}
  .mf button{flex:1}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Piede ───────────────────────────────────────────────────────────
   Aveva il colore cablato del tema scuro — crema su crema, 1,01:1,
   cioe' invisibile. Le note legali devono restare leggibili. */
footer{
  margin-top:clamp(2.5rem,6vh,4rem);padding:1.8rem var(--gut) 2.4rem;
  border-top:1px solid var(--hair);text-align:center;
  font-size:11px;font-weight:300;letter-spacing:.08em;line-height:2;color:var(--ink-2);
}
footer a{color:var(--ink-2);border-bottom:1px solid var(--hair);
  transition:border-color .3s ease,color .3s ease}
footer a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ════════════════════════════════════════════════════════════════════
   11. QUEL CHE COSTRUISCE IL JAVASCRIPT
   ════════════════════════════════════════════════════════════════════
   Righe di tabella, dettaglio richiesta, tracciatore, registro e chat
   non esistono nell'HTML: li scrive il codice quando arrivano i dati.
   A tabella vuota non si vedono, ed e' il modo piu' facile di lasciare
   meta' strumento senza vestito. Qui ci sono tutti. */

/* ── Riga della tabella ─────────────────────────────────────────── */
.tn{font-size:13.5px;color:var(--ink)}
.ts{font-size:12px;color:var(--ink-2);margin-top:.2rem}
.vp{
  display:inline-block;font-size:11px;letter-spacing:.1em;color:var(--ink-2);
  border:1px solid var(--hair);padding:.2rem .55rem;white-space:nowrap;
}
.acc-by,.by{font-size:12px;color:var(--ink-2)}
/* Le azioni di riga: un simbolo, niente riquadro. Restano sempre visibili —
   svelarle al passaggio del mouse le rende introvabili col dito. */
.ab{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  min-width:28px;height:28px;padding:0 .2rem;font-size:14px;line-height:1;
  color:var(--ink-2);white-space:nowrap;
  border:1px solid transparent;transition:border-color .3s ease,color .3s ease;
}
/* L'unica azione con una parola accanto al simbolo. */
.ab.accept{padding:0 .6rem;font-size:11.5px;letter-spacing:.1em;border-color:var(--hair)}
.ab:hover{border-color:var(--hair);color:var(--ink)}
.ab.accept:hover{color:var(--ok);border-color:var(--ok)}
.ab.del:hover{color:var(--bad);border-color:var(--bad)}
/* La chiave a destra della riga: cambia stato senza aprire nulla. */
.role-sel{
  font-size:12px;color:var(--ink-2);background:var(--white);
  border:1px solid var(--hair);padding:.35rem .5rem;outline:none;
  transition:border-color .3s ease;
}
.role-sel:focus{border-color:var(--ink)}
/* I quattro stati sono un gruppo di scelta: filetti affiancati, uno
   solo acceso. Non una tendina — cambiare stato e' l'azione piu'
   frequente della giornata e deve costare un colpo solo. */
.sr{display:inline-flex;flex-wrap:wrap;gap:-1px;border:1px solid var(--hair);
  background:var(--white)}
.so{
  font-size:11.5px;font-weight:300;letter-spacing:.12em;color:var(--ink-3);
  padding:.5rem .95rem;border-right:1px solid var(--hair);
  transition:color .3s ease,background .3s ease;
}
.sr .so:last-child{border-right:none}
.so:hover{color:var(--ink);background:var(--cream-2)}
/* Lo stato in corso resta acceso: fondo pieno, non solo colore del testo. */
.so.as-new{background:var(--warn);color:var(--cream)}
.so.as-conf{background:var(--ok);color:var(--cream)}
.so.as-done{background:var(--ink-3);color:var(--cream)}
.so.as-cancel{background:var(--bad);color:var(--cream)}
.so[class*="as-"]:hover{opacity:.88}

/* Attesa: rettangoli che respirano al posto del contenuto in arrivo. */
.sk{display:block;height:10px;background:var(--cream-2);animation:pulse 1.5s ease-in-out infinite}
.skr{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── Dettaglio della richiesta ──────────────────────────────────── */
.dg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1.6rem}
.df{display:grid;grid-template-columns:minmax(0,11ch) 1fr;gap:1rem;align-items:baseline;
  padding:.75rem 0;border-bottom:1px solid var(--hair-2)}
.dl{font-size:10.5px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.dv{font-size:13.5px;color:var(--ink);word-break:break-word}
.dv.lg{font-family:var(--disp);font-size:1.25rem;font-weight:300;line-height:1.3;
  font-variant-numeric:lining-nums tabular-nums}
.dn{font-size:13.5px;color:var(--ink-2);line-height:1.8;white-space:pre-line}
.dbt{
  font-size:10.5px;font-weight:300;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);margin:1.6rem 0 .4rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--hair);
}
.dbt:first-child{margin-top:0}

/* ── Tracciatore di stato ───────────────────────────────────────── */
.trk-label{font-size:10.5px;font-weight:300;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.9rem}
.trk-wrap{display:flex;align-items:flex-start;margin-bottom:1.4rem}
/* Ogni tappa e' un pallino con la sua etichetta. Il filetto che le unisce
   parte dal pallino stesso, cosi' la catena non si spezza a meta'. */
.trk{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;
  gap:.5rem;text-align:center}
.trk::before{content:'';position:absolute;top:9px;left:-50%;width:100%;height:1px;
  background:var(--hair)}
.trk:first-child::before{display:none}
.trk-dot{
  position:relative;z-index:2;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:9px;
  background:var(--cream);border:1px solid var(--hair);color:var(--ink-3);
}
.trk.done .trk-dot{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.trk.active .trk-dot{border-color:var(--ink);color:var(--ink)}
.trk-name{font-size:11px;color:var(--ink-3);max-width:12ch;line-height:1.4}
.trk.done .trk-name,.trk.active .trk-name{color:var(--ink)}

/* ── Registro ───────────────────────────────────────────────────── */
.log-stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-bottom:1.4rem}
.log-stat{padding:1rem .6rem 1rem 0;border-bottom:2px solid transparent;margin-bottom:-1px;
  cursor:pointer;transition:border-color .3s ease}
.log-stat:hover{border-bottom-color:var(--hair)}
.log-stat.active{border-bottom-color:var(--ink)}
.log-stat.active .log-stat-n,.log-stat.active .log-stat-l{color:var(--ink)}
/* Il tipo di evento si riconosce dal colore del numero, non da uno sfondo. */
.log-stat.access .log-stat-n{color:var(--wait)}
.log-stat.create .log-stat-n{color:var(--ok)}
.log-stat.edit .log-stat-n,.log-stat.status .log-stat-n{color:var(--warn)}
.log-stat.delete .log-stat-n{color:var(--bad)}
.log-stat.user .log-stat-n,.log-stat.payment .log-stat-n,
.log-stat.export .log-stat-n,.log-stat.site .log-stat-n{color:var(--ink-2)}

.log-toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1.2rem}
.log-toolbar > span{flex:none;font-size:11.5px;color:var(--ink-3);white-space:nowrap;padding-left:.4rem}
.log-search{flex:1 1 200px;min-width:160px;background:var(--white);border:1px solid var(--hair);
  padding:.6rem .8rem;font-size:13px;outline:none;transition:border-color .3s ease}
.log-search:focus,.log-date:focus{border-color:var(--ink)}
.log-search::placeholder{color:var(--ink-3)}
.log-date{background:var(--white);border:1px solid var(--hair);padding:.6rem .7rem;
  font-size:12.5px;color:var(--ink-2);outline:none;transition:border-color .3s ease}
.log-detail{font-size:12.5px;color:var(--ink-2);line-height:1.7}
.log-user-chip{display:inline-block;font-size:11.5px;color:var(--ink-2);
  border-bottom:1px solid var(--hair);padding-bottom:.1rem}
.log-change{display:inline-flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-size:12.5px}
.log-old{color:var(--ink-3);text-decoration:line-through}
.log-new{color:var(--ink)}
.log-arr{color:var(--ink-3)}

/* ── Chat ───────────────────────────────────────────────────────── */
.cm-wrap{display:flex;flex-direction:column;gap:.3rem;max-width:78%}
.cm-wrap.me{align-self:flex-end;align-items:flex-end}
.cm-wrap.them{align-self:flex-start}
.cm-wrap.system{align-self:center;align-items:center;max-width:90%}
.cm-name{font-size:10.5px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3)}
/* Il messaggio proprio e' scuro, quello altrui e' chiaro con un filetto:
   si capisce chi parla anche senza guardare da che lato sta. */
.cm-bubble{padding:.7rem 1rem;font-size:13.5px;line-height:1.7;white-space:pre-line;
  background:var(--cream-2);color:var(--ink)}
.cm-wrap.me .cm-bubble{background:var(--ink);color:var(--cream)}
.cm-wrap.them .cm-bubble{background:var(--white);border:1px solid var(--hair)}
.cm-wrap.system .cm-bubble{background:none;color:var(--ink-3);font-size:12px;
  text-align:center;padding:.4rem 0}
.cm-time{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}

.chat-conv-id{font-size:13.5px;color:var(--ink)}
.chat-conv-meta{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.chat-conv-preview{font-size:12.5px;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:52ch}
.chat-conv-time{font-size:11px;color:var(--ink-3);white-space:nowrap}
.chat-conv-badge,.chat-unread{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 .35rem;background:var(--ink);color:var(--cream);font-size:10.5px;
}
.chat-empty{padding:2.5rem 1rem;text-align:center;color:var(--ink-3);font-size:13px}

/* ── Scheda cliente nel dettaglio della richiesta ──────────────────
   Sta sopra lo stato perche' e' la cosa che serve PRIMA di rispondere:
   con chi si parla, quante volte e' gia' salito in macchina, se ha
   qualcosa in sospeso. Un filetto a sinistra la stacca dal resto senza
   costruirle intorno un riquadro. */
.cli{margin:1.6rem 0;padding-left:1rem;border-left:2px solid var(--hair)}
.cli .dbt{margin-top:0}
.cli-tag{
  display:inline-block;font-size:10.5px;font-weight:300;letter-spacing:.2em;
  text-transform:uppercase;padding:.3rem .7rem;margin-bottom:.9rem;
}
.cli-si{background:var(--ink);color:var(--cream)}
.cli-no{border:1px solid var(--hair);color:var(--ink-2)}
.cli-r{
  display:grid;grid-template-columns:minmax(0,11ch) 1fr;gap:1rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid var(--hair-2);
}
.cli-l{font-size:10.5px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.cli-v{font-size:13.5px;color:var(--ink)}
.cli-v b{font-weight:400}
.cli-q{font-size:12px;color:var(--ink-2)}
.cli-deb{color:var(--bad)}
.cli-ap{margin-top:1rem}
/* Le altre richieste aperte sono cliccabili: da una si salta all'altra
   senza chiudere e ricercare. */
.cli-b{
  display:block;width:100%;text-align:left;font-size:13px;color:var(--ink);
  padding:.55rem .7rem;border:1px solid var(--hair);margin-bottom:.35rem;
  transition:border-color .3s ease,background .3s ease;
}
.cli-b:hover{border-color:var(--ink);background:var(--cream-2)}
.cli-b .sbg{margin-left:.5rem}

/* Colonne di sintesi nella scheda Utenti */
.u-sp{font-size:13px;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.u-sp em{font-style:normal;font-size:11.5px;color:var(--bad);display:block;margin-top:.15rem}

/* ── Elenco delle conversazioni nell'area clienti ──────────────────
   Una riga per corsa, la piu' recente in cima. Il percorso fa da nome:
   e' cosi' che il cliente ricorda un viaggio, non per numero. */
.conv{
  display:block;width:100%;text-align:left;
  padding:1.1rem 0;border-bottom:1px solid var(--hair);
  transition:padding-left .35s var(--e);
}
.conv:hover{padding-left:.7rem}
.conv-h{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.conv-t{font-family:var(--disp);font-size:1.2rem;font-weight:300;line-height:1.25;color:var(--ink)}
.conv-d{font-size:11.5px;letter-spacing:.14em;color:var(--ink-3);white-space:nowrap}
.conv-m{display:block;font-size:13px;color:var(--ink-2);line-height:1.65;margin-top:.4rem}
.conv-m b{font-weight:400;color:var(--ink)}
.conv-w{display:block;font-size:11px;color:var(--ink-3);margin-top:.3rem;letter-spacing:.04em}
.conv .chat-unread{margin-left:auto}

/* ════════════════════════════════════════════════════════════════════
   OGGI  —  la giornata in ordine di partenza
   ════════════════════════════════════════════════════════════════════
   Una colonna dell'orario a sinistra, la corsa a destra. L'orario e' la
   cosa che si cerca per prima, quindi e' la sola in grande: tutto il
   resto sta sotto, piu' piccolo, e si legge solo se serve. */
.og-h{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;padding-bottom:1.4rem;border-bottom:1px solid var(--hair);margin-bottom:1.8rem}
.og-h .ttl{margin-top:.5rem}

/* Quattro numeri, non riquadri: separati da un filetto, non da un'ombra. */
.og-sint{display:flex;flex-wrap:wrap;gap:0}
.og-s{display:flex;flex-direction:column;gap:.2rem;padding:0 1.4rem;
  border-left:1px solid var(--hair)}
.og-s:first-child{padding-left:0;border-left:none}
.og-sn{font-family:var(--sans);font-size:1.7rem;font-weight:200;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.og-sl{font-size:10.5px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.og-s.urg .og-sn{color:var(--bad)}

.og-b{margin-bottom:2.4rem}
.og-bh{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  padding-bottom:.6rem;border-bottom:1px solid var(--hair);margin-bottom:.2rem}
.og-bt{font-size:11px;font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.og-bn{font-family:var(--sans);font-size:11px;color:var(--ink-3);
  font-variant-numeric:lining-nums tabular-nums}
.og-bs{font-size:12px;color:var(--ink-2);flex-basis:100%;line-height:1.6}
/* Il blocco che chiede attenzione porta un filetto rosso a sinistra:
   non un fondo colorato, che a schermo pieno stanca. */
.og-urg{border-left:2px solid var(--bad);padding-left:1.1rem}
.og-urg .og-bt{color:var(--bad)}

.og-r{
  display:grid;grid-template-columns:7.5rem 1fr auto;gap:1.2rem;align-items:center;
  width:100%;text-align:left;padding:1rem .4rem 1rem 0;
  border-bottom:1px solid var(--hair-2);
  transition:background .25s ease,padding-left .3s var(--e);
}
.og-r:hover{background:var(--cream-2);padding-left:.5rem}
.og-t{display:flex;flex-direction:column;gap:.15rem}
.og-t b{font-family:var(--sans);font-size:1.45rem;font-weight:200;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.og-t i{font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap}
.og-c{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.og-tr{font-family:var(--disp);font-size:1.15rem;font-weight:300;line-height:1.3;color:var(--ink)}
.og-m{font-size:12.5px;color:var(--ink-2)}
.og-w{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bad)}

/* Quelle gia' partite si tengono, ma chiuse: servono solo se qualcuno
   chiama per chiedere conferma di una corsa del mattino. */
.og-gia{border-top:1px solid var(--hair);padding-top:.9rem}
.og-gia summary{font-size:12px;color:var(--ink-2);cursor:pointer;padding:.4rem 0;
  letter-spacing:.04em}
.og-gia summary:hover{color:var(--ink)}
.og-gia[open] summary{margin-bottom:.6rem}
.og-gia .og-r{opacity:.62}
.og-gia .og-r:hover{opacity:1}

@media(max-width:680px){
  .og-r{grid-template-columns:4.6rem 1fr;gap:.9rem}
  .og-r .sbg{grid-column:2;margin-top:.2rem}
  .og-t b{font-size:1.2rem}
  .og-sint{gap:.4rem 0}
  .og-s{padding:0 .9rem}
}

/* ════════════════════════════════════════════════════════════════════
   PROCEDURA GUIDATA  —  una domanda alla volta, il riepilogo accanto
   ════════════════════════════════════════════════════════════════════
   A sinistra la tappa, a destra quello che si e' gia' risposto. La
   colonna di destra non e' decorazione: serve a rileggere al telefono
   quello che si sta per confermare, senza tornare indietro. */
/* Altezza limitata: i pulsanti di navigazione devono restare fermi in
   basso. Senza il tetto, la colonna del riepilogo cresceva a ogni
   risposta e spingeva Indietro/Avanti oltre il bordo del modale. */
.wz{display:grid;grid-template-columns:1fr 19rem;gap:0;
  min-height:22rem;max-height:min(62vh,30rem)}
.wz-l{padding-right:var(--gut);display:flex;flex-direction:column;min-height:0}
.wz-r{border-left:1px solid var(--hair);padding-left:var(--gut);
  display:flex;flex-direction:column;gap:1.2rem;min-height:0;overflow-y:auto}

/* Le tappe: un elenco cliccabile, non pallini muti. Chi ha gia'
   risposto vede il filetto pieno. */
.wz-tap{display:flex;flex-direction:column;gap:0}
.wz-t{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  padding:.55rem 0 .55rem .7rem;border-left:2px solid var(--hair);
  font-size:12.5px;font-weight:300;color:var(--ink-3);
  transition:color .3s ease,border-color .3s ease;
}
.wz-t:hover{color:var(--ink-2)}
.wz-t.pieno{color:var(--ink-2);border-left-color:var(--ink-3)}
.wz-t.on{color:var(--ink);border-left-color:var(--ink)}
.wz-tn{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);
  font-variant-numeric:lining-nums tabular-nums;min-width:1ch}
.wz-t.on .wz-tn{color:var(--ink)}

.wz-p{display:none}
/* Scorre la tappa, non i pulsanti. */
.wz-p.on{display:block;animation:wzIn .35s var(--e) both;
  flex:1;min-height:0;overflow-y:auto;padding-right:.4rem}
@keyframes wzIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.wz-ph{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1.6rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--hair)}
.wz-pn{font-size:10.5px;font-weight:300;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3)}
.wz-ph b{font-family:var(--disp);font-size:1.6rem;font-weight:300;line-height:1.2}
.wz-ps{font-size:13px;color:var(--ink-2);line-height:1.6}
.wz-campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 1.4rem}
.wz-campi .fg{margin-bottom:1.2rem}
/* Note e destinazione: una riga intera, non mezza colonna. */
.wz-p[data-p="5"] .wz-campi{grid-template-columns:1fr}

/* Nel piede: Annulla resta a sinistra, la navigazione si stacca a destra. */
#wzPrev{margin-left:auto}

.wz-sh{font-size:10.5px;font-weight:300;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:.5rem;border-bottom:1px solid var(--hair)}
.wz-sum{display:flex;flex-direction:column}
.wz-sr{display:grid;grid-template-columns:minmax(0,7ch) 1fr;gap:.9rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid var(--hair-2)}
.wz-sl{font-size:10px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.wz-sv{font-size:13px;color:var(--ink);word-break:break-word}
.wz-vuoto{font-size:12.5px;color:var(--ink-3);line-height:1.7;padding-top:.6rem}

/* La bozza ritrovata. Compare solo se c'e' davvero qualcosa da riprendere. */
.wz-bz{border:1px solid var(--warn);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.3rem}
.wz-bz b{font-size:12.5px;font-weight:400;color:var(--ink)}
.wz-bz span{font-size:11.5px;color:var(--ink-2)}
.wz-bza{display:flex;gap:.5rem;margin-top:.5rem}
.wz-bza button{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem .8rem;border:1px solid var(--ink);color:var(--ink);
  transition:background .3s ease}
.wz-bza button:hover{background:var(--ink);color:var(--cream)}
.wz-bza .scarta{border-color:var(--hair);color:var(--ink-3)}
.wz-bza .scarta:hover{background:none;border-color:var(--bad);color:var(--bad)}

@media(max-width:820px){
  .wz{grid-template-columns:1fr}
  .wz-l{padding-right:0}
  /* Su schermo stretto il riepilogo va SOTTO: la domanda viene prima. */
  .wz-r{border-left:none;border-top:1px solid var(--hair);padding-left:0;
    padding-top:1.4rem;margin-top:1.6rem}
  .wz-tap{flex-direction:row;overflow-x:auto;gap:.3rem;scrollbar-width:none}
  .wz-t{border-left:none;border-bottom:2px solid var(--hair);padding:.4rem .6rem;white-space:nowrap}
  .wz-t.on{border-bottom-color:var(--ink)}
}

/* ── Chiedere una modifica (area clienti) ─────────────────────────
   Non un modulo: due porte verso una persona. La spiegazione sta sopra
   i pulsanti, perche' una regola che non si capisce sembra un intoppo. */
.modif{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--hair)}
.modif .dbt{margin-top:0}
.modif p{font-size:13.5px;color:var(--ink-2);line-height:1.75;max-width:56ch;margin-bottom:1.2rem}
.modif-a{display:flex;flex-wrap:wrap;gap:.7rem}
.modif-a .bs,.modif-a .bc{text-decoration:none}
.modif-n{display:block;font-size:11.5px;color:var(--ink-3);margin-top:.8rem}
/* Avviso su una corsa imminente: rosso, non ambra — non e' un
   promemoria, e' una cosa che puo' far partire un'auto all'ora sbagliata. */
.wz-bz.wz-att{border-color:var(--bad)}
.wz-bz.wz-att b{color:var(--bad)}
.wz-bza a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem .8rem;border:1px solid var(--ink);color:var(--ink);
  text-decoration:none;transition:background .3s ease}
.wz-bza a:hover{background:var(--ink);color:var(--cream)}
/* Le richieste che assomigliano a questa: cliccabili, si apre quella
   che c'e' gia' invece di crearne una seconda. */
.wz-dupr{display:block;width:100%;text-align:left;font-size:12px;color:var(--ink);
  padding:.45rem .6rem;margin-top:.4rem;border:1px solid var(--hair);
  transition:border-color .3s ease,background .3s ease}
.wz-dupr:hover{border-color:var(--ink);background:var(--cream-2)}

/* ════════════════════════════════════════════════════════════════════
   ANALISI
   ════════════════════════════════════════════════════════════════════
   Una sola tinta per tutte le barre. Il primo disegno usava un colore
   per stato e il controllo dei colori l'ha bocciato: fra ambra, verde,
   grigio e rosso la coppia grigio/verde distava ΔE 7,6 — indistinguibile
   anche con vista normale. A dire quale barra e' quale sono le parole
   accanto; il colore resta solo dove segnala qualcosa da guardare. */
.an-s{margin-bottom:clamp(2.5rem,6vh,4rem)}
.an-h{display:flex;flex-direction:column;gap:.25rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--hair);margin-bottom:1.4rem}
.an-h b{font-size:11px;font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.an-h span{font-size:12.5px;color:var(--ink-2);line-height:1.6;max-width:62ch}

/* Il numero che conta sta grande e da solo: e' l'unica cosa che si
   ricorda uscendo dalla pagina. */
.an-eroe{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.6rem}
.an-en{font-family:var(--sans);font-size:clamp(3rem,7vw,4.4rem);font-weight:200;line-height:1;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.an-en i{font-style:normal;font-size:.4em;margin-left:.1em;color:var(--ink-2)}
.an-el{font-size:13.5px;color:var(--ink-2)}

.an-bl{display:flex;flex-direction:column;gap:.55rem}
.an-b{display:grid;grid-template-columns:minmax(0,13ch) 1fr auto;gap:1rem;align-items:center}
.an-be{font-size:13px;color:var(--ink-2)}
.an-bt{height:10px;background:var(--cream-2);position:relative}
/* Estremita' squadrate: tutto il sistema non ha angoli arrotondati, e
   una barra stondata in mezzo a filetti dritti si nota subito. */
.an-bf{position:absolute;inset:0 auto 0 0;background:var(--ink);
  animation:anCresce .7s var(--e) both}
@keyframes anCresce{from{transform:scaleX(0);transform-origin:left}to{transform:none}}
.an-bn{font-family:var(--sans);font-size:15px;font-weight:300;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;min-width:3ch;text-align:right}
.an-bn.av{color:var(--bad)}
.an-bn i{font-style:normal;font-size:11px;color:var(--ink-3);margin-left:.15rem}

/* Le settimane: barre verticali. Non tutte etichettate col numero —
   un numero su ogni colonna e' rumore; il valore esatto arriva
   avvicinandosi con il dito o con la tastiera. */
.an-col{display:flex;align-items:flex-end;gap:.4rem;height:9rem;
  border-bottom:1px solid var(--hair);padding-bottom:0}
.an-c{flex:1;position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;cursor:default}
.an-cv{width:100%;background:var(--ink);transition:background .25s ease;
  animation:anSale .6s var(--e) both}
@keyframes anSale{from{transform:scaleY(0);transform-origin:bottom}to{transform:none}}
.an-c:hover .an-cv,.an-c:focus-visible .an-cv{background:var(--accent)}
.an-cx{position:absolute;bottom:-1.5rem;font-size:10px;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums}
.an-tip{
  position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--cream);padding:.4rem .7rem;font-size:12px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:5;
}
.an-tip i{display:block;font-style:normal;font-size:10.5px;opacity:.72;margin-top:.1rem}
.an-c:hover .an-tip,.an-c:focus-visible .an-tip{opacity:1}
.an-col{margin-bottom:1.8rem}

.an-tr{display:flex;flex-direction:column}
.an-trr{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px solid var(--hair-2)}
.an-trr span{font-size:13.5px;color:var(--ink)}
.an-trr b{font-family:var(--sans);font-weight:300;font-size:14px;color:var(--ink-2);
  font-variant-numeric:lining-nums tabular-nums}

.an-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin-bottom:clamp(2.5rem,6vh,3.5rem)}
.an-t{display:flex;flex-direction:column;gap:.35rem;padding:1.3rem 1.4rem 1.3rem 0;
  border-left:1px solid var(--hair)}
.an-t:first-child{padding-left:0;border-left:none}
.an-tl{font-size:10.5px;font-weight:300;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.an-tv{font-family:var(--sans);font-size:1.8rem;font-weight:200;line-height:1;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums}
.an-t.av .an-tv{color:var(--bad)}
.an-ts{font-size:12px;color:var(--ink-2);line-height:1.6}

@media(max-width:640px){
  .an-b{grid-template-columns:minmax(0,10ch) 1fr auto;gap:.7rem}
  .an-col{height:7rem}
  .an-cx{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .an-bf,.an-cv{animation:none}
}

/* ── La fotografia del veicolo scelto ─────────────────────────────
   Compare solo dopo la scelta: un riquadro vuoto in attesa e' peggio
   del nulla. Serve a capire se ci stanno le valigie, non a decorare. */
.veic-f{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .35s ease,margin .5s ease}
.veic-f.on{max-height:16rem;opacity:1;margin-top:.8rem}
.veic-f img{width:100%;max-width:22rem;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--cream-2)}
.veic-f span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.5rem}
@media(prefers-reduced-motion:reduce){.veic-f{transition:none}}

/* ── Prezzo della corsa ───────────────────────────────────────────
   Il CHF sta fuori dal campo: chi scrive digita solo il numero, e non
   deve cancellare una sigla per farlo. */
.prz-imp{display:flex;align-items:baseline;gap:.6rem;border-bottom:1px solid var(--hair);
  transition:border-color .35s ease}
.prz-imp:focus-within{border-bottom-color:var(--ink)}
.prz-imp span{font-family:var(--sans);font-size:11.5px;font-weight:300;letter-spacing:.2em;
  color:var(--ink-3);flex:none}
.prz-imp input{
  flex:1;background:none;border:none;padding:.5rem 0;
  font-family:var(--sans);font-size:1.7rem;font-weight:200;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;outline:none;min-width:0;
}
.prz-imp input::placeholder{color:var(--ink-3);font-weight:200}

/* ── Scelta a due o piu' voci ─────────────────────────────────────
   Stessa forma del modulo pubblico: rettangoli affiancati, uno acceso.
   Era definita solo in prenota.css, che il pannello non carica — qui il
   gruppo "gia' incassato?" usciva come testo nudo. */
.pick{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--hair);width:max-content;max-width:100%}
.pick button{
  font-family:var(--sans);font-size:12px;font-weight:300;letter-spacing:.12em;
  color:var(--ink-2);padding:.7rem 1.1rem;border-right:1px solid var(--hair);
  transition:background .3s ease,color .3s ease;
}
.pick button:last-child{border-right:none}
.pick button:hover{background:var(--cream-2);color:var(--ink)}
.pick button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.pick button:disabled{color:var(--ink-3);cursor:not-allowed;opacity:.6}
.pick button:disabled:hover{background:none}
@media(max-width:640px){
  .pick{width:100%}
  .pick button{flex:1 1 auto;text-align:center}
}

/* ════════════════════════════════════════════════════════════════════
   IL VELO DI CARICAMENTO
   ════════════════════════════════════════════════════════════════════
   Il problema era questo: si apriva Utenti e la scheda era vuota. Non
   perche' fosse rotta — stava chiedendo i dati al foglio, e ci mette
   uno o due secondi. Ma senza niente da vedere quei due secondi
   sembrano un guasto, e si finisce per premere "aggiorna" credendo che
   sia l'unico modo di far comparire qualcosa.

   Il velo non nasconde: lascia intravedere quello che c'e' sotto e dice
   a parole cosa sta arrivando. Chi lavora tutto il giorno qui dentro
   deve poter distinguere "sta caricando" da "non c'e' niente", sempre
   e senza pensarci. */
.mgmt-section,.up-section{position:relative}

.velo{
  position:absolute;inset:0;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:clamp(2.4rem,9vh,5.5rem);gap:1.15rem;min-height:13rem;
  background:rgba(243,239,232,.72);backdrop-filter:blur(2px);
  animation:veloIn .22s ease both;
}
@keyframes veloIn{from{opacity:0}to{opacity:1}}
.velo.via{animation:veloOut .28s ease both;pointer-events:none}
@keyframes veloOut{to{opacity:0}}

.velo .parola{
  font-family:var(--sans,inherit);font-size:11.5px;font-weight:300;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);
}

/* La barra: tre secondi di corsa e poi si riavvolge. Non finge di
   sapere a che punto e' — non lo sa nessuno — dice solo che qualcosa
   sta succedendo. */
.velo .barra{width:min(11rem,42vw);height:1px;background:var(--hair);overflow:hidden}
.velo .barra i{
  display:block;height:100%;width:38%;background:var(--ink);
  animation:veloCorsa 1.15s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes veloCorsa{
  from{transform:translateX(-100%)}
  to{transform:translateX(365%)}
}
@media(prefers-reduced-motion:reduce){
  .velo,.velo.via{animation:none}
  .velo .barra i{animation:none;width:100%;opacity:.35}
}

/* ── Scelta della lingua nel pannello ──────────────────────────────
   Sta accanto a "Esci" perche' si usa una volta e poi non serve piu':
   la scelta resta, ed e' la stessa del sito pubblico. Chi ha gia' messo
   Deutsch sulla home entra e trova tutto in tedesco senza toccare
   niente; questo serve solo a cambiarlo da dentro. */
.ling-a{display:flex;gap:.45rem;align-items:center;margin-right:.7rem}
.ling-a button{
  font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.1em;
  background:none;border:0;color:var(--ink-3);cursor:pointer;
  padding:.2rem .1rem;transition:color .25s ease;
}
.ling-a button:hover{color:var(--ink)}
.ling-a button.on{color:var(--ink);border-bottom:1px solid currentColor}
@media(max-width:640px){.ling-a{display:none}}


/* ── La tendina in alto a sinistra ──────────────────────────────────
   Il pannello e' in posizione assoluta rispetto al contenitore, non
   alla barra: la barra e' una griglia a tre colonne e ancorarcisi
   avrebbe fatto partire il pannello dal centro.

   z-index alto perche' la barra sta gia' sopra il contenuto: senza,
   il pannello finiva sotto la fotografia della testata. */
.tendina{position:relative}
.tendina-b{background:none;border:0;padding:0;cursor:pointer;color:inherit;
  display:flex;align-items:center;gap:.55rem;font:inherit}
.tendina-b span{display:none}
@media(min-width:760px){ .tendina-b span{display:inline;
  font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)} }
.tendina.aperta .tendina-b i::before{transform:translateY(4px) rotate(45deg)}
.tendina.aperta .tendina-b i::after{transform:translateY(-4px) rotate(-45deg)}

.tendina-p{
  position:absolute;top:calc(100% + .9rem);left:0;z-index:60;
  min-width:15.5rem;padding:.5rem;
  background:var(--white);border:1px solid rgba(26,26,24,.13);
  border-radius:4px;box-shadow:0 18px 44px rgba(26,26,24,.13);
  animation:tendinaGiu .22s cubic-bezier(.22,1,.36,1);
}
@keyframes tendinaGiu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tendina-p{animation:none}}

.tendina-g{padding:.45rem .25rem}
.tendina-g + .tendina-g{border-top:1px solid rgba(26,26,24,.08)}
.tendina-h{display:block;padding:.15rem .75rem .4rem;
  font-family:var(--sans);font-size:9.5px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3)}
.tendina-p a{display:block;padding:.44rem .75rem;border-radius:3px;
  font-family:var(--sans);font-size:14px;font-weight:300;line-height:1.5;
  color:var(--ink);text-decoration:none;transition:background-color .18s ease}
.tendina-p a:hover,.tendina-p a:focus-visible{background:var(--cream)}

/* L'area clienti sta sotto e si stacca: e' l'unica voce che porta
   dentro qualcosa invece che a una pagina da leggere. */
.tendina-a{margin-top:.3rem;padding:.6rem .75rem !important;
  background:var(--cream-2);border-radius:3px}
.tendina-a:hover,.tendina-a:focus-visible{background:var(--cream-2) !important;
  outline:1px solid rgba(26,26,24,.16)}
.tendina-an{display:block;font-size:14px;color:var(--ink)}
.tendina-as{display:block;margin-top:.1rem;font-size:11.5px;color:var(--ink-3);line-height:1.5}

@media(max-width:420px){ .tendina-p{min-width:min(15.5rem,calc(100vw - 2.4rem))} }

.tendina.aperta::after{content:'';position:absolute;top:100%;left:0;
  width:16rem;height:1.1rem}

/* qualita:inizio */

/* Il salto al contenuto. Invisibile finche' non riceve il fuoco: chi
   naviga da tastiera lo trova come prima cosa, tutti gli altri non lo
   vedono mai. Non si usa display:none — toglierebbe l'elemento anche
   dall'ordine di tabulazione, cioe' esattamente il contrario. */
.salta{
  position:absolute;left:.5rem;top:.5rem;z-index:9999;
  transform:translateY(-160%);
  padding:.7rem 1.1rem;
  background:var(--ink,#1A1A18);color:var(--cream,#F3EFE8);
  font:400 14px/1 var(--sans,system-ui,sans-serif);
  text-decoration:none;border-radius:2px;
  transition:transform .15s ease-out;
}
.salta:focus{transform:none}
.salta:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.salta{transition:none}}

/* Il sito e' deliberatamente chiaro. Senza questa riga, in modalita'
   scura forzata il browser dipinge di scuro i controlli nativi. */
:root{color-scheme:light}
/* qualita:fine */