/* style.css */
: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; }

/* comunale.css */
/* Interfaccia comunale chiara; i colori della cartografia rimangono indipendenti. */
body.comunale { --rail-w: 220px; --panel-w: 306px; --scheda-w: 350px; --testa: 72px; --titolo-h: 78px; --dx: 0px; --fondo: 0px; --accent: #1767d3; --fg: #172445; --muted: #627694; --line: #dce5f0; background: #f3f6fb; }
body.comunale.vista-panoramica { --attivita-h: 142px; --fondo: calc(var(--attivita-h) + 20px); }
body.comunale.vista-panoramica.attivita-brevi { --attivita-h: 110px; }
body.comunale.vista-panoramica.attivita-compatte { --fondo: 72px; }
.comunale.scheda-aperta { --dx: var(--scheda-w); }
body.comunale:is(.sc-aperto,.pv-aperto,.ro-aperto) { --fondo: 0px; }
.comunale.sc-aperto { --dx: 472px; }
.comunale.pv-aperto { --dx: 520px; }
.comunale.ro-aperto { --dx: 470px; }
#vista-home { position: absolute; top: calc(var(--testa) + var(--titolo-h)); left: calc(var(--sx) + 20px); right: calc(var(--dx) + 20px); bottom: calc(var(--fondo) + 20px); background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.comunale #map { top: 52px; left: 6px; right: 6px; bottom: 6px; border-radius: 6px; }
#intestazione { position: absolute; inset: 0 0 auto; height: var(--testa); box-sizing: border-box; display: flex; align-items: center; gap: 30px; padding: 12px 28px; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
#intestazione .marchio { display: flex; gap: 14px; align-items: center; color: var(--fg); text-decoration: none; flex: none; }
.marchio > svg { width: 38px; height: 38px; color: #385579; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.marchio strong { display: block; font-size: 19px; font-weight: 650; letter-spacing: -.4px; }
.marchio small { display: block; color: #526a8b; font-size: 12px; margin-top: 2px; }
#intestazione .cerca { width: min(610px, 47vw); margin: 0 auto; }
#intestazione .cerca > svg { position: absolute; top: 12px; left: 14px; width: 19px; height: 19px; fill: none; stroke: #456083; stroke-width: 1.7; pointer-events: none; }
#intestazione input { padding: 12px 14px 12px 44px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 6px; font: 13px system-ui; }
#intestazione input::placeholder { color: #7386a2; }
#apri-account { display: flex; align-items: center; gap: 10px; color: var(--fg); border: 0; background: none; font: 13px system-ui; cursor: pointer; padding: 0; }
.icona-account { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #2677de; color: #fff; }
#apri-account svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#apri-account .chevron { width: 15px; }
#testa-vista { position: absolute; top: var(--testa); left: calc(var(--sx) + 20px); right: calc(var(--dx) + 20px); height: var(--titolo-h); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
#testa-vista h1 { font-size: 28px; letter-spacing: -.7px; margin: 0; line-height: 1.2; font-weight: 670; }
#data-vista { color: #6c80a0; font-size: 13px; }
.comunale #viste { top: var(--testa); padding: 16px 6px; z-index: 35; background: #f9fbfe; border-right: 1px solid var(--line); gap: 20px; }
.viste-principali, .viste-servizio { display: flex; flex-direction: column; gap: 4px; }
.viste-principali { flex: 1; }
.comunale #viste button, .comunale #viste #vai-validazione { display: flex; flex: none; flex-direction: row; align-items: center; min-height: 46px; padding: 11px 18px; gap: 14px; border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.35; justify-content: flex-start; text-align: left; width: 100%; box-sizing: border-box; color: #3c567d; border: 0; }
.comunale #viste button svg, .comunale #viste #vai-validazione svg { flex-shrink: 0; width: 21px; height: 21px; }
.comunale #viste button[aria-selected=true], .comunale.ro-aperto #tab-attivita { background: #e5f0ff; box-shadow: -6px 0 #2477e5; color: #075fc9; }
.comunale #viste button:hover, .comunale #viste #vai-validazione:hover { background: #edf3fc; color: #075fc9; }
.viste-servizio { padding-top: 12px; gap: 2px; }
.comunale #viste #apri-guida { color: #3c567d; }
.comunale #pannello { top: var(--testa); bottom: 0; height: auto; box-shadow: none; }
.comunale .testa-pannello { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 650; padding: 16px; }
.testa-pannello button { border: none; background: transparent; cursor: pointer; padding: 5px; }
.comunale .vista { padding: 0 18px 20px; }
.comunale .vista > h2 { font-size: 20px; margin-top: 20px; letter-spacing: -.5px; }
.comunale .sotto { line-height: 1.55; margin: 6px 0 18px; }
.comunale .blocco { padding: 16px 0; }
.comunale select { padding: 9px; margin-bottom: 8px; }
.comunale button:focus-visible, .comunale a:focus-visible, .comunale summary:focus-visible { outline: 3px solid #2677de; outline-offset: 2px; }
.gruppo-livelli { border-top: 1px solid var(--line); padding: 14px 0; }
.gruppo-livelli summary { font-weight: 650; font-size: 13px; cursor: pointer; }
.gruppo-livelli .blocco { border: 0; padding-bottom: 0; }
.comunale .vista button { cursor: pointer; }
#azioni-mappa { position: absolute; inset: 0 0 auto; min-height: 52px; padding: 8px 10px 8px 16px; box-sizing: border-box; z-index: 6; display: flex; align-items: center; gap: 10px; }
#azioni-mappa h2 { margin: 0 auto 0 0; font-size: 18px; letter-spacing: -.3px; }
.azioni-rapide { display: flex; align-items: center; gap: 8px; }
#azioni-mappa button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #fff; color: #29446e; border: 1px solid #d6e1ef; padding: 7px 10px; border-radius: 6px; font: 500 12px system-ui; cursor: pointer; white-space: nowrap; }
#azioni-mappa button[aria-pressed=true] { background: #e6f0ff; border-color: #b6d2f7; color: #0c5fc8; }
#azioni-mappa svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#azioni-mappa span { font-weight: 400; font-size: 10px; color: #667993; }
#azioni-mappa button:disabled { opacity: .6; cursor: wait; }
.modo-vista { display: flex; flex: none; border: 1px solid #d6e1ef; border-radius: 6px; padding: 2px; }
#azioni-mappa .modo-vista button { border: 0; padding: 5px 12px; }
.comunale:not(.pannello-chiuso) .azioni-rapide, .comunale:is(.sc-aperto,.pv-aperto,.ro-aperto) .azioni-rapide { display: none; }
.comunale .maplibregl-ctrl button[title^="Passa alla vista"] { display: none; }
#movimento-traffico { position: absolute; left: calc(var(--sx) + 38px); bottom: calc(var(--fondo) + 40px); z-index: 8; background: #ffffffef; color: #243c61; border: 1px solid #d6e1ef; border-radius: 10px; padding: 12px 14px; font-size: 12px; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - var(--sx) - var(--dx) - 90px); box-sizing: border-box; }
#movimento-traffico[hidden] { display: none; }
.traffico-intestazione { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.traffico-intestazione strong { display: block; font-size: 13px; font-weight: 650; }
.traffico-intestazione small { display: block; color: #607797; font-size: 10px; margin-top: 3px; }
#legenda-traffico { display: flex; gap: 14px; flex-wrap: wrap; border-top: 1px solid #dfe7f1; padding-top: 10px; font-size: 10px; }
#legenda-traffico[hidden] { display: none; }
#legenda-traffico span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#legenda-traffico i { width: 18px; height: 4px; background: var(--colore); border-radius: 3px; }
.comunale.sc-aperto #movimento-traffico { bottom: 112px; }
.comunale #scheda, .comunale.pv-aperto #scheda { left: auto; right: 0; top: var(--testa); bottom: 0; width: var(--scheda-w); max-height: none; border-radius: 0; box-shadow: none; border: 0; border-left: 1px solid var(--line); }
.comunale #scheda > header { padding: 16px 18px; min-height: 22px; }
.comunale #info { padding: 22px; }
.comunale #info h2 { font-size: 23px; line-height: 1.2; margin-bottom: 10px; letter-spacing: -.6px; }
.comunale #info h3 { margin-top: 24px; }
.comunale #info td { padding: 8px 0; border-bottom: 1px solid #edf0f1; }
.comunale #info .nota { line-height: 1.6; margin: 10px 0; }
.comunale #info .foto { margin: 20px 0; }
.comunale #info .foto img { max-width: 100%; border-radius: 8px; }
.comunale #info .indicatore { font-size: 25px; margin: 22px 0; color: #1767d3; }
.comunale #info .indicatore span { display: block; font-size: 12px; line-height: 1.6; margin-top: 8px; }
.dettaglio-bene { padding: 16px 0; border-bottom: 1px solid var(--line); }
.dettaglio-bene summary { font-size: 13px; font-weight: 650; cursor: pointer; }
.sintesi-bene { margin: 18px 0; }
.comunale .maplibregl-ctrl-top-right { right: 0 !important; top: 12px; }
.comunale .maplibregl-ctrl-bottom-right { right: 0; }
.comunale #legenda-mappa { bottom: calc(var(--fondo) + 40px); left: calc(var(--sx) + 38px); top: auto; max-height: 30vh; overflow-y: auto; background: #ffffffef; border-color: #d6e1ef; color: #243c61; }
.comunale:has(#movimento-traffico:not([hidden])) #legenda-mappa { bottom: calc(var(--fondo) + 140px); }
.comunale #legenda-mappa button { color: inherit; background: transparent; }
.comunale #legenda-mappa button.voce[aria-pressed=true] { color: #075fc9; background: #e6f0ff; box-shadow: inset 2px 0 #2677de; }
.comunale #legenda-mappa button.voce.spenta { opacity: 1; color: #7b8aa1; }
.comunale #legenda-mappa button.voce.spenta .col { opacity: .55; }
.comunale #legenda-mappa .suggerimento { color: #607797; }
.comunale #legenda-mappa button.voce:focus-visible { outline: 2px solid #2677de; outline-offset: 2px; }
.comunale #legenda-mappa .estremi { color: #607797; }
#attivita-home { position: absolute; left: calc(var(--sx) + 20px); right: calc(var(--dx) + 20px); bottom: 20px; height: var(--attivita-h, 142px); box-sizing: border-box; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 9px; overflow: auto; }
#attivita-home > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
#attivita-home h2 { margin: 0; font-size: 15px; }
#attivita-home button { font: inherit; cursor: pointer; border: 0; background: none; }
#espandi-attivita { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 650 !important; padding: 3px 4px; }
#espandi-attivita svg { width: 18px; height: 18px; fill: none; stroke: #395c8a; stroke-width: 1.8; }
#espandi-attivita[aria-expanded=false] svg { transform: rotate(-90deg); }
#attivita-home #tutte-attivita { color: #1767d3; font-size: 12px; padding: 5px 8px; }
#tutte-attivita span { margin-left: 8px; }
#attivita-home table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
#attivita-home th { background: #f3f6fb; color: #486083; font-weight: 550; padding: 6px 12px; }
#attivita-home td { padding: 7px 12px; border-bottom: 1px solid #edf1f7; }
#attivita-home th:first-child { width: 55%; }
#attivita-home td:first-child button { text-align: left; color: var(--fg); padding: 0; }
#attivita-home td:first-child button:hover { color: #1767d3; text-decoration: underline; }
.stato-attivita { display: inline-block; white-space: nowrap; padding: 3px 9px; border-radius: 14px; font-size: 11px; background: #dff2f1; color: #0c797a; }
.stato-attivita.in-carico { background: #e3efff; color: #0c5fc8; }
.nessuna-attivita { color: #6c7f98; }
.comunale.attivita-compatte #attivita-home { height: 52px; }
.comunale:not(.vista-panoramica) #attivita-home, .comunale:is(.sc-aperto,.pv-aperto,.ro-aperto) #attivita-home { display: none; }
.comunale .sc-scheda, .comunale .pv-pannello { top: var(--testa); bottom: 0; right: 0; max-height: calc(100vh - var(--testa)); border-radius: 0; }
.comunale .sc-legenda-mappa { top: calc(var(--testa) + var(--titolo-h) + 68px); left: calc(var(--sx) + 38px); }
.comunale .ro-pannello { top: var(--testa); right: 0; left: auto; bottom: 0; width: 470px; max-width: calc(100vw - var(--rail-w)); max-height: calc(100vh - var(--testa)); border-radius: 0; }
.comunale .pv-pannello { width: 520px; }
.comunale.pv-aperto #scheda, .comunale.ro-aperto #scheda { display: none; }
.comunale #asset[hidden] { display: none; }
.catalogo .conta { display: block; padding: 10px 0; font-size: 13px; color: #1767d3; font-weight: 600; }
.catalogo .risultato-bene { width: 100%; display: block; padding: 10px 0; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); font: 13px system-ui; }
.catalogo .risultato-bene small { display: block; color: var(--muted); margin-top: 4px; }
.catalogo .vuoto { padding: 13px; background: #f3f6fb; border-radius: 6px; line-height: 1.6; font-size: 12px; }
@media (max-width: 1200px) {
  body.comunale { --rail-w: 184px; --panel-w: 290px; --scheda-w: 320px; }
  .comunale #viste button, .comunale #viste #vai-validazione { padding-left: 12px; gap: 10px; font-size: 12px; }
  #intestazione { gap: 24px; padding-left: 20px; padding-right: 20px; }
  .comunale.scheda-aperta #azioni-mappa h2 { display: none; }
  #azioni-mappa { justify-content: space-between; gap: 6px; padding-left: 10px; }
  #azioni-mappa button { font-size: 11px; padding: 7px; }
  .azioni-rapide { gap: 5px; }
  .comunale.scheda-aperta:not(.pannello-chiuso):not(.sc-aperto):not(.pv-aperto) { --dx: 0px; }
  .comunale.scheda-aperta:not(.pannello-chiuso) #scheda { z-index: 20; }
}
@media (max-width: 960px) {
  body.comunale { --rail-w: 72px; }
  .comunale #viste button, .comunale #viste #vai-validazione { flex-direction: column; text-align: center; justify-content: center; font-size: 9px; gap: 4px; padding: 9px 3px; min-height: 58px; }
  .marchio strong { font-size: 17px; }
  .marchio > svg { width: 30px; height: 30px; }
  #apri-account > span:not(.icona-account), #apri-account .chevron { display: none; }
  #intestazione .cerca { width: auto; flex: 1; }
}
@media (max-width: 720px) {
  body.comunale { --rail-w: 62px; --testa: 110px; --titolo-h: 62px; --sx: var(--rail-w); --panel-w: min(320px, calc(100vw - 62px)); --scheda-w: min(350px, calc(100vw - 62px)); --dx: 0px !important; }
  body.comunale.pannello-chiuso { --sx: var(--rail-w); }
  body.comunale.vista-panoramica { --fondo: 154px; }
  body.comunale.vista-panoramica.attivita-compatte { --fondo: 66px; }
  #intestazione { flex-wrap: wrap; justify-content: space-between; gap: 7px; padding: 10px 14px; }
  #intestazione .cerca { flex: auto; order: 3; width: 100%; }
  #intestazione input { padding-top: 8px; padding-bottom: 8px; font-size: 12px; }
  #intestazione .cerca > svg { top: 8px; }
  .marchio strong { font-size: 16px; }
  .marchio small { font-size: 11px; }
  #testa-vista { left: calc(var(--sx) + 10px); right: 10px; }
  #testa-vista h1 { font-size: 23px; }
  #data-vista { font-size: 11px; }
  #vista-home { left: calc(var(--sx) + 8px); right: 8px; bottom: calc(var(--fondo) + 8px); }
  .comunale #map { top: 84px; left: 4px; right: 4px; bottom: 4px; }
  .comunale #viste { top: var(--testa); bottom: 0; right: auto; width: var(--rail-w); height: auto; flex-direction: column; display: flex; gap: 12px; padding: 10px 4px; }
  .comunale #viste button, .comunale #viste #vai-validazione { font-size: 8px; min-height: 50px; padding: 7px 1px; }
  .comunale #viste button svg, .comunale #viste #vai-validazione svg { width: 19px; height: 19px; }
  .comunale #pannello { left: var(--rail-w); width: var(--panel-w); max-width: none; z-index: 15; display: flex; }
  .comunale.pannello-chiuso #pannello { display: none; }
  .comunale #scheda, .comunale.pv-aperto #scheda { right: 0; left: auto; max-width: none; }
  #azioni-mappa { min-height: 84px; flex-wrap: wrap; align-content: center; gap: 6px; padding: 7px; }
  #azioni-mappa h2, .comunale.scheda-aperta #azioni-mappa h2 { display: block; font-size: 15px; }
  .azioni-rapide { order: 3; width: 100%; justify-content: space-between; }
  #azioni-mappa button { padding: 6px; font-size: 10px; gap: 4px; }
  #azioni-mappa svg { width: 14px; height: 14px; }
  #azioni-mappa .modo-vista button { padding: 4px 10px; }
  .comunale:not(.pannello-chiuso) #map, .comunale:is(.sc-aperto,.pv-aperto,.ro-aperto) #map { top: 52px; }
  #attivita-home { left: calc(var(--sx) + 8px); right: 8px; bottom: 8px; height: 146px; padding: 8px; }
  #attivita-home h2 { font-size: 12px; }
  #attivita-home table { font-size: 10px; }
  #attivita-home th, #attivita-home td { padding: 6px; }
  #attivita-home th:first-child { width: auto; }
  #attivita-home #tutte-attivita { font-size: 10px; padding: 2px; }
  .stato-attivita { font-size: 9px; padding: 3px 6px; white-space: normal; }
  #movimento-traffico { left: calc(var(--sx) + 18px); bottom: calc(var(--fondo) + 90px); max-width: calc(100vw - var(--rail-w) - 75px); gap: 6px; font-size: 10px; padding: 8px; }
  .traffico-intestazione { gap: 6px; flex-wrap: wrap; }
  .traffico-intestazione strong { font-size: 11px; }
  .traffico-intestazione small { display: none; }
  #legenda-traffico { gap: 6px 10px; font-size: 9px; }
  #legenda-traffico i { width: 12px; }
  .comunale .sc-scheda, .comunale .pv-pannello { left: var(--rail-w); right: 0; top: auto; bottom: 0; width: auto; max-height: 52vh; }
  .comunale .ro-pannello { left: var(--rail-w); width: auto; }
  .comunale .sc-tempo { left: calc(var(--rail-w) + 8px); }
}

.beni-da-validare { padding: 12px; margin: 10px 0; background: #edf4ff; border: 1px solid #cbdcf3; border-radius: 7px; font-size: 12px; line-height: 1.6; }
.beni-da-validare p { margin: 7px 0 0; }
.beni-da-validare a { display: inline-block; margin-top: 5px; color: #155fb8; font-weight: 600; }
.comunale #asset .banner-demo, .comunale .asset-provenienza { background: #f2eef9; border: 1px solid #dcd0ed; color: #56406d; padding: 10px; border-radius: 6px; line-height: 1.55; font-size: 12px; }
.comunale #pannello .asset-categoria { display: flex; gap: 8px; align-items: flex-start; margin: 5px 0; }
.asset-categoria input { margin-top: 3px; }
.asset-categoria small { display: block; margin-top: 3px; font-size: 10px; color: #627694; }
.asset-fonti { font-size: 11px; line-height: 1.55; color: var(--muted); margin-top: 12px; }
.asset-fonti summary { cursor: pointer; font-size: 12px; color: #155fb8; }
#avviso-asset-mappa { position: absolute; z-index: 5; top: 64px; left: 18px; pointer-events: none; padding: 6px 9px; background: #fff; color: #56406d; border: 1px solid #dcd0ed; border-radius: 5px; font-size: 10px; }
#avviso-asset-mappa[hidden] { display: none; }
/* Durante un'analisi gli asset del bando sono spenti (isolaMappa): l'etichetta dichiarerebbe una provenienza sbagliata. */
.comunale.sc-aperto #avviso-asset-mappa { display: none; }

/* Un solo accento per i controlli; i campioni cartografici conservano il colore del dato. */
.origine-dato { display: inline-block; padding: 3px 7px; border: 1px solid #c8d8ed; border-radius: 5px; font-size: 10px; line-height: 1.4; font-weight: 600; }
.origine-interna { background: #edf3fc; color: #315781; }
.nota-origine, .sc-aggiornamento { padding: 10px 12px; background: #f4f7fb; border: 1px solid #d6e1ef; border-radius: 7px; color: #526a8b; font-size: 12px; line-height: 1.6; }
.nota-origine .origine-dato { margin-right: 5px; }
#attivita-home .origine-dato { margin-left: 8px; padding: 1px 5px; font-size: 9px; }
.ro-voce .origine-dato { margin-top: 6px; }
.comunale input:is([type=checkbox], [type=radio], [type=range]) { accent-color: var(--accent); }
.comunale :is(select, input[type=search], input[type=date], input[type=number]) { color: var(--fg); background-color: #f7f9fc; border-color: var(--line); }
.comunale :is(select, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.comunale #pannello label.check { padding: 6px 8px; border-radius: 5px; font-size: 13px; }
.comunale #pannello label.check:has(input:checked) { background: #e6f0ff; color: #155fb8; }
.comunale #pannello label.check:hover { background: #edf3fc; }
.comunale .filtro-attivo { background: #e6f0ff; color: #155fb8; border-color: #b6d2f7; padding: 8px; }
.comunale .filtro-attivo .mini { color: #155fb8; background: #fff; border-color: #b6d2f7; }
.comunale .sc-scheda .pulsanti button[aria-pressed=true], .comunale .sc-sezioni button[aria-pressed=true] { background: #e6f0ff; color: #155fb8; border-color: #b6d2f7; box-shadow: inset 0 0 0 1px #b6d2f7; }
.comunale #pannello .tag { color: #526a8b; background: #f3f6fb; border-color: #d6e1ef; }
.dimensione-mappa { display: flex; flex: none; gap: 5px; }
#azioni-mappa .dimensione-mappa :is(button, a) { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px; padding: 6px; background: #fff; color: #29446e; border: 1px solid #d6e1ef; border-radius: 6px; }
#azioni-mappa .dimensione-mappa button[aria-pressed=true] { background: #e6f0ff; color: #0c5fc8; border-color: #b6d2f7; }
#azioni-mappa :is(button, a):hover { background: #edf3fc; }
/* Il contenitore governa le due righe anche quando i pannelli riducono la mappa. */
#vista-home { container-type: inline-size; }
@container (max-width: 710px) {
  #avviso-asset-mappa { top: 100px; }
  .comunale:not(.pannello-chiuso) #avviso-asset-mappa, .comunale:is(.pv-aperto,.ro-aperto) #avviso-asset-mappa { top: 64px; }
  #azioni-mappa { flex-wrap: wrap; align-content: center; gap: 6px; min-height: 88px; padding: 7px; }
  #azioni-mappa h2 { display: block; font-size: 15px; }
  .azioni-rapide { order: 3; width: 100%; justify-content: flex-start; }
  .comunale #map { top: 88px; }
  .comunale:not(.pannello-chiuso) #map, .comunale:is(.sc-aperto,.pv-aperto,.ro-aperto) #map { top: 52px; }
  .comunale:not(.pannello-chiuso) #azioni-mappa, .comunale:is(.sc-aperto,.pv-aperto,.ro-aperto) #azioni-mappa { min-height: 52px; }
}
@container (max-width: 300px) {
  #azioni-mappa h2 { display: none; }
  #azioni-mappa { justify-content: space-between; }
  #azioni-mappa button { padding: 6px; font-size: 10px; gap: 4px; }
}
body.comunale.mappa-ampliata { --rail-w: 0px; --testa: 0px; --titolo-h: 0px; --fondo: 0px; --sx: var(--panel-w); }
body.comunale.mappa-ampliata.pannello-chiuso { --sx: 0px; }
.comunale.mappa-ampliata :is(#intestazione, #viste, #testa-vista, #attivita-home, #prossimi-home) { display: none; }
.comunale.mappa-ampliata #vista-home { top: 0; left: var(--sx); right: var(--dx); bottom: 0; border-radius: 0; border: 0; }
.comunale.mappa-ampliata #movimento-traffico { left: calc(var(--sx) + 18px); bottom: 40px; }
.comunale.mappa-ampliata #legenda-mappa { left: calc(var(--sx) + 18px); bottom: 40px; }
.comunale.mappa-ampliata:has(#movimento-traffico:not([hidden])) #legenda-mappa { bottom: 150px; }
.comunale.mappa-ampliata.sc-aperto #movimento-traffico { bottom: 112px; }
@media (max-width: 720px) {
  body.comunale.mappa-ampliata { --sx: 0px; --panel-w: min(320px, calc(100vw - 48px)); --scheda-w: min(350px, calc(100vw - 48px)); }
  .comunale.mappa-ampliata #movimento-traffico { bottom: 80px; }
}

/* Testata: menu dell'account (chi, ruolo e portata; Account e aggiornamenti; Esci). */
#intestazione .account { position: relative; flex: none; }
#apri-account[aria-expanded=true] .chevron { transform: rotate(180deg); }
#apri-account[aria-current=page] #nome-account { color: #075fc9; font-weight: 650; }
#menu-account { position: absolute; top: calc(100% + 12px); right: 0; z-index: 45; width: 280px; padding: 6px; box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(23, 36, 69, .16); }
#menu-account[hidden], #menu-account form[hidden] { display: none; }
#menu-account-chi { margin: 0 0 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); color: var(--fg); font-size: 13px; line-height: 1.45; }
#menu-account-chi small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
#menu-account form { margin: 0; }
#menu-account [role=menuitem] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 5px; background: none; color: #29446e; font: 13px system-ui; text-align: left; cursor: pointer; }
#menu-account [role=menuitem]:is(:hover, :focus-visible) { background: #edf3fc; color: #075fc9; }
#menu-account [role=menuitem] svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Data unica sotto il titolo: «oggi», «data scelta» con «Torna a oggi», «data dell'analisi»; «ambiente tecnico» quando serve. */
#data-riga { display: flex; align-items: center; gap: 2px 6px; min-width: 0; margin: 0; color: #6c80a0; font-size: 13px; }
#uffici-stato a { color: #155fb8; font-weight: 600; }

/* Pulsanti secondari del layout (bordo chiaro, testo blu) al posto dei grigi di sistema. */
.comunale :is(.secondario, #data-oggi, [data-pg-oggi]) { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; box-sizing: border-box; margin: 0; padding: 7px 11px; background: #fff; color: #155fb8; border: 1px solid #d6e1ef; border-radius: 6px; font: 500 12px system-ui; line-height: 1.3; text-align: left; cursor: pointer; }
.comunale :is(.secondario, #data-oggi, [data-pg-oggi]):hover { background: #edf3fc; border-color: #b6d2f7; }
.comunale :is(#data-oggi, [data-pg-oggi]) { padding: 2px 9px; font-size: 11px; }
.comunale #data-oggi[hidden] { display: none; }
.azioni-secondarie { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.comunale .vista > .apri-storico { margin-bottom: 8px; }

/* Panoramica: Attività aperte e Prossimi giorni affiancate in fondo, stessa altezza, ridotte insieme a una riga. */
body.comunale.vista-panoramica { --pgh-w: min(440px, calc((100vw - var(--sx) - var(--dx) - 52px) * .4)); }
body.comunale.vista-panoramica.attivita-brevi:has(.pgh-voci li + li) { --attivita-h: 142px; }
.comunale.vista-panoramica #attivita-home { right: calc(var(--dx) + 32px + var(--pgh-w)); }
#prossimi-home { position: absolute; right: calc(var(--dx) + 20px); bottom: 20px; width: var(--pgh-w, 400px); height: var(--attivita-h, 142px); box-sizing: border-box; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 9px; overflow: auto; }
#prossimi-home > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
#prossimi-home h2 { margin: 0; padding: 3px 4px; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pgh-conta { color: var(--muted); font-size: 12px; font-weight: 400; }
#tutti-prossimi { flex: none; padding: 5px 8px; border: 0; background: none; color: #1767d3; font: 12px system-ui; cursor: pointer; }
#tutti-prossimi span { margin-left: 8px; }
.pgh-sintesi { margin: 2px 4px 4px; color: #526a8b; font-size: 12px; line-height: 1.5; }
.pgh-voci { list-style: none; margin: 0; padding: 0; }
.pgh-voci li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px 8px; padding: 5px 4px; border-top: 1px solid #edf1f7; font-size: 12px; }
.pgh-voci .pg-l { margin: 0; }
.pgh-voci button { min-width: 0; padding: 0; border: 0; background: none; color: var(--fg); font: 12px system-ui; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgh-voci button:hover { color: #1767d3; text-decoration: underline; }
.pgh-d { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pgh-f { flex: none; }
.pgh-f .sc-fonte { font-size: 10px; padding: 0 6px; }
.pgh-q { flex: 1 1 0; min-width: 0; color: #627694; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgh-d .sigla-settore { flex: none; margin-left: 0; }
.comunale.attivita-compatte #prossimi-home { height: 52px; }
.comunale:not(.vista-panoramica) #prossimi-home, .comunale:is(.sc-aperto,.pv-aperto,.ro-aperto) #prossimi-home { display: none; }

/* Sigla del settore della barra accanto all'ufficio (com'è, a volte un ente esterno): Attività aperte, Prossimi giorni. */
.sigla-settore, .pg-settore { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid #c8d8ed; border-radius: 4px; color: #526a8b; font-size: 9px; font-weight: 650; line-height: 1.6; vertical-align: 1px; }

/* Nota sotto le voci del settore: cosa la voce non fa (Urbanistica › Prova modifiche alla viabilità). */
.uf-nota { margin: 8px 0 0; color: #526a8b; font-size: 11px; line-height: 1.5; }

/* Procedura aperta: sotto la testata e i comandi della mappa, accanto ai controlli; non copre ricerca, titolo e scheda. */
.comunale .procedura:not(.procedura-ridotta) { top: calc(var(--testa) + var(--titolo-h) + 64px); right: calc(var(--dx) + 80px); max-height: calc(100vh - var(--testa) - var(--titolo-h) - 100px); }
/* Procedura ridotta a un richiamo al cambio di settore: l'attività resta presa in carico, «riprendi» riapre i passi.
   Il richiamo sta nella riga della data (procedura.js), accorciato con i puntini se lo spazio non basta. */
.procedura.procedura-ridotta { display: none; }
#data-riga > :not(.procedura-richiamo) { flex: none; }
.procedura-richiamo { display: inline-flex; gap: 4px; flex: 0 1 auto; min-width: 0; margin-left: 6px; padding: 2px 10px; border: 1px solid #b6d2f7; border-radius: 11px; background: #edf3fc; color: var(--fg); font: 12px system-ui; line-height: 1.4; text-align: left; cursor: pointer; white-space: nowrap; }
.procedura-richiamo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.procedura-richiamo b { flex: none; color: #1767d3; }
.procedura-richiamo:hover { background: #dfeafa; }

/* Schermi bassi (proiettore 1280×720): barra e titolo più fitti, così Impostazioni e Aiuto restano sopra la piega. */
@media (max-height: 800px) and (min-width: 721px) {
  body.comunale { --titolo-h: 64px; }
  #testa-vista h1 { font-size: 24px; }
  body.comunale #viste { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .comunale #viste .viste-principali button, .comunale #viste .viste-servizio :is(button, #vai-validazione) { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
  .comunale #viste #uffici-elenco button { min-height: 32px; padding-top: 5px; padding-bottom: 5px; }
  .comunale #viste .uf-sigla { width: 22px; height: 22px; }
}
@media (max-width: 720px) {
  body.comunale.vista-panoramica { --fondo: 200px; }
  body.comunale.vista-panoramica.attivita-compatte { --fondo: 112px; }
  .comunale.vista-panoramica #attivita-home { right: 8px; }
  #prossimi-home { left: calc(var(--sx) + 8px); right: 8px; bottom: 160px; width: auto; height: 40px; padding: 4px 8px; }
  .comunale.attivita-compatte #prossimi-home { bottom: 66px; height: 40px; }
  #prossimi-home > header { min-height: 30px; }
  #prossimi-home h2 { font-size: 12px; }
  #tutti-prossimi { font-size: 10px; padding: 2px; }
  #pgh-corpo { display: none; }
  #data-riga { font-size: 11px; }
  #menu-account { right: -6px; width: min(280px, calc(100vw - 24px)); }
  .comunale .procedura:not(.procedura-ridotta) { left: calc(var(--rail-w) + 8px); right: 8px; width: auto; top: calc(var(--testa) + 8px); max-height: calc(100vh - var(--testa) - 16px); }
}

/* «Cambia data» in testata e il suo riquadro (14/10: la data non sta più in «Tutti i previsionali») */
.comunale #azioni-mappa #data-cambia { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.comunale #azioni-mappa #data-cambia svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.comunale #azioni-mappa #data-cambia .fm-giu { width: 14px; height: 14px; }
.comunale #azioni-mappa #data-cambia:is([aria-expanded=true], .non-oggi) { background: #e6f0ff; border-color: #b6d2f7; color: #0c5fc8; }
.comunale #data-cambia[hidden] { display: none; }
#scelta-data { position: fixed; z-index: 60; width: 340px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 24px rgba(16, 32, 60, .18); font-size: 13px; }
#scelta-data[hidden] { display: none; }
#scelta-data h2 { margin: 0 0 6px; font-size: 14px; font-weight: 650; }
#scelta-data .nota { margin: 8px 0 0; }
.comunale.mappa-ampliata #scelta-data { display: none; }

/* uffici.css */
/* Percorsi previsionali nel layout comunale Django. */
.comunale #viste { overflow-y: auto; gap: 16px; }
.uf-navigazione > p { margin: 0 12px 6px; color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
#uffici-elenco { display: grid; gap: 3px; }
.comunale #viste #uffici-elenco button { min-height: 38px; font-size: 12px; }
#uffici-elenco button[aria-current=page] { background: #e6f0ff; color: #155fb8; font-weight: 650; }
.uf-sigla { display: grid; place-items: center; border: 1px solid #c8d8ed; width: 24px; height: 24px; flex: none; border-radius: 5px; font-size: 9px; }
#uffici-stato { padding: 0 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
#uffici-stato:empty { display: none; }
.uf-contesto { padding: 16px 20px 10px; border-bottom: 1px solid var(--line); background: #f7f9fc; }
.uf-sopra { font-size: 11px; font-weight: 650; color: #526a8b; }
.uf-analisi { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.uf-analisi button { font: inherit; font-size: 11px; padding: 6px 9px; background: #fff; color: var(--fg); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.uf-analisi button[aria-pressed=true] { color: #155fb8; background: #e6f0ff; border-color: #b6d2f7; }
/* orizzonte della decisione accanto alla voce (decisione 15 del 13/10): discreto, con lo stesso contrasto del testo secondario */
.uf-oriz { color: #526a8b; font-weight: 400; }
.uf-analisi button[aria-pressed=true] .uf-oriz { color: #155fb8; }
/* «Tutti i previsionali»: un gruppo per orizzonte (Ore e giorni, Settimane, Anni) con il titolo e una nota */
.pv-oriz + .pv-oriz, .pv-oriz + .pv-elenco { margin-top: 14px; }
.pv-oriz h4 { margin: 0 0 2px; color: #526a8b; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.pv-oriz > .nota { margin: 0 0 6px; font-size: 11px; line-height: 1.45; }
.sc-percorso .sc-cambio, .sc-percorso .sc-uso { display: none; }
.sc-percorso > header { padding: 12px 20px; }
.sc-percorso > header h2 { font-size: 17px; }
.sc-percorso .sc-sezioni { padding-left: 12px; }
.sc-percorso .sc-corpo { padding: 14px 20px 24px; }
.uf-ambito, .uf-intervento, .uf-archivio { border: 1px solid var(--line); border-radius: 7px; margin-bottom: 12px; padding: 10px 12px; background: #f7f9fc; }
.sc-percorso summary { color: #315781; font-weight: 600; font-size: 12px; cursor: pointer; }
.uf-filtro-attuale { display: block; margin-top: 5px; font-weight: 400; color: var(--muted); font-size: 11px; }
.sc-percorso .uf-intervento > section > .nota { font-size: 11px; line-height: 1.5; }
.sc-percorso .sc-leva { margin: 10px 0; }
.sc-filtri select, .sc-leve select { width: 100%; }
/* «Cosa puoi fare» sotto i numeri: procedure avviabili dal settore titolare, informazione negli altri */
.sc-percorso .uf-proc { border: 1px solid var(--line); border-radius: 7px; margin: 4px 0 12px; padding: 10px 12px; background: #fff; }
.uf-proc-t { margin: 0 0 6px; color: #526a8b; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.uf-proc ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.uf-proc li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.uf-proc li .nota { font-size: 11px; line-height: 1.45; }
.uf-proc li button[data-sc-proc] { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap; }
.uf-proc li button[data-sc-proc][aria-disabled=true] { color: #4d5560; background: #f1f3f5; border-color: #c9d0d6; cursor: help; }
.uf-proc li button.mini { white-space: nowrap; }
.uf-proc .sc-proc-no { margin: 0 0 6px; }
/* la mappa si sta disegnando (scenari.js, fino al primo idle) */
.sc-legenda-mappa .sc-disegno { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; padding: 2px 8px; border: 1px solid #b6d2f7; border-radius: 999px; background: #e6f0ff; color: #155fb8; font-size: 11px; font-weight: 600; }
.sc-disegno::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: sc-disegno 0.9s ease-in-out infinite alternate; }
@keyframes sc-disegno { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sc-disegno::before { animation: none; } }
/* titolo dell'analisi: il fuoco dato dallo script all'apertura (anche da ?settore=) non disegna un riquadro; non è un comando */
.sc-scheda h2[tabindex="-1"]:focus { outline: none; }
/* metodo aperto da un'analisi di settore: il ritorno in testa al pannello */
.pv-pannello > header .pv-ritorno { display: block; margin: 0 0 6px; padding: 0; border: 0; background: none; color: #155fb8; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.pv-pannello > header .pv-ritorno:hover { text-decoration: underline; }
.sc-confronto-base { overflow-x: auto; margin: 14px 0; }
.sc-confronto-base table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.sc-confronto-base caption { text-align: left; font-weight: 600; padding: 8px 0; color: #315781; }
.sc-confronto-base th, .sc-confronto-base td { padding: 8px 5px; border-bottom: 1px solid var(--line); text-align: right; }
.sc-confronto-base th:first-child, .sc-confronto-base td:first-child { text-align: left; }
.sc-confronto-base thead { background: #edf3fc; }
.sc-leve-gruppo { font-size: 12px; color: #315781; }
.comunale .sc-tempo { left: calc(var(--rail-w) + 34px); right: calc(var(--dx) + 34px); bottom: 34px; }
/* la data della linea del tempo va su due righe invece di perdere la provenienza in fondo */
.comunale .sc-tempo .sc-ora { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 15px; line-height: 1.3; }
@media (max-width: 1400px) { .comunale .sc-tempo .sc-ora { font-size: 14px; } }
@media (max-width: 960px) {
 .uf-navigazione > p { margin: 0 2px 8px; text-align: center; font-size: 8px; }
 .comunale #viste #uffici-elenco button { font-size: 9px; }
}
@media (max-width: 720px) {
 .comunale .sc-tempo { left: calc(var(--rail-w) + 10px); right: 10px; bottom: 53vh; padding: 6px; }
 .comunale .sc-tempo .sc-tacche { display: none; }
 /* sul telefono la data ha una riga tutta sua (accanto a «Vai alla data» restava larga pochi pixel); il testo intero è nel title */
 .comunale .sc-tempo .sc-ora { flex: 1 1 100%; font-size: 13px; -webkit-line-clamp: 1; line-clamp: 1; }
 .uf-contesto { padding: 10px 14px; }
 .sc-percorso .sc-corpo { padding: 10px 14px; }
 .sc-percorso > header { padding: 8px 14px; }
 .sc-percorso > header h2 { font-size: 14px; }
 .uf-proc li { flex-wrap: wrap; }
}

/* mobilita_cantieri.css */
/* Estende il layout comunale esistente: nessun tema o pannello separato. */
/* Primo caricamento: solo i passi nella risposta; restano titolo, ✕ e schede del settore, non il telaio generico né il traffico. */
.comunale .sc-scheda.mc-caricamento > :not(header):not(.sc-corpo):not(.uf-contesto),
.mc-caricamento .sc-corpo > section:not([data-pagina=risultati]),
.mc-caricamento [data-pagina=risultati] > :not(.sc-risposta) { display:none !important; }
body:has(.sc-scheda.mc-caricamento) #movimento-traffico { display:none !important; }
.mc-passi { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:400; color:#5d7186; }
.mc-passi > b { font-size:16px; color:var(--fg); }
.mc-passi .ora { color:#173954; font-weight:600; }
.mc-passi .fatto { color:#2f6b45; }
.mc-passi small { display:block; margin:3px 0 0 16px; font-size:12px; font-weight:400; color:#5d7186; }
/* Vista operativa: le schede del settore (.uf-contesto) restano in alto, la vista occupa il resto e scorre.
   Nel settore resta l'intestazione del telaio (titolo dato dal settore e ✕), al posto di quella propria. */
.comunale .sc-scheda.mc-attiva:not(.sc-percorso) > :not(.mc-root):not(.uf-contesto),
.comunale .sc-scheda.mc-attiva.sc-percorso > :not(.mc-root):not(.uf-contesto):not(header) { display:none !important; }
.comunale .sc-scheda.mc-attiva { overflow:hidden; }
.sc-scheda.mc-attiva > .mc-root { flex:1; min-height:0; height:auto; }
.mc-root { flex:1; min-height:0; display:flex; flex-direction:column; color:var(--fg); font-size:13px; }
.mc-header { position:relative; padding:20px 24px 16px; border-bottom:1px solid var(--line); background:#f7f9fc; }
.mc-header > p { margin:0 0 7px; font-size:10px; font-weight:700; letter-spacing:.08em; color:#526a8b; text-transform:uppercase; }
.mc-header h2 { margin:0; font-size:21px; font-weight:650; color:#173954; }
.sc-percorso .mc-root .mc-header { padding:10px 24px; background:#e6f2ff; }
.sc-percorso .mc-root .mc-header > p { margin:0; font-size:11px; color:#123f66; }
.sc-percorso .mc-root .mc-header h2, .sc-percorso .mc-root .mc-close, .sc-percorso .mc-root .mc-header.mc-senza-passo { display:none; }
.mc-root .mc-close { position:absolute; right:14px; top:16px; border:0; background:transparent; font-size:22px; }
.mc-root .mc-mobile { display:none; }
.mc-corpo { padding:20px 24px 36px; overflow-y:auto; flex:1; }
.mc-root p { line-height:1.55; }
.mc-root h3 { font-size:13px; margin:0 0 12px; color:#294b68; }
.mc-root h3 span, .mc-root summary span { display:inline-block; background:#edf2f8; padding:2px 7px; border-radius:10px; font-size:11px; }
.mc-root button { border:1px solid #cdd8e4; border-radius:6px; background:#fff; color:#264966; font:inherit; font-weight:550; padding:9px 12px; cursor:pointer; line-height:1.35; }
.mc-root button:hover { border-color:#6d99ca; background:#f1f6fc; }
.mc-root button:disabled { opacity:.5; cursor:default; }
.mc-root .mc-primary { background:#1967be; color:#fff; border-color:#1967be; }
.mc-root .mc-primary:hover { background:#15579f; }
.mc-root .mc-full { width:100%; margin:8px 0; }
.mc-root button[data-mc=disegna][aria-pressed=true] { background:#eaf2fd; border-color:#93b6e0; color:#175daa; }
.mc-badge { display:inline-block; background:#edf4f8; color:#436079; border-radius:4px; padding:5px 7px; font-size:10px; font-weight:750; letter-spacing:.04em; }
.mc-badge.mc-bozza { background:#fff0d9; color:#96621c; }
.mc-stato p { font-size:12px; color:#5a6f82; margin:8px 0; }
.mc-intro { color:#455d71; margin:12px 0; }
.mc-messaggio { color:#356246; font-size:12px; line-height:1.5; margin:4px 0 8px; }
.mc-messaggio:empty { display:none; }
.mc-errore { background:#fff2e9; border-left:3px solid #b86726; padding:9px; color:#853e17; font-size:12px; }
.mc-editor { margin:14px 0; padding:15px; background:#f7f9fc; border:1px solid #d6e1ed; border-radius:8px; }
.mc-root label { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:600; color:#4a6379; margin:10px 0; min-width:0; }
.mc-root input:not([type=checkbox]), .mc-root select { box-sizing:border-box; width:100%; min-width:0; font:inherit; font-size:13px; background:#fff; border:1px solid #c7d5e4; border-radius:5px; padding:8px; color:#233e55; }
.mc-root .mc-check { flex-direction:row; align-items:center; font-weight:400; font-size:12px; }
.mc-root input[type=checkbox] { accent-color:#1967be; width:15px; height:15px; margin:0 4px 0 0; }
.mc-riga { display:flex; gap:8px; }
.mc-riga > * { flex:1; min-width:0; }
.mc-root .mc-nota { font-size:11px; line-height:1.5; color:#697d8e; margin:8px 0; }
/* Passo da compiere sulla mappa: nel pannello oltre che nel riquadro fisso sulla mappa. */
.mc-root .mc-passo { margin:8px 0; padding:9px 10px; background:#e6f2ff; border-radius:5px; color:#123f66; font-size:12px; }
.mc-bozze, .mc-mappa, .mc-piani, .mc-fonti, .mc-prodotti, .mc-attendibilita { border-top:1px solid var(--line); margin-top:20px; padding-top:17px; }
.mc-root article { border:1px solid #dce4ed; border-radius:6px; padding:10px; margin:10px 0; }
.mc-root article small { display:block; color:#65798b; margin:7px 0; line-height:1.5; }
.mc-root article .mc-riga button { font-size:11px; padding:6px 9px; }
.mc-root .mc-link { background:transparent; border:0; color:#1967be; padding:0; text-align:left; }
.mc-segmented { display:flex; gap:0; }
.mc-segmented button { flex:1; border-radius:0; font-size:12px; }
.mc-segmented button:first-child { border-radius:5px 0 0 5px; }
.mc-segmented button:last-child { border-radius:0 5px 5px 0; }
.mc-segmented button[aria-pressed=true] { background:#eaf2fd; border-color:#93b6e0; color:#175daa; }
.mc-filtri { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; margin:6px 0; }
.mc-filtri label { flex-direction:row; align-items:center; font-size:12px; font-weight:400; }
.mc-risultato { padding:9px 11px; background:#f1f5f9; border-radius:6px; font-size:12px; }
.mc-risultato dl { margin:10px 0; }
.mc-esito { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:7px 0; }
.mc-esito dt { display:flex; align-items:baseline; gap:7px; }
.mc-esito dt i { width:8px; height:8px; border-radius:50%; flex:none; }
.mc-esito dd { margin:0; font-weight:700; font-variant-numeric:tabular-nums; }
.mc-esito[data-esito=vicino] { border-top:1px solid #dce4ed; padding-top:9px; color:#60758a; }
.mc-accessi { list-style:none; padding:0; margin:10px 0; }
.mc-accessi li { margin:7px 0; }
.mc-accessi button { width:100%; text-align:left; font-size:12px; }
.mc-accessi button span { display:block; color:#1967be; font-size:11px; margin-top:4px; }
.mc-root summary { cursor:pointer; color:#42647e; font-weight:600; font-size:12px; }
.mc-fonti p { color:#60758a; font-size:12px; }
.mc-viaggio { border-top:1px solid var(--line); margin-top:20px; padding-top:17px; }
.mc-viaggio > .mc-riga { margin:8px 0; }
.mc-ore { border-top:1px solid #dce4ed; margin-top:16px; padding-top:12px; font-size:12px; }
.mc-ore li { margin:8px 0; }
.mc-tabella-ore { max-height:300px; overflow:auto; margin-top:10px; }
.mc-tabella-ore table { width:100%; border-collapse:collapse; font-size:11px; }
.mc-tabella-ore th, .mc-tabella-ore td { border-bottom:1px solid #dce4ed; padding:7px 4px; text-align:left; }
.mc-viaggio .mc-risultato { margin:12px 0; }
.mc-viaggio dd small { display:block; font-weight:400; color:#60758a; }
.mc-viaggio-prima dt::before, .mc-viaggio-dopo dt::before { content:''; width:20px; border-top:3px dashed #2698dd; }
.mc-viaggio-dopo dt::before { border-top:3px solid #e44f9c; }
/* Vincoli in vigore: elenco richiudibile con provenienza e «Mostra». */
.mc-vincoli { margin:4px 0 2px; }
.mc-vincoli ul { list-style:none; padding:0; margin:8px 0; display:grid; gap:7px; }
.mc-vincoli li { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; font-size:12px; }
.mc-vincoli li small { display:block; color:#65798b; font-size:11px; margin-top:2px; }
.mc-vincoli li .mc-link { flex:none; font-size:12px; }
/* Sintesi dell'ora in mappa (stima), avanzamento della ricerca, motivo di un pulsante spento. */
.mc-sintesi-riga { margin:6px 0 10px; padding:9px 10px; background:#f1f5f9; border-radius:6px; font-size:12px; color:#173954; }
.mc-sintesi-riga small { display:block; margin-top:4px; font-size:11px; color:#65798b; }
.mc-avanzamento { display:flex; flex-direction:column; gap:4px; margin:8px 0; font-size:11px; color:#455d71; }
.mc-avanzamento progress { width:100%; height:8px; accent-color:#1967be; }
.mc-root .mc-motivo { margin-top:0; }
/* Conferma in linea (approvazione, revoca) ed esito fisso, che il ricalcolo non sovrascrive. */
.mc-conferma { margin:10px 0; padding:11px 12px; background:#fffaf0; border:1px solid #e3b36b; border-radius:7px; font-size:12px; }
.mc-conferma p { margin:0 0 7px; }
.mc-conferma ul { margin:0 0 8px; padding-left:18px; }
.mc-conferma li small { display:inline; margin:0; }
.mc-esito-fisso { margin:8px 0; padding:8px 10px; background:#eaf6ee; border-left:3px solid #2f7a4b; color:#1f4f31; font-size:12px; }
.mc-root article.mc-evidenza { border-color:#2f7a4b; box-shadow:0 0 0 1px #2f7a4b; }
.mc-piano-testa { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.mc-stato-piano { flex:none; padding:3px 8px; border-radius:5px; font-size:11px; font-weight:650; background:#edf4f8; color:#3d5a72; }
.mc-stato-piano[data-stato=vigore] { background:#fbe7ea; color:#962334; }
.mc-stato-piano[data-stato=programmato] { background:#fff0d9; color:#82501a; }
.mc-stato-piano[data-stato=concluso], .mc-stato-piano[data-stato=revocato] { background:#eef1f4; color:#5d6b78; }
.mc-stato-piano[data-stato=rete] { background:#fff2e9; color:#853e17; }
/* Prodotti e procedure: scheda d'impatto, soccorsi, «Cosa puoi fare», calendario dei conflitti. */
.mc-azioni { display:flex; flex-wrap:wrap; gap:6px; }
.mc-azioni button { font-size:12px; padding:8px 10px; }
.mc-procedure { margin:10px 0; }
.mc-procedure .uf-proc, .mc-procedure .sc-proc { margin:0; }
.mc-calendario { margin:10px 0 0; }
.mc-calendario .mc-segmented { margin:8px 0; }
.mc-calendario table { width:100%; border-collapse:collapse; font-size:11px; }
.mc-calendario th, .mc-calendario td { border-bottom:1px solid #dce4ed; padding:6px 4px; text-align:left; }
.mc-tempi { font-size:11px; }
/* Legenda chiusa sul titolo: solo il pulsante riceve i clic, il resto lascia passare quelli sulla mappa. */
.mc-aperto .sc-legenda-mappa { max-width:330px; padding:0; font-size:11px; pointer-events:none; }
.mc-leg-b { pointer-events:auto; display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; font:inherit; font-size:12px; color:var(--fg); padding:7px 10px; cursor:pointer; text-align:left; }
.mc-leg-b span { margin-left:auto; padding:2px 8px; border:1px solid #b6d2f7; border-radius:5px; background:#e6f0ff; color:#155fb8; font-size:11px; font-weight:600; }
.mc-leg-c { padding:2px 10px 9px; }
/* Sotto il titolo della legenda, l'interruttore «Sensi di marcia»: sempre visibile, anche a legenda chiusa. */
.mc-leg-testa { display:flex; flex-direction:column; align-items:flex-start; width:100%; }
/* Interruttore «Sensi di marcia» (DirezioniStradali.interruttore), anche in Piogge e viabilità: spento le frecce bianche
   della rete sono nascoste, acceso sfondo azzurro e levetta a destra. Le frecce ambra e della deviazione non dipendono da qui. */
.ds-sensi { pointer-events:auto; flex:none; display:inline-flex; align-items:center; gap:6px; margin:-2px 10px 8px; padding:3px 6px 3px 4px; border:1px solid #cfd9e3; border-radius:5px; background:#fff; color:#3d5466; font:inherit; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; }
.ds-sensi i { width:18px; height:14px; line-height:13px; text-align:center; font-style:normal; font-size:13px; color:#fff; background:#8796a2; border-radius:3px; }
.ds-sensi .ds-sw { position:relative; width:20px; height:11px; border-radius:6px; background:#c5d0da; transition:background .15s; }
.ds-sensi .ds-sw::after { content:""; position:absolute; top:1.5px; left:1.5px; width:8px; height:8px; border-radius:50%; background:#fff; transition:transform .15s; }
.ds-sensi:hover { border-color:#93b6e0; }
.ds-sensi:focus-visible { outline:2px solid #2677de; outline-offset:1px; }
.ds-sensi[aria-pressed=true] { background:#e6f0ff; border-color:#b6d2f7; color:#155fb8; }
.ds-sensi[aria-pressed=true] i { background:#263844; }
.ds-sensi[aria-pressed=true] .ds-sw { background:#2677de; }
.ds-sensi[aria-pressed=true] .ds-sw::after { transform:translateX(9px); }
.mc-leg-c > div { display:flex; flex-wrap:wrap; gap:5px 10px; margin-top:5px; }
.mc-leg-c > small { display:block; margin-top:6px; color:var(--muted); }
.mc-leg-c .mc-chiave-percorsi { border-top:1px solid #dce4ed; padding-top:7px; margin-top:7px; }
.mc-aperto .maplibregl-popup { z-index:30; }
.mc-chiave-percorsi span { display:flex; align-items:center; gap:7px; }
.mc-chiave-percorsi i { display:inline-block; flex:none; width:26px; height:12px; border-radius:0; font-style:normal; }
.mc-chiave-percorsi .mc-chiave-freccia { height:16px; line-height:14px; text-align:center; font-size:23px; color:white; background:#263844; border-radius:3px; }
.mc-chiave-percorsi .mc-chiave-ambra { color:#ffca62; }
.mc-chiave-percorsi .mc-chiave-linea { height:0; border-top:4px solid; }
.mc-chiave-percorsi .mc-chiave-obbligatoria { height:9px; border:0; background:#ac7bf7; color:#fff; font-size:21px; line-height:5px; text-align:center; text-shadow:0 1px 1px #241735; }
.mc-chiave-percorsi .mc-chiave-dopo { border-color:#e44f9c; }
.mc-chiave-percorsi .mc-chiave-prima { border-color:#2698dd; border-top-style:dashed; }
/* Scelta sulla mappa: cursore a croce e riquadro fisso con il passo (Esc annulla); poi ricalcolo o esito del viaggio.
   Sta sopra la scheda «Traffico · stima del gemello» e la linea del tempo, senza coprirle. */
.mc-scelta .maplibregl-canvas-container.maplibregl-interactive, .mc-scelta .maplibregl-canvas { cursor:crosshair !important; }
.mc-sintesi { position:fixed; left:calc(var(--sx) + 36px); right:calc(var(--dx) + 36px); bottom:178px; z-index:22; width:fit-content; max-width:calc(100vw - var(--sx) - var(--dx) - 72px); margin:auto; background:#fff; border:1px solid #cddce5; border-radius:7px; padding:10px 14px; color:#173954; font-size:12px; box-shadow:0 2px 10px #0002; }
.mc-sintesi[hidden] { display:none; }
.mc-sintesi.mc-modo { background:#e6f2ff; border-color:#93b6e0; font-size:13px; }
.mc-sintesi button { margin-left:8px; font:inherit; font-size:12px; padding:4px 10px; border:1px solid #93b6e0; border-radius:5px; background:#fff; color:#175daa; cursor:pointer; }
.mc-sintesi small { margin-left:6px; color:#65798b; }
@media(max-width:900px) {
 .mc-header { padding:12px 15px; }
 .mc-header h2 { font-size:17px; }
 .sc-percorso .mc-root .mc-header.mc-senza-passo { display:block; background:#f7f9fc; padding:6px 15px; }
 .sc-percorso .mc-root .mc-header.mc-senza-passo > p { display:none; }
 .mc-corpo { padding:14px 15px 25px; }
 .mc-aperto .sc-legenda-mappa { max-width:220px; top:calc(var(--testa) + var(--titolo-h) + 58px); font-size:10px; left:12px; }
 .mc-aperto:not(.mc-espansa) .sc-legenda-mappa { display:none; }
 .mc-aperto { --sx:0px !important; --dx:0px !important; }
 .comunale.mc-aperto .sc-scheda.mc-attiva { left:0; right:0; top:auto; bottom:0; width:auto; height:52vh; max-height:52vh; }
 .mc-root .mc-mobile { display:block; font-size:11px; padding:5px 8px; margin-top:6px; }
 .comunale.mc-espansa .sc-scheda.mc-attiva { height:112px; max-height:112px; }
 .mc-espansa .mc-corpo { display:none; }
 .comunale.mc-espansa .sc-scheda.mc-attiva > :not(.mc-root) { display:none !important; }
 .comunale.mc-espansa .sc-tempo { bottom:120px; left:10px; right:10px; }
 .comunale.mc-aperto #movimento-traffico { display:none; }
 .mc-sintesi { bottom:calc(52vh + 142px); right:14px; left:14px; max-width:calc(100vw - 28px); }
 .mc-espansa .mc-sintesi { bottom:200px; }
}
/* Cantieri in vigore: stesse strisce dei livelli sc_mc_cantieri (mobilita_cantieri.js). */
.mc-chiave-percorsi .mc-chiave-cantiere { height:8px; border:2px solid #1d1d1b; background:repeating-linear-gradient(90deg,#ffd21f 0 5px,#1d1d1b 5px 10px); }
.mc-chiave-percorsi .mc-chiave-chiusura { border-color:#fff; background:repeating-linear-gradient(90deg,#d7262f 0 5px,#fff 5px 10px); box-shadow:0 0 0 1px #8c9ba8; }
/* Rumore stradale prima/dopo (rumore.js): riquadro dentro «Leggi la mappa» */
.mc-rumore { margin:10px 0; padding:9px 11px; background:#f1f5f9; border-radius:6px; font-size:12px; }
.mc-rumore p { margin:0 0 6px; }
.mc-rumore-voci { list-style:none; margin:6px 0; padding:0; display:grid; gap:4px; }
.mc-rumore-voci i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px; border:1px solid #182f42; }
/* Struttura comune delle viste dei settori (17/10, pilota): cinque blocchi numerati, sempre nello stesso ordine */
.mc-root .mc-blocco { border:1px solid #dbe4ee; border-radius:10px; background:#fff; margin:0 0 12px; }
.mc-root .mc-blocco > .mc-blocco-c { padding:4px 14px 12px; }
.mc-root .mc-blocco-t, .mc-root details.mc-blocco > summary { display:flex; align-items:center; gap:9px; margin:0; padding:11px 14px; font-size:14px; font-weight:650; color:#173954; }
.mc-root details.mc-blocco > summary { cursor:pointer; list-style:none; }
.mc-root details.mc-blocco > summary::-webkit-details-marker { display:none; }
.mc-root details.mc-blocco > summary::after { content:"▾"; margin-left:auto; color:#6d86a0; transition:transform .15s; }
.mc-root details.mc-blocco:not([open]) > summary::after { transform:rotate(-90deg); }
.mc-root .mc-blocco-n, .mc-root summary .mc-blocco-n { flex:none; display:inline-grid; place-items:center; width:22px; height:22px; padding:0; border-radius:50%; background:#e3eefb; color:#175daa; font-size:12px; font-weight:750; }
/* 1 In breve: la risposta in primo piano */
.mc-root .mc-b1 { border-color:#8fb6e2; background:#f7fbff; }
.mc-root .mc-b1 .mc-stato { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.mc-root .mc-b1 .mc-stato p { margin:0; }
.mc-root .mc-breve { margin:10px 0 8px; font-size:15px; font-weight:600; color:#173954; line-height:1.45; }
.mc-root .mc-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:6px; }
.mc-root .mc-kpi { background:#fff; border:1px solid #dbe4ee; border-radius:8px; padding:7px 9px; }
.mc-root .mc-kpi b { display:block; font-size:18px; color:#173954; }
.mc-root .mc-kpi span { display:block; font-size:11px; color:#5a6f82; line-height:1.3; }
/* le sezioni interne non ripetono cornici e margini dentro i blocchi */
.mc-root .mc-blocco section { margin-top:12px; }
.mc-root .mc-blocco section:first-child { margin-top:4px; }

/* piogge_viabilita.css */
/* Primo caricamento: solo i passi nella risposta; restano titolo, ✕ e schede del settore, non il telaio generico né il traffico. */
.comunale .sc-scheda.aq-caricamento > :not(header):not(.sc-corpo):not(.uf-contesto),
.aq-caricamento .sc-corpo > section:not([data-pagina=risultati]),
.aq-caricamento [data-pagina=risultati] > :not(.sc-risposta) { display:none !important; }
body:has(.sc-scheda.aq-caricamento) #movimento-traffico { display:none !important; }
.aq-passi { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:400; color:#5d7186; }
.aq-passi > b { font-size:16px; color:var(--fg); }
.aq-passi .ora { color:#173954; font-weight:600; }
.aq-passi .fatto { color:#2f6b45; }
.aq-passi small { display:block; margin:3px 0 0 16px; font-size:12px; font-weight:400; color:#5d7186; }
/* Vista operativa: le schede del settore (.uf-contesto) restano in alto, la vista occupa il resto e scorre.
   Nel settore resta anche l'intestazione delle altre analisi (titolo e ✕), al posto di quella propria. */
.comunale .sc-scheda.aq-attiva:not(.sc-percorso) > :not(.aq-root):not(.uf-contesto),
.comunale .sc-scheda.aq-attiva.sc-percorso > :not(.aq-root):not(.uf-contesto):not(header) { display:none !important; }
.comunale .sc-scheda.aq-attiva { overflow:hidden; }
.sc-scheda.aq-attiva > .aq-root { flex:1; min-height:0; height:auto; }
.sc-percorso .aq-root .mc-header { display:none; }
.aq-root .aq-titolo { font-size:17px; line-height:1.4; margin:18px 0 7px; }
.aq-root .aq-demo { padding:9px; background:#fff0d7; border-left:3px solid #ba791e; font-size:12px; }
.aq-stato { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 0 8px; }
.aq-stato b { padding:4px 9px; border-radius:5px; font-size:13px; background:#edf4f8; color:#3d5a72; }
.aq-stato[data-stato=proposta] b { background:#eef1f4; color:#46596a; }
.aq-stato[data-stato=in_attesa] b, .aq-stato[data-stato=programmata] b { background:#fff0d9; color:#82501a; }
.aq-stato[data-stato=chiusa] b { background:#fbe7ea; color:#962334; }
.aq-stato[data-stato=allagamento] b { background:#e3effa; color:#145a94; }
.aq-adesso { margin-top:12px; }
.aq-adesso-t { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.aq-root .mc-risultato p { margin:7px 0; }
.aq-senza { font-size:11px; font-weight:700; color:#6b3f00; background:#fff4e5; border:1px solid #e3b36b; border-radius:9px; padding:0 7px; }
.aq-evento .aq-stato-e { font-weight:650; color:#33506a; }
.aq-evento[data-stato=chiusa] .aq-stato-e { color:#962334; }
.aq-evento[data-stato=allagamento] .aq-stato-e { color:#145a94; }
.aq-evento[data-stato=in_attesa] .aq-stato-e, .aq-evento[data-stato=programmata] .aq-stato-e { color:#82501a; }
.aq-acqua { margin:6px 0 8px; padding:7px 9px; background:#e3effa; border-left:3px solid #176cb1; color:#123f66; font-size:12px; }
.aq-azioni { display:flex; flex-wrap:wrap; gap:6px; }
.aq-root .aq-azioni button { font-size:11px; padding:7px; }
.aq-istruzione { background:#e6f2ff; padding:10px; border-radius:5px; color:#123f66; }
.aq-root .aq-istruzione .mc-link { margin-left:6px; }
.aq-root .aq-profilo .mc-link { display:inline; font-size:11px; }
.aq-scelta .maplibregl-canvas-container.maplibregl-interactive, .aq-scelta .maplibregl-canvas { cursor:crosshair !important; }
.aq-aperto .sc-tempo { z-index:20; }
.aq-aperto #movimento-traffico { display:none !important; }
.aq-aperto .sc-tempo .sc-play, .aq-aperto .sc-tempo .sc-data { display:none; }
.aq-aperto .maplibregl-popup { z-index:30; }
.aq-ore { display:flex; gap:2px; align-items:stretch; height:28px; margin-top:5px; }
.aq-ore button { width:0; flex:1; border:0; padding:0; cursor:pointer; background:#d6e5ee; border-bottom:var(--pioggia) solid #62a8cd; }
.aq-ore button.rischio { border-bottom-color:#eaa528; }
.aq-ore button.manca { background:repeating-linear-gradient(45deg,#e4e7ea,#e4e7ea 2px,#aab4bc 2px,#aab4bc 3px); border:0; }
.aq-ore button.programma { border-top:3px dashed #a36021; }
.aq-ore button.scelta { outline:2px solid #173954; outline-offset:1px; }
/* Legenda chiusa sul titolo: solo il pulsante riceve i clic, il resto lascia passare quelli sulla mappa. */
.aq-aperto .sc-legenda-mappa { max-width:300px; padding:0; pointer-events:none; }
.aq-leg-b { pointer-events:auto; display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; font:inherit; font-size:12px; color:var(--fg); padding:7px 10px; cursor:pointer; text-align:left; }
.aq-leg-b span { margin-left:auto; padding:2px 8px; border:1px solid #b6d2f7; border-radius:5px; background:#e6f0ff; color:#155fb8; font-size:11px; font-weight:600; }
/* sotto il titolo della legenda l'interruttore «Sensi di marcia» (stile .ds-sensi in mobilita_cantieri.css), anche a legenda chiusa */
.aq-leg-testa { display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.aq-leg-c { display:flex; flex-direction:column; gap:4px; padding:2px 10px 9px; font-size:11px; }
.aq-voce { display:flex; align-items:center; gap:7px; }
.aq-voce i { flex:none; width:24px; height:6px; border-radius:2px; background:var(--c); box-shadow:0 0 0 2px #fff, 0 0 0 3px #cfd9e2; }
.aq-voce i.tratto { background:repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 10px); }
.aq-voce i.sottile { height:4px; box-shadow:none; }
.aq-voce .aq-freccia { height:16px; width:24px; line-height:15px; text-align:center; font-style:normal; font-size:13px; color:#fff; background:#263844; box-shadow:none; }
.aq-leg-c small { color:var(--muted); line-height:1.4; margin-top:3px; }
.aq-esito { min-height:86px; }
.aq-sintesi { position:fixed; left:calc(var(--sx) + 36px); right:calc(var(--dx) + 36px); bottom:152px; z-index:22; width:fit-content; max-width:calc(100vw - var(--sx) - var(--dx) - 72px); margin:auto; background:#fff; border:1px solid #cddce5; border-radius:7px; padding:10px 14px; color:#173954; font-size:12px; box-shadow:0 2px 10px #0002; }
.aq-sintesi.aq-modo { background:#e6f2ff; border-color:#93b6e0; font-size:13px; }
.aq-sintesi button { margin-left:8px; font:inherit; font-size:12px; padding:4px 10px; border:1px solid #93b6e0; border-radius:5px; background:#fff; color:#175daa; cursor:pointer; }
.aq-sintesi .aq-errore { color:#853e17; font-weight:600; }
/* telefono: l'esito è già nella scheda, sulla mappa resta solo l'istruzione della scelta */
@media(max-width:900px) { .aq-sintesi { bottom:calc(52vh + 142px); right:14px; left:calc(var(--rail-w) + 14px); max-width:calc(100vw - var(--rail-w) - 28px); } .aq-sintesi:not(.aq-modo) { display:none; } }
@media(max-width:900px) { .aq-aperto .sc-tempo { bottom:52vh; } .aq-aperto .sc-legenda-mappa { display:none; } .aq-root .mc-corpo { padding:12px 18px 24px; } }
/* Acqua dentro il temporale (acqua_dati.js): riquadri «Allerta e fase», «Secchia a Ponte Motta», «Aree esposte» e «Cosa puoi fare» */
.aq-root .aq-riq { margin:14px 0; padding:10px 12px; border:1px solid #d6e2ea; border-radius:7px; background:#f8fbfd; font-size:12.5px; line-height:1.45; }
.aq-root .aq-riq h3 { margin:0 0 6px; font-size:13px; }
.aq-root .aq-riq p { margin:5px 0; }
.aq-root .aq-riq .nota { margin:3px 0; color:#5d7186; font-size:12px; }
.aq-root .aq-attesa p { color:#5d7186; }
.aq-root .aq-fase { padding:6px 8px; background:#edf4f8; border-radius:5px; }
.aq-root .aq-fase[data-fase="1"] { background:#fff7df; } .aq-root .aq-fase[data-fase="2"] { background:#ffeedd; } .aq-root .aq-fase[data-fase="3"] { background:#fde5e3; }
.aq-root .aq-chi, .aq-root .aq-verifica { color:#5d7186; font-size:11.5px; }
.aq-root .aq-pioggia { padding-left:8px; border-left:3px solid #62a8cd; }
.aq-root .aq-fuori { padding:8px 10px; background:#eef1f4; border-left:3px solid #8395a5; font-size:12px; }
.aq-root .aq-senza-reale { padding:8px 10px; background:#fff0d7; border-radius:5px; }
.aq-root details.aq-aree > summary { cursor:pointer; font-size:13px; color:#294b68; }
.aq-root details.aq-aree > summary span { font-weight:400; }
.aq-root .aq-ipotesi { padding:7px 9px; background:#fff0d7; border-left:3px solid #ba791e; }
.aq-root .aq-ipotesi .mc-link { display:inline; font-size:12px; }
.aq-root .aq-scelta { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:8px 0; }
.aq-root .aq-scelta > span { width:100%; font-size:11.5px; color:#5d7186; }
.aq-root .aq-scelta button { font-size:11px; padding:6px 8px; }
.aq-root .aq-scelta button[aria-pressed=true] { background:#eaf2fd; border-color:#93b6e0; color:#175daa; }
.aq-root .aq-num { width:100%; border-collapse:collapse; margin:6px 0; }
.aq-root .aq-num th, .aq-root .aq-num td { padding:3px 6px 3px 0; text-align:left; vertical-align:top; border-top:1px solid #e3ebf1; }
.aq-root .aq-num th { width:28%; font-weight:600; color:#3d5a72; }
.aq-root .aq-elenco, .aq-root .aq-servizi ul { margin:3px 0 6px; padding-left:18px; }
.aq-root .aq-riq .mc-riga { margin-top:8px; }
.aq-root .aq-riq .mc-riga button { font-size:11px; padding:7px 8px; }
.aq-root .aq-puoi ul { list-style:none; margin:0 0 6px; padding:0; }
.aq-root .aq-puoi li { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; }
.aq-root .aq-puoi li small { display:block; color:#5d7186; font-size:11px; }
.aq-root .aq-puoi li button { flex:none; font-size:11px; padding:6px 9px; }
.aq-root .aq-puoi button[aria-disabled=true] { opacity:.5; }
.aq-root .aq-fonti-acqua { border-top:1px solid var(--line); margin-top:8px; }
.aq-voce i.punto { width:11px; height:11px; border-radius:50%; margin:0 6px 0 7px; }
.aq-leg-sez { margin-top:6px; font-weight:600; color:var(--fg); }

/* sezioni_aule.css */
/* Sezioni e aule (sezioni_aule.js): stesse regole di .aq-attiva / .aq-caricamento (piogge_viabilita.css) con il prefisso sa-. */
/* Primo caricamento: solo i passi nella risposta; restano titolo, ✕ e schede del settore, non il telaio generico né il traffico. */
.comunale .sc-scheda.sa-caricamento > :not(header):not(.sc-corpo):not(.uf-contesto),
.sa-caricamento .sc-corpo > section:not([data-pagina=risultati]),
.sa-caricamento [data-pagina=risultati] > :not(.sc-risposta) { display:none !important; }
body:has(.sc-scheda.sa-caricamento) #movimento-traffico { display:none !important; }
.sa-passi { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:400; color:#5d7186; }
.sa-passi > b { font-size:16px; color:var(--fg); }
.sa-passi .ora { color:#173954; font-weight:600; }
.sa-passi .fatto { color:#2f6b45; }
/* Vista operativa: le schede del settore (.uf-contesto) restano in alto, la vista occupa il resto e scorre.
   Nel settore resta anche l'intestazione del telaio (titolo della voce e ✕), al posto di quella propria. */
.comunale .sc-scheda.sa-attiva:not(.sc-percorso) > :not(.sa-root):not(.uf-contesto),
.comunale .sc-scheda.sa-attiva.sc-percorso > :not(.sa-root):not(.uf-contesto):not(header) { display:none !important; }
.comunale .sc-scheda.sa-attiva { overflow:hidden; }
.sc-scheda.sa-attiva > .sa-root { flex:1; min-height:0; height:auto; }
.sc-percorso .sa-root .mc-header { display:none; }
.sa-aperto #movimento-traffico { display:none !important; }
.sa-aperto .maplibregl-popup { z-index:30; }

/* percorso «Popolazione e scuole» (percorso_scuole.js): «← Zona» in testa al livello scuola, anche nei settori dove la testata propria
   lascia il posto a quella del telaio; la riga «Dal livello zona» con quello che è passato e quello che resta della zona */
.sa-livelli { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:12px; color:#33506a; }
.sa-root .sa-livelli .sa-zona-b { flex:none; padding:5px 11px; font-size:12px; font-weight:650; background:#eaf2fd; border:1px solid #93b6e0; color:#175daa; border-radius:6px; }
.sa-root .sa-dalla-zona { margin:0 0 12px; padding:9px 12px; font-size:12px; line-height:1.55; color:#294b68; background:#f6f3fb; border:1px solid #ddd2ee; border-left:4px solid #6a4fa0; border-radius:7px; }
.sa-root .sa-dalla-zona small { display:block; margin-top:5px; font-size:11px; color:#5a5470; }
.sa-root .sa-dalla-zona .mc-link { display:inline; font-size:12px; }
/* livello Zona (sc_popolazione.js): il blocco «Livello scuola» sopra le tabelle */
.sc-pop-scuola { margin:0 0 10px; padding:10px 12px; background:#f6f3fb; border:1px solid #ddd2ee; border-left:4px solid #6a4fa0; border-radius:7px; font-size:12.5px; line-height:1.55; color:#294b68; }
.sc-pop-scuola p { margin:0 0 6px; }
.sc-pop-scuola .pulsanti { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.sc-pop-scuola .sc-pop-scuola-b { font-weight:650; background:#fff; border:1px solid #9d86c9; color:#4b2f84; }
.sc-pop-scuola .sc-pop-avviso { padding:5px 8px; background:#fff8e6; border-left:3px solid #e9a823; color:#5b4310; }
.sc-pop-scuola p.nota { margin:4px 0 0; font-size:11.5px; line-height:1.5; color:#5a5470; }
.sc-tabella .sc-pop-riga-b { margin-left:6px; padding:1px 7px; font-size:11px; }

/* «Anno da decidere ▸» in testa: sposta la data solo al clic */
.sa-anno { margin:0 0 14px; padding:10px 12px; background:#f3f7fb; border:1px solid #d6e1ed; border-radius:7px; }
.sa-root .sa-anno-b { display:block; width:100%; text-align:left; font-size:14px; background:#fff; border-color:#93b6e0; color:#175daa; }
.sa-root .sa-anno-b[aria-current=true] { background:#eaf2fd; color:#123f66; }
.sa-anno small { display:block; margin-top:6px; font-size:11px; line-height:1.5; color:#5a6f82; }
.sa-root .sa-anno .sa-mostrato { margin:6px 0 0; font-size:12px; color:#33506a; }
.sa-esempio { display:inline-block; font-size:10.5px; font-weight:650; color:#5b3e8c; background:#f1ecf9; border:1px solid #d3c4ea; border-radius:9px; padding:0 6px; white-space:nowrap; }
/* scelta della scuola: il menu fa da titolo */
.sa-root .sa-scelta { margin:4px 0 2px; }
.sa-root .sa-scelta select { font-size:16px; font-weight:650; color:#173954; padding:9px 8px; }
.sa-root .sa-sotto { margin:2px 0 12px; font-size:11.5px; color:#5a6f82; }
.sa-root .sa-sotto .mc-link { display:inline; font-size:11.5px; }
/* in breve: la risposta sulle aule prima delle tre righe */
.sa-root .sa-breve { margin:0 0 10px; padding:9px 12px; font-size:13.5px; line-height:1.6; color:#173954; background:#fff; border:1px solid #d6e1ed; border-left:4px solid #173954; border-radius:7px; }
/* risposta in tre righe */
.sa-righe { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:9px; }
.sa-righe > li { display:flex; gap:10px; align-items:flex-start; padding:10px 11px; background:#f6f8fa; border:1px solid #e0e7ee; border-radius:7px; font-size:12.5px; line-height:1.6; }
.sa-righe .sa-n { flex:none; width:20px; height:20px; border-radius:50%; background:#173954; color:#fff; font-size:11px; font-weight:700; line-height:20px; text-align:center; margin-top:1px; }
.sa-righe .mc-link { display:inline; font-size:12.5px; }
.sa-righe > li > div { min-width:0; }
.sa-root .sa-righe .sa-risposta { margin:0; font-size:13px; line-height:1.6; color:#173954; }
.sa-dettaglio { display:block; margin-top:5px; font-size:11.5px; line-height:1.55; color:#4f6577; }
.sa-root .sa-cal-t { margin:6px 0 2px; font-size:11.5px; font-weight:650; color:#33506a; }
.sa-cal { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; font-size:11.5px; line-height:1.45; color:#33506a; }
.sa-cal li { display:flex; flex-wrap:wrap; align-items:center; gap:2px 5px; }
.sa-cal li.sa-passata { color:#7d8d9a; }
.sa-esito { display:inline-block; padding:1px 8px; border-radius:5px; font-weight:650; background:#eef1f4; color:#46596a; }
.sa-esito[data-esito=piu] { background:#fde9dd; color:#963c0b; }
.sa-esito[data-esito=limite] { background:#fff3d6; color:#7b5205; border:1px dashed #d79a1d; }
.sa-esito[data-esito=meno] { background:#e3f0fb; color:#1b5d93; }
.sa-cambia { color:#963c0b; }
.sa-riga-comparto { padding:10px 11px; background:#f6f8fa; border:1px solid #e0e7ee; border-radius:7px; font-size:12.5px; line-height:1.6; }
/* comandi e motivo di un pulsante spento */
.sa-comandi { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.sa-comandi > button { flex:1; min-width:110px; }
.sa-root .sa-comandi button[aria-expanded=true] { background:#eaf2fd; border-color:#93b6e0; color:#175daa; }
.sa-root .sa-motivo { margin-top:2px; }
.sa-root .mc-conferma label, .sa-root .sa-comparto label, .sa-root #sa-ufficio label { margin:8px 0; }
.sa-root textarea { box-sizing:border-box; width:100%; font:inherit; font-size:13px; border:1px solid #c7d5e4; border-radius:5px; padding:8px; color:#233e55; resize:vertical; }
/* ipotesi del comparto */
.sa-comparto { margin:12px 0; padding:12px 14px; background:#fff8f3; border:1px solid #efcfb9; border-radius:8px; }
.sa-comparto h3 { margin:0 0 4px; }
.sa-leve { display:flex; gap:8px; }
.sa-leve > * { flex:1; min-width:0; }
.sa-avviso-campo { color:#853e17; font-weight:600; }
/* elenco delle scuole che cambiano */
.sa-root .sa-cambi .sa-sintesi { margin:0 0 6px; font-size:12px; color:#33506a; }
/* l'incertezza in parole: cosa vuol dire «al limite» e quanto spesso le aule previste così erano esatte */
.sa-root .sa-cambi .sa-incertezza { margin:0 0 8px; padding:7px 10px; font-size:11.5px; line-height:1.55; color:#4a3a12; background:#fdf6e3; border-left:3px solid #e9a823; border-radius:5px; }
.sa-cambi ul, .sa-lista { list-style:none; margin:8px 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sa-lista li { font-size:12px; line-height:1.5; }
.sa-lista li small { display:block; color:#65798b; font-size:11px; margin-top:2px; }
.sa-root .sa-voce-b { display:flex; gap:9px; align-items:center; width:100%; text-align:left; padding:8px 10px; }
.sa-voce-b i { flex:none; width:14px; height:14px; border-radius:3px; background:var(--c); }
.sa-voce-b small { display:block; font-weight:400; color:#5a6f82; margin-top:2px; }
/* tabelle dei dettagli */
.sa-tabella { width:100%; border-collapse:collapse; font-size:11px; margin:8px 0; }
.sa-tabella th, .sa-tabella td { border-bottom:1px solid #dce4ed; padding:6px 4px; text-align:left; vertical-align:top; }
.sa-tabella td small { display:block; color:#65798b; }
.sa-tabella .sa-totale td { font-weight:650; background:#f4f7f9; }
.sa-root .mc-fonti p { font-size:12px; line-height:1.55; }
.sa-root .mc-fonti summary .sc-fonte { font-weight:600; }
/* archivio dei piani: stato scritto per esteso */
.sa-piano .sa-stato { flex:none; padding:3px 8px; border-radius:5px; font-size:11px; font-weight:650; background:#eef1f4; color:#5d6b78; }
.sa-piano .sa-stato[data-stato=proposta] { background:#fff0d9; color:#82501a; }
.sa-piano .sa-stato[data-stato=approvata] { background:#eaf6ee; color:#1f5a35; }
.sa-root .sa-piano .sa-decisione { margin:6px 0; font-size:12px; color:#294b68; }
.sa-azioni { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.sa-root .sa-azioni button { font-size:11px; padding:6px 9px; }
.sa-chi { font-size:11px; color:#65798b; font-style:italic; }
/* legenda chiusa sul titolo: solo il pulsante riceve i clic, il resto lascia passare quelli sulla mappa (nessun «Sensi di marcia») */
.sa-aperto .sc-legenda-mappa { max-width:300px; padding:0; pointer-events:none; }
.sa-leg-testa { display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.sa-leg-b { pointer-events:auto; display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; font:inherit; font-size:12px; color:var(--fg); padding:7px 10px; cursor:pointer; text-align:left; }
.sa-leg-b span { margin-left:auto; padding:2px 8px; border:1px solid #b6d2f7; border-radius:5px; background:#e6f0ff; color:#155fb8; font-size:11px; font-weight:600; }
.sa-leg-c { display:flex; flex-direction:column; gap:4px; padding:2px 10px 9px; font-size:11px; }
.sa-voce { display:flex; align-items:center; gap:7px; }
.sa-voce i { flex:none; width:22px; height:12px; border-radius:2px; background:var(--c); box-shadow:0 0 0 1px #cfd9e2; }
.sa-voce i.tratto { background:transparent; border:2px dashed var(--c); box-shadow:none; height:8px; width:18px; }
.sa-voce i.tondo { width:11px; height:11px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #cfd9e2; }
.sa-leg-c small { color:var(--muted); line-height:1.4; margin-top:3px; }
@media(max-width:900px) { .sa-aperto .sc-legenda-mappa { display:none; } .sa-root .mc-corpo { padding:12px 18px 24px; } .sa-leve { flex-direction:column; gap:0; } }

/* verde.css */
/* Gestione del verde (sc_verde.js): elemento scelto, modulo dell'intervento, programma; tutto nella colonna dell'analisi. */
.vd-colonna h4 { margin: 14px 0 6px; font-size: 13px; color: var(--fg); }
.vd-colonna h4:first-child { margin-top: 4px; }
.vd-tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.vd-tab td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.vd-tab td:first-child { width: 36%; color: var(--muted); }
.vd-lista { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.vd-lista li { padding: 6px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.vd-lista small { color: var(--muted); }
.vd-lista .pulsanti { margin: 4px 0 0; }
.vd-lista button, .vd-modulo button, .vd-elemento > .pulsanti button { font: inherit; font-size: 12px; padding: 4px 9px; border: 1px solid #c8d8ed; border-radius: 5px; background: #fff; color: #175daa; cursor: pointer; margin: 0 4px 0 0; }
.vd-elemento > .pulsanti button[aria-pressed=true] { background: #e6f0ff; border-color: #2477e5; }
.vd-programma .collegamento { border: 0; padding: 0; background: none; color: #175daa; text-decoration: underline; }
.vd-stato { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 10px; background: #eef1f5; color: #455a64; }
.vd-programmato { background: #fff4d6; color: #8a5a00; }
.vd-eseguito { background: #e3f4e6; color: #22603a; }
.vd-annullato { background: #f1f1f1; color: #777; text-decoration: line-through; }
.vd-ritardo { color: #b3261e; font-size: 11px; font-weight: 600; }
.vd-ok { margin: 0 0 8px; padding: 6px 9px; border-left: 3px solid #2f7a4b; background: #eaf6ee; color: #1f4f31; font-size: 12px; }
.vd-modulo { display: grid; gap: 6px; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fc; }
.vd-modulo label { display: grid; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; margin: 0; }
.vd-modulo :is(input, select, textarea) { font: inherit; font-size: 13px; font-weight: 400; color: var(--fg); padding: 6px 7px; border: 1px solid #c8d8ed; border-radius: 5px; background: #fff; box-sizing: border-box; width: 100%; margin: 0; }
.vd-due { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vd-modulo button.primario { background: var(--accent); border-color: var(--accent); color: #fff; }

/* colonna.css */
/* Colonna unica a sinistra (schermi da 901 px): testata della sezione, poi l'elenco delle sezioni (Panoramica, o «Sezioni» premuto)
   oppure i comandi della sezione aperta (pannello, analisi, previsionali, registro). Riducibile a sole icone: la mappa prende il resto.
   Caricato per ultimo: sostituisce la barra + pannello di comunale.css e i pannelli a destra di analisi e registro. */
@media (min-width: 901px) {
  body.comunale, body.comunale.pannello-chiuso, body.comunale.mappa-ampliata, body.comunale.mappa-ampliata.pannello-chiuso {
    --col-w: 400px; --testa-col: 70px; --titolo-h: 0px; --fondo: 0px; --rail-w: var(--col-w); --sx: var(--col-w); --panel-w: var(--col-w);
  }
  body.comunale.colonna-ridotta, body.comunale.colonna-ridotta.mappa-ampliata { --col-w: 68px; }
  body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) { --dx: 0px; }
  body.comunale.mappa-ampliata { --testa: 0px; }

  /* mappa: tutto lo spazio a destra della colonna */
  .comunale #vista-home, .comunale.mappa-ampliata #vista-home { top: calc(var(--testa) + 12px); left: calc(var(--sx) + 12px); right: calc(var(--dx) + 12px); bottom: 12px; border-radius: 10px; border: 1px solid var(--line); }
  .comunale.mappa-ampliata #vista-home { top: 0; left: var(--sx); right: var(--dx); bottom: 0; border: 0; border-radius: 0; }

  /* testata della colonna: Sezioni, titolo e data, riduci */
  .comunale #testa-vista, .comunale.mappa-ampliata #testa-vista {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 8px; row-gap: 1px;
    top: var(--testa); left: 0; right: auto; width: var(--col-w); height: var(--testa-col); box-sizing: border-box; padding: 8px 10px 8px 12px;
    z-index: 52; background: #f9fbfe; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .comunale #testa-vista h1 { grid-column: 2; grid-row: 1; font-size: 18px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .comunale #data-riga { grid-column: 2; grid-row: 2; margin: 0; display: flex; align-items: center; min-width: 0; font-size: 12px; overflow: hidden; white-space: nowrap; }
  .comunale #data-oggi { margin-left: 8px; padding: 1px 8px; font-size: 11px; }
  .col-pulsante { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: none; color: #29446e; cursor: pointer; }
  .col-pulsante:hover { background: #edf3fc; border-color: #d6e1ef; }
  .col-pulsante[aria-expanded=true] { background: #e6f0ff; border-color: #b6d2f7; color: #0c5fc8; }
  .col-pulsante svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #menu-colonna { grid-column: 1; }
  #riduci-colonna { grid-column: 3; }
  .comunale.pannello-chiuso:not(.sc-aperto, .pv-aperto, .ro-aperto) #menu-colonna { display: none; }
  .comunale.pannello-chiuso:not(.sc-aperto, .pv-aperto, .ro-aperto) #testa-vista h1 { grid-column: 1 / 3; }
  .comunale.pannello-chiuso:not(.sc-aperto, .pv-aperto, .ro-aperto) #data-riga { grid-column: 1 / 3; }

  /* elenco delle sezioni: in Panoramica, con «Sezioni» premuto, sempre nella colonna ridotta */
  .comunale #viste, .comunale.mappa-ampliata #viste {
    display: flex; top: calc(var(--testa) + var(--testa-col)); left: 0; bottom: 0; width: var(--col-w); right: auto; height: auto; padding: 10px 6px 12px; gap: 12px; z-index: 35; overflow-x: hidden;
  }
  body.comunale:not(.colonna-ridotta):not(.menu-aperto):is(:not(.pannello-chiuso), .sc-aperto, .pv-aperto, .ro-aperto) #viste { display: none; }
  .comunale.menu-aperto #viste { z-index: 51; box-shadow: 6px 0 18px rgba(23, 36, 69, .10); }
  .comunale #viste .viste-principali { flex: none; }
  .comunale #viste .viste-principali, .comunale #viste .viste-servizio { gap: 2px; }
  .comunale #viste .viste-principali button, .comunale #viste .viste-servizio :is(button, #vai-validazione) { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
  .comunale #viste #uffici-elenco button { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  .comunale #viste .viste-servizio { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }

  /* Attività aperte e Prossimi giorni: nella colonna della Panoramica (colonna.js le sposta qui), non più sotto la mappa */
  .comunale #viste :is(#attivita-home, #prossimi-home) { position: static; inset: auto; width: auto; height: auto; max-height: none; margin: 0 6px; flex: none; overflow: visible; }
  .comunale #viste :is(#attivita-home, #prossimi-home) button { display: inline-flex; width: auto; min-height: 0; padding: 4px 6px; gap: 8px; border-radius: 5px; font-size: 12px; line-height: 1.35; box-shadow: none; }
  .comunale #viste #espandi-attivita { font-size: 15px; padding: 3px 4px; }
  .comunale #viste .pgh-voci button { display: block; padding: 0; }
  .comunale #viste #attivita-home td:first-child button { display: inline; padding: 0; }
  .comunale #viste #attivita-home th { padding: 5px 8px; }
  .comunale #viste #attivita-home td { padding: 6px 8px; }
  .comunale #viste #attivita-home td:nth-child(2) { display: none; }
  .comunale #viste #attivita-home th:nth-child(2) { display: none; }
  .comunale.menu-aperto #viste :is(#attivita-home, #prossimi-home) { display: none; }

  /* comandi della sezione: tutti nella stessa colonna, sotto la testata */
  .comunale #pannello, .comunale.mappa-ampliata #pannello {
    top: calc(var(--testa) + var(--testa-col)); left: 0; bottom: 0; width: var(--col-w); max-width: none; z-index: 30;
  }
  .comunale #pannello .testa-pannello, .comunale #pannello .vista > h2 { display: none; }
  .comunale #pannello .vista > .sotto { margin-top: 14px; }
  .comunale .sc-scheda, .comunale .pv-pannello, .comunale .ro-pannello, .comunale.mappa-ampliata .sc-scheda {
    top: calc(var(--testa) + var(--testa-col)); left: 0; right: auto; bottom: 0; width: var(--col-w); max-width: none; max-height: none; height: auto;
    border-radius: 0; box-shadow: none; border: 0; border-right: 1px solid var(--line); z-index: 30;
  }
  .comunale .ro-pannello { z-index: 31; }
  .comunale .sc-scheda .uf-sopra { display: none; }
  .comunale .sc-scheda .uf-analisi { margin-top: 0; }

  /* colonna ridotta: sole icone; i comandi della sezione restano aperti ma nascosti finché non si riallarga */
  .comunale.colonna-ridotta :is(#pannello, .sc-scheda, .pv-pannello, .ro-pannello) { display: none !important; }
  .comunale.colonna-ridotta #testa-vista { grid-template-columns: 1fr; padding: 8px 0; justify-items: center; }
  .comunale.colonna-ridotta #testa-vista > :not(#riduci-colonna) { display: none; }
  .comunale.colonna-ridotta #riduci-colonna { grid-column: 1; }
  .comunale.colonna-ridotta #riduci-colonna svg { transform: scaleX(-1); }
  .comunale.colonna-ridotta #viste { padding: 8px 4px; overflow-x: hidden; }
  .comunale.colonna-ridotta #viste :is(button, #vai-validazione) { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; border-radius: 6px; }
  .comunale.colonna-ridotta #viste :is(button, #vai-validazione) > span:not(.uf-sigla) { display: none; }
  .comunale.colonna-ridotta #viste button[aria-selected=true] { box-shadow: inset 3px 0 #2477e5; }
  .comunale.colonna-ridotta #viste .uf-navigazione > p, .comunale.colonna-ridotta #uffici-stato, .comunale.colonna-ridotta #viste :is(#attivita-home, #prossimi-home) { display: none; }
  .comunale.colonna-ridotta #viste .uf-sigla { width: 26px; height: 26px; font-size: 10px; }

  /* cose appoggiate alla mappa: si misurano dalla colonna, non più dai pannelli di destra */
  .comunale .sc-tempo { left: calc(var(--sx) + 34px); right: calc(var(--dx) + 34px); }
  .comunale.sc-aperto .barra-editor, .comunale.pv-aperto .barra-editor { right: calc(var(--dx) + 24px); }
  .comunale .procedura:not(.procedura-ridotta), .comunale.sc-aperto .procedura:not(.procedura-ridotta) { top: calc(var(--testa) + 76px); right: calc(var(--dx) + 76px); max-height: calc(100vh - var(--testa) - 110px); }
  .comunale .sc-legenda-mappa, .comunale.mc-aperto .sc-legenda-mappa { top: calc(var(--testa) + 76px); left: calc(var(--sx) + 26px); }
  .comunale #movimento-traffico, .comunale #legenda-mappa, .comunale.mappa-ampliata #movimento-traffico, .comunale.mappa-ampliata #legenda-mappa { left: calc(var(--sx) + 26px); }
}
@media (min-width: 1400px) {
  body.comunale, body.comunale.pannello-chiuso, body.comunale.mappa-ampliata, body.comunale.mappa-ampliata.pannello-chiuso { --col-w: 420px; }
  body.comunale.colonna-ridotta, body.comunale.colonna-ridotta.mappa-ampliata { --col-w: 68px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  body.comunale, body.comunale.pannello-chiuso, body.comunale.mappa-ampliata, body.comunale.mappa-ampliata.pannello-chiuso { --col-w: 360px; }
  body.comunale.colonna-ridotta, body.comunale.colonna-ridotta.mappa-ampliata { --col-w: 68px; }
}
/* Panoramica con la colonna allargata (15/10): solo icone e nomi delle sezioni, quindi più stretta che con i comandi di una sezione */
@media (min-width: 901px) {
  body.comunale.pannello-chiuso:not(.colonna-ridotta):not(.sc-aperto):not(.pv-aperto):not(.ro-aperto) { --col-w: 270px; }
}
/* sotto i 901 px resta la disposizione precedente: i pulsanti della colonna non servono */
@media (max-width: 900px) { .col-pulsante { display: none; } }

/* Filtri rapidi della vista (filtri_vista.js): sempre sopra la mappa, anche con una sezione o un'analisi aperta; il titolo della
   sezione è già nella testata della colonna */
@media (min-width: 901px) {
  .comunale #azioni-mappa h2 { display: none; }
  .comunale #azioni-mappa { justify-content: space-between; }
  /* una riga sola: se i filtri non ci stanno scorrono di lato, senza coprire la mappa */
  body.comunale .azioni-rapide, body.comunale:not(.pannello-chiuso) .azioni-rapide, body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) .azioni-rapide { display: flex; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .comunale #azioni-mappa .azioni-rapide button { flex: none; }
  .comunale #azioni-mappa .azioni-rapide button { padding: 6px 9px; }
}
#azioni-mappa .conta-lampioni { margin-left: 3px; }
/* a ogni larghezza: i filtri che la vista non prevede restano nascosti (la regola dei pulsanti batterebbe [hidden]) */
.comunale #azioni-mappa .azioni-rapide button[hidden] { display: none; }
/* mappa stretta (colonna larga su un portatile): i filtri vanno in una seconda riga, ora presente in ogni vista */
@media (min-width: 901px) {
  @container (max-width: 710px) {
    body.comunale #azioni-mappa, body.comunale:not(.pannello-chiuso) #azioni-mappa, body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) #azioni-mappa { min-height: 88px; }
    body.comunale #map, body.comunale:not(.pannello-chiuso) #map, body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) #map { top: 88px; }
  }
}

/* Scheda dell'elemento selezionato (scheda_vista.js): una finestra sopra la mappa, a destra sotto i filtri, accanto ai comandi della
   mappa; non restringe più la mappa e c'è anche dentro le analisi (le sezioni utili alla vista in cima) */
@media (min-width: 901px) {
  body.comunale.scheda-aperta:not(.sc-aperto, .pv-aperto, .ro-aperto) { --dx: 0px; }
  body.comunale #scheda, body.comunale.pv-aperto #scheda, body.comunale.sc-aperto #scheda {
    left: auto; right: 70px; top: calc(var(--testa) + 76px); bottom: auto; width: min(var(--scheda-w), calc(100vw - var(--sx) - 120px));
    max-height: calc(100vh - var(--testa) - 100px); z-index: 25; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(23, 36, 69, .18);
  }
  body.comunale.sc-aperto #scheda:not([hidden]) { display: flex; }
  /* dentro un'analisi la scheda si ferma sopra la linea del tempo */
  body.comunale.sc-aperto #scheda { max-height: calc(100vh - var(--testa) - 215px); }
  body.comunale.mappa-ampliata #scheda { top: 64px; }
  .comunale #scheda .scheda-vista { margin: 6px 0 2px; color: #155fb8; font-weight: 600; }
}

/* Livelli e filtri: menu a cascata sopra la mappa (filtri_vista.js). A sinistra il pulsante, accanto i filtri accesi; il menu
   mostra i gruppi e, sul gruppo scelto, la sua tendina a destra. Sui telefoni la tendina si apre sotto il gruppo. */
.comunale .filtri-mappa { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.comunale .fm { position: relative; flex: none; }
.comunale #azioni-mappa #apri-filtri { gap: 7px; font-weight: 600; }
.comunale #azioni-mappa #apri-filtri[aria-expanded=true] { background: #e6f0ff; border-color: #b6d2f7; color: #0c5fc8; }
.comunale #apri-filtri .fm-n:not(:empty) { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #1767d3; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.comunale #azioni-mappa #apri-filtri .fm-giu { width: 14px; height: 14px; }
.comunale .fm-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 250px; padding: 6px; background: #fff; border: 1px solid #d6e1ef; border-radius: 10px; box-shadow: 0 10px 30px rgba(23, 36, 69, .2); }
.comunale .fm-menu[hidden] { display: none; }
.comunale .fm-gruppo { position: relative; }
.comunale #azioni-mappa .fm-menu button { display: flex; width: 100%; justify-content: flex-start; gap: 8px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: #22385c; font: 500 13px system-ui; text-align: left; white-space: normal; }
.comunale #azioni-mappa .fm-menu button:hover, .comunale #azioni-mappa .fm-menu button:focus-visible { background: #edf3fc; color: #0c5fc8; }
.comunale #azioni-mappa .fm-menu button:disabled { opacity: .5; cursor: not-allowed; }
.comunale #azioni-mappa .fm-menu [data-fm-gruppo] > span:first-child { flex: 1; }
.comunale #azioni-mappa .fm-menu [data-fm-gruppo][aria-expanded=true] { background: #e6f0ff; color: #0c5fc8; }
.comunale .fm-conta { padding: 0 6px; border-radius: 9px; background: #e6f0ff; color: #155fb8; font-size: 11px; line-height: 18px; }
.comunale .fm-sotto { position: absolute; top: -6px; left: calc(100% + 8px); width: 290px; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; background: #fff; border: 1px solid #d6e1ef; border-radius: 10px; box-shadow: 0 10px 30px rgba(23, 36, 69, .2); }
.comunale #azioni-mappa .fm-sotto button .fm-segno { width: 16px; height: 16px; flex: none; visibility: hidden; stroke: #1767d3; }
.comunale #azioni-mappa .fm-sotto button[aria-checked=true] { color: #0c5fc8; font-weight: 600; }
.comunale #azioni-mappa .fm-sotto button[aria-checked=true] .fm-segno { visibility: visible; }
.comunale .fm-vuoto { margin: 6px 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.comunale .fm-accesi { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.comunale .fm-acceso { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border: 1px solid #b6d2f7; border-radius: 14px; background: #e6f0ff; color: #155fb8; font: 500 12px system-ui; white-space: nowrap; }
.comunale #azioni-mappa .fm-acceso button { padding: 0 6px; border: 0; border-radius: 50%; background: none; color: #155fb8; font-size: 15px; line-height: 1.2; }
.comunale #azioni-mappa .fm-acceso button:hover { background: #cfe2fd; }
@media (max-width: 700px) {
  .comunale .fm-menu { width: min(300px, calc(100vw - 40px)); max-height: 70vh; overflow-y: auto; }
  .comunale .fm-sotto { position: static; width: auto; max-height: none; margin: 2px 0 6px 12px; padding: 0; border: 0; box-shadow: none; }
}

/* Panoramica (14/10): vista solo visiva dello stato attuale. La colonna resta una striscia di icone per andare nelle sezioni
   (colonna.js), niente Attività aperte né Prossimi giorni (stanno in Attività e in Tutti i previsionali); i livelli e i temi di
   Beni e aggiornamenti si scelgono dal menu, nel pannello restano catalogo, asset e aggiornamento */
.comunale #attivita-home, .comunale #prossimi-home { display: none !important; }
body.comunale.vista-panoramica, body.comunale.vista-panoramica.attivita-compatte { --fondo: 0px; }
.comunale #vista-livelli details.gruppo-livelli { display: none; }
/* il menu esce dalla barra: niente scorrimento sulla barra (scorre solo l'elenco dei filtri accesi); visibile a ogni larghezza */
body.comunale .azioni-rapide.filtri-mappa, body.comunale:not(.pannello-chiuso) .azioni-rapide.filtri-mappa,
body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) .azioni-rapide.filtri-mappa { display: flex; overflow: visible; }
/* menu aperto: il riquadro della mappa (che ha un suo contesto di sovrapposizione) passa sopra le legende appoggiate alla mappa */
body.comunale.fm-aperto #vista-home { z-index: 30; }

/* «Aggiorna edifici e strade» nella testata del settore Urbanistica (aggiornamento.js, uffici.js); nascosto dove nasce */
.uf-aggiorna { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.uf-aggiorna > summary { cursor: pointer; font-size: 12px; font-weight: 650; color: #29446e; }
.uf-aggiorna .uf-aggiorna-corpo { margin-top: 8px; font-size: 12px; }
.uf-aggiorna .uf-aggiorna-corpo .pulsanti { display: flex; gap: 6px; flex-wrap: wrap; }

/* legende.css */
/* Riquadro unico delle legende (legende.js): in alto a sinistra sulla mappa, con dentro la legenda dell'analisi, il traffico,
   gli edifici e «Sulla mappa». Le legende spostate qui perdono posizione e cornice propria. */
#legende { position: fixed; z-index: 28; left: calc(var(--sx) + 12px); top: 12px; width: max-content; min-width: 190px; max-width: 300px;
  max-height: calc(100vh - 260px); display: flex; flex-direction: column; box-sizing: border-box; font-size: 12px; line-height: 1.35; color: var(--fg);
  background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.comunale #legende { top: calc(var(--testa) + var(--titolo-h) + 68px); left: calc(var(--sx) + 38px); max-height: calc(100vh - var(--testa) - var(--titolo-h) - 200px); }
@media (min-width: 901px) {
  .comunale #legende { top: calc(var(--testa) + 76px); left: calc(var(--sx) + 26px); max-height: calc(100vh - var(--testa) - 210px); }
}
/* telefono (15/10): in basso a sinistra sulla mappa, dentro i suoi bordi; chiusa è un'etichetta corta che lascia libera la scala,
   aperta si allarga fino alla colonna dei comandi della mappa (zoom, rotazione) e cresce verso l'alto fino a metà schermo */
@media (max-width: 720px) {
  #legende, .comunale #legende { top: auto; bottom: 16px; left: calc(var(--sx) + 16px); right: auto; width: 128px; min-width: 0;
    max-width: none; max-height: 50vh; }
  #legende:not(.lg-chiuso), .comunale #legende:not(.lg-chiuso) { right: 60px; width: auto; }
  .lg-testa { padding: 9px 12px; }
}
#legende.lg-vuoto { visibility: hidden; pointer-events: none; }
body.vista-storico #legende, body:has(.barra-editor) #legende { display: none; }

.lg-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: none;
  font: inherit; font-weight: 600; color: #243c61; cursor: pointer; border-radius: 10px; }
.lg-testa:hover { background: #eef4ff; }
.lg-testa:focus-visible { outline: 2px solid #2677de; outline-offset: -2px; }
.lg-testa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s; }
#legende.lg-chiuso .lg-testa svg { transform: rotate(-90deg); }
/* chiuso: il contenuto resta misurabile (legende.js controlla se c'è qualcosa da mostrare) ma non occupa spazio */
#legende.lg-chiuso .lg-corpo { height: 0; overflow: hidden; visibility: hidden; padding: 0; }
.lg-corpo { overflow-y: auto; padding: 0 10px 8px; }
.lg-corpo > div:empty { display: none; }
.lg-corpo > div > * { border-top: 1px solid var(--line); padding-top: 7px; margin-top: 2px; }

/* le legende dentro il riquadro: niente posizione, cornice e larghezza proprie */
#legende :is(.sc-legenda-mappa, #legenda-mappa, #movimento-traffico, #st-legenda-mappa) { position: static !important; inset: auto !important; transform: none !important;
  width: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; z-index: auto !important; background: none !important;
  border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 7px 0 4px !important; overflow: visible !important; }
#legende #movimento-traffico { gap: 6px; }
#legende #legenda-traffico { border-top: 0; padding-top: 0; }
/* in un'analisi gli edifici sono grigi: della sezione edifici restano solo le voci «Sulla mappa» dei filtri accesi */
body.sc-aperto #legende #legenda-mappa:has(#legenda-contesto .titolo) { display: block; }
body.sc-aperto #legende #legenda-mappa :is(#legenda, #legenda-calore) { display: none; }
body.sc-aperto #legende #legenda-contesto { margin-top: 0; padding-top: 0; border-top: 0; }
/* classi delle legende delle analisi (Legende.classe): la voce è un pulsante che filtra la mappa */
.lg-classe { pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; margin: 0 -4px; padding: 1px 4px; border: 0; border-radius: 4px;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lg-classe:hover { background: #eef4ff; }
.lg-classe[aria-pressed=true] { background: #e6f0ff; color: #075fc9; box-shadow: inset 2px 0 #2677de; }
.lg-classe.spenta { color: #7b8aa1; }
.lg-classe.spenta i { opacity: .45; }
.lg-classe:focus-visible { outline: 2px solid #2677de; outline-offset: 1px; }
/* voci del traffico (15/10): pulsanti come le classi delle analisi, sulla stessa riga */
#legenda-traffico .lg-classe { gap: 6px; margin: 0; white-space: nowrap; }

/* livelli esterni accesi (esterni.js): opacità, ordine, sopra gli edifici, interrogazione al clic e legenda del servizio */
#legenda-esterni[hidden] { display: none; }
#legenda-esterni .lg-titolo { font-weight: 600; color: #243c61; margin-bottom: 2px; }
.es-voce { margin: 3px 0; }
.es-voce summary { cursor: pointer; padding: 2px 0; }
.es-voce summary .tag { font-size: 10px; }
.es-comandi { display: grid; gap: 3px; margin: 4px 0 2px; }
.es-comandi input[type=range] { width: 120px; vertical-align: middle; }
.es-ordine { display: inline-flex; gap: 4px; }
.es-legenda { display: block; max-width: 100%; max-height: 180px; margin: 4px 0; object-fit: contain; object-position: left; }
.es-popup .es-info { font-size: 12px; max-height: 260px; overflow: auto; }
.es-popup .es-info table { border-collapse: collapse; margin: 2px 0 8px; }
.es-popup .es-info td { padding: 1px 6px 1px 0; vertical-align: top; }
.es-popup .es-info td:first-child { color: #5c6b80; white-space: nowrap; }

/* bim.css */
/* Modello BIM dimostrativo (bim.js): pulsante nella scheda dell'edificio e vista sopra la mappa. */
.bim-entra { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 14px; padding: 11px 14px; border: 1px solid #b9d0f0; border-radius: 8px;
  background: #eef5ff; color: #12408a; font: 600 14px system-ui; text-align: left; cursor: pointer; }
.bim-entra:hover { background: #e2eeff; border-color: #8fb4e8; }
.bim-entra svg { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.bim-entra small { display: block; font-weight: 400; font-size: 12px; color: #4d6a96; margin-top: 2px; }

.bim-vista { position: absolute; z-index: 30; display: flex; flex-direction: column; background: #e9eef5; border-radius: 6px; overflow: hidden;
  opacity: 0; transform: scale(.97); transition: opacity .35s ease, transform .35s ease; font: 13px system-ui; color: #172445; }
.bim-vista.bim-visibile { opacity: 1; transform: none; }
.bim-testa { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #dce5f0; flex-wrap: wrap; }
.bim-torna { border: 1px solid #dce5f0; background: #f7f9fc; border-radius: 6px; padding: 7px 12px; font: 600 13px system-ui; color: #172445; cursor: pointer; }
.bim-torna:hover { background: #eef3fa; }
.bim-titolo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bim-titolo strong, .bim-titolo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bim-titolo strong { font-size: 15px; letter-spacing: -.2px; }
.bim-titolo span { color: #627694; font-size: 12px; }
.bim-comandi { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.bim-comandi > span { color: #627694; font-size: 12px; margin-right: 2px; }
.bim-comandi button { border: 1px solid #dce5f0; background: #fff; border-radius: 999px; padding: 5px 11px; font: 12px system-ui; color: #172445; cursor: pointer; }
.bim-comandi button[aria-pressed="true"] { background: #1767d3; border-color: #1767d3; color: #fff; }
.bim-raggi { display: flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 12px; cursor: pointer; }

.bim-corpo { flex: 1; display: flex; min-height: 0; }
.bim-tela { position: relative; flex: 1; min-width: 0; }
.bim-tela canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.bim-tela canvas:active { cursor: grabbing; }
.bim-aiuto { position: absolute; left: 12px; bottom: 10px; margin: 0; padding: 5px 9px; border-radius: 6px; background: rgba(255,255,255,.85); color: #4d6283; font-size: 11.5px; pointer-events: none; }

.bim-pannello { width: 340px; flex: none; display: flex; flex-direction: column; background: #fff; border-left: 1px solid #dce5f0; min-height: 0; }
.bim-schede { display: flex; border-bottom: 1px solid #dce5f0; }
.bim-schede button { flex: 1; border: 0; background: none; padding: 11px 6px; font: 600 13px system-ui; color: #627694; cursor: pointer; border-bottom: 2px solid transparent; }
.bim-schede button[aria-pressed="true"] { color: #1767d3; border-bottom-color: #1767d3; }
.bim-contenuto { flex: 1; overflow: auto; padding: 12px 16px 16px; }
.bim-contenuto h3 { font-size: 17px; margin: 8px 0 2px; letter-spacing: -.3px; }
.bim-contenuto h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: #627694; margin: 16px 0 6px; }
.bim-sintesi { margin: 0 0 6px; line-height: 1.5; }
.bim-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; color: #4d6283; font-size: 12px; }
.bim-legenda i, .bim-elenco i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bim-elenco, .bim-scadenze, .bim-storico { list-style: none; margin: 0; padding: 0; }
.bim-elenco button, .bim-scadenze button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 7px 6px; border-radius: 6px; text-align: left; font: 13px system-ui; color: #172445; cursor: pointer; }
.bim-elenco button:hover, .bim-scadenze button:hover { background: #f1f5fb; }
.bim-elenco i { flex: none; margin: 0; }
.bim-elenco span, .bim-scadenze span { flex: 1; min-width: 0; }
.bim-elenco small, .bim-scadenze small, .bim-storico small { display: block; color: #7386a2; font-size: 11.5px; margin-top: 1px; }
.bim-stato { flex: none; font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, white); }
.bim-indietro { border: 0; background: none; color: #1767d3; font: 600 12.5px system-ui; padding: 0; cursor: pointer; }
.bim-classe { color: #627694; margin: 0 0 10px; font-size: 12px; }
.bim-indicatori { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.bim-indicatori div { border: 1px solid #dce5f0; border-radius: 8px; padding: 8px 10px; }
.bim-indicatori span { display: block; color: #627694; font-size: 11.5px; }
.bim-indicatori b { font-size: 16px; text-transform: capitalize; }
.bim-tabella { width: 100%; border-collapse: collapse; }
.bim-tabella th { text-align: left; font-weight: 500; color: #627694; width: 38%; vertical-align: top; padding: 6px 8px 6px 0; border-bottom: 1px solid #edf0f1; font-size: 12px; }
.bim-tabella td { padding: 6px 0; border-bottom: 1px solid #edf0f1; line-height: 1.4; }
.bim-nota { margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; background: #fff7e8; color: #6b4b12; line-height: 1.45; }
.bim-scaduto { color: #d64545; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.bim-reale { color: #12408a; background: #e7f0ff; font-size: 10.5px; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.bim-storico li, .bim-scadenze li { display: block; }
.bim-storico li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f3f7; line-height: 1.35; }
.bim-storico time, .bim-scadenze time { flex: none; width: 58px; color: #4d6283; font-size: 12px; font-variant-numeric: tabular-nums; }
.bim-anno { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; margin: 5px 0; font-variant-numeric: tabular-nums; }
.bim-anno b { text-align: right; }
.bim-barra { display: flex; height: 12px; border-radius: 4px; overflow: hidden; background: #edf0f4; }
.bim-avvertenza { margin: 0; padding: 10px 16px 12px; border-top: 1px solid #dce5f0; color: #6c80a0; font-size: 11.5px; line-height: 1.45; background: #f9fbfe; }

@media (max-width: 720px) {
  .bim-testa { gap: 8px; padding: 8px 10px; }
  .bim-comandi { margin-left: 0; width: 100%; }
  .bim-corpo { flex-direction: column; }
  .bim-pannello { width: auto; height: 46%; border-left: 0; border-top: 1px solid #dce5f0; }
  .bim-aiuto { display: none; }
  .bim-avvertenza { display: none; }
  /* il foglio della scheda sta sopra la mappa (z-index più alto): con il modello aperto si fa da parte, e torna con «← Città» */
  body.bim-aperto #scheda { display: none !important; }
}

/* etichette d'origine del dato, come nel resto del gemello (tutorial: dato pubblico, stima del gemello, simulato) */
.bim-origine { display: inline-block; padding: 1px 6px; border: 1px solid var(--c); border-radius: 4px; color: var(--c); font-size: 10px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.bim-origini { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; color: #627694; font-size: 11.5px; }
.bim-tabella td small { display: block; margin-top: 3px; color: #7386a2; font-size: 11px; }
.bim-dati th { width: 34%; }

/* caricamento del modello: pulsante bloccato con la rotella, puntatore d'attesa su tutta la pagina */
body.bim-carica, body.bim-carica * { cursor: progress !important; }
.bim-entra[disabled] { opacity: .85; }
.bim-entra[aria-busy="true"] svg { display: none; }
.bim-entra[aria-busy="true"]::before { content: ""; flex: none; width: 20px; height: 20px; margin: 3px; border: 3px solid #c9dbf3; border-top-color: #1767d3; border-radius: 50%; animation: bim-gira .8s linear infinite; }
@keyframes bim-gira { to { transform: rotate(360deg); } }

.bim-fonte { font-size: 11px; color: #7386a2; }
.bim-fonte a, .bim-dati small a { color: #1767d3; }

/* tutorial.css */
/* Tutorial in linea (tutorial.js): popup ancorato alla funzione, anello che pulsa sull'elemento, piccole animazioni */
.tut-luce { position: fixed; z-index: 900; border-radius: 9px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(15, 26, 38, .38);
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease; }
.tut-luce::after { content: ""; position: absolute; inset: -3px; border: 2.5px solid #1f6feb; border-radius: 11px; animation: tut-pulsa 1.6s ease-out infinite; }
.tut-luce.grande { box-shadow: 0 0 0 9999px rgba(15, 26, 38, .18); }
.tut-luce.grande::after { animation: none; border-color: rgba(31, 111, 235, .7); }
@keyframes tut-pulsa { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.tut-velo { position: fixed; inset: 0; z-index: 900; background: rgba(15, 26, 38, .45); }

.tut-carta { position: fixed; z-index: 901; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box;
  padding: 16px 18px 14px; background: #fff; color: #1f2328; border-radius: 12px; box-shadow: 0 18px 50px rgba(15, 26, 38, .32), 0 0 0 1px rgba(15, 26, 38, .06);
  font-size: 13.5px; line-height: 1.5; transition: left .35s ease, top .35s ease; }
.tut-carta.entra { animation: tut-entra .32s ease-out; }
@keyframes tut-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.tut-carta[data-lato=centro] { width: min(440px, calc(100vw - 24px)); }
/* freccia verso l'elemento */
.tut-carta::before { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); display: none; }
.tut-carta[data-lato=destra]::before { display: block; left: -6px; top: calc(var(--freccia) - 6px); box-shadow: -1px 1px 0 rgba(15, 26, 38, .06); }
.tut-carta[data-lato=sinistra]::before { display: block; right: -6px; top: calc(var(--freccia) - 6px); }
.tut-carta[data-lato=sotto]::before { display: block; top: -6px; left: calc(var(--freccia) - 6px); }
.tut-carta[data-lato=sopra]::before { display: block; bottom: -6px; left: calc(var(--freccia) - 6px); }
.tut-passo { margin: 0; color: #5d6670; font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; font-weight: 600; }
.tut-esci { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; font-size: 15px; color: #5d6670; cursor: pointer; padding: 4px 7px; border-radius: 6px; }
.tut-esci:hover { background: #edf3fc; color: #075fc9; }
.tut-carta h2 { margin: 4px 26px 8px 0; font-size: 18px; letter-spacing: -.3px; line-height: 1.25; }
.tut-testo p { margin: 0 0 8px; }
.tut-testo a { color: #075fc9; font-weight: 600; }
.tut-testo kbd { font: 11.5px ui-monospace, monospace; padding: 1px 5px; border: 1px solid #d8dde3; border-bottom-width: 2px; border-radius: 4px; background: #f6f8fa; }
.tut-piccolo { color: #5d6670; font-size: 12.5px; }
.tut-testo .tut-avviso { padding: 8px 10px; border-left: 3px solid #eb6834; background: #fff4ee; border-radius: 0 6px 6px 0; }
.tut-comandi { margin: 0 0 8px; padding-left: 18px; }
.tut-comandi li { margin-bottom: 3px; }
.tut-domanda { font-weight: 650; color: #075fc9; }

.tut-anima { margin: 2px 0 10px; }
.tut-anima canvas, .tut-anima svg { display: block; width: 100%; height: auto; border-radius: 8px; }
/* muoversi sulla mappa (animaMappa): piano con le case in prospettiva, cursore e gesto scritto */
.tut-mappa { position: relative; height: 150px; border-radius: 8px; overflow: hidden; background: #0f1a26; perspective: 420px; }
.tut-piano { position: absolute; left: 50%; top: 50%; width: 340px; height: 210px; background: #22303d; border-radius: 4px; transform-origin: 50% 50%;
  background-image: linear-gradient(#22303d, #22303d), linear-gradient(90deg, transparent 136px, #3d5266 136px, #3d5266 146px, transparent 146px),
    linear-gradient(transparent 92px, #3d5266 92px, #3d5266 101px, transparent 101px); background-blend-mode: normal; background-size: 0 0, 100% 100%, 100% 100%; }
.tut-piano i { position: absolute; border-radius: 2px; box-shadow: 1px 2px 0 rgba(0, 0, 0, .35); }
.tut-albero { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #4f9a52; }
.tut-anima .tut-cursore { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 0; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.tut-tasto { position: absolute; left: 0; top: 0; padding: 2px 7px; border-radius: 999px; background: #1f6feb; color: #fff; font: 600 11px system-ui; white-space: nowrap; }
.tut-fasi {display: flex; gap: 4px; list-style: none; margin: 6px 0 0; padding: 0; counter-reset: f; }
.tut-fasi li { flex: 1; text-align: center; font-size: 11px; padding: 3px 0; border-radius: 5px; background: #eef2f7; color: #5d6670; transition: background .3s, color .3s; }
.tut-fasi li.attiva { background: #1f6feb; color: #fff; }
.tut-chiave { margin: 6px 0 0; font-size: 11.5px; color: #5d6670; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tut-chiave i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.tut-etichette { display: flex; gap: 8px; flex-wrap: wrap; }
.tut-etichette span { font-size: 12px; font-weight: 650; color: var(--c); border: 1.5px solid var(--c); border-radius: 999px; padding: 3px 10px; opacity: 0; animation: tut-entra .45s ease-out forwards; }
.tut-etichette span:nth-child(2) { animation-delay: .35s; }
.tut-etichette span:nth-child(3) { animation-delay: .7s; }

.tut-puntini { display: flex; gap: 4px; justify-content: center; margin: 10px 0 8px; flex-wrap: wrap; }
.tut-puntini i { width: 6px; height: 6px; border-radius: 50%; background: #d8dde3; transition: background .25s, width .25s; }
.tut-puntini i.fatto { background: #9cbcf0; }
.tut-puntini i.si { background: #1f6feb; width: 16px; border-radius: 3px; }
.tut-carta footer { display: flex; align-items: center; gap: 8px; }
.tut-carta footer span { flex: 1; }
.tut-carta footer button { border-radius: 7px; padding: 7px 13px; font-size: 13px; cursor: pointer; border: 1px solid #d8dde3; background: #fff; color: #1f2328; }
.tut-carta footer .tut-salta { border: 0; padding-left: 0; color: #5d6670; background: transparent; }
.tut-carta footer .tut-salta:hover { color: #075fc9; text-decoration: underline; }
.tut-carta footer .tut-avanti { background: #1f6feb; border-color: #1f6feb; color: #fff; font-weight: 650; }
.tut-carta footer .tut-avanti:hover { background: #075fc9; }
.tut-carta footer [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tut-luce, .tut-carta { transition: none; }
  .tut-luce::after, .tut-carta.entra, .tut-etichette span { animation: none; opacity: 1; }
}

/* popup accorciato (poco spazio attorno all'elemento): il testo scorre, i pulsanti restano in vista */
.tut-carta footer { position: sticky; bottom: -14px; margin-bottom: -14px; padding-bottom: 14px; background: #fff; }

/* telefono (telefono.css, sotto i 721 px): la nota della versione dimostrativa, in basso sopra a tutto, coprirebbe il popup e la
   barra che i passi indicano; durante il giro si nasconde (il benvenuto dice già che è una dimostrazione) e torna alla fine */
.tut-riduci { display: none; }
@media (max-width: 720px) {
  body.tutorial-attivo #fascia-dimostrazione { display: none !important; }
  .tut-carta footer button { padding: 9px 13px; }
  /* striscia larga quanto lo schermo (tutorial.js, posizionaTelefono): la schermata resta visibile e si può toccare */
  .tut-carta, .tut-carta[data-lato=centro] { width: calc(100vw - 16px); padding-top: 12px; }
  .tut-luce, .tut-luce.grande { box-shadow: none; }
  .tut-riduci { display: block; position: absolute; top: 9px; right: 44px; border: 1px solid #d8dde3; background: #fff; color: #075fc9;
    border-radius: 999px; padding: 3px 10px; font: 600 12px system-ui; cursor: pointer; }
  .tut-carta h2 { margin-right: 110px; font-size: 16.5px; }
  .tut-carta.ridotta { padding-bottom: 10px; }
  .tut-carta.ridotta :is(.tut-anima, .tut-testo, .tut-puntini, .tut-salta) { display: none; }
  .tut-carta.ridotta h2 { margin-bottom: 8px; font-size: 15px; }
}

/* telefono.css */
/* Telefono (18/10): sotto i 721 px la mappa prende tutto lo schermo tra una testata di una riga e una barra in basso con quattro
   voci (Mappa · Livelli · Settori · Altro, telefono.js). Comandi dei settori, scheda dell'elemento, legenda, menu dei livelli e
   elenchi della barra si aprono in un foglio che sale dal basso: stessa posizione per tutti, altezza in --foglio-h (tre scatti,
   trascinabile dalla maniglia). Caricato per ultimo: batte le disposizioni per telefono dei fogli precedenti. Sopra i 720 px
   non cambia nulla. */
#barra-telefono, #foglio-maniglia { display: none; }

@media (max-width: 720px) {
  body.comunale { --testa: 56px !important; --titolo-h: 0px !important; --rail-w: 0px !important; --sx: 0px !important; --dx: 0px !important;
    --fondo: 0px !important; --barra: 60px; --foglio-h: 0px; --foglio-vis: 0px; }

  /* testata in una riga: simbolo, ricerca, account */
  #intestazione { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  #intestazione .marchio > span { display: none; }
  #intestazione .marchio > svg { width: 30px; height: 30px; }
  #intestazione .cerca { order: 0; flex: 1 1 auto; width: auto; margin: 0; }
  #intestazione input { padding-top: 9px; padding-bottom: 9px; font-size: 16px; }   /* 16 px: iOS non ingrandisce la pagina */
  #intestazione .cerca > svg { top: 10px; }
  #richiamo-dimostrazione { flex: none; padding: 3px 8px; font-size: 11px; }
  #apri-account > span:not(.icona-account), #apri-account .chevron { display: none !important; }
  .icona-account { width: 34px; height: 34px; }
  /* titolo e data della colonna: il settore aperto ha il suo titolo nel foglio, la data è il primo pulsante sopra la mappa */
  .comunale #testa-vista { display: none; }

  /* mappa a tutto schermo */
  .comunale #vista-home, .comunale.mappa-ampliata #vista-home { position: fixed; top: var(--testa); left: 0; right: 0; bottom: var(--barra);
    border: 0; border-radius: 0; background: #1b2430; }
  .comunale #map, .comunale:not(.pannello-chiuso) #map, .comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) #map { inset: 0 !important; border-radius: 0; }
  body.comunale.fm-aperto #vista-home { z-index: 48; }

  /* comandi sopra la mappa: data, 2D/3D e i filtri accesi in una riga che scorre; il menu dei livelli è nella barra */
  .comunale #azioni-mappa, body.comunale:not(.pannello-chiuso) #azioni-mappa, body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) #azioni-mappa {
    inset: 8px 8px auto; min-height: 0; padding: 0; flex-wrap: wrap; justify-content: flex-start; gap: 6px; background: none; border: 0; pointer-events: none; }
  .comunale #azioni-mappa > * { pointer-events: auto; }
  .comunale #azioni-mappa h2, .comunale #azioni-mappa .dimensione-mappa { display: none !important; }
  /* «Filtri» in testa alla riga (18/10: sul telefono non si trovavano); la scritta lunga del pulsante diventa «Filtri» */
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli) { height: 34px; padding: 0 10px; gap: 5px; border: 0; border-radius: 17px; background: #1767d3; color: #fff;
    box-shadow: 0 1px 6px rgba(16, 32, 60, .22); font-size: 0; }
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli)::after { content: "Filtri"; order: 1; font: 650 13px system-ui; }
  .comunale #azioni-mappa #apri-livelli::after { content: "Livelli"; }
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli) .fm-n { order: 2; }
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli) .fm-n:not(:empty) { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: #1767d3;
    font: 650 11px/18px system-ui; text-align: center; }
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli) .fm-giu { display: none; }
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli)[aria-expanded=true] { background: #0c4fa8; color: #fff; }
  .comunale #azioni-mappa #data-cambia { order: 1; }
  .comunale #azioni-mappa .modo-vista { order: 2; flex: none; display: flex; background: #fff; border-radius: 17px; box-shadow: 0 1px 6px rgba(16, 32, 60, .22); overflow: hidden; }
  /* il riquadro dei filtri si scioglie: «Filtri» apre la riga, i filtri accesi vanno in una seconda riga che scorre di lato */
  body.comunale #azioni-mappa .azioni-rapide.filtri-mappa { display: contents; }
  .comunale #azioni-mappa .fm { order: 0; pointer-events: auto; }
  .comunale #azioni-mappa .fm-accesi { order: 3; flex: 1 0 100%; pointer-events: auto; }
  .comunale #azioni-mappa .fm-accesi:empty { display: none; }
  .comunale #azioni-mappa :is(#data-cambia, .modo-vista button) { height: 34px; padding: 0 12px; font-size: 13px; }
  .comunale #azioni-mappa #data-cambia { border: 0; border-radius: 17px; box-shadow: 0 1px 6px rgba(16, 32, 60, .22); }
  .comunale #azioni-mappa #data-cambia span { font-size: 13px; font-weight: 600; color: inherit; }
  .comunale #azioni-mappa .modo-vista button { border-radius: 0; }
  .comunale .fm-accesi { padding: 2px; scrollbar-width: none; }
  .comunale .fm-acceso { height: 30px; box-sizing: border-box; box-shadow: 0 1px 6px rgba(16, 32, 60, .2); }
  .comunale #azioni-mappa .fm-acceso span { font-size: 12px; color: inherit; }

  /* menu «Livelli e filtri»: un foglio sopra la barra */
  .comunale .fm-menu { position: fixed; top: auto; left: 0; right: 0; bottom: var(--barra); width: auto; max-height: 68vh; overflow-y: auto; padding: 10px 10px 14px;
    border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(16, 32, 60, .18); }
  .comunale #azioni-mappa .fm-menu button { min-height: 44px; font-size: 15px; }

  /* controlli della mappa: resta la bussola; zoom e rotazione con le dita, le misure da computer */
  .comunale .maplibregl-ctrl-top-right { top: 48px; }
  body.comunale:has(.fm-accesi:not(:empty)) .maplibregl-ctrl-top-right { top: 88px; }
  .comunale :is(.controllo-misure, .controllo-vista, .maplibregl-ctrl-zoom-in, .maplibregl-ctrl-zoom-out) { display: none !important; }
  .comunale .maplibregl-ctrl-group:has(> .maplibregl-ctrl-compass:only-of-type) { border-radius: 50%; }
  .comunale :is(.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right) { bottom: var(--foglio-vis); transition: bottom .22s ease; }

  /* barra in basso */
  #barra-telefono { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: var(--barra); display: flex; box-sizing: border-box;
    padding: 0 4px env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line); }
  #barra-telefono button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; border: 0;
    background: none; color: #4a6185; font: 500 11px system-ui; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #barra-telefono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  #barra-telefono button[aria-current] { color: #0c5fc8; font-weight: 650; }
  #barra-telefono button[aria-current] svg { stroke-width: 2.1; }
  #barra-telefono button.in-attesa svg { animation: tel-attesa 1s ease-in-out infinite alternate; }
  @keyframes tel-attesa { from { opacity: 1; } to { opacity: .3; } }

  /* fogli: stessa posizione per tutti, sopra la barra; l'ordine di sovrapposizione decide quale si vede */
  body.comunale :is(#scheda, .sc-scheda, .pv-pannello, .ro-pannello, #pannello, .procedura:not(.procedura-ridotta)),
  body.comunale[data-tel-menu] #viste, body.comunale #legende:not(.lg-chiuso) {
    position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: var(--barra) !important; width: auto !important;
    max-width: none !important; height: var(--foglio-h) !important; max-height: none !important; margin: 0 !important; box-sizing: border-box;
    border: 0 !important; border-radius: 0 !important; box-shadow: 0 -2px 18px rgba(16, 32, 60, .14) !important; transform: none !important;
    transition: height .22s ease; }
  body.tel-trascina :is(#scheda, .sc-scheda, .pv-pannello, .ro-pannello, #pannello, .procedura, #viste, #legende, #foglio-maniglia) { transition: none !important; }
  body.comunale #pannello { z-index: 41 !important; }
  body.comunale :is(.sc-scheda, .pv-pannello) { z-index: 42 !important; }
  body.comunale :is(.ro-pannello, .procedura:not(.procedura-ridotta)) { z-index: 43 !important; }
  body.comunale #viste { z-index: 45 !important; }
  body.comunale #scheda { z-index: 46 !important; }
  body.comunale #legende:not(.lg-chiuso) { z-index: 47 !important; }
  body.comunale #scheda:not([hidden]) { display: flex; }
  body.comunale .procedura:not(.procedura-ridotta) { overflow-y: auto; }

  /* maniglia sopra il foglio in vista: tocco = altezza successiva, trascinata = altezza libera che si ferma allo scatto più vicino */
  #foglio-maniglia { position: fixed; z-index: 49; left: 0; right: 0; bottom: calc(var(--barra) + var(--foglio-h)); height: 24px; display: flex;
    background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 14px rgba(16, 32, 60, .12); transition: bottom .22s ease; }
  #foglio-maniglia[hidden] { display: none; }
  #foglio-maniglia .fg-presa { flex: 1; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
  #foglio-maniglia .fg-presa span { width: 40px; height: 5px; border-radius: 3px; background: #c4d0e0; }
  #foglio-maniglia .fg-chiudi { position: absolute; right: 6px; top: 0; width: 40px; height: 24px; padding: 0; border: 0; background: none; color: #627694; font-size: 15px; cursor: pointer; }

  /* elenchi della barra: Settori e Altro, con i pulsanti della colonna */
  .comunale #viste, .comunale.mappa-ampliata #viste { display: none !important; }
  body.comunale[data-tel-menu] #viste { display: flex !important; flex-direction: column; gap: 2px; padding: 8px 10px 14px; overflow-y: auto; background: #fff; }
  body[data-tel-menu=settori] #viste :is(.viste-principali, .viste-servizio) { display: none; }
  body[data-tel-menu=altro] #viste .uf-navigazione, body[data-tel-menu=altro] #viste #tab-home { display: none; }
  body.comunale[data-tel-menu] #viste .viste-principali { flex: none; }
  body.comunale[data-tel-menu] #viste .viste-servizio { margin: 0; padding: 0; border: 0; }
  body.comunale[data-tel-menu] #viste .uf-navigazione > p { margin: 4px 8px 6px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
  body.comunale[data-tel-menu] #viste :is(button, #vai-validazione) { flex-direction: row; justify-content: flex-start; min-height: 50px; padding: 8px 10px; gap: 14px;
    border-radius: 8px; font-size: 15px; text-align: left; box-shadow: none; }
  body.comunale[data-tel-menu] #viste :is(button, #vai-validazione) svg { width: 22px; height: 22px; }
  body.comunale[data-tel-menu] #viste .uf-sigla { width: 30px; height: 30px; font-size: 11px; }
  body.comunale[data-tel-menu] #viste button[aria-current] { background: #e5f0ff; color: #075fc9; }

  /* legenda: chiusa è un'etichetta in basso a sinistra sopra il foglio; aperta è un foglio */
  #legende.lg-chiuso, .comunale #legende.lg-chiuso { top: auto; left: 10px; right: auto; bottom: calc(var(--barra) + var(--foglio-vis) + 34px); width: 124px;
    max-height: none; transition: bottom .22s ease; }
  body.comunale #legende:not(.lg-chiuso) { background: #fff; }
  body.comunale #legende:not(.lg-chiuso) .lg-corpo { flex: 1; min-height: 0; padding: 0 14px 14px; font-size: 13px; }
  body.comunale #legende:not(.lg-chiuso) .lg-testa { padding: 12px 14px; font-size: 15px; }
  body.comunale.fm-aperto #legende, body.comunale[data-tel-menu] #legende.lg-chiuso { display: none; }

  /* cose appoggiate alla mappa: la linea del tempo sotto i comandi, le sintesi sopra il foglio */
  body.comunale:has(.fm-accesi:not(:empty)) :is(.sc-tempo, .mc-espansa .sc-tempo) { --sotto-comandi: 90px; }
  .comunale .sc-tempo, .comunale.mc-espansa .sc-tempo, .aq-aperto .sc-tempo { top: calc(var(--testa) + var(--sotto-comandi, 50px)) !important; bottom: auto !important; left: 8px !important;
    right: 8px !important; max-width: none; margin: 0; z-index: 20; }
  .mc-sintesi, .mc-espansa .mc-sintesi { left: 10px; right: 10px; bottom: calc(var(--barra) + var(--foglio-vis) + 52px); max-width: none; }
  .comunale .barra-editor { left: 8px; right: 8px; bottom: calc(var(--barra) + var(--foglio-vis) + 8px); }

  /* Validazione (validazione.html): la mappa del rilievo riempie il riquadro; sotto la testata una riga con rilievo e avanzamento
     («0 di 119 esaminati»); restano «Inquadra tutto il rilievo» e le misure sulla nuvola, che sono parte del lavoro */
  body.comunale.val { --riga-val: 30px; }
  body.comunale.val #testa-vista { display: flex; position: fixed; z-index: 39; top: var(--testa); left: 0; right: 0; height: var(--riga-val); box-sizing: border-box;
    padding: 0 12px; align-items: center; background: #fff; border-bottom: 1px solid var(--line); }
  body.comunale.val #testa-vista :is(h1, .col-pulsante) { display: none; }
  body.comunale.val #data-riga { min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; }
  body.comunale.val #data-riga #val-rilievo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.comunale.val #data-riga :is(.origine-dato, #avanzamento .barra) { display: none; }
  body.comunale.val #vista-home { top: calc(var(--testa) + var(--riga-val)); }
  body.comunale.val .val-cartografia { inset: 0; border-radius: 0; }
  body.comunale.val #azioni-mappa .dimensione-mappa:has(#val-estensione) { display: flex !important; flex: none; order: 2; }
  body.comunale.val #azioni-mappa #val-estensione { width: 34px; height: 34px; border: 0; border-radius: 50%; box-shadow: 0 1px 6px rgba(16, 32, 60, .22); }
  body.comunale.val #azioni-mappa .modo-vista { order: 1; }
  body.comunale.val .controllo-misure { display: block !important; }
  body.comunale.val .val-sopra-mappa { top: auto; bottom: calc(var(--foglio-vis) + 8px); }
}