/* Portale rapportini BCM: palette navy / bordeaux / crema (context/azienda/brand.md) */
:root {
  --navy: #1E2761; --bordeaux: #8B1538; --crema: #FCF6F5;
  --testo: #1d1d24; --grigio: #6b6b78; --bordo: #d9d6dc; --bianco: #fff;
  --cambiata: #fff4d6; --aggiunta: #e6f2ea; --errore: #8B1538;
  /* Inter Tight e Inter come il sito (parere marketing); senza font scaricati, si usa quello di sistema */
  font-family: "Inter Tight", Inter, "Segoe UI", Roboto, Calibri, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--crema); color: var(--testo); font-size: 16px; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 6px; padding: .55em 1.1em;
  background: var(--navy); color: var(--bianco); }
button:hover { background: #2a3580; }
button:disabled { opacity: .45; cursor: default; }
button.secondario { background: var(--bianco); color: var(--navy); border: 1px solid var(--navy); }
button.link { background: none; color: inherit; text-decoration: underline; padding: 0 .4em; }
button.piccolo { padding: .15em .55em; font-size: .9em; }
input, select { font: inherit; padding: .35em .45em; border: 1px solid var(--bordo); border-radius: 5px; background: var(--bianco); }
input:focus, select:focus { outline: 2px solid var(--navy); outline-offset: 0; }

/* accesso */
body.accesso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.scheda-accesso { background: var(--bianco); width: 100%; max-width: 380px; padding: 32px 28px;
  border-radius: 10px; border-top: 6px solid var(--navy); box-shadow: 0 6px 24px rgba(30, 39, 97, .12); }
.scheda-accesso h1 { color: var(--navy); margin: .2em 0 0; font-size: 1.6em; }
.scheda-accesso .sotto { color: var(--grigio); margin: .3em 0 1.4em; }
.scheda-accesso label { display: block; margin-bottom: 1em; font-weight: 600; color: var(--navy); }
.scheda-accesso input { display: block; width: 100%; margin-top: .3em; }
.scheda-accesso button { width: 100%; padding: .7em; }
.marchio { font-weight: 800; letter-spacing: .12em; color: var(--bordeaux); }
.aiuto { font-size: .9em; color: var(--grigio); margin-top: 1.4em; }
.messaggio { min-height: 1.2em; color: var(--errore); margin: .6em 0 0; }
.messaggio.ok { color: #2e6b45; }

/* barra e contenuto */
.barra { background: var(--navy); color: var(--bianco); display: flex; align-items: center; gap: .8em; padding: .7em 16px; }
.barra .marchio { color: var(--bianco); }
.barra .titolo { font-weight: 600; }
.barra .spazio { flex: 1; }
.contenuto { max-width: 1180px; margin: 0 auto; padding: 18px 16px 60px; }
.riga-mese { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; margin-bottom: .8em; }
.etichetta { padding: .2em .7em; border-radius: 99px; background: var(--bianco); border: 1px solid var(--bordo); font-size: .92em; }
.etichetta.da-fare { border-color: var(--bordeaux); color: var(--bordeaux); }
.etichetta.fatto { border-color: #2e6b45; color: #2e6b45; }
.avviso { background: var(--bianco); border-left: 4px solid var(--bordeaux); padding: .6em .9em; margin: 0 0 1em; }
.avviso:empty { display: none; }
.nota { color: var(--grigio); font-size: .92em; }

/* riepilogo in testa, come nel modello Excel */
.riepilogo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 1.2em; }
.casella { background: var(--bianco); border: 1px solid var(--bordo); border-radius: 8px; padding: .6em .8em; }
.casella .val { font-size: 1.45em; font-weight: 700; color: var(--navy); }
.casella .lab { font-size: .85em; color: var(--grigio); }
.casella.paga input { width: 6.5em; font-size: 1.2em; font-weight: 700; color: var(--navy); }
.casella.totale { border-color: var(--navy); }
.casella.totale .val { color: var(--bordeaux); }

/* fogli per scuola */
.foglio { background: var(--bianco); border: 1px solid var(--bordo); border-radius: 8px; margin-bottom: 1.2em; }
.foglio h2 { margin: 0; padding: .55em .8em; font-size: 1.1em; color: var(--bianco); background: var(--navy); border-radius: 8px 8px 0 0;
  display: flex; flex-wrap: wrap; gap: .3em 1.2em; align-items: baseline; }
.foglio h2 small { font-weight: 400; opacity: .9; }
.scorre { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; background: var(--bianco); }
.tabella th { background: #eef0f7; color: var(--navy); text-align: left; font-size: .86em; padding: .45em .4em; white-space: nowrap; }
.tabella td { border-top: 1px solid var(--bordo); padding: .3em .4em; vertical-align: middle; }
.tabella td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella input { width: 100%; min-width: 4.5em; padding: .25em .3em; }
.tabella input[type=date] { min-width: 9em; }
.tabella input[type=time] { min-width: 6.2em; }
.tabella input[type=checkbox] { width: auto; min-width: 0; }
.tabella tr.cambiata td { background: var(--cambiata); }
.tabella tr.aggiunta td { background: var(--aggiunta); }
.tabella tr.cliccabile { cursor: pointer; }
.tabella tr.cliccabile:hover td { background: #f3f1f6; }
.tabella tr.scelto td { background: #e4e7f4; }
.foglio .piede { padding: .5em .8em; }
.tolte:empty { display: none; }
.tolte { background: var(--bianco); border: 1px dashed var(--bordeaux); border-radius: 8px; padding: .6em .9em; margin-bottom: 1.2em; }
.azioni { margin-top: 1.2em; }
.azioni button { padding: .75em 1.6em; font-size: 1.05em; background: var(--bordeaux); }

/* segreteria */
.dettaglio { background: var(--bianco); border: 1px solid var(--navy); border-radius: 8px; padding: 1em; margin-top: 1.2em; }
.dettaglio h2 { color: var(--navy); margin-top: 0; }
.scelte { display: flex; flex-wrap: wrap; gap: .3em .9em; }
.scelte label { white-space: nowrap; }
.scelte input[type=text] { width: 4.5em; min-width: 0; }
.piu { color: var(--bordeaux); font-weight: 700; }

/* app docenti (beta): schede in basso, card, pulsanti a pillola */
.beta { font-size: .72em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--bordeaux); color: var(--bianco); border-radius: 99px; padding: .15em .6em; }
body.app { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.schede { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--navy);
  padding-bottom: env(safe-area-inset-bottom); z-index: 10; }
.schede a { flex: 1; text-align: center; color: #c9cde6; text-decoration: none; padding: 14px 4px 16px; font-weight: 600;
  min-height: 52px; border-top: 3px solid transparent; }
.schede a.attiva { color: var(--bianco); border-top-color: var(--bordeaux); }
.linguette { display: flex; gap: .3em; padding: 0 16px; background: var(--navy); overflow-x: auto; }
.linguette a { color: #c9cde6; text-decoration: none; padding: .55em .9em; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.linguette a.attiva { color: var(--bianco); border-bottom-color: var(--bordeaux); }
.conta:not(:empty) { background: var(--bordeaux); color: var(--bianco); border-radius: 99px; padding: 0 .5em; font-size: .85em; }
.saluto { color: var(--navy); font-size: 1.75em; margin: .2em 0 0; }
h1 { color: var(--navy); }
h2.sezione { color: var(--navy); font-size: 1.15em; margin-top: 1.4em; }
.card { background: var(--bianco); border-radius: 18px; padding: 1em 1.1em; margin: 0 0 14px;
  box-shadow: 0 2px 10px rgba(30, 39, 97, .08); border-left: 5px solid var(--navy); }
.card h2 { margin: 0 0 .3em; font-size: 1.15em; color: var(--navy); }
.card.da-fare { border-left-color: var(--bordeaux); }
.card.tenue { border-left-color: var(--bordo); }
.card.beta-card { border-left-color: var(--bordeaux); background: #fff8f9; }
.pillola { display: inline-block; border-radius: 99px; padding: .6em 1.3em; min-height: 44px; margin: .4em .4em 0 0;
  border: 1px solid var(--navy); color: var(--navy); background: var(--bianco); text-decoration: none; font-weight: 600; }
.pillola.piena { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--bianco); }
.modulo label { display: block; font-weight: 600; color: var(--navy); margin-bottom: .8em; }
.modulo input:not([type=checkbox]):not([type=radio]), .modulo textarea { display: block; width: 100%; margin-top: .3em; font: inherit;
  padding: .5em; border: 1px solid var(--bordo); border-radius: 8px; }
.modulo .due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.modulo .spunte { display: flex; flex-wrap: wrap; gap: .4em 1.4em; margin-bottom: .8em; }
.modulo .spunte label { font-weight: 400; margin: 0; }
.modulo button[type=submit] { border-radius: 99px; background: var(--bordeaux); padding: .7em 1.6em; min-height: 44px; }
.riga-stampa { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; }
.riga-stampa > div { flex: 1; min-width: 200px; }
.riga-stampa.stato-pronta { border-left-color: #2e6b45; }
.riga-stampa.stato-annullata, .riga-stampa.stato-ritirata { opacity: .6; }

/* rapportino vivo */
.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: .8em; }
.riepilogo-scuole tr.totale td { font-weight: 700; border-top: 2px solid var(--navy); }
.giorno { background: var(--bianco); border-radius: 14px; margin: 0 0 12px; box-shadow: 0 2px 8px rgba(30, 39, 97, .07); overflow: hidden; }
.giorno h3 { margin: 0; padding: .5em .9em; font-size: 1em; color: var(--navy); background: #eef0f7; display: flex; justify-content: space-between; text-transform: capitalize; }
.lezione { border-top: 1px solid var(--bordo); padding: .45em .9em; }
.lezione-testa { display: grid; grid-template-columns: 6.6em 1fr auto; gap: .1em .6em; align-items: baseline; cursor: default; }
.lezione-testa[tabindex] { cursor: pointer; }
.lezione-testa .orario { font-variant-numeric: tabular-nums; font-weight: 600; }
.lezione-testa .classe { font-weight: 600; color: var(--navy); }
.lezione-testa .materia { grid-column: 2; color: var(--grigio); font-size: .92em; }
.lezione-testa .scuola { grid-column: 2; font-size: .8em; color: var(--bordeaux); }
.lezione-testa .ore { grid-column: 3; grid-row: 1; font-variant-numeric: tabular-nums; }
.lezione.cambiata { background: var(--cambiata); }
.lezione.confermata .ore::after { content: " ✓"; color: #2e6b45; }
.lezione .correzione { color: var(--bordeaux); font-size: .92em; margin-top: .2em; }
.lezione .avviso-riga { margin-top: .2em; }
.pannello { display: flex; flex-direction: column; gap: .5em; padding: .6em 0 .3em; }
.pannello select, .pannello input { width: 100%; }
.riga-azione { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.riga-azione label { display: flex; gap: .3em; align-items: center; }
.riga-azione input { width: auto; flex: 1; min-width: 7em; }
.modulo-compatto summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.modulo-compatto .griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: .6em 0; }
.modulo-compatto > input { width: 100%; margin-bottom: .6em; }
ul.voci { list-style: none; padding: 0; margin: 0 0 .8em; }
ul.voci li { background: var(--bianco); border-left: 4px solid var(--aggiunta); border-radius: 8px; padding: .45em .7em; margin-bottom: 6px; display: flex; justify-content: space-between; gap: .6em; }
.card .avviso { margin: .4em 0; }

@media print {
  .barra, .azioni, .riga-mese select, button, .schede, .linguette { display: none !important; }
  body { background: #fff; }
}

/* registro assenze e supplenze */
.riga-mese .spazio { flex: 1; }
label.spunta { display: inline-flex; align-items: center; gap: .4em; font-weight: normal; }
p.errore { color: var(--errore); font-weight: 600; }
.card.evidenza { border-left: 6px solid var(--bordeaux); }
#as-supplenti textarea { width: 100%; box-sizing: border-box; font: inherit; }
#as-tabella td select.piccolo { max-width: 11em; }
ul.supplenze { list-style: none; padding: 0; margin: 0; }
ul.supplenze li.supplenza { padding: .6em 0; border-bottom: 1px solid #eee; }
ul.supplenze li.supplenza:last-child { border-bottom: 0; }
ul.supplenze .riga-azione { display: flex; gap: .6em; margin-top: .5em; flex-wrap: wrap; }

/* informativa */
main.informativa { max-width: 760px; }
main.informativa section h2 { color: var(--navy); margin-top: 1.4em; }
main.informativa p, main.informativa li { line-height: 1.5; }

/* segreteria al telefono: la tabella delle assenze diventa un elenco di schede */
.avviso-fuori { background: var(--cambiata); border-left: 4px solid var(--bordeaux); padding: .6em .8em; }
@media (max-width: 700px) {
  #as-tabella thead { display: none; }
  #as-tabella, #as-tabella tbody, #as-tabella tr, #as-tabella td { display: block; width: 100%; box-sizing: border-box; }
  #as-tabella tr { border: 1px solid #ddd; border-radius: 8px; margin: 0 0 .8em; padding: .4em .6em; background: #fff; }
  #as-tabella tr.cambiata { border-left: 5px solid var(--bordeaux); }
  #as-tabella td { display: flex; justify-content: space-between; gap: 1em; border: 0; padding: .25em 0; text-align: right; }
  #as-tabella td::before { content: attr(data-etichetta); font-weight: 600; color: var(--navy); text-align: left; }
  #as-tabella td.azioni { justify-content: flex-end; }
  #as-tabella td.azioni::before { content: none; }
  .riga-mese { gap: .5em; }
  #as-modulo label { display: block; }
}
#as-tabella td.azioni button.secondario { background: #fff; color: var(--navy); }