:root{
  --giallo:#FFD200;
  --giallo-scuro:#E8BE00;
  --giallo-testo:#7A5C00;
  --antracite:#2B2E34; --antracite-2:#3D424A;
  --grigio:#6B7078; --grigio-chiaro:#D8D9DB;
  --fondo:#F1F0EE; --carta:#FFFFFF;
  --rosso:#B4231E;
  --r:4px; --ombra:0 1px 2px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.06);
  --mono:ui-monospace,"SF Mono","Roboto Mono",Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--fondo);color:var(--antracite);-webkit-text-size-adjust:100%}

/* header comune */
.top{background:var(--antracite);color:#fff;padding:12px 18px;display:flex;align-items:center;gap:12px}
.marchio{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff}
.marchio .quadro{width:22px;height:22px;background:var(--giallo);border-radius:2px;display:inline-block}
.marchio .nome{font-size:18px;font-weight:700;letter-spacing:-.01em}
.utente{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px}
.utente .chi{color:rgba(255,255,255,.8)}
.utente form.inline{display:inline;margin:0}
.esci{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;font:inherit;font-size:12px;
  padding:6px 14px;border-radius:var(--r);cursor:pointer}
.esci:hover{border-color:var(--giallo);color:var(--giallo)}

.contenuto{max-width:1100px;margin:0 auto;padding:22px 16px}

/* pagina di login */
.login-box{max-width:380px;margin:8vh auto 0;background:var(--carta);border-radius:var(--r);
  box-shadow:var(--ombra);padding:28px;border-top:5px solid var(--giallo)}
.login-box h1{margin:0 0 4px;font-size:22px}
.login-box .sotto{font-size:13px;color:var(--grigio);margin-bottom:20px}

/* form comuni */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--grigio);margin-bottom:5px}
input[type=text],input[type=password],input[type=tel],select{width:100%;font:inherit;font-size:16px;
  padding:12px;border:1px solid var(--grigio-chiaro);border-radius:var(--r);background:#fff;color:var(--antracite)}
input:focus,select:focus,button:focus-visible{outline:3px solid rgba(0,0,0,.45);outline-offset:1px;border-color:var(--giallo)}
.btn{font:inherit;font-weight:700;font-size:15px;border:0;border-radius:var(--r);padding:14px 18px;
  cursor:pointer;background:var(--giallo);color:var(--antracite);min-height:48px;width:100%}
.btn:hover{background:var(--giallo-scuro)}
.btn.sec{background:#fff;color:var(--antracite);border:1px solid var(--grigio-chiaro);width:auto;
  font-size:13px;padding:9px 14px;min-height:40px}
.btn.sec:hover{background:#F6F5F3}
.errore{color:var(--rosso);font-size:13px;font-weight:600;margin:0 0 12px}
.nota{font-size:12px;color:var(--grigio);line-height:1.5}

/* home: piastrelle servizi */
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--grigio);font-weight:700;margin:6px 0 14px}
.servizi{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:700px){.servizi{grid-template-columns:1fr 1fr 1fr}}
.servizio{background:var(--carta);border:1px solid var(--grigio-chiaro);border-radius:var(--r);
  box-shadow:var(--ombra);padding:22px 18px;text-decoration:none;color:var(--antracite);
  display:flex;flex-direction:column;gap:8px;min-height:130px}
.servizio:hover{border-color:var(--antracite)}
.servizio.primario{background:var(--giallo);border-color:var(--giallo)}
.servizio .ic{font-size:26px;line-height:1}
.servizio .t{font-size:17px;font-weight:700}
.servizio .d{font-size:13px;color:var(--grigio);line-height:1.4}
.servizio.primario .d{color:rgba(0,0,0,.62)}
.servizio.presto{opacity:.55;cursor:default}

/* tabelle (utenti) */
.scheda{background:var(--carta);border-radius:var(--r);box-shadow:var(--ombra);overflow:hidden;margin-bottom:18px}
.scheda > h2{margin:0;padding:12px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--grigio);border-bottom:1px solid var(--grigio-chiaro);font-weight:700}
.corpo{padding:16px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--grigio);
  padding:10px 12px;border-bottom:1px solid var(--grigio-chiaro);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid #F0EFED;vertical-align:middle}
.stato-si{background:var(--giallo);color:var(--antracite);font-size:11px;font-weight:700;
  text-transform:uppercase;padding:3px 7px;border-radius:2px}
.stato-no{color:var(--grigio);font-size:11px;font-weight:700;text-transform:uppercase}
.griglia2{display:grid;gap:14px}
@media (min-width:560px){.griglia2{grid-template-columns:1fr 1fr}}