:root{
  /* O que o NAVEGADOR pinta sozinho: a listinha aberta do <select>, a barra de
     rolagem, o autofill, o date picker. Sem isto ele desenha tudo em modo
     claro — e a option, que herda --tinta (quase branco no escuro), some no
     fundo branco do popup. Acompanha o tema nos três caminhos abaixo. */
  color-scheme: light;
  --paper:#f6f4ef; --card:#fffdf9; --tinta:#1e222c; --mut:#6b7280; --lin:#e4e0d6;
  --lar:#e0762a; --tea:#12a594; --bom:#12a594; --mal:#b3261e; --ale:#c4820e;
  /* Estado escolhido/ativo e ação (C3 rodada 3): laranja no clássico, onde ele é
     a cor de ação; o layout novo redefine pra --acao em visual.css. --lar puro
     fica só pra realce e marca. --lar é o mesmo nos temas, então um lugar só. */
  --escolhido:var(--lar); --escolhido-txt:#fff;
  /* Cor AB2 (etapa C, spec 2026-09-24-refinamento-visual-design): ação em
     PETRÓLEO; laranja só como REALCE pontual (barra de progresso, ícone do item
     ativo — nunca botão nem aviso); SUCESSO num verde próprio; âmbar só de
     atenção. Variáveis NOVAS: o clássico não as usa (fora os baldes, que vivem
     nos dois layouts). Os valores passam por teste (refinamentoVisual.test.js):
     contraste AA e separação sob daltonismo, nos quatro caminhos do tema. O
     realce e o sucesso claros ficaram um tom abaixo do que o spec desenhou —
     os do spec reprovavam essas duas travas (ver o plano da etapa C).
     --sobre-forte: texto sobre cor forte que NÃO troca no escuro (o --mal do
     botão de perigo sólido) — branco nos quatro caminhos, com teste de AA. */
  --acao:#0f5e5a; --acao-txt:#ffffff; --realce:#c9661f; --sucesso:#0aa050; --sobre-forte:#ffffff;
  /* --espera: a bolinha "sem resposta ainda" dos baldes — cinza sólido, o --mut
     misturado ao --paper (80% no claro: o mais claro que ainda dá 3:1 sobre o
     pote; 60% no escuro: acima disso encosta no --acao sob daltonismo).
     Contraste e ΔRGB travados em refinamentoVisual.test.js. */
  --espera:#878c96;
  --som:0 1px 2px rgba(30,34,44,.06), 0 4px 16px rgba(30,34,44,.04);
  /* gaps do stepper de acionamento */
  --g1:4px; --g2:8px; --g3:12px; --g4:16px; --g5:24px;
}
@media (prefers-color-scheme:dark){
  :root{color-scheme: dark;
        --paper:#12151a; --card:#191d24; --tinta:#e8e6e1; --mut:#98a1b0; --lin:#2a303a;
        --acao:#3fb3a8; --acao-txt:#0d1f1e; --realce:#f08a3c; --sucesso:#a3e36a; --sobre-forte:#ffffff; --espera:#626974;
        --som:0 1px 2px rgba(0,0,0,.3), 0 4px 20px rgba(0,0,0,.2);}
}
/* Aparência escolhida (Configurações → Aparência): vence o prefers-color-scheme.
   MESMAS variáveis do :root (claro) e do @media (escuro) — inclusive as da AB2:
   sem elas no claro, sistema escuro + tema claro herdaria o petróleo do escuro. */
html[data-tema="claro"]{color-scheme: light;
                         --paper:#f6f4ef; --card:#fffdf9; --tinta:#1e222c; --mut:#6b7280; --lin:#e4e0d6;
                         --acao:#0f5e5a; --acao-txt:#ffffff; --realce:#c9661f; --sucesso:#0aa050; --sobre-forte:#ffffff; --espera:#878c96;
                         --som:0 1px 2px rgba(30,34,44,.06), 0 4px 16px rgba(30,34,44,.04);}
html[data-tema="escuro"]{color-scheme: dark;
                          --paper:#12151a; --card:#191d24; --tinta:#e8e6e1; --mut:#98a1b0; --lin:#2a303a;
                          --acao:#3fb3a8; --acao-txt:#0d1f1e; --realce:#f08a3c; --sucesso:#a3e36a; --sobre-forte:#ffffff; --espera:#626974;
                          --som:0 1px 2px rgba(0,0,0,.3), 0 4px 20px rgba(0,0,0,.2);}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--tinta);font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* Escalas FLUIDAS (spec 2026-09-24 §3.1). Variáveis novas: o clássico não as
   usa. Fonte e espaço em rem (acompanham a fonte do navegador e o zoom). */
:root{
  --fs-1:.75rem; --fs-2:.8125rem; --fs-3:.875rem; --fs-4:1rem;
  --fs-5:clamp(1.125rem, 1rem + .5vw, 1.375rem); --fs-6:clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --esp-1:.25rem; --esp-2:.5rem; --esp-3:.75rem; --esp-4:1rem; --esp-5:1.5rem; --esp-6:2rem; --esp-7:3rem; --esp-8:4rem;
  --bl-larg:15rem; --bl-trilho:3.5rem; --bl-sub:15rem; --toque:2.75rem; --raio-1:.5rem; --raio-2:.75rem;
}

/* ── app bar ─────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--lin)}
.bar{max-width:1400px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:18px}
.anel{width:26px;height:26px;border-radius:50%;border:4px solid var(--lar);border-right-color:var(--tea);border-bottom-color:transparent;transform:rotate(-30deg)}
.grau{color:var(--lar)}
/* FICHA DO CLIENTE (aba Clientes). A casca (cfgwrap/cfgnav/cfgbody) é a
   mesma da página de Configurações — aqui só o topo e a marca do cartão. */
.cliMarca{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--lin);border-radius:10px;overflow:hidden;background:var(--paper)}
.cliMarca img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.cliMarca.g{width:56px;height:56px;border-radius:13px}
/* Sem logo, as INICIAIS: um quadrado vazio parece imagem quebrada, e a lista
   precisa ficar legível antes de alguém cadastrar marca nenhuma. */
.cliIni{font-weight:800;font-size:14px;letter-spacing:-.02em;color:var(--mut)}
.cliMarca.g .cliIni{font-size:19px}
.cliCard{transition:background .12s}
.cliCard:hover{background:color-mix(in srgb,var(--escolhido) 7%,transparent)}
/* WHITE-LABEL: com logo da instalação cadastrada, a marca dela lidera e o
   Guia360° vira assinatura de plataforma (ver docs/referencia/marca/).
   Altura travada, largura automática: a logo chega no tamanho que subiram e
   travar só a altura preserva a proporção de qualquer formato. */
.logoCli{height:26px;width:auto;max-width:190px;object-fit:contain;display:block}
.logoSep{width:1px;height:20px;background:var(--lin);flex:none}
.logoPlat{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--mut);letter-spacing:0}
/* O anel sobrevive pequeno: é o que mantém a atribuição da plataforma sem
   disputar atenção com a marca do cliente. */
.anelPq{width:13px;height:13px;border-width:2.5px}
/* Na tela de login a marca empilha: a logo do cliente grande em cima e a
   assinatura embaixo — ali há espaço vertical e ela é o primeiro contato. */
.login .logo{flex-direction:column;gap:7px}
.login .logoCli{height:38px;max-width:240px}
.login .logoSep{display:none}
.eu{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut)}
/* ícone SVG genérico (herda a cor do texto) — substitui emoji-ícone */
.ico{width:1em;height:1em;flex:none;vertical-align:-.12em}
/* "Ver como" (visão de cliente e de papel) — UM controle segmentado no centro
   da barra: [olho] Ver como [cliente ▾] | [papel ▾], numa moldura só com um
   traço fino entre os dois seletores. Neutro por padrão. Com a visão ativa
   (header.visaoOn) só o olho e um ponto viram --ale e o texto dos seletores
   engrossa — sem preenchimento: a faixa laranja de antes gritava mais que o
   aviso pedia (29/09). O escopado com vários clientes usa a mesma moldura, com
   um seletor só. */
.vchip{display:inline-flex;align-items:center;gap:var(--esp-2);background:transparent;border:1px solid var(--lin);border-radius:.4375rem;padding:.1875rem var(--esp-2) .1875rem .625rem;color:var(--mut);font-size:var(--fs-2)}
.vcRot{position:relative;display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap}
.vchip .ico{width:.9375rem;height:.9375rem;color:var(--mut)}
.vcPonto{display:none;position:absolute;top:-.125rem;left:.625rem;width:.4375rem;height:.4375rem;border-radius:50%;background:var(--ale);box-shadow:0 0 0 .125rem var(--paper)}
.vcSep{width:1px;align-self:stretch;margin:.125rem 0;background:var(--lin)}
.vchip select{width:auto;border:0;background:transparent;color:inherit;font:inherit;font-size:var(--fs-2);font-weight:500;padding:0 .125rem;cursor:pointer;max-width:13.75rem}
.vchip select:focus{outline:none}
.vchip select:focus-visible{outline:2px solid var(--escolhido);outline-offset:2px;border-radius:.25rem}
/* tela estreita: sobra o ícone — o título de cada seletor segue dizendo o que é */
@media (width <= 48em){.vchip .vcTxt{display:none}}
/* Os dois selects sem fundo próprio (o chip da visão e a troca de campanha na
   Visão) são os únicos de onde o navegador não tira cor nenhuma pra listinha
   aberta: `background:transparent` devolve popup claro. Os demais herdam da
   regra genérica `input,select,textarea{background:var(--paper)}`. */
.vchip select option,.dashV .campSwitch select option{background:var(--card);color:var(--tinta)}
header.visaoOn .vchip .ico{color:var(--ale)}
header.visaoOn .vcPonto{display:block}
header.visaoOn .vchip select{font-weight:600}
/* O "Ver como" fica NO CENTRO da barra: grade de três colunas (marca · seletor
   · usuário) com as laterais iguais. O mínimo de cada lateral é o conteúdo
   INTEIRO (max-content), não zero nem min-content: com zero o usuário ficaria
   por baixo do seletor; com min-content o "nome ▾" do botão quebraria em duas
   linhas. Se a marca ou o usuário não couberem na metade, o seletor cede o
   centro exato. O `grid-column` explícito mantém o centro quando a marca some
   da barra. No celular a barra volta ao flex (o seletor logo depois da marca). */
@media (width > 45em){
  .bar{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr)}
  .bar>.logo{grid-column:1;justify-self:start}
  .bar>#visaoBox{grid-column:2}
  .bar>.eu{grid-column:3;justify-self:end}
}
nav{max-width:1400px;margin:0 auto;padding:0 20px 10px;display:flex;flex-wrap:wrap;gap:6px}
nav button{background:transparent;border:1px solid transparent;color:var(--mut);border-radius:9px;padding:7px 13px;cursor:pointer;font-size:13.5px;font-weight:600;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
nav button .ico{width:15px;height:15px}
nav button:hover{color:var(--tinta);background:color-mix(in srgb,var(--tinta) 5%,transparent)}
nav button.on{background:var(--card);border-color:var(--lin);color:var(--tinta);box-shadow:var(--som)}
nav .esp{margin-left:auto} nav .cfg{border:1px solid var(--lin)} nav .cfg.on{border-color:var(--escolhido);color:var(--tinta)}
/* ── página de Configurações ──────────────────────────────────────────── */
.cfgwrap{display:grid;grid-template-columns:210px 1fr;gap:18px;align-items:start}
@media(max-width:760px){.cfgwrap{grid-template-columns:1fr}}
.cfgnav{background:var(--card);border:1px solid var(--lin);border-radius:14px;padding:8px;box-shadow:var(--som);position:sticky;top:120px}
.cfgnav button{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:0;color:var(--mut);font:inherit;font-size:13px;font-weight:600;text-align:left;padding:9px 11px;border-radius:9px;cursor:pointer}
.cfgnav button .ico{width:16px;height:16px;flex:none}
.cfgnav button:hover{color:var(--tinta);background:color-mix(in srgb,var(--tinta) 5%,transparent)}
.cfgnav button.on{background:color-mix(in srgb,var(--escolhido) 12%,transparent);color:var(--tinta)}
/* a volta pra lista de clientes, no topo das guias da ficha — um item da
   própria navegação (mesmo desenho), separado das guias por um respiro */
.cfgnav .cfgVolta{margin-bottom:var(--esp-2)}
.cfgnav .grp{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);padding:12px 11px 4px}
.cfgbody h2{font-size:17px;margin:0 0 4px}.cfgbody .sub{color:var(--mut);font-size:13px;margin:0 0 18px}
.big{display:flex;gap:10px;flex-wrap:wrap}
.opt{flex:1;min-width:130px;border:1.5px solid var(--lin);border-radius:12px;padding:14px;cursor:pointer;background:var(--paper);transition:.15s}
.opt:hover{border-color:var(--tea)} .opt.on{border-color:var(--escolhido);background:color-mix(in srgb,var(--escolhido) 7%,var(--card))}
.opt .t{font-weight:700;font-size:13.5px}.opt .d{font-size:12px;color:var(--mut);margin-top:3px}
.sel{padding:9px 11px;border:1px solid var(--lin);border-radius:9px;background:var(--paper);color:var(--tinta);font:inherit;font-size:13.5px;min-width:220px}
/* ── centro de notificações (header) ──────────────────────────────────── */
.wrapS{position:relative}
.sino{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:99px;border:1px solid var(--lin);background:var(--card);cursor:pointer;line-height:1;padding:0;color:var(--mut)}
.sino .ico{width:18px;height:18px}
.sino:hover{border-color:var(--tea);color:var(--tinta)}
.sinoBadge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--mal);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;box-sizing:border-box;line-height:1}
.notifMenu{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--lin);border-radius:13px;box-shadow:0 16px 40px rgba(0,0,0,.18);padding:8px;z-index:40;display:none}
.wrapS.open .notifMenu{display:block;animation:reveal .16s ease}
.notifMenu .cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 8px;border-bottom:1px solid var(--lin);margin-bottom:6px}
.notifMenu .cab b{font-size:13px}
.notifMenu .limpar{background:transparent;border:0;color:var(--mut);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.notifMenu .limpar:hover{color:var(--tinta)}
.notifLista{max-height:min(60vh,420px);overflow:auto;display:flex;flex-direction:column;gap:6px}
.notifItem{--sev:var(--ale);display:flex;gap:9px;padding:9px;border-radius:9px;background:var(--paper)}
.notifItem.err{--sev:var(--mal)} .notifItem.info{--sev:var(--ale)} .notifItem.ok{--sev:var(--bom)}
.notifItem.naolida{background:color-mix(in srgb,var(--sev) 9%,var(--paper))}
.notifItem .pt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--sev);margin-top:5px}
.notifItem .ct{flex:1;min-width:0}
.notifItem .tt{font-size:12.5px;font-weight:700;line-height:1.35;color:var(--tinta)}
.notifItem .rs{font-size:12px;color:var(--mut);line-height:1.4;margin-top:2px;word-break:break-word}
.notifItem .hr{font-size:10.5px;color:var(--mut);margin-top:3px}
.notifVazio{padding:22px 10px;text-align:center;color:var(--mut);font-size:12.5px;line-height:1.5}
/* ── menu do usuário (header) ─────────────────────────────────────────── */
.wrapU{position:relative}
.userbtn{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--lin);border-radius:99px;padding:4px 10px 4px 4px;cursor:pointer;color:var(--tinta);font:inherit;font-size:13px;font-weight:600}
.av{width:26px;height:26px;border-radius:50%;background:var(--escolhido);color:var(--escolhido-txt);display:grid;place-items:center;font-size:12px;font-weight:800}
.menu{position:absolute;right:0;top:calc(100% + 8px);width:260px;background:var(--card);border:1px solid var(--lin);border-radius:13px;box-shadow:0 16px 40px rgba(0,0,0,.18);padding:6px;z-index:40;display:none}
.wrapU.open .menu{display:block;animation:reveal .16s ease}
.menu .quem{padding:9px 11px 10px;border-bottom:1px solid var(--lin);margin-bottom:6px}
.menu .quem b{display:block;font-size:13px;color:var(--tinta)}.menu .quem span{font-size:11.5px;color:var(--mut)}
.menu .lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);padding:6px 11px 4px}
.menu .item{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:0;color:var(--tinta);font:inherit;font-size:13px;font-weight:600;text-align:left;padding:9px 11px;border-radius:9px;cursor:pointer}
.menu .item:hover{background:color-mix(in srgb,var(--tinta) 6%,transparent)}
.seg{display:flex;gap:4px;padding:2px 11px 8px}
.seg button{flex:1;background:var(--paper);border:1px solid var(--lin);color:var(--mut);border-radius:8px;padding:6px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.seg button.on{background:var(--card);border-color:var(--tea);color:var(--tinta);box-shadow:var(--som)}
/* seletor de idioma dos textos do tema (pt-BR | ES | EN): compacto, alinhado
   à esquerda dentro da seção, sem esticar os botões pela largura toda */
.segIdioma{padding:0 0 8px;gap:4px}
.segIdioma button{flex:0 0 auto;min-width:52px;padding:5px 12px}
.txtIdioma{display:flex;flex-direction:column}
/* Opção B (Kauã, 2026-09-11): a barra de idioma dos textos do tema fica FIXA
   no topo do painel enquanto Identidade está aberta — rolar os campos não
   tira o seletor de vista, e barra sempre à vista deixa claro que ali se
   edita UMA língua. O `sticky` gruda no `#estPainel` (a `.estSecao` perdeu o
   `overflow` que a prenderia). O `margin` negativo sangra a barra até a borda
   da seção; o `background` cobre os campos que rolam por baixo. Fora do
   estúdio (portalNovo) fica só a linha rotulada, sem grudar. */
.segIdiomaBar{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.segIdiomaLbl{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.segIdiomaBar .segIdioma{flex:1 1 auto;padding:0}
.estPane .segIdiomaBar{position:sticky;top:0;z-index:4;margin:0 -12px 10px;padding:8px 12px;background:var(--paper);border-bottom:1px solid var(--lin)}
.msel{width:100%;padding:7px 10px;border:1px solid var(--lin);border-radius:8px;background:var(--paper);color:var(--tinta);font:inherit;font-size:12.5px}
.hr{height:1px;background:var(--lin);margin:6px 4px}
/* Convite da nova navegação (header do clássico, fixo — decisão de 25/09).
   Chamativo de propósito: pílula no petróleo da navegação nova (o botão já é
   uma amostra do que a pessoa vai ver), um brilho que cruza a cada 3s e uma
   bolinha pulsando no canto. Quem pede "reduzir movimento" vê só a pílula. */
.btn.conviteNova{position:relative;overflow:visible;border-radius:99rem;padding:0 .875rem;
  background:linear-gradient(90deg,var(--acao),color-mix(in srgb,var(--acao) 70%,var(--sucesso)));color:var(--acao-txt);
  box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--acao) 18%,transparent)}
.btn.conviteNova::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--card) 55%,transparent) 50%,transparent 70%);
  background-size:250% 100%;background-position:150% 0;animation:conviteBrilho 3s ease-in-out infinite}
.btn.conviteNova::before{content:'';position:absolute;top:-.1875rem;right:-.1875rem;width:.5625rem;height:.5625rem;border-radius:50%;
  background:var(--realce);box-shadow:0 0 0 0 color-mix(in srgb,var(--realce) 60%,transparent);animation:convitePulso 2s infinite}
@keyframes conviteBrilho{0%,55%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes convitePulso{70%{box-shadow:0 0 0 .4375rem transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.btn.conviteNova::after,.btn.conviteNova::before{animation:none}}
/* rótulo curto em tela estreita: numa linha só, sem empurrar o header */
.btn.conviteNova{white-space:nowrap}
.btn.conviteNova .cnCurto{display:none}
@media (width <= 48em){.btn.conviteNova .cnLongo{display:none}.btn.conviteNova .cnCurto{display:inline}}

/* ── layout ──────────────────────────────────────────────────────────── */
main{max-width:1400px;margin:0 auto;padding:32px 20px 24px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--lin);border-radius:14px;padding:16px;box-shadow:var(--som)}
.card h2{margin:0 0 3px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.card .dica{color:var(--mut);font-size:12px;margin:-2px 0 12px}
.kpi{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.kpi small{font-size:13px;font-weight:600;color:var(--mut);letter-spacing:0}
.subtxt{font-size:12px;color:var(--mut);margin-top:3px}
h1{font-size:21px;margin:0 0 3px;letter-spacing:-.01em}
.lead{color:var(--mut);font-size:13.5px;margin:0 0 16px}
/* ── funil ───────────────────────────────────────────────────────────── */
.passo{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--lin)}
.passo:last-child{border:0}
.passo .rot{width:130px;font-size:13px;font-weight:600}
.barra{flex:1;height:26px;background:color-mix(in srgb,var(--tinta) 6%,transparent);border-radius:7px;overflow:hidden;position:relative}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--lar),color-mix(in srgb,var(--lar) 70%,var(--tea)));border-radius:7px}
.passo .n{width:96px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.passo .n b{font-size:15px}
.queda{color:var(--mal);font-size:11px;font-weight:700}
/* ── colunas (mapa da carga) ─────────────────────────────────────────── */
.col{background:color-mix(in srgb,var(--tinta) 3%,transparent);border:1px solid var(--lin);border-radius:12px;padding:10px;min-height:150px}
.col h3{margin:0 0 2px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.col .qtd{font-size:11px;color:var(--mut);margin-bottom:9px}
.balde{margin-top:4px}
.balde>summary{cursor:pointer;list-style:none;font-size:12px;color:var(--mut)}
.balde>summary::-webkit-details-marker{display:none}
.balde>summary::before{content:'▸ ';color:var(--mut)}
.balde[open]>summary::before{content:'▾ '}
.docLista{margin:4px 0 6px 14px;max-height:220px;overflow:auto;border-left:2px solid var(--lin);padding-left:8px}
.docItem{font-size:12px;color:var(--tinta);padding:2px 0;font-variant-numeric:tabular-nums}
/* ── tabela / formulário ─────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:7px 8px;border-bottom:1px solid var(--lin)}
td{padding:8px;border-bottom:1px solid var(--lin);vertical-align:middle}
tr:last-child td{border:0}
/* `.tabela` (Mesa de negociação: contratos/candidatos/acordos) — borda e
   cabeçalho próprios; table/th/td acima seguem genéricos pro resto do
   painel. `.tabela-wrap` dá scroll horizontal em tela estreita sem mexer
   na estrutura da tabela. */
.tabela-wrap{overflow-x:auto}
table.tabela{border:1px solid var(--lin);border-radius:10px;overflow:hidden}
table.tabela th{background:color-mix(in srgb,var(--tinta) 4%,var(--card))}
table.tabela tbody tr:nth-child(even){background:color-mix(in srgb,var(--tinta) 2%,transparent)}
.pill{display:inline-block;border-radius:99px;padding:2px 9px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--tinta) 8%,transparent)}
.pill.bom{background:color-mix(in srgb,var(--bom) 15%,transparent);color:var(--bom)}
.pill.mal{background:color-mix(in srgb,var(--mal) 13%,transparent);color:var(--mal)}
.pill.ale{background:color-mix(in srgb,var(--ale) 15%,transparent);color:var(--ale)}
input,select,textarea{font:inherit;width:100%;background:var(--paper);border:1px solid var(--lin);color:var(--tinta);border-radius:9px;padding:9px 11px}
textarea{min-height:260px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin:0 0 5px}
.campo{margin-bottom:12px}
/* Campo de imagem: URL colável + botão "Enviar arquivo" na mesma linha, com
   miniatura e linha de status logo abaixo. Reusa .btn.sec.pq e os tokens do
   tema pra não destoar do estúdio. */
.campoImg .imgLinha{display:flex;gap:8px;align-items:center}
.campoImg .imgLinha input{flex:1;min-width:0}
.campoImg .imgLinha .btn{flex:none;white-space:nowrap}
.campoImg .imgThumb{margin-top:6px;width:40px;height:40px;object-fit:contain;border:1px solid var(--lin);border-radius:6px;background:var(--paper)}
.campoImg .imgStatus{display:block}
.campoImg .imgStatus.erro{color:var(--ale,#b45309)}
/* `text-decoration:none` porque `.btn` também veste `<a>` (ex.: "abrir em
   nova aba" do palco do estúdio) — sem isto o link sublinha por baixo do
   botão, apesar das classes .btn.sec já darem fundo/borda/padding a ele */
.btn{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;background:var(--escolhido);color:var(--escolhido-txt);border:0;border-radius:9px;min-height:38px;padding:0 16px;line-height:1;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;text-decoration:none}
.btn:hover{filter:brightness(1.06)} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:transparent;color:var(--tinta);border:1px solid var(--lin)}
.btn.pq{min-height:30px;padding:0 11px;font-size:12px;border-radius:9px}
.btn+.btn{margin-left:6px}

/* ── mesa de negociação: card de oferta + ações ── */
.btn.perigo{background:transparent;color:var(--mal);border:1px solid var(--mal)}
.btn.perigo:hover{background:color-mix(in srgb,var(--mal) 8%,transparent)}
.btn.perigo.solido{background:var(--mal);color:#fff;border-color:transparent}
/* resumo e contato num card só (redesign T5) */
.neg-resumo{display:grid;gap:var(--esp-4)}
.neg-resumo-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--esp-3)}
.neg-resumo-grade div{display:grid}
.neg-resumo-grade span{color:var(--mut);font-size:var(--fs-2)}
.neg-resumo-grade b{font-size:var(--fs-5);font-variant-numeric:tabular-nums}
.neg-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--esp-3)}
.neg-campos .campo{margin:0}
.neg-rodape{display:flex;justify-content:flex-end;align-items:center;gap:var(--esp-2);flex-wrap:wrap;border-top:1px solid var(--lin);padding-top:var(--esp-3)}
.neg-rodape-nota{margin-right:auto;font-size:var(--fs-2);color:var(--mut)}
/* ── mesa de negociação: contexto + stepper + workspace 2-col + chip/cor
   por carteira ────────────────────────────────────────────────────────
   `--cor` (cor da carteira) vem inline no elemento; sem ela, cai no
   --acao/--tinta do tema, conforme o uso. */
/* cabeçalho: busca em linha (segmentado + campo + Buscar) e faixa da pessoa
   (identidade + abas + stepper), redesign T1 */
.neg-busca{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap;justify-content:flex-end}
.neg-busca input{flex:1 1 11rem;max-width:18rem}
.neg-seg{display:inline-flex;border:1px solid var(--lin);border-radius:99rem;padding:1px;background:var(--card)}
.neg-seg button{font:inherit;font-size:var(--fs-2);font-weight:600;border:0;background:transparent;color:var(--mut);border-radius:99rem;padding:var(--esp-1) var(--esp-3);cursor:pointer}
.neg-seg button[aria-pressed="true"]{background:var(--tinta);color:var(--card)}
.neg-espera{margin-top:var(--esp-3);display:flex;align-items:center;gap:var(--esp-2)}
.neg-pessoa{display:flex;align-items:center;gap:var(--esp-3) var(--esp-4);flex-wrap:wrap;margin-top:var(--esp-3)}
.neg-pessoa-nome{font-weight:800;font-size:var(--fs-4)}
.neg-pessoa-meta{font-size:var(--fs-2);color:var(--mut)}
.neg-passos{display:flex;align-items:center;gap:var(--esp-2);margin-left:auto;flex-wrap:wrap;font-size:var(--fs-2)}
.neg-passo{display:inline-flex;align-items:center;gap:var(--esp-1);color:var(--mut);font-weight:600}
.neg-passo-b{width:1.1rem;height:1.1rem;border-radius:99rem;border:1.5px solid var(--lin);display:grid;place-items:center;font-size:.6rem;font-weight:800}
.neg-passo.ok,.neg-passo.ag{color:var(--tinta)}
.neg-passo.ok .neg-passo-b{background:var(--acao);border-color:var(--acao);color:var(--acao-txt)}
.neg-passo.ag .neg-passo-b{border-color:var(--acao);color:var(--acao);box-shadow:0 0 0 3px color-mix(in srgb,var(--acao) 18%,transparent)}
.neg-passos .neg-sep{color:var(--lin)}
/* chip de logo/cor por carteira. ESCOPADO em `span.logo`: `.logo` já existe
   como a marca do app-bar/login (um <div>), e o chip da mesa é um <span> —
   scopear por elemento evita que o chip clobbere a marca do painel. */
span.logo{flex:none;width:2.125rem;height:2.125rem;border-radius:.55rem;display:grid;place-items:center;font-weight:800;font-size:var(--fs-2);color:#fff;letter-spacing:.02em;background:var(--cor,var(--tinta));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
span.logo.sm{width:1.625rem;height:1.625rem;border-radius:.45rem;font-size:.6875rem}
/* com logo (img): fundo branco pra PNG transparente ler; --cor fica só nas iniciais */
span.logo.img{background:#fff}
span.logo.img img{padding:2px}
.neg-logo-img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
/* seções das ofertas (Segunda via × Negociação por escopo) — deixa explícito */
.neg-sec{display:flex;align-items:baseline;gap:var(--esp-3);margin:var(--esp-4) 0 2px;flex-wrap:wrap}
.neg-sec-t{font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-weight:800}
.neg-sec-s{font-size:var(--fs-1);color:var(--mut)}
/* lista de carteiras/contratos do cliente (trocar contrato); o item já
   aberto não tem onclick (negNegociar) */
.clist{display:flex;flex-direction:column;gap:var(--esp-2)}
.citem{display:flex;align-items:center;gap:var(--esp-3);padding:var(--esp-2) var(--esp-3);border:1px solid var(--lin);border-radius:var(--raio-2);cursor:pointer;background:var(--card)}
.citem:hover{background:color-mix(in srgb,var(--tinta) 3%,var(--card))}
.citem.on{border-color:var(--cor,var(--acao));background:color-mix(in srgb,var(--cor,var(--acao)) 6%,var(--card));cursor:default}
.citem .info{display:flex;flex-direction:column;gap:1px;min-width:0}
.citem .l1{font-weight:700;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citem .l2{font-size:.6875rem;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citem .rt{margin-left:auto;text-align:right;flex:none}
.citem .rt .d{font-weight:700;font-size:var(--fs-1);font-variant-numeric:tabular-nums}
/* rótulo pequeno de card (redesign T2/T4): usado pelos cards da lateral
   (Contato, No funil) — reusado, não recriado, quando outra tarefa precisar */
.neg-rot{font-size:var(--fs-1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
/* moldura de 2 colunas (redesign T2): lateral fixa da pessoa + conteúdo principal */
.neg-trab{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:var(--esp-4);align-items:start;margin-top:var(--esp-3)}
/* no celular a lateral vem antes do conteúdo (ordem do DOM); no passo
   Negociar isso rolava Contato/Saldo/Produtos/Contratos antes das ofertas —
   o conteúdo principal precisa vir primeiro na tela pequena */
@media (width <= 48em){.neg-trab{grid-template-columns:1fr}.neg-principal{order:-1}}
/* min-width:0 nos itens: sem isso e-mail/contrato longos alargam o card além
   dos 15rem e ele passa por baixo do conteúdo principal */
.neg-lado{display:grid;gap:var(--esp-3);min-width:0}
.neg-lado>*{min-width:0}
.neg-lado-card{display:grid;gap:var(--esp-2);padding:var(--esp-3) var(--esp-4)}
.neg-principal{display:grid;gap:var(--esp-3);min-width:0}
.neg-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--esp-1) var(--esp-3);font-size:var(--fs-2);margin:0}
.neg-kv dt{color:var(--mut)} .neg-kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.neg-ev{margin:0;padding:0;list-style:none;display:grid;gap:var(--esp-2);font-size:var(--fs-2)}
.neg-ev li{display:grid;grid-template-columns:3.2rem 1fr;gap:var(--esp-2)}
.neg-ev time{color:var(--mut);font-variant-numeric:tabular-nums}
.neg-historico summary{cursor:pointer;font-weight:600}
.neg-historico-t{margin:var(--esp-4) 0 var(--esp-2);font-size:var(--fs-3)}
.neg-lista{margin:0;padding-left:var(--esp-4)}
/* lista de contratos agrupada por carteira (redesign T3): div em grade, não
   <table> — reflowa em cartões no celular sem depender da casca */
.neg-contratos{display:grid;padding:0;overflow:hidden}
.neg-ct{display:grid;grid-template-columns:minmax(0,2fr) 1fr 1fr 1fr auto;gap:var(--esp-3);align-items:center;padding:var(--esp-3) var(--esp-4);border-top:1px solid var(--lin);font-size:var(--fs-3)}
.neg-ct-cab{border-top:0;padding-block:var(--esp-2);font-size:var(--fs-1);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.neg-ct-id{display:grid}
.neg-ct-id small{color:var(--mut);font-size:var(--fs-2)}
.neg-ct-acao{justify-self:end}
.neg-grupo{display:flex;align-items:center;gap:var(--esp-2) var(--esp-3);flex-wrap:wrap;padding:var(--esp-2) var(--esp-4);border-top:1px solid var(--lin);background:color-mix(in srgb,var(--tinta) 3%,var(--card))}
.neg-ct-cab + .neg-grupo{border-top:0}
.neg-grupo .btn,.neg-grupo-verif{margin-left:auto}
.neg-grupo-meta{font-size:var(--fs-2);color:var(--mut)}
.neg-pill-neutro{background:color-mix(in srgb,var(--tinta) 4%,var(--card));color:var(--mut);border:1px solid var(--lin)}
@media (width <= 40em){
  .neg-ct-cab{display:none}
  .neg-ct{grid-template-columns:1fr 1fr;row-gap:var(--esp-2)}
  .neg-ct-id{grid-column:1/-1}
  .neg-ct [data-rot]::before{content:attr(data-rot);display:block;font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
  .neg-ct-acao{grid-column:1/-1;justify-self:stretch}
  .neg-ct-acao .btn{width:100%;justify-content:center}
}
/* passo Negociar (redesign T4): cabeçalho do contrato, inclusos (modo
   "todos"), vencimento no topo e o card de oferta novo */
.neg-cab-contrato{display:flex;align-items:center;gap:var(--esp-2) var(--esp-4);flex-wrap:wrap;border-top:3px solid var(--cor,var(--acao))}
.neg-cab-contrato .neg-cab-id{display:grid}
.neg-cab-contrato .neg-cab-id span{font-size:var(--fs-2);color:var(--mut)}
.neg-cab-div{margin-left:auto;display:grid;text-align:right}
.neg-cab-div b{font-size:var(--fs-5);font-variant-numeric:tabular-nums}
.neg-inclusos{display:grid;border:1px solid var(--lin);border-radius:var(--raio-1);overflow:hidden;background:var(--card)}
.neg-inclusos label{display:grid;grid-template-columns:auto 1fr auto;gap:var(--esp-3);align-items:center;padding:var(--esp-2) var(--esp-3);border-top:1px solid var(--lin);font-size:var(--fs-3)}
.neg-inclusos label:first-child{border-top:0}
.neg-inclusos small{display:block;color:var(--mut);font-size:var(--fs-2)}
.neg-inclusos-soma{display:flex;justify-content:space-between;padding:var(--esp-2) var(--esp-3);border-top:1px solid var(--lin);background:color-mix(in srgb,var(--tinta) 3%,var(--card));font-size:var(--fs-3)}
.neg-explica{margin:0;font-size:var(--fs-2);color:var(--mut)}
.neg-venc{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;font-size:var(--fs-3)}
.neg-venc select,.neg-venc input{width:auto;flex:0 1 14rem}
.neg-ofertas{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:var(--esp-3)}
.neg-of{background:var(--card);border:1px solid var(--lin);border-radius:var(--raio-2);padding:var(--esp-4);display:grid;gap:var(--esp-2);align-content:start}
.neg-of.top{border-color:color-mix(in srgb,var(--sucesso) 45%,var(--lin))}
.neg-of-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.neg-of-cond{font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.neg-of-cond small{font-size:var(--fs-3);font-weight:600;color:var(--mut);letter-spacing:0}
.neg-of-extra{font-size:var(--fs-2);color:var(--mut)}
.neg-of-entrada{font-size:var(--fs-2);font-weight:600;color:var(--acao)}
.neg-of-total{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--lin);padding-top:var(--esp-2);font-size:var(--fs-3)}
.neg-of-total b{font-size:var(--fs-4)}
.neg-of-delta{font-size:var(--fs-2);font-variant-numeric:tabular-nums}
.neg-of-delta.menos{color:color-mix(in srgb,var(--sucesso) 65%,var(--tinta));font-weight:700}
.neg-of-delta.mais{color:var(--mut)}
.neg-of .btn{justify-self:start}
/* seleção de parcelas (legado BS2, dentro de negSecoesOfertas), candidatos da
   busca e cabeçalho da "Visão da pessoa" — style= inline removidos (redesign T7) */
.neg-parcelas{margin-top:var(--esp-3)}
.neg-parcelas-item{gap:var(--esp-2);margin-top:var(--esp-2)}
.neg-parcelas-rodape{justify-content:flex-end;margin-top:var(--esp-2)}
.neg-candidatos{margin-top:var(--esp-3)}
.neg-visao-cab{gap:var(--esp-3);margin-bottom:var(--esp-2)}
/* modal "Propostas" da amortização (cartão Daycoval) — linha min/max do slider */
.neg-am-faixa{display:flex;justify-content:space-between}
/* resultado honesto + acordos com diálogo de cancelamento (redesign T6) */
.neg-sucesso{display:grid;gap:var(--esp-4);margin-top:var(--esp-3)}
.neg-sucesso-t{display:flex;align-items:center;gap:var(--esp-3)}
.neg-sucesso-t h3{font-size:var(--fs-5)}
.neg-sucesso-marca{width:2.25rem;height:2.25rem;border-radius:99rem;display:grid;place-items:center;background:color-mix(in srgb,var(--sucesso) 16%,transparent);color:color-mix(in srgb,var(--sucesso) 70%,var(--tinta));font-weight:800}
.neg-boleto{border:1px dashed var(--lin);border-radius:var(--raio-1);padding:var(--esp-3) var(--esp-4);display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;background:color-mix(in srgb,var(--tinta) 3%,var(--card))}
.neg-boleto-txt{display:grid;flex:1 1 16rem}
.neg-boleto-txt span{font-size:var(--fs-2);color:var(--mut)}
.neg-linha-dig{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:var(--fs-2);overflow-wrap:anywhere}
.neg-instrucoes{margin:0;font-size:var(--fs-3);white-space:pre-line}
.neg-acordo{display:grid;gap:var(--esp-3);margin-top:var(--esp-3)}
.neg-acordo-topo{display:flex;align-items:center;gap:var(--esp-2) var(--esp-3);flex-wrap:wrap}
.neg-acordo-topo .btn{margin-left:auto}
.neg-td-acao{text-align:right}
/* estado vazio: guia à esquerda + recentes à direita; empilha no celular */
.neg-vazio{display:grid;grid-template-columns:1fr;gap:var(--esp-4);margin-top:var(--esp-4)}
@media (min-width:48em){.neg-vazio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.neg-vazio h2{font-size:var(--fs-4);margin:0 0 var(--esp-3)}
.neg-vazio-ico{width:2rem;height:2rem;color:var(--mut);margin-bottom:var(--esp-2)}
.neg-vazio-passos{list-style:none;counter-reset:passo;margin:0 0 var(--esp-3);padding:0;display:grid;gap:var(--esp-3)}
.neg-vazio-passos li{counter-increment:passo;display:grid;grid-template-columns:auto 1fr;column-gap:var(--esp-3);align-items:center}
.neg-vazio-passos li::before{content:counter(passo);grid-row:span 2;width:1.5rem;height:1.5rem;border-radius:99rem;border:1.5px solid var(--acao);color:var(--acao);display:grid;place-items:center;font-size:var(--fs-2);font-weight:800}
.neg-rec-lista{list-style:none;margin:0;padding:0}
.neg-rec-lista li{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;padding:var(--esp-2) 0;border-top:1px solid var(--lin)}
.neg-rec-lista li:first-child{border-top:0}
.neg-rec-info{display:grid;flex:1 1 9rem;min-width:0}
.neg-rec-hora{white-space:nowrap}

/* Abas internas do formulário de Portal (Identidade/Tema/SEO/Acesso/Avançado) */
.ptTabs button.on{background:color-mix(in srgb,var(--escolhido) 12%,transparent);border-color:var(--escolhido);color:var(--tinta)}
/* Editor de blocos por slot (Task 3.2): slot é a moldura tracejada da tela,
   bloco é o cartão sólido dentro dela, rodapé fica fixo pro Salvar/Publicar
   nunca sumirem de vista numa tela com muitos blocos. */
.ptSlot{border:1px dashed var(--lin);border-radius:10px;padding:10px;margin:10px 0}
/* Molde do slot: o cabeçalho diz QUANTO cabe ("2 de 6") e a linha abaixo diz
   O QUE cabe, em uma frase. `.ptMolde.aviso` é a caixa da tela da jornada
   (só tema) — reusa os tokens de `.aviso.info`, que é o mesmo tom de "leia
   isto antes de procurar o que não existe aqui". */
.ptSlotCab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 4px}
.ptSlotCab h3{margin:0;font-size:14px}
.ptSlotCab small{color:var(--mut);font-size:11.5px;white-space:nowrap}
.ptMolde{color:var(--mut);font-size:12px;margin:0 0 8px}
.ptMolde.aviso{color:var(--tinta);font-size:13px;margin:10px 0;background:color-mix(in srgb,var(--ale) 9%,var(--card));border-color:color-mix(in srgb,var(--ale) 32%,var(--lin))}
.ptBloco{border:1px solid var(--lin);border-radius:8px;padding:8px;margin:6px 0;background:var(--card)}
.ptRodape{position:sticky;bottom:0;background:var(--paper);padding:8px 0;border-top:1px solid var(--lin);display:flex;gap:8px;flex-wrap:wrap}
/* Preview e Histórico (Task 3.3) precisam de mais largura que o dialog
   padrão (560px) — o preview é um site inteiro num iframe. */
dialog.ptDlg{width:min(1100px,95vw);max-width:min(1100px,95vw)}
/* ── O ESTÚDIO (Task C.2) ────────────────────────────────────────────────
   Tela dividida: painel de edição fixo à esquerda, palco (iframe do portal)
   à direita. O palco precisa da largura toda que sobrar — por isso a sidebar
   de Configurações some enquanto o estúdio está aberto (`.estudioAberto`),
   em vez de espremer o preview em ~40% da tela. */
.cfgwrap.estudioAberto{grid-template-columns:1fr}
.cfgwrap.estudioAberto .cfgnav{display:none}
.estudio{display:grid;grid-template-columns:360px 1fr;gap:14px;align-items:start}
/* o painel rola sozinho: um layout com 30 blocos não pode empurrar o palco
   pra fora da tela (o preview tem de ficar visível enquanto se edita).
   `scrollbar-*` tira a barra cinza padrão do SO (que sobrava colada entre o
   painel e o palco) e pinta uma fina, no tema; `scrollbar-gutter:stable`
   reserva o espaço dela sempre, pra o conteúdo não pular 8px quando o
   acordeão passa a caber/não caber na altura visível. */
.estPainel{position:sticky;top:120px;max-height:calc(100vh - 150px);overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--lin) transparent;scrollbar-gutter:stable}
.estPainel::-webkit-scrollbar{width:8px}
.estPainel::-webkit-scrollbar-thumb{background:var(--lin);border-radius:8px}
.estPainel::-webkit-scrollbar-track{background:transparent}
.estTopo{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}
/* SEM `overflow:hidden` de propósito: ele criaria um contêiner de rolagem e
   prenderia a barra de idioma (`position:sticky`) DENTRO da seção, em vez de
   no `#estPainel`. O arredondamento do topo migrou pro `.estCab` (abaixo). */
.estSecao{border:1px solid var(--lin);border-radius:10px;margin-bottom:10px}
/* `::after` é o chevron (▸ fechado, ▾ aberto) — CSS puro, sem tocar o HTML
   do cabeçalho a cada clique. `justify-content:space-between` empurra ele
   pra ponta oposta do rótulo. */
.estCab{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid transparent;border-radius:9px 9px 0 0;padding:10px 12px;font:inherit;font-weight:700;color:var(--tinta);cursor:pointer}
.estCab::after{content:'▸';font-size:11px;color:var(--mut);flex:0 0 auto}
.estCab.on{background:color-mix(in srgb,var(--escolhido) 12%,transparent);border-bottom-color:var(--lin)}
.estCab.on::after{content:'▾'}
.estPane{padding:10px 12px}
/* (minor #6 da review de branch) O sticky morava em `.estPalco` inteiro —
   mas o iframe cresce com o conteúdo do portal (`portal:altura`), e quando
   ele passa da altura da viewport `.estPalco` vira a coluna mais alta do
   grid: o container fica do tamanho do próprio conteúdo, sem folga pra
   "grudar" nada — o sticky parava de pinar bem no caso que mais importa (um
   preview alto). Sticky só na BARRA: o container dela é `.estPalco`, que
   segue mais alto que o toolbar o tempo todo, então sobra folga pra ela
   ficar grudada enquanto o resto do palco rola por baixo. */
.estBarra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;position:sticky;top:120px;z-index:5;background:var(--paper);padding-block:6px}
/* Régua única (Kauã, 2026-09-11): antes cada controle vinha com a altura do
   seu elemento nativo — select, <label>, <a> — e a barra ficava com peças de
   tamanhos diferentes lado a lado. Aqui TODO controle direto da `.estBarra`
   compartilha altura (36px), borda, raio e `font-size` — a mesma régua do
   `.btn`/`.sel` do resto da tela — e ganha o mesmo gap de 8px entre eles
   (herdado do `gap` da barra); `flex-wrap` (na regra acima) já cobre telas
   estreitas. */
.estBarra>select,.estBarra>.btn,.estBarra>.estChk,.estBarra>#estDevice{height:36px;box-sizing:border-box;font-size:13px}
/* os selects da barra são controles, não campos de formulário — sem isto a
   regra genérica `input,select,textarea{width:100%}` os faria ocupar a linha
   inteira, um por linha */
.estBarra select{width:auto;min-width:140px;padding:0 10px;border:1px solid var(--lin);border-radius:9px;background:var(--paper);color:var(--tinta)}
/* "abrir em nova aba" é `.btn.sec.pq` desde sempre, mas `<a>` não herda o
   reset de sublinhado que `<button>` tem de graça — por isso a régua
   completa (altura/raio/fonte) mora em `.btn` (abaixo) e aqui só o essencial
   de link. */
.estBarra .btn.pq{padding:0 12px;display:inline-flex;align-items:center}
/* `.seg` nasceu num painel lateral, com padding próprio e botões `flex:1` —
   dentro da barra do palco ele esticaria os dois botões e desalinharia a
   linha. O estado ativo continua vindo de `.seg button.on`, que já existe. */
#estDevice{padding:0;flex:0 0 auto}
#estDevice button{flex:0 0 auto;height:100%;font-size:13px;border-radius:9px}
.estChk{display:flex;gap:6px;align-items:center;cursor:pointer;font-size:13px;padding:0 2px}
.estMoldura{border:1px solid var(--lin);border-radius:10px;background:var(--paper);padding:8px;display:flex;justify-content:center}
/* SEM `max-height` no desktop: a altura vem do próprio portal
   (`portal:altura`, ponte da C.3) e o ponto dela é o preview crescer com o
   conteúdo, com a PÁGINA rolando — teto aqui traria de volta a rolagem
   dupla (rolar dentro do iframe dentro do painel) que a ponte veio matar.
   A barra do palco continua grudada no topo por `.estBarra{position:sticky}`
   (sticky na barra, não no palco inteiro — ver o comentário ao lado da regra).
   No celular a altura é do aparelho simulado, fixa. */
#estIframe{border:0;border-radius:6px;background:#fff;height:900px}
#estIframe.desk{width:100%}
#estIframe.mob{width:390px;height:720px}
/* bloco reprovado pelo contrato no autosave: o card fica marcado e a
   mensagem do servidor aparece embaixo dele (o preview NÃO recarrega — fica
   na última versão válida) */
.ptBloco.erro{border-color:var(--mal);box-shadow:0 0 0 1px var(--mal) inset}
.ptBlocoErro:empty{display:none}
.ptBlocoErro{color:var(--mal);font-size:12px;margin-top:6px}
/* seleção viva entre painel e preview (ponte postMessage): clicar no
   cabeçalho do card destaca dentro do portal, e clicar no portal destaca
   aqui. Só cor + anel (box-shadow): mudar a espessura da borda empurraria
   o card meio pixel e a lista inteira tremeria a cada seleção. */
.ptBloco.sel{border-color:var(--escolhido);box-shadow:0 0 0 2px color-mix(in srgb,var(--escolhido) 28%,transparent)}
.ptSlot.sel{border-color:var(--escolhido);box-shadow:0 0 0 2px color-mix(in srgb,var(--escolhido) 20%,transparent)}
.ptBlocoTit{cursor:pointer}
/* ── Formulário do tema (Task D.2) ──────────────────────────────────────
   O `input[type=color]` herdava a regra genérica `input{width:100%;
   padding:9px 11px}` e virava uma BARRA larga, que não parece um seletor de
   cor. Aqui ele volta a ser o quadradinho nativo, com o hex ao lado. */
.corLinha{display:flex;gap:6px;align-items:center}
.corSel{width:40px;height:36px;padding:2px;flex:0 0 auto;cursor:pointer}
.corLinha input:not(.corSel){width:110px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.paletas{gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.paletaBtn{display:inline-flex;align-items:center;gap:6px}
.paletaDots{display:inline-flex;gap:2px}
.paletaDot{width:9px;height:9px;border-radius:2px;border:1px solid var(--lin)}
/* Contraste por par: verde ≥ ideal, laranja entre 4,5 e o ideal (passa, mas
   não é confortável), vermelho < 4,5 — só o vermelho bloqueia o Salvar. */
.ctPills{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}
.ctPill{border-radius:99px;padding:2px 9px;font-size:11px;font-weight:600;background:color-mix(in srgb,var(--tinta) 8%,transparent)}
.ctPill.ok{background:color-mix(in srgb,var(--bom) 15%,transparent);color:var(--bom)}
.ctPill.aviso{background:color-mix(in srgb,var(--ale) 15%,transparent);color:var(--ale)}
.ctPill.erro{background:color-mix(in srgb,var(--mal) 13%,transparent);color:var(--mal)}
/* Mini-prévia: as cores vêm INLINE (são do portal, não do painel) — aqui só
   a forma, pra a paleta ser julgada por como ela fica, não por hex. */
.temaPrevia{border:1px solid var(--lin);border-radius:10px;padding:12px;margin-bottom:12px}
.tpCard{border:1px solid;border-radius:10px;padding:12px}
.tpTit{display:block;font-size:14px;margin-bottom:4px}
.tpTxt{margin:0 0 10px;font-size:12.5px}
.tpBotao{display:inline-block;border-radius:8px;padding:7px 14px;font-size:12.5px;font-weight:700}
.tpLink{margin-left:10px;font-size:12.5px;text-decoration:underline}
.tpTag{float:right;border-radius:99px;padding:2px 9px;font-size:11px;font-weight:700}
/* Ajustes finos (overrides de cor por componente, spec 2026-09-16): recolhido
   por padrão — mesmo chevron CSS-only de `.adv`/`.func` acima. */
.ptAjustesFinos{border:1px solid var(--lin);border-radius:9px;margin-top:10px;padding:0 14px 10px;background:color-mix(in srgb,var(--paper) 50%,var(--card))}
.ptAjustesFinos>summary{cursor:pointer;list-style:none;padding:11px 0;font-size:12.5px;font-weight:700;color:var(--tinta)}
.ptAjustesFinos>summary::-webkit-details-marker{display:none}
.ptAjustesFinos>summary::before{content:'▸ ';color:var(--mut)}
.ptAjustesFinos[open]>summary::before{content:'▾ '}
.ptOvGrupo{border:0;border-top:1px solid var(--lin);padding:8px 0 0;margin:8px 0 0}
.ptOvGrupo legend{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;padding:0}
/* Cartão de resultado de busca, acima do iframe quando a seção SEO abre —
   imita o resultado do Google (URL, título azul, descrição cinza). */
.seoCartao{border:1px solid var(--lin);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--card);max-width:620px}
.seoUrl{font-size:12px;color:var(--mut)}
.seoTit{font-size:16px;color:#1a0dab;margin:2px 0}
.seoDesc{font-size:12.5px;color:var(--mut)}
/* embaixo de 1000px não cabem as duas colunas: o palco desce pro fim */
@media(max-width:1000px){.estudio{grid-template-columns:1fr}.estPainel{max-height:none;position:static}.estBarra{position:static}}
/* reforço explícito: já é o padrão do navegador (nenhuma regra de `section`
   por aqui o sobrescreve), mas o `.capa[hidden]` acima mostra que este reset
   JÁ mordeu a gente uma vez — melhor não confiar em silêncio */
section[data-aba][hidden]{display:none}

/* Menu de exportação (dropdown via <details>) */
.exp{position:relative;display:inline-block}
/* tudo que é clicável mostra a mão — botão (com ou sem .btn), chip, switcher,
   seletor, checkbox/radio e escolher arquivo; desabilitado mostra "não pode".
   Seletor de elemento/classe simples: quem precisar de outro cursor (ex.:
   cursor:default inline num cartão) continua vencendo. */
button:not(:disabled),[role="button"],.chip,.tgl,.tgl .sl,label:has(>.tgl),select:not(:disabled),
input[type="checkbox"]:not(:disabled),input[type="radio"]:not(:disabled),input[type="file"]:not(:disabled),
input[type="color"]:not(:disabled),input[type="file"]::file-selector-button{cursor:pointer}
button:disabled,select:disabled,input:disabled{cursor:not-allowed}
/* cartão recolhível (Acessos, integração de Canais, Visão da pessoa): a seta
   vai na MESMA linha do título. O marcador nativo ficava sozinho numa linha
   acima quando o conteúdo do summary é bloco (h2, div) */
details.card>summary{display:flex;align-items:center;gap:var(--esp-2);list-style:none;cursor:pointer}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::before{content:'▸';flex:none;color:var(--mut);transition:transform .15s}
details.card[open]>summary::before{transform:rotate(90deg)}
details.card>summary>*{flex:1;min-width:0;margin:0}
.exp>summary{list-style:none;cursor:pointer}
.exp>summary::-webkit-details-marker{display:none}
.exp[open]>summary{filter:brightness(1.06)}
.exp-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:40;min-width:150px;display:flex;flex-direction:column;padding:4px;background:var(--card);border:1px solid var(--lin);border-radius:10px;box-shadow:var(--som)}
.exp-item{background:none;border:0;color:var(--tinta);text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;text-transform:none;letter-spacing:0}
.exp-item:hover{background:color-mix(in srgb,var(--tinta) 8%,transparent)}
.linha{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
/* "Testar conexão" (Carteiras (API) — diagnóstico do vínculo de carga) */
.diagAcoes{margin-top:10px}
.diagLinhas{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.diagLinha{gap:8px}
/* banner INLINE (dentro de formulários/telas): opaco e flat. O FLASH de ação
   virou toast (mostrarToast) e não usa mais esta classe. Fundo sobre --card
   (não sobre transparent) pra não ficar fantasma no escuro; `ale`=amber. */
.aviso{border-radius:10px;padding:10px 12px;font-size:13px;border:1px solid var(--lin);background:var(--card)}
/* `aviso bom` é sinônimo de `aviso ok` — as telas usam os dois nomes, e sem a
   regra o de sucesso saía sem cor nenhuma */
.aviso.ok,.aviso.bom{background:color-mix(in srgb,var(--bom) 9%,var(--card));border-color:color-mix(in srgb,var(--bom) 34%,var(--lin))}
.aviso.err{background:color-mix(in srgb,var(--mal) 9%,var(--card));border-color:color-mix(in srgb,var(--mal) 34%,var(--lin))}
.aviso.info,.aviso.ale{background:color-mix(in srgb,var(--ale) 9%,var(--card));border-color:color-mix(in srgb,var(--ale) 32%,var(--lin))}

/* ── Toasts de sistema (canto sup. direito) — estilo "selo + progresso" ──
   Substituem as faixas de largura inteira do topo. Severidade em --sev:
   info=âmbar, err=vermelho, ok=verde. A posição (top) é medida no JS pelo
   header. `reveal` reusa o keyframe do stepper. */
.toastHost{position:fixed;right:20px;z-index:60;display:flex;flex-direction:column;gap:11px;width:328px;max-width:calc(100vw - 32px)}
@media(max-width:520px){.toastHost{left:16px;right:16px;width:auto}}
.toast{position:relative;font-size:13px;--sev:var(--ale);background:var(--card);border:1px solid var(--lin);border-radius:13px;padding:13px 36px 13px 14px;box-shadow:0 10px 26px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06);overflow:hidden}
@media (prefers-color-scheme:dark){.toast{box-shadow:0 12px 30px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4)}}
.toast.info{--sev:var(--ale)} .toast.err{--sev:var(--mal)} .toast.ok{--sev:var(--bom)}
.toast.entra{animation:toastIn .24s cubic-bezier(.2,.85,.25,1)}
.toast.saindo{animation:toastOut .18s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(16px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:-12px}}
.toast .top{display:flex;align-items:flex-start;gap:10px}
.toast .ic{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--sev);background:color-mix(in srgb,var(--sev) 15%,transparent);border:1.5px solid color-mix(in srgb,var(--sev) 38%,transparent)}
.toast .ttl{font-weight:700;font-size:13px;line-height:1.35;letter-spacing:-.01em}
.toast .sum{color:var(--mut);font-size:12.5px;line-height:1.45;margin-top:3px}
.toast .x{position:absolute;top:9px;right:10px;width:22px;height:22px;border:0;background:transparent;color:var(--mut);font-size:14px;line-height:1;border-radius:7px;cursor:pointer;opacity:.6;transition:.15s}
.toast:hover .x{opacity:1}
.toast .x:hover{background:color-mix(in srgb,var(--tinta) 10%,transparent);color:var(--tinta)}
.toast .more{margin-top:9px;background:transparent;border:0;color:var(--sev);font:inherit;font-weight:700;font-size:12px;cursor:pointer;padding:0}
.toast .det{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--lin);font-size:12px;color:var(--mut);line-height:1.55}
.toast.aberto .det{display:block;animation:reveal .18s ease}
.toast .det .kv{font-variant-numeric:tabular-nums}.toast .det b{color:var(--tinta)}
.toast .acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.toast .go{background:var(--sev);border:0;color:#fff;border-radius:8px;padding:7px 12px;font:inherit;font-weight:700;font-size:12px;cursor:pointer}
.toast .go.ghost{background:transparent;border:1px solid var(--lin);color:var(--tinta)}
.toast .prog{position:absolute;left:0;bottom:0;height:2px;background:var(--sev);width:100%;transform-origin:left;animation:prog var(--dur,4s) linear forwards}
@keyframes prog{to{transform:scaleX(0)}}
/* ── login ───────────────────────────────────────────────────────────── */
.capa{position:fixed;inset:0;background:var(--paper);display:grid;place-items:center;z-index:100;padding:20px}
/* `display:grid` acima é regra de autor e vence o [hidden] do navegador — sem
   esta linha a capa de login fica por cima do painel mesmo escondida. */
.capa[hidden]{display:none}
.login{width:100%;max-width:390px}
.login .card{padding:24px}
.qr{background:#fff;border-radius:12px;padding:14px;display:grid;place-items:center;margin:12px 0}
.qr svg{width:190px;height:190px;display:block}
.segredo{font:12px ui-monospace,monospace;background:var(--paper);border:1px solid var(--lin);border-radius:8px;padding:8px;word-break:break-all;color:var(--mut)}
.cod{letter-spacing:.4em;text-align:center;font-size:22px;font-weight:700}
/* ── Peças do padrão painel (C2) — estilo NEUTRO, vale nos dois layouts ──────
   Desde a C3 (forma única) as telas usam cabBloco/kpisFaixa/kvLista em
   qualquer layout. Aqui fica o mínimo que dá forma sem mudar a cara do
   clássico; o refinado do layout novo está em estilo/visual.css e vence por
   especificidade. Unidades fluidas e cor só por token. */
.cabBloco{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3);margin:0 0 var(--esp-4)}
.cabBloco .cbTit{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3);flex:1 1 20rem;min-width:0}
.cabBloco h1{margin:0}
.cabBloco .cbSub{color:var(--mut);font-size:var(--fs-2)}
/* as ações não encolhem ao lado do título (senão "período" e o seletor
   empilham num espaço de 9rem): quem desce de linha é o bloco inteiro; o
   max-width deixa elas quebrarem por dentro quando a tela é estreita */
.cabBloco .cbAcoes{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-2);flex-shrink:0;max-width:100%;margin-left:auto}
/* menu que abre das ações (ex.: "+ novo cliente"): ancorado à direita e nunca
   mais largo que a tela — no celular as ações descem de linha e, sem isso, o
   menu crescia pra fora da borda esquerda */
.cabBloco .exp-menu{max-width:calc(100vw - 2rem)}
.cabBloco .cbAcoes select{width:auto;padding:.25rem .5rem;font-size:var(--fs-2)}
/* rótulo ao lado do seletor (o "período" do Analista), não em cima dele —
   o label global é bloco */
.cabBloco .cbAcoes label{display:inline;margin:0}
.kpisFaixa{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:var(--esp-3);margin:0 0 var(--esp-4)}
.kpisFaixa .kfItem{min-width:0;padding:var(--esp-3) var(--esp-4);background:var(--card);border:1px solid var(--lin);border-radius:var(--raio-2)}
.kpisFaixa .kfRot{font-size:var(--fs-1);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.kpisFaixa .kfVal{display:block;font-size:1.375rem;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}
.kpisFaixa .kfVal small,.kpisFaixa .kfSub{font-size:var(--fs-2);font-weight:500;color:var(--mut)}
.barraProg{height:.25rem;margin-top:var(--esp-2);border-radius:99rem;background:color-mix(in srgb,var(--tinta) 8%,transparent);overflow:hidden}
.barraProg i{display:block;height:100%;border-radius:inherit;background:var(--lar)}
.kvLista{margin:0}
.kvLista>.kv{display:flex;justify-content:space-between;gap:var(--esp-3);padding:.375rem 0;border-bottom:1px solid var(--lin)}
.kvLista>.kv:last-child{border-bottom:0}
.kvLista dt{color:var(--mut)}
.kvLista dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
/* nota de uma linha: explicação que antes era aviso âmbar — âmbar é atenção */
.notaLinha{display:flex;gap:var(--esp-2);align-items:baseline;margin:0 0 var(--esp-4);color:var(--mut);font-size:var(--fs-2)}
.notaLinha b{color:var(--tinta)}
/* Acessos */
.acAcoes{text-align:right;white-space:nowrap}
.acAtencao{color:var(--ale)}
/* a classe fica no `sub` (o número tem de ficar plano — kfVal>span quebra a
   regra que prova o dígito no teste), e o CSS soma pai→número: o card inteiro
   fica amber quando há algo a atender */
.kfItem:has(.acAtencao) .kfVal{color:var(--ale)}
.acTodos{gap:var(--esp-2);margin-bottom:var(--esp-2)}
.acPapel{padding:var(--esp-3) 0;border-top:1px solid var(--lin)}
.acPapel h3{display:inline;margin:0;font-size:var(--fs-3)}
.acPapel .pill{margin:0 .25rem .25rem 0}
/* catálogo compacto (Tratativas): a linha abre no <details> da 1ª célula */
.catTrat{width:100%}
.catTrat td{vertical-align:top}
.catTrat td:first-child{padding-left:var(--esp-3)}
/* integração de Canais: o <details> já é o cartão; os blocos de dentro viram
   seções (sem moldura nem fundo próprios, separadas por uma linha) em vez de
   card dentro de card */
.integracaoInst .card{border:0;border-top:1px solid var(--lin);border-radius:0;background:none;box-shadow:none;padding-left:0;padding-right:0}
/* diálogo de confirmação (window.confirmarAcao, #dlgConfirma): cartão compacto,
   igual nos dois layouts. Título com o item, uma linha do que acontece, e os
   botões à direita — Cancelar primeiro (é ele que recebe o foco) */
dialog.confirma{width:min(26rem,calc(100vw - 2rem));max-width:min(26rem,calc(100vw - 2rem));padding:var(--esp-5);border-radius:var(--raio-2)}
dialog.confirma .cfTitulo{margin:0 0 var(--esp-2);font-size:var(--fs-4);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
dialog.confirma .cfTexto{margin:0;color:var(--mut);font-size:var(--fs-3);line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
dialog.confirma .cfAcoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--esp-2);margin-top:var(--esp-5)}
/* ── abas em linha (spec 2026-09-28 §5) — as GUIAS de uma tela ──────────────
   Traço embaixo da ativa sobre uma linha fina; muitas abas rolam na horizontal
   em vez de quebrar linha. Filtro continua .chip. */
.abas{display:flex;gap:var(--esp-5);margin:0 0 var(--esp-4);border-bottom:1px solid var(--lin);overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas [role="tab"]{position:relative;flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 0;margin:0;background:none;border:0;border-radius:0;color:var(--mut);font:inherit;font-size:var(--fs-3);font-weight:600;white-space:nowrap;cursor:pointer;text-transform:none;letter-spacing:0}
.abas [role="tab"] .ico{width:1rem;height:1rem}
.abas [role="tab"]:hover{color:var(--tinta)}
.abas [role="tab"]:focus-visible{outline:2px solid var(--escolhido);outline-offset:2px;border-radius:.25rem}
.abas [role="tab"][aria-selected="true"]{color:var(--escolhido)}
.abas [role="tab"][aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--escolhido)}
.abas .abQt{font-size:var(--fs-1);font-weight:600;line-height:1;padding:.15rem .4rem;border-radius:99rem;background:color-mix(in srgb,var(--mut) 14%,transparent);color:var(--mut)}
.abas [role="tab"][aria-selected="true"] .abQt{background:color-mix(in srgb,var(--escolhido) 16%,transparent);color:var(--escolhido)}

/* ── botão de ícone (✎, ⋯, lixeira) — o mesmo nos dois layouts ───────────── */
.icoBtn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:1px solid var(--lin);border-radius:.375rem;background:var(--card);color:var(--mut);font:inherit;vertical-align:middle;cursor:pointer}
.icoBtn:hover{color:var(--tinta);border-color:var(--escolhido)}
.icoBtn:focus-visible{outline:2px solid var(--escolhido);outline-offset:1px}
.icoBtn .ico{width:1rem;height:1rem}
/* "cancelar" ao lado de um Salvar/+ação não é o botão principal — sem forma
   própria ele herdava o `.btn` cheio (a cor de ação), e no clássico isso é
   o laranja: "cancelar", "+ cliente", "+ pergunta" pareciam a ação primária. */
.btn.ghost{background:transparent;color:var(--escolhido);border:0}
.btn.ghost:hover{background:color-mix(in srgb,var(--escolhido) 10%,transparent)}
/* menu ⋯ de uma linha de tabela */
.menuLinha{position:relative;display:inline-block;vertical-align:middle;margin-left:var(--esp-1)}
.menuLinha .exp-menu{min-width:12rem;text-align:left}
.menuLinha .exp-menu[hidden]{display:none}
.menuLinha .exp-item{display:flex;align-items:center;gap:.4rem}
.menuLinha .exp-item.perigo{color:var(--mal)}
/* textarea de uma ou duas frases (o global de 260px é do editor de prompt) */
textarea.curto{min-height:5rem;font:inherit}
/* linha de campos dentro do painel lateral (ele não mora no <main>) */
.latLin{display:flex;gap:var(--esp-2);align-items:center;margin-bottom:var(--esp-2)}
.latLin > input,.latLin > select{flex:1;min-width:0;width:auto}
.latLin > select.estreito{flex:none;width:7rem}
@media (max-width:45em){ .latLin.quebra{flex-wrap:wrap} .latLin.quebra > input:first-child{flex-basis:100%} }

/* tela Esta instalação */
.instLinha{gap:var(--esp-3);align-items:flex-end;flex-wrap:wrap}
.instLinha .campo{margin:0;flex:1 1 12rem;max-width:18rem}
.instAviso{margin-top:var(--esp-3)}
details.card.perigo{border-color:color-mix(in srgb,var(--mal) 35%,var(--lin))}
details.card.perigo h2{color:var(--mal)}

/* Ferramentas do agente (ficha do cliente) */
.ftAcoes{text-align:right;white-space:nowrap}
.ftRegras{gap:var(--esp-4);flex-wrap:wrap}
.ftRegras label{gap:var(--esp-2)}
.ftChips{gap:var(--esp-2);flex-wrap:wrap;margin-bottom:var(--esp-3)}
.ftAvancado{margin-top:var(--esp-3)}
.ftAvancado summary{cursor:pointer}
.ftResultado{margin-top:var(--esp-3)}
.ftResultado pre{white-space:pre-wrap;margin:var(--esp-2) 0 0}
dialog.lateral .dlgTopo.sem-borda{border-bottom:0;padding-bottom:0}
dialog.lateral .dlgTopo.sem-borda .abas{margin:var(--esp-3) 0 0}

/* ── chat ────────────────────────────────────────────────────────────── */
.chat{background:#0b141a;border-radius:12px;padding:12px;min-height:320px;max-height:460px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.msg{max-width:75%;padding:6px 9px 7px 10px;border-radius:10px;font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere;color:#e9edef;box-shadow:0 1px .5px rgba(11,20,26,.35)}
.msg.eu{align-self:flex-end;background:#005c4b;border-top-right-radius:3px}
.msg.bot{align-self:flex-start;background:#202c33;border-top-left-radius:3px}
/* hora estilo WhatsApp: flutua no canto inferior-direito, dentro da bolha, e o
   texto escoa em volta (não numa linha própria embaixo) */
.hora{float:right;font-size:10.5px;line-height:1;margin:5px -3px -1px 10px;color:#ffffff8c;user-select:none}
.sinal{align-self:center;font-size:11px;font-weight:700;color:var(--tea);background:color-mix(in srgb,var(--tea) 15%,transparent);border-radius:99px;padding:3px 10px}
pre.j{margin:0;font:11.5px ui-monospace,monospace;color:var(--mut);white-space:pre-wrap;max-height:220px;overflow:auto}
.vazio{color:var(--mut);font-size:13px;padding:22px 0;text-align:center}
/* conversas do chatbot */
.conv{border-bottom:1px solid var(--lin);padding:10px 4px;cursor:pointer;border-radius:8px}
.conv:hover{background:color-mix(in srgb,var(--tinta) 4%,transparent)}
.conv:last-child{border:0}
.msg{position:relative}
.viraRegra{position:absolute;right:6px;bottom:-9px;background:var(--card);border:1px solid var(--lin);
  color:var(--mut);border-radius:99px;padding:2px 9px;font-size:10.5px;font-weight:700;cursor:pointer;opacity:0;transition:opacity .15s}
.msg:hover .viraRegra{opacity:1}
.viraRegra:hover{color:var(--escolhido);border-color:var(--escolhido)}
/* chips de recorte + linha do tempo por pessoa */
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* Seletor de lotes: cartão clicável em vez de checkbox solto. O que se escolhe
   aqui define QUEM vai ser acionado, então a linha precisa mostrar o tamanho e
   o que a plataforma já sabe daquela base — não só o nome. */
.lotes{display:grid;gap:8px}
.loteCard{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:1px solid var(--lin);
          border-radius:11px;background:var(--paper);cursor:pointer;transition:border-color .12s,background .12s}
.loteCard:hover{border-color:var(--tea)}
.loteCard.on{border-color:var(--tea);background:color-mix(in srgb,var(--tea) 7%,var(--card))}
.loteCard input{width:auto;margin:2px 0 0;accent-color:var(--tea);flex:none}
/* input{width:100%} do tema esticava o checkbox e empurrava o texto pra longe
   dele — caixa de marcar precisa ter o tamanho de caixa de marcar */
input[type="checkbox"],input[type="radio"]{width:auto;flex:none;accent-color:var(--escolhido);margin:0}
dialog{border:0;border-radius:16px;padding:18px 20px;max-width:min(560px,94vw);background:var(--card);color:var(--tinta);box-shadow:0 24px 70px rgba(0,0,0,.32)}
dialog::backdrop{background:rgba(20,16,12,.45);backdrop-filter:blur(2px)}
/* a ficha da pessoa é leitura densa: precisa de largura e de rolagem própria,
   senão o dialog cresce além da tela e o cabeçalho sai de vista */
/* COLUNA FLEXÍVEL, não altura calculada. A conta antiga (`90vh - 92px`)
   assumia um cabeçalho de tamanho fixo; quando ele cresceu (a linha de guias
   Jornada/Diagnóstico), a sobra passou a ficar embaixo da borda e o último
   botão da ficha ficava cortado. Com flex, o corpo ocupa o que sobrar, seja
   qual for o cabeçalho. */
dialog.largo{max-width:min(1060px,96vw);width:min(1060px,96vw);max-height:90vh;overflow:hidden;padding:0}
/* SÓ quando aberto. `display:flex` solto no <dialog> vence o `display:none`
   que o navegador aplica ao fechar — o modal sumia do backdrop mas continuava
   desenhado no meio da página, por cima do resto do sistema. */
dialog.largo[open]{display:flex;flex-direction:column}
/* o conteúdo é injetado dentro de #fichaCorpo: sem ele participar da coluna,
   o flex morre no primeiro nível e a altura volta a ser a do conteúdo */
dialog.largo #fichaCorpo{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
dialog.largo .dlgTopo{flex:none;background:var(--card);padding:16px 20px 10px;border-bottom:1px solid var(--linha)}
dialog.largo .dlgCorpo{flex:1;min-height:0;overflow-y:auto;
  /* respiro no fim: sem ele o último controle encosta na borda e parece cortado */
  padding:14px 20px 28px}
/* Painel LATERAL (régua por calendário): entra pela direita, ocupa a altura da
   tela inteira. Topo e rodapé fixos, só o corpo rola — o salvar nunca some
   abaixo da dobra, mesmo numa régua de 14 etapas. Mesma cautela do .largo:
   `display:flex` só com [open], senão o dialog fechado continua desenhado. */
dialog.lateral{margin:0 0 0 auto;height:100vh;max-height:100vh;height:100dvh;max-height:100dvh;width:min(640px,96vw);max-width:min(640px,96vw);border-radius:16px 0 0 16px;padding:0;overflow:hidden}
dialog.lateral[open]{display:flex;flex-direction:column;animation:lateralEntra .18s ease-out}
dialog.lateral #dlgReguaCorpo{display:flex;flex-direction:column;flex:1;min-height:0}
/* Painel lateral GENÉRICO (#dlgLateral): #dlgLateralCorpo é um <div> qualquer
   injetado por `abrirLateral(html)` — sem virar coluna flex, o `.dlgCorpo
   {flex:1;overflow-y:auto}` do filho não tem efeito nenhum (flex só existe
   dentro de um pai display:flex), e painel alto (papéis, editor de
   ferramenta com Avançado aberto) corta o Salvar em tela baixa. */
dialog.lateral #dlgLateralCorpo{display:flex;flex-direction:column;flex:1;min-height:0}
dialog.lateral .dlgTopo{flex:none;padding:16px 20px 12px;border-bottom:1px solid var(--linha)}
dialog.lateral .dlgCorpo{flex:1;min-height:0;overflow-y:auto;padding:14px 20px 20px}
dialog.lateral .dlgRodape{flex:none;display:flex;flex-direction:column;gap:8px;padding:12px 20px;border-top:1px solid var(--linha);background:var(--card)}
/* Rodapé fixo "cancelar · Salvar" alinhado à direita — só no painel GENÉRICO.
   O #dlgRegua (régua por calendário) já resolve isso por dentro, com uma
   `<div class="linha">` própria empilhando por cima do rodapé em coluna, e
   segue como está. */
#dlgLateralCorpo .dlgRodape{flex-direction:row;justify-content:flex-end}
@keyframes lateralEntra{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
/* a lista de réguas rola dentro do próprio quadro, nunca a página */
.reguaLista{margin-top:12px;max-height:calc(100vh - 300px);overflow-y:auto}

/* mapa do fluxo de atendimento: colunas por profundidade, sem arrastar */
.arvMapa{display:flex;gap:6px;align-items:flex-start;min-width:max-content;padding:4px}
.arvCol{display:flex;flex-direction:column;gap:8px;min-width:210px}
.arvNivel{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;padding-left:2px}
.arvSeta{align-self:center;color:var(--mut);font-size:18px;padding:0 2px}
.arvNo{background:var(--paper);border:1px solid var(--lin);border-radius:10px;padding:9px 11px;cursor:pointer;transition:box-shadow .12s}
.arvNo:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.arvNo.on{border-color:var(--escolhido);box-shadow:0 0 0 2px color-mix(in srgb,var(--escolhido) 25%,transparent)}
.arvTopo{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px}
.arvTexto{font-size:12px;color:var(--mut);margin-top:5px;line-height:1.35}
.arvSaida{font-size:11px;color:var(--mut);margin-top:4px;border-top:1px dashed var(--lin);padding-top:3px}
.loteCard .lnome{font-weight:700;font-size:13.5px;color:var(--tinta)}
.loteCard .lmeta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:5px}
.loteCard .lorig{font-size:11px;color:var(--mut);margin-top:4px}
.loteCard .lnum{font-variant-numeric:tabular-nums}
.lotesVazio{padding:14px;border:1px dashed var(--lin);border-radius:11px;color:var(--mut);font-size:12.5px;text-align:center}

/* Flow — a guia Flows da ficha, a Conexão da aba Flow e o passo a passo.
   Tudo prefixado .fl: `.passo` já é chave-valor no painel. O selo do passo a
   passo é o `pill` padrão (layout.css) — nada de selo próprio aqui. */
/* o selo não quebra em duas linhas ao lado do nome */
.flItem>.pill{white-space:nowrap}

/* ── a carta do Flow: o componente `cartaFlow` (painel/componentes.js) ─────
   A MESMA carta na ficha (variante `ficha`) e na Conexão (`conexao`), e na
   vitrine de Componentes. Mora aqui, no arquivo do domínio (como os baldes em
   baldes.css), e não em componentes.css, que guarda as peças sem domínio.
   A grade responde ao tamanho DELA (@container), não da janela — a ficha e
   Configurações dividem a largura com a coluna das guias. `.flCartas` é o
   contêiner e a grade é o filho: um elemento não consulta o próprio tamanho. */
.flCartas{container:flcartas / inline-size}
.flCartasGrade{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-3)}
@container flcartas (width >= 44rem){.flCartasGrade{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a carta também é contêiner: o endereço da Conexão se ajusta à largura DELA */
.flCarta{container:flcarta / inline-size;display:flex;flex-direction:column;gap:var(--esp-4);min-width:0;background:var(--card);border:1px solid var(--lin);border-radius:var(--raio-2);padding:var(--esp-4)}
/* carteira sem Flow: mais leve — tracejada, sem fundo, o nome apagado */
.flCarta.semFlow{background:transparent;border-style:dashed}
.flCarta.semFlow .flCartaQuem b{color:var(--mut)}
.flCartaTopo{display:flex;align-items:flex-start;gap:var(--esp-3)}
.flCartaQuem{flex:1;min-width:0}
.flCartaQuem b{display:block;overflow-wrap:anywhere}
/* as ações secundárias: ícones no canto, sem competir com a principal */
.flCartaIcos{display:flex;gap:var(--esp-1);flex:none}
.flCartaIcos .menuLinha{margin-left:0}
/* copiar deu certo: o ícone não troca de texto (apagaria o desenho), fica
   verde. Quatro classes pra vencer o :hover do ícone, que vem depois no manifest. */
.flCarta .flCartaIcos .icoBtn[data-copiado="ok"]{color:var(--sucesso);border-color:var(--sucesso)}
.flCarta .flCartaIcos .icoBtn[data-copiado="nao"]{color:var(--ale);border-color:var(--ale)}
/* a ação principal embaixo, à direita, em toda carta — com a grade esticando
   as cartas da mesma linha, `margin-top:auto` a mantém no pé */
.flCartaPe{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--esp-2);margin-top:auto}
.flCartaPe .btn{white-space:nowrap}
/* "usar a chave da Meta": link pequeno à esquerda da principal; na carta sem
   Flow, embaixo do convite. Na cor de ação, não no cinza do `ghost` genérico
   (quatro classes pra vencer o dele, que vem depois no manifest): cinza ao lado
   do "Continuar" se lia como dica, não como um caminho. */
.flUsarChave{margin-right:auto}
.flCarta .flCartaPe .btn.flUsarChave{color:var(--escolhido)}
.flCarta .flCartaPe .btn.flUsarChave:hover{text-decoration:underline}
.flCarta.semFlow .flCartaPe{flex-direction:column;align-items:flex-end}
.flCarta.semFlow .flUsarChave{margin-right:0}
/* a trilha dos quatro marcos: bolinha SÓLIDA (sem anel, sem halo) e o rótulo
   embaixo; o fio liga o centro de uma bolinha ao da seguinte */
.flMarcos{--flPt:.75rem;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.flMarco{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--esp-1);min-width:0;text-align:center}
.flMarco+.flMarco::before{content:"";position:absolute;top:calc(var(--flPt) / 2 - .0625rem);right:50%;width:100%;height:.125rem;background:var(--lin)}
.flMarco.ok+.flMarco.ok::before{background:var(--sucesso)}
.flMarcoPt{position:relative;z-index:1;flex:none;width:var(--flPt);height:var(--flPt);border-radius:50%;background:var(--espera)}
.flMarco.ok .flMarcoPt{background:var(--sucesso)}
.flMarco.prox .flMarcoPt{background:var(--escolhido)}
.flMarcoRot{max-width:100%;font-size:var(--fs-1);line-height:1.3;color:var(--mut);overflow-wrap:anywhere}
.flMarco.ok .flMarcoRot{color:var(--tinta)}
.flMarco.prox .flMarcoRot{color:var(--tinta);font-weight:700}
/* o estado em texto, pra leitor de tela: fora da vista, não do leitor */
.flVh{position:absolute;width:.0625rem;height:.0625rem;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Flow herdado: a nota no lugar da trilha (a trilha seria a do cliente inteiro) */
.flHerda{margin:0;font-size:var(--fs-2);color:var(--mut)}
.flHerda.ale{color:var(--tinta);padding:var(--esp-2) var(--esp-3);border-radius:var(--raio-1);background:color-mix(in srgb,var(--ale) 10%,var(--card));border:1px solid color-mix(in srgb,var(--ale) 35%,var(--lin))}
/* variante `conexao`: o ENDEREÇO é o destaque — logo abaixo do título, na
   largura inteira, em monoespaçada e sem reticências (o endereço inteiro à
   vista é o que se confere contra o campo Endpoint da Meta) */
.flEndereco{display:grid;gap:var(--esp-1)}
.flEnderecoRot{font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.flEnderecoLinha{display:flex;align-items:center;gap:var(--esp-2);padding:var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-3);background:var(--paper);border:1px solid var(--lin);border-radius:var(--raio-1)}
/* clicar no endereço seleciona ele inteiro — pra quem prefere o ctrl+c */
.flEnderecoUrl{flex:1;min-width:0;font:600 var(--fs-2)/1.45 ui-monospace,monospace;color:var(--tinta);overflow-wrap:anywhere;user-select:all}
.flEnderecoCopiar{flex:none}
.flEnderecoMeta,.flEnderecoVazio{margin:0;font-size:var(--fs-1);color:var(--mut)}
.flEnderecoVazio{font-size:var(--fs-2)}
.flCarta .flSemNumero{margin:0}
/* carta estreita (celular): o botão desce pra baixo do endereço, à direita */
@container flcarta (width < 24rem){
  .flEnderecoLinha{flex-direction:column;align-items:stretch}
  .flEnderecoCopiar{align-self:flex-end}
}
/* na Conexão a trilha é coadjuvante do endereço: bolinha menor */
.flCarta.conexao .flMarcos{--flPt:.625rem}
/* passo a passo: a casca é a do Acionamento (`.split`/`.box`/`.main`/
   `.vsteps`/`.cbody`/`.body`/`.pane`/`.foot`/`.rail`, em acionamento.css) —
   nada dela é copiado aqui. O que mora aqui é só o que a Flow acrescenta: o
   topo da coluna dos passos, o passo como `button`, o "Passo N", a prévia e o
   ajuste de largura da ficha. */
.flWiz{container:flwiz / inline-size}
/* o passo é `button` (foco e teclado); o `.vstep` foi desenhado pra `div` */
.flWiz .vstep{width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left}
.flWiz .vstep:focus-visible{outline:2px solid var(--escolhido);outline-offset:2px;border-radius:var(--raio-1)}
/* a única volta do passo a passo, e de quem é o Flow aberto */
.flWizTopo{display:grid;gap:var(--esp-2);margin:-.5rem 0 var(--esp-4);padding:0 0 var(--esp-3);border-bottom:1px solid var(--lin)}
.flWizTopo .btn{justify-self:start;margin-left:-.6875rem}
.flWizQuem{min-width:0}
.flWizQuem b{display:block;font-size:var(--fs-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flWizQuem small{display:block;font-size:var(--fs-1);color:var(--mut)}
/* repintar o MESMO passo (poll do passo 5, autosave do passo 3) não é entrar nele */
.flWiz .pane.on.flRepinte{animation:none}
/* "Passo N" pequeno em cima do `.paneh h2` */
.flPanehN{display:block;font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0 0 .125rem}
/* rodapé: o que falta, ao lado do botão que ele trava */
.flPe{display:flex;align-items:center;gap:var(--esp-3);min-width:0}
.flFalta{min-width:0;font-size:var(--fs-1);color:var(--mut);text-align:right}
/* no aperto quem quebra é o motivo, nunca o rótulo do botão */
.flWiz .foot .btn{flex:none;white-space:nowrap}
/* a prévia (`.rail`): a jornada escolhida e as telas dela, na ordem */
.flPrevDica{margin:var(--esp-2) 0 0;font-size:var(--fs-1);color:var(--mut);text-align:center}
.flPrevJor{display:flex;align-items:center;gap:var(--esp-2);font-size:var(--fs-3)}
.flPrevJor .ic{display:flex;color:var(--escolhido)}.flPrevJor .ic .ico{width:1.25rem;height:1.25rem}
.flPrevTelas{list-style:none;margin:var(--esp-3) 0 0;padding:0;display:grid;gap:var(--esp-1);counter-reset:tela}
.flPrevTelas li{counter-increment:tela;display:flex;align-items:center;gap:var(--esp-2);padding:.4375rem var(--esp-3);border:1px solid var(--lin);border-radius:var(--raio-1);background:var(--paper);font:600 var(--fs-1) ui-monospace,monospace;color:var(--tinta)}
.flPrevTelas li::before{content:counter(tela);flex:none;min-width:1rem;text-align:right;font-weight:700;color:var(--mut)}
.flPrevTelas li span{min-width:0;overflow-wrap:anywhere}
.flPrevAcao{padding:var(--esp-3) 1.25rem var(--esp-4);border-top:1px solid var(--lin)}
/* a `.rail` leva a mesma --acH da `.main`, mas a `.main` mora DENTRO de uma
   caixa com borda e a rail É a caixa: em border-box a prévia terminava a
   espessura das bordas acima do passo. Em content-box as duas batem embaixo. */
.flWiz .rail{box-sizing:content-box}
/* A casca do Acionamento foi medida pra PÁGINA inteira; na ficha a coluna das
   guias come a largura. Por isso a Flow responde ao tamanho DELA (@container),
   não da janela. Abaixo de 60rem a prévia sai de cena — é só prévia; o
   simulador de verdade é o passo 6 (a casca antiga fazia o mesmo com o
   celular). */
@container flwiz (width < 60rem){
  .flWiz .split{grid-template-columns:minmax(0,1fr)}
  .flWiz .rail{display:none}
}
/* Estreito (celular; a ficha em tablet): os passos viram uma faixa rolável no
   topo, como o Acionamento faz no celular (visual.css). Quatro classes porque
   a regra de lá (0,3,0) vem DEPOIS no manifest e dá `display:flex` à coluna. */
@container flwiz (width < 40rem){
  .flWiz .split .main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .flWiz .split .main .vsteps{display:block;border-right:0;border-bottom:1px solid var(--lin);padding:var(--esp-3);overflow:visible}
  .flWizTopo{grid-template-columns:auto minmax(0,1fr);align-items:center;margin:0 0 var(--esp-2);padding:0 0 var(--esp-2)}
  .flWizPassos{display:flex;gap:var(--esp-3);overflow-x:auto}
  .flWiz .split .vstep{flex:none;width:auto;padding:0}
  .flWiz .split .vstep::before{display:none}
  .flWiz .split .vstep .vl small{display:none}
}
/* avisos do corpo do passo: depois do conteúdo (ou, o erro geral, antes) */
.flAviso{margin-top:.875rem}
.flAviso.topo{margin:0 0 .875rem}
/* linha de ações dentro de um passo (preparar o número, "publiquei") */
.flAcoes{gap:var(--esp-2);margin-top:var(--esp-2)}
/* passos 1 e 2: carteira e jornada */
.flItem{display:flex;gap:.875rem;align-items:center;border:1.5px solid var(--lin);border-radius:.875rem;padding:.875rem var(--esp-4);cursor:pointer;margin-bottom:.625rem}
.flItem.sel{border-color:var(--escolhido)}
.flItemTxt{flex:1;min-width:0}
.flItem .nm{font-weight:700}.flItem .dd{font-size:var(--fs-1);color:var(--mut)}
.flJors{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}
@media (max-width:43.75em){.flJors{grid-template-columns:1fr}}
.flJor{border:1.5px solid var(--lin);border-radius:.875rem;padding:var(--esp-4);cursor:pointer;background:var(--card)}
.flJor.sel{border-color:var(--escolhido)}
.flJor .ic{display:flex;color:var(--mut)}.flJor .ic .ico{width:1.375rem;height:1.375rem}
.flJor.sel .ic{color:var(--escolhido)}
.flJor h3{margin:.375rem 0 .25rem;font-size:.9375rem}
.flJor p{margin:0;color:var(--mut);font-size:var(--fs-2)}
.flJor .trilha{display:flex;flex-wrap:wrap;gap:var(--esp-1);margin-top:var(--esp-3)}
.flJor .trilha span{font-size:.65625rem;border:1px solid var(--lin);border-radius:99rem;padding:.0625rem var(--esp-2);color:var(--mut)}
.flJor.breve{opacity:.5;cursor:default;border-style:dashed}
/* passo 3: o conteúdo desta carteira — sem `.campo` genérico (o teste quer
   a classe exata `flCampo`), então o espaçamento é próprio */
.flCampo{margin-bottom:.875rem}
.flCampo.erro input,.flCampo.erro select{border-color:var(--mal)}
.flCampoErro{font-size:var(--fs-1);color:var(--mal);margin-top:var(--esp-1)}
/* campo sim/não: o switcher `tgl()` com o rótulo ao lado, clicável junto */
.flTgl{display:inline-flex;align-items:center;gap:var(--esp-2);margin:0;cursor:pointer;color:var(--tinta)}
/* passo 4: preparar o número — as três tarefas e a caixa de "copiar" */
.flPrep{margin-top:.875rem;border-radius:.875rem;background:color-mix(in srgb,var(--ale) 7%,var(--card));border:1px solid color-mix(in srgb,var(--ale) 30%,var(--lin));padding:var(--esp-4)}
.flPrep h4{margin:0 0 var(--esp-1);font-size:var(--fs-3)}.flPrep p{margin:0 0 var(--esp-3);font-size:var(--fs-2);color:var(--mut)}
.flTarefa{display:flex;gap:.625rem;align-items:flex-start;padding:var(--esp-2) 0;font-size:var(--fs-2)}
.flTarefa .b{width:1.25rem;height:1.25rem;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.6875rem;font-weight:800;border:1.5px solid var(--lin)}
.flTarefa.feito .b{background:var(--bom);border-color:var(--bom);color:var(--sobre-forte)}
.flTarefa.feito{color:var(--mut)}
.flCopia{display:flex;align-items:center;gap:.375rem;margin-top:.375rem;background:var(--paper);border:1px solid var(--lin);border-radius:var(--raio-1);padding:.3125rem;font:var(--fs-1) ui-monospace,monospace;max-width:26.25rem}
.flCopia span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* passo 5: publicar na Meta — cada etapa do veredito do servidor */
.flEtapas{display:grid;gap:.625rem}
.flEtapa{display:grid;grid-template-columns:1.875rem 1fr;gap:var(--esp-3);align-items:start;border:1px solid var(--lin);border-radius:var(--raio-2);padding:var(--esp-3) .875rem}
.flEtapa .b{width:1.625rem;height:1.625rem;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:var(--fs-1);border:1.5px solid var(--lin)}
.flEtapa.feito{background:color-mix(in srgb,var(--bom) 6%,var(--card))}
.flEtapa.feito .b{background:var(--bom);border-color:var(--bom);color:var(--sobre-forte)}
.flEtapa .tt{font-weight:700;font-size:var(--fs-2)}.flEtapa .dd{font-size:var(--fs-1);color:var(--mut)}
/* o número do Flow na Meta: campo curto. Três classes (0,3,0) porque o layout
   novo dá largura de formulário a todo input do <main> em visual.css
   (`main input:not([type])` com o prefixo do layout, 0,2,2 — e vem depois). */
.flEtapa .flAcoes .flMetaId{width:11.25rem;max-width:100%}
.flAjuda{font-size:.71875rem;color:var(--mut);margin-top:var(--esp-1)}
.flAjuda summary{cursor:pointer;color:var(--escolhido);font-weight:700}
/* passo 6: o resultado do simulador e a nota do fim. A nota é `.dica`, que
   só tem estilo dentro de `.card` — e o corpo do passo não está num. */
.flTela{border:1px solid var(--lin);border-radius:1.125rem;padding:var(--esp-4);background:var(--card);min-height:13.75rem}
.flSimTela{margin-top:.875rem}
.flTelaNome{font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.flSimDados{white-space:pre-wrap;font:var(--fs-1) ui-monospace,monospace;margin:var(--esp-2) 0 0}
.flWiz .dica.flDepois{color:var(--mut);font-size:var(--fs-2);margin:.875rem 0 0}

/* Guia Conexão da aba Flow (painel/flow.js): os seletores e o quadro que rola.
   As cartas são as de cima (`cartaFlow`, variante `conexao`). */
.flConexFiltros{display:flex;flex-wrap:wrap;gap:var(--esp-3);margin-bottom:var(--esp-3)}
.flConexFiltros label{display:flex;align-items:center;gap:var(--esp-2);margin:0;min-width:0}
/* largura mínima FIXA: o `min-width:min(10rem,100%)` que os campos do <main>
   ganham é circular num rótulo que se mede pelo conteúdo, e o seletor passava
   por cima do rótulo seguinte. Duas classes pra vencer aquela regra. */
.flConexFiltros .flConexSel{width:auto;min-width:10rem;max-width:100%}
/* a lista longa rola DENTRO do quadro, não a página */
.flConexLista{max-height:60dvh;overflow:auto}

/* Seletor de campanhas do Tempo real: mesmos cartões dos lotes, em grade
   compacta — cabem várias campanhas lado a lado sem virar uma coluna infinita. */
.campSel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.campSel .loteCard{padding:9px 11px}
.lotesResumo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:9px;
             padding-top:9px;border-top:1px solid var(--lin);font-size:12px;color:var(--mut)}

.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--lin);border-radius:99px;
      padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;color:var(--mut);background:transparent;user-select:none}
.chip:hover{border-color:var(--tea);color:var(--tinta)}
.chip.on{background:var(--tinta);color:var(--paper);border-color:var(--tinta)}
.chip.bom.on{background:var(--bom);border-color:var(--bom);color:#fff}
.chip.mal.on{background:var(--mal);border-color:var(--mal);color:#fff}
.chip b{font-variant-numeric:tabular-nums;opacity:.65;font-weight:700}
.trilha{display:inline-flex;align-items:center}
.et{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--tinta) 15%,transparent);flex:none}
.et.on{background:var(--lar);box-shadow:0 0 0 3px color-mix(in srgb,var(--lar) 18%,transparent)}
.et.fim{background:var(--bom);box-shadow:0 0 0 3px color-mix(in srgb,var(--bom) 20%,transparent)}
.lig{width:22px;height:2px;background:color-mix(in srgb,var(--tinta) 12%,transparent);flex:none}
.lig.on{background:color-mix(in srgb,var(--lar) 45%,transparent)}
table.pes td{vertical-align:top}

/* prévia do convite — bolha de WhatsApp */
.fonePrev{background:#0b141a;border-radius:12px;padding:14px;min-height:220px}

/* analista */
.anConversa{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding:6px 2px;margin-top:8px}
.anMsg{max-width:82%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.45;white-space:pre-wrap}
.anMsg.eu{align-self:flex-end;background:color-mix(in srgb,var(--tinta) 8%,transparent)}
.anAcoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;white-space:normal}
.anMsg.ele{align-self:flex-start;background:var(--card);border:1px solid var(--lin)}
.anMsg.erro{align-self:flex-start;background:color-mix(in srgb,var(--mal) 12%,transparent);color:var(--mal)}
.anPensando{font-size:12px;color:var(--mut);padding:4px 2px}
.anSug{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.anCat{display:flex;flex-direction:column;gap:4px;max-height:520px;overflow:auto}
.anFato{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;border-bottom:1px solid color-mix(in srgb,var(--lin) 60%,transparent);padding:4px 0}
.anFato b{font-variant-numeric:tabular-nums;white-space:nowrap}
.anIframe{width:100%;height:720px;border:1px solid var(--lin);border-radius:10px;background:#f3f4f6}
/* visão de cliente: o estilo vive no bloco .vchip (junto ao header, acima).
   O chip fica laranja quando a visão está ativa — sem barra de largura inteira. */

/* agente passo a passo */
.passos{display:flex;gap:6px;margin-bottom:18px;overflow-x:auto}
.passoItem{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--lin);border-radius:10px;min-width:150px;opacity:.55}
.passoItem.atual{opacity:1;border-color:var(--tinta)}
.passoItem.feito{opacity:.85;cursor:pointer}
.passoNum{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--tinta) 8%,transparent);flex:none}
.passoItem.atual .passoNum{background:var(--tinta);color:var(--paper)}
.passoItem.feito .passoNum{background:color-mix(in srgb,var(--bom) 20%,transparent);color:var(--bom)}
.passoTit{font-size:13px;font-weight:600;line-height:1.2}
.passoQuem{font-size:11px;color:var(--mut)}
.campo.falta input,.campo.falta textarea{border-color:var(--mal)}
.evid{font-style:italic;cursor:help}
.garantia{padding:6px 0;border-top:1px solid color-mix(in srgb,var(--lin) 60%,transparent)}
.garantia:first-of-type{border-top:0}

/* combo de template: busca + lista + a mensagem no hover */
.combo{position:relative}
.comboLista{position:absolute;z-index:30;left:0;right:0;margin-top:4px;max-height:280px;overflow:auto;background:var(--card);border:1px solid var(--lin);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.comboItem{padding:8px 11px;cursor:pointer;border-bottom:1px solid color-mix(in srgb,var(--lin) 60%,transparent)}
.comboItem:last-child{border-bottom:0}
.comboItem:hover,.comboItem.ativo{background:color-mix(in srgb,var(--tinta) 6%,transparent)}
.comboNome{font-weight:600;font-size:13px}
.comboNome .pill{margin-left:6px;vertical-align:1px}
.comboSub{font-size:12px;color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comboVazio{padding:12px;color:var(--mut);font-size:13px}
.comboTip{position:absolute;z-index:31;left:calc(100% + 10px);width:320px;background:var(--card);border:1px solid var(--lin);border-radius:10px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.16);font-size:13px;pointer-events:none}
.comboTipNome{font-weight:600;margin-bottom:2px}
.comboTipMeta{font-size:11px;color:var(--mut);margin-bottom:8px}
.comboTipCorpo{white-space:pre-wrap;line-height:1.45}
.comboTipRod{font-size:11px;color:var(--mut);margin-top:6px}
.comboTipBtn{display:inline-block;margin:8px 6px 0 0;padding:3px 10px;border:1px solid var(--lin);border-radius:99px;font-size:12px}
@media (max-width:980px){.comboTip{left:0;right:0;width:auto;top:100%!important;margin-top:4px}}
.bolha{background:#005c4b;color:#e9edef;border-radius:10px;padding:9px 11px;font-size:13.5px;max-width:100%}
.txtPrev{white-space:pre-wrap}
.var{background:rgba(255,255,255,.18);border-radius:4px;padding:0 4px;font-size:12px}
.rodPrev{margin-top:6px;font-size:11px;opacity:.65}
.btnPrev{background:#202c33;color:#53bdeb;text-align:center;border-radius:8px;padding:8px;margin-top:5px;font-size:13px}
/* ---- PRÉVIA FIEL DO WHATSAPP -------------------------------------------------
   Mensagem RECEBIDA (é o que o cliente vê): bolha cinza #202c33, à esquerda, com
   rabinho no topo-esquerdo. Tamanho, espaçamento, hora e botões seguem o app. */
.whats{background:#0b141a;border-radius:12px;padding:16px 14px}
.wa{max-width:85%;background:#202c33;border-radius:7.5px;border-top-left-radius:0;position:relative;
  color:#e9edef;font:14.2px/19px "Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;
  box-shadow:0 1px .5px rgba(0,0,0,.18);word-wrap:break-word;overflow:hidden}
.wa::before{content:"";position:absolute;top:0;left:-8px;width:0;height:0;border:7px solid transparent;border-top-color:#202c33;border-right-width:0}
.wa .media img{display:block;width:100%}
.wa .doc{display:flex;gap:10px;align-items:center;background:#1d282f;margin:5px 5px 0;border-radius:8px;padding:11px 12px}
.wa .doc .ic{width:34px;height:34px;border-radius:50%;background:#3b4a54;display:grid;place-items:center;font-size:16px;flex:none}
.wa .doc .dn{font-size:13.5px;color:#e9edef;line-height:1.3}
.wa .doc .ds{font-size:12px;color:#ffffff8c}
.wa .bd{padding:6px 9px 0;white-space:pre-wrap}
.wa .ft{padding:3px 9px 0;color:#ffffff8a;font-size:13px}
.wa .var{color:#e9edef}
.wa .tm{float:right;margin:6px -3px 0 10px;font-size:11px;color:#ffffff8c;line-height:15px}
.wa .clear{clear:both;display:block;height:6px}
.wa .btns{margin-top:2px}
.wa .b{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;color:#53bdeb;
  font-size:14.5px;font-weight:400;border-top:1px solid rgba(233,237,239,.13);cursor:pointer}
.wa .b svg{width:17px;height:17px;fill:currentColor;flex:none}
.copia{display:flex;gap:8px;align-items:flex-start}
.copia code,.copia pre{flex:1;background:var(--paper);border:1px solid var(--lin);border-radius:8px;
  padding:8px 10px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;overflow-x:auto}
.copia textarea{flex:1;font-family:ui-monospace,monospace}
.copia button{white-space:nowrap}

/* ── stepper de acionamento ──────────────────────────────────────────────
   Sidebar vertical de passos (esquerda) + rail que resume o disparo (direita).
   CSS vindo do protótipo do stepper, mapeado pras vars reais do
   tema (--inset→--paper, --r→14px, --r2→9px, --g1..--g5 no :root). A carga
   agora é inline num passo — sem modal. */
.split{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:20px;align-items:start}
@media(max-width:960px){.split{grid-template-columns:1fr}}
.box{background:var(--card);border:1px solid var(--lin);border-radius:14px;box-shadow:var(--som);overflow:hidden}

/* ALTURA FIXA: o card é o mesmo em todos os passos (não estica com o conteúdo)
   — o corpo rola por dentro e o rodapé fica sempre visível. */
.main{display:grid;grid-template-columns:210px minmax(0,1fr);height:var(--acH, calc(100vh - 320px))}
.vsteps{background:color-mix(in srgb,var(--paper) 55%,var(--card));border-right:1px solid var(--lin);padding:20px var(--g4)}
.vstep{display:flex;align-items:flex-start;gap:var(--g3);padding:8px 0;cursor:pointer;position:relative}
.vstep .vn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;background:var(--paper);border:1.5px solid var(--lin);color:var(--mut);flex:none;z-index:1;transition:.2s}
.vstep.on .vn{background:var(--escolhido);border-color:var(--escolhido);color:var(--escolhido-txt)}
.vstep.done .vn{background:var(--bom);border-color:var(--bom);color:#0b1a12}
.vstep .vl{font-size:12.5px;font-weight:700;color:var(--mut);padding-top:4px}.vstep.on .vl{color:var(--tinta)}
.vstep .vl small{display:block;font-size:10.5px;font-weight:500;color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.vstep::before{content:"";position:absolute;left:12px;top:-8px;height:8px;width:2px;background:var(--lin)}
.vstep:first-child::before{display:none}.vstep.done::before,.vstep.on::before{background:var(--bom)}
.cbody{display:flex;flex-direction:column;min-height:0}
/* min-height:0 é o que deixa o corpo ENCOLHER e rolar por dentro (sem ele, uma
   lista longa de lotes empurra o rodapé pra fora e o overflow:hidden do .box
   come os botões Anterior/Próximo). */
.body{padding:20px;overflow-y:auto;flex:1;min-height:0}
/* todas as 5 telas vivem no DOM ao mesmo tempo; só a atual acende. Manter
   todas montadas é o que deixa a cascata da campanha (canal/templates) achar
   #cCanal/#cTpl mesmo quando o passo delas está escondido. */
.pane{display:none}.pane.on{display:block;animation:reveal .18s ease}
.paneh{margin:0 0 var(--g4)}.paneh h2{font-size:17px;margin:0 0 3px}.paneh p{color:var(--mut);font-size:12.5px;margin:0}
.foot{display:flex;align-items:center;justify-content:space-between;padding:var(--g3) 20px;border-top:1px solid var(--lin);gap:var(--g3);flex:none}
.btn2{background:var(--paper);border:1px solid var(--lin);color:var(--tinta);border-radius:9px;padding:8px 13px;font:inherit;font-weight:700;font-size:12.5px;cursor:pointer}.btn2:hover{border-color:var(--tea)}

/* RAIL */
/* mesma altura do card à esquerda; a prévia rola por dentro e o botão Acionar
   fica pinado embaixo, alinhado com o rodapé do stepper. */
.rail{position:sticky;top:80px;align-self:start;height:var(--acH, calc(100vh - 320px));display:flex;flex-direction:column}
.rcap{padding:var(--g4) 20px var(--g1);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mut)}
.rnum{padding:0 20px var(--g2);display:flex;align-items:baseline;gap:var(--g2)}.rnum b{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}.rnum em{font-style:normal;font-size:12.5px;color:var(--mut)}
.rtags{display:flex;gap:var(--g2);padding:var(--g1) 20px var(--g4);flex-wrap:wrap}.tag{border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:700;background:var(--paper)}.tag.fora{color:var(--ale)}.tag.wa{color:var(--mal)}
.divi{height:1px;background:var(--lin)}
.prev{padding:var(--g4) 20px;flex:1;overflow-y:auto;min-height:0}
.fire{padding:var(--g4) 20px}.go{width:100%;border:0;border-radius:9px;padding:13px;font:inherit;font-weight:800;font-size:14.5px;color:#fff;background:var(--bom);box-shadow:0 6px 18px color-mix(in srgb,var(--bom) 32%,transparent)}.go:disabled{background:var(--mut);opacity:.5;box-shadow:none}.gohint{text-align:center;font-size:11px;color:var(--mut);margin-top:var(--g2)}

/* conteúdo dos passos (esquerda) */
.modes{display:inline-flex;border:1px solid var(--lin);border-radius:9px;overflow:hidden;margin-bottom:var(--g4)}
.modes button{background:transparent;border:0;padding:8px 15px;font:inherit;font-weight:700;font-size:12.5px;color:var(--mut);cursor:pointer}.modes button.on{background:var(--paper);color:var(--tinta)}
/* três modos (lotes · planilha · sem lote): quebra em tela estreita em vez de estourar; o desabilitado diz o motivo no title */
.modes{flex-wrap:wrap;max-width:100%}.modes button:disabled{opacity:.45;cursor:not-allowed}
.lote{display:flex;gap:var(--g3);align-items:center;padding:12px 14px;border:1.5px solid var(--lin);border-radius:9px;background:var(--paper);cursor:pointer;margin-bottom:var(--g2)}
.lote.on{border-color:var(--escolhido);background:color-mix(in srgb,var(--escolhido) 8%,var(--card))}.lote .ck{width:19px;height:19px;border-radius:6px;border:2px solid var(--lin);display:grid;place-items:center;color:var(--escolhido-txt);font-size:11px;flex:none}.lote.on .ck{background:var(--escolhido);border-color:var(--escolhido)}.lote .lnome{font-weight:700;font-size:13.5px}.lote .lmeta{font-size:11.5px;color:var(--mut);margin-top:2px}.lote .big{margin-left:auto;text-align:right}.lote .big b{font-size:18px;font-weight:800}.lote .big span{display:block;font-size:10.5px;color:var(--mut)}
.upl{display:grid;grid-template-columns:1fr 1fr;gap:var(--g3);margin-bottom:var(--g3)}
.ia{display:flex;align-items:center;gap:var(--g2);font-size:12.5px;color:var(--mut);cursor:pointer;padding:2px 0}
.tgl{position:relative;display:inline-block;width:38px;height:22px;flex:none}.tgl input{position:absolute;opacity:0;width:0;height:0;margin:0}.tgl .sl{position:absolute;inset:0;background:#3a4048;border-radius:999px;transition:.2s}.tgl .sl::before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.35)}.tgl input:checked + .sl{background:var(--bom)}.tgl input:checked + .sl::before{transform:translateX(16px)}.tgl input:disabled + .sl{opacity:.45;cursor:not-allowed}
.leit{display:flex;align-items:center;gap:var(--g4);flex-wrap:wrap;background:var(--paper);border:1px solid var(--lin);border-radius:9px;padding:10px 14px}
.leit .arq{font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px}.leit .arq .ok{color:var(--bom)}
.leit .kp{display:flex;gap:18px;margin-left:auto;font-variant-numeric:tabular-nums}.leit .kp>div{text-align:center}.leit .kp b{font-size:15px;font-weight:800}.leit .kp span{display:block;font-size:10px;color:var(--mut)}.leit .kp .ok b{color:var(--bom)}
.leit details{width:100%}.leit summary{cursor:pointer;font-size:11.5px;color:var(--mut);list-style:none}.leit summary::-webkit-details-marker{display:none}.leit summary::before{content:'▸ '}.leit details[open] summary::before{content:'▾ '}
.blk{margin-top:var(--g4)}.blk h3{margin:0 0 3px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}.blk .dica{font-size:11.5px;color:var(--mut);margin:0 0 10px}
.btnrow{display:flex;gap:var(--g2);flex-wrap:wrap}
.mapr{display:grid;grid-template-columns:100px 16px minmax(0,1fr) auto;align-items:center;gap:var(--g3);background:var(--paper);border:1px solid var(--lin);border-radius:9px;padding:10px 12px;margin-bottom:var(--g2)}.mapr .col{font-weight:700;font-size:13px}.mapr .arr{color:var(--mut);text-align:center}.mapr .cf{border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700}.cf.alta{background:color-mix(in srgb,var(--bom) 18%,transparent);color:var(--bom)}.cf.media{background:color-mix(in srgb,var(--ale) 18%,transparent);color:var(--ale)}.mapr .pq{grid-column:3 / -1;font-size:11px;color:var(--mut);margin-top:-2px}
.amoWrap{overflow-x:auto;border:1px solid var(--lin);border-radius:9px;background:var(--paper)}.amoT{border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums;width:100%}.amoT th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;padding:9px 16px;border-bottom:1px solid var(--lin);white-space:nowrap}.amoT td{padding:9px 16px;border-bottom:1px solid color-mix(in srgb,var(--lin) 55%,transparent);white-space:nowrap;font-weight:600}.amoT tr:last-child td{border:0}
.varrow{display:grid;grid-template-columns:auto 16px minmax(0,1fr);align-items:center;gap:var(--g3);background:var(--paper);border:1px solid var(--lin);border-radius:9px;padding:8px 12px}
.varrow .vk{font-weight:700;font-family:ui-monospace,monospace;font-size:13px;color:var(--escolhido)}.varrow .arr{color:var(--mut);text-align:center}
.adv{border:1px solid var(--lin);border-radius:9px;margin-top:var(--g3);background:color-mix(in srgb,var(--paper) 50%,var(--card))}
.adv>summary{cursor:pointer;list-style:none;padding:11px 14px;font-size:12.5px;font-weight:700;color:var(--tinta)}.adv>summary::-webkit-details-marker{display:none}.adv>summary::before{content:'▸ ';color:var(--mut)}.adv[open]>summary::before{content:'▾ '}
.adv .in{padding:0 14px 14px}
/* seletor de template FIEL: busca + lista (nome+categoria+trecho) + hover rico */
.hint{font-size:11.5px;color:var(--mut);margin-top:6px}
.cbGrid{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:12px;margin-top:8px}
@media(max-width:680px){.cbGrid{grid-template-columns:1fr}}
.cbList{border:1px solid var(--lin);border-radius:9px;background:var(--paper);max-height:196px;overflow:auto}
.cbItem{padding:9px 12px;border-bottom:1px solid color-mix(in srgb,var(--lin) 60%,transparent);cursor:pointer}
.cbItem:last-child{border:0}.cbItem:hover,.cbItem.on{background:color-mix(in srgb,var(--tinta) 5%,transparent)}
.cbItem .nm{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:7px}
.cbItem .bd{font-size:11.5px;color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:color-mix(in srgb,var(--tea) 16%,transparent);color:var(--tea);border-radius:6px;padding:1px 6px}
.cbPrev{border:1px solid var(--lin);border-radius:9px;background:var(--paper);padding:12px;align-self:start}
.cbPrev .pn{font-weight:700;font-size:12.5px}.cbPrev .pm{font-size:10.5px;color:var(--mut);margin:2px 0 8px}
.cbPrev .pbd{font-size:12px;white-space:pre-wrap;line-height:1.45}
.cbPrev .pbt{display:inline-block;margin:8px 6px 0 0;border:1px solid var(--lin);border-radius:999px;padding:3px 10px;font-size:11px;color:#53bdeb}
.btnTest{background:var(--paper);border:1px solid var(--lin);color:var(--bom);border-radius:9px;padding:7px 12px;font:inherit;font-weight:700;font-size:12px;cursor:pointer;margin-top:8px}
/* inputs compactos, escopados ao corpo do stepper (o global do painel fica
   alto demais numa tela densa; não mexo nele pra não afetar outras abas) */
.body input:not([type=checkbox]):not([type=radio]):not([type=file]), .body select{height:34px;font-size:13px;padding:7px 10px;border-radius:9px}

@keyframes reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* spinner do "acionando…" no botão de confirmar */
.spin{display:inline-block;width:12px;height:12px;vertical-align:-1px;border:2px solid color-mix(in srgb,currentColor 35%,transparent);border-top-color:currentColor;border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
/* linhas que ficam de fora na prévia da planilha: recolhidas, rolagem própria */
.foraCarga{margin-top:var(--esp-3)}.foraCarga>summary{cursor:pointer}
.foraLista{margin-top:var(--esp-2);max-height:min(16rem,40dvh);overflow-y:auto;background:var(--paper);border:1px solid var(--lin);border-radius:var(--raio-2)}
.foraMais>summary{cursor:pointer;padding:var(--esp-2) var(--esp-3);font-size:var(--fs-2);color:var(--mut)}

/* ESTADO DE CARREGAMENTO (P.carregando). Nasce VISÍVEL: o atraso anti-piscar
   é um temporizador no render(), não animação — opacidade animada a partir de
   0 deixava a tela em branco quando o navegador não desenhava quadros. O anel
   é o da marca, girando; o esqueleto antecipa a forma do conteúdo. */
.carreg{padding:26px 0 8px}
.carreg.curto{padding:18px 0}
.carregMarca{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--mut);font-size:12.5px;font-weight:700;letter-spacing:.02em;margin-bottom:22px}
.carreg.curto .carregMarca{margin-bottom:0}
.carregAnel{width:20px;height:20px;flex:none;border-radius:50%;border:3px solid var(--lar);border-right-color:var(--tea);border-bottom-color:transparent;animation:girar .85s cubic-bezier(.55,.15,.45,.85) infinite}
.carregSkel b,.carregSkel s,.carregSkel i{display:block;border-radius:10px;text-decoration:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--lin) 55%,transparent) 0%,color-mix(in srgb,var(--lin) 100%,transparent) 50%,color-mix(in srgb,var(--lin) 55%,transparent) 100%);
  background-size:220% 100%;animation:carregBrilho 1.4s ease-in-out infinite}
.carregSkel b{height:22px;width:34%;max-width:320px;margin-bottom:10px}
.carregSkel s{height:12px;width:58%;max-width:560px;margin-bottom:22px}
.carregCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.carregCards i{height:112px;border-radius:14px}
.carregCards i:nth-child(2){animation-delay:.12s}.carregCards i:nth-child(3){animation-delay:.24s}
.carregSkel.lista i{height:14px;margin-bottom:12px}
.carregSkel.lista i:nth-child(2n){width:82%}.carregSkel.lista i:nth-child(3n){width:64%}
@keyframes carregBrilho{from{background-position:100% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){
  .carregAnel{animation-duration:2.4s}
  .carregSkel b,.carregSkel s,.carregSkel i{animation:none}
}
.back{position:fixed;inset:0;background:rgba(15,16,20,.5);backdrop-filter:blur(3px);display:none;place-items:center;z-index:50;padding:20px}
.back.on{display:grid}
.modal{background:var(--card);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.4);max-width:460px;width:100%;padding:22px;color:var(--tinta);animation:reveal .3s ease}
.modal h3{font-size:18px;letter-spacing:-.01em}
.modal p{color:var(--mut);font-size:13.5px;margin:6px 0 16px}
.check{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--lin);font-size:14px}
.check:last-of-type{border:0}
.check .ic{color:var(--bom);font-weight:800}
.check .x{color:var(--ale)}
.mfoot{display:flex;gap:10px;margin-top:18px}
.mfoot button{flex:1;border-radius:10px;padding:12px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;border:1px solid var(--lin);background:transparent;color:var(--tinta)}
.mfoot .conf{border:0;background:var(--bom);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--bom) 40%,transparent)}
.note{font-size:11px;color:var(--mut);text-align:center;margin-top:24px}
iframe.sim{width:100%;height:820px;border:1px solid var(--lin);border-radius:12px;background:var(--paper)}

/* ── Visão nova: dashV ─────────────────────────────────────────────────────
   Tudo escopado sob .dashV para não colidir com .grid/.kpi/.card/.passo/.barra
   do painel existente. As classes .trilha/.et/.lig/.pill já existem no painel
   e NÃO são redefinidas aqui. */

/* ── grade 12 colunas ──────────────────────────────────────────────────── */
.dashV .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.dashV .span3{grid-column:span 3}
.dashV .span4{grid-column:span 4}
.dashV .span5{grid-column:span 5}
.dashV .span6{grid-column:span 6}
.dashV .span7{grid-column:span 7}
.dashV .span8{grid-column:span 8}
.dashV .span12{grid-column:span 12}
@media(max-width:1000px){
  .dashV .grid{grid-template-columns:repeat(6,1fr)}
  .dashV .span3{grid-column:span 3}
  .dashV .span4,.dashV .span5{grid-column:span 6}
  .dashV .span6,.dashV .span7,.dashV .span8{grid-column:span 6}
}
@media(max-width:640px){
  .dashV .grid{grid-template-columns:repeat(2,1fr)}
  .dashV [class*=span]{grid-column:span 2}
}

/* ── card ──────────────────────────────────────────────────────────────── */
.dashV .card{background:var(--card);border:1px solid var(--lin);border-radius:18px;box-shadow:var(--som);padding:16px 17px}
.dashV .card:hover{box-shadow:0 2px 6px rgba(30,34,44,.07),0 12px 30px rgba(30,34,44,.06)}
html[data-tema="escuro"] .dashV .card:hover{box-shadow:0 2px 8px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.28)}
/* cabeçalho do card: ícone + título + ações */
.dashV .card .ch{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.dashV .card .ch h3{margin:0;font-size:13.5px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--tinta)}
.dashV .card h2{font-size:13.5px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--tinta);margin:0 0 4px}
.dashV .card .dica{color:var(--mut);font-size:12px;margin:-2px 0 12px}

/* ── faixa de foco ─────────────────────────────────────────────────────── */
.dashV .foco{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.dashV .foco .tt{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.dashV .campSwitch{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--lin);
  border-radius:14px;padding:9px 12px;box-shadow:var(--som);cursor:pointer}
.dashV .campSwitch .pt{width:9px;height:9px;border-radius:50%;background:var(--tea);box-shadow:0 0 0 4px color-mix(in srgb,var(--tea) 18%,transparent);flex:none}
.dashV .campSwitch select{border:0;background:transparent;color:var(--tinta);font:inherit;font-weight:800;font-size:16px;cursor:pointer;letter-spacing:-.01em;width:auto}
.dashV .campSwitch .meta{color:var(--mut);font-size:12.5px;font-weight:600;border-left:1px solid var(--lin);padding-left:10px}
/* Animação de entrada do dashboard: toca ao abrir a Visão e ao trocar de campanha
   (classe .entra add/removida via JS). NÃO no tick do SSE — senão o funil cresceria
   de 2 em 2s. `both` mantém o estado final quando a classe sai. */
@keyframes dashCardIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes dashBarGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dashPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.dashV .barra i{transform-origin:left}
.dashV.entra .card{animation:dashCardIn .42s ease both}
.dashV.entra .passo .barra i{animation:dashBarGrow .6s cubic-bezier(.22,1,.36,1) both}
.dashV.entra .prow2{animation:dashCardIn .4s ease both}
.dashV.entra .kpi .val{animation:dashPop .5s cubic-bezier(.22,1,.36,1) both}
.dashV.entra .et.on,.dashV.entra .et.fim{animation:dashPop .45s ease both}
@media (prefers-reduced-motion:reduce){
  .dashV.entra .card,.dashV.entra .passo .barra i,.dashV.entra .prow2,
  .dashV.entra .kpi .val,.dashV.entra .et.on,.dashV.entra .et.fim{animation:none}
}

/* ── KPI ────────────────────────────────────────────────────────────────── */
.dashV .kpi{display:flex;flex-direction:column;gap:6px;min-height:118px;justify-content:space-between}
.dashV .kpi .lab{display:flex;align-items:center;gap:7px;color:var(--mut);font-size:12px;font-weight:700;letter-spacing:.02em}
.dashV .kpi .val{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.dashV .kpi .val small{font-size:15px;font-weight:700;color:var(--mut);margin-left:2px}
.dashV .kpi .sub{color:var(--mut);font-size:11.5px;font-weight:600}
/* KPI "tocáveis agora" — destaque laranja */
.dashV .card.hot{border-color:color-mix(in srgb,var(--lar) 34%,var(--lin))}
.dashV .card.hot .lab{color:var(--lar)}

/* ── funil (passo/barra reescritos no escopo dashV) ────────────────────── */
/* O painel antigo tem .passo com layout flex+largura fixa de .rot; o dashV
   usa outro layout: rot flex:1, barra estilizada diferente, n à direita. */
.dashV .passo{display:block;margin:11px 0;border:0;padding:0}
.dashV .passo:last-child{border:0}
.dashV .passo .rot{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px;font-size:13px;font-weight:600;width:auto}
.dashV .passo .n{font-size:12px;color:var(--mut);font-weight:600;width:auto;text-align:right}
.dashV .passo .n b{font-size:12px;font-weight:600}
.dashV .barra{display:block;flex:none;height:12px;border-radius:99px;background:color-mix(in srgb,var(--mut) 12%,transparent);overflow:hidden;width:100%;position:static}
.dashV .barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--tea),color-mix(in srgb,var(--tea) 70%,var(--lar)))}
/* gargalo: barra em atenção (--ale) */
.dashV .passo.gargalo .barra i{background:linear-gradient(90deg,var(--ale),color-mix(in srgb,var(--ale) 70%,var(--card)))}
/* selo de gargalo */
.dashV .gtag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:var(--ale);
  background:color-mix(in srgb,var(--ale) 12%,transparent);border-radius:99px;padding:1px 7px;margin-left:7px}
/* ── donut de tabulações ──────────────────────────────────────────────── */
.dashV .donutWrap{display:flex;align-items:center;gap:16px}
.dashV .leg{display:flex;flex-direction:column;gap:8px;font-size:12.5px;flex:1;min-width:0}
.dashV .leg .li{display:flex;align-items:center;gap:8px}
.dashV .leg .dot{width:10px;height:10px;border-radius:3px;flex:none}
.dashV .leg .nm{flex:1;color:var(--tinta);font-weight:600;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashV .leg .qt{color:var(--mut);font-weight:700}
/* ── card de gráfico (Movimento): seletor + legenda ───────────────────── */
.dashV .gtabs{margin-left:auto;display:flex;gap:4px}
.dashV .gtab{border:1px solid var(--lin);background:transparent;color:var(--mut);border-radius:8px;padding:4px 10px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.dashV .gtab:hover{color:var(--tinta)}
.dashV .gtab.on{color:var(--tinta);border-color:var(--tea);background:color-mix(in srgb,var(--tea) 8%,var(--card))}
.dashV .gleg{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--mut)}
.dashV .gleg span{display:inline-flex;align-items:center;gap:6px}
.dashV .gleg i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ── cabeçalho do card de pessoas ─────────────────────────────────────── */
.dashV .verTodas{margin-left:auto;color:var(--tea);font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap}

/* ── tabela de pessoas (pHead/prow2) ───────────────────────────────────── */
.dashV .pHead,.dashV .prow2{display:grid;grid-template-columns:minmax(190px,1.4fr) auto minmax(150px,1fr) 132px;gap:16px;align-items:center}
.dashV .pHead{padding:4px 6px 8px;color:var(--mut);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.dashV .prow2{padding:11px 6px;border-top:1px solid var(--lin);border-radius:10px}
.dashV .prow2:hover{background:color-mix(in srgb,var(--tinta) 4%,transparent)}
.dashV .pcell{display:flex;align-items:center;gap:12px;min-width:0}
/* avatar maior que o global (.av é 26px; nas linhas de pessoa do dash é 34px) */
.dashV .prow2 .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.dashV .who{min-width:0;flex:1}
.dashV .who b{font-size:13.5px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashV .who .sec{font-size:11.5px;color:var(--mut);font-weight:600}
.dashV .cpc{font-size:9px;font-weight:800;color:var(--bom);background:color-mix(in srgb,var(--bom) 14%,transparent);border-radius:99px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.dashV .multi{font-size:9px;font-weight:800;color:var(--mut);background:color-mix(in srgb,var(--mut) 13%,transparent);border-radius:99px;padding:1px 6px;margin-left:6px}
/* onde está: status + evento + janela */
.dashV .onde .ev{font-size:11.5px;color:var(--mut);font-weight:600;margin-top:4px}
.dashV .jan{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;color:#3b82f6;margin-top:4px}
.dashV .win{width:7px;height:7px;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 3px color-mix(in srgb,#3b82f6 22%,transparent);flex:none}
/* badges de status (st) */
.dashV .st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;white-space:nowrap}
.dashV .st.resp{color:var(--tea);background:color-mix(in srgb,var(--tea) 12%,transparent)}
.dashV .st.conv{color:var(--bom);background:color-mix(in srgb,var(--bom) 14%,transparent)}
.dashV .st.leu{color:var(--ale);background:color-mix(in srgb,var(--ale) 14%,transparent)}
.dashV .st.env{color:var(--mut);background:color-mix(in srgb,var(--mut) 12%,transparent)}
/* ações: botões de ação por linha */
.dashV .acts{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.dashV .iconbtn{width:30px;height:30px;border-radius:9px;border:1px solid var(--lin);background:var(--card);color:var(--mut);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s;font-family:inherit;font-size:13px}
.dashV .prow2:hover .iconbtn{opacity:1}
.dashV .iconbtn:hover{color:var(--tinta);border-color:var(--tea)}
.dashV .iconbtn.del:hover{color:#fff;background:var(--mal);border-color:var(--mal)}
.dashV .toca{border:1px solid color-mix(in srgb,var(--escolhido) 40%,var(--lin));background:color-mix(in srgb,var(--escolhido) 10%,transparent);color:var(--escolhido);border-radius:9px;padding:7px 12px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}

/* ── feed de eventos ────────────────────────────────────────────────────── */
/* O feed usa .passo (reutilizado do eventoFeed) mas com o layout antigo (pill
   + texto + horário); o dashV.passo acima sobrescreve o display:block, então
   precisamos restaurar o flex SÓ dentro do feed. */
.dashV .feed .passo{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--lin);margin:0}
.dashV .feed .passo:last-child{border:0}

/* Barra de filtros A1 (etapa B, spec 2026-09-24-hub-campanhas-design): UMA
   linha — busca + um botão por grupo; o filtro ligado aparece DENTRO do botão.
   Vale nos DOIS layouts, por isso mora aqui (e não em lateral.css) e só usa
   classes novas: não altera regra antiga. Unidades fluidas; px só em linhas de
   1–2px (trava em hubCampanhas.test.js). */
.filtrosA1{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2);margin:0 0 var(--esp-3)}
.filtrosA1 .fBusca{flex:0 1 17rem;width:auto;min-width:min(100%,12rem);margin:0}
.filtrosA1 .fEsp{flex:1 1 0}
.fGrupo{position:relative;display:inline-flex;align-items:stretch}
.fBtn{display:inline-flex;align-items:center;gap:var(--esp-1);min-height:2.25rem;padding:0 var(--esp-3);border:1px dashed var(--lin);border-radius:99rem;background:transparent;color:var(--mut);font:inherit;font-size:var(--fs-2);white-space:nowrap;cursor:pointer}
.fBtn:hover{border-color:var(--tea);color:var(--tinta)}
.fBtn .fMais{font-weight:700}
.fBtn .fSep{opacity:.5}
.fGrupo.on .fBtn{border-style:solid;border-color:var(--tinta);background:var(--tinta);color:var(--paper);padding-right:var(--esp-2)}
.fGrupo.on:has(.fX) .fBtn{border-radius:99rem 0 0 99rem}
.fX{min-height:2.25rem;padding:0 var(--esp-2);border:1px solid var(--tinta);border-left:0;border-radius:0 99rem 99rem 0;background:var(--tinta);color:var(--paper);font:inherit;font-size:var(--fs-2);cursor:pointer}
.fX:hover{opacity:.8}
.fMenu{position:absolute;top:calc(100% + var(--esp-1));left:0;z-index:30;display:flex;flex-direction:column;min-width:15rem;max-width:min(22rem,90vw);max-height:min(24rem,60dvh);overflow-y:auto;padding:var(--esp-1);background:var(--card);border:1px solid var(--lin);border-radius:var(--raio-2);box-shadow:0 .5rem 1.5rem color-mix(in srgb,var(--tinta) 18%,transparent)}
.fMenu[hidden]{display:none}
.fOpc{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);min-height:2.25rem;padding:0 var(--esp-3);border:0;border-radius:var(--raio-1);background:transparent;color:var(--tinta);font:inherit;font-size:var(--fs-3);text-align:left;cursor:pointer}
.fOpc:hover{background:color-mix(in srgb,var(--tinta) 6%,transparent)}
.fOpc.on{font-weight:700;background:color-mix(in srgb,var(--escolhido) 12%,transparent)}
.fOpc.zero{opacity:.45}
.fOpc .fN{font-variant-numeric:tabular-nums;font-weight:600;color:var(--mut)}
.fDiv{margin:var(--esp-1) 0;border:0;border-top:1px solid var(--lin)}
.fData{width:auto;margin:var(--esp-1)}
.fLimpar{padding:0 var(--esp-1);border:0;background:transparent;color:var(--mut);font:inherit;font-size:var(--fs-2);text-decoration:underline;cursor:pointer}
.fSeg{display:inline-flex;border:1px solid var(--lin);border-radius:99rem;overflow:hidden}
.fSeg button{min-height:2.25rem;padding:0 var(--esp-3);border:0;background:transparent;color:var(--mut);font:inherit;font-size:var(--fs-2);cursor:pointer}
.fSeg button.on{background:var(--tinta);color:var(--paper)}

/* "Onde estão os leads" (etapa C, C6) — vale nos DOIS layouts, a pedido: por
   isso mora fora dos arquivos do layout novo e não cita o layout. Classes
   novas com prefixo bd (".balde" já existe na prévia da carga). Cor por token:
   andando = --acao, parado = --ale, acordo = --sucesso, quebrou = --mal
   (paleta testada sob daltonismo em refinamentoVisual.test.js), "sem resposta
   ainda" = --espera, cinza sólido (base.css: ≥ 3:1 sobre o pote e separado
   das outras quatro sob daltonismo). Toda bolinha é SÓLIDA — sem anel, sem
   contorno, sem sombra; a janela de 24h aberta virou o número .bdToc embaixo
   do balde. Unidades fluidas; px só em linhas de 1–2px. */
.bdGrade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5rem),1fr));gap:var(--esp-3);align-items:start}
.bdBalde{display:flex;flex-direction:column;align-items:center;gap:var(--esp-1);min-width:0}
.bdPote{width:100%;min-height:6rem;display:flex;flex-wrap:wrap-reverse;align-content:flex-start;gap:.1875rem;padding:.3125rem;border:2px solid var(--lin);border-top:0;border-radius:0 0 .75rem .75rem;background:var(--paper)}
.bolinha{display:inline-block;flex:none;width:.625rem;height:.625rem;padding:0;border:0;border-radius:50%;background:var(--acao);cursor:pointer}
.bolinha:hover,.bolinha:focus-visible{transform:scale(1.4)}
.bolinha.parado{background:var(--ale)}
.bolinha.acordo{background:var(--sucesso)}
.bolinha.quebrou{background:var(--mal)}
.bolinha.espera{background:var(--espera)}
.bdMais{align-self:center;padding-left:.125rem;font-size:var(--fs-1);font-weight:700;color:var(--mut)}
.bdN{font-size:var(--fs-4);font-variant-numeric:tabular-nums}
.bdRot{max-width:100%;padding:0;border:0;background:transparent;color:var(--mut);font:inherit;font-size:var(--fs-2);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.bdRot:hover{color:var(--tinta)}
.bdToc{font-size:var(--fs-1);color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.bdLeg{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-4);margin-top:var(--esp-3);font-size:var(--fs-1);color:var(--mut)}
.bdLeg span{display:inline-flex;align-items:center;gap:var(--esp-1)}
.bdLeg .bolinha{cursor:default}
.bdLeg .bolinha:hover{transform:none}
/* toque: a bolinha (.625rem) não é alvo de dedo — vira só desenho, e o rótulo
   do balde (Pessoas filtrado) cresce até o alvo mínimo */
@media (pointer: coarse){
  .bolinha{pointer-events:none}
  .bdRot{display:inline-flex;align-items:center;min-height:var(--toque);padding:0 var(--esp-2)}
}
@media (prefers-reduced-motion: reduce){
  .bolinha:hover,.bolinha:focus-visible{transform:none}
}

/* Aba Resultados (BI de acordos). Vale nos dois layouts, então não cita o
   layout. Unidades fluidas; a tabela rola dentro do próprio quadro (sem scroll
   de página). Cor só por token. */
.resBox{margin:0 0 var(--esp-4)}
.resBox h2{margin:0 0 var(--esp-3);font-size:var(--fs-4)}
.resBox .ch{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.resBox .ch h2{margin:0}
.resExp{display:inline-flex;gap:var(--esp-2)}
.resExp .btn{display:inline-flex;align-items:center;gap:var(--esp-1)}
.resCustom{display:flex;flex-wrap:wrap;gap:var(--esp-2);padding:var(--esp-1);font-size:var(--fs-2);color:var(--mut)}
.resCustom label{display:flex;align-items:center;gap:var(--esp-1)}
.resBarras{display:grid;gap:var(--esp-2);margin:0 0 var(--esp-4)}
.resBarra{display:grid;grid-template-columns:minmax(6rem,12rem) 1fr 4rem;align-items:center;gap:var(--esp-3);font-size:var(--fs-3)}
.resBarraNome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resBarra .num{text-align:right}
.resGrade{display:grid;gap:var(--esp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));margin:0 0 var(--esp-4)}
.resGrade .resBox{margin:0}
.resRola{max-height:min(28rem,60dvh);overflow:auto}
.resLista+.btn{margin-top:var(--esp-3)}
.resDonut{display:flex;align-items:center;gap:var(--esp-4)}
.resDonut .leg{display:flex;flex-direction:column;gap:var(--esp-2);font-size:var(--fs-2);flex:1;min-width:0}
.resDonut .li{display:flex;align-items:center;gap:var(--esp-2)}
.resDonut .dot{width:.625rem;height:.625rem;border-radius:.2rem;flex:none}
.resDonut .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resDonut .qt{color:var(--mut);font-weight:700}

/* Guia APIs da aba Logs — timeline por nó. Cor só por token; unidades fluidas.
   Sem scroll de página: o corpo ocupa o resto da janela e lista/detalhe rolam por dentro. */
.exe-filtros { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; padding: var(--esp-2) var(--esp-3); }
.exe-filtros input, .exe-filtros select { width: auto; min-height: 0; padding: .3125rem .625rem; font-size: var(--fs-2); }
.exe-filtros input { flex: 1 1 8rem; min-width: 6rem; max-width: 12rem; }
.exe-filtros select { flex: 0 0 auto; }
.exe-filtros .btn { margin-left: auto; }
.exe-corpo { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--esp-3);
  height: max(20rem, calc(100dvh - 18.25rem)); }
@media (max-width: 64em) { .exe-corpo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1.4fr); height: max(28rem, calc(100dvh - 18.25rem)); } }
.exe-lista, .exe-detalhe { overflow: auto; min-height: 0; margin: 0; }
.exe-lista.card { padding: 0; }
.exe-detalhe.card { padding: var(--esp-3); }
.exe-tabela { font-size: var(--fs-1); }
/* .exe-lista na frente: vence o padding gen�rico de th/td da casca (especificidade, sem citar layout) */
.exe-lista .exe-tabela th { position: sticky; top: 0; background: var(--card); padding: var(--esp-2) var(--esp-1) var(--esp-2) var(--esp-2); letter-spacing: .03em; white-space: nowrap; z-index: 1; }
.exe-lista .exe-tabela td { padding: var(--esp-1) var(--esp-1) var(--esp-1) var(--esp-2); }
.exe-hora, .exe-curta { white-space: nowrap; }
.exe-rota { max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 100em) { .exe-rota { max-width: 18rem; } }
.exe-linha { cursor: pointer; }
.exe-linha:hover { background: color-mix(in srgb, var(--acao) 8%, transparent); }
.exe-detalhe { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-2); }
.exe-cab { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: baseline; margin: 0; font-size: var(--fs-2); }
.exe-cab b { overflow-wrap: anywhere; }
.exe-st { padding: 0 var(--esp-2); border: 1px solid var(--lin); border-radius: 99rem; font-size: var(--fs-1); }
.exe-st.mal { color: var(--mal); border-color: var(--mal); }
.exe-timeline { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(8rem, 1fr); gap: var(--esp-3); }
@container (min-width: 40rem) { .exe-timeline { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.exe-nos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-1); align-content: start; overflow: auto; min-height: 0; max-height: 13rem; padding: .125rem; }
@container (min-width: 40rem) { .exe-nos { max-height: none; } }
.exe-no { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: var(--esp-1) var(--esp-2); padding: var(--esp-1) var(--esp-2);
  border: 1px solid var(--lin); border-radius: var(--raio-1); cursor: pointer; font-size: var(--fs-2); }
.exe-no.no-sel { outline: 2px solid var(--acao); }
.exe-no.no-falhou { border-color: var(--mal); border-left-width: .25rem; background: color-mix(in srgb, var(--mal) 12%, transparent); }
.exe-nome { overflow-wrap: anywhere; }
.exe-no.no-falhou .exe-nome { font-weight: 700; }
.exe-barra { grid-column: 1 / -1; position: relative; height: .375rem; background: color-mix(in srgb, var(--tinta) 14%, transparent); border-radius: 1px; overflow: hidden; }
.exe-barra-fill { position: absolute; top: 0; bottom: 0; min-width: .1875rem; background: var(--acao); border-radius: 1px; }
.exe-no.no-falhou .exe-barra-fill { background: var(--mal); }
.exe-ms { font-size: var(--fs-1); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85; }
.exe-erro { grid-column: 1 / -1; font-size: var(--fs-1); color: var(--mal); overflow-wrap: anywhere; }
.exe-painel { display: flex; flex-direction: column; gap: var(--esp-2); min-height: 0; min-width: 0; }
.exe-painel p { margin: 0; }
.exe-ctl { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.exe-ctl .btn { margin-left: auto; }
#exeConteudo { flex: 1; min-height: 0; overflow: auto; }
#exeConteudo pre { margin: var(--esp-1) 0; padding: var(--esp-2); border: 1px solid var(--lin); border-radius: var(--raio-1);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-1); }
.exe-vazio { opacity: .7; font-style: italic; }

/* Refinamento visual — etapa C (spec docs/superpowers/specs/2026-09-24-
   refinamento-visual-design.md). A BASE (C1) do layout novo: reestiliza as
   classes que as telas JÁ usam, sem mexer na marcação de nenhuma. TODA regra
   começa com [data-layout="lateral"] (trava em navegacao.test.js) — o clássico
   fica congelado. Vem logo antes de lateral.css no manifest: a moldura da
   navegação continua vencendo a cascata.
   Os campos só dentro do <main>: o chip "vendo como" (topo) e a faixa do hub
   têm regra própria e não podem herdar largura de formulário. Os tipos de
   input são listados um a um: color/range/file (estúdio de portais, carga)
   ficam como estão.
   Unidades fluidas; px só em linhas de 1–2px. Sem :is()/:where() com vírgula:
   a trava de escopo lê o seletor por vírgula. */

/* estado escolhido/ativo e ação: petróleo aqui (no clássico é o laranja). */
[data-layout="lateral"]{--escolhido:var(--acao);--escolhido-txt:var(--acao-txt)}

/* ── tipografia ──────────────────────────────────────────────────────────── */
[data-layout="lateral"] main{font-size:var(--fs-3);line-height:1.5}
[data-layout="lateral"] main h1{font-size:clamp(1.25rem, 1rem + 1vw, 1.5rem);font-weight:700;letter-spacing:-.02em;margin:0 0 .125rem}
[data-layout="lateral"] main .lead{max-width:44rem;font-size:var(--fs-2);margin:0 0 var(--esp-4)}
[data-layout="lateral"] main .card h2{font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0 0 .125rem}
[data-layout="lateral"] main .card .dica{font-size:var(--fs-2);margin:.125rem 0 var(--esp-3)}
[data-layout="lateral"] main .kpi{font-size:var(--fs-6);font-weight:700}
[data-layout="lateral"] main label{font-size:var(--fs-2)}

/* ── campos pela largura do conteúdo (o fim do width:100%) ──────────────── */
[data-layout="lateral"] main input[type=text],
[data-layout="lateral"] main input:not([type]),
[data-layout="lateral"] main input[type=email],
[data-layout="lateral"] main input[type=tel],
[data-layout="lateral"] main input[type=url],
[data-layout="lateral"] main input[type=password]{width:100%;max-width:28rem;min-height:2rem;padding:.3125rem .625rem;border-radius:.4375rem;background:var(--card)}
[data-layout="lateral"] main input[type=date],
[data-layout="lateral"] main input[type=datetime-local],
[data-layout="lateral"] main input[type=time]{width:12.5rem;max-width:100%;min-height:2rem;padding:.3125rem .625rem;border-radius:.4375rem;background:var(--card)}
[data-layout="lateral"] main input[type=number]{width:7rem;max-width:100%;min-height:2rem;padding:.3125rem .625rem;border-radius:.4375rem;background:var(--card)}
[data-layout="lateral"] main select{width:auto;min-width:min(10rem,100%);max-width:min(100%,20rem);min-height:2rem;padding:.3125rem .625rem;border-radius:.4375rem;background:var(--card)}
[data-layout="lateral"] main textarea{width:100%;max-width:none;border-radius:.4375rem;background:var(--card)}
[data-layout="lateral"] main input[type=search]:not(.fBusca){width:100%;max-width:none}
/* busca e dia da barra A1 (filtros.css): a largura é da barra; a cara é a dos campos */
[data-layout="lateral"] main input[type=search].fBusca{min-height:2rem;padding:.3125rem .625rem;border-radius:.4375rem;background:var(--card)}
[data-layout="lateral"] main input[type=date].fData{width:auto}
[data-layout="lateral"] main .largo{width:100%;max-width:none}
[data-layout="lateral"] main input:focus-visible,
[data-layout="lateral"] main select:focus-visible,
[data-layout="lateral"] main textarea:focus-visible{outline:2px solid var(--acao);outline-offset:1px;border-color:var(--acao)}
/* grade de CAMPOS vira fluxo lado a lado; grade de cartões fica como está */
[data-layout="lateral"] main .grid:has(> .campo){display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--esp-3) var(--esp-4)}
[data-layout="lateral"] main .grid:has(> .campo)>.campo{flex:1 1 12rem;max-width:28rem;margin-bottom:0}
/* o vizinho que não é .campo (botão, aviso, bloco) numa grade de campos: sem
   isto o flex o encolhe até o conteúdo mínimo */
[data-layout="lateral"] main .grid:has(> .campo)>:not(.campo){flex:1 1 12rem;max-width:28rem}
[data-layout="lateral"] main .campo{margin-bottom:var(--esp-3)}

/* ── exceções que a base acima atropelaria (a especificidade é conferida em
   refinamentoVisual.test.js, não só a presença do texto) ─────────────────── */
/* estúdio de portais: o hex ao lado do seletor de cor fica curto */
[data-layout="lateral"] main .corLinha input:not(.corSel){width:7rem;max-width:none}
/* barra do palco do estúdio: o seletor compacto de portais.css (mesma largura mínima, fundo papel) */
[data-layout="lateral"] main .estBarra select{min-width:8.75rem;max-width:none;min-height:0;padding:0 .625rem;border-radius:.5625rem;background:var(--paper)}
/* assistente de Acionamento: o compacto de acionamento.css (.body input…, mais
   específico que a C1) deixava o texto no visual antigo e o seletor no novo */
[data-layout="lateral"] main .body input:not([type=checkbox]):not([type=radio]):not([type=file]),
[data-layout="lateral"] main .body select{height:auto;min-height:2rem;padding:.3125rem .625rem;border-radius:.4375rem;background:var(--card);font-size:inherit}
/* Visão: o nome da campanha no título não é cortado */
[data-layout="lateral"] main .dashV .campSwitch select{max-width:none}

/* ── controles ───────────────────────────────────────────────────────────── */
[data-layout="lateral"] .btn{min-height:2rem;padding:0 .75rem;border-radius:.4375rem;font-weight:600;font-size:var(--fs-2);background:var(--acao);color:var(--acao-txt)}
[data-layout="lateral"] .btn.sec{background:var(--card);color:var(--tinta);border:1px solid var(--lin)}
[data-layout="lateral"] .btn.sec:hover{border-color:var(--acao);filter:none}
[data-layout="lateral"] .btn.ghost{background:transparent;color:var(--mut);border:1px solid transparent}
[data-layout="lateral"] .btn.ghost:hover{color:var(--tinta);background:color-mix(in srgb,var(--tinta) 6%,transparent);filter:none}
[data-layout="lateral"] .btn.pq{min-height:1.75rem;padding:0 .625rem;font-size:var(--fs-1)}
/* perigo (mesa.css) mantém o sentido: contorno vermelho; o sólido, cheio. Sem
   estas, a base .btn acima (mesma especificidade, depois) pintava "Cancelar
   acordo" de petróleo e o hover claro apagava o texto branco */
[data-layout="lateral"] .btn.perigo{background:transparent;color:var(--mal);border:1px solid var(--mal)}
[data-layout="lateral"] .btn.perigo:hover{background:color-mix(in srgb,var(--mal) 8%,transparent);color:var(--mal);filter:none}
[data-layout="lateral"] .btn.perigo.solido{background:var(--mal);color:var(--sobre-forte);border-color:transparent}
[data-layout="lateral"] .btn:focus-visible{outline:2px solid var(--acao);outline-offset:2px}
[data-layout="lateral"] .tgl input:checked+.sl{background:var(--acao)}
[data-layout="lateral"] .tgl input:focus-visible+.sl{outline:2px solid var(--acao);outline-offset:2px}
/* tela de toque: o controle compacto cresce até o alvo mínimo */
@media (pointer: coarse){
  [data-layout="lateral"] .btn,
  [data-layout="lateral"] .btn.pq{min-height:var(--toque)}
}

/* ── cartões ─────────────────────────────────────────────────────────────── */
[data-layout="lateral"] main .card{box-shadow:none;border-radius:var(--raio-2);padding:.875rem 1rem}
/* cartão chapado não ganha sombra só no hover (visao.css, claro e escuro) */
[data-layout="lateral"] main .dashV .card:hover{box-shadow:none}

/* ── tabela ──────────────────────────────────────────────────────────────── */
[data-layout="lateral"] main table{font-size:var(--fs-2)}
[data-layout="lateral"] main th{font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;padding:0 .625rem .5rem}
[data-layout="lateral"] main td{padding:.5625rem .625rem}
[data-layout="lateral"] main tbody tr:hover>td{background:color-mix(in srgb,var(--tinta) 3%,transparent)}
[data-layout="lateral"] main tbody tr:last-child>td{border-bottom:0}
/* amostra da carga (acionamento.css): tabela larga e densa, com respiro próprio */
[data-layout="lateral"] main .amoT th,
[data-layout="lateral"] main .amoT td{padding:.5625rem 1rem}

/* ── selos e avisos: sucesso ganha verde próprio (C5) ────────────────────── */
[data-layout="lateral"] .pill{font-weight:600}
[data-layout="lateral"] .pill.bom{background:color-mix(in srgb,var(--sucesso) 16%,transparent);color:var(--tinta)}
[data-layout="lateral"] .aviso.ok{background:color-mix(in srgb,var(--sucesso) 9%,var(--card));border-color:color-mix(in srgb,var(--sucesso) 34%,var(--lin))}

/* ── estados "escolhido": petróleo, não laranja (C5) ─────────────────────── */
[data-layout="lateral"] .fBtn:hover{border-color:var(--acao)}
[data-layout="lateral"] .fOpc.on{background:color-mix(in srgb,var(--acao) 12%,transparent)}
[data-layout="lateral"] .opt:hover{border-color:var(--acao)}
[data-layout="lateral"] .opt.on{border-color:var(--acao);background:color-mix(in srgb,var(--acao) 7%,var(--card))}
[data-layout="lateral"] .vstep.on .vn{background:var(--acao);border-color:var(--acao);color:var(--acao-txt)}
[data-layout="lateral"] .lote.on{border-color:var(--acao);background:color-mix(in srgb,var(--acao) 8%,var(--card))}
[data-layout="lateral"] .lote.on .ck{background:var(--acao);border-color:var(--acao)}
[data-layout="lateral"] main input[type=checkbox],
[data-layout="lateral"] main input[type=radio]{accent-color:var(--acao)}

/* ── C2: cabeçalho de tela, números em faixa, barra de progresso, chave/valor ── */
[data-layout="lateral"] .cabBloco{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3);margin:0 0 var(--esp-4)}
[data-layout="lateral"] .cabBloco .cbTit{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3);flex:1 1 20rem;min-width:0}
[data-layout="lateral"] .cabBloco h1{margin:0}
/* texto corrido (não flex): em flex cada <b> do meio da frase virava um item
   com espaço em volta ("de   por cliente   ,") */
[data-layout="lateral"] .cabBloco .cbSub{display:block;color:var(--mut);font-size:var(--fs-2)}
[data-layout="lateral"] .cabBloco .cbSel{width:auto;min-width:10rem;max-width:min(100%,20rem);font-weight:600}
[data-layout="lateral"] .cabBloco .cbAcoes{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-2)}
[data-layout="lateral"] .cabBloco .cbAcoes .btn+.btn{margin-left:0}
/* o mínimo em % de `main select` (min(10rem,100%)) é circular dentro das ações,
   que se medem pelo conteúdo: o seletor tomava a largura toda e o rótulo
   ("período", no Analista) ia pra cima dele. Aqui o mínimo é fixo. */
[data-layout="lateral"] main .cabBloco .cbAcoes select{min-width:8rem}
[data-layout="lateral"] .aoVivo{display:inline-flex;align-items:center;gap:var(--esp-2);color:var(--acao);font-size:var(--fs-2);font-weight:600}
[data-layout="lateral"] .aoVivo i{width:.4375rem;height:.4375rem;border-radius:50%;background:var(--acao);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--acao) 20%,transparent)}
/* o tempo real caiu: a marca não finge (a casca troca pra "reconectando…") */
[data-layout="lateral"] .aoVivo.off{color:var(--mut)}
[data-layout="lateral"] .aoVivo.off i{background:var(--mut);box-shadow:none}
[data-layout="lateral"] .kpisFaixa{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));margin:0 0 var(--esp-4);padding:var(--esp-3) var(--esp-1);background:var(--card);border:1px solid var(--lin);border-radius:var(--raio-2)}
/* a faixa é UMA caixa com divisórias: zera o que o estilo neutro das peças
   (componentes.css, que vale nos dois layouts) dá a cada item — fundo, borda
   em volta, raio e o espaço entre eles — senão viram caixinhas dentro da caixa */
[data-layout="lateral"] .kpisFaixa{gap:0}
[data-layout="lateral"] .kpisFaixa .kfItem{min-width:0;padding:var(--esp-1) var(--esp-4);background:none;border:0;border-right:1px solid var(--lin);border-radius:0}
[data-layout="lateral"] .kpisFaixa .kfItem:last-child{border-right:0}
[data-layout="lateral"] .kpisFaixa .kfRot{font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
[data-layout="lateral"] .kpisFaixa .kfVal{display:block;font-size:var(--fs-6);font-weight:700;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
[data-layout="lateral"] .kpisFaixa .kfVal small,
[data-layout="lateral"] .kpisFaixa .kfSub{font-size:var(--fs-2);font-weight:500;letter-spacing:0;color:var(--mut)}
[data-layout="lateral"] .kpisFaixa .kfMal{color:var(--mal)}
[data-layout="lateral"] .barraProg{height:.25rem;margin-top:var(--esp-2);border-radius:99rem;background:color-mix(in srgb,var(--tinta) 8%,transparent);overflow:hidden}
[data-layout="lateral"] .barraProg i{display:block;height:100%;border-radius:inherit;background:var(--realce)}
[data-layout="lateral"] .kvLista{margin:0}
[data-layout="lateral"] .kvLista .kv{display:flex;justify-content:space-between;gap:var(--esp-3);padding:.4375rem 0;border-bottom:1px solid var(--lin);font-size:var(--fs-2)}
[data-layout="lateral"] .kvLista .kv:last-child{border-bottom:0}
[data-layout="lateral"] .kvLista dt{color:var(--mut)}
[data-layout="lateral"] .kvLista dd{margin:0;min-width:0;font-weight:600;text-align:right;overflow-wrap:anywhere}

/* ── painel da campanha (forma painel, C4) ───────────────────────────────── */
[data-layout="lateral"] .gradeCamp{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--esp-3);align-items:start;margin-bottom:var(--esp-3)}
[data-layout="lateral"] .gradeCamp .gcCol{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
/* os cartões reaproveitados da forma clássica (links rastreados) trazem
   style="margin-top:12px" INLINE, e estilo inline só perde pra !important — não
   há especificidade de seletor que o vença. Tirar o inline mudaria o clássico,
   que está congelado; por isso o !important fica, só aqui. */
[data-layout="lateral"] .gradeCamp .gcCol>.card{margin:0 !important}
[data-layout="lateral"] .linhaTgl{display:flex;align-items:center;gap:var(--esp-2);margin:var(--esp-3) 0 var(--esp-1);cursor:pointer}
[data-layout="lateral"] .cfTopo{justify-content:space-between;align-items:center;margin-bottom:var(--esp-2)}
[data-layout="lateral"] .cfTopo h2{margin:0}
[data-layout="lateral"] .fpPasso{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 5.5rem;gap:var(--esp-3);align-items:center;padding:.3125rem 0}
[data-layout="lateral"] .fpRot{font-size:var(--fs-2)}
[data-layout="lateral"] .fpBarra{height:.625rem;border-radius:99rem;background:color-mix(in srgb,var(--tinta) 6%,transparent);overflow:hidden}
[data-layout="lateral"] .fpBarra i{display:block;height:100%;border-radius:inherit;background:var(--acao)}
[data-layout="lateral"] .fpPasso.gargalo .fpBarra i{background:var(--mal)}
[data-layout="lateral"] .fpN{text-align:right;font-variant-numeric:tabular-nums;font-size:var(--fs-2)}
[data-layout="lateral"] .fpN .queda{display:block;font-style:normal;font-size:var(--fs-1);font-weight:700;color:var(--mal)}
@media (width <= 64em){
  [data-layout="lateral"] .gradeCamp{grid-template-columns:minmax(0,1fr)}
}

/* ── baldes no layout novo: o mesmo desenho, com a moldura da C1 ─────────── */
[data-layout="lateral"] .bdPote{border-width:0 1px 1px;border-radius:0 0 var(--raio-2) var(--raio-2)}

/* ── Visão (forma painel, C4) ────────────────────────────────────────────── */
/* funil · onde está cada lead · tabulações, lado a lado e na MESMA altura
   (sem buraco embaixo do funil); em tela média o funil ocupa a linha de cima */
[data-layout="lateral"] .gradeVisao{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:var(--esp-3);align-items:stretch;margin-bottom:var(--esp-3)}
[data-layout="lateral"] .gradeVisao>*,[data-layout="lateral"] .gradeVisao>#dashFunil>.card{height:100%}
/* pessoas em largura total; embaixo, movimento e "acontecendo agora" lado a
   lado na mesma altura (o feed rola dentro do cartão). Lado a lado com a lista
   de 6 pessoas o gráfico deixava buraco embaixo; em largura total o SVG, que
   escala com a largura, ficava gigante */
[data-layout="lateral"] .visaoP #dashPessoas{display:block;margin-bottom:var(--esp-3)}
[data-layout="lateral"] .gradeVisao2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:var(--esp-3);margin:0 0 var(--esp-3);align-items:stretch}
[data-layout="lateral"] .gradeVisao2>*,[data-layout="lateral"] .gradeVisao2>#dashGraficos>.card{height:100%}
[data-layout="lateral"] .gradeVisao2 .feed{max-height:16rem;overflow:auto}
/* a tabela de pessoas cabe no cartão: as colunas encolhem (minmax 0) em vez de
   empurrar "Onde está" pra fora da borda, como os mínimos em px do visao.css */
[data-layout="lateral"] .visaoP .pHead,[data-layout="lateral"] .visaoP .prow2{grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr) auto;gap:var(--esp-3)}
[data-layout="lateral"] .visaoP .onde{min-width:0}
[data-layout="lateral"] .visaoP .onde .ev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-layout="lateral"] .visaoP .card:hover{box-shadow:none}
/* o cartão da C1, não o do visao.css (.dashV .card: raio 18px, sombra, h2 grande)
   — o wrapper mantém dashV pros pedaços reaproveitados, e a trava tem de vencer
   pela especificidade, não pela sorte da ordem. */
[data-layout="lateral"] main .visaoP .card{border-radius:var(--raio-2);box-shadow:none;padding:.875rem 1rem}
[data-layout="lateral"] main .visaoP .card h2{font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
/* entrada (a classe .entra é posta pela casca ao abrir e ao trocar de campanha,
   nunca no tick do tempo real): o funil cresce e os números aparecem, como no
   clássico — as keyframes são as do visao.css */
[data-layout="lateral"] .visaoP .fpBarra i{transform-origin:left}
[data-layout="lateral"] .dashV.entra .fpBarra i{animation:dashBarGrow .6s cubic-bezier(.22,1,.36,1) both}
[data-layout="lateral"] .dashV.entra .kfVal{animation:dashPop .5s cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion:reduce){
  [data-layout="lateral"] .dashV.entra .fpBarra i,
  [data-layout="lateral"] .dashV.entra .kfVal{animation:none}
}
/* o "tocar" da lista de pessoas (cardPessoasCampanha, reaproveitado) é botão:
   petróleo, não o laranja do visao.css (C5 — laranja nunca é botão) */
[data-layout="lateral"] .dashV .toca{border-color:color-mix(in srgb,var(--acao) 40%,var(--lin));background:color-mix(in srgb,var(--acao) 10%,transparent);color:var(--acao)}
[data-layout="lateral"] .dashV .toca:hover{border-color:var(--acao);background:color-mix(in srgb,var(--acao) 16%,transparent)}
[data-layout="lateral"] .dashV .toca:focus-visible{outline:2px solid var(--acao);outline-offset:1px}
[data-layout="lateral"] .visaoP #dashBaldes{display:block;margin-bottom:var(--esp-3)}
/* trilha da jornada (Visão e Pessoas): etapa cumprida em petróleo, conversão no
   verde de sucesso — sólidas, sem halo (decisão de 24/09: bolinha com borda não
   se lê nesse tamanho; laranja é realce, não estado) */
[data-layout="lateral"] .trilha .et.on{background:var(--acao);box-shadow:none}
[data-layout="lateral"] .trilha .et.fim{background:var(--sucesso);box-shadow:none}
[data-layout="lateral"] .trilha .lig.on{background:color-mix(in srgb,var(--acao) 45%,transparent)}
[data-layout="lateral"] .visaoP .fpN{min-width:0}
@media (width <= 75em){
  [data-layout="lateral"] .gradeVisao{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  [data-layout="lateral"] .gradeVisao>#dashFunil{grid-column:1 / -1}
}
@media (width <= 48em){
  [data-layout="lateral"] .gradeVisao{grid-template-columns:minmax(0,1fr)}
}

/* ── Pessoas (forma painel, C4) ──────────────────────────────────────────── */
[data-layout="lateral"] .pesP .ppNome{cursor:pointer}
[data-layout="lateral"] .pesP .ppErro{color:var(--mal)}
[data-layout="lateral"] .pesP .ppTopo,
[data-layout="lateral"] .pesP .ppPe{justify-content:space-between}
[data-layout="lateral"] .pesP .ppTopo{margin:0 0 var(--esp-2)}
[data-layout="lateral"] .pesP .ppPe{margin-top:var(--esp-3)}
[data-layout="lateral"] .pesP .ppAcoes{text-align:right;white-space:nowrap}
[data-layout="lateral"] .icoBtn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:1px solid var(--lin);border-radius:.375rem;background:var(--card);color:var(--mut);font:inherit;vertical-align:middle;cursor:pointer}
[data-layout="lateral"] .icoBtn:hover{color:var(--tinta);border-color:var(--acao)}
[data-layout="lateral"] .icoBtn:focus-visible{outline:2px solid var(--acao);outline-offset:1px}
[data-layout="lateral"] .icoBtn[aria-expanded="true"]{color:var(--acao);border-color:var(--acao)}
[data-layout="lateral"] .ppMenu{position:relative;display:inline-block;vertical-align:middle;margin-left:var(--esp-1)}
[data-layout="lateral"] .ppMenu .exp-menu{min-width:12rem;text-align:left}
[data-layout="lateral"] .ppMenu .exp-menu[hidden]{display:none}
[data-layout="lateral"] .ppMenu .exp-item:focus-visible{outline:2px solid var(--acao);outline-offset:-2px}
@media (pointer: coarse){
  [data-layout="lateral"] .icoBtn{width:var(--toque);height:var(--toque)}
}

/* ── celular (C7): tabela marcada pela casca (.empilha) vira cartões ───────
   Cada linha vira um cartão; cada célula mostra o rótulo da coluna (data-rot,
   escrito pela casca) acima do valor — em bloco, pra célula com vários pedaços
   (nome + selo + subtítulo) seguir o fluxo de dentro como na tabela. A coluna
   sem rótulo no fim (ações: ✎ e o menu ⋯) desce pro pé do cartão — menos a
   célula com colspan, que é a linha inteira e não uma coluna. A tabela
   perde o recorte (table.tabela tem overflow:hidden) pra o menu ⋯ abrir. */
@media (width <= 45em){
  [data-layout="lateral"] main table.empilha,
  [data-layout="lateral"] main table.empilha tbody{display:block;width:100%}
  [data-layout="lateral"] main table.empilha{overflow:visible;border:0;border-radius:0;background:transparent}
  [data-layout="lateral"] main table.empilha thead{display:none}
  [data-layout="lateral"] main table.empilha tr{display:flex;flex-direction:column;gap:var(--esp-2);margin:0 0 var(--esp-2);padding:var(--esp-3);background:var(--card);border:1px solid var(--lin);border-radius:var(--raio-2)}
  [data-layout="lateral"] main table.empilha td{display:block;min-width:0;padding:0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  [data-layout="lateral"] main table.empilha td[data-rot]::before{content:attr(data-rot);display:block;margin-bottom:var(--esp-1);font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
  [data-layout="lateral"] main table.empilha td:last-child:not([data-rot]):not([colspan]){order:99;display:flex;align-items:center;justify-content:flex-end;gap:var(--esp-2);padding-top:var(--esp-2);border-top:1px solid var(--lin);white-space:nowrap}
  [data-layout="lateral"] main table.empilha tbody tr:hover>td{background:transparent}
  /* a célula que ocupa a linha inteira (estado vazio, detalhe aberto): o cartão
     todo, sem rótulo (a casca não o escreve) e fora do pé das ações */
  [data-layout="lateral"] main table.empilha td[colspan]{width:100%}
  /* Ferramentas: nome sem rótulo; carteira, quando pode e ativa numa linha só */
  [data-layout="lateral"] main table.empilha.ftTab tr{flex-direction:row;flex-wrap:wrap;align-items:center}
  [data-layout="lateral"] main table.empilha.ftTab td[data-rot="Ferramenta"]{flex-basis:100%}
  [data-layout="lateral"] main table.empilha.ftTab td[data-rot="Ferramenta"]::before{display:none}
  [data-layout="lateral"] main table.empilha.ftTab td[data-rot="Carteira"]::before{display:none}
  [data-layout="lateral"] main table.empilha.ftTab td[data-rot="Quando pode"]::before{display:none}
  [data-layout="lateral"] main table.empilha.ftTab td:last-child:not([data-rot]){flex-basis:100%}
}

/* ── celular (C7): o Acionamento empilha ─────────────────────────────────────
   Os passos (coluna fixa no desktop) viram uma faixa rolável no topo; o raio
   do disparo (.rail) já desce pra baixo do passo na grade estreita — aqui ele
   perde o sticky e a altura fixa, pra não cortar o botão Acionar. */
@media (width <= 45em){
  [data-layout="lateral"] .split .main{grid-template-columns:minmax(0,1fr);height:auto}
  [data-layout="lateral"] .split .vsteps{display:flex;gap:var(--esp-3);overflow-x:auto;padding:var(--esp-3);border-right:0;border-bottom:1px solid var(--lin)}
  [data-layout="lateral"] .split .vstep{flex:none;padding:0}
  [data-layout="lateral"] .split .vstep::before{display:none}
  [data-layout="lateral"] .split .vstep .vl small{display:none}
  [data-layout="lateral"] .split .body{overflow:visible}
  [data-layout="lateral"] .split .rail{position:static;height:auto}
}

/* Layout LATERAL (spec 2026-09-24-navegacao-lateral-opcional). TODA regra aqui
   começa com [data-layout="lateral"] — é o que mantém o clássico congelado
   (trava em navegacao.test.js). Unidades fluidas: rem, em nos breakpoints, dvh.
   px só em linhas de 1–2px. Faixas (range syntax, sem fresta): celular até 45em · tablet 45–64em ·
   notebook 64–90em · monitor acima de 90em. */

/* ── casca: some a barra do topo; o topo vira faixa fina ─────────────────── */
[data-layout="lateral"] #nav{display:none}
[data-layout="lateral"] header .bar>.logo{display:none}
[data-layout="lateral"] header .bar{max-width:none;padding:var(--esp-2) var(--esp-5)}
[data-layout="lateral"] main{max-width:90rem;padding:var(--esp-5) var(--esp-5) var(--esp-6)}
[data-layout="lateral"] body:has(#barraLateral:not(:empty)){padding-left:var(--bl-larg)}
[data-layout="lateral"][data-barra="trilho"] body:has(#barraLateral:not(:empty)){padding-left:var(--bl-trilho)}

/* ── barra lateral ────────────────────────────────────────────────────────── */
[data-layout="lateral"] #barraLateral{position:fixed;inset:0 auto 0 0;z-index:25;width:var(--bl-larg);height:100dvh;display:flex;flex-direction:column;gap:var(--esp-1);padding:var(--esp-3) var(--esp-2);background:var(--card);border-right:1px solid var(--lin);overflow-y:auto;overscroll-behavior:contain;font-size:var(--fs-3)}
[data-layout="lateral"] #barraLateral:empty{display:none}
/* Recolher/abrir: a barra e o respiro do conteúdo mudam juntos, com transição. */
[data-layout="lateral"] #barraLateral{transition:width .2s ease}
[data-layout="lateral"] body:has(#barraLateral:not(:empty)){transition:padding-left .2s ease}
[data-layout="lateral"] #barraLateral .blTopo{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);padding:var(--esp-1) var(--esp-2) var(--esp-3)}
[data-layout="lateral"] #barraLateral .logo{font-size:var(--fs-4);min-width:0}
/* ">": só o anel da marca Guia360 cresce — o .anelPq (dentro de .logoPlat, na
   marca do contratante) fica pequeno. Com logo do contratante a marca empilha:
   a barra não tem largura pra logo + separador + "plataforma Guia 360°". */
[data-layout="lateral"] #barraLateral .logo>.anel{width:1.25rem;height:1.25rem;border-width:.1875rem}
[data-layout="lateral"] #barraLateral .logoCli{max-width:9rem;height:1.5rem}
[data-layout="lateral"] #barraLateral .logo:has(.logoCli){flex-direction:column;align-items:flex-start;gap:var(--esp-1)}
[data-layout="lateral"] #barraLateral .logoSep{display:none}
[data-layout="lateral"] #barraLateral .logoPlat{gap:.25rem;font-size:var(--fs-1)}
[data-layout="lateral"] #barraLateral button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}
[data-layout="lateral"] #barraLateral .blRecolher{width:var(--toque);height:var(--toque);flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--raio-1);color:var(--mut)}
[data-layout="lateral"] #barraLateral .blRecolher:hover{background:color-mix(in srgb,var(--tinta) 6%,transparent);color:var(--tinta)}
[data-layout="lateral"] #barraLateral .blItens{display:flex;flex-direction:column;gap:.125rem;flex:1}
[data-layout="lateral"] #barraLateral .blGrp{font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:var(--esp-3) var(--esp-3) var(--esp-1)}
[data-layout="lateral"] #barraLateral .blItem{display:flex;align-items:center;gap:var(--esp-3);width:100%;min-height:var(--toque);padding:0 var(--esp-3);border-radius:var(--raio-1);color:var(--mut);font-weight:600;text-align:left;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
[data-layout="lateral"] #barraLateral .blItem .ico{width:1.125rem;height:1.125rem;transition:color .15s ease}
[data-layout="lateral"] #barraLateral .blItem:hover{color:var(--tinta);background:color-mix(in srgb,var(--tinta) 5%,transparent)}
[data-layout="lateral"] #barraLateral .blItem.on{color:var(--tinta);background:color-mix(in srgb,var(--acao) 12%,transparent)}
[data-layout="lateral"] #barraLateral .blItem.on .ico{color:var(--realce)}
/* Item com guias: item + seta são UMA linha. O fundo (hover e ativo) é da
   linha; os botões de dentro ficam transparentes — dois fundos lado a lado
   pareciam dois blocos soltos. */
[data-layout="lateral"] #barraLateral .blLinha{display:flex;align-items:center;border-radius:var(--raio-1);transition:background-color .15s ease}
[data-layout="lateral"] #barraLateral .blLinha:hover{background:color-mix(in srgb,var(--tinta) 5%,transparent)}
[data-layout="lateral"] #barraLateral .blLinha.on{background:color-mix(in srgb,var(--acao) 12%,transparent)}
[data-layout="lateral"] #barraLateral .blLinha .blItem{flex:1;min-width:0}
[data-layout="lateral"] #barraLateral .blLinha .blItem:hover,
[data-layout="lateral"] #barraLateral .blLinha .blItem.on{background:transparent}
[data-layout="lateral"] #barraLateral .blLinha:hover .blItem{color:var(--tinta)}
[data-layout="lateral"] #barraLateral .blSeta{width:2.25rem;min-height:var(--toque);flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--mut);border-radius:var(--raio-1);transition:color .15s ease}
[data-layout="lateral"] #barraLateral .blSeta:hover{color:var(--tinta)}
[data-layout="lateral"] #barraLateral .blSeta .ico{width:1rem;height:1rem;transition:transform .22s ease}
[data-layout="lateral"] #barraLateral .blCat.aberta .blSeta .ico{transform:rotate(90deg)}
/* Sanfona ANIMADA: grid 0fr→1fr revela o miolo na altura real dele (height:auto
   não anima). O miolo corta o que sobra e aparece com um fade junto. */
[data-layout="lateral"] #barraLateral .blSubs{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
[data-layout="lateral"] #barraLateral .blCat.aberta .blSubs{grid-template-rows:1fr}
/* A linha-guia à esquerda sai do centro do ícone do item pai: diz "estes são
   de Réguas" sem precisar de fundo. */
[data-layout="lateral"] #barraLateral .blSubsIn{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.125rem;margin-left:1.3125rem;padding-left:var(--esp-2);border-left:1px solid var(--lin);opacity:0;transition:opacity .18s ease}
[data-layout="lateral"] #barraLateral .blCat.aberta .blSubsIn{opacity:1}
[data-layout="lateral"] #barraLateral .blSubsIn>:first-child{margin-top:.25rem}
[data-layout="lateral"] #barraLateral .blSubsIn>:last-child{margin-bottom:.25rem}
[data-layout="lateral"] #barraLateral .blSub{position:relative;flex:none;min-height:2.25rem;padding:0 var(--esp-3);border-radius:var(--raio-1);text-align:left;color:var(--mut);font-size:var(--fs-3);transition:background-color .15s ease,color .15s ease}
[data-layout="lateral"] #barraLateral .blSub:hover{color:var(--tinta);background:color-mix(in srgb,var(--tinta) 4%,transparent)}
/* Ativo = texto forte + traço em --realce (o laranja da marca, só como realce — C5) sobre a linha-guia. Sem bloco cinza. */
[data-layout="lateral"] #barraLateral .blSub.on{color:var(--tinta);font-weight:700}
[data-layout="lateral"] #barraLateral .blSub.on::before{content:'';position:absolute;left:calc(-1 * var(--esp-2));top:.5rem;bottom:.5rem;width:2px;border-radius:2px;background:var(--realce)}
[data-layout="lateral"] #barraLateral .blPe{display:flex;flex-direction:column;gap:.125rem;padding-top:var(--esp-2);border-top:1px solid var(--lin)}
[data-layout="lateral"] #barraLateral .blVoltar{min-height:2.25rem;padding:0 var(--esp-3);text-align:left;color:var(--mut);font-size:var(--fs-1)}
[data-layout="lateral"] #barraLateral .blVoltar:hover{color:var(--tinta);text-decoration:underline}

/* ── trilho de ícones (recolhida, Configurações/ficha, tablet) ─────────────── */
/* O trilho ROLA como a barra aberta (em 1366×768 com fonte grande os ícones
   não cabem). O flyout escapa do recorte por ser position:fixed; o top vem da
   casca (admin.js › posicionarFlyout), que mede a categoria sob o ponteiro. */
[data-layout="lateral"][data-barra="trilho"] #barraLateral{width:var(--bl-trilho);padding:var(--esp-3) var(--esp-1);overflow-y:auto}
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blTopo{flex-direction:column;padding:var(--esp-1) 0 var(--esp-3)}
/* font-size 0: o "Guia" é nó de TEXTO solto (aplicarMarca), nenhum seletor o
   alcança. Anel e logo têm tamanho em rem, então não encolhem junto. */
[data-layout="lateral"][data-barra="trilho"] #barraLateral .logo{font-size:0;gap:0}
[data-layout="lateral"][data-barra="trilho"] #barraLateral .logo>:not(.anel):not(.logoCli){display:none}
[data-layout="lateral"][data-barra="trilho"] #barraLateral .logoCli{max-width:2.5rem;height:1.5rem}
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blRecolher{transform:rotate(180deg)}
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blRot,
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blSeta,
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blGrp{display:none}
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blItem{justify-content:center;padding:0}
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blCat{position:relative}
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blSubs,
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blCat.aberta .blSubs{display:none}
/* O flyout nasce SOBRE o padding direito e a borda do trilho (e não colado
   na borda de fora): a .blCat não ocupa esse padding, e com o flyout em
   left:var(--bl-trilho) o ponteiro atravessava uma faixa fora da categoria a
   caminho dele — o :hover caía e o flyout fechava na cara. Uma ponte ::before
   no flyout não serviria: o overflow-y:auto dele recorta o que sai da caixa. */
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blCat:hover .blSubs,
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blCat:focus-within .blSubs{display:flex;position:fixed;left:calc(var(--bl-trilho) - var(--esp-1) - 1px);min-width:12rem;max-height:100dvh;overflow-y:auto;padding:var(--esp-2);background:var(--card);border:1px solid var(--lin);border-radius:0 var(--raio-2) var(--raio-2) 0;box-shadow:var(--som);z-index:30}
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blCat:hover .blSub,
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blCat:focus-within .blSub{padding-left:var(--esp-3)}
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blCat:hover .blSubsIn,
[data-layout="lateral"][data-barra="trilho"] #barraLateral .blCat:focus-within .blSubsIn{opacity:1;overflow:visible;margin-left:0;padding-left:0;border-left:0}

/* ── tablet: conteúdo sempre ao lado do trilho; aberta = POR CIMA ─────────── */
@media (45em < width <= 64em){
  [data-layout="lateral"] body:has(#barraLateral:not(:empty)){padding-left:var(--bl-trilho)}
}
/* aberta por cima (tablet, ou barra forçada em Configurações/ficha): o
   conteúdo fica onde estava, ao lado do trilho — a barra passa POR CIMA */
@media (width > 45em){
  [data-layout="lateral"][data-bl-sobre] body:has(#barraLateral:not(:empty)){padding-left:var(--bl-trilho)}
  [data-layout="lateral"][data-bl-sobre] #barraLateral{box-shadow:0 .5rem 2rem color-mix(in srgb,var(--tinta) 22%,transparent)}
}

/* ── guias da tela: no desktop quem as mostra é a barra (subitens) ────────── */
/* Só com a barra ABERTA: no trilho (Configurações, ficha, tablet) os subitens
   não estão à mostra, e sem os chips a guia ficava inalcançável. */
@media (width > 45em){
  [data-layout="lateral"]:not([data-barra="trilho"]) .guiasTela{display:none}
}

/* ── Configurações e ficha do cliente: o menu interno é a 2ª coluna ───────────
   (spec D7, opção B). A barra principal recolhe em trilho e o menu que antes era
   um cartão dentro do conteúdo vira uma coluna FIXA colada nele, da altura da
   tela. O conteúdo abre espaço pras duas. É a mesma `.cfgnav` do clássico —
   só muda de lugar aqui, então Configurações e ficha resolvem juntas.
   O seletor do respiro repete o `:has(#barraLateral…)` pra vencer a regra do
   trilho na especificidade. */
[data-layout="lateral"] .cfgwrap{grid-template-columns:1fr}
[data-layout="lateral"] .cfgnav{position:fixed;left:var(--bl-trilho);top:0;bottom:0;z-index:24;width:var(--bl-sub);height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:var(--esp-5) var(--esp-2) var(--esp-4);background:var(--paper);border:0;border-right:1px solid var(--lin);border-radius:0;box-shadow:none}
/* com o estúdio de portais aberto a .cfgnav some (portais.css) e o respiro
   dela tem de sumir junto — senão sobra uma faixa vazia à esquerda do estúdio */
[data-layout="lateral"][data-barra] body:has(#barraLateral:not(:empty)):has(.cfgwrap:not(.estudioAberto) .cfgnav){padding-left:calc(var(--bl-trilho) + var(--bl-sub))}
/* item escolhido do menu de Configurações/ficha: petróleo, como a barra (C5) */
[data-layout="lateral"] .cfgnav button.on{background:color-mix(in srgb,var(--acao) 12%,transparent)}

/* ── faixa "Campanha" do hub (etapa B) ─────────────────────────────────────
   Acima do conteúdo, alinhada com o main (mesma largura máxima e respiro). */
[data-layout="lateral"] #faixaHub:empty{display:none}
[data-layout="lateral"] #faixaHub{max-width:90rem;margin:0 auto;padding:var(--esp-4) var(--esp-5) 0}
[data-layout="lateral"] #faixaHub:not(:empty)+main{padding-top:var(--esp-3)}
[data-layout="lateral"] .hubFaixa{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3);padding:var(--esp-2) var(--esp-3);background:var(--card);border:1px solid var(--lin);border-radius:var(--raio-2)}
[data-layout="lateral"] .hubRot{margin:0;font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
[data-layout="lateral"] .hubFaixa select{flex:1 1 14rem;width:auto;min-width:0;max-width:min(100%,28rem)}
[data-layout="lateral"] .hubResumo{font-size:var(--fs-2);color:var(--mut)}
/* No lateral a campanha de Pessoas é a da FAIXA: o seletor da própria tela
   (mesma variável, então nunca divergem) sai de cena. */
[data-layout="lateral"] .seletorCampanhaTela{display:none}

/* ── celular: rodapé com 4 destinos + Mais ─────────────────────────────────── */
[data-layout="lateral"] #rodapeMobile{display:none}
@media (width <= 45em){
  [data-layout="lateral"] #faixaHub{padding:var(--esp-3) var(--esp-3) 0}
  [data-layout="lateral"] #barraLateral{display:none}
  [data-layout="lateral"] header .bar>.logo{display:flex}
  [data-layout="lateral"] body:has(#barraLateral:not(:empty)){padding-left:0}
  [data-layout="lateral"][data-barra] body:has(#barraLateral:not(:empty)):has(.cfgwrap:not(.estudioAberto) .cfgnav){padding-left:0}
  [data-layout="lateral"] .cfgnav{position:static;width:auto;height:auto;padding:var(--esp-2);background:var(--card);border:1px solid var(--lin);border-radius:var(--raio-2)}
  [data-layout="lateral"] header .bar{padding:var(--esp-2) var(--esp-3)}
  [data-layout="lateral"] main{padding:var(--esp-4) var(--esp-3) calc(var(--toque) + var(--esp-7) + env(safe-area-inset-bottom))}
  [data-layout="lateral"] #rodapeMobile:not(:empty){display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset:auto 0 0 0;z-index:25;padding:var(--esp-1) var(--esp-1) calc(var(--esp-1) + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--lin)}
  [data-layout="lateral"] #rodapeMobile .rmItem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;min-height:var(--toque);padding:var(--esp-1) 0;background:transparent;border:0;border-radius:var(--raio-1);color:var(--mut);font:inherit;font-size:var(--fs-1);font-weight:600;cursor:pointer}
  [data-layout="lateral"] #rodapeMobile .rmItem .ico{width:1.25rem;height:1.25rem}
  [data-layout="lateral"] #rodapeMobile .rmItem.on{color:var(--acao)}
  [data-layout="lateral"] #rodapeMobile .rmItem span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Conteúdo mais largo que a tela (ex.: um span da .pHead na Visão, que ia a
     ~38rem numa tela de 24rem) alargava o viewport de layout do celular e
     empurrava o rodapé FIXO pra fora da tela. Rolar DENTRO do main contém o
     excesso e mantém o conteúdo alcançável. Escolhido no lugar de
     body{overflow-x:clip}: o clip também segura o rodapé, mas corta o que
     passa da borda sem jeito de ver. Custo: o main vira contêiner de rolagem,
     então um sticky DENTRO dele deixa de grudar no celular (os de hoje —
     trilhos laterais, painel do estúdio — já empilham nessa largura). A rolagem
     vertical continua sendo a da página. */
  [data-layout="lateral"] main{overflow-x:auto}
  /* Topo que cabe em 17.5rem (280px): logo + "vendo como" + usuário + sino. */
  [data-layout="lateral"] header .bar{gap:var(--esp-2)}
  [data-layout="lateral"] header .bar>.logo .logoSep,
  [data-layout="lateral"] header .bar>.logo .logoPlat{display:none}
  [data-layout="lateral"] header .bar>.logo .logoCli{max-width:7rem;height:1.5rem}
  [data-layout="lateral"] header .eu{gap:var(--esp-2);min-width:0}
  [data-layout="lateral"] .vchip{min-width:0;padding:var(--esp-1) var(--esp-2)}
  [data-layout="lateral"] .vchip select{max-width:6rem;min-width:0}
  /* o "Ver como" cede largura antes de empurrar o usuário pra fora da tela: a
     caixa vira flex e, com min-width:0 em cada nível, os dois seletores
     encolhem (o navegador corta o texto da opção; o título segue dizendo o
     que cada um é). O flex-shrink alto faz a caixa encolher PRIMEIRO — sem
     ele o .eu (min-width:0) dividia o aperto e o sino saía da tela. */
  [data-layout="lateral"] header #visaoBox{display:flex;min-width:0;flex-shrink:99}
  /* o nome do usuário e o ▾ são texto solto no botão: font-size 0 os some e
     sobra o avatar — o nome continua no menu que o botão abre */
  [data-layout="lateral"] .userbtn{font-size:0;gap:0;padding:.125rem}
  [data-layout="lateral"] .userbtn .av{font-size:var(--fs-1)}
}
/* Muito estreito (até 22.5em ≈ 360px): o "Guia360°" do topo vira só o anel.
   A marca continua à vista (anel ou logo do contratante); só o texto sai. */
@media (width <= 22.5em){
  [data-layout="lateral"] header .bar>.logo{font-size:0;gap:0}
  [data-layout="lateral"] header .bar>.logo>.grau{display:none}
  [data-layout="lateral"] .vchip select{max-width:4.5rem}
}

/* ── folha "Mais" ─────────────────────────────────────────────────────────── */
[data-layout="lateral"] dialog.folha{margin:auto 0 0;width:100%;max-width:100%;max-height:85dvh;padding:var(--esp-4) var(--esp-3) calc(var(--esp-4) + env(safe-area-inset-bottom));border-radius:var(--raio-2) var(--raio-2) 0 0;overflow-y:auto}
[data-layout="lateral"] dialog.folha .blGrp{font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:var(--esp-3) var(--esp-2) var(--esp-1)}
[data-layout="lateral"] dialog.folha .fmItem,
[data-layout="lateral"] dialog.folha .fmSub{display:flex;align-items:center;gap:var(--esp-3);width:100%;min-height:var(--toque);padding:0 var(--esp-3);background:transparent;border:0;border-radius:var(--raio-1);color:var(--tinta);font:inherit;font-size:var(--fs-4);text-align:left;cursor:pointer}
[data-layout="lateral"] dialog.folha .fmSub{padding-left:2.75rem;color:var(--mut);font-size:var(--fs-3)}
[data-layout="lateral"] dialog.folha .fmSub.on{color:var(--tinta);font-weight:700;background:color-mix(in srgb,var(--tinta) 6%,transparent)}
[data-layout="lateral"] dialog.folha .fmItem.on{background:color-mix(in srgb,var(--acao) 12%,transparent)}
[data-layout="lateral"] dialog.folha .fmPe{margin-top:var(--esp-3);padding-top:var(--esp-2);border-top:1px solid var(--lin)}

/* ── quem pede menos movimento no sistema não recebe animação ─────────────── */
@media (prefers-reduced-motion: reduce){
  [data-layout="lateral"] #barraLateral,
  [data-layout="lateral"] #barraLateral *,
  [data-layout="lateral"] body{transition:none !important}
}