/* public/css/pele-hig.css
   ══════════════════════════════════════════════════════════════════════════════════════
   Camada Apple HIG do ADMIN (22/10/2026): clareza · deferência · profundidade · vidro só na
   navegação. É a mesma receita que o Biel aprovou no sistema de Gestão Financeira
   (Aberto/agente-financeiro/painel/pagina.html, bloco "camada Apple HIG"), adaptada às classes
   do Painel. Fica POR CIMA da pele-apple.css (20/10) e não mexe em comportamento.

   Reverter = tirar o <link> de css/pele-hig.css do index.html. Nada mais depende dela.

   Regras de casa (as mesmas da pele-apple):
   - Tudo sob :root[data-area="admin"]. O painel do cliente final não muda aqui.
   - Cor nova é token --hig-* com valor nos dois temas; o escuro continua coerente.
   - Texto secundário nunca abaixo de #55555c no claro (passa 7:1 sobre o branco).
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── tokens: claro ─────────────────────────────────────────────────────────────────── */
:root[data-area="admin"]{
  --hig-fundo:#f2f2f7;
  --hig-sep:rgba(60,60,67,.13);
  --hig-sep-forte:rgba(60,60,67,.22);
  --hig-preench:rgba(118,118,128,.12);
  --hig-preench-hover:rgba(118,118,128,.18);
  --hig-sombra:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.05);
  --hig-sombra-hover:0 1px 2px rgba(0,0,0,.05),0 12px 34px rgba(0,0,0,.08);
  --hig-vidro:rgba(255,255,255,.58);
  --hig-vidro-topo:rgba(242,242,247,.62);
  --hig-vidro-borda:rgba(255,255,255,.7);
  --hig-vidro-brilho:inset 0 1px 0 rgba(255,255,255,.8);
  --hig-vidro-sombra:0 10px 40px rgba(0,0,0,.08);
  --hig-ativo:rgba(255,255,255,.72);
  --hig-hover:rgba(255,255,255,.55);
  --hig-botao-on:#ffffff;
  --hig-folha-sombra:0 24px 80px rgba(0,0,0,.18);
  --hig-luz-1:rgba(1,51,43,.10);      /* verde AEC #01332B */
  --hig-luz-2:rgba(167,94,61,.09);    /* terracota AEC #A75E3D */
  --hig-luz-3:rgba(11,74,62,.07);
  --hig-mola:cubic-bezier(.32,.72,0,1);
  /* secundário mais firme: o 13px que explica o número grande precisa ser lido */
  --fundo:var(--hig-fundo);
  --texto-4:#55555c;
  --texto-5:#5c5c62;
  --linha:var(--hig-sep);
  --linha-suave:rgba(60,60,67,.08);
  --controle-linha:var(--hig-sep-forte);
  --controle-fundo:var(--hig-preench);
}
/* ── tokens: escuro (sistema escuro sem escolha, ou escolha "escuro") ─────────────── */
@media (prefers-color-scheme: dark){
  :root[data-area="admin"]:not([data-tema="claro"]){
    --hig-fundo:#0b0c0e;
    --hig-sep:rgba(255,255,255,.09);
    --hig-sep-forte:rgba(255,255,255,.16);
    --hig-preench:rgba(118,118,128,.24);
    --hig-preench-hover:rgba(118,118,128,.32);
    --hig-sombra:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.25);
    --hig-sombra-hover:0 1px 2px rgba(0,0,0,.45),0 12px 34px rgba(0,0,0,.35);
    --hig-vidro:rgba(28,30,36,.55);
    --hig-vidro-topo:rgba(11,12,14,.62);
    --hig-vidro-borda:rgba(255,255,255,.08);
    --hig-vidro-brilho:inset 0 1px 0 rgba(255,255,255,.06);
    --hig-vidro-sombra:0 10px 40px rgba(0,0,0,.45);
    --hig-ativo:rgba(255,255,255,.10);
    --hig-hover:rgba(255,255,255,.06);
    --hig-botao-on:#3a3b40;
    --hig-folha-sombra:0 24px 80px rgba(0,0,0,.6);
    --hig-luz-1:rgba(18,120,100,.14);
    --hig-luz-2:rgba(167,94,61,.12);
    --hig-luz-3:rgba(11,74,62,.10);
    --fundo:var(--hig-fundo);
    --texto-4:#a1a1aa;
    --texto-5:#93939c;
    --linha:var(--hig-sep);
    --linha-suave:rgba(255,255,255,.05);
    --controle-linha:var(--hig-sep-forte);
    --controle-fundo:var(--hig-preench);
  }
}
:root[data-area="admin"][data-tema="escuro"]{
  --hig-fundo:#0b0c0e;
  --hig-sep:rgba(255,255,255,.09);
  --hig-sep-forte:rgba(255,255,255,.16);
  --hig-preench:rgba(118,118,128,.24);
  --hig-preench-hover:rgba(118,118,128,.32);
  --hig-sombra:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.25);
  --hig-sombra-hover:0 1px 2px rgba(0,0,0,.45),0 12px 34px rgba(0,0,0,.35);
  --hig-vidro:rgba(28,30,36,.55);
  --hig-vidro-topo:rgba(11,12,14,.62);
  --hig-vidro-borda:rgba(255,255,255,.08);
  --hig-vidro-brilho:inset 0 1px 0 rgba(255,255,255,.06);
  --hig-vidro-sombra:0 10px 40px rgba(0,0,0,.45);
  --hig-ativo:rgba(255,255,255,.10);
  --hig-hover:rgba(255,255,255,.06);
  --hig-botao-on:#3a3b40;
  --hig-folha-sombra:0 24px 80px rgba(0,0,0,.6);
  --hig-luz-1:rgba(18,120,100,.14);
  --hig-luz-2:rgba(167,94,61,.12);
  --hig-luz-3:rgba(11,74,62,.10);
  --fundo:var(--hig-fundo);
  --texto-4:#a1a1aa;
  --texto-5:#93939c;
  --linha:var(--hig-sep);
  --linha-suave:rgba(255,255,255,.05);
  --controle-linha:var(--hig-sep-forte);
  --controle-fundo:var(--hig-preench);
}

/* ── fundo: cinza do sistema + luz bem sutil, para o vidro ter o que refratar ──────── */
:root[data-area="admin"] body{background:var(--hig-fundo)}
:root[data-area="admin"] body::before{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(40vmax 34vmax at 8% 10%,var(--hig-luz-1),transparent 70%),
             radial-gradient(36vmax 30vmax at 96% 4%,var(--hig-luz-2),transparent 70%),
             radial-gradient(44vmax 36vmax at 70% 100%,var(--hig-luz-3),transparent 70%)}

/* ── PROFUNDIDADE 1 · menu lateral flutuante de vidro ──────────────────────────────── */
@media (min-width:1024px){
  :root[data-area="admin"] .sidebar{margin:12px 0 12px 12px;height:calc(100vh - 24px);border-radius:24px;
    border:1px solid var(--hig-vidro-borda);background:var(--hig-vidro);
    -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
    box-shadow:var(--hig-vidro-sombra),var(--hig-vidro-brilho);overflow:hidden auto;position:relative;z-index:21}
}
@media (max-width:1023px){
  :root[data-area="admin"] .sidebar{top:8px;left:8px;height:calc(100vh - 16px);border-radius:24px;
    border:1px solid var(--hig-vidro-borda);background:var(--hig-vidro);
    -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
    transform:translateX(calc(-100% - 16px));transition:transform .45s var(--hig-mola)}
  :root[data-area="admin"] #view-app.drawer-open .sidebar{transform:none;box-shadow:var(--hig-folha-sombra),var(--hig-vidro-brilho)}
}
:root[data-area="admin"] .side-brand .logo{border-radius:12px;box-shadow:0 2px 8px rgba(1,51,43,.25)}
:root[data-area="admin"] .side-brand b{font-size:15px}
:root[data-area="admin"] .side-brand span{font-size:12.5px}
:root[data-area="admin"] .sidebar .nav-item{min-height:42px;border-radius:12px;font-size:15px}
:root[data-area="admin"] .sidebar .nav-item:hover{background:var(--hig-hover)}
:root[data-area="admin"] .sidebar .nav-item.on{background:var(--hig-ativo);box-shadow:0 1px 3px rgba(0,0,0,.06)}
:root[data-area="admin"] .nav-grupo{font-size:12.5px}
:root[data-area="admin"] .side-foot{border-top:1px solid var(--hig-sep)}
:root[data-area="admin"] .side-foot .who b{font-size:14px}
:root[data-area="admin"] .side-foot .who span{font-size:12.5px}
:root[data-area="admin"] .drawer-ov{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(0,0,0,.28)}

/* ── PROFUNDIDADE 2 · barra do topo de vidro ───────────────────────────────────────── */
:root[data-area="admin"] .header{background:var(--hig-vidro-topo);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--hig-sep)}
:root[data-area="admin"] .h-title{letter-spacing:-.024em}
:root[data-area="admin"] .h-sub{font-size:14px;line-height:20px;color:var(--texto-4)}

/* ── abas de conteúdo: sem faixa própria, separador fino ───────────────────────────── */
:root[data-area="admin"] .vg-abas,:root[data-area="admin"] .cli-abas{border-bottom:1px solid var(--hig-sep);
  background:color-mix(in srgb,var(--hig-fundo) 78%,transparent);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
:root[data-area="admin"] .cli-aba,:root[data-area="admin"] .vg-abas button{font-size:15px;height:44px}
:root[data-area="admin"] .per-tira{font-size:14px}

/* ── DEFERÊNCIA · cartões brancos sem contorno, raio 20, sombra suave ──────────────── */
:root[data-area="admin"] .card,:root[data-area="admin"] .kpi,:root[data-area="admin"] .hero,
:root[data-area="admin"] .c2-tblwrap,:root[data-area="admin"] .gs-kpi{border:0;border-radius:20px;box-shadow:var(--hig-sombra)}
:root[data-area="admin"] .kpi{box-shadow:var(--hig-sombra)}
:root[data-area="admin"] .vg-gg{border:0;border-radius:20px;box-shadow:var(--hig-sombra)}
:root[data-area="admin"] .vg-gg:hover{box-shadow:var(--hig-sombra-hover)}
:root[data-area="admin"] .card-t{font-size:17px;line-height:23px;font-weight:700;letter-spacing:-.015em}
:root[data-area="admin"] .g-resp-s,:root[data-area="admin"] .hj-ics,:root[data-area="admin"] .vg-saude-leg,
:root[data-area="admin"] .card-h p,:root[data-area="admin"] .card-s{font-size:14px;line-height:20px;color:var(--texto-4)}
:root[data-area="admin"] .empty{font-size:15px;color:var(--texto-4)}
:root[data-area="admin"] .vg-op,:root[data-area="admin"] .vg-at-loja{background:var(--hig-preench);border-radius:14px}
:root[data-area="admin"] .vg-at-loja:hover{background:var(--hig-preench-hover)}
:root[data-area="admin"] .vg-at-loja b{font-size:15px}

/* ── CLAREZA · KPI: número em destaque, rótulo discreto ───────────────────────────── */
:root[data-area="admin"] .kpi-top{font-size:14px;font-weight:500;color:var(--texto-4)}
:root[data-area="admin"] .kpi-val{font-size:29px;line-height:34px;font-weight:700;letter-spacing:-.02em;margin-top:10px}
:root[data-area="admin"] .kpi-cmp{font-size:14px}
:root[data-area="admin"] .kpi-sub{font-size:13px;color:var(--texto-4)}
:root[data-area="admin"] svg.g-seg .g-seg-v{letter-spacing:-.02em}
:root[data-area="admin"] .gs-kpi .l{font-size:13px;color:var(--texto-4)}

/* status: pílula com palavra, um pouco maior para ler */
:root[data-area="admin"] .badge,:root[data-area="admin"] .g-pil{height:26px;font-size:13px;border-radius:999px;padding:0 10px}

/* ── listas e tabelas: separador fino, cabeçalho sem faixa ────────────────────────── */
:root[data-area="admin"] .alert-card{border-bottom:1px solid var(--hig-sep);background:transparent}
:root[data-area="admin"] .alert-card .top b{font-size:15px}
:root[data-area="admin"] .alert-card .msg{font-size:14px;color:var(--texto-4)}
:root[data-area="admin"] .alert-card .alert-time{font-size:13px;color:var(--texto-4)}
:root[data-area="admin"] .c2-row:hover{background:var(--hig-hover)}

/* ── controle segmentado no padrão Apple: trilho cinza, botão branco elevado ──────── */
:root[data-area="admin"] .seg,:root[data-area="admin"] .cfg-abas,:root[data-area="admin"] .gs-seg,:root[data-area="admin"] .dc-seg,
:root[data-area="admin"] .vg-chips{background:var(--hig-preench)!important;border:0!important;border-radius:12px;padding:3px;gap:2px}
:root[data-area="admin"] .cfg-abas button,:root[data-area="admin"] .gs-seg button,:root[data-area="admin"] .dc-seg button,
:root[data-area="admin"] .vg-chip{border:0!important;background:transparent!important;border-radius:9px;color:var(--texto)!important;font-weight:500;
  transition:background-color .25s var(--hig-mola),box-shadow .25s var(--hig-mola)}
:root[data-area="admin"] .cfg-abas button{font-size:14px}
:root[data-area="admin"] .cfg-abas button.on,:root[data-area="admin"] .gs-seg button.on,:root[data-area="admin"] .dc-seg button.on,
:root[data-area="admin"] .vg-chip.on{background:var(--hig-botao-on)!important;color:var(--texto)!important;font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
:root[data-area="admin"] .vg-chip{font-size:13px}
:root[data-area="admin"] .vg-chip span{font-size:12px;color:var(--texto-4)}
/* sub-abas do detalhe (dsub): o ativo deixa de ser um bloco azul e vira o botão elevado */
:root[data-area="admin"] .dsub{background:var(--hig-preench);border-radius:12px;padding:3px;gap:2px;width:max-content;max-width:100%}
:root[data-area="admin"] .dsub-b{height:32px;border-radius:9px;font-size:14px;color:var(--texto);background:transparent}
:root[data-area="admin"] .dsub-b:hover{background:var(--hig-hover)}
:root[data-area="admin"] .dsub-b.on{background:var(--hig-botao-on);color:var(--texto);border-color:transparent;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}

/* ── botões em cápsula, campos com preenchimento cinza ────────────────────────────── */
:root[data-area="admin"] .btn-back,:root[data-area="admin"] .btn-menu,:root[data-area="admin"] .det-rel-b,
:root[data-area="admin"] .hdr-sino,:root[data-area="admin"] .act,:root[data-area="admin"] .btn-soft,:root[data-area="admin"] .hero button,
:root[data-area="admin"] .btn-primary{border-radius:999px}
:root[data-area="admin"] .btn-back,:root[data-area="admin"] .det-rel-b,:root[data-area="admin"] .hdr-sino,
:root[data-area="admin"] .btn-menu{background:var(--hig-preench);border-color:transparent;font-size:14px}
:root[data-area="admin"] .btn-back:hover,:root[data-area="admin"] .det-rel-b:hover,
:root[data-area="admin"] .hdr-sino:hover,:root[data-area="admin"] .btn-menu:hover{background:var(--hig-preench-hover)}
:root[data-area="admin"] .btn-menu,:root[data-area="admin"] .hdr-sino{border-radius:50%;width:38px;height:38px;padding:0;display:inline-grid;place-items:center}
:root[data-area="admin"] .act:not(.blue),:root[data-area="admin"] .btn-soft,:root[data-area="admin"] .hero button,
:root[data-area="admin"] .act:not(.blue):not(:disabled):hover,:root[data-area="admin"] .btn-soft:hover,:root[data-area="admin"] .hero button:hover,
:root[data-area="admin"] .act:disabled{background:var(--hig-preench);opacity:.55}
:root[data-area="admin"] .btn-back:active,:root[data-area="admin"] .det-rel-b:active,
:root[data-area="admin"] .act:not(:disabled):active,:root[data-area="admin"] .btn-soft:active,:root[data-area="admin"] .btn-primary:active{transform:scale(.96)}
:root[data-area="admin"] .wrap select,:root[data-area="admin"] .wrap input[type="text"],:root[data-area="admin"] .wrap input[type="number"],
:root[data-area="admin"] .wrap input[type="email"],:root[data-area="admin"] .wrap input[type="date"],:root[data-area="admin"] .wrap input[type="search"],
:root[data-area="admin"] .wrap input[type="tel"],:root[data-area="admin"] .wrap textarea,
:root[data-area="admin"] .modal select,:root[data-area="admin"] .modal input[type="text"],:root[data-area="admin"] .modal input[type="number"],
:root[data-area="admin"] .modal input[type="date"],:root[data-area="admin"] .modal textarea{
  border:0;border-radius:12px;background-color:var(--hig-preench);font-size:15px;min-height:40px}
:root[data-area="admin"] .wrap select:focus-visible,:root[data-area="admin"] .wrap input:focus-visible,:root[data-area="admin"] .wrap textarea:focus-visible,
:root[data-area="admin"] .modal select:focus-visible,:root[data-area="admin"] .modal input:focus-visible,:root[data-area="admin"] .modal textarea:focus-visible{
  background-color:var(--superficie);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 25%,transparent);outline:none}

/* ── PROFUNDIDADE 3 · janela e gaveta como folhas por cima, fundo desfocado ────────── */
:root[data-area="admin"] .ovl{background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root[data-area="admin"] .modal{border-radius:26px;box-shadow:var(--hig-folha-sombra);animation:higFolha .42s var(--hig-mola)}
:root[data-area="admin"] .modal-h h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
:root[data-area="admin"] .modal-tag{font-size:12px;border-radius:999px;padding:3px 10px}
:root[data-area="admin"] .modal-x{border-radius:50%;background:var(--hig-preench)}
:root[data-area="admin"] .modal-x:hover{background:var(--hig-preench-hover)}
/* caixa de entrada do sino: gaveta flutuante; no celular sobe de baixo */
:root[data-area="admin"] .cx-veu{background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root[data-area="admin"] .cx{top:12px;right:12px;bottom:12px;width:min(470px,calc(100vw - 24px));border:0;border-radius:26px;overflow:hidden;
  box-shadow:var(--hig-folha-sombra);transform:translateX(calc(100% + 24px));transition:transform .45s var(--hig-mola)}
:root[data-area="admin"] body.cx-on .cx{transform:none}
:root[data-area="admin"] .cx-h h2{font-size:20px;letter-spacing:-.015em}
:root[data-area="admin"] .cx-h p{font-size:14px;color:var(--texto-4)}
:root[data-area="admin"] .cx-filtros button{border:0;background:var(--hig-preench);font-size:13px;padding:6px 12px}
:root[data-area="admin"] .cx-filtros button.on{background:var(--acento)}
:root[data-area="admin"] .cx-item{border:0;border-radius:16px;box-shadow:var(--hig-sombra)}
:root[data-area="admin"] .cx-item h4{font-size:15px}
:root[data-area="admin"] .cx-item p{font-size:14px}
/* menus suspensos: folha leve com o mesmo vidro da navegação */
:root[data-area="admin"] .lj-pop{border-radius:16px;border:1px solid var(--hig-sep)}
@keyframes higFolha{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}

/* ── RESPIRO (pedido do Biel, 22/10: "informação muito junta, texto pequeno, poluição…
      quero margem, mesmo que as seções precisem ser maiores") ───────────────────────────
   Mais margem na página, mais espaço entre e dentro dos blocos, texto mínimo de 15px no que
   se lê, menos colunas por linha. A seção fica mais alta de propósito. */
:root[data-area="admin"] body{line-height:1.5}
:root[data-area="admin"] .wrap{max-width:1360px;padding:36px 48px 104px;gap:32px}
:root[data-area="admin"] .card{padding:28px 32px}
:root[data-area="admin"] .kpi{padding:24px 24px 20px}
:root[data-area="admin"] .hero{padding:22px 28px}
:root[data-area="admin"] .g-cab,:root[data-area="admin"] .card-h{margin-bottom:22px}
:root[data-area="admin"] .grid-kpi,:root[data-area="admin"] .cols-2,:root[data-area="admin"] .cols-2-1,:root[data-area="admin"] .vg-topo,
:root[data-area="admin"] .vg-grade,:root[data-area="admin"] .det-kpis,:root[data-area="admin"] .dcr,:root[data-area="admin"] .dv-tiles,
:root[data-area="admin"] .vg-gauges,:root[data-area="admin"] .vg-rings,:root[data-area="admin"] .gs-split,:root[data-area="admin"] .gs-kpis{gap:24px}
:root[data-area="admin"] .vg-grade{margin-bottom:24px}
:root[data-area="admin"] .hj-ind .grid-kpi.hj-grade{margin-bottom:0}
:root[data-area="admin"] .vg-at-lista{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
:root[data-area="admin"] .vg-at-loja{padding:14px 18px}
/* o que se LÊ: 15px, linha folgada e medida curta (texto longo cansa em linha comprida) */
:root[data-area="admin"] .card-t{font-size:19px;line-height:26px}
:root[data-area="admin"] .g-resp-s,:root[data-area="admin"] .card-h p,:root[data-area="admin"] .card-s,:root[data-area="admin"] .vg-saude-leg{
  font-size:15px;line-height:23px;max-width:72ch}
:root[data-area="admin"] .g-resp{font-size:16px;line-height:25px;max-width:72ch}
:root[data-area="admin"] .kpi-top{font-size:15px}
:root[data-area="admin"] .kpi-cmp{font-size:14px;margin-top:14px}
:root[data-area="admin"] .kpi-sub{font-size:14px;margin-top:6px}
:root[data-area="admin"] .alert-card{padding:20px 24px;min-height:84px}
:root[data-area="admin"] .alert-card .msg{font-size:15px;line-height:22px}
:root[data-area="admin"] .cx-item{padding:18px 18px 16px 20px;margin-bottom:12px}
:root[data-area="admin"] .modal{padding:32px 34px}
/* Gestão Semanal (.gs-* fora do #grupo-sv): o miúdo sobe para 13px, o que explica para 14px */
:root[data-area="admin"] .gs-kpi{padding:18px 20px}
:root[data-area="admin"] .gs-kpi .l{font-size:12.5px}
:root[data-area="admin"] .gs-kpi .s,:root[data-area="admin"] .gs-n .l,:root[data-area="admin"] .gs-meta,:root[data-area="admin"] .gs-semimg,
:root[data-area="admin"] .gs-princ-l,:root[data-area="admin"] .gs-princ-desde,:root[data-area="admin"] .gs-grade,:root[data-area="admin"] .gs-conf span,
:root[data-area="admin"] .gs-mx-tab,:root[data-area="admin"] .gs-reler-prog{font-size:13px}
:root[data-area="admin"] .gs-avisos-txt,:root[data-area="admin"] .gs-linha,:root[data-area="admin"] .gs-prod-txt,:root[data-area="admin"] .gs-palpite,
:root[data-area="admin"] .gs-nada,:root[data-area="admin"] .gs-pl-txt>span,:root[data-area="admin"] .gs-conf b,:root[data-area="admin"] .gs-mx-aviso{font-size:14px;line-height:1.5}
:root[data-area="admin"] .gs-bloco-h{font-size:13px;margin-bottom:10px}
/* Diário do cliente: calendário e painel lateral com texto que se lê */
:root[data-area="admin"] .dc-seg button{font-size:13px;padding:7px 12px}
:root[data-area="admin"] .dc-ctl label{font-size:13px}
:root[data-area="admin"] .dc-h{font-size:12px}
:root[data-area="admin"] .dc-d .l,:root[data-area="admin"] .dc-w{font-size:13px}
:root[data-area="admin"] .dc-d .nt{font-size:12.5px}
:root[data-area="admin"] .dc-w .v{font-size:16px}
:root[data-area="admin"] .dc-leg{font-size:14px}
:root[data-area="admin"] .dc-nav button{border:0;background:var(--hig-preench);border-radius:50%}
:root[data-area="admin"] .dc-p-r,:root[data-area="admin"] .dc-nota p{font-size:15px}
:root[data-area="admin"] .dc-nota small,:root[data-area="admin"] .dc-ef-r{font-size:13.5px}
:root[data-area="admin"] .dc-form select,:root[data-area="admin"] .dc-form textarea{border:0;background:var(--hig-preench);border-radius:12px;font-size:15px}
/* Grupo SV: o estilo mora no grupo-sv.js (#grupo-sv …); aqui só o tamanho do texto e a superfície */
:root[data-area="admin"] #grupo-sv .gs-leg{font-size:14px;gap:18px;margin-bottom:16px}
:root[data-area="admin"] #grupo-sv .gs-nav b{font-size:20px;font-weight:700;letter-spacing:-.015em}
:root[data-area="admin"] #grupo-sv .gs-nav button{border:0;background:var(--hig-preench);border-radius:50%;width:34px;height:34px}
:root[data-area="admin"] #grupo-sv .gs-cal{gap:10px;margin-top:16px}
:root[data-area="admin"] #grupo-sv .gs-h{font-size:13px;opacity:1;color:var(--texto-4);font-weight:600}
:root[data-area="admin"] #grupo-sv .gs-d{min-height:104px;border:0;border-radius:16px;padding:10px 12px;gap:4px;background:var(--superficie);box-shadow:var(--hig-sombra)}
:root[data-area="admin"] #grupo-sv .gs-d:hover{box-shadow:0 0 0 2px var(--acento),var(--hig-sombra)}
:root[data-area="admin"] #grupo-sv .gs-d.fora{background:transparent;box-shadow:none}
:root[data-area="admin"] #grupo-sv .gs-d .n{font-size:15px;font-weight:700}
:root[data-area="admin"] #grupo-sv .gs-d .r{font-size:13px}
:root[data-area="admin"] #grupo-sv .gs-det{border:0;border-radius:20px;padding:22px 24px;background:var(--superficie);box-shadow:var(--hig-sombra)}
:root[data-area="admin"] #grupo-sv .gs-det h3{font-size:18px}
:root[data-area="admin"] #grupo-sv .gs-tile{border-radius:14px;padding:12px 14px;background:var(--hig-preench);font-size:14px}
:root[data-area="admin"] #grupo-sv .gs-tile b{font-size:15px}
:root[data-area="admin"] #grupo-sv .gs-nota{font-size:15px;line-height:1.5;padding:12px 0}
:root[data-area="admin"] #grupo-sv .gs-cat,:root[data-area="admin"] #grupo-sv .gs-esc,:root[data-area="admin"] #grupo-sv .gs-rod{font-size:13px;opacity:1;color:var(--texto-4)}
@media (max-width:1320px){
  :root[data-area="admin"] .wrap{padding:28px 32px 96px}
  :root[data-area="admin"] .card{padding:24px 26px}
}

/* ── celular ───────────────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  :root[data-area="admin"] body,:root[data-area="admin"] #view-app{background:var(--hig-fundo)}
  :root[data-area="admin"] .header{background:var(--hig-vidro-topo);border-radius:0 0 22px 22px;
    -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
  :root[data-area="admin"] .kpi-val{font-size:23px;line-height:28px;letter-spacing:-.02em;overflow-wrap:anywhere}
  :root[data-area="admin"] .wrap{padding:20px 16px calc(104px + env(safe-area-inset-bottom));gap:24px}
  :root[data-area="admin"] .kpi{padding:16px}
  :root[data-area="admin"] .card{padding:22px 18px}
  :root[data-area="admin"] .grid-kpi,:root[data-area="admin"] .det-kpis,:root[data-area="admin"] .vg-grade,:root[data-area="admin"] .vg-topo,
  :root[data-area="admin"] .cols-2,:root[data-area="admin"] .cols-2-1{gap:14px}
  :root[data-area="admin"] .card-t{font-size:18px;line-height:24px}
  :root[data-area="admin"] .kpi-top{font-size:14px}
  :root[data-area="admin"] .modal{padding:24px 20px}
  :root[data-area="admin"] .tabbar{background:var(--hig-vidro);border-top:1px solid var(--hig-vidro-borda);
    -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);box-shadow:0 -6px 24px rgba(0,0,0,.05)}
  :root[data-area="admin"] .tabbar .nav-item,:root[data-area="admin"] .tabbar .tab{font-size:11px}
  :root[data-area="admin"] .cx{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:88vh;transform:translateY(calc(100% + 16px))}
  :root[data-area="admin"] body.cx-on .cx{transform:none}
  :root[data-area="admin"] .ovl{align-items:flex-end;padding:8px}
  :root[data-area="admin"] .modal{border-radius:26px;max-height:88vh;animation:higSobe .45s var(--hig-mola)}
  :root[data-area="admin"] .dsub{width:auto}
  /* calendário de 7 colunas em 343px: cada dia tem ~45px, o texto volta ao tamanho que cabe */
  :root[data-area="admin"] #grupo-sv .gs-cal{gap:4px}
  :root[data-area="admin"] #grupo-sv .gs-d{min-height:78px;padding:6px 5px;border-radius:12px}
  :root[data-area="admin"] #grupo-sv .gs-d .n{font-size:13px}
  :root[data-area="admin"] #grupo-sv .gs-d .r{font-size:11px}
  :root[data-area="admin"] #grupo-sv .gs-h{font-size:12px}
}
@keyframes higSobe{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* ── acessibilidade: menos transparência → sólido; sem backdrop-filter → sólido ───── */
@media (prefers-reduced-transparency:reduce){
  :root[data-area="admin"] .sidebar,:root[data-area="admin"] .header,:root[data-area="admin"] .tabbar,
  :root[data-area="admin"] .vg-abas,:root[data-area="admin"] .cli-abas{background:var(--superficie);-webkit-backdrop-filter:none;backdrop-filter:none}
  :root[data-area="admin"] body::before{display:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-area="admin"] .sidebar,:root[data-area="admin"] .tabbar{background:var(--superficie)}
  :root[data-area="admin"] .header,:root[data-area="admin"] .vg-abas,:root[data-area="admin"] .cli-abas{background:var(--hig-fundo)}
}
@media (prefers-reduced-motion:reduce){
  :root[data-area="admin"] .modal,:root[data-area="admin"] .cx,:root[data-area="admin"] .sidebar{animation:none!important;transition:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   ACABAMENTO PROFISSIONAL (22/10/2026, revisão do ChatGPT a pedido do Biel: "que não pareça
   vibe code"). Fica por último e vence o que veio antes. Adotado da revisão: rigor de produto
   financeiro (contorno fino em vez de sombra de app, raio menor, cor só para sinal e seleção,
   verde AEC como cor de seleção, números tabulares, hierarquia de KPI, faixa de integridade
   compacta, minigráfico neutro). NÃO adotado: texto de 12–13px e espaço apertado — contraria o
   pedido do Biel de texto maior e mais margem.
   ══════════════════════════════════════════════════════════════════════════════════════ */
:root[data-area="admin"]{
  --pro-canvas:#f6f7f9; --pro-borda:#e4e7ec; --pro-borda-forte:#cfd4dc;
  --pro-texto-2:#4b5563; --pro-marca:#01332b; --pro-marca-suave:rgba(1,51,43,.07); --pro-marca-texto:#01332b;
  --pro-neutro-graf:#8a94a6; --pro-sombra:0 1px 2px rgba(16,24,40,.04);
  --pro-aviso-fundo:#fff8ea; --pro-aviso-borda:#ecd9a9; --pro-aviso-texto:#6b4a00;
  --fundo:var(--pro-canvas); --hig-fundo:var(--pro-canvas);
  --texto-4:#535b67; --texto-5:#5f6773;
}
@media (prefers-color-scheme: dark){
  :root[data-area="admin"]:not([data-tema="claro"]){
    --pro-canvas:#0e1013; --pro-borda:#262a31; --pro-borda-forte:#363b44;
    --pro-texto-2:#b6bdc8; --pro-marca:#2f8f78; --pro-marca-suave:rgba(99,182,160,.12); --pro-marca-texto:#7cc9b4;
    --pro-neutro-graf:#7d8796; --pro-sombra:none;
    --pro-aviso-fundo:#2e2616; --pro-aviso-borda:#4a3c1d; --pro-aviso-texto:#f0c46d;
    --texto-4:#a3abb7; --texto-5:#949cab;
  }
}
:root[data-area="admin"][data-tema="escuro"]{
  --pro-canvas:#0e1013; --pro-borda:#262a31; --pro-borda-forte:#363b44;
  --pro-texto-2:#b6bdc8; --pro-marca:#2f8f78; --pro-marca-suave:rgba(99,182,160,.12); --pro-marca-texto:#7cc9b4;
  --pro-neutro-graf:#7d8796; --pro-sombra:none;
  --pro-aviso-fundo:#2e2616; --pro-aviso-borda:#4a3c1d; --pro-aviso-texto:#f0c46d;
  --texto-4:#a3abb7; --texto-5:#949cab;
}

/* tipografia: uma família só (Inter), algarismos tabulares em todo número */
:root[data-area="admin"] body{font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-feature-settings:"cv11" 1;letter-spacing:-.006em}
:root[data-area="admin"] .kpi-val,:root[data-area="admin"] .badge,:root[data-area="admin"] .g-pil,
:root[data-area="admin"] .dc-d .v,:root[data-area="admin"] .dc-d .l,:root[data-area="admin"] .dc-w,:root[data-area="admin"] .kpi-cmp,
:root[data-area="admin"] .per-tira,:root[data-area="admin"] .c2-tbl,:root[data-area="admin"] .alert-card .alert-time,:root[data-area="admin"] #grupo-sv .gs-d{
  font-variant-numeric:tabular-nums lining-nums}
:root[data-area="admin"] .h-title{font-size:26px;font-weight:650;letter-spacing:-.03em}
:root[data-area="admin"] .card-t{font-size:18px;font-weight:650;letter-spacing:-.02em}

/* fundo neutro, sem luz decorativa */
:root[data-area="admin"] body{background:var(--pro-canvas)}
:root[data-area="admin"] body::before{display:none}

/* superfícies: contorno fino, raio 14, quase sem sombra (sombra só no que flutua) */
:root[data-area="admin"] .card,:root[data-area="admin"] .kpi,:root[data-area="admin"] .hero,
:root[data-area="admin"] .c2-tblwrap,:root[data-area="admin"] .gs-kpi,:root[data-area="admin"] .vg-gg,:root[data-area="admin"] #grupo-sv .gs-det{
  border:1px solid var(--pro-borda);border-radius:14px;box-shadow:var(--pro-sombra)}
:root[data-area="admin"] .vg-gg:hover,:root[data-area="admin"] .kpi-link:hover{border-color:var(--pro-borda-forte);box-shadow:var(--pro-sombra)}
:root[data-area="admin"] .vg-op{border-radius:10px}
:root[data-area="admin"] .cx-item{border:1px solid var(--pro-borda);border-radius:12px;box-shadow:none}
:root[data-area="admin"] #grupo-sv .gs-d{border:1px solid var(--pro-borda);border-radius:10px;box-shadow:none}
:root[data-area="admin"] #grupo-sv .gs-d:hover{border-color:var(--pro-borda-forte);box-shadow:none}
:root[data-area="admin"] #grupo-sv .gs-d.fora{border-color:transparent}

/* faixa "dados até 27/09": controle de integridade, não aviso de app */
:root[data-area="admin"] .cobertura{min-height:40px;padding:10px 14px;border-radius:10px;border:1px solid var(--pro-aviso-borda);
  background:var(--pro-aviso-fundo);color:var(--pro-aviso-texto);font-size:14px;font-weight:500;line-height:20px}

/* menu lateral: preso à borda, sóbrio; item ativo com o verde AEC e traço de 2px */
@media (min-width:1024px){
  :root[data-area="admin"] .sidebar{margin:0;height:100vh;border-radius:0;border:0;border-right:1px solid var(--pro-borda);
    background:color-mix(in srgb,var(--superficie) 88%,transparent);box-shadow:none}
}
:root[data-area="admin"] .sidebar .nav-item{min-height:40px;border-radius:8px;font-weight:500}
:root[data-area="admin"] .sidebar .nav-item.on{background:var(--pro-marca-suave);color:var(--pro-marca-texto);font-weight:600;box-shadow:inset 2px 0 0 var(--pro-marca)}
:root[data-area="admin"] .sidebar .nav-item.on svg{color:var(--pro-marca-texto)}
:root[data-area="admin"] .sidebar .nav-item:not(.on) svg{color:var(--texto-4)}
:root[data-area="admin"] .nav-grupo{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
:root[data-area="admin"] .side-brand .logo{border-radius:9px;box-shadow:none}
:root[data-area="admin"] .header{background:color-mix(in srgb,var(--pro-canvas) 86%,transparent);border-bottom:1px solid var(--pro-borda)}

/* abas: traço em verde AEC */
:root[data-area="admin"] .cli-aba.on::after{background:var(--pro-marca)!important}
:root[data-area="admin"] .vg-abas button[aria-selected="true"]{border-bottom-color:var(--pro-marca)}
:root[data-area="admin"] .vg-abas,:root[data-area="admin"] .cli-abas{border-bottom-color:var(--pro-borda);background:color-mix(in srgb,var(--pro-canvas) 86%,transparent)}

/* controles: raio 10, sem cápsula de app de consumo */
:root[data-area="admin"] .btn-back,:root[data-area="admin"] .det-rel-b,:root[data-area="admin"] .act,
:root[data-area="admin"] .btn-soft,:root[data-area="admin"] .hero button,:root[data-area="admin"] .btn-primary{border-radius:10px}
:root[data-area="admin"] .btn-back,:root[data-area="admin"] .det-rel-b{background:var(--superficie);border:1px solid var(--pro-borda);height:36px}
:root[data-area="admin"] .btn-back:hover,:root[data-area="admin"] .det-rel-b:hover{background:var(--superficie);border-color:var(--pro-borda-forte)}
:root[data-area="admin"] .btn-menu,:root[data-area="admin"] .hdr-sino{border-radius:10px;width:36px;height:36px;background:var(--superficie);border:1px solid var(--pro-borda)}
:root[data-area="admin"] .act.blue,:root[data-area="admin"] .btn-primary{background:var(--pro-marca);border-color:var(--pro-marca);color:#fff}
:root[data-area="admin"] .act.blue:hover{background:color-mix(in srgb,var(--pro-marca) 88%,#000)}
:root[data-area="admin"] .seg,:root[data-area="admin"] .cfg-abas,:root[data-area="admin"] .gs-seg,:root[data-area="admin"] .dc-seg,
:root[data-area="admin"] .vg-chips,:root[data-area="admin"] .dsub{border-radius:10px!important}
:root[data-area="admin"] .cfg-abas button,:root[data-area="admin"] .gs-seg button,:root[data-area="admin"] .dc-seg button,
:root[data-area="admin"] .vg-chip,:root[data-area="admin"] .dsub-b{border-radius:8px!important}
:root[data-area="admin"] .wrap select,:root[data-area="admin"] .wrap input[type="text"],:root[data-area="admin"] .wrap input[type="number"],
:root[data-area="admin"] .wrap input[type="date"],:root[data-area="admin"] .wrap input[type="search"],:root[data-area="admin"] .wrap textarea{
  border-radius:10px;background-color:var(--superficie);border:1px solid var(--pro-borda)}

/* KPI: rótulo discreto, variação como texto (sem cápsula), hierarquia em três degraus */
:root[data-area="admin"] .kpi-top{font-size:14px;font-weight:600;color:var(--pro-texto-2)}
:root[data-area="admin"] .kpi .badge{background:transparent!important;padding:0;height:auto;font-size:13.5px;font-weight:600;border-radius:0}
:root[data-area="admin"] .kpi-val{font-weight:650;letter-spacing:-.03em}
:root[data-area="admin"] .hj-grade:not(.hj-grade-2)>.kpi .kpi-val{font-size:32px;line-height:38px}
:root[data-area="admin"] .hj-grade-2>.kpi .kpi-val{font-size:24px;line-height:30px}
:root[data-area="admin"] .hj-grade-2>.kpi .kpi-top{color:var(--texto-4)}
/* "Mais indicadores" (cliente-hoje.js · hojeIndicadores): os 12 que não são de decisão, recolhidos */
:root[data-area="admin"] .hj-ind{margin-bottom:32px}
:root[data-area="admin"] .hj-ind .grid-kpi.hj-grade{margin-bottom:0}
:root[data-area="admin"] .hj-mais{margin-top:16px}
:root[data-area="admin"] .hj-mais>summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:15px;font-weight:600;
  color:var(--pro-marca-texto);padding:8px 14px;border:1px solid var(--pro-borda);border-radius:10px;background:var(--superficie)}
:root[data-area="admin"] .hj-mais>summary::-webkit-details-marker{display:none}
:root[data-area="admin"] .hj-mais>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
:root[data-area="admin"] .hj-mais[open]>summary::after{transform:rotate(-135deg) translateX(-2px)}
:root[data-area="admin"] .hj-mais>summary span{font-weight:500;color:var(--texto-4)}
:root[data-area="admin"] .hj-mais[open]>.hj-grade-2{margin-top:16px}

/* "Precisam de atenção": lista com divisores e status em texto, não oito pílulas rosa */
:root[data-area="admin"] .vg-at-lista{gap:0 32px}
:root[data-area="admin"] .vg-at-loja{background:transparent;border-radius:0;border-bottom:1px solid var(--pro-borda);padding:12px 2px;min-height:48px}
:root[data-area="admin"] .vg-at-loja:hover{background:transparent}
:root[data-area="admin"] .vg-at-loja:hover b{color:var(--acento-texto)}
:root[data-area="admin"] .vg-at-loja .g-pil{background:transparent;padding:0;height:auto}
/* status em geral: a pílula fica, mas sem preenchimento forte */
:root[data-area="admin"] .badge,:root[data-area="admin"] .g-pil{border-radius:6px}

/* Metas: estado vazio sem ícone grande */

/* Diário: vermelho mais leve, fim de semana neutro */
:root[data-area="admin"] .dc-cal{border-color:var(--pro-borda);background:var(--pro-borda);border-radius:12px}
:root[data-area="admin"] .dc-d.fds{background:var(--superficie)}
:root[data-area="admin"] .dc-d.mal{background:color-mix(in srgb,var(--erro) 7%,var(--superficie));box-shadow:inset 2px 0 0 var(--erro)}
:root[data-area="admin"] .dc-d .v{font-size:17px;font-weight:650}

/* folhas: raio um pouco menor, sombra só aqui (é o que realmente flutua) */
:root[data-area="admin"] .modal{border-radius:18px}
:root[data-area="admin"] .cx{border-radius:18px}

/* celular: botão Voltar só com a seta (não quebra em duas linhas), cabeçalho mais baixo */
@media (max-width:767px){
  :root[data-area="admin"] .btn-back{font-size:0;width:36px;padding:0;justify-content:center;flex:0 0 36px}
  :root[data-area="admin"] .btn-back svg{width:18px;height:18px}
  :root[data-area="admin"] .header{border-radius:0}
  :root[data-area="admin"] .h-title{font-size:20px;line-height:26px}
  :root[data-area="admin"] .hj-grade:not(.hj-grade-2)>.kpi .kpi-val{font-size:24px;line-height:30px}
  :root[data-area="admin"] .hj-grade-2>.kpi .kpi-val{font-size:20px;line-height:26px}
  :root[data-area="admin"] .sidebar{border-radius:16px}
  :root[data-area="admin"] .modal,:root[data-area="admin"] .cx{border-radius:18px}
  :root[data-area="admin"] .vg-at-lista{gap:0}
}
/* seleção e ação principal no verde AEC também no celular e na caixa do sino */
:root[data-area="admin"] .cx-filtros button.on{background:var(--pro-marca);color:#fff}
@media (max-width:767px){
  :root[data-area="admin"] .tab-add{background:var(--pro-marca);color:#fff;box-shadow:0 6px 16px rgba(1,51,43,.25)}
  :root[data-area="admin"] .tabbar .on,:root[data-area="admin"] .tabbar .on svg{color:var(--pro-marca-texto)}
}
/* fila "Quem precisa de decisão?" (visao-geral.js · vgFila): nome · ROAS · situação */
:root[data-area="admin"] .vg-at-loja{grid-template-columns:1fr auto auto;gap:16px}
:root[data-area="admin"] .vg-at-num{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--texto)}
:root[data-area="admin"] .g-pil-neutro{background:transparent;color:var(--texto-4)}
:root[data-area="admin"] .g-pil-neutro i{background:var(--texto-5)}
/* ex-Gestão Semanal no fim de Anúncios: uma coluna só (o painel de estoque saiu; ruptura mora em Produtos) */
:root[data-area="admin"] .gs-na-aba{margin-top:8px}
:root[data-area="admin"] .gs-sec-t{margin:8px 0 16px}
:root[data-area="admin"] .gs-split.gs-uma{grid-template-columns:minmax(0,1fr)}

/* ── TELA LARGA (23/10/2026, pedido do Biel: "minha tela é widescreen, não limite as margens") ──
   O conteúdo ocupa a largura toda; a margem lateral cresce com a tela (3,2% da largura, entre
   24 e 64px) em vez de um teto fixo de 1360px que sobrava como faixa vazia no monitor largo.
   Texto corrido continua com medida curta (72ch, nas regras de respiro): linha comprida cansa. */
:root[data-area="admin"] .wrap{max-width:none;padding-left:clamp(24px,2.6vw,56px);padding-right:clamp(24px,2.6vw,56px)}
/* tabela de clientes inteira a partir de ~1900px: criativo com espaço para as miniaturas (60px
   cortava 2–3 capas), vãos e margens menores; abaixo disso ela rola de lado, como já rolava */
:root[data-area="admin"] .c2-tbl{--cols:30px minmax(142px,1.5fr) 124px 96px 78px 108px 118px 84px 92px 78px 104px 104px 92px 120px;min-width:1520px}
:root[data-area="admin"] .c2-row>[data-thumbs]{overflow:hidden;max-width:100%}
:root[data-area="admin"] .c2-thead,:root[data-area="admin"] .c2-row{gap:10px;padding:0 14px}
:root[data-area="admin"] .card:has(.c2-tblwrap){padding-left:24px;padding-right:24px}
/* número de tabela não quebra em duas linhas ("R$ / 349,55") — a tabela rola de lado se faltar espaço */
:root[data-area="admin"] .c2-num,:root[data-area="admin"] .c2-roas{white-space:nowrap}
@media (max-width:767px){
  :root[data-area="admin"] .wrap{padding-left:16px;padding-right:16px}
}

/* ── TABELA DAS CONTAS legível (23/10/2026, Biel: "informações juntas demais, a altura da linha
   pode confundir dados, cores intercaladas sutis") ─────────────────────────────────────────────
   Linha mais alta, a variação embaixo do número com folga, e uma linha sim outra não com um
   fundo quase imperceptível — o olho segue a loja da esquerda à direita sem pular de linha. */
:root[data-area="admin"] .c2-row{padding:18px 14px;min-height:76px}
:root[data-area="admin"] .c2-tbl>.c2-row:nth-child(even){background:color-mix(in srgb,var(--texto) 2.6%,var(--superficie))}
:root[data-area="admin"] .c2-tbl>.c2-row:hover{background:color-mix(in srgb,var(--pro-marca) 6%,var(--superficie))}
:root[data-area="admin"] .c2-num,:root[data-area="admin"] .c2-roas{font-size:15px;line-height:20px}
:root[data-area="admin"] .c2-num .c2-dm,:root[data-area="admin"] .c2-roas .c2-dm{display:block;margin:4px 0 0;font-size:12px;line-height:16px}
:root[data-area="admin"] .c2-nm b{font-size:15px}
:root[data-area="admin"] .c2-nm span{font-size:12.5px;margin-top:2px}
:root[data-area="admin"] .c2-thead{height:48px}
:root[data-area="admin"] .vg-ver-todas{margin-top:18px}

/* ── MENU "CONTAS" EM ÁRVORE (nav-contas.js) ────────────────────────────────────────────── */
:root[data-area="admin"] .nav-linha{display:flex;align-items:center;gap:2px}
:root[data-area="admin"] .nav-linha>.nav-item{flex:1;min-width:0}
:root[data-area="admin"] .nav-seta{flex:none;width:30px;height:30px;border:0;background:none;color:var(--texto-4);border-radius:8px;display:grid;place-items:center;cursor:pointer}
:root[data-area="admin"] .nav-seta:hover{background:var(--hig-hover);color:var(--texto)}
:root[data-area="admin"] .nav-seta svg{width:14px;height:14px;transition:transform .2s var(--hig-mola)}
:root[data-area="admin"] .nav-seta[aria-expanded="true"] svg{transform:rotate(90deg)}
:root[data-area="admin"] .nav-filhos{margin:2px 0 6px 21px;padding-left:10px;border-left:1px solid var(--pro-borda)}
:root[data-area="admin"] .nav-filhos.fechado{display:none}
:root[data-area="admin"] .nav-filhos.nav-n2{margin:0 0 4px 12px}
:root[data-area="admin"] .sidebar .nav-item.nav-sub,:root[data-area="admin"] .sidebar .nav-item.nav-conta{min-height:34px;font-size:14px;padding-top:6px;padding-bottom:6px}
:root[data-area="admin"] .sidebar .nav-conta{color:var(--pro-texto-2)}
:root[data-area="admin"] .nav-conta .nc-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
:root[data-area="admin"] .sidebar nav{overflow-y:auto;min-height:0;flex:1 1 auto}
#view-app.side-collapsed .nav-filhos,#view-app.side-collapsed .nav-seta{display:none}

/* ══════════════════════════════════════════════════════════════════════════════════════
   SISTEMA AEC · ESPECIFICAÇÃO PREMIUM (23/10/2026)
   Referências do Biel (dashboards fintech), especificado pelo GPT (conversa "Especificação
   Premium do Painel"). PALETA: neutro + índigo, escolhida pelo Biel em 23/10/2026 no lugar do
   terra/terreno da IDV ("as cores me incomodam demais"); valores do GPT (conversa "Logo SVG e
   paleta índigo"). Índigo é seleção, ícone, série principal e ação; ~85% da tela é neutra.
   Hanken Grotesk no operacional, Newsreader no título de página. Nada abaixo de 14px no que
   se lê. Cartão sem contorno no claro (sombra macia), com contorno no escuro (sombra não lê).
   Por ser o último bloco, vence os anteriores desta folha — que ficam até a consolidação.
   ══════════════════════════════════════════════════════════════════════════════════════ */
:root[data-area="admin"]{
  --aec-bg:#F5F6FA; --aec-surface:#FFFFFF; --aec-surface-alt:#EEF0F6; --aec-hover:#E8EBF5;
  --aec-text:#111827; --aec-text-2:#475569; --aec-muted:#64748B; --aec-border:#E2E5ED; --aec-border-strong:#CBD2DF;
  --aec-accent:#4338CA; --aec-accent-hover:#3730A3; --aec-accent-soft:#EEF2FF; --aec-accent-text:#3730A3;
  --aec-acao:#4338CA; --aec-acao-texto:#FFFFFF; --aec-acao-hover:#3730A3;
  --aec-zebra:#FAFBFD;
  --aec-sombra:0 6px 24px rgba(17,24,39,.05),0 1px 3px rgba(17,24,39,.03);
  --aec-sombra-hover:0 14px 36px rgba(17,24,39,.09);
  --aec-sombra-gaveta:0 24px 64px rgba(17,24,39,.18);
  --aec-card-borda:transparent;
  --aec-f-texto:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --aec-f-titulo:"Newsreader",Georgia,serif;
  /* os nomes que o painel já usa passam a apontar para a paleta nova */
  --fundo:var(--aec-bg); --hig-fundo:var(--aec-bg); --pro-canvas:var(--aec-bg);
  --superficie:var(--aec-surface); --superficie-2:var(--aec-surface-alt); --card:var(--aec-surface);
  --texto:var(--aec-text); --texto-2:#1F2937; --texto-3:var(--aec-text-2); --texto-4:var(--aec-text-2); --texto-5:var(--aec-muted);
  --pro-texto-2:var(--aec-text-2);
  --linha:var(--aec-border); --linha-suave:var(--aec-hover); --pro-borda:var(--aec-border); --pro-borda-forte:var(--aec-border-strong);
  --hig-preench:var(--aec-surface-alt); --hig-preench-hover:var(--aec-hover); --hig-hover:var(--aec-surface-alt); --controle-fundo:var(--aec-surface-alt);
  --pro-marca:var(--aec-accent); --pro-marca-suave:var(--aec-accent-soft); --pro-marca-texto:var(--aec-accent-text);
  --acento:var(--aec-accent); --acento-texto:var(--aec-accent-text); --acento-forte:var(--aec-accent-hover);
  --serie-1:#4F46E5; --serie-2:#0891B2;
  --ok-texto:#166534; --fundo-ok:#F0FDF4; --erro-texto:#B91C1C; --fundo-erro:#FEF2F2; --atencao-texto:#92400E; --fundo-atencao:#FFFBEB;
  --hig-sombra:var(--aec-sombra); --hig-sombra-hover:var(--aec-sombra-hover); --pro-sombra:var(--aec-sombra); --hig-folha-sombra:var(--aec-sombra-gaveta);
  --pro-aviso-fundo:#FFFBEB; --pro-aviso-borda:#FDE68A; --pro-aviso-texto:#92400E;
}
@media (prefers-color-scheme: dark){
  :root[data-area="admin"]:not([data-tema="claro"]){
    --aec-bg:#11131C; --aec-surface:#1B1E2B; --aec-surface-alt:#252938; --aec-hover:#303448;
    --aec-text:#F8FAFC; --aec-text-2:#CBD5E1; --aec-muted:#A1A1AA; --aec-border:#303448; --aec-border-strong:#475068;
    --aec-accent:#A5B4FC; --aec-accent-hover:#C7D2FE; --aec-accent-soft:#29264D; --aec-accent-text:#C7D2FE;
    --aec-acao:#4F46E5; --aec-acao-texto:#FFFFFF; --aec-acao-hover:#4338CA; --aec-zebra:#1F2231;
    --aec-sombra:none; --aec-sombra-hover:none; --aec-sombra-gaveta:0 24px 64px rgba(0,0,0,.55); --aec-card-borda:#303448;
    --texto-2:#E2E8F0; --serie-1:#A5B4FC; --serie-2:#67E8F9;
    --ok-texto:#86EFAC; --fundo-ok:#10261D; --erro-texto:#FCA5A5; --fundo-erro:#2B151C; --atencao-texto:#FCD34D; --fundo-atencao:#2B2110;
    --pro-aviso-fundo:#2B2110; --pro-aviso-borda:#4A3A16; --pro-aviso-texto:#FCD34D;
  }
}
:root[data-area="admin"][data-tema="escuro"]{
  --aec-bg:#11131C; --aec-surface:#1B1E2B; --aec-surface-alt:#252938; --aec-hover:#303448;
  --aec-text:#F8FAFC; --aec-text-2:#CBD5E1; --aec-muted:#A1A1AA; --aec-border:#303448; --aec-border-strong:#475068;
  --aec-accent:#A5B4FC; --aec-accent-hover:#C7D2FE; --aec-accent-soft:#29264D; --aec-accent-text:#C7D2FE;
  --aec-acao:#4F46E5; --aec-acao-texto:#FFFFFF; --aec-acao-hover:#4338CA; --aec-zebra:#1F2231;
  --aec-sombra:none; --aec-sombra-hover:none; --aec-sombra-gaveta:0 24px 64px rgba(0,0,0,.55); --aec-card-borda:#303448;
  --texto-2:#E2E8F0; --serie-1:#A5B4FC; --serie-2:#67E8F9;
  --ok-texto:#86EFAC; --fundo-ok:#10261D; --erro-texto:#FCA5A5; --fundo-erro:#2B151C; --atencao-texto:#FCD34D; --fundo-atencao:#2B2110;
  --pro-aviso-fundo:#2B2110; --pro-aviso-borda:#4A3A16; --pro-aviso-texto:#FCD34D;
}

/* tipografia */
:root[data-area="admin"] body{font-family:var(--aec-f-texto);font-size:16px;line-height:1.5;letter-spacing:0;font-feature-settings:normal;background:var(--aec-bg);color:var(--aec-text)}
:root[data-area="admin"] .h-title{font-family:var(--aec-f-titulo);font-size:36px;line-height:42px;font-weight:400;letter-spacing:-.012em}
:root[data-area="admin"] .h-sub{font-size:15px;line-height:22px;color:var(--aec-text-2)}
:root[data-area="admin"] .card-t{font-family:var(--aec-f-texto);font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.01em}
:root[data-area="admin"] .g-resp-s,:root[data-area="admin"] .card-s,:root[data-area="admin"] .card-h p{color:var(--aec-text-2)}

/* superfícies */
:root[data-area="admin"] .card,:root[data-area="admin"] .kpi,:root[data-area="admin"] .hero,:root[data-area="admin"] .gs-kpi,
:root[data-area="admin"] .vg-gg,:root[data-area="admin"] #grupo-sv .gs-det{background:var(--aec-surface);border:1px solid var(--aec-card-borda);border-radius:20px;box-shadow:var(--aec-sombra)}
:root[data-area="admin"] .kpi-link:hover,:root[data-area="admin"] .vg-gg:hover{box-shadow:var(--aec-sombra-hover);border-color:var(--aec-card-borda)}
:root[data-area="admin"] .card{padding:28px}
:root[data-area="admin"] .cobertura{border-radius:14px}

/* menu lateral */
@media (min-width:1024px){
  :root[data-area="admin"] .sidebar{width:288px;background:var(--aec-surface);border-right:1px solid var(--aec-border);padding:20px 14px}
}
:root[data-area="admin"] .side-brand{padding:6px 10px 24px}
:root[data-area="admin"] .side-brand .logo{background:var(--aec-acao);color:#fff}
:root[data-area="admin"] .sidebar .nav-item{min-height:44px;border-radius:12px;padding:10px 12px;gap:12px;font-size:15px;font-weight:500;color:var(--aec-text-2)}
:root[data-area="admin"] .sidebar .nav-item .ic,:root[data-area="admin"] .sidebar .nav-item svg{width:20px;height:20px;flex:0 0 20px;color:var(--aec-muted)}
:root[data-area="admin"] .sidebar .nav-item:hover{background:var(--aec-surface-alt);color:var(--aec-text)}
:root[data-area="admin"] .sidebar .nav-item.on{background:var(--aec-accent-soft);color:var(--aec-accent-text);font-weight:600;box-shadow:inset 3px 0 0 var(--aec-accent)}
:root[data-area="admin"] .sidebar .nav-item.on .ic,:root[data-area="admin"] .sidebar .nav-item.on svg{color:var(--aec-accent)}
:root[data-area="admin"] .nav-grupo{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--aec-muted);margin:24px 12px 6px}
:root[data-area="admin"] .sidebar .nav-item.nav-sub,:root[data-area="admin"] .sidebar .nav-item.nav-conta{min-height:38px;font-size:14.5px}
:root[data-area="admin"] .nav-filhos{border-left-color:var(--aec-border)}
:root[data-area="admin"] .sidebar .nav-discreto{min-height:38px;font-size:14px;color:var(--aec-muted)}
:root[data-area="admin"] .side-foot{border-top:1px solid var(--aec-border)}

/* cabeçalho, busca e botões-ícone */
:root[data-area="admin"] .header{min-height:80px;padding:16px clamp(24px,2.6vw,56px);background:color-mix(in srgb,var(--aec-bg) 90%,transparent);border-bottom:1px solid var(--aec-border);gap:16px}
:root[data-area="admin"] .btn-menu,:root[data-area="admin"] .hdr-sino{width:44px;height:44px;border-radius:12px;background:var(--aec-surface);border:1px solid var(--aec-border);color:var(--aec-text)}
:root[data-area="admin"] .btn-back,:root[data-area="admin"] .det-rel-b{height:44px;border-radius:12px;background:var(--aec-surface);border:1px solid var(--aec-border);font-size:15px;font-weight:600;color:var(--aec-text);padding:0 16px}
:root[data-area="admin"] .btn-back:hover,:root[data-area="admin"] .det-rel-b:hover,
:root[data-area="admin"] .btn-menu:hover,:root[data-area="admin"] .hdr-sino:hover{border-color:var(--aec-border-strong);background:var(--aec-surface)}
.hdr-busca{display:none}
:root[data-area="admin"] .hdr-busca{display:flex;align-items:center;gap:10px;position:relative;width:min(400px,32vw);height:44px;margin-left:auto;padding:0 12px 0 14px;
  background:var(--aec-surface);border:1px solid var(--aec-border);border-radius:12px;color:var(--aec-muted)}
:root[data-area="admin"] .hdr-busca:focus-within{border-color:var(--aec-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--aec-accent) 18%,transparent)}
:root[data-area="admin"] .hdr-busca .ic{width:18px;height:18px;flex:none}
:root[data-area="admin"] .hdr-busca input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15px;color:var(--aec-text);outline:none}
:root[data-area="admin"] .hdr-busca input::-webkit-search-cancel-button{display:none}
:root[data-area="admin"] .hdr-busca kbd{font:600 12px var(--aec-f-texto);color:var(--aec-muted);border:1px solid var(--aec-border);border-radius:6px;padding:2px 6px}
:root[data-area="admin"] .hb-lista{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;background:var(--aec-surface);border:1px solid var(--aec-border);border-radius:14px;
  box-shadow:var(--aec-sombra-gaveta);padding:6px;display:flex;flex-direction:column;gap:2px}
:root[data-area="admin"] .hb-lista[hidden]{display:none}
:root[data-area="admin"] .hb-item{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;
  font:inherit;font-size:15px;color:var(--aec-text);cursor:pointer;text-align:left}
:root[data-area="admin"] .hb-item span{font-size:14px;color:var(--aec-muted)}
:root[data-area="admin"] .hb-item.on,:root[data-area="admin"] .hb-item:hover{background:var(--aec-accent-soft);color:var(--aec-accent-text)}
:root[data-area="admin"] .hb-vazio{padding:12px;font-size:14px;color:var(--aec-muted)}
:root[data-area="admin"] .header:has(#btn-back:not(.hidden)) .hdr-busca{display:none}
@media (max-width:1023px){ :root[data-area="admin"] .hdr-busca{display:none} }

/* KPI: chip de ícone, rótulo, pílula de tendência, número — compacto desde 26/10 (sem minigráfico) */
:root[data-area="admin"] .kpi{padding:18px 20px}
:root[data-area="admin"] .kpi-top{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--aec-text-2)}
:root[data-area="admin"] .kpi-chip{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;background:var(--aec-accent-soft);color:var(--aec-accent)}
:root[data-area="admin"] .kpi-chip .ic{width:20px;height:20px}
:root[data-area="admin"] .hj-grade-2 .kpi-chip{width:36px;height:36px;flex-basis:36px;border-radius:10px}
:root[data-area="admin"] .hj-grade-2 .kpi-chip .ic{width:18px;height:18px}
/* Card compacto (26/10): ícone de 36 e selo de 24 de altura, para o selo caber ao lado do rótulo e o
   topo não ocupar duas linhas. */
:root[data-area="admin"] .hj-grade .kpi-chip{width:36px;height:36px;flex-basis:36px;border-radius:10px}
:root[data-area="admin"] .hj-grade .kpi-chip .ic{width:18px;height:18px}
:root[data-area="admin"] .hj-grade .kpi .badge{height:24px;padding:0 8px!important;font-size:13px}
:root[data-area="admin"] .kpi-top .kpi-label{min-width:0}
:root[data-area="admin"] .kpi .badge{margin-left:auto;height:28px;padding:0 10px!important;border-radius:999px;font-size:14px;font-weight:600;display:inline-flex;align-items:center}
:root[data-area="admin"] .kpi .badge.b-good{background:var(--fundo-ok)!important;color:var(--ok-texto)}
:root[data-area="admin"] .kpi .badge.b-bad{background:var(--fundo-erro)!important;color:var(--erro-texto)}
:root[data-area="admin"] .kpi .badge.b-neutral{background:var(--aec-surface-alt)!important;color:var(--aec-text-2)}
:root[data-area="admin"] .kpi-val{font-family:var(--aec-f-texto);font-weight:700;letter-spacing:-.02em;margin-top:10px}
:root[data-area="admin"] .hj-grade:not(.hj-grade-2)>.kpi .kpi-val{font-size:30px;line-height:36px}
:root[data-area="admin"] .hj-grade-2>.kpi .kpi-val{font-size:26px;line-height:32px}
:root[data-area="admin"] .kpi-cmp{font-size:14px;color:var(--aec-text-2)}
:root[data-area="admin"] .kpi-sub{font-size:14px;color:var(--aec-muted)}

/* pílulas de status e o segmentado */
:root[data-area="admin"] .g-pil,:root[data-area="admin"] .badge,:root[data-area="admin"] .c2-pill{height:28px;border-radius:999px;padding:0 12px;font-size:14px;font-weight:600}
:root[data-area="admin"] .g-pil-mal{background:var(--fundo-erro);color:var(--erro-texto)}
:root[data-area="admin"] .g-pil-atencao{background:var(--fundo-atencao);color:var(--atencao-texto)}
:root[data-area="admin"] .g-pil-bom{background:var(--fundo-ok);color:var(--ok-texto)}
:root[data-area="admin"] .seg,:root[data-area="admin"] .cfg-abas,:root[data-area="admin"] .gs-seg,:root[data-area="admin"] .dc-seg,
:root[data-area="admin"] .vg-chips,:root[data-area="admin"] .dsub,:root[data-area="admin"] .c2-viewseg{background:var(--aec-surface-alt)!important;padding:4px;border-radius:12px!important;min-height:44px;align-items:center}
:root[data-area="admin"] .cfg-abas button,:root[data-area="admin"] .gs-seg button,:root[data-area="admin"] .dc-seg button,:root[data-area="admin"] .vg-chip,
:root[data-area="admin"] .dsub-b,:root[data-area="admin"] .c2-viewseg button{min-height:36px;border-radius:9px!important;font-size:14px;font-weight:600;color:var(--aec-text-2)!important}
:root[data-area="admin"] .cfg-abas button.on,:root[data-area="admin"] .gs-seg button.on,:root[data-area="admin"] .dc-seg button.on,:root[data-area="admin"] .vg-chip.on,
:root[data-area="admin"] .dsub-b.on,:root[data-area="admin"] .c2-viewseg button.on{background:var(--aec-surface)!important;color:var(--aec-text)!important;box-shadow:0 1px 3px rgba(3,15,15,.12)}

/* botões: primário em terreno (claro) / terra (escuro); secundário em superfície com contorno */
:root[data-area="admin"] .act.blue,:root[data-area="admin"] .btn-primary,:root[data-area="admin"] .c2-btn.prim{background:var(--aec-acao);border-color:var(--aec-acao);color:var(--aec-acao-texto);min-height:44px;border-radius:12px;font-size:15px;font-weight:600}
:root[data-area="admin"] .act.blue:hover,:root[data-area="admin"] .c2-btn.prim:hover{background:var(--aec-acao-hover)}
:root[data-area="admin"] .act:not(.blue),:root[data-area="admin"] .btn-soft,:root[data-area="admin"] .hero button,:root[data-area="admin"] .g-botao{
  min-height:44px;border-radius:12px;background:var(--aec-surface);border:1px solid var(--aec-border);color:var(--aec-text);font-size:15px;font-weight:600;padding:0 16px}
:root[data-area="admin"] .act:not(.blue):not(:disabled):hover,:root[data-area="admin"] .btn-soft:hover,:root[data-area="admin"] .hero button:hover,:root[data-area="admin"] .g-botao:hover{border-color:var(--aec-border-strong);background:var(--aec-surface)}
:root[data-area="admin"] .tab-add{background:var(--aec-acao);color:var(--aec-acao-texto)}

/* listas com chip: fila da Visão Geral, alertas de Operações */
:root[data-area="admin"] .lst-chip{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;background:var(--aec-accent-soft);color:var(--aec-accent)}
:root[data-area="admin"] .lst-chip .ic{width:20px;height:20px}
:root[data-area="admin"] .lst-ini{font-size:14px;font-weight:700;color:var(--aec-accent-text)}
:root[data-area="admin"] .vg-at-lista{gap:0 40px}
:root[data-area="admin"] .vg-at-loja{grid-template-columns:42px 1fr auto auto;gap:14px;min-height:68px;padding:12px 4px;border-bottom:1px solid var(--aec-border);align-items:center}
:root[data-area="admin"] .vg-at-loja b{font-size:16px;font-weight:600}
:root[data-area="admin"] .vg-at-loja:hover{background:var(--aec-surface-alt)}
:root[data-area="admin"] .alert-card{gap:16px;min-height:76px;padding:16px 20px;border-bottom:1px solid var(--aec-border)}
:root[data-area="admin"] .alert-card .top b{font-size:16px}
:root[data-area="admin"] .alert-card .alert-time{font-size:14px}

/* tabela das contas */
:root[data-area="admin"] .c2-tblwrap{border:1px solid var(--aec-border);border-radius:16px;box-shadow:none;background:var(--aec-surface)}
:root[data-area="admin"] .c2-thead{background:var(--aec-surface-alt);height:52px}
:root[data-area="admin"] .c2-thead span{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--aec-text-2)}
:root[data-area="admin"] .c2-tbl>.c2-row:nth-child(even){background:var(--aec-zebra)}
:root[data-area="admin"] .c2-tbl>.c2-row:hover{background:var(--aec-hover)}
:root[data-area="admin"] .c2-row{border-bottom:1px solid var(--aec-border)}
:root[data-area="admin"] .c2-num,:root[data-area="admin"] .c2-roas{font-size:15px;font-weight:500}

/* abas de conteúdo */
:root[data-area="admin"] .cli-aba,:root[data-area="admin"] .vg-abas button{font-size:15px;font-weight:600;color:var(--aec-muted)}
:root[data-area="admin"] .cli-aba.on{color:var(--aec-text)}
:root[data-area="admin"] .cli-aba.on::after{background:var(--aec-accent)!important;height:3px!important;border-radius:3px}
:root[data-area="admin"] .vg-abas,:root[data-area="admin"] .cli-abas{background:color-mix(in srgb,var(--aec-bg) 88%,transparent);border-bottom-color:var(--aec-border)}

/* gráficos: gradiente leve sob a curva, balão de valor */
:root[data-area="admin"] .g-area svg [fill^="url"]{opacity:.5}
:root[data-area="admin"] .g-tip{background:var(--aec-surface);border:1px solid var(--aec-border);border-radius:12px;box-shadow:var(--aec-sombra-gaveta);font-size:14px;padding:10px 12px}

/* gaveta da caixa de entrada */
:root[data-area="admin"] .cx{width:min(440px,calc(100vw - 24px));background:var(--aec-surface);border-radius:20px;box-shadow:var(--aec-sombra-gaveta)}
:root[data-area="admin"] .cx-item{border:1px solid var(--aec-border);border-radius:14px}
:root[data-area="admin"] .cx-filtros button.on{background:var(--aec-acao);color:var(--aec-acao-texto)}

/* Licenças (licencas.js) */
:root[data-area="admin"] .lic{max-width:880px}
:root[data-area="admin"] .lic-lista{list-style:none;margin:20px 0 0;padding:0}
:root[data-area="admin"] .lic-item{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:8px 24px;align-items:center;padding:16px 0;border-top:1px solid var(--aec-border)}
:root[data-area="admin"] .lic-nome b{display:block;font-size:16px}
:root[data-area="admin"] .lic-nome span,:root[data-area="admin"] .lic-autor{font-size:14px;color:var(--aec-text-2)}
:root[data-area="admin"] .lic-links{display:flex;gap:16px;font-size:14px;font-weight:600}
:root[data-area="admin"] .lic-links a{color:var(--aec-accent-text)}

@media (max-width:767px){
  :root[data-area="admin"] .h-title{font-size:26px;line-height:32px}
  :root[data-area="admin"] .hj-grade:not(.hj-grade-2)>.kpi .kpi-val{font-size:26px;line-height:32px}
  :root[data-area="admin"] .hj-grade-2>.kpi .kpi-val{font-size:20px;line-height:26px}
  :root[data-area="admin"] .kpi{padding:16px}
  :root[data-area="admin"] .kpi-chip{width:36px;height:36px;flex-basis:36px}
  :root[data-area="admin"] .lic-item{grid-template-columns:1fr}
  :root[data-area="admin"] .header{padding:12px 16px;min-height:0}
}

/* a pílula de status da tabela cabe numa linha só ("Abaixo de 7×") */
:root[data-area="admin"] .c2-pill{white-space:nowrap;padding:0 10px}

/* logo do Painel Central (media/marca/painel-central.svg) — só na área da equipe; o cliente segue com o "ae" */
.logo-pc{display:none}
:root[data-area="admin"] .side-brand .logo{display:none}
:root[data-area="admin"] .side-brand .logo-pc{display:block;width:36px;height:36px;flex:0 0 36px;border-radius:11px}
#view-app.side-collapsed .side-brand .logo-pc{margin:0 auto}

/* ── GRÁFICOS CLAROS (23/10/2026, graficos.js · gFaixaRoas/gBarrasH/gProporcao/gTabelaMudou) ── */
/* ROAS: número grande + frase + régua reta com as faixas escritas */
:root[data-area="admin"] .hj-roas{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:8px 0 18px}
:root[data-area="admin"] .hj-roas-n{font-size:44px;line-height:48px;font-weight:700;letter-spacing:-.02em;color:var(--aec-text)}
:root[data-area="admin"] .hj-roas p{margin:0;font-size:15px;line-height:22px;color:var(--aec-text-2);max-width:34ch}
:root[data-area="admin"] .gf{margin:6px 0 14px}
:root[data-area="admin"] .gf-trilho{position:relative;height:36px;border-radius:10px;overflow:visible;display:block}
:root[data-area="admin"] .gf-z{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
:root[data-area="admin"] .gf-z:first-child{border-radius:10px 0 0 10px}
:root[data-area="admin"] .gf-z:nth-child(3){border-radius:0 10px 10px 0}
:root[data-area="admin"] .gf-mal{background:var(--fundo-erro);color:var(--erro-texto)}
:root[data-area="admin"] .gf-at{background:var(--fundo-atencao);color:var(--atencao-texto);border-left:2px solid var(--aec-surface);border-right:2px solid var(--aec-surface)}
:root[data-area="admin"] .gf-bom{background:var(--fundo-ok);color:var(--ok-texto)}
:root[data-area="admin"] .gf-agora{position:absolute;top:-6px;bottom:-6px;width:4px;margin-left:-2px;border-radius:2px;background:var(--aec-text);box-shadow:0 0 0 2px var(--aec-surface)}
:root[data-area="admin"] .gf-antes{position:absolute;top:4px;bottom:4px;width:0;margin-left:-1px;border-left:2px dashed var(--aec-text-2)}
:root[data-area="admin"] .gf-eixo{position:relative;height:20px;margin-top:6px;font-size:14px;color:var(--aec-muted)}
:root[data-area="admin"] .gf-eixo span{position:absolute;transform:translateX(-50%)}
:root[data-area="admin"] .gf-eixo span:first-child{transform:none}
:root[data-area="admin"] .gf-eixo span:last-child{transform:translateX(-100%)}

/* barras horizontais em ordem (estados) */
:root[data-area="admin"] .gbh{display:flex;flex-direction:column;gap:10px;margin-top:8px}
:root[data-area="admin"] .gbh-l{display:grid;grid-template-columns:minmax(120px,180px) 1fr 52px 84px;gap:14px;align-items:center;min-height:32px}
:root[data-area="admin"] .gbh-n{font-size:15px;color:var(--aec-text)}
:root[data-area="admin"] .gbh-t{height:12px;border-radius:6px;background:var(--aec-surface-alt);overflow:hidden}
:root[data-area="admin"] .gbh-t i{display:block;height:100%;border-radius:6px;background:var(--serie-1)}
:root[data-area="admin"] .gbh-outro .gbh-t i{background:var(--aec-border-strong)}
:root[data-area="admin"] .gbh-p{font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
:root[data-area="admin"] .gbh-v{font-size:14px;color:var(--aec-muted);text-align:right;font-variant-numeric:tabular-nums}

/* proporção numa barra (pedidos pagos × não pagos) */
:root[data-area="admin"] .gpr{margin:8px 0 18px}
:root[data-area="admin"] .gpr-t{display:flex;height:16px;border-radius:8px;overflow:hidden;gap:2px;background:var(--aec-surface)}
:root[data-area="admin"] .gpr-t .gpr-a{background:var(--serie-1)}
:root[data-area="admin"] .gpr-t .gpr-b{background:var(--erro-texto);opacity:.75}
:root[data-area="admin"] .gpr-leg{display:flex;gap:24px;flex-wrap:wrap;margin-top:10px;font-size:15px;color:var(--aec-text-2)}
:root[data-area="admin"] .gpr-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:0}
:root[data-area="admin"] .gpr-leg i.gpr-a{background:var(--serie-1)}
:root[data-area="admin"] .gpr-leg i.gpr-b{background:var(--erro-texto);opacity:.75}

/* tabela antes → agora → o que mudou */
:root[data-area="admin"] .gm{width:100%;border-collapse:collapse;margin-top:6px;font-size:15px}
:root[data-area="admin"] .gm th{text-align:left;font-size:14px;font-weight:600;color:var(--aec-text-2);padding:10px 12px;border-bottom:1px solid var(--aec-border);background:var(--aec-surface-alt)}
:root[data-area="admin"] .gm th:nth-child(2),:root[data-area="admin"] .gm th:nth-child(3),
:root[data-area="admin"] .gm td:nth-child(2),:root[data-area="admin"] .gm td:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}
:root[data-area="admin"] .gm td{padding:12px;border-bottom:1px solid var(--aec-border)}
:root[data-area="admin"] .gm td:nth-child(2){color:var(--aec-muted)}
:root[data-area="admin"] .gm tr:nth-child(even) td{background:var(--aec-zebra)}
:root[data-area="admin"] .gm .gm-b{color:var(--ok-texto);font-weight:600}
:root[data-area="admin"] .gm .gm-m{color:var(--erro-texto);font-weight:600}
:root[data-area="admin"] .gm .gm-n{color:var(--aec-muted)}
@media (max-width:767px){
  :root[data-area="admin"] .gbh-l{grid-template-columns:1fr 46px 72px;}
  :root[data-area="admin"] .gbh-t{grid-column:1/-1;order:3}
  :root[data-area="admin"] .gm{font-size:14px}
  :root[data-area="admin"] .gm td,:root[data-area="admin"] .gm th{padding:10px 6px}
}
/* régua do ROAS: o nome da faixa fica ACIMA da barra — dentro dela, a marca do valor cobria a palavra */
:root[data-area="admin"] .gf{margin:34px 0 14px}
:root[data-area="admin"] .gf-trilho{height:14px}
:root[data-area="admin"] .gf-z{overflow:visible}
:root[data-area="admin"] .gf-z span{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap}
:root[data-area="admin"] .gf-agora{top:-5px;bottom:-5px}
:root[data-area="admin"] .gf-antes{top:-3px;bottom:-3px}

/* ── MARCA DA CONTA (util.js · logoConta) — a SIGLA da loja em branco num círculo preto, a mesma
   para todas (26/10/2026, pedido do Biel; antes era a foto do Instagram com o anel colorido). A letra
   acompanha o tamanho do círculo (cqi), em qualquer largura que a tela der a ele; três letras ("POP",
   "SVA") um pouco menores. O fio claro em volta só se nota no tema escuro. */
.lc{display:inline-grid;place-items:center;flex:none;aspect-ratio:1;border-radius:50%;overflow:hidden;
  container-type:inline-size;background:#0B0B0C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-family:var(--aec-f-texto,sans-serif)}
.lc .lc-s{font-weight:800;font-size:40cqi;line-height:1;letter-spacing:-.02em;color:#FFFFFF}
.lc[data-n="3"] .lc-s{font-size:31cqi;letter-spacing:-.03em}
.lc-p{width:30px;height:auto}
.lc-m{width:40px;height:auto}
.lc-g{width:52px;height:auto}
:root[data-area="admin"] .sidebar .nav-conta{gap:10px}
:root[data-area="admin"] .c2-cli{display:flex;align-items:center;gap:12px}
:root[data-area="admin"] .vg-at-loja{grid-template-columns:40px 1fr auto auto}
:root[data-area="admin"] .h-marca:empty{display:none}
:root[data-area="admin"] .h-marca{display:flex;align-items:center}
#view-app.side-collapsed .nav-conta .lc{margin:0 auto}

/* celular: o rótulo do KPI não pode sumir entre o ícone e a pílula; "Visão Geral" vira só a seta */
@media (max-width:767px){
  :root[data-area="admin"] .kpi-chip{display:none}
  :root[data-area="admin"] .kpi-top{flex-wrap:wrap;row-gap:6px}
  :root[data-area="admin"] .btn-back{font-size:0;width:44px;padding:0;justify-content:center}
  :root[data-area="admin"] .btn-back svg{width:18px;height:18px}
  :root[data-area="admin"] .lc-g{width:40px}
  :root[data-area="admin"] .h-marca{display:none}
  :root[data-area="admin"] .c2-cli .lc{display:none}
}
/* tabela: logo menor e o nome cortado com reticências (o nome inteiro fica no title) */
:root[data-area="admin"] .c2-cli .lc{width:40px}
:root[data-area="admin"] .c2-cli{min-width:0}
:root[data-area="admin"] .c2-nm{min-width:0}
:root[data-area="admin"] .c2-nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-area="admin"] .c2-nm span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-area="admin"] .h-marca{margin-right:4px}
:root[data-area="admin"] .c2-nm b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;line-height:19px}
:root[data-area="admin"] .c2-tbl{--cols:30px minmax(158px,1.5fr) 124px 96px 78px 108px 118px 84px 92px 78px 104px 104px 92px 104px;min-width:1520px}
:root[data-area="admin"] .c2-cli{gap:10px}
:root[data-area="admin"] .c2-nm b{overflow-wrap:break-word}
/* capas de criativo na tabela: 3 cabem nos 104px da coluna */
:root[data-area="admin"] .c2-row [data-thumbs] .c2-thumbs{gap:3px;flex-wrap:nowrap}
:root[data-area="admin"] .c2-row [data-thumbs] .c2-thumb{width:28px;height:28px;flex:0 0 28px}
:root[data-area="admin"] .c2-row [data-thumbs] .mais{font-size:12px}
:root[data-area="admin"] .c2-row [data-thumbs] .mais{display:none}

/* ── TABELA DAS CONTAS SEM POLUIÇÃO (23/10/2026, pedido do Biel: "o cérebro corre") ───────────
   Padrão: 8 colunas que decidem (cliente, situação, tendência, investimento, receita, ROAS Pago,
   CPA, pedidos) e cabem na tela sem rolar de lado. As outras 5 voltam pelo botão "Mais colunas".
   Cor só onde há decisão: a pílula da situação e o ROAS de quem está abaixo de 7×. A variação de
   cada número fica cinza, e a tendência é uma linha só na cor da série (vermelha só no crítico). */
:root[data-area="admin"] .c2-tbl{--cols:28px minmax(156px,1.9fr) 116px 80px repeat(4,minmax(82px,1fr)) minmax(104px,1fr);min-width:0}
:root[data-area="admin"] .c2-thead span{white-space:nowrap}
:root[data-area="admin"] .c2-tbl .c2-cli .lc{width:40px}
:root[data-area="admin"] .c2-tbl.todas{--cols:28px minmax(180px,1.5fr) 132px 100px 112px 120px 96px 100px 92px 104px 100px 92px 88px 104px;min-width:1560px}
:root[data-area="admin"] .c2-thead,:root[data-area="admin"] .c2-row{gap:8px}
:root[data-area="admin"] .c2-row{padding:16px 14px;min-height:68px}
:root[data-area="admin"] .c2-row.crit{box-shadow:none}
:root[data-area="admin"] .c2-row .c2-dm{color:var(--aec-muted)!important;font-size:12.5px;font-weight:500}
:root[data-area="admin"] .c2-row .c2-spark path:first-child{fill:transparent}
:root[data-area="admin"] .c2-row .c2-spark path:nth-child(2){stroke:var(--serie-1,#4F46E5)}
:root[data-area="admin"] .c2-row .c2-spark circle{fill:var(--serie-1,#4F46E5)}
:root[data-area="admin"] .c2-row.crit .c2-spark path:nth-child(2){stroke:var(--erro-texto)}
:root[data-area="admin"] .c2-row.crit .c2-spark circle{fill:var(--erro-texto)}
:root[data-area="admin"] .c2-row .c2-roas{text-align:right}
:root[data-area="admin"] .c2-row .c2-roas b{font-size:16px}
:root[data-area="admin"] .c2-tbl:not(.todas) .c2-spark{width:100%;max-width:96px}
:root[data-area="admin"] .c2-colsbtn{height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--aec-border);background:var(--aec-surface);
  color:var(--aec-text-2);font:600 13.5px var(--aec-f-texto,sans-serif);cursor:pointer;white-space:nowrap}
:root[data-area="admin"] .c2-colsbtn:hover{background:var(--aec-hover);color:var(--aec-text)}
@media (max-width:1023px){:root[data-area="admin"] .c2-colsbtn{display:none}}

/* ── MENU LATERAL E CABEÇALHO COM TOM PRÓPRIO (23/10/2026, pedido do Biel) ───────────────────
   O menu segue o tema, mas num tom um pouco diferente do fundo para a lateral se destacar:
   off-white no claro, mais escuro que o fundo no escuro. O cabeçalho leva o índigo da logo do
   produto (media/marca/painel-central.svg), nos dois temas. As janelas que abrem do cabeçalho
   (período, busca, troca de loja, relatórios) continuam com as cores do tema: só os controles
   da faixa mudam. */
:root[data-area="admin"] .sidebar{
  --aec-surface:#ECEEF4; --aec-surface-alt:#E1E4EC; --aec-hover:#E1E4EC; --aec-border:#DADEE7;
  background:#ECEEF4!important; border-right-color:#DADEE7!important;
}
:root[data-area="admin"][data-tema="escuro"] .sidebar{
  --aec-surface:#0B0D14; --aec-surface-alt:#1A1D29; --aec-hover:#1A1D29; --aec-border:#1E2130;
  background:#0B0D14!important; border-right-color:#1E2130!important;
}
@media (prefers-color-scheme: dark){
  :root[data-area="admin"]:not([data-tema="claro"]) .sidebar{
    --aec-surface:#0B0D14; --aec-surface-alt:#1A1D29; --aec-hover:#1A1D29; --aec-border:#1E2130;
    background:#0B0D14!important; border-right-color:#1E2130!important;
  }
}
:root[data-area="admin"] .header{background:linear-gradient(100deg,#4338CA 0%,#5048E5 100%)!important;border-bottom:0!important;
  -webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-area="admin"][data-tema="escuro"] .header{background:linear-gradient(100deg,#2B2580 0%,#3730A3 100%)!important}
@media (prefers-color-scheme: dark){
  :root[data-area="admin"]:not([data-tema="claro"]) .header{background:linear-gradient(100deg,#2B2580 0%,#3730A3 100%)!important}
}
:root[data-area="admin"] .header .h-title,:root[data-area="admin"] .header .lj-btn{color:#FFFFFF}
:root[data-area="admin"] .header .lj-btn svg{stroke:#FFFFFF}
:root[data-area="admin"] .header .h-sub{color:rgba(255,255,255,.78)}
:root[data-area="admin"] .header .btn-menu,:root[data-area="admin"] .header .hdr-sino,
:root[data-area="admin"] .header .btn-back,:root[data-area="admin"] .header .det-rel-b,:root[data-area="admin"] .header #btn-tema{
  background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.22)!important;color:#FFFFFF!important}
:root[data-area="admin"] .header .btn-menu:hover,:root[data-area="admin"] .header .hdr-sino:hover,
:root[data-area="admin"] .header .btn-back:hover,:root[data-area="admin"] .header .det-rel-b:hover{background:rgba(255,255,255,.2)!important}
:root[data-area="admin"] .header .hdr-busca{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
:root[data-area="admin"] .header .hdr-busca:focus-within{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6);box-shadow:none}
:root[data-area="admin"] .header .hdr-busca input{color:#FFFFFF}
:root[data-area="admin"] .header .hdr-busca input::placeholder{color:rgba(255,255,255,.72)}
:root[data-area="admin"] .header .hdr-busca kbd{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)}

/* Menu Contas (23/10/2026): as contas do Grupo SV na MESMA coluna das demais — foto embaixo de foto.
   O grupo continua dizendo quem é dele pela ordem (logo abaixo de "Grupo SV"), sem o recuo extra. */
:root[data-area="admin"] .nav-filhos.nav-n2{margin:0 0 4px 0;padding-left:0;border-left:0}