/* Painel "Leads por DDD" da aba Gestão (web/js/mapa-ddd.js). Só tokens de estilo.css.
   --md-ponto: o dourado do escritório num degrau validado pelo validador da skill dataviz
   (faixa de luminosidade, croma mínimo e contraste ≥ 3:1 sobre o fundo do mapa em cada tema).
   #caa461 puro fica claro demais no escuro e sem contraste no claro; segue como destaque de seleção. */
#mapa-ddd {
  --md-ponto: #bb8b33;
  --md-ponto-texto: #1a1d21;
  margin-bottom: 16px;
}
html[data-tema="claro"] #mapa-ddd {
  --md-ponto: #976f28;
  --md-ponto-texto: #ffffff;
}

.md-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.md-topo h3 { margin: 0 6px 0 0; }
.md-topo select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--input); color: var(--texto); font: inherit; font-size: 12.5px; max-width: 220px; }
.md-check { font-size: 12.5px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.md-total { margin-left: auto; font-size: 12.5px; color: var(--texto-3); }
#mapa-ddd > .sub { margin-top: 8px; }

.md-corpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 16px; align-items: start; transition: opacity .15s; }
.md-corpo.carregando { opacity: .5; pointer-events: none; }

/* mapa */
.md-mapa { position: relative; max-width: 680px; width: 100%; justify-self: center; }
#mapa-ddd .md-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: manipulation; }
.md-ufs path { fill: var(--fundo-3); stroke: var(--borda); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.md-siglas text { fill: var(--texto-3); font-size: 15px; text-anchor: middle; dominant-baseline: middle; opacity: .8; pointer-events: none; }
.md-ponto { cursor: pointer; outline: none; }
.md-alvo { fill: transparent; }
.md-circ { fill: var(--md-ponto); fill-opacity: .88; stroke: var(--fundo-2); stroke-width: 2px; vector-effect: non-scaling-stroke; transition: fill-opacity .12s; }
.md-circ-txt { fill: var(--md-ponto-texto); font-size: 15px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.md-ponto:hover .md-circ, .md-ponto:focus-visible .md-circ { fill-opacity: 1; stroke: var(--texto-2); }
.md-ponto.sel .md-circ { fill-opacity: 1; stroke: var(--texto); stroke-width: 2.5px; }
.md-ponto:focus-visible .md-alvo { stroke: var(--ouro); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.md-leg-circ { fill: none; stroke: var(--texto-3); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.md-leg-linha { stroke: var(--texto-3); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.md-leg-txt, .md-leg-titulo { fill: var(--texto-2); font-size: 15px; }
.md-leg-titulo { fill: var(--texto-3); }
.md-vazio-txt { fill: var(--texto-2); font-size: 20px; text-anchor: middle; }

/* tooltip */
.md-dica { position: absolute; z-index: 5; min-width: 180px; max-width: 260px; background: var(--fundo-2); border: 1px solid var(--borda-forte); border-radius: 9px; padding: 9px 11px; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 12px; color: var(--texto-2); pointer-events: none; }
.md-dica-valor { font-size: 16px; font-weight: 700; color: var(--texto); }
.md-dica-titulo { color: var(--texto); font-weight: 500; }
.md-dica-reg { color: var(--texto-3); font-size: 11.5px; margin-top: 1px; }
.md-dica-sec { margin-top: 7px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-3); }
.md-dica-linhas { display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; }
.md-dica-linhas b { color: var(--texto); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* lado: detalhe + ranking */
.md-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.md-lado h4 { margin: 0 0 6px; font-size: 13px; }
.md-detalhe { background: var(--fundo-3); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 11px; }
.md-det-topo { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.md-det-topo h4 { margin: 0; }
.md-det-sub { font-size: 11.5px; color: var(--texto-3); margin: 2px 0 8px; }
.md-fechar { border: 0; background: transparent; color: var(--texto-2); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.md-fechar:hover { color: var(--texto); }
.md-leads { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.md-lead { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 8px; padding: 7px 9px; color: var(--texto); font: inherit; font-size: 12.5px; cursor: pointer; }
.md-lead:hover, .md-lead:focus-visible { border-color: var(--ouro); outline: none; }
.md-lead-nome { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-lead-nome small { font-weight: 400; color: var(--texto-3); }
.md-lead-pe { grid-column: 1 / -1; font-size: 11px; color: var(--texto-3); }
.md-lead .kb-chip { white-space: nowrap; }

.md-rk-lista { list-style: none; margin: 0; padding: 0; }
.md-rk { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) 70px 32px; align-items: center; gap: 8px; background: transparent; border: 0; border-bottom: 1px solid var(--borda); padding: 6px 4px; color: var(--texto); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; border-radius: 0; }
.md-rk:hover, .md-rk:focus-visible { background: var(--fundo-3); outline: none; }
.md-rk.sel { background: var(--marca-fundo); }
.md-rk-ddd { font-weight: 700; font-variant-numeric: tabular-nums; }
.md-rk-nome { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-rk-trilho { height: 8px; background: var(--fundo-3); border-radius: 4px; overflow: hidden; }
.md-rk-trilho i { display: block; height: 100%; background: var(--md-ponto); border-radius: 0 4px 4px 0; }
.md-rk-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.md-rk-outros { margin-top: 6px; }
.md-rk-outros .md-rk { border-bottom: 0; border-top: 1px solid var(--borda); }
.md-rk-outros .md-rk-trilho i { background: var(--texto-3); }
.md-mais { margin-top: 6px; border: 0; background: transparent; color: var(--marca); font: inherit; font-size: 12.5px; cursor: pointer; padding: 2px 0; }
.md-mais:hover { text-decoration: underline; }
.md-uf { margin: 8px 0 0; font-size: 12px; color: var(--texto-2); line-height: 1.5; }
.md-uf b { color: var(--texto-3); font-weight: 500; }
.md-nada { color: var(--texto-3); font-size: 12.5px; margin: 4px 0; }

/* celular: mapa em cima, ranking embaixo */
@media (max-width: 900px) {
  .md-corpo { grid-template-columns: 1fr; }
  .md-total { margin-left: 0; width: 100%; }
  .md-topo select { max-width: 100%; flex: 1 1 160px; }
}