:root {
  --sfondo: #f5f6f8;
  --superficie: #ffffff;
  --testo: #1d2330;
  --testo-tenue: #5b6474;
  --bordo: #dde1e7;
  --primario: #0b4f8a;
  --primario-scuro: #083b68;
  --pericolo: #b42318;
  --successo: #1f7a3f;
  --raggio: 6px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--testo);
  background: var(--sfondo);
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
a { color: var(--primario); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }

.testata {
  background: var(--primario-scuro);
  color: #fff;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.testata a { color: #fff; text-decoration: none; }
.testata .marchio { font-weight: 600; }
.testata .servizio { opacity: .9; font-size: .95rem; }
.testata .spazio { flex: 1; }
.testata form { margin: 0; }
.testata button { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; padding: .25rem .6rem; border-radius: var(--raggio); cursor: pointer; }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.intestazione { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.sottotitolo { color: var(--testo-tenue); margin: 0; }

.scheda { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.25rem; margin-bottom: 1.25rem; }

.pulsante { display: inline-block; background: var(--primario); color: #fff; border: 0; padding: .5rem 1rem; border-radius: var(--raggio); text-decoration: none; cursor: pointer; font: inherit; }
.pulsante:hover { background: var(--primario-scuro); }
.pulsante.secondario { background: transparent; color: var(--primario); border: 1px solid var(--primario); }
.pulsante.pericolo { background: transparent; color: var(--pericolo); border: 1px solid var(--pericolo); padding: .2rem .6rem; font-size: .9rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { font-size: .85rem; color: var(--testo-tenue); font-weight: 600; }
td.importo, th.importo { text-align: right; white-space: nowrap; }
.tabella-scorrevole { overflow-x: auto; }

.etichetta { display: inline-block; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; background: #e8edf4; color: var(--primario-scuro); white-space: nowrap; }
.etichetta.chiuso { background: #e6f2ea; color: var(--successo); }

.filtri { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtri input, .filtri select { padding: .45rem .6rem; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; }

.campi { display: grid; gap: 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: .25rem; }
.campo input, .campo select, .campo textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; background: #fff; }
.campo .aiuto { font-size: .85rem; color: var(--testo-tenue); margin-top: .2rem; }
.campo .errore, .errorlist { color: var(--pericolo); font-size: .9rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.azioni { display: flex; gap: .5rem; margin-top: 1.25rem; }

dl.dati { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0; }
dl.dati dt { color: var(--testo-tenue); }
dl.dati dd { margin: 0; }

.messaggio { padding: .75rem 1rem; border-radius: var(--raggio); margin-bottom: 1rem; background: #e8edf4; }
.messaggio.success { background: #e6f2ea; color: var(--successo); }
.messaggio.error { background: #fdecea; color: var(--pericolo); }

.vuoto { color: var(--testo-tenue); text-align: center; padding: 2rem 1rem; }
.accesso { max-width: 420px; margin: 4rem auto; text-align: center; }

@media (max-width: 640px) {
  dl.dati { grid-template-columns: 1fr; }
  dl.dati dt { margin-top: .5rem; }
}