/* ────────────────────────────────────────────────────────────────
   RAPPORTINO C2 — stile da cantiere
   Palette Supino (TEMPLATE_SUPINO_NEUTRO_V1), font di sistema,
   contrasto alto per lettura al sole, target tattili ≥ 48 px.
   ──────────────────────────────────────────────────────────────── */
:root {
  --blu: #1f3864;
  --blu-l: #2e75b6;
  --blu-hdr: #d6e4f0;
  --rosso: #c00000;
  --rosso-bg: #fff0f0;
  --verde: #1a7a1a;
  --verde-bg: #e2efda;
  --giallo-bg: #fff2cc;
  --giallo-tx: #7f6000;
  --grigio: #f2f2f2;
  --grigio-m: #d9d9d9;
  --testo: #1a1a1a;
  --nota: #555555;
  --fondo: #f7f8fa;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  color: var(--testo);
  background: var(--fondo);
}

/* ── testata ── */
header.testata {
  background: #ffffff;
  border-bottom: 4px solid var(--blu);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
header.testata img { height: 40px; width: auto; }
header.testata .titolo { flex: 1; text-align: right; }
header.testata .titolo strong { display: block; color: var(--blu); font-size: 15px; line-height: 1.2; }
header.testata .titolo span { color: var(--nota); font-size: 12px; }

main { max-width: 640px; margin: 0 auto; padding: 12px 12px 90px; }

h2.sezione {
  color: var(--blu);
  border-bottom: 3px solid var(--blu-l);
  padding-bottom: 4px;
  font-size: 20px;
  margin: 22px 0 12px;
}
h2.sezione .passo { color: var(--blu-l); font-weight: 700; margin-right: 6px; }

/* ── intestazione da QR ── */
.scheda {
  background: #ffffff;
  border: 1px solid var(--grigio-m);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.scheda .riga { display: flex; border-bottom: 1px solid var(--grigio-m); }
.scheda .riga:last-child { border-bottom: none; }
.scheda .riga .et {
  flex: 0 0 38%;
  background: var(--blu-hdr);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 10px;
}
.scheda .riga .va { flex: 1; padding: 9px 10px; font-size: 15px; word-break: break-word; }

/* ── avvisi ── */
.avviso {
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 15px;
}
.avviso.giallo { background: var(--giallo-bg); color: var(--giallo-tx); border: 1px solid #e6cc7a; }
.avviso.rosso { background: var(--rosso-bg); color: #9c0006; border: 2px solid var(--rosso); font-weight: 600; }
.avviso.verde { background: var(--verde-bg); color: #375623; border: 1px solid #b7d3a8; }
.avviso a { color: inherit; font-weight: 700; }

/* ── form ── */
label.campo { display: block; margin: 12px 0 4px; font-weight: 700; font-size: 15px; }
label.campo .fac { font-weight: 400; color: var(--nota); font-size: 13px; }
input[type=text], input[type=tel], input[type=date], input[type=number], textarea {
  width: 100%;
  font-size: 17px;
  padding: 12px;
  border: 1.5px solid var(--grigio-m);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  min-height: 48px;
}
input:focus, textarea:focus, button:focus-visible {
  outline: 3px solid var(--blu-l);
  outline-offset: 1px;
}
input.errore, textarea.errore { border-color: var(--rosso); background: var(--rosso-bg); }
textarea { min-height: 72px; resize: vertical; }
.due-colonne { display: flex; gap: 10px; }
.due-colonne > div { flex: 1; }

/* ── checklist ── */
.punto {
  background: #fff;
  border: 1px solid var(--grigio-m);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
.punto .num {
  display: inline-block;
  background: var(--blu);
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 9px;
  margin-right: 8px;
  font-size: 15px;
}
.punto .rif { display: block; color: var(--nota); font-size: 13px; font-style: italic; margin: 4px 0 8px; }
.esiti { display: flex; gap: 8px; margin: 8px 0; }
.esiti button {
  flex: 1;
  min-height: 52px;
  font-size: 18px;
  font-weight: 700;
  border: 2px solid var(--grigio-m);
  border-radius: 10px;
  background: #fff;
  color: var(--nota);
  font-family: inherit;
}
.esiti button.sel-c { background: var(--verde-bg); border-color: var(--verde); color: var(--verde); }
.esiti button.sel-nc { background: var(--rosso-bg); border-color: var(--rosso); color: var(--rosso); }
.esiti button.sel-na { background: var(--blu-hdr); border-color: var(--blu-l); color: var(--blu); }

/* ── foto ── */
.foto-blocco {
  background: #fff;
  border: 1px solid var(--grigio-m);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
.foto-blocco.ok { border-color: var(--verde); }
.foto-blocco .tit { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.foto-blocco .tit .spunta { color: var(--verde); margin-right: 6px; }
.foto-riga { display: flex; align-items: center; gap: 10px; }
.foto-riga img {
  width: 84px; height: 84px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--grigio-m);
  background: var(--grigio);
}
.btn-foto {
  min-height: 52px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid var(--blu-l);
  border-radius: 10px;
  background: #fff;
  color: var(--blu);
  font-family: inherit;
}
.btn-foto.secondario { border-color: var(--grigio-m); color: var(--nota); font-weight: 400; }

/* ── firma ── */
.firma-box { background: #fff; border: 1px solid var(--grigio-m); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
canvas.firma {
  width: 100%;
  height: 170px;
  border: 2px dashed var(--blu-l);
  border-radius: 8px;
  background: #fff;
  display: block;
  touch-action: none;
}
.firma-strumenti { display: flex; gap: 8px; margin-top: 8px; }
.firma-strumenti button {
  flex: 1; min-height: 46px; font-size: 15px;
  border: 1.5px solid var(--grigio-m); border-radius: 8px;
  background: #fff; color: var(--nota); font-family: inherit;
}
.spunta-riga { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 16px; }
.spunta-riga input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--blu); }

/* ── pulsanti principali ── */
.azioni { position: fixed; left: 0; right: 0; bottom: 0; background: #ffffffee; border-top: 1px solid var(--grigio-m); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); backdrop-filter: blur(4px); }
.azioni .interno { max-width: 640px; margin: 0 auto; display: flex; gap: 10px; }
.btn {
  flex: 1;
  min-height: 56px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  font-family: inherit;
}
.btn.primario { background: var(--blu); color: #fff; }
.btn.primario:disabled { background: var(--grigio-m); color: #999; }
.btn.secondario { background: #fff; color: var(--blu); border: 2px solid var(--blu); flex: 0 0 auto; padding: 0 16px; }
.btn.pericolo { background: #fff; color: var(--rosso); border: 2px solid var(--rosso); }

/* ── liste errori / riepilogo ── */
ul.errori { background: var(--rosso-bg); border: 1.5px solid var(--rosso); border-radius: 10px; padding: 12px 12px 12px 30px; color: #9c0006; font-size: 15px; }
ul.errori li { margin: 4px 0; }

.coda-voce { background: #fff; border: 1px solid var(--grigio-m); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coda-voce .info { flex: 1 1 100%; font-size: 14px; }
.coda-voce .info strong { display: block; font-size: 15px; }
.coda-voce button { min-height: 46px; }

.nota-piccola { color: var(--nota); font-size: 13px; }
.privacy { color: var(--nota); font-size: 12px; margin-top: 18px; border-top: 1px solid var(--grigio-m); padding-top: 10px; }
.nascosto { display: none !important; }

.indirizzo-invio {
  background: var(--blu-hdr);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  margin: 12px 0;
}
.indirizzo-invio .email { font-size: 22px; font-weight: 700; color: var(--blu); word-break: break-all; }

.schermo-blocco { text-align: center; padding: 30px 16px; }
.schermo-blocco .icona { font-size: 52px; }
.schermo-blocco h2 { color: var(--blu); }

@media (prefers-reduced-motion: no-preference) {
  .punto, .foto-blocco { transition: border-color .15s ease; }
}