:root{
  --inchiostro:#1a1a2e; --grigio:#6b7280; --bordo:#e5e7eb; --sfondo:#f7f7f9;
  --carta:#ffffff; --accento:#8B1538; --accento-chiaro:#a8595c;
  --verde:#166534; --verde-sfondo:#dcfce7; --rosso:#b91c1c; --rosso-sfondo:#fee2e2;
  --ambra:#92400e; --ambra-sfondo:#fef3c7; --raggio:14px;
  --ombra:0 1px 2px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.18);
}
*{box-sizing:border-box}
body{margin:0;background:var(--sfondo);color:var(--inchiostro);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1{font-size:26px;margin:0 0 4px;letter-spacing:-.02em}
h2{font-size:17px;margin:0 0 14px;letter-spacing:-.01em}
h3{font-size:14px;margin:0 0 8px;color:var(--grigio);text-transform:uppercase;letter-spacing:.06em}
p{margin:0 0 10px}
small{color:var(--grigio)}

/* ---------------------------------------------------------------- barra */
.barra{display:flex;align-items:center;gap:22px;padding:12px 22px;background:var(--carta);
  border-bottom:1px solid var(--bordo);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.logo{font-weight:700;font-size:17px;letter-spacing:-.02em}
.logo span{color:var(--accento)}
.barra nav{display:flex;gap:18px;flex:1;flex-wrap:wrap}
.barra nav a{color:var(--grigio);font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.barra nav a:hover{color:var(--inchiostro)}
.destra{display:flex;align-items:center;gap:14px}
.esci{color:var(--grigio);font-size:14px}

main{max-width:1080px;margin:26px auto 60px;padding:0 20px}
main.stretto{max-width:460px;margin-top:8vh}

/* --------------------------------------------------------------- schede */
.carta{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:20px;box-shadow:var(--ombra);margin-bottom:18px}
.griglia{display:grid;gap:16px}
.kpi{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi .valore{font-size:27px;font-weight:700;letter-spacing:-.03em;margin-top:2px}
.kpi .carta{margin:0}
.kpi .rosso{color:var(--rosso)} .kpi .verde{color:var(--verde)}

/* -------------------------------------------------------------- tabelle */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--grigio);padding:0 10px 8px;font-weight:600}
td{padding:12px 10px;border-top:1px solid var(--bordo);vertical-align:middle}
tr.riga:hover td{background:#fafafb}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabella-scorrevole{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* -------------------------------------------------------------- badge */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
  white-space:nowrap}
.b-bozza{background:#f3f4f6;color:#4b5563}
.b-inviata{background:#e0f2fe;color:#075985}
.b-consegnata{background:var(--verde-sfondo);color:var(--verde)}
.b-mancata_consegna{background:var(--ambra-sfondo);color:var(--ambra)}
.b-scartata{background:var(--rosso-sfondo);color:var(--rosso)}
.b-pagata{background:var(--verde-sfondo);color:var(--verde)}
.b-aperta{background:var(--ambra-sfondo);color:var(--ambra)}
.b-scaduta{background:var(--rosso-sfondo);color:var(--rosso)}

/* -------------------------------------------------------------- bottoni */
.bottone{display:inline-block;padding:9px 16px;border-radius:10px;border:1px solid var(--bordo);
  background:var(--carta);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;
  transition:transform .06s ease, box-shadow .12s ease}
.bottone:hover{box-shadow:var(--ombra)}
.bottone:active{transform:translateY(1px)}
.bottone.primario{background:var(--accento);color:#fff;border-color:var(--accento)}
.bottone.pericolo{background:var(--rosso);color:#fff;border-color:var(--rosso)}
.bottone.fantasma{background:transparent}
.bottone[disabled]{opacity:.45;cursor:not-allowed}
.azioni{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* --------------------------------------------------------------- moduli */
label{display:block;font-size:13px;font-weight:600;margin:14px 0 5px}
input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--bordo);border-radius:10px;
  font:inherit;background:var(--carta);color:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accento-chiaro);outline-offset:1px;
  border-color:transparent}
textarea{min-height:70px;resize:vertical}
.riga-campi{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.spunta{display:flex;align-items:flex-start;gap:10px;margin:14px 0;font-weight:500}
.spunta input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--accento)}
.aiuto{font-size:13px;color:var(--grigio);margin-top:4px}

/* -------------------------------------------------------------- avvisi */
.avviso{padding:12px 15px;border-radius:12px;margin-bottom:16px;font-weight:500;
  border:1px solid transparent}
.avviso.ok{background:var(--verde-sfondo);color:var(--verde);border-color:#bbf7d0}
.avviso.errore{background:var(--rosso-sfondo);color:var(--rosso);border-color:#fecaca}
.avviso.avviso,.avviso.warning{background:var(--ambra-sfondo);color:var(--ambra);border-color:#fde68a}

/* ---------------------------------------------------------- validazione */
.controlli{list-style:none;padding:0;margin:0}
.controlli li{display:flex;gap:11px;padding:9px 0;border-top:1px solid var(--bordo);align-items:flex-start}
.controlli li:first-child{border-top:0}
.controlli .segno{flex:none;width:20px;text-align:center;font-size:15px}
.controlli .testo strong{display:block;font-size:14px}
.controlli .testo span{font-size:13px;color:var(--grigio)}
.esito-ok{border-left:4px solid var(--verde)}
.esito-avviso{border-left:4px solid var(--ambra)}
.esito-errore{border-left:4px solid var(--rosso)}

/* ---------------------------------------------------------------- varie */
.intestazione{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin-bottom:18px;flex-wrap:wrap}
.filtri{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filtri a{padding:6px 13px;border-radius:999px;border:1px solid var(--bordo);
  background:var(--carta);font-size:13px;font-weight:600;color:var(--grigio)}
.filtri a.attivo{background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}
.vuoto{text-align:center;padding:40px 20px;color:var(--grigio)}
pre.xml{background:#0f172a;color:#e2e8f0;padding:14px;border-radius:10px;overflow-x:auto;
  font-size:12px;line-height:1.5;max-height:340px}
.due-colonne{display:grid;gap:18px;grid-template-columns:1.6fr 1fr;align-items:start}
@media (max-width:860px){.due-colonne{grid-template-columns:1fr}}
.dettaglio{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px;
  border-top:1px solid var(--bordo)}
.dettaglio:first-child{border-top:0}
.dettaglio .etichetta{color:var(--grigio)}
.qr{display:block;margin:16px auto;border:1px solid var(--bordo);border-radius:12px;background:#fff;padding:10px}
code.segreto{display:block;background:#f3f4f6;padding:10px;border-radius:8px;font-size:13px;
  word-break:break-all;text-align:center;margin:10px 0}