:root {
  --blu: #1d70b3;
  --rosso: #c0392b;
  --giallo: #f0ad4e;
  --verde: #27ae60;
  --grigio: #6b7280;
  --bordo: #e5e7eb;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #f9fafb;
}
main { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.barra {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--blu); color: #fff; padding: .75rem 1rem;
}
.barra a { color: #fff; text-decoration: none; }
.barra a:hover { text-decoration: underline; }
.barra .marchio { font-weight: 600; }
.barra .riempi { flex: 1; }

.elenco { list-style: none; padding: 0; margin: 0; }
.riga {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--bordo); border-left-width: 4px;
  border-radius: 6px; padding: .75rem 1rem; margin-bottom: .5rem;
}
.riga .testo { flex: 1; min-width: 12rem; }

/* Il colore e' lo STATO, mai la categoria. */
.stato-in_corso  { border-left-color: var(--verde); }
.stato-in_attesa { border-left-color: var(--giallo); }
.stato-da_fare   { border-left-color: var(--bordo); }

.data-evento   { color: var(--rosso); font-weight: 600; }
.data-consegna { color: var(--grigio); }
.scadenza.scaduta { color: var(--rosso); font-weight: 600; }
.progetto { color: var(--grigio); font-size: .9em; }
.riservato {
  font-size: .75em; text-transform: uppercase; letter-spacing: .04em;
  background: #f3f4f6; color: var(--grigio); padding: .1rem .4rem; border-radius: 4px;
}

.in-corso {
  background: #fff; border: 2px solid var(--verde); border-radius: 8px;
  padding: 1rem; margin-bottom: 1.5rem;
}
.in-corso .etichetta { color: var(--verde); font-weight: 600; font-size: .9em; }
.in-corso h2 { margin: .25rem 0 1rem; }

button, .principale {
  font: inherit; min-height: 44px; padding: .5rem 1rem;
  border: 1px solid var(--bordo); border-radius: 6px;
  background: #fff; cursor: pointer; text-decoration: none; display: inline-block;
}
button.principale, a.principale { background: var(--blu); color: #fff; border-color: var(--blu); }

.conferma-ore { max-width: 26rem; margin: 3rem auto; text-align: center; }
.conferma-ore .occhiello { color: var(--grigio); margin: 0; }
.conferma-ore h1 { margin: .25rem 0 2rem; font-size: 1.4rem; }
.regolatore { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 1.5rem 0; }
.numerone { font-size: 2.5rem; font-weight: 600; min-width: 6rem; }
.conferma-ore .principale { width: 100%; font-size: 1.1rem; }

.copertura { background: #fff; border: 1px solid var(--bordo); border-radius: 6px; padding: 1rem; }
.errore { color: var(--rosso); }
.vuoto { color: var(--grigio); }

form label { display: block; margin: .75rem 0; }
form input, form select, form textarea { font: inherit; padding: .5rem; border: 1px solid var(--bordo); border-radius: 6px; }
.evidenza { background: #fff6f5; border-left: 4px solid var(--rosso); padding: .75rem; }

.riquadro-accesso { max-width: 22rem; margin: 4rem auto; }
.riquadro-accesso input { width: 100%; }
.riquadro-accesso .principale { width: 100%; margin-top: 1rem; }

.tabella { border-collapse: collapse; background: #fff; width: 100%; }
.tabella th, .tabella td { border: 1px solid var(--bordo); padding: .5rem .75rem; text-align: left; }
.tabella th { background: #f3f4f6; font-weight: 600; }
.voci { border-collapse: collapse; background: #fff; }
.voci th, .voci td { border: 1px solid var(--bordo); padding: .5rem .75rem; text-align: left; }
.voci .quando { white-space: nowrap; }

form.in-riga { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
form.in-riga label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }

.spiega { background: #fff; border: 1px solid var(--bordo); border-radius: 6px; padding: 1rem; color: var(--grigio); }

.commenti { list-style: none; padding: 0; margin: .5rem 0; }
.commenti li { border-top: 1px solid var(--bordo); padding: .5rem 0; }
.commenti .quando { color: var(--grigio); font-size: .85em; margin-left: .5rem; }
.commenti p { margin: .25rem 0 0; }