/* Rapportini stech - il foglio di stile dell'app.
   Gira in Safari su iPhone, in cantina, con una mano sola e l'altra su un cacciavite.

   Il linguaggio e' quello di iOS 26: materiale traslucido al posto delle barre piene,
   angoli concentrici (il raggio esterno e' quello interno piu' il suo margine), controlli
   di sistema. La tinta non e' il blu: da iOS 26 il sistema non impone piu' un accento
   fisso, e l'accento di questa app e' il grafite della carta intestata stech.

   Le regole che sembrano dettagli e non lo sono:
   - ogni campo ha font-size 16px: sotto, Safari zooma da solo al focus e il form scappa
   - le distanze dai bordi passano da env(safe-area-inset-*): notch e barra home
   - i bersagli toccabili non scendono sotto i 44px
   - il feedback del tocco e' su :active, non su :hover: un dito non passa sopra le cose */

:root {
  color-scheme: light dark;

  /* Fondo e superfici: il fondo raggruppato di iOS, non bianco. Le superfici ci stanno
     sopra come schede, ed e' quello che fa leggere un form lungo come un elenco di cose
     separate invece che come un muro. */
  --fondo: #f2f2f7;
  --superficie: #ffffff;
  --superficie-tenue: rgba(120, 120, 128, 0.12);
  --separatore: rgba(60, 60, 67, 0.18);
  /* Il pillow del selettore a segmenti: sempre piu' chiaro del binario su cui scorre. */
  --segmento-scelto: #ffffff;

  --testo: #1c1c1e;
  --testo-tenue: #6c6c70;
  /* Sotto i 4.5:1 un'etichetta di campo non si legge in cantina con lo schermo di taglio:
     il tenue e' per le note, mai per un valore. */

  /* L'accento e' il grafite della carta intestata, non un blu di sistema. */
  --accento: #1a1a1a;
  --accento-velo: rgba(26, 26, 26, 0.08);
  --azione-fondo: #1a1a1a;
  --azione-testo: #ffffff;

  /* Il colore che significa qualcosa, e nient'altro. */
  --attesa: #9a5b00;
  --ok: #1a7f37;
  --errore: #b3261e;

  /* Il materiale. Non e' una decorazione: e' il livello che galleggia sopra il contenuto
     mentre il contenuto gli scorre sotto. */
  --vetro: rgba(242, 242, 247, 0.72);
  --vetro-bordo: rgba(255, 255, 255, 0.5);
  --vetro-ombra: 0 -1px 24px rgba(0, 0, 0, 0.06);

  /* Angoli concentrici: ogni livello annidato scende di un gradino. */
  --raggio-scheda: 22px;
  --raggio-gruppo: 16px;
  --raggio-campo: 12px;
  --raggio-piccolo: 9px;

  --tempo: 180ms;
  --curva: cubic-bezier(0.32, 0.72, 0, 1);

  /* Un livello solo: la barra delle schede, che e' l'unica cosa che galleggia. */
  --z-tabbar: 20;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000;
    --superficie: #1c1c1e;
    --superficie-tenue: rgba(120, 120, 128, 0.24);
    --separatore: rgba(84, 84, 88, 0.65);
    --segmento-scelto: #636366;

    --testo: #f2f2f7;
    --testo-tenue: #98989f;

    /* In scuro il grafite sparirebbe nel fondo: l'accento si inverte, come fa il sistema. */
    --accento: #f2f2f7;
    --accento-velo: rgba(242, 242, 247, 0.12);
    --azione-fondo: #f2f2f7;
    --azione-testo: #1c1c1e;

    --attesa: #ffb340;
    --ok: #30d158;
    --errore: #ff6961;

    --vetro: rgba(28, 28, 30, 0.72);
    --vetro-bordo: rgba(255, 255, 255, 0.12);
    --vetro-ombra: 0 -1px 24px rgba(0, 0, 0, 0.5);
  }

  /* Il velo di una pastiglia di stato, in scuro, sparisce nel fondo della scheda: la
     stessa tinta va tenuta piu' densa perche' la pastiglia resti una pastiglia. */
  .corpo .stato.da-fare { background: rgba(255, 179, 64, 0.18); }
  .corpo .stato.fatto { background: rgba(48, 209, 88, 0.16); }
  .titolo-sezione .quanti.urgente { color: #1c1c1e; }
}

* { box-sizing: border-box; }

/* Il taglio vale anche sulla radice: il traboccamento della testata risale fin qui,
   e senza questo la pagina scorre di lato lo stesso. */
html { overflow-x: clip; }

body {
  /* In fondo ci sta la barra delle schede, che galleggia: il contenuto le scorre sotto
     ma deve poter finire sopra, altrimenti l'ultimo pulsante resta sotto il vetro. */
  padding: 0 max(16px, env(safe-area-inset-right))
           calc(76px + max(16px, env(safe-area-inset-bottom)))
           max(16px, env(safe-area-inset-left));
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-optical-sizing: auto;
  max-width: 640px;
  margin-inline: auto;
  /* La fila dei filtri esce dai margini del corpo di proposito, per arrivare ai bordi
     dello schermo. Si taglia con `clip` e non con `hidden`: hidden su body viene propagato
     al viewport, quindi non taglia niente. `clip` taglia e basta. */
  overflow-x: clip;
  background: var(--fondo);
  color: var(--testo);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* --- La testata ----------------------------------------------------------------------
   Titolo grande come nelle app di sistema, sul fondo della pagina e senza materiale sotto.

   Non e' appiccicata in alto: scorre via col contenuto, come fa il titolo grande delle app
   di sistema quando si comincia a scorrere. Prima restava ferma sopra un velo di vetro, e
   il velo serviva solo a rendere leggibile cio' che le passava sotto: tolto quello, tenerla
   ferma vorrebbe dire scrittura su scrittura. Il titolo si rilegge tornando in cima, che e'
   il gesto che si fa comunque per ricominciare.

   Resta il vetro dov'e' un livello che galleggia davvero, cioe' sulla barra delle schede. */
header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  /* Il minimo e' 18 e non 10: nella PWA a tutto schermo comanda il taglio del notch e non
     cambia niente, ma nel browser l'inset e' zero e il titolo nasceva appoggiato in cima. */
  padding: max(18px, env(safe-area-inset-top)) 0 10px;
}

h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.12;
  /* Il tracking segue la dimensione: stretto sui titoli grandi, neutro sul testo. */
  letter-spacing: -0.022em;
  margin: 0;
}

#stato-coda { font-size: 13px; font-weight: 600; color: var(--attesa); }

/* Sotto il titolo grande, dentro lo stesso h1: dice a che punto siamo, e non e' una
   metrica da contemplare ma cio' che si va a fare. Sta dentro al titolo e non in un
   paragrafo suo perche' l'header e' una riga flessibile: un secondo figlio finirebbe di
   fianco al titolo invece che sotto. */
h1 .sotto-titolo {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--testo-tenue);
}

/* --- La barra delle schede -----------------------------------------------------------
   Tre pagine, sempre raggiungibili col pollice senza tornare indietro. Galleggia sul
   contenuto invece di mangiargli una striscia: e' cio' che distingue il vetro da una
   barra piena. */
.schede {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: var(--z-tabbar);
  display: flex;
  gap: 4px;
  max-width: 612px;
  margin: 0 auto;
  padding: 6px;
  border-radius: var(--raggio-scheda);
  background: var(--vetro);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--vetro-bordo);
  box-shadow: var(--vetro-ombra);
}

.scheda {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  padding: 6px 4px;
  border-radius: var(--raggio-gruppo);
  color: var(--testo-tenue);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.004em;
  transition: color var(--tempo) var(--curva), background var(--tempo) var(--curva);
}

.scheda svg { width: 23px; height: 23px; }
.scheda:active { background: var(--accento-velo); }

/* La scheda attiva non e' solo colorata: e' posata su una pastiglia, cosi' si trova con
   la coda dell'occhio senza leggere le etichette. */
.scheda[aria-current="page"] {
  color: var(--accento);
  background: var(--accento-velo);
}
.scheda[aria-current="page"] svg { stroke-width: 2.1; }

/* --- Gruppi di campi -----------------------------------------------------------------
   Il pattern delle impostazioni di iOS: campi dentro un blocco con gli angoli tondi,
   separati da una riga sottile. Un form lungo diventa leggibile perche' si legge a
   gruppi, non a campi. */
.gruppo {
  background: var(--superficie);
  border-radius: var(--raggio-gruppo);
  /* Sopra e sotto la stessa aria dei lati. Prima sopra ce n'erano 2, e funzionava per caso:
     i gruppi che cominciano con un'etichetta se la portavano dietro col suo margine di 14.
     Un gruppo che comincia con altro - la testata richiudibile del form, il testo di una
     segnalazione - partiva appoggiato al bordo. Adesso l'aria la mette il gruppo, sempre, e
     il primo figlio non ne aggiunge altra. */
  padding: 14px;
  margin: 0 0 18px;
}
.gruppo > *:first-child { margin-top: 0; }
/* Un campo in fondo porta gia' il suo respiro (`padding: 0 0 12px` qui sopra): li' il
   gruppo non lo raddoppia, ed e' il motivo per cui le schede di un campo solo non
   avevano il difetto. Il padding serve dove la scheda chiude con un pulsante, una nota
   o una fila di pastiglie, che un margine in fondo non ce l'hanno. */
.gruppo:has(> input:last-child),
.gruppo:has(> select:last-child),
.gruppo:has(> textarea:last-child) { padding-bottom: 2px; }

/* Il dettaglio richiudibile e' un gruppo anche lui: stessi campi, stessi separatori.
   Due vocabolari di campo nella stessa schermata si notano subito, e uno dei due e'
   sempre quello sbagliato. */
.gruppo > label,
details > label,
.gruppo > .riga-etichetta > label {
  color: var(--testo-tenue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.002em;
}

/* Dentro un gruppo i campi non hanno una cornice propria: la cornice e' il gruppo, e
   due bordi annidati sono il modo piu' rapido per far sembrare un'app un modulo fiscale. */
.gruppo input[type="text"],
.gruppo input[type="date"],
.gruppo input[type="time"],
.gruppo select,
.gruppo textarea,
details input[type="text"],
details select {
  /* `background: transparent` porterebbe via anche la freccia della tendina, che e'
     un'immagine di sfondo: qui si tocca solo il colore. */
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 12px;
  min-height: 0;
}

.gruppo > * + label,
details > * + label,
.gruppo > * + .riga-etichetta { border-top: 1px solid var(--separatore); padding-top: 12px; }
/* L'interruttore e' gia' una riga intera: sopra ci va il separatore, non un'etichetta. */
details > .interruttore { border-top: 1px solid var(--separatore); }

label { display: block; margin: 14px 0 4px; font-size: 13px; font-weight: 600; }

input, select, textarea, button {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  /* 16px non e' estetica: sotto, Safari zooma la pagina al focus. */
  font: inherit;
  font-size: 17px;
  border: 1px solid var(--separatore);
  border-radius: var(--raggio-campo);
  background: var(--superficie);
  color: inherit;
  accent-color: var(--accento);
}

textarea { line-height: 1.4; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--testo-tenue); }

/* La tastiera che sale non deve coprire il campo su cui si sta scrivendo. */
input, select, textarea { scroll-margin: 120px; }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  /* La freccia e' quella di sistema, disegnata a mano perche' `appearance: none` la porta
     via: senza, un select sembra un campo di testo che non si puo' scrivere. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 12px top 52%, right 6px top 52%;
  background-repeat: no-repeat;
}
.gruppo select, details select { padding-right: 22px; background-position: right 8px top 44%, right 2px top 44%; }

/* --- Il selettore a segmenti ---------------------------------------------------------
   Due scelte che si escludono: una tendina le nasconderebbe dietro un tocco in piu' per
   niente. Qui si vedono tutte e due e se ne tocca una. */
.segmenti {
  display: flex;
  gap: 2px;
  margin: 6px 0 12px;
  padding: 2px;
  border-radius: var(--raggio-campo);
  background: var(--superficie-tenue);
  /* Ancora i radio nascosti qui dentro: senza, un elemento in posizione assoluta si
     dimensiona sul viewport e diventa largo quanto lo schermo. E' cio' che portava la
     pagina a scorrere di lato. */
  position: relative;
}

/* Nascosti alla vista ma non alla tastiera e al lettore di schermo: un display:none li
   toglierebbe dal gruppo di scelta. Un pixel per uno, dentro al contenitore. */
.segmenti input {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.segmenti label {
  flex: 1;
  margin: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raggio-piccolo);
  font-size: 15px;
  font-weight: 600;
  color: var(--testo);
  transition: background var(--tempo) var(--curva), box-shadow var(--tempo) var(--curva);
}

.segmenti input:checked + label {
  background: var(--segmento-scelto);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.segmenti input:focus-visible + label { outline: 2px solid var(--accento); outline-offset: 1px; }

/* --- L'interruttore ------------------------------------------------------------------
   Quello di sistema: si legge acceso o spento da lontano, senza dover trovare il segno
   di spunta dentro un quadratino da 13px. */
.interruttore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  font-size: 17px;
  font-weight: 400;
}

.interruttore input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 51px;
  width: 51px;
  height: 31px;
  min-height: 31px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--superficie-tenue);
  transition: background var(--tempo) var(--curva);
}

.interruttore input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  transition: transform var(--tempo) var(--curva);
}

.interruttore input:checked { background: var(--accento); }
.interruttore input:checked::after { transform: translateX(20px); }
.interruttore input:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* --- Le corsie del ripescaggio -------------------------------------------------------
   Una fila di pastiglie che scorre in orizzontale: su un telefono in verticale ci stanno
   tre voci per volta, e scorrere col pollice costa meno che leggere un elenco lungo. */
.riga { display: flex; gap: 8px; align-items: center; }
.riga > span { flex: 1; }

.riga-etichetta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 4px;
}
.riga-etichetta label { margin: 0; }
.riga-etichetta button {
  width: auto;
  min-height: 34px;
  margin: 0;
  padding: 6px 14px;
  font-size: 15px;
  border-radius: 999px;
}

.materiale { margin-bottom: 8px; }
.materiale .quantita { flex: 0 0 72px; }
.materiale .matricola { flex: 0 0 112px; }
.gruppo .materiale input,
details .materiale input {
  /* Tre campi sulla stessa riga: qui la cornice serve a dire dove finisce l'uno e comincia
     l'altro, ed e' l'unica eccezione al campo senza bordo dentro un gruppo. */
  border: 1px solid var(--separatore);
  border-radius: var(--raggio-piccolo);
  padding: 10px 11px;
}

.facoltativo { font-weight: 400; color: var(--testo-tenue); }

/* Stacco anche sotto: quello che segue una corsia - le righe dei materiali, il campo
   "Oppure scrivila" - non deve nascere attaccato all'ultima pastiglia. Fra due corsie
   i due margini collassano e la distanza resta quella di prima. */
.corsia { margin: 14px 0; }
.titolo-corsia {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--testo-tenue);
  margin-bottom: 7px;
}
/* Tre righe che vanno a capo, non una fila che scorre di lato. Con trenta voci in
   catalogo la fila orizzontale ne mostrava tre per volta e costringeva a trascinare per
   cercare: a capo se ne leggono nove in un colpo d'occhio. Oltre le tre righe si scorre
   in verticale, che e' il gesto che si sta gia' facendo sulla pagina. */
.pastiglie {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  /* Tre righe da 32px piu' i due spazi in mezzo. */
  max-height: calc(3 * 32px + 2 * 6px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  margin: 0;
  scrollbar-width: none;
}
.pastiglie::-webkit-scrollbar { display: none; }

/* Il campo di ricerca di una corsia ha la sua vaschetta, come nelle app di sistema:
   spogliato come gli altri campi del gruppo sembrava una riga di testo grigio e nessuno
   lo toccava. Vale per ruolo e non per id: agganciata a `#cerca-lavorazione`, questa
   regola lasciava nascere fuori stile ogni corsia successiva - successo il 2026-09-08
   con la ricerca dei ricambi, che e' uscita con la cornice piena degli altri campi. */
.corsia input[type="search"] {
  min-height: 40px;
  margin-bottom: 8px;
  padding: 9px 12px;
  font-size: 16px;
  background: var(--superficie-tenue);
  border: none;
  border-radius: var(--raggio-piccolo);
}
.pastiglie .nota { align-self: center; margin: 0; white-space: nowrap; }

.pastiglia {
  width: auto;
  flex: 0 0 auto;
  /* Piu' piccola della misura di tocco piena: qui il pollice sceglie fra molte voci
     vicine, e una pastiglia grande come un pulsante ne fa stare tre per riga. Resta
     sopra i 32px, che e' il minimo perche' si prenda senza sbagliare. */
  max-width: min(76vw, 260px);
  min-height: 32px;
  margin: 0;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--superficie-tenue);
  color: var(--testo);
  border: none;
  border-radius: 999px;
}

/* Una lavorazione scelta: il testo prende quello che c'e', la durata e il pulsante per
   toglierla restano a misura fissa. */
.scelta {
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--superficie-tenue);
  border-radius: var(--raggio-campo);
}
.testo-scelta {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scelta .durata {
  flex: 0 0 98px;
  min-height: 36px;
  padding: 6px 24px 6px 10px;
  font-size: 15px;
  border: none;
  background-color: var(--superficie);
  border-radius: var(--raggio-piccolo);
}
.scelta .togli {
  flex: 0 0 36px;
  width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--testo-tenue);
  border: none;
}
.scelta .togli svg { width: 18px; height: 18px; }

#nuova-lavorazione { flex: 1; min-width: 0; }
.gruppo #nuova-lavorazione { border: 1px solid var(--separatore); border-radius: var(--raggio-piccolo); padding: 10px 11px; }

/* --- Il foglio della firma ------------------------------------------------------------
   Non e' una schermata dell'app: e' un foglio che si porge a qualcun altro. Quindi bianco
   sempre, anche col telefono in tema scuro, e a tutto schermo, perche' su un rettangolo da
   150px una firma esce come uno scarabocchio compresso. */
.foglio {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  background: #ffffff;
  color: #1a1a1a;
}
.foglio::backdrop { background: rgba(0, 0, 0, 0.55); }

.foglio-carta {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100dvh;
  transform: translate(-50%, -50%);
  background: #ffffff;
}

/* Col telefono in verticale il foglio si presenta girato di un quarto: si firma tenendo
   il telefono di lato, senza dipendere dal blocco rotazione, che sul telefono di chi
   lavora e' quasi sempre attivo. Le coordinate del dito le raddrizza il JS. */
@media (orientation: portrait) {
  .foglio-carta {
    width: 100dvh;
    height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

#firma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  /* Senza questo il dito scorre la pagina invece di lasciare il segno. */
  touch-action: none;
}

/* La riga d'appoggio e' qui sotto, nella pagina, e non disegnata sulla tela: serve
   all'occhio mentre si firma e non deve comparire sul documento consegnato. */
.riga-appoggio {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 30%;
  border-bottom: 1.5px solid #d1d1d6;
}
.firma-chi {
  position: absolute;
  left: 7%;
  bottom: calc(30% - 26px);
  font-size: 13px;
  font-weight: 600;
  color: #8e8e93;
}

.foglio-azioni {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  /* Il contenitore non prende il dito: col foglio girato diventa grande quanto tutto lo
     schermo per ruotare insieme al resto, e si mette sopra la tela. Senza questa riga il
     dito passa sul vetro e non lascia il segno - il canvas non riceve mai niente. */
  pointer-events: none;
}
.foglio-azioni button { pointer-events: auto; }
/* I colori qui sono scritti, non presi dai token: il foglio e' bianco anche col telefono
   in tema scuro, e un accento che li' si inverte finirebbe bianco su bianco. E' successo
   con Cancella, che ereditava la regola dei pulsanti secondari. */
.foglio-azioni button,
.foglio-azioni #pulisci-firma {
  width: auto;
  min-width: 116px;
  margin: 0;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.14);
  color: #1a1a1a;
  font-weight: 600;
}
.foglio-azioni #conferma-firma { background: #1a1a1a; color: #ffffff; }
.foglio-azioni svg { color: inherit; }

/* In verticale le azioni seguono il foglio girato: restano dove le trova la mano che
   tiene il telefono di lato. */
@media (orientation: portrait) {
  .foglio-azioni {
    right: auto;
    bottom: auto;
    left: 50%;
    top: 50%;
    width: 100dvh;
    transform: translate(-50%, -50%) rotate(90deg);
    padding: 0 16px;
    align-items: flex-end;
    height: 100vw;
    padding-bottom: 16px;
  }
}

#blocco-firma, #blocco-firma-tecnico { margin-top: 18px; }

/* La firma gia' presa: si vede che c'e', e si rifa' col pulsante sotto. */
/* `display` su un id batte l'`hidden` dello user agent: senza questa riga l'anteprima
   resta a vista anche dopo che la firma e' stata azzerata, e il form mostra una firma
   che nel rapporto non c'e'. */
#anteprima-firma[hidden] { display: none; }
#anteprima-firma {
  display: block;
  max-height: 90px;
  margin: 4px 0 12px;
  padding: 10px;
  background: #ffffff;
  border-radius: var(--raggio-piccolo);
}

/* --- Il dettaglio richiudibile -------------------------------------------------------
   Su un intervento IT questi campi restano quasi sempre vuoti: tenerli aperti allunga il
   form senza dare niente. */
details {
  background: var(--superficie);
  border-radius: var(--raggio-gruppo);
  margin-bottom: 18px;
  padding: 0 14px;
}
details[open] { padding-bottom: 14px; }
summary {
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--testo);
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--testo-tenue);
  border-bottom: 2px solid var(--testo-tenue);
  transform: rotate(-45deg);
  transition: transform var(--tempo) var(--curva);
}
details[open] summary::after { transform: rotate(45deg); }

/* --- I pulsanti ---------------------------------------------------------------------- */
button {
  margin-top: 10px;
  background: var(--azione-fondo);
  color: var(--azione-testo);
  border: none;
  border-radius: var(--raggio-campo);
  font-weight: 600;
  /* Il tocco si sente subito, alla pressione: aspettare il rilascio sembra rotto. */
  transition: transform 100ms var(--curva), opacity 100ms var(--curva);
}
button:active { transform: scale(0.97); }
button[disabled] { opacity: 0.45; }

/* I secondari sono di vetro tenue: presenti, ma non in gara con l'azione principale.
   Una classe sul pulsante, non un elenco di id: il giorno che se ne aggiunge uno nuovo
   basta scriverci `azione-secondaria`, non tornare qui a infilarcelo. E' mancata su
   Migliora dei Rilievi finche' quel pulsante e' uscito bianco invece che grigio. */
.azione-secondaria {
  background: var(--superficie-tenue);
  color: var(--accento);
  border: none;
  font-weight: 600;
}

/* L'azione principale della schermata: piena, larga, in fondo, dove arriva il pollice. */
.azione-principale {
  margin-top: 22px;
  min-height: 52px;
  font-size: 17px;
  border-radius: var(--raggio-gruppo);
}

.con-icona { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.con-icona svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Un pulsante di sola icona resta quadrato e sopra i 44px: l'etichetta la porta
   `aria-label`, il bersaglio no. Si accompagna quasi sempre a `.azione-secondaria`, ma
   e' la sua stessa classe perche' la forma quadrata non dipende dal colore. */
button > .solo-icona { width: 20px; height: 20px; }
.azione-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  /* Dentro una riga flessibile il pulsante veniva compresso a 40px, sotto la misura di
     tocco che iOS da' per standard: qui si dichiara che non cede spazio al campo accanto. */
  flex: 0 0 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  border-radius: 999px;
}

/* Un pulsante di sola icona che adesso annulla invece di migliorare: pieno invece che
   contornato, perche' su un'icona sola non c'e' spazio per scriverlo. */
.azione-icona.annulla-pronto {
  background: var(--accento-velo);
  border-color: var(--accento);
}

/* La superficie di una voce d'elenco: sfondo staccato dal fondo della pagina, gli stessi
   angoli morbidi di un gruppo, il respiro minimo perche' la voce sotto non tocchi quella
   sopra. La usano l'archivio dei rapporti e le scadenze: contenuto diverso, stessa cosa.

   Due colonne: 46px di identita' a sinistra, il resto di contenuto. Nella colonna stretta
   sta cio' che distingue la voce dalle altre - il giorno su un rapporto, lo stato e il
   numero su una segnalazione, i giorni di ritardo su una scadenza - e l'occhio scende lungo
   quella colonna invece di rileggere ogni riga. Serve a braccio teso, con lo schermo di
   taglio e una mano sola. */
.voce-elenco {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0 13px;
  background: var(--superficie);
  border-radius: var(--raggio-gruppo);
  /* Sopra ci vuole piu' aria che ai lati: la prima riga e' il numero, che e' il testo piu'
     piccolo della scheda, e a 13px sembrava appoggiato sul bordo. */
  padding: 16px 15px 15px;
  margin-bottom: 9px;
  /* Il contenitore del velo qui sotto: senza, si stenderebbe sulla pagina intera. */
  position: relative;
  transition: transform 100ms var(--curva);
}

/* --- La voce si tocca tutta -------------------------------------------------------------
   Il collegamento principale di una voce e' il suo titolo, `.passa`, ma il bersaglio e' la
   scheda intera: il marcatore, lo stato, lo spazio vuoto, l'angolo. Il link non avvolge la
   scheda - un lettore di schermo leggerebbe tutto il contenuto come nome del link, e dentro
   un link non ci possono stare pulsanti - si allarga invece con un velo trasparente steso
   su tutta la voce. Il titolo resta un titolo: niente blu, niente sottolineato.

   Il velo sta sopra tutto quello che c'e' nella voce, pulsanti compresi: e' la trappola
   gia' pagata nel foglio della firma, dove un contenitore rubava il dito all'elemento sotto.
   Per questo ogni controllo dentro una voce sale sopra il velo, e la regola e' scritta sul
   ruolo - link, pulsanti, campi - e non sulle classi delle pagine: un'azione aggiunta
   domani nasce gia' toccabile, senza tornare qui. */
.voce-elenco .passa { color: inherit; text-decoration: none; }
.voce-elenco .passa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raggio-gruppo);
  transition: background 100ms var(--curva);
}
.voce-elenco :is(a:not(.passa), button, input, select, textarea, summary) {
  position: relative;
  z-index: 1;
}
/* Il riscontro del tocco e' su tutta la voce, come su una cella di sistema: la scheda si
   vela e cede appena. Il solo nome che cambiava colore diceva che si era toccato il nome.
   Il velo e' una tinta sopra la superficie e non un fondo nuovo: al buio l'`accento-velo`
   come fondo spariva sul nero, sopra il grigio della scheda si vede. */
.voce-elenco:has(.passa:active) { transform: scale(0.985); }
.voce-elenco .passa:active::after { background: var(--accento-velo); }
/* Il fuoco da tastiera va intorno alla voce intera, non al nome: e' la voce che si apre. */
.voce-elenco .passa:focus-visible { outline: none; }
.voce-elenco .passa:focus-visible::after {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

/* --- Il marcatore ----------------------------------------------------------------------
   Il separatore fra le due colonne e' una riga da un pixel e non una fascia colorata: una
   banda spessa a sinistra e' l'ornamento che ha addosso ogni cruscotto, e non aggiunge
   niente che il marcatore non dica gia'. */
.marcatore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-right: 12px;
  border-right: 1px solid var(--separatore);
  /* Alto quanto la voce: e' la riga verticale che allinea l'occhio da una voce all'altra. */
  align-self: stretch;
}
.marcatore .g {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.marcatore .m {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
/* Un ritardo lo dice il colore, ed e' l'unico posto in cui il colore sale a 20px: un
   numero grande in ambra si vede prima di tutto il resto della pagina. */
.marcatore.in-ritardo .g,
.marcatore.in-ritardo .m { color: var(--attesa); }

/* Su una segnalazione il giorno non e' la cosa che conta: al suo posto il punto dello
   stato, pieno se e' aperta e vuoto se e' chiusa, e sotto le ultime quattro cifre del
   numero, che sono quelle che si citano al telefono. */
.marcatore .punto {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accento);
}
.marcatore.chiusa .punto { background: none; border: 2px solid var(--separatore); }
/* L'ambra la prende solo la segnalazione ferma da giorni: se sono ambra tutte, il colore
   non dice piu' quale guardare. */
.marcatore.ferma .punto { background: var(--attesa); }
.marcatore .num {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

/* --- Il corpo della voce ----------------------------------------------------------------
   Il numero sopra il nome, piccolo, con la pastiglia dello stato sempre nello stesso posto:
   si scorre l'elenco leggendo una colonna sola. La pastiglia non va mai a capo e il numero
   si tronca, altrimenti un nome lungo spinge fuori lo stato. */
.corpo { min-width: 0; }
.corpo .riga-numero {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  line-height: 1.2;
}
.corpo .numero {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}
.corpo .stato {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0 0 0 auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--superficie-tenue);
  color: var(--testo-tenue);
}
.corpo .stato.da-fare { background: rgba(154, 91, 0, 0.14); color: var(--attesa); }
.corpo .stato.fatto { background: rgba(26, 127, 55, 0.12); color: var(--ok); }
.corpo .nota { margin-top: 2px; }


/* --- L'archivio ----------------------------------------------------------------------
   Una scheda per rapporto invece di una tabella: su un telefono in verticale una riga con
   sei colonne diventa illeggibile, e per riconoscere un rapporto bastano tre cose - il
   numero, il giorno e il cliente. */
.rapporti { list-style: none; margin: 4px 0 0; padding: 0; }
/* Il giorno non sta piu' in una riga di intestazione: sta nel marcatore, e qui resta il
   nome del cliente, che e' la cosa per cui si riconosce un rapporto. */
.rapporto strong,
.segnalazione strong {
  display: block;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
/* Le azioni di una voce d'elenco, qualunque voce sia: un rapporto, una segnalazione, un
   cliente, e quelle che verranno. La regola stava scritta due volte, una per tipo, e la
   terza voce - i clienti - e' nata senza: le due azioni restavano su una riga sola e la
   seconda usciva dalla scheda. Successo il 2026-09-09. Se aggiungere un tipo di voce
   richiede di tornare qui, la regola era sul posto sbagliato. */
.voce-elenco .azioni {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--separatore);
  /* Su un telefono stretto tre azioni non stanno su una riga: vanno a capo intere. */
  flex-wrap: wrap;
  gap: 8px 18px;
}
.voce-elenco .azioni .nota { margin: 0; }
/* Un'azione di riga e' testo con un'icona, non un pulsante pieno: sta dentro una scheda
   e accanto ad altre due. Il fondo va spento a mano perche' `button` nasce con quello
   dell'azione principale, e un `button.azione` senza questo si presentava come un
   rettangolo bianco con dentro del testo bianco - illeggibile, e nemmeno riconoscibile
   come pulsante. Successo due volte il 2026-09-09, sulle segnalazioni e sull'archivio:
   per questo la regola sta qui, valida ovunque, e non sulle singole pagine. */
.azione {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Un'azione non si spezza a meta' parola: "Apri il PDF" su due righe si legge come
     due comandi. Se non ci stanno tutte, va a capo la terza intera - vedi `.azioni`. */
  white-space: nowrap;
  /* `button` nasce a larghezza piena come i campi: un'azione di riga che occupa tutta
     la riga manda a capo quella dopo, e due comandi corti finiscono impilati. */
  width: auto;
  min-height: 0;
  background: none;
  border: none;
  /* Grigie, non grafite: sono comandi di servizio dentro una scheda, e in nero pieno
     pesavano quanto il nome del cliente. Il bersaglio e l'icona restano quelli. */
  color: var(--testo-tenue);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 0;
  margin: -11px 0;
}
.azione svg { width: 17px; height: 17px; }
/* Alla pressione tornano scure: e' il segno che il tocco e' arrivato. */
.azione:active { color: var(--accento); }

/* --- La testata del rapporto ----------------------------------------------------------
   Cliente, chi ha segnalato, giorno e tipo: da chiusa e' una riga di riepilogo, aperta
   sono quattro campi. Il triangolino di sistema non serve - la riga si tocca tutta - ma
   una freccia a destra dice che si apre, come nelle impostazioni del telefono. */
.testata > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  min-height: 44px;
}
.testata > summary::-webkit-details-marker { display: none; }
.testata > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--testo-tenue);
  border-bottom: 2px solid var(--testo-tenue);
  transform: rotate(45deg);
  transition: transform var(--tempo) var(--curva);
}
.testata[open] > summary::after { transform: rotate(-135deg); }
.testata .riepilogo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testata .riepilogo-chi {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.testata .riepilogo-quando { margin: 0; }
/* Aperta, i campi cominciano sotto la riga di riepilogo e non le si attaccano. */
.testata[open] > summary { margin-bottom: 4px; }

/* Il testo di una segnalazione, in cima alla sua pagina: e' la cosa per cui si e' li'. */
.testo-segnalazione {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.titolo-elenco {
  margin: 22px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--testo-tenue);
}
#dettaglio .azioni {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--separatore);
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* Il testo di una segnalazione vera e' una frase lunga, non un'etichetta: scritto con le
   parole di chi ha chiamato arriva a cinque righe, e in elenco cinque righe in grassetto
   sono un muro. Qui si taglia a tre; il testo intero sta nella sua pagina, che e' il posto
   dove si va a leggerlo. Visto sui dati veri dello staging il 2026-09-09: coi dati finti,
   tutti corti, il difetto non si vedeva. */
.segnalazione .corpo strong {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Le segnalazioni ------------------------------------------------------------------
   Stessa scheda dell'archivio: nel marcatore il punto dello stato, nel corpo il cliente,
   il testo della segnalazione e chi l'ha aperta. La lista non si chiama `#elenco` come
   quella delle scadenze, che e' una riga sola con il pulsante di fianco: ereditandone il
   flex, tutto il contenuto finiva incolonnato di lato. */
.segnalazione .esito-riga { margin: 0; }

/* --- I filtri ----------------------------------------------------------------------------
   Una fila di pastiglie al posto della tendina: i clienti sono sei, sceglierne uno costa un
   tocco invece di due, e si vede quali ci sono senza aprire niente. Scorre di lato la fila,
   non la pagina: il margine negativo la porta fino ai bordi dello schermo, cosi' la prima e
   l'ultima pastiglia non nascono tagliate a meta'.

   La pastiglia sta a 38px e non a 44: e' una scelta fra molte vicine, come le pastiglie
   delle lavorazioni nel form, e a 44 ne entrerebbero due per schermata. Resta sopra il
   minimo assoluto di 28px delle linee guida, con 7px di spazio in mezzo perche' il pollice
   non sbagli bersaglio. */
.filtri {
  display: flex;
  gap: 7px;
  margin: 0 -16px 14px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filtri::-webkit-scrollbar { display: none; }
.filtri .filtro {
  flex: 0 0 auto;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--testo);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.filtri .filtro[aria-current="true"] { background: var(--azione-fondo); color: var(--azione-testo); }
.filtri .filtro:active { opacity: 0.6; }
/* Stato e cliente sono due domande diverse dentro la stessa fila: una riga verticale le
   separa senza spendere una parola di intestazione. */
.filtri .stacco-filtri {
  flex: 0 0 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--separatore);
}

/* --- Il consumo del monte ore ------------------------------------------------------------
   Stessa grammatica della barra della durata, altro significato: li' e' quanto e' durato
   un intervento, qui quanto del compreso se n'e' andato. Oltre il tetto la barra resta
   piena e a dirlo e' il numero: una barra che sfonda il suo binario e' un disegno, non
   un'informazione in piu'. */
.consumo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
}
.consumo .binario {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--superficie-tenue);
  overflow: hidden;
}
.consumo .binario span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accento);
  opacity: 0.55;
}
.consumo .quanto {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}
/* Il colore dice come sta il cliente, con la stessa grammatica delle pastiglie di stato
   nelle altre pagine: verde finche' c'e' margine, ambra quando le ore stanno per finire o
   sono finite. Non e' decorazione - e' l'unica cosa che si guarda scorrendo l'elenco. */
.consumo.larga .binario span { background: var(--ok); opacity: 1; }
.consumo.larga .quanto { color: var(--ok); }
.consumo.quasi .binario span { background: var(--attesa); opacity: 1; }
.consumo.quasi .quanto { color: var(--attesa); }
.consumo.oltre .binario span { background: var(--attesa); opacity: 1; }
.consumo.oltre .quanto { color: var(--attesa); }

/* La chiusa di una pagina: dice una regola che vale per tutto l'elenco sopra, e non e'
   una voce dell'elenco. */
.piede { margin: 18px 4px 0; }

/* --- Le intestazioni di sezione ----------------------------------------------------------
   Titolo in chiaro e il conteggio dentro una pastiglia: e' il numero che si guarda prima di
   decidere se scorrere la sezione. Piena quando c'e' qualcosa da fare, tenue quando conta
   soltanto. */
.titolo-sezione {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 24px 2px 10px;
  /* Piu' grande del corpo, non solo piu' grassa: a parita' di misura il titolo di una
     sezione si distingue solo se lo si legge, e scorrendo l'elenco non lo si legge. */
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.titolo-sezione .quanti {
  flex: 0 0 auto;
  min-width: 23px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--superficie-tenue);
  color: var(--testo-tenue);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.titolo-sezione .quanti.urgente { background: var(--attesa); color: #ffffff; }
.titolo-sezione .tutti {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--accento);
  text-decoration: none;
}

/* --- L'azione della prima schermata ------------------------------------------------------
   Aprire un rapporto e' il lavoro: e' l'unico elemento grafite pieno della schermata e sta
   in cima, dove il pollice arriva senza scorrere. Lo stile lo distingue dal resto, non la
   dimensione: e' la regola delle linee guida, e due pulsanti di misure diverse fanno
   sembrare sbagliata tutta la pagina. */
.riga-nuovo {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  margin: 2px 0 6px;
  padding: 14px 17px;
  border-radius: var(--raggio-scheda);
  background: var(--azione-fondo);
  color: var(--azione-testo);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  transition: transform 100ms var(--curva);
}
.riga-nuovo:active { transform: scale(0.985); }
.riga-nuovo svg { width: 22px; height: 22px; flex: 0 0 auto; }
/* Il comando non va mai a capo: e' l'unica cosa che questa riga deve dire, e spezzato in
   due sembra un titolo invece di un pulsante. */
.riga-nuovo .comando { white-space: nowrap; }

/* Il cliente dell'ultimo rapporto: si legge se lo si cerca, non compete col comando. Si
   accorcia lui quando il nome e' lungo - "Amministrazione condominiale Pagnoni" spingeva
   "Nuovo rapporto" su due righe - e sotto una certa larghezza sparisce del tutto, perche'
   e' una comodita', non un'informazione che serve. */
.riga-nuovo .chi {
  margin-left: auto;
  padding-left: 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.72;
  text-align: right;
}
@media (max-width: 359px) {
  .riga-nuovo .chi { display: none; }
}

/* Il titolo di una delle due tornate del mese: sta sotto il titolo di sezione e sopra le
   sue voci, quindi e' piu' piccolo di quello e piu' grande di una nota. */
.titolo-mandata {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 2px 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--testo-tenue);
}
.titolo-mandata .quanti {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--superficie-tenue);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* --- La spina di una segnalazione --------------------------------------------------------
   I rapporti nati da una segnalazione stanno appesi a una riga verticale che scende da
   quella: si vede che appartengono a lei e non all'archivio. */
.appesi { list-style: none; margin: 0 0 9px; padding: 0 0 0 30px; position: relative; }
.appesi::before {
  content: "";
  position: absolute;
  left: 15px;
  top: -9px;
  bottom: 18px;
  width: 1px;
  background: var(--separatore);
}
.appesi li { position: relative; margin-bottom: 7px; }
.appesi li::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 21px;
  width: 12px;
  height: 1px;
  background: var(--separatore);
}
.appesi .voce-elenco { grid-template-columns: 38px 1fr; padding: 14px 13px 13px; margin: 0; }
.appesi .marcatore .g { font-size: 17px; }
.appesi .corpo strong { font-size: 16px; }

/* Dice quale rapporto si sta correggendo: il form e' identico a quello di uno nuovo, e
   senza questa riga non si distinguerebbero. */
.fascia {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: 15px;
  background: var(--superficie);
  border-radius: var(--raggio-gruppo);
}
.fascia svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--testo-tenue); }
.fascia a { color: var(--accento); font-weight: 600; }

/* --- Le scadenze ------------------------------------------------------------------------
   Il ritardo e' il marcatore: "+4 g" in ambra a sinistra, prima di tutto il resto. Il
   pulsante sta sotto il titolo e non di fianco, dove prima competeva con lui per la stessa
   riga e a schermo stretto lo strozzava. */
#elenco { list-style: none; margin: 4px 0 0; padding: 0; }
#elenco li strong { font-size: 17px; font-weight: 600; }
#elenco .nota { margin: 2px 0 0; }
#elenco .chiudi {
  grid-column: 2;
  width: auto;
  justify-self: start;
  margin: 11px 0 0;
  padding: 8px 18px;
  min-height: 40px;
  border-radius: 999px;
  background: var(--superficie-tenue);
  color: var(--accento);
  font-size: 15px;
  font-weight: 600;
}
/* La conferma di una scadenza fatta sta sotto il titolo, non nella colonna del marcatore:
   quella colonna porta il ritardo, e un testo verde li' dentro si legge come se il ritardo
   fosse rientrato. */
#elenco li .fatto { grid-column: 2; margin-top: 9px; }

/* Cio' che il marcatore mostra come "9 set" per il lettore di schermo resta la data
   intera: la colonna e' `aria-hidden`, quindi senza questo il giorno sparirebbe. */
.visivamente-nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Un passaggio di servizio in fondo a una pagina: si trova se lo si cerca, e non compete
   con le voci dell'elenco che sta sopra. */
.link-in-fondo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin: 22px 0 4px;
  color: var(--testo-tenue);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.link-in-fondo svg { width: 17px; height: 17px; }
.link-in-fondo:active { color: var(--accento); }

/* --- Note, stati, esito --------------------------------------------------------------- */
.nota { font-size: 13px; color: var(--testo-tenue); margin: 6px 0 0; }
/* Un link dentro una nota resta il blu di sistema del browser se non lo si dice: e' il
   solo punto in cui il blu tornerebbe dentro un'app che non ne ha. */
.nota a { color: var(--accento); font-weight: 600; }
.nota:empty { margin: 0; }
.ok { color: var(--ok); font-weight: 600; }
.attesa { color: var(--attesa); font-weight: 600; }

#esito { margin-top: 16px; }
#esito:not(:empty) {
  background: var(--superficie);
  border-radius: var(--raggio-gruppo);
  padding: 14px 15px;
}
#esito p { margin: 0 0 8px; }
#esito p:last-child { margin-bottom: 0; }
#esito a { color: var(--accento); font-weight: 600; }
#esito button { margin-top: 12px; }

.vuoto {
  margin-top: 40px;
  text-align: center;
  color: var(--testo-tenue);
}
.vuoto svg { width: 34px; height: 34px; opacity: 0.5; }
.vuoto p { margin: 10px 0 0; font-size: 15px; }

/* --- Le preferenze del telefono sono impostazioni vere, non casi di scuola ------------- */

/* Un movimento in meno non e' un feedback in meno: resta il colore, cade la scala. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
  button:active { transform: none; opacity: 0.6; }
  .voce-elenco:has(.passa:active) { transform: none; }
}

/* Il vetro diventa una superficie piena: sotto, il contenuto non deve trasparire. */
@media (prefers-reduced-transparency: reduce) {
  .schede {
    background: var(--fondo);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--separatore);
  }
}

@media (prefers-contrast: more) {
  :root { --separatore: currentColor; --testo-tenue: var(--testo); }
  .schede {
    background: var(--fondo);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .gruppo, .voce-elenco, details { border: 1px solid var(--separatore); }
}

/* --- Il taccuino -----------------------------------------------------------------------
   Gli appunti presi mentre si lavora: una lista semplice dentro il gruppo che gia' esiste,
   non una scheda nuova. Le regole restano scoperte su #blocco-appunti e non su una classe
   condivisa: un'altra persona lavora in coda su questo foglio, e ".durata" ha gia' mostrato
   cosa succede quando due cose diverse si contendono lo stesso selettore. */
#blocco-appunti .appunti {
  list-style: none;
  margin: 0;
  padding: 0;
}
#blocco-appunti .appunti li {
  padding: 8px 0;
  border-bottom: 1px solid var(--separatore);
  font-size: 15px;
  line-height: 1.35;
}
#blocco-appunti .appunti li:last-child { border-bottom: none; }
/* Una lista vuota non deve lasciare un buco: senza appunti presi il blocco si stringe
   com'e' gia' per i Rilievi facoltativi. */
#blocco-appunti .appunti:empty { display: none; }
/* Il campo di scrittura segue subito la lista, non i due pulsanti: sotto ".nota" introduttivo
   non c'e' bordo (come per l'etichetta di "Lavorazioni eseguite"), sopra la textarea si'. */
#blocco-appunti textarea { margin-top: 10px; }

/* --- Il tasto Compila --------------------------------------------------------------------
   Regole nuove, scoperte sulle classi che compila-da-appunti scrive nel DOM: nessuna
   tocca ".durata" ne' le altre regole gia' scritte sopra da chi lavora in coda a questo
   foglio prima di me. */

/* Completa il terzetto ok/attesa/errore (le regole sorelle stanno vicino a ".ok"/".attesa",
   circa a meta' file): mancava solo perche' nessuno aveva ancora avuto bisogno di un
   esito rosso in una nota. */
.errore { color: var(--errore); font-weight: 600; }

/* La frase degli appunti da cui viene un campo compilato: informazione di servizio, va
   letta come tale - piu' piccola del campo, in corsivo per dire "non l'ho scritto io",
   mai a competere col valore sopra. */
.provenienza {
  margin: 4px 0 0;
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
  color: var(--testo-tenue);
}

/* Una lavorazione proposta dal compilatore porta con se' da dove viene la sua durata.
   "assente" (nessuno l'ha detta, il form e' ripiegato su mezz'ora) deve saltare
   all'occhio perche' e' quella da completare; "detta" (il tecnico l'ha detta a voce)
   resta un'informazione tranquilla. La media di catalogo e le righe aggiunte a mano non
   portano segno: sono il caso normale di sempre. Il segno sta su una riga propria sotto
   la fila di sempre (testo, tendina, togli): un quarto elemento affiancato agli altri tre
   non ci sta su un telefono stretto. */
.riga.scelta { flex-wrap: wrap; }
.riga.scelta.scelta-da-completare {
  background: color-mix(in srgb, var(--attesa) 14%, var(--superficie-tenue));
}
.scelta-da-completare .durata { box-shadow: inset 0 0 0 1.5px var(--attesa); }
.durata-da {
  flex: 1 0 100%;
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
}
.durata-da.assente { color: var(--attesa); }
.durata-da.detta { color: var(--testo-tenue); font-weight: 500; }
/* La frase degli appunti da cui viene la durata detta. Stessa veste della provenienza
   dei campi di testo - e' la stessa cosa - ma qui dentro una riga flex, quindi vuole
   una riga tutta sua come il cartellino sopra. */
.riga.scelta .provenienza { flex: 1 0 100%; margin-top: 0; }

/* --- "In corso", la riga che riporta al taccuino ----------------------------------------
   Nasce nascosta (vedi oggi.html) e la mostra lo script solo se IndexedDB ha qualcosa da
   mostrare: una sezione vuota con un titolo e' peggio di nessuna sezione. Si tocca tutta
   come ogni altra voce (vedi "La voce si tocca tutta"): fino al 2026-09-10 era un <a>
   attorno all'intera scheda, con le sue regole di tocco e di fuoco scritte qui, e ora e'
   il titolo col velo, come le altre. Il punto nel marcatore e' lo stesso di una
   segnalazione aperta (".marcatore .punto", sopra): stesso significato, "c'e' ancora
   qualcosa acceso qui". */
/* "N appunti" e' cio' che distingue una riga dall'altra - non "Rapporto non finito", che
   e' uguale su tutte - quindi e' lui a prendere il peso che altrove ha il nome del
   cliente, non l'etichetta sopra. */
#in-corso .corpo strong {
  display: block;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
}