/* ============================================================
   NERO — tema + chrome compartilhado (cockpit-mac-api)
   Carregado por todas as páginas. 5 temas + sidebar/topnav.
   ============================================================ */
:root{--bg:#0b0b0d;--panel:#161619;--panel2:#1f1f23;--border:#27272a;--text:#e4e4e7;--muted:#71717a;--accent:#4F46E5;--accent2:#6366F1;--radius:16px;--glow:none;--sidebar:#0e0e11;--chip:#18181b;--c-ok:#34d399;--c-warn:#fbbf24;--c-bad:#f87171;
  /* PLASMA: gradiente-assinatura do Nero (KPI, destaque). SOLAR: energia/positivo. Tokens oficiais (antes só hardcoded no KPI). */
  --plasma-a:#5EEAD4;--plasma-b:#38BDF8;--plasma-c:#A78BFA;--plasma:linear-gradient(90deg,#5EEAD4,#38BDF8,#A78BFA);--solar:#FF9E2C}
/* Cores semânticas (ok/aviso/erro). Default acima = tons brilhantes p/ FUNDO
   ESCURO; o tema CLARO (branco) sobrescreve com tons mais ESCUROS/legíveis
   (amarelo no branco lê mal). Use var(--c-ok|--c-warn|--c-bad) em vez de hexes. */
body.theme-light{--c-ok:#15803d;--c-warn:#b45309;--c-bad:#dc2626}

/* ============================================================
   NERO — design APROVADO (Mauro 21/06): cor secundária = PRETO +
   tratamento "B" (faixa + tinte) nos cards de loja/marketplace.
   Tokens globais (cor secundária, hierarquia de texto preta, cores
   oficiais de cada marketplace). Cabeçalho do card = cor forte da
   marca; corpo = branco com hierarquia preta; borda-topo na marca.
   ============================================================ */
:root{
  --nero-secundaria:#111111;      /* cor secundária oficial = preto (accent-color dos checkbox) */
  --nero-text-forte:#14171c;      /* títulos/labels/checks (font-weight:700) */
  --nero-text-claro:#5b5f66;      /* secundário/descrições (preto suave, NÃO cinza-azulado) */
  /* COR DA MARCA NERO (escolha do Mauro 22/06): ÍNDIGO — assinatura sobre o preto/branco/cinza.
     Usar em ação principal, foco, links, item selecionado. Laranja=Shopee, amarelo=ML (logos). */
  --nero-accent:#4F46E5;          --nero-accent-700:#3F38C9;   --nero-accent-50:#EEEDFB;
  --mk-shopee:#ED4D2D;        --mk-shopee-txt:#ffffff;
  --mk-mercadolivre:#F9D30A;  --mk-mercadolivre-txt:#0A0080;   /* amarelo claro -> texto navy */
  --mk-amazon:#FF9900;        --mk-amazon-txt:#0a0a0a;
  --mk-shein:#000000;         --mk-shein-txt:#ffffff;
  --mk-magalu:#C41E3A;        --mk-magalu-txt:#ffffff;
  --mk-tiktokshop:#000000;    --mk-tiktokshop-txt:#ffffff;
}

body.theme-dark{--bg:#0b0b0d;--panel:#161619;--panel2:#1f1f23;--border:#27272a;--text:#e4e4e7;--muted:#71717a;--accent:#10b981;--accent2:#34d399;--sidebar:#0e0e11;--chip:#18181b}
body.theme-neon{--bg:#07070c;--panel:rgba(20,18,33,.6);--panel2:rgba(255,255,255,.05);--border:rgba(255,255,255,.09);--text:#e7e5f0;--muted:#8b8ba7;--accent:#a78bfa;--accent2:#22d3ee;--sidebar:rgba(12,10,22,.6);--chip:rgba(255,255,255,.05);--glow:0 0 22px -6px rgba(124,58,237,.55)}
body.theme-neon{background:radial-gradient(900px 500px at 85% -10%,rgba(124,58,237,.22),transparent 60%),radial-gradient(700px 480px at 0% 100%,rgba(34,211,238,.15),transparent 55%),#07070c}
body.theme-light{--bg:#f4f5f7;--panel:#ffffff;--panel2:#f5f6f8;--border:#e7e8ec;--text:#15171c;--muted:#6b7078;--accent:#4F46E5;--accent2:#6366F1;--sidebar:#ffffff;--chip:#f3f4f6}
body.theme-slate{--bg:#0b1220;--panel:#111827;--panel2:#172033;--border:#2b3a51;--text:#e5edf6;--muted:#8fa3bc;--accent:#38bdf8;--accent2:#a7f3d0;--sidebar:#080f1c;--chip:#162033;--glow:0 16px 38px -28px rgba(56,189,248,.75)}
body.theme-slate{background:linear-gradient(135deg,#080f1c 0%,#0f172a 56%,#132235 100%)}
body.theme-bordo{--bg:#16080b;--panel:#211014;--panel2:#2d171c;--border:#543038;--text:#f7ece4;--muted:#b69b91;--accent:#d4af37;--accent2:#f59e0b;--sidebar:#100508;--chip:#2b151a;--glow:0 18px 42px -30px rgba(212,175,55,.8)}
body.theme-bordo{background:radial-gradient(800px 420px at 84% -12%,rgba(212,175,55,.14),transparent 62%),linear-gradient(145deg,#100508 0%,#1a0a0e 54%,#2b1217 100%)}

/* IDENTIDADE NERO: a cor-acento é ÍNDIGO igual em TODOS os temas (a marca vem antes do tema).
   Sobrescreve o --accent de cada tema acima (mesma especificidade, vem depois -> vence). */
body[class*="theme-"]{ --accent:var(--nero-accent); --accent2:#6366F1; }

/* MENU/MOLDURA NERO = PRETO em todos os temas (escolha do Mauro 22/06): "Nero" (preto) vira a
   identidade — menu lateral + topo pretos, conteúdo branco. Tokens próprios do menu (texto claro),
   independentes do --text do conteúdo, pra nunca ficar texto escuro no preto. */
body[class*="theme-"]{
  --sidebar:#15171c;            /* fundo do menu/topo (preto suave premium, não #000 cru) */
  --sidebar-text:#d6d9df;       /* item de menu inativo (cinza CLARO e legível, não apagado) */
  --sidebar-strong:#ffffff;     /* hover / nome NERO / item destacado */
  --sidebar-muted:#a9aeb7;      /* "cockpit ao vivo" + mutes do menu (clareado) */
  --sidebar-head:#cdd2da;       /* TÍTULOS de grupo (OPERAÇÃO/FISCAL) — com destaque */
  --sidebar-border:#2a2d35;     /* divisórias dentro do menu */
}

/* o JS remove bg-zinc-950 do body; garantimos o fundo do tema */
body[class*="theme-"]{background-color:var(--bg);color:var(--text)}

/* ---- fontes + legibilidade (SÓ fontes locais do Windows — sem CDN externo, nada sai do PC) ---- */
:root{--font:system-ui,'Segoe UI',Roboto,Arial,sans-serif}
body[class*="theme-"]{font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.005em}
body.font-sistema{--font:system-ui,'Segoe UI',Roboto,Arial,sans-serif}
body.font-verdana{--font:Verdana,Geneva,'DejaVu Sans',sans-serif}
body.font-calibri{--font:Calibri,'Segoe UI',Candara,sans-serif}
body.font-georgia{--font:Georgia,'Times New Roman',serif}
body[class*="font-"] input,body[class*="font-"] select,body[class*="font-"] textarea,body[class*="font-"] button{font-family:inherit}

/* ---- tamanho do texto: escala tudo proporcionalmente (Chromium/Electron) ---- */
body.nsize-2{zoom:1.10}
body.nsize-3{zoom:1.22}

/* ---- chrome ---- */
.nero-app{display:flex;min-height:100vh}
.nero-sidebar{width:240px;flex-shrink:0;background:var(--sidebar);color:var(--sidebar-text);border-right:1px solid var(--sidebar-border);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:auto;z-index:30}
.nero-sidebar .muted,.nero-topnav .muted{color:var(--sidebar-muted)}
.nero-topnav{display:none;align-items:center;gap:4px;padding:9px 18px;border-bottom:1px solid var(--sidebar-border);flex-wrap:wrap;background:var(--sidebar);color:var(--sidebar-text);position:sticky;top:0;z-index:30}
.nero-main{flex:1;min-width:0}
.nero-head{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 22px;border-bottom:1px solid var(--sidebar-border);position:sticky;top:0;background:var(--sidebar);color:var(--sidebar-text);z-index:25;flex-wrap:wrap}
body.theme-neon .nero-topnav,body.theme-light .nero-topnav{}
.nero-content{display:block}

.nero-brand{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--sidebar-border);color:var(--sidebar-strong)}
.nero-badge{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
body.theme-neon .nero-badge{box-shadow:var(--glow)}
.nero-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sidebar-head);font-weight:800;padding:9px 20px 4px}
/* grupos colapsáveis do menu (módulos) */
.nero-group{margin-bottom:1px}
.nero-gh{width:100%;text-align:left;background:none;border:0;color:var(--sidebar-head);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px 6px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-weight:800;font-family:inherit}
.nero-gh:hover{color:var(--sidebar-strong)}
.nero-chev{font-size:9px;transition:transform .15s;transform:rotate(90deg)}
.nero-group.collapsed .nero-chev{transform:rotate(0deg)}
.nero-group.collapsed .nero-gi{display:none}
.nero-nav{display:flex;align-items:center;gap:11px;padding:9px 20px;color:var(--sidebar-text);text-decoration:none;font-size:14px;border-left:2px solid transparent;transition:.15s;white-space:nowrap}
.nero-nav:hover{background:rgba(255,255,255,.06);color:var(--sidebar-strong)}
.nero-nav.active{color:#fff;border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 30%,transparent);font-weight:600}
.nero-topnav .nero-nav{border-left:0;padding:6px 11px;border-radius:8px}
.nero-livedot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:neroPulse 2.4s ease-in-out infinite}
@keyframes neroPulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.5)}50%{box-shadow:0 0 0 8px rgba(79,70,229,0)}}

.nero-seg{display:flex;gap:3px;background:var(--chip);border:1px solid var(--border);border-radius:10px;padding:3px;flex-wrap:wrap}
.nero-seg button{border:none;background:transparent;color:var(--muted);font-size:12px;padding:5px 9px;border-radius:7px;cursor:pointer}
.nero-seg button.on{background:var(--accent);color:#fff;font-weight:600}

/* componentes reutilizáveis (caso a página adote) */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.muted{color:var(--muted)}.accent{color:var(--accent)}

/* layout: L1 = sidebar | L2/L3 = nav no topo */
body.layout-1 .nero-topnav{display:none}
body.layout-1 .nero-sidebar{display:flex}
body.layout-2 .nero-sidebar,body.layout-3 .nero-sidebar{display:none}
body.layout-2 .nero-topnav,body.layout-3 .nero-topnav{display:flex}

@media(max-width:980px){
  .nero-sidebar{display:none!important}
  .nero-topnav{display:flex!important}
}

/* ===== TELA CHEIA (pedido do Mauro): os cards usam toda a largura da tela ===== */
.nero-content .wrap{max-width:none!important}


/* ===== Dropdown nativo do <select> (12/06): opções saíam cinza-claro em fundo BRANCO (ilegível).
   color-scheme faz o popup nativo seguir o tema; option ganha fundo/letra explícitos. ===== */
body{color-scheme:dark}
body.theme-light{color-scheme:light}
select option{background-color:#16161a;color:#e4e4e7}
select option:disabled{color:#71717a}
body.theme-light select option{background-color:#ffffff;color:#27272a}
body.theme-light select option:disabled{color:#9499a3}

/* ===== CARA PREMIUM (Mauro 17/06): o visual "bonito" do Cockpit (vidro nos cards,
   KPI em gradiente, sidebar/cabeçalho de vidro, menu techy) agora vale pra TODAS as
   telas — assim navegar não muda o design, só o conteúdo. Camada visual; dados intactos. ===== */
body.theme-dark{background:#05060c}
body.theme-dark .panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 24px 60px -42px #000;transition:transform .28s,border-color .28s,box-shadow .28s}
body.theme-dark .panel:hover{transform:translateY(-3px);border-color:rgba(94,234,212,.4);box-shadow:0 30px 72px -34px rgba(56,189,248,.45)}
.kpi-val{font-weight:800;line-height:1.05}
body.theme-dark .kpi-val,body.theme-neon .kpi-val{background:linear-gradient(90deg,#5eead4,#38bdf8,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
body.theme-dark .nero-sidebar{background:rgba(9,11,17,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-right:1px solid rgba(255,255,255,.08)}
body.theme-dark .nero-head{background:rgba(7,8,13,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
/* O menu agora é PRETO em TODOS os temas (#636) -> o texto é SEMPRE claro. As regras antigas
   (Mauro 19/06) punham texto ESCURO no tema claro, quando o menu ainda era branco -> ficavam
   invisíveis no menu preto. Unificado nos tokens claros do menu (--sidebar-head/--sidebar-text). */
.nero-gh{color:var(--sidebar-head);font-weight:800;letter-spacing:.16em}
body.theme-light .nero-gh{color:var(--sidebar-head);font-weight:800}
body.theme-light .nero-nav{color:var(--sidebar-text)}
body:not(.theme-light) .nero-gh::before{content:"";width:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,#5eead4,#38bdf8,#a78bfa);box-shadow:0 0 9px rgba(56,189,248,.85);margin-right:8px}
body:not(.theme-light) .nero-nav{font-family:'Bahnschrift','Segoe UI Variable Display','Segoe UI',sans-serif;font-weight:500;letter-spacing:.015em;border-radius:0 12px 12px 0;margin-right:12px;transition:transform .2s,background .2s,color .2s,border-color .2s}
body:not(.theme-light) .nero-nav:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(5px);border-left-color:rgba(94,234,212,.6)}
body:not(.theme-light) .nero-nav.active{font-weight:700;color:#eafff9;border-left-color:#38bdf8;text-shadow:0 0 18px rgba(56,189,248,.55);background:linear-gradient(90deg,rgba(94,234,212,.20),transparent)}

/* ===== Cards de marketplace — tratamento "B" (Mauro 21/06): faixa colorida + corpo branco =====
   Reutilizável. A cor da marca entra via classe .mk-<canal> (mapeia --mk-* nas variáveis locais
   --mk-c / --mk-ct). Cabeçalho na cor forte da marca; corpo branco com hierarquia preta;
   borda-topo 3px na cor da marca. Canal sem cor = cinza neutro (não quebra). */
.mkb-card{--mk-c:#6b7280;--mk-ct:#ffffff;background:#fff;border:1px solid #e3e8ef;border-top:3px solid var(--mk-c);
  border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(16,23,42,.06)}
.mkb-card .mkb-head{display:flex;align-items:center;gap:11px;padding:13px 16px;background:var(--mk-c);color:var(--mk-ct)}
/* chip BRANCO atrás da logo — a logo (ex.: Shopee laranja) precisa aparecer sobre a faixa da mesma cor */
.mkb-card .mkb-head .mkb-logo{display:inline-flex;align-items:center;background:#fff;border-radius:7px;padding:4px 8px;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.mkb-card .mkb-head .mkb-logo img{display:block}
.mkb-card .mkb-head .mkb-title{color:var(--mk-ct);font-weight:700;font-size:15px;line-height:1.2;margin:0}
.mkb-card .mkb-head .mkb-sub{color:var(--mk-ct);opacity:.85;font-size:12px;font-weight:500}
.mkb-card .mkb-body{background:#fff;padding:15px 16px}
/* hierarquia de texto preta DENTRO do card (cirúrgico, escopado em .mkb-card) */
.mkb-card .mkb-body .mkb-strong,.mkb-card .mkb-body label{color:var(--nero-text-forte);font-weight:700}
.mkb-card .mkb-body .mkb-soft{color:var(--nero-text-claro)}
.mkb-card .mkb-body code{color:var(--nero-text-forte)}
.mkb-card .mkb-body input[type=checkbox],.mkb-card .mkb-body input[type=radio]{accent-color:var(--nero-secundaria)}
/* mapeamento canal -> cor da marca */
.mk-shopee{--mk-c:var(--mk-shopee);--mk-ct:var(--mk-shopee-txt)}
.mk-ml,.mk-mercadolivre,.mk-mercado_livre{--mk-c:var(--mk-mercadolivre);--mk-ct:var(--mk-mercadolivre-txt)}
.mk-amazon{--mk-c:var(--mk-amazon);--mk-ct:var(--mk-amazon-txt)}
.mk-shein{--mk-c:var(--mk-shein);--mk-ct:var(--mk-shein-txt)}
.mk-magalu{--mk-c:var(--mk-magalu);--mk-ct:var(--mk-magalu-txt)}
.mk-tiktokshop,.mk-tiktok{--mk-c:var(--mk-tiktokshop);--mk-ct:var(--mk-tiktokshop-txt)}