/* Tema «slide»: sito degli studenti, visore e schermo proiettato. Stesso aspetto delle slide:
   fondo bianco, blu #1f4e79, banda blu a sinistra come nelle aperture. Nessuna animazione. */
:root {
  --fondo: #ffffff; --pannello: #ffffff; --pannello2: #f3f5f8;
  --testo: #1f2a37; --sec: #4a5768; --eti: #4a5768;
  --acc: #1f4e79; --acc-testo: #ffffff; --link: #1f4e79;
  --avviso: #9a4a00; --ok: #1d6b3a;
  --linea: #d5dbe3; --bordo: #6b7a8c; --fuoco: #c25e00;
  --pulsante-sopra: #e8eef5; --campo-fondo: #ffffff;
  --avviso-fondo: #1f2a37; --avviso-testo: #ffffff; --evidenza: #ffe58a;
  --raggio: 4px; --banda: 14px;
  --es-fondo: #fbfcfd; --es-fondo-docente: #fff7ee;
  --fondo-slide-area: #eef1f5; --fondo-intero: #ffffff; --ombra-slide: 0 1px 4px rgba(0,0,0,.28);
}

/* intestazione con la banda blu delle aperture */
.testata {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 24px 12px calc(24px + var(--banda));
  background: var(--pannello2); box-shadow: inset var(--banda) 0 0 var(--acc);
  border-bottom: 2px solid #999;
}
.testata .marchio { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: #4a5768; font-weight: 600; }
.testata h1 { margin: 0; font-size: 24px; color: var(--acc); }
.testata .spazio { flex: 1; }
.testata .chi { font-size: 14px; color: var(--sec); }
.piede { padding: 10px 24px; border-top: 1px solid #999; font-style: italic; font-size: 14px; color: #444; }

/* ---------- accesso ---------- */
.accesso-pagina { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.accesso {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 40px max(24px, 8vw) 40px calc(max(24px, 8vw) + 22px);
  background: #f3f5f8; box-shadow: inset 22px 0 0 var(--acc);
}
.accesso .sopra { font-size: clamp(16px, 2.2vw, 22px); letter-spacing: 3px; text-transform: uppercase; color: #4a5768; }
.accesso h1 { font-size: clamp(34px, 5.4vw, 54px); color: var(--acc); margin: 6px 0 18px; }
.accesso p { font-size: 18px; max-width: 40em; }
.accesso form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.accesso label { display: block; font-weight: 600; margin-bottom: 6px; }
.accesso input { width: min(420px, 80vw); font-size: 18px; }
.accesso .errore { color: #a01818; font-weight: 600; min-height: 1.5em; margin-top: 12px; }
.accesso .aiuto { font-size: 15px; color: var(--sec); margin-top: 18px; }

/* ---------- home ---------- */
.home { max-width: 1100px; margin: 0 auto; padding: 24px 24px 48px; }
.home h2 { font-size: 30px; text-decoration: underline; margin: 6px 0 14px; color: var(--testo); }
.home .intro { font-size: 18px; color: var(--sec); margin: 0 0 20px; }
.unita-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.unita-scheda {
  background: #f3f5f8; box-shadow: inset 10px 0 0 var(--acc); border: 1px solid var(--linea);
  padding: 16px 18px 16px 28px; display: flex; flex-direction: column; gap: 8px;
}
.unita-scheda .sopra { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: #4a5768; font-weight: 600; }
.unita-scheda h3 { margin: 0; font-size: 22px; color: var(--acc); }
.unita-scheda h3 a { color: inherit; text-decoration: none; }
.unita-scheda h3 a:hover { text-decoration: underline; }
.unita-scheda ol { margin: 4px 0 0; padding-left: 0; list-style: none; font-size: 16px; }
.unita-scheda li { margin: 0 0 4px; }
.unita-scheda li a { color: var(--testo); text-decoration: none; display: flex; gap: 8px; padding: 4px 0; }
.unita-scheda li a:hover { color: var(--acc); text-decoration: underline; }
.unita-scheda li .num { color: var(--acc); font-weight: 600; min-width: 3.4em; }
.unita-scheda .conta { font-size: 14px; color: var(--sec); }
.vuoto { padding: 24px; background: #f3f5f8; border-left: 10px solid var(--acc); font-size: 18px; }

/* visore dello studente */
.visore-testa { background: var(--pannello2); box-shadow: inset var(--banda) 0 0 var(--acc); border-bottom: 2px solid #999; }
.visore-testa h1 { color: var(--acc); }
.indice h2.eti { color: var(--eti); }
.home #t-es { margin-top: 40px; }