/* ============================================================
   Painel Pesquisa Vera-MT — instrumento de apuração.
   Uma cor de acento (âmbar). Verde e vermelho só significam dado.
   ============================================================ */

:root{
  --bg:#0c1116;          /* fundo da página */
  --surf:#131a22;        /* cartões e tabelas */
  --surf-2:#18212b;      /* cabeçalho de tabela, faixas */
  --line:#232e3a;        /* divisórias */
  --line-soft:#1b242e;
  --ink:#e8eef4;         /* texto principal */
  --ink-2:#93a4b5;       /* texto secundário */
  --ink-3:#66788a;       /* texto terciário / hints */

  --acc:#d9a441;         /* âmbar: ação, foco, seleção */
  --acc-ink:#1a1206;     /* texto sobre âmbar */
  --acc-dim:#3a2e14;

  --ok:#4ab86a;          /* concluiu */
  --warn:#d9a441;        /* aguardando */
  --bad:#d4645c;         /* recusou / erro */

  --r:10px;
  --gut:22px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.5;
  background:var(--bg);color:var(--ink);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* Números são o conteúdo desta interface: sempre tabulares. */
.n,td.num,th.num,.kpi-n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- topo ---------- */
.top{
  display:flex;align-items:center;gap:var(--gut);flex-wrap:wrap;
  padding:0 var(--gut);height:56px;
  background:var(--surf);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.brand{font-weight:650;letter-spacing:-.01em;font-size:15px;white-space:nowrap}
.brand span{color:var(--acc);font-weight:500}
nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto;align-items:center}
nav a{
  color:var(--ink-2);text-decoration:none;padding:7px 12px;border-radius:8px;
  font-weight:500;font-size:14px;white-space:nowrap;
}
nav a:hover{background:var(--surf-2);color:var(--ink)}
nav a.on{color:var(--ink);background:var(--surf-2);box-shadow:inset 0 -2px 0 var(--acc)}
nav a.sair{color:var(--ink-3);margin-left:8px}
nav a.sair:hover{color:var(--bad);background:transparent}

main{max-width:1180px;margin:0 auto;padding:26px var(--gut) 60px}

/* ---------- títulos ---------- */
h1{font-size:21px;font-weight:650;letter-spacing:-.015em;margin:0 0 3px}
h2{font-size:14px;font-weight:600;margin:32px 0 12px;color:var(--ink-2)}
h2:first-of-type{margin-top:26px}
.sub{color:var(--ink-3);margin:0 0 22px;font-size:14px}
.hint{color:var(--ink-3);font-size:13px;margin:8px 0 0}
p.hint{max-width:74ch}
code{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:12.5px;
  background:#0f1821;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink-2)}
a{color:var(--acc)}

/* ---------- KPIs ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.card{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;min-width:0;
}
.card .n{font-size:27px;font-weight:650;letter-spacing:-.02em;line-height:1.15}
.card .l{color:var(--ink-3);font-size:12.5px;margin-top:3px}
/* cor no KPI só quando o número carrega um juízo */
.card.azul .n{color:var(--ink)}
.card.verde .n{color:var(--ok)}
.card.amar .n{color:var(--warn)}
.card.destaque{border-color:var(--acc-dim);background:linear-gradient(var(--surf),var(--surf)) padding-box}

/* ---------- tabelas ---------- */
.tbl-wrap{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
.tbl-wrap>table{border:0;border-radius:0;background:transparent}
.tbl-scroll{max-height:560px;overflow:auto}
table{
  width:100%;border-collapse:collapse;
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
th,td{padding:8px 14px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:14px}
th{
  background:var(--surf-2);color:var(--ink-2);font-weight:600;
  font-size:12.5px;white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
tbody tr:last-child td,tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#16202a}
td.num,th.num{text-align:right}
td.tel{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.vazio td{color:var(--ink-3);text-align:center;padding:34px 14px}

/* linha de bairro clicável */
tr.sel td{background:var(--acc-dim)}
a.row-link{color:inherit;text-decoration:none;display:block}
a.row-link:hover{color:var(--acc)}

/* ---------- barras ---------- */
.barwrap{background:#0a1017;border-radius:4px;overflow:hidden;height:7px}
.bar{height:7px;background:var(--acc);border-radius:4px;min-width:2px;display:block}
.bar.ok{background:var(--ok)} .bar.bad{background:var(--bad)}

/* ---------- etiquetas de situação ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--ink-2);white-space:nowrap;
}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:none}
.tag.pend::before{background:var(--ink-3)}
.tag.env::before{background:var(--warn)}
.tag.fim::before{background:var(--ok)}

/* ---------- formulários ---------- */
input,select,button,.btn{
  font:inherit;color:var(--ink);background:#0f1821;
  border:1px solid #2a3846;border-radius:8px;padding:8px 11px;
}
input::placeholder{color:var(--ink-3)}
input:focus-visible,select:focus-visible,button:focus-visible,.btn:focus-visible,a:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;
}
select{cursor:pointer}
button,.btn{
  background:var(--acc);border-color:var(--acc);color:var(--acc-ink);
  cursor:pointer;font-weight:600;text-decoration:none;display:inline-block;white-space:nowrap;
}
/* o atributo hidden tem de vencer o display acima */
button[hidden],.btn[hidden]{display:none}
button:hover,.btn:hover{background:#e6b452;border-color:#e6b452}
button.sec,.btn.sec{background:#1b2531;border-color:#2a3846;color:var(--ink)}
button.sec:hover,.btn.sec:hover{background:#22303e;border-color:#35485c}
button:disabled{opacity:.45;cursor:not-allowed}
button:disabled:hover{background:var(--acc);border-color:var(--acc)}
form.linha{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:0 0 16px}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2)}

/* input de arquivo: o botão cinza do navegador destoa de tudo */
input[type=file]{padding:0;border:0;background:transparent;color:var(--ink-2);font-size:13.5px;max-width:100%}
input[type=file]::file-selector-button{
  font:inherit;font-weight:600;cursor:pointer;margin-right:10px;
  background:#1b2531;color:var(--ink);border:1px solid #2a3846;
  border-radius:8px;padding:8px 13px;
}
input[type=file]::file-selector-button:hover{background:#22303e;border-color:#35485c}

/* ---------- mensagens ---------- */
.msg{padding:11px 15px;border-radius:var(--r);margin:0 0 18px;font-size:14px;border:1px solid}
.msg.ok{background:#11241a;border-color:#245c37;color:#8ddba6}
.msg.err{background:#241413;border-color:#5f2b27;color:#e79b95}

/* ---------- faixa de importação (recolhível) ---------- */
.painel{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);margin:0 0 22px;
}
.painel>summary{
  cursor:pointer;padding:12px 16px;list-style:none;
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:550;color:var(--ink-2);
}
.painel>summary::-webkit-details-marker{display:none}
.painel>summary::after{content:"+";margin-left:auto;color:var(--ink-3);font-size:16px;line-height:1}
.painel[open]>summary::after{content:"−"}
.painel>summary:hover{color:var(--ink)}
.painel[open]>summary{border-bottom:1px solid var(--line)}
.painel .corpo{padding:16px}
.painel .corpo form.linha{margin-bottom:0}

/* ---------- barra de ferramentas da tabela ---------- */
.ferramentas{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:11px 14px;background:var(--surf-2);border-bottom:1px solid var(--line);
}
.ferramentas form{display:flex;gap:10px;align-items:center;margin:0;flex-wrap:wrap}
.ferramentas input[type=search]{min-width:230px}
.ferramentas select{min-width:160px}
.ferramentas .conta{margin-left:auto;color:var(--ink-3);font-size:13px;white-space:nowrap}

/* ---------- seleção de contatos ---------- */
.col-check{width:38px;padding-right:0;text-align:center}
input[type=checkbox]{
  appearance:none;width:16px;height:16px;padding:0;margin:0;vertical-align:middle;
  border:1px solid #3a4c60;border-radius:4px;background:#0f1821;cursor:pointer;position:relative;
}
input[type=checkbox]:hover{border-color:var(--acc)}
input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid var(--acc-ink);border-width:0 2px 2px 0;transform:rotate(45deg);
}
input[type=checkbox]:indeterminate{background:var(--acc);border-color:var(--acc)}
input[type=checkbox]:indeterminate::after{
  content:"";position:absolute;left:3px;top:6px;width:8px;height:2px;background:var(--acc-ink);
}
input[type=checkbox]:disabled{opacity:.35;cursor:not-allowed}

/* barra que aparece quando há seleção */
.barra-selecao[hidden]{display:none}
.barra-selecao{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:var(--acc-dim);
  border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--ink);
}
.barra-selecao b{font-size:15px}
.barra-selecao button{padding:6px 12px;font-size:13px}
.barra-selecao .detalhe-sel{color:var(--ink-2);font-size:12.5px}
.barra-selecao .detalhe-sel:not(:empty){margin-left:2px}
.barra-selecao #limpar-sel{margin-left:auto}
.barra-selecao.excedeu{background:#2b1414;color:#e79b95}

/* ---------- lápis de edição ---------- */
.col-acao{width:42px;text-align:right;padding-left:0}
.lapis{
  background:transparent;border:1px solid transparent;border-radius:7px;
  color:var(--ink-3);cursor:pointer;font-size:14px;line-height:1;
  padding:5px 8px;
}
tr:hover .lapis{color:var(--ink-2);border-color:var(--line)}
.lapis:hover{background:#1b2531;color:var(--acc);border-color:#35485c}

/* telefone fixo: não recebe WhatsApp */
.marca-fixo{
  display:inline-block;margin-left:7px;padding:1px 6px;border-radius:4px;
  background:#2b2417;border:1px solid #4a3d1e;color:var(--warn);
  font-size:11px;font-variant-numeric:normal;vertical-align:middle;
}

/* card que leva a um filtro */
a.card-link{text-decoration:none;color:inherit;display:block}
a.card-link:hover{border-color:#35485c;background:#16202a}
a.card-link .n{color:var(--warn)}

/* ---------- modal ---------- */
.modal[hidden]{display:none}
.modal{
  position:fixed;inset:0;z-index:60;
  background:rgba(6,10,14,.72);
  display:flex;align-items:flex-start;justify-content:center;
  padding:10vh 20px 20px;overflow:auto;
}
.modal-caixa{
  background:var(--surf);border:1px solid var(--line);border-radius:12px;
  padding:22px;width:100%;max-width:420px;
}
.modal-caixa h2{font-size:17px;color:var(--ink);margin-top:0}
.modal-acoes{display:flex;gap:10px;justify-content:flex-end}
.modal-acoes button{min-width:96px}

/* ---------- abas (tela de disparo) ---------- */
.abas{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.abas-barra{display:flex;gap:0;background:var(--surf-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.aba{
  background:transparent;border:0;border-radius:0;color:var(--ink-2);
  padding:11px 16px;font-size:13.5px;font-weight:550;cursor:pointer;
  box-shadow:inset 0 -2px 0 transparent;
}
.aba:hover{color:var(--ink);background:#1b2431}
.aba.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--acc);background:transparent}
.aba-painel{padding:18px}
.aba-painel form.linha{margin-bottom:0}
textarea{
  font:inherit;font-variant-numeric:tabular-nums;color:var(--ink);background:#0f1821;
  border:1px solid #2a3846;border-radius:8px;padding:9px 11px;resize:vertical;
}
textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- paginação ---------- */
.pag{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:11px 14px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13px;
}
.pag .btn,.pag .btn.sec{padding:6px 11px;font-size:13px}
.pag .meio{margin:0 auto;color:var(--ink-2)}
.pag .desab{opacity:.35;pointer-events:none}

/* ---------- divisão duas colunas ---------- */
.split{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}

/* ---------- telas estreitas ---------- */
@media(max-width:620px){
  :root{--gut:14px}
  .top{height:auto;padding:10px var(--gut);gap:8px}
  nav{margin-left:0;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  nav a{padding:6px 10px;font-size:13.5px}
  nav a.sair{margin-left:0}
  main{padding:18px var(--gut) 44px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{padding:12px 13px}
  .card .n{font-size:22px}
  /* a tabela rola dentro do próprio cartão, não empurra a página */
  .tbl-scroll{overflow-x:auto}
  .split .tbl-scroll table{min-width:0}
  /* Bairro sai da lista: a coluna da esquerda já serve para isso */
  .esconde-mob{display:none}
  th,td{padding:8px 10px;font-size:13.5px}
  .ferramentas{padding:10px}
  .ferramentas form{width:100%}
  .ferramentas input[type=search],.ferramentas select{flex:1 1 100%;min-width:0}
  .ferramentas .conta{margin-left:0;width:100%}
  .pag{padding:10px;gap:6px}
  .pag .meio{order:3;width:100%;text-align:center;margin:4px 0 0}
  .col-check{width:32px}
  .barra-selecao{padding:10px}
  .barra-selecao #btn-disparar{margin-left:0;width:100%}
  .abas-barra{overflow-x:auto}
  .aba{padding:10px 13px;white-space:nowrap}
  .aba-painel{padding:14px}
}

/* ---------- login ---------- */
.login-wrap{max-width:340px;margin:14vh auto 0;padding:0 20px}
.login-wrap h1{font-size:20px}
.login-wrap .sub{margin-bottom:26px}
.login-wrap form{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.login-wrap input{width:100%}

/* ---------- acessibilidade ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}