/* SeuLead app: mobile-first. Direcao "registro carimbado" (2026-07-14):
   livro de protocolo da clinica, nao dashboard SaaS. Tinta verde da marca,
   dourado contido (conversao e assinatura), papel quente, numeros tabulares
   em mono (lancamento contabil) e display Bricolage para os herois.
   Fontes self-hosted em assets/fonts (PWA offline). */

@font-face{
  font-family:'Bricolage Grotesque';
  src:url('/leads/assets/fonts/bricolage-var.woff2') format('woff2');
  font-weight:400 800;font-display:swap;
}
@font-face{
  font-family:'Spline Sans Mono';
  src:url('/leads/assets/fonts/splinemono-var.woff2') format('woff2');
  font-weight:300 700;font-display:swap;
}

:root{
  /* Marca: tinta e selo */
  --verde:#0c2a21;--verde2:#123c30;--selo:#1d5c47;
  --dourado:#c9a96e;--dourado-d:#b4915a;--dourado-tinta:#7d5f31;
  --creme:#f4ecd8;
  /* Papel e tinta */
  --bg:#f3efe5;--branco:#fffdfa;
  --tinta:#243029;--tinta2:#4d5a52;
  /* --suave era #8b968e: 3,02:1 sobre o cartao e 2,67:1 sobre o papel, os dois
     abaixo do minimo de 4,5:1 da WCAG para texto corrido. E o tom de MEIO texto
     do sistema (rotulo de grupo do menu, legenda de cartao, aba inativa, nota
     de campo), entao a leitura fraca aparecia em toda tela. #636d68 mantem o
     degrau abaixo de --tinta2 e passa: 5,28:1 no cartao, 4,67:1 no papel. */
  --suave:#636d68;
  /* Fios de tinta (>=16% p/ nao sumir no claro) */
  --linha:rgba(12,42,33,.17);--linha-s:rgba(12,42,33,.10);--fio-forte:rgba(12,42,33,.30);
  --ok:#1d5c47;--alerta:#8a6b3a;--erro:#a13024;
  --f-display:'Bricolage Grotesque',-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Spline Sans Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --topo-h:56px;--sb:env(safe-area-inset-bottom,0px);
  /* Altura da faixa de rede. Zero quando ha conexao, e a altura MEDIDA da
     faixa quando nao ha (ver pintarRede em app.js). Tudo o que e `fixed`
     no topo desce por ela: sem isso a faixa cobre 53 dos 56px do
     cabecalho, e sem rede a pessoa perde o botao do menu, ou seja, fica
     presa na tela em que estiver. Medido em 02/09/2026. */
  --rede-h:0px;
  /* Escala de texto pequeno, com PISO em 11,5px. Antes eram dez tamanhos
     entre .56rem e .72rem, todos abaixo do limite de leitura confortavel no
     celular: o menor media 9,28px. A diferenca entre .66rem e .68rem nao
     existe para o olho, so para o arquivo. */
  /* 20/08/2026: --t-micro subiu de .72rem (11,52px) para .75rem (12px). Ele e
     usado 39 vezes e alcanca 24 componentes, entre eles o cabecalho de TODA
     tabela, o rotulo de TODO KPI, o segmento do cliente e a frase de erro da
     integracao. Ou seja: o piso da escala estava carregando informacao que
     pede acao, e nao enfeite. */
  --t-micro:.75rem;--t-mini:.78rem;--t-nota:.8125rem;--t-corpo:.875rem;

  /* ------------------------------------------------------------------
     APELIDOS, e o motivo de existirem (26/08/2026).

     Uma varredura por `var(--x, #fallback)` achou OITO nomes usados e NUNCA
     declarados, em 16 lugares. Sem declaracao, quem pinta e sempre o fallback:
     a folha PARECE tokenizada e nao e. Mexer no valor aqui em cima nao muda
     nada naquelas 16 regras, que e justamente o contrario do que um token
     promete.

     E a divergencia ja tinha comecado: `--papel` aparecia com #fffdfa numa
     linha e #f3efe5 em outra, ou seja, o MESMO nome pintando duas cores. E
     `--erro` tinha um fallback #b3261e (vermelho do Material) ao lado de tres
     `--erro,#a13024` no mesmo arquivo.

     Declarar os apelidos, em vez de sair renomeando as 16 chamadas, e a
     escolha de menor risco: nada muda de cor hoje, o sistema volta a ser
     verdadeiro, e a proxima troca de valor alcanca tudo. Nome novo que
     aparecer sem declaracao volta a cair no fallback, e a mesma varredura
     acha de novo.
     ------------------------------------------------------------------ */
  --papel:#f3efe5;        /* o mesmo --bg: fundo da pagina */
  --cartao:#fffdfa;       /* o mesmo --branco: superficie de cartao */
  --borda:rgba(12,42,33,.17);   /* o mesmo --linha */
  --fundo-2:#faf7ee;      /* papel um degrau mais claro, ja na paleta */
  --fundo2:#eef4ef;       /* variante sem hifen que ficou em duas regras */
  --texto-suave:#636d68;  /* o mesmo --suave, o tom que passou no contraste */
  --verde-tint:#eef4ef;   /* tint verde do ecossistema */
  --dourado-escuro:#7d5f31; /* o mesmo --dourado-tinta */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topo-h) + 12px)}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background-color:var(--bg);background-image:radial-gradient(rgba(12,42,33,.022) .65px,transparent .75px);background-size:9px 9px;color:var(--tinta);font-size:16px;line-height:1.45}
/* Trava global de rolagem horizontal: clip, e nao hidden, para nao criar um
   scroll container que mataria position:sticky (regra da casa). */
html,body{overflow-x:clip}
button{font-family:inherit}
/* 20/08/2026: o anel era dourado e media 1,95:1 sobre o papel, abaixo dos
   3:1 que a WCAG 2.2 pede para indicador de foco. O verde da marca, no mesmo
   fundo, mede 13,36:1, e ja era o que .cli-nome-acao usava. */
:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Login */
.tela-login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:linear-gradient(168deg,#08201a,#0c2a21 58%,#164a3b);padding:22px}
.login-caixa{background:var(--branco);border-radius:18px;padding:34px 26px 26px;width:100%;max-width:390px;box-shadow:0 22px 55px rgba(0,20,15,.42);text-align:center;border-top:4px solid var(--dourado)}
/* Logomarca oficial (lockup transparente, proporcao ~1.24:1) */
.marca-logo{display:block;width:auto;height:104px;margin:0 auto 2px}
.login-sub{color:var(--tinta2);font-size: var(--t-micro);margin:6px 0 22px;font-family:var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
/* Nome da agência quando a entrada é por /a/<slug> (bill-026). */
.login-agencia{margin:4px 0 10px;font-weight:600;letter-spacing:.02em;opacity:.85;text-align:center}
/* Powered by SeuSaúde: logomarca colorida em destaque, com hiperlink. */
.login-rodape{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:22px;font-size: var(--t-micro);color:var(--tinta2);font-family:var(--f-mono);letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
.login-rodape img{height:34px;width:auto;display:block;align-self:center}
.login-rodape:hover img{opacity:.85}
.lbl{display:block;text-align:left;font-size: var(--t-mini);font-weight:600;color:var(--tinta2);margin:12px 0 5px}
.inp{width:100%;padding:12px 13px;border:1px solid var(--linha);border-radius:10px;font-size:16px;color:var(--tinta);background:var(--branco);font-family:inherit}
/* Sem outline:none. O brilho translucido media 1,19:1 e, sozinho, deixava o
   campo focado indistinguivel para quem navega por teclado. O anel global
   volta a valer e o brilho fica so como reforco. */
.inp:focus-visible{border-color:var(--verde);box-shadow:0 0 0 3px rgba(12,42,33,.16)}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234d5a52' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
/* ------------------------------------------------ Caixa de marcacao (global)
   A caixa desenhada tem 17 a 20px, que e o certo para o olho e pequeno demais
   para o dedo. Quem recebe o toque e o ROTULO, entao a altura minima vai nele:
   o desenho nao muda de tamanho e a fileira inteira passa a valer como alvo.
   Antes cada modulo resolvia por conta propria (.mid-check tinha 44px,
   .fer-check e os rotulos com estilo embutido nao tinham nada), e a auditoria
   de 18/08/2026 achou 13px na Configuracao, 17px em Conversoes e Anuncios e
   20px na Aprovacao da Central. Uma regra so fecha os quatro.
   `:has()` pede Chrome 105+; abaixo disso o rotulo volta ao tamanho do texto,
   que e exatamente o estado de hoje: degrada sem quebrar.
   O interruptor (.ncf-liga) fica DE FORA: ele ja resolve a area de toque com
   padding + margem negativa, e a caixa dele e invisivel de proposito. */
label:has(>input[type=checkbox]):not(.ncf-liga),
label:has(>input[type=radio]):not(.ncf-liga){
  display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;touch-action:manipulation}
/* A fileira de item do financeiro tem rotulo de duas linhas: o alinhamento
   pelo topo e o certo la, e a altura minima continua valendo. */
.fin-item-cx:has(>input[type=checkbox]){align-items:flex-start}
/* Um tamanho so para a caixa desenhada. Eram tres no mesmo app (20px na
   Central, 17px em Ferramentas e no Financeiro, 13px do navegador na
   Configuracao), e duas delas apareciam na mesma tela. `.ncf-chk` fica de
   fora: e a caixa invisivel do interruptor, esticada por `inset:0` para
   cobrir o trilho, e dar largura a ela encolheria a area de toque. */
input[type=checkbox]:not(.ncf-chk),input[type=radio]{
  flex:0 0 auto;width:18px;height:18px;accent-color:var(--selo)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:10px;border:none;font-size:.98rem;font-weight:700;cursor:pointer;margin-top:16px}
.btn:active{transform:translateY(1px)}
.btn-primario{background:var(--verde);color:var(--creme)}
.btn-primario:active{background:var(--verde2)}
.btn-dourado{background:var(--dourado);color:var(--verde)}
.btn-dourado:active{background:var(--dourado-d)}
.btn-claro{background:rgba(12,42,33,.06);color:var(--tinta2)}
.btn-peq{width:auto;min-height:44px;padding:10px 13px;font-size:.82rem;margin:0;border-radius:9px;touch-action:manipulation}
.btn[disabled]{opacity:.55}
.alerta{padding:11px 13px;border-radius:10px;font-size:.85rem;margin-bottom:8px;text-align:left}
.alerta-erro{background:#faf1ef;color:var(--erro);border:1px solid rgba(161,48,36,.35)}
.alerta-info{background:#eef4ef;color:var(--verde);border:1px solid rgba(29,92,71,.3)}

/* Shell */
/* A altura SOMA o safe-area: com height fixo o padding do notch comia os 56px
   e esmagava o cabecalho no iPhone. */
.topo{position:fixed;top:var(--rede-h);left:0;right:0;height:calc(var(--topo-h) + env(safe-area-inset-top,0px));z-index:50;background:linear-gradient(180deg,#0a241d,#0c2a21);color:var(--creme);display:flex;align-items:center;gap:11px;padding:0 14px;padding-top:env(safe-area-inset-top,0px);border-bottom:2px solid var(--dourado)}
/* Logomarca oficial no topo (variante clara sobre o verde) */
.topo-logo{height:40px;width:auto;display:block;flex:0 0 auto}
.topo-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.topo-txt strong{font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo-txt span{font-size: var(--t-micro);color:#c9b892;font-family:var(--f-mono);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 16px de fonte: abaixo disso o iOS da zoom ao focar o seletor. A compactacao
   fica por conta do padding, nunca da fonte. */
.topo-cliente{max-width:150px;min-height:44px;background-color:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:4px 28px 4px 9px;font-size:16px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23f4ecd8' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;white-space:nowrap;text-overflow:ellipsis}
.topo-cliente option{color:#243029}

/* Botao da gaveta: so no celular. No desktop a barra lateral esta sempre la, e
   um botao para abrir o que ja esta aberto e um botao que nao faz nada. */
.topo-menu{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:10px;color:var(--creme);cursor:pointer;padding:0}
.topo-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}

.shell-corpo{display:block}

.conteudo{padding:calc(var(--topo-h) + var(--rede-h) + env(safe-area-inset-top,0px) + 12px) 12px calc(var(--sb) + 24px);max-width:640px;margin:0 auto}
.conteudo:focus{outline:none}

/* ---------------------------------------------------------------- Navegacao
   UMA barra para todas as larguras: lateral no desktop, gaveta no celular.
   Antes eram cinco vagas no rodape, e cinco vagas nao cabem o que a ferramenta
   virou: a Central de Midia sozinha tem cinco secoes. */
.lateral{position:fixed;top:calc(var(--topo-h) + var(--rede-h) + env(safe-area-inset-top,0px));left:0;bottom:0;width:min(84vw,290px);z-index:60;background:var(--cartao,#fffdfa);border-right:1px solid var(--linha);
  padding:14px 10px calc(var(--sb) + 20px);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-101%);transition:transform .22s ease;box-shadow:8px 0 26px rgba(12,42,33,.10)}
body.gaveta-aberta .lateral{transform:translateX(0)}
/* Controlado por classe no body, e NAO pelo atributo hidden: `hidden` perde
   para qualquer display de autor, e o veu apareceria sempre. */
.gaveta-veu{display:none;position:fixed;inset:0;z-index:55;background:rgba(12,42,33,.42);backdrop-filter:blur(2px);touch-action:none}
body.gaveta-aberta .gaveta-veu{display:block}
/* Gaveta aberta trava o scroll do documento: sem isto o conteudo atras do veu
   rolava junto com o dedo. */
body.gaveta-aberta{overflow:hidden}

.nav-grupo{margin-bottom:18px}
.nav-grupo:last-child{margin-bottom:0}
/* Titulo de grupo com fio: separa os blocos sem gastar uma linha inteira de
   espaco em branco, que e o que fazia a barra parecer uma lista solta. */
.nav-grupo-t{display:flex;align-items:center;gap:8px;margin:0 0 7px 10px;padding-right:6px;
  font-family:var(--f-mono);font-size: var(--t-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);
  /* min-width:0 + quebra: nome de cliente longo nao pode esticar a barra. */
  overflow-wrap:anywhere}
.nav-grupo-t::after{content:'';flex:1;height:1px;background:var(--linha-s)}
.nav-btn{position:relative;width:100%;background:none;border:none;display:flex;align-items:center;gap:10px;
  color:var(--tinta);font-size:.86rem;font-weight:600;letter-spacing:.01em;cursor:pointer;
  padding:9px 10px;border-radius:9px;text-align:left;min-height:44px;
  transition:background .14s ease,color .14s ease}
.nav-btn svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--suave);transition:color .14s ease}
.nav-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-btn:hover{background:rgba(12,42,33,.05)}
.nav-btn:hover svg{color:var(--tinta2)}
.nav-btn.ativo{background:var(--verde-tint,#eef4ef);color:var(--verde);font-weight:750}
.nav-btn.ativo svg{color:var(--verde)}
.nav-btn.ativo::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--dourado)}

/* Segundo nivel da barra: o bloco do cliente em foco.
   O nome do cliente era um titulo fixo, o que so funciona com um cliente na
   carteira. Virou um SELETOR que abre um painel ancorado (ver .nav-lista). */
.nav-grupo--cliente{border:1px solid var(--linha);border-radius:12px;padding:9px 7px 7px;background:rgba(12,42,33,.028);margin-bottom:18px}
.nav-grupo-t--cli{margin-left:3px;margin-bottom:5px;color:var(--dourado-tinta)}
.nav-grupo-t--cli::after{background:rgba(201,169,110,.42)}
.nav-cliente{margin-bottom:8px}
.nav-sel{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;cursor:pointer;
  background:var(--branco,#fff);border:1px solid var(--linha);border-radius:9px;padding:9px 10px;min-height:44px;
  transition:border-color .14s ease,box-shadow .14s ease}
.nav-sel:hover{border-color:var(--selo)}
.nav-sel[aria-expanded="true"]{border-color:var(--selo);box-shadow:0 0 0 3px rgba(29,92,71,.12)}
/* min-width:0 + ellipsis: nome de clinica longo esticaria a barra inteira. */
.nav-sel-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:750;font-size:.92rem;color:var(--tinta)}
.nav-sel-i{flex:0 0 auto;color:var(--suave);font-size: var(--t-micro);transition:transform .16s ease}
.nav-sel[aria-expanded="true"] .nav-sel-i{transform:rotate(180deg)}
.nav-voltar{display:flex;align-items:center;gap:5px;width:100%;min-height:44px;background:none;border:none;cursor:pointer;
  padding:7px 4px 1px;font-size: var(--t-micro);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--suave)}
.nav-voltar:hover{color:var(--verde)}

/* Painel de troca de cliente. No celular ele e um bloco dentro da gaveta; o
   bloco de desktop (>=1000px) o transforma em painel flutuante AO LADO da
   barra, posicionado por JS. */
.nav-lista{position:fixed;left:8px;right:8px;bottom:calc(var(--sb) + 12px);z-index:70;display:flex;flex-direction:column;
  background:var(--branco);border:1px solid var(--fio-forte);border-radius:13px;padding:10px;
  box-shadow:0 20px 48px rgba(12,42,33,.22);max-height:min(62vh,440px)}
.nav-lista[hidden]{display:none}
.nav-lista-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.nav-lista-cab span{font-family:var(--f-mono);font-size: var(--t-micro);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--tinta2)}
.nav-lista-x{background:none;border:none;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--suave);padding:0 4px}
.nav-lista-x:hover{color:var(--erro)}
.nav-busca{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--linha);border-radius:9px;
  /* 16px evita o zoom automatico do iOS ao focar o campo. */
  font-size:16px;margin-bottom:6px;background:var(--branco);color:var(--tinta);font-family:inherit}
.nav-busca:focus{outline:none;border-color:var(--selo);box-shadow:0 0 0 3px rgba(29,92,71,.14)}
/* A lista rola DENTRO do painel: com trinta clientes ela sairia da tela. */
.nav-lista-itens{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px}
.nav-cli{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:8px 9px;border-radius:8px;min-height:40px;transition:background .12s ease}
.nav-cli-n{font-size:.88rem;color:var(--tinta);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-cli-s{font-size: var(--t-micro);color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-cli:hover{background:var(--verde-tint,#eef4ef)}
.nav-cli.ativo{background:var(--verde-tint,#eef4ef)}
.nav-cli.ativo .nav-cli-n{color:var(--verde);font-weight:750}
.nav-lista-vazio{font-size: var(--t-mini);color:var(--suave);padding:9px;margin:0;text-align:center}

/* Acao destrutiva: cor propria, e so ela. O botao de excluir cliente nao pode
   parecer com "Configurar", que fica ao lado do mesmo tamanho. */
.btn-perigo{background:#fff;color:#8f2d21;border:1px solid rgba(143,45,33,.4)}
.btn-perigo:hover{background:#8f2d21;color:#fff;border-color:#8f2d21}
.cli-arq-link{margin:0 0 10px}

/* Cartoes e titulos de secao (rotulo de livro de registro com fio) */
/* Densidade mobile-first: caixas compactas (menos rolagem no celular);
   o bloco desktop re-expande paddings. */
.card{background:var(--branco);border:1px solid var(--linha);border-radius:13px;padding:12px;margin-bottom:9px;box-shadow:0 1px 0 rgba(12,42,33,.025)}
.card h2{font-family:var(--f-display);font-weight:700;font-size:.95rem;margin-bottom:8px}
.sec-tit{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size: var(--t-micro);font-weight:700;text-transform:uppercase;letter-spacing:.085em;color:var(--tinta2);margin:14px 0 7px}
.sec-tit::after{content:'';flex:1;height:1px;background:var(--linha)}
/* Subtitulo dentro de uma secao (ex.: o comparativo logo abaixo do funil do
   fechamento). Sem a regua do .sec-tit, para nao competir com o titulo. */
.sec-sub{font-family:var(--f-mono);font-size: var(--t-micro);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);margin:12px 0 6px}
/* Acoes do painel do cliente (Trafego, Leads, Auditoria, PDF, Relatorio).
   Precisa QUEBRAR no celular: com nowrap os 5 botoes do gestor empurravam a
   pagina 20px alem da viewport e criavam rolagem horizontal no documento. */
.painel-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.painel-identidade{display:flex;align-items:center;gap:10px;min-width:0}
.painel-identidade .volta{margin-bottom:0;flex:0 0 auto}
.cliente-titulo{font-family:var(--f-display);font-size:1.02rem;line-height:1.25;overflow-wrap:anywhere}
.acoes-cliente{gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.linha-flex{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}

/* Quadro de KPIs: pagina de livro (fios internos, nao cards soltos) */
/* Ação do dia (30/08/2026): fila de pauta no topo da carteira. O nome do
   cliente é botão e leva ao painel dele; o texto é a ação, não um resumo. */
.acao-dia{border-left:3px solid var(--dourado);margin-bottom:10px}
.acao-dia-lista{list-style:none;margin:8px 0 0;padding:0}
.acao-dia-item{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--linha-s)}
.acao-dia-item:first-child{border-top:none}
.acao-dia-cli{flex:0 0 auto;max-width:38%;background:none;border:none;padding:0;cursor:pointer;font:inherit;font-weight:700;color:var(--selo);text-decoration:underline;text-underline-offset:3px;text-align:left;overflow-wrap:anywhere}
.acao-dia-cli:hover{color:var(--verde)}
.acao-dia-txt{flex:1;min-width:0;font-size:.85rem;line-height:1.45;color:var(--tinta2);overflow-wrap:anywhere}
.acao-dia-txt strong{color:var(--tinta)}

/* O BOTAO QUE RESOLVE (02/09/2026).
   No DESKTOP ele fica na terceira coluna, alinhado ao topo do item, para nao
   empurrar o texto. No CELULAR o item vira uma coluna so, e a ordem passa a
   ser a de leitura: cliente, o que houve, e o que fazer. O botao ocupa a
   largura inteira porque, num item de quatro linhas, um botao pequeno no fim
   da terceira e o alvo mais dificil de acertar com o polegar. */
.acao-dia-acao{flex:0 0 auto;align-self:flex-start}
@media (max-width:640px){
  .acao-dia-item{flex-direction:column;align-items:stretch;gap:6px;padding:11px 0}
  .acao-dia-cli{max-width:100%}
  /* `align-self:stretch` anula o `flex-start` da regra de desktop: sem ele o
     botao encolhe e a largura inteira nao acontece, que foi o que a primeira
     medicao mostrou (94px num item de 323px). */
  .acao-dia-acao{margin-top:2px;align-self:stretch}
  .acao-dia-acao .btn{width:100%}
}
@media (max-width:560px){
  .acao-dia-item{flex-direction:column;gap:2px}
  .acao-dia-cli{max-width:100%}
}
/* Dedo, não ponteiro: o nome-botão é texto e precisa de área real de toque. */
@media (any-pointer:coarse){
  .acao-dia-cli{min-height:44px;display:inline-flex;align-items:center}
}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linha);border:1.4px solid var(--fio-forte);border-radius:13px;overflow:hidden;margin-bottom:10px}
/* `height:100%` para a celula PREENCHER a faixa dela. O fundo do quadro e a
   cor do fio (e assim que os fios internos aparecem, sem borda em celula
   nenhuma), entao celula que nao chega ao pe da fileira deixa uma tira cinza
   aparecendo por baixo. No celular, onde a faixa quebra em 2x2, a tira ficava
   visivel embaixo de "Sem reporte (2d+)" e parecia sujeira de render. */
.kpi{background:var(--branco);border:none;border-radius:0;padding:9px 12px;height:100%}
/* overflow-wrap + clamp: em 320-360px o valor monetario nao pode ser cortado
   pelo overflow:hidden do quadro. */
/* min-height + fundo alinhado: "sem dado" e escrito em mono .72rem e derrubava
   a altura da linha do numero de ~1,6rem para ~1rem. Como a faixa e uma grade
   de celulas coladas, UMA celula sem dado subia o rotulo dela e a fileira
   inteira perdia o alinhamento (visivel em Trafego, com "sem dado / CPL real"
   ao lado de tres numeros grandes). `1.15em` e exatamente uma linha do proprio
   corpo do numero, entao a reserva acompanha o clamp sem numero magico. */
.kpi .n{font-family:var(--f-display);font-size:clamp(1.05rem,5.5vw,1.4rem);font-weight:800;color:var(--verde);line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
  display:flex;align-items:flex-end;min-height:1.15em}
/* KPI sem dado: DIZ que nao tem dado. O marcador era um ponto do meio ("·")
   no corpo do numero, que em 1,4rem lia como sujeira de renderizacao, nao
   como ausencia. */
.kpi .n .vaz{font-family:var(--f-mono);font-size:.72rem;font-weight:500;color:var(--suave);letter-spacing:.02em}
.kpi .l{font-size: var(--t-micro);color:var(--tinta2);font-family:var(--f-mono);letter-spacing:.02em;text-transform:uppercase;line-height:1.35}
/* Descricao curta sob o KPI (Comercial): sem esta regra saia no tamanho do texto
   corrente e quebrava o alinhamento dos cards no mobile (visto em 2026-07-24). */
.kpi .f{font-size: var(--t-micro);color:var(--tinta2);margin-top:3px;font-family:var(--f-mono);letter-spacing:.02em;line-height:1.35}
.kpi.dourado{background:#fbf5e9}
.kpi.dourado .n{color:var(--dourado-tinta)}
.kpis--trio{grid-template-columns:1fr 1fr 1fr}
/* Moeda longa no trio (ex.: R$ 1.280,00) nao precisa do corpo cheio no mobile */
.kpis--trio .kpi .n{font-size:clamp(.95rem,4.5vw,1.15rem)}
/* Abaixo de 380px o trio nao cabe em 3 colunas: vira 2+1, com o terceiro
   ocupando a linha inteira (celula vazia mostraria o fundo do quadro). */
@media(max-width:379px){
  .kpis--trio{grid-template-columns:1fr 1fr}
  .kpis--trio .kpi:last-child{grid-column:1 / -1}
}

/* Blocos de secao: no mobile fluem; no desktop viram grade de 2 colunas */
.bloco{min-width:0}
.card--tabela{padding:3px 12px}
.linha-tab{padding:6px 0;border-bottom:1px solid var(--linha-s);gap:10px}
/* Telas de 320px: valor longo (nome, moeda com faixa) quebra em vez de estourar */
.linha-tab strong{min-width:0;overflow-wrap:anywhere;text-align:right}
.linha-tab:last-child{border-bottom:none}
.linha-tab>span:first-child{min-width:0;overflow-wrap:anywhere}
/* flex:0 1 auto, nunca 0 0: com flex-shrink:0 o strong não encolhia, o
   overflow-wrap da regra de cima nunca era acionado e o valor vazava para
   fora da linha em 320-360px (o overflow-x:clip do body amputava a ponta). */
.linha-tab strong{flex:0 1 auto;font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}

/* Itens de lista: linha de registro */
.item{background:var(--branco);border:1px solid var(--linha);border-radius:11px;padding:11px 12px;margin-bottom:7px;width:100%;text-align:left;cursor:default;display:block;box-shadow:0 1px 0 rgba(12,42,33,.025)}
.item .it-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.item .it-nome{font-size:.92rem;font-weight:600}
.item .it-sub{font-size:.75rem;color:var(--tinta2);margin-top:3px}

/* Assinatura: status como CARIMBO de tinta (uppercase, mono, borda de tinta).
   Convertido e perdido levam a leve rotacao de carimbo real. */
.tag{display:inline-block;padding:3px 8px;border-radius:5px;font-family:var(--f-mono);font-size: var(--t-micro);font-weight:700;text-transform:uppercase;letter-spacing:.065em;border:1.4px solid currentColor;background:transparent;line-height:1.3}
.tag-novo{color:var(--verde)}
.tag-em_contato{color:var(--alerta)}
.tag-agendado{color:var(--selo);background:rgba(29,92,71,.07)}
.tag-convertido{color:var(--dourado-tinta);background:rgba(201,169,110,.16);transform:rotate(-2deg)}
.tag-perdido{color:var(--erro);transform:rotate(1.5deg)}
.tag-sem_retorno{color:var(--suave)}
.pon{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}

/* Barras por origem (moldura de card: sem ela flutuavam no papel) */
.barra{display:flex;flex-direction:column;gap:8px;background:var(--branco);border:1px solid var(--linha);border-radius:13px;padding:11px 12px}
.barra-l{display:grid;grid-template-columns:minmax(84px,40%) 1fr 32px;align-items:center;gap:9px;font-size:.82rem}
/* Sem reticencias: nomes de origem quebram em 2 linhas em vez de cortar
   ("Liberação miofascial" ficava ilegivel). */
.barra-l .nm{line-height:1.25;overflow-wrap:anywhere}
.barra-trilha{background:rgba(12,42,33,.07);border-radius:6px;height:14px;overflow:hidden}
.barra-fill{height:100%;border-radius:6px;min-width:3px}
.barra-v{text-align:right;font-weight:700;color:var(--tinta2);font-size: var(--t-mini);font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* Chips de escolha */
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
/* min-height de 42px: o chip e o controle mais tocado do sistema (origem,
   interesse e situacao no Registrar, tres toques por lead, dezenas de vezes
   por dia na recepcao). Fechava em 36px, abaixo do alvo confortavel. */
.chip{border:1px solid var(--linha);background:var(--branco);border-radius:999px;padding:8px 13px;min-height:44px;display:inline-flex;align-items:center;font-size:.85rem;cursor:pointer;color:var(--tinta);transition:border-color .15s ease,background .15s ease,color .15s ease,transform .12s ease}
.chip.on,.chip.chip--on{background:var(--verde);color:var(--creme);border-color:var(--verde)}
/* chip--on: alias do estado ativo. Avisos e Estudo aplicam esta classe por JS
   e ela nao existia em CSS nenhum: o filtro mudava a lista sem marcar o botao. */
/* Mesma regua do .chip: a situacao do lead e escolhida no mesmo gesto. */
/* Situação do lead com o MESMO vocabulário das outras escolhas (01/09/2026,
   pedido do dono: tela mais minimalista). Eram blocos retangulares dourados
   num grid próprio, três estilos de botão na mesma tela; viram a pílula padrão,
   e o estado ativo é o verde da casa — o dourado fica para o desfecho
   (Convertido), único que merece cor própria. */
.chip-status{border:1px solid var(--linha);background:var(--branco);border-radius:999px;padding:8px 14px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;cursor:pointer;text-align:center;color:var(--tinta);transition:border-color .15s ease,background .15s ease,color .15s ease}
.chip-status.on{background:var(--verde);color:var(--creme);border-color:var(--verde);font-weight:600}
.chip-status[data-id="convertido"].on{background:var(--dourado);color:var(--verde);border-color:var(--dourado-d);font-weight:700}

.grupo{margin-bottom:14px}
.grupo .lbl{margin-top:0}
/* Estado vazio SEMPRE emoldurado (conserto de 18/08/2026).
   A moldura tracejada valia so para o .vazio filho direto do #conteudo. Nas
   telas em que ele nasce dentro de um bloco (Fechamentos, Financeiro,
   Trafego, secoes da Central de Midia) o aviso saia como uma linha de texto
   solta no papel, sem inicio nem fim: parecia sobra de conteudo, e nao a
   resposta da tela. Agora a caixa e a mesma em todo lugar. */
.vazio{text-align:center;color:var(--tinta2);font-size:.86rem;padding:26px 18px;
  background:rgba(255,253,250,.55);border:1px dashed var(--linha);border-radius:12px;margin-top:8px}
.conteudo>.vazio{margin-top:8px}
/* Titulo curto do estado vazio: diz o que houve; o paragrafo diz o que fazer. */
.vazio strong{display:block;font-family:var(--f-display);font-size:.98rem;color:var(--tinta);margin-bottom:5px}
/* Medida de leitura tambem no aviso de tela vazia. Num conteudo de 1.030px o
   quadro tracejado ia de ponta a ponta com duas frases curtas centralizadas
   dentro: sobrava moldura e faltava texto, e o bloco lia como sobra de layout
   em vez de resposta da tela. Estreitado e centralizado, ele vira um painel
   deliberado. Em telas estreitas o `min()` devolve a largura inteira. */
/* `width:100%` JUNTO, e não só o teto e as margens. Em item de GRADE (é o caso
   do aviso dentro de #listaLeads, que ocupa a linha toda com grid-column:1/-1)
   a margem automática cancela o esticar e o bloco vira shrink-to-fit: medi
   366px onde a regra pedia 504px, e a largura passava a depender do tamanho da
   frase, então dois avisos da mesma tela saíam com larguras diferentes. Com a
   largura declarada, o teto é que manda. Em fluxo normal não muda nada. */
.vazio{width:100%;max-width:min(100%,68ch);margin-left:auto;margin-right:auto}

/* Carregamento discreto: mantém contexto visual sem deixar uma palavra solta
   no papel durante requisições. */
.estado-carregando{min-height:116px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--tinta2);font-family:var(--f-mono);font-size: var(--t-micro);letter-spacing:.04em;text-transform:uppercase;background:rgba(255,253,250,.5);border:1px dashed var(--linha);border-radius:12px}
.estado-pulso{width:8px;height:8px;border-radius:2px;background:var(--dourado);box-shadow:12px 0 0 rgba(201,169,110,.55),24px 0 0 rgba(201,169,110,.25);margin-right:24px;animation:pulso-registro 1.05s ease-in-out infinite}
@keyframes pulso-registro{50%{opacity:.42;transform:translateY(-2px)}}

/* Config clássica: linha de adição enxuta + botão "+" quadrado */
.pill-lista{display:flex;flex-wrap:wrap;gap:2px 0;margin-bottom:10px}
.add-linha{display:flex;align-items:center;gap:8px}
.add-linha .inp{flex:1;min-width:0}
/* O seletor de cor tem largura FIXA. Sem o `.add-linha` no seletor ele perdia
   para `.add-linha .inp{flex:1}`, crescia junto com a linha e espremia o campo
   de texto ao lado, que aparecia cortado em "Adicionar orige". */
.inp-cor,.add-linha .inp-cor{flex:0 0 46px;width:46px;height:42px;padding:2px;min-width:0}
.btn-add{width:42px;height:42px;flex:0 0 auto;padding:0;margin:0;border-radius:10px;font-size:1.5rem;font-weight:400;line-height:1}

/* Hub de integrações: operação, roadmap e enriquecimento automático ficam
   separados como seções do mesmo registro, sem misturar disponibilidade. */
.integ-hub{position:relative;overflow:hidden}
.integ-hub::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--dourado),rgba(201,169,110,.08))}
.integ-intro{margin-bottom:13px;max-width:58ch}
.integ-grupo{padding-top:11px;border-top:1px solid var(--linha)}
.integ-grupo+.integ-grupo{margin-top:14px}
.integ-grupo-cab{display:flex;align-items:flex-start;gap:9px;margin-bottom:4px}
.integ-grupo-cab>span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.integ-grupo-cab b{font-family:var(--f-display);font-size:.82rem;color:var(--verde)}
.integ-grupo-cab small{font-size: var(--t-micro);color:var(--suave)}
.integ-grupo-n{font-family:var(--f-mono);font-size: var(--t-micro);line-height:20px;color:var(--dourado-tinta);border:1px solid rgba(201,169,110,.55);border-radius:5px;padding:0 5px;flex:0 0 auto}
.integ-lista{display:flex;flex-direction:column;margin-left:31px}
.integ-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--linha-s)}
.integ-item:last-child{border-bottom:none}
.integ-item.off{opacity:.68}
.integ-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.integ-txt b{font-size:.86rem;font-weight:600;color:var(--tinta)}
.integ-desc{font-size: var(--t-micro);line-height:1.35;color:var(--tinta2)}
.integ-meta{font-family:var(--f-mono);font-size: var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.integ-item .btn-peq{flex:0 0 auto}
.integ-item>.tag{white-space:nowrap;text-align:center}
.tag-automatico{color:var(--ok);background:rgba(29,92,71,.09);transform:rotate(-1deg)}
.integ-grupo-auto{padding:11px 9px 3px;border:1px solid var(--linha-s);border-radius:9px;background:rgba(12,42,33,.025)}
.integ-grupo-auto .integ-lista{margin-left:31px}
/* Conta de anuncio da integracao conectada (Google Ads / Meta Ads): entra
   logo abaixo da linha, ainda dentro do bloco de integracoes. */
.integ-conta{display:flex;align-items:flex-start;gap:8px;padding:0 2px 10px;border-bottom:1px solid var(--linha-s)}
.integ-conta .btn-peq{flex:0 0 auto}
/* Busca de conta de anúncio (Config > Conexões): input que filtra a lista que
   a Meta devolve; um input escondido .ic-conta guarda o ID escolhido. A lista
   abre NO FLUXO (empurra o conteúdo): .integ-hub tem overflow:hidden e
   cortaria um dropdown flutuante. Por isso o align-items:flex-start acima:
   input e botão têm a mesma altura fechada, e a lista cresce só para baixo. */
.ic-busca{flex:1;min-width:0}
.ic-busca-lista{margin-top:4px;background:var(--branco);border:1px solid var(--linha);border-radius:10px;max-height:240px;overflow-y:auto;padding:4px;box-shadow:0 10px 24px rgba(0,20,15,.10)}
.ic-busca-item{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:8px;background:none;font:inherit;color:var(--tinta);cursor:pointer}
.ic-busca-item b{font-size:var(--t-corpo)}
.ic-busca-item span{font-size:var(--t-mini);color:var(--suave);font-family:var(--f-mono)}
.ic-busca-item:hover,.ic-busca-item.ativo{background:var(--creme)}
.ic-busca-item[aria-selected="true"]{box-shadow:inset 0 0 0 1px var(--dourado)}
.ic-busca-nada{padding:10px;font-size:var(--t-mini);color:var(--suave)}
/* A faixa 421-448px ficava DESCOBERTA: em 430px a logomarca e o papel ainda
   apareciam e o portão mediu o subtítulo e o título cortados. Só some o que o
   bloco de 420 já esconde; o resto daquele bloco continua valendo só lá. */
@media(max-width:448px){
  .topo-logo{display:none}
  .topo-txt span{display:none}
}
@media(max-width:420px){
  /* -------------------------------------------------- Barra de cima, apertada
     Em 390px a barra tinha menu (40px) + logomarca (40px) + seletor de cliente
     (150px) + os vãos, e sobravam 113px para o NOME DA TELA: "Configuração"
     saía "Configur..." e o papel abaixo dele saía "Gestor de t...". Sai o
     papel, que e a mesma frase em toda tela desde o login e ja esta escrita no
     menu, e sai a logomarca, que a gaveta e a tela de entrada carregam. Sobram
     215px para o unico texto da barra que muda de tela para tela. */
  .topo-logo{display:none}
  .topo-txt span{display:none}
  /* Fluido, com piso: o 1.06rem fixo ainda cortava "Tráfego e anúncios" e
     "Fechamentos lançados" de 320 a 390px (o portão mediu 14 a 64px comidos).
     O letter-spacing zerado devolve ~4px e o gap menor do .topo mais 3. */
  .topo{gap:8px}
  .topo-txt strong{font-size:clamp(.74rem,3.9vw,1.06rem);letter-spacing:0}
  /* O seletor de cliente e o maior bloco fixo da barra: 118px ainda mostram
     ~12 caracteres e o nome completo vive no dropdown; os 32px liberados sao
     o que faltava para "Fechamentos lançados" caber sem corte. */
  .topo-cliente{max-width:106px}
  .integ-lista,.integ-grupo-auto .integ-lista{margin-left:0}
  .integ-item{align-items:flex-start}
  .integ-item>.tag,.integ-item>.btn{margin-top:2px}
  .integ-conta{flex-wrap:wrap}.integ-conta .inp{width:100%;flex:1 1 100%}.integ-conta .ic-busca{flex:1 1 100%}
}

/* Carteira do gestor e cards de cliente */
.cart-grid{display:grid;grid-template-columns:1fr;gap:10px}
.cli-card{background:var(--branco);border:1px solid var(--linha);border-radius:13px;padding:13px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 0 rgba(12,42,33,.025)}
.cli-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cli-nome{font-family:var(--f-display);font-weight:700;font-size:.98rem}
.cli-seg{font-size: var(--t-micro);color:var(--tinta2);margin-top:1px}
.cli-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linha-s);border:1px solid var(--linha-s);border-radius:9px;overflow:hidden}
.cli-st{background:#faf7ee;padding:6px 8px;text-align:center}
.cli-st b{display:block;font-family:var(--f-display);font-size:1.05rem;color:var(--verde);font-variant-numeric:tabular-nums}
.cli-st span{font-size: var(--t-micro);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--tinta2)}
.cli-stats--trio{grid-template-columns:repeat(3,1fr)}
.cli-stats--duo{grid-template-columns:repeat(2,1fr)}
.cli-ads{font-size: var(--t-mini);color:var(--tinta2);background:#faf7ee;border:1px solid var(--linha-s);border-radius:8px;padding:7px 10px}
.cli-ads b{font-family:var(--f-mono);color:var(--dourado-tinta)}
.cli-ads span{color:var(--suave)}
.pj-faixa{font-style:normal;font-weight:400;color:var(--suave);font-size: var(--t-micro)}
/* Faixa de KPIs: geral + comparativo. Empilha no mobile, lado a lado no
   desktop (elimina duas faixas cheias gastando rolagem). */
.faixa-kpis{display:flex;flex-direction:column;gap:2px}
.faixa-a,.faixa-b{min-width:0}
.faixa-kpis .sec-tit{margin-top:0}
/* Leituras do periodo (frases geradas cruzando os dados captados) */
.leituras{padding:6px 14px}
.leitura{position:relative;padding:8px 0 8px 16px;border-bottom:1px solid var(--linha-s);font-size:.84rem;line-height:1.45}
.leitura:last-child{border-bottom:none}
.leitura::before{content:'';position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:2px;background:var(--dourado)}
.cli-acoes{display:flex;gap:8px}
.cli-acoes .btn{flex:1}
.cli-barra{display:flex;gap:8px;margin-bottom:10px}
.cli-barra .inp{flex:1;min-width:0}
.cli-barra .btn{flex:0 0 auto;white-space:nowrap}

/* ------------------------------------------------- Barra de ferramentas
   Padrao UNICO de barra acima de uma lista: busca/filtros a esquerda, acoes a
   direita, dentro de uma moldura de papel. Antes cada tela montava a sua com
   um flex solto, e o resultado era uma fileira de controles de alturas
   diferentes flutuando sobre o fundo, sem comeco nem fim visiveis. */
/* align-items:flex-end e nao center: os controles da barra tem alturas
   diferentes (campo com rotulo em cima, botao sozinho, fileira de chips) e,
   centrados, cada um flutuava numa altura, com os rotulos em linhas
   diferentes. Alinhados pela base, todos pousam na mesma linha. */
.barra-fer{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  background:var(--branco);border:1px solid var(--linha);border-radius:12px;
  padding:9px 10px;margin-bottom:12px;box-shadow:0 1px 0 rgba(12,42,33,.025)}
.barra-fer-b{position:relative;flex:1 1 210px;min-width:0;display:flex;align-items:center}
/* Lupa desenhada, nao glifo: o caractere de lupa do Unicode sai minusculo e
   com traco fino demais em quase toda fonte de sistema.
   LUPA DUPLICADA (30/08/2026, relato do dono na tela Websites): o span ainda
   trazia o glifo &#9906;, que em fontes que o desenham aparecia ao lado do SVG
   de fundo (duas lupas). font-size:0 colapsa o glifo sem mexer no fundo (o
   tamanho do span e fixo em 15x15). */
.barra-fer-lupa{position:absolute;left:10px;width:15px;height:15px;pointer-events:none;font-size:0;
  background:no-repeat center/15px 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636d68' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='20.5' y2='20.5'/%3E%3C/svg%3E")}
/* -webkit-appearance:none tira a lupa NATIVA que o Safari/iOS desenha dentro do
   input[type=search] — senao ela soma com a nossa e vira lupa dupla no celular. */
.barra-fer-inp{-webkit-appearance:none;appearance:none;width:100%;min-height:44px;padding:8px 11px 8px 33px;border:1px solid var(--linha);border-radius:9px;
  /* 16px evita o zoom automatico do iOS ao focar o campo. */
  font-size:16px;font-family:inherit;color:var(--tinta);background:var(--branco)}
.barra-fer-inp:focus{outline:none;border-color:var(--selo);box-shadow:0 0 0 3px rgba(29,92,71,.13)}
.barra-fer-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.barra-fer-a .btn{margin-top:0;white-space:nowrap}
/* Grupo de campos rotulados dentro da barra (Situacao, Cliente, Periodo...). */
.barra-fer-c{display:flex;flex-direction:column;gap:3px;min-width:0;flex:0 1 190px}
.barra-fer-c>label{font-family:var(--f-mono);font-size: var(--t-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--suave)}
.barra-fer-c>select,.barra-fer-c>input{width:100%;min-height:40px;padding:7px 10px;border:1px solid var(--linha);border-radius:9px;font-size:16px;font-family:inherit;color:var(--tinta);background:var(--branco)}
.barra-fer-c>select:focus,.barra-fer-c>input:focus{outline:none;border-color:var(--selo);box-shadow:0 0 0 3px rgba(29,92,71,.13)}
/* Divisor entre o bloco de busca e o de filtros: fio, nao espaco. */
.barra-fer-fio{width:1px;align-self:stretch;background:var(--linha-s);flex:0 0 auto}

/* Aviso de contexto no topo de uma tela (onde voce esta, o que muda aqui). */
.aviso-tela{background:rgba(29,92,71,.055);border-left:3px solid var(--selo);border-radius:0 9px 9px 0;
  padding:10px 13px;font-size:.85rem;color:var(--tinta2);margin-bottom:12px}

/* ------------------------------------------------------- Lista de clientes
   Carteira e cadastro na MESMA linha (18/08/2026). Cartao com tres numeros
   empilhados ocupava a tela inteira para seis clientes e obrigava a comparar
   de cabeca; em tabela a coluna faz a comparacao sozinha. */
.tab-clientes .cli-cel{min-width:0}
.cli-cel-n{display:block;font-family:var(--f-display);font-weight:700;font-size:.95rem;overflow-wrap:anywhere}
.cli-cel-s{display:block;font-size: var(--t-micro);color:var(--suave);margin-top:1px;overflow-wrap:anywhere}
.cli-dif{font-weight:700;color:var(--dourado-tinta)}
.cli-vaz{color:var(--suave);font-size: var(--t-mini);font-family:var(--f-mono)}
/* Nome do cliente como acao: tipografia de titulo com COR de link. Sem a cor
   ninguem descobre que o nome abre o painel, e a linha perde a acao principal
   para dois botoes secundarios. */
.cli-nome-acao{background:none;border:0;padding:0;margin:0;color:var(--selo);font:inherit;text-align:left;cursor:pointer}
.cli-nome-acao:hover{color:var(--verde);text-decoration:underline;text-underline-offset:3px}
.cli-nome-acao:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:4px}
/* Formulario de novo cliente: secoes tituladas em grade responsiva (1 coluna
   no celular, 2 a partir de 760px), labels em cima, botao principal a direita
   no desktop e full-width no mobile. */
.nc-grade{display:grid;grid-template-columns:1fr;gap:4px 20px}
.nc-sec{min-width:0}
.nc-tit{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size: var(--t-micro);font-weight:700;text-transform:uppercase;letter-spacing:.085em;color:var(--tinta2);margin:0 0 8px}
.nc-tit::after{content:'';flex:1;height:1px;background:var(--linha)}
.nc-local{display:flex;gap:8px}
/* min-width:0 no irmao da UF: sem ele a cidade nao encolhe e estoura a grade. */
.nc-local .nc-cidade{flex:1;min-width:0}
.nc-local .nc-uf{width:96px;flex:0 0 auto}
.nc-acoes{display:flex}
.nc-acoes .btn{width:100%}
@media(min-width:760px){
  .nc-grade{grid-template-columns:1fr 1fr}
  .nc-acoes{justify-content:flex-end}
  .nc-acoes .btn{width:auto;padding-left:26px;padding-right:26px}
}
/* Ferramentas do cliente (cadastro): um cartao por ferramenta, com interruptor
   estilizado e o icone "?" que abre o modal do passo a passo. Prefixo ncf-
   para nao colidir com as classes fer-* do modulo ferramentas.css. */
.nc-fer{margin-top:6px}
.ncf-grid{display:grid;grid-template-columns:1fr;gap:10px}
.ncf-card{border:1px solid var(--linha);border-radius:11px;padding:11px 12px;background:var(--branco);min-width:0}
.ncf-cab{display:flex;align-items:flex-start;gap:9px}
.ncf-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ncf-id b{font-size:.88rem;font-weight:700}
.ncf-id span{font-size: var(--t-mini);color:var(--tinta2);line-height:1.35}
.ncf-ajuda{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1.4px solid var(--dourado-d);background:transparent;color:var(--dourado-tinta);font-family:var(--f-mono);font-weight:700;font-size:.82rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ncf-ajuda:hover{background:rgba(201,169,110,.16)}
/* Interruptor: checkbox real invisivel por cima do trilho estilizado. */
/* Area de toque de 44px SEM engordar o desenho (18/08/2026): o interruptor
   tem 22px de altura visual, que e o certo para o olho e pequeno demais para
   o dedo. O padding vertical cresce a area sensivel e a margem negativa
   devolve o espaco ao layout, entao nada se mexe na tela. */
/* Area de toque de 44px SEM engordar o desenho (18/08/2026): o interruptor
   tem 22px de altura visual, que e o certo para o olho e pequeno demais para
   o dedo. O padding vertical cresce a area sensivel e a margem negativa
   devolve o espaco ao layout, entao nada se mexe na tela. So na VERTICAL:
   folga lateral empurrava a fileira "Robo Ted" 4px alem do cartao, porque
   ela e flex-wrap:nowrap e nao tem para onde ceder. */
.ncf-liga{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;cursor:pointer;
  padding:11px 0;margin:-9px 0;touch-action:manipulation}
.ncf-liga input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ncf-trilho{display:block;width:40px;height:22px;border-radius:999px;background:rgba(12,42,33,.2);position:relative;transition:background .15s ease}
.ncf-trilho::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--branco);box-shadow:0 1px 3px rgba(12,42,33,.3);transition:transform .15s ease}
.ncf-liga input:checked+.ncf-trilho{background:var(--selo)}
.ncf-liga input:checked+.ncf-trilho::after{transform:translateX(18px)}
.ncf-liga input:focus-visible+.ncf-trilho{outline:2px solid var(--dourado);outline-offset:2px}
.ncf-liga input[disabled]+.ncf-trilho{opacity:.5}
.ncf-nota{font-size: var(--t-mini);color:var(--tinta2);line-height:1.4;margin-top:8px}
.ncf-indisp{font-size: var(--t-mini);color:var(--alerta);background:rgba(138,107,58,.08);border:1px solid rgba(138,107,58,.3);border-radius:8px;padding:7px 9px;margin-top:8px;line-height:1.4}
/* Campos so aparecem com o interruptor ligado; notas e avisos ficam sempre. */
.ncf-corpo{display:none;margin-top:9px;border-top:1px solid var(--linha-s);padding-top:9px}
.ncf-card.on .ncf-corpo{display:block}
.ncf-corpo .grupo{margin-bottom:8px}
.ncf-vis{display:flex;align-items:center;gap:8px;margin-top:2px}
@media(min-width:760px){.ncf-grid{grid-template-columns:1fr 1fr}}

/* Configurações do cliente: secoes NOMEADAS em grade explicita. A leitura
   segue a ordem das secoes (2 colunas so a partir de 1000px); multi-columns
   embaralhava por coluna e o details do GTM refluia a pagina ao abrir. */
.cfg-ir{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cfg-ir-t{flex:0 0 auto;font-family:var(--f-mono);font-size: var(--t-micro);font-weight:700;text-transform:uppercase;letter-spacing:.085em;color:var(--tinta2)}
.cfg-ir .rolagem-filtros{flex:1;min-width:0}
.cfg-ir .chip-row{margin-bottom:0}
/* Banda de duas colunas EXPLICITAS (18/08/2026).
   A grade automatica anterior alinhava as secoes em linhas, e cada linha
   ficava com a altura da secao mais alta: sobrava meia tela em branco ao lado
   de toda secao curta. Aqui cada coluna corre sozinha e as secoes foram
   pareadas por tamanho no proprio JS (ver a funcao `banda` em rConfig). */
.cfg-banda{display:grid;grid-template-columns:1fr;gap:0 22px;align-items:start}
.cfg-col{min-width:0;display:flex;flex-direction:column}
.cfg-grid{display:grid;grid-template-columns:1fr;gap:6px 22px;align-items:start}
.cfg-sec{min-width:0;margin-bottom:12px;
  /* Ancoras dos chips "Ir para:": param abaixo do topo fixo (com safe-area). */
  scroll-margin-top:calc(var(--topo-h) + env(safe-area-inset-top,0px) + 12px)}
.cfg-sec .nc-tit{margin-bottom:10px}
/* Seção recolhível: no desktop o botão é só o título, sem cara de botão nem
   seta, e o corpo está sempre aberto. Quem recolhe é a regra de celular, mais
   abaixo. Assim o mesmo HTML serve os dois, sem o JS ter de desmontar nada ao
   redimensionar a janela. */
.cfg-abrir{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  background:none;border:none;padding:0;margin:0;cursor:default;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;
}
.cfg-seta{display:none}

/* --------------------------------------------- Configuração recolhida (celular)
   Dez seções empilhadas davam 5.357px: seis telas e meia de rolagem para achar
   um campo. A fita "Ir para:" já era o índice da tela; aqui o índice vira
   porta, e o título de cada seção passa a abrir a própria seção. Só a primeira
   nasce aberta. No desktop nada disso vale: lá as seções vêm em duas colunas
   e cabem. */
@media(max-width:759px){
  .cfg-recolhivel{border:1px solid var(--linha);border-radius:12px;background:var(--branco);
    margin-bottom:10px;padding:0 13px}
  .cfg-recolhivel .nc-tit{margin:0}
  .cfg-recolhivel .nc-tit::after{display:none}
  .cfg-recolhivel .cfg-abrir{
    flex:1;width:100%;min-height:52px;justify-content:space-between;
    cursor:pointer;touch-action:manipulation;
  }
  .cfg-seta{
    display:block;flex:0 0 auto;width:9px;height:9px;
    border-right:1.8px solid var(--dourado-d);border-bottom:1.8px solid var(--dourado-d);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s ease;
  }
  .cfg-recolhivel.aberta .cfg-seta{transform:rotate(-135deg) translate(-3px,-3px)}
  .cfg-recolhivel .cfg-corpo{display:none}
  .cfg-recolhivel.aberta .cfg-corpo{display:block;padding-bottom:13px}
  /* A seção recolhível JÁ é o cartão. O bloco de dentro (.gest-config, que no
     desktop é quem emoldura) viraria moldura dentro de moldura: dois cantos
     arredondados a 13px um do outro. Quando a seção tem MAIS de um bloco, o
     fio de cima separa um do outro sem devolver a moldura. */
  .cfg-recolhivel.aberta .cfg-corpo>.card,
  .cfg-recolhivel.aberta .cfg-corpo>.gest-config{
    border:none;border-radius:0;background:none;box-shadow:none;padding:0;margin-bottom:0}
  .cfg-recolhivel.aberta .cfg-corpo>.gest-config+.gest-config,
  .cfg-recolhivel.aberta .cfg-corpo>.card+.card{
    border-top:1px solid var(--linha);padding-top:14px;margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.cfg-seta{transition:none}}
.cfg-tres{display:grid;grid-template-columns:1fr;gap:0 14px;align-items:start}
/* Zona de risco: visualmente separada com o vermelho suave da casa. */
.cfg-risco{border-color:rgba(161,48,36,.4);background:linear-gradient(180deg,rgba(161,48,36,.03),var(--branco))}
.cfg-risco .ttl{color:var(--erro)}
@media(min-width:1000px){
  .cfg-banda,.cfg-grid{grid-template-columns:1fr 1fr}
  .cfg-sec--cheia{grid-column:1 / -1}
  .cfg-tres{grid-template-columns:1fr 1fr 1fr}
}

/* Trava da rolagem do fundo com modal aberto (24/08/2026).
   Rolar dentro do modal ate o fim passava a rolagem para a pagina atras
   (scroll chaining): no celular a pessoa perde o botao de vista, acha que o app
   travou e toca no que aparece por baixo do veu. `overflow:hidden` no body
   segura a pagina e `overscroll-behavior:none` corta o encadeamento; a classe e
   posta e tirada por assets/modal-scroll.js, que olha o DOM em vez de depender
   de cada caminho de fechamento se lembrar de avisar. */
body.com-modal{overflow:hidden;overscroll-behavior:none}

/* Modal de ajuda: veu + cartao no padrao do app, pequeno e reutilizavel. */
.modal-ajuda{position:fixed;inset:0;z-index:200;background:rgba(12,42,33,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:18px;overscroll-behavior:contain}
.modal-cartao{background:var(--branco);border:1px solid var(--linha);border-top:4px solid var(--dourado);border-radius:14px;padding:16px;width:min(100%,480px);max-height:min(84vh,640px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 22px 55px rgba(0,20,15,.35);outline:none}
.modal-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.modal-topo h2{font-family:var(--f-display);font-size:1.02rem;color:var(--verde)}
.modal-x{flex:0 0 auto;width:32px;height:32px;border:none;background:transparent;color:var(--tinta2);font-size:1.3rem;cursor:pointer;border-radius:7px;line-height:1}
.modal-corpo{font-size:.88rem;line-height:1.5}
.modal-corpo p{margin:0 0 8px}
.modal-corpo ol{margin:0 0 8px;padding-left:20px}
.modal-corpo li{margin-bottom:5px}
.modal-corpo b{font-family:var(--f-mono);font-size:.82rem}
.modal-cartao .modal-fechar{margin-top:4px}
/* Modal de EDIÇÃO de lead (01/09/2026): um pouco mais largo que o modal padrão
   (cabe os chips de origem/tratamento), e o .card interno do formEdicao perde a
   moldura para não virar caixa-dentro-de-caixa; o h2 do form some (o topo do
   modal já diz "Editar lead"). */
.modal-cartao--ed{width:min(100%,560px)}
.modal-cartao--ed .ed-form{border:0;padding:0;margin:0;background:transparent;box-shadow:none}
.modal-cartao--ed .ed-form h2{display:none}
/* Observação: cresce até um teto modesto (o JS ajusta a altura ao conteúdo);
   passou disso, rola dentro da caixa em vez de esticar o modal. */
.modal-cartao--ed .ed-obs{min-height:42px;max-height:150px;overflow-y:auto;line-height:1.45}
/* Perguntas (o que era confirm/prompt nativo): mesmo cartao, acoes no pe. */
.modal-acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.modal-pergunta .modal-corpo .lbl{margin:10px 0 5px}
@media(max-width:599px){.modal-acoes .btn{flex:1 1 auto}}
/* Saude do reporte (carimbo pequeno) */
.rep{flex:0 0 auto;font-family:var(--f-mono);font-size: var(--t-micro);font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1.3px solid currentColor;border-radius:5px;padding:3px 7px;line-height:1.3}
.rep-ok{color:var(--selo);background:rgba(29,92,71,.07)}
.rep-alerta{color:var(--alerta);background:rgba(138,107,58,.08)}
.rep-ruim{color:var(--erro);background:rgba(161,48,36,.06)}
.kpi.alerta .n{color:var(--erro)}
/* Voltar para a carteira (drill-down do gestor) */
/* Voltar VISIVEL (pedido 2026-07-24): vira um botao de verdade, com borda e
   area de toque generosa, sem virar um segundo botao: e o mesmo controle. */
.volta{display:inline-flex;align-items:center;gap:6px;min-height:44px;background:var(--branco);border:1px solid var(--linha);border-radius:9px;color:var(--verde);font-family:var(--f-mono);font-size: var(--t-mini);font-weight:700;letter-spacing:.04em;cursor:pointer;padding:8px 14px;margin-bottom:8px;text-transform:uppercase;touch-action:manipulation;box-shadow:0 1px 4px rgba(12,42,33,.06)}
.volta:active{transform:translateY(1px)}
.volta:hover{color:var(--verde)}

/* Filtros da lista de leads */
.filtros{margin-bottom:10px}
/* O chip de FILTRO pode ser mais baixo: ele vem em fileira densa e larga, e o
   alvo horizontal compensa. 38px ainda e tocavel; 42px em todos empurraria a
   barra de filtros para duas linhas em telas estreitas. */
.chip-peq{padding:6px 11px;min-height:38px;font-size: var(--t-mini)}
.rolagem-filtros{position:relative;min-width:0}
.rolagem-filtros::after{content:'';position:absolute;z-index:2;top:0;right:0;bottom:4px;width:38px;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(243,239,229,0),var(--bg) 86%);transition:opacity .16s ease}
.rolagem-filtros.tem-overflow:not(.no-fim)::after{opacity:1}
.chip-row--rolagem{flex-wrap:nowrap;overflow-x:auto;padding:1px 26px 5px 1px;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chip-row--rolagem .chip{scroll-snap-align:start;white-space:nowrap}
.chip-row--rolagem::-webkit-scrollbar{display:none}
.filtros-linha{display:flex;gap:8px;margin-top:6px}
.filtros-linha .inp{flex:1;min-width:0}
/* 16px contra o zoom do iOS; o "peq" vem do padding menor, nao da fonte. */
/* min-height de 42px: com 6px de padding o campo fechava em 35px de altura,
   abaixo do alvo confortavel para o dedo. A fonte segue em 16px, que e o que
   impede o iOS de aproximar a tela ao focar. */
.inp-peq{padding:6px 10px;font-size:16px;min-height:42px}
/* Campos rotulados: o placeholder longo nao cabia em input estreito. */
.linha-campos{display:flex;gap:8px;flex-wrap:wrap}
.campo{flex:1;min-width:92px;display:flex;flex-direction:column;gap:3px}
/* ROTULO DE CAMPO NAO ESCAPA DA COLUNA (05/09/2026). Achado assim que a tela
   Fechamento do dia entrou na prova de QA: em 390px a segunda linha tem TRES
   campos (Agendamentos, Comparecimentos, Fechamentos), cada um fica com ~110px
   e "COMPARECIMENTOS" e uma palavra so de 15 letras, em caixa alta e com
   espacamento entre letras. Sem poder quebrar, ela vazava para fora da caixa.
   `hyphens` quebra na silaba (a pagina declara lang="pt-BR"); `overflow-wrap`
   e a rede de seguranca para quem nao hifeniza, e so age quando nao cabe. */
.campo-l{font-size: var(--t-micro);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.03em;color:var(--tinta2);hyphens:auto;overflow-wrap:break-word;min-width:0}
.campo .inp{width:100%}
.filtros-total{margin-top:6px;font-family:var(--f-mono);font-size: var(--t-micro)}
.it-acoes{margin-top:8px;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ed-form h2{margin-bottom:8px}
/* Exibicao dos leads: grade (cards) ou lista (linhas compactas) + paginacao */
.vis-toggle{display:flex;gap:2px;background:var(--branco);border:1px solid var(--linha);border-radius:9px;padding:2px;flex:0 0 auto}
.vis-toggle button{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;background:none;border:none;border-radius:7px;cursor:pointer;color:var(--tinta2);touch-action:manipulation}
.vis-toggle button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vis-toggle button.on{background:var(--verde);color:var(--creme)}
.leads-grid{display:grid;grid-template-columns:1fr;gap:9px}
.leads-lista{display:flex;flex-direction:column;gap:6px}
.lead-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--branco);border:1px solid var(--linha);border-radius:10px;padding:8px 12px}
.lr-data{font-family:var(--f-mono);font-size: var(--t-micro);color:var(--tinta2);flex:0 0 auto}
.lr-nome{flex:1 1 160px;min-width:0;font-size:.86rem;font-weight:600;overflow-wrap:anywhere}
.lr-nome em{display:block;font-style:normal;font-weight:400;font-size: var(--t-mini);color:var(--tinta2)}
.lr-acoes{display:flex;gap:6px;flex:0 0 auto;margin-left:auto}
/* --------------------------------------------------- Modo LISTA no desktop
   Com flex, cada linha se organiza sozinha: como a coluna de acoes muda de
   largura conforme a situacao do lead (Agendar+Editar, Converter+Editar, so
   Editar), o carimbo de situacao caia num x diferente em cada linha. A lista
   deixava de ser lista e virava tres cartoes largos empilhados, com 450px de
   vazio no meio. Em grade as quatro colunas ficam no MESMO lugar em toda
   linha, que e a unica razao de existir um modo lista ao lado do modo grade.
   `minmax(0,1fr)` no nome: 1fr sozinho nao encolhe abaixo do conteudo e um
   contato longo empurraria a situacao para fora. */
@media(min-width:760px){
  /* A ultima faixa e FIXA, e nao `auto`. Cada linha e uma grade propria: com
     `auto` a faixa de acoes media o conteudo dela, que muda de linha para
     linha (Agendar+Editar, Converter+Editar, so Editar), e a faixa `1fr` do
     meio absorvia a diferenca. Resultado: o carimbo de situacao caia num x
     diferente em cada linha, que e o defeito que a grade veio consertar. Com
     todas as faixas fixas menos uma, as quatro dao no mesmo lugar em todas as
     linhas, porque todas as linhas tem a mesma largura. 196px e a linha mais
     larga (dois botoes pequenos com a folga entre eles). */
  .lead-row{display:grid;grid-template-columns:92px minmax(0,1fr) 132px 196px;align-items:center;gap:14px;padding:9px 14px}
  .lead-row .tag{justify-self:start}
  .lr-acoes{margin-left:0;justify-content:flex-end}
  .lr-nome em{display:inline;margin-left:8px}
}
.pagbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.pagbar button:disabled{opacity:.45;cursor:default}
.leads-grid .item,.leads-lista .lead-row{margin-bottom:0}
@media(min-width:700px){.leads-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.leads-grid{grid-template-columns:repeat(3,1fr)}}
.leads-grid .ed-form,.leads-lista .ed-form{grid-column:1 / -1;width:100%}

/* Perfil */
.perfil-card{text-align:center}
.perfil-logo{height:72px;width:auto;display:block;margin:6px auto 10px}
.perfil-dados{margin:14px 0 4px;text-align:left}
.perfil-dados .linha-tab strong{font-family:inherit}
.btn-sair{background:#f7ebe8;color:var(--erro)}

/* Ted (config) */
.ted-cod{background:#f5f0e3;border:1px dashed var(--fio-forte);border-radius:9px;padding:9px 11px;font-size:.8rem}
.ted-cod b{font-family:var(--f-mono);letter-spacing:.03em}
.gest-config{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:12px;margin-bottom:12px;break-inside:avoid;box-shadow:0 1px 0 rgba(12,42,33,.025)}
.gest-config textarea.inp{resize:vertical}
.gest-config .ttl{font-family:var(--f-display);font-weight:700;font-size:.88rem;margin-bottom:8px}
.pill{display:inline-flex;align-items:center;gap:6px;background:#f5f0e3;border:1px solid var(--linha);border-radius:999px;padding:5px 11px;font-size:.8rem;margin:0 6px 6px 0}
.pill.off{opacity:.5}
/* Alvo de toque de 28px (antes 14px: dificil de acertar no celular) */
.mini{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-12px -14px -12px -8px;background:none;border:none;color:var(--erro);cursor:pointer;font-size:1rem;line-height:1;touch-action:manipulation}

/* Feedback global não bloqueante. O desenho lembra uma pequena ficha de
   protocolo e evita modais nativos que interrompiam tarefas rápidas.
   (O --nav-h da bottom-nav removida saiu daqui: o toast flutuava 76px acima
   do fim da tela no celular.) */
.aviso-app{position:fixed;z-index:240;/* acima dos modais (200): toast disparado com modal aberto ficava invisivel atras do veu */left:50%;bottom:calc(var(--sb) + 14px);width:min(calc(100% - 24px),440px);display:flex;align-items:flex-start;gap:10px;padding:11px 12px;background:var(--branco);color:var(--tinta);border:1px solid var(--fio-forte);border-radius:11px;box-shadow:0 14px 38px rgba(12,42,33,.2);opacity:0;transform:translate(-50%,10px);transition:opacity .18s ease,transform .18s ease}
.aviso-app.visivel{opacity:1;transform:translate(-50%,0)}
.aviso-app[hidden]{display:none}
/* Faixa de rede, no TOPO. Duas tentativas erradas antes desta, e as duas
   foram MEDIDAS no navegador em 02/09/2026, nao deduzidas:

   1. `sticky` como ultimo filho do body: gruda no fim da area de rolagem, e
      nascia em top:844px numa viewport de 844px, ou seja, fora da tela. A
      pessoa perderia a conexao e nao veria nada, pior do que o toast antigo.
   2. `sticky` como primeiro filho do body: aparecia, mas o cabecalho e
      `position: fixed` e nao desce por conteudo em fluxo. A faixa cobria 53
      dos 56px do cabecalho, levando junto o botao do menu: sem rede, a pessoa
      ficava presa na tela em que estivesse.

   Por isso ela e `fixed` e o resto do topo desce por `--rede-h`, que e a
   altura MEDIDA dela (o texto quebra em duas linhas em tela estreita, entao
   numero fixo aqui erraria). Mesmo idioma do `--topo-h`, que ja governa
   cabecalho, gaveta e conteudo. */
.faixa-rede{position:fixed;top:0;left:0;right:0;z-index:260;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;background:var(--erro);color:#fff;font-size:13px;font-weight:600;line-height:1.35;text-align:center}
.faixa-rede[hidden]{display:none}
.faixa-rede-texto{max-width:640px}

.aviso-marca{width:8px;height:8px;flex:0 0 auto;margin-top:6px;border-radius:2px;background:var(--dourado-d)}
.aviso-app--ok .aviso-marca{background:var(--ok)}
.aviso-app--erro .aviso-marca{background:var(--erro)}
.aviso-texto{flex:1;min-width:0;font-size:.83rem;line-height:1.4}
.aviso-fechar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;margin:-6px -7px -6px 0;border:0;background:transparent;color:var(--tinta2);font-size:1.25rem;cursor:pointer;border-radius:7px}

@media(max-width:599px){
  .painel-cab{display:block}
  .painel-identidade{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
  .acoes-cliente{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:9px}
  .acoes-cliente .btn{width:100%;padding-left:7px;padding-right:7px}
  .filtros-linha--leads{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .filtros-linha--leads #fDias{grid-column:1;grid-row:1}
  .filtros-linha--leads #fBusca{grid-column:1 / -1;grid-row:2}
  .filtros-linha--leads .vis-toggle{grid-column:2;grid-row:1}
}

@media(max-width:350px){
  .topo{gap:8px;padding-left:10px;padding-right:10px}
  .topo-cliente{max-width:94px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Momento unico de movimento: numeros do painel "carimbam" na entrada */
@media (prefers-reduced-motion:no-preference){
  .kpi .n{animation:carimbar .3s cubic-bezier(.2,.85,.3,1.15) backwards}
  .kpi:nth-child(2) .n{animation-delay:.06s}
  .kpi:nth-child(3) .n{animation-delay:.12s}
  .kpi:nth-child(4) .n{animation-delay:.18s}
  .kpi:nth-child(5) .n{animation-delay:.24s}
}
@keyframes carimbar{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:scale(1)}}

/* ---------------------------------------------------------------- Hover
   So em dispositivos com ponteiro (nao dispara em toque). */
@media(hover:hover){
  .btn{transition:background .15s ease,box-shadow .15s ease,transform .12s ease}
  .btn-primario:hover{background:var(--verde2)}
  .btn-dourado:hover{background:var(--dourado-d)}
  .btn-claro:hover{background:rgba(12,42,33,.1)}
  .item,.cli-card,.gest-config{transition:border-color .15s ease,box-shadow .15s ease}
  .item:hover,.cli-card:hover{border-color:var(--fio-forte);box-shadow:0 3px 12px rgba(12,42,33,.065)}
  .chip:hover:not(.on),.chip-status:hover:not(.on){border-color:var(--fio-forte)}
  .nav-btn:hover{color:var(--verde)}
  .mini:hover{opacity:.75}
}

/* ---------------------------------------------------------------- Tablet */
@media(min-width:760px){
  .conteudo{max-width:720px;padding-left:20px;padding-right:20px}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .kpis--trio{grid-template-columns:repeat(3,1fr)}
  /* Painel em 2 colunas ja no tablet. CSS multi-columns em vez de grid:
     preenche na vertical e elimina os vazios de alturas desiguais. */
  .colunas{columns:2;column-gap:14px}
  .colunas .bloco{break-inside:avoid;margin-bottom:14px}
  .colunas .sec-tit{margin-top:0}
  .cart-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
  /* KPI geral e comparativo lado a lado */
  .faixa-kpis{flex-direction:row;gap:16px;align-items:flex-start}
  .faixa-a,.faixa-b{flex:1}
  /* Config do gestor: as multi-columns antigas sairam (embaralhavam a ordem
     de leitura e o details do GTM refluia a pagina). Ver .cfg-grid. */
}

/* ---------------------------------------------------------------- Desktop
   Nav vira trilho lateral fixo; conteudo abre para ate ~1140px e o painel
   se organiza em 2 colunas (.colunas). */
@media(min-width:1000px){
  /* Era um trilho de 92px so com icone. Com a Central de Midia dentro do
     painel sao doze destinos em quatro grupos, e icone sem rotulo vira
     adivinhacao: a barra passa a mostrar o nome. */
  :root{--rail:264px}
  .aviso-app{left:calc(50% + var(--rail)/2);bottom:24px}
  /* A barra ocupa a esquerda; o body compensa e o conteudo CENTRALIZA no
     espaco restante (antes ficava ancorado a esquerda com vazio enorme). */
  body{padding-left:var(--rail)}
  /* Sempre visivel: sem transform, sem veu, sem botao de abrir. */
  .lateral{width:var(--rail);transform:none;box-shadow:none;padding:18px 12px 28px;
    background:linear-gradient(180deg,#fffdfa,#fbf7ee);border-right:1px solid var(--linha);
    /* Barra de rolagem discreta: com dezesseis destinos a barra pode passar da
       altura da janela, e a barra grossa do sistema come 15px do menu. */
    scrollbar-width:thin;scrollbar-color:rgba(12,42,33,.22) transparent}
  .lateral::-webkit-scrollbar{width:8px}
  .lateral::-webkit-scrollbar-thumb{background:rgba(12,42,33,.2);border-radius:4px;border:2px solid transparent;background-clip:content-box}
  .lateral::-webkit-scrollbar-track{background:transparent}
  .topo-menu,.gaveta-veu{display:none}
  /* Painel de clientes AO LADO da barra: o JS ancora left/top na altura do
     botao; aqui so se desfazem as ancoras de celular (right/bottom), senao o
     painel esticaria da barra ate a borda direita da janela. */
  .nav-lista{right:auto;bottom:auto;width:312px;border-radius:14px}
  .topo{left:0;padding-left:24px}
  .conteudo{margin:0 auto;max-width:1120px;padding:calc(var(--topo-h) + 28px) 44px 48px}
  .kpi{padding:16px 20px}
  .kpi .n{font-size:1.9rem}
  .kpis--trio .kpi .n{font-size:1.6rem}
  .card{padding:16px 18px;margin-bottom:12px}
  .item{padding:13px 14px;margin-bottom:9px}
  .linha-tab{padding:8px 0}
  .barra{padding:14px;gap:10px}
  .sec-tit{margin:18px 0 8px}
  .colunas{column-gap:22px}
  .colunas .bloco{margin-bottom:20px}
  .barra-l{grid-template-columns:160px 1fr 46px}
  /* As regras por ID que ficavam aqui (#listaLeads em grade de duas colunas)
     eram anteriores ao modo LISTA e venciam por especificidade: escolher
     "lista" trocava o desenho de cada linha mas o container continuava em
     grade, entao os dois modos saiam iguais no desktop. Quem manda agora e a
     classe que o JS troca, .leads-grid ou .leads-lista, cada uma com os seus
     pontos de quebra. */
  #listaLeads .vazio{grid-column:1/-1}
  /* Clientes e carteira: o cart-grid ja se ajusta por auto-fill */
  .conteudo[data-view="clientes"]>.card{max-width:660px}
  /* Formularios e perfil: coluna de leitura confortavel (centralizada) */
  .conteudo[data-view="registrar"],.conteudo[data-view="perfil"]{max-width:748px}
  /* Seletor de cliente do topo: carteira grande pede nome legivel */
  .topo-cliente{max-width:280px}
}

/* ---------------------------------------------------------------- Telas largas */
@media(min-width:1500px){
  .conteudo{max-width:1400px}
  .colunas{columns:3}
}

/* ---------------------------------------------------------- Financeiro
   O andar 2 do dinheiro: a AGENCIA cobrando a clinica dela. (O andar 1, a
   SeuSaude cobrando a agencia, vive na Central do Index e nao aparece aqui.)

   A tabela usa o padrao "tabela vira ficha no celular": abaixo de 760px cada
   linha empilha e o rotulo vem do atributo data-r. Rolagem horizontal em tela
   estreita esconde a coluna de valor, que e justo a que a pessoa abriu a tela
   para ver. */

.fin-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.fin-kpi{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:13px 14px;min-width:0}
.fin-kpi--alerta{border-color:rgba(161,48,36,.35);background:linear-gradient(180deg,rgba(161,48,36,.045),var(--branco))}
.fin-kpi-r{display:block;font-family:var(--f-mono);font-size: var(--t-micro);text-transform:uppercase;letter-spacing:.04em;color:var(--tinta2)}
.fin-kpi-v{display:block;font-family:var(--f-mono);font-size:1.32rem;font-weight:600;color:var(--verde);margin:3px 0 2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fin-kpi--alerta .fin-kpi-v{color:var(--erro)}
.fin-kpi-n{display:block;font-size: var(--t-mini);color:var(--suave);line-height:1.3}

.fin-ajuda{background:rgba(29,92,71,.055);border-left:3px solid var(--selo);border-radius:0 8px 8px 0;padding:11px 13px;font-size:.85rem;color:var(--tinta2);margin-bottom:16px}
.fin-sub{display:block;font-size: var(--t-mini);color:var(--suave);line-height:1.4;margin-top:5px}

.fin-form{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:15px;margin-bottom:18px}
.fin-form h3{font-family:var(--f-display);font-size:1rem;color:var(--verde);margin-bottom:11px}
.fin-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px;margin-bottom:11px}
/* minmax(0,...) e nao minmax(180px,...) no filho: 1fr nao encolhe abaixo do
   conteudo e um select de plano com nome longo estouraria a grade. */
.fin-grade>.campo{min-width:0}

.fin-itens{border:1px solid var(--linha);border-radius:10px;padding:11px 13px;margin-bottom:11px}
.fin-itens legend{font-family:var(--f-mono);font-size: var(--t-micro);text-transform:uppercase;letter-spacing:.03em;color:var(--tinta2);padding:0 5px}
.fin-item-cx{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--linha-s);cursor:pointer;font-size:.88rem}
.fin-item-cx:last-of-type{border-bottom:none}
/* So o recuo do topo e daqui: o rotulo tem duas linhas e a caixa alinha com
   a primeira. Tamanho e cor vem da regra global la de cima. */
.fin-item-cx input{margin-top:3px}
.fin-item-cx em{display:block;font-style:normal;font-family:var(--f-mono);font-size: var(--t-mini);color:var(--suave)}
.fin-soma{margin-top:9px;padding-top:9px;border-top:1px solid var(--linha);font-family:var(--f-mono);font-size:.82rem;color:var(--tinta2);text-align:right}

.fin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.fin-card{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:14px;min-width:0}
.fin-card h4{font-family:var(--f-display);font-size:1.02rem;color:var(--verde);overflow-wrap:anywhere}
.fin-card-v{font-family:var(--f-mono);font-size:1.2rem;font-weight:600;color:var(--tinta);margin:5px 0 9px;font-variant-numeric:tabular-nums}
.fin-card-v span{display:block;font-size: var(--t-micro);font-weight:400;color:var(--suave)}
.fin-card-itens{list-style:none;margin:0 0 8px;font-size:.83rem;color:var(--tinta2)}
.fin-card-itens li{padding:3px 0 3px 14px;position:relative;overflow-wrap:anywhere}
.fin-card-itens li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--dourado)}

.fin-extras,.fin-previa{list-style:none;margin-bottom:12px}
.fin-extras li,.fin-previa li{display:flex;align-items:center;justify-content:space-between;gap:11px;padding:9px 0;border-bottom:1px solid var(--linha-s);font-size:.88rem}
.fin-extras li span,.fin-previa li span{min-width:0;overflow-wrap:anywhere}
.fin-extras em{display:block;font-style:normal;font-family:var(--f-mono);font-size: var(--t-mini);color:var(--suave)}
.fin-previa strong{font-family:var(--f-mono);font-variant-numeric:tabular-nums;flex:0 0 auto}
.fin-previa-total{border-bottom:none;border-top:2px solid var(--linha);margin-top:3px;font-weight:700;color:var(--verde)}
.fin-contrato-atual{background:rgba(29,92,71,.06);border-radius:9px;padding:11px 13px;font-size:.9rem;margin-bottom:12px}

/* Tabela. `tab-rolagem` da a rolagem ao PROPRIO bloco, nunca ao body: pagina
   que rola de lado no celular parece quebrada mesmo quando o dado esta certo. */
.tab-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid var(--linha);background:var(--branco)}
.tab{width:100%;border-collapse:collapse;font-size:.87rem}
.tab th{text-align:left;font-family:var(--f-mono);font-size: var(--t-micro);text-transform:uppercase;letter-spacing:.04em;color:var(--tinta2);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--linha);white-space:nowrap}
.tab td{padding:11px 12px;border-bottom:1px solid var(--linha-s);vertical-align:middle}
.tab tbody tr:last-child td{border-bottom:none}
.tab .num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tab .acoes-cel{white-space:nowrap;text-align:right}
.tab .acoes-cel .btn-peq{margin-left:6px}
.linha-inativa{opacity:.55}

.sit{display:inline-block;padding:3px 9px;border-radius:999px;font-size: var(--t-micro);font-weight:600;white-space:nowrap}
.sit--aberta{background:rgba(12,42,33,.07);color:var(--tinta2)}
.sit--paga{background:rgba(29,92,71,.13);color:var(--ok)}
.sit--vencida{background:rgba(161,48,36,.13);color:var(--erro)}
.sit--cancelada{background:rgba(12,42,33,.06);color:var(--suave);text-decoration:line-through}

@media(max-width:759px){
  /* Cada linha vira uma ficha, com o rotulo da coluna vindo do data-r. Sem
     isto a tabela rola de lado e a coluna de valor, que e a razao da tela,
     fica fora de vista. */
  .tab-rolagem{overflow-x:visible;border:none;background:none}
  .tab,.tab tbody,.tab tr,.tab td{display:block;width:100%}
  .tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .tab tr{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:5px 13px;margin-bottom:10px}
  .tab td{display:flex;justify-content:space-between;align-items:baseline;gap:13px;padding:7px 0;border-bottom:1px solid var(--linha-s);text-align:left}
  .tab td:last-child{border-bottom:none}
  .tab td::before{content:attr(data-r);font-family:var(--f-mono);font-size: var(--t-micro);text-transform:uppercase;letter-spacing:.04em;color:var(--suave);flex:0 0 auto}
  .tab td[data-r=""]::before,.tab td:not([data-r])::before{content:none}
  .tab .num,.tab .acoes-cel{text-align:right}
  .tab .acoes-cel{justify-content:flex-end}
  .tab .acoes-cel .btn-peq{margin:2px 0 2px 6px}
  .fin-kpis{grid-template-columns:1fr 1fr}
  /* Na ficha do celular o nome do cliente e o TITULO do cartao, e nao mais um
     par rotulo/valor: fica em cima, sozinho, com um fio separando os numeros. */
  .tab-clientes td.cli-cel{flex-direction:column;align-items:flex-start;gap:0;
    padding:9px 0 10px;border-bottom:1px solid var(--linha)}
  .tab-clientes td.cli-cel::before{content:none}

  /* --------------------------------------------- Ficha do cliente, compacta
     A ficha tinha SETE fileiras empilhadas (nome, quatro numeros, reporte e
     acoes) e media ~340px. Com 17 clientes a carteira dava 6.212px: seis telas
     e meia de rolagem para ler o que no desktop cabe em uma. Os quatro numeros
     passam a dividir a MESMA fileira, com o rotulo em cima do valor, que e a
     forma que a faixa de KPI ja usa no resto do app. A ficha cai para ~150px.
     Abaixo de 380px sao 2x2: com quatro colunas o rotulo "CONVERTIDOS" quebra
     em duas linhas e os valores param de alinhar entre si. */
  .tab-clientes tr{display:flex;flex-wrap:wrap;padding:5px 13px 10px}
  .tab-clientes td{border-bottom:none}
  .tab-clientes td.cli-cel{flex:1 1 100%}
  /* A base PRECISA ser maior que zero. Com `flex-basis:0` o navegador cabe os
     quatro numeros na MESMA linha do nome (base zero nunca estoura a linha, e
     entao nunca quebra): eles ficavam com 0px de largura e o conteudo vazava
     68px para fora da tela. A base real forca a quebra e so depois eles
     crescem para dividir a linha. */
  .tab-clientes td.num{flex:1 1 calc(50% - 6px);min-width:0;flex-direction:column;
    align-items:flex-start;justify-content:flex-start;gap:1px;padding:9px 0 3px;text-align:left}
  /* Rotulo DEPOIS do valor (`order:2`), como na faixa de KPI do resto do app.
     Nao e so consistencia: com o rotulo em cima, "CONVERTIDOS" quebrando em
     duas linhas empurrava o numero dele para baixo e a fileira de numeros
     perdia o alinhamento. Embaixo, o rotulo pode quebrar a vontade que os
     quatro numeros continuam na mesma altura. */
  .tab-clientes td.num::before{order:2;line-height:1.25;letter-spacing:.01em;overflow-wrap:anywhere}
  /* Carimbo do reporte e acoes dividem a ULTIMA fileira: sao as duas coisas
     que a pessoa faz depois de ler os numeros (ver quem parou de reportar e
     abrir a configuracao), e separadas custavam 54px por cliente. */
  .tab-clientes td.cli-rep{flex:1 1 auto;justify-content:flex-start;gap:9px;
    padding:11px 0 0;margin-top:8px;border-top:1px solid var(--linha-s)}
  .tab-clientes td.acoes-cel{flex:1 1 auto;padding:11px 0 0;margin-top:8px;
    border-top:1px solid var(--linha-s)}
}
/* Quatro numeros numa linha so a partir de 360px. Abaixo disso ficam 2x2, que
   ainda e duas fileiras a menos que a pilha original de quatro. */
@media(min-width:360px) and (max-width:759px){
  .tab-clientes td.num{flex:1 1 60px}
}

/* Ritmo das secoes do contrato. Sem isto, "Extras", "Proxima fatura" e
   "Cobranca avulsa" correm juntas: a pessoa le tres assuntos como se fossem um,
   e o botao de gerar fatura fica colado no texto do assunto seguinte. */
[data-view="contrato"] .bloco{margin-bottom:28px}
[data-view="contrato"] .bloco>h3,[data-view="financeiro"] .bloco>h3{
  font-family:var(--f-display);font-size:1.06rem;color:var(--verde);
  margin-bottom:11px;padding-bottom:7px;border-bottom:1px solid var(--linha)}
/* A previa e a lista de extras ganham o MESMO cartao dos formularios: bloco de
   conteudo solto sobre o papel parece rascunho ao lado de um bloco emoldurado. */
.fin-previa,.fin-extras{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:4px 15px}
.fin-extras li:last-child,.fin-previa li:last-child{border-bottom:none}
[data-view="contrato"] .fin-previa+.btn{margin-top:14px}
[data-view="contrato"] .vazio{padding:16px 12px}

/* ------------------------------------------------- Alvo de toque no dedo
   Abaixo de 760px o dedo cobre ~9mm e o ponteiro cobre 1px. Estes quatro
   controles mediram entre 22px e 30px de altura: a area de clique cresce
   para 44px sem mexer no tamanho do texto nem no desenho da fileira. */
@media (max-width:759px){
  .chip.chip-peq{min-height:44px;padding-top:9px;padding-bottom:9px}
  /* 44px, e nao 40: e a acao principal da linha do cliente e a mais tocada
     da tela no celular. O padding cresce sem empurrar o cartao porque a
     margem negativa devolve o espaco. */
  .cli-nome-acao{min-height:44px;min-width:44px;padding:11px 6px;margin:-11px -6px}
  .ncf-ajuda{min-height:44px;min-width:44px}
  /* O X do modal e o do aviso mediam 32px. Sao os dois controles que a pessoa
     procura QUANDO QUER SAIR, e errar o alvo de saida e o pior tipo de erro de
     toque: ela toca no que estava atras. A margem negativa devolve os 12px
     extras ao lado, entao o desenho do cabecalho nao muda. */
  .modal-x{min-width:44px;min-height:44px;margin:-6px -6px -6px 0}
  .aviso-fechar{min-width:44px;min-height:44px;margin:-12px -12px -12px 0}
}

/* ---------------------------------------------------- Cabecalho de pagina
   As Ferramentas e a Central de Midia ja abriam com titulo, descricao e fio
   (.fer-cabeca / .mid-cabeca); as telas do app comecavam direto no conteudo
   ou num "< Painel" solto. Navegando entre elas pareciam dois produtos. Esta
   e a MESMA cabeca, para valer em todas.

   O nome no topo da janela nao substitui o titulo na pagina: ele sai da vista
   assim que o conteudo rola. */
/* GRADE, e nao flex com quebra. Com flex, "fica na linha de baixo" dependia de
   `flex-basis:100%`, e basta um `max-width` na nota (medida de leitura) para o
   navegador recalcular a largura hipotetica, achar que ela cabe ao lado do
   titulo e subir a nota para a primeira linha, colada no botao. Em grade a
   posicao e declarada: titulo e acoes na primeira faixa, selos e nota em
   faixas proprias, com ou sem teto de largura. */
.pag-cabeca{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;
  margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--linha)}
.pag-cabeca-t{font-family:var(--f-display);font-size:1.125rem;font-weight:700;color:var(--verde);
  margin:0;grid-column:1;min-width:0;letter-spacing:.1px;line-height:1.25;overflow-wrap:anywhere}
.pag-cabeca-a{grid-column:2;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.pag-cabeca-a .btn{margin-top:0}
.pag-cabeca .pag-selos,.pag-cabeca .pag-nota{grid-column:1 / -1;margin:0}
/* Medida de leitura. Sem teto, a nota da tela ocupava os 1.030px do conteudo:
   em 1.440px isso da ~115 caracteres por linha, e o olho perde o inicio da
   linha seguinte a partir de uns 80. O limite e em `ch`, entao acompanha o
   corpo do texto em vez de virar um numero de pixel que envelhece. Nao vale
   para o TITULO, que e curto e ganha por ocupar a largura toda. */
.pag-nota{font-size:.8125rem;color:var(--tinta2);line-height:1.5;max-width:80ch}
.pag-selos{display:flex;gap:6px 8px;flex-wrap:wrap}

/* Caminho de volta ACIMA do titulo: ali ele nao disputa espaco com as acoes.
   Deixou de ser mono em caixa alta, que fazia um botao secundario gritar mais
   que o proprio titulo da tela. */
/* min-height de 44px: e um link de navegacao no topo da tela, o primeiro alvo
   que o dedo procura ao voltar. Com 27px ele errava. O padding cresce a area
   e a margem negativa devolve o espaco ao layout. */
.pag-volta{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;
  padding:11px 6px;margin:-9px -6px 2px;min-height:44px;font-size:.8rem;font-weight:600;color:var(--tinta2);
  font-family:inherit;touch-action:manipulation}
.pag-volta:hover{color:var(--verde);text-decoration:underline;text-underline-offset:3px}

/* Colunas equilibradas por JS (equilibrarColunas em app.js).
   O multi-coluna do CSS nao consegue equilibrar blocos indivisiveis: ele
   estima a altura antes de conhecer os blocos e, como nenhum pode ser
   cortado, o erro fica na tela como papel em branco no pe de uma das
   colunas. Quando o JS assume, `columns` sai do caminho. */
.colunas--js{columns:auto!important;display:grid;gap:0 22px;align-items:start}
.colunas--js>.col-j{min-width:0;display:flex;flex-direction:column}
@media(min-width:760px){.colunas--js{grid-template-columns:1fr 1fr}}
@media(min-width:1500px){.colunas--js{grid-template-columns:1fr 1fr 1fr}}

/* Registrar lead em duas colunas no desktop: fechamento do dia a esquerda,
   lead avulso a direita. Sao dois formularios independentes, e empilhados
   davam 1800px de rolagem para preencher o que cabe numa tela. */
.reg-grade{display:grid;grid-template-columns:1fr;gap:0 22px;align-items:start}
.reg-col{min-width:0}
@media(min-width:1000px){
  .reg-grade{grid-template-columns:1fr 1fr}
  /* A coluna de leitura confortavel do app limita a tela toda a 748px, o que
     aqui esmagaria as duas colunas: esta tela pede a largura cheia. */
  .conteudo[data-view="registrar"]{max-width:1120px}
}

/* ------------------------------------------------------ E-mail marketing */
.emk-explica{margin:0 0 10px;font-size:.86rem;color:var(--tinta2);line-height:1.55;max-width:70ch}
.emk-nova{flex:0 0 auto;text-decoration:none}
.emk-grupo{border:1px solid var(--linha);border-radius:11px;background:var(--branco);margin-bottom:6px;overflow:hidden}
.emk-grupo>summary{list-style:none;cursor:pointer;padding:9px 13px;font-size:.8rem;font-weight:700;color:var(--tinta);display:flex;align-items:center;gap:8px}
.emk-grupo>summary::-webkit-details-marker{display:none}
.emk-grupo>summary em{font-style:normal;font-size:.72rem;color:var(--tinta2);background:var(--fundo2,#eef2ef);border-radius:999px;padding:1px 8px}
.emk-grupo>summary::after{content:'\203A';margin-left:auto;color:var(--tinta2);transition:transform .15s}
.emk-grupo[open]>summary::after{transform:rotate(90deg)}
.emk-grupo-corpo{border-top:1px solid var(--linha);padding:4px 13px 10px}
.emk-modelo{padding:7px 0;border-bottom:1px solid var(--linha)}
.emk-modelo:last-child{border-bottom:0}
.emk-modelo strong{display:block;font-size:.85rem}
.emk-modelo span{display:block;font-size:.76rem;color:var(--tinta2);line-height:1.45;margin-top:1px}

/* Cliente desativado na mesma lista: presente, mas visivelmente em repouso.
   O selo segue a régua dos .rep (mono, caixa alta, borda na cor). */
.tab .tr-inativo td{color:var(--tinta2)}
.tab .tr-inativo .cli-cel-n b{color:var(--tinta2);font-weight:650}
.rep-inativo{color:var(--tinta2);background:rgba(77,90,82,.08)}

/* E-mail marketing: situação da campanha na MESMA régua dos selos .rep.
   As variantes --enviada/--fila/etc são montadas por JS ("emk-status--" + status):
   varredura de CSS morto por texto NÃO as encontra e elas estão vivas. */
.emk-status{display:inline-block;font-family:var(--f-mono);font-size:var(--t-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;border:1.3px solid currentColor;border-radius:5px;
  padding:3px 7px;line-height:1.3;color:var(--tinta2);background:rgba(77,90,82,.08)}
.emk-status--enviada,.emk-status--concluida{color:var(--selo);background:rgba(29,92,71,.07)}
.emk-status--enviando,.emk-status--fila{color:var(--alerta);background:rgba(138,107,58,.08)}

/* Régua de entrega: o funil da campanha em proporção real, no vocabulário do
   caderno pautado. Trilho = enviados; tinta = entregues; dourado = abriram;
   selo = clicaram. As camadas nascem em zero e preenchem uma vez no paint. */
.emk-regua{position:relative;display:block;height:5px;margin-top:7px;max-width:280px;
  background:rgba(12,42,33,.10);border-radius:99px;overflow:hidden}
.emk-regua i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
  transition:width .6s cubic-bezier(.23,1,.32,1)}
.emk-regua .e{background:rgba(12,42,33,.32)}
.emk-regua .a{background:var(--dourado)}
.emk-regua .c{background:var(--selo)}
@media (prefers-reduced-motion:reduce){.emk-regua i{transition:none}}
.emk-legenda{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 2px 0;
  font-family:var(--f-mono);font-size:var(--t-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--tinta2)}
.emk-legenda i{width:14px;height:5px;border-radius:99px;display:inline-block}
.emk-legenda .e{background:rgba(12,42,33,.32)}
.emk-legenda .a{background:var(--dourado)}
.emk-legenda .c{background:var(--selo)}
.emk-legenda span{font-weight:400;text-transform:none;letter-spacing:0;margin-left:2px}
.emk-tag{display:inline-block;margin-left:8px;font-family:var(--f-mono);font-size:var(--t-micro);
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--dourado-tinta);
  border:1.3px solid currentColor;border-radius:5px;padding:1px 6px;vertical-align:2px}

/* No telefone a célula da campanha vira flex sem quebra e a régua colapsa a
   zero. Só nesta tela: a célula quebra linha e a régua ocupa a largura toda,
   depois do nome e do cliente. */
@media (max-width:759px){
  [data-view="emails"] td.cli-cel{flex-wrap:wrap}
  [data-view="emails"] .emk-regua{flex:1 1 100%;max-width:none;order:9}
}

/* ------------------------------------------------------ Central de avisos
   Severidade com TRÊS sinais redundantes, nenhum deles sozinho: a palavra
   (.avi-sev), a espessura do filete à esquerda, e a faixa do topo que anuncia
   os urgentes. A cor entra como quarto sinal, nunca como primeiro: em tela
   monocromática ou para quem não distingue verde de vermelho, a leitura
   continua de pé. */
.avi{display:block;width:100%;text-align:left;background:var(--branco);border:1px solid var(--linha);
  border-left:2px solid var(--linha);border-radius:10px;padding:12px 14px;margin:0 0 8px;font:inherit;
  color:var(--tinta);cursor:default}
button.avi{cursor:pointer}
button.avi:hover{border-color:var(--selo)}
.avi--atencao{border-left-color:var(--alerta);border-left-width:2px}
.avi--urgente{border-left-color:var(--erro);border-left-width:4px}
/* Não lido: marcador sólido MAIS fundo destacado. O estado nunca depende só
   da cor de fundo. */
.avi--novo{background:var(--bg)}
.avi--novo .avi-tit::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--selo);margin-right:7px;vertical-align:middle}
.avi--novo.avi--urgente .avi-tit::before{background:var(--erro)}
.avi-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.avi-sev{font-size:var(--t-micro)}
.avi--atencao .avi-sev{color:var(--alerta)}
.avi--urgente .avi-sev{color:var(--erro)}
.avi-hora{margin-left:auto;font-size:var(--t-micro);color:var(--suave)}
.avi-tit{display:block;font-size:var(--t-corpo);line-height:1.35;margin-bottom:3px}
.avi-corpo{display:block;font-size:var(--t-nota);line-height:1.5;color:var(--tinta2)}
.avi-dia{margin:18px 0 8px}
.avi-dia:first-child{margin-top:4px}
.avi-faixa{margin-bottom:10px}
.avi-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.avi-chips{flex:1 1 auto}

/* Contador do menu. Zero NÃO desenha nada: bolha com "0" é ruído permanente. */
.nav-cont{margin-left:auto;min-width:22px;height:20px;padding:0 6px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:999px;background:var(--selo);color:#fff;
  font-size:var(--t-micro);font-weight:700;line-height:1}
.nav-cont--urgente{background:var(--erro)}

/* KPI que FILTRA. Os dois primeiros do quadro continuam leitura; os que viram
   botão ganham o affordance e o estado, porque um número que age e um que não
   age não podem ter a mesma aparência. */
.kpi-filtro{cursor:pointer;font:inherit;text-align:left;width:100%}
.kpi-filtro .n,.kpi-filtro .l{display:block}
.kpi-filtro:hover{border-color:var(--selo)}
.kpi-filtro[aria-pressed="true"]{border-color:var(--selo);box-shadow:inset 0 0 0 1px var(--selo)}
.kpi-filtro[aria-pressed="true"].alerta{border-color:var(--erro);box-shadow:inset 0 0 0 1px var(--erro)}
/* Cabeçalho ordenável: a seta só aparece na coluna que está ordenando, para a
   tabela não virar um campo de setas. */
.th-ordena{cursor:pointer;user-select:none}
.th-ordena:hover{color:var(--selo)}
.th-ordena[aria-sort="descending"]::after{content:' \2193'}
.th-ordena[aria-sort="ascending"]::after{content:' \2191'}

/* "Nunca reportou" quebrava em duas linhas dentro do selo e a caixa ficava
   torta. O selo é rótulo curto: ele não quebra. */
.rep{white-space:nowrap}

/* ----------------------------------------- Estudo de palavras-chave
   Bloco por PERGUNTA, e nao por fonte de dado: o gestor abre esta tela com
   uma duvida na cabeca ("onde estou perdendo dinheiro?"), nao com vontade de
   ver uma tabela. Por isso cada cartao tem titulo em forma de pergunta
   respondida e uma linha dizendo o que ele mede e o que NAO mede. */
.est-barra{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-width:0}
.est-chips{flex:1;min-width:0}
.est-bloco{padding:14px 15px}
.est-bloco-t{font-family:var(--f-display);font-size:1.02rem;font-weight:750;color:var(--verde);margin:0 0 3px}
/* A nota do bloco e a parte que impede a leitura errada do numero: fica junto
   do titulo, nao no rodape, porque rodape ninguem le antes de concluir. */
.est-bloco-n{font-size:.83rem;color:var(--tinta2);margin:0 0 11px;line-height:1.45}
.est-cobertura{font-size:.92rem;color:var(--tinta);margin:0 0 9px;line-height:1.5}
.est-medidor{height:9px;border-radius:999px;background:rgba(12,42,33,.10);overflow:hidden}
.est-medidor-cheio{display:block;height:100%;border-radius:999px;background:var(--selo)}
.est-destaque{font-size:.92rem;font-weight:650;color:var(--verde);background:rgba(29,92,71,.07);
  border-radius:9px;padding:9px 12px;margin:0 0 11px;line-height:1.45}
.est-duplo{display:grid;grid-template-columns:1fr;gap:9px}
.est-kpi{border:1px solid var(--linha);border-radius:11px;padding:11px 13px;background:var(--branco);min-width:0}
.est-kpi-r{display:block;font-family:var(--f-mono);font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.04em;color:var(--tinta2)}
.est-kpi-v{display:block;font-family:var(--f-display);font-size:1.3rem;font-weight:800;color:var(--verde);
  line-height:1.2;font-variant-numeric:tabular-nums;margin:2px 0 1px;overflow-wrap:anywhere}
.est-kpi-s{display:block;font-size:.82rem;color:var(--tinta2);line-height:1.4}
/* O nome da campanha embaixo da palavra: e contexto, nao dado. Fica menor e
   mais claro para nao competir com a palavra, que e o que se procura. */
.est-sub{display:block;font-size:var(--t-micro);color:var(--tinta2);margin-top:2px;overflow-wrap:anywhere}

@media(min-width:760px){
  .est-duplo{grid-template-columns:1fr 1fr}
  .est-bloco{padding:17px 19px}
}

/* ------------------------------------------ Midia paga por objetivo
   A nota vive DENTRO da linha, sob o rotulo, e nao como legenda no rodape do
   cartao: "CPM" sozinho e sigla, e quem nao sabe o que ela mede nao vai
   procurar a explicacao tres linhas abaixo. */
.mp-nota{display:block;margin-top:2px;font-size:var(--t-micro);color:var(--tinta2);line-height:1.4}
.mp-aviso{margin-top:8px}
.sec-tit .sit{margin-left:6px;vertical-align:middle;text-transform:none;letter-spacing:0}

/* ------------------- Secao da Configuracao que recolhe em QUALQUER largura
   As regras de recolhimento nasceram dentro de @media(max-width:759px), porque
   no comeco so o celular precisava delas. Conexoes precisa recolher tambem no
   desktop: e a maior secao da tela e, aberta o tempo todo, empurra todo o resto
   para fora da primeira dobra. Estas regras repetem as de la, fora da consulta
   de midia, e valem so para quem tem `--sempre`. */
.cfg-recolhivel--sempre{border:1px solid var(--linha);border-radius:12px;background:var(--branco);
  padding:0 13px;margin-bottom:10px}
.cfg-recolhivel--sempre .nc-tit{margin:0}
.cfg-recolhivel--sempre .nc-tit::after{display:none}
.cfg-recolhivel--sempre .cfg-abrir{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:48px;padding:13px 0;background:none;border:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.cfg-recolhivel--sempre .cfg-seta{
  display:block;flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--tinta2);
  border-bottom:2px solid var(--tinta2);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .16s ease}
.cfg-recolhivel--sempre.aberta .cfg-seta{transform:rotate(-135deg) translate(-3px,-3px)}
.cfg-recolhivel--sempre .cfg-corpo{display:none}
.cfg-recolhivel--sempre.aberta .cfg-corpo{display:block;padding-bottom:13px}

/* ------------------------------------------------------------------ */
/* Painel do cliente em abas (21/08/2026): cabecalho rico + secoes.    */
/* ------------------------------------------------------------------ */
/* Cabecalho compacto e centrado verticalmente (22/08): identidade a esquerda,
   atalhos a direita na MESMA linha de base, faixa de marca sutil na borda
   esquerda para o cartao ler como cabecalho de dashboard, nao como um card
   solto. Menos altura para sobrar tela ao conteudo. */
.painel-cab--rico{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--branco);border:1.4px solid var(--fio-forte);border-left:4px solid var(--selo);
  border-radius:12px;padding:9px 14px;margin-bottom:10px}
.painel-cab--rico .painel-identidade{min-width:0;flex:0 1 auto;max-width:44%}
.painel-cab--rico .cliente-titulo{font-size:1.1rem;line-height:1.15}
.cliente-meta{display:block;margin-top:2px;font-size:var(--t-micro);color:var(--tinta2);
  font-family:var(--f-mono);letter-spacing:.02em;text-transform:uppercase;line-height:1.35}
.cliente-meta .sep{color:var(--dourado);margin:0 4px}
/* Os atalhos ganham o espaco livre e caem numa linha so no desktop, em vez de
   quebrar em tres e inflar o cabecalho. */
.painel-cab--rico .acoes-cliente{flex:1 1 auto;gap:6px}
@media (min-width:900px){
  .painel-cab--rico .acoes-cliente .btn{padding-left:10px;padding-right:10px}
}

/* Barra de controle unica: abas (esquerda) + periodo (direita) numa linha so,
   com um filete inferior que separa o comando do conteudo sem gastar altura. */
.painel-controles{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 12px;padding-bottom:9px;border-bottom:1.4px solid var(--linha)}
.painel-controles .painel-abas{margin:0;min-width:0}
.painel-controles .rolagem-filtros{margin:0;min-width:0}
.painel-controles .painel-periodo{margin:0;justify-content:flex-end}
/* As abas sao o controle PRINCIPAL: pilula cheia, um degrau acima do periodo. */
.painel-abas .chip{font-weight:600}
.painel-abas .chip.on{background:var(--selo);border-color:var(--selo);color:#fff}
.painel-aba{display:none}
.painel-aba.on{display:block}
@media (max-width:620px){
  .painel-controles{gap:8px}
  .painel-controles .painel-periodo{justify-content:flex-start}
  /* No celular o cabecalho empilha: identidade em cima, atalhos numa grade de
     tres, senao os botoes sobrepoem o nome (flex nao cabe em 390px). */
  .painel-cab--rico{display:block}
  .painel-cab--rico .painel-identidade{max-width:none;margin-bottom:9px}
  .painel-cab--rico .acoes-cliente{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .painel-cab--rico .acoes-cliente .btn{width:100%}
}

/* Cinco KPIs na mesma linha do desktop: sem a classe, o quinto cartao
   quebrava sozinho e as celulas vazias viravam um vao cinza no meio da tela. */
.kpis--cinco .kpi:nth-child(5){grid-column:1 / -1}
.kpi--moeda .n{font-size:clamp(.95rem,4.2vw,1.25rem)}
@media (min-width:760px){
  .kpis--cinco{grid-template-columns:repeat(5,1fr)}
  .kpis--cinco .kpi:nth-child(5){grid-column:auto}
  .kpi--moeda .n{font-size:clamp(.95rem,1.4vw,1.3rem)}
}

/* Midia paga em grade densa: rotulo pequeno em cima, numero embaixo.
   Fundo da pagina entre as celulas: linha incompleta nao vira vao cinza. */
.mp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px}
.mp-met{background:var(--branco);border:1.4px solid var(--linha);border-radius:10px;
  padding:8px 11px;min-width:0}
.mp-l{display:block;font-size:var(--t-micro);color:var(--tinta2);font-family:var(--f-mono);
  letter-spacing:.02em;text-transform:uppercase;line-height:1.35}
.mp-v{display:block;margin-top:2px;font-family:var(--f-display);font-size:1.02rem;font-weight:800;
  color:var(--verde);line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mp-nota2{display:block;margin-top:2px;font-size:var(--t-micro);color:var(--suave);line-height:1.35}
@media (min-width:760px){
  .mp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1200px){
  .mp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* O valor em moeda pode quebrar DEPOIS do "R$", nunca no meio dos digitos:
   overflow-wrap anywhere herdado do .kpi .n partia "1.5 26,62". */
.kpi--moeda .n{overflow-wrap:normal}
.kpi--moeda .n .num{white-space:nowrap;font-size:clamp(.85rem,1.15vw,1.25rem)}

/* Conserto do corte do 5o KPI (revisao de 22/08): as faixas 1fr tem piso no
   min-content, o numero nowrap empurrava a celula alem do grid e o overflow
   hidden AMPUTAVA o valor ("R$ 15.580,24" virava "R$15.58"): numero plausivel
   e errado. minmax(0,1fr) tira o piso; o container query encolhe a fonte ate
   o numero caber INTEIRO na celula, e no pior caso o "R$" desce de linha. */
.kpis--cinco{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi--moeda{container-type:inline-size}
/* A cifra INTEIRA ("R$ 15.580,24") escala como um bloco so, pelo tamanho da
   propria celula (container query): o valor nunca quebra nem e amputado, e o
   prefixo nao fica gigante ao lado de um numero miudo. */
.kpi--moeda .n{white-space:nowrap;font-size:clamp(.75rem,11cqw,1.3rem)}
.kpi--moeda .n .num{display:inline;white-space:inherit;font-size:inherit}
@media (min-width:760px){
  .kpis--cinco{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ------------------------------------------------------------------ */
/* Cor por PAPEL do indicador (22/08): a faixa deixa de ser parede de  */
/* numeros iguais. Filete no topo da celula + tinta do numero.         */
/* ------------------------------------------------------------------ */
.kpi--leads{box-shadow:inset 0 3px 0 var(--selo)}
.kpi--leads .n{color:var(--selo)}
.kpi--ag{box-shadow:inset 0 3px 0 #2f5a78}
.kpi--ag .n{color:#2f5a78}
.kpi--conv{box-shadow:inset 0 3px 0 var(--dourado)}
.kpi--pct{box-shadow:inset 0 3px 0 var(--selo)}
.kpi--pct .n{color:var(--selo)}
.kpi--inv{box-shadow:inset 0 3px 0 var(--verde2)}
.kpi--inv .n{color:var(--verde)}
/* Diferenca grande NAO e vitoria: e conversao que a plataforma marcou e nao
   virou lead. Ambar de atencao, com fundo proprio para saltar da faixa. */
.kpi--alerta{background:#faf1ef;box-shadow:inset 0 3px 0 #8a691f}
.kpi--alerta .n{color:#8a5d0b}

/* Acento de cor no grid do Meta Ads: dinheiro que entra (marca) e a metrica
   que DECIDE (custo por resultado, ROAS: dourado). O resto neutro. */
.mp-met--inv{border-color:var(--selo);box-shadow:inset 3px 0 0 var(--selo)}
.mp-met--inv .mp-v{color:var(--selo)}
.mp-met--chave{border-color:var(--dourado);background:#fdf9f0;box-shadow:inset 3px 0 0 var(--dourado)}
.mp-met--chave .mp-v{color:var(--dourado-tinta)}

/* ------------------------------------------------------------------ */
/* Densidade da "Visao geral" para ler sem rolagem (22/08).            */
/* ------------------------------------------------------------------ */
/* Titulos de secao mais justos: eles somavam ~20px cada, e sao muitos. */
.painel-aba .sec-tit{margin:0 0 6px}
.painel-aba .faixa-kpis .sec-tit{margin-bottom:5px}
/* Celula de KPI e de midia paga um degrau mais baixas. */
.painel-aba .kpi{padding:8px 12px}
.mp-met{padding:6px 10px}
.mp-grid{gap:6px;margin-bottom:8px}
/* No desktop largo o Meta Ads empacota em ate 6 colunas: 11 metricas caem de
   3 linhas para 2, e a secao para de empurrar o resto para fora da tela. */
@media (min-width:1080px){
  .mp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:1320px){
  .mp-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* Leituras do periodo: cartao mais justo. */
.painel-aba .leituras{padding:10px 12px}
.painel-aba .leituras .leitura{margin:0}
.painel-aba .leituras .leitura+.leitura{margin-top:6px}

/* O .chip e inline-flex: o espaco entre o rotulo e a contagem <b> some
   (flex descarta o no de texto em branco), virando "Todas0". Margem explicita
   no numero devolve o respiro sem afetar chip sem contagem. */
.chip b{margin-left:5px}

/* ------------------------------------------------------------------ */
/* Tela de Configuração (22/08): a mais longa do painel (dez secoes).  */
/* Navegacao fixa + cor por dominio para varrer sem rolar as ~3.200px. */
/* Tudo escopado a .cfg-sec: o mesmo .nc-tit vive no "Novo cliente".    */
/* ------------------------------------------------------------------ */
@media (min-width:760px){
  /* A fita "Ir para:" acompanha a rolagem: numa pagina de seis telas de
     altura, o indice tem de estar sempre a um clique. */
  .cfg-ir{position:sticky;top:calc(var(--topo-h) + 8px);z-index:20;
    background:var(--bg);padding:8px 0;margin:-4px 0 12px;
    border-bottom:1.4px solid var(--linha)}
}
/* Marcador de cor antes do titulo da secao: verde para o nucleo, dourado
   para o comercial, ambar para alerta, azul para integracao, vermelho para
   risco. Da para achar a secao pela cor antes de ler o rotulo. */
.cfg-sec .nc-tit{position:relative;padding-left:15px}
.cfg-sec .nc-tit::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:14px;border-radius:3px;background:var(--selo)}
#cfgMetas .nc-tit::before{background:var(--dourado)}
#cfgAlertas .nc-tit::before{background:#8a691f}
#cfgConexoes .nc-tit::before,
#cfgWhatsApp .nc-tit::before,
#cfgSite .nc-tit::before{background:#2f5a78}
#cfgRisco .nc-tit::before{background:#a13024}
#cfgRisco .nc-tit{color:#a13024}
/* Zona de risco: o cartao inteiro sinaliza perigo, nao so o texto vermelho. */
#cfgRisco .gest-config{border-color:rgba(161,48,36,.4);background:#faf1ef}
/* Botão de ação em ícone (lista de leads, 22/08/2026): 44px de toque, desenho 18px. */
.btn-icone{width:44px;min-width:44px;padding:0;gap:0}
.btn-icone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* ==========================================================================
   Tela Websites (23/08/2026): audiencia dos sites da carteira.
   ========================================================================== */
/* Oito medidas em vez de seis: com 1fr 1fr a faixa virava quatro fileiras no
   desktop e sobrava papel branco ao lado. --quatro so vale onde cabe. */
@media (min-width:760px){ .kpis--quatro{grid-template-columns:repeat(4,1fr)} }

.web-secao{margin-top:26px}
.web-secao-t{font-family:var(--f-display);font-size:1.05rem;font-weight:700;margin:0 0 2px}
.web-secao-n{font-size:var(--t-micro);color:var(--suave);margin:0 0 10px;line-height:1.45}
.web-lista{margin:0;padding-left:18px;font-size:.9rem;color:var(--tinta2);line-height:1.7}

/* Selo do estado da medicao. E a coluna que a tela existe para mostrar, entao
   ela nao usa cor sozinha: o texto diz o estado por extenso, para quem nao
   distingue as cores ler a mesma informacao. */
.web-selo{display:inline-block;font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.04em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--linha);white-space:nowrap}
.web-selo--ok{background:rgba(134,201,140,.16);border-color:rgba(134,201,140,.5);color:var(--ok)}
.web-selo--alerta{background:#fbf5e9;border-color:var(--dourado-tinta);color:var(--dourado-tinta)}
.web-selo--neutro{background:var(--fundo2);color:var(--suave)}
/* Segundo selo da mesma celula: a captura de clique, embaixo da audiencia.
   Bloco proprio para as duas nunca ficarem lado a lado numa linha so, que e
   onde o olho junta as duas medicoes e le uma frase que nao existe. */
.web-selo-2{display:block;margin-top:4px}

/* Travessao de "nao medido". NAO e zero, e o title explica a diferenca: sem
   isto a coluna vazia seria lida como "nenhuma visita". */
.web-nd{color:var(--suave);font-family:var(--f-mono);cursor:help}

.web-var{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.02em;white-space:nowrap}
.web-var--sobe{color:var(--ok)}
.web-var--desce{color:var(--erro)}
.web-var--igual{color:var(--suave)}

.web-instalar{font:inherit;font-size:var(--t-micro);font-family:var(--f-mono);text-transform:uppercase;
  letter-spacing:.04em;background:transparent;border:1px solid var(--linha);color:var(--tinta2);
  border-radius:999px;padding:3px 9px;cursor:pointer;min-height:28px}
.web-instalar:hover{border-color:var(--dourado-tinta);color:var(--dourado-tinta)}

/* Fio de tendencia: sessoes por dia. Puramente indicativo, com o total no
   title; por isso e aria-hidden e nao vira conteudo para leitor de tela. */
.web-fio{display:flex;align-items:flex-end;gap:1px;height:18px;margin-top:5px;width:100%;max-width:120px}
.web-fio i{flex:1 1 0;min-width:1px;background:var(--verde);opacity:.55;border-radius:1px}

@media (max-width:759px){
  /* ARMADILHA JA PAGA (19/08/2026, tela de e-mails): no celular o .tab vira
     ficha e cada td vira flex SEM quebra. Um terceiro filho na celula (aqui o
     fio de tendencia) colapsa para largura ZERO, em silencio: nada quebra,
     o elemento simplesmente some. flex-wrap na celula + 100% no filho e o
     conserto, e ele precisa ser escopado por data-view para nao mexer nas
     outras telas que usam .cli-cel. */
  [data-view="websites"] .tab td.web-cel{flex-wrap:wrap;flex-direction:row;align-items:flex-start}
  [data-view="websites"] .tab td.web-cel::before{content:none}
  [data-view="websites"] .tab td.web-cel .cli-cel-n,
  [data-view="websites"] .tab td.web-cel .cli-cel-s{flex:1 1 100%}
  [data-view="websites"] .web-fio{flex:1 1 100%;max-width:none}
  /* Selo e botao lado a lado na ficha, sem estourar a largura. */
  [data-view="websites"] .tab td[data-r="Medição"]{flex-wrap:wrap;gap:6px}
  /* 28px de altura reprova o alvo de toque de 44px, e este e o unico botao de
     acao da tela: e por ele que o gestor pega o trecho para instalar a medicao.
     min-width junto porque altura sozinha ja deixou alvo de 30px nesta casa. */
  [data-view="websites"] .web-instalar{min-height:44px;min-width:44px;padding:6px 12px}
}

/* Barra lateral em TRILHO colapsavel no desktop (pedido do dono, 25/08/2026):
   fechada por padrao (so icones, ~78px) e expandida ao passar o mouse ou ao
   entrar por teclado (focus-within), para o conteudo ganhar ~186px de tela.

   POR QUE SO CSS: todo o layout do desktop ja gira em torno de var(--rail)
   (body compensa com padding-left, .lateral tem width, .aviso-app centraliza).
   Redefinir a variavel aqui embaixo muda o trilho inteiro de uma vez; a
   EXPANSAO nao mexe na variavel de proposito, entao a barra abre POR CIMA do
   conteudo (position:fixed, z-index 60) sem reflow nenhum na pagina.

   O truque anti-reflow interno: os grupos do menu tem largura FIXA igual a da
   barra aberta, e a barra fechada apenas RECORTA (overflow-x hidden). Assim o
   icone de cada item fica no mesmo x aberto ou fechado, e o texto nao ganha
   reticencias no meio da transicao: ele some por opacidade. visibility junto,
   senao o seletor de cliente invisivel continuaria clicavel no trilho. */
@media(min-width:1000px){
  :root{--rail:78px;--rail-aberta:264px}
  .lateral{overflow-x:hidden;transition:width .18s ease .06s,box-shadow .18s ease .06s}
  .lateral:hover,.lateral:focus-within{width:var(--rail-aberta);box-shadow:12px 0 34px rgba(12,42,33,.16)}
  .lateral .nav-grupo{width:calc(var(--rail-aberta) - 24px)}
  .lateral .nav-grupo-t,.lateral .nav-sel,.lateral .nav-voltar,.lateral .nav-btn span{
    transition:opacity .12s ease .06s,visibility .12s ease .06s}
  /* body:not(.sl-clientes-aberto) na regra de ESCONDER (conserto 25/08): a
     versao anterior mantinha a largura pelo body.sl-clientes-aberto, mas a
     regra de esconder era mais especifica que a de mostrar, e com o painel de
     clientes aberto e o mouse fora da barra sobrava uma faixa branca sem
     rotulo nenhum. Condicionar o esconder ao painel fechado resolve pela
     raiz, sem guerra de especificidade. */
  body:not(.sl-clientes-aberto) .lateral:not(:hover):not(:focus-within) .nav-grupo-t,
  body:not(.sl-clientes-aberto) .lateral:not(:hover):not(:focus-within) .nav-sel,
  body:not(.sl-clientes-aberto) .lateral:not(:hover):not(:focus-within) .nav-voltar,
  body:not(.sl-clientes-aberto) .lateral:not(:hover):not(:focus-within) .nav-btn span{opacity:0;visibility:hidden}
  /* O grupo do cliente perde a moldura no trilho: uma caixa vazia em volta de
     icones parecia um botao quebrado. */
  body:not(.sl-clientes-aberto) .lateral:not(:hover):not(:focus-within) .nav-grupo--cliente{border-color:transparent;background:none}
  /* A tela unificada de Trafego e uma TABELA de campanhas: ela usa o espaco
     que o trilho liberou (o resto do painel segue nos 1120px de leitura). */
  .conteudo[data-view="trafego"]{max-width:1360px}
}

/* Conteudo em LARGURA CHEIA (pedido do dono, 25/08/2026): com o trilho de
   78px, as margens do teto de 1120px viraram desperdicio visivel. O conteudo
   passa a usar a janela inteira em TODOS os modulos, com um respiro de 28px
   por lado. O que e LEITURA continua com a propria medida: .vazio (68ch),
   .pag-nota (80ch), .emk-explica (70ch) tem teto proprio, e os formularios
   (registrar, perfil) ganham folga sem esticar campo de texto ate a borda,
   porque input de 1400px e hostil de preencher. Este bloco vive no FIM do
   arquivo de proposito: mesma especificidade dos tetos antigos, vence pela
   ordem, e os tetos POR TELA (seletor com atributo) continuam vencendo ele. */
@media(min-width:760px) and (max-width:999px){
  .conteudo{max-width:none}
}
@media(min-width:1000px){
  .conteudo{max-width:none;padding-left:28px;padding-right:28px}
  .conteudo[data-view="trafego"]{max-width:none}
  .conteudo[data-view="clientes"]>.card{max-width:none}
  .conteudo[data-view="registrar"]{max-width:1240px}
  .conteudo[data-view="perfil"]{max-width:900px}
  /* Painel de troca de cliente aberto PELA BARRA segura o trilho aberto: sem
     isto a barra recolhia por baixo do painel ancorado e ele ficava flutuando
     longe dela (defeito visto pelo dono em 25/08/2026). */
  body.sl-clientes-aberto .lateral{width:var(--rail-aberta);box-shadow:12px 0 34px rgba(12,42,33,.16)}
  body.sl-clientes-aberto .lateral .nav-grupo-t,
  body.sl-clientes-aberto .lateral .nav-sel,
  body.sl-clientes-aberto .lateral .nav-voltar,
  body.sl-clientes-aberto .lateral .nav-btn span{opacity:1;visibility:visible}
  body.sl-clientes-aberto .lateral .nav-grupo--cliente{border-color:var(--linha);background:rgba(12,42,33,.028)}
}

/* O CONTEÚDO ACOMPANHA O TRILHO (31/08/2026, pedido do dono: "o conteúdo não
   acompanha o sidebar ao abrir"). Até aqui a barra expandida abria POR CIMA do
   conteúdo (só width + sombra, zero reflow); o dono pediu o contrário: quando
   a barra abre, o conteúdo desliza junto e nada fica coberto.

   COMO: todo o layout do desktop já gira em torno de var(--rail) (padding do
   body, centro do .aviso-app, width da .lateral). Em vez de mexer peça a peça,
   o body REDEFINE --rail para o valor aberto sempre que a barra está expandida
   (hover, foco por teclado ou painel de clientes preso aberto), e cada
   consumidor da variável segue sozinho, na mesma curva de tempo da barra.
   A sombra sai nesse estado: sombra é linguagem de sobreposição, e aqui a
   barra passa a EMPURRAR, não a cobrir.

   Navegador sem :has() (raro em 2026) fica no comportamento antigo de
   sobrepor, que continua íntegro; o estado por classe .sl-clientes-aberto
   empurra mesmo sem :has(). */
@media(min-width:1000px){
  body{transition:padding-left .18s ease .06s}
  body:has(.lateral:hover),
  body:has(.lateral:focus-within),
  body.sl-clientes-aberto{--rail:var(--rail-aberta)}
  body:has(.lateral:hover) .lateral,
  body:has(.lateral:focus-within) .lateral,
  body.sl-clientes-aberto .lateral{box-shadow:none}
}

/* FICHA DO CLIENTE (25/08/2026): o painel aprofunda a identidade de registro
   carimbado. Hierarquia da tela: (1) o selo-monograma e o nome ancoram QUEM;
   (2) a régua de KPIs em relevo diz COMO ESTÁ; (3) as seções em cartão contam
   O RESTO, entrando em cascata curta. Ações do cabeçalho viram fantasmas:
   sete botões cinza iguais disputavam com o nome; agora só o Relatório
   (dourado) afirma peso, e os demais se revelam no toque. */
.cliente-selo{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:1rem;font-weight:700;letter-spacing:.04em;color:var(--verde);
  background:linear-gradient(160deg,#f7efdd,#efe3c8);border:1.4px solid var(--dourado);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(12,42,33,.12)}
.cliente-id-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.painel-cab--rico{background:linear-gradient(180deg,var(--cartao,#fffdfa),#fbf7ee);
  border:1.4px solid var(--fio-forte,var(--linha));border-left:3px solid var(--dourado);
  border-radius:13px;padding:12px 14px}
.painel-cab--rico .cliente-titulo{font-size:1.22rem;line-height:1.12;letter-spacing:.1px}
.painel-cab--rico .cliente-meta{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.07em;margin-top:3px}
.painel-cab--rico .acoes-cliente{justify-content:flex-end}
@media(min-width:1000px){
  .painel-cab--rico{padding:14px 18px}
  .painel-cab--rico .cliente-titulo{font-size:1.42rem}
  /* Fantasma SO no desktop, onde o hover existe para revelar a borda. No
     celular, botao sem moldura vira palavra solta sem cara de toque. */
  .painel-cab--rico .acoes-cliente .btn-claro{background:transparent;border-color:transparent;color:var(--tinta2)}
  .painel-cab--rico .acoes-cliente .btn-claro:hover{background:rgba(12,42,33,.06);border-color:var(--linha);color:var(--verde)}
  .painel-cab--rico .acoes-cliente #btnRelPdf{border-color:var(--linha)}
}
/* Régua de KPIs: o toque AQUECE o papel em vez de elevar o cartão. A régua é
   uma grade selada com fresta de 1px e overflow escondido: elevar cortava as
   bordas do cartão e o número parecia decepado (visto pelo dono, 25/08). O
   cartão-chave (dourado) leva o fio de ouro no topo, para o olho pousar
   primeiro no desfecho. min-width:0 deixa "R$ 1.546,43" quebrar dentro da
   célula em vez de estourar a grade. */
.painel-aba .kpi{transition:background .14s ease;min-width:0}
.painel-aba .kpi:hover{background:rgba(201,169,110,.07)}
.painel-aba .kpi.dourado{box-shadow:inset 0 2.5px 0 var(--dourado)}
@media(min-width:1500px){.painel-aba .kpis .kpi .n{font-size:1.7rem}}
/* Título de seção com o carimbo: um quadradinho de ouro antes do rótulo. O
   ::after de fio já existe; aqui só o marcador e o fôlego. */
.painel-aba .sec-tit::before{content:'';display:inline-block;width:6px;height:6px;background:var(--dourado);
  border-radius:1.5px;margin-right:7px;vertical-align:2px}
/* Cartões da ficha: borda que responde ao toque, sem sombra permanente (a
   página é papel, não vidro). */
.painel-aba .card{transition:border-color .14s ease}
.painel-aba .card:hover{border-color:var(--fio-forte,var(--linha))}
/* Leituras do período: entradas de diário com respiro e meia-tinta no toque. */
.leituras .leitura{transition:background .12s ease}
.leituras .leitura:hover{background:rgba(201,169,110,.07)}
/* Barras (origem, funil) crescem da esquerda ao entrar: o movimento diz "isto
   é uma medida", e meio segundo não atrasa ninguém. */
@keyframes sl-crescer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.painel-aba.on .barra-fill{animation:sl-crescer .5s ease-out both;transform-origin:left}
/* Cascata de entrada da aba: cada bloco surge 40ms depois do anterior, só nos
   seis primeiros (o resto já está abaixo da dobra). */
@keyframes sl-surgir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.painel-aba.on>*{animation:sl-surgir .32s ease both}
.painel-aba.on>*:nth-child(2){animation-delay:.04s}
.painel-aba.on>*:nth-child(3){animation-delay:.08s}
.painel-aba.on>*:nth-child(4){animation-delay:.12s}
.painel-aba.on>*:nth-child(5){animation-delay:.16s}
.painel-aba.on>*:nth-child(n+6){animation-delay:.2s}
@media(prefers-reduced-motion:reduce){
  .painel-aba.on>*,.painel-aba.on .barra-fill{animation:none}
  .painel-aba .kpi:hover{transform:none}
}
/* Métricas de mídia paga: número em mono tabular e o cartão-chave levemente
   aquecido, para custo-por-resultado e ROAS saltarem da grade. */
.mp-met{transition:border-color .14s ease}
.mp-met:hover{border-color:var(--fio-forte,var(--linha))}
.mp-met--chave{background:rgba(201,169,110,.1)}

/* AS OUTRAS ABAS DA FICHA (25/08, tarde): Reporte e funil e Ferramentas
   recebem o mesmo tratamento. O conteudo delas vive DENTRO de .colunas, entao
   a cascata do primeiro nivel animava o bloco inteiro de uma vez: aqui ela
   desce um nivel e cada secao entra no seu passo. */
.painel-aba.on>.colunas>*{animation:sl-surgir .32s ease both}
.painel-aba.on>.colunas>*:nth-child(2){animation-delay:.05s}
.painel-aba.on>.colunas>*:nth-child(3){animation-delay:.1s}
.painel-aba.on>.colunas>*:nth-child(4){animation-delay:.15s}
.painel-aba.on>.colunas>*:nth-child(n+5){animation-delay:.2s}
/* Linhas de tabela-ficha (interesses, motivos, reporte diario, custo real):
   a mesma meia-tinta dourada das leituras, para a linha sob o dedo se afirmar. */
.painel-aba .card--tabela .linha-tab{transition:background .12s ease;border-radius:6px}
.painel-aba .card--tabela .linha-tab:hover{background:rgba(201,169,110,.07)}
/* Barras de origem e do funil: trilha mais funda (sulco no papel) e o valor em
   mono tabular verde, como um numero de livro-caixa. */
.painel-aba .barra-trilha{background:rgba(12,42,33,.09);box-shadow:inset 0 1px 2px rgba(12,42,33,.08)}
.painel-aba .barra-v{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:700;color:var(--verde)}
/* Cartoes de ferramenta (Estrategia de trafego, Metricas do dia): o filete
   dourado a esquerda marca "aqui o gestor AGE", espelhando o cabecalho. */
.painel-aba[data-aba="ferramentas"] .card{border-left:3px solid var(--dourado)}
@media(prefers-reduced-motion:reduce){.painel-aba.on>.colunas>*{animation:none}}

/* NOTA VIROU BALÃO tambem no painel (25/08, tarde): a explicacao escrita
   embaixo do numero (mp-nota2 da midia paga, .f do Comercial) roubava o peso
   dele. Mesmo carimbo de verso da tela de Trafego: tinta verde no hover via
   attr(data-nota); o title cobre o toque longo do celular. */
/* O balão em ::after foi APOSENTADO no mesmo dia: recortado pelos roladores
   (a fileira de KPIs do Tráfego tem overflow-x) e coberto por vizinhos. O
   balão agora é UM elemento no body (.sl-balao, posicionado pelo app.js), que
   nada recorta e nada cobre. Aqui fica só o cursor que anuncia a nota. */
.mp-met[data-nota],.painel-aba .kpi[data-nota]{cursor:help}
.sl-balao{position:fixed;z-index:999;max-width:280px;padding:8px 11px;
  background:var(--verde);color:var(--creme,#f4ecd8);
  font-size:var(--t-micro);line-height:1.5;letter-spacing:.01em;border-radius:9px;
  box-shadow:0 12px 26px rgba(12,42,33,.28);pointer-events:none;text-transform:none;
  font-weight:400;animation:sl-surgir .16s ease both}
@media(prefers-reduced-motion:reduce){.sl-balao{animation:none}}

/* NÚMEROS E CARTÕES MAIORES (25/08, pedido do dono): o painel é lido de
   relance, então o número subiu um degrau em cada superfície e o cartão
   ganhou fôlego junto. A faixa de CINCO fica um degrau abaixo, para o
   "R$ 1.546,43" seguir inteiro na célula. */
@media(min-width:1000px){
  .kpi{padding:18px 22px}
  .kpi .n{font-size:2.15rem}
  .kpis--cinco .kpi .n{font-size:1.95rem}
  .kpi .l{font-size:.75rem}
  .mp-met{padding:13px 15px}
  .mp-v{font-size:1.3rem}
}
@media(min-width:1500px){
  /* Estes dois são o degrau FIXO para navegador sem container query. Com
     container query, o bloco @supports lá embaixo os re-declara em cqw com o
     mesmo teto: sem aquela re-declaração, a especificidade de 4 classes daqui
     vencia os clamps e devolvia, só em telas largas, o corte de valor
     monetário que o conserto de 25/08 tinha fechado. */
  .painel-aba .kpis .kpi .n{font-size:2.35rem}
  .kpis--cinco .kpi .n{font-size:2.15rem}
  .mp-v{font-size:1.4rem}
}

/* NÚMERO QUE SE MEDE PELA RÉGUA (25/08, conserto): o tamanho fixo estourava a
   célula quando a "Visão geral" divide a linha com "Plataforma x realidade"
   (cada faixa fica com metade da largura e a de cinco colunas espreme). O
   número agora se dimensiona pela largura REAL da própria régua (container
   query), com teto no tamanho grande. Navegador sem container query fica no
   degrau fixo SEGURO abaixo, menor que o de antes. */
@media(min-width:1000px){
  .kpi .n{font-size:1.5rem}
  .kpis--cinco .kpi .n{font-size:1.3rem}
}
@supports (container-type:inline-size){
  @media(min-width:1000px){
    .kpis{container-type:inline-size}
    /* 4 colunas: célula = 25% da régua; 5 colunas: 20%; 3: 33%. O número mira
       ~metade da célula e para no teto. */
    .kpi .n{font-size:clamp(1.15rem,4.6cqw,2.15rem)}
    .kpis--cinco .kpi .n{font-size:clamp(1.05rem,3.2cqw,1.95rem)}
    .kpis--trio .kpi .n{font-size:clamp(1.15rem,5.8cqw,2.15rem)}
  }
  @media(min-width:1500px){
    /* Mesmos seletores (e especificidade) do degrau fixo de 1500px acima,
       DEPOIS no arquivo: com container query o número continua se medindo
       pela régua, só com teto maior. */
    .painel-aba .kpis .kpi .n{font-size:clamp(1.15rem,4.6cqw,2.35rem)}
    .painel-aba .kpis.kpis--cinco .kpi .n,.kpis--cinco .kpi .n{font-size:clamp(1.05rem,3.2cqw,2.15rem)}
  }
}

/* FICHA NA TELA WEBSITES (25/08, fim de tarde): cascata na entrada, carimbo
   nos títulos de seção, meia-tinta na linha sob o cursor e o cursor de ajuda
   nos cartões com balão (o balão em si é o .sl-balao global). */
.conteudo[data-view="websites"]>*,[data-view="websites"] #webCorpo>*{animation:sl-surgir .32s ease both}
[data-view="websites"] #webCorpo>*:nth-child(2){animation-delay:.05s}
[data-view="websites"] #webCorpo>*:nth-child(3){animation-delay:.1s}
[data-view="websites"] #webCorpo>*:nth-child(n+4){animation-delay:.15s}
[data-view="websites"] .web-secao-t::before{
  content:'';display:inline-block;width:6px;height:6px;background:var(--dourado);
  border-radius:1.5px;margin-right:7px;vertical-align:2px;
}
[data-view="websites"] .web-tab tbody tr{transition:background .12s ease}
[data-view="websites"] .web-tab tbody tr:hover td{background:rgba(201,169,110,.06)}
[data-view="websites"] .kpi[data-nota]{cursor:help;transition:background .14s ease}
[data-view="websites"] .kpi[data-nota]:hover{background:rgba(201,169,110,.07)}
@media(prefers-reduced-motion:reduce){
  .conteudo[data-view="websites"]>*,[data-view="websites"] #webCorpo>*{animation:none}
}

/* COMBOBOX DE GRUPOS DO TED (26/08): busca com lista suspensa, foto do grupo
   (ou iniciais em creme/dourado) ao lado do nome. A lista é absoluta dentro
   do .tedsel para não empurrar o resto da ficha de configurações. */
.tedsel{position:relative;flex:1;min-width:0}
.tedsel .inp{width:100%}
.tedsel-lista{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:#fff;border:1px solid var(--borda,#dcd6c8);border-radius:10px;
  box-shadow:0 10px 28px rgba(31,42,34,.14);
  max-height:280px;overflow-y:auto;padding:4px;
}
.tedsel-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 8px;border:0;border-radius:8px;background:none;
  text-align:left;cursor:pointer;font:inherit;color:inherit;
  transition:background .12s ease;
}
.tedsel-item:hover:not([disabled]),.tedsel-item:focus-visible{background:rgba(201,169,110,.1)}
.tedsel-item[disabled]{opacity:.5;cursor:not-allowed}
.tedsel-item[aria-selected="true"]{background:rgba(201,169,110,.14)}
.tedsel-foto{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,169,110,.18);color:var(--dourado-escuro,#7d5f31);
  font-size:12px;font-weight:700;letter-spacing:.02em;
}
.tedsel-foto img{width:100%;height:100%;object-fit:cover;display:block}
.tedsel-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.tedsel-txt b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tedsel-sub{font-size:12px;color:var(--texto-suave,#7a7565);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tedsel-nada{margin:0;padding:10px 8px;font-size:13px;color:var(--texto-suave,#7a7565)}

/* ============================================================================
   ALVO DE TOQUE POR APONTADOR, e nao por largura da tela (26/08/2026).

   O portao mediu 12 alvos abaixo de 44px em 768x1024 e 1024x768 com dedo. As
   correcoes existiam, todas as tres, e todas moravam dentro de um @media de
   LARGURA (`max-width:759px` ou `max-width:760px`). Tablet e largo e e tocado
   com o dedo: ele caia fora da correcao e ninguem tinha olhado.

   A regra certa e a do APONTADOR. Quem decide se o alvo precisa de 44px e o
   dedo, e um dedo mede o mesmo em qualquer largura de tela. `any-pointer:
   coarse` casa em celular, em tablet e em desktop com tela sensivel ao toque,
   que e exatamente o conjunto que precisa disto.

   Fica DEPOIS dos blocos por largura de proposito: a especificidade e a mesma
   e, com especificidade igual, quem manda e a ordem no arquivo.
   ========================================================================== */
@media (any-pointer: coarse){
  /* O chip pequeno nasce com 38px (linha ~700) para caber mais filtro na
     barra rolavel. Com dedo, 38 nao basta. */
  .chip.chip-peq{min-height:44px;padding-top:9px;padding-bottom:9px}

  /* Unico botao de acao da tela Websites: e por ele que o gestor pega o trecho
     de medicao para instalar no site. Media 97x28 sem isto.

     46 e nao 44 por causa do SUBPIXEL: com `min-height:44px` a caixa media
     43,99 no contexto de dedo (deviceScaleFactor 2), e 43,99 e menor que 44.
     O portao apontou, e ele estava certo: pedir exatamente o minimo deixa o
     resultado na mao do arredondamento. Dois pixels de folga resolvem sem
     mudar nada que o olho veja. */
  [data-view="websites"] .web-instalar{min-height:46px;min-width:46px;padding:6px 12px}

  /* A migração para o apontador (comentário acima) levou só duas correções e
     deixou estas quatro presas ao max-width:759px: em tablet (768x1024 com
     dedo) os X de saída, o "?" de ajuda e a ação principal da linha do cliente
     mediam 28-32px. Mesma folga de 46px contra o subpixel. */
  .modal-x{min-width:46px;min-height:46px;margin:-6px -6px -6px 0}
  .aviso-fechar{min-width:46px;min-height:46px;margin:-12px -12px -12px 0}
  .ncf-ajuda{min-height:46px;min-width:46px}
  .cli-nome-acao{min-height:46px;min-width:46px;padding:11px 6px;margin:-11px -6px}
  /* X do painel de troca de cliente (usado DENTRO da gaveta no celular) e o
     summary do acordeão de modelos de e-mail: ~21x29 e ~36px sem isto. */
  .nav-lista-x{min-width:46px;min-height:46px;margin:-8px -10px -8px 0}
  .emk-grupo>summary{min-height:46px}
}

/* Chave de aviso ao cliente LIGADA e sem caixa cadastrada. Alerta e nao nota:
   o interruptor verde ao lado ja diz "ligado", e uma nota de rodape em cinza
   nao compete com ele. Medido em 26/08/2026: a chave estava ligada nos 36
   clientes, nenhum tinha endereco, e a fila do cliente final tinha zero linha
   em 30 dias. */
.ac-destino--alerta{
  color:var(--erro);font-weight:600;
  background:rgba(161,48,36,.07);border-left:3px solid var(--erro);
  padding:8px 10px;border-radius:0 6px 6px 0;
}

/* CALENDÁRIO do período personalizado — POPOVER ancorado ao chip (30/08/2026,
   pedido do dono): sem véu e sem centralizar; abre ao lado do botão, some ao
   clicar fora. Posição é dada por JS (position:fixed). O range usa o dourado
   claro como trilho e o verde nas pontas. */
.per-pop{position:fixed;z-index:200;background:var(--cartao,#fffdfa);border:1px solid var(--borda,#dcd6c8);border-radius:12px;box-shadow:0 16px 40px rgba(12,42,33,.28);padding:12px 13px 10px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto}
.per-pop:focus{outline:none}
.per-pop-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.per-pop-pe{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.per-pop-rotulo{font-size:13px;color:var(--tinta2,#4d5a52);min-height:1em}
.per-pop-acoes{display:flex;gap:8px;margin-left:auto}
/* O flatpickr inline num <div> alvo desenha o calendário como IRMÃO do
   .per-cal (não filho): o tema mira o .per-pop, que sempre o contém. */
.per-pop .flatpickr-calendar.inline { box-shadow: none; border: 1px solid var(--borda, #dcd6c8); border-radius: 12px; background: #fffdfa; }
.per-pop .flatpickr-day.selected, .per-pop .flatpickr-day.startRange, .per-pop .flatpickr-day.endRange {
  background: var(--selo, #1d5c47); border-color: var(--selo, #1d5c47); color: #fff;
}
.per-pop .flatpickr-day.inRange {
  background: rgba(201, 169, 110, 0.22); border-color: transparent; box-shadow: -5px 0 0 rgba(201,169,110,.22), 5px 0 0 rgba(201,169,110,.22);
}
.per-pop .flatpickr-day.today { border-color: var(--dourado, #c9a96e); }
.per-pop .flatpickr-months .flatpickr-month, .per-pop .flatpickr-weekdays, .per-pop span.flatpickr-weekday { background: transparent; color: var(--tinta, #243029); fill: var(--tinta, #243029); }
@media (max-width: 759px) { .per-pop .flatpickr-calendar.inline { width: 100%; } }

/* LEADS v2 (29/08): trilho de cor por situação, data escaneável, chips de
   proveniência e WhatsApp direto. No FIM do arquivo de propósito: os ajustes
   vencem os blocos antigos pela ordem, sem guerra de especificidade. */
.lead-row,.lead-card{border-left:4px solid var(--linha);transition:box-shadow .15s ease,border-color .15s ease}
.lead-row:hover,.lead-card:hover{box-shadow:0 8px 22px rgba(12,42,33,.09)}
.lead-row.st-novo,.lead-card.st-novo{border-left-color:var(--selo)}
.lead-row.st-em_contato,.lead-card.st-em_contato{border-left-color:var(--alerta)}
.lead-row.st-agendado,.lead-card.st-agendado{border-left-color:var(--verde)}
.lead-row.st-convertido,.lead-card.st-convertido{border-left-color:var(--dourado)}
.lead-row.st-sem_retorno,.lead-card.st-sem_retorno{border-left-color:var(--suave)}
.lead-row.st-perdido,.lead-card.st-perdido{border-left-color:var(--erro)}
.lr-data{display:flex;flex-direction:column;line-height:1.3;min-width:52px}
.lr-data b{font-family:var(--f-mono);font-size:.84rem;font-weight:700;color:var(--tinta)}
.lr-data i{font-style:normal;font-size:var(--t-micro);color:var(--tinta2)}
.lr-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ld-chip{display:inline-flex;align-items:center;gap:5px;padding:1.5px 8px;border:1px solid var(--linha);border-radius:999px;font-size:var(--t-micro);line-height:1.5;color:var(--tinta2);background:var(--branco);font-weight:400}
.ld-chip i{width:7px;height:7px;border-radius:50%;background:var(--ldc,var(--suave));flex:0 0 auto}
.ld-chip--form{border-color:rgba(201,169,110,.6);background:rgba(201,169,110,.13);color:var(--dourado-tinta);font-weight:600}
.ld-chip--motivo{border-style:dashed}
.lead-card .lr-meta{margin:2px 0 8px}
.ld-wa{color:var(--selo);border-color:rgba(29,92,71,.4)}
.ld-wa:hover{background:rgba(29,92,71,.08)}
.chip-n{display:inline-block;margin-left:7px;padding:0 7px;border-radius:999px;background:rgba(12,42,33,.09);font-family:var(--f-mono);font-size:var(--t-micro);line-height:1.7;font-weight:700}
.chip.on .chip-n{background:rgba(255,255,255,.24)}
@media(min-width:760px){
  /* A faixa de ações cresceu para caber o WhatsApp (3 botões + folgas). */
  .lead-row{grid-template-columns:64px minmax(0,1fr) 132px 236px}
}


/* Sufixo "opcional" nos rótulos do Registrar (01/09/2026): a informação fica,
   o ruído de "(opcional):" em toda linha sai. */
.lbl-opc{font-style:normal;font-weight:400;font-size:var(--t-micro);color:var(--suave);margin-left:4px}

/* Passagem entre etapas do funil: o % em relação à etapa ANTERIOR, que é onde
   o vazamento aparece. Discreto de propósito — o número grande é a contagem. */
.barra-passo{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--tinta2);margin-left:6px;font-variant-numeric:tabular-nums}


/* ====================================================================
   PRONTIDAO DA CONTA, MOTIVO DA CONEXAO E GRUPO DE CAMPOS (01/09/2026)

   Tres blocos que nasceram juntos na revisao da tela de Configuracao:

   1. .pront-*  a lista do que falta configurar, com o custo de cada
      ausencia. Ela ABRE a aba Cadastro, entao precisa ser lida de
      relance: barra, percentual e depois a lista.
   2. .integ-motivo  o motivo do provedor quando a fonte esta com erro.
      Antes ele so existia no log do servidor.
   3. .campo-grupo  o rotulo de um GRUPO de campos, com o "?" ao lado.
      Nasceu quando os dois paragrafos longos do Cadastro viraram verbete
      de ajuda e os quatro selects ficaram sem nada os apresentando.

   Tudo em unidade relativa e sem largura fixa: a tela e usada no celular
   pelo gestor em campo, e o painel do cliente e o mesmo arquivo.
   ==================================================================== */

/* --- 1. Prontidao ------------------------------------------------- */
.pront-topo{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.pront-medida{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pront-pct{font-family:var(--f-mono);font-size:1.55rem;font-weight:700;line-height:1;color:var(--verde)}
.pront-legenda{font-size:var(--t-nota);color:var(--suave);min-width:0}
.pront-barra{height:7px;border-radius:4px;background:var(--linha-s);overflow:hidden}
.pront-barra-i{display:block;height:100%;border-radius:4px;transition:width .35s ease}
.pront-barra-i--ok{background:var(--ok)}
.pront-barra-i--meio{background:var(--dourado)}
.pront-barra-i--baixo{background:var(--erro)}

.pront-lista{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.pront-item{padding:10px 12px;border:1px solid var(--linha-s);border-left:3px solid var(--linha);
  border-radius:9px;background:var(--branco);min-width:0}
.pront-item--falta{border-left-color:var(--erro);background:linear-gradient(180deg,rgba(161,48,36,.035),var(--branco))}
.pront-item--atencao{border-left-color:var(--dourado)}
.pront-item--ok{border-left-color:var(--ok);opacity:.78}
/* GRADE, e nao flex: no celular a ordem e a do DOM (titulo, motivo, acao),
   que e a ordem em que se le. No desktop a mesma marcacao vira duas colunas e
   o botao sobe para a direita, alinhado ao titulo. Sem a grade, o botao caia
   ENTRE o titulo e o motivo em 390px. */
.pront-item{display:grid;grid-template-columns:1fr;gap:0}
.pront-t{font-weight:650;font-size:var(--t-corpo);color:var(--tinta);min-width:0}
.pront-d{margin:5px 0 0;font-size:var(--t-nota);line-height:1.5;color:var(--tinta2)}
.pront-acao{margin-top:9px}
.pront-acao .btn{width:100%}
@media (min-width:641px){
  .pront-item{grid-template-columns:1fr auto;column-gap:14px;align-items:start}
  .pront-t{grid-column:1;grid-row:1}
  .pront-d{grid-column:1;grid-row:2}
  .pront-acao{grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:start}
  .pront-acao .btn{width:auto}
  .pront-sug{grid-column:1 / -1}
}

/* A sugestao e um degrau ABAIXO do item: ela e uma oferta, nao um estado. */
.pront-sug{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--linha)}
.pront-sug-t{font-size:var(--t-nota);font-weight:650;color:var(--dourado-tinta);min-width:0}
.pront-sug-m{font-size:var(--t-micro);color:var(--suave);flex:1 1 140px;min-width:0}
.pront-sug-b{flex:0 0 auto}
/* Grupo recolhivel da prontidao. O summary usa .ttl, entao ele ja herda o
   tipo do titulo de cartao; falta so o cursor e o triangulo caber na linha. */
.pront-grupo{margin-top:12px}
.pront-sum{cursor:pointer;padding:2px 0;list-style-position:outside}
.pront-sum::marker{color:var(--dourado-tinta)}
.pront-prontos{margin-top:12px}
.pront-prontos summary{cursor:pointer;padding:5px 0}
.pront-lista--ok{margin-top:8px}

/* Campo preenchido por sugestao: o realce diz que aquilo AINDA NAO FOI
   SALVO. Sem ele, o valor aparece igual ao gravado e a pessoa fecha a tela
   achando que salvou. */
.campo-sugerido{border-color:var(--dourado) !important;box-shadow:0 0 0 3px rgba(201,169,110,.20)}

/* --- 2. Motivo da conexao ----------------------------------------- */
.integ-motivo{margin:5px 0 0;font-size:var(--t-micro);line-height:1.45;color:var(--erro);
  /* O motivo do provedor vem INTEIRO e costuma ser longo: sem quebra por
     palavra, uma URL de console estoura a caixa no celular. */
  overflow-wrap:anywhere}
.integ-motivo--calma{color:var(--tinta2)}
.integ-item--erro{border-left:3px solid var(--erro);padding-left:9px;margin-left:-12px;
  background:linear-gradient(90deg,rgba(161,48,36,.05),transparent 60%)}

/* --- 3. Grupo de campos com ajuda --------------------------------- */
.campo-grupo{margin-top:12px}
.campo-grupo+.campo-grupo{margin-top:14px}
.campo-grupo-t{display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta2)}
.campo-grupo-n{margin-top:6px}
.ncf-ajuda--peq{width:22px;height:22px;font-size:.72rem;border-width:1.2px}

/* O "?" no fim da linha do titulo de secao. O .nc-tit ja e flex com um
   ::after que estica e vira o fio, entao o botao cai sozinho na ponta. */
.nc-tit-ajuda{margin-left:2px}
.cfg-sec .nc-tit-ajuda{position:relative}

@media (max-width:640px){
  /* No celular o alvo de toque manda: 22px e menor que o minimo, e este "?"
     fica encostado num select. */
  .ncf-ajuda--peq{min-width:44px;min-height:44px;width:44px;height:44px;font-size:.9rem}
  .pront-sug{flex-direction:column;align-items:stretch}
  .pront-sug-b{width:100%}
  .pront-pct{font-size:1.35rem}
}

/* Respostas do formulário na LINHA da lista (02/09/2026, bill-078): e-mail e
   pergunta personalizada deixam de morar só na observação. */
.lr-campos{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:2px;min-width:0}
.lr-campo{font-size:var(--t-micro);color:var(--tinta2);overflow-wrap:anywhere;min-width:0}
.lr-campo b{font-weight:700;color:var(--tinta)}

/* E no MODAL, campo a campo: rótulo estreito à esquerda, valor editável. */
.ed-campos{display:flex;flex-direction:column;gap:6px}
.ed-campo-linha{display:grid;grid-template-columns:minmax(90px,34%) 1fr;align-items:center;gap:8px}
.ed-campo-r{font-size:var(--t-micro);color:var(--tinta2);overflow-wrap:anywhere;line-height:1.25}
@media (max-width:560px){ .ed-campo-linha{grid-template-columns:1fr} .ed-campo-r{margin-bottom:-2px} }

/* Registrar e Fechamento do dia em coluna única central (02/09/2026): cada
   módulo cuida de um assunto; a coluna estreita mantém o formulário inteiro ao
   alcance do polegar no celular e evita linhas de 1400px no desktop. */
.reg-solo{max-width:640px;margin:0 auto}

/* MENU DA PÍLULA DE STATUS (03/09/2026). A pílula é clicável; o menu nasce ao
   lado dela, um estado por linha com o ponto na cor do trilho. */
.tag-btn{cursor:pointer;border:1px solid transparent}
.tag-btn:hover{border-color:rgba(12,42,33,.25)}
.tag-btn:focus-visible{outline:2px solid var(--dourado);outline-offset:2px}
.st-menu{position:fixed;z-index:90;background:var(--branco);border:1px solid var(--linha);border-radius:12px;
  box-shadow:0 10px 28px rgba(12,42,33,.16);padding:6px;min-width:180px;max-width:min(92vw,260px)}
.st-menu-op{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
  border-radius:8px;padding:8px 10px;font-size:.85rem;color:var(--tinta);cursor:pointer}
.st-menu-op:hover{background:rgba(12,42,33,.06)}
.st-menu-op.on{font-weight:700;background:rgba(12,42,33,.05)}
.st-pon{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--linha)}
.st-pon-novo{background:var(--selo)}.st-pon-em_contato{background:#2e7a5f}
.st-pon-agendado{background:#3b6ea5}.st-pon-convertido{background:var(--dourado-d)}
.st-pon-sem_retorno{background:#a8752d}.st-pon-perdido{background:#a04434}
.st-menu-motivo{border-top:1px solid var(--linha);margin-top:6px;padding:8px 4px 4px}
.st-menu-motivo .chip-row{margin-top:6px}

/* Brilho de chegada do "Resolver" da prontidão (03/09/2026): meio segundo de
   dourado para o olho achar o campo depois da rolagem. */
.pront-flash{animation:pront-flash 1.5s ease-out}
@keyframes pront-flash{0%,60%{box-shadow:0 0 0 3px rgba(201,169,110,.55)}100%{box-shadow:0 0 0 0 rgba(201,169,110,0)}}
@media (prefers-reduced-motion:reduce){.pront-flash{animation:none;box-shadow:0 0 0 3px rgba(201,169,110,.55)}}

/* ============================================================================
   ABA AUTOMACAO DA CONFIGURACAO DO CLIENTE (04/09/2026, pedido do dono).

   O que ele viu, na ordem em que leu: tres blocos com o mesmo peso visual,
   explicacao colada aberta ao lado de um "?" que ja tinha a mesma explicacao,
   tres botoes de salvar em tres lugares diferentes, estados vazios ocupando
   uma caixa inteira para dizer que estao vazios, e cinco campos de uma regra
   unica lidos como cinco perguntas soltas numa coluna estreita, com a largura
   da direita sobrando.

   Nada aqui muda funcao nem endereco: e distribuicao, hierarquia e alvo de
   toque. As classes sao NOVAS de proposito (`cfg-cab`, `cfg-acoes`, `rl-forma`,
   `ac-ev-l`): renomear `.gest-config` ou `.linha-flex`, que vivem em dezenas de
   telas, seria refatoracao ampla para resolver um problema de uma aba.
   ========================================================================== */

/* Cabeca do cartao: titulo a esquerda, "?" e interruptor a direita, na MESMA
   linha e sem quebrar. Substitui o `.linha-flex` com estilo inline repetido
   em cada cartao, que dava um espacamento diferente por cartao. */
.cfg-cab{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-height:32px}
.cfg-cab>.ttl{margin-bottom:0;min-width:0;flex:1}
.cfg-cab-a{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:nowrap}

/* Subtitulo dentro do cartao ("O que ele recebe:"): degrau abaixo do titulo do
   cartao, e nao um segundo titulo do mesmo tamanho. */
.gest-config .cfg-sub-t{margin-top:14px;margin-bottom:6px}

/* Nota curta do cartao. `:empty` porque `#acDestino` nasce vazio e so recebe
   texto depois da resposta da API: sem isto ele reservava 6px de margem no
   meio do formulario o tempo todo. */
.cfg-nota{margin-top:8px}
.cfg-nota:empty{display:none;margin:0}

/* RODAPE DE ACAO, igual nos tres cartoes que salvam algo nesta aba: a nota do
   cartao (contador de caracteres, resumo dos 30 dias) a esquerda, o botao de
   salvar a direita, separados do corpo por um fio. Antes um cartao punha o
   botao em largura cheia, outro encostava no contador, e o resumo caia DEPOIS
   do botao, fora do campo de visao de quem tinha acabado de salvar. */
.cfg-acoes{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--linha-s)}
.cfg-acoes-n{margin-right:auto;min-width:0;font-size:var(--t-micro);color:var(--tinta2)}
.cfg-acoes-n:empty{margin-right:auto}
@media (max-width:539px){
  /* No celular o botao ocupa a linha: a acao principal do cartao nao disputa
     largura com uma nota em corpo 12. */
  .cfg-acoes{align-items:stretch}
  .cfg-acoes .btn{width:100%}
  .cfg-acoes-n{margin-right:0;width:100%}
}

/* A REGRA DE ALERTA E UMA FRASE: metrica, condicao, limite e janela se leem de
   ponta a ponta, com o botao no fim. Grid e nao flex porque as cinco colunas
   precisam de larguras PROPORCIONAIS entre si (a metrica e o rotulo mais
   longo, a janela e um numero de dois digitos): num flex com wrap elas
   quebravam em pontos diferentes conforme o texto do option selecionado. */
.rl-forma{display:grid;gap:10px;align-items:end;margin-top:12px;
  grid-template-columns:minmax(120px,1fr) minmax(160px,1.35fr) minmax(110px,.85fr) minmax(92px,.7fr) minmax(92px,.7fr) auto}
.rl-forma .campo{min-width:0}
.rl-acao{display:flex;align-items:flex-end}
.rl-acao .btn{width:100%;white-space:nowrap}
@media (max-width:1099px){
  /* Faixa larga demais para uma linha so e estreita demais para seis colunas:
     tres em cima, tres embaixo, e o botao fecha a linha. */
  .rl-forma{grid-template-columns:1fr 1fr 1fr}
  .rl-acao{grid-column:1 / -1}
}
@media (max-width:639px){
  /* Duas colunas ate 320px, com a METRICA ocupando a linha inteira: e o unico
     campo cujos rotulos sao longos ("Conversoes da plataforma por dia") e, em
     meia largura, o texto do option escolhido some no corte. Empilhar os cinco
     campos em coluna unica dobrava a altura do cartao no celular. */
  .rl-forma{grid-template-columns:1fr 1fr}
  .rl-forma .rl-c-metrica{grid-column:1 / -1}
}

/* Estado vazio EM LINHA: o mesmo texto do quadro tracejado, sem o quadro. O
   `.vazio` cheio e a resposta de uma TELA vazia; dentro de um cartao, ao lado
   do formulario que resolve a ausencia, ele so empurra a acao para baixo. */
.vazio--linha{text-align:left;padding:8px 0 2px;background:none;border:0;border-radius:0;
  margin:0;max-width:none}
.vazio--linha strong{display:inline;font-size:.88rem;margin:0}
.vazio--linha strong::after{content:' '}

/* "O que ele recebe": cada aviso e uma LINHA de 44px em ponteiro grosso, com o
   nome em cima e a descricao embaixo. A caixinha media 18x18 e a linha 42px:
   os dois abaixo do minimo, e a descricao emendada no nome fazia tres opcoes
   parecerem tres paragrafos de texto corrido. */
.ac-lista{display:flex;flex-direction:column}
.ac-ev-l{display:flex;gap:10px;align-items:flex-start;padding:9px 0;min-height:44px;cursor:pointer;
  border-bottom:1px solid var(--linha-s)}
.ac-lista>.ac-ev-l:last-child{border-bottom:none}
/* A CAIXA NAO MUDA DE TAMANHO: a folha ja decidiu um tamanho so para toda
   caixa de marcar do app (18x18, linha ~139) e quem carrega o alvo de toque e
   o ROTULO, por `label:has(>input[type=checkbox])`, tambem ja existente. Aqui
   so entra o alinhamento com a primeira linha do texto. */
.ac-ev{margin:1px 0 0;cursor:pointer}
.ac-ev-t{min-width:0;display:flex;flex-direction:column;gap:1px;font-size:var(--t-nota);color:var(--tinta)}
.ac-ev-t b{font-weight:700}
.ac-ev-d{color:var(--tinta2);font-size:var(--t-micro)}
@media (any-pointer: coarse){
  /* Mesma folga de 46px contra o subpixel usada no resto do arquivo. */
  .ac-ev-l{min-height:46px}
}

/* Botao que se le como link: usado na nota do Ted para levar a aba Conexoes.
   E um <button> e nao um <a> porque nao troca de endereco: troca de aba. */
.lnk{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--dourado-tinta);
  font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lnk:hover{color:var(--verde2)}
.lnk:focus-visible{outline:2px solid var(--dourado);outline-offset:2px;border-radius:3px}
@media (any-pointer: coarse){
  /* Com dedo, o alvo precisa dos 44px de altura. O padding cresce e a margem
     negativa devolve o espaco, entao a linha de texto nao se mexe: mesmo
     truque de .cli-nome-acao e do X do modal, mais acima nesta folha. */
  .lnk{display:inline-flex;align-items:center;min-height:46px;padding:12px 0;margin:-12px 0}
}

/* ============================================================================
   `.it-sub` FORA DE `.item` NUNCA TEVE ESTILO (04/09/2026).

   A folha so declarava `.item .it-sub` (linha ~377). O app usa a classe em 94
   lugares e apenas dois deles ficam dentro de um `.item`: nos outros 92 a nota
   secundaria saia com o tamanho e a tinta do texto principal. Medido na aba
   Automacao da Configuracao: as 24 notas da tela em 16px e #243029, ou seja,
   identicas ao conteudo que elas comentam.

   E dai que vem a leitura de "sem hierarquia" e de "paragrafo explicativo
   comendo espaco": nao era so o texto estar aberto, era ele estar do mesmo
   TAMANHO da coisa explicada. Nota que pesa igual ao conteudo nao e nota.

   So tamanho, tinta e entrelinha. Margem NAO entra: o reset da folha zera
   margem de tudo (`*{margin:0}`) e cada uso ja declara a sua; mexer aqui
   moveria 92 pontos de uma vez. `.item .it-sub` continua mandando dentro do
   cartao de lead, onde a medida e menor de proposito.
   ========================================================================== */
.it-sub{font-size:var(--t-nota);line-height:1.45;color:var(--tinta2)}
.it-sub b,.it-sub strong{color:var(--tinta)}

/* ============================================================================
   DIVIDA DE ALVO DE TOQUE ACHADA NA VARREDURA DE 04/09/2026.

   A rodada de 28/08 zerou a lista, mas ela media so os `alvos` DECLARADOS das
   nove rotas do portao, e a Configuracao do cliente nao e uma delas. Medindo
   TODO controle clicavel das quatro abas dela, em ponteiro grosso, sobraram
   sete abaixo dos 44px. Todos ficam aqui, no mesmo bloco por apontador do
   resto da folha, com a folga de 46px contra o subpixel.

   Nenhum deles muda de tamanho no desktop com mouse: quem decide e o dedo.
   ========================================================================== */
@media (any-pointer: coarse){
  /* Campo pequeno da barra de filtro e da busca de grupo do Ted: 42px. */
  .inp-peq{min-height:46px}
  /* Seletor de cor das listas de registro e da marca do relatorio: 42 e 38px.
     O `#dcCor` carrega `height:38px` INLINE (app.js), e estilo inline vence
     folha: por isso a regra dele precisa do `!important`, que e a excecao
     desta folha e esta anotada aqui para nao virar habito. */
  .inp-cor,.add-linha .inp-cor{height:46px}
  input[type=color].inp{min-height:46px;height:46px !important}
  /* O "+" que acrescenta origem, tratamento e motivo: 42x42. */
  .btn-add{width:46px;height:46px}
  /* Os acordeoes de ajuda ("Como instalar as tags no GTM", "Como ligar o site
     a esta chave") e o resumo da prontidao: 23 a 33px de altura, e sao o unico
     jeito de abrir aquele conteudo. Padding e NAO `display:flex`: flex num
     <summary> apaga o ::marker (a setinha) em Chrome, e o acordeao perde a
     unica pista visual de que abre. */
  summary.it-sub,summary.ttl,.pront-sum{min-height:46px;padding-top:12px;padding-bottom:12px}
}

/* Rotulo de caixa de marcar que NAO e filho direto do label estilizado pelo
   `:has()` da linha ~128, ou que precisa do texto em bloco proprio para
   quebrar em duas linhas sem desalinhar a caixa. So layout: o tamanho da caixa
   e o alvo de toque continuam vindo das regras gerais da folha. */
.lbl-chk{display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer}
@media (any-pointer: coarse){ .lbl-chk{min-height:46px} }

/* A linha de ajuda das abas do Financeiro: assunto e o "?", no lugar dos tres
   paragrafos que ficavam abertos. Mesmo cartao verde-claro de antes, so que
   com uma linha de altura. Ver `linhaAjuda()` em app.js. (04/09/2026) */
.fin-ajuda--linha{display:flex;align-items:center;gap:10px;padding:8px 13px;
  font-family:var(--f-mono);font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta2);font-weight:700}
.fin-ajuda--linha>span{min-width:0}

/* Campo da BARRA DE FILTRO (`.barra-fer-c`) com dedo: nasce com 40px, medida
   pensada para caber mais filtro numa fita estreita. Aparece na Trilha da
   Central de Midia, na Carteira e na Central de Midia inteira, e reprovava os
   44px nos cinco tamanhos com ponteiro grosso. (04/09/2026) */
@media (any-pointer: coarse){
  .barra-fer-c>select,.barra-fer-c>input{min-height:46px}
}

/* `.btn-peq` nasce com min-height:44px (linha ~148) e o portao reprovou:
   "mede 340x44px E o toque a 21px do centro nao chega nele". Com 44 cravados,
   o ponto que a WCAG manda testar cai exatamente na borda e o subpixel decide.
   E a mesma licao que `.fer-btn--peq` e `.web-instalar` ja carregam nas suas
   folhas: pedir o minimo exato deixa o resultado no arredondamento. Dois
   pixels de folga, so no dedo, e nada muda no que o olho ve. (04/09/2026) */
@media (any-pointer: coarse){
  .btn-peq{min-height:46px}
}