/* Extraído do index.html monolítico em 21/08/2026 (build.js).
   Editar AQUI, nunca no index.html. */
*{box-sizing:border-box;margin:0;padding:0}
/* Controle de formulário não herda fonte do body por padrão — sem isto o campo
   fica na fonte do sistema enquanto a página inteira está na da casa. */
input,select,textarea,button{font-family:inherit}
/* ═══════════════════════════════════════════════════════════════════════
   TEMA — claro · escuro · misto (21/08/2026)

   Mecanismo IDÊNTICO ao do Tarefas e do MeuERP, pra regra copiada de lá cair
   aqui sem tradução: `data-theme` é SEMPRE escrito no <html>, e o boot mora no
   index.html ANTES do CSS — senão a tela pisca branca a cada reload no escuro.

   ⚠️ O padrão aqui é CLARO, ao contrário dos apps internos. Este painel é do
   CLIENTE: virar todo mundo pro escuro de um dia pro outro é mudança visível
   de produto, não ajuste de tema. Quem quiser escuro escolhe e fica escolhido.

   Os nomes CANÔNICOS da casa (--panel, --panel-2, --border, --muted,
   --surface-X/--on-X, --sidebar-*) carregam o VALOR. Os nomes antigos deste
   painel (--white, --gray-light, --gray-border, --text2…) viraram APELIDOS
   apontando pra eles: os ~700 usos espalhados por app.js seguem valendo e o
   bloco escuro só redefine o canônico — dois jogos de token não têm como
   divergir no primeiro ajuste de cor.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Mono é fonte de DADO, não de interface — é a régua do MeuERP, onde ela
     aparece em exatamente 3 lugares: número do DID, documento e código. Aqui
     vale o mesmo corte: telefone, ID de contato, domínio, token, snippet e
     tecla de menu ficam em mono porque alinham em coluna e não deixam confundir
     0/O e 1/l. Título, botão, rótulo, badge, cabeçalho de tabela, métrica e
     nota do atendimento NÃO — isso é interface, e interface é --font.
     🪤 Até 25/08/2026 o painel inteiro era mono (decisão de 20/08 copiando a
     landing) e o corte tinha sido feito só no texto corrido: sobraram título,
     botão e métrica: "ainda vejo bastante texto com a fonte antiga". */
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;   /* régua do MeuERP */
  /* 🔤 Fonte do TEXTO CORRIDO — a mesma pilha do Tarefas e do MeuERP, que é a
     régua da casa. Este painel era o único dos três com o corpo inteiro em mono
     (desde 20/08), e o próprio comentário aqui já dizia por quê isso incomoda:
     mono é ótima em título, número, código e badge, e em texto corrido cansa e
     alarga a linha. A marca não se perde — os poucos lugares que ainda pedem
     var(--mono) são DADO (telefone, ID, domínio, snippet, tecla), nunca chrome.
     Pilha de sistema, sem webfont: uma requisição a menos e zero FOUT. */
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;   /* régua do MeuERP */

  /* ── Marca ──────────────────────────────────────────────────────────────
     🪤 --lia é sobrescrito INLINE no <html> pelo white-label (app.js:~7863,
     branding.brand_color). Estilo inline vence seletor, então o bloco escuro
     NÃO pode redefini-lo: valeria só pro tenant sem marca própria. É o certo
     de qualquer jeito — cor de white-label não é defeito de tema. */
  --lia:#3E8EF0;
  --on-lia:#fff;      /* texto EM CIMA do acento */
  --spark:#7FC4FA;    /* ponto de destaque da capa */
  --lia-dark:color-mix(in srgb, var(--lia) 80%, black);
  /* 🪤 Estas duas misturavam com WHITE. São 40 usos de fundo e borda: no tema
     escuro cada um virava um bloco quase branco no meio da tela. Misturar com
     TRANSPARENT resolve os 3 modos numa definição só — sobre fundo branco o
     resultado composto é idêntico ao de antes (0,1·cor + 0,9·branco nos dois),
     então o tema claro não mudou um pixel, e sobre o navy vira um azul sutil. */
  --lia-light:color-mix(in srgb, var(--lia) 10%, transparent);
  --lia-border:color-mix(in srgb, var(--lia) 30%, transparent);
  /* 🪤 Texto do acento EM CIMA da tinta do acento dava 2,85:1 — medido, e já era
     assim antes do tema (a tinta compõe igual sobre branco). O acento cheio não
     serve como texto sobre a própria tinta: precisa escurecer no claro e
     clarear no escuro. Sai do --lia, então o white-label continua mandando. */
  --on-lia-tint:var(--lia-dark);

  /* ── Superfícies e texto (canônico) ─────────────────────────────────── */
  --bg:#F7F9FC;
  --panel:#FFFFFF;
  --panel-2:#F5F6F8;
  --border:#E2E6EC;
  --border-strong:#CBD5E1;
  --input-bg:#FFFFFF;
  --row-hover:#F8FAFC;
  --text:#0F1624;
  --muted:#4A5568;
  --text3:#6B7280;
  /* 🪤 Texto PEQUENO (10–11px, maiúscula com letter-spacing) não usa --muted:
     é o caso mais difícil de ler e some antes de qualquer outro. --label-text é
     a variante legível, como já é no Tarefas. */
  --label-text:#475569;
  /* Scrim de modal — precisa escurecer junto com o tema, senão no escuro o véu
     de 45% não separa mais o modal do fundo (que já é escuro). */
  --overlay:rgba(15,23,42,.45);

  /* ── Sidebar ────────────────────────────────────────────────────────────
     Token próprio porque no modo MISTO ela é escura enquanto o resto da página
     segue clara — não dá pra sair de --panel. */
  --sidebar-bg:#FFFFFF;
  --sidebar-line:#E2E6EC;
  --sidebar-text:#4A5568;
  --sidebar-hover:#F5F6F8;
  --sidebar-text-forte:#0F1624;
  --sidebar-label:#6B7280;

  /* ── Famílias semânticas ────────────────────────────────────────────────
     Medido neste app: --green 24 usos de TEXTO contra 1 de preenchimento,
     --amber 10×0, --red 39×11, --purple 4×2. Ou seja: estes tokens são cor de
     TEXTO na prática, e por isso clareiam no escuro. Os poucos lugares que são
     preenchimento sólido com texto branco em cima usam --X-fill, que NÃO muda:
     var(--border-danger) com branco por cima seria ilegível. */
  /* 🔤 Estas duas são cor de TEXTO na prática (verde 24 usos de texto contra 1
     de preenchimento; âmbar 10 contra 0) e como texto reprovavam sobre o painel
     branco: #16A34A dava 3,3:1 e #D97706 dava 3,19:1 — medido. Escurecidas para
     5,02 e 5,05. O âmbar é o MESMO #B45309 que o Tarefas usa em --warn-text, pra
     os arquivos seguirem espelho.
     ⚠️ Só a SEMÂNTICA escureceu. A marca (--lia) fica como está: vem do
     white-label e é identidade, não defeito de tema — repintar isso seria
     decidir a cor do cliente por conta própria. O vermelho já passava (4,83) e
     também não mudou. E o --X-fill segue no tom cheio: é o que vai em bolinha
     de status e em botão sólido, onde escurecer só sujaria. */
  --green:#15803D;  --green-fill:#16A34A;
  --amber:#B45309;  --amber-fill:#D97706;
  --red:#DC2626;    --red-fill:#DC2626;
  --purple:#7C3AED; --purple-fill:#7C3AED;
  --gray:#808080;

  /* Par superfície + texto que vai EM CIMA dela. Andam sempre juntos: trocar só
     um dos dois é exatamente como o texto some sem gerar erro. */
  --surface-ok:#F0FDF4;      --on-ok:#166534;     --border-ok:#BBF7D0;
  --surface-warn:#FFFBEB;    --on-warn:#92400E;   --border-warn:#FDE68A;
  --surface-danger:#FEF2F2;  --on-danger:#B91C1C; --border-danger:#FECACA;
  --surface-info:#EFF6FF;    --on-info:#1D4ED8;   --border-info:#BFDBFE;
  --surface-accent:#F5F3FF;  --on-accent:#6B21A8; --border-accent:#DDD6FE;

  /* ── Apelidos do vocabulário antigo deste painel ──────────────────────── */
  --white:var(--panel);
  --gray-light:var(--panel-2);
  --gray-bg:var(--panel-2);
  --bg2:var(--panel-2);
  --gray-border:var(--border);
  --text2:var(--muted);
  --danger:var(--red);
  --green-bg:var(--surface-ok);      --green-border:var(--border-ok);
  --amber-bg:var(--surface-warn);    --amber-border:var(--border-warn);
  --red-bg:var(--surface-danger);
  --purple-bg:var(--surface-accent); --purple-border:var(--border-accent);

  --radius:12px;--radius-lg:18px;
  --shadow:0 2px 12px rgba(62,142,240,.08),0 1px 4px rgba(0,0,0,.05);
  --shadow-lg:0 8px 40px rgba(62,142,240,.14),0 2px 8px rgba(0,0,0,.07);
}

/* Escuro NAVY — os MESMOS valores do Tarefas e do MeuERP (design-ref do Painel
   Técnico). Os três arquivos são espelho: divergir aqui quebra a regra de que
   uma correção de lá cai aqui sem tradução. */
:root[data-theme="dark"]{
  --bg:#070e1c;
  --panel:#0e1a30;
  --panel-2:#12203a;
  --border:rgba(148,163,184,.12);
  --border-strong:rgba(148,163,184,.26);
  --input-bg:#0c1524;
  --row-hover:#12203a;
  --on-lia-tint:color-mix(in srgb, var(--lia) 55%, white);
  --text:#eaf0f9;
  --muted:#93a4bd;
  --text3:#7d8ca6;
  --label-text:#93a4bd;
  --gray:#93a4bd;
  --overlay:rgba(0,0,0,.65);

  --green:#86efac; --amber:#fcd34d; --red:#fca5a5; --purple:#d8b4fe;

  /* Pastel fixo não vira um segundo pastel no escuro: vira a cor da família
     TRANSLÚCIDA, que acompanha o fundo real embaixo dela. */
  --surface-ok:rgba(34,197,94,.15);     --on-ok:#86efac;     --border-ok:rgba(34,197,94,.30);
  --surface-warn:rgba(245,158,11,.15);  --on-warn:#fcd34d;     --border-warn:rgba(245,158,11,.30);
  --surface-danger:rgba(239,68,68,.16); --on-danger:#fca5a5; --border-danger:rgba(239,68,68,.32);
  --surface-info:rgba(59,130,246,.16);  --on-info:#93c5fd;   --border-info:rgba(59,130,246,.32);
  --surface-accent:rgba(168,85,247,.16);--on-accent:#d8b4fe; --border-accent:rgba(168,85,247,.32);

  --shadow:0 2px 12px rgba(0,0,0,.35),0 1px 4px rgba(0,0,0,.25);
  --shadow-lg:0 8px 40px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
}

/* MISTO = conteúdo claro + sidebar escura. É só isto: os tokens de sidebar do
   escuro valendo enquanto o resto da página segue no :root claro. O seletor é
   COMPARTILHADO com o dark de propósito — dois blocos com os mesmos valores
   divergem no primeiro ajuste. (Mesma solução do MeuERP e do Tarefas.) */
:root[data-theme="dark"],
:root[data-theme="misto"]{
  --sidebar-bg:#0a1224;
  --sidebar-line:rgba(148,163,184,.10);
  --sidebar-text:#dfe8f5;
  --sidebar-hover:#16233d;
  --sidebar-text-forte:#ffffff;
  --sidebar-label:#93a4bd;
}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6;min-height:100vh;letter-spacing:0}
/* button/input/select/textarea NÃO herdam a fonte do documento — caem no default
   do browser (Arial). Era por isso que "Modo claro" e "Recolher" saíam com outra
   fonte no meio da sidebar. Regra global pra não precisar lembrar disso em cada
   controle novo. */
button,input,select,textarea{font-family:inherit}

/* LOGIN */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-left{background:var(--lia);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;position:relative;overflow:hidden}
.login-left::before{content:'';position:absolute;width:400px;height:400px;border-radius:50%;border:1.5px solid rgba(255,255,255,.1);top:-100px;right:-100px}
.login-left::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;border:1.5px solid rgba(255,255,255,.08);bottom:-80px;left:-80px}
.login-left h1{font-family:var(--font);font-size:1.7rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin:1.5rem 0 .75rem;position:relative;z-index:1}
.login-left p{color:rgba(255,255,255,.75);font-size:.9rem;line-height:1.75;max-width:320px;position:relative;z-index:1}
.login-features{margin-top:2.5rem;text-align:left;position:relative;z-index:1}
.lf-item{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;color:rgba(255,255,255,.85);font-size:.85rem;font-weight:500}
.lf-dot{width:8px;height:8px;border-radius:50%;background:var(--spark);flex-shrink:0}
.login-right{display:flex;align-items:center;justify-content:center;padding:3rem;background:var(--bg)}
.login-card{background:var(--white);border:1.5px solid var(--gray-border);border-radius:var(--radius-lg);padding:2.5rem;width:100%;max-width:400px;box-shadow:var(--shadow-lg)}
.login-title{font-size:1.3rem;font-weight:700;margin-bottom:.3rem;letter-spacing:-.02em}
.login-sub{font-size:.82rem;color:var(--text2);margin-bottom:2rem}
.login-error{background:var(--red-bg);border:1px solid var(--border-danger);color:var(--red);padding:.65rem .9rem;border-radius:8px;font-size:.8rem;margin-bottom:1rem;font-weight:500}
.login-error.warn{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber)}
.login-success{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);padding:.65rem .9rem;border-radius:8px;font-size:.8rem;margin-bottom:1rem;font-weight:500}
.forgot{font-size:.75rem;color:var(--lia);cursor:pointer;float:right;margin-top:.3rem;font-weight:500;background:none;border:none;font-family:inherit;padding:0}
.forgot:hover{text-decoration:underline}
.login-footer{text-align:center;margin-top:1.5rem;font-size:.75rem;color:var(--text3)}
.login-footer a{color:var(--lia);font-weight:600;text-decoration:none;cursor:pointer}
.back-to-login{text-align:center;margin-top:1rem;font-size:.78rem}
.back-to-login button{background:none;border:none;color:var(--lia);font-weight:600;cursor:pointer;font-family:inherit;font-size:inherit}
.back-to-login button:hover{text-decoration:underline}

/* FORMS */
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);margin-bottom:.4rem}
.form-group input,.form-group select,.form-group textarea,
/* Campo FORA de .form-group também é campo: sem entrar aqui ele sai com a cara
   crua do browser (régua 1). Estender o seletor existente e não copiar os
   valores — duas cópias divergem no primeiro ajuste. */
.input,.fx-op input,.fx-sim-in input,.fx-tecla-in{width:100%;background:var(--gray-light);border:1.5px solid var(--gray-border);color:var(--text);padding:.62rem .9rem;border-radius:9px;font-size:.875rem;font-family:var(--font);font-weight:500;transition:border-color .15s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
.input:focus,.fx-op input:focus,.fx-sim-in input:focus,.fx-tecla-in:focus{border-color:var(--lia);background:var(--input-bg)}
.form-group textarea{resize:vertical}

/* ═══════ CHECKBOX E RADIO DENTRO DE .form-group ═══════
   🔴 Duas regras genéricas acima miravam o que não deviam, e o efeito só
   aparece na tela — nenhum erro, nenhum teste vermelho:

   1. `.form-group input` casa TODO input, checkbox incluído. Com `width:100%`
      o quadradinho vira uma barra: medido na tela de API em 31/08, o checkbox
      tinha **806px** e empurrava o rótulo pra x=1096, fora da área do card.
   2. `.form-group label` é o rótulo do CAMPO (block, 11px, uppercase). O
      `<label>` que ENVOLVE um checkbox herdava isso, e a permissão aparecia
      em maiúsculas, quebrada numa coluna estreita na borda direita.

   Corrigido aqui e não em cada tela porque são 5 lugares no app.js hoje, e o
   sexto nasceria errado. */
.form-group input[type=checkbox],
.form-group input[type=radio]{
  width:auto; min-width:0; flex:0 0 auto;
  padding:0; margin:0;
  background:none; border:none; border-radius:0;
  accent-color:var(--lia);   /* some com a cor default do browser (régua 1) */
  cursor:pointer;
}
/* Linha de marcar ≠ rótulo de campo. `:has()` alcança as telas que já existiam
   sem precisar tocar no JSX de cada uma. */
.form-group label:has(input[type=checkbox]),
.form-group label:has(input[type=radio]){
  display:flex; align-items:center; gap:.5rem;
  text-transform:none; letter-spacing:normal;
  font-size:.875rem; font-weight:500; color:var(--text);
  margin-bottom:.35rem; cursor:pointer;
}
/* O texto da linha pode ter 2 linhas: sem min-width:0 ele empurra o irmão pra
   fora em 375px (a causa nº1 de estouro na régua da casa). */
.form-group label:has(input[type=checkbox]) > span,
.form-group label:has(input[type=radio]) > span{ min-width:0 }
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
/* `min-width:0` faz o `1fr` poder encolher: item de grid nasce com
   `min-width:auto` e NÃO fica menor que o conteúdo, então um input (largura
   intrínseca de ~20 caracteres) ou uma frase de ajuda comprida empurram a
   coluna pra fora do container.

   🪤 SOZINHO ELE NÃO CONSERTA NADA — medido em 08/09/2026 no modal de nova
   empresa, nas 4 combinações. Com o modal em 480px ele apenas trocou
   TRANSBORDO por CORTE: os campos pararam de vazar 83px e o `.picker-val`
   passou a exibir "Pagante — assina e é c…" (212px de texto em 154px), num
   seletor de modalidade de cobrança. Quem resolveu o print do Dirceu foi
   ALARGAR o modal pra 600px. Isto aqui fica porque `.form-row` é usada em
   outros lugares mais estreitos, onde vazar é pior que quebrar linha.

   🪤 E `overflow:hidden` no modal não serve: esconde o campo em vez de fazer
   caber, e o `.picker-menu` é `fixed` — seria cortado ao abrir. */
.form-row > *{min-width:0}
/* Abaixo de 560px duas colunas de ~200px não cabem: vira uma coluna. */
@media (max-width:560px){ .form-row{grid-template-columns:1fr} }
.form-hint{font-size:.7rem;color:var(--text3);margin-top:.3rem}

/* BTNS */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.52rem 1.2rem;border-radius:100px;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .15s;border:none;font-family:var(--font)}
.btn-lia{background:var(--lia);color:var(--on-lia)}
.btn-lia:hover{background:var(--lia-dark)}
/* 🔴 Desabilitado tem que PARECER desabilitado. Isto existia só no `.btn-lia`:
   todo botão `outline`, `ghost` ou `xs` desabilitado ficava com opacidade 1 e
   cursor de clique — a pessoa clica, nada acontece, e ela conclui que o sistema
   travou. Medido em 02/09/2026 na lista de templates da Meta: 3 dos 4 botões
   estavam `disabled` de verdade e os quatro pareciam iguais.
   Na base, pra valer em qualquer variante que exista ou venha a existir. */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover,.btn[disabled]:hover{filter:none;transform:none}
.btn-lia:disabled{opacity:.6;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--text2);border:none;padding:.4rem .6rem;font-size:.8rem;cursor:pointer}
.btn-ghost:hover{color:var(--lia)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--gray-border);cursor:pointer}
.btn-outline:hover{border-color:var(--lia);color:var(--lia)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--border-danger);cursor:pointer}
.btn-danger:hover{background:var(--surface-danger)}
.btn-sm{padding:.38rem .85rem;font-size:.77rem}
.btn-xs{padding:.28rem .65rem;font-size:.72rem}

/* DASH LAYOUT */
.dash-wrap{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
/* 🔴 A sidebar crescia com o conteúdo (787px) e a PÁGINA NÃO ROLAVA (medido: 0px
   de rolagem num viewport de 700). O rodapé — tema, Recolher, Sair — ficava
   inalcançável, e foi por isso que o Dirceu disse "não temos botão de modo
   escuro": ele estava em y=707 numa tela de 700.

   Presa em 100vh e grudada no topo: o rodapé fica SEMPRE visível, e quem rola é
   o menu por dentro (`.sidebar-nav` tem min-height:0 + overflow-y:auto). */
.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--sidebar-line);display:flex;flex-direction:column;
  height:100vh;height:100dvh;position:sticky;top:0}
.sidebar-top{padding:1.25rem 1rem 1rem;border-bottom:1px solid var(--sidebar-line)}
.sidebar-brand{display:flex;align-items:center;justify-content:center;gap:.6rem}
.sidebar-brand-name{font-family:var(--mono);font-weight:800;font-size:.88rem;color:var(--lia);letter-spacing:.02em;line-height:1}
.sidebar-brand-sub{font-family:var(--mono);font-size:.58rem;color:var(--sidebar-label);font-weight:500;line-height:1.3}
.sidebar-client{margin-top:.85rem;background:var(--lia-light);border:1px solid var(--lia-border);border-radius:9px;padding:.6rem .75rem;display:flex;align-items:center;gap:.6rem}
.sidebar-client.master{background:var(--purple-bg);border-color:var(--purple-border)}
.sidebar-client.master .client-av{background:var(--purple-fill)}
.sidebar-client.master .client-plan{color:var(--on-accent)}
.client-av{width:30px;height:30px;background:var(--lia);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--on-lia);font-weight:700;font-size:.72rem;flex-shrink:0}
.client-name{font-size:.78rem;font-weight:700;line-height:1;color:var(--sidebar-text-forte)}
.client-plan{font-size:.62rem;color:var(--on-lia-tint);font-weight:600}

/* ═══════ SELETOR DE EMPRESA (master) ═══════
   Pintado SÓ com tokens de sidebar (`--sidebar-*`, `--lia`). O `.picker-btn`
   genérico nasce com tokens de CONTEÚDO (`--input-bg`, `--text`) — e no tema
   `misto`, que é corpo claro + sidebar escura, isso põe um campo branco com
   texto quase preto dentro da barra navy. Mesmo motivo do bloco de `.sidebar-
   client.master` lá embaixo, e por isso aqui não existe bloco `[data-theme]`
   nenhum: token de sidebar já vira sozinho nos três modos.
   O `.picker-menu` fica de fora de propósito — ele flutua sobre o conteúdo, não
   sobre a sidebar, e é do conteúdo que ele deve puxar a cor. */
.sidebar-empresa{margin-top:.6rem}
.sidebar-empresa-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--sidebar-label);margin-bottom:.28rem;padding-left:.15rem}
.sidebar-empresa .picker-btn{
  background:var(--sidebar-hover);border-color:var(--sidebar-line);color:var(--sidebar-text-forte);
  font-size:.78rem;font-weight:600;padding:.5rem .6rem;border-radius:9px
}
.sidebar-empresa .picker-btn:hover:not(:disabled){border-color:var(--lia)}
.sidebar-empresa .picker.open .picker-btn,
.sidebar-empresa .picker-btn:focus-visible{border-color:var(--lia);box-shadow:0 0 0 3px var(--lia-light)}
.sidebar-empresa-erro{margin-top:.35rem;font-size:.66rem;line-height:1.35;color:var(--red)}
/* Colapsada (68px): some o rótulo e o nome, fica o botão com a seta. O menu é
   `position:fixed` com largura mínima própria, então continua legível — trocar
   de empresa não exige reabrir o menu lateral. */
.sidebar-collapsed .sidebar-empresa-label,
.sidebar-collapsed .sidebar-empresa .picker-val{display:none}
.sidebar-collapsed .sidebar-empresa .picker-btn{justify-content:center;padding:.45rem}
/* 🔴 A sidebar transbordava SEM ROLAR em tela baixa: 787px de conteúdo em 700px
   de viewport, `overflow-y: visible`. O rodapé — botão de tema, Recolher, Sair —
   ficava inalcançável, e foi por isso que o Dirceu disse "não temos botão de
   modo escuro" (medido: y=707 num viewport de 700).

   🪤 `overflow-y:auto` sozinho NÃO resolve: filho de flex não encolhe abaixo do
   conteúdo sem `min-height:0`. Sem ele o nav continua com a altura toda e o
   estouro só muda de lugar. É a mesma armadilha do `min-width:0` na horizontal. */
/* ── Busca do menu (21/09/2026) ────────────────────────────────────────────
   Mora no `sidebar-top`, que não tem overflow: a lista de resultados é
   absoluta e seria cortada dentro do `.sidebar-nav`. Tokens da própria
   sidebar nos 3 temas — `--sidebar-*` existe em light, misto e dark. */
.menu-busca{position:relative;margin-top:.7rem}
.menu-busca > input{
  width:100%;box-sizing:border-box;background:var(--sidebar-hover);color:var(--sidebar-text-forte);
  border:1px solid var(--sidebar-line);border-radius:9px;padding:.42rem .6rem;font-size:.78rem}
.menu-busca > input::placeholder{color:var(--sidebar-label);opacity:1}
.menu-busca > input:focus{outline:none;border-color:var(--lia);box-shadow:0 0 0 2px var(--lia-light)}
.menu-busca-res{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;
  background:var(--sidebar-bg);border:1px solid var(--sidebar-line);border-radius:9px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);overflow:hidden auto;max-height:320px}
.menu-busca-res button{
  display:flex;align-items:baseline;gap:.5rem;width:100%;text-align:left;background:none;border:none;
  color:var(--sidebar-text);padding:.45rem .6rem;font-size:.8rem;cursor:pointer}
/* 🔴 Realce em `--sidebar-hover`, NÃO em `--lia` com texto branco: medido em
   21/09 com a contraste-lib, branco sobre o acento claro dá 3,55:1 nos temas
   light e misto — reprova. O mesmo par já existe no `.s-item.active` e é dívida
   antiga do painel; copiá-lo aqui seria criar dívida nova sabendo. A barra
   lateral no acento devolve o destaque sem apostar no texto. */
.menu-busca-res button:hover,
.menu-busca-res button.active{background:var(--sidebar-hover);color:var(--sidebar-text-forte);box-shadow:inset 3px 0 0 var(--lia)}
.menu-busca-res button > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-busca-res button > small{color:var(--sidebar-label);font-size:.68rem;flex-shrink:0}
.menu-busca-res button:hover > small,
.menu-busca-res button.active > small{color:var(--sidebar-text)}
.menu-busca-vazio{padding:.5rem .6rem;color:var(--sidebar-label);font-size:.75rem}
/* Menu recolhido (68px): campo de texto não cabe e viraria caixa sem uso. */
.sidebar-collapsed .menu-busca{display:none}
.sidebar-nav{flex:1;min-height:0;overflow-y:auto;padding:.75rem}
.sidebar-section-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--sidebar-label);padding:.5rem .5rem .25rem;margin-top:.5rem}
.s-item{display:flex;align-items:center;gap:.55rem;padding:.48rem .65rem;border-radius:9px;cursor:pointer;font-size:.82rem;font-weight:500;color:var(--sidebar-text);margin-bottom:.1rem;transition:all .12s}
.s-item:hover{background:var(--sidebar-hover);color:var(--sidebar-text-forte)}
.s-item.active{background:var(--lia);color:var(--on-lia);font-weight:600}
.s-item.purple.active{background:var(--purple-fill)}
.sidebar-bot{border-top:1px solid var(--sidebar-line);padding:.75rem}

/* ═══════ PRESENÇA (sidebar) ═══════
   Tokens de SIDEBAR, não de conteúdo: no tema `misto` a barra é escura e o
   resto da página é claro — controle pintado com token de conteúdo vira uma
   peça branca dentro da barra navy. Mesmo motivo do seletor de empresa. */
.presenca-wrap{position:relative;margin-bottom:.5rem}
.presenca-btn{
  width:100%;display:flex;align-items:center;gap:.45rem;cursor:pointer;
  background:var(--sidebar-hover);border:1px solid var(--sidebar-line);
  color:var(--sidebar-text-forte);font-family:inherit;font-size:.76rem;font-weight:600;
  padding:.42rem .55rem;border-radius:8px
}
.presenca-btn:hover{border-color:var(--lia)}
.presenca-lb{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.presenca-ponto{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.presenca-menu{
  position:absolute;bottom:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 10px 30px rgba(15,23,42,.18);padding:4px;min-width:190px
}
.presenca-opt{
  width:100%;display:flex;align-items:flex-start;gap:.5rem;text-align:left;
  background:none;border:none;cursor:pointer;font-family:inherit;font-size:.78rem;
  color:var(--text);padding:.45rem .5rem;border-radius:7px
}
.presenca-opt:hover{background:var(--panel-2)}
.presenca-opt.atual{color:var(--lia)}
.presenca-opt .presenca-ponto{margin-top:.35rem}
/* Colapsada: fica o ponto, que é o que importa saber de relance. */
.sidebar-collapsed .presenca-lb,
.sidebar-collapsed .presenca-btn svg{display:none}
.sidebar-collapsed .presenca-btn{justify-content:center;padding:.42rem}

/* ═══════ SIDEBAR COLAPSÁVEL ═══════ */

/* Estado expandido (default) — 220px */
.dash-wrap.sidebar-collapsed{grid-template-columns:68px 1fr}

/* Esconder textos em sidebar colapsada */
.sidebar-collapsed .sidebar-brand-name,
.sidebar-collapsed .sidebar-brand-sub,
.sidebar-collapsed .client-name,
.sidebar-collapsed .client-plan,
.sidebar-collapsed .sidebar-section-label,
.sidebar-collapsed .status-badge span:not(.s-dot):not(.collapse-icon),
.sidebar-collapsed .sidebar-client > div:not(.client-av){display:none}



.sidebar-collapsed .sidebar-brand{justify-content:center}
.sidebar-collapsed .sidebar-client{padding:.4rem;justify-content:center}
.sidebar-collapsed .sidebar-nav{padding:.5rem .35rem}
/* Sidebar colapsada: esconder texto, manter ícone — itens do menu são .s-item (div) */
.sidebar-collapsed .sidebar-nav .s-item{
  justify-content:center !important;
  padding:.65rem !important;
  position:relative;
  overflow:hidden !important;
  gap:0 !important;
  font-size:0 !important;
  white-space:nowrap !important;
  width:auto
}
/* Ícone (primeiro span filho) mantém tamanho visível */
.sidebar-collapsed .sidebar-nav .s-item > span{
  font-size:1rem !important;
  width:auto !important;
  flex-shrink:0
}

/* Tooltip ao passar mouse em sidebar colapsada */
.sidebar-collapsed .sidebar-nav .s-item:hover::after{
  content:attr(data-label);
  position:absolute;
  left:calc(100% + 8px);
  top:50%;
  transform:translateY(-50%);
  background:var(--text);
  color:#fff;
  padding:.35rem .6rem;
  border-radius:6px;
  font-size:.75rem;
  white-space:nowrap;
  z-index:100;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  pointer-events:none
}

/* Botão toggle (rodapé) */
.sidebar-toggle{
  width:100%;
  background:transparent;
  border:1px solid var(--sidebar-line);
  border-radius:6px;
  padding:.4rem .5rem;
  cursor:pointer;
  color:var(--sidebar-text);
  font-size:.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  transition:all .15s;
  margin-top:.5rem
}
.sidebar-toggle:hover{background:var(--sidebar-hover);color:var(--sidebar-text-forte)}
.sidebar-collapsed .sidebar-toggle .toggle-label{display:none}

/* ═══════ COLUMN HIDING ═══════ */

/* Esconde em telas < 1400px */
@media (max-width: 1400px) {
  .col-hide-xl{display:none !important}
}

/* Esconde em telas < 1200px */
@media (max-width: 1200px) {
  .col-hide-lg{display:none !important}
}

/* Esconde em telas < 1024px (meia tela em monitor Full HD) */
@media (max-width: 1024px) {
  .col-hide-md{display:none !important}
  /* Coluna "Ações" das tabelas: empilha botões verticalmente quando aperta */
  .actions-cell{white-space:normal !important;text-align:right;display:flex;flex-direction:column;gap:.3rem;align-items:stretch}
  .actions-cell .btn{margin:0 !important;justify-content:center}
}

/* Esconde em mobile (<768px) — colunas secundárias caem fora */
@media (max-width: 768px) {
  .col-hide-sm{display:none !important}
}

/* Atendimento (inbox) — responsivo: empilha lista→thread no mobile */
.atd-back{display:none}
/* EMPILHAMENTO (um painel por vez). Subiu de 720 -> 960.
   O criterio NAO e "onde a sidebar vira drawer" (768) e sim onde a thread para de
   ser apertada. Acima de 768 a sidebar deixa de ser drawer e come 180-200px, mas a
   lista segue em 320px — entao a thread MINGUA em vez de crescer: 235px em 769,
   299px em 833, 363px em 897. So em ~960 ela alcanca 427px, que e a largura que o
   iPad portrait tinha antes. Abaixo disso, um painel por vez ganha de duas colunas.
   ⚠️ Esse degrau e ANTERIOR a esta mudanca — antes morava em 721 e ninguem via. */
/* Linha de opção da Supervisão IA: checkbox à esquerda, título + explicação
   empilhados, controle opcional colado à direita. A explicação em <em> é o que
   diferencia "ligar a IA" de "ligar a IA e ela começa a mandar WhatsApp" —
   quem lê a tela precisa saber o que muda ANTES de clicar. */
.ia-linha{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem 0;
  border-bottom:1px solid var(--gray-border);font-size:.8rem;cursor:pointer}
.ia-linha:last-child{border-bottom:none}
.ia-linha input[type=checkbox]{width:16px;height:16px;margin-top:.15rem;flex:none;cursor:pointer}
.ia-linha > span{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ia-linha strong{font-weight:600;color:var(--text)}
.ia-linha em{font-style:normal;font-size:.72rem;color:var(--text2);line-height:1.4}
/* `select` dentro da linha não pode encolher a ponto de virar um traço: o
   min-width evita o achatamento que o flex faz num viewport de 375. */
.ia-linha select{flex:none;min-width:92px}
@media (max-width:520px){
  .ia-linha{flex-wrap:wrap}
  .ia-linha select{margin-left:2.2rem !important;margin-top:.35rem}
}

/* Painel de contato: 3ª coluna só em tela larga. Abaixo de 1180px ele TOMA o
   card — dividir 300px de cadastro com a conversa num viewport de 1000px deixa
   as duas ilegíveis. Mesmo padrão que a lista já usa embaixo de 960. */
/* Painel RECOLHIDO (27/10/2026): sobra uma faixa de 40px com "Contato" na
   vertical — some o cadastro, fica o caminho de volta. Abaixo de 1180 não há
   faixa: lá o painel toma o card inteiro e quem o abre é o botão Contato do topo. */
.atd-contact-rail{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:.9rem 0;
  border:0;border-left:1px solid var(--gray-border);background:transparent;color:var(--text2);
  cursor:pointer;font-family:var(--font);font-size:.72rem;font-weight:600;min-width:0;transition:color .15s,background .15s}
.atd-contact-rail span{writing-mode:vertical-rl;letter-spacing:.04em}
.atd-contact-rail:hover{color:var(--text);background:var(--lia-light)}
.atd-contact-rail:focus-visible{outline:2px solid var(--lia);outline-offset:-2px}
.atd-contact .atd-fechar{display:none}
@media (max-width: 1180px){
  .atd-grid.with-contact{grid-template-columns:1fr !important}
  .atd-grid.with-contact .atd-list,.atd-grid.with-contact .atd-thread{display:none !important}
  .atd-grid.with-rail{grid-template-columns:clamp(320px, 23vw, 440px) 1fr !important}
  .atd-contact-rail{display:none}
  .atd-contact .atd-recolher{display:none}
  .atd-contact .atd-fechar{display:inline-flex}
}
@media (max-width: 960px){
  .atd-grid{grid-template-columns:1fr !important}
  /* !important pra vencer o display:flex inline de .atd-list/.atd-thread,
     senão o swap lista↔thread não acontece e a thread renderiza embaixo da lista */
  .atd-grid.has-sel .atd-list{display:none !important}
  .atd-grid:not(.has-sel) .atd-thread{display:none !important}
  .atd-back{display:inline-flex}
}

/* ALTURA no celular (<=720) é separada DE PROPOSITO do empilhamento acima.
   Aqui o painel cresce com o conteudo em vez de travar na viewport: `vh` no iOS
   conta a barra do Safari, entao 100vh corta o rodape e o compositor some
   (mesma armadilha do bug do 100vh no iPhone). Entre 721 e 768 nao entra nesta
   regra — la a cadeia do .atd-mode preenche a tela, que e o certo pro iPad. */
@media (max-width: 720px){
  .atd-grid{height:auto !important}
  .atd-grid .atd-list,.atd-grid .atd-thread{min-height:62vh}
}

/* Desktop (>768px): o inbox ocupa a altura util da janela em vez do 70vh
   chumbado no inline style — senao sobra ~1/4 de tela morta embaixo num 1080p
   e mais ainda em monitor maior. Precisa da CADEIA INTEIRA com altura definida
   (dash-wrap 100vh -> dash-body -> dash-content -> d-card), porque height:100%
   nao resolve dentro de pai com altura automatica. Vale so na view Atendimento
   (.atd-mode no dash-wrap); as outras views seguem rolando a pagina normal.
   O piso e 721px, casando EXATAMENTE com o breakpoint que decide se a tela e de
   duas colunas: abaixo de 721 o bloco empilha lista<->thread com height:auto e
   nao ha altura pra preencher. Na faixa 721-768 a sidebar ja e drawer `fixed`,
   e o `overflow:hidden` aqui NAO o quebra — medido: fechado x=-260, aberto x=0.
   (Vale medir e nao supor: `.page-anim` usa `animation ... both` com transform,
   entao o .dash-wrap e bloco-conteiner PERMANENTE dos position:fixed.) */
@media (min-width: 721px){
  .dash-wrap.atd-mode{height:100vh;overflow:hidden}
  /* a sidebar deixa de crescer com a pagina, entao o menu precisa rolar sozinho */
  .dash-wrap.atd-mode .sidebar-nav{overflow-y:auto;min-height:0}
  .dash-wrap.atd-mode .dash-body{min-height:0}
  .dash-wrap.atd-mode .dash-content{min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .dash-wrap.atd-mode .dash-content > .d-card{flex:1;min-height:0}
  /* !important pra vencer o height:70vh/minHeight:560 inline do .atd-grid */
  .dash-wrap.atd-mode .atd-grid{height:100% !important;min-height:0 !important;
    /* 🔴 `height:100%` na GRADE não segura as COLUNAS dela. A linha implícita
       nasce `auto`, que resolve pra max-content: a coluna da conversa crescia
       até 3318px dentro de uma grade de 704, empurrando o compositor pra fora —
       e com `overflow:hidden` no .atd-mode ele ficava INALCANÇÁVEL. O atendente
       simplesmente não conseguia responder.
       `minmax(0,1fr)` é o que torna a linha encolhível; `1fr` sozinho não
       serve, porque `1fr` tem mínimo `auto` embutido e o defeito volta igual.
       Medido a 1280×830 (iPad Safari, o print do Dirceu de 25/08). */
    grid-template-rows:minmax(0,1fr) !important}
}


.status-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:100px;font-size:.7rem;font-weight:600}
.status-badge.online{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.s-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* TOPBAR */
.topbar{background:var(--white);border-bottom:1px solid var(--gray-border);padding:.85rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.topbar-title h1{font-family:var(--font);font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.topbar-title p{font-size:.75rem;color:var(--text2);margin-top:.1rem}
.topbar-actions{display:flex;align-items:center;gap:.75rem}

/* IMPERSONATION BANNER */
/* `color` era #92400e cravado — valor do tema CLARO. No escuro virava texto
   escuro sobre superfície escura. Nenhuma guarda pegava porque este banner só
   aparece em impersonação, estado que elas não entram. Par correto:
   --surface-warn + --on-warn. */
.imp-banner{background:var(--surface-warn);border-bottom:1px solid var(--border-warn);padding:.6rem 2rem;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--on-warn);font-weight:500}
/* O aviso de escopo divide a pele do banner de impersonação de propósito: é a
   mesma família de mensagem ("você não está onde acha que está"). */
.escopo-banner{gap:1rem}
/* Barra FIXA. Antes rolava junto com a página: numa tela longa (Meu bot, Canais)
   o aviso saía de vista logo no primeiro scroll, e quem estava editando não
   tinha mais como saber de quem era a conta — que é exatamente o momento em que
   precisa saber. `z-index` acima do conteúdo e abaixo de modal. */
.imp-banner{position:sticky;top:0;z-index:40}
.imp-banner strong{color:var(--on-warn)}
.imp-close{background:var(--panel);color:var(--on-warn);border:1px solid var(--border-warn);padding:.3rem .75rem;border-radius:100px;font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit}
.imp-close:hover{background:var(--surface-warn)}

/* DASH CONTENT */
/* 🔴 `min-width:0` é o que impede a coluna de conteúdo de EMPURRAR a página.
   Item de grid não encolhe abaixo do min-content por padrão: com a tabela de
   empresas aberta, esta coluna ficava 90px mais larga que o `1fr` e a página
   inteira ganhava rolagem horizontal — medido em 1194px (70px) e 1280px (81px),
   e NÃO em 1024 nem 1366. Não-monotônico assim é a assinatura do problema: não
   adianta testar só nos 4 pontos, tem que varrer a faixa. */
.dash-body{display:flex;flex-direction:column;min-width:0}
.dash-content{padding:1.75rem 2rem;flex:1;min-width:0}
/* Com a coluna finalmente encolhendo, quem não cabe é a TABELA — e ela tem que
   rolar dentro do próprio cartão, não empurrar a página (régua: tabela montada
   no JS sem wrapper de overflow estoura a tela em vez de rolar). */
.dash-content .d-card > table,
.dash-content table{display:block;overflow-x:auto;max-width:100%}
/* A tabela rola, mas a AÇÃO não pode rolar pra fora: era o "Entrar como" cortado
   pela metade no print do Dirceu. Presa à direita, ela fica alcançável em
   qualquer largura, e o resto da linha passa por baixo. */
.dash-content td.actions-cell,
.dash-content th.actions-cell{position:sticky;right:0;background:var(--panel);
  box-shadow:-8px 0 8px -8px rgba(0,0,0,.25)}
.dash-content tr:hover td.actions-cell{background:var(--row-hover)}
/* Régua da casa: `thead` precisa de fundo próprio — sem ele o cabeçalho lê como
   a 1ª linha de dados. `.data-table th` já tinha; as tabelas montadas no JS sem
   essa classe (Contatos) não tinham, e ninguém via porque a guarda rodava com a
   tela VAZIA e imprimia "não avaliado" — buraco, não aprovação. Token, não
   pastel fixo: `--gray-light` acompanha os três modos. */
.dash-content thead th{background:var(--gray-light)}
/* A célula de ação presa à direita acompanha o cabeçalho, senão fica um
   retângulo de outra cor flutuando no fim da linha do thead. */
.dash-content thead th.actions-cell{background:var(--gray-light)}
.metrics-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem}
/* Tabelas responsivas */
.d-card table, .d-card .clients-table, table{width:100%;border-collapse:collapse}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Ver a nota em `sa-wrap` no app.js: devolve o `display:table` que a regra
   global do `.dash-content` tira, porque o wrapper já cuida da rolagem. */
.dash-content .sa-wrap > table{display:table;width:100%}
/* Agenda de contatos: abaixo de 768px a coluna Telefone sai e o número desce pra
   debaixo do nome. Sem isso a tabela ficava mais larga que a tela e o botão de
   editar caía fora do card — dá pra rolar de lado, mas ninguém descobre. */
.ag-fone-mobile{display:none}
@media (max-width: 768px){
  .ag-fone-mobile{display:block;font-size:.7rem;color:var(--text3);font-family:var(--mono);font-weight:500;margin-top:.1rem}
}

.m-card{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:1.1rem}
.m-label{font-family:var(--font);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);margin-bottom:.4rem}
.m-value{font-family:var(--font);font-size:1.5rem;font-weight:800;letter-spacing:-.01em;line-height:1}
.m-change{font-size:.7rem;margin-top:.35rem;font-weight:500}
.m-change.up{color:var(--green)}
.m-change.neutral{color:var(--text3)}
.dash-grid{display:grid;grid-template-columns:1fr 300px;gap:1.25rem}
.d-card{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.25rem}
.d-card:last-child{margin-bottom:0}
/* Pilha de cartões que vêm de COMPONENTES IRMÃOS.
   🪤 `.d-card:last-child{margin-bottom:0}` mira o cartão que FECHA um
   container. Quando cada componente traz o próprio wrapper, todo cartão vira
   last-child do dele — e a margem some ENTRE os cartões, não só no fim. Foi
   assim que "Suas chaves" encostou em "Mensagens transacionais" (0px, medido).
   O gap do flex não depende de margem, então vale nos dois casos. */
.pilha,.pilha>.page-anim{display:flex;flex-direction:column;gap:1.25rem}
.pilha .d-card{margin-bottom:0}
/* Estado vazio que não reserva espaço: o cartão encolhe enquanto não há nada e
   cresce quando houver. `.empty` sozinho reservava 1,5rem em cima e embaixo. */
.empty.compacto{padding:.15rem 0 .6rem;text-align:left}
/* `flex-wrap` porque o cabeçalho tem título À ESQUERDA e pílula/botão à
   direita: sem ele, num 375px a pílula "fechado · abre amanhã às 08:00" (232px)
   empurrava o cabeçalho 32px pra fora do cartão. Wrap deixa ela DESCER, que é o
   que se espera — e em tela larga nada muda, porque cabe na mesma linha. */
.d-card-header{display:flex;justify-content:space-between;align-items:center;gap:.7rem;margin-bottom:1rem;flex-wrap:wrap}
.d-card-header h3{font-family:var(--font);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text2)}
.d-card-header span{font-size:.72rem;color:var(--text3)}

/* CONVERSATIONS */
.conv-item{display:flex;gap:.65rem;padding:.65rem 0;border-bottom:1px solid var(--gray-border);align-items:center;cursor:pointer;border-radius:6px;padding-left:.25rem}
.conv-item:hover{background:var(--gray-light)}
.conv-item:last-child{border:none}
.conv-av{width:34px;height:34px;border-radius:9px;background:var(--lia-light);border:1px solid var(--lia-border);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--on-lia-tint);flex-shrink:0}
.conv-name{font-size:.82rem;font-weight:700;margin-bottom:.15rem}
.conv-prev{font-size:.73rem;color:var(--text2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.conv-time{font-family:var(--font);font-size:.66rem;color:var(--text3);margin-left:auto;flex-shrink:0;font-weight:500}
.ch-pill{display:inline-flex;align-items:center;gap:.2rem;background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);padding:.1rem .45rem;border-radius:100px;font-family:var(--font);font-size:.6rem;font-weight:700}

/* BOT CONFIG */
.bot-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--gray-border);font-size:.8rem}
.bot-row:last-child{border:none}
.bot-row .k{color:var(--text2);font-weight:500}
.bot-row .v{font-weight:600;font-size:.78rem}

/* WhatsApp connection card */
.wa-card{text-align:center;padding:2rem 1.5rem}
.wa-status{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:100px;font-size:.8rem;font-weight:700;margin-bottom:1.25rem}
.wa-status.connected{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.wa-status.disconnected{background:var(--panel-2);color:var(--text3);border:1px solid var(--gray-border)}
.wa-status.waiting{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.wa-status .pulse{width:8px;height:8px;border-radius:100px;background:currentColor;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* 🔒 #fff literal de propósito: o leitor de QR depende do contraste do
   próprio código. Não trocar por --panel. */
.wa-qr-box{display:inline-block;padding:1rem;background:#fff;border:2px solid var(--gray-border);border-radius:12px;margin:.5rem 0 1rem}
.wa-qr-box img{display:block;width:280px;height:280px}
.wa-steps{text-align:left;max-width:380px;margin:1rem auto;font-size:.82rem;color:var(--text2);line-height:1.7}
.wa-steps ol{margin:0;padding-left:1.3rem}
.wa-steps li{margin:.2rem 0}
.wa-steps strong{color:var(--text)}
.wa-profile{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--green-bg);border:1px solid var(--green-border);border-radius:10px;margin:1rem 0;text-align:left}
.wa-profile-pic{width:52px;height:52px;border-radius:50%;background:var(--panel-2);border:2px solid var(--green-border);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;overflow:hidden}
.wa-profile-pic img{width:100%;height:100%;object-fit:cover}
.wa-profile-info{flex:1}
.wa-profile-name{font-weight:700;font-size:.95rem;color:var(--text)}
.wa-profile-number{font-size:.78rem;color:var(--text2);font-family:var(--mono);margin-top:.15rem}
.wa-loading{display:inline-flex;align-items:center;gap:.5rem;color:var(--text2);font-size:.9rem}
.wa-spinner{width:18px;height:18px;border:2px solid var(--gray-border);border-top-color:var(--lia);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tog{width:36px;height:20px;background:var(--gray-border);border-radius:100px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.tog.on{background:var(--lia)}
.tog::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tog.on::after{left:19px}

/* ACTIVITY */
.act-item{display:flex;gap:.65rem;padding:.55rem 0;border-bottom:1px solid var(--gray-border);align-items:flex-start}
.act-item:last-child{border:none}
.act-ic{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0}
.act-ic.msg{background:var(--lia-light);color:var(--on-lia-tint)}
.act-ic.ok{background:var(--green-bg);color:var(--green)}
.act-body p{font-size:.78rem;font-weight:600;margin-bottom:.1rem}
.act-body span{font-size:.68rem;color:var(--text3)}

/* CHART */
.mini-chart{display:flex;align-items:flex-end;gap:4px;height:48px;margin-top:.75rem}
.bar{background:var(--lia-light);border-radius:3px 3px 0 0;flex:1;transition:background .15s;cursor:pointer}
.bar:hover{background:var(--lia)}
.bar.today{background:var(--lia)}

/* AGENT CONFIG */
.config-page{max-width:780px}
.config-section{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.25rem}
.config-section-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--gray-border)}
.config-section-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
/* O emoji trazia a própria cor; o SVG herda do container — então cada variante
   precisa dizer a sua, senão o ícone sai na cor do texto do corpo. */
.config-section-icon.blue{background:var(--lia-light);color:var(--on-lia-tint)}
.config-section-icon.green{background:var(--surface-ok);color:var(--on-ok)}
.config-section-icon.amber{background:var(--surface-warn);color:var(--on-warn)}
.config-section-icon.red{background:var(--surface-danger);color:var(--on-danger)}
.config-section-title{font-size:.9rem;font-weight:700;margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.04em}
.config-section-sub{font-size:.75rem;color:var(--text2)}
.tom-options{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:.5rem}
.tom-option{border:1.5px solid var(--gray-border);border-radius:10px;padding:.75rem;cursor:pointer;transition:all .15s;text-align:center}
.tom-option:hover{border-color:var(--on-lia-tint);background:var(--lia-light)}
.tom-option.selected{border-color:var(--on-lia-tint);background:var(--lia-light)}
/* 🪤 O emoji era TEXTO e o `text-align:center` do cartão o centralizava sozinho.
   O SVG do <Ico> é `display:block`: não obedece text-align e encosta na esquerda.
   Centralizar virou responsabilidade explícita do container. */
.tom-option .icon{display:flex;justify-content:center;margin-bottom:.4rem;color:var(--text3)}
.tom-option:hover .icon{color:var(--muted)}
.tom-option.selected .icon{color:var(--on-lia-tint)}
.tom-option .label{font-size:.75rem;font-weight:600;color:var(--text)}
.tom-option .desc{font-size:.68rem;color:var(--text3);margin-top:.1rem}
.prompt-editor{font-family:var(--mono);font-size:.82rem;min-height:160px;line-height:1.7}
.char-count{font-size:.68rem;color:var(--text3);text-align:right;margin-top:.3rem}
.faq-item{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem;background:var(--gray-light);border:1px solid var(--gray-border);border-radius:9px;margin-bottom:.6rem}
.faq-item:last-child{margin-bottom:0}
.faq-content{flex:1;min-width:0}
.faq-q{font-size:.8rem;font-weight:700;margin-bottom:.2rem}
.faq-a{font-size:.75rem;color:var(--text2)}
.faq-add{border:1.5px dashed var(--gray-border);border-radius:9px;padding:.85rem;text-align:center;cursor:pointer;transition:all .15s;font-size:.8rem;color:var(--text3)}
.faq-add:hover{border-color:var(--on-lia-tint);color:var(--on-lia-tint);background:var(--lia-light)}
.horario-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.dias-row{display:flex;gap:.4rem;margin-top:.5rem;flex-wrap:wrap}
.dia-btn{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;cursor:pointer;border:1.5px solid var(--gray-border);background:var(--white);transition:all .15s;font-family:var(--font)}
.dia-btn:hover{border-color:var(--lia);color:var(--lia)}
.dia-btn.on{background:var(--lia);color:#fff;border-color:var(--lia)}
.palavra-tag{display:inline-flex;align-items:center;gap:.4rem;background:var(--lia-light);border:1px solid var(--lia-border);color:var(--on-lia-tint);padding:.25rem .65rem;border-radius:100px;font-size:.75rem;font-weight:600;margin:.2rem}
/* 🪤 O × usava `--lia` (cor de PREENCHIMENTO) sobre `--lia-light`: 2,95:1 no
   claro da marca G|A — reprova, e é justamente o botão de remover, onde errar
   custa caro. O texto da própria pílula já usa a variante certa; o × só tinha
   ficado pra trás. Medido em 24/08/2026 varrendo as 8 telas. */
.palavra-tag button{background:none;border:none;cursor:pointer;color:var(--on-lia-tint);font-size:.8rem;padding:0;line-height:1;font-family:var(--font)}
.palavra-tag button:hover{color:var(--text)}
.palavras-wrap{display:flex;flex-wrap:wrap;gap:.2rem;margin-bottom:.75rem;min-height:36px;padding:.4rem;background:var(--gray-light);border:1.5px solid var(--gray-border);border-radius:9px}
.add-palavra-row{display:flex;gap:.5rem}
.save-bar{background:var(--white);border-top:1px solid var(--gray-border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;bottom:0}
.save-bar-left{font-size:.8rem;color:var(--text2)}
.save-success{display:inline-flex;align-items:center;gap:.4rem;color:var(--green);font-size:.8rem;font-weight:600}

/* MASTER / COMPANY TABLES */
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-family:var(--font);text-align:left;font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text3);padding:.75rem 1rem;border-bottom:1px solid var(--gray-border);background:var(--gray-light)}
.data-table td{padding:.85rem 1rem;border-bottom:1px solid var(--gray-border);font-size:.85rem;vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover{background:var(--gray-light)}
.badge{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:100px;font-family:var(--font);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.badge-master{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border)}
.badge-client{background:var(--lia-light);color:var(--on-lia-tint);border:1px solid var(--lia-border)}
/* Administrador manda em tudo dentro da empresa — a cor é a da marca, a mesma
   do dono, porque na prática ele é o braço dele. */
.badge-admin{background:var(--lia-light);color:var(--on-lia-tint);border:1px solid var(--lia-border)}
.badge-supervisor{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.badge-agent{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.badge-inactive{background:var(--panel-2);color:var(--text3);border:1px solid var(--gray-border)}
.stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:1.5rem}
@media(max-width:1100px){.stats-row{grid-template-columns:repeat(3,1fr)}}

/* MODAL */
/* `.fx-overlay` compartilha a régua do overlay mas NÃO o nome da classe — ver o
   comentário do EditorPasso: `useEscClose` trata `.modal-overlay` como "tem
   diálogo na frente" e um modal React com essa classe veta o próprio ESC. */
.modal-overlay,.fx-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:500;padding:1rem}
.modal{background:var(--white);border-radius:var(--radius-lg);padding:2rem;width:100%;max-width:480px;box-shadow:var(--shadow-lg)}
.modal h3{font-family:var(--font);font-size:.95rem;font-weight:700;margin-bottom:1.25rem}

/* MISC */
.loading{display:flex;align-items:center;justify-content:center;padding:3rem;color:var(--text3);font-size:.85rem;gap:.5rem}
.empty{padding:1.5rem 0;text-align:center;color:var(--text3);font-size:.82rem}
.page-anim{animation:fadeUp .22s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* PASSWORD STRENGTH */
.pwd-strength{height:4px;background:var(--gray-border);border-radius:2px;margin-top:.5rem;overflow:hidden}
.pwd-strength-bar{height:100%;transition:all .2s;border-radius:2px}
.pwd-hint{font-size:.7rem;margin-top:.3rem}
.pwd-hint.weak{color:var(--red)}
.pwd-hint.medium{color:var(--amber)}
.pwd-hint.strong{color:var(--green)}

/* ═══ Relatórios ═══ */
.rep-filters{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap;align-items:center}
.rep-filter-btn{padding:.4rem .85rem;border:1px solid var(--gray-border);background:var(--white);border-radius:6px;font-size:.78rem;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s}
.rep-filter-btn:hover{border-color:var(--lia);color:var(--lia)}
.rep-filter-btn.active{background:var(--lia);color:#fff;border-color:var(--lia)}

.rep-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-bottom:1.25rem}
.rep-sum-card{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:1rem}
.rep-sum-label{font-family:var(--font);font-size:.66rem;color:var(--text3);text-transform:uppercase;letter-spacing:.03em;font-weight:600;margin-bottom:.35rem}
.rep-sum-value{font-family:var(--font);font-size:1.6rem;font-weight:800;color:var(--text);line-height:1}
.rep-sum-hint{font-size:.72rem;color:var(--text2);margin-top:.35rem}
.rep-sum-value.green{color:var(--green)}
.rep-sum-value.lia{color:var(--lia)}
.rep-sum-value.amber{color:var(--amber)}

.rep-chart-box{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.25rem}
.rep-chart-title{font-family:var(--font);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text2);margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}
.rep-chart-legend{display:flex;gap:1rem;font-size:.72rem;font-weight:500}
.rep-chart-legend span{display:inline-flex;align-items:center;gap:.3rem;color:var(--text2)}
.rep-chart-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

.rep-senders-list{display:flex;flex-direction:column;gap:.55rem}
.rep-sender-row{display:flex;align-items:center;gap:.75rem;font-size:.85rem}
.rep-sender-name{flex:0 0 140px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-sender-bar{flex:1;height:20px;background:var(--gray-bg);border-radius:4px;overflow:hidden;position:relative}
.rep-sender-bar-fill{height:100%;background:var(--lia);border-radius:4px;transition:width .3s}
.rep-sender-pct{flex:0 0 75px;text-align:right;font-size:.78rem;color:var(--text2);font-variant-numeric:tabular-nums}
.rep-sender-pct strong{color:var(--text);font-weight:700}

.rep-empty{text-align:center;padding:3rem 1rem;color:var(--text2)}
.rep-empty .icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.6}
.rep-empty h3{font-weight:700;color:var(--text);margin-bottom:.5rem}
.rep-empty p{font-size:.85rem;max-width:400px;margin:0 auto;line-height:1.5}








/* ═══════════════ RESPONSIVIDADE ═══════════════ */

/* Telas muito grandes: aproveita o espaço mas centralizado.
   ⚠️ O `width:100%` NAO e decorativo: .dash-body e flex-column, e `margin:auto`
   no eixo transversal CANCELA o stretch do flex — sem width, o .dash-content
   encolhe pro tamanho do conteudo (shrink-to-fit) e vira uma coluna estreita
   centralizada. Media 435px na aba Atendimento em 1920 (a thread e `1fr`, entao
   contribui so o min-content). So aparece >=1920px, por isso passou batido. */
@media (min-width: 1920px) {
  .dash-content{max-width:1800px;margin:0 auto;width:100%}
  /* O inbox e a unica view que ganha em usar a tela toda: sem o teto de 1800px
     sobrariam ~540px de margem morta num 2560. Escopado so na view Atendimento. */
  .dash-wrap.atd-mode .dash-content{max-width:none}
}

/* Desktop normal/compacto: 1200-1400px */
@media (max-width: 1400px) {
  .dash-content{padding:1.5rem 1.5rem}
  .metrics-row{gap:.85rem}
}

/* Tela dividida ao meio em monitor grande: ~960-1200px */
@media (max-width: 1200px) {
  .dash-wrap{grid-template-columns:200px 1fr}
  .dash-content{padding:1.25rem}
  .metrics-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem}
  .m-card{padding:.9rem}
  .rep-summary{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .rep-chart-box{padding:1rem}
  /* Cabeçalho de seções com "Novo cliente" — sempre quebra se precisar */
  .d-card-head{flex-wrap:wrap !important;gap:.75rem}
  /* Tabelas não estouram */
  .d-card{overflow-x:auto}
}

/* Tablet / tela bem dividida: 768-1024 */
@media (max-width: 1024px) {
  .dash-wrap{grid-template-columns:180px 1fr}
  .sidebar{font-size:.85rem}
  .dash-content{padding:1rem}
  .metrics-row{grid-template-columns:repeat(2,1fr)}
  .rep-summary{grid-template-columns:repeat(2,1fr)}
  /* Header principal com logo+user aparece empilhado se não couber */
  .dash-header{flex-wrap:wrap;gap:.5rem}
  .dash-header .header-actions{flex-wrap:wrap}
  /* Texto longo em células da tabela — não quebra em 2 linhas */
  .d-card td, .d-card th{white-space:nowrap}
  .d-card{overflow-x:auto}
}

/* Mobile: <768px → sidebar vira drawer (off-canvas), abre via botão ☰ no topbar */
@media (max-width: 768px) {
  /* !important pra vencer .dash-wrap.sidebar-collapsed{68px 1fr} do desktop (mais específico) */
  /* minmax(0,1fr) em vez de 1fr: previne que conteúdo largo (tabelas) estique a coluna */
  .dash-wrap, .dash-wrap.sidebar-collapsed{grid-template-columns:minmax(0,1fr) !important;overflow-x:hidden}
  /* Sidebar escondida por padrão; quando .mobile-open, overlay sobre o conteúdo */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:260px;max-width:80vw;
    z-index:200;
    transform:translateX(-100%);
    transition:transform .22s ease;
    border-right:1px solid var(--gray-border);
    box-shadow:0 0 0 rgba(0,0,0,0);
    background:var(--white)
  }
  .dash-wrap.mobile-sidebar-open .sidebar{
    transform:translateX(0);
    box-shadow:0 12px 40px rgba(0,0,0,.25)
  }
  /* Em mobile, ignora estado collapsed do desktop — drawer mostra sempre o layout completo */
  .dash-wrap.sidebar-collapsed .sidebar{
    /* reseta tudo que o desktop-collapsed faz */
    width:260px
  }
  .dash-wrap.sidebar-collapsed .sidebar-brand-name,
  .dash-wrap.sidebar-collapsed .sidebar-brand-sub,
  .dash-wrap.sidebar-collapsed .client-name,
  .dash-wrap.sidebar-collapsed .client-plan,
  .dash-wrap.sidebar-collapsed .sidebar-section-label,
  .dash-wrap.sidebar-collapsed .sidebar-client > div:not(.client-av){display:block}
  /* 🔴 A busca entra nesta MESMA lista de resets (21/09/2026). A ≤1024px o
     painel liga `sidebar-collapsed` sozinho, e no celular o drawer mostra o
     layout completo — sem esta linha, `.sidebar-collapsed .menu-busca{display:none}`
     escondia a busca em TODO telefone e tablet, sem erro nenhum. Medido a 375px
     pela zc-busca-menu, que reprovava com largura 0. */
  .dash-wrap.sidebar-collapsed .menu-busca{display:block}
  .dash-wrap.sidebar-collapsed .sidebar-nav .s-item{
    justify-content:flex-start !important;
    padding:.6rem .75rem !important;
    font-size:.85rem !important;
    gap:.5rem !important
  }
  .dash-wrap.sidebar-collapsed .sidebar-toggle{display:none}
  /* Scrim só aparece em mobile quando drawer está aberto */
  .dash-wrap.mobile-sidebar-open .mobile-scrim{display:block}
  /* Botão hamburger só aparece em mobile */
  .mobile-menu-btn{
    display:inline-flex !important;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--gray-border);
    width:36px;height:36px;border-radius:8px;
    font-size:1.1rem;cursor:pointer;color:var(--text);
    flex-shrink:0
  }
  .topbar{padding:.7rem .9rem;gap:.6rem;overflow:hidden}
  .topbar-title{min-width:0;flex:1;overflow:hidden}
  .topbar-title h1{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-title p{display:none}
  .topbar-actions{flex-shrink:0}
  .topbar-actions .btn-sm{font-size:.7rem;padding:.3rem .55rem}
  /* Em mobile, só o último item do topbar (link Site) aparece — libera espaço pro título */
  .topbar-actions > *:not(:last-child){display:none !important}
  /* Subtítulos / textos secundários dentro de cards podem quebrar normalmente */
  .d-card .page-subtitle, .d-card p{white-space:normal !important}
  /* Containment global mobile: nada estoura o viewport */
  .dash-body, .dash-content, .d-card, .m-card{min-width:0;max-width:100%}
  .dash-content{padding:.75rem;overflow-x:hidden}
  /* Grids compactos em 2 colunas (ou 1 quando muito apertado) */
  .metrics-row{grid-template-columns:repeat(2,1fr) !important;gap:.6rem}
  .stats-row{grid-template-columns:repeat(2,1fr) !important;gap:.6rem}
  .rep-summary{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr !important}
  .tom-options{grid-template-columns:repeat(2,1fr) !important}
  .config-page{max-width:100%}
  .d-card{padding:1rem}
  /* Tabelas: scroll horizontal interno (já wrappadas em .table-wrap) */
  .d-card table{min-width:520px}
  .d-card td button{white-space:nowrap}
  /* Exceção: a agenda esconde tudo menos Nome+Ações no mobile, então os 520px
     só criavam rolagem lateral e jogavam o botão de editar pra fora do card.
     Precisa vir DEPOIS da regra genérica — mesma especificidade perde por
     cascata, e a genérica mora aqui em cima. */
  .d-card table.ag-tabela{min-width:0}
  /* Sobravam 9px de rolagem interna: o padding de 1rem por lado das células não
     cabe em 317px úteis. */
  .ag-tabela th,.ag-tabela td{padding-left:.6rem;padding-right:.6rem}
}
/* Em desktop, hamburger e scrim sempre escondidos */
.mobile-menu-btn{display:none}
.mobile-scrim{display:none;position:fixed;inset:0;background:var(--overlay);z-index:150;animation:fadeIn .15s}

/* Login responsivo */
@media (max-width: 900px) {
  .login-wrap{grid-template-columns:1fr}
  .login-left{display:none}
}


/* ═══════ WIZARD MODAL ═══════ */
.wiz-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s}
.wiz-modal{background:var(--white);border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.3);max-width:560px;width:100%;max-height:90vh;overflow-y:auto;padding:2rem;animation:slideUp .25s}
.wiz-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.wiz-head-icon{font-size:1.75rem}
.wiz-head h3{font-size:1.15rem;font-weight:700;color:var(--text);margin:0}
.wiz-head p{font-size:.85rem;color:var(--text2);margin:.2rem 0 0}
.wiz-close{margin-left:auto;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text3);padding:.25rem .5rem;border-radius:6px}
.wiz-close:hover{background:var(--gray-bg);color:var(--text)}
.wiz-progress{height:6px;background:var(--gray-border);border-radius:3px;margin:1rem 0 1.5rem;overflow:hidden}
.wiz-progress-bar{height:100%;background:var(--lia);border-radius:3px;transition:width .3s}
.wiz-step{min-height:200px}
.wiz-step h4{font-size:1rem;font-weight:700;color:var(--text);margin:0 0 .5rem}
.wiz-step .hint{font-size:.8rem;color:var(--text2);margin-bottom:1rem}
.wiz-options{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.wiz-option{padding:.85rem 1rem;border:1.5px solid var(--gray-border);border-radius:10px;background:var(--white);cursor:pointer;text-align:left;font-size:.9rem;color:var(--text);transition:all .15s}
.wiz-option:hover{border-color:var(--on-lia-tint);background:var(--lia-light)}
.wiz-option.selected{border-color:var(--on-lia-tint);background:var(--lia-light);font-weight:600}
.wiz-option-title{font-weight:600;margin-bottom:.15rem}
.wiz-option-desc{font-size:.75rem;color:var(--text2);font-weight:400}
.wiz-input{width:100%;padding:.75rem 1rem;border:1.5px solid var(--gray-border);border-radius:10px;font-size:.9rem;font-family:inherit;transition:border .15s}
.wiz-input:focus{outline:none;border-color:var(--lia)}
.wiz-textarea{min-height:90px;resize:vertical}
.wiz-nav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.5rem}
.wiz-nav .btn{min-width:100px}
.wiz-back{background:transparent;border:1px solid var(--gray-border);color:var(--text2)}
.wiz-generating{text-align:center;padding:2rem 1rem}
.wiz-generating .spinner{width:48px;height:48px;border:4px solid var(--gray-border);border-top-color:var(--lia);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}
.wiz-preview{background:var(--lia-light);border:1px solid var(--lia-border);border-radius:10px;padding:1rem;margin:1rem 0}
.wiz-preview-label{font-size:.7rem;font-weight:700;color:var(--lia);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem}
.wiz-preview-content{font-size:.85rem;color:var(--text);white-space:pre-wrap;line-height:1.55}
.wiz-mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
.wiz-mode-card{border:1.5px solid var(--gray-border);border-radius:12px;padding:1.25rem;cursor:pointer;transition:all .15s;text-align:center}
.wiz-mode-card:hover{border-color:var(--on-lia-tint);background:var(--lia-light)}
.wiz-mode-card .emoji{font-size:2rem;margin-bottom:.5rem}
.wiz-mode-card .title{font-size:.95rem;font-weight:700;margin-bottom:.2rem}
.wiz-mode-card .desc{font-size:.75rem;color:var(--text2);line-height:1.4}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width: 600px) {
  .wiz-mode-picker{grid-template-columns:1fr}
  .wiz-modal{padding:1.5rem}
}


/* Fontes de referência (aba Anexos) */
.refs-add{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.refs-in-label{flex:1 1 210px;min-width:0}
.refs-in-url{flex:2 1 300px;min-width:0}
.refs-add input{padding:.55rem .7rem;border:1px solid var(--gray-border);border-radius:8px;background:var(--white);color:var(--text);font-size:.85rem}
.refs-list{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.refs-item{border:1px solid var(--gray-border);border-radius:10px;padding:.75rem .9rem;background:var(--white)}
.refs-item-head{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.25rem}
.refs-badge{font-size:.7rem;color:var(--text3);background:var(--gray-light);padding:.15rem .5rem;border-radius:999px}
.refs-badge-err{color:var(--on-danger);background:var(--surface-danger)}
.refs-url{font-size:.75rem;color:var(--lia);word-break:break-all;text-decoration:none}
.refs-preview{font-size:.75rem;color:var(--text3);margin-top:.4rem;line-height:1.4;max-height:3.2em;overflow:hidden}
.refs-actions{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap}
@media(max-width:640px){
  .refs-add{flex-direction:column;align-items:stretch}
  .refs-in-label,.refs-in-url{flex:1 1 auto;width:100%}
  .refs-actions .btn{flex:1 1 auto}
}

/* ── Toast ──────────────────────────────────────────────────────────────────
   Substitui o `alert()` nativo, que bloqueia a aba inteira. Ancorado no canto
   superior direito e NÃO sobre a última linha da tabela — a régua avisa que
   toast em cima de conteúdo é o erro clássico deste componente. */
#toast-root{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;
  gap:8px;max-width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;background:var(--white);color:var(--text);border:1px solid var(--gray-border);
  border-left:4px solid var(--gray);border-radius:10px;padding:12px 14px;font-size:.82rem;line-height:1.45;
  box-shadow:var(--shadow-lg);opacity:0;transform:translateX(12px);transition:opacity .2s,transform .2s;
  white-space:pre-wrap;word-break:break-word;cursor:pointer}
.toast.show{opacity:1;transform:none}
.toast.info{border-left-color:var(--lia)}
.toast.success{border-left-color:var(--green-fill)}
.toast.error{border-left-color:var(--red)}
/* `warn` (07/09/2026): o modelo de fluxo aplicado avisa quais opções NÃO foram
   pra fila por o tenant ainda não ter aquela fila. Não é erro — é algo que a
   pessoa precisa ler. Sem esta linha o tipo caía sem cor nenhuma e o aviso
   virava um toast igual aos outros, que é o mesmo que não avisar.
   O --amber é o token de aviso da casa, medido contra o fundo do toast. */
.toast.warn{border-left-color:var(--amber)}
@media (max-width:520px){
  /* No celular a coluna estreita faz o toast tapar o cabeçalho: encosta embaixo. */
  #toast-root{top:auto;bottom:16px;left:16px;right:16px;max-width:none}
  .toast{transform:translateY(12px)}
}

/* Quando a sidebar é escura (dark E misto), o que mora DENTRO dela com cor clara
   cravada tem que virar junto. No MISTO isso não é detalhe: o resto da página
   segue no :root claro, então --purple continua sendo o tom de texto-sobre-branco
   (#7C3AED) e o bloco pastel do master continua sendo #F5F3FF — um retângulo
   quase branco colado na sidebar navy, com rótulo roxo escuro em cima. */
:root[data-theme="dark"] .sidebar-client.master,
:root[data-theme="misto"] .sidebar-client.master{
  background:color-mix(in srgb, var(--purple-fill) 24%, transparent);
  border-color:color-mix(in srgb, var(--purple-fill) 42%, transparent);
}
:root[data-theme="dark"] .sidebar-client.master .client-plan,
:root[data-theme="misto"] .sidebar-client.master .client-plan{color:#d8b4fe}

/* O MESMO problema no cliente comum, e que passou porque o master foi corrigido
   sozinho. No misto a sidebar é escura mas o `:root` segue claro, então
   `--on-lia-tint` continua sendo o verde ESCURO de texto-sobre-branco
   (`color-mix(#0F9B68 80%, black)`) — e ele vai parar em cima da navy.
   Medido em 01/09/2026: 3,6:1 num rótulo de 10px em maiúscula, que a régua da
   casa já trata como apertado abaixo de 12px. Aqui o token vira o tom CLARO,
   escopado à sidebar pra não mexer no conteúdo, que no misto continua claro. */
:root[data-theme="misto"] .sidebar-client .client-plan{
  color:color-mix(in srgb, var(--lia) 55%, white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARCA G|A — o segundo eixo, independente do tema.

   Isto vinha de um <style> montado no <head> com 31 `!important` por cima dos
   tokens. Como bloco de token com seletor mais específico, não precisa de
   nenhum: `[data-brand]` + `[data-theme]` já ganha de `:root`.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-brand="ga"]{
  --lia:var(--ga-accent,#0F9B68);
  --on-lia:var(--ga-accent-text,#fff);
  --spark:#36F1A6;
  /* O master do G|A usa o acento no lugar do roxo — e quem manda no par
     superfície+texto é a família OK (verde), não a accent (roxa). */
  --purple:var(--lia); --purple-fill:var(--lia);
  --surface-accent:var(--surface-ok); --on-accent:var(--on-ok); --border-accent:var(--border-ok);

  /* A marca `>|` — o chevron do pipe de shell mais a barra do Grep|IA. Mora em
     token, e não dentro do SVG, porque o tema troca AO VIVO (o toggle só mexe no
     `data-theme` do <html>): cor chumbada no componente exigiria re-render.
     Sobre painel a peça carrega o PRÓPRIO chão escuro — por isso é a mesma nos
     3 temas, e é isso que faz o `>|` continuar legível no claro. */
  --marca-fundo:#11161C;
  --marca-traco:#EAF1F4;
  --marca-barra:#36F1A6;
  /* Na capa do login o chão é da capa, não da peça. */
  --marca-capa-fundo:#11161C;
  --marca-capa-borda:transparent;
}
/* Capa escura do G|A é #0A0E12 — um losango #11161C em cima dela vira mancha.
   Ali a peça dispensa o chão e fica igualzinha ao ícone do site. */
:root[data-brand="ga"][data-theme="dark"] .login-left{
  --marca-capa-fundo:transparent;
}
/* Escuro do G|A é PRETO, não o navy dos outros apps — é a cor do site grepia, e
   é decisão de marca, não esquecimento. Por isso mora no bloco da marca: o navy
   segue sendo o escuro padrão do painel, espelhando Tarefas e MeuERP. */
:root[data-brand="ga"][data-theme="dark"]{
  --bg:#0A0E12; --panel:#11161C; --panel-2:#161C24;
  --border:#1E2730; --border-strong:#2A3542;
  --input-bg:#161C24; --row-hover:#161C24;
  --text:#EAF1F4; --muted:#B6C2CC; --text3:#8A97A3;
  --gray:#8A97A3; --label-text:#B6C2CC;
  --shadow:0 2px 12px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.3);
  --shadow-lg:0 10px 44px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
}
:root[data-brand="ga"][data-theme="dark"],
:root[data-brand="ga"][data-theme="misto"]{
  --sidebar-bg:#0d1218; --sidebar-line:#1E2730;
  --sidebar-text:#B6C2CC; --sidebar-hover:#161C24;
  --sidebar-text-forte:#EAF1F4; --sidebar-label:#8A97A3;
}
/* Capa do login: preta no escuro (igual ao site), gradiente verde no claro —
   chapado ficava sem profundidade. */
:root[data-brand="ga"][data-theme="dark"] .login-left{background:#0A0E12}
:root[data-brand="ga"]:not([data-theme="dark"]) .login-left{
  background:linear-gradient(150deg,#15b884 0%,#0F9B68 48%,#0a6c4a 100%);
}
:root[data-brand="ga"]:not([data-theme="dark"]) .login-card{
  border:none; border-radius:22px; padding:2.85rem;
  box-shadow:0 14px 48px rgba(15,155,104,.10),0 3px 10px rgba(16,24,40,.05);
}
:root[data-brand="ga"][data-theme="dark"] .form-group input:focus,
:root[data-brand="ga"][data-theme="dark"] .form-group select:focus,
:root[data-brand="ga"][data-theme="dark"] .form-group textarea:focus{background:var(--input-bg)}

/* Seletor de tema flutuante das telas de login (que não têm sidebar). */
.tema-flutuante{
  position:fixed;top:1rem;right:1rem;z-index:50;
  display:flex;align-items:center;gap:.45rem;
  padding:.4rem .7rem;border-radius:8px;cursor:pointer;
  background:var(--panel);border:1px solid var(--border);color:var(--muted);
  font-family:var(--font);font-size:.72rem;font-weight:600;
  transition:border-color .15s,color .15s;
}
.tema-flutuante:hover{border-color:var(--lia);color:var(--lia)}

/* Campo de busca com ícone: `placeholder` só aceita texto, então a lupa não pode
   morar dentro dele. Ícone posicionado + recuo à esquerda no campo. */
.busca-wrap{position:relative;display:block;width:100%}
.busca-wrap > svg{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
.busca-wrap > input{width:100%;padding:.45rem .7rem .45rem 2rem;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);font-family:inherit}

/* Spinner do estado "carregando". Substitui o ⏳, que além de ser emoji em slot
   de ícone era ESTÁTICO — não comunicava que algo está acontecendo. */
.spinner{width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid var(--border-strong);border-top-color:var(--lia);
  animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}

/* Picker — campo de seleção com a lista em HTML. Padrão canônico do LIA.
   "NUNCA USAR menu feio" — Dirceu, 22/08/2026: appearance:none conserta a CAIXA,
   mas a lista que o <select> abre é desenhada pelo sistema operacional e nenhum
   CSS alcança. Aqui a lista é HTML e segue o tema do app.

   Os tokens têm fallback de propósito: cada app do LIA nomeia os seus de um jeito
   (--border/--border-strong, --card/--panel/--surface). Assim este arquivo entra
   em qualquer um sem edição; onde o token existe, ele manda. */
.picker { position: relative; width: 100%; }
.picker select {
  position: absolute; left: 0; top: 0; width: 1px !important; height: 1px;
  opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0; min-width: 0 !important;
}
.picker-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: inherit; font-size: 14px; padding: 9px 11px; text-align: left; cursor: pointer;
  border: 1px solid var(--border-strong, var(--border, #cbd5e1));
  border-radius: var(--radius-sm, 8px);
  background: var(--input-bg, var(--surface, var(--card, #fff)));
  color: var(--text, #0f172a);
}
.picker-btn:hover:not(:disabled) { border-color: var(--primary, var(--blue, #2563eb)); }
.picker-btn:focus-visible, .picker.open .picker-btn {
  outline: none; border-color: var(--primary, var(--blue, #2563eb));
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.picker-btn:disabled { opacity: .6; cursor: not-allowed; }
.picker-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-val.vazio { color: var(--muted, var(--text-soft, #64748b)); }
.picker-btn svg { flex-shrink: 0; transition: transform .15s; }
.picker.open .picker-btn svg { transform: rotate(180deg); }
.picker-menu {
  position: fixed; z-index: 12000; display: none; overflow-y: auto; padding: 5px; min-width: 180px;
  background: var(--card, var(--surface, var(--panel, #fff)));
  border: 1px solid var(--border-strong, var(--border, #cbd5e1));
  border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
}
.picker.open .picker-menu { display: block; }
.picker-opt {
  padding: 8px 10px; border-radius: 7px; font-size: 13.5px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; color: var(--text, #0f172a);
}
.picker-opt:hover, .picker-opt.marcado { background: var(--row-hover, var(--hover-soft, #f1f5f9)); }
.picker-opt[aria-selected="true"] { color: var(--primary, var(--blue, #2563eb)); font-weight: 600; }
/* 🔴 A classe que o componente emite é `off` — `desabilitada` nunca casou com
   nada. Efeito: em TODO seletor do painel a opção desabilitada tinha cara de
   clicável, e clicar nela não fazia nada, calado. As duas ficam aqui porque
   `desabilitada` pode estar em uso em algum lugar; a que trabalha é `off`. */
.picker-opt.off, .picker-opt.desabilitada { opacity: .45; cursor: not-allowed; }
/* Sem isto o realce de teclado/mouse ainda pinta a linha desabilitada, e ela
   volta a parecer selecionável no exato momento em que o ponteiro chega. */
.picker-opt.off:hover, .picker-opt.off.marcado { background: transparent; }
.picker-opt-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-grupo {
  padding: 7px 9px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--label-text, var(--muted, #64748b));
}

/* ══════════════════════════════════════════════════════════════════════════
   COMECE AQUI + SUB-ABAS (24/08/2026)

   Tudo em token: `--panel`, `--border`, os pares `--surface-X`/`--on-X`. Não há
   um único bloco `[data-theme]` aqui de propósito — cor crua exigiria um
   segundo bloco pro escuro, que é onde a repintura sempre esquece um e o texto
   some sem erro nenhum.
   ══════════════════════════════════════════════════════════════════════════ */

/* Cabeçalho de tela: título + subtítulo à esquerda, AÇÃO à direita. */
.sechead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.sechead h1{margin:0;font-size:1.3rem;font-weight:700;color:var(--text)}
.sechead p{margin:.25rem 0 0;font-size:.85rem;color:var(--text3);max-width:62ch}

/* ── Sub-abas ───────────────────────────────────────────────────────────── */
/* Rola na horizontal em vez de estourar a página: no 375 são 5 seções e elas
   NÃO cabem. Quebrar em duas linhas empurra o conteúdo pra baixo da dobra. */
.subabas{display:flex;gap:.25rem;margin:0 0 1.1rem;padding:.25rem;background:var(--panel-2);
  border:1px solid var(--border);border-radius:11px;overflow-x:auto;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch}
.subaba{flex:0 0 auto;border:0;background:transparent;color:var(--label-text);cursor:pointer;
  font-family:inherit;font-size:.82rem;font-weight:600;padding:.5rem .85rem;border-radius:8px;
  white-space:nowrap;transition:background .15s,color .15s}
.subaba:hover{background:var(--row-hover);color:var(--text)}
.subaba.ativa{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(15,22,36,.08)}
.subaba:focus-visible{outline:2px solid var(--lia);outline-offset:-2px}
/* A AÇÃO de criar área, no fim das sub-abas de "Meu bot". Separada por uma
   borda e em cor de marca porque não é uma seção a mais: ela LEVA pra outra
   tela, e ler igual às irmãs faria esperar conteúdo aqui. Nunca fica `.ativa`. */
.subaba-acao{margin-left:auto;color:var(--lia);border-left:1px solid var(--border);
  border-radius:0 8px 8px 0;padding-left:.9rem}
.subaba-acao:hover{background:var(--lia-light);color:var(--lia)}

/* ── Comece aqui ────────────────────────────────────────────────────────── */
.ca-progresso{max-width:820px;margin-bottom:1.1rem}
.ca-prog-topo{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.92rem;color:var(--text)}
.ca-prog-topo span{font-size:.8rem;color:var(--text3);font-variant-numeric:tabular-nums}
.ca-barra{height:8px;border-radius:99px;background:var(--panel-2);border:1px solid var(--border);
  margin:.6rem 0 .55rem;overflow:hidden}
.ca-barra-fill{height:100%;background:var(--lia);border-radius:99px;transition:width .35s ease}
.ca-prog-msg{margin:0;font-size:.82rem;color:var(--text3);line-height:1.5}

.ca-divisor{display:flex;align-items:center;gap:.7rem;margin:1.4rem 0 .9rem;max-width:820px}
.ca-divisor::after{content:"";flex:1;height:1px;background:var(--border)}
.ca-divisor span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--label-text)}

.ca-lista{display:flex;flex-direction:column;gap:.6rem;max-width:820px}
.ca-passo{display:flex;gap:.8rem;padding:.9rem 1rem;background:var(--panel);
  border:1px solid var(--border);border-radius:11px}
.ca-passo.ok{background:var(--panel-2)}
/* min-width:0 no filho flex: sem isso o texto longo do "porque" empurra o
   cartão pra fora da tela no 375 em vez de quebrar linha. */
.ca-corpo{flex:1 1 auto;min-width:0}
.ca-selo{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin-top:.1rem}
.ca-selo.ok{background:var(--surface-ok);color:var(--on-ok);border:1px solid var(--border-ok)}
.ca-selo.falta{background:var(--surface-warn);color:var(--on-warn);border:1px solid var(--border-warn)}
.ca-selo.aviso{background:var(--surface-info);color:var(--on-info);border:1px solid var(--border-info)}

.ca-linha1{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ca-linha1 h3{margin:0;font-size:.95rem;font-weight:700;color:var(--text)}
.ca-tag{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.16rem .42rem;border-radius:5px}
.ca-tag.essencial{background:var(--surface-warn);color:var(--on-warn);border:1px solid var(--border-warn)}
.ca-tag.reco{background:var(--surface-info);color:var(--on-info);border:1px solid var(--border-info)}
.ca-tag.custa{background:var(--surface-accent);color:var(--on-accent);border:1px solid var(--border-accent)}
.ca-porque{margin:.3rem 0 0;font-size:.82rem;color:var(--text2);line-height:1.5}
/* --label-text, NÃO --text3: 12px em mono com --text3 dá 4,47 sobre --panel no
   claro — passa raspando e reprova assim que o fundo mudar de tom. */
.ca-estado{margin-top:.35rem;font-size:.75rem;color:var(--label-text);font-family:var(--font)}
.ca-acoes{display:flex;align-items:center;gap:.7rem;margin-top:.65rem;flex-wrap:wrap}
/* 🪤 Nem `--lia` nem `--on-lia-tint` servem de cor de TEXTO sobre --panel: na
   marca G|A o acento é verde-menta (#36F1A6) e dá 1,39:1 no claro; a variante
   "tint" (80% acento + preto) melhora só pra 2,20 — ela é feita pra ficar em
   cima de --lia-light, não do painel. Medido nos 3 modos: --label-text dá 7,18
   no claro e 10,68 no escuro. Link discreto legível vence link colorido que
   some. */
.ca-como{border:0;background:transparent;padding:0;cursor:pointer;font-family:inherit;
  font-size:.78rem;font-weight:600;color:var(--label-text);text-decoration:underline;
  text-underline-offset:3px}
.ca-como:hover{color:var(--text)}
.ca-ajuda{margin:.7rem 0 0;padding-left:1.15rem;font-size:.8rem;color:var(--text2);line-height:1.65}
.ca-ajuda li{margin-bottom:.2rem}

@media (max-width:520px){
  .ca-passo{padding:.8rem .85rem}
  .ca-acoes .btn{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   TESTAR ATENDIMENTO — o diagnóstico que o cliente lê sozinho (12/09/2026)

   Prefixo `ta-` por tela: as peças são primas das do "Comece aqui" (`ca-`), mas
   o eixo é OUTRO — lá é pronto/falta, aqui é ok/aviso/falha, e uma falha é
   vermelha porque impede o atendimento, não porque é urgente configurar.
   Herdar as classes de lá amarraria as duas telas pela pele e a primeira
   mudança em uma estragaria a outra.

   Só token: o escuro sai de graça, e os pares --surface-X/--on-X garantem que
   nenhum fundo fique com texto da cor errada num dos 3 modos.
   ══════════════════════════════════════════════════════════════════════════ */
.ta-veredito{display:flex;gap:.9rem;align-items:flex-start;max-width:820px;margin-bottom:1rem}
.ta-veredito.ok{background:var(--surface-ok);border-color:var(--border-ok)}
.ta-veredito.falha{background:var(--surface-danger);border-color:var(--border-danger)}
.ta-ver-selo{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--panel)}
.ta-veredito.ok .ta-ver-selo{color:var(--on-ok)}
.ta-veredito.falha .ta-ver-selo{color:var(--on-danger)}
.ta-ver-corpo{flex:1 1 auto;min-width:0}
.ta-ver-corpo strong{display:block;font-size:.95rem;line-height:1.4}
.ta-veredito.ok .ta-ver-corpo strong{color:var(--on-ok)}
.ta-veredito.falha .ta-ver-corpo strong{color:var(--on-danger)}
.ta-ver-corpo p{margin:.3rem 0 0;font-size:.82rem;color:var(--text2);line-height:1.5}

.ta-prova{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;max-width:820px;margin-bottom:1.1rem}
.ta-prova-txt{flex:1 1 320px;min-width:0}
.ta-prova-txt strong{font-size:.9rem}
.ta-prova-txt p{margin:.3rem 0 0;font-size:.82rem;color:var(--text2);line-height:1.55}
/* O número é DADO: mono, e sem quebrar no meio (regra da casa pra telefone). */
.ta-numero{font-family:var(--mono);white-space:nowrap;font-weight:600;color:var(--text)}
.ta-ultima{margin-top:.5rem;font-size:.76rem;color:var(--label-text);line-height:1.5}
.ta-ultima .ok{color:var(--on-ok);font-weight:600}
.ta-ultima .pend{color:var(--on-danger);font-weight:600}

.ta-divisor{display:flex;align-items:center;gap:.7rem;margin:1.4rem 0 .9rem;max-width:820px}
.ta-divisor::after{content:"";flex:1;height:1px;background:var(--border)}
.ta-divisor span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--label-text)}

.ta-lista{display:flex;flex-direction:column;gap:.6rem;max-width:820px}
.ta-item{display:flex;gap:.8rem;padding:.9rem 1rem;background:var(--panel);
  border:1px solid var(--border);border-radius:12px}
.ta-item.ok{background:var(--panel-2)}
.ta-item.falha{border-color:var(--border-danger)}
.ta-corpo{flex:1 1 auto;min-width:0}
.ta-selo{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin-top:.1rem}
.ta-selo.ok{background:var(--surface-ok);color:var(--on-ok);border:1px solid var(--border-ok)}
.ta-selo.aviso{background:var(--surface-warn);color:var(--on-warn);border:1px solid var(--border-warn)}
.ta-selo.falha{background:var(--surface-danger);color:var(--on-danger);border:1px solid var(--border-danger)}
.ta-linha1{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ta-linha1 h3{margin:0;font-size:.95rem;font-weight:700;color:var(--text)}
.ta-tag{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.15rem .45rem;border-radius:999px;flex:0 0 auto}
.ta-tag.aviso{background:var(--surface-warn);color:var(--on-warn);border:1px solid var(--border-warn)}
.ta-tag.falha{background:var(--surface-danger);color:var(--on-danger);border:1px solid var(--border-danger)}
.ta-detalhe{margin-top:.3rem;font-size:.78rem;color:var(--label-text);line-height:1.5}
.ta-porque{margin:.35rem 0 0;font-size:.82rem;color:var(--text2);line-height:1.55}
.ta-acoes{display:flex;align-items:center;gap:.7rem;margin-top:.65rem;flex-wrap:wrap}
/* Mesma escolha do `.ca-como`: link discreto legível vence link colorido que
   some — `--lia` sobre `--panel` dá 1,39:1 na marca G|A. */
.ta-como{border:0;background:transparent;padding:0;cursor:pointer;font-family:inherit;
  font-size:.78rem;font-weight:600;color:var(--label-text);text-decoration:underline;
  text-underline-offset:3px}
.ta-como:hover{color:var(--text)}
.ta-ajuda{margin:.7rem 0 0;padding-left:1.15rem;font-size:.8rem;color:var(--text2);line-height:1.65}
.ta-ajuda li{margin-bottom:.25rem}

@media (max-width:520px){
  .ta-item{padding:.8rem .85rem}
  .ta-acoes .btn{width:100%;justify-content:center}
  .ta-prova .btn{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   CONSTRUTOR DE FLUXO — mapa, editor e simulador (24/08/2026)
   Só token: o escuro sai de graça e não há um segundo bloco pra esquecer.
   ══════════════════════════════════════════════════════════════════════════ */

.fx-colunas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:1.1rem;align-items:start}
/* 🔴 1500, não 1100 (07/09/2026). Dirceu: "achei a tela do fluxograma muito
   pequeno". Medido: o simulador leva 380px FIXOS, e num 1280 sobravam 614 pro
   mapa — menos da metade da tela pro desenho, que é a coisa principal da
   página. Abaixo de 1500 ele desce pra baixo do mapa e devolve a largura
   inteira. O simulador não perde nada com isso: ele é um chat, cresce bem em
   linha cheia. */
@media (max-width:1500px){ .fx-colunas{grid-template-columns:minmax(0,1fr)} }

/* ── Mapa ───────────────────────────────────────────────────────────────── */
.fx-mapa{min-width:0}
.fx-no{min-width:0}
.fx-card{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--border);
  border-radius:11px;padding:.7rem .85rem;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.fx-card:hover{border-color:var(--border-strong);background:var(--row-hover)}
.fx-card.raiz{border-left:3px solid var(--lia)}
.fx-card.erro{border-color:var(--border-danger);background:var(--surface-danger)}
.fx-card-topo{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.fx-titulo{font-weight:700;font-size:.88rem;color:var(--text)}
/* Cartão maior (07/09) — as medidas do texto sobem junto, senão o cartão só
   ganha ar e continua tão difícil de ler quanto antes. */
.fx-no-abs .fx-titulo{font-size:.95rem}
.fx-no-abs .fx-prompt{font-size:.84rem}
.fx-ops-abs .fx-rotulo{font-size:.86rem}
.fx-ops-abs .fx-destino{font-size:.78rem}
.fx-ops-abs .fx-tecla{min-width:22px;height:22px;font-size:.76rem}
.fx-prompt{margin-top:.25rem;font-size:.78rem;color:var(--text2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-badge{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.14rem .4rem;border-radius:5px;border:1px solid var(--border);color:var(--label-text);background:var(--panel-2)}
.fx-badge.entrada{background:var(--surface-info);color:var(--on-info);border-color:var(--border-info)}
.fx-badge.menu{background:var(--surface-accent);color:var(--on-accent);border-color:var(--border-accent)}
.fx-badge.final{background:var(--surface-ok);color:var(--on-ok);border-color:var(--border-ok)}
.fx-badge.erro{background:var(--surface-danger);color:var(--on-danger);border-color:var(--border-danger)}

/* A linha vertical é o que faz o mapa PARECER um fluxograma em vez de uma
   lista indentada — e ela some no escuro se for cor crua. */
.fx-ramos{list-style:none;margin:0;padding:0 0 0 1.1rem;border-left:2px solid var(--border)}
.fx-ramo{position:relative;padding-top:.5rem}
.fx-ramo::before{content:"";position:absolute;left:-1.1rem;top:1.15rem;width:.9rem;height:2px;background:var(--border)}
.fx-opcao{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;padding:.2rem 0 .35rem;min-width:0}
.fx-tecla{flex:0 0 auto;min-width:20px;height:20px;padding:0 .3rem;border-radius:5px;background:var(--panel-2);
  border:1px solid var(--border);font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--text);
  display:inline-flex;align-items:center;justify-content:center}
.fx-rotulo{font-size:.8rem;font-weight:600;color:var(--text);min-width:0;overflow-wrap:anywhere}
.fx-destino{font-size:.72rem;color:var(--label-text);white-space:nowrap}
.fx-ciclo{font-size:.72rem;color:var(--label-text);padding:.2rem 0 .35rem}
.fx-divisor{display:flex;align-items:center;gap:.7rem;margin:1.2rem 0 .7rem}
.fx-divisor::after{content:"";flex:1;height:1px;background:var(--border)}
.fx-divisor span{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--label-text)}

/* ── Problemas ──────────────────────────────────────────────────────────── */
.fx-problemas{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;max-width:820px}
.fx-prob{display:flex;align-items:flex-start;gap:.45rem;text-align:left;font-family:inherit;font-size:.78rem;
  padding:.5rem .7rem;border-radius:9px;cursor:pointer;line-height:1.45}
.fx-prob.erro{background:var(--surface-danger);color:var(--on-danger);border:1px solid var(--border-danger)}
.fx-prob.aviso{background:var(--surface-warn);color:var(--on-warn);border:1px solid var(--border-warn)}

.fx-comeco{max-width:640px}
.fx-comeco h3{font-size:1rem;font-weight:700;margin-bottom:.4rem}
.fx-comeco p,.fx-comeco li{font-size:.84rem;color:var(--text2);line-height:1.6}
.fx-comeco ol{margin:.6rem 0 1rem;padding-left:1.2rem}
.fx-vazio{font-size:.8rem;color:var(--text2);line-height:1.55;background:var(--panel-2);
  border:1px dashed var(--border);border-radius:9px;padding:.7rem .85rem}

/* ── Editor ─────────────────────────────────────────────────────────────── */
/* O .modal da casa tem max-width 480px — o editor de menu não cabe nisso. */
.fx-modal{max-width:720px;max-height:88vh;display:flex;flex-direction:column;padding:1.4rem}
.fx-modal-topo{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.fx-modal-topo h3{margin-bottom:0}
.fx-x{background:transparent;border:0;color:var(--text3);cursor:pointer;padding:.25rem;border-radius:6px;display:flex}
.fx-x:hover{background:var(--row-hover);color:var(--text)}
.fx-form{overflow-y:auto;padding:1rem .2rem .2rem;min-height:0}
.fx-secao{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--label-text)}
.fx-ops-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.1rem 0 .5rem}
.fx-op{border:1px solid var(--border);border-radius:10px;padding:.6rem;margin-bottom:.5rem;background:var(--panel-2)}
.fx-op-l1{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
/* min-width:0 no campo que estica: sem ele o texto longo empurra os botões
   pra fora da linha no 375. */
.fx-op-l1>input:not(.fx-tecla-in){flex:1 1 160px;min-width:0}
.fx-tecla-in{flex:0 0 52px;width:52px;text-align:center}
.fx-op-btns{display:flex;gap:.25rem;flex:0 0 auto}
.fx-op-l2{display:flex;gap:.4rem;margin-top:.45rem;flex-wrap:wrap}
.fx-op-l2>*{flex:1 1 170px;min-width:0}
.fx-avancado{margin-top:1rem;border-top:1px solid var(--border);padding-top:.8rem}
.fx-avancado summary{cursor:pointer;font-size:.8rem;font-weight:600;color:var(--label-text)}
.fx-avancado .form-group{margin-top:.7rem}
.fx-check{display:flex;align-items:center;gap:.5rem;font-size:.82rem;margin-top:.7rem;cursor:pointer}
.fx-check input{width:auto}
.fx-erro{margin-top:.8rem;background:var(--surface-danger);color:var(--on-danger);
  border:1px solid var(--border-danger);border-radius:9px;padding:.55rem .7rem;font-size:.8rem}
.fx-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding-top:1rem;margin-top:.6rem;border-top:1px solid var(--border);flex-wrap:wrap}
.fx-foot-esq,.fx-foot-dir{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── Simulador ──────────────────────────────────────────────────────────── */
.fx-sim{position:sticky;top:1rem;display:flex;flex-direction:column;max-height:calc(100vh - 8rem)}
@media (max-width:1100px){ .fx-sim{position:static;max-height:none} }
.fx-sim-aviso{font-size:.72rem;color:var(--label-text);margin-bottom:.6rem}
.fx-sim-thread{flex:1 1 auto;min-height:180px;max-height:52vh;overflow-y:auto;display:flex;
  flex-direction:column;gap:.45rem;padding:.6rem;background:var(--panel-2);
  border:1px solid var(--border);border-radius:10px}
.fx-msg{max-width:88%;padding:.45rem .6rem;border-radius:10px;font-size:.8rem;line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere}
.fx-msg.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--border);color:var(--text)}
.fx-msg.cliente{align-self:flex-end;background:var(--surface-info);color:var(--on-info);border:1px solid var(--border-info)}
.fx-msg.aviso{align-self:center;background:var(--surface-warn);color:var(--on-warn);
  border:1px solid var(--border-warn);font-size:.75rem;text-align:center}
.fx-msg-efeito{margin-top:.35rem;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--on-ok);background:var(--surface-ok);border:1px solid var(--border-ok);
  border-radius:5px;padding:.12rem .35rem;display:inline-block;white-space:normal}
.fx-msg-efeito.ia_respondeu{color:var(--on-info);background:var(--surface-info);border-color:var(--border-info)}
.fx-msg-efeito.escalou{color:var(--on-warn);background:var(--surface-warn);border-color:var(--border-warn)}
.fx-msg.digitando{font-style:italic;color:var(--label-text)}
.fx-sim-in{display:flex;gap:.4rem;margin-top:.6rem}
.fx-sim-in input{flex:1 1 auto;min-width:0}

/* ── Manual do atendente (aba Ajuda) ────────────────────────────────────── */
.manual-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--label-text);margin:1.5rem 0 .6rem;font-weight:700}
.manual-h:first-of-type{margin-top:1.1rem}
.manual-fluxo{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.55rem}
.manual-fluxo li{font-size:.86rem;line-height:1.6;color:var(--text2)}
.manual-fluxo li strong{color:var(--text)}
/* O aviso é o unico bloco colorido da pagina de proposito: e a informacao que,
   se a pessoa ler so uma, tem que ser esta. */
.manual-aviso{margin:1.1rem 0 0;padding:.75rem .9rem;border-radius:10px;
  background:var(--surface-warn);color:var(--on-warn);border:1px solid var(--border-warn);
  font-size:.84rem;line-height:1.6}
.manual-lista{margin:0;display:flex;flex-direction:column}
.manual-lista>div{display:grid;grid-template-columns:minmax(120px,168px) 1fr;gap:.2rem .9rem;
  padding:.6rem 0;border-top:1px solid var(--gray-border)}
.manual-lista dt{font-size:.85rem;font-weight:600;color:var(--text)}
.manual-lista dd{margin:0;font-size:.84rem;line-height:1.6;color:var(--text2)}
/* Rotulo em cima do texto no celular: 120px de coluna deixa "Devolver pro bot"
   em quatro linhas e o texto ao lado em uma tira fina. */
@media (max-width:640px){
  .manual-lista>div{grid-template-columns:1fr;gap:.15rem}
}

/* Promoções vigentes na tela do setor (Meu bot → Comercial) */
.voz-promos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.voz-promos li{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:.84rem;color:var(--text2);padding:.4rem .6rem;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--border)}
.voz-promos li strong{color:var(--text)}

/* Texto de apoio dentro de um card.
   🔴 O reset da linha 3 zera a margem de TODO `<p>`, então parágrafo sem estilo
   encosta no que vem antes e no que vem depois — foi assim que a tela de Regras
   ficou com duas frases amontoadas e o botão colado. Espaçamento vira classe pra
   parar de depender de alguém lembrar de escrever `marginTop` na mão. */
.card-nota{font-size:.85rem;color:var(--text2);line-height:1.6;margin:0 0 .85rem}
/* 🪤 A margem é EMBAIXO, não em cima. O que falta nestas telas é respiro entre
   o texto e o que vem DEPOIS dele — o campo, o botão, a lista. Margem no topo
   resolve só quando há um irmão acima, e a maioria destes parágrafos abre o
   card. */
.card-nota:last-child{margin-bottom:0}

/* Item de lista clicável (respostas rápidas, menções).
   🔴 Tinha padding e `cursor:pointer` inline e NENHUM retorno visual: a lista
   se movia sob o mouse sem indicar o que estava selecionado. Item clicável sem
   hover lê como texto. */
.qr-item{transition:background .12s}
.qr-item:hover,.qr-item.ativo{background:var(--row-hover)}

/* Faixa de sub-abas: dica de que há mais seções fora da tela.
   🔴 A 375px, "Setores e equipe" tem 7 abas e a última começa 312px fora. A
   faixa sempre rolou — o que faltava era dizer isso. Rolagem sem afordância é
   recurso que existe e ninguém acha. */
.subabas-wrap{position:relative}
/* O esmaecido nasce do PRÓPRIO fundo da faixa, então acompanha o tema sozinho. */
.subabas-wrap.tem-dir::after,
.subabas-wrap.tem-esq::before{
  content:'';position:absolute;top:1px;bottom:1px;width:56px;pointer-events:none;border-radius:11px}
.subabas-wrap.tem-dir::after{right:1px;
  background:linear-gradient(to left, var(--panel-2) 30%, transparent)}
.subabas-wrap.tem-esq::before{left:1px;
  background:linear-gradient(to right, var(--panel-2) 30%, transparent)}
/* Seta CLICÁVEL, não só o esmaecido: no celular a pessoa toca; no desktop sem
   touch, arrastar barra de rolagem fina é pior que um botão. */
.subabas-seta{position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1px solid var(--border);border-radius:50%;background:var(--panel);
  color:var(--text2);cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(15,22,36,.12)}
.subabas-seta:hover{color:var(--text);border-color:var(--lia)}
.subabas-seta.dir{right:4px}
.subabas-seta.esq{left:4px}
.subabas-seta.esq svg{transform:rotate(180deg)}

/* Regra do atendimento na tela do Fluxo (06/09/2026). Tokens, nunca cor crua:
   os 3 temas (light|misto|dark) trocam os valores e uma cor fixa aqui viraria
   texto invisível num deles. */
.fx-regra{background:var(--lia-light);border:1px solid var(--lia-border);
  border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem;color:var(--text)}
.fx-regra-t{font-weight:600;font-size:.9rem;margin-bottom:.5rem;color:var(--text)}
.fx-regra ol{margin:0;padding-left:1.15rem;display:grid;gap:.3rem}
.fx-regra li{font-size:.85rem;line-height:1.45;color:var(--muted)}
.fx-regra strong{color:var(--text);font-weight:600}
.fx-regra p{margin:.6rem 0 0;font-size:.82rem;color:var(--muted)}

/* ── Fluxograma arrastável (07/09/2026) ───────────────────────────────────
   🔑 As medidas aqui e as constantes NO_W/ALTO/OP_H do app.js são a MESMA
   geometria: a seta sai de `ALTO + i*OP_H + OP_H/2`, calculado, não medido do
   DOM. Mexer numa altura aqui sem mexer lá desalinha a ponta da seta da linha
   da opção — e o desenho continua "funcionando", só apontando pro lugar errado,
   que é o defeito que ninguém reporta. */
.fx-mapa-wrap{min-width:0}
.fx-area{position:relative;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--border);border-radius:12px;
  background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:22px 22px;
  touch-action:none;cursor:grab}
/* 🪤 O teto de 620px era o mesmo defeito do `max-width:1800` do atendimento em
   02/08: num 2560x1440 sobravam 232px de tela MORTA abaixo e a área continuava
   620. Altura elástica com piso — e o piso existe porque abaixo dele o canvas
   deixa de caber num cartão inteiro. */
/* O JS escreve `style.height` com o espaço REAL que sobra até a dobra; estes
   limites são o piso e o teto dele. O piso existe porque abaixo de 420px o
   canvas deixa de caber um cartão inteiro com as opções. */
.fx-area{height:clamp(420px, 78vh, 900px);min-height:420px;max-height:900px}
.fx-area:active{cursor:grabbing}
.fx-canvas{position:absolute;inset:0;transform-origin:0 0}
.fx-ligas{position:absolute;left:0;top:0;width:4000px;height:3000px;overflow:visible;pointer-events:none;
  color:var(--border-strong)}
.fx-liga{fill:none;stroke:var(--border-strong);stroke-width:1.6}
/* Ciclo (submenu que volta pro menu principal) é desenho CERTO de URA — some
   do caminho de leitura sem o acento, então ganha a cor do acento em vez de um
   aviso: não é problema, é a forma. */
.fx-liga.volta{stroke:var(--lia);stroke-dasharray:5 4}
.fx-no-abs{position:absolute;cursor:grab}
.fx-no-abs.movendo{cursor:grabbing;z-index:5}
.fx-no-abs.movendo .fx-card{border-color:var(--lia);box-shadow:0 6px 18px var(--overlay)}
/* 🔴 ALTURA FIXA, e é o ponto todo: a saída de cada seta é calculada em JS como
   ALTO + i*OP_H + OP_H/2. Cartão que cresce com o texto faz a conta mentir —
   medido em 07/09: 98px reais contra 62 calculados, seta 36px fora da linha. */
.fx-no-abs .fx-card{cursor:inherit;box-shadow:0 1px 3px rgba(0,0,0,.06);
  height:116px;box-sizing:border-box;overflow:hidden;border-radius:11px 11px 0 0;
  padding:.6rem .8rem}
/* 🔴 NOWRAP no cabeçalho do cartão, e é o conserto do print de 07/09: o topo
   herdava `flex-wrap:wrap` da tela antiga, e com titulo + 2 selos ele quebrava
   em DUAS linhas (51px medidos dos 80 disponíveis). O prompt era empurrado pra
   baixo e sobrava 27,9px pra fora — o texto aparecia FATIADO no meio da letra,
   porque a altura do cartão é fixa de propósito (a seta depende dela). */
.fx-no-abs .fx-card-topo{flex-wrap:nowrap;gap:.35rem}
.fx-no-abs .fx-titulo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-no-abs .fx-badge{flex-shrink:0}
/* 3 linhas (07/09, a pedido dele) — e a ALTURA subiu junto, de 96 pra 116.
   Aumentar o clamp sem a altura empurraria a 3a linha pra fora do cartao e
   ela sairia FATIADA no meio da letra, que e exatamente o defeito do print
   de hoje de manha. A guarda compara o rodape do texto com o do cartao. */
.fx-no-abs .fx-prompt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fx-ops-abs{list-style:none;margin:0;padding:0;background:var(--panel);
  border:1px solid var(--border);border-top:none;border-radius:0 0 11px 11px}
.fx-ops-abs .fx-opcao{flex-wrap:nowrap;padding:0 .5rem;gap:.4rem;position:relative;box-sizing:border-box}
.fx-ops-abs .fx-rotulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-ops-abs .fx-destino{white-space:nowrap;flex-shrink:0}
.fx-porta{position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.fx-zoom{display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem;flex-wrap:wrap}
.fx-zoom-v{font-size:.78rem;color:var(--muted);min-width:3.2em;text-align:center}
.fx-zoom-dica{font-size:.78rem;color:var(--muted);margin-left:auto}
@media (max-width:720px){
  .fx-area{height:min(60vh,460px)}
  .fx-zoom-dica{margin-left:0;flex-basis:100%}
}

/* Puxar o fio pra ligar dois passos (07/09/2026) */
.fx-porta{cursor:crosshair}
.fx-porta:hover{background:var(--lia);transform:translateY(-50%) scale(1.5)}
/* Alvo de toque maior que o ponto desenhado: a bolinha tem 8px e dedo não tem
   pontaria de 8px. O ::after é invisível e só amplia a área de pegada. */
.fx-porta::after{content:'';position:absolute;inset:-9px;border-radius:50%}
.fx-fio{fill:none;stroke:var(--lia);stroke-width:2;stroke-dasharray:4 3;pointer-events:none}
.fx-no-abs.ligando{cursor:crosshair}
.fx-no-abs.ligando .fx-card{border-style:dashed}
.fx-no-abs.alvo .fx-card{border-color:var(--lia);border-style:solid;background:var(--lia-light)}

/* Modelos de fluxograma (07/09/2026) */
.fx-modelos{max-width:640px}
.fx-modelos-int{margin:0 0 .9rem;font-size:.84rem;color:var(--muted);line-height:1.5}
.fx-modelo{border:1px solid var(--border);border-radius:11px;padding:.8rem .9rem;margin-bottom:.7rem;
  background:var(--panel)}
.fx-modelo-cab{display:flex;align-items:flex-start;gap:.8rem;justify-content:space-between}
.fx-modelo-cab .btn{flex-shrink:0}
.fx-modelo-nome{font-weight:700;font-size:.9rem;color:var(--text)}
.fx-modelo-desc{font-size:.82rem;color:var(--muted);line-height:1.45;margin-top:.15rem}
.fx-modelo-previa{white-space:pre-wrap;font-size:.82rem;color:var(--text2,var(--muted));
  background:var(--panel-2);border-radius:8px;padding:.5rem .65rem;margin-top:.6rem;line-height:1.45}
.fx-modelo-ops{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.fx-modelo-ops li{display:flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--text);
  background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:.15rem .55rem}

/* A regra virou <details> (07/09/2026) */
.fx-regra summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.4rem}
.fx-regra summary::-webkit-details-marker{display:none}
/* O triângulo é desenhado à mão porque o marcador nativo não aceita cor de
   token — e no tema escuro ele saía preto sobre fundo escuro. */
.fx-regra summary::before{content:'';border:5px solid transparent;border-left-color:currentColor;
  transition:transform .15s;transform-origin:25% 50%}
.fx-regra[open] summary::before{transform:rotate(90deg)}
.fx-regra:not([open]){padding-top:.6rem;padding-bottom:.6rem}
.fx-regra:not([open]) summary{margin:0}

/* Tela cheia do fluxograma (07/09/2026) — a resposta pro "muito pequeno".
   Medido: num 1280x900 com a régua aberta sobram 420px reais de altura pro
   canvas. Dá pra brigar por 100px aqui e ali; dá pra dar a tela inteira. */
.fx-mapa.cheio{position:fixed;inset:0;z-index:200;background:var(--bg);
  padding:.6rem .8rem;display:flex;flex-direction:column;gap:.5rem}
.fx-mapa.cheio .fx-zoom{margin:0;flex-shrink:0}
/* 🪤 Em tela cheia a barra fica MÍNIMA: a dica ("arraste os cartões…") é texto
   de aprendizado, e quem entrou em tela cheia já sabe arrastar. O cabeçalho da
   página e a barra de fluxos já não aparecem — o painel é opaco e cobre tudo.
   🔴 O que NÃO some são os botões: em tela cheia não há menu, e o "Sair" é a
   única saída visível. ESC funciona, mas ninguém adivinha ESC num iPad. */
.fx-mapa.cheio .fx-zoom-dica{display:none}
.fx-mapa.cheio{padding:.4rem .6rem}
/* `flex:1` e não `height:100vh`: a barra de zoom fica em cima e o canvas leva o
   resto. Altura fixa aqui faria a área passar da tela pela altura da barra. */
.fx-mapa.cheio .fx-area{flex:1;min-height:0;max-height:none;height:auto}

/* Simulador como ABA (07/09/2026) — o mapa deixa de pagar 380px de largura
   pro simulador em toda tela. */
.fx-abas-wrap{min-width:0}
.fx-abas{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:.8rem}
.fx-aba{appearance:none;background:none;border:none;border-bottom:2px solid transparent;
  padding:.5rem .85rem;font:inherit;font-size:.86rem;font-weight:600;color:var(--muted);
  cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s}
.fx-aba:hover{color:var(--text)}
/* 🪤 O TEXTO usa --on-lia-tint, não --lia: medido em 07/09, o acento puro dava
   3,37:1 sobre o painel em light e misto — abaixo do 4,5 de AA. A BORDA pode
   seguir no acento puro, porque ali a régua é 3,0 (elemento gráfico). */
.fx-aba.ativa{color:var(--on-lia-tint);border-bottom-color:var(--lia)}
/* O simulador era filho de um grid de 380px; solto na largura inteira ele
   esticaria a bolha de mensagem de ponta a ponta e viraria parede de texto. */
.fx-abas-wrap .fx-sim{max-width:620px}

/* Selo da pergunta aberta (07/09/2026) — cor própria porque ela é o único tipo
   de passo que ESPERA o cliente escrever, e confundi-la com "Informativo" no
   mapa esconde justamente o que ela tem de diferente. */
.fx-badge.aberta{color:var(--on-lia-tint);background:var(--lia-light);border-color:var(--lia-border)}

/* O "+" da borda (07/09/2026): cria o próximo passo já ligado à opção.
   🪤 `onPointerDown` com stopPropagation no botão, senão o mesmo gesto começa a
   arrastar o CARTÃO — a porta ao lado é alça de arrasto e o botão vive dentro
   da mesma linha. */
/* 🔴 FORA do cartão (08/09). Em `right:12px` ele ficava POR CIMA do texto do
   destino — no print do Dirceu dava pra ler "fila Comer[+]al" e "encerra[+]".
   Reservar espaço com padding encolheria o rótulo em TODA linha, o tempo todo,
   por causa de um botão que só aparece no hover. Ele mora além da borda, que é
   onde ele foi pedido: "um + na borda". */
.fx-mais{position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;line-height:1;padding:0;border-radius:50%;
  border:1px solid var(--lia-border);background:var(--lia-light);color:var(--on-lia-tint);
  font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
  display:none;align-items:center;justify-content:center}
/* Só aparece no cartão sob o cursor: um "+" por opção em todo cartão vira
   ruído visual no mapa inteiro. */
.fx-no-abs:hover .fx-mais,.fx-mais:focus-visible{display:flex}
.fx-mais:hover{background:var(--lia);color:var(--on-lia);border-color:var(--lia)}

/* Barra de fluxos (mig 081, 08/09/2026) — cada um dizendo quais linhas atende */
.fx-fluxos{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.9rem}
.fx-fluxo-chip{appearance:none;text-align:left;font:inherit;cursor:pointer;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:.45rem .7rem;min-width:0;max-width:280px;transition:border-color .15s,background .15s}
.fx-fluxo-chip:hover{border-color:var(--border-strong);background:var(--row-hover)}
.fx-fluxo-chip.ativo{border-color:var(--lia);background:var(--lia-light)}
.fx-fluxo-nome{display:block;font-weight:700;font-size:.86rem;color:var(--text)}
/* As linhas em uma linha só com reticências: fluxo que atende 5 linhas não pode
   empurrar o canvas pra baixo da dobra. */
.fx-fluxo-linhas{display:block;font-size:.75rem;color:var(--muted);margin-top:.1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Ajuda no app (08/09/2026) — balão fixo + painel */
.ajuda-bolha{position:fixed;right:18px;bottom:18px;z-index:180;width:44px;height:44px;
  border-radius:50%;border:none;background:var(--lia);color:var(--on-lia);
  font:inherit;font-size:1.3rem;font-weight:700;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ajuda-bolha:hover{background:var(--lia-dark)}
.ajuda-painel{position:fixed;right:18px;bottom:74px;z-index:181;width:min(380px,calc(100vw - 36px));
  max-height:min(60vh,520px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:hidden}
.ajuda-topo{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.7rem .85rem;border-bottom:1px solid var(--border);color:var(--text)}
.ajuda-thread{flex:1;min-height:0;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.6rem}
.ajuda-vazio{font-size:.84rem;color:var(--muted);line-height:1.5}
.ajuda-msg{max-width:85%}
.ajuda-msg.eu{align-self:flex-end}
/* 🪤 `--lia-dark`, não `--lia`: medido em 08/09, branco sobre o acento puro dá
   3,55:1 — abaixo do 4,5 de AA pra texto de corpo. O "?" da bolinha pode ficar
   no acento porque ele é texto GRANDE (1.3rem/700), onde a régua é 3,0. */
.ajuda-msg.eu .ajuda-txt{background:var(--lia-dark);color:var(--on-lia);border-radius:12px 12px 3px 12px}
.ajuda-msg.ajuda .ajuda-txt{background:var(--panel-2);color:var(--text);border:1px solid var(--border);
  border-radius:12px 12px 12px 3px}
.ajuda-txt{padding:.5rem .7rem;font-size:.85rem;line-height:1.5;white-space:pre-wrap}
/* De onde veio a resposta. Não é curiosidade técnica: mostra que o cache está
   funcionando, e avisa que a resposta da IA ainda não foi conferida por gente. */
.ajuda-fonte{font-size:.7rem;color:var(--text3);margin-top:.2rem}
.ajuda-in{display:flex;gap:.4rem;padding:.7rem;border-top:1px solid var(--border)}
.ajuda-in input{flex:1;min-width:0}
@media (max-width:720px){ .ajuda-painel{right:10px;left:10px;width:auto} }

/* Curadoria da base de ajuda (08/09/2026) */
.ajuda-item{border-top:1px solid var(--border);padding:.7rem 0}
.ajuda-item:first-of-type{border-top:none}
.ajuda-item-cab{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ajuda-item-cab strong{font-size:.88rem;color:var(--text)}
.ajuda-item-txt{margin-top:.3rem;font-size:.84rem;color:var(--muted);line-height:1.5;white-space:pre-wrap}
.ajuda-item-acoes{display:flex;gap:.4rem;margin-top:.5rem}

/* A saída da pergunta aberta (08/09) — texto que QUEBRA, não linha de opção.
   🪤 A 1ª versão copiou a forma das opções e o rótulo cortava em "o client…":
   132px de texto em 74px de espaço. Aqui não há tecla nem colunas. */
.fx-saida{background:var(--panel);border:1px solid var(--border);border-top:none;
  border-radius:0 0 11px 11px;padding:.5rem .7rem;
  font-size:.8rem;line-height:1.45;color:var(--muted)}
.fx-saida strong{color:var(--text);font-weight:600}
/* Botão que parece link: leva pra tela onde a fila é decidida de verdade. */
.fx-link{appearance:none;background:none;border:none;padding:0;font:inherit;
  color:var(--on-lia-tint);text-decoration:underline;cursor:pointer}
.fx-link:hover{color:var(--lia-dark)}

/* A conta da revenda (08/09/2026) — o que a Grep|IA cobra DELA.
   🔴 Fica na tela onde ela cadastra cliente, porque cadastrar é o ato que
   aumenta a conta: descobrir o valor só no boleto é a pior hora.
   🪤 Tokens do painel, não cor fixa: em `var(--panel-2)` a faixa acompanha os
   3 temas. Cor literal aqui vira texto invisível no escuro. */
.rv-conta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.25rem;
  padding:.8rem 1.25rem;background:var(--panel-2);
  border-bottom:1px solid var(--gray-border)}
.rv-conta-lb{display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text2);font-weight:600}
.rv-conta-vl{font-size:1.35rem;color:var(--text);line-height:1.2}
.rv-conta-vl span{font-size:.8rem;font-weight:500;color:var(--text3)}
.rv-conta-sub{display:block;font-size:.76rem;color:var(--text2);margin-top:.15rem}
.rv-conta-margem{font-size:.8rem;color:var(--text2);margin-left:auto}
.rv-conta-margem strong{color:var(--green)}
.rv-conta-alerta{flex-basis:100%;font-size:.76rem;color:var(--amber)}

/* O roteiro de 4 perguntas (08/09/2026) — monta o atendimento de uma vez. */
.rt-convite{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.25rem;margin-bottom:1rem}
.rt-convite > div{flex:1;min-width:240px}
.rt-convite strong{font-size:.95rem;color:var(--text)}
.rt-convite p{margin:.25rem 0 0;font-size:.82rem;color:var(--text2);line-height:1.5}
.rt-card{max-width:640px;padding:1.25rem;margin-bottom:1rem}
.rt-sub{margin:.25rem 0 1rem;font-size:.85rem;color:var(--text2);line-height:1.55}
.rt-feito{margin:.5rem 0 1rem;padding-left:1.1rem;font-size:.86rem;color:var(--text2);line-height:1.7}
.rt-avisos{background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:9px;
  padding:.7rem .85rem;margin-bottom:1rem;font-size:.82rem;color:var(--text2);line-height:1.5}
.rt-avisos strong{display:block;margin-bottom:.25rem;color:var(--text)}

/* De quem é cada empresa na lista do master (08/09/2026). O cliente de revenda
   NÃO é cliente direto da Grep|IA — quem paga o atacado é a revenda. */
.selo-dono{display:inline-block;margin-left:.45rem;padding:.1rem .4rem;border-radius:100px;
  font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  vertical-align:middle;white-space:nowrap}
.selo-revenda{background:var(--surface-info);color:var(--on-info);border:1px solid var(--border-info)}
.selo-eh-revenda{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.filtro-escopo{display:flex;gap:.4rem;flex-wrap:wrap;padding:.7rem 1.25rem;
  border-bottom:1px solid var(--gray-border)}
.filtro-escopo span{opacity:.7;margin-left:.2rem}

/* Composição embaixo do número grande do card do master (08/09/2026):
   quantas das empresas ativas são clientes de uma revenda. */
.m-sub{margin-top:.15rem;font-size:.68rem;color:var(--text2);font-weight:600}

/* Módulos na ficha da empresa (09/09/2026) — o que a Grep|IA vende por cima
   do plano. O preço fica ao lado do nome: um toggle que cobra R$ 199 sem dizer
   quanto é o tipo de botão que ninguém quer ter clicado sem querer. */
.mod-linha{display:flex;align-items:flex-start;gap:.55rem;cursor:pointer;font-weight:400;
  padding:.5rem 0;border-top:1px solid var(--gray-border)}
.mod-linha:first-of-type{border-top:none}
.mod-linha input{margin-top:.25rem;flex-shrink:0}
.mod-linha strong{font-size:.83rem;color:var(--text)}
.mod-preco{margin-left:.4rem;font-size:.72rem;font-weight:700;color:var(--green)}
.mod-desc{display:block;color:var(--text3);font-size:.72rem;margin-top:.15rem;line-height:1.45}
/* A aba travada da revenda: aparece, mas diz que está fechada. Esconder faria
   ela nem saber que o módulo existe. */
.subaba-travada{opacity:.6}
.mod-aviso{padding:1.5rem;text-align:center;color:var(--text2);font-size:.86rem;line-height:1.6}
.mod-aviso strong{display:block;color:var(--text);margin-bottom:.3rem}

/* Provedor de IA (Meu bot › Provedor de IA, 14/09/2026) */
.pia-alerta{display:flex;flex-direction:column;gap:.25rem;margin:0 0 1rem;padding:.8rem 1rem;border-radius:10px;
  background:var(--surface-warn);border:1px solid var(--border-warn);color:var(--on-warn);font-size:.8rem}
.pia-estado{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin:0 0 1.1rem;
  padding:.8rem 1rem;border:1px solid var(--gray-border);border-radius:10px}
.pia-estado > div{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.pia-rot{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2)}
.pia-sub{font-size:.75rem;color:var(--text2);overflow-wrap:anywhere}
.pia-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 1rem}
.pia-buscar{margin-top:.45rem}
.pia-limites{margin:.2rem 0 1rem;padding-left:1.1rem;font-size:.75rem;color:var(--text2);display:flex;flex-direction:column;gap:.2rem}
.pia-acoes{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;margin-top:.5rem}
/* 🪤 A bolha de ajuda (.ajuda-bolha) é fixa no canto inferior direito e, no fim
   da rolagem, cobria o botão Salvar em 375 px (print de 14/09). Os botões ficam
   à esquerda e ganham folga embaixo da altura da bolha. */
@media (max-width:768px){.pia-acoes{justify-content:flex-start;margin-bottom:4.5rem}}

/* ══ Ativação assistida (15/09/2026) ═══════════════════════════════════════
   Tela inteira no 1º login da conta `assistido`. Não mora dentro do .dash-wrap:
   sem sidebar e sem a bolha de ajuda fixa, que em 375 px cobria botão de
   rodapé (ver .pia-acoes acima). Só tokens — os três temas saem de graça. */
.atv-wrap{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font)}
.atv-topo{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;flex-wrap:wrap;padding:.8rem clamp(1rem,4vw,2rem);background:var(--panel);border-bottom:1px solid var(--border)}
.atv-marca{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.92rem;color:var(--text)}
.atv-marca svg{color:var(--on-lia-tint)}
.atv-topo-acoes{display:flex;gap:.5rem;flex-wrap:wrap}
.atv-corpo{max-width:760px;margin:0 auto;padding:1.4rem clamp(1rem,4vw,2rem) 3rem}

.atv-trilha{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:.6rem}
.atv-trilha-item{flex:1 1 0;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.45rem .3rem;border:none;background:transparent;color:var(--label-text);font-family:var(--font);cursor:pointer;border-radius:10px}
.atv-trilha-item:disabled{cursor:default}
.atv-trilha-item:not(:disabled):hover{background:var(--panel-2)}
.atv-trilha-num{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;background:var(--panel);border:1.5px solid var(--border-strong);color:var(--label-text)}
.atv-trilha-rot{font-size:.7rem;line-height:1.25;text-align:center}
.atv-trilha-item.atual .atv-trilha-num{background:var(--lia);border-color:var(--lia);color:var(--on-lia)}
.atv-trilha-item.atual .atv-trilha-rot{color:var(--text);font-weight:700}
.atv-trilha-item.feito .atv-trilha-num{background:var(--surface-ok);border-color:var(--border-ok);color:var(--on-ok)}
.atv-barra{height:6px;border-radius:99px;background:var(--panel-2);border:1px solid var(--border);overflow:hidden;margin-bottom:1.1rem}
.atv-barra-fill{height:100%;background:var(--lia);transition:width .35s ease}
@media (prefers-reduced-motion:reduce){.atv-barra-fill{transition:none}}

.atv-cartao{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1rem,4vw,1.8rem)}
.atv-cab{margin-bottom:1.2rem}
.atv-cab-passo{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--label-text)}
.atv-cab h1{margin:.25rem 0 .3rem;font-size:1.35rem;line-height:1.25;color:var(--text)}
.atv-cab p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}
.atv-cartao .form-group label{color:var(--label-text)}
.atv-cartao .form-group input,.atv-cartao .form-group textarea{font-size:.9rem}
.atv-cartao .form-hint{color:var(--label-text);font-size:.74rem;line-height:1.45}

.atv-nota{display:flex;gap:.55rem;align-items:flex-start;padding:.7rem .85rem;border-radius:10px;margin-bottom:1rem;
  font-size:.84rem;line-height:1.45;background:var(--surface-info);border:1px solid var(--border-info);color:var(--on-info)}
.atv-nota svg{flex:0 0 auto;margin-top:.15rem}
.atv-nota.ok{background:var(--surface-ok);border-color:var(--border-ok);color:var(--on-ok)}
.atv-nota.aviso{background:var(--surface-warn);border-color:var(--border-warn);color:var(--on-warn)}
.atv-erro{padding:.7rem .85rem;border-radius:10px;margin-bottom:1rem;font-size:.84rem;line-height:1.45;
  background:var(--surface-danger);border:1px solid var(--border-danger);color:var(--on-danger)}
.atv-dado{font-family:var(--mono)}

.atv-grupo{border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1rem 1rem;margin:0 0 1.1rem;min-width:0}
.atv-grupo legend{padding:0 .35rem;font-size:.8rem;font-weight:700;color:var(--text)}
.atv-check{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--text);cursor:pointer;min-width:0}
.atv-check input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--lia)}
.atv-check.fixo{cursor:default}
.atv-check em{color:var(--label-text);font-style:normal;font-size:.78rem}
.atv-lista-check{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.atv-hora{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;padding:.45rem 0}
.atv-hora + .atv-hora{border-top:1px solid var(--border)}
.atv-hora-campos{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.84rem}
.atv-hora-campos input{padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--input-bg);
  color:var(--text);font-family:var(--font);font-size:.88rem}
.atv-hora-campos input:disabled{opacity:.5}
.atv-duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}

.atv-opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem}
.atv-opcao{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:.85rem .95rem .85rem 2.6rem;
  border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;background:var(--panel)}
.atv-opcao input{position:absolute;left:.95rem;top:1rem;width:17px;height:17px;accent-color:var(--lia)}
.atv-opcao.marcada{border-color:var(--lia);background:var(--lia-light)}
.atv-opcao-t{font-weight:700;font-size:.9rem;color:var(--text)}
.atv-opcao-d{font-size:.8rem;line-height:1.45;color:var(--muted)}

.atv-pessoas{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.4rem}
.atv-pessoas li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem .7rem;
  background:var(--panel-2);border-radius:9px;min-width:0}
.atv-pessoa-mail{min-width:0;overflow-wrap:anywhere;font-size:.84rem;color:var(--text)}
.atv-selo{flex:0 0 auto;display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:700;padding:.15rem .5rem;
  border-radius:99px;border:1px solid transparent}
.atv-selo.ok{background:var(--surface-ok);color:var(--on-ok);border-color:var(--border-ok)}
.atv-selo.aviso{background:var(--surface-warn);color:var(--on-warn);border-color:var(--border-warn)}

.atv-previa{border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1rem;margin-bottom:1.1rem;background:var(--panel-2)}
.atv-previa-cab{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.atv-previa-cab h2{margin:0;font-size:.92rem;color:var(--text)}
.atv-previa-texto{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border);border-radius:9px;
  background:var(--input-bg);color:var(--text);font-family:var(--font);font-size:.86rem;line-height:1.55;resize:vertical}
.atv-previa-texto:focus{outline:none;border-color:var(--lia);box-shadow:0 0 0 3px var(--lia-light)}
.atv-vazio{margin:0;font-size:.84rem;line-height:1.5;color:var(--muted)}
.atv-texto{font-size:.88rem;line-height:1.55;color:var(--muted);margin:0 0 .4rem}

.atv-passos-qr{margin:0 0 1rem;padding-left:1.3rem;font-size:.88rem;line-height:1.7;color:var(--text)}
.atv-qr{text-align:center;margin:.4rem 0 .8rem}
.atv-qr .wa-qr-box img{width:min(260px,70vw);height:auto;aspect-ratio:1}

.atv-resumo{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.45rem}
.atv-resumo li{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--text);min-width:0}
.atv-resumo li em{margin-left:auto;font-style:normal;font-size:.74rem;color:var(--on-warn)}
.atv-teste{margin:1rem 0}
.atv-teste .d-card{max-width:none}

/* A bolha de ajuda não existe nesta tela, mas o rodapé ganha folga igual em
   telas baixas: é o botão que ninguém pode perder. */
.atv-rodape{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;
  margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--border)}
@media (max-width:480px){
  .atv-rodape{flex-direction:column-reverse;align-items:stretch}
  .atv-rodape .btn{justify-content:center}
  .atv-hora-campos{width:100%}
  .atv-hora-campos input{flex:1;min-width:0}
}

/* Chamada no "Comece aqui" e bloco de sucesso no cadastro do master. */
.atv-chamada{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;flex-wrap:wrap;max-width:820px}
.atv-chamada.pendente{background:var(--surface-info);border-color:var(--border-info)}
.atv-chamada-txt{min-width:0;flex:1 1 280px}
.atv-chamada h3{margin:0 0 .25rem;font-size:.95rem;color:var(--text)}
.atv-chamada.pendente h3,.atv-chamada.pendente p{color:var(--on-info)}
.atv-chamada p{margin:0;font-size:.84rem;line-height:1.45;color:var(--muted)}
.atv-sucesso{background:var(--surface-info);border:1px solid var(--border-info);border-radius:9px;padding:.9rem 1rem;margin-bottom:1rem;color:var(--on-info)}
.atv-sucesso-rot{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}
.atv-sucesso p{margin:.3rem 0;font-size:.78rem;line-height:1.45}

/* ══ Campo de telefone (15/09/2026) ════════════════════════════════════════
   País + número numa linha. O botão do país veste a MESMA caixa dos inputs
   da casa (.form-group input) pra não parecer outra peça; a lista é `fixed`
   (grampeada no viewport pelo JS) pra não ser cortada por modal com overflow. */
.tel-campo{min-width:0}
.tel-linha{display:flex;gap:.4rem;align-items:stretch;min-width:0}
.tel-linha input{flex:1 1 auto;min-width:0}
.tel-pais{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;padding:0 .6rem;
  border:1.5px solid var(--gray-border);border-radius:9px;background:var(--gray-light);color:var(--text);
  font-family:var(--font);font-size:.82rem;cursor:pointer;white-space:nowrap}
.tel-pais:hover:not(:disabled){border-color:var(--border-strong)}
.tel-pais:focus-visible{outline:none;border-color:var(--lia);box-shadow:0 0 0 3px var(--lia-light)}
.tel-pais:disabled{opacity:.6;cursor:not-allowed}
.tel-pais-iso{font-weight:700}
.tel-pais-ddi{color:var(--label-text);font-variant-numeric:tabular-nums}
.tel-campo.invalido .tel-linha input{border-color:var(--red)}
.tel-erro{margin-top:.3rem;font-size:.72rem;color:var(--on-danger)}
.tel-menu{position:fixed;z-index:1200;background:var(--panel);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 10px 30px rgba(15,23,42,.18);padding:.4rem;display:flex;flex-direction:column}
.tel-busca{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--input-bg);color:var(--text);font-family:var(--font);font-size:.84rem;margin-bottom:.35rem}
.tel-busca:focus{outline:none;border-color:var(--lia);box-shadow:0 0 0 3px var(--lia-light)}
.tel-lista{list-style:none;margin:0;padding:0;overflow-y:auto}
.tel-opcao{display:flex;justify-content:space-between;gap:.6rem;padding:.42rem .55rem;border-radius:7px;cursor:pointer;
  font-size:.84rem;color:var(--text)}
.tel-opcao.marcada{background:var(--panel-2)}
.tel-opcao.atual .tel-opcao-nome{font-weight:700}
.tel-opcao-ddi{color:var(--label-text);font-variant-numeric:tabular-nums;flex:0 0 auto}
.tel-opcao-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tel-vazio{padding:.5rem .55rem;font-size:.8rem;color:var(--label-text)}
/* Segundo seletor da sidebar (PME), 15/09/2026: mesmo rótulo, com folga do de cima. */
.sidebar-empresa-label-2{margin-top:.55rem}

/* ─── Linha de corte "não lidas" na thread (21/09/2026) ─────────────────────
   Dirceu: "quando exibir a conversa (hj ela começa do inicio) seria
   interessante exibir de onde ela parou". A conversa passou a abrir NESTA
   linha; ela fica no fluxo (não é toast, não some sozinha) e serve de âncora
   pra rolagem.
   🪤 `align-self:stretch` porque a thread é um flex column em que cada bolha
   se alinha a um lado — sem isso a linha encolheria pro tamanho do texto.
   🪤 O RÓTULO usa `--label-text`, não `--lia`: texto pequeno em maiúscula com
   letter-spacing é justamente onde o contraste cai, e `--lia` vem do
   white-label (o cliente escolhe a cor, e pode escolher uma clara). A cor da
   marca fica nas RÉGUAS, que são decoração e não precisam ser legíveis. */
.atd-marco{align-self:stretch;display:flex;align-items:center;gap:.6rem;margin:.35rem 0}
.atd-marco span{flex:1;height:1px;background:var(--lia);opacity:.5}
.atd-marco em{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--label-text);white-space:nowrap}

/* ─── Editar mensagem enviada (20/10/2026, piloto) ──────────────────────────
   O campo mora DENTRO do balão do atendente, que tem a cor da marca: fundo e
   texto do campo vêm dos tokens da superfície, não herdam a cor do balão — senão
   um white-label claro deixa o texto ilegível. O "Editar" é texto pequeno ao
   lado da hora, sem borda: aparece em todo balão recente e não pode gritar. */
.atd-ed{display:flex;flex-direction:column;gap:.35rem;min-width:min(260px,60vw)}
.atd-ed textarea{width:100%;resize:vertical;background:var(--white);color:var(--text);
  border:1.5px solid var(--gray-border);border-radius:8px;padding:.4rem .55rem;
  font:inherit;font-size:.82rem;line-height:1.4;outline:none}
.atd-ed textarea:focus{border-color:var(--lia)}
.atd-ed-acoes{display:flex;justify-content:flex-end;gap:.3rem}
/* Os botões também moram no balão da marca: `btn-ghost` e `btn-lia` sumiam ali
   (verde sobre verde, medido 20/10). Superfície própria, como o campo. */
.atd-ed-acoes .btn{background:var(--white);color:var(--text);border:1px solid var(--gray-border)}
.atd-ed-acoes .btn-lia{font-weight:700;border-color:var(--text)}
.atd-ed-acoes .btn:disabled{opacity:.6;cursor:not-allowed}
.atd-editar{display:inline-flex;align-items:center;gap:.2rem;background:none;border:none;padding:.1rem .2rem;
  font:inherit;font-size:.62rem;font-weight:600;color:var(--text2);cursor:pointer;border-radius:4px}
.atd-editar:hover,.atd-editar:focus-visible{color:var(--text);text-decoration:underline}
.atd-editada{font-style:italic}
/* Responder citando (21/10/2026). O trecho citado mora DENTRO do balão e herda a
   cor do texto dele: o balão do atendente é cor de marca com texto claro, o do
   cliente é claro com texto escuro. 🪤 O véu é PRETO translúcido, não cinza: cinza
   clareava o balão da equipe e derrubava o texto branco para 3,7:1 no tema claro;
   preto escurece o fundo — mais contraste com texto claro, quase nada a menos com escuro. */
.atd-cit{display:flex;flex-direction:column;gap:.1rem;width:100%;text-align:left;margin:0 0 .35rem;padding:.3rem .5rem;
  border:none;border-left:3px solid currentColor;border-radius:6px;background:rgba(0,0,0,.14);color:inherit;
  font:inherit;font-size:.74rem;line-height:1.35;cursor:pointer}
.atd-cit:disabled{cursor:default}
.atd-cit:not(:disabled):hover,.atd-cit:focus-visible{background:rgba(0,0,0,.22)}
.atd-cit strong{font-size:.66rem;font-weight:700}
.atd-cit span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.atd-citando{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .45rem;padding:.4rem .55rem;border-radius:8px;
  border-left:3px solid var(--lia);background:var(--lia-light);font-size:.74rem;color:var(--text2)}
.atd-citando>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.atd-citando strong{font-size:.68rem;color:var(--text)}
.atd-citando span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atd-pisca>div{outline:2px solid var(--lia);outline-offset:2px;transition:outline-color .4s}

/* ─── Lista do pop-up de transferência (21/09/2026) ─────────────────────────
   Dirceu: "agrupa num só quando vier mais de um". Antes era um pop-up por
   conversa transferida, e quem recebia um lote fechava um atrás do outro.
   🪤 `max-height` + rolagem: lote de 20 conversas empurraria os botões do
   rodapé pra fora da janela no celular — e aí o pop-up fica sem saída. */
.tr-lista{display:flex;flex-direction:column;gap:.35rem;max-height:46vh;overflow-y:auto;
  margin:0 -.25rem;padding:0 .25rem}
.tr-item{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;
  text-align:left;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;
  padding:.55rem .7rem;cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s}
.tr-item:hover,.tr-item:focus-visible{background:var(--panel);border-color:var(--lia);outline:none}
.tr-item-nome{font-weight:700;font-size:.85rem;color:var(--text);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Metadado é lista, não frase: cada recorte no seu span, com `nowrap`, senão o
   "·" fica órfão no fim da linha em 375px. */
.tr-item-meta{display:flex;flex-wrap:wrap;gap:.3rem;font-size:.72rem;color:var(--label-text)}

/* Mensagem livre no passo do fluxo (mig 095) */
.fx-livre{margin:-.2rem 0 .9rem;padding:.1rem .75rem .7rem;border:1px dashed var(--gray-border);border-radius:10px}
.fx-livre-nota{margin-top:.35rem;font-size:.68rem;font-weight:600;color:var(--on-lia-tint)}

/* ═══ Configurar › Monitoramento (16/10/2026) — consumo de IA, só master ═══
   Só tokens: vale igual no claro, no escuro e no misto. Prefixo `mon-`. */
.mon-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:.9rem;flex-wrap:wrap;margin-bottom:1rem}
.mon-topo h2{margin:0;font-size:1.3rem;color:var(--text)}
.mon-topo p{margin:.2rem 0 0;font-size:.82rem;color:var(--text2)}
.mon-filtros{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.mon-flabel{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--label-text)}
.mon-seg{display:inline-flex;align-self:flex-start;border:1px solid var(--gray-border);border-radius:10px;overflow:hidden;background:var(--panel-2)}
.mon-seg button{font:inherit;font-size:.8rem;padding:.5rem .95rem;border:0;background:transparent;color:var(--text2);cursor:pointer;white-space:nowrap}
.mon-seg button+button{border-left:1px solid var(--gray-border)}
.mon-seg button:hover{color:var(--text)}
.mon-seg button.on{background:var(--lia-light);color:var(--text);font-weight:700;box-shadow:inset 0 -2px 0 var(--lia)}
.mon-seg button:focus-visible{outline:2px solid var(--lia);outline-offset:-2px}

/* faixa de estado: bloco no fluxo, não toast */
.mon-faixa{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;margin-bottom:1rem;border-radius:var(--radius);border:1px solid var(--gray-border)}
.mon-faixa>svg{flex:0 0 20px;margin-top:1px}
.mon-faixa>div{min-width:0;overflow-wrap:anywhere}
.mon-faixa b{display:block;font-size:.92rem}
.mon-faixa-sub{font-size:.8rem;margin-top:.15rem;opacity:.92}
.mon-faixa.ok{background:var(--surface-ok);border-color:var(--border-ok);color:var(--on-ok)}
.mon-faixa.warn{background:var(--surface-warn);border-color:var(--border-warn);color:var(--on-warn)}
.mon-faixa.danger{background:var(--surface-danger);border-color:var(--border-danger);color:var(--on-danger)}

.mon-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin-bottom:1.25rem;align-items:stretch}
.mon-kpis>.d-card{margin:0}
.mon-kpi{display:flex;flex-direction:column;gap:.35rem;min-width:0;padding:1rem 1.1rem}
.mon-kpi b{font-size:1.45rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mon-kpi b.mon-kpi-txt{font-size:1rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mon-kpi-sub{font-size:.74rem;color:var(--label-text);margin-top:auto}
.mon-mini{font-size:.74rem;color:var(--label-text)}
.mon-duas{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.mon-duas>.d-card{min-width:0}
.mon .d-card-header{display:flex;align-items:center;justify-content:space-between;gap:.6rem}

/* ranking: barra horizontal de uma cor só (uma série — o título diz o que é) */
.mon-rank{display:flex;flex-direction:column;gap:.65rem}
.mon-rrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .75rem;align-items:baseline}
.mon-rnome{font-size:.84rem;color:var(--text);min-width:0;overflow-wrap:anywhere}
.mon-rval{font-size:.84rem;font-weight:700;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.mon-rsub{font-size:.72rem;color:var(--label-text);font-weight:500;white-space:nowrap}
.mon-rbar{grid-column:1/-1;height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden}
.mon-rbar i{display:block;height:100%;border-radius:4px;background:var(--lia);min-width:2px}
.mon-vazio{font-size:.82rem;color:var(--label-text);padding:.3rem 0}

/* série no tempo: colunas; o valor do eixo mora numa margem à esquerda pra não
   cobrir a coluna mais alta (que é justo a do valor máximo) */
.mon-serie{position:relative;height:190px;display:flex;align-items:flex-end;gap:2px;padding:0 0 22px 64px;border-bottom:1px solid var(--gray-border)}
.mon-col{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;position:relative}
.mon-col i{display:block;width:100%;max-width:34px;background:var(--lia);border-radius:4px 4px 0 0}
.mon-col:hover i,.mon-col:focus i{background:var(--lia-dark)}
.mon-col:focus{outline:none}
.mon-col span{position:absolute;bottom:-20px;font-size:.68rem;color:var(--label-text);white-space:nowrap}
.mon-eixo{position:absolute;left:0;right:0;border-top:1px dashed var(--gray-border);pointer-events:none}
.mon-eixo em{position:absolute;left:0;top:-8px;width:58px;font-size:.68rem;font-style:normal;color:var(--label-text);white-space:nowrap;text-align:right;line-height:16px}
.mon-serie-vazio{position:absolute;left:64px;right:0;top:40%;text-align:center}
.mon-tip{position:fixed;z-index:60;pointer-events:none;padding:.5rem .7rem;border-radius:9px;font-size:.78rem;color:var(--text);
  background:var(--white);border:1px solid var(--gray-border);box-shadow:0 8px 24px rgba(0,0,0,.18);white-space:nowrap}
.mon-tip span{display:block;color:var(--label-text);font-size:.72rem}
.mon-tip b{display:block;font-size:.92rem}
.mon-tabela{margin-top:.8rem;overflow-x:auto;max-width:100%}
.mon-tabela table{width:100%;border-collapse:collapse;font-size:.8rem}
.mon-tabela th{text-align:center;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--label-text);background:var(--panel-2);padding:.5rem .6rem;border-bottom:1px solid var(--gray-border)}
.mon-tabela td{padding:.45rem .6rem;border-bottom:1px solid var(--gray-border);white-space:nowrap;color:var(--text)}
.mon-tabela td.n{text-align:right;font-variant-numeric:tabular-nums}

.mon-zlist{display:flex;flex-direction:column;gap:.55rem}
.mon-zrow{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;color:var(--text)}
.mon-zrow>svg{flex:0 0 15px;margin-top:2px;color:var(--red)}
.mon-zrow small{display:block;color:var(--label-text);font-size:.74rem}
.mon-nota h3{margin:0 0 .5rem;font-size:.95rem;color:var(--text)}
.mon-nota ul{margin:0;padding-left:1.1rem;font-size:.82rem;line-height:1.55;color:var(--text)}
.mon-nota li+li{margin-top:.35rem}

@media (max-width:760px){.mon-duas{grid-template-columns:1fr;gap:0}}
@media (max-width:520px){
  .mon-seg{align-self:stretch}.mon-seg button{flex:1 1 0;padding:.5rem .3rem}
  .mon-kpis{grid-template-columns:1fr 1fr}.mon-kpi b{font-size:1.15rem}
  .mon-serie{height:160px;padding-left:56px}.mon-eixo em{width:50px}.mon-serie-vazio{left:56px}
}

/* ── Contatos › Importar CSV (22/10/2026) ───────────────────────────────── */
.ct-acoes{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.ct-acoes .btn{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.imp-modal{max-width:620px;max-height:calc(100vh - 2rem);overflow-y:auto}
.imp-drop{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;
  padding:1.4rem 1rem;border:1.5px dashed var(--gray-border);border-radius:12px;background:var(--gray-bg);
  color:var(--text2);cursor:pointer;transition:border-color .15s,background .15s}
.imp-drop:hover,.imp-drop.ativo{border-color:var(--lia);background:var(--lia-light);color:var(--lia)}
.imp-drop input{display:none}
.imp-drop-tit{font-size:.85rem;font-weight:600;color:var(--text);word-break:break-word}
.imp-drop-sub{font-size:.75rem;color:var(--text2)}
.imp-link{background:none;border:0;padding:0;font:inherit;color:var(--on-lia-tint);font-weight:600;cursor:pointer;text-decoration:underline}
.imp-resumo{margin-top:1rem;display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--text)}
.imp-colunas{font-size:.75rem;color:var(--text2);display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-top:.2rem}
.imp-colunas span{background:var(--lia-light);color:var(--text);border-radius:6px;padding:.1rem .45rem;font-weight:600}
.imp-previa{margin-top:.8rem}
.imp-previa .data-table{display:table;width:100%;min-width:0}   /* .dash-content table vira block */
.imp-previa .data-table th{text-align:center;color:var(--text2);padding:.55rem .7rem}
.imp-previa .data-table td{padding:.5rem .7rem;font-size:.8rem}
.imp-num{white-space:nowrap;font-family:var(--mono)}
.imp-problemas{margin-top:.8rem;max-height:160px;overflow-y:auto;border:1px solid var(--border-danger);
  background:var(--red-bg);border-radius:9px;padding:.5rem .7rem;font-size:.77rem;color:var(--text)}
.imp-problemas div{padding:.15rem 0}
.imp-problemas span{font-weight:700;color:var(--text);margin-right:.5rem;white-space:nowrap}