/* painel.css — layout do painel e o seu modelo estético. Cores, fontes, raios e sombras vêm dos tokens
   (brand/tokens.css); botões, chips, cards e tabelas vêm dos primitivos da marca (brand/brand.css). Os dois são cópia
   da inbox e não se editam: o que o painel muda neles fica aqui, por cima.

   O modelo é "Tinta & Coral · Editorial": a marca aplicada como ferramenta de dados, com a página de um jornal de dados
   (papel com grão, fios finos, título em dois pesos, números grandes):
   1. Moldura em tinta: o menu é tinta nos dois temas, e o conteúdo é o papel.
   2. Coral só para onde você está e para o que importa: item ativo, filete do título, botão principal, número herói,
      barra sob o mouse e foco. Cor de estado vem sempre com o texto da situação ao lado.
   3. Camadas: papel, card (fio fino, sombra macia) e sobreposição (sombra forte). Só o que é clicável reage ao mouse.
   4. Montserrat em caixa-alta nos títulos e rótulos, com o título em dois pesos (300 e 600); Inter no texto; mono
      tabular nos números.
   5. Movimento: troca de estado até 220 ms; a chegada do dado (cards em sequência, número que conta, barra que cresce)
      até 700 ms; nada com prefers-reduced-motion.
   Cor escrita à mão só onde nenhum token serve, com o porquê ao lado. */

/* Tokens do modelo. O grão é ruído SVG com a transparência embutida (escuro no claro, claro no escuro); a sombra do
   card some no tema escuro, onde o fio e o grão separam o card do fundo. */
:root{--sai:cubic-bezier(.2,.7,.2,1);--grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --sombra-card:0 1px 2px rgba(0,33,23,.04),0 14px 32px -16px rgba(0,33,23,.14)}
:root[data-theme="dark"]{--grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");--sombra-card:inset 0 1px 0 rgba(255,255,255,.035)}

.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.logo{display:block;width:auto}
.logo.escuro,:root[data-theme="dark"] .logo.claro{display:none}
:root[data-theme="dark"] .logo.escuro{display:block}
::selection{background:color-mix(in srgb,var(--coral) 28%,transparent)}

/* login: a mesma moldura em tinta do menu, com o brilho verde da seção escura do site e um toque de coral. Coral forte
   sobre a tinta vira marrom, por isso ele fica fraco e no canto. */
.login{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--cb-ink)}
:root[data-theme="dark"] .login{background-color:var(--cb-ink-deep)}
/* o brilho deriva devagar atrás do cartão. A camada é 50% maior que a tela, para a borda nunca aparecer no movimento;
   as posições são as de antes convertidas para ela (o coral quase fora do canto, senão vira marrom). */
.login::before{content:"";position:absolute;inset:-25%;z-index:-2;background:radial-gradient(ellipse at 50% 10%,color-mix(in srgb,var(--cb-emerald) 16%,var(--cb-ink)) 0,transparent 42%),radial-gradient(circle at 78% 86%,color-mix(in srgb,var(--cb-coral) 14%,transparent) 0,transparent 23%);
  animation:deriva 24s ease-in-out infinite alternate}
.login::after{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
@keyframes deriva{to{transform:translate3d(5%,4%,0) rotate(5deg)}}
.loginbox{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:36px 36px 28px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.06);animation:entra .5s var(--sai) backwards}
.loginbox .logo{height:26px;margin-bottom:28px}
.loginbox h1{font-size:26px;line-height:1.1;margin:10px 0 10px}
.loginbox p{color:var(--text);margin-bottom:22px}
.loginbox p b{color:var(--ink);font-weight:600}
.loginbox .err{margin:14px 0 0;font-size:13px;color:var(--descartado)}

/* casca: menu lateral fixo + tela */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;transition:grid-template-columns .2s ease}
/* O menu é tinta nos dois temas. Os --rail-* do tokens.css fazem um menu claro no tema claro, então são redefinidos
   aqui com os valores do menu escuro da inbox; no tema escuro ele desce um tom abaixo do fundo (#001a12) para continuar
   sendo moldura. O z-index põe a lista do menu recolhido acima de tudo o que a tela posiciona. */
.lateral{--rail-bg:var(--cb-ink);--rail-ink:#f5f5f4;--rail-muted:#9fb0aa;--rail-line:rgba(255,255,255,.08);--rail-hover:rgba(255,255,255,.06);
  --rail-on:color-mix(in srgb,var(--cb-coral) 18%,transparent);--rail-on-ink:#ffffff;--focus:0 0 0 2px var(--rail-bg),0 0 0 4px var(--cb-coral);
  position:sticky;top:0;z-index:40;height:100vh;display:flex;flex-direction:column;gap:18px;padding:18px 12px 14px;
  background:var(--rail-bg);color:var(--rail-ink);border-right:1px solid var(--rail-line);overflow:hidden;color-scheme:dark}
:root[data-theme="dark"] .lateral{--rail-bg:#00130d}
.topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:10px}
.marca{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;border-radius:var(--r-sm)}
.marca .logo{height:22px}
.marca .eyebrow{color:var(--rail-muted)}
.lateral .iconbtn{width:32px;height:32px;background:transparent;border-color:transparent;color:var(--rail-muted)}
.lateral .iconbtn:hover{background:var(--rail-hover);border-color:transparent;color:var(--rail-ink)}
#recolher .estreito{display:none}
/* Só a lista rola: a marca e o rodapé ficam no lugar. A barra é fina e na cor do menu, discreta parada e
   mais forte com o mouse ou o foco na lista; o esmaecido no topo e na base diz que há tela acima ou abaixo. */
#menu{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;margin:0 -6px 0 0;padding:4px 6px 8px 0;overflow-y:auto;overscroll-behavior:contain;
  --barra:color-mix(in srgb,var(--rail-muted) 22%,transparent)}
#menu:hover,#menu:focus-within{--barra:color-mix(in srgb,var(--rail-muted) 50%,transparent)}
#menu::-webkit-scrollbar{width:6px}
#menu::-webkit-scrollbar-track{background:transparent}
#menu::-webkit-scrollbar-thumb{background:var(--barra);border-radius:999px}
#menu::-webkit-scrollbar-thumb:hover{background:var(--rail-muted)}
#menu::-webkit-scrollbar-button{display:none}
@supports not selector(::-webkit-scrollbar){#menu{scrollbar-width:thin;scrollbar-color:var(--barra) transparent}}
@property --topo{syntax:"<length>";inherits:false;initial-value:0px}
/* Sem ter o que rolar a linha do tempo fica inativa e os dois ficam em 0: nada esmaece. */
@property --base{syntax:"<length>";inherits:false;initial-value:0px}
@supports (animation-timeline:scroll()){
  #menu{mask-image:linear-gradient(to bottom,transparent 0,#000 var(--topo),#000 calc(100% - var(--base)),transparent 100%);
    animation:esmaece linear both;animation-timeline:scroll(self)}
}
@keyframes esmaece{0%{--topo:0px;--base:28px}8%{--topo:28px}92%{--base:28px}100%{--topo:28px;--base:0px}}
/* Seção: o ícone só aparece no menu recolhido; expandido, ele vai ao lado do nome e os itens alinham com o nome. O item
   ativo leva a barra coral (regra 2). */
.secaoicone{display:none}
.itens{display:flex;flex-direction:column;gap:1px}
.itens>.eyebrow{gap:8px;padding:0 10px 6px;color:var(--rail-muted)}
.itens>.eyebrow::before{display:none}
.itens>.eyebrow .ic{font-size:14px;vertical-align:0}
.itens a{position:relative;display:block;padding:6px 10px 6px 32px;border-radius:var(--r-btn);color:color-mix(in srgb,var(--rail-ink) 84%,transparent);text-decoration:none;font:500 13.5px/1.3 var(--font-sans);transition:background .16s,color .16s,transform .16s}
.itens a:hover{background:var(--rail-hover);color:var(--rail-ink);transform:translateX(2px)}
.itens a[aria-current="page"]{background:var(--rail-on);color:var(--rail-on-ink)}
.itens a[aria-current="page"]::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--cb-coral);animation:marca .18s var(--sai)}
@keyframes marca{from{transform:scaleY(0)}}
.rodape{display:flex;align-items:center;gap:4px;padding:12px 0 0 4px;border-top:1px solid var(--rail-line)}
.avatar{flex:none;width:28px;height:28px;margin-right:6px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--rail-ink);font:600 12px/1 var(--font-display)}
.quem{flex:1;min-width:0;font-size:12px;color:var(--rail-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Menu recolhido: um ícone por seção, e a lista dela abre ao lado no hover ou no foco. A lista é fixed (o app.js acerta
   a altura) para escapar da rolagem do menu, e o esmaecido da rolagem desliga porque recortaria a lista. */
@media (min-width:861px){
  .shell.recolhido{grid-template-columns:68px minmax(0,1fr)}
  .recolhido .topo{flex-direction:column;gap:14px;padding:0}
  .recolhido .marca .eyebrow{display:none}
  /* o símbolo é o começo do logo: recortado, sem um arquivo a mais em brand/ */
  .recolhido .marca .logo{width:18px;object-fit:cover;object-position:left}
  .recolhido #menu{align-items:center;gap:4px;margin:0;padding:2px 0;mask-image:none;animation:none}
  .recolhido .secaoicone{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);color:var(--rail-muted);font-size:18px;transition:background .16s,color .16s}
  .recolhido .menusecao:hover .secaoicone{background:var(--rail-hover);color:var(--rail-ink)}
  .recolhido .menusecao:has([aria-current]) .secaoicone{background:var(--rail-on);color:var(--quente)}
  .recolhido .itens{position:fixed;left:72px;z-index:1;min-width:220px;padding:12px 6px 6px;background:var(--rail-bg);border:1px solid var(--rail-line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
    visibility:hidden;opacity:0;transform:translateX(-4px);transition:opacity .14s,transform .14s,visibility 0s linear .14s}
  /* a ponte invisível entre o ícone e a lista: sem ela o mouse sai da seção no caminho e a lista fecha */
  .recolhido .itens::after{content:"";position:absolute;top:0;bottom:0;right:100%;width:24px}
  .recolhido .menusecao:hover .itens,.recolhido .menusecao:focus-within .itens{visibility:visible;opacity:1;transform:none;transition:opacity .14s,transform .14s}
  .recolhido .itens>.eyebrow .ic{display:none}
  .recolhido .itens a{padding-left:12px}
  .recolhido .rodape{flex-direction:column;gap:6px;padding:12px 0 0}
  .recolhido .avatar{margin:0 0 4px}
  .recolhido .quem{display:none}
}

/* molde de tela: cabeçalho de jornal (eyebrow da seção, título em dois pesos, frase do que a tela responde) direto no
   papel, e o corpo. O filete coral risca o começo da tela quando ela abre. */
.tela{min-width:0;background-image:var(--grao)}
.pghead{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:38px 32px 22px;background:var(--glow) no-repeat;border-bottom:1px solid var(--line);animation:entra .32s var(--sai) backwards}
.pghead::after{content:"";position:absolute;left:32px;bottom:-1px;width:56px;height:2px;border-radius:2px;background:var(--coral);transform-origin:left;animation:risca .42s var(--sai) .1s backwards}
@keyframes risca{from{transform:scaleX(0)}}
.pghead h1{font-size:clamp(26px,2.6vw,38px);line-height:1.04;letter-spacing:-.02em;margin-top:12px}
.pghead h1 .tt-lead{font-weight:300;color:var(--text)}
.pghead .sub{max-width:62ch;margin-top:10px;color:var(--muted);font-size:14px;line-height:1.5}
.pgcorpo{display:flex;flex-direction:column;gap:22px;max-width:1320px;padding:28px 32px 64px}
.pgcorpo>*{min-width:0}
#conteudo{display:flex;flex-direction:column;gap:18px}
#conteudo>*{min-width:0} /* sem isto, uma tabela larga alarga a página inteira em vez de rolar dentro do card */

/* Chegada do dado: cada bloco sobe 8 px em sequência, 40 ms depois do anterior. Só backwards: terminada a entrada o
   bloco fica sem transform, senão viraria contexto de empilhamento e prenderia as listas que abrem por cima (selo,
   busca do lead) atrás do card seguinte. */
:is(.pgcorpo,#conteudo,#aba,.kpis,.grade2,.grade3)>*{animation:entra .38s var(--sai) backwards}
:is(.pgcorpo,#conteudo,#aba,.kpis,.grade2,.grade3)>:nth-child(2){animation-delay:40ms}
:is(.pgcorpo,#conteudo,#aba,.kpis,.grade2,.grade3)>:nth-child(3){animation-delay:80ms}
:is(.pgcorpo,#conteudo,#aba,.kpis,.grade2,.grade3)>:nth-child(4){animation-delay:120ms}
:is(.pgcorpo,#conteudo,#aba,.kpis,.grade2,.grade3)>:nth-child(5){animation-delay:160ms}
:is(.pgcorpo,#conteudo,#aba,.kpis,.grade2,.grade3)>:nth-child(n+6){animation-delay:200ms}
@keyframes entra{from{opacity:0;transform:translateY(8px)}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

/* estados: a mesma altura mínima nos três, para a página não pular quando o dado chega */
.estado{min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:var(--muted);background:var(--panel);border:1px dashed var(--line);border-radius:var(--r-lg)}
.estado .titulo{font:600 14px/1.3 var(--font-sans);color:var(--ink)}
.estado.erro{border-style:solid;border-color:color-mix(in srgb,var(--descartado) 35%,var(--line));color:var(--text)}
/* carregando: o esqueleto de um card (título, área, legenda) com um brilho que passa da esquerda para a direita */
.sotexto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.estado.carregando{align-items:stretch;justify-content:flex-start;gap:14px;padding:22px;border-style:solid;box-shadow:var(--sombra-card)}
.estado.carregando i{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--line-soft) 30%,color-mix(in srgb,var(--line) 70%,var(--panel)) 50%,var(--line-soft) 70%) 0 0/300% 100%;animation:brilho 1.4s ease-in-out infinite}
.estado.carregando i:nth-of-type(1){width:28%}
.estado.carregando i:nth-of-type(2){flex:1;min-height:48px;border-radius:var(--r-md)}
.estado.carregando i:nth-of-type(3){width:55%}
@keyframes brilho{from{background-position:100% 0}to{background-position:0 0}}
/* o menu fica de fora: o esmaecido dele segue a rolagem, não é movimento */
@media (prefers-reduced-motion:reduce){:not(#menu),::before,::after{animation:none!important;transition:none!important}}

/* cards e tabelas: o visual vem do brand.css; aqui a grade e o espaçamento */
.chead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.reptablewrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 35%,transparent) transparent}
.reptable{width:100%;border-collapse:collapse}
.reptable th,.reptable td{padding:11px 14px;text-align:left;vertical-align:top}
.reptable tbody tr{transition:background .16s}
.reptable .num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* cabeçalho de tabela no tom do eyebrow (regra 4): caixa-alta pequena, apagada, sobre o painel de baixo */
.reptable thead th{background:var(--panel2);font:600 10.5px/1.35 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.reptable thead th.num{font-family:var(--font-display)}
/* KPI: o rótulo vira eyebrow e o número cresce. O card do número herói leva o fio coral no topo e um tom de coral que
   some até o meio do card. */
.statcard{position:relative;overflow:hidden;padding:18px 20px 16px;box-shadow:var(--sombra-card)}
.statcard .statlbl{font:600 10.5px/1.35 var(--font-display);letter-spacing:.07em;text-transform:uppercase}
.statval{font-size:36px;letter-spacing:-.025em}
.statcard:has(.statval.hero){background-image:linear-gradient(160deg,color-mix(in srgb,var(--coral) 8%,var(--panel)),var(--panel) 62%)}
.statcard:has(.statval.hero)::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--coral)}

/* cards: sombra macia e um fio entre o título e o corpo */
.chartbox{padding:20px 22px;box-shadow:var(--sombra-card)}
.chartbox>.chead{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line-soft)}
/* quadro que recolhe: o cabeçalho é o summary, com a seta no fim; fechado, fica só o cabeçalho */
.chartbox>summary.chead{cursor:pointer;list-style:none}
.chartbox>summary.chead::-webkit-details-marker{display:none}
.chartbox>summary.chead::after{content:"";align-self:center;margin-left:auto;width:7px;height:7px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .16s}
details.chartbox:not([open])>summary.chead{padding-bottom:0;margin-bottom:0;border-bottom:0}
details.chartbox:not([open])>summary.chead::after{transform:rotate(-45deg)}

/* controles: o grupo de opções vira um trilho com a escolhida em pílula de tinta; botão afunda um pouco no clique */
.seg{background:var(--chip-bg);padding:3px;gap:2px;border-radius:calc(var(--r-btn) + 3px)}
/* os passos do Plano são links (cada um é uma rota), com a cara dos botões do trilho */
.seg a{display:inline-flex;align-items:center;border:1px solid transparent;padding:5px 11px;font:500 12.5px/1.35 var(--font-sans);color:var(--ink);border-radius:var(--r-btn);text-decoration:none}
.seg :is(button,a),.seg button+button{border-color:transparent;background:transparent;transition:background .16s,color .16s,box-shadow .16s,transform .1s}
.seg :is(button,a):hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.seg :is(button,a).on{background:var(--ink-fill);color:var(--on-ink-fill);box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 10px -4px rgba(0,33,23,.35)}
.sel,.chip,.iconbtn{transition:border-color .15s,background .15s,color .15s,transform .1s}
:is(.sel,.chip,.iconbtn,.seg button,.seg a):active:not(:disabled){transform:scale(.97)}
.sel.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -4px color-mix(in srgb,var(--coral) 60%,transparent)}
.modalinput{transition:border-color .15s,box-shadow .15s}
.modalinput:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 18%,transparent)}

/* glossário: largura fixa por coluna, para os cards de conceitos diferentes ficarem alinhados um embaixo do outro */
.glossario{table-layout:fixed;min-width:760px}
.glossario th:nth-child(1){width:22%}.glossario th:nth-child(2){width:46%}.glossario th:nth-child(n+3){width:16%}
.glossario td:first-child{font-weight:600;color:var(--heading)}
.glossario td:nth-child(2){color:var(--text)}
.glossario td:nth-child(n+3){color:var(--muted)}

/* tela estreita: o menu vira uma barra no topo, e o botão abre a lista embaixo dela */
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .lateral{height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 4px;padding:10px 16px;border-right:0;border-bottom:1px solid var(--rail-line)}
  .topo{flex:1;padding:0}
  #recolher .largo{display:none}
  #recolher .estreito{display:inline-block}
  #menu{order:3;flex:0 0 100%;display:none;max-height:calc(100dvh - 60px);margin:0;padding:14px 0 6px;mask-image:none;animation:none}
  .menuaberto #menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px 12px}
  .rodape{padding:0;border-top:0}
  .avatar,.quem{display:none}
  .pghead,.pgcorpo{padding-left:16px;padding-right:16px}
  .pghead::after{left:16px}
}

/* cores das fontes nos gráficos e marcas: a cor segue a fonte em toda a tela. Validadas com o validate_palette do
   skill de dataviz (faixa de luminosidade, croma, separação para daltonismo e contraste) nos dois temas; a tinta
   (#002117) dos tokens reprovava como cor de série por ler como preto. */
/* A neutra é o "cinza do resto" das barras de uma série só: ardósia fria, 3:1 contra o card nos dois temas, para a
   barra sob o mouse (coral) saltar dela. */
:root{--serie-hubspot:#2a76b0;--serie-inbox:#e8705a;--serie-neutra:#869490}
:root[data-theme="dark"]{--serie-hubspot:#3d8fcc;--serie-inbox:#d9634d;--serie-neutra:#678379}

.pgdireita{display:flex;align-items:center;gap:10px}
.recarregando{opacity:.5;pointer-events:none;transition:opacity .15s}

/* selo de frescor: a pior fonte no resumo, cada uma aberta no detalhe. Verde/âmbar/vermelho são cores de estado e
   sempre vêm com o texto da situação ao lado. */
.selo{position:relative}
.selo summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);font:500 12.5px/1.3 var(--font-sans);color:var(--ink)}
.selo summary::-webkit-details-marker{display:none}
.selo summary{transition:border-color .16s}
.selo summary:hover{border-color:color-mix(in srgb,var(--coral) 40%,var(--line))}
.selo[open] ul,.resultados{animation:abre .16s var(--sai)}
@keyframes abre{from{opacity:0;transform:translateY(-4px)}}
.selo ul{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(380px,90vw);list-style:none;display:flex;flex-direction:column;gap:12px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.selo li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--text)}
.selo li span:not(.ponto){display:block;color:var(--muted)}
.selo li small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.ponto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-top:4px}
.ponto.ok{background:var(--pos)}.ponto.atrasado{background:var(--cb-amber)}.ponto.parado,.ponto.sem_dado{background:var(--descartado)}

/* filtros: uma linha só, acima de tudo o que eles recortam */
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filtros .seg{flex-wrap:wrap;max-width:100%}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpis .statcard{display:flex;flex-direction:column;gap:8px}
.kpis .statval{font-variant-numeric:normal}
.kfonte{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:8px;row-gap:2px}
.kfonte .krot{font-size:12.5px;color:var(--text)}
.kfonte .kval{font:600 22px/1.1 var(--font-display);color:var(--heading)}
.kfonte .delta,.kfonte .kn{grid-column:2 / 4}
.kn{font-size:12px;color:var(--muted)}
.delta{font-size:12px;font-weight:600}
.delta.sobe{color:var(--pos)}.delta.desce{color:var(--neg)}
.nota{margin-top:-8px}

/* marca de fonte: cheio = sim, vazio = não, tracejado = sem dado */
.m{flex:none;display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--serie-hubspot)}
.m.inbox{border-color:var(--serie-inbox)}
.m.sim{background:var(--serie-hubspot)}.m.inbox.sim{background:var(--serie-inbox)}
.m.sem{border-style:dashed;opacity:.55}
.par{display:inline-flex;gap:5px}
.legenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:-4px 0 10px}
.legenda .m{margin-left:6px}.legenda .m:first-child{margin-left:0}

.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:14px}

/* funil: as duas fontes lado a lado, a barra é a fração do topo de cada uma */
.funil{width:100%;border-collapse:collapse;font-size:13px}
.funil th,.funil td{padding:8px 10px;text-align:left;border-top:1px solid var(--line-soft)}
.funil thead th{border-top:0;font:600 10.5px/1.35 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.funil thead .m{margin-right:6px;vertical-align:-1px}
.funil tbody th{font-weight:600;color:var(--heading);white-space:nowrap}
.funil td{width:40%}
.funil td.vazio{color:var(--muted)}
.fbarra{height:8px;border-radius:4px;background:var(--chip-bg);overflow:hidden;margin-bottom:4px}
.fbarra span{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--serie-hubspot);transform-origin:left;animation:cresce .6s var(--sai) .15s backwards}
@keyframes cresce{from{transform:scaleX(0)}}
.fbarra.inbox span{background:var(--serie-inbox)}
.fnum{font-weight:600;color:var(--ink);margin-right:6px;font-variant-numeric:tabular-nums}
.fpct{font-size:12px;color:var(--muted)}

/* gráficos semanais: a altura inclui a faixa do eixo x, para o card não ganhar rolagem interna */
.mini{margin-bottom:12px}
.minititulo{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.cbox{position:relative;height:150px}
.mini .estado{min-height:150px}
.comotabela summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.comotabela .reptablewrap{margin-top:8px}

/* tabela de contatos */
.cheadacoes{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.cheadacoes .seg{flex-wrap:wrap;max-width:100%}
.reptable td a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.reptable td a:hover{border-bottom-color:var(--coral)}
.paginacao{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.paginacao span{margin-right:auto}

/* vendedores: barra do cap, mapa de semanas e conversão por vendedor */
.aviso{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--cb-amber-soft);color:var(--cb-amber-ink);font-size:12.5px}
:root[data-theme="dark"] .aviso{background:rgba(245,196,107,.12);color:var(--cb-amber)}
.capacidade td.capbarra{width:46%}
.capacidade td.origens{color:var(--muted);font-size:12.5px}
.fbarra.acima span{background:var(--descartado)}
.alerta{font-size:11.5px;font-weight:600;color:var(--descartado);margin-left:6px}
.mapa td.num{text-align:center;font-size:12px;border-left:2px solid var(--panel)}
.mapa td.acima{color:var(--descartado);font-weight:700}
.mapa th{white-space:nowrap}
.porvendedor .grupo{text-align:center;border-bottom:1px solid var(--line)}
.porvendedor th{font-size:12px;white-space:nowrap}
.porvendedor .m{vertical-align:-1px}
.porvendedor td .fnum{display:block}
.porvendedor td .fpct{font-size:11.5px}

/* dot plot: ponto = taxa, barra = intervalo de 95%, linha vertical = média de todos */
.pontos{position:relative;display:flex;flex-direction:column;gap:4px;padding-left:0}
.prow{display:grid;grid-template-columns:minmax(120px,26%) 1fr minmax(170px,24%);align-items:center;gap:12px;min-height:30px}
.prot{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptrilho{position:relative;height:22px;border-bottom:1px solid var(--line-soft)}
.pic{position:absolute;top:9px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--serie-hubspot) 35%,transparent)}
.ppto{position:absolute;top:5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--serie-hubspot);box-shadow:0 0 0 2px var(--panel)}
.pontos.inbox .pic{background:color-mix(in srgb,var(--serie-inbox) 35%,transparent)}
.pontos.inbox .ppto{background:var(--serie-inbox)}
.pval{font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.pval small{color:var(--muted);font-size:11.5px}
/* a média, repetida em cada trilho para ficar na mesma escala do ponto */
.pbase{position:absolute;top:2px;bottom:2px;width:0;border-left:1px solid var(--muted);opacity:.7}
.pic{transform-origin:left;animation:cresce .5s var(--sai) .1s backwards}
.ppto{animation:surge .4s var(--sai) .3s backwards}
@keyframes surge{from{opacity:0;transform:scale(.3)}}
/* no celular o mínimo do rótulo e do valor somava a largura toda e o trilho sumia: os dois sobem para uma linha e o
   trilho fica com a de baixo inteira */
@media (max-width:600px){
  .prow{grid-template-columns:minmax(72px,1fr) minmax(0,max-content);row-gap:0}
  .prot,.pval{grid-row:1}
  .pval{grid-column:2;text-align:right}
  .ptrilho{grid-row:2;grid-column:1 / -1}
}
.veredito{display:inline-block;white-space:nowrap;margin-top:3px;padding:1px 7px;border-radius:var(--r-pill);font-size:11px;font-weight:600}
.veredito.acima{background:color-mix(in srgb,var(--pos) 16%,transparent);color:var(--pos)}
.veredito.abaixo{background:color-mix(in srgb,var(--neg) 16%,transparent);color:var(--neg)}
.statde{font:500 16px/1 var(--font-sans);color:var(--muted)}
.cbox.alto{height:240px}
.textolongo{max-width:42ch;color:var(--text);font-size:12.5px}
.funil .fbarra span{background:var(--muted)}
.funil .fbarra.hubspot span{background:var(--serie-hubspot)}
.funil .fbarra.inbox span{background:var(--serie-inbox)}

/* Comentários: o motivo da perda é uma frase, não cabe numa linha; e a taxa por corte não é de nenhuma das duas
   fontes do funil de convites, então o ponto fica neutro */
.perdas tbody th{white-space:normal;font-weight:500}
.perdas th small,.comentados td small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--muted)}
.chartbox .comotabela{margin-top:8px}
.pilha{display:flex;flex-direction:column;gap:14px;min-width:0}
/* sem largura mínima, o texto do comentário vira uma coluna de três palavras e cada linha da tabela fica enorme */
.comentados th,.comentados td{padding:8px 10px}
.comentados td:last-child{min-width:34ch}
.comentados td.textolongo:not(:last-child){max-width:28ch}
.comentados td.curta{max-width:20ch}
.pontos.neutra .pic{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.pontos.neutra .ppto{background:var(--ink)}

/* lead: busca com resultados e ficha */
.busca{position:relative;max-width:640px}
.busca .modalinput{width:100%}
.resultados{position:absolute;z-index:15;left:0;right:0;top:calc(100% + 4px);max-height:360px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:6px}
.resultados button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-sm);background:none;text-align:left;cursor:pointer;color:var(--ink)}
.resultados button:hover,.resultados button:focus-visible{background:var(--hover)}
.resultados button span{font-size:12px;color:var(--muted)}
.resultados p{padding:8px 10px}
.fichacab{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.fichacab h2{font-size:20px;line-height:1.2;margin-bottom:4px}
.fichacab p{color:var(--text)}
.fichalinks{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.fichalinks a{text-decoration:none}
.fichastatus td{width:40%}
.envios{display:flex;flex-direction:column;gap:14px}

/* divergências */
.linkbtn{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--heading);cursor:pointer;border-bottom:1px solid var(--line)}
.linkbtn:hover{border-bottom-color:var(--coral)}
.divergencias tr.on{background:var(--hover)}
.divergencias th .m{vertical-align:-1px}
.porque{margin:-2px 0 12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line-soft);font-size:12.5px;color:var(--text)}

/* Explorar segmentos: perfis acima e abaixo da média, cada um abre a sua dimensão */
.destaque h3{font:600 13px/1.3 var(--font-sans);color:var(--ink);margin-bottom:8px}
.destaque ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.destaque button{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;padding:8px 12px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-md);color:var(--ink);cursor:pointer;font:inherit;transition:transform .16s,box-shadow .16s}
.destaque.acima button{border-left-color:var(--pos)}
.destaque.abaixo button{border-left-color:var(--neg)}
.destaque button:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.destaque button:focus-visible{outline:none;box-shadow:var(--focus)}
.dnome{flex:1 1 140px;display:flex;flex-direction:column;min-width:0}
.dnome small,.dval small{color:var(--muted);font-size:11.5px}
.dnome b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dval{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.dval small{display:block}

/* Plano da semana: o construtor do ICP, um campo por dimensão */
.icpresumo{font-size:13px;color:var(--ink);margin-bottom:12px}
.sugestoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:12px;margin-bottom:16px}
.sugestoes .eyebrow{margin-bottom:6px}
.construtor{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px 16px}
.dimcampo{display:flex;flex-direction:column;gap:6px;min-width:0}
.dimcampo label{font:500 12px/1.3 var(--font-sans);color:var(--muted)}
.dimchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.dimchips .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dimchips .chip small{color:var(--muted);font-size:11px}
.dimchips .chip.on small{color:inherit;opacity:.75}
.dimadd{max-width:100%;min-width:0;flex:1 1 140px}
.chip.on.alerta{background:var(--neg);border-color:var(--neg)}
.chip.evitar{cursor:default;border-style:dashed;color:var(--muted)}
.chip.evitar:hover{background:var(--chip-bg)}
.plano td{width:42%}
.plano td .fpct{display:block}
.kpis .statcard .veredito{align-self:flex-start}

/* Recrutamento: dot plot sem fonte de vendas (cor neutra) e a busca dentro do card da tabela */
.pontos.neutra .pic{background:color-mix(in srgb,var(--muted) 35%,transparent)}
.pontos.neutra .ppto{background:var(--muted)}
.chartbox>.filtros{margin-bottom:12px}
.chartbox>.filtros .sel{max-width:100%}
.rolavel{overflow-x:auto}
.buscatab{flex:1 1 240px;min-width:0;max-width:420px;padding:7px 12px;font-size:13px}
.repetidas{margin-top:8px}
#aba{display:flex;flex-direction:column;gap:18px}
#aba>*{min-width:0}
.grupos td .fpct{white-space:nowrap}
.reptable td.lista{min-width:32ch;font-size:12.5px;color:var(--text)}

/* descartes: o tipo do motivo embaixo do nome; nomes de campo do HubSpot são longos e quebram */
.motivos tbody th,.preenchimento tbody th{white-space:normal;overflow-wrap:break-word}
.motivos tbody th small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
.preenchimento tbody th{font-weight:500;font-size:12.5px}

/* Evolução: safras em ordem, numa rampa de um tom só (o coral da inbox), da mais antiga (clara) para a mais nova
   (forte). Safra é ordinal, então a cor mostra a ordem em vez de inventar uma identidade por safra. Validadas com o
   validate_palette --ordinal do skill de dataviz nos dois temas (luminosidade monotônica, passo de 0,07 e a ponta
   clara acima de 2:1 contra o fundo do card). */
:root{--safra-1:#f59d8b;--safra-2:#eb7d69;--safra-3:#d36854;--safra-4:#bb523f;--safra-5:#a43d2b;--safra-6:#8c2716}
:root[data-theme="dark"]{--safra-1:#9d3725;--safra-2:#b54c39;--safra-3:#cc624d;--safra-4:#e47762;--safra-5:#ee9684;--safra-6:#fab8aa}
.cbox.curva{height:320px}
.semcurva{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line-soft);font-size:12.5px;color:var(--text)}
.semcurva b{color:var(--ink);font-weight:600}
.meses td .fpct{display:block;font-family:var(--font-sans)}
.meses .maturacao{font-size:12px;color:var(--muted);min-width:120px}
.meses th small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}

.tres th .fpct,.tres td .fpct{display:block}
.tres tr.ativo{background:var(--hover)}
.tres td:nth-child(2){max-width:420px}
.linkpapel{background:none;border:0;padding:0;font:600 13px/1.3 var(--font-sans);color:var(--heading);cursor:pointer;text-align:left}
.linkpapel.muted{font-weight:400;color:var(--muted)}
.linkpapel:hover{text-decoration:underline}
.linkpapel:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px}
.volumerot{font-size:12px;color:var(--muted)}
.volume{width:110px;font-size:15px;padding:6px 10px}
.reptable.campos th,.reptable.campos td{vertical-align:middle}
.campos th .fpct,.campos td .fpct{display:block;font-family:var(--font-sans);font-weight:400}
.campos input.lista{width:100%;min-width:34ch}

/* Relatório semanal */
.icplista{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.icplista b{display:inline-block;min-width:70px;color:var(--heading)}
.gravar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:center;max-width:860px}
.gravar label[for=planilha]{font-size:12.5px;color:var(--muted)}
.gravar .caixa,.gravar [data-gravar]{grid-column:2;justify-self:start}
.caixa{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.previa{max-height:620px;overflow:auto}
.previa td{white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.previa tr.forte td{font-weight:600;color:var(--heading)}
a.sel{text-decoration:none;display:inline-flex;align-items:center}

/* Extração de Vagas */
form.filtros .modalinput{flex:1 1 220px;min-width:0;padding:7px 12px}
.construtor fieldset{border:0;padding:0;margin:0;min-width:0}
.construtor .largo{grid-column:1/-1}
.comando{width:100%;font:400 13px/1.4 var(--font-mono)}
.filtros.acoes{margin-top:10px}

/* Respostas do Slack */
.grade3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px}
.destaque.monitorar button{border-left-color:var(--cb-amber)}
.destaque h3 small{font-weight:400;color:var(--muted)}
.destaque > .sel{margin-top:8px}
.veredito.monitorar{background:color-mix(in srgb,var(--cb-amber) 22%,transparent);color:var(--cb-amber-ink)}
:root[data-theme="dark"] .veredito.monitorar{color:var(--cb-amber)}
.motivoslack td{width:60%}
.motivoslack td:nth-child(2){width:auto;color:var(--muted);white-space:nowrap}
td.comentario{max-width:420px;white-space:normal;color:var(--text)}

/* Enriquecimento */
.urls{width:100%;font:13px/1.5 var(--font-mono, ui-monospace, monospace);resize:vertical}
.enriqopcoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:10px}
.previa-custo{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2, var(--panel));font-size:13px}
.previa-custo ul{margin:6px 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.enriqlog{margin:10px 0;font-size:12.5px;color:var(--text)}
.enriqlog ul{margin:6px 0 0;padding-left:18px}
.enriq td{white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}

/* Ficha do lead: a busca */
.busca .modalinput{width:100%;max-width:720px;height:50px;padding:0 18px 0 46px;font-size:15px;border-radius:var(--r-lg);box-shadow:var(--sombra-card);
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center/18px}
.busca .modalinput:focus{box-shadow:var(--sombra-card),0 0 0 3px color-mix(in srgb,var(--coral) 18%,transparent)}

/* Motor LinkedIn: a cor do modo ligado na chave, o ponto de cada estado do lead (as cores de etapa da inbox) e a linha
   que abre as mensagens. O texto do botão ligado é tinta nos três modos: branco sobre --sem e --pos fica abaixo de 3:1. */
.chave button.on{color:var(--cb-ink)}
.chave button.on[data-modo="off"]{background:var(--sem);border-color:var(--sem)}
.chave button.on[data-modo="espelho"]{background:var(--cb-amber);border-color:var(--cb-amber)}
.chave button.on[data-modo="live"]{background:var(--pos);border-color:var(--pos)}
.chave button:disabled{cursor:not-allowed}
.chave button:disabled:not(.on){opacity:.55}
.aviso.aovivo,:root[data-theme="dark"] .aviso.aovivo{background:color-mix(in srgb,var(--pos) 16%,transparent);color:var(--heading)}
.aviso.grave,:root[data-theme="dark"] .aviso.grave{background:color-mix(in srgb,var(--descartado) 14%,transparent);color:var(--descartado)}
.kpis+.dimhint{margin-top:10px}
.vereditopiloto{margin:12px 0 4px;font-size:13.5px;color:var(--ink)}
.confirmalive{margin-bottom:12px}
.confirmalive .modalinput{width:120px;padding:7px 12px}
.confirmalive .cheadacoes{margin:6px 0 0}
.estadolead{white-space:nowrap}
.estadolead .ponto{display:inline-block;margin:0 6px 0 0;vertical-align:1px}
.ponto[data-estado]{background:var(--sem)}
.ponto[data-estado="convite_enviado"]{background:var(--espera)}
.ponto[data-estado="aceito"]{background:var(--aceita)}
.ponto[data-estado^="msg"]{background:var(--frio)}
.ponto[data-estado="respondeu"]{background:var(--reuniao)}
.motorleads td:first-child{min-width:20ch}
.motorleads td.proximo{white-space:nowrap}
.motorleads td small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);white-space:normal}
.motorleads tr.detalhe{border-top:0}
.motorleads tr.detalhe:hover{background:none}
.motorleads tr.detalhe td{padding-top:0}
.motorleads tr.detalhe summary{cursor:pointer;font-size:12px;color:var(--muted)}
.motormsgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:10px;margin:8px 0 10px}
.motormsg{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px;padding:10px 12px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line-soft);font-size:12.5px;color:var(--text)}