/* DocSereno — il foglio di stile delle quattro schermate (docs/17 §6.1).
 *
 * Formula getenergy coi colori del brand: fondo chiaro, superfici bianche,
 * blu profondo per testo e navbar, verde come unico accento. Navbar flottante
 * a pillola, titoli serif con UNA parola in verde, card con ombre morbide e
 * tanta aria — MA le tabelle restano dense: l'estetica non ruba spazio al
 * lavoro, e la Checklist è una tabella che si legge tutta insieme.
 *
 * Nessuna dipendenza esterna e nessuna CDN: font di sistema, un solo file.
 * Il semaforo (rosso/giallo/verde) è il vocabolario cromatico di fasce,
 * semafori OMI e stati della Checklist — lo stesso del wordmark.
 */

:root {
  --fondo: #f2f6f4;
  --superficie: #ffffff;
  --inchiostro: #16324a;
  --inchiostro-tenue: #5b7183;
  --verde: #2f9e63;
  --verde-scuro: #248050;
  --giallo: #e8b338;
  --rosso: #d94f43;
  --bordo: #dfe7e4;
  --bordo-forte: #c9d6cf;
  --verde-tenue: rgba(47, 158, 99, 0.1);
  --ombra: 0 10px 30px rgba(22, 50, 74, 0.08);
  --ombra-tenue: 0 4px 14px rgba(22, 50, 74, 0.06);
  --raggio: 20px;
  --raggio-piccolo: 10px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* La pillola è sticky: quando un'azione atterra su un'àncora (#parti, la riga
   toccata, la Relazione) il browser porta il bersaglio in cima alla finestra,
   cioè sotto la pillola. Lo scroll-padding lo fa atterrare sotto il suo bordo:
   1rem di stacco + ~3.6rem di pillola + un dito d'aria. Vale per ogni salto
   d'àncora, senza toccare i template (rilievo di Paolo, 14/8/2026). */
html { scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  padding: 0 1rem 4rem;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--verde-scuro); }
a:hover { color: var(--verde); }

/* --- navbar a pillola ---------------------------------------------------- */

nav.pillola {
  position: sticky;
  top: 1rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 1180px;
  margin: 1rem auto 2.5rem;
  padding: 0.7rem 1.6rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  box-shadow: var(--ombra);
}

nav.pillola .marchio {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
  text-decoration: none;
}

/* Il fil di Arianna sta a sinistra, dopo il marchio: si legge nell'ordine in
   cui si è arrivati fin lì. L'uscita è l'unica cosa spinta a destra. */
nav.pillola .voci {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  min-width: 0; /* senza, l'ellissi del nome pratica non scatta mai */
}
nav.pillola .voci a {
  color: var(--inchiostro-tenue);
  text-decoration: none;
  font-size: 0.95rem;
  padding-bottom: 2px;
  white-space: nowrap;
}
nav.pillola .voci a:hover { color: var(--inchiostro); }
nav.pillola .voci a.qui { color: var(--inchiostro); border-bottom: 2px solid var(--verde); }

nav.pillola .freccia { color: var(--bordo-forte, #c9d6cf); font-size: 1.1rem; line-height: 1; }

/* La pratica in cui si è: chip verde tenue, il nome per intero se ci sta e
   troncato se non ci sta — il titolo completo resta nel tooltip. */
nav.pillola .voci a.dentro {
  /* Un nome troncato a due lettere non dice dove sei: sotto le 10 il chip
     smette di restringersi e sono le voci ad andare a capo. */
  flex: 0 1 auto;
  min-width: 10ch;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--inchiostro);
  font-weight: 600;
  background: var(--verde-tenue, rgba(47, 158, 99, 0.1));
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
}
nav.pillola .voci a.dentro:hover { background: rgba(47, 158, 99, 0.18); }

/* Le tre schermate della pratica, staccate dal filo da una linea sottile. */
nav.pillola .sezioni {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  padding-left: 1.1rem;
  border-left: 1px solid var(--bordo);
}

nav.pillola .uscita { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0 auto; }
nav.pillola .chi { font-size: 0.85rem; color: var(--inchiostro-tenue); }

main { max-width: 1180px; margin: 0 auto; }

footer {
  max-width: 1180px;
  margin: 3rem auto 0;
  font-size: 0.82rem;
  color: var(--inchiostro-tenue);
  text-align: center;
}

/* --- titoli e testo ------------------------------------------------------ */

h1.titolo {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
.verde { color: var(--verde); }

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  margin: 2.5rem 0 0.8rem;
}
h3 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; }

.occhiello {
  font-size: 1.05rem;
  color: var(--inchiostro-tenue);
  max-width: 62ch;
  margin: 0 0 2rem;
}
/* La riga che dice di quale pratica si sta parlando (ogni valore con la sua
   etichetta, `docs/19` §2): sta attaccata all'occhiello che la spiega, non a
   due centimetri di distanza come se fosse un altro discorso. */
.occhiello.identifica { margin-bottom: 0.5rem; }
/* I tre numeri che servono a chi lavora — a che punto sono, quanto ho speso,
   quanto costa chiudere il resto: stanno in cima, larghi quanto serve, e in
   inchiostro pieno perché sono un dato e non una spiegazione. */
.occhiello.conto {
  max-width: none;
  margin-bottom: 0.6rem;
  color: var(--inchiostro);
  font-size: 0.95rem;
}
/* La riga che resta sempre a schermo accanto a uno spiegone: sta attaccata al
   suo sommario, non a due centimetri come se fosse un altro discorso. Due
   selettori perché la portante non è sempre l'occhiello di una schermata: in
   fondo alla home è una nota di servizio, e in corpo d'occhiello sopra il
   piede della pagina si leggerebbe come un secondo titolo. */
.occhiello.portante,
.spiega.portante { margin-bottom: 0.35rem; }
.spiega { color: var(--inchiostro-tenue); font-size: 0.9rem; }
/* La misura di lettura, per le pagine che sono fatte di prose e non di tabelle
   — oggi «Chi fa cosa», la dichiarazione dell'art. 50 (`templates/trasparenza.html`).
   Le schermate di lavoro riempiono i 1180 px perché ci stanno righe e colonne;
   una frase larga altrettanto non si rilegge, perché l'occhio tornando a capo
   perde il capo della riga dopo. Stessa ragione del `max-width` dell'occhiello,
   qui un po' più larga perché è testo corrente e non un sommario. */
.lettura { max-width: 74ch; }
/* L'esadecimale ripiegato dietro la sua etichetta: l'impronta serve agli atti,
   non alla lettura quotidiana (rilievo di Paolo, 14/8/2026). Niente marcatore
   nativo, un puntinato che dice «si apre». */
details.ripiega > summary {
  list-style: none;
  cursor: pointer;
  width: fit-content;
  font-size: 0.82rem;
  color: var(--inchiostro-tenue);
  text-decoration: underline dotted;
}
details.ripiega > summary::-webkit-details-marker { display: none; }
details.ripiega[open] > summary { text-decoration: none; }
.minuto { font-size: 0.82rem; color: var(--inchiostro-tenue); }
.impronta { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.78rem; word-break: break-all; }
/* Un comando da ricopiare nel Terminale: monospaziato e in un riquadro, così si
   vede dove comincia e dove finisce — gli spazi e le virgolette di un comando
   fanno parte del comando. Va a capo da solo (`pre-wrap`) invece di allargare
   la pagina: chi lo seleziona lo prende comunque intero. */
code.comando {
  display: block;
  margin: 0.35rem 0 0.7rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  background: #fff;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8rem;
  color: var(--inchiostro);
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- lo spiegone: la spiegazione che si legge una volta -------------------
 *
 * Rilievo di Paolo del 14/8/2026, dal collaudo vivo: nelle tre schermate di una
 * pratica «ci sono scritte troppe cose» — paragrafi che al primo giro insegnano
 * e dal secondo in poi separano i numeri dalle righe. Divulgazione progressiva
 * col `<details>` nativo: nessuno script, nessuno stato da ricordare, nessun
 * cookie — chiuso a ogni caricamento, e chi ha bisogno lo riapre.
 *
 * ⚠️ Quello che ha valore di trasparenza (il listino e l'IVA, il prezzo
 * congelato sull'autorizzazione, la promessa che a schermo c'è quello che
 * finirà nel PDF) NON sta qui dentro: sta nella riga portante, sempre a
 * schermo (`docs/19` §6). Il testo dentro il richiudibile resta comunque nel
 * DOM: Ctrl-F lo trova, e un test che cerca una frase continua a trovarla. */

details.spiegone { margin: 0 0 2rem; }
details.spiegone > summary {
  /* `inline-flex` toglie il marcatore nativo (che è un `list-item`) e tiene la
     freccia allineata alla prima riga del testo; le altre due righe sono per
     Safari e per Firefox, che lo disegnano per conto loro. */
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  list-style: none;
  width: fit-content;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--inchiostro-tenue);
}
details.spiegone > summary::-webkit-details-marker { display: none; }
details.spiegone > summary::before {
  content: "›";
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
details.spiegone[open] > summary::before { transform: rotate(90deg); }
details.spiegone > summary:hover { color: var(--inchiostro); }
details.spiegone > summary:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: var(--raggio-piccolo);
}
/* Il corpo è un inciso: filetto a sinistra e la larghezza di lettura
   dell'occhiello che sostituisce. Il filetto sta sul corpo e non sul
   `<details>` — se stesse lì, aprendo si sposterebbe di lato anche il
   sommario, e l'apertura si leggerebbe come un salto. */
details.spiegone > .dentro {
  max-width: 62ch;
  margin: 0.5rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--bordo);
}
details.spiegone > .dentro p { margin: 0 0 0.7rem; font-size: 0.9rem; color: var(--inchiostro-tenue); }
details.spiegone > .dentro p:last-child { margin-bottom: 0; }
/* Aprendolo il testo entra invece di comparire di scatto: il salto secco è la
   ragione per cui un richiudibile si legge come un errore della pagina. */
details.spiegone[open] > .dentro { animation: spiegone-entra 0.18s ease-out; }
@keyframes spiegone-entra { from { opacity: 0; transform: translateY(-0.25rem); } }
@media (prefers-reduced-motion: reduce) {
  details.spiegone[open] > .dentro { animation: none; }
  details.spiegone > summary::before { transition: none; }
}

/* --- carte --------------------------------------------------------------- */

.carta {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-tenue);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.4rem;
}
.carta.stretta { max-width: 460px; }
.carta h2 { margin-top: 0; }
/* La carta di ciò che è agli atti ma fuori dal lavoro (i documenti esclusi):
   c'è, si legge, e non chiede niente. Fondo della pagina invece che bianco e
   bordo tratteggiato — il bianco resta a ciò su cui si lavora. */
.carta.quieta {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  color: var(--inchiostro-tenue);
}
.carta.quieta h2 { color: var(--inchiostro-tenue); font-size: 1.25rem; }

.griglia { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.riquadro {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  padding: 0.9rem 1.1rem;
  background: #fbfdfc;
}

/* --- avvisi e messaggi --------------------------------------------------- */

.avvisi { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
.avviso {
  padding: 0.75rem 1.1rem;
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  border-left: 4px solid var(--inchiostro-tenue);
  box-shadow: var(--ombra-tenue);
  font-size: 0.94rem;
}
.avviso.success { border-left-color: var(--verde); }
.avviso.warning { border-left-color: var(--giallo); }
.avviso.error { border-left-color: var(--rosso); }
.avviso.info { border-left-color: var(--inchiostro-tenue); }

.nota {
  background: #fdf7e6;
  border-left: 4px solid var(--giallo);
  border-radius: var(--raggio-piccolo);
  padding: 0.8rem 1.1rem;
  margin: 0 0 1.2rem;
  font-size: 0.94rem;
}
.nota.severa { background: #fdeeec; border-left-color: var(--rosso); }
.nota.quieta { background: #eef6f1; border-left-color: var(--verde); }

/* La nota che elenca più ragioni: l'incipit una volta sola, poi le ragioni in
   fila. Serve alle precondizioni dell'attestazione, che possono essere tre —
   fino al 22/8/2026 erano frasi intere ripetute, ognuna col suo «Non posso
   emettere l'attestazione:» e la sua coda, e in un'installazione nuova la
   carta diceva due volte la stessa cosa (docs/19 §1.3). L'elenco dice quante
   sono senza ripetere niente. Le note a paragrafo singolo non cambiano: qui si
   veste solo ciò che sta DENTRO una nota. */
.nota > p { margin: 0; }
.nota .ragioni { margin: 0.5rem 0 0; padding-left: 1.15rem; }
.nota .ragioni li + li { margin-top: 0.35rem; }

/* Il nastro della nota di pratica: in cima a tutte e quattro le schermate di
   una pratica, sopra i messaggi. È più marcato di una `.nota` — bordo pieno e
   ombra — perché non commenta un pezzo di pagina, inquadra tutta la pagina: il
   caso per cui esiste è la pratica di prova, dove ogni nome e ogni immobile
   che si legge sotto è inventato. Una nota scritta solo in banca dati non ha
   mai fermato nessuno. */
.nastro {
  background: #fdf7e6;
  border: 1px solid var(--giallo);
  border-left: 6px solid var(--giallo);
  border-radius: var(--raggio-piccolo);
  box-shadow: var(--ombra-tenue);
  padding: 0.8rem 1.1rem;
  margin: 0 0 1.2rem;
  font-size: 0.94rem;
}
.nastro .etichetta {
  display: block;
  font-family: var(--serif);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
  margin-bottom: 0.25rem;
}

/* --- moduli -------------------------------------------------------------- */

label { display: block; font-size: 0.85rem; color: var(--inchiostro-tenue); margin-bottom: 0.15rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="file"], select, textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  background: #fff;
  font: inherit;
  color: inherit;
}
select { padding-right: 0.4rem; }
.riga-modulo { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.riga-modulo > * { flex: 1 1 220px; }
.riga-modulo > .stretto { flex: 0 0 auto; }
form p { margin: 0 0 0.9rem; }
.helptext { display: block; font-size: 0.8rem; color: var(--inchiostro-tenue); }

/* --- bottoni ------------------------------------------------------------- */

button, .bottone {
  font: inherit;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
}
a.bottone { display: inline-block; text-decoration: none; }
a.bottone.primario { color: #fff; }
a.bottone.secondario { background: #fff; color: var(--inchiostro); border-color: var(--bordo); }
button.primario, .bottone.primario { background: var(--verde); color: #fff; box-shadow: var(--ombra-tenue); }
button.primario:hover { background: var(--verde-scuro); }
button.secondario {
  background: #fff;
  color: var(--inchiostro);
  border-color: var(--bordo);
}
button.secondario:hover { border-color: var(--inchiostro-tenue); }
button.spesa {
  background: #fff;
  color: var(--inchiostro);
  border-color: var(--giallo);
  box-shadow: inset 0 -2px 0 rgba(232, 179, 56, 0.35);
}
button.piatto { background: transparent; border-color: var(--bordo); font-size: 0.85rem; padding: 0.3rem 0.9rem; }
/* Vale anche per gli `a.bottone`: nella colonna dei gesti della Checklist un
   rimando («Caricalo in Documenti») è un bottone come gli altri, e senza questa
   riga sarebbe l'unico grande in mezzo ai minuscoli. */
button.minuscolo, .bottone.minuscolo { font-size: 0.82rem; padding: 0.32rem 0.9rem; }
.azioni { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.azioni form { margin: 0; }

/* --- i passi -------------------------------------------------------------
   Cinque bottoni in fila non dicono quale viene prima, e al primo giorno si
   preme «Valuto la pratica» su una pratica vuota. La numerazione è quella
   nativa di `<ol>`: l'ordine è un dato, non una decorazione. */
.passi { margin: 0 0 1rem; padding-left: 1.4rem; }
.passi > li { margin-bottom: 1rem; }
.passi > li::marker { color: var(--inchiostro-tenue); font-weight: 600; }
.passi form { margin: 0.4rem 0 0; }
.passi .minuto { margin: 0.15rem 0 0; max-width: 62ch; }

/* --- tabelle dense ------------------------------------------------------- */

.tabella { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabella th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--inchiostro-tenue);
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--bordo);
}
.tabella td { padding: 0.5rem 0.6rem; border-bottom: 1px solid #eef3f1; vertical-align: top; }
/* La colonna che porta il nome della verifica non deve andare a capo a ogni
 * parola: «Codice fiscale e partita IVA delle parti» spezzato in sei righe è
 * illeggibile, e la Checklist si legge tutta insieme o non si legge. */
.tabella td.principale { min-width: 17rem; }
.tabella td.soggetto { min-width: 10rem; }
/* Lo stato di una riga non è più una parola sola: da quando dice il
 * presupposto che manca («Non posso ancora: di Rosa Beta mi manca il codice
 * fiscale») deve andare a capo. Con `compatta` (nowrap) restava su una riga
 * sola, la tabella usciva dalla carta e il bottone «Interrogo» finiva oltre il
 * bordo — visto a schermo il 7/8/2026. */
.tabella td.avanzamento { min-width: 12rem; max-width: 16rem; }
.tabella tr:last-child td { border-bottom: none; }
.tabella tbody tr:hover { background: #f7fbf9; }
/* I documenti appena caricati: dopo un lotto da otto file stanno in cima, e il
 * fondo verde tenue dice a colpo d'occhio dove finisce il gruppo nuovo e dove
 * riprende quello di prima. Sta sulle celle e non sulla riga perché il fondo
 * della cella copre quello della riga: così l'evidenziazione non sparisce col
 * passaggio del mouse. */
.tabella tbody tr.appena > td { background: var(--verde-tenue); }
.tabella .compatta { white-space: nowrap; }
.avvolgi { overflow-x: auto; }

/* --- anteprima della prima pagina ---------------------------------------- */
/* Sobria di proposito: una miniatura piccola accanto al nome del file, che si
 * apre grande in una scheda nuova. Serve a rispondere a «è questo il file?»
 * mentre si scorre la tabella, non a leggere il documento — per quello c'è
 * l'ingrandimento. */

.con-anteprima { display: flex; gap: 0.7rem; align-items: flex-start; }
.con-anteprima > div { min-width: 11rem; }
/* La riga di un documento, riequilibrata il 14/8/2026. Prima: quattro colonne,
 * con lo stato in una tutta sua che lasciava un buco bianco accanto
 * all'anteprima mentre di fianco due tendine, un bottone e due spiegazioni si
 * impilavano in una colonna stretta. Adesso l'identità del documento (nome,
 * pagine, stato, targhetta) sta tutta accanto alla miniatura — lo spazio c'era
 * già — e le risposte da dare hanno la larghezza che serve perché le due
 * tendine stiano di fianco invece che una sotto l'altra. */
.tabella td.identita { min-width: 16rem; }
.tabella td.conferma { min-width: 26rem; }
.tabella td.conferma .riga-modulo > * { flex: 1 1 9rem; }
/* I due gesti della riga sulla stessa linea: approvare, e toglierlo. */
.due-gesti { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.due-gesti > form { margin: 0; flex: 0 1 auto; }
.due-gesti > form.riga-modulo { flex: 1 1 22rem; }
.anteprima { flex: 0 0 auto; display: block; width: 76px; text-align: center; text-decoration: none; }
.anteprima img {
  display: block;
  width: 76px;
  height: auto;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
}
.anteprima:hover img { border-color: var(--verde); }
.anteprima .minuto { display: block; margin-top: 0.15rem; }

/* La lettura ottica nella colonna «che cosa non sono riuscito a leggere»: è la
 * via d'uscita della riga, quindi sta sotto la frase che dichiara il buco e
 * staccata da lei — non è un'altra riserva, è il gesto che la chiude. Il
 * bottone è secondario e minuscolo come gli altri della tabella: gratuito,
 * senza il rosso della spesa. */
.lettura-ottica { margin-top: 0.6rem; border-top: 1px solid var(--bordo); padding-top: 0.5rem; }
.lettura-ottica form { margin: 0.35rem 0 0; }

/* --- semaforo ------------------------------------------------------------ */

/* Il pallino di stato: un disco pieno, **sempre accanto alla parola** che dice
 * lo stato, mai al posto suo. Il colore da solo non è un'informazione: chi non
 * distingue il verde dal rosso, chi stampa in bianco e nero e chi legge con uno
 * screen reader deve trovare lo stesso stato scritto in lettere. Per questo nei
 * template il pallino è dichiarato decorativo (`aria-hidden="true"`) — quello
 * che va letto è la parola, il disco la ripete a colpo d'occhio.
 *
 * L'anello serve davvero: il giallo del marchio fa 1,92:1 su bianco, sotto
 * anche la soglia 3:1 degli oggetti grafici (misura in
 * `docs/design/campionario.html`). Un disco giallo pieno su fondo chiaro non si
 * vede abbastanza; col bordo interno il disco resta definito su ogni fondo.
 *
 * Il fondo di partenza è **grigio**, e non è una scelta estetica: uno stato che
 * il Python non ha saputo mappare arriva qui senza modificatore, e deve finire
 * in grigio — mai in verde. Il verde si guadagna (le tre mappe del semaforo
 * stanno in `pratiche/views.py`, una per schermata). */
.pallino {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--bordo-forte);
  box-shadow: inset 0 0 0 1px rgba(22, 50, 74, 0.3);
  vertical-align: middle;
}
.pallino.verde { background: var(--verde); }
.pallino.giallo { background: var(--giallo); }
.pallino.rosso { background: var(--rosso); }
.pallino.neutro { background: var(--bordo-forte); }

.stato { font-size: 0.82rem; }
.verde-testo, .stato.verde { color: var(--verde-scuro); }
.giallo-testo, .stato.giallo { color: #9a7414; }
.rosso-testo, .stato.rosso { color: var(--rosso); }
.stato.neutro { color: var(--inchiostro-tenue); }

.targhetta {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid var(--bordo);
  background: #fff;
  color: var(--inchiostro-tenue);
}
/* «lo faccio io» / «lo fai tu» accanto al titolo di una carta: è la stessa
   distinzione che `docs/19` §1 mette nei verbi, resa visibile a colpo d'occhio.
   Riusa la targhetta invece di inventare un vocabolario di icone nuovo. */
h2 .targhetta {
  font-family: var(--sans);
  vertical-align: middle;
  position: relative;
  top: -0.12em;
  margin-left: 0.6rem;
}

.targhetta.verde { border-color: var(--verde); color: var(--verde-scuro); }
.targhetta.giallo { border-color: var(--giallo); color: #9a7414; }
.targhetta.rosso { border-color: var(--rosso); color: var(--rosso); }

.fascia {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.5rem;
  padding: 0.2rem 1.1rem;
  border-radius: var(--raggio-piccolo);
  border: 2px solid var(--bordo);
}
.fascia.verde { border-color: var(--verde); color: var(--verde-scuro); }
.fascia.giallo { border-color: var(--giallo); color: #9a7414; }
.fascia.rosso { border-color: var(--rosso); color: var(--rosso); }
.fascia.neutro { border-color: var(--inchiostro-tenue); color: var(--inchiostro-tenue); }

.frazione { font-family: var(--serif); font-size: 1.9rem; }

/* --- elenchi ------------------------------------------------------------- */

ul.pulita { list-style: none; padding: 0; margin: 0.4rem 0; }
ul.pulita li { padding: 0.25rem 0; border-bottom: 1px solid #eef3f1; }
ul.pulita li:last-child { border-bottom: none; }
ul.puntata { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--inchiostro-tenue); }

.schede { display: grid; gap: 0.35rem; }
.schede label { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.95rem; color: var(--inchiostro); }
/* Le stesse righe di scelta servono a spuntare N schede (le parti dell'atto) e
   a sceglierne una sola (quale atto leggo, quando in pratica ce n'è più d'uno). */
.schede input[type="checkbox"], .schede input[type="radio"] { width: auto; }

@media (max-width: 640px) {
  nav.pillola { border-radius: var(--raggio); flex-wrap: wrap; gap: 0.8rem; }
  /* Il filo resta leggibile: il nome della pratica prende la riga che gli
     serve e le tre schermate scendono sotto, senza il filetto che le
     staccava quando erano di fianco. */
  nav.pillola .voci a.dentro { max-width: 100%; }
  nav.pillola .sezioni { padding-left: 0; border-left: none; width: 100%; }
  nav.pillola .uscita { margin-left: 0; }
  .carta { padding: 1.2rem; }
}

/* Il bottone che sta lavorando (form[data-lavoro], script in base.html):
   spento ma parlante, con la rotellina che dice «non sono bloccato». */
button.lavoro { opacity: 0.75; cursor: progress; }
button.lavoro::after {
  content: ""; display: inline-block; width: 0.85em; height: 0.85em;
  margin-left: 0.5em; vertical-align: -0.1em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: lavoro-giro 0.8s linear infinite;
}
@keyframes lavoro-giro { to { transform: rotate(360deg); } }