/* =========================================================
   Consulta de Leads — Revenda Vivo Fibra
   Identidade visual Vivo · sem dependências externas críticas
   ========================================================= */

/* Fonte Inter (opcional — o fallback system-ui cobre servidores sem internet) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ==================================================================
     BuscaLeads — tema claro (03/08/2026)
     ==================================================================
     Escolha do dono: "claro e limpo, tipo banco/ERP". Duas tentativas
     escuras antes desta nao agradaram, e a razao e boa -- este sistema e
     ferramenta de trabalho conferida ao lado de contrato e nota fiscal,
     onde papel branco e a referencia.

     A regra de cor continua a mesma: COR FORTE SO ONDE HA SIGNIFICADO.
     O azul e acao (botao, foco, link). Verde, ambar e vermelho ficam
     reservados para confianca e risco.

     O fundo nao e branco puro: e um cinza levissimo puxando para o azul do
     acento. Branco puro no fundo E no cartao apaga a separacao entre os
     dois; assim o cartao branco "levanta" sem precisar de sombra pesada.
     ================================================================== */

  --ground:     #f4f7fa;
  --superficie: #ffffff;
  --elevado:    #eef3f8;
  --linha:      #dde5ec;
  --linha-forte:#bccbd8;

  --texto:      #14202b;
  --texto-fraco:#5a6b7b;

  /* Azul sobrio: 6,5:1 sobre branco, passa em acessibilidade com folga. */
  --acento:      #1f5fa8;
  --acento-forte:#17497f;
  --acento-suave: rgba(31, 95, 168, 0.10);

  /* Tons de significado escolhidos para LER SOBRE BRANCO -- os do tema
     escuro eram claros demais e sumiriam aqui. */
  --confirmado:  #0d7a52;
  --atencao:     #a3620a;
  --risco:       #c02a3c;

  /* Apelidos: as ~250 regras antigas apontam para estes nomes. */
  --fundo:        var(--ground);
  --fundo-2:      var(--elevado);
  --superficie-2: var(--elevado);
  --borda:        var(--linha);
  --borda-forte:  var(--linha-forte);
  --acento-2:     var(--confirmado);
  --acento-hover: var(--acento-forte);
  --acento-esc:   var(--acento-forte);
  --vivo-roxo:      var(--acento);
  --vivo-roxo-hover:var(--acento-forte);
  --vivo-roxo-esc:  var(--acento-forte);
  --roxo-suave:     var(--acento-suave);
  --sucesso:       var(--confirmado);
  --sucesso-texto: #0a6142;
  --alerta:        var(--atencao);
  --alerta-texto:  #7d4b08;
  --erro:          var(--risco);
  --erro-texto:    #9c1f2e;

  --t-micro: 11px; --t-mini: 12px; --t-peq: 13px; --t-base: 15px;
  --t-med: 18px;   --t-gr: 22px;   --t-xg: 28px;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --raio: 3px;
  --raio-peq: 2px;
  /* Sombra discreta: no claro, sombra forte suja a tela. A borda faz o
     trabalho de separar; a sombra so da um leve descolamento. */
  --sombra: 0 1px 2px rgba(20, 32, 43, .06), 0 4px 12px rgba(20, 32, 43, .05);
  --gutter: max(16px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  min-height: 100vh;
}

[x-cloak] { display: none !important; }

kbd {
  font-family: inherit;
  font-size: 0.85em;
  padding: 1px 6px;
  border: 1px solid var(--borda);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--superficie);
}

/* Foco de teclado sempre visível */
:focus-visible {
  outline: 3px solid var(--vivo-roxo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Marca (CSS puro, sem imagem) ---------- */

.marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--vivo-roxo);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  user-select: none;
}

/* ---------- Botões ---------- */

.botao-primario {
  appearance: none;
  border: 0;
  border-radius: var(--raio);
  background: var(--vivo-roxo);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  padding: 0 26px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.botao-primario:hover { background: var(--vivo-roxo-hover); }
.botao-primario:active { background: var(--vivo-roxo-esc); }

.botao-largo {
  width: 100%;
  height: 48px;
  font-size: 16px;
}

.botao-fantasma {
  appearance: none;
  font: inherit;
  font-weight: 500;
  color: var(--vivo-roxo);
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 9px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.botao-fantasma:hover {
  background: var(--roxo-suave);
  border-color: var(--vivo-roxo);
}

/* ---------- Login ---------- */

.pagina-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.login-envelope { width: 100%; max-width: 420px; }

.login-cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 36px 32px 28px;
}

.login-marca {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.login-marca-texto h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.login-marca-texto p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--texto-fraco);
}

.login-form { display: grid; gap: 18px; }

.campo-grupo { display: grid; gap: 6px; }
.campo-grupo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}
.campo-grupo input {
  font: inherit;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo-grupo input:focus {
  outline: none;
  border-color: var(--vivo-roxo);
  box-shadow: 0 0 0 3px var(--roxo-suave);
}

.login-rodape {
  margin: 22px 0 0;
  font-size: 12px;
  color: var(--texto-fraco);
  text-align: center;
}

/* ---------- Topo (página de busca) ---------- */

.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topo-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marca-area {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.marca-area .marca { width: 40px; height: 40px; font-size: 14px; }

.marca-texto {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marca-texto small {
  font-weight: 500;
  font-size: 12px;
  color: var(--texto-fraco);
}

.topo-usuario {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.usuario-nome {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-fraco);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Painel de busca ---------- */

.conteudo {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.busca-painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 22px;
}

/* Abas PF | PJ (controle segmentado) */
.abas {
  display: inline-flex;
  gap: 4px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}
.aba {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-fraco);
  padding: 8px 18px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.aba:hover { color: var(--vivo-roxo); }
.aba-ativa,
.aba-ativa:hover {
  background: var(--vivo-roxo);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(124, 92, 255, 0.35);
}

/* Barra de busca grande */
.busca-linha {
  display: flex;
  gap: 10px;
}

.busca-campo {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  font: inherit;
  font-size: 16px;
  padding: 0 18px;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.busca-campo::placeholder { color: var(--texto-fraco); }
.busca-campo:focus {
  outline: none;
  border-color: var(--vivo-roxo);
  box-shadow: 0 0 0 3px var(--roxo-suave);
}

.busca-limite {
  flex: 0 0 auto;
  height: 52px;
  font: inherit;
  font-size: 14px;
  color: var(--texto-fraco);
  padding: 0 10px;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  cursor: pointer;
}
.busca-limite:focus {
  outline: none;
  border-color: var(--vivo-roxo);
  box-shadow: 0 0 0 3px var(--roxo-suave);
}

.busca-botao {
  flex: 0 0 auto;
  height: 52px;
  font-size: 16px;
}

/* Indicador de carregamento (HTMX adiciona .htmx-request enquanto busca) */
.indicador {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vivo-roxo);
}
.indicador.htmx-request { display: flex; opacity: 1; }

.spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--roxo-suave);
  border-top-color: var(--vivo-roxo);
  animation: girar 0.7s linear infinite;
}
@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ---------- Resultados ---------- */

.resultados-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 4px 2px 14px;
  font-size: 13px;
  color: var(--texto-fraco);
}
.meta-contagem { font-weight: 600; color: var(--texto); }

.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--vivo-roxo-esc);
  background: var(--roxo-suave);
  border-radius: 999px;
  padding: 2px 10px;
}

.nota-lgpd {
  font-size: 12px;
  color: var(--texto-fraco);
  margin-left: auto;
}

.cards {
  display: grid;
  gap: 12px;
}

.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px 18px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  border-color: var(--vivo-roxo);
  box-shadow: var(--sombra);
}

.card-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.card-titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--vivo-roxo);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.card-fantasia {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
}

.card-secundaria {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--texto);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.card-terciaria {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--texto-fraco);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.card-secundaria:empty,
.card-terciaria:empty { display: none; }

/* Separador "·" entre itens, sem depender da ordem dos campos presentes */
.card-secundaria span + span:not(.rotulo)::before,
.card-terciaria span + span:not(.rotulo)::before {
  content: '·';
  margin: 0 8px;
  color: var(--texto-fraco);
}

.rotulo {
  font-size: 0.82em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
  margin-right: 2px;
}

/* Badges de situação cadastral (PJ)
   Texto pequeno usa as variantes escuras — #00A859/#FFB800 reprovam em 4.5:1 */
.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-verde {
  color: var(--sucesso-texto);
  background: rgba(46, 230, 160, 0.13);
  border-color: rgba(46, 230, 160, 0.45);
}
.badge-vermelho {
  color: var(--erro-texto);
  background: rgba(255, 77, 109, 0.13);
  border-color: rgba(255, 77, 109, 0.40);
}
.badge-ambar {
  color: var(--alerta-texto);
  background: rgba(255, 193, 77, 0.16);
  border-color: rgba(255, 193, 77, 0.60);
}
.badge-neutro {
  color: var(--texto-fraco);
  background: var(--fundo);
  border-color: var(--borda);
}

/* ---------- Estados: vazio, erro, alerta ---------- */

.estado-vazio {
  background: var(--superficie);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  padding: 40px 24px;
  text-align: center;
  color: var(--texto-fraco);
}
.estado-vazio p { margin: 0 auto; max-width: 480px; }
.estado-vazio p + p { margin-top: 8px; }
.estado-vazio-titulo {
  font-size: 17px;
  font-weight: 700;
  color: var(--texto);
}
.estado-vazio .nota-lgpd { display: block; margin: 14px auto 0; }

.caixa-erro {
  background: rgba(255, 77, 109, 0.10);
  border: 1px solid rgba(255, 77, 109, 0.45);
  border-radius: var(--raio);
  color: var(--erro-texto);
  font-size: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}

.caixa-alerta {
  background: rgba(255, 193, 77, 0.14);
  border: 1px solid rgba(255, 193, 77, 0.60);
  border-radius: var(--raio);
  color: var(--alerta-texto);
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 16px;
  margin-bottom: 14px;
}

/* ---------- Filtros avançados ---------- */

.filtros-avancados { margin-top: 12px; }

.filtros-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--vivo-roxo);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.filtros-toggle:hover { background: var(--roxo-suave); }

.filtros-seta {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.filtros-seta-aberta { transform: rotate(90deg); }

.filtros-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--vivo-roxo);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.painel-filtros {
  margin-top: 12px;
  padding: 18px 16px 16px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.filtros-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px 24px;
}

.filtros-secao {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.filtros-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.filtros-titulo {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
}
legend.filtros-titulo { margin-bottom: 12px; }

.painel-filtros .campo-grupo input,
.painel-filtros .campo-grupo select {
  font: inherit;
  font-size: 14px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto);
  width: 100%;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.painel-filtros .campo-grupo input:focus,
.painel-filtros .campo-grupo select:focus {
  outline: none;
  border-color: var(--vivo-roxo);
  box-shadow: 0 0 0 3px var(--roxo-suave);
}
.painel-filtros .campo-grupo input::placeholder { color: var(--texto-fraco); }

.campo-rotulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}

.campo-faixa {
  display: flex;
  align-items: center;
  gap: 6px;
}
.campo-faixa input { flex: 1 1 0; }
.faixa-sep { color: var(--texto-fraco); flex: 0 0 auto; }

.campo-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.campo-check input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--vivo-roxo);
  cursor: pointer;
}

.filtros-dica {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--texto-fraco);
}

.filtros-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}
.filtros-aplicar { height: 40px; padding: 0 20px; font-size: 14px; }

/* ---------- Chips de filtros ativos ---------- */

.chips-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 2px 14px;
}
.chips-filtros-rotulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chip-filtro {
  font-weight: 500;
  border: 1px solid rgba(124, 92, 255, 0.25);
  padding: 3px 12px;
}

/* ---------- Cards clicáveis (abrem a ficha) ---------- */

.card-clicavel { cursor: pointer; }
.card-clicavel:hover .card-acao { text-decoration: underline; }

.card-acao {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vivo-roxo);
  white-space: nowrap;
}

/* ---------- Paginação ---------- */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.pag-botao {
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--vivo-roxo);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pag-botao:hover:not(:disabled) {
  background: var(--roxo-suave);
  border-color: var(--vivo-roxo);
}
.pag-botao:disabled {
  color: var(--texto-fraco);
  opacity: 0.55;
  cursor: not-allowed;
}

.pag-atual {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
}

/* ---------- Ficha do lead (dialog) ---------- */

.ficha-dialog {
  border: 0;
  border-radius: var(--raio);
  box-shadow: 0 8px 40px rgba(20, 32, 43, .14);
  padding: 0;
  width: min(680px, calc(100vw - 32px));
  max-height: min(85vh, 860px);
  background: var(--superficie);
  color: var(--texto);
}
.ficha-dialog::backdrop {
  background: rgba(20, 32, 43, .38);
}

.ficha-conteudo {
  padding: 22px 26px 20px;
  overflow-y: auto;
  max-height: inherit;
}

.ficha-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.ficha-identidade { min-width: 0; }

.ficha-titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--vivo-roxo);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ficha-fantasia {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
}
.ficha-subtitulo {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--texto);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.ficha-lgpd {
  font-size: 11.5px;
  color: var(--texto-fraco);
}

.ficha-fechar {
  appearance: none;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-fraco);
  font-size: 20px;
  line-height: 1;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ficha-fechar:hover {
  background: var(--roxo-suave);
  border-color: var(--vivo-roxo);
  color: var(--vivo-roxo);
}

.ficha-secao {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}
.ficha-secao-titulo {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
}

.ficha-dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px 20px;
}
.ficha-campo { min-width: 0; }
.ficha-campo dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-fraco);
}
.ficha-campo dd {
  margin: 1px 0 0;
  font-size: 14px;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.ficha-texto {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.ficha-lista {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  display: grid;
  gap: 4px;
}
.ficha-lista-extra {
  color: var(--texto-fraco);
  font-size: 12.5px;
  margin-left: 6px;
}

.ficha-rodape {
  display: block;
  margin: 18px 0 0;
  text-align: center;
}

/* ---------- Navegação do topo ---------- */

.topo-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}

.topo-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-fraco);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 9px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.topo-link:hover {
  color: var(--vivo-roxo);
  background: var(--roxo-suave);
}
.topo-link[aria-current='page'] {
  color: var(--vivo-roxo);
  background: var(--roxo-suave);
}

/* ---------- Utilidades ---------- */

.sr-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ligacao { color: var(--vivo-roxo); font-weight: 600; }

.botao-primario:disabled {
  background: var(--texto-fraco);
  cursor: not-allowed;
  opacity: 0.6;
}

a.botao-primario,
a.botao-fantasma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ---------- Painel de exportação (busca) ---------- */

.export-painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 12px 20px;
  margin-bottom: 22px;
}

.painel-export {
  margin-top: 8px;
  padding-top: 16px;
  padding-bottom: 8px;
  border-top: 1px solid var(--borda);
}

.export-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  gap: 14px 20px;
}

.painel-export .campo-grupo input,
.painel-export .campo-grupo select,
.painel-export .campo-grupo textarea {
  font: inherit;
  font-size: 14px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto);
  width: 100%;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.painel-export .campo-grupo input,
.painel-export .campo-grupo select { height: 40px; }
.painel-export .campo-grupo textarea {
  padding: 10px 12px;
  resize: vertical;
  min-height: 64px;
}
.painel-export .campo-grupo input:focus,
.painel-export .campo-grupo select:focus,
.painel-export .campo-grupo textarea:focus {
  outline: none;
  border-color: var(--vivo-roxo);
  box-shadow: 0 0 0 3px var(--roxo-suave);
}
.painel-export .campo-grupo input::placeholder,
.painel-export .campo-grupo textarea::placeholder { color: var(--texto-fraco); }

.export-colunas-bloco {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}
.export-colunas-bloco legend.filtros-titulo { margin-bottom: 10px; }
.export-colunas-dica {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.export-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px 16px;
}
.export-colunas .campo-check { font-size: 13.5px; }

/* Bloco "sem máscara" — fricção proporcional ao risco */

.export-sem-mascara {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}

.campo-check-risco { font-weight: 600; }
.campo-check-risco input[type='checkbox'] { accent-color: var(--erro); }

.aviso-sem-mascara {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(255, 77, 109, 0.10);
  border: 1px solid rgba(255, 77, 109, 0.45);
  border-left: 4px solid var(--erro);
  border-radius: var(--raio);
  color: var(--erro-texto);
  font-size: 13.5px;
  display: grid;
  gap: 8px;
}
.aviso-sem-mascara p { margin: 0; }
.aviso-titulo {
  font-size: 14px;
  font-weight: 700;
}
.aviso-sem-mascara .campo-grupo { margin-top: 4px; }
.aviso-sem-mascara .campo-grupo label { color: var(--erro-texto); }
.aviso-sem-mascara .campo-grupo textarea:focus {
  border-color: var(--erro);
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.18);
}

.contador-justificativa {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--erro-texto);
}
.contador-justificativa.contador-ok { color: var(--sucesso-texto); }

.export-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}
.export-acoes .filtros-dica { margin: 0; }
.export-gerar { height: 44px; padding: 0 24px; font-size: 15px; }

.export-resultado { margin-top: 4px; }
.export-resultado:empty { display: none; }

/* Cartão de resultado da exportação */

.export-cartao {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.export-cartao-risco { border-color: rgba(255, 77, 109, 0.45); }

.export-cartao-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.export-cartao-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
}

.export-cartao-meta {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--texto-fraco);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.export-cartao-meta span + span::before {
  content: '·';
  margin: 0 8px;
  color: var(--texto-fraco);
}
.export-arquivo {
  font-weight: 600;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.export-cartao-aviso {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--erro-texto);
}

.export-cartao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.botao-baixar-arquivo { height: 42px; font-size: 14px; }

/* ---------- Página de histórico de exportações ---------- */

.pagina-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 18px;
}
.pagina-titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.pagina-subtitulo {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--texto-fraco);
  max-width: 560px;
}

.tabela-envolucro {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow-x: auto;
}

.tabela-export {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tabela-export th,
.tabela-export td {
  text-align: left;
  vertical-align: middle;
  padding: 10px 14px;
  border-bottom: 1px solid var(--borda);
}
.tabela-export thead th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-fraco);
  background: var(--fundo);
  white-space: nowrap;
}
.tabela-export tbody tr:last-child td { border-bottom: 0; }
.tabela-export tbody tr:hover { background: var(--roxo-suave); }

.linha-sem-mascara td { background: rgba(255, 77, 109, 0.07); }
.linha-sem-mascara td:first-child { box-shadow: inset 3px 0 0 var(--erro); }
.tabela-export tbody tr.linha-sem-mascara:hover { background: rgba(255, 77, 109, 0.13); }

.celula-data { white-space: nowrap; color: var(--texto); }
.celula-usuario { overflow-wrap: anywhere; }
.celula-num { text-align: right; font-variant-numeric: tabular-nums; }
th.celula-num { text-align: right; }
.celula-criterio {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-fraco);
}
.celula-acao { white-space: nowrap; }

.acao-baixar {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--vivo-roxo);
  text-decoration: none;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 5px 12px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.acao-baixar:hover {
  background: var(--roxo-suave);
  border-color: var(--vivo-roxo);
}

.arquivo-removido {
  font-size: 12.5px;
  font-style: italic;
  color: var(--texto-fraco);
}
.acao-indisponivel { color: var(--texto-fraco); }

.tabela-nota { display: block; margin: 12px 2px 0; }

/* ---------- Responsivo ---------- */

@media (max-width: 640px) {
  .conteudo { padding: 16px 12px 48px; }
  .busca-painel { padding: 14px; }

  .busca-linha { flex-wrap: wrap; }
  .busca-campo { flex: 1 1 100%; }
  .busca-limite { flex: 0 0 auto; }
  .busca-botao { flex: 1 1 auto; }

  .abas { display: flex; width: 100%; }
  .aba { flex: 1 1 50%; padding: 9px 8px; }

  .marca-texto small { display: none; }
  .usuario-nome { display: none; }

  .nota-lgpd { margin-left: 0; flex-basis: 100%; }
  .card { padding: 14px; }

  .filtros-grade { grid-template-columns: 1fr; gap: 18px; }
  .filtros-acoes { flex-direction: column-reverse; }
  .filtros-acoes .botao-fantasma,
  .filtros-aplicar { width: 100%; height: 44px; }

  .paginacao { gap: 8px; }
  .pag-botao { flex: 1 1 auto; padding: 10px 8px; }

  .ficha-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 24px);
  }
  .ficha-conteudo { padding: 16px 16px 14px; }
  .ficha-dl { grid-template-columns: 1fr 1fr; }

  .topo-nav { margin-left: 0; }
  .topo-link { padding: 6px 8px; font-size: 13px; }

  .export-painel { padding: 10px 14px; }
  .export-grade { grid-template-columns: 1fr 1fr; }
  .export-colunas { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .export-acoes { flex-direction: column; align-items: stretch; }
  .export-gerar { width: 100%; }
  .export-cartao-acoes a { flex: 1 1 auto; }

  .pagina-cabecalho { flex-direction: column; align-items: stretch; }
  .pagina-cabecalho form,
  .pagina-cabecalho .botao-fantasma { width: 100%; }
  .celula-criterio { max-width: 180px; }
}

/* =========================================================
   Importação de bases (Fase 3)
   ========================================================= */

/* Aviso de manutenção: a busca fica fora do ar durante a importação */
.banner-manutencao {
  position: sticky;
  top: 74px;
  z-index: 9;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 193, 77, 0.10);
  border: 1px solid rgba(255, 193, 77, 0.60);
  border-left: 4px solid var(--alerta);
  border-radius: var(--raio);
  color: var(--alerta-texto);
  font-size: 13.5px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.banner-manutencao p { margin: 0; }
.banner-manutencao .spinner {
  flex: 0 0 auto;
  margin-top: 2px;
  border-color: rgba(255, 217, 138, 0.25);
  border-top-color: var(--alerta-texto);
}

/* Cartões da página de importação */
.import-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.import-cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px;
  min-width: 0;
}

.import-cartao-titulo {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.import-cartao-texto {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--texto-fraco);
}
.import-cartao-texto .badge { margin-left: 8px; }

.import-cartao-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.botao-analisar { height: 44px; font-size: 15px; }

/* Campo de upload */
.campo-envio { display: grid; gap: 6px; }
.campo-arquivo {
  font: inherit;
  font-size: 14px;
  width: 100%;
  color: var(--texto);
  background: var(--fundo);
  border: 1.5px dashed var(--borda);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo-arquivo:hover { border-color: var(--vivo-roxo); }
.campo-arquivo:focus {
  outline: none;
  border-color: var(--vivo-roxo);
  box-shadow: 0 0 0 3px var(--roxo-suave);
}
.campo-arquivo::file-selector-button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vivo-roxo);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 7px 14px;
  margin-right: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.campo-arquivo::file-selector-button:hover {
  background: var(--roxo-suave);
  border-color: var(--vivo-roxo);
}

/* Lista de arquivos da pasta de entrada */
.tabela-arquivos { min-width: 560px; }
.tabela-arquivos th[scope='row'] {
  font-weight: 600;
  overflow-wrap: break-word; /* 'anywhere' colapsava a coluna e empilhava 1 palavra por linha */
}
.celula-arquivo { min-width: 220px; max-width: 340px; }
.situacao-vazia { color: var(--texto-fraco); }
.estado-vazio-compacto { padding: 24px 16px; }

/* Painel de importação direta (arquivo selecionado da pasta) */
.painel-selecionado { margin-bottom: 22px; }

/* Botão de ação destrutiva (importar) */
.botao-perigo {
  appearance: none;
  border: 0;
  border-radius: var(--raio);
  background: var(--erro);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  height: 46px;
  padding: 0 26px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.botao-perigo:hover:not(:disabled) { background: #e03a58; }
.botao-perigo:active:not(:disabled) { background: #c22c48; }
.botao-perigo:disabled {
  background: var(--texto-fraco);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Bloco de fricção antes de importar */
.aviso-importacao {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(255, 77, 109, 0.10);
  border: 1px solid rgba(255, 77, 109, 0.45);
  border-left: 4px solid var(--erro);
  border-radius: var(--raio);
  color: var(--erro-texto);
  font-size: 13.5px;
  display: grid;
  gap: 10px;
}
.aviso-importacao .aviso-titulo { margin: 0; font-size: 14px; font-weight: 700; }
.aviso-lista {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.aviso-importacao .campo-check { color: var(--texto); }
.aviso-importacao .campo-check-risco { color: var(--erro-texto); }

/* Indicador reforçado (importação em curso) */
.indicador-forte { color: var(--erro-texto); font-weight: 600; }
.indicador-forte .spinner {
  border-color: rgba(255, 77, 109, 0.20);
  border-top-color: var(--erro-texto);
}

/* ---------- Prévia e mapeamento de colunas ---------- */

.previa-envolucro { margin-top: 22px; }
.previa-cartao { margin-top: 0; }

.previa-topo { margin-bottom: 12px; }
.previa-arquivo {
  color: var(--vivo-roxo);
  overflow-wrap: anywhere;
}
.previa-meta {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.caixa-sucesso {
  background: rgba(46, 230, 160, 0.08);
  border: 1px solid rgba(46, 230, 160, 0.45);
  border-radius: var(--raio);
  color: var(--sucesso-texto);
  font-size: 13.5px;
  padding: 11px 16px;
  margin-bottom: 14px;
}

.tabela-mapa { min-width: 640px; }
.tabela-mapa th[scope='row'] {
  font-weight: 600;
  overflow-wrap: anywhere;
  max-width: 240px;
}
.tabela-mapa .celula-destino { min-width: 220px; }
.tabela-mapa select {
  font: inherit;
  font-size: 14px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tabela-mapa select:focus {
  outline: none;
  border-color: var(--vivo-roxo);
  box-shadow: 0 0 0 3px var(--roxo-suave);
}

.celula-exemplo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--texto-fraco);
  max-width: 260px;
  overflow-wrap: anywhere;
}
.exemplo-vazio { font-style: italic; font-family: inherit; }

/* Destaque das colunas reconhecidas automaticamente */
.linha-reconhecida th,
.linha-reconhecida td { background: var(--roxo-suave); }
.linha-reconhecida th[scope='row'] {
  box-shadow: inset 3px 0 0 var(--vivo-roxo);
  color: var(--vivo-roxo-esc);
}
.tabela-mapa tbody tr.linha-reconhecida:hover th,
.tabela-mapa tbody tr.linha-reconhecida:hover td {
  background: rgba(124, 92, 255, 0.13);
}
.legenda-reconhecida {
  background: var(--roxo-suave);
  border-left: 3px solid var(--vivo-roxo);
  padding: 1px 6px 1px 5px;
  border-radius: 4px;
  color: var(--vivo-roxo-esc);
  font-weight: 600;
}

.mapa-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
}
.mapa-acoes .filtros-dica { margin: 0; flex: 1 1 260px; }
.aviso-alterado {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--alerta-texto);
}
.botao-salvar-mapa { height: 42px; font-size: 14px; }

.previa-importar {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* ---------- Resultado da importação ---------- */

.resultado-cartao { margin-top: 0; }
.resultado-com-erros { border-color: rgba(255, 77, 109, 0.45); }

.resultado-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.resultado-titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.resultado-meta {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--texto-fraco);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.resultado-meta span + span::before {
  content: '·';
  margin: 0 8px;
  color: var(--texto-fraco);
}
.resultado-meta .previa-arquivo { font-weight: 600; }

.resultado-stats {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.stat {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
}
.stat dt {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-fraco);
}
.stat .stat-num {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  line-height: 1.2;
}
.stat .stat-desc {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.stat-inseridas .stat-num { color: var(--sucesso-texto); }
.stat-puladas { border-color: rgba(46, 230, 160, 0.45); }
.stat-puladas .stat-num { color: var(--sucesso-texto); }
.stat-erros {
  background: rgba(255, 77, 109, 0.10);
  border-color: rgba(255, 77, 109, 0.45);
}
.stat-erros dt,
.stat-erros .stat-num,
.stat-erros .stat-desc { color: var(--erro-texto); }

.resultado-nota-ok {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--sucesso-texto);
}
.resultado-nota-erro {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--erro-texto);
}

.resultado-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.botao-resultado { height: 42px; font-size: 14px; }

/* ---------- Responsivo (importação) ---------- */

@media (max-width: 640px) {
  .banner-manutencao { top: 64px; }
  .import-grade { grid-template-columns: 1fr; }
  .import-cartao { padding: 14px; }

  .import-cartao-acoes { flex-direction: column-reverse; align-items: stretch; }
  .import-cartao-acoes .botao-primario,
  .import-cartao-acoes .botao-fantasma,
  .import-cartao-acoes .botao-perigo { width: 100%; }

  .mapa-acoes { flex-direction: column; align-items: stretch; }
  .botao-salvar-mapa { width: 100%; }

  .previa-importar { justify-content: stretch; }
  .previa-importar .botao-perigo { width: 100%; }

  .resultado-stats { grid-template-columns: 1fr; }
  .resultado-acoes { flex-direction: column; align-items: stretch; }
  .tabela-mapa .celula-destino { min-width: 180px; }
}


/* ====================================================================
   Camada de desenho — revisão de 02/08/2026
   ====================================================================
   Corrige três coisas que a versão anterior errou:

   1. MARGEM NO CELULAR. `.conteudo` tinha 14px de folga e os botões
      encostavam na borda. Agora a folga é um token só (--gutter), com
      16px de piso e o recorte da tela do iPhone somado.

   2. FILTROS. `.filtros-grade` distribuía as SEÇÕES em colunas, então
      "Localização" e "Perfil" viravam duas colunas estreitas de alturas
      diferentes, com os campos empilhados dentro. Agora cada seção ocupa
      a largura toda e são os CAMPOS que formam a grade — o alinhamento
      passa a existir de verdade.

   3. COR. Ver o bloco :root. Aqui embaixo, cor forte só onde significa
      alguma coisa.
   ==================================================================== */

/* ---------- Base ---------- */
body {
  background: var(--ground);
  color: var(--texto);
  font-size: var(--t-base);
  -webkit-font-smoothing: antialiased;
}

.conteudo {
  max-width: 1080px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: var(--e5);
  padding-bottom: calc(var(--e7) + env(safe-area-inset-bottom));
}

/* Documento é para conferir dígito a dígito contra um contrato: fonte de
   largura fixa, algarismos alinhados, zero que não se confunde com O. */
.mono, .celula-num, .ficha-subtitulo .doc,
.card-secundaria .doc, .tabela-export .celula-num {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- Topo ---------- */
.topo {
  background: rgba(255, 255, 255, .88);
  background: color-mix(in srgb, var(--superficie) 82%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--linha);
}
.topo-inner { max-width: 1080px; padding-left: var(--gutter); padding-right: var(--gutter); }
.marca {
  background: var(--acento);
  color: #ffffff;
  font-weight: 800;
  font-size: var(--t-peq);
  letter-spacing: -0.02em;
  text-transform: none;
  border-radius: 10px;
  box-shadow: none;
}
.marca-texto { font-weight: 650; letter-spacing: -0.01em; }
.marca-texto small { color: var(--texto-fraco); font-weight: 400; }
.topo-link { color: var(--texto-fraco); border-radius: var(--raio-peq); }
.topo-link[aria-current="page"] {
  color: var(--texto);
  background: var(--elevado);
  box-shadow: inset 0 -2px 0 var(--acento);
}

/* ---------- Superfícies ---------- */
.card, .import-cartao, .previa-cartao, .export-cartao, .login-cartao,
.busca-painel, .painel-filtros {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.card-clicavel { transition: border-color .13s ease, background .13s ease; }
.card-clicavel:hover, .card-clicavel:focus-visible {
  border-color: var(--linha-forte);
  background: var(--elevado);
}

/* ---------- Ações ---------- */
.botao-primario {
  background: var(--acento);
  color: #ffffff;
  border: 1px solid var(--acento);
  font-weight: 650;
  border-radius: var(--raio-peq);
  box-shadow: none;
}
.botao-primario:hover:not(:disabled) { background: var(--acento-forte); border-color: var(--acento-forte); }
.botao-fantasma {
  background: transparent;
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  border-radius: var(--raio-peq);
}
.botao-fantasma:hover:not(:disabled) { background: var(--elevado); }
.botao-perigo { background: var(--risco); color: #ffffff; border: 1px solid var(--risco); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

/* ---------- Barra de busca ---------- */
.busca-linha { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: end; }
.busca-linha .busca-campo { flex: 1 1 260px; min-width: 0; }
.busca-campo {
  height: 48px;
  background: var(--ground);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-peq);
  color: var(--texto);
  padding: 0 var(--e3);
}
.busca-botao { flex: 0 0 auto; height: 48px; padding-inline: var(--e5); }
.busca-limite { height: 48px; flex: 0 0 auto; }

/* ---------- Filtros: a grade é dos CAMPOS, não das seções ---------- */
.painel-filtros { padding: var(--e4); background: var(--ground); }
.filtros-grade { display: block; }
.filtros-secao {
  border: 0;
  border-top: 1px solid var(--linha);
  margin: 0;
  padding: var(--e4) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e3) var(--e4);
  align-items: start;
}
.filtros-secao:first-child { border-top: 0; padding-top: 0; }
.filtros-secao + .filtros-secao { margin-top: var(--e4); }
.filtros-titulo, .filtros-secao > legend {
  grid-column: 1 / -1;
  margin: 0 0 var(--e1);
  padding: 0;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.campo-grupo { display: grid; gap: var(--e1); min-width: 0; }
.campo-grupo label, .campo-rotulo {
  font-size: var(--t-mini);
  font-weight: 600;
  color: var(--texto-fraco);
  letter-spacing: .01em;
}
.painel-filtros .campo-grupo input,
.painel-filtros .campo-grupo select {
  height: 42px;
  border-radius: var(--raio-peq);
  background: var(--superficie);
  border: 1px solid var(--linha);
}
/* Faixa "de – até": os dois campos dividem a linha por igual. */
.campo-faixa { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--e2); align-items: center; }
.campo-check { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-peq); }
.filtros-acoes {
  display: flex; gap: var(--e2); justify-content: flex-end;
  margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--linha);
}
.filtros-toggle { color: var(--texto-fraco); font-weight: 600; }
.filtros-contador {
  background: var(--acento); color: #ffffff; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; font-size: var(--t-micro);
}

/* ---------- Tabelas ---------- */
.tabela-export thead th {
  background: transparent;
  border-bottom: 1px solid var(--linha-forte);
  color: var(--texto-fraco);
  text-transform: uppercase;
  font-size: var(--t-micro);
  letter-spacing: .08em;
  font-weight: 700;
}
.tabela-export tbody tr:hover { background: var(--elevado); }

/* ---------- Confiança: forma antes de cor ----------
   Uma fonte = discreto. Duas = confirmado. Três ou mais = ganha peso.
   A escada existe na BORDA e no PESO, não só na cor -- quem enxerga mal
   cor continua vendo a diferença. */
.chip {
  background: transparent; border: 1px solid var(--linha-forte);
  color: var(--texto-fraco); border-radius: 999px;
  font-size: var(--t-micro); padding: 2px 9px;
}
.badge { border-radius: 999px; font-size: var(--t-micro); font-weight: 700; padding: 3px 9px; }
.badge-verde    { background: rgba(13, 122, 82, .10); background: color-mix(in srgb, var(--confirmado) 16%, transparent); color: var(--confirmado); border: 1px solid rgba(13, 122, 82, .30); border-color: color-mix(in srgb, var(--confirmado) 40%, transparent); }
.badge-ambar    { background: rgba(163, 98, 10, .10); background: color-mix(in srgb, var(--atencao) 15%, transparent); color: var(--atencao); border: 1px solid rgba(163, 98, 10, .30); border-color: color-mix(in srgb, var(--atencao) 38%, transparent); }
.badge-vermelho { background: rgba(192, 42, 60, .09); background: color-mix(in srgb, var(--risco) 15%, transparent); color: var(--risco); border: 1px solid rgba(192, 42, 60, .28); border-color: color-mix(in srgb, var(--risco) 38%, transparent); }
.badge-neutro   { background: var(--elevado); color: var(--texto-fraco); border: 1px solid var(--linha); }

.ficha-lista li.linha-reconhecida,
.tabela-export tbody tr.linha-reconhecida {
  background: rgba(13, 122, 82, .06);
  background: color-mix(in srgb, var(--confirmado) 7%, transparent);
  box-shadow: inset 2px 0 0 var(--confirmado);
}

/* ---------- Celular ---------- */
@media (max-width: 680px) {
  .topo-inner { padding-top: var(--e2); padding-bottom: var(--e2); gap: var(--e2); flex-wrap: wrap; }
  .topo-nav {
    order: 3; width: 100%; overflow-x: auto; gap: var(--e1);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* Sangra até a borda para o menu parecer contínuo, mas o primeiro e o
       último item mantêm a folga do gutter -- nada colado no canto. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .topo-nav::-webkit-scrollbar { display: none; }
  .topo-link { white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
  .marca-texto small { display: none; }

  /* Na busca o botão vira largura cheia: espremido no canto ele erra o dedo. */
  .busca-linha { gap: var(--e2); }
  .busca-linha .busca-campo { flex: 1 1 100%; }
  .busca-botao { flex: 1 1 100%; }
  .busca-limite { flex: 1 1 100%; }

  .filtros-secao { grid-template-columns: 1fr; }
  .filtros-acoes { flex-direction: column-reverse; }
  .filtros-acoes > * { width: 100%; }

  /* 44px é o alvo mínimo confortável para o dedo; 16px no campo evita o
     zoom automático do iOS ao focar. */
  .botao-primario, .botao-fantasma, .botao-perigo, .pag-botao, .aba { min-height: 44px; }
  input, select, textarea, .busca-campo { font-size: 16px; }

  .cards { gap: var(--e2); }
  .pagina-cabecalho { flex-direction: column; align-items: stretch; gap: var(--e3); }
  .resultado-stats { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ====================================================================
   Ficha (modal): hierarquia em três níveis
   ====================================================================
   Antes: ~25 campos com o mesmo peso, um embaixo do outro. Virava parede.
   Agora: cabeçalho identifica, o bloco essencial fica à vista, e o resto
   mora em <details> — nativo, funciona sem JS e responde ao teclado.
   ==================================================================== */

.ficha-dialog {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  box-shadow: 0 18px 48px rgba(20, 32, 43, .16);
  padding: 0;
  width: min(640px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
}
.ficha-dialog::backdrop { background: rgba(20, 32, 43, .38); }
.ficha-conteudo { padding: var(--e5); display: grid; gap: var(--e4); }

.ficha-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e3);
  position: sticky; top: 0; z-index: 2;
  margin: calc(var(--e5) * -1) calc(var(--e5) * -1) 0;
  padding: var(--e4) var(--e5);
  background: rgba(255, 255, 255, .96);
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.ficha-titulo { font-size: var(--t-med); font-weight: 650; margin: 0; line-height: 1.25; }
.ficha-subtitulo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin: var(--e2) 0 0; font-size: var(--t-peq); color: var(--texto-fraco);
}
.ficha-subtitulo .doc { color: var(--texto); font-weight: 600; }
.ficha-fechar {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--raio-peq);
  background: transparent; border: 1px solid var(--linha);
  color: var(--texto-fraco); font-size: 20px; line-height: 1; cursor: pointer;
}
.ficha-fechar:hover { background: var(--elevado); color: var(--texto); }

/* Bloco essencial: telefone, e-mail, mãe, nascimento, renda. */
.ficha-essencial {
  background: var(--ground);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  padding: var(--e4);
}
.ficha-dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e3) var(--e4); margin: 0;
}
.ficha-campo { min-width: 0; }
.ficha-campo dt {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--texto-fraco); margin-bottom: 2px;
}
.ficha-campo dd { margin: 0; font-size: var(--t-peq); overflow-wrap: anywhere; }

.ficha-secao { display: grid; gap: var(--e3); }
.ficha-secao-titulo {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--texto-fraco); margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2);
}
.ficha-secao-titulo .ficha-subtitulo { margin: 0; text-transform: none; letter-spacing: 0; }

/* Seções que abrem. */
.ficha-bloco {
  border: 1px solid var(--linha); border-radius: var(--raio-peq);
  background: var(--ground);
}
.ficha-bloco > summary {
  cursor: pointer; list-style: none; padding: var(--e3) var(--e4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  font-size: var(--t-peq); font-weight: 600; color: var(--texto);
}
.ficha-bloco > summary::-webkit-details-marker { display: none; }
.ficha-bloco > summary::after {
  content: "+"; color: var(--texto-fraco); font-size: 16px; line-height: 1;
  flex: 0 0 auto;
}
.ficha-bloco[open] > summary::after { content: "–"; }
.ficha-bloco[open] > summary { border-bottom: 1px solid var(--linha); }
.ficha-bloco > summary:hover { background: var(--elevado); }
.ficha-bloco > *:not(summary) { padding: var(--e4); }
.ficha-resumo-valor {
  color: var(--texto-fraco); font-weight: 400; font-size: var(--t-mini);
  margin-left: auto; margin-right: var(--e2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
}

/* Listas do dossiê. */
.ficha-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.ficha-lista li {
  padding: var(--e2) var(--e3);
  border: 1px solid var(--linha); border-radius: var(--raio-peq);
  background: var(--superficie);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  font-size: var(--t-peq);
}
.ficha-lista-extra {
  width: 100%; font-size: var(--t-mini); color: var(--texto-fraco);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
}
.ficha-rodape { font-size: var(--t-mini); color: var(--texto-fraco); margin: 0; }

.dossie-carregando {
  border: 1px solid var(--linha); border-radius: var(--raio-peq);
  background: var(--ground); padding: var(--e3) var(--e4);
}
.dossie-passos {
  margin: var(--e2) 0 0; padding-left: 18px;
  color: var(--texto-fraco); font-size: var(--t-mini); line-height: 1.7;
}
.dossie-passos li::marker { color: var(--acento); }
.dossie-carregando::after {
  content: ""; display: block; height: 2px; margin-top: var(--e3); border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: dossie-varre 1.3s ease-in-out infinite;
}
@keyframes dossie-varre {
  0% { background-position: -45% 0; } 100% { background-position: 145% 0; }
}

@media (max-width: 680px) {
  .ficha-dialog {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; border: 0; margin: 0;
  }
  .ficha-conteudo { padding: var(--e4); padding-bottom: calc(var(--e6) + env(safe-area-inset-bottom)); }
  .ficha-topo { margin: calc(var(--e4) * -1) calc(var(--e4) * -1) 0; padding: var(--e3) var(--e4); }
  .ficha-dl { grid-template-columns: 1fr 1fr; }
  .ficha-fechar { width: 44px; height: 44px; }
}

/* ====================================================================
   Área segura do topo — iPhone com Dynamic Island / notch
   ====================================================================
   BUG relatado em 02/08/2026: no iPhone 16 Pro Max, instalado como
   aplicativo, o botão de fechar a ficha não pegava.

   Causa: `apple-mobile-web-app-status-bar-style: black-translucent` faz o
   conteúdo começar ATRÁS da barra de status. Somado ao `viewport-fit=cover`,
   o topo fixo e o botão de fechar ficavam por baixo da Dynamic Island —
   visíveis, mas com o toque interceptado pelo sistema.

   Eu tinha aplicado o recorte só em left/right/bottom. Faltava o de cima,
   que é justamente onde fica a ilha. Vale para o topo do site e para o
   cabeçalho da ficha, que também é fixo.
   ==================================================================== */
.topo {
  padding-top: env(safe-area-inset-top);
}
.ficha-topo {
  padding-top: calc(var(--e4) + env(safe-area-inset-top));
}
.pagina-login {
  padding-top: calc(var(--e5) + env(safe-area-inset-top));
}

@media (max-width: 680px) {
  .ficha-topo { padding-top: calc(var(--e3) + env(safe-area-inset-top)); }
  /* O modal cobre a tela inteira no celular: o conteúdo tem que começar
     abaixo da ilha, e não debaixo dela. */
  .ficha-dialog { padding-top: 0; }
  /* Alvo de toque do fechar com folga real: 44px é o mínimo da Apple, e
     este botão fica na quina, onde a mira é pior. */
  .ficha-fechar { width: 46px; height: 46px; font-size: 24px; }
}

/* ---------- Créditos ---------- */
.topo-saldo { display: inline-flex; }
.saldo {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: var(--ground);
}
.saldo-num { font-weight: 700; font-size: var(--t-peq); font-variant-numeric: tabular-nums; }
.saldo-rot { font-size: var(--t-micro); color: var(--texto-fraco); }
.saldo-livre .saldo-num { color: var(--acento); }
/* Saldo curto e saldo zerado avisam sozinhos, sem precisar abrir tela nenhuma. */
.saldo-baixo  { border-color: var(--atencao); }
.saldo-baixo .saldo-num { color: var(--atencao); }
.saldo-zerado { border-color: var(--risco); background: rgba(240, 104, 122, .10); }
.saldo-zerado .saldo-num { color: var(--risco); }

.linha-acao { display: flex; gap: var(--e2); align-items: center; }
.campo-mini { height: 34px; width: 84px; padding: 0 8px; font-size: var(--t-mini); }
.botao-mini { height: 34px; padding: 0 10px; font-size: var(--t-mini); }
.campo-acao { align-self: end; }
.campo-acao .botao-primario, .campo-acao .botao-fantasma { height: 42px; width: 100%; }

@media (max-width: 680px) {
  .topo-usuario { gap: var(--e2); }
  .usuario-nome { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .linha-acao { flex-direction: column; align-items: stretch; }
  .campo-mini, .botao-mini { width: 100%; min-height: 40px; }
}

/* ====================================================================
   Área de trabalho: resultados à esquerda, folha de dados à direita
   ====================================================================
   O modal cobria a lista inteira: para comparar duas pessoas era abrir,
   fechar, procurar de novo. Agora a pessoa abre AO LADO e a lista continua
   ali — no computador. No celular não há "ao lado", então a folha vira uma
   tela cheia por cima, que é o comportamento certo para uma mão só.
   ==================================================================== */
.area-trabalho { display: grid; gap: var(--e4); align-items: start; }
@media (min-width: 981px) {
  .area-trabalho { grid-template-columns: minmax(0, 1fr) minmax(440px, 640px); }
  .area-trabalho > .folha:empty { display: none; }
  /* Sem folha aberta, a lista ocupa tudo. */
  .area-trabalho:not(:has(.folha > *)) { grid-template-columns: minmax(0, 1fr); }
  .folha {
    position: sticky; top: calc(76px + env(safe-area-inset-top));
    max-height: calc(100vh - 96px - env(safe-area-inset-top));
    overflow-y: auto; overscroll-behavior: contain;
  }
}
.folha:not(:empty) {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: var(--e3);
  display: grid; gap: var(--e3);
}

/* =========================================================================
   Ficha densa do lead (redesenho para computador). Cabeçalho + faixa de
   auditoria (Claro cliente + fibra) + corpo em 2 colunas: telefones/e-mails
   à esquerda, identidade à direita, endereços largo. Ver _ficha_pf.html /
   _ficha_dossie.html.
   ===================================================================== */
.fx-head { display: flex; align-items: flex-start; gap: var(--e3); }
.fx-id { min-width: 0; }
.fx-nome { margin: 0; font-size: 20px; font-weight: 770; line-height: 1.12; letter-spacing: .01em; overflow-wrap: anywhere; }
.fx-sub { margin: 5px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; font-size: var(--t-mini); color: var(--texto-fraco); }
.fx-cpf { font-size: var(--t-peq); color: var(--texto); }
.pill { font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 20px; border: 1px solid var(--linha); color: var(--texto-fraco); }
.pill-ok { color: var(--sucesso-texto); background: color-mix(in srgb, var(--confirmado) 14%, transparent); border-color: transparent; }
.pill-risco { color: var(--risco); border-color: color-mix(in srgb, var(--risco) 40%, transparent); }
.fx-fechar { margin-left: auto; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--linha);
  background: var(--ground); border-radius: 8px; color: var(--texto-fraco); font-size: 16px; cursor: pointer; }
.fx-fechar:hover { color: var(--texto); border-color: var(--linha-forte); }

/* Faixa de auditoria */
.audit { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linha);
  border: 1px solid var(--linha); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04); }
@media (min-width: 1000px) { .audit { grid-template-columns: 1fr 1fr; } }
.audit-cel { background: var(--superficie); padding: 9px 12px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.audit .op-logo, .op-fibra-icones .op-logo { box-shadow: 0 1px 2px rgba(16,24,40,.16); flex: 0 0 auto; object-fit: contain; }
.audit-cel > .op-logo { width: 26px; height: 26px; }
.op-fibra-icones { display: inline-flex; flex: 0 0 auto; }
.op-fibra-icones .op-logo { width: 22px; height: 22px; }
.op-fibra-icones .op-logo + .op-logo { margin-left: -6px; }
.op-claro-l { border-radius: 50%; }
.op-vivo-l { border-radius: 6px; }
.audit-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.audit-rot { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); font-weight: 700; opacity: .85; }
.audit-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aud-nome { font-size: var(--t-mini); color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.aud-fibra { gap: 6px 12px; }
.aud-op { display: inline-flex; align-items: center; gap: 5px; }
.aud-mk { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.aud-mk-vivo { color: var(--vivo); } .aud-mk-claro { color: var(--claro); }

/* Selos e apoios */
.selo { display: inline-block; font-size: 11.5px; font-weight: 750; padding: 1px 8px; border-radius: 5px; white-space: nowrap; line-height: 1.5; }
.selo-claro { color: #fff; background: var(--claro); }
.selo-claro-fraco { color: var(--claro); border: 1px solid color-mix(in srgb, var(--claro) 45%, transparent); }
.selo-livre { color: var(--sucesso-texto); background: color-mix(in srgb, var(--confirmado) 14%, transparent); }
.selo-fibra { color: #fff; background: var(--confirmado); }
.selo-alerta { color: var(--alerta-texto); background: color-mix(in srgb, var(--atencao) 16%, transparent); }
.selo-sem { color: var(--risco); border: 1px solid color-mix(in srgb, var(--risco) 40%, transparent); }
.selo-neutro { color: var(--texto-fraco); border: 1px solid var(--linha); }
.mini { font-size: 11px; color: var(--texto-fraco); }
.btnv { font: inherit; font-size: 11.5px; font-weight: 650; color: #fff; background: var(--claro);
  border: 1px solid var(--claro); border-radius: 7px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.btnv:hover:not(:disabled) { background: var(--claro-escuro); }
.btnv:disabled { opacity: .6; cursor: progress; }

/* Corpo em 2 colunas */
.fx-corpo { display: grid; grid-template-columns: 1fr; gap: var(--e2) var(--e3); align-items: start; }
@media (min-width: 1000px) { .fx-corpo { grid-template-columns: 1fr 1fr; } .bloco-largo { grid-column: 1 / -1; } }
/* Cada bloco é um CARTÃO visível — fundo, borda, sombra leve —, não texto solto. */
.bloco {
  min-width: 0; background: var(--ground);
  border: 1px solid var(--linha); border-radius: 10px;
  padding: 10px 13px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.bloco-tit { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-fraco); font-weight: 700; padding-bottom: 5px; border-bottom: 1px solid var(--linha); }
.bloco-cont { color: var(--linha-forte); font-weight: 700; }
/* linhas de contato dividem por filete dentro do cartão */
.bloco .row:last-child { border-bottom: 0; }

.row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--linha); }
.row:last-child { border-bottom: 0; }
.row-k { flex: 0 0 60px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); font-weight: 700; padding-top: 2px; }
.row-main { min-width: 0; flex: 1; }
.row-val { font-size: 14px; font-weight: 620; line-height: 1.2; overflow-wrap: anywhere; }
.row-val a { color: inherit; text-decoration: none; }
.row-val a:hover { color: var(--acento); text-decoration: underline; }
.row-meta { margin-top: 1px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; font-size: 11px; color: var(--texto-fraco); }
.row-vazio { font-size: var(--t-mini); color: var(--texto-fraco); font-style: italic; margin: 2px 0; }
.op-tag { color: #fff; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 4px; background: var(--texto-fraco); }
.op-tag[data-op*="vivo"] { background: var(--vivo); }
.op-tag[data-op*="claro"] { background: var(--claro); }
.op-tag[data-op*="tim"] { background: #00519e; }
.op-tag[data-op*="oi"] { background: #f0a500; color: #3a2a00; }
.tag-hot { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--sucesso-texto);
  background: color-mix(in srgb, var(--confirmado) 16%, transparent); padding: 0 5px; border-radius: 4px; }

/* Identidade */
.idl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: baseline; margin: 0; }
.idl dt { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); font-weight: 700; padding-top: 1px; }
.idl dd { margin: 0; font-size: 13px; font-weight: 540; overflow-wrap: anywhere; }
.fonte { margin-left: 5px; font-size: 9px; text-transform: uppercase; letter-spacing: .03em; color: var(--claro);
  border: 1px solid color-mix(in srgb, var(--claro) 32%, transparent); border-radius: 4px; padding: 0 4px; }
.fx-alertas { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }

/* Endereços / empresas */
.ender { padding: 6px 0; border-bottom: 1px solid var(--linha); }
.ender:last-child { border-bottom: 0; }
.ender-t { font-size: 13.5px; font-weight: 600; }
.ender-m { font-size: 11.5px; color: var(--texto-fraco); margin-top: 1px; }
.ender-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco);
  border: 1px solid var(--linha); border-radius: 4px; padding: 0 5px; margin-left: 4px; }

.fx-mini { margin: 8px 0 0; font-size: 11px; color: var(--texto-fraco); }
.fx-tudo { margin-top: 2px; }
.fx-tudo > summary { cursor: pointer; font-size: var(--t-mini); font-weight: 650; color: var(--texto-fraco); padding: 4px 0; }
.fx-sub-tit { margin: 8px 0 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco); font-weight: 700; }
.fx-rodape { margin: 0; font-size: 11px; color: var(--texto-fraco); line-height: 1.5; }

/* ---------- Cards de resultado ---------- */
.lista-leads { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.lead {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 3px solid transparent;
  border-radius: var(--raio-peq);
  padding: var(--e3) var(--e4);
  display: grid; gap: 3px;
}
.lead-clicavel { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.lead-clicavel:hover, .lead-clicavel:focus-visible {
  background: var(--elevado);
  border-color: var(--linha-forte);
  border-left-color: var(--acento);
}
.lead-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }
.lead-nome {
  margin: 0; font-size: var(--t-base); font-weight: 620; line-height: 1.3;
  overflow-wrap: anywhere;
}
.lead-idade { flex: 0 0 auto; font-size: var(--t-mini); color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
/* Documento e telefone na mesma linha, em fonte de largura fixa: é a linha
   que a antifraude confere e o vendedor disca. */
.lead-doc {
  margin: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
  font-size: var(--t-peq); color: var(--texto);
}
.lead-tel { color: var(--acento); }
.lead-meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
  font-size: var(--t-mini); color: var(--texto-fraco);
}
.lead-meta-fraca { opacity: .85; }
.lead-email { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lead-meta .rotulo { text-transform: uppercase; font-size: 10px; letter-spacing: .07em; opacity: .75; }

/* ---------- Modos de busca ---------- */
.modos { display: flex; flex-wrap: wrap; gap: var(--e1); margin-bottom: var(--e3); }
.modo {
  border: 1px solid var(--linha); background: var(--ground); color: var(--texto-fraco);
  border-radius: 999px; padding: 6px 14px; font-size: var(--t-mini);
  font-weight: 600; cursor: pointer; min-height: 34px;
}
.modo:hover { border-color: var(--linha-forte); color: var(--texto); }
.modo-ativo {
  background: var(--acento); border-color: var(--acento); color: #ffffff;
}
.busca-ajuda {
  margin: var(--e2) 0 0; font-size: var(--t-mini); color: var(--texto-fraco);
}

@media (max-width: 980px) {
  /* A folha cobre a tela; o fundo para de rolar por trás. */
  .folha:not(:empty) {
    position: fixed; inset: 0; z-index: 60;
    border-radius: 0; border: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: var(--e4);
    padding-top: calc(var(--e4) + env(safe-area-inset-top));
    padding-bottom: calc(var(--e6) + env(safe-area-inset-bottom));
  }
  body.com-folha { overflow: hidden; }
  .modo { min-height: 40px; padding: 8px 16px; font-size: var(--t-peq); }
}

/* ====================================================================
   Folha de dados abaixo da lista + resumo dos melhores (03/08/2026)
   ====================================================================
   A folha saiu da lateral e passou a abrir ABAIXO do resultado, na largura
   toda — como puxar uma ficha de papel embaixo da lista. Cabe mais dado por
   linha, funciona igual no celular e no computador, e some a decisao de
   "qual coluna olho primeiro".

   Cantos praticamente retos (3px): pedido do dono, e combina com a leitura
   de tabela e documento que o sistema faz.
   ==================================================================== */

/* Desfaz o layout de duas colunas da versão anterior. */
.area-trabalho { display: block; }
.folha:not(:empty) {
  position: static;
  margin-top: var(--e4);
  max-height: none;
  overflow: visible;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: var(--e5);
  display: grid;
  gap: var(--e4);
}
.folha:empty { display: none; }

/* Bordas retas nos elementos que ficavam arredondados demais. */
.card, .lead, .import-cartao, .previa-cartao, .export-cartao, .login-cartao,
.busca-painel, .painel-filtros, .ficha-bloco, .ficha-essencial,
.tabela-envolucro, .caixa-erro, .caixa-alerta, .caixa-sucesso,
.dossie-carregando, .resumo { border-radius: var(--raio); }
.busca-campo, input, select, textarea,
.botao-primario, .botao-fantasma, .botao-perigo, .pag-botao,
.ficha-fechar, .campo-mini, .botao-mini { border-radius: var(--raio-peq); }
/* Chips e etiquetas: retos também, mas com um respiro. */
.chip, .badge, .modo, .saldo, .filtros-contador { border-radius: var(--raio-peq); }

/* ---------- Resumo: os melhores dados ---------- */
/* "Melhores dados" — lista compacta, não mais uma grade de caixas.
   Antes cada telefone/e-mail/endereço era um cartão com borda e padding
   grande, espalhados; ficava "gigantesco". Agora é uma lista enxuta: rótulo
   pequeno, valor, e a nota numa linha só, separados por divisória fina. */
.resumo {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  padding: var(--e3) var(--e3) 2px;
}
.resumo-titulo {
  margin: 0 0 var(--e2); font-size: var(--t-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--texto-fraco);
}
.resumo-grade { display: flex; flex-direction: column; }

.resumo-item {
  display: grid; gap: 1px; min-width: 0;
  padding: 7px 0 7px 0;
  border-bottom: 1px solid var(--linha);
}
.resumo-grade > .resumo-item:last-child { border-bottom: 0; }
/* O telefone principal é o dado mais usado: um filete na cor de acento à
   esquerda, discreto, em vez de uma caixa inteira destacada. */
.resumo-item-forte { padding-left: var(--e2); border-left: 2px solid var(--acento); }
.resumo-rot {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--texto-fraco); line-height: 1.3;
}
.resumo-valor {
  font-size: var(--t-base); font-weight: 640; color: var(--texto);
  text-decoration: none; overflow-wrap: anywhere; line-height: 1.2;
}
a.resumo-valor:hover { color: var(--acento); text-decoration: underline; }
.resumo-nota {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px var(--e2);
  margin-top: 1px; font-size: var(--t-mini); color: var(--texto-fraco);
}

/* Medidor da nota: barra curta e discreta. Número no title (hover). */
.medidor {
  display: inline-block; width: 32px; height: 3px;
  background: var(--linha); border-radius: 2px; overflow: hidden;
  flex: 0 0 auto;
}
.medidor-cheio { display: block; height: 100%; background: var(--confirmado); }

@media (max-width: 680px) {
  .folha:not(:empty) { padding: var(--e4); }
}

/* ---------- Viabilidade de fibra da Vivo ----------
   Roxo da Vivo, e não o azul do sistema. Aqui a cor tem função: identifica
   de qual operadora é a consulta. Quando entrarem outras operadoras, cada
   uma leva a sua — e o vendedor reconhece de longe sem ler. É a única
   exceção à regra de "azul é ação", e é uma exceção com motivo. */
:root {
  --vivo: #660099;
  --vivo-claro: #8b2fc9;
  --vivo-fundo: rgba(102, 0, 153, .06);
}

.cobertura-area { margin-top: var(--e2); }

.botao-vivo {
  display: inline-flex; align-items: center; gap: var(--e2);
  width: 100%; justify-content: center;
  min-height: 40px; padding: 0 var(--e4);
  font: inherit; font-size: var(--t-peq); font-weight: 650;
  color: #ffffff; background: var(--vivo);
  border: 1px solid var(--vivo); border-radius: var(--raio-peq);
  cursor: pointer; transition: background .12s ease;
}
.botao-vivo::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #ffffff; opacity: .85; flex: 0 0 auto;
}
.botao-vivo:hover:not(:disabled) { background: var(--vivo-claro); }
.botao-vivo:disabled { opacity: .6; cursor: progress; }
.botao-vivo.htmx-request::before { animation: pulso-vivo 1s ease-in-out infinite; }
@keyframes pulso-vivo { 50% { opacity: .2; } }

.cobertura {
  display: grid; gap: var(--e1);
  padding: var(--e3);
  border: 1px solid var(--vivo);
  border-left: 4px solid var(--vivo);
  border-radius: var(--raio-peq);
  background: var(--vivo-fundo);
  font-size: var(--t-mini);
}
.cobertura-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
/* Sem cobertura e erro continuam em roxo na borda (é consulta Vivo), mas o
   selo dentro diz o resultado — cor da marca não pode virar semáforo. */
.cobertura-nao, .cobertura-erro { background: transparent; }
.cobertura-vel { font-size: var(--t-med); color: var(--vivo); font-weight: 700; }
.cobertura-endereco, .cobertura-nota { margin: 0; color: var(--texto-fraco); }
.cobertura-falta { margin: var(--e2) 0 0; font-size: var(--t-mini); color: var(--texto-fraco); }

/* Endereço da empresa, dentro do cartão dela. */
.resumo-endereco-empresa {
  font-size: var(--t-mini); color: var(--texto-fraco);
  display: block; margin-top: 2px;
}

/* Nome dos arquivos de origem: só o admin vê, e em tom discreto — é
   informação de operação, não de venda. */
.fonte-admin {
  font-size: var(--t-micro); color: var(--texto-fraco);
  opacity: .75; font-style: italic;
}

/* Campo do nome da base, na tela de mapeamento. */
.campo-base { margin-bottom: var(--e4); max-width: 420px; }
.campo-dica { font-size: var(--t-mini); color: var(--texto-fraco); }
.atualizacao-contatos { margin-top: var(--e4); }

/* Alertas de identidade (óbito, PEP): linha própria, para não se perderem
   no meio dos campos. */
.ficha-alertas { margin: var(--e2) 0 0; display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---------- Cobertura de várias operadoras ---------- */
.cobertura-geral-area { margin-top: var(--e1); }
.cobertura-geral {
  border: 1px solid var(--linha-forte); border-radius: var(--raio-peq);
  padding: var(--e3); font-size: var(--t-mini);
  background: var(--superficie);
}
.operadoras {
  list-style: none; margin: var(--e2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--e1) var(--e2);
}
.operadora {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e2); padding: var(--e1) var(--e2);
  border: 1px solid var(--linha); border-radius: var(--raio-peq);
  background: var(--ground);
}
.operadora-nome { font-weight: 650; color: var(--texto); }
.operadora-vel { font-weight: 700; color: var(--confirmado); font-variant-numeric: tabular-nums; }
/* Quem não atende fica presente mas apagado: saber que NÃO tem também é
   informação de venda — evita prometer o que não existe. */
.operadora-sem { opacity: .55; }
.operadora-sem-texto { color: var(--texto-fraco); font-size: var(--t-micro); }

/* Operadora do celular, no resumo. */
.chip-operadora { border-color: var(--acento); color: var(--acento); font-weight: 650; }

/* Situações da cobertura Vivo. A borda continua roxa (é consulta Vivo);
   quem diz o resultado é o selo. */
.cobertura-explicacao { margin: 0; color: var(--texto); }
.cobertura-bloqueado, .cobertura-regiao { background: transparent; }
.operadora { flex-wrap: wrap; }
.operadora-tec {
  width: 100%; font-size: var(--t-micro); color: var(--texto-fraco);
}

/* ---------- Consulta Claro ---------- */
.claro-caixa {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  padding: var(--e3); border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte); border-radius: var(--raio-peq);
  font-size: var(--t-mini); margin-top: var(--e2);
}
.claro-e-cliente { border-left-color: var(--risco); background: rgba(192, 42, 60, .05); }
.claro-livre { border-left-color: var(--confirmado); }
.claro-sessao { display: block; border-left-color: var(--atencao); }

/* Consulta pelo serviço da VPS (admin). Os três campos numa linha só,
   quebrando no celular; o número é curto porque é sempre curto. */
.claro-servico-form {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  align-items: center; margin-top: var(--e2);
}
.claro-servico-form .busca-campo { flex: 1 1 150px; min-width: 0; }
.claro-servico-form .claro-servico-numero { flex: 0 1 90px; }
.claro-servico-detalhe { width: 100%; }
.claro-servico-detalhe p { margin: var(--e1) 0 0; }
@media (max-width: 640px) {
  .claro-servico-form .busca-campo,
  .claro-servico-form .claro-servico-numero { flex: 1 1 100%; }
  .claro-servico-form .botao-primario { width: 100%; }
}

/* Passo a passo do navegador na VPS. */
.passos-navegador { margin: var(--e2) 0; padding-left: 20px; font-size: var(--t-mini); line-height: 1.7; }
.comando-caixa {
  background: var(--ground); border: 1px solid var(--linha); border-radius: var(--raio-peq);
  padding: var(--e2) var(--e3); word-break: break-all; font-size: var(--t-mini);
}

/* ---------------------------------------------------------------------------
   Faixa da Claro no topo da ficha.

   Vermelho da marca, e no topo de proposito: "ja e cliente?" e a pergunta que
   decide se vale ligar. Antes ficava no fim do bloco de melhores dados, depois
   dos telefones -- ou seja, o vendedor descobria depois de ja ter escolhido
   para onde ligar. Aqui ele ve antes de ler qualquer outra coisa.
--------------------------------------------------------------------------- */
:root {
  --claro: #da291c;
  --claro-escuro: #b31f14;
  --claro-fundo: rgba(218, 41, 28, .06);
}

.claro-faixa {
  margin: 0 0 var(--e3);
  padding: var(--e3);
  background: var(--claro-fundo);
  border: 1px solid color-mix(in srgb, var(--claro) 30%, transparent);
  border-left: 4px solid var(--claro);
  border-radius: var(--raio-peq);
}
/* Confirmado como cliente: fundo mais forte, porque aqui a resposta e "nao
   ofereca" e ela precisa doer um pouco na vista. */
.claro-faixa-conectado {
  background: color-mix(in srgb, var(--claro) 12%, transparent);
  border-color: color-mix(in srgb, var(--claro) 55%, transparent);
}

.claro-faixa-topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
}
.claro-marca {
  font-weight: 800; letter-spacing: .02em; color: var(--claro);
  text-transform: uppercase; font-size: var(--t-peq);
}
.claro-selo {
  font-size: var(--t-peq); font-weight: 750; letter-spacing: .01em;
  color: #ffffff; background: var(--claro);
  padding: 3px var(--e2); border-radius: var(--raio-peq);
}
.claro-selo-fraco {
  color: var(--claro); background: transparent;
  border: 1px solid color-mix(in srgb, var(--claro) 45%, transparent);
}
/* Nome proprio: `.claro-livre` ja existe para a caixa de resultado (linha
   ~2526) e reaproveitar o nome mudaria a aparencia dela sem querer. */
.claro-faixa-livre { font-size: var(--t-peq); color: var(--texto-fraco); }
.claro-rot { font-size: var(--t-peq); color: var(--texto-fraco); }
.claro-acao { margin-left: auto; }

.botao-claro {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 34px; padding: 0 var(--e3);
  font: inherit; font-size: var(--t-mini); font-weight: 650;
  color: #ffffff; background: var(--claro);
  border: 1px solid var(--claro); border-radius: var(--raio-peq);
  cursor: pointer; transition: background .12s ease;
}
.botao-claro:hover:not(:disabled) { background: var(--claro-escuro); }
.botao-claro:disabled { opacity: .6; cursor: progress; }

.claro-faixa-dados {
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
  margin-top: var(--e2); font-size: var(--t-mini);
  color: var(--texto-fraco);
}
.claro-rot-min { text-transform: uppercase; font-size: 10px; letter-spacing: .04em; opacity: .75; }
.claro-quando { margin-left: auto; opacity: .8; }

/* Selo no cabecalho da ficha PF, ao lado de "obito registrado". */
.badge-claro {
  background: var(--claro); color: #ffffff;
  border: 1px solid var(--claro); font-weight: 700;
}
.badge-claro-fraco {
  background: transparent; color: var(--claro);
  border-color: color-mix(in srgb, var(--claro) 45%, transparent);
}

/* Marca de onde veio um campo que a base nao tinha (hoje: nome da mae). */
.fonte-dado {
  margin-left: var(--e1); padding: 1px 5px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--claro); background: var(--claro-fundo);
  border: 1px solid color-mix(in srgb, var(--claro) 30%, transparent);
  border-radius: var(--raio-peq); white-space: nowrap;
}

@media (max-width: 640px) {
  .claro-acao, .claro-quando { margin-left: 0; }
  .claro-faixa-topo { gap: var(--e1) var(--e2); }
  .botao-claro { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Segunda via de fatura (dentro da faixa da Claro).
   O cliente responde as 2 perguntas de segurança; o resultado traz valor,
   PIX, linha digitável e o link para enviar. Mesma cor da marca.
--------------------------------------------------------------------------- */
.fatura-area { margin-top: var(--e2); }
.botao-claro-linha { width: auto; }

.fatura-form { margin-top: var(--e2); }
.fatura-instr { font-size: var(--t-mini); color: var(--texto-fraco); margin: 0 0 var(--e2); }

.fatura-pergunta {
  border: 1px solid color-mix(in srgb, var(--claro) 25%, transparent);
  border-radius: var(--raio-peq);
  padding: var(--e2) var(--e3); margin: 0 0 var(--e2);
}
.fatura-pergunta legend {
  font-size: var(--t-peq); font-weight: 650; color: var(--claro);
  padding: 0 var(--e1);
}
.fatura-opcao {
  display: flex; align-items: center; gap: var(--e2);
  padding: 6px var(--e1); font-size: var(--t-peq); cursor: pointer;
  border-radius: var(--raio-peq);
}
.fatura-opcao:hover { background: var(--claro-fundo); }
.fatura-opcao input { flex: 0 0 auto; accent-color: var(--claro); }

.fatura-acoes { margin-top: var(--e2); }

.fatura-cartao {
  margin-top: var(--e2); padding: var(--e3);
  background: color-mix(in srgb, var(--claro) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--claro) 40%, transparent);
  border-radius: var(--raio-peq);
}
.fatura-cartao-topo {
  display: flex; align-items: center; gap: var(--e2);
  margin-bottom: var(--e1);
}
.fatura-status {
  margin-left: auto; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: #333;
  padding: 2px var(--e2); border-radius: 20px;
}
.fatura-valor { font-size: 26px; font-weight: 800; color: var(--claro); }
.fatura-venc { font-size: var(--t-mini); color: var(--texto-fraco); }
.fatura-atrasada { color: var(--claro); }
.fatura-plano { font-size: var(--t-mini); color: var(--texto-fraco); margin-top: var(--e1); }

.fatura-bloco { margin-top: var(--e2); }
.fatura-bloco .claro-rot-min { display: block; margin-bottom: 3px; }
.fatura-codigo {
  font-size: var(--t-mini); word-break: break-all;
  background: var(--ground); border: 1px solid var(--linha);
  border-radius: var(--raio-peq); padding: var(--e2);
}
.fatura-link-acoes { display: flex; gap: var(--e2); margin-top: var(--e1); }
.fatura-link .botao-claro { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------------------
   Card de operadoras no topo da ficha.
   Junta "é cliente Claro?" + "tem fibra Vivo/Claro neste endereço?". Tudo
   carrega sozinho ao abrir o lead (htmx hx-trigger=load) e fica salvo no banco.
   Duas colunas em tela larga; empilha no celular.
--------------------------------------------------------------------------- */
.op-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2);
  margin: 0 0 var(--e3);
}
@media (max-width: 640px) { .op-card { grid-template-columns: 1fr; } }

.op-bloco {
  padding: var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  background: var(--ground);
}
.op-bloco-cliente { border-left: 4px solid var(--claro); }
.op-bloco-fibra   { border-left: 4px solid var(--confirmado); }

.op-bloco-topo {
  display: flex; align-items: baseline; gap: var(--e2);
  margin-bottom: var(--e2);
}
.op-titulo { font-size: var(--t-peq); font-weight: 700; }
.op-end { font-size: var(--t-mini); color: var(--texto-fraco);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-carregando { font-size: var(--t-mini); color: var(--texto-fraco); font-style: italic; }

.op-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.op-detalhe { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
  margin-top: var(--e2); font-size: var(--t-mini); color: var(--texto-fraco); }
.op-rot { text-transform: uppercase; font-size: 10px; letter-spacing: .04em; opacity: .75; }
.op-nome { font-weight: 650; font-size: var(--t-peq); }
.op-msg { font-size: var(--t-mini); color: var(--texto-fraco); }
.op-cache { opacity: .85; }
.op-relink { color: var(--claro); text-decoration: underline; cursor: pointer; }
.op-aviso-cliente { margin: var(--e2) 0 0; font-size: var(--t-mini);
  color: var(--claro); font-weight: 600; }

/* Selos */
.op-selo {
  display: inline-block; font-size: var(--t-mini); font-weight: 700;
  letter-spacing: .01em; padding: 2px var(--e2); border-radius: var(--raio-peq);
  white-space: nowrap;
}
.op-selo-claro { color: #fff; background: var(--claro); }
.op-selo-claro-fraco { color: var(--claro); border: 1px solid color-mix(in srgb, var(--claro) 45%, transparent); }
.op-selo-livre { color: var(--sucesso-texto); background: color-mix(in srgb, var(--confirmado) 14%, transparent); }
.op-selo-fibra { color: #fff; background: var(--confirmado); }
.op-selo-alerta { color: var(--alerta-texto); background: color-mix(in srgb, var(--atencao) 16%, transparent); }
.op-selo-sem { color: var(--risco); border: 1px solid color-mix(in srgb, var(--risco) 40%, transparent); }
.op-selo-neutro { color: var(--texto-fraco); border: 1px solid var(--linha); }

.op-chip {
  font-size: var(--t-mini); padding: 1px var(--e2);
  border: 1px solid var(--linha); border-radius: 20px; color: var(--texto-fraco);
}
.op-vel { font-size: var(--t-peq); font-weight: 700; color: var(--confirmado); }

/* Fibra: Vivo e Claro lado a lado dentro do bloco */
.op-fibra-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
@media (max-width: 420px) { .op-fibra-grade { grid-template-columns: 1fr; } }
.op-fibra-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); }
.op-marca { font-weight: 800; text-transform: uppercase; font-size: 10px; letter-spacing: .03em; }
.op-marca-vivo { color: var(--vivo); }
.op-marca-claro { color: var(--claro); }

/* ---------------------------------------------------------------------------
   Refino dos cartões de operadora (com logo).
   Um cartão por operadora, empilhados: Claro (cliente + fibra) e Vivo abaixo.
   Faixa lateral e logo na cor da marca; seções separadas por divisória fina.
--------------------------------------------------------------------------- */
.op-cards { display: flex; flex-direction: column; gap: var(--e2); margin: 0 0 var(--e3); }

.op-op {
  border: 1px solid var(--linha);
  border-radius: 10px; overflow: hidden;
  background: var(--superficie);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}
.op-op-claro { border-left: 3px solid var(--claro); }
.op-op-vivo  { border-left: 3px solid var(--vivo); }

.op-op-cab {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3);
  background: linear-gradient(0deg, transparent, rgba(16,24,40,.02));
  border-bottom: 1px solid var(--linha);
}
.op-logo {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px;
  object-fit: contain; box-shadow: 0 1px 2px rgba(16,24,40,.12);
}
.op-op-nome { font-weight: 800; font-size: var(--t-base); letter-spacing: .01em; }
.op-op-cab .op-end {
  margin-left: auto; font-size: var(--t-mini); color: var(--texto-fraco);
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.op-op-secao { padding: var(--e2) var(--e3); }
.op-op-secao + .op-op-secao { border-top: 1px dashed var(--linha); }
.op-op-rot {
  display: block; margin-bottom: 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-fraco); font-weight: 700;
}
.op-fibra-slot { display: block; }

/* O logo da Claro é um círculo; o da Vivo, um quadrado arredondado.
   Deixa o recorte coerente com cada marca. */
.op-op-claro .op-logo { border-radius: 50%; }

/* =========================================================================
   Ajustes v3 da ficha: identidade junto do nome, operadoras GRANDES em
   destaque, telefones enxutos (número + operadora + tipo, sem fontes/origens).
   ===================================================================== */

/* Identidade compacta, logo abaixo do nome */
.fx-ident { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 12.5px; color: var(--texto); line-height: 1.5; }
.fx-ident:empty { display: none; }
.idpar em { font-style: normal; text-transform: uppercase; font-size: 9.5px; letter-spacing: .04em;
  color: var(--texto-fraco); font-weight: 700; margin-right: 3px; }
.idpar-risco, .idpar-risco em { color: var(--risco); }

/* Operadoras em destaque — cartões grandes empilhados (Claro cliente e, largo,
   a fibra das duas). */
.ops { display: grid; grid-template-columns: 1fr; gap: var(--e2); }
.ops-fibra { align-items: stretch; }
.ops-fibra .ops-main { flex: 1; }
.fibra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
@media (max-width: 520px) { .fibra-grid { grid-template-columns: 1fr; } }
.fibra-op { display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 9px 11px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 9px; }
.fibra-cab { display: flex; align-items: center; gap: 6px; }
.fibra-logo { object-fit: contain; box-shadow: 0 1px 2px rgba(16,24,40,.16); flex: 0 0 auto; }
.fibra-mk { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.mk-vivo { color: var(--vivo); } .mk-claro { color: var(--claro); }
.selo-g { font-size: 15px; font-weight: 800; padding: 3px 12px; }
.fibra-det { font-size: 12px; color: var(--texto-fraco); line-height: 1.35; }
.fibra-pe { margin-top: 8px; font-size: 11px; }
.fibra-erro { display: flex; align-items: center; gap: 6px; }
.ops-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 15px;
  background: var(--ground); border: 1px solid var(--linha); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.ops-logo { flex: 0 0 auto; object-fit: contain; box-shadow: 0 1px 3px rgba(16,24,40,.20); }
.ops-card > .ops-logo { width: 40px; height: 40px; }
.ops-duplo { display: inline-flex; flex: 0 0 auto; }
.ops-duplo .ops-logo { width: 34px; height: 34px; }
.ops-duplo .ops-logo + .ops-logo { margin-left: -9px; }
.ops-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ops-rot { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-fraco); font-weight: 700; }
.ops-corpo { min-width: 0; }
/* selos e botão maiores dentro das operadoras */
.ops .selo { font-size: 13.5px; font-weight: 800; padding: 3px 11px; }
.ops .btnv { font-size: 12.5px; padding: 5px 12px; margin-left: 2px; }
.ops .mini { font-size: 12px; }
.ops .aud-mk { font-size: 12px; }
.ops .audit-l { gap: 7px 8px; align-items: center; }
.ops .aud-op { gap: 6px; }

/* Telefones / e-mails enxutos */
.tel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.bloco .tel:last-child { border-bottom: 0; }
.tel-num { font-size: 15px; font-weight: 650; color: var(--texto); text-decoration: none; letter-spacing: .01em; overflow-wrap: anywhere; }
.tel-num:hover { color: var(--acento); text-decoration: underline; }
.tel-tipo { font-size: 11px; color: var(--texto-fraco); }
.tel-hot { color: var(--confirmado); font-size: 9px; }

/* Busca rápida por campos fixos (PF): Nome, CPF, CEP, Cidade, Nascimento.
   Cada campo já sabe o que é — o sistema não adivinha. */
.busca-fixos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e2) var(--e3); margin-bottom: var(--e3);
}
.busca-fixos .bf-nome { grid-column: 1 / -1; }
.busca-fixos .campo-grupo { margin: 0; }

/* Aviso do quiz da 2ª via: resposta errada bloqueia o boleto por 10 min. */
.fatura-aviso {
  margin: 0 0 var(--e2); padding: 6px 10px; font-size: var(--t-mini);
  color: var(--alerta-texto); background: color-mix(in srgb, var(--atencao) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--atencao) 34%, transparent); border-radius: var(--raio-peq);
}

/* 2ª via — opções MAIORES e mais espaçadas, para não errar o clique com o
   cliente na linha (resposta errada bloqueia o boleto por 10 min). Cada opção
   vira um alvo grande e distinto; a marcada fica destacada. */
.fatura-pergunta { padding: var(--e3); margin-bottom: var(--e3); }
.fatura-pergunta legend { font-size: var(--t-base); font-weight: 700; padding: 0 var(--e1); }
.fatura-opcao {
  gap: var(--e3); align-items: center;
  padding: 13px var(--e3); margin-top: var(--e2);
  font-size: var(--t-base); line-height: 1.3;
  border: 1px solid var(--linha); border-radius: 10px;
  min-height: 50px; transition: border-color .1s ease, background .1s ease;
}
.fatura-opcao:hover { background: var(--claro-fundo); border-color: color-mix(in srgb, var(--claro) 40%, transparent); }
.fatura-opcao input { width: 22px; height: 22px; accent-color: var(--claro); }
/* Opção marcada: contorno vermelho da Claro, sem dúvida do que foi escolhido. */
.fatura-opcao:has(input:checked) {
  border-color: var(--claro);
  background: color-mix(in srgb, var(--claro) 10%, transparent);
  box-shadow: 0 0 0 1px var(--claro) inset;
  font-weight: 650;
}

/* Recarregar perguntas — fora do formulário, separado por uma linha. */
.fatura-recarregar {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid var(--linha);
}

/* Número da opção (1, 2, 3) — para ler pro cliente ao telefone. */
.fatura-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--claro); color: #fff; font-weight: 800;
  font-size: var(--t-peq); font-variant-numeric: tabular-nums;
}
.fatura-op-txt { flex: 1; }
/* Na opção marcada o número fica com anel, reforçando a escolha. */
.fatura-opcao:has(input:checked) .fatura-num { box-shadow: 0 0 0 2px color-mix(in srgb, var(--claro) 35%, transparent); }

/* Conferência do cadastro na 2ª via — o cliente confirmou na Claro; comparamos
   com o nosso cadastro (qualidade do dado, depois da fatura). */
.conf-cadastro {
  margin-top: var(--e3); padding: var(--e3);
  border: 1px solid var(--linha); border-radius: 10px; background: var(--ground);
}
.conf-tit { display: block; font-size: var(--t-mini); font-weight: 700; margin-bottom: var(--e2);
  text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); }
.conf-sub { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; }
.conf-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  padding: 5px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-peq); }
.conf-linha:last-child { border-bottom: 0; }
.conf-rot { flex: 0 0 64px; text-transform: uppercase; font-size: 10px; letter-spacing: .04em;
  font-weight: 700; color: var(--texto-fraco); }
.conf-val { color: var(--texto); }
.conf-tag { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 20px; }
.conf-tag-ok { color: var(--sucesso-texto); background: color-mix(in srgb, var(--confirmado) 15%, transparent); }
.conf-tag-dif { color: var(--risco); background: color-mix(in srgb, var(--risco) 12%, transparent); }
.conf-tag-neutro { color: var(--texto-fraco); border: 1px solid var(--linha); }

/* Bloqueio da Claro na 2ª via — destaque para o operador não insistir. */
.caixa-bloqueio { border-color: color-mix(in srgb, var(--atencao) 50%, transparent);
  background: color-mix(in srgb, var(--atencao) 12%, transparent); }
.caixa-bloqueio strong { color: var(--alerta-texto); }

/* ============================================================
   REFINAMENTO VISUAL v4 (03/08/2026) — polimento coeso, mesma
   direção "ERP claro, cor só onde tem significado". Sobrescreve
   pontos soltos. Remover este bloco reverte tudo.
   ============================================================ */
:root {
  --raio-ctrl: 9px;   /* inputs e botões coerentes entre si */
  --raio-card: 12px;  /* cartões */
  /* Descolamento SUTIL (a borda separa; a sombra só levanta um tico) --
     coerente com a filosofia do tema: no claro, sombra forte suja. */
  --sombra-card: 0 1px 1px rgba(20,32,43,.04), 0 1px 6px -5px rgba(20,32,43,.07);
}

/* Aproveitar o monitor: a busca abre a ficha ao lado e sobrava tela. */
.topo-inner, .conteudo { max-width: 1280px; }

/* Mesmo raio nos controles (antes misturava 3px e 10px na mesma tela). */
.botao-primario, .busca-campo, .busca-botao, .campo-grupo input, .modo,
.busca-fixos input { border-radius: var(--raio-ctrl); }

/* Botão primário: leve relevo e resposta ao clique. */
.botao-primario { box-shadow: 0 1px 1px rgba(20,32,43,.12);
  transition: background-color .15s ease, transform .06s ease, box-shadow .12s ease; }
.botao-primario:hover { background: var(--acento-forte); }
.botao-primario:active { transform: translateY(1px); box-shadow: none; }

/* Foco visível e igual em tudo que é clicável (acessibilidade + acabamento). */
.botao-primario:focus-visible, .botao-fantasma:focus-visible, .modo:focus-visible,
.botao-claro:focus-visible, .btnv:focus-visible, .lead-clicavel:focus-visible,
.topo-link:focus-visible, .aba:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
}

/* Cartões coesos: mesmo raio e um descolamento suave e igual. */
.op-op, .ops-card, .bloco, .audit, .fatura-cartao, .conf-cadastro, .fibra-op,
.resumo, .dados, .folha:not(:empty) { border-radius: var(--raio-card); }
.op-op, .ops-card, .bloco, .fatura-cartao, .folha:not(:empty) { box-shadow: var(--sombra-card); }

/* Cards de resultado: cantos coerentes e resposta ao passar o mouse. */
.lead { border-radius: 10px;
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease, background .12s ease; }
.lead-clicavel:hover, .lead-clicavel:focus-visible { box-shadow: var(--sombra-card); transform: translateY(-1px); }

/* Tipografia: títulos mais firmes, texto mais limpo. */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.pagina-titulo, .fx-nome, .resumo-titulo, .ficha-titulo, .op-op-nome { letter-spacing: -.012em; }
.pill, .op-tag, .selo, .badge { letter-spacing: .005em; }

/* ============================================================
   Painel (dashboard) — KPIs limpos + barras horizontais reais.
   Azul = magnitude (UF, cidade); status = situação das empresas.
   ============================================================ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-card);
  padding: 13px 16px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--sombra-card); }
.kpi-destaque { border-top: 3px solid var(--acento); }
.kpi-rot { font-size: var(--t-mini); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco); }
.kpi-num { font-size: 30px; font-weight: 750; line-height: 1.05; color: var(--texto);
  font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.kpi-sub { font-size: var(--t-mini); color: var(--texto-fraco); }
.kpi-zero .kpi-num { color: var(--texto-fraco); }

.paineis-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin-bottom: var(--e3); }
@media (max-width: 760px) { .paineis-grade { grid-template-columns: 1fr; } }
.pnl-card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-card);
  padding: var(--e4); box-shadow: var(--sombra-card); }
.pnl-tit { margin: 0 0 var(--e3); font-size: var(--t-peq); font-weight: 700; letter-spacing: .01em;
  display: flex; align-items: baseline; gap: var(--e2); }
.pnl-tit-sub { font-size: var(--t-mini); font-weight: 500; color: var(--texto-fraco); }
.pnl-nota { margin: var(--e3) 0 0; font-size: var(--t-mini); color: var(--texto-fraco); }

/* Barras: rótulo | trilho | valor, alinhados em colunas. */
.cbars { display: flex; flex-direction: column; gap: 7px; }
.cbar { display: grid; grid-template-columns: var(--rot, 44px) 1fr auto; align-items: center; gap: var(--e2); }
.cbar-rot { font-size: var(--t-mini); color: var(--texto); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbar-track { height: 12px; background: var(--elevado); border-radius: 3px; overflow: hidden; }
.cbar-fill { display: block; height: 100%; min-width: 3px; border-radius: 0 4px 4px 0; }
.cbar-val { font-size: var(--t-mini); font-variant-numeric: tabular-nums; color: var(--texto);
  display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.cbar-pct { font-size: 10px; color: var(--texto-fraco); min-width: 36px; text-align: right; }

/* ============================================================
   TOPO v5 — fixo, limpo e elegante. Consolida os .topo-link que
   estavam definidos em dois lugares (por isso ficava estranho) e
   dá um estado ativo claro. Vem por último, então manda.
   ============================================================ */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 rgba(20,32,43,.02), 0 10px 24px -22px rgba(20,32,43,.55);
}
.topo-inner { padding: 11px 24px; gap: 20px; }
.marca-texto small { color: var(--acento); opacity: .85; }

.topo-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.topo-link {
  font-size: 13.5px; font-weight: 600; color: var(--texto-fraco);
  text-decoration: none; padding: 8px 12px 9px; border-radius: 8px 8px 0 0; line-height: 1;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .14s ease, box-shadow .14s ease;
}
.topo-link:hover { color: var(--texto); box-shadow: inset 0 -2px 0 var(--linha-forte); }
.topo-link[aria-current="page"] {
  color: var(--acento); font-weight: 700; box-shadow: inset 0 -2px 0 var(--acento);
}
.topo-link:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.topo-usuario { gap: 10px; }
.usuario-nome { color: var(--texto); font-weight: 550; }
.topo-usuario .botao-fantasma { padding: 6px 13px; }

@media (max-width: 720px) {
  .topo-inner { flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px; }
  .topo-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
}

/* Campos fixos da busca (Nome / CPF / CEP / Cidade / Nascimento): 4 colunas
   IGUAIS (Nome full em cima). minmax(0,1fr) deixa encolher sem empilhar nem
   cortar; só empilha em tela pequena, por breakpoint explícito. */
.busca-fixos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.busca-fixos .campo-grupo, .busca-fixos input { min-width: 0; }
.busca-fixos input { width: 100%; }
@media (max-width: 820px) { .busca-fixos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .busca-fixos { grid-template-columns: 1fr; } }

/* ============================================================
   MAILINGS — lista viva de mailings importados (Etapa 1)
   ============================================================ */
.cabecalho-acoes { display: flex; gap: var(--e2); align-items: center; }
.botao-fantasma.perigo { color: var(--risco); border-color: rgba(192,42,60,.35); }
.botao-fantasma.perigo:hover { background: rgba(192,42,60,.08); }

/* Chips de origem */
.chip-claro { background: rgba(192,42,60,.10); color: var(--risco); border: 1px solid rgba(192,42,60,.30); }
.chip-vivo  { background: rgba(124,58,168,.10); color: #7c3aa8; border: 1px solid rgba(124,58,168,.30); }
.chip-outro { background: var(--elevado); color: var(--texto-fraco); border: 1px solid var(--linha); }

/* Grade de cards de mailing */
.mailings-grade {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.mailing-card {
  display: flex; flex-direction: column; gap: var(--e2);
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio-card); padding: var(--e4);
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 0 rgba(20,32,43,.02), 0 12px 26px -24px rgba(20,32,43,.55);
  transition: border-color .12s, transform .12s;
}
.mailing-card:hover { border-color: var(--linha-forte); transform: translateY(-1px); }
.mailing-card-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); }
.mailing-nome { font-weight: 700; font-size: 15px; }
.mailing-numeros { display: flex; align-items: baseline; gap: 6px; }
.mailing-total { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mailing-total-rot { color: var(--texto-fraco); font-size: 12px; }
.mailing-barra { height: 6px; background: var(--elevado); border-radius: 4px; overflow: hidden; }
.mailing-barra-fill { display: block; height: 100%; background: var(--confirmado); border-radius: 4px; }
.mailing-legenda { display: flex; gap: var(--e3); font-size: 12px; }
.mailing-legenda .ok { color: var(--confirmado); font-weight: 600; }
.mailing-legenda .alerta { color: var(--risco); font-weight: 600; }
.mailing-rodape { color: var(--texto-fraco); font-size: 11.5px; margin-top: auto; }

/* Filtros */
.mailing-filtros { display: flex; gap: var(--e2); margin-bottom: var(--e3); }
.filtro-chip {
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  text-decoration: none; color: var(--texto-fraco);
  background: var(--superficie); border: 1px solid var(--linha);
}
.filtro-chip:hover { border-color: var(--linha-forte); color: var(--texto); }
.filtro-chip.ativo { background: var(--acento); color: #fff; border-color: var(--acento); }

/* Tabela do mailing */
.tabela-mailing td { vertical-align: top; }
.tabela-mailing .cel-sub { color: var(--texto-fraco); font-size: 12px; margin-top: 2px; }
/* O <td> do telefone TEM que ser célula de tabela (senão não estica até a
   altura da linha e sobra um vão com o fundo verde abaixo dos telefones —
   há uma regra `.cel-tel{display:flex}` sem escopo que precisa ser vencida).
   Os .tel-linha já são flex (block-level) e empilham sozinhos. */
.tabela-mailing .cel-tel { display: table-cell; }
.tabela-mailing .cel-tel .tel-linha { margin-bottom: 2px; }
.tabela-mailing .cliente-claro { color: var(--risco); font-weight: 600; }
.tabela-mailing .cel-pend { color: var(--texto-fraco); font-size: 12px; font-style: italic; }
.tabela-mailing tr.linha-fibra { background: rgba(13,122,82,.05); }
.tabela-mailing tr.linha-fibra:hover { background: rgba(13,122,82,.09); }

/* Selos de cobertura */
.selo {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; margin: 1px 2px 1px 0;
}
.selo-vivo { background: rgba(124,58,168,.12); color: #7c3aa8; }
.selo-claro { background: rgba(192,42,60,.12); color: var(--risco); }
.selo-nao { background: var(--elevado); color: var(--texto-fraco); }

/* Paginação */
.paginacao { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e4); justify-content: center; }
.pag-atual { color: var(--texto-fraco); font-size: 13px; }

/* Progresso do "Encontrar CPF" no mailing */
.mailing-progresso { margin: 0 0 var(--e3); font-size: 14px; }
.mailing-progresso.rodando,
.mailing-progresso.ok,
.mailing-progresso.erro {
  display: flex; align-items: center; gap: var(--e2);
  padding: 10px 14px; border-radius: var(--raio-card); border: 1px solid var(--linha);
}
.mailing-progresso.rodando { background: rgba(31,95,168,.06); color: var(--acento); border-color: rgba(31,95,168,.25); }
.mailing-progresso.ok { background: rgba(13,122,82,.07); color: var(--confirmado); border-color: rgba(13,122,82,.25); }
.mailing-progresso.erro { background: rgba(192,42,60,.07); color: var(--risco); border-color: rgba(192,42,60,.25); }
.mailing-progresso .spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(31,95,168,.25); border-top-color: var(--acento);
  animation: girar .7s linear infinite; flex: none;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* CASTERS — controle do bot */
.bot-controle { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.bot-controle #bot-area { flex: 1 1 380px; }
.bot-painel { padding: 10px 14px; border-radius: var(--raio-card); border: 1px solid var(--linha); background: var(--superficie); }
.bot-painel.rodando { background: rgba(31,95,168,.06); border-color: rgba(31,95,168,.25); }
.bot-linha { display: flex; align-items: center; gap: var(--e2); font-size: 14px; }
.bot-numeros { display: flex; gap: var(--e3); flex-wrap: wrap; font-size: 13px; margin-top: 6px; color: var(--texto-fraco); }
.bot-numeros .ok { color: var(--confirmado); font-weight: 600; }
.bot-numeros .alerta { color: var(--risco); font-weight: 600; }
.bot-total { color: var(--texto-fraco); }
.bot-parar { margin-left: auto; }
.bot-zzz { color: var(--texto-fraco); }
.botao-mini { padding: 3px 10px; font-size: 13px; border-radius: var(--raio-ctrl); border: 1px solid var(--acento); background: var(--acento); color: #fff; cursor: pointer; line-height: 1; }
.botao-mini:hover { filter: brightness(1.05); }

/* ============================================================
   POLIMENTO MAILINGS + CASTERS ("mais legal")
   ============================================================ */
:root { --vivo: #7c3aa8; --claro: #c02a3c; }

/* ---- Cards de mailing: faixa da operadora + métricas ---- */
.mailing-card { position: relative; overflow: hidden; padding-top: calc(var(--e4) + 3px); }
.mailing-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--linha-forte);
}
.mailing-card--vivo::before  { background: linear-gradient(90deg, var(--vivo), #a86fce); }
.mailing-card--claro::before { background: linear-gradient(90deg, var(--claro), #e0576b); }
.mailing-metricas { display: flex; flex-wrap: wrap; gap: 4px var(--e3); font-size: 12.5px; }
.mailing-metricas .mm { color: var(--texto-fraco); }
.mailing-metricas .mm b { font-variant-numeric: tabular-nums; }
.mailing-metricas .ok { color: var(--confirmado); }
.mailing-metricas .alerta { color: var(--risco); }
.mailing-metricas .mm-fibra b { color: var(--vivo); }
.mailing-rodape { display: flex; justify-content: space-between; align-items: center; }
.mailing-abrir { color: var(--acento); font-weight: 600; opacity: 0; transform: translateX(-4px); transition: .14s; }
.mailing-card:hover .mailing-abrir { opacity: 1; transform: none; }

/* ---- Faixa de resumo do mailing ---- */
.resumo-faixa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px; background: var(--linha); border: 1px solid var(--linha);
  border-radius: var(--raio-card); overflow: hidden; margin-bottom: var(--e3);
}
.rf-item { background: var(--superficie); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.rf-num { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.rf-rot { font-size: 11.5px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .03em; }
.rf-ok .rf-num { color: var(--confirmado); }
.rf-alerta .rf-num { color: var(--risco); }
.rf-fibra .rf-num { color: var(--vivo); }

/* ---- Bot: barra de varredura + radar ---- */
.bot-progresso { height: 7px; background: var(--elevado); border-radius: 999px; overflow: hidden; margin: 9px 0 4px; }
.bot-progresso-fill {
  display: block; height: 100%; border-radius: 999px; min-width: 3px;
  background: linear-gradient(90deg, var(--acento), #4a86cf);
  background-size: 200% 100%; animation: varrer 1.4s linear infinite;
  transition: width .5s ease;
}
.bot-progresso-fill.parado { animation: none; background: var(--linha-forte); }
@keyframes varrer { from { background-position: 200% 0; } to { background-position: 0 0; } }
.radar {
  width: 14px; height: 14px; border-radius: 50%; flex: none; position: relative;
  background: var(--acento);
}
.radar::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--acento); animation: pulso 1.3s ease-out infinite;
}
@keyframes pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
.bot-numeros .ok { color: var(--confirmado); }

/* ---- KPIs de destaque com um respiro de cor ---- */
.kpi-destaque { border-top: 3px solid var(--acento); }

/* ---- Selos de operadora usando os tokens ---- */
.selo-vivo { background: rgba(124,58,168,.12); color: var(--vivo); }
.selo-claro { background: rgba(192,42,60,.12); color: var(--claro); }

/* Botão pro radar ao vivo */
.botao-radar{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:9px 16px;border-radius:var(--raio-ctrl);font-weight:700;font-size:13.5px;
  color:#04121a;background:linear-gradient(180deg,#22d3ee,#12a7c4);
  box-shadow:0 6px 20px -8px rgba(34,211,238,.7);white-space:nowrap;
}
.botao-radar:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* Faixa de competências (lotes de liberação) */
.comp-faixa { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e3); }
.comp-chip { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
  border: 1px solid var(--linha); border-left: 3px solid var(--vivo); border-radius: var(--raio-card);
  background: var(--superficie); }
.comp-nome { font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.comp-sub { font-size: 12px; color: var(--texto-fraco); }

/* Listas de ligação (liberações da cidade) */
.lig-bloco { margin-bottom: var(--e5, 28px); }
.lig-cabecalho { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e2); }
.lig-titulo { font-size: 17px; font-weight: 700; margin: 0; }
.lig-resumo { display: flex; gap: 6px; align-items: center; flex: 1; }
.lig-nota { color: var(--texto-fraco); font-size: 12px; }
.lig-cabecalho .botao { margin-left: auto; }
.prio { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.prio-quente { background: linear-gradient(90deg, rgba(255,93,60,.16), rgba(255,140,60,.12)); color: #d1451f; }
.prio-morno { background: rgba(163,98,10,.12); color: var(--atencao); }
.prio-frio { background: var(--elevado); color: var(--texto-fraco); }

/* ============================================================
   NAVEGAÇÃO LATERAL PREMIUM (sidebar) — substitui a barra de topo
   ============================================================ */
:root { --nav-w: 250px; }

/* Desloca o conteúdo só quando o sidebar existe (login/radar ficam livres). */
body:has(.nav-lateral) { padding-left: var(--nav-w); }

.nav-lateral {
  position: fixed; top: 0; left: 0; z-index: 40;
  width: var(--nav-w); height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--superficie);
  border-right: 1px solid var(--linha);
  box-shadow: 1px 0 0 rgba(20,32,43,.02), 8px 0 30px -26px rgba(20,32,43,.5);
}

/* Marca */
.nav-marca { display: flex; align-items: center; gap: 11px; text-decoration: none;
  color: inherit; padding: 18px 18px 14px; }
.nav-logo { width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .02em;
  color: #fff; background: linear-gradient(150deg, #2b71c0, var(--acento));
  box-shadow: 0 6px 16px -8px rgba(31,95,168,.9); }
.nav-marca-txt { display: flex; flex-direction: column; line-height: 1.15; font-weight: 800; font-size: 15px; }
.nav-marca-txt small { font-weight: 500; font-size: 11px; color: var(--texto-fraco); letter-spacing: .01em; }

/* Menu */
.nav-menu { flex: 1; overflow-y: auto; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.nav-menu::-webkit-scrollbar { width: 8px; }
.nav-menu::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 8px; border: 2px solid var(--superficie); }
.nav-grupo { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.nav-grupo-tit { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-fraco); opacity: .8; padding: 4px 10px 3px; }

.nav-item { position: relative; display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; border-radius: 9px; text-decoration: none;
  color: var(--texto); font-size: 14px; font-weight: 550;
  transition: background .12s, color .12s; }
.nav-item span { line-height: 1; }
.nav-ico { width: 18px; height: 18px; flex: none; color: var(--texto-fraco); transition: color .12s; }
/* ícone dentro de botão herda a cor do botão (senão o play fica cinza sem contraste no .btn azul) */
.btn .nav-ico, .botao .nav-ico, .botao-mini .nav-ico, button .nav-ico { color: inherit; }
.nav-item:hover { background: var(--elevado); }
.nav-item:hover .nav-ico { color: var(--texto); }
.nav-item.ativo { background: var(--roxo-suave, rgba(31,95,168,.10)); color: var(--acento); font-weight: 700; }
.nav-item.ativo .nav-ico { color: var(--acento); }
.nav-item.ativo::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }

/* Rodapé — usuário */
.nav-rodape { padding: 12px; border-top: 1px solid var(--linha); }
.nav-usuario { display: flex; align-items: center; gap: 10px; }
.nav-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: var(--acento); background: rgba(31,95,168,.12); }
.nav-usuario-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.nav-nome { font-weight: 650; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-saldo { font-size: 11.5px; color: var(--texto-fraco); }
.nav-sair { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: transparent; border: 1px solid var(--linha); color: var(--texto-fraco); cursor: pointer; transition: .12s; }
.nav-sair svg { width: 17px; height: 17px; }
.nav-sair:hover { color: var(--risco); border-color: rgba(192,42,60,.35); background: rgba(192,42,60,.06); }

/* Celular: vira barra horizontal rolável (só ícones) */
@media (max-width: 880px) {
  body:has(.nav-lateral) { padding-left: 0; }
  .nav-lateral { position: sticky; width: 100%; height: auto; flex-direction: row; align-items: center;
    gap: 8px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--linha); box-shadow: none; }
  .nav-marca { padding: 0 6px 0 0; }
  .nav-marca-txt { display: none; }
  .nav-menu { flex-direction: row; overflow-x: auto; overflow-y: visible; gap: 4px; padding: 0; flex: 1; }
  .nav-grupo { display: contents; }
  .nav-grupo-tit { display: none; }
  .nav-item { padding: 9px; }
  .nav-item span { display: none; }
  .nav-item.ativo::before { display: none; }
  .nav-rodape { border: 0; padding: 0; }
  .nav-usuario-info { display: none; }
  .nav-avatar { width: 30px; height: 30px; }
}

/* ============================================================
   HUB / Central de liberações
   ============================================================ */
.hub-vazio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e3);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: var(--e5, 28px); }

.hub-bot-aviso { display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: rgba(31,95,168,.06); border: 1px solid rgba(31,95,168,.22); color: var(--acento);
  border-radius: var(--raio-card); padding: 12px 16px; font-size: 14px; margin-bottom: var(--e3); }
.hub-bot-aviso:hover { background: rgba(31,95,168,.10); }
.radar-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--acento); position: relative; flex: none; }
.radar-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--acento);
  animation: pulso 1.3s ease-out infinite; }

.hub-fontes { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: var(--e4); }
.hub-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio-card); padding: 20px calc(var(--e4) + 2px) 18px;
  box-shadow: 0 1px 0 rgba(20,32,43,.02), 0 16px 30px -28px rgba(20,32,43,.6); transition: transform .14s, border-color .14s; }
.hub-card:hover { transform: translateY(-2px); border-color: var(--linha-forte); }
.hub-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--linha-forte); }
.hub-card--quente::before { background: linear-gradient(90deg, #ff5d3c, #ff9a3c); }
.hub-card--vivo::before { background: linear-gradient(90deg, var(--vivo), #a86fce); }
.hub-card--radar::before { background: linear-gradient(90deg, #12a7c4, #22d3ee); }
.hub-card-topo { display: flex; align-items: center; justify-content: space-between; }
.hub-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,93,60,.12); color: #d1451f; }
.hub-tag-vivo { background: rgba(124,58,168,.12); color: var(--vivo); }
.hub-tag-radar { background: rgba(18,167,196,.14); color: #0e7d92; }
.hub-ver { font-size: 13px; font-weight: 600; color: var(--texto-fraco); }
.hub-card:hover .hub-ver { color: var(--acento); }
.hub-card-tit { font-size: 15px; font-weight: 700; margin: 4px 0 0; }
.hub-num { font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hub-sub { font-size: 13px; color: var(--texto-fraco); }

.hub-secao-tit { display: flex; align-items: baseline; justify-content: space-between; margin: var(--e4) 0 var(--e2); }
.hub-secao-tit h2 { font-size: 15px; font-weight: 700; margin: 0; }

/* ============================================================
   TABELAS — alinhamento premium (fim do "esparramado")
   ============================================================ */
/* A coluna de texto principal (nome/cidade/endereço) absorve toda a folga;
   as demais encolhem ao conteúdo e ficam juntas e alinhadas. */
.tabela-export .col-principal { width: 100%; }
.tabela-export td, .tabela-export th { padding: 11px 16px; }
.tabela-export td.mono, .tabela-export .celula-num,
.tabela-export .celula-tel, .tabela-export .celula-cep { white-space: nowrap; }
.tabela-export .celula-tel { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* zebra bem sutil pra leitura em linhas largas */
.tabela-export tbody tr:nth-child(even) td { background: rgba(20,32,43,.015); }
.tabela-export tbody tr:hover td { background: var(--roxo-suave, rgba(31,95,168,.06)); }
.tabela-export tbody tr.linha-fibra td { background: rgba(13,122,82,.05); }
.tabela-export tbody tr.linha-fibra:hover td { background: rgba(13,122,82,.09); }

/* Casters ativos — "radar menos chamativo": dots pulsando = workers */
.casters-dots { display: inline-flex; gap: 4px; align-items: center; }
.cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--acento);
  box-shadow: 0 0 8px rgba(31,95,168,.5); animation: cdotpulse 1.2s ease-in-out infinite; }
.cdot:nth-child(2n){ animation-delay: .15s; } .cdot:nth-child(3n){ animation-delay: .3s; }
.cdot:nth-child(4n){ animation-delay: .45s; } .cdot:nth-child(5n){ animation-delay: .6s; }
@keyframes cdotpulse { 0%,100%{ opacity:.35; transform:scale(.8);} 50%{ opacity:1; transform:scale(1);} }
.bot-vel { font-family: var(--mono, monospace); font-size: 12px; color: var(--acento); background: rgba(31,95,168,.08);
  padding: 2px 8px; border-radius: 999px; }
.bot-ligar { display: inline-flex; align-items: center; gap: 8px; }
.bot-workers { font-size: 12px; color: var(--texto-fraco); display: inline-flex; align-items: center; gap: 4px; }
.bot-workers select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linha); background: var(--superficie); }

/* Seletor de operadora (Vivo prioridade / Claro comparar) */
.op-seletor { display: flex; gap: 10px; margin-bottom: var(--e3); }
.op-chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 16px; border-radius: 10px;
  font-weight: 700; font-size: 14px; text-decoration: none; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto-fraco); }
.op-chip small { font-weight: 500; font-size: 11px; }
.op-vivo.ativo { border-color: rgba(124,58,168,.4); background: rgba(124,58,168,.08); color: var(--vivo); box-shadow: inset 0 -2px 0 var(--vivo); }
.op-claro { color: var(--claro); }
.op-claro:hover { border-color: rgba(192,42,60,.35); background: rgba(192,42,60,.05); }

/* Correção do "esparramado": tabela encolhe ao conteúdo (não estica 100%),
   com colunas justas e alinhadas. O col-principal deixa de forçar 100%. */
.tabela-export { width: auto; min-width: 0; }
.tabela-export .col-principal { width: auto; max-width: 360px; }
.tabela-envolucro { width: 100%; }

/* Etiqueta de operadora do celular nos mailings */
.tel-linha { display: flex; align-items: center; gap: 7px; }
.op-tag { font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 6px; border-radius: 5px;
  background: var(--elevado); color: var(--texto-fraco); text-transform: uppercase; }
.op-tag-vivo { background: rgba(124,58,168,.14); color: var(--vivo); box-shadow: inset 0 0 0 1px rgba(124,58,168,.25); }
.op-tag-claro { background: rgba(192,42,60,.12); color: var(--claro); }
.op-tag-fixo { opacity: .7; text-transform: none; }

/* Painel: estado "calculando" (não trava mais) */
.painel-calc { display: inline-flex; align-items: center; gap: 8px; color: var(--acento); font-size: 13px; font-weight: 600; }
.spin-g { width: 22px; height: 22px; border-width: 3px; }
.painel-vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: 48px 24px; }
.painel-vazio-tit { font-size: 17px; font-weight: 700; margin: 4px 0 0; }
.painel-vazio-sub { color: var(--texto-fraco); font-size: 13.5px; max-width: 460px; margin: 0; }

/* ============================================================
   RADAR EMBUTIDO NO CASTERS (mesma página, menos chamativo)
   ============================================================ */
.casters-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--e3); margin-bottom: var(--e4); align-items: stretch; }
.radar-card { position: relative; border-radius: var(--raio-card); overflow: hidden; min-height: 300px;
  background: radial-gradient(600px 400px at 30% -10%, var(--acento-suave), transparent 60%), var(--superficie);
  border: 1px solid var(--borda); display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px; }
.radar-card canvas { width: 260px; height: 260px; max-width: 40vw; }
.radar-side { display: flex; flex-direction: column; min-width: 0; color: var(--texto); }
.radar-side-top { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em;
  color: var(--texto-fraco); text-transform: uppercase; }
.rc-live { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-fraco); font-family: ui-monospace, Menlo, monospace; }
.rc-live.on { color: var(--confirmado); }
.rc-live .led { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.rc-nums { display: flex; gap: 16px; margin: 10px 0 6px; }
.rc-num b { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto); line-height: 1; }
.rc-num span { font-size: 10.5px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .06em; }
.rc-num.lib b { color: var(--confirmado); }
.rc-feed { flex: 1; overflow: hidden; position: relative; margin-top: 4px; }
.rc-feed .rcrow { display: flex; gap: 8px; align-items: center; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; padding: 3px 0; color: var(--texto-fraco); }
.rc-feed .rcrow.hit { color: var(--confirmado); font-weight: 600; }
.rc-feed .rccep { color: var(--texto); }
.rc-feed .rccid { color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans, system-ui); }
.radar-lado { display: flex; flex-direction: column; gap: var(--e3); justify-content: center; }
@media (max-width: 900px){ .casters-hero { grid-template-columns: 1fr; } .radar-card canvas{ max-width: 46vw; } }

/* Card do bot ao lado do radar: melhor dimensionado (preenche a altura) */
.casters-hero { align-items: stretch; }
.radar-lado { justify-content: flex-start; gap: var(--e2); }
.radar-lado > form, .radar-lado > #bot-area { width: 100%; }
.radar-lado .bot-painel { border-radius: var(--raio-card); }
.radar-lado .bot-painel.rodando, .radar-lado .bot-painel.parado { padding: 16px 18px; }
.radar-lado .bot-numeros { margin-top: 10px; font-size: 13px; }
.radar-lado .bot-ligar { display: flex; gap: 10px; align-items: center; }
.radar-lado .bot-ligar .botao { flex: 1; }

/* ============================================================
   TEMA BLACK PREMIUM (opt-in) — redefine só os tokens; as ~250
   regras usam esses nomes (e os apelidos), então tudo acompanha.
   ============================================================ */
:root[data-theme="dark"] {
  /* faz os controles NATIVOS do navegador (player de áudio, scrollbar, inputs
     de arquivo/data) renderizarem escuros — senão saem brancos gritando no dark. */
  color-scheme: dark;
  --ground:     #090d15;
  --superficie: #121a28;
  --elevado:    #1b2739;
  --linha:      #26324a;
  --linha-forte:#3a4c6e;

  --texto:      #e9eff8;
  --texto-fraco:#93a4bd;

  --acento:      #4c9bec;
  --acento-forte:#77b4f4;
  --acento-suave: rgba(76,155,236,0.16);

  --confirmado:  #34d39a;
  --atencao:     #f0b45a;
  --risco:       #ff6b81;

  --roxo-suave:  rgba(76,155,236,0.12);
}
/* superfícies e sombras coerentes no escuro */
:root[data-theme="dark"] body { background: var(--ground); }
:root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .pnl-card,
:root[data-theme="dark"] .mailing-card,
:root[data-theme="dark"] .hub-card,
:root[data-theme="dark"] .tabela-envolucro,
:root[data-theme="dark"] .comp-chip,
:root[data-theme="dark"] .rf-item,
:root[data-theme="dark"] .busca-painel,
:root[data-theme="dark"] .resumo, :root[data-theme="dark"] .dados,
:root[data-theme="dark"] .estado-vazio,
:root[data-theme="dark"] .painel-vazio {
  box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 18px 34px -30px rgba(0,0,0,.8);
}
/* zebra e hover das tabelas no escuro */
:root[data-theme="dark"] .tabela-export tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
:root[data-theme="dark"] .tabela-export tbody tr:hover td { background: rgba(76,155,236,.10); }
:root[data-theme="dark"] .tabela-export thead th { background: var(--elevado); }
/* inputs no escuro */
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea,
:root[data-theme="dark"] .busca-campo {
  background: var(--elevado); color: var(--texto); border-color: var(--linha);
}
:root[data-theme="dark"] .nav-lateral { background: #0d1420; }
:root[data-theme="dark"] .kpi-destaque, :root[data-theme="dark"] .hub-card::before { }

/* Botão de tema no sidebar */
.nav-tema { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: transparent; border: 1px solid var(--linha); color: var(--texto-fraco); cursor: pointer; transition: .12s; }
.nav-tema:hover { color: var(--acento); border-color: var(--linha-forte); }
.nav-tema svg { width: 17px; height: 17px; }
.nav-tema .ico-sol { display: none; } .nav-tema .ico-lua { display: block; }
:root[data-theme="dark"] .nav-tema .ico-sol { display: block; }
:root[data-theme="dark"] .nav-tema .ico-lua { display: none; }

/* ============================================================
   HUB — KPIs de venda de fibra
   ============================================================ */
.kpi-hero { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: var(--e4); }
.kh-tile { position: relative; overflow: hidden; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 1px 0 rgba(20,32,43,.02), 0 16px 30px -28px rgba(20,32,43,.6); }
.kh-tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--linha-forte); }
.kh-vivo::before { background: linear-gradient(90deg, var(--acento), var(--acento-forte)); }
.kh-porta::before { background: linear-gradient(90deg, #12a7c4, #22d3ee); }
.kh-lib::before { background: linear-gradient(90deg, #0d7a52, #34d399); }
.kh-rot { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); }
.kh-num { font-size: 38px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kh-vivo .kh-num { color: var(--acento); }
.kh-sub { font-size: 12.5px; color: var(--texto-fraco); }

/* Cidades pra trabalhar hoje (tensão) */
.tensao-grade { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: var(--e4); }
.tensao-card { display: flex; flex-direction: column; gap: 9px; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: 14px 16px;
  transition: border-color .12s, transform .12s; }
.tensao-card:hover { border-color: var(--linha-forte); transform: translateY(-1px); }
.tensao-topo { display: flex; align-items: center; justify-content: space-between; }
.tensao-cidade { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tensao-nums { display: flex; gap: var(--e4); }
.tensao-nums b { font-size: 20px; font-variant-numeric: tabular-nums; }
.tensao-nums span { display: block; font-size: 11px; color: var(--texto-fraco); }
.tensao-barra { height: 6px; background: var(--elevado); border-radius: 999px; overflow: hidden; }
.tensao-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--atencao), var(--risco)); }
.tensao-rod { font-size: 11.5px; color: var(--texto-fraco); display: flex; gap: 6px; align-items: center; }
.tensao-abrir { margin-left: auto; color: var(--acento); font-weight: 600; opacity: 0; transition: .14s; }
.tensao-card:hover .tensao-abrir { opacity: 1; }

/* ============================================================
   DISPOSIÇÃO das ligações
   ============================================================ */
.disp-resumo { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-card);
  padding: 12px 18px; margin-bottom: var(--e3); font-size: 14px; }
.dr-item b { font-size: 18px; font-variant-numeric: tabular-nums; }
.dr-ok b { color: var(--confirmado); }
.dr-nota { color: var(--texto-fraco); font-size: 12.5px; margin-left: auto; }

.disp { display: inline-flex; gap: 3px; align-items: center; }
.disp-b { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--linha);
  background: var(--superficie); color: var(--texto-fraco); font-size: 13px; font-weight: 700;
  cursor: pointer; line-height: 1; display: grid; place-items: center; transition: .1s; padding: 0; }
.disp-b:hover { border-color: var(--linha-forte); color: var(--texto); }
.disp-v.on { background: var(--confirmado); border-color: var(--confirmado); color: #fff; }
.disp-r.on { background: var(--atencao); border-color: var(--atencao); color: #fff; }
.disp-n.on { background: var(--texto-fraco); border-color: var(--texto-fraco); color: #fff; }
.disp-s.on { background: var(--risco); border-color: var(--risco); color: #fff; }
.disp-v:hover { color: var(--confirmado); border-color: var(--confirmado); }
.disp-r:hover { color: var(--atencao); border-color: var(--atencao); }
.disp-s:hover { color: var(--risco); border-color: var(--risco); }
.disp-atual { font-size: 11px; font-weight: 700; margin-left: 4px; white-space: nowrap; }
.disp-a-VENDEU { color: var(--confirmado); }
.disp-a-RETORNAR { color: var(--atencao); }
.disp-a-SEM_INTERESSE { color: var(--risco); }
.disp-a-NAO_ATENDE { color: var(--texto-fraco); }

/* Funil de venda (Central) */
.funil-card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-card);
  padding: 18px 20px; margin-bottom: var(--e4); box-shadow: 0 1px 0 rgba(20,32,43,.02), 0 16px 30px -28px rgba(20,32,43,.6); }
.funil-topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--e3); }
.funil-topo h2 { font-size: 15px; font-weight: 700; margin: 0; }
.funil { display: flex; flex-direction: column; gap: 10px; }
.funil-linha { display: grid; grid-template-columns: 100px 1fr 110px; align-items: center; gap: 12px; }
.funil-rot { font-size: 13px; font-weight: 600; color: var(--texto-fraco); }
.funil-barra { height: 22px; background: var(--elevado); border-radius: 7px; overflow: hidden; }
.funil-fill { display: block; height: 100%; border-radius: 7px; min-width: 3px; transition: width .5s; }
.f-lig { background: linear-gradient(90deg, var(--acento), #4a86cf); }
.f-at { background: linear-gradient(90deg, #12a7c4, #22d3ee); }
.f-vd { background: linear-gradient(90deg, var(--confirmado), #34d399); }
.funil-val { font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.funil-val small { color: var(--texto-fraco); font-weight: 500; }
.funil-conv { margin-top: var(--e3); font-size: 13.5px; color: var(--texto-fraco); }
.funil-vazio { color: var(--texto-fraco); font-size: 13.5px; margin: 6px 0; }

/* ============================================================
   BLACK PREMIUM v2 — paleta rica, profundidade e glow
   (sobrescreve o dark anterior; mesma especificidade, vem depois)
   ============================================================ */
:root[data-theme="dark"] {
  --ground:     #0a0c12;   /* preto profundo com viés azul */
  --superficie: #14161f;   /* cartão — levanta do fundo */
  --elevado:    #1c1f2a;
  --linha:      #262a36;
  --linha-forte:#3a3f4e;

  --texto:      #eef1f7;
  --texto-fraco:#8b92a4;

  --acento:      #5c9dff;   /* azul elétrico que brilha no preto */
  --acento-forte:#84b6ff;
  --acento-suave: rgba(92,157,255,.16);

  --confirmado:  #34e0a1;
  --atencao:     #ffb85c;
  --risco:       #ff6076;

  --roxo-suave:  rgba(92,157,255,.12);
  --vivo:        #b388ff;   /* roxo Vivo mais vivo no escuro */
  --claro:       #ff6b81;
}

/* Fundo com brilho ambiente (profundidade premium) */
:root[data-theme="dark"] body {
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(92,157,255,.08), transparent 55%),
    radial-gradient(820px 520px at 108% 6%, rgba(179,136,255,.06), transparent 55%),
    var(--ground);
  background-attachment: fixed;
}

/* Superfícies: leve realce no topo + sombra suave + borda discreta */
:root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .pnl-card,
:root[data-theme="dark"] .mailing-card,
:root[data-theme="dark"] .hub-card,
:root[data-theme="dark"] .kh-tile,
:root[data-theme="dark"] .tensao-card,
:root[data-theme="dark"] .funil-card,
:root[data-theme="dark"] .comp-chip,
:root[data-theme="dark"] .bot-painel,
:root[data-theme="dark"] .busca-painel,
:root[data-theme="dark"] .estado-vazio,
:root[data-theme="dark"] .painel-vazio,
:root[data-theme="dark"] .disp-resumo,
:root[data-theme="dark"] .tabela-envolucro {
  background-image: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 42%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
              0 1px 0 rgba(0,0,0,.4), 0 22px 40px -30px rgba(0,0,0,.85);
}
/* faixa de resumo do mailing (células) */
:root[data-theme="dark"] .resumo-faixa { background: var(--linha); }
:root[data-theme="dark"] .rf-item { background: var(--superficie); }

/* Botão primário com glow do acento */
:root[data-theme="dark"] .botao {
  box-shadow: 0 6px 20px -8px rgba(92,157,255,.55), inset 0 1px 0 rgba(255,255,255,.15);
}
/* item ativo do sidebar com um brilho */
:root[data-theme="dark"] .nav-item.ativo {
  background: linear-gradient(90deg, rgba(92,157,255,.16), rgba(92,157,255,.05));
  box-shadow: inset 0 0 0 1px rgba(92,157,255,.20);
}
:root[data-theme="dark"] .nav-lateral {
  background: linear-gradient(180deg, #0d0f16, #0a0c12);
  border-right-color: rgba(255,255,255,.06);
}
:root[data-theme="dark"] .nav-logo { box-shadow: 0 6px 18px -6px rgba(92,157,255,.8); }

/* KPIs de destaque: topo com glow */
:root[data-theme="dark"] .kpi-destaque { border-top-color: var(--acento); box-shadow:
  inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(92,157,255,.06), 0 22px 40px -30px rgba(0,0,0,.85); }

/* tabela: cabeçalho e zebra no premium */
:root[data-theme="dark"] .tabela-export thead th { background: rgba(255,255,255,.03); color: var(--texto-fraco); }
:root[data-theme="dark"] .tabela-export tbody tr:nth-child(even) td { background: rgba(255,255,255,.018); }
:root[data-theme="dark"] .tabela-export tbody tr:hover td { background: rgba(92,157,255,.09); }

/* selos/chips um pouco mais vivos no escuro */
:root[data-theme="dark"] .selo-vivo, :root[data-theme="dark"] .chip-vivo, :root[data-theme="dark"] .op-tag-vivo { color: #c4a5ff; }
:root[data-theme="dark"] .prio-quente { background: linear-gradient(90deg, rgba(255,120,80,.22), rgba(255,160,80,.14)); color: #ff9a6b; }

/* inputs */
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea,
:root[data-theme="dark"] .busca-campo { background: #0f121a; color: var(--texto); border-color: var(--linha); }
:root[data-theme="dark"] ::placeholder { color: #5c6474; }

/* Tabela que deve preencher a largura da página (poucas colunas, ex.: cidades).
   A coluna principal absorve a folga; as numéricas ficam à direita, proporcional. */
.tabela-export.tabela-cheia { width: 100%; }
.tabela-export.tabela-cheia .col-principal { width: auto; max-width: none; }

/* ============================================================
   PAINEL DE TRABALHO DO LEAD (drawer)
   ============================================================ */
.lead-abrir { text-decoration: none; color: inherit; cursor: pointer; }
.lead-abrir:hover strong { color: var(--acento); text-decoration: underline; }
.lead-painel:empty { display: none; }
.lp-backdrop { position: fixed; inset: 0; background: rgba(8,11,18,.55); z-index: 50; animation: lpfade .15s; }
@keyframes lpfade { from { opacity: 0; } }
.lp-inner { position: fixed; top: 0; right: 0; height: 100dvh; width: min(440px, 94vw); z-index: 51;
  background: var(--superficie); border-left: 1px solid var(--linha);
  box-shadow: -24px 0 60px -34px rgba(0,0,0,.6); display: flex; flex-direction: column;
  gap: 14px; padding: 18px 20px; overflow-y: auto; animation: lpdrawer .22s ease; }
@keyframes lpdrawer { from { transform: translateX(34px); opacity: 0; } to { transform: none; opacity: 1; } }
.lp-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lp-nome { font-size: 17px; font-weight: 700; line-height: 1.2; }
.lp-sub { font-size: 12.5px; color: var(--texto-fraco); margin-top: 2px; }
.lp-fechar { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linha);
  background: transparent; color: var(--texto-fraco); cursor: pointer; font-size: 14px; }
.lp-fechar:hover { color: var(--texto); border-color: var(--linha-forte); }
.lp-tel { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 700;
  font-family: ui-monospace, Menlo, monospace; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, var(--confirmado), #0b8f60); padding: 12px 16px; border-radius: 12px;
  box-shadow: 0 8px 22px -10px rgba(13,122,82,.7); }
.lp-rot { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); display: block; margin-bottom: 7px; }
.lp-nota textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--linha); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; background: var(--superficie); color: var(--texto); }
.lp-nota-acoes { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.lp-anexo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-fraco);
  cursor: pointer; border: 1px dashed var(--linha-forte); border-radius: 8px; padding: 8px 12px; }
.lp-anexo:hover { color: var(--texto); }
.lp-anexo input { display: none; }
.lp-nota-acoes .botao { margin-left: auto; }
.lp-item { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: var(--elevado); }
.lp-item-meta { font-size: 11px; color: var(--texto-fraco); font-weight: 600; }
.lp-item-txt { font-size: 13.5px; margin-top: 3px; white-space: pre-wrap; }
.lp-item-img img { max-width: 100%; border-radius: 8px; margin-top: 8px; display: block; }
.lp-vazio { color: var(--texto-fraco); font-size: 13px; }
.lp-historico { padding-bottom: 20px; }
/* botão de tema para o vendedor (nav) e o item Trabalhar já herdam o nav-item */

/* Lead já trabalhado no mailing — esmaecido */
.tabela-export tbody tr.linha-feita td { opacity: .55; }
.tabela-export tbody tr.linha-feita:hover td { opacity: .85; }

/* ============================================================
   AGENDA do vendedor + agendar no drawer
   ============================================================ */
.lp-agendar { display: flex; gap: 8px; align-items: center; }
.lp-agendar input[type="datetime-local"] { flex: 1; padding: 8px 10px; border: 1px solid var(--linha);
  border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; }

.ag-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e4); }
.ag-item { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 11px 16px;
  transition: border-color .12s, transform .12s; }
.ag-item:hover { border-color: var(--linha-forte); transform: translateX(2px); }
.ag-quando { flex: none; width: 66px; text-align: center; font-size: 12px; color: var(--texto-fraco);
  line-height: 1.15; display: flex; flex-direction: column; }
.ag-quando b { font-size: 15px; color: var(--texto); font-variant-numeric: tabular-nums; }
.ag-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-info strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sub { font-size: 12.5px; color: var(--texto-fraco); }
.ag-abrir { flex: none; color: var(--acento); font-weight: 600; font-size: 13px; opacity: .6; }
.ag-item:hover .ag-abrir { opacity: 1; }
.hub-secao-tit h2.ag-t-atr { color: var(--risco); }
.hub-secao-tit h2.ag-t-hoje { color: var(--acento); }
.ag-cont { font-size: 12px; font-weight: 600; color: var(--texto-fraco); background: var(--elevado);
  padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
/* borda esquerda por urgência */
.hub-secao-tit + .ag-lista .ag-item { border-left-width: 3px; }

/* ============================================================
   TELA DE TRABALHO DO MAILING (full-width, equipe)
   ============================================================ */
.conteudo-largo { max-width: none; }
.tabela-trab tr.linha-vivo td:first-child { box-shadow: inset 3px 0 0 var(--vivo); }
.tabela-trab tr.linha-tabulada td { background: rgba(13,122,82,.05); }
.tabela-trab tr.linha-tabulada:hover td { background: rgba(13,122,82,.09); }
.tel-discar { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: inherit; }
.tel-discar:hover .mono { color: var(--acento); text-decoration: underline; }
.cel-tel { display: flex; flex-direction: column; gap: 3px; }
.cel-tabulacao .disp { flex-wrap: wrap; gap: 4px; }
.cel-tabulacao .disp-atual { flex-basis: 100%; margin-left: 0; margin-top: 2px; }
.tabela-trab td, .tabela-trab th { padding: 10px 14px; }
.tabela-trab .cel-end { max-width: 280px; font-size: 12.5px; }
@media (max-width: 1100px){
  .tabela-trab .cel-end { display: none; }
}

/* Trava "em atendimento" */
.lp-trava { background: rgba(255,180,60,.15); border: 1px solid rgba(255,180,60,.45);
  color: var(--atencao); border-radius: 10px; padding: 11px 14px; font-size: 13px; }
.lp-em-atend { font-size: 12px; color: var(--confirmado); font-weight: 600; }
.em-atend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--atencao); margin-top: 3px; }
.ea-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--atencao); box-shadow: 0 0 8px var(--atencao); animation: cdotpulse 1.2s infinite; }
.tabela-trab tr.linha-travada td { background: rgba(255,180,60,.08); }
.tabela-trab tr.linha-travada td:first-child { box-shadow: inset 3px 0 0 var(--atencao); }

/* Chip de CEP deduzido (inferido) no mailing */
.cep-inferido { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px; vertical-align: middle;
  border: 1px solid transparent; }
.cep-inferido.cep-alta  { background: rgba(74,201,155,.15); color: var(--confirmado, #34c98b); border-color: rgba(74,201,155,.35); }
.cep-inferido.cep-media { background: rgba(255,180,60,.15); color: var(--atencao, #e0a13a); border-color: rgba(255,180,60,.35); }
.cep-inferido.cep-baixa { background: rgba(160,170,190,.15); color: var(--tinta-fraca, #8a94a8); border-color: rgba(160,170,190,.3); }

/* ============================================================
   CRM DE VENDAS — etapas do funil, ficha da venda, kanban,
   prontuário do lead e painel de produção.
   ============================================================ */

/* Pílulas de etapa (no drawer e na ficha) */
.lp-etapas { display: flex; flex-wrap: wrap; gap: 5px; }
.et-pill { border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-fraco); border-radius: 999px; padding: 4px 11px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: .12s; }
.et-pill:hover { border-color: var(--acento); color: var(--texto); }
.et-pill.et-on { color: #fff; border-color: transparent; }
.et-novo.et-on       { background: #8a94a8; }
.et-contato.et-on    { background: var(--acento); }
.et-proposta.et-on   { background: var(--vivo-roxo, #7c5cff); }
.et-fechamento.et-on { background: var(--atencao); }
.et-ganho.et-on      { background: var(--confirmado); }
.et-perdido.et-on    { background: var(--erro); }

/* Ficha da venda no drawer */
.lp-venda { border: 1px solid rgba(74,201,155,.35); background: rgba(74,201,155,.06);
  border-radius: 12px; padding: 12px; }
.lp-venda-form { display: flex; flex-direction: column; gap: 8px; }
.vf-linha { display: flex; gap: 8px; }
.vf-linha label { flex: 1; display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--texto-fraco); }
.lp-venda-form input, .lp-venda-form select, .lp-venda-form textarea {
  border: 1px solid var(--borda); border-radius: var(--raio-ctrl, 8px);
  padding: 7px 9px; font-size: 13px; background: var(--fundo); color: var(--texto);
  font-family: inherit; }
.vf-salvo { font-size: 12px; color: var(--confirmado); font-weight: 600; }

/* Kanban do funil */
.funil-cols { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  align-items: flex-start; }
.funil-col { flex: 1 1 0; min-width: 210px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-card, 14px); padding: 10px; }
.fc-topo { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
.fc-tit { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; color: var(--texto-fraco); }
.fc-num { background: var(--fundo); border: 1px solid var(--borda); border-radius: 999px;
  min-width: 22px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: var(--texto); padding: 0 6px; }
.funil-col-ganho   { border-top: 3px solid var(--confirmado); }
.funil-col-perdido { border-top: 3px solid var(--erro); }
.funil-col-contato { border-top: 3px solid var(--acento); }
.funil-col-proposta{ border-top: 3px solid var(--vivo-roxo, #7c5cff); }
.funil-col-fechamento { border-top: 3px solid var(--atencao); }
.fc-cards { display: flex; flex-direction: column; gap: 8px; }
.fc-vazio { color: var(--texto-fraco); text-align: center; font-size: 13px; padding: 10px 0; opacity: .5; }
.fc-card { background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px;
  padding: 9px 10px; box-shadow: var(--sombra-card, 0 1px 2px rgba(0,0,0,.04)); }
.fc-nome { font-weight: 700; font-size: 13.5px; color: var(--texto); text-decoration: none;
  display: block; }
.fc-nome:hover { color: var(--acento); }
.fc-sub { font-size: 11.5px; color: var(--texto-fraco); margin: 2px 0 7px; }
.fc-rodape { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fc-quem { font-size: 10.5px; color: var(--texto-fraco); }
.fc-setas { display: inline-flex; gap: 4px; }
.fc-seta { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 15px;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.fc-seta:hover { border-color: var(--acento); color: var(--acento); }

/* Prontuário / ficha única do lead */
.ficha-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 16px; }
.ficha-col { display: flex; flex-direction: column; gap: 14px; }
.ficha-card { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-card, 14px); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ficha-venda { border-color: rgba(74,201,155,.35); background: rgba(74,201,155,.05); }
.ficha-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px;
  padding: 3px 0; border-bottom: 1px dashed var(--borda); }
.ficha-linha:last-child { border-bottom: 0; }
.ficha-linha span { color: var(--texto-fraco); }
.ficha-obs { font-size: 13px; color: var(--texto); background: var(--fundo);
  border-radius: 8px; padding: 8px 10px; }
.ficha-quem { margin-top: 4px; }
@media (max-width: 820px) { .ficha-grid { grid-template-columns: 1fr; } }

/* Painel de produção */
.prod-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.prod-kpi { flex: 1 1 130px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-card, 14px); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.prod-kpi .pk-num { font-size: 26px; font-weight: 800; color: var(--texto); letter-spacing: -.5px; }
.prod-kpi .pk-rot { font-size: 12px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .3px; }
.prod-kpi-ok { border-color: rgba(74,201,155,.4); }
.prod-kpi-ok .pk-num { color: var(--confirmado); }
.prod-kpi-receita { border-color: rgba(92,157,255,.4); }
.prod-kpi-receita .pk-num { color: var(--acento); font-size: 22px; }

/* botão-fantasma ativo (abas de período/filtro) */
.botao-fantasma.ativo { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }

/* Seletor de etapa embutido na linha do mailing (funil na lista) */
.cel-etapa { margin-top: 6px; }
.etf { margin: 0; }
.etapa-sel { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 8px;
  border: 1px solid var(--borda); cursor: pointer; color: #fff; -webkit-appearance: none; appearance: none;
  background-position: right 6px center; background-repeat: no-repeat; padding-right: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>"); }
.etapa-sel option { color: var(--texto); background: var(--fundo); }
.etapa-sel-novo       { background-color: #8a94a8; border-color: transparent; }
.etapa-sel-contato    { background-color: var(--acento); border-color: transparent; }
.etapa-sel-proposta   { background-color: var(--vivo-roxo, #7c5cff); border-color: transparent; }
.etapa-sel-fechamento { background-color: var(--atencao); border-color: transparent; }
.etapa-sel-ganho      { background-color: var(--confirmado); border-color: transparent; }
.etapa-sel-perdido    { background-color: var(--erro); border-color: transparent; }

/* --- Telefones da lista de trabalho: pills discáveis, alinhados --- */
.tabela-trab .cel-tel { gap: 5px; align-items: flex-start; }
.tabela-trab .tel-discar { border: 1px solid var(--borda); background: var(--superficie);
  border-radius: 999px; padding: 3px 11px 3px 9px; justify-content: space-between;
  min-width: 168px; gap: 8px; transition: .12s; }
.tabela-trab .tel-discar:hover { border-color: var(--acento); background: var(--acento-suave); }
.tabela-trab .tel-discar .mono { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tabela-trab .tel-discar .mono::before { content: ""; width: 13px; height: 13px; flex: none;
  background: currentColor; -webkit-mask: no-repeat center/contain; mask: no-repeat center/contain;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3-8.6A2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.3 1.8.6 2.6a2 2 0 01-.5 2.1L8 11a16 16 0 006 6l1.6-1.2a2 2 0 012.1-.5c.8.3 1.7.5 2.6.6a2 2 0 011.7 2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3-8.6A2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.3 1.8.6 2.6a2 2 0 01-.5 2.1L8 11a16 16 0 006 6l1.6-1.2a2 2 0 012.1-.5c.8.3 1.7.5 2.6.6a2 2 0 011.7 2z'/></svg>");
  color: var(--acento); opacity: .7; }
.tabela-trab .tel-discar:hover .mono { color: var(--acento); text-decoration: none; }

/* --- Botão "mandar pro funil" (leads não tabulados) --- */
.btn-funil { border: 1px dashed var(--borda-forte, var(--borda)); background: transparent;
  color: var(--texto-fraco); border-radius: 999px; padding: 3px 10px; font-size: 11px;
  font-weight: 600; cursor: pointer; transition: .12s; white-space: nowrap; }
.btn-funil:hover { border-style: solid; border-color: var(--acento); color: var(--acento);
  background: var(--acento-suave); }

/* --- Filtros por etiqueta na aba Trabalhar (data/operadora/busca) --- */
.trab-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  padding: 12px 14px; margin-bottom: 16px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-card, 14px); }
.tf-grupo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tf-rot { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-fraco); margin-right: 2px; }
.tf-chip { border: 1px solid var(--borda); background: var(--fundo); color: var(--texto-fraco);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .12s; }
.tf-chip:hover { border-color: var(--acento); color: var(--texto); }
.tf-chip.tf-on { background: var(--acento); border-color: transparent; color: #fff; }
.tf-chip-vivo.tf-on { background: var(--vivo-roxo, #7c3aa8); }
.tf-chip-claro.tf-on { background: var(--claro, #c02a3c); }
.tf-busca { margin-left: auto; border: 1px solid var(--borda); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; background: var(--fundo); color: var(--texto);
  min-width: 180px; font-family: inherit; }
.tf-busca:focus { outline: none; border-color: var(--acento); }

/* etiquetas no card do mailing */
.mailing-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.mailing-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--texto-fraco); background: var(--fundo); }
.mailing-tag-data { color: var(--acento); border-color: rgba(92,157,255,.35); background: var(--acento-suave); }
.mailing-tag-fibra { color: var(--vivo, #7c3aa8); border-color: rgba(124,58,168,.3); }

/* --- Lista única de trabalho: filtros cruzados --- */
.lista-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  padding: 14px; margin-bottom: 16px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-card, 14px); }
.lf-campo { display: flex; flex-direction: column; gap: 4px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--texto-fraco); }
.lf-campo select { border: 1px solid var(--borda); border-radius: var(--raio-ctrl, 8px);
  padding: 7px 10px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
  background: var(--fundo); color: var(--texto); font-family: inherit; min-width: 130px; cursor: pointer; }
.lf-campo select:focus { outline: none; border-color: var(--acento); }
.lf-campo-larga select { min-width: 220px; }
.lf-limpar { align-self: center; font-size: 12.5px; color: var(--acento); text-decoration: none; margin-left: 4px; }
.lf-limpar:hover { text-decoration: underline; }

/* de qual mailing o lead veio (na lista cruzada) */
.cel-origem { color: var(--acento); font-weight: 600; }

/* ============ Centro de comando · Proxies ============ */
.aviso { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; }
.aviso-erro { background: rgba(192,42,60,.1); color: var(--erro, #c02a3c); border: 1px solid rgba(192,42,60,.3); }

.px-pools { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.px-pool-card { flex: 1 1 220px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-card, 14px); padding: 14px 16px; }
.px-pool-cobertura { border-top: 3px solid var(--vivo-roxo, #7c3aa8); }
.px-pool-fatura_claro { border-top: 3px solid var(--claro, #c02a3c); }
.px-pool-geral { border-top: 3px solid var(--texto-fraco); }
.px-pool-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.px-pool-nome { font-weight: 700; font-size: 14px; }
.px-badge-rot { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--vivo-roxo, #7c3aa8); background: rgba(124,58,168,.12); padding: 1px 7px; border-radius: 999px; }
.px-pool-nums { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.px-pool-big { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.px-pool-de { font-size: 12px; color: var(--texto-fraco); }
.px-pool-ok { font-size: 12px; color: var(--confirmado); margin-left: auto; font-weight: 600; }
.px-pool-onde { font-size: 12px; color: var(--texto-fraco); margin-top: 6px; }
.px-pool-casters { font-size: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borda);
  display: flex; align-items: center; gap: 6px; }
.px-dot-on { width: 8px; height: 8px; border-radius: 50%; background: var(--confirmado); box-shadow: 0 0 6px var(--confirmado); }
.px-dot-off { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-fraco); }

.px-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-card, 14px); margin-bottom: 20px; }
.px-add-campo { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; color: var(--texto-fraco); }
.px-add-campo input, .px-add-campo select { border: 1px solid var(--borda); border-radius: var(--raio-ctrl, 8px);
  padding: 8px 10px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
  background: var(--fundo); color: var(--texto); font-family: inherit; }
.px-add-larga { flex: 1 1 360px; }
.px-add-larga input { width: 100%; font-family: ui-monospace, monospace; }

.px-cont { background: var(--fundo); border: 1px solid var(--borda); border-radius: 999px; padding: 0 8px;
  font-size: 12px; font-weight: 700; margin-left: 6px; }
tr.proxy-off { opacity: .5; }
.px-rotulo { font-weight: 600; font-size: 13.5px; }
.px-url { font-size: 12px; color: var(--texto-fraco); }
.px-pool-sel { border: 1px solid var(--borda); border-radius: 7px; padding: 4px 8px; font-size: 12px;
  background: var(--fundo); color: var(--texto); cursor: pointer; }
.px-saude { font-size: 12.5px; }
.px-ok { color: var(--confirmado); font-weight: 700; }
.px-fail { color: var(--erro, #c02a3c); font-weight: 700; }
.px-lat { color: var(--texto-fraco); }
.px-quando, .px-nunca { font-size: 11px; color: var(--texto-fraco); }
.px-acoes { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.botao-mini { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
  border-radius: 7px; padding: 4px 9px; font-size: 12px; font-weight: 600; cursor: pointer; }
.botao-mini:hover { border-color: var(--acento); color: var(--acento); }
.botao-mini.perigo { color: var(--erro, #c02a3c); }
.botao-mini.perigo:hover { border-color: var(--erro, #c02a3c); background: rgba(192,42,60,.08); }
.px-config { margin-top: 24px; max-width: 620px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-card, 14px); padding: 14px 16px; }

/* ===== Tabulação em LISTA (dropdown colorido por resultado) ===== */
.disp-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.disp-sel { border: 1px solid var(--borda); border-radius: 8px; padding: 5px 9px;
  font-size: 12.5px; font-weight: 600; background: var(--fundo); color: var(--texto);
  font-family: inherit; cursor: pointer; max-width: 190px; }
.disp-sel:focus { outline: none; border-color: var(--acento); }
.disp-cat-vendeu    { background: rgba(74,201,155,.14); color: var(--confirmado); border-color: rgba(74,201,155,.45); }
.disp-cat-atendeu   { background: var(--acento-suave); color: var(--acento); border-color: var(--acento); }
.disp-cat-retornar  { background: rgba(255,180,60,.15); color: var(--atencao); border-color: rgba(255,180,60,.45); }
.disp-cat-perdeu    { background: rgba(192,42,60,.1); color: var(--erro, #c02a3c); border-color: rgba(192,42,60,.35); }
.disp-cat-naoatende { background: var(--superficie); color: var(--texto-fraco); }
.disp-sel option { color: var(--texto); background: var(--fundo); font-weight: 500; }
.disp-por { font-size: 11px; color: var(--texto-fraco); }

/* ===== Telefone: discar (MicroSIP) + copiar ===== */
.tel-item { display: flex; align-items: center; gap: 4px; }
.tel-copia { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-fraco);
  border-radius: 7px; width: 26px; height: 26px; font-size: 13px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.tel-copia:hover { border-color: var(--acento); color: var(--acento); }
.tel-copia.copiou { border-color: var(--confirmado); color: var(--confirmado); background: rgba(74,201,155,.1); }
.lp-tel-linha { display: flex; align-items: center; gap: 8px; }
.lp-tel-linha .lp-tel { flex: 1; }
.lp-tel-copia { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-fraco);
  border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lp-tel-copia:hover { border-color: var(--acento); color: var(--acento); }
.lp-tel-copia.copiou { border-color: var(--confirmado); color: var(--confirmado); }

/* Vários telefones discáveis (pelo menos 2 visíveis; celular primeiro) */
.lp-fones { display: flex; flex-direction: column; gap: 7px; }
.lp-fone-row { display: flex; align-items: stretch; gap: 7px; }
.lp-fone-row .lp-tel { flex: 1; justify-content: flex-start; gap: 11px; font-size: 18px; padding: 11px 14px; }
.lp-fone-row .lp-tel .lp-tel-num { font-variant-numeric: tabular-nums; }
.lp-fone-row .lp-tel-tags { display: flex; gap: 5px; margin-left: auto; align-items: center; }
.fone-tag { font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.22); color: #fff; white-space: nowrap; text-transform: uppercase; }
.fone-tag.op.vivo { background: #fff; color: #0b8f60; }
.lp-tel-copia { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.lp-fone-mais { font-size: 11.5px; color: var(--texto-fraco); padding-left: 2px; }

/* Link "consultar dados no BuscaLeads" no drawer */
.lp-buscaleads { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--acento); text-decoration: none;
  border: 1px solid var(--acento); border-radius: 999px; padding: 4px 12px; align-self: flex-start; }
.lp-buscaleads:hover { background: var(--acento-suave); }

/* Botão "Enviar chip Vivo" (fluxo de vendas Vivo no WhatsApp) */
.lp-chipvivo-form { margin-top: 0; }
.lp-chipvivo { display: flex; width: 100%; box-sizing: border-box; justify-content: center;
  align-items: center; gap: 7px; cursor: pointer;
  background: #25D366; color: #fff; border: 0; border-radius: 10px; padding: 10px 14px;
  font-size: 13.5px; font-weight: 700; font-family: inherit; }
.lp-chipvivo:hover { background: #1eb658; }
.lp-chipvivo[disabled] { opacity: .6; cursor: wait; }
/* vazio não ocupa espaço; cresce só quando chega a resposta */
.lp-chipvivo-res:empty { display: none; }
.lp-chipvivo-res { margin-top: 6px; }
.wz-res { font-size: 12.5px; font-weight: 600; }
.wz-ok { color: var(--confirmado); }
.wz-erro { color: var(--erro, #c02a3c); }

/* Fallback "tentar outro formato" do chip Vivo */
.wz-retry { margin-top: 5px; }
.wz-retry-btn { background: none; border: 1px dashed var(--borda-forte, var(--borda)); color: var(--texto-fraco);
  border-radius: 8px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.wz-retry-btn:hover { border-style: solid; border-color: var(--acento); color: var(--acento); }

/* Etiqueta "chip Vivo enviado" na linha do lead */
.wz-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  font-size: 10.5px; font-weight: 700; color: #1eb658; background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.35); border-radius: 999px; padding: 1px 8px; }

/* Chip de tecnologia Claro antiga (coaxial/metálico = oportunidade) */
.tec-claro { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; margin-top: 3px; }
.tec-antiga { background: rgba(255,180,60,.15); color: var(--atencao, #e0a13a); border: 1px solid rgba(255,180,60,.4); }

/* Seletor de número no drawer (quando tem mais de 1 no cadastro) */
.lp-fone-escolha { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.lp-fone-sel { border: 1px solid var(--borda); border-radius: 9px; padding: 8px 10px;
  font-size: 14px; font-weight: 600; background: var(--fundo); color: var(--texto);
  font-family: inherit; cursor: pointer; }
.lp-fone-sel:focus { outline: none; border-color: var(--acento); }

.aviso-ok { background: rgba(74,201,155,.12); color: var(--confirmado); border: 1px solid rgba(74,201,155,.35); }
.px-add-massa { align-items: flex-start; }
.px-add-massa textarea { width: 100%; border: 1px solid var(--borda); border-radius: var(--raio-ctrl, 8px);
  padding: 8px 10px; font-size: 12.5px; font-family: ui-monospace, monospace; background: var(--fundo);
  color: var(--texto); resize: vertical; }

/* Capacidade Vivo/Claro por proxy (passa no bloqueio ou não) */
.px-cap { white-space: nowrap; }
.cap { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-right: 3px; }
.cap-ok { background: rgba(74,201,155,.15); color: var(--confirmado); border: 1px solid rgba(74,201,155,.4); }
.cap-no { background: rgba(192,42,60,.1); color: var(--erro, #c02a3c); border: 1px solid rgba(192,42,60,.3); }
.px-cap-lbl { font-size: 10.5px; color: var(--texto-fraco); margin-top: 3px; }

/* ============ Repórter de bug embutido ============ */
#bugw-fab { position: fixed; right: 18px; bottom: 18px; z-index: 99998; width: 48px; height: 48px;
  border-radius: 50%; border: 0; background: #14161f; color: #fff; font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: transform .12s; }
#bugw-fab:hover { transform: scale(1.08); }
#bugw-hint { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; background: #14161f; color: #fff;
  text-align: center; padding: 9px; font-size: 14px; }
#bugw-realce { position: fixed; z-index: 99997; pointer-events: none; border: 2px solid #ff3b30;
  background: rgba(255,59,48,.12); border-radius: 3px; }
#bugw-painel { position: fixed; right: 18px; bottom: 78px; z-index: 99999; width: 340px; max-width: calc(100vw - 36px);
  background: var(--superficie, #fff); color: var(--texto, #1a1a1a); border: 1px solid var(--borda, #ddd);
  border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25); padding: 14px; }
.bugw-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 15px; }
#bugw-fechar { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--texto-fraco, #888); }
.bugw-el { font-size: 11px; color: var(--texto-fraco, #888); background: var(--fundo, #f5f5f5); border-radius: 8px;
  padding: 6px 8px; margin-bottom: 8px; word-break: break-all; font-family: ui-monospace, monospace; max-height: 54px; overflow: auto; }
#bugw-desc { width: 100%; border: 1px solid var(--borda, #ddd); border-radius: 9px; padding: 9px; font-size: 14px;
  font-family: inherit; background: var(--fundo, #fff); color: var(--texto, #1a1a1a); resize: vertical; box-sizing: border-box; }
.bugw-shot { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-fraco, #888); margin: 8px 0; }
.bugw-acoes { display: flex; align-items: center; gap: 10px; }
.bugw-btn { background: #ff3b30; color: #fff; border: 0; border-radius: 9px; padding: 9px 16px; font-size: 14px;
  font-weight: 700; cursor: pointer; }
.bugw-btn:hover { background: #e0281e; }
.bug-ok { color: var(--confirmado, #1eb658); font-size: 13px; font-weight: 600; }
.bug-erro { color: var(--erro, #c02a3c); font-size: 13px; font-weight: 600; }
#bugw-status { font-size: 13px; }

/* Página de bugs (admin) */
.bug-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-card,14px);
  padding: 14px 16px; margin-bottom: 12px; display: flex; gap: 16px; }
.bug-card.aberto { border-left: 4px solid #ff3b30; }
.bug-card.resolvido { opacity: .65; border-left: 4px solid var(--confirmado); }
.bug-shot-img { width: 240px; height: auto; max-height: 200px; object-fit: cover; border: 1px solid var(--borda);
  border-radius: 8px; cursor: zoom-in; flex: none; }
.bug-corpo { flex: 1; min-width: 0; }
.bug-desc { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.bug-meta { font-size: 12px; color: var(--texto-fraco); display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.bug-sel { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--acento); background: var(--acento-suave);
  border-radius: 6px; padding: 2px 7px; word-break: break-all; display: inline-block; }
.bug-acoes-l { margin-top: 10px; display: flex; gap: 8px; align-items: center; }

/* ===== Barra de ações do mailing (toolbar padronizada) ===== */
.mailing-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mail-voltar { font-size: 13px; font-weight: 600; color: var(--texto-fraco); text-decoration: none; white-space: nowrap; }
.mail-voltar:hover { color: var(--acento); }
.mail-ferramentas { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 5px 6px 5px 12px; }
.mf-rot { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-fraco); margin-right: 4px; }
.btn-ferr { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto); border-radius: 8px; padding: 7px 12px;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: .12s; }
.btn-ferr:hover { border-color: var(--acento); color: var(--acento); }
.btn-ferr[disabled], .btn-ferr.htmx-request { opacity: .55; cursor: wait; }
.btn-ferr-primario { background: var(--acento); border-color: transparent; color: #fff; }
.btn-ferr-primario:hover { background: var(--acento-forte, var(--acento)); color: #fff; }
.mf-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
  padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--borda); color: var(--texto-fraco); }
.btn-ferr-primario .mf-n-claro { background: rgba(255,255,255,.25); color: #fff; }
.mail-apagar-form { margin-left: auto; }
.btn-apagar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-fraco); border-radius: 9px; cursor: pointer; transition: .12s; }
.btn-apagar:hover { border-color: var(--erro, #c02a3c); color: var(--erro, #c02a3c); background: rgba(192,42,60,.06); }

/* ============ Lista de trabalho v2 (lista enxuta + modal fixo) ============ */
/* Modal FIXO no canto direito; a lista ocupa o resto e fica RETA */
main.com-drawer { padding-right: 496px; }
.trab-split { display: block; }
.trab-lista { width: 100%; min-width: 0; }
.trab-drawer { position: fixed; top: 16px; right: 20px; bottom: 16px; width: 456px; z-index: 40; }
.lead-painel-fixo { height: 100%; overflow-y: auto; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 6px 26px rgba(0,0,0,.12); }
/* Dentro do drawer o conteúdo é ESTÁTICO: sem position:fixed, sem animação de
   slide (era ela que "piscava" a cada clique) e sem sombra/borda própria. */
.lead-painel-fixo .lp-inner { position: static; width: auto; height: auto; max-height: none;
  min-height: 100%; overflow: visible; animation: none; box-shadow: none; border-left: 0;
  border-radius: 0; padding: 18px; gap: 13px; font-size: 13.5px; }
.lead-painel-fixo .lp-backdrop { display: none; }
@media (max-width: 1240px){
  main.com-drawer { padding-right: 0; }
  .trab-drawer { position: static; width: 100%; margin-top: 14px; }
  .lead-painel-fixo { height: auto; }
  .lead-painel-fixo .lp-inner { min-height: 0; }
}

/* Lista reta: colunas de largura fixa, tudo alinhado no meio */
.tabela-enxuta { table-layout: fixed; }
.tabela-enxuta .col-principal { width: 46%; }
.tabela-enxuta th:nth-child(2), .tabela-enxuta .cel-cobertura { width: 24%; }
.tabela-enxuta th:nth-child(3), .tabela-enxuta .cel-status { width: 30%; }
.tabela-enxuta td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.tabela-enxuta .cel-cobertura { line-height: 1.7; }
.tabela-enxuta .cel-cobertura .selo { display: inline-block; margin: 0 3px 0 0; }
.tabela-enxuta .cel-cobertura .tec-claro { display: inline-block; margin-top: 3px; }
.ll-novo { color: var(--texto-fraco); font-size: 12.5px; }
/* tags do cliente compactas numa linha só */
.ll-tags { flex-wrap: nowrap; overflow: hidden; align-items: center; }
.ll-tags .cel-origem { font-size: 11px; color: var(--texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.wz-badge { font-size: 9.5px; padding: 0 6px; }
.linha-lead { cursor: pointer; }
.linha-lead:hover td { background: var(--roxo-suave, rgba(31,95,168,.06)); }
.linha-lead:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.ll-nome { font-size: 14px; }
.ll-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ll-por { font-size: 11px; color: var(--texto-fraco); }
.ll-abrir { font-size: 11px; color: var(--acento); margin-left: 8px; opacity: 0; transition: .12s; }
.linha-lead:hover .ll-abrir { opacity: 1; }
.cel-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* na lista enxuta o status volta a ser table-cell centralizado (flex tira o td do fluxo e joga pro topo) */
.tabela-enxuta .cel-status { display: table-cell; vertical-align: middle; }
.tabela-enxuta .cel-status > * { display: inline-block; vertical-align: middle; }
.tabela-enxuta .cel-status .ll-por { margin-left: 6px; }
.et-mini { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: #fff; }
.et-mini.et-contato { background: var(--acento); } .et-mini.et-proposta { background: var(--vivo-roxo,#7c3aa8); }
.et-mini.et-fechamento { background: var(--atencao); } .et-mini.et-ganho { background: var(--confirmado); }
.et-mini.et-perdido { background: var(--erro); } .et-mini.et-novo { background: #8a94a8; }

/* Lock "X TRABALHANDO O LEAD" (verde na lista + no modal) */
tr.linha-trabalhando td { background: rgba(74,201,155,.14) !important; }
tr.linha-trabalhando td:first-child { box-shadow: inset 3px 0 0 var(--confirmado); }
.trabalhando { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: 11px; font-weight: 800; letter-spacing: .3px; color: var(--confirmado); }
.tb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--confirmado);
  box-shadow: 0 0 8px var(--confirmado); animation: cdotpulse 1.2s infinite; }
.lp-trabalhando { display: flex; align-items: center; gap: 7px; background: rgba(74,201,155,.12);
  border: 1px solid rgba(74,201,155,.4); color: var(--confirmado); border-radius: 10px;
  padding: 9px 12px; font-size: 12px; font-weight: 800; letter-spacing: .3px; margin-bottom: 4px; }

/* Blocos do modal rico */
.lp-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.lp-links a { font-size: 12px; font-weight: 600; color: var(--acento); text-decoration: none;
  border: 1px solid var(--borda); border-radius: 999px; padding: 4px 11px; }
.lp-links a:hover { background: var(--acento-suave); border-color: var(--acento); }
.lp-dados .lp-end { font-size: 13.5px; font-weight: 600; }
.lp-end-sub { font-size: 12px; color: var(--texto-fraco); margin-top: 2px; }
.lp-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
  padding: 4px 0; border-bottom: 1px dashed var(--borda); }
.lp-kv:last-child { border-bottom: 0; }
.lp-kv > span { color: var(--texto-fraco); flex: none; }
.lp-kv b { text-align: right; word-break: break-word; }
/* Cobertura em tiles coloridos: Vivo tem = verde (pode vender), Claro = vermelho da marca */
.lp-cob { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-cob-item { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 12px;
  border: 1.5px solid var(--borda); background: var(--elevado); }
.lp-cob-item .cob-op { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-fraco); }
.lp-cob-item b { font-size: 17px; font-weight: 800; color: var(--texto-fraco); line-height: 1; }
.lp-cob-item.vivo.ok { background: rgba(74,201,155,.14); border-color: var(--confirmado); }
.lp-cob-item.vivo.ok .cob-op, .lp-cob-item.vivo.ok b { color: var(--confirmado); }
.lp-cob-item.claro.ok { background: rgba(218,41,28,.11); border-color: #da291c; }
.lp-cob-item.claro.ok .cob-op, .lp-cob-item.claro.ok b { color: #da291c; }
.cob-tec { font-size: 12.5px; margin-top: 9px; padding: 7px 11px; border-radius: 9px;
  background: var(--elevado); border: 1px dashed var(--borda); color: var(--texto); }
.cob-tec b { color: var(--atencao); }
.lp-cob-alvo { display: block; margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--confirmado);
  background: rgba(74,201,155,.14); border: 1.5px solid rgba(74,201,155,.5); border-radius: 10px; padding: 9px 12px; }
.lp-cadastro .lp-rot { color: var(--acento); }

/* Cards de info com cor — mais fáceis de bater o olho */
.lp-dados { background: rgba(163,98,10,.07); border: 1px solid rgba(163,98,10,.28);
  border-left: 4px solid var(--atencao); border-radius: 12px; padding: 12px 13px; }
.lp-dados .lp-rot { color: var(--atencao); }
.lp-cadastro { background: var(--acento-suave); border: 1px solid rgba(31,95,168,.22);
  border-left: 4px solid var(--acento); border-radius: 12px; padding: 12px 13px; }
.lp-cadastro .lp-kv b { color: var(--texto); }

.lp-vazio-estado { text-align: center; padding: 46px 20px; color: var(--texto-fraco); }
.lp-vazio-ico { font-size: 34px; }
.lp-vazio-tit { font-weight: 700; font-size: 16px; color: var(--texto); margin: 10px 0 4px; }
.lp-vazio-txt { font-size: 13px; line-height: 1.5; max-width: 260px; margin: 0 auto; }

/* Relatório de disparo (botão na página Mailings) */
.rd-carregando { margin: 4px 0 0; font-size: 13px; color: var(--acento); font-weight: 600; }
#rd-resultado:empty { display: none; }
.rd-res { margin-top: 14px; border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; background: var(--superficie); }
.rd-res.rd-ok { border-color: rgba(74,201,155,.5); background: rgba(74,201,155,.07); }
.rd-res.rd-vazio, .rd-res.rd-erro { color: var(--texto-fraco); }
.rd-res.rd-erro { border-color: rgba(192,42,60,.4); background: rgba(192,42,60,.06); color: var(--erro,#c02a3c); }
.rd-res-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rd-res-topo strong { font-size: 14.5px; }
.rd-ops { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.rd-op { font-size: 12.5px; background: var(--elevado); border: 1px solid var(--borda); border-radius: 999px; padding: 3px 11px; }
.rd-op b { color: var(--acento); }
.rd-nota { font-size: 12px; color: var(--texto-fraco); margin: 11px 0 0; line-height: 1.5; }

/* ============ Casters · Armários (caixas vazias x base x vendas) ============ */
.arm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 10px; }
.arm-kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.arm-kpi b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.arm-kpi span { font-size: 11.5px; color: var(--texto-fraco); }
.arm-kpi.arm-caixas { border-left: 4px solid var(--acento); }
.arm-kpi.arm-caixas b { color: var(--acento); }
.arm-kpi.arm-pot { border-left: 4px solid var(--atencao); }
.arm-kpi.arm-pot b { color: var(--atencao); }
.arm-kpi.arm-vend { border-left: 4px solid var(--confirmado); }
.arm-kpi.arm-vend b { color: var(--confirmado); }
.arm-legenda { font-size: 12px; color: var(--texto-fraco); line-height: 1.6; margin: 0 0 12px; max-width: 90ch; }
.tabela-armarios .arm-cod { display: inline-block; font-weight: 700; font-size: 13px; }
.tabela-armarios .arm-cidade { display: block; font-size: 12px; color: var(--texto-fraco); margin-top: 1px; }
.arm-obra { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px;
  background: var(--elevado); color: var(--texto-fraco); text-transform: uppercase; white-space: nowrap; }
.arm-num-caixas { color: var(--acento); font-size: 15px; }
.arm-num-pot { color: var(--atencao); font-size: 15px; }
.arm-num-vend { color: var(--confirmado); font-size: 15px; }
.tabela-armarios tr.arm-linha-vende td { background: rgba(74,201,155,.08); }
.tabela-armarios tr.arm-linha-quente td { background: rgba(163,98,10,.05); }
.tabela-armarios tr:hover td { background: var(--acento-suave); }
@media (max-width: 720px){ .arm-kpis { grid-template-columns: repeat(2,1fr); } }

/* Discador automático (Fase 1) */
.lp-discar-auto { display: flex; width: 100%; box-sizing: border-box; justify-content: center; align-items: center;
  gap: 7px; margin-top: 8px; cursor: pointer; background: var(--acento); color: #fff; border: 0;
  border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 700; font-family: inherit; }
.lp-discar-auto:hover { background: var(--acento-forte, #1a4f8a); }
.lp-discar-auto:disabled { opacity: .6; cursor: wait; }
.lp-discar-res { font-size: 12.5px; font-weight: 600; margin-top: 5px; min-height: 16px; color: var(--texto-fraco); }
.lp-discar-res:empty { display: none; }

/* Aviso AO VIVO do discador (quem está chamando / em ligação / encerrado) */
.discador-banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.45); }
.discador-banner b { font-weight: 800; }
.discador-banner.chamando { background: var(--acento); animation: disc-pulse 1.1s infinite; }
.discador-banner.atendido { background: var(--confirmado); }
.discador-banner.encerrado { background: var(--texto-fraco); }
@keyframes disc-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(31,95,168,.5);} 50%{ box-shadow:0 0 0 10px rgba(31,95,168,0);} }

/* Botões dentro do banner do discador (play/pausar/próximo) */
.discador-banner .disc-bt { margin-left: 8px; background: rgba(255,255,255,.22); color: #fff;
  border: 0; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; }
.discador-banner .disc-bt:hover { background: rgba(255,255,255,.35); }
.discador-banner span { white-space: nowrap; }

/* ============ Tela de configuração do Trunk (discador) ============ */
.trunk-aviso { background: rgba(163,98,10,.08); border: 1px solid rgba(163,98,10,.3);
  border-left: 4px solid var(--atencao); border-radius: 12px; padding: 12px 15px;
  font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; }
.trunk-aviso code { background: var(--elevado); padding: 1px 6px; border-radius: 5px; font-weight: 700; }
.trunk-status { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ts-badge { font-weight: 800; font-size: 13px; padding: 4px 12px; border-radius: 999px; }
.ts-badge.ok { color: var(--confirmado); background: rgba(74,201,155,.14); }
.ts-badge.no { color: var(--erro,#c02a3c); background: rgba(192,42,60,.1); }
.ts-badge.vazio { color: var(--texto-fraco); background: var(--elevado); }
.ts-txt { font-size: 13px; color: var(--texto-fraco); }
.trunk-form, .trunk-teste { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.tf-linha { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; align-items: flex-end; }
.tf-linha label { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-fraco); }
.tf-linha input, .tf-linha select { padding: 9px 11px; border: 1px solid var(--borda);
  border-radius: 9px; font: inherit; font-size: 14px; background: var(--superficie); color: var(--texto); }
.tf-op { font-weight: 400; }
.tf-dica { font-size: 11px; font-weight: 400; color: var(--texto-fraco); }
.tf-acao { display: flex; align-items: flex-end; }
.trunk-msg { font-size: 13px; font-weight: 600; margin-top: 6px; min-height: 18px; }
.trunk-msg code { background: var(--elevado); padding: 1px 5px; border-radius: 5px; }
.trunk-h2 { font-size: 16px; margin: 0 0 4px; }
.trunk-p { font-size: 13px; color: var(--texto-fraco); margin: 0 0 12px; }
.trunk-det { margin-top: 4px; font-size: 12.5px; color: var(--texto-fraco); }
.trunk-det pre { background: var(--elevado); padding: 10px; border-radius: 8px; overflow-x: auto;
  font-size: 11.5px; max-height: 220px; }

.nav-emoji{font-size:18px;width:22px;text-align:center;display:inline-block}

/* Seletor de chip Vivo (WhatsApp) na ficha */
.lp-chip-sel { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--texto-fraco); margin-bottom: 6px; }
.lp-chip-sel select { padding: 4px 8px; border: 1px solid var(--borda); border-radius: 8px;
  font: inherit; font-size: 12.5px; font-weight: 700; background: var(--superficie); color: var(--texto); }

/* ===== Identidade aprovada (06/08/2026) — tokens de marca + .btn unificado ===== */
:root{ --teal:#12b5a6; --cyan:#12c2dd; --acao:var(--acento); --marca-navy:#132340; }
.btn{font:inherit;font-weight:650;font-size:.9rem;border-radius:11px;padding:10px 16px;
  border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:transform .12s,box-shadow .12s;text-decoration:none;line-height:1}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--acao);color:#fff}
.btn.accent{background:linear-gradient(140deg,var(--teal),var(--cyan));color:#062b2e;font-weight:700}
.btn.success{background:var(--confirmado);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--borda);color:var(--texto)}
.btn.danger{background:transparent;border:1px solid color-mix(in srgb,var(--risco) 45%,transparent);color:var(--risco)}
.btn.sm{padding:6px 12px;font-size:.82rem;border-radius:9px}