:root {
  --fondo: #FFFFFF;
  --fondo-tenue: #F4F7FD;
  --griglia: #EDF1FA;
  --bordo: #DCE3F2;
  --biro: #1B3FA8;
  --biro-scuro: #142F7C;
  --testo: #16181D;
  --secondario: #5B6270;
  --presente: #1E7A54;
  --assente: #D23B33;
  --giustificato: #B5761A;
  /* Un appello mai compilato non e' un errore come un'assenza: e' un vuoto.
     Ardesia, non rosso, perche' il rosso qui vuol dire gia' un'altra cosa. */
  --mancante: #55606F;
  --mancante-fondo: #F1F3F6;
  --raggio: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: var(--testo);
  background: var(--fondo);
}

/* Solo sulla demo: chi la prova deve sapere che i dati non sono veri
   e che non deve inserirne di veri. */
.fascia-demo {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #FFFFFF;
  background: var(--giustificato);
}

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.intestazione {
  padding: 18px 0 15px;
  border-bottom: 2px solid var(--biro);
}

/* Titolo e modulo condividono la stessa colonna: su schermo largo il titolo
   deve stare sopra al modulo, non staccato all'estrema sinistra. */
.intestazione > * {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 20px;
}

.intestazione .etichetta {
  margin-bottom: 8px;
}

.intestazione h1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  /* I nomi dei corsi hanno un trattino in mezzo: senza questo, su schermo
     stretto il trattino resta solo su una riga tutta sua. */
  text-wrap: balance;
}

.etichetta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--biro);
}

.foglio {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  min-height: calc(100vh - 96px);
}

.spiega {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--secondario);
}

label {
  display: block;
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondario);
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="date"],
input[type="tel"] {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  font: inherit;
  color: var(--testo);
  background: var(--fondo);
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
}

input:focus {
  outline: 2px solid var(--biro);
  outline-offset: 1px;
  border-color: var(--biro);
}

button[type="submit"] {
  width: 100%;
  min-height: 52px;
  margin-top: 24px;
  font: inherit;
  font-weight: 600;
  color: var(--fondo);
  background: var(--biro);
  border: 1.5px solid var(--biro);
  border-radius: var(--raggio);
  cursor: pointer;
}

button[type="submit"]:hover { background: var(--biro-scuro); }

.errore {
  margin: 18px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--assente);
  background: #FDF1F0;
  border: 1.5px solid var(--assente);
  border-radius: var(--raggio);
}

.riga-uscita {
  margin: 24px 0 0;
  font-size: 14px;
}

.riga-uscita a { color: var(--biro); }

/* --- Dashboard ---------------------------------------------------------- */

.giorno {
  margin: 0 0 18px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--secondario);
}

.lezione {
  display: block;
  margin-bottom: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  background: var(--fondo);
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
}

.lezione:hover { border-color: var(--biro); }

.lezione-ora {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--biro);
}

.lezione-nome {
  margin: 2px 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.lezione-sotto {
  font-size: 13px;
  color: var(--secondario);
}

.stato-lezione {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
}

.stato-da-fare   { color: var(--biro);         background: var(--fondo-tenue); }
.stato-in-corso  { color: var(--giustificato); background: #FBF4E7; }
.stato-fatta     { color: var(--presente);     background: #EAF5F0; }
.stato-annullata { color: var(--secondario);   background: var(--mancante-fondo); }

.stato-mancante {
  color: var(--mancante);
  background: var(--mancante-fondo);
  border: 1px dashed var(--mancante);
}

/* Il tratteggio dice «qui manca qualcosa» meglio di qualunque parola. */
.lezione-mancante {
  background: var(--mancante-fondo);
  border-style: dashed;
  border-color: #B9C1CC;
}

.lezione-mancante:hover { border-color: var(--mancante); }
.lezione-mancante .lezione-ora { color: var(--mancante); }

.sezione-spiega {
  margin: -6px 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--secondario);
}

.vuoto {
  padding: 24px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--secondario);
}

.sezione {
  margin: 28px 0 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--secondario);
}

/* --- Appello ------------------------------------------------------------ */

.contatore {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  background: var(--fondo-tenue);
  border-bottom: 1.5px solid var(--bordo);
}

.contatore-numero {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--biro);
}

.contatore-testo { font-size: 13px; font-weight: 500; color: var(--secondario); }

.bottone-secondario {
  margin-left: auto;
  min-height: 40px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--biro);
  background: var(--fondo);
  border: 1.5px solid var(--biro);
  border-radius: var(--raggio);
  cursor: pointer;
}

.elenco { margin: 0; padding: 0; list-style: none; }

.studente {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--bordo);
}

.studente-nome {
  flex-grow: 1;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.segni { display: flex; gap: 6px; flex-shrink: 0; }

.segno {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #79839B;
  background: var(--fondo);
  border: 1.5px solid #C7D0E4;
  border-radius: 6px;
  cursor: pointer;
}

.segno[aria-pressed="true"] { color: var(--fondo); }
.segno-presente[aria-pressed="true"]     { background: var(--presente);     border-color: var(--presente); }
.segno-assente[aria-pressed="true"]      { background: var(--assente);      border-color: var(--assente); }
.segno-giustificato[aria-pressed="true"] { background: var(--giustificato); border-color: var(--giustificato); }

.segno:disabled { opacity: 0.55; cursor: default; }

.piede {
  position: sticky;
  bottom: 0;
  padding: 13px 20px 18px;
  background: var(--fondo);
  border-top: 1.5px solid var(--bordo);
}

.piede button[type="submit"] { margin-top: 0; }
.piede button[type="submit"]:disabled {
  color: #79839B;
  background: var(--fondo-tenue);
  border-color: var(--bordo);
  cursor: default;
}

.piede-nota {
  margin: 9px 0 0;
  text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--secondario);
}

.avviso-rete {
  margin: 0;
  padding: 10px 20px;
  font-size: 13px;
  color: var(--assente);
  background: #FDF1F0;
  border-bottom: 1.5px solid var(--assente);
}

.sola-lettura {
  margin: 0;
  padding: 12px 20px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--secondario);
  background: var(--fondo-tenue);
  border-bottom: 1.5px solid var(--bordo);
}

.recupero {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bordo);
}

.recupero .bottone-secondario { margin-left: 0; width: 100%; }

#pannello-recupero { margin-top: 14px; }

.risultati { margin: 10px 0 0; padding: 0; list-style: none; }

.risultati li { margin-bottom: 6px; }

.risultati button {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: var(--testo);
  background: var(--fondo);
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
  cursor: pointer;
}

.risultati button:hover { border-color: var(--biro); color: var(--biro); }

.risultati .nulla {
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--secondario);
}

/* --- Intestazione della lezione: sede, giorno, orario ------------------- */

.contesto {
  padding: 14px 20px 15px;
  border-bottom: 1px solid var(--bordo);
}

.contesto-sede {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--testo);
}

.contesto-quando {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.contesto-giorno {
  font-size: 14px;
  font-weight: 500;
  color: var(--secondario);
}

.contesto-ora {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--biro);
  padding: 2px 7px;
  background: var(--fondo-tenue);
  border-radius: 4px;
}

/* --- Studenti in prova: staccati in fondo e riconoscibili --------------- */

.separatore {
  margin-top: 14px;
  padding: 14px 20px 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--giustificato);
  background: #FCF7EF;
  border-top: 2px solid var(--giustificato);
}

.studente-in-prova {
  background: #FCF7EF;
  border-bottom-color: #EADFCB;
}

.studente-in-prova .studente-nome { font-weight: 600; }

.studente-in-prova:last-child { border-bottom: 2px solid var(--giustificato); }

/* --- Conto alla rovescia fino al blocco di mezzanotte ------------------- */

.scadenza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 9px 12px;
  background: var(--fondo-tenue);
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
}

.scadenza-etichetta {
  font-size: 13px;
  font-weight: 500;
  color: var(--secondario);
}

.scadenza-valore {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--biro);
  font-variant-numeric: tabular-nums;
}

.scadenza-vicina {
  background: #FBF4E7;
  border-color: var(--giustificato);
}

.scadenza-vicina .scadenza-valore { color: var(--giustificato); }

.scadenza-critica {
  background: #FDF1F0;
  border-color: var(--assente);
}

.scadenza-critica .scadenza-etichetta,
.scadenza-critica .scadenza-valore { color: var(--assente); }

/* --- Intestazione con profilo e uscita in alto a destra ----------------- */

.intestazione-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

/* Il titolo va a capo da solo, a tutta larghezza: se dividesse la riga col
   profilo, un nome di corso lungo si spezzerebbe in quattro righe strette. */
.intestazione-larga > * { max-width: 1100px; }

.utente {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 2px;
}

.utente-avatar {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fondo);
  background: var(--biro);
  border-radius: 50%;
}

.utente-testo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.utente-nome {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--testo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.utente-ruolo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondario);
}

.utente-esci {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 13px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--secondario);
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
}

.utente-esci:hover { color: var(--assente); border-color: var(--assente); }

/* Su telefono il nome resta, il ruolo sparisce: lo spazio non basta per tre cose. */
@media (max-width: 430px) {
  .utente { gap: 8px; }
  .utente-avatar { width: 34px; height: 34px; font-size: 12px; }
  .utente-nome { font-size: 13.5px; max-width: 108px; }
  .utente-ruolo { display: none; }
}

/* --- Dashboard: lista e calendario ------------------------------------- */

.dashboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.colonna-calendario { display: none; }

/* Il calendario compare quando c'e' spazio: su telefono ruberebbe la scena
   alla lista, che e' la cosa per cui si apre il gestionale. */
@media (min-width: 980px) {
  .dashboard { grid-template-columns: minmax(0, 1fr) 400px; }
  .colonna-calendario { display: block; }
}

.giorno a { color: var(--biro); }

/* --- Calendario --------------------------------------------------------- */

.calendario {
  padding: 20px;
  background: var(--fondo);
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
}

.calendario-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.calendario-mese {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.calendario-freccia {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  color: var(--biro);
  border: 1.5px solid var(--bordo);
  border-radius: 6px;
}

.calendario-freccia:hover { border-color: var(--biro); }

.calendario-griglia {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendario-iniziale {
  padding-bottom: 8px;
  text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--secondario);
}

.calendario-giorno {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 1;
  text-decoration: none;
  color: var(--testo);
  border: 1.5px solid transparent;
  border-radius: 6px;
}

.calendario-giorno:hover { background: var(--fondo-tenue); }

.calendario-numero {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.calendario-conteggio {
  min-width: 18px;
  padding: 0 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--biro);
  background: var(--fondo-tenue);
  border-radius: 3px;
}

.calendario-giorno.fuori-mese { color: #A9B2C0; }
.calendario-giorno.fuori-mese .calendario-conteggio { color: #A9B2C0; background: #F7F9FC; }

.calendario-giorno.ha-mancanti .calendario-conteggio {
  color: var(--fondo);
  background: var(--mancante);
}

.calendario-giorno.oggi {
  border-color: var(--biro);
  font-weight: 700;
}

.calendario-giorno.scelto {
  color: var(--fondo);
  background: var(--biro);
  border-color: var(--biro);
}

.calendario-giorno.scelto:hover { background: var(--biro-scuro); }
.calendario-giorno.scelto .calendario-conteggio { color: var(--biro); background: var(--fondo); }
.calendario-giorno.scelto.ha-mancanti .calendario-conteggio { color: var(--fondo); background: var(--mancante); }

.calendario-legenda {
  margin: 14px 0 0;
  padding: 12px 0 0;
  list-style: none;
  border-top: 1px solid var(--bordo);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  color: var(--secondario);
}

.calendario-legenda li { display: flex; align-items: center; gap: 8px; }

.pallino {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 3px;
}

.pallino-oggi     { border: 1.5px solid var(--biro); border-radius: 4px; }
.pallino-lezioni  { background: var(--fondo-tenue); border: 1px solid var(--bordo); }
.pallino-mancanti { background: var(--mancante); }

/* --- Chi tiene il corso -------------------------------------------------- */

.lezione-docenti {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--biro);
}

.lezione-mancante .lezione-docenti { color: var(--mancante); }

.contesto-docenti {
  margin: 7px 0 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--biro);
}

/* --- Registro delle azioni ---------------------------------------------- */

.registro {
  margin-top: 20px;
  padding: 20px;
  background: var(--fondo);
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
}

.registro-titolo {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.registro-spiega {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--secondario);
}

.registro-elenco {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bordo);
}

.registro-voce {
  padding: 10px 0 10px 11px;
  border-bottom: 1px solid var(--bordo);
  border-left: 3px solid var(--presente);
}

/* Le correzioni sono quelle che l'amministratore deve poter notare:
   una prima scrittura e' routine, un valore cambiato no. */
.registro-correzione { border-left-color: var(--giustificato); }

.registro-riga {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--testo);
}

.registro-chi { font-weight: 600; }

.registro-ruolo {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--biro);
  background: var(--fondo-tenue);
  border-radius: 3px;
  vertical-align: 1px;
}

.registro-sotto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--secondario);
}

.registro-dove {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registro-quando {
  flex-shrink: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.registro-totale {
  margin: 12px 0 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--secondario);
}

/* --- Schede anagrafiche e ricerca ------------------------------------- */

/* Stessa griglia della dashboard: elenco a sinistra, riquadri a destra. */
.scheda {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

@media (min-width: 980px) {
  .scheda { grid-template-columns: minmax(0, 1fr) 400px; }
  .scheda-sola { grid-template-columns: minmax(0, 720px); }
}

.scheda-sommario {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--secondario);
}

.scheda-eta { font-weight: 500; }

.scheda-stato {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mancante);
  background: var(--mancante-fondo);
  border-radius: 4px;
  padding: 3px 8px;
}

.pannello {
  margin-bottom: 24px;
  padding: 18px 18px 20px;
  background: var(--fondo);
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
}

.pannello-titolo {
  margin: 0 0 4px;
  font-size: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--biro);
}

.pannello-sottotitolo {
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--secondario);
}

.pannello-spiega {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--secondario);
}

.voce-corso {
  padding: 12px 0;
  border-bottom: 1px solid var(--griglia);
}

.voce-corso:last-child { border-bottom: 0; padding-bottom: 0; }
.voce-corso-chiusa { opacity: 0.6; }

.voce-corso-nome {
  margin: 0 0 2px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.voce-corso-sotto,
.voce-corso-docenti {
  margin: 0;
  font-size: 13.5px;
  color: var(--secondario);
}

.voce-corso-orario {
  margin: 4px 0 3px;
  font-size: 13px;
  color: var(--biro);
}

/* --- Storico --------------------------------------------------------- */

.storico { margin: 0; padding: 0; list-style: none; }

.storico-voce { border-bottom: 1px solid var(--griglia); }
.storico-voce:last-child { border-bottom: 0; }

.storico-riga {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 0;
  color: inherit;
  text-decoration: none;
}

.storico-riga:hover .storico-corso { color: var(--biro); }

.storico-giorno {
  font-size: 12.5px;
  color: var(--secondario);
}

.storico-corso {
  font-size: 14.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storico-prova {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--giustificato);
}

.storico-esito {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
}

.esito-presente     { color: var(--presente);     background: #EAF5F0; }
.esito-assente      { color: var(--assente);      background: #FBEDEC; }
.esito-giustificato { color: var(--giustificato); background: #FBF4E7; }

/* --- Riquadri dei numeri --------------------------------------------- */

.numero-grande {
  margin: 10px 0 0;
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--biro);
}

.numero-didascalia {
  margin: 4px 0 16px;
  font-size: 13px;
  color: var(--secondario);
}

.numeri {
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--griglia);
  font-size: 14px;
  color: var(--secondario);
}

.numeri li { margin-bottom: 6px; }

.numeri-valore {
  display: inline-block;
  min-width: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--testo);
}

.numeri-nota {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--secondario);
}

/* --- Dati anagrafici -------------------------------------------------- */

.dati { margin: 6px 0 0; }

.dati dt {
  margin-top: 12px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondario);
}

.dati dd {
  margin: 2px 0 0;
  font-size: 15px;
}

.dati-vuoto { color: #A9B2C0; }

.note {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
}

/* --- Ricerca ---------------------------------------------------------- */

.ricerca { margin: 0 0 22px; }

.ricerca-etichetta {
  display: block;
  margin-bottom: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--biro);
}

.ricerca-riga { display: flex; gap: 8px; }
.ricerca-riga input[type="text"] { flex: 1; min-width: 0; }

/* Il selettore va tenuto piu' forte di `button[type="submit"]`, che mette i
   bottoni a tutta larghezza: qui il bottone deve stare in riga col campo. */
.ricerca-riga .ricerca-invio {
  width: auto;
  min-width: 96px;
  margin-top: 0;
  height: 48px;
  font: inherit;
  font-weight: 600;
  color: var(--fondo);
  background: var(--biro);
  border: 0;
  border-radius: var(--raggio);
  cursor: pointer;
}

.ricerca-riga .ricerca-invio:hover { background: var(--biro-scuro); }

.risultati-elenco { margin: 8px 0 0; padding: 0; list-style: none; }

.risultato {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--griglia);
  color: inherit;
  text-decoration: none;
}

.risultato:hover .risultato-nome { color: var(--biro); }
.risultato-fermo { cursor: default; }

.risultato-nome {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.risultato-sotto {
  display: block;
  font-size: 13px;
  color: var(--secondario);
}

.risultato-marca { color: var(--mancante); font-weight: 600; }

/* --- Collegamenti alle schede ----------------------------------------- */

/* Nell'appello il nome diventa cliccabile, ma non deve sembrare un bottone:
   i bottoni qui accanto sono quelli che segnano la presenza. */
a.studente-nome { color: inherit; text-decoration: none; }
a.studente-nome:hover { color: var(--biro); text-decoration: underline; }

.registro-voce { position: relative; }

/* Tutta la voce del registro apre la scheda dello studente. */
.registro-apri { position: absolute; inset: 0; }
.registro-voce:hover { background: var(--fondo-tenue); }

.visivamente-nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Il motivo per cui una pagina non si e' aperta. */
.avviso {
  margin: 0 0 20px;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--giustificato);
  background: #FBF4E7;
  border-left: 3px solid var(--giustificato);
  border-radius: 0 var(--raggio) var(--raggio) 0;
}

/* --- Moduli di modifica ------------------------------------------------ */

.bottone-modifica {
  margin-left: auto;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--biro);
  text-decoration: none;
  background: var(--fondo);
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
}

.bottone-modifica:hover { border-color: var(--biro); background: var(--fondo-tenue); }

.campo { margin-bottom: 4px; }

.campo label { margin-top: 14px; }

.campi-affiancati {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 16px;
}

@media (min-width: 560px) {
  .campi-affiancati { grid-template-columns: 1fr 1fr; }
}

textarea,
select {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--testo);
  background: var(--fondo);
  border: 1.5px solid var(--bordo);
  border-radius: var(--raggio);
}

select { height: 48px; }

textarea:focus,
select:focus {
  outline: 2px solid var(--biro);
  outline-offset: 1px;
  border-color: var(--biro);
}

select:disabled { color: var(--secondario); background: var(--fondo-tenue); }

.campo-sbagliato input,
.campo-sbagliato textarea,
.campo-sbagliato select { border-color: var(--assente); }

.campo-errore {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--assente);
}

.campo-aiuto {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--secondario);
}

/* L'avvertenza sui dati sanitari non è un suggerimento fra gli altri. */
.campo-attenzione {
  padding: 9px 11px;
  color: var(--giustificato);
  background: #FBF4E7;
  border-radius: var(--raggio);
}

.azioni-modulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 40px;
}

.azioni-modulo button[type="submit"] { width: auto; min-width: 200px; margin-top: 0; }

.bottone-annulla {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--secondario);
  text-decoration: none;
}

.bottone-annulla:hover { color: var(--assente); text-decoration: underline; }

.riga-azione { margin-top: 8px; }
.riga-azione .bottone-secondario { margin-left: 0; }

/* Una data non ha bisogno di tutta la riga: farla larga come gli altri campi
   la fa sembrare un campo di testo libero. */
input[type="date"] { max-width: 220px; }