/* Stile del gestionale — "Platino + Gioiello": sfondo platino metallico chiaro, header a effetto
   cromato con riflesso (gradiente a più fermate su base zaffiro, non un semplice due-toni), tessere
   statistiche a gradiente pieno che alternano zaffiro/smeraldo/oro/notte. Sostituisce la precedente
   palette "energico" derivata dal logo (azzurro/arancio/verde chiaro) su richiesta esplicita
   dell'utente — vedi feedback_gestionale_stile.md per la cronologia delle scelte di stile. Le
   tonalità "di testo su sfondo chiaro" (--colore-primario/--colore-ok/--colore-oro) restano
   scurite per i contesti dove il testo è ancora colorato su bianco (link, numeri delle tessere in
   contesti non a gradiente); le varianti "vive" (--colore-*-vivo) sono il tono pieno gioiello,
   usate per sfondi/gradienti con testo bianco. */

:root {
  --colore-primario: #0A3A82;
  --colore-primario-chiaro: #0F52BA;
  --colore-primario-scuro: #082C63;
  --colore-crema: #EEF0F3;
  --colore-testo: #1A1A1A;
  --colore-testo-chiaro: #616161;
  --colore-sfondo: #ffffff;
  --colore-sfondo-alt: #E8EAEE;
  --colore-bordo: #C7CDD6;
  --colore-ok: #00694A;
  --colore-ok-sfondo: #DFF7EC;
  --colore-errore: #9B111E;
  --colore-errore-sfondo: #FBE4E6;
  --colore-oro: #8C6D0F;
  --colore-oro-sfondo: #FFF6DC;
  --colore-teal: #0A3A82;
  --colore-teal-sfondo: #E3EBFA;
  --colore-rosa: #C42B7A;
  --colore-rosa-sfondo: #FCE7F3;

  /* Colori "vivi" (toni gioiello pieni) per sfondi/gradienti con testo bianco. */
  --colore-turchese-vivo: #009B6B;
  --colore-turchese-scuro: #00432E;
  --colore-arancio-vivo: #C9A227;
  --colore-arancio-scuro: #5E4A0A;
  --colore-notte: #1B2430;
  --colore-notte-scuro: #0C1219;

  /* Effetto cromato: gradiente a più fermate chiaro/scuro alternate su base zaffiro — simula un
     riflesso lucido su una superficie metallica, invece del semplice gradiente a due tinte. */
  --gradiente-primario: linear-gradient(120deg, #082C63 0%, #0F52BA 28%, #6E96E0 48%, #0F52BA 68%, #082C63 100%);
  --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: 999px;
  --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: gradiente pieno azzurro→turchese, testo bianco — l'elemento che dà il tono
   "energico" a tutta la pagina, non solo un accento. */
.barra-superiore { background: var(--gradiente-primario); box-shadow: 0 2px 8px rgba(8,44,99,.3); position: sticky; top: 0; z-index: 100; }
.fascia-marchio {
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 10px 24px;
  min-height: 76px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.2);
  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: #fff; }
.marchio-logo { height: 56px; width: auto; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.utente-corrente { color: rgba(255,255,255,.85); font-size: 0.88rem; white-space: nowrap; font-weight: 400; }
.utente-corrente a { color: #fff; 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 del menu principale: tessere a gradiente pieno colorato (una tinta per categoria), non più
   pulsanti bianco/grigio a rilievo — il nome della voce 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(160deg, var(--colore-primario-chiaro), var(--colore-primario-scuro));
  border: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
  transition: transform .12s var(--easing), box-shadow .12s var(--easing);
}
.nav-icona:hover .nav-icona-simbolo { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.26); }
.nav-icona:active .nav-icona-simbolo, .nav-categoria.aperto .nav-icona-simbolo {
  transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,.2);
}
.nav-icona.nav-oro .nav-icona-simbolo { background: linear-gradient(160deg, var(--colore-arancio-vivo), var(--colore-arancio-scuro)); }
.nav-icona.nav-teal .nav-icona-simbolo { background: linear-gradient(160deg, var(--colore-turchese-vivo), var(--colore-turchese-scuro)); }
.nav-icona.nav-rosso .nav-icona-simbolo { background: linear-gradient(160deg, var(--colore-errore), #7A1F14); }

/* L'emoji 👤 (Utenti) rende come una sagoma scura poco leggibile sul rosso — a differenza delle
   altre icone del menu (colorate), va forzata bianca con un filtro invece che con "color" (che le
   emoji ignorano). Il filtro va sull'elemento interno .icona-forza-bianco (solo l'emoji), non su
   .nav-icona-simbolo: applicato lì sbiancherebbe anche lo sfondo a gradiente della tessera. */
.icona-forza-bianco { display: inline-block; filter: brightness(0) invert(1); }

/* Icona "Balla & Snella": un vero logo (immagine), non un emoji — stessa tessera a gradiente delle
   altre voci di menu, con l'immagine centrata e ridimensionata invece del carattere emoji. */
.nav-icona-immagine { width: 76px; height: 76px; object-fit: contain; }

.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; }

/* Menu fisso in basso, stile "app" — nascosto di default (solo desktop): diventa visibile dentro
   il @media per schermi piccoli più sotto, stesso principio del menu in basso già usato per l'area
   famiglia e il portale insegnanti. */
.menu-inferiore-staff { display: none; }
.solo-mobile-dashboard { display: none; }

.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; }
.messaggio-avviso { background: var(--colore-oro-sfondo); color: var(--colore-oro); border-color: #ffd9a8; }

/* 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; }
.colonna-azioni-icone { font-size: 1.15rem; gap: 8px; }
.colonna-azioni-icone a { text-decoration: none; }
/* Specificità: la regola base ".pulsante, button[type=submit], button" (gestionale.css più sotto)
   include il selettore "button[type=submit]", stessa specificità di ".colonna-azioni-icone button"
   ma dichiarata dopo nel foglio — a parità di specificità vince l'ultima, quindi qui serve
   ripetere "button[type=submit]" per essere sicuri di vincere sempre, non solo "button". */
.colonna-azioni-icone button, .colonna-azioni-icone button[type="submit"] {
    background: none; border: none; box-shadow: none; padding: 0; margin: 0;
    font-size: inherit; font-weight: 400; color: inherit; text-decoration: none; cursor: pointer;
}
.colonna-azioni-icone button:hover, .colonna-azioni-icone button[type="submit"]:hover { box-shadow: none; transform: none; background: none; }
.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(--gradiente-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); scroll-margin-top: 70px; }
.modulo fieldset { border: 1px solid var(--colore-bordo); border-radius: var(--raggio); margin-bottom: 16px; padding: 12px 16px 16px; }
/* Riquadro genitore/tutore quando l'allievo in compilazione risulta minorenne: evidenziato finché
   manca un genitore/tutore collegato, per guidare l'operatore prima del tentativo di salvataggio. */
.riquadro-obbligatorio-minorenne { border: 2px solid var(--colore-oro); background: var(--colore-oro-sfondo); }
.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; }

/* Tessere numeriche della dashboard (pages/dashboard.php): a differenza di .griglia-2, qui le 4
   colonne servono fisse a piena larghezza ma vanno comunque ridotte su schermi stretti — a
   differenza di uno style inline, questa regola può essere sovrascritta dal @media sotto. */
.griglia-statistiche { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; }
@media (max-width: 1100px) {
  .griglia-statistiche { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
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: pillole a gradiente pieno azzurro→turchese (primario), contorno colorato pieno su
   bianco (secondario) — niente più superficie piatta a bordo sottile. */
.pulsante, button[type="submit"], button {
  display: inline-block; background: var(--gradiente-primario); color: #fff; border: none;
  padding: 8px 20px; border-radius: var(--raggio-pillola); font-size: 0.86rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 8px rgba(8,44,99,.35);
  transition: box-shadow .12s var(--easing), transform .12s var(--easing);
}
.pulsante:hover, button[type="submit"]:hover, button:hover { text-decoration: none; box-shadow: 0 4px 12px rgba(8,44,99,.45); transform: translateY(-1px); }
.pulsante:active, button[type="submit"]:active, button:active { box-shadow: 0 1px 4px rgba(8,44,99,.35); transform: translateY(0); }
/* Nota di specificità: il selettore base sopra include "button[type="submit"]" (specificità 0,1,1)
   per dare uno stile pieno anche ai <button> senza classe — ma questo batte in specificità un
   semplice ".pulsante-secondario"/".pulsante-pericolo"/".pulsante-testo" (0,1,0) su un
   <button type="submit" class="pulsante pulsante-X">, l'uso più comune di queste varianti. Ogni
   modificatore va quindi ripetuto anche come "button[type="submit"].pulsante-X" (0,2,1) per vincere
   davvero — bug preesistente (i pulsanti "Elimina" non sono mai stati realmente rossi), scoperto
   solo ora che il gradiente di base è molto più appariscente e la mancanza di rosso si notava. */
.pulsante-secondario, button[type="submit"].pulsante-secondario { background: #fff; color: var(--colore-primario-chiaro); border: 1.5px solid var(--colore-primario-chiaro); box-shadow: none; }
.pulsante-secondario:hover, button[type="submit"].pulsante-secondario:hover { background: var(--colore-teal-sfondo); color: var(--colore-primario-chiaro); border-color: var(--colore-primario-chiaro); box-shadow: none; transform: translateY(-1px); }
.pulsante-pericolo, button[type="submit"].pulsante-pericolo { background: var(--colore-errore); box-shadow: 0 2px 8px rgba(200,55,30,.3); }
.pulsante-pericolo:hover, button[type="submit"].pulsante-pericolo:hover { background: #a3231a; box-shadow: 0 4px 12px rgba(200,55,30,.4); }
.pulsante-testo, button[type="submit"].pulsante-testo { background: none; border: none; color: var(--colore-primario-chiaro); cursor: pointer; padding: 0; font-size: 0.85rem; text-decoration: underline; font-weight: 400; box-shadow: none; }
.pulsante-testo:hover, button[type="submit"].pulsante-testo:hover { box-shadow: none; transform: 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(--gradiente-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: pillola a colore pieno, testo bianco — non più tinta chiara + testo colorato. */
.etichetta-stato { padding: 4px 12px; border-radius: var(--raggio-pillola); font-size: 0.78rem; font-weight: 700; border: none; color: #fff; }

/* Etichetta di versione del software: sfondo/testo che si adattano da soli al contesto (chiaro sulla
   barra bianca dello staff, scuro su sfondi colorati come l'intestazione famiglia/insegnante o la
   barra mobile), grazie a "currentColor" invece di un colore fisso. */
.badge-versione { display: inline-block; padding: 2px 9px; border-radius: var(--raggio-pillola); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; background: rgba(255, 255, 255, 0.25); color: inherit; vertical-align: middle; white-space: nowrap; }
.etichetta-attivo { background: var(--colore-turchese-vivo); }
.etichetta-scaduto { background: var(--colore-errore); }
.etichetta-avviso { background: var(--colore-arancio-vivo); margin-left: 4px; }
.riga-disabilitata { opacity: 0.55; }
.riga-avviso { background: var(--colore-oro-sfondo); }

/* Barra riepilogo in cima alla dashboard: etichetta stagione + pillole cliccabili con lo stesso
   riepilogo già presente più in basso nella tabella "Da controllare" (vedi pages/dashboard.php). */
.riga-stagione-dashboard { margin-bottom: 10px; text-align: center; }
.barra-riepilogo-dashboard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.badge-stagione { display: inline-block; padding: 5px 14px; border-radius: var(--raggio-pillola); font-size: 0.8rem; font-weight: 700; background: var(--colore-notte); color: #fff; }
.pillola-avviso { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--raggio-pillola); font-size: 0.85rem; font-weight: 700; text-decoration: none; border: none; color: #fff; box-shadow: var(--ombra-sm); transition: box-shadow .12s var(--easing), transform .12s var(--easing); }
.pillola-avviso:hover { box-shadow: var(--ombra); text-decoration: none; transform: translateY(-1px); }
.pillola-avviso-scaduto { background: var(--colore-errore); }
.pillola-avviso-avviso { background: var(--colore-arancio-vivo); }
.pillola-avviso-ok { background: var(--colore-turchese-vivo); }
.pillola-avviso-numero { background: rgba(255,255,255,.3); border-radius: 999px; padding: 0 7px; font-weight: 700; }
.pillola-avviso-extra { font-weight: 700; }

/* Statistiche (dashboard): tessere a gradiente pieno, testo bianco. Quattro tinte che si alternano
   in ordine di comparsa in ciascuna griglia (:nth-of-type conta i figli div del contenitore, che in
   queste griglie sono sempre e solo tessere .statistica) — con 2 tessere si vedono solo le prime
   due, con 4 il ciclo completo. */
.statistica {
  background: linear-gradient(150deg, var(--colore-primario-chiaro), var(--colore-primario-scuro));
  border-radius: 12px; box-shadow: var(--ombra); padding: 18px; text-align: center;
  border: none; color: #fff;
}
.statistica:nth-of-type(4n+2) { background: linear-gradient(150deg, var(--colore-turchese-vivo), var(--colore-turchese-scuro)); }
.statistica:nth-of-type(4n+3) { background: linear-gradient(150deg, var(--colore-arancio-vivo), var(--colore-arancio-scuro)); }
.statistica:nth-of-type(4n+4) { background: linear-gradient(150deg, var(--colore-notte), var(--colore-notte-scuro)); }
.statistica .numero {
  display: block; font-size: 2rem; font-weight: 700; font-family: 'Segoe UI', Arial, sans-serif;
  color: #fff;
}
.statistica .etichetta { color: rgba(255,255,255,.85); font-size: 0.78rem; font-weight: 600; }
.statistica .numero a { color: #fff; text-decoration: underline; }

/* 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: stile proprio in assets/css/checkin.css (sotto .app-checkin), sullo stesso schema di
   famiglia.css/insegnante.css — caricato insieme a questo foglio, non al suo posto. */

/* 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; }
.tesserino-accento-teal { border-top-color: var(--colore-teal); }
/* Due tesserini (check-in + riepilogo/chat) affiancati invece che impilati: sulla carta stampata
   stanno entrambi su un solo foglio invece di sprecarne uno quasi vuoto per il secondo. */
.tesserino-doppio { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 20px; }
.tesserino-doppio .tesserino { margin: 0; flex: 0 1 320px; }
@media print {
  .barra-superiore, .no-stampa { display: none !important; }
  .contenuto { padding: 0; }
  .tesserino { box-shadow: none; }
  .tesserino-doppio { gap: 16px; break-inside: avoid; page-break-inside: avoid; }
  .tesserino-doppio .tesserino { flex-basis: 300px; padding: 20px; }
  .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: linear-gradient(160deg, #F4F6F8 0%, #DCE1E8 35%, #F4F6F8 55%, #C7CDD6 80%, #EEF0F3 100%); }
.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: 5px solid transparent; border-image: linear-gradient(90deg, #082C63, #6E96E0, #C9A227) 1; }
.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; }

  /* Intestazione in stile "app" da telefono — stesso linguaggio visivo (gradiente, testo bianco)
     già usato per l'area famiglia (viola) e il portale insegnanti (magenta), qui in blu, il colore
     già proprio dello staff. Il menù completo di sempre resta identico, solo nascosto finché non
     si tocca "☰ Menu" nel menù fisso in basso, per non affollare lo schermo piccolo. */
  .fascia-marchio {
    flex-direction: column; align-items: flex-start; min-height: 0;
    background: var(--gradiente-primario);
    border-bottom: none; padding: 14px 16px;
  }
  .marchio-centro { position: static; transform: none; white-space: normal; font-size: 1.1rem; gap: 8px; color: #fff; }
  .marchio-logo { height: 36px; border-radius: 50%; background: #fff; }
  .utente-corrente { color: rgba(255,255,255,.85); }
  .utente-corrente a { color: #fff; }

  .nav-principale { display: none; }
  .nav-principale.nav-principale-aperta { display: flex; }

  .menu-inferiore-staff {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    height: 64px; padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid var(--colore-bordo);
  }
  .menu-inferiore-staff-voce {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-decoration: none; color: var(--colore-testo-chiaro);
    font-size: 0.72rem; font-weight: 600; font-family: inherit; background: none; border: none; cursor: pointer;
  }
  .menu-inferiore-staff-icona { font-size: 1.3rem; }
  .contenuto { padding-bottom: 84px; }

  /* Home a icone da telefono (vedi pages/dashboard.php): stesso linguaggio visivo dell'area
     famiglia/portale insegnanti, qui in blu. Sostituisce le tabelle dettagliate — restano
     comunque raggiungibili aprendo la mattonella o il menu completo. */
  .solo-desktop-dashboard { display: none; }
  .solo-mobile-dashboard { display: block; }
  .riga-stato-staff { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--raggio); font-weight: 600; text-align: center; }
  .riga-stato-staff-ok { background: var(--colore-ok-sfondo); color: var(--colore-ok); }
  .riga-stato-staff-attenzione { background: var(--colore-errore-sfondo); color: var(--colore-errore); }
  .etichetta-aree-staff { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--colore-testo-chiaro); margin: 0 0 12px; }
  .griglia-aree-staff { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
  .mattonella-staff {
    background: #fff; border-radius: 16px; box-shadow: var(--ombra);
    border: 1px solid var(--colore-bordo);
    padding: 22px 12px; text-align: center;
    text-decoration: none; color: var(--colore-testo);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-family: inherit; cursor: pointer;
  }
  .mattonella-staff-icona { font-size: 2rem; }
  .mattonella-staff-etichetta { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .03em; }
  .mattonella-staff-evidenziata { background: var(--colore-errore-sfondo); border-color: #f3c6c1; }
  .mattonella-staff-evidenziata .mattonella-staff-etichetta { color: var(--colore-errore); }
  /* 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-icona-immagine { width: 54px; height: 54px; }
  .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%; }
}