:root {
  --blu: #1a3b5d;
  --blu-chiaro: #2d5a87;
  --verde: #1e7e34;
  --rosso: #a01818;
  --grigio: #666;
  --sfondo: #f4f5f7;
  --bordo: #ccc;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  background: var(--sfondo);
  color: #222;
  margin: 0;
  font-size: 18px;
}

header.testata {
  background: var(--blu);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

header.testata a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 22px;
}

header.testata nav a {
  margin-right: 16px;
  font-size: 16px;
  font-weight: normal;
  opacity: 0.9;
}

header.testata nav a:hover { opacity: 1; text-decoration: underline; }

main { padding: 20px; max-width: 1100px; margin: 0 auto; }

h1 { font-size: 26px; }
h2 { font-size: 21px; color: var(--blu); }

.scheda {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 18px;
}

.pulsante {
  display: inline-block;
  font-size: 18px;
  padding: 14px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin: 6px 6px 6px 0;
  min-width: 140px;
  text-align: center;
}

.pulsante-blu { background: var(--blu-chiaro); color: #fff; }
.pulsante-verde { background: var(--verde); color: #fff; }
.pulsante-rosso { background: var(--rosso); color: #fff; }
.pulsante-grigio { background: #e0e0e0; color: #222; }
.pulsante:disabled { opacity: 0.5; cursor: wait; }

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  font-size: 18px;
  padding: 10px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  width: 100%;
  margin-bottom: 10px;
}

label { font-weight: bold; display: block; margin-top: 10px; }

.conteggio {
  display: inline-block;
  background: var(--blu);
  color: #fff;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 16px;
  margin-left: 8px;
}

.barra-progresso {
  background: #ddd;
  border-radius: 8px;
  height: 20px;
  overflow: hidden;
  margin: 10px 0;
}
.barra-progresso > div {
  background: var(--verde);
  height: 100%;
  transition: width 0.2s;
}

.foto-riquadro-contenitore {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.foto-riquadro-contenitore img, .foto-riquadro-contenitore canvas {
  display: block;
  max-width: 100%;
  border-radius: 6px;
}
.foto-riquadro-contenitore canvas {
  position: absolute;
  top: 0; left: 0;
}

.avviso { padding: 12px; border-radius: 8px; margin: 10px 0; }
.avviso-errore { background: #fdecea; color: var(--rosso); border: 1px solid var(--rosso); }
.avviso-ok { background: #e6f4ea; color: var(--verde); border: 1px solid var(--verde); }
.avviso-attesa { background: #fff8e1; color: #8a6400; border: 1px solid #c9a200; }

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--bordo); font-size: 16px; }
th { background: #eef1f4; }

.griglia-miniature {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.griglia-miniature img {
  width: 100%;
  border-radius: 6px;
  border: 3px solid transparent;
  cursor: pointer;
}
.griglia-miniature img.verificata { border-color: var(--verde); opacity: 0.6; }

#mappa-segnalazione { height: 320px; border-radius: 8px; margin: 10px 0; }