/* ============================================================
   Radar Local — design system
   Fundo gradiente indigo→roxo→azul, app branco 20px, Nunito.
   Espaçamentos em múltiplos de 4. Sombras em 3 níveis.
   ============================================================ */
:root {
  --azul: #4b5cfa; --azul-escuro: #3a49e0; --azul-claro: #b9c4fd; --indigo-claro: #eef0ff;
  --verde: #22c55e; --laranja: #f97316; --rosa: #e11d48; --vinho: #881337; --cinza: #9ca3af;
  --texto: #1e2340; --texto2: #7c85a3; --texto3: #b3bad2;
  --borda: #e7eaf5; --fundo-card: #f6f7fc; --fundo-area: #f2f4fb;
  --verde-suave: #e7f8ee; --verde-texto: #16a34a;
  --laranja-suave: #fff0e1; --laranja-texto: #e8720c;
  --rosa-suave: #ffe9ee; --rosa-texto: #db2757;
  --ambar-suave: #fef7e0; --ambar-texto: #b45309;
  --sombra-1: 0 2px 6px rgba(20, 25, 80, .08);
  --sombra-2: 0 6px 18px rgba(20, 25, 80, .15);
  --sombra-3: 0 20px 60px rgba(20, 25, 80, .35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(135deg, #4b5cfa 0%, #7b5cf5 45%, #58c7f0 100%);
  padding: 16px; overflow: hidden; color: var(--texto);
}
#app {
  height: 100%; background: #fff; border-radius: 20px; overflow: hidden;
  display: flex; box-shadow: var(--sombra-3);
}

button { font-family: inherit; }
:focus-visible { outline: 3px solid #4b5cfa66; outline-offset: 2px; border-radius: 8px; }

/* scrollbar customizada */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d9ddef; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c3c9e6; }

/* ---------- Painel esquerdo ---------- */
#painel {
  width: 424px; min-width: 424px; display: flex; flex-direction: column;
  overflow-y: auto; border-right: 1px solid var(--borda);
}
.secao { padding: 20px 24px; border-bottom: 1px solid var(--borda); }
.secao.compacta { padding: 16px 24px; }

.cabecalho { display: flex; align-items: center; gap: 12px; }
.cabecalho .logo {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--azul), #7b5cf5);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: 0 6px 14px rgba(75, 92, 250, .35);
}
.cabecalho h1 { font-size: 19px; font-weight: 900; letter-spacing: -.3px; }
.cabecalho .sub { font-size: 12px; color: var(--texto2); font-weight: 600; }

/* indicador discreto de scan rodando */
#ind-rodando {
  display: none; margin-left: auto; align-items: center; gap: 6px;
  background: var(--indigo-claro); border: 0; border-radius: 999px; padding: 6px 12px;
  font-size: 11.5px; font-weight: 800; color: var(--azul-escuro); cursor: pointer;
  transition: background .15s, transform .15s; white-space: nowrap;
}
#ind-rodando:hover { background: #dfe3fb; transform: translateY(-1px); }
#ind-rodando .ponto-pulso {
  width: 8px; height: 8px; border-radius: 50%; background: var(--azul);
  animation: pulso 1.4s ease-in-out infinite;
}
@keyframes pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* ---------- Navegação (segmented control) ---------- */
#nav {
  display: flex; gap: 4px; background: var(--fundo-card); border: 1.5px solid var(--borda);
  border-radius: 12px; padding: 4px; margin: 16px 24px;
}
#nav button {
  flex: 1; padding: 8px 4px; border: 0; border-radius: 9px; background: transparent;
  font-size: 12.5px; font-weight: 800; color: var(--texto2); cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
#nav button:hover { color: var(--texto); }
#nav button.ativo { background: #fff; color: var(--azul); box-shadow: var(--sombra-1); }

/* ---------- Tipografia utilitária ---------- */
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--texto2); margin-bottom: 12px; font-weight: 800; }
.rotulo-mini { font-size: 12.5px; color: var(--texto2); font-weight: 700; margin-bottom: 8px; }

/* ---------- Formulário ---------- */
label { display: block; font-size: 12.5px; color: var(--texto2); font-weight: 700; margin: 12px 0 4px; }
input, select {
  width: 100%; padding: 10px 12px; background: var(--fundo-card); border: 1.5px solid var(--borda);
  border-radius: 10px; color: var(--texto); font-size: 13.5px; font-family: inherit; font-weight: 600;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder { color: var(--texto3); font-weight: 500; }
input:focus, select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px #4b5cfa22; background: #fff; }
.linha2 { display: flex; gap: 12px; }
.linha2 > div { flex: 1; }

button.principal {
  width: 100%; margin-top: 16px; padding: 12px; background: var(--azul); color: #fff; border: 0;
  border-radius: 12px; font-size: 14.5px; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 18px rgba(75, 92, 250, .35); transition: transform .15s, background .15s, box-shadow .15s;
}
button.principal:hover { background: var(--azul-escuro); transform: translateY(-1px); }
button.principal:active { transform: translateY(0); }
button.principal:disabled { background: #b9c0e8; box-shadow: none; cursor: not-allowed; transform: none; }

button.secundario {
  padding: 8px 12px; background: #fff; color: var(--texto); border: 1.5px solid var(--borda);
  border-radius: 10px; font-size: 12.5px; font-weight: 800; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, color .15s;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
button.secundario:hover { border-color: var(--azul); color: var(--azul); background: var(--indigo-claro); transform: translateY(-1px); }
button.secundario.perigo:hover { border-color: var(--rosa); color: var(--rosa-texto); background: var(--rosa-suave); }

/* formulário colapsável */
#form-scan .form-cabeca {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  background: none; border: 0; width: 100%; padding: 0; text-align: left;
}
#form-scan .form-cabeca h2 { margin: 0; }
#form-scan .seta {
  font-size: 12px; color: var(--texto2); transition: transform .25s;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--fundo-card);
}
#form-scan.aberto .seta { transform: rotate(180deg); }
#form-scan .form-corpo {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease;
}
#form-scan.aberto .form-corpo { grid-template-rows: 1fr; }
#form-scan .form-corpo > div { overflow: hidden; }

#erro-box {
  display: none; margin-top: 12px; background: var(--rosa-suave); border: 1.5px solid #f5c2cf;
  color: var(--rosa-texto); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 700;
}

/* ---------- Progresso ---------- */
#progresso { display: none; margin-top: 16px; background: var(--indigo-claro); border-radius: 12px; padding: 12px 16px; }
#progresso .topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.spinner {
  width: 16px; height: 16px; border: 2.5px solid #c6cdfa; border-top-color: var(--azul);
  border-radius: 50%; animation: girar .8s linear infinite; flex-shrink: 0;
}
@keyframes girar { to { transform: rotate(360deg); } }
#prog-texto { font-size: 12.5px; font-weight: 800; color: var(--azul-escuro); flex: 1; }
#prog-eta { font-size: 11.5px; font-weight: 700; color: var(--texto2); white-space: nowrap; }
#progresso .barra-fundo { height: 8px; background: #dfe3fb; border-radius: 4px; overflow: hidden; }
#progresso .barra { height: 100%; width: 0%; background: var(--azul); border-radius: 4px; transition: width .4s; }
#btn-cancelar {
  margin-top: 8px; width: 100%; padding: 8px; background: #fff; border: 1.5px solid #f5c2cf;
  color: var(--rosa-texto); border-radius: 10px; font-size: 12.5px; font-weight: 800; cursor: pointer;
  transition: background .15s, transform .15s;
}
#btn-cancelar:hover { background: var(--rosa-suave); transform: translateY(-1px); }
#btn-cancelar:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* aviso de status (cancelado / falhou) */
.aviso-status {
  display: none; margin-top: 12px; border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; font-weight: 700;
}
.aviso-status.cancelado { background: var(--ambar-suave); color: var(--ambar-texto); border: 1.5px solid #f3dfa8; }
.aviso-status.falhou { background: var(--rosa-suave); color: var(--rosa-texto); border: 1.5px solid #f5c2cf; }
.aviso-status.na-fila { background: var(--indigo-claro); color: var(--azul-escuro); border: 1.5px solid var(--azul-claro); font-weight: 600; }

/* ---------- Card do alvo ---------- */
.chip {
  display: inline-block; background: var(--azul); color: #fff; padding: 6px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 800; box-shadow: 0 4px 10px rgba(75, 92, 250, .3); margin-bottom: 16px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#card-alvo { background: var(--indigo-claro); border-radius: 16px; padding: 16px; border: 2px solid transparent; transition: border-color .2s, background .2s; }
#card-alvo.modo-concorrente { background: var(--laranja-suave); border-color: #f8cf9f; }
#tag-concorrente {
  display: none; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px;
  color: var(--laranja-texto); background: #fff; border-radius: 999px; padding: 3px 10px; margin-bottom: 8px;
}
#card-alvo.modo-concorrente #tag-concorrente { display: inline-block; }
#card-alvo .topo { display: flex; align-items: flex-start; gap: 12px; }
.badge-rank { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 900; white-space: nowrap; }
.badge-rank.bom, .badge-pos.bom { background: var(--verde-suave); color: var(--verde-texto); }
.badge-rank.medio, .badge-pos.medio { background: var(--laranja-suave); color: var(--laranja-texto); }
.badge-rank.ruim, .badge-pos.ruim { background: var(--rosa-suave); color: var(--rosa-texto); }
#alvo-nome { font-weight: 900; font-size: 16px; line-height: 1.25; }
.vis-linha { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.vis-linha .rotulo { font-size: 13px; color: var(--texto2); font-weight: 700; }
.vis-linha .valor { font-size: 22px; font-weight: 900; }
.vis-barra-fundo { height: 10px; background: #dde1f8; border-radius: 5px; overflow: hidden; margin-top: 8px; }
.vis-barra { height: 100%; width: 0%; border-radius: 5px; transition: width .5s, background .5s; }

#stats { display: flex; gap: 8px; margin-top: 16px; }
.stat { flex: 1; background: var(--fundo-card); border: 1.5px solid var(--borda); border-radius: 12px; padding: 12px 8px; text-align: center; }
.stat .num { font-size: 18px; font-weight: 900; }
.stat .desc { font-size: 10.5px; color: var(--texto2); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

/* ações do scan */
#acoes-scan { display: none; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
#acoes-scan button { flex: 1; justify-content: center; }

/* ---------- Concorrentes ---------- */
#concorrentes { list-style: none; }
#concorrentes li {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 12px;
  margin-bottom: 4px; cursor: pointer; border: 2px solid transparent;
  transition: background .15s, border-color .15s;
}
#concorrentes li:hover { background: var(--fundo-card); }
#concorrentes li.alvo { background: var(--indigo-claro); }
#concorrentes li.selecionado { background: var(--laranja-suave); border-color: #f8cf9f; }
.badge-pos { min-width: 56px; text-align: center; padding: 4px 0; border-radius: 999px; font-size: 11.5px; font-weight: 900; flex-shrink: 0; }
#concorrentes .info { flex: 1; min-width: 0; }
#concorrentes .nome { font-weight: 800; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estrelas { font-size: 12px; color: #f5b60d; letter-spacing: 1px; }
.estrelas .num-nota { color: var(--texto2); font-weight: 700; letter-spacing: 0; }
#concorrentes .detalhe { font-size: 11px; color: var(--texto2); font-weight: 600; margin-top: 2px; }
.dica-overlay { font-size: 11px; color: var(--texto3); font-weight: 600; margin-bottom: 8px; }
.vazio { font-size: 12.5px; color: var(--texto2); font-weight: 600; padding: 8px 0; }

/* ---------- Área principal (direita) ---------- */
#principal { flex: 1; position: relative; min-width: 0; background: var(--fundo-area); }
#mapa-wrap { position: absolute; inset: 0; }
#mapa { position: absolute; inset: 0; }

#pill-data {
  display: none; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: #fff; border-radius: 999px; padding: 8px 20px; font-size: 13px; font-weight: 800;
  box-shadow: var(--sombra-2); white-space: nowrap; max-width: calc(100% - 120px);
  overflow: hidden; text-overflow: ellipsis;
}
#chip-overlay {
  display: none; position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: var(--laranja); color: #fff; border: 0; border-radius: 999px; padding: 8px 20px;
  font-size: 12.5px; font-weight: 800; font-family: inherit; cursor: pointer;
  box-shadow: 0 6px 18px rgba(249, 115, 22, .4); white-space: nowrap; max-width: calc(100% - 120px);
  overflow: hidden; text-overflow: ellipsis; transition: transform .15s, background .15s;
}
#chip-overlay:hover { background: #ea6a0c; transform: translateX(-50%) translateY(-1px); }

#legenda, #legenda-delta {
  position: absolute; bottom: 28px; left: 16px; z-index: 5; background: #fff; border-radius: 14px;
  padding: 10px 16px; box-shadow: var(--sombra-2); font-size: 11.5px; font-weight: 700; color: var(--texto2);
  display: flex; gap: 12px; align-items: center;
}
#legenda .item, #legenda-delta .item { display: flex; align-items: center; gap: 5px; }
#legenda .bola, #legenda-delta .bola { width: 12px; height: 12px; border-radius: 50%; }

.pin {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 14px; font-family: 'Nunito', sans-serif;
  border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); cursor: pointer; transition: transform .15s;
}
.pin:hover { transform: scale(1.12); z-index: 10; }
.pin.p20 { font-size: 11px; }
.pin.delta { font-size: 12px; line-height: 1; flex-direction: column; gap: 0; }
.pin.delta .seta-delta { font-size: 10px; line-height: 1; }

.maplibregl-popup-content {
  background: #fff; color: var(--texto); border-radius: 14px; font-family: 'Nunito', sans-serif;
  padding: 16px; min-width: 248px; box-shadow: var(--sombra-2);
}
.popup-titulo { font-weight: 900; font-size: 13px; margin-bottom: 8px; }
.popup-lista { font-size: 12.5px; line-height: 1.8; font-weight: 600; }
.popup-lista .num { display: inline-block; width: 20px; color: var(--texto2); font-weight: 800; }
.popup-alvo { color: var(--azul); font-weight: 900; }
.popup-conc { color: var(--laranja-texto); font-weight: 900; }
.popup-lista .estrela { color: #f5b60d; }
.btn-top20 {
  margin-top: 8px; width: 100%; padding: 8px; background: var(--indigo-claro); border: 0;
  border-radius: 10px; color: var(--azul-escuro); font-size: 12px; font-weight: 800;
  font-family: inherit; cursor: pointer; transition: background .15s;
}
.btn-top20:hover { background: #dfe3fb; }

/* ---------- Dashboard (área direita) ---------- */
#vista-dashboard {
  display: none; position: absolute; inset: 0; overflow-y: auto; padding: 28px 32px; z-index: 20;
  background: linear-gradient(180deg, rgba(246, 247, 252, .96) 0%, rgba(238, 240, 255, .94) 100%);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
#vista-dashboard .titulo-area { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
#vista-dashboard .titulo-area h2 { font-size: 20px; font-weight: 900; color: var(--texto); text-transform: none; letter-spacing: -.3px; margin: 0; }
#vista-dashboard .titulo-area .sub { font-size: 12.5px; color: var(--texto2); font-weight: 600; }
#grade-negocios { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.card-negocio {
  background: #fff; border: 1.5px solid var(--borda); border-radius: 16px; padding: 20px;
  box-shadow: var(--sombra-1); transition: box-shadow .2s, transform .2s, border-color .2s;
  display: flex; flex-direction: column; gap: 12px;
}
.card-negocio:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); border-color: #d5daf3; }
.card-negocio .topo-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-negocio .nome-alvo { font-size: 15px; font-weight: 900; line-height: 1.3; }
.card-negocio .chip-kw {
  display: inline-block; background: var(--indigo-claro); color: var(--azul-escuro); padding: 3px 12px;
  border-radius: 999px; font-size: 11px; font-weight: 800; margin-top: 6px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-negocio .qtd-scans { font-size: 11px; color: var(--texto2); font-weight: 700; white-space: nowrap; }
.card-negocio .linha-vis { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.card-negocio .vis-grande { font-size: 34px; font-weight: 900; line-height: 1; }
.card-negocio .delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 900; border-radius: 999px; padding: 4px 10px; }
.card-negocio .delta.sobe { background: var(--verde-suave); color: var(--verde-texto); }
.card-negocio .delta.desce { background: var(--rosa-suave); color: var(--rosa-texto); }
.card-negocio .delta.neutro { background: var(--fundo-card); color: var(--texto2); }
.card-negocio .spark { width: 128px; height: 40px; flex-shrink: 0; }
.card-negocio .acoes { display: flex; gap: 8px; margin-top: 4px; }
.card-negocio .acoes button { flex: 1; justify-content: center; }

/* estado vazio */
#dash-vazio { display: none; text-align: center; padding: 64px 24px; }
#dash-vazio .emoji { font-size: 64px; margin-bottom: 16px; filter: drop-shadow(0 8px 16px rgba(75, 92, 250, .25)); }
#dash-vazio h3 { font-size: 20px; font-weight: 900; margin-bottom: 8px; }
#dash-vazio p { font-size: 13.5px; color: var(--texto2); font-weight: 600; max-width: 400px; margin: 0 auto 20px; line-height: 1.6; }
#dash-vazio button { width: auto; padding: 12px 32px; margin-top: 0; }

/* ---------- Comparar ---------- */
#sugestoes-pares { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.par-sugerido {
  background: var(--fundo-card); border: 1.5px solid var(--borda); border-radius: 10px; padding: 8px 12px;
  font-size: 12px; font-weight: 700; color: var(--texto); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s; width: 100%;
}
.par-sugerido:hover { border-color: var(--azul); background: var(--indigo-claro); }
.par-sugerido .sub-par { font-size: 10.5px; color: var(--texto2); font-weight: 600; margin-top: 2px; }

#aviso-grades {
  display: none; margin-top: 12px; background: var(--ambar-suave); border: 1.5px solid #f3dfa8;
  color: var(--ambar-texto); border-radius: 10px; padding: 10px 12px; font-size: 12px; font-weight: 700; line-height: 1.5;
}

/* barra dupla A vs B — 1 matiz, 2 tons (antes = claro, depois = cheio) */
#comp-resultado { display: none; }
.barra-ab { margin-top: 8px; }
.barra-ab .linha-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.barra-ab .tag-ab {
  width: 56px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto2); flex-shrink: 0; display: flex; align-items: center; gap: 5px;
}
.barra-ab .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.barra-ab .trilho { flex: 1; height: 16px; background: var(--fundo-card); border-radius: 8px; overflow: hidden; }
.barra-ab .preencher { height: 100%; border-radius: 8px; transition: width .5s; }
.barra-ab .val { width: 52px; font-size: 12.5px; font-weight: 900; color: var(--texto); text-align: right; flex-shrink: 0; }

#comp-resumo { display: flex; gap: 8px; margin-top: 16px; }
#comp-resumo .stat .num { font-size: 16px; }

#comp-maiores { list-style: none; margin-top: 8px; }
#comp-maiores li {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700;
}
#comp-maiores li:hover { background: var(--fundo-card); }
#comp-maiores .badge-var { min-width: 48px; text-align: center; padding: 3px 0; border-radius: 999px; font-size: 11px; font-weight: 900; flex-shrink: 0; }
#comp-maiores .badge-var.sobe { background: var(--verde-suave); color: var(--verde-texto); }
#comp-maiores .badge-var.desce { background: var(--rosa-suave); color: var(--rosa-texto); }
#comp-maiores .desc-var { color: var(--texto2); font-weight: 600; }

/* ---------- Drawer do ponto (top 20) ---------- */
#drawer-fundo {
  display: none; position: absolute; inset: 0; background: rgba(20, 25, 80, .2); z-index: 19;
  opacity: 0; transition: opacity .25s;
}
#drawer-fundo.visivel { opacity: 1; }
#drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 360px; max-width: 85%; z-index: 20;
  background: #fff; box-shadow: -12px 0 40px rgba(20, 25, 80, .2);
  transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column;
}
#drawer.aberto { transform: translateX(0); }
#drawer .drawer-cabeca {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--borda);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
#drawer .drawer-cabeca h3 { font-size: 15px; font-weight: 900; }
#drawer .drawer-cabeca .sub-drawer { font-size: 12px; color: var(--texto2); font-weight: 600; margin-top: 2px; }
#btn-fechar-drawer {
  background: var(--fundo-card); border: 0; width: 32px; height: 32px; border-radius: 10px;
  font-size: 14px; font-weight: 900; color: var(--texto2); cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s;
}
#btn-fechar-drawer:hover { background: var(--rosa-suave); color: var(--rosa-texto); }
#drawer-lista { flex: 1; overflow-y: auto; padding: 12px 16px; list-style: none; }
#drawer-lista li {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; margin-bottom: 2px;
}
#drawer-lista li.destaque { background: var(--indigo-claro); }
#drawer-lista li.destaque-conc { background: var(--laranja-suave); }
#drawer-lista .pos {
  min-width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 900; flex-shrink: 0;
}
#drawer-lista .info-r { flex: 1; min-width: 0; }
#drawer-lista .nome-r { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#drawer-lista .det-r { font-size: 11.5px; margin-top: 1px; }

/* ---------- Toasts ---------- */
#toasts {
  position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex;
  flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: var(--sombra-2);
  font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px;
  max-width: 380px; animation: toast-entra .25s ease; border-left: 4px solid var(--azul);
}
.toast.saindo { animation: toast-sai .25s ease forwards; }
.toast.sucesso { border-left-color: var(--verde); }
.toast.erro { border-left-color: var(--rosa); }
.toast .icone-toast { font-size: 16px; flex-shrink: 0; }
@keyframes toast-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-sai { to { opacity: 0; transform: translateX(24px); } }

/* ---------- Modal de confirmação ---------- */
#modal-fundo {
  display: none; position: fixed; inset: 0; background: rgba(20, 25, 80, .45); z-index: 90;
  align-items: center; justify-content: center; opacity: 0; transition: opacity .2s;
}
#modal-fundo.visivel { opacity: 1; }
#modal {
  background: #fff; border-radius: 20px; padding: 28px; width: 400px; max-width: calc(100vw - 48px);
  box-shadow: var(--sombra-3); transform: scale(.95); transition: transform .2s;
}
#modal-fundo.visivel #modal { transform: scale(1); }
#modal h3 { font-size: 17px; font-weight: 900; margin-bottom: 8px; }
#modal p { font-size: 13.5px; color: var(--texto2); font-weight: 600; line-height: 1.6; margin-bottom: 20px; }
#modal .botoes { display: flex; gap: 8px; justify-content: flex-end; }
#modal .botoes button { padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s, transform .15s; border: 0; }
#modal-cancelar { background: var(--fundo-card); color: var(--texto); }
#modal-cancelar:hover { background: var(--borda); }
#modal-confirmar { background: var(--azul); color: #fff; }
#modal-confirmar:hover { background: var(--azul-escuro); }
#modal-confirmar.perigo { background: var(--rosa); }
#modal-confirmar.perigo:hover { background: #c11041; }

/* ---------- Drawer do diagnóstico de perfil ---------- */
#diag-fundo {
  display: none; position: absolute; inset: 0; background: rgba(20, 25, 80, .2); z-index: 21;
  opacity: 0; transition: opacity .25s;
}
#diag-fundo.visivel { opacity: 1; }
#diag-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 424px; max-width: 92%; z-index: 22;
  background: #fff; box-shadow: -12px 0 40px rgba(20, 25, 80, .2);
  transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column;
}
#diag-drawer.aberto { transform: translateX(0); }
#diag-drawer .drawer-cabeca {
  padding: 20px 20px 16px; border-bottom: 1px solid var(--borda);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-shrink: 0;
}
#diag-drawer .drawer-cabeca > div { min-width: 0; }
#diag-drawer .drawer-cabeca h3 {
  font-size: 15px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#diag-drawer .drawer-cabeca .sub-drawer { font-size: 12px; color: var(--texto2); font-weight: 600; margin-top: 2px; }
#btn-fechar-diag {
  background: var(--fundo-card); border: 0; width: 32px; height: 32px; border-radius: 10px;
  font-size: 14px; font-weight: 900; color: var(--texto2); cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s;
}
#btn-fechar-diag:hover { background: var(--rosa-suave); color: var(--rosa-texto); }
#diag-corpo { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
#diag-skeleton .diag-etapa {
  margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--texto2); text-align: center;
}
#diag-score-card {
  display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px;
  background: var(--fundo-card); border: 2px solid var(--borda);
}
#diag-score-card.cuidado { background: var(--verde-suave); border-color: #b8ebcd; }
#diag-score-card.melhoravel { background: var(--laranja-suave); border-color: #f8cf9f; }
#diag-score-card.abandonado { background: var(--rosa-suave); border-color: #f5c2cf; }
.diag-score-num { font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -2px; flex-shrink: 0; }
#diag-score-card.cuidado .diag-score-num { color: var(--verde-texto); }
#diag-score-card.melhoravel .diag-score-num { color: var(--laranja-texto); }
#diag-score-card.abandonado .diag-score-num { color: var(--rosa-texto); }
.diag-score-info { min-width: 0; }
.diag-score-faixa { font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; }
#diag-score-card.cuidado .diag-score-faixa { color: var(--verde-texto); }
#diag-score-card.melhoravel .diag-score-faixa { color: var(--laranja-texto); }
#diag-score-card.abandonado .diag-score-faixa { color: var(--rosa-texto); }
.diag-score-desc { font-size: 11.5px; color: var(--texto2); font-weight: 600; margin-top: 4px; line-height: 1.35; }
.diag-aviso {
  margin-top: 12px; border-radius: 10px; padding: 10px 12px; font-size: 12px; font-weight: 600;
  background: var(--indigo-claro); color: var(--azul-escuro); border: 1.5px solid var(--azul-claro);
}
#diag-lista { list-style: none; margin: 16px 0 12px; }
#diag-lista li {
  display: flex; gap: 10px; padding: 12px; border-radius: 12px; margin-bottom: 6px;
  background: var(--fundo-card); border: 1.5px solid var(--borda);
}
#diag-lista li.critico { background: var(--rosa-suave); border-color: #f5c2cf; }
#diag-lista li.alerta { background: var(--ambar-suave); border-color: #f3dfa8; }
#diag-lista li.ok { background: var(--verde-suave); border-color: #b8ebcd; }
#diag-lista .icone { font-size: 15px; line-height: 1.3; flex-shrink: 0; }
#diag-lista .conteudo { min-width: 0; flex: 1; }
#diag-lista .rotulo-sinal { font-size: 12.5px; font-weight: 900; }
#diag-lista .valor-sinal { font-size: 12.5px; font-weight: 700; color: var(--texto); margin-top: 2px; }
#diag-lista .arg-sinal { font-size: 11.5px; font-weight: 600; color: var(--texto2); margin-top: 4px; line-height: 1.4; }
#diag-corpo #btn-copiar-diag, #diag-corpo #btn-refazer-diag { width: 100%; justify-content: center; margin-top: 8px; }
#diag-erro {
  background: var(--rosa-suave); color: var(--rosa-texto); border: 1.5px solid #f5c2cf;
  border-radius: 12px; padding: 14px; font-size: 12.5px; font-weight: 700;
}
.btn-diag-conc {
  background: #fff; border: 1.5px solid var(--borda); border-radius: 999px; cursor: pointer;
  font-size: 11px; font-weight: 800; color: var(--texto2); padding: 5px 10px; flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-diag-conc:hover { background: var(--indigo-claro); color: var(--azul-escuro); border-color: var(--azul-claro); }

/* ---------- Skeleton loading ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--fundo-card) 25%, #eceef8 50%, var(--fundo-card) 75%);
  background-size: 200% 100%; animation: brilho 1.4s ease infinite; border-radius: 10px;
}
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel-card { height: 176px; border-radius: 16px; }
.skel-linha { height: 14px; margin-bottom: 10px; }
.skel-linha.curta { width: 60%; }
.skel-bloco { height: 120px; margin-bottom: 12px; border-radius: 16px; }

/* ---------- Responsivo (1366×768) ---------- */
@media (max-width: 1440px) {
  #painel { width: 384px; min-width: 384px; }
  #vista-dashboard { padding: 20px 24px; }
  #grade-negocios { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
}