/* Cartelle condivise con QR — foglio di stile unico del pannello operatore.
   Un file solo e non tre: il pannello e' piccolo, e tre richieste in fila su
   una rete mobile costano piu' dei byte che si risparmiano dividendolo.

   Si progetta a 360 px e si allarga (SPEC §5): qui dentro le regole di base
   valgono per il telefono, e le @media aggiungono cio' che serve sullo
   schermo largo. Ogni area tocchabile e' alta almeno 44 px.

   Le classi sono in italiano come i nomi delle funzioni: le schermate scritte
   da mani diverse devono poter usare le stesse, senza inventarne di nuove.
   L'indice sta in fondo al file, nel commento "CLASSI DISPONIBILI". */

/* ================================================================ token */
:root{
  /* superfici e testo */
  --carta:#fff;
  --tela:#F3F5F9;
  --linea:#E3E7EF;
  --linea2:#CDD4E1;
  --txt:#0E1620;
  --t2:#55607A;
  --t3:#8A93A8;

  /* marchio: il blu dell'insegna della carrozzeria */
  --br:#123A6B;
  --br2:#1F5FA8;
  --br-s:#E8EFF8;
  --br-h:#0D2E56;

  /* stati */
  --verde:#12805C;--verde-s:#E3F5EE;
  --ambra:#B0700C;--ambra-s:#FFF4E0;
  --rosso:#D23B3F;--rosso-s:#FDECEC;--rosso-linea:#F3C6C8;
  --grigio:#B4BBC9;

  /* ombre, raggi, misure ricorrenti */
  --sh:0 1px 2px rgba(14,22,32,.05),0 8px 22px -14px rgba(14,22,32,.28);
  --sh-alta:0 24px 60px -20px rgba(14,22,32,.42);
  --r:18px;
  --r-piccolo:12px;
  --tocco:44px;

  /* altezza della barra in alto: la usano il contenuto appiccicoso e le
     schermate che si ancorano sotto di essa */
  --alt-barra:60px;

  /* altezza della barra delle sezioni quando sta in fondo (sotto i 560 px):
     52 px di voci piu' 4 di imbottitura. La tacca inferiore si aggiunge a
     parte, dove serve, perche' e' zero sui telefoni che non ce l'hanno. */
  --alt-voci:56px;

  /* il pannello dei caricamenti copre il fondo: le viste lasciano questo
     spazio libero in fondo alla pagina, cosi' l'ultima riga resta leggibile */
  --fondo-sicuro:calc(env(safe-area-inset-bottom, 0px) + 16px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  color:var(--txt);background:var(--tela);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100dvh;overflow-wrap:anywhere
}
h1{font-size:24px;line-height:1.15;letter-spacing:-.02em}
h2{font-size:19px;line-height:1.2;letter-spacing:-.015em}
h3{font-size:16px;line-height:1.25}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
svg{flex:none}

/* Accessibilita': il contorno di tastiera si vede sempre, anche sopra le
   miniature scure dell'anteprima. */
:focus-visible{outline:3px solid var(--br2);outline-offset:2px;border-radius:10px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.senza-js{max-width:520px;margin:60px auto;padding:24px;text-align:center}
.senza-js h1{margin-bottom:8px}

/* ============================================================== utility */
.riga{display:flex;align-items:center;gap:10px}
.riga.avvolgi{flex-wrap:wrap}
.colonna{display:flex;flex-direction:column;gap:10px}
.spazio{flex:1}
.t2{color:var(--t2)}
.t3{color:var(--t3)}
.piccolo{font-size:13px}
.minuto{font-size:12px}
.num{font-variant-numeric:tabular-nums}
.tronca{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nascosto{display:none!important}
.centrato{text-align:center}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}
.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
/* Visibile solo ai lettori di schermo: le etichette dei bottoni con la sola
   icona stanno qui, non in un title che sul telefono nessuno vede. */
.solo-voce{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================== impianto */
.contenuto{max-width:1180px;margin:0 auto;padding:0 14px}
.strato{padding:16px 0 calc(96px + var(--fondo-sicuro))}

/* barra in alto: resta appiccicata perche' la quota e la ricerca servono
   anche dopo aver scorso trecento file */
.barra-alta{position:sticky;top:0;z-index:40;background:var(--carta);border-bottom:1px solid var(--linea)}
.barra-alta .interno{min-height:var(--alt-barra);display:flex;align-items:center;gap:10px;padding:8px 14px}
/* I 14 px per lato sono quelli di .contenuto, che qui il `padding:8px` della
   riga sopra azzerava: la barra finiva a filo dello schermo e a 320 px il
   bottone "Esci" toccava il bordo destro, dove il pollice lo prende insieme
   al gesto di sistema. Con l'imbottitura restano 292 px utili e ne servono
   249 (marchio 30 + 10 + "Nuova cartella" 155 + 10 + Esci 44): 43 px di
   respiro elastico, e la barra si allinea con la matrice che sta sotto. */
.marchio{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em}
.marchio .segno{width:30px;height:30px;border-radius:9px;background:var(--br);display:grid;place-items:center;color:#fff;flex:none}
.marchio .nome{font-size:15px;line-height:1.1}
.marchio .nome span{display:block;font-size:11px;font-weight:600;color:var(--t3);letter-spacing:0}
@media (max-width:479px){.marchio .nome{display:none}}

/* briciole di pane: tre livelli al massimo, come il limite delle cartelle */
.briciole{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--t2);margin-bottom:12px}
.briciole a,.briciole button{padding:4px 2px;font-weight:600;color:var(--t2)}
.briciole a:hover,.briciole button:hover{color:var(--txt);text-decoration:underline}
.briciole .sep{color:var(--t3)}
.briciole .qui{color:var(--txt);font-weight:700}

/* ================================================================ quota */
/* L'informazione piu' importante del prodotto: lo spazio e' il vincolo del
   progetto, quindi sta sotto la barra e non dentro un menu. */
.quota{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)}
.quota .testa{display:flex;align-items:baseline;gap:8px;justify-content:space-between;margin-bottom:8px}
.quota .valore{font-weight:800;font-variant-numeric:tabular-nums}
.quota .nota{font-size:12px;color:var(--t3)}
.barra-avanz{height:10px;border-radius:999px;background:var(--tela);overflow:hidden;display:flex}
.barra-avanz i{display:block;height:100%;background:var(--verde);transition:width .35s ease}
.barra-avanz.sottile{height:6px}
.quota.attenzione .barra-avanz i{background:var(--ambra)}
.quota.attenzione .valore{color:var(--ambra)}
.quota.critica .barra-avanz i{background:var(--rosso)}
.quota.critica .valore{color:var(--rosso)}

/* =============================================================== bottoni */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tocco);padding:0 18px;border-radius:999px;white-space:nowrap;
  font-size:14.5px;font-weight:700;color:var(--txt);
  border:1px solid var(--linea2);background:var(--carta);
  transition:background .15s,border-color .15s,transform .1s
}
.btn:hover{background:var(--tela)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primario{background:var(--br);border-color:var(--br);color:#fff}
.btn-primario:hover{background:var(--br-h)}
.btn-fantasma{background:transparent;border-color:transparent;color:var(--t2)}
.btn-fantasma:hover{background:var(--tela);color:var(--txt)}
.btn-pericolo{color:var(--rosso);border-color:var(--rosso-linea);background:var(--carta)}
.btn-pericolo:hover{background:var(--rosso-s)}
.btn-piccolo{min-height:36px;padding:0 13px;font-size:13px}
.btn-grande{min-height:54px;padding:0 24px;font-size:16px}
.btn-largo{width:100%}
.btn-icona{width:var(--tocco);min-height:var(--tocco);padding:0;border-radius:999px}

/* Bottone fisso "+ Nuova cartella": in basso a destra, dove arriva il pollice.
   Sale sopra il pannello dei caricamenti quando questo e' aperto (classe
   .con-pannello messa dalla vista che monta il pannello). */
.fab{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;
  min-height:54px;padding:0 22px;border-radius:999px;border:0;
  background:var(--br);color:#fff;font-weight:800;font-size:15px;
  display:inline-flex;align-items:center;gap:9px;box-shadow:0 12px 28px -12px rgba(18,58,107,.9)
}
.fab:active{transform:scale(.97)}
body.con-pannello .fab{bottom:calc(126px + env(safe-area-inset-bottom,0px))}

/* ======================================================== pillole e stati */
.pillola{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--tela);color:var(--t2);white-space:nowrap}
.pillola.verde{background:var(--verde-s);color:var(--verde)}
.pillola.ambra{background:var(--ambra-s);color:var(--ambra)}
.pillola.rossa{background:var(--rosso-s);color:var(--rosso)}
.pillola.blu{background:var(--br-s);color:var(--br)}
.pallino{width:9px;height:9px;border-radius:999px;background:var(--grigio);flex:none}
.pallino.verde{background:var(--verde)}
.pallino.ambra{background:var(--ambra)}
.pallino.rosso{background:var(--rosso)}

/* ============================================================= contenitori */
.scheda{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sh)}
.imbottita{padding:16px}
.titolo-sezione{display:flex;align-items:center;gap:10px;margin:20px 0 10px}
.titolo-sezione h2{font-size:17px}
.vuoto{padding:36px 18px;text-align:center;color:var(--t2)}
.vuoto h3{margin-bottom:6px}
.caricando{padding:28px;text-align:center;color:var(--t3)}
.divisorio{height:1px;background:var(--linea);margin:14px 0}

/* ================================================================= moduli */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:12.5px;font-weight:700;color:var(--t2);margin-bottom:6px}
.input,.select,.textarea{
  width:100%;min-height:var(--tocco);border:1px solid var(--linea2);border-radius:var(--r-piccolo);
  padding:11px 13px;font:inherit;font-size:16px; /* 16px: sotto questa misura iOS ingrandisce da solo il modulo */
  background:var(--carta);color:var(--txt);outline:none
}
.textarea{min-height:88px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--br2);box-shadow:0 0 0 4px var(--br-s)}
.input.errato{border-color:var(--rosso);box-shadow:0 0 0 4px var(--rosso-s)}
.errore-campo{color:var(--rosso);font-size:13px;font-weight:600;margin-top:6px}
.aiuto{color:var(--t3);font-size:12.5px;margin-top:6px}
.cerca{width:100%;min-height:40px;border:1px solid var(--linea);border-radius:999px;padding:0 14px;font:inherit;font-size:16px;background:var(--tela);outline:none}
.cerca:focus{border-color:var(--br2);background:var(--carta)}
.griglia2{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.griglia2{grid-template-columns:1fr 1fr}}
/* schede grandi di scelta (permesso del link, genere del caricamento) */
.scelta{display:block;width:100%;text-align:left;border:1.5px solid var(--linea2);border-radius:var(--r);padding:14px;background:var(--carta)}
.scelta.attiva{border-color:var(--br);background:var(--br-s)}
.scelta b{display:block;margin-bottom:3px}

/* ======================================================= elenco cartelle */
.elenco-cartelle{display:flex;flex-direction:column;gap:10px}
.riga-cartella{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);padding:12px 8px 12px 14px;box-shadow:var(--sh)}
.riga-cartella:hover{border-color:var(--linea2)}
.riga-cartella .icona{width:40px;height:40px;border-radius:11px;background:var(--br-s);color:var(--br);display:grid;place-items:center;flex:none}
.riga-cartella .corpo{flex:1;min-width:0}
.riga-cartella .nome{font-weight:700;font-size:15.5px}
.riga-cartella .meta{font-size:12.5px;color:var(--t2);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.riga-cartella .apri{color:var(--t3);flex:none}

/* menu "..." di riga: si apre ancorato alla riga, si chiude toccando fuori */
.menu-azioni{position:relative;flex:none}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:190px;
  background:var(--carta);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sh-alta);overflow:hidden;padding:6px}
.menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border-radius:10px;font-size:14.5px;font-weight:600;text-align:left}
/* Sette voci fanno ~330 px: su un telefono in orizzontale non ci starebbero.
   Il menu scorre dentro se stesso invece di uscire dallo schermo. */
.menu{max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain}
.menu button:hover{background:var(--tela)}
.menu button.pericolo{color:var(--rosso)}
.menu button.pericolo:hover{background:var(--rosso-s)}
.menu .sep{height:1px;background:var(--linea);margin:5px 4px}

/* ==================================================== griglia e elenco file */
/* Griglia: quadrati, tre per riga sul telefono. Le miniature sono 320 px,
   quindi oltre i 200 px di lato si sgranerebbero: la colonna si ferma li'. */
.griglia-file{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
@media (min-width:640px){.griglia-file{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}}
.cella-file{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--linea);border:0;padding:0;display:block}
.cella-file img{width:100%;height:100%;object-fit:cover}
.cella-file .senza-mini{width:100%;height:100%;display:grid;place-items:center;color:var(--t3);background:var(--tela)}
.cella-file .durata{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.62);color:#fff;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.cella-file .fascetta{position:absolute;left:0;right:0;bottom:0;background:rgba(176,112,12,.92);color:#fff;font-size:11px;font-weight:700;padding:3px 6px;text-align:center}
.cella-file .segno-video{position:absolute;left:6px;top:6px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.cella-file.selezionata{outline:3px solid var(--br);outline-offset:-3px}
.selettore{position:absolute;left:6px;top:6px;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.9);border:1.5px solid var(--linea2);display:grid;place-items:center;color:var(--br)}
.cella-file.selezionata .selettore{background:var(--br);border-color:var(--br);color:#fff}

/* Elenco: la stessa informazione della griglia piu' autore e data, che nella
   griglia sporcherebbero le miniature. */
.elenco-file{display:flex;flex-direction:column;gap:6px}
.riga-file{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--carta);border:1px solid var(--linea);border-radius:14px;padding:8px 12px}
.riga-file .mini{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--tela);flex:none}
.riga-file .corpo{flex:1;min-width:0;display:block}
/* `display:block` non e' decorazione: nel cestino nome e meta sono <span>, e su
   un elemento in linea `overflow:hidden` non taglia nulla. Il nome di un video
   ("video-lavorazione-fiancata-destra-1002.mp4") allargava la riga a 363 px
   dentro 290, e con lei tutta la pagina: a 320 il documento misurava 378 e la
   barra bassa finiva mezza fuori dallo schermo. */
.riga-file .nome{font-weight:600;font-size:14.5px;display:block;min-width:0}
.riga-file .meta{font-size:12px;color:var(--t2);margin-top:2px;display:block;min-width:0;overflow-wrap:anywhere}
.riga-file>.btn,.riga-file>.pillola{flex:none;max-width:100%}
.riga-file.selezionata{border-color:var(--br);background:var(--br-s)}

/* riga di strumenti: vista, ordinamento, verso, selezione */
.barra-strumenti{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.gruppo-scelte{display:inline-flex;background:var(--tela);border-radius:999px;padding:3px;gap:2px}
.gruppo-scelte button{min-height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--t2)}
.gruppo-scelte button.attivo{background:var(--carta);color:var(--txt);box-shadow:0 1px 3px rgba(14,22,32,.14)}

/* ================================================== anteprima a schermo intero */
.anteprima-piena{position:fixed;inset:0;z-index:90;background:#07090C;color:#fff;display:flex;flex-direction:column;touch-action:pan-y}
.anteprima-piena .tela{flex:1;display:grid;place-items:center;overflow:hidden;padding:8px}
.anteprima-piena .tela img,.anteprima-piena .tela video{max-width:100%;max-height:100%;object-fit:contain}
.anteprima-piena .chiudi{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:8px;z-index:2;
  width:var(--tocco);height:var(--tocco);border-radius:999px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.nav-anteprima{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.nav-anteprima.prec{left:8px}
.nav-anteprima.succ{right:8px}
.anteprima-piena .piede{padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.anteprima-piena .piede .dati{flex:1;min-width:0}
.anteprima-piena .piede .nome{font-weight:700}
.anteprima-piena .piede .meta{font-size:12.5px;color:#C9CFDA}
.anteprima-piena .btn{background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
.anteprima-piena .btn:hover{background:rgba(255,255,255,.24)}
.anteprima-piena .btn-pericolo{color:#FFB3B5;border-color:transparent}
/* La testa tiene solo il contatore "3 di 12": la x e' posizionata da sola
   sopra la tela, quindi qui serve spazio a destra per non finirci sotto. */
.anteprima-piena .testa{padding:calc(8px + env(safe-area-inset-top,0px)) calc(8px + var(--tocco)) 8px 14px;display:flex;align-items:center;min-height:var(--tocco)}
.anteprima-piena .testa .contatore{font-size:13px;color:#C9CFDA;font-variant-numeric:tabular-nums}
/* Le azioni del piede non si stringono: sono i bersagli da 44 px che si
   toccano con i guanti, e devono restare tali anche a 360 px. */
.anteprima-piena .piede .azioni{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
/* Il video sta in una cornice perche' sotto ci finiscono gli avvisi: senza,
   il messaggio "in lavorazione" coprirebbe i comandi del player. */
.anteprima-piena .cornice-video{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;max-height:100%}
.anteprima-piena .avviso-anteprima,.anteprima-piena .nota-anteprima{max-width:44ch;text-align:center;font-size:13px;line-height:1.45;margin:0;padding:8px 12px;border-radius:var(--r-piccolo)}
.anteprima-piena .avviso-anteprima{background:rgba(210,59,63,.22);color:#FFD4D5}
.anteprima-piena .nota-anteprima{background:rgba(255,255,255,.12);color:#C9CFDA}

/* ============================================================== finestre */
.velo{position:fixed;inset:0;z-index:80;background:rgba(14,22,32,.55);display:flex;align-items:flex-end;justify-content:center;padding:0;animation:comparsa .14s ease}
@keyframes comparsa{from{opacity:0}to{opacity:1}}
/* Sul telefono la finestra sale dal basso come un foglio: e' il gesto che ci
   si aspetta e lascia il pollice vicino ai bottoni. */
.finestra{width:100%;max-width:640px;max-height:92dvh;overflow:auto;background:var(--carta);
  border-radius:22px 22px 0 0;box-shadow:var(--sh-alta);animation:salita .18s ease;
  padding-bottom:env(safe-area-inset-bottom,0px)}
@keyframes salita{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.finestra-testa{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 18px 0}
.finestra-testa h3{font-size:18px}
.finestra-corpo{padding:14px 18px 18px}
.finestra-piede{display:flex;gap:10px;padding:0 18px 18px;flex-wrap:wrap}
.finestra-piede .btn{flex:1;min-width:130px}
.chiudi-x{width:36px;height:36px;border-radius:999px;background:var(--tela);color:var(--t2);display:grid;place-items:center;flex:none}
.chiudi-x:hover{background:var(--linea)}
@media (min-width:640px){
  .velo{align-items:center;padding:20px}
  .finestra{border-radius:22px}
  .finestra.larga{max-width:820px}
}

/* ================================================ pannello dei caricamenti */
/* Ancorato in basso mentre la coda lavora: chi carica deve vedere a colpo
   d'occhio quanto manca, senza tornare indietro fra le schermate. */
.pannello-caricamenti{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--carta);
  border-top:1px solid var(--linea);box-shadow:0 -12px 30px -18px rgba(14,22,32,.5);
  padding-bottom:env(safe-area-inset-bottom,0px);max-height:60dvh;display:flex;flex-direction:column}

/* MISURATO: con una selezione attiva e la coda che lavora, il pannello (z 70)
   si sedeva esattamente sulla barra delle azioni (z 55) — 144,5 px di
   sovrapposizione a 320/360/390, 92,5 a 768 e 844x390, e "Sposta", "Copia",
   "Modifica", "Scarica", "Elimina" tutti irraggiungibili: il tocco finiva sul
   pannello. Le due barre non si contendono piu' il fondo, si impilano; il
   pannello si accorcia di quanto ha ceduto, cosi' la somma resta sotto il
   mezzo schermo anche col telefono girato. */
body:has(.barra-selezione:not([hidden])) .pannello-caricamenti{
  bottom:var(--alt-selezione);
  padding-bottom:0;
  max-height:min(44dvh, calc(100dvh - var(--alt-selezione) - 120px))
}
.pannello-caricamenti .testa{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.pannello-caricamenti .testa b{font-size:15px}
.pannello-caricamenti .righe{overflow:auto;padding:0 14px 12px;display:flex;flex-direction:column;gap:10px}
.riga-caricamento{display:flex;align-items:center;gap:10px}
.riga-caricamento .corpo{flex:1;min-width:0}
.riga-caricamento .nome{font-size:13.5px;font-weight:600}
.riga-caricamento .stato{font-size:12px;color:var(--t2);margin-top:2px;font-variant-numeric:tabular-nums}
.riga-caricamento.fallita .stato{color:var(--rosso)}
.riga-caricamento .barra-avanz{margin-top:5px}

/* ============================================================ avvisi e messaggi */
.avviso{border-radius:14px;padding:11px 13px;font-size:13.5px;line-height:1.45;background:var(--br-s);color:var(--br);border:1px solid transparent}
.avviso.ambra{background:var(--ambra-s);color:var(--ambra)}
.avviso.rosso{background:var(--rosso-s);color:var(--rosso);border-color:var(--rosso-linea)}
.avviso.verde{background:var(--verde-s);color:var(--verde)}
.avviso b{font-weight:800}

.messaggi{position:fixed;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:100;
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 12px;pointer-events:none}
.messaggio{max-width:520px;width:100%;background:var(--txt);color:#fff;border-radius:14px;padding:11px 14px;
  font-size:14px;font-weight:600;box-shadow:var(--sh-alta);animation:salita .16s ease}
.messaggio.errore{background:var(--rosso)}
.messaggio.ok{background:var(--verde)}

/* ============================================================== accesso */
.accesso{min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:
  linear-gradient(180deg,var(--br-s),var(--tela) 60%)}
.scheda-accesso{width:100%;max-width:400px;background:var(--carta);border:1px solid var(--linea);
  border-radius:24px;box-shadow:var(--sh-alta);padding:26px 22px;text-align:center}
.scheda-accesso .segno{width:52px;height:52px;border-radius:15px;background:var(--br);color:#fff;display:grid;place-items:center;margin:0 auto 14px}
.scheda-accesso .campi{text-align:left;margin-top:18px}

/* =============================================== condivisione, QR e stampa */
.qr-grande{width:100%;max-width:280px;margin:0 auto;display:block;background:#fff;border:1px solid var(--linea);border-radius:16px;padding:10px}
.codice-link{display:flex;align-items:center;gap:8px;background:var(--tela);border:1px solid var(--linea);border-radius:12px;padding:10px 12px;font-size:13px;word-break:break-all}
@media print{
  .barra-alta,.voci,.fab,.pannello-caricamenti,.messaggi,.menu,.btn,
  .barra-selezione,.barra-cerca,.filtri-attivi,.puntini{display:none!important}
  body{background:#fff}
  .scheda{box-shadow:none;border-color:#999}
}

/* ======================================================= schermo largo */
@media (min-width:900px){
  .contenuto{padding:0 22px}
  .strato{padding:24px 0 120px}
  h1{font-size:28px}
  .elenco-cartelle{gap:8px}
  .riga-cartella{padding:14px 10px 14px 16px}
}

/* =========================================================== file manager
   La schermata dentro la cartella (SPEC-FILE-MANAGER §4) smette di essere una
   galleria e diventa un gestore di file: selezione, filtri, rinomina, copia,
   spostamento. Tutto quello che segue e' AGGIUNTO al vocabolario di sopra e non
   lo sostituisce: le altre schermate continuano a usare le stesse classi di
   prima. Dove una regola ritocca un componente gia' esistente (.cella-file,
   .selettore, .griglia-file) lo fa qui in coda, di proposito, cosi' si vede a
   colpo d'occhio cosa e' cambiato e perche'. */

/* --- token aggiunti ---
   Si aggiungono qui e non sparsi nelle regole: la convenzione del foglio e' che
   ogni colore vive in :root. */
:root{
  /* grigio "pieno" per la fase 'documento': le altre tre fasi usano i tre
     colori di stato gia' esistenti, la quarta aveva solo il grigio da bordo
     (--grigio), troppo chiaro per portarci sopra del testo leggibile. */
  --grigio-s:#EDEFF4;
  --grigio-t:#414B60;

  /* Il velo azzurro che si posa sulla miniatura selezionata. Serve perche' in
     officina lo schermo si guarda in pieno sole: il solo contorno blu su una
     foto chiara sparisce, il velo no. */
  --sel-velo:rgba(18,58,107,.30);

  /* Fondo delle miniature mentre l'immagine arriva: piatto, non bianco, cosi'
     la griglia non lampeggia riga per riga sulla 4G dell'officina. */
  --scheletro:#E7EAF1;
  --scheletro2:#F2F4F8;

  /* Altezza della barra della selezione: la usa il riempimento in fondo alla
     pagina, cosi' l'ultima riga di file non finisce mai sotto la barra.
     93 px sono la misura vera, presa nel browser a 320 px con i cinque
     bottoni (Sposta, Copia, Modifica, Scarica, Elimina): conteggio 8 + 17,
     azioni 10 + 44 (il bersaglio pieno) + 10, piu' il bordo. Diceva 70:
     nessuno se ne accorgeva perche' i 96 px di riempimento che si sommano
     al token coprivano i 23 mancanti, ma il primo che avesse ridotto quel
     96 si sarebbe trovato l'ultima riga di foto sotto la barra senza capire
     perche'. Un token si misura, non si stima. */
  --alt-selezione:93px; /* rimisurato in coda al foglio: vedi C1 */
}

/* ---------------------------------------------- griglia che non balla mai */
/* Da 320 px in su. Sotto i 360 px la colonna scende a 92 px per tenere le tre
   per riga anche sui telefoni piccoli: due colonne enormi su uno schermo
   stretto fanno scorrere il doppio per vedere le stesse foto. */
@media (max-width:359px){
  .griglia-file{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
}
/* Su schermo largo si cresce, ma non oltre sei colonne: le miniature sono
   320 px e piu' larghe di cosi' si sgranerebbero (SPEC-FILE-MANAGER §4.7). */
@media (min-width:900px){
  .griglia-file{grid-template-columns:repeat(auto-fill,minmax(max(150px,calc((100% - 60px) / 6)),1fr));gap:12px}
}

/* La cella ha gia' aspect-ratio:1, quindi lo spazio e' prenotato prima che
   l'immagine arrivi e la griglia non si riassesta: nessun salto di layout.
   Qui si aggiunge solo il modo in cui il vuoto viene riempito nell'attesa. */
.cella-file{background:var(--scheletro);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cella-file .scheletro{
  position:absolute;inset:0;
  background:linear-gradient(100deg,var(--scheletro) 30%,var(--scheletro2) 50%,var(--scheletro) 70%);
  background-size:220% 100%;animation:scorri-scheletro 1.1s linear infinite
}
@keyframes scorri-scheletro{from{background-position:120% 0}to{background-position:-120% 0}}
/* L'immagine entra in dissolvenza sopra lo scheletro: nessuno stacco netto e
   nessuno spostamento. La classe .in-arrivo la mette il JS prima di assegnare
   src e la toglie su 'load'; se il JS non ce la mette, l'immagine si vede
   subito. Il difetto scelto e' "si vede troppo presto", mai "resta invisibile". */
.cella-file img.in-arrivo,.riga-file .mini.in-arrivo{opacity:0}
.cella-file img,.riga-file .mini{transition:opacity .18s ease}
/* L'immagine DEVE essere posizionata, altrimenti lo scheletro la copre.
   .scheletro e' position:absolute e l'immagine no: fra un elemento
   posizionato e uno che non lo e', il primo sta sopra a prescindere
   dall'ordine nel documento. Il commento in file-card.js diceva il
   contrario ("lo scheletro sta sotto, la foto lo copre") ed e' rimasto
   falso finche' nessuno ha guardato una cella davvero: le anteprime non
   si sono mai viste, ne' in griglia ne' nella pagina dei clienti. */
.cella-file img{position:relative;z-index:1}

/* --------------------------------------- selezione visibile in pieno sole */
/* Tre segnali sovrapposti, perche' su una foto uno solo non basta mai: il velo
   azzurro, il contorno blu con un filo bianco in mezzo (che regge sia sul cielo
   sia sull'asfalto) e la pastiglia piena in alto a sinistra. */
.cella-file.selezionata{outline:none;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px var(--br)}
.cella-file.selezionata::after{content:"";position:absolute;inset:0;background:var(--sel-velo);pointer-events:none}
.cella-file .durata,.cella-file .fascetta,.cella-file .segno-video,.selettore{z-index:2}

/* La pastiglia cresce a 28 px e prende un'ombra: su una miniatura bianca il
   solo bordo grigio spariva. Il bersaglio resta l'intera cella (§4.3), questa
   e' solo l'indicazione visiva. */
.selettore{width:28px;height:28px;background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(14,22,32,.35)}
.cella-file.selezionata .selettore{box-shadow:0 1px 4px rgba(14,22,32,.45)}
.riga-file.selezionata{box-shadow:inset 0 0 0 2px var(--br)}
/* In modalita' selezione tutta la cella e' il bersaglio della spunta. */
.griglia-file.in-selezione .cella-file,.elenco-file.in-selezione .riga-file{cursor:pointer}

/* ------------------------------------------- barra delle azioni in basso */
/* Ancorata al fondo, dove arriva il pollice di chi tiene il telefono con una
   mano sola e ha l'altra sporca. Sta sotto al velo delle finestre (80) e sopra
   il FAB (50), che intanto e' gia' stato alzato da body.con-pannello. */
.barra-selezione{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:var(--carta);border-top:1px solid var(--linea);box-shadow:var(--sh-alta);
  padding-bottom:env(safe-area-inset-bottom,0px) /* la tacca e la barra dei gesti */
}
.barra-selezione .conteggio{
  display:flex;align-items:center;gap:8px;padding:8px 14px 0;
  font-size:13px;font-weight:700;color:var(--t2);font-variant-numeric:tabular-nums
}
/* I bottoni scorrono in orizzontale se non ci stanno: si preferisce lo
   scorrimento all'andare a capo, perche' andando a capo la barra cambia altezza
   e il pollice trova un bottone diverso da quello che stava per premere. */
.barra-selezione .azioni{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.barra-selezione .azioni::-webkit-scrollbar{display:none}
.barra-selezione .azioni .btn{flex:none;padding:0 15px}
/* L'azione distruttiva sta all'estremita' e a 22 px dalla precedente: piu' del
   doppio degli 8 px minimi, perche' fra "Scarica" ed "Elimina" un dito che
   scivola costa trenta foto (SPEC-FILE-MANAGER §8). */
.barra-selezione .azioni .btn-pericolo{margin-left:22px}
.barra-selezione .avviso{margin:0 14px 8px}

/* Su schermo largo la barra non e' piu' fissa: diventa una riga sotto gli
   strumenti e il FAB torna al suo posto (§4.7). */
@media (min-width:900px){
  /* MISURATO: `position:static` la lasciava dov'e' nel DOM, cioe' IN FONDO al
     gestore, dopo tutta la griglia: a 1024x768 il suo bordo alto cadeva a
     1060 px con la finestra alta 768, a 900x700 a 1267. Sul portatile si
     sceglieva una foto e i comandi non erano da nessuna parte.
     `sticky` con `bottom:0` la tiene appoggiata al fondo della finestra
     finche' il gestore e' a schermo, e la lascia tornare al suo posto quando
     si arriva davvero in fondo: resta una riga, non ridiventa una barra fissa. */
  .barra-selezione{position:sticky;bottom:0;box-shadow:var(--sh-alta);border:1px solid var(--linea);border-radius:var(--r);margin-bottom:12px;padding-bottom:0;background:var(--carta)}
  .barra-selezione .azioni{padding:10px 14px;overflow-x:visible;flex-wrap:wrap}
  .barra-selezione .conteggio{padding-top:12px}
  body.con-pannello .fab{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

/* Con una barra ancorata in fondo il contenuto deve finire piu' in alto,
   altrimenti l'ultima riga di file resta sotto la barra e nessuno la trova. */
body.con-pannello .strato{padding-bottom:calc(96px + var(--alt-selezione) + var(--fondo-sicuro))}
@media (min-width:900px){body.con-pannello .strato{padding-bottom:120px}}

/* ------------------------------------------------ ricerca, filtri, ordine */
/* La ricerca sta sempre in vista sopra l'elenco: e' il filtro che si usa piu'
   spesso e nasconderla dentro il pannello sarebbe due tocchi in piu' ogni
   volta. Resta appiccicata sotto la barra alta mentre si scorre. */
.barra-cerca{position:sticky;top:var(--alt-barra);z-index:30;background:var(--tela);padding:8px 0 10px}
.barra-cerca .cerca{min-height:var(--tocco)} /* 44 px anche qui: e' un bersaglio */

/* Il numero dei filtri attivi sul bottone "Filtri": si legge senza aprire. */
.btn .conteggio-filtri{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--br);color:#fff;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums
}
.btn-primario .conteggio-filtri{background:rgba(255,255,255,.24)}

/* La riga dei filtri attivi: pillole che si tolgono una per una. Compare solo
   quando serve, altrimenti ruba una riga di schermo a chi non filtra. */
.filtri-attivi{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filtri-attivi .pillola{padding:5px 6px 5px 12px;font-size:12.5px}
/* La x e' disegnata piccola (20 px) perche' dentro una pillola una x grande
   sarebbe sgraziata, ma il bersaglio vero e' 44 px: lo allarga uno pseudo
   elemento trasparente centrato sulla x (§8). Fra due pillole ci sono 8 px. */
.pillola .togli{
  position:relative;flex:none;width:20px;height:20px;border-radius:999px;
  display:grid;place-items:center;color:inherit;opacity:.75
}
.pillola .togli:hover{opacity:1;background:rgba(14,22,32,.08)}
.pillola .togli::after{content:"";position:absolute;left:50%;top:50%;width:var(--tocco);height:var(--tocco);transform:translate(-50%,-50%)}
.filtri-attivi .azzera{font-size:13px;font-weight:700;color:var(--br);min-height:36px;padding:0 8px;border-radius:10px}
.filtri-attivi .azzera:hover{background:var(--br-s)}

/* La freccia del verso dentro il gruppo di scelte dell'ordinamento: si vede
   solo sulla voce attiva, perche' e' l'unica su cui il secondo tocco inverte. */
.gruppo-scelte button .freccia{display:none;margin-left:2px}
.gruppo-scelte button.attivo .freccia{display:inline-flex}

/* ------------------------------------------------------ pillola della fase */
/* La fase non e' mai distinta dal solo colore: la pillola porta sempre la
   parola scritta (§8). Il colore e' un aiuto a ritrovarla, non l'informazione. */
.pillola.fase-prima{background:var(--br-s);color:var(--br)}
.pillola.fase-durante{background:var(--ambra-s);color:var(--ambra)}
.pillola.fase-dopo{background:var(--verde-s);color:var(--verde)}
.pillola.fase-documento{background:var(--grigio-s);color:var(--grigio-t)}
/* Sulla miniatura la fase va in basso a sinistra, dove non copre ne' la durata
   (in basso a destra) ne' la pastiglia di selezione (in alto a sinistra). */
.cella-file .fase{position:absolute;left:6px;bottom:6px;z-index:2;font-size:10.5px;padding:2px 7px;box-shadow:0 1px 3px rgba(14,22,32,.3)}
/* Con la fascetta della conversione in corso non ci sta: vince la fascetta,
   che e' un'informazione urgente mentre la fase e' un'etichetta. */
.cella-file .fascetta ~ .fase{display:none}

/* Le due colonne in piu' della vista elenco (§4.7): sul telefono non c'e'
   spazio e la stessa informazione sta gia' nella riga .meta. */
.riga-file .colonna{display:none;flex:none;font-size:12.5px;color:var(--t2)}
.riga-file .colonna-fase{width:104px}
.riga-file .colonna-data{width:120px;font-variant-numeric:tabular-nums;text-align:right}
@media (min-width:900px){
  .riga-file{padding:10px 14px}
  .riga-file .colonna{display:block}
}

/* -------------------------------------- selettore della cartella di arrivo */
/* Albero piatto, una riga per cartella, il rientro dice il livello. Ogni riga
   e' alta 44 px: una destinazione si sceglie col pollice, non col mouse. */
.albero-cartelle{display:flex;flex-direction:column;gap:2px;max-height:44dvh;overflow:auto;margin-top:10px}
.riga-albero{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  min-height:var(--tocco);border-radius:12px;font-size:14.5px;font-weight:600;
  padding:6px 12px 6px calc(12px + var(--liv,0) * 16px) /* --liv la scrive il JS: 0, 1, 2... */
}
.riga-albero:hover{background:var(--tela)}
.riga-albero .nome{flex:1;min-width:0}
.riga-albero .icona{color:var(--t3);flex:none}
.riga-albero.attiva{background:var(--br-s);color:var(--br)}
.riga-albero.attiva .icona{color:var(--br)}
.riga-albero:disabled{opacity:.45;cursor:not-allowed}
.riga-albero .qui{font-size:11.5px;font-weight:700;color:var(--t3);flex:none}
.albero-titolo{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin:14px 4px 4px}
.albero-titolo:first-child{margin-top:6px}

/* ------------------------------------------ pannello dei dati del file */
/* I dati che non si modificano (peso, pixel, durata, autore) servono a capire
   di quale file si sta parlando: non sono campi, quindi stanno in un riquadro
   a parte e non devono somigliare a un modulo. */
.dati-file{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;background:var(--tela);border-radius:var(--r-piccolo);padding:12px;margin-bottom:16px}
.dati-file .dato{min-width:0}
.dati-file .etichetta{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.03em}
.dati-file .valore{font-size:13.5px;font-weight:600;color:var(--txt)}
.anteprima-dati{width:100%;max-height:180px;object-fit:contain;background:var(--txt);border-radius:var(--r-piccolo);margin-bottom:12px}

/* Nome piu' estensione: l'estensione si vede ma sta FUORI dal campo, cosi' non
   si cancella per sbaglio con le dita sporche (§6.1). */
.nome-estensione{display:flex;align-items:stretch}
.nome-estensione .input{border-radius:var(--r-piccolo) 0 0 var(--r-piccolo);border-right-width:0;min-width:0}
.nome-estensione .estensione{
  display:flex;align-items:center;flex:none;padding:0 13px;
  border:1px solid var(--linea2);border-left:0;border-radius:0 var(--r-piccolo) var(--r-piccolo) 0;
  background:var(--tela);color:var(--t2);font-size:15px;font-weight:700
}
.nome-estensione:focus-within .estensione{border-color:var(--br2)}
.nome-estensione:focus-within .input{box-shadow:none;border-color:var(--br2)}

/* Il contatore dei caratteri compare solo vicino al limite: prima non e'
   un'informazione, e' rumore. Le classi le mette il JS. */
.contatore{font-size:12px;font-weight:700;color:var(--t3);text-align:right;margin-top:4px;font-variant-numeric:tabular-nums}
.contatore.vicino{color:var(--ambra)}
.contatore.oltre{color:var(--rosso)}

/* Nella modifica di piu' file un campo puo' non avere un valore comune: si dice
   "valori diversi" e si lascia com'e' finche' non lo si tocca (§6.2). */
.valori-diversi{font-style:italic;color:var(--t3)}
.scelta.invariata{border-style:dashed;color:var(--t3)}

/* ------------------------------------------------------- esiti parziali */
/* Quando un'operazione riesce a meta' si dice quali file non sono passati e
   perche': mai un "qualcosa e' andato storto" generico (§7.2). */
.elenco-esiti{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:38dvh;overflow:auto}
.riga-esito{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4}
.riga-esito .nome{font-weight:700;min-width:0}
.riga-esito .motivo{color:var(--t2)}
.riga-esito.fallito .nome{color:var(--rosso)}

/* --------------------------------------------------- attesa sui bottoni */
/* Un bottone che ha gia' fatto partire la richiesta e non lo dice viene premuto
   tre volte, e tre volte la richiesta parte davvero. */
.btn.in-corso{pointer-events:none;opacity:.75}
.btn.in-corso::before{
  content:"";width:15px;height:15px;border-radius:999px;flex:none;
  border:2px solid currentColor;border-top-color:transparent;animation:gira .7s linear infinite
}
@keyframes gira{to{transform:rotate(360deg)}}

/* ------------------------------------- i tre puntini sopra la miniatura */
/* La .cella-file ha overflow:hidden (serve a ritagliare la foto nel quadrato):
   un menu aperto dentro di lei verrebbe tagliato. E in piu' la cella e' un
   <button>, e un bottone dentro un bottone non e' HTML valido. Quindi la cella
   si avvolge: il quadrato ritagliato resta la cella, i puntini e il menu stanno
   fuori da lei e dentro l'involucro. */
.casella-file{position:relative;aspect-ratio:1}
.casella-file .cella-file{width:100%;height:100%;aspect-ratio:auto}
.casella-file .menu-azioni{position:absolute;right:2px;top:2px;z-index:3}
/* Bersaglio 44 px pieno, ma il disegno resta una pastiglia di 30 px: sopra una
   foto un cerchio grande e' un cartello, non un comando. */
.puntini{
  position:relative;flex:none;
  width:var(--tocco);height:var(--tocco);display:grid;place-items:center;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(14,22,32,.75));border-radius:999px
}
.puntini::before{
  content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;
  transform:translate(-50%,-50%);border-radius:999px;background:rgba(14,22,32,.32)
}
.puntini svg{position:relative}
.riga-file .puntini{color:var(--t2);filter:none}
.riga-file .puntini::before{background:transparent}
.riga-file .puntini:hover::before{background:var(--tela)}
/* In modalita' selezione i puntini spariscono: li' il tocco sulla cella e' la
   spunta, e un secondo bersaglio sopra la foto e' solo un modo per sbagliare. */
.griglia-file.in-selezione .menu-azioni,.elenco-file.in-selezione .menu-azioni{display:none}
.menu button:disabled{opacity:.4;cursor:not-allowed}
.menu button:disabled:hover{background:none}

/* Scelte spente: un gruppo di scelte o una scheda .scelta che non si puo'
   premere deve dirlo prima del tocco, non dopo. */
.gruppo-scelte button:disabled,.scelta:disabled{opacity:.4;cursor:not-allowed}
.gruppo-scelte button:disabled:hover,.scelta:disabled:hover{background:none}

/* ----------------------------------- scheletro della vista elenco */
/* La riga di elenco non ha aspect-ratio che le prenoti lo spazio come la cella:
   glielo prenota la miniatura, che ha misura fissa e fondo pieno. */
.riga-file .mini{background:var(--scheletro)}

/* ------------------------------------------------ messaggio con azione */
/* "12 file spostati" + "Annulla" per otto secondi (§7.2): l'azione sta dentro il
   messaggio, non da un'altra parte, e il messaggio diventa toccabile. */
.messaggi{pointer-events:none}
.messaggio{display:flex;align-items:center;gap:12px;pointer-events:auto}
.messaggio .testo{flex:1;min-width:0}
.messaggio .azione{
  flex:none;min-height:36px;padding:0 12px;border-radius:10px;
  font-size:13.5px;font-weight:800;color:#fff;background:rgba(255,255,255,.18);white-space:nowrap
}
.messaggio .azione:hover{background:rgba(255,255,255,.3)}
/* La x che chiude il messaggio: piccola di disegno, 44 px di bersaglio. */
.messaggio .chiudi{position:relative;flex:none;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;color:#fff;opacity:.8}
.messaggio .chiudi::after{content:"";position:absolute;left:50%;top:50%;width:var(--tocco);height:var(--tocco);transform:translate(-50%,-50%)}

/* ------------------------------------------------- pannello dei filtri */
.gruppo-filtro{margin-bottom:18px}
.gruppo-filtro>.etichetta{display:block;font-size:12.5px;font-weight:700;color:var(--t2);margin-bottom:8px}
/* Il gruppo di scelte del periodo ha cinque voci e su 320 px non ci sta: scorre
   invece di andare a capo, cosi' resta una riga sola e alta uguale. */
.gruppo-scelte.scorre{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none}
.gruppo-scelte.scorre::-webkit-scrollbar{display:none}
.gruppo-scelte.scorre button{flex:none}
/* Le due date del periodo "Date...": affiancate, ognuna con la sua etichetta. */
.periodo-date{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.periodo-date label{display:block;font-size:11.5px;font-weight:700;color:var(--t3);margin-bottom:4px}
/* Casella di spunta grande: il quadratino di sistema e' 13 px, in officina con i
   guanti non si prende. Qui il bersaglio e' tutta la riga. */
.spunta{display:flex;align-items:center;gap:12px;min-height:var(--tocco);width:100%;text-align:left;font-size:14.5px;font-weight:600;padding:4px 2px}
.spunta input{width:22px;height:22px;flex:none;accent-color:var(--br)}

/* ------------------------------------------------ fogli dal basso alti */
/* Mentre un foglio e' aperto la pagina sotto non deve scorrere: su iOS il dito
   che scorre dentro la finestra trascina via anche l'elenco che sta dietro. */
body.finestra-aperta{overflow:hidden}

/* ---------------------------------------- ancora piu' stretto di 320 px */
/* Nessun telefono e' piu' stretto, ma con il testo di sistema ingrandito la
   barra della selezione si comporta come se lo fosse: i bottoni restano alti
   44 px e scorrono, non si accavallano. */
@media (max-width:359px){
  .barra-selezione .azioni{gap:8px;padding-left:12px;padding-right:12px}
  .barra-selezione .azioni .btn{padding:0 13px;font-size:14px}
  .barra-selezione .azioni .btn-pericolo{margin-left:18px}
}

/* ====================================================== involucri e resti */
/* `.gestore` e `.filtri` sono i due involucri che i moduli del file manager
   si appendono addosso: non decorano niente (dentro ci sono gia' .barra-cerca,
   .filtri-attivi, .griglia-file, che si arrangiano da soli) ma esistono come
   appiglio, e sono dichiarati qui perche' una classe usata dal JS e assente
   dal foglio e' esattamente il guasto che non si vede finche' non serve. */
.gestore{display:block}
.filtri{display:block}

/* Il titolo e le azioni del pannello dei caricamenti: il resto della sua
   struttura (.testa .righe .riga-caricamento .corpo .nome .stato) sta piu'
   su, insieme alla barra di avanzamento. */
.pannello-caricamenti .testa .titolo{flex:1;min-width:0;font-size:15px;font-weight:700;margin:0}
.riga-caricamento .azioni{display:flex;align-items:center;gap:4px;flex-shrink:0}

/* ============================================================= fotocamera */
/* Superficie a se': si prende lo schermo perche' chi inquadra un'ammaccatura
   con una mano sola non deve vedere altro. I comandi stanno in basso, dove
   arriva il pollice, e sopra la tacca del telefono. */
.fotocamera{position:fixed;inset:0;z-index:95;background:#07090C;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fotocamera__anteprima{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.fotocamera__messaggio{position:relative;z-index:2;max-width:34ch;text-align:center;font-size:14px;line-height:1.45;margin:0;padding:10px 14px;border-radius:var(--r-piccolo);background:rgba(0,0,0,.6)}
.fotocamera__cronometro{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:2;
  font-variant-numeric:tabular-nums;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(210,59,63,.85)}
/* I comandi scorrono in orizzontale invece di accavallarsi: a 360 px cinque
   bersagli da 44 px non ci stanno, e rimpicciolirli li renderebbe inutili. */
.fotocamera__comandi{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:8px;
  padding:14px calc(14px + env(safe-area-inset-left,0px)) calc(14px + env(safe-area-inset-bottom,0px));
  overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}
.fotocamera__comandi .btn{background:rgba(255,255,255,.16);border-color:transparent;color:#fff;flex-shrink:0}
.fotocamera__comandi .btn:hover{background:rgba(255,255,255,.26)}
.fotocamera__scatta,.fotocamera__registra{font-weight:700}
.fotocamera__registra.in-registrazione{background:var(--rosso)}
.fotocamera__cambia,.fotocamera__sistema{font-weight:500}
/* "Chiudi" va in fondo alla riga e staccato: e' l'unico comando che fa
   perdere l'inquadratura, e non deve stare accanto a "Scatta". */
.fotocamera__chiudi{margin-left:auto;padding-left:18px}

/* ==================================================== dashboard a matrice
   La schermata delle cartelle non e' un elenco ma una matrice di schede: in
   officina una cartella e' un camper, e un camper si riconosce dalle foto
   molto prima che dal nome ("Rossi", "Rossi 2", "Furgone Rossi").

   Tutto quello che segue e' AGGIUNTO: .riga-cartella e .elenco-cartelle
   restano dove sono perche' le usano ancora la condivisione (i link attivi) e
   gli operatori, dove la foto non c'e' e la riga e' la forma giusta. */

:root{
  /* Fondo delle pastiglie appoggiate sopra una foto (il "+12", i tre puntini):
     devono restare leggibili sia sul cofano bianco di un camper sia
     sull'asfalto, quindi si portano dietro il fondo invece di fidarsi di
     quello che c'e' sotto. */
  --sopra-foto:rgba(14,22,32,.55);
  /* Vetro chiaro per i comandi appoggiati su una miniatura chiara. */
  --carta-velata:rgba(255,255,255,.88);
}

/* ------------------------------------------------------------ la matrice */
/* Su schermo largo cresce il NUMERO delle colonne, non la larghezza delle
   schede: una scheda larga mezzo schermo non aggiunge informazione, aggiunge
   solo scorrimento. Il limite della riga lo da' gia' .contenuto (1180 px).

   I conti del telefono piu' stretto in circolazione (320 px), che sono la
   ragione di queste misure. .contenuto toglie 14 px per lato: restano 292.
   Con minmax(150px) e gap 10 due colonne ne volevano 310, quindi la griglia
   scendeva a UNA colonna e con l'anteprima 4:3 una scheda occupava ~345 px:
   una scheda e mezza per schermata, cioe' piu' scorrimento dell'elenco a
   righe che la matrice doveva sostituire.
   Ora: minimo 140, gap 8 -> 140x2 + 8 = 288 <= 292. Due colonne da 142 px.
   Tre non ci provano nemmeno (140x3 + 16 = 436), quindi non c'e' il rischio
   di francobolli.
   Altezza di una scheda larga 142 px, misurata nel browser e non stimata:
   anteprima 4:3 = 105, testo 98 (nome due righe 39, conteggi 18, tempo 17,
   imbottiture e interlinee 24), bordi 2 -> 205 px. Con il piede delle
   sottocartelle (44 px pieni di bersaglio) diventa 249.
   Su uno schermo da 568 px restano 568 - 61 (barra alta) - 53 (barra bassa)
   = 454 px di contenuto. Quante schede INTERE ci stanno dipende dal piede,
   perche' la riga della griglia e' alta quanto la scheda piu' alta che
   contiene:
     - riga senza piede: 205 + 8 + 205 = 418 <= 454, quindi due righe, cioe'
       QUATTRO schede intere;
     - riga con almeno un piede: 249 + 8 + 249 = 506 > 454, quindi una riga
       sola, cioe' DUE schede intere piu' il 79% della riga successiva (454 -
       249 - 8 = 197 px di 249), che si vede tagliata ed e' il segnale che
       sotto c'e' dell'altro.
   Il numero garantito e' quindi due, quattro nel caso migliore: non quattro
   sempre, come diceva questo commento prima che qualcuno lo misurasse. In
   ogni caso piu' dell'elenco a righe che la matrice ha sostituito, dove una
   scheda a colonna singola con l'anteprima 4:3 ne occupava ~345 e per
   schermata ne passava una e mezza. */
.griglia-cartelle{
  display:grid;gap:8px;margin-top:12px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  /* Ogni scheda alta quanto il suo contenuto. Senza questo la griglia stira
     tutte le celle di una riga fino alla piu' alta: una cartella senza
     sottocartelle, accanto a una che ha il piede, si prendeva 44 px di bianco
     in fondo e sembrava una scheda a cui mancava qualcosa. L'allineamento
     della riga non si perde: le schede restano appese al bordo alto, che e'
     quello che l'occhio segue mentre scorre. */
  align-items:start
}
/* Da 480 px in su le colonne restano due o tre ma le schede respirano. */
@media (min-width:480px){
  .griglia-cartelle{gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (min-width:640px){
  .griglia-cartelle{gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
/* Su schermo largo la griglia si INFITTISCE: a 1180 px sono sei colonne da
   ~185 px (prima erano cinque da 224). Sei camper per riga si scorrono con
   gli occhi, cinque schede gonfie si scorrono con il dito. */
@media (min-width:1024px){
  .griglia-cartelle{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}

/* --------------------------------------------------------- la scheda */
/* La scheda non cambia mai misura al tocco: se si rimpicciolisse, le vicine si
   sposterebbero e il dito finirebbe sulla cartella sbagliata. Il tocco si
   sente dal fondo e dal bordo, non dal movimento. */
.scheda-cartella{
  position:relative;display:flex;flex-direction:column;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh);
  transition:border-color .15s,background .15s
}
.scheda-cartella:hover,.scheda-cartella:focus-within{border-color:var(--linea2)}
.scheda-cartella:active{background:var(--tela)}

/* Tutta la scheda e' un bersaglio solo: con una mano sola e i guanti si centra
   un rettangolo grande, non un nome di quindici pixel. */
.scheda-cartella-corpo{
  display:flex;flex-direction:column;width:100%;min-height:var(--tocco);
  padding:0; /* l'anteprima arriva a filo: l'imbottitura la mette il testo */
  background:transparent;border:0;text-align:left;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.scheda-cartella-corpo:focus-visible{outline:2px solid var(--br);outline-offset:-2px;border-radius:0}

/* ------------------------------------------------------- l'anteprima */
/* aspect-ratio prenota lo spazio prima che le foto arrivino: la matrice non si
   riassesta mentre si scorre sulla 4G dell'officina.
   Le colonne sono automatiche e non tre fisse perche' una cartella con una
   foto sola deve riempire la striscia, non lasciarne due terzi vuoti. */
.anteprima-cartella{
  position:relative;display:grid;gap:2px;
  grid-auto-flow:column;grid-auto-columns:1fr;
  aspect-ratio:4/3;overflow:hidden;background:var(--tela)
}
.anteprima-mini{width:100%;height:100%;object-fit:cover;display:block;background:var(--tela)}

/* Cartella ancora senza foto: l'icona al centro, una cella sola. */
.anteprima-vuota{
  grid-auto-flow:row;grid-auto-columns:auto;
  place-items:center;color:var(--t3);background:var(--tela)
}

/* Il dettaglio non e' ancora arrivato dal server: stessa altezza esatta della
   striscia piena, cosi' quando le foto entrano non si sposta niente. */
.anteprima-caricamento{
  background-image:linear-gradient(100deg,var(--scheletro) 30%,var(--scheletro2) 50%,var(--scheletro) 70%);
  background-size:220% 100%;background-color:var(--scheletro);
  animation:scorri-scheletro 1.1s linear infinite
}
/* Senza animazione resta un blocco grigio pieno: un riflesso fermo a meta'
   sarebbe peggio del blocco. */
@media (prefers-reduced-motion:reduce){
  .anteprima-caricamento{background-image:none}
}

/* Il "+12" appoggiato sull'ultima miniatura. */
.anteprima-piu{
  position:absolute;right:6px;bottom:6px;z-index:2;
  padding:2px 6px;border-radius:999px;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--sopra-foto);color:#fff
}

/* ------------------------------------------------------------ il testo */
.testo-cartella{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;min-width:0}
/* In due colonne da 142 px l'imbottitura si sente: quattro pixel per lato
   sono mezza parola in piu' sulla prima riga del nome. */
@media (max-width:479px){
  .testo-cartella{gap:3px;padding:8px 10px 10px}
  .nome-cartella{font-size:14.5px}
}

/* Il nome si avvolge su due righe e poi taglia: "Furgone Rossi perizia"
   troncato a meta' parola alla prima riga non si riconosce piu'. */
.nome-cartella{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;font-weight:700;font-size:15px;line-height:1.3;color:var(--txt)
}

/* I numeri: "3 foto · 1 video · 240 MB · +8 nelle sottocartelle". Il punto
   medio lo disegna il foglio, cosi' il JS scrive solo le voci e nessuno resta
   con un separatore appeso in fondo. */
.conteggi-cartella{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:12px;color:var(--t2)}
.dato-cartella{white-space:nowrap}
.dato-cartella+.dato-cartella::before{content:'·';margin-right:6px;color:var(--t3)}
/* I pesi non devono ballare da una scheda all'altra. */
.dato-cartella.num{font-variant-numeric:tabular-nums}
/* In due colonne da 142 px la riga dei numeri ha 122 px per andare a capo, e
   "7 foto · 1 video · 240 MB · +6 nelle sottocartelle" ne prendeva quattro
   di righe: sessanta pixel di scheda spesi male. I megabyte sono contabilita'
   di magazzino, non servono a riconoscere un camper — e restano scritti nella
   schermata della cartella, dove si va quando lo spazio interessa davvero.
   Sotto i 480 px escono dalla scheda; da li' in su tornano. */
@media (max-width:479px){
  .conteggi-cartella .dato-cartella.num{display:none}
}

/* Le pillole di stato (link attivi, video in lavorazione). Quando non ce ne
   sono la riga non deve rubare spazio: la maggior parte delle cartelle non ha
   niente da segnalare. */
.etichette-cartella{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.etichette-cartella:empty{display:none}

.tempo-cartella{
  font-size:11.5px;color:var(--t3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.tempo-cartella:empty{display:none}

/* ------------------------------------------------- i puntini della scheda */
/* Va addosso alla scheda insieme a .menu-azioni: da quella prende il contesto
   in cui si ancora la tendina, qui prende il posto in alto a destra sopra
   l'anteprima. La pastiglia porta il suo fondo: appoggiata alla foto di un
   cofano bianco, un'icona grigia sparisce. */
.menu-cartella{position:absolute;top:6px;right:6px;z-index:2}
.menu-cartella>.btn-icona{
  /* 44 px pieni come ogni altro bersaglio del foglio: sopra una foto e con i
     guanti, quattro pixel in meno si sentono. */
  width:var(--tocco);height:var(--tocco);
  background:var(--carta-velata);border-color:transparent;color:var(--txt);
  box-shadow:0 1px 4px rgba(14,22,32,.28);backdrop-filter:blur(4px)
}
.menu-cartella>.btn-icona:hover{background:var(--carta)}
/* La tendina NON e' piu' figlia della scheda: menu-contestuale.js la appende
   al body con position:fixed e la riposiziona da solo. Qui non serve nessuna
   regola, e soprattutto non ne serve una che la ancori dentro .scheda-cartella
   — che ha overflow:hidden e le tagliava via le ultime due voci. */

/* -------------------------------------------------------- il piede */
/* Compare solo se c'e' dove scendere (lo decide il JS): un bottone che porta a
   un elenco vuoto e' una promessa non mantenuta. */
.scheda-cartella-sotto{
  display:flex;align-items:center;gap:8px;width:100%;
  /* 44 px pieni: e' un bottone che porta a un'altra schermata, non
     un'etichetta. Erano 40 e con i guanti si sbagliava. */
  min-height:var(--tocco);padding:6px 12px;
  border:0;border-top:1px solid var(--linea);background:transparent;
  font-size:12.5px;font-weight:600;color:var(--t2);text-align:left;cursor:pointer
}
.scheda-cartella-sotto:hover{background:var(--tela)}
/* La freccia sta all'estremita' opposta al testo: dice "si va di la'". */
.freccia{display:inline-flex;align-items:center}
.scheda-cartella-sotto .freccia{margin-left:auto;color:var(--t3)}

/* ------------------------------------------ il contatore accanto al titolo */
/* Con schede grandi il fondo della pagina non si vede: il numero dice subito
   se la matrice e' tutta li' o se sotto ce n'e' dell'altra. */
.conta-cartelle{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--t3)}
/* Allineato alla base del titolo e non al suo centro: accanto a un h1 di 24 px
   un numero di 12 galleggerebbe a mezz'aria. Solo dove il contatore c'e',
   perche' le altre schermate allineano bottoni, non testo. */
.titolo-sezione:has(>.conta-cartelle){align-items:baseline}

/* ------------------------------------------------------- lo stato vuoto */
/* E' la prima schermata di chi apre l'applicazione il primo giorno: se dice
   solo "nessuna cartella", quel giorno finisce li'. */
.vuoto-cartelle{padding:28px 18px;text-align:center;max-width:460px;margin-left:auto;margin-right:auto}
.vuoto-cartelle .btn{margin-top:16px}
/* Il bottone di uno stato vuoto e' l'unica cosa da fare in quella schermata:
   largo abbastanza da essere il gesto ovvio. */
.vuoto .btn{min-width:200px}
/* Le tre mosse si leggono una per una, quindi restano allineate a sinistra
   anche dentro un blocco centrato: un elenco numerato centrato non si segue. */
.vuoto-cartelle-passi{
  list-style:decimal;text-align:left;display:inline-block;
  margin:14px 0 0;padding-left:22px;color:var(--t2);font-size:13.5px
}
.vuoto-cartelle-passi li{margin-bottom:6px}
.vuoto-cartelle-passi li:last-child{margin-bottom:0}

/* --------------------------------- scelta della cartella di destinazione */
/* Lo "Sposta in…" della dashboard: radio veri (il lettore di schermo li
   annuncia come gruppo) con la riga intera come bersaglio da 44 px. */
.scelta-destinazione{display:flex;flex-direction:column;gap:2px;max-height:44dvh;overflow:auto}
.riga-destinazione{
  display:flex;align-items:center;gap:12px;
  min-height:var(--tocco);padding:6px 12px;border-radius:12px;
  font-size:14.5px;font-weight:600;cursor:pointer
}
.riga-destinazione:hover{background:var(--tela)}
.riga-destinazione input{width:22px;height:22px;flex:none;accent-color:var(--br)}
.riga-destinazione:has(input:checked){background:var(--br-s);color:var(--br)}
.riga-destinazione:focus-within{outline:2px solid var(--br2);outline-offset:-2px}

/* ======================================================= menu di testata */
/* DOVE STANNO LE SEZIONI, E PERCHE'.

   Prima stavano tutte e tre nella barra alta, su una riga sola che non poteva
   andare a capo. I conti a 320 px dicevano che non ci stavano: 292 px utili
   (.contenuto toglie 14 per lato) contro marchio 30 + tre voci sole-icona da
   42 (136 con i distacchi) + "Nuova cartella" con il suo testo (~178) + Esci
   44 + tre spazi da 10 = ~418. Risultato: "Esci" spinto fuori dallo schermo e
   scorrimento orizzontale su OGNI schermata dell'operatore.

   La scelta: su telefono la navigazione SCENDE IN BASSO, dove arriva il
   pollice di chi tiene il telefono con una mano e ha l'altra sporca. La barra
   alta e' il punto piu' lontano dal pollice, ed era anche il punto piu'
   affollato: spostare le tre sezioni risolve le due cose insieme. Non un
   cassetto a scomparsa, perche' nasconderebbe dietro un tocco le uniche tre
   destinazioni dell'applicazione; non voci che scorrono, perche' una barra
   che scorre nasconde meta' delle voci senza dirlo.

   I conti nuovi a 320 px.
   In alto (292 utili): marchio 30 + 10 + spazio elastico + "Nuova cartella"
   164 (testo 115 + icona 18 + gap 9 + imbottitura 2x14 sotto i 400 px) + 10 +
   Esci 44 = 258. Restano 34 px di respiro. Con il bottone "torna indietro"
   (44) al posto del marchio: 272, restano 20. Niente scorrimento, e l'azione
   principale conserva la sua parola.
   In basso (320 pieni, la barra e' a filo dei bordi): tre voci da 106 px,
   alte 48. Tutti i bersagli oltre i 44 px richiesti.

   Da 560 px in su le voci tornano nella barra alta: li' ci stanno davvero, e
   una navigazione che resta in alto sul portatile e' quella che l'operatore
   si aspetta di trovare accanto al marchio. */
.barra-alta{padding-top:env(safe-area-inset-top,0px)} /* la tacca dei telefoni */
.barra-alta .interno{flex-wrap:nowrap}

/* La fila delle schede: un binario grigio con dentro le tre voci. */
.voci{
  display:flex;gap:2px;flex:none;flex-wrap:nowrap;
  background:var(--tela);border-radius:999px;padding:3px
}
.voci .voce{
  position:relative; /* ci si appoggia il pallino di avviso */
  display:inline-flex;align-items:center;gap:7px;
  min-height:var(--tocco);padding:0 14px;border-radius:999px;
  font-weight:700;color:var(--t2);white-space:nowrap;
  touch-action:manipulation
}
.voci .voce:hover{color:var(--txt)}
/* La voce accesa si legge anche in pieno sole: fondo bianco pieno sul grigio,
   non un semplice cambio di colore del testo. */
.voci .voce.attiva{background:var(--carta);color:var(--txt);box-shadow:0 1px 3px rgba(14,22,32,.14)}
.voci .voce .etichetta{font-size:13.5px}

/* ------------------------------------------- la barra bassa sul telefono */
/* Sotto i 560 px la stessa <nav class="voci"> esce dal flusso della testata e
   si ancora al fondo. E' lo stesso nodo e sono le stesse classi: il JS non
   cambia di una riga, e non esistono due navigazioni da tenere allineate.

   Le etichette TORNANO: in basso c'e' larghezza (106 px a voce contro i 42
   della barra alta), e una navigazione di sole icone si impara a tentativi.
   Un'icona senza parola era il compromesso imposto dallo spazio, non una
   scelta. */
@media (max-width:559px){
  .voci{
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    gap:0;padding:2px 4px calc(2px + env(safe-area-inset-bottom,0px));
    border-radius:0;border-top:1px solid var(--linea);
    background:var(--carta);
    box-shadow:0 -2px 12px -6px rgba(14,22,32,.35)
  }
  .voci .voce{
    flex:1;min-width:0;
    flex-direction:column;justify-content:center;gap:2px;
    min-height:48px;padding:4px 2px;border-radius:12px;font-size:11px
  }
  .voci .voce .etichetta{display:block;font-size:11px;line-height:1.1}
  /* La voce accesa qui non ha piu' un binario grigio sotto di se': il fondo
     bianco su bianco non direbbe niente, quindi parlano colore e peso. */
  .voci .voce.attiva{background:var(--br-s);color:var(--br);box-shadow:none}
  /* Il pallino torna addosso all'icona: su una voce larga 106 px, appeso
     all'angolo in alto a destra, sembrerebbe di un'altra voce. */
  .voci .voce .pallino.avviso-voce{top:2px;right:calc(50% - 16px)}

  /* La barra bassa copre il fondo della pagina: il contenuto finisce piu' in
     alto, altrimenti l'ultima scheda della matrice resta sotto e non la
     trova nessuno. */
  .strato{padding-bottom:calc(96px + var(--alt-voci) + var(--fondo-sicuro))}
  /* E il bottone fisso sale sopra la barra, invece di sedercisi in mezzo. */
  .fab{bottom:calc(16px + var(--alt-voci) + env(safe-area-inset-bottom,0px))}

  /* IL VINCOLO DIFFICILE: la barra delle azioni del gestore file compare
     anch'essa in fondo, quando c'e' una selezione, e sarebbe esattamente
     sopra questa. Due barre impilate mangerebbero 110 px di schermo e il
     pollice troverebbe la voce sbagliata.
     La selezione e' un modo di lavorare a se': finche' dura, l'unica cosa da
     fare e' finirla o annullarla, e cambiare sezione con venti foto scelte
     butterebbe via la scelta senza dirlo. Quindi la navigazione si ritira e
     torna appena la selezione finisce. Il segnale c'e' gia': `con-pannello`,
     che il gestore mette e toglie sul body insieme alla barra. */
  body.con-pannello .voci{display:none}
  /* Rete di sicurezza, perche' il fondo dello schermo e' conteso da tre cose:
     la barra della selezione, il pannello dei caricamenti (che sta a z-index
     70 e coprirebbe comunque la navigazione, ma nascondendola a meta') e
     questa barra. Se un domani una vista montasse una delle due senza
     ricordarsi la classe sul body, la navigazione si toglie lo stesso invece
     di restare sepolta sotto. */
  /* C6 — MISURATO: `:has(.barra-selezione)` era vero SEMPRE, perche'
     barra-azioni.js tiene il nodo nel DOM dall'inizio e lo accende togliendo
     `hidden` (gestore.js:306 `barraAzioni.elemento.hidden = true`). Prima:
     appena entrati in cartella, a 320/360/390, `.voci` display=none e
     altezza 0 px — la navigazione bassa non esisteva MAI dentro una cartella.
     Con `:not([hidden])` la rete di sicurezza scatta solo quando la barra
     c'e' davvero. */
  body:has(.barra-selezione:not([hidden])) .voci,
  body:has(.pannello-caricamenti:not([hidden])) .voci{display:none}
}

/* Il pallino di avviso sulla voce: cerchiato del colore della barra, cosi' si
   stacca anche quando cade sopra l'icona. Il colore non e' l'informazione —
   il motivo sta per esteso nel title della voce. */
.pallino.avviso-voce{
  position:absolute;top:6px;right:6px;
  width:8px;height:8px;border-radius:999px;box-shadow:0 0 0 2px var(--carta)
}

/* L'azione principale della barra: si fa dieci volte al giorno, quindi non si
   stringe e non perde il suo testo. */
.azione-testata{flex:none}
/* A ventaglio aperto il bottone della testata resta premuto: sotto il velo si
   vede lo stesso, ed e' l'unico segno che quel menu e' uscito da li'. Il velo
   copre la barra apposta — cliccare "Archivio" mentre si sta scegliendo cosa
   creare non e' un gesto che qualcuno voglia fare per davvero. */
.azione-testata.aperto{filter:brightness(.92)}
@media (max-width:399px){.azione-testata{padding:0 14px}}

/* UNA SOLA AZIONE PRINCIPALE PER SCHERMATA.
   (Il bottone in testata oggi non dice piu' "Nuova cartella" ma "Nuovo
   elemento" e apre lo stesso ventaglio del FAB: vedi viste/comuni.js. Il
   ragionamento qui sotto — chi dei due resta a schermo — non cambia di una
   virgola, ed e' il motivo per cui i due non compaiono MAI insieme.)
   Nell'archivio c'erano tutti e due insieme — il bottone in testata e il FAB
   in basso a destra — e fanno la stessa identica cosa (entrambi finiscono su
   apriNuovaCartella, che decide da sola se e' cartella o sottocartella). Due
   bottoni gemelli sullo stesso schermo non raddoppiano l'azione: fanno
   fermare a chiedersi in cosa differiscano.
   Il criterio e' la mano, non il gusto:
   - sul telefono si tiene con una mano sola e il pollice arriva in basso,
     mentre in alto ogni pixel e' conteso da marchio, menu, ricerca e uscita:
     resta il FAB, sparisce quello in testata;
   - da 1000 px in su si punta con il mouse, il basso a destra e' lontano
     dagli occhi e la testata ha spazio da vendere: resta quello in testata,
     sparisce il FAB.
   Il confine e' 1000 e non i soliti 900 perche' e' li' che la barra alta ha
   davvero posto: misurato nel browser, fra 900 e ~980 px marchio + tre voci
   + ricerca + "Nuova cartella" + Esci non stanno in una riga sola, e con il
   bottone in testata il nome del marchio andava a capo gonfiando la barra
   fino a 349 px. Sotto i 1000 il bottone quindi non c'e', la barra resta a
   67 px e l'azione la fa il FAB.
   L'azione non e' mai irraggiungibile: la testata si nasconde SOLO dove c'e'
   davvero un FAB in pagina (body:has(.fab)), quindi nelle schermate che il
   FAB non lo montano — cestino e operatori — il bottone in alto resta al suo
   posto a qualunque larghezza. Archivio e dentro-cartella il FAB lo montano,
   e li' sotto i 1000 px comanda lui. */
@media (max-width:999px){
  body:has(.fab) .azione-testata{display:none}
}
@media (min-width:1000px){
  .fab{display:none}
}

/* La ricerca in barra: oggi nessuna schermata dell'operatore la chiede piu'
   (`conRicerca`), perche' nell'archivio il campo e' uno solo ed e' la
   .barra-cerca appiccicata sotto la testata — la stessa che il gestore file
   usa dentro una cartella. La regola resta perche' l'opzione esiste ancora in
   viste/comuni.js: se un domani torna, torna gia' vestita e gia' nascosta sul
   telefono, dove la barra alta non ha spazio. */
.cerca-testata{max-width:260px}
@media (max-width:719px){.cerca-testata{display:none}}

/* La ricerca appiccicata scende insieme alla barra sotto la tacca. */
.barra-cerca{top:calc(var(--alt-barra) + env(safe-area-inset-top,0px))}

/* Le icone in linea disegnate da comuni.js: non si stringono mai, altrimenti
   in una riga stretta diventano ovali. */
.ico{flex:none}

/* ================================================ accesso con QR (SPEC B)
   Le tre schermate del primo accesso (operatori, scelta password, invito
   scaduto) iniettano da sole le proprie regole con assicuraStile(): quelle
   restano dove sono, ma le stesse classi vivono ANCHE qui, nel foglio, e per
   un motivo pratico. Se domani qualcuno toglie l'iniezione da un modulo il
   bottone non sparisce e il QR non si sgonfia: in questo progetto una classe
   usata dal JS e non definita nel foglio e' gia' costata due bottoni
   invisibili. Le due copie dicono la stessa cosa; se una va cambiata, si
   cambiano tutte e due.
   Nota sull'ordine: lo stile iniettato entra in <head> DOPO questo foglio,
   quindi a parita' di peso vince lui. Dove qui serve avere l'ultima parola
   (la stampa) il selettore e' piu' pesante di proposito. */

/* Il codice detto a voce quando la fotocamera non collabora: monospazio,
   gruppi larghi, si scrive a mano dall'altra parte del telefono. */
.codice-gruppi{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:17px;line-height:1.6;font-weight:700;letter-spacing:.08em;
  text-align:center;word-break:break-word;
  background:var(--tela);border:1px solid var(--linea);border-radius:12px;
  padding:10px 12px
}

/* Il riquadro del QR nella finestra degli operatori.
   Fondo bianco FISSO (non var(--carta)): questo codice lo inquadra un altro
   telefono, e meta' dei lettori non aggancia un QR su fondo scuro, quindi il
   riquadro resta bianco anche se un domani arriva il tema scuro.
   L'imbottitura e' il margine bianco (quiet zone) che il lettore cerca
   intorno al codice: senza, spesso non lo trova.
   min-height tiene l'altezza prima che l'immagine arrivi, cosi' i bottoni
   sotto non scappano da sotto il pollice di chi sta gia' premendo. */
.qr-invito{
  background:#fff;border-radius:16px;padding:12px;
  display:grid;place-items:center;min-height:220px
}
/* 200 px di lato sono il minimo perche' un altro telefono lo inquadri da
   mezzo metro: sotto quella misura si legge solo appoggiando le fotocamere
   una sull'altra. Il lato non e' mai deformato (height:auto su un PNG
   quadrato). */
.qr-invito img{
  width:100%;max-width:300px;min-width:200px;height:auto;display:block
}

/* --------------------------------------- la scelta della password (primo accesso) */
.requisiti{list-style:none;margin:10px 0 0;padding:0;text-align:left}
.requisiti li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13px;line-height:1.45;color:var(--t2);margin-top:6px
}
/* Il verde non e' l'unico segnale: cambia anche l'icona. Chi i colori non li
   distingue vede lo stesso il pallino diventare spunta. */
.requisiti li.fatto{color:var(--verde);font-weight:600}
.requisiti .segno-req{flex:none;width:18px;height:18px;display:grid;place-items:center;margin-top:1px}
.requisiti .pallino-req{width:8px;height:8px;border-radius:999px;border:2px solid var(--linea2);display:block}

/* L'involucro avvolge SOLO il campo e il suo bottone: se contenesse anche
   l'elenco dei requisiti, il bottone ancorato al centro finirebbe in mezzo
   alle spunte invece che dentro la casella. */
.campo-password{position:relative;display:block}
.campo-password .input{width:100%;padding-right:56px}
/* Bersaglio pieno da 44 px come tutto il resto: si preme con i guanti. */
.campo-password .occhio{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  min-width:48px;height:44px;display:grid;place-items:center;
  border:0;border-radius:999px;background:transparent;
  color:var(--br);font-size:12.5px;font-weight:700;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.campo-password .occhio:focus-visible{outline:2px solid var(--br);outline-offset:2px}

/* L'invito scaduto offre un <a> vestito da bottone: senza questa riga resta
   sottolineato e sembra un link finito in mezzo ai bottoni. */
a.btn{text-decoration:none}

/* -------------------------------------------------- il foglio da stampare
   Il bottone "Stampa" apre una finestra sua, con il suo foglio; ma il browser
   puo' bloccarla, e in ogni caso qualcuno preme Ctrl+P sulla pagina. In quel
   caso deve uscire lo stesso foglio: il QR grande, il nome dell'operatore e
   la scadenza. Niente altro — un foglio che vale come una password non porta
   in giro anche il link e le istruzioni.
   body:has(.qr-invito) e' vero solo mentre quella finestra e' aperta: le
   altre schermate stampano come hanno sempre stampato. */
@media print{
  /* Fuori dalla finestra non si stampa nulla, nemmeno la pagina sotto. */
  body:has(.qr-invito) > *:not(.velo){display:none!important}
  body:has(.qr-invito) .velo{
    position:static;display:block;background:none;padding:0;animation:none
  }
  body:has(.qr-invito) .finestra{
    max-width:none;max-height:none;overflow:visible;
    border-radius:0;box-shadow:none;animation:none;padding:0
  }
  /* La testata porta gia' "QR di primo accesso — Nome": e' il nome
     dell'operatore, e resta. Sparisce solo la X per chiudere. */
  body:has(.qr-invito) .finestra-testa{padding:0}
  body:has(.qr-invito) .finestra-testa h3{font-size:20pt}
  body:has(.qr-invito) .chiudi-x,
  body:has(.qr-invito) .finestra-piede{display:none!important}
  /* Del corpo restano due cose sole: la scadenza e il codice. */
  body:has(.qr-invito) .finestra-corpo{padding:0;text-align:center}
  body:has(.qr-invito) .finestra-corpo > *{display:none!important}
  body:has(.qr-invito) .finestra-corpo > .avviso{
    display:block!important;
    background:none;border:0;color:#000;font-size:12pt;padding:6mm 0 0
  }
  body:has(.qr-invito) .finestra-corpo > .qr-invito{
    display:grid!important;
    background:#fff;border:0;padding:0;margin:8mm auto 0;min-height:0
  }
  /* 70 mm: questo foglio si tiene in mano mentre lo si inquadra, non e'
     appeso a un muro come quello delle condivisioni, e a quella distanza
     bastano. Stessa misura del foglio che apre stampaQr(). */
  body:has(.qr-invito) .qr-invito img{
    width:70mm;height:70mm;max-width:none;min-width:0
  }
}


/* ==================================================================
   PASSATA RESPONSIVE — misure prese con Chromium headless (CDP) sui
   viewport 320x568, 360x800, 390x844, 753x800, 829x390, 844x390,
   1024x768 e con la tastiera simulata (390x250, 360x250).
   Ogni regola qui sotto porta il numero che l'ha motivata: se un domani
   qualcuno la toglie, deve prima rimisurare quel numero.
   Il piano completo sta in docs/PIANO-RESPONSIVE.md (parte C1..C15).
   Nulla di quello che sta sopra e' stato riscritto: questa e' una coda
   che corregge, non un secondo foglio di stile.
   ================================================================== */

/* ---------------------------------------------------------------- C3
   UNA SOLA SCALA DEI LIVELLI.
   Prima non esisteva: `.menu` stava a 70 sotto `.velo` a 80, e i due
   `.velo` (foglio dei dettagli + finestra di conferma) erano tutti e due
   a 80. MISURATO a 390x844 con il foglio aperto e la conferma sopra:
   `elementFromPoint` al centro del bottone "Elimina" della conferma
   restituiva `.scelta` ("Dopo — Il risultato"), cioe' il tocco di
   conferma cambiava la FASE del file invece di eliminarlo. Il menu
   contestuale: `menu.contains(elementFromPoint(centro))` = false, il
   tocco finiva sull'`img` della finestra sotto.
   Le due finestre si distinguono da dove nascono: i fogli dal basso
   (dettagli file, scelta della cartella) si appendono a `document.body`,
   la finestra di conferma di app.js va dentro `#finestre`. */
:root{
  --z-voci:40;
  --z-fab:50;
  --z-selezione:55;
  --z-pannello:70;
  --z-velo:80;
  --z-finestra:90;
  --z-foglio:95;
  --z-menu:110;
  --z-messaggi:120;
}
.barra-alta{z-index:var(--z-voci)}
.fab{z-index:var(--z-fab)}
.barra-selezione{z-index:var(--z-selezione)}
.pannello-caricamenti{z-index:var(--z-pannello)}
.velo{z-index:var(--z-velo)}
.anteprima-piena{z-index:var(--z-finestra)}
.fotocamera{z-index:var(--z-foglio)}
.messaggi{z-index:var(--z-messaggi)}
/* La conferma sta SEMPRE sopra il foglio che l'ha chiesta: e' l'ultima
   domanda fatta all'operatore, e la sua risposta non puo' atterrare su un
   comando della finestra sotto. */
#finestre .velo{z-index:var(--z-finestra)}
/* `!important` a malincuore, e per un motivo solo: menu-contestuale.js
   scrive `menu.style.zIndex = '70'` a mano (componenti/menu-contestuale.js
   :79), e uno stile in linea batte qualunque selettore. Finche' quella
   riga non sparisce dal JS, il foglio deve poter avere l'ultima parola:
   un menu disegnato sotto il velo che l'ha aperto e' un tocco che va
   altrove. */
.menu{z-index:var(--z-menu)!important}

/* ---------------------------------------------------------------- C1
   BARRE DI COMANDI: NIENTE PIU' CONTENUTO IRRAGGIUNGIBILE.
   Le tre barre andavano in `flex-wrap:nowrap` + `overflow-x:auto` con la
   scrollbar nascosta di proposito. La pagina non scorre e la scrollbar non
   si vede: quello che esce non e' scomodo, e' IRRAGGIUNGIBILE.
   MISURATO prima:
   - `.barra-selezione .azioni` scrollWidth 448 contro clientWidth 320 a
     320 px: "Scarica" (right 333,9) ed "Elimina" (right 436,1) interamente
     fuori dallo schermo; a 360: 492 contro 360.
   - `.fotocamera__comandi` 797 contro 320: "Chiudi" a right 782,8, cioe'
     462 px oltre il bordo. Dalla fotocamera non si usciva.
   - `.anteprima-piena .piede .azioni` larga 645 px a 390: "Usa come
     copertina di ..." right 529 e "Apri cartella" right 658,6.
   Si va a capo. La barra cambia altezza andando a capo — era l'obiezione
   scritta nel commento della barra selezione — ma un bottone che si
   sposta di una riga si ritrova, un bottone fuori dallo schermo no. */
.barra-selezione .azioni{
  flex-wrap:wrap;
  row-gap:8px;
  overflow-x:visible;
}
/* Il token che riserva lo spazio in fondo alla pagina va rimisurato
   INSIEME alla barra, altrimenti l'ultima riga di foto finisce sotto di
   essa: era il guasto che il commento del token stesso descriveva.
   MISURATO dopo l'andata a capo, a 320/360/390 con i cinque bottoni:
   144,5 px (conteggio 25 + due righe di azioni 44+8+44 + imbottiture 20 +
   bordo). Si arrotonda a 145. */
:root{--alt-selezione:145px}
/* Con l'andata a capo il distacco dell'azione distruttiva deve reggere
   anche a inizio riga: `margin-left:auto` la spingerebbe a filo del bordo
   destro, dove il pollice che scorre la prende. Restano i 22 px. */

/* La fotocamera: "Chiudi" esce dalla fila e si ancora in alto a destra
   dell'overlay. E' la via di fuga, e una via di fuga non sta in coda a una
   riga che puo' traboccare (e neppure accanto a "Scatta"). */
.fotocamera__comandi{
  flex-wrap:wrap;
  row-gap:8px;
  justify-content:center;
  overflow-x:visible;
  /* spazio a destra per la X ancorata sopra, quando la riga e' unica */
  padding-right:calc(14px + env(safe-area-inset-right,0px));
}
.fotocamera__chiudi{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top,0px));
  right:calc(10px + env(safe-area-inset-right,0px));
  z-index:3;
  margin-left:0;
  padding-left:18px;
}
/* Sotto i 380 px anche le tre parole lunghe dei comandi vanno strette: si
   accorciano le imbottiture invece di rimpicciolire il bersaglio (che
   resta alto 44). */
@media (max-width:379px){
  .fotocamera__comandi .btn{padding:0 12px;font-size:14px}
}

/* L'anteprima a schermo intero: le azioni possono restringersi e andare a
   capo, e l'etichetta lunga ("Usa come copertina di Camper Hymer 890")
   taglia con i puntini invece di spingere fuori i vicini.
   `display:block` + `line-height` al posto di `inline-flex`: dentro un
   flex il testo e' un elemento anonimo e `text-overflow` non lo tocca.
   Questi bottoni contengono solo testo, quindi non si perde nulla. */
.anteprima-piena .piede .azioni{
  flex-shrink:1;
  min-width:0;
  row-gap:8px;
  flex-wrap:wrap;
}
.anteprima-piena .piede .azioni .btn{
  display:block;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:42px; /* 42 + i 2 px di bordo = i 44 del bersaglio */
}
/* C9 — "Scarica" ed "Elimina" erano a 8,0 px esatti: stesso ingombro,
   stesso colore di fondo, e il secondo butta trenta foto nel cestino.
   24 px di stacco, come i 22 che la barra della selezione mette gia'. */
.anteprima-piena .piede .azioni .btn-pericolo{margin-left:24px}
/* Sul telefono due bottoni per riga, non uno: MISURATO dopo l'andata a
   capo, con "Usa come copertina di Camper Hymer 890" (325 px di testo) il
   piede diventava alto 223,3 px su uno schermo di 568, cioe' il 39% della
   pagina. Con il tetto a meta' riga l'etichetta lunga taglia con i
   puntini — il nome della cartella si legge comunque nella schermata
   sotto — e il piede torna a due righe. */
@media (max-width:559px){
  .anteprima-piena .piede .azioni .btn{max-width:calc(50% - 4px)}
}

/* ---------------------------------------------------------------- C2
   LA TESTATA FRA 720 E 885 px.
   MISURATO prima: barra alta 216 px a 720, 203,9 a 735, 163,3 a 753
   (contro i 67 normali), marchio spezzato in colonna su 199 px di altezza,
   e `[data-esci]` compresso a 20 px di larghezza contro i 44 dovuti.
   Causa: `.interno` e' `nowrap`, e l'unico figlio che cede e' `.marchio`,
   che con `min-width:auto` non si stringe ma si spezza.
   Rimedio in tre mosse: il marchio si puo' stringere (min-width:0) e
   tronca con i puntini invece di andare a capo; "Esci" non si stringe piu'
   (era l'unico bersaglio che pagava per tutti); e il nome del marchio
   resta nascosto fino a 885 px invece che fino a 479 — fra 720 e 885 in
   quella riga ci sono gia' le tre voci e la ricerca. */
.marchio{
  min-width:0;
  /* C8: il marchio era un bersaglio da 30x30 (il solo quadrato del segno).
     Diventa alto 44 senza ingrandire il logo. */
  min-height:var(--tocco);
  padding:7px 0;
}
.marchio .nome{
  min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.marchio .nome span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-alta .interno [data-esci]{flex:0 0 auto;min-width:var(--tocco)}
/* Chi cede quando la riga e' piena: la RICERCA, che si accorcia e resta
   usabile, e non il marchio o "Esci", che sono bersagli.
   MISURATO dopo la prima passata: a 720 px il marchio veniva ancora
   schiacciato a 24 px di larghezza (contro i 44 del bersaglio) perche' era
   l'unico elemento restringibile rimasto. Con la ricerca elastica il
   marchio resta 44x44 e la barra 67. */
.cerca-testata{min-width:0;flex:1 1 140px}
.marchio{flex:0 1 auto}
@media (max-width:885px){
  .marchio .nome{display:none}
  /* Senza il nome resta il solo quadrato del logo: MISURATO dopo, 30x44.
     L'imbottitura porta il bersaglio a 44x44 e il margine negativo tiene il
     logo allineato dov'era, a filo dei 14 px di `.contenuto`. */
  .marchio{padding-inline:7px;margin-left:-7px;flex:0 0 auto}
}

/* ---------------------------------------------------------------- C4
   L'IMMAGINE DELL'ANTEPRIMA NON ESCE PIU' DALLA TELA.
   `.tela` e' un `flex:1` dentro una colonna: senza `min-height:0` non puo'
   scendere sotto la sua altezza di contenuto, quindi `max-height:100%`
   sull'immagine si misurava su un contenitore gia' sfondato.
   MISURATO prima con un raster 1280x960: a 844x390 tela alta 239,5 e
   immagine alta 621, cioe' 389,5 px di foto sotto il bordo della tela
   (30% visibile); a 1024x768, 108 px fuori. */
.anteprima-piena .tela{
  min-height:0;
  /* La sola `min-height:0` non bastava: MISURATO dopo, a 844x390 la tela
     restava alta 239,5 e l'immagine 621. Motivo: in una griglia con tracce
     automatiche il `max-height:100%` dell'immagine si misura sulla traccia,
     che a sua volta si dimensiona sul contenuto — riferimento circolare, e
     il browser lo ignora. Con tracce `minmax(0,1fr)` la percentuale ha
     finalmente un fondo su cui appoggiarsi. */
  grid-template-rows:minmax(0,1fr);
  grid-template-columns:minmax(0,1fr)
}
.anteprima-piena .tela img,
.anteprima-piena .tela video{width:auto;height:auto;object-fit:contain}
.anteprima-piena .cornice-video{min-height:0}

/* ---------------------------------------------------------------- C7
   IL PIEDE DEI FOGLI RESTA IN VISTA CON LA TASTIERA APERTA.
   MISURATO prima a 390x250 (tastiera aperta su un telefono in verticale):
   "Salva" del foglio dei dettagli con `bottom` 917,3 su uno schermo di
   250, cioe' 667 px sotto il bordo; "Sposta qui" 78 px sotto; e nel foglio
   dei filtri "Applica" a 704,7 su 568 px di schermo — non era in vista
   nemmeno all'apertura, senza tastiera.
   La finestra diventa una colonna: testa e piede fermi, corpo che scorre.
   `position:sticky` sul piede serve lo stesso, perche' `.finestra` ha
   ancora `overflow:auto` e in stampa torna un blocco normale. */
.finestra{display:flex;flex-direction:column}
.finestra-testa{flex:none}
.finestra-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.finestra-piede{
  flex:none;position:sticky;bottom:0;z-index:1;
  background:var(--carta);
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--linea)
}
/* L'albero delle destinazioni: con la tastiera aperta `44dvh` lasciava due
   righe su dieci. Il minimo fra i due valori tiene righe utili in tutte e
   due le situazioni. */
.albero-cartelle,
.scelta-destinazione{max-height:max(132px, min(44dvh, calc(100dvh - 220px)))}
/* I 132 px sono tre righe da 44: la formula nuda del piano
   (`min(44dvh, 100dvh - 220px)`) MISURATA a 390x250 dava 30 px, cioe' mezza
   riga — meno di quello che si voleva correggere. Il foglio scorre lo
   stesso, e il piede ora e' appiccicato: le altre righe si raggiungono. */

/* ---------------------------------------------------------------- C8
   IL TOKEN --tocco USATO DAVVERO.
   MISURATO prima, a 320/360/390: `.chiudi-x` 36x36, voci del `.menu` 42,
   bottoni dei `.gruppo-scelte` 36 (39 dove il testo va a capo), `.azzera`
   dei filtri 36, `.btn-piccolo` 36, l'azione dentro il messaggio 36,
   `.marchio` 30x30. Nessuno arrivava ai 44 dichiarati in `:root`.
   Dove il disegno deve restare piccolo (la x dentro una pillola) il
   bersaglio si allarga con uno pseudo-elemento, come gia' fa `.togli`. */
.chiudi-x{width:var(--tocco);height:var(--tocco)}
/* `.cerca` era 40: e' il campo della testata e quello del selettore di
   cartella, e in officina si preme con i guanti come tutto il resto.
   (`.barra-cerca .cerca` era gia' stato portato a 44 a suo tempo: ora la
   regola vale per tutti e tre i posti in cui il campo compare.) */
.cerca{min-height:var(--tocco)}
.menu button{min-height:var(--tocco)}
.gruppo-scelte button{min-height:var(--tocco)}
.filtri-attivi .azzera{min-height:var(--tocco)}
.btn-piccolo{min-height:var(--tocco)}
.messaggio .azione{min-height:var(--tocco)}
.riga-albero .qui{min-height:0} /* etichetta, non bersaglio: resta com'e' */

/* ---------------------------------------------------------------- C9
   BERSAGLI ADIACENTI.
   MISURATO prima: le tre voci della barra bassa a 0,0 px l'una dall'altra
   (tre bersagli da 127,3 px attaccati), e nel piede dell'anteprima
   "Scarica" ed "Elimina" a 8,0 px esatti (vedi sopra, C1/C9).
   8 px fra le voci: restano tre bersagli larghi oltre 100 px, e il dito
   che scivola fra "Archivio" e "Cestino" non cambia piu' schermata. */
@media (max-width:559px){
  .voci{gap:8px;padding:2px 8px calc(2px + env(safe-area-inset-bottom,0px))}
}

/* --------------------------------------------------------------- C10
   IL TELEFONO GIRATO, E I FILTRI CHE MANGIANO LA PAGINA.
   MISURATO prima a 844x390 (telefono girato per fotografare): quota 92,5 +
   titolo 27,8 spingevano la griglia a y=235,3, e le schede INTERE visibili
   erano ZERO. Sotto i 520 px di altezza la quota e il titolo della sezione
   si tolgono di mezzo: sono due informazioni di stato, tornano appena si
   raddrizza il telefono, mentre le cartelle sono il lavoro. */
@media (max-height:520px){
  .strato{padding-top:8px}
  .quota{display:none}
  .titolo-sezione{display:none}
  .briciole{margin-bottom:6px}
  .griglia-cartelle{margin-top:0}
}
/* La riga dei filtri attivi resta UNA riga e scorre, con la scrollbar
   VISIBILE: qui il taglio e' accettabile perche' sono pillole ripetibili e
   la barra dice da sola che continua (a differenza di C1, dove quello che
   usciva era l'unica via d'uscita).
   MISURATO prima a 320 con tre filtri: `.filtri-attivi` alta 74 px su due
   righe e prima cella della griglia a y=373. */
@media (max-width:559px){
  .filtri-attivi{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:thin;      /* visibile di proposito */
    padding-bottom:4px;
    margin-bottom:8px
  }
  .filtri-attivi::-webkit-scrollbar{height:4px}
  .filtri-attivi::-webkit-scrollbar-thumb{background:var(--linea2);border-radius:999px}
  .filtri-attivi .pillola,
  .filtri-attivi .azzera{flex:none}
}

/* --------------------------------------------------------------- C11
   ACCESSO CON IL TELEFONO GIRATO.
   MISURATO prima: a 844x390 e a 390x390 il bottone "Entra" aveva `bottom`
   433,6 su 390 px di schermo, 43,6 px sotto la piega, perche'
   `place-items:center` centra un documento da 528 px in un viewport da
   390 e taglia in alto e in basso insieme. */
@media (max-height:520px){
  .accesso{align-items:start;padding-block:16px}
  .scheda-accesso{padding:18px 20px}
  .scheda-accesso h1{font-size:19px}
  /* MISURATO dopo la sola `align-items:start`: "Entra" ancora a bottom 423
     su 390 px di schermo. I 33 px che mancavano stanno tutti nella parte
     decorativa: il quadrato del logo (52 px + 14 di stacco) e la frase
     "Accesso riservato al personale". Girato, la schermata e' tre campi e
     un bottone; il logo torna appena si raddrizza il telefono. */
  .scheda-accesso .segno{display:none}
  .scheda-accesso > .t2.piccolo{display:none}
  .scheda-accesso .campi{margin-top:10px}
  .scheda-accesso .campo{margin-bottom:8px}
}

/* --------------------------------------------------------------- C12
   IL MESSAGGIO NON COPRE PIU' I COMANDI DELL'ANTEPRIMA.
   MISURATO prima a 390x844: il toast occupava 792-850 e il piede
   dell'anteprima 724,8-844 — 52 px di sovrapposizione esatta sulla riga
   dei bottoni, cioe' "Annulla" appoggiato sopra "Elimina".
   Con l'anteprima a video i messaggi passano in ALTO: e' l'unica fascia
   libera (il piede sta in basso e le frecce a meta' altezza), e non
   dipende dall'altezza del piede, che cambia quando le azioni vanno a
   capo. I 60 px lasciano fuori la X di chiusura, che sta a top 8 ed e'
   alta 44. */
body:has(.anteprima-piena) .messaggi{
  top:calc(60px + env(safe-area-inset-top,0px));
  bottom:auto;
  justify-content:flex-start
}

/* --------------------------------------------------------------- C13
   SCHEDE DELLA STESSA RIGA ALLINEATE.
   MISURATO prima: fino a 63,5 px di differenza di altezza fra due schede
   affiancate, perche' il piede delle sottocartelle (44 px) c'e' solo su
   alcune e il nome occupa una riga o due.
   Le celle tornano a stirarsi (`align-items:stretch`) e il piede si
   appiccica in fondo con `margin-top:auto`: il bianco che avanza finisce
   sotto il testo, dentro il bersaglio della scheda, non fra le schede. */
.griglia-cartelle{align-items:stretch}
.scheda-cartella-corpo{flex:1 1 auto}
.scheda-cartella-sotto{margin-top:auto}

/* --------------------------------------------------------------- C14
   L'ERRORE DI ACCESSO NON SPOSTA PIU' NIENTE.
   MISURATO prima a 320x568: scrollHeight da 568 a 591 e il bottone
   "Entra" spostato di 33,4 px in basso nel momento esatto in cui il dito
   sta tornando a premerlo. Lo spazio dell'avviso e' riservato sempre e
   l'avviso ci si appoggia dentro, senza entrare nel flusso. */
.scheda-accesso{position:relative}
.scheda-accesso .campi{margin-bottom:52px}
.scheda-accesso .avviso.rosso{
  position:absolute;left:22px;right:22px;
  margin-top:-52px;
  text-align:left
}
@media (max-height:520px){
  /* Girato, l'avviso e' quasi sempre su una riga sola: si riserva meno. */
  .scheda-accesso .campi{margin-bottom:40px}
  .scheda-accesso .avviso.rosso{margin-top:-40px}
}

/* --------------------------------------------------------------- C15
   IL NOME DELLA CARTELLA SI LEGGE FINO A "FIANCATA DESTRA".
   MISURATO prima a 320/360/390: `-webkit-line-clamp:2` dava clientHeight
   39 contro scrollHeight 59 — spariva proprio la parte che distingue due
   cartelle dello stesso camper. Tre righe costano ~20 px di scheda. */
.nome-cartella{
  -webkit-line-clamp:3;line-clamp:3;
  overflow-wrap:anywhere
}
/* L'anteprima non paga la stiratura: l'aspect-ratio 4/3 resta intatto e il
   bianco che avanza va sotto il testo. */
.anteprima-cartella{flex:none}

/* --------------------------------------------------------------- C16
   IL VENTAGLIO DEL BOTTONE "NUOVO ELEMENTO".
   Progetto: docs/SPEC-NUOVO-ELEMENTO.md. Il FAB non crea piu' solo cartelle:
   al tocco apre quattro pastiglie che salgono da dentro il pulsante.
   Qui c'e' SOLO lo stile: le classi esistono nel foglio PRIMA che il JS le
   usi, perche' una classe che il foglio non conosce non da' errore — rende
   invisibile un bottone, e in questo progetto e' gia' successo due volte. */

/* Il piano dei livelli C3 non si tocca: si infila una banda fra il pannello
   dei caricamenti (70) e il velo delle finestre (80). A 52/54, cioe' appena
   sopra il FAB, il velo sarebbe finito SOTTO la barra della selezione (55) e
   sotto il pannello (70): due superfici velate ma ancora toccabili, che e' il
   guasto peggiore — sembra un errore del telefono. A 72/74 il ventaglio copre
   tutto quello che vive in fondo allo schermo e resta sotto il foglio "Dove
   finiscono?" (80) e sotto menu (110) e messaggi (120), che restano l'ultima
   parola. */
:root{
  --z-ventaglio-velo:72;
  --z-ventaglio:74;

  /* Dove sta il fondo del FAB, adesso. Il FAB si sposta in quattro situazioni
     gia' misurate (pannello aperto, barra bassa sotto 560px, schermo largo,
     ventaglio aperto) e le pastiglie devono partire da dove il pulsante e'
     DAVVERO, altrimenti escono da un punto che non esiste. Le regole .fab
     scritte sopra restano come sono: questo token le rispecchia, non le
     sostituisce. */
  --fondo-fab:calc(16px + env(safe-area-inset-bottom,0px));
}
body.con-pannello{--fondo-fab:calc(126px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){body.con-pannello{--fondo-fab:calc(16px + env(safe-area-inset-bottom,0px))}}

/* ---- il FAB aperto: il + diventa una x ruotando, e scende */
.fab .ico{transition:transform .2s cubic-bezier(.2,.9,.3,1)}
/* Un nodo solo che ruota, non due che si alternano: due nodi sfarfallano e
   perdono il fuoco della tastiera (SPEC §7.5). */
.fab.aperto .ico{transform:rotate(45deg)}
.fab.aperto{z-index:var(--z-ventaglio)}
@media (max-width:559px){
  /* Sotto 560px il FAB sta 56px piu' in alto per non sedersi sulla barra
     .voci. A ventaglio aperto quella barra e' sotto il velo e non e'
     toccabile: quei 56px non servono piu' a niente e costano 56px di
     allontanamento a OGNI pastiglia. Quindi il FAB riscende — non e' un
     vezzo, e' la differenza fra 53 mm e 65 mm dal perno del pollice sul 430.
     Con .con-pannello la barra e' gia' display:none e il FAB e' gia' basso:
     riabbassarlo lo farebbe sparire sotto il bordo. */
  body:not(.con-pannello){--fondo-fab:calc(16px + var(--alt-voci) + env(safe-area-inset-bottom,0px))}
  body:not(.con-pannello) .fab.aperto{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  body:not(.con-pannello).ventaglio-aperto{--fondo-fab:calc(16px + env(safe-area-inset-bottom,0px))}
}
/* In selezione l'unica cosa da fare e' finire o annullare la selezione: il
   FAB si toglie del tutto, come fa gia' la barra bassa (C6). */
body:has(.barra-selezione:not([hidden])) .fab{display:none}

/* MISURATO a 844x390 (telefono girato) col pannello dei caricamenti aperto:
   il pannello arriva a 60dvh, il FAB sale a 126px e la quarta pastiglia
   finiva a -4px — «Nuova cartella» tagliata fuori dal bordo alto, cioe'
   invisibile e intoccabile proprio mentre si sta caricando.
   Si applica lo stesso ragionamento gia' fatto per la barra bassa qui sopra:
   a ventaglio aperto il pannello sta SOTTO il velo e non e' toccabile, quindi
   i 110px che il FAB gli lascia non servono a niente. Il FAB riscende per il
   tempo del ventaglio e la colonna rientra tutta nello schermo (la quarta
   passa da -4px a 106px dal bordo alto). Chiuso il ventaglio, il FAB torna
   sopra il pannello e non gli si siede in mezzo. */
@media (max-height:520px){
  body.con-pannello:has(.fab.aperto){--fondo-fab:calc(16px + env(safe-area-inset-bottom,0px))}
  body.con-pannello.ventaglio-aperto{--fondo-fab:calc(16px + env(safe-area-inset-bottom,0px))}
  body.con-pannello .fab.aperto{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

/* ---- il velo */
/* Piu' chiaro di .velo delle finestre (.55): quello dice "adesso decidi qui e
   basta". Il ventaglio e' un menu, deve lasciar vedere in che cartella si sta.
   .34 isola le pastiglie e lascia leggibile la griglia sotto.
   Niente overflow:hidden sul body per bloccare lo scorrimento: su iOS fa
   perdere la posizione della lista. Il velo assorbe i tocchi da solo. */
.ventaglio-velo{
  position:fixed;inset:0;z-index:var(--z-ventaglio-velo);
  background:rgba(14,22,32,.34);
  touch-action:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .1s linear,visibility 0s linear .1s
}
body.ventaglio-aperto .ventaglio-velo,
.ventaglio-velo.aperto{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .12s linear,visibility 0s
}

/* ---- la colonna */
/* Colonna verticale allineata a destra, non una raggiera: le pastiglie hanno
   un'etichetta (la piu' lunga ~230px) e su una raggiera da 118px di raggio le
   ultime due si toccherebbero. Il "curvo" vive nel raggio 999px e nella
   traiettoria d'uscita da sotto il pulsante: il bordo destro e' invece dritto,
   allineato al filo del pulsante, perche' un rientro progressivo faceva
   leggere la colonna come una scalinata storta.
   Allineate a destra perche' il pollice arriva da destra e il corpo della
   mano non copre l'etichetta mentre la si legge.
   column-reverse: la prima voce del DOM (Scatta foto) e' quella piu' vicina
   al pollice, cioe' in fondo. */
.ventaglio{
  position:fixed;right:16px;z-index:var(--z-ventaglio);
  /* fondo del FAB + 27 (mezza altezza FAB) + 62 (primo scarto) - 23 (mezza
     pastiglia) = fondo + 66: il centro della prima pastiglia cade a 62px dal
     centro del FAB, come da tabella SPEC §1. */
  bottom:calc(var(--fondo-fab) + 66px);
  display:flex;flex-direction:column-reverse;align-items:flex-end;
  gap:10px;
  margin:0;padding:0;list-style:none;
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .14s
}
body.ventaglio-aperto .ventaglio,
.ventaglio.aperto{visibility:visible;pointer-events:auto;transition:visibility 0s}

/* Col pannello dei caricamenti aperto il ventaglio parte da 126px+safe: la
   quarta pastiglia finirebbe a 383px dal fondo, cioe' 70 mm dal perno del
   pollice — sul limite. Il passo scende a 52 (distacco 6) e recupera 12px.
   E' l'unica combinazione con margine sottile: si rimisura se cambia. */
body.con-pannello .ventaglio{gap:6px}

/* ---- la pastiglia */
.ventaglio-voce{
  /* --sposta: quanto la separa dal centro del FAB. E' anche la distanza da
     cui esce: la pastiglia e' DENTRO il pulsante prima di uscire, non compare
     — emerge.
     Le pastiglie sono allineate al filo destro del pulsante: il rientro
     progressivo che avevano prima disegnava un arco piu' morbido, ma faceva
     leggere la colonna come una scalinata storta invece che come un elenco.
     Il "curvo" resta nel raggio 999px e nella traiettoria d'uscita. */
  --sposta:62px;

  display:inline-flex;align-items:center;gap:10px;
  min-height:46px;padding:0 16px 0 14px;
  border:1px solid var(--linea);border-radius:999px;
  background:var(--carta);color:var(--txt);
  font-family:inherit;font-size:15px;font-weight:700;line-height:1;
  text-align:left;cursor:pointer;
  /* Pieno sole: fondo bianco pieno e un'ombra che stacca, non un velo
     colorato. Testo su carta: 15,8:1. */
  box-shadow:0 2px 4px rgba(14,22,32,.16),0 14px 30px -14px rgba(14,22,32,.55);

  /* Cintura: a 320px lo spazio utile e' 288 e la voce piu' lunga misura ~260.
     Sta. Se un domani qualcuno allunga l'etichetta si accorcia, non va a capo:
     una riga in piu' romperebbe il passo di 56px e con esso tutti i conti. */
  max-width:calc(100vw - 48px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

  opacity:0;transform:translateY(var(--sposta)) scale(.86);
  transform-origin:bottom right;
  /* Chiusura: entrata secca, piu' rapida dell'apertura (62 ms contro 97). */
  transition:transform .12s cubic-bezier(.4,0,1,1),opacity .1s linear
}
.ventaglio-voce .ico{flex:none;color:var(--br)}
.ventaglio-voce:focus-visible{outline:3px solid var(--br2);outline-offset:2px}

/* Solo la distanza dal pulsante: il bordo destro e' lo stesso per tutte,
   allineato al filo del pulsante che le ha aperte. */
.ventaglio-voce:nth-child(1){--sposta:62px}
.ventaglio-voce:nth-child(2){--sposta:118px}
.ventaglio-voce:nth-child(3){--sposta:174px}
.ventaglio-voce:nth-child(4){--sposta:230px}
/* Col passo compresso gli scarti seguono: 62/114/166/218. */
body.con-pannello .ventaglio-voce:nth-child(2){--sposta:114px}
body.con-pannello .ventaglio-voce:nth-child(3){--sposta:166px}
body.con-pannello .ventaglio-voce:nth-child(4){--sposta:218px}

/* Chiusura a ritroso: parte la piu' lontana (14 ms di scarto), cosi' il
   ventaglio si richiude DENTRO il pulsante invece di sfarfallare tutto
   insieme. */
.ventaglio-voce:nth-child(1){transition-delay:42ms}
.ventaglio-voce:nth-child(2){transition-delay:28ms}
.ventaglio-voce:nth-child(3){transition-delay:14ms}
.ventaglio-voce:nth-child(4){transition-delay:0ms}

/* Apertura: uscita decisa, arrivo morbido, nessun rimbalzo — su quattro
   elementi in fila un overshoot raddoppia il tempo percepito e con i guanti
   si tocca durante il rimbalzo. Ritardo 26 ms dalla piu' vicina al pollice:
   l'ultima e' ferma a 97 ms, dentro il limite di latenza percepita.
   Solo transform e opacity: niente altezze, niente margini, niente bottom —
   il resto fa lavorare il layout e produce salti sulla griglia sotto. */
body.ventaglio-aperto .ventaglio-voce,
.ventaglio.aperto .ventaglio-voce{
  opacity:1;transform:translateY(0) scale(1);
  transition:transform .19s cubic-bezier(.2,.9,.3,1),opacity .13s linear
}
body.ventaglio-aperto .ventaglio-voce:nth-child(1),.ventaglio.aperto .ventaglio-voce:nth-child(1){transition-delay:0ms}
body.ventaglio-aperto .ventaglio-voce:nth-child(2),.ventaglio.aperto .ventaglio-voce:nth-child(2){transition-delay:26ms}
body.ventaglio-aperto .ventaglio-voce:nth-child(3),.ventaglio.aperto .ventaglio-voce:nth-child(3){transition-delay:52ms}
body.ventaglio-aperto .ventaglio-voce:nth-child(4),.ventaglio.aperto .ventaglio-voce:nth-child(4){transition-delay:78ms}

/* Il tocco si sente: scala corta sul posto, senza spostare il vicino. Vale
   solo a ventaglio aperto, altrimenti sovrascriverebbe la posa di partenza. */
body.ventaglio-aperto .ventaglio-voce:active,
.ventaglio.aperto .ventaglio-voce:active{transform:translateY(0) scale(.96)}

/* ---- la voce spenta (ultimo livello raggiunto) */
/* Non sparisce: resta, spenta, con la ragione sotto l'etichetta. Una voce che
   a volte c'e' e a volte no costringe a ricontare le voci ogni volta; una
   voce spenta si impara una volta sola. Il motivo e' scritto, non affidato al
   solo colore. */
.ventaglio-voce[aria-disabled],
.ventaglio-voce:disabled{
  background:var(--tela);color:var(--t2);cursor:default;
  box-shadow:0 1px 3px rgba(14,22,32,.12)
}
.ventaglio-voce[aria-disabled] .ico,
.ventaglio-voce:disabled .ico{color:var(--t3)}
body.ventaglio-aperto .ventaglio-voce[aria-disabled]:active,
body.ventaglio-aperto .ventaglio-voce:disabled:active,
.ventaglio.aperto .ventaglio-voce[aria-disabled]:active,
.ventaglio.aperto .ventaglio-voce:disabled:active{transform:translateY(0) scale(1)}
/* Il motivo ("Ultimo livello") sta dentro la pastiglia, sotto l'etichetta: la
   voce cresce in altezza, quindi il testo va in colonna. Il passo di 56px
   regge perche' e' l'ultima della colonna e cresce verso l'alto. */
.ventaglio-voce .testo{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.ventaglio-voce .motivo{font-size:11.5px;font-weight:600;color:var(--t2);line-height:1.15}
.ventaglio-voce:has(.motivo){padding-top:7px;padding-bottom:7px;line-height:1.15}

/* ---- movimento ridotto */
/* Non "piu' lenta": niente. Comparsa immediata. Tolto il movimento la
   rotazione del + non racconta piu' niente — in quel caso il FAB scambia
   l'icona (ic('chiudi')) invece di ruotarla, e lo fa il JS, che gia' sa se il
   ventaglio e' aperto. */
@media (prefers-reduced-motion:reduce){
  .ventaglio,.ventaglio-velo,.ventaglio-voce,.fab,.fab .ico{transition:none!important;transition-delay:0s!important}
  .ventaglio-voce{transform:none}
  body.ventaglio-aperto .ventaglio-voce,.ventaglio.aperto .ventaglio-voce{transform:none}
  .fab.aperto .ico{transform:none}
}

/* ---- l'interruttore, e i suoi tre nomi */
/* componenti/nuovo-elemento.js accende il ventaglio con `.mostra` su velo e
   menu e `.aperto` sul FAB; altre viste potrebbero usare `.aperto` sui nodi o
   `body.ventaglio-aperto`. Il foglio conosce tutti e tre invece di imporne
   uno: una classe che il JS usa e il foglio non ha non da' errore — lascia il
   menu invisibile, ed e' il guasto che questo progetto ha gia' pagato due
   volte. Le regole qui sotto ripetono lo stato aperto per `.mostra`. */
.ventaglio-velo.mostra{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .12s linear,visibility 0s
}
.ventaglio.mostra{visibility:visible;pointer-events:auto;transition:visibility 0s}
.ventaglio.mostra .ventaglio-voce{
  opacity:1;transform:translateY(0) scale(1);
  transition:transform .19s cubic-bezier(.2,.9,.3,1),opacity .13s linear
}
.ventaglio.mostra .ventaglio-voce:nth-child(1){transition-delay:0ms}
.ventaglio.mostra .ventaglio-voce:nth-child(2){transition-delay:26ms}
.ventaglio.mostra .ventaglio-voce:nth-child(3){transition-delay:52ms}
.ventaglio.mostra .ventaglio-voce:nth-child(4){transition-delay:78ms}
.ventaglio.mostra .ventaglio-voce:active{transform:translateY(0) scale(.96)}
.ventaglio.mostra .ventaglio-voce[aria-disabled]:active,
.ventaglio.mostra .ventaglio-voce:disabled:active{transform:translateY(0) scale(1)}
/* Il FAB porta `.aperto` da solo: quando c'e' lui, il ventaglio e' aperto e la
   barra bassa non serve piu' — la discesa sotto 560px e' gia' scritta sopra
   su `.fab.aperto`, quindi anche --fondo-fab deve seguire senza aspettare una
   classe sul body. */
@media (max-width:559px){
  body:not(.con-pannello):has(.fab.aperto){--fondo-fab:calc(16px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .ventaglio.mostra .ventaglio-voce{transform:none;transition:none!important;transition-delay:0s!important}
}

/* ---- il ventaglio che SCENDE (bottone "Nuovo elemento" in testata) */
/* Da 1000 px in su il FAB non c'e' (regola piu' sopra) e il ventaglio esce dal
   bottone dell'azione principale, che sta in ALTO a destra: da li' una colonna
   che sale finirebbe fuori dallo schermo. Stessa colonna, stesse pastiglie,
   verso opposto — non un secondo componente: la scelta la fa
   componenti/nuovo-elemento.js guardando dove c'e' spazio, come gia' fa il
   menu dei tre puntini.
   `top`, `bottom` e `right` li scrive il JS in linea (sono coordinate: dipendono
   da dove finisce il bottone in una barra che contiene marchio, voci, ricerca
   e uscita). Qui c'e' solo cio' che e' aspetto: l'ordine delle pastiglie e il
   punto da cui emergono. */
.ventaglio.giu{
  /* Ordine naturale: la prima voce (Scatta foto) e' la piu' vicina al bottone,
     cioe' in cima. Con `column-reverse` sarebbe l'ultima, e l'occhio che
     scende dal bottone leggerebbe l'elenco al contrario. */
  flex-direction:column
}
.ventaglio.giu .ventaglio-voce{
  /* Le pastiglie sono DENTRO il bottone prima di uscire: salendo per scendere,
     esattamente come nell'altro verso scendono per salire. */
  transform:translateY(calc(-1 * var(--sposta))) scale(.86);
  transform-origin:top right
}
.ventaglio.giu.mostra .ventaglio-voce{transform:translateY(0) scale(1)}
.ventaglio.giu.mostra .ventaglio-voce:active{transform:translateY(0) scale(.96)}
.ventaglio.giu.mostra .ventaglio-voce[aria-disabled]:active,
.ventaglio.giu.mostra .ventaglio-voce:disabled:active{transform:translateY(0) scale(1)}
@media (prefers-reduced-motion:reduce){
  .ventaglio.giu .ventaglio-voce,
  .ventaglio.giu.mostra .ventaglio-voce{transform:none}
}

/* ---- la prima riga del foglio "Dove finiscono?" */
/* E' il caso vero: arriva un camper e non ha ancora una cartella. Quindi non
   e' una riga come le altre — e' piena, blu marchio, 48px, la prima cosa che
   il pollice trova aprendo il foglio dal basso. Sta sopra i Recenti, fuori
   dall'elenco che scorre. */
.riga-destinazione.nuova{
  min-height:48px;padding:8px 14px;margin-bottom:8px;
  background:var(--br);color:#fff;font-weight:800;
  box-shadow:0 10px 24px -14px rgba(18,58,107,.9)
}
.riga-destinazione.nuova:hover,
.riga-destinazione.nuova:active{background:var(--br-h)}
.riga-destinazione.nuova .ico{color:#fff;flex:none}
.riga-destinazione.nuova:focus-visible{outline:3px solid var(--br2);outline-offset:2px}

/* -----------------------------------------------------------------------
   PANNELLO DELLO SVILUPPATORE (#/pannello, viste/pannello.js)

   In coda al foglio e senza toccare nulla di quanto c'e' sopra: qui dentro
   si riusano .scheda, .imbottita, .griglia2, .avviso, .pillola, .barra-avanz
   e le utility, e si aggiunge solo cio' che non esisteva — i riquadri dei
   numeri grandi, l'istogramma e le righe etichetta/valore.

   Si progetta a 320 px: i quattro numeri che contano stanno due per riga
   senza scorrere, e diventano quattro in fila solo quando c'e' spazio vero.

   --- pannello dello sviluppatore (#/pannello, docs/SPEC-PANNELLO.md) ---
   Aggregati in tutta la pagina; il dettaglio per persona sta in fondo, in
   .sezione-nominativa, per la ragione di legge scritta accanto alle regole.
   impianto ....... .testa-pannello (> .titolo-pannello, .aggiornato)
                    .fascia-avvisi (> .avviso gia' esistente)
   numeri grandi .. .griglia-numeri (2 colonne, 4 da 900px)
                    .numerone (+ .attenzione .critica; dentro .etichetta
                    .valore .nota, e la .barra-avanz.sottile gia' esistente)
   istogramma ..... .grafico-giorni (e' una .scheda .imbottita)
                    .grafico-corpo > .barra-g (+ .vuota .scelta) > i
                    .grafico-asse .grafico-lettura (aria-live)
                    .dettaglio-serie (details: gli stessi giorni in numeri,
                    alternativa testuale del grafico)
   righe di dati .. .elenco-dati > .riga-dato (> .etichetta .valore .nota;
                    + .colonna-dato, + .riga-tocca se e' un bottone)
                    .etichetta-piccola .riga-errore
   mancanze ....... .non-disponibile (il riquadro che non si e' calcolato lo
                    dice) .non-calcolabili (la scheda dei numeri che non
                    esistono)
   per operatore .. .sezione-nominativa (details, chiuso; summary con
                    apri/chiudi in coda) .titolo-scheda
                    .interruttore-nominativo > .riga-interruttore (label:
                    input nascosto alla vista ma non al Tab, + .levetta,
                    + .testo-interruttore) .esito-interruttore
   ----------------------------------------------------------------------- */

.titolo-pannello{margin:0}
/* Titolo a sinistra, "Aggiorna" a destra; a schermo stretto il bottone va a
   capo invece di schiacciare la data del calcolo. */
.testa-pannello{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  justify-content:space-between;margin-bottom:12px
}
.testa-pannello .btn{flex:none}
.aggiornato{margin-top:2px}

/* La fascia degli avvisi: c'e' solo se c'e' qualcosa da dire (il JS non la
   disegna vuota), quindi non ha stati "a posto" da vestire. */
.fascia-avvisi{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.fascia-avvisi .avviso{display:flex;align-items:flex-start;gap:8px}
.fascia-avvisi .avviso .ico{margin-top:2px}

/* ---- i quattro numeri grandi */
.griglia-numeri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.numerone{
  min-width:0;background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--r);box-shadow:var(--sh);padding:12px
}
.numerone .etichetta{font-size:12px;font-weight:700;color:var(--t2);line-height:1.25}
/* Il numero e' la cosa che si legge da lontano, e in tabellare non balla
   quando cambia di una cifra. */
.numerone .valore{
  font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:4px 0 6px;
  font-variant-numeric:tabular-nums
}
.numerone .nota{font-size:12px;color:var(--t2);line-height:1.35}
.numerone .nota+.nota{margin-top:3px}
.numerone .barra-avanz{margin:4px 0}
/* Lo stato NON e' affidato al solo colore: la frase sotto dice sempre quanto
   manca al blocco. Il colore aggiunge, non sostituisce. */
.numerone.attenzione .valore{color:var(--ambra)}
.numerone.attenzione .barra-avanz i{background:var(--ambra)}
.numerone.critica .valore{color:var(--rosso)}
.numerone.critica .barra-avanz i{background:var(--rosso)}
.numerone .non-disponibile{margin-top:6px}
@media (min-width:900px){.griglia-numeri{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- l'istogramma dei caricamenti per giorno */
/* La scheda che lo contiene: serve un appiglio proprio, perche' l'istogramma
   e' l'unico blocco che non deve stringersi sotto una certa misura. */
.grafico-giorni{min-width:0}
/* Una serie sola: nessuna legenda, nessun colore da decifrare, l'altezza e'
   l'unico codice — e l'altezza si legge anche in bianco e nero e con
   qualunque daltonismo. */
.grafico-corpo{
  display:flex;align-items:flex-end;gap:2px;height:132px;margin-top:10px;
  padding-bottom:2px;border-bottom:1px solid var(--linea)
}
.barra-g{
  flex:1 1 0;min-width:0;height:100%;padding:0;
  display:flex;align-items:flex-end;background:none;border-radius:4px 4px 0 0;
  touch-action:manipulation
}
.barra-g i{
  display:block;width:100%;background:var(--br2);border-radius:4px 4px 0 0;
  /* Un giorno a zero resta una tacca: senza, «nessun caricamento» e «buco nei
     dati» si somigliano troppo. */
  min-height:2px
}
.barra-g.vuota i{background:var(--linea2)}
.barra-g:hover i{background:var(--br)}
/* La barra scelta non si distingue per il solo colore: prende anche il
   contorno pieno, che si vede in scala di grigi. */
.barra-g.scelta i{background:var(--br);box-shadow:0 0 0 2px var(--br-s)}
.grafico-asse{display:flex;justify-content:space-between;margin-top:6px}
.grafico-lettura{
  margin-top:8px;font-size:13px;font-weight:600;color:var(--txt);
  background:var(--tela);border-radius:10px;padding:8px 10px;min-height:36px
}
.dettaglio-serie{margin-top:10px}
.dettaglio-serie>summary{
  min-height:var(--tocco);display:flex;align-items:center;
  font-size:13px;font-weight:700;color:var(--br);cursor:pointer
}

/* ---- le schede e le righe etichetta/valore */
.titolo-scheda{font-size:16px;line-height:1.25;margin-bottom:8px}
.griglia2>.scheda{min-width:0}
.elenco-dati{display:flex;flex-direction:column}
/* Niente tabella a scorrimento orizzontale: coppie etichetta/valore, e sotto
   i 400 px il valore scende sotto l'etichetta invece di strizzarla. */
.riga-dato{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;width:100%;
  text-align:left;padding:8px 0;border-top:1px solid var(--linea);min-width:0
}
.riga-dato:first-child{border-top:0}
.riga-dato .etichetta{flex:1;min-width:0;font-size:13.5px;color:var(--t2)}
.riga-dato .valore{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.riga-dato .nota{flex-basis:100%;font-size:12px;line-height:1.35}
/* Le righe che portano da qualche parte (le cartelle piu' pesanti) sono
   bottoni veri, alti quanto un dito. */
.riga-tocca{min-height:var(--tocco);border-radius:10px;padding:8px;margin:0 -8px;touch-action:manipulation}
.riga-tocca:hover{background:var(--tela)}
.riga-dato.colonna-dato{align-items:flex-start;flex-direction:column;gap:2px}
.riga-dato.colonna-dato .etichetta{font-weight:700;color:var(--txt)}
.etichetta-piccola{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:4px}
.riga-errore{color:var(--t2);overflow-wrap:anywhere;margin-top:3px}

/* Il riquadro che non si e' calcolato lo dice, invece di sparire o di
   mostrare uno zero che sembrerebbe un dato vero. */
.non-disponibile{
  font-size:12.5px;line-height:1.4;color:var(--ambra);
  background:var(--ambra-s);border-radius:10px;padding:8px 10px
}
.non-calcolabili .riga-dato .nota{color:var(--t2)}

/* ---- la sezione con i dati per singola persona */
/* Sta in fondo, chiusa, e si apre con un gesto esplicito: e' il confine
   dell'art. 4 dello Statuto dei Lavoratori (controllo a distanza
   dell'attivita' dei lavoratori), non una preferenza di layout. Il confine
   vero pero' e' nel server — /api/pannello/per-operatore risponde 403 finche'
   la sezione non e' stata accesa apposta: queste regole sono solo il modo in
   cui la pagina lo dichiara a chi la guarda. Vedi docs/SPEC-PANNELLO.md §4.2
   e il commento in testa a viste/pannello.js. */
.sezione-nominativa{border-color:var(--linea2)}
.sezione-nominativa>summary{
  min-height:var(--tocco);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  cursor:pointer;list-style:none
}
.sezione-nominativa>summary::-webkit-details-marker{display:none}
.sezione-nominativa>summary .titolo-scheda{margin:0}
.sezione-nominativa>summary::after{
  content:'apri';margin-left:auto;font-size:12px;font-weight:700;color:var(--br)
}
.sezione-nominativa[open]>summary::after{content:'chiudi'}

/* ---- l'interruttore della sezione nominativa (SPEC-PANNELLO §4.2.6)
   Sta in fondo alla scheda, sotto l'avviso di legge: chi lo gira deve avere
   sotto gli occhi cosa sta accendendo. Non e' un vezzo grafico — e' l'unico
   comando di questo pannello che cambia COSA il server produce, non cosa
   mostra, quindi si stacca dal resto con una riga sopra.
   Il quadratino nativo resta un input vero (niente display:none): esce dalla
   vista ma continua a prendere il fuoco da tastiera e ad annunciare il proprio
   stato, e la .levetta gli fa da veste. Nasconderlo davvero renderebbe
   l'interruttore irraggiungibile a chi naviga con Tab. */
.interruttore-nominativo{border-top:1px solid var(--linea);padding-top:12px}
.riga-interruttore{display:flex;align-items:flex-start;gap:12px;cursor:pointer;min-height:var(--tocco)}
.riga-interruttore input{position:absolute;opacity:0;width:0;height:0}
.levetta{
  flex:none;position:relative;width:44px;height:26px;margin-top:2px;border-radius:999px;
  background:var(--grigio);transition:background .15s ease
}
.levetta::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(14,22,32,.3);transition:transform .15s ease
}
/* Acceso = ambra, non verde: il verde direbbe «tutto a posto», e accendere la
   produzione di dati nominativi e' una scelta che merita attenzione, non un
   traguardo raggiunto. E' lo stesso colore dell'avviso di legge qui sopra. */
.riga-interruttore input:checked~.levetta{background:var(--ambra)}
.riga-interruttore input:checked~.levetta::after{transform:translateX(18px)}
.riga-interruttore input:focus-visible~.levetta{outline:2px solid var(--br2);outline-offset:2px}
.riga-interruttore input:disabled~.levetta{opacity:.5}
.testo-interruttore{display:flex;flex-direction:column;gap:2px;min-width:0}
.testo-interruttore .etichetta{font-weight:600}
.esito-interruttore{margin:8px 0 0;color:var(--rosso);font-size:13px}

/* -----------------------------------------------------------------------
   CLASSI DISPONIBILI (indice per chi scrive le altre schermate)

   impianto ....... .contenuto .strato .barra-alta/.interno .marchio/.segno/.nome
                    .briciole (+ .sep .qui) .titolo-sezione .divisorio .ico
   testata ........ .voci > .voce (+ .attiva, > .etichetta; <560px la nav
                    scende in fondo allo schermo, si nasconde con
                    body.con-pannello)
                    .pallino.avviso-voce (dentro una .voce)
                    .azione-testata (Nuovo elemento: apre il ventaglio dove la
                    schermata lo monta) .cerca-testata (oggi non usata)
   quota .......... .quota (+ .attenzione .critica) .quota .testa/.valore/.nota
                    .barra-avanz (+ .sottile) > i
   bottoni ........ .btn .btn-primario .btn-fantasma .btn-pericolo
                    .btn-piccolo .btn-grande .btn-largo .btn-icona .fab
                    body.con-pannello (alza il .fab sopra il pannello)
   stati .......... .pillola (+ .verde .ambra .rossa .blu) .pallino (+ colori)
   contenitori .... .scheda .imbottita .vuoto .caricando .griglia2
   moduli ......... .campo .input .select .textarea .input.errato
                    .errore-campo .aiuto .cerca .scelta (+ .attiva)
   cartelle ....... .elenco-cartelle .riga-cartella (.icona .corpo .nome .meta .apri)
                    .menu-azioni .menu (button, button.pericolo, .sep)
                    il .menu lo disegna menu-contestuale.js: sta nel body,
                    e' position:fixed e non e' mai figlio di chi lo apre
   matrice ........ .griglia-cartelle > .scheda-cartella
                    .scheda-cartella-corpo (il bottone che apre)
                    .anteprima-cartella > .anteprima-mini, .anteprima-piu
                    (+ .anteprima-vuota .anteprima-caricamento al posto suo)
                    .testo-cartella > .nome-cartella
                    .conteggi-cartella > .dato-cartella (+ .num)
                    .etichette-cartella (:empty sparisce) .tempo-cartella
                    .menu-cartella (con .menu-azioni: i tre puntini)
                    .scheda-cartella-sotto (> .freccia) .conta-cartelle
                    .vuoto-cartelle (+ .scheda .vuoto) .vuoto-cartelle-passi
                    .scelta-destinazione > .riga-destinazione (sposta cartella)
   file ........... .griglia-file .cella-file (.durata .fascetta .segno-video
                    .senza-mini .selezionata) .selettore
                    .elenco-file .riga-file (.mini .corpo .nome .meta .selezionata)
                    .barra-strumenti .gruppo-scelte (button.attivo)
   anteprima ...... .anteprima-piena (.testa > .contatore, .tela .chiudi
                    .piede > .dati/.azioni, .nome .meta, .cornice-video
                    .avviso-anteprima .nota-anteprima)
                    .nav-anteprima (+ .prec .succ)
   finestre ....... .velo .finestra (+ .larga) .finestra-testa .finestra-corpo
                    .finestra-piede .chiudi-x
   caricamenti .... .pannello-caricamenti (.testa > .titolo, .righe)
                    .riga-caricamento (.corpo .nome .stato .azioni, + .fallita)
   fotocamera ..... .fotocamera (.fotocamera__anteprima __messaggio __cronometro
                    __comandi __scatta __registra(+.in-registrazione)
                    __cambia __chiudi __sistema)
   involucri ...... .gestore (schermata dentro la cartella) .filtri (barra)
   avvisi ......... .avviso (+ .ambra .rosso .verde) .messaggi .messaggio (+ .ok .errore)
   accesso ........ .accesso .scheda-accesso (.segno .campi)
   condivisione ... .qr-grande .codice-link
   accesso QR ..... .qr-invito (> img: fondo bianco, margine, min 200 px)
                    .codice-gruppi (il codice da dettare)
                    .requisiti > li (+ .fatto) > .segno-req .pallino-req
                    .campo-password (> .input + .occhio, bersaglio 44 px)
                    a.btn (il link vestito da bottone dell'invito scaduto)
                    stampa: body:has(.qr-invito) lascia sul foglio solo il
                    QR da 70 mm, il nome in testata e la scadenza
   utility ........ .riga (+.avvolgi) .colonna .spazio .t2 .t3 .piccolo .minuto
                    .num .tronca .nascosto .centrato .solo-voce .mt4..mt24

   --- file manager (dentro la cartella) ---
   griglia ........ .cella-file .scheletro (velo di attesa, si toglie con
                    l'immagine) img.in-arrivo / .mini.in-arrivo (dissolvenza)
                    .griglia-file.in-selezione .elenco-file.in-selezione
   selezione ...... .barra-selezione (> .conteggio, .azioni, .avviso)
                    body.con-pannello (alza il .fab e allunga lo .strato)
   ricerca/filtri . .barra-cerca (> .cerca) .btn > .conteggio-filtri
                    .filtri-attivi (> .pillola > .togli, .azzera)
                    .gruppo-scelte button .freccia (solo sulla voce .attivo)
   fase ........... .pillola.fase-prima .fase-durante .fase-dopo .fase-documento
                    .cella-file .fase (in basso a sinistra; se c'e' .fascetta
                    prima di essa nel DOM si nasconde)
                    .riga-file .colonna (+ .colonna-fase .colonna-data, >=900px)
   destinazione ... .albero-cartelle .riga-albero (+ .attiva, :disabled,
                    .nome .icona .qui, rientro con --liv) .albero-titolo
   dati del file .. .dati-file (> .dato > .etichetta .valore) .anteprima-dati
                    .nome-estensione (> .input + .estensione) .contatore
                    (+ .vicino .oltre) .valori-diversi .scelta.invariata
   esiti .......... .elenco-esiti .riga-esito (+ .fallito, > .nome .motivo)
   attesa ......... .btn.in-corso (bottone bloccato con la rotella)
   menu di cella .. .casella-file (involucro: dentro .cella-file + .menu-azioni)
                    .puntini (bersaglio 44 px) .menu button:disabled
   spente ......... .gruppo-scelte button:disabled .scelta:disabled
   messaggi ....... .messaggio > .testo .azione .chiudi
   filtri ......... .gruppo-filtro (> .etichetta)
                    .gruppo-scelte.scorre .periodo-date .spunta
   fogli .......... body.finestra-aperta (blocca lo scorrimento sotto)

   --- ventaglio "Nuovo elemento" (C16, docs/SPEC-NUOVO-ELEMENTO.md) ---
   Esce dal FAB (sale) o dal bottone in testata (.ventaglio.giu, scende): la
   direzione la sceglie il JS guardando dove c'e' spazio.
   ventaglio ...... .fab.aperto (il + ruota di 45deg e diventa x; sotto 560px
                    il FAB riscende a 16px+safe; sale a --z-ventaglio)
                    .ventaglio-velo (velo chiaro .34, touch-action:none, z 72:
                    sopra il pannello dei caricamenti, sotto .velo)
                    .ventaglio (contenitore role=menu, column-reverse,
                    ancorato al FAB tramite --fondo-fab)
                    .ventaglio-voce (pastiglia 46px; --sposta lo imposta il
                    foglio con :nth-child, il JS non calcola niente; bordo
                    destro allineato per tutte; dentro: .ico + .testo > .motivo)
                    .ventaglio-voce[aria-disabled] / :disabled (ultimo
                    livello: resta, spenta, col motivo scritto)
                    l'interruttore ha tre nomi equivalenti, il foglio li
                    conosce tutti: .mostra su velo e menu (quello che usa
                    nuovo-elemento.js), .aperto sui nodi, o
                    body.ventaglio-aperto
                    @media (max-height:520px): col pannello aperto il FAB
                    riscende per il tempo del ventaglio (la quarta pastiglia
                    a 844x390 finiva a -4px, fuori dal bordo alto)
                    body.con-pannello .ventaglio (passo compresso a 52px)
                    .riga-destinazione.nuova (prima riga piena del foglio
                    "Dove finiscono?": In una cartella nuova)
   ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   I NUMERI NUOVI DEL PANNELLO (docs/SPEC-NUMERI.md)

   In coda al foglio e senza toccare nulla di quanto c'e' sopra: qui dentro si
   riusano .scheda, .imbottita, .elenco-dati, .riga-dato, .numerone,
   .grafico-asse, .grafico-lettura, .dettaglio-serie e le utility, e si
   aggiunge solo cio' che non esisteva.

   Ogni classe qui sotto e' usata da viste/pannello.js e ognuna ha la sua
   regola: una classe usata dal JS e non definita qui non da' nessun errore,
   rende invisibile l'elemento — trappola gia' pagata piu' volte in questo
   progetto.

   blocco «uso» ... .titolo-blocco .nota-blocco
                    .griglia-numeri.tre (tre riquadri: 1 colonna sotto i
                    560px, 2 fino a 900, 3 sopra)
   data d'inizio .. .da-quando (+ .incerta) — "dal 11/09/2026" sotto ogni
                    numero nuovo: un contatore non e' un totale di sempre
   storico spazio . .grafico-spazio (e' una .scheda .imbottita)
                    .storico-pochi (il riquadro che dice che i punti non
                    bastano ancora per una curva)
                    .spazio-corpo > .spazio-tela (svg) > .spazio-area
                    .spazio-linea; .spazio-punti > .punto-spazio (+ .scelto)
                    > i (il pallino, posizionato con `bottom` in linea)
   per operatore .. .consenso-di-sapere > .riga-consenso
                    (> .voce-consenso .cosa-consenso)
                    .riga-presenza (le date dentro la riga dell'operatore)
   ----------------------------------------------------------------------- */

/* ---- il blocco «Uso dell'applicazione» */
/* Un titolo di sezione fuori dalle schede: separa i numeri di sistema dai
   numeri che riguardano le persone. La separazione si vede prima di leggere. */
.titolo-blocco{font-size:17px;line-height:1.25;letter-spacing:-.01em}
.nota-blocco{margin-top:2px}
/* Tre riquadri: due per riga a 320 px stringerebbero il terzo da solo in
   fondo, e questi tre riquadri hanno note lunghe (dicono cosa NON sono).
   Quindi uno per riga sul telefono, due sul tablet, tre sul largo. */
.griglia-numeri.tre{grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.griglia-numeri.tre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.griglia-numeri.tre{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- "dal 11/09/2026": la data di inizio di ogni numero nuovo.
   Non e' una nota a pie' di pagina ed e' per questo che ha un aspetto suo: il
   numero senza la sua data si legge come un totale di sempre, e non lo e'. */
.da-quando{
  display:inline-block;font-size:11.5px;font-weight:700;line-height:1.2;
  color:var(--t2);background:var(--tela);border-radius:999px;padding:2px 8px
}
/* Quando il server non sa dire da quando conta, il riquadro lo dice invece di
   tacere: il dubbio si vede, come si vede un dato mancante. */
.da-quando.incerta{color:var(--ambra);background:var(--ambra-s);font-weight:600}

/* ---- lo storico dello spazio */
.grafico-spazio{min-width:0}
/* Il riquadro dei giorni che non bastano ancora. Stesso tono dei riquadri
   "non disponibile": non e' un guasto, e' una raccolta appena cominciata. */
.storico-pochi{
  font-size:12.5px;line-height:1.45;color:var(--t2);
  background:var(--tela);border-radius:10px;padding:10px
}
/* La tela del grafico e i bersagli da toccare stanno uno sopra l'altro: il
   disegno non prende clic (e' aria-hidden), i bottoni sopra si'. */
.spazio-corpo{position:relative;height:132px;margin-top:10px;border-bottom:1px solid var(--linea)}
.spazio-tela{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Una serie sola: nessuna legenda da leggere, il titolo dice cos'e'.
   vector-effect tiene il tratto a 2 px anche se lo svg e' stirato in
   orizzontale (preserveAspectRatio="none"), altrimenti la linea si
   ingrasserebbe insieme alla scatola. */
.spazio-linea{
  fill:none;stroke:var(--br2);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke
}
.spazio-area{fill:var(--br-s);stroke:none}
.spazio-punti{position:absolute;inset:0;display:flex}
/* Ogni giorno e' un bottone alto quanto tutto il grafico: stretto in
   orizzontale, ma il bersaglio utile e' la colonna intera, ben oltre i 44 px
   in altezza. Un pallino di 8 px non si colpisce con un dito. */
.punto-spazio{
  flex:1 1 0;min-width:0;position:relative;height:100%;padding:0;
  background:none;touch-action:manipulation
}
.punto-spazio i{
  display:block;position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;
  margin-bottom:-4.5px;border-radius:50%;background:var(--br2);
  /* Invisibili finche' non si sceglie o non si passa sopra: trenta pallini
     accesi coprirebbero la linea che dovrebbero raccontare. */
  opacity:0;transition:opacity .12s ease
}
.punto-spazio:hover i{opacity:.55}
/* Il punto scelto non si distingue per il solo colore: prende l'anello
   bianco, che si vede anche in scala di grigi. */
.punto-spazio.scelto i{
  opacity:1;background:var(--br);box-shadow:0 0 0 3px var(--carta),0 0 0 5px var(--br-s)
}
.punto-spazio:focus-visible{outline:2px solid var(--br2);outline-offset:-2px;border-radius:6px}
.punto-spazio:focus-visible i{opacity:1}

/* ---- "cosa consente di sapere di una persona" */
/* Sta sopra l'interruttore e non e' un avviso decorativo: e' l'elenco, voce
   per voce, di cio' che si accende. Righe staccate e leggibili, non una
   tabella a scorrimento: chi accende deve poterlo leggere sul telefono. */
.consenso-di-sapere{border-top:1px solid var(--linea);padding-top:12px}
.riga-consenso{
  display:flex;flex-direction:column;gap:2px;padding:8px 0;
  border-top:1px solid var(--linea)
}
.riga-consenso:first-of-type{border-top:0}
.voce-consenso{font-size:13.5px;font-weight:700;color:var(--txt)}
.cosa-consenso{font-size:12.5px;line-height:1.4}
/* Le date di presenza stanno DENTRO la riga dell'operatore, staccate dal
   resto da un filo: in un elenco per conto loro sarebbero un foglio presenze,
   che e' esattamente cio' che questa schermata non deve diventare. */
.riga-presenza{
  display:block;margin-top:4px;padding-top:4px;border-top:1px dashed var(--linea);
  line-height:1.45
}

/* --------------------------------------------------------------- C17
   DOCUMENTI, RACCOLTA, SCANSIONE, ZIP.
   Progetto: docs/SPEC-DOCUMENTI-ZIP.md. Stessa regola del C16: le classi
   stanno nel foglio PRIMA che il JS le usi.

   ATTENZIONE A `hidden`. Il foglio non ha una regola globale [hidden], e una
   classe con `display:flex` batte l'attributo hidden del browser: il pannello
   "nascosto" resterebbe a schermo. Ogni classe nuova che il JS nasconde con
   `hidden` ha quindi la sua riga [hidden] qui sotto. */
.raccolta[hidden],.raccolta [hidden],
.scanner[hidden],.scanner [hidden],
.fotocamera__pila[hidden],
.campo[hidden]{display:none!important}

/* ---- il ventaglio con cinque voci
   La quinta ("Nuova cartella", la meno frequente) sta a 286 px dal centro del
   FAB: 58 mm dal perno del pollice sul 320 e 64 mm sul 430 (FAB riabbassato,
   vedi C16), dentro la spazzata funzionale di 55-70 mm. Il conto per esteso e'
   in docs/SPEC-DOCUMENTI-ZIP.md §2. Con il pannello aperto il passo e' 52. */
.ventaglio-voce:nth-child(5){--sposta:286px}
body.con-pannello .ventaglio-voce:nth-child(5){--sposta:270px}
/* Chiusura a ritroso con una voce in piu': parte sempre la piu' lontana. */
.ventaglio-voce:nth-child(1){transition-delay:56ms}
.ventaglio-voce:nth-child(2){transition-delay:42ms}
.ventaglio-voce:nth-child(3){transition-delay:28ms}
.ventaglio-voce:nth-child(4){transition-delay:14ms}
.ventaglio-voce:nth-child(5){transition-delay:0ms}
body.ventaglio-aperto .ventaglio-voce:nth-child(5),.ventaglio.aperto .ventaglio-voce:nth-child(5){transition-delay:104ms}

/* ---- la raccolta: i file che aspettano di partire insieme
   Un foglio dal basso sul telefono, un pannello al centro da computer. Sta
   SOTTO la fotocamera (95), perche' "Scatta altre" la nasconde e la
   fotocamera le si apre sopra, e SOTTO le finestre (90), perche' la conferma
   "Butto via i file?" le deve stare sopra. */
:root{--z-raccolta:88}
.raccolta{
  position:fixed;inset:0;z-index:var(--z-raccolta);
  background:rgba(14,22,32,.55);
  display:flex;align-items:flex-end;justify-content:center
}
@media (min-width:700px){.raccolta{align-items:center;padding:24px}}
.raccolta__foglio{
  width:100%;max-width:760px;max-height:94dvh;
  display:flex;flex-direction:column;
  background:var(--carta);border-radius:20px 20px 0 0;
  box-shadow:0 -10px 40px rgba(14,22,32,.3);
  padding-bottom:env(safe-area-inset-bottom,0px)
}
@media (min-width:700px){.raccolta__foglio{border-radius:20px;max-height:88dvh}}
.raccolta__testa{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 8px}
.raccolta__titoli{flex:1;min-width:0}
.raccolta__titolo{font-size:18px;margin:0}
.raccolta__dove{margin:2px 0 0;font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raccolta__chiudi{
  width:var(--tocco);height:var(--tocco);flex:none;border:0;border-radius:999px;
  display:grid;place-items:center;background:var(--tela);color:var(--t2)
}
.raccolta__corpo{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 16px 12px}
.raccolta__riepilogo{margin:0 0 8px;font-size:13.5px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums}
.raccolta__avviso{margin:0 0 8px;font-size:13px;line-height:1.4;color:var(--ambra);background:var(--ambra-s);border-radius:10px;padding:8px 10px}
/* Miniature da 96 px: tre per riga sul 320, cinque o sei da computer. Sono il
   modo di riconoscere a colpo d'occhio la foto venuta mossa. */
.raccolta__griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.raccolta__voce{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--tela);border:1px solid var(--linea)}
.raccolta__voce.con-problema{border-color:var(--rosso);box-shadow:inset 0 0 0 1px var(--rosso)}
.raccolta__img{width:100%;height:100%;object-fit:cover;display:block}
.raccolta__segno{
  width:100%;height:100%;padding:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-align:center;color:var(--t2)
}
.raccolta__segno b{font-size:14px;color:var(--br)}
.raccolta__nome{
  font-size:11px;line-height:1.25;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.raccolta__problema{
  position:absolute;left:0;right:0;bottom:0;padding:3px 6px;
  background:rgba(210,59,63,.92);color:#fff;font-size:11px;font-weight:700;text-align:center
}
/* La x e' piccola a vedersi e grande da toccare: il bersaglio e' 44 px, il
   disco scuro dentro ne misura 26. */
.raccolta__togli{
  position:absolute;top:0;right:0;width:var(--tocco);height:var(--tocco);
  display:grid;place-items:center;background:none;border:0;padding:0;color:#fff
}
.raccolta__togli svg{width:26px;height:26px;padding:5px;border-radius:999px;background:rgba(14,22,32,.66)}
.raccolta__sezione{margin-top:16px}
.raccolta__etichetta{display:block;font-size:13px;font-weight:700;color:var(--txt);margin-bottom:6px}
.raccolta__nota{margin:-2px 0 8px;font-size:12.5px;line-height:1.4;color:var(--t2)}
.raccolta__scelte{display:flex;flex-wrap:wrap;gap:8px}
.raccolta__scelta{
  min-height:var(--tocco);padding:0 14px;border-radius:999px;
  border:1.5px solid var(--linea2);background:var(--carta);
  font-family:inherit;font-weight:600;font-size:14px;color:var(--txt)
}
.raccolta__scelta.attiva{border-color:var(--br);background:var(--br-s);color:var(--br)}
.raccolta__piede{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--linea)}
.raccolta__piede .btn{flex:1 1 auto}
/* "Carica" a tutta larghezza sul telefono: e' il bottone per cui si e' qui. */
.raccolta__piede .raccolta__carica{flex:1 1 100%}
@media (min-width:560px){.raccolta__piede .raccolta__carica{flex:1 1 auto}}

/* ---- la fotocamera che tiene gli scatti */
.fotocamera__pila{
  position:relative;flex:none;width:52px;height:52px;padding:0;
  display:grid;place-items:center;
  border:2px solid #fff;border-radius:12px;background:rgba(255,255,255,.16);color:#fff
}
.fotocamera__pila img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.fotocamera__pila-video{font-size:18px}
.fotocamera__conta{
  position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--br2);color:#fff;font-size:12px;font-weight:800;box-shadow:0 0 0 2px #07090C
}
/* Il lampo dello scatto: un velo bianco che sparisce in 160 ms. Senza moto
   ridotto e' l'unico segno che si vede con il braccio teso al sole. */
.fotocamera--lampo::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:#fff;opacity:0;animation:lampo-scatto .16s ease-out
}
@keyframes lampo-scatto{from{opacity:.7}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.fotocamera--lampo::after,.scanner--lampo .scanner__palco{animation:none}}

/* ---- la scansione */
.scanner{position:fixed;inset:0;z-index:var(--z-foglio);background:#07090C;color:#fff;display:flex;flex-direction:column}
.scanner__testa{display:flex;align-items:center;gap:10px;min-height:var(--tocco);padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px 16px}
.scanner__titolo{font-weight:700;font-size:16px}
.scanner__contatore{flex:1;font-size:13px;color:#C9CFDA;font-variant-numeric:tabular-nums}
.scanner__chiudi{
  width:var(--tocco);height:var(--tocco);border:0;border-radius:999px;
  display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff
}
.scanner__palco{
  position:relative;flex:1;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  /* Il trascinamento degli angoli non deve far scorrere ne' zoomare la pagina. */
  touch-action:none
}
.scanner__video{width:100%;height:100%;object-fit:contain;display:block}
.scanner__tela{max-width:100%;max-height:100%;display:block}
.scanner__cornice{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scanner__cornice polygon{fill:rgba(47,129,247,.16);stroke:#4F9CFF;stroke-width:2.5;stroke-linejoin:round}
/* Angoli incrociati: rosso, e "Avanti" spento. Il colore non e' l'unico
   segnale — il messaggio sotto lo dice a parole. */
.scanner__cornice.non-valida polygon{fill:rgba(210,59,63,.18);stroke:#FF6B6E}
/* La maniglia: 48 px da toccare, un pallino da 24 da vedere. Il centro della
   maniglia E' l'angolo del foglio, per questo il margine negativo. */
.scanner__maniglia{
  position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;padding:0;
  border:0;border-radius:999px;background:transparent;touch-action:none;cursor:grab
}
.scanner__maniglia::after{
  content:"";position:absolute;inset:12px;border-radius:999px;
  background:#fff;border:3px solid #4F9CFF;box-shadow:0 1px 6px rgba(0,0,0,.6)
}
.scanner__maniglia.presa{cursor:grabbing}
.scanner__maniglia.presa::after{inset:6px;background:rgba(255,255,255,.85)}
.scanner__maniglia:focus-visible::after{outline:3px solid #fff;outline-offset:3px}
.scanner__messaggio{margin:0;padding:8px 16px;min-height:2.9em;font-size:13.5px;line-height:1.4;text-align:center;color:#E3E7EE}
.scanner__comandi{padding:8px 12px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.55)}
.scanner__gruppo{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.scanner__comandi .btn{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.scanner__comandi .btn-primario{background:var(--br2);color:#fff}
.scanner__comandi .btn:disabled{opacity:.45}
.scanner__scatta{
  flex:none;width:68px;height:68px;margin:0 10px;padding:0;
  border:4px solid #fff;border-radius:999px;background:rgba(255,255,255,.22)
}
.scanner__scatta:active{background:#fff}
.scanner__modi{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.12)}
.scanner__modo{min-height:40px;padding:0 12px;border:0;border-radius:999px;background:none;color:#fff;font-family:inherit;font-weight:600;font-size:13.5px}
.scanner__modo.attivo{background:#fff;color:#07090C}
.scanner--occupato .scanner__palco{cursor:progress}
.scanner--lampo .scanner__palco{animation:lampo-scanner .16s ease-out}
@keyframes lampo-scanner{from{background:#fff}to{background:transparent}}
/* Il riepilogo e' carta chiara: si leggono nomi e si scelgono bottoni, e i
   campi del foglio sono disegnati per il fondo chiaro. */
.scanner__riepilogo{flex:1;min-height:0;overflow:auto;padding:12px 16px 16px;background:var(--tela);color:var(--txt)}
.scanner__pagine{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.scanner__pagina{position:relative;margin:0;overflow:hidden;background:var(--carta);border:1px solid var(--linea);border-radius:12px}
.scanner__pagina img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#fff}
.scanner__numero{
  position:absolute;top:6px;left:6px;min-width:24px;height:24px;padding:0 6px;
  display:grid;place-items:center;border-radius:999px;background:var(--br);color:#fff;font-size:12px;font-weight:700
}
.scanner__azioni-pagina{display:flex;gap:4px;padding:4px}
.scanner__piccolo{
  flex:1;min-height:var(--tocco);border:1px solid var(--linea2);border-radius:8px;
  background:var(--carta);color:var(--txt);font-family:inherit;font-size:13px;font-weight:600
}
.scanner__modulo{display:flex;flex-direction:column;gap:6px;margin-top:16px;max-width:640px}
.scanner__etichetta{margin-top:8px;font-size:13px;font-weight:700}
.scanner__scelte{display:flex;flex-wrap:wrap;gap:8px}
.scanner__scelta{
  min-height:var(--tocco);padding:0 14px;border-radius:999px;
  border:1.5px solid var(--linea2);background:var(--carta);
  font-family:inherit;font-weight:600;font-size:14px;color:var(--txt)
}
.scanner__scelta.attiva{border-color:var(--br);background:var(--br-s);color:var(--br)}

/* ---- i documenti nella griglia e nell'elenco */
.senza-mini.documento{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--br);background:var(--br-s)}
.senza-mini.documento .sigla{font-size:11px;font-weight:800;letter-spacing:.06em}
.riga-file .senza-mini.documento svg{width:22px;height:22px}
.riga-file .senza-mini.documento .sigla{font-size:9px}
.cella-file .segno-documento{
  position:absolute;left:6px;top:6px;z-index:2;padding:2px 8px;border-radius:999px;
  background:rgba(18,58,107,.9);color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em
}

/* ---- il documento nell'anteprima a schermo intero */
.anteprima-piena .cornice-documento{
  width:100%;height:100%;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px
}
.anteprima-piena .documento-pdf{flex:1;width:min(100%,1000px);min-height:0;border:0;border-radius:8px;background:#fff}
.anteprima-piena .tela .documento-pagina{max-height:calc(100% - 64px);background:#fff;border-radius:6px}
.anteprima-piena .documento-segnaposto{
  width:160px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;background:rgba(255,255,255,.1);color:#fff
}

/* ---- il tipo di documento nel pannello dei dati del file */
.scelte-categoria{display:flex;flex-wrap:wrap;gap:8px}
.chip-categoria{
  min-height:var(--tocco);padding:0 14px;border-radius:999px;
  border:1.5px solid var(--linea2);background:var(--carta);
  font-family:inherit;font-weight:600;font-size:14px;color:var(--txt)
}
.chip-categoria.attiva{border-color:var(--br);background:var(--br-s);color:var(--br)}
/* Selezione multipla, campo non toccato: tratteggio, come .scelta.invariata. */
.chip-categoria.invariata{border-style:dashed;color:var(--t3)}

/* Il segnaposto sopra lo scheletro, come l'immagine (vedi .cella-file img
   piu' in alto): lo scheletro e' posizionato, il segnaposto no, e fra i due
   vinceva lo scheletro. Un PDF senza miniatura (nessun poppler sul server)
   restava un riquadro grigio vuoto invece dell'icona del documento, e lo
   stesso capitava a "Senza anteprima" delle foto che sharp non legge. */
.cella-file .senza-mini{position:relative;z-index:1}

/* "Chiudi" della fotocamera fuori dalla barra dei comandi (fotocamera.js):
   non eredita piu' `.fotocamera__comandi .btn`, quindi il suo aspetto sta qui.
   Con degli scatti in pila dice "Rivedi (N)" e prende il colore pieno: non
   chiude e basta, porta a caricarli. */
.fotocamera > .fotocamera__chiudi{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.fotocamera > .fotocamera__chiudi:hover{background:rgba(255,255,255,.26)}
.fotocamera > .fotocamera__chiudi.con-scatti{background:var(--br2);font-weight:700}

/* ---- C18: la voce "Documenti" di ogni cartella (docs/SPEC-DOCUMENTI-ZIP.md §8)
   Il piede della scheda puo' avere due bottoni: "Sottocartelle" (se ce ne
   sono) e "Documenti" (sempre). Stanno uno sotto l'altro, ciascuno alto 44 px:
   affiancati su una scheda da 150 px le parole non ci starebbero. Il primo dei
   due prende il margine automatico che spinge il piede in fondo (C13), il
   secondo si appoggia sotto. */
.scheda-cartella-sotto + .scheda-cartella-sotto{margin-top:0}
.scheda-cartella-sotto .conta-documenti{
  min-width:22px;height:20px;padding:0 7px;border-radius:999px;
  display:inline-grid;place-items:center;background:var(--br-s);color:var(--br);font-weight:700
}
.anteprima-piena .documento-segnaposto b{font-size:15px;letter-spacing:.05em}
.titolo .ico{vertical-align:-3px;color:var(--br)}

/* ---- C19: tipologie ed etichette (i chip)
   Un chip e' una pillola con il colore scelto nella pagina delle tipologie.
   Otto colori, ognuno con fondo tenue e testo scuro abbastanza da leggersi al
   sole (contrasto >= 4.5:1 sul proprio fondo). */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.chip{
  display:inline-flex;align-items:center;max-width:100%;min-height:26px;padding:2px 10px;
  border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--chip-f);color:var(--chip-t);border:1.5px solid transparent
}
.chip.piccolo{min-height:20px;padding:1px 8px;font-size:11.5px}
.chip-blu{--chip-f:#E3EDFB;--chip-t:#1B4F91;--chip-p:#2F6FC4}
.chip-verde{--chip-f:#E3F5EE;--chip-t:#0E6A4C;--chip-p:#12805C}
.chip-ambra{--chip-f:#FFF1D6;--chip-t:#8A5507;--chip-p:#D18B12}
.chip-rosso{--chip-f:#FDE8E8;--chip-t:#A42A2E;--chip-p:#D23B3F}
.chip-viola{--chip-f:#EFE8FB;--chip-t:#5B34A0;--chip-p:#7A4FD0}
.chip-azzurro{--chip-f:#DFF3F8;--chip-t:#0D6177;--chip-p:#1592B3}
.chip-rosa{--chip-f:#FCE7F1;--chip-t:#9C2461;--chip-p:#D2468C}
.chip-grigio{--chip-f:#EDEFF4;--chip-t:#414B60;--chip-p:#8A93A8}

/* I chip da toccare (finestre di scelta, filtri): bersaglio pieno da 36 px,
   spento = solo contorno, acceso = pieno con la spunta, parziale (su alcuni
   dei file scelti) = tratteggiato. */
.chip.chip-scelta{
  min-height:36px;padding:4px 14px;font-size:13.5px;cursor:pointer;
  background:var(--carta);color:var(--chip-t);border-color:var(--chip-f)
}
.chip.chip-scelta:hover{border-color:var(--chip-p)}
.chip.chip-scelta.acceso{background:var(--chip-p);color:#fff;border-color:var(--chip-p)}
.chip.chip-scelta.acceso::before{content:"\2713";margin-right:6px}
.chip.chip-scelta.parziale{background:var(--chip-f);border-style:dashed;border-color:var(--chip-p)}
.chip.chip-scelta.parziale::before{content:"\2013";margin-right:6px}

.gruppo-etichette{margin-top:14px}
.gruppo-etichette:first-child{margin-top:0}
.gruppo-etichette__testa{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.gruppo-filtro .gruppo-etichette{margin-top:10px}

/* Sulla scheda della cartella e sotto il titolo della cartella aperta. */
.chips-cartella{display:block;margin-top:4px;min-width:0}
.chips-cartella .chips{flex-wrap:nowrap;overflow:hidden}
.chips-cartella[hidden]{display:none}

/* In griglia: un pallino per chip, in basso a destra sopra la miniatura. */
.chips-cella{
  position:absolute;right:6px;bottom:6px;z-index:2;gap:3px;flex-wrap:nowrap;
  padding:3px 4px;border-radius:999px;background:rgba(255,255,255,.9)
}
.chip.puntino{
  min-height:0;width:10px;height:10px;padding:0;border:0;font-size:0;
  background:var(--chip-p)
}
/* Sopra la durata dei video e sopra la fascetta ambra, mai sotto. */
.durata ~ .chips-cella,.chips-cella:has(~ .fascetta){bottom:30px}

/* La pagina delle tipologie: un foglio a colonne che scorre in orizzontale. */
.tabella-tipologie{
  display:flex;gap:12px;align-items:flex-start;overflow-x:auto;
  padding:2px 2px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch
}
.colonna-tipologia{
  flex:0 0 230px;scroll-snap-align:start;background:var(--carta);
  border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden
}
.colonna-tipologia__testa{
  display:grid;grid-template-columns:1fr auto;gap:0 6px;width:100%;text-align:left;
  padding:12px 10px 10px 14px;background:var(--br-s);border-bottom:1px solid var(--linea);min-height:var(--tocco)
}
.colonna-tipologia__testa:hover{background:#DCE7F5}
.colonna-tipologia__nome{font-weight:800;color:var(--br);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colonna-tipologia__punti{grid-row:span 2;align-self:center;color:var(--t2)}
.colonna-tipologia__dettagli{font-size:12px;color:var(--t2)}
.colonna-tipologia__celle{display:flex;flex-direction:column}
.cella-valore{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;
  padding:9px 14px;min-height:var(--tocco);border-bottom:1px solid var(--linea)
}
.cella-valore:hover{background:var(--tela)}
.cella-valore__uso{font-size:11.5px;color:var(--t3)}
.colonna-tipologia__aggiungi{display:flex;gap:4px;align-items:center;padding:8px 6px 8px 10px}
.colonna-tipologia__aggiungi .input{min-height:38px;padding:6px 10px;font-size:14px}
.colonna-tipologia.colonna-nuova{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:140px;border:2px dashed var(--linea2);background:transparent;box-shadow:none;
  color:var(--br2);font-weight:700
}
.colonna-tipologia.colonna-nuova:hover{background:var(--br-s)}

.tavolozza{display:flex;flex-wrap:wrap;gap:10px}
.campione{
  width:40px;height:40px;border-radius:50%;background:var(--chip-p);
  border:3px solid var(--carta);box-shadow:0 0 0 1.5px var(--linea2)
}
.campione.scelto{box-shadow:0 0 0 3px var(--txt)}

/* Un messaggio di solo testo non ha niente da toccare: lascia passare il dito.
   Si posa in fondo allo schermo, cioe' proprio sopra "Salva" e "Applica"
   delle finestre dal basso, e per tre secondi si mangiava quel tocco. Quelli
   con un bottone ("Annulla") restano toccabili. */
.messaggio:not(:has(button)){pointer-events:none}

/* ---- C20: lo scheletro non gira per sempre
   Su alcuni browser l'evento "load" di una miniatura arriva tardi o non
   arriva: l'immagine restava trasparente (.in-arrivo) e sotto lo scheletro
   scorreva all'infinito, cioe' "le anteprime si ricaricano in loop".
   1. l'immagine compare comunque dopo 3 secondi, anche senza evento;
   2. il riflesso dello scheletro fa al massimo 6 giri, poi resta fermo. */
.cella-file img.in-arrivo,.riga-file .mini.in-arrivo{animation:mostra-comunque 0s linear 3s forwards}
@keyframes mostra-comunque{to{opacity:1}}
.cella-file .scheletro,.anteprima-caricamento{animation-iteration-count:6}

/* ---- C21: la scheda pratica (docs/SPEC-DOCUMENTI-ZIP.md §11)
   Dentro la cartella: sul telefono il pannello sta fra il titolo e le foto,
   chiuso, con targa, assicurato e stato sempre in vista; da 1100 px in su sta
   in una colonna a destra che resta ferma mentre si scorrono le foto. */
.cartella-con-scheda{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"testa" "scheda" "corpo";gap:12px}
.cartella-con-scheda .area-testa{grid-area:testa}
.cartella-con-scheda .area-corpo{grid-area:corpo;min-width:0}
.pannello-pratica{
  grid-area:scheda;background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sh);min-width:0
}
.pannello-pratica__testa{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;
  min-height:var(--tocco);padding:10px 14px;text-align:left
}
.pannello-pratica__titolo{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--br);white-space:nowrap}
.pannello-pratica__riassunto{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;font-size:13px}
.pannello-pratica__freccia{display:inline-flex;color:var(--t2);transition:transform .15s ease}
.pannello-pratica.aperta .pannello-pratica__freccia{transform:rotate(90deg)}
.pannello-pratica__corpo{display:none;padding:4px 14px 14px;border-top:1px solid var(--linea)}
.pannello-pratica.aperta .pannello-pratica__corpo{display:block}
.pannello-pratica__nota{margin:10px 0 0}
.pannello-pratica__nota a{color:var(--br2);font-weight:700;text-decoration:underline}
.pannello-pratica__piede{
  display:none;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;
  padding:10px 14px;border-top:1px solid var(--linea);background:var(--carta);border-radius:0 0 var(--r) var(--r)
}
.pannello-pratica.aperta .pannello-pratica__piede{display:flex}
.pannello-pratica__stato{margin-right:auto}
.pannello-pratica__piede [hidden]{display:none}
.pannello-pratica.modificata .pannello-pratica__stato{color:var(--ambra);font-weight:700}
/* Modifiche in sospeso: il piede resta attaccato al fondo dello schermo,
   cosi' "Salva" non si perde sotto venti campi. */
.pannello-pratica.modificata .pannello-pratica__piede{
  position:sticky;bottom:calc(var(--fondo-sicuro) - 8px);z-index:5;box-shadow:0 -6px 16px -10px rgba(14,22,32,.35)
}
@media (max-width:559px){
  .pannello-pratica.modificata .pannello-pratica__piede{bottom:calc(var(--alt-voci) + env(safe-area-inset-bottom,0px) + 6px)}
}

@media (min-width:960px){
  .contenuto:has(> .cartella-con-scheda){max-width:1680px}
  .cartella-con-scheda{
    grid-template-columns:minmax(0,1fr) minmax(440px,50%);
    grid-template-rows:auto 1fr;grid-template-areas:"testa scheda" "corpo scheda";align-items:start;gap:16px
  }
  .pannello-pratica{
    position:sticky;top:calc(var(--alt-barra) + 12px);grid-row:1 / span 2;
    max-height:calc(100dvh - var(--alt-barra) - 84px);display:flex;flex-direction:column
  }
  .pannello-pratica__testa{cursor:default;grid-template-columns:auto minmax(0,1fr)}
  .pannello-pratica__freccia{display:none}
  .pannello-pratica__corpo,.pannello-pratica.aperta .pannello-pratica__corpo{display:block;overflow:auto;flex:1 1 auto;min-height:0}
  .pannello-pratica__piede{display:flex}
  .pannello-pratica.modificata .pannello-pratica__piede{position:static;box-shadow:none}
}

/* Il modulo (pannello e finestra "Nuova cartella"). */
.gruppo-pratica{padding-top:14px}
.gruppo-pratica + .gruppo-pratica{margin-top:4px;border-top:1px dashed var(--linea)}
.titolo-gruppo-pratica{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.campi-pratica .input,.campi-pratica .select,.campi-pratica .textarea{width:100%}
.etichetta-campo{display:block;font-size:12.5px;font-weight:700;color:var(--t2);margin-bottom:6px}
.campo-con-azione{display:flex;gap:6px;align-items:center}
.campo-con-azione .input{flex:1 1 auto;min-width:0}
.azione-contatto{flex:none;display:inline-grid;place-items:center;width:var(--tocco);height:var(--tocco);font-size:20px;text-decoration:none;color:var(--br2)}
body.pratica-in-modifica .fab{display:none}
.azione-contatto[hidden]{display:none}
.input.maiuscolo{text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.scelte-pratica{display:flex;flex-wrap:wrap;gap:6px}
.scelta-pratica{
  min-height:38px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--linea2);
  background:var(--carta);font-size:13.5px;font-weight:600;color:var(--t2)
}
.scelta-pratica:hover{border-color:var(--br2)}
.scelta-pratica.accesa{background:var(--br);border-color:var(--br);color:#fff}
.scelta-pratica.accesa::before{content:"\2713";margin-right:6px}
/* In sola lettura: etichetta piccola sopra, valore sotto. */
.campo-letto{margin-bottom:10px;min-width:0}
.campo-letto .etichetta-campo{margin-bottom:2px;font-size:11.5px;color:var(--t3)}
.valore-campo{display:block;font-weight:600;overflow-wrap:anywhere}
a.valore-campo{color:var(--br2);text-decoration:underline}
.valore-campo.a-capo{white-space:pre-line;font-weight:500}
.solo-lettori{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* La proposta dentro "Nuova cartella". */
.proposta-pratica{margin-top:6px;padding:12px 14px;border:1px solid var(--linea);border-radius:var(--r-piccolo);background:var(--tela)}
.proposta-pratica__testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.proposta-pratica .input,.proposta-pratica .select,.proposta-pratica .textarea{background:var(--carta)}

/* Sulla scheda della cartella in dashboard: targa e assicurato. */
.pratica-cartella{display:block;font-size:12.5px;font-weight:700;color:var(--br);letter-spacing:.02em}

/* ---- C22: la scheda pratica bassa e larga
   I campi stanno in righe flessibili che si riempiono sempre fino in fondo,
   nell'ordine del foglio: corto = da 118 px, medio = da 190 px (sul telefono ne stanno due per riga) e cresce il
   doppio, largo = riga intera. A qualunque larghezza (pannello, telefono,
   finestra "Nuova cartella") ce ne stanno quanti ne entrano, e la scheda
   resta bassa. Quando la scheda e' larga almeno 760 px anche i gruppi si
   affiancano a due a due (container query sul contenitore dei gruppi). */
.scheda-pratica{container-type:inline-size;container-name:scheda}
.campi-pratica{display:flex;flex-wrap:wrap;gap:0 10px;align-items:flex-end}
.campi-pratica > *{min-width:0;margin-bottom:8px}
.campi-pratica .taglia-corto{flex:1 1 118px}
.campi-pratica .taglia-medio{flex:2 1 190px}
.campi-pratica .taglia-largo{flex:1 1 100%}
.campi-pratica .taglia-meta{flex:1 1 260px}
.campi-pratica .campo-letto.taglia-corto{flex-basis:120px}
.campi-pratica .campo-letto.taglia-medio{flex-basis:180px}
@container scheda (min-width:760px){
  .gruppi-pratica{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:start}
  .gruppi-pratica .gruppo-pratica + .gruppo-pratica{margin-top:0}
  .gruppi-pratica .gruppo-pratica:nth-child(2){border-top:0}
}

/* Campi piu' bassi dentro la scheda: 40 px bastano, e sono ventidue. */
.scheda-pratica .input,.scheda-pratica .select{min-height:40px;padding-top:7px;padding-bottom:7px;font-size:14.5px}
.scheda-pratica .textarea{min-height:56px;padding-top:8px;padding-bottom:8px;font-size:14.5px}
.scheda-pratica .campo label,.scheda-pratica .etichetta-campo{margin-bottom:3px;font-size:12px}
.scheda-pratica .campo{margin-bottom:8px}
.gruppo-pratica{padding-top:10px}
.titolo-gruppo-pratica{margin-bottom:6px}
.scheda-pratica .scelta-pratica{min-height:34px;padding:4px 12px;font-size:13px}
.scheda-pratica .azione-contatto{width:40px;height:40px}
.scheda-pratica input[type="date"],.scheda-pratica input[type="datetime-local"]{padding-left:10px;padding-right:8px}

/* ---- C23: fotocamera, i bottoni nascosti restano nascosti
   `.btn` (display:inline-flex) vinceva sull'attributo `hidden`: dopo un
   permesso negato "Scatta foto" e "Registra video" restavano a schermo e non
   facevano niente. "Riprova" e' il bottone che richiede il permesso. */
.fotocamera [hidden],.scanner [hidden]{display:none!important}
.fotocamera__riprova{font-weight:700}
.fotocamera__messaggio{max-width:min(92vw,520px)}

/* ---- C24: la fase in cima al ventaglio "Nuovo elemento"
   Una pastiglia piu' larga delle altre, con le quattro scelte: vale per le
   foto e i video che si stanno per fare o caricare. Va a capo se non ci sta
   (320 px). La scelta accesa e' piena, con la spunta: non basta il colore. */
.ventaglio-voce.ventaglio-fase{
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  min-height:0;padding:8px 10px 10px;border-radius:20px;cursor:default;
  white-space:normal;overflow:visible;
  width:min(340px,calc(100vw - 32px));max-width:calc(100vw - 32px)
}
.ventaglio-fase__titolo{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding-left:4px}
.ventaglio-fase__scelte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ventaglio-fase__scelta{
  flex:1 1 auto;min-height:38px;padding:4px 12px;border-radius:999px;
  border:1.5px solid var(--linea2);background:var(--carta);color:var(--t2);
  font-size:13.5px;font-weight:700;white-space:nowrap
}
.ventaglio-fase__scelta:hover{border-color:var(--br2)}
.ventaglio-fase__scelta.accesa{background:var(--br);border-color:var(--br);color:#fff}
.ventaglio-fase__scelta.accesa::before{content:"\2713";margin-right:5px}
.ventaglio-fase__scelta:focus-visible{outline:3px solid var(--br2);outline-offset:2px}
body.ventaglio-aperto .ventaglio-voce.ventaglio-fase:active,
.ventaglio.mostra .ventaglio-voce.ventaglio-fase:active{transform:translateY(0) scale(1)}

/* ---- C25: la dashboard raggruppata per stato della pratica
   Un titolo per stato, nell'ordine degli stati, con il numero accanto; le
   cartelle senza stato in fondo. Ogni gruppo e' la solita griglia. */
.gruppi-cartelle{display:flex;flex-direction:column;gap:22px}
.gruppo-cartelle__titolo{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--t2)
}
.gruppo-cartelle__conta{
  min-width:24px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;
  background:var(--br-s);color:var(--br);font-size:12px;letter-spacing:0
}