/* Scrivania della dirigenza — tema chiaro/scuro a variabili (ispirato a uniCHARTA).
   I colori di stato danno almeno 4,5:1 sul fondo, anche dentro i riquadri
   colorati, in entrambi i temi. */
:root{
  --fondo:#f4f5f8; --pannello:#ffffff; --bordo:#dde1e8; --testo:#1b1f2a; --tenue:#5d6678;
  --accento:#2457c5; --accento-testo:#ffffff; --ok:#176b3b; --avviso:#8a5a0b; --pericolo:#a93226;
  --ombra:0 2px 12px rgba(20,30,60,.07); --raggio:12px;
  --carattere:"Titillium Web",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="chiaro"]){
    --fondo:#0f1117; --pannello:#161a24; --bordo:#262b3a; --testo:#e6e8ee; --tenue:#9aa3b5;
    --accento:#4f8ef7; --accento-testo:#0b0e14; --ok:#5fd39a; --avviso:#e3b05a; --pericolo:#ff7a6b; --ombra:none;
  }
}
:root[data-tema="scuro"]{
  --fondo:#0f1117; --pannello:#161a24; --bordo:#262b3a; --testo:#e6e8ee; --tenue:#9aa3b5;
  --accento:#4f8ef7; --accento-testo:#0b0e14; --ok:#5fd39a; --avviso:#e3b05a; --pericolo:#ff7a6b; --ombra:none;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--testo);font-family:var(--carattere);font-size:16px;line-height:1.5}
a{color:var(--accento)}
button,input,select,textarea{font:inherit}
[hidden]{display:none !important}
.contenitore{max-width:1180px;margin:0 auto;padding:0 16px}

header.barra{background:var(--pannello);border-bottom:1px solid var(--bordo)}
header.barra .contenitore{display:flex;align-items:center;gap:8px 16px;min-height:60px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.marchio{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:15px}
a.marchio{color:inherit;text-decoration:none}
.marchio small{display:block;font-weight:400;letter-spacing:0;text-transform:none;color:var(--tenue);font-size:13px}
.spazio{flex:1}
.chi{color:var(--tenue);font-size:14px}
/* Sul telefono: il nome della scuola su una riga, utente e pulsanti sotto. */
@media (max-width:560px){
  header.barra .contenitore{column-gap:10px}
  header.barra .spazio{display:none}
  .chi{order:1;flex:1 1 auto;min-width:0} #tema{order:2} #esci{order:3}
}
.bottone{display:inline-block;border:1px solid var(--bordo);background:var(--pannello);color:var(--testo);border-radius:8px;
  padding:6px 14px;cursor:pointer;text-decoration:none;line-height:1.5;text-align:center}
.bottone:hover{border-color:var(--accento)}
.bottone.primario{background:var(--accento);color:var(--accento-testo);border-color:var(--accento);font-weight:600}
.bottone.pericolo{color:var(--pericolo)}
.bottone.pericolo:hover{border-color:var(--pericolo)}
.bottone:disabled{opacity:.6;cursor:not-allowed}
:focus-visible{outline:3px solid #ffb400;outline-offset:2px}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}
/* Visibile solo ai lettori di schermo (e ancora focalizzabile, per il campo file). */
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0}

main.contenitore{padding-top:20px;padding-bottom:48px}
h1{font-size:26px;margin:0 0 4px;overflow-wrap:anywhere}
h2{font-size:19px;margin:0}
.sotto{color:var(--tenue);margin:0 0 24px}
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.scheda{background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--raggio);padding:18px;box-shadow:var(--ombra);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;min-height:120px}
a.scheda:hover{border-color:var(--accento)}
.scheda h2{font-size:18px;margin:0}
.scheda p{margin:0;color:var(--tenue);font-size:14px}
.stato{margin-top:auto;font-size:12px;font-weight:700;letter-spacing:.04em}
.stato.attivo{color:var(--ok)} .stato.arrivo{color:var(--tenue)}
.nascosto{display:none !important}

/* accesso */
.accesso{min-height:100vh;display:grid;place-items:center;padding:16px}
.accesso form{background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--raggio);padding:28px;width:100%;max-width:380px;box-shadow:var(--ombra)}
.accesso h1{font-size:22px}
.accesso label{display:block;font-size:14px;margin:14px 0 4px;color:var(--tenue)}
.accesso input{width:100%;font:inherit;padding:10px 12px;border-radius:8px;border:1px solid var(--bordo);background:var(--fondo);color:var(--testo)}
.accesso .bottone{width:100%;margin-top:20px;padding:10px}
.errore{background:color-mix(in srgb,var(--pericolo) 12%,transparent);color:var(--pericolo);border-radius:8px;padding:8px 12px;font-size:14px;margin-top:12px}
.nota{font-size:13px;color:var(--tenue);margin-top:16px}

/* ── sezioni ──────────────────────────────────────────────────────────────── */
.briciole{font-size:14px;color:var(--tenue);margin:0 0 6px;overflow-wrap:anywhere}
.intestazione{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 16px}
.intestazione .sotto{margin:0}
/* Quota e stato della copia sul cloud: il messaggio d'errore di rclone può essere lungo. */
.stato-archivio{min-width:0;max-width:100%}
.stato-copia{font-size:14px;overflow-wrap:anywhere}
.stato-copia.fallita{color:var(--pericolo)}
.riga{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.esito{border-radius:8px;padding:8px 12px;font-size:14px;margin:0 0 16px;overflow-wrap:anywhere}
.esito.ok{background:color-mix(in srgb,var(--ok) 10%,var(--pannello));color:var(--ok)}
.esito.errore{background:color-mix(in srgb,var(--pericolo) 10%,var(--pannello));color:var(--pericolo);margin-top:0}
.vuoto{color:var(--tenue);font-style:italic}
input[type=search],select,textarea{padding:8px 12px;border-radius:8px;border:1px solid var(--bordo);background:var(--pannello);
  color:var(--testo);max-width:100%}

/* Documenti */
.cartelle{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.cartelle .bottone[aria-pressed="true"]{background:var(--accento);color:var(--accento-testo);border-color:var(--accento);font-weight:600}
.cerca{margin:0 0 16px}
.cerca label{display:block;font-size:14px;color:var(--tenue);margin:0 0 4px}
.cerca input{flex:1 1 200px;min-width:0}
.zona-carico{border:2px dashed var(--bordo);border-radius:var(--raggio);padding:16px;background:var(--pannello);margin:0 0 20px}
.zona-carico.sopra{border-color:var(--accento);background:color-mix(in srgb,var(--accento) 8%,var(--pannello))}
.zona-carico p{margin:0 0 10px}
.zona-carico .nota{margin:10px 0 0}
.vh:focus-visible + label{outline:3px solid #ffb400;outline-offset:2px}
.avanzamento{list-style:none;padding:0;margin:10px 0 0}
.avanzamento:empty{display:none}
.avanzamento li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;font-size:14px;padding:6px 0;border-top:1px solid var(--bordo)}
.avanzamento .nome{font-weight:600;overflow-wrap:anywhere;min-width:0}
.avanzamento progress{width:120px;max-width:100%}
.avanzamento .esito-file{min-width:0;overflow-wrap:anywhere}
.avanzamento .esito-file.riuscito{color:var(--ok)} .avanzamento .esito-file.fallito{color:var(--pericolo)}
.pannello{margin:0 0 24px}
.pannello > .riga{justify-content:space-between;margin:0 0 10px}
.elenco{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.doc{background:var(--pannello);border:1px solid var(--bordo);border-radius:10px;padding:12px 14px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.doc .testa{flex:1 1 260px;min-width:0}
.doc .nome{font-weight:600;overflow-wrap:anywhere}
.doc .meta{margin:2px 0 0;color:var(--tenue);font-size:13px;overflow-wrap:anywhere}
.doc .estratto{flex-basis:100%;margin:0;font-size:14px;color:var(--tenue);overflow-wrap:anywhere}
.doc .azioni{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.etichetta{display:inline-block;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid currentColor;
  white-space:nowrap;margin-right:6px}
.etichetta.ok{color:var(--ok)} .etichetta.attesa{color:var(--avviso)} .etichetta.errore{color:var(--pericolo)}
.etichetta.neutra{color:var(--tenue)}

/* Pagina del documento */
.metadati{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 20px;margin:0 0 20px;
  background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--raggio);padding:16px}
.metadati dt{color:var(--tenue);font-size:14px}
.metadati dd{margin:0;overflow-wrap:anywhere}
.impronta{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.versioni{margin:0;padding-left:20px}
@media (max-width:560px){
  .metadati{grid-template-columns:minmax(0,1fr);gap:2px}
  .metadati dd{margin-bottom:8px}
}

/* Finestra di conferma */
dialog{border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);color:var(--testo);
  padding:20px;width:min(440px,calc(100vw - 32px));box-shadow:0 10px 40px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(10,14,24,.55)}
dialog p{margin:0 0 16px;overflow-wrap:anywhere}
dialog .riga{justify-content:flex-end}

/* Assistente */
.avviso-ia{border-left:4px solid var(--avviso);background:color-mix(in srgb,var(--avviso) 10%,var(--pannello));
  border-radius:8px;padding:8px 12px;font-size:14px;margin:0 0 16px}
.avviso-ia strong{color:var(--avviso)}
.conversazione{display:flex;flex-direction:column;gap:12px;margin:0 0 16px}
.msg{padding:12px 14px;border-radius:12px;border:1px solid var(--bordo);background:var(--pannello);overflow-wrap:anywhere;min-width:0}
.msg.utente{align-self:flex-end;max-width:min(85%,720px);white-space:pre-wrap;
  background:color-mix(in srgb,var(--accento) 10%,var(--pannello))}
.msg.assistente{align-self:stretch}
.msg.attesa{color:var(--tenue);font-style:italic}
.msg .testo > :first-child{margin-top:0}
.msg .testo > :last-child{margin-bottom:0}
.msg .testo p{margin:0 0 10px}
.msg .testo ul,.msg .testo ol{margin:0 0 10px;padding-left:22px}
.msg .strumenti{margin:10px 0 0;font-size:13px;color:var(--tenue)}
.msg .avviso-risposta{margin:10px 0 0;font-size:14px;color:var(--avviso);font-weight:600}
.proposta{border:1px dashed var(--avviso);border-radius:8px;padding:8px 12px;margin:10px 0 0;font-size:14px}
.proposta .nota{margin:4px 0 0}
.domanda label{display:block;font-size:14px;color:var(--tenue);margin:0 0 4px}
.domanda textarea{width:100%;min-height:96px;resize:vertical;display:block}
.domanda .riga{margin-top:8px}
.domanda .nota{margin:0}

/* Norme e dati */
.gruppo-esempi{margin:0 0 24px}
.gruppo-esempi h2{margin:0 0 4px}
.gruppo-esempi p{margin:0 0 12px;color:var(--tenue);font-size:14px}
.esempi{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.esempi .bottone{text-align:left;padding:12px 14px;border-radius:10px;overflow-wrap:anywhere;white-space:normal;width:100%;height:100%}