/* ══════════════════════════════════════════════════════════════════════════════════════════
   RADAR v3 — folha única.

   🔴 OS TOKENS SÃO OS DA V2, de propósito. O cliente de hoje já usa a V2 todos os dias: mesma
   paleta, mesma escala de tipo, mesmo trilho, mesmo tema claro. Inventar uma identidade nova
   aqui obrigaria a agência a reaprender o produto no dia da migração — e a V2 já resolveu
   coisas que custaram caro, como a escala de tipo fluida (tamanho fixo cortava "R$ 1.774,00"
   ao meio no iPhone) e o tema claro que não é remendo do escuro.

   A ESTÉTICA DE LISTA vem do Backstage do TikTok, que é a outra tela onde a equipe passa o dia:
   ação escrita em cor, pílula translúcida, linha alta com avatar.

   A cor da marca (--acento) é sobrescrita pela identidade da agência em tempo de execução, então
   nada aqui pode ter azul cravado.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* a altura de todo botão do sistema — ver o bloco de botões */
  --alt-bt:36px;
  color-scheme: dark;

  /* superfícies (V2) */
  --fundo:#0b0f16; --fundo-2:#080b11;
  --superficie:#121822; --superficie-2:#18202c; --superficie-3:#1e2836;
  --linha:#232d3b; --linha-forte:#334052;

  /* texto (V2) */
  --texto:#e8edf4; --texto-2:#9aa7b8; --texto-3:#6b7a8d;

  /* marca e estados (V2) */
  --marca:#2e9bff; --marca-forte:#56aeff; --marca-fraca:rgba(46,155,255,.14);
  --sinal:#22d3a5; --atencao:#f2b33d; --falha:#ff6b6b; --vivo:#ff3b5c;

  /* tipografia fluida (V2): piso protege o celular, teto evita texto gigante no monitor */
  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* 🔴 ATRÁS DE UMA VARIÁVEL, e não escrita no seletor. A Orbitron estava direto em
     `.anel .centro b` e no número grande, ANTES do var() — então a identidade da agência
     trocava `--fonte-num` e nada mudava na tela. É a fonte que mais destoa quando o criador
     compara o app com o site da agência. */
  --fonte-destaque: "Orbitron", var(--fonte-num), var(--fonte);
  --t-mini:   clamp(10px,   0.56rem + 0.18vw, 11.5px);
  --t-p:      clamp(12px,   0.68rem + 0.20vw, 13.5px);
  --t-tabela: clamp(13px,   0.74rem + 0.22vw, 14.5px);
  --t-base:   clamp(14.5px, 0.86rem + 0.22vw, 16px);
  --t-m:      clamp(15px,   0.88rem + 0.26vw, 17px);
  --t-g:      clamp(16.5px, 0.92rem + 0.50vw, 20px);
  --t-gg:     clamp(19px,   1.00rem + 0.90vw, 26px);

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --raio:10px; --raio-g:14px; --raio-p:7px;
  --trilho:240px; --trilho-min:76px;
  --sombra-g:0 12px 32px rgba(0,0,0,.45);
  --foco:0 0 0 3px rgba(46,155,255,.45);

  /* Apelidos usados pelas telas. `--acento` é o que a identidade da agência sobrescreve. */
  --acento:var(--marca); --acento2:var(--marca-forte); --acento-fraco:var(--marca-fraca);
  --carta:var(--superficie); --carta2:var(--superficie-2);
  --fraco:var(--texto-2); --apagado:var(--texto-3);
  --verde:var(--sinal); --amarelo:var(--atencao); --vermelho:var(--falha); --roxo:#a855f7;
  --topo:var(--fundo-2);
}

/* ── Tema claro: completo, não um remendo do escuro (V2) ───────────────────────────────── */
:root[data-tema="claro"] {
  color-scheme: light;
  --fundo:#f4f6fa; --fundo-2:#eef1f7;
  --superficie:#ffffff; --superficie-2:#f7f9fc; --superficie-3:#eef2f8;
  --linha:#dfe5ee; --linha-forte:#c4cddb;
  --texto:#101828; --texto-2:#51637a; --texto-3:#64748b;
  --marca:#0a7ff0; --marca-forte:#0063cc; --marca-fraca:rgba(10,127,240,.10);
  --sinal:#0a7d5c; --atencao:#b06d05; --falha:#d92d20; --vivo:#e11d48;
  --sombra-g:0 12px 32px rgba(16,24,40,.12);
  --foco:0 0 0 3px rgba(10,127,240,.28);
}

/* Quem prefere menos movimento não recebe transição (V2). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--fundo); color:var(--texto);
       font:var(--t-base)/1.55 var(--fonte); -webkit-font-smoothing:antialiased; }
:focus-visible { outline:0; box-shadow:var(--foco); border-radius:8px; }
a { color:var(--acento); text-decoration:none; }
a:hover { filter:brightness(1.15); }

/* ── Topo ──────────────────────────────────────────────────────────────────────────────── */
.topo { display:flex; align-items:center; gap:14px; height:58px; padding:0 18px;
        border-bottom:1px solid var(--linha); position:sticky; top:0; background:var(--topo); z-index:30; }
.topo .marca { display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.3px; min-width:0; }

/* ── 🏷️ A MARCA DA AGÊNCIA EM PRIMEIRO, NO APP DO CRIADOR ─────────────────────
   Ele não comprou o Radar: é agenciado pela agência, chegou pelo site dela e é a ela que
   presta contas. A marca dela vem em tamanho de marca; a nossa fica como assinatura de quem
   faz a plataforma — menor, mais apagada, e com um "por" no meio para ninguém achar que é
   um segundo cliente. */
.topo .marca .marca-agencia { height:34px; width:auto; max-width:190px; object-fit:contain; }
.topo .marca .marca-nome-agencia {
  font-family:var(--fonte-destaque); font-weight:800; font-size:16px;
  letter-spacing:-.02em; color:var(--texto); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.topo .marca .marca-por {
  font-size:10.5px; color:var(--texto-3, var(--fraco)); letter-spacing:.04em;
  text-transform:lowercase; margin:0 1px 0 3px; }
.topo .marca .marca-radar-mini { display:inline-flex; align-items:center; opacity:.72; }
.topo .marca .marca-radar-mini img { height:15px; width:auto; }
.topo .marca .marca-radar-mini:hover { opacity:1; }
@media (max-width:560px) {
  .topo .marca .marca-agencia { height:27px; max-width:130px; }
  /* No telefone a barra é estreita: a nossa assinatura sai e sobra a dela, que é a que
     precisa estar ali. O nosso nome continua no rodapé do app. */
  .topo .marca .marca-por, .topo .marca .marca-radar-mini { display:none; }
  /* O nome sai no telefone: com ele, a barra de 390px não cabe os botões de tema, suporte e
     sair — e a arte sozinha já identifica, porque ele tocou no ícone do app dela. */
  .topo .marca .marca-nome-agencia { display:none; }
}
/* 🔴 `object-fit: contain` E NADA DE max-width BRIGANDO COM A ALTURA. A marca é 1200×181 (6,6:1);
   com altura fixa de 26 px ela pede 172 px de largura, e um `max-width` menor que isso faz o
   navegador ESPREMER a imagem — o símbolo do radar fica achatado e parece cortado. O teto de
   largura agora é folgado, e o `contain` garante que, em qualquer caixa, a marca aparece
   inteira em vez de ser recortada. */
.topo .marca img { height:30px; width:auto; max-width:230px; object-fit:contain; display:block; }
.topo .marca .txt span { color:var(--acento); }
.selo { font-size:10.5px; color:var(--amarelo); border:1px solid rgba(234,179,8,.5);
        padding:2px 8px; border-radius:99px; letter-spacing:.3px; }
.topo .acoes { margin-left:auto; display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.topo .acoes .quem { color:var(--fraco); font-size:13px; margin-right:6px; }
.icone-botao { width:34px; height:34px; display:grid; place-items:center; border-radius:9px;
               background:transparent; border:0; color:var(--fraco); cursor:pointer; padding:0; }
.icone-botao:hover { background:var(--carta); color:var(--texto); }
.icone-botao svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8;
                   stroke-linecap:round; stroke-linejoin:round; }
.avatar-conta { width:32px; height:32px; border-radius:99px; background:var(--acento-fraco);
                color:var(--acento); display:grid; place-items:center; font-size:13px; font-weight:700; }

/* ── Corpo e menu ──────────────────────────────────────────────────────────────────────── */
.corpo { display:grid; grid-template-columns:var(--trilho) minmax(0,1fr); min-height:calc(100vh - 58px); }
nav.lado { border-right:1px solid var(--linha); background:var(--fundo-2); padding:14px 12px; position:sticky; top:58px;
           align-self:start; height:calc(100vh - 58px); overflow-y:auto; background:var(--topo); }
nav.lado::-webkit-scrollbar { width:8px; }
nav.lado::-webkit-scrollbar-thumb { background:#1d242b; border-radius:99px; }
nav.lado .grupo { font-size:10.5px; color:var(--apagado); text-transform:uppercase;
                  letter-spacing:.8px; margin:18px 10px 6px; font-weight:600; }
nav.lado .grupo:first-child { margin-top:2px; }
nav.lado a { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px;
             color:var(--texto); font-size:14px; margin-bottom:1px; transition:background .12s; }
nav.lado a:hover { background:var(--carta); }
nav.lado a.ativo { background:var(--acento-fraco); color:var(--acento); font-weight:600; }
nav.lado a svg { width:17px; height:17px; flex:0 0 17px; stroke:currentColor; fill:none;
                 stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
nav.lado a.ativo svg { opacity:1; }
/* 🔴 `min-width:0` NÃO É ENFEITE. Coluna de grid tem largura mínima "auto", então uma tabela
   larga dentro dela ESTICA a coluna e a página inteira ganha rolagem horizontal — medido: 878 px
   de conteúdo numa tela de 390. Com min-width:0 a coluna respeita o espaço e a tabela rola
   sozinha, que é o comportamento certo. */
main { padding:26px 28px 60px; max-width:1240px; width:100%; min-width:0; }

/* ── Cabeçalho de tela ─────────────────────────────────────────────────────────────────── */
h1.tela { font-size:var(--t-gg); margin:0 0 3px; letter-spacing:-.5px; font-weight:600; }
p.sub { color:var(--fraco); font-size:var(--t-p); margin:0 0 22px; max-width:760px; }
h2 { font-size:var(--t-mini); margin:30px 0 12px; color:var(--apagado); font-weight:600;
     text-transform:uppercase; letter-spacing:.8px; }

/* ── Cartões de número ─────────────────────────────────────────────────────────────────── */
.cartas { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.carta { background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio); padding:16px 18px; }
.carta .n { font-size:clamp(20px,1.1rem+1vw,28px); font-family:var(--fonte-num); font-weight:650; letter-spacing:-1px; line-height:1.2; }
.carta .r { color:var(--fraco); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; margin-top:3px; }
.carta .p { color:var(--fraco); font-size:12px; margin-top:7px; }

/* ── Abas ──────────────────────────────────────────────────────────────────────────────── */
.abas { display:flex; gap:26px; border-bottom:1px solid var(--linha); margin-bottom:18px; overflow-x:auto; }
.abas a, .abas button { background:0; border:0; padding:11px 0 13px; color:var(--fraco); font-size:14.5px;
                        cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent;
                        margin-bottom:-1px; font-family:inherit; width:auto; font-weight:500; }
.abas a.ativa, .abas button.ativa { color:var(--texto); border-bottom-color:var(--acento); font-weight:600; }

/* ── Barra de filtros ──────────────────────────────────────────────────────────────────── */
.filtros { display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.filtros input[type=search], .filtros input[type=text] { flex:0 1 280px; min-width:180px; }
.filtros select { width:auto; min-width:150px; }
.filtros .conta { color:var(--fraco); font-size:13px; margin-left:auto; white-space:nowrap; }

/* ── Tabela ────────────────────────────────────────────────────────────────────────────── */
.quadro { background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; }
table { width:100%; border-collapse:collapse; background:var(--carta);
        border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; }
th, td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--linha); font-size:var(--t-tabela); }
th { color:var(--apagado); font-weight:600; font-size:11px; text-transform:uppercase;
     letter-spacing:.6px; background:color-mix(in srgb, var(--texto) 3%, transparent); }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--carta2); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
/* A pessoa na linha: avatar + @ em destaque e o resto pequeno embaixo, como no Backstage. */
.pessoa { display:flex; align-items:center; gap:11px; }
.pessoa .av { width:34px; height:34px; border-radius:99px; flex:0 0 34px; object-fit:cover;
              background:linear-gradient(135deg,var(--acento),var(--acento2)); color:#fff;
              display:grid; place-items:center; font-size:13px; font-weight:700; }
.pessoa b { font-weight:600; display:block; line-height:1.25; }
.pessoa small { color:var(--fraco); font-size:11.5px; }

/* ── Pílulas ───────────────────────────────────────────────────────────────────────────── */
.pilula { padding:3px 9px; border-radius:7px; font-size:12px; font-weight:600; white-space:nowrap;
          display:inline-block; }
.ok { background:rgba(34,197,94,.13); color:var(--verde); }
.fome,.ruim { background:rgba(239,68,68,.13); color:var(--vermelho); }
.aviso { background:rgba(234,179,8,.13); color:var(--amarelo); }
.neutro { background:rgba(139,152,165,.12); color:var(--fraco); }
.info { background:var(--acento-fraco); color:var(--acento); }

/* ── Formulário ────────────────────────────────────────────────────────────────────────── */
label { display:block; font-size:12px; color:var(--fraco); margin:14px 0 5px; }
input,select,textarea { width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--linha);
        background:#0e1114; color:var(--texto); font-size:14px; font-family:inherit; transition:border-color .12s; }
input:focus,select:focus,textarea:focus { outline:0; border-color:var(--acento); }
input[type=color] { padding:4px; height:40px; cursor:pointer; }
/* ═════════════════════════════════════════════════════════════════════════════════════
   📏 UMA ALTURA SÓ PARA TODO BOTÃO DO SISTEMA (07/10/2026 — *"em todo o sistema, tudo do
   mesmo tamanho, alinhados"*)

   Medido antes: **quatro alturas** convivendo na mesma tela — 28 px (ação em tabela), 32 px
   (ação fora de tabela), 34 px (botão padrão) e 36 px (botão com borda, que somava os 2 px
   dela). Ninguém desenhou isso: cada regra nasceu numa tela e o conjunto nunca foi olhado
   junto.

   Agora a altura é uma só, vinda de `--alt-bt`, e com `box-sizing:border-box` — sem isso a
   borda do botão "fraco" volta a somar 2 px e ele fica mais alto que o vizinho. O padding
   vertical some: quem define a altura é a altura, e o texto se centra por `align-items`.
   No celular a mesma regra vale com um número maior, porque o alvo é o dedo.
   ═════════════════════════════════════════════════════════════════════════════════════ */
button, .bt, .btn, a.bt, a.btn, button.acao, a.acao {
  box-sizing:border-box; min-height:var(--alt-bt); height:var(--alt-bt);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:0 16px; line-height:1; white-space:nowrap;
}
/* 🔴 NEM TODO `<button>` É UM BOTÃO (07/10/2026). Várias telas usam `<button>` para o que
   é, na verdade, um CARTÃO clicável, uma aba, um ícone redondo ou uma pílula de filtro — a
   escolha certa, porque esses também se clicam e precisam de teclado. Mas eles têm altura
   própria e texto que QUEBRA em várias linhas.

   A altura única acima atingiu esses também e quebrou a tela de Primeiros passos no celular:
   o cartão do passo ficou travado em 42 px com `nowrap`, e o título e o "abrir" saíram pela
   borda. Aqui eles voltam a mandar na própria altura.

   🔑 O critério: altura única é para quem o usuário lê como BOTÃO. Cartão, aba, ícone e
   filtro são outra coisa, e cada um já tem o seu tamanho. */
button.pp-cab, button.icone-botao, button.modal-x, .abas button, button.filtro,
button.curso-card, button.virar, button.sug, button.bt-saque, button.atalho {
  height:auto; min-height:0; white-space:normal;
}

button { padding:0 16px; border:0; border-radius:99px; background:var(--acento); color:#fff;
         font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; transition:filter .12s; }
button:hover { filter:brightness(1.12); }
button.fraco { background:transparent; border:1px solid var(--linha); color:var(--texto); }
button.fraco:hover { background:var(--carta2); }
button.perigo { background:rgba(239,68,68,.14); color:var(--vermelho); }
/* `mini` muda a letra e o respiro, nunca a altura: altura diferente é o que desalinha. */
button.mini { padding:0 12px; font-size:12.5px; }
/* ═════════════════════════════════════════════════════════════════════════════════════
   🔘 UM BOTÃO SÓ, EM TODO O SISTEMA (07/10/2026 — *"padronize em todo o sistema os botões
   azuis iguais. troque todos os links de texto por botões"*)

   O que o dono viu na Prospecção: "WhatsApp" como texto azul e "Editar" como pílula azul, lado
   a lado na mesma célula. A causa não era gosto — era vocabulário: aquela tela escreveu
   `class="bt bt-p"`, e **`.bt` e `.bt-p` nunca existiram neste CSS**. O `<button>` caiu no
   estilo base (pílula azul) e o `<a>` ficou sem estilo nenhum, virando link.

   Agora a ação tem UMA forma: pílula, mesma altura, mesmo raio, mesmo peso — seja `<button>`
   ou `<a>`, em tabela ou fora dela. Muda só a INTENÇÃO:
     • normal   → azul cheio (o da captura);
     • `.fraco`/`.secundario` → mesma forma, sem peso de cor, para o "cancelar" do lado;
     • `.perigo` → vermelho.

   🔴 `excluir` NÃO vira azul. Quatro botões azuis idênticos numa linha ("entrar · ajustar ·
   cadastro · excluir") fazem o dedo errar, e o que se perde nesse erro é uma agência inteira
   com 44 tabelas penduradas. Forma igual, cor diferente: é a mesma regra do botão de saque.
   ═════════════════════════════════════════════════════════════════════════════════════ */
button.acao, a.acao, .bt, a.bt, .btn, a.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--acento); color:#fff; border:0; border-radius:99px;
  font-family:inherit; font-weight:600; font-size:13px; line-height:1;
  padding:0 14px; width:auto; cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:filter .12s;
}
button.acao:hover, a.acao:hover, .bt:hover, a.bt:hover, .btn:hover, a.btn:hover {
  filter:brightness(1.12); background:var(--acento); text-decoration:none;
}
/* Mesma forma, outra intenção. */
button.acao.fraco, a.acao.fraco, .bt.fraco, .bt-s, a.bt-s,
button.acao.secundario, .bt.secundario {
  background:var(--acento-fraco); color:var(--acento);
}
button.acao.perigo, a.acao.perigo, .bt.perigo {
  background:rgba(239,68,68,.14); color:var(--vermelho);
}
button.acao.perigo:hover, a.acao.perigo:hover, .bt.perigo:hover {
  background:rgba(239,68,68,.22); color:var(--vermelho);
}
/* 🗑️ O que apaga de verdade nunca é azul — ver o bloco acima. */
button.acao.excluir-ag, a.acao.excluir-ag, button.acao.excluir, a.acao.excluir {
  background:rgba(239,68,68,.14); color:var(--vermelho);
}
button.acao.excluir-ag:hover, a.acao.excluir-ag:hover,
button.acao.excluir:hover, a.acao.excluir:hover { background:rgba(239,68,68,.22); }
/* Ações em linha de tabela respiram: sem isto elas se encostam. */
td .acao + .acao, td .bt + .bt, td .acao + .bt, td .bt + .acao { margin-left:6px; }
/* `.bt-p` era "primário" no vocabulário da tela de Prospecção; aqui o primário já é o
   padrão, então a classe existe só para a tela não ficar apontando para o vazio. */
.bt-p, a.bt-p { background:var(--acento); color:#fff; }

/* 🔴 DUAS COISAS QUE A FORMA NOVA QUEBROU, E O PORQUÊ (medido no Chromium, 07/10/2026)

   1. O "ver tudo" VOLTOU A APARECER no computador. Ele é um `button.acao`, e a regra que o
      esconde (`.ver-tudo { display:none }`) tem especificidade MENOR que `button.acao` — vir
      depois no arquivo não basta, especificidade ganha de ordem. Volta aqui com o mesmo peso.
   2. A coluna de ações de Agências (entrar · ajustar · cadastro · excluir) passou a ESTOURAR:
      quatro pílulas ocupam muito mais que quatro links. Em tabela a ação fica um ponto menor e
      a célula deixa quebrar linha — melhor duas linhas de botão do que um "cad…" cortado. */
@media (min-width:861px) {
  button.acao.ver-tudo, a.acao.ver-tudo, .acao.ver-tudo { display:none; }
}
td .acao, td .bt, td .btn { font-size:12.5px; padding:0 10px;
  overflow:hidden; text-overflow:ellipsis; display:inline-flex; }
/* O ícone não encolhe nem some quando o texto aperta. */
td .acao svg, td .bt svg, .cel-acoes svg { flex:0 0 auto; }
td[data-papel="acoes"], td:last-child { white-space:normal; }
td .acao + .acao, td .bt + .bt, td .acao + .bt, td .bt + .acao { margin-left:0; }
td[data-papel="acoes"], td:last-child {
  display:table-cell;
}
/* O espaço entre as ações vem de um `gap` real, que respeita a quebra de linha. */
td[data-papel="acoes"] > *, td:last-child > * { margin:2px 3px 2px 0; }
/* ═════════════════════════════════════════════════════════════════════════════════════
   📐 O ENVELOPE DAS AÇÕES É UMA GRADE (07/10/2026 — *"coloque todos os botões do mesmo
   tamanho"*)

   Com `flex`, cada botão ficava do tamanho do próprio texto: na Agenda de vencimentos,
   "Pix" com 74 px ao lado de "WhatsApp" com 127 px, em duas fileiras desencontradas. Botão
   é alvo de clique, e alvo de clique que muda de tamanho a cada palavra faz a coluna inteira
   parecer desalinhada mesmo quando está alinhada.

   Grade de **coluna fixa**: todos nascem com a mesma largura, as fileiras casam uma com a
   outra, e quem tem uma ação só não ganha um botão esticado (que é o que `flex:1` faria).
   O envelope encolhe até o conteúdo (`width:max-content`), então a coluna da tabela continua
   pedindo só o que precisa.
   ═════════════════════════════════════════════════════════════════════════════════════ */
.cel-acoes {
  display:grid; grid-template-columns:repeat(auto-fill, 112px);
  gap:6px; justify-content:start; align-items:center;
  width:max-content; max-width:230px; margin:0;
}
.cel-acoes > * { width:100%; min-width:0; }
td.num .cel-acoes { justify-content:end; margin-left:auto; }
@media (max-width:860px) {
  /* ════════════════════════════════════════════════════════════════════════════════
     📱 LADO A LADO, NÃO EMPILHADOS (07/10/2026 — *"no mobile os botões devem ser lado a
     lado ocupando menos espaço na tela"*)

     A coluna mínima era 132 px: em 390 px cabiam duas, e três ações viravam DUAS fileiras de
     botão gordo — cada cartão gastando ~92 px de altura só com ação, e a lista ficando longa
     de rolar. Com a coluna em 92 px cabem três, e o caso comum (editar · excluir · ver tudo)
     fecha numa fileira só.

     🔴 A ALTURA NÃO ENCOLHE junto. Economia de espaço no telefone se faz tirando FILEIRA,
     nunca diminuindo o alvo do dedo: botão baixo demais é toque errado, e aqui um toque
     errado apaga agência. Largura menor, altura intacta.
     ════════════════════════════════════════════════════════════════════════════════ */
  .cel-acoes {
    grid-template-columns:repeat(auto-fit, minmax(88px, 1fr));
    width:100%; max-width:none; gap:6px;
  }
  /* Texto um ponto menor para caber na coluna estreita sem reticências. */
  table.tbl td[data-papel="acoes"] button,
  table.tbl td[data-papel="acoes"] .acao,
  table.tbl td[data-papel="acoes"] .bt,
  table.tbl td[data-papel="acoes"] .btn,
  table.tbl td[data-papel="acoes"] .ver-tudo { padding:0 8px; font-size:13px; }
}
.linha { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.linha > * { flex:1; min-width:120px; }
.linha button { flex:0 0 auto; }
.erro { color:var(--vermelho); font-size:13px; margin-top:10px; min-height:18px; }
.caixa { background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio); padding:18px; }
code.chave { display:block; background:#0e1114; border:1px solid var(--linha); border-radius:9px;
             padding:11px; font-size:13px; word-break:break-all; margin-top:8px; }

/* ── Estado vazio que ensina o próximo passo ───────────────────────────────────────────── */
.vazio { color:var(--fraco); font-size:13.5px; padding:16px; }
.nada { background:var(--carta); border:1px dashed var(--linha); border-radius:var(--raio);
        padding:34px 22px; text-align:center; }
.nada b { display:block; font-size:15px; margin-bottom:5px; font-weight:600; }
.nada span { color:var(--fraco); font-size:13.5px; }
.nada .acoes { margin-top:16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ── Entrar ────────────────────────────────────────────────────────────────────────────── */
.tela-entrar { min-height:100vh; display:grid; place-items:center; padding:20px;
               background:radial-gradient(1000px 500px at 50% -10%, rgba(47,143,255,.10), transparent 70%); }
form.entrar { max-width:370px; width:100%; background:var(--carta); border:1px solid var(--linha);
              border-radius:16px; padding:30px 28px; }
form.entrar .marca { display:flex; justify-content:center; margin-bottom:6px; }
form.entrar .marca img { height:38px; width:auto; max-width:100%; object-fit:contain; }
form.entrar p { color:var(--fraco); font-size:13px; margin:0 0 20px; text-align:center; }
/* A porta de uma agência: a marca dela no lugar da nossa, e uma linha dizendo de quem é a
   casa. Sem essa linha, o criador vê um logo e não sabe se é o login certo. */
form.entrar .marca .marca-nome { font-weight:800; font-size:20px; letter-spacing:-.02em; }
form.entrar p.porta-de { margin:2px 0 18px; font-size:13.5px; }
form.entrar p.porta-de b { color:var(--tinta); }
form.entrar button { width:100%; margin-top:20px; padding:12px; }

/* ── Kanban ────────────────────────────────────────────────────────────────────────────── */
.kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:14px; }
.coluna { flex:0 0 250px; background:var(--carta); border:1px solid var(--linha);
          border-radius:var(--raio); padding:11px; }
.coluna h3 { font-size:11.5px; margin:0 0 11px; color:var(--fraco); text-transform:uppercase;
             letter-spacing:.6px; display:flex; justify-content:space-between; }
.cartao { background:var(--carta2); border:1px solid var(--linha); border-radius:10px; padding:11px;
          margin-bottom:8px; cursor:grab; font-size:13px; }
.cartao:active { cursor:grabbing; }
.cartao .meta { color:var(--fraco); font-size:11px; margin-top:5px; display:flex; gap:8px; }
.coluna.alvo { outline:2px dashed var(--acento); outline-offset:-4px; }

/* ── Progresso ─────────────────────────────────────────────────────────────────────────── */
.barra { height:5px; background:#0e1114; border-radius:99px; overflow:hidden; margin-top:7px; }
.barra i { display:block; height:100%; background:var(--acento); border-radius:99px; }
.barra i.ok { background:var(--verde); }
.barra i.ruim { background:var(--vermelho); }

/* ── Gráfico ───────────────────────────────────────────────────────────────────────────── */
.grafico { width:100%; height:170px; }
.grafico rect { fill:var(--acento); opacity:.85; }
.grafico rect:hover { opacity:1; }
.grafico text { fill:var(--apagado); font-size:9px; }

/* ── Planos ────────────────────────────────────────────────────────────────────────────── */
.planos { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:14px; align-items:start; }
.plano { background:var(--carta); border:1px solid var(--linha); border-radius:16px; padding:22px; position:relative; }
.plano.atual { border-color:var(--acento); box-shadow:0 0 0 1px var(--acento) inset; }
.plano h3 { margin:0 0 4px; font-size:17px; }
.plano .preco { font-size:27px; font-weight:700; letter-spacing:-1px; margin-bottom:16px; }
.plano .preco span { font-size:13px; font-weight:400; color:var(--fraco); letter-spacing:0; }
.plano .itens { list-style:none; padding:0; margin:0 0 20px; font-size:13.5px; }
.plano .itens li { padding:6px 0 6px 21px; position:relative; border-bottom:1px solid color-mix(in srgb, var(--texto) 8%, transparent); }
.plano .itens li::before { content:"✓"; position:absolute; left:0; color:var(--verde); font-weight:700; }
.plano .itens li.nao { color:var(--apagado); }
.plano .itens li.nao::before { content:"—"; color:var(--apagado); }
.plano button { width:100%; }
.plano button:disabled { opacity:.55; cursor:default; }
.selo-plano { position:absolute; top:-10px; right:16px; background:var(--acento); color:#fff;
              font-size:10.5px; font-weight:700; padding:3px 11px; border-radius:99px; }

/* ── Identidade ────────────────────────────────────────────────────────────────────────── */
.amostra-marca { display:flex; align-items:center; gap:14px; background:var(--topo);
                 border:1px solid var(--linha); border-radius:var(--raio); padding:16px; margin-top:10px; }
.amostra-marca img { height:30px; max-width:200px; }
.cores { display:flex; gap:10px; flex-wrap:wrap; }
.cores label { margin:0; }
.cores > div { flex:0 0 130px; }

/* ── Modal ─────────────────────────────────────────────────────────────────────────────── */
.fundo-modal { position:fixed; inset:0; background:rgba(0,0,0,.66); display:flex; align-items:center;
               justify-content:center; padding:20px; z-index:60; backdrop-filter:blur(2px); }
.modal { background:var(--carta); border:1px solid var(--linha); border-radius:16px; padding:22px;
         max-width:520px; width:100%; max-height:86vh; overflow:auto; }
.modal h3 { margin:0 0 14px; font-size:17px; }
.modal .pe { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.modal .pe button { flex:0 0 auto; }

/* ── Recado ────────────────────────────────────────────────────────────────────────────── */
#recado { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--carta);
          border:1px solid var(--linha); border-radius:11px; padding:12px 20px; font-size:14px;
          z-index:70; box-shadow:0 10px 40px rgba(0,0,0,.6); }
#recado.ruim { border-color:var(--vermelho); color:var(--vermelho); }

/* ── Celular ───────────────────────────────────────────────────────────────────────────── */
@media (max-width:860px) {
  .corpo { grid-template-columns:1fr; }
  .hamburguer { display:grid !important; }
  /* 🔴 NO CELULAR O MENU É BARRA DE BAIXO, como na V2: o polegar alcança, e os quatro itens
     principais ficam sempre à mão. O resto entra na gaveta — oito ícones numa barra de 390 px
     viram oito rótulos cortados. */
  nav.lado { position:fixed; inset:58px auto 0 0; width:250px; z-index:40;
             transform:translateX(-100%); transition:transform .18s; padding-bottom:80px; }
  nav.lado.aberta { transform:translateX(0); box-shadow:var(--sombra-g); }
  main { padding-bottom:86px; }
  .barra-baixo { display:flex !important; }
  main { padding:18px 16px 50px; }
  /* 🔴 A regra escondia `.topo .selo`, e a classe do aviso de suporte é `.selo-suporte`
     — nome parecido, seletor que nunca casou. Era por isso que ele aparecia inteiro no
     telefone, com o nome da agência, empurrando os ícones para fora. */
  .topo .acoes .quem, .topo .selo { display:none; }
  .selo-suporte i { display:none; }
  .topo { overflow:hidden; }
  .topo { padding:0 12px; gap:10px; }
  .topo .marca img { height:24px; max-width:170px; }
  .cartas { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
  /* A tabela rola dentro dela mesma; a PÁGINA não rola de lado. (A `.tbl` do painel vira
     cartão mais abaixo e não rola nada — por isso a regra a dispensa.) */
  table:not(.tbl) { display:block; overflow-x:auto; white-space:nowrap; max-width:100%; }
  .kanban, .planos { max-width:100%; }
  h1.tela { font-size:20px; }
}
.hamburguer { display:none; }

/* ── Barra inferior do celular (espelha a V2) ──────────────────────────────────────────── */
.barra-baixo { display:none; position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:color-mix(in srgb, var(--fundo-2) 94%, transparent);
  backdrop-filter:blur(10px); border-top:1px solid var(--linha);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom)); gap:2px; }
.barra-baixo a, .barra-baixo button { flex:1; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:7px 2px; border-radius:var(--raio-p); background:0; border:0;
  color:var(--texto-2); font-size:10.5px; font-family:inherit; cursor:pointer; min-width:0; }
.barra-baixo a.ativo { color:var(--acento); background:var(--acento-fraco); }
.barra-baixo svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.barra-baixo span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* ── Selo de visita de suporte ─────────────────────────────────────────────────────────── */
.selo-suporte { background:var(--atencao); color:#1a1200; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:99px; white-space:nowrap; }
.selo-suporte i { font-style:normal; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   O APP DO CRIADOR — pensado para o celular, porque é onde ele abre.
   A barra de baixo vale em qualquer largura aqui (na equipe, só no celular).
   ══════════════════════════════════════════════════════════════════════════════════════════ */
body.app-criador .barra-baixo { display:flex; }
body.app-criador main { padding-bottom:90px; max-width:720px; margin:0 auto; }
body.app-criador nav.lado { display:none; }
body.app-criador .corpo { grid-template-columns:1fr; }

.cabeca-criador { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.av-grande { width:52px; height:52px; border-radius:99px; flex:0 0 52px; display:grid;
  place-items:center; font-size:21px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--acento), var(--acento2)); }

.meta-mes { margin-bottom:14px; border-color:var(--marca-borda, var(--acento)); }
.meta-mes .barra { height:8px; margin-top:10px; }

.minha-posicao { display:flex; align-items:center; gap:18px; }
.minha-posicao .lugar { font-size:clamp(34px,3vw,46px); font-weight:800; letter-spacing:-2px;
  color:var(--acento); font-family:var(--fonte-num); line-height:1; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   APP DO CRIADOR — visual de conquista.

   Espelha o app.checklive.com.br, que o criador já usa: fundo escuro, acento em néon com
   brilho, título em Orbitron, medalha e troféu com peso visual. A diferença é que aqui o
   néon sai da COR DA AGÊNCIA (--acento), então cada agência tem o app com a cara dela.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
body.app-criador {
  --neon:var(--acento);
  --neon2:var(--acento2);
  background:
    radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--neon) 16%, transparent), transparent 70%),
    var(--fundo);
}
body.app-criador h1.tela, body.app-criador .n, body.app-criador .lugar {
  font-family:var(--fonte-destaque); letter-spacing:.5px;
}

/* ── Anel de progresso da meta ─────────────────────────────────────────────────────────── */
.anel-meta { display:flex; align-items:center; gap:20px; padding:20px; border-radius:var(--raio-g);
  background:linear-gradient(140deg, color-mix(in srgb, var(--neon) 14%, var(--superficie)), var(--superficie));
  border:1px solid color-mix(in srgb, var(--neon) 34%, var(--linha)); margin-bottom:16px; }
.anel { width:104px; height:104px; flex:0 0 104px; position:relative; }
.anel svg { transform:rotate(-90deg); width:100%; height:100%; }
.anel circle { fill:none; stroke-width:9; stroke-linecap:round; }
.anel .trilha { stroke:color-mix(in srgb, var(--texto) 12%, transparent); }
.anel .feito { stroke:var(--neon); filter:drop-shadow(0 0 7px color-mix(in srgb, var(--neon) 75%, transparent));
  transition:stroke-dasharray .6s ease; }
.anel .centro { position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.anel .centro b { font-size:21px; font-family:var(--fonte-destaque); line-height:1.05; display:block; }
.anel .centro span { font-size:9.5px; color:var(--texto-2); text-transform:uppercase;
  letter-spacing:.6px; display:block; margin-top:2px; }
.anel-meta .texto b { font-size:var(--t-m); display:block; }
.anel-meta .texto p { margin:6px 0 0; color:var(--texto-2); font-size:var(--t-p); }
.anel-meta .texto .falta { color:var(--texto); font-weight:600; }

/* ── Medalhas ──────────────────────────────────────────────────────────────────────────── */
.medalhas { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
.medalha { background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  padding:13px 9px; text-align:center; position:relative; overflow:hidden; }
.medalha .ic { height:26px; display:grid; place-items:center; color:var(--texto-3); }
.medalha .ic svg { width:25px; height:25px; }
.medalha.tem .ic { color:var(--texto); }
.medalha.bronze .ic { color:#c98a4b; }
.medalha.prata  .ic { color:#cfd8e3; }
.medalha.ouro   .ic { color:#f2c14e; }
.medalha .nome { font-size:10.5px; color:var(--texto-2); margin-top:7px; line-height:1.3;
  text-transform:uppercase; letter-spacing:.4px; }
.medalha .val { font-size:15px; font-weight:700; margin-top:4px; font-family:var(--fonte-num); }
.medalha .falta { font-size:10px; color:var(--texto-3); margin-top:3px; }
.medalha.bronze { border-color:#a9713b; box-shadow:inset 0 0 26px rgba(169,113,59,.16); }
.medalha.prata  { border-color:#b8c2cc; box-shadow:inset 0 0 26px rgba(184,194,204,.16); }
.medalha.ouro   { border-color:#f2c14e; box-shadow:inset 0 0 30px rgba(242,193,78,.2); }
.medalha .fita { position:absolute; top:7px; right:7px; font-size:8.5px; font-weight:800;
  padding:2px 6px; border-radius:99px; text-transform:uppercase; letter-spacing:.5px; }
.medalha.bronze .fita { background:#a9713b; color:#1a0f05; }
.medalha.prata  .fita { background:#b8c2cc; color:#12181e; }
.medalha.ouro   .fita { background:#f2c14e; color:#241a00; }

/* ── Pódio ─────────────────────────────────────────────────────────────────────────────── */
.podio { display:flex; align-items:flex-end; justify-content:center; gap:10px; margin:6px 0 22px; }
.podio .p { flex:1; max-width:120px; text-align:center; }
/* A foto preenche o círculo da cara nos dois pódios.
   🔴 A IMAGEM SAI DO FLUXO DO GRID (`position:absolute`), e isso foi a segunda tentativa.
   A cara é um grid com `place-items:center` — ele existe para centralizar a LETRA de quem não
   tem foto. Numa faixa de grid de tamanho `auto`, a imagem com `width:100%` define a altura
   pela proporção: um avatar vertical do TikTok (840x1286) saía 64x98 e vazava o círculo por
   baixo, mostrando só a testa. `align-self:stretch` NÃO resolveu, porque a faixa continua
   medindo pelo conteúdo. Fora do fluxo, ela obedece à caixa de 64x64 e ponto.
   Medido no navegador (64x98 → 64x64); não dava para ver lendo o CSS.
   `overflow:hidden` no pai fecha o círculo; `cover` recorta pelo meio em vez de espremer. */
.podio .cara img, .podio-cards .cara img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:99px; display:block; }
.podio .cara, .podio-cards .cara { overflow:hidden; position:relative; }
.podio .cara { width:52px; height:52px; margin:0 auto 8px; border-radius:99px; display:grid;
  place-items:center; font-size:19px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--neon), var(--neon2)); }
.podio .p1 .cara { width:64px; height:64px; font-size:23px;
  box-shadow:0 0 22px color-mix(in srgb, var(--neon) 60%, transparent); }
.podio .tro { height:22px; margin-bottom:5px; display:grid; place-items:center; }
.podio .tro svg { width:21px; height:21px; }
.podio .tro1 { color:#f2c14e; filter:drop-shadow(0 0 7px rgba(242,193,78,.55)); }
.podio .tro2 { color:#cfd8e3; }
.podio .tro3 { color:#c98a4b; }
.podio .quem { font-size:11.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.podio .qto { font-size:11px; color:var(--texto-2); font-family:var(--fonte-num); }
.podio .base { margin-top:9px; border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--neon) 30%, var(--superficie)), var(--superficie));
  border:1px solid var(--linha); border-bottom:0; display:grid; place-items:center;
  font-family:var(--fonte-destaque); font-weight:800; color:var(--texto-2); }
.podio .p1 .base { height:76px; font-size:21px; }
.podio .p2 .base { height:56px; font-size:17px; }
.podio .p3 .base { height:42px; font-size:15px; }
.podio .eu .quem { color:var(--neon); }

/* ── Gráfico de barras do criador ──────────────────────────────────────────────────────── */
.barras { display:flex; align-items:flex-end; gap:6px; height:132px; padding:12px 2px 0; }
.barras .col { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:5px; min-width:0; }
.barras .b { width:100%; border-radius:5px 5px 0 0; min-height:3px;
  background:linear-gradient(180deg, var(--neon), color-mix(in srgb, var(--neon) 45%, transparent)); }
.barras .col.melhor .b { box-shadow:0 0 12px color-mix(in srgb, var(--neon) 65%, transparent); }
.barras .rot { font-size:9px; color:var(--texto-3); white-space:nowrap; }
.barras .qt { font-size:10px; color:var(--texto-2); font-family:var(--fonte-num); }

/* ── Ficha do criador ──────────────────────────────────────────────────────────────────── */
.ficha-topo { display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.ficha-topo .av-grande { width:56px; height:56px; flex:0 0 56px; border-radius:99px;
  display:grid; place-items:center; font-size:22px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--acento), var(--acento2)); object-fit:cover; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   APP DO CRIADOR — layout espelhado do app.checklive.com.br (prints de 20/09/2026).

   O que o desenho de lá resolve e por isso foi seguido: o criador abre no celular e quer
   responder três perguntas em dois segundos — quanto ganhei, quanto falta para a meta e onde
   estou no ranking. Por isso os números grandes no topo, os três anéis lado a lado e o pódio
   logo em seguida. O ciano e o magenta vêm de lá; quando a agência tem marca própria, o ciano
   dá lugar à cor dela.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
body.app-criador { --ciano:var(--acento); --magenta:#ff2d9a; --ouro:#f2c14e; }

/* ── Cabeçalho ─────────────────────────────────────────────────────────────────────────── */
.cab-criador { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cab-criador .av { width:46px; height:46px; flex:0 0 46px; border-radius:99px; display:grid;
  place-items:center; font-size:18px; font-weight:700; color:#fff; object-fit:cover;
  background:linear-gradient(135deg, var(--ciano), var(--magenta)); }
.cab-criador .quem b { display:block; font-size:var(--t-m); line-height:1.2; }
.cab-criador .quem span { color:var(--texto-2); font-size:var(--t-p); }
.cab-criador .dir { margin-left:auto; display:flex; align-items:center; gap:8px; }
.selo-ativo { display:inline-flex; align-items:center; gap:6px; background:rgba(34,211,165,.14);
  color:var(--sinal); font-size:11px; font-weight:700; padding:5px 11px; border-radius:99px; }
.selo-ativo i { width:7px; height:7px; border-radius:99px; background:currentColor; }

/* ── Dois números do topo ──────────────────────────────────────────────────────────────── */
.duplo { display:grid; grid-template-columns:1fr 1fr; background:var(--superficie);
  border:1px solid var(--linha); border-radius:var(--raio-g); overflow:hidden; margin-bottom:14px; }
.duplo > div { padding:18px 14px; text-align:center; }
.duplo > div + div { border-left:1px solid var(--linha); }
.duplo .rot { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.duplo .val { font-size:clamp(24px,6vw,34px); font-weight:800; line-height:1.15; margin:6px 0 4px;
  font-family:var(--fonte-destaque); }
.duplo .pe { font-size:11.5px; color:var(--texto-2); }
.duplo .c1 .rot, .duplo .c1 .val { color:var(--ciano); }
.duplo .c2 .rot, .duplo .c2 .val { color:var(--magenta); }

/* ── As três metas ─────────────────────────────────────────────────────────────────────── */
.metas-card { background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:18px; margin-bottom:14px; }
.metas-card .cabeca { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.metas-card .cabeca b { font-size:var(--t-m); }
.metas-card .cabeca small { display:block; color:var(--texto-2); font-size:var(--t-p); }
.metas-card .conta { margin-left:auto; background:var(--acento-fraco); color:var(--ciano);
  font-size:12px; font-weight:700; padding:4px 11px; border-radius:99px; }
.tres-aneis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mini-anel { text-align:center; }
.mini-anel .ring { width:88px; height:88px; margin:0 auto 10px; position:relative; }
.mini-anel svg { width:100%; height:100%; transform:rotate(-90deg); }
.mini-anel circle { fill:none; stroke-width:7; stroke-linecap:round; }
/* 🔴 BRANCO FIXO NÃO EXISTE NUM PRODUTO COM DOIS TEMAS. Esta trilha era
   `rgba(255,255,255,.08)`: no tema escuro ela aparecia, no claro SUMIA — e os três anéis das
   metas do criador viravam três números soltos no ar, sem o círculo em volta. Ninguém tinha
   visto porque o criador sempre abria no escuro; apareceu no dia (22/10/2026) em que o app
   passou a seguir o tema do site da agência. `color-mix` com `--texto` acompanha os dois. */
.mini-anel .t { stroke:color-mix(in srgb, var(--texto) 14%, transparent); }
.mini-anel .f { transition:stroke-dasharray .6s ease; }
.mini-anel.ciano   .f { stroke:var(--ciano);   filter:drop-shadow(0 0 6px color-mix(in srgb, var(--ciano) 70%, transparent)); }
.mini-anel.magenta .f { stroke:var(--magenta); filter:drop-shadow(0 0 6px rgba(255,45,154,.6)); }
.mini-anel.amarelo .f { stroke:var(--ouro);    filter:drop-shadow(0 0 6px rgba(242,193,78,.6)); }
.mini-anel .pct { position:absolute; inset:0; display:grid; place-items:center;
  font-size:19px; font-weight:800; font-family:var(--fonte-destaque); }
.mini-anel .rot { font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--texto-2); display:flex; align-items:center; justify-content:center; gap:5px; }
.mini-anel .rot i { width:7px; height:7px; border-radius:99px; }
.mini-anel.ciano   .rot i { background:var(--ciano); }
.mini-anel.magenta .rot i { background:var(--magenta); }
.mini-anel.amarelo .rot i { background:var(--ouro); }
.mini-anel .num { font-size:12.5px; margin-top:5px; font-weight:600; }
.mini-anel .num span { color:var(--texto-2); font-weight:400; }
.mini-anel .falta { font-size:10.5px; color:var(--texto-3); margin-top:2px; }
.metas-card .recado { text-align:center; font-size:var(--t-p); margin:18px 0 10px; }
.metas-card .geral { height:6px; background:color-mix(in srgb, var(--texto) 12%, transparent); border-radius:99px; overflow:hidden; }
.metas-card .geral i { display:block; height:100%;
  background:linear-gradient(90deg, var(--magenta), var(--ciano)); }
.metas-card .geral-rot { text-align:center; font-size:10.5px; color:var(--texto-3); margin-top:6px; }

/* ── Botão de saque ────────────────────────────────────────────────────────────────────── */
.bt-saque { width:100%; padding:15px; border:0; border-radius:var(--raio);
  background:linear-gradient(90deg, #a855f7, var(--ciano)); color:#fff; font-weight:700;
  font-size:var(--t-base); cursor:pointer; margin-bottom:20px; }
.bt-saque:disabled { opacity:.5; cursor:default; filter:grayscale(.4); }

/* ── Abas de métricas ──────────────────────────────────────────────────────────────────── */
.linhas-metrica { background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--raio); overflow:hidden; }
.linhas-metrica div { display:flex; justify-content:space-between; padding:14px 16px;
  border-bottom:1px solid var(--linha); font-size:var(--t-tabela); }
.linhas-metrica div:last-child { border-bottom:0; }
.linhas-metrica b { font-family:var(--fonte-num); }
.linhas-metrica .destaque b { color:var(--ciano); }

/* ── Pódio em cartões ──────────────────────────────────────────────────────────────────── */
.podio-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; align-items:end; }
.podio-cards .c { background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--raio); padding:14px 8px; text-align:center; }
.podio-cards .c.top { border-color:color-mix(in srgb, var(--ciano) 55%, transparent);
  box-shadow:0 0 22px color-mix(in srgb, var(--ciano) 22%, transparent); }
.podio-cards .cara { width:42px; height:42px; margin:0 auto 6px; border-radius:99px; display:grid;
  place-items:center; font-weight:700; color:#fff; font-size:16px; background:#2a2a36; }
.podio-cards .c.top .cara { width:50px; height:50px; font-size:19px;
  background:linear-gradient(135deg, var(--ciano), var(--magenta)); }
.podio-cards .med { font-size:17px; line-height:1; margin-bottom:5px; }
.podio-cards .nm { font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.podio-cards .ar { font-size:10.5px; color:var(--ciano); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.podio-cards .dm { font-size:12.5px; font-weight:700; margin-top:6px; font-family:var(--fonte-num); }
.minha-linha { display:flex; align-items:center; gap:12px; background:var(--superficie);
  border:1px solid var(--linha); border-radius:var(--raio); padding:14px 16px; margin-top:10px; }
.minha-linha .pos { font-size:19px; font-weight:800; color:var(--magenta); font-family:var(--fonte-destaque); }
.minha-linha .dm { margin-left:auto; font-weight:700; font-family:var(--fonte-num); }

/* ── Cartões de curso ──────────────────────────────────────────────────────────────────── */
.cursos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.curso-card { background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; display:block; color:inherit; }
.curso-card .capa { height:104px; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ciano) 22%, transparent), transparent 70%), #10141b; }
.curso-card .capa svg { width:52px; height:52px; }
.curso-card .txt { padding:11px 12px 13px; }
.curso-card .txt b { display:block; font-size:var(--t-tabela); }
.curso-card .txt span { color:var(--texto-2); font-size:11.5px; }
/* Medalha do pódio em SVG — emoji some em aparelho sem a fonte. */
.podio-cards .med { height:18px; display:grid; place-items:center; }
.podio-cards .med svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.podio-cards .med1 { color:var(--ouro); }
.podio-cards .med2 { color:#cfd8e3; }
.podio-cards .med3 { color:#c98a4b; }
h2 svg { width:14px; height:14px; vertical-align:-2px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-right:3px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   MÓDULO TRANCADO — vitrine, não porta fechada.

   O que o plano não inclui fica VISÍVEL com cadeado (decisão do dono): ninguém sente falta do
   que nunca viu. Clicar abre a vitrine do módulo — o que ele faz, o que a agência ganha e a
   partir de qual plano ele vem.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
nav.lado a.trancado { color:var(--texto-3); }
nav.lado a.trancado svg:first-of-type { opacity:.45; }
nav.lado a.trancado:hover { background:var(--carta); color:var(--texto-2); }
nav.lado a.trancado .cadeado { width:13px; height:13px; margin-left:auto; flex:0 0 13px; opacity:.7; }
.barra-baixo a.trancado { opacity:.5; }

.vitrine { background:linear-gradient(150deg, color-mix(in srgb, var(--acento) 10%, var(--superficie)), var(--superficie));
  border:1px solid color-mix(in srgb, var(--acento) 30%, var(--linha)); border-radius:var(--raio-g);
  padding:26px; max-width:640px; }
.vitrine .selo-cadeado { width:46px; height:46px; border-radius:99px; display:grid; place-items:center;
  background:var(--acento-fraco); color:var(--acento); margin-bottom:16px; }
.vitrine .selo-cadeado svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.vitrine .oque { font-size:var(--t-m); line-height:1.5; margin:0 0 18px; }
.vitrine ul { list-style:none; padding:0; margin:0 0 22px; }
.vitrine li { padding:8px 0 8px 26px; position:relative; font-size:var(--t-tabela); color:var(--texto-2);
  border-bottom:1px solid color-mix(in srgb, var(--texto) 9%, transparent); }
.vitrine li::before { content:"✓"; position:absolute; left:2px; color:var(--sinal); font-weight:700; }
.vitrine .pe { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--linha); padding-top:18px; }
.vitrine .pe > div { font-size:var(--t-tabela); }
.vitrine .pe span { display:block; color:var(--acento); font-weight:700; font-size:var(--t-m);
  font-family:var(--fonte-num); margin-top:2px; }
.vitrine .pe a { margin-left:auto; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   OPERAÇÃO, CRIADORES E CONVITES — peças que vêm do desenho da V2.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Faixa de aviso ────────────────────────────────────────────────────────────────────── */
.faixa { display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:var(--raio);
  border:1px solid var(--linha); background:var(--superficie); margin-bottom:12px; }
.faixa b { font-size:var(--t-tabela); }
.faixa span { font-size:var(--t-p); color:var(--texto-2); }
.faixa button { align-self:flex-start; margin-top:8px; }
.faixa.atencao { border-color:color-mix(in srgb, var(--atencao) 45%, var(--linha)); }
.faixa.atencao b { color:var(--atencao); }
.faixa.falha { border-color:color-mix(in srgb, var(--falha) 45%, var(--linha)); }
.faixa.falha b { color:var(--falha); }
.faixa.ok { border-color:color-mix(in srgb, var(--sinal) 45%, var(--linha)); }
.faixa.ok b { color:var(--sinal); }

/* ── Fluxo ao vivo ─────────────────────────────────────────────────────────────────────── */
.fluxo { list-style:none; margin:0; padding:10px 12px; max-height:260px; overflow-y:auto;
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  font-size:var(--t-p); }
.fluxo li { display:flex; align-items:baseline; gap:9px; padding:6px 0;
  border-bottom:1px solid color-mix(in srgb, var(--texto) 8%, transparent); }
.fluxo li:last-child { border-bottom:0; }
.fluxo time { color:var(--texto-3); font-family:var(--fonte-num); font-size:11px; flex:none; }
.fluxo .pt { width:6px; height:6px; border-radius:99px; background:var(--texto-3); flex:none; }
.fluxo li[data-t="ok"] .pt { background:var(--sinal); }
.fluxo li[data-t="atencao"] .pt { background:var(--atencao); }
.fluxo li[data-t="falha"] .pt { background:var(--falha); }
.fluxo .eti { font-size:10px; padding:1px 7px; border-radius:99px; flex:none;
  background:rgba(139,152,165,.14); color:var(--texto-2); }
.fluxo .eti.ok { background:var(--acento-fraco); color:var(--acento); }

/* ── Linha de motor ────────────────────────────────────────────────────────────────────── */
.motor-linha { display:flex; align-items:center; gap:12px; padding:13px 0;
  border-bottom:1px solid color-mix(in srgb, var(--texto) 9%, transparent); }
.motor-linha:last-child { border-bottom:0; }
.motor-linha.principal b { color:var(--acento); }
.motor-linha b { font-size:var(--t-tabela); display:block; }
.motor-linha .resumo { font-size:var(--t-p); color:var(--texto-2); margin-top:2px; }
.motor-linha .resumo.alerta { color:var(--atencao); }
.pulso { width:9px; height:9px; border-radius:99px; background:var(--texto-3); flex:none; }
.pulso.vivo { background:var(--sinal); box-shadow:0 0 0 0 color-mix(in srgb, var(--sinal) 70%, transparent);
  animation:bate 2s infinite; }
.pulso.parado { background:#3a4652; }
@keyframes bate { 70% { box-shadow:0 0 0 7px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }

/* Interruptor */
.chave { position:relative; width:44px; height:25px; flex:none; cursor:pointer; }
.chave input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.chave i { position:absolute; inset:0; background:#2a333d; border-radius:99px; transition:background .15s; }
.chave i::after { content:""; position:absolute; top:3px; left:3px; width:19px; height:19px;
  background:#fff; border-radius:99px; transition:transform .15s; }
.chave input:checked + i { background:var(--acento); }
.chave input:checked + i::after { transform:translateX(19px); }
.chave.travada { opacity:.45; cursor:not-allowed; }

/* ── Cotas ─────────────────────────────────────────────────────────────────────────────── */
.cota { margin-bottom:14px; }
.cota:last-child { margin-bottom:0; }
.cota .topo { display:flex; justify-content:space-between; align-items:baseline; font-size:var(--t-p);
  margin-bottom:6px; }
.cota .topo b { font-family:var(--fonte-num); }
.cota .topo span { color:var(--texto-2); font-weight:400; }
.cota .barra { height:7px; background:#0e1114; border-radius:99px; overflow:hidden; }
.cota .barra i { display:block; height:100%; background:var(--acento); border-radius:99px; }
.cota .barra i.ok { background:var(--sinal); }

.grade-lado { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:860px) { .grade-lado { grid-template-columns:1fr; } }

/* ── Filtros com contagem ──────────────────────────────────────────────────────────────── */
.filtro-grupo { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.filtro-grupo .rot { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--texto-3); margin-right:4px; min-width:72px; }
.filtro { background:var(--superficie); border:1px solid var(--linha); color:var(--texto-2);
  padding:6px 12px; border-radius:99px; font-size:12.5px; cursor:pointer; font-family:inherit; }
.filtro:hover { background:var(--superficie-2); color:var(--texto); }
.filtro b { font-family:var(--fonte-num); opacity:.75; margin-left:3px; }
.filtro.ativo { background:var(--acento-fraco); border-color:color-mix(in srgb, var(--acento) 45%, var(--linha));
  color:var(--acento); font-weight:600; }

/* ── Barra de ação em lote ─────────────────────────────────────────────────────────────── */
.lote { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px;
  background:var(--acento-fraco); border:1px solid color-mix(in srgb, var(--acento) 35%, var(--linha));
  border-radius:var(--raio); margin-bottom:12px; }
.lote b { font-size:var(--t-tabela); }

.paginacao { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px;
  font-size:var(--t-p); color:var(--texto-2); }
.paginacao button:disabled { opacity:.4; cursor:default; }

.eti-viva { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700;
  color:var(--vivo); margin-left:8px; text-decoration:none; }
.eti-viva .pulso { background:var(--vivo); width:6px; height:6px; }

/* ── Etiquetas da mensagem ─────────────────────────────────────────────────────────────── */
.etiquetas { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:10px; }
.eti-bt { background:var(--superficie-2); border:1px solid var(--linha); color:var(--acento);
  padding:4px 10px; border-radius:7px; font-size:12px; font-family:var(--fonte-num); cursor:pointer; }
.eti-bt:hover { background:var(--acento-fraco); }
.etiquetas .conta { margin-left:auto; color:var(--texto-3); font-size:var(--t-p); }

/* Dados do criador em grade: rótulo pequeno em cima, valor embaixo — lê-se em diagonal. */
.dados-grade { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 18px; }
.dados-grade label { margin:0 0 3px; }
.dados-grade > div > div { font-size:var(--t-tabela); word-break:break-word; }

/* Opções do app: caixa de marcar com explicação embaixo — sem isso o cliente marca no escuro. */
.opcoes { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin-top:16px; }
.opcao { display:flex; align-items:flex-start; gap:10px; padding:13px; margin:0;
  background:var(--superficie-2); border:1px solid var(--linha); border-radius:var(--raio); cursor:pointer; }
.opcao b { display:block; font-size:var(--t-tabela); color:var(--texto); font-weight:600; }
.opcao span { display:block; color:var(--texto-2); font-size:var(--t-p); margin-top:2px; }
.opcao input { margin-top:3px; }

/* ── Manual: índice à esquerda, artigo à direita (o desenho da V2) ─────────────────────── */
.manual { display:grid; grid-template-columns:240px minmax(0,1fr); gap:22px; align-items:start; }
.manual .indice { background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--raio); padding:12px; position:sticky; top:74px; }
.manual .indice .grupo { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--texto-3); margin:14px 8px 5px; font-weight:600; }
.manual .indice .grupo:first-child { margin-top:2px; }
.manual .indice a { display:block; padding:7px 9px; border-radius:8px; color:var(--texto-2);
  font-size:13px; line-height:1.35; }
.manual .indice a:hover { background:var(--superficie-2); color:var(--texto); }
.manual .indice a.ativo { background:var(--acento-fraco); color:var(--acento); font-weight:600; }
.manual .artigo { background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--raio); padding:24px 26px; }
.manual .artigo h2 { font-size:var(--t-g); color:var(--texto); text-transform:none;
  letter-spacing:-.3px; margin-bottom:14px; }
.manual .artigo p { font-size:var(--t-tabela); line-height:1.65; color:var(--texto-2); margin:0 0 14px; }
.manual .artigo ol, .manual .artigo ul { margin:0 0 16px; padding-left:22px; }
.manual .artigo li { font-size:var(--t-tabela); line-height:1.6; color:var(--texto-2); margin-bottom:7px; }
.manual .artigo a { font-weight:600; }
@media (max-width:860px) {
  .manual { grid-template-columns:1fr; }
  .manual .indice { position:static; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   🔴 ROLAGEM LATERAL DA PÁGINA — achado na conferência visual de 20/09/2026.

   Duas causas, as duas clássicas:
     • tabela larga (a de Agências, no admin, tem 10 colunas) esticando a página no DESKTOP;
     • `.linha` com quatro campos lado a lado (o ritmo dos Convites) não quebrando no CELULAR.

   A regra: quem rola é a TABELA ou o formulário, nunca a página. Página que rola de lado faz
   o conteúdo sumir por baixo do dedo e é o defeito mais reclamado em celular.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 SÓ PARA TABELA FORA DO HELPER (07/10/2026). Partir `thead` e `tbody` em duas tabelas
   independentes desalinha o cabeçalho da célula, porque cada metade mede as colunas pelo
   próprio conteúdo. As tabelas do painel (`.tbl`, vindas de `tabela()`) agora rolam dentro de
   `.rolagem-tbl` e continuam sendo tabela de verdade. */
table:not(.tbl) { display:block; overflow-x:auto; max-width:100%; }
table:not(.tbl) thead, table:not(.tbl) tbody { display:table; width:100%; min-width:max-content; }
table:not(.tbl) tr { display:table-row; }
table:not(.tbl) th, table:not(.tbl) td { display:table-cell; }

.rolagem-tbl { max-width:100%; overflow-x:auto; }
.rolagem-tbl > table.tbl { width:100%; min-width:max-content; }
/* 🔴 E NO CELULAR A TABELA NÃO É TABELA — é cartão, e cartão não tem `max-content`
   (07/10/2026). Esta anulação estava escrita 460 linhas ACIMA, no bloco antigo de celular:
   mesma especificidade, e aí quem vence é a ORDEM — a regra de cima mandava, o cartão pedia
   a largura do conteúdo e saía 286 px fora da tela em 390 px.

   🔴 E por que ninguém viu: `html, body { overflow-x: hidden }`. Com ele, `scrollWidth` do
   documento continua igual à tela — a medição diz "overflow 0" enquanto a informação está
   fora da borda, invisível e sem rolagem para alcançar. **Medir estouro pelo documento mente
   quando alguém escondeu o estouro**: mede-se elemento a elemento (`getBoundingClientRect`),
   que é o que o teste das telas passou a fazer. */
@media (max-width:860px) {
  .rolagem-tbl { overflow-x:visible; }
  .rolagem-tbl > table.tbl { min-width:0; width:100%; }
}

/* No celular, campo lado a lado vira empilhado — quatro caixas numa tela de 390 px não cabem. */
@media (max-width:640px) {
  .linha { flex-direction:column; align-items:stretch; }
  .linha > *, .linha button { width:100%; min-width:0; }
  .filtros input[type=search], .filtros select { flex:1 1 100%; max-width:none; }
  /* 🔴 `white-space:nowrap` no `.conta` estica a PÁGINA no celular quando o texto é uma
     explicação e não um contador. O nowrap existe para "12 de 40" não quebrar no meio — numa
     frase ele vira rolagem lateral (achado na tela nova de Financeiro, 22/09/2026, a 390 px).
     No celular o `.conta` já cai para baixo, então quebrar linha é exatamente o que se quer. */
  .filtros .conta { margin-left:0; white-space:normal; }
  .duplo { grid-template-columns:1fr; }
  .duplo > div + div { border-left:0; border-top:1px solid var(--linha); }
}

/* 🔴 A MESMA ARMADILHA DO GRID, DE NOVO (convites, celular): coluna de grid tem largura mínima
   "auto", então a tabela com `min-width:max-content` estica a coluna e a página inteira ganha
   rolagem lateral. Já tinha mordido no `main`; vale para TODA coluna de grid que recebe
   conteúdo largo. */
.grade-lado > *, .cartas > *, .planos > *, .medalhas > *, .cursos-grid > *,
.opcoes > *, .tres-aneis > *, .podio-cards > *, .dados-grade > * { min-width:0; }
.grade-lado { min-width:0; }

/* A marca certa para cada tema — a nossa escreve "Radar" em branco e sumiria no claro. */
/* 🔴 AS DUAS MARCAS APARECIAM JUNTAS (achado pelo dono, 22/09/2026: *"tem duas
   logomarcas da radar no topo"*). Não era falta de regra — era ESPECIFICIDADE: `.topo .marca
   img` e `form.entrar .marca img` valem (0,2,1) e traziam `display:block`, enquanto o
   `.so-claro { display:none }` valia só (0,1,0) e perdia. As duas imagens ficavam visíveis, e
   a de cima ainda espremia a outra no flex.
   O `img` entra no seletor para empatar em (0,2,1) — e, no empate, vence quem vem depois, que
   é este bloco. O tema claro ganha o atributo e passa a (0,3,1), com folga. */
:root img.so-claro { display:none; }
:root[data-tema="claro"] img.so-escuro { display:none; }
:root[data-tema="claro"] img.so-claro { display:block; }
/* Quem não for imagem continua obedecendo as regras simples. */
:not(img).so-claro { display:none; }
:root[data-tema="claro"] :not(img).so-escuro { display:none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   SITE DA AGÊNCIA — ESCOLHA DO MODELO (20/09/2026)

   A miniatura é desenho, não texto: ninguém escolhe layout lendo "escuro, com números
   grandes". E ela é pintada com a COR que está no campo ao lado, ao vivo — escolher o modelo
   na cor errada é escolher outra coisa.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.modelos { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-top:16px; }
.modelos > * { min-width:0; }
.modelo { display:block; margin:0; padding:12px; cursor:pointer; border-radius:var(--raio);
  background:var(--superficie-2); border:1px solid var(--linha); transition:border-color .15s, box-shadow .15s; }
.modelo:hover { border-color:var(--linha-forte); }
.modelo.ativo { border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-fraco); }
/* 🔴 O rádio some da VISTA, não do fluxo — e some SEM largura. A primeira versão usava só
   `position:absolute; opacity:0`, e como o estilo global dá `width:100%` a todo input, os três
   rádios viraram três caixas de 1360 px ancoradas no <body>: a página inteira passou a rolar
   998 px de lado. É a mesma armadilha da seção de rolagem lateral, por outra porta. */
.modelo { position:relative; }
.modelo input { position:absolute; inset:auto auto 0 0; width:1px; height:1px;
  opacity:0; pointer-events:none; margin:0; padding:0; border:0; }
.modelo .mini { display:block; width:100%; height:auto; border-radius:6px;
  border:1px solid var(--linha); background:var(--superficie); margin-bottom:11px; }
.modelo b { display:block; font-size:var(--t-tabela); color:var(--texto); font-weight:600; }
.modelo span { display:block; font-size:var(--t-p); color:var(--texto-2); line-height:1.5; margin-top:3px; }
.modelo small { display:block; font-size:var(--t-p); color:var(--texto-3); line-height:1.45; margin-top:6px;
  padding-top:6px; border-top:1px dashed var(--linha); }
.acoes-previa { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
.ajuda { font-size:var(--t-p); color:var(--texto-2); line-height:1.55; margin:6px 0 0; }
.ajuda code { font-family:var(--fonte-num,monospace); background:var(--superficie-2);
  border:1px solid var(--linha); border-radius:4px; padding:1px 5px; font-size:.94em; }
label.marcar { display:flex; align-items:center; gap:8px; margin-top:18px;
  font-size:var(--t-tabela); color:var(--texto-2); }
label.marcar input { width:auto; margin:0; }
button.secundario { background:var(--superficie-2); color:var(--texto); border:1px solid var(--linha-forte); }
button.secundario:hover { background:var(--superficie-3,var(--superficie)); border-color:var(--acento); }

/* Plano herdado da migração do radarlive.online: o cliente precisa VER que o preço dele é
   um privilégio, senão a tela de Planos parece dizer que ele está num plano que não existe. */
.aviso-legado { border-color:var(--acento); margin-bottom:18px; }
.aviso-legado b { color:var(--acento); }
.aviso-legado p { margin:6px 0 0; font-size:var(--t-tabela); color:var(--texto-2); line-height:1.6; }
.plano h3 small.legado { display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; color:var(--acento); background:var(--acento-fraco);
  border-radius:999px; padding:3px 8px; margin-left:6px; vertical-align:middle; }

/* Teste grátis no cartão do plano: é o argumento que tira o medo de assinar, então precisa
   competir com o preço em destaque, não ficar perdido na lista de recursos. */
.plano .teste-gratis { margin-top:8px; display:inline-block; font-size:12px; font-weight:700;
  color:var(--verde,#10b981); background:rgba(16,185,129,.12); border-radius:999px; padding:5px 11px; }

/* ── Filtros de captação e de convite (Operação) ───────────────────────────────────────── */
/* Quem não tem o recurso vê TRANCADO, não escondido: módulo escondido não gera curiosidade,
   gera a impressão de que o sistema é menor do que é. */
.grade-filtros { border:1px solid var(--linha); border-radius:var(--raio); padding:16px 18px; }
.grade-filtros.inativo { opacity:.62; background:var(--superficie-2); }
.grade-filtros.inativo input, .grade-filtros.inativo select { cursor:not-allowed; }
.titulo-filtro { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.titulo-filtro b { font-size:var(--t-tabela); color:var(--texto); }
.titulo-filtro span { font-size:var(--t-p); color:var(--texto-3); flex:1 1 100%; }

/* 🏷️ As caixinhas de nicho (Gamers / Lives de venda / Batalhas). Embrulham no celular: três
   rótulos em linha única estouravam a largura em 360px. */
.linha-nichos { display:flex; gap:18px; flex-wrap:wrap; }
.linha-nichos .nicho { display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:var(--t-p); color:var(--texto); }
.linha-nichos .nicho input { width:18px; height:18px; accent-color:var(--acento); cursor:pointer; }
.cadeado-eti { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  color:var(--amarelo,#d09b12); background:rgba(208,155,18,.12); border-radius:999px; padding:3px 9px; }

/* ── Pix da diferença no upgrade de plano ──────────────────────────────────────────────── */
/* 💰 A CONTA DO UPGRADE, ITEMIZADA (16/10/2026). O total sozinho não se explica: o cliente
   tem de ver o preço de tabela e o crédito dos dias que ele já pagou, senão o desconto parece
   erro e o Pix vira chamado. */
.conta-upgrade-linhas { display:grid; gap:7px; margin-bottom:10px; padding:12px 16px;
  border:1px solid var(--linha); border-radius:var(--raio); }
.conta-upgrade-linhas > div { display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; }
.conta-upgrade-linhas span { font-size:var(--t-p); color:var(--texto-2); }
.conta-upgrade-linhas b { font-size:var(--t-tabela); font-weight:700; white-space:nowrap; }
.conta-upgrade-linhas .credito b { color:var(--verde); }
.conta-upgrade { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:14px 16px; border-radius:var(--raio); background:var(--acento-fraco); }
.conta-upgrade span { font-size:var(--t-p); color:var(--texto-2); text-transform:uppercase; letter-spacing:.06em; }
.conta-upgrade b { font-size:22px; font-weight:800; color:var(--acento); }
.pix-upgrade { border-color:var(--acento); margin-bottom:18px; }
.pix-linha { display:grid; gap:20px; margin-top:16px; }
@media (min-width:680px) { .pix-linha { grid-template-columns:236px minmax(0,1fr); align-items:start; } }
.pix-linha > * { min-width:0; }
/* ⚠️ branco de propósito: leitor de QR não lê código em fundo escuro. */
.pix-qr { background:#fff; padding:10px; border-radius:var(--raio); line-height:0; }
.pix-qr img { width:100%; height:auto; display:block; }
.pix-lado .pix-valor { font-size:28px; font-weight:800; letter-spacing:-.5px; margin-bottom:12px; }
.pix-lado label { display:block; font-size:var(--t-p); font-weight:600; color:var(--texto-2); margin-bottom:6px; }
.pix-lado textarea { width:100%; min-height:82px; font-family:var(--fonte-num,monospace); font-size:12.5px;
  padding:10px 12px; border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--superficie-2); color:var(--texto); resize:vertical; }
.pix-estado { margin-top:12px; font-size:var(--t-p); font-weight:600; color:var(--texto-2); }

/* ── Endereço do site da agência (Radar Sites, 21/09/2026) ──────────────────────────────── */
/* O sufixo `.radarlive.com.br` COLADO no campo, não escrito na ajuda embaixo: a agência
   precisa ver o endereço inteiro enquanto digita, senão ela digita o domínio dentro do campo
   (suaagencia.radarlive.com.br) e o endereço nasce dobrado.
   ⚠️ `min-width:0` no input: sem ele o `input{width:100%}` global briga com o flex e estica a
   PÁGINA no celular — foi exatamente assim que a tela de modelos ganhou 998px de rolagem. */
.endereco-campo { display:flex; align-items:stretch; min-width:0; }
.endereco-campo input { min-width:0; flex:1 1 auto;
  border-top-right-radius:0; border-bottom-right-radius:0; }
.endereco-campo span { display:flex; align-items:center; white-space:nowrap; padding:0 11px;
  font-size:var(--t-p); color:var(--texto-3); background:var(--superficie-2);
  border:1px solid var(--linha); border-left:0;
  border-radius:0 var(--raio) var(--raio) 0; }
@media (max-width:420px) {
  /* Em tela estreita o sufixo rouba a metade do campo e sobra espaço para 4 letras. */
  .endereco-campo { flex-wrap:wrap; }
  .endereco-campo input { flex:1 1 100%; border-radius:var(--raio); }
  .endereco-campo span { flex:1 1 100%; border-left:1px solid var(--linha); border-top:0;
    border-radius:0 0 var(--raio) var(--raio); justify-content:flex-start; }
}
/* Quem não tem domínio próprio no plano vê TRANCADO, não escondido — mesma regra dos filtros. */
.caixa.trancada { background:var(--superficie-2); padding:14px 16px; margin:0; }
.caixa.trancada b { display:block; font-size:var(--t-tabela); margin-bottom:4px; }
.caixa.trancada .ajuda { margin:0; }


/* ══════════════════════════════════════════════════════════════════════════════════════════
   📱 PAINEL NO CELULAR — a tabela vira cartão (06/10/2026)

   Regra da casa a partir de agora: nenhuma tela do admin usa rolagem horizontal para caber no
   telefone. A tabela continua sendo tabela no computador; abaixo de 860px cada linha é um
   cartão com rótulo + valor, e as ações vão para o rodapé do cartão, na altura do polegar.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* O dedo pede um alvo maior que o ponteiro — a altura continua UMA, só muda o número. */
  :root { --alt-bt: 42px; }
  table.tbl { display: block; width: 100%; border: 0; background: none; }
  table.tbl thead { display: none; }
  table.tbl tbody { display: block; }

  table.tbl tr {
    display: block;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0 0 10px;
  }
  table.tbl tr:last-child { margin-bottom: 0; }

  table.tbl td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    width: auto;
    padding: 5px 0;
    border: 0;
    text-align: right;
    font-size: 13.5px;
  }
  table.tbl td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto;
    text-align: left;
    color: var(--texto-3);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
  }

  /* o nome fica no alto, grande, sem rótulo: ninguém precisa de "AGÊNCIA: Fusion" */
  table.tbl td[data-papel="titulo"] {
    display: block;
    text-align: left;
    font-size: 15.5px;
    padding: 0 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--linha);
  }
  table.tbl td[data-papel="titulo"]::before { content: none; }

  /* ações: embaixo, largas, fáceis de acertar com o dedo */
  table.tbl td[data-papel="acoes"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    text-align: left;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--linha);
  }
  table.tbl td[data-papel="acoes"]::before { content: none; }
  table.tbl td[data-papel="acoes"] button,
  table.tbl td[data-papel="acoes"] .acao {
    flex: 1 1 auto;
    min-height: 42px;
    min-width: 96px;
  }
  /* célula vazia não vira linha fantasma nem borda solta */
  table.tbl td:empty { display: none; }
  table.tbl td[data-papel="acoes"]:empty { display: none; }

  /* nada de zoom involuntário no iOS: campo com fonte < 16px faz o Safari dar zoom sozinho */
  input, select, textarea { font-size: 16px; }
  /* alvo de toque confortável em qualquer botão do painel */
  button, .acao, .filtro { min-height: 40px; }

  /* respeita o recorte do iPhone */
  main { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .barra-baixo { padding-bottom: env(safe-area-inset-bottom); }
}

/* 🔴 Teste de régua: em 360px nada pode empurrar a página para o lado. */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  main, .corpo, table.tbl tr { max-width: 100%; }
  table.tbl td > * { max-width: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
   🪟 MODAL EM TRÊS PARTES (06/10/2026)

   Cabeçalho que não sai da tela, corpo que rola, rodapé colado embaixo. No computador continua
   sendo uma caixa central; no celular vira TELA CHEIA, porque caixa flutuante em 390px é só
   uma tela menor com margem desperdiçada — e o teclado virtual empurrava o botão de salvar
   para fora. `100dvh` em vez de `100vh`: no Safari do iPhone a barra de endereço come a
   diferença e o rodapé some.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.modal { display: flex; flex-direction: column; padding: 0; }
.modal-topo { display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--linha); }
.modal-topo h3 { margin: 0; }
.modal .modal-x { background: none; border: 0; color: var(--texto-3); font-size: 26px;
  line-height: 1; padding: 2px 8px; cursor: pointer; min-height: 0; }
.modal .modal-x:hover { color: var(--texto); }
.modal #mf { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal-corpo { padding: 16px 20px 4px; overflow: auto; flex: 1 1 auto; }
.modal .pe { padding: 14px 20px; border-top: 1px solid var(--linha); margin: 0;
  background: var(--carta); position: sticky; bottom: 0; }

@media (max-width: 860px) {
  .fundo-modal { padding: 0; align-items: stretch; }
  .modal {
    max-width: none; width: 100%;
    max-height: none; height: 100dvh;
    border: 0; border-radius: 0;
  }
  .modal-topo { padding-top: calc(16px + env(safe-area-inset-top)); }
  .modal .pe {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  /* Em tela cheia a ação principal é a da direita e ocupa metade: alvo grande, sem ambiguidade. */
  .modal .pe button { width: 100%; min-height: 46px; }
  .modal .pe button[type="submit"] { order: 2; }
  .modal .pe .fraco { order: 1; }
  /* Um campo por linha, com respiro — formulário de admin no celular não é planilha. */
  .modal-corpo input, .modal-corpo select, .modal-corpo textarea { width: 100%; min-height: 46px; }
  .modal-corpo label { display: block; margin-top: 14px; }
}


/* Ações do cartão parecendo ação (06/10/2026). No computador elas são links discretos dentro
   da linha da tabela, e está certo: a linha inteira já é o contexto. No celular, texto azul
   solto no rodapé do cartão não se lê como botão — e botão que não parece botão não é tocado.
   Mesma função, aparência adequada ao dedo. */
@media (max-width: 860px) {
  /* 🔘 O MESMO BOTÃO AZUL DO COMPUTADOR (07/10/2026 — *"padronize em todo o sistema os
     botões azuis iguais"*). A ação tinha visual próprio aqui — fundo apagado, borda fina,
     canto de 10px — e o sistema ficava com DOIS desenhos de botão conforme o tamanho da
     tela. Agora é a mesma pílula; o que muda no celular é só o tamanho, porque o alvo é o
     dedo e não o ponteiro. */
  table.tbl td[data-papel="acoes"] button,
  table.tbl td[data-papel="acoes"] .acao,
  table.tbl td[data-papel="acoes"] .bt,
  table.tbl td[data-papel="acoes"] .btn {
    background: var(--acento);
    color: #fff;
    border: 0;
    border-radius: 99px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
  }
  /* 🗑️ O que apaga continua vermelho: forma igual, cor diferente. */
  table.tbl td[data-papel="acoes"] button.excluir-ag,
  table.tbl td[data-papel="acoes"] .acao.excluir-ag,
  table.tbl td[data-papel="acoes"] button.excluir,
  table.tbl td[data-papel="acoes"] button.perigo,
  table.tbl td[data-papel="acoes"] .acao.perigo {
    background: rgba(239,68,68,.16); color: var(--vermelho);
  }
  /* a primeira ação é a principal da linha: ganha destaque sem virar um botão cheio */
  /* 🔴 AQUI A PRIMEIRA AÇÃO FICAVA INVISÍVEL (07/10/2026). Esta regra pintava o texto
     dela de azul para destacar — fazia sentido quando o botão tinha fundo apagado. Com a
     pílula azul cheia, virou texto azul sobre fundo azul: o "Entrar" sumiu da tela e sobrou
     uma cápsula vazia. Botões iguais não precisam de destaque — o destaque agora é serem
     todos botão. */
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
   🧭 PAINEL DE ABERTURA, ATALHOS E SEÇÕES (06/10/2026)

   Linha de desenho pedida pelo dono: traço fino, cor com parcimônia, superfície chapada.
   Sem gradiente, sem brilho, sem sombra colorida — é software de trabalho, e o visual tem de
   envelhecer bem numa tela aberta oito horas por dia.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.abertura {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 18px 20px 20px;
  margin: 0 0 18px;
}
.abertura .etiqueta { font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--texto-3); }
.abertura .valor { font-family: var(--fonte-num, inherit); font-size: 34px; line-height: 1.1;
  font-weight: 700; letter-spacing: -.5px; }
.abertura .pe { font-size: 13px; color: var(--texto-2); }
.abertura .acao-abertura { align-self: flex-start; margin-top: 10px; font-size: 13.5px;
  color: var(--acento); text-decoration: none; }
.abertura .acao-abertura:hover { text-decoration: underline; }

/* fileira de atalhos redondos */
.atalhos { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px;
  margin: 0 0 18px; scrollbar-width: none; }
.atalhos::-webkit-scrollbar { display: none; }
.atalho { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center;
  gap: 7px; text-decoration: none; color: var(--texto-2); }
.atalho .bolha { display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie);
  color: var(--acento); transition: border-color .15s, color .15s; }
.atalho:hover .bolha, .atalho:focus-visible .bolha {
  border-color: color-mix(in srgb, var(--acento) 55%, var(--linha)); }
.atalho .rot { font-size: 11.5px; text-align: center; line-height: 1.25; }
.ic { display: block; }

/* título de seção com contexto */
.secao { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 26px 0 12px; }
.secao h2 { margin: 0; font-size: 16.5px; }
.secao span { font-size: 12.5px; color: var(--texto-3); }

/* cartões de número: 2 colunas no celular, traço fino, número grande */
.cartas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.carta { background: var(--carta); border: 1px solid var(--linha); border-radius: 16px;
  padding: 16px 16px 14px; }
.carta .n { font-size: 25px; line-height: 1.15; font-weight: 700; letter-spacing: -.4px; }
.carta .r { font-size: 12px; color: var(--texto-3); margin-top: 4px;
  text-transform: uppercase; letter-spacing: .6px; }
.carta .p { font-size: 12.5px; color: var(--texto-2); margin-top: 8px; }

@media (max-width: 860px) {
  .cartas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .carta { padding: 14px; border-radius: 14px; }
  .carta .n { font-size: 22px; }
  .abertura { border-radius: 16px; padding: 16px 18px 18px; }
  .abertura .valor { font-size: 30px; }
}
@media (max-width: 340px) {
  .cartas { grid-template-columns: 1fr; }
}


/* Ajustes medidos no render de 390px (06/10/2026) */
/* 1. Título de seção em caixa normal: o CAIXA ALTA herdado deixava a tela com cara de
      formulário de sistema antigo, e o modelo que o dono mandou usa frase normal. */
.secao h2 { text-transform: none; letter-spacing: -.2px; }
/* 2. Valor comprido (pílula de motivo, e-mail, link) quebra para a própria linha em vez de
      vazar do cartão — foi o que cortou "sem programa pareado" na prova. */
@media (max-width: 860px) {
  table.tbl td { flex-wrap: wrap; }
  table.tbl td > * { max-width: 100%; }
  table.tbl td .pilula { white-space: normal; }
}


/* 🔴 MEDIDO, NÃO SUPOSTO (06/10/2026): o cartão nascia 410px numa tela de 390.
   As regras ANTIGAS de celular ainda mandavam na tabela — `table { overflow-x:auto;
   white-space:nowrap }` e `tbody { min-width:max-content }` eram a solução velha, a de rolar
   para o lado. Com elas de pé, o cartão herdava a largura do CONTEÚDO e vazava a tela; a
   pílula cortada era só o sintoma visível. Aqui elas são desfeitas para a tabela em modo
   cartão — e só para ela, porque tabela sem `.tbl` (se sobrar alguma) continua como estava. */
@media (max-width: 860px) {
  table.tbl { overflow-x: visible; white-space: normal; width: 100%; }
  table.tbl tbody { display: block; width: 100%; min-width: 0; }
  table.tbl tr { width: auto; box-sizing: border-box; }
}


/* Cartão resumido: o que é secundário só aparece quando a pessoa pede (06/10/2026). */
@media (max-width: 860px) {
  table.tbl td[data-papel="extra"] { display: none; }
  table.tbl tr.aberto td[data-papel="extra"] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 5px 0; text-align: right; font-size: 13.5px; flex-wrap: wrap;
  }
  table.tbl tr.aberto td[data-papel="extra"]::before {
    content: attr(data-rotulo); flex: 0 0 auto; text-align: left; color: var(--texto-3);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
  }
  /* O "ver tudo" é secundário, mas não é texto solto: mesma pílula, sem o peso da cor
     cheia — ele não disputa com "entrar" e ainda assim se lê como botão. */
  table.tbl td[data-papel="acoes"] .ver-tudo {
    flex: 0 0 auto; min-width: 0; background: var(--acento-fraco); border: 0;
    color: var(--acento); text-decoration: none; border-radius: 99px;
    padding: 0 15px; font-weight: 600; font-size: 13.5px;
  }
  table.tbl td[data-papel="acoes"] .ver-tudo:hover { color: var(--texto); }
}
/* No computador a tabela mostra tudo: nada de esconder coluna em tela larga. */
@media (min-width: 861px) { .ver-tudo { display: none; } }


/* ══════════════════════════════════════════════════════════════════════════════════════════
   📄 MODO LISTA — para tabela de poucas colunas (06/10/2026)

   "Precisam de atenção", filas do servidor, últimos erros: três colunas no computador, uma
   LINHA no celular. Sem moldura, sem rótulo em caixa alta, sem cartão — o nome manda, o dado
   explica embaixo e a ação fica à direita, onde o polegar chega.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* 🔴 OS DADOS SE SOBREPUNHAM (07/10/2026). No grid, todo `dado` ia para `grid-row: 2;
     grid-column: 1` — a MESMA célula. Com um dado só ninguém via; com dois, "08/10/2026"
     ficava impresso por cima de "R$ 399,00". Em flex eles ficam lado a lado por natureza,
     quantos forem, e a ação ganha a fileira de baixo inteira (que é onde cabem três botões
     no telefone, em vez de um empilhado em cima do outro). */
  table.tbl.lista tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--linha);
    border-radius: 0;
    padding: 12px 2px;
    margin: 0;
  }
  table.tbl.lista tr:last-child { border-bottom: 0; }

  table.tbl.lista td[data-papel="titulo"] {
    flex: 1 1 100%; order: 1;
    border: 0; padding: 0; margin: 0;
    font-size: 15px; font-weight: 600;
  }
  table.tbl.lista td[data-papel="dado"] {
    flex: 0 1 auto; order: 2;
    display: block; text-align: left;
    border: 0; padding: 2px 0 0;
    font-size: 12.5px; color: var(--texto-2);
  }
  table.tbl.lista td[data-papel="dado"]::before { content: none; }
  table.tbl.lista td[data-papel="acoes"] {
    flex: 1 1 100%; order: 3;
    border: 0; padding: 0; margin: 8px 0 0;
    justify-content: flex-start;
  }
  table.tbl.lista td[data-papel="acoes"] button,
  table.tbl.lista td[data-papel="acoes"] .acao { min-width: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
   📃 LISTA DENSA — o padrão do CheckCred (06/10/2026)

   O dono, olhando o cartão resumido: *"continua grande, quero que diminua, lista mesmo"*.
   Cartão com rótulo em cima do valor, um por linha, ainda gasta cinco linhas por item. Lista
   de verdade é DUAS: o nome na primeira, os dados correndo na segunda, separados por ponto,
   e a ação na direita. Linha de ~68px em vez de ~190px — cabem oito agências numa tela de
   celular, em vez de duas.

   Vale para TODA tabela do painel (a de 9 colunas também): as colunas que não entram no
   resumo continuam atrás do "ver tudo", e aí sim aparecem como rótulo e valor.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  table.tbl tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--linha);
    border-radius: 0;
    padding: 11px 2px 12px;
    margin: 0;
  }
  table.tbl tr:last-child { border-bottom: 0; }

  /* 1ª linha: o nome, ocupando a largura toda menos a ação */
  table.tbl td[data-papel="titulo"] {
    flex: 1 1 60%;
    display: block;
    order: 1;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
  }
  table.tbl td[data-papel="titulo"]::before { content: none; }

  /* 2ª linha: os dados do resumo, correndo um atrás do outro */
  table.tbl td[data-papel="dado"] {
    flex: 0 0 auto;
    order: 3;
    display: inline-block;
    width: auto;
    border: 0;
    padding: 0;
    margin: 2px 0 0;
    text-align: left;
    font-size: 12.5px;
    color: var(--texto-2);
  }
  table.tbl td[data-papel="dado"]::before {
    content: attr(data-rotulo) " ";
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    color: var(--texto-3);
    margin-right: 2px;
  }
  /* ponto separando os dados, menos no primeiro */
  table.tbl td[data-papel="dado"] ~ td[data-papel="dado"]::before {
    content: "· " attr(data-rotulo) " ";
  }

  /* a ação fica na direita, na altura do nome */
  table.tbl td[data-papel="acoes"] {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    border: 0;
    padding: 0;
    gap: 6px;
  }
  table.tbl td[data-papel="acoes"] button,
  table.tbl td[data-papel="acoes"] .acao {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 34px;
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 9px;
  }
  table.tbl td[data-papel="acoes"] .ver-tudo { padding: 7px 4px; min-height: 34px; }

  /* o que estava escondido continua como rótulo e valor, agora que há espaço para ler */
  table.tbl tr.aberto td[data-papel="extra"] {
    order: 4;
    flex: 1 1 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 4px 0 0;
    font-size: 13px;
  }
  table.tbl tr.aberto td[data-papel="extra"]::before {
    content: attr(data-rotulo);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .5px;
  }

  /* a pílula encolhe junto: dentro da linha ela é etiqueta, não bloco */
  table.tbl td .pilula { font-size: 11.5px; padding: 2px 7px; }
}


/* Ordem da linha densa, corrigida no render (06/10/2026): o nome sozinho na primeira linha, e
   na segunda os dados correndo com as ações à direita. Antes a pílula do plano subia para a
   primeira linha e ficava espremida entre o nome e os botões. */
@media (max-width: 860px) {
  table.tbl td[data-papel="titulo"] { flex: 1 1 100%; }
  table.tbl td[data-papel="dado"] { order: 2; }
  table.tbl td[data-papel="acoes"] { order: 3; margin-left: auto; align-self: center; }
  table.tbl tr.aberto td[data-papel="extra"] { order: 4; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
   📐 ALINHAMENTO NO CELULAR — varredura de 06/10/2026

   Peças que estavam cada uma com uma altura e uma largura diferentes fazendo a mesma coisa.
   Em tela estreita isso aparece como degrau: um campo largo, um botão curto, um cartão mais
   alto que o vizinho. Aqui elas passam a concordar.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* 1. barra de filtros: tudo em coluna e com a mesma largura — meia-largura em 390px não
        cabe texto nem dedo. */
  .filtros { flex-direction: column; align-items: stretch; gap: 10px; }
  .filtros > * { width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; }
  .filtros .conta { text-align: left; }

  /* 2. pílulas de filtro com a mesma altura e alvo de toque decente */
  .filtro-grupo { gap: 8px; }
  .filtro { min-height: 38px; display: inline-flex; align-items: center; gap: 5px; }
  .filtro-grupo .rot { min-width: 0; width: 100%; margin: 0 0 2px; }

  /* 3. cartões de número com a MESMA altura na linha: rótulo de duas linhas não pode deixar
        um cartão mais alto que o outro. */
  .cartas { grid-auto-rows: 1fr; }
  .carta { display: flex; flex-direction: column; justify-content: flex-start; }
  .carta .r { margin-top: auto; padding-top: 6px; }

  /* 4. o bloco de abertura e os cartões respeitam a mesma margem lateral da tela */
  .abertura, .cartas, .filtro-grupo, .filtros, table.tbl { max-width: 100%; }
}


/* "ver tudo" saía pela borda em 360px quando a linha tinha três ações (e-mail, WhatsApp, Pix).
   As ações passam a quebrar linha dentro da própria célula, em vez de empurrar a última para
   fora da tela. Medido em 360px: era o único ponto que ainda vazava. */
@media (max-width: 860px) {
  table.tbl td[data-papel="acoes"] { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
  table.tbl.lista td[data-papel="acoes"] { justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   🔴 OS BOTÕES EMPILHAVAM DE 401px PARA CIMA — e só de 401px para cima (07/10/2026)

   Foto do dono, Financeiro no telefone: E-mail, WhatsApp, Pix, Dar baixa e Ver tudo, **um
   embaixo do outro**, 308px de altura para UMA cobrança. Em 390px a mesma tela fechava em
   duas fileiras. O telefone dele tem 440px — e a faixa de 401 a 860px era a única sem a
   regra abaixo, que até aqui só valia até 400px.

   A causa é de sizing, não de gosto: `.cel-acoes` é uma grade
   `repeat(auto-fit, minmax(88px, 1fr))`, e **auto-fit só sabe quantas colunas cabem quando a
   largura do contentor é DEFINIDA**. Na faixa larga a célula era `flex: 0 0 auto` (largura
   pelo conteúdo = indefinida), e nesse caso a regra manda repetir **uma vez só**: uma coluna,
   um botão por fileira. Abaixo de 400px a célula virava `flex: 1 1 100%` — largura definida —
   e aí a mesma grade abria quatro colunas.

   🔑 Grade com `auto-fit`/`auto-fill` dentro de caixa que encolhe para o conteúdo sempre
   desaba para uma coluna. Ou a largura é definida, ou a grade não é a ferramenta.

   Então a ação ganha a fileira inteira em TODO o celular (≤860px), não só no aparelho
   estreito: a grade volta a contar colunas de verdade e os botões ficam lado a lado.
   Medido: em 440px as cinco ações do Financeiro passam de 5 fileiras (308px de linha) para
   2 (164px); as quatro de Agências fecham em uma só.

   O modo LISTA (tabela de até duas colunas de dado — Visão geral, Servidor) fica de fora:
   lá a célula já é de largura definida e a ação mora à direita do nome, que é o desenho
   pedido. Mexer nele só acrescentaria fileira a quem já estava certo. */
@media (max-width: 860px) {
  table.tbl td[data-papel="acoes"] { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
  table.tbl.lista td[data-papel="acoes"] { flex: 1 1 100%; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
   ☀️ TEMA CLARO — as peças que tinham cor fixa de tema escuro (06/10/2026)

   O dono: *"no modo claro fica aparecendo campos escuros em preto"*. A paleta em variáveis
   está certa e vira clara sozinha; o que não virava eram os lugares onde a cor foi escrita à
   mão — trilhos de barra em #0e1114, interruptores em #2a333d, véus de branco a 1,5% (que no
   escuro clareiam e no claro somem), avatar em #2a2a36. Cada um aqui recebe o equivalente
   claro, pela MESMA variável que o resto da tela usa.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
:root[data-tema="claro"] .barra,
:root[data-tema="claro"] .cota .barra { background: var(--superficie-3); }
:root[data-tema="claro"] .metas-card .geral { background: var(--superficie-3); }
:root[data-tema="claro"] th { background: var(--superficie-2); }
:root[data-tema="claro"] nav.lado::-webkit-scrollbar-thumb { background: var(--linha-forte); }
:root[data-tema="claro"] .pulso.parado { background: var(--linha-forte); }
:root[data-tema="claro"] .chave i { background: var(--linha-forte); }
:root[data-tema="claro"] .fundo-modal { background: rgba(16,24,40,.45); }
:root[data-tema="claro"] .avatar,
:root[data-tema="claro"] .inicial { background: var(--superficie-3); color: var(--texto); }

/* As peças novas do redesenho seguem a mesma regra: superfície e linha vêm da paleta, então
   mudam de tema sozinhas.

   🔴 AQUI MORAVA UM BOTÃO INVISÍVEL (07/10/2026 — *"quando o tema está na cor clara, os
   botões não aparecem"*). Esta regra dava à ação do cartão o fundo `--superficie-2`, que no
   claro é quase branco. Fazia sentido quando o botão era uma caixa apagada com texto escuro;
   quando ele virou pílula azul de texto BRANCO, virou branco sobre branco — o botão some e
   só aparece se o dedo passar por cima.

   🔑 **Cor de fundo escrita à mão para um tema só é uma dívida**: ela não acompanha quem
   mudar o componente depois. O botão azul usa `--acento`, que já é o mesmo nos dois temas —
   então aqui não fica nada, de propósito. */
:root[data-tema="claro"] .atalho .bolha { background: var(--superficie-2); }

/* Campo de formulário: no claro ele precisa ser BRANCO com borda, não o cinza do fundo —
   senão parece desabilitado. */
:root[data-tema="claro"] input,
:root[data-tema="claro"] select,
:root[data-tema="claro"] textarea { background: var(--superficie); color: var(--texto); }
:root[data-tema="claro"] input::placeholder,
:root[data-tema="claro"] textarea::placeholder { color: var(--texto-3); }