.map-legend-control {
  --legend-text-color: #0f172a;
  --legend-font-size: 12px;
  --legend-background-opacity: 0.94;
  position: absolute;
  z-index: 20;
  inline-size: max-content;
  min-inline-size: 9rem;
  max-inline-size: min(42vw, 28rem);
  max-block-size: min(52vh, 30rem);
  overflow: auto;
  background: rgb(255 255 255 / var(--legend-background-opacity));
  border: 1px solid rgb(15 23 42 / 18%);
  border-radius: 0.75rem;
  box-shadow: 0 14px 34px rgb(15 23 42 / 22%);
  backdrop-filter: blur(8px);
  color: var(--legend-text-color);
  font-size: var(--legend-font-size);
  overscroll-behavior: contain;
}

.map-legend-control.is-hidden { display: none; }
.map-legend-control.is-compact { max-inline-size: min(32vw, 20rem); max-block-size: min(34vh, 20rem); }
.map-legend-control.position-bottom-right { right: 1rem; bottom: 3.25rem; }
.map-legend-control.position-bottom-left { left: 1rem; bottom: 3.25rem; }
.map-legend-control.position-top-right { right: 1rem; top: 8rem; }
.map-legend-control.position-top-left { left: 1rem; top: 8rem; }
.map-legend-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .65rem; border-bottom:1px solid rgb(148 163 184 / 32%); font-weight:800; }
.map-legend-header.title-hidden { justify-content:flex-end; }
.map-legend-collapse { border:0; background:#e2e8f0; color:#0f172a; width:24px; height:24px; border-radius:999px; cursor:pointer; font-weight:900; line-height:1; }
.map-legend-body { padding:.45rem .65rem .55rem; }
.map-legend-control.is-collapsed { inline-size:fit-content; min-inline-size:0; overflow:visible; }
.map-legend-control.is-collapsed .map-legend-body { display:none; }
.map-legend-layer { padding:.3rem 0; border-bottom:1px solid rgb(148 163 184 / 22%); }
.map-legend-layer:last-child { border-bottom:0; }
.map-legend-layer-title { margin-block-end:.2rem; font-weight:800; color:inherit; overflow-wrap:anywhere; }
.map-legend-row { display:grid; grid-template-columns:15px minmax(min-content, 1fr); align-items:center; gap:.35rem; margin:.14rem 0; }
.map-legend-swatch { width:13px; height:13px; border-radius:.2rem; border:1px solid rgb(15 23 42 / 30%); display:inline-block; }
.map-legend-swatch.is-line { height:4px; border-radius:999px; border:0; }
.map-legend-swatch.is-point { border-radius:999px; }
.map-legend-text { white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
/* Classe desligada no olhinho do painel de camadas: continua na legenda do
   editor, apagada, para o autor saber o que está fora do mapa. */
.map-legend-row.is-off .map-legend-swatch { opacity:.3; }
.map-legend-row.is-off .map-legend-text { opacity:.5; text-decoration:line-through; }
.map-legend-off-note { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.map-legend-gradient { height:10px; min-inline-size:7rem; border-radius:999px; border:1px solid rgb(15 23 42 / 20%); margin:.2rem 0; }
.map-legend-minmax { display:flex; justify-content:space-between; gap:.4rem; color:inherit; opacity:.72; font-size:.92em; overflow-wrap:anywhere; }
.map-legend-muted { color:inherit; opacity:.72; font-size:.92em; }
.map-legend-control.is-compact .map-legend-header { padding:.35rem .45rem; }
.map-legend-control.is-compact .map-legend-body { padding:.3rem .45rem .4rem; }
.map-legend-control.is-compact .map-legend-layer { padding:.2rem 0; }

[data-theme="dark"] .map-legend-control,
.public-map-stage .map-legend-control {
  background: rgb(255 255 255 / var(--legend-background-opacity));
  border-color: rgb(148 163 184 / 42%);
  box-shadow:0 14px 34px rgb(0 0 0 / 35%);
}
[data-theme="dark"] .map-legend-collapse,
.public-map-stage .map-legend-collapse { background:#e2e8f0; color:#0f172a; }

@media (max-width: 720px) {
  .map-legend-control {
    max-inline-size:calc(100% - 1.5rem);
    max-block-size:min(38%, 17rem);
  }
  .map-legend-control.position-bottom-right,
  .map-legend-control.position-bottom-left { bottom:2.8rem; }
  .map-legend-control.position-bottom-right,
  .map-legend-control.position-top-right { right:.75rem; }
  .map-legend-control.position-bottom-left,
  .map-legend-control.position-top-left { left:.75rem; }
  .map-legend-control.position-top-right,
  .map-legend-control.position-top-left { top:8rem; }
}

.map-legend-setting-stack { display:grid; gap:.35rem; font-size:.84rem; }
.map-legend-setting-stack > span { display:flex; justify-content:space-between; gap:.5rem; }
.map-legend-setting-stack input[type="range"] { width:100%; }
.map-legend-setting-row input[type="text"] { width:min(13rem, 58%) !important; min-height:2rem !important; padding:.3rem .45rem !important; }
.map-legend-setting-row input[type="color"] { width:2.4rem !important; min-width:2.4rem; height:2rem; min-height:2rem !important; padding:.15rem !important; }
.legend-global-actions { display:flex; flex-wrap:wrap; gap:.45rem; }
.legend-layer-editor-list { display:grid; gap:.55rem; padding:.65rem; border-top:1px solid var(--color-border, #cbd5e1); }
.legend-layer-editor { border:1px solid var(--color-border, #cbd5e1); border-radius:.55rem; overflow:hidden; }
.legend-layer-editor > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.5rem; cursor:pointer; padding:.55rem .65rem; font-weight:800; }
.legend-layer-editor-body { display:grid; gap:.55rem; padding:.6rem; border-top:1px solid var(--color-border, #cbd5e1); }
.legend-editor-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:.35rem; align-items:center; }
.legend-editor-row input[type="text"] { min-width:0; width:100%; }
.legend-editor-row input[type="checkbox"] { width:1rem !important; min-width:1rem; min-height:1rem !important; height:1rem; padding:0 !important; }
.legend-editor-order { display:flex; gap:.2rem; }
.legend-editor-order button { width:1.8rem; height:1.8rem; padding:0; }
.legend-item-swatch { width:13px; height:13px; border-radius:.2rem; border:1px solid rgb(148 163 184 / 55%); }
.legend-layer-editor-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
.legend-layer-editor-actions .order-button { flex:1 1 auto; }
.legend-layer-editor-note { margin:0; font-size:.74rem; color:var(--color-text-muted, #64748b); }

@media (max-width: 440px) {
  .legend-editor-row { grid-template-columns:auto minmax(0,1fr) auto; }
  .legend-editor-order { grid-column:2 / -1; justify-content:flex-end; }
}