:root {
  --bg: #f4f6f9; --card: #fff; --testo: #1d2733; --muted: #667085; --bordo: #dde2ea;
  --primario: #1f5fa8; --primario-scuro: #174a84; --top: #16324f;
  --rosso-bg: #fdecec; --rosso: #a4262c; --giallo-bg: #fff4dc; --giallo: #8a5a00;
  --verde-bg: #e6f4ea; --verde: #1e6b34; --blu-bg: #e3eefb; --blu: #1f5fa8;
  --ai-bg: #f1ecfd; --ai: #5b3cc4; --radius: 8px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--testo); background: var(--bg); }
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: .2rem 0 .8rem; }
h2 { font-size: 1.1rem; margin: 0 0 .7rem; }
h3 { font-size: 1rem; margin: .4rem 0; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; }
.pre { white-space: pre-wrap; }
.vuoto { color: var(--muted); font-style: italic; }
.rosso-testo { color: var(--rosso); }
[hidden] { display: none !important; }

.top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--top); color: #fff; padding: .55rem 1.2rem; }
.top a { color: #dbe6f3; }
.logo { font-weight: 700; font-size: 1.1rem; color: #fff !important; }
.logo span, .login h1 span { font-weight: 400; opacity: .75; }
.menu { display: flex; gap: .2rem; }
.menu a { padding: .35rem .65rem; border-radius: 6px; }
.menu a.attivo, .menu a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.contatore { display: inline-block; min-width: 1.4em; text-align: center; background: #e5484d; color: #fff; border-radius: 10px; padding: 0 .35em; font-size: .85em; font-weight: 600; }
.utente { margin-left: auto; display: flex; gap: .8rem; font-size: .9rem; }
.banner { padding: .55rem 1.2rem; }
.banner-giallo { background: #fff3c4; }

.contenuto { max-width: 1280px; margin: 0 auto; padding: 1.2rem; }
.card { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.card-testa, .pagina-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pagina-testa { margin-bottom: .6rem; }
.briciole { margin: 0; color: var(--muted); font-size: .9rem; }
.griglia-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 1rem; }
.azioni { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.azioni form { margin: 0; }
.flash { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.flash-ok { background: var(--verde-bg); color: var(--verde); }
.flash-errore { background: var(--rosso-bg); color: var(--rosso); }
.avviso { background: var(--giallo-bg); padding: .6rem .8rem; border-radius: 6px; margin-bottom: 1rem; }

.btn { display: inline-block; background: var(--primario); color: #fff; border: 0; border-radius: 6px; padding: .5rem .95rem; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--primario-scuro); text-decoration: none; color: #fff; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.secondario { background: #e8edf4; color: var(--testo); }
.btn.secondario:hover { background: #dbe2ec; }
.btn.pericolo { background: var(--rosso); }
.btn.ai { background: var(--ai); }
.btn.piccolo { padding: .25rem .55rem; font-size: .85rem; font-weight: 500; }

input, select, textarea { font: inherit; padding: .42rem .55rem; border: 1px solid var(--bordo); border-radius: 6px; background: #fff; width: 100%; }
textarea { min-height: 4.5rem; resize: vertical; }
label { display: block; font-size: .9rem; color: #344054; margin-bottom: .7rem; }
label input, label select, label textarea { margin-top: .2rem; }
label.spunta { display: flex; gap: .5rem; align-items: center; }
label.spunta input { width: auto; margin: 0; }
.obbligatorio::after { content: " *"; color: var(--rosso); }
.form-riga { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.form-riga label { flex: 1 1 180px; margin: 0; }
.form-colonna { max-width: 460px; }
.filtro { max-width: 340px; margin-bottom: .8rem; }

.tabella { width: 100%; border-collapse: collapse; }
.tabella th, .tabella td { padding: .45rem .5rem; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: top; }
.tabella th { font-size: .82rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.tabella-scroll { overflow-x: auto; }
.etichetta { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .45rem; border-radius: 10px; margin-right: .2rem; }
.etichetta.rosso { background: var(--rosso-bg); color: var(--rosso); }
.etichetta.giallo { background: var(--giallo-bg); color: var(--giallo); }
.etichetta.verde { background: var(--verde-bg); color: var(--verde); }
.etichetta.blu { background: var(--blu-bg); color: var(--blu); }

/* Login */
.pagina-login { display: grid; place-items: center; min-height: 100vh; }
.login { width: min(380px, 92vw); }

/* Questionario */
.layout-cliente { display: grid; grid-template-columns: 210px 1fr; gap: 1rem; align-items: start; }
.indice-sezioni { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.indice-sezioni a { padding: .35rem .6rem; border-radius: 6px; color: var(--testo); }
.indice-sezioni a:hover { background: #e8edf4; text-decoration: none; }
.sezione { scroll-margin-top: 1rem; }
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 1rem; }
.campo-largo { grid-column: 1 / -1; }
.tabella-modulo { width: 100%; border-collapse: collapse; margin: .2rem 0 .4rem; }
.tabella-modulo th { font-size: .8rem; color: var(--muted); text-align: left; font-weight: 600; padding: .2rem .3rem; }
.tabella-modulo td { padding: .15rem .3rem; }
.tabella-modulo td.azione { width: 2rem; }
.tabella-modulo tr.proposta-ai td input, .tabella-modulo tr.proposta-ai td select { background: var(--ai-bg); border-color: #cbbcf4; }
.togli { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1rem; }
.togli:hover { color: var(--rosso); }
.etichetta-campo { font-size: .9rem; color: #344054; margin: .3rem 0 .1rem; }

.pianta { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 1rem; margin-bottom: 1rem; }
.pianta img { width: 100%; border: 1px solid var(--bordo); border-radius: 6px; }
.proposta { background: var(--ai-bg); border: 1px solid #d8ccf8; border-radius: var(--radius); padding: .8rem 1rem; }
.proposta ul { margin: .3rem 0 .6rem 1.2rem; padding: 0; }

.zona-pericolo { display: flex; gap: .6rem; flex-wrap: wrap; }
.zona-pericolo form { margin: 0; }

/* Risultato */
.note-revisore h2 { margin-top: 1rem; }
.note-revisore li.spunta { list-style: none; margin-left: -1.3rem; }
.note-revisore li.spunta input { width: auto; margin-right: .4rem; }

/* Norme */
.avviso-norma { border-top: 1px solid var(--bordo); padding: .7rem 0; }
.avviso-norma:first-of-type { border-top: 0; }
.avviso-norma.stato-verificato, .avviso-norma.stato-ignorato { opacity: .6; }
.avviso-norma form input { flex: 1 1 260px; }

@media (max-width: 800px) {
  .layout-cliente { grid-template-columns: 1fr; }
  .indice-sezioni { position: static; flex-direction: row; flex-wrap: wrap; }
  .pianta { grid-template-columns: 1fr; }
}

/* prima pagina: scelta della sede dalla visura */
.elenco-sedi { display: grid; gap: .4rem; margin-bottom: .8rem; }
.elenco-sedi label { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--bordo); border-radius: 6px; padding: .5rem .7rem; cursor: pointer; margin: 0; }
.elenco-sedi input[type=radio] { width: auto; margin-top: .2rem; }
.elenco-sedi label:has(input:checked) { border-color: var(--ai, #6d28d9); background: #faf8ff; }
.form-riga label.largo { flex: 3 1 320px; }
#riepilogo-visura .avviso, #riepilogo-visura p { margin: .3rem 0 .8rem; }