:root {
  --testo: #1b1f24;
  --tenue: #5b6672;
  --bordo: #dfe3e8;
  --sfondo: #f5f6f8;
  --carta: #ffffff;
  --primario: #b3121a;
  --primario-scuro: #8d0d14;
  --ok-sfondo: #e6f4ea;
  --ok-testo: #1b5e20;
  --ko-sfondo: #fdecea;
  --ko-testo: #a4110b;
  --att-sfondo: #fff6e0;
  --att-testo: #8a5b00;
  --occupata: #fdf0f0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: var(--testo);
  background: var(--sfondo);
  line-height: 1.5;
}

/* --- Barra --- */
.barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  background: var(--carta); border-bottom: 1px solid var(--bordo);
  padding: .75rem 1.25rem;
}
.marchio { font-weight: 700; color: var(--primario); text-decoration: none; font-size: 1.05rem; }
.barra nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.barra nav a { color: var(--testo); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.barra nav a:hover { border-color: var(--primario); }
.barra .utente { margin-left: auto; color: var(--tenue); font-size: .9rem; }

main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.25rem; }
footer {
  max-width: 1100px; margin: 2rem auto; padding: 1rem 1.25rem;
  color: var(--tenue); font-size: .85rem; border-top: 1px solid var(--bordo);
}
footer a { color: var(--tenue); }

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .75rem; }

/* --- Avvisi --- */
.avviso { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .95rem; }
.avviso.ok { background: var(--ok-sfondo); color: var(--ok-testo); }
.avviso.ko { background: var(--ko-sfondo); color: var(--ko-testo); }
.avviso.attenzione { background: var(--att-sfondo); color: var(--att-testo); }

/* --- Calendario --- */
.testata-settimana {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.testata-settimana h1 { margin: 0; }

.calendario {
  width: 100%; border-collapse: collapse; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden;
}
.calendario th, .calendario td {
  border: 1px solid var(--bordo); padding: .5rem; vertical-align: top; text-align: left;
}
.calendario thead th { background: #eef0f3; font-size: .95rem; }
.calendario thead th .targa { display: block; font-weight: 400; color: var(--tenue); font-size: .8rem; }
.col-giorno { width: 8.5rem; background: #fafbfc; }
.nome-giorno { display: block; font-weight: 600; }
.numero-giorno { color: var(--tenue); font-size: .85rem; }
.calendario tr.oggi .col-giorno { background: var(--att-sfondo); }
.calendario tr.festivo .col-giorno { color: var(--tenue); }
.calendario td.occupata { background: var(--occupata); }

.prenotazione {
  display: block; text-decoration: none; color: var(--testo);
  background: var(--carta); border-left: 3px solid var(--primario);
  padding: .35rem .5rem; margin-bottom: .35rem; border-radius: 4px;
}
.prenotazione:hover { background: #fff8f8; }
.prenotazione .chi { display: block; font-size: .9rem; }
.prenotazione .nota { display: block; font-size: .8rem; color: var(--tenue); }
.aggiungi { display: inline-block; color: var(--tenue); text-decoration: none; font-size: .85rem; }
.aggiungi:hover { color: var(--primario); text-decoration: underline; }

/* --- Riquadri e form --- */
.riquadro, .riquadro-stretto {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 8px; padding: 1.25rem; margin-bottom: 1.25rem;
}
.riquadro-stretto { max-width: 34rem; }
.testo { max-width: 46rem; }
.testo li { margin-bottom: .25rem; }

label { display: block; margin-bottom: .9rem; font-size: .92rem; color: var(--tenue); }
input, select, textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem;
  font: inherit; color: var(--testo);
  border: 1px solid var(--bordo); border-radius: 6px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); border-color: var(--primario); }
.due-colonne { display: flex; gap: 1rem; }
.due-colonne > label { flex: 1; }

button, .bottone {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--primario); color: #fff; border: 1px solid var(--primario);
  padding: .5rem 1rem; border-radius: 6px; text-decoration: none;
}
button:hover, .bottone:hover { background: var(--primario-scuro); }
button.secondario, .bottone.secondario {
  background: #fff; color: var(--testo); border-color: var(--bordo);
}
button.secondario:hover, .bottone.secondario:hover { background: var(--sfondo); }
button.pericolo { background: #fff; color: var(--primario); }
button.piccolo, .bottone.piccolo { padding: .3rem .6rem; font-size: .85rem; font-weight: 500; }
form.in-linea { display: inline-block; margin: 0 .25rem 0 0; }
form.in-linea label { display: inline-block; margin-right: .5rem; }
form.in-linea input { display: inline-block; width: auto; }

/* --- Elenchi --- */
.elenco { width: 100%; border-collapse: collapse; background: var(--carta); margin-bottom: 1rem; }
.elenco th, .elenco td { border-bottom: 1px solid var(--bordo); padding: .5rem .6rem; text-align: left; }
.elenco th { font-size: .85rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .02em; }
.elenco.compatta { font-size: .85rem; }
.elenco tr.disattivato { color: var(--tenue); background: #fafafa; }
.elenco label { margin: 0; }
.azioni { white-space: nowrap; }

.scheda { display: grid; grid-template-columns: 9rem 1fr; gap: .4rem 1rem; margin: 0 0 1.5rem; }
.scheda dt { color: var(--tenue); font-size: .9rem; }
.scheda dd { margin: 0; }

.nota-piede { color: var(--tenue); font-size: .85rem; }

.modifica-utente {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  padding: .75rem 0 .25rem;
}
.modifica-utente label { margin: 0; flex: 1 1 10rem; }
.modifica-utente button { flex: 0 0 auto; }
details summary { cursor: pointer; }

/* --- Telefono --- */
@media (max-width: 720px) {
  .barra .utente { margin-left: 0; width: 100%; }
  .col-giorno { width: 5.5rem; }
  .calendario { font-size: .9rem; }
  .due-colonne { flex-direction: column; gap: 0; }
  main { padding: 0 .75rem; }
}