/* ============================================================
   GS — Camada visual do Mapa de Faturamento (só estilo)
   Carregar por ÚLTIMO. Não altera ids, lógica nem Leaflet.
   ============================================================ */
:root{ --m-ac:#20789A; --m-ac2:#2a86a8; --m-ink:#122436; --m-soft:#5B6B7D; --m-mute:#8496a5; --m-line:#E3EAF2; --m-bg:#F2F6FA; }

/* ---- barra de controles ---- */
.controls{ background:#fff !important; border:1px solid var(--m-line) !important; border-radius:14px !important;
  margin:16px 36px 0 !important; padding:14px 16px !important; box-shadow:0 2px 10px rgba(10,46,61,.04); }
.ctrl-lbl{ font-size:10.5px !important; letter-spacing:.8px !important; color:var(--m-mute) !important; font-weight:700 !important; }
.toggle{ background:var(--m-bg) !important; border:1px solid var(--m-line) !important; border-radius:999px !important; padding:3px !important; gap:2px !important; }
.toggle button{ text-transform:none !important; letter-spacing:0 !important; font-size:12.5px !important; font-weight:600 !important;
  color:var(--m-soft) !important; border-radius:999px !important; padding:7px 13px !important; }
.toggle button:hover{ color:var(--m-ink) !important; }
.toggle button.on{ background:#fff !important; color:var(--m-ac) !important; box-shadow:0 1px 4px rgba(10,46,61,.14) !important; }
.controls .btn{ text-transform:none !important; letter-spacing:0 !important; font-size:12.5px !important; font-weight:700 !important;
  border-radius:10px !important; border:1.5px solid var(--m-line) !important; color:var(--m-ink) !important; padding:9px 15px !important; background:#fff !important; }
.controls .btn:hover{ border-color:#bcdbe6 !important; }

/* ---- KPIs flutuantes → cards limpos ---- */
.map-kpis{ gap:10px !important; }
.map-kpi{ background:#fff !important; border:1px solid var(--m-line) !important; border-radius:12px !important;
  box-shadow:0 4px 14px rgba(10,46,61,.10) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding:11px 15px !important; }
.map-kpi-lbl{ font-size:10px !important; letter-spacing:.6px !important; color:var(--m-mute) !important; }
.map-kpi-val{ font-size:20px !important; letter-spacing:-.3px !important; }

/* ---- legenda flutuante limpa ---- */
.legend{ background:#fff !important; border:1px solid var(--m-line) !important; border-radius:12px !important;
  box-shadow:0 6px 20px rgba(10,46,61,.12) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.legend-title{ color:var(--m-soft) !important; letter-spacing:.6px !important; }
.legend-note{ color:var(--m-soft) !important; border-top-color:var(--m-line) !important; }

/* ---- painel lateral / ranking ---- */
.side{ background:#fff !important; border-left:1px solid var(--m-line) !important; }
.side-title{ font-size:15px !important; color:var(--m-ink) !important; }
.side-sub{ color:var(--m-mute) !important; letter-spacing:.6px !important; }
.rank-item{ border-bottom:1px solid #eef2f7 !important; padding:11px 0 !important; }
.rank-item:hover{ background:var(--m-bg) !important; }
.rank-pos{ width:24px !important; height:24px; border-radius:7px; background:var(--m-bg); color:var(--m-soft);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.rank-cidade{ font-size:13px !important; color:var(--m-ink) !important; }
.rank-uf{ color:var(--m-mute) !important; }
.rank-val{ color:var(--m-ink) !important; }
.rank-val .pct{ color:var(--m-mute) !important; }
.rank-track{ height:5px; border-radius:4px; background:#eef2f7; margin-top:6px; overflow:hidden; }
.rank-track i{ display:block; height:100%; background:linear-gradient(90deg,var(--m-ac2),var(--m-ac)); }