:root {
  --bg: #ffffff;
  --fg: #1f2328;
  --muted: #5d6670;
  --line: #d8dde3;
  --accent: #1f6feb;
  --rail-w: 64px;
  --panel-w: 340px;
  --scheda-w: 340px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--fg);
}
html, body { margin: 0; height: 100%; background: #e9ecef; overflow: hidden; }
/* --sx: larghezza occupata a sinistra da barra delle viste e pannello (serve a ciò che si appoggia alla mappa) */
body { --sx: calc(var(--rail-w) + var(--panel-w)); }
body.pannello-chiuso { --sx: var(--rail-w); }
#map { position: absolute; inset: 0; }

/* ---------- barra delle viste ---------- */
#viste { position: absolute; top: 0; left: 0; bottom: 0; width: var(--rail-w); box-sizing: border-box; z-index: 12;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: #22303c; }
#viste [role=tablist] { flex: 1; display: flex; flex-direction: column; gap: 2px; }
#viste button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 6px; border: 0; border-radius: 8px;
  background: none; color: #b9c4cf; font: inherit; font-size: 11px; cursor: pointer; }
#viste button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#viste button:hover { background: rgba(255,255,255,.08); color: #fff; }
#viste button[aria-selected=true] { background: rgba(255,255,255,.16); color: #fff; }
#viste button:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 1px; }
#viste #apri-guida { color: #ffd54f; }
/* passaggio all'ambiente separato di validazione del rilievo */
#viste #vai-validazione { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 6px; border-radius: 8px; color: #7fd6c9;
  font-size: 10px; text-decoration: none; border-top: 1px solid rgba(255,255,255,.14); }
#viste #vai-validazione svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#viste #vai-validazione:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---------- pannello: intestazione con la ricerca, una vista alla volta, stato in fondo ---------- */
#pannello {
  position: absolute; top: 0; left: var(--rail-w); bottom: 0; z-index: 11;
  width: var(--panel-w); max-width: calc(100vw - var(--rail-w)); box-sizing: border-box;
  background: var(--bg); border-right: 1px solid var(--line);
  box-shadow: 4px 0 18px rgba(0,0,0,.10);
  display: flex; flex-direction: column;
}
body.pannello-chiuso #pannello { display: none; }
#pannello > header { padding: 12px 16px; border-bottom: 1px solid var(--line); }
#pannello h1 { font-size: 16px; margin: 0; }
.sotto { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.vista { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; }
.vista[hidden] { display: none; }
.vista > h2 { font-size: 15px; margin: 14px 0 0; }
.vista > h2 + .sotto { margin: 2px 0 12px; }
.blocco { padding: 10px 0 12px; border-top: 1px solid var(--line); }
.blocco > h3, :is(#pannello, #scheda) label, .etichetta { display: block; font-weight: 600; font-size: 12px; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; }
:is(#pannello, #scheda) label.check { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg); font-size: 14px; margin: 3px 0; cursor: pointer; }
.etichetta + label.check { margin-top: 0; }
#pannello .vista label:not(.check):not(:first-child), .vista .etichetta:not(:first-child) { margin-top: 10px; }
select, input[type=search] { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; }
.tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 0 5px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--muted); vertical-align: 1px; }
.tag.sim { border-color: #f0c48a; background: #fff4e5; color: #8a5300; }
.tag.reale { border-color: #9fd3a8; background: #eef8f0; color: #1b5e20; }

.cerca { position: relative; margin-top: 8px; }
#suggerimenti { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 6px; max-height: 220px; overflow: auto; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
#suggerimenti li { padding: 6px 8px; cursor: pointer; }
#suggerimenti li:hover, #suggerimenti li.attivo { background: #eef4ff; }

#stato { padding: 8px 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }

/* ---------- legenda sulla mappa (colore degli edifici e mappa di calore attivi) ---------- */
#legenda-mappa { position: absolute; left: calc(var(--sx) + 12px); bottom: 12px; z-index: 5; width: max-content; max-width: 250px; font-size: 12px;
  background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
#legenda-mappa .titolo { font-weight: 600; margin-bottom: 4px; }
#legenda-mappa .voce { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
#legenda-mappa .col { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); flex: none; }
#legenda-mappa .rampa { height: 10px; min-width: 180px; border-radius: 3px; margin: 4px 0 2px; }
#legenda-mappa .estremi { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
#legenda-calore:not(:empty) { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
body:has(.barra-editor) #legenda-mappa, #legenda-mappa:not(:has(.titolo)) { display: none; }

/* ---------- scheda dell'elemento selezionato (a destra) ---------- */
#scheda { position: absolute; top: 12px; right: 12px; z-index: 12; width: var(--scheda-w); max-width: calc(100vw - 24px); max-height: calc(100% - 60px);
  box-sizing: border-box; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.14); }
#scheda[hidden] { display: none; }
#scheda > header { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--line); }
#scheda > header .etichetta { margin: 0; }
#scheda > header button { border: 0; background: none; font-size: 15px; color: var(--muted); cursor: pointer; padding: 4px 9px; border-radius: 6px; }
#scheda > header button:hover { background: #eef4ff; color: var(--fg); }
#info { padding: 8px 14px 14px; overflow-y: auto; min-height: 0; }
#info .vuoto { color: var(--muted); margin: 4px 0; }
#info h2 { font-size: 15px; margin: 4px 0 2px; }
#info h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 12px 0 4px; }
#info table { width: 100%; border-collapse: collapse; font-size: 13px; }
#info td { padding: 2px 0; vertical-align: top; }
#info td:first-child { color: var(--muted); width: 48%; padding-right: 8px; }
#info .nota { font-size: 12px; color: var(--muted); margin: 4px 0; }
#info .barra { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 1px 0; }
#info .barra span:first-child { width: 92px; color: var(--muted); flex: none; }
#info .barra .b { height: 9px; background: var(--accent); border-radius: 2px; }
#info .avviso { background: #fff4e5; border: 1px solid #f0c48a; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin: 6px 0; }
/* con la scheda aperta i comandi della mappa e la procedura guidata le si affiancano */
@media (min-width: 901px) {
  body.scheda-aperta:not(.pv-aperto) .maplibregl-ctrl-top-right { right: calc(var(--scheda-w) + 12px); }
}
@media (min-width: 1200px) {
  body.scheda-aperta:not(.pv-aperto) .procedura { right: calc(var(--scheda-w) + 68px); }
}
/* poco spazio (schermo stretto o previsioni aperte a destra): la scheda si sovrappone al pannello */
body.pv-aperto #scheda { right: auto; left: calc(var(--rail-w) + 8px); top: 8px; width: calc(var(--panel-w) - 16px); max-height: calc(100% - 16px); }
@media (max-width: 900px) {
  #scheda { right: auto; left: calc(var(--rail-w) + 8px); top: 8px; width: calc(var(--panel-w) - 16px); max-height: calc(100% - 16px); }
}

.comandi { margin-top: 6px; line-height: 1.5; }
kbd { font: 11px/1 ui-monospace, monospace; padding: 1px 4px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: #f6f8fa; }
.controllo-vista button { font-size: 13px; font-weight: 700; color: #333; }

@media (max-width: 600px) {
  /* telefono: viste in una barra in basso, pannello a mezza altezza sopra la barra */
  body, body.pannello-chiuso { --sx: 0px; }
  #viste { top: auto; right: 0; width: auto; height: 56px; flex-direction: row; padding: 4px 6px; }
  #viste [role=tablist] { flex-direction: row; }
  #viste button { flex: 1; padding: 5px 4px 3px; }
  #pannello { top: auto; left: 0; right: 0; bottom: 56px; width: auto; max-width: none; height: 42vh; border-right: 0; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(0,0,0,.12); }
  #scheda, body.pv-aperto #scheda { top: auto; left: 8px; right: 8px; bottom: 64px; width: auto; max-height: 60vh; }
  #legenda-mappa { left: 8px; top: 8px; bottom: auto; }
}

/* ---------- strumenti di misura, aggiornamento, simulazione ---------- */
.etichetta-misura .maplibregl-popup-content { padding: 6px 10px; font-size: 12px; line-height: 1.45; background: #fffdf7; border: 1px solid #ff6f00; }
.pulsanti { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pulsanti button, a.bottone, button.primario, button.mini {
  font: inherit; font-size: 13px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: #f6f8fa;
  color: var(--fg); cursor: pointer; text-decoration: none; }
.pulsanti button:hover:not(:disabled), a.bottone:hover { background: #eef4ff; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primario { background: var(--accent); border-color: var(--accent); color: #fff; margin-top: 8px; }
button.mini { font-size: 11px; padding: 1px 6px; }
.pulsanti button.attivo { background: #fff3e0; border-color: #ff6f00; box-shadow: inset 0 0 0 1px #ff6f00; }
.modulo { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.modulo label { margin: 6px 0 2px !important; }
.modulo input[type=text], .modulo input[type=number] { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
#pannello .nota { font-size: 12px; color: var(--muted); margin: 4px 0; }
#pannello .nota:empty { display: none; }
#pannello .avviso { background: #fff4e5; border: 1px solid #f0c48a; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin: 6px 0; display: inline-block; }
table.registro td { font-size: 12px; border-top: 1px solid var(--line); padding: 3px 4px 3px 0 !important; }
table.registro td:first-child { width: 28% !important; }
.elenco { list-style: none; margin: 4px 0; padding: 0; font-size: 13px; }
.elenco li { margin: 3px 0; }
.elenco li .linea { vertical-align: middle; margin-right: 4px; }
.linea { display: inline-block; width: 18px; height: 4px; border-radius: 2px; flex: none; }
#sim-legenda { font-size: 12px; margin: 6px 0; }
#sim-legenda .voce { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
table.confronto { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
table.confronto td { padding: 2px 4px 2px 0; border-top: 1px solid var(--line); }
table.confronto td.meglio { color: #2e7d32; }
table.confronto td.peggio { color: #c62828; }
#simulazione h3, #aggiornamento h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 12px 0 4px; }

/* ---------- procedura guidata ---------- */
.procedura { position: absolute; top: 12px; right: 56px; z-index: 20; width: 360px; max-width: calc(100vw - 80px); max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18); z-index: 20; font-size: 13px; }
.procedura header { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.procedura header > div { flex: 1; }
.procedura header b { font-size: 15px; }
.procedura .chiudi { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--muted); }
.procedura .passi { display: flex; margin: 0; padding: 8px 14px; gap: 4px; list-style: none; counter-reset: passo; border-bottom: 1px solid var(--line); }
.procedura .passi li { flex: 1; font-size: 11px; color: var(--muted); text-align: center; padding-top: 22px; position: relative; counter-increment: passo; }
.procedura .passi li::before { content: counter(passo); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 18px;
  line-height: 18px; border-radius: 50%; background: #e0e0e0; color: #555; font-weight: 700; }
.procedura .passi li.corrente { color: var(--fg); font-weight: 700; }
.procedura .passi li.corrente::before { background: var(--accent); color: #fff; }
.procedura .passi li.fatto::before { content: "✓"; background: #2e7d32; color: #fff; }
.procedura .corpo { padding: 10px 14px; overflow-y: auto; }
.procedura .corpo p { margin: 4px 0 8px; }
.procedura footer { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.procedura footer button { font: inherit; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: #f6f8fa; cursor: pointer; }
.procedura footer button.primario { background: var(--accent); border-color: var(--accent); color: #fff; margin: 0; }
.procedura .errore-passo { margin: 0 14px 6px; color: #b71c1c; font-size: 12px; }
.procedura .esito { background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 6px; padding: 8px 10px; font-weight: 600; color: #1b5e20; }
.procedura .modulo label { display: block; font-weight: 600; font-size: 11px; color: var(--muted); margin: 8px 0 3px; text-transform: uppercase; letter-spacing: .03em; }
.procedura .modulo label.check { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--fg); }
.procedura input[type=text], .procedura input[type=number], .procedura input[type=date], .procedura input[type=search], .procedura select, .procedura textarea {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; }
.procedura input[type=range] { width: 100%; }
.procedura .due { display: flex; gap: 8px; }
.procedura .due > div { flex: 1; min-width: 0; }
.procedura .suggerimenti { margin: 4px 0 8px; padding-left: 18px; color: var(--muted); font-size: 12px; }
.procedura .suggerimenti li { margin: 2px 0; }
.procedura table.riepilogo { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.procedura table.riepilogo td { padding: 3px 4px 3px 0; border-top: 1px solid var(--line); vertical-align: top; }
.procedura table.riepilogo td:first-child { color: var(--muted); width: 32%; }
.procedura .avviso { background: #fff4e5; border: 1px solid #f0c48a; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin: 6px 0; }
.procedura .misura-pianta, .procedura .estremi { font-size: 12px; margin-top: 6px; }
.errore { color: #b71c1c; }

/* ---------- editor geometrico ---------- */
.barra-editor { position: absolute; left: calc(var(--sx) + 12px); right: 12px; bottom: 28px; max-width: 860px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 8px 10px; z-index: 15; font-size: 12px; }
.barra-editor .riga1 { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.barra-editor .riga1 b { font-size: 13px; margin-right: 4px; }
.barra-editor .spazio, .procedura .spazio { flex: 1; }
.barra-editor .sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.barra-editor button { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: #f6f8fa; cursor: pointer; }
.barra-editor button.attivo { background: #fff3e0; border-color: #ff6f00; box-shadow: inset 0 0 0 1px #ff6f00; }
.barra-editor label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.barra-editor .riga2 { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--muted); }
.barra-editor .misure { font-weight: 600; color: var(--fg); white-space: nowrap; }
.barra-editor .lunghezza, .barra-editor .coordinate { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.barra-editor .lunghezza input { width: 90px; padding: 3px 6px; font: inherit; border: 1px solid #ff6f00; border-radius: 4px; }
.barra-editor textarea { width: 100%; box-sizing: border-box; font: 12px ui-monospace, monospace; border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.quota { background: rgba(255,255,255,.92); border: 1px solid #ff6f00; border-radius: 4px; padding: 1px 5px; font-size: 11px; font-weight: 600;
  color: #bf360c; white-space: nowrap; pointer-events: none; }
.quota.modificabile { pointer-events: auto; cursor: pointer; }
.quota.modificabile:hover { background: #fff3e0; }
.quota input { width: 64px; font: inherit; padding: 0 3px; }
@media (min-width: 901px) { body.scheda-aperta:not(.pv-aperto) .barra-editor { right: calc(var(--scheda-w) + 24px); } }
@media (max-width: 900px) { .barra-editor { left: calc(var(--rail-w) + 12px); } }
@media (max-width: 600px) { .procedura { top: 8px; right: 8px; left: 8px; width: auto; max-height: 50vh; } .barra-editor { left: 12px; bottom: 50vh; } }

/* ---------- asset del rilievo ---------- */
.banner-demo { background: #fff8e1; border: 1px solid #ffd54f; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin-bottom: 8px; line-height: 1.4; }
#asset .conta { color: var(--muted); font-size: 12px; margin-left: 4px; }
#asset-legenda { font-size: 12px; margin: 6px 0; }
#asset-legenda .voce { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
#asset-legenda .col { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.badge, .badge-stato { display: inline-block; color: #fff; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 2px 8px; margin: 4px 4px 4px 0; }
.badge-stato { color: #1f2328; background: #eee; border: 1px solid rgba(0,0,0,.1); }
figure.foto { margin: 6px 0; }
figure.foto img { width: 100%; border-radius: 6px; display: block; }
figure.foto figcaption { font-size: 11px; color: var(--muted); margin-top: 3px; }
.pulsanti.validazione button { font-weight: 600; }
.badge-stato { background: #fff !important; }
.badge-stato .pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* ---------- cruscotto ---------- */
.cruscotto { position: fixed; inset: 0; background: rgba(20,24,28,.45); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; }
.cr-finestra { background: #fcfcfb; border-radius: 12px; width: min(1000px, 100%); padding: 18px 22px 24px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.cr-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cr-testa h2 { margin: 0; font-size: 19px; }
.cr-azioni { display: flex; gap: 6px; }
.cr-azioni button { font: inherit; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.cr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0 6px; }
.cr-tile { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; }
.cr-tile-t { font-size: 12px; color: var(--muted); }
.cr-tile-v { font-size: 26px; font-weight: 700; margin: 2px 0; }
.cruscotto section { margin-top: 16px; }
.cruscotto h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 8px; }
.cr-legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; margin-bottom: 8px; color: #1f2328; }
.cr-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.cr-riga { display: grid; grid-template-columns: 260px 1fr; gap: 10px; align-items: center; margin: 5px 0; font-size: 13px; }
.cr-nome .nota { margin-left: 6px; }
.cr-barra { display: flex; gap: 2px; height: 16px; }
.cr-barra span { min-width: 2px; border-radius: 0; }
.cr-barra span:first-child { border-radius: 4px 0 0 4px; }
.cr-barra span:last-child { border-radius: 0 4px 4px 0; }
.cr-barra span:only-child { border-radius: 4px; }
.cr-tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.man-tabella { max-width: 100%; overflow-x: auto; margin: 10px 0; }
.man-tabella .cr-tab { min-width: 620px; }
.man-tabella:focus-visible { outline: 2px solid #2875b5; outline-offset: -2px; }
.cr-tab th, .cr-tab td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.cr-tab th { color: var(--muted); font-weight: 600; }
.cr-scorri { overflow-x: auto; }
.cr-ok { color: #1b5e20; font-weight: 600; white-space: nowrap; }
.cr-ko { color: #b71c1c; font-weight: 600; white-space: nowrap; }
.cr-tip { position: fixed; z-index: 60; background: #1f2328; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px; pointer-events: none; }
.cr-export a { margin-right: 4px; }
@media (max-width: 640px) { .cr-riga { grid-template-columns: 1fr; gap: 3px; } }
@media print {
  body > *:not(.cruscotto) { display: none !important; }
  .cruscotto { position: static; background: none; padding: 0; }
  .cr-finestra { box-shadow: none; width: 100%; }
  .cr-azioni { display: none; }
  .cr-barra span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- guida ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid; border-radius: 10px; padding: 1px 8px; font-size: 11px; white-space: nowrap; }
.pill i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.guida .cr-tab td:first-child { width: 34%; font-weight: 600; }
.nuvola-box { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
#nuvola .nuvola-box { margin-top: 0; padding-top: 0; border-top: 0; }
#nuvola-legenda .voce { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 2px 0; }
#nuvola-legenda .col { width: 10px; height: 10px; border-radius: 2px; flex: none; }
#nuvola-dim { width: 100%; }
.cr-finestra.sferica { width: min(1100px, 100%); }
#pano { width: 100%; height: min(70vh, 620px); border-radius: 8px; overflow: hidden; margin-top: 10px; }

/* ---------- previsioni ---------- */
.pv-elenco { display: flex; flex-direction: column; gap: 6px; }
.pv-elenco button { display: flex; gap: 10px; align-items: flex-start; text-align: left; font: inherit; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; cursor: pointer; }
.pv-elenco button:hover:not(:disabled) { background: #eef4ff; }
.pv-elenco .pv-ic { font-size: 20px; line-height: 1; }
.pv-pannello { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, calc(100vw - var(--sx) - 40px)); background: #fcfcfb; z-index: 30;
  box-shadow: -6px 0 24px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.pv-pannello > header { display: flex; justify-content: space-between; gap: 10px; padding: 14px 18px 8px; border-bottom: 1px solid var(--line); }
.pv-pannello > header h2 { margin: 0; font-size: 17px; }
.pv-pannello > header button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 9px; cursor: pointer; height: fit-content; }
.pv-corpo { padding: 12px 18px 24px; overflow-y: auto; }
.pv-corpo section { margin-top: 16px; }
.pv-corpo h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 8px; }
.pv-corpo .cr-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pv-corpo .cr-tile-v { font-size: 22px; }

/* con il pannello delle previsioni aperto, i comandi della mappa si spostano accanto al pannello */
body.pv-aperto .maplibregl-ctrl-top-right { right: min(520px, calc(100vw - var(--sx) - 40px)); }
body.pv-aperto .barra-editor { right: calc(min(520px, 100vw - var(--sx) - 40px) + 12px); }
@media (max-width: 900px) {
  /* schermo stretto: riquadro nella metà bassa, la mappa resta visibile sopra */
  .pv-pannello { top: auto; left: 0; width: 100vw; height: 58vh; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.2); }
  body.pv-aperto .maplibregl-ctrl-top-right { right: 0; }
  body.pv-aperto #pannello, body.pv-aperto #viste { display: none; }
}

/* legenda degli edifici: le voci a classi sono pulsanti che filtrano; filtri attivi nel pannello */
#legenda-mappa button.voce { display: flex; align-items: center; gap: 6px; width: 100%; margin: 1px 0; padding: 1px 4px 1px 0; border: 0; border-radius: 4px;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
#legenda-mappa button.voce:hover { background: #eef4ff; }
#legenda-mappa button.voce[aria-pressed="true"] { font-weight: 600; }
#legenda-mappa button.voce.spenta { opacity: .4; }
#legenda-mappa .suggerimento { margin-top: 3px; font-size: 11px; color: var(--muted); }
.filtro-attivo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 6px 0 0; padding: 5px 8px; font-size: 12px;
  border: 1px solid #ff6f00; border-radius: 6px; background: #fff3e0; }

/* selettore della data nella vista Mappa */
.riga-data { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.riga-data input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.riga-data input[type=date] { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.riga-data b { min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.riga-data label { margin: 0; }

/* ---------- scenari: previsioni da leggere sulla mappa (scenari.js) ---------- */
/* Primo schermo in tre righe: risposta, 2-3 numeri chiave, una sola etichetta di provenienza. Il resto sta in sezioni richiuse,
   in «Parametri» o in «Fonti e limiti». Testi con contrasto almeno 4,5:1 sul loro sfondo (tests/scenari_telaio.test.cjs). */
.sc-scheda { position: fixed; top: 12px; right: 12px; width: 460px; max-height: calc(100vh - 24px); z-index: 30; display: flex; flex-direction: column;
  background: #fcfcfb; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.sc-scheda [hidden], .sc-legenda-mappa[hidden] { display: none !important; }
.sc-scheda :focus-visible, .sc-tempo :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-cambio { display: flex; align-items: center; gap: 10px; padding: 10px 14px 0; font-size: 13px; color: var(--muted); }
.sc-cambio select { flex: 1; min-width: 0; padding: 7px; font: inherit; color: var(--fg); background: white; border: 1px solid var(--line); border-radius: 6px; }
.sc-sezioni { display: flex; gap: 4px; padding: 6px 14px; border-bottom: 1px solid var(--line); }
.sc-sezioni button { flex: 1; padding: 7px 4px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.sc-sezioni button[aria-pressed=true] { color: #164e83; background: #e8f1fa; font-weight: 700; }
.sc-scheda > header { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.sc-scheda > header h2 { margin: 2px 0 0; font-size: 17px; line-height: 1.25; }
.sc-scheda > header button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 9px; cursor: pointer; height: fit-content; }
/* «? Guida» del settore (tutorial.js) accanto alla ×, nella riga del titolo dell'analisi */
.sc-testa-az { display: flex; gap: 6px; align-items: flex-start; flex: none; }
.sc-scheda > header .sc-guida { font: inherit; font-size: 12px; font-weight: 600; color: #155fb8; border-color: #b6d2f7; border-radius: 12px; white-space: nowrap; }
.sc-scheda > header .sc-guida:hover { background: #e6f0ff; }
.sc-occhiello { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
/* carta d'uso sotto la domanda: per chi è, quando si usa, cosa produce (contratto `uso`) */
.sc-uso { margin: 0; padding: 6px 14px 7px; font-size: 12px; line-height: 1.4; color: #3d4650; background: #f6f8fa; border-bottom: 1px solid var(--line); }
.sc-uso b { color: #1f2328; font-weight: 600; }
.sc-uso summary { cursor: pointer; }
.sc-uso[open] summary { margin-bottom: 2px; }
/* etichetta «ufficiale» / «stima del gemello» (Scenari.fonte): colori delle provenienze, inline */
.sc-fonte { display: inline-block; max-width: 100%; box-sizing: border-box; font-size: 11px; font-weight: 700; line-height: 1.35; padding: 0 7px; border: 1px solid; border-radius: 9px; vertical-align: 1px; overflow-wrap: anywhere; }
/* «nel modello operativo» (Scenari.operativo): da dove verrebbe davvero il dato simulato; tratteggiato, per non sembrare una provenienza */
.sc-operativo { display: inline-block; max-width: 100%; box-sizing: border-box; font-size: 11px; font-weight: 600; line-height: 1.35; padding: 0 7px; border: 1px dashed #4a7c9b; border-radius: 9px; color: #1f4f6e; background: #eef6fb; vertical-align: 1px; overflow-wrap: anywhere; }
.sc-fonte-n { font-weight: 400; }
.sc-tile-f { margin-top: 3px; }
.sc-corpo { padding: 10px 16px 12px; overflow-y: auto; min-height: 0; }

/* riga 0: data mostrata ed etichetta di provenienza (dettaglio al passaggio del mouse, al clic e da tastiera) */
.sc-testa-r { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sc-data-risultato { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.sc-prov-w { position: relative; flex: none; }
/* «Dati usati»: collegamento alle serie misurate dell'analisi (Serie storiche), a sinistra dell'etichetta */
.sc-dati-usati { flex: none; font: inherit; font-size: 12px; padding: 2px 0; background: none; border: 0; color: #1558b0; text-decoration: underline; cursor: pointer; }
.sc-prov { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border: 1px solid; border-radius: 10px; cursor: pointer; }
.sc-prov::after { content: " ⓘ"; font-weight: 400; }
.sc-prov-d { position: absolute; right: 0; top: calc(100% + 4px); z-index: 3; width: 300px; max-width: 70vw; padding: 8px 10px; background: #fff; color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.14); font-size: 12px; line-height: 1.45; }
.sc-prov-d p { margin: 0 0 6px; }
.sc-prov-d ul, .sc-dati { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-prov-f { color: var(--muted); }

/* riga 1: la risposta, con gli avvisi brevi */
.sc-risposta { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 8px; color: var(--fg); }
.sc-scaduta, .sc-avviso { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #b26a00; background: #fff4e5; color: #6b3f00; font-size: 13px; line-height: 1.4; }
.sc-caso { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #3776a8; background: #edf4fa; font-size: 13px; line-height: 1.4; }
.sc-caso p, .sc-tranquilla p { margin: 0; }
.sc-caso button { flex: none; white-space: nowrap; }
.sc-caso-dove { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 2px; }
.sc-caso:hover .sc-caso-dove, .sc-caso:focus-within .sc-caso-dove { -webkit-line-clamp: unset; line-clamp: unset; }
.sc-tranquilla { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #4f7d5c; background: #f1f7f2; font-size: 13px; line-height: 1.4; }
.sc-tranquilla .pulsanti { margin: 6px 0 0; gap: 4px; }
.sc-caso-b { text-align: left; }
.sc-caso-b span { color: var(--muted); font-size: 12px; }

/* riga 2: i numeri chiave (al massimo 3), con la differenza dalla base */
.sc-kpi, .sc-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.sc-kpi:empty { display: none; }
.sc-tile { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: #fff; }
.sc-tile-t { font-size: 12px; color: var(--muted); line-height: 1.3; }
.sc-tile-v { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 2px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc-tile-d { font-size: 12px; color: #164e83; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sc-vuoti { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.sc-ipotesi { margin: 8px 0; padding: 6px 10px; border: 1px dashed #c08a3e; border-radius: 8px; color: #6b3f00; font-size: 12px; line-height: 1.4; }
.sc-ipotesi p { margin: 0; }
.sc-ipotesi .pulsanti, .sc-nomi .pulsanti { margin: 6px 0 0; gap: 4px; }
.sc-ipotesi .pulsanti button, .sc-nomi .pulsanti button, .sc-tranquilla .pulsanti button, .sc-caso button { font-size: 12px; }
.sc-nomi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 8px 0; font-size: 12px; }
.sc-nomi-t { color: var(--muted); }
.sc-scheda .pulsanti button[aria-pressed=true] { background: #fff3e0; border-color: #ff6f00; box-shadow: inset 0 0 0 1px #ff6f00; }

/* sezioni secondarie, richiuse all'apertura */
.sc-scheda details > summary { cursor: pointer; font-size: 13px; color: #335b80; padding: 4px 0; }
.sc-leggi, .sc-altri, .sc-extra-d, .sc-casi-d { margin: 2px 0; padding-top: 2px; border-top: 1px solid var(--line); }
/* l'HTML dello scenario con comandi (elenco degli interventi, archivio) resta visibile, come prima del telaio */
.sc-extra-t { font-size: 14px; margin: 0 0 6px; }
.sc-leggi-c { font-size: 13px; line-height: 1.45; }
.sc-leggi-c p { margin: 4px 0 8px; }
.sc-leggi-c dl { margin: 0 0 6px; }
.sc-leggi-c dt { font-weight: 600; margin-top: 6px; }
.sc-leggi-c dd { margin: 2px 0 0; }
.sc-caso-r { margin: 6px 0; }
.sc-caso-r p { margin: 2px 0 0; }
.sc-annuncio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Parametri: leve principali, le altre in modalità esperto; scenari con nome */
.sc-leva { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; font-size: 14px; color: var(--fg); margin: 0 0 14px; }
fieldset.sc-leva { border: 0; padding: 0; min-width: 0; }
.sc-leva legend { padding: 0; margin-bottom: 6px; }
.sc-leva .pulsanti { margin: 0; gap: 4px; }
.sc-leva .pulsanti button { font-size: 12px; padding: 4px 8px; color: var(--fg); }
.sc-cursore { display: flex; align-items: center; gap: 8px; }
.sc-cursore input { flex: 1; accent-color: var(--accent); }
.sc-cursore output { min-width: 86px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.sc-esperto { display: block; font: inherit; font-size: 13px; color: #335b80; background: none; border: 0; padding: 4px 0; margin: 0 0 10px; cursor: pointer; text-decoration: underline; }
.sc-salva { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.sc-salva h3 { font-size: 13px; margin: 0 0 4px; }
.sc-salva label { display: block; font-weight: 600; margin: 8px 0 4px; }
.sc-salva-r { display: flex; gap: 6px; }
.sc-salva-r input { flex: 1; min-width: 0; padding: 6px 8px; font: inherit; color: var(--fg); border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sc-salva-r button, .sc-salvati button { font: inherit; font-size: 12px; padding: 5px 9px; color: var(--fg); border: 1px solid var(--line); border-radius: 6px; background: #f6f8fa; cursor: pointer; }
.sc-salva-r button:disabled { color: var(--muted); cursor: not-allowed; }
.sc-salvati { list-style: none; margin: 6px 0; padding: 0; }
.sc-salvati li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }

/* grafico compatto e voci */
.sc-grafico svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: none; }
.sc-grafico svg text { font: 12px system-ui, sans-serif; fill: #46505b; }
.sc-grafico { margin: 8px 0; }
.sc-grafico-t { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.sc-presa { cursor: ew-resize; }
.sc-voci, .sc-legenda { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; margin-top: 6px; }
.sc-voce { display: inline-flex; align-items: center; gap: 5px; }
.sc-voce i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sc-voce i.l { width: 14px; height: 3px; border-radius: 2px; }
.sc-voce i.a { border-radius: 50%; background: #fff !important; border: 3px solid; box-sizing: border-box; }

/* Fonti e limiti */
.sc-stato-prev { font-size: 13px; line-height: 1.45; margin: 0 0 12px; padding: 6px 10px; background: #f1f3f5; border-radius: 6px; }
.sc-nota { margin: 8px 0 6px; line-height: 1.4; }
.sc-scheda > footer { padding: 8px 14px 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.sc-scheda > footer .pulsanti { margin: 0; }
.sc-scheda > footer .pulsanti button { font-size: 12px; }

/* legenda della mappa: sta sulla mappa, non nel pannello */
.sc-legenda-mappa { position: fixed; z-index: 28; left: calc(var(--sx) + 12px); top: 12px; max-width: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-size: 12px; line-height: 1.35; color: var(--fg); background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.sc-legenda-mappa .sc-voci { flex-direction: column; align-items: flex-start; margin: 0; }
.sc-leg-t { font-weight: 600; margin-bottom: 2px; }
.sc-rampa { align-self: stretch; height: 10px; border-radius: 3px; margin: 2px 0; }
.sc-estremi { align-self: stretch; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.sc-leg-n { color: var(--muted); margin-top: 2px; }

/* casi pronti nell'elenco delle analisi */
.pv-casi { margin-top: 14px; }
.pv-casi h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 4px; }

/* «Prossimi giorni» in cima alla vista Analisi (prossimi_giorni.js): al massimo 5 voci, livello in parole e in colore */
.pg-sintesi { margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #1f2328; }
.pg-sintesi:focus { outline: none; }
.pg-sintesi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.pg-errori { margin: 0 0 8px; padding: 5px 8px; border-left: 3px solid #b26a00; background: #fff4e5; color: #6b3f00; font-size: 12px; line-height: 1.4; }
.pg-voci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pg-voce { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 8px; align-items: start; padding: 7px 8px 6px 7px; background: #ffffff;
  border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; }
.pg-v-allerta { border-left-color: #c62828; }
.pg-v-attenzione { border-left-color: #ef8a00; }
.pg-v-informazione { border-left-color: #2a78d6; }
.pg-ic { font-size: 18px; line-height: 1.2; }
.pg-c { min-width: 0; }
.pg-c p { margin: 0; }
.pg-t { font-size: 13px; font-weight: 600; line-height: 1.35; color: #1f2328; }
/* voci compatte: titolo al massimo in 3 righe, quando e dove in 2; aprendo l'attendibilità la voce si legge per intero */
.pg-t, .pg-q { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.pg-t { -webkit-line-clamp: 3; line-clamp: 3; }
.pg-q { -webkit-line-clamp: 2; line-clamp: 2; }
.pg-voce:has(.pg-att[open]) :is(.pg-t, .pg-q) { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.pg-l { display: inline-block; margin-right: 2px; padding: 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1px solid; border-radius: 8px; vertical-align: 1px; }
.pg-l-allerta { color: #8e1b1b; background: #fdecec; border-color: #e7a3a3; }
.pg-l-attenzione { color: #7a4100; background: #fff1de; border-color: #f0c48a; }
.pg-l-informazione { color: #164e83; background: #e8f1fa; border-color: #9cc3e6; }
.pg-q { margin-top: 2px !important; font-size: 12px; line-height: 1.35; color: var(--muted); }
.pg-f { margin-top: 3px !important; font-size: 12px; line-height: 1.5; }
.pg-u { color: var(--muted); }
.pg-att { margin-top: 2px; font-size: 12px; color: var(--muted); }
.pg-att summary { display: block; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; list-style: none; }
.pg-att summary::-webkit-details-marker { display: none; }
.pg-att summary::before { content: "▸ "; }
.pg-att[open] summary { white-space: normal; }
.pg-att[open] summary::before { content: "▾ "; }
.pg-apri { font: inherit; font-size: 12px; padding: 4px 9px; color: #1f2328; border: 1px solid var(--line); border-radius: 6px; background: #f6f8fa; cursor: pointer; }
.pg-apri:hover { background: #eef4ff; }
.pg-voce :focus-visible, #prossimi-giorni :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-altre { margin-top: 6px; }
.pg-altre summary { cursor: pointer; font-size: 13px; color: #335b80; padding: 2px 0 6px; }
.pg-vuoto { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #4f7d5c; background: #f1f7f2; color: #1f2328; font-size: 13px; line-height: 1.4; }
.pg-casi .pv-elenco { margin-top: 4px; }
.pg-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.pg-nota { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }

.sc-tempo { position: fixed; z-index: 29; left: calc(var(--sx) + 16px); right: 488px; bottom: 16px; max-width: 760px; margin: 0 auto; display: flex; gap: 12px; align-items: center;
  background: #fcfcfb; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 10px 16px 8px 12px; }
.sc-tempo[hidden] { display: none; }
.sc-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 17px; cursor: pointer; }
.sc-play:hover { filter: brightness(1.08); }
.sc-tempo-c { flex: 1; min-width: 0; }
.sc-riga { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sc-ora { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-data { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.sc-data input { font: inherit; font-size: 12px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--fg); }
.sc-oggi { flex: none; }
.sc-limite { margin-top: 2px; }
.sc-extra:not(:empty) { margin: 0 0 10px; }
.sc-programma h3 { font-size: 15px; margin: 14px 0 8px; }
.sc-programma ol { padding-left: 22px; }
.sc-programma li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.sc-programma li button { margin-top: 6px; }
.sc-contesto { margin-top: 16px; font-size: 13px; line-height: 1.5; }
.sc-contesto summary, .sc-programma summary { cursor: pointer; font-size: 13px; color: #335b80; }
.sc-tabella { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sc-tabella th, .sc-tabella td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: right; }
.sc-tabella th:first-child { text-align: left; font-weight: 500; }
.sc-tempo input[type=range] { width: 100%; margin: 4px 0 0; accent-color: var(--accent); }
.sc-tacche { position: relative; height: 15px; margin: 0 8px; font-size: 11px; color: var(--muted); }
.sc-tacche span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

.sc-int { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px; }
.sc-int:first-child { border-top: 0; }
.sc-int-ic { width: 6px; align-self: stretch; border-radius: 3px; }
.sc-escluse { margin: 8px 0; font-size: 12px; }
.sc-escluse summary { cursor: pointer; color: var(--muted); }
.sc-escluse li { margin: 4px 0; }
.sc-int label { display: inline-flex; align-items: center; gap: 4px; margin: 4px 8px 0 0; color: var(--muted); }
.sc-int input[type=date] { font: inherit; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--fg); }
.sc-extra .pulsanti button { font-size: 12px; }
.sc-extra :is([data-archivio], [data-man-archivio]) label { display: block; margin: 10px 0; }
.sc-extra :is([data-archivio], [data-man-archivio]) :is(input, select) { box-sizing: border-box; display: block; width: 100%; margin-top: 4px; padding: 8px; font: inherit; }
.sc-extra :is([data-archivio], [data-man-archivio]) button { padding: 7px 10px; margin: 3px 3px 3px 0; font: inherit; cursor: pointer; }
/* procedure ed editor (nuovo intervento, nuova strada) sopra la scheda dello scenario e accanto ad essa */
body.sc-aperto .procedura { z-index: 40; right: 484px; }
body.sc-aperto .barra-editor { z-index: 41; right: 488px; bottom: 112px; }

/* con uno scenario aperto: comandi della mappa accanto alla scheda, niente legenda degli edifici né scheda dell'elemento */
body.sc-aperto .maplibregl-ctrl-top-right { right: 476px; }
body.sc-aperto #legenda-mappa, body.sc-aperto #scheda { display: none; }
@media (max-width: 900px) {
  .sc-scheda { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 52vh; border-radius: 12px 12px 0 0; }
  .sc-tempo { left: 8px; right: 8px; bottom: calc(52vh + 8px); }
  .sc-legenda-mappa { left: 8px; top: 8px; max-width: calc(100vw - 72px); font-size: 11px; }
  body.sc-aperto .maplibregl-ctrl-top-right { right: 0; }
  body.sc-aperto #pannello, body.sc-aperto #viste { display: none; }
}

/* ---------- servizi WMS aggiunti dall'utente (vista Livelli) ---------- */
.aggiungi-wms { margin-top: 8px; font-size: 13px; }
.aggiungi-wms summary { cursor: pointer; color: var(--accent); }
.aggiungi-wms input { width: 100%; box-sizing: border-box; padding: 5px 8px; margin: 6px 0; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
#wms-elenco { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; max-height: 180px; overflow: auto; }
#wms-elenco .nota { flex-basis: 100%; }

/* ---------- vista Storico: elenco delle serie e cassetto del grafico sotto la mappa ---------- */
#st-cerca { margin: 6px 0 8px; }
.st-gruppo { border-top: 1px solid var(--line); padding: 4px 0; }
.st-gruppo > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.st-gruppo .conta, .st-sotto .conta { color: var(--muted); font-weight: 400; font-size: 12px; }
.st-sotto { margin: 2px 0 2px 10px; }
.st-sotto > summary { cursor: pointer; font-size: 13px; padding: 2px 0; }
:is(#pannello) label.check.st-voce { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0; }
.st-voce input { margin-top: 3px; }
.st-voce b { font-weight: 500; }
.st-voce small { display: block; color: var(--muted); font-size: 11px; }
.st-pop { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 12px; }
#st-cassetto { position: absolute; left: calc(var(--sx) + 10px); right: 10px; bottom: 10px; z-index: 13; max-height: 46vh; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.16); }
#st-cassetto[hidden] { display: none; }
body.storico-aperto #legenda-mappa { bottom: calc(46vh + 22px); }
body.storico-aperto .maplibregl-ctrl-bottom-right { bottom: calc(46vh + 14px); }
.st-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; position: relative; padding-right: 36px; }
.st-testa .st-chiudi { position: absolute; top: 5px; right: 6px; }
.st-testa .spazio { flex: 1; }
.st-schede { display: flex; gap: 2px; }
.st-schede button { border: 1px solid var(--line); background: #f6f8fa; padding: 4px 10px; border-radius: 6px; font: inherit; cursor: pointer; }
.st-schede button[aria-selected=true] { background: #fff; border-color: var(--accent); color: var(--accent); font-weight: 600; }
.st-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.st-comandi label, .st-incrocio-c label { display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important;
  font-weight: 400 !important; color: var(--fg) !important; font-size: 12px !important; }
.st-comandi select, .st-incrocio-c select { width: auto; padding: 2px 4px; font-size: 12px; }
.st-comandi input[type=date] { font: inherit; font-size: 12px; padding: 1px 3px; border: 1px solid var(--line); border-radius: 4px; }
.st-gruppo-c { display: inline-flex; gap: 2px; }
.st-chiudi { border: 0; background: none; font-size: 15px; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.st-corpo { position: relative; overflow: auto; padding: 6px 10px 8px; }
.st-corpo svg { width: 100%; height: auto; display: block; }
.st-corpo svg text { font: 10.5px system-ui, sans-serif; fill: #5d6670; }
.st-corpo svg text.st-unita { font-weight: 600; }
.st-corpo svg text.st-anno { font-weight: 600; font-size: 10px; }
.st-griglia { stroke: #e6e9ec; stroke-width: 1; }
.st-griglia.v { stroke: #f0f2f4; }
.st-fascia { fill: #2a78d6; opacity: .12; }
.st-mediana { fill: none; stroke: #2a78d6; stroke-dasharray: 4 3; stroke-width: 1.2; opacity: .8; }
.st-cursore { stroke: #263238; stroke-width: 1; stroke-dasharray: 2 2; }
.st-punto { fill: #2a78d6; fill-opacity: .45; }
.st-retta { stroke: #eb6834; stroke-width: 2; }
.st-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin-top: 4px; }
.st-legenda-v { display: inline-flex; align-items: center; gap: 5px; }
.st-legenda-v i { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.st-legenda-v i.fascia { height: 10px; background: rgba(42,120,214,.15); border-top: 1px dashed #2a78d6; }
.st-tip { position: absolute; top: 8px; z-index: 2; min-width: 170px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px;
  font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.12); pointer-events: none; }
.st-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.st-incrocio-c { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.st-incrocio { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 14px; align-items: start; }
.st-esito p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.st-tab { border-collapse: collapse; font-size: 12px; margin-bottom: 6px; }
.st-tab td { padding: 2px 10px 2px 0; }
.st-tab td:first-child { color: var(--muted); }
@media (max-width: 900px) { .st-incrocio { grid-template-columns: 1fr; } #st-cassetto { max-height: 55vh; } }
body.vista-storico #legenda-mappa { display: none; }
.sc-blocco { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: 12px; }
.sc-righe { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 6px 0 2px; font-size: 13px; }
.sc-righe b { font-variant-numeric: tabular-nums; text-align: right; }
.sc-riga-anom { display: flex; gap: 8px; align-items: baseline; margin-top: 3px; }
.sc-riga-anom b { margin-left: auto; font-variant-numeric: tabular-nums; }
.st-verifica { font-size: 12px; margin-top: 6px; line-height: 1.45; }
.st-verifica i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }

/* Sintesi dei limiti nel pannello fonti comune, senza un secondo cruscotto. */
.sc-attendibilita h3 { margin: 0 0 14px; font-size: 17px; line-height: 1.35; }
.sc-attendibilita dt { margin-top: 12px; }
.sc-attendibilita dd { margin: 4px 0 0; line-height: 1.5; }

/* Confronto circoscritto alla decisione non salvata. */
.conflitto-tabella { overflow-x: auto; }
.conflitto table { width: 100%; table-layout: fixed; }
.conflitto td, .conflitto th { overflow-wrap: anywhere; vertical-align: top; padding: 5px; text-align: left; }
.conflitto .decisione { flex-wrap: wrap; }

.conflitto { border: 1px solid #bd863c; padding: 12px; margin-bottom: 12px; }
.conflitto .decisione { display: flex; gap: 6px; }

/* ---------- procedure guidate per ufficio e registro operativo (procedure_operative.js, registro_operativo.js) ---------- */
.procedura-annuncio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.procedura .procedura-titolo:focus { outline: none; }
.procedura .procedura-titolo:focus-visible, .procedura .corpo:focus-visible, .procedura .esito:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.procedura .corpo:focus { outline: none; }
.procedura footer { flex-wrap: wrap; }
.procedura .passi li[aria-current=step] { color: var(--fg); }
.procedura.po { width: 460px; }
.procedura.po footer { justify-content: flex-end; }
.procedura.po footer [data-nav=annulla] { margin-right: auto; }
.po-testa { margin-top: 6px; font-size: 12px; line-height: 1.4; }
.po-testa p { margin: 2px 0; }
.po-registro { color: #3d4650; }
.po-livello { display: inline-block; padding: 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1px solid #f0c48a; border-radius: 8px; color: #7a4100; background: #fff1de; }
.po-stato { color: #8e1b1b; }
.po-stato:empty { display: none; }
.po-scelta { border: 1px solid var(--line); border-radius: 6px; margin: 10px 0 6px; padding: 4px 10px 6px; }
.po-scelta legend { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 0 4px; }
.po-scelta label.check { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0; font-size: 12px; color: var(--fg); }
.procedura .corpo textarea { box-sizing: border-box; width: 100%; font: inherit; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; }
.po-avviso { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(560px, calc(100vw - 32px)); display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; font-size: 13px; color: #6b3f00; background: #fff4e5; border: 1px solid #f0c48a; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.16); }
.po-avviso[hidden] { display: none; }

/* «Avvia procedura» accanto ad «Apri» nella vista Prossimi giorni */
.pg-az { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.pg-proc { font: inherit; font-size: 12px; padding: 4px 9px; color: #0b4f8a; border: 1px solid #9cc3e6; border-radius: 6px; background: #e8f1fa; cursor: pointer; white-space: nowrap; }
.pg-proc:hover { background: #d6e7f7; }

/* «Procedure» nel primo schermo di un'analisi */
.sc-proc { padding: 6px 14px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sc-proc-b { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; color: #0b4f8a; border: 1px solid #9cc3e6; border-radius: 6px; background: #e8f1fa; cursor: pointer; }
.sc-proc-b::before { content: "▸ "; }
.sc-proc-b[aria-expanded=true]::before { content: "▾ "; }
.sc-proc-l { margin-top: 6px; }
.sc-proc-l p { margin: 0 0 6px; }
.sc-proc-l ul { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-proc-l li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sc-proc-l li button { font: inherit; font-size: 12px; padding: 4px 10px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }

/* riga del registro sotto «Prossimi giorni» */
.ro-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; }
.ro-riga:empty { display: none; }
.ro-riga-t { flex: 1; min-width: 180px; margin: 0; color: #3d4650; line-height: 1.4; }
.ro-locale-t { color: #7a4100; }

/* pannello «Registro operativo»: sopra la mappa, accanto al pannello di sinistra */
.ro-pannello { position: fixed; top: 12px; left: calc(var(--sx) + 12px); z-index: 45; width: 460px; max-width: calc(100vw - var(--sx) - 24px); max-height: calc(100vh - 24px);
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.2); font-size: 13px; color: var(--fg); }
.ro-pannello[hidden] { display: none; }
.ro-pannello > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.ro-pannello > header h2 { margin: 0; font-size: 17px; }
.ro-pannello > header h2:focus { outline: none; }
.ro-pannello :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ro-chiudi { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 9px; cursor: pointer; }
.ro-corpo { overflow-y: auto; padding: 8px 14px 12px; }
/* «In arrivo» (Prossimi giorni) e registro scorrono insieme */
.ro-scorre { overflow-y: auto; min-height: 0; }
.ro-scorre > .ro-corpo { overflow: visible; }
.ro-prossimi { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ro-prossimi[hidden] { display: none; }
.ro-prossimi > h3, .ro-sezione { margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.ro-sezione { margin-top: 10px; }
.ro-dove { margin: 0 0 6px; padding: 6px 8px; font-size: 12px; line-height: 1.4; color: #164e83; background: #e8f1fa; border-left: 3px solid #2a78d6; }
.ro-dove.ro-locale { color: #6b3f00; background: #fff4e5; border-left-color: #b26a00; }
.ro-regola { margin: 0 0 8px; }
.ro-errore { margin: 0 0 8px; padding: 6px 8px; font-size: 12px; color: #8e1b1b; background: #fdecec; border-left: 3px solid #c62828; }
.ro-filtri { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 8px; }
.ro-filtri label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ro-filtri select { font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--fg); padding: 3px 4px; border: 1px solid var(--line); border-radius: 6px; max-width: 200px; }
.ro-vuoto { margin: 0; padding: 6px 10px; font-size: 13px; color: #1f2328; background: #f1f7f2; border-left: 3px solid #4f7d5c; }
.ro-elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ro-voce button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; padding: 7px 9px; color: var(--fg); background: #fff;
  border: 1px solid var(--line); border-left: 4px solid #8a94a0; border-radius: 6px; cursor: pointer; }
.ro-voce button:hover { background: #f6f8fa; }
.ro-v-aperta button { border-left-color: #c62828; }
.ro-v-presa_in_carico button { border-left-color: #ef8a00; }
.ro-v-chiusa button { border-left-color: #2e7d32; }
.ro-voce-t b { font-weight: 600; }
.ro-meta { font-size: 12px; color: var(--muted); }
.ro-stato { display: inline-block; padding: 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1px solid; border-radius: 8px; vertical-align: 1px; }
.ro-stato-aperta { color: #8e1b1b; background: #fdecec; border-color: #e7a3a3; }
.ro-stato-presa_in_carico { color: #7a4100; background: #fff1de; border-color: #f0c48a; }
.ro-stato-chiusa { color: #1b5e20; background: #eef8f0; border-color: #9fd3a8; }
.ro-dettaglio h3 { margin: 8px 0 2px; font-size: 15px; line-height: 1.3; }
.ro-dettaglio h3:focus { outline: none; }
.ro-dettaglio h4 { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ro-d-meta { margin: 0; font-size: 12px; color: #3d4650; }
.ro-passi { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.45; }
.ro-passi li { margin: 3px 0; }
.ro-ts { color: var(--muted); font-variant-numeric: tabular-nums; }
.ro-chi { color: var(--muted); }
.ro-chi::before { content: "· "; }
.ro-dati summary { cursor: pointer; color: #335b80; }
.ro-dati pre { margin: 2px 0; padding: 4px 6px; max-height: 160px; overflow: auto; font-size: 11px; background: #f6f8fa; border-radius: 4px; white-space: pre-wrap; word-break: break-word; }
.ro-confronto { width: 100%; border-collapse: collapse; font-size: 12px; }
.ro-confronto th, .ro-confronto td { padding: 3px 6px 3px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.ro-confronto thead th { color: var(--muted); font-weight: 600; border-top: 0; }
.ro-confronto tbody th { font-weight: 400; color: #3d4650; }
.ro-confronto input { box-sizing: border-box; width: 100%; min-width: 70px; font: inherit; padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; }
.ro-esito-t { margin: 0; font-size: 13px; white-space: pre-wrap; }
.ro-prodotto { margin: 0; font-size: 12px; line-height: 1.5; }
.ro-prodotto code { font-size: 11px; }
.ro-comandi { margin-top: 12px; }
.ro-modulo { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fcfcfb; }
.ro-modulo label { display: block; margin: 6px 0 3px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ro-modulo input[type=text], .ro-modulo textarea { box-sizing: border-box; width: 100%; font: inherit; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; }
.ro-segnale { margin: 0; font-size: 12px; line-height: 1.5; }
.ro-livello { display: inline-block; padding: 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1px solid #f0c48a; border-radius: 8px; color: #7a4100; background: #fff1de; }
.ro-fonte, .po-richiesta { display: inline-block; padding: 0 6px; font-size: 11px; border: 1px solid var(--line); border-radius: 8px; color: #3d4650; background: #f6f8fa; }
.ro-esporta { color: #0b4f8a; }
.ro-p-apertura, .ro-p-presa_in_carico, .ro-p-chiusura, .ro-p-riapertura { color: #3d4650; }
.ro-annuncio { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* provenienza nel confronto previsto/osservato (senza scenari.js), avvisi sui dati personali, elenco troncato, osservato dai dati */
.ro-prov { display: inline-block; padding: 0 5px; font-size: 10px; font-weight: 700; line-height: 1.35; border: 1px solid #b9c3cd; border-radius: 8px; color: #3d4650; background: #f6f8fa; }
.ro-prov[data-fonte=ufficiale] { color: #1b5e20; background: #eef8f0; border-color: #9fd3a8; }
.ro-confronto .sc-fonte { font-size: 10px; padding: 0 5px; }
.ro-privacy, .po-privacy { margin: 2px 0 6px; font-size: 12px; color: #6b3f00; }
.ro-limite { margin: 0 0 8px; padding: 6px 8px; font-size: 12px; color: #6b3f00; background: #fff4e5; border-left: 3px solid #b26a00; }
.ro-pv-nota { margin: 0 0 4px; }
.ro-proposte { color: #164e83; }
/* ruolo di sola consultazione: «Avvia» attenuato, al clic spiega perché */
.pg-proc-no { color: #4d5560; background: #f1f3f5; border-color: #c9d0d6; cursor: help; }
.pg-proc-no:hover { background: #e9ecef; }
.sc-proc-l li button[aria-disabled=true] { color: #4d5560; background: #f1f3f5; border-color: #c9d0d6; cursor: help; }
.sc-proc-no { color: #6b3f00; }

@media (max-width: 900px) {
  .ro-pannello { left: 8px; right: 8px; top: auto; bottom: 0; width: auto; max-width: none; max-height: 70vh; border-radius: 12px 12px 0 0; }
  /* la procedura resta sopra la mappa, a destra, anche con un'analisi aperta (che su schermi stretti è un foglio in basso) */
  .procedura.po, body.sc-aperto .procedura.po { right: 8px; width: min(460px, calc(100vw - 16px)); max-width: none; }
}
/* telefono: testata, passi e comandi sempre interi; il corpo scorre; se non basta scorre il pannello, mai fuori dal bordo */
@media (max-width: 600px) {
  .procedura.po, body.sc-aperto .procedura.po { left: 8px; right: 8px; width: auto; max-height: 70vh; overflow-y: auto; }
  .procedura.po > header, .procedura.po > .passi, .procedura.po > footer, .procedura.po > .errore-passo { flex-shrink: 0; }
  .procedura.po > .corpo { flex: 1 1 auto; min-height: 120px; }
  .procedura.po header { padding: 8px 10px 6px; }
  .procedura.po header .nota { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .procedura.po .po-testa { margin-top: 4px; font-size: 11px; }
  .procedura.po .passi { padding: 6px 10px; }
  .procedura.po .passi li { padding-top: 20px; }
  .procedura.po .passi li:not(.corrente) { font-size: 0; }
  .procedura.po .passi li::before { font-size: 11px; }
  .procedura.po .passi li.corrente { flex: 4; }
  .procedura.po .corpo { padding: 8px 10px; }
  .procedura.po footer { padding: 8px 10px; gap: 6px; }
  .procedura.po footer button { padding: 6px 10px; }
}

/* ---------- mappa della home: caricamento, legenda di contesto, avviso degli asset, misure, serie storiche, catalogo ---------- */
/* #stato solo durante caricamenti ed errori: i conteggi del modello sono in «Fonti e qualità dei dati» */
#stato:empty { display: none; }
/* in alto a destra, accanto ai comandi della mappa (15/10): non copre la città mentre si disegna */
#carico-mappa { position: absolute; z-index: 4; right: 56px; top: 10px; display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 76px); box-sizing: border-box; padding: 8px 12px; background: #ffffffef; color: #243c61; border: 1px solid #d6e1ef; border-radius: 8px;
  font-size: 13px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
#carico-mappa .rotella { flex: none; width: 14px; height: 14px; border: 2px solid #b6d2f7; border-top-color: #1767d3; border-radius: 50%; animation: giro-carico .9s linear infinite; }
#carico-mappa.errore { color: #8e1b1b; border-color: #e7a3a3; }
#carico-mappa button { flex: none; font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid #1767d3; border-radius: 6px; background: #1767d3; color: #fff; cursor: pointer; }
@keyframes giro-carico { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #carico-mappa .rotella { animation: none; } }

/* voci di contesto in legenda (asset, beni validati, sensi di marcia) con la provenienza sotto il nome */
#legenda:not(:empty) + #legenda-contesto:not(:empty) { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
#legenda-contesto .voce { align-items: flex-start; }
#legenda-contesto .voce small { display: block; font-size: 10.5px; color: #5a6b80; }
#legenda-contesto .col { margin-top: 1px; }
#legenda-contesto .col.tondo { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #9aa7b6; width: 12px; height: 12px; }
#legenda-contesto .col.freccia { display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; border-color: #182934; }
/* telefono: legenda stretta che lascia libere scala e comandi; Territorio e beni resta nell'etichetta in alto e nella barra */
@media (max-width: 720px) {
  #legenda-contesto { max-width: 150px; font-size: 11px; }
  #legenda-contesto .voce small { font-size: 10px; }
}

/* l'etichetta di provenienza degli asset sulla mappa porta a Territorio e beni */
#avviso-asset-mappa button { display: block; margin: -6px -9px; padding: 6px 9px; pointer-events: auto; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
#avviso-asset-mappa button:hover span { text-decoration: underline; }
#avviso-asset-mappa button:focus-visible { outline: 2px solid #2677de; outline-offset: 2px; border-radius: 5px; }
body.vista-storico #avviso-asset-mappa { display: none; }

/* strumenti di misura: titolo del gruppo, icone, stato attivo; con la mappa bassa un solo pulsante apre gli strumenti a sinistra */
.controllo-misure .misure-titolo { padding: 5px 0 4px; font: 600 9px/1 system-ui, sans-serif; letter-spacing: -.2px; text-align: center; color: #3c567d; cursor: default; }
.controllo-misure button { display: grid; place-items: center; color: #29446e; }
.controllo-misure button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.controllo-misure .misure-strumenti { border-top: 1px solid #ddd; }
.controllo-misure button[aria-pressed=true], .controllo-misure .misure-apri.in-uso { background: #e6f0ff; color: #0c5fc8; box-shadow: inset 2px 0 #2677de; }
.controllo-misure .misure-apri { display: none; }
.controllo-misure.compatta .misure-titolo { display: none; }
.controllo-misure.compatta .misure-apri { display: grid; }
.controllo-misure.compatta .misure-strumenti { display: none; position: absolute; top: 0; right: calc(100% + 6px); border-top: 0; background: #fff; border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.1); }
.controllo-misure.compatta.aperto .misure-strumenti { display: flex; }
.controllo-misure.compatta .misure-strumenti button + button { border-top: 0; border-left: 1px solid #ddd; }
.controllo-misure.compatta .misure-strumenti button { border-radius: 0; }
.istruzione-misura { position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 120px); box-sizing: border-box; padding: 7px 12px;
  background: #fffdf7; color: #4a2c00; border: 1px solid #ff6f00; border-radius: 6px; font-size: 12px; line-height: 1.4; box-shadow: 0 2px 8px rgba(0,0,0,.15); pointer-events: none; }
.istruzione-misura[hidden] { display: none; }

/* legenda dei punti di misura nella vista Serie storiche: colori per tema, come nel pannello */
#st-legenda-mappa { position: absolute; z-index: 5; left: calc(var(--sx) + 38px); bottom: calc(var(--fondo, 0px) + 40px); max-width: 240px; padding: 8px 10px; font-size: 12px;
  background: #ffffffef; color: #243c61; border: 1px solid #d6e1ef; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
#st-legenda-mappa[hidden] { display: none; }
#st-legenda-mappa .titolo { font-weight: 600; margin-bottom: 4px; }
#st-legenda-mappa .voce { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
#st-legenda-mappa i { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #9aa7b6; }
#st-legenda-mappa .suggerimento { margin-top: 4px; font-size: 11px; color: #5a6b80; }
body.storico-aperto #st-legenda-mappa { bottom: calc(46vh + 22px); }

/* catalogo dei beni validati ancora vuoto: un solo riquadro con l'azione utile */
.catalogo-vuoto { padding: 14px; margin: 6px 0 10px; background: #edf4ff; border: 1px solid #cbdcf3; border-radius: 8px; font-size: 12.5px; line-height: 1.55; color: #243c61; }
.catalogo-vuoto strong { display: block; font-size: 14px; color: #172445; margin-bottom: 4px; }
.catalogo-vuoto .primario { display: inline-block; margin-top: 10px; padding: 8px 14px; border-radius: 6px; background: #1767d3; color: #fff; font-weight: 600; text-decoration: none; }
.catalogo-vuoto .primario:hover { background: #0c5fc8; }
.catalogo-vuoto .primario:focus-visible { outline: 3px solid #2677de; outline-offset: 2px; }

/* Fonti e qualità dei dati: percorsi, schemi e procedure in un riquadro richiudibile */
.dettagli-tecnici { margin-top: 10px; }
.dettagli-tecnici summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: #155fb8; }
.dettagli-tecnici[open] summary { margin-bottom: 6px; }
#legenda-calore .nota-calore { margin: 4px 0 0; font-size: 11px; line-height: 1.35; color: var(--muted); }
/* Struttura comune delle viste dei settori (17/10): cinque blocchi numerati, come «Valuta un cantiere» (mobilita_cantieri.css) */
.sc-blocco { border: 1px solid #dbe4ee; border-radius: 10px; background: #fff; margin: 0 0 12px; }
.sc-blocco > .sc-blocco-c { padding: 4px 14px 12px; }
.sc-blocco-t, details.sc-blocco > summary { display: flex; align-items: center; gap: 9px; margin: 0; padding: 11px 14px; font-size: 14px; font-weight: 650; color: #173954; }
details.sc-blocco > summary { cursor: pointer; list-style: none; }
details.sc-blocco > summary::-webkit-details-marker { display: none; }
details.sc-blocco > summary::after { content: "▾"; margin-left: auto; color: #6d86a0; transition: transform .15s; }
details.sc-blocco:not([open]) > summary::after { transform: rotate(-90deg); }
.sc-blocco-n { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e3eefb; color: #175daa; font-size: 12px; font-weight: 750; }
.sc-b1 { border-color: #8fb6e2; background: #f7fbff; }
/* 2 Prova un'ipotesi: il dettaglio dell'ipotesi è il contenuto del blocco (niente secondo titolo); senza ipotesi il blocco sparisce */
.sc-b2 .uf-intervento > summary { display: none; }
.sc-b2:not(:has(.uf-intervento:not([hidden]))) { display: none; }
.sc-blocco .sc-p-fonti { padding: 0; }
.cr-finestra.contatti { width: min(440px, 100%); }
.contatti-riga { display: flex; gap: 12px; margin: 6px 0; font-size: 15px; }
.contatti-riga span { width: 72px; color: var(--muted); }
.contatti-riga a { color: inherit; font-weight: 600; }