@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
/* Tobia — painel admin. Design system v2 (neutros arroxeados + 1 primária violet, Inter). */
:root{
  /* escala neutra (matiz frio, não slate cru) */
  --gray-50:#f8f9fc; --gray-100:#f1f2f7; --gray-200:#e6e8f0; --gray-300:#d4d7e3;
  --gray-400:#9aa0b4; --gray-500:#6b7185; --gray-700:#3a3f52; --gray-900:#16182b;
  /* primária da marca */
  --primary:#6d5efc; --primary-strong:#5646d6; --primary-soft:#eef0ff;
  /* status: par fundo-suave + texto-forte */
  --ok:#067647; --ok-bg:#e7f6ec; --warn:#b45309; --warn-bg:#fdf3e2;
  --danger:#b42318; --danger-bg:#fdeceb; --info:#175cd3; --info-bg:#eaf1fd;
  /* raios e sombras por elevação */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --shadow-xs:0 1px 2px rgba(22,24,43,.05); --shadow-md:0 8px 20px -6px rgba(22,24,43,.14);
  /* aliases legados (views antigas usam var(--brand)/--ink/etc via style inline) */
  --bg:var(--gray-50); --card:#fff; --ink:var(--gray-900); --muted:var(--gray-500);
  --line:var(--gray-200); --brand:var(--primary); --brand-d:var(--primary-strong);
  --radius:var(--radius-md); --shadow:var(--shadow-xs);
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 Inter,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--gray-700);
  background:var(--gray-50);-webkit-font-smoothing:antialiased;font-feature-settings:'cv02','cv03'}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{margin:0 0 .6rem;color:var(--gray-900);font-weight:600;letter-spacing:-.01em}
.muted{color:var(--gray-500)}
.small{font-size:.82rem}
.num,.kpi-n,.fc,.col-count{font-variant-numeric:tabular-nums}
.ic{width:16px;height:16px;flex:none;vertical-align:-3px}
.ic-lg{width:18px;height:18px}

/* ---- shell: sidebar fixa + conteúdo ---- */
body.has-nav{display:flex;min-height:100vh}
.sidebar{width:236px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;background:#fff;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;padding:1rem .7rem;gap:.15rem}
.sidebar__brand{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;color:var(--gray-900);padding:.4rem .6rem 1rem}
.sidebar__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar__nav{display:flex;flex-direction:column;gap:.12rem;flex:1}
.sidebar__nav a{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:var(--radius-sm);color:var(--gray-600);font-weight:500;font-size:.9rem}
.sidebar__nav a:hover{background:var(--gray-100);color:var(--gray-900);text-decoration:none}
.sidebar__nav a.on{background:var(--primary-soft);color:var(--primary-strong)}
.sidebar__nav a .ic{width:17px;height:17px;flex:none}
.nav-badge{margin-left:auto;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.72rem;font-weight:700;text-align:center}
.sidebar__foot{border-top:1px solid var(--gray-200);margin-top:.5rem;padding-top:.7rem;display:flex;flex-direction:column;gap:.5rem;font-size:.86rem}
.sidebar__foot .who{color:var(--gray-500);display:flex;align-items:center;gap:.45rem}
.sidebar__foot .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar__foot .who .ic{width:15px;height:15px;flex:none}
.sidebar__foot .logout{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--gray-500);text-align:left}
.sidebar__foot .logout:hover{color:var(--gray-800)}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
/* Topo mobile (hambúrguer) + drawer: escondidos no desktop, ativados no @media abaixo */
.mtop{display:none}
.mtop__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:38px;border:1px solid var(--gray-200);border-radius:9px;background:#fff;cursor:pointer;padding:0 9px;flex:none}
.mtop__burger span{display:block;height:2px;background:var(--gray-700);border-radius:2px}
.mtop__brand{font-weight:600;font-size:1rem;color:var(--gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-backdrop{display:none}
.sidebar__close{display:none;margin-left:auto;border:0;background:transparent;font-size:1.7rem;line-height:1;color:var(--gray-400);cursor:pointer;padding:0 .2rem}
.owner-badge{background:var(--primary-soft);color:var(--primary-strong);padding:.1rem .5rem;border-radius:999px;font-weight:600;font-size:.68rem}
.switch-form{display:block}
.switch-back{width:100%;background:var(--primary-soft);color:var(--primary-strong);border:1px solid #d6d9ff;border-radius:var(--radius-sm);padding:.4rem .7rem;font-weight:600;font-size:.84rem;cursor:pointer;display:flex;align-items:center;gap:.4rem;justify-content:center}
.switch-back:hover{background:#e2e5ff}
.switch-back .ic{width:15px;height:15px}
.preview-bar{background:var(--warn-bg);border-bottom:1px solid #f7d9a8;color:var(--warn);padding:.55rem 1.5rem;font-size:.86rem;text-align:center}
.preview-bar .linkbtn{background:none;border:0;color:var(--warn);font-weight:600;text-decoration:underline;cursor:pointer;padding:0;font:inherit}

.wrap{max-width:1180px;margin:1.75rem auto;padding:0 1.75rem;width:100%}
body.embed .wrap{max-width:none;margin:1rem auto}
table.list tr.row-link{cursor:pointer}
table.list tr.row-link:hover td{background:var(--gray-50)}
.foot{text-align:center;color:var(--gray-400);font-size:.8rem;padding:2rem}
.page-title{font-size:1.5rem;letter-spacing:-.02em;color:var(--gray-900)}

/* ---- flash / toast ----
   A tarja GRUDA no topo (position:sticky) porque o defeito real nunca foi o tamanho do
   formulário: o bloco do cardápio termina em re-render ($_GET['p'] = 'cardapio') em vez de
   redirect, o navegador RESTAURA a rolagem, e uma tarja em fluxo normal nasce fora da tela.
   Grudada, ela acompanha a pessoa onde ela estiver, sem bloquear e sem custar clique. */
/* .flash é só o VISUAL. Quatro views usam essa classe para avisos ESTÁTICOS dentro de
   cards (evento.php:126, eventos.php:41, produtos.php:44): grudar essas no topo faria
   elas flutuarem fora do lugar. Quem gruda é só a tarja de PÁGINA, abaixo. */
.flash{padding:.85rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-weight:600;
  border:1px solid transparent;display:flex;align-items:center;gap:.55rem}
.flash svg{width:19px;height:19px;flex:none}
/* a tarja de página, a que responde "salvou ou não": essa sim acompanha a rolagem */
.flash--topo{position:sticky;top:0;z-index:40;padding-right:2.6rem;box-shadow:var(--shadow-md)}
.flash-error{background:var(--danger-bg);color:var(--danger);border-color:#f6cdc9}
/* `ok` é o tipo que 51 das 52 confirmações do painel usam, e ele NÃO tinha regra: toda
   mensagem de sucesso saía sem fundo e sem borda, texto solto. Era a razão de "não dá
   pra saber que a alteração foi salva". `success` fica junto porque há 1 uso dele. */
.flash-ok,
.flash-success{background:var(--ok-bg);color:var(--ok);border-color:#bfe6cc}
/* o X se posiciona contra a própria tarja: position:sticky já cria bloco de contenção */
.flash__x{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;color:inherit;opacity:.5;font-size:1.4rem;line-height:1;padding:0 .45rem;border-radius:6px}
.flash__x:hover{opacity:1;background:rgba(0,0,0,.06)}
.flash__x:focus-visible{outline:2px solid currentColor;outline-offset:1px}
@media (prefers-reduced-motion:reduce){.flash{transition:none}}
#toast-wrap{position:fixed;top:18px;right:18px;z-index:1000;display:flex;flex-direction:column;gap:.5rem;max-width:360px}
.toast{background:#fff;border:1px solid var(--gray-200);border-left:3px solid var(--gray-400);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);padding:.7rem .9rem;display:flex;align-items:center;gap:.6rem;color:var(--gray-700);font-weight:500;
  animation:toast-in .16s ease-out}
.toast.ok{border-left-color:var(--ok)} .toast.err{border-left-color:var(--danger)} .toast.info{border-left-color:var(--info)}
.toast svg{width:18px;height:18px;flex:none}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.toast.out{opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s}

/* ---- modal (confirm estilizado + modais do board) ---- */
.modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(22,24,43,.45)}
/* max-height + corpo rolável: sem isto uma mensagem longa empurra o botão OK pra fora
   da tela e o modal reproduz DENTRO dele o defeito que veio consertar, agora com a
   página bloqueada por trás. */
.modal-card{background:#fff;border-radius:14px;padding:1.4rem 1.4rem 1.2rem;width:min(400px,92vw);
  box-shadow:0 20px 50px rgba(0,0,0,.28);max-height:min(84vh,640px);display:flex;flex-direction:column}
.modal-card__corpo{overflow-y:auto;min-height:0}
.modal-card .modal-actions{flex:none}
@media print{.modal-backdrop{display:none!important}}
.modal-card h2{margin:0 0 .2rem;font-size:1.1rem}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.1rem}

/* ---- empty states ---- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;padding:2.4rem 1rem;color:var(--gray-500)}
.empty .empty-ic{width:40px;height:40px;color:var(--gray-300)}
.empty-title{font-weight:600;color:var(--gray-700)}
.empty-sub{font-size:.85rem;max-width:38ch;margin:0}
.empty .btn-link{margin-top:.4rem}
.empty-row td{padding:0}
.col-empty{border:1.5px dashed var(--gray-200);border-radius:var(--radius-sm);padding:1.1rem .6rem;text-align:center;color:var(--gray-400);font-size:.8rem}

.nowrap{white-space:nowrap}

/* ---- termômetro do lead (frio / morno / quente) ---- */
.therm{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;vertical-align:middle;cursor:default}
.therm-frio{background:var(--info-bg);color:var(--info)}
.therm-morno{background:var(--warn-bg);color:var(--warn)}
.therm-quente{background:var(--danger-bg);color:var(--danger)}

/* ---- KPIs ---- */
/* KPI compacto: mesmo tamanho dos cards de insight (.fin-ins), pra não ter dois
   tamanhos de card brigando na mesma tela. Grid auto-fit = quantos couberem. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-bottom:1.1rem}
.kpi{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:.6rem .75rem;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:.1rem}
.kpi-n{display:block;font-size:1.15rem;font-weight:600;letter-spacing:-.01em;color:var(--gray-900);margin-top:0}
.kpi-l{color:var(--gray-500);font-size:.72rem}

/* ---- panels / grid ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.panel{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:1.25rem;box-shadow:var(--shadow-xs)}
.panel h2{font-size:.95rem;color:var(--gray-900);font-weight:600;text-transform:none;letter-spacing:-.01em}

/* ---- funnel ---- */
.funnel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.funnel li{display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:.6rem}
.fname{display:flex;align-items:center;gap:.4rem;font-size:.88rem}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.bar{background:var(--gray-100);border-radius:999px;height:8px;overflow:hidden}
.bar>span{display:block;height:100%;border-radius:999px;min-width:2px}
.fc{font-weight:600}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse}
table.mini td{padding:.4rem 0;border-bottom:1px solid var(--gray-100)}
table.list{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-xs)}
table.list th{text-align:left;font-size:.75rem;text-transform:none;letter-spacing:0;color:var(--gray-500);font-weight:500;padding:.7rem 1rem;background:var(--gray-50);border-bottom:1px solid var(--gray-200)}
table.list td{padding:.8rem 1rem;border-bottom:1px solid var(--gray-100);font-variant-numeric:tabular-nums}
table.list tr:last-child td{border-bottom:0}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:.35rem;color:#fff;padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:500;white-space:nowrap}
.badge.big{font-size:.85rem;padding:.3rem .8rem}
.status-ativo{background:var(--ok-bg);color:var(--ok)}
.status-trial{background:var(--warn-bg);color:var(--warn)}
.status-suspenso{background:var(--danger-bg);color:var(--danger)}
/* Estado NOVO (migr 0095): entre trial e suspenso. Precisa de cor PRÓPRIA porque as três
   coisas que ele significa são diferentes: trial ainda não paga, inadimplente devia ter
   pago, suspenso foi desligado por decisão humana. Sem classe, o badge sairia cinza e o
   estado mais importante de ver na lista seria o menos visível. */
.status-inadimplente{background:#fdece2;color:#9a3412}
/* .badge sozinho é texto branco sem fundo (espera um modificador de status): este é o
   "apagado" de quem não está no ar (rascunho, encerrado, recusado). */
.badge.ev-off{background:var(--gray-100);color:var(--gray-500)}
/* Badge NEUTRO. O .badge sozinho tem color:#fff e NENHUM fundo, então usado puro ele sai
   branco no branco e some. Toda variante existente traz o próprio fundo; faltava uma pra
   estado sem cor (em aberto, cancelada, um rótulo de categoria). Existia só a .ev-off, que
   faz exatamente isto mas com nome de evento desligado. */
.badge--neutro{background:var(--gray-100);color:var(--gray-500)}
/* Vencida é o único estado da tela que pede ação HOJE, então é o único com fundo cheio.
   Não é enfeite: a linha inteira da fatura vencida já é pintada com --danger-bg, e o badge
   status-suspenso (que usa esse MESMO --danger-bg) sumia dentro dela. */
.badge--vencida{background:var(--danger);color:#fff}
.recorr{color:var(--warn);font-weight:600;font-size:.8rem}
.recorr.small{font-size:.72rem}

/* ---- filters / forms ---- */
input,select,textarea,button{font:inherit}
input,select,textarea{padding:.55rem .7rem;border:1px solid var(--gray-300);border-radius:var(--radius-sm);background:#fff;width:100%;color:var(--gray-900)}
input[type=radio],input[type=checkbox]{width:auto;padding:0;border:0;background:none;box-shadow:none}   /* radio/checkbox nativos: a regra acima não deve inflá-los */
input::placeholder,textarea::placeholder{color:var(--gray-400)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(109,94,252,.15)}
button,.btn{cursor:pointer;background:var(--primary);color:#fff;border:0;border-radius:var(--radius-sm);padding:.6rem 1rem;font-weight:600}
/* .btn como CLASSE, e não só o elemento button: a regra existia apenas para <button>, então
   todo <a class="btn"> do painel saía como link de texto azul no meio de um card, sem cara de
   ação. Apareceu na tela de Campanhas (os "Criar" dos cards de canal) e valia igual em Sites e
   nas outras 7 ocorrências. <a> não herda color de button, daí o color explícito abaixo. */
a.btn{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:#fff}
a.btn:hover{color:#fff;text-decoration:none;filter:brightness(1.06)}
button:hover{background:var(--primary-strong)}
button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
button:disabled{opacity:.5;cursor:not-allowed}
button.danger{background:var(--danger)}button.danger:hover{background:#98271e}
.filters{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center}
.filters input[type=search]{flex:1 1 260px;min-width:230px}
.filters input[type=date]{width:auto;flex:0 0 auto}
.filters select{width:auto}
.filters button{width:auto}

/* ---- hint: a explicação curta que acompanha o rótulo ----
   72 pontos das views usam .hint e a regra nunca existiu aqui: a ajuda saía no mesmo
   tamanho, peso e cor do <label>, então o formulário tinha dois textos disputando a
   mesma hierarquia. A produtos.php tinha uma cópia local (no <style> da própria view,
   sem escopo, portanto vazando pro resto da página); esta é aquela regra promovida ao
   design system, e a cópia local saiu.
   `display:block` é no-op onde o label já é flex-column — que é a maioria dos casos.
   Onde o hint PRECISA continuar na mesma linha (botão + aviso, título + " · resumo"),
   use .hint--inline: são 4 pontos. Em pai flex o modificador é inócuo (item de flex
   blocka de qualquer jeito), e é justamente isso que faz o _lead_busca.php servir aos
   seus dois hosts com uma marcação só — ver a entrada .hint no inventario-data.php. */
.hint{display:block;font-size:.8rem;font-weight:400;color:var(--gray-500);line-height:1.35}
.hint--inline{display:inline}

/* ---- busca de cliente (typeahead) ----
   Substitui o <select> de leads. Com 20 clientes um select resolve; com 800 o nome
   certo some no meio, e ainda por cima o select só casa pelo começo da palavra. */
/* ---- atendimento humano na conversa (dono, fila, janela de 24h) ---- */
.cv-pill{display:inline-block;min-width:18px;padding:0 .35rem;border-radius:999px;background:var(--primary);color:#fff;font-size:.7rem;font-weight:600;line-height:18px;text-align:center;vertical-align:1px}
.btn-soft.on .cv-pill{background:#fff;color:var(--primary-strong)}
.cv-meu{color:var(--primary-strong);font-weight:600}
/* o relógio da janela: cinza enquanto sobra tempo, vermelho quando aperta. É a cor que
   faz o vendedor ligar agora em vez de deixar pra depois. */
.cv-janela{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;font-size:.75rem;color:var(--gray-500);margin-left:.35rem}
.cv-janela--fim{color:var(--danger);font-weight:600}
.cv-janela--off{color:var(--gray-400)}
.cv-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cv-bar__quem{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cv-bar__acoes{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.cv-aviso{display:flex;align-items:flex-start;gap:.45rem;background:var(--warn-bg);color:var(--warn);border-radius:var(--radius-md);padding:.6rem .8rem;font-size:.85rem;margin:.6rem 0 0}
.cv-transf .menu__box{right:auto;left:0;min-width:180px}
/* o visual da nota interna e dos balões mora no bloco "conversas com cara de WhatsApp",
   lá embaixo, junto do resto do fio. */

/* diagnóstico da chave de IA (painel do dono): qual chave está valendo agora */
.ai-key-box{border:1px solid var(--gray-200);border-radius:var(--radius-md);background:var(--gray-50);padding:.7rem .8rem;max-width:560px}

/* orçamentos do cliente, na ficha do lead */
.lead-orcs{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.45rem}
.lead-orcs li{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}

.tah-field{display:flex;flex-direction:column;gap:.2rem}
.tah-field>label{margin:0}
.tah{position:relative;display:flex;gap:.4rem;align-items:center;margin-top:auto}
.tah>input[type=text]{flex:1;min-width:0}
.tah>button{flex:none}
.tah-pop{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-height:288px;overflow-y:auto;padding:.25rem}
/* A opção é <div role="option">, NÃO <button>, de propósito: <button> se dimensiona
   pelo conteúdo e ignora width:100%, então um e-mail comprido (uma "palavra" só)
   estica a opção pra fora do card em vez de cortar com reticências. Medido: 447px
   de botão contra 270px de div no mesmo lugar. */
.tah-op{display:block;width:100%;padding:.4rem .55rem;border-radius:var(--radius-sm);cursor:pointer;overflow:hidden}
.tah-op:hover,.tah-op.on{background:var(--gray-100)}
/* nome e selo na mesma linha, mas quem encolhe é o nome: o selo "parecido" avisa que o
   resultado veio por semelhança, e sumir justo nos nomes longos é perder o aviso */
.tah-op__t{display:flex;align-items:center;gap:.35rem;min-width:0}
.tah-op b,.tah-op span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tah-op b{flex:1;min-width:0;color:var(--gray-900);font-weight:600;font-size:.88rem}
.tah-op span{display:block;font-size:.78rem;color:var(--gray-500)}
.tah-op em{flex:none;font-style:normal;font-size:.68rem;color:var(--gray-500);border:1px solid var(--gray-200);border-radius:999px;padding:0 .35rem}
.tah-nada{padding:.5rem .55rem;font-size:.83rem;color:var(--gray-500)}

/* ---- menu dropdown (details/summary, sem JS de framework) ---- */
.menu{position:relative}
.menu>summary{list-style:none;display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--gray-300);color:var(--gray-700);border-radius:var(--radius-sm);padding:.45rem .75rem;font-weight:500;font-size:.82rem;cursor:pointer;white-space:nowrap;user-select:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{background:var(--gray-50)}
.menu-list{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);box-shadow:var(--shadow-md);min-width:210px;padding:.35rem;z-index:200;display:flex;flex-direction:column}
.menu-list a{padding:.5rem .7rem;border-radius:8px;color:var(--gray-700);text-decoration:none;font-weight:500;font-size:.85rem;display:flex;align-items:center;gap:.55rem}
.menu-list a:hover{background:var(--gray-50);color:var(--gray-900)}
.pager{display:flex;gap:.3rem;margin-top:1rem;flex-wrap:wrap}
.pager a{padding:.35rem .7rem;border:1px solid var(--gray-300);border-radius:var(--radius-sm);background:#fff;color:var(--gray-700)}
.pager a:hover{background:var(--gray-50);text-decoration:none}
.pager a.on{background:var(--primary);color:#fff;border-color:var(--primary)}

/* lead detail */
.lead-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.row-form{display:flex;gap:.5rem;margin-top:.8rem;align-items:center;flex-wrap:wrap}
.row-form select{width:auto;flex:1}
.row-form button{width:auto;white-space:nowrap}
.row-label{flex:0 0 auto;min-width:96px;color:var(--gray-700,#374151);font-size:.85rem}
.note-form{margin-bottom:1rem}
.note-form textarea{margin-bottom:.5rem}
.note-form button{width:auto}
.timeline{list-style:none;margin:0;padding:0 .45rem 0 0;display:flex;flex-direction:column;gap:.8rem;max-height:360px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent}
.timeline::-webkit-scrollbar{width:9px}
.timeline::-webkit-scrollbar-track{background:transparent}
.timeline::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:6px}
.timeline::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}
.timeline li{border-left:2px solid var(--gray-200);padding:.1rem 0 .1rem .85rem}
.timeline li.t-sistema{border-color:var(--gray-400)}
.timeline li.t-status{border-color:var(--primary)}
.timeline li.t-nota{border-color:var(--ok)}
.timeline li.t-chat{border-color:var(--info)}
.timeline li.t-tarefa{border-color:var(--warn)}
.t-meta{font-size:.72rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.03em}
.t-meta .ic{width:13px;height:13px;vertical-align:-2px;margin-right:1px}
.tl-filters .btn-soft{padding:.15rem .55rem;font-size:.75rem}
.tl-filters .btn-soft.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.form-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:1.25rem;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:.85rem;max-width:520px}
.form-card label{display:flex;flex-direction:column;gap:.3rem;font-weight:500;font-size:.82rem;color:var(--gray-700)}
.form-card button{width:auto;align-self:flex-start;margin-top:.4rem}

/* ---- botões secundários / detalhes ---- */
.btn-link{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border:1px solid var(--gray-300);border-radius:var(--radius-sm);background:#fff;color:var(--gray-700);font-weight:600}
.btn-link:hover{background:var(--gray-50);text-decoration:none}
.lead-head__actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.view-toggle{display:inline-flex;border:1px solid var(--gray-300);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.view-toggle button{padding:.45rem .95rem;color:var(--gray-500);font-weight:500;font-size:.85rem;background:#fff;border:0;cursor:pointer;border-radius:0}
.view-toggle button:hover{background:var(--gray-50)}
.view-toggle button.on{background:var(--primary);color:#fff}
.view-toggle button.on:hover{background:var(--primary-strong)}
.lead-head__left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.btn-soft{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--gray-300);color:var(--gray-700);border-radius:var(--radius-sm);padding:.45rem .75rem;font-weight:500;font-size:.82rem;cursor:pointer;white-space:nowrap}
.btn-soft:hover{background:var(--gray-50)}
.btn-soft.danger-soft{color:var(--danger);border-color:#f0c9c5}
.btn-soft.danger-soft:hover{background:var(--danger-bg)}
.rowlink-name{color:var(--gray-900);font-weight:500}
.etapa-add input[name=name]{flex:1}
.etapa-add input[type=color],.etapa-edit input[type=color]{width:40px;height:38px;padding:2px;flex:none;cursor:pointer}
.etapas-list{display:flex;flex-direction:column;gap:.5rem;max-width:760px}
.etapa-item{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:.6rem .8rem;box-shadow:var(--shadow-xs)}
.etapa-edit{display:flex;align-items:center;gap:.5rem;flex:1;flex-wrap:wrap}
.etapa-edit input[name=name]{flex:1;min-width:130px}
.etapa-edit button{width:auto}
.etapa-cli{display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--gray-500);font-weight:500;white-space:nowrap}
.etapa-cli input{width:auto}
.etapa-ord{display:flex;gap:.3rem;flex:none}
.etapa-ord form{display:inline}
.etapa-ord .btn-soft{padding:.35rem .55rem}
details > summary{cursor:pointer}
.newacc{margin-bottom:1rem}
.newacc-form{padding-top:1rem}
.newacc-form .filters{flex-wrap:wrap}
.form-card.bare{box-shadow:none;border:0;padding:0;background:transparent}
.form-card.wide{max-width:none}
.acc-actions{display:flex;gap:.5rem;align-items:stretch}

/* ---- toggle de feature (switch iOS-style) ---- */
.feature-toggle{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:.85rem 1rem;margin-bottom:.6rem;cursor:pointer}
/* grid de features: boxes compactos, varios por linha (ocupa menos vertical) */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem;margin:.2rem 0 .6rem;align-items:start}
.feature-group-title{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500);margin:1.1rem 0 .45rem;padding-bottom:.3rem;border-bottom:1px solid var(--gray-100)}
.feature-group-title:first-of-type{margin-top:.4rem}
/* card "Notificação" com o e-mail do aviso embutido (revela quando ligado) */
.form-card .feature-grid .feature-toggle--compact.feat-notif{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.5rem}
.feat-notif__row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%}
.form-card .feature-grid .feat-notif__field{display:none;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--gray-500);cursor:text}
.form-card .feature-grid .feat-notif.on .feat-notif__field{display:flex}
.feat-notif__field input{width:100%;font-size:.8rem;padding:.4rem .5rem;border:1px solid var(--gray-300);border-radius:var(--radius-sm);background:#fff;color:var(--gray-900)}
.form-card .feature-grid .feature-toggle--compact{flex-direction:row;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .7rem;margin:0;min-height:0}
.feature-grid .feature-toggle--compact .feature-toggle__text{flex-direction:row;align-items:center;gap:.3rem}
.feature-grid .feature-toggle--compact .feature-toggle__text strong{font-size:.8rem;line-height:1.25}
.feature-toggle__text{display:flex;flex-direction:column;gap:.15rem}
.feature-toggle__text strong{color:var(--gray-900);font-weight:600}
.feature-toggle__text small{color:var(--gray-500);font-size:.82rem}
/* A ajuda de cada recurso é um title= nativo no card (sem tooltip customizado). */
.switch{position:relative;flex:none;width:44px;height:24px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__slider{position:absolute;inset:0;background:var(--gray-300);border-radius:999px;transition:background .2s}
.switch__slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(22,24,43,.25);transition:transform .2s}
.switch input:checked + .switch__slider{background:var(--primary)}
.switch input:checked + .switch__slider::before{transform:translateX(20px)}
.switch input:focus-visible + .switch__slider{outline:2px solid var(--primary);outline-offset:2px}

/* ---- contas (owner) ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.acc-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:1.1rem;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:.5rem}
.acc-head{display:flex;justify-content:space-between;align-items:center}
.acc-card button{width:100%;margin-top:.3rem}
.svc-toggles{display:flex;flex-direction:column;gap:.45rem;margin:.5rem 0 .2rem;padding:.55rem .7rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm)}
.svc{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;font-weight:500;color:var(--gray-900)}
.svc small{color:var(--gray-500);font-weight:400}

/* ---- INBOX DE CONVERSAS: três colunas com cara de WhatsApp Web -----------------------
   fila (esquerda) | conversa (meio) | notas da equipe (direita, mais estreita).
   Quem atende passa o dia dentro do aplicativo, então esta tela fala a mesma língua e não
   sobra nada pra aprender. As três colunas rolam SOZINHAS dentro de uma altura fixa: é o
   que faz a fila continuar à vista enquanto se lê uma conversa de duas semanas.
   A COLUNA DA DIREITA existe por um motivo concreto: a caixa de nota interna morava no fim
   da página, logo abaixo da conversa, e quem chegava ali achava que era onde se continua
   falando com o cliente. Nota é papel da equipe, e agora ela mora onde papel de equipe mora,
   longe do campo de responder.
   O SENTIDO dos balões é o de quem ATENDE: 'assistant' (nós, robô ou gente) à direita e o
   cliente à esquerda. É o inverso do widget do site, onde quem fala é o visitante. */
/* A ALTURA sai do flex, não de conta em pixel. A primeira versão media a janela no
   JavaScript e descontava rodapé e margens na mão; errava sempre que a conta tinha um aviso
   a mais no topo (tarja de teste, loja fechada, faixa de pré-visualização), e ainda dependia
   de um querySelector('.foot') que rodava antes de o rodapé existir. Aqui a coluna do painel
   estica e o inbox toma o que sobrar, com qualquer combinação de avisos. */
body.wa-page{min-height:100vh}
body.wa-page .content{min-height:100vh}
body.wa-page .wrap{flex:1 0 auto;display:flex;flex-direction:column;min-height:0}
body.wa-page .foot{display:none}   /* "Marca · CRM" é decoração e custa ~100px de tela útil */
.wa-app{display:flex;flex:1 1 auto;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);overflow:hidden;min-height:440px}
.wa-col{display:flex;flex-direction:column;min-width:0;min-height:0}
.wa-col--fila{width:296px;flex:none;border-right:1px solid var(--gray-200)}
.wa-col--fio{flex:1}
.wa-col--lado{width:288px;flex:none;border-left:1px solid var(--gray-200);background:var(--gray-50)}
.wa-app:not(.wa-app--lado) .wa-col--lado{display:none}
.wa-topo{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-bottom:1px solid var(--gray-200);
  background:var(--gray-50);min-height:56px}
.wa-topo h2{margin:0;font-size:1rem}
.wa-rola{flex:1;min-height:0;overflow-y:auto}
.wa-sub{color:var(--gray-500);font-size:.78rem;display:block;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-back{display:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:var(--gray-500);flex:none}
.wa-back:hover{background:var(--gray-200);color:var(--gray-900);text-decoration:none}

/* avatar de iniciais. A cor sai do próprio nome (crc32), então a mesma pessoa tem sempre a
   mesma cor e a fila fica reconhecível de relance, que é todo o trabalho dele aqui. */
.wa-av{width:40px;height:40px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.85rem;color:#fff;background:var(--gray-400);user-select:none}
.wa-av--0{background:#6d5efc}.wa-av--1{background:#0f9b8e}.wa-av--2{background:#d98324}
.wa-av--3{background:#d0557b}.wa-av--4{background:#4a86e8}.wa-av--5{background:#77953c}

/* ---- coluna 1: a fila ---- */
/* as abas QUEBRAM em vez de rolarem de lado: na coluna estreita, cinco abas não cabem numa
   linha, e a rolagem horizontal escondia "Todas" e "Encerradas" sem nenhum sinal na tela. */
.wa-chips{display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem .6rem;border-bottom:1px solid var(--gray-200)}
.wa-chips .btn-soft{border-radius:999px;padding:.22rem .6rem;font-size:.75rem}
/* sem esta regra a aba ATIVA ficava idêntica às inativas, e ainda por cima o contador dela
   sumia: .btn-soft.on .cv-pill pinta o número de branco contando com um fundo sólido que
   nunca chegou a existir. */
.wa-chips .btn-soft.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.wa-row{position:relative;display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-bottom:1px solid var(--gray-100)}
.wa-row:last-child{border-bottom:0}
.wa-row:hover{background:var(--gray-50)}
.wa-row--off{opacity:.62}
/* a conversa ABERTA fica marcada: sem isso, a coluna da esquerda vira uma lista qualquer e
   ninguém sabe qual delas está no meio da tela. */
.wa-row--on,.wa-row--on:hover{background:var(--primary-soft)}
.wa-row--on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
/* a linha INTEIRA abre a conversa (link esticado); botão e atalho da ficha sobem de camada
   pra continuarem clicáveis por cima dele. */
.wa-row__hit{position:absolute;inset:0;z-index:0}
.wa-row__mid{flex:1;min-width:0}
.wa-row__top{display:flex;align-items:baseline;gap:.4rem}
.wa-row__nome{font-weight:600;font-size:.88rem;color:var(--gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-row__hora{margin-left:auto;flex:none;font-size:.7rem;color:var(--gray-400);white-space:nowrap}
.wa-row__prev{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gray-500);font-size:.8rem;margin-top:.1rem}
.wa-row__tags{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;margin-top:.2rem}
.wa-row__tags .badge{font-size:.66rem;padding:.05rem .4rem}
.wa-row__tags .cv-janela{margin-left:0;font-size:.7rem}
.wa-row__btn{position:relative;z-index:1;flex:none;padding:.25rem .6rem;font-size:.75rem}
.wa-vazio{padding:2rem 1rem;text-align:center;color:var(--gray-500);font-size:.86rem}

/* ---- coluna 2: o fio ---- */
.wa-fio__id{min-width:0;flex:1}
.wa-fio__id strong{display:block;font-size:.95rem;color:var(--gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-fio__acoes{display:flex;align-items:center;gap:.35rem;flex:none}
.wa-fio__acoes .btn-soft,.wa-fio__acoes .menu>summary{padding:.35rem .65rem;font-size:.78rem}
.wa-nada{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  color:var(--gray-500);text-align:center;padding:2rem;background:#f7f5f2}
.wa-nada .ic{width:40px;height:40px;color:var(--gray-300)}
.wa-thread{flex:1;min-height:0;overflow-y:auto;padding:1rem .9rem;display:flex;flex-direction:column;gap:.35rem;
  background-color:#efeae2;background-size:150px 150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='.05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 22h20v13H27l-6 6v-6h-3z'/%3E%3Ccircle cx='106' cy='28' r='9'/%3E%3Cpath d='M101 28l4 4 7-8'/%3E%3Cpath d='M28 74l7-9 7 9'/%3E%3Cpath d='M22 92h26M22 99h18'/%3E%3Ccircle cx='84' cy='86' r='11'/%3E%3Cpath d='M84 80v7l4 3'/%3E%3Cpath d='M118 108h20v13h-9l-6 6v-6h-5z'/%3E%3Cpath d='M58 122l6-7 6 7'/%3E%3Cpath d='M132 58l7 7-7 7-7-7z'/%3E%3C/g%3E%3C/svg%3E")}
.wa-dia{align-self:center;background:#fff;color:var(--gray-500);font-size:.68rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:.2rem .75rem;border-radius:999px;box-shadow:0 1px 1px rgba(11,20,26,.1);margin:.55rem 0 .3rem}
.wa-msg{display:flex;max-width:82%}
.wa-msg--in{align-self:flex-start}
.wa-msg--out{align-self:flex-end}
.wa-b{position:relative;min-width:108px;padding:.4rem .62rem 1.05rem;border-radius:8px;font-size:.88rem;line-height:1.4;color:#111b21;
  box-shadow:0 1px .5px rgba(11,20,26,.13);overflow-wrap:anywhere}
.wa-msg--in  .wa-b{background:#fff;border-top-left-radius:0}
.wa-msg--out .wa-b{background:#d9fdd3;border-top-right-radius:0}
/* o rabinho do balão: é ele que faz o olho reconhecer "isto é conversa de WhatsApp" antes
   de ler qualquer palavra. */
.wa-msg--in .wa-b::before,.wa-msg--out .wa-b::after{content:"";position:absolute;top:0;width:9px;height:14px}
.wa-msg--in .wa-b::before{left:-9px;background:#fff;clip-path:polygon(100% 0,100% 100%,0 0)}
.wa-msg--out .wa-b::after{right:-9px;background:#d9fdd3;clip-path:polygon(0 0,0 100%,100% 0)}
/* QUEM respondeu (robô ou gente, e qual gente) é o que mais muda a conduta de quem abre a
   tela, então vai dentro do balão, no lugar do nome do remetente. */
.wa-quem{display:block;font-size:.72rem;font-weight:600;color:#1f7a63;margin-bottom:.1rem}
.wa-quem--ia{color:var(--primary-strong)}
.wa-hora{position:absolute;right:.55rem;bottom:.28rem;font-size:.67rem;color:#667781;line-height:1;font-variant-numeric:tabular-nums}
/* nota interna NÃO é balão, de propósito: se parecesse mensagem, alguém escreveria ali
   achando que o cliente lê. */
.wa-nota{align-self:center;max-width:90%;background:#fff8db;border:1px dashed #e0b34a;color:#7a5a12;border-radius:8px;
  padding:.45rem .7rem;font-size:.83rem;line-height:1.4;box-shadow:0 1px .5px rgba(11,20,26,.08)}
.wa-nota__cab{display:flex;align-items:center;gap:.3rem;font-size:.69rem;font-weight:600;margin-bottom:.15rem;color:#8a6216}
.wa-nota__cab .ic{width:13px;height:13px}

/* rodapé do fio: barra do robô e caixa de escrever */
.wa-bot{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;
  padding:.45rem .8rem;background:var(--gray-50);border-top:1px solid var(--gray-200);font-size:.8rem}
.wa-bot .btn-soft{padding:.3rem .65rem;font-size:.78rem}
.wa-compose{display:flex;align-items:flex-end;gap:.5rem;padding:.55rem .7rem;background:#f0f2f5;border-top:1px solid var(--gray-200)}
.wa-compose textarea{flex:1;min-width:0;resize:none;max-height:120px;border-radius:20px;padding:.5rem .9rem;font-size:.88rem;line-height:1.35}
.wa-compose button{flex:none;width:38px;height:38px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.wa-compose button .ic{width:17px;height:17px}
.wa-fim{display:flex;align-items:center;gap:.45rem;margin:0;padding:.7rem .9rem;background:var(--gray-50);
  border-top:1px solid var(--gray-200);color:var(--gray-500);font-size:.82rem}
.wa-aviso{display:flex;align-items:flex-start;gap:.4rem;margin:0;padding:.5rem .8rem;background:var(--warn-bg);color:var(--warn);
  font-size:.8rem;border-bottom:1px solid #f2dcb6}

/* ---- coluna 3: notas da equipe ---- */
.wa-lado__corpo{flex:1;min-height:0;overflow-y:auto;padding:.8rem}
.wa-lado__sec{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-400);margin:1.2rem 0 .45rem}
.wa-lado__sec:first-child{margin-top:0}
.wa-nform textarea{font-size:.84rem;resize:vertical;min-height:66px}
.wa-nform button{width:100%;margin-top:.4rem;justify-content:center}
.wa-nform p{margin:.35rem 0 0;font-size:.72rem;color:var(--gray-500);line-height:1.35}
.wa-nlista{display:flex;flex-direction:column;gap:.45rem}
.wa-nitem{background:#fff8db;border:1px solid #ecd9a3;border-radius:var(--radius-sm);padding:.45rem .6rem;font-size:.82rem;
  line-height:1.4;color:#5f4a14;overflow-wrap:anywhere}
.wa-nitem__cab{font-size:.68rem;font-weight:600;color:#8a6216;margin-bottom:.15rem}
.wa-sobre{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem}
.wa-sobre div{display:flex;gap:.4rem;justify-content:space-between;align-items:baseline}
.wa-sobre dt{color:var(--gray-500);flex:none}
.wa-sobre dd{margin:0;text-align:right;color:var(--gray-900);overflow-wrap:anywhere}
.wa-resumo{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:.5rem .6rem;
  font-size:.8rem;line-height:1.45;color:var(--gray-700)}

/* menu de ações (.menu__box/.menu__item existiam na marcação e NÃO no CSS: a lista de
   transferir caía solta na página em vez de abrir como menu). */
.menu__box{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);min-width:210px;padding:.35rem;z-index:200;
  display:flex;flex-direction:column;gap:1px}
.menu__item{background:none;border:0;color:var(--gray-700);font-weight:500;font-size:.84rem;text-align:left;
  padding:.45rem .6rem;border-radius:8px;white-space:nowrap}
.menu__item:hover{background:var(--gray-100);color:var(--gray-900)}
.menu__sec{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-400);padding:.5rem .6rem .2rem}
.cv-transf .menu__box{right:auto;left:0;min-width:180px}

/* ---- telas estreitas: uma coluna de cada vez, como no celular ---- */
@media (max-width:1140px){
  .wa-col--fila{width:250px}
  .wa-col--lado{width:250px}
}
@media (max-width:900px){
  /* Aqui a tela vira UMA coluna só e a navegação passa a ser por página: a fila é uma tela,
     a conversa é outra (com seta de voltar), e as notas são um painel que cobre a conversa.
     Empilhar as três viraria de novo "a caixa de nota no fim da página". */
  body.wa-page .wrap{display:block}
  body.wa-page .foot{display:block}
  /* EMPILHADO (flex-direction:column) e não em linha: com uma coluna só visível, o painel
     continuava sendo uma LINHA e a coluna, sem largura definida, crescia até o tamanho do
     conteúdo e vazava pra fora da tela (o painel de notas saía com metade do texto cortado
     no celular). Em coluna, a única visível estica na largura certa. */
  .wa-app{flex-direction:column;flex:none;min-height:0}
  .wa-col--fila{width:auto;border-right:0}
  .wa-col--lado{width:auto;border-left:0}
  .wa-app--aberta .wa-col--fila{display:none}
  .wa-app:not(.wa-app--aberta) .wa-col--fio{display:none}
  .wa-app--aberta.wa-app--lado .wa-col--fio{display:none}
  .wa-app--aberta.wa-app--lado .wa-col--lado{display:flex}
  .wa-back{display:inline-flex}
  .wa-thread{height:60vh;flex:none}
  /* no celular os botões descem pra uma linha só deles: disputando espaço com o nome, o
     nome do cliente virava "Zé d..." e o topo deixava de dizer com quem se está falando. */
  .wa-topo{flex-wrap:wrap}
  .wa-col--fio .wa-fio__acoes{flex:1 0 100%;justify-content:flex-end;margin-top:.35rem}
  .wa-rola{max-height:none;overflow:visible}
  .wa-msg{max-width:88%}
}
/* ---- board kanban ---- */
.board{display:flex;gap:.85rem;overflow-x:auto;padding-bottom:.85rem;align-items:flex-start;scrollbar-width:thin;scrollbar-color:var(--gray-400) var(--gray-100)}
.board::-webkit-scrollbar{height:12px}
.board::-webkit-scrollbar-track{background:var(--gray-100);border-radius:7px}
.board::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:7px;border:2px solid var(--gray-100)}
.board::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}
.board-nav{display:flex;justify-content:flex-end;gap:.4rem;margin-bottom:.55rem}
.scroll-btn{width:34px;height:30px;border:1px solid var(--gray-300);background:#fff;border-radius:var(--radius-sm);color:var(--gray-700);font-size:1.1rem;line-height:1;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-xs)}
.scroll-btn:hover{background:var(--gray-50)}
.scroll-btn:disabled{opacity:.35;cursor:default}
.col{background:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--radius-md);min-width:250px;width:250px;flex:none}
.col-head{font-weight:600;font-size:.85rem;padding:.6rem .8rem;border-top:3px solid var(--gray-300);border-radius:var(--radius-md) var(--radius-md) 0 0;display:flex;justify-content:space-between;align-items:center;color:var(--gray-700)}
.col-count{color:var(--gray-500);font-weight:500;background:#fff;border-radius:999px;padding:0 .5rem;font-size:.78rem}
.col-body{padding:.5rem;display:flex;flex-direction:column;gap:.5rem;min-height:60px}
.col.over{outline:2px dashed var(--primary);outline-offset:-3px}
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:.6rem .7rem;cursor:pointer;box-shadow:var(--shadow-xs)}
.card:hover{border-color:var(--gray-300);box-shadow:var(--shadow-md)}
.card-name{font-weight:500;font-size:.86rem;line-height:1.3;color:var(--gray-900)}
.card-meta{color:var(--gray-500);font-size:.76rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-top:.4rem;font-size:.72rem;color:var(--gray-500)}
.card-arch{background:transparent;border:1px solid var(--gray-300);color:var(--gray-500);border-radius:var(--radius-sm);padding:.12rem .45rem;font-size:.7rem;font-weight:500;cursor:pointer}
.card-arch:hover{background:var(--danger-bg);border-color:#f0c9c5;color:var(--danger)}
.card.dragging{opacity:.5}

/* ---- login ---- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--gray-50)}
.login-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:2rem;width:min(380px,92vw);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:.85rem}
.login-card h1{font-size:1.25rem;text-align:center}
.login-card label{display:flex;flex-direction:column;gap:.3rem;font-weight:500;font-size:.82rem;color:var(--gray-700)}
/* CHECKBOX COM RÓTULO AO LADO. Regra GLOBAL de propósito: a classe é usada em várias
   telas e, sem ela aqui, cada view que estiliza `label` como campo de formulário
   (coluna, input 100%) empilhava o quadradinho em cima do texto e o esticava. */
label.check{display:flex;flex-direction:row;align-items:flex-start;gap:.55rem;
  font-weight:400;line-height:1.45;cursor:pointer;margin:0}
label.check > input[type=checkbox],label.check > input[type=radio]{
  width:17px;height:17px;flex:0 0 17px;margin:.14rem 0 0;min-width:0;accent-color:var(--brand,#4f46e5)}
label.check > span{flex:1;min-width:0}
/* O .login-card é flex, mas o <form> não era: dentro dele tudo caía em fluxo normal,
   então o botão ficava do tamanho do texto, encostado à esquerda, enquanto os campos
   ocupavam a largura inteira. É isso que fazia a tela parecer torta. */
.login-card form{display:flex;flex-direction:column;gap:.85rem}
.login-card button[type=submit]{width:100%;margin-top:.25rem;padding:.78rem;font-size:.95rem;
  border-radius:var(--radius-sm);transition:background .15s}
.login-card button[type=submit]:hover{background:var(--primary-strong)}
.login-card button[type=submit]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.login-or{display:flex;align-items:center;gap:.6rem;color:var(--gray-400);font-size:.82rem;margin:.2rem 0}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--gray-200)}
/* o botão do Google se alinha à largura do resto: dois botões de tamanhos diferentes,
   um centralizado e outro não, é o que deixava o cartão desalinhado */
.g-wrap{display:flex;justify-content:center}
.g-wrap > div{max-width:100%}

@media(max-width:900px){
  /* Topo com hambúrguer + a sidebar vira DRAWER que desliza da esquerda (sem mais scroll horizontal) */
  .mtop{display:flex;align-items:center;gap:.7rem;position:sticky;top:0;z-index:45;background:#fff;border-bottom:1px solid var(--gray-200);padding:.5rem .8rem}
  .sidebar{position:fixed;top:0;left:0;height:100dvh;width:min(284px,84vw);transform:translateX(-100%);transition:transform .22s ease;z-index:60;border-right:1px solid var(--gray-200);border-bottom:0;box-shadow:2px 0 22px rgba(17,24,39,.14);overflow-y:auto}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open{overflow:hidden}
  .sidebar__close{display:block}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(17,24,39,.45);opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:55}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible}
  .wrap{padding:0 1rem;margin:1.2rem auto}
}
@media(max-width:760px){
  /* (o auto-fit do .kpis já resolve o celular sozinho) */
  .grid2{grid-template-columns:1fr}
  .wrap{padding:0 1rem}
}

/* ── Grupo "Configurar" da sidebar (menu principal) ── */
.sidebar__nav details.nav-group summary{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:var(--radius-sm);color:var(--gray-600);font-weight:500;font-size:.9rem;cursor:pointer;list-style:none;user-select:none}
.sidebar__nav details.nav-group summary::-webkit-details-marker{display:none}
.sidebar__nav details.nav-group summary:hover{background:var(--gray-100);color:var(--gray-900)}
.sidebar__nav details.nav-group summary .ic{width:17px;height:17px;flex:none}
.sidebar__nav details.nav-group summary .chev{margin-left:auto;display:flex;align-items:center;transition:transform .15s ease}
.sidebar__nav details.nav-group summary .chev .ic{width:14px;height:14px}
.sidebar__nav details.nav-group[open] summary .chev{transform:rotate(180deg)}
.sidebar__nav details.nav-group .nav-group__items{display:flex;flex-direction:column;gap:2px;margin:.15rem 0 .3rem 1rem;padding-left:.55rem;border-left:2px solid var(--gray-200)}
.sidebar__nav details.nav-group .nav-group__items a{font-size:.86rem;padding:.4rem .6rem}
.sidebar__nav details.nav-group .nav-group__items a .ic{width:15px;height:15px}

/* ── Tobia Agenda: calendário ── */
.agd-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 .8rem}
.agd-toolbar__nav,.agd-toolbar__opts{display:flex;gap:.4rem;align-items:center}
.agd-toolbar .agd-on{background:var(--primary-soft);color:var(--primary-strong);border-color:#d6d9ff}
.agd-wrap{display:flex;gap:0;border:1px solid var(--gray-200);border-radius:12px;background:#fff;overflow-x:auto}
.agd-gutter{flex:0 0 52px;border-right:1px solid var(--gray-200);margin-top:34px}
.agd-gutter__h{font-size:.7rem;color:var(--gray-500);text-align:right;padding-right:6px;box-sizing:border-box;border-top:1px solid transparent}
.agd-col{flex:1 1 0;min-width:150px;border-right:1px solid var(--gray-200)}
.agd-col:last-child{border-right:0}
.agd-col--today .agd-col__head{background:var(--primary-soft);color:var(--primary-strong)}
.agd-col__head{height:34px;line-height:34px;text-align:center;font-weight:600;font-size:.85rem;border-bottom:2px solid var(--agd-c,var(--gray-200));background:var(--gray-50,#f8fafc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .4rem}
.agd-col__body{position:relative;cursor:pointer;background:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,var(--gray-100) 47px,var(--gray-100) 48px)}
.agd-block{position:absolute;left:3px;right:3px;border-radius:8px;background:color-mix(in srgb,var(--agd-c) 14%,#fff);border-left:3px solid var(--agd-c);padding:2px 6px;font-size:.74rem;line-height:1.25;overflow:hidden;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.agd-block:hover{box-shadow:0 3px 8px rgba(0,0,0,.14);z-index:90}
/* FAIXAS: agendamentos no mesmo horário lado a lado (ver o comentário do $faixas em agenda.php).
   O `right:auto` é obrigatório: a regra base declara left+right, e com a faixa quem manda é
   left+width. Deixar o right de 3px valendo faz o navegador ignorar a largura em alguns casos. */
.agd-block--lane{right:auto;box-shadow:0 1px 3px rgba(0,0,0,.13);border-right:1px solid #fff}
/* 4 faixas ou mais: o bloco fica estreito e a fonte precisa ceder, senão o nome não cabe e a
   coluna vira um bloco de reticências. O horário some porque ele já é dado pela POSIÇÃO na grade. */
.agd-block--tight{padding:2px 3px;font-size:.68rem;line-height:1.15}
.agd-block--tight strong{display:block}
/* Hover levanta o bloco inteiro pra leitura, mesmo estando embaixo de um vizinho mais à direita. */
.agd-block--lane:hover{width:auto!important;min-width:calc(100% + 6px);max-width:230px}

.agd-block--ok{outline:1.5px solid #16a34a33}
.agd-block--off{opacity:.45;text-decoration:line-through}
.agd-block__svc{display:block;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agd-hits{display:flex;flex-direction:column;border:1px solid var(--gray-200);border-radius:8px;margin-top:2px;overflow:hidden;max-height:180px;overflow-y:auto}
.agd-hit{background:#fff;border:0;border-bottom:1px solid var(--gray-100);text-align:left;padding:.45rem .6rem;font-size:.85rem;cursor:pointer}
.agd-hit:hover{background:var(--gray-100)}
.agd-dbody{margin:.6rem 0}
.agd-dstatus{display:flex;gap:.4rem;flex-wrap:wrap;border-top:1px solid var(--gray-100);padding-top:.7rem}
.agd-st--cancelado,.agd-st--faltou{color:#dc2626}
.agd-st--confirmado,.agd-st--concluido{color:#16a34a}
@media (max-width:900px){.agd-col{min-width:120px}}
.modal-backdrop[hidden]{display:none!important}   /* atributo hidden precisa vencer o display:flex do backdrop */
.agd-hit{color:var(--gray-800);font-weight:500}   /* botões da casa são brancos; hit precisa de texto escuro */
.agd-hit small{color:var(--gray-500);font-weight:400}
[hidden]{display:none!important}   /* reset global: o atributo hidden sempre vence display:flex/grid de autor (evita "lista/modal não some") */

/* ── Agenda: visão de MÊS ── */
.agd-month{border:1px solid var(--gray-200);border-radius:12px;overflow:hidden;background:#fff}
.agd-month__head{display:grid;grid-template-columns:repeat(7,1fr);background:#f8fafc;border-bottom:1px solid var(--gray-200)}
.agd-month__head>div{padding:.5rem;text-align:center;font-size:.7rem;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.03em}
.agd-month__grid{display:grid;grid-template-columns:repeat(7,1fr)}
.agd-mday{min-height:106px;border-right:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);padding:4px 5px 6px;cursor:pointer}
.agd-mday:nth-child(7n){border-right:0}
.agd-mday--out{background:#fbfbfd}
.agd-mday--out .agd-mday__n{color:var(--gray-300)}
.agd-mday__n{font-size:.78rem;color:var(--gray-600);font-weight:600;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%}
.agd-mday--today .agd-mday__n{background:#6d5efc;color:#fff}
.agd-mday__list{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.agd-chip{position:relative;display:block;font-size:.72rem;padding:1px 6px;border-radius:5px;background:color-mix(in srgb,var(--agd-c) 15%,#fff);color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-left:3px solid var(--agd-c)}
.agd-chip:hover{filter:brightness(.97)}
.agd-chip--off{opacity:.5;text-decoration:line-through}
.agd-chip strong{font-weight:600}
/* "olho" discreto = cliente ABRIU o link de confirmação (SMS) */
.agd-block--seen,.agd-chip--seen{padding-right:19px}
.agd-seen{position:absolute;top:2px;right:3px;display:flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.82);color:var(--gray-500);box-shadow:0 0 0 1px rgba(15,23,42,.05);pointer-events:none}
.agd-seen .ic{width:11px;height:11px;vertical-align:0}
.agd-more{display:inline-block;font-size:.7rem;color:#6d28d9;padding:1px 6px;text-decoration:none;font-weight:600}
.agd-more:hover{text-decoration:underline}
@media (max-width:700px){.agd-mday{min-height:74px}.agd-chip{font-size:.66rem}}

/* ── Agenda: modal estilo Google (ícones por campo) ── */
.agd-modal{width:min(520px,95vw);padding:1.2rem 1.4rem 1.1rem}
.agd-modal__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.agd-modal__top h2{margin:0}
.agd-x{background:none;border:0;font-size:1.35rem;line-height:1;color:var(--gray-400);cursor:pointer;padding:0 .1rem}
.agd-x:hover{color:var(--gray-700)}
#agdForm{margin-top:.4rem}
.agd-field{display:flex;gap:.75rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid var(--gray-100)}
.agd-field:last-of-type{border-bottom:0}
.agd-field__ic{color:var(--gray-400);flex:none;margin-top:1.35rem}
.agd-field__ic .ic{width:18px;height:18px}
.agd-field__in{flex:1;min-width:0}
.agd-field__in>label{display:block;font-size:.74rem;color:var(--gray-500);margin-bottom:.2rem}
.agd-field__in>label .muted{font-weight:400}
.agd-field__in input,.agd-field__in select{width:100%}
.agd-field__in--row{display:flex;gap:.6rem}
.agd-field__in--row>div{flex:1}
.agd-hits{margin-top:4px}
#agdForm .agd-feedback{color:#dc2626;font-size:.82rem;min-height:1em;margin:.5rem 0 0}
#agdForm .modal-actions{margin-top:.9rem}

/* ── Agenda: página em largura total + popover lateral (estilo Google) + card fantasma ── */
.wrap--wide{max-width:none}
.agd-pop-scrim{position:fixed;inset:0;z-index:900;background:transparent}          /* abaixo da camada de modais/confirmação (1000), acima do conteúdo */
.agd-pop{position:fixed;z-index:901;visibility:hidden;top:0;left:0}
.agd-pop .modal-card{margin:0;width:min(380px,94vw);max-height:calc(100vh - 20px);overflow:auto;box-shadow:0 16px 48px rgba(15,23,42,.30)}
.agd-pop.agd-pop--wide .modal-card{width:min(420px,94vw)}
.agd-pop .modal-card{max-height:calc(100vh - 32px);overflow-y:auto}
.agd-ghost{position:absolute;left:3px;right:3px;border-radius:8px;background:color-mix(in srgb,var(--primary) 16%,#fff);border:1.5px dashed var(--primary);color:var(--primary-strong);padding:3px 8px;font-size:.74rem;line-height:1.22;z-index:6;box-shadow:0 6px 16px rgba(109,94,252,.22);pointer-events:none;overflow:hidden}
.agd-ghost strong{font-weight:700}
.agd-ghost span{display:block;font-size:.68rem;opacity:.85}

/* ── Tags: faixa de cor no card do Quadro (estilo Trello, borda esquerda fininha) ── */
.card{position:relative}
.card-strip{position:absolute;left:0;top:0;bottom:0;display:flex;border-radius:var(--radius-sm) 0 0 var(--radius-sm);overflow:hidden}
.card-strip i{width:5px;display:block}

/* ── Seletor de tags estilo Trello (barras coloridas com check) na ficha do lead ── */
.tagpick{display:flex;flex-direction:column;gap:.35rem;margin:.4rem 0;max-width:340px}
.tagbar{position:relative;display:flex;align-items:center;gap:.5rem;background:var(--tc,#64748b);color:#fff;border-radius:7px;padding:.42rem .6rem;font-size:.82rem;font-weight:600;cursor:pointer;opacity:.5;transition:opacity .12s,box-shadow .12s}
.tagbar:hover{opacity:.8}
.tagbar.on,.tagbar:has(input:checked){opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tagbar input{position:absolute;opacity:0;width:0;height:0}
.tagbar__name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(0,0,0,.12)}
.tagbar__chk{display:inline-flex;opacity:0}
.tagbar.on .tagbar__chk,.tagbar:has(input:checked) .tagbar__chk{opacity:1}
.tagbar__chk .ic{width:15px;height:15px}

/* ── Ficha do lead: seções com respiro + rótulo consistente (menos poluído) ── */
.lead-atend>.lead-tags-form,.lead-atend>.lead-custom,.lead-atend>.lead-tasks,.lead-atend>.lead-wa-templates,.lead-atend>.lead-wa-ia{border-top:1px solid var(--gray-100);padding-top:1rem;margin-top:1rem}
.lead-atend .sec{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);font-weight:700;margin-bottom:.5rem}
button[disabled]{opacity:.5;cursor:not-allowed}

/* ── Conversa em Projeto (?p=projeto): inventário, plano e transcrições ── */
.cv-inv{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:.4rem}
.cv-inv>div{background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-md);padding:.7rem .5rem;text-align:center;display:flex;flex-direction:column;gap:.15rem}
.cv-inv-n{font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1}
.cv-blk{padding-top:.9rem;margin-top:.9rem;border-top:1px solid var(--gray-100)}
.cv-blk:first-child{padding-top:0;margin-top:0;border-top:0}
.cv-blk .sec{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);font-weight:700;margin-bottom:.4rem}
.cv-ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.2rem}
.cv-etapas{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.cv-etapa-nome{font-weight:600}
@media(max-width:560px){.cv-inv{grid-template-columns:repeat(2,1fr)}}
@media print{.sidebar,.lead-head__actions,.preview-bar,.flash{display:none!important}.content,.wrap{margin:0!important;padding:0!important}}

/* ── Ficha do lead: etiquetas colapsadas (estilo Trello) ── */
.tagchips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.4rem 0 0}
.tagchip{display:inline-flex;align-items:center;background:var(--tc,#64748b);color:#fff;border-radius:999px;padding:.18rem .6rem;font-size:.74rem;font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.12)}
.tagchip-add{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px dashed var(--gray-300,#d1d5db);background:transparent;color:var(--gray-500,#6b7280);border-radius:999px;cursor:pointer;padding:0}
.tagchip-add:hover{border-color:var(--primary,#7c3aed);color:var(--primary,#7c3aed)}
.tagchip-add .ic{width:14px;height:14px}
.tagpop{margin-top:.5rem;border:1px solid var(--gray-200,#e5e7eb);border-radius:10px;padding:.7rem;background:var(--card,#fff);box-shadow:var(--shadow-xs,0 1px 2px rgba(0,0,0,.05));max-width:340px}
.tagpop .tagpick{margin:0}

/* ── Ficha do lead: mensagens rápidas de WhatsApp como cards clicáveis ── */
.wa-quicks{display:flex;flex-direction:column;gap:.4rem;margin:.4rem 0 0}
.wa-quick{display:block;border:1px solid var(--gray-200,#e5e7eb);border-radius:9px;padding:.5rem .7rem;text-decoration:none;color:inherit;background:var(--card,#fff);transition:border-color .12s,box-shadow .12s}
.wa-quick:hover{border-color:var(--primary,#7c3aed);box-shadow:var(--shadow-xs,0 1px 2px rgba(0,0,0,.06))}
.wa-quick__t{display:flex;align-items:center;gap:.35rem;font-weight:600;font-size:.85rem;color:var(--primary-strong,#6d28d9)}
.wa-quick__t .ic{width:15px;height:15px}
.wa-quick__p{display:block;color:var(--gray-500,#6b7280);font-size:.8rem;margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Ficha do lead: bloco de Inteligência Artificial (cards separados) ── */
.lead-ai>h2{display:flex;align-items:center;gap:.4rem}
.lead-ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:.9rem;margin-top:.6rem}
.lead-ai-card{display:flex;flex-direction:column;border:1px solid var(--gray-200,#e5e7eb);border-radius:12px;padding:1rem;background:var(--gray-50,#f9fafb)}
.lead-ai-card .ai-title{display:flex;align-items:center;gap:.4rem;font-weight:700;font-size:.92rem;color:var(--ink,#111827);margin-bottom:.4rem}
.lead-ai-card .ai-title .ic{width:16px;height:16px;color:var(--primary,#7c3aed)}

/* ── Ficha do lead em tela cheia (wrap--wide): Atendimento ~60% | Inteligência Artificial ~40%; Linha do tempo desceu p/ largura cheia ── */
.grid2.lead-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.lead-danger{border-color:#f3c9c9}
.lead-danger>h2{color:#b91c1c}
.lead-timeline .timeline{max-height:min(60vh,560px)}
@media(max-width:960px){.grid2.lead-grid{grid-template-columns:1fr}}

/* ── Gerenciar conta: segredos ocultos por padrão (higiene de tela compartilhada) ── */
.secret-row{display:flex;gap:.5rem;align-items:center}
.secret-row input{flex:1;font-family:monospace;font-size:.85rem}
.secret-row .btn-soft{white-space:nowrap}

/* ── Agenda: arrastar-e-soltar o agendamento (dia/semana) ── */
.agd-block{cursor:grab}
.agd-block--off{cursor:default}
body.agd-dragging{cursor:grabbing!important;user-select:none}
body.agd-dragging .agd-block{cursor:grabbing}
.agd-block--dragging{opacity:.9;z-index:20;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.24);transform:scale(1.01)}

/* ── Agenda: detalhe do agendamento — botão "Enviar confirmação" em destaque + rodapé sempre quebra ── */
.agd-dsend{margin-top:.7rem}
.agd-dsend .agd-send-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem}
.agd-pop .modal-actions{flex-wrap:wrap;justify-content:stretch}
.agd-pop .modal-actions .btn-soft{flex:1 1 45%;justify-content:center}
.agd-dstatus .agd-st{flex:1 1 45%;justify-content:center;white-space:nowrap}
/* Financeiro: bloco de pagamento no popover */
.agd-pay{border-top:1px solid var(--gray-100);margin-top:.7rem;padding-top:.7rem}
.agd-pay__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:.15rem}
.agd-pay__h strong{font-size:.9rem}
.agd-pay__badge{font-size:.72rem;font-weight:700;padding:.1rem .55rem;border-radius:999px}
.agd-pay__badge--pago{background:#dcfce7;color:#15803d}
.agd-pay__badge--parcial{background:#fef3c7;color:#b45309}
.agd-pay__badge--pendente,.agd-pay__badge--isento{background:var(--gray-100);color:var(--gray-500)}
.agd-pay__sum{margin:.1rem 0 .45rem;color:var(--gray-700)}
.agd-pay__row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.18rem 0;color:var(--gray-700)}
.agd-pay__acts{display:inline-flex;gap:.15rem;flex:none}
.agd-pay__ed{border:0;background:none;color:var(--gray-500);font-size:.95rem;line-height:1;cursor:pointer;padding:0 .2rem}
.agd-pay__ed:hover{color:var(--gray-700)}
.agd-pay__del{border:0;background:none;color:#dc2626;font-size:1.05rem;line-height:1;cursor:pointer;padding:0 .2rem}
.agd-pay__add{margin-top:.45rem;width:100%;justify-content:center}
.agd-pay__form{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.agd-pay__form input,.agd-pay__form select{flex:1 1 30%;min-width:0;padding:.42rem .5rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.85rem;font-family:inherit;background:#fff}
.agd-pay__save{flex:1 1 100%;justify-content:center}
/* Financeiro: navegação de mês */
.fin-nav{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 1.1rem}
.fin-nav__lbl{font-size:1.05rem}
.fin-flip{transform:rotate(180deg)}
/* Financeiro v2: período, gráfico de vendas por dia, insights e rosca de itens */
.fin-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin:.2rem 0 1.1rem}
.fin-toolbar .fin-nav{margin:0}
.fin-range{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
/* width:auto anula o input{width:100%} global; sem isso os dois campos de data
   esticam e a barra de período quebra em 3 linhas (valia pro Financeiro também). */
.fin-range input[type=date]{width:auto;padding:.35rem .5rem;border:1px solid var(--gray-300);border-radius:var(--radius-sm);background:#fff;color:var(--gray-900);font-size:.82rem}
.fin-range .btn-soft{padding:.35rem .7rem}
.fin-chart__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}
.fin-chart__head h2{margin:0}
.fin-legend{display:flex;gap:.9rem;font-size:.75rem;color:var(--gray-500)}
.fin-lg{display:flex;align-items:center;gap:.35rem}
.fin-lg::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--primary)}
.fin-lg--hi::before{background:var(--ok)}
.fin-lg--lo::before{background:var(--danger)}
.fin-chart{position:relative}
.fin-scroll{overflow-x:auto;overflow-y:hidden}
.fin-bars{display:flex;align-items:flex-end;gap:2px;height:190px;padding-top:6px;border-bottom:1px solid var(--gray-200)}
.fin-bcol{flex:1 1 0;min-width:14px;display:flex;flex-direction:column;align-items:center;height:100%;cursor:default}
.fin-bwrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.fin-bar{width:100%;max-width:26px;background:var(--primary);border-radius:3px 3px 0 0;min-height:2px;transition:filter .1s}
.fin-bar--hi{background:var(--ok)}
.fin-bar--lo{background:var(--danger)}
.fin-bcol:hover .fin-bar{filter:brightness(1.12)}
.fin-blab{font-size:.62rem;color:var(--gray-400);margin-top:3px;line-height:1;height:.72rem;overflow:hidden}
.fin-tip{position:absolute;z-index:20;pointer-events:none;background:var(--gray-900,#111827);color:#fff;font-size:.72rem;line-height:1.35;padding:.4rem .55rem;border-radius:6px;box-shadow:0 6px 18px rgba(17,24,39,.25);white-space:nowrap}
.fin-tip b{display:block;margin-bottom:2px;font-weight:600}
.fin-insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem;margin-top:1rem}
.fin-ins{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:.6rem .75rem;display:flex;flex-direction:column;gap:.1rem}
.fin-ins__l{font-size:.72rem;color:var(--gray-500)}
.fin-ins__v{font-size:1.15rem;font-weight:600;color:var(--gray-900)}
.fin-ins__s{font-size:.72rem;color:var(--gray-400)}
.fin-ins--hi{background:var(--ok-bg);border-color:transparent}
.fin-ins--hi .fin-ins__v{color:var(--ok)}
.fin-ins--lo{background:var(--danger-bg);border-color:transparent}
.fin-ins--lo .fin-ins__v{color:var(--danger)}
.fin-top__grid{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.fin-pie{position:relative;width:180px;height:180px;flex:none}
.fin-pie svg{width:100%;height:100%;display:block}
.fin-slice{transition:stroke-width .1s;cursor:default}
.fin-slice:hover{stroke-width:17}
.fin-leg{flex:1;min-width:220px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.3rem .9rem}
.fin-leg li{display:flex;align-items:center;gap:.4rem;font-size:.8rem;min-width:0}
.fin-leg__dot{width:10px;height:10px;border-radius:2px;flex:none}
.fin-leg__nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gray-700)}
.fin-leg__vl{font-weight:600;color:var(--gray-900);white-space:nowrap}
@media(max-width:640px){.fin-leg{grid-template-columns:1fr}}
/* Pedidos e Impressão: filtro de status, badges e modal "Ver pedido" */
.pr-filter{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.pr-filter__tab{padding:.32rem .8rem;border:1px solid var(--gray-200);border-radius:999px;font-size:.82rem;color:var(--gray-700);background:var(--gray-50);text-decoration:none}
.pr-filter__tab:hover{background:var(--gray-100)}
.pr-filter__tab.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pr-badge{display:inline-block;font-size:.68rem;font-weight:600;padding:.1rem .45rem;border-radius:999px;vertical-align:middle;white-space:nowrap}
.pr-badge--pago{background:var(--ok-bg);color:var(--ok)}
.pr-badge--pendente{background:var(--warn-bg);color:var(--warn)}
.pr-badge--cancelado{background:var(--gray-100);color:var(--gray-500)}
.pr-modal{position:fixed;inset:0;z-index:200;background:rgba(17,24,39,.5);display:flex;align-items:center;justify-content:center;padding:1rem}
.pr-modal[hidden]{display:none}
.pr-modal__box{position:relative;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(17,24,39,.3);width:100%;max-width:520px;max-height:90vh;overflow:auto;padding:1.3rem}
.pr-modal__x{position:absolute;top:.5rem;right:.7rem;border:0;background:transparent;font-size:1.6rem;line-height:1;color:var(--gray-400);cursor:pointer}
.pr-modal__head{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;padding-right:1.5rem}
.pr-cli{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:12px;padding:1rem;margin-bottom:1rem}
.pr-cli__nome{font-size:1.5rem;font-weight:700;color:var(--gray-900);line-height:1.2;margin-bottom:.6rem}
.pr-cli__grid{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.pr-cli__row{display:flex;gap:.5rem;font-size:.95rem}
.pr-cli__lb{color:var(--gray-500);min-width:74px;flex:none}
.pr-cli__vl{color:var(--gray-900);font-weight:600;word-break:break-word}
.pr-cli__acts{display:flex;gap:.5rem;flex-wrap:wrap}
.pr-btn{flex:1;min-width:150px;text-align:center;padding:.7rem 1rem;border-radius:10px;font-weight:700;font-size:.9rem;text-decoration:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.pr-btn--wa{background:#25d366;color:#fff}
.pr-btn--call{background:var(--primary);color:#fff}
.pr-items__hd{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);margin-bottom:.5rem}
.pr-items__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.pr-items__list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem .6rem;font-size:.92rem;border-bottom:1px solid var(--gray-100);padding-bottom:.4rem}
.pr-it__nm{color:var(--gray-900)}
.pr-it__vl{font-weight:600;white-space:nowrap}
.pr-it__obs{flex-basis:100%;font-size:.78rem;color:var(--warn)}
.pr-items__tot{display:flex;justify-content:space-between;font-size:1.05rem;margin-top:.7rem}
.pr-items__tot strong{color:var(--gray-900)}
.pr-items__meta{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.82rem}
.pr-items__obs{margin-top:.6rem;font-size:.85rem;color:var(--warn);background:var(--warn-bg);padding:.4rem .6rem;border-radius:8px}
.pr-pay{background:var(--warn-bg);border:1px solid #f5e0b8;border-radius:10px;padding:.7rem .8rem;margin-bottom:1rem}
.pr-pay__hd{font-size:.85rem;font-weight:600;color:var(--warn);margin-bottom:.5rem}
/* AÇOUGUE: valor da balança, digitado na hora de receber (só em pedido por peso) */
.pr-pay__val{margin:0 0 .6rem}
.pr-pay__val label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.25rem}
.pr-pay__val input{width:160px;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:1.05rem}
.pr-pay__btns{display:flex;gap:.4rem;flex-wrap:wrap}
.pr-pay__m{flex:1;min-width:90px;padding:.5rem .6rem;border:1px solid var(--primary);background:#fff;color:var(--primary);border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer}
.pr-pay__m:hover{background:var(--primary);color:#fff}
.pr-pay__m:disabled{opacity:.5;cursor:default}
.pr-new{background:var(--primary);color:#fff;border-radius:8px;padding:.5rem .9rem;font-weight:600;font-size:.9rem;text-decoration:none;white-space:nowrap}
.pr-new:hover{background:var(--primary-strong,#5b21b6)}
/* Novo pedido (POS de balcão) */
.pos-grid{display:grid;grid-template-columns:1fr 360px;gap:1rem;align-items:start}
@media(max-width:820px){.pos-grid{grid-template-columns:1fr}}
.pos-menu{display:flex;flex-direction:column;gap:.3rem}
.pos-cat{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);margin:.7rem 0 .2rem}
.pos-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.pos-item{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;text-align:left;background:#fff;border:1px solid var(--gray-200);border-radius:10px;padding:.6rem .7rem;cursor:pointer}
.pos-item:hover{border-color:var(--primary);background:var(--primary-soft,#eef0ff)}
.pos-item__nm{font-weight:600;font-size:.85rem;color:var(--gray-900);line-height:1.2}
.pos-item__pr{font-size:.8rem;color:var(--gray-500)}
.pos-cart{position:sticky;top:1rem}
.pos-lines{list-style:none;margin:0 0 .4rem;padding:0;display:flex;flex-direction:column;gap:.4rem}
.pos-lines li{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;font-size:.85rem;border-bottom:1px solid var(--gray-100);padding-bottom:.4rem}
.pos-ln__nm{flex:1;min-width:0;color:var(--gray-900)}
.pos-ln__vl{font-weight:600;white-space:nowrap}
.pos-ln__x{border:0;background:transparent;color:var(--gray-400);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 .2rem}
.pos-ln__x:hover{color:var(--danger)}
.pos-ln__obs{flex-basis:100%;font-size:.75rem;color:var(--warn)}
.pos-total{display:flex;justify-content:space-between;font-size:1.05rem;margin:.5rem 0;padding-top:.4rem;border-top:1px solid var(--gray-200)}
.pos-total strong{color:var(--gray-900)}
.pos-sec{margin-top:.9rem}
.pos-sec__hd{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);margin-bottom:.35rem}
.pos-sec input[type=text],.pos-sec input[type=tel],.pos-sec input[type=email]{width:100%;padding:.5rem .6rem;border:1px solid var(--gray-300);border-radius:8px;margin-bottom:.4rem;font-size:.9rem;background:#fff;color:var(--gray-900)}
.pos-search{position:relative}
.pos-results{position:absolute;left:0;right:0;top:calc(100% - .1rem);z-index:30;background:#fff;border:1px solid var(--gray-200);border-radius:10px;box-shadow:0 8px 22px rgba(17,24,39,.12);max-height:260px;overflow:auto}
.pos-result{display:flex;flex-direction:column;gap:1px;padding:.5rem .7rem;cursor:pointer;border-bottom:1px solid var(--gray-100)}
.pos-result:last-child{border-bottom:0}
.pos-result:hover{background:var(--primary-soft,#eef0ff)}
.pos-result__nm{font-weight:600;font-size:.88rem;color:var(--gray-900)}
.pos-result__meta{font-size:.78rem;color:var(--gray-500)}
.pos-results__empty{padding:.6rem .7rem;font-size:.82rem;color:var(--gray-500)}
.pos-cli__hint{font-size:.8rem;color:var(--ok);margin:.1rem 0 .2rem;font-weight:600}
.pos-radio{display:flex;align-items:center;gap:.4rem;font-size:.88rem;padding:.15rem 0;cursor:pointer}
.pos-pays{display:flex;flex-direction:column;gap:.1rem}
.pos-submit{width:100%;margin-top:1rem;background:var(--primary);color:#fff;border:0;border-radius:10px;padding:.75rem;font-weight:700;font-size:.95rem;cursor:pointer}
.pos-submit:disabled{opacity:.5;cursor:default}
.pos-msg{margin:.6rem 0 0;font-size:.85rem;padding:.5rem .6rem;border-radius:8px}
.pos-msg--ok{background:var(--ok-bg);color:var(--ok)}
.pos-msg--err{background:var(--danger-bg);color:var(--danger)}
.pos-cfg__adds{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem}
.pos-add{display:flex;align-items:center;gap:.5rem;font-size:.88rem;cursor:pointer}
.pos-add__pr{margin-left:auto;color:var(--gray-500);font-size:.82rem}
.pos-cfg__obs{display:block;font-size:.8rem;color:var(--gray-500);margin-bottom:.8rem}
.pos-cfg__obs input{width:100%;margin-top:.25rem;padding:.5rem .6rem;border:1px solid var(--gray-300);border-radius:8px;font-size:.9rem;background:#fff;color:var(--gray-900)}
.pos-cfg__foot{display:flex;align-items:center;gap:.6rem}
.pos-qty{display:flex;align-items:center;gap:.6rem;border:1px solid var(--gray-300);border-radius:8px;padding:.2rem .3rem}
.pos-qty button{border:0;background:transparent;font-size:1.2rem;line-height:1;width:26px;height:26px;cursor:pointer;color:var(--primary)}
.pos-qty span{min-width:18px;text-align:center;font-weight:600}

/* ---- Reorg do menu 21/07: seções, botão + do Novo lead e selo ROO3 ---- */
.nav-sec{margin:.75rem .7rem .2rem;font-size:.67rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-400,#9ca3af)}
.nav-row{display:flex;align-items:center;gap:2px}
.nav-row>a:first-child{flex:1;min-width:0}
.sidebar__nav a.nav-plus{flex:none;width:27px;height:27px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:8px;color:var(--gray-500,#6b7280)}
.sidebar__nav a.nav-plus:hover{background:var(--gray-100);color:var(--gray-900)}
.sidebar__nav a.nav-plus .ic{width:15px;height:15px}
.nav-group__sec{margin:.55rem 0 .1rem;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-400,#9ca3af);display:flex;align-items:center;gap:.4rem}
.nav-group__items .nav-group__sec:first-child{margin-top:.15rem}
.nav-roo3{font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:999px;background:var(--primary-soft,#eef2ff);color:var(--primary-strong,#4f46e5)}

/* ══════════════ TABELAS v3: cara de tabela profissional + responsivo de verdade ══════════════
   Problema que isto resolve: as tabelas largas (ex.: Histórico de lançamentos, 8 colunas)
   viravam um amontoado ilegível no celular, sem separação visível de coluna.
   Padrão: .tbl-wrap (rolagem horizontal quando não cabe) + table.data (a tabela em si).
   Some .data--stack e no celular cada LINHA vira um CARD com rótulo por campo (td[data-label]).
   (Não tem sombra de rolagem nem header sticky: a sombra ficaria atrás do fundo branco
   da tabela e o sticky não gruda em container que só limita a largura, sem altura.) */
.tbl-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gray-200);
  border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-xs)}
.tbl-wrap>table{border:0;border-radius:0;box-shadow:none;margin:0}

table.data{width:100%;border-collapse:separate;border-spacing:0;background:#fff;font-variant-numeric:tabular-nums}
table.data thead th{text-align:left;white-space:nowrap;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500);
  background:var(--gray-50);padding:.6rem .85rem;border-bottom:1px solid var(--gray-200)}
table.data thead th+th{border-left:1px solid var(--gray-200)}   /* coluna VISÍVEL, era a queixa */
table.data td{padding:.68rem .85rem;border-bottom:1px solid var(--gray-100);color:var(--gray-700);vertical-align:middle}
table.data td+td{border-left:1px solid var(--gray-100)}
table.data tbody tr:nth-child(even) td{background:var(--gray-50)}   /* zebra: o olho não pula de linha */
table.data tbody tr:hover td{background:var(--primary-soft)}
table.data tbody tr:last-child td{border-bottom:0}
table.data .num,table.data td.num,table.data th.num{text-align:right;white-space:nowrap}
table.data .strong{font-weight:600;color:var(--gray-900)}
table.data tfoot td{padding:.7rem .85rem;background:var(--gray-50);border-top:1px solid var(--gray-200);font-weight:600;color:var(--gray-900)}

/* ── modo CARD no celular: cada linha vira um bloco com rótulo por campo ── */
@media(max-width:760px){
  /* REGRAS SEPARADAS de propósito: lista de seletores não é "forgiving", então
     juntar as duas faria o browser sem :has() jogar fora a regra INTEIRA (inclusive
     a classe explícita). Separadas, a 1ª sempre vale e a 2ª é só bônus. */
  .tbl-wrap--stack{overflow-x:visible;border:0;border-radius:0;background:none;box-shadow:none;background-image:none}
  .tbl-wrap:has(table.data--stack){overflow-x:visible;border:0;border-radius:0;background:none;box-shadow:none;background-image:none}
  table.data--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.data--stack tbody tr{display:block;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);
    box-shadow:var(--shadow-xs);padding:.2rem .1rem;margin-bottom:.6rem}
  table.data--stack tbody tr:nth-child(even) td,table.data--stack tbody tr:hover td{background:transparent}
  /* só o td ROTULADO vira "rótulo à esquerda / valor à direita" */
  table.data--stack td[data-label]{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    border:0!important;border-bottom:1px dashed var(--gray-100)!important;padding:.45rem .8rem;text-align:right!important}
  table.data--stack tr td:last-child{border-bottom:0!important}
  table.data--stack td[data-label]::before{content:attr(data-label);flex:none;text-align:left;
    font-size:.72rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--gray-500)}
  table.data--stack td[data-label]:empty{display:none}           /* campo vazio não vira linha morta */
  /* célula SEM rótulo (ex.: o empty state com colspan) fica bloco normal, sem virar flex torto */
  table.data--stack td:not([data-label]){display:block;border:0!important;text-align:center}
  /* 1º campo (data) vira o cabeçalho do card */
  table.data--stack td[data-label]:first-child{background:var(--gray-50)!important;border-radius:var(--radius-sm);
    font-weight:600;color:var(--gray-900);margin:.15rem .25rem .1rem;padding:.4rem .55rem}
  table.data--stack tfoot td{display:flex;justify-content:space-between}
}

/* ── eleva as tabelas .list e .mini que já existem, sem precisar tocar em cada view ── */
table.list th{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
table.list th+th{border-left:1px solid var(--gray-200)}
table.list tbody tr:nth-child(even) td{background:var(--gray-50)}
/* tr.row-link:hover (linha 68) tem especificidade maior e venceria, deixando a
   linha clicável com hover cinza e a comum com hover violeta na MESMA tabela.
   Igualando aqui pra o hover ficar consistente. */
table.list tbody tr:hover td,table.list tbody tr.row-link:hover td{background:var(--primary-soft)}
table.mini th{text-align:left;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gray-500);padding:.5rem .6rem;border-bottom:1px solid var(--gray-200);white-space:nowrap}
table.mini td{padding:.55rem .6rem;border-bottom:1px solid var(--gray-100)}
table.mini tbody tr:hover td{background:var(--gray-50)}

/* ── Acessos (?p=analytics) ── */
.an-quick{display:flex;gap:.4rem;flex-wrap:wrap}
.an-quick .btn-soft.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-strong);font-weight:600}
.an-bar{display:block;height:8px;border-radius:99px;background:var(--gray-100);overflow:hidden;min-width:60px}
.an-bar>i{display:block;height:100%;border-radius:99px;background:var(--primary)}
@media(max-width:760px){.an-quick{width:100%}}

/* ── "Fechar loja agora": estado da loja + pausa manual (?p=cardapio) ── */
.st-now{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:.75rem .85rem;margin:0 0 1rem;background:var(--gray-50)}
.st-now__head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.15rem}
.st-now__dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--gray-400)}
.st-now--on{background:var(--ok-bg);border-color:#bfe3cd}
.st-now--on .st-now__dot{background:var(--ok)}
.st-now--off{background:var(--danger-bg);border-color:#f4c9c5}
.st-now--off .st-now__dot{background:var(--danger)}
.st-now--sched{background:var(--warn-bg);border-color:#f0dcbc}
.st-now--sched .st-now__dot{background:var(--warn)}
.st-now__btns{display:flex;gap:.4rem;flex-wrap:wrap}
.st-now__btns .btn-soft{padding:.35rem .7rem;font-size:.85rem;background:#fff}

/* ══════════════ PAINEL DE CLIENTES (?p=clientes) ══════════════
   Carteira de clientes fechados em cards, por importância, com tarefas dentro. */
.cli-board{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start}
.cli-col{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:.7rem;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.cli-col__head{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--gray-700)}
.cli-col__head .cli-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--gray-400)}
.cli-col__head .muted{margin-left:auto}
.cli-col--alta .cli-dot{background:var(--danger)}
.cli-col--media .cli-dot{background:var(--warn)}
.cli-col--baixa .cli-dot{background:var(--gray-400)}
.cli-col__empty{text-align:center;padding:.8rem 0}

.cli-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);padding:.7rem .75rem;display:flex;flex-direction:column;gap:.55rem;scroll-margin-top:80px}
.cli-card--alert{border-color:#f4c9c5;box-shadow:inset 3px 0 0 var(--danger)}
.cli-card__top{display:flex;align-items:flex-start;gap:.5rem}
.cli-card__id{display:flex;flex-direction:column;min-width:0;flex:1}
.cli-card__name{font-weight:600;color:var(--gray-900);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-card__name:hover{text-decoration:underline}
.cli-card__co{font-size:.76rem;color:var(--gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-badge{flex:none;font-size:.68rem;font-weight:600;padding:.15rem .45rem;border-radius:99px;white-space:nowrap}
.cli-badge--over{background:var(--danger-bg);color:var(--danger)}
.cli-badge--none{background:var(--warn-bg);color:var(--warn)}

.cli-imp{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin:0}
.cli-imp__lbl{font-size:.72rem;color:var(--gray-500);margin-right:.1rem}
.cli-imp__b{padding:.18rem .5rem;font-size:.74rem;border:1px solid var(--gray-300);background:#fff;color:var(--gray-600);border-radius:99px;cursor:pointer}
.cli-imp__b:hover{background:var(--gray-100)}
.cli-imp__b.on{font-weight:600;border-color:transparent;color:#fff}
.cli-imp__b--alta.on{background:var(--danger)}
.cli-imp__b--media.on{background:var(--warn)}
.cli-imp__b--baixa.on{background:var(--gray-500)}

.cli-tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.cli-task{display:flex;align-items:flex-start;gap:.45rem;font-size:.84rem;line-height:1.35}
.cli-task__done{margin:0;flex:none}
.cli-task__done button{width:20px;height:20px;padding:0;border:1px solid var(--gray-300);border-radius:5px;background:#fff;color:var(--gray-400);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cli-task__done button:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.cli-task__done .ic{width:13px;height:13px}
.cli-task__txt{min-width:0;overflow-wrap:anywhere}   /* título colado sem espaço (URL) quebra em vez de vazar o card */
.cli-task__due{display:inline-block;margin-left:.35rem;font-size:.72rem;color:var(--gray-400);white-space:nowrap}
.cli-task__due.over{color:var(--danger);font-weight:600}
.cli-task--empty{color:var(--gray-400);font-style:italic}

.cli-add{display:flex;gap:.3rem;margin:0}
.cli-add input[type=text]{flex:1;min-width:0;width:auto;padding:.35rem .5rem;font-size:.82rem}
.cli-add input[type=date]{width:auto;padding:.35rem .4rem;font-size:.78rem;flex:none;max-width:8.5rem}
.cli-add__b{flex:none;padding:.35rem .55rem;background:var(--primary);border:0;border-radius:var(--radius-sm);color:#fff;cursor:pointer}
.cli-add__b .ic{width:15px;height:15px;vertical-align:-2px}

.cli-card__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-top:1px dashed var(--gray-100);padding-top:.45rem}
.cli-card__contact{display:flex;gap:.5rem}
.cli-card__contact a{color:var(--gray-400)}
.cli-card__contact a:hover{color:var(--primary)}
.cli-card__contact .ic{width:16px;height:16px}

@media(max-width:900px){ .cli-board{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- Site (Operação > Site)
   O card do site atual. A prévia é um IFRAME do site de verdade, encolhido por transform:
   assim ela nunca fica defasada, que é o defeito de miniatura guardada como imagem. */
.st-atual{display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap}
.st-thumb{position:relative;display:block;flex:none;width:360px;height:250px;overflow:hidden;
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:#fff;
  box-shadow:var(--shadow-xs);text-decoration:none;transition:box-shadow .18s ease,transform .18s ease}
.st-thumb:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.st-thumb iframe{
  /* Renderiza em largura de DESKTOP e encolhe: em 360px direto o site cairia no layout de
     celular e a miniatura mentiria sobre como ele aparece pra maioria das visitas. */
  width:1280px;height:889px;border:0;transform:scale(.2813);transform-origin:0 0;
  pointer-events:none;display:block}
/* O véu cobre o iframe inteiro para que o clique seja do <a> e não do conteúdo enquadrado.
   Sem ele, arrastar dentro da miniatura seleciona texto do site em vez de abri-lo. */
.st-thumb__veu{position:absolute;inset:0}
.st-info{flex:1 1 320px;min-width:280px}
.st-nome{font-size:1.25rem;margin:0 0 .45rem}
.st-badges{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 .6rem}
.st-url{margin:0 0 1rem;font-size:.95rem;word-break:break-all}
.st-acoes{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.st-dns{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--gray-200)}
.st-dns__tit{margin:0 0 .6rem;font-weight:600;font-size:.92rem}
.st-dns code{background:var(--gray-100);padding:.15rem .4rem;border-radius:6px;font-size:.88rem}
@media (max-width:720px){
  /* Abaixo disso a miniatura de 360px empurraria o texto pra fora; ela encolhe junto. */
  .st-thumb{width:100%;height:210px}
  .st-thumb iframe{transform:scale(.24)}
}
@media (prefers-reduced-motion:reduce){.st-thumb:hover{transform:none}}

/* ---- ev-*: promovidas do <style> local de evento.php para o design system ----
   Elas eram usadas em admin/views/sites.php sem existirem no admin.css, porque só estavam
   declaradas dentro do <style> de evento.php e eventos.php. Resultado: a tela de Site saía
   com o cabeçalho, as seções e a grade do formulário SEM ESTILO NENHUM. Mesmo defeito da
   .hint, achado do mesmo jeito (classe usada numa view e ausente no CSS).
   Os valores são cópia LITERAL dos originais, e as views de evento continuam com a cópia
   local, que vem depois na cascata e ganha: nada muda de aparência lá. */
.ev-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.ev-sec{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#64748b);
  border-bottom:1px solid var(--line,#e7ebf3);padding-bottom:.3rem;margin:1.1rem 0 .7rem}
.ev-sec:first-child{margin-top:.2rem}
.ev-g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem 1.1rem}
.ev-full{grid-column:1 / -1}
.ev-save{display:flex;justify-content:flex-end;margin-top:.8rem}

/* ------------------------------------------------ Campanhas: escolha do canal (3 colunas)
   auto-fit em vez de 3 colunas fixas: com 4 cards (os 3 canais mais a cascata) o grid se
   reorganiza sozinho em 2x2 no tablet e 1 coluna no celular, sem media query por quantidade. */
.cmp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.9rem}
.cmp-card{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1rem;background:#fff;
  display:flex;flex-direction:column;gap:.45rem}
.cmp-card--off{background:var(--gray-50);opacity:.75}
/* A cascata é opção de segundo nível: borda tracejada para ler como "combinação" e não como
   um quarto canal, que seria mentira. */
.cmp-card--casc{border-style:dashed}
.cmp-card__t{margin:0;font-size:1.02rem}
.cmp-card__d{margin:0;font-size:.86rem;color:var(--gray-600);line-height:1.45;flex:1}
.cmp-card__s{margin:0;font-size:.78rem;color:var(--gray-500)}
.cmp-card__s--perto{color:#b45309;font-weight:600}
.cmp-card__s--fim{color:var(--danger);font-weight:600}
.cmp-card .btn,.cmp-card .btn-link{align-self:flex-start;margin-top:.2rem}

/* -------------------------------------------- Audiência da campanha (tabela de 3 colunas)
   Era uma lista corrida com o telefone colado no nome. Numa campanha de e-mail o que importa
   é ver QUEM tem e-mail, e isso ficava invisível. */
.aud-t{width:100%;border-collapse:collapse;font-size:.86rem}
.aud-t thead th{position:sticky;top:0;background:#fff;text-align:left;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);font-weight:700;
  padding:.5rem .6rem;border-bottom:1px solid var(--gray-200);z-index:1}
.aud-t td{padding:.38rem .6rem;border-bottom:1px solid #f4f6fa;vertical-align:middle}
.aud-t tbody tr{cursor:pointer}
.aud-t tbody tr:hover{background:var(--gray-50)}
.aud-t tbody tr:last-child td{border-bottom:0}
/* Contato que falta fica cinza e em itálico: dá pra bater o olho e entender por que alguém
   não entra num canal, em vez de a célula parecer só vazia por bug. */
.aud-vazio{color:var(--gray-400);font-style:italic}
@media (max-width:600px){
  /* No celular o e-mail é a coluna que mais quebra o layout; ela some e o telefone fica. */
  .aud-t th:nth-child(4),.aud-t td:nth-child(4){display:none}
}

/* ------------------------------------------- Editor do e-mail da campanha (com prévia viva)
   A prévia mora numa COLUNA DA PÁGINA, ao lado do formulário, e não dentro do painel dele.
   A primeira versão a colocou dentro do painel de 640px e as duas coisas ficaram espremidas:
   o editor virou uma faixa de poucos pixels com uma letra por linha. */
.cn-layout{display:block}
/* A coluna da PRÉVIA é fixa em 640px (600 do e-mail mais respiro) e o FORMULÁRIO fica com o
   resto: o contrário disso deixava o e-mail cortado na direita, que é o oposto do que a
   prévia serve. */
.cn-layout--prev{display:grid;grid-template-columns:minmax(0,1fr) 640px;gap:1.4rem;align-items:start}
/* A página inteira é limitada a 1180px, e 640 de prévia mais um formulário decente não cabem
   nisso. Só ESTA tela, e só no canal e-mail, ganha mais largura. O :has é o que permite fazer
   isso sem tocar no .wrap das outras 55 telas; onde ele não existir, o layout continua
   funcionando, só mais apertado. */
.wrap:has(.cn-layout--prev){max-width:1520px}
.cn-prev{display:none;min-width:0}
/* O style inline do form fixa max-width:640px, que serve quando ele ocupa a página
   sozinho. Com a prévia ao lado ele pode (e deve) crescer, senão sobra um vão morto. */
.cn-layout--prev #camp-form{max-width:none}
/* A coluna só existe no canal e-mail: nos outros o formulário volta a ocupar a página. */
.cn-layout--prev .cn-prev{display:block;position:sticky;top:1rem}
.ce-topo{display:grid;grid-template-columns:2fr 1fr;gap:.8rem;margin-top:.6rem}
.ce-edit{margin-top:.9rem}
.ce-bar{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;padding:.4rem;border:1px solid var(--gray-200);
  border-bottom:0;border-radius:10px 10px 0 0;background:var(--gray-50)}
.ce-bar button{background:#fff;border:1px solid var(--gray-300);color:var(--gray-700);font-weight:600;
  font-size:.8rem;padding:.3rem .6rem;border-radius:7px;cursor:pointer}
.ce-bar button:hover{background:var(--gray-100)}
.ce-bar__sep{width:1px;height:20px;background:var(--gray-300);margin:0 .2rem}
.ce-editor{min-height:300px;max-height:520px;overflow:auto;border:1px solid var(--gray-200);
  border-radius:0 0 10px 10px;padding:.9rem 1rem;background:#fff;font-size:15px;line-height:1.6;outline:0}
.ce-editor:focus{border-color:var(--primary)}
/* Dica dentro do editor vazio: placeholder não existe em contenteditable. */
.ce-editor:empty:before{content:attr(data-vazio);color:var(--gray-400)}
.ce-editor h2{font-size:1.1rem;margin:1.1rem 0 .5rem}
.ce-editor p{margin:0 0 .7rem}
.ce-editor ul,.ce-editor ol{margin:0 0 .7rem;padding-left:1.3rem}
.ce-prev__cab{display:flex;justify-content:space-between;align-items:center;padding:.5rem .7rem;
  border:1px solid var(--gray-200);border-bottom:0;border-radius:12px 12px 0 0;background:var(--gray-50);
  font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);font-weight:700}
.ce-prev{width:100%;height:min(78vh,760px);border:1px solid var(--gray-200);
  border-radius:0 0 12px 12px;background:#f4f2f7;display:block}
@media (max-width:1100px){
  /* Sem espaço para as duas colunas, a prévia vai para baixo do formulário em vez de espremer
     os dois. Ela perde o sticky, que só faz sentido lado a lado. */
  .cn-layout--prev{grid-template-columns:minmax(0,1fr)}
  .cn-layout--prev .cn-prev{position:static}
  .ce-prev{height:520px}
  .ce-topo{grid-template-columns:1fr}
}

/* DICA (?) . explicação curta ao lado de um rótulo. Substitui o title= nativo, que tem alvo
   pequeno demais, atraso de 1s e NÃO EXISTE em toque. É um <button> de verdade: pega foco no
   Tab e no toque, então a bolha abre sem uma linha de JS.
   No celular a bolha vira faixa fixa no rodapé: bolha ancorada no botão sairia da tela num
   card de grade estreita, e clampar isso em CSS puro não dá. */
.dica{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin:-6px 0 -6px .15rem;padding:0;vertical-align:middle;
  border:1px solid var(--gray-300);border-radius:50%;background:#fff;color:var(--gray-500);
  font:600 11px/1 Inter,sans-serif;cursor:help;flex:none}
/* O alvo de TOQUE é maior que o desenho: 20px na tela, 44px pro dedo (mínimo da Apple). */
.dica::before{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
.dica:hover,.dica:focus-visible{border-color:var(--primary);color:var(--primary);
  background:var(--primary-soft);outline:none}
.dica__txt{position:absolute;z-index:60;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:min(280px,60vw);padding:.5rem .65rem;
  background:var(--gray-900);color:#fff;border-radius:var(--radius-sm);
  font:400 .78rem/1.45 Inter,sans-serif;text-align:left;letter-spacing:0;
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none}
.dica__txt::after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--gray-900)}
.dica:hover .dica__txt,.dica:focus .dica__txt{opacity:1;visibility:visible}
/* Perto da borda direita a bolha ancora pela direita em vez de centralizar. */
.dica--fim .dica__txt{left:auto;right:-6px;transform:none}
.dica--fim .dica__txt::after{left:auto;right:8px;margin-left:0}

@media (max-width:640px){
  /* Faixa no rodapé: cabe sempre, lê fácil e não briga com a grade de 2 colunas. */
  .dica__txt,.dica--fim .dica__txt{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;
    top:auto;width:auto;max-width:none;transform:none;text-align:center;padding:.7rem .8rem;
    font-size:.82rem;border-radius:var(--radius-md)}
  .dica__txt::after,.dica--fim .dica__txt::after{display:none}
}
@media (prefers-reduced-motion:reduce){ .dica__txt{transition:none} }

/* TELA CONTAS: lista à esquerda, configuração da plataforma numa coluna estreita à direita.
   Antes os 8 painéis de config ocupavam a largura toda no topo e empurravam as contas, que
   são o motivo de a pessoa abrir esta tela, pra baixo da dobra. */
.ct-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,26%,330px);gap:1.2rem;align-items:start}
.ct-main{min-width:0}   /* sem isto o grid não deixa os cards encolherem e a página rola pro lado */
.ct-h{margin:1.1rem 0 .6rem;font-size:1.02rem;display:flex;align-items:center;gap:.4rem}
.ct-h:first-child{margin-top:0}
.ct-h--fraco{color:var(--gray-500)}

/* Busca: campo único e largo. É a primeira coisa da coluna porque "onde está a conta X" vem
   antes de "quais são as que eu uso todo dia". */
.ct-busca{display:flex;align-items:center;gap:.5rem;padding:.1rem .7rem;border:1px solid var(--gray-300);
  border-radius:var(--radius-md);background:#fff;margin-bottom:.2rem}
.ct-busca:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.ct-busca .ic{color:var(--gray-400)}
.ct-busca input{flex:1;border:0;outline:none;padding:.6rem 0;background:none;font:inherit;min-width:0}
.ct-busca__x{border:0;background:none;cursor:pointer;color:var(--gray-400);font-size:1.3rem;line-height:1;padding:0 .2rem;width:auto}
.ct-busca__x:hover{color:var(--gray-700)}

/* Coluna da direita: painéis apertados. Cada <details> fechado é uma linha só. */
.ct-side{position:sticky;top:1rem}
.ct-side .panel{padding:.55rem .7rem;margin-bottom:.45rem}
.ct-side summary{font-size:.85rem;line-height:1.3}
.ct-side summary strong{font-weight:600}
.ct-side .badge{font-size:.66rem;padding:.1rem .35rem}
/* Aberto num espaço estreito, campo lado a lado não cabe: tudo empilha e ocupa a largura. */
.ct-side .filters{flex-direction:column;align-items:stretch;gap:.4rem}
.ct-side input,.ct-side select,.ct-side textarea,.ct-side button{width:100%;font-size:.84rem}
.ct-side .newacc-form{padding-top:.6rem}
.ct-side p,.ct-side label{font-size:.8rem}
/* Numa coluna de ~300px, chave de API, URL de webhook e digital de chave NÃO quebram sozinhas
   e empurram a página inteira pro lado (medido: a coluna transbordava 48px e o documento
   ganhava barra horizontal, sem nenhum elemento aparecer como culpado num teste de
   getBoundingClientRect, porque o estouro era de conteúdo e não de caixa). */
.ct-side *{min-width:0}
.ct-side p,.ct-side code,.ct-side .ai-key-box,.ct-side .hint{overflow-wrap:anywhere}
.ct-side code{font-size:.72rem}

@media (max-width:1000px){
  /* Empilha, e as CONTAS vêm primeiro: no celular a configuração é o que menos se usa. */
  .ct-layout{grid-template-columns:1fr}
  .ct-side{position:static}
}

/* ═══════════ FLUXO FIXO DE ATENDIMENTO (?p=fluxo) ═══════════
   A tela é um editor de ÁRVORE, e a árvore só se lê se o recuo e a seta estiverem visíveis.
   Por isso quase tudo aqui é espaçamento e hierarquia, não decoração.
   REGRA DA CASA que vale pra cada :hover abaixo: quem mexe no fundo declara a COR junto, e
   vice-versa. O `button:hover` global do painel troca só o fundo, e todo botão de texto colorido
   herdaria isso pela metade (roxo sobre roxo). Trava em bin/css-hover-par.php. */
.fx-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,30%,380px);gap:1.2rem;align-items:start}
.fx-col{min-width:0}                  /* sem isto a coluna não encolhe e a página rola pro lado */
.fx-col--lado{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.7rem}
.fx-h{margin:0 0 .5rem;font-size:1rem;color:var(--gray-900);font-weight:600}

/* Faixa de estado (o que está no ar agora). */
.fx-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;border-radius:var(--radius-md);
  font-size:.86rem;margin-bottom:1rem;border:1px solid transparent}
.fx-bar--ok{background:var(--ok-bg);border-color:#bfe5cd;color:var(--ok)}
.fx-bar--off{background:var(--warn-bg);border-color:#f0dbb4;color:var(--warn)}

/* Lista de fluxos. */
.fx-lista{display:flex;flex-direction:column;gap:.5rem}
.fx-card{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--radius-md);padding:.7rem .9rem;box-shadow:var(--shadow-xs);flex-wrap:wrap}
.fx-card__main{flex:1;min-width:180px}
.fx-card__nome{font-weight:600;color:var(--gray-900);font-size:.95rem}
.fx-card__acts{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.fx-card__acts form{margin:0}
/* Âncora com cara de botão: o `a:hover` global sublinha e o `.btn-soft:hover` só troca o fundo. */
a.btn-soft:hover{background:var(--gray-50);color:var(--gray-900);text-decoration:none}

/* Selos de estado. */
.fx-selo{font-size:.72rem;font-weight:600;padding:.15rem .5rem;border-radius:999px;white-space:nowrap}
.fx-selo--ok{background:var(--ok-bg);color:var(--ok)}
.fx-selo--off{background:var(--gray-100);color:var(--gray-500)}
.fx-selo--ini{background:var(--primary-soft);color:var(--primary-strong)}
/* LIGADO E FORA DO AR: a coluna `ativo` diz sim e crm_fluxo_ativo diz não. É estado real
   (fluxo sem começo, ou começo sem botão ativo) e precisa gritar, senão a tela garante que
   está tudo certo enquanto o visitante não vê menu nenhum. */
.fx-selo--fora{background:var(--danger-bg);color:var(--danger)}
.fx-bar--erro{background:var(--danger-bg);border-color:#f0c9c5;color:var(--danger)}

/* PRÉVIA do editor (ver como o visitante vê). Nada aqui grava: é leitura da árvore. */
.fx-prev{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:.7rem .8rem;background:var(--gray-50)}
.fx-prev__q{font-weight:600;color:var(--gray-900);font-size:.88rem;margin-top:.4rem}
.fx-prev__r{font-size:.8rem;color:var(--gray-500);margin:.1rem 0 .3rem}
.fx-prev__bs{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0}
.fx-prev__b{display:inline-block;background:#fff;border:1px solid var(--gray-300);border-radius:999px;
  padding:.3rem .7rem;font-size:.82rem;color:var(--gray-900);text-decoration:none}
/* fundo E cor no hover, sempre juntos (o button:hover global troca só o fundo). */
.fx-prev__b:hover{background:var(--primary);color:#fff;border-color:var(--primary);text-decoration:none}
.fx-prev__fim{display:flex;align-items:center;gap:.4rem;margin-top:.6rem;font-size:.84rem;color:var(--ok)}
.fx-op__nova{flex:1 1 180px;min-width:130px}

/* Painel de saúde. ERRO veta ligar o fluxo, AVISO não, e a cor é a única pista disso na tela. */
.fx-saude{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:.8rem .9rem;
  margin-bottom:1rem;background:#fff}
.fx-saude--erro{border-color:#f0c9c5;background:var(--danger-bg)}
.fx-saude--aviso{border-color:#f0dbb4;background:var(--warn-bg)}
.fx-saude__t{display:flex;align-items:center;gap:.45rem;margin-bottom:.4rem;color:var(--gray-900)}
.fx-saude__l{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.25rem}
.fx-item{font-size:.84rem;color:var(--gray-700)}
.fx-item--erro{color:var(--danger)}
.fx-item--aviso{color:var(--warn)}
.fx-item--inline{list-style:none;margin:.25rem 0;padding:.3rem .5rem;border-radius:var(--radius-sm);
  background:var(--gray-50);font-size:.8rem}

/* O PASSO. Recuo por nível = a árvore. A borda esquerda grossa dá a linha da hierarquia sem
   precisar desenhar conector nenhum (que quebraria no celular). */
.fx-passo{background:#fff;border:1px solid var(--gray-200);border-left:3px solid var(--gray-300);
  border-radius:var(--radius-md);padding:.75rem .9rem;margin-bottom:.6rem;box-shadow:var(--shadow-xs)}
.fx-passo--ini{border-left-color:var(--primary)}
.fx-passo--orfao{border-left-color:var(--warn);border-style:dashed}
.fx-passo__topo{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.fx-passo__q{font-weight:600;color:var(--gray-900);font-size:.95rem}
.fx-passo__ajuda{color:var(--gray-500);font-size:.82rem;margin-top:.15rem}
.fx-nivel{font-size:.7rem;color:var(--gray-400);white-space:nowrap}
.fx-orfaos-h{display:flex;align-items:center;gap:.4rem;margin:1.2rem 0 .5rem;font-size:.84rem;color:var(--warn)}

/* De onde se chega até este passo. É a leitura de trás pra frente da árvore. */
.fx-chegam{margin-top:.4rem;font-size:.78rem;color:var(--gray-500);display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.fx-chip{background:var(--gray-100);border-radius:999px;padding:.1rem .5rem;font-size:.74rem;color:var(--gray-700)}
.fx-chip--off{opacity:.55;text-decoration:line-through}
.fx-chip--campo{background:var(--info-bg);color:var(--info);display:inline-flex;align-items:center;gap:.25rem}
.fx-chip--campo .ic{width:12px;height:12px}

/* As opções (os botões que o visitante vê). Uma linha por botão, com o destino do lado. */
.fx-ops{margin-top:.55rem;display:flex;flex-direction:column;gap:.35rem}
.fx-op-row{display:flex;align-items:center;gap:.3rem}
.fx-op-row--off{opacity:.55}
.fx-op{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;flex:1;min-width:0;margin:0}
.fx-op input,.fx-op select{font-size:.82rem;padding:.35rem .5rem}
.fx-op__rot{flex:1 1 180px;min-width:120px}
.fx-op__dst{flex:1 1 190px;min-width:130px;max-width:100%}
.fx-op__val{flex:0 1 150px;min-width:100px}
.fx-op__tag{flex:0 1 130px}
.fx-op__x{margin:0}
.fx-seta{color:var(--gray-400);font-size:.9rem}
.fx-op--novo{margin-top:.2rem;padding-top:.5rem;border-top:1px dashed var(--gray-200)}
.fx-op--novo button{font-size:.82rem;padding:.4rem .7rem}

/* Ajustes da pergunta: fechado por padrão, porque o dia a dia é mexer nos botões. */
.fx-passo__cfg{margin-top:.5rem}
.fx-passo__cfg summary{cursor:pointer;font-size:.8rem;color:var(--gray-500);padding:.2rem 0;list-style:revert}
.fx-passo__cfg summary:hover{background:transparent;color:var(--gray-900)}
.fx-passo__cfg .fx-form{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--gray-100)}

/* Formulários empilhados (rótulo em cima do campo). */
.fx-form{display:flex;flex-direction:column;gap:.55rem}
.fx-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--gray-500)}
.fx-form label.etapa-cli{flex-direction:row;align-items:center;gap:.35rem}
.fx-form input,.fx-form select,.fx-form textarea{font:inherit;font-size:.86rem;color:var(--gray-900)}
.fx-form__acts{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.2rem}

@media (max-width:1000px){
  /* Empilha, e a ÁRVORE vem primeiro: os ajustes do fluxo se mexem uma vez, a árvore o tempo todo. */
  .fx-grid{grid-template-columns:1fr}
  .fx-col--lado{position:static}
  .fx-passo{margin-left:0 !important}   /* recuo por nível não cabe em tela estreita */
  .fx-op__val,.fx-op__tag{flex-basis:100%}
}