/* Strumento di lavoro: molto bianco, testo grande, il rosso solo per identità e azioni irreversibili.
   Il colore vero sta nel calendario, che è ciò che si guarda. */
:root {
  --rosso: #cc0000;
  --rosso-scuro: #a30000;
  --inchiostro: #1a1a1a;
  --grigio: #5c5c5c;
  --linea: #d6d6d6;
  --tenue: #f4f4f4;
  --fatto: #1d6b3a;
  --avviso: #7a5200;
}

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  color: var(--inchiostro);
  background: #fff;
  font-family: Lato, "Liberation Sans", Arial, sans-serif;
  line-height: 1.45;
}

a { color: var(--rosso-scuro); }

:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 2px; }

.testata {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 4vw, 3rem);
  background: var(--rosso);
  color: #fff;
}

.marchio { color: #fff; font-size: 1.3rem; font-weight: 900; text-decoration: none; }

.esci { display: flex; align-items: center; gap: 0.8rem; }

button.testuale {
  border: 0;
  padding: 0;
  background: none;
  color: #fff;
  font-weight: 400;
  text-decoration: underline;
}

button.testuale:hover { background: none; color: #fff; }

.sezioni {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.4rem;
  padding: 0.8rem clamp(1rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--linea);
}

.sezioni strong { font-size: 1.15rem; margin-right: 0.6rem; }

.sezioni .ritorno { flex-basis: 100%; font-size: 0.88rem; color: var(--grigio); }

.sezioni a:not(.ritorno) {
  padding-bottom: 0.5rem;
  border-bottom: 3px solid transparent;
  color: var(--inchiostro);
  text-decoration: none;
}

.sezioni a[aria-current="page"] { border-bottom-color: var(--rosso); font-weight: 700; }

main { max-width: 74rem; padding: 1.2rem clamp(1rem, 4vw, 3rem) 4rem; }

h1 { margin: 0.4rem 0 1rem; font-size: 1.9rem; font-weight: 900; line-height: 1.1; }

h2 { margin: 2.4rem 0 0.7rem; font-size: 1.3rem; }

h3 { margin: 1.6rem 0 0.5rem; font-size: 1.05rem; }

small { display: block; margin-top: 0.2rem; color: var(--grigio); font-size: 0.86rem; font-weight: 400; }

code { font-size: 0.95em; }

table { width: 100%; border-collapse: collapse; }

th { text-align: left; font-size: 0.88rem; color: var(--grigio); font-weight: 700; }

th, td { padding: 0.55rem 0.8rem 0.55rem 0; border-bottom: 1px solid var(--linea); vertical-align: middle; }

tr.spenta td { color: var(--grigio); }

.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }

.azioni form { margin: 0; }

.sostituisci { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.sostituisci input[type="file"] { max-width: 15rem; font-size: 0.85rem; }

button {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--inchiostro);
  border-radius: 3px;
  background: #fff;
  color: var(--inchiostro);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button:hover:not(:disabled) { background: var(--inchiostro); color: #fff; }

button:disabled { border-color: var(--linea); color: #8c8c8c; cursor: default; }

button.pericolo { border-color: var(--rosso-scuro); color: var(--rosso-scuro); }

button.pericolo:hover { background: var(--rosso-scuro); color: #fff; }

.modulo { display: grid; gap: 1rem; max-width: 34rem; }

.modulo.in-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; max-width: none; }

.modulo > button, .comandi { justify-self: start; }

.comandi { display: flex; align-items: center; gap: 1rem; }

.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

label { display: block; font-weight: 700; }

label[hidden] { display: none; }

input, select { font: inherit; }

.modulo input:not([type="checkbox"]):not([type="file"]), .modulo select {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #8c8c8c;
  border-radius: 3px;
  background: #fff;
  font-weight: 400;
}

.modulo input[type="file"] { display: block; margin-top: 0.3rem; font-weight: 400; }

input.corto, .modulo input.corto:not([type="checkbox"]):not([type="file"]) {
  width: 6rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #8c8c8c;
  border-radius: 3px;
}

.modulo input.codice:not([type="checkbox"]):not([type="file"]) {
  width: 11rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

fieldset.giorni { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; padding: 0; border: 0; }

fieldset.giorni legend { margin-bottom: 0.3rem; padding: 0; font-weight: 700; }

fieldset.giorni label, label.spunta { font-weight: 400; }

.separato { margin-top: 2rem; }

.elenco { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin: 0; padding: 0; list-style: none; }

.elenco a[aria-current="true"] { color: var(--inchiostro); font-weight: 700; text-decoration-color: var(--rosso); text-decoration-thickness: 3px; }

.nota { color: var(--grigio); font-size: 0.86rem; }

.stato { font-weight: 700; }

.stato.attivato { color: var(--fatto); }

.stato.attesa { color: var(--avviso); }

.stato.revocato { color: var(--rosso-scuro); }

.messaggio { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-left: 5px solid var(--inchiostro); background: var(--tenue); }

.messaggio.fatto { border-color: var(--fatto); }

.messaggio.errore { border-color: var(--rosso); }

.messaggio.avviso { border-color: #c98a00; }

/* Calendario dei 7 giorni */
.calendario { --colonna: 13rem; }

.scala {
  display: flex;
  justify-content: space-between;
  margin-left: var(--colonna);
  color: var(--grigio);
  font-size: 0.82rem;
}

.giorno {
  display: grid;
  grid-template-columns: var(--colonna) 1fr;
  align-items: center;
  column-gap: 0;
  padding: 0.35rem 0;
}

.giorno h3 { margin: 0; font-size: 0.98rem; font-weight: 700; }

.barra { display: block; width: 100%; height: 2.1rem; border: 1px solid var(--inchiostro); }

.tratti {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.1rem;
  margin: 0.25rem 0 0.4rem;
  padding: 0;
  color: var(--grigio);
  font-size: 0.84rem;
  list-style: none;
}

.tacca {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.3rem;
  border: 1px solid var(--inchiostro);
  vertical-align: -0.05rem;
}

/* Le stesse classi colorano il rettangolo SVG e la tacca della legenda */
rect.spento { fill: #2b2b2b; }
.tacca.spento { background: #2b2b2b; }
rect.neutro { fill: #e6e6e6; }
.tacca.neutro { background: #e6e6e6; }
rect.vuoto { fill: #f2c200; }
.tacca.vuoto { background: #f2c200; }
rect.colore-0 { fill: #cc0000; }
.tacca.colore-0 { background: #cc0000; }
rect.colore-1 { fill: #1f6f8b; }
.tacca.colore-1 { background: #1f6f8b; }
rect.colore-2 { fill: #5b8c3a; }
.tacca.colore-2 { background: #5b8c3a; }
rect.colore-3 { fill: #7a4f9e; }
.tacca.colore-3 { background: #7a4f9e; }
rect.colore-4 { fill: #c4692a; }
.tacca.colore-4 { background: #c4692a; }

/* Accesso */
.pagina-accesso { display: grid; min-height: 100vh; place-items: center; background: var(--rosso); padding: 1rem; }

.accesso { display: grid; gap: 1rem; width: min(100%, 24rem); padding: 1.8rem; background: #fff; }

.accesso h1 { margin: 0; }

.accesso input { display: block; width: 100%; margin-top: 0.2rem; padding: 0.5rem; border: 1px solid #8c8c8c; border-radius: 3px; font-weight: 400; }

.accesso button { justify-self: start; }

@media (max-width: 720px) {
  .calendario { --colonna: 0rem; }
  .giorno { grid-template-columns: 1fr; }
  .tratti { grid-column: 1; }
  .coppia { grid-template-columns: 1fr; }
  table { display: block; overflow-x: auto; }
}