/* ============================================================
   PORTAL DO CLIENTE PIE — estilo
   MOBILE-FIRST de propósito: as regras-base valem para celular e as media
   queries CRESCEM a partir daí (min-width). O painel admin nasceu desktop-first
   e o retrofit de mobile custou uma rodada inteira — não repetir.
   Paleta = a mesma da marca (preto + dourado) do painel admin.
   ============================================================ */
:root {
  /* ---- cor: superfícies e texto ---- */
  --bg: #0a0805; --bg2: #14100a; --card: #17130c; --card2: #1f1910;
  --tx: #f5efe2; --tx2: #b9a97f; --line: #3a2f18;

  /* ---- cor: estado semântico ----
     Sóbrio de propósito. Verde/amarelo/vermelho aqui informam, não comemoram:
     dessaturados o bastante pra conviver com o dourado sem brigar com ele. */
  --ok: #4ba97f; --warn: #c9a227; --err: #cf6a5e;
  --ok-bg: rgba(75,169,127,.10); --warn-bg: rgba(201,162,39,.10); --err-bg: rgba(207,106,94,.10);
  --ok-ln: rgba(75,169,127,.30); --warn-ln: rgba(201,162,39,.30); --err-ln: rgba(207,106,94,.32);

  /* ---- cor: o dourado é ACENTO ----
     Uma cor de ação por tela. Se tudo é dourado, nada é — e o olho perde onde
     clicar. Superfície e texto usam grafite; o dourado marca a ação principal,
     o dado em destaque e o foco. Nada mais. */
  --ac: #d4af37; --ac2: #f0cf6b; --ac-tx: #1a1408;
  --ac-fraco: rgba(212,175,55,.13); --ac-linha: rgba(212,175,55,.32);

  /* ---- escala tipográfica ----
     Sete degraus, e só. Tamanho escolhido "no olho" a cada componente é o que
     faz uma tela parecer remendada: 15px aqui, 15.5 ali, 17 acolá. Todo
     font-size deste arquivo sai daqui. */
  --fs-1: 11px;   /* selo, rótulo micro */
  --fs-2: 12px;   /* auxiliar, legenda */
  --fs-3: 13px;   /* secundário */
  --fs-4: 14px;   /* corpo */
  --fs-5: 16px;   /* corpo grande e TODO input (abaixo disto o iOS dá zoom) */
  --fs-6: 18px;   /* título de seção */
  --fs-7: 22px;   /* título de tela */
  --fs-8: 28px;   /* número herói */

  /* ---- grade de espaçamento (base 4) ---- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px;

  /* ---- forma ---- */
  --r-p: 8px; --r-m: 10px; --r-g: 14px; --r-gg: 18px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgba(0,0,0,.30);
  --sombra-2: 0 6px 20px rgba(0,0,0,.35);
  --sombra-3: 0 20px 60px rgba(0,0,0,.50);

  /* ---- movimento ----
     Curto. Transição longa em interface de trabalho vira espera. */
  --mv: 160ms cubic-bezier(.2,.6,.3,1);
  --mv-lento: 220ms cubic-bezier(.2,.6,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --mv: 1ms; --mv-lento: 1ms; }
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* [hidden] SEMPRE esconde — reforço obrigatório. AUDITADO POR NAVEGADOR 20/08:
   `.modal` tinha `display: flex` (linha ~383) e o atributo HTML `hidden` NÃO
   removia o modal, porque um `display` explícito no CSS VENCE o `hidden` padrão
   do user-agent. Resultado: o modal ficava sempre renderizado, invisível mas com
   `position: fixed; inset: 0; z-index: 300` — interceptando TODO clique da tela
   do agente. O dono via o modal "preso" e nenhum botão respondia, porque o
   próprio modal comia os cliques. Uma linha de CSS faltando travava a tela
   inteira. Esta regra, com !important, garante que hidden vença qualquer display
   em TODO elemento do portal — não só neste modal. */
[hidden] { display: none !important; }
body {
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  background: radial-gradient(900px 500px at 80% -10%, #241c0c 0%, var(--bg) 55%);
  color: var(--tx); min-height: 100vh; font-size: var(--fs-5);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ---------- ÍCONES ----------
   Herdam a cor de quem os contém e alinham pelo texto. O `flex-shrink:0` existe
   porque ícone espremido num flex apertado deforma o desenho — e um cadeado
   achatado é pior que nenhum cadeado. */
.ico {
  width: 18px; height: 18px; flex-shrink: 0;
  vertical-align: -3px; display: inline-block;
}
.ico-p { width: 14px; height: 14px; vertical-align: -2px; }
.ico-g { width: 22px; height: 22px; vertical-align: -4px; }
.ico-gg { width: 30px; height: 30px; vertical-align: -6px; }
.ico-faltando { color: var(--err); }   /* nome errado no registro: aparece, não some */

/* ---------- FOCO DE TECLADO ----------
   Uma regra, todo elemento interativo. Sem isto, quem navega por Tab fica cego
   dentro da própria conta. `:focus-visible` não pune quem usa mouse. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ac2);
  outline-offset: 2px;
  border-radius: var(--r-p);
}

/* Números em tabela e em métrica alinham pela coluna, não pela largura do
   glifo — senão 1.111 parece menor que 999. */
.tabular, .m-num, .num, td.num, .card .linha b { font-variant-numeric: tabular-nums; }

/* ---------- login ---------- */
.login-body { display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  background: linear-gradient(160deg, var(--card) 0%, var(--bg2) 100%);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 22px; width: 100%; max-width: 420px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: sobe .45s ease;
}
.login-logo-img { width: min(210px, 66%); height: auto; display: block; margin: 0 auto 16px; }
.login-card h1 { font-size: var(--fs-7); margin-bottom: 4px; }
.login-card .sub { color: var(--tx2); font-size: var(--fs-3); margin-bottom: 24px; }
.login-card label { display: block; text-align: left; color: var(--tx2); font-size: var(--fs-2); margin: 0 0 6px 2px; }
.login-card input {
  width: 100%; padding: 14px 15px; border-radius: 10px; border: 1px solid var(--line);
  background: #0d0a05; color: var(--tx); font-size: var(--fs-5); /* 16px evita o zoom automático do iOS */
  outline: none; transition: border .2s; margin-bottom: 14px;
}
.login-card input:focus { border-color: var(--ac); }
.login-card button {
  width: 100%; padding: 15px; border: none; border-radius: 10px;
  background: linear-gradient(90deg, var(--ac), var(--ac2)); color: var(--ac-tx);
  font-size: var(--fs-5); font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .2s;
}
.login-card button:active { transform: scale(.985); }
.login-card .rodape { color: var(--tx2); font-size: var(--fs-2); margin-top: 22px; line-height: 1.6; }
.login-card .rodape a { color: var(--ac); text-decoration: none; }
.erro { color: var(--err); font-size: var(--fs-3); margin-top: 10px; min-height: 18px; }

/* ---------- shell ---------- */
header {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); background: rgba(12,9,4,.9);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50;
}
header .marca { height: 28px; width: auto; display: block; }
header .quem { margin-left: auto; text-align: right; line-height: 1.25; min-width: 0; }
header .quem b { font-size: var(--fs-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw; }
header .quem span { color: var(--tx2); font-size: var(--fs-1); }
header button {
  background: none; border: 1px solid var(--line); color: var(--tx2);
  border-radius: 9px; padding: 10px 12px; cursor: pointer; font-size: var(--fs-3); flex-shrink: 0;
}
main { padding: 16px 14px 48px; max-width: 1100px; margin: 0 auto; }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.card h2 { font-size: var(--fs-5); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card .linha { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(58,47,24,.5); font-size: var(--fs-4); }
.card .linha:last-child { border-bottom: none; }
.card .linha span { color: var(--tx2); flex-shrink: 0; }
.card .linha b { text-align: right; word-break: break-word; }

.destaque { background: linear-gradient(150deg, var(--card2) 0%, var(--card) 100%); border-color: #4a3b1c; }
.plano-nome { font-size: var(--fs-8); font-weight: 800; color: var(--ac2); letter-spacing: .5px; }
.plano-preco { color: var(--tx2); font-size: var(--fs-4); margin-top: 4px; }
.plano-preco .fonte { display: block; font-size: var(--fs-1); opacity: .65; margin-top: 6px; }

.estado { display: flex; align-items: center; gap: 10px; font-size: var(--fs-5); font-weight: 600; }
.bola { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.bola.cinza { background: #6b6250; } .bola.verde { background: var(--ok); }
.bola.amarela { background: var(--warn); } .bola.vermelha { background: var(--err); }
.detalhe { color: var(--tx2); font-size: var(--fs-3); margin-top: 8px; line-height: 1.55; }

/* ---------- recursos com cadeado (gating) ---------- */
.rec { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(58,47,24,.5); }
.rec:last-child { border-bottom: none; }
.rec .ico { font-size: var(--fs-6); line-height: 1.3; flex-shrink: 0; }
.rec .txt { flex: 1; min-width: 0; }
.rec .txt b { font-size: var(--fs-4); }
.rec .txt small { display: block; color: var(--tx2); font-size: var(--fs-2); margin-top: 2px; line-height: 1.45; }
.rec.travado { opacity: .62; }
.rec.travado .txt b { color: var(--tx2); }
.tag-up {
  background: rgba(212,175,55,.14); color: var(--ac2); border: 1px solid rgba(212,175,55,.32);
  border-radius: 999px; padding: 3px 9px; font-size: var(--fs-1); font-weight: 700;
  white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}
.btn-up {
  display: block; width: 100%; margin-top: 14px; padding: 14px; text-align: center;
  border-radius: 10px; background: linear-gradient(90deg, var(--ac), var(--ac2));
  color: var(--ac-tx); font-weight: 700; text-decoration: none; font-size: var(--fs-5);
}

.aviso-teste {
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3);
  color: var(--warn); border-radius: 10px; padding: 11px 13px; font-size: var(--fs-3);
  margin-bottom: 14px; line-height: 1.5;
}
.carregando { color: var(--tx2); text-align: center; padding: 40px 0; font-size: var(--fs-4); }

@keyframes sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- daqui pra cima: telas maiores ---------- */
@media (min-width: 700px) {
  header { padding: 14px 24px; gap: 14px; }
  header .marca { height: 32px; }
  header .quem b { max-width: none; font-size: var(--fs-4); }
  main { padding: 22px 24px 60px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .card { padding: 20px; }
  .larga { grid-column: 1 / -1; }
  .login-card { padding: 40px 36px; }
}
@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .meia { grid-column: span 2; }
}

/* ---------- faixa do modo suporte ("vendo como") ---------- */
.faixa-como {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: linear-gradient(90deg, #7a1d1d, #a83232);
  color: #ffeaea; font-size: var(--fs-3); line-height: 1.4;
  padding: 10px 14px; display: flex; gap: 10px; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.faixa-como b { color: #fff; }
.faixa-como a {
  color: #fff; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; padding: 7px 12px; text-decoration: none; white-space: nowrap; font-weight: 600;
}
/* empurra a página pra baixo: faixa escondida atrás do cabeçalho não avisa ninguém */
body.com-faixa header { top: 58px; }
body.com-faixa { padding-top: 58px; }
@media (min-width: 700px) { body.com-faixa header { top: 44px; } body.com-faixa { padding-top: 44px; } }

/* ============================================================
   EDITOR DO AGENTE — mobile-first (o dono edita do celular)
   As regras-base valem para 375px; as media queries crescem daí.
   ============================================================ */
.editor-body header .voltar {
  color: var(--tx2); text-decoration: none; font-size: var(--fs-7); line-height: 1;
  padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0;
}
.editor-body header .quem span { color: var(--ac2); }

/* ---------- tarja rascunho: fica visivel o tempo todo ---------- */
.tarja-rascunho {
  background: linear-gradient(90deg, #4a3a10, #6b5316);
  color: #fff6dc; font-size: var(--fs-3); line-height: 1.45;
  padding: 10px 14px; display: flex; gap: 10px; align-items: center;
  justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #7a6320;
}
.tarja-rascunho button {
  background: linear-gradient(90deg, var(--ac), var(--ac2)); color: var(--ac-tx);
  border: none; border-radius: 8px; padding: 8px 14px; font-weight: 700;
  font-size: var(--fs-3); cursor: pointer; white-space: nowrap;
}

.editor { display: block; padding: 14px; max-width: 1300px; margin: 0 auto; }

/* ---------- grupos ---------- */
.grupos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 4px; -webkit-overflow-scrolling: touch; }
.grupos::-webkit-scrollbar { height: 3px; }
.grupos::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.grupo {
  background: var(--card); border: 1px solid var(--line); color: var(--tx2);
  border-radius: 12px; padding: 10px 13px; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 7px; font-size: var(--fs-3);
  transition: border-color .18s, color .18s, transform .12s;
}
.grupo:active { transform: scale(.97); }
.grupo.on { color: var(--tx); border-color: var(--ac); background: var(--card2); }
.grupo .g-ico { font-size: var(--fs-5); }
.grupo .g-cont { color: var(--tx2); font-size: var(--fs-1); opacity: .8; }

/* ---------- campo ---------- */
.campo {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px; margin-bottom: 12px; animation: sobe .28s ease;
}
.campo.com-erro { border-color: var(--err); }
.campo-nome { display: block; font-size: var(--fs-4); font-weight: 600; margin-bottom: 9px; }
.campo-ajuda { color: var(--tx2); font-size: var(--fs-2); line-height: 1.5; margin-top: 8px; }
.campo-erro { display: none; color: var(--err); font-size: var(--fs-3); margin-top: 7px; }
.campo-erro.on { display: block; }
.campo input[type=text], .campo input[type=number], .campo textarea {
  width: 100%; padding: 12px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: #0d0a05; color: var(--tx); font-size: var(--fs-5);
  font-family: inherit; outline: none; transition: border-color .18s;
}
.campo input:focus, .campo textarea:focus { border-color: var(--ac); }
.campo textarea { resize: vertical; line-height: 1.5; }
.contador { display: block; text-align: right; color: var(--tx2); font-size: var(--fs-1); margin-top: 5px; opacity: .7; }

/* chave liga/desliga */
.chave { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.chave input { position: absolute; opacity: 0; width: 0; height: 0; }
.chave .pino {
  width: 46px; height: 26px; border-radius: 999px; background: #2a2314;
  border: 1px solid var(--line); position: relative; transition: background .2s; flex-shrink: 0;
}
.chave .pino::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--tx2); transition: transform .2s, background .2s;
}
.chave input:checked + .pino { background: rgba(212,175,55,.28); border-color: var(--ac); }
.chave input:checked + .pino::after { transform: translateX(20px); background: var(--ac2); }
.chave-txt { font-size: var(--fs-3); color: var(--tx2); }

/* listas, servicos, faq */
.lista-item, .serv-item, .faq-item {
  display: grid; gap: 7px; margin-bottom: 9px; padding-bottom: 9px;
  border-bottom: 1px dashed rgba(58,47,24,.6);
}
.lista-item { grid-template-columns: 1fr auto; align-items: center; }
.serv-item { grid-template-columns: 1fr 90px auto; }
.serv-item .s-desc { grid-column: 1 / -1; }
.faq-item { grid-template-columns: 1fr auto; }
.faq-item .f-resp { grid-column: 1 / -1; }
.x {
  background: none; border: 1px solid var(--line); color: var(--err);
  border-radius: 8px; width: 38px; height: 38px; cursor: pointer; font-size: var(--fs-6); line-height: 1;
}
.add {
  background: none; border: 1px dashed var(--line); color: var(--ac2);
  border-radius: 10px; padding: 10px 14px; cursor: pointer; font-size: var(--fs-3); width: 100%;
  transition: border-color .18s;
}
.add:hover { border-color: var(--ac); }

/* cadeado */
.campo.travado { opacity: .78; border-style: dashed; }
.campo.travado .campo-nome { color: var(--tx2); }
.upgrade {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 11px; padding: 11px 12px;
  background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.28); border-radius: 10px;
}
.upgrade span { font-size: var(--fs-3); color: var(--tx2); }
.upgrade b { color: var(--ac2); }
.btn-upgrade {
  background: linear-gradient(90deg, var(--ac), var(--ac2)); color: var(--ac-tx);
  border-radius: 8px; padding: 9px 14px; text-decoration: none; font-weight: 700;
  font-size: var(--fs-3); white-space: nowrap;
}

/* acoes */
.acoes { display: flex; gap: 10px; margin-top: 4px; }
.acoes button { flex: 1; padding: 14px; border: none; border-radius: 11px; font-size: var(--fs-5); font-weight: 700; cursor: pointer; transition: transform .12s, background .2s; }
.acoes button:active { transform: scale(.98); }
.btn-salvar { background: var(--card2); color: var(--tx); border: 1px solid var(--line) !important; }
.btn-salvar.ok { background: rgba(52,211,153,.18); color: var(--ok); border-color: var(--ok) !important; }
.btn-publicar { background: linear-gradient(90deg, var(--ac), var(--ac2)); color: var(--ac-tx); }
.nota-acoes { color: var(--tx2); font-size: var(--fs-2); text-align: center; margin-top: 9px; }

/* ---------- chat de teste ---------- */
.coluna-chat {
  margin-top: 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
}
.chat-topo { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px 0; }
.chat-titulo { font-size: var(--fs-4); font-weight: 600; }
.chat-limpar { background: none; border: none; color: var(--tx2); font-size: var(--fs-2); cursor: pointer; text-decoration: underline; }
.chat-nota { color: var(--tx2); font-size: var(--fs-2); padding: 5px 15px 11px; line-height: 1.45; }
.chat-bolhas {
  padding: 12px 14px; min-height: 220px; max-height: 46vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; background: #0c0904;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.chat-vazio { color: var(--tx2); font-size: var(--fs-3); text-align: center; margin: auto; line-height: 1.7; }
.chat-vazio i { color: var(--ac2); font-style: normal; }
.b {
  max-width: 82%; padding: 9px 12px; border-radius: 13px; font-size: var(--fs-4);
  line-height: 1.45; white-space: pre-wrap; word-break: break-word; animation: sobe .22s ease;
}
.b.cliente { align-self: flex-end; background: #235c3f; color: #eafff3; border-bottom-right-radius: 4px; }
.b.agente { align-self: flex-start; background: var(--card2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.b.dono { align-self: center; background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.3); color: var(--ac2); font-size: var(--fs-3); max-width: 96%; }
.b.erro { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); color: var(--err); }
.b.digitando { display: flex; gap: 4px; align-items: center; padding: 13px 14px; }
.ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--tx2); animation: pisca 1.1s infinite; }
.ponto:nth-child(2) { animation-delay: .18s; }
.ponto:nth-child(3) { animation-delay: .36s; }
@keyframes pisca { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.chat-envio { display: flex; gap: 8px; padding: 11px; }
.chat-envio input {
  flex: 1; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #0d0a05; color: var(--tx); font-size: var(--fs-5); outline: none;
}
.chat-envio input:focus { border-color: var(--ac); }
.chat-envio button {
  width: 46px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: var(--ac-tx); font-size: var(--fs-6); cursor: pointer; flex-shrink: 0;
}
.chat-envio button:disabled { opacity: .5; cursor: default; }

/* ---------- modal e toast ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 18px; }
.modal-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px; width: 100%; max-width: 400px; animation: sobe .25s ease; }
.modal-card h3 { font-size: var(--fs-6); margin-bottom: 10px; }
.modal-card p { color: var(--tx2); font-size: var(--fs-4); line-height: 1.55; margin-bottom: 20px; }
.modal-acoes { display: flex; gap: 10px; }
.modal-acoes button { flex: 1; padding: 13px; border: none; border-radius: 10px; font-size: var(--fs-4); font-weight: 700; cursor: pointer; }
.btn-fantasma { background: none; border: 1px solid var(--line) !important; color: var(--tx2); }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--card2); border: 1px solid var(--line); color: var(--tx);
  padding: 13px 18px; border-radius: 11px; font-size: var(--fs-4); z-index: 400;
  max-width: min(460px, 92vw); box-shadow: 0 10px 34px rgba(0,0,0,.5); animation: sobe .24s ease;
}
.toast.ok { border-color: var(--ok); color: var(--ok); }
.toast.erro { border-color: var(--err); color: var(--err); }
.toast.aviso { border-color: var(--warn); color: var(--warn); }

/* ---------- telas maiores: formulario e chat lado a lado ---------- */
@media (min-width: 900px) {
  .editor { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 20px; align-items: start; padding: 20px 24px 60px; }
  .coluna-chat { margin-top: 0; position: sticky; top: 84px; }
  .chat-bolhas { max-height: 52vh; min-height: 320px; }
  .serv-item { grid-template-columns: 1fr 100px 1fr auto; }
  .serv-item .s-desc { grid-column: auto; }
}

/* ============================================================
   CRM E METRICAS — mobile-first
   ============================================================ */
.crm { padding: 14px; max-width: 1300px; margin: 0 auto; }
.secao { font-size: var(--fs-4); font-weight: 600; margin: 4px 0 11px; }

/* metricas */
.m-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
.m-card { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 14px; animation: sobe .26s ease; }
.m-valor { font-size: var(--fs-8); font-weight: 800; color: var(--ac2); line-height: 1.1; }
.m-valor .m-vazio { font-size: var(--fs-3); font-weight: 500; color: var(--tx2); display: block; line-height: 1.45; }
.m-rotulo { font-size: var(--fs-3); margin-top: 6px; }
.m-base { font-size: var(--fs-1); color: var(--tx2); margin-top: 4px; opacity: .75; }

/* filtros */
.crm-filtros { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-bottom: 14px; }
.crm-filtros input, .crm-filtros select {
  padding: 12px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: #0d0a05; color: var(--tx); font-size: var(--fs-5); outline: none; font-family: inherit;
}
.crm-filtros input { grid-column: 1 / -1; }
.crm-filtros input:focus, .crm-filtros select:focus { border-color: var(--ac); }
.btn-export {
  display: flex; align-items: center; justify-content: center;
  background: var(--card2); border: 1px solid var(--line); color: var(--ac2);
  border-radius: 10px; padding: 12px 16px; text-decoration: none; font-size: var(--fs-3); font-weight: 600;
}

/* pipeline */
.pipeline { display: grid; grid-template-columns: 1fr; gap: 12px; }
.coluna { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px; animation: sobe .28s ease; }
.coluna header { display: flex; align-items: center; gap: 8px; font-size: var(--fs-4); }
.coluna header .c-n { margin-left: auto; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: var(--fs-2); color: var(--tx2); }
.coluna .c-desc { color: var(--tx2); font-size: var(--fs-2); margin: 6px 0 10px; line-height: 1.45; }
.col-quente { border-color: #6b3a1a; }
.col-fechou { border-color: #245c3f; }
.col-nao_fechou { border-color: #5c2424; }
.c-lista { display: flex; flex-direction: column; gap: 8px; }
.col-vazia { color: var(--tx2); font-size: var(--fs-2); text-align: center; padding: 14px 0; opacity: .7; }
.lead {
  width: 100%; text-align: left; background: var(--card2); border: 1px solid var(--line);
  border-radius: 11px; padding: 11px 12px; cursor: pointer; color: var(--tx);
  display: flex; flex-direction: column; gap: 3px; transition: border-color .16s, transform .12s;
}
.lead:hover { border-color: var(--ac); }
.lead:active { transform: scale(.99); }
.lead b { font-size: var(--fs-4); }
.lead .l-ramo { font-size: var(--fs-2); color: var(--tx2); }
.lead .l-motivo { font-size: var(--fs-2); color: var(--err); font-style: italic; }
.lead .l-quando { font-size: var(--fs-1); color: var(--tx2); opacity: .75; margin-top: 2px; }

/* estados vazios e bloqueio */
.vazio, .bloqueado {
  background: var(--card); border: 1px dashed var(--line); border-radius: 14px;
  padding: 30px 20px; text-align: center; animation: sobe .3s ease;
}
.v-ico, .bl-ico { font-size: var(--fs-8); margin-bottom: 10px; }
.vazio h3, .bloqueado h3 { font-size: var(--fs-5); margin-bottom: 8px; }
.vazio p, .bloqueado p { color: var(--tx2); font-size: var(--fs-3); line-height: 1.6; max-width: 420px; margin: 0 auto; }
.vazio .v-nota { margin-top: 12px; color: var(--warn); font-size: var(--fs-3); }
.bloqueado b { color: var(--ac2); }
.bloqueado .btn-upgrade { display: inline-block; margin-top: 16px; }
.vazio-nota { color: var(--err); font-size: var(--fs-3); text-align: center; padding: 20px; }
.carregando { color: var(--tx2); text-align: center; padding: 40px 0; font-size: var(--fs-4); }

/* ficha do lead */
.ficha-card { position: relative; max-width: 420px; }
.ficha-x { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--tx2); font-size: var(--fs-7); cursor: pointer; line-height: 1; }
.ficha-card h3 { font-size: var(--fs-6); margin-bottom: 12px; padding-right: 30px; }
.ficha-zap {
  display: block; text-align: center; background: #235c3f; color: #eafff3;
  border-radius: 10px; padding: 11px; text-decoration: none; font-weight: 600;
  font-size: var(--fs-4); margin-bottom: 14px;
}
.ficha-card .linha { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(58,47,24,.5); font-size: var(--fs-3); }
.ficha-card .linha:last-child { border-bottom: none; }
.ficha-card .linha span { color: var(--tx2); flex-shrink: 0; }
.ficha-card .linha b { text-align: right; word-break: break-word; }

@media (min-width: 700px) {
  .m-grade { grid-template-columns: repeat(4, 1fr); }
  .crm-filtros { grid-template-columns: 1fr 190px auto; }
  .crm-filtros input { grid-column: auto; }
  .crm { padding: 20px 24px 60px; }
}
@media (min-width: 1000px) {
  .pipeline { grid-template-columns: repeat(4, 1fr); align-items: start; }
}

/* ============================================================
   MENU LATERAL + FERRAMENTAS — mobile-first (375px de base)
   No celular o menu é uma gaveta; a partir de 1000px fica fixo à esquerda.
   ============================================================ */
.nav-lateral {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); z-index: 250;
  background: linear-gradient(180deg, var(--card) 0%, var(--bg2) 100%);
  border-right: 1px solid var(--line); overflow-y: auto;
  transform: translateX(-102%); transition: transform .24s ease;
  padding: 16px 12px 26px;
}
body.nav-aberto .nav-lateral { transform: none; box-shadow: 8px 0 40px rgba(0,0,0,.6); }
.nav-topo { padding: 6px 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.nav-topo b { display: block; font-size: var(--fs-4); }
.nav-topo span { color: var(--ac2); font-size: var(--fs-2); }
.nav-lateral ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px;
  border-radius: 11px; text-decoration: none; color: var(--tx);
  border: 1px solid transparent; transition: background .16s, border-color .16s;
}
.nav-item:hover { background: var(--card2); }
.nav-item.on { background: var(--card2); border-color: var(--ac); }
.nav-ico { font-size: var(--fs-6); line-height: 1.2; flex-shrink: 0; }
.nav-txt { flex: 1; min-width: 0; }
.nav-txt b { display: block; font-size: var(--fs-4); }
.nav-txt small { display: block; color: var(--tx2); font-size: var(--fs-1); line-height: 1.4; margin-top: 2px; }
.nav-item.e-cadeado, .nav-item.e-em_breve { opacity: .66; }
.nav-selo { font-size: var(--fs-1); font-weight: 700; border-radius: 999px; padding: 3px 7px; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.nav-selo.cad { background: rgba(212,175,55,.14); color: var(--ac2); border: 1px solid rgba(212,175,55,.32); }
.nav-selo.breve { background: rgba(185,169,127,.12); color: var(--tx2); border: 1px solid var(--line); }

.nav-abre {
  position: fixed; left: 12px; bottom: 16px; z-index: 260;
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card2); color: var(--ac2); font-size: var(--fs-7); cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}

/* ---------- ferramentas ---------- */
.ferramentas { padding: 14px; max-width: 1300px; margin: 0 auto; }
.intro { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.intro h1 { font-size: var(--fs-6); margin-bottom: 8px; }
.intro h2 { font-size: var(--fs-5); margin-bottom: 8px; }
.intro p { color: var(--tx2); font-size: var(--fs-3); line-height: 1.6; }
.cards { display: grid; grid-template-columns: 1fr; gap: 13px; margin-bottom: 16px; }
.f-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 9px; animation: sobe .28s ease;
}
.f-card.e-cadeado, .f-card.e-em_breve { border-style: dashed; }
.f-card header { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.f-card header b { font-size: var(--fs-4); flex: 1; min-width: 120px; }
.f-ico { font-size: var(--fs-7); }
.f-selo { font-size: var(--fs-1); font-weight: 700; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.f-selo.ok { background: rgba(52,211,153,.14); color: var(--ok); border: 1px solid rgba(52,211,153,.3); }
.f-selo.cad { background: rgba(212,175,55,.14); color: var(--ac2); border: 1px solid rgba(212,175,55,.32); }
.f-selo.breve { background: rgba(185,169,127,.12); color: var(--tx2); border: 1px solid var(--line); }
.f-oque { font-size: var(--fs-3); line-height: 1.55; }
.f-praque { color: var(--tx2); font-size: var(--fs-3); line-height: 1.55; }
.f-praque b { color: var(--tx); }
.f-aviso {
  font-size: var(--fs-2); line-height: 1.55; border-radius: 10px; padding: 11px 12px;
  background: rgba(185,169,127,.07); border: 1px solid var(--line); color: var(--tx2);
}
.f-aviso.risco-ok { border-color: rgba(52,211,153,.3); }
.f-aviso.risco-frio { border-color: rgba(251,191,36,.35); color: #e8d9a8; background: rgba(251,191,36,.07); }
.f-aviso.risco-alto { border-color: rgba(248,113,113,.4); color: #f3c6c6; background: rgba(248,113,113,.08); }
/* "Por que ainda não" — o motivo real de uma ferramenta estar em breve ou sob
   demanda. Discreto de propósito: informa quem lê, sem competir com o aviso de
   risco, que é o texto que protege o cliente. */
.f-motivo {
  font-size: var(--fs-2); line-height: 1.5; color: var(--tx2);
  margin: 0; padding-left: 11px; border-left: 2px solid var(--line);
}
.f-motivo b { color: var(--tx1); }

.f-btn {
  margin-top: 2px; padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card2); color: var(--ac2); font-size: var(--fs-4); font-weight: 600; cursor: pointer;
  transition: border-color .16s, transform .12s;
}
.f-btn:hover { border-color: var(--ac); }
.f-btn:active { transform: scale(.98); }
.det-oque { font-size: var(--fs-4); line-height: 1.55; margin-bottom: 8px; }
.det-praque { color: var(--tx2); font-size: var(--fs-3); line-height: 1.55; margin-bottom: 12px; }
.det-acao { font-size: var(--fs-3); line-height: 1.6; margin: 12px 0; color: var(--tx2); }
.det-btn { display: block; text-align: center; margin-top: 6px; }

@media (min-width: 700px) {
  .ferramentas { padding: 20px 24px 60px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .nav-lateral { transform: none; }
  body.com-nav header, body.com-nav main, body.com-nav .tarja-rascunho { margin-left: 300px; }
  .nav-abre { display: none; }
}

/* ============================================================
   TELA DE CONVERSAS — mobile-first (375px de base)
   No celular: lista OU chat, um de cada vez (tela pequena não comporta os
   dois). A partir de 900px, lado a lado.
   ============================================================ */
.conversas { padding: 12px; max-width: 1300px; margin: 0 auto; }
.conv-filtros { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 11px; }
.conv-filtros input {
  padding: 12px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: #0d0a05; color: var(--tx); font-size: var(--fs-5); outline: none; min-width: 0;
}
.conv-filtros input:focus { border-color: var(--ac); }
.btn-geral {
  background: var(--card2); border: 1px solid var(--line); color: var(--tx2);
  border-radius: 10px; padding: 12px 13px; font-size: var(--fs-3); cursor: pointer; white-space: nowrap;
}
.btn-geral:hover { border-color: var(--ac); color: var(--ac2); }

.conv-lista { display: flex; flex-direction: column; gap: 7px; }
.conv-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 12px; cursor: pointer; color: var(--tx);
  transition: border-color .16s, transform .12s;
}
.conv-item:hover { border-color: var(--ac); }
.conv-item:active { transform: scale(.99); }
.conv-item.on { border-color: var(--ac); background: var(--card2); }
.conv-item.fria { opacity: .55; }
.pto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pto.verde { background: var(--ok); }
.pto.amarelo { background: var(--warn); }
.pto.vermelho { background: var(--err); box-shadow: 0 0 0 3px rgba(248,113,113,.16); }
.conv-txt { flex: 1; min-width: 0; }
.conv-txt b { display: block; font-size: var(--fs-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-txt small { display: block; color: var(--tx2); font-size: var(--fs-1); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-tempo { font-size: var(--fs-1); color: var(--tx2); flex-shrink: 0; }

/* chat: no celular ocupa a tela inteira */
.chat-lado {
  position: fixed; inset: 0; z-index: 220; background: var(--bg);
  display: flex; flex-direction: column;
}
body:not(.chat-aberto) .chat-lado { display: none; }
.conv-topo {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); background: rgba(12,9,4,.94); flex-wrap: wrap;
}
.conv-voltar { background: none; border: 1px solid var(--line); color: var(--tx2); border-radius: 8px; padding: 6px 11px; font-size: var(--fs-6); cursor: pointer; }
.conv-quem { flex: 1; min-width: 0; }
.conv-quem b { display: block; font-size: var(--fs-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-quem span { color: var(--tx2); font-size: var(--fs-2); }
.modo-selo {
  font-size: var(--fs-1); font-weight: 700; border-radius: 999px; padding: 5px 10px;
  background: rgba(185,169,127,.12); color: var(--tx2); border: 1px solid var(--line); white-space: nowrap;
}
.modo-selo.assumido { background: rgba(52,211,153,.14); color: var(--ok); border-color: rgba(52,211,153,.34); }
.conv-bolhas {
  flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column;
  gap: 8px; background: #0c0904;
}
.b.larga { max-width: 100%; align-self: stretch; }

/* ── MÍDIA NA CONVERSA (22/08) ────────────────────────────────────────────
   Áudio, imagem, vídeo e documento que o cliente mandou. O botão é o estado
   de repouso (nada baixado); o player/imagem entra no lugar dele depois do
   fetch. Tudo em % e com teto em px pra caber nos 390px do celular, que é
   onde o dono realmente atende. */
.b-midia { display: flex; flex-direction: column; gap: 7px; padding: 8px; max-width: 78%; }
.mid-play, .mid-abrir, .mid-doc {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 10px;
  color: inherit; font: inherit; font-size: var(--fs-3); padding: 9px 11px;
  cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
}
.mid-play:hover, .mid-abrir:hover, .mid-doc:hover { border-color: var(--ac-linha); background: rgba(0,0,0,.34); }
.mid-play:disabled, .mid-abrir:disabled, .mid-doc:disabled { opacity: .55; cursor: default; }
.mid-abrir { flex-direction: column; align-items: stretch; gap: 6px; padding: 7px; }
.mid-thumb, .mid-cheia { display: block; max-width: 260px; border-radius: 8px; }
.mid-cheia { max-width: 100%; }
.mid-semthumb { display: flex; align-items: center; gap: 7px; color: var(--tx2); }
.mid-lupa { font-size: var(--fs-2); color: var(--tx2); display: flex; align-items: center; gap: 6px; }
.mid-doc span { display: flex; flex-direction: column; min-width: 0; }
.mid-doc b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mid-doc small { color: var(--tx2); font-size: var(--fs-2); }
.mid-slot:empty { display: none; }
/* O player nativo do Chrome nasce BRANCO e cai no meio de uma paleta preto-e-
   dourado como um retângulo de outro produto. `color-scheme: dark` é a única
   forma suportada de escurecer os controles nativos — o resto do player vive
   num shadow DOM que o CSS da página não alcança. */
audio, video { color-scheme: dark; }
/* LARGURA FIXA, NÃO 100%. A bolha do agente usa `align-self: flex-start`, ou
   seja, ela encolhe até o tamanho do conteúdo. Um filho pedindo `width: 100%`
   pede 100% de uma largura que ainda não existe — e o resultado é 0px. O áudio
   tocava (duração e readyState corretos) dentro de um player invisível; quem
   pegou foi o clique do e2e, porque o DOM dizia que estava lá. */
.mid-slot audio { width: 260px; max-width: 100%; height: 38px; }
.mid-slot video { width: 260px; max-width: 100%; border-radius: 8px; display: block; }
.mid-baixar { display: inline-flex; align-items: center; gap: 7px; color: var(--ac2); text-decoration: none; font-size: var(--fs-3); }
.mid-cap { font-size: var(--fs-4); white-space: pre-wrap; }
/* Erro NO LUGAR do botão: "esse áudio expirou" tem que ser tão visível quanto
   o play era. Um toast que some deixaria o dono achando que o portal travou. */
.mid-erro { display: flex; align-items: center; gap: 7px; color: var(--err); font-size: var(--fs-3); line-height: 1.4; }

/* ── A FICHA DO CONTATO (22/08) ───────────────────────────────────────────
   Painel que desce sobre a conversa. Três blocos, e cada um DIZ quem lê o que
   está ali: a anotação é do dono, o lembrete cobra ele no WhatsApp, e a
   instrução é a única que o agente segue. Confundir os três seria o modo mais
   fácil de o dono escrever pro agente achando que escrevia pra si mesmo. */
.conv-ficha-btn {
  background: transparent; border: 1px solid var(--line); border-radius: 9px;
  color: var(--tx2); padding: 7px 9px; cursor: pointer; display: inline-flex; margin-left: 6px;
}
.conv-ficha-btn:hover { border-color: var(--ac-linha); color: var(--ac2); }
.ficha { border-bottom: 1px solid var(--line); background: var(--bg2); max-height: 52vh; overflow-y: auto; }
.ficha[hidden] { display: none; }
.ficha-cx { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.ficha-topo { display: flex; align-items: center; justify-content: space-between; }
.ficha-fechar { background: none; border: 0; color: var(--tx2); font-size: 20px; cursor: pointer; line-height: 1; }
.ficha-bl { display: flex; flex-direction: column; gap: 7px; }
.ficha-bl label { font-size: var(--fs-3); color: var(--tx); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ficha-quem { font-size: var(--fs-2); color: var(--tx2); display: inline-flex; align-items: center; gap: 5px; font-weight: 400; }
.ficha-ajuda { font-size: var(--fs-2); color: var(--tx2); line-height: 1.5; margin: 0; }
.ficha-ajuda b { color: var(--tx); font-weight: 600; }
.ficha textarea, .ficha input {
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  color: var(--tx); font: inherit; font-size: var(--fs-3); padding: 9px 11px; width: 100%;
}
.ficha textarea:focus, .ficha input:focus { outline: none; border-color: var(--ac-linha); }
.ficha-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha-btn {
  background: transparent; border: 1px solid var(--line); border-radius: 9px; color: var(--tx2);
  font: inherit; font-size: var(--fs-3); padding: 8px 12px; cursor: pointer; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
}
.ficha-btn:hover { border-color: var(--ac-linha); color: var(--ac2); }
.ficha-btn.ok { background: var(--ac); border-color: var(--ac); color: var(--ac-tx); font-weight: 600; }
.ficha-vazio { font-size: var(--fs-2); color: var(--tx2); margin: 0; }
/* A RECUSA fica no lugar onde ele acabou de escrever, com o trecho — não num
   toast que some em 4 segundos e leva o motivo junto. */
.ficha-aviso {
  font-size: var(--fs-3); line-height: 1.5; padding: 9px 11px; border-radius: 9px;
  display: flex; flex-direction: column; gap: 4px;
}
.ficha-aviso.nao { background: var(--err-bg); border: 1px solid var(--err-ln); color: var(--err); }
.ficha-aviso.sim { background: var(--ok-bg); border: 1px solid var(--ok-ln); color: var(--ok); }
.ficha-trecho { font-style: italic; opacity: .9; }
/* O selo do agente. Vermelho aqui não é enfeite: é a diferença entre o dono
   achar que combinou algo com o agente e ter combinado de verdade. */
.selo-agente {
  display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-2);
  line-height: 1.5; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line);
}
.selo-agente.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-ln); }
.selo-agente.nao { color: var(--err); background: var(--err-bg); border-color: var(--err-ln); }
.selo-agente.neutro { color: var(--tx2); }
.selo-agente b { display: block; }
.selo-detalhe { display: block; opacity: .8; font-size: var(--fs-1); font-style: normal; margin-top: 2px; }
.ficha-fala { color: var(--tx); background: var(--card); border-radius: 8px; padding: 8px 10px; }
.lem-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lem { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; }
.lem.vencido { border-color: var(--warn-ln); background: var(--warn-bg); }
.lem.feito { opacity: .5; }
.lem.feito .lem-txt b { text-decoration: line-through; }
.lem-check, .lem-x { background: none; border: 0; color: var(--tx2); cursor: pointer; display: inline-flex; padding: 2px; }
.lem-check:hover { color: var(--ok); }
.lem-x { margin-left: auto; font-size: 17px; line-height: 1; }
.lem-x:hover { color: var(--err); }
.lem-txt { display: flex; flex-direction: column; min-width: 0; }
.lem-txt b { font-weight: 600; font-size: var(--fs-3); }
.lem-txt small { color: var(--tx2); font-size: var(--fs-2); }
.lem-novo { display: flex; gap: 7px; flex-wrap: wrap; }
.lem-novo input[type="date"] { flex: 0 1 145px; }
.lem-novo input[type="time"] { flex: 0 1 100px; }
.lem-novo input[type="text"] { flex: 1 1 160px; }
.lem-novo .ficha-btn { align-self: stretch; }
/* selos na fila: o que foi anotado aparece ANTES de abrir a conversa */
.conv-selos { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.selo-cx {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1);
  color: var(--tx2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px;
}
.selo-cx.vencido { color: var(--warn); border-color: var(--warn-ln); background: var(--warn-bg); }
.conv-item.cobra { border-left: 2px solid var(--warn); }

/* ── GRAVADOR DE VOZ (22/08) ──────────────────────────────────────────────
   Barra que aparece embaixo da caixa de texto. Dois estados: GRAVANDO (pulso
   + tempo + o teto escrito) e PRONTA (player + descartar + enviar). O teto
   fica visível durante a gravação de propósito — saber do limite depois de
   falar dois minutos é perder o que foi dito. */
.chat-envio #btn-mic { background: transparent; border: 1px solid var(--line); color: var(--tx2); }
.chat-envio #btn-mic:hover { border-color: var(--ac-linha); color: var(--ac2); }
.chat-envio #btn-mic.gravando { background: var(--err-bg); border-color: var(--err-ln); color: var(--err); }
.grav {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 11px; margin: 0 11px 9px; border-radius: 11px;
  background: var(--card2); border: 1px solid var(--line);
}
.grav[hidden] { display: none; }
.grav audio { height: 34px; flex: 1 1 160px; min-width: 0; }
.grav-pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--err); animation: pulsar 1s infinite; flex: none; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.grav-tempo { font-variant-numeric: tabular-nums; font-size: var(--fs-3); color: var(--tx); }
.grav-teto { font-size: var(--fs-2); color: var(--tx2); }
.grav-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  background: transparent; border: 1px solid var(--line); border-radius: 9px;
  color: var(--tx2); font: inherit; font-size: var(--fs-3); padding: 7px 11px; cursor: pointer;
}
.grav-btn + .grav-btn { margin-left: 0; }
.grav-btn:hover { border-color: var(--ac-linha); color: var(--ac2); }
.grav-btn.parar { color: var(--err); border-color: var(--err-ln); }
.grav-btn.ok { color: var(--ac-tx); background: var(--ac); border-color: var(--ac); font-weight: 600; }
.grav-btn.reenviar { margin: 6px 0 0; align-self: flex-start; }
.b.falhou { border: 1px solid var(--err-ln); }

@media (max-width: 430px) {
  .b-midia { max-width: 88%; }
  .grav { gap: 7px; padding: 8px; }
  .grav audio { flex-basis: 100%; }
  .grav-btn { margin-left: 0; flex: 1 1 auto; justify-content: center; }
  /* no celular a ficha ocupa quase a tela: é onde o dono realmente atende */
  .ficha { max-height: 66vh; }
  .lem-novo input[type="date"], .lem-novo input[type="time"] { flex: 1 1 46%; }
  .lem-novo input[type="text"] { flex: 1 1 100%; }
  .ficha-btn { flex: 1 1 auto; justify-content: center; align-self: stretch; }
  .mid-thumb, .mid-cheia, .mid-slot audio, .mid-slot video { max-width: 100%; }
}

.conv-acao { border-top: 1px solid var(--line); padding: 11px; background: var(--bg2); }
.acao-nota { color: var(--tx2); font-size: var(--fs-2); text-align: center; margin-bottom: 9px; line-height: 1.5; }
.btn-assumir, .btn-devolver {
  width: 100%; padding: 13px; border: none; border-radius: 10px; font-size: var(--fs-4);
  font-weight: 700; cursor: pointer; transition: transform .12s;
}
.btn-assumir { background: linear-gradient(90deg, var(--ac), var(--ac2)); color: var(--ac-tx); }
.btn-devolver { background: none; border: 1px solid var(--line) !important; color: var(--tx2); margin-top: 9px; }
.btn-assumir:active, .btn-devolver:active { transform: scale(.98); }
.b.enviando { opacity: .55; }

@media (min-width: 900px) {
  .conversas { display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 16px; align-items: start; padding: 18px 22px 50px; }
  .chat-lado {
    position: sticky; top: 82px; inset: auto; height: calc(100vh - 120px);
    border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  }
  body:not(.chat-aberto) .chat-lado { display: flex; }
  body:not(.chat-aberto) .conv-bolhas::before {
    content: "Escolha uma conversa ao lado"; color: var(--tx2); font-size: var(--fs-3); margin: auto;
  }
  .conv-voltar { display: none; }
}

/* ---------- esqueleto de carregamento (nunca tela branca) ---------- */
.esqueleto { display: flex; flex-direction: column; gap: 11px; padding: 4px 0; }
.sk { height: 62px; border-radius: 13px; background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%); background-size: 200% 100%; animation: brilha 1.3s infinite; }
.sk-alto { height: 108px; }
@keyframes brilha { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- conta ---------- */
.conta { padding: 14px; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 13px; }
.conta-rot { color: var(--tx2); font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .5px; }
.conta-plano { text-align: center; padding: 24px 18px; }
.conta .card h2 { font-size: var(--fs-4); }

/* ---------- guia do 1o acesso ---------- */
.guia-card { max-width: 420px; }
.guia-sub { color: var(--tx2); font-size: var(--fs-3); margin-bottom: 16px; }
.guia-passos { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; }
.guia-passos li { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 2px solid var(--ac); }
.guia-passos b { font-size: var(--fs-4); }
.guia-passos span { color: var(--tx2); font-size: var(--fs-3); line-height: 1.5; }
.guia-ir { display: flex; align-items: center; justify-content: center; text-decoration: none; }

@media (min-width: 800px) {
  .conta { grid-template-columns: repeat(2, 1fr); padding: 20px 24px 60px; }
  .conta .larga { grid-column: 1 / -1; }
}

/* ============================================================
   ACABAMENTO — 20/08/2026

   O que separa "funciona" de "é um produto" quase nunca é uma tela nova; é o
   comportamento das mesmas telas quando alguém encosta nelas. Estados de
   interação, alinhamento e ritmo de movimento moram aqui, num lugar só, pra
   valerem em tudo — decorar componente a componente é como se esquece metade.
   ============================================================ */

/* ---------- toda superfície clicável responde ----------
   Antes, só 6 regras tinham :hover num portal inteiro: o cliente passava o
   mouse por cima e a tela não dizia nada. Silêncio na interação é o que faz
   parecer print, não software. */
:where(button, .btn-up, .btn-upgrade, .btn-export, .btn-salvar, .btn-publicar,
       .btn-assumir, .btn-devolver, .btn-geral, .btn-fantasma, .f-btn, .det-btn,
       .nav-item, .conv-voltar, .voltar, .acao-nota) {
  transition: background-color var(--mv), border-color var(--mv),
              color var(--mv), transform var(--mv), opacity var(--mv), box-shadow var(--mv);
}
:where(button, .f-btn, .det-btn, .btn-export, .btn-fantasma):hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--ac-linha); color: var(--tx);
}
:where(.btn-up, .btn-upgrade, .btn-salvar, .btn-publicar):hover:not(:disabled) {
  filter: brightness(1.06); box-shadow: var(--sombra-2);
}
:where(button, a.btn-up, a.btn-upgrade, a.btn-export, .f-btn, .det-btn):active:not(:disabled) {
  transform: translateY(1px) scale(.995);
}

/* Desabilitado tem que PARECER desabilitado — inclusive o cursor. Botão que
   não faz nada mas parece ativo faz o cliente clicar três vezes e concluir que
   o sistema travou. */
:where(button, a, .f-btn, .det-btn)[disabled],
:where(button, a, .f-btn, .det-btn):disabled,
:where(button, a, .f-btn, .det-btn)[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; filter: grayscale(.35);
  pointer-events: auto; transform: none !important; box-shadow: none !important;
}

/* Alvo de toque: 40px é o piso do dedo. Menor que isso o cliente erra no
   celular e culpa o produto, com razão. */
:where(button, .f-btn, .det-btn, .nav-item, .conv-voltar, .voltar, .btn-export) {
  min-height: 40px;
}

/* ---------- AVISO em bloco ----------
   Três níveis, um desenho só. A diferença entre eles é COR e ÍCONE, nunca
   tamanho de fonte nem caixa alta: alarme gritado em toda tela deixa de ser
   alarme, e o cliente para de ler justo o que mais importa. */
.callout {
  display: flex; gap: var(--e-3); align-items: flex-start;
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--r-m); padding: var(--e-3) var(--e-4);
  font-size: var(--fs-3); line-height: 1.55; color: var(--tx2);
  background: var(--card2);
}
.callout .ico { margin-top: 1px; }
.callout b, .callout strong { color: var(--tx); font-weight: 650; }
.callout.info  { border-left-color: var(--ac);   background: var(--ac-fraco); }
.callout.info .ico { color: var(--ac2); }
.callout.aviso { border-left-color: var(--warn); background: var(--warn-bg); border-color: var(--warn-ln); }
.callout.aviso .ico { color: var(--warn); }
.callout.grave { border-left-color: var(--err);  background: var(--err-bg);  border-color: var(--err-ln); }
.callout.grave .ico { color: var(--err); }
.callout.ok    { border-left-color: var(--ok);   background: var(--ok-bg);   border-color: var(--ok-ln); }
.callout.ok .ico { color: var(--ok); }

/* ---------- selos ----------
   Pílula de rótulo. Todas com a MESMA altura e o mesmo peso: quando cada selo
   tem um tamanho, a tela ganha um serrilhado que o olho lê como desleixo. */
:where(.f-selo, .nav-selo, .tag-up, .modo-selo) {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-pill); padding: 3px 9px;
  font-size: var(--fs-1); font-weight: 700; line-height: 1.6;
  white-space: nowrap; letter-spacing: .2px;
}
:where(.f-selo, .nav-selo) .ico { width: 12px; height: 12px; vertical-align: -2px; }

/* ---------- ícone dentro de rótulo e título ----------
   O ícone alinha pelo CENTRO ÓPTICO do texto, não pela caixa. É o ajuste que
   ninguém nota quando está certo e todo mundo estranha quando está errado. */
:where(.card h2, .secao, h1, h2, h3) .ico { color: var(--ac2); }
.card h2, h1, h2, h3 { display: flex; align-items: center; gap: var(--e-2); }
.card h2 { line-height: 1.35; }

/* Um ícone que É o assunto do card (estado vazio, cabeçalho de coluna) fica em
   grafite, não dourado: dourado demais é o mesmo que dourado nenhum. */
.v-ico .ico, .bl-ico .ico, .f-ico .ico, .nav-ico .ico { color: var(--tx2); }
.v-ico, .bl-ico { color: var(--tx2); }

/* ---------- texto ----------
   `text-wrap: pretty` evita a última linha com uma palavra só. Órfão em título
   de card é o tipo de coisa que faz a tela parecer descuidada sem que a pessoa
   saiba dizer por quê. */
h1, h2, h3, .card h2, .secao { text-wrap: balance; }
p, .detalhe, .callout, small { text-wrap: pretty; }

/* O esqueleto de carregamento (.esqueleto / .sk / @keyframes brilha) já existe
   mais acima, da Rodada 3 — não redefinir aqui. Duas definições da mesma
   animação é o começo de uma divergir da outra. */

/* Caixa do ícone numa lista de recursos: centraliza e dá a cor semântica.
   O ícone do item liberado é verde; o do travado fica em grafite — a cor já
   diz o estado antes de a pessoa ler o rótulo. */
.ico-caixa { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--tx2); }
.ico-caixa.ok { color: var(--ok); }
.rec.travado .ico-caixa { opacity: .85; }

/* ============================================================
   CONECTAR MEU WHATSAPP (Bloco 2) — 20/08/2026
   ============================================================ */
.conexao { display: grid; gap: var(--e-4); padding: var(--e-4) var(--e-3) 48px; max-width: 900px; margin: 0 auto; }

/* O estado é a primeira coisa e a maior: é a única pergunta que o dono tem
   ao abrir esta tela. */
.cx-cab { display: flex; gap: var(--e-3); align-items: flex-start; }
.pt-g { width: 14px; height: 14px; margin-top: 6px; }
.cx-rotulo { font-size: var(--fs-7); margin: 0; display: block; }
.cx-detalhe { color: var(--tx2); font-size: var(--fs-3); line-height: 1.6; margin-top: 6px; }
.cx-numero {
  margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--line);
  color: var(--tx2); font-size: var(--fs-3); display: flex; align-items: center; gap: 6px;
}
.cx-numero b { color: var(--tx); font-variant-numeric: tabular-nums; }
.cx-espera { margin-top: var(--e-3); color: var(--tx2); font-size: var(--fs-3); display: flex; align-items: center; gap: 6px; }

/* QR — fundo BRANCO obrigatório: a câmera do WhatsApp não lê código escuro
   invertido, e o portal inteiro é preto. */
.cx-qr-grade { display: grid; gap: var(--e-4); grid-template-columns: 1fr; align-items: start; }
.cx-qr-caixa { text-align: center; }
.cx-qr-caixa img {
  background: #fff; padding: 10px; border-radius: var(--r-g);
  width: min(264px, 78vw); height: auto; display: block; margin: 0 auto;
  transition: opacity var(--mv), filter var(--mv);
}
.cx-qr-caixa img.qr-morto { opacity: .28; filter: grayscale(1); }
.cx-qr-txt {
  display: block; background: #fff; color: #111; padding: 12px; border-radius: var(--r-m);
  font-size: var(--fs-2); word-break: break-all; text-align: left;
}
.cx-qr-valid { color: var(--tx2); font-size: var(--fs-2); margin-top: var(--e-2); }
.cx-qr-valid b { font-variant-numeric: tabular-nums; color: var(--tx); }
.cx-expirou { color: var(--warn); font-weight: 700; }
.cx-passos { color: var(--tx2); font-size: var(--fs-3); line-height: 1.75; padding-left: 20px; }
.cx-passos b { color: var(--tx); }

/* Curva de aquecimento: o dono vê ONDE ele está, não só a regra. Uma tabela de
   limites sem "você está aqui" vira letra miúda que ninguém lê. */
.aq-curva { list-style: none; margin-top: var(--e-3); display: grid; gap: 2px; }
.aq-curva li {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 9px 11px; border-radius: var(--r-p); font-size: var(--fs-3); color: var(--tx2);
}
.aq-curva li.agora { background: var(--ac-fraco); border: 1px solid var(--ac-linha); color: var(--tx); }
.aq-dia { flex: 1; }
.aq-teto { font-weight: 700; }
.aq-selo {
  background: var(--ac); color: var(--ac-tx); border-radius: var(--r-pill);
  padding: 2px 9px; font-size: var(--fs-1); font-weight: 700; white-space: nowrap;
}

@media (min-width: 760px) {
  .conexao { padding: var(--e-5) var(--e-6) 60px; }
  .cx-qr-grade { grid-template-columns: auto 1fr; gap: var(--e-6); }
}

/* ============================================================
   IMPORTAR MINHA LISTA (Bloco 3) — 20/08/2026
   ============================================================ */
.listas { display: grid; gap: var(--e-4); padding: var(--e-4) var(--e-3) 48px; max-width: 900px; margin: 0 auto; }

.lp-fontes { display: grid; gap: var(--e-3); margin: var(--e-4) 0; }
.lp-arquivo { display: block; cursor: pointer; }
.lp-arq-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  border: 1px dashed var(--line); border-radius: var(--r-g); padding: 18px;
  color: var(--tx2); font-size: var(--fs-4); transition: border-color var(--mv), color var(--mv);
}
.lp-arquivo:hover .lp-arq-btn { border-color: var(--ac-linha); color: var(--tx); }
.lp-arquivo small { display: block; text-align: center; color: var(--tx2); font-size: var(--fs-2); margin-top: 6px; }
.lp-ou { text-align: center; color: var(--tx2); font-size: var(--fs-2); }
.lp-colar label { display: block; color: var(--tx2); font-size: var(--fs-2); margin-bottom: 5px; }
.lp-colar textarea {
  width: 100%; background: #0d0a05; color: var(--tx); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 12px; font-size: var(--fs-5);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; resize: vertical;
}
.lp-colar textarea:focus { border-color: var(--ac); outline: none; }

/* Conferência: os números primeiro, porque é o que responde "deu certo?" */
.lp-resumo { display: flex; flex-wrap: wrap; gap: var(--e-4); margin: var(--e-3) 0; }
.lp-num { display: flex; flex-direction: column; }
.lp-num b { font-size: var(--fs-7); color: var(--ac2); line-height: 1.1; }
.lp-num span { color: var(--tx2); font-size: var(--fs-2); }

.lp-tabela { overflow-x: auto; margin-top: var(--e-3); border: 1px solid var(--line); border-radius: var(--r-m); }
.lp-tabela table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.lp-tabela th {
  text-align: left; padding: 9px 11px; color: var(--tx2); font-size: var(--fs-1);
  text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--line);
  background: var(--card2); position: sticky; top: 0;
}
.lp-tabela td { padding: 9px 11px; border-bottom: 1px solid rgba(58,47,24,.4); white-space: nowrap; }
.lp-tabela tr:last-child td { border-bottom: none; }
.lp-mais { display: block; padding: 8px 11px; color: var(--tx2); font-size: var(--fs-2); }

.lp-gravar { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--line); }
.lp-gravar label { display: block; color: var(--tx2); font-size: var(--fs-2); margin: var(--e-3) 0 5px; }
.lp-gravar input[type="text"], .lp-gravar input:not([type]) {
  width: 100%; background: #0d0a05; color: var(--tx); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 12px; font-size: var(--fs-5);
}
.lp-gravar input:focus { border-color: var(--ac); outline: none; }

/* A declaração é um alvo grande de propósito: é a peça jurídica da ferramenta,
   não uma letra miúda para o dono marcar sem ler. */
.lp-consent {
  display: flex !important; gap: var(--e-3); align-items: flex-start;
  margin-top: var(--e-4) !important; padding: var(--e-3);
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card2);
  cursor: pointer; color: var(--tx2) !important; font-size: var(--fs-3) !important; line-height: 1.55;
}
.lp-consent input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--ac); }
.lp-consent b { color: var(--tx); }
.lp-consent:has(input:checked) { border-color: var(--ac-linha); background: var(--ac-fraco); }

.lp-lista { display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.lp-item {
  display: flex; gap: var(--e-3); align-items: center; justify-content: space-between;
  padding: var(--e-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card2);
}
.lp-item-txt { min-width: 0; }
.lp-item-txt b { font-size: var(--fs-4); display: block; }
.lp-item-txt small { display: block; color: var(--tx2); font-size: var(--fs-2); margin-top: 3px; }
.lp-consent-nota { color: var(--ok) !important; }
.lp-item-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.btn-fantasma.perigo { color: var(--err); }
.btn-fantasma.perigo:hover { border-color: var(--err-ln); }

@media (min-width: 760px) {
  .listas { padding: var(--e-5) var(--e-6) 60px; }
  .lp-fontes { grid-template-columns: 1fr auto 1fr; align-items: center; }
}

/* "Sob demanda" não é "em breve": a ferramenta existe e sai quando alguém pedir.
   Cor própria pra não ser lida como promessa nem como cadeado. */
.f-selo.demanda { background: rgba(107,140,196,.14); color: #9db4dc; border: 1px solid rgba(107,140,196,.32); }

/* ============================================================
   DISPAROS (Bloco 4) — 20/08/2026
   ============================================================ */
.disparos { display: grid; gap: var(--e-4); padding: var(--e-4) var(--e-3) 48px; max-width: 900px; margin: 0 auto; }
.disparos label { display: block; color: var(--tx2); font-size: var(--fs-2); margin: var(--e-4) 0 5px; }
.disparos select, .disparos textarea {
  width: 100%; background: #0d0a05; color: var(--tx); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 12px; font-size: var(--fs-5);
}
.disparos textarea { font-family: inherit; line-height: 1.55; resize: vertical; }
.disparos select:focus, .disparos textarea:focus { border-color: var(--ac); outline: none; }
.dp-dica { color: var(--tx2); font-size: var(--fs-2); line-height: 1.6; margin-top: 8px; }
.dp-dica code {
  background: var(--card2); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; font-size: var(--fs-1); color: var(--ac2);
}

.dp-freios-grade { display: flex; flex-wrap: wrap; gap: var(--e-5); margin: var(--e-3) 0; }
.dp-f { display: flex; flex-direction: column; }
.dp-f b { font-size: var(--fs-7); color: var(--ac2); line-height: 1.1; }
.dp-f span { color: var(--tx2); font-size: var(--fs-2); }

/* COMPOSIÇÃO POR TEMPERATURA (camada 2) — barra proporcional quente/morno/frio.
   Quente = calor (âmbar/ok), frio = azul-frio, morno = no meio. A largura de
   cada faixa é o próprio número de contatos: o dono VÊ a proporção antes de
   confirmar, que é o que faz repensar uma lista cheia de gente que nunca falou. */
.dp-analise { margin: var(--e-3) 0; }
.dp-comp { display: flex; gap: 3px; margin-top: var(--e-5); border-radius: var(--r-m); overflow: hidden; min-height: 52px; }
.dp-temp { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; min-width: 56px; }
.dp-temp b { font-size: var(--fs-6); line-height: 1; }
.dp-temp span { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .4px; opacity: .85; margin-top: 2px; }
.dp-temp.t-quente { background: var(--ok-bg); color: var(--ok); }
.dp-temp.t-morno  { background: var(--warn-bg); color: var(--warn); }
.dp-temp.t-frio   { background: rgba(96,140,210,.14); color: #7ba3e0; }
.dp-motivos { margin: 6px 0 0; padding-left: 18px; }
.dp-motivos li { font-size: var(--fs-3); margin: 2px 0; }

/* KILL-SWITCH: vermelho, grande e GRUDADO no topo enquanto a campanha corre.
   Quem descobre que mandou a mensagem errada para 400 pessoas não pode ter que
   procurar o botão nem rolar a tela. */
#dp-viva { position: sticky; top: 64px; z-index: 40; border-color: var(--ac-linha); box-shadow: var(--sombra-2); }
.dp-viva-cab { display: flex; gap: var(--e-3); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.btn-parar {
  background: var(--err); color: #1a0a08; border: none; border-radius: var(--r-m);
  padding: 13px 18px; font-size: var(--fs-4); font-weight: 800; letter-spacing: .4px;
  cursor: pointer; flex-shrink: 0; min-height: 46px;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 0 0 3px rgba(207,106,94,.18);
}
.btn-parar:hover:not(:disabled) { filter: brightness(1.08); }
.btn-parar:active { transform: translateY(1px); }

.dp-barra { height: 8px; background: var(--card2); border-radius: var(--r-pill); overflow: hidden; margin: var(--e-3) 0 var(--e-2); }
.dp-barra-fill { height: 100%; background: linear-gradient(90deg, var(--ac), var(--ac2)); transition: width var(--mv-lento); }
.dp-nums { display: flex; flex-wrap: wrap; gap: var(--e-4); color: var(--tx2); font-size: var(--fs-2); }
.dp-nums b { color: var(--tx); font-size: var(--fs-4); }

.dp-lista { list-style: none; margin-top: var(--e-3); display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.dp-l { display: flex; align-items: center; gap: var(--e-2); padding: 7px 9px; border-radius: var(--r-p); font-size: var(--fs-3); }
.dp-l.ok { color: var(--tx2); } .dp-l.ok .ico { color: var(--ok); }
.dp-l.erro { color: var(--tx2); background: var(--err-bg); } .dp-l.erro .ico { color: var(--err); }
.dp-l small { margin-left: auto; font-size: var(--fs-1); opacity: .8; text-align: right; }
.dp-acoes-fim { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-3); align-items: center; }
.dp-acoes-fim .btn-up { width: auto; margin-top: 0; }

.dp-sub { font-size: var(--fs-4); margin-top: var(--e-5); }
.dp-bolhas { display: grid; gap: var(--e-2); margin-top: var(--e-2); }
.dp-bolha { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-g); padding: 11px 13px; }
.dp-bolha b { display: block; color: var(--tx2); font-size: var(--fs-1); margin-bottom: 5px; }
.dp-bolha p { font-size: var(--fs-4); line-height: 1.5; }

@media (min-width: 760px) {
  .disparos { padding: var(--e-5) var(--e-6) 60px; }
  .dp-bolhas { grid-template-columns: repeat(3, 1fr); }
}

/* agendamento do disparo: dia + hora lado a lado, com a nota embaixo */
.ag-linha{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:10px 0 4px}
.ag-campo{display:flex;flex-direction:column;gap:4px;font-size:.86rem;color:var(--tinta-fraca);min-width:0}
.ag-campo input{min-width:0}
.ag-nota{flex:1 1 100%;color:var(--tinta-fraca);font-size:.82rem;line-height:1.45}

/* ═══════════ COMPOSITOR DE CAMPANHA — variações e ritmo (24/08) ═══════════
   O <fieldset disabled> é o que segura a tela quando falta lista: os campos
   aparecem, mas nada responde. Foi escolhido em vez de esconder o bloco porque
   quem chega sem lista precisa VER o que vai poder configurar — esconder o
   produto atrás de um pré-requisito faz o cliente concluir que ele não existe. */
.dp-form { border: 0; padding: 0; margin: 0; min-width: 0; }
.dp-form[disabled] { opacity: .55; }
.dp-form[disabled] .dp-bloco { border-style: dashed; }

.dp-bloco {
  margin-top: var(--e-5); padding: var(--e-4);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-g);
}
.dp-bloco .dp-sub { margin-top: 0; }

.dp-linha { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end; margin-top: var(--e-3); }

/* ESCOPADO EM .disparos DE PROPÓSITO, e não é preciosismo: a linha 1139 declara
   `.disparos label { display: block }`, que tem especificidade maior que uma
   classe sozinha. Sem o `.disparos` na frente, estes labels voltavam a ser
   block — o campo do teto ficava com 62px e o texto de ajuda subia pra mesma
   linha. Medido no navegador em produção, não deduzido. */
.disparos .dp-campo { display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--fs-3); color: var(--tx2); min-width: 0; margin: 0; }
.disparos .dp-campo select, .disparos .dp-campo input { min-width: 0; width: 100%; }
/* a nota de ajuda herda flex:1 1 100% de .ag-nota, feito para linha; aqui a
   coluna é vertical e esse flex-basis vira altura. Zerado. */
.disparos .dp-campo .ag-nota { flex: none; }

/* Os ritmos: cartões de rádio. Só existem opções mais LENTAS que o padrão —
   a ausência de um "mais rápido" aqui é intencional e está travada no servidor
   (lib/disparo.js, ritmoValido + o clamp em Freios.delay). */
.dp-ritmos { display: grid; gap: var(--e-2); margin-top: var(--e-3); }
@media (min-width: 620px) { .dp-ritmos { grid-template-columns: repeat(3, 1fr); } }
.disparos .dp-ritmo {
  display: flex; gap: var(--e-2); align-items: flex-start; cursor: pointer; margin: 0;
  padding: 11px 13px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-m); transition: border-color var(--mv-rapido, .15s), background var(--mv-rapido, .15s);
}
.disparos .dp-ritmo:hover { border-color: var(--ac-linha); }
.disparos .dp-ritmo:has(input:checked) { border-color: var(--ac); background: var(--ac-fraco); }
.disparos .dp-ritmo input { margin-top: 3px; flex: none; }
.disparos .dp-ritmo span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.disparos .dp-ritmo b { font-size: var(--fs-4); color: var(--tx); }
.disparos .dp-ritmo small { font-size: var(--fs-2); color: var(--tx2); line-height: 1.4; }

.dp-var-ok .dp-bolhas { max-height: 320px; overflow-y: auto; }

/* ═══════════ OLHINHO DA SENHA (24/08) ═══════════
   O botão fica DENTRO da moldura do campo, não ao lado: ao lado ele empurra o
   input e quebra o alinhamento com o campo de usuário logo acima. */
.campo-senha { position: relative; display: block; }
/* `display: block` no input NAO e cosmetico: input e inline-block por padrao,
   e o pai ganha o espaco de descida da linha embaixo dele. Isso deixava o pai
   ~7px mais alto que o campo, e o `top:50%` do olhinho centralizava nessa
   altura maior — o botao ficava visivelmente baixo. Medido, nao deduzido. */
.campo-senha > input { width: 100%; padding-right: 46px; display: block; }
.campo-senha > .olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px;
  color: var(--tx2); cursor: pointer; line-height: 0;
}
.campo-senha > .olho:hover { color: var(--ac); background: rgba(212,175,55,.10); }
.campo-senha > .olho:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
/* quando a senha está à mostra o olho fica aceso — o estado tem que ser óbvio
   sem precisar reparar em qual dos dois desenhos está na tela */
.campo-senha > .olho[aria-pressed="true"] { color: var(--ac); }
/* `.login-card button:active` aplica scale(.985); como `transform` é uma
   propriedade só, isso APAGARIA o translateY(-50%) e o olhinho pularia pra
   baixo a cada clique. Reafirmo os dois juntos. */
.campo-senha > .olho:active { transform: translateY(-50%) scale(.94); }

/* ═══════════ ARQUIVO NO DISPARO — imagem e PDF (Fase 1 · 24/08) ═══════════
   Tudo escopado em `.disparos` pelo MESMO motivo dos ritmos e do campo do teto:
   a linha `.disparos label { display:block }` tem especificidade (0,1,1) e ganha
   de qualquer classe sozinha. Sem o `.disparos` na frente, o label do seletor de
   arquivo virava block e o botão esticava a largura toda. */

.disparos .dp-opcional {
  font-size: var(--fs-2); font-weight: 400; color: var(--tinta-fraca);
  margin-left: 6px; letter-spacing: .02em;
}

/* A REGRA, ANTES DO UPLOAD. Fica acima do botão de propósito: descobrir o
   limite depois de esperar o upload é o pior momento possível de descobrir. */
.disparos .dp-limites { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.disparos .dp-limite {
  font-size: var(--fs-2); color: var(--tx2); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.disparos .dp-limite b { color: var(--tx); font-weight: 600; }

.disparos .dp-escolher { display: inline-block; margin: var(--e-3) 0 0; cursor: pointer; }
.disparos .dp-escolher .btn-fantasma { display: inline-flex; align-items: center; gap: 7px; }

.disparos .dp-midia-status:empty { display: none; }
.disparos .dp-midia-status { margin-top: var(--e-2); font-size: var(--fs-2); line-height: 1.45; }
.disparos .dp-erro { color: var(--erro, #c0392b); display: inline-flex; align-items: center; gap: 6px; }
.disparos .dp-subindo { color: var(--tx2); display: inline-flex; align-items: center; gap: 6px; }

/* O ARQUIVO ESCOLHIDO, do jeito que vai chegar. A miniatura vem do servidor
   (rota /midia/<id>/arquivo), não do arquivo local — assim o que ele vê é prova
   de que o upload deu certo, e não só de que o arquivo existe no PC dele. */
.disparos .dp-anexo {
  display: flex; gap: var(--e-3); align-items: flex-start; margin-top: var(--e-3);
  padding: 11px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
}
.disparos .dp-anexo-vis {
  flex: none; width: 78px; height: 78px; border-radius: 10px; overflow: hidden;
  background: var(--card2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.disparos .dp-anexo-vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disparos .dp-pdf {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--tx2); font-size: var(--fs-1); letter-spacing: .06em;
}
.disparos .dp-pdf .ico { width: 26px; height: 26px; }
.disparos .dp-anexo-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.disparos .dp-anexo-txt b { font-size: var(--fs-3); color: var(--tx); overflow-wrap: anywhere; }
.disparos .dp-anexo-txt small { font-size: var(--fs-2); color: var(--tx2); line-height: 1.45; }
.disparos .dp-anexo-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: 6px; }
.disparos .btn-mini { padding: 5px 11px; font-size: var(--fs-2); }
.disparos .btn-perigo { color: var(--erro, #c0392b); }
.disparos .btn-perigo:hover { border-color: var(--erro, #c0392b); }

/* O freio dito na cara, no mesmo bloco do upload: o cliente precisa ler "arquivo
   não vai pra contato frio" ANTES de montar a campanha em cima disso. */
.disparos .dp-midia-freio {
  display: flex; gap: 7px; align-items: flex-start; margin-top: var(--e-3);
  padding-top: var(--e-3); border-top: 1px dashed var(--line);
}
.disparos .dp-midia-freio .ico { flex: none; margin-top: 2px; }

@media (max-width: 480px) {
  .disparos .dp-anexo-vis { width: 62px; height: 62px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FASE B — as 12 seções no editor (27/08/2026)
   Medidor de profundidade · exemplos por campo · tipos pares/objeto/escolha ·
   fundo do serviço · testes prontos do teste-drive.
   Tudo herda os tokens do tema; nada de cor nova solta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- MEDIDOR ---- */
.medidor { margin: 0 0 .9rem; padding: .75rem .9rem; border: 1px solid var(--bd);
  border-radius: 12px; background: var(--bg2); }
.medidor-txt { font-size: .95rem; color: var(--tx); margin-bottom: .45rem; }
.medidor-txt b { color: var(--ouro); font-size: 1.05rem; }
.medidor-trilho { height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.medidor-barra { height: 100%; border-radius: 99px; transition: width .35s ease, background .35s ease; }
.medidor-barra.raso  { background: #b4513f; }
.medidor-barra.meio  { background: #c9a227; }
.medidor-barra.cheio { background: #4f9d69; }
.medidor-detalhe { margin: .5rem 0 0; font-size: .82rem; color: var(--tx2); line-height: 1.5; }
.ir-secao { background: none; border: 0; padding: 0; margin: 0 .1rem; cursor: pointer;
  color: var(--ouro); font: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* a bolinha de preenchimento em cada aba de seção */
.grupo.s-raso  .g-cont { color: #d08b7c; }
.grupo.s-meio  .g-cont { color: #d9be5e; }
.grupo.s-cheio .g-cont { color: #7fc396; }

/* ---- EXEMPLOS POR CAMPO (recolhidos) ---- */
.campo-exemplos { margin-top: .35rem; }
.campo-exemplos summary { cursor: pointer; font-size: .8rem; color: var(--tx2);
  list-style: none; display: inline-block; padding: .1rem 0; }
.campo-exemplos summary::-webkit-details-marker { display: none; }
.campo-exemplos summary::before { content: "▸ "; color: var(--ouro); }
.campo-exemplos[open] summary::before { content: "▾ "; }
.campo-exemplos p { margin: .3rem 0 0; padding: .4rem .6rem; font-size: .82rem;
  color: var(--tx2); background: rgba(255,255,255,.04); border-radius: 8px; line-height: 1.5; }

/* ---- PARES e OBJETO ---- */
.par-item { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; margin-bottom: .4rem; }
.objeto { display: grid; gap: .5rem; }
.obj-campo { display: grid; gap: .2rem; }
.obj-campo > span { font-size: .8rem; color: var(--tx2); }

/* ---- FUNDO DO SERVIÇO (a profundidade da seção 2) ---- */
/* A coluna do preço era .6fr contra 1.6fr da descrição — a caixa do valor era
   a MENOR das três, e a maior ficava logo ao lado. Com o placeholder "R$" na
   estreita, a leitura natural virava "R$ [           ]" e o dono digitava o
   preço na descrição (studiosilva, 9 de 9 em 12/09). Agora as duas têm peso
   parecido e o cabeçalho nomeia cada coluna. */
.serv-linha { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto; gap: .4rem; }
.serv-cabecalho { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto; gap: .4rem;
  padding: 0 .15rem .25rem; font-size: .75rem; color: var(--tx2); letter-spacing: .02em; }
.serv-cabecalho > span:nth-child(4) { min-width: 1.6rem; }
.serv-abrir { margin: .35rem 0 0; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ouro); font-size: .8rem; text-decoration: underline; text-underline-offset: 2px; }
.serv-fundo { display: grid; gap: .5rem; margin: .5rem 0 .2rem; padding: .6rem;
  border-left: 2px solid var(--ouro); background: rgba(255,255,255,.03); border-radius: 0 8px 8px 0; }
.sf-campo { display: grid; gap: .2rem; }
.sf-campo > span { font-size: .8rem; color: var(--tx2); }
.sf-campo small { font-size: .75rem; color: var(--tx3, var(--tx2)); opacity: .85; }
.serv-item { padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }

/* ---- TESTES PRONTOS ---- */
.chat-cenarios { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  padding: 0 0 .6rem; }
.cen-rot { font-size: .78rem; color: var(--tx2); width: 100%; margin-bottom: .1rem; }
.cen { font-size: .78rem; padding: .3rem .6rem; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--bd); background: var(--bg2); color: var(--tx2); }
.cen:hover { border-color: var(--ouro); color: var(--tx); }

/* ---- AVISO DE PUBLICAR RASO ---- */
.aviso-raso { display: block; margin-top: .7rem; padding: .6rem .75rem; border-radius: 10px;
  background: rgba(201,162,39,.10); border: 1px solid rgba(201,162,39,.35);
  font-size: .85rem; line-height: 1.55; color: var(--tx2); }
.aviso-raso b { color: var(--tx); }

/* ---- 390px: uma coluna, sem nada estourando a largura ---- */
@media (max-width: 560px) {
  .par-item { grid-template-columns: 1fr; }
  .par-item .x { justify-self: end; }
  .serv-linha { grid-template-columns: 1fr; }
  .serv-linha .x { justify-self: end; }
  /* no celular cada caixa ocupa a linha inteira, uma embaixo da outra: aí não
     há colunas para nomear, e o placeholder de cada campo já diz o que é. */
  .serv-cabecalho { display: none; }
  .medidor { padding: .6rem .7rem; }
  .chat-cenarios { padding-bottom: .4rem; }
  .cen { font-size: .75rem; }
}

/* ═══ FASE C — o exemplo do ramo (27/08) ═════════════════════════════════════
   O campo semeado NÃO pode parecer resposta pronta do dono: ele tem que gritar
   "confere isto". Mas também não pode parecer erro — é conteúdo bom, e assustar
   faria o dono apagar em vez de ajustar. Daí o tom âmbar de aviso gentil, e
   nunca vermelho. */
.tarja-ramo {
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  padding: .1rem .4rem; border-radius: .5rem; margin-left: .4rem;
  background: var(--ramo-fundo, #fdf3d8); color: var(--ramo-cor, #8a5f00);
  border: 1px solid var(--ramo-borda, #f0dca8); white-space: nowrap; vertical-align: middle;
  cursor: help;
}
.campo-do-ramo { border-left: 3px solid var(--ramo-borda, #f0dca8); padding-left: .6rem; }
.campo-do-ramo .campo-corpo input,
.campo-do-ramo .campo-corpo textarea { background: var(--ramo-campo, #fffdf6); }

/* a barra de trás: o que ele SABE. A da frente: o que VEIO DELE. */
.medidor-trilho { position: relative; }
.medidor-sombra {
  position: absolute; inset: 0 auto 0 0; border-radius: inherit;
  background: var(--ramo-barra, #f5e3b6); transition: width .3s ease;
}
.medidor-trilho .medidor-barra { position: relative; z-index: 1; }

@media (prefers-color-scheme: dark) {
  :root {
    --ramo-fundo: #3a2f12; --ramo-cor: #f0d488; --ramo-borda: #6b5620;
    --ramo-campo: #241d0c; --ramo-barra: #5c4a1c;
  }
}

/* ═══ R2 / R3 (27/08) ══════════════════════════════════════════════════════ */
.ns-caixa, .sim-caixa {
  margin-top: 1rem; padding: .9rem 1rem; border-radius: .7rem;
  background: var(--cartao, #14171d); border: 1px solid var(--linha, #232833);
}
.ns-caixa h3, .sim-caixa h3 { margin: 0 0 .2rem; font-size: .95rem; }
.ns-lista { list-style: none; margin: .6rem 0 0; padding: 0; }
.ns-lista li { padding: .55rem 0; border-top: 1px solid var(--linha, #232833); }
.ns-p { font-size: .9rem; line-height: 1.35; }
.ns-d { font-size: .76rem; color: var(--txt2, #8b93a3); margin: .2rem 0 .4rem; }
.ns-vezes {
  display: inline-block; font-size: .7rem; font-weight: 700; margin-right: .35rem;
  padding: .05rem .35rem; border-radius: .45rem;
  background: var(--ramo-fundo, #fdf3d8); color: var(--ramo-cor, #8a5f00);
}
.ns-ir { font-size: .78rem; padding: .25rem .6rem; }
.ns-extra { font-size: .84rem; margin: .5rem 0; line-height: 1.4; }

/* o campo que a sugestão aponta ACENDE: levar o dono até a seção e deixar ele
   procurar qual dos sete campos era desperdiça o clique que ele já deu. */
.campo-alvo {
  animation: acende 2.4s ease-out;
  border-radius: .5rem;
}
@keyframes acende {
  0%, 55% { box-shadow: 0 0 0 3px var(--ramo-borda, #f0dca8); background: var(--ramo-campo, #fffdf6); }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}

.sim-lista { list-style: none; margin: .7rem 0 0; padding: 0; }
.sim-item { padding: .6rem 0; border-top: 1px solid var(--linha, #232833); }
.sim-p { font-size: .87rem; font-weight: 600; }
.sim-r {
  font-size: .86rem; line-height: 1.4; margin: .35rem 0;
  padding: .45rem .6rem; border-radius: .55rem;
  background: var(--bolha-bot, rgba(255,255,255,.05));
}
.sim-olho { font-size: .76rem; color: var(--txt2, #8b93a3); line-height: 1.4; }
.sim-fim { margin-top: .8rem; }
@media (prefers-reduced-motion: reduce) { .campo-alvo { animation: none; box-shadow: 0 0 0 3px var(--ramo-borda, #f0dca8); } }

/* ═══ MODO ENTREVISTA — Fase D (27/08) ═════════════════════════════════════
   Vem antes do medidor na coluna, então precisa parecer um CONVITE e não mais
   um bloco de formulário: borda de acento, e recolhido por padrão. Quem já
   configurou não pode tropeçar nele toda vez que abre a tela. */
.entrev {
  margin-bottom: 1rem; padding: .85rem 1rem; border-radius: .7rem;
  background: var(--ac-fraco); border: 1px solid var(--ac-linha);
}
.entrev-cabeca { display: flex; align-items: center; gap: .8rem; justify-content: space-between; }
.entrev-cabeca h3 { margin: 0; font-size: var(--fs-5); display: flex; align-items: center; gap: .4rem; }
.entrev-sub { margin: .15rem 0 0; font-size: var(--fs-2); color: var(--tx2); }
.entrev-cabeca .btn { flex: 0 0 auto; }

.entrev-trilho { height: 4px; border-radius: 4px; background: var(--line); margin: .8rem 0 .7rem; overflow: hidden; }
.entrev-barra { height: 100%; background: var(--ac); transition: width .35s ease; }

.entrev-bolhas { display: flex; flex-direction: column; gap: .45rem; max-height: 340px; overflow-y: auto; padding-right: .2rem; }
.entrev-bolha {
  max-width: 92%; padding: .5rem .7rem; border-radius: .6rem;
  font-size: var(--fs-3); line-height: 1.4; white-space: normal;
}
.entrev-ele  { align-self: flex-start; background: var(--card2); border: 1px solid var(--line); }
.entrev-eu   { align-self: flex-end;   background: var(--ac); color: var(--ac-tx); }
.entrev-ok   { align-self: flex-start; background: var(--ok-bg); border: 1px solid var(--ok-ln); }
.entrev-dica { align-self: flex-start; background: transparent; color: var(--tx2); font-size: var(--fs-2); padding: .1rem .2rem; }
.entrev-extra { display: block; margin-top: .3rem; font-size: var(--fs-1); color: var(--tx2); }

.entrev-envio { margin-top: .7rem; }
/* 16px no input: abaixo disso o iOS dá zoom sozinho e a tela "pula" — mesma
   regra do resto do portal. */
.entrev-envio textarea {
  width: 100%; font-size: var(--fs-5); padding: .55rem .7rem; border-radius: .5rem;
  background: var(--card); color: var(--tx); border: 1px solid var(--line); resize: vertical;
}
.entrev-acoes { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.entrev-nota { margin: .5rem 0 0; font-size: var(--fs-1); color: var(--tx2); }

/* A 390px a linha do cabeçalho não cabe com o botão do lado. */
@media (max-width: 430px) {
  .entrev-cabeca { flex-direction: column; align-items: stretch; gap: .5rem; }
  .entrev-cabeca .btn { width: 100%; }
  .entrev-bolha { max-width: 100%; }
}

/* A MARCA VOLTA PARA A PÁGINA PRINCIPAL (05/09) — pedido do Richard.
   Clicar no símbolo da casa é o atalho que todo mundo tenta por instinto; até
   hoje o logo era só uma imagem e o clique não fazia nada. O <a> por fora
   preserva o layout do header (inline-flex) e ganha um foco visível, porque
   quem navega por teclado também usa esse atalho. */
a.marca-link { display: inline-flex; align-items: center; text-decoration: none; }
a.marca-link:focus-visible {
  outline: 2px solid var(--ac, #d4af37); outline-offset: 3px; border-radius: 6px;
}

/* ══════════════ CATÁLOGO (P1.5 · 11/09) ══════════════
   A tela do catálogo é feita de NÚMERO: quantos produtos, quantos com preço,
   qual o maior. `.ct-numeros` é a grade que dá a esses números o tamanho que
   eles merecem — ler "maior preço: R$ 18.990" numa linha de texto corrido é o
   mesmo que não mostrar. `.alerta` é o que faz o olho parar no número errado.
   Reaproveita os tokens de cor e espaço; nenhum valor novo é escolhido aqui. */
.ct-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--e-2); margin: var(--e-3) 0;
}
.ct-numeros > div {
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-g);
  padding: var(--e-3); text-align: center;
}
.ct-numeros b { display: block; font-size: var(--fs-5); color: var(--tx); font-variant-numeric: tabular-nums; }
.ct-numeros small { display: block; margin-top: 2px; color: var(--tx2); font-size: var(--fs-2); }
.ct-numeros b.ok { color: var(--ok); }
.ct-numeros b.alerta, b.alerta { color: var(--warn); }

.ct-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-top: var(--e-3); }
.ct-acoes .btn-up { width: auto; margin-top: 0; }
.ct-acoes select {
  background: var(--card2); color: var(--tx); border: 1px solid var(--line);
  border-radius: var(--r-g); padding: 8px 10px; font-size: var(--fs-3);
}
.ct-busca { display: flex; gap: var(--e-2); margin: var(--e-3) 0; }
.ct-busca input {
  flex: 1; background: var(--card2); color: var(--tx); border: 1px solid var(--line);
  border-radius: var(--r-g); padding: 10px 12px; font-size: var(--fs-4);
}

/* Tabela de produto. Rola DENTRO do próprio container: catálogo tem coluna de
   aplicação longa, e deixar a página rolar de lado quebra a leitura do resto. */
.tab { width: 100%; border-collapse: collapse; margin: var(--e-3) 0; font-size: var(--fs-3); display: block; overflow-x: auto; }
.tab th, .tab td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tab th { color: var(--tx2); font-size: var(--fs-2); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.tab td small { color: var(--tx2); }
.tab .tabular { font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block; background: var(--ac-fraco); color: var(--ac2);
  border: 1px solid var(--ac-linha); border-radius: var(--r-pill);
  padding: 1px 8px; font-size: var(--fs-1); margin: 1px 0;
}
.cx-check { display: flex; gap: var(--e-2); align-items: flex-start; margin: var(--e-3) 0; font-size: var(--fs-3); color: var(--tx2); }
.cx-check input { margin-top: 3px; flex-shrink: 0; }