/* Stile del gestionale — ispirato a Windows 10/11 (Fluent): superfici chiare, pulsanti con
   bordo/ombra leggera invece di pillole colorate piatte, palette blu neutra invece del viola. */

:root {
  --colore-primario: #0067C0;
  --colore-primario-chiaro: #2886DA;
  --colore-primario-scuro: #004E8C;
  --colore-crema: #F3F3F3;
  --colore-testo: #1A1A1A;
  --colore-testo-chiaro: #616161;
  --colore-sfondo: #ffffff;
  --colore-sfondo-alt: #F3F3F3;
  --colore-bordo: #D9D9D9;
  --colore-ok: #107C10;
  --colore-ok-sfondo: #DFF6DD;
  --colore-errore: #C42B1C;
  --colore-errore-sfondo: #FDE7E9;
  --colore-oro: #9D5D00;
  --colore-oro-sfondo: #FFF4CE;
  --colore-teal: #005E92;
  --colore-teal-sfondo: #E3F1FB;
  --colore-rosa: #C42B7A;
  --colore-rosa-sfondo: #FCE7F3;

  --gradiente-primario: var(--colore-primario);
  --gradiente-scuro: #FAFAFA;
  --gradiente-crema: #FAFAFA;

  --ombra-sm: 0 1px 2px rgba(0,0,0,.08);
  --ombra: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --ombra-lg: 0 4px 14px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.08);
  --ombra-hover: 0 6px 18px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.10);

  --raggio: 6px;
  --raggio-pillola: 4px;
  --easing: cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; color: var(--colore-testo); background: var(--colore-sfondo-alt); line-height: 1.5; }
h1, h2 { font-family: 'Segoe UI', Arial, sans-serif; color: var(--colore-testo); margin: 0 0 16px; font-weight: 600; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.05rem; margin-top: 0; font-weight: 600; color: var(--colore-testo); }
a { color: var(--colore-primario); text-decoration: none; transition: color .15s var(--easing); }
a:hover { text-decoration: underline; }
code { background: var(--colore-sfondo-alt); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }

/* Barra superiore: stile "titlebar" Windows — sfondo chiaro, bordo sottile, niente gradienti vistosi */
.barra-superiore { background: #fff; box-shadow: 0 1px 0 var(--colore-bordo); position: sticky; top: 0; z-index: 100; }
.fascia-marchio {
  background: #fff;
  color: var(--colore-testo);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 10px 24px;
  min-height: 76px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--colore-bordo);
  position: relative;
}
.marchio-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.8rem; white-space: nowrap; color: var(--colore-testo); }
.marchio-logo { height: 56px; width: auto; }
.utente-corrente { color: var(--colore-testo-chiaro); font-size: 0.88rem; white-space: nowrap; font-weight: 400; }
.utente-corrente a { color: var(--colore-primario); text-decoration: underline; }

.nav-principale {
  background: #FAFAFA;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--colore-bordo);
}
.nav-principale a {
  color: var(--colore-testo);
  padding: 7px 12px;
  border-radius: var(--raggio-pillola);
  font-size: 0.82rem;
  font-weight: 400;
  background: transparent;
  white-space: nowrap;
  transition: background .12s var(--easing);
}
.nav-principale a:hover { background: var(--colore-teal-sfondo); text-decoration: none; }
.nav-principale a:active { background: #d5e9f7; }
.nav-principale a.nav-icona, .nav-principale a.nav-icona:hover, .nav-principale a.nav-icona:active { padding: 0; background: none; }
.nav-principale a.nav-oro { color: var(--colore-oro); }
.nav-principale a.nav-oro:hover { background: var(--colore-oro-sfondo); }
.nav-principale a.nav-teal { color: var(--colore-teal); }
.nav-principale a.nav-teal:hover { background: var(--colore-teal-sfondo); }
.nav-principale a.nav-rosso { color: var(--colore-errore); }
.nav-principale a.nav-rosso:hover { background: var(--colore-errore-sfondo); }

/* Categorie del menu con sottomenu a tendina: si aprono al passaggio del mouse (desktop) o al
   tocco/click (la classe .aperto è gestita da assets/js/nav.js, necessaria su tablet/telefono). */
.nav-categoria { position: relative; }
.nav-categoria-titolo { font-family: inherit; background: none; border: none; padding: 0; cursor: pointer; }
.nav-sottomenu {
  display: none; flex-direction: column; position: absolute; top: 100%; left: 0; z-index: 50;
  background: #fff; border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-lg); padding: 6px; min-width: 220px; margin-top: 10px;
}
.nav-categoria:hover .nav-sottomenu, .nav-categoria.aperto .nav-sottomenu { display: flex; }
.nav-sottomenu a { padding: 8px 12px; border-radius: 4px; color: var(--colore-testo); font-size: 0.85rem; }
.nav-sottomenu a:hover { background: var(--colore-sfondo-alt); text-decoration: none; }

/* Icone 3D del menu principale: pulsanti "a rilievo" (bordo chiaro sopra, ombra sotto, come un
   vero tasto premibile) con il nome della voce che compare in sovraimpressione al passaggio del
   mouse. Su tablet/telefono, dove l'hover non esiste, l'etichetta resta sempre visibile accanto
   all'icona invece che come fumetto (vedi la regola in fondo al file per gli schermi piccoli). */
.nav-icona { position: relative; display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; }
.nav-icona-simbolo {
  display: flex; align-items: center; justify-content: center;
  width: 126px; height: 126px; border-radius: 28px; font-size: 4.1rem; line-height: 1;
  background: linear-gradient(180deg, #ffffff, #e7e9ec);
  border: 1px solid #c7cbd1;
  box-shadow: 0 5px 0 #aeb3ba, 0 8px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .1s var(--easing), box-shadow .1s var(--easing);
}
.nav-icona:hover .nav-icona-simbolo { transform: translateY(-2px); box-shadow: 0 7px 0 #aeb3ba, 0 12px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.9); }
.nav-icona:active .nav-icona-simbolo, .nav-categoria.aperto .nav-icona-simbolo {
  transform: translateY(4px); box-shadow: 0 0 0 #aeb3ba, inset 0 3px 8px rgba(0,0,0,.25);
}
.nav-icona.nav-oro .nav-icona-simbolo { background: linear-gradient(180deg, #fff8e8, var(--colore-oro-sfondo)); border-color: #e6c568; }
.nav-icona.nav-teal .nav-icona-simbolo { background: linear-gradient(180deg, #eaf7fc, var(--colore-teal-sfondo)); border-color: #8fc6e0; }
.nav-icona.nav-rosso .nav-icona-simbolo { background: linear-gradient(180deg, #fdeeee, var(--colore-errore-sfondo)); border-color: #e69a94; }

.nav-etichetta {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(2px);
  background: #262626; color: #fff; padding: 5px 11px; border-radius: 5px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap; box-shadow: var(--ombra-lg);
  opacity: 0; visibility: hidden; pointer-events: none; margin-top: 6px; z-index: 60;
  transition: opacity .12s var(--easing), transform .12s var(--easing);
}
.nav-etichetta::before {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: #262626;
}
.nav-icona:hover .nav-etichetta { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.contenuto { max-width: 1160px; margin: 0 auto; padding: 24px; }

.piede-pagina { max-width: 1160px; margin: 0 auto; padding: 16px 24px 24px; }
.piede-pagina p { margin: 0; font-size: 0.75rem; color: var(--colore-testo-chiaro); text-align: center; }

/* Messaggi flash */
.messaggio { padding: 10px 14px; border-radius: var(--raggio); margin-bottom: 16px; font-weight: 400; border: 1px solid transparent; }
.messaggio-ok { background: var(--colore-ok-sfondo); color: var(--colore-ok); border-color: #b9e6b6; }
.messaggio-errore { background: var(--colore-errore-sfondo); color: var(--colore-errore); border-color: #f3c6c1; }

/* Tabelle */
.tabella-dati { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); margin-bottom: 24px; border: 1px solid var(--colore-bordo); }
.tabella-dati th, .tabella-dati td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--colore-bordo); }
.tabella-dati th { background: #FAFAFA; color: var(--colore-testo); font-weight: 600; font-size: 0.82rem; }
.tabella-dati tbody tr { transition: background .1s var(--easing); }
.tabella-dati tbody tr:hover { background: #F5F9FD; }
.tabella-dati tr:last-child td { border-bottom: none; }
.colonna-azioni { white-space: nowrap; display: flex; gap: 10px; }
.cella-vuota { text-align: center; color: var(--colore-testo-chiaro); padding: 24px; }

.cella-avatar { width: 44px; }
.avatar-iniziali {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--colore-primario); color: #fff;
  font-weight: 600; font-size: 0.76rem;
}
.avatar-foto { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }

/* Form */
.modulo, .scheda { background: #fff; padding: 20px 24px; border-radius: var(--raggio); box-shadow: var(--ombra); margin-bottom: 24px; border: 1px solid var(--colore-bordo); }
.modulo fieldset { border: 1px solid var(--colore-bordo); border-radius: var(--raggio); margin-bottom: 16px; padding: 12px 16px 16px; }
.modulo legend { padding: 0 8px; font-weight: 600; color: var(--colore-testo); font-size: 0.85rem; }
.modulo label, .modulo-inline label { display: block; margin-bottom: 12px; font-size: 0.9rem; color: var(--colore-testo); }
.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
input, select, textarea {
  width: 100%; padding: 8px 10px; margin-top: 4px; border: 1px solid #B3B3B3;
  border-radius: 4px; font-size: 0.95rem; font-family: inherit; color: var(--colore-testo);
  background: #fff; transition: border-color .1s var(--easing);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--colore-primario); box-shadow: 0 0 0 1px var(--colore-primario); }
.etichetta-checkbox { display: flex; align-items: center; gap: 8px; }
.etichetta-checkbox input { width: auto; }
.suggerimento-campo { font-weight: normal; color: var(--colore-testo-chiaro); font-size: 0.85em; }

/* Pulsanti: superficie chiara con bordo e ombra leggera (primario pieno, secondario a contorno),
   come i pulsanti di Windows 10/11 — niente pillole né maiuscolo. */
.pulsante, button[type="submit"], button {
  display: inline-block; background: var(--colore-primario); color: #fff; border: 1px solid var(--colore-primario);
  padding: 8px 18px; border-radius: var(--raggio-pillola); font-size: 0.86rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: background .12s var(--easing), box-shadow .12s var(--easing), border-color .12s var(--easing);
}
.pulsante:hover, button[type="submit"]:hover, button:hover { background: var(--colore-primario-scuro); border-color: var(--colore-primario-scuro); text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.pulsante:active, button[type="submit"]:active, button:active { background: #004578; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pulsante-secondario { background: #fff; color: var(--colore-testo); border: 1px solid #B3B3B3; box-shadow: var(--ombra-sm); }
.pulsante-secondario:hover { background: #F5F5F5; color: var(--colore-testo); border-color: #999; box-shadow: var(--ombra); }
.pulsante-pericolo { background: var(--colore-errore); border-color: var(--colore-errore); }
.pulsante-pericolo:hover { background: #a3231a; border-color: #a3231a; }
.pulsante-testo { background: none; border: none; color: var(--colore-primario); cursor: pointer; padding: 0; font-size: 0.85rem; text-decoration: underline; font-weight: 400; box-shadow: none; }
.pulsante-testo:hover { box-shadow: none; }

.barra-azioni { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.filtri { display: flex; gap: 2px; background: #fff; padding: 3px; border-radius: var(--raggio); box-shadow: var(--ombra-sm); border: 1px solid var(--colore-bordo); }
.filtri a { padding: 6px 14px; border-radius: 4px; color: var(--colore-testo-chiaro); font-weight: 400; font-size: 0.85rem; transition: background .12s var(--easing), color .12s var(--easing); }
.filtri a.filtro-attivo { background: var(--colore-primario); color: #fff; }
.form-ricerca { display: flex; gap: 8px; flex: 1; max-width: 420px; }
.conteggio-risultati { color: var(--colore-testo-chiaro); margin-bottom: 12px; font-weight: 400; }

/* Etichette di stato */
.etichetta-stato { padding: 3px 10px; border-radius: var(--raggio-pillola); font-size: 0.78rem; font-weight: 600; border: 1px solid transparent; }
.etichetta-attivo { background: var(--colore-ok-sfondo); color: var(--colore-ok); border-color: #b9e6b6; }
.etichetta-scaduto { background: var(--colore-errore-sfondo); color: var(--colore-errore); border-color: #f3c6c1; }
.etichetta-avviso { background: var(--colore-oro-sfondo); color: var(--colore-oro); margin-left: 4px; font-weight: 600; border-color: #f0dea3; }
.riga-disabilitata { opacity: 0.55; }

/* Statistiche (dashboard) */
.statistica {
  background: #fff; border-radius: var(--raggio); box-shadow: var(--ombra); padding: 18px; text-align: center;
  border: 1px solid var(--colore-bordo); border-top: 3px solid var(--colore-primario);
}
.statistica .numero {
  display: block; font-size: 2rem; font-weight: 700; font-family: 'Segoe UI', Arial, sans-serif;
  color: var(--colore-primario);
}
.statistica .etichetta { color: var(--colore-testo-chiaro); font-size: 0.78rem; font-weight: 600; }

/* Scheda allievo */
.lista-dati { display: grid; grid-template-columns: 180px 1fr; row-gap: 8px; }
.lista-dati dt { color: var(--colore-testo-chiaro); font-weight: 600; font-size: 0.85rem; }
.lista-dati dd { margin: 0; }
.lista-semplice { list-style: none; padding: 0; margin: 0 0 12px; }
.lista-semplice li { padding: 8px 0; border-bottom: 1px solid var(--colore-bordo); display: flex; justify-content: space-between; align-items: center; }

/* Autocompletamento comune */
.suggerimenti-comune { position: absolute; z-index: 20; background: #fff; border: 1px solid var(--colore-bordo); border-radius: 4px; box-shadow: var(--ombra-lg); max-height: 220px; overflow-y: auto; width: 100%; }
.suggerimento { padding: 8px 12px; cursor: pointer; transition: background .12s var(--easing); }
.suggerimento:hover { background: var(--colore-sfondo-alt); }

/* Check-in */
.intestazione-checkin { text-align: center; margin-bottom: 8px; }
.logo-checkin { max-height: 90px; margin: 0 auto 12px; display: block; }
.area-checkin { text-align: center; padding: 40px 24px; }
.rotore-immagini { position: relative; width: 100%; max-width: 520px; height: 300px; margin: 24px auto 0; border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra-lg); background: #fff; }
.rotore-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.rotore-slide-attiva { opacity: 1; }
.area-checkin input { max-width: 320px; margin: 16px auto 0; text-align: center; font-size: 1.2rem; padding: 14px; }
.risultato-checkin { margin-top: 24px; min-height: 90px; font-size: 1.6rem; font-weight: 700; border-radius: var(--raggio); padding: 20px; transition: all .2s var(--easing); }
.risultato-checkin:empty { padding: 0; }
.risultato-ammesso { background: var(--colore-ok-sfondo); color: var(--colore-ok); box-shadow: var(--ombra); }
.risultato-negato { background: var(--colore-errore-sfondo); color: var(--colore-errore); box-shadow: var(--ombra); }
.risultato-in-corso { color: var(--colore-testo-chiaro); font-weight: normal; box-shadow: none; }
.risultato-dettaglio { font-size: 1rem; font-weight: normal; display: block; margin-top: 6px; }
.avviso-documenti { margin-top: 0; font-size: 1.1rem; font-weight: 700; border-radius: var(--raggio); }
.avviso-documenti-visibile { margin-top: 16px; padding: 16px 20px; background: var(--colore-oro-sfondo); color: #7a5a00; border: 2px solid var(--colore-oro); box-shadow: var(--ombra); }

/* Tesserino allievo */
.tesserino { background: #fff; max-width: 340px; margin: 0 auto; padding: 32px; border-radius: var(--raggio); box-shadow: var(--ombra-lg); text-align: center; border: 1px solid var(--colore-bordo); border-top: 4px solid var(--colore-primario); }
.tesserino-intestazione { font-weight: 600; color: var(--colore-primario); margin-bottom: 16px; }
.tesserino-nome { font-size: 1.2rem; font-weight: 600; margin-top: 12px; }
.tesserino-cf { color: var(--colore-testo-chiaro); font-size: 0.9rem; margin-top: 4px; }
.tesserino-codice { margin-top: 12px; font-size: 0.95rem; }
@media print {
  .barra-superiore, .no-stampa { display: none !important; }
  .contenuto { padding: 0; }
  .tesserino { box-shadow: none; }
  .planning-settimanale { box-shadow: none; }
  .planning-giorno { break-inside: avoid; }
}

/* Planning settimanale */
.planning-settimanale { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--colore-bordo); border: 1px solid var(--colore-bordo); border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); margin-bottom: 24px; }
.planning-giorno { background: #fff; padding: 10px; min-height: 100px; }
.planning-giorno h2 { font-size: 0.85rem; text-align: center; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--colore-bordo); }
.planning-lezione { padding: 6px 0; border-bottom: 1px dashed var(--colore-bordo); font-size: 0.82rem; }
.planning-lezione:last-child { border-bottom: none; }
.planning-orario { font-weight: 600; color: var(--colore-primario); }
.planning-corso { font-weight: 600; }
.planning-dettaglio { color: var(--colore-testo-chiaro); font-size: 0.78rem; }
@media (max-width: 900px) {
  .planning-settimanale { grid-template-columns: repeat(2, 1fr); }
}
@media print {
  .planning-settimanale { grid-template-columns: repeat(7, 1fr); font-size: 0.75rem; }
}

/* Chat scuola<->allievo/famiglia */
.conversazione-chat { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.bolla-chat { max-width: 78%; padding: 10px 14px; border-radius: var(--raggio); box-shadow: var(--ombra-sm); border: 1px solid var(--colore-bordo); }
.bolla-scuola { align-self: flex-start; background: #FAFAFA; }
.bolla-titolare { align-self: flex-end; background: var(--colore-teal-sfondo); }
.bolla-testo { white-space: pre-wrap; word-break: break-word; }
.bolla-allegato-immagine { display: block; max-width: 100%; max-height: 220px; border-radius: 4px; margin-top: 4px; }
.bolla-allegato-documento { display: inline-block; margin-top: 4px; padding: 6px 10px; background: rgba(255,255,255,.7); border-radius: 4px; }
.bolla-meta { font-size: 0.75rem; color: var(--colore-testo-chiaro); margin-top: 4px; }
.pagina-chat .contenuto { max-width: 480px; margin: 0 auto; }
.pagina-chat #modulo-chat { margin-top: 12px; align-items: flex-end; }
.pagina-chat #modulo-chat textarea { flex: 1; resize: none; }

/* Pagina di login */
.pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #E9EDF1; }
.riquadro-login { background: #fff; padding: 36px 32px; border-radius: var(--raggio); box-shadow: var(--ombra-lg); width: 100%; max-width: 360px; border: 1px solid var(--colore-bordo); border-top: 4px solid var(--colore-primario); }
.riquadro-login h1 { font-size: 1.3rem; }
.riquadro-login .sottotitolo { color: var(--colore-testo-chiaro); margin-bottom: 16px; font-size: 0.85rem; font-weight: 600; }
.riquadro-login button { width: 100%; margin-top: 8px; }
.riquadro-login .nota-proprietaria { margin: 20px 0 0; font-size: 0.7rem; color: var(--colore-testo-chiaro); text-align: center; line-height: 1.4; }

@media (max-width: 700px) {
  .griglia-2 { grid-template-columns: 1fr; }
  .lista-dati { grid-template-columns: 140px 1fr; }
  .fascia-marchio { flex-direction: column; align-items: flex-start; min-height: 0; }
  .marchio-centro { position: static; transform: none; white-space: normal; font-size: 1.1rem; gap: 8px; }
  .marchio-logo { height: 36px; }
  /* Su schermi piccoli non c'è il passaggio del mouse: l'etichetta resta sempre visibile sotto
     l'icona (come le app sulla schermata home) invece che comparire come fumetto, e le icone più
     grandi vanno a capo su più righe invece di restare tutte sulla stessa riga. */
  .nav-icona-simbolo { width: 88px; height: 88px; font-size: 2.9rem; border-radius: 20px; }
  .nav-etichetta {
    position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    background: none; color: var(--colore-testo); box-shadow: none; padding: 4px 0 0;
    font-size: 0.78rem; font-weight: 400; text-align: center; white-space: normal; max-width: 88px;
  }
  .nav-etichetta::before { display: none; }
  .nav-sottomenu { position: static; box-shadow: none; border: none; margin: 4px 0; padding: 0; width: 100%; }
}