/* Painel Administrativo - estilo unico, sem dependencias externas */
:root {
  --fundo: #f4f6f9;
  --card: #ffffff;
  --borda: #e2e6ec;
  --texto: #1f2733;
  --suave: #475569;
  --azul: #2563eb;
  --verde: #15803d;
  --laranja: #b45309;
  --vermelho: #b91c1c;
  --raio: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 18px; }
h1.centro { text-align: center; }
h2 { font-size: 17px; margin: 0 0 14px; color: var(--texto); font-weight: 600; }
small { display: block; font-size: 13px; }
.cinza { color: #334155; }
.verde { color: var(--verde); }
.laranja { color: var(--laranja); }
.vermelho { color: var(--vermelho); }

/* ------------------------------ topo ------------------------------ */
.topo { background: #0f172a; color: #fff; }
/* Largura fluida: ocupa a tela toda, com um teto so para monitores ultrawide.
   --margem-lateral cresce junto com a largura da janela. */
:root { --largura-max: 2000px; --margem-lateral: clamp(14px, 2.2vw, 40px); }

.topo-inner {
  max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--margem-lateral);
  display: flex; align-items: center; gap: 24px; min-height: 56px;
}
.marca { color: #fff; font-weight: 600; display: flex; align-items: center; }
.marca:hover { text-decoration: none; }
/* logo no topo: o PNG tem o texto claro, feito para fundo escuro */
.marca-logo { height: 40px; width: auto; display: block; }
@media (max-width: 560px) { .marca-logo { height: 32px; } }
.topo nav { display: flex; gap: 4px; flex: 1; }
.topo nav a {
  color: #cbd5e1; padding: 7px 12px; border-radius: var(--raio); font-size: 14px;
}
.topo nav a:hover { background: #1e293b; text-decoration: none; }
.topo nav a.ativo { background: var(--azul); color: #fff; }
.usuario { display: flex; align-items: center; gap: 14px; font-size: 15.5px; color: #cbd5e1; }

/* faixa de totais: uma barra dividida em tres, com tarja colorida */
.totais {
  display: flex; background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden; flex-wrap: wrap; margin-bottom: 16px;
}
.totais .seg {
  flex: 1; min-width: 170px; padding: 16px 20px;
  border-left: 4px solid var(--borda);
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
}
.totais .seg-ativos  { border-left-color: var(--azul); }
.totais .seg-online  { border-left-color: var(--verde); }
.totais .seg-offline { border-left-color: #cbd5e1; }
.totais .seg-cancelados { border-left-color: #f59e0b; }
/* faixa do dinheiro do mes: previsto | recebido | em aberto */
.totais .seg-previsto { border-left-color: #64748b; }
.totais .seg-recebido { border-left-color: var(--verde); }
.totais .seg-aberto   { border-left-color: var(--laranja); }
.totais .n { font-size: 34px; font-weight: 700; line-height: 1; }
.totais .t { font-size: 18px; color: var(--suave); }
/* quando o numero e um valor em dinheiro, cabe menos */
.totais-dinheiro .n { font-size: 26px; }

/* ficha do cliente em duas colunas: cadastro | historico */
.colunas-ficha.duas {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: minmax(0, 720px) minmax(0, 1fr);
}
.colunas-ficha.duas .painel-cadastro { max-width: none; margin-left: 0; margin-right: 0; }
@media (max-width: 1100px) {
  .colunas-ficha.duas { grid-template-columns: 1fr; }
}
.sair { color: #fca5a5; }

.conteudo {
  max-width: var(--largura-max); margin: 0 auto;
  padding: 24px var(--margem-lateral) 60px;
}
.rodape { text-align: center; color: var(--suave); font-size: 12px; padding: 0 0 24px; }

/* ----------------------------- cartoes ---------------------------- */
.cartoes {
  display: grid; gap: 12px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.cartao {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.cartao .rotulo { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.cartao .numero { font-size: 28px; font-weight: 700; line-height: 1.1; }
.cartao .detalhe { font-size: 12px; color: var(--suave); }

/* ----------------------------- paineis ---------------------------- */
.painel {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px; margin-bottom: 18px;
}
/* 16px: a mesma letra das celulas da lista. Antes era 15px (o padrao do
   body) e o cabecalho da ficha saia menor que o resto do painel. */
.cabecalho-cliente { display: flex; justify-content: space-between; align-items: center;
                     flex-wrap: wrap; gap: 12px; font-size: 16px; }
/* alinha "motivo/Liberar/Bloquear" e "mes/Reenviar" pelo topo (o motivo quebra em 2 linhas) */
.cabecalho-cliente .acoes { align-items: flex-start; }

/* ----------------------------- tabelas ---------------------------- */
/* A tabela ocupa a largura toda; se nao couber, rola so ela - a pagina
   nunca ganha barra horizontal. */
.tabela-rolagem {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--raio); background: var(--card);
}
.tabela { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--card); }
/* nome do cliente: uma linha so, sem quebrar no meio */
.tabela td.nome { white-space: nowrap; font-size: 15px; text-align: left; line-height: 1.35; }
/* O nome e link, mas em texto ESCURO, nao azul. Numa lista de 40 clientes, 40
   nomes azuis competem entre si e apagam o sinal que realmente importa: o
   vermelho de bloqueado e o laranja de atraso logo abaixo. Com o normal em
   escuro, esses saltam na hora. O azul volta no hover, onde ainda ajuda.
   Peso 600 em vez do 700 do <strong>: negrito cheio em toda linha cansa. */
.tabela td.nome a { color: var(--texto); }
.tabela td.nome a strong { font-weight: 600; }
/* tela de clientes: larguras fixas (colgroup) para as colunas ficarem
   proporcionais e alinhadas, sem a sobra "empoçar" numa coluna so.
   Nome e Fantasia podem quebrar em duas linhas em vez de estourar a celula. */
/* Largura minima: 1560 -> 1800 -> 1700 (11/09/2026). Subiu porque a celula
   Acoes precisa de ~447px com o botao Cobrar e o icone do atendimento na
   linha, e desceu de novo depois de medir coluna por coluna o que cada uma
   realmente precisa - 1700 e o piso: abaixo disso alguma comeca a cortar.
   Nao aumentar sem necessidade: quanto mais larga, mais chance de a tabela
   ganhar barra de rolagem horizontal na tela do Horacio. */
/* 1700 -> 1760 em 11/09/2026: o envelope do recado ganhou coluna propria
   e a coluna Acoes nao podia perder largura por causa disso - com 1700 o
   botao Bloquear voltava a ser cortado (medido: Acoes precisa de 417px).
   Em tela larga nada muda; em tela estreita a rolagem horizontal comeca
   60px antes. */
.tabela-clientes { table-layout: fixed; min-width: 1832px; }
.tabela-clientes td.nome, .tabela-clientes td.esq,
.tabela-clientes th.esq { white-space: normal; word-break: break-word; }
/* Nome e Fantasia: cabecalho e valores os dois a esquerda (alinhados entre si) */
.tabela-clientes td.nome, .tabela-clientes td.esq,
.tabela-clientes th.esq { text-align: left; }
.tabela th.esq, .tabela td.esq { text-align: left; }
.tabela td.acesso { white-space: nowrap; }
/* colunas novas: nao quebrar no meio */
.tabela td[data-label="Devendo"] { white-space: nowrap; }
.tabela td[data-label="Mensalidade"] { white-space: nowrap; }
.tabela td.acesso .cinza { font-size: 14px; }
/* a cor do nome ja diz a situacao do cliente */
.tabela td.nome-bloqueado a { color: #dc2626; }   /* bloqueio manual: vermelho, igual ao LED */
.tabela td.nome-devendo a,
.tabela td.nome-atraso a    { color: #f59e0b; }   /* atraso: laranja, igual ao LED */
.linha-devendo { background: #fffdf5; }
.linha-devendo:hover { background: #fffaeb; }
.tabela td.nome-cancelado a { color: #7f1d1d; text-decoration: line-through; }   /* vinho e riscado */
/* hover: no nome comum o azul volta; nos que tem cor de situacao a cor fica,
   porque ali ela e informacao - so entra o sublinhado. */
.tabela td.nome a:hover { color: var(--azul); text-decoration: underline; }
.tabela td.nome-bloqueado a:hover { color: #dc2626; }
.tabela td.nome-devendo a:hover,
.tabela td.nome-atraso a:hover    { color: #f59e0b; }
.tabela td.nome-cancelado a:hover { color: #7f1d1d; }
/* o motivo da liberacao e uma NOTA, nao um status: peso normal para nao
   competir com a linha "Liberado ha N dias" logo acima */
.tabela td.nome .motivo-liberado { font-weight: 400; }
/* cliente clicou "Confirmar Pagamento" na tela de registro: aviso para conferir */
.aviso-pago {
  display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px;
  background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: help;
}
/* reenvio de XML: campo de mes (com icone de calendario) + botao moderno */
.reenvio-xml { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.campo-mes {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--borda); border-radius: 8px; background: #fff;
}
.campo-mes svg { color: #2563eb; flex: none; }
/* o campo do mes (agora grade de meses = type=text) fica "dentro" da caixa,
   sem borda propria, para alinhar com o icone e o botao */
.campo-mes input, .campo-mes .flatpickr-input {
  border: none; padding: 1px 0; width: 140px; font-size: 13.5px;
  background: transparent; color: var(--texto); box-shadow: none;
}
.campo-mes input:focus { outline: none; box-shadow: none; }
.campo-mes:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
.btn-reenviar { display: inline-flex; align-items: center; gap: 6px; }
/* botao so com icone (ex.: reenviar XML na lista) */
.btn-icone { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; }
.btn-icone svg { display: block; color: #2563eb; }
/* reenvio ja pedido: mesmo icone, apagado, so para nao mudar a largura da coluna */
.xml-pedido { cursor: default; background: #f1f5f9; }
.xml-pedido svg { color: var(--suave); }
/* icone de reenvio de XML: fica no fim da coluna Acoes, separado dos demais */
.xml-fim { margin-left: 8px; }
/* aviaozinho apagado: cliente sem contador cadastrado. Aparece, mas desativado,
   para nao parecer que faltou um botao na linha */
.xml-sem-contador { cursor: default; background: #f8fafc; border-color: #eef2f7; }
.xml-sem-contador svg { color: #cbd5e1; }
/* linha "Envio ao contador: Enviado 14:32 03/09/2026" na ficha do cliente */
.situacao-xml { margin: 8px 0 0; font-size: 14px; }
.situacao-xml .cinza { margin-left: 6px; }
/* coluna XML Contador: nao quebra a hora/data em duas linhas */
td[data-label="XML Contador"] { white-space: nowrap; }

/* campo de data no cadastro (validade do certificado), padronizado como o reenvio */
.campo-data {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  border: 1px solid var(--borda); border-radius: 8px; background: #fff; width: 100%;
}
.campo-data svg { color: #2563eb; flex: none; }
.campo-data input {
  border: none; padding: 1px 0; flex: 1; width: auto; font: inherit;
  background: transparent; color: var(--texto); box-shadow: none;
}
.campo-data input:focus { outline: none; box-shadow: none; }
.campo-data:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }

/* campo somente leitura (ex.: codigo do cliente) */
input.ro {
  background: #f1f5f9; color: #475569; cursor: not-allowed;
}

/* aviso no topo: certificados vencidos / perto de vencer */
.aviso-cert {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--raio);
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  font-size: 14px; text-decoration: none;
}
.aviso-cert:hover { background: #ffedd5; }
.aviso-cert svg { flex: none; color: #ea580c; }
.aviso-cert-vencido { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.aviso-cert-vencido svg { color: #dc2626; }
.aviso-cert-ver { margin-left: auto; font-weight: 600; white-space: nowrap; }
/* texto das faixas de aviso: maior e mais forte, para ler de longe */
.aviso-cert span { font-size: 15px; font-weight: 600; }
/* aviso de XML pendente: azul, para nao competir com o alerta do certificado */
.aviso-xml { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.aviso-xml:hover { background: #dbeafe; }
.aviso-xml svg { color: #2563eb; }
/* em atraso e sem whatsapp: tom do WhatsApp, para se distinguir das outras faixas */
.aviso-whats { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.aviso-whats:hover { background: #dcfce7; }
.aviso-whats svg { color: #15803d; }
/* botao de cobranca por WhatsApp (so aparece em quem esta atrasado) */
.tabela th {
  text-align: center; font-size: 15px; font-weight: 700;
  color: var(--texto); border-bottom: 2px solid #cbd5e1; padding: 11px 5px; white-space: nowrap;
}
/* PRECISA vir depois de .tabela th: la o white-space e nowrap, e esta regra
   (mesma forca, uma classe + um elemento) so vence por vir por ultimo. Estava
   escrita antes ate 11/09/2026 e nunca valeu - por isso "Certificado A1" e
   "XML Contador" saiam numa linha so, passando por cima da coluna do lado. */
.tabela-clientes th { white-space: normal; }
/* conteudo centralizado embaixo de cada coluna */
.tabela td { text-align: center; }
/* alinhado pelo topo: assim a primeira linha de toda celula comeca
   na mesma altura, mesmo quando alguma tem duas linhas */
.tabela td { border-bottom: 1px solid var(--borda); padding: 12px 5px; vertical-align: middle;
             font-weight: 600; }
.tabela td small { display: block; margin-top: 2px; font-size: 13px; }
.tabela tbody tr:hover { background: #f8fafc; }
.tabela.compacta td, .tabela.compacta th { padding: 6px 10px; font-size: 13px; }
.linha-atraso { background: #fff7f7; }
.linha-atraso:hover { background: #fff1f1; }
.linha-cancelada { opacity: .55; }
.linha-cancelada:hover { opacity: 1; }
.acoes { white-space: nowrap; display: flex; gap: 6px; align-items: center;
         flex-wrap: wrap; justify-content: center; }
/* na tabela (desktop), a celula Acoes volta a ser celula normal (nao flex),
   senao ela fica mais baixa que as outras e a linha divisoria da um degrau.
   Os botoes ficam centralizados e na mesma linha. */
.tabela td.acoes {
  display: table-cell; vertical-align: middle;
  text-align: center; white-space: nowrap;
}
.tabela td.acoes .btn { display: inline-block; vertical-align: middle; white-space: nowrap; margin: 0 1px; }
/* o icone de atendimento fica mais justo SO aqui dentro; fora da coluna Acoes
   o .btn-icone continua com o respiro de sempre */
.tabela td.acoes .btn-icone { padding: 6px 7px; }
/* O envelope do recado tem coluna propria. Ele morava na ponta esquerda de
   Acoes, sem titulo nenhum - e nem e uma acao: diz se o cliente LEU o recado.
   Fora dali, a coluna Acoes guarda so botao, e o envelope ganhou o titulo
   "Recado" em cima. Cores em .aviso-lido / .aviso-nao-lido / .aviso-sem. */
.tabela td.recado-selo { text-align: center; white-space: nowrap; }
.tabela td.recado-selo .btn { margin: 0; vertical-align: middle; }
/* o .inline vale tambem para o lugar reservado (um <span>), senao ele mede
   3px diferente do <form> do botao real e a coluna desalinha */
.tabela td.acoes form.inline,
.tabela td.acoes span.inline { display: inline-flex; vertical-align: middle; }
/* Lugar reservado: ocupa a largura mas nao aparece nem recebe clique. E o que
   faz os botoes cairem na mesma coluna em todas as linhas, mesmo quando um
   cliente nao tem Cobrar (sem whatsapp ou sem mensalidade vencida). */
.tabela td.acoes .vago { visibility: hidden; }
/* Bloquear / Liberar / Reativar sao alternativos - um por linha. Sem largura
   igual, a linha do bloqueado desalinha da linha do liberado. */
.tabela td.acoes .btn-perigo, .tabela td.acoes .btn-ok { min-width: 104px; }
.acoes-dir .inline { justify-content: flex-end; width: 100%; }
/* Rotulos "Pago em" e "Forma", em cima dos campos. Estavam em 11px cinza
   claro - ilegivel, e contra a preferencia de sempre: letra forte. Agora
   seguem o mesmo 15px/600 dos rotulos das caixas de dialogo. */
.data-pago { display: flex; flex-direction: column; align-items: flex-start;
             font-size: 15px; font-weight: 600; color: var(--texto); gap: 3px; }
/* peso normal nos campos: o 600 e do rotulo, nao do que se digita.
   O TAMANHO deles nao se decide aqui - ver ".acoes input[type=date]". */
.data-pago input,
.data-pago select { font-weight: 400; }
.rodape-tabela { color: var(--suave); font-size: 13px; margin-top: 10px; }
.vazio { color: var(--suave); padding: 12px 0; }
.caixa-ini { width: 100%; font-family: ui-monospace, Consolas, monospace;
             font-size: 13px; line-height: 1.6; background: #f8fafc;
             color: var(--texto); resize: vertical; }

/* ------------------------------ badges ---------------------------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.badge-ok     { background: #dcfce7; color: #15803d; }
.badge-aviso  { background: #fef3c7; color: #b45309; }
.badge-perigo { background: #fee2e2; color: #b91c1c; }
.badge-neutro { background: #e5e7eb; color: #334155; }
.badge-baixando { background: #dbeafe; color: #1d4ed8; }
/* "Atualizando" e o unico estado passageiro da coluna Agente - os outros
   (Atual, Desatualizado, Sem agente) sao situacao parada. Os tres pontinhos
   aparecem um a um e recomecam, que em portugues ja se le como "em andamento".
   A largura fica fixa em 14px com overflow escondido: se a etiqueta crescesse
   a cada pontinho, ela ficaria pulando de tamanho dentro da tabela. */
.badge-baixando::after {
  content: '...'; display: inline-block; overflow: hidden; vertical-align: bottom;
  width: 14px; animation: reticencias 1.2s steps(4, end) infinite;
}
@keyframes reticencias { from { width: 0; } to { width: 14px; } }
@media (prefers-reduced-motion: reduce) {
  /* Sem animacao os tres pontinhos nao dizem nada: viram enfeite parado ao
     lado de "Atualizando", que ja e gerundio e ja significa "acontecendo
     agora". Entao somem de vez, em vez de congelar. Quem tem animacao ligada
     continua vendo eles andarem. */
  .badge-baixando::after { content: ''; width: 0; animation: none; }
}

/* --------------------- online / offline / colunas ----------------- */
.ponto {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #cbd5e1; vertical-align: middle;
}
.ponto-on {
  background: var(--verde);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}
.ponto-off { background: #cbd5e1; }

/* sinal de transito: verde = online, vermelho = offline */
.semaforo {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  vertical-align: middle; flex: none;
}
.semaforo-on  { background: var(--verde);    box-shadow: 0 0 0 3px rgba(22, 163, 74, .20); }
.semaforo-off { background: var(--vermelho); box-shadow: 0 0 0 3px rgba(220, 38, 38, .16); }
.semaforo-cancelado { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.situacao { display: flex; align-items: center; justify-content: center; gap: 9px; }
.dois-sinais { display: flex; flex-wrap: wrap; gap: 16px 12px; justify-content: center; align-items: flex-start; }
.dois-sinais .par { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dois-sinais .ico-status { height: 28px; }
/* 11px (era 13) desde 13/09/2026: com TRES LEDs - maquina que roda dois
   sistemas - a coluna Conexao precisava de 186px e empurrava a tabela para
   1832px, fazendo nascer barra de rolagem em tela que antes cabia. Segue
   em negrito e na cor forte, so menor. */
.dois-sinais .par small { font-size: 11px; font-weight: 600; color: var(--texto); }
.ico-status { display: block; }
/* a tela do monitor / a janela do sistema fica toda com a cor do status */
.fill-on        { fill: #16a34a; }
.fill-off       { fill: #e2e8f0; }
.fill-bloqueado { fill: #f59e0b; }
.fill-vermelho  { fill: #dc2626; }
.fill-cancelado { fill: #7f1d1d; }   /* vinho, igual ao nome cancelado */
.semaforo.mini { width: 13px; height: 13px; }
.centro { text-align: center; }
.contagem { margin: -6px 0 16px; color: var(--suave); font-size: 14px; }
.contagem-filtro { color: var(--suave); font-size: 14.5px; margin: -6px 0 14px; }
.contagem strong { font-size: 26px; color: var(--texto); vertical-align: -2px; margin-right: 4px; }
.codigo { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--suave); font-size: 16px; }
.cnpj   { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15.5px; }

/* ------------------------------ botoes ---------------------------- */
.btn {
  display: inline-block; border: 1px solid var(--borda); background: #fff; color: var(--texto);
  padding: 7px 13px; border-radius: 6px; font-size: 15px; font-weight: 600;
  cursor: pointer; line-height: 1.2;
}
.btn:hover { background: #f1f5f9; text-decoration: none; }
.btn-primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-primario:hover { background: #1d4ed8; }
.btn-ok { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-ok:hover { background: #15803d; }
.btn-perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-perigo:hover { background: #b91c1c; }
.btn-mini { padding: 7px 13px; font-size: 14.5px; font-weight: 600; }
/* Cobrar: verde, e o botao de acao da cobranca.
   ATENCAO - estas regras PRECISAM ficar depois de .btn: com uma classe cada,
   quem vem por ultimo vence, e o "background: #fff" do .btn apagava o verde.
   Ficaram la em cima por engano ate 11/09/2026 e o botao saia branco. */
.btn-cobrar { background: #dcfce7; border-color: #86efac; color: #166534; }
.btn-cobrar:hover { background: #bbf7d0; }
/* ja avisado hoje: fica apagado, para voce nao cobrar duas vezes sem querer */
.btn-cobrar.ja-avisado { background: #f1f5f9; border-color: var(--borda); color: var(--suave); }
/* nao da para cobrar (em dia, cancelado, ou sem whatsapp): apagado, no mesmo
   tom do envelope sem recado. Some o buraco na linha e o motivo fica no titulo */
.btn-cobrar.btn-cobrar-off { background: #f8fafc; border-color: #eef2f7;
                             color: #64748b; cursor: help; }
.largo { width: 100%; }

/* ---------------------------- formularios ------------------------- */
.barra-filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 16px; background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 12px;
}
.barra-filtros form.inline { align-items: center; }
.barra-filtros label { display: flex; align-items: center; gap: 6px; }
.inline { display: inline-flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
/* rotulos dos campos (Buscar, Status, Reajustar...): maiores e mais escuros,
   para lerem bem em cima dos campos */
label { display: block; font-size: 14px; font-weight: 600; color: #334155; }
input, select, textarea {
  font: inherit; padding: 7px 9px; border: 1px solid var(--borda);
  border-radius: 6px; background: #fff; color: var(--texto); width: 100%;
}
input[type="checkbox"] { width: auto; }
.barra-filtros input, .barra-filtros select { min-width: 150px; width: auto; }
/* Os campos de filtro guardam "Todos" - 150px sobrava e empurrava o ultimo
   filtro (e o botao Filtrar) para uma segunda linha. Com estas medidas os sete
   filtros e o botao cabem numa linha so numa tela de 1920. */
.barra-filtros select { min-width: 120px; }
.barra-filtros input[type="search"] { min-width: 0; width: 260px; }
/* Campos dentro da coluna Acoes: a data e a forma do pagamento. Estavam em
   12,5px - some na tela ao lado de texto de 16px. Esta regra e mais especifica
   que a do .data-pago e vem depois, entao e AQUI que o tamanho se decide. */
.acoes input[type="date"], .acoes select { width: auto; font-size: 15px; padding: 5px 8px; }
/* fonte maior na barra de filtros (Buscar, Status, Conexao, Mes atual) */
.barra-filtros label { font-size: 15.5px; }
.barra-filtros input, .barra-filtros select { font-size: 15.5px; }

/* fonte maior no campo de reajuste de mensalidade, tudo alinhado na mesma linha */
/* Uma linha fecha os filtros e abre a parte das acoes, dentro da mesma caixa.
   Ela ocupa a largura toda, entao tambem forca a quebra: filtros em cima,
   acoes embaixo, sempre no mesmo lugar. */
.divisor-barra {
  flex: 0 0 100%; height: 1px; background: var(--borda);
  margin: 6px 0 2px;
}
/* com a linha em cima, o traco vertical antes do reajuste virou sobra */
.barra-reajuste { align-items: center; }

/* Tracinho que separa os campos da acao, nas duas linhas da barra: nos filtros
   antes do "Filtrar", nas acoes antes do "+ Novo cliente". */
.tracinho {
  flex: 0 0 auto; width: 0; height: 26px; align-self: center;
  border-left: 3px solid var(--borda);
  margin: 0 10px;
}
.barra-reajuste label {
  font-size: 15.5px; color: var(--texto);
  display: flex; align-items: center; gap: 6px;
}
/* o campo do valor tem tamanho fixo: sem isso ele estica junto com a barra e
   fica um campo enorme para digitar "10,00" */
.barra-reajuste input {
  font-size: 15.5px; padding: 7px 10px; line-height: 1.2;
  /* os campos de filtro tem min-width 150px, e min-width ganha de width:
     sem zerar aqui, o campo do valor nunca fica menor que os filtros */
  flex: 0 0 auto; width: 80px; min-width: 0;
}
.barra-reajuste .cinza { font-size: 15.5px; }
/* Formulario em linhas: rotulo a esquerda, campo a direita.
   Uma linha por campo, com largura fixa e confortavel. */
/* o bloco do cadastro fica centralizado na pagina */
.painel-cadastro { max-width: 760px; margin-left: auto; margin-right: auto; }
.painel-cadastro h2 { text-align: center; }

.formulario .grade { display: block; max-width: 640px; margin: 0 auto; }
.formulario .acoes-form { max-width: 640px; margin: 18px auto 0; padding-left: 208px; }

.formulario .grade > label {
  display: grid;
  grid-template-columns: 190px minmax(0, 420px);
  align-items: center;
  gap: 6px 18px;
  margin-bottom: 11px;
  font-size: 15px;
  color: var(--texto);
}
.formulario .grade > label > input,
.formulario .grade > label > select,
.formulario .grade > label > textarea {
  font-size: 15px;
  padding: 9px 11px;
}

/* as caixinhas de marcar ficam alinhadas com a coluna dos campos */
.formulario .grade > label.checkbox {
  display: flex; align-items: center; gap: 9px;
  margin-left: 208px; font-size: 15px;
}

@media (max-width: 680px) {
  .formulario .grade > label { grid-template-columns: 1fr; }
  .formulario .grade > label.checkbox { margin-left: 0; }
  .formulario .acoes-form { padding-left: 0; }
}
.formulario .col-2 { grid-column: span 2; }
.formulario .checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); }
.acoes-form { margin-top: 16px; display: flex; gap: 8px; }
.abas { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.abas a {
  padding: 7px 14px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--borda); font-size: 13.5px; color: var(--texto);
}
.abas a:hover { text-decoration: none; background: #eef2f7; }
.abas a.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.resumo-linha { color: var(--suave); font-size: 14px; margin: 0 0 12px; }

/* ------------------------------ alertas --------------------------- */
.alerta {
  padding: 12px 14px; border-radius: var(--raio); margin-bottom: 14px;
  /* mesma letra das outras faixas do painel: 15px e forte, para ler de longe */
  font-size: 15px; font-weight: 600; border: 1px solid transparent;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.alerta-ok     { background: #dcfce7; border-color: #bbf7d0; color: #14532d; }
.alerta-aviso  { background: #fef3c7; border-color: #fde68a; color: #78350f; }
.alerta-erro   { background: #fee2e2; border-color: #fecaca; color: #7f1d1d; }

/* A faixa entra deslizando e o simbolo aparece com um pulinho: e o sinal de
   que a acao foi feita (o recado saiu, o pagamento entrou). */
.alerta { animation: alerta-entra .3s ease-out both; }
@keyframes alerta-entra {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.alerta-ok::before,
.alerta-aviso::before,
.alerta-erro::before {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font-size: 14px; font-weight: 700; line-height: 1;
  animation: selo-pula .45s cubic-bezier(.2, .8, .3, 1.5) .12s both;
}
.alerta-ok::before    { content: '\2713'; background: var(--verde); }
.alerta-aviso::before { content: '!';      background: var(--laranja); }
.alerta-erro::before  { content: '\2715'; background: var(--vermelho); }
@keyframes selo-pula {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Campo em branco: a reclamacao fica do lado do campo, nao numa caixinha do
   navegador. O campo ganha borda vermelha e um tranco curto para chamar o olho. */
.erro-campo {
  display: block; margin-top: 5px;
  color: var(--vermelho); font-size: 13px; font-weight: 700;
}
.campo-errado {
  border-color: var(--vermelho) !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, .12);
  animation: tranco .3s ease-in-out;
}
@keyframes tranco {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* Botao enquanto o envio esta a caminho: rodinha girando e travado, para nao
   mandar a mesma coisa duas vezes. */
.btn-trabalhando { opacity: .85; cursor: progress; }
.btn-trabalhando::before {
  content: ''; display: inline-block; vertical-align: -2px;
  width: 13px; height: 13px; margin-right: 8px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* quem prefere o computador sem animacao continua vendo tudo, so que parado */
@media (prefers-reduced-motion: reduce) {
  .alerta, .alerta-ok::before, .alerta-aviso::before, .alerta-erro::before,
  .btn-trabalhando::before, .campo-errado { animation: none; }
}

/* ------------------------------- login ---------------------------- */
.tela-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: #0f172a; padding: 20px;
}
.cartao-login {
  background: #fff; padding: 32px; border-radius: 12px; width: 100%; max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 14px;
}
.cartao-login h1 { margin: 0; font-size: 20px; }
.cartao-login .sub { margin: 0 0 6px; color: var(--suave); font-size: 13.5px; text-align: center; }

/* faixa escura no topo do cartao, onde mora o logo */
.logo-faixa {
  background: #000; margin: -32px -32px 4px; padding: 26px 32px;
  border-radius: 12px 12px 0 0; text-align: center;
}
.logo-faixa img { width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto; }

@media (max-width: 560px) {
  /* com uma coluna so, o campo largo nao pode mais ocupar duas */
  .formulario .col-2 { grid-column: auto; }
  .topo-inner { padding: 10px var(--margem-lateral); flex-wrap: wrap; gap: 12px; }
  .barra-filtros { flex-direction: column; align-items: stretch; }
  .barra-filtros input, .barra-filtros select { width: 100%; min-width: 0; }
  .inline { width: 100%; }
  h1 { font-size: 19px; }
}

/* ------- lista de clientes vira CARTOES no celular e tablet ------- */
@media (max-width: 820px) {
  .tabela-rolagem { overflow-x: visible; }
  .tabela { border: 0; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: auto; }

  .tabela tr {
    background: var(--card); border: 1px solid var(--borda);
    border-radius: 12px; margin-bottom: 12px; padding: 10px 14px;
  }
  .linha-atraso   { background: #fff7ed; }
  .linha-devendo  { background: #fffdf5; }
  .linha-cancelada{ background: #fef2f2; }

  /* cada celula: rotulo a esquerda, valor a direita */
  .tabela td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    text-align: right; border: 0; padding: 5px 0; white-space: normal;
  }
  .tabela td::before {
    content: attr(data-label); font-weight: 500; color: var(--suave);
    text-align: left; flex: none;
  }
  .tabela td[data-label=""]::before,
  .tabela td:not([data-label])::before { content: none; }

  /* checkbox de lote nao faz sentido no cartao */
  .tabela td.col-check { display: none; }

  /* nome = titulo do cartao */
  .tabela td.nome {
    text-align: left; border-bottom: 1px solid var(--borda);
    padding-bottom: 8px; margin-bottom: 4px;
  }
  .tabela td.nome::before { content: none; }
  .tabela td.nome a strong { font-size: 15.5px; }

  /* acoes = barra de botoes embaixo */
  .tabela td.acoes {
    display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 6px;
    text-align: left; white-space: normal;
    border-top: 1px solid var(--borda); padding-top: 10px; margin-top: 4px;
  }
  .tabela td.acoes::before { content: none; }
  .tabela td.acoes .btn, .tabela td.acoes form { flex: 1; }
  .tabela td.acoes .btn { display: block; text-align: center; }
  .xml-sem-contador { display: none; }   /* no celular nao precisa */

  .dois-sinais { justify-content: flex-end; }
  .rodape-tabela { text-align: center; }
}

/* selecao em lote na lista de clientes */
.col-check { width: 34px; text-align: center; }
.col-check input { width: 17px; height: 17px; cursor: pointer; }
.barra-lote {
  display: none; align-items: center; gap: 12px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #0f172a; color: #fff;
  padding: 14px var(--margem-lateral);
  box-shadow: 0 -6px 20px rgba(15, 23, 42, .22);
}
.barra-lote.tem-selecao { display: flex; }
.barra-lote .lote-info { font-size: 15px; color: #fff; font-weight: 600; }
.barra-lote .lote-info span { color: #7dd3fc; font-size: 18px; }
.barra-lote .btn-mini { padding: 9px 16px; font-size: 14px; }
/* quando a barra esta ativa, sobra espaco no fim da pagina para nao tapar a ultima linha */
body.com-lote .conteudo { padding-bottom: 90px; }

/* ---- tela de teste do WhatsApp (testar-whatsapp.php) ---- */
.teste-wa { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.teste-wa h2 { margin: 0 0 4px; font-size: 16px; }
.teste-wa h3 { margin: 10px 0 4px; font-size: 14px; }
.tabela-simples { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-simples th {
  text-align: left; font-weight: 600; color: var(--suave);
  padding: 7px 12px 7px 0; white-space: nowrap; vertical-align: top; width: 150px;
}
.tabela-simples td { padding: 7px 0; border-bottom: 1px solid var(--borda); }
.tabela-simples tr:last-child td { border-bottom: 0; }
.tabela-simples small { display: block; font-size: 12px; }
.ajuda { color: var(--suave); font-size: 13.5px; line-height: 1.5; }
.ajuda li { margin: 3px 0; }
.form-teste { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.form-teste label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
.form-teste input { padding: 9px 12px; font-size: 15px; min-width: 220px; }
.aviso-ok, .aviso-erro { margin: 0; padding: 10px 14px; border-radius: var(--raio); font-size: 14px; }
.aviso-ok   { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.aviso-erro { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* menu do topo */
.topo .menu-topo { display: flex; gap: 20px; flex: 1; align-items: center; }
.topo .menu-topo a { color: #cbd5e1; text-decoration: none; font-size: 14px; font-weight: 500; }
.topo .menu-topo a:hover { color: #fff; }
.topo .menu-topo a.atual { color: #fff; border-bottom: 2px solid #60a5fa; padding-bottom: 2px; }
.resposta-api {
  background: #f8fafc; border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 12px; font-size: 12.5px; overflow-x: auto; white-space: pre-wrap;
  word-break: break-word; margin: 0 0 10px;
}
/* agente desatualizado: so aparece quando a versao difere da distribuida */
.agente-velho {
  display: block; margin-top: 2px; font-size: 11.5px;
  color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 4px; padding: 1px 6px; width: fit-content;
  margin-left: auto; margin-right: auto;
}

/* faixa da atualizacao automatica do agente (tela de clientes) */
.aviso-agente { border-color: #cbd5e1; background: #f8fafc; color: #334155; }
.aviso-agente-on { border-color: #bbf7d0; background: #f0fdf4; color: #14532d; }
.aviso-agente form { margin-left: auto; }

/* nome fantasia em cinza escuro: secundario ao Nome, mas bem legivel */
.tabela td[data-label="Fantasia"] { color: #1f2937; }

/* ------------------- recados para a tela do cliente -------------------- */
/* barra com o botao que abre a caixa: a frase primeiro, o botao no fim dela */
.barra-aviso { align-items: center; gap: 12px; }
.aviso-frase { font-size: 15px; font-weight: 600; color: var(--texto); }
/* o recado que esta no ar, na mesma barra do botao de enviar */
.no-ar {
  font-size: 15px; font-weight: 600; color: var(--texto);
  display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-left: 22px; padding-left: 26px; border-left: 3px solid var(--borda);
}
.no-ar em { font-style: normal; }
/* A sobra da barra fica dividida em dois: metade antes do botao, metade
   depois. Com "margin-left: auto" so, ele encostava na borda e ficava longe
   demais do texto sobre o qual ele age. */
.espaco-dividido { margin-left: auto; margin-right: auto; }

/* caixa dos ultimos recados: mais larga que a de enviar, porque e uma tabela.
   Precisa das duas classes no seletor: .modal-caixa vem depois neste arquivo e,
   com a mesma forca, a ultima regra e a que vale. */
.modal-caixa.modal-largo { max-width: 940px; }
/* A caixa de recados tem de se ler EXATAMENTE como a lista de clientes.
   Tres coisas destoavam: o corpo saia 15px (a lista e 16px), a celula era
   alinhada pelo topo, e TUDO ficava a esquerda - entao o numero de recados e
   o selo de situacao encostavam na borda da coluna em vez de ficarem no meio
   dela, como na tela principal. As regras abaixo sao as mesmas da .tabela. */
.tabela-recados { width: 100%; border-collapse: collapse; margin-top: 10px;
                  font-size: 16px; background: var(--card); }
.rodape-tabela { font-size: 13px; color: var(--suave); margin: 10px 0 0; }
/* a linha escondida pela busca some de verdade (hidden sozinho nao vence o
   display de tabela) */
.tabela-recados tr[hidden] { display: none; }
/* Buscar + campo + Filtrar na mesma linha, como a barra de filtros da tela
   principal. O campo ja filtra enquanto se digita; o botao esta ali porque e
   onde a mao procura por costume. */
.busca-recados { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.busca-recados label { margin: 0; }
/* o campo nao precisa da largura toda da caixa para caber o que se digita */
#buscaRecados { width: 340px; max-width: 100%; margin-top: 0; }
.tabela-recados th, .tabela-recados td {
  padding: 11px 10px; border-bottom: 1px solid var(--borda);
  /* centro por padrao, .esq nas colunas de texto: as mesmas duas regras da
     lista de clientes, onde so o nome vai para a esquerda */
  text-align: center; vertical-align: middle;
}
.tabela-recados th.esq, .tabela-recados td.esq { text-align: left; }
.tabela-recados th {
  /* titulo igual ao da lista: 15px, forte, escuro e a risca de 2px embaixo */
  font-size: 15px; font-weight: 700; color: var(--texto);
  white-space: nowrap; border-bottom: 2px solid #cbd5e1;
}
/* letra forte tambem no corpo: a hora e o texto do recado ficavam fracos */
.tabela-recados tbody td { font-weight: 600; }
/* a linha acende ao passar o mouse, igual a da lista de clientes */
.tabela-recados tbody tr:hover { background: #f8fafc; }
/* Nome do cliente: a MESMA letra da coluna Cliente da lista - 15px e peso
   600 (o resto do corpo e 16px), escuro em vez de azul, e o azul volta so no
   hover. Ver .tabela td.nome / .tabela td.nome a strong la em cima. */
.tabela-recados td.nome { font-size: 15px; }
.tabela-recados tbody td a { font-weight: 600; color: var(--texto); }
.tabela-recados tbody td a:hover { color: var(--azul); text-decoration: underline; }
.tabela-recados tr:last-child td { border-bottom: 0; }
.nao-quebra { white-space: nowrap; }
/* o <small> encolhia esse trecho para ~12px e ele destoava do resto da linha;
   aqui ele volta ao tamanho dos vizinhos (a barra do reajuste ja fazia isso) */
.no-ar .cinza { font-size: 15px; font-weight: 600; }

/* caixa centralizada do recado */
.modal-fundo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* IMPORTANTE: sem isto o display:flex acima vence o atributo hidden e a caixa
   aparece sozinha ao abrir a pagina */
.modal-fundo[hidden] { display: none; }
.modal-caixa {
  background: var(--card); border-radius: 12px; padding: 22px 24px;
  width: 100%; max-width: 520px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  max-height: 90vh; overflow-y: auto;
}
.modal-caixa h2 { margin: 0 0 16px; font-size: 18px; color: var(--texto); }
/* rotulos "Para" e "Mensagem": maiores e em negrito */
.modal-caixa label { font-size: 15px; font-weight: 600; color: var(--texto); }
/* lista de clientes com busca: mostra varios de uma vez, sem abrir dropdown.
   Nome escuro, igual a lista da tela inicial e a tabela de recados - o azul
   aqui era o mesmo excesso: 40 nomes azuis em sequencia. */
.lista-clientes { width: 100%; margin-top: 6px; font-size: 15px; }
.lista-clientes option { padding: 5px 6px; color: var(--texto); font-weight: 600; }
/* "Todos os clientes" nao e um cliente: antes se distinguia por ser o unico
   escuro no meio dos azuis. Agora que todos sao escuros, o peso e que separa. */
.lista-clientes option[value="0"] { font-weight: 700; }
/* item escolhido: fundo azul e texto branco, alem do visto no texto */
.lista-clientes option:checked { background: var(--azul); color: #fff; }
.modal-caixa textarea {
  width: 100%; resize: vertical;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texto);
}
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* envelope na coluna Acoes: laranja = enviado e nao lido, verde = lido */
.aviso-selo { cursor: help; }
.aviso-nao-lido { background: #fff7ed; border-color: #fed7aa; }
.aviso-nao-lido svg { color: var(--laranja); }
.aviso-lido { background: #f0fdf4; border-color: #bbf7d0; }
.aviso-lido svg { color: var(--verde); }
/* nunca recebeu recado: apagado, so para manter a largura da coluna */
.aviso-sem { cursor: default; background: #f8fafc; border-color: #eef2f7; }
.aviso-sem svg { color: #cbd5e1; }

/* botoes da faixa de atualizacao: juntos no fim, com a acao principal na ponta */
.aviso-botoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.aviso-botoes form { margin: 0; }

/* status e legendas em negrito: leitura mais rapida na lista */
.verde, .laranja, .vermelho, .cinza { font-weight: 600; }
.tabela th { font-weight: 700; }
.tabela td small { font-weight: 600; }