/* Appello — sistema visivo.
 *
 * Un'app di lavoro che si usa in piedi, spesso in fretta, spesso in un
 * corridoio. Quindi: schede che galleggiano davvero — non appoggiate con un
 * filo di bordo, ma sollevate da un'ombra morbida che dice «questa cosa è
 * sopra le altre» — numeri grandi, e il colore usato con parsimonia perché
 * quando c'è deve voler dire qualcosa.
 *
 * Il viola è quel che si può fare. Il verde e il rosso sono presente e
 * assente, e non si usano per altro: su un modulo che va alla Motorizzazione
 * il colore non è decorazione.
 *
 * Il carattere è Plus Jakarta Sans, variabile, ospitato da noi. Google Fonts
 * caricato da fuori manda a un terzo l'indirizzo di chi guarda, e per
 * un'autoscuola che tratta dati di persone è una grana che non vale la pena
 * prendersi.
 */

@font-face {
  font-family: Jakarta;
  src: url('/font/jakarta.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* I cognomi stranieri escono dal latino base: Şahin, Přibyl, Nowakówna. Senza
   questo secondo pezzo al posto della lettera comparirebbe un rettangolo. */
@font-face {
  font-family: Jakarta;
  src: url('/font/jakarta-ext.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* Geist: è il carattere del nostro gestionale, Symbiote. Il pannello
   dell'autoscuola si guarda dallo stesso tipo di schermo e fa lo stesso tipo
   di lavoro — elenchi, tabelle, righe — quindi parla la stessa lingua. Sul
   telefono resta Jakarta, che là funziona. */
@font-face {
  font-family: Geist;
  src: url('/font/geist.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Geist;
  src: url('/font/geist-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* Google Sans: il carattere del testo sul sito di Appello, e adesso anche
   qui. Prima erano due — Jakarta sul telefono, Geist sul computer — e stavano
   benissimo; ma il sito e l'app vanno guardati nello stesso giorno dalla
   stessa persona, e due caratteri diversi li fanno sembrare due cose.
   Il pezzo «esteso» non è un lusso: senza, Şahin e Nowakówna escono col
   rettangolo al posto della lettera. */
@font-face {
  font-family: 'Google Sans';
  src: url('/font/gsans-latino.woff2') format('woff2');
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  src: url('/font/gsans-esteso.woff2') format('woff2');
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Clash Grotesk: è il carattere dei titoli del sito di Appello. Qui fa lo
   stesso mestiere — i numeri grandi, le ore, i titoli di schermata — così chi
   arriva dal sito e apre l'app non ha l'impressione di due prodotti diversi.
   Il testo normale resta Jakarta sul telefono e Geist sul computer: Clash è
   bello grande, e in un elenco fitto stancherebbe. */
@font-face {
  font-family: Clash;
  src: url('/font/clash-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: Clash;
  src: url('/font/clash-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: Clash;
  src: url('/font/clash-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/font/inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  src: url('/font/inter-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Due cose diverse, che prima erano la stessa:
     - `--pagina` è il foglio sotto tutto, e adesso è bianco come il sito,
       con sopra la quadrettatura della carta dei registri (body::before);
     - `--fondo` è la TINTA: le pastiglie, i campi, la riga sfiorata. Quella
       resta il lilla chiarissimo di prima, se no spariscono tutte sul bianco. */
  --pagina:  #FFFFFF;          /* la pagina */
  --fondo:   #F5F3F9;          /* la tinta delle cose piccole */
  --carta:   #FFFFFF;          /* le schede */
  --tinta:   #EEF0FE;          /* i pannelli in tinta, dietro le cose importanti */
  --tinta-riga: #DFE3FD;
  --riga:    #EAE7F1;
  --riga-scura: #D8D3E4;

  /* Nemmeno il nero è neutro: ha un fondo di viola, così il testo e l'accento
     sembrano della stessa famiglia invece di due decisioni scollegate. */
  --nero:    #1A1626;
  --tenue:   #6E6781;
  --debole:  #A49DB5;

  /* Il viola è il colore di quel che si può fare: i bottoni, la voce accesa
     nella barra, il numero che conta. Verde e rosso restano quel che erano —
     presente e assente — perché là il colore è un significato, non uno stile. */
  /* Un viola solo in tutto il prodotto, ed è quello del marchio: l'icona
     dell'app e il bottone dentro l'app devono essere lo stesso colore, se no
     sembrano due prodotti. Il valore sta anche in strumenti/fai-icone.mjs, che
     è quel che genera l'icona: se si cambia qui, si cambia là e si rilancia. */
  --viola:      #4F5BD5;
  --viola-cupo: #3D47B4;
  --viola-tenue:#EEF0FE;

  /* Gli altri due del riferimento. Il lilla da solo fa una schermata tutta
     uguale: il verde acido è il colpo d'occhio, il blu notte è il peso. */
  --acido:      #CBF24E;
  --acido-cupo: #A8CC2E;
  --notte:      #1B1533;
  --notte-tenue:#2A2150;

  --acceso:  #4F5BD5;          /* il numero che conta, e poco altro */
  --ass:     #F04438;
  --ass-tenue:#FDECEA;
  --pres:    #12B76A;
  --pres-tenue:#E7F8F0;
  --attesa:  #B54708;
  --attesa-tenue:#FEF0E6;
  --blu:     #3D47B4;          /* solo i collegamenti */

  --r-grande: 24px;
  --r:        18px;
  --r-corto:  14px;

  /* Le altezze.
   *
   * Ombre piene, senza sfocatura, come sul sito: un oggetto appoggiato sul
   * tavolo, non incollato con un alone. Prima erano a due strati sfocati di
   * viola — bellissime da sole, ma di un'altra famiglia rispetto al sito.
   *
   * Si usano con parsimonia: le danno le COSE (le schede grandi, i pannelli,
   * la barra d'invio), non le righe. Un elenco di venti allievi con venti
   * ombre piene è una scala, non un elenco.
   */
  --filo:    #15111D;          /* il filo scuro attorno agli oggetti */
  --alt-1: 0 2px 0 var(--filo);
  --alt-2: 0 4px 0 var(--filo);
  --alt-3: 0 6px 0 var(--filo);

  --ombra-alta: var(--alt-3);
  --ombra-nav:  0 4px 10px -2px rgba(26, 22, 38, .05),
                0 20px 40px -12px rgba(61, 71, 180, .26);
  --sicuro-sotto: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Il colore della pagina lo mette SOLO html: se lo mette anche body, il suo
   bianco copre la quadrettatura, che sta su body::before dietro al contenuto. */
html { background: var(--pagina); }

html, body {
  margin: 0; padding: 0;
  color: var(--nero);
  font: 400 15px/1.45 'Google Sans', Jakarta, system-ui, -apple-system, sans-serif;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body { padding-bottom: calc(96px + var(--sicuro-sotto)); }

/* Il fondo, lo stesso del sito.
 *
 * Due strati, tutti e due fissi e dietro a tutto:
 *  - la quadrettatura, che è la carta a quadretti dei registri di segreteria;
 *  - due aloni di colore, il viola del prodotto e il verde acido, che tengono
 *    insieme una pagina bianca con sopra oggetti bianchi.
 *
 * Fermi, non in movimento: sul sito scendono con la pagina perché là si
 * scorre per guardare, qui si scorre per lavorare e una cosa che si muove
 * dietro a un elenco di nomi è solo un disturbo. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(21, 17, 29, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21, 17, 29, .05) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 38%, #000 42%, transparent 100%);
          mask-image: radial-gradient(130% 95% at 50% 38%, #000 42%, transparent 100%);
}

/* La quadrettatura parte dal bordo della colonna di sinistra, non dal bordo
   della finestra: così le righe del quaderno cadono dove cade il contenuto, e
   il fondo diventa la griglia della pagina invece che una tappezzeria. */
@media (min-width: 900px) {
  body:has(.navbar)::before { background-position: 248px 0; }
}

body::after {
  content: ''; position: fixed; inset: -18vh -12vw; z-index: -3; pointer-events: none;
  background:
    radial-gradient(44vw 44vw at 10% 14%, rgba(79, 91, 213, .24), transparent 64%),
    radial-gradient(38vw 38vw at 92% 84%, rgba(203, 242, 78, .30), transparent 62%),
    radial-gradient(30vw 30vw at 88% 6%, rgba(14, 165, 233, .13), transparent 66%);
}

/* I titoli in Clash, come sul sito. Il testo degli elenchi no: là comanda la
   leggibilità, e Clash a corpo piccolo si chiude. */
h1, .orario, .spia { font-family: Clash, 'Google Sans', system-ui, sans-serif; }
/* quando c'è anche la barra dei bottoni (l'appello) serve più fondo */
body:has(.barra) { padding-bottom: calc(104px + var(--sicuro-sotto)); }
body.senza-barra { padding-bottom: calc(20px + var(--sicuro-sotto)); }

/* La frase grande è il contenuto, non una decorazione: dice in una riga
   quel che uno è venuto a sapere. */
/* Jakarta ha l'occhio grande: alla stessa misura sembra più corposo del
   carattere di prima, e regge una spaziatura più stretta senza chiudersi. */
h1 { font-weight: 600; font-size: 33px; line-height: 1.02; letter-spacing: -.05em; margin: 0 0 4px; }
h2 { font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -.028em;
     margin: 28px 4px 13px;
     display: flex; align-items: center; justify-content: space-between; gap: 10px; }
h2:first-child { margin-top: 4px; }
/* dentro una scheda il margine laterale disallineerebbe il titolo dalle
   etichette, che il padding della scheda ha già rientrato */
.scheda h2, .foglio h2 { margin: 0 0 16px; }
.scheda h2 + *, .foglio h2 + * { margin-top: 0; }
p  { margin: 0 0 10px; }
a  { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- impalcatura */

/* La testata non ha un fondo suo: se ce l'ha, in cima alla pagina compare una
   striscia bianca che taglia la quadrettatura e gli aloni, e il fondo sembra
   rotto. Non è appiccicata in alto — scorre col resto — quindi sotto non ci
   passa niente da coprire. */
.testata {
  display: flex; align-items: center; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 20px 14px;
  background: transparent;
}
.testata .titolo { flex: 1; min-width: 0; }
/* Sul telefono la testata è la prima cosa che si legge, e in controluce in
   un cortile il grigio chiaro sparisce: il nome della schermata sta in nero
   pieno, e la riga sotto in un grigio che si legge ancora. */
.testata .titolo strong {
  display: block; font-weight: 700; font-size: 19px; letter-spacing: -.03em;
  line-height: 1.15; color: var(--nero);
}
.testata .titolo span {
  display: block; font-size: 13px; color: var(--tenue); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* La riga che sta sotto al titolone: dice il resto, senza allungare il titolo. */
.sotto-titolo {
  margin: -12px 4px 20px; font-size: 15.5px; line-height: 1.35;
  color: var(--tenue); letter-spacing: -.01em;
}

/* Il nome del giorno, colorato: in una riga di testo tutto uguale è
   l'appiglio per l'occhio. «lunedì 28 settembre» — «lunedì» si vede. */
.giorno { color: var(--nero); font-weight: 600; }
.giorno.oggi { color: var(--pres); }
.giorno.domani { color: var(--attesa); }

/* I bottoni tondi: uno vuoto col contorno, uno pieno nero. Niente altro. */
.indietro, .tondo {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--riga); background: var(--carta); color: var(--nero);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: transform .12s ease, background .15s ease;
}
.indietro:active, .tondo:active { transform: scale(.94); }
.tondo.pieno { background: var(--viola); border-color: var(--viola); color: #fff; }

main { padding: 0 16px; max-width: 720px; margin: 0 auto; }

/* ------------------------------------------------------------------ schede */

/* Le schede hanno un filo chiaro attorno e nessuna ombra: sono tante — una per
   allievo, una per lezione — e il filo scuro con l'ombra piena del sito, venti
   volte di fila, diventa una scala invece di un elenco. L'idea è la stessa
   (oggetti con un bordo, non macchie di colore), il peso è quello che una
   schermata fitta può reggere. */
.scheda {
  background: var(--carta); border-radius: var(--r-grande);
  border: 1.5px solid var(--riga);
  padding: 20px; margin-bottom: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
.scheda.cliccabile:hover {
  border-color: var(--nero); box-shadow: var(--alt-1); transform: translateY(-2px);
}
.scheda > :last-child { margin-bottom: 0; }
/* È un <button>, e `border: 0` le portava via il filo che ha come scheda:
   su pagina bianca restava un rettangolo invisibile. */
.scheda.cliccabile { cursor: pointer; display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; border: 1.5px solid var(--riga);
  transition: transform .14s cubic-bezier(.32, .72, 0, 1); }
.scheda.cliccabile:active { transform: scale(.985); }

/* la prossima da fare: bianca e piena. Le già fatte si ritirano. */
/* La prossima lezione è l'eroe della schermata: sta su un fondo in tinta,
   come i pannelli del disegno, così si stacca dalle altre senza bisogno di
   un bordo o di una riga in più. */
.scheda.prossima {
  background: var(--tinta);
  box-shadow: var(--alt-2);
}
.scheda.prossima .arg { color: var(--viola-cupo); }
.scheda.fatta { background: transparent; box-shadow: inset 0 0 0 1.5px var(--riga); color: var(--tenue); }
.scheda.fatta:hover { transform: none; box-shadow: inset 0 0 0 1.5px var(--riga-scura); }
.scheda.fatta .lezione-ora { color: var(--tenue); font-size: 22px; }
.scheda.fatta:hover, .scheda.fatta:active { background: var(--carta); box-shadow: none; }

.vuoto { text-align: center; color: var(--tenue); padding: 56px 20px; }
.vuoto .faccia { display: block; margin-bottom: 12px; color: var(--debole); }

/* ---------------------------------------------------------- la frase e i numeri */

.lezione-ora { font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.lezione-corso { color: var(--tenue); font-size: 13.5px; margin-top: 4px; }
.riga-fra { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap; }
.riga-fra > :first-child { min-width: 0; }

/* Il numero dentro la frase, nella pasticca accesa: è l'unica cosa che grida. */
.quanti { display: inline-flex; align-items: center; padding: 1px 12px; border-radius: 999px;
  background: var(--acceso); color: #fff; font-variant-numeric: tabular-nums; }

/* --- la scheda di una lezione: corso, orario, argomento --------------------
   In quest'ordine perché è l'ordine in cui uno se lo chiede: è il mio corso?
   a che ora? di cosa si parla? */

.quale {
  font-weight: 600; font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tenue); min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
/* Sulla scheda grande il numero di corso è un dato che serve per intero:
   «CORSO 13/2026/CQCP/0030 · CAMPOSAMPI…» tronca proprio la parte che
   distingue una sede dall'altra. Lì va a capo. */
.quale.larga, .lezione-grande .quale {
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35;
}
/* l'orario in tre pezzi: il trattino ha il suo spazio e l'ora di fine sta
   sulla stessa linea di base dell'inizio, invece di accavallarcisi */
.orario {
  display: flex; align-items: baseline; gap: 9px; margin-top: 12px;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1.05;
}
.orario b  { font-weight: 600; font-size: 34px; letter-spacing: -.055em; }
.orario i  { font-style: normal; font-weight: 400; font-size: 20px; color: var(--debole); }
.orario em { font-style: normal; font-weight: 500; font-size: 22px; color: var(--tenue); }
.arg {
  color: var(--tenue); font-size: 14px; line-height: 1.4;
  margin-top: 12px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--riga);
}
/* nelle schede già comunicate tutto si ritira di un passo */
.scheda.fatta .orario b  { font-size: 24px; font-weight: 600; color: var(--tenue); }
.scheda.fatta .orario em { font-size: 18px; }

/* ------------------------------------------------------ pasticche e etichette */

.scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scelta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--riga); background: var(--carta); color: var(--tenue);
  font-weight: 500; font-size: 13.5px; letter-spacing: -.01em;
}
.scelta:active { transform: scale(.97); }
.scelta[aria-pressed="true"] { background: var(--viola); border-color: var(--viola); color: #fff; }
/* il conteggio dentro la pasticca */
.scelta .conto { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--fondo); color: var(--nero); display: grid; place-items: center;
  font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.scelta[aria-pressed="true"] .conto { background: #fff; color: var(--viola-cupo); }

/* Le pastiglie quiete sono della stessa tinta del pannello che a volte le
   contiene: senza un filo si sciolgono dentro. Quelle che hanno un colore loro
   — consegnata, in coda, errore — non ne hanno bisogno e non lo prendono. */
.stato { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--riga);
  background: var(--fondo); color: var(--tenue); }
.stato.inviata, .stato.consegnato, .stato.in_coda, .stato.errore { border-color: transparent; }
.stato.inviata, .stato.consegnato { background: var(--pres-tenue); color: var(--pres); }
.stato.inviato, .stato.accettato { background: var(--fondo); color: var(--tenue); }
.stato.in_coda { background: var(--attesa-tenue); color: var(--attesa); }
.stato.errore  { background: var(--ass-tenue); color: var(--ass); }

.cronometro { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums;
  padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--riga);
  background: var(--fondo); color: var(--tenue); }
.cronometro.stretto { background: var(--attesa-tenue); color: var(--attesa);
  border-color: transparent; }
/* Passati i quindici minuti la pasticca si spegne invece di farsi rossa.
   Il rosso in quest'app vuol dire «assente», e usarlo anche per «è tardi»
   gli toglierebbe il significato proprio sulla schermata dove conta. */
.cronometro.fuori { background: var(--fondo); color: var(--tenue); }

/* ----------------------------------------------------------------- le liste */

/* Ogni riga è una scheda a sé: si tocca come un oggetto, non come una riga
   di tabella, ed è quel che rende la lista leggibile col pollice. */
.allievi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* La riga dell'allievo era bianca sopra una pagina lilla, e si vedeva per
   differenza. Adesso la pagina è bianca: senza un filo attorno sparirebbe, e
   su questa schermata sparire vuol dire toccare la riga sbagliata. */
.allievo {
  width: 100%; border: 1.5px solid var(--riga); background: var(--carta);
  color: inherit; font: inherit;
  border-radius: var(--r); padding: 13px 14px; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px; min-height: 56px;
}
/* L'assente ha già il suo rosa: lì il filo lo prende del suo colore, se no
   la riga che conta è l'unica senza contorno. */
.allievo.assente { border-color: var(--ass); }
.allievo .chi { flex: 1; min-width: 0; }
.allievo .chi b { display: block; font-weight: 600; font-size: 14.5px; letter-spacing: -.015em; }
.allievo .chi span { font-size: 12px; color: var(--debole); font-variant-numeric: tabular-nums; }
.allievo .esito { font-weight: 600; font-size: 12.5px; color: var(--pres); }
.allievo.assente { background: var(--ass-tenue); }
.allievo.assente .chi b { color: var(--ass); }
.allievo.assente .esito { color: var(--ass); }

/* --- l'appello: nome sopra, le due scelte sotto ------------------------- */

/* Nell'appello il filo è più marcato che altrove: è la schermata su cui si
   tocca di fretta, e una riga che si intuisce non basta — bisogna vederla. */
.allievi.appello .allievo {
  display: grid; grid-template-columns: 1fr; gap: 10px; cursor: default;
  border-color: var(--riga-scura);
}
.allievi.appello .chi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 9px; }
.allievi.appello .chi b { white-space: normal; }

/* Due pasticche, non un interruttore: si vede che sono due scelte e quale
   vale adesso. «Presente» è quieto, «Assente» è l'unica cosa colorata. */
.presenza { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.presenza .opzione {
  min-height: 44px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--riga); background: var(--carta); color: var(--debole);
  font-weight: 600; font-size: 13.5px; letter-spacing: -.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.presenza .bollo { opacity: .4; }
.presenza .opzione[aria-pressed="true"] .bollo { opacity: 1; }
.presenza .presente[aria-pressed="true"] {
  background: var(--pres-tenue); border-color: var(--pres); color: var(--pres); }
.presenza .assente[aria-pressed="true"] {
  background: var(--ass); border-color: var(--ass); color: #fff; }
.presenza .opzione:active { transform: scale(.97); }
.presenza .opzione:focus-visible { outline: 2.5px solid var(--nero); outline-offset: 2px; }

/* --------------------------------------------------------- la barra in fondo */

.barra {
  position: fixed; left: 12px; right: 12px; z-index: 30;
  bottom: calc(14px + var(--sicuro-sotto));
  background: var(--carta); border-radius: 999px; padding: 8px;
  border: 1.5px solid var(--nero); box-shadow: var(--alt-2);
}
.barra .dentro { max-width: 700px; margin: 0 auto; display: flex; gap: 8px; align-items: center; }
/* Dove c'è la barra dei bottoni — l'appello — la barra di navigazione sparisce.
 * Due barre impilate in fondo sono una di troppo: rubano un terzo dello
 * schermo proprio dove si deve scorrere un elenco di nomi, e il pollice
 * rischia di prendere quella sbagliata mentre corre il quarto d'ora. Si esce
 * con la freccia in alto, che su questa schermata c'è sempre. */
body:has(.barra) .navbar { display: none; }

/* I bottoni sono pochi e sono le cose da fare: a loro il filo scuro e l'ombra
   piena del sito, e si abbassano quando si premono — come un tasto vero. */
.bottone {
  flex: 1; border: 1.5px solid var(--nero); border-radius: 999px;
  padding: 0 22px; cursor: pointer;
  font-family: Clash, 'Google Sans', system-ui, sans-serif;
  font-weight: 600; font-size: 16px; letter-spacing: -.02em;
  background: var(--viola); color: #fff; min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 3px 0 var(--nero);
  transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease;
}
.bottone:disabled { opacity: .35; cursor: not-allowed; box-shadow: 0 3px 0 var(--riga-scura); }
.bottone:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--nero); }
.bottone.quieto { background: var(--tinta); color: var(--viola-cupo); }
/* Dentro una scheda già in tinta il bottone quieto sparirebbe: stesso colore
   su stesso colore non è più un bottone, è una frase. Lì diventa bianco. */
.scheda.prossima .bottone.quieto,
.tinta .bottone.quieto { background: var(--carta); color: var(--viola-cupo); }
/* Quando serve il peso del nero: una conferma da cui non si torna indietro. */
.bottone.grave { background: var(--nero); color: #fff; }
.bottone.pieno-verde { background: var(--pres); }
.bottone.stretto { flex: none; width: 50px; padding: 0; }
/* un bottone che sta nel flusso, non nella barra, si stacca da quel che precede */
.scheda > .bottone, .foglio > .bottone { margin-top: 4px; }

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

label.campo { display: block; margin-bottom: 20px; }
label.campo > span { display: block; font-weight: 500; font-size: 13.5px;
  margin-bottom: 7px; letter-spacing: -.005em; color: var(--tenue); }
label.campo:last-child { margin-bottom: 0; }
/* Il campo dentro una riga d'elenco: il numero di registro di un corso che sta
   per nascere dal calendario delle guide. Stretto e attaccato al nome, perché
   appartiene a quella riga e non al foglio. */
label.campo.stretto { margin: 7px 0 1px; }
label.campo.stretto > span { font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--tenue); margin-bottom: 4px; text-transform: none; }
label.campo.stretto input { padding: 8px 11px; font-size: 14px; font-weight: 600;
  max-width: 260px; }
input, select, textarea {
  width: 100%; font: 400 15px/1.35 Jakarta, system-ui, sans-serif; letter-spacing: -.011em;
  color: inherit; padding: 13px 15px; border: 1.5px solid var(--riga); border-radius: var(--r-corto);
  background: var(--carta); min-height: 48px; appearance: none;
}
textarea { min-height: 120px; resize: vertical; }
select { background-image:
  linear-gradient(45deg, transparent 50%, var(--tenue) 50%),
  linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--nero); }
input[type="file"] { border: 0; background: transparent; padding: 0; min-height: 0; }

/* Le caselle da spuntare.
 *
 * La regola qui sopra vale per ogni «input», e su una casella faceva due danni
 * insieme: «appearance: none» le toglieva il segno di spunta — restava un
 * rettangolo vuoto uguale da spuntata e da non spuntata — e «padding: 13px
 * 15px» la gonfiava a 32×28 anche dove era dichiarata 20×20, perché il padding
 * non si lascia comprimere. Cliccarla funzionava; non si vedeva. Quattro
 * caselle nell'app erano così, compresa quella che ricorda il testo della PEC.
 *
 * Il segno si disegna qui invece di ripristinare quello di sistema: così è del
 * colore del marchio ed è identico su tutti i telefoni. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; min-width: 22px; min-height: 22px; flex: none;
  padding: 0; cursor: pointer;
  border: 1.5px solid var(--riga-scura); border-radius: 7px;
  background: var(--carta);
  display: inline-grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
input[type="checkbox"]::after {
  content: ''; width: 5px; height: 10px; margin-top: -2px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .15s ease;
}
input[type="checkbox"]:checked {
  background: var(--viola); border-color: var(--viola);
}
input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--viola); outline-offset: 2px; }
input[type="checkbox"]:active { transform: scale(.92); }

/* L'etichetta accanto: tutta l'area si tocca, non solo il quadratino. */
label:has(> input[type="checkbox"]) { cursor: pointer; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.due > .campo, .tre > .campo { margin-bottom: 0; }
.due, .tre { margin-bottom: 20px; }

/* ------------------------------------------------------------------ velo */

.velo { position: fixed; inset: 0; z-index: 50; background: rgba(26, 22, 38, .32);
  display: grid; place-items: end center; }
.foglio { background: var(--carta); width: 100%; max-width: 560px;
  border-radius: 28px 28px 0 0; padding: 10px 20px calc(24px + var(--sicuro-sotto));
  max-height: 92vh; overflow: auto; animation: sali .3s cubic-bezier(.32, .72, 0, 1); }
.foglio::before { content: ''; display: block; width: 40px; height: 4px; margin: 0 auto 16px;
  border-radius: 2px; background: var(--riga-scura); }
@keyframes sali { from { transform: translateY(100%) } }

/* I tre passi della PEC: partita, accettata, consegnata.
 *
 * In fila orizzontale e senza spiegazioni. Erano tre righe con sotto una frase
 * ciascuna, e si leggevano nel momento peggiore — quello in cui l'unica cosa
 * che interessa è se è andata. Così si guardano invece di leggerli: tre pallini
 * su una linea che si tinge di verde mano a mano. */
.passi {
  list-style: none; margin: 22px 0 16px; padding: 0;
  display: flex; align-items: flex-start; counter-reset: passo;
}
.passi li {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center;
}

/* La linea fra un pallino e l'altro: parte grigia, diventa verde quando il
   passo È stato fatto. Sta dietro ai pallini, non sotto le etichette. */
.passi li::before {
  content: ''; position: absolute; top: 15px; right: 50%; left: -50%;
  height: 2px; background: var(--riga);
}
.passi li:first-child::before { display: none; }
.passi li.fatto::before { background: var(--pres); }
.passi li.male::before { background: var(--ass); }

.passi .pallino {
  width: 32px; height: 32px; flex: none; border-radius: 50%; position: relative;
  border: 2px solid var(--riga); background: var(--carta);
  display: grid; place-items: center; color: var(--debole);
  transition: background .25s ease, border-color .25s ease;
}
.passi b {
  font-weight: 600; font-size: 13px; letter-spacing: -.01em; color: var(--debole);
}
.passi i {
  font-style: normal; font-size: 11.5px; color: var(--debole);
  font-variant-numeric: tabular-nums; margin-top: -3px;
}

.passi li.fatto .pallino { background: var(--pres); border-color: var(--pres); color: #fff; }
.passi li.fatto b { color: var(--nero); }

/* Quello in corso: cerchio vuoto col bordo scuro che pulsa piano. Niente
   numero dentro — il numero non aggiunge niente a tre parole già scritte. */
.passi li.corso .pallino {
  border-color: var(--nero);
  animation: batte 1.6s ease-in-out infinite;
}
.passi li.corso b { color: var(--nero); }

.passi li.male .pallino { background: var(--ass); border-color: var(--ass); color: #fff; }
.passi li.male b { color: var(--ass); }
@keyframes batte { 50% { transform: scale(1.1); opacity: .65 } }

/* Mentre si aspetta la ricevuta: una riga quieta, non un allarme. Due minuti
   di attesa sono normali e non devono sembrare un guasto. */
.esito-attesa {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--tenue); margin: 0 0 4px;
}
.esito-attesa::before {
  content: ''; width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid var(--riga); border-top-color: var(--tenue);
  animation: gira .8s linear infinite;
}
.passi .dice b { display: block; font-weight: 600; font-size: 15px; }
.passi .dice span { font-size: 13.5px; color: var(--tenue); }

/* ----------------------------------------------------------------- avvisi */

.avviso { border-radius: var(--r); padding: 14px 16px; font-size: 14px; line-height: 1.4;
  margin-bottom: 12px; }
.avviso.male   { background: var(--ass-tenue);    color: var(--ass); }
.avviso.attesa { background: var(--attesa-tenue); color: var(--attesa); }
.avviso.bene   { background: var(--pres-tenue);   color: var(--pres); }
.avviso a { color: inherit; text-decoration: underline; font-weight: 600; }

.brindello { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + var(--sicuro-sotto)); z-index: 60;
  background: var(--nero); color: #fff; padding: 13px 20px; border-radius: 999px;
  font-weight: 500; font-size: 14px; box-shadow: var(--ombra-alta);
  max-width: calc(100% - 32px); text-align: center; }

/* --------------------------------------------------------------- la navbar */

/* Galleggia in basso: pasticca bianca, la voce attiva in nero pieno con la
   parola scritta accanto all'icona, le altre solo icona. */
.navbar {
  position: fixed; left: 14px; right: 14px; bottom: calc(16px + var(--sicuro-sotto)); z-index: 40;
  background: var(--carta); border-radius: 999px; padding: 8px;
  display: flex; align-items: center; gap: 6px; justify-content: space-around;
  border: 1.5px solid var(--nero); box-shadow: var(--alt-2);
  max-width: 520px; margin: 0 auto;
}
.navbar button {
  border: 0; background: transparent; color: var(--debole); cursor: pointer;
  height: 50px; border-radius: 999px; padding: 0; flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: 14.5px; letter-spacing: -.015em;
  transition: background .18s ease, color .18s ease, flex .2s ease;
}
.navbar button span { display: none; }
/* La voce aperta: inchiostro pieno col segno verde acido dentro — la stessa
   cosa che fa la colonna di sinistra da computer. Era un cerchio viola, e dopo
   il vestito nuovo era rimasta l'unica macchia di quel colore sullo schermo. */
.navbar button[aria-current="page"] {
  background: var(--nero); color: var(--acido);
}
.navbar button:active { transform: scale(.96); }

/* ------------------------------------------------- dentro una scheda lunga
 *
 * Una schermata di impostazioni è una colonna di campi, e se sono tutti
 * uguali non si legge: si scorre cercando. Questi pezzi servono a dare
 * dislivelli — cosa è un titolo, cosa è un dato già deciso, cosa si cambia
 * spesso e cosa quasi mai.
 */

/* Un blocco dentro la scheda, con la sua intestazione sottile. Separa
   «l'anagrafica» da «il nulla osta» senza aprire una scheda nuova. */
.gruppo { margin: 0 0 26px; }
.gruppo:last-child { margin-bottom: 0; }
.gruppo > h3 {
  margin: 0 0 3px; font-weight: 600; font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--debole);
}
.gruppo > h3 + .nota { margin: 0 0 14px; }
.gruppo > h3 + :not(.nota) { margin-top: 14px; }

/* La frase che spiega il blocco: una sola, sotto il titolo, leggibile.
   Non è il sottotitolo di ogni campo — quelli li abbiamo tolti apposta. */
.nota { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--tenue); }
.nota b { font-weight: 600; color: var(--nero); }

/* Un dato che non si cambia da qui: etichetta a sinistra, valore a destra. */
.dato {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--riga);
}
.dato:last-child { border-bottom: 0; }
.dato > dt { font-size: 13.5px; color: var(--tenue); flex: none; }
.dato > dd {
  margin: 0; font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  text-align: right; min-width: 0; overflow-wrap: anywhere;
}

/* Il campo che conta davvero nella scheda: più grande, e si vede che è lui. */
label.campo.chiave > span { font-size: 14px; color: var(--nero); font-weight: 600; }
label.campo.chiave input, label.campo.chiave select {
  font-size: 16.5px; font-weight: 600; letter-spacing: -.01em;
}

/* Una riga di cose: una sede, una persona, un modulo. */
.righe { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.riga {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px; border-radius: var(--r-corto);
  background: var(--fondo); border: 1.5px solid transparent;
}
.riga.viva { background: var(--carta); border-color: var(--riga); }
.riga > .segno {
  width: 38px; height: 38px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--viola-cupo);
  border: 1.5px solid var(--tinta-riga);
}
.riga > .chi { flex: 1; min-width: 0; }
.riga > .chi b {
  display: block; font-weight: 600; font-size: 14.5px; letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.riga > .chi span { display: block; font-size: 12.5px; color: var(--tenue); margin-top: 2px; }
.riga > .azioni { display: flex; align-items: center; gap: 7px; flex: none; }

/* Il pulsantino dentro una riga: tondo, piccolo, non ruba la scena. */
.minuto {
  height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--riga); background: var(--carta); color: var(--nero);
  font: inherit; font-weight: 600; font-size: 13px; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.minuto:active { transform: scale(.96); }
.minuto.solo-segno { width: 34px; padding: 0; justify-content: center; }
.minuto.pericolo { color: var(--ass); border-color: var(--ass-tenue); background: var(--ass-tenue); }

/* Caricare un file. L'input di sistema qui dentro sembra di un'altra epoca:
   si nasconde e si lascia parlare l'etichetta, che è tutta l'area. */
.carica {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 16px; border-radius: var(--r-corto); cursor: pointer;
  border: 1.5px dashed var(--riga-scura); background: var(--fondo);
  transition: border-color .18s ease, background .18s ease;
}
.carica:hover, .carica:focus-within { border-color: var(--viola); background: var(--tinta); }
.carica input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.carica .segno {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--viola-cupo);
  border: 1.5px solid var(--tinta-riga);
}
.carica .chi b { display: block; font-weight: 600; font-size: 14px; }
.carica .chi span { display: block; font-size: 12.5px; color: var(--tenue); margin-top: 2px; }

/* I segnaposto del testo della PEC: si toccano e si infilano nel punto in
   cui stava il cursore. */
.segnaposti { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.segnaposto {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  border: 1.5px solid var(--riga); background: var(--carta); color: var(--tenue);
}
.segnaposto:hover { border-color: var(--nero); color: var(--nero); }
.segnaposto:active { transform: scale(.95); }

/* Lo specchio del testo della PEC, mentre lo si scrive. */
.specchio {
  margin: 0; padding: 14px 15px; border-radius: var(--r-corto);
  border: 1.5px solid var(--riga);
  background: var(--fondo); color: var(--nero);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word;
  max-height: 300px; overflow: auto;
}
textarea.testo-pec {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.55; min-height: 230px;
}

/* Il piede di una scheda: il bottone che salva, e quel che c'è da sapere. */
.piede-scheda {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--riga);
}
.piede-scheda .bottone { flex: 0 0 auto; min-width: 180px; }
.piede-scheda .nota { margin: 0; flex: 1; min-width: 200px; font-size: 12.5px; }

/* La riga delle cose che si possono fare in cima a un elenco. Compatta:
   sono azioni che si usano di rado, e non devono spingere giù il contenuto
   per cui la schermata si è aperta. */
.fare { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.minuto.grande { height: 42px; padding: 0 18px; font-size: 14px; }

/* I due numeri che dicono se un corso è pronto: iscritti e lezioni. Quando
   uno dei due è zero si smorza, perché è quello che manca. */
.numeretti {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 13px;
  padding-top: 12px; border-top: 1px solid var(--riga);
  font-size: 13px; color: var(--tenue);
}
.numeretti > span { display: inline-flex; align-items: center; gap: 6px; }
.numeretti .manca { color: var(--debole); }
.numeretti .manca .icona { opacity: .55; }

/* L'azione in coda al titolo di sezione: «vedi tutto», «aggiungi». Sta sulla
   stessa riga perché è di quella sezione, non della pagina. */
.vedi-tutto {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.012em;
  color: var(--viola-cupo); display: inline-flex; align-items: center; gap: 4px;
}
.vedi-tutto:hover { color: var(--nero); }

/* Il calendario di un corso, a mesi. Il mese è un'etichetta sottile con il
   suo conto a destra: serve a ritrovare il punto, non a farsi leggere. */
.calendario-corso .mese + .mese { margin-top: 22px; }
.calendario-corso .mese > h3 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 4px 9px; font-weight: 700; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--debole);
}
.calendario-corso .mese > h3 > span {
  font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
/* Le lezioni oltre le prime dieci: ci sono, ma non pesano finché non servono. */
.piu-in-la { display: none; }

/* ------------------------------------------- la finestra dei quindici minuti
 *
 * È il cuore dell'app: dall'inizio della lezione l'autoscuola ha un quarto
 * d'ora per mandare la PEC. Prima era una pasticca rossa con scritto «in
 * ritardo di 4h 56m», che gridava senza servire a niente — quando il quarto
 * d'ora è passato l'unica cosa da fare è mandarla lo stesso, e il rosso non
 * cambia la mossa, rende solo la schermata sgradevole da aprire ogni giorno.
 *
 * Qui è una barra che si riempie. Si vede a colpo d'occhio quanto resta, e
 * quando è finita lo dice con calma: il rosso resta per l'assenza, dove vuol
 * dire qualcosa.
 */
.finestra { margin-top: 18px; }
.finestra .binario {
  height: 6px; border-radius: 999px; background: rgba(61, 71, 180, .16);
  overflow: hidden;
}
.finestra .binario > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--viola); width: 0;
  transition: width 1s linear, background .4s ease;
}
.finestra > p {
  margin: 9px 0 0; font-size: 13px; font-weight: 500; color: var(--tenue);
  display: flex; align-items: center; gap: 7px; letter-spacing: -.012em;
}
.finestra > p b {
  font-weight: 700; color: var(--nero); font-variant-numeric: tabular-nums;
}

/* Non è ancora cominciata: il binario resta vuoto, e si dice fra quanto. */
.finestra.prima .binario > span { background: var(--debole); }

/* Gli ultimi cinque minuti: l'unico momento in cui affrettarsi cambia
   qualcosa, e l'unico in cui il colore si alza la voce. */
.finestra.stretta .binario > span { background: var(--attesa); }
.finestra.stretta > p b { color: var(--attesa); }

/* Passata. Barra piena e spenta, frase asciutta: la PEC va mandata comunque. */
.finestra.fuori .binario > span { background: var(--riga-scura); width: 100% !important; }
.finestra.fuori > p { color: var(--tenue); }
.finestra.fuori > p b { color: var(--tenue); font-weight: 600; }

/* --- l'intestazione della scheda di oggi ---------------------------------
   «ADESSO» davanti al numero del corso: in una schermata con più lezioni
   dice quale delle due si sta guardando senza dover leggere gli orari. */
.adesso {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--viola-cupo); margin-bottom: 2px;
}
.adesso::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--viola); flex: none;
  animation: pulsa 2.2s ease-in-out infinite;
}
@keyframes pulsa { 50% { opacity: .35; transform: scale(.8) } }

/* L'orario della scheda grande: l'ora d'inizio è l'ancora di tutta la
   schermata, e su Jakarta regge una misura più alta senza sfaldarsi. */
.lezione-grande .orario b  { font-size: 44px; letter-spacing: -.05em; }
.lezione-grande .orario i  { font-size: 22px; }
.lezione-grande .orario em { font-size: 24px; }
@media (max-width: 380px) {
  .lezione-grande .orario b { font-size: 38px; }
}

/* I dati della lezione: stanno chiusi perché quasi sempre arrivano già
   giusti dal calendario, e chi apre questa schermata ha quindici minuti. */
.dati-lezione { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tinta-riga); }
.scheda:not(.prossima) .dati-lezione { border-top-color: var(--riga); }
.dati-lezione > summary {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--viola-cupo);
}
.scheda:not(.prossima) .dati-lezione > summary { color: var(--tenue); }
.dati-lezione[open] > summary { margin-bottom: 14px; }

/* ---------------------------------------------- la lezione di oggi, e le altre
 *
 * Questo blocco era blu notte: una macchia scura in cima alla schermata che
 * diceva «guarda qui». Adesso le due forme dell'app — il telefono in aula e il
 * gestionale in segreteria — portano lo stesso vestito, che è quello del sito:
 * carta bianca o appena tinta, un filo scuro attorno, un'ombra piena sotto. Il
 * peso non lo fa più il buio, lo fanno il filo e l'altezza da terra: il blocco
 * di adesso è l'unica cosa della schermata che sta cinque pixel sopra al
 * foglio, e si vede.
 *
 * Il colore della carta dice CHE CORSO È — viola l'aula, azzurro un
 * conseguimento, viola chiaro un rinnovo, ambra una guida — e il verde acido
 * resta per le due cose che fanno muovere: quanto manca alla PEC e il bottone.
 * Quelle due non cambiano mai colore, nemmeno per una guida: un tasto che
 * cambia tinta secondo il corso si cerca ogni volta.
 */

.oggi-blocco {
  position: relative;
  background: var(--tinta-tenue, var(--carta)); color: var(--nero);
  border: 1.5px solid var(--filo); border-radius: var(--r-grande);
  box-shadow: var(--alt-3);
  padding: 18px 18px 20px;
}

.oggi-testa {
  position: relative; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
}
.oggi-chi { min-width: 0; }

/* «Adesso»: il pallino verde acido con l'orlo scuro — sulla carta chiara un
   pallino acido da solo si perderebbe — e la parola in nero. */
.oggi-adesso {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nero);
}
.oggi-adesso::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--acido); box-shadow: 0 0 0 1.5px var(--filo);
  animation: pulsa 2.2s ease-in-out infinite;
}
@keyframes pulsa { 50% { opacity: .3; transform: scale(.75) } }

/* Quando la lezione non è di oggi, al posto del segno «adesso» c'è il giorno. */
.oggi-quando { font-size: 13px; font-weight: 600; color: var(--tenue); }
.oggi-quando .giorno { color: var(--nero); }

/* Il numero del corso è la cosa da non sbagliare — da due corsi nella stessa
   ora passano due moduli diversi, con due numeri sopra — e stava scritto
   piccolo, grigio e tutto maiuscolo. Qui è una riga che si legge, con accanto
   la pasticca che dice a parole quel che il colore della carta dice a colpo
   d'occhio. */
.oggi-corso {
  margin-top: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.35;
  letter-spacing: -.012em; color: var(--nero);
}
.oggi-corso .pasticca-tipo { margin-left: 8px; vertical-align: 1px; }

/* Quanto manca alla PEC. In alto a destra perché è la prima cosa che si
   cerca, e col binario verde acido perché è la sola che possa far correre. */
.clessidra { flex: none; text-align: right; }
.clessidra > b {
  display: block; font-family: Clash, 'Google Sans', system-ui, sans-serif;
  font-weight: 600; font-size: 32px; line-height: 1;
  letter-spacing: -.045em; color: var(--nero); font-variant-numeric: tabular-nums;
}
.clessidra > i {
  display: block; font-style: normal; margin-top: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tenue);
}
.clessidra .binario {
  display: block; margin: 9px 0 0 auto; width: 88px; height: 9px;
  border-radius: 999px; background: var(--carta);
  border: 1.5px solid var(--filo); overflow: hidden;
}
.clessidra .binario > span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--acido); transition: width 1s linear, background .4s ease;
}
/* Gli ultimi cinque minuti, e il tempo scaduto. Niente rosso: in quest'app il
   rosso è «assente», e usarlo per «è tardi» glielo toglierebbe di bocca. */
.clessidra.stretta > b { color: var(--attesa); }
.clessidra.stretta .binario > span { background: #F79009; }
.clessidra.fuori > b { color: var(--tenue); font-size: 22px; }
.clessidra.fuori .binario > span { background: var(--debole); }

.oggi-orario {
  position: relative; margin-top: 14px; display: flex; align-items: baseline; gap: 10px;
}
.oggi-orario > b {
  font-family: Clash, 'Google Sans', system-ui, sans-serif;
  font-weight: 600; font-size: 50px; line-height: .92; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.oggi-orario > span {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: 19px; letter-spacing: -.03em;
  color: var(--tenue); font-variant-numeric: tabular-nums;
}
@media (max-width: 380px) { .oggi-orario > b { font-size: 44px; } }

.oggi-arg {
  position: relative; margin: 14px 0 0;
  font-size: 14px; line-height: 1.45; color: var(--tenue);
}

/* Il bottone: verde acido, filo scuro, ombra piena. È il tasto del sito, ed è
   l'unica cosa di questa schermata che si preme. */
.oggi-bottone {
  position: relative; margin-top: 18px; width: 100%; min-height: 58px;
  border: 1.5px solid var(--filo); border-radius: 14px; cursor: pointer;
  background: var(--acido); color: var(--filo); box-shadow: 0 4px 0 var(--filo);
  font: inherit; font-weight: 700; font-size: 16.5px; letter-spacing: -.02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.oggi-bottone .icona { color: var(--filo); }
.oggi-bottone:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--filo); }
.oggi-bottone:active { transform: translateY(4px); box-shadow: 0 0 0 var(--filo); }
/* Quando la lezione non è di oggi non c'è nessuna fretta, e il verde
   mentirebbe. Lo stesso per una lezione già comunicata: il bottone c'è, ma non
   è quello che si sta cercando. */
.oggi-blocco.altro-giorno .oggi-bottone,
.oggi-bottone.quieto {
  background: var(--carta); color: var(--nero); box-shadow: var(--alt-1);
}

/* --- la giornata, riga per riga -------------------------------------------
 *
 * Le altre lezioni erano schede staccate, una sotto l'altra, alte centoventi
 * pixel per tre righe di testo. Adesso sono righe dentro un pannello solo,
 * separate da un filo: una giornata da cinque lezioni ci sta in uno schermo
 * invece che in tre schermate, e la fascia di colore a sinistra dice di che
 * corso è ognuna senza leggere.
 */
.fila-giorno {
  background: var(--carta); border: 1.5px solid var(--filo);
  border-radius: var(--r-corto); box-shadow: var(--alt-1); overflow: hidden;
}
.fila-giorno > .scheda {
  margin: 0; padding: 14px 16px; background: transparent;
  border: 0; border-top: 1px solid var(--riga); border-radius: 0; box-shadow: none;
}
.fila-giorno > .scheda:first-child { border-top: 0; }
/* la fascia del tipo la mette la regola generale delle schede: qui si rimette
   solo il rientro, che quella alza a diciotto */
.fila-giorno > .scheda.cliccabile[class*="tinta-"] { padding-left: 12px; }
.fila-giorno > .scheda.cliccabile:active {
  transform: none; background: var(--tinta-tenue, var(--fondo));
}
/* La riga, col pollice: il corso in cima, l'ora e «fra quanto» sulla stessa
   linea — perché la pastiglia parla di quell'ora — e l'argomento sotto. Erano
   tre blocchi impilati, con la pastiglia a capo da sola: quaranta pixel di
   riga in più per ogni lezione. */
.fila-giorno > .scheda {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 12px; row-gap: 6px;
}
.fila-giorno .riga-fra { display: contents; }
.fila-giorno .quale   { grid-column: 1 / -1; grid-row: 1; }
.fila-giorno .orario  { grid-column: 1; grid-row: 2; margin: 0; }
.fila-giorno .orario b { font-size: 27px; }
.fila-giorno .scelte  { grid-column: 2; grid-row: 2; justify-self: end; }
.fila-giorno .arg {
  grid-column: 1 / -1; grid-row: 3; margin: 2px 0 0; padding: 0; box-shadow: none;
}
/* Le comunicate si ritirano di un passo, e il pannello che le tiene perde
   l'ombra: non è roba da fare. */
.fila-giorno > .scheda.fatta { opacity: .74; background: transparent; box-shadow: none; }
.zona-fatte .fila-giorno { background: transparent; border-color: var(--riga); box-shadow: none; }

/* --- come sta andando la giornata -----------------------------------------
 *
 * Una tacca per lezione, piene quelle comunicate e del colore del loro corso.
 * Un numero e cinque tacche dicono in mezzo secondo quel che una striscia di
 * tre riquadri diceva in tre numeri da leggere.
 */
.andamento {
  background: var(--carta); border: 1.5px solid var(--filo);
  border-radius: var(--r-corto); box-shadow: var(--alt-1); padding: 14px 16px 16px;
}
.andamento-dice {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-size: 14px; color: var(--tenue);
}
.andamento-dice b {
  font-family: Clash, 'Google Sans', system-ui, sans-serif;
  font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -.045em;
  color: var(--nero); font-variant-numeric: tabular-nums;
}
.tacche { display: flex; gap: 5px; margin-top: 13px; }
.tacche > i {
  flex: 1; height: 11px; border-radius: 4px;
  border: 1.5px solid var(--filo); background: var(--carta);
}
/* Bianche quelle che restano: con tutte colorate, anche annacquate, non si
   vedeva più quante ne mancano — che è l'unica cosa che la striscia deve dire. */
.tacche > i.piena { background: var(--tinta-tipo, var(--filo)); }

/* --- i giorni che vengono -------------------------------------------------
 *
 * Erano tre carte accavallate di tre colori diversi, come un mazzo tenuto in
 * mano. Adesso sono tre righe di un pannello: sono tre cose identiche a tre
 * date diverse, e il colore in questa schermata ha un altro mestiere — dice
 * che corso è, e lo dice la fascia a sinistra della riga.
 */
.pila {
  margin-top: 4px; background: var(--carta); border: 1.5px solid var(--filo);
  border-radius: var(--r-corto); box-shadow: var(--alt-1); overflow: hidden;
}
.carta-poi {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  background: transparent; color: inherit; font: inherit;
  border: 0; border-top: 1px solid var(--riga); border-radius: 0;
  padding: 13px 16px;
  display: flex; align-items: center; gap: 14px;
}
.carta-poi:first-child { border-top: 0; }
.carta-poi[class*="tinta-"] { border-left: 4px solid var(--tinta-tipo); padding-left: 12px; }
.carta-poi:active { background: var(--tinta-tenue, var(--fondo)); }
.carta-poi .tacca { display: none; }
.carta-poi .quando { flex: none; min-width: 62px; }
.carta-poi .quando b {
  display: block; font-weight: 600; font-size: 21px; line-height: 1;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--nero);
}
.carta-poi .quando i {
  display: block; font-style: normal; font-size: 11.5px; font-weight: 600;
  margin-top: 4px; color: var(--tenue);
}
.carta-poi .cosa { flex: 1; min-width: 0; }
.carta-poi .cosa b {
  display: block; font-weight: 600; font-size: 13.5px; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carta-poi .cosa span {
  display: block; font-size: 12.5px; margin-top: 2px; color: var(--tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carta-poi > .icona { flex: none; color: var(--debole); }

/* ---------------------------------------------------------------- studenti
 *
 * L'elenco delle persone. Non è una schermata che si legge: è una schermata
 * in cui si cerca uno. Quindi il campo di ricerca sta in cima, grande, ed è
 * la prima cosa che prende il fuoco; tutto il resto è la risposta.
 */

/* Il campo di ricerca: la lente sta dentro, non accanto, così il campo è
   tutto area cliccabile e sul telefono non si sbaglia mira. */
.cerca-riga {
  position: relative; display: flex; align-items: center;
  margin: 4px 0 18px;
}
.cerca-riga > input {
  padding-left: 46px; padding-right: 46px; min-height: 52px;
  font-size: 16px; font-weight: 500; border-radius: 999px;
  background: var(--carta); box-shadow: var(--alt-1); border-color: transparent;
}
.cerca-riga > input::placeholder { color: var(--debole); font-weight: 400; }
.cerca-riga > input:focus { border-color: var(--viola); box-shadow: var(--alt-2); }
.cerca-riga > input::-webkit-search-cancel-button { display: none; }
.cerca-riga > .lente {
  position: absolute; left: 17px; display: grid; place-items: center;
  color: var(--debole); pointer-events: none;
}
.cerca-riga > input:focus ~ .lente { color: var(--viola-cupo); }
.cerca-riga > .minuto { position: absolute; right: 9px; border-color: transparent;
  background: var(--fondo); color: var(--tenue); }

/* Quanti ne ha trovati. Una riga sola, smorzata: serve a confermare che la
   ricerca ha fatto qualcosa, non a essere letta. */
.quanti-trovati {
  margin: 0 4px 10px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em; color: var(--debole);
  font-variant-numeric: tabular-nums;
}

/* La riga di una persona. Il nome porta il peso, sotto ci sta la patente —
   che è la cosa con cui la si ritrova — e in quali corsi è. */
.riga.persona { cursor: pointer; transition: box-shadow .16s ease, transform .16s ease; }
.riga.persona:hover { box-shadow: var(--alt-1); border-color: var(--riga-scura); }
.riga.persona:active { transform: scale(.99); }
.riga.persona > .azioni { color: var(--debole); }

.sotto-nome { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

/* Il numero di patente si legge una cifra alla volta, quando si confronta con
   una tessera in mano: carattere a larghezza fissa, e un filo più spaziato. */
.patente {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--nero); background: var(--fondo);
  padding: 2px 7px; border-radius: 6px;
}
.riga.persona .patente { background: var(--tinta); color: var(--viola-cupo); }

/* In quali corsi è. */
.dove { color: var(--tenue); }
.dove::before { content: '·'; margin-right: 8px; color: var(--debole); }

/* Chi la patente non l'ha ancora: non è un errore, ma va visto, perché senza
   patente nella sua app non entra. */
.manca { color: var(--attesa); font-weight: 600; }

/* --------------------------------------------------- la scheda di una persona */

.scheda-persona .testa-persona {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.scheda-persona .testa-persona > div { min-width: 0; }
.scheda-persona h1 {
  font-size: 23px; letter-spacing: -.03em; margin: 0 0 2px;
  overflow-wrap: anywhere;
}
.scheda-persona .testa-persona p {
  margin: 0; font-size: 13px; color: var(--tenue); overflow-wrap: anywhere;
}
.faccione {
  width: 52px; height: 52px; flex: none; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--notte); color: var(--acido);
}

/* Il piede della scheda: i due bottoni, appiccicati in basso mentre il resto
   scorre, perché la scheda è lunga e «Salva» non deve andarsi a cercare. */
.piede-foglio {
  display: flex; gap: 10px; margin-top: 22px;
  padding-top: 16px; border-top: 1px solid var(--riga);
  position: sticky; bottom: calc(-24px - var(--sicuro-sotto));
  background: var(--carta); padding-bottom: 4px;
}
.piede-foglio .bottone { flex: 1; }
.piede-foglio .bottone.quieto { flex: 0 0 auto; min-width: 110px; }

/* --------------------------------------------- due corsi nella stessa ora
 *
 * Quando due lezioni si sovrappongono, l'ora non distingue niente: è la stessa.
 * Quindi qui il pezzo grande è il NUMERO DEL CORSO, e le due carte hanno lo
 * stesso peso — nessuna è «quella giusta», perché sceglierne una sarebbe già
 * suggerire una risposta, e la risposta sbagliata manda alla Motorizzazione gli
 * assenti di un corso col numero di un altro.
 */

.avviso-insieme {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--attesa-tenue); color: var(--attesa);
  border-radius: var(--r); padding: 13px 15px; margin: 4px 0 12px;
  font-size: 13.5px; line-height: 1.4;
}
.avviso-insieme > span { flex: none; margin-top: 1px; }
.avviso-insieme b { font-weight: 700; }

.insieme { display: grid; gap: 12px; margin-bottom: 4px; }
@media (min-width: 620px) { .insieme { grid-template-columns: 1fr 1fr; } }
/* Una guida collettiva raduna gli allievi di sei corsi: sei carte, e su due
   colonne si allungano fuori schermo. */
@media (min-width: 1000px) { .insieme { grid-template-columns: repeat(3, 1fr); } }

/* La carta è quella della lezione di oggi, ma più corta: senza il numerone
   dell'orario, che qui sarebbe identico su tutte e due. */
.oggi-blocco.insieme-carta { padding: 18px 20px 20px; margin-top: 0; }
.oggi-blocco.insieme-fatta { opacity: .62; }

/* Il numero del corso, che è l'unica cosa che le distingue. */
.insieme-corso { margin: 14px 0 2px; }
.insieme-corso > span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue);
}
.insieme-corso > b {
  display: block; font-family: Clash, 'Google Sans', system-ui, sans-serif;
  font-weight: 600; font-size: 30px; line-height: 1.05;
  letter-spacing: -.04em; color: var(--nero); overflow-wrap: anywhere; margin-top: 3px;
}
.insieme-corso > em {
  display: block; font-style: normal; font-size: 13px; margin-top: 4px;
  color: var(--tenue);
}
.insieme-corso > em .pasticca-tipo { vertical-align: 1px; }
.insieme-quando {
  font-size: 14.5px; font-weight: 600; color: var(--tenue);
  font-variant-numeric: tabular-nums; margin-top: 10px;
}

/* ------------------------------------------- modificare corso e lezioni */

/* La riga di una lezione nel calendario del corso: il tocco apre l'appello, la
   matita accanto la modifica. Due bottoni, quindi non uno dentro l'altro. */
.riga-lezione { display: flex; align-items: center; gap: 8px; }
.riga-lezione > .allievo { flex: 1; min-width: 0; }
.riga-lezione > .minuto { flex: none; }
li.fatta .riga-lezione > .minuto { opacity: .6; }

/* La persona già in elenco che si sta iscrivendo: si vede che l'iscrizione
   andrà attaccata a lei, e che nome e patente non si riscrivono. */
.scelta-persona {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 12px 13px; border-radius: var(--r-corto);
  background: var(--tinta); border: 1.5px solid var(--tinta-riga);
}
.scelta-persona > .segno {
  width: 34px; height: 34px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--carta); color: var(--viola-cupo);
}
.scelta-persona > .chi { flex: 1; min-width: 0; }
.scelta-persona > .chi b { display: block; font-weight: 600; font-size: 14.5px; }
.scelta-persona > .chi .sotto-nome { font-size: 12.5px; color: var(--tenue); }
.scelta-persona > .minuto { flex: none; background: var(--carta); border-color: transparent; }

/* Una coppia da unire, dentro un avviso. */
.coppia-doppia {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid currentColor;
}
.coppia-doppia:first-of-type { border-top: 0; }
.coppia-doppia > div { flex: 1; min-width: 160px; font-weight: 600; }
.coppia-doppia .minuto { flex: none; background: var(--carta); border-color: transparent; }

/* ============================================================ dal computer
 *
 * Fin qui l'app era un telefono messo in mezzo a uno schermo da ventisette
 * pollici: «main» larga 720 pixel, la barra di navigazione galleggiante in
 * basso, e due terzi del monitor vuoti. In segreteria si sta davanti a un
 * computer e si guardano elenchi, non si scorre col pollice.
 *
 * Da 1000 pixel in su, quindi: la barra diventa una colonna a sinistra con le
 * etichette sempre scritte, il contenuto si allarga, e le sezioni che sul
 * telefono stavano nascoste dentro le schermate salgono in colonna.
 *
 * Non è un tema a parte: è lo stesso HTML, con la barra che cambia forma. Una
 * seconda interfaccia da mantenere in parallelo divergerebbe dalla prima entro
 * un mese.
 */

.da-pc, .navbar button.da-pc { display: none; }

@media (min-width: 900px) {
  /* Lo spazio a sinistra dipende dal fatto che la colonna CI SIA, non da una
     classe che vuol dire altro. «senza-barra» la mette la schermata dell'appello
     per togliere lo spazio vuoto in fondo sul telefono: legarci il margine
     laterale faceva finire il titolo sotto la colonna, che restava lì. */
  body { padding-bottom: 0; padding-left: 0; }
  body:has(.navbar) { padding-left: 248px; }
  body:has(.barra) { padding-bottom: 0; }

  /* Sul telefono la barra dei bottoni dell'appello nasconde quella di
     navigazione: un pollice, due barre, non ci stanno. Qui c'è posto per tutte
     e due, e restare senza navigazione su uno schermo grande è solo un modo
     per doverla andare a cercare. */
  body:has(.barra) .navbar { display: flex; }

  .da-pc { display: flex; }
  .navbar button.da-pc { display: inline-flex; }

  /* La colonna a sinistra: ferma, alta quanto la finestra, con tutte le voci. */
  .navbar {
    position: fixed; top: 0; left: 0; bottom: 0; right: auto;
    width: 248px; max-width: none; margin: 0;
    flex-direction: column; justify-content: flex-start; gap: 3px;
    border-radius: 0; padding: 18px 14px;
    background: var(--carta); border: 0; border-right: 1.5px solid var(--nero);
    box-shadow: none;
    overflow-y: auto;
  }
  .navbar button {
    /* Le voci spente erano del grigio più chiaro, quello delle note. È una
       navigazione, non una didascalia: si legge di sbieco mentre si lavora. */
    color: var(--tenue);
    height: 44px; flex: 0 0 auto; width: 100%;
    justify-content: flex-start; gap: 12px; padding: 0 10px;
    border-radius: var(--r-corto);
    font-family: Clash, 'Google Sans', system-ui, sans-serif;
    font-size: 15px; font-weight: 600; letter-spacing: -.02em;
  }

  /* Le voci della colonna.
   *
   * Qui c'erano sette quadratini, uno di un colore diverso per sezione, presi
   * dai progetti di Symbiote: servivano a far andare la mano senza leggere.
   * Ma la regola del prodotto — quella del sito e quella dell'app — è che il
   * colore significa qualcosa: rosso è assente, verde è presente, viola è quel
   * che si può fare. Sette colori decorativi la rompevano, e accanto al resto
   * si vedeva che venivano da un'altra famiglia.
   *
   * Al loro posto: la stessa piastrella, ma col filo attorno invece che piena,
   * e il colore solo dove conta — la voce aperta, che si riconosce a colpo
   * d'occhio. Il posto nella colonna e la forma dell'icona fanno il resto. */
  .navbar button .icona {
    width: 24px; height: 24px; flex: none; padding: 5px; border-radius: 9px;
    box-sizing: content-box;
    border: 1.5px solid var(--riga-scura); color: var(--tenue);
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
  }
  .navbar button span { display: inline; }
  .navbar button:hover { background: var(--fondo); color: var(--nero); }
  .navbar button:hover .icona { border-color: var(--nero); color: var(--nero); }

  /* La voce aperta: piena d'inchiostro, con l'ombra acida sotto. È la stessa
     cosa che fa una tacca accesa sul sito. */
  .navbar button[aria-current="page"] {
    background: var(--nero); color: #fff; font-weight: 600;
    flex: 0 0 auto; padding: 0 10px;
    box-shadow: 0 2px 0 var(--acido);
  }
  .navbar button[aria-current="page"]:hover { background: var(--nero); color: #fff; }
  .navbar button[aria-current="page"] .icona {
    border-color: var(--acido); background: var(--acido); color: var(--nero);
  }

  /* Sulla scrivania il saluto È il titolo: la testata lo ripeterebbe. Restano
     i bottoni in alto a destra, che servono. */
  body[data-qui="scrivania"] .testata .titolo { display: none; }
  body[data-qui="scrivania"] .testata { padding-bottom: 0; }

  /* Il nome dell'app e dell'autoscuola, in testa alla colonna. Sul telefono non
     c'è: lo spazio è del pollice, e il nome lo dice la testata. */
  /* Solo il marchio, in mezzo. Il nome dell'autoscuola stava qui e non serviva
     a niente: chi guarda questo schermo sa in che autoscuola è, e ce l'ha
     comunque scritto nella riga sotto il titolo di ogni schermata. */
  .navbar-marchio {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 6px 8px 18px; margin-bottom: 10px;
    border-bottom: 1px solid var(--riga);
  }
  .navbar-marchio b {
    font-family: Clash, 'Google Sans', system-ui, sans-serif;
    font-weight: 700; font-size: 20px; letter-spacing: -.035em; color: var(--nero);
  }
  .navbar-marchio span { display: none; }
  /* Il marchio: nero su bianco, come nell'insegna. Il verde acido qui dentro
     sarebbe l'unica macchia di quel colore in tutta la pagina. */
  .navbar-segno { width: 30px; height: 30px; flex: none; display: block; }

  /* L'impaginazione.
   *
   * Il tetto era 1180 px: su un monitor da 1920 restavano ottocento pixel di
   * bianco a destra, e la pagina sembrava un foglio con le cose buttate in
   * mezzo. Il contenuto è un elenco di lavoro, non un articolo da leggere:
   * deve occupare il suo schermo.
   *
   * Il margine è un numero solo, e lo usano tutti — testata e contenuto — così
   * il titolo e la prima scheda cadono sulla stessa verticale invece di
   * sfalsarsi di qualche pixel. */
  :root {
    --margine: 40px;
    /* Quanto può diventare larga un'area che si legge per righe. Oltre, l'occhio
       deve fare un viaggio per tornare a capo e si perde la riga. */
    --misura: 1760px;
  }

  /* La pagina non ha un tetto: parte dal bordo della colonna e arriva in fondo
     allo schermo. Il tetto ce l'hanno le AREE che si leggono per righe, qui
     sotto — e ce l'hanno ancorate a sinistra, non centrate.

     Prima il tetto era sulla pagina, a milleseicento: su un monitor largo
     cinquemila pixel restavano mille e settecento pixel di bianco per lato, e
     l'app era una striscia in mezzo al niente. */
  main { max-width: none; padding: 0 var(--margine) 44px; margin: 0; }
  .testata {
    padding: 22px var(--margine) 16px; max-width: none; margin: 0;
    position: relative;
  }
  /* La riga sotto la testata: le cose hanno qualcosa a cui appendersi invece
     di galleggiare. Non attraversa tutto lo schermo, solo la colonna del
     contenuto, perché è il bordo della pagina non della finestra. */
  .testata::after {
    content: ''; position: absolute; left: var(--margine); right: var(--margine);
    bottom: 0; height: 1px; background: var(--riga);
  }
  body[data-qui="scrivania"] .testata::after { display: none; }
  .testata .titolo strong { font-size: 25px; }

  /* Su uno schermo largo una scheda sola per riga spreca il posto. */
  .griglia.larga { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                   max-width: var(--misura); }

  /* I fogli che salgono dal basso, sul computer, stanno in mezzo. */
  .velo { place-items: center; }
  .foglio {
    border-radius: 24px; max-width: 620px; max-height: 88vh;
    padding: 24px 28px 26px; animation: comparsa .2s ease;
  }
  .foglio::before { display: none; }
  @keyframes comparsa { from { opacity: 0; transform: translateY(12px) scale(.99) } }

  /* Il brindello non deve stare sopra alla barra laterale. */
  .brindello { bottom: 28px; left: calc(50% + 124px); }
}

/* Molto largo: si tiene la colonna e si dà più aria, senza allargare il testo
   all'infinito — una riga di ottanta caratteri resta il massimo leggibile. */
/* Molto largo: solo più aria ai lati. Il tetto resta quello: oltre i
   milleseicento una riga di tabella diventa un viaggio per l'occhio. */
@media (min-width: 1500px) {
  :root { --margine: 56px; }
}


/* ==================================================================== il portone
 *
 * L'entrata, la registrazione e il recupero della password. È l'unica pagina
 * che un'autoscuola vede PRIMA di fidarsi, e finché non si è entrati non c'è
 * né colonna di navigazione né testata: una carta in mezzo alla pagina, col
 * marchio sopra, sulla stessa carta a quadretti di tutto il resto.
 */

/* Lo stato sul body si chiama «al-portone» e il riquadro «portone», e NON
   possono chiamarsi uguale: la regola «.portone { max-width: 430px }» se li
   prendeva tutt'e due, il body diventava largo quattrocentotrenta pixel e
   l'entrata finiva schiacciata contro il bordo sinistro dello schermo. */
body.al-portone .testata { display: none; }
body.al-portone main {
  /* flex e non grid: una griglia con una traccia sola e «place-items: center»
     centra l'oggetto DENTRO la traccia, e la traccia resta larga quanto lui —
     la carta restava appiccicata a sinistra. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-width: none; margin: 0;
  min-height: 100vh; min-height: 100dvh;
  padding: 24px 16px 40px;
}

.portone { width: 100%; max-width: 430px; }

.marchio-portone {
  display: flex; align-items: center; gap: 13px; margin: 0 0 20px 4px;
}
.marchio-portone img { display: block; border-radius: 11px; }
/* Solo il nome. La riga «presenze del corso e PEC alla Motorizzazione» stava
   bene nella testata dell'app, ma qui sopra a un modulo da compilare è una
   didascalia che nessuno legge e che allontana il riquadro dal centro. */
.marchio-portone b {
  font-family: Clash, 'Google Sans', system-ui, sans-serif;
  font-weight: 700; font-size: 25px; letter-spacing: -.04em; line-height: 1.1;
}

.carta-portone {
  background: var(--carta); border: 1.5px solid var(--filo);
  border-radius: var(--r-grande); box-shadow: var(--alt-3);
  padding: 28px 26px 30px;
}
.carta-portone h1 { font-size: 34px; margin: 0 0 18px; }
.carta-portone h1 + .portone-dice { margin-top: -12px; }

.portone-dice {
  margin: 0 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--tenue);
}
.portone-dice b { color: var(--nero); font-weight: 600; }

/* L'aiutino sta sotto l'etichetta, non dentro il campo: il segnaposto sparisce
   appena uno scrive, cioè proprio quando servirebbe. */
.campo .aiuto {
  display: block; font-style: normal; font-size: 12.5px; line-height: 1.4;
  color: var(--debole); margin: -3px 0 7px;
}
.campo em.male {
  display: block; font-style: normal; font-size: 12.5px; font-weight: 500;
  color: var(--ass); margin-top: 7px;
}
.campo.sbagliato input { border-color: var(--ass); }
.campo.sbagliato input:focus { border-color: var(--ass); }

/* La password con l'occhio: chi la scrive al buio la sbaglia, e poi non sa
   se ha sbagliato la password o l'indirizzo. */
.con-occhio { position: relative; display: block; }
.con-occhio input { padding-right: 50px; }
.occhio {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--debole);
  display: grid; place-items: center;
}
.occhio:hover { background: var(--fondo); color: var(--nero); }
.occhio.aperto { color: var(--nero); }

.bottone.largo { width: 100%; flex: none; margin-top: 4px; }
/* Il tasto del sito: verde acido, filo scuro, ombra piena. */
.bottone.acceso { background: var(--acido); color: var(--filo); }
.bottone.acceso .icona { color: var(--filo); }

.riga-sotto {
  text-align: center; margin: 16px 0 0; font-size: 13.5px; color: var(--tenue);
}
.piede-portone {
  text-align: center; margin: 18px 0 0; font-size: 14px; color: var(--tenue);
}
.riga-sotto a, .piede-portone a { color: var(--nero); font-weight: 600; }

/* --------------------------------------------------------- il fondo che vive
 *
 * Attorno al riquadro c'è mezzo schermo vuoto, e un'entrata è il posto dove si
 * aspetta: mentre si digita una password, qualcosa che si muove piano dice che
 * il programma è vivo. Tre aloni che derivano e cinque segni del prodotto che
 * salgono: nient'altro.
 *
 * Tutto DIETRO (z-index negativo) e senza eventi: niente qui si tocca. E tutto
 * fermo se il sistema chiede meno movimento — chi ha quell'interruttore acceso
 * di solito ha un motivo serio.
 */
.sfondo-portone {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.sfondo-portone .alone {
  position: absolute; border-radius: 50%; filter: blur(70px);
  will-change: transform;
}
.sfondo-portone .alone.uno {
  width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax;
  background: rgba(79, 91, 213, .22);
  animation: deriva-uno 34s ease-in-out infinite alternate;
}
.sfondo-portone .alone.due {
  width: 40vmax; height: 40vmax; right: -10vmax; bottom: -12vmax;
  background: rgba(203, 242, 78, .34);
  animation: deriva-due 28s ease-in-out infinite alternate;
}
.sfondo-portone .alone.tre {
  width: 30vmax; height: 30vmax; right: 6vmax; top: -8vmax;
  background: rgba(14, 165, 233, .16);
  animation: deriva-tre 42s ease-in-out infinite alternate;
}
@keyframes deriva-uno { to { transform: translate3d(7vmax, 5vmax, 0) scale(1.12); } }
@keyframes deriva-due { to { transform: translate3d(-6vmax, -4vmax, 0) scale(1.08); } }
@keyframes deriva-tre { to { transform: translate3d(-5vmax, 7vmax, 0) scale(.92); } }

/* I segni: le cose che l'app fa davvero — la spunta della presenza, la busta
   della PEC, l'orologio dei quindici minuti, il foglio del modulo. Disegnati
   col filo, non pieni: sono un fondo, non un disegno da guardare. */
.sfondo-portone .segno {
  position: absolute; color: var(--filo); opacity: .09;
  animation: sali 26s linear infinite;
}
.sfondo-portone .segno:nth-child(4) { left: 11%; top: 72%; animation-duration: 30s; }
.sfondo-portone .segno:nth-child(5) { left: 26%; top: 88%; animation-duration: 38s; animation-delay: -6s; }
.sfondo-portone .segno:nth-child(6) { right: 14%; top: 64%; animation-duration: 34s; animation-delay: -12s; }
.sfondo-portone .segno:nth-child(7) { right: 28%; top: 92%; animation-duration: 44s; animation-delay: -3s; }
.sfondo-portone .segno:nth-child(8) { left: 48%; top: 96%; animation-duration: 40s; animation-delay: -20s; }
@keyframes sali {
  from { transform: translateY(0) rotate(-8deg); }
  to   { transform: translateY(-115vh) rotate(8deg); }
}

@media (max-width: 700px) {
  /* Sul telefono il riquadro riempie quasi tutto: gli aloni bastano e avanzano. */
  .sfondo-portone .segno { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sfondo-portone .alone, .sfondo-portone .segno { animation: none; }
  .sfondo-portone .segno { display: none; }
}

/* ------------------------------------------------ una domanda alla volta
 *
 * La registrazione è un percorso: sette domande, una per schermata, con la
 * barra che si riempie. Il titolo È la domanda, quindi il campo non ha
 * etichetta — ripeterla sopra al campo sarebbe dirla due volte.
 */
.avanzamento {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
}
.indietro-passo {
  flex: none; width: 34px; height: 34px; margin-left: -6px;
  border: 1.5px solid var(--riga); border-radius: 50%; background: var(--carta);
  color: var(--tenue); cursor: pointer; display: grid; place-items: center;
}
.indietro-passo:hover { border-color: var(--filo); color: var(--nero); }
.barra-passo {
  flex: 1; height: 8px; border-radius: 999px; background: var(--fondo);
  border: 1.5px solid var(--riga); overflow: hidden;
}
.barra-passo > i {
  display: block; height: 100%; background: var(--acido);
  border-right: 1.5px solid var(--filo);
  transition: width .45s cubic-bezier(.32, .72, 0, 1);
}
.conta-passo {
  flex: none; font-size: 12px; font-weight: 600; color: var(--debole);
  font-variant-numeric: tabular-nums;
}

.domanda h1 { font-size: 30px; line-height: 1.08; margin-bottom: 10px; }
.domanda .portone-dice { margin-bottom: 20px; }
/* Il campo di una domanda è grande: è l'unica cosa da fare in questa pagina. */
.domanda input { font-size: 17px; padding: 15px 16px; }
.domanda .campo { margin-bottom: 4px; }

/* Entra da destra andando avanti, da sinistra tornando: il movimento dice da
   che parte si sta andando senza bisogno di scriverlo. */
.domanda.da-destra  { animation: entra-destra .26s cubic-bezier(.32, .72, 0, 1); }
.domanda.da-sinistra { animation: entra-sinistra .26s cubic-bezier(.32, .72, 0, 1); }
@keyframes entra-destra  { from { opacity: 0; transform: translateX(22px) } }
@keyframes entra-sinistra { from { opacity: 0; transform: translateX(-22px) } }

/* --- è fatta ---------------------------------------------------------- */

.festa { text-align: center; }
.festa .bollo {
  width: 74px; height: 74px; margin: 2px auto 18px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--acido); color: var(--filo);
  border: 1.5px solid var(--filo); box-shadow: var(--alt-2);
  animation: sbuca .4s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes sbuca { from { transform: scale(.4); opacity: 0 } }
.festa h1 { font-size: 34px; }
.festa .portone-dice { text-align: left; }

/* --- il riepilogo, quando si torna dopo aver confermato la mail -------- */

.riepilogo { margin: 0 0 20px; }
.riepilogo > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--riga);
}
.riepilogo > div:last-child { border-bottom: 0; }
.riepilogo dt { font-size: 13px; color: var(--tenue); flex: none; }
.riepilogo dd {
  margin: 0; font-size: 14.5px; font-weight: 600; text-align: right;
  overflow-wrap: anywhere;
}

/* Da computer la carta non cresce: un modulo largo mille pixel con dentro due
   campi è peggio, non meglio. Cresce solo l'aria attorno. */
@media (min-width: 900px) {
  body.al-portone main { padding: 40px 24px 56px; }
  .portone { max-width: 452px; }
  .carta-portone { padding: 32px 30px 34px; }
  .carta-portone h1 { font-size: 38px; }
}

/* ------------------------------------------------- le ore di assenza */

.filtri {
  display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end;
  margin: 0 0 18px;
}

/* La tabella. Sul telefono scorre in orizzontale dentro il suo riquadro
   invece di stringersi fino a diventare illeggibile. */
.tavola {
  background: var(--carta); border-radius: var(--r); box-shadow: var(--alt-1);
  overflow: auto; margin-bottom: 18px;
}
.tavola table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tavola thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--carta); text-align: left; white-space: nowrap;
  font-weight: 600; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--debole); padding: 13px 14px 11px;
  box-shadow: inset 0 -1px 0 var(--riga);
}
.tavola th.num, .tavola td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tavola tbody td { padding: 12px 14px; border-top: 1px solid var(--riga); }
.tavola tbody tr { cursor: pointer; }
.tavola tbody tr:hover td { background: var(--fondo); }
.tavola td.chi b { display: block; font-weight: 600; letter-spacing: -.01em; }
.tavola td.chi span { display: block; font-size: 12px; color: var(--tenue); margin-top: 1px; }
.tavola td.forte { font-weight: 700; font-size: 15px; }
.tavola td.rosso { color: var(--ass); }
.tavola td.barra-col em { display: block; font-style: normal; font-size: 11.5px;
  color: var(--tenue); margin-top: 5px; white-space: nowrap; }
.tavola th.barra-col, .tavola td.barra-col { min-width: 150px; }

/* La barra è l'unica cosa che si legge da lontano: chi apre questa schermata
   non vuole leggere ventidue numeri, vuole vedere se c'è qualcuno in rosso. */
.barra-limite {
  display: block; height: 8px; border-radius: 999px;
  background: var(--riga); overflow: hidden;
}
.barra-limite > span { display: block; height: 100%; border-radius: 999px;
  background: var(--pres); transition: width .3s ease; }
tr.attenta .barra-limite > span { background: var(--attesa); }
tr.quasi   .barra-limite > span { background: #F79009; }
tr.fuori   .barra-limite > span { background: var(--ass); }
tr.fuori   td.chi b { color: var(--ass); }
tr.fuori   { background: var(--ass-tenue); }
tr.fuori:hover td { background: var(--ass-tenue); }

/* Una pasticca accanto al numero del corso: «speciale», «chiuso». */
.pasticca {
  display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--tinta); color: var(--viola-cupo); white-space: nowrap;
}
.pasticca.spento { background: var(--fondo); color: var(--debole); }

.solo-larghi { display: none; }
@media (min-width: 900px) { .solo-larghi { display: table-cell; } }

/* Una casella con la sua spiegazione accanto, non sotto. */
.spunta-riga {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13px; line-height: 1.45; color: var(--tenue); margin: 4px 0 14px;
}
.spunta-riga input[type="checkbox"] { margin-top: 1px; }
.spunta-riga b { color: var(--nero); font-weight: 600; }

/* Il cassetto «Altro» dentro una maschera: quel che ha già un valore sensato e
   si cambia di rado non deve stare in mezzo a quel che si deve scrivere. */
.altro { margin: 0 0 4px; }
.altro > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: var(--r-corto);
  background: var(--fondo); color: var(--tenue);
  font-weight: 600; font-size: 13.5px;
}
.altro > summary:hover { color: var(--nero); }
.altro[open] > summary { margin-bottom: 4px; }

/* ==================================================== il tema da computer
 *
 * Le due forme dell'app portano lo stesso vestito — quello del sito: pagina
 * bianca a quadretti, carte col filo scuro e l'ombra piena, verde acido su
 * quel che si preme, e il colore del tipo di corso dove serve a non confondere
 * due corsi. Quel che cambia da computer non è la tavolozza: sono le misure.
 *
 * In segreteria si sta seduti davanti a un monitor per ore e si guardano
 * elenchi, quindi qui le forme si squadrano, i grigi si fanno più freddi e la
 * profondità la fanno più spesso le righe sottili che le ombre: venti schede
 * in fila, ognuna sollevata di due pixel, sono una scala invece di un elenco.
 *
 * Non è un secondo foglio di stile: sono gli stessi nomi di colore, ridefiniti
 * oltre i novecento pixel. Così una schermata nuova nasce giusta in tutte e due
 * le forme senza che nessuno se ne ricordi.
 */

@media (min-width: 900px) {
  :root {
    --pagina:  #FFFFFF;        /* la pagina, con la quadrettatura sopra */
    /* La tinta: appena fredda, perché qui i grigi sono freddi. Senza, le
       pastiglie quiete e i campi spariscono sulla carta bianca. */
    --fondo:   #F5F6FA;
    --carta:   #FFFFFF;
    --tinta:   #EEF0FE;        /* il cerchietto dietro le icone */
    --tinta-riga: #DFE3FD;
    --riga:    #ECEDF1;        /* le righe sottili, che qui fanno il lavoro delle ombre */
    --riga-scura: #DCDEE5;

    --nero:    #0B0D12;
    --tenue:   #5C6272;
    --debole:  #9096A6;

    /* Il viola, virato al blu: accanto a un grigio neutro il lilla sembra
       stinto, e su un monitor grande si nota. */
    --viola:      #4F5BD5;
    --viola-cupo: #3D47B4;
    --viola-tenue:#EEF0FE;
    --acceso:     #4F5BD5;
    --blu:        #4F5BD5;

    /* Le ombre sono piene, senza sfocatura, come sul sito. Restano poche: le
       prendono le cose che si premono e i pannelli che stanno sopra, non gli
       elenchi — una pagina di tabelle con un'ombra per riga è illeggibile.
       Per il resto la carta si stacca per una riga di un pixel, come prima. */
    --filo:    #0B0D12;
    --fondo-riga: #F1F2F6;     /* la riga accesa, e il passaggio del mouse */
    --alt-1: 0 2px 0 var(--filo);
    --alt-2: 0 3px 0 var(--filo);
    --alt-3: 0 5px 0 var(--filo);
    --ombra-nav: none;

    /* Squadrato. Sul telefono le forme sono tonde perché si tengono in mano;
       su un monitor una pagina di elenchi tutta a pasticche sembra un giocattolo.
       Sono i raggi di Symbiote. */
    --r-grande: 20px;
    --r:        14px;
    --r-corto:  10px;
  }

  html, body { font-family: 'Google Sans', Geist, Inter, system-ui, -apple-system, sans-serif; }
  h2, h3 { font-family: inherit; }
  /* Il titolo grande resta in Clash, come sul sito e come sul telefono: è la
     prima cosa che si legge, ed è il punto in cui le due facce del prodotto
     si devono riconoscere. Gli elenchi restano in Geist, che a corpo piccolo
     è più sobrio. */
  h1 { font-size: 42px; letter-spacing: -.05em; font-weight: 600; }
  h2 { font-size: 16px; letter-spacing: -.02em; margin: 30px 2px 14px; }

  .scheda { border: 1px solid var(--riga); box-shadow: none; }
  .scheda.cliccabile:hover { box-shadow: var(--alt-1); transform: none;
    border-color: var(--riga-scura); }
  .scheda.cliccabile:active { transform: none; }
  .tavola { border: 1px solid var(--riga); box-shadow: none; }
  .navbar { box-shadow: none; border-right: 1px solid var(--riga); background: var(--carta); }
  /* Il grigio resta solo dove serve a scavare: il fondo di un campo, la riga
     sotto il cursore in una tabella. */
  .tavola tbody tr:hover td { background: #FAFAFC; }
  .bottoncino:hover { background: #FAFAFC; }

  /* La scheda in tinta, sul computer, è bianca con il filo d'accento: è così
     che il riferimento segna «questa è la cosa da fare adesso». */
  .scheda.prossima {
    background: var(--carta); border: 1.5px solid var(--viola);
    box-shadow: 0 0 0 4px rgba(79, 91, 213, .07);
  }

  /* Il blocco della lezione di adesso non ha più un tema a parte da computer:
     il vestito — carta tinta del colore del corso, filo scuro, ombra piena,
     bottone acido — è lo stesso nelle due forme, e sta tutto nella sezione
     «la lezione di oggi» qui sopra. Qui restano solo le misure, più giù. */

}


/* ================================================== «Oggi», da computer
 *
 * Sul telefono «Oggi» è una cosa sola: quella che comincia adesso, grande in
 * cima, e tutto il resto che scende sotto. In segreteria la domanda è un'altra
 * — come sta andando la giornata, cosa manca ancora, quand'è la prossima volta
 * — e c'è un monitor largo per rispondere a tutt'e tre in un colpo.
 *
 * Quindi: stesso HTML, due colonne. A sinistra adesso e il resto della
 * giornata, a destra le tacche della giornata e i giorni che vengono. E le
 * lezioni non sono più schede staccate ma righe dentro un pannello: dieci
 * schede su uno schermo largo sono dieci oggetti da guardare uno per uno,
 * dieci righe sono una giornata che si legge di sbieco.
 */

/* Le sezioni della giornata cominciano col loro titolo, e senza questo si
   prenderebbero l'eccezione di «h2:first-child» — quella serve al titolo che
   apre la pagina, non a quello che apre un gruppo in mezzo. Vale anche sul
   telefono: i gruppi sono gli stessi. */
.oggi-telaio section > h2 { margin-top: 28px; }

/* Il blocco di adesso va in due colonne solo quando ce n'è per tutt'e due: a
 * novecento pixel la colonna di sinistra e i margini ne portano via
 * trecentoventi, e quel che resta mandava a capo il numero del corso e
 * spezzava l'ora in due righe. Sotto i mille resta impilato come sul telefono
 * — ma col vestito nuovo, che quello sta nel blocco qui sotto.
 */
@media (min-width: 1000px) {
  .zona-adesso > .oggi-blocco:not(.insieme-carta) {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "chi tempo" "ora tempo" "arg azione";
    column-gap: 44px;
  }
  /* la testa si scioglie: i suoi due pezzi vanno in caselle diverse */
  .oggi-blocco:not(.insieme-carta) .oggi-testa { display: contents; }
  .oggi-blocco:not(.insieme-carta) .oggi-chi { grid-area: chi; }
  .oggi-blocco:not(.insieme-carta) .clessidra { grid-area: tempo; width: 100%; text-align: left; }
  .oggi-blocco:not(.insieme-carta) .oggi-orario { grid-area: ora; }
  .oggi-blocco:not(.insieme-carta) .oggi-arg { grid-area: arg; }
  .oggi-blocco:not(.insieme-carta) .oggi-bottone { grid-area: azione; align-self: end; margin-top: 0; }
  .oggi-blocco:not(.insieme-carta) .clessidra .binario { width: 100%; margin: 14px 0 0; }
}

@media (min-width: 900px) {

  /* --- quella di adesso -------------------------------------------------
   *
   * Era il blocco del telefono tirato per i fianchi: millesettecento pixel di
   * bianco con l'ora in un angolo e un bottone lungo come la finestra. Qui si
   * legge da sinistra a destra — chi e quando a sinistra, quanto manca e il
   * bottone a destra — e le due colonne finiscono dove finisce il blocco.
   *
   * Il filo scuro e l'ombra piena sono quelli del sito: è lo stesso prodotto,
   * guardato dallo stesso schermo nella stessa mattina.
   */
  /* Il numero del corso è la cosa da non sbagliare — da due corsi nella stessa
     ora passano due moduli diversi, con due numeri sopra — e stava scritto
     piccolo, grigio e tutto maiuscolo. Qui è una riga che si legge. */
  .oggi-blocco:not(.insieme-carta) .oggi-corso {
    margin-top: 9px; font-size: 15.5px; font-weight: 600; line-height: 1.3;
    letter-spacing: -.012em; text-transform: none; color: var(--nero);
  }
  .oggi-blocco:not(.insieme-carta) .oggi-orario { margin-top: 20px; }
  .oggi-blocco:not(.insieme-carta) .oggi-orario > b {
    font-family: Clash, 'Google Sans', system-ui, sans-serif;
    font-weight: 600; font-size: 62px; letter-spacing: -.05em;
  }
  .oggi-blocco:not(.insieme-carta) .oggi-orario > span {
    font-size: 21px; font-weight: 500; color: var(--tenue);
  }
  .oggi-blocco:not(.insieme-carta) .oggi-arg {
    margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--tenue);
    max-width: 68ch;
  }

  /* La grande: incolonnata col bottone, perché sono la stessa cosa detta due
     volte — quanto tempo hai, e cosa fare con quel tempo. */
  .oggi-blocco:not(.insieme-carta) .clessidra > b {
    font-family: Clash, 'Google Sans', system-ui, sans-serif;
    font-weight: 600; font-size: 46px; letter-spacing: -.045em;
  }
  .oggi-blocco:not(.insieme-carta) .clessidra > i {
    margin-top: 7px; font-size: 10.5px; letter-spacing: .1em;
  }
  .oggi-blocco:not(.insieme-carta) .clessidra .binario { height: 11px; border-radius: 999px; }
  .oggi-blocco:not(.insieme-carta) .clessidra.fuori > b { font-size: 30px; }

  /* Il bottone resta quello della base — acido, filo scuro, ombra piena — e
     qui cambia solo di misura: col mouse non serve il bersaglio da pollice. */
  .oggi-blocco .oggi-bottone {
    min-height: 56px; border-radius: 12px; font-size: 16px; letter-spacing: -.015em;
  }

  /* Due corsi nella stessa ora: l'ombra piena di una carta alta così è
     troppa, e le due carte stanno in fila. */
  .oggi-blocco.insieme-carta { box-shadow: var(--alt-2); }

  /* Col mouse, la riga che si sta per aprire si accende del colore del suo
     corso: è la stessa tinta della fascia a sinistra. */
  .carta-poi:hover { background: var(--tinta-tenue, var(--fondo-riga)); }

  /* --- il resto della giornata ------------------------------------------
   *
   * Una riga per lezione dentro un pannello solo: ora, corso, argomento, a che
   * punto è. Le colonne sono fisse, così le ore si incolonnano e la giornata
   * si legge dall'alto in basso senza inseguire i numeri da una scheda
   * all'altra.
   */
  .fila-giorno > .scheda {
    display: grid; align-items: center;
    grid-template-columns: 146px minmax(0, 1fr) auto 10px;
    grid-template-rows: auto auto;
    column-gap: 22px; row-gap: 3px;
    margin: 0; padding: 12px 18px;
    background: transparent; border: 0; border-top: 1px solid var(--riga);
    border-radius: 0; box-shadow: none;
  }
  .fila-giorno > .scheda:first-child { border-top: 0; }
  /* La fascia del tipo di corso, sul filo sinistro del pannello: la regola
     generale delle schede la mette già, qui si rimette solo il rientro, che
     quella alza a diciotto e manderebbe fuori squadra la colonna delle ore. */
  .fila-giorno > .scheda.cliccabile[class*="tinta-"] { padding-left: 14px; }
  /* Il passaggio del mouse accende la riga del colore del suo corso, non di un
     grigio qualunque: è la stessa tinta della fascia a sinistra, e dice che
     quella riga e quella fascia sono la stessa cosa. */
  .fila-giorno > .scheda.cliccabile:hover {
    background: var(--tinta-tenue, var(--fondo-riga)); box-shadow: none; transform: none;
    border-top-color: var(--riga);
  }
  .fila-giorno > .scheda.cliccabile:active { transform: none; }
  /* i tre pezzi della riga erano impilati: qui vanno in fila, e il contenitore
     di due di loro si toglie di mezzo */
  .fila-giorno .riga-fra { display: contents; }
  .fila-giorno .orario { grid-column: 1; grid-row: 1 / span 2; margin: 0; gap: 7px; }
  .fila-giorno .orario b { font-size: 21px; font-weight: 600; color: var(--nero); }
  /* il trattino fra le due ore: sopra la riga accesa il grigio chiaro sparisce */
  .fila-giorno .orario i { font-size: 14px; color: var(--tenue); }
  .fila-giorno .orario em { font-size: 15px; }
  .fila-giorno .quale { grid-column: 2; grid-row: 1; font-size: 11.5px; color: var(--nero); }
  .fila-giorno .arg {
    grid-column: 2; grid-row: 2; margin: 0; padding: 0; box-shadow: none;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 14px; color: var(--tenue);
  }
  .fila-giorno .scelte { grid-column: 3; grid-row: 1 / span 2; justify-self: end; flex-wrap: nowrap; }
  /* La punta di freccia in fondo alla riga: dice che la riga si apre. */
  .fila-giorno > .scheda::after {
    content: ''; grid-column: 4; grid-row: 1 / span 2; justify-self: end;
    width: 8px; height: 8px; transform: rotate(45deg);
    border-top: 1.6px solid var(--debole); border-right: 1.6px solid var(--debole);
  }
  .fila-giorno > .scheda:hover::after { border-color: var(--nero); }

  /* Le comunicate si ritirano di un passo: restano leggibili, ma non chiedono
     niente. Il pannello che le tiene perde l'ombra, perché non è roba da fare. */
  .fila-giorno > .scheda.fatta { opacity: .74; }
  .fila-giorno > .scheda.fatta:hover {
    opacity: 1; background: var(--tinta-tenue, var(--fondo-riga)); box-shadow: none;
  }
  .fila-giorno > .scheda.fatta .orario b { font-size: 21px; color: var(--tenue); }

  /* Le pastiglie che hanno un colore loro — «è tardi», «errore» — sulla riga
     accesa si scioglievano nella tinta: un filo le rimette in rilievo. */
  .fila-giorno > .scheda:hover .stato,
  .fila-giorno > .scheda:hover .cronometro { border-color: var(--riga-scura); }
}

/* --- le due colonne ------------------------------------------------------
 *
 * Non a mille e cento: la colonna di sinistra ne porta via duecentoquaranta e
 * i margini altri ottanta, e quel che resta non basta a tenere una giornata e
 * una spalla. Da millequattro in su ci stanno tutt'e due; sotto, tornano una
 * sopra l'altra da sole.
 */
@media (min-width: 1400px) {
  .oggi-telaio {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 30px; row-gap: 0;
    max-width: var(--misura);
  }
  /* Le caselle sono dette una per una: la giornata a sinistra, e a destra
     prima le tacche (in riga con la carta di adesso) e poi i giorni che
     vengono (in riga con l'elenco). Se un gruppo non c'è, la sua riga si
     chiude da sola. */
  .zona-adesso { grid-column: 1; grid-row: 1; min-width: 0; }
  .zona-giorno { grid-column: 1; grid-row: 2; min-width: 0; }
  .zona-fatte  { grid-column: 1; grid-row: 3; min-width: 0; }
  .zona-andamento { grid-column: 2; grid-row: 1; min-width: 0; align-self: start; }
  .oggi-lato { grid-column: 2; grid-row: 2 / span 2; min-width: 0; align-self: start; }

  /* Nella colonna stretta i titoli non sono titoli: sono etichette di
     pannello, come quelle della scrivania. */
  .zona-andamento > h2,
  .oggi-lato > section > h2 {
    display: block; margin: 2px 0 10px;
    font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--debole);
  }

  /* Nella colonna stretta il pannello dei giorni che vengono non ha margine
     sopra: ce l'ha già l'etichetta. */
  .oggi-lato .pila { margin-top: 0; }
  .oggi-lato .carta-poi .quando b { font-size: 20px; }
}

/* --- la riga su una linea sola -------------------------------------------
 *
 * Con la spalla accesa e il margine largo, da qui in su alla colonna di
 * sinistra restano mille pixel: abbastanza perché l'argomento abbia la sua
 * colonna invece di stare a capo sotto il numero del corso. Una lezione, una
 * riga: la giornata si legge dall'alto in basso senza saltare.
 */
@media (min-width: 1700px) {
  .fila-giorno > .scheda {
    grid-template-columns: 146px minmax(170px, 250px) minmax(0, 1fr) auto 10px;
    grid-template-rows: auto; row-gap: 0; padding: 13px 18px;
  }
  .fila-giorno .orario { grid-row: 1; }
  .fila-giorno .quale  { grid-column: 2; grid-row: 1; }
  .fila-giorno .arg    { grid-column: 3; grid-row: 1; }
  .fila-giorno .scelte { grid-column: 4; grid-row: 1; }
  .fila-giorno > .scheda::after { grid-column: 5; grid-row: 1; }
}

/* ------------------------------------------------ la scrivania, da computer
 *
 * L'apertura sul computer: il saluto, a sinistra le cose da fare con il loro
 * bottone, a destra quel che è successo. Due colonne perché sono due domande
 * diverse — «cosa devo fare adesso» e «cosa è successo mentre non guardavo» —
 * e su uno schermo largo stanno una accanto all'altra invece che in fila.
 */

.saluto { display: flex; align-items: center; gap: 18px; margin: 6px 0 30px; }
.saluto-segno { width: 46px; height: 46px; flex: none; display: block; border-radius: 11px; }
.saluto h1 { margin: 0; }

/* Le due colonne della Scrivania — da fare a sinistra, quel che è successo a
   destra — restano due: sono due cose diverse, non un elenco da spezzare in
   più colonne. Si allargano fino alla misura e poi si fermano. */
.due-colonne { display: grid; gap: 16px; align-items: start; max-width: var(--misura, none); }
/* Gli elenchi di righe — allievi, lezioni, invii — hanno lo stesso tetto: il
   nome sta a sinistra e lo stato a destra, e con cinquemila pixel in mezzo
   l'occhio non li tiene insieme. */
.allievi, .elenco { max-width: var(--misura, none); }
@media (min-width: 1100px) { .due-colonne { grid-template-columns: 1fr 1fr; } }

/* Una cosa da fare: cerchietto, quel che è successo, e il bottone che la chiude. */
.da-fare { display: flex; flex-direction: column; gap: 10px; }

/* Una cosa da fare. Il nome è «faccenda» e non «cosa» per un motivo preciso:
   «.cosa» era già la parte di testo dentro le carte «Poi» della home del
   telefono, e una regola globale con quel nome ci metteva sopra sfondo bianco,
   bordo e sedici pixel di padding. Un nome generico in un foglio di stile senza
   ambiti è una mina: prima o poi qualcuno lo usa di nuovo. */
.faccenda {
  display: flex; align-items: center; gap: 14px;
  background: var(--carta); border: 1px solid var(--riga);
  border-radius: var(--r-corto); padding: 15px 16px;
}
.faccenda.spicca {
  border: 1.5px solid var(--viola);
  box-shadow: 0 0 0 4px rgba(79, 91, 213, .07);
}
/* Quadratini, non cerchietti: è la forma del gestionale, e un quadrato con un
   raggio piccolo regge un segno bianco dentro meglio di un cerchio. */
.faccenda > .segno {
  width: 38px; height: 38px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--viola); color: #fff;
}
.faccenda > .segno.verde  { background: #10B981; }
.faccenda > .segno.rosso  { background: #E11D48; }
.faccenda > .segno.giallo { background: #D97706; }
.faccenda > .segno.blu    { background: #0EA5E9; }
.faccenda > .segno.ciano  { background: #06B6D4; }
.faccenda > .dice { flex: 1; min-width: 0; }
.faccenda > .dice b {
  display: block; font-weight: 500; font-size: 15.5px; letter-spacing: -.012em;
  line-height: 1.35; color: var(--nero);
}
.faccenda > .dice span { display: block; font-size: 13px; color: var(--debole); margin-top: 3px; }
.faccenda > .fatto { display: flex; align-items: center; gap: 8px; flex: none; }

/* Il bottone dentro la riga: chiaro, bordo sottile, testo nero. Nel
   riferimento è così, e su una pagina bianca un bottone pieno di colore per
   ogni riga sarebbe una fiera. */
.bottoncino {
  height: 40px; padding: 0 18px; border-radius: var(--r-corto); cursor: pointer;
  border: 1px solid var(--riga-scura); background: var(--carta); color: var(--nero);
  font: inherit; font-weight: 500; font-size: 14.5px; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.bottoncino:hover { background: var(--fondo); border-color: var(--debole); }
.bottoncino:active { transform: scale(.98); }
.bottoncino.tondo { width: 40px; padding: 0; justify-content: center; }
.bottoncino { border-radius: 9px; }
.bottoncino.forte { background: var(--viola); border-color: var(--viola); color: #fff; }
.bottoncino.forte:hover { background: var(--viola-cupo); border-color: var(--viola-cupo); }

/* Quel che è successo: una colonna sola dentro una carta, righe separate da un
   filo. Non sono cose da fare — si guardano — quindi niente bottoni pieni. */
.successo {
  background: var(--carta); border: 1px solid var(--riga);
  border-radius: var(--r-corto); overflow: hidden;
}
.successo > h2 {
  margin: 0; padding: 18px 20px 14px; font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--debole); font-weight: 600;
  display: block;
}
.fatto-riga {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; border-top: 1px solid var(--riga);
  width: 100%; background: transparent; border-left: 0; border-right: 0;
  border-bottom: 0; text-align: left; font: inherit; cursor: pointer;
}
.fatto-riga:hover { background: var(--fondo); }
.fatto-riga > .segno {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--viola); color: #fff;
}
.fatto-riga > .segno.verde  { background: #10B981; }
.fatto-riga > .segno.rosso  { background: #E11D48; }
.fatto-riga > .segno.giallo { background: #D97706; }
.fatto-riga > .segno.blu    { background: #0EA5E9; }
.fatto-riga > .segno.ciano  { background: #06B6D4; }
.fatto-riga > .dice { flex: 1; min-width: 0; }
.fatto-riga > .dice b {
  display: block; font-weight: 500; font-size: 15px; letter-spacing: -.012em;
  color: var(--nero); line-height: 1.35;
}
.fatto-riga > .dice span { display: block; font-size: 13px; color: var(--debole); margin-top: 3px; }
.fatto-riga > .freccia {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-corto);
  border: 1px solid var(--riga); display: grid; place-items: center; color: var(--tenue);
}
.fatto-riga:hover > .freccia { border-color: var(--riga-scura); color: var(--nero); }

.successo .vuoto { padding: 34px 20px; }

/* --------------------------------------------- la riga di un iscritto
 *
 * Due campi che si scrivono qui dentro, uno dietro l'altro, perché è così che
 * la segretaria li copia dal foglio delle iscrizioni. Il numero di registro
 * finisce stampato accanto al nome sul modulo che va alla Motorizzazione, e il
 * numero di patente è quello con cui l'allievo entra nella sua app.
 */
.riga-iscritto { flex-wrap: wrap; }
.riga-iscritto > .chi { flex: 1 1 150px; }
.campi-iscritto { display: flex; gap: 8px; flex: none; }

.campo-riga {
  width: 140px; min-height: 38px; padding: 8px 10px; font-size: 15px;
  text-align: center; font-variant-numeric: tabular-nums; border-radius: 10px;
}
.campo-riga.stretto { width: 82px; }
/* Chi è senza patente non entra nella sua app: il campo lo dice da solo.
   Prima qui c'era «var(--arancio-tenue)», che nel foglio non è mai esistito:
   il campo restava bianco e l'avviso non si vedeva. */
.campo-riga.manca { background: var(--attesa-tenue); border-color: var(--attesa-tenue); }

/* Sul telefono il nome si prende la prima riga e i due campi la seconda,
   INSIEME al bottone che toglie l'allievo. Con «width: 100%» sui campi il
   bottone finiva a capo da solo e ogni riga dell'elenco diventava alta il
   doppio, con mezza scheda vuota sotto. */
@media (max-width: 460px) {
  .riga-iscritto > .chi { flex: 1 1 100%; }
  .campi-iscritto { flex: 1; min-width: 0; }
  .campo-riga { flex: 1 1 0; width: auto; min-width: 0; }
  .campo-riga.stretto { flex: 0 0 88px; }
}

/* ------------------------------------------------ i colori delle tipologie
 *
 * In questa app il colore è informazione, non decorazione. Un corso di guide e
 * uno d'aula si comunicano alla Motorizzazione con moduli diversi, e un
 * conseguimento non è un aggiornamento: se le schede si somigliano, prima o poi
 * qualcuno apre quella sbagliata di fretta.
 *
 * Verde e rosso restano fuori da questa tavolozza: là dentro vogliono dire
 * presente e assente, e su un modulo che va alla Motorizzazione il colore non
 * è uno stile.
 */
:root {
  --t-aula:          #4F5BD5;   /* il viola di casa: l'aula è il caso normale */
  --t-conseguimento: #0EA5E9;   /* azzurro: la prima patente */
  --t-rinnovo:       #875CF5;   /* viola chiaro: l'aggiornamento */
  --t-guide:         #D97706;   /* ambra: si è in macchina, non in classe */

  /* Le stesse quattro, annacquate: servono dove il colore non è un segno di
     due pixel ma una superficie — il fondo della carta di adesso, le tacche
     della giornata. Un fondo pieno di quel colore, grande così, sarebbe una
     bandiera; questo è il colore che si vede con la coda dell'occhio. */
  --t-aula-tenue:          #EEF0FE;
  --t-conseguimento-tenue: #E7F5FD;
  --t-rinnovo-tenue:       #F2ECFE;
  --t-guide-tenue:         #FDF3E4;
}

/* La terza variabile è il colore che si legge SOPRA quella tinta, e non è
   bianco per tutte: bianco su azzurro fa 2,8 di contrasto e su ambra 3,2 —
   sotto il minimo per una scritta piccola. Con l'inchiostro quelle due fanno
   7,0 e 6,1; il viola dell'aula invece è scuro e vuole il bianco (5,5), che
   con l'inchiostro farebbe 3,5. Quindi: una per una, quella che si legge. */
.tinta-aula          { --tinta-tipo: var(--t-aula);          --tinta-tenue: var(--t-aula-tenue);          --tinta-su: #fff; }
.tinta-conseguimento { --tinta-tipo: var(--t-conseguimento); --tinta-tenue: var(--t-conseguimento-tenue); --tinta-su: var(--filo); }
.tinta-rinnovo       { --tinta-tipo: var(--t-rinnovo);       --tinta-tenue: var(--t-rinnovo-tenue);       --tinta-su: var(--filo); }
.tinta-guide         { --tinta-tipo: var(--t-guide);         --tinta-tenue: var(--t-guide-tenue);         --tinta-su: var(--filo); }

/* Una fascia di colore sul bordo della scheda: si vede con la coda dell'occhio
   scorrendo l'elenco, senza dover leggere la pasticca. */
.scheda.cliccabile[class*="tinta-"] {
  border-left: 4px solid var(--tinta-tipo);
  padding-left: 18px;
}

/* Un corso d'aula che contiene delle guide — ed è il caso NORMALE, perché le
   guide sono la parte pratica del corso e il calendario le attacca lì — porta
   due colori sulla fascia: sopra quello del corso, sotto l'ambra delle guide.
   Prima l'ambra non si vedeva su nessuna carta, perché la si cercava in un tipo
   di corso che in tutta l'autoscuola non esisteva. */
.scheda.cliccabile.con-guide {
  border-left-color: transparent;
  background-image: linear-gradient(var(--tinta-tipo) 0 50%, var(--t-guide) 50% 100%);
  background-repeat: no-repeat;
  background-size: 4px 100%;
  background-position: left top;
}

/* Nel calendario del corso la pasticca sta in mezzo a una riga di testo. */
.riga-lezione .pasticca-forma { padding: 1px 7px; font-size: 10.5px; vertical-align: middle; }

/* La pasticca che dice a parole quel che il colore dice a colpo d'occhio. */
.pasticca-tipo {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--tinta-su, #fff); background: var(--tinta-tipo, var(--t-aula));
}

/* Le due forme di una guida: stesso colore, peso diverso. Una guida singola e
   una collettiva si comunicano in modo diverso — dalla collettiva parte una PEC
   per obiettivo — quindi la differenza dev'essere leggibile. */
.pasticca-forma {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600;
  color: var(--t-guide); background: rgba(217, 119, 6, .12);
}

/* Una guida, nella carta di oggi, si riconosce dal fondo ambra e dalla
   pasticca «Guide»: la classe «di-guide» che tingeva di ambra anche il
   cronometro e il bottone non c'è più. Quei due sono gli unici pezzi che non
   cambiano mai colore — sono «quanto tempo hai» e «premi qui», e cambiarli
   secondo il corso voleva dire cercarli ogni volta. Le tinte le mette
   tintaLezione(), una classe sola, in natura.js. */

/* --------------------------------------- gli obiettivi di una guida collettiva
 *
 * Sono insieme in macchina ma ognuno sul suo punto dell'allegato, e da ogni
 * punto parte un modulo diverso. Il colore serve a legare l'obiettivo in
 * elenco alla pasticca accanto al nome dell'allievo: si guarda, non si legge.
 */
.obiettivi { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 0;
  list-style: none; }
.obiettivo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-corto);
  background: var(--carta); border: 1.5px solid var(--riga);
}
.obiettivo > .chi { flex: 1; min-width: 0; }
.obiettivo > .chi b { display: block; font-weight: 600; font-size: 14.5px;
  letter-spacing: -.015em; overflow-wrap: anywhere; }
.obiettivo > .chi span { display: block; font-size: 12.5px; color: var(--tenue); margin-top: 2px; }
.obiettivo > .azioni { display: flex; gap: 6px; flex: none; }

/* Sei colori che girano: più di sei obiettivi nella stessa guida non capita, e
   se capitasse ricominciare da capo è meglio che inventare tinte illeggibili. */
.segno-obiettivo, .pasticca-obiettivo {
  --c0: #4F5BD5; --c1: #0EA5E9; --c2: #D97706; --c3: #875CF5; --c4: #0891B2; --c5: #BE185D;
  --c: var(--c0);
}
[style*="--n:1"] { --c: var(--c1) !important; }
[style*="--n:2"] { --c: var(--c2) !important; }
[style*="--n:3"] { --c: var(--c3) !important; }
[style*="--n:4"] { --c: var(--c4) !important; }
[style*="--n:5"] { --c: var(--c5) !important; }

.segno-obiettivo {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--c); color: #fff; font-weight: 700; font-size: 13px;
}

/* La pasticca accanto al nome: si tocca e passa all'obiettivo successivo.
   Chi fa una guida ha le mani occupate: un tocco, non un menù. */
.pasticca-obiettivo {
  flex: none; max-width: 104px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; cursor: pointer;
  border: 0; font: inherit; font-weight: 700; font-size: 11.5px; letter-spacing: .01em;
  padding: 5px 10px; border-radius: 999px;
  background: var(--c); color: #fff;
}
.pasticca-obiettivo.vuota {
  background: var(--fondo); color: var(--debole);
  box-shadow: inset 0 0 0 1.5px var(--riga-scura);
}
.pasticca-obiettivo:active { transform: scale(.94); }
.pasticca-obiettivo:disabled { cursor: default; opacity: .7; }

/* Nell'elenco delle PEC da mandare, la stessa pastiglia numerata. */
.riga > .segno-obiettivo { margin-right: 2px; }

/* Il brindello, sul telefono, non deve coprire mezzo schermo.
 *
 * È un avviso di passaggio: una riga, il tempo di leggerla. I riepiloghi lunghi
 * — «corso 08: 19 guide · corso 09: 7 guide · …» — ci finivano dentro e sul
 * telefono diventavano un muro che spariva da solo prima che si finisse di
 * leggere. Quelli ora stanno in un foglio che resta finché non lo si chiude. */
.brindello {
  max-width: min(420px, calc(100% - 32px));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}

/* ------------------------------------------------------------------ icone */

.icona { flex: none; vertical-align: -.22em; }
.icona-sola { display: inline-grid; place-items: center; }
.vuoto .icona { color: var(--debole); margin-bottom: 12px; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary .icona { transition: transform .2s ease; }
details[open] > summary .icona { transform: rotate(180deg); }

/* ---------------------------------------------------------------- minuzie */

.piede { display: flex; gap: 8px; justify-content: center; padding: 26px 0 10px;
  font-size: 13.5px; color: var(--debole); }
.piede a { color: var(--tenue); }
.conta { font-variant-numeric: tabular-nums; color: var(--debole); font-weight: 400; }
.gira { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite;
  vertical-align: -2px; }
@keyframes gira { to { transform: rotate(360deg) } }
.nascosto { display: none !important; }
/* Nascosto agli occhi ma non alla voce: l'etichetta di un campo che si capisce
   già dal titolo del blocco, e che però a un lettore di schermo serve. */
.solo-voce {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

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

/* L'argomento di un blocco accorpato è lungo: cinque moduli per disteso fanno
   246 caratteri, e ripetuti su sei carte sono duemila pixel da scorrere per
   arrivare al pulsante. Due righe bastano a riconoscere la lezione; l'elenco
   intero resta nella schermata dell'appello, dove c'è spazio per leggerlo. */
.oggi-arg, .arg {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Le caselle del programma, come si vedono nella schermata «Controlla e manda»:
   le stesse del modulo, nello stesso ordine, perché il confronto col foglio sia
   immediato. Quelle spuntate scure, le altre smorzate. */
.caselle-modulo { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.caselle-modulo > span { font-size: 13.5px; color: var(--debole); white-space: nowrap; }
.caselle-modulo > span.spuntata { color: var(--nero); font-weight: 600; }
.nessuna-casella { margin-top: 4px; font-size: 12.5px; color: var(--attesa); }

/* Il numero della lezione, quello della prima colonna del calendario: in
   segreteria le lezioni si chiamano così, «la sette non l'abbiamo mandata». */
.n-lezione {
  display: inline-block; min-width: 20px; padding: 1px 5px; border-radius: 6px;
  background: var(--tinta); color: var(--viola-cupo);
  font-size: 11.5px; font-weight: 700; text-align: center; vertical-align: 1px;
}