/* Cartão do mapa: controles, legenda do calor e popups do Leaflet. */
.map-card{padding:0;overflow:hidden}
.map-card .card-head{padding:16px 18px 10px}
#map{height:560px;scroll-margin-top:calc(var(--top) + 12px);background:var(--navy);position:relative;z-index:0;isolation:isolate} /* confina os z-index do Leaflet (controles usam 1000) dentro do mapa */
.map-ctrl{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--soft);padding:5px 11px;cursor:pointer;font-size:12.5px}
.seg button.on{background:var(--navy);color:var(--neon)}
input[type=range]{accent-color:var(--navy);width:110px;vertical-align:middle}
.map-foot{display:flex;justify-content:space-between;padding:8px 18px 12px;font-size:12px;color:var(--muted);flex-wrap:wrap;gap:8px}
.legend-heat{display:inline-flex;align-items:center;gap:6px}
.legend-heat i{display:inline-block;width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,#2C28A8,#6C69D9,#9CFF9C,#00FF00)}
.leaflet-popup-content{font-family:var(--f);font-size:12.5px;margin:10px 12px}
.leaflet-popup-content b{color:var(--navy)}

/* grupo de pontos próximos (mapa afastado): bolha com o total de eventos */
.grupo-mapa{display:grid;place-items:center;border-radius:50%;background:rgba(108,105,217,.88);border:2px solid var(--neon);box-shadow:0 0 0 4px rgba(108,105,217,.3);color:#fff;font:600 11px/1 var(--f);cursor:pointer}

/* popup de resumo do local */
.popup-local .leaflet-popup-content{margin:12px 14px}
.popup-cabecalho{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.popup-cabecalho b{font-size:14px}
.popup-titulo{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-right:14px}   /* espaço do ✕ do Leaflet */
.popup-local .icone-mapa{width:22px;height:22px}
.leaflet-container a.icone-mapa{color:var(--muted)}   /* o Leaflet pinta links de azul */
.leaflet-container a.icone-mapa:hover{color:var(--navy)}
.popup-local .icone-mapa svg{width:15px;height:15px}
.popup-cabecalho span,.popup-clientes{color:var(--muted);font-size:12px}
.popup-coordenada{font-variant-numeric:tabular-nums}
.popup-grupos{margin-bottom:4px}
.popup-topo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 10px}
.popup-topo h5{margin:0 0 2px;font-family:var(--fc);font-size:13px;color:var(--navy)}
.popup-topo ul{list-style:none;margin:0;padding:0;font-size:12px}
.popup-topo li{display:flex;justify-content:space-between;gap:6px;border-bottom:1px solid var(--line);padding:2px 0}
.popup-topo li b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.popup-detalhe{width:100%}

/* janela de detalhes do local */
.modal{border:0;border-radius:var(--radius);padding:18px 20px;width:min(1180px,94vw);max-height:88vh;color:var(--ink);background:var(--panel);box-shadow:0 20px 60px rgba(2,0,57,.35)}
.modal[open]{display:flex;flex-direction:column;gap:12px}
.modal::backdrop{background:rgba(2,0,57,.55)}
.modal-cabecalho{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.modal-cabecalho h2{font-family:var(--fc);font-size:24px;margin:0;color:var(--navy);display:flex;align-items:center;gap:8px}
.icone-mapa{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;color:var(--muted);flex-shrink:0}
.icone-mapa svg{width:17px;height:17px;fill:currentColor}
.icone-mapa:hover,.icone-mapa:focus-visible{color:var(--navy);background:var(--soft)}
.modal-cabecalho .sub{font-size:12.5px;color:var(--muted)}
.modal-indicadores{display:flex;flex-wrap:wrap;gap:8px}
.modal-indicadores div{border:1px solid var(--line);border-radius:8px;padding:6px 12px;background:var(--soft);display:flex;gap:6px;align-items:baseline}
.modal-indicadores b{font-family:var(--fc);font-size:20px;color:var(--navy)}
.modal-indicadores span{font-size:12px;color:var(--muted)}
.modal-ferramentas{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.modal-ferramentas input[type=search]{flex:1;min-width:240px;height:32px;font-size:13px}
.modal-tabela{max-height:none;flex:1;min-height:160px}
.modal-rodape{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px}
.modal-rodape #detalheExportar{margin-left:auto}