/* 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; }