/* ============================================================
   VOTODATA — Mapa de Influência Regional
   Choropleth interativo do Brasil sobre o Design System.
   Depende de site.css (tokens). Cores de UF aplicadas via JS.
   ============================================================ */

/* ---------- Shell / layout ---------- */
.vdmap{--vdmap-gap:24px}
.vdmap-layout{
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(330px,.86fr);
  gap:var(--vdmap-gap);align-items:start;
}
.vdmap--section .vdmap-layout{grid-template-columns:minmax(0,1.25fr) minmax(310px,.9fr)}

/* ---------- Stage (mapa) ---------- */
.vdmap-stage{
  position:relative;padding:18px 18px 16px;overflow:hidden;
  background:
    radial-gradient(900px 520px at 60% -10%, rgba(6,182,212,.10), transparent 62%),
    radial-gradient(640px 420px at 8% 110%, rgba(245,158,11,.06), transparent 60%),
    var(--raised);
}
.vdmap-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 110% at 50% 30%,#000,transparent 88%);
          mask-image:radial-gradient(120% 110% at 50% 30%,#000,transparent 88%);
}
.vdmap-stage>*{position:relative;z-index:1}

/* ---------- Toolbar ---------- */
.vdmap-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:8px;
}
.vdmap-toolbar__spacer{flex:1 1 auto}

/* search box */
.vdmap-search{position:relative;flex:0 1 230px;min-width:170px;z-index:14}
.vdmap-search__ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--text-mut);pointer-events:none}
.vdmap-search__field{
  width:100%;height:38px;padding:0 14px 0 35px;border-radius:var(--r-full);
  background:rgba(148,163,184,.06);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-body);font-size:13px;letter-spacing:.01em;
  transition:border-color .2s,background .2s,box-shadow .2s;outline:none}
.vdmap-search__field::placeholder{color:var(--text-mut)}
.vdmap-search__field:focus{border-color:var(--vd-cyan-700);background:rgba(6,182,212,.06);
  box-shadow:0 0 0 3px rgba(6,182,212,.12)}
.vdmap-search__menu{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
  padding:6px;border-radius:var(--r-md);background:rgba(11,16,28,.97);
  backdrop-filter:blur(12px);border:1px solid var(--border-soft);box-shadow:var(--shadow-3);
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .14s,transform .14s}
.vdmap-search__menu.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
.vdmap-search__item{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;
  padding:8px 10px;border-radius:var(--r-sm);border:0;background:none;text-align:left;
  color:var(--text);transition:background .15s}
.vdmap-search__item:hover,.vdmap-search__item.is-active{background:rgba(6,182,212,.1)}
.vdmap-search__sig{font-family:var(--font-mono);font-weight:600;font-size:11.5px;
  color:var(--vd-cyan-300);width:26px;flex:none}
.vdmap-search__nm{font-size:13px;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vdmap-search__rg{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-mut);flex:none}
.vdmap-search__empty{padding:12px 10px;font-size:12.5px;color:var(--text-mut)}

/* search highlight on map */
.vdmap.is-searching .vdmap-svg .uf:not(.is-found){opacity:.14;stroke:var(--ink-800)}
.vdmap-svg .uf.is-found{stroke:var(--vd-cyan-300);stroke-width:1.7}
@keyframes vdmapPulse{0%{filter:drop-shadow(0 0 0 rgba(6,182,212,.0))}
  40%{filter:drop-shadow(0 0 14px rgba(34,208,238,.9))}
  100%{filter:drop-shadow(0 0 0 rgba(6,182,212,.0))}}
.vdmap-svg .uf.is-pulse{animation:vdmapPulse 1.1s var(--ease)}

/* segmented metric switch */
.vdseg{display:inline-flex;padding:4px;gap:3px;border-radius:var(--r-full);
  background:rgba(148,163,184,.06);border:1px solid var(--border)}
.vdseg button{
  appearance:none;border:0;background:none;color:var(--text-sec);
  font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.01em;
  padding:8px 15px;border-radius:var(--r-full);transition:color .2s,background .25s var(--ease);
}
.vdseg button:hover{color:var(--text)}
.vdseg button.is-on{background:rgba(6,182,212,.16);color:var(--vd-cyan-300);
  box-shadow:inset 0 0 0 1px rgba(6,182,212,.3)}

/* region filter chips */
.vdmap-chips{display:flex;flex-wrap:wrap;gap:8px}
.vdmap-chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;
  padding:6px 12px 6px 10px;border-radius:var(--r-full);
  background:rgba(148,163,184,.05);border:1px solid var(--border);color:var(--text-sec);
  white-space:nowrap;
  transition:border-color .2s,background .2s,color .2s,opacity .2s;
}
.vdmap-chip__dot{width:9px;height:9px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.vdmap-chip:hover{color:var(--text);border-color:var(--border-soft)}
.vdmap-chip.is-on{color:var(--text);border-color:var(--vd-cyan-700);background:rgba(6,182,212,.08)}
.vdmap.is-filtering .vdmap-chip:not(.is-on){opacity:.5}

/* ---------- SVG map ---------- */
.vdmap-canvas{position:relative;width:100%}
.vdmap-live{position:absolute;top:6px;right:6px;z-index:6;padding:6px 12px;white-space:nowrap}
.vdmap-svg{width:100%;height:auto;display:block;overflow:visible;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.5))}
.vdmap-svg .uf{
  stroke:var(--ink-850);stroke-width:1.1;stroke-linejoin:round;
  cursor:pointer;transition:fill .4s var(--ease),opacity .3s,stroke .2s,stroke-width .2s;
}
.vdmap-svg .uf:hover{stroke:var(--white);stroke-width:1.6}
.vdmap-svg .uf.is-sel{stroke:var(--vd-amber-400);stroke-width:2.4;
  filter:drop-shadow(0 0 10px rgba(245,158,11,.55))}
.vdmap.is-filtering .vdmap-svg .uf.is-dim{opacity:.14;stroke:var(--ink-800)}

/* floating tooltip */
.vdmap-tip{
  position:absolute;z-index:20;top:0;left:0;pointer-events:none;
  min-width:172px;max-width:230px;padding:12px 14px;border-radius:var(--r-md);
  background:rgba(11,16,28,.92);backdrop-filter:blur(12px);
  border:1px solid var(--border-soft);box-shadow:var(--shadow-3);
  opacity:0;transform:translateY(4px) scale(.97);transition:opacity .14s,transform .14s;
}
.vdmap-tip.is-on{opacity:1;transform:translateY(0) scale(1)}
.vdmap-tip__top{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.vdmap-tip__sig{font-family:var(--font-mono);font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:6px;background:rgba(6,182,212,.16);color:var(--vd-cyan-300)}
.vdmap-tip__name{font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.vdmap-tip__reg{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-mut);margin-bottom:8px}
.vdmap-tip__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.vdmap-tip__v{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--white)}
.vdmap-tip__l{font-size:11px;color:var(--text-mut)}
.vdmap-tip__hint{margin-top:9px;padding-top:8px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--text-mut);display:flex;align-items:center;gap:6px}
.vdmap-tip__hint svg{width:12px;height:12px;color:var(--vd-cyan-400)}

/* legend */
.vdmap-legend{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.vdmap-legend__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-mut)}
.vdmap-ramp{display:flex;flex-direction:column;gap:5px;flex:1 1 260px;min-width:200px}
.vdmap-ramp__bar{height:10px;border-radius:var(--r-full);border:1px solid var(--border)}
.vdmap-ramp__scale{display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-mut)}
.vdmap-legend--region{gap:14px}
.vdmap-legend__swatch{display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;color:var(--text-sec)}
.vdmap-legend__swatch i{width:13px;height:13px;border-radius:4px;display:inline-block}

/* ---------- Aside (detalhe) ---------- */
.vdmap-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--header-h) + 18px)}

.vdmap-detail{padding:24px 24px 22px;background:linear-gradient(180deg,var(--card),var(--ink-850))}
.vdmap-detail__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.vdmap-detail__sig{flex:none;width:54px;height:54px;border-radius:var(--r-md);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.01em;
  background:rgba(6,182,212,.12);color:var(--vd-cyan-300);border:1px solid rgba(6,182,212,.22)}
.vdmap-detail__name{font-family:var(--font-display);font-weight:600;font-size:22px;
  line-height:1.12;letter-spacing:-.018em;margin-bottom:7px;text-wrap:balance}
.vdmap-detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.vdmap-detail__cap{font-size:13px;color:var(--text-mut);display:inline-flex;align-items:center;gap:6px}
.vdmap-detail__cap svg{width:14px;height:14px;color:var(--vd-amber-400)}
.vdmap-detail__rank{margin-left:auto;font-family:var(--font-mono);font-size:11.5px;
  padding:5px 11px;border-radius:var(--r-full);background:rgba(245,158,11,.1);
  color:var(--vd-amber-400);border:1px solid rgba(245,158,11,.22);white-space:nowrap}

.vdmap-stats{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.vdmap-stat__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.vdmap-stat__l{font-size:12.5px;color:var(--text-sec)}
.vdmap-stat__v{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.vdmap-stat__v small{font-family:var(--font-mono);font-weight:500;font-size:11px;color:var(--text-mut);margin-left:5px}
.vdmap-stat__track{height:7px;border-radius:var(--r-full);background:rgba(148,163,184,.1);overflow:hidden}
.vdmap-stat__fill{display:block;height:100%;border-radius:inherit;width:0;
  transition:width .6s var(--ease);
  background:linear-gradient(90deg,var(--vd-cyan-600),var(--vd-cyan-400))}
.vdmap-stat__fill--am{background:linear-gradient(90deg,var(--vd-amber-600),var(--vd-amber-400))}
.vdmap-stat__fill--mut{background:linear-gradient(90deg,var(--ink-600),var(--ink-400))}

/* mini KPI strip inside detail footer */
.vdmap-detail__share{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.vdmap-detail__sharev{font-family:var(--font-display);font-weight:700;font-size:15px}
.vdmap-detail__sharel{font-size:11.5px;color:var(--text-mut);max-width:18ch;text-align:right}

/* ranking */
.vdmap-rank{padding:18px 8px 12px 18px}
.vdmap-rank__head{display:flex;align-items:center;justify-content:space-between;
  padding-right:10px;margin-bottom:12px}
.vdmap-rank__title{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-mut)}
/* UF / Municípios toggle */
.vdmap-rank__toggle{display:inline-flex;padding:3px;gap:2px;border-radius:var(--r-full);
  background:rgba(148,163,184,.06);border:1px solid var(--border)}
.vdmap-rank__toggle button{appearance:none;border:0;background:none;cursor:pointer;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-mut);padding:5px 11px;border-radius:var(--r-full);transition:color .2s,background .25s}
.vdmap-rank__toggle button:hover{color:var(--text-sec)}
.vdmap-rank__toggle button.is-on{background:rgba(6,182,212,.16);color:var(--vd-cyan-300)}
.vdmap-rank__list{display:flex;flex-direction:column;max-height:330px;overflow-y:auto;
  padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--border-soft) transparent}
.vdmap-rank__list::-webkit-scrollbar{width:7px}
.vdmap-rank__list::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:9px}
.vdmap-row{display:grid;grid-template-columns:20px 30px 1fr auto;align-items:center;gap:11px;
  padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid transparent;transition:background .18s,border-color .18s}
.vdmap-row:hover{background:rgba(148,163,184,.05)}
.vdmap-row.is-sel{background:rgba(6,182,212,.08);border-color:rgba(6,182,212,.25)}
.vdmap-row__n{font-family:var(--font-mono);font-size:11px;color:var(--text-mut);text-align:right}
.vdmap-row__sig{font-family:var(--font-mono);font-weight:600;font-size:12.5px;color:var(--text)}
.vdmap-row__barwrap{height:6px;border-radius:var(--r-full);background:rgba(148,163,184,.1);overflow:hidden}
.vdmap-row__bar{display:block;height:100%;border-radius:inherit;width:0;transition:width .5s var(--ease)}
.vdmap-row__v{font-family:var(--font-mono);font-size:11.5px;color:var(--text-sec);white-space:nowrap}
.vdmap.is-filtering .vdmap-row.is-dim{opacity:.32}

/* municipality rows (drill-down) */
.vdmap-mrow{position:relative;display:grid;grid-template-columns:22px 1fr auto;
  align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);
  overflow:hidden;isolation:isolate}
.vdmap-mrow__fill{position:absolute;inset:0 auto 0 0;z-index:-1;width:0;
  background:linear-gradient(90deg,rgba(6,182,212,.20),rgba(6,182,212,.04));
  border-right:1px solid rgba(34,208,238,.35);transition:width .5s var(--ease)}
.vdmap-mrow__name{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vdmap-mrow:first-child .vdmap-mrow__name{font-weight:600}
.vdmap-mrow--rest{opacity:.72}
.vdmap-mrow--rest .vdmap-mrow__name{font-style:italic;color:var(--text-sec)}
.vdmap-mrow--rest .vdmap-mrow__fill{background:linear-gradient(90deg,rgba(148,163,184,.14),rgba(148,163,184,.03));
  border-right-color:var(--border-soft)}
.vdmap-mfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding:10px 11px 2px;border-top:1px solid var(--border)}
.vdmap-mfoot__l{font-size:11.5px;color:var(--text-mut)}
.vdmap-mfoot__v{font-family:var(--font-mono);font-size:11.5px;color:var(--vd-cyan-300)}

/* ---------- KPI strip (full page) ---------- */
.vdmap-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin-top:26px}
.vdmap-kpi{background:var(--surface);padding:22px 22px;display:flex;flex-direction:column;gap:5px}
.vdmap-kpi__v{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em}
.vdmap-kpi__l{font-size:12.5px;color:var(--text-mut)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .vdmap-layout,.vdmap--section .vdmap-layout{grid-template-columns:1fr}
  .vdmap-aside{position:static}
  .vdmap-kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .vdmap-kpis{grid-template-columns:1fr}
  .vdmap-detail__rank{margin-left:0}
}