:root {
  --bg: #020814;
  --painel: rgba(5, 15, 25, 0.82);
  --painel-borda: rgba(94, 220, 255, 0.12);
  --painel-borda-hover: rgba(94, 220, 255, 0.35);
  --campo-bg: #04101c;
  --texto: #d7e6f2;
  --texto-fraco: #7f9db3;
  --azul-claro: #5edcff;
  --azul-claro-hover: #9beaff;
  --ciano: #34cfff;
  --azul-secundario: #79e5ff;
  --azul-forte: #00bfff;
  --linha-particulas: #4ccfff;
  --brilho-azul: rgba(70, 210, 255, 0.2);
  --verde: #22c55e;
  --vermelho: #ef4444;
  --amarelo: #f2b90c;

  /* "Vidro" (glassmorphism) usado especificamente nos componentes novos da
     grande atualizacao (dashboard/graficos/mapa/toast/skeleton) - nao mexe
     em --painel, que ja foi ajustado sob medida em pedidos anteriores
     (painel lateral, quadro do meio etc.). */
  --vidro-fundo: rgba(10, 20, 40, 0.65);
  --vidro-borda: rgba(56, 189, 248, 0.15);
  --azul-vidro: #38bdf8;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #020814;
}

body {
  color: var(--texto);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  overflow-x: hidden; /* evita rolagem horizontal na pagina inteira no celular */
}

/* ---- Fundo 3D (Three.js) - fixo atras de tudo, nunca bloqueia clique/scroll ---- */
#bg3d {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#bg3d canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: none;
}

/* Conteudo do sistema sempre acima do fundo animado. */
main,
.app,
.container,
.app-container,
.portal-cliente {
  position: relative;
  z-index: 10;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.cabecalho {
  text-align: center;
  margin-bottom: 32px;
}

.cabecalho h1 {
  color: var(--azul-claro);
  font-size: 28px;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.cabecalho p {
  color: var(--texto-fraco);
  margin: 0;
}

.link-admin {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--azul-claro);
  text-decoration: none;
  border: 1px solid var(--painel-borda);
  border-radius: 999px;
  padding: 4px 12px;
}

.link-admin:hover {
  border-color: var(--azul-claro);
  color: var(--azul-claro-hover);
}

.painel {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s ease;
}

.painel:hover {
  border-color: var(--painel-borda-hover);
}

.rotulo {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--texto-fraco);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}

textarea#caixaCpfs {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  background: var(--campo-bg);
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  padding: 14px;
  color: var(--texto);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}

textarea#caixaCpfs:focus {
  outline: none;
  border-color: var(--azul-claro);
}

.linha-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 18px;
  color: var(--texto-fraco);
  font-size: 13px;
}

#contadorCpfs {
  color: var(--azul-claro);
  font-weight: 600;
}

.botao {
  background: #0c1a28;
  color: var(--texto);
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.botao:hover:not(:disabled) {
  border-color: var(--azul-claro);
}

.botao:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.botao-primario {
  background: linear-gradient(135deg, #20bff5, #5edcff);
  border-color: #5edcff;
  color: #04101c;
  font-weight: 700;
}

.botao-primario:hover:not(:disabled) {
  background: linear-gradient(135deg, #34cfff, #79e5ff);
  box-shadow: 0 0 14px var(--brilho-azul);
}

.botao-grande {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.botao-perigo {
  border-color: var(--vermelho);
  color: var(--vermelho);
}

.botao-perigo:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.1);
}

/* Quadro do meio (controles/status/progresso) com transparencia propria,
   exatamente 0.50 - mais transparente que os outros paineis (var(--painel)),
   sem afetar o botao "INICIAR CONSULTA" (painel da esquerda) nem os botoes
   de exportar (painel de resultados), que tambem usam .botao. */
.painel.painel-controles {
  background: rgba(5, 15, 25, 0.50);
}

#painelControles .botao {
  background: rgba(5, 15, 25, 0.50);
}

.botoes-controle {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.grade-estatisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.estatistica {
  background: rgba(5, 15, 25, 0.50);
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  /* min-width:0 e' o que faz a celula do grid poder encolher ABAIXO do
     tamanho do conteudo (o padrao de um grid item e' min-width:auto, que
     empurra/vaza pro card vizinho quando o texto e' maior que a celula -
     ex.: nome de bot longo em telegramProgresso). */
  min-width: 0;
  overflow: hidden;
}

.rotulo-estatistica {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: 4px;
}

.estatistica span:last-child {
  font-size: 22px;
  font-weight: 700;
  /* Numeros nunca sao longos o bastante pra precisar disso, mas qualquer
     valor maior (ex.: um texto) quebra linha em vez de vazar pro card ao lado. */
  overflow-wrap: break-word;
}

/* Card "Bot" (nome/username do bot do Telegram, pode ser bem mais longo que
   um numero) - nunca deixa o nome vazar pro card BIN/STATUS ao lado: corta
   com reticencias em vez de quebrar o layout. */
.estatistica-bot span:last-child {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}

.estatistica.sucesso span:last-child {
  color: var(--verde);
}

.estatistica.erro span:last-child {
  color: var(--vermelho);
}

.barra-progresso-container {
  background: rgba(5, 15, 25, 0.50);
  border: 1px solid var(--painel-borda);
  border-radius: 999px;
  height: 18px;
  overflow: hidden;
}

.barra-progresso {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--azul-forte), var(--azul-claro));
  transition: width 0.3s ease;
}

.cabecalho-resultados {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.cabecalho-resultados h2 {
  margin: 0;
  font-size: 18px;
  color: var(--texto);
}

.botoes-exportar {
  display: flex;
  gap: 10px;
}

.tabela-container {
  overflow-x: auto;
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead {
  background: var(--campo-bg);
}

th,
td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--painel-borda);
  white-space: nowrap;
}

th {
  color: var(--texto-fraco);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

tr.linha-clicavel {
  cursor: pointer;
  transition: background 0.15s;
}

tr.linha-clicavel:hover,
tr.linha-clicavel:focus-visible {
  background: rgba(94, 220, 255, 0.08);
  outline: none;
}

td.cpf-clicavel {
  color: var(--azul-claro);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(94, 220, 255, 0.4);
  transition: color 0.15s, text-shadow 0.15s;
}

tr.linha-clicavel:hover td.cpf-clicavel,
tr.linha-clicavel:focus-visible td.cpf-clicavel {
  color: var(--azul-claro-hover);
  text-shadow: 0 0 6px var(--brilho-azul);
}

/* ---- Painel lateral de detalhes (side panel) ----
   Antes era um modal centralizado grande. Agora e um painel fixo a direita,
   compacto, com rolagem interna propria - a lista de resultados continua
   visivel/interativa atras dele no desktop (o "fundo" so fica escuro e
   clicavel em telas pequenas, virando um drawer). */

.painel-lateral {
  /* Escondido por padrao. So aparece quando o atributo "hidden" e removido
     (ver .painel-lateral:not([hidden]) abaixo) - nunca deixar "display"
     fixo aqui, senao ele sobrescreve o "display:none" do atributo hidden. */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.painel-lateral:not([hidden]) {
  display: block;
}

.painel-lateral-fundo {
  position: fixed;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background 0.3s ease-out, backdrop-filter 0.3s ease-out;
}

/* Leve blur/escurecimento da tela por baixo quando o painel abre - o
   pointer-events continua "none" no desktop de proposito (a lista de
   resultados por baixo continua clicavel), so muda o visual. So no DESKTOP
   (min-width acima do breakpoint mobile abaixo): no mobile o
   ".painel-lateral-fundo" ja tem seu proprio escurecimento mais forte
   (0.6 opaco) e pointer-events:auto, ajustado em pedido anterior - aqui
   nao pode ganhar dessa regra so por ter mais classes no seletor. */
@media (min-width: 641px) {
  .painel-lateral-aberto .painel-lateral-fundo {
    background: rgba(2, 6, 23, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

.painel-lateral-caixa {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 100vw);
  background: rgba(5, 15, 25, 0.20);
  border-left: 1px solid var(--painel-borda);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  /* O proprio painel NUNCA rola - so a .painel-rolavel (area de baixo) rola.
     overflow:hidden aqui e uma trava extra: garante que, mesmo se algum
     filho crescer mais que 100vh por engano, o painel inteiro nao ganha
     uma segunda scrollbar propria. */
  overflow: hidden;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Drawer: comeca fora da tela (direita) e desliza para dentro. */
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.painel-lateral-aberto .painel-lateral-caixa {
  transform: translateX(0);
}

@media (max-width: 640px) {
  .painel-lateral-fundo {
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
  }

  .painel-lateral-caixa {
    width: 100vw;
  }
}

.painel-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--painel-borda);
  /* PARTE DE CIMA FIXA - nunca cresce, nunca encolhe, altura pelo conteudo. */
  flex: 0 0 auto;
}

.painel-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #20bff5, #5edcff);
  color: #04101c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  overflow: hidden;
}

.painel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.painel-identificacao {
  flex: 1;
  min-width: 0;
}

.painel-nome {
  margin: 0 0 2px;
  font-size: 14px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.painel-cpf {
  color: var(--texto-fraco);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
}

.painel-fechar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--painel-borda);
  background: var(--campo-bg);
  color: var(--texto);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.painel-fechar:hover {
  border-color: var(--azul-claro);
  color: var(--azul-claro);
}

.painel-destaque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 16px;
  /* PARTE DE CIMA FIXA (Score/Renda). */
  flex: 0 0 auto;
}

.painel-card-mini {
  background: rgba(5, 15, 25, 0.20);
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.painel-card-valor {
  font-size: 17px;
  font-weight: 700;
  color: var(--azul-claro);
  text-shadow: 0 0 8px var(--brilho-azul);
}

.painel-resumo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 12px;
  /* Resumo (Nascimento/Idade/Sexo/Mae/Telefone/Endereco principal) e' o fim do
     painel: tamanho natural, mas rola sozinho se a tela for muito baixa
     (o proprio painel tem overflow:hidden). */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-bottom: 1px solid var(--painel-borda);
}

.resumo-linha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--texto);
  line-height: 1.4;
}

.resumo-icone {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--azul-claro);
}

.resumo-icone svg {
  width: 100%;
  height: 100%;
  display: block;
}

.resumo-texto {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

.painel-rolavel {
  /* PARTE DE BAIXO COM SCROLL - unica area que rola no painel inteiro.
     min-height:0 e essencial: sem isso, um filho flex nao encolhe abaixo do
     tamanho do seu conteudo, e o overflow-y:auto nunca chegaria a agir. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 16px 16px;
}

.painel-dados-completos summary {
  position: sticky;
  top: 0;
  background: rgba(5, 15, 25, 0.20);
  padding: 4px 0;
  margin: -4px 0 0;
  cursor: pointer;
  color: var(--azul-claro);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
}

.painel-dados-completos summary:hover {
  color: var(--azul-claro-hover);
}

.grupo-dados {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--painel-borda);
}

.grupo-dados:first-of-type {
  margin-top: 10px;
}

.grupo-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--azul-claro);
  font-weight: 700;
  margin-bottom: 6px;
}

.modal-mostrar-mais {
  margin-top: 4px;
  background: transparent;
  border: none;
  color: var(--azul-claro);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: rgba(94, 220, 255, 0.4);
}

.modal-mostrar-mais:hover {
  color: var(--azul-claro-hover);
}

.modal-sem-dados {
  color: var(--texto-fraco);
  font-size: 12.5px;
}

/*
 * "Ver todos os dados" - layout achatado de propósito.
 *
 * Antes, cada objeto aninhado virava outra grade "chave 120-220px + valor 1fr"
 * DENTRO da célula de valor da grade anterior. Cada nível de aninhamento
 * reservava outros 120-220px só para a coluna de chave, sobrando quase nada
 * para o valor - e como o valor usava "word-break: break-word", o navegador
 * aceitava quebrar em qualquer ponto, resultando em uma letra por linha
 * (ex: "SSP" virando "S/S/P"). Por isso os objetos/arrays aninhados AQUI
 * viram blocos de largura total (.dados-objeto-aninhado / .dados-array-item),
 * nunca uma grade dentro de outra grade.
 */

.dados-secao {
  width: 100%;
  margin-top: 0;
  font-size: 12px;
}

.dados-campo {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 3px 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--painel-borda);
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.dados-campo:last-child {
  border-bottom: none;
}

.dados-chave {
  color: var(--texto-fraco);
  text-transform: capitalize;
  min-width: 0;
}

.dados-valor {
  color: var(--texto);
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

/* So para strings realmente longas e sem espaco (e-mail, URL, token grande) -
   nunca aplicado ao texto normal, para nao voltar a quebrar letra por letra. */
.dados-valor.dados-valor-quebra-livre {
  overflow-wrap: anywhere;
}

/* Objetos e arrays aninhados ocupam a linha inteira, nunca ficam espremidos
   na coluna de valor ao lado da chave. */
.dados-campo-objeto,
.dados-campo-array {
  grid-template-columns: minmax(0, 1fr);
}

/*
 * IMPORTANTE: este bloco e um CONTAINER (a "caixinha" com borda), NAO uma
 * segunda grade chave/valor. Antes ele era "display:grid" com as mesmas
 * 2 colunas do ".dados-campo" - e como os ".dados-campo" internos (cada
 * um ja sendo sua PROPRIA grade de 2 colunas) eram posicionados um por
 * CELULA dessa grade externa (em vez de ocupar a linha inteira), metade
 * dos campos ficava espremida em ~150px, e a grade interna deles tentava
 * caber outra vez ali dentro - sobrando quase nada pro valor. Por isso
 * aqui e so um flex em coluna: cada ".dados-campo" filho ocupa 100% da
 * largura e desenha sua PROPRIA grade chave/valor sem concorrencia.
 */
.dados-objeto-aninhado {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  margin-top: 4px;
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.dados-array-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dados-array-item {
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}

.dados-array-titulo {
  color: var(--azul-claro);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

.dados-array-lista-simples {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dados-array-item-simples {
  border: 1px solid var(--painel-borda);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--texto);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

/* So para strings realmente longas e sem espaco (e-mail grande, URL) dentro
   de um item de lista simples - nunca aplicado por padrao. */
.dados-array-item-simples.dados-valor-quebra-livre {
  overflow-wrap: anywhere;
}

/* Mobile: chave em cima, valor embaixo (nunca lado a lado espremidos). */
@media (max-width: 560px) {
  .dados-campo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Paginas de autenticacao (login/cadastro/assinatura) - mesmo visual
   escuro/ciano do resto do sistema, so um cartao centralizado na tela. ---- */
.auth-tela {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  margin: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campo-texto {
  width: 100%;
  background: var(--campo-bg);
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--texto);
  font-size: 14px;
  margin-bottom: 14px;
}

.campo-texto:focus {
  outline: none;
  border-color: var(--azul-claro);
}

.auth-erro {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--vermelho);
  color: var(--vermelho);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

.auth-status {
  color: var(--texto-fraco);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ---- Falha ao carregar uma view do admin (ex.: Dashboard) - mensagem +
   botao "Tentar novamente", em vez de ficar preso em "Carregando..." ---- */
.admin-erro-carregamento {
  padding: 24px;
  color: var(--texto);
}

.admin-erro-carregamento p {
  color: var(--vermelho);
  margin-bottom: 14px;
}

.auth-dev {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--painel-borda);
}

.auth-dev-aviso {
  color: var(--texto-fraco);
  font-size: 12px;
  margin-bottom: 8px;
}

.auth-rodape {
  text-align: center;
  color: var(--texto-fraco);
  font-size: 13px;
  margin-top: 18px;
}

.auth-rodape a {
  color: var(--azul-claro);
}

.auth-rodape a:hover {
  color: var(--azul-claro-hover);
}

/* ---- Painel administrativo ---- */
.admin-layout {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100vh;
}

.admin-menu {
  flex: 0 0 220px;
  background: var(--painel);
  border-right: 1px solid var(--painel-borda);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-menu-titulo {
  color: var(--azul-claro);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.admin-menu nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-menu nav a {
  color: var(--texto);
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
}

.admin-menu nav a:hover {
  background: rgba(94, 220, 255, 0.08);
}

.admin-menu nav a.ativo {
  background: rgba(94, 220, 255, 0.15);
  color: var(--azul-claro);
  font-weight: 600;
}

.admin-menu-voltar {
  margin-top: auto;
  color: var(--texto-fraco);
  text-decoration: none;
  font-size: 13px;
  padding-top: 16px;
  border-top: 1px solid var(--painel-borda);
}

.admin-menu-voltar:hover {
  color: var(--azul-claro);
}

.admin-conteudo {
  flex: 1 1 auto;
  padding: 28px 32px;
  min-width: 0;
  overflow-x: auto;
}

/* Trava a largura util em telas muito largas - evita os cards esticando
   por uma tela ultrawide inteira, mantendo a leitura confortavel. */
.admin-largura-max {
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
}

.admin-cabecalho-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--painel-borda);
}

.admin-cabecalho-pagina h1 {
  color: var(--azul-claro);
  margin: 0 0 4px;
  font-size: 22px;
}

.admin-subtitulo {
  color: var(--texto-fraco);
  font-size: 13px;
  margin: 0;
}

.admin-nome-logado {
  color: var(--texto-fraco);
  font-size: 13px;
  white-space: nowrap;
}

.admin-conteudo h2 {
  color: var(--azul-claro);
  margin: 0 0 18px;
}

.admin-conteudo h3 {
  color: var(--texto);
  font-size: 15px;
  margin: 20px 0 10px;
}

/* Especificidade maior de proposito (duas classes) para vencer a regra
   generica ".admin-conteudo h3" acima nos titulos de secao do dashboard. */
.admin-conteudo .admin-secao-titulo {
  color: var(--azul-claro);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 14px;
}

.admin-secao {
  margin-bottom: 30px;
}

.admin-grade-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.admin-card-metrica {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-left: 3px solid var(--painel-borda);
  border-radius: 10px;
  padding: 18px 20px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.admin-card-metrica-titulo {
  color: var(--texto-fraco);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.admin-card-metrica-valor {
  color: var(--azul-claro);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
}

.admin-card-metrica-valor-discreto {
  color: var(--texto-fraco);
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
}

.admin-card-discreto {
  opacity: 0.85;
}

/* ---- Cores por tipo de metrica (borda esquerda + valor), discretas ---- */
.admin-card-cor-ciano {
  border-left-color: var(--azul-claro);
}
.admin-card-cor-ciano .admin-card-metrica-valor {
  color: var(--azul-claro);
}

.admin-card-cor-verde {
  border-left-color: var(--verde);
}
.admin-card-cor-verde .admin-card-metrica-valor {
  color: var(--verde);
}

.admin-card-cor-amarelo {
  border-left-color: var(--amarelo);
}
.admin-card-cor-amarelo .admin-card-metrica-valor {
  color: var(--amarelo);
}

.admin-card-cor-vermelho {
  border-left-color: var(--vermelho);
}
.admin-card-cor-vermelho .admin-card-metrica-valor {
  color: var(--vermelho);
}

/* ---- Saude tecnica: cards pequenos e discretos, todos na mesma linha
   quando houver espaco (flex-wrap, nao grid fixo - nao devem ocupar muito
   espaco vertical nem forcar 4 por linha como os cards principais). ---- */
.admin-grade-compacta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-card-compacto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-left: 2px solid var(--painel-borda);
  border-radius: 8px;
  padding: 6px 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.admin-card-compacto-titulo {
  color: var(--texto-fraco);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.admin-card-compacto-valor {
  color: var(--texto);
  font-size: 13px;
  font-weight: 700;
}

.admin-card-compacto.admin-card-cor-ciano {
  border-left-color: var(--azul-claro);
}
.admin-card-compacto.admin-card-cor-ciano .admin-card-compacto-valor {
  color: var(--azul-claro);
}

.admin-card-compacto.admin-card-cor-verde {
  border-left-color: var(--verde);
}
.admin-card-compacto.admin-card-cor-verde .admin-card-compacto-valor {
  color: var(--verde);
}

.admin-card-compacto.admin-card-cor-amarelo {
  border-left-color: var(--amarelo);
}
.admin-card-compacto.admin-card-cor-amarelo .admin-card-compacto-valor {
  color: var(--amarelo);
}

.admin-card-compacto.admin-card-cor-vermelho {
  border-left-color: var(--vermelho);
}
.admin-card-compacto.admin-card-cor-vermelho .admin-card-compacto-valor {
  color: var(--vermelho);
}

@media (max-width: 480px) {
  .admin-card-compacto {
    flex: 1 1 calc(50% - 8px);
    justify-content: space-between;
  }
}

.admin-secao-tabelas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.admin-bloco-tabela {
  min-width: 0;
}

.admin-vazio {
  text-align: center;
  color: var(--texto-fraco);
  font-style: italic;
  padding: 18px 10px;
  white-space: normal;
}

.admin-tabela-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--painel-borda);
  border-radius: 10px;
}

.admin-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}

.admin-tabela th,
.admin-tabela td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--painel-borda);
  white-space: nowrap;
}

.admin-tabela th {
  color: var(--texto-fraco);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.02);
}

.admin-tabela tbody tr:hover {
  background: rgba(94, 220, 255, 0.05);
}

.admin-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-acoes .botao {
  padding: 5px 10px;
  font-size: 12px;
}

/* Busca de usuarios (lupa + input). */
.admin-busca-usuarios {
  position: relative;
  max-width: 360px;
  margin-bottom: 16px;
}

.admin-busca-icone {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-fraco);
  font-size: 14px;
  pointer-events: none;
}

.admin-busca-input {
  padding-left: 38px;
  margin-bottom: 0;
}

.admin-usuarios-total {
  margin: 0 0 12px;
  color: var(--texto-fraco);
  font-size: 13.5px;
}

/* Tablet: 2 cards por linha. */
@media (max-width: 1100px) {
  .admin-grade-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Cabecalho com titulo + hamburguer (hamburguer so aparece no celular). */
.admin-cabecalho-titulo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.admin-hamburguer {
  display: none;
  background: transparent;
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  color: var(--texto);
  font-size: 20px;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
}

@media (max-width: 720px) {
  .admin-layout {
    flex-direction: column;
  }
  .admin-menu {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--painel-borda);
    display: none; /* celular: menu recolhido ate' tocar no hamburguer */
  }
  .admin-layout.menu-aberta .admin-menu {
    display: flex;
  }
  .admin-hamburguer {
    display: inline-block;
  }
  .admin-menu-voltar {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
  }
  .admin-conteudo {
    padding: 18px;
  }
  .admin-cabecalho-pagina {
    flex-direction: column;
  }
  /* Celular: 1 card por linha. */
  .admin-grade-cards {
    grid-template-columns: 1fr;
  }
  .admin-secao-tabelas {
    grid-template-columns: 1fr;
  }
  /* Tabelas mais compactas no celular (ainda com rolagem horizontal). */
  .admin-tabela {
    font-size: 12px;
  }
  .admin-tabela th,
  .admin-tabela td {
    padding: 8px 10px;
  }
  .admin-acoes {
    gap: 4px;
  }
  .admin-acoes .botao {
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* ============================================================
   GRANDE ATUALIZACAO - ferramenta principal (dashboard, filtros,
   busca, paginacao, graficos, mapa, toast, skeleton, copiar, etc.)
   ============================================================ */

/* ---- 1) Dashboard superior ---- */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 4px 0 20px;
}

.dash-card {
  background: var(--vidro-fundo);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--vidro-borda);
  border-radius: 14px;
  padding: 16px 18px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.dash-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.35);
}

.dash-card-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-fraco);
  margin-bottom: 8px;
}

.dash-card-valor {
  font-size: 26px;
  font-weight: 700;
  color: var(--azul-vidro);
}

.dash-card-estado-linha {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--texto);
  padding: 2px 0;
}

/* ---- 2/3/4) Filtros, ordenacao e busca instantanea ---- */
.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.campo-busca {
  flex: 1 1 220px;
  margin-bottom: 0;
}

.campo-select {
  background: var(--campo-bg);
  border: 1px solid var(--painel-borda);
  color: var(--texto);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
}

.campo-select:focus {
  outline: none;
  border-color: var(--azul-claro);
}

/* ---- 5) Tabela: CPF mascarado + botao copiar ---- */
.celula-cpf {
  display: flex;
  align-items: center;
  gap: 6px;
}

.botao-copiar {
  background: transparent;
  border: 1px solid var(--painel-borda);
  color: var(--texto-fraco);
  border-radius: 6px;
  width: 22px;
  height: 22px;
  min-width: 22px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}

.botao-copiar:hover {
  color: var(--azul-claro);
  border-color: var(--azul-claro);
}

.botao-copiar-feito {
  color: var(--verde) !important;
  border-color: var(--verde) !important;
}

/* Modo compacto: linhas menores, mais registros visiveis. */
.tabela-compacta th,
.tabela-compacta td {
  padding: 5px 10px;
  font-size: 12px;
}

/* ---- Estado vazio da tabela (sem registros / filtro sem resultado) ---- */
.estado-vazio {
  text-align: center;
  padding: 44px 20px;
  color: var(--texto-fraco);
}

.estado-vazio p {
  margin: 0 0 12px;
}

/* ---- 14) Paginacao ---- */
.paginacao-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 6px;
}

.paginacao-info {
  color: var(--texto-fraco);
  font-size: 13px;
}

.paginacao-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.paginacao-botao {
  padding: 6px 12px;
  font-size: 13px;
}

.paginacao-atual {
  border-color: var(--azul-claro);
  color: var(--azul-claro);
}

.paginacao-select {
  background: var(--campo-bg);
  border: 1px solid var(--painel-borda);
  color: var(--texto);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}

/* ---- 8) Estatisticas (graficos) ---- */
.secao-estatisticas,
.secao-mapa,
.secao-stats-sistema {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--painel-borda);
}

.secao-estatisticas h2,
.secao-mapa h2,
.secao-stats-sistema h2 {
  color: var(--azul-claro);
  font-size: 18px;
  margin: 0 0 14px;
}

.graficos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.grafico-card {
  background: var(--vidro-fundo);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--vidro-borda);
  border-radius: 14px;
  padding: 14px;
}

.grafico-card h3 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--texto-fraco);
  font-weight: 600;
}

.grafico-canvas-container {
  position: relative;
  height: 220px;
}

/* ---- 9) Mapa do Brasil (grade agregada por estado) ---- */
.secao-mapa-legenda {
  color: var(--texto-fraco);
  font-size: 12px;
  margin: -8px 0 14px;
}

.mapa-grade {
  display: grid;
  grid-template-columns: repeat(8, minmax(28px, 1fr));
  grid-auto-rows: 32px;
  gap: 4px;
  max-width: 440px;
}

.mapa-celula {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--vidro-borda);
  font-size: 10px;
  font-weight: 700;
  color: var(--texto);
  cursor: default;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.mapa-celula:hover {
  transform: scale(1.12);
  border-color: var(--azul-claro);
  z-index: 1;
}

.mapa-tooltip {
  position: fixed;
  z-index: 3000;
  background: #04101c;
  border: 1px solid var(--azul-claro);
  color: var(--texto);
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  pointer-events: none;
}

/* ---- 16) Estatisticas do sistema ---- */
.stats-sistema {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stats-sistema-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--painel-borda);
}

.stats-sistema-rotulo {
  color: var(--texto-fraco);
}

.stats-sistema-valor {
  color: var(--texto);
  font-weight: 600;
  text-align: right;
}

/* ---- 12) Notificacoes / toast ---- */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 6000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(320px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--vidro-fundo);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--vidro-borda);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--texto);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.toast-visivel {
  opacity: 1;
  transform: translateX(0);
}

.toast-icone {
  font-weight: 700;
  flex-shrink: 0;
}

.toast-sucesso .toast-icone {
  color: var(--verde);
}

.toast-aviso .toast-icone {
  color: var(--amarelo);
}

.toast-erro .toast-icone {
  color: var(--vermelho);
}

/* ---- 11) Skeleton loading ---- */
.skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulso 1.4s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeleton-pulso {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-card {
  height: 82px;
}

.skeleton-linha {
  height: 13px;
  width: 80%;
}

.skeleton-removido {
  transition: opacity 0.3s ease;
  opacity: 0;
}

tr.linha-skeleton td {
  padding: 12px;
}

/* ---- 25) Erro de carregamento (estado de falha da API) ---- */
.erro-carregamento {
  text-align: center;
  padding: 30px 20px;
  color: var(--texto-fraco);
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: 12px;
  margin: 20px 0;
}

.erro-carregamento p {
  margin: 0 0 14px;
}

/* ---- 19) Responsividade ---- */
@media (max-width: 900px) {
  .mapa-grade {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .dashboard-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .barra-filtros {
    flex-direction: column;
    align-items: stretch;
  }
  .campo-busca {
    flex-basis: auto;
  }
  .paginacao-container {
    flex-direction: column;
    align-items: stretch;
  }
  .mapa-grade {
    grid-template-columns: repeat(6, minmax(24px, 1fr));
  }
}

/* ============================================================
   PORTAL CLIENTE: sidebar recolhivel + cabecalho com avatar/perfil
   ============================================================ */
.portal-cliente {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 20;
  flex: 0 0 230px;
  width: 230px;
  background: var(--painel);
  border-right: 1px solid var(--painel-borda);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  padding: 16px 10px;
  gap: 4px;
  transition: width 0.2s ease, flex-basis 0.2s ease;
  overflow: hidden;
}

.sidebar-colapsada {
  flex-basis: 70px;
  width: 70px;
}

.sidebar-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--painel-borda);
}

.sidebar-marca {
  display: block;
  height: 44px;
  width: 150px;
  max-width: 60%;
  object-fit: cover;
  object-position: 50% 46%;
  border-radius: 6px;
}

.sidebar-colapsada .sidebar-marca {
  display: none;
}

.sidebar-btn-colapsar {
  background: transparent;
  border: 1px solid var(--painel-borda);
  color: var(--texto-fraco);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-btn-colapsar:hover {
  color: var(--azul-claro);
  border-color: var(--azul-claro);
}

/* Botao de fechar a sidebar (drawer) - so' aparece no celular. */
.sidebar-btn-fechar-mobile {
  display: none;
  background: transparent;
  border: 1px solid var(--painel-borda);
  color: var(--texto-fraco);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
}

.sidebar-btn-fechar-mobile:hover {
  color: var(--azul-claro);
  border-color: var(--azul-claro);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--texto);
  text-decoration: none;
  font-size: 13.5px;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.sidebar-link:hover {
  background: rgba(94, 220, 255, 0.08);
}

.sidebar-link-ativo {
  background: rgba(94, 220, 255, 0.15);
  color: var(--azul-claro);
  font-weight: 600;
}

.sidebar-icone {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.sidebar-colapsada .sidebar-texto {
  display: none;
}

.sidebar-sair {
  margin-top: auto;
  border-top: 1px solid var(--painel-borda);
  padding-top: 12px;
}


.sidebar-drawer-fundo {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(2, 6, 23, 0.55);
}

.sidebar-drawer-fundo-visivel {
  display: block;
}

.portal-conteudo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: 230px;
  transition: margin-left 0.2s ease;
}

/* Sidebar fixa (position: fixed acima) nunca empurra o layout via flex - o
   espaco reservado pra ela vem deste margin-left, que acompanha o
   recolher/expandir (classe sidebar-colapsada fica no proprio <aside>,
   irmao direto de .portal-conteudo no HTML). */
.sidebar-colapsada + .portal-conteudo {
  margin-left: 70px;
}

.header-cliente {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--painel-borda);
}

.header-btn-menu-mobile {
  display: none;
  background: transparent;
  border: 1px solid var(--painel-borda);
  color: var(--texto);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
}

.header-espaco {
  flex: 1 1 auto;
}

/* ---- Perfil (header do cliente E do admin reaproveitam a mesma classe) ---- */
.header-perfil {
  position: relative;
}

.header-perfil-botao {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 4px 8px;
  cursor: pointer;
}

.header-perfil-botao:hover {
  border-color: var(--painel-borda);
}

.header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #20bff5, #5edcff);
  color: #04101c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.header-perfil-texto {
  text-align: left;
  line-height: 1.25;
}

.header-perfil-nome {
  font-size: 13px;
  color: var(--texto);
  font-weight: 600;
}

.header-perfil-plano {
  font-size: 11px;
  color: var(--texto-fraco);
}

.header-perfil-seta {
  color: var(--texto-fraco);
  font-size: 11px;
  flex-shrink: 0;
  transition: transform 0.15s ease-out;
}

.header-perfil-seta-aberta {
  transform: rotate(180deg);
}

.header-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: #04101c;
  border: 1px solid var(--painel-borda);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* CRITICO: sem isto, ".header-dropdown { display:flex }" (mesma
   especificidade do "[hidden]" do proprio navegador, e' declarada DEPOIS na
   cascata) ganha e o menu fica sempre visivel/fixo, ignorando o atributo
   "hidden" setado via JS (dropdown.hidden = true) - bug real corrigido aqui. */
.header-dropdown[hidden] {
  display: none;
}

.header-dropdown a,
.header-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--texto);
  text-decoration: none;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* ============================================================
   NOVA ATUALIZACAO: contador de assinatura, WhatsApp, Telegram,
   area de indicacoes.
   ============================================================ */

/* ---- Card "Tempo restante da assinatura" ---- */
.assinatura-countdown {
  text-align: center;
  padding: 18px 20px;
}

.assinatura-countdown-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--texto-fraco);
  margin-bottom: 10px;
}

.assinatura-countdown-numeros {
  font-size: 30px;
  font-weight: 700;
  color: var(--azul-vidro, var(--azul-claro));
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.assinatura-countdown-rotulos {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--texto-fraco);
}

.assinatura-countdown-expirada {
  font-size: 20px;
  font-weight: 700;
  color: var(--vermelho);
  letter-spacing: 1px;
}

.assinatura-countdown-vencida {
  border-color: rgba(239, 68, 68, 0.35);
}

/* ---- Botao/card de WhatsApp (login e portal, mesma aparencia) ---- */
.botao-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.botao-whatsapp:hover {
  background: rgba(34, 197, 94, 0.18);
}

.whatsapp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 4px 0 18px;
  padding: 14px;
  text-decoration: none;
  color: #86efac;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
  cursor: pointer;
}

.whatsapp-card:hover {
  background: rgba(34, 197, 94, 0.14);
}

.botao-desativado {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Botao "Telegram" no menu, enquanto TELEGRAM_URL nao esta configurado ---- */
.sidebar-link-telegram-pendente {
  opacity: 0.65;
}

/* ---- Area "Indique amigos" / "Minhas indicacoes" ---- */
.indicacao-card {
  text-align: left;
}

.indicacao-link-linha {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.indicacao-link-linha .campo-texto {
  flex: 1 1 auto;
  margin-bottom: 0;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 13px;
}

.indicacao-acompanhar {
  display: inline-block;
  color: var(--azul-claro);
  text-decoration: none;
  font-size: 13px;
}

.indicacao-acompanhar:hover {
  color: var(--azul-claro-hover);
}

.afiliado-saque-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.afiliado-saque-barra .botao:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- Responsividade (menu simplificado + countdown + indicacoes) ---- */
@media (max-width: 640px) {
  .assinatura-countdown-numeros {
    font-size: 22px;
    letter-spacing: 0;
  }
  .assinatura-countdown-rotulos {
    gap: 14px;
  }
  .indicacao-link-linha {
    flex-direction: column;
  }
}

.header-dropdown a:hover,
.header-dropdown button:hover {
  background: rgba(94, 220, 255, 0.08);
  color: var(--azul-claro);
}

.header-dropdown-separador {
  height: 1px;
  background: var(--painel-borda);
  margin: 4px 2px;
}

.admin-perfil {
  margin-left: auto;
}

/* ---- Filtros salvos ---- */
.filtros-salvos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 16px;
}

.filtro-salvo-chip {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--vidro-fundo);
  border: 1px solid var(--vidro-borda);
  border-radius: 10px;
  padding: 4px 4px 4px 10px;
}

.filtro-salvo-aplicar {
  background: transparent;
  border: none;
  color: var(--texto);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2px 6px;
  font-size: 12px;
}

.filtro-salvo-descricao {
  color: var(--texto-fraco);
  font-size: 11px;
}

.filtro-salvo-acao {
  background: transparent;
  border: none;
  color: var(--texto-fraco);
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.filtro-salvo-acao:hover {
  color: var(--azul-claro);
  background: rgba(94, 220, 255, 0.08);
}

/* ---- Heatmap discreto na coluna Score (badge, nunca a linha inteira) ---- */
.heatmap-score {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
}

.heatmap-score-neutro {
  color: var(--texto-fraco);
}

.heatmap-score-vermelho {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.heatmap-score-laranja {
  color: #fdba74;
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.3);
}

.heatmap-score-amarelo {
  color: #fde68a;
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.3);
}

.heatmap-score-azul {
  color: var(--azul-secundario);
  background: rgba(121, 229, 255, 0.1);
  border-color: rgba(121, 229, 255, 0.3);
}

.heatmap-score-ciano {
  color: var(--azul-claro);
  background: rgba(94, 220, 255, 0.1);
  border-color: rgba(94, 220, 255, 0.3);
}

.heatmap-score-verde {
  color: #86efac;
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

/* ---- Badge discreto de Justica/Policia/Seguranca Publica (ao lado do CPF
   ou da profissao - nunca uma coluna nova, so' compativel com o tema
   escuro atual) ---- */
.badge-justica-seguranca {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--texto-fraco);
  background: rgba(94, 220, 255, 0.06);
  border: 1px solid var(--painel-borda);
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
}

/* ---- Mapa: estado atualmente selecionado como filtro ---- */
.mapa-celula {
  cursor: pointer;
}

.mapa-celula-ativa {
  outline: 2px solid var(--azul-claro);
  outline-offset: 1px;
}

/* ---- Tilt (profundidade leve nos cards) ---- */
.dash-card,
.grafico-card {
  transition: transform 0.15s ease-out, border-color 0.2s ease;
  will-change: transform;
}

/* ---- Login premium ---- */
.auth-card-premium {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.auth-card-visivel {
  opacity: 1;
  transform: translateY(0);
}

.auth-logo {
  text-align: center;
  margin-bottom: 6px;
}

.auth-logo-marca {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--texto);
}

.auth-logo-marca span {
  color: var(--azul-claro);
}

.auth-logo-img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}

.auth-cabecalho h1 {
  font-size: 18px;
  text-align: center;
}

.campo-senha-wrapper {
  position: relative;
}

.campo-senha-wrapper .campo-texto {
  padding-right: 40px;
}

.botao-icone-senha {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 4px 6px;
  margin-top: -7px;
}

.auth-lembrar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-fraco);
  margin: 4px 0 14px;
  cursor: pointer;
}

.auth-aviso-info {
  background: rgba(94, 220, 255, 0.08);
  border: 1px solid var(--painel-borda);
  color: var(--azul-claro);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

/* ---- Modal de sessao prestes a expirar ---- */
.sessao-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sessao-modal-caixa {
  background: var(--vidro-fundo);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--vidro-borda);
  border-radius: 14px;
  padding: 28px;
  max-width: 340px;
  width: 100%;
  text-align: center;
}

.sessao-modal-caixa h2 {
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--texto);
}

.sessao-modal-caixa p {
  color: var(--texto-fraco);
  font-size: 13px;
  margin: 0 0 6px;
}

.sessao-modal-contagem {
  font-size: 32px;
  font-weight: 700;
  color: var(--azul-claro);
  margin: 10px 0 20px;
}

.sessao-modal-botoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Modal "Redefinir senha do cliente" (Admin > Usuarios) - reaproveita
   .sessao-modal-overlay/.sessao-modal-caixa/.sessao-modal-botoes acima, so'
   ajusta alinhamento (o modal de sessao e' centralizado, este tem campos) ---- */
.admin-modal-senha {
  text-align: left;
  max-width: 380px;
}

.admin-modal-senha .rotulo {
  margin-top: 4px;
}

.admin-modal-senha-erro {
  color: var(--vermelho);
  font-size: 13px;
  margin: -6px 0 10px;
}

/* Modal de formulario generico do admin (substitui prompt) - campos + select. */
.admin-modal-form {
  text-align: left;
  max-width: 400px;
}

.admin-modal-form .rotulo {
  margin-top: 8px;
}

.admin-modal-form .campo-texto,
.admin-modal-form .campo-select {
  width: 100%;
  box-sizing: border-box;
}

.admin-modal-form-descricao {
  color: var(--texto-fraco);
  font-size: 13px;
  margin: 0 0 8px;
}

/* ---- Responsividade: mobile vira drawer, header ganha o botao hamburguer ---- */
@media (max-width: 900px) {
  .header-btn-menu-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 240px;
    flex-basis: 240px;
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
  }

  .sidebar-colapsada {
    width: 240px;
    flex-basis: 240px;
  }
  .sidebar-colapsada .sidebar-texto,
  .sidebar-colapsada .sidebar-marca {
    display: block;
  }

  .sidebar-drawer-aberta {
    transform: translateX(0);
  }

  .sidebar-btn-fechar-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-cliente {
    padding: 10px 14px;
  }

  /* No mobile a sidebar e' um drawer sobreposto (position:fixed + transform
     acima) - nunca reserva espaco no layout, mesmo recolhida. */
  .portal-conteudo,
  .sidebar-colapsada + .portal-conteudo {
    margin-left: 0;
  }
}

/* ===== Modulo Telegram (portal cliente) ===== */

.telegram-conta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  color: var(--texto-fraco);
  font-size: 13px;
  margin: 6px 0 14px;
}

.telegram-conta-info strong {
  color: var(--texto);
}

.telegram-wizard {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--painel-borda);
}

.telegram-etapa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}

.telegram-etapa p {
  color: var(--texto-fraco);
  font-size: 13px;
  margin: 0;
}

.telegram-campo-telefone {
  display: flex;
  gap: 8px;
  align-items: center;
}

.telegram-ddi {
  padding: 10px 12px;
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  color: var(--texto-fraco);
  background: rgba(255, 255, 255, 0.03);
}

.telegram-campo-telefone .campo-texto {
  flex: 1;
}

.telegram-erro {
  color: var(--vermelho);
  font-size: 13px;
  margin: 0;
}

.telegram-bot-selector-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.telegram-bot-selector-linha .campo-select {
  flex: 1;
  min-width: 200px;
}

/* ---- Combo de bots com busca (no maximo ~15 itens visiveis, o resto rola) ---- */
.telegram-bot-combo {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.telegram-bot-combo-botao {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.telegram-bot-combo-botao span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-bot-combo-seta {
  color: var(--texto-fraco);
  flex-shrink: 0;
  transition: transform 0.15s ease-out;
}

.telegram-bot-combo-seta-aberta {
  transform: rotate(180deg);
}

.telegram-bot-combo-painel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #04101c;
  border: 1px solid var(--painel-borda);
  border-radius: 10px;
  padding: 8px;
  z-index: 30;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.telegram-bot-combo-busca {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
}

.telegram-bot-combo-busca-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--texto);
  font-size: 13px;
}

.telegram-bot-combo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  /* ~15 itens visiveis (32px cada); alem disso, rola verticalmente */
  max-height: 480px;
  overflow-y: auto;
}

.telegram-bot-combo-item {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.telegram-bot-combo-item:hover {
  background: rgba(94, 220, 255, 0.08);
}

.telegram-bot-combo-item-selecionado {
  color: var(--azul-claro);
  font-weight: 600;
}

.telegram-bot-combo-vazio {
  padding: 10px;
  color: var(--texto-fraco);
  font-size: 13px;
  text-align: center;
}

.telegram-contador-bots {
  color: var(--texto-fraco);
  font-size: 12px;
  white-space: nowrap;
}

.telegram-status-bots {
  color: var(--azul-claro);
  font-size: 13px;
  margin-bottom: 12px;
}

.telegram-lista-bots {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--painel-borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.telegram-busca-todos-bots-input {
  margin-bottom: 10px;
}

/* Container da lista "Gerenciar bots": altura fixa equivalente a ~15
   linhas (34px cada) - do 16o bot em diante, rola dentro da PROPRIA caixa.
   A pagina nunca cresce de altura por causa da quantidade de bots. */
.telegram-lista-bots-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 510px;
  overflow-y: auto;
  overflow-x: hidden;
}

.telegram-bot-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--painel-borda);
  min-width: 0;
}

.telegram-bot-linha span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-bot-linha:last-child {
  border-bottom: none;
}

.telegram-bot-autorizado {
  color: var(--verde);
  font-weight: 600;
}

.telegram-bot-nao-autorizado {
  color: var(--texto-fraco);
}

.telegram-bot-indisponivel {
  color: var(--vermelho);
}

.telegram-busca-bot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.telegram-busca-bot .campo-texto {
  max-width: 200px;
}

.telegram-prog-mensagem {
  color: var(--texto-fraco);
  font-size: 13px;
  margin: 10px 0;
}

/* ===== Telegram: filtros de interesse + pausa temporaria ===== */

.telegram-filtros-interesse {
  margin: 16px 0 12px;
  padding: 12px;
  border: 1px solid var(--painel-borda);
  border-radius: 10px;
}

.telegram-filtros-interesse h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.telegram-filtros-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.telegram-filtro-campo {
  flex: 1 1 150px;
  min-width: 140px;
}

.telegram-filtro-campo .rotulo,
.telegram-filtro-campo .campo-texto,
.telegram-filtro-campo .campo-select {
  width: 100%;
}

.telegram-filtro-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}

.telegram-pausa-filtro {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--amarelo, #f59e0b);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.08);
}

.telegram-pausa-titulo {
  margin: 0 0 6px;
  font-weight: 600;
}

.telegram-pausa-dados {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13.5px;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.telegram-pausa-contador {
  font-size: 13.5px;
  margin: 4px 0 10px;
}

/* ===== Consulta Avulsa (saldo pre-pago) ===== */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-overlay:not([hidden]) {
  display: flex;
}

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal-caixa {
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: 12px;
  padding: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-cabecalho h2 {
  margin: 0;
  font-size: 18px;
  color: var(--azul-claro);
}

.valores-recarga {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.botao-valor-recarga {
  padding: 12px 4px;
  font-weight: 700;
}

.pix-qr-container {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.pix-qr-container img {
  width: 260px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.painel-resultado-consulta {
  margin-top: 14px;
  padding: 14px;
  background: var(--campo-bg);
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  /* Resultado COMPLETO da consulta: cresce com o conteudo (a pagina rola), nunca corta. */
}

.painel-resultado-consulta pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12.5px;
  color: var(--texto);
}

.resumo-consulta-corpo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 16px;
  margin-bottom: 16px;
}

.resumo-consulta-campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.resumo-consulta-campo .rotulo-estatistica {
  margin: 0;
}

.resumo-consulta-valor {
  color: var(--texto);
  font-size: 14px;
  word-break: break-word;
}

.resumo-consulta-acoes {
  border-top: 1px solid var(--painel-borda);
  padding-top: 14px;
  margin-top: 4px;
}

.dados-completos-linha {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--painel-borda);
  font-size: 13px;
}

.dados-completos-linha:last-child {
  border-bottom: none;
}

.dados-completos-marcador {
  color: var(--azul-claro);
}

.dados-completos-chave {
  flex: 0 0 auto;
  color: var(--texto-fraco);
  font-weight: 600;
}

.dados-completos-valor {
  flex: 1 1 auto;
  color: var(--texto);
  word-break: break-word;
}

.celula-cpf-clicavel {
  cursor: pointer;
  color: var(--azul-claro);
  text-decoration: underline;
  text-decoration-style: dotted;
}

.celula-cpf-clicavel:hover {
  color: var(--azul-claro-hover);
}

/* ---- Central de consultas (Consulta Avulsa reformulada) ---- */

.consulta-grupo-tipos {
  margin-bottom: 14px;
}

.consulta-grupo-titulo {
  display: block;
  color: var(--texto-fraco);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 8px;
}

.consulta-abas-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consulta-aba-tipo {
  padding: 8px 16px;
  font-size: 13px;
}

.consulta-aba-tipo-ativa {
  color: var(--azul-claro);
  border-color: var(--azul-claro);
  background: rgba(94, 220, 255, 0.1);
}

.consulta-formulario {
  border-top: 1px solid var(--painel-borda);
  padding-top: 16px;
  margin-top: 4px;
}

.consulta-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.consulta-campo {
  display: flex;
  flex-direction: column;
}

.painel-cards-resultado {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.painel-card-resultado {
  background: var(--campo-bg);
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  padding: 12px;
}

.painel-card-resultado-titulo {
  color: var(--azul-claro);
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 13.5px;
}

.resultado-foto-container {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.resultado-foto-container img {
  width: 160px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--azul-claro);
  background: rgba(0, 0, 0, 0.25);
}

/* ---- Resultado completo da Consulta Avulsa (secoes) ---- */

.resultado-completo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.botao-copiar-dados {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.botao-copiar-dados-feito {
  border-color: #7fe0a6;
  color: #7fe0a6;
}

@media (max-width: 640px) {
  .botao-copiar-dados {
    width: 100%;
  }
}

.resultado-secao {
  border: 1px solid var(--painel-borda);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
}

.resultado-secao-titulo {
  margin: 0 0 8px;
  color: var(--azul-claro);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.resultado-secao-separador {
  margin: 0 0 10px;
  color: var(--texto-fraco);
  font-size: 11px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
}

.resultado-cabecalho {
  color: var(--azul-claro);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.resultado-cabecalho-separador {
  color: var(--texto-fraco);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 14px;
}

.resultado-subgrupo {
  margin: 8px 0 4px;
  padding-left: 10px;
  border-left: 2px solid var(--painel-borda);
}

.resultado-subgrupo-titulo {
  margin: 4px 0 2px;
  color: var(--texto-fraco);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.resultado-cartoes {
  margin-top: 8px;
}

.resultado-vazio {
  margin: 0;
  color: var(--texto-fraco);
}

.resultado-link-foto {
  color: var(--azul-claro);
}

/* ---- Tela de planos de assinatura (/assinatura) ---- */

.grade-planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.plano-card {
  background: var(--campo-bg);
  border: 1px solid var(--painel-borda);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.plano-card:hover {
  border-color: var(--azul-claro);
  transform: translateY(-2px);
}

.plano-card-nome {
  color: var(--azul-claro);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.plano-card-preco {
  color: var(--texto);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
}

.plano-card-dias {
  color: var(--texto-fraco);
  font-size: 12.5px;
}

.plano-card-selecionado {
  border-color: var(--azul-claro);
  background: rgba(94, 220, 255, 0.1);
  box-shadow: 0 0 0 1px var(--azul-claro) inset;
}

.plano-card-selo {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--azul-claro);
  font-weight: 600;
}

/* ---- Grade de planos da tela de renovacao ---- */

.auth-card-planos {
  max-width: 760px;
}

.planos-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0;
}

.planos-grade .plano-card {
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.plano-card-botao {
  width: 100%;
  margin-top: 14px;
}

.plano-card-destaque {
  border-color: var(--azul-claro);
  background: rgba(94, 220, 255, 0.08);
}

.plano-card-destaque .plano-card-selo {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 12px;
  border: 1px solid var(--azul-claro);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .planos-grade {
    grid-template-columns: 1fr;
  }
}

/* ---- Ajustes gerais de toque no celular (botoes maiores, campos 100%) ---- */
@media (max-width: 640px) {
  .container {
    padding: 20px 14px 80px;
  }
  .painel {
    padding: 16px;
  }
  .cabecalho h1 {
    font-size: 22px;
  }
  .botao {
    min-height: 44px;
  }
  .campo-texto,
  .campo-select {
    font-size: 16px; /* evita zoom automatico do iOS ao focar */
  }
  .botoes-controle,
  .barra-filtros {
    gap: 8px;
  }
}

.whatsapp-grupos-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
}

.whatsapp-grupo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
}

/* ---- Admin > Assinaturas: cards clicaveis como filtro ---- */
.admin-card-clicavel {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.admin-card-clicavel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.admin-card-clicavel:focus-visible {
  outline: 2px solid var(--azul-claro);
  outline-offset: 2px;
}
.admin-card-selecionado {
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 2px var(--azul-claro), 0 6px 18px rgba(0, 0, 0, 0.25);
}
.admin-card-selecionado .admin-card-metrica-titulo::after {
  content: ' ✓ filtro';
  color: var(--azul-claro);
  font-weight: 700;
}
.admin-filtro-ativo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
.admin-filtro-ativo:empty {
  display: none;
}
.admin-paginacao {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.admin-paginacao .botao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .admin-card-clicavel:hover {
    transform: none;
  }
  .admin-paginacao {
    gap: 8px;
  }
}

/* ---- Tela /assinatura: bloco "Teste gratis de 1h" (so' cliente novo) ---- */
.teste-gratis-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 4px 0 18px;
  padding: 18px 16px;
  text-align: center;
  border: 1px dashed #34d399;
  border-radius: 14px;
  background: rgba(52, 211, 153, 0.08);
}
.teste-gratis-card[hidden] {
  display: none;
}
.teste-gratis-titulo {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #34d399;
}
.teste-gratis-texto {
  margin: 0 0 6px;
  color: var(--texto-fraco);
  font-size: 14px;
}
.teste-gratis-botao {
  width: 100%;
  max-width: 340px;
  background: #10b981;
  border-color: #10b981;
  color: #fff;
  font-weight: 700;
}
.teste-gratis-botao:hover:not(:disabled) {
  background: #059669;
  border-color: #059669;
}
.teste-gratis-botao:disabled {
  opacity: 0.6;
  cursor: wait;
}
@media (max-width: 600px) {
  .teste-gratis-card {
    padding: 14px 12px;
  }
  .teste-gratis-titulo {
    font-size: 16px;
  }
}