/* base.css - reset, guscio, intestazione, barra strumenti, componenti comuni.
   #ANCHOR: css-base */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--inchiostro);
  /* Un soffio di cyan in alto a sinistra: e' quello che tiene insieme la testa
     di vetro e il fondo, senza colorare niente. */
  background-image: var(--velo);
  background-repeat: no-repeat;
  font: 400 var(--t-base)/1.45 var(--f-ui);
  font-feature-settings: var(--f-ui-feat);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
/* Il fuoco e' sempre visibile e sempre lo stesso: un anello cyan staccato di
   2px piu' un alone tenue, cosi' si legge anche sopra una superficie tinta. */
:focus-visible {
  outline: 2px solid var(--marchio); outline-offset: 2px; border-radius: var(--r-1);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--marchio) 14%, transparent);
}
::selection { background: var(--marchio-tenue); color: var(--inchiostro); }
.dato { font-family: var(--f-dato); font-variant-numeric: tabular-nums;
  font-feature-settings: normal; letter-spacing: -.01em; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- guscio -- */
.guscio { display: flex; flex-direction: column; height: 100%; }

/* Fascia in cima: solo per cose che bloccano il lavoro (server non raggiungibile).
   Deve essere impossibile non vederla. */
.banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 18px; font-size: var(--t-mini); z-index: 45;
  background: var(--allerta); color: var(--su-allerta);
}
.banner b { font-weight: 650; }
.banner span { opacity: .92; }
.banner button {
  margin-left: auto; color: inherit; font-weight: 600; padding: 4px 11px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, currentColor 20%, transparent);
}
.banner button:hover { background: color-mix(in srgb, currentColor 32%, transparent); }
.banner.grave { background: #B3261E; }
.banner a {
  color: inherit; font-weight: 650; font-family: var(--f-dato);
  padding: 3px 9px; border-radius: var(--r-tonda);
  background: color-mix(in srgb, currentColor 20%, transparent);
}
.banner a:hover { background: color-mix(in srgb, currentColor 34%, transparent); }

/* ---------------------------------------------------------- intestazione -- */
/* D2 / VIS-03: la testa e' piatta, sul colore del fondo (lo stesso del
   theme-color, VIS-21), con un bordo solo. Le aree sicure (MOB-17) tengono i
   comandi fuori dalla tacca e dagli angoli arrotondati quando l'app e'
   installata a tutto schermo (viewport-fit=cover). */
.testa {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: calc(10px + env(safe-area-inset-top, 0px))
           max(18px, env(safe-area-inset-right, 0px)) 10px max(18px, env(safe-area-inset-left, 0px));
  min-height: calc(62px + env(safe-area-inset-top, 0px));
  background: var(--fondo);
  border-bottom: 1px solid var(--bordo);
}
.marca { display: flex; align-items: center; gap: 11px; min-width: 0; flex: none; }
.marca img, .marca svg { height: 26px; width: auto; display: block; }
.marca-testo { display: flex; flex-direction: column; line-height: 1.05; }
/* Il nome dell'applicazione e' scritto, non etichettato: Inter 600, peso
   medio, tracking appena negativo. E' la prima cosa che dice "VRS". */
.marca-testo b {
  font-family: var(--f-display); font-weight: var(--p-display);
  font-size: var(--t-med); letter-spacing: var(--tr-display);
}
.marca-testo span { font-size: var(--t-micro); color: var(--tenue); letter-spacing: .11em;
  text-transform: uppercase; font-family: var(--f-dato); font-weight: 500; margin-top: 2px; }

/* L'anno e' l'elemento display della pagina: grande, in Inter 600, compresso.
   Il monospazio resta ai dati dentro le viste; qui l'anno e' un titolo. */
.anno-scelta { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.anno-scelta .anno {
  font-family: var(--f-display); font-size: var(--t-titolo); font-weight: 600;
  letter-spacing: -.035em; line-height: 1; padding: 0 5px;
  font-variant-numeric: tabular-nums; font-feature-settings: normal;
  transition: opacity var(--medio), transform var(--medio);
}
.anno-scelta .anno.caricando { opacity: .45; transform: translateY(-3px); }
.frecc {
  width: 28px; height: 28px; border-radius: var(--r-1); color: var(--tenue);
  display: grid; place-items: center; transition: var(--transizione);
}
.frecc:hover { background: var(--marchio-tenue); color: var(--marchio-scuro); }
.frecc:active { transform: scale(.92); }
.frecc[disabled] { opacity: .25; cursor: default; }

.testa-spazio { flex: 1; }

/* ricerca: lente centrata a sinistra, croce di svuotamento a destra */
.cerca { position: relative; display: flex; align-items: center; }
.cerca-ico {
  position: absolute; left: 10px; top: 50%; translate: 0 -50%;
  display: flex; color: var(--tenue); pointer-events: none;
}
.cerca input {
  width: clamp(160px, 24vw, 320px); padding: 7px 30px 7px 32px;
  background: var(--superficie); border: 1px solid var(--bordo);
  /* VIS-14: un campo, non una pillola. La larghezza cambia al fuoco senza
     animazione (mai animare `width`). */
  border-radius: var(--r-2); transition: var(--transizione);
}
/* a fuoco il campo si allarga: e' il gesto che dice "adesso si cerca" */
.cerca input:focus { width: clamp(220px, 30vw, 400px); }
.cerca input::-webkit-search-cancel-button { display: none; }
.cerca input:hover { border-color: var(--bordo-forte); }
.cerca input:focus { background: var(--superficie); border-color: var(--marchio); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marchio) 16%, transparent); }
.cerca-x {
  position: absolute; right: 5px; top: 50%; translate: 0 -50%;
  width: 24px; height: 24px; border-radius: var(--r-tonda);
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  color: var(--tenue); transition: var(--transizione);
}
.cerca-x:hover { background: var(--bordo); color: var(--inchiostro); }

/* stato del collegamento: spia + chi c'e' + etichetta, tutto cliccabile */
.stato-coll {
  display: flex; align-items: center; gap: 8px; padding: 5px 11px;
  border: 1px solid var(--bordo); border-radius: var(--r-2);
  background: var(--superficie);
  font-size: var(--t-mini); color: var(--inchiostro-2); transition: var(--transizione);
  white-space: nowrap;
}
.stato-coll:hover { border-color: var(--bordo-forte); background: var(--superficie-2); }

/* presenze operatori */
.presenze { display: flex; align-items: center; }
.presenze:empty { display: none; }
.pallino.piccolo {
  width: 20px; height: 20px; font-size: 9px; margin-left: -6px; border-width: 1.5px;
}
.pallino {
  width: 26px; height: 26px; border-radius: var(--r-tonda);
  display: grid; place-items: center; font: 600 var(--t-mini)/1 var(--f-ui);
  color: #fff; margin-left: -7px; border: 2px solid var(--superficie);
  box-shadow: var(--ombra-1);
}
.pallino:first-child { margin-left: 0; }
.io { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px;
  border-radius: var(--r-tonda); transition: var(--transizione); }
.io:hover { background: var(--fondo); }
.io b { font-weight: 500; font-size: var(--t-mini); }
/* il ruolo accanto al nome (#ANCHOR: ruoli): c'e' per l'amministratore e per
   l'approvatore, non per l'operatore */
.ruolo {
  font: 600 var(--t-micro)/1 var(--f-dato); text-transform: uppercase; letter-spacing: .05em;
  color: var(--marchio-scuro); background: var(--marchio-tenue); border-radius: var(--r-tonda);
  padding: 3px 6px 2px; flex: none;
}
.pill.debole .ruolo { color: var(--tenue); background: var(--superficie-2); }
/* la coda delle approvazioni: ambra, come una cosa che aspetta */
.pill.attesa {
  /* il testo e' l'ambra scurita: quella pura sul suo fondo tenue fa 3,9:1 */
  color: color-mix(in srgb, var(--allerta) 82%, var(--inchiostro));
  border-color: color-mix(in srgb, var(--allerta) 45%, transparent);
  background: var(--allerta-tenue); font-weight: 600;
}
.pill.attesa:hover { color: var(--allerta); border-color: var(--allerta); background: var(--allerta-tenue); }
.elenco-diario .ripristina, .storia .ripristina { margin-left: auto; flex: none; }
.elenco-diario li.blocco { background: color-mix(in srgb, var(--marchio-tenue) 55%, transparent); border-radius: var(--r-1); }
.elenco-diario .d-righe { flex-basis: 100%; font-size: var(--t-micro); color: var(--tenue); }
.elenco-diario .d-righe summary { cursor: pointer; }
.elenco-diario .d-righe ul { list-style: none; margin: 4px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--bordo); }
.elenco-diario .d-righe li { display: block; padding: 2px 0; border: 0; font-size: var(--t-micro); }
.elenco-diario .azioni-riga { margin-left: auto; display: flex; gap: 6px; flex: none; }
.elenco-diario .d-chi.nudo { background: none; border: 0; padding: 0; font: inherit; color: var(--tenue); cursor: pointer; text-align: left; }
.elenco-diario .d-chi.nudo:hover { color: var(--marchio); text-decoration: underline; }

/* ------------------------------------------------------- barra strumenti -- */
.strumenti {
  position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 35;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px max(18px, env(safe-area-inset-right, 0px)) 8px max(18px, env(safe-area-inset-left, 0px));
  background: var(--fondo); border-bottom: 1px solid var(--bordo);
}
/* I comandi segmentati (viste, stato) sono un VASSOIO incavato con dentro una
   posizione d'INCHIOSTRO: il pieno scuro col filo di luce e' l'unica cosa in
   rilievo della barra, e dice da lontano dove si e'. Il trattino cyan che
   c'era sotto l'etichetta non serve piu'. */
/* VIS-14: il vassoio ha il raggio dei campi (10) e le posizioni quello di un
   grado sotto (6), cosi' le curve restano concentriche. La posizione scelta e'
   l'accento pieno, piatta (D2). */
.gruppo {
  display: flex; background: var(--pista-fondo); border-radius: var(--r-2); padding: 3px; gap: 2px;
}
.gruppo button {
  padding: 5px 13px; border-radius: var(--r-1); font-size: var(--t-mini); font-weight: 500;
  color: var(--tenue); transition: var(--transizione); white-space: nowrap;
}
.gruppo button:hover { color: var(--inchiostro); background: color-mix(in srgb, var(--superficie) 70%, transparent); }
.gruppo button[aria-pressed="true"], .gruppo button[aria-pressed="true"]:hover {
  background: var(--btn-fondo); color: var(--btn-testo); font-weight: 600;
  box-shadow: var(--btn-ombra);
}
.sep { width: 1px; height: 20px; background: var(--bordo); margin: 0 4px; }

/* Il filtro di stato e' un segmented control come le viste, ma ogni posizione
   porta il suo numero: e' quello che si guarda per decidere dove andare, ed e'
   cliccabile. Il numero non e' il conteggio della selezione ma dell'insieme
   intero (vedi #ANCHOR: filtro-stato in js/stato.js), quindi resta leggibile
   anche quando il filtro e' acceso. */
.gruppo.stati button { display: inline-flex; align-items: baseline; gap: 6px; }
.gruppo.stati button .n {
  font-family: var(--f-dato); font-size: var(--t-micro); font-weight: 600;
  color: var(--tenue-2); font-style: normal;
}
.gruppo.stati button[aria-pressed="true"] .n { color: var(--btn-accento); }
.gruppo.stati button[data-stato="ritardo"] .n { color: var(--allerta); }
/* l'ambra sull'inchiostro non si legge: sulla posizione attiva si schiarisce
   verso il testo del bottone */
.gruppo.stati button[data-stato="ritardo"][aria-pressed="true"] .n {
  color: color-mix(in srgb, var(--allerta) 55%, var(--btn-testo)); }

/* Le pillole dei comandi sono piatte (D2): superficie, bordo, niente riflesso.
   Al passaggio cambia solo il bordo, non si spostano (VIS-13). */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-2); border: 1px solid var(--bordo);
  background: var(--vetro-fondo); font-size: var(--t-mini); font-weight: 500;
  color: var(--inchiostro-2); transition: var(--transizione); white-space: nowrap;
}
.pill:hover { border-color: var(--bordo-forte); background: var(--superficie); color: var(--inchiostro); }
.pill:active { background: var(--superficie-2); }
.pill[aria-pressed="true"] {
  background: var(--marchio-tenue); border-color: color-mix(in srgb, var(--marchio) 40%, transparent);
  color: var(--marchio-scuro); box-shadow: var(--alone-marchio);
}
.pill.debole { background: transparent; color: var(--tenue); border-color: transparent; box-shadow: none; }
.pill.debole:hover { border-style: dashed; border-color: var(--bordo-forte); box-shadow: none; }
/* Una pillola debole PREMUTA si accende come le altre: la regola qui sopra ha
   la stessa specificita' di `.pill[aria-pressed="true"]` e veniva dopo, quindi
   "Mostra chiusi" restava trasparente anche da acceso (30a sessione). */
.pill.debole[aria-pressed="true"] {
  background: var(--marchio-tenue); border-color: color-mix(in srgb, var(--marchio) 40%, transparent);
  border-style: solid; color: var(--marchio-scuro); box-shadow: var(--alone-marchio);
}
.pill.mini { padding: 3px 9px; min-height: 24px; font-size: var(--t-micro); border-radius: var(--r-1); }
/* la tendina resta una pillola, ma con la freccina: senza, sembrava un'etichetta */
select.pill {
  padding-right: 22px; appearance: none; cursor: pointer;
  /* la freccina E il vetro: `background-image` da solo avrebbe spento la
     sfumatura della pillola lasciando la tendina trasparente */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23666B70' stroke-width='1.5' stroke-linecap='round'/></svg>"),
                    var(--vetro-fondo);
  background-repeat: no-repeat; background-position: right 8px center, 0 0;
  background-size: 10px 6px, 100% 100%;
}

.stato-sync { display: flex; align-items: center; gap: 7px; font-size: var(--t-mini); color: var(--tenue); }
.spia { width: 7px; height: 7px; border-radius: var(--r-tonda); background: var(--accento); flex: none; }
.spia.giu  { background: var(--allerta); }
.spia.coda { background: var(--marchio); animation: pulsa 1.4s infinite; }
/* collegati, ma l'anagrafica di Access e' ferma da oltre 26 ore: ambra come
   "giu'", ma ad anello, perche' la forma dica che la rete invece c'e' */
.spia.vecchia { background: transparent; box-shadow: inset 0 0 0 2px var(--allerta); }
@keyframes pulsa { 50% { opacity: .25; } }

/* --------------------------------------------------------- linea di stato -- */
/* Saldata sotto la barra strumenti, e' l'avanzamento delle mappature dell'anno
   filtrato e si vede in tutte e tre le viste: l'unico numero che vale sempre.
   Sta dentro `.strumenti` (che e' sticky, quindi posizionata) e copre il bordo
   inferiore, cosi' non aggiunge una riga al layout. */
.filo {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--pista-fondo); overflow: hidden; z-index: 1;
}
/* MOV-08: la barra e' larga quanto la pista e scorre con `transform` (niente
   `width` animato): translateX(-58%) lascia vedere il 42%. Il riflesso infinito
   che la attraversava ogni 7 s non c'e' piu' (VIS-13). */
.filo i {
  display: block; height: 100%; width: 100%;
  background: var(--filo); border-radius: 0 var(--r-tonda) var(--r-tonda) 0;
  transform: translateX(calc(var(--w, 0%) - 100%));
  transition: transform 700ms var(--molla);
}

/* ------------------------------------------------------------- riepilogo -- */
.riepilogo { display: flex; gap: 20px; align-items: flex-start; margin-left: auto;
  flex: none; }
/* `flex-direction: column` con `align-items: flex-end` allineava a destra il
   numero e l'etichetta, ma un'etichetta su due righe ("mappature complete")
   spingeva la voce piu' in basso delle altre e la colonna sembrava sfalsata:
   ora l'etichetta non va a capo e la riga dei numeri resta una. */
.riepilogo .voce { display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.15; white-space: nowrap; padding: 0; background: none; }
/* Le voci che sono anche un filtro ("17/267 complete", "236 in ritardo"): il
   numero E' il bottone. Si annuncia con un sottolineato tratteggiato tenue,
   non con un bordo: nella testa quattro bottoni pieni erano rumore. */
.riepilogo .voce.scelta { cursor: pointer; border-radius: var(--r-1); transition: var(--transizione); }
.riepilogo .voce.scelta .et { border-bottom: 1px dashed var(--bordo-forte); }
.riepilogo .voce.scelta:hover { background: none; }
.riepilogo .voce.scelta:hover .n { color: var(--marchio-scuro); }
.riepilogo .voce.scelta:hover .et { color: var(--inchiostro-2); border-bottom-style: solid; }
.riepilogo .voce.attiva .n, .riepilogo .voce.attiva .et { color: var(--marchio-scuro); }
.riepilogo .voce.attiva .et { border-bottom: 2px solid var(--marchio); }
.riepilogo .n { font-family: var(--f-dato); font-size: var(--t-med); font-weight: 700; letter-spacing: -.02em; }
.riepilogo .et { font-size: var(--t-micro); color: var(--tenue); text-transform: uppercase; letter-spacing: .07em; }
.riepilogo .contesto {
  align-self: center; max-width: 260px; text-align: right;
  font-size: var(--t-micro); color: var(--tenue); line-height: 1.35;
  padding-left: 14px; border-left: 1px solid var(--bordo);
}
.riepilogo .contesto b { font-family: var(--f-dato); color: var(--inchiostro-2); font-weight: 600; }

/* ------------------------------------------------------------------ area -- */
.area { flex: 1; overflow: auto; scrollbar-gutter: stable; }
.vuoto { padding: 60px 20px; text-align: center; color: var(--tenue); }
.vuoto b { display: block; color: var(--inchiostro); font-size: var(--t-med); margin-bottom: 6px; }

/* ------------------------------------------------------------- notifiche -- */
.avvisi {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column-reverse; gap: 8px; align-items: center;
  pointer-events: none;
}
.avviso {
  pointer-events: auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 15px; border-radius: var(--r-3);
  background: var(--inchiostro); color: var(--fondo);
  box-shadow: var(--ombra-3);
  font-size: var(--t-mini); max-width: 92vw;
  animation: sali var(--medio) both;
}
@keyframes sali { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.avviso.esce { animation: scendi 160ms ease-in both; }
@keyframes scendi { to { opacity: 0; transform: translateY(6px) scale(.98); } }
.avviso button {
  color: inherit; font-weight: 600; padding: 3px 9px; border-radius: var(--r-1);
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.avviso.allerta { background: var(--allerta); color: var(--su-allerta); }
.avviso.ok      { background: var(--accento-scuro); color: #fff; }

/* ---------------------------------------------------------------- modale -- */
.velo {
  position: fixed; inset: 0; z-index: 80;
  /* VIS-10: un velo scuro in tutti e due i temi (l'inchiostro al buio e'
     avorio, e il velo diventava grigio chiaro). Piatto, senza sfocatura. */
  background: var(--velo-modale);
  display: grid; place-items: center; padding: 20px;
  /* MOB-17: le finestre stanno dentro le aree sicure (tacca, barra dei gesti) */
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
           max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  overscroll-behavior: contain;
  animation: sfuma var(--rapido) both;
}
@keyframes sfuma { from { opacity: 0; } }
.foglio {
  position: relative;
  background: var(--superficie); border-radius: var(--r-3);
  box-shadow: var(--ombra-3);
  border: 1px solid var(--bordo);
  width: min(520px, 100%); max-height: 86vh; overflow: auto; padding: 24px;
  overscroll-behavior: contain;
  animation: entra var(--medio) both;
}
@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
/* Foglio grande, per gli elenchi che non stanno in 520px: l'elenco per sito
   delle Statistiche si apre qui, quasi a tutta pagina. Non scorre lui, scorre
   la lista dentro, altrimenti la testa del foglio scappa via. */
.foglio.largo {
  width: min(1160px, 100%); max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column; padding: 22px 24px 24px;
}
/* I titoli delle finestre sono in display: e' la stessa voce del nome dell'app
   e dell'anno in testa, e distingue una domanda da un comando. */
.foglio h2 {
  margin: 0 0 5px; font-family: var(--f-display); font-weight: var(--p-display);
  font-size: 24px; line-height: 1.15; letter-spacing: var(--tr-display);
}
.foglio p.sotto { margin: 0 0 18px; color: var(--tenue); }
.campo { width: 100%; padding: 10px 12px; border: 1px solid var(--bordo);
  border-radius: var(--r-2); background: var(--superficie);
  transition: var(--transizione); }
.campo:hover { border-color: var(--bordo-forte); }
.campo:focus { outline: none; border-color: var(--marchio); background: var(--superficie);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marchio) 16%, transparent); }
/* Il bottone primario e' l'accento pieno di famiglia (D2), piatto: niente
   gradiente, niente lampo, e al passaggio non si sposta (VIS-13). Alto 40 px,
   44 sul tocco (MOB-09). */
.bottone {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 9px 18px; border-radius: var(--r-2);
  background: var(--btn-fondo); color: var(--btn-testo);
  font-weight: 600; font-size: var(--t-base); letter-spacing: .01em; transition: var(--transizione);
  box-shadow: var(--btn-ombra);
}
.bottone:hover { background: var(--btn-fondo-hover); }
.bottone:active { box-shadow: none; }
.bottone.piatto { background: none; color: var(--tenue); box-shadow: none; }
.bottone.piatto:hover { background: var(--fondo); color: var(--inchiostro); }
/* Il bottone di un'azione che non si disfa: colore d'allerta, non di marchio. */
.bottone.pericolo { background: var(--allerta); color: var(--su-allerta); }
.bottone.pericolo:hover { background: color-mix(in srgb, var(--allerta) 84%, var(--su-allerta)); }
/* In attesa della parola scritta (#ANCHOR: conferma-ok in js/ui.js): spento,
   ma leggibile - deve dire "non ancora", non sparire. */
.bottone:disabled, .bottone:disabled:hover {
  background: var(--st-vuoto); color: var(--tenue); cursor: not-allowed;
  box-shadow: none; transform: none;
}
.righe-scelta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

/* --------------------------------------------------------------- tendina -- */
.tendina {
  position: fixed; z-index: 78; min-width: 252px; padding: 6px;
  background: var(--superficie); border: 1px solid var(--bordo-lieve);
  border-radius: var(--r-3); box-shadow: var(--ombra-3);
  animation: entra 160ms var(--molla) both;
}
.voce {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 8px 11px; border-radius: var(--r-2); font-size: var(--t-mini);
  transition: var(--transizione);
}
.voce:hover { background: var(--marchio-tenue); color: var(--marchio-scuro); }
.voce:hover .voce-ico { color: var(--marchio-scuro); }
.voce-ico { display: flex; width: 14px; color: var(--tenue); flex: none; transition: var(--transizione); }
.voce-et { flex: 1; }
/* la nota a destra spiega la voce: e' prosa, quindi resta in Inter */
.voce-nota { font-size: var(--t-micro); color: var(--tenue-2); flex: none; }
.voce.pericolo:hover { background: var(--allerta-tenue); color: var(--allerta); }
.voce.pericolo:hover .voce-ico { color: var(--allerta); }
.voce-sep { display: block; height: 1px; margin: 6px 9px; background: var(--bordo-lieve); }

/* --------------------------------------------------------- testi minori -- */
.tit-p { margin: 0 0 6px; font-size: var(--t-mini); font-weight: 600; }
.nota-t { margin: 0; font-size: var(--t-micro); color: var(--tenue); }
code.lan {
  font: 600 var(--t-med) var(--f-dato); padding: 8px 12px; border-radius: var(--r-2);
  background: var(--marchio-tenue); color: var(--marchio-scuro);
  user-select: all; letter-spacing: -.01em;
}
.elenco-gente { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.elenco-gente li { display: flex; align-items: center; gap: 9px; font-size: var(--t-mini); }
.scelta-massa {
  display: flex; gap: 9px; align-items: flex-start; font-size: var(--t-mini);
  padding: 10px 12px; background: var(--fondo); border-radius: var(--r-2);
  margin-bottom: 14px; cursor: pointer;
}
.scelta-massa input { margin-top: 2px; accent-color: var(--marchio); flex: none; }

/* CONFERMA SCRITTA (#ANCHOR: conferma-ok in js/ui.js): il campo dove si digita
   OK prima di un'azione che non si disfa. Fondo d'allerta e bordo pieno: e'
   l'ultima cosa che si legge prima di premere, e si deve vedere che non e' un
   campo qualunque. Il bottone accanto resta disabilitato finche' la parola non
   e' quella. */
.conferma-ok {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: var(--t-mini); font-weight: 600; margin-bottom: 14px;
  padding: 10px 12px; border-radius: var(--r-2);
  background: var(--allerta-tenue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--allerta) 40%, transparent);
}
.campo-ok {
  width: 104px; flex: none; padding: 7px 10px;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  text-align: center; font-family: var(--f-dato);
}

/* ---------------------------------------------------------------- diario -- */
/* Era un pannello della vista Controlli; ora e' una voce del menu Azioni, e
   vive in una modale. Righe fitte e monospazio sull'ora: si scorre cercando
   "quando", non "cosa". */
.diario { max-height: 56vh; overflow: auto; overscroll-behavior: contain; }
.elenco-diario { list-style: none; margin: 0; padding: 0; }
.elenco-diario li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 2px; border-top: 1px solid var(--bordo); font-size: var(--t-mini);
}
.elenco-diario li:first-child { border-top: 0; }
.elenco-diario time {
  flex: none; color: var(--tenue); font-size: var(--t-micro);
}
.elenco-diario .d-txt { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.elenco-diario .d-txt b { font-weight: 600; }
.elenco-diario .d-chi {
  color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --------------------------------------------------------------- cassetto -- */
.cassetto {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 85;
  width: min(520px, 100%); background: var(--superficie);
  border-left: 1px solid var(--bordo-lieve); box-shadow: var(--ombra-3);
  display: flex; flex-direction: column;
  animation: scorri var(--medio) both;
  /* MOB-17: a tutta altezza sul telefono installato (viewport-fit=cover) il
     pannello non finisce sotto la tacca in alto ne' sotto la barra dei gesti */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) 0;
}
@keyframes scorri { from { transform: translateX(24px); opacity: 0; } }
.cassetto header { padding: 20px 22px 15px; border-bottom: 1px solid var(--bordo-lieve);
  background: var(--superficie); position: relative; /* la X segue l'area sicura */ }

/* ---- Possibili doppioni (Azioni): coppie di nomi che si somigliano ---- */
.dop-titolo { margin: 18px 0 8px; font-size: var(--t-mini); font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.dop-vuoto { margin: 0; color: var(--tenue); font-size: var(--t-mini); }
.dop-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.dop { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--bordo); border-radius: var(--r-2); background: var(--superficie-2); }
.dop-aff { display: flex; align-items: center; gap: 7px; font: 600 var(--t-micro)/1 var(--f-dato); color: var(--inchiostro-2); }
.dop-aff i { flex: 1; height: 4px; border-radius: 2px; background: var(--st-vuoto); position: relative; overflow: hidden; }
.dop-aff i::after { content: ""; position: absolute; inset: 0; width: var(--a); background: linear-gradient(90deg, var(--allerta), var(--marchio)); }
.dop-nomi { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: var(--t-mini); }
.dop-nomi small { color: var(--tenue); font-size: var(--t-micro); }
.dop-voce { display: flex; gap: 8px; align-items: baseline; min-width: 0; background: none; border: 0; padding: 0;
  font: inherit; color: var(--inchiostro); text-align: left; }
button.dop-voce { cursor: pointer; } button.dop-voce:hover span:last-child { color: var(--marchio-scuro); text-decoration: underline; }
.dop-voce .dato { font-family: var(--f-dato); font-size: var(--t-micro); color: var(--tenue-2); flex: none; }
.dop-voce span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Cestino dei PDF (Azioni, SEC-05): un file per riga, Rimetti / Elimina ---- */
.cestino { margin: 0 0 14px; }
.cestino:focus-visible { outline: 2px solid var(--marchio); outline-offset: 2px; border-radius: var(--r-2); }
.cestino-vuoto { margin: 0; color: var(--tenue); font-size: var(--t-mini); }
.cestino-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 52vh; overflow: auto; overscroll-behavior: contain; }
.cestino-riga { display: flex; gap: 12px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--bordo); border-radius: var(--r-2); background: var(--superficie-2); }
.cestino-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cestino-nome { font-size: var(--t-mini); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cestino-meta { color: var(--tenue); font-size: var(--t-micro); overflow-wrap: anywhere; }
.cestino-azioni { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
/* l'ambra scurita, come .pill.attesa: quella pura sul bianco non basta al testo */
.pill.cestino-via { color: color-mix(in srgb, var(--allerta) 82%, var(--inchiostro)); }
.pill.cestino-via:hover { color: var(--allerta); border-color: var(--allerta); background: var(--allerta-tenue); }
.cestino-fondo { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cestino-piede { margin: 0; color: var(--tenue); font-size: var(--t-mini); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .cestino-riga { flex-direction: column; align-items: stretch; }
  .cestino-azioni { justify-content: flex-start; }
}
@media (pointer: coarse) {
  .cestino-azioni .pill.mini { min-height: 44px; padding-inline: 14px; }
}

/* ---- Schede tecnici: l'icona del PDF accanto al nome del sito ---------------
   Il chip c'e' solo se il sito ha un PDF quest'anno. Cyan tenue del marchio,
   non verde: dice "c'e' il documento", non "e' a posto". #ANCHOR: documenti */
.doc-chip {
  flex: none; display: inline-flex; align-items: center; gap: 3px; height: 22px;
  padding: 0 6px; border: 1px solid color-mix(in srgb, var(--marchio) 22%, transparent);
  border-radius: var(--r-1); cursor: pointer;
  color: var(--marchio-scuro); background: var(--marchio-tenue);
  font: 600 var(--t-micro)/1 var(--f-dato); transition: var(--transizione);
}
.doc-chip:hover, .doc-chip:focus-visible { box-shadow: var(--alone-marchio); outline: 0;
  border-color: color-mix(in srgb, var(--marchio) 55%, transparent);
  background: color-mix(in srgb, var(--marchio) 20%, var(--superficie)); }
.doc-chip i { font-style: normal; padding-left: 1px; }
.doc-chips { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.doc-chips.vuoto { display: none; }
.doc-chip.altro-anno { opacity: .55; }    /* l'ultimo PDF e' di un altro anno */
/* Il REGISTRO dei componenti (documento per il cliente) ha il suo colore: il
   verde del completamento no (non e' un passo), il cyan no (e' delle schede):
   il grafite del marchio, come una cosa archiviata. #ANCHOR: tipi-documento */
.doc-chip.t-registro { color: var(--inchiostro-2);
  background: color-mix(in srgb, var(--inchiostro-2) 12%, transparent);
  border-color: color-mix(in srgb, var(--inchiostro-2) 20%, transparent); }
.doc-chip.t-registro:hover, .doc-chip.t-registro:focus-visible {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--inchiostro-2) 40%, transparent);
  border-color: color-mix(in srgb, var(--inchiostro-2) 45%, transparent);
  background: color-mix(in srgb, var(--inchiostro-2) 18%, var(--superficie)); }
/* nel cassetto: il tipo del documento sopra il nome, e i due generatori in testa */
.doc-tipo {
  display: inline-flex; align-items: center; gap: 5px; font: 600 var(--t-micro)/1 var(--f-dato);
  text-transform: uppercase; letter-spacing: .1em; color: var(--marchio-scuro);
  margin-bottom: 5px; padding: 3px 7px 3px 5px; border-radius: var(--r-tonda);
  background: var(--marchio-tenue);
}
.doc-tipo.t-registro { color: var(--inchiostro-2);
  background: color-mix(in srgb, var(--inchiostro-2) 11%, transparent); }
.sez-doc-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: 24px 0 10px; }
/* Le intestazioni di sezione del cassetto sono OCCHIELLI, come nelle
   Statistiche: monospazio maiuscoletto spaziato. La misura e il peso arrivano
   dallo stile in linea di cassetto.js, qui si cambia solo la voce. */
.cassetto .corpo h3 { font-family: var(--f-dato); text-transform: uppercase;
  letter-spacing: .14em; color: var(--tenue); }
.sez-doc-genera { display: flex; gap: 6px; flex-wrap: wrap; }
.sez-doc-genera .pill svg { color: var(--marchio-scuro); }
/* L'ANTEPRIMA AL PASSAGGIO: la prima pagina, grande abbastanza da riconoscere
   il documento senza aprirlo (152px, quasi mezza A4), in una cornice di carta -
   bordo, ombra profonda, il nome sotto in monospazio. */
.doc-anteprima {
  position: fixed; z-index: 120; pointer-events: none; opacity: 0;
  transform: translateY(-6px) scale(.97); transition: var(--transizione);
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-2);
  box-shadow: var(--ombra-3); padding: 7px; width: 166px;
  display: flex; flex-direction: column; gap: 6px;
}
.doc-anteprima.vista { opacity: 1; transform: none; }
.doc-anteprima img {
  width: 152px; aspect-ratio: 210 / 297; object-fit: cover; object-position: top center;
  border: 1px solid var(--bordo-forte); border-radius: var(--r-0); background: #fff; display: block;
  box-shadow: 0 6px 16px -8px rgba(16,26,36,.5);
}
.doc-anteprima span { font: var(--t-micro)/1.3 var(--f-dato); color: var(--tenue); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* ---- I PDF DEL SITO SONO CARTE ----------------------------------------------
   Un documento si riconosce dalla sua prima pagina, non da una riga di testo:
   ogni voce e' una carta con la miniatura VERA grande e incorniciata come un
   foglio (bordo di carta, ombra, l'angolo piegato in alto a destra), il titolo
   in chiaro e tutti i dati - pagine, peso, chi e quando - in monospazio. */
.doc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* i PDF del sito in due gruppi, uno per tipo (schede per i tecnici, registro
   per il cliente): l'occhiello del tipo e il conto, poi le carte */
.doc-tipo-gruppo + .doc-tipo-gruppo { margin-top: 16px; }
.doc-tipo-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 8px; }
.doc-tipo-testa .doc-tipo { margin-bottom: 0; }
.doc-tipo-testa .conta { font: var(--t-micro)/1 var(--f-dato); color: var(--tenue); letter-spacing: .04em; }
.doc-lista li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 12px; border: 1px solid var(--bordo-lieve); border-radius: var(--r-3);
  background: var(--superficie); box-shadow: var(--ombra-1);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.doc-lista li:hover { border-color: var(--bordo); box-shadow: var(--ombra-2); }
.doc-mini {
  position: relative; flex: none; width: 78px; height: 110px; padding: 0;
  border: 1px solid var(--bordo-forte); border-radius: var(--r-0); background: #fff;
  cursor: pointer; overflow: hidden; display: grid; place-items: center;
  color: var(--marchio-scuro); box-shadow: var(--ombra-2);
  transition: transform var(--rapido), box-shadow var(--rapido), border-color var(--rapido);
}
/* l'angolo piegato: e' il segno che quella cosa e' un foglio, e sta dove sta
   sempre - in alto a destra della prima pagina */
.doc-mini::after {
  content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px;
  background: linear-gradient(225deg,
    color-mix(in srgb, var(--fondo) 88%, var(--bordo-forte)) 0 50%, transparent 50%);
  box-shadow: -1px 1px 0 color-mix(in srgb, var(--bordo-forte) 70%, transparent);
}
.doc-mini:hover { border-color: var(--marchio);
  box-shadow: var(--ombra-2), var(--alone-marchio); }
.doc-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.doc-info { min-width: 0; font-size: var(--t-mini); }
.doc-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; font-size: var(--t-base); letter-spacing: -.01em; }
.doc-info .meta { margin-top: 4px; color: var(--tenue);
  font: var(--t-micro)/1.6 var(--f-dato); font-variant-numeric: tabular-nums; }
.doc-info .dato { font-family: var(--f-dato); }
.doc-azioni { flex: none; display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
/* un documento in fascicoli: la fila dei fascicoli sotto i dati, uno per bottone */
.doc-gruppo .fascicoli { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.doc-gruppo .fascicoli .pill { padding: 2px 9px; font-size: var(--t-micro); gap: 0; }
.doc-gruppo .fascicoli .pill b { font-family: var(--f-dato); font-weight: 700; }
.doc-gruppo .fascicoli .pill span { color: var(--tenue); }
.doc-gruppo .meta > b { color: var(--inchiostro-2); font-weight: 600; }
.doc-azioni .pill { justify-content: center; }
.sez-documenti a.pill { text-decoration: none; }
.sez-documenti a.pill svg { color: var(--marchio-scuro); }
.cassetto .corpo { flex: 1; overflow: auto; padding: 16px 20px 28px; }
.chiudi { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border-radius: var(--r-tonda); color: var(--tenue); display: grid; place-items: center; }
.chiudi:hover { background: var(--fondo); color: var(--inchiostro); }

/* Il nome del cliente in testa al cassetto e' un titolo, quindi Inter 600
   (la misura e il tracking arrivano dallo stile in linea di cassetto.js). */
.cassetto header h2 { font-family: var(--f-display); font-weight: var(--p-display); line-height: 1.15; }
/* La scheda dei dati si legge come un listino: etichetta tecnica a sinistra in
   monospaziato maiuscoletto, valore a destra. */
.dettaglio { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: var(--t-mini); }
.dettaglio dt { color: var(--tenue-2); font: 500 var(--t-micro)/1.5 var(--f-dato);
  text-transform: uppercase; letter-spacing: .07em; }
.dettaglio dd { margin: 0; }

.storia { list-style: none; margin: 10px 0 0; padding: 0; }
.storia li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--bordo-lieve);
  font-size: var(--t-mini); align-items: baseline; }
.storia time { font-family: var(--f-dato); color: var(--tenue); font-size: var(--t-micro); flex: none; }

/* ----------------------------------------------------- finestra stretta -- */
/* L'uso normale e' su PC, ma la testa non deve accavallarsi se si restringe. */
@media (max-width: 1080px) {
  .testa { gap: 12px; padding: 8px 12px; }
  .marca-testo { display: none; }          /* il logo basta a identificare l'app */
  .anno-scelta .anno { font-size: var(--t-grande); }
}
@media (max-width: 820px) {
  .testa { flex-wrap: wrap; row-gap: 6px; }
  .cerca { order: 5; flex: 1 1 100%; }
  .cerca input { width: 100%; }
  .strumenti { top: auto; position: relative; }
}

/* ------------------------------------------------------------ telefono -- */
/* VIS-25: sul telefono CronoService non e' il computer rimpicciolito (contratto
   in planning/docs/telefono.md). Prima la testa andava su tre righe e la barra
   su quattro: un terzo dello schermo prima del primo cliente. Ora la testa e'
   una riga (logo, anno, spia, operatore, tema) piu' la ricerca, e la barra e'
   UNA striscia che scorre di lato, con le viste per prime e la sfumatura a
   destra che dice che continua. Sul computer l'involucro non c'e'. */
.strumenti-striscia { display: contents; }
@media (max-width: 760px) {
  .testa {
    gap: 4px; row-gap: 6px;
    padding: calc(6px + env(safe-area-inset-top, 0px))
             max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
    min-height: 0;
  }
  .testa .marca img { height: 22px; }
  .anno-scelta { margin-left: 2px; }
  .anno-scelta .anno { padding: 0 2px; }
  /* la spia basta: "collegato / in coda" resta per i lettori di schermo e nel
     suggerimento, il foglio che si apre al tocco dice il resto */
  .stato-coll { padding: 6px 8px; gap: 6px; }
  #collegamento-et { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* il pallino con le iniziali: il nome sta nell'aria-label */
  .io { padding: 4px; position: relative; }
  .io b { display: none; }
  /* il ruolo (ADMIN / APPROVA) in fila al pallino allungava il bottone di 50 px
     e mandava operatore e tema su una seconda riga (tre righe di testa sticky):
     diventa un'etichetta appoggiata sotto il pallino, come un badge */
  .io .ruolo {
    position: absolute; left: 50%; bottom: -3px; translate: -50% 0;
    font-size: 8px; padding: 1px 3px; pointer-events: none;
    box-shadow: 0 0 0 1.5px var(--fondo);
  }
  .cerca input, .cerca input:focus { width: 100%; }
  /* il tasto Novita' (vrs-novita.js) scende accanto alla ricerca: sulla prima
     riga non c'e' posto, e li' resta sotto il pollice */
  .testa .vrs-nov-btn { order: 6; }
  .testa .cerca { flex: 1 1 calc(100% - 52px); min-width: 0; }
  /* anche la campanella delle Comunicazioni (vrs-comunicazioni.js, solo online):
     prima della stellina, e la ricerca le lascia il posto */
  .testa .vrs-com-btn { order: 6; }
  .testa:has(.vrs-com-btn:not([hidden])) .cerca { flex-basis: calc(100% - 100px); }

  .strumenti { padding: 2px 0; gap: 0; flex-wrap: nowrap; }
  .strumenti-striscia {
    display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-padding-inline: 12px; scrollbar-width: none;
    padding: 4px max(12px, env(safe-area-inset-right, 0px)) 4px max(12px, env(safe-area-inset-left, 0px));
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .strumenti-striscia::-webkit-scrollbar { display: none; }
  .strumenti-striscia > * { flex: none; }
  .strumenti-striscia::after { content: ""; flex: none; width: 16px; }  /* l'ultimo comando esce dalla sfumatura */
  .strumenti .sep { margin: 0 2px; }
  .gruppo button { padding: 5px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  /* anche le animazioni infinite (spia, riflesso) si fermano dopo un giro:
     con la sola durata a 1ms diventerebbero uno sfarfallio */
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* --------------------------------------------------------------- accesso -- */
/* Il box d'accesso e' quello di tutte le app VRS (css/vrs-accesso.css e js/vrs-accesso.js, copie
   identiche del Planning, dal 01/10/2026): qui i suoi colori puntano ai token di CronoService, che
   seguono anche la scelta `data-tema` (theme.css). Solo online: in locale non compare mai. E' una
   pagina intera e opaca, sopra tutto: l'app sotto e' `inert` finche' non si entra. */
.va, .va-pagina {
  --va-accento: var(--marchio);
  --va-fondo: var(--fondo);
  --va-superficie: var(--superficie);
  --va-superficie-2: var(--vrs-surface-2);
  --va-ink: var(--inchiostro);
  --va-ink-2: var(--inchiostro-2);
  --va-riga: var(--bordo);
  --va-riga-forte: var(--bordo-forte);
  --va-muto: var(--tenue);
  --va-pericolo: var(--scadenza);
  --va-ombra: var(--ombra-3);
  --va-f-titolo: var(--f-display);
  --va-f-testo: var(--f-ui);
  --va-curva: var(--molla);
}
.va-pagina { position: fixed; inset: 0; z-index: 300; overflow-y: auto; overscroll-behavior: contain; }

/* Un bottone in attesa (es. «Esci»): la rotella accanto all'etichetta, che non cambia */
.bottone[data-loading]:disabled { cursor: progress; opacity: 1; }
.bottone[data-loading]::before {
  content: ''; flex: none; width: 1em; height: 1em;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: bottone-gira .8s linear infinite;
}
@keyframes bottone-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bottone[data-loading]::before { animation: none; border-right-color: currentColor; opacity: .6; }
}

/* ------------------------------------------------------ salta al contenuto -- */
/* A11Y-04: il primo Tab della pagina porta dritti all'area di lavoro, senza
   attraversare testa e barra strumenti. Si vede solo a fuoco. */
.skip-link {
  position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; z-index: 200;
  padding: 10px 14px; border-radius: var(--r-2);
  background: var(--btn-fondo); color: var(--btn-testo); font-weight: 600;
  text-decoration: none; box-shadow: var(--ombra-3);
  transform: translateY(-160%); transition: transform var(--rapido);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }
#area { scroll-margin-top: 120px; }

/* -------------------------------------------------------------- al tocco -- */
/* MOB-07 / MOB-09: sul tocco ogni comando si prende con il pollice (44 px), ma
   "il bersaglio cresce, il pulsante no" (telefono.md del Planning, par. 1): la
   superficie sensibile e' un ::after trasparente centrato sul comando, il
   disegno resta quello del computer. I comandi che hanno gia' un ::after, e le
   tendine (che non ne hanno), crescono davvero in altezza. */
@media (pointer: coarse) {
  /* .cerca-x e .chiudi sono gia' posizionati (absolute): non si toccano */
  .frecc, .pill, .gruppo button, .io, .stato-coll, .doc-chip,
  .riepilogo .voce.scelta, .avviso button, .banner button {
    position: relative;
  }
  .frecc::after, .pill::after, .gruppo button::after, .cerca-x::after, .io::after,
  .chiudi::after, .stato-coll::after, .doc-chip::after, .riepilogo .voce.scelta::after,
  .mese-nav button::after, .avviso button::after, .banner button::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .io { min-width: 24px; min-height: 24px; }
  select.pill { min-height: 44px; }
  .bottone, .voce { min-height: 44px; }
  .campo { min-height: 44px; }
}

/* ---- SCANSIONI CONTROLLATE DAL TECNICO (#ANCHOR: scansioni) ------------------
   La finestra «Carica una scansione» (js/scansioni-vista.js): in testa i due
   modi di aggiungere fogli, poi le pagine in fila (ognuna con i suoi tasti) e il
   ritocco di quella scelta, sotto nome, visita, la conferma del controllo e il
   salvataggio. Sul telefono tutto in colonna, i tasti a 44 px. */
.doc-tipo.t-scansione, .doc-chip.t-scansione { color: var(--completa-testo);
  background: color-mix(in srgb, var(--completa-testo) 11%, transparent); }
.doc-chip.t-scansione { border-color: color-mix(in srgb, var(--completa-testo) 22%, transparent); }
.doc-controllo { display: inline-flex; align-items: center; gap: 4px; color: var(--completa-testo);
  font-weight: 600; }
/* si apre dal cassetto (z 85): la finestra gli sta sopra, gli avvisi (z 90) sopra a lei */
.velo:has(> .scan-foglio) { z-index: 86; }
.foglio.scan-foglio { overflow: auto; display: block; }
.foglio.scan-foglio.scan-sopra { outline: 2px dashed var(--marchio); outline-offset: -8px; }
.scan-aggiungi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.pill.scan-grande { min-height: 40px; padding: 8px 14px; font-weight: 600; gap: 7px;
  display: inline-flex; align-items: center; }
.pill.scan-grande svg { color: var(--marchio-scuro); }
.scan-tutti { margin-left: auto; }
.scan-errore { margin: 6px 0; font-size: var(--t-mini); font-weight: 600; color: var(--allerta); }
.scan-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px;
  align-items: start; margin: 8px 0 14px; }
.scan-pagine { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); max-height: 62vh; overflow: auto;
  overscroll-behavior: contain; padding: 2px; }
.scan-pag { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border: 1px solid var(--bordo-lieve); border-radius: var(--r-3); background: var(--superficie);
  box-shadow: var(--ombra-1); min-width: 0; }
.scan-pag.scelta { border-color: var(--marchio); box-shadow: var(--alone-marchio); }
.scan-mini { display: grid; place-items: center; height: 140px; padding: 4px; border-radius: var(--r-1);
  background: var(--fondo); border: 1px solid var(--bordo-lieve); cursor: pointer; }
.scan-mini canvas { max-width: 100%; max-height: 130px; background: #fff;
  box-shadow: 0 4px 12px -6px rgba(16,26,36,.45); }
.scan-mini:focus-visible, .scan-tasto:focus-visible { outline: 2px solid var(--marchio); outline-offset: 2px; }
.scan-num { position: absolute; top: 12px; left: 12px; padding: 2px 6px; border-radius: var(--r-tonda);
  font: 600 var(--t-micro)/1.2 var(--f-dato); background: var(--superficie); color: var(--inchiostro-2);
  font-variant-numeric: tabular-nums; box-shadow: var(--ombra-1); pointer-events: none; }
.scan-azioni { display: flex; justify-content: space-between; gap: 2px; }
.scan-tasto { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-1);
  color: var(--inchiostro-2); transition: background-color var(--rapido), color var(--rapido); }
.scan-tasto:hover:not(:disabled) { background: var(--marchio-tenue); color: var(--marchio-scuro); }
.scan-tasto:disabled { opacity: .35; cursor: default; }
.scan-ritocco { min-width: 0; }
.scan-ritocco h3 { margin: 0 0 8px; font-size: var(--t-mini); font-weight: 600; }
.scan-anteprima { display: grid; place-items: center; padding: 10px; border-radius: var(--r-2);
  background: var(--fondo); border: 1px solid var(--bordo-lieve); }
.scan-grande-tela { max-width: 100%; max-height: 44vh; background: #fff;
  box-shadow: 0 8px 20px -10px rgba(16,26,36,.5); }
.scan-righe { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.scan-gira-sx svg { transform: scaleX(-1); }
.scan-regolazioni { border: 0; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.scan-regolazioni legend { padding: 0; margin-bottom: 4px; font-size: var(--t-micro); font-weight: 600;
  color: var(--tenue); text-transform: uppercase; letter-spacing: .1em; font-family: var(--f-dato); }
.scan-reg { display: grid; grid-template-columns: 78px minmax(0, 1fr) 46px; align-items: center; gap: 8px;
  font-size: var(--t-mini); min-height: 32px; }
.scan-reg output { font: var(--t-micro) var(--f-dato); color: var(--tenue); text-align: right;
  font-variant-numeric: tabular-nums; }
.scan-cursore { width: 100%; accent-color: var(--marchio); min-height: 24px; }
.scan-pdf { width: 100%; height: 48vh; border: 1px solid var(--bordo); border-radius: var(--r-2); margin-top: 8px; }
.scan-vuoto { margin: 0; padding: 26px 18px; border: 1px dashed var(--bordo-forte); border-radius: var(--r-3);
  color: var(--tenue); font-size: var(--t-mini); text-align: center; text-wrap: balance; }
.scan-dati { display: grid; gap: 8px; max-width: 640px; }
.scan-campo { display: grid; gap: 4px; font-size: var(--t-mini); font-weight: 600; }
.scan-campo select.campo { background-color: var(--superficie); color: var(--inchiostro); }
.scan-scelta { display: flex; gap: 9px; align-items: flex-start; font-size: var(--t-mini); cursor: pointer;
  padding: 8px 10px; border-radius: var(--r-2); min-height: 24px; }
.scan-scelta input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--marchio); }
.scan-scelta input:disabled + span { color: var(--tenue); }
.scan-controllo { background: var(--marchio-tenue); font-weight: 600; }
.scan-stato { min-height: 1.4em; margin: 10px 0 0; font-size: var(--t-mini); color: var(--tenue);
  font-variant-numeric: tabular-nums; }
.scan-piede { position: sticky; bottom: -24px; display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 0 0; margin-top: 4px; background: var(--superficie); }
.scan-giro { display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; }
.scan-salva[aria-busy="true"] .scan-giro { display: inline-block; animation: scan-gira 700ms linear infinite; }
@keyframes scan-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .scan-salva[aria-busy="true"] .scan-giro { animation-duration: 2.4s; }
}
@media (max-width: 760px) {
  .scan-corpo { grid-template-columns: minmax(0, 1fr); }
  .scan-pagine { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); max-height: none; }
  .scan-mini { height: 116px; }
  .scan-mini canvas { max-height: 106px; }
  .scan-tutti { margin-left: 0; }
  .scan-piede .bottone { flex: 1; }
}
@media (pointer: coarse) {
  .scan-tasto { width: 44px; height: 44px; }
  .scan-azioni { flex-wrap: wrap; justify-content: center; }
  .scan-scelta { min-height: 44px; align-items: center; }
  .scan-scelta input { width: 22px; height: 22px; margin-top: 0; }
  .scan-reg { min-height: 44px; }
  .scan-cursore { min-height: 44px; }
  .pill.scan-grande { min-height: 48px; }
  .scan-campo .campo, #scan-nome { font-size: 16px; }
}