:root { --sfondo:#f6f7f5; --card:#fff; --testo:#20262c; --tenue:#5f6873; --bordo:#dfe2dd;
  --primario:#1f6f5c; --primario-t:#fff; --errore:#a32020; --ok:#1d6b3a; --evid:#e3f0ec;
  --ambra:#8a5a00; --ambra-s:#fbf0d9; --rosso-s:#f9e4e2; --grigio-s:#eceeeb; }
* { box-sizing:border-box; }
body { margin:0; background:var(--sfondo); color:var(--testo);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
#app { max-width:1040px; margin:0 auto; padding:16px; }
.centro { text-align:center; color:var(--tenue); margin-top:64px; }
h1 { font-size:22px; margin:8px 0 16px; } h2 { font-size:18px; margin:0 0 12px; } h3 { font-size:15px; margin:18px 0 8px; }
.card { background:var(--card); border:1px solid var(--bordo); border-radius:10px; padding:16px; margin-bottom:12px; }
.accesso { max-width:380px; margin:56px auto; } .accesso img { height:34px; display:block; margin-bottom:12px; }
.testata { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:16px; }
.testata img { height:28px; } .testata .spazio { margin-right:auto; color:var(--tenue); font-size:14px; }
nav { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:16px; }
nav button { background:transparent; color:var(--testo); border-color:transparent; padding:7px 14px; }
nav button.attivo { background:var(--primario); color:var(--primario-t); }
label { display:block; font-size:14px; color:var(--tenue); margin-bottom:10px; }
input,select,textarea { display:block; width:100%; margin-top:4px; padding:9px 10px; border:1px solid var(--bordo);
  border-radius:6px; font:inherit; color:var(--testo); background:#fff; }
input[type=checkbox] { display:inline-block; width:auto; margin:0 6px 0 0; }
textarea { min-height:76px; resize:vertical; }
button { padding:9px 16px; border:1px solid var(--primario); border-radius:6px; cursor:pointer;
  background:var(--primario); color:var(--primario-t); font:inherit; }
button.sec { background:transparent; color:var(--primario); }
button.link { border:0; background:none; color:var(--primario); padding:4px 6px; text-decoration:underline; }
button:disabled { opacity:.55; cursor:default; }
.azioni { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.msg { font-size:14px; margin:8px 0 0; min-height:20px; } .msg.err { color:var(--errore); } .msg.ok { color:var(--ok); }
.tenue { color:var(--tenue); font-size:14px; }
.griglia2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.riquadri { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.riquadri .card { margin:0; } .riquadri b { display:block; font-size:22px; }
.tag { display:inline-block; padding:1px 8px; border-radius:99px; font-size:13px; background:var(--grigio-s); color:var(--testo); white-space:nowrap; }
.tag.verde { background:var(--evid); color:var(--ok); } .tag.ambra { background:var(--ambra-s); color:var(--ambra); } .tag.rosso { background:var(--rosso-s); color:var(--errore); }
.riga-pratica { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; width:100%; text-align:left;
  background:none; color:inherit; border:0; padding:0; }
.riga-pratica strong { flex:1 1 280px; }
.richiesta { background:var(--ambra-s); border-radius:6px; padding:10px 12px; margin:10px 0; }
.fase-due { background:var(--evid); border-radius:6px; padding:10px 12px; margin:10px 0; }
.dett dl { display:grid; grid-template-columns:150px 1fr; gap:4px 12px; margin:0; } .dett dt { color:var(--tenue); font-size:14px; } .dett dd { margin:0; }
.voce { border-top:1px solid var(--bordo); padding:10px 0; } .voce:first-of-type { border-top:0; }
.fases { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0; }
.fases div { border:1px solid var(--bordo); border-radius:6px; padding:8px 10px; font-size:14px; }
.scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:15px; }
th,td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--bordo); vertical-align:top; }
th { font-size:13px; color:var(--tenue); font-weight:600; } td.n,th.n { text-align:right; white-space:nowrap; }
.nascosta { opacity:.65; }
@media (max-width:640px) { .griglia2,.fases,.riquadri { grid-template-columns:1fr; } .dett dl { grid-template-columns:1fr; gap:0; } .dett dd { margin-bottom:8px; } }