/* Aspetto sobrio e neutro: grafica e usabilità si curano alla fine del progetto. */
:root { --testo:#1d2125; --tenue:#5c6670; --bordo:#d6dbe0; --sfondo:#f6f7f9; --carta:#fff; --accento:#2457a6;
        --ok:#1f7a3f; --attenzione:#9a6200; --errore:#b3261e; }
@media (prefers-color-scheme: dark) {
  :root { --testo:#e6e8eb; --tenue:#9aa4ae; --bordo:#3a4148; --sfondo:#15181b; --carta:#1e2226; --accento:#7aa7ec;
          --ok:#5cc184; --attenzione:#e0a84a; --errore:#ff8a80; }
}
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--testo); background:var(--sfondo); }
a { color:var(--accento); }
.testata { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding:10px 16px; background:var(--carta); border-bottom:1px solid var(--bordo); }
.marchio { font-weight:700; text-decoration:none; color:var(--testo); letter-spacing:.04em; }
nav { display:flex; flex-wrap:wrap; gap:4px 14px; flex:1; }
nav a { text-decoration:none; color:var(--tenue); padding:4px 0; }
nav a.attiva { color:var(--testo); border-bottom:2px solid var(--accento); }
.esci button { background:none; color:var(--tenue); border:1px solid var(--bordo); }
main { max-width:1200px; margin:0 auto; padding:16px; }
footer { text-align:center; color:var(--tenue); font-size:13px; padding:24px 16px; }
h1 { font-size:22px; margin:8px 0 12px; } h2 { font-size:17px; margin:0 0 8px; }
.riquadro, .coda { background:var(--carta); border:1px solid var(--bordo); border-radius:8px; padding:16px; margin:0 0 16px; }
.stretto { max-width:420px; margin:40px auto; }
.griglia { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
.code { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-bottom:16px; }
.coda.piena { border-color:var(--accento); }
.coda ul { list-style:none; padding:0; margin:0; } .coda li { display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-top:1px solid var(--bordo); }
.conta { float:right; color:var(--tenue); } .chi { color:var(--tenue); font-size:13px; margin:0 0 8px; }
.giorni { color:var(--tenue); white-space:nowrap; } .giorni.fermo { color:var(--attenzione); font-weight:600; }
form label { display:block; margin:0 0 12px; }
input, select, button { font:inherit; padding:7px 10px; border:1px solid var(--bordo); border-radius:6px; background:var(--carta); color:var(--testo); }
form label input { display:block; width:100%; margin-top:4px; }
button, .bottone { background:var(--accento); color:#fff; border-color:var(--accento); cursor:pointer; text-decoration:none; display:inline-block; padding:7px 14px; border-radius:6px; }
button.secondario { background:none; color:var(--errore); border-color:var(--errore); }
.filtri { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; } .filtri input[name=q] { flex:1; min-width:220px; }
.scorre { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:var(--carta); }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--bordo); vertical-align:top; }
th { font-size:13px; color:var(--tenue); font-weight:600; }
.compatta td, .compatta th { padding:4px 6px; font-size:14px; }
.num { text-align:right; white-space:nowrap; }
dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:0; } dt { color:var(--tenue); } dd { margin:0; }
.nota, .vuota { color:var(--tenue); font-size:13px; }
.errore { color:var(--errore); } .ok { color:var(--ok); }
.avviso { border-left:3px solid var(--attenzione); padding:6px 10px; background:var(--carta); }
.stato, .esito, .tag { display:inline-block; font-size:12px; padding:1px 8px; border-radius:10px; border:1px solid var(--bordo); white-space:nowrap; }
.s-da_verificare, .e-ko, .e-errore { border-color:var(--errore); color:var(--errore); }
.s-pronta_da_preparare, .s-distinta_firmata, .s-caricata_su_dire { border-color:var(--accento); color:var(--accento); }
.s-protocollata, .s-inviata, .e-ok, .e-eseguita { border-color:var(--ok); color:var(--ok); }
.e-nd, .e-simulata { border-color:var(--attenzione); color:var(--attenzione); }
pre { white-space:pre-wrap; word-break:break-word; font:13px/1.45 ui-monospace, Consolas, monospace; background:var(--sfondo); padding:8px; border-radius:6px; margin:4px 0 0; }
.messaggio, .azione { border-top:1px solid var(--bordo); padding:8px 0; } .azione p { margin:0 0 4px; }
.impronta { font-family:ui-monospace, Consolas, monospace; font-size:12px; }
.dettaglio { font-size:13px; max-width:520px; word-break:break-word; }
.qr { display:block; width:200px; height:200px; background:#fff; padding:4px; border-radius:6px; }
.codici { columns:2; font-size:15px; } .briciole { margin:0; font-size:13px; }
@media (max-width:600px) { dl { grid-template-columns:1fr; } dt { margin-top:6px; } }
/* fase B */
textarea { font:inherit; width:100%; padding:7px 10px; border:1px solid var(--bordo); border-radius:6px; background:var(--carta); color:var(--testo); margin-top:4px; }
.pulsanti { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; } .pulsanti form { margin:0; }
button.neutro, .bottone.neutro { background:none; color:var(--accento); border:1px solid var(--accento); }
label.riga { display:flex; gap:8px; align-items:center; margin:0 0 6px; } label.riga input { width:auto; margin:0; }
.zona { display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center; padding:24px 16px; border:2px dashed var(--bordo); border-radius:8px; cursor:pointer; }
.zona.sopra { border-color:var(--accento); background:var(--sfondo); }
.zona input[type=file] { width:auto; border:none; } .scelti { font-weight:600; }
.caricamento, .risposta { margin-top:12px; }
.annulla { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .annulla label.riga { margin:0; }
tr.sostituito td { color:var(--tenue); }
fieldset { border:1px solid var(--bordo); border-radius:6px; margin:0 0 12px; } legend { color:var(--tenue); font-size:13px; }
.utente { border-top:1px solid var(--bordo); padding:10px 0; } .utente p { margin:0 0 6px; }
.permessi { display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; } .permessi label.riga { margin:0; }
.modulo-utente select { display:block; margin-top:4px; }