/* ════════════ PELE NOVA · protótipo aprovado de 27/10/2026 ════════════
   Pedido do Biel: levar ao painel real o visual do protótipo `painel-central-reestruturado.html`
   (ramo prototipo-pagina-unica, c6d8d45). Escuro quase preto com cartões grafite e destaque roxo
   (#6c43d2 → #9a6ff9), sem azul no fundo nem no cinza; claro com a base azul-gelo do Manual de Bordo.

   Camada FINAL, carrega depois de todas. Vale nas duas áreas (equipe e cliente). Não muda dado,
   cálculo, rota nem regra: troca os valores dos tokens que o painel já lê e ajusta a casca.

   Como vence as camadas antigas sem `!important` em cada token: os valores ficam em `--pn-*`
   (só este arquivo os define) e o bloco de mapeamento usa `:not(#pn)`, que soma especificidade
   de id e passa por cima de qualquer `:root[data-area=…][data-tema=…]` das peles anteriores. */

/* ── valores: claro (padrão) ─────────────────────────────────────────────────────────────── */
:root{
  --pn-bg:#f4f7fb; --pn-side:#ffffff; --pn-card:#ffffff; --pn-card-2:#f8fafc;
  --pn-text:#14243b; --pn-text-2:#2b3a52; --pn-sub:#5b6d83; --pn-muted:#5f7189;
  --pn-line:#dce4ee; --pn-hair:#e6ecf3; --pn-grid:#e3e9f1; --pn-sel:#f0ecff; --pn-hover:#edf2f8; --pn-chip:#f8fafc;
  --pn-accent:#6d4aef; --pn-accent-t:#5b36d6; --pn-accent-2:#8b6cf6;
  --pn-pos:#087d57; --pn-neg:#af3c42; --pn-warn:#ac630b;
  --pn-pos-f:#0caa73; --pn-neg-f:#e34e5a; --pn-warn-f:#f08c26;
  --pn-pos-s:#e5f7ef; --pn-neg-s:#fff0f0; --pn-warn-s:#fff4df;
  --pn-s1:#7c5cff; --pn-s2:#ef973a; --pn-s3:#0caa73; --pn-s4:#d946ef; --pn-s5:#16a6c8; --pn-s6:#db6596; --pn-s7:#dbaa37; --pn-s8:#8993a5;
  --pn-banner1:#f6f3ff; --pn-banner2:#ece7ff;
  --pn-st-novo:#6f8198; --pn-st-fazendo:#6d4aef; --pn-st-aguardando:#ac630b; --pn-st-feito:#087d57;
  --pn-vidro:rgba(244,247,251,.88); --pn-preench:#1d2b44;
  --pn-sombra:0 10px 32px rgba(20,36,59,.045); --pn-sombra-pop:0 18px 48px rgba(20,36,59,.18);
  --pn-fonte:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",sans-serif;
  --pn-largura:1280px; --pn-gutter:40px; --pn-menu:276px;
}
/* ── valores: escuro (escolhido, ou o sistema sem escolha) ───────────────────────────────── */
:root[data-tema="escuro"]{
  --pn-bg:#0a0a0c; --pn-side:#0e0e11; --pn-card:#131316; --pn-card-2:#18181c;
  --pn-text:#f4f4f6; --pn-text-2:#d4d4d8; --pn-sub:#a1a1aa; --pn-muted:#8b8b94;
  --pn-line:#26262c; --pn-hair:#1c1c21; --pn-grid:#1f1f24; --pn-sel:#221b3b; --pn-hover:#1a1a1f; --pn-chip:#1c1c21;
  --pn-accent:#7c5cff; --pn-accent-t:#a78bfa; --pn-accent-2:#9a6ff9;
  --pn-pos:#1ad598; --pn-neg:#ef5f62; --pn-warn:#f9b959;
  --pn-pos-f:#1ad598; --pn-neg-f:#ea3a3d; --pn-warn-f:#f9b959;
  --pn-pos-s:color-mix(in srgb,#1ad598 14%,#131316); --pn-neg-s:color-mix(in srgb,#ea3a3d 16%,#131316); --pn-warn-s:color-mix(in srgb,#f9b959 14%,#131316);
  --pn-s1:#9a6ff9; --pn-s2:#ff8a4c; --pn-s3:#1ad598; --pn-s4:#e879f9; --pn-s5:#2dd4bf; --pn-s6:#f472b6; --pn-s7:#facc15; --pn-s8:#a1a1aa;
  --pn-banner1:#121115; --pn-banner2:#16131f;
  --pn-st-novo:#a1a1aa; --pn-st-fazendo:#a78bfa; --pn-st-aguardando:#f9b959; --pn-st-feito:#1ad598;
  --pn-vidro:rgba(10,10,12,.86); --pn-preench:#26262c;
  --pn-sombra:0 1px 0 rgba(255,255,255,.03) inset,0 12px 32px rgba(0,0,0,.35); --pn-sombra-pop:0 24px 60px rgba(0,0,0,.7);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --pn-bg:#0a0a0c; --pn-side:#0e0e11; --pn-card:#131316; --pn-card-2:#18181c;
    --pn-text:#f4f4f6; --pn-text-2:#d4d4d8; --pn-sub:#a1a1aa; --pn-muted:#8b8b94;
    --pn-line:#26262c; --pn-hair:#1c1c21; --pn-grid:#1f1f24; --pn-sel:#221b3b; --pn-hover:#1a1a1f; --pn-chip:#1c1c21;
    --pn-accent:#7c5cff; --pn-accent-t:#a78bfa; --pn-accent-2:#9a6ff9;
    --pn-pos:#1ad598; --pn-neg:#ef5f62; --pn-warn:#f9b959;
    --pn-pos-f:#1ad598; --pn-neg-f:#ea3a3d; --pn-warn-f:#f9b959;
    --pn-pos-s:color-mix(in srgb,#1ad598 14%,#131316); --pn-neg-s:color-mix(in srgb,#ea3a3d 16%,#131316); --pn-warn-s:color-mix(in srgb,#f9b959 14%,#131316);
    --pn-s1:#9a6ff9; --pn-s2:#ff8a4c; --pn-s3:#1ad598; --pn-s4:#e879f9; --pn-s5:#2dd4bf; --pn-s6:#f472b6; --pn-s7:#facc15; --pn-s8:#a1a1aa;
    --pn-banner1:#121115; --pn-banner2:#16131f;
    --pn-st-novo:#a1a1aa; --pn-st-fazendo:#a78bfa; --pn-st-aguardando:#f9b959; --pn-st-feito:#1ad598;
    --pn-vidro:rgba(10,10,12,.86); --pn-preench:#26262c;
    --pn-sombra:0 1px 0 rgba(255,255,255,.03) inset,0 12px 32px rgba(0,0,0,.35); --pn-sombra-pop:0 24px 60px rgba(0,0,0,.7);
  }
}

/* ── mapeamento: os nomes que o painel lê passam a apontar para os valores acima ─────────── */
:root[data-area]:not(#pn){
  /* família --aec-* (pele-premium) */
  --aec-bg:var(--pn-bg); --aec-sidebar:var(--pn-side); --aec-surface:var(--pn-card); --aec-surface-alt:var(--pn-card-2);
  --aec-hover:var(--pn-hover); --aec-selected:var(--pn-sel);
  --aec-text:var(--pn-text); --aec-text-2:var(--pn-sub); --aec-muted:var(--pn-muted);
  --aec-border:var(--pn-line); --aec-border-strong:var(--pn-line); --aec-hair:var(--pn-hair); --aec-card-borda:var(--pn-line);
  --aec-accent:var(--pn-accent); --aec-accent-hover:var(--pn-accent-2); --aec-accent-soft:var(--pn-sel); --aec-accent-text:var(--pn-accent-t);
  --aec-acao:var(--pn-accent); --aec-acao-texto:#fff; --aec-acao-hover:var(--pn-accent-2);
  --aec-positivo:var(--pn-pos-f); --aec-negativo:var(--pn-neg-f); --aec-aviso:var(--pn-warn-f);
  --aec-banner:var(--pn-banner1); --aec-banner2:var(--pn-banner2); --aec-grid:var(--pn-grid); --aec-chip:var(--pn-chip);
  --aec-chart-fill:color-mix(in srgb,var(--pn-s1) 12%,transparent);
  --aec-sombra:var(--pn-sombra); --aec-sombra-hover:var(--pn-sombra); --aec-sombra-gaveta:var(--pn-sombra-pop);
  --aec-f-texto:var(--pn-fonte); --aec-f-titulo:var(--pn-fonte);
  --series-1:var(--pn-s1); --series-2:var(--pn-s2); --series-3:var(--pn-s3); --series-4:var(--pn-s4);
  --series-5:var(--pn-s5); --series-6:var(--pn-s6); --series-7:var(--pn-s7); --series-8:var(--pn-s8);
  /* família antiga (tokens.css → painel.css: --bg, --card, --bd, --t1..t5, --blue…) */
  --fundo:var(--pn-bg); --superficie:var(--pn-card); --superficie-2:var(--pn-card-2);
  --linha:var(--pn-line); --linha-suave:var(--pn-hair);
  --texto:var(--pn-text); --texto-2:var(--pn-text-2); --texto-3:var(--pn-sub); --texto-4:var(--pn-sub); --texto-5:var(--pn-muted);
  --acento:var(--pn-accent); --acento-texto:var(--pn-accent-t); --acento-forte:var(--pn-accent-t);
  --ok:var(--pn-pos-f); --ok-texto:var(--pn-pos); --atencao:var(--pn-warn-f); --atencao-texto:var(--pn-warn);
  --erro:var(--pn-neg-f); --erro-texto:var(--pn-neg); --destaque:var(--pn-accent);
  --fundo-ok:var(--pn-pos-s); --fundo-erro:var(--pn-neg-s); --fundo-atencao:var(--pn-warn-s);
  --pro-aviso-fundo:var(--pn-warn-s); --pro-aviso-borda:color-mix(in srgb,var(--pn-warn-f) 35%,transparent); --pro-aviso-texto:var(--pn-warn);
  --serie-1:var(--pn-s1); --serie-2:var(--pn-s2); --serie-3:var(--pn-s3); --serie-4:var(--pn-s4); --serie-5:var(--pn-s5);
  --vidro:var(--pn-vidro); --font:var(--pn-fonte);
  /* família pele-hig */
  --pro-canvas:var(--pn-bg); --pro-borda:var(--pn-line); --pro-borda-forte:var(--pn-line);
  --pro-marca:var(--pn-accent); --pro-marca-suave:var(--pn-sel); --pro-marca-texto:var(--pn-accent-t);
  --hig-sep:var(--pn-hair); --hig-preench:var(--pn-card-2); --hig-vidro-topo:var(--pn-vidro);
}
/* A moldura (menu lateral, barra de baixo) acompanha o tema: no claro ela é clara. */
:root[data-area]:not(#pn){
  --moldura:var(--pn-side); --moldura-2:var(--pn-card-2); --moldura-3:var(--pn-hover); --moldura-linha:var(--pn-hair);
  --moldura-texto:var(--pn-text); --moldura-texto-2:var(--pn-sub); --moldura-ativo:var(--pn-accent-t);
  --lateral-texto:var(--pn-text);
}
/* O painel antigo pinta "fundo da moldura + texto branco" (--sobre-preenchimento) porque a moldura era escura
   nos dois temas. Com a moldura clara no claro isso vira branco no branco: o ícone do topo e o "Sair" somem no
   hover, a aba ativa "Período da barra" e o chip ativo dos criativos ficam em branco (Biel, 27/10). Quem marca
   seleção ganha o roxo suave do menu; quem é preenchimento de verdade lê --pn-preench, que não clareia. */
:root[data-area] .icon-btn:hover{background:var(--pn-hover)!important;color:var(--pn-text)!important}
:root[data-area] .dsub-b.on,:root[data-area] .dsub-b.on:hover,:root[data-area] .c2-chip.on{background:var(--pn-sel)!important;
  color:var(--pn-accent-t)!important;border-color:color-mix(in srgb,var(--pn-accent) 35%,transparent)!important}
:root[data-area] .c2-cr .cb,:root[data-area] .c2-selbar,:root[data-area] .fonte-marca{
  background:var(--pn-preench)!important;color:#fff!important}
:root[data-area] .fer-arte,:root[data-area] .crv-card,:root[data-area] .crv-preview-hold{background:#0e1116}

/* ── base ─────────────────────────────────────────────────────────────────────────────────── */
:root[data-area] body{font-family:var(--pn-fonte)!important;background:var(--pn-bg)!important;color:var(--pn-text);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:root[data-area] .main{background:var(--pn-bg)}

/* ── menu lateral: 276 px, itens de 44 px, ativo roxo ─────────────────────────────────────── */
@media (min-width:821px){
  :root[data-area] #view-app .sidebar{width:var(--pn-menu)!important;flex:0 0 var(--pn-menu)!important}
}
:root[data-area] .sidebar{background:var(--pn-side)!important;border-right:1px solid var(--pn-hair)!important;padding:20px 16px 16px!important}
:root[data-area] .sidebar .nav-item{min-height:44px!important;font-size:14px!important;font-weight:550!important;color:var(--pn-sub)!important;
  border-radius:11px!important;padding:10px 14px!important;gap:11px!important;letter-spacing:-.005em}
:root[data-area] .sidebar .nav-item svg{width:19px;height:19px}
:root[data-area] .sidebar .nav-item:hover{background:var(--pn-hover)!important;color:var(--pn-text)!important}
:root[data-area] .sidebar .nav-item.on{background:var(--pn-sel)!important;color:var(--pn-accent-t)!important;font-weight:650!important;box-shadow:none!important}
:root[data-area] .sidebar .nav-item.on svg,:root[data-area] .sidebar .nav-item.on .ic{color:var(--pn-accent-t)!important}
:root[data-area][data-tema="escuro"] .sidebar .nav-item.on{background:linear-gradient(90deg,rgba(124,92,255,.30),rgba(124,92,255,.10))!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.18)!important}
@media (prefers-color-scheme: dark){
  :root[data-area]:not([data-tema="claro"]) .sidebar .nav-item.on{background:linear-gradient(90deg,rgba(124,92,255,.30),rgba(124,92,255,.10))!important;color:#fff!important;
    box-shadow:inset 0 0 0 1px rgba(167,139,250,.18)!important}
}
:root[data-area] .nav-grupo{font-size:10px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--pn-muted)!important;font-weight:650!important}
.nav-item .nav-n{margin-left:auto;font-size:11.5px;color:var(--pn-muted);font-weight:500}
/* Menu recolhido pelo ≡ (27/10/2026): os !important acima seguravam os 276 px e a fonte de 14 px, e o trilho
   de ícones do painel.css virava um menu largo com os itens centralizados. Abaixo de 1024 px é gaveta. */
@media (min-width:1024px){
  :root[data-area] #view-app.side-collapsed .sidebar{width:72px!important;flex:0 0 72px!important;padding:20px 10px 16px!important}
  :root[data-area] #view-app.side-collapsed .sidebar .nav-item{font-size:0!important;justify-content:center;padding:11px 0!important;gap:0!important}
  #view-app.side-collapsed .sidebar .nav-n,#view-app.side-collapsed .sidebar .nav-pill,
  #view-app.side-collapsed .sidebar .nav-grupo{display:none!important}
  #view-app.side-collapsed .side-foot{flex-direction:column;gap:10px}
}
/* Na gaveta (<1024 px) a escolha "recolhido" guardada não vale: o bloco da marca volta ao lugar (a margem do logo fica no
   painel.css: a pele nova não toca no logo) e a pílula vazia some. */
@media (max-width:1023px){
  :root[data-area] #view-app.side-collapsed .side-brand{justify-content:normal;padding:6px 10px 24px}
  #view-app.side-collapsed .sidebar .nav-pill:empty{display:none}
}
.nav-item .nav-pill{margin-left:auto;font-size:10.5px;font-weight:600;border-radius:9px;padding:1px 7px;min-width:18px;text-align:center;background:var(--pn-neg-f);color:#fff}
.nav-item .nav-pill:empty{display:none}

/* ── cabeçalho e conteúdo centralizados: nada estica no monitor de 3440 ───────────────────── */
:root[data-area] .header{background:var(--pn-vidro)!important;border-bottom:1px solid var(--pn-line)!important;
  padding-inline:max(var(--pn-gutter),calc((100% - var(--pn-largura)) / 2 + var(--pn-gutter)))!important}
:root[data-area] #wrap.wrap{width:100%;max-width:var(--pn-largura);margin-inline:auto;padding:28px var(--pn-gutter) 56px!important;gap:20px}
:root[data-area] .h-title,:root[data-area] .header .lj-btn{font-size:26px!important;font-weight:730!important;letter-spacing:-.85px!important;color:var(--pn-text)!important}
:root[data-area] .h-sub{font-size:12.5px!important;color:var(--pn-sub)!important}
@media (max-width:820px){
  :root[data-area] .header{padding:12px 16px!important}
  :root[data-area] #wrap.wrap{padding:18px 16px 96px!important}
  :root[data-area] .h-title,:root[data-area] .header .lj-btn{font-size:21px!important;letter-spacing:-.5px!important}
}

/* ── cartões: grafite no escuro, borda quase invisível ────────────────────────────────────── */
:root[data-area] .card,:root[data-area] .kpi,:root[data-area] .g-card,:root[data-area] .gs-kpi,:root[data-area] .vg-gg,
:root[data-area] .c2-tblwrap,:root[data-area] .c2-card,:root[data-area] .det-k,:root[data-area] .hj-card{
  background:var(--pn-card)!important;border-color:var(--pn-line)!important;box-shadow:var(--pn-sombra)!important}
:root[data-area][data-tema="escuro"] :is(.card,.kpi,.g-card,.gs-kpi,.vg-gg,.c2-tblwrap,.c2-card,.det-k,.hj-card){border-color:rgba(255,255,255,.06)!important}
@media (prefers-color-scheme: dark){
  :root[data-area]:not([data-tema="claro"]) :is(.card,.kpi,.g-card,.gs-kpi,.vg-gg,.c2-tblwrap,.c2-card,.det-k,.hj-card){border-color:rgba(255,255,255,.06)!important}
}

/* ── faixa de marca: o único degradê, com brilho roxo no escuro ──────────────────────────── */
:root[data-area] .pc-faixa{background:linear-gradient(110deg,var(--pn-banner1),var(--pn-banner2))!important;border-color:var(--pn-line)!important;border-radius:16px!important}
:root[data-area] .pc-faixa .waves{filter:hue-rotate(25deg) saturate(1.1)}
:root[data-area][data-tema="escuro"] .pc-faixa{background:radial-gradient(120% 160% at 30% -40%,rgba(124,92,255,.34),transparent 58%),linear-gradient(110deg,var(--pn-banner1),var(--pn-banner2))!important;
  border-color:rgba(167,139,250,.16)!important}
@media (prefers-color-scheme: dark){
  :root[data-area]:not([data-tema="claro"]) .pc-faixa{background:radial-gradient(120% 160% at 30% -40%,rgba(124,92,255,.34),transparent 58%),linear-gradient(110deg,var(--pn-banner1),var(--pn-banner2))!important;
    border-color:rgba(167,139,250,.16)!important}
}

/* ── abas sublinhadas em roxo ─────────────────────────────────────────────────────────────── */
:root[data-area] .cli-aba.on{color:var(--pn-accent-t)!important}
:root[data-area] .cli-aba.on::after{background:linear-gradient(90deg,#6c43d2,#9a6ff9)!important}

/* ── botão principal: degradê roxo ────────────────────────────────────────────────────────── */
:root[data-area] :is(.c2-btn.prim,.btn-prim,.g-botao.prim,button.primario){background:linear-gradient(180deg,#9a6ff9,#6c43d2)!important;border-color:transparent!important;color:#fff!important}

/* ── variação ▲▼ contra o período anterior, e o "—" com ⓘ quando não há base ─────────────── */
.pn-var{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:650;white-space:nowrap}
.pn-var.up{color:var(--pn-pos)} .pn-var.down{color:var(--pn-neg)} .pn-var.neutro,.pn-var.sem{color:var(--pn-muted);font-weight:550}
.pn-var small{font-weight:500;color:var(--pn-muted);margin-left:3px}
.pn-i{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--pn-line);color:var(--pn-muted);
  font:600 10px/1 var(--pn-fonte);cursor:help;vertical-align:middle;margin-left:3px;background:none;padding:0}
.pn-i:hover,.pn-i:focus-visible{color:var(--pn-accent-t);border-color:var(--pn-accent-t)}

/* ── "Detalhes" recolhido ─────────────────────────────────────────────────────────────────── */
.pn-det{margin-top:10px}
.pn-det>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;padding:4px 6px 4px 2px;border-radius:8px;
  font:700 12.5px var(--pn-fonte);color:var(--pn-accent-t)}
.pn-det>summary::-webkit-details-marker{display:none}
.pn-det>summary::before{content:"›";display:inline-block;transition:transform .18s;font-size:15px;line-height:1}
.pn-det[open]>summary::before{transform:rotate(90deg)}
.pn-det>summary:hover{background:var(--pn-sel)}
.pn-det>summary em{font-style:normal;font-weight:560;color:var(--pn-muted)}
.pn-det-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;margin-top:8px;padding:16px 22px;background:var(--pn-card);
  border:1px solid var(--pn-line);border-radius:14px}
.pn-det-g .lb{font-size:12px;color:var(--pn-sub);font-weight:620}
.pn-det-g .v{font-size:16px;font-weight:720;margin-top:2px;letter-spacing:-.01em}
@media (max-width:820px){ .pn-det-g{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px} }

/* ── velocímetro do ROAS (gVelocimetro, cartão "Retorno do anúncio" da conta) ─────────────── */
.hj-vel{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 12px;text-align:center}
.hj-vel .gv{max-width:280px}
.hj-vel p{margin:0;font-size:14.5px;line-height:21px;color:var(--pn-sub);max-width:34ch}
.gv{display:block;width:100%;height:auto;overflow:visible}
.gv-tr{fill:none;opacity:.22}
:root[data-tema="escuro"] .gv-tr{opacity:.34}
.gv-pt{fill:var(--pn-card);stroke:var(--pn-text);stroke-width:2.5}
.gv-tk{stroke:var(--pn-muted);stroke-width:1.5}
.gv-antes{stroke:var(--pn-text);stroke-width:2;opacity:.55}
.gv-lb{font-size:11px;font-weight:600;fill:var(--pn-muted)}
.gv-n{font-size:32px;font-weight:780;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.gv-s{font-size:11.5px;font-weight:550;fill:var(--pn-sub)}

/* ── nada de rolagem lateral ──────────────────────────────────────────────────────────────── */
html,body{max-width:100%}

/* ── menu: Configurações no rodapé, contagem e selo ───────────────────────────────────────── */
:root[data-area] .sidebar .nav{flex:1;display:flex;flex-direction:column;gap:2px;min-height:0}
.nav-espaco{flex:1;min-height:12px}

/* ── pílulas de um destino que junta telas (Contas · Grupo SV, Resumo · Dia a dia…) ───────── */
.pn-subp{display:flex;gap:6px;flex-wrap:wrap;width:100%;max-width:var(--pn-largura);margin:0 auto;padding:20px var(--pn-gutter) 0}
.pn-subp[hidden]{display:none}
.pn-pil{border:1px solid var(--pn-line);background:var(--pn-card);color:var(--pn-sub);font:600 13px var(--pn-fonte);padding:7px 14px;border-radius:999px;cursor:pointer;min-height:36px}
.pn-pil:hover{color:var(--pn-text);background:var(--pn-hover)}
.pn-pil.on{background:var(--pn-sel);color:var(--pn-accent-t);border-color:color-mix(in srgb,var(--pn-accent) 35%,transparent)}
.pn-subp:not([hidden])+#wrap.wrap{padding-top:16px!important}
@media (max-width:820px){ .pn-subp{padding:14px 16px 0} }

/* ── Configurações › Outras telas ──────────────────────────────────────────────────────────── */
.pn-outras{padding:16px 18px!important}
.pn-outras-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--pn-muted);font-weight:650;margin:0 0 8px 4px}
.pn-outras-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px}
.pn-outra{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--pn-hair);background:var(--pn-card-2);color:var(--pn-text);
  border-radius:12px;padding:12px 14px;cursor:pointer;min-height:58px;font:inherit}
.pn-outra:hover{background:var(--pn-hover);border-color:var(--pn-line)}
.pn-outra .ic{width:19px;height:19px;color:var(--pn-accent-t);flex:none}
.pn-outra span{flex:1;min-width:0;display:flex;flex-direction:column}
.pn-outra b{font-size:14px;font-weight:650}
.pn-outra small{font-size:12px;color:var(--pn-sub)}
.pn-outra .seta{color:var(--pn-muted);width:16px;height:16px}
.pn-outra .nav-pill{font-style:normal;font-size:10.5px;font-weight:600;border-radius:9px;padding:1px 7px;background:var(--pn-neg-f);color:#fff}

/* ── conta: seções que dividem uma aba (Diário no Resumo; Clientes e Mapa em Vendas) ──────── */
.dsub-w.hidden{display:none!important}
.dsub-w+.dsub-w:not(.hidden){margin-top:28px}
.pn-sec-t{font-size:17px;font-weight:720;letter-spacing:-.2px;margin:0 0 12px;color:var(--pn-text);scroll-margin-top:140px}
.dsub-w{scroll-margin-top:130px}
/* Meta no próprio cartão (27/10/2026): o formulário curto de quem não tem meta. */
.hj-mf{display:grid;gap:8px;margin-top:6px;max-width:420px}
.hj-mf label{font-size:13px;font-weight:600;color:var(--pn-text,var(--texto))}
.hj-mf-l{display:flex;gap:8px;align-items:stretch}
.hj-mf-l .mt-campo{flex:1;min-width:0}
.hj-mf-l .btn-primary{flex:none}

/* Lista de contas do ⌘K e do título (27/10/2026): nome · ROAS Pago · selo do piso, em três colunas. */
.lj-pop .lj-o{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:center;gap:10px;min-height:40px}
.lj-pop .lj-r{font-size:13px;font-weight:650;color:var(--pn-text,var(--texto));justify-self:end}
.lj-pop .lj-s{justify-self:end;font-size:11px;font-weight:650;padding:2px 8px;border-radius:999px;line-height:1.5}
.lj-pop .lj-s:empty{padding:0}
.lj-pop .lj-s-mal{background:var(--pn-neg-s,#fff0f0);color:var(--pn-neg,#af3c42)}
.lj-pop .lj-s-bom{background:var(--pn-pos-s,#e5f7ef);color:var(--pn-pos,#087d57)}
.lj-pop .lj-n .lj-ok{margin-left:4px}
:root[data-area] .header .hdr-busca input[readonly]{cursor:pointer}

/* ════════════ Régua de 27/10/2026, noite (subida 3) ════════════
   Biel: "parece algo feito por IA, e jovens amadores, não tem visual de sistema bom", com a Gestão Financeira de
   referência: "tem margem e tamanho específico, organizado, não estica e deforma, clareza". O conteúdo tem largura
   fixa (1280 com as margens) e fica no centro; os blocos vão dois por linha com a mesma altura; o gráfico ganha
   grade cinza clara; tabela sem zebra e sem vão. */

/* ── blocos dois por linha, da mesma altura ────────────────────────────────────────────── */
:root[data-area] .vg-grade{gap:20px;align-items:stretch;margin-bottom:20px}
:root[data-area] .vg-grade>.card,:root[data-area] .vg-grade>div>.card{height:100%;box-sizing:border-box}
:root[data-area] .vg-grade>div:not(.card){min-width:0}

/* ── colunas e linha com grade (gColunasGrade) ─────────────────────────────────────────── */
:root[data-area] svg.g-col.gcg{width:100%;height:auto;max-height:none;margin:6px 0 0;overflow:visible}
svg.gcg .g-grade{stroke:var(--pn-grid);stroke-width:1}
svg.gcg .g-grade-0{stroke:var(--pn-line)}
svg.gcg .g-media{stroke:var(--pn-muted);stroke-width:1.25;stroke-dasharray:5 5}
svg.gcg .g-lin-t{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
svg.gcg .g-lin-p{fill:var(--pn-card);stroke-width:2.5}
@media (min-width:768px){
  :root[data-area="admin"] svg.g-col.gcg .g-col-v{font-size:11.5px!important;font-weight:650;fill:var(--pn-text)}
  :root[data-area="admin"] svg.g-col.gcg .g-col-n{font-size:11.5px!important;fill:var(--pn-sub)}
  :root[data-area="admin"] svg.g-col.gcg .g-eixo{font-size:10.5px!important;fill:var(--pn-muted)}
  :root[data-area="admin"] svg.g-col.gcg .g-col-m{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
}
svg.gcg .g-col-topo{fill:var(--pn-pos)}
svg.gcg .g-col-fundo{fill:var(--pn-neg)}

/* ── "O que melhorou e o que piorou?": tabela compacta, sem zebra ─────────────────────── */
:root[data-area="admin"] table.gm{font-size:13.5px;margin-top:2px}
:root[data-area="admin"] table.gm th{font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--pn-muted);
  background:none;padding:6px 8px;border-bottom:1px solid var(--pn-line)}
:root[data-area="admin"] table.gm td{padding:8px;border-bottom:1px solid var(--pn-hair);white-space:nowrap}
:root[data-area="admin"] table.gm tr:nth-child(even) td{background:none}
:root[data-area="admin"] table.gm tr:last-child td{border-bottom:0}
:root[data-area="admin"] table.gm td:first-child{white-space:normal;color:var(--pn-text-2)}
:root[data-area="admin"] table.gm td:last-child{font-size:12.5px}

/* ── Produtos acabando em dois grupos (rupturaGrupos) ──────────────────────────────────── */
.rpg-g+.rpg-g{margin-top:14px}
.rpg-t{display:flex;align-items:center;gap:8px;margin:4px 0 2px;font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--pn-sub)}
.rpg-t i{width:8px;height:8px;border-radius:50%;flex:none}
.rpg-t b{margin-left:auto;font-size:12px;color:var(--pn-text)}
.rpg-t i.rpg-atencao{background:var(--pn-warn-f)} .rpg-t i.rpg-acabou{background:var(--pn-neg-f)}
.rpg-l{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--pn-hair);min-height:44px}
/* a lista antiga dava `grid-area:nome` ao .rup-nome; aqui ele é só a 1ª coluna */
.rpg-l>.rup-nome,.rpg-l>.rpg-n{grid-area:auto}
.rpg-g>.rpg-l:last-of-type,.rpg-mais>.rpg-l:last-child{border-bottom:0}
.rpg-l .rup-nome b{font-size:13.5px;font-weight:600}
.rpg-l .rup-apoio{font-size:12px!important;color:var(--pn-muted)}
.rpg-n{font-size:14px;font-weight:700;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.rpg-n.rpg-atencao{color:var(--pn-warn)} .rpg-n.rpg-acabou{color:var(--pn-neg)}
:root[data-area="admin"] .rpg-l .rup-nome.com-foto{grid-template-columns:36px minmax(0,1fr);column-gap:10px}
:root[data-area="admin"] .rpg-l .rup-nome.com-foto .pf{width:36px;height:36px}
.rpg-mais>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 6px 4px 2px;border-radius:8px;
  font-size:12.5px;font-weight:650;color:var(--pn-accent-t)}
.rpg-mais>summary::-webkit-details-marker{display:none}
.rpg-mais>summary::before{content:"›";display:inline-block;transition:transform .18s;font-size:15px;line-height:1}
.rpg-mais[open]>summary::before{transform:rotate(90deg)}
/* Uma coluna da grade com dois blocos empilhados (Vendas): o último estica até o fim da coluna. */
.vg-col{display:flex;flex-direction:column;gap:20px;min-width:0}
:root[data-area] .vg-grade>.vg-col>.card{height:auto;margin:0}
:root[data-area] .vg-grade>.vg-col>.card:last-child{flex:1}

/* Card de conta compacto (27/10/2026, subida 3): o do protótipo aprovado. Três por linha na largura
   fixa de 1280, altura igual, ROAS Pago no velocímetro pequeno. */
:root[data-area="admin"] .c2-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1100px){:root[data-area="admin"] .c2-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){:root[data-area="admin"] .c2-cards{grid-template-columns:1fr}}
:root[data-area="admin"] .c2n{display:flex;flex-direction:column;gap:14px;padding:16px 18px;cursor:pointer}
:root[data-area="admin"] .c2n .c2-card-top{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0}
:root[data-area="admin"] .c2n-nome{flex:1;min-width:0}
:root[data-area="admin"] .c2n-nome b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-area="admin"] .c2n .c2-pill{display:inline-flex;margin-top:4px;font-size:11.5px}
:root[data-area="admin"] .c2n-corpo{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:12px;align-items:center;
  background:var(--pn-card-2,var(--pn-bg));border-radius:12px;padding:12px 14px}
:root[data-area="admin"] .c2n-nums{display:grid;gap:10px}
:root[data-area="admin"] .c2n .hl{font-size:12px;font-weight:600;color:var(--pn-sub);white-space:nowrap}
:root[data-area="admin"] .c2n .hv{font-size:19px;font-weight:760;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:1px}
:root[data-area="admin"] .c2n .hd{font-size:11.5px;min-height:14px}
:root[data-area="admin"] .c2n-vel{text-align:center}
:root[data-area="admin"] .c2n-vel .gv-mini{max-width:128px;margin:4px auto 0}
:root[data-area="admin"] .gv-n-mini{font-size:46px;letter-spacing:-.04em}
:root[data-area="admin"] .c2n-regua{font-size:11px;color:var(--pn-muted);white-space:nowrap;margin-top:2px}
:root[data-area="admin"] .gv-sem{font-size:24px;font-weight:760;margin:10px 0 6px;color:var(--pn-muted)}

/* Visão geral (27/10/2026, subida 3): ROAS Pago de cada conta, uma barra por linha contra o piso e a
   meta da própria conta; e a fila "Quem precisa de decisão?" com linhas de 44 px. */
.vgr{display:grid;gap:2px;margin-top:6px}
.vgr-l{display:grid;grid-template-columns:30px minmax(120px,190px) minmax(0,1fr) 64px 64px;gap:12px;align-items:center;
  min-height:44px;padding:6px 8px;margin:0 -8px;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.vgr-l:hover{background:var(--pn-card-2)}
.vgr-n{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vgr-t{position:relative;height:10px;border-radius:99px;background:color-mix(in srgb,var(--pn-text) 7%,transparent)}
.vgr-b{position:absolute;left:0;top:0;bottom:0;border-radius:99px}
.vgr-b.mal{background:var(--pn-neg)} .vgr-b.atencao{background:var(--pn-warn)} .vgr-b.bom{background:var(--pn-pos)}
.vgr-t .vgr-piso,.vgr-t .vgr-meta{position:absolute;top:-5px;bottom:-5px;width:0;margin-left:-1px}
.vgr-piso{border-left:2px solid var(--pn-text)}
.vgr-meta{border-left:2px dotted var(--pn-sub)}
.vgr-v{font-size:15px;font-weight:720;text-align:right;font-variant-numeric:tabular-nums}
.vgr-v.mal{color:var(--pn-neg)} .vgr-v.atencao{color:var(--pn-warn)} .vgr-v.bom{color:var(--pn-pos)}
.vgr-z{font-size:12px;color:var(--pn-sub);white-space:nowrap}
.vgr-leg{display:flex;gap:18px;margin-top:10px;font-size:12px;color:var(--pn-sub)}
.vgr-leg span{display:inline-flex;align-items:center;gap:6px}
.vgr-leg i{display:inline-block;height:12px}
@media(max-width:700px){
  .vgr-l{grid-template-columns:26px minmax(0,1fr) 56px;row-gap:6px}
  .vgr-t{grid-column:1/-1;grid-row:2}
  .vgr-z{display:none}
}
:root[data-area="admin"] .vg-at-lista{grid-template-columns:1fr!important;gap:0!important}
:root[data-area="admin"] .vg-at-loja{grid-template-columns:30px minmax(0,1fr) auto auto!important;gap:12px!important;min-height:44px!important;padding:6px 4px!important}
:root[data-area="admin"] .vg-at-loja .lc{width:30px}
:root[data-area="admin"] .vg-at-loja b{font-size:14px!important}
:root[data-area="admin"] .vg-at-loja .vg-at-num{font-size:14px!important}
:root[data-area="admin"] .vg-atencao{padding:16px 20px}
/* Cabeçalho: o campo das contas com cara de seletor (subida 3). */
:root[data-area="admin"] .hdr-sel input{cursor:pointer;caret-color:transparent}
:root[data-area="admin"] .hdr-sel .hdr-sel-seta{transform:rotate(90deg);width:16px;height:16px;flex:none;color:var(--pn-sub)}