:root{
  --bg:#faf7f2; --sup:#ffffff; --sup2:#f2ede4; --ink:#1c1a17; --ink2:#6b6459;
  --acc:#a9803f; --acc-ink:#ffffff; --linea:#e6ddcf;
  --rosso:#b9473a; --giallo:#d9a441; --verde:#3f7d4f;
  --ombra:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15130f; --sup:#1e1b16; --sup2:#262119; --ink:#f3ede2; --ink2:#b3a891;
    --acc:#c99a4f; --acc-ink:#15130f; --linea:#332c20;
    --rosso:#e0796c; --giallo:#e6b75c; --verde:#7fbf8c; --ombra:none;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--bg);color:var(--ink);font:14.5px/1.5 'Poppins',system-ui,sans-serif;}
[hidden]{display:none !important;}
a{color:inherit;}
h1,h2,h3{margin:0;line-height:1.2;}

/* pulsanti e campi */
.btn{font:600 13px 'Poppins',sans-serif;border-radius:22px;padding:9px 16px;border:1px solid var(--linea);
  background:var(--sup);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.btn:hover{border-color:var(--acc);}
.btn-primario{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);}
.btn-link{border:0;background:none;padding:4px 6px;color:var(--ink2);text-decoration:underline;}
.btn-piccolo{padding:6px 12px;font-size:12.5px;}
.btn[disabled]{opacity:.5;cursor:wait;}
input,select,textarea{font:inherit;color:var(--ink);background:var(--sup);border:1px solid var(--linea);
  border-radius:10px;padding:9px 11px;width:100%;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:1px;}
label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;}
label.spunta{flex-direction:row;align-items:center;gap:8px;font-weight:500;}
label.spunta input{width:auto;}
textarea{min-height:70px;resize:vertical;}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;}
.login-box{background:var(--sup);border:1px solid var(--linea);border-radius:16px;padding:28px 24px;width:100%;max-width:380px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--ombra);}
.login-box h1{font-size:26px;font-weight:800;}
.marchio{font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;font-weight:600;}
.marchio b{color:var(--acc);font-weight:700;}
.nota{color:var(--ink2);font-size:13px;margin:0;}
.nota.piccola{font-size:11.5px;}
.nota.errore{color:var(--rosso);}

/* testata */
.testata{background:var(--sup);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:5;}
.testata-riga{max-width:1100px;margin:0 auto;padding:12px 16px 6px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.utente{font-size:12.5px;color:var(--ink2);}
.ruolo{background:var(--sup2);border-radius:8px;padding:2px 8px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;}
.schede{max-width:1100px;margin:0 auto;padding:0 10px;display:flex;gap:4px;overflow-x:auto;}
.schede a{padding:10px 12px;text-decoration:none;font-weight:600;font-size:13.5px;color:var(--ink2);border-bottom:2px solid transparent;white-space:nowrap;}
.schede a.attiva{color:var(--ink);border-bottom-color:var(--acc);}

/* contenuto */
.contenuto{max-width:1100px;margin:0 auto;padding:20px 16px 80px;}
.intestazione{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.intestazione h1{font-size:clamp(22px,4vw,28px);font-weight:800;}
.intestazione p{margin:4px 0 0;color:var(--ink2);font-size:13px;}
.sezione-titolo{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin:28px 0 10px;}
.lista{display:flex;flex-direction:column;gap:10px;}
.vuoto{color:var(--ink2);font-style:italic;background:var(--sup);border:1px dashed var(--linea);border-radius:12px;padding:18px;}

.scheda{background:var(--sup);border:1px solid var(--linea);border-radius:14px;padding:14px 16px;box-shadow:var(--ombra);}
a.scheda{display:block;text-decoration:none;}
a.scheda:hover{border-color:var(--acc);}
.scheda-riga{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.scheda h3{font-size:16px;font-weight:700;}
.det{color:var(--ink2);font-size:13px;margin-top:3px;}
.azioni{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.contatti{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.tel{background:var(--acc);color:var(--acc-ink);text-decoration:none;font-weight:700;border-radius:20px;padding:7px 14px;font-size:13px;}
.mail{border:1px solid var(--linea);text-decoration:none;border-radius:20px;padding:7px 14px;font-size:13px;}

.badge{font-size:11px;font-weight:700;border-radius:10px;padding:3px 9px;background:var(--sup2);white-space:nowrap;}
.badge.rosso{background:var(--rosso);color:#fff;}
.badge.giallo{background:var(--giallo);color:#1c1a17;}
.badge.verde{background:var(--verde);color:#fff;}

.cerca{display:flex;gap:10px;margin-bottom:14px;}
.cerca input{flex:1;}

/* scheda cliente */
.griglia-dati{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px;margin-top:12px;}
.dato small{display:block;font-size:11px;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;}
.dato span{font-weight:500;word-break:break-word;}
.pendenze{margin-top:10px;border-top:1px solid var(--linea);padding-top:10px;display:flex;flex-direction:column;gap:8px;}
.pendenza{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px;flex-wrap:wrap;}
.pendenza.risolta{color:var(--ink2);text-decoration:line-through;}
.indietro{display:inline-block;margin-bottom:10px;font-size:13px;color:var(--ink2);text-decoration:none;font-weight:600;}

/* finestra moduli */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto;z-index:20;}
.finestra{background:var(--sup);border-radius:16px;padding:20px;width:100%;max-width:560px;}
.finestra h2{font-size:18px;font-weight:700;margin-bottom:14px;}
#finestra-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#finestra-form .largo{grid-column:1/-1;}
#finestra-form .piede{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
@media (max-width:520px){ #finestra-form{grid-template-columns:1fr;} }

.avviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:10px 18px;border-radius:12px;font-size:13px;z-index:30;max-width:calc(100% - 32px);}
.avviso.errore{background:var(--rosso);color:#fff;}
.caricamento{color:var(--ink2);padding:20px 0;}