:root{
  --tinta:#12212b; --tinta2:#5b7383; --papel:#f4f6f7; --branco:#fff;
  --linha:#d8e0e5; --acento:#0e7c7b; --acento-claro:#0e7c7b18;
  --alerta:#a0611c; --alerta-claro:#a0611c1a; --erro:#a32d2d;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
}
a{color:var(--acento)}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--acento); outline-offset:2px}

.topo{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 20px; background:var(--branco); border-bottom:1px solid var(--linha);
  position:sticky; top:0; z-index:10;
}
.marca{font-size:15px; text-decoration:none; color:var(--tinta)}
.marca b{color:var(--acento)}
.topo nav{display:flex; align-items:center; gap:16px; font-size:14px}
.topo .quem{color:var(--tinta2)}
.topo form{margin:0}
button.link{background:none; border:0; color:var(--acento); cursor:pointer; padding:0}

main{padding:20px; max-width:1400px; margin:0 auto}

.aviso{
  margin:0; padding:12px 20px; background:var(--alerta-claro);
  border-bottom:1px solid var(--alerta); color:var(--alerta);
}
.erro{color:var(--erro); margin:0 0 12px}

.entrada{max-width:340px; margin:12vh auto; background:var(--branco);
  padding:28px; border:1px solid var(--linha); border-radius:6px}
.entrada h1{font-size:20px; margin:0 0 20px; font-weight:600}
.entrada h1 b{color:var(--acento)}
.entrada label{display:block; margin-bottom:14px; font-size:13px; color:var(--tinta2)}
.entrada input{display:block; width:100%; margin-top:4px; padding:9px 10px;
  border:1px solid var(--linha); border-radius:4px; background:var(--branco); color:var(--tinta)}
.entrada button{width:100%; padding:10px; background:var(--acento); color:#fff;
  border:0; border-radius:4px; cursor:pointer; font-weight:500}

.filtros{display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:var(--branco); border:1px solid var(--linha); border-radius:6px; padding:12px}
.filtros input[type=search],.filtros input[type=text],.filtros select{
  padding:8px 10px; border:1px solid var(--linha); border-radius:4px;
  background:var(--branco); color:var(--tinta)}
.filtros .busca{flex:1 1 260px}
.filtro-uf{border:1px solid var(--linha); border-radius:4px; background:var(--branco)}
.filtro-uf summary{padding:8px 10px; cursor:pointer; list-style:none; font-size:14px}
.filtro-uf summary::-webkit-details-marker{display:none}
.filtro-uf[open]{border-color:var(--acento)}
.filtro-uf .fichas{padding:2px 10px 10px}
.fichas{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.fichas .rotulo{font-size:12px; color:var(--tinta2); text-transform:uppercase; letter-spacing:.06em}
.ficha{display:inline-flex; align-items:center; gap:5px; font-size:13px;
  border:1px solid var(--linha); border-radius:20px; padding:4px 11px; cursor:pointer; background:var(--branco)}
.ficha:has(input:checked){background:var(--acento-claro); border-color:var(--acento); color:var(--acento)}
.ficha input{margin:0}
.barra{flex:1 1 100%; display:flex; align-items:center; gap:12px;
  border-top:1px solid var(--linha); padding-top:10px; color:var(--tinta2); font-size:14px}
.barra #contador{color:var(--tinta); font-size:16px}
button.baixar{margin-left:auto; background:none; border:1px solid var(--linha);
  border-radius:4px; padding:6px 12px; color:var(--acento); cursor:pointer}
.htmx-indicator{opacity:0; transition:opacity .2s}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

#resultados{margin-top:14px; background:var(--branco);
  border:1px solid var(--linha); border-radius:6px; overflow:hidden}
.lead{display:grid; gap:12px; align-items:center; padding:10px 14px;
  border-bottom:1px solid var(--linha); cursor:pointer;
  grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) minmax(0,1.2fr) 210px minmax(0,1.6fr) 130px}
.lead:last-child{border-bottom:0}
.lead:hover{background:var(--acento-claro)}
.lead .nome b{display:block; font-weight:600}
.lead .razao{font-size:12px; color:var(--tinta2)}
.lead .onde,.lead .decisor{color:var(--tinta2); font-size:14px}
.lead .contato,.lead .email{font-size:13px; display:flex; gap:8px; flex-wrap:wrap}
.lead .email a{overflow:hidden; text-overflow:ellipsis}
.zap{color:#128c7e; font-weight:500}
.inerte{color:var(--tinta2); pointer-events:none}
.marcas{display:flex; gap:6px; justify-content:flex-end}
.faixa{font-weight:600; font-size:12px; padding:2px 7px; border-radius:3px; color:#fff}
.fA{background:#0e7c7b} .fB{background:#3f8ea0} .fC{background:#8199a5} .fD{background:#b0bcc3}
.status{font-size:12px; padding:2px 8px; border-radius:12px; border:1px solid var(--linha); color:var(--tinta2)}
.s-contatado{border-color:var(--alerta); color:var(--alerta)}
.s-cliente{border-color:var(--acento); color:var(--acento); background:var(--acento-claro)}
.s-sem_interesse{opacity:.6}
.vazio{padding:36px; text-align:center; color:var(--tinta2)}
.mais{display:block; width:100%; padding:12px; border:0; border-top:1px solid var(--linha);
  background:var(--branco); color:var(--acento); cursor:pointer; font-weight:500}

@media (max-width:900px){
  .lead{grid-template-columns:1fr 1fr; gap:6px}
  .lead .nome,.lead .contato{grid-column:1 / -1}
}

.painel-fundo{position:fixed; inset:0; background:#12212b55; z-index:20}
.painel{position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); z-index:21;
  background:var(--branco); border-left:1px solid var(--linha);
  padding:22px 24px; overflow-y:auto}
.painel h2{margin:0 0 2px; font-size:19px}
.painel .razao{margin:0 0 2px; color:var(--tinta2); font-size:13px}
.painel .cnpj{margin:0 0 16px; color:var(--tinta2); font-size:13px}
.fechar{position:absolute; top:12px; right:14px; background:none; border:0;
  font-size:24px; line-height:1; color:var(--tinta2); cursor:pointer}
.acoes{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.botao{display:inline-block; padding:7px 12px; border:1px solid var(--linha);
  border-radius:4px; text-decoration:none; font-size:13px; color:var(--tinta)}
.botao.zap{border-color:#128c7e; color:#128c7e}
.ficha-dados{display:grid; grid-template-columns:auto 1fr; gap:8px 16px;
  margin:0 0 18px; font-size:13px}
.ficha-dados dt{color:var(--tinta2)}
.ficha-dados dt small{font-weight:400; font-style:italic}
.ficha-dados dd{margin:0}
.status-form{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:16px}
.status-form .ficha{border:1px solid var(--linha); background:var(--branco); cursor:pointer}
.status-form .ficha.atual{background:var(--acento); border-color:var(--acento); color:#fff}
.nota-form{display:flex; gap:8px; margin-bottom:14px}
.nota-form textarea{flex:1; padding:8px; border:1px solid var(--linha);
  border-radius:4px; resize:vertical; font:inherit; background:var(--branco); color:var(--tinta)}
.nota-form button{padding:8px 14px; border:0; border-radius:4px;
  background:var(--acento); color:#fff; cursor:pointer; align-self:flex-start}
.notas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.notas li{font-size:13px; border-left:2px solid var(--linha); padding-left:10px}
.notas .quem{display:block; color:var(--tinta2); font-size:12px; margin-bottom:2px}
.notas .vazia{color:var(--tinta2); border-left-color:transparent; font-style:italic}
.admin{max-width:660px; margin:0 auto; background:var(--branco);
  border:1px solid var(--linha); border-radius:6px; padding:26px}
.admin h1{font-size:20px; margin:0 0 12px}
.admin h2{font-size:14px; margin:24px 0 8px; color:var(--tinta2);
  text-transform:uppercase; letter-spacing:.06em}
.admin code{background:var(--papel); padding:1px 5px; border-radius:3px; font-size:13px}
.admin form{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:18px 0}
.admin form button{padding:9px 16px; border:0; border-radius:4px;
  background:var(--acento); color:#fff; cursor:pointer}
.ok{background:var(--acento-claro); border-left:3px solid var(--acento);
  padding:12px 14px; margin:0 0 14px; color:var(--acento)}
.recusado{background:#a32d2d14; border-left:3px solid var(--erro);
  padding:12px 14px; margin:0 0 14px}
.recusado ul{margin:8px 0 0; padding-left:20px}
.conferencias{margin:0; padding-left:22px; color:var(--tinta2); font-size:14px}
.conferencias li{margin-bottom:4px}
.rodape{margin-top:20px; font-size:13px; color:var(--tinta2)}