:root {
  --sfondo: #f6f5f2; --carta: #ffffff; --testo: #1f1f1f; --tenue: #5c5c5c; --linea: #d9d6cf;
  --accento: #1d4e89; --accento-chiaro: #e7eef7; --ok: #1e6b3a; --ok-chiaro: #e5f3e9;
  --errore: #9b1c1c; --errore-chiaro: #fbeaea; --avviso-chiaro: #fdf4dc;
}
@media (prefers-color-scheme: dark) {
  :root { --sfondo: #16171a; --carta: #1f2125; --testo: #ececec; --tenue: #a8a8a8; --linea: #383b41;
    --accento: #8fb4e6; --accento-chiaro: #1d2a3a; --ok: #7fd19b; --ok-chiaro: #17301f;
    --errore: #f19a9a; --errore-chiaro: #3a1b1b; --avviso-chiaro: #3a3218; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sfondo); color: var(--testo);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accento); }
.interno { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.testata { background: var(--carta); border-bottom: 3px solid var(--accento); }
.fascia-loghi { background: #fff; border-bottom: 1px solid #e4e1da; }
.fascia-loghi .interno { display: flex; justify-content: center; align-items: center; gap: 48px; padding-top: 18px; padding-bottom: 18px; }
.fascia-loghi img { height: 84px; width: auto; display: block; }
.barra .interno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  padding-top: 16px; padding-bottom: 16px; }
.marchio { display: flex; align-items: baseline; gap: 12px; font-weight: 700; font-size: 1.35rem; text-decoration: none;
  color: var(--testo); letter-spacing: .01em; }
.marchio-corso { font-weight: 500; font-size: 1rem; color: var(--tenue); border-left: 1px solid var(--linea); padding-left: 12px; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.menu a { text-decoration: none; }
.evento-intestazione { text-align: center; margin: 4px 0 26px; }
.evento-intestazione h1 { font-size: 1.9rem; margin-bottom: 6px; }
.evento-sottotitolo { font-size: 1.1rem; margin: 0 0 6px; }
.campo-password { position: relative; display: block; max-width: 420px; }
.campo-password input { padding-right: 96px; }
button.mostra-password { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0;
  color: var(--accento); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; padding: 6px 8px; }
.in-linea { display: inline; margin: 0; }
button.collegamento { background: none; border: 0; padding: 0; color: var(--accento); font: inherit; cursor: pointer; }
.contenuto { padding-top: 28px; padding-bottom: 48px; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 16px; }
h2 { font-size: 1.2rem; margin: 28px 0 10px; }
.riquadro { background: var(--carta); border: 1px solid var(--linea); border-radius: 8px; padding: 18px 20px; margin: 0 0 16px; }
.nota { color: var(--tenue); font-size: .92rem; }
.avviso { border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; background: var(--avviso-chiaro); }
.avviso.success { background: var(--ok-chiaro); }
.avviso.error, .errori { background: var(--errore-chiaro); color: var(--errore); }
.errori { border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
form p { margin: 0 0 14px; }
label { display: block; font-weight: 600; margin-bottom: 4px; }
input[type=email], input[type=password], input[type=text] { width: 100%; max-width: 420px; padding: 10px 12px; font: inherit;
  border: 1px solid var(--linea); border-radius: 6px; background: var(--carta); color: var(--testo); }
.pulsante, button[type=submit]:not(.collegamento) { display: inline-block; background: var(--accento); color: #fff; border: 0;
  border-radius: 6px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.helptext { display: block; color: var(--tenue); font-size: .88rem; margin-top: 4px; }
ul.errorlist { list-style: none; padding: 0; margin: 4px 0; color: var(--errore); }
table.elenco { width: 100%; border-collapse: collapse; background: var(--carta); }
table.elenco th, table.elenco td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.elenco th { font-size: .85rem; color: var(--tenue); font-weight: 600; }
.lezione-passata td { color: var(--tenue); }
.etichetta { display: inline-block; font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: var(--accento-chiaro); color: var(--accento); }
.materiali { list-style: none; padding: 0; margin: 0; }
.materiali.riquadro { padding: 2px 20px; }
.materiali li:last-child { border-bottom: 0; }
.riquadro > :first-child { margin-top: 0; }
.riquadro > :last-child { margin-bottom: 0; }
.materiali li { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.condizioni { font-size: .88rem; color: var(--tenue); border-left: 3px solid var(--linea); padding-left: 12px; }
.qr { background: #fff; padding: 12px; display: inline-block; border-radius: 8px; }
.codici { font-family: ui-monospace, Menlo, monospace; columns: 2; }
.informativa p { margin: 0 0 10px; }
.piede { border-top: 1px solid var(--linea); color: var(--tenue); font-size: .88rem; padding: 18px 0 32px; }
.registro.aperto { border: 2px solid var(--accento); }
button.grande { font-size: 1.15rem; padding: 14px 26px; }
.ok { color: var(--ok); font-weight: 600; }
.modulo h2 { margin-top: 22px; }
.modulo h2:first-of-type { margin-top: 4px; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; }
legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
label.scelta { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0 0 8px; }
label.scelta input { margin-top: 5px; flex: none; }
textarea { width: 100%; max-width: 640px; padding: 10px 12px; font: inherit; border: 1px solid var(--linea); border-radius: 6px;
  background: var(--carta); color: var(--testo); }
ul.colonne { columns: 2 240px; margin: 0; padding-left: 18px; }
table.scheda th { width: 34%; }
.sintesi strong { font-size: 1.3rem; }
@media (max-width: 600px) { body { font-size: 16px; } .fascia-loghi img { height: 56px; } .fascia-loghi .interno { gap: 28px; padding-top: 12px; padding-bottom: 12px; } .marchio { font-size: 1.2rem; } .marchio-corso { font-size: .9rem; } table.elenco th, table.elenco td { padding: 8px 5px; } table.completa { font-size: .88rem; } table.elenco:not(.completa) th:nth-child(4), table.elenco:not(.completa) td:nth-child(4) { display: none; } }
.nowrap { white-space: nowrap; }
.riquadro.evidenza { border-left: 5px solid var(--accento); }
.avvisi-recenti p { margin: 0 0 10px; }
.avviso-bacheca h2 { margin-top: 0; }
a.pulsante.grande-link { font-size: 1.1rem; padding: 14px 22px; display: block; text-align: center; max-width: 420px; }
input.copiabile { font-size: .85rem; }
/* attendance register and teachers' area (shared with the panel) */
.pannello-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; margin: 12px 0 20px; }
.pannello-box { background: var(--carta); border: 1px solid var(--linea); border-radius: 8px; padding: 12px 16px; }
.pannello-box h2 { margin-top: 0; }
.pannello-box.aperto { border: 2px solid var(--ok); background: var(--ok-chiaro); }
form.in-riga { display: flex; gap: 8px; flex-wrap: wrap; }
input.minuti { width: 4.5em; padding: 6px; font: inherit; }
input[type=time], input[type=number], input[type=url], input[type=file] { font: inherit; padding: 8px; border: 1px solid var(--linea); border-radius: 6px; background: var(--carta); color: var(--testo); }
input[type=url] { width: 100%; max-width: 420px; }
input[type=file] { max-width: 100%; }
.pannello-box button, .registro-pulsanti button, form.in-riga button { display: inline-block; background: var(--accento); color: #fff; border: 0;
  border-radius: 6px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; }
button.secondario, button[type=submit].secondario, form.in-riga button.secondario { background: var(--carta); color: var(--testo);
  border: 1px solid var(--linea); font-weight: 500; }
.contenuto table.registro { width: 100%; border-collapse: collapse; background: var(--carta); }
.contenuto table.registro th, .contenuto table.registro td { padding: 8px; border-bottom: 1px solid var(--linea); text-align: left; }
.contenuto table.registro tr.stato-incompleta td { background: var(--avviso-chiaro); }
.contenuto table.registro tr.confermata td:last-child { background: var(--ok-chiaro); }
.registro-pulsanti { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.solo-telefono { display: none; }
.help { color: var(--tenue); font-size: .9rem; }
.contenuto .submit-row { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) {
  .solo-telefono { display: block; }
  .contenuto table.registro, .contenuto table.registro tbody, .contenuto table.registro tr, .contenuto table.registro td { display: block; width: 100%; }
  .contenuto table.registro thead { display: none; }
  .contenuto table.registro tr { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 8px; margin: 0 0 12px; padding: 8px 12px; }
  .contenuto table.registro td.nome { order: -1; }
  .contenuto table.registro td { border: 0; padding: 4px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .contenuto table.registro td::before { content: attr(data-etichetta); font-weight: 600; color: var(--tenue); font-size: .85rem; }
  .contenuto table.registro td.nome { font-weight: 600; font-size: 1.05rem; }
  .contenuto table.registro td.nome::before { content: none; }
  .contenuto table.registro td input[type=time], .contenuto table.registro td input[type=text] { width: 9em; max-width: 60%; }
  .contenuto table.registro td input[type=checkbox] { width: 26px; height: 26px; }
  .contenuto table.registro tr.confermata { border-left: 6px solid var(--ok); }
  .contenuto table.registro tr.confermata td:last-child { background: none; }
  .contenuto table.registro tr.stato-incompleta { border-left: 6px solid #d6a000; }
  .contenuto table.registro tr.stato-incompleta td { background: none; }
  .registro-pulsanti { flex-direction: column; }
  .registro-pulsanti button, .pannello-box form button, .pannello-box input[type=submit] { width: 100%; padding: 14px; }
}
/* final exam: one question per screen, big touch targets */
.esame-barra { position: sticky; top: 0; z-index: 5; background: var(--sfondo); padding: 8px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--linea); margin-bottom: 14px; }
.esame-tempo { font-weight: 700; font-variant-numeric: tabular-nums; }
.esame-tempo.poco { color: var(--errore); }
.esame-domanda { font-size: 1.12rem; font-weight: 600; margin: 0 0 16px; }
.opzioni { display: grid; gap: 10px; margin: 0 0 18px; }
label.opzione { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; margin: 0; padding: 14px; border: 2px solid var(--linea); border-radius: 10px; background: var(--carta); cursor: pointer; min-height: 52px; }
label.opzione input { margin-top: 4px; width: 22px; height: 22px; flex: none; }
label.opzione .lettera { font-weight: 700; color: var(--accento); flex: none; }
label.opzione:has(input:checked) { border-color: var(--accento); background: var(--accento-chiaro); }
.esame-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.esame-nav button { flex: 1 1 140px; padding: 14px; }
.esame-stato-salvataggio { min-height: 1.4em; font-size: .9rem; color: var(--tenue); }
.esame-stato-salvataggio.errore { color: var(--errore); font-weight: 600; }
.mappa-domande { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin: 18px 0; }
.mappa-domande button { padding: 10px 0; text-align: center; font-weight: 600; }
.mappa-domande button.secondario.data { background: var(--accento-chiaro); border-color: var(--accento); color: var(--accento); font-weight: 700; }
.mappa-domande button.attuale { outline: 3px solid var(--accento); }
ol.riepilogo { padding-left: 0; list-style: none; }
ol.riepilogo li { padding: 10px 0; border-bottom: 1px solid var(--linea); display: flex; gap: 10px; align-items: baseline; }
ol.riepilogo li .num { font-weight: 700; min-width: 2.2em; }
ol.riepilogo li .mancante { color: var(--errore); font-weight: 600; }
.esito { font-size: 1.3rem; font-weight: 700; }

.locandina { margin: 20px 0; text-align: center; }
.locandina img { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto 12px; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15); background: #fff; }