:root{
  --sfondo:#f2f4f8; --carta:#fff; --testo:#1f2430; --tenue:#6b7280;
  --bordo:#dde2ea; --blu:#12379e; --rosso:#c8262a; --verde:#1f7a4d;
  --attesa:#b07d1a;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--sfondo); color:var(--testo);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
button{font:inherit; cursor:pointer}
input,textarea,select{font:inherit; color:inherit}
input[type=text],input[type=password],input[type=number],input[type=email],
textarea,select{
  width:100%; padding:9px 11px; border:1px solid var(--bordo);
  border-radius:7px; background:#fff;
}
input:focus,textarea:focus,select:focus{
  outline:2px solid #dbe3fb; border-color:var(--blu);
}
textarea{resize:vertical; min-height:90px}
label{display:block; font-size:.82rem; color:var(--tenue); margin:12px 0 4px}
.primario{
  background:var(--blu); color:#fff; border:0; padding:11px 20px;
  border-radius:8px; font-weight:600;
}
.primario:disabled{opacity:.55; cursor:wait}
.neutro{
  background:#fff; border:1px solid var(--bordo); color:inherit;
  padding:9px 15px; border-radius:7px;
}
.neutro:hover{border-color:var(--blu)}
.pericolo{
  background:#fff; border:1px solid var(--bordo); color:var(--rosso);
  padding:7px 12px; border-radius:7px; font-size:.85rem;
}
.pericolo:hover{background:#fbecec; border-color:var(--rosso)}
.errore{color:var(--rosso); font-size:.85rem; margin-top:8px; min-height:1.2em}
.ok{color:var(--verde); font-size:.85rem; margin-top:8px; min-height:1.2em}
[hidden]{display:none!important}

/* --------------------------------------------------------------- testata */
.testata{
  background:var(--carta); border-bottom:1px solid var(--bordo);
  padding:12px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.testata img.logo{height:34px; display:block}
.testata h1{font-size:1rem; margin:0; font-weight:600; color:var(--tenue)}
.testata .spazio{flex:1}
.contenitore{max-width:880px; margin:0 auto; padding:22px 16px 60px}

/* --------------------------------------------------------------- accesso */
#accesso{
  max-width:380px; margin:9vh auto; background:var(--carta);
  border:1px solid var(--bordo); border-radius:12px; padding:26px;
}
#accesso h2{font-size:1.15rem; margin:0 0 4px}
#accesso p.intro{color:var(--tenue); font-size:.87rem; margin:0 0 16px}
#accesso .primario{width:100%; margin-top:18px}
#accesso .cambia-modo{
  display:block; width:100%; text-align:center; margin-top:14px;
  background:none; border:0; color:var(--tenue); font-size:.82rem; text-decoration:underline;
}

/* --------------------------------------------------------------- riquadri */
.riquadro{
  background:var(--carta); border:1px solid var(--bordo); border-radius:10px;
  padding:18px; margin-bottom:18px;
}
.riquadro h2{font-size:.95rem; margin:0 0 4px}
.riquadro p.sotto{color:var(--tenue); font-size:.85rem; margin:0 0 6px}

/* --------------------------------------------------------------- schede-tab */
.schede-tab{display:flex; gap:6px; margin-bottom:14px}
.schede-tab .tab{
  background:#fff; border:1px solid var(--bordo); color:var(--tenue);
  padding:8px 16px; border-radius:8px; font-size:.87rem; font-weight:600;
}
.schede-tab .tab[data-attiva="1"]{background:var(--blu); color:#fff; border-color:var(--blu)}

/* --------------------------------------------------------------- elenco */
.scheda{
  background:var(--carta); border:1px solid var(--bordo); border-radius:10px;
  padding:16px; margin-bottom:12px;
}
.scheda .riga-alto{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.scheda .quando{color:var(--tenue); font-size:.8rem; margin-left:auto}
.stato{
  display:inline-block; padding:3px 10px; border-radius:20px; font-size:.75rem;
  font-weight:600; border:1px solid transparent;
}
.stato[data-s="da fare"]{background:#fdecec; color:var(--rosso)}
.stato[data-s="fatta"]{background:#e6f4ec; color:var(--verde)}
.scheda .descrizione{white-space:pre-wrap; margin:8px 0}
.scheda .allegati{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.scheda .allegati a{
  font-size:.8rem; color:var(--blu); border:1px solid var(--bordo);
  padding:5px 10px; border-radius:7px; text-decoration:none;
}
.scheda .allegati a:hover{border-color:var(--blu)}
.scheda .azioni{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
.scheda .azioni select{width:auto}
.vuoto{color:var(--tenue); font-size:.9rem; text-align:center; padding:30px 0}