/* Radar do Ecommerce — a folha de estilo do painel.
   (O arquivo nasceu no painel do Vita+mais Sênior e veio junto quando o Radar virou produto
   próprio; daí os tokens indigo/teal e o nome de algumas classes.)

   ⚠️ CSS MORTO. Em outubro de 2026 saíram 491 seletores — 894 linhas, quase um quarto do
   arquivo — que vestiam telas que não existem mais aqui (pódio, batalha de sabores, XP,
   previsão, repasses, painel de missões antigo). CSS que ninguém usa não quebra nada: ele
   só faz quem lê acreditar que a tela existe, e o próximo que for mexer vai editar a regra
   errada. Para conferir de novo, o teste é simples: toda classe citada aqui tem de aparecer
   em algum .js ou .html do projeto. O que não aparecer, sai. */
:root{
  color-scheme: light;
  --fundo:#f4f6fb;
  --card:#ffffff;
  --card-2:#f8fafc;
  --linha:#e6e8f0;
  --linha-forte:#d3d7e4;
  --tinta:#0f1222;
  --tinta-2:#4c5168;
  --tinta-3:#646a82;   /* 5,3:1 no branco e 4,9:1 no fundo cinza: passa AA nos dois (o #6b7189 dava 4,46 no fundo). Era #868ca3 (3,34:1) e e a cor
                          de quase todo o texto pequeno do app — rotulo, SKU, legenda. */
  --fundo-2:#eef0f7;   /* faixa um tom abaixo do fundo (cabeçalho de tabela, trilho) */
  /* ---------- tokens de cor com contraste aprovado (AA no branco) ----------
     Texto colorido usa SEMPRE estes. Os vivos (#0ca30c 3,1:1, #ea8c00 2,6:1) ficam só para
     preenchimento: barra, ponto, borda, gráfico. */
  --marca:#4f46e5;        /* 6,3:1 */
  --marca-escuro:#3730a3;
  --pos:#0a7a2f;          /* lucro, ganho: 5,6:1 */
  --neg:#b62b21;          /* prejuízo, erro: 6,0:1 */
  --deduz:#c2410c;        /* o que sai do faturamento: 5,2:1 */
  --atencao-txt:#9a6b00;  /* aviso em texto: 4,9:1 */
  --indigo:var(--marca);
  --indigo-escuro:var(--marca-escuro);
  --teal:#0d9488;
  --teal-escuro:#0f766e;
  --ambar:#ea8c00;
  --terracota:#c2410c;
  --rosa:#be185d;
  /* series validadas (CVD + contraste, modo claro) */
  --baunilha:#ea8c00;
  --chocolate:#c2410c;
  --semsabor:#0d9488;
  --ml:#4f46e5;
  --shopee:#be185d;
  --bom:#0ca30c;
  --atencao:#fab219;
  --serio:#ec835a;
  --critico:#d03b3b;
  --seq-100:#e0e7ff; --seq-300:#a5b4fc; --seq-500:#6366f1; --seq-700:#4338ca;
  /* ---------- a escala ----------
     O CSS chegou a 30 tamanhos de fonte e 21 raios soltos. Em out/2026 todo font-size e
     border-radius em px passou a apontar para um destes degraus (o valor solto mais perto,
     no máximo 1px de diferença). Valor novo: escolha um degrau, não invente outro. */
  /* 09/10 (upgrade visual, decisão do dono 1A): um degrau acima em tudo — o app vivia em 12–13px, pequeno
     para painel de número — e os números de destaque bem maiores. A Inter agora vem com o eixo óptico
     (opsz 14..32): letra pequena mais aberta, número grande mais fino e elegante, sem trocar de fonte. */
  --txt-2xs:11px; --txt-xs:12px; --txt-sm:13px; --txt-md:14px; --txt-lg:15px; --txt-base:15px;
  --txt-xl:17px; --txt-2xl:20px; --txt-3xl:23px; --txt-4xl:31px; --txt-5xl:36px;
  --peso-md:500; --peso-semi:600; --peso-bold:700; --peso-max:800;
  --raio-sm:10px; --raio-md:12px; --raio-lg:16px; --raio-xl:20px; --raio-pill:999px;
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px; --esp-6:32px;
  --sombra:0 1px 2px rgba(16,20,48,.05), 0 6px 20px -10px rgba(16,20,48,.14);
  --sombra-forte:0 2px 6px rgba(16,20,48,.07), 0 18px 40px -20px rgba(16,20,48,.30);
  /* o roxo da marca em degraus (3A: o mesmo índigo, refinado) — fundo de selo, borda, hover */
  --marca-50:#eef2ff; --marca-100:#e0e7ff; --marca-200:#c7d2fe; --marca-300:#a5b4fc; --marca-500:#6366f1;
  --marca-600:#4f46e5; --marca-700:#4338ca; --marca-800:#3730a3; --marca-900:#312e81;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{color:var(--tinta);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:var(--txt-base);line-height:1.5;-webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;text-rendering:optimizeLegibility;
}
.wrap{max-width:1420px;margin:0 auto;padding:0 20px 60px}
.emoji{font-size:1.05em;line-height:1}

/* ---------- topo ---------- */
.topo-linha{display:flex;flex-wrap:wrap;gap:var(--esp-3) 20px;align-items:center;justify-content:space-between}
.topo-linha>*{min-width:0;max-width:100%}
.marca{display:flex;align-items:center;gap:11px}
.marca-logo{flex:none;
  background:linear-gradient(135deg,var(--indigo) 0%,var(--teal) 100%);
  color:#fff;display:grid;place-items:center;font-weight:var(--peso-max);letter-spacing:-.5px;
}
.marca h1{margin:0;font-weight:750;letter-spacing:-.3px;line-height:1.2}
.marca p{margin:2px 0 0;color:var(--tinta-3)}
.topo-acoes{display:flex;flex-wrap:wrap}
/* ---------- o botão, de um jeito só ----------
   Quatro papéis: .btn (normal), .btn-forte (o que confirma), .btn-perigo (o que apaga) e
   .btn-mini (ação dentro de cartão/linha). Antes o .btn era declarado em 3 lugares e o último
   apagava a sombra colorida do .btn-forte. Alvo de toque: nenhum fica abaixo de 32px. */
.btn{
  border:1px solid var(--linha);background:var(--card);color:var(--tinta-2);font-weight:650;cursor:pointer;
  font-family:inherit;padding:7px 12px;font-size:var(--txt-md);border-radius:var(--raio-sm);min-height:32px;
  box-shadow:var(--sombra-1);
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,opacity .15s,transform .15s;
}
.btn:hover{border-color:var(--marca);color:var(--marca)}
.btn:hover:not(:disabled){box-shadow:var(--sombra-2)}
.btn-forte{
  border-color:var(--marca);color:#fff;background:linear-gradient(180deg,#5b53ea,#4a41dd);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 6px 16px -8px rgba(79,70,229,.85);
}
.btn-forte:hover,.btn-forte:hover:not(:disabled){
  border-color:var(--marca-escuro);color:#fff;background:linear-gradient(180deg,#6a62f0,var(--marca));
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset, 0 10px 22px -10px rgba(79,70,229,.95);
}
.btn-forte:active{background:linear-gradient(180deg,#4a41dd,#453ccf);box-shadow:0 2px 6px -3px rgba(79,70,229,.8) inset}
.btn-perigo{background:#fdeeee;border-color:#f0c3c3;color:#8c1f1f}
.btn-perigo:hover{background:#fbdede;border-color:#e5a5a5;color:#8c1f1f}
.btn-mini{padding:6px 11px;font-size:var(--txt-sm);border-radius:var(--raio-pill)}
.meses{display:flex;gap:var(--esp-1);background:var(--card-2);border:1px solid var(--linha);max-width:100%;overflow-x:auto}
.mes{
  border:none;background:none;font-family:inherit;font-weight:650;color:var(--tinta-3);border-radius:var(--raio-sm);cursor:pointer;transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s,opacity .12s,transform .12s;flex:none;
}
.mes:hover:not([disabled]){background:#eef0f6;color:var(--tinta)}
.mes[disabled]{opacity:.32;cursor:not-allowed}

/* ---------- filtros ---------- */
.filtros{margin:0 0 16px;
  display:flex;flex-wrap:wrap;
}
.campo{display:flex;flex-direction:column}
.campo label{font-weight:var(--peso-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3)}
.campo select,.campo input{
  font-family:inherit;border:1px solid var(--linha);background:var(--card);color:var(--tinta);
}
.campo select:focus,.campo input:focus{outline:2px solid var(--indigo);outline-offset:1px;border-color:var(--indigo)}
.chips{margin-left:auto;align-items:center}
/* a aparencia do .chip esta na definicao unica mais abaixo; aqui ficam so os estados */
.chip:hover{border-color:var(--indigo);color:var(--indigo)}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;margin-bottom:16px;
  /* a arte entra ANTES do degrade na pilha, nunca no lugar dele: se demorar ou falhar, a
     tela de entrada continua escura e o texto branco continua legivel. É a primeira tela que
     um cliente novo vê — ela não pode depender de uma imagem ter carregado. */
  background:
    url("img/hero-entrada.jpg") right center/cover no-repeat,
    radial-gradient(900px 340px at 88% 12%, rgba(13,148,136,.55) 0%, rgba(13,148,136,0) 62%),
    linear-gradient(120deg,#241d63 0%,#3a2fa0 42%,var(--marca) 100%);
  color:#fff;align-items:center;
  box-shadow:var(--sombra-forte);
}
.hero-frase b{color:#fff}

/* prateleira de latas no hero */
.prateleira{display:flex;align-items:stretch;justify-content:center;gap:10px;position:relative;z-index:1}
.pl{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);
  box-shadow:var(--sombra);position:relative;overflow:hidden;
}
.pl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cor,var(--indigo))}
.pl .ico{line-height:1}
.pl .rot{font-size:var(--txt-xs);font-weight:var(--peso-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-top:6px}
.pl .val{font-weight:var(--peso-max);letter-spacing:-.9px;line-height:1.1;color:var(--cor,var(--tinta))}
.pl .obs{color:var(--tinta-3)}
.vs{
  display:grid;place-items:center;font-size:var(--txt-md);font-weight:var(--peso-max);color:var(--tinta-3);
  background:var(--card);border:1px solid var(--linha);border-radius:50%;width:54px;height:54px;margin:0 auto;box-shadow:var(--sombra);
}

/* ---------- paineis ---------- */
.painel{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);
  box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column;min-width:0;
}
.faixa{
  padding:11px 16px;font-size:var(--txt-lg);font-weight:var(--peso-bold);color:#fff;letter-spacing:-.1px;
  background:linear-gradient(100deg,var(--indigo) 0%,#6d5ce7 100%);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.faixa.teal{background:linear-gradient(100deg,var(--teal-escuro) 0%,var(--teal) 100%)}
.faixa small{font-weight:500;font-size:var(--txt-sm);opacity:.85}

.grade{display:grid;gap:14px;margin-bottom:16px;align-items:start}
/* o tamanho vive na regra de ajuste mais abaixo (.kpi .val{font-size:var(--txt-3xl)}) */

/* ---------- tabelas ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--txt-lg)}
/* tabular-nums: num painel de dinheiro a coluna de valores tem de alinhar virgula com
   virgula. Sem isso o "1" ocupa menos que o "8" e R$ 1.111,11 fica mais estreito que
   R$ 8.888,88 na mesma coluna — o olho perde a referencia e a tabela parece torta. */
th,td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--linha);white-space:nowrap;
  font-variant-numeric:tabular-nums}
th{font-size:var(--txt-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-3);font-weight:var(--peso-bold);background:var(--card);position:sticky;top:0;z-index:1}
td:first-child,th:first-child{text-align:left}
tbody tr:hover{background:var(--card-2)}
tfoot td{font-weight:var(--peso-bold);border-top:2px solid var(--linha-forte);border-bottom:none;background:var(--card)}
.rolagem{overflow:auto;border:1px solid var(--linha);border-radius:var(--raio-md)}

/* ---------- pular para o conteúdo ----------
   Fica fora da tela até receber o foco. São umas 40 paradas de teclado no cromo (abas,
   filtros, menu da conta) antes do conteúdo da aba começar. */
/* No telefone (375px de largura util ~323px) um menu de 262–320px ancorado a direita abre
   para FORA da tela e fica inalcancavel. Preso nas duas bordas, ele sempre cabe. */
@media (max-width:560px){
  .menu-cx,.menu-cx-periodo{
    position:fixed;left:12px;right:12px;top:auto;min-width:0;width:auto;
    max-height:70vh;overflow:auto;overscroll-behavior:contain;
  }
}
/* o fim da lista de cartoes: diz quantos estao na tela e abre o proximo lote */
.mais-cartoes{
  display:flex;flex-direction:column;align-items:center;gap:var(--esp-2);
  padding:22px 0 6px;grid-column:1 / -1;
}
.mais-cartoes span{font-size:var(--txt-md);color:var(--tinta-3)}

/* o numero do passo, em lugar do emoji de teclado "1️⃣" — que muda de desenho em cada
   sistema e nem sempre e lido como numero */
.passo-n{
  display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--raio-sm);
  background:var(--indigo);color:#fff;font-size:var(--txt-md);font-weight:var(--peso-max);margin-right:7px;
  vertical-align:-4px;
}

.pular{
  position:absolute;left:12px;top:-60px;z-index:10000;
  background:var(--indigo);color:#fff;font-weight:var(--peso-bold);font-size:var(--txt-md);
  padding:10px 16px;border-radius:0 0 12px 12px;text-decoration:none;
  transition:top .15s ease;
}
.pular:focus{top:0}

/* ---------- alvo de toque ----------
   Botõezinhos de 20px funcionam no mouse e erram no dedo. 40px é o mínimo que se acerta
   sem olhar duas vezes; `touch-action` tira o atraso de 300ms do toque. */
.bf-limpar,.btn-copiar,.btn-copiar-tit,.menu-mes,.kit-x{
  min-height:40px;min-width:40px;touch-action:manipulation;
  display:inline-flex;align-items:center;justify-content:center;
}
button,summary,a,input,select,label{touch-action:manipulation}

/* ---------- ícones (sprite de icones.js) ----------
   Um desenho só, três tamanhos. `currentColor` no traço: o ícone é da cor do texto que ele
   acompanha — no botão ativo, no selo vermelho, no fundo escuro, sem uma linha a mais. Era
   isso que o emoji não fazia: ele chega colorido de fábrica e não obedece ao tema. */
.sprite-icones{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px}
.ic-sm{width:15px;height:15px}
.ic-md{width:20px;height:20px}
.ic-lg{width:26px;height:26px}
.ic-xl{width:30px;height:30px}
/* ícone dentro de texto corrido: alinha pela linha de base, não pelo topo */
.ic.ic-txt{display:inline-block;vertical-align:-3px;margin-right:4px}

/* FOCO VISIVEL, uma regra para o app inteiro. Antes existia em UM componente so (as abas):
   quem navega por teclado atravessava 16 tipos de botao sem enxergar onde estava. O `:where`
   mantem especificidade zero, entao qualquer regra do componente continua mandando. */
:where(button,a,summary,[tabindex],input,select,textarea):focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:2px;
  border-radius:inherit;
}
/* a caixa de busca anula o outline do input e marca a BORDA externa — mas no teclado isso
   nao aparecia. Devolve o anel na propria caixa quando o foco esta dentro dela. */
.bf-busca-cx:focus-within{outline:2px solid var(--indigo);outline-offset:2px}

/* O mesmo alinhamento de digito para os numeros que NAO estao dentro de <table>: os cartoes
   grandes, os KPIs do topo, as linhas de grade. Sao os numeros que o dono olha primeiro —
   e os que mais pulavam de largura ao trocar o periodo. */
.pl .val,.trilha-val,.cst-n b,.lf b,.dg-topo b,.pv-linha>b,.ge-linha,.pn b,.prod-nums,.id-estoque{
  font-variant-numeric:tabular-nums;
}
.ponto{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none;margin-right:7px}
tr.grupo td{background:var(--card-2);font-weight:var(--peso-bold)}
td.filho:first-child{padding-left:26px;color:var(--tinta-2)}

/* ---------- avisos ---------- */
.aviso{
  display:flex;gap:11px;align-items:flex-start;background:#fff8e6;border:1px solid #f3e0ad;
  border-radius:var(--raio-md);padding:12px 14px;font-size:var(--txt-lg);color:#5c4a17;
}
.aviso.ok{background:#e9f6f3;border-color:#bde0d8;color:#12564c}
.aviso.info{background:#eef0ff;border-color:#ccd2fb;color:#2f2b73}
.aviso b{font-weight:var(--peso-bold)}
.aviso .ic{flex:none;font-size:var(--txt-xl);line-height:1.3}

/* ---------- premissas ---------- */
dialog{border:none;border-radius:var(--raio-lg);padding:0;box-shadow:0 28px 70px -20px rgba(15,18,34,.45);max-width:560px;width:calc(100% - 32px);color:var(--tinta)}
dialog::backdrop{background:rgba(15,18,34,.5)}
.dlg-topo{padding:20px 22px 0}
.dlg-topo h3{margin:0 0 4px;font-size:var(--txt-xl)}
.dlg-topo p{margin:0;font-size:var(--txt-md);color:var(--tinta-3)}
.dlg-corpo{padding:16px 22px 20px;display:grid;gap:13px}
.dlg-linha{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:var(--esp-3);align-items:center}
.dlg-linha small{display:block;color:var(--tinta-3);font-size:var(--txt-md);line-height:1.35}
.dlg-linha input{font-family:inherit;font-size:var(--txt-lg);padding:9px 11px;border:1px solid var(--linha);border-radius:var(--raio-sm);text-align:right;width:100%}
.dlg-pe{display:flex;gap:var(--esp-2);justify-content:flex-end;padding:0 22px 20px}
.nota{font-size:var(--txt-md);color:var(--tinta-3);margin:10px 0 0}

/* ---------- rodape ---------- */
.rodape{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:var(--esp-3);text-align:center}
.rodape .obs{font-size:var(--txt-md);color:var(--tinta-3);max-width:820px}
.selo{
  display:inline-flex;align-items:center;gap:var(--esp-2);background:#fff;border:1px solid var(--linha);
  border-radius:var(--raio-pill);padding:8px 16px;font-size:var(--txt-lg);box-shadow:0 1px 2px rgba(15,18,34,.06);
  text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,opacity .15s,transform .15s;
}
.selo:hover{box-shadow:0 8px 20px -10px rgba(15,18,34,.35)}
.selo .cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--peso-bold);color:#64748B}
.selo .por{color:#64748B;font-weight:500}
@media (max-width:900px){
  .hero{padding:20px}
  .vs{margin:0 auto}}
@media (max-width:640px){
  .wrap{padding:0 12px 44px}
  .chips{margin-left:0}
  .campo{min-width:calc(50% - 7px);flex:1}}
@media print{
  .topo-acoes,.filtros{display:none}
  body{background:#fff}
  .painel,.pl{box-shadow:none;break-inside:avoid}
  .hero{box-shadow:none}}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}}

/* ---------- missoes ---------- */
.missoes{display:grid;margin-bottom:16px}
.missao{grid-template-columns:44px minmax(0,1fr) auto;align-items:center;
}
@media (max-width:640px){
  .missao{grid-template-columns:40px minmax(0,1fr)}}

/* ---------- logos das plataformas ---------- */
.mini-logo{height:17px;width:auto;border-radius:4px;vertical-align:-4px;border:1px solid var(--linha);background:#fff}
/* o logo do marketplace dentro de uma linha de tabela ou de um selo: pequeno, sem empurrar
   a altura da linha — ele identifica a origem, nao disputa atencao com o numero.
   O seletor leva o `.ge-nome img` junto porque a foto do produto ali e 34x34 fixo, e essa
   regra mais especifica venceria a altura do logo. */
.ge-nome img.ge-canal{width:auto;height:15px;border-radius:3px;margin-left:0}

/* ---------- selo do marketplace no cartao do produto ----------
   Na cor da propria marca, porque e assim que ela se reconhece sem ler: amarelo do Mercado
   Livre, laranja da Shopee. O logo vai redondo, destacado do fundo colorido por um anel
   branco. O apelido da conta (multi-conta) entra depois do nome, com menos peso. */
.pc-canal{
  display:inline-flex;align-items:center;gap:7px;
  padding:3px 11px 3px 3px;border-radius:var(--raio-pill);
  font-size:var(--txt-sm);font-weight:var(--peso-max);letter-spacing:.015em;line-height:1;
  border:1px solid transparent;box-shadow:0 2px 6px -2px rgba(9,7,40,.3);
}
/* a arte vem retangular e ja traz o nome da marca dentro: cortar em circulo comia o desenho.
   Fica inteira, com cantos arredondados e um anel branco que a separa do fundo colorido —
   sem ele, o logo amarelo do ML sumia no amarelo do selo. */
.pc-canal img{
  height:21px;width:auto;border-radius:6px;display:block;
  background:#fff;box-shadow:0 0 0 2px #fff;
}
.pc-canal i{font-style:normal;font-weight:650;opacity:.72;font-size:var(--txt-xs);letter-spacing:.02em}
.pc-canal.e-ml{background:#ffe600;color:#2d3277;border-color:#e8d200}
.pc-canal.e-shopee{background:#ee4d2d;color:#fff;border-color:#d8431f}

/* ---------- barra "Onde vende": o filtro de canal a um clique ----------
   O canal desligado fica CINZA (logo sem cor, chip apagado) e o ligado fica colorido com a
   borda forte. E a diferenca que se entende sem legenda: cinza = fora da conta. */
.canais-barra{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:16px 0 2px}
.cb-rot{
  font-size:var(--txt-xs);font-weight:var(--peso-max);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-3);
}
.cb-chips{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.cb-chip{
  display:inline-flex;align-items:center;gap:var(--esp-2);
  padding:7px 15px 7px 8px;border-radius:var(--raio-pill);cursor:pointer;
  border:1.5px solid var(--linha);background:var(--card);color:var(--tinta-3);
  font-size:var(--txt-md);font-weight:var(--peso-bold);line-height:1;
  transition:border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.cb-chip.cb-todos{padding-left:15px}
.cb-chip img{height:20px;width:auto;border-radius:5px;display:block;filter:grayscale(1);opacity:.45;transition:.15s}
.cb-chip i{font-style:normal;font-weight:650;font-size:var(--txt-xs);opacity:.75;letter-spacing:.02em}
.cb-chip:hover{border-color:var(--linha-forte);color:var(--tinta-2);transform:translateY(-1px)}
.cb-chip.ativo{
  border-color:var(--indigo);color:var(--indigo);background:var(--card);
  box-shadow:0 3px 12px -5px rgba(79,70,229,.6);
}
.cb-chip.ativo img{filter:none;opacity:1}

/* ================= menu de seções (abas) ================= */
.abas{
  display:flex;overflow-x:auto;
  scrollbar-width:thin;
}
.aba{animation:aba-entra .18s ease-out}
@keyframes aba-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .abas{gap:var(--esp-1)}}
.formula{border-radius:var(--raio-md);flex-direction:column;gap:2px;
}

/* ===== topo mais baixo e enxuto ===== */
.marca-logo{width:36px;height:36px;border-radius:var(--raio-sm);font-size:var(--txt-lg)}
.marca h1{font-size:var(--txt-xl)}
.marca p{font-size:var(--txt-sm)}
.mes{padding:5px 10px;font-size:var(--txt-md)}
.meses{padding:3px;border-radius:var(--raio-sm)}
.filtros{margin-bottom:12px;border-radius:var(--raio-md)}
.campo{min-width:112px;gap:2px}
.campo select,.campo input{min-height:32px;padding:5px 8px;font-size:var(--txt-md);border-radius:var(--raio-sm)}
.campo label{font-size:var(--txt-2xs)}

/* ===== fórmula recolhida ===== */
.formula{
  background:transparent;border:none;padding:0;margin-top:2px;
  font-size:var(--txt-sm);color:var(--tinta-3);
}
.formula>summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;
  font-size:var(--txt-sm);font-weight:650;color:var(--tinta-3);
  border:1px dashed var(--linha-forte);border-radius:var(--raio-pill);padding:2px 10px;
}
.formula>summary::-webkit-details-marker{display:none}
.formula>summary:hover{color:var(--indigo);border-color:var(--indigo)}
.formula[open]>summary{color:var(--indigo);border-color:var(--indigo)}

/* ===== placar e missões mais baixos ===== */
.pl{padding:11px 13px}
.pl .val{font-size:var(--txt-3xl);margin:2px 0 0}
.pl .ico{font-size:var(--txt-xl)}
.pl .obs{font-size:var(--txt-sm)}
.missao{gap:10px}
.hero{padding:18px 20px;gap:var(--esp-4);border-radius:var(--raio-lg)}
.formula{display:inline-block;width:auto}

/* ===== palco: os dois marketplaces em destaque ===== */
.palco{overflow:hidden;border-radius:26px;margin-bottom:16px;
}
.palco::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 220px at 12% 115%, rgba(255,255,255,.12), transparent 70%);
}
.palco-cab{text-align:center;margin-bottom:18px;position:relative;z-index:1}
.palco-cab h2{
  margin:0;font-weight:var(--peso-max);letter-spacing:-.4px;
}
.palco-cab p{margin:4px 0 0;font-size:var(--txt-md)}
@media (max-width:900px){
  .palco{padding:18px 14px 20px;border-radius:var(--raio-xl)}}

/* ===== trilha do dinheiro: 4 passos, sem poluição ===== */
.trilha{
  display:flex;align-items:stretch;gap:6px;margin-bottom:16px;flex-wrap:wrap;position:relative;
}
.trilha-passo{
  flex:1;min-width:170px;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio-lg);padding:14px 16px;box-shadow:var(--sombra);
  border-top:4px solid var(--cor);
}
.trilha-passo.forte{
  box-shadow:0 16px 36px -18px rgba(12,163,12,.45), var(--sombra);
  border-color:rgba(12,163,12,.35);
}
/* as caixinhas de icone nasceram para emoji (font-size). Agora levam SVG: viram flex e
   emprestam a COR do contexto — o icone do cartao de prejuizo fica vermelho junto com o
   numero, coisa que o emoji nunca fez. */
.trilha-ico{display:flex;align-items:center;line-height:1;color:inherit}
.trilha-rot{font-size:var(--txt-sm);font-weight:var(--peso-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3);margin-top:6px}
.trilha-val{font-size:var(--txt-4xl);font-weight:var(--peso-max);letter-spacing:-1px;line-height:1.1;margin:2px 0 1px;color:var(--cor)}
.trilha-obs{font-size:var(--txt-sm);color:var(--tinta-3)}
.trilha-conta{flex-basis:100%}
@media (max-width:900px){
  .trilha-passo{min-width:calc(50% - 6px)}}
@media (max-width:560px){ .trilha-passo{min-width:100%}}


/* ===== missoes explicadas, no topo ===== */
.missoes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.missao{
  display:block;background:var(--card-2);border:1px solid var(--linha);border-left:4px solid var(--indigo);
  border-radius:var(--raio-lg);padding:12px 14px;box-shadow:none;
}
@media (max-width:900px){ .missoes{grid-template-columns:minmax(0,1fr)}}

/* ===== menu: cards maiores e separados ===== */
.abas{margin-top:10px;padding-bottom:4px}

/* ===== palco claro, com os dois marketplaces bem separados ===== */
.palco{
  background:linear-gradient(180deg,#f7f8fd 0%,#eef1fb 100%);padding:18px 18px 22px;
}
.palco::after{display:none}
/* ⚠️ Esta regra vem DEPOIS do @media(max-width:900px) que encolhe o titulo para 18px, e com
   a mesma especificidade — ou seja, ela anulava o ajuste de celular sem ninguem perceber.
   O tamanho de telefone foi para o fim do arquivo, onde vence de verdade. */
.palco-cab h2{color:var(--tinta);text-shadow:none;font-size:var(--txt-2xl)}
.palco-cab p{color:var(--tinta-3)}
/* divisor entre os dois */

/* ===== menu centralizado, grande e com destaque ===== */
.abas{
  flex:none;justify-content:center;gap:var(--esp-3);margin:6px auto 0;
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:8px;
  box-shadow:inset 0 1px 0 #fff;
}
@media (max-width:900px){
  .abas{gap:6px;padding:6px;border-radius:var(--raio-lg);justify-content:flex-start}}





/* ===== missões: emoji grande, logo do marketplace e a conta embaixo ===== */
.missao{position:relative;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.missao:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(24,28,73,.10)}
.missao.ganho{border-left-color:var(--bom);background:linear-gradient(180deg,#f6fbf6,var(--card-2) 58%)}
.missao.alerta{border-left-color:var(--atencao);background:linear-gradient(180deg,#fffaf0,#fffdf6 58%)}

/* ===== barra de período: título, datas e atalhos, cada um no seu lugar ===== */
.filtros{align-items:center;gap:var(--esp-3) 18px}
@media (max-width:980px){
  .filtros{align-items:stretch}}
.sim-card.bom{background:#f4fbf4;border-color:#cfe9cf}
.sim-card.bom b{color:var(--pos)}

/* ===== barra de período com profundidade e o ativo bem visível ===== */
.filtros{
  background:linear-gradient(180deg,#fff,#f7f8fd);
  border:1px solid var(--linha);border-left:5px solid var(--indigo);
  box-shadow:0 10px 26px rgba(24,28,73,.09),0 1px 0 #fff inset;
  padding:14px 18px;
}

/* ===== simulador: o botão escolhido salta ===== */

/* ===== o % de lucro como último cartão da trilha ===== */
.trilha-passo.forte .trilha-val{font-size:var(--txt-5xl)}

/* ===== aba Reposição: quando pedir, quanto pedir, se o caixa aguenta ===== */

/* ===== os campos da Reposição: compactos, com ícone e unidade ===== */

/* ================= CABEÇALHO: barra escura, separada do conteúdo ================= */
.topo{
  border-bottom:0;padding:16px 0 0;
  box-shadow:0 12px 30px rgba(16,18,40,.22);position:relative;
}
.topo::after{   /* fio de luz que fecha a barra */
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--indigo),#8b5cf6 45%,#0d9488);
}
.topo .marca-logo{
  background:linear-gradient(160deg,#6d63f2,var(--marca));border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 20px rgba(79,70,229,.45);color:#fff;
}
.topo .marca h1{color:#fff;font-size:var(--txt-2xl);letter-spacing:-.4px}
.topo .marca p{color:#a9aed6}
.topo .marca p b{color:#fff}

/* ações do topo: vidro escuro, sem parecer card do conteúdo */
.topo .btn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#e7e9fb;
  backdrop-filter:blur(6px);
}
.topo .btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.topo .btn-forte{
  background:linear-gradient(160deg,#6d63f2,var(--marca));border-color:#6d63f2;color:#fff;
  box-shadow:0 6px 16px rgba(79,70,229,.45);
}
.topo .btn-forte:hover{background:linear-gradient(160deg,#7b72f5,#5b52ea);color:#fff}
.topo .abas{gap:3px;margin-top:0;padding-bottom:0}
@media (max-width:640px){
  .topo{padding-top:12px}
  .topo .marca h1{font-size:var(--txt-xl)}}
@media print{ .topo{background:#fff;box-shadow:none} .topo .marca h1,.topo .marca p{color:#000}}
/* a guia ativa fica por cima do fio e encosta no conteúdo */
.topo{margin-bottom:0}
.topo::after{z-index:0}
.topo .abas{position:relative;z-index:1}
.wrap+.wrap,body>.wrap{padding-top:18px}

/* ===== Reposição achatada: mesma informação, menos altura ===== */
.rolagem{max-height:420px}
.nota.alerta{color:#8a5a00;background:#fff8e6;border:1px solid #f3e0ad;border-radius:var(--raio-sm);padding:7px 10px;margin-top:9px}

/* ================= botão de conectar o Mercado Livre ================= */
@keyframes bml-brilho{0%{left:-45%}55%{left:115%}100%{left:115%}}
.bml-txt{position:relative;z-index:1}
.bml-txt b{font-weight:900}
@keyframes bml-pulso{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.09);opacity:0}100%{opacity:0}}

/* ================================================================ painel vivo
   O painel nao carrega mais planilha: comeca vazio e mostra o que voce liga nele.
   Daqui pra baixo: o botao da Shopee, a tela de vazio e o recado que substituiu
   o alert do navegador. */

.btn-shopee{display:inline-flex;align-items:center;gap:7px}
.btn-shopee img{width:16px;height:16px;border-radius:4px;object-fit:cover}
.btn-shopee:hover{border-color:var(--rosa);color:var(--rosa)}

/* ---------- tela de painel vazio ---------- */
#tela-vazia{margin:26px 0 40px}

/* ---------- recado (no lugar do alert do navegador) ---------- */
#dlg-recado{max-width:520px}
.rec-topo{display:flex;gap:14px;align-items:flex-start;padding:22px 24px 0}
.rec-ico{display:flex;align-items:center;justify-content:center;line-height:1;color:var(--indigo)}
/* o tom do dialogo: deu certo, e aviso ou e erro. O emoji trazia a cor de fabrica; o SVG
   herda a do texto, entao a cor passa a ser dita — e fica igual a do resto do tema. */
.rec-ico.tom-bom{color:var(--pos)}
.rec-ico.tom-aviso{color:var(--deduz)}
.rec-ico.tom-erro{color:var(--neg)}
.rec-topo h3{margin:0 0 3px;font-size:var(--txt-2xl)}
.rec-topo p{margin:0;font-size:var(--txt-lg);color:var(--tinta-3);line-height:1.45}
.rec-corpo{padding:16px 24px 0;display:grid;gap:10px}
.rec-item{
  display:flex;gap:10px;align-items:flex-start;font-size:var(--txt-lg);line-height:1.5;
  color:var(--tinta-2);background:var(--card-2);border:1px solid var(--linha);
  border-radius:var(--raio-md);padding:11px 13px;
}
.rec-item b{color:var(--tinta)}
.rec-item .ri-ico{flex:0 0 auto;display:flex;align-items:center;line-height:1;margin-top:2px;color:inherit}
.rec-item.aviso{background:#fff8ea;border-color:#f3dcae}
.rec-item.erro{background:#fdeeee;border-color:#f3c9c9}
.rec-pe{display:flex;flex-wrap:wrap;gap:var(--esp-2);justify-content:flex-end;padding:18px 24px 22px}
@media (max-width:560px){
  .rec-pe{flex-direction:column-reverse}
  .rec-pe .btn{width:100%}}

/* a Shopee ao vivo usa o mesmo botao do ML, na cor dela */

/* ================================================================ painel de TODOS os produtos
   Vive em produtos.html, ao lado do painel do Vita+mais (que nao muda). */


/* cartao de cada produto */
.prod-card{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);
  padding:18px 20px;margin-bottom:14px;
}
.prod-cab{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.prod-cab>div{flex:1 1 220px;min-width:0}
.prod-cab h3{margin:0 0 3px;letter-spacing:-.3px}
.prod-cab p{margin:0;font-size:var(--txt-md);color:var(--tinta-3)}
.btn-custo{
  flex:none;font-family:inherit;font-size:var(--txt-lg);font-weight:var(--peso-bold);cursor:pointer;
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:9px 14px;
  color:var(--tinta-2);transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,opacity .15s,transform .15s;
}
.btn-custo:hover{border-color:var(--indigo);color:var(--indigo)}
.btn-custo.falta{background:#fff8ea;border-color:#f3dcae;color:var(--atencao-txt)}
/* custo que veio de outro produto pelo mesmo SKU: vale, mas nao foi digitado aqui */
.custo-origem{
  margin:0 0 14px;padding:9px 12px;border-radius:var(--raio-sm);
  background:#eef5ff;border:1px solid #dbe8ff;color:#24559c;font-size:var(--txt-md);line-height:1.5;
}
.ligar-busca{
  width:100%;padding:11px 13px;margin-bottom:12px;
  border:1px solid var(--linha);border-radius:var(--raio-sm);font-size:var(--txt-lg);background:var(--fundo);
  color:var(--tinta);
}
.ligar-lista{display:flex;flex-direction:column;gap:7px;max-height:48vh;overflow:auto}
.ligar-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:9px 11px;border:1px solid var(--linha);border-radius:var(--raio-sm);background:var(--fundo);
}
.ligar-item:hover{border-color:var(--indigo);background:var(--fundo-2)}
.ligar-item img,.ligar-sem{width:42px;height:42px;border-radius:var(--raio-sm);object-fit:cover;flex:none}
.ligar-sem{background:var(--fundo-2);border:1px dashed var(--linha)}
.ligar-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ligar-txt b{font-size:var(--txt-md);line-height:1.35;color:var(--tinta)}
.ligar-txt i{font-size:var(--txt-sm);color:var(--tinta-3);font-style:normal}
.ligar-sugere{
  flex:none;font-size:var(--txt-xs);font-weight:var(--peso-bold);padding:3px 8px;border-radius:var(--raio-pill);
  background:#eaf7ee;color:#1d7a33;
}
.id-chip.ligado{background:#eef5ff;border-color:#c7dcff;color:#24559c}
.id-chip-btn.destaque{background:#eef5ff;border-color:#c7dcff;color:#24559c;font-weight:600}
.btn-custo.herdado{background:#eef5ff;border-color:#c7dcff;color:#24559c}
.prod-aviso.emprestado{
  background:#eef5ff;border:1px solid #dbe8ff;border-radius:var(--raio-sm);
  padding:8px 11px;color:#24559c;
}

.prod-nums{display:grid}
.pn{background:var(--card-2);border:1px solid var(--linha)}
.pn span{display:block;font-weight:var(--peso-bold);letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:3px}
.pn b{letter-spacing:-.4px}
.pn.bom b{color:var(--bom,#0ca30c)}
.pn.ruim b{color:var(--neg)}
.pn.falta{background:#fff8ea;border-color:#f3dcae}
.pn.falta b{font-weight:var(--peso-bold);color:var(--atencao-txt)}
/* o número que o cartão existe para dizer: maior que os outros sete, e com a borda
   marcando de onde ele sai. Sem isto eram oito números do mesmo tamanho e o olho
   precisava ler os rótulos para achar o lucro. */
.pn.pn-destaque{background:var(--card);border-color:var(--linha-forte);
  box-shadow:0 1px 2px rgba(15,18,34,.05)}
.pn.pn-destaque b{font-size:23px;letter-spacing:-.7px;line-height:1.15}
.pn.pn-destaque span{color:var(--tinta-2)}
.pn.falta.pn-destaque b{font-size:var(--txt-lg)}
@media (max-width:620px){.pn.pn-destaque b{font-size:var(--txt-3xl)}}

.prod-vars{margin-top:14px;display:grid;gap:7px}
.pv-linha{display:grid;grid-template-columns:minmax(80px,140px) 1fr 54px;gap:10px;font-size:var(--txt-md)}
.pv-linha>span{color:var(--tinta-2)}
.pv-linha>b{text-align:right}
.pv-barra{height:9px;border-radius:var(--raio-pill);background:var(--card-2);overflow:hidden}
.pv-barra i{display:block;height:100%;border-radius:var(--raio-pill);background:var(--indigo)}

.prod-aviso{margin:13px 0 0;font-size:var(--txt-md);color:var(--tinta-3);line-height:1.5}

/* por canal */
.pc-linha{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:9px 12px;border:1px solid var(--linha);border-radius:var(--raio-md);
  background:var(--card-2);margin-bottom:6px;font-size:var(--txt-lg);
}
.pc-linha img{width:20px;height:20px;border-radius:5px;object-fit:cover;flex:none}
.pc-linha b{flex:1 1 130px}
.pc-linha span{color:var(--tinta-2)}
.pc-liq{color:var(--teal);font-weight:650}

/* ===== topo: as acoes principais grandes, as de apoio discretas ===== */
.topo-acoes{align-items:center;gap:10px}
.topo .btn-grande{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;font-size:var(--txt-base);font-weight:750;border-radius:var(--raio-md);
}
.topo .btn-mini{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 11px;font-size:var(--txt-md);font-weight:650;opacity:.82;
}
.topo .btn-mini:hover{opacity:1}
@media (max-width:760px){
  .topo-acoes{width:100%}
  .topo .btn-grande{flex:1 1 46%}
  .topo .btn-mini{flex:1 1 30%}}

/* ================================================================ gestao dos demais produtos
   Nome, SKU, foto, estoque e situacao vem da API do ML (api/ml/itens.js). */

/* aviso de base antiga, sem as fichas */
.faixa-fichas{
  display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;
  background:#fff8e6;border:1px solid #f3e0ad;border-radius:var(--raio-lg);
  padding:13px 16px;margin-bottom:14px;color:#5c4a17;font-size:var(--txt-lg);line-height:1.45;
}
.faixa-fichas>span{font-size:var(--txt-3xl)}
.faixa-fichas>div{flex:1 1 320px;min-width:0}

/* palco em versao clara, para quadro de dados */
.palco-claro{
  background:var(--card);border:1px solid var(--linha);
  box-shadow:0 2px 6px rgba(15,18,34,.05);padding:20px 22px 22px;border-radius:var(--raio-xl);
}
.palco-claro::after{display:none}
.palco-claro .palco-cab{text-align:left;margin-bottom:14px}
.palco-claro .palco-cab h2{color:var(--tinta);font-size:var(--txt-2xl);text-shadow:none}
.palco-claro .palco-cab p{color:var(--tinta-3)}

/* o que precisa de voce */
.al-cab{margin-bottom:12px}
.al-cab h2{margin:0;letter-spacing:-.3px}
.al-cab p{margin:3px 0 0;font-size:var(--txt-md);color:var(--tinta-3)}
.al-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.al-item{
  border:1px solid var(--linha);border-radius:var(--raio-md);padding:11px 13px;
}
.al-item.erro{border-color:#f6cdc9}
.al-item.aviso{border-color:#f3e0ad}
.al-ico{display:flex;align-items:center;line-height:1;color:inherit;margin-top:1px}
/* o "Resolvido" de cada ponto: discreto até a pessoa passar o mouse, porque ele não disputa
   com a mensagem — só precisa estar à mão quando o ponto já foi tratado */
/* o botão entra no fluxo, embaixo da mensagem: flutuando no canto ele espremia o título do
   produto, que é justamente o que precisa ser lido primeiro */
.al-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;align-items:start}
.al-item>.al-ico{grid-row:1;grid-column:1}
.al-item>div{grid-column:2}
.al-feito{
  grid-column:2;justify-self:start;margin-top:7px;
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--linha);background:var(--card);color:var(--tinta-2);
  font:700 11px/1 inherit;padding:7px 11px;border-radius:var(--raio-pill);cursor:pointer;
  transition:color .15s, background-color .15s, border-color .15s;
}
.al-feito:hover{border-color:#bfe3c9;background:#f3fbf6;color:var(--pos)}
.al-feito span{white-space:nowrap}
.al-feitos{color:var(--pos);font-weight:var(--peso-bold)}

/* lista zerada: a recompensa de ter tratado tudo, em vez de um quadro que some sem dizer nada */
.al-limpo{
  display:flex;align-items:center;gap:13px;padding:16px 18px;
  background:#f3fbf6;border:1px solid #bfe3c9;border-radius:var(--raio-md);color:var(--pos);
}
.al-limpo b{display:block;font-size:var(--txt-lg)}
.al-limpo span{display:block;font-size:var(--txt-md);color:var(--tinta-2);margin-top:2px}
.al-pe{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);margin-top:12px}
.al-mais{font-size:var(--txt-md);color:var(--tinta-3)}
.al-pe .btn{display:inline-flex;align-items:center;gap:7px}
.al-pe .btn[disabled]{opacity:.45;cursor:default}

.al-item b{letter-spacing:-.2px}
.al-item span:not(.al-ico){display:block;font-size:var(--txt-md);color:var(--tinta-2);margin-top:2px}

/* quadro de estoque e giro */
.ge-tabela{width:100%;overflow-x:auto}
.ge-linha{
  /* duas colunas novas: visitas e conversao */
  display:grid;grid-template-columns:minmax(200px,2fr) 100px 92px 84px 80px 90px 76px 68px 92px 96px;
  gap:9px;align-items:center;min-width:1040px;
  padding:10px 8px;border-bottom:1px solid var(--linha);font-size:var(--txt-md);
}
.ge-linha:last-child{border-bottom:0}
.ge-cab{
  font-size:var(--txt-sm);font-weight:var(--peso-bold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);border-bottom:1px solid var(--linha);
}
/* No celular a tabela tem 1040px e rola na horizontal. Sem isto, depois de dois dedos para a
   direita vocé vê números soltos: o nome do produto já saiu pela esquerda e o cabeçalho já
   subiu. Travando a primeira coluna e o cabeçalho, cada número continua tendo dono. */
.ge-tabela{position:relative}
.ge-cab{position:sticky;top:0;z-index:2;background:var(--card)}
.ge-nome{
  position:sticky;left:0;z-index:1;background:var(--card);
  display:flex;align-items:center;gap:9px;min-width:0;font-weight:650;
}
/* no cabeçalho a primeira célula é um <span> simples, não um .ge-nome — ela também trava */
.ge-cab>span:first-child{position:sticky;left:0;z-index:1;background:var(--card)}
.ge-nome img{width:34px;height:34px;border-radius:var(--raio-sm);object-fit:cover;flex:none;border:1px solid var(--linha)}
.ge-nome a{color:inherit;text-decoration:none}
.ge-nome a:hover{color:var(--indigo);text-decoration:underline}
.ge-sku{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--txt-sm);color:var(--tinta-3)}
.ge-bom{color:var(--pos);font-weight:650}
.ge-ruim{color:var(--neg);font-weight:650}
/* o ambar #ea8c00 dava 2,55:1 — o aviso de "o estoque acaba em 15 dias" era o texto
   MENOS legivel da tabela, bem no lugar que precisa ser lido. */
.ge-atencao{color:var(--deduz);font-weight:650}

/* cartao do produto: foto, titulo real e selos */
.prod-foto{width:56px;height:56px;border-radius:var(--raio-md);object-fit:cover;flex:none;border:1px solid var(--linha)}
.prod-cab h3 a{color:inherit;text-decoration:none}
.prod-cab h3 a:hover{color:var(--indigo);text-decoration:underline}
/* align-items: o selo do canal e mais alto que os outros (leva o logo redondo dentro) e sem
   isso os selos cinzas esticavam junto, com o texto desencontrado */
.prod-selos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.pc-selo{
  font-size:var(--txt-xs);font-weight:var(--peso-bold);letter-spacing:.02em;padding:3px 8px;border-radius:var(--raio-pill);
  background:var(--card-2);border:1px solid var(--linha);color:var(--tinta-2);
}
.pc-selo.full{background:#eaf7ee;border-color:#bfe3c9;color:var(--pos)}
.pc-selo.parado{background:#fff1f0;border-color:#f6cdc9;color:var(--neg)}
/* nota que o ML dá à ficha do anúncio: só aparece quando há o que arrumar */
.pc-selo.saude-ruim{background:#fff1f0;border-color:#f6cdc9;color:var(--neg)}
.pc-selo.saude-meia{background:#fff8ea;border-color:#f3dcae;color:#7a4b00}
.prod-envios{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px}
.pe-tag{
  font-size:var(--txt-sm);padding:4px 10px;border-radius:var(--raio-pill);
  background:var(--card-2);border:1px solid var(--linha);color:var(--tinta-2);
}
.pe-tag b{color:var(--tinta)}
@media (max-width:640px){
  .prod-foto{width:44px;height:44px}}

/* ID do anuncio e SKU com o quadradinho de copiar, como no Bling */
.prod-ids{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 0}
.id-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--txt-sm);color:var(--tinta-3);
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:3px 4px 3px 9px;
}
.id-chip b{color:var(--tinta-2);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--txt-sm)}
.btn-copiar{
  border:0;background:none;cursor:pointer;font-family:inherit;font-size:var(--txt-sm);line-height:1;
  color:var(--tinta-3);padding:3px 5px;border-radius:6px;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,opacity .15s,transform .15s;
}
.btn-copiar:hover{background:var(--linha);color:var(--indigo)}
.btn-copiar.copiado{color:var(--pos);font-weight:var(--peso-max)}

/* o titulo completo e longo: cabe em duas linhas e nao estica o cartao */
.prod-cab h3{font-size:var(--txt-xl);line-height:1.35;font-weight:var(--peso-bold)}
.al-item b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--txt-md);line-height:1.35;
}
.ge-nome{line-height:1.3}
.ge-nome a,.ge-nome>span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ================================================================ Radar do Ecommerce */
.quem{font-size:var(--txt-md);color:var(--tinta-3);align-self:center}

/* ===== quadradinhos de numero um grau menores (pedido do Elton) ===== */
.prod-nums{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:var(--esp-2)}
.pn{padding:8px 10px;border-radius:var(--raio-sm)}
.pn span{font-size:var(--txt-xs)}
.pn b{font-size:var(--txt-base)}
.pn.falta b{font-size:var(--txt-md)}

/* reposicao */
.repo-ajuste{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-md);
  padding:11px 14px;margin-bottom:14px;font-size:var(--txt-lg);color:var(--tinta-2);
}
.repo-ajuste label{display:flex;align-items:center;gap:7px}
.repo-ajuste input{
  width:72px;font-family:inherit;font-size:var(--txt-lg);text-align:center;
  border:1px solid var(--linha-forte);border-radius:var(--raio-sm);padding:6px 8px;background:var(--card);color:var(--tinta);
}
.repo-nota{margin-left:auto;font-size:var(--txt-md);color:var(--tinta-3)}
/* + a coluna Prazo (Fase 5): o prazo de entrega de cada produto */
.repo-linha{grid-template-columns:minmax(200px,2.2fr) 100px 80px 76px 84px 78px 96px 92px 100px}
.repo-sem{font-size:var(--txt-sm);color:var(--atencao-txt);font-style:normal}

/* missoes */
#missoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:var(--esp-3)}
.mi-card{
  display:flex;gap:var(--esp-3);align-items:flex-start;
  border:1px solid var(--linha);border-radius:var(--raio-lg);padding:14px 15px;
}
.mi-n{border:1px solid var(--linha);
}
.mi-corpo{min-width:0}
.mi-corpo b{display:block;letter-spacing:-.2px;line-height:1.35}
.mi-corpo p{margin:5px 0 0;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.45}
.mi-prod{font-weight:650;color:var(--tinta-3) !important;font-size:var(--txt-sm) !important}
.mi-ganho{
  display:inline-block;margin-top:9px;font-size:var(--txt-sm);font-weight:var(--peso-bold);color:var(--pos);
  background:#eaf7ee;border:1px solid #bfe3c9;border-radius:var(--raio-pill);padding:4px 10px;
}
/* o "Resolvido" da missao fica na mesma linha do ganho, a direita: a missao e um bloco de
   leitura e o botao nao pode disputar com o numero que ela veio mostrar */
.mi-corpo{display:flex;flex-direction:column;align-items:flex-start}
.mi-feito{margin-top:10px}
@media (min-width:560px){
  .mi-ganho{margin-right:var(--esp-2)}
  .mi-corpo{display:block}
  .mi-feito{margin-top:9px;vertical-align:top}}
@media (max-width:640px){ .repo-nota{margin-left:0;width:100%}}

/* o que procurar na caixa de entrada, enquanto o e-mail nao tem a marca do Radar */
.entrar-dica{
  text-align:left;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-md);
  padding:14px 15px;margin:16px 0 4px;font-size:var(--txt-md);color:var(--tinta-2);
}
.entrar-dica>b{display:block;font-size:var(--txt-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:9px}
.ed-linha{display:flex;gap:10px;align-items:baseline;padding:4px 0}
.ed-linha span{flex:none;width:58px;font-size:var(--txt-sm);color:var(--tinta-3)}
.ed-linha b{font-size:var(--txt-lg);color:var(--tinta)}
.entrar-dica p{margin:10px 0 0;font-size:var(--txt-md);color:var(--tinta-3);line-height:1.5}

/* a marca virou a logo 3D do Radar */
img.marca-logo{object-fit:contain;background:none;border-radius:var(--raio-md);padding:0}

/* ================================================================ menus do Radar
   Um so desenho para period0, situacao, canal, ordenacao e conta: <details> com
   botao de duas linhas (rotulo em cima, escolha embaixo) e painel flutuante. */
/* ---------- os filtros no telefone ----------
   No computador isto e invisivel: o <summary> some e a barra fica aberta como sempre — mesmo
   com o <details> fechado, porque a regra abaixo devolve o display. No telefone vira um bloco
   que abre, com a contagem de filtros ativos ao lado, e devolve a dobra para o conteudo. */
.filtros-abrir{display:none}
.filtros-cx>.barra-filtros{display:flex}       /* vale inclusive com o details fechado */

@media (max-width:760px){
  .filtros-abrir{
    display:flex;align-items:center;gap:var(--esp-2);cursor:pointer;list-style:none;
    background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-md);
    padding:11px 14px;margin-bottom:12px;font-size:var(--txt-md);font-weight:var(--peso-bold);
    color:var(--tinta-2);
  }
  .filtros-abrir::-webkit-details-marker{display:none}
  .filtros-abrir .ic{color:var(--tinta-3)}
  .filtros-abrir b{
    margin-left:auto;font-size:var(--txt-sm);font-weight:var(--peso-bold);
    color:var(--indigo);background:#eef0ff;border-radius:var(--raio-pill);padding:3px 9px;
  }
  .filtros-abrir b:empty{display:none}
  .filtros-cx:not([open])>.barra-filtros{display:none}
  .filtros-cx[open] .filtros-abrir{border-radius:var(--raio-md) var(--raio-md) 0 0;margin-bottom:0}
  .filtros-cx[open]>.barra-filtros{border-radius:0 0 var(--raio-md) var(--raio-md);border-top:0}
}

.barra-filtros{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);
  padding:12px 14px;margin-bottom:14px;
}
.menu{position:relative}
.menu-botao{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  border:1px solid var(--linha-forte);border-radius:var(--raio-md);background:var(--card);
  padding:8px 12px;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,opacity .15s,transform .15s;user-select:none;
}
.menu-botao::-webkit-details-marker{display:none}
.menu-botao:hover{border-color:var(--indigo);box-shadow:0 4px 14px -6px rgba(79,70,229,.5)}
details[open]>.menu-botao{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.14)}
/* a caixinha do icone no gatilho do filtro: era emoji de 16px, agora e SVG — vira flex para
   centralizar e pega a cor do rotulo, em vez de chegar colorido de fora */
.mb-ico{display:flex;align-items:center;justify-content:center;color:var(--tinta-3)}
.mb-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mb-txt i{font-style:normal;font-size:var(--txt-xs);font-weight:var(--peso-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.mb-txt b{font-size:var(--txt-lg);color:var(--tinta);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-seta{color:var(--tinta-3);font-size:var(--txt-xs);margin-left:2px}
details[open] .mb-seta{color:var(--indigo)}

.menu-cx{
  position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:262px;
  background:var(--card);border:1px solid var(--linha-forte);border-radius:var(--raio-lg);
  box-shadow:0 26px 60px -22px rgba(15,18,34,.45), 0 2px 8px rgba(15,18,34,.08);
  padding:8px;max-height:min(70vh,520px);overflow:auto;
}
.menu-cx-periodo{min-width:320px}
.menu-titulo{
  font-size:var(--txt-xs);font-weight:var(--peso-max);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-3);padding:9px 10px 6px;
}
.menu-itens{display:flex;flex-direction:column;gap:1px}
.menu-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:0;background:none;font-family:inherit;cursor:pointer;
  padding:9px 10px;border-radius:var(--raio-sm);color:var(--tinta-2);transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s,opacity .12s,transform .12s;text-decoration:none;
}
.menu-item:hover{background:var(--card-2)}
.menu-item.ativo{background:rgba(79,70,229,.09)}
.menu-item.ativo b{color:var(--indigo)}
.mi-ico{flex:none;width:22px;display:flex;align-items:center;justify-content:center;color:var(--tinta-3)}
.menu-item>span:last-child{display:flex;flex-direction:column;min-width:0}
.menu-item b{font-size:var(--txt-lg);font-weight:650;color:var(--tinta);line-height:1.3}
.menu-item i{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3);margin-top:1px;line-height:1.35}
.menu-check input{width:auto;accent-color:var(--indigo);margin:0 2px}
.menu-vazio{display:block;padding:8px 10px;font-size:var(--txt-md);color:var(--tinta-3)}
.menu-pe{border-top:1px solid var(--linha);margin-top:6px;padding:7px 4px 2px}
.menu-link{
  border:0;background:none;font-family:inherit;font-size:var(--txt-md);font-weight:var(--peso-bold);
  color:var(--indigo);cursor:pointer;padding:6px 8px;border-radius:var(--raio-sm);
}
.menu-link:hover{background:var(--card-2)}
/* sem filtro ligado não há o que tirar: o botão diz isso em vez de fingir que faz algo */
.menu-link:disabled{opacity:.42;cursor:default}
.menu-link:disabled:hover{background:transparent}

/* meses em grade, dentro do menu de periodo */
.menu-meses{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 6px}
.menu-mes{
  border:1px solid var(--linha);background:var(--card-2);border-radius:var(--raio-sm);
  font-family:inherit;font-size:var(--txt-md);font-weight:650;color:var(--tinta-2);
  padding:7px 4px;cursor:pointer;transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s,opacity .12s,transform .12s;
}
.menu-mes:hover{border-color:var(--indigo);color:var(--indigo);background:var(--card)}
.menu-datas{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--esp-2);padding:4px 8px 6px}
.menu-datas label{display:flex;flex-direction:column;gap:var(--esp-1);font-size:var(--txt-sm);color:var(--tinta-3);font-weight:var(--peso-bold)}
.menu-datas input{
  font-family:inherit;font-size:var(--txt-md);padding:7px 9px;color:var(--tinta);
  border:1px solid var(--linha-forte);border-radius:var(--raio-sm);background:var(--card);
}
.menu-datas .btn{padding:8px 14px}

/* pesquisa */
.bf-busca{flex:1 1 330px;min-width:0}
.bf-busca-cx{
  display:flex;align-items:center;border:1px solid var(--linha-forte);
  border-radius:var(--raio-md);background:var(--card);overflow:hidden;
}
.bf-busca-cx:focus-within{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.bf-abas{display:flex;flex:none;border-right:1px solid var(--linha)}
.bf-aba{
  border:0;background:var(--card-2);font-family:inherit;font-size:var(--txt-sm);font-weight:var(--peso-max);
  color:var(--tinta-3);padding:11px 11px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,opacity .15s,transform .15s;letter-spacing:.02em;
}
.bf-aba:hover{color:var(--indigo)}
.bf-lupa{padding:0 2px 0 10px;font-size:var(--txt-md);opacity:.6}
.bf-busca-cx input{border:0;flex:1;min-width:0;padding:10px;font-family:inherit;font-size:var(--txt-lg);background:none;color:var(--tinta)}
.bf-busca-cx input:focus{outline:none}
.bf-limpar{border:0;background:none;cursor:pointer;color:var(--tinta-3);font-size:var(--txt-md);padding:0 12px}
.bf-limpar:hover{color:var(--neg)}
.bf-zerar{
  border:1px solid transparent;background:#fff1f0;color:var(--neg);font-family:inherit;
  font-size:var(--txt-md);font-weight:var(--peso-bold);padding:8px 12px;border-radius:var(--raio-sm);cursor:pointer;
}
.bf-zerar:hover{border-color:#f6cdc9}
.bf-conta{margin-left:auto;font-size:var(--txt-md);color:var(--tinta-3);white-space:nowrap}

/* menu da conta, no topo escuro */
.menu-conta{margin-left:auto}
.topo .menu-botao{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.topo .menu-botao:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35)}
.topo .mb-txt i{color:#a9aed6}
.topo .mb-txt b{color:#fff;max-width:190px}
.topo .mb-seta{color:#a9aed6}
.mb-avatar{
  flex:none;width:30px;height:30px;border-radius:var(--raio-sm);display:grid;place-items:center;
  background:linear-gradient(140deg,#6d63f2,var(--marca));color:#fff;font-size:var(--txt-md);font-weight:var(--peso-max);
  overflow:hidden;
}
.mb-avatar img{width:100%;height:100%;object-fit:contain}
.menu-cx-conta{left:auto;right:0;min-width:296px}

/* a marca do topo com a logo em destaque */
.marca img.marca-logo{width:46px;height:46px;filter:drop-shadow(0 6px 14px rgba(74,222,128,.28))}
.marca h1 span{color:#a9aed6;font-weight:600}

@media (max-width:760px){
  .menu-cx{left:0;right:auto;min-width:min(88vw,320px)}
  .menu-cx-conta{right:0;left:auto}
  .bf-conta{margin-left:0;width:100%}
  .menu-conta{margin-left:0}}

/* ================================================================ hero de entrada
   Duas colunas: a marca de um lado, o acesso do outro. No celular vira uma so. */
.tela-hero{margin:0;min-height:100vh;background:#0d0b2b}
.hero{display:grid;grid-template-columns:1.1fr .9fr;min-height:100vh}

.hero-marca{
  position:relative;overflow:hidden;display:flex;align-items:center;
  padding:56px 48px;color:#fff;
  background:
    radial-gradient(900px 420px at 18% 8%, rgba(74,222,128,.16) 0%, rgba(74,222,128,0) 62%),
    linear-gradient(150deg,#0d0b2b 0%,#231c73 52%,var(--marca) 120%);
}
/* véu escuro na faixa do texto, pelo mesmo motivo do hero do painel */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,11,43,.90) 0%,rgba(13,11,43,.70) 42%,rgba(13,11,43,.18) 74%,rgba(13,11,43,0) 100%);
}
.hero-conteudo,.hero-acesso,.hero-luz{position:relative;z-index:1}
.hero-luz{
  position:absolute;inset:auto auto -30% -20%;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle, rgba(74,222,128,.22), transparent 62%);pointer-events:none;
}
.hero-conteudo{max-width:520px}
.hero-logo{object-fit:contain;margin-bottom:22px;
  filter:drop-shadow(0 26px 50px rgba(74,222,128,.32));
  animation:none;
}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero-marca h1{margin:0;font-weight:var(--peso-max)}
.hero-frase{margin:12px 0 30px;line-height:1.55;max-width:420px}
.hero-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.hero-lista li{display:flex;gap:13px;align-items:flex-start}
.hero-lista span{
  flex:none;width:38px;height:38px;border-radius:var(--raio-sm);display:grid;place-items:center;font-size:var(--txt-xl);border:1px solid rgba(255,255,255,.16);
}
.hero-lista b{display:block;font-size:var(--txt-base);margin-bottom:2px}
.hero-lista div{font-size:var(--txt-md);color:rgba(255,255,255,.68);line-height:1.5}
.hero-assina{display:flex;align-items:center;gap:9px;margin-top:38px;font-size:var(--txt-md);color:rgba(255,255,255,.6)}
.hero-assina .sc-logo{
  width:26px;height:26px;border-radius:var(--raio-sm);display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;font-weight:var(--peso-max);font-size:var(--txt-sm);
}
.hero-assina b{color:rgba(255,255,255,.88)}

/* O mesmo selo no rodapé do painel não tinha estilo nenhum: o "C" da Castriani saía como
   uma letra solta antes da frase, parecendo erro de digitação. Aqui ele é o mesmo
   quadradinho da tela de entrada, só que no tema claro. */
.selo-castriani{display:inline-flex;align-items:center;gap:var(--esp-2)}
.selo-castriani .sc-logo{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;
  background:var(--tinta);color:#fff;font-weight:var(--peso-max);font-size:var(--txt-xs);letter-spacing:.02em;
}

.hero-acesso{display:flex;align-items:center;justify-content:center;background:var(--card);padding:48px 28px}
.acesso-cx{width:100%;max-width:370px;text-align:center}
.acesso-logo{width:70px;height:70px;object-fit:contain;margin-bottom:16px;display:none}
.acesso-cx h2{margin:0 0 6px}
.acesso-sub{margin:0 0 20px;font-size:var(--txt-lg);color:var(--tinta-3);line-height:1.55}
.acesso-sub b{color:var(--tinta-2)}
.entrar-rot{display:block;text-align:left;font-size:var(--txt-sm);font-weight:var(--peso-max);letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:6px}
.entrar-campo{
  width:100%;padding:13px 14px;font-size:var(--txt-base);font-family:inherit;box-sizing:border-box;
  border:1px solid var(--linha-forte);border-radius:var(--raio-md);background:var(--card);color:var(--tinta);
}
.entrar-campo:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.16)}
.entrar-btn{width:100%;margin-top:12px;justify-content:center}
.entrar-erro{
  margin:14px 0 0;font-size:var(--txt-md);color:var(--neg);background:#fff1f0;
  border:1px solid #f6cdc9;border-radius:var(--raio-sm);padding:10px 12px;text-align:left;line-height:1.5;
}
.entrar-erro.vazio{display:none}
.entrar-ok{font-size:40px;margin-bottom:8px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-marca{padding:40px 24px 34px}
  .hero-logo{width:96px;height:96px}
  .hero-marca h1{font-size:var(--txt-5xl)}
  .hero-acesso{padding:34px 22px 48px}}
@media (max-width:520px){
  .hero-lista{gap:11px}
  .hero-lista div{font-size:var(--txt-md)}}

/* ================================================================ cena de espera
   A logo 3D com o pulso do radar enquanto o app busca ou calcula. */
.cena{
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:rgba(13,11,43,.82);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .22s ease, visibility .22s;
}
.cena.aberta{opacity:1;visibility:visible}

/* ---------- a espera que sai da frente ----------
   No painel de quem tem muitas contas a abertura passa de meio minuto, e nesse tempo todo a
   tela ficava embaçada e sem clique — com o conteúdo JÁ desenhado por baixo. Esperar é
   normal; ficar impedido de usar o que já carregou, não. Depois de alguns segundos (ou num
   clique, ou no Esc) a cena vira um cartão no canto: continua dizendo em que etapa está,
   e devolve o painel. */
.cena.encolhida{
  inset:auto 18px 18px auto;      /* canto inferior direito */
  display:block;width:min(310px,calc(100vw - 36px));
  background:rgba(13,11,43,.94);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--raio-lg);
  box-shadow:0 18px 44px -18px rgba(9,7,40,.75);
  cursor:default;
}
.cena.encolhida .cena-cx{
  flex-direction:row;align-items:center;text-align:left;gap:var(--esp-3);
  padding:13px 15px;max-width:none;
}
/* o radar de 128px vira um selo de 34px: a mesma marca, no tamanho de recado */
.cena.encolhida .cena-radar{width:34px;height:34px;margin:0;flex:none}
.cena.encolhida .cena-radar img{width:34px;height:34px;filter:none}
.cena.encolhida .cena-onda{display:none}
.cena.encolhida .cena-titulo{font-size:var(--txt-lg);font-weight:var(--peso-bold)}
.cena.encolhida .cena-sub{
  font-size:var(--txt-sm);margin-top:2px;min-height:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* a barra fina atravessa o rodapé do cartão, para continuar dizendo que há trabalho rolando */
.cena.encolhida .cena-cx{position:relative}
.cena.encolhida .cena-barra{
  position:absolute;left:15px;right:15px;bottom:7px;width:auto;margin:0;height:3px;
}
.cena-cx{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;max-width:340px}
.cena-radar{position:relative;width:128px;height:128px;display:grid;place-items:center;margin-bottom:22px}
.cena-radar img{
  width:112px;height:112px;object-fit:contain;position:relative;z-index:2;
  filter:drop-shadow(0 18px 38px rgba(74,222,128,.42));
  animation:cena-respira 2.4s ease-in-out infinite;
}
@keyframes cena-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.cena-onda{
  position:absolute;inset:0;border-radius:32px;border:2px solid rgba(74,222,128,.55);
  animation:cena-pulso 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.cena-onda.o2{animation-delay:.8s}
.cena-onda.o3{animation-delay:1.6s}
@keyframes cena-pulso{
  0%{transform:scale(.86);opacity:.75}
  100%{transform:scale(1.6);opacity:0}
}
.cena-titulo{color:#fff;font-size:var(--txt-xl);font-weight:750;letter-spacing:-.3px;line-height:1.35}
.cena-sub{color:rgba(255,255,255,.66);font-size:var(--txt-md);margin-top:6px;line-height:1.5;min-height:19px}
.cena-barra{
  width:190px;height:4px;border-radius:var(--raio-pill);margin-top:20px;overflow:hidden;
  background:rgba(255,255,255,.14);
}
.cena-barra i{
  display:block;width:40%;height:100%;border-radius:var(--raio-pill);
  background:linear-gradient(90deg,var(--marca),#4ade80);
  animation:cena-anda 1.25s ease-in-out infinite;
}
@keyframes cena-anda{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}
@media (prefers-reduced-motion:reduce){
  .cena-radar img,.cena-onda,.cena-barra i{animation:none}}

/* ================================================================ tela de conexao
   Primeira coisa que o cliente ve. Um caminho so, no centro, com o que vai acontecer. */
/* a primeira tela de quem ainda nao buscou nada: o radar ao fundo, bem fraco, para a espera
   nao parecer uma pagina em branco. Arte POR CIMA do que ja havia, nunca no lugar. */
.vazio{
  position:relative;display:grid;place-items:center;padding:44px 18px 64px;overflow:hidden;
  background:url("img/fundo-vazio.jpg") center/cover no-repeat;
  border-radius:var(--raio-xl);
}
.vazio::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,11,43,.72),rgba(13,11,43,.88));
}
.vazio-cx,.vazio-luz{position:relative;z-index:1}
.vazio-luz{
  position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:820px;height:520px;pointer-events:none;
  background:radial-gradient(circle at 50% 40%, rgba(79,70,229,.14), rgba(74,222,128,.08) 42%, transparent 68%);
}
.vazio-cx{position:relative;z-index:1;max-width:560px;width:100%;text-align:center}
.vazio-logo{
  width:112px;height:112px;object-fit:contain;margin-bottom:18px;
  filter:drop-shadow(0 22px 44px rgba(74,222,128,.3));
  animation:none;
}
.vazio-cx h2{margin:0 0 10px;font-size:var(--txt-4xl);line-height:1.22;letter-spacing:-.7px;font-weight:var(--peso-max)}
.vazio-sub{margin:0 auto 26px;font-size:var(--txt-base);line-height:1.6;max-width:460px}

.vazio-passos{
  display:grid;gap:10px;text-align:left;margin-bottom:24px;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:16px;
}
.vp{display:flex;gap:var(--esp-3);align-items:flex-start}
.vp-n{
  flex:none;width:26px;height:26px;border-radius:var(--raio-sm);display:grid;place-items:center;
  background:linear-gradient(140deg,#6d63f2,var(--marca));color:#fff;font-size:var(--txt-md);font-weight:var(--peso-max);
}
.vp b{display:block;font-size:var(--txt-lg);letter-spacing:-.2px;margin-bottom:1px}
.vp i{font-style:normal;font-size:var(--txt-md);color:var(--tinta-3);line-height:1.45}

/* o botao de conectar: alvo grande, logo do canal e o que acontece ao clicar */
.conectar{
  display:flex;align-items:center;gap:14px;width:100%;cursor:pointer;
  font-family:inherit;text-align:left;padding:14px 18px;border-radius:var(--raio-lg);
  border:1px solid rgba(255,214,10,.55);
  background:linear-gradient(135deg,#ffe97a 0%,#ffd60a 52%,#f7c600 100%);
  box-shadow:0 14px 30px -12px rgba(247,198,0,.65), 0 1px 0 rgba(255,255,255,.7) inset;
  transition:transform .18s ease, box-shadow .18s ease;
}
.conectar:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(247,198,0,.8)}
.conectar:active{transform:translateY(0)}
.conectar:disabled{filter:grayscale(.4) brightness(.97);cursor:progress;transform:none}
.ct-logo{
  flex:none;width:44px;height:44px;border-radius:var(--raio-md);overflow:hidden;background:#fff;
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(120,90,0,.22);
}
.ct-logo img{width:100%;height:100%;object-fit:cover}
.ct-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.ct-txt b{font-size:var(--txt-xl);color:#3b2f00;letter-spacing:-.3px}
.ct-txt i{font-style:normal;font-size:var(--txt-md);color:#7a6400;margin-top:2px}
.ct-seta{font-size:var(--txt-2xl);color:#3b2f00;opacity:.55}
.conectar:hover .ct-seta{opacity:1;transform:translateX(3px);transition:.18s}

.vazio-pe{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:18px}
.vp-selo{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--txt-sm);font-weight:650;color:var(--tinta-3);
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-pill);padding:5px 11px;
}
.vazio-nota{display:block;margin-top:14px;font-size:var(--txt-sm)}
@media (max-width:560px){
  .vazio-cx h2{font-size:var(--txt-3xl)}
  .conectar{padding:13px 14px;gap:11px}
  .ct-txt b{font-size:var(--txt-base)}}

/* ================================================================ graficos
   Um card por assunto, em grade que se ajusta sozinha. */
.gr-cab{margin-bottom:14px}
.gr-cab h2{margin:0;font-size:var(--txt-3xl);letter-spacing:-.5px}
.gr-cab p{margin:4px 0 0;font-size:var(--txt-md);color:var(--tinta-3)}
.gr-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.gr-card{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);
  padding:18px 20px 20px;box-shadow:0 2px 6px rgba(15,18,34,.05);min-width:0;
}
.gr-largo{grid-column:1 / -1}
.gr-card-cab{margin-bottom:14px}
.gr-card-cab b{display:block;font-size:var(--txt-base);letter-spacing:-.3px}
.gr-card-cab i{font-style:normal;font-size:var(--txt-md);color:var(--tinta-3);display:block;margin-top:2px}
.gr-tela{position:relative;height:230px}
.gr-tela-alta{height:280px}
.gr-nota{
  margin:12px 0 0;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.5;
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:9px 12px;
}
/* ---------- estados vazios ----------
   Eram ~20 telas resolvidas com um parágrafo cinza solto no meio do nada: o gráfico sem
   dados, a lista de pedidos do período, o simulador antes do primeiro preço. Texto nu num
   espaço grande parece tela quebrada, não "ainda não há o que mostrar". O ícone de caixa
   aberta acima da frase diz, antes da leitura, que está vazio DE PROPÓSITO.
   Feito por ::before para valer nos ~20 pontos de uma vez, sem tocar no JS de cada tela. */
.gr-vazio,.vg-vazio,.pd-vazio,.sim-vazio{text-align:center}
/* a caixa 3D no lugar do ícone cinza: o estado vazio deixa de parecer "faltou carregar" e
   passa a parecer o que é — não há o que mostrar ainda. Arte em PNG com fundo recortado,
   então funciona igual no cartão branco, no amarelo do aviso e no verde da lista limpa. */
.gr-vazio::before,.vg-vazio::before,.pd-vazio::before,.sim-vazio::before{
  content:"";display:block;width:76px;height:76px;margin:0 auto 10px;opacity:1;
  background-image:url("img/vazio.png") !important;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a9bb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5h4l1.5 3h6l1.5-3h4'/%3E%3Cpath d='M5.3 6.2 3.5 13.5v4a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-4l-1.8-7.3a2 2 0 0 0-1.9-1.5H7.2a2 2 0 0 0-1.9 1.5Z'/%3E%3C/svg%3E");
}
.gr-vazio{margin:0;padding:26px 4px;font-size:var(--txt-md);color:var(--tinta-3);text-align:center;line-height:1.55}

/* mapa */
.gr-mapa-cx{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:18px;align-items:center}
.gr-svg{width:100%;height:auto;max-height:420px;display:block}
.gr-svg path{transition:filter .15s}
.gr-svg path:hover{filter:brightness(.92)}
.gr-uf{font-size:var(--txt-base);font-weight:var(--peso-bold);fill:#4c5168;text-anchor:middle;pointer-events:none}
.gr-uf.claro{fill:#fff}
.gr-ranking{display:flex;flex-direction:column;gap:9px;min-width:0}
.gr-legenda{display:flex;align-items:center;gap:7px;font-size:var(--txt-sm);color:var(--tinta-3);margin-bottom:3px}
.gl-fraco,.gl-forte{width:16px;height:10px;border-radius:3px;border:1px solid var(--linha)}
.gl-fraco{background:#eef0f7}
.gl-forte{background:var(--marca);border-color:var(--marca)}
.gr-linha{display:flex;align-items:center;gap:9px;font-size:var(--txt-md);color:var(--tinta-2);min-width:0}
.gr-linha b{flex:none;font-size:var(--txt-md);color:var(--tinta)}
.gr-linha>span:last-child{flex:none;color:var(--tinta-3);font-size:var(--txt-sm);white-space:nowrap}
.gr-barra{flex:1;height:8px;border-radius:var(--raio-pill);background:var(--card-2);border:1px solid var(--linha);overflow:hidden;min-width:40px}
.gr-barra i{display:block;height:100%;border-radius:var(--raio-pill);background:linear-gradient(90deg,#6d63f2,var(--marca))}

/* cidades */
.gr-tabela{display:flex;flex-direction:column;gap:9px}
.gr-pos{
  flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  background:var(--card-2);border:1px solid var(--linha);font-size:var(--txt-xs);font-weight:var(--peso-max);color:var(--tinta-3);
}
.gr-cidade{
  flex:none;width:33%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--txt-md);font-weight:650;
}
.gr-rs{color:var(--tinta-3);font-size:var(--txt-sm)}
@media (max-width:820px){
  .gr-mapa-cx{grid-template-columns:1fr}
  .gr-cidade{width:42%}}

/* o titulo do produto: clicavel de verdade (com seta) e copiavel ao lado */
.prod-tit{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.prod-tit a{
  color:var(--indigo);text-decoration:none;
  border-bottom:1px solid rgba(79,70,229,.28);transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,opacity .15s,transform .15s;
}
.prod-tit a:hover{border-bottom-color:var(--indigo);color:var(--indigo-escuro)}
.prod-ir{font-size:var(--txt-sm);margin-left:5px;opacity:.65;vertical-align:1px}
.prod-tit a:hover .prod-ir{opacity:1}
.btn-copiar-tit{font-size:var(--txt-md);padding:2px 6px;flex:none;margin-top:1px}
.id-chip-btn{cursor:pointer;font-family:inherit;color:var(--tinta-3);transition:.15s}
.id-chip-btn:hover{border-color:var(--indigo);color:var(--indigo)}
.id-chip-btn b{font-family:inherit;font-size:var(--txt-sm)}

/* ================================================================ abas do Radar
   Controle segmentado: um trilho com relevo e a aba ativa em destaque, centralizado. */
.abas-radar{
  display:inline-flex;gap:var(--esp-1);margin:0 auto 16px;padding:5px;
  background:linear-gradient(180deg,#eef0f7,#e7eaf4);
  border:1px solid var(--linha);border-radius:var(--raio-lg);
  max-width:100%;overflow-x:auto;scrollbar-width:none;
  /* as 8 abas nao cabem num telefone e a barra de rolagem esta escondida: sem a borda
     esmaecida a direita, nada diz que ha mais abas ali. O scroll-snap faz cada aba parar
     inteira, em vez de cortada no meio. */
  scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
}
.abas-radar::-webkit-scrollbar{display:none}
.ar-aba{scroll-snap-align:center}
/* quando tudo cabe, nada precisa desaparecer */
@media (min-width:1100px){ .abas-radar{mask-image:none;-webkit-mask-image:none} }
#conteudo>.abas-radar{display:flex;width:fit-content}
.ar-aba{
  display:inline-flex;align-items:center;gap:var(--esp-2);white-space:nowrap;
  border:1px solid transparent;background:transparent;color:var(--tinta-2);
  font-family:inherit;font-size:var(--txt-lg);font-weight:650;letter-spacing:-.15px;
  padding:9px 16px;border-radius:var(--raio-md);cursor:pointer;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ar-aba .ic{opacity:.62;transition:opacity .18s ease, transform .18s ease}
.ar-aba:hover{color:var(--tinta);background:rgba(255,255,255,.7)}
.ar-aba:hover .ic{opacity:.9}
.ar-aba.ativa{
  background:linear-gradient(180deg,#6d63f2,var(--marca));color:#fff;font-weight:var(--peso-bold);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-1px);
}
.ar-aba.ativa .ic{opacity:1}
.ar-aba:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.ic{flex:none;display:block}

/* o hero usa os mesmos icones, em vidro */
.hero-lista span .ic{opacity:.92;color:#4ade80}
@media (max-width:640px){
  .ar-aba{padding:9px 13px;font-size:var(--txt-md)}
  .ar-aba span{font-size:var(--txt-md)}}

/* trilho que centraliza as abas na largura do conteudo */

/* ===== hero: mais profundidade, tipografia e os icones em vidro ===== */
.hero-marca::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 260px at 82% 12%, rgba(109,99,242,.35), transparent 62%),
    radial-gradient(420px 320px at 8% 88%, rgba(74,222,128,.14), transparent 66%);
}
.hero-conteudo{position:relative;z-index:2}
.hero-marca h1{
  font-size:clamp(30px,4.2vw,46px);line-height:1.04;letter-spacing:-1.6px;
  text-shadow:0 18px 44px rgba(0,0,0,.35);
}
.hero-marca h1 span{
  background:linear-gradient(120deg,#4ade80,#a7f3d0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-frase{font-size:clamp(14.5px,1.5vw,16.5px);color:rgba(255,255,255,.8);letter-spacing:-.1px}
.hero-lista li{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--raio-lg);padding:13px 15px;
  box-shadow:0 12px 28px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .2s ease, background .2s ease;
}
.hero-lista li:hover{transform:translateX(3px);background:rgba(255,255,255,.085)}
.hero-lista span{
  background:linear-gradient(160deg,rgba(74,222,128,.22),rgba(79,70,229,.3));
  border-color:rgba(255,255,255,.2);
  box-shadow:0 8px 18px -10px rgba(74,222,128,.7), inset 0 1px 0 rgba(255,255,255,.2);
}
.hero-lista b{letter-spacing:-.25px;font-weight:var(--peso-bold)}
.hero-logo{width:min(148px,32vw);height:auto}
.acesso-cx h2{font-size:24px;font-weight:var(--peso-max);letter-spacing:-.6px}
.hero-acesso{box-shadow:-30px 0 60px -40px rgba(9,7,40,.5)}

/* ================================================================ Shopee ao vivo
   O mesmo botao do Mercado Livre, na cor da Shopee: o painel fala com os dois
   marketplaces e o topo precisa caber os dois lado a lado. */

/* o link discreto que troca entre o e-mail e a senha, na tela de entrada */
.entrar-troca{
  display:block;width:100%;margin-top:12px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:var(--txt-lg);color:#6b7280;text-decoration:underline;text-underline-offset:3px;
}
.entrar-troca:hover{color:#111827}

/* o item de menu que e botao (trocar de conta) veste o mesmo terno dos links */
button.menu-item{
  width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer;
}

/* ===== planilha de custos ===== */
.cst-ajuda{margin:0 0 14px;font-size:var(--txt-lg);color:var(--tinta-2);line-height:1.5}
.cst-mapa{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--esp-3);margin-bottom:16px}
.cst-mapa label{display:flex;flex-direction:column;gap:5px}
.cst-mapa span{font-size:var(--txt-xs);font-weight:var(--peso-max);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.cst-mapa select{
  font-family:inherit;font-size:var(--txt-lg);padding:9px 11px;color:var(--tinta);
  border:1px solid var(--linha-forte);border-radius:var(--raio-sm);background:var(--card);
}
.cst-resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-2);margin-bottom:12px}
.cst-n{background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-md);padding:10px 12px;text-align:center}
.cst-n b{display:block;font-size:var(--txt-3xl);letter-spacing:-.6px}
.cst-n span{display:block;font-size:var(--txt-xs);color:var(--tinta-3);line-height:1.35;margin-top:3px}
.cst-n.bom{background:#eaf7ee;border-color:#bfe3c9}
.cst-n.bom b{color:var(--pos)}
.cst-n.ruim{background:#fff1f0;border-color:#f6cdc9}
.cst-n.ruim b{color:var(--neg)}
.cst-tabela{border:1px solid var(--linha);border-radius:var(--raio-md);overflow:hidden}
.cst-linha{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--linha);font-size:var(--txt-md)}
.cst-linha:last-child{border-bottom:0}
.cst-linha b{flex:none;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--txt-sm);color:var(--tinta-2)}
.cst-linha span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta-3)}
.cst-linha i{flex:none;font-style:normal;font-weight:var(--peso-bold);color:var(--tinta)}
.cst-mais{padding:8px 12px;font-size:var(--txt-sm);color:var(--tinta-3)}
.cst-vazio{margin:0;padding:14px;font-size:var(--txt-md);color:var(--atencao-txt);background:#fff8ea;border:1px solid #f3dcae;border-radius:var(--raio-md);line-height:1.5}
.cst-nota{margin:10px 0 0;font-size:var(--txt-md);color:var(--tinta-3)}

/* ===== aba de lucro e margem ===== */
.lucro-faixas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:14px 0 18px}
.lf{
  position:relative;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--card);border:1px solid var(--linha);border-left:4px solid var(--cor);
  border-radius:var(--raio-lg);padding:13px 15px;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,opacity .15s,transform .15s;
}
.lf:hover{border-color:var(--cor);box-shadow:0 8px 20px -12px var(--cor)}
.lf[aria-pressed="true"]{background:var(--card-2);box-shadow:0 0 0 2px var(--cor) inset}
.lf b{display:block;font-size:var(--txt-4xl);letter-spacing:-.8px;color:var(--cor);line-height:1}
.lf-rot{display:block;font-size:var(--txt-lg);font-weight:var(--peso-bold);margin-top:4px;color:var(--tinta)}
.lf-dica{display:block;font-size:var(--txt-sm);color:var(--tinta-3);margin-top:2px;line-height:1.35}
.lf-barra{display:block;height:5px;border-radius:var(--raio-pill);background:var(--card-2);margin:9px 0 6px;overflow:hidden}
.lf-barra i{display:block;height:100%;background:var(--cor);border-radius:var(--raio-pill)}
.lf-val{display:block;font-size:var(--txt-sm);color:var(--tinta-2);font-weight:650}
.lucro-lista-cab{display:flex;align-items:baseline;gap:var(--esp-2);margin-bottom:8px}
.lucro-lista-cab b{font-size:var(--txt-lg);letter-spacing:-.2px}
.lucro-linha{grid-template-columns:minmax(200px,2.2fr) 90px 118px 118px 118px 92px 108px}
#lucro-resumo{margin-bottom:4px}

/* ===== degraus de preco ===== */
.dg-topo{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.dg-topo>div{background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:12px 16px}
.dg-topo b{display:block;font-size:24px;letter-spacing:-.7px}
.dg-topo span{display:block;font-size:var(--txt-sm);color:var(--tinta-3);margin-top:2px}
.dg-ganho{background:#eaf7ee !important;border-color:#bfe3c9 !important}
.dg-ganho b{color:var(--pos)}
.dg-nota{margin:8px 0 0;font-size:var(--txt-md);color:var(--tinta-2);background:#fff8ea;
  border:1px solid #f3dcae;border-radius:var(--raio-sm);padding:9px 12px;line-height:1.5}
.dg-sugerido{font-weight:750;color:var(--indigo)}
.dg-alerta{font-style:normal;font-size:var(--txt-xs);background:#fff1f0;color:var(--neg);
  border:1px solid #f6cdc9;border-radius:var(--raio-pill);padding:2px 7px;margin-left:4px}
.dg-explica{margin:14px 0 0;font-size:var(--txt-md);color:var(--tinta-3);line-height:1.55}

/* ===== pop-up da planilha da Shopee ===== */
#dlg-planilha-sh{max-width:520px}
.pl-topo{display:flex;align-items:flex-start;gap:14px}
.pl-logo{
  flex:none;width:46px;height:46px;border-radius:var(--raio-lg);overflow:hidden;background:#fff;
  border:1px solid var(--linha);display:grid;place-items:center;
}
.pl-logo img{width:100%;height:100%}
.pl-estado{margin-bottom:16px}
.pl-ja,.pl-ainda{display:flex;gap:11px;align-items:flex-start;border-radius:var(--raio-md);padding:12px 14px;font-size:var(--txt-md);line-height:1.45}
.pl-ja{background:#eaf7ee;border:1px solid #bfe3c9;color:#0a5c25}
.pl-ainda{background:var(--card-2);border:1px solid var(--linha);color:var(--tinta-2)}
.pl-ja b,.pl-ainda b{display:block;font-size:var(--txt-lg)}
.pl-ja span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--txt-sm)}
.pl-ja i,.pl-ainda i{display:block;font-style:normal;font-size:var(--txt-sm);opacity:.8;margin-top:2px}
.pl-passos{display:flex;flex-direction:column;gap:var(--esp-3);margin-bottom:14px}
.pl-p{display:flex;gap:var(--esp-3);align-items:flex-start}
.pl-n{
  flex:none;width:26px;height:26px;border-radius:var(--raio-sm);display:grid;place-items:center;
  background:linear-gradient(140deg,#ff8a5b,#ee4d2d);color:#fff;font-size:var(--txt-md);font-weight:var(--peso-max);
}
.pl-p b{display:block;font-size:var(--txt-lg);letter-spacing:-.2px}
.pl-p i{display:block;font-style:normal;font-size:var(--txt-md);color:var(--tinta-3);line-height:1.5;margin-top:2px}
.pl-mais{border:1px solid var(--linha);border-radius:var(--raio-md);background:var(--card-2);margin-bottom:14px}
.pl-mais summary{cursor:pointer;padding:11px 14px;font-size:var(--txt-md);font-weight:650;color:var(--tinta-2);list-style:none}
.pl-mais summary::-webkit-details-marker{display:none}
.pl-mais summary::before{content:"▸ ";color:var(--tinta-3)}
.pl-mais[open] summary::before{content:"▾ "}
.pl-mais-cx{padding:0 14px 14px;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.55}
.pl-mais-cx ul{margin:8px 0;padding-left:18px}
.pl-mais-cx li{margin:3px 0}
.pl-aviso{background:#fff8ea;border:1px solid #f3dcae;border-radius:var(--raio-sm);padding:9px 11px;color:#7a5a00;margin:10px 0 0}
.pl-nota{margin:0;font-size:var(--txt-md);color:var(--tinta-3);line-height:1.55}

/* o <b> dentro da explicacao e enfase no meio da frase, nao um bloco novo */
.pl-p i b, .pl-ja i b, .pl-ainda i b, .pl-nota b, .pl-mais-cx b{display:inline}
.pl-logo img{object-fit:contain;padding:5px}

/* estoque por anuncio, quando o mesmo SKU tem mais de um */
.id-estoque{
  display:inline-flex;align-items:center;font-size:var(--txt-xs);font-weight:650;color:var(--tinta-3);
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:3px 8px;margin-left:-3px;
}
.id-estoque.zerado{background:#fff1f0;border-color:#f6cdc9;color:var(--neg)}

/* ===== extrato do periodo, para bater com o Mercado Livre ===== */
.ex-cx{border:1px solid var(--linha);border-radius:var(--raio-lg);background:var(--card-2);margin:14px 0 18px}
.ex-cx summary{cursor:pointer;padding:12px 16px;font-size:var(--txt-lg);font-weight:var(--peso-bold);color:var(--tinta-2);list-style:none}
.ex-cx summary::-webkit-details-marker{display:none}
.ex-cx summary::before{content:"▸ ";color:var(--tinta-3)}
.ex-cx[open] summary::before{content:"▾ "}
.ex-corpo{padding:0 16px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.ex-bloco{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-md);padding:12px 14px}
.ex-tit{font-size:var(--txt-xs);font-weight:var(--peso-max);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:8px}
.ex-linha{display:flex;justify-content:space-between;align-items:baseline;gap:var(--esp-3);padding:7px 0;border-bottom:1px solid var(--linha)}
.ex-linha:last-child{border-bottom:0}
.ex-rot{font-size:var(--txt-md);color:var(--tinta-2);min-width:0}
.ex-rot i{display:block;font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.4;margin-top:1px}
.ex-linha b{flex:none;font-size:var(--txt-lg);font-variant-numeric:tabular-nums}
.ex-linha.menos b{color:var(--neg)}
.ex-linha.mais b{color:var(--pos)}
.ex-linha.forte b,.ex-linha.forte .ex-rot{font-weight:750}
.ex-linha.total{border-top:2px solid var(--linha);margin-top:4px;padding-top:10px}
.ex-linha.total b{font-size:var(--txt-xl);font-weight:var(--peso-max)}
.ex-nota{grid-column:1/-1;margin:0;font-size:var(--txt-md);color:var(--tinta-3);line-height:1.55}

/* separador dentro do dialogo, entre o que e do produto e o que e geral */
.dlg-sep{height:1px;background:var(--linha);margin:14px 0}

/* ===== publicidade: botao, interruptor e dialogo ===== */
.lucro-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2);margin:14px 0 8px}
.chip{
  border:1px solid var(--linha-forte);background:var(--card);color:var(--tinta-2);
  font-family:inherit;font-size:var(--txt-md);font-weight:650;padding:7px 13px;border-radius:var(--raio-pill);cursor:pointer;
}
.pub-explica{
  margin:0 0 14px;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.55;
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-md);padding:11px 13px;
}
.pub-explica:empty{display:none}
.pub-sobra{display:block;margin-top:6px;color:var(--atencao-txt)}
#dlg-publicidade{max-width:560px}
.pub-mes{border:1px solid var(--linha);border-radius:var(--raio-md);padding:10px 12px;margin-bottom:10px}
.pub-mes-tit{font-size:var(--txt-xs);font-weight:var(--peso-max);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:8px}
.pub-linha{display:flex;flex-wrap:wrap;gap:var(--esp-2);align-items:center;margin-bottom:6px}
.pub-canal,.pub-nota,.pub-input{
  font-family:inherit;font-size:var(--txt-md);padding:7px 9px;color:var(--tinta);
  border:1px solid var(--linha-forte);border-radius:var(--raio-sm);background:var(--card);
}
.pub-canal{flex:0 0 150px}
.pub-valor{display:flex;align-items:center;gap:5px;flex:0 0 130px}
.pub-valor span{font-size:var(--txt-sm);color:var(--tinta-3)}
.pub-input{width:100%}
.pub-nota{flex:1;min-width:120px}
.pub-puxar-cx{
  display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;
  padding:12px 14px;margin-bottom:14px;
  border:1px solid var(--linha);border-radius:var(--raio-md);background:var(--fundo-2);
}
.pub-puxar-cx span{font-size:var(--txt-md);color:var(--tinta-3);flex:1;min-width:200px}
.pub-rodape{text-align:right;font-size:var(--txt-md);color:var(--tinta-3);padding:6px 2px}
.pub-rodape b{font-size:var(--txt-xl);color:var(--tinta)}
.pub-aviso{margin:10px 0 0;font-size:var(--txt-md);color:#7a5a00;background:#fff8ea;
  border:1px solid #f3dcae;border-radius:var(--raio-sm);padding:10px 12px;line-height:1.5}

/* ===== aba Lucro: visoes, cascata e grupos ===== */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 12px}
.lucro-cascata{
  display:flex;flex-wrap:wrap;gap:7px;align-items:stretch;margin:14px 0 4px;
}
.cs-passo{
  flex:1 1 128px;min-width:120px;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio-md);padding:10px 12px;position:relative;
}
.cs-passo span{display:block;font-size:var(--txt-xs);font-weight:var(--peso-bold);letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-3)}
.cs-passo b{display:block;font-size:var(--txt-xl);letter-spacing:-.4px;margin-top:3px;font-variant-numeric:tabular-nums}
.cs-passo.inicio{border-color:var(--indigo);border-width:2px}
.cs-passo.menos b{color:var(--neg)}
.cs-passo.mais b{color:var(--pos)}
.cs-passo.fim{background:#eaf7ee;border-color:#bfe3c9;border-width:2px}
.cs-passo.fim b{color:var(--pos);font-size:var(--txt-2xl);font-weight:var(--peso-max)}
.cs-passo+.cs-passo::before{
  content:"";position:absolute;left:-6px;top:50%;width:6px;height:1px;background:var(--linha-forte);
}
.lucro-grupo{grid-template-columns:minmax(190px,2fr) 70px 118px 122px 110px 110px 118px 88px}
.ge-linha.clicavel{
  width:100%;text-align:left;border:0;border-bottom:1px solid var(--linha);
  background:none;font-family:inherit;cursor:pointer;transition:background .12s;
}
.ge-linha.clicavel:hover{background:var(--card-2)}
.ge-linha.clicavel.ativo{background:rgba(79,70,229,.09);box-shadow:inset 3px 0 0 var(--indigo)}
.lucro-grupo .lf-barra{display:block;height:4px;margin-top:5px;max-width:220px}
@media (max-width:760px){ .cs-passo{flex:1 1 44%}}

/* o atributo hidden precisa vencer o display:grid das faixas */
.lucro-faixas[hidden],.ge-tabela[hidden]{display:none}
.cs-nota{flex:1 1 100%;margin:2px 0 0;font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.5}

/* ===== "como chegamos nesse numero" ===== */
.fm-corpo{grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr)}
.fm-conta{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-md);overflow:hidden}
.fm-linha{display:flex;align-items:flex-start;gap:10px;padding:9px 13px;border-bottom:1px solid var(--linha)}
.fm-linha:last-child{border-bottom:0}
.fm-sinal{flex:none;width:16px;text-align:center;font-size:var(--txt-base);font-weight:var(--peso-max);color:var(--tinta-3)}
.fm-rot{flex:1;min-width:0;font-size:var(--txt-lg);color:var(--tinta)}
.fm-rot i{display:block;font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.4;margin-top:2px}
.fm-linha b{flex:none;font-size:var(--txt-lg);font-variant-numeric:tabular-nums}
.fm-linha.inicio{background:var(--card-2)}
.fm-linha.inicio b{font-weight:750}
.fm-linha.mais b{color:var(--pos)}
.fm-linha.fim{background:#eaf7ee;border-top:2px solid #bfe3c9}
.fm-linha.fim b{font-size:var(--txt-2xl);font-weight:var(--peso-max);color:var(--pos)}
.fm-linhaunica{
  margin-top:12px;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.7;
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:11px 13px;
  font-variant-numeric:tabular-nums;
}
.fm-nota{margin:10px 0 0;font-size:var(--txt-md);color:var(--tinta-3);line-height:1.55}
.fm-aviso{margin:0;font-size:var(--txt-md);color:#7a5a00;background:#fff8ea;border:1px solid #f3dcae;
  border-radius:var(--raio-sm);padding:11px 13px;line-height:1.55}
.fat-bloco{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-md);padding:14px}
.fat-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.fat-cab b{font-size:var(--txt-lg)}
.fat-lista{margin-top:10px;border:1px solid var(--linha);border-radius:var(--raio-sm);overflow:hidden}
.fat-linha{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;
  border-bottom:1px solid var(--linha);font-size:var(--txt-md)}
.fat-linha:last-child{border-bottom:0}
.fat-linha b{font-variant-numeric:tabular-nums}
.fat-linha.total{background:var(--card-2);font-weight:750}

/* o gasto com anuncio em destaque: e a resposta que a pessoa foi buscar */
.fat-ads{
  display:flex;flex-direction:column;gap:2px;margin-bottom:10px;
  background:linear-gradient(140deg,#fff3e6,#ffe8cc);border:1px solid #f3cfa0;
  border-radius:var(--raio-md);padding:12px 14px;
}
.fat-ads span{font-size:var(--txt-sm);font-weight:var(--peso-bold);letter-spacing:.04em;text-transform:uppercase;color:#8a5a00}
.fat-ads b{font-size:var(--txt-4xl);letter-spacing:-.7px;color:#7a4a00}
.fat-ads.vazio{background:var(--card-2);border-color:var(--linha)}
.fat-ads.vazio span{color:var(--tinta-3);text-transform:none;letter-spacing:0;font-size:var(--txt-md);font-weight:600}
#btn-faturamento:disabled{opacity:.55;cursor:not-allowed}

/* margem sem receita nao e falta de custo — e falta de venda no periodo */
.sem-venda{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3)}
.so-cancelada{
  font-style:normal;font-size:var(--txt-xs);font-weight:var(--peso-bold);color:var(--neg);
  background:#fff1f0;border:1px solid #f6cdc9;border-radius:var(--raio-pill);padding:2px 7px;margin-left:5px;
}

/* a conta que gerou o numero, embaixo de cada card do topo */
.trilha-conta{
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--linha);
  font-size:var(--txt-xs);line-height:1.5;color:var(--tinta-3);
  font-variant-numeric:tabular-nums;word-break:break-word;
}
.trilha-passo.forte .trilha-conta{border-top-color:rgba(12,163,12,.28)}

/* ================================================================ Simulador de preço
   Duas colunas: os campos à esquerda, a conta aberta à direita. No celular vira
   uma coluna só, com a conta embaixo — é ela que a pessoa quer ver enquanto digita. */
.sim-grade{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:22px;align-items:start}
/* ⚠️ `min-width:0` nos tres niveis. Sem isso o <input> usa a largura natural dele (~180px)
   e dois por linha passam dos 340px da coluna: o bloco de campos TRANSBORDA e escorre por
   baixo da conta, que e a tela "fora de esquadro" que um cliente mandou. Um item de grid tem
   min-width:auto por padrao e, por isso, se recusa a encolher abaixo do conteudo. O <select>
   e o pior caso: ele carrega o nome inteiro do produto. */
.sim-campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-3) 14px;min-width:0}
.sim-largo{grid-column:1 / -1}
.sim-l{display:flex;flex-direction:column;gap:5px;font-size:var(--txt-md);color:var(--tinta-2);font-weight:600;min-width:0}
.sim-l input,.sim-l select{
  font:inherit;font-size:var(--txt-base);font-weight:650;color:var(--tinta);
  background:var(--card);border:1px solid var(--linha-forte);border-radius:var(--raio-sm);padding:9px 11px;
  width:100%;min-width:0;box-sizing:border-box;
}
/* nome de produto e comprido: corta com reticencias em vez de esticar a coluna */
.sim-l select{text-overflow:ellipsis}
/* a pergunta do frete gratis e uma caixa de marcar, nao um campo de digitar */
.sim-dica{display:block;font-style:normal;font-weight:500;font-size:var(--txt-xs);color:var(--tinta-3);margin-top:2px;line-height:1.35}
.sim-check{flex-direction:row;align-items:flex-start;gap:9px;font-weight:650}
.sim-check input{width:auto;flex:none;margin-top:2px;accent-color:var(--indigo)}
.sim-check i{display:block;font-style:normal;font-weight:500;font-size:var(--txt-sm);color:var(--tinta-3);margin-top:2px}
.sim-l input:focus,.sim-l select:focus{outline:2px solid var(--indigo);outline-offset:1px;border-color:transparent}
.sim-origem{
  grid-column:1 / -1;margin:-2px 0 2px;font-size:var(--txt-md);line-height:1.5;color:var(--tinta-2);
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:9px 11px;
}

.sim-saida{display:flex;flex-direction:column;gap:var(--esp-4);min-width:0}
.sim-vazio{color:var(--tinta-3);font-size:var(--txt-base);padding:26px 0;line-height:1.55}

.sim-resultado{border-radius:var(--raio-lg);padding:16px 18px;border:1px solid var(--linha)}
.sim-resultado.bom{background:linear-gradient(170deg,#eafaf0,#f4fcf7);border-color:#bfe9cf}
.sim-resultado.ruim{background:linear-gradient(170deg,#fdeeee,#fdf6f6);border-color:#f0c3c3}
.sim-grande{display:flex;align-items:baseline;gap:var(--esp-3);flex-wrap:wrap}
.sim-grande .sim-rot{font-size:var(--txt-md);font-weight:var(--peso-bold);color:var(--tinta-2)}
.sim-grande b{font-size:var(--txt-5xl);letter-spacing:-.6px;color:var(--tinta)}
.sim-margem{font-size:var(--txt-lg);font-weight:650;color:var(--tinta-2)}
.sim-aviso{margin:8px 0 0;font-size:var(--txt-md);color:var(--deduz);font-weight:600}

.sim-conta{border:1px solid var(--linha);border-radius:var(--raio-lg);overflow:hidden;background:var(--card)}
.sim-linha{display:flex;justify-content:space-between;gap:14px;padding:9px 14px;font-size:var(--txt-lg);border-bottom:1px solid var(--linha)}
.sim-linha span{color:var(--tinta-2)}
.sim-linha b{font-variant-numeric:tabular-nums;color:var(--tinta)}
.sim-menos b{color:var(--deduz)}
.sim-sub .sim-linha{background:var(--card-2);font-weight:650}
.sim-sub .sim-linha span{color:var(--tinta)}
.sim-total .sim-linha{border-bottom:0;background:var(--card-2);padding:12px 14px;font-size:var(--txt-xl)}
.sim-total .sim-linha span{font-weight:750;color:var(--tinta)}
.sim-total .sim-bom b{color:var(--pos);font-weight:var(--peso-max)}
.sim-total .sim-ruim b{color:var(--neg);font-weight:var(--peso-max)}

.sim-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--esp-3)}
.sim-cartao{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:12px 14px;
  display:flex;flex-direction:column;gap:3px;
}
.sim-cartao.bom{border-color:#bfe9cf;background:linear-gradient(170deg,#f3fbf6,#fff)}
.sim-ct{font-size:var(--txt-sm);font-weight:var(--peso-bold);color:var(--tinta-2);text-transform:uppercase;letter-spacing:.3px}
.sim-cartao b{font-size:var(--txt-3xl);letter-spacing:-.4px;color:var(--tinta);font-variant-numeric:tabular-nums}
.sim-cn{font-size:var(--txt-sm);line-height:1.45;color:var(--tinta-3)}

@media (max-width:860px){
  .sim-grade{grid-template-columns:1fr}
  .sim-campos{grid-template-columns:1fr 1fr}}

/* ================================================================ Aba Pedidos
   Uma linha por venda; clicar abre a conta inteira. O <details> nativo faz o toggle:
   menos JS para manter e funciona sem script nenhum. */
.pd-filtros{display:flex;gap:var(--esp-2);flex-wrap:wrap;margin:0 0 14px}
.pd-filtro{
  font:inherit;font-size:var(--txt-md);font-weight:650;color:var(--tinta-2);cursor:pointer;
  background:var(--card);border:1px solid var(--linha-forte);border-radius:var(--raio-pill);padding:7px 13px;
}
.pd-filtro b{color:var(--tinta);margin-left:3px}
.pd-filtro:hover:not(:disabled){border-color:var(--indigo);color:var(--indigo)}
.pd-filtro.ativo{background:var(--indigo);border-color:var(--indigo);color:#fff}
.pd-filtro.ativo b{color:#fff}
.pd-filtro:disabled{opacity:.45;cursor:default}

.pd-lista{display:flex;flex-direction:column;gap:7px}
.pd-vazio{color:var(--tinta-3);font-size:var(--txt-lg);padding:26px 2px;line-height:1.55}
/* o aviso de que a lista foi cortada: texto e nada mais — sem o desenho de "vazio" */
.pd-corte{margin:14px 0 0;padding:12px 14px;border-radius:var(--raio-sm);background:var(--card-2);
  border:1px dashed var(--linha-forte);color:var(--tinta-2);font-size:var(--txt-md);
  line-height:1.55;text-align:center}

.pd-item{border:1px solid var(--linha);border-radius:var(--raio-lg);background:var(--card);overflow:hidden}
.pd-item summary{
  display:grid;grid-template-columns:52px 104px 1fr 78px 104px 104px 62px;
  gap:10px;align-items:center;padding:11px 14px;cursor:pointer;font-size:var(--txt-lg);
  list-style:none;
}
.pd-item summary::-webkit-details-marker{display:none}
.pd-item summary:hover{background:var(--card-2)}
.pd-item[open] summary{background:var(--card-2);border-bottom:1px solid var(--linha)}
.pd-data{color:var(--tinta-2);font-weight:650}
.pd-canal{color:var(--tinta-2);font-size:var(--txt-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-num{color:var(--tinta-3);font-size:var(--txt-md);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-itens{color:var(--tinta-3);font-size:var(--txt-md)}
.pd-bruto,.pd-lucro{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.pd-margem{text-align:right;font-size:var(--txt-md);color:var(--tinta-3);font-variant-numeric:tabular-nums}
.pd-bom .pd-lucro{color:var(--pos)}
.pd-ruim .pd-lucro{color:var(--neg)}
.pd-semcusto .pd-lucro,.pd-cancelado .pd-lucro{color:var(--tinta-3)}
/* a venda cancelada não fica mais translúcida (o .65 deixava data e canal em 3,2:1): a
   marca é a borda cinza, o lucro em cinza e a etiqueta "cancelado" */
.pd-bom{border-left:3px solid #0ca30c}
.pd-ruim{border-left:3px solid #d03b3b}
.pd-semcusto{border-left:3px solid var(--atencao)}
.pd-cancelado{border-left:3px solid var(--linha-forte)}

.pd-corpo{display:grid;grid-template-columns:1fr minmax(260px,330px);gap:18px;padding:14px}
.pd-produtos{display:flex;flex-direction:column;gap:9px;min-width:0}
.pd-prod{
  display:flex;flex-wrap:wrap;gap:var(--esp-1) 10px;align-items:baseline;
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:9px 11px;
}
.pd-prod.sem{border-color:#f0d9a8;background:#fffaf0}
.pd-pn{flex:1 1 240px;font-size:var(--txt-lg);font-weight:650;color:var(--tinta);min-width:0}
.pd-pn i{font-weight:500;color:var(--tinta-2);font-style:normal}
.pd-pq{font-size:var(--txt-md);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.pd-ps{font-size:var(--txt-sm);color:var(--tinta-3)}
.pd-pa{font-size:var(--txt-sm);font-weight:var(--peso-bold);color:var(--atencao-txt)}

.pd-conta{border:1px solid var(--linha);border-radius:var(--raio-md);overflow:hidden;align-self:start}
.pd-l{display:flex;justify-content:space-between;gap:var(--esp-3);padding:7px 12px;font-size:var(--txt-lg);border-bottom:1px solid var(--linha)}
.pd-l span{color:var(--tinta-2)}
.pd-l b{font-variant-numeric:tabular-nums;color:var(--tinta)}
.pd-l.menos b{color:var(--deduz)}
.pd-sub .pd-l{background:var(--card-2);font-weight:650}
.pd-sub .pd-l span{color:var(--tinta)}
.pd-total .pd-l{border-bottom:0;background:var(--card-2);padding:10px 12px;font-size:var(--txt-base)}
.pd-total .pd-l span{font-weight:750;color:var(--tinta)}
.pd-total .bom b{color:var(--pos);font-weight:var(--peso-max)}
.pd-total .ruim b{color:var(--neg);font-weight:var(--peso-max)}
.pd-rodape{grid-column:1 / -1;margin:0;font-size:var(--txt-md);line-height:1.5;color:var(--tinta-3)}

@media (max-width:900px){
  .pd-item summary{grid-template-columns:46px 1fr 88px 88px;row-gap:4px}
  .pd-canal,.pd-itens{display:none}
  .pd-margem{display:none}
  .pd-corpo{grid-template-columns:1fr}}

/* ================================================================ O anúncio deu lucro?
   O ROAS mínimo é o número que o marketplace não mostra: ele depende da margem do
   vendedor. Por isso fica ao lado do ROAS real, com a mesma importância visual. */
.ad-bloco{border:1px solid var(--linha);border-radius:var(--raio-lg);background:var(--card);padding:16px 18px;margin:18px 0}
.ad-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.ad-cab h3{margin:0;font-size:var(--txt-xl);letter-spacing:-.2px}
.ad-cab span{font-size:var(--txt-md);color:var(--tinta-3)}
.ad-aviso{margin:10px 0 0;font-size:var(--txt-sm);line-height:1.5;color:var(--tinta-3)}

/* ================================================================ Kit (composição)
   Mora dentro do diálogo de custo porque é a mesma pergunta: quanto custa este produto.
   A diferença é que aqui a resposta é calculada. */
.kit-cx{margin-top:4px}
.kit-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--esp-3);margin-bottom:9px}
.kit-cab b{font-size:var(--txt-lg)}
.kit-cab small{display:block;color:var(--tinta-2);font-size:var(--txt-md);line-height:1.45;margin-top:2px}
.kit-linha{display:grid;grid-template-columns:1fr 84px 34px;gap:var(--esp-2);margin-bottom:7px;align-items:center}
.kit-linha select,.kit-linha input{
  font:inherit;font-size:var(--txt-lg);padding:7px 9px;border:1px solid var(--linha-forte);
  border-radius:var(--raio-sm);background:var(--card);color:var(--tinta);min-width:0;
}
.kit-x{
  font:inherit;font-size:var(--txt-lg);line-height:1;cursor:pointer;color:var(--tinta-3);
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:7px 0;
}
.kit-x:hover{color:var(--neg);border-color:#f0c3c3;background:#fdf5f5}
.kit-resumo{margin:8px 0 0;font-size:var(--txt-md);line-height:1.55;color:var(--tinta-2)}

/* ---------------------------------------------------------------- Pedidos: barra e totais */
.pd-barra{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.pd-barra .pd-filtros{margin:0}
.pd-acoes{display:flex;gap:var(--esp-2);align-items:center}
.pd-acoes input,.pd-acoes select{
  font:inherit;font-size:var(--txt-lg);padding:7px 11px;border:1px solid var(--linha-forte);
  border-radius:var(--raio-pill);background:var(--card);color:var(--tinta);
}
.pd-acoes input{min-width:220px}
.pd-acoes input:focus,.pd-acoes select:focus{outline:2px solid var(--indigo);outline-offset:1px;border-color:transparent}

.pd-totais{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.pt-cx{background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-md);padding:10px 13px;display:flex;flex-direction:column;gap:1px}
.pt-cx.bom{border-color:#bfe9cf;background:linear-gradient(170deg,#f3fbf6,#fff)}
.pt-cx.ruim{border-color:#f0c3c3;background:linear-gradient(170deg,#fdf5f5,#fff)}
.pt-cx.aviso{border-color:#f3dcae;background:#fffaf0}
.pt-rot{font-size:var(--txt-sm);font-weight:var(--peso-bold);color:var(--tinta-2);text-transform:uppercase;letter-spacing:.3px}
.pt-cx b{font-size:var(--txt-2xl);letter-spacing:-.3px;font-variant-numeric:tabular-nums;color:var(--tinta)}
.pt-nota{font-size:var(--txt-sm);color:var(--tinta-3)}

@media (max-width:760px){
  .pd-acoes{width:100%}
  .pd-acoes input{flex:1;min-width:0}}

/* ================================================================ Visão geral
   A primeira tela: quanto entrou, quanto sobrou, o que pede atenção e quem puxa o lucro.
   Tudo que está aqui já existia espalhado — o ganho é a ordem em que aparece. */
.vg-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--esp-3);margin-bottom:16px}
.vg-cx{background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:13px 15px;display:flex;flex-direction:column;gap:2px}
.vg-cx.bom{border-color:#bfe9cf;background:linear-gradient(170deg,#f3fbf6,#fff)}
.vg-cx.ruim{border-color:#f0c3c3;background:linear-gradient(170deg,#fdf5f5,#fff)}
.vg-rot{font-size:var(--txt-sm);font-weight:var(--peso-bold);color:var(--tinta-2);text-transform:uppercase;letter-spacing:.3px}
.vg-cx b{font-size:24px;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--tinta)}
.vg-nota{font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.4}


.vg-aviso{border-radius:var(--raio-md);padding:10px 13px;font-size:var(--txt-lg);line-height:1.5}
/* ⚠️ o tom tem nome próprio: como classe solta, `aviso` casava com uma `.aviso` genérica
   que é `display:flex`, e aí cada <b> da frase virava uma coluna. */
.vg-aviso.vg-tom-aviso{background:#fff8ea;border:1px solid #f3dcae;color:#7a4b00}
.vg-aviso.vg-tom-ruim{background:#fdeeee;border:1px solid #f0c3c3;color:#8c1f1f}
.vg-aviso.vg-tom-bom{background:#eafaf0;border:1px solid #bfe9cf;color:#14532d}

.vg-bloco{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:14px 16px;margin-bottom:16px}
.vg-bloco h3{margin:0 0 2px;font-size:var(--txt-base);letter-spacing:-.2px;
  display:flex;align-items:center;gap:8px}
/* o ícone do título é desenho, não texto: não encolhe nem vira linha sozinha */
.vg-bloco h3>svg{flex:0 0 auto;width:18px;height:18px;color:var(--indigo)}
.vg-sub{margin:0 0 12px;font-size:var(--txt-md);color:var(--tinta-3);line-height:1.45}
.vg-vazio{margin:6px 0 0;padding:20px 0;font-size:var(--txt-md);color:var(--tinta-3);line-height:1.55}

.vg-grafico{display:flex;align-items:flex-end;gap:14px;height:150px;padding-top:8px}
.vg-mes{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.vg-barras{flex:1;display:flex;align-items:flex-end;gap:3px;width:100%;justify-content:center}
.vg-barras i{display:block;width:42%;border-radius:5px 5px 0 0}
.vg-b1{background:var(--seq-300)}
.vg-b2{background:var(--seq-700)}
.vg-b2.neg{background:var(--critico)}
.vg-ml{font-size:var(--txt-sm);color:var(--tinta-3);white-space:nowrap}
.vg-linha{display:flex;justify-content:space-between;gap:var(--esp-3);padding:7px 0;border-bottom:1px solid var(--linha);font-size:var(--txt-lg)}
.vg-linha:last-child{border-bottom:0}
.vg-linha span{color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-linha b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------------------- Visão geral: bloco do ML */
.vg-convite{text-align:left}
.vg-convite .btn{margin-top:4px}
.vg-bloco .vg-cartoes{margin-bottom:0}
.vg-reput{display:flex;flex-wrap:wrap;gap:var(--esp-2) 18px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linha);font-size:var(--txt-md);color:var(--tinta-2)}
.vg-reput b{color:var(--tinta)}
.vg-perdas{flex:1 1 100%;font-size:var(--txt-md);line-height:1.5;color:var(--tinta-3)}
.vg-sub a{color:var(--indigo);text-decoration:underline;text-underline-offset:2px}
.vg-curva{margin:12px 0 0;font-size:var(--txt-md);line-height:1.55;padding:9px 12px;border-radius:var(--raio-sm)}
.vg-curva.sobe{background:#eafaf0;border:1px solid #bfe9cf;color:#14532d}
.vg-curva.desce{background:#fff8ea;border:1px solid #f3dcae;color:#7a4b00}
.vg-curva svg{width:15px;height:15px;vertical-align:-2px;margin-right:2px}

/* ---------- ajustes de telefone que precisam vir por ultimo ----------
   O CSS deste arquivo cresceu por acrescimo, entao ha regras de tela larga declaradas DEPOIS
   dos @media. Como a especificidade e a mesma, quem vem por ultimo ganha — e o ajuste de
   celular morria calado. Estes ficam no fim, onde nada os sobrescreve. */
@media (max-width:900px){
  .palco-cab h2{font-size:var(--txt-2xl)}
}

/* ================================================================ efeitos de mouse
   A regra que vale para tudo aqui: so `transform`, `opacity`, `box-shadow`, `border-color`
   e `background-color`. Nenhuma delas pede ao navegador para recalcular o layout — por isso
   o painel continua leve mesmo com 50 cartoes na tela. Animar largura, altura ou margem,
   que e o atalho comum, faria o oposto.

   A dose e pequena de proposito: 1 ou 2 pixels de subida e uma sombra. O que se quer e a
   sensacao de que o elemento RESPONDE, nao um show. Nada disso aparece no toque — `@media
   (hover:hover)` deixa o celular de fora, senao o efeito "gruda" depois do dedo sair. */
@media (hover:hover) and (pointer:fine){

  /* cartao de produto: sobe um fio e ganha contorno. E o elemento que a pessoa percorre com
     o olho procurando um numero — o realce diz onde ela esta. */
  .prod-card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
  .prod-card:hover{
    transform:translateY(-2px);
    border-color:var(--linha-forte);
    box-shadow:0 14px 30px -20px rgba(15,18,34,.45);
  }

  /* linha de tabela: fundo e a primeira coluna acompanham (ela e sticky e tem fundo proprio) */
  .ge-linha:not(.ge-cab){transition:background-color .14s ease}
  .ge-linha:not(.ge-cab):hover{background:var(--card-2)}
  .ge-linha:not(.ge-cab):hover .ge-nome{background:var(--card-2)}

  /* botoes: a subida de 1px da o "clique" antes do clique */
  .btn,.conectar,.entrar-btn{transition:transform .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease}
  .btn:hover:not(:disabled),.conectar:hover{transform:translateY(-1px)}
  .btn:active:not(:disabled),.conectar:active{transform:translateY(0)}
  .btn-forte:hover{box-shadow:0 8px 18px -10px rgba(79,70,229,.9)}

  /* abas: o icone acende antes do rotulo, que ja era o comportamento — so ficou mais firme */
  .ar-aba:hover:not(.ativa){background:rgba(255,255,255,.6)}
  .ar-aba:hover .ic{transform:translateY(-1px)}
  .ar-aba .ic{transition:opacity .18s ease, transform .18s ease}

  /* selos e chips: contorno, sem mexer no tamanho (mexer no tamanho empurra os vizinhos) */
  .pc-selo,.id-chip,.pe-tag{transition:border-color .14s ease, background-color .14s ease}
  .pc-selo:hover,.pe-tag:hover{border-color:var(--linha-forte)}
  .pc-canal{transition:transform .16s ease, box-shadow .16s ease}
  .pc-canal:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(9,7,40,.55)}

  /* cartoes de numero do topo: a barra de cor do topo cresce um pouco */

  /* item de menu: o icone desliza um fio na direcao da leitura */
  .menu-item .ic{transition:transform .16s ease, color .16s ease}
  .menu-item:hover .ic{transform:translateX(2px);color:var(--indigo)}

  /* o ponto de atencao: o "Resolvido" so aparece de verdade quando a pessoa chega perto */
  .al-item{transition:border-color .16s ease, transform .16s ease}
  .al-item:hover{transform:translateY(-1px)}

  /* ⚠️ Sem zoom na foto. Ela esta ao lado do nome numa LINHA QUE SE LE: crescer a imagem
     empurra o olho para fora do texto bem na hora de conferir o produto. Foto aqui e
     identificacao, nao enfeite. */

  /* links de titulo: o sublinhado cresce da esquerda, em vez de piscar inteiro */
  .ge-nome a{background-image:linear-gradient(var(--indigo),var(--indigo));
    background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;
    transition:background-size .22s ease, color .16s ease;text-decoration:none}
  .ge-nome a:hover{background-size:100% 1.5px;text-decoration:none}

  /* cartoes de gráfico e palcos claros */
  .gr-card{transition:box-shadow .18s ease, border-color .18s ease}
  .gr-card:hover{box-shadow:0 14px 30px -22px rgba(15,18,34,.4);border-color:var(--linha-forte)}
}

/* quem pede menos movimento continua sem movimento nenhum: so a cor muda */
@media (prefers-reduced-motion:reduce){
  .prod-card:hover,.btn:hover:not(:disabled),.al-item:hover,.pc-canal:hover,.conectar:hover,.ar-aba:hover .ic,.menu-item:hover .ic,.prod-card:hover .prod-foto,.ge-linha:hover .ge-nome img{transform:none}
}

/* ================================================================ profundidade
   A tela deixa de ser papel impresso e passa a ter camadas. Tres coisas, nesta ordem:

   1) PERSPECTIVA no pai. Sem ela, rotacionar um filho em X ou Y so o achata — a sensacao de
      profundidade vem da perspectiva, nao da rotacao.
   2) A INCLINACAO que segue o cursor, alimentada por --rx/--ry que o efeitos.js escreve.
   3) A LUZ, um brilho fraco que acompanha o ponteiro por cima do cartao.

   Tudo em `transform` e `opacity`, que o navegador resolve na GPU. `will-change` fica so no
   hover: deixa-lo ligado o tempo todo em 50 cartoes reserva memoria de video a toa. */
@media (hover:hover) and (pointer:fine){

  /* ⚠️ A INCLINACAO 3D SAIU DOS CARTOES DE CONTEUDO.
     Era bonita de ver e ruim de usar: o cartao do produto e um bloco de LEITURA — receita,
     taxas, lucro, estoque — e girar o plano entorta os digitos justamente enquanto a pessoa
     esta conferindo dinheiro. Efeito que disputa com o numero perde do numero.
     Fica a elevacao, que e util: diz onde o mouse esta sem mexer no conteudo. O 3D continua
     onde nao ha o que ler — no radar do hero. */
  .prod-card,.gr-card,.sim-cartao,.vg-cx{
    transition:transform .22s ease, box-shadow .22s ease, border-color .2s ease;
    position:relative;
  }
  .prod-card:hover,.gr-card:hover,.sim-cartao:hover,.vg-cx:hover{
    transform:translateY(-2px);
    box-shadow:
      0 2px 6px -2px rgba(15,18,34,.10),
      0 18px 40px -22px rgba(15,18,34,.45);
  }

  /* a luz: um circulo claro no ponto do cursor, recortado pelo proprio cartao.
     `pointer-events:none` e essencial — senao a camada rouba o clique do que esta embaixo. */
  /* a luz que seguia o cursor saiu junto: ela existia para dar volume a inclinacao, e sobre
     um cartao plano so lavava o texto */

  /* o conteudo sobe um fio DENTRO do cartao: e o que separa as camadas de verdade, em vez de
     o bloco inteiro andar junto como um adesivo */
  /* o conteudo nao sobe mais em Z: sem a inclinacao, ele so borrava a leitura */
}

/* ---------- a troca de aba ----------
   Sair de `display:none` reinicia a animacao sozinho, entao nao e preciso JS nenhum: cada vez
   que um palco aparece, ele entra. Curto (.34s) e de baixo para cima, como quem vira a pagina
   e nao como quem troca de slide. */
/* ⚠️ sem `scale`: escalar texto por 340ms deixa TODO numero do palco com a borda borrada,
   porque o navegador precisa reamostrar as letras. Subir e aparecer basta. */
@keyframes palco-entra{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
[role="tabpanel"]:not([hidden]){animation:palco-entra .34s cubic-bezier(.2,.7,.3,1) backwards}

/* ---------- a chegada dos cartoes ----------
   ⚠️ `backwards`, nunca `both`: `both` segura o estado final da animacao, e animacao vence
   regra normal na cascata — o `transform:none` do fim anulava o :hover do cartao PARA SEMPRE,
   e a inclinacao 3D simplesmente nao acontecia. Levou um teste no navegador para aparecer.
   Em cascata, de 40ms em 40ms. Os seis primeiros bastam: depois disso o olho ja entendeu o
   movimento e o resto so atrasaria a leitura. */
@keyframes cartao-entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
/* ⚠️ A CASCATA DE ENTRADA SAIU. Ela rodava a cada `render()` — e `render()` roda a cada tecla
   digitada na busca, a cada filtro, a cada "Resolvido". A lista inteira pulava enquanto a
   pessoa procurava um SKU. Animação de chegada só faz sentido se a chegada for uma vez. */
#lista-produtos>.prod-card{animation:none}

/* os cartoes de numero do topo entram junto, um atras do outro */
.trilha>*{animation:none}   /* mesmo motivo: a faixa redesenha a cada filtro */

/* ⚠️ Quem pede menos movimento no sistema nao ve NADA disso: sem inclinacao, sem luz, sem
   entrada. O painel continua inteiro — o movimento era enfeite, e enfeite se abre mao. */
@media (prefers-reduced-motion:reduce){
  .prod-card:hover,.gr-card:hover,.sim-cartao:hover,.vg-cx:hover{transform:none}
  .prod-card:hover .prod-cab,.prod-card:hover .prod-nums{transform:none}
  [role="tabpanel"]:not([hidden]),#lista-produtos>.prod-card,.trilha>*{animation:none}
}

/* ================================================================ DIFAL
   O quadro fica junto do mapa de estados — foi olhando para o mapa que a pergunta nasceu.
   Enquanto as duas respostas nao vierem, ele e um convite explicando o que falta; depois,
   vira a lista por estado. */
.fiscal-cx{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);
  padding:16px 18px;margin-bottom:var(--esp-4);
}
.fiscal-convite{display:flex;align-items:center;gap:var(--esp-4);flex-wrap:wrap}
.fiscal-convite b{display:block;font-size:var(--txt-base);letter-spacing:-.2px}
.fiscal-convite span{display:block;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.5;margin-top:3px;max-width:62ch}
.fiscal-convite .btn{margin-left:auto;flex:none}

.fiscal-cab{display:flex;align-items:flex-start;gap:var(--esp-3);margin-bottom:var(--esp-3)}
.fiscal-cab b{font-size:var(--txt-base);letter-spacing:-.2px}
.fiscal-cab i{display:block;font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3);margin-top:2px}
.fiscal-cab .btn{margin-left:auto;flex:none}

.fiscal-total{display:flex;align-items:baseline;gap:var(--esp-3);flex-wrap:wrap;margin-bottom:var(--esp-3)}
.fiscal-total b{font-size:var(--txt-4xl);font-weight:var(--peso-max);letter-spacing:-.8px;color:var(--deduz);
  font-variant-numeric:tabular-nums}
.fiscal-total span{font-size:var(--txt-md);color:var(--tinta-2)}

.fiscal-lista{display:flex;flex-direction:column;gap:1px;background:var(--linha);
  border:1px solid var(--linha);border-radius:var(--raio-md);overflow:hidden}
.fiscal-linha{
  display:grid;grid-template-columns:48px 110px minmax(0,1fr) auto;gap:var(--esp-3);
  align-items:center;background:var(--card);padding:9px 13px;font-size:var(--txt-md);
  font-variant-numeric:tabular-nums;
}
.fiscal-linha>span{color:var(--tinta-3);font-size:var(--txt-sm)}
.fiscal-val{text-align:right;color:var(--deduz);font-weight:var(--peso-max)}
.fiscal-nada{margin:0;font-size:var(--txt-md);color:var(--tinta-3)}
.fiscal-ressalva{margin:10px 0 0;font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.5}

.fiscal-zero{background:#f3fbf6;border:1px solid #bfe3c9;border-radius:var(--raio-md);padding:13px 15px}
.fiscal-zero b{display:block;font-size:var(--txt-lg);color:var(--pos)}
.fiscal-zero span{display:block;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.5;margin-top:3px}

/* as 27 aliquotas, para conferir de bater o olho */
.fiscal-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--esp-2);margin-top:10px}
.fiscal-ali{display:flex;align-items:center;gap:6px;font-size:var(--txt-sm);font-weight:var(--peso-bold);color:var(--tinta-2)}
.fiscal-ali input{
  width:100%;min-width:0;font:inherit;font-size:var(--txt-md);text-align:right;
  border:1px solid var(--linha);border-radius:var(--raio-sm);padding:5px 7px;
}
.dlg-mais summary{cursor:pointer;font-size:var(--txt-md);font-weight:var(--peso-bold);color:var(--indigo);padding:6px 0}
.dlg-aviso{
  margin:14px 0 0;font-size:var(--txt-sm);line-height:1.55;color:#8a5a00;
  background:#fff8ea;border:1px solid #f3dcae;border-radius:var(--raio-md);padding:10px 12px;
}
.dlg-nota{margin:8px 0 0;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.5;min-height:1px}
.dlg-campo{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.dlg-campo span{font-size:var(--txt-md);font-weight:var(--peso-semi);color:var(--tinta-2)}
.dlg-campo select{
  font:inherit;font-size:var(--txt-lg);padding:9px 11px;border:1px solid var(--linha-forte);
  border-radius:var(--raio-sm);background:var(--card);width:100%;
}
@media (max-width:560px){
  .fiscal-linha{grid-template-columns:42px 1fr auto;row-gap:2px}
  .fiscal-linha>span:nth-of-type(1){grid-column:2}}

/* ================================================================ acabamento
   Camada de refino visual, no fim de propósito: ela só acrescenta profundidade e ajusta
   hierarquia, sem redefinir estrutura de componente nenhum. */

:root{
  /* SOMBRA EM DUAS CAMADAS. Uma sombra só, grande e difusa, faz o elemento parecer recortado
     e colado. O que o olho reconhece como "apoiado" são duas: uma curta e escura logo abaixo
     (o contato com a superfície) e uma longa e fraca (a luz do ambiente). */
  --sombra-1:0 1px 2px rgba(15,18,34,.06), 0 1px 3px -1px rgba(15,18,34,.10);
  --sombra-2:0 2px 4px -2px rgba(15,18,34,.08), 0 12px 24px -16px rgba(15,18,34,.28);
  --sombra-3:0 4px 8px -4px rgba(15,18,34,.10), 0 24px 48px -28px rgba(15,18,34,.40);
  --borda-luz:inset 0 1px 0 rgba(255,255,255,.75);   /* o fio de luz no topo da borda */
  --escuro-1:#171540;
  --escuro-2:#241f5e;
}

/* ---------- o hero da abertura ---------- */
/* véu escuro só na faixa do texto, para o contraste não depender da arte */
/* a luz no canto: um clarão fraco que tira o chapado do gradiente */

/* ---------- superfícies com apoio ----------
   Todo cartão ganha as duas sombras e o fio de luz no topo. É o que separa "retângulo com
   borda" de "cartão apoiado na mesa". */
.prod-card,.gr-card,.sim-cartao,.vg-cx,.mi-card,.fiscal-cx{
  box-shadow:var(--sombra-1), var(--borda-luz);
}
.palco{box-shadow:var(--sombra-2)}
.prod-card:hover,.gr-card:hover,.sim-cartao:hover,.vg-cx:hover{
  box-shadow:var(--sombra-3), var(--borda-luz);
}

/* ---------- títulos ----------
   Hierarquia por TAMANHO e por espaçamento entre letras, não por peso: tudo em 800 deixa de
   ter hierarquia. O título grande fecha as letras (letter-spacing negativo), o pequeno abre —
   é o que faz um parecer manchete e o outro, etiqueta. */
.palco-cab h2,.gr-cab h2,.al-cab h2{letter-spacing:-.6px;text-wrap:balance}
.vg-bloco h3,.palco h3{letter-spacing:-.3px;text-wrap:balance}

/* ---------- botões ----------
   O botão forte deixa de ser um retângulo de cor sólida: ganha um degradê curto, a sombra na
   PRÓPRIA cor (sombra cinza embaixo de botão colorido parece sujeira) e um fio de luz no topo. */

/* ---------- a barra de abas ----------
   Fundo mais fundo e a aba ativa realmente levantada, em vez de só pintada. */
.abas-radar{box-shadow:inset 0 2px 6px rgba(15,18,34,.10), 0 1px 0 #fff}
.ar-aba.ativa{box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 8px 18px -10px rgba(79,70,229,.9)}

/* ---------- a faixa de topo ----------
   O degradê ganha um terceiro ponto e um brilho sutil: o topo era o lugar mais chapado da tela. */
.topo{background:linear-gradient(118deg,var(--escuro-1) 0%,var(--escuro-2) 55%,#3a2f86 100%)}

/* ================================================================ seções e vida
   ---------- o selo da seção ----------
   O título sozinho obriga a LER para saber onde se está. Com um selo colorido na frente, a
   pessoa reconhece a seção antes de ler — e cada assunto tem a sua cor, repetida em todo o
   app: dinheiro em verde, aviso em terracota, preço em âmbar, ferramenta em teal. */
.palco-cab h2,.gr-cab h2{display:flex;align-items:center}
.sec-selo{
  display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border-radius:var(--raio-md);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 6px 14px -8px rgba(15,18,34,.5);
}
.sec-selo.indigo{background:linear-gradient(160deg,#eef0ff,#dfe3ff);color:#4338ca;border:1px solid #ccd2fb}
.sec-selo.verde{background:linear-gradient(160deg,#eafaf0,#d6f3e2);color:var(--pos);border:1px solid #bfe3c9}
.sec-selo.ambar{background:linear-gradient(160deg,#fff8ea,#ffeecb);color:var(--atencao-txt);border:1px solid #f3dcae}
.sec-selo.terracota{background:linear-gradient(160deg,#fff1ec,#ffe0d4);color:var(--deduz);border:1px solid #f6cdc9}
.sec-selo.teal{background:linear-gradient(160deg,#e9faf7,#d2f3ec);color:#0f766e;border:1px solid #b9e8df}

/* no palco escuro o selo vira vidro, senão vira uma mancha clara no meio do azul */
.palco:not(.palco-claro) .sec-selo{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset;
}
.palco-cab h2,.gr-cab h2{font-size:var(--txt-3xl)}      /* o subtítulo alinha com o título, não com o selo */
@media (max-width:640px){
  .sec-selo{width:32px;height:32px;border-radius:var(--raio-sm)}
  .palco-cab h2,.gr-cab h2{font-size:var(--txt-2xl);gap:9px}
}

/* ---------- missões: a cor conta a urgência ----------
   Eram dois tons pálidos de fundo e nada mais. Agora cada missão tem uma FAIXA de cor na
   lateral, o número dentro de um selo da mesma família e o fundo em degradê curto — a lista
   passa a ter ritmo, e a urgência se lê de longe, antes do texto. */
.mi-card{
  position:relative;overflow:hidden;padding-left:19px;
  background:linear-gradient(135deg,#fbfbff,#f5f6fc);
  border-color:var(--linha);
}
.mi-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--mi-cor,var(--indigo))}
.mi-card.erro{--mi-cor:#d03b3b;background:linear-gradient(135deg,#fff5f4,#fdeceb);border-color:#f6cdc9}
.mi-card.aviso{--mi-cor:#ea8c00;background:linear-gradient(135deg,#fffaf0,#fff4e0);border-color:#f3dcae}
.mi-n{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--raio-sm);
  font-size:var(--txt-md);font-weight:var(--peso-max);color:#fff;
  background:var(--mi-cor,var(--indigo));
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 14px -8px var(--mi-cor,var(--indigo));
}
.mi-corpo b{font-size:var(--txt-base)}
.mi-card .ic-txt{color:var(--mi-cor,var(--indigo))}

/* ---------- "Precisa de você": a mesma família ---------- */
.al-item{
  position:relative;overflow:hidden;padding-left:17px;
  background:linear-gradient(135deg,#fbfbff,#f5f6fc);
}
.al-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--al-cor,var(--indigo))}
.al-item.erro{--al-cor:#d03b3b;background:linear-gradient(135deg,#fff5f4,#fdeceb)}
.al-item.aviso{--al-cor:#ea8c00;background:linear-gradient(135deg,#fffaf0,#fff4e0)}
.al-item .al-ico{color:var(--al-cor,var(--indigo))}
.al-cab h2{display:flex;align-items:center;gap:11px;font-size:var(--txt-3xl)}

/* ---------- o diálogo das perguntas ----------
   Ele faz DUAS perguntas que mudam a conta do imposto, e estava com cara de formulário de
   cadastro. Cabeçalho com selo, pergunta grande, e o campo embaixo com ar para respirar. */
#dlg-fiscal{max-width:620px}
#dlg-fiscal h3{
  display:flex;align-items:center;gap:12px;font-size:var(--txt-3xl);letter-spacing:-.5px;
  margin:0 0 6px;text-wrap:balance;
}
#dlg-fiscal h3::before{
  content:"";flex:none;width:40px;height:40px;border-radius:var(--raio-md);
  background:linear-gradient(160deg,#fff8ea,#ffeecb) center/22px 22px no-repeat;
  border:1px solid #f3dcae;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a6b00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5h14v19l-2.3-1.6-2.4 1.6-2.3-1.6-2.4 1.6L7.3 20 5 21.5Z'/%3E%3Cpath d='M9.5 8.5h5M9.5 12.5h5'/%3E%3C/svg%3E"), linear-gradient(160deg,#fff8ea,#ffeecb);
  background-position:center;background-repeat:no-repeat;background-size:21px 21px, cover;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 14px -8px rgba(154,107,0,.5);
}
#dlg-fiscal .dlg-sub{margin:0 0 16px 52px;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.6}
#dlg-fiscal .dlg-campo{margin-top:14px}
#dlg-fiscal .dlg-campo span{font-size:var(--txt-lg);font-weight:var(--peso-bold);color:var(--tinta)}
#dlg-fiscal .dlg-campo select{font-size:var(--txt-base);padding:11px 13px;border-radius:var(--raio-md)}

/* ---------- o quadro do DIFAL com a mesma assinatura ---------- */
.fiscal-cab b,.fiscal-convite b{display:flex;align-items:center;gap:10px}
.fiscal-cx{box-shadow:var(--sombra-2), var(--borda-luz)}

/* ---------- mais vivo ----------
   Fundo da página com um brilho muito fraco no topo: a tela deixa de ser um cinza chapado
   sem que nada fique colorido demais. */
/* o fundo volta a ser liso: o brilho no topo competia com os cartoes em vez de apoia-los */
body{background:var(--fundo)}

/* ---------- o selo da seção com ícone 3D ----------
   A arte 3D entra como fundo e o SVG de traço que estava dentro some — ele continua no HTML
   como reserva: se o PNG não carregar, o traço aparece e a seção nunca fica sem ícone. */
.sec-selo.com3d{
  background-image:var(--ico3d);
  background-size:30px auto;background-position:center;background-repeat:no-repeat;
}
/* ⚠️ No palco escuro o selo vira vidro — e a arte 3D é indigo, que some no azul. Aqui ele
   mantém o fundo claro para o ícone continuar visível; é o contrário do que vale para o
   ícone de traço, que ali fica branco. */
.palco:not(.palco-claro) .sec-selo.com3d{
  /* ⚠️ a regra do selo de vidro usa `background` ABREVIADO, que zera a imagem — e vence por
     especificidade (três classes contra duas). Por isso a arte precisa ser repetida aqui. */
  background-image:var(--ico3d);
  background-size:30px auto;background-position:center;background-repeat:no-repeat;
  background-color:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 18px -10px rgba(0,0,0,.6);
}
.sec-selo.com3d .ic{opacity:0}
/* o selo cresce um pouco: a arte 3D tem sombra própria e pede respiro */
.sec-selo.com3d{width:42px;height:42px;border-radius:var(--raio-md)}
.palco-cab h2,.gr-cab h2{gap:12px}
.palco-cab p,.gr-cab p{margin-left:54px}
@media (max-width:640px){
  .sec-selo.com3d{width:36px;height:36px;background-size:23px auto}
  .palco-cab p,.gr-cab p{margin-left:0}}

/* ---------- ícone 3D nas caixinhas da tela de entrada ---------- */
.hero-lista span.com3d{
  background-image:var(--ico3d);
  background-size:26px auto;background-position:center;background-repeat:no-repeat;
  background-color:rgba(255,255,255,.92);
}
.hero-lista span.com3d .ic{opacity:0}
/* ---------- ícone 3D no menu da conta e na busca ----------
   Aqui o 3D cabe porque cada item tem duas linhas de texto e espaço para respirar. Na barra
   de filtros, que é densa, o traço continua — ícone com volume em lista apertada vira ruído. */
.mi-ico.com3d{
  background-image:var(--ico3d);
  background-size:21px auto;background-position:center;background-repeat:no-repeat;
  width:26px;height:26px;
}
.mi-ico.com3d .ic{opacity:0}
.bf-lupa.com3d{
  background-image:var(--ico3d);
  background-size:17px auto;background-position:center;background-repeat:no-repeat;
  width:19px;height:19px;
}
.bf-lupa.com3d .ic{opacity:0}

/* ================================================================ o radar, em movimento
   O app se chama Radar e a tela de abertura estava parada. Aqui a varredura gira de verdade,
   os anéis saem do centro e um alvo pisca de vez em quando — é a metáfora do produto virando
   comportamento, não só desenho.

   Tudo em `transform` e `opacity`, que o navegador resolve na GPU sem recalcular layout. A
   varredura é um `conic-gradient` girando dentro de uma máscara circular: um elemento só,
   sem canvas, sem JavaScript, sem imagem extra para baixar. */
/* o cone de varredura: 60 graus de luz que giram sem parar */
/* ⚠️ A VARREDURA FICOU PARADA. Ela girava direto atrás do número do lucro, em 46px — é o
   mesmo "brilho no fundo" que saiu do resto do app, sobrevivendo na tela de abertura. O
   desenho fica (o app se chama Radar), o movimento sai. */
@keyframes radar-varre{to{transform:rotate(360deg)}}

/* os anéis que saem do centro, um atrás do outro */
@keyframes radar-anel{
  0%{transform:scale(.18);opacity:0}
  12%{opacity:.85}
  100%{transform:scale(1);opacity:0}
}

/* ---------- o ping do que precisa de atenção ----------
   O selo da missão em erro pulsa devagar, como um alvo que o radar acabou de encontrar. Um
   pulso só, lento: a intenção é chamar o olho uma vez, não piscar o tempo todo. */
.mi-card.erro .mi-n{position:relative}
/* ⚠️ O PING SAIU. O selo tem 30px e o anel ia a 1,9x = 57px, enquanto o espaço até o texto
   é de 12px: o círculo varria as primeiras letras do título, para sempre. A faixa de cor na
   lateral do cartão já diz a urgência sem passar por cima de nada. */


/* ⚠️ A VARREDURA AO TROCAR DE ABA FOI REMOVIDA, e por um defeito meu: ela usava `backwards`,
   que aplica o estado INICIAL antes de comecar e, terminada a animacao, devolve o elemento ao
   CSS normal — onde o gradiente continua visivel e sem deslocamento. Resultado: uma mancha
   clara parada atravessando a tela, por cima dos numeros, ate a proxima troca de aba.
   `forwards` resolveria, mas a resposta certa era outra: num painel que se LE, uma faixa de
   luz por cima do conteudo nao acrescenta nada. Tela limpa vale mais que o efeito. */
.palco{position:relative}

/* ⚠️ Nada disso roda para quem pediu menos movimento no sistema. O radar vira desenho
   parado, e o painel continua inteiro — era enfeite. */
@media (prefers-reduced-motion:reduce){
  .mi-card.erro .mi-n::after{animation:none}
}

/* ---------- menus do fim da barra abrem para a esquerda ----------
   O painel abre ancorado em `left:0`, o que funciona para os primeiros controles. Nos
   ultimos, isso joga a caixa para fora da tela e o texto fica cortado — foi o que aconteceu
   com o filtro de Analise assim que ele entrou. Ancorar a direita resolve para qualquer
   largura, sem medir nada. */
#m-analise .menu-cx,#m-ordem .menu-cx{left:auto;right:0}
#m-analise .menu-cx{min-width:280px}

/* ---------- o crédito, agora clicável ----------
   Era texto solto; vira link para quem fez. Sem sublinhado em repouso — é assinatura, não
   chamada —, mas com o estado de quem pode clicar bem claro ao passar o mouse. */
a.selo-castriani,a.hero-assina{text-decoration:none;color:inherit;transition:color .15s ease, opacity .15s ease}
a.selo-castriani:hover b,a.hero-assina:hover b{text-decoration:underline}
a.selo-castriani:hover{color:var(--tinta)}
a.hero-assina:hover{opacity:1}
a.selo-castriani .sc-logo,a.hero-assina .sc-logo{transition:transform .16s ease}
a.selo-castriani:hover .sc-logo,a.hero-assina:hover .sc-logo{transform:translateY(-1px)}
/* as duas notas do extrato que ficam FORA da soma: visíveis, mas sem cara de parcela */
.ex-nota-linha{
  margin:8px 0 0;font-size:var(--txt-sm);line-height:1.5;color:var(--tinta-3);
  padding-left:11px;border-left:2px solid var(--linha);
}
/* ---------- os botões de agir ----------
   Ficam ao lado do "Resolvido", em tamanho menor que o texto da missão: eles são a saída,
   não o assunto. */
.mi-acoes{margin-top:10px}
.mi-acoes .mi-feito{margin-top:0}
.mi-agir{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.mi-agir:hover{border-color:var(--indigo);color:var(--indigo)}
/* o SKU na linha das tabelas, agora que o nome virou link */
.ge-nome .ge-sku{flex:none}
/* ---------- campanha a campanha (Mercado Ads) ----------
   Mês inteiro não se corta nem se escala; campanha sim. A cor da borda esquerda já diz o
   veredito antes de ler, como nas missões. */
.ad-campanhas{margin-top:var(--esp-4);display:flex;flex-direction:column;gap:6px}
.ad-cab-min{font-size:var(--txt-md);font-weight:var(--peso-bold);color:var(--tinta-2);margin-bottom:4px}
.ad-cab-min span{display:block;font-size:var(--txt-sm);font-weight:500;color:var(--tinta-3);margin-top:1px}
.ad-camp{
  display:grid;grid-template-columns:minmax(0,2fr) 1fr 1.2fr 1fr auto;gap:var(--esp-3);
  align-items:center;padding:10px 13px;border-radius:var(--raio-md);
  background:var(--card);border:1px solid var(--linha);border-left:4px solid var(--linha-forte);
  font-size:var(--txt-md);font-variant-numeric:tabular-nums;
}
.ad-camp.bom{border-left-color:#0a7a2f}
.ad-camp.ruim{border-left-color:#d03b3b}
.ad-camp-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-camp span{color:var(--tinta-3);font-size:var(--txt-sm)}
.ad-camp-lucro{text-align:right;font-weight:var(--peso-bold)}
.ad-camp.bom .ad-camp-lucro,.ad-camp.bom .ad-camp-dizer{color:var(--pos)}
.ad-camp.ruim .ad-camp-lucro,.ad-camp.ruim .ad-camp-dizer{color:var(--neg)}
.ad-camp-dizer{text-transform:uppercase;font-size:var(--txt-xs);letter-spacing:.06em}
/* a legenda do ESCALAR/CORTAR: as mesmas palavras, nas mesmas cores da coluna */
.ad-legenda{margin:0 0 8px;font-size:var(--txt-sm);color:var(--tinta-3)}
.ad-tag{text-transform:uppercase;font-size:var(--txt-xs);letter-spacing:.06em}
.ad-tag.bom{color:var(--pos)}
.ad-tag.ruim{color:var(--neg)}
@media (max-width:760px){
  .ad-camp{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .ad-camp-nome{grid-column:1 / -1}}
/* ---------- estoque por variação ----------
   A barra diz o que vendeu; o número à direita, o que resta. A variação zerada fica marcada
   porque é a ruptura que o estoque total do produto esconde. */
.pv-linha{align-items:center}
.pv-estoque{flex:none;font-size:var(--txt-sm);color:var(--tinta-3);min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.pv-zerada .pv-estoque{color:var(--neg);font-weight:var(--peso-bold)}
.pv-aviso{
  font-style:normal;font-size:var(--txt-xs);font-weight:var(--peso-bold);color:var(--neg);
  background:#fff1f0;border:1px solid #f6cdc9;border-radius:var(--raio-pill);padding:1px 7px;margin-left:6px;
}

/* o DIFAL lembrado no hero: visível, mas sem fingir que já está descontado do número acima */

/* a janela do ritmo, quando é menor que 30 dias: discreta, mas presente — número tirado de
   11 dias de venda não vale o mesmo que um tirado de 30 */
.ge-janela{
  font-style:normal;font-size:var(--txt-2xs);font-weight:var(--peso-bold);color:var(--tinta-3);
  background:var(--card-2);border:1px solid var(--linha);border-radius:var(--raio-pill);
  padding:1px 6px;margin-left:6px;
}

/* filtro sem resultado: o mesmo bloco da lista limpa, em tom neutro — não é conquista, é
   ausência de dado */
.al-limpo.sem-filtro{background:var(--card-2);border-color:var(--linha);color:var(--tinta-2);flex-wrap:wrap}
.al-limpo.sem-filtro b{color:var(--tinta)}
.al-limpo.sem-filtro .ic{color:var(--tinta-3)}
.al-limpo.sem-filtro .btn{margin-left:auto}


/* ================================================================ as abas no cabeçalho
   Elas são navegação, e navegação pertence ao topo. Fora dele ocupavam uma faixa inteira só
   para si — num painel, cada faixa de cromo é conteúdo que sai da primeira tela.
   Sobre o fundo escuro, o trilho vira vidro: a aba ativa é a única sólida, e é por isso que
   ela se encontra sem precisar ler. */
.topo .abas-radar{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  padding:4px;border-radius:var(--raio-lg);
}
.topo .ar-aba{color:rgba(255,255,255,.72)}
.topo .ar-aba .ic{opacity:.8}
.topo .ar-aba:hover:not(.ativa){background:rgba(255,255,255,.10);color:#fff}
.topo .ar-aba.ativa{
  background:#fff;color:var(--indigo);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 14px -8px rgba(0,0,0,.55);
}
.topo .ar-aba.ativa .ic{opacity:1;color:var(--indigo)}
.topo .ar-aba:focus-visible{outline-color:#fff}
/* a faixa do topo passa a fechar embaixo das abas, sem a borda clara que a separava */
.topo{padding-bottom:0}
.topo .wrap{padding-bottom:14px}

@media (max-width:900px){
  .topo .abas-radar{width:100%}}

/* ---------- "Vale olhar": missões sem dinheiro medido ----------
   Mesma família das outras, um grau mais leve — elas não disputam com o que tem cifra. */
.mi-extra{margin-top:var(--esp-5)}
.mi-extra-cab{font-size:var(--txt-md);font-weight:var(--peso-bold);color:var(--tinta-2);margin-bottom:8px}
.mi-extra-cab span{display:block;font-size:var(--txt-sm);font-weight:500;color:var(--tinta-3);margin-top:1px}
.mi-extra .mi-card{padding-left:17px}
.mi-card.mi-leve{background:var(--card-2);border-color:var(--linha)}
.mi-card.mi-leve::before{opacity:.5}
.mi-card.mi-leve .mi-corpo b{font-size:var(--txt-lg)}

/* ---------------------------------------------------------------- curva de visitas desenhada
   A rota trazia 60 dias dia a dia e a tela usava uma frase ("subindo 12%"). A linha mostra se
   a queda foi de hoje ou de um mês — é a diferença entre esperar e agir. */
.vg-spark{margin:12px 0 0;border:1px solid var(--linha);border-radius:var(--raio-md);padding:10px 12px 6px;background:var(--card-2)}
.vg-spark svg{display:block;width:100%;height:90px}
.vg-spark-area{fill:rgba(37,99,235,.10);stroke:none}
.vg-spark-linha{fill:none;stroke:#2563eb;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vg-spark.sobe .vg-spark-area{fill:rgba(21,128,61,.12)}
.vg-spark.sobe .vg-spark-linha{stroke:#15803d}
.vg-spark.desce .vg-spark-area{fill:rgba(185,28,28,.10)}
.vg-spark.desce .vg-spark-linha{stroke:#b91c1c}
.vg-spark-corte{stroke:var(--linha-forte);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.vg-spark-eixo{display:flex;justify-content:space-between;gap:8px;margin-top:4px;
  font-size:var(--txt-sm);color:var(--tinta-3);font-variant-numeric:tabular-nums}
.vg-spark-eixo span:nth-child(2){font-weight:var(--peso-md)}

/* cobertura parcial: "não analisei" nunca pode parecer "está tudo certo" */
.vg-cobertura{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;padding:10px 13px;
  border-radius:var(--raio-sm);background:#fff8ea;border:1px solid #f3dcae;color:#7a4b00;
  font-size:var(--txt-md);line-height:1.55}
.vg-cobertura svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:#b45309}
.vg-cobertura>span{flex:1 1 auto;min-width:0}

/* ⚠️ nome próprio de propósito: `vg-avisos` já é a faixa de avisos da Visão geral, e uma
   segunda regra com o mesmo nome estava mudando o espaçamento dela sem ninguém pedir. */
.vg-recados{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.vg-recados li{font-size:var(--txt-sm);color:var(--tinta-3);padding-left:14px;position:relative;line-height:1.5}
.vg-recados li::before{content:"";position:absolute;left:3px;top:.6em;width:4px;height:4px;
  border-radius:50%;background:var(--linha-forte)}

/* as reclamações, uma por uma: o número sozinho mandava caçar no Mercado Livre */
.vg-recl{margin:10px 0 0;border:1px solid var(--linha);border-radius:var(--raio-sm);background:var(--card-2)}
.vg-recl>summary{display:flex;align-items:center;gap:8px;padding:9px 13px;cursor:pointer;
  font-size:var(--txt-md);font-weight:var(--peso-md);color:var(--tinta-2);list-style:none}
.vg-recl>summary::-webkit-details-marker{display:none}
.vg-recl>summary svg{width:16px;height:16px;color:#b91c1c}
.vg-recl[open]>summary{border-bottom:1px solid var(--linha)}
.vg-recl-lista{padding:4px 0}
.vg-recl-item{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:7px 13px;font-size:var(--txt-sm)}
.vg-recl-item+.vg-recl-item{border-top:1px dashed var(--linha)}
.vg-recl-mot{font-weight:var(--peso-md);color:var(--tinta)}
.vg-recl-item a{color:var(--indigo);text-decoration:none;font-variant-numeric:tabular-nums}
.vg-recl-item a:hover{text-decoration:underline}
.vg-recl-q{color:var(--tinta-3);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
@media (max-width:620px){
  .vg-recl-item{grid-template-columns:1fr auto}
  .vg-recl-q{grid-column:2}}

/* "Resolvido" que caducou: o aviso volta DIZENDO por que voltou */
.al-voltou{display:inline-flex;align-items:center;gap:6px;margin:5px 0 0;padding:3px 9px;
  border-radius:var(--raio-pill);background:#fff8ea;border:1px solid #f3dcae;color:#7a4b00;
  font-size:var(--txt-sm);font-weight:var(--peso-md);line-height:1.35}
.al-voltou svg{width:13px;height:13px;flex:0 0 auto}
.al-item .al-voltou{margin-top:6px}

/* o que o diálogo precisa dizer antes de aceitar: alíquota é imposto na tela */
.dlg-erro{display:grid;gap:5px;margin:12px 0 0;padding:11px 14px;border-radius:var(--raio-sm);
  background:#fff1f0;border:1px solid #f6cdc9;color:#9b241a;
  font-size:var(--txt-md);line-height:1.5}
.dlg-erro span{display:block}
.fiscal-ali input.erro{border-color:#d03b3b;background:#fff6f5;color:#9b241a;
  box-shadow:0 0 0 3px rgba(208,59,59,.12)}

/* o recado que substitui o bloco de canal dentro do menu, quando a barra "Onde vende" existe */
.menu-recado{margin:2px 4px 8px;padding:9px 11px;border-radius:var(--raio-sm);background:var(--card-2);
  border:1px dashed var(--linha-forte);color:var(--tinta-2);font-size:var(--txt-sm);line-height:1.5}

/* o número da missão: o que ordena a lista passa a ser o que o olho acha primeiro.
   O cartão é flex (ícone · corpo · valor); o corpo cresce e o valor fica na direita. */
.mi-card.mi-com-valor .mi-corpo{flex:1 1 auto}
.mi-valor{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:flex-start;gap:1px;padding-left:var(--esp-3);text-align:right}
.mi-valor b{font-size:var(--txt-3xl);font-weight:var(--peso-bold);letter-spacing:-.6px;line-height:1.1;
  color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.mi-valor span{font-size:var(--txt-xs);font-weight:var(--peso-md);color:var(--tinta-3);line-height:1.25;
  white-space:nowrap}
.mi-card.erro .mi-valor b{color:var(--neg)}
@media (max-width:620px){
  /* no telefone não há coluna: o valor vira uma linha acima do texto, ainda em destaque */
  .mi-card.mi-com-valor{flex-wrap:wrap}
  .mi-valor{order:-1;width:100%;flex-direction:row;align-items:baseline;gap:7px;
    padding:0 0 2px 0;text-align:left;justify-content:flex-start}
  .mi-valor b{font-size:var(--txt-2xl)}}
/* ---------------------------------------------------------------- a porta do suporte
   Fechada por padrão, aberta pelo dono da conta, por um prazo que ele escolhe. O estado
   aparece no próprio menu: porta aberta é coisa para saber de relance. */
.sup-ligado{color:var(--pos) !important;font-weight:var(--peso-bold) !important}
.sup-cx{display:grid;gap:3px;padding:14px 16px;border-radius:var(--raio-md);margin:14px 0 0}
.sup-cx b{font-size:var(--txt-lg)}
.sup-cx span{font-size:var(--txt-md);line-height:1.5}
.sup-cx.aberta{background:#eafaf0;border:1px solid #bfe9cf;color:#14532d}
.sup-cx.fechada{background:var(--card-2);border:1px solid var(--linha);color:var(--tinta-2)}
.sup-acesso{color:var(--tinta-2);font-size:var(--txt-sm) !important;margin-top:4px}
.sup-prazos{display:flex;gap:var(--esp-2);margin:14px 0 0;flex-wrap:wrap}
/* ⚠️ `display:flex` numa classe vence o atributo `hidden` (que é display:none do navegador).
   Sem esta linha, os prazos continuam na tela com a porta já aberta. */
.sup-prazos[hidden]{display:none}
.sup-prazos .btn{flex:1 1 auto;min-width:96px;justify-content:center}

/* A faixa de atendimento: o painel do cliente é IGUAL ao seu, e confundir os dois é fácil
   demais. Fica no topo, vermelha, e com a saída a um clique. */
.faixa-atendimento{
  position:sticky;top:0;z-index:90;display:flex;align-items:center;justify-content:center;
  gap:var(--esp-3);flex-wrap:wrap;padding:10px 16px;
  background:#8c1f1f;color:#fff;font-size:var(--txt-md);line-height:1.45;text-align:center;
  box-shadow:0 2px 12px rgba(140,31,31,.35);
}
.faixa-atendimento b{font-weight:var(--peso-bold)}
.faixa-atendimento .btn{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;
  padding:5px 14px;font-size:var(--txt-sm);
}
.faixa-atendimento .btn:hover{background:rgba(255,255,255,.26);border-color:#fff}

/* ---------------------------------------------------------------- Raio-X do dinheiro
   Os valores que existiam e ninguém via. A barra responde "para onde foi o meu dinheiro"
   de relance; os cartões dizem, um a um, se o valor mexe ou não no lucro. Cores de uma
   família só por tipo de gasto — a mercadoria pesa mais e tem o tom mais forte. */
.rx .rx-sec{margin-top:22px}
.rx .rx-sec:first-of-type{margin-top:16px}
.rx h4{margin:0;font-size:var(--txt-lg);letter-spacing:-.2px;color:var(--tinta)}
.rx-sub{margin:3px 0 12px;font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.5}

.rx-barra{display:flex;height:22px;border-radius:var(--raio-pill);overflow:hidden;background:var(--card-2);
  border:1px solid var(--linha);margin-bottom:12px}
.rx-f{display:block;height:100%;min-width:2px}
.rx-custo{background:var(--marca)}.rx-tarifa{background:#f59e0b}.rx-frete{background:#0ea5e9}
.rx-publi{background:#db2777}.rx-imposto{background:#64748b}.rx-cupom{background:#a855f7}
.rx-devol{background:#ef4444}.rx-emb{background:#94a3b8}.rx-lucro{background:#16a34a}
.rx-prejuizo{background:#b91c1c}

.rx-cab,.rx-l{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px;gap:10px;align-items:center}
.rx-cab{font-size:var(--txt-xs);font-weight:var(--peso-bold);color:var(--tinta-3);letter-spacing:.04em;
  text-transform:uppercase;padding:0 0 6px;border-bottom:1px solid var(--linha)}
.rx-cab span:nth-child(n+2){text-align:right}
.rx-l{padding:8px 0;border-bottom:1px dashed var(--linha)}
.rx-l .rx-rot{display:flex;flex-direction:column;min-width:0;padding-left:20px;position:relative}
.rx-l .rx-rot b{font-size:var(--txt-md);color:var(--tinta)}
.rx-l .rx-rot em{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3)}
.rx-ponto{position:absolute;margin:5px 0 0 0;width:11px;height:11px;border-radius:3px}
.rx-l .rx-cem,.rx-l .rx-v{text-align:right;font-variant-numeric:tabular-nums;font-size:var(--txt-md)}
.rx-l .rx-cem{color:var(--tinta-2)}
.rx-l.rx-forte{border-bottom:0;padding-top:10px}
.rx-l.rx-forte .rx-rot b,.rx-l.rx-forte .rx-v{font-size:var(--txt-lg);font-weight:var(--peso-bold)}

.rx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.rx-card{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border-radius:var(--raio-md);
  background:var(--card-2);border:1px solid var(--linha)}
.rx-card.rx-bom{background:#f2fbf5;border-color:#cdeed8}
.rx-tag{align-self:flex-start;font-size:var(--txt-xs);font-weight:var(--peso-bold);letter-spacing:.03em;
  padding:2px 8px;border-radius:var(--raio-pill);text-transform:uppercase}
.rx-tag.rx-nao{background:#eef2ff;color:#3730a3}
.rx-tag.rx-mexe{background:#fff1e6;color:#9a3412}
.rx-valor{font-size:var(--txt-3xl);letter-spacing:-.5px;margin-top:5px;font-variant-numeric:tabular-nums}
.rx-titulo{font-size:var(--txt-md);font-weight:var(--peso-bold);color:var(--tinta)}
.rx-titulo small{font-weight:var(--peso-md);color:var(--tinta-3)}
.rx-card p{margin:4px 0 0;font-size:var(--txt-sm);line-height:1.5;color:var(--tinta-2)}

.rx-conta{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.rx-conta span{display:flex;flex-direction:column;justify-content:center;padding:9px 14px;
  border-radius:var(--raio-sm);background:var(--card-2);border:1px solid var(--linha);min-width:130px}
.rx-conta span b{font-size:var(--txt-lg);font-variant-numeric:tabular-nums}
.rx-conta span em{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3)}
.rx-conta span.rx-ml{background:#fffbe8;border-color:#f3e3a3}
.rx-conta i{align-self:center;font-style:normal;font-size:var(--txt-3xl);font-weight:var(--peso-bold);color:var(--tinta-3)}
.rx-nota{font-size:var(--txt-sm);color:var(--tinta-2);margin:4px 0 0}

@media (max-width:620px){
  .rx-cab,.rx-l{grid-template-columns:minmax(0,1fr) 80px 92px;gap:6px}
  .rx-conta span{min-width:0;flex:1 1 40%}
  .rx-conta i{display:none}
}

/* card ADS: o nome grande e o MÊS em destaque — a conta de anúncio é sempre de um mês só */
.ads-rot{font-size:var(--txt-base);font-weight:var(--peso-max);letter-spacing:.08em;color:var(--cor)}
.ads-mes{margin-left:8px;padding:2px 8px;border-radius:var(--raio-pill);background:color-mix(in srgb,var(--cor) 9%,transparent);color:var(--cor);font-size:var(--txt-sm);font-weight:var(--peso-bold);letter-spacing:.02em}

/* card Recebido: as tarifas abertas, com os nomes do Mercado Livre */
.taxa-lista{display:flex;flex-direction:column;gap:4px;font-size:var(--txt-lg)}
.taxa-linha{display:flex;justify-content:space-between;gap:10px;color:var(--tinta-2)}
.taxa-linha b{font-weight:var(--peso-bold);white-space:nowrap}
.taxa-linha.total{border-top:1px solid var(--linha);padding-top:5px;margin-top:2px;color:var(--tinta)}
.taxa-linha.total b{font-size:var(--txt-base)}

/* aba Pedidos: POR QUE o pedido está apagado — cancelado, devolvido ou com reembolso */
.pd-motivo{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--raio-pill);font-size:var(--txt-sm);font-weight:var(--peso-bold);letter-spacing:.02em;vertical-align:middle}
.pd-motivo.cancelado{background:#eef0f5;color:#4c5168}
.pd-motivo.devolvido{background:#fde8e8;color:#b42318}
.pd-motivo.reembolso{background:#fff3dc;color:#a15c00}
.pd-motivo.voltou{background:#e8f0fe;color:#1d4ed8}
.pd-voltou{margin:0;padding:6px 12px 8px;font-size:13px;color:#1d4ed8;line-height:1.4}
.pd-motivo-txt{display:block;margin-bottom:6px;font-weight:var(--peso-bold)}
.pd-motivo-txt.devolvido{color:#b42318}.pd-motivo-txt.reembolso{color:#a15c00}.pd-motivo-txt.voltou{color:#1d4ed8}.pd-motivo-txt.cancelado{color:#4c5168}

/* custo em massa: os botões à vista na aba Produtos e no card Lucro sem custo */
.cst-acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.cst-no-card{margin-top:10px;font-size:var(--txt-md);padding:8px 12px}

/* janela da planilha de custos: nome de produto comprido empurrava a janela para fora da tela */
#dlg-custos{max-width:640px;overflow-x:hidden}
#dlg-custos .dlg-corpo,#dlg-custos .cst-mapa label{min-width:0}
#dlg-custos .cst-mapa select{width:100%;min-width:0}
.cst-linha>span:not(:last-child){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* tarifa aberta (fatura do ML) e o estorno da comissão — card Recebido e detalhe do pedido */
.taxa-linha.sub{padding-left:12px;font-size:var(--txt-md);color:var(--tinta-3)}
.taxa-linha.sub b{font-weight:600}
.taxa-linha.mais b,.pd-l.mais b{color:var(--pos)}
.pd-l.sub{padding-left:14px;font-size:.92em;opacity:.85}

/* estorno da comissão: interruptor em destaque no card Recebido (antes era uma caixinha escondida) */
.estorno-cx{align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;
  border:1px solid var(--linha);border-radius:var(--raio-lg);background:#f7f8fc;transition:background .2s,border-color .2s}
.estorno-cx.ligado{background:#ecfbf1;border-color:#9fe0b6}
.interruptor{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.interruptor:disabled{cursor:not-allowed;opacity:.55}
.int-trilho{position:relative;width:46px;height:26px;border-radius:var(--raio-pill);background:#c9cede;transition:background .2s;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.int-bola{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.interruptor[aria-checked="true"] .int-trilho{background:#12a150}
.interruptor[aria-checked="true"] .int-bola{transform:translateX(20px)}
.interruptor:focus-visible .int-trilho{outline:3px solid rgba(79,70,229,.45);outline-offset:2px}

/* interruptor do estorno: título e chave numa linha, explicação embaixo (cabe no card estreito) */
.estorno-cx{display:block}
.estorno-topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.estorno-topo b{font-size:var(--txt-lg);color:var(--tinta);line-height:1.2}
.estorno-cx .interruptor{flex-direction:row;gap:8px}
.estorno-desc{display:block;margin-top:6px;font-size:var(--txt-sm);line-height:1.4;color:var(--tinta-3)}
.estorno-cx.ligado .estorno-desc{color:var(--pos);font-weight:600}

.estorno-topo b{flex:1;min-width:0}
.est-estado{font-weight:800;text-transform:uppercase;font-size:var(--txt-xs);letter-spacing:.05em}

/* Lucro e ADS no formato de extrato, igual ao Recebido */
.extrato-nota{margin:10px 0 0;font-size:var(--txt-sm);line-height:1.45;color:var(--tinta-3)}
.ads-veredito{margin-top:12px;padding:10px 12px;border-radius:var(--raio-md);font-size:var(--txt-md);font-weight:700}
.ads-veredito.bom{background:#ecfbf1;color:var(--pos);border:1px solid #9fe0b6}
.ads-veredito.ruim{background:#fdecec;color:#b42318;border:1px solid #f3b4b4}
/* o que sai do dinheiro é sempre vermelho-terracota, em qualquer card (no Lucro e no ADS herdava o verde do card) */
.taxa-linha.menos b{color:var(--deduz)}

/* ===== 2 abas: Resultado e Vendas ===== */
.vendas-vista{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px}
.vendas-vista[hidden]{display:none}
.vv-seletor{display:inline-flex;padding:4px;border-radius:var(--raio-lg);background:#eceef6;border:1px solid var(--linha)}
.vv-btn{border:0;background:none;padding:10px 20px;border-radius:var(--raio-sm);font:inherit;font-size:var(--txt-base);font-weight:700;color:var(--tinta-2);cursor:pointer}
.vv-btn.ativa{background:#fff;color:var(--marca);box-shadow:0 6px 16px -10px rgba(15,18,34,.45)}
.vv-faixas{display:flex;flex-wrap:wrap;gap:8px}
.vv-faixas[hidden]{display:none}
.vv-faixa{border:1px solid var(--linha);background:#fff;border-radius:var(--raio-pill);padding:7px 14px;font:inherit;font-size:var(--txt-md);font-weight:600;color:var(--tinta-2);cursor:pointer}
.ajustes-cx{margin-top:18px;border:1px solid var(--linha);border-radius:var(--raio-lg);background:#fff}
.ajustes-cx>summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:var(--txt-base);list-style:none}
.ajustes-cx>summary::-webkit-details-marker{display:none}
.ajustes-cx>summary::before{content:'▸';display:inline-block;margin-right:8px;transition:transform .2s}
.ajustes-cx[open]>summary::before{transform:rotate(90deg)}
.ajustes-cx>summary span{display:block;margin:3px 0 0 18px;font-size:var(--txt-md);font-weight:500;color:var(--tinta-3)}
.ajustes-corpo{padding:0 18px 18px}
@media (max-width:560px){ .vv-seletor{width:100%} .vv-btn{flex:1;padding:10px 8px} }
.lucro-grupos-tit{margin:22px 0 10px;font-size:var(--txt-xl)}

/* ===== aba Produtos: a base inteira de anúncios ===== */
.sv-resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.sv-resumo>div{background:#fff;border:1px solid var(--linha);border-radius:var(--raio-lg);padding:14px 16px}
.sv-resumo b{display:block;font-size:var(--txt-3xl);font-weight:var(--peso-max);color:var(--tinta)}
.sv-resumo span{font-size:var(--txt-md);color:var(--tinta-3)}
.sv-resumo .sv-dinheiro b{color:var(--deduz)}
.sv-tabela{background:#fff;border:1px solid var(--linha);border-radius:var(--raio-lg);overflow:hidden}
.sv-linha{display:grid;grid-template-columns:minmax(0,3.2fr) .9fr .8fr .9fr 1.1fr 1fr;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--linha);font-size:var(--txt-lg)}
.sv-linha:last-child{border-bottom:0}
.sv-cab{font-size:var(--txt-xs);font-weight:var(--peso-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);background:#f7f8fc}
.sv-prod{display:flex;gap:10px;align-items:center;min-width:0}
.sv-prod img,.sv-prod>i{flex:none;width:40px;height:40px;border-radius:var(--raio-sm);object-fit:cover;background:#eef0f5}
.sv-prod>span{min-width:0}
.sv-prod b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-prod em{display:block;font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3)}
.sv-sit.ativo{color:var(--pos);font-weight:600}.sv-sit.outro{color:var(--tinta-3)}
.sv-parado{font-weight:700;color:var(--deduz)}
.sv-linha i{font-style:normal;color:var(--tinta-3);font-size:var(--txt-sm)}
.sv-mais{padding:10px 14px;font-size:var(--txt-md);color:var(--tinta-3)}
.sv-vazio{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:28px;background:#fff;border:1px dashed var(--linha);border-radius:var(--raio-lg)}
.sv-vazio span{color:var(--tinta-3);font-size:var(--txt-lg)}
@media (max-width:900px){
  .sv-cab{display:none}
  .sv-linha{grid-template-columns:1fr 1fr;row-gap:4px}
  .sv-prod{grid-column:1/-1}
  .sv-resumo{grid-template-columns:1fr}
}

.estorno-fatura{margin-top:8px;padding-top:8px;border-top:1px dashed var(--linha);font-size:var(--txt-sm);line-height:1.45;color:var(--atencao-txt)}
.estorno-fatura .btn-mini{margin-top:6px;display:inline-block}

/* subtotal do card Lucro: o lucro antes dos anúncios (o "operacional") */
.taxa-linha.subtotal{border-top:1px dashed var(--linha);padding-top:5px;margin-top:2px;color:var(--tinta)}
.taxa-linha.subtotal b{color:var(--pos)}
#trilha[hidden]{display:none}

/* missões: o produto é um link, e "Ver o produto" / "Abrir no Mercado Livre" ao lado da ação */
.mi-prod.mi-ver{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;margin:2px 0 6px;font:inherit;font-weight:600;color:var(--marca);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(79,70,229,.35);text-underline-offset:3px}
.mi-prod.mi-ver:hover{text-decoration-color:var(--marca)}
.mi-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mi-link{background:#fff;border:1px solid var(--linha);color:var(--tinta-2);text-decoration:none}
.mi-link:hover{border-color:var(--marca);color:var(--marca)}
.prod-card.destaque{box-shadow:0 0 0 3px var(--marca),0 18px 40px -20px rgba(79,70,229,.6);transition:box-shadow .3s}
.mi-card .mi-prod.mi-ver{color:var(--marca)}

/* "Saiba mais": o texto que explica a conta, fechado por padrão */
.saiba{margin-top:8px}
.saiba>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:var(--txt-sm);font-weight:700;color:var(--marca);padding:4px 10px;border:1px solid rgba(79,70,229,.25);border-radius:var(--raio-pill);background:#f5f4ff}
.saiba>summary::-webkit-details-marker{display:none}
.saiba>summary::after{content:'+';font-weight:800}
.saiba[open]>summary::after{content:'−'}
.saiba-txt{margin-top:8px;font-size:var(--txt-md);line-height:1.5;color:var(--tinta-3)}
.saiba-txt .extrato-nota{margin:0 0 6px}

/* ⓘ ao lado do nome do card: a explicação da conta aparece ao passar o mouse ou tocar */
.trilha-rot{position:relative}
.info-dica{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:5px;border-radius:50%;
  border:1px solid currentColor;font:700 10px/1 Georgia,serif;font-style:italic;color:var(--tinta-3);cursor:help;vertical-align:1px;position:relative;text-transform:none;letter-spacing:0}
.info-dica:hover,.info-dica:focus{color:var(--marca);outline:none}
.info-dica::after{content:attr(data-dica);display:none;position:absolute;left:-8px;top:calc(100% + 8px);z-index:30;width:max-content;max-width:280px;
  padding:10px 12px;border-radius:var(--raio-sm);background:#0f1222;color:#fff;font:500 12.5px/1.45 Inter,system-ui,sans-serif;font-style:normal;
  text-transform:none;letter-spacing:0;box-shadow:0 16px 36px -14px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s,transform .15s}
/* escondida com display:none (e não só opacity): a dica invisível ainda alargava a página e criava rolagem de lado */
.info-dica:hover::after,.info-dica:focus::after{display:block;opacity:1;transform:none}
@media (max-width:560px){ .info-dica::after{max-width:240px} }

/* ===== aba Produtos: uma tabela, o detalhe abre ao clicar ===== */
.pt-tabela{background:#fff;border:1px solid var(--linha);border-radius:var(--raio-lg);overflow:hidden}
.pt-cab,.pt-linha>summary{display:grid;gap:10px;align-items:center;padding:10px 14px}
.pt-cab{font-size:var(--txt-xs);font-weight:var(--peso-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);background:#f7f8fc;border-bottom:1px solid var(--linha)}
.pt-linha{border-bottom:1px solid var(--linha)}
.pt-linha:last-child{border-bottom:0}
.pt-linha>summary{list-style:none;cursor:pointer;font-size:var(--txt-lg)}
.pt-linha>summary::-webkit-details-marker{display:none}
.pt-linha>summary:hover{background:#f7f8fc}
.pt-linha.ruim>summary{box-shadow:inset 3px 0 0 #d03b3b}
.pt-prod{display:flex;gap:10px;align-items:center;min-width:0}
.pt-prod img,.pt-prod>i{flex:none;width:38px;height:38px;border-radius:var(--raio-sm);object-fit:cover;background:#eef0f5}
.pt-prod>span{min-width:0}
.pt-prod b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-prod em{display:block;font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3)}
.pt-lucro{font-weight:700;color:var(--pos)}
.pt-linha.ruim .pt-lucro{color:var(--neg)}
.pt-semcusto{font-style:normal;font-size:var(--txt-sm);color:var(--atencao-txt);font-weight:600}
.pt-alerta{color:var(--deduz);font-weight:700}
.pt-abrir{transition:transform .2s;text-align:center}
.pt-linha[open] .pt-abrir{transform:rotate(90deg)}
.pt-linha[open]>summary{background:#f5f4ff}
.pt-detalhe{padding:12px 14px 16px;background:#fafbff}
.pt-detalhe .prod-card{margin:0;box-shadow:none}
.pt-canais{margin-top:12px;padding:12px 14px;background:#fff;border:1px solid var(--linha);border-radius:var(--raio-md)}
.pt-canais>b{display:block;margin-bottom:6px;font-size:var(--txt-md)}
.sv-recolhido{background:#fff;border:1px solid var(--linha);border-radius:var(--raio-lg)}
.sv-recolhido>summary{cursor:pointer;list-style:none;padding:14px 16px;font-size:var(--txt-lg);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sv-recolhido>summary::-webkit-details-marker{display:none}
.sv-recolhido>summary span{margin-left:auto;color:var(--marca);font-weight:700;font-size:var(--txt-md)}
.sv-recolhido[open]>summary span{display:none}
.sv-recolhido>.sv-resumo,.sv-recolhido>.sv-tabela{margin:0 14px 14px}
.sv-dinheiro-txt{color:var(--deduz)}
@media (max-width:900px){
  .pt-cab{display:none}
  .pt-linha>summary{row-gap:4px}
  .pt-prod{grid-column:1/-1}
  .pt-linha>summary>[data-rot="Receita"],.pt-linha>summary>[data-rot="Margem"],.pt-linha>summary>[data-rot="Estoque"]{display:none}
  .pt-linha>summary>[data-rot]::before{content:attr(data-rot);display:block;font-size:var(--txt-xs);color:var(--tinta-3);text-transform:uppercase;letter-spacing:.04em}
}
/* o "›" sozinho não dizia o que fazia: agora é um botão com texto ("Ver detalhes" / "Fechar") */
/* 03/11: + a coluna Custo / un (entre Faturamento e Lucro) */
.pt-cab,.pt-linha>summary{grid-template-columns:minmax(0,3fr) .7fr 1fr 1fr 1fr .7fr .7fr .7fr 118px}
.pt-abrir{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:6px 10px;border:1px solid rgba(79,70,229,.3);border-radius:var(--raio-pill);
  background:#f5f4ff;color:var(--marca);font-size:var(--txt-sm);font-weight:700;white-space:nowrap;transform:none!important}
.pt-abrir::after{content:'▾';font-size:var(--txt-xs)}
.pt-linha[open] .pt-abrir::after{content:'▴'}
.pt-linha>summary:hover .pt-abrir{background:var(--marca);color:#fff;border-color:var(--marca)}
.pt-abrir .pt-fechar{display:none}
.pt-linha[open] .pt-abrir .pt-ver{display:none}
.pt-linha[open] .pt-abrir .pt-fechar{display:inline}
@media (max-width:900px){ .pt-linha>summary{grid-template-columns:1fr 1fr 1fr auto} .pt-abrir{padding:5px 8px;font-size:var(--txt-xs)} }

/* ================================================================ Fase 3: a casca de app
   O painel deixou de ser uma página comprida com um cabeçalho cheio de botões e abas e virou
   um app: topo fino e fixo (marca, pílula "Ao vivo", conta), menu lateral à esquerda com
   ícone e nome, e o conteúdo ocupando o resto. No celular o menu vira a barra fixa embaixo.
   Tudo aqui está num bloco só, no fim do arquivo, com seletores mais específicos que as
   regras antigas do topo — assim nada de antes precisa ser caçado para o novo funcionar. */
:root{ --topo-h:64px; --lateral-l:236px; --lateral-r:76px; --faixa-h:0px; }

/* elemento com o atributo `hidden` some, sempre. Várias regras davam `display:flex` a
   caixas que o JS esconde com `hidden` (a barra "Onde vende", a faixa das fichas) — e o
   autor vence o navegador: elas apareciam vazias. */
[hidden]{display:none !important}

/* ---------- topo fino e fixo ---------- */
header.topo{
  position:sticky;top:var(--faixa-h);z-index:60;margin:0;padding:0 18px 0 16px;height:var(--topo-h);
  display:flex;align-items:center;
  background:linear-gradient(100deg,var(--escuro-1) 0%,var(--escuro-2) 62%,#2d2672 100%);
  box-shadow:0 10px 26px -18px rgba(9,7,40,.75);
}
header.topo::after{height:2px;opacity:.85}
header.topo .topo-linha{width:100%;flex-wrap:nowrap;gap:16px}
header.topo .marca{gap:11px;min-width:0;flex:0 1 auto}
header.topo .marca>div{min-width:0}
header.topo .marca img.marca-logo{width:38px;height:38px;border-radius:var(--raio-sm)}
header.topo .marca h1{font-size:var(--txt-xl);white-space:nowrap;letter-spacing:-.3px}
header.topo .marca p{margin-top:1px;font-size:var(--txt-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.topo .topo-acoes{flex-wrap:nowrap;gap:10px;margin-left:auto;align-items:center;width:auto;padding:0}
header.topo .menu-botao{padding:6px 10px}
header.topo .mb-avatar{width:28px;height:28px}

/* a pílula "● Ao vivo · atualizado às 14h05 ↻" */
.pilula-vivo{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 12px;
  border-radius:var(--raio-pill);border:1px solid rgba(74,222,128,.34);
  background:rgba(74,222,128,.10);color:#d6fbe4;cursor:pointer;
  font-family:inherit;font-size:var(--txt-md);font-weight:600;white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s;
}
.pilula-vivo:hover{background:rgba(74,222,128,.18);border-color:rgba(74,222,128,.6);color:#fff}
.pilula-vivo:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pv-ponto{flex:none;width:8px;height:8px;border-radius:50%;background:#4ade80;animation:pv-pulso 2.4s ease-out infinite}
@keyframes pv-pulso{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.pv-girar{flex:none;opacity:.7}
.pilula-vivo:hover .pv-girar{opacity:1}
.pilula-vivo.lendo .pv-girar{opacity:1;animation:pv-gira .9s linear infinite}
@keyframes pv-gira{to{transform:rotate(360deg)}}
.pilula-vivo.reconectar{border-color:rgba(248,113,113,.7);background:rgba(220,38,38,.28);color:#fff}
.pilula-vivo.reconectar:hover{background:rgba(220,38,38,.42)}
.pilula-vivo.reconectar .pv-ponto{background:#f87171;animation:none}
.pilula-vivo.falhou{border-color:rgba(251,191,36,.55);background:rgba(251,191,36,.14);color:#fef3c7}
.pilula-vivo.falhou .pv-ponto{background:#fbbf24;animation:none}

/* ---------- a casca: menu à esquerda, conteúdo à direita ---------- */
.casca{display:flex;align-items:flex-start;min-height:calc(100vh - var(--topo-h) - var(--faixa-h))}
.casca-conteudo{flex:1;min-width:0}
.casca-conteudo>.wrap{padding-top:22px}

.lateral{
  position:sticky;top:calc(var(--topo-h) + var(--faixa-h));z-index:50;flex:none;
  width:var(--lateral-l);height:calc(100vh - var(--topo-h) - var(--faixa-h));
  display:flex;flex-direction:column;gap:10px;padding:16px 12px 14px;
  background:linear-gradient(180deg,var(--escuro-1) 0%,#1b1849 100%);
  border-right:1px solid rgba(255,255,255,.06);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
  transition:width .2s ease, padding .2s ease;
}
.lateral .abas-radar{
  display:flex;flex-direction:column;gap:3px;width:100%;
  margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;
  max-width:none;overflow:visible;mask-image:none;-webkit-mask-image:none;
}
.lateral .ar-aba{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 12px;border-radius:var(--raio-md);border:1px solid transparent;
  background:transparent;color:rgba(226,229,250,.74);transform:none;box-shadow:none;
  font-size:var(--txt-lg);font-weight:600;letter-spacing:-.1px;text-align:left;white-space:nowrap;
}
.lateral .ar-aba .ic{flex:none;width:20px;height:20px;opacity:.82;transform:none}
.lateral .ar-aba:hover:not(.ativa){background:rgba(255,255,255,.07);color:#fff}
.lateral .ar-aba:hover .ic{opacity:1;transform:none}
.lateral .ar-aba.ativa{
  background:linear-gradient(180deg,rgba(129,120,255,.32),rgba(99,91,240,.20));
  border-color:rgba(167,160,255,.34);color:#fff;font-weight:700;
  box-shadow:0 12px 26px -16px rgba(79,70,229,.95), inset 0 1px 0 rgba(255,255,255,.12);
}
/* o trilho aceso na borda do menu: a aba ativa se acha sem ler */
.lateral .ar-aba.ativa::before{
  content:'';position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#a78bfa,#4ade80);
}
.lateral .ar-aba.ativa .ic{opacity:1;color:#cbc6ff}
.lateral .ar-aba:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ar-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ar-curto{display:none}
/* o contador do "A fazer" */
.ar-conta{
  flex:none;min-width:22px;height:20px;padding:0 6px;border-radius:var(--raio-pill);
  display:inline-grid;place-items:center;font-style:normal;
  background:#f97316;color:#fff;font-size:var(--txt-xs);font-weight:var(--peso-max);line-height:1;
  box-shadow:0 0 0 2px var(--escuro-1);
}
.lateral-recolher{
  margin-top:auto;display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border-radius:var(--raio-md);border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:rgba(226,229,250,.66);cursor:pointer;
  font-family:inherit;font-size:var(--txt-md);font-weight:600;white-space:nowrap;
}
.lateral-recolher:hover{background:rgba(255,255,255,.09);color:#fff}
.lateral-recolher:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lateral-recolher .ic{flex:none;transition:transform .2s ease}

/* recolhido: só a coluna de ícones (o nome vem no `title`, ao passar o mouse) */
@media (min-width:901px){
  .menu-recolhido .lateral{width:var(--lateral-r);padding-left:10px;padding-right:10px}
  .menu-recolhido .lateral .ar-aba{justify-content:center;padding:12px 0;gap:0}
  .menu-recolhido .lateral .ar-aba.ativa::before{left:-10px}
  .menu-recolhido .lateral .ar-nome,
  .menu-recolhido .lateral-recolher span{display:none}
  .menu-recolhido .lateral .ar-conta{position:absolute;top:3px;right:6px;min-width:18px;height:17px;padding:0 4px;font-size:var(--txt-2xs)}
  .menu-recolhido .lateral-recolher{justify-content:center;padding:10px 0}
  .menu-recolhido .lateral-recolher .ic{transform:rotate(180deg)}
}

/* painel vazio: sem abas (sete telas vazias), só as boas-vindas */
body.sem-dados .lateral{display:none}

/* atendimento: a faixa vermelha fica por cima de tudo, e o topo e o menu descem para baixo dela */
body.com-atendimento{--faixa-h:46px}
body.com-atendimento .faixa-atendimento{min-height:var(--faixa-h);padding-top:6px;padding-bottom:6px}

/* ---------- a barra de filtros muda com a aba ---------- */
.bf-agora{
  display:none;align-items:center;gap:8px;padding:9px 13px;border-radius:var(--raio-md);
  border:1px dashed #c7d2fe;background:#f5f6ff;color:var(--indigo-escuro);
  font-size:var(--txt-md);font-weight:var(--peso-bold);white-space:nowrap;
}
.bf-agora i{font-style:normal;font-weight:500;color:var(--tinta-3);font-size:var(--txt-sm)}
#conteudo[data-aba="afazer"] .bf-agora,#conteudo[data-aba="reposicao"] .bf-agora{display:inline-flex}
/* Preço não tem barra: o simulador não usa filtro e os degraus olham todos os produtos */
#conteudo[data-aba="preco"] #filtros-cx,#conteudo[data-aba="preco"] #canais-barra,
#conteudo[data-aba="simulador"] #filtros-cx,#conteudo[data-aba="simulador"] #canais-barra,
#conteudo[data-aba="canais"] #canais-barra,
#conteudo[data-aba="visitas"] #filtros-cx,#conteudo[data-aba="visitas"] #canais-barra,
#conteudo[data-aba="receber"] #filtros-cx,#conteudo[data-aba="receber"] #canais-barra,
#conteudo[data-aba="dados"] #filtros-cx,#conteudo[data-aba="dados"] #canais-barra,
#conteudo[data-aba="gestao"] #filtros-cx,#conteudo[data-aba="gestao"] #canais-barra,
#conteudo[data-aba="relatorios"] #filtros-cx,#conteudo[data-aba="relatorios"] #canais-barra{display:none !important}
/* o resto (o que cada aba mostra) vem da tabela FILTROS_DA_ABA, em produtos-filtros.js */
/* com o menu ao lado a barra tem menos largura: a busca encolhe antes de a barra quebrar linha */
.barra-filtros .bf-busca{flex:1 1 200px}
/* a coluna Faturamento da tabela de produtos (era "Receita") some no celular, como antes */
@media (max-width:900px){ .pt-linha>summary>[data-rot="Faturamento"]{display:none} }

/* ---------- avisos com o botão que resolve ---------- */
.vg-aviso.com-acao{display:flex;align-items:center;gap:var(--esp-3)}
.vg-aviso.com-acao>span{flex:1;min-width:0}
.vg-aviso .vg-acao{flex:none;white-space:nowrap;background:#fff}
.vg-aviso.vg-tom-info{background:#f2f5ff;border:1px solid #d6defb;color:#26306b}
@media (max-width:640px){ .vg-aviso.com-acao{flex-direction:column;align-items:flex-start} }

/* o selo do card Lucro quando a publicidade está fora da conta */
.selo-sem-publi{
  display:inline-flex;align-items:center;margin-top:6px;padding:3px 10px;border-radius:var(--raio-pill);
  background:#fff1e6;border:1px solid #fed7aa;color:#9a3412;
  font-size:var(--txt-sm);font-weight:var(--peso-bold);letter-spacing:0;text-transform:none;
}

/* o imposto padrão, em Ajustes e conferência */
.imposto-cx{
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);flex-wrap:wrap;
  margin:4px 0 12px;padding:12px 14px;border:1px solid var(--linha);border-radius:var(--raio-md);background:var(--card-2);
}
.imposto-cx b{display:block;font-size:var(--txt-lg)}
.imposto-cx>div>span{display:block;font-size:var(--txt-md);color:var(--tinta-3);margin-top:1px}
.imposto-cx .btn b{display:inline;font-size:inherit;color:var(--indigo)}

/* Degraus: a coluna do botão que leva o produto ao simulador */
.dg-linha{grid-template-columns:minmax(200px,2fr) 104px 108px 104px 104px 104px 108px 86px}
.dg-simular{justify-self:end}

/* ---------- a lista de pedidos com cabeçalho ---------- */
.pd-cab{
  display:grid;grid-template-columns:52px 104px 1fr 78px 104px 104px 62px;gap:10px;
  padding:2px 15px 4px 17px;font-size:var(--txt-xs);font-weight:var(--peso-bold);
  letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);
}
.pd-cab-num{text-align:right}
@media (max-width:900px){
  .pd-cab{display:none}
  .pd-item summary>[data-rot]::before{
    content:attr(data-rot);display:block;font-size:var(--txt-2xs);font-weight:var(--peso-semi);
    color:var(--tinta-3);text-transform:uppercase;letter-spacing:.04em;
  }
}

/* ---------- boas-vindas legível ----------
   O título era tinta escura sobre o fundo escuro: a frase mais importante da primeira tela não
   se lia. Agora é branca, e os passos dizem o que a PESSOA faz, com o passo atual em destaque. */
.vazio{margin-top:6px}
.vazio-cx h2{color:#fff}
.vazio-sub{color:rgba(226,229,250,.84)}
ol.vazio-passos{list-style:none;margin:0 0 20px;padding:14px;gap:6px}
.vazio-passos .vp{padding:9px 10px;border-radius:var(--raio-md)}
.vazio-passos .vp.atual{background:#fffbe6;border:1px solid #f6e3a0}
.vazio-passos .vp.atual .vp-n{background:linear-gradient(140deg,#ffe97a,#f7c600);color:#3b2f00}
.vazio-passos .vp:not(.atual) .vp-n{background:#eef0f7;color:var(--tinta-2)}
.vazio-passos .vp i{display:block}
.vazio-alt{
  display:inline-block;margin-top:14px;background:none;border:0;padding:4px 6px;cursor:pointer;
  font-family:inherit;font-size:var(--txt-md);color:#c7d2fe;text-decoration:underline;text-underline-offset:3px;
}
.vazio-alt:hover{color:#fff}
.vazio-pe .vp-selo{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#d9dcf6}
.vazio-nota{color:#a9aed6}

/* ---------- celular: o menu vira a barra fixa embaixo ---------- */
@media (max-width:900px){
  :root{--topo-h:58px}
  body.com-atendimento{--faixa-h:68px}
  header.topo{padding:0 12px}
  header.topo .marca h1{font-size:var(--txt-base)}
  .casca{display:block;min-height:0}
  .casca-conteudo>.wrap{padding-top:14px}
  .lateral{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;z-index:70;
    flex-direction:row;gap:0;padding:5px 3px calc(5px + env(safe-area-inset-bottom));
    background:rgba(23,21,64,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-right:0;border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -12px 30px -16px rgba(9,7,40,.7);overflow:visible;
  }
  .lateral .abas-radar{flex-direction:row;gap:1px}
  .lateral .ar-aba{
    flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;
    padding:7px 1px 6px;border-radius:var(--raio-sm);font-size:var(--txt-xs);font-weight:600;text-align:center;
  }
  .lateral .ar-aba .ic{width:22px;height:22px}
  .lateral .ar-nome{flex:none;max-width:100%;font-size:var(--txt-2xs);letter-spacing:-.15px}
  .lateral .ar-nome.tem-curto{display:none}
  .lateral .ar-curto{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--txt-2xs);letter-spacing:-.45px}
  /* a lista de pedidos: a busca ganha a linha inteira, a ordem e o CSV vão para a de baixo */
  .pd-acoes{flex-wrap:wrap}
  .pd-acoes input{flex:1 1 100%}
  .lateral .ar-aba.ativa{box-shadow:none}
  .lateral .ar-aba.ativa::before{left:26%;right:26%;top:-5px;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px}
  .lateral .ar-conta{position:absolute;top:1px;left:calc(50% + 5px);min-width:17px;height:16px;padding:0 4px;font-size:var(--txt-2xs)}
  .lateral-recolher{display:none}
  /* o conteúdo não pode terminar escondido atrás da barra */
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  body.sem-dados{padding-bottom:0}
  .cena.encolhida{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:560px){
  /* no telefone o topo é só a marca, a pílula e a conta: o nome do app e o e-mail saem */
  header.topo .marca>div{display:none}
  header.topo .mb-txt,header.topo .mb-seta{display:none}
  header.topo .menu-botao{padding:5px}
  .pilula-vivo{height:32px;padding:0 11px;font-size:var(--txt-sm)}
}
@media print{
  .lateral,.pilula-vivo{display:none !important}
  header.topo{position:static}
}

/* ---------- acessibilidade: foco e alvo de toque ----------
   O anel de foco padrão é da cor da marca — some no topo escuro e no menu lateral. Lá ele é
   branco. E nada clicável fica com menos de 32px de altura (o dedo erra o alvo pequeno). */
.topo :focus-visible,.lateral :focus-visible{outline:2px solid #fff;outline-offset:2px}
/* ...menos dentro da caixa branca do menu da conta, que abre a partir do topo */
.topo .menu-cx :focus-visible{outline-color:var(--marca)}
/* o ⓘ continua com 15px de desenho, mas a área que aceita o toque/clique passa de 32px */
.info-dica::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.info-dica:focus{outline:none}
.info-dica:focus-visible{outline:2px solid var(--marca);outline-offset:2px;color:var(--marca)}
.al-feito{min-height:32px;padding:0 12px;font-size:var(--txt-sm)}
.btn-mini{min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.menu-link{min-height:32px}
.interruptor{min-height:32px;justify-content:center}

/* ---------- o "selecionado", de um jeito só ----------
   Mês, SKU/ID/Título, "Todos" os canais, faixa de margem e chip ligado: fundo da marca e
   texto branco. (O menu lateral tem o seu, porque vive no fundo escuro.) */
.mes[aria-pressed="true"],.bf-aba.ativa,.cb-chip.cb-todos.ativo,.vv-faixa.ativa,.chip[aria-pressed="true"]{
  background:var(--marca);border-color:var(--marca);color:#fff;
}

/* ---------- celular: a tabela larga vira cartões ----------
   O quadro de estoque tem 1040px (e Degraus, Reposição e Lucro, perto disso): no celular era
   rolar de lado e perder de vista de quem era cada número. Até 900px cada linha vira um
   cartão — o produto em cima, os números em duas colunas, cada um com o nome da coluna (o
   data-rot que o produtos.js copia do cabeçalho). */
@media (max-width:900px){
  .ge-tabela{overflow:visible}
  .ge-tabela .ge-cab{display:none}
  .ge-tabela .ge-linha{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;gap:8px 12px;padding:12px 6px}
  .ge-tabela .ge-linha>.ge-nome{grid-column:1/-1;position:static;background:none}
  .ge-tabela .ge-linha>[data-rot]::before{
    content:attr(data-rot);display:block;margin-bottom:1px;font-size:var(--txt-xs);font-weight:var(--peso-bold);
    color:var(--tinta-3);text-transform:uppercase;letter-spacing:.04em;
  }
  .ge-tabela .ge-linha>:empty{display:none}
}
@media (max-width:360px){
  .ge-tabela .ge-linha{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Fase 5: indicadores e gestão ===== */
/* o ▲/▼ contra o período anterior, logo abaixo do número do card */
.trilha-var{font-size:var(--txt-sm);color:var(--tinta-3);margin:1px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trilha-var b{font-weight:var(--peso-bold)}
.trilha-var span{font-weight:500}
.trilha-var.tv-bom b{color:var(--pos)}
.trilha-var.tv-ruim b{color:var(--neg)}
.trilha-var.tv-atencao b{color:var(--atencao-txt)}
.trilha-var.tv-neutro{color:var(--tinta-3)}
/* o subtítulo do rótulo ("após anúncios · margem de contribuição"): sem caixa alta, menor */
/* o ⓘ fica ao lado do nome e o subtítulo desce para a linha de baixo */
.trilha-rot:has(.rot-sub){display:flex;flex-wrap:wrap;align-items:center;column-gap:4px}
.trilha-rot .rot-sub{order:3;flex-basis:100%;display:block;text-transform:none;letter-spacing:0;font-weight:600;font-size:var(--txt-xs);color:var(--tinta-3);margin-top:1px}
.trilha-taxas{display:inline-block;margin-top:2px}
.trilha-taxas b{color:var(--tinta-2)}
.lucro-liq-obs.bom{color:var(--pos)}
.lucro-liq-obs.ruim{color:var(--neg)}
/* o pé do card Lucro: ponto de equilíbrio ou o convite para lançar as despesas */
.lucro-pe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border-radius:var(--raio-sm);
  background:var(--fundo-2);font-size:var(--txt-sm);color:var(--tinta-2);line-height:1.4}
.lucro-pe span{flex:1 1 180px}
.lucro-pe.ruim{color:var(--neg)}

/* a barra das metas do mês */
.metas-barra{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:12px 16px;margin:-4px 0 16px;box-shadow:var(--sombra)}
.metas-barra[hidden]{display:none}
.metas-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:8px}
.metas-cab b{font-size:var(--txt-lg)}
.metas-cab span{font-size:var(--txt-sm);color:var(--tinta-3);flex:1}
.metas-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 20px}
.meta-topo{display:flex;justify-content:space-between;gap:8px;font-size:var(--txt-md)}
.meta-topo span{color:var(--tinta-2)}
.meta-trilho{position:relative;height:10px;border-radius:var(--raio-pill);background:var(--fundo-2);margin:6px 0 4px;overflow:visible}
.meta-feito{position:absolute;left:0;top:0;bottom:0;border-radius:var(--raio-pill);background:var(--marca)}
.meta-feito.bom{background:var(--pos)}
.meta-proj{position:absolute;top:-3px;width:2px;height:16px;background:var(--tinta-2);border-radius:2px;transform:translateX(-1px)}
.meta-pe{font-size:var(--txt-sm);color:var(--tinta-3)}
.meta-pe.bom b{color:var(--pos)}
.meta-pe.ruim{color:var(--atencao-txt)}
.metas-vazio{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--txt-md);color:var(--tinta-3)}
.metas-vazio span{flex:1 1 240px}

/* curva ABC: o selo na linha do produto e os atalhos ao lado das faixas de margem */
.abc{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin-right:6px;border-radius:5px;
  font-size:var(--txt-xs);font-weight:var(--peso-bold);font-style:normal;vertical-align:1px;color:#fff}
.abc-A{background:var(--pos)}
.abc-B{background:var(--marca)}
.abc-C{background:var(--tinta-3)}
.vv-abc{display:inline-flex;align-items:center;gap:6px;padding-left:10px;margin-left:2px;border-left:1px solid var(--linha)}
.vv-abc-rot{font-size:var(--txt-sm);font-weight:var(--peso-bold);color:var(--tinta-3)}
.vv-abc-b{min-width:36px;padding:7px 10px}
.vv-abc-por{border:1px dashed var(--linha-forte, var(--linha));background:none;border-radius:var(--raio-pill);padding:6px 11px;font:inherit;
  font-size:var(--txt-sm);font-weight:600;color:var(--tinta-2);cursor:pointer;min-height:32px}
@media (max-width:560px){ .vv-abc{border-left:0;padding-left:0;margin-left:0} }

/* reposição: a coluna do prazo por produto e as linhas de cada variação */
.repo-prazo-p{width:64px;min-height:32px;padding:4px 6px;font:inherit;font-size:var(--txt-md);text-align:right;
  border:1px solid var(--linha);border-radius:var(--raio-sm);background:#fff}
.repo-prazo-p.proprio{border-color:var(--marca);font-weight:var(--peso-bold)}
.repo-var{background:var(--fundo-2);font-size:var(--txt-md)}
.repo-var .repo-var-nome{padding-left:22px;position:relative;color:var(--tinta-2);font-weight:600}
.repo-var .repo-var-nome::before{content:'↳';position:absolute;left:6px;color:var(--tinta-3)}
.repo-ajuste .btn[data-lista-compra]{margin-left:auto}
@media (max-width:640px){ .repo-ajuste .btn[data-lista-compra]{margin-left:0;width:100%;justify-content:center} }

/* diálogo das despesas fixas */
.desp-mes-cx{display:flex;align-items:center;gap:10px;font-weight:var(--peso-bold)}
.desp-mes-cx input{font:inherit;padding:7px 10px;border:1px solid var(--linha);border-radius:var(--raio-sm)}
.desp-aviso{margin:0;padding:9px 12px;border-radius:var(--raio-sm);background:var(--fundo-2);font-size:var(--txt-md);color:var(--tinta-2)}
.desp-aviso.ruim{background:#fdf0ee;color:var(--neg)}
.desp-aviso[hidden]{display:none}
.desp-linha{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.desp-desc{flex:1;min-width:0;font:inherit;padding:8px 10px;border:1px solid var(--linha);border-radius:var(--raio-sm)}
.desp-linha .pub-valor{flex:0 0 150px}
.desp-tirar{min-width:32px;font-size:var(--txt-lg);line-height:1}
.desp-mais{justify-self:start}
.ajustes-botoes{display:flex;gap:8px;flex-wrap:wrap}
.opcional{font-style:normal;font-weight:500;color:var(--tinta-3)}
@media (max-width:480px){ .desp-linha .pub-valor{flex-basis:118px} }

/* lista de pedidos: o produto na frente e o botão "Ver detalhes" (o mesmo da aba Produtos) */
.pd-cab,.pd-item summary{grid-template-columns:52px minmax(0,1fr) 104px 104px 62px 118px}
.pd-prodnome{min-width:0;display:flex;flex-direction:column;gap:2px}
.pd-prodnome b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-prodnome em{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-item[open] .pt-abrir .pt-ver{display:none}
.pd-item[open] .pt-abrir .pt-fechar{display:inline}
.pd-item[open] .pt-abrir::after{content:'▴'}
.pd-item summary:hover .pt-abrir{background:var(--marca);color:#fff;border-color:var(--marca)}
@media (max-width:900px){
  .pd-item summary{grid-template-columns:46px minmax(0,1fr) 84px auto}
  .pd-item summary .pd-bruto{display:none}
  .pd-item summary .pt-abrir .pt-ver,.pd-item[open] summary .pt-abrir .pt-fechar{display:none}
}
/* nome e "#pedido · canal · itens" na MESMA linha: a linha do pedido fica fina como as da tabela */
.pd-prodnome{flex-direction:row;align-items:baseline;gap:10px}
.pd-prodnome b{flex:0 1 auto;min-width:0}
.pd-prodnome em{flex:0 0 auto}
.pd-item summary{padding-top:9px;padding-bottom:9px}
@media (max-width:900px){ .pd-prodnome{flex-direction:column;gap:2px} }

/* ⚠️ "Vale olhar" entrava como UMA célula da grade de missões: uma coluna estreita com os
   cartões empilhados e o resto da linha em branco. Agora ocupa a largura toda, com os cartões
   lado a lado e mais compactos (são missões sem dinheiro medido: leitura rápida). */
#missoes>.mi-extra,#missoes>.al-pe,#missoes>.al-limpo{grid-column:1/-1}
.mi-extra{margin-top:var(--esp-4);padding-top:var(--esp-4);border-top:1px dashed var(--linha)}
.mi-extra-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mi-extra-cab span{display:inline;margin:0}
.mi-extra{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;align-items:start}
.mi-extra>.mi-extra-cab{grid-column:1/-1}
.mi-extra .mi-card{padding:11px 13px 11px 17px}
.mi-extra .mi-corpo p{margin-top:3px}
.mi-extra .mi-acoes{margin-top:8px}
/* cartão de missão mais baixo: botões lado a lado (não empilhados) e o texto ocupando a largura */
.mi-corpo{flex:1 1 auto}
.mi-acoes{display:flex !important;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.mi-acoes>*{margin:0 !important}
.mi-ganho{margin-top:8px}
/* 3 cartões por linha deixavam o texto numa coluna de ~200px (o valor à direita come o resto):
   botões empilhados e cartão alto. Com 2 por linha o texto respira e os botões ficam lado a lado. */
#missoes{grid-template-columns:repeat(auto-fill,minmax(440px,1fr))}
@media (max-width:560px){ #missoes{grid-template-columns:1fr} }
#missoes{align-items:start}

/* ===== avisos do Resultado: um painel, uma linha por aviso ===== */
.vg-avisos{display:block;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:6px 0;margin-bottom:18px;box-shadow:var(--sombra)}
.vg-av-cab{display:flex;align-items:center;gap:8px;padding:10px 18px 8px;font-size:var(--txt-lg)}
.vg-av-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--card-2);border:1px solid var(--linha);font-size:12px;font-weight:700;color:var(--tinta-2)}
.vg-av-graves{margin-left:auto;font-size:12px;font-weight:700;color:var(--neg)}
.vg-aviso,.vg-aviso.vg-tom-aviso,.vg-aviso.vg-tom-ruim,.vg-aviso.vg-tom-bom,.vg-aviso.vg-tom-info{
  display:flex;align-items:center;gap:14px;background:none;border:0;border-top:1px solid var(--linha);border-radius:0;
  padding:12px 18px;color:var(--tinta);font-size:var(--txt-md);line-height:1.45}
.vg-av-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:800 14px/1 Inter,system-ui,sans-serif;color:#fff;background:var(--tinta-3)}
.vg-tom-ruim .vg-av-ico{background:var(--neg)}
.vg-tom-aviso .vg-av-ico{background:#d97706}
.vg-tom-info .vg-av-ico{background:var(--marca)}
.vg-tom-bom .vg-av-ico{background:var(--pos)}
.vg-av-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vg-av-txt>b{font-weight:700;color:var(--tinta)}
.vg-av-txt>span{color:var(--tinta-3);font-size:var(--txt-sm)}
.vg-aviso .vg-acao{flex:none;white-space:nowrap;background:#fff}
.vg-av-mais>summary{cursor:pointer;list-style:none;padding:10px 18px;border-top:1px solid var(--linha);font-size:var(--txt-sm);font-weight:700;color:var(--marca)}
.vg-av-mais>summary::-webkit-details-marker{display:none}
.vg-av-mais>summary::after{content:' ▾'}
.vg-av-mais[open]>summary{display:none}
@media (max-width:640px){
  .vg-aviso,.vg-aviso.vg-tom-aviso,.vg-aviso.vg-tom-ruim,.vg-aviso.vg-tom-info{flex-wrap:wrap}
  .vg-aviso .vg-acao{margin-left:42px}
}
/* o logo do Mercado Livre na pílula: diz DE ONDE vem o "ao vivo" */
/* ⚠️ A PÍLULA NO PADRÃO DO MERCADO LIVRE: o amarelo oficial (#FFE600), o azul-marinho do texto
   (#2D3277) e o aperto de mãos — recortado do logo oficial, sem o "mercado livre" de baixo.
   O ponto verde (o verde do ML, #00A650) continua dizendo que está ao vivo. */
.pilula-vivo{background:#ffe600;border-color:#f2d600;color:#2d3277;font-weight:700;
  box-shadow:0 6px 16px -8px rgba(255,230,0,.6), inset 0 -2px 0 rgba(0,0,0,.06);padding-left:5px}
.pilula-vivo:hover{background:#fff159;border-color:#ffe600;color:#1f2463}
.pilula-vivo:focus-visible{outline-color:#fff}
.pilula-vivo .pv-ponto{background:#00a650;animation-name:pv-pulso-ml}
@keyframes pv-pulso-ml{0%{box-shadow:0 0 0 0 rgba(0,166,80,.55)}70%{box-shadow:0 0 0 6px rgba(0,166,80,0)}100%{box-shadow:0 0 0 0 rgba(0,166,80,0)}}
.pilula-vivo .pv-girar{color:#2d3277;opacity:.75}
.pilula-vivo.falhou{background:#fff4c2;border-color:#f59e0b;color:#7a4b00}
.pilula-vivo.falhou .pv-ponto{background:#f59e0b}
.pilula-vivo.reconectar{background:#dc2626;border-color:#fca5a5;color:#fff}
.pilula-vivo.reconectar:hover{background:#b91c1c}
.pilula-vivo.reconectar .pv-girar{color:#fff}
.pv-marca{flex:none;width:26px;height:26px;border-radius:50%;box-sizing:border-box;padding:5px 0;
  background:url(img/logo-mercado-livre.jpg) -22px -3.7px / 70px 46.7px no-repeat content-box content-box,#ffe600;
  box-shadow:0 0 0 1.5px #2d3277}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* a Shopee ao lado, no laranja dela: leva às planilhas */
.pilula-sh{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 5px;border-radius:var(--raio-pill);
  border:1px solid #ff7a59;background:#ee4d2d;color:#fff;cursor:pointer;font-family:inherit;font-size:var(--txt-md);
  font-weight:700;white-space:nowrap;box-shadow:0 6px 16px -8px rgba(238,77,45,.7), inset 0 -2px 0 rgba(0,0,0,.08)}
.pilula-sh:hover{background:#d73211}
.pilula-sh:focus-visible{outline:2px solid #fff;outline-offset:2px}
.psh-marca{flex:none;width:26px;height:26px;border-radius:50%;background:url(img/logo-shopee.jpg) -2.2px -7px / 78px 40.9px no-repeat,#ee4d2d;
  box-shadow:0 0 0 1.5px #fff}
/* planilha com mais de 7 dias (ou nenhuma): o ponto de aviso */
.pilula-sh.velha::after{content:'';width:8px;height:8px;border-radius:50%;background:#ffe14d;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
body.sem-dados .pilula-sh{display:none}
@media (max-width:760px){ .psh-txt{display:none} .pilula-sh{padding:0 4px;gap:4px} .pilula-sh.velha::after{margin-right:3px} }
@media print{ .pilula-sh{display:none !important} }

/* ================================================================ Resultado: hero + KPIs
   Dois formatos de card, e só dois (out/2026): o HERO do lucro (antes e após os anúncios) e o
   KPI (Faturamento, Recebido, Pedidos, Publicidade) — os quatro com a mesma altura, o mesmo
   número e a seta sempre no mesmo lugar. A conta de cada um abre no "Ver cálculo". */
#trilha{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.res-hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.res-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1000px){ .res-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .res-hero{grid-template-columns:1fr} .res-kpis{gap:10px} }

/* ---- o hero */
.hero-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:20px 22px 16px;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-xl);
  box-shadow:var(--sombra-1),var(--borda-luz);overflow:hidden}
.hero-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--cor);opacity:.85}
.hero-destaque{border-color:color-mix(in srgb,var(--cor) 30%,var(--linha));
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--cor) 9%,var(--card)) 0%,var(--card) 55%);
  box-shadow:0 14px 34px -22px color-mix(in srgb,var(--cor) 70%,transparent),var(--sombra-1),var(--borda-luz)}
.hero-cab{display:flex;align-items:center;gap:10px;min-width:0}
.hero-ico{flex:none;width:34px;height:34px;border-radius:var(--raio-sm);display:grid;place-items:center;
  background:color-mix(in srgb,var(--cor) 12%,transparent);color:var(--cor)}
.hero-rot{font-size:var(--txt-base);font-weight:var(--peso-bold);color:var(--tinta-2);letter-spacing:-.1px}
.hero-cab .info-dica{margin-left:0}
.hero-val{margin:14px 0 10px;font-size:40px;font-weight:var(--peso-max);letter-spacing:-1.4px;line-height:1.05;
  color:var(--cor);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:26px}
.hero-margem{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--raio-pill);
  background:var(--card-2);border:1px solid var(--linha);font-size:var(--txt-sm);font-weight:var(--peso-bold);color:var(--tinta-2)}
.hero-meta .trilha-var{margin:0;font-size:var(--txt-md)}
.hero-aviso{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.hero-aviso .selo-sem-publi{margin:0}
.hero-aviso .cst-no-card{margin:0}
.hero-vazio{font-size:var(--txt-md);color:var(--tinta-3)}
.hero-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--raio-pill);font-size:var(--txt-sm);font-weight:var(--peso-semi)}
.hero-chip.atencao{background:#fff8e6;border:1px solid #f6dc9b;color:var(--atencao-txt)}
.hero-rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px}
.hero-card .hero-aviso+.hero-rodape,.hero-card .hero-meta+.hero-rodape{margin-top:auto}
.hero-meta,.hero-aviso{margin-bottom:2px}
.hero-extra{min-width:0;font-size:var(--txt-md);color:var(--tinta-3)}
.hero-extra b{font-size:var(--txt-base);font-variant-numeric:tabular-nums}

/* ---- os KPIs: o mesmo formato nos quatro */
.kpi{display:flex;flex-direction:column;min-width:0;padding:14px 16px 12px;background:var(--card);
  border:1px solid var(--linha);border-radius:var(--raio-lg);box-shadow:var(--sombra-1),var(--borda-luz)}
.kpi-cab{display:flex;align-items:center;gap:8px;min-width:0;height:26px}
.kpi-ico{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--cor) 12%,transparent);color:var(--cor)}
.kpi-rot{min-width:0;font-size:var(--txt-xs);font-weight:var(--peso-bold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-cab .info-dica{margin-left:0;flex:none}
.kpi-val{margin-top:10px;font-size:24px;font-weight:var(--peso-max);letter-spacing:-.6px;line-height:1.15;color:var(--tinta);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-sec{margin-top:3px;font-size:var(--txt-sm);color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-sec b{color:var(--tinta-2)}
.kpi-pe{display:flex;align-items:center;gap:8px;min-height:30px;margin-top:auto;padding-top:10px;border-top:1px solid var(--linha);margin-top:12px}
.kpi-pe .trilha-var{flex:1;min-width:0;margin:0}

/* ---- "Ver cálculo": discreto, sempre no canto de baixo à direita */
.ver-calc{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--raio-pill);
  border:1px solid var(--linha);background:var(--card);font:inherit;font-size:var(--txt-sm);font-weight:var(--peso-semi);
  color:var(--tinta-2);cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.ver-calc::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.ver-calc:hover{color:var(--marca);border-color:color-mix(in srgb,var(--marca) 40%,var(--linha))}
.ver-calc[aria-expanded="true"]{color:var(--marca);border-color:color-mix(in srgb,var(--marca) 45%,var(--linha));
  background:color-mix(in srgb,var(--marca) 7%,var(--card))}
.ver-calc[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.ver-calc:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.kpi.calc-ativo,.hero-card.calc-ativo{border-color:color-mix(in srgb,var(--marca) 45%,var(--linha));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 12%,transparent),var(--sombra-1)}

/* ---- o painel da conta */
.calc-zona:not(:has(.calc-painel:not([hidden]))){display:none}
.calc-painel{background:var(--card);border:1px solid color-mix(in srgb,var(--marca) 22%,var(--linha));border-radius:var(--raio-lg);
  box-shadow:var(--sombra-2);padding:14px 20px 18px;animation:calc-abre .18s ease-out}
.calc-painel[hidden]{display:none}
@keyframes calc-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .calc-painel{animation:none} }
.calc-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--linha)}
.calc-cab b{font-size:var(--txt-lg);font-weight:var(--peso-bold);color:var(--tinta)}
.calc-cab b span{font-weight:var(--peso-md);color:var(--tinta-3)}
.calc-fechar{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--linha);background:var(--card-2);
  font:inherit;font-size:var(--txt-xl);line-height:1;color:var(--tinta-3);cursor:pointer}
.calc-fechar:hover{color:var(--tinta);border-color:var(--linha-forte)}
.calc-grade{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:16px 32px;align-items:start}
@media (max-width:820px){ .calc-grade{grid-template-columns:1fr} }
#trilha .calc-corpo{margin:0;padding:0;border:0;font-size:var(--txt-md);line-height:1.5;color:var(--tinta-2)}
#trilha .calc-corpo .taxa-lista{font-size:var(--txt-md);gap:6px}
#trilha .calc-corpo .taxa-linha.sub{font-size:var(--txt-sm)}
#trilha .calc-corpo .lucro-pe{display:block;margin-top:12px;padding:10px 12px;line-height:1.5}
#trilha .calc-corpo .ads-veredito{margin-top:12px;padding:8px 12px;font-size:var(--txt-md)}
.taxa-linha.principal{color:var(--tinta)}
.taxa-linha.principal b{font-size:var(--txt-base)}
.taxa-linha.ref{border-top:1px dashed var(--linha);padding-top:5px;margin-top:2px;color:var(--tinta-3)}
.calc-explica{margin:0;padding:12px 14px;border-radius:var(--raio-md);background:var(--card-2);border:1px solid var(--linha);
  font-size:var(--txt-sm);line-height:1.55;color:var(--tinta-3)}

/* ---- o interruptor do estorno: uma linha compacta, à vista, embaixo dos KPIs */
#trilha .res-estorno .estorno-cx{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0;padding:8px 14px;border-radius:var(--raio-md);background:var(--card)}
#trilha .res-estorno .estorno-cx.ligado{background:#f3fcf6}
#trilha .res-estorno .estorno-topo{flex:none;gap:10px;flex-direction:row-reverse}
#trilha .res-estorno .estorno-topo b{flex:none;font-size:var(--txt-md)}
#trilha .res-estorno .estorno-desc{flex:1 1 260px;margin:0}
#trilha .res-estorno .estorno-fatura{flex-basis:100%;margin-top:2px;padding-top:6px}
#trilha .res-estorno .int-trilho{transform:scale(.85)}

@media (max-width:640px){
  .hero-card{padding:16px 16px 14px;border-radius:var(--raio-lg)}
  .hero-val{font-size:34px;margin:10px 0 8px}
  .kpi{padding:12px 12px 10px}
  .kpi-val{font-size:20px;letter-spacing:-.4px}
  /* a linha secundária desce para duas linhas (todas do mesmo tamanho): o card é estreito */
  .kpi-sec{white-space:normal;line-height:1.4;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .kpi-pe .trilha-var span{display:none}      /* "vs. ago/2026": o período está no título da seta */
  .ver-calc{padding:4px 8px}
  .calc-painel{padding:12px 14px 14px}
}

/* ===== menu lateral completo: grupos, itens de ação e o Perfil ===== */
.lat-tit{padding:14px 12px 4px;font-size:var(--txt-2xs);font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:rgba(203,198,255,.5);white-space:nowrap}
.lat-tit-1{padding-top:0}
.lateral{gap:2px}
.lat-perfil:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lat-perfil{
  margin-top:auto;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border-radius:var(--raio-md);border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;font-family:inherit;text-align:left}
.lat-perfil:hover{background:rgba(255,255,255,.11)}
.lat-avatar{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#a78bfa,#6366f1);font-weight:800;font-size:var(--txt-md);color:#fff}
.lat-perfil-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.lat-perfil-txt b{font-size:var(--txt-md)}
.lat-perfil-txt i{font-style:normal;font-size:var(--txt-xs);color:rgba(226,229,250,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lateral .lateral-recolher{margin-top:8px}
/* no computador, o que já está no menu lateral sai do menu da conta */
@media (min-width:901px){ .menu-cx-conta .so-celular{display:none} }
@media (min-width:901px){
  .menu-recolhido .lateral .lat-tit{font-size:0;padding:10px 0 4px;margin:0 8px;border-top:1px solid rgba(255,255,255,.08)}
  .menu-recolhido .lateral .lat-tit-1{display:none}
  .menu-recolhido .lateral .lat-perfil{justify-content:center;padding:8px 0}
  .menu-recolhido .lateral .lat-perfil-txt{display:none}
}
/* no celular a barra de baixo é só das abas; o resto continua no menu da conta */
@media (max-width:900px){ .lat-tit,.abas-ferramentas,.lat-perfil{display:none !important} }

/* filtros por aba: a tabela FILTROS_DA_ABA (produtos-filtros.js) liga e desliga cada peça */
.barra-filtros .fora-da-aba{display:none !important}

/* ===== páginas de ferramentas (Planilhas e dados · Gestão · Relatórios) ===== */
.lateral .abas-ferramentas{margin-top:0}
.fe-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:stretch}
.fe-card{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio-lg);box-shadow:var(--sombra);transition:border-color .15s ease, box-shadow .15s ease}
.fe-card:hover{border-color:#c7d2fe;box-shadow:0 14px 30px -18px rgba(79,70,229,.45)}
.fe-destaque{border-color:#c7d2fe;background:linear-gradient(180deg,#f7f7ff 0%,var(--card) 70%)}
.fe-topo{display:flex;align-items:center;gap:12px}
.fe-topo h3{margin:0;font-size:var(--txt-lg);font-weight:800;color:var(--tinta);letter-spacing:-.2px}
.fe-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#eef0ff;color:var(--marca)}
.fe-ico .ic{width:22px;height:22px}
.fe-card p{margin:0;flex:1;color:var(--tinta-3);font-size:var(--txt-md);line-height:1.5}
.fe-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--linha)}
.fe-lojas{display:flex;gap:6px}
/* o símbolo de verdade da loja (recortado do logo oficial: o aperto de mãos do Mercado Livre,
   a sacola da Shopee) + o nome — num selo que se lê, em vez do logo inteiro miniaturizado */
.fe-lojas{flex-wrap:wrap}
.fe-loja{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px 0 3px;border-radius:999px;
  font-size:var(--txt-sm);font-weight:700;letter-spacing:-.1px;white-space:nowrap}
.fe-marca{flex:none;width:28px;height:28px;border-radius:50%;background-repeat:no-repeat}
.fe-ml{background:#fff9c4;color:#2d3277;border:1px solid #f5e04a}
/* o ML só com o aperto de mãos: a faixa de baixo do recorte (onde começa o "mercado") fica de fora */
.fe-ml .fe-marca{box-sizing:border-box;padding:5px 0;background:url(img/logo-mercado-livre.jpg) -23.8px -3.6px / 75.6px 50.4px no-repeat content-box content-box,#ffe600}
.fe-sh{background:#fff1ee;color:#d73211;border:1px solid #fbc4b8}
.fe-sh .fe-marca{background-color:#ee4d2d;background-image:url(img/logo-shopee.jpg);background-size:84px 44px;background-position:-2px -8px}
.fe-acao{white-space:nowrap}
@media (max-width:640px){ .fe-grade{grid-template-columns:1fr} }

/* no telefone a pílula do ML diz só "Ao vivo": com a Shopee ao lado, a hora empurrava o Perfil para fora da tela */
@media (max-width:560px){ .pv-quando{display:none} .pilula-vivo{gap:6px} }

/* ===== menu lateral sem rolagem: mais justo, cabe numa tela de notebook ===== */
:root{--lateral-l:244px}
@media (min-width:901px){
.lateral{padding:12px 12px 12px;scrollbar-width:none}
.lateral::-webkit-scrollbar{display:none}
.lateral .ar-aba{padding:8px 12px;font-size:var(--txt-md)}
.lat-tit{padding:10px 12px 3px}
.lat-tit-1{padding-top:2px}
.lat-perfil{padding:7px 10px}
.lat-avatar{width:30px;height:30px}
.lateral .lateral-recolher{margin-top:6px;padding:8px 12px}
}
@media (max-height:860px) and (min-width:901px){
  .lateral .ar-aba{padding:6px 12px}
  .lat-tit{padding:7px 12px 2px}
  .lat-perfil-txt i{display:none}
}
/* no celular a barra de baixo segue com as sete abas: o Lucro por canal se abre pelo Resultado */
@media (max-width:900px){ .lateral .ar-aba[data-aba="canais"],.lateral .ar-aba[data-aba="visitas"],.lateral .ar-aba[data-aba="receber"]{display:none} }

/* ===== Lucro por canal ===== */
.cn-veredito{margin:0 0 18px;padding:16px 20px;border-radius:var(--raio-lg);background:linear-gradient(135deg,#1e1b4b,#312e81);
  color:#e0e7ff;font-size:var(--txt-lg);line-height:1.5}
.cn-veredito b{color:#fff}
.cn-veredito span{display:block;margin-top:4px;font-size:var(--txt-md);color:#c7d2fe}
.cn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:18px}
.cn-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 20px 18px;background:var(--card);
  border:1px solid var(--linha);border-radius:var(--raio-lg);box-shadow:var(--sombra);overflow:hidden}
.cn-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--cor)}
.cn-card-ml{background:linear-gradient(180deg,#fffdf0 0%,var(--card) 45%)}
.cn-card-sh{background:linear-gradient(180deg,#fff6f3 0%,var(--card) 45%)}
.cn-topo{display:flex;align-items:center;gap:12px}
.cn-topo h3{margin:0;font-size:var(--txt-lg);font-weight:800;color:var(--tinta)}
.cn-topo span{font-size:var(--txt-sm);color:var(--tinta-3)}
.cn-selo{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;padding:0;border:0}
.cn-selo.fe-ml,.cn-selo.fe-sh{background:none;border:0}
.cn-selo .fe-marca{width:42px;height:42px}
.cn-selo.fe-ml .fe-marca{padding:8px 0;background:url(img/logo-mercado-livre.jpg) -38px -6px / 121px 80.7px no-repeat content-box content-box,#ffe600;box-shadow:0 0 0 2px #2d3277}
.cn-selo.fe-sh .fe-marca{background:url(img/logo-shopee.jpg) -3.6px -11.3px / 126px 66px no-repeat,#ee4d2d}
.cn-outro{background:var(--cor);color:#fff;font-weight:800;font-size:var(--txt-lg)}
.cn-rot{font-size:var(--txt-xs);font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--tinta-3);margin-bottom:-8px}
.cn-lucro{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.1;font-variant-numeric:tabular-nums}
.cn-lucro.pos,.cn-ads .pos,.cn-resumo-lucro.pos{color:var(--pos)}
.cn-lucro.neg,.cn-ads .neg,.cn-resumo-lucro.neg{color:var(--neg)}
.cn-pilulas{display:flex;flex-wrap:wrap;gap:6px}
.cn-margem,.cn-cada{padding:4px 10px;border-radius:999px;font-size:var(--txt-sm);font-weight:700;background:var(--card-2);border:1px solid var(--linha);color:var(--tinta-2)}
.cn-margem.bom{background:#e8f7ee;border-color:#b7e4c7;color:var(--pos)}
.cn-margem.atencao{background:#fff7e0;border-color:#f5d78a;color:#9a6b00}
.cn-margem.ruim{background:#fdecea;border-color:#f5c2bd;color:var(--neg)}
.cn-ads{font-size:var(--txt-sm);color:var(--tinta-2);padding:8px 12px;border-radius:var(--raio-md);background:#fffbe0;border:1px dashed #f2d600}
.cn-nums{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0;padding:12px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.cn-nums dt{font-size:var(--txt-xs);color:var(--tinta-3);font-weight:600}
.cn-nums dd{margin:2px 0 0;font-size:var(--txt-lg);font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.cn-nums small{font-size:var(--txt-xs);font-weight:500;color:var(--tinta-3)}
.cn-cem-tit{font-size:var(--txt-sm);font-weight:700;color:var(--tinta-2);margin-bottom:8px}
.cn-barra{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--card-2)}
.cn-barra i{display:block;height:100%}
.cn-legenda{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 14px;font-size:var(--txt-xs);color:var(--tinta-3)}
.cn-legenda li{display:flex;align-items:center;gap:6px}
.cn-legenda li b{margin-left:auto;color:var(--tinta);font-variant-numeric:tabular-nums}
.cn-legenda li>i{flex:none;width:9px;height:9px;border-radius:3px}
.cn-tar{background:#818cf8}.cn-fre{background:#38bdf8}.cn-dev{background:#f97316}.cn-pro{background:#94a3b8}
.cn-out{background:#e879f9}.cn-luc{background:#16a34a}.cn-pre{background:#dc2626}
.cn-falta{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 12px;border-radius:var(--raio-md);
  background:#fff7e0;border:1px solid #f5d78a;font-size:var(--txt-sm);color:#7a5600}
.cn-part{padding:18px 20px;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);margin-bottom:22px}
.cn-part h3{margin:0 0 12px;font-size:var(--txt-lg)}
.cn-part-linha{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;margin-bottom:8px}
.cn-part-rot{font-size:var(--txt-sm);font-weight:700;color:var(--tinta-2)}
.cn-part-barra{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--card-2)}
.cn-part-barra i{display:grid;place-items:center;font-style:normal;font-size:var(--txt-xs);font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cn-part-leg{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--txt-sm);color:var(--tinta-2)}
.cn-part-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
/* o resumo no Resultado */
.cn-resumo{padding:16px 18px;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);margin:4px 0 18px}
.cn-resumo-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.cn-resumo-cab h3{margin:0;font-size:var(--txt-lg)}
.cn-resumo-linha{display:grid;grid-template-columns:34px minmax(110px,1.2fr) 2fr 120px 120px 64px;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--linha)}
.cn-resumo-linha .cn-selo,.cn-resumo-linha .cn-selo .fe-marca{width:30px;height:30px}
.cn-resumo-linha .cn-selo.fe-ml .fe-marca{padding:5px 0;background-position:-27px -4.3px;background-size:86.5px 57.6px}
.cn-resumo-linha .cn-selo.fe-sh .fe-marca{background-position:-2.6px -8px;background-size:90px 47px}
.cn-resumo-barra{height:8px;border-radius:999px;background:var(--card-2);overflow:hidden}
.cn-resumo-barra i{display:block;height:100%}
.cn-resumo-fat,.cn-resumo-lucro,.cn-resumo-margem{text-align:right;font-variant-numeric:tabular-nums}
.cn-resumo-margem{color:var(--tinta-3);font-size:var(--txt-sm)}
@media (max-width:640px){
  .cn-cards{grid-template-columns:1fr}
  .cn-resumo-linha{grid-template-columns:30px 1fr auto;row-gap:4px}
  .cn-resumo-barra,.cn-resumo-fat{display:none}
  .cn-resumo-margem{grid-column:3}
  .cn-part-linha{grid-template-columns:1fr}
}

/* ===== Visitas e perguntas ===== */
.vi-cab{position:relative}
.vi-cab>.btn{position:absolute;right:0;top:4px}
.vi-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.vi-kpi{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--raio-lg);background:var(--card);border:1px solid var(--linha);box-shadow:var(--sombra);position:relative;overflow:hidden}
.vi-kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--marca)}
.vi-kpi.bom::before{background:var(--pos)}
.vi-kpi.ruim::before{background:var(--neg)}
.vi-kpi.ruim{background:linear-gradient(180deg,#fff5f4,var(--card) 70%)}
.vi-rot{font-size:var(--txt-xs);font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--tinta-3)}
.vi-val{font-size:30px;font-weight:800;letter-spacing:-.8px;color:var(--tinta);font-variant-numeric:tabular-nums;line-height:1.1}
.vi-nota{font-size:var(--txt-sm);color:var(--tinta-3)}
.vi-var{align-self:flex-start;padding:2px 8px;border-radius:999px;font-size:var(--txt-xs);font-weight:800}
.vi-var.sobe{background:#e8f7ee;color:var(--pos)}
.vi-var.desce{background:#fdecea;color:var(--neg)}
.vi-graf{padding:18px 20px 14px;border-radius:var(--raio-lg);background:var(--card);border:1px solid var(--linha);box-shadow:var(--sombra);margin-bottom:16px}
.vi-graf-cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:10px;font-size:var(--txt-sm);color:var(--tinta-2)}
.vi-graf-cab h3{margin:0 auto 0 0;font-size:var(--txt-lg)}
.vi-graf-cab i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.vi-l1{background:#e5e7f5}
.vi-l2{background:#c7f0d6}
.vi-graf.desce .vi-l2{background:#fbd5d0}
.vi-graf svg{display:block;width:100%;height:200px}
.vi-metade{fill:#eef0fa}
.vi-media{stroke:#94a3b8;stroke-width:1.5;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
.vi-area{fill:rgba(22,163,74,.13);stroke:none}
.vi-linha{fill:none;stroke:#16a34a;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.vi-graf.desce .vi-area{fill:rgba(220,38,38,.10)}
.vi-graf.desce .vi-linha{stroke:#dc2626}
.vi-pico{fill:#fff;stroke:#16a34a;stroke-width:2.5;vector-effect:non-scaling-stroke}
.vi-alvo{fill:transparent}
.vi-alvo:hover{fill:rgba(79,70,229,.08)}
.vi-eixo{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--txt-xs);color:var(--tinta-3);font-variant-numeric:tabular-nums}
.vi-graf-pe{margin:10px 0 0;font-size:var(--txt-sm);color:var(--tinta-3)}
.vi-duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;margin-bottom:16px}
.vi-bloco{padding:18px 20px;border-radius:var(--raio-lg);background:var(--card);border:1px solid var(--linha);box-shadow:var(--sombra);margin-bottom:16px}
.vi-duas .vi-bloco{margin-bottom:0}
.vi-bloco h3{margin:0 0 12px;font-size:var(--txt-lg);display:flex;align-items:center;gap:8px}
.vi-bloco h3 small{font-size:var(--txt-sm);font-weight:600;color:var(--tinta-3)}
.vi-perg-item{padding:10px 0;border-top:1px solid var(--linha)}
.vi-perg-item p{margin:0 0 3px;color:var(--tinta);font-size:var(--txt-md)}
.vi-perg-item span{font-size:var(--txt-xs);color:var(--tinta-3)}
.vi-dica{margin:10px 0 0;font-size:var(--txt-sm);color:var(--tinta-3)}
.vi-oport{margin:0 0 12px;padding:10px 14px;border-radius:var(--raio-md);background:#fff7e0;border:1px solid #f5d78a;color:#7a5600;font-size:var(--txt-sm)}
.vi-prod{display:grid;grid-template-columns:minmax(0,1fr) 90px 90px 90px 64px;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--linha);font-variant-numeric:tabular-nums}
.vi-prod>span:not(.vi-prod-nome),.vi-prod>b{text-align:right}
.vi-prod-cab{font-size:var(--txt-xs);font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--tinta-3);border-top:0}
.vi-prod-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.vi-prod .pos{color:var(--pos)}.vi-prod .neg{color:var(--neg)}
.vi-tag{margin-left:8px;padding:2px 7px;border-radius:999px;font-style:normal;font-size:var(--txt-2xs);font-weight:800}
.vi-tag.bom{background:#e8f7ee;color:var(--pos)}
.vi-tag.ruim{background:#fdecea;color:var(--neg)}
.vi-vazio{margin:0;color:var(--tinta-3)}
.vg-porta-visitas{display:none}
@media (max-width:1100px){ .vi-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  .vg-porta-visitas{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;margin:0 0 16px;
    border-radius:var(--raio-lg);background:var(--card);border:1px solid var(--linha)}
  .vg-porta-visitas span{display:flex;align-items:center;gap:8px}
}
@media (max-width:640px){
  .vi-kpis{grid-template-columns:1fr 1fr}
  .vi-cab>.btn{position:static;margin-top:10px}
  .vi-duas{grid-template-columns:1fr}
  .vi-prod{grid-template-columns:minmax(0,1fr) 64px 70px}
  .vi-prod>span:nth-child(3),.vi-prod>.btn,.vi-prod-cab>span:last-child{display:none}
}

/* ===== Lucro por canal: o seletor em relevo no topo ===== */
.cn-escolha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:4px 0 20px;perspective:900px}
.cn-opcao{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--tinta);
  background:linear-gradient(180deg,#ffffff 0%,#f3f4fb 100%);
  border:1px solid #dfe2f2;
  box-shadow:0 1px 0 #fff inset, 0 -3px 0 rgba(30,27,75,.06) inset, 0 10px 22px -14px rgba(30,27,75,.35), 0 2px 4px rgba(30,27,75,.06);
  transform:translateY(0);transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.cn-opcao:hover{transform:translateY(-3px) rotateX(3deg);box-shadow:0 1px 0 #fff inset, 0 -3px 0 rgba(30,27,75,.06) inset, 0 18px 30px -16px rgba(30,27,75,.45), 0 3px 6px rgba(30,27,75,.08)}
.cn-opcao:focus-visible{outline:3px solid #a5b4fc;outline-offset:3px}
.cn-opcao-ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#4f46e5;
  background:linear-gradient(145deg,#eef0ff,#dfe3ff);box-shadow:0 1px 0 #fff inset, 0 6px 12px -6px rgba(79,70,229,.5)}
.cn-opcao-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cn-opcao-txt b{font-size:var(--txt-lg);font-weight:800;letter-spacing:-.2px}
.cn-opcao-txt i{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3)}
.cn-opcao.ativa{color:#fff;border-color:#4338ca;
  background:linear-gradient(160deg,#6366f1 0%,#4338ca 55%,#312e81 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 -4px 0 rgba(0,0,0,.18) inset, 0 18px 34px -14px rgba(67,56,202,.75), 0 4px 10px rgba(49,46,129,.25);
  transform:translateY(-4px)}
.cn-opcao.ativa .cn-opcao-txt i{color:#c7d2fe}
.cn-opcao.ativa .cn-opcao-ico{color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.08));box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 14px -8px rgba(0,0,0,.5)}
.cn-opcao.ativa::after{content:'';position:absolute;left:50%;bottom:-9px;width:16px;height:16px;transform:translateX(-50%) rotate(45deg);
  background:#3730a3;border-radius:3px;z-index:-1}
.cn-mes{font-size:var(--txt-sm);text-transform:lowercase}
.cn-evo{display:grid;grid-template-columns:90px 1fr 210px;align-items:center;gap:12px;margin-bottom:8px}
.cn-evo-barras{display:flex;flex-direction:column;gap:3px}
.cn-evo-barras i{display:block;height:10px;border-radius:999px}
.cn-evo-fat{background:#c7d2fe}
.cn-evo-luc{background:#16a34a}
.cn-evo-luc.neg{background:#dc2626}
.cn-evo-val{display:flex;justify-content:flex-end;gap:12px;font-size:var(--txt-sm);color:var(--tinta-3);font-variant-numeric:tabular-nums}
.cn-evo-val .pos{color:var(--pos)}.cn-evo-val .neg{color:var(--neg)}
@media (prefers-reduced-motion:reduce){ .cn-opcao,.cn-opcao:hover,.cn-opcao.ativa{transform:none;transition:none} }
@media (max-width:760px){
  .cn-escolha{grid-template-columns:1fr;gap:10px}
  .cn-opcao.ativa::after{display:none}
  .cn-evo{grid-template-columns:70px 1fr}
  .cn-evo-val{grid-column:1 / -1;justify-content:flex-start}
}

/* Resultado sem os atalhos de Lucro por canal e Visitas: no computador o menu já leva lá.
   No celular (sem os itens no menu) ficam como atalhos compactos. */
@media (min-width:901px){ #lucro-canais-resumo,.vg-porta-visitas{display:none !important} }
@media (max-width:900px){
  .cn-resumo .cn-resumo-linha{display:none}
  .cn-resumo{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;margin:0 0 12px}
  .cn-resumo-cab{margin:0;width:100%}
}
/* o interruptor de publicidade na barra de filtros */
.bf-publi{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.bf-publi-chave{position:relative;flex:none;width:34px;height:20px;border-radius:999px;background:#cbd5e1;transition:background .15s}
.bf-publi-chave::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.bf-publi[aria-pressed="true"] .bf-publi-chave{background:var(--marca)}
.bf-publi[aria-pressed="true"] .bf-publi-chave::after{transform:translateX(14px)}
.bf-publi[aria-pressed="false"] .mb-txt b{color:var(--neg)}

/* ===== Gestão do Resultado ===== */
.ra-alertas,.ra-ponte,.ra-dia,.ra-pedido,.ra-proj,.ra-receber{padding:18px 20px;border-radius:var(--raio-lg);background:var(--card);border:1px solid var(--linha);box-shadow:var(--sombra);margin-bottom:16px}
.ra-alertas h3,.ra-ponte h3,.ra-dia h3,.ra-pedido h3,.ra-proj h3,.ra-receber h3{margin:0 0 10px;font-size:var(--txt-lg)}
.ra-alertas{border-color:#fbd5d0;background:linear-gradient(180deg,#fff7f6,var(--card) 60%)}
.ra-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.ra-item{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:var(--raio-md);background:var(--card);border:1px solid var(--linha);border-left:4px solid #d97706}
.ra-item.ra-ruim{border-left-color:var(--neg)}
.ra-item .btn{flex:none;align-self:center}
.ra-ico{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#d97706;color:#fff;font-weight:800}
.ra-ruim .ra-ico{background:var(--neg)}
.ra-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ra-txt b{font-size:var(--txt-md)}
.ra-txt span{font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.45}
.ra-ok{display:flex;align-items:center;gap:12px;border-color:#b7e4c7;background:linear-gradient(180deg,#f2fbf5,var(--card) 70%)}
.ra-ok .ra-ico{background:var(--pos)}
.ra-ok div{display:flex;flex-direction:column;gap:2px}
.ra-ok span{font-size:var(--txt-sm);color:var(--tinta-3)}
.ra-sub{margin:0 0 12px;color:var(--tinta-2)}
.ra-nota{margin:10px 0 0;font-size:var(--txt-xs);color:var(--tinta-3)}
.ra-vazio{margin:0;color:var(--tinta-3);font-size:var(--txt-sm)}
.ra-ponte .pos,.ra-proj .pos{color:var(--pos)} .ra-ponte .neg,.ra-proj .neg{color:var(--neg)}
.rp-linha{display:grid;grid-template-columns:minmax(150px,220px) 1fr 120px;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--linha);font-variant-numeric:tabular-nums}
.rp-linha>span{display:flex;flex-direction:column;font-size:var(--txt-sm);font-weight:600;color:var(--tinta-2)}
.rp-linha>span i{font-style:normal;font-weight:500;font-size:var(--txt-xs);color:var(--tinta-3)}
.rp-linha>b{text-align:right}
.rp-ponta{background:var(--card-2);border-radius:8px;padding:9px 8px;border-top:0;margin:4px 0}
.rp-barra{height:12px;border-radius:999px;background:transparent;overflow:hidden}
.rp-barra i{display:block;height:100%;border-radius:999px}
.rp-base{background:#6366f1}.rp-mais{background:#16a34a}.rp-menos{background:#dc2626}
.ra-dia-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-bottom:8px;font-size:var(--txt-sm);color:var(--tinta-2)}
.ra-dia-cab h3{margin:0 auto 0 0}
.ra-dia-cab i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.rd-fat{background:#c7d2fe}.rd-luc{background:#16a34a}.rd-med{background:#94a3b8}.rd-meta{background:#f59e0b}
.ra-dia svg{display:block;width:100%;height:180px}
.rd-barra{fill:#c7d2fe}.rd-barra:hover{fill:#818cf8}
.rd-media{stroke:#94a3b8;stroke-width:1.5;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
.rd-metal{stroke:#f59e0b;stroke-width:2;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.rd-lucro{fill:none;stroke:#16a34a;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rpp-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rpp-item{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--raio-md);background:var(--card-2);border:1px solid var(--linha)}
.rpp-item>span{font-size:var(--txt-xs);font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--tinta-3)}
.rpp-item>b{font-size:22px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.ra-duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;align-items:start}
.ra-duas>section{margin-bottom:16px}
.rpj-cab,.rr-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.rpj-cab h3,.rr-cab h3{margin:0}
.rpj-cab span{font-size:var(--txt-xs);color:var(--tinta-3)}
.rpj-grade,.rr-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rr-grade{grid-template-columns:1.3fr 1fr 1fr 1fr}
.rpj-grade>div,.rr-grade>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--raio-md);background:var(--card-2)}
.rpj-grade span,.rr-grade span{font-size:var(--txt-xs);font-weight:700;color:var(--tinta-3)}
.rpj-grade b,.rr-grade b{font-size:var(--txt-lg);font-weight:800;font-variant-numeric:tabular-nums}
.rpj-grade i,.rr-grade i{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.rpj-grade .pos,.rpj-grade .neg{font-size:var(--txt-xs);font-weight:800}
.rr-total{background:linear-gradient(160deg,#eef0ff,#e0e7ff) !important}
.rr-total b{color:#3730a3;font-size:22px}
.rr-datas{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rr-datas span{padding:4px 10px;border-radius:999px;background:var(--card-2);border:1px solid var(--linha);font-size:var(--txt-xs);font-weight:700;font-variant-numeric:tabular-nums}
.rr-datas i{font-style:normal;color:var(--tinta-3);margin-right:6px}
.hero-cobertura{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}
.hc-trilho{width:100%;height:8px;border-radius:999px;background:#fde7c7;overflow:hidden}
.hc-trilho i{display:block;height:100%;background:var(--pos)}
.hero-cobertura span{font-size:var(--txt-sm);color:#7a5600}
.destaque{outline:3px solid #a5b4fc;outline-offset:3px;transition:outline-color .4s}
@media (max-width:900px){
  .rpp-grade{grid-template-columns:1fr 1fr}
  .rr-grade{grid-template-columns:1fr 1fr}
  .ra-duas{grid-template-columns:1fr}
}
@media (max-width:560px){
  .rp-linha{grid-template-columns:1fr 100px}
  .rp-barra{display:none}
  .rpj-grade{grid-template-columns:1fr}
}

/* ===== A fazer: os filtros em relevo no topo ===== */
.mf-filtros{margin:0 0 18px}
.mf-temas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;perspective:900px}
.mf-tema{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;cursor:pointer;font-family:inherit;text-align:left;color:var(--tinta);
  background:linear-gradient(180deg,#ffffff 0%,#f3f4fb 100%);border:1px solid #dfe2f2;
  box-shadow:0 1px 0 #fff inset, 0 -3px 0 rgba(30,27,75,.06) inset, 0 10px 20px -14px rgba(30,27,75,.35);
  transition:transform .16s ease, box-shadow .16s ease}
.mf-tema:hover:not(:disabled){transform:translateY(-2px) rotateX(3deg)}
.mf-tema:focus-visible,.mf-pil:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px}
.mf-tema:disabled{opacity:.45;cursor:default}
.mf-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#4f46e5;background:linear-gradient(145deg,#eef0ff,#dfe3ff)}
.mf-txt{display:flex;flex-direction:column;min-width:0}
.mf-txt b{font-size:var(--txt-md);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-txt b em{font-style:normal;margin-left:4px;padding:1px 7px;border-radius:999px;background:#eef0ff;color:#4338ca;font-size:var(--txt-xs)}
.mf-txt i{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-tema.ativa{color:#fff;border-color:#4338ca;background:linear-gradient(160deg,#6366f1 0%,#4338ca 55%,#312e81 100%);transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 -4px 0 rgba(0,0,0,.18) inset, 0 16px 30px -14px rgba(67,56,202,.75)}
.mf-tema.ativa .mf-ico{color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.08))}
.mf-tema.ativa .mf-txt i{color:#c7d2fe}
.mf-tema.ativa .mf-txt b em{background:rgba(255,255,255,.2);color:#fff}
.mf-linha{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:12px}
.mf-grupo{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mf-grupo>span{font-size:var(--txt-xs);font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--tinta-3);margin-right:4px}
.mf-pil{padding:6px 12px;border-radius:999px;border:1px solid #dfe2f2;background:var(--card);cursor:pointer;font-family:inherit;font-size:var(--txt-sm);font-weight:700;color:var(--tinta-2)}
.mf-pil.ativa{background:#312e81;border-color:#312e81;color:#fff}
@media (max-width:640px){ .mf-temas{grid-template-columns:1fr 1fr} }
@media (prefers-reduced-motion:reduce){ .mf-tema,.mf-tema:hover,.mf-tema.ativa{transform:none;transition:none} }

/* ===== A liberar ===== */
.rl-escolha{grid-template-columns:repeat(2,minmax(0,1fr))}
.rl-escolha .cn-opcao{justify-content:space-between}
.rl-valor{font-size:24px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.rl-prazos{margin:0 0 16px}
.rl-barras{display:flex;align-items:flex-end;gap:10px;overflow-x:auto;padding:4px 2px 2px}
.rl-dia{flex:0 0 auto;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:4px}
.rl-dia b{font-size:var(--txt-xs);font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.rl-dia i{display:block;width:34px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#818cf8,#4338ca)}
.rl-dia span{font-size:var(--txt-xs);color:var(--tinta-3);font-weight:700}
.rl-linha{display:grid;grid-template-columns:120px minmax(0,1fr) 70px 150px 110px;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--linha);font-variant-numeric:tabular-nums}
.rl-linha>b:first-child{display:flex;flex-direction:column}
.rl-linha>b:first-child i{font-style:normal;font-weight:600;font-size:var(--txt-xs);color:var(--marca)}
.rl-cab{font-size:var(--txt-xs);font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--tinta-3);border-top:0}
.rl-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-nome i{font-style:normal;color:var(--tinta-3)}
.rl-linha a{color:var(--marca);font-size:var(--txt-sm)}
.rl-v,.rl-cab>span:last-child{text-align:right}
@media (max-width:640px){
  .rl-escolha{grid-template-columns:1fr}
  .rl-linha{grid-template-columns:90px minmax(0,1fr) 90px}
  .rl-linha>span:nth-child(3),.rl-linha>a{display:none}
}
/* com os grupos (Visão geral, Vendas, Produtos, Configurar), o menu tem 13 itens: em telas
   baixas de notebook ele fica mais justo para caber sem rolagem */
@media (max-height:860px) and (min-width:901px){
  .lateral .ar-aba{padding:5px 12px}
  .lat-tit{padding:6px 12px 1px}
  .lat-perfil{padding:5px 10px}
  .lateral .lateral-recolher{padding:6px 12px;margin-top:4px}
}

/* ===== A BOLINHA DE ESCOLHA em todo seletor (pedido do dono, 07/10) =====
   Cheia na opção escolhida, vazia nas outras: mostra de longe o que está marcado e que as
   outras se clicam. Vale para os seletores em relevo (Lucro por loja, Dinheiro a receber,
   A fazer) e para as pílulas (prazo, prioridade, ordem, Todos/Vendidos/Sem venda, faixas de
   margem, curva ABC, lojas, filtros de Vendidos, SKU/ID/Título). */
.cn-opcao::before,.mf-tema::before,.mf-pil::before,.vv-btn::before,.vv-faixa::before,
.cb-chip::before,.pd-filtro::before,.bf-aba::before{
  content:'';flex:none;display:inline-block;box-sizing:border-box;width:13px;height:13px;margin-right:7px;
  vertical-align:-2px;border-radius:50%;border:2px solid currentColor;opacity:.45;background:transparent;
  transition:opacity .15s, background .15s}
.cn-opcao::before,.mf-tema::before{width:20px;height:20px;margin-right:0;border-width:2px;opacity:.4}
.cn-opcao.ativa::before,.mf-tema.ativa::before,.mf-pil.ativa::before,.vv-btn.ativa::before,.vv-faixa.ativa::before,
.cb-chip.ativo::before,.pd-filtro.ativo::before,.bf-aba.ativa::before{
  opacity:1;background:radial-gradient(circle,currentColor 0 3px,transparent 3.6px)}
.cn-opcao.ativa::before,.mf-tema.ativa::before{background:radial-gradient(circle,currentColor 0 5px,transparent 5.6px);
  box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.cn-opcao:hover:not(.ativa)::before,.mf-tema:hover:not(.ativa)::before,.mf-pil:hover:not(.ativa)::before,
.vv-btn:hover:not(.ativa)::before,.vv-faixa:hover:not(.ativa)::before,.cb-chip:hover:not(.ativo)::before,
.pd-filtro:hover:not(.ativo):not(:disabled)::before,.bf-aba:hover:not(.ativa)::before{opacity:.8}
.mf-pil,.vv-faixa,.pd-filtro,.cb-chip,.vv-btn{display:inline-flex;align-items:center}
/* "Onde vende" com Todos marcado: as lojas estão incluídas, mas a ESCOLHA é "Todos" — só ele cheio */
#canais-barra:has(.cb-todos.ativo) .cb-chip:not(.cb-todos)::before{background:transparent;opacity:.45}

/* ===== Conferência ===== */
.cf-bloco{padding:16px 20px;border-radius:var(--raio-lg);background:var(--card);border:1px solid var(--linha);margin-bottom:16px}
.cf-bloco h3{margin:0 0 8px;font-size:var(--txt-lg)}
#palco-conferencia .ex-cx{margin-bottom:16px}

/* ===== DIFAL ===== */
.df-escolha{grid-template-columns:repeat(3,minmax(0,1fr))}
.df-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.df-config{padding:16px 20px;border-radius:var(--raio-lg);background:var(--card);border:1px solid var(--linha);margin-bottom:16px}
.df-config.destaque-suave{border-color:#c7d2fe;background:linear-gradient(180deg,#f5f6ff,var(--card) 70%);box-shadow:0 10px 26px -18px rgba(79,70,229,.6)}
.df-config h3{margin:0 0 10px;font-size:var(--txt-lg)}
.df-campos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end}
.df-campos label{display:flex;flex-direction:column;gap:4px;font-size:var(--txt-xs);font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tinta-3)}
.df-campos select{padding:9px 10px;border-radius:var(--raio-md);border:1px solid var(--linha);background:var(--card);font:inherit;font-size:var(--txt-md);text-transform:none;letter-spacing:0;font-weight:600;color:var(--tinta)}
.df-dica{margin:10px 0 0;font-size:var(--txt-sm);color:var(--tinta-3)}
.df-aviso{padding:12px 16px;border-radius:var(--raio-md);background:#fff7e0;border:1px solid #f5d78a;color:#7a5600}
.df-bloco{padding:18px 20px;border-radius:var(--raio-lg);background:var(--card);border:1px solid var(--linha);box-shadow:var(--sombra);margin-bottom:16px}
.df-bloco h3{margin:0 0 10px;font-size:var(--txt-lg)}
.df-bloco h3 small{font-size:var(--txt-sm);font-weight:500;color:var(--tinta-3);margin-left:6px}
.df-bloco h4{margin:16px 0 6px}
.df-bloco-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.df-linha{display:grid;grid-template-columns:70px 80px 80px 80px 80px 130px 120px minmax(80px,1fr);align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--linha);font-variant-numeric:tabular-nums}
.df-linha.df-ie{grid-template-columns:70px 90px 90px 120px minmax(0,1fr)}
.df-mes{display:grid;grid-template-columns:90px 150px 120px minmax(0,1fr) 140px;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--linha);font-variant-numeric:tabular-nums}
.df-cab{font-size:var(--txt-xs);font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--tinta-3);border-top:0}
.df-uf{display:inline-grid;place-items:center;width:40px;height:28px;border-radius:8px;background:#fff1d6;color:#8a5a00;font-weight:800}
.df-val{color:var(--neg)}
.df-barra{height:8px;border-radius:999px;background:var(--card-2);overflow:hidden}
.df-barra i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#dc2626)}
.df-top{display:flex;flex-wrap:wrap;gap:6px}
.df-top i{font-style:normal;font-size:var(--txt-xs);padding:2px 8px;border-radius:999px;background:var(--card-2);border:1px solid var(--linha)}
.df-passos ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--tinta-2);line-height:1.5}
.df-sug{font-size:var(--txt-sm);color:var(--tinta-3)}
.df-sug.forte{color:#9a6b00;font-weight:700}
@media (max-width:900px){
  .df-escolha,.df-kpis{grid-template-columns:1fr 1fr}
  .df-campos{grid-template-columns:1fr}
  .df-linha{grid-template-columns:56px 1fr 1fr 100px}
  .df-linha>span:nth-child(2),.df-linha>span:nth-child(3),.df-linha>span:nth-child(5),.df-linha>.df-barra{display:none}
  .df-mes{grid-template-columns:80px 1fr 110px}
  .df-mes>.df-top,.df-mes>.df-barra{display:none}
}

/* página sem filtro nenhum (FILTROS_DA_ABA vazio): nem a barra nem o "Onde vende" */
#conteudo.sem-filtros #filtros-cx,#conteudo.sem-filtros #canais-barra{display:none !important}
.df-meses{margin:0 0 14px}

/* alíquotas abertas na página do DIFAL */
.df-ali-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.df-ali{position:relative;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--raio-md);border:1px solid var(--linha);background:var(--card-2)}
.df-ali b{width:30px;font-weight:800;color:#8a5a00}
.df-ali input{flex:1;min-width:0;padding:6px 8px;border-radius:8px;border:1px solid var(--linha);background:var(--card);font:inherit;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.df-ali input.erro{border-color:var(--neg);background:#fdecea}
.df-ali span{color:var(--tinta-3);font-size:var(--txt-sm)}
.df-ali.mudou{border-color:#f5d78a;background:#fff8e6}
.df-ali i{position:absolute;top:-8px;right:8px;font-style:normal;font-size:var(--txt-2xs);font-weight:800;padding:1px 6px;border-radius:999px;background:#f59e0b;color:#fff}
.df-campos a.btn{text-decoration:none;text-align:center}

/* ===== DIFAL no lucro ===== */
.df-lucro{padding:16px 20px;border-radius:var(--raio-lg);margin-bottom:16px;border:2px solid #f5d78a;background:linear-gradient(180deg,#fff8e6,var(--card) 80%)}
.df-lucro.ligado{border-color:#b7e4c7;background:linear-gradient(180deg,#effaf3,var(--card) 80%)}
.df-lucro-cab{display:flex;align-items:center;justify-content:space-between;gap:16px}
.df-lucro h3{margin:0 0 4px;font-size:var(--txt-lg)}
.df-lucro p{margin:0;color:var(--tinta-2)}
.df-chave{flex:none;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid var(--linha);background:var(--card);cursor:pointer;font:inherit;font-weight:800;box-shadow:var(--sombra)}
.df-chave-trilho{position:relative;width:44px;height:24px;border-radius:999px;background:#cbd5e1;transition:background .15s}
.df-chave-trilho i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.df-chave[aria-checked="true"] .df-chave-trilho{background:var(--pos)}
.df-chave[aria-checked="true"] .df-chave-trilho i{transform:translateX(20px)}
.df-chave:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px}
.df-onde{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:var(--txt-sm);color:var(--tinta-3)}
.df-onde .mf-pil::before{display:none}
.df-formula{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--tinta-2);line-height:1.5}
.df-exemplo{margin-top:14px;padding:12px 14px;border-radius:var(--raio-md);background:var(--card-2);border:1px solid var(--linha)}
.df-passos-conta{margin-top:8px;display:flex;flex-direction:column}
.df-passos-conta>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px dashed var(--linha);font-variant-numeric:tabular-nums}
.df-passos-conta>div.total{border-top:1px solid var(--tinta-3);font-weight:800}
.df-passos-conta>div.total b{color:var(--neg)}
@media (max-width:760px){ .df-lucro-cab{flex-direction:column;align-items:flex-start} }

.df-campos.df-campos-5{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
.df-campos select:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:900px){ .df-campos.df-campos-5{grid-template-columns:1fr} }
.df-lucro.travado{border-color:var(--linha);background:var(--card-2)}
.df-lucro.travado .df-chave{opacity:.55;cursor:not-allowed}

.pilula-sh.lendo .psh-marca{animation:pv-gira .9s linear infinite}

/* ⚠️ JANELA CORTADA À DIREITA (planilha de custos, 07/10). O corpo das janelas é uma grade, e a
   coluna da grade crescia até o texto mais longo de dentro — nomes de produto que não quebram
   linha — empurrando campos, números e valores para fora da janela. A coluna agora cabe na
   janela (minmax(0,1fr)) e o que é longo corta com "…". Vale para TODAS as janelas. */
.dlg-corpo{grid-template-columns:minmax(0,1fr)}
.dlg-corpo>*{min-width:0}
.cst-resumo{grid-template-columns:repeat(3,minmax(0,1fr))}
.cst-n span{overflow-wrap:anywhere}
.cst-tabela{min-width:0;overflow:hidden}
.cst-linha b{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog{max-width:min(var(--dlg-max,560px),calc(100vw - 32px))}
#dlg-custos{--dlg-max:640px}
@media (max-width:560px){ .cst-resumo{grid-template-columns:1fr} }
/* janela mais alta que a tela (celular): rola por dentro, e os botões do pé continuam alcançáveis */
dialog{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}

/* custo: corrige × mudou a partir de */
.c-quando-linha{align-items:flex-start}
.c-quando{display:flex;flex-direction:column;gap:8px;min-width:0}
.c-q{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--raio-md);border:1px solid var(--linha);cursor:pointer;flex-wrap:wrap}
.c-q:has(input[type=radio]:checked){border-color:var(--marca);background:#f5f6ff}
.c-q input[type=radio]{margin-top:3px;accent-color:var(--marca)}
.c-q>span{display:flex;flex-direction:column;flex:1;min-width:180px}
.c-q>span b{font-size:var(--txt-md)}
.c-q>span i{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.c-q input[type=date]{margin-left:26px;padding:6px 8px;border-radius:8px;border:1px solid var(--linha);font:inherit}
/* a escolha corrige × mudou ocupa a largura da janela (lado a lado; no celular, um embaixo do outro) */
.dlg-linha.c-quando-linha{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.c-quando{flex-direction:row}
.c-quando .c-q{flex:1 1 0}
.c-q input[type=date]{margin-left:26px;width:calc(100% - 26px)}
@media (max-width:560px){ .c-quando{flex-direction:column} }
.c-q{flex-direction:row;align-items:flex-start;justify-content:flex-start}
.c-q>span{flex:1 1 0;min-width:0}

/* ===== a busca de produto: aberta, larga, na primeira linha da barra (08/10) =====
   Era uma caixa estreita no meio dos filtros ("Pesq…") que procurava só por SKU. */
.barra-filtros .bf-busca{order:-1;flex:1 1 100%}
.bf-busca-cx{min-height:52px;border-width:2px}
.bf-busca-cx input{font-size:var(--txt-lg);padding:12px 14px}
.bf-busca-cx input::placeholder{color:var(--tinta-3)}
@media (max-width:640px){ .bf-abas .bf-aba{padding-left:8px;padding-right:8px} }
/* um "limpar" só: o × nativo do campo de busca some, fica o nosso */
#f-busca::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
/* o lucro grande do produto não pode sair do quadro */
.prod-nums .pn-destaque b{font-size:clamp(18px,1.6vw,26px);overflow-wrap:anywhere}

/* ===== Análise de preço (analise-preco.js, 08/10) =====
   Um cartão por anúncio ativo: o seu preço, o do mais barato do MESMO produto, o custo, o empate,
   o preço da sua margem e o lucro em cada um — e, embaixo, a frase do que fazer. A cor da borda
   é a situação: verde dá para ganhar, âmbar margem apertada, vermelho abaixo do seu empate. */
.ap-config{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin:0 0 14px}
.ap-config>*{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);box-shadow:var(--sombra)}
.ap-config span>b{display:block;font-size:var(--txt-lg)}
.ap-config span>i{display:block;font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3)}
.ap-margem-padrao{cursor:text}
.ap-campo{display:inline-flex;align-items:center;gap:4px;flex:none}
.ap-campo input{width:64px;padding:8px 10px;border:2px solid var(--linha-forte);border-radius:var(--raio-sm);font:inherit;
  font-size:var(--txt-xl);font-weight:800;text-align:right;font-variant-numeric:tabular-nums;color:var(--tinta);background:#fff}
.ap-campo input:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(79,70,229,.18)}
.ap-campo input.erro{border-color:var(--neg)}
.ap-campo em{font-style:normal;font-weight:800;color:var(--tinta-2)}
.ap-leitura{flex-wrap:wrap}
.ap-barra{flex:1 1 160px;height:10px;border-radius:999px;background:var(--fundo-2);overflow:hidden}
.ap-barra i{display:block;height:100%;width:var(--feito,0%);background:linear-gradient(90deg,var(--seq-500),var(--marca-escuro));transition:width .3s}
#ap-progresso-txt{font-size:var(--txt-md);color:var(--tinta-2);font-weight:700}
.ap-aviso{margin:0 0 12px;padding:10px 14px;border-radius:var(--raio-md);background:#fff8e6;border:1px solid #f3dc9b;color:#6b4a00;font-size:var(--txt-md)}
.ap-aviso.ruim{background:#fdecea;border-color:#f3b8b2;color:var(--neg)}

.ap-escolha{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin:4px 0 14px;perspective:900px}
.ap-opcao{padding:14px 14px;gap:10px}
.ap-opcao .cn-opcao-txt{flex:1}
.ap-opcao .cn-opcao-txt b{font-size:var(--txt-md)}
.ap-opcao .cn-opcao-txt i{font-size:var(--txt-xs)}
.ap-conta{flex:none;font-size:var(--txt-4xl);font-weight:800;letter-spacing:-.8px;font-variant-numeric:tabular-nums;line-height:1}
.ap-opcao.sit-ganha .ap-conta{color:var(--pos)}
.ap-opcao.sit-aperto .ap-conta{color:var(--atencao-txt)}
.ap-opcao.sit-perde .ap-conta{color:var(--neg)}
.ap-opcao.ativa .ap-conta{color:#fff}
.ap-ordem{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.ap-ordem>span{font-size:var(--txt-sm);font-weight:700;color:var(--tinta-3)}
.ap-ordem .btn{margin-left:auto}

.ap-lista{display:flex;flex-direction:column;gap:12px}
.ap-item{--sit:var(--linha-forte);background:var(--card);border:1px solid var(--linha);border-left:5px solid var(--sit);
  border-radius:var(--raio-lg);box-shadow:var(--sombra);padding:14px 16px;min-width:0}
.ap-item.sit-ganha{--sit:var(--pos)}
.ap-item.sit-aperto{--sit:var(--atencao)}
.ap-item.sit-perde{--sit:var(--neg)}
.ap-item.sit-sozinho{--sit:var(--seq-300)}
.ap-cab{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center}
.ap-cab img,.ap-foto-vazia{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--fundo-2);border:1px solid var(--linha)}
.ap-nome{display:flex;flex-direction:column;gap:3px;min-width:0}
.ap-nome>a,.ap-nome>b{font-weight:800;font-size:var(--txt-lg);color:var(--tinta);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-nome>a:hover{text-decoration:underline}
.ap-meta{font-size:var(--txt-sm);color:var(--tinta-3)}
.ap-tag{font-style:normal;font-size:var(--txt-xs);font-weight:700;padding:2px 8px;border-radius:999px;align-self:flex-start;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-tag.atencao{background:#fff4d6;color:#7a5200;border:1px solid #f3dc9b}
.ap-selo{flex:none;font-size:var(--txt-sm);font-weight:800;padding:6px 12px;border-radius:999px;background:var(--fundo-2);color:var(--tinta-2);white-space:nowrap}
.ap-selo.sit-ganha{background:#e3f6e9;color:var(--pos)}
.ap-selo.sit-aperto{background:#fff4d6;color:var(--atencao-txt)}
.ap-selo.sit-perde{background:#fdecea;color:var(--neg)}
.ap-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:12px 0;background:var(--linha);
  border:1px solid var(--linha);border-radius:var(--raio-md);overflow:hidden}
.ap-cel{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:#fff;min-width:0}
.ap-cel>span{font-size:var(--txt-xs);font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tinta-3)}
.ap-cel>b{font-size:var(--txt-xl);font-weight:800;font-variant-numeric:tabular-nums;color:var(--tinta)}
.ap-cel>i{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3);overflow-wrap:anywhere}
.ap-cel a{color:var(--marca);font-weight:700}
.ap-cel.ruim>b{color:var(--neg)}
.ap-cel.ap-alvo{background:#f5f6ff}
.ap-cel.ap-alvo>b{color:var(--marca-escuro)}
.ap-pe{display:flex;align-items:center;gap:16px;justify-content:space-between}
.ap-frase{margin:0;flex:1;font-size:var(--txt-base);line-height:1.5;color:var(--tinta-2)}
.ap-frase b{color:var(--tinta)}
.ap-frase .btn{margin-left:6px}
.ap-margem{flex:none;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;font-size:var(--txt-sm);font-weight:700;color:var(--tinta-2)}
.ap-margem>i{grid-column:1/-1;font-style:normal;font-weight:500;font-size:var(--txt-xs);color:var(--tinta-3);text-align:right}
.ap-margem .ap-campo input{width:56px;font-size:var(--txt-lg);padding:6px 8px}
.ap-nota{margin:16px 2px 0;font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.55}
@media (max-width:900px){
  .ap-config{grid-template-columns:1fr}
  .ap-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-pe{flex-direction:column;align-items:stretch}
  .ap-margem{justify-content:start}
  .ap-margem>i{text-align:left}
}
@media (max-width:560px){
  .ap-cab{grid-template-columns:40px minmax(0,1fr)}
  .ap-cab img,.ap-foto-vazia{width:40px;height:40px}
  .ap-selo{grid-column:1/-1;justify-self:start}
  .ap-nome>a,.ap-nome>b{white-space:normal}
  .ap-config>*{flex-direction:column;align-items:stretch}
  .ap-ordem .btn{margin-left:0}
}
/* a Análise de preço é só do Mercado Livre: a faixa "Onde vende" (ML/Shopee) não vale ali */
#conteudo[data-aba="analise"] #canais-barra{display:none !important}
/* no celular, as seis situações em duas colunas (uma por linha empurrava a lista para longe) */
@media (max-width:560px){
  .ap-escolha{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ap-opcao{padding:10px;gap:6px}
  .ap-opcao::before{width:14px;height:14px}
  .ap-opcao.ativa::before{background:radial-gradient(circle,currentColor 0 3px,transparent 3.6px)}
  .ap-opcao .cn-opcao-txt i{display:none}
  .ap-conta{font-size:var(--txt-2xl)}
}

/* ===== Análise de preço: "Como ler esta página" e Resolvido (08/10) ===== */
.ap-como-tit{margin:12px 0 6px;font-size:var(--txt-xs);font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tinta-3)}
.ap-como-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.ap-como-grade>div{display:flex;flex-direction:column;gap:1px;padding:6px 0;border-top:1px dashed var(--linha);font-size:var(--txt-md)}
.ap-como-grade>div>b{color:var(--tinta);display:flex;align-items:center;gap:6px}
.ap-como-grade>div>span{color:var(--tinta-2);line-height:1.45}
.ap-ponto{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--linha-forte)}
.ap-como-sits .sit-ganha .ap-ponto{background:var(--pos)}
.ap-como-sits .sit-aperto .ap-ponto{background:var(--atencao)}
.ap-como-sits .sit-perde .ap-ponto{background:var(--neg)}
.ap-como-sits .sit-sozinho .ap-ponto{background:var(--seq-300)}
.ap-como-pe{margin:10px 0 0;font-size:var(--txt-sm);color:var(--tinta-3)}
.ap-pil-n{margin-left:4px;font-variant-numeric:tabular-nums}
.ap-cel[title]{cursor:help}
.ap-acoes{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ap-resolver{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--linha-forte);
  background:#fff;font:inherit;font-size:var(--txt-sm);font-weight:700;color:var(--tinta-2);cursor:pointer}
.ap-resolver:hover{border-color:var(--pos);color:var(--pos)}
.ap-tique{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;border:2px solid currentColor;font-style:normal}
.ap-resolver.feito{background:#e3f6e9;border-color:var(--pos);color:var(--pos)}
.ap-resolver.feito .ap-tique{background:var(--pos);border-color:var(--pos)}
.ap-resolver.feito .ap-tique::after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.ap-item.resolvido{background:#fbfdfb}
.ap-item.resolvido .ap-nums{opacity:.75}
@media (max-width:900px){ .ap-acoes{align-items:stretch} .ap-resolver{justify-content:center} }
@media (max-width:560px){ .ap-como-grade{grid-template-columns:1fr} }

/* Resultado (08/10, pedido do dono): "Lucro antes dos anúncios" primeiro e na largura toda;
   "Lucro após anúncios" na linha de baixo — um card por linha, nunca lado a lado */
.res-hero{grid-template-columns:minmax(0,1fr)}

/* planilha de custos: os custos que parecem preço de venda (08/10) */
.cst-suspeitos{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:12px 14px;border-radius:var(--raio-md);
  background:#fff8e6;border:1px solid #f3dc9b}
.cst-suspeitos>b{color:#6b4a00}
.cst-suspeitos>span{font-size:var(--txt-sm);color:#6b4a00}
.cst-suspeitos .cst-linha span{white-space:normal}
.cst-pular{display:flex;align-items:flex-start;gap:8px;font-weight:700;font-size:var(--txt-md);color:var(--tinta);cursor:pointer}
.cst-pular input{margin-top:3px;accent-color:var(--marca)}

/* ===== Reposição por fornecedor e o pedido em PDF (08/10) ===== */
.repo-forn-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:12px 14px;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);box-shadow:var(--sombra)}
.repo-forn-barra:empty{display:none}
.repo-forn-rot{font-size:var(--txt-sm);font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--tinta-3);margin-right:4px}
.repo-pil-comprar{font-style:normal;margin-left:6px;padding:1px 7px;border-radius:999px;background:#fdecea;color:var(--neg);font-size:var(--txt-xs);font-weight:800}
.mf-pil.ativa .repo-pil-comprar{background:rgba(255,255,255,.2);color:#fff}
.repo-pil-sem{border-style:dashed}
.repo-forn-dica{flex:1 1 100%;font-size:var(--txt-sm);color:var(--tinta-3)}
.repo-forn-dica.ruim{color:var(--neg)}
.repo-linha .ge-nome{flex-wrap:wrap;row-gap:4px}
.repo-forn{flex:1 1 100%;margin-left:43px;max-width:240px;padding:3px 8px;border:1px dashed var(--linha-forte);border-radius:8px;
  font:inherit;font-size:var(--txt-xs);font-weight:600;color:var(--tinta-2);background:transparent}
.repo-forn.tem{border-style:solid;background:#f5f6ff;color:var(--marca-escuro)}
.repo-forn:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(79,70,229,.15);background:#fff}
.repo-forn:disabled{opacity:.7;cursor:not-allowed}

.ped-cx{margin:0 0 16px;padding:16px;border-radius:var(--raio-lg);background:var(--card);border:1px solid var(--linha);
  border-top:4px solid var(--marca);box-shadow:var(--sombra)}
.ped-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ped-cab>div{display:flex;flex-direction:column;gap:2px}
.ped-cab>div>b{font-size:var(--txt-xl);font-weight:800}
.ped-cab>div>span{font-size:var(--txt-md);color:var(--tinta-2)}
.ped-explica{margin:8px 0 12px;font-size:var(--txt-sm);color:var(--tinta-3)}
.ped-tabela{border:1px solid var(--linha);border-radius:var(--raio-md);overflow:hidden}
.ped-linha{display:grid;grid-template-columns:minmax(0,2.4fr) 110px 76px 84px 92px 96px 104px;gap:8px;align-items:center;
  padding:8px 12px;border-top:1px solid var(--linha);font-size:var(--txt-md);font-variant-numeric:tabular-nums}
.ped-linha:first-child{border-top:0}
.ped-tit{background:var(--fundo-2);font-size:var(--txt-xs);font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--tinta-3)}
.ped-linha.fora{background:#fafbfd;color:var(--tinta-3)}
.ped-prod{display:flex;flex-direction:column;min-width:0}
.ped-prod b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ped-prod i{font-style:normal;font-size:var(--txt-xs);color:var(--marca-escuro);font-weight:700}
.ped-sku{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--txt-sm);color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis}
.ped-folga{font-style:normal;font-size:var(--txt-xs);color:var(--pos);font-weight:700}
.ped-qtd{width:76px;padding:6px 8px;border:2px solid var(--linha-forte);border-radius:var(--raio-sm);font:inherit;font-weight:800;text-align:right}
.ped-qtd:focus{outline:none;border-color:var(--marca)}
.ped-obs{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-size:var(--txt-sm);font-weight:700;color:var(--tinta-2)}
.ped-obs i{font-style:normal;font-weight:500;color:var(--tinta-3)}
.ped-obs textarea{font:inherit;font-size:var(--txt-md);padding:8px 10px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);resize:vertical}
.ped-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.ped-ok{font-size:var(--txt-sm);font-weight:800;color:var(--pos)}
/* a linha do produto na Reposição: foto e nome lado a lado; SKU e fornecedor embaixo do nome */
.repo-linha .ge-nome>a,.repo-linha .ge-nome>span:not(.ge-sku){flex:1 1 calc(100% - 43px);min-width:0}
.repo-linha .ge-nome>.ge-sku{margin-left:43px}
@media (max-width:760px){
  /* no celular: o produto na linha toda; embaixo, sugerido · quantidade · subtotal */
  .ped-tit{display:none}
  .ped-linha{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:6px}
  .ped-linha>.ped-prod{grid-column:1/-1}
  .ped-prod b{white-space:normal}
  .ped-linha>span:nth-child(2),.ped-linha>span:nth-child(3),.ped-linha>span:nth-child(6){display:none}
  .ped-linha>span:nth-child(4)::before{content:'sugerido ';color:var(--tinta-3);font-size:var(--txt-xs)}
  .ped-linha>span:nth-child(7){text-align:right}
  .repo-forn{margin-left:0;max-width:none}
}

/* a legenda da Análise de preço numa janela (o bloco aberto ocupava a tela toda) */
#dlg-ap-como{--dlg-max:820px}
#dlg-ap-como .ap-como{display:block;padding:4px 22px 18px}
#dlg-ap-como .ap-como-tit:first-child{margin-top:4px}
.ap-como-btn{margin-top:10px}
.ap-como-btn span{color:var(--marca);font-weight:800}

/* Resultado (08/10, pedido do dono): Lucro antes do Ads − Publicidade (Ads) = Lucro após o Ads,
   numa linha só; os sinais da conta entre os cards. No celular, um embaixo do outro. */
.res-hero.com-ads{grid-template-columns:minmax(0,1.25fr) auto minmax(0,1fr) auto minmax(0,1.25fr);align-items:stretch;gap:10px}
.res-hero.com-ads>.kpi,.res-hero.com-ads>[data-card="publi"]{height:100%}
.res-op{align-self:center;font-size:30px;font-weight:800;color:var(--tinta-3);line-height:1}
.res-kpis.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){
  .res-hero.com-ads{grid-template-columns:minmax(0,1fr)}
  .res-op{justify-self:center;font-size:22px;margin:-4px 0}
}
@media (max-width:640px){ .res-kpis.tres{grid-template-columns:minmax(0,1fr)} }

/* ===== Simulador de compra (compra.js, 08/10) ===== */
#conteudo[data-aba="compra"] #canais-barra{display:none !important}
.cp-form{display:flex;flex-direction:column;gap:12px;padding:16px;margin:0 0 16px;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio-lg);box-shadow:var(--sombra)}
.cp-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cp-campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.cp-campo.cp-largo{grid-column:1/-1}
.cp-campo>span{font-size:var(--txt-xs);font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--tinta-3)}
.cp-campo input,.cp-campo select{padding:9px 11px;border:2px solid var(--linha-forte);border-radius:var(--raio-sm);font:inherit;font-size:var(--txt-lg);
  font-weight:700;color:var(--tinta);background:#fff;min-width:0}
.cp-campo input:focus,.cp-campo select:focus,.cp-mini input:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.cp-linha{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cp-rot{font-size:var(--txt-sm);font-weight:800;color:var(--tinta-2);margin-right:4px}
.cp-rot i{font-style:normal;font-weight:500;color:var(--tinta-3)}
.cp-mini{display:inline-flex;align-items:center;gap:6px;font-size:var(--txt-sm);font-weight:700;color:var(--tinta-2)}
.cp-mini input{width:78px;padding:6px 8px;border:2px solid var(--linha-forte);border-radius:var(--raio-sm);font:inherit;font-weight:700;text-align:right}
.cp-mini em{font-style:normal;color:var(--tinta-3)}
.cp-cond{padding-top:10px;border-top:1px dashed var(--linha)}
.cp-aviso{margin:0 0 16px;padding:14px 16px;border-radius:var(--raio-md);background:var(--card-2);border:1px dashed var(--linha-forte);color:var(--tinta-2)}
.cp-blocos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px}
.cp-bloco{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);
  box-shadow:var(--sombra);min-width:0}
.cp-bloco.cp-forte{border-top:4px solid var(--marca)}
.cp-bloco.bom{border-top:4px solid var(--pos)}
.cp-bloco.ruim{border-top:4px solid var(--neg)}
.cp-tit{font-size:var(--txt-xs);font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tinta-3)}
.cp-grande{font-size:var(--txt-4xl);font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:var(--tinta);line-height:1.15}
.cp-grande small{font-size:var(--txt-md);font-weight:700;color:var(--tinta-3);letter-spacing:0}
.cp-bloco.bom .cp-grande{color:var(--pos)}
.cp-bloco.ruim .cp-grande{color:var(--neg)}
.cp-l{font-size:var(--txt-sm);color:var(--tinta-2);line-height:1.45}
.cp-l i{font-style:normal}
.cp-l .ruim{color:var(--neg)}
.cp-motivo{color:var(--atencao-txt);font-weight:700}
.cp-motivo.ruim{color:var(--neg)}
.cp-sit{font-weight:700}
.cp-sit.sit-ganha{color:var(--pos)}
.cp-sit.sit-aperto{color:var(--atencao-txt)}
.cp-sit.sit-perde{color:var(--neg)}
.cp-cenarios{border:1px solid var(--linha);border-radius:var(--raio-md);overflow:hidden;margin:0 0 14px;background:var(--card)}
.cp-cen-linha{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:8px;padding:9px 14px;border-top:1px solid var(--linha);
  font-size:var(--txt-md);font-variant-numeric:tabular-nums}
.cp-cen-linha:first-child{border-top:0}
.cp-cen-tit{background:var(--fundo-2);font-size:var(--txt-xs);font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--tinta-3)}
.cp-cen-linha>span:first-child{color:var(--tinta-2);font-weight:700}
.cp-cen-esc{background:#f5f6ff;margin:-9px 0;padding:9px 6px;border-radius:6px}
.cp-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 6px}
@media (max-width:1000px){ .cp-grade,.cp-blocos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .cp-grade,.cp-blocos{grid-template-columns:minmax(0,1fr)}
  .cp-cen-linha{grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));padding:8px 10px;font-size:var(--txt-sm)}
}

/* ===== cards do Resultado: um estilo de título e ícones 3D (08/10, pedido do dono) =====
   Os três de cima vinham em letra normal e os três de baixo em MAIÚSCULA cinza miúda — pareciam
   de painéis diferentes. Agora os seis falam igual: título escuro, forte, em letra normal. */
.hero-rot,.kpi-rot{font-size:var(--txt-xl);font-weight:var(--peso-max);color:var(--tinta);letter-spacing:-.2px;text-transform:none}
.kpi-cab{height:auto;gap:10px}
.hero-ico.com3d,.kpi-ico.com3d{background-image:var(--ico3d);background-repeat:no-repeat;background-position:center;
  background-color:color-mix(in srgb,var(--cor) 7%,#fff);border:1px solid color-mix(in srgb,var(--cor) 16%,transparent);
  box-shadow:0 1px 0 #fff inset,0 6px 14px -10px color-mix(in srgb,var(--cor) 60%,transparent)}
.hero-ico.com3d{width:46px;height:46px;border-radius:14px;background-size:32px auto}
.kpi-ico.com3d{width:38px;height:38px;border-radius:12px;background-size:26px auto}
.hero-ico.com3d .ic,.kpi-ico.com3d .ic{opacity:0}
/* a Publicidade no meio dos dois lucros: o número um tamanho acima dos cards de baixo */
.res-hero.com-ads .kpi-val{font-size:30px;margin-top:14px}

/* Reposição: pedido por palavra do produto (marca no nome: Eurofarma, Cimed…) */
.repo-palavra{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;margin-top:2px;border-top:1px dashed var(--linha)}
.repo-palavra-campo{min-width:220px;flex:0 1 280px;padding:7px 12px;border:2px solid var(--linha-forte);border-radius:999px;font:inherit;font-size:var(--txt-md);font-weight:600}
.repo-palavra-campo:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.ped-palavra{font-style:normal;font-size:var(--txt-sm);font-weight:600;color:var(--tinta-3);margin-left:6px}
@media (max-width:560px){ .repo-palavra-campo{flex:1 1 100%;min-width:0} }

/* as perguntas sem resposta no A fazer: uma por linha, com a data e a hora */
.mi-perg{display:block;margin:2px 0}
.mi-perg i{font-style:normal;font-size:var(--txt-sm);font-weight:700;color:var(--neg);white-space:nowrap}

/* Simulador de compra: a média atual de vendas embaixo do campo */
.cp-ritmo{display:block;font-style:normal;font-size:var(--txt-xs);font-weight:500;color:var(--tinta-3);text-transform:none;letter-spacing:0;line-height:1.4}
.cp-ritmo b{color:var(--tinta);font-weight:800}

/* Reposição: a busca do topo filtrando a página */
.repo-busca-ativa{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;margin-bottom:4px;border-radius:var(--raio-md);
  background:#fff8e6;border:1px solid #f3dc9b;color:#6b4a00;font-size:var(--txt-md)}

/* ===== Simulador de compra: a sugestão do Radar, a escolha do cenário e as lojas principais ===== */
.cp-sugestao{display:flex;gap:18px;align-items:center;padding:14px 18px;margin:0 0 14px;border-radius:var(--raio-lg);
  background:linear-gradient(135deg,#f5f6ff,#fff);border:1px solid #dfe2f2;border-left:5px solid var(--marca);box-shadow:var(--sombra)}
.cp-sugestao>div{display:flex;flex-direction:column;gap:2px;flex:none;min-width:170px}
.cp-sugestao .cp-grande{color:var(--marca-escuro)}
.cp-sugestao ul{margin:0;padding-left:18px;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.5}
.cp-escolha{margin:0 0 10px}
.cp-candidatos{margin:0 0 12px;padding:10px 14px;border-radius:var(--raio-md);background:var(--card-2);border:1px dashed var(--linha-forte)}
.cp-conc{margin:16px 0 8px;padding:14px 16px;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);box-shadow:var(--sombra)}
.cp-conc>header{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.cp-conc>header b{font-size:var(--txt-xl)}
.cp-conc>header span{font-size:var(--txt-sm);color:var(--tinta-3)}
.cp-conc-linha{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) 100px minmax(0,1.3fr) 110px;gap:10px;align-items:center;
  padding:9px 4px;border-top:1px solid var(--linha);font-size:var(--txt-md)}
.cp-conc-tit{border-top:0;font-size:var(--txt-xs);font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--tinta-3)}
.cp-conc-loja{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-conc-loja b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-medalha{font-style:normal;align-self:flex-start;font-size:var(--txt-xs);font-weight:800;padding:1px 8px;border-radius:999px;background:var(--fundo-2);color:var(--tinta-2)}
.cp-medalha.m-platinum{background:#eef0ff;color:#3730a3}
.cp-medalha.m-gold{background:#fff4d6;color:#7a5200}
.cp-conc-linha a{color:var(--marca);font-weight:700}
.cp-conc-nota{margin:10px 0 0;font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.5}
@media (max-width:760px){
  .cp-sugestao{flex-direction:column;align-items:flex-start}
  .cp-conc-linha{grid-template-columns:minmax(0,1fr) 90px}
  .cp-conc-linha>span:nth-child(2),.cp-conc-linha>span:nth-child(4){display:none}
  .cp-conc-linha>span:nth-child(5){grid-column:1/-1}
  .cp-conc-tit{display:none}
}

/* a janela da senha */
.senha-erro{margin:0;padding:8px 12px;border-radius:var(--raio-sm);background:#fdecea;color:var(--neg);font-size:var(--txt-md);font-weight:600}
#dlg-senha .dlg-linha input{min-width:0;width:100%;padding:9px 11px;border:2px solid var(--linha-forte);border-radius:var(--raio-sm);font:inherit;font-size:var(--txt-lg)}
#dlg-senha .dlg-linha input:focus{outline:none;border-color:var(--marca)}

/* o botão da Shopee na tela de boas-vindas: laranja da marca, abaixo do amarelo do Mercado Livre */
.conectar.conectar-sh{margin-top:12px;border-color:rgba(238,77,45,.6);
  background:linear-gradient(135deg,#ff8a65 0%,#ee4d2d 55%,#d73211 100%);
  box-shadow:0 14px 30px -12px rgba(238,77,45,.6), 0 1px 0 rgba(255,255,255,.35) inset}
.conectar.conectar-sh:hover{box-shadow:0 20px 40px -14px rgba(238,77,45,.75)}
.conectar-sh .ct-txt b,.conectar-sh .ct-seta{color:#fff}
.conectar-sh .ct-txt i{color:#ffe3da}
.conectar.conectar-sh[hidden]{display:none}

/* a pílula da Shopee antes do Go-Live: só informa, não leva a lugar nenhum */
.pilula-sh.embreve{opacity:.78;cursor:default}
.pilula-sh.embreve:hover{background:#ee4d2d}
.vazio-breve{cursor:default;text-decoration:none;opacity:.8}
.vazio-breve[hidden]{display:none}

/* ===== Resumo mensal (mensal.js) ===== */
.ms-filtros{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin:0 0 16px}
.ms-escolha{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ms-escolha>span{font-size:var(--txt-sm);font-weight:700;color:var(--tinta-2);margin-right:2px}
.ms-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 16px}
.ms-kpi{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ms-kpi span{font-size:var(--txt-sm);color:var(--tinta-2);font-weight:600}
.ms-kpi b{font-size:var(--txt-xl);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.ms-kpi i{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-2)}
.ms-kpi.pos b{color:var(--pos)} .ms-kpi.neg b{color:var(--neg)}
.ms-kpi.destaque{background:linear-gradient(140deg,#eef2ff,#fff);border-color:#c7d2fe}
.ms-lendo{margin:0 0 10px;font-size:var(--txt-sm);color:var(--tinta-2);text-align:center}
.ms-tabela-cx{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);overflow-x:auto}
.ms-tabela{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:var(--txt-md)}
.ms-tabela th{position:sticky;top:0;background:#f6f7fc;text-align:right;font-size:var(--txt-sm);font-weight:700;color:var(--tinta-2);padding:10px 12px;white-space:nowrap;border-bottom:1px solid var(--linha)}
.ms-tabela th:first-child,.ms-tabela td:first-child{text-align:left}
.ms-tabela td{padding:9px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--linha)}
.ms-tabela tbody tr:hover{background:#f8f9ff}
.ms-tabela td.pos{color:var(--pos)} .ms-tabela td.neg{color:var(--neg)} .ms-tabela td.ms-deduz{color:var(--deduz)}
.ms-tabela tr.melhor td:first-child{box-shadow:inset 3px 0 0 var(--pos)}
.ms-tabela tr.parcial td{background:#fffbea}
.ms-tabela tr.ms-vazio td{color:var(--tinta-2)}
.ms-tabela td.ms-traco{text-align:center}
.ms-tabela tfoot td{background:#f6f7fc;border-bottom:0;font-weight:700}
.ms-mes{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:none;border:0;padding:0;font:inherit;color:var(--marca);cursor:pointer;text-align:left}
.ms-mes b{font-weight:700} .ms-mes i{font-style:normal;font-size:var(--txt-xs,12px);color:var(--tinta-2);font-weight:500}
.ms-mes:disabled{color:var(--tinta-2);cursor:default}
.ms-mes:not(:disabled):hover b{text-decoration:underline}
.ms-mes:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px;border-radius:4px}
.ms-fat{position:relative}
.ms-fat b{position:relative}
.ms-barra{position:absolute;right:12px;top:50%;transform:translateY(-50%);height:22px;width:calc((100% - 24px) * var(--w) / 100);background:#e0e7ff;border-radius:6px}
.ms-aviso{color:var(--atencao-txt,#9a6b00);cursor:help}
.ms-pe{display:flex;justify-content:flex-end;margin-top:10px}
.ms-como{margin:0;display:grid;gap:4px 0}
.ms-como dt{font-weight:700;margin-top:8px} .ms-como dd{margin:0;color:var(--tinta-2)}
/* no celular, cada mês vira um cartão */
@media (max-width:760px){
  .ms-tabela thead{display:none}
  .ms-tabela,.ms-tabela tbody,.ms-tabela tfoot,.ms-tabela tr,.ms-tabela td{display:block;width:100%}
  .ms-tabela tr{border-bottom:1px solid var(--linha);padding:8px 4px}
  .ms-tabela td{display:flex;justify-content:space-between;gap:10px;border:0;padding:4px 10px;text-align:right}
  .ms-tabela td::before{content:attr(data-rot);color:var(--tinta-2);font-size:var(--txt-sm);font-weight:600;text-align:left}
  .ms-tabela td:first-child::before,.ms-tabela td.ms-traco::before{content:none}
  .ms-barra{display:none}
}

/* ===== Boas-vindas em duas colunas: o que o Radar faz × escolha da loja ===== */
.vazio.vazio-2col{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;place-items:center stretch;padding:44px 40px 56px}
.vz-hero,.vz-escolha{position:relative;z-index:1;min-width:0}
.vz-hero{color:#fff;text-align:left;max-width:520px;justify-self:end}
.vz-hero .vazio-logo{width:84px;height:84px;margin-bottom:14px}
.vz-hero h2{margin:0 0 10px;font-size:var(--txt-4xl);line-height:1.15;letter-spacing:-.8px;font-weight:var(--peso-max);color:#fff}
.vz-hero .vazio-sub{margin:0 0 22px;max-width:none;text-align:left}
.vz-garantias{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.vz-garantias li{display:flex;gap:12px;align-items:flex-start}
.vz-ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,#6d63f2,#4338ca);box-shadow:0 8px 18px -8px rgba(99,102,241,.8)}
.vz-ico .ic{width:19px;height:19px;color:#fff}
.vz-garantias b{display:block;font-size:var(--txt-lg);letter-spacing:-.2px}
.vz-garantias i{font-style:normal;font-size:var(--txt-md);color:rgba(226,229,250,.78);line-height:1.45}
.vz-depois{margin:0;font-size:var(--txt-md);color:rgba(226,229,250,.78)}
.vz-depois b{color:#fff}
.vz-escolha{background:var(--card);border-radius:var(--raio-xl);padding:26px 24px 22px;max-width:520px;justify-self:start;width:100%;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
.vz-escolha h3{margin:0;font-size:var(--txt-2xl);letter-spacing:-.4px;color:#312e81;line-height:1.2}
.vz-escolha-sub{margin:4px 0 16px;color:var(--tinta-2);font-size:var(--txt-md)}
.mk-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.mk{position:relative;display:flex;align-items:center;gap:10px;min-height:62px;padding:10px 12px;border-radius:var(--raio-lg);
  border:1.5px solid #e4e6f2;background:#fff;font-family:inherit;text-align:left;color:var(--tinta);cursor:pointer;
  transition:border-color .15s, box-shadow .15s}
.mk b{flex:1;min-width:0;font-size:var(--txt-md);font-weight:700;letter-spacing:-.2px}
.mk-logo{flex:none;width:36px;height:36px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:#f4f5fa}
.mk-logo img{width:100%;height:100%;object-fit:cover}
.mk-letra{background:var(--c);color:var(--t);font-weight:800;font-size:18px;font-family:inherit}
.mk-bola{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #c9cce0;box-sizing:border-box}
.mk:not(.breve):hover{border-color:#a5b4fc}
.mk.sel{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.mk.sel .mk-bola{border-color:#4f46e5;background:radial-gradient(circle,#4f46e5 0 4px,transparent 4.6px)}
.mk:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px}
.mk.breve{cursor:default;background:#fafbfe;border-color:#eceef6}
.mk.breve b{color:var(--tinta-2)}
.mk.breve .mk-logo{filter:grayscale(.35);opacity:.75}
.mk.breve .mk-bola{display:none}
.mk-breve{position:absolute;right:8px;bottom:6px;font-size:11px;font-weight:700;color:#6d28d9;background:#f1ecff;
  border-radius:999px;padding:2px 8px;letter-spacing:.01em}
.mk-breve[hidden]{display:none}
.vz-escolha .conectar{margin-top:2px}
.vz-escolha .vazio-nota{color:var(--tinta-2);text-align:center}
@media (max-width:960px){
  .vazio.vazio-2col{grid-template-columns:1fr;gap:24px;padding:28px 16px 36px}
  .vz-hero,.vz-escolha{justify-self:center;max-width:560px}
  .vz-hero h2{font-size:var(--txt-3xl)}
}
@media (max-width:420px){ .mk-grade{grid-template-columns:1fr} }
.mk-logo-sh{background:#ee4d2d}
.mk-logo-sh img{object-fit:contain;padding:2px}

/* os botões rápidos de período, ao lado do menu Período */
.periodo-rapido{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.periodo-rapido:empty{display:none}
.periodo-rapido .mf-pil{white-space:nowrap}
@media (max-width:760px){ .periodo-rapido{width:100%} }

/* Dados de vendas e Mais vendidos (visao.js, 08/10) */
.vg-dados .vg-cx.ruim b{color:var(--neg)}
.vg-frete{display:flex;justify-content:space-between;gap:8px;font-size:var(--txt-sm);color:var(--tinta-3)}
.vg-frete i{font-style:normal} .vg-frete em{font-style:normal;font-weight:700;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.vg-dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.vg-dupla h4{margin:0 0 6px;font-size:var(--txt-sm);text-transform:uppercase;letter-spacing:.3px;color:var(--tinta-2)}
.vg-top{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--linha)}
.vg-top:last-child{border-bottom:0}
.vg-pos{flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#eef2ff;color:#4338ca;font-weight:800;font-size:var(--txt-sm)}
.vg-top-nome{flex:1;min-width:0;display:flex;flex-direction:column}
.vg-top-nome b{font-size:var(--txt-md);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-top-nome i,.vg-top-n i{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3)}
.vg-top-n{flex:none;display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.vg-top-n b{font-size:var(--txt-md)}
@media (max-width:760px){ .vg-dupla{grid-template-columns:1fr} }

/* a rosca do Raio-X (raiox.js, 08/10): as fatias da barra num círculo, o lucro no miolo */
.rx-com-rosca{display:grid;grid-template-columns:170px minmax(0,1fr);gap:22px;align-items:center}
.rx-lista{min-width:0}
.rx-rosca{width:170px;height:170px;display:block}
.rx-s{fill:none;stroke-width:15}
.rx-s-fundo{stroke:var(--card-2)}
.rx-s-custo{stroke:var(--marca)}.rx-s-tarifa{stroke:#f59e0b}.rx-s-frete{stroke:#0ea5e9}
.rx-s-publi{stroke:#db2777}.rx-s-imposto{stroke:#64748b}.rx-s-cupom{stroke:#a855f7}
.rx-s-devol{stroke:#ef4444}.rx-s-emb{stroke:#94a3b8}.rx-s-lucro{stroke:#16a34a}
.rx-rosca-n{font-size:12px;font-weight:800;text-anchor:middle;fill:#15803d;font-family:inherit}
.rx-rosca-n.neg{fill:#b91c1c}
.rx-rosca-t{font-size:5.6px;text-anchor:middle;fill:var(--tinta-3);font-family:inherit}
@media (max-width:760px){ .rx-com-rosca{grid-template-columns:1fr} .rx-rosca{margin:0 auto} }

/* período sem venda (visao.js, 08/10): gráfico apagado ao fundo, recado e atalhos */
.vg-semvenda{position:relative;min-height:230px;display:grid;place-items:center;overflow:hidden}
.vg-fantasma{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;gap:20px;padding:20px 40px;
  filter:blur(7px);opacity:.55;pointer-events:none}
.vg-fantasma svg{width:170px;height:170px;flex:none}
.vg-fantasma-barras{display:flex;align-items:flex-end;gap:14px;height:150px;flex:1;max-width:420px}
.vg-fantasma-barras i{flex:1;background:#c7d2fe;border-radius:6px 6px 0 0}
.vg-semvenda-txt{position:relative;text-align:center;max-width:480px;padding:10px}
.vg-semvenda-txt b{display:block;font-size:var(--txt-xl);color:#312e81;letter-spacing:-.3px}
.vg-semvenda-txt p{margin:6px 0 14px;color:var(--tinta-2);font-size:var(--txt-md);line-height:1.5}
.vg-semvenda-bt{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* ===== Integrações (integracoes.js, 08/10) ===== */
.ig-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-bottom:12px}
.ig-cartao{position:relative;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-xl);padding:18px 18px 14px;display:flex;flex-direction:column;gap:12px}
.ig-cartao.ig-lendo p{margin:0;color:var(--tinta-2)}
.ig-cab{display:flex;align-items:center;gap:12px}
.ig-cab .mk-logo{width:42px;height:42px}
.ig-nome{flex:1;min-width:0;display:flex;flex-direction:column}
.ig-nome b{font-size:var(--txt-lg);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-nome i{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3)}
.ig-imposto{flex:none;background:none;border:1px solid var(--linha);border-radius:999px;padding:4px 10px;font:inherit;font-size:var(--txt-sm);color:var(--tinta-2);cursor:pointer}
.ig-imposto:hover{border-color:#a5b4fc;color:var(--marca)}
.ig-lista{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ig-st{display:flex;align-items:flex-start;gap:9px;font-size:var(--txt-md);color:var(--tinta-2);line-height:1.4}
.ig-st i{flex:none;width:10px;height:10px;border-radius:50%;margin-top:5px;background:#cbd5e1}
.ig-verde i{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.ig-amarelo i{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.ig-amarelo span{color:var(--atencao-txt,#9a6b00)}
.ig-acoes{display:flex;flex-wrap:wrap;gap:8px}
.ig-breve{background:#fafbfe}
.ig-breve .mk-breve{position:absolute;right:14px;top:16px;bottom:auto}
.ig-mais{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 22px}
.ig-perigo{color:var(--neg)}
.ig-tit{margin:0 0 10px;font-size:var(--txt-sm);text-transform:uppercase;letter-spacing:.3px;color:var(--tinta-2)}
.ig-breves{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:900px}

/* ===== Contato e vencimento do acesso (contato.js, 08/10) ===== */
.zap-suporte{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;
  border-radius:999px;background:#25d366;color:#fff;font-weight:800;text-decoration:none;box-shadow:0 12px 28px -10px rgba(16,128,64,.7)}
.zap-suporte .ic{width:22px;height:22px}
.zap-suporte:hover{background:#1ebe5b}
.zap-suporte:focus-visible{outline:3px solid #a7f3d0;outline-offset:3px}
@media (max-width:900px){ .zap-suporte{bottom:calc(var(--barra-baixo-h,64px) + 14px);height:44px;padding:0 13px} .zap-suporte span{display:none} }
@media print{ .zap-suporte,.faixa-acesso{display:none !important} }
.lat-zap{display:flex;align-items:center;gap:9px;margin:6px 10px 0;padding:8px 12px;border-radius:12px;border:1px solid rgba(37,211,102,.45);
  color:#86efac;text-decoration:none;font-size:var(--txt-sm);font-weight:700}
.lat-zap .ic{width:18px;height:18px;flex:none}
.lat-zap:hover{background:rgba(37,211,102,.12)}
.faixa-acesso{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 14px;padding:14px 46px 14px 18px;
  border-radius:var(--raio-lg);background:linear-gradient(120deg,#312e81,#4f46e5);color:#fff;box-shadow:0 14px 30px -16px rgba(49,46,129,.8)}
.fa-txt{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.fa-txt b{font-size:var(--txt-lg);letter-spacing:-.2px}
.fa-txt #fa-relogio{font-variant-numeric:tabular-nums;color:#fde68a}
.fa-txt i{font-style:normal;font-size:var(--txt-sm);color:#e0e7ff}
.fa-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#312e81;font-weight:800;text-decoration:none}
.fa-btn .ic{width:18px;height:18px;color:#16a34a}
.fa-quem{font-size:var(--txt-md);font-weight:700;color:#fff}
.fa-fechar{position:absolute;right:10px;top:8px;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:#c7d2fe;font-size:22px;cursor:pointer}
.fa-fechar:hover{background:rgba(255,255,255,.12);color:#fff}

/* ===== Menu Integrações no topo (integracoes.js, 09/10) ===== */
.integ-topo{position:relative}
.integ-btn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 12px 0 6px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(165,180,252,.35);background:rgba(255,255,255,.08);color:#fff;font-family:inherit;white-space:nowrap;
  transition:background-color .15s,border-color .15s}
.integ-btn:hover,.integ-topo.aberto .integ-btn,.integ-topo:focus-within .integ-btn{background:rgba(255,255,255,.16);border-color:rgba(165,180,252,.7)}
.integ-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.integ-logos{display:flex}
.integ-logos img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #2a2669;background:#fff}
.integ-logos img+img{margin-left:-9px}
.integ-logos .integ-logo-sh{object-fit:contain;background:#ee4d2d;padding:2px}
.integ-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.integ-txt b{font-size:var(--txt-md);font-weight:800;letter-spacing:-.1px}
.integ-txt i{font-style:normal;font-size:11px;color:#c7d2fe}
.integ-seta{font-size:12px;opacity:.7}
.integ-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:80;width:360px;max-width:calc(100vw - 24px);display:none}
.integ-pop::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}   /* ponte: o mouse não perde o painel no vão */
.integ-topo:hover .integ-pop,.integ-topo.aberto .integ-pop,.integ-topo:focus-within .integ-pop{display:block}
.integ-pop-cx{background:var(--card);color:var(--tinta);border:1px solid var(--linha);border-radius:16px;padding:10px;
  box-shadow:0 24px 50px -18px rgba(15,23,42,.45)}
.integ-grupo{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--tinta-3);padding:8px 8px 4px}
.integ-l{position:relative;display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px}
.integ-l:hover{background:#f6f7fc}
.integ-l .mk-logo{width:34px;height:34px}
.integ-l-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.integ-l-txt b{font-size:var(--txt-md);font-weight:700}
.integ-l-txt i{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-2);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.integ-bola{flex:none;width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.integ-bola.ig-verde{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.integ-bola.ig-amarelo{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.integ-l .mk-breve{position:static}
.integ-l.breve b{color:var(--tinta-2)}
.integ-l.breve .mk-logo{filter:grayscale(.35);opacity:.75}
.integ-breves{display:grid;grid-template-columns:1fr 1fr;gap:0 4px}
.integ-breves .integ-l{padding:6px}
.integ-breves .integ-l .mk-logo{width:28px;height:28px;font-size:14px}
.integ-breves .integ-l .mk-breve{display:none}
.integ-pe{display:block;width:100%;margin-top:8px;padding:10px;border:0;border-top:1px solid var(--linha);background:none;font:inherit;font-weight:700;color:var(--marca);cursor:pointer;border-radius:0 0 10px 10px}
.integ-pe:hover{background:#f6f7fc}
body.sem-dados .integ-topo{display:none}
@media (max-width:760px){ .integ-txt,.integ-seta{display:none} .integ-btn{padding:0 6px} .integ-pop{position:fixed;right:12px;top:64px} }
@media print{ .integ-topo{display:none !important} }

/* ===== Simulador de compra: decisão, mercado e Shopee (compra.js, 09/10) ===== */
.cp-limpar{margin-left:auto}
.cp-decisao{margin:0 0 14px;padding:16px 18px;border-radius:var(--raio-xl);border:1.5px solid var(--linha);background:var(--card);box-shadow:var(--sombra)}
.cp-dec-bom{border-color:#86efac;background:linear-gradient(135deg,#f0fdf4,#fff)}
.cp-dec-aviso{border-color:#fcd34d;background:linear-gradient(135deg,#fffbeb,#fff)}
.cp-dec-ruim{border-color:#fca5a5;background:linear-gradient(135deg,#fef2f2,#fff)}
.cp-dec-cab{display:flex;align-items:center;gap:12px}
.cp-dec-ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:#fff;box-shadow:0 6px 16px -8px rgba(15,23,42,.35)}
.cp-dec-tit{display:block;font-size:var(--txt-2xl);letter-spacing:-.4px;line-height:1.2}
.cp-dec-bom .cp-dec-tit{color:#15803d} .cp-dec-ruim .cp-dec-tit{color:#b91c1c} .cp-dec-aviso .cp-dec-tit{color:#92400e}
.cp-dec-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:14px 0 4px}
.cp-dec-n{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:9px 12px;display:flex;flex-direction:column;gap:2px}
.cp-dec-n span{font-size:var(--txt-xs);font-weight:700;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.3px}
.cp-dec-n b{font-size:var(--txt-xl);font-variant-numeric:tabular-nums}
.cp-dec-mot{margin:10px 0 0;padding-left:20px;display:grid;gap:4px;color:var(--tinta-2);font-size:var(--txt-md);line-height:1.45}
.cp-ficha{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.8fr);gap:16px;align-items:start;margin:16px 0 0;padding:14px 16px;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-lg);box-shadow:var(--sombra)}
.cp-ficha-foto{width:96px;height:96px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid var(--linha)}
.cp-ficha-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.cp-ficha-txt>b{font-size:var(--txt-lg);letter-spacing:-.2px}
.cp-ficha-txt>i{font-style:normal;font-size:var(--txt-sm);color:var(--tinta-3)}
.cp-ficha-txt a{font-size:var(--txt-sm);font-weight:700}
.cp-rank{align-self:flex-start;font-size:var(--txt-sm);background:#fef3c7;color:#92400e;border-radius:999px;padding:3px 10px}
.cp-atrib{display:flex;flex-wrap:wrap;gap:5px}
.cp-atrib em{font-style:normal;font-size:var(--txt-xs);background:var(--fundo-2,#f1f3f9);border-radius:8px;padding:2px 7px;color:var(--tinta-2)}
.cp-buscas{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.cp-buscas .cp-tit{width:100%}
.cp-buscas a{font-size:var(--txt-sm);text-decoration:none;border:1px solid #dfe2f2;border-radius:999px;padding:3px 10px;color:var(--tinta-2)}
.cp-buscas a:hover{border-color:#a5b4fc;color:var(--marca)}
.cp-merc{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:10px 0 14px}
.cp-merc-it{background:var(--fundo-2,#f6f7fc);border-radius:12px;padding:9px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.cp-merc-it span{font-size:var(--txt-xs);font-weight:700;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.3px}
.cp-merc-it b{font-size:var(--txt-lg);font-variant-numeric:tabular-nums}
.cp-merc-it i{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-conc-sub{margin-top:4px}
.cp-tab-cx{overflow-x:auto}
.cp-tab{width:100%;border-collapse:collapse;font-size:var(--txt-md)}
.cp-tab th{text-align:left;font-size:var(--txt-xs);font-weight:800;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.3px;padding:8px 10px;border-bottom:1px solid var(--linha);white-space:nowrap}
.cp-tab td{padding:9px 10px;border-bottom:1px solid var(--linha);vertical-align:top}
.cp-tab td>b{display:block;font-variant-numeric:tabular-nums}
.cp-tab td>i{display:block;font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.cp-tab td .cp-medalha,.cp-tab td .cp-oficial{display:inline-block;margin:2px 4px 0 0}
.cp-oficial{font-style:normal;font-size:var(--txt-xs);font-weight:800;padding:1px 8px;border-radius:999px;background:#ecfeff;color:#0e7490}
.cp-tag-full{font-style:normal;font-weight:800;font-size:var(--txt-xs);color:#fff;background:#16a34a;border-radius:6px;padding:1px 6px}
.cp-tab tbody tr:hover{background:#f8f9ff}
@media (max-width:760px){
  .cp-ficha{grid-template-columns:auto minmax(0,1fr)} .cp-buscas{grid-column:1/-1}
  .cp-tab thead{display:none}
  .cp-tab,.cp-tab tbody,.cp-tab tr,.cp-tab td{display:block;width:100%}
  .cp-tab tr{border-bottom:1px solid var(--linha);padding:6px 0}
  .cp-tab td{border:0;padding:3px 4px}
  .cp-tab td[data-rot]:not([data-rot=""])::before{content:attr(data-rot);display:block;font-size:var(--txt-xs);font-weight:700;color:var(--tinta-3);text-transform:uppercase}
}

/* ===== Fase 2 do upgrade visual (09/10, decisão 2A): ÍCONE EM LINHA EM TODO O APP =====
   O 3D fica só nos destaques (tela de entrada, boas-vindas). Nos cards, selos de seção, menu do perfil,
   busca e ferramentas, a arte 3D sai e o desenho em linha que já estava no HTML (como reserva) aparece,
   num quadrado de cor suave com a cor de cada card. Uma família só: grade 24, traço 1.9, currentColor. */
.sec-selo.com3d,.mi-ico.com3d,.bf-lupa.com3d,.hero-ico.com3d,.kpi-ico.com3d,.fe-ico.com3d,
.palco:not(.palco-claro) .sec-selo.com3d{background-image:none !important}
.sec-selo.com3d .ic,.mi-ico.com3d .ic,.bf-lupa.com3d .ic,.hero-ico.com3d .ic,.kpi-ico.com3d .ic,.fe-ico.com3d .ic{opacity:1}
.palco:not(.palco-claro) .sec-selo.com3d{background-color:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.22)}
/* os quadrados dos cards do Resultado: a cor do card em degradê leve, o traço na cor cheia */
.hero-ico,.hero-ico.com3d,.kpi-ico,.kpi-ico.com3d{
  background:linear-gradient(160deg,color-mix(in srgb,var(--cor) 8%,#fff),color-mix(in srgb,var(--cor) 17%,#fff));
  border:1px solid color-mix(in srgb,var(--cor) 22%,transparent);color:var(--cor);
  box-shadow:0 1px 0 #fff inset,0 6px 14px -10px color-mix(in srgb,var(--cor) 55%,transparent)}
.hero-ico,.hero-ico.com3d{width:44px;height:44px;border-radius:13px}
.hero-ico .ic{width:23px;height:23px}
.kpi-ico,.kpi-ico.com3d{width:38px;height:38px;border-radius:11px}
.kpi-ico .ic{width:20px;height:20px}
/* os selos das seções: um pouco maiores, traço mais visível */
.sec-selo.com3d{width:40px;height:40px}
.sec-selo .ic{width:21px;height:21px}
/* o menu do perfil: cada item com o ícone num quadradinho da marca */
.menu-item .mi-ico{width:30px;height:30px;border-radius:9px;background:var(--marca-50);color:var(--marca-700);flex:none}
.menu-item .mi-ico .ic{width:17px;height:17px}
.menu-item:hover .mi-ico{background:var(--marca-100)}
/* as ferramentas (Importar dados, Custos e metas, Relatórios) */
.fe-ico,.fe-ico.com3d{background:linear-gradient(160deg,var(--marca-50),var(--marca-100));color:var(--marca-700);border:1px solid var(--marca-200)}
.fe-ico .ic{width:22px;height:22px}
/* o emoji do texto corrido virou ícone (icones.js, trocarNoTexto): do tamanho da letra, na linha */
.ico-txt{display:inline-flex;vertical-align:-.16em;margin-right:.28em}
.ico-txt .ic{width:1.12em;height:1.12em;margin:0}

/* ===== Fase 3 do upgrade visual (09/10): o menu lateral =====
   A lista rola dentro da sua caixa; Perfil, Suporte e Recolher ficam sempre à vista. Itens um pouco
   mais baixos (cabem as 19 abas num notebook comum), grupos com respiro, "Configurar" recolhível. */
@media (min-width:901px){
  .lateral{overflow:hidden;gap:0;padding:14px 12px 12px}
  .lat-rolo{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
    margin:0 -12px;padding:0 12px 8px}
  .lat-rolo::-webkit-scrollbar{width:6px}
  .lat-rolo::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px}
  .lateral .ar-aba{padding:8px 12px;gap:11px;font-size:var(--txt-md);border-radius:11px}
  .lateral .ar-aba .ic{width:19px;height:19px}
  .lateral .abas-radar{gap:2px}
  .lat-tit{padding:16px 12px 6px;font-size:11px;letter-spacing:.8px;color:rgba(203,198,255,.55)}
  .lat-tit-1{padding-top:2px}
  .lateral .ar-aba.ativa{background:linear-gradient(180deg,rgba(139,130,255,.38),rgba(99,91,240,.24));border-color:rgba(180,174,255,.4)}
  .lateral .ar-aba.ativa::before{left:-12px;top:8px;bottom:8px}
  .lat-perfil{margin-top:10px}
  .lateral .lateral-recolher{margin-top:6px;padding:8px 12px}
  .lat-zap{margin:6px 0 0}
  /* Configurar: o título vira botão com seta */
  .lat-grupo{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer;
    font-family:inherit;text-align:left;border-radius:8px}
  .lat-grupo:hover{color:#fff}
  .lat-grupo:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .lat-seta{width:14px;height:14px;transition:transform .2s ease}
  .lateral.config-fechado .lat-seta{transform:rotate(-90deg)}
  .lateral.config-fechado .abas-ferramentas{display:none}
  /* recolhido (só ícones): o grupo aparece sempre, a seta some */
  .menu-recolhido .lateral.config-fechado .abas-ferramentas{display:flex}
  .menu-recolhido .lat-grupo .lat-seta,.menu-recolhido .lat-grupo span{display:none}
  .menu-recolhido .lat-zap span{display:none}
  .menu-recolhido .lat-zap{justify-content:center;padding:8px 0}
}
@media (max-width:900px){ .lat-rolo{display:contents} .lat-zap{display:none} }

/* ===== Fase 4 do upgrade visual (09/10): o topo do Resultado =====
   A conta continua a que o dono pediu (antes do Ads − Publicidade = após o Ads); o RESULTADO, que é o
   card da direita, vira o destaque: fundo na cor do resultado (verde com lucro, vermelho com prejuízo),
   número maior, texto claro. Os cards de baixo ganham número maior e o mini-gráfico do período. */
.hero-card[data-card="apos"]{color:#fff;border-color:transparent;
  background:linear-gradient(145deg,color-mix(in srgb,var(--cor) 78%,#0b1a2e) 0%,color-mix(in srgb,var(--cor) 92%,#000) 55%,color-mix(in srgb,var(--cor) 70%,#4338ca) 100%);
  box-shadow:0 22px 44px -24px color-mix(in srgb,var(--cor) 85%,transparent),0 2px 6px rgba(16,20,48,.12)}
.hero-card[data-card="apos"]::before{display:none}
.hero-card[data-card="apos"]::after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);pointer-events:none}
.hero-card[data-card="apos"] .hero-rot,.hero-card[data-card="apos"] .hero-val,.hero-card[data-card="apos"] .hero-extra,
.hero-card[data-card="apos"] .hero-extra b,.hero-card[data-card="apos"] .hero-vazio{color:#fff}
.hero-card[data-card="apos"] .hero-val{font-size:46px;letter-spacing:-1.6px}
.hero-card[data-card="apos"] .hero-ico{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.hero-card[data-card="apos"] .hero-margem{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26);color:#fff}
.hero-card[data-card="apos"] .trilha-var,.hero-card[data-card="apos"] .trilha-var *{color:#fff !important}
.hero-card[data-card="apos"] .info-dica{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.4)}
.hero-card[data-card="apos"] .ver-calc{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.hero-card[data-card="apos"] .ver-calc:hover,.hero-card[data-card="apos"] .ver-calc[aria-expanded="true"]{background:rgba(255,255,255,.24);color:#fff}
.hero-card[data-card="apos"] .hero-aviso *{color:inherit}
.hero-card[data-card="apos"] .selo-sem-publi,.hero-card[data-card="apos"] .cst-no-card{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.hero-card[data-card="antes"] .hero-val{font-size:40px}
/* os sinais da conta, mais visíveis */
.res-op{font-size:30px;font-weight:300;color:var(--marca-300)}
/* os cards de baixo: número maior e o mini-gráfico */
.kpi-val{font-size:28px;letter-spacing:-.7px}
.kpi-spark{display:block;width:100%;height:34px;margin-top:10px;overflow:visible}
.ks-area{fill:color-mix(in srgb,var(--cor) 13%,transparent)}
.ks-linha{fill:none;stroke:var(--cor);stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}

/* ===== Fase 5 do upgrade visual (09/10): gráficos =====
   O gráfico novo do Resultado e o mensal antigo no mesmo jeito do tema do Chart.js (graficos.js). */
.vg-diario-cx{position:relative;height:260px}
@media (max-width:640px){ .vg-diario-cx{height:220px} }
.vg-grafico{gap:16px;height:170px;padding-top:12px;border-bottom:1px solid var(--linha)}
.vg-barras{gap:4px}
.vg-barras i{width:40%;border-radius:6px 6px 2px 2px;transition:filter .15s}
.vg-mes:hover .vg-barras i{filter:brightness(1.08) saturate(1.1)}
.vg-b1{background:var(--marca-200)}
.vg-b2{background:var(--marca-600)}
.vg-b2.neg{background:#dc2626}
.vg-ml{font-size:var(--txt-xs);font-weight:600}

/* ===== Fase 6 do upgrade visual (09/10): estados =====
   ⚠️ O BURACO BRANCO NO "O QUE PEDE ATENÇÃO": #trilha é coluna flex com quebra, e nesse modo o navegador
   mede a altura de cada bloco numa largura MENOR que a real — a grade dos alertas "quebrava em 2 linhas"
   na medição e a caixa guardava ~100px a mais, vazios. Medindo na largura cheia, a altura é a de verdade. */
#trilha>*{width:100%;box-sizing:border-box}

/* ===== Fase 7 do upgrade visual (09/10): tabelas de Produtos e Vendidos =====
   Cabeçalho que fica no topo ao rolar (o nome da coluna acompanha os números), números alinhados
   à direita e com algarismos de mesma largura (a vírgula de um embaixo da do outro), linha um pouco
   mais arejada e o "Ver detalhes" discreto — ele acende quando o mouse passa na linha. */
.pt-tabela{overflow:clip}                       /* clip, não hidden: hidden faria o cabeçalho grudar na caixa e não na tela */
.pt-cab,.pd-cab{position:sticky;top:calc(var(--topo-h) + var(--faixa-h));z-index:6;line-height:1.25}
.pd-cab{background:#f7f8fc}
@media (min-width:901px){
  .pt-linha>summary>[data-rot],.pt-cab>span:nth-child(n+2):nth-child(-n+8){text-align:right;font-variant-numeric:tabular-nums}
  .pd-item summary .pd-bruto,.pd-item summary .pd-lucro,.pd-item summary .pd-margem,
  .pd-cab>span:nth-child(3),.pd-cab>span:nth-child(4),.pd-cab>span:nth-child(5){text-align:right;font-variant-numeric:tabular-nums}
  .pt-linha>summary{padding-top:12px;padding-bottom:12px}
  /* 03/11: 9 colunas — entrou o Custo / un entre Faturamento e Lucro */
  .pt-cab,.pt-linha>summary{grid-template-columns:minmax(0,2.6fr) .7fr 1fr .9fr 1.05fr .7fr .8fr .7fr 118px;column-gap:14px}
}
.pt-abrir{background:transparent;border-color:transparent;color:var(--marca-700)}
.pt-linha>summary:hover .pt-abrir,.pd-item>summary:hover .pt-abrir{background:var(--marca-600);border-color:var(--marca-600);color:#fff}
.pt-linha[open] .pt-abrir,.pd-item[open] .pt-abrir{background:var(--marca-50);border-color:var(--marca-200)}
/* ⚠️ O PALCO CORTAVA O CABEÇALHO (09/10): `.palco` tem overflow:hidden para cortar os brilhos de fundo — e
   todo `position:sticky` lá dentro grudava no palco, não na tela. `clip` corta igual sem virar caixa de
   rolagem: o cabeçalho das tabelas volta a acompanhar a rolagem. (hidden fica de reserva para navegador velho.) */
.palco{overflow:hidden;overflow:clip}
.pt-linha>summary>[data-rot]{white-space:nowrap}

/* ===== Fase 8 do upgrade visual (09/10): celular =====
   ⚠️ A PÁGINA ROLAVA PARA O LADO: grade com "1fr" não deixa a coluna encolher abaixo do texto mais
   comprido — o nome do produto do "Mais vendidos" esticava a coluna até 600px num telefone de 390. */
.vg-dupla{grid-template-columns:repeat(2,minmax(0,1fr))}
.vg-dupla>div{min-width:0}
@media (max-width:760px){ .vg-dupla{grid-template-columns:minmax(0,1fr)} .rpp-grade{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rpp-item{min-width:0}
.rpp-item>span{white-space:normal;overflow-wrap:anywhere}
.casca-conteudo{overflow-x:clip}              /* rede de segurança: clip não atrapalha os cabeçalhos fixos */
/* a barra de baixo: 4 abas + a atual + "Mais" */
.lateral .ar-mais{display:none}
@media (max-width:900px){
  .lateral .abas-radar .ar-aba:not([data-aba="resultado"]):not([data-aba="vendas"]):not([data-aba="produtos"]):not([data-aba="afazer"]):not(.ativa){display:none}
  .lateral .ar-mais{display:flex;flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;align-items:center;gap:3px;
    padding:7px 1px 6px;border:0;border-radius:var(--raio-sm);background:transparent;color:rgba(226,229,250,.74);font-family:inherit;cursor:pointer}
  .lateral .ar-mais .ar-nome{display:block;font-size:var(--txt-2xs)}
  .lateral .abas-radar{flex:5 1 0;min-width:0}
  .lateral .ar-aba .ar-nome.tem-curto{display:block}
  .lateral .ar-aba .ar-curto{display:none}
  .lateral .ar-aba .ar-nome{font-size:11px;letter-spacing:-.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
}
/* a folha "Mais": sobe de baixo, com todas as telas em grade */
.folha-mais{margin:auto 0 0;width:100%;max-width:100%;max-height:82vh;padding:0 0 calc(14px + env(safe-area-inset-bottom));border:0;
  border-radius:22px 22px 0 0;background:var(--card);color:var(--tinta);overflow:auto;box-shadow:0 -20px 50px -20px rgba(16,20,48,.5)}
.folha-mais::backdrop{background:rgba(15,13,45,.55);backdrop-filter:blur(2px)}
.fm-cab{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;background:var(--card);z-index:1}
.fm-cab b{font-size:var(--txt-xl)}
.fm-fechar{width:36px;height:36px;border:0;border-radius:12px;background:var(--fundo-2);font-size:22px;color:var(--tinta-2);cursor:pointer}
.fm-grupo{padding:4px 14px 10px}
.fm-tit{display:block;padding:6px 4px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--tinta-3)}
.fm-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fm-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--linha);
  border-radius:14px;background:#fff;font-family:inherit;font-size:var(--txt-sm);font-weight:600;color:var(--tinta-2);cursor:pointer;text-align:center}
.fm-item .ic{width:22px;height:22px;color:var(--marca-600)}
.fm-item.ativa{border-color:var(--marca-300);background:var(--marca-50);color:var(--marca-800)}
.fm-item .ar-conta{position:absolute;top:6px;right:6px}

/* ===== Ajuste de tamanhos (09/10, pedido do dono com print do detalhe do produto) =====
   Com a letra um degrau acima, os quadradinhos do detalhe do produto ficaram apertados: o lucro
   ("R$ 770,81") quebrava em três linhas — culpa do `overflow-wrap:anywhere` antigo — e os títulos em
   duas. Agora: número NUNCA quebra, cada quadradinho tem largura mínima maior (a grade se arruma
   sozinha), e o título pode ir para duas linhas, mas os números ficam todos na mesma altura, embaixo. */
.prod-nums{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pn{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0;padding:10px 12px}
.pn span{font-size:11px;letter-spacing:.04em;line-height:1.3}
.pn b{font-size:var(--txt-xl);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.prod-nums .pn-destaque b{font-size:clamp(20px,1.45vw,25px);overflow-wrap:normal;white-space:nowrap}
.pn.falta.pn-destaque b{white-space:normal;font-size:var(--txt-lg)}
/* lucro grande do Lucro por loja em azul (pedido do dono, 09/10: "prefiro cores voltadas para azul"); prejuízo segue vermelho */
.cn-lucro.pos,.cn-resumo-lucro.pos{color:#1d4ed8}

/* ===== Barra de filtros mais compacta (09/10, pedido do dono: "está cortando") =====
   Com a letra maior, a barra da aba Produtos quebrava em 3 linhas e o "Análise" e o "Limpar" sobravam
   sozinhos embaixo. Os controles agora ficam do tamanho do conteúdo (sem esticar), com letra e
   respiro menores: a busca na 1ª linha, todo o resto numa linha só. */
.barra-filtros{gap:8px;row-gap:10px}
.barra-filtros>.menu,.barra-filtros>details,.barra-filtros>button,.barra-filtros>.periodo-rapido{flex:0 0 auto}
.barra-filtros .menu-botao{padding:6px 10px;gap:8px;border-radius:11px}
.barra-filtros .mb-txt i{font-size:10.5px;letter-spacing:.05em}
.barra-filtros .mb-txt b{font-size:var(--txt-md);max-width:170px}
.barra-filtros .mb-seta{font-size:10px}
.barra-filtros .mb-ico .ic{width:16px;height:16px}
.periodo-rapido .mf-pil{padding:6px 10px;font-size:var(--txt-sm)}
.barra-filtros .bf-zerar{padding:7px 11px;font-size:var(--txt-sm)}
.barra-filtros #f-conta,.barra-filtros .bf-conta{margin-left:auto}
@media (max-width:1600px){
  .barra-filtros .menu-botao .mb-ico{display:none}
  .barra-filtros .menu-botao{gap:6px;padding:6px 9px}
  .periodo-rapido{gap:4px}
  .periodo-rapido .mf-pil{padding:6px 9px}
}
/* o custo digitado na própria linha da lista de produtos */
.pt-custo-rapido{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}
.pt-custo-rapido input{width:84px;padding:5px 8px;border:1.5px solid #f3dcae;border-radius:8px;background:#fffaf0;font:inherit;font-size:var(--txt-sm);text-align:right}
.pt-custo-rapido input:focus{outline:none;border-color:var(--marca-500);background:#fff}
.pt-custo-rapido input.erro{border-color:var(--neg)}
.pt-custo-rapido .btn-mini{padding:4px 8px}

/* ===== Resumo de quantidades das visões de Produtos (09/10) =====
   Cada botão leva o seu número; cada visão abre com quadros COMPACTOS (os do "Sem venda" eram
   grandes demais: número de 31px em caixa de 120px de altura). Os dois usam a mesma medida. */
.vv-btn .vv-n{display:inline-block;min-width:22px;margin-left:7px;padding:1px 7px;border-radius:999px;
  background:var(--fundo-2);color:var(--tinta-2);font-size:var(--txt-xs);font-weight:800;line-height:1.5;text-align:center;
  font-variant-numeric:tabular-nums}
.vv-btn.ativa .vv-n{background:var(--marca-600);color:#fff}
.cat-resumo,.sv-resumo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.sv-resumo{grid-template-columns:repeat(3,minmax(0,1fr))}
.cr-q,.sv-resumo>div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 14px;background:#fff;
  border:1px solid var(--linha);border-radius:12px;text-align:left;font-family:inherit;color:inherit}
.cr-q b,.sv-resumo b{display:block;font-size:var(--txt-2xl);font-weight:800;letter-spacing:-.3px;line-height:1.2;color:var(--tinta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cr-q span,.sv-resumo span{font-size:var(--txt-sm);line-height:1.35;color:var(--tinta-3)}
button.cr-q{cursor:pointer;transition:border-color .15s,box-shadow .15s}
button.cr-q:hover{border-color:var(--marca-300);box-shadow:0 4px 14px -8px rgba(29,78,216,.35)}
.cr-q.cr-azul b{color:#1d4ed8}
.cr-q.cr-neg b{color:var(--neg, #b62b21)}
.cr-q.cr-terra b,.sv-resumo .sv-dinheiro b{color:var(--deduz)}
.cr-q.cr-alerta b{color:var(--atencao-txt, #9a6b00)}
@media (max-width:900px){ .cat-resumo{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .sv-resumo{grid-template-columns:minmax(0,1fr)} .cr-q b,.sv-resumo b{font-size:var(--txt-xl)} }
/* celular: os 4 botões (com o número) não cabem numa linha — "Sem custo" sumia. Vira grade 2×2. */
@media (max-width:560px){
  .vv-seletor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .vv-seletor .vv-btn{justify-content:center;padding:9px 6px;font-size:var(--txt-md);white-space:nowrap}
}
/* itens de quem atende no Perfil (Atendimento é link, Limpar suporte é botão) */
.menu-item[hidden]{display:none}
a.menu-item{text-decoration:none;color:inherit}

/* ===== Faixa do topo do Resultado (09/10, "igual ao LucroTurbo") =====
   Dez quadros pequenos numa grade que se ajusta: 5 por linha no notebook, 2 no celular. O lucro
   (antes e depois do Ads) leva borda azul; deduções em terracota; prejuízo em vermelho. */
.fx-faixa{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0 0 14px}
.fx-q{display:flex;flex-direction:column;gap:2px;min-width:0;padding:9px 12px;border:1px solid var(--linha);border-radius:12px;
  background:var(--card,#fff);text-align:left;font-family:inherit;color:inherit}
.fx-rot{font-size:var(--txt-xs);font-weight:700;color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-val{font-size:var(--txt-xl);font-weight:800;letter-spacing:-.3px;line-height:1.2;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.fx-sub{font-size:var(--txt-xs);color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-q.fx-deduz .fx-val{color:var(--deduz)}
.fx-q.fx-apagado .fx-val{color:var(--tinta-3)}
.fx-q.fx-destaque{border-color:#93c5fd;background:linear-gradient(180deg,#eff6ff,#fff)}
.fx-q.fx-destaque.fx-pos .fx-val{color:#1d4ed8}
.fx-q.fx-destaque.fx-neg{border-color:#fecaca;background:linear-gradient(180deg,#fef2f2,#fff)}
.fx-q.fx-destaque.fx-neg .fx-val{color:var(--neg,#b62b21)}
.fx-q.fx-aviso{cursor:pointer;border-style:dashed;border-color:#f3dcae;background:#fffbeb}
.fx-q.fx-aviso .fx-val{font-size:var(--txt-md);color:var(--atencao-txt,#9a6b00)}
.fx-q.fx-aviso:hover{border-color:#d9a441}
@media (max-width:560px){ .fx-faixa{grid-template-columns:repeat(2,minmax(0,1fr))} .fx-val{font-size:var(--txt-lg)} }
.periodo-rapido .mf-mes{height:34px;padding:0 10px;border:1px solid var(--linha);border-radius:999px;background:#fff;font:inherit;
  font-size:var(--txt-sm);font-weight:600;color:var(--tinta-2);cursor:pointer}
.periodo-rapido .mf-mes.ativa{border-color:var(--marca-300);background:var(--marca-50);color:var(--marca-800)}
/* a faixa do topo: 2 linhas de 5 no computador (10 quadros), em vez de 7 + 3 */
@media (min-width:1100px){ .fx-faixa{grid-template-columns:repeat(5,minmax(0,1fr))} }


/* ===== Reajuste de preços (09/10) ===== */

.rj-campo{display:flex;flex-direction:column;gap:3px;font-size:var(--txt-xs);font-weight:700;color:var(--tinta-3)}
.rj-campo select,.rj-num input,.rj-pct input{height:36px;border:1px solid var(--linha);border-radius:10px;padding:0 10px;font:inherit;font-size:var(--txt-md);color:var(--tinta);background:#fff}
.rj-num,.rj-pct{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--tinta-2)}
.rj-num input{width:64px;text-align:right}
.rj-filtros select,.rj-busca{height:34px;border:1px solid var(--linha);border-radius:999px;padding:0 12px;font:inherit;font-size:var(--txt-sm);background:#fff;color:var(--tinta-2)}
.rj-busca{min-width:220px;flex:1 1 220px}
.rj-chk{display:inline-flex;align-items:center;gap:6px;font-size:var(--txt-sm);color:var(--tinta-2);padding:0 6px}
.rj-tabela{border:1px solid var(--linha);border-radius:14px;overflow:clip;background:var(--card,#fff)}
.rj-linha{display:grid;grid-template-columns:34px minmax(0,2.6fr) repeat(3,minmax(90px,.8fr)) minmax(150px,1fr) minmax(120px,.9fr);gap:10px;align-items:center;padding:9px 12px;border-top:1px solid var(--linha);font-size:var(--txt-md)}
.rj-linha.rj-cab{border-top:0;background:var(--fundo-2);font-size:var(--txt-xs);font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--tinta-3);position:sticky;top:0;z-index:1}
.rj-linha.mudou{background:#eff6ff}
.rj-prod{display:flex;gap:10px;align-items:center;min-width:0}
.rj-prod img,.rj-prod>i{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:0 0 40px;background:var(--fundo-2)}
.rj-prod>span{min-width:0;display:flex;flex-direction:column}
.rj-prod b{font-size:var(--txt-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rj-prod em{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rj-av{font-size:var(--txt-xs);color:var(--atencao-txt,#9a6b00);font-weight:600}
.rj-linha>span small{display:block;font-size:var(--txt-xs);color:var(--tinta-3)}
.rj-pos{color:#1d4ed8}
.rj-neg{color:var(--neg,#b62b21)}
.rj-ed{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rj-ed input{width:88px;height:32px;border:1px solid var(--linha);border-radius:8px;padding:0 8px;font:inherit;font-size:var(--txt-md);text-align:right;background:#fff}
.rj-ed input:focus{outline:2px solid var(--marca-300);border-color:var(--marca-400)}
.rj-ed small{flex-basis:100%}
.rj-usar{border:1px solid var(--marca-200,#c7d2fe);background:var(--marca-50);color:var(--marca-700);border-radius:8px;height:30px;padding:0 8px;font:inherit;font-size:var(--txt-xs);font-weight:700;cursor:pointer}
.rj-pe{position:sticky;bottom:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end;margin-top:12px;padding:10px 14px;border:1px solid var(--linha);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 10px 30px -18px rgba(16,20,48,.45);z-index:3}
.rj-pe>span{margin-right:auto;color:var(--tinta-2)}
@media (max-width:900px){
  .rj-linha{grid-template-columns:30px minmax(0,1fr) minmax(0,1fr);row-gap:6px}
  .rj-linha.rj-cab{display:none}
  .rj-prod{grid-column:2 / -1}
  .rj-linha>span[data-rot]{display:flex;flex-direction:column}
  .rj-linha>span[data-rot]::before{content:attr(data-rot);font-size:var(--txt-xs);font-weight:700;color:var(--tinta-3)}
  .rj-linha>span[data-rot]:nth-of-type(n+2){grid-column:auto}
}
/* os quadros da faixa abrem a conta (o mesmo painel do "Ver cálculo") */
button.fx-q.fx-calc{cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s}
button.fx-q.fx-calc:hover{border-color:var(--marca-300);box-shadow:0 4px 14px -8px rgba(29,78,216,.35)}
button.fx-q.fx-calc.calc-ativo{border-color:var(--marca-500,#6366f1);box-shadow:0 0 0 2px var(--marca-100,#e0e7ff)}
.fx-ver{font-size:var(--txt-2xs);font-weight:700;color:var(--marca-600);margin-top:2px}
.calc-ir{margin:10px 0 0}

.rj-fonte{display:inline-block;margin-top:2px;padding:0 6px;border-radius:999px;font-size:var(--txt-2xs);font-weight:700;background:#fff8ea;color:#7a4b00}
.rj-fonte.ok{background:#eff6ff;color:#1d4ed8}
.rj-aplicar{height:30px;padding:0 10px;border:0;border-radius:8px;background:var(--marca-600);color:#fff;font:inherit;font-size:var(--txt-xs);font-weight:800;cursor:pointer}
.rj-aplicar:hover{background:var(--marca-700)}
.rj-aplicar:disabled{opacity:.45;cursor:not-allowed}
/* Reajuste: os grupos de filtro, cada um com nome (09/10) */


/* ===== Reajuste em etapas (09/10, "organize profissionalmente") ===== */

.rj-passo{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--marca-600);color:#fff;font-weight:800;font-size:var(--txt-md)}
.rj-barra-tabela{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 8px}
.rj-campo-linha{flex-direction:row;align-items:center;gap:8px}
.rj-campo-linha select{height:34px;border:1px solid var(--linha);border-radius:999px;padding:0 12px;font:inherit;font-size:var(--txt-sm);background:#fff}


/* ===== Reajuste compacto (09/10, "ficou ocupando muita tela") ===== */
.rj-painel{margin:0 0 10px;border:1px solid var(--linha);border-radius:14px;background:var(--card,#fff);overflow:clip}
.rj-pcab{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(180deg,#f8faff,#fff);border-bottom:1px solid var(--linha)}
.rj-pcab>b{font-size:var(--txt-md)}
.rj-pcab .rj-passo{flex:0 0 22px;height:22px;font-size:var(--txt-xs)}
.rj-pcab-2{border-top:1px solid var(--linha)}
.rj-painel .mf-pil{height:28px;padding:0 10px;font-size:var(--txt-sm)}
.rj-painel .mf-pil .vv-n{font-size:var(--txt-2xs);padding:0 6px}
.rj-painel .rj-busca{flex:1 1 220px;height:30px;min-width:0}
.rj-linha-acao{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:8px 14px 12px}
.rj-mini{display:flex;flex-direction:column;gap:2px;font-size:var(--txt-2xs);font-weight:700;color:var(--tinta-3)}
.rj-mini .rj-num input{width:56px;height:32px}
.rj-mini select{height:32px;border:1px solid var(--linha);border-radius:10px;padding:0 8px;font:inherit;font-size:var(--txt-md);background:#fff}
.rj-linha-acao .rj-chk{padding-bottom:6px}
.rj-linha-acao .btn{height:34px}

/* a coluna da direita (Tipo, Origem): rótulo do tamanho do texto, para as opções caberem na linha */



/* ===== Reajuste no desenho do Franklin (09/10) ===== */
.rj-ic{width:20px;height:20px;flex:0 0 20px}
.rj-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(160px,.8fr);gap:22px;align-items:center;
  margin:0 0 14px;padding:22px 26px;border-radius:18px;overflow:hidden;color:#e6ebff;
  background:radial-gradient(120% 140% at 85% 20%,#1e3a8a 0%,#0f1b4d 45%,#0a1033 100%)}
.rj-hero-marca{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rj-hero-marca .rj-ic{width:44px;height:44px;flex:0 0 44px;padding:10px;border-radius:14px;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff}
.rj-hero-marca b{display:block;font-size:var(--txt-xl);color:#fff}
.rj-hero-marca small{font-size:var(--txt-2xs);letter-spacing:2px;color:#a5b4fc;font-weight:700}
.rj-hero h2{margin:0 0 8px;font-size:clamp(22px,2.4vw,32px);line-height:1.15;letter-spacing:-.6px;color:#fff}
.rj-hero h2 span{background:linear-gradient(90deg,#38bdf8,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.rj-hero p{margin:0;font-size:var(--txt-md);color:#c7d2fe;line-height:1.5}
.rj-hero-dest{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid rgba(165,180,252,.25);display:flex;flex-direction:column;gap:12px}
.rj-hero-dest li{display:flex;align-items:center;gap:10px}
.rj-hero-dest .rj-ic{width:36px;height:36px;flex:0 0 36px;padding:8px;border-radius:50%;background:rgba(99,102,241,.25);color:#c7d2fe}
.rj-hero-dest b{display:block;font-size:var(--txt-sm);color:#fff}
.rj-hero-dest small{font-size:var(--txt-xs);color:#a5b4fc}
.rj-hero-graf{position:relative;height:120px;display:flex;align-items:flex-end;gap:8px;padding:0 4px}
.rj-hero-graf i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#3b82f6,rgba(59,130,246,.15))}
.rj-hero-graf svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#7dd3fc;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(56,189,248,.6))}
.rj-painel{padding-bottom:4px;border-radius:18px;background:linear-gradient(180deg,#f8faff,#fff)}
.rj-pcab{align-items:center;padding:12px 16px;border-bottom:0;background:none}
.rj-pcab .rj-passo{flex:0 0 32px;height:32px;font-size:var(--txt-md)}
.rj-pcab-txt{margin-right:auto;display:flex;flex-direction:column}
.rj-pcab-txt b{font-size:var(--txt-lg);letter-spacing:-.2px}
.rj-pcab-txt small{font-size:var(--txt-sm);color:var(--tinta-3)}
.rj-pcab-txt small b{font-size:inherit;color:var(--tinta-2)}
.rj-contador{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--linha);border-radius:999px;background:#fff;font-size:var(--txt-sm);color:var(--tinta-3)}
.rj-contador b{font-size:var(--txt-lg);color:var(--marca-700)}
.rj-contador .rj-ic{color:var(--marca-600)}
.rj-cards{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px;padding:0 16px}
.rj-c-inteira{grid-column:1 / -1}
.rj-c-larga{min-width:0}
.rj-gcard{display:flex;align-items:center;gap:14px;height:100%;padding:10px 12px;border:1px solid var(--linha);border-radius:14px;background:#fff}
.rj-gcab{display:flex;align-items:center;gap:10px;flex:0 0 170px;min-width:0}
.rj-gcab .rj-ic{width:38px;height:38px;flex:0 0 38px;padding:9px;border-radius:12px;background:var(--marca-50,#eef2ff);color:var(--marca-600)}
.rj-gcab b{display:block;font-size:var(--txt-md)}
.rj-gcab small{display:block;font-size:var(--txt-xs);color:var(--tinta-3)}
.rj-gops{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-width:0}
.rj-op{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--linha);border-radius:999px;background:#fff;
  font:inherit;font-size:var(--txt-sm);font-weight:600;color:var(--tinta-2);cursor:pointer;white-space:nowrap}
.rj-op i{width:14px;height:14px;border-radius:50%;border:2px solid #cbd2e4;flex:0 0 14px}
.rj-op em{font-style:normal;font-weight:500;font-size:var(--txt-xs);color:var(--tinta-3)}
.rj-op:hover{border-color:var(--marca-300)}
.rj-op.ativa{background:linear-gradient(135deg,#4f46e5,#2563eb);border-color:transparent;color:#fff;box-shadow:0 6px 14px -8px rgba(37,99,235,.7)}
.rj-op.ativa i{border-color:#fff;background:radial-gradient(circle,#fff 35%,transparent 40%)}
.rj-op.ativa em{color:#dbeafe}
.rj-gops select{height:36px;flex:1 1 150px;min-width:0;border:1px solid var(--linha);border-radius:10px;padding:0 10px;font:inherit;font-size:var(--txt-sm);background:#fff;color:var(--tinta-2)}
.rj-gops .rj-busca{flex:1 1 260px;height:36px;border-radius:10px;min-width:0}
.rj-pe-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end;padding:8px 16px 4px}
.rj-pe-filtros>span:first-child{margin-right:auto}
.rj-aviso{font-size:var(--txt-sm);color:var(--atencao-txt,#9a6b00)}
.rj-pcab-2{margin-top:6px;border-top:1px solid var(--linha)}
.rj-linha-acao{align-items:center;gap:12px;padding:6px 16px 14px}
.rj-mini{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:6px;align-items:center}
.rj-mini .rj-ic{grid-row:1 / span 2;width:18px;height:18px;color:var(--marca-600)}
.rj-mini>span:not(.rj-num){font-size:var(--txt-xs);font-weight:700;color:var(--tinta-3)}
.rj-mini .rj-num,.rj-mini select{grid-column:2}
.rj-chk-b{align-self:center}
.rj-calc{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 14px;border:1px solid var(--marca-200,#c7d2fe);border-radius:14px;
  background:linear-gradient(180deg,#eef2ff,#e0e7ff);font:inherit;color:var(--marca-800);cursor:pointer;text-align:left}
.rj-calc .rj-ic{width:28px;height:28px;flex:0 0 28px;color:var(--marca-600)}
.rj-calc b{display:block;font-size:var(--txt-md)}
.rj-calc small{display:block;font-size:var(--txt-xs);color:var(--marca-600)}
.rj-calc em{font-style:normal;font-size:22px;margin-left:8px;color:var(--marca-600)}
.rj-calc:hover{border-color:var(--marca-400)}
.rj-grande{display:inline-flex;align-items:center;gap:10px;height:52px;margin-left:auto;padding:0 22px;border:0;border-radius:14px;
  background:linear-gradient(135deg,#2563eb,#4338ca);color:#fff;font:inherit;font-size:var(--txt-lg);font-weight:800;cursor:pointer;box-shadow:0 12px 24px -12px rgba(37,99,235,.8)}
.rj-grande .rj-ic{width:22px;height:22px}
.rj-grande em{font-style:normal}
.rj-grande:hover{filter:brightness(1.08)}
@media (max-width:1100px){ .rj-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .rj-hero-graf{display:none} }
@media (max-width:900px){
  .rj-hero{grid-template-columns:minmax(0,1fr);padding:18px} .rj-hero-dest{border-left:0;padding:0}
  .rj-cards{grid-template-columns:minmax(0,1fr)} .rj-gcard{flex-direction:column;align-items:stretch} .rj-gcab{flex:none}
  .rj-grande{margin-left:0;width:100%;justify-content:center}
}
/* Situação e Tipo numa linha cada: colunas mais equilibradas, rótulo mais estreito e, na coluna da
   direita (Tipo, Origem), o rótulo só com o título */
.rj-cards{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.rj-gcab{flex:0 0 140px}
.rj-op{padding:0 10px}
.rj-cards>.rj-gcard .rj-gcab{flex:0 0 auto}
.rj-cards>.rj-gcard .rj-gcab small{display:none}
@media (max-width:900px){ .rj-cards{grid-template-columns:minmax(0,1fr)} .rj-cards>.rj-gcard .rj-gcab small{display:block} }
.rj-gcab>span{min-width:0}
.rj-gcab b,.rj-gcab small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a faixa do Reajuste pela metade da altura (09/10): menos respiro, título e destaques menores, gráfico baixo */
.rj-hero{padding:12px 20px;gap:16px;margin-bottom:10px}
.rj-hero-marca{margin-bottom:4px;gap:8px}
.rj-hero-marca .rj-ic{width:30px;height:30px;flex:0 0 30px;padding:6px;border-radius:10px}
.rj-hero-marca b{font-size:var(--txt-md)}
.rj-hero-marca small{font-size:9px;letter-spacing:1.5px}
.rj-hero h2{font-size:clamp(17px,1.5vw,21px);margin:0 0 2px;letter-spacing:-.3px}
.rj-hero p{font-size:var(--txt-xs);line-height:1.4}
.rj-hero-dest{gap:5px;padding-left:14px}
.rj-hero-dest .rj-ic{width:26px;height:26px;flex:0 0 26px;padding:5px}
.rj-hero-dest b{font-size:var(--txt-xs)}
.rj-hero-dest small{font-size:var(--txt-2xs)}
.rj-hero-graf{height:62px;gap:5px}
.rj-hero-graf svg{stroke-width:2.5}
.rj-hero-dest small{display:none}
.rj-hero-dest{gap:4px}
.rj-hero p{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.fm-zap{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;border:1px solid rgba(37,211,102,.5);
  background:rgba(37,211,102,.08);color:#128c4a;font-weight:700;text-decoration:none}
.fm-zap .ic{width:20px;height:20px}

/* ===== Padronização geral (09/10, conferência "cores, fontes, telas") =====
   ⚠️ O AZUL DO LUCRO VIRA TOKEN: --lucro. O positivo GRANDE (número de destaque, fundo de card,
   barra/linha de lucro em gráfico) é azul; o verde fica só em detalhe pequeno (seta, selo, ✓).
   --pos continua existindo para esses detalhes. */
:root{--lucro:#1d4ed8;--lucro-fundo:#eff6ff;--lucro-borda:#bfdbfe;--marca-400:#818cf8}
.cst-n.bom{background:var(--lucro-fundo);border-color:var(--lucro-borda)}
.cst-n.bom b{color:var(--lucro)}
.cs-passo.fim{background:var(--lucro-fundo);border-color:var(--lucro-borda)}
.cs-passo.fim b{color:var(--lucro)}
.fm-linha.fim{background:var(--lucro-fundo);border-top-color:var(--lucro-borda)}
.fm-linha.fim b{color:var(--lucro)}
.rx-lucro{background:var(--lucro)} .rx-s-lucro{stroke:var(--lucro)} .rx-rosca-n{fill:var(--lucro);font-size:var(--txt-xs)}
.ads-veredito.bom{background:var(--lucro-fundo);color:var(--lucro);border-color:var(--lucro-borda)}
.meta-feito.bom{background:var(--lucro)}
.cn-luc,.cn-evo-luc,.rd-luc{background:var(--lucro)}
.rd-lucro{stroke:var(--lucro)}
.hc-trilho i{background:var(--lucro)}
.cp-bloco.bom{border-top-color:var(--lucro)}
.cp-bloco.bom .cp-grande{color:var(--lucro)}
.ms-kpi.pos b,.ms-tabela td.pos{color:var(--lucro)}
.rj-pos,.cr-q.cr-azul b,.fx-q.fx-destaque.fx-pos .fx-val{color:var(--lucro)}
/* os números do topo do Resultado se ajustam à largura (no celular, o 46px cortava "R$ 123.45…") */
.hero-card[data-card="apos"] .hero-val{font-size:clamp(30px,3.4vw,46px)}
.hero-card[data-card="antes"] .hero-val{font-size:clamp(28px,3vw,40px)}
.kpi-val{font-size:clamp(20px,2.2vw,28px)}
@media (max-width:640px){ .hero-card .hero-val,.hero-card[data-card="apos"] .hero-val,.hero-card[data-card="antes"] .hero-val{font-size:30px} .kpi-val{font-size:20px} }
.res-op{font-size:var(--txt-4xl)}
/* o rodapé dos cards de baixo desce para o fim do card (o margin-top:12px anulava o auto) */
.kpi-pe{margin-top:auto}
/* fontes fora da escala → tokens (mínimo --txt-2xs) */
.fm-tit,.pn span{font-size:var(--txt-2xs)}
@media (max-width:900px){ .lateral .ar-aba .ar-nome{font-size:var(--txt-2xs)} }
.barra-filtros .mb-txt i,.barra-filtros .mb-seta,.rj-hero-marca small{font-size:var(--txt-2xs)}
.rj-calc em{font-size:var(--txt-2xl)}
/* o chip "Mês…" ativo igual aos outros botões de período */
.periodo-rapido .mf-mes.ativa{background:var(--marca-600);border-color:var(--marca-600);color:#fff}
/* a lista de Produtos no celular: colunas que encolhem e sem nowrap forçado */
@media (max-width:900px){
  .pt-linha>summary{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
  .pt-linha>summary>[data-rot]{white-space:normal;min-width:0}
  .pt-custo-rapido input{width:72px}
}
/* ===== O sininho (09/10): alertas graves do cadastro ===== */
.alerta-topo{position:relative}
.alerta-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(165,180,252,.35);background:rgba(255,255,255,.08);color:#fff;font-family:inherit}
.alerta-btn:hover,.alerta-topo.aberto .alerta-btn{background:rgba(255,255,255,.16);border-color:rgba(165,180,252,.7)}
.alerta-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.alerta-n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  background:#dc2626;color:#fff;font-size:var(--txt-2xs);font-weight:800;border:2px solid #1e1b4b}
.alerta-topo.tem-grave .alerta-btn{border-color:rgba(248,113,113,.7)}
.alerta-topo.tem-grave .alerta-btn .ic{animation:sino-bate 2.4s ease-in-out infinite;transform-origin:50% 10%}
@keyframes sino-bate{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(14deg)}93%{transform:rotate(-12deg)}97%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){ .alerta-topo.tem-grave .alerta-btn .ic{animation:none} }
.alerta-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:85;width:400px;max-width:calc(100vw - 24px);display:none}
.alerta-topo.aberto .alerta-pop{display:block}
.alerta-cx{background:var(--card,#fff);color:var(--tinta);border:1px solid var(--linha);border-radius:16px;padding:8px;max-height:70vh;overflow:auto;
  box-shadow:0 24px 50px -18px rgba(15,23,42,.45)}
.alerta-cab{padding:8px 10px 10px;border-bottom:1px solid var(--linha);margin-bottom:6px}
.alerta-cab b{display:block;font-size:var(--txt-lg)}
.alerta-cab span{font-size:var(--txt-sm);color:var(--tinta-3)}
.alerta-it{display:flex;gap:10px;padding:10px;border-radius:12px}
.alerta-it+.alerta-it{border-top:1px solid var(--linha)}
.alerta-it>i{flex:0 0 10px;height:10px;margin-top:5px;border-radius:50%;background:#f59e0b}
.alerta-it.grave>i{background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.15)}
.alerta-it b{font-size:var(--txt-md)}
.alerta-it.grave b{color:var(--neg,#b62b21)}
.alerta-it p{margin:3px 0 8px;font-size:var(--txt-sm);color:var(--tinta-2);line-height:1.45}
.alerta-it ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.alerta-it li{display:flex;flex-direction:column;font-size:var(--txt-xs);color:var(--tinta-3)}
.alerta-it li button{border:0;background:none;padding:0;font:inherit;font-size:var(--txt-sm);font-weight:700;color:var(--marca-700);text-align:left;cursor:pointer;text-decoration:underline}
.alerta-ok{margin:10px;font-size:var(--txt-sm);color:var(--tinta-2)}
body.sem-dados .alerta-topo{display:none}
@media (max-width:640px){ .alerta-pop{position:fixed;left:12px;right:12px;top:64px;width:auto} }
/* os botões do sininho: o topo é escuro e o texto vinha branco no cartão branco */
.alerta-cx .btn{background:var(--marca-600);border-color:var(--marca-600);color:#fff;font-weight:700}
.alerta-cx .btn:hover{background:var(--marca-700);border-color:var(--marca-700)}
/* o "PDF do período" mora na barra de período, mas só vale no Resultado */
.mf-pdf{border-color:var(--marca-200,#c7d2fe);color:var(--marca-700);font-weight:700}
#conteudo:not([data-aba="resultado"]) .mf-pdf{display:none}
.ms-pe{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* Reajuste: o rodapé diz o que fica de fora (09/10) */
.rj-pe .rj-fora{display:block;font-size:var(--txt-xs);color:var(--tinta-3);font-weight:500;margin-top:2px}

/* Simulador (09/10): busca nos anúncios da conta inteira + de quando é a lista */
.sim-l #sim-busca{margin-bottom:6px;font-weight:500}
.sim-lidos{grid-column:1 / -1;margin:-4px 0 0;font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.45}
.sim-reler{background:none;border:0;padding:0;font:inherit;font-weight:650;color:var(--indigo);text-decoration:underline;cursor:pointer}

/* ---------------------------------------------------------------- Simulador compacto (09/10)
   Pedido do dono: "caber tudo em uma tela". Campos em 3 colunas, nota em 3 linhas curtas,
   conta e cartões mais baixos. No celular volta a 2 colunas. */
#palco-simulador .palco-cab{margin-bottom:12px}
#palco-simulador .palco-cab h2{font-size:var(--txt-xl)}
#palco-simulador .sim-grade{grid-template-columns:minmax(300px,440px) 1fr;gap:18px}
#palco-simulador .sim-campos{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px}
#palco-simulador .sim-l{gap:3px;font-size:var(--txt-sm)}
#palco-simulador .sim-l input,#palco-simulador .sim-l select{padding:6px 9px;font-size:var(--txt-md)}
#palco-simulador .sim-l #sim-busca{margin-bottom:4px}
#palco-simulador .sim-dica{display:none}
#palco-simulador .sim-check i{font-size:var(--txt-xs)}
#palco-simulador .sim-lidos{margin:-2px 0 0;font-size:var(--txt-xs)}
#palco-simulador .sim-origem{display:flex;flex-direction:column;gap:2px;margin:0;padding:6px 10px;font-size:var(--txt-sm);line-height:1.4}
.sim-or-it{display:block;padding-left:16px;position:relative;color:var(--tinta-2)}
.sim-or-it::before{content:'';position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--atencao,#d39b00)}
.sim-or-it.ok::before{background:var(--pos)}
#palco-simulador .sim-saida{gap:10px}
#palco-simulador .sim-resultado{padding:9px 14px}
#palco-simulador .sim-grande b{font-size:var(--txt-4xl)}
#palco-simulador .sim-linha{padding:5px 12px;font-size:var(--txt-md)}
#palco-simulador .sim-total .sim-linha{padding:7px 12px;font-size:var(--txt-lg)}
#palco-simulador .sim-cartoes{gap:8px}
#palco-simulador .sim-cartao{padding:8px 12px;gap:1px}
#palco-simulador .sim-cartao b{font-size:var(--txt-2xl)}
#palco-simulador .sim-ct{font-size:var(--txt-xs)}
#palco-simulador .sim-cn{font-size:var(--txt-xs);line-height:1.35}
@media (max-width:900px){
  #palco-simulador .sim-grade{grid-template-columns:1fr}
  #palco-simulador .sim-campos{grid-template-columns:1fr 1fr}
}
/* os campos do Simulador alinham pela base mesmo se um rótulo quebrar */
#palco-simulador .sim-campos{align-items:end}
#palco-simulador .palco-cab p{margin-top:2px}

/* Reajuste: anúncio em revisão/inativo não aceita preço no ML (09/10) */
.rj-travado{display:block;margin-top:4px;font-size:var(--txt-xs);font-weight:650;color:var(--deduz)}

/* Reajuste · frete e caixa (09/10): o retrato da caixa na linha do anúncio */
.rj-caixa{display:flex;gap:6px;align-items:flex-start;margin-top:5px;font-size:var(--txt-xs);line-height:1.4;color:var(--tinta-3)}
.rj-caixa .rj-ic{width:14px;height:14px;flex:none;margin-top:1px}
.rj-caixa b{display:block;font-weight:650}
.rj-caixa a{color:var(--indigo);font-weight:650;white-space:nowrap}
.rj-caixa.ruim{color:var(--tinta-2)}
.rj-caixa.ruim b,.rj-caixa.ruim .rj-ic{color:var(--neg)}
.rj-caixa.falta b,.rj-caixa.falta .rj-ic{color:var(--deduz)}
.rj-caixa-dica{margin:6px 2px 0;font-size:var(--txt-xs);color:var(--tinta-3);line-height:1.4}
/* o motivo herdava o corte do título do anúncio (.rj-prod b): aqui quebra linha */
.rj-prod .rj-caixa b{white-space:normal;overflow:visible;text-overflow:clip;font-size:inherit;-webkit-line-clamp:unset;display:block}

/* Alterações no ML (10/10): a confirmação dupla das ações que não voltam */
.alt-dupla{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.alt-dupla input{margin-top:3px;accent-color:var(--neg)}

/* ---------------------------------------------------------------- Alterações no ML (10/10)
   Os botões pequenos nas telas (data-alt-anuncio) e a janela de edição do anúncio (#dlg-anuncio). */
.alt-mini{background:none;border:1px solid var(--linha-forte);border-radius:999px;padding:1px 9px;font:inherit;font-size:var(--txt-xs);
  font-weight:650;color:var(--indigo);cursor:pointer;white-space:nowrap;line-height:1.6}
.alt-mini:hover{background:var(--card-2);border-color:var(--indigo)}
.alt-dlg{width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:var(--raio-lg);
  box-shadow:0 24px 70px rgba(15,23,42,.28);background:var(--card);color:var(--tinta)}
.alt-dlg::backdrop{background:rgba(15,23,42,.45)}
.alt-cab{display:flex;gap:12px;align-items:flex-start;padding:16px 18px 10px;border-bottom:1px solid var(--linha)}
.alt-cab img,.alt-cab>i{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none;background:var(--card-2)}
.alt-cab>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.alt-cab b{font-size:var(--txt-lg);line-height:1.3}
.alt-cab span{font-size:var(--txt-sm);color:var(--tinta-3);line-height:1.45}
.alt-cab a{color:var(--indigo);font-weight:650}
.alt-outros{display:block}
.alt-link{background:none;border:0;padding:0;font:inherit;color:var(--indigo);text-decoration:underline;cursor:pointer}
.alt-x{background:none;border:0;font-size:24px;line-height:1;color:var(--tinta-3);cursor:pointer;padding:0 4px}
.alt-abas{display:flex;gap:4px;padding:10px 18px 0;overflow-x:auto;border-bottom:1px solid var(--linha)}
.alt-aba{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;font:inherit;font-size:var(--txt-md);font-weight:650;color:var(--tinta-3);cursor:pointer;white-space:nowrap}
.alt-aba.ativa{color:var(--indigo);border-bottom-color:var(--indigo)}
.alt-corpo{padding:16px 18px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.alt-corpo .btn{align-self:flex-start}
.alt-nota{margin:0;font-size:var(--txt-sm);color:var(--tinta-2);line-height:1.5}
.alt-nota.ruim{color:var(--neg)}
.alt-pe{padding:0 18px 16px;color:var(--tinta-3)}
.alt-prev{margin:0;font-size:var(--txt-md);color:var(--tinta-2);min-height:1.4em}
.alt-prev .pos{color:var(--lucro,#1d4ed8)} .alt-prev .neg{color:var(--neg)}
.alt-campo{display:flex;flex-direction:column;gap:4px;font-size:var(--txt-sm);font-weight:650;color:var(--tinta-2)}
.alt-campo em{font-style:normal;font-weight:500;color:var(--tinta-3);margin-left:6px}
.alt-campo input,.alt-campo textarea{font:inherit;font-size:var(--txt-md);font-weight:600;color:var(--tinta);background:var(--card);
  border:1px solid var(--linha-forte);border-radius:var(--raio-sm);padding:8px 10px;width:100%;box-sizing:border-box}
.alt-campo textarea{font-weight:500;resize:vertical;line-height:1.5}
.alt-grade4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.alt-vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.alt-botoes{display:flex;gap:8px;flex-wrap:wrap}
.alt-botoes [data-perigo]{background:var(--neg);border-color:var(--neg)}
.alt-bloco{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--linha);border-radius:var(--raio-sm)}
.alt-chk{display:flex;gap:8px;align-items:center;font-size:var(--txt-md);font-weight:600}
.sim-aplicar{align-self:flex-start}
@media (max-width:600px){ .alt-grade4{grid-template-columns:1fr 1fr} }
/* botão desligado (no atendimento): tem de parecer desligado */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.4)}

/* ---------------------------------------------------------------- Alterar no ML · Editor em massa e Histórico (10/10) */
.edm-filtros,.edm-regras{display:flex;flex-direction:column;gap:10px;padding:14px 16px;margin-bottom:12px}
.edm-fl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.edm-fl>b,.edm-regras>b{font-size:var(--txt-sm);color:var(--tinta-2);margin-right:4px}
.edm-fl .rj-busca{flex:1;min-width:220px}
.edm-regras{flex-direction:row;flex-wrap:wrap;align-items:center}
.edm-regras select,.edm-valor,.hi-tabela select,.edm-fl select{font:inherit;font-size:var(--txt-sm);padding:6px 9px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);background:var(--card)}
.edm-valor{width:140px}
.edm-sub{font-size:var(--txt-xs);color:var(--tinta-3)}
.edm-sep{flex:1}
.edm-arquivo{cursor:pointer}
.edm-tabela{border:1px solid var(--linha);border-radius:var(--raio-lg);overflow:hidden;background:var(--card)}
.edm-linha{display:grid;grid-template-columns:34px minmax(220px,2.4fr) 110px 110px 100px 90px 190px 120px;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--linha)}
.edm-linha.mudou{background:#fffbea}
.edm-cab{background:var(--card-2);font-size:var(--txt-xs);font-weight:700;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.3px}
.edm-prod{display:flex;gap:9px;align-items:center;min-width:0}
.edm-prod img,.edm-prod>i{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:none;background:var(--card-2)}
.edm-prod>span{min-width:0;display:flex;flex-direction:column}
.edm-prod b{font-size:var(--txt-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edm-prod em{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.edm-in{font:inherit;font-size:var(--txt-sm);font-weight:600;width:100%;box-sizing:border-box;padding:5px 7px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);background:var(--card);color:var(--tinta)}
.edm-in.mudou{border-color:#d39b00;background:#fff4cc}
.edm-in:disabled{opacity:.5}
.edm-cla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.hi-linha{display:grid;grid-template-columns:34px 100px minmax(200px,2fr) 130px minmax(180px,1.6fr) minmax(130px,1fr);gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--linha);font-size:var(--txt-sm)}
.hi-linha span{min-width:0}
.hi-linha b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi-linha em{display:block;font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.hi-linha.erro{background:#fdf2f2}
.hi-linha.desfeita{opacity:.6}
.hi-linha .pos{color:var(--lucro,#1d4ed8)} .hi-linha .neg{color:var(--neg)}
@media (max-width:900px){
  .edm-linha,.hi-linha{grid-template-columns:1fr 1fr;row-gap:6px}
  .edm-linha>.rj-marca,.hi-linha>.rj-marca{grid-column:1 / -1}
  .edm-prod,.hi-linha>span:nth-child(3){grid-column:1 / -1}
  .edm-cab,.hi-linha.edm-cab{display:none}
  .edm-linha>span[data-rot]::before,.hi-linha>span[data-rot]::before{content:attr(data-rot);display:block;font-size:var(--txt-xs);color:var(--tinta-3);font-weight:600}
}
/* Editor em massa: colunas que cabem na tela do notebook (a primeira versão espremia o nome e a situação) */
.edm-linha{grid-template-columns:30px minmax(200px,1fr) 104px 92px 86px 74px 168px 108px;gap:8px;padding:8px 10px}
.edm-linha select.edm-in{padding:5px 4px;min-width:0}
.edm-cla .edm-in{padding:5px 4px;text-align:center}
.edm-cab>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edm-prod b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
@media (max-width:1200px){ .edm-linha{grid-template-columns:30px minmax(170px,1fr) 96px 84px 80px 70px 150px 100px;gap:6px} }

/* ---------------------------------------------------------------- Promoções (10/10) */
.pm-camps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:14px}
.pm-camp{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border:1px solid var(--linha);border-radius:var(--raio-md);background:var(--card);cursor:pointer;font:inherit}
.pm-camp:hover{border-color:var(--indigo)}
.pm-camp.ativa{border-color:var(--indigo);box-shadow:0 0 0 2px rgba(79,70,229,.15)}
.pm-camp b{font-size:var(--txt-md);line-height:1.3}
.pm-camp span{font-size:var(--txt-xs);color:var(--tinta-3)}
.pm-camp em{font-style:normal;font-size:var(--txt-xs);color:var(--deduz);font-weight:600}
.pm-linha{display:grid;grid-template-columns:30px minmax(200px,1fr) 104px 116px 84px 116px 84px;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--linha);font-size:var(--txt-sm)}
.pm-linha small{display:block;font-size:var(--txt-xs);color:var(--tinta-3)}
.pm-linha .pos{color:var(--lucro,#1d4ed8);font-weight:700} .pm-linha .neg{color:var(--neg);font-weight:700}
.pm-linha.prejuizo{background:#fdf2f2}
.alt-oferta .alt-of-cab{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.alt-of-cab span{font-size:var(--txt-sm);color:var(--tinta-3)}
.alt-of-cab em{margin-left:auto;font-style:normal;font-size:var(--txt-xs);font-weight:700;color:var(--deduz)}
.alt-of-cab em.pos{color:var(--pos)}
@media (max-width:900px){
  .pm-linha{grid-template-columns:1fr 1fr;row-gap:6px}
  .pm-linha>.rj-marca,.pm-linha>.edm-prod{grid-column:1 / -1}
  .pm-linha.edm-cab{display:none}
  .pm-linha>span[data-rot]::before{content:attr(data-rot);display:block;font-size:var(--txt-xs);color:var(--tinta-3);font-weight:600}
}

/* Responder perguntas no Radar (10/10) */
.pg-cx{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pg-cx textarea{font:inherit;font-size:var(--txt-sm);padding:7px 9px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);resize:vertical;background:var(--card);color:var(--tinta)}
.pg-cx select{font:inherit;font-size:var(--txt-xs);padding:4px 6px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);background:var(--card)}
.pg-linha{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pg-linha small{font-size:var(--txt-xs);color:var(--tinta-3)}
.pg-ok{margin:4px 0;font-weight:650;color:var(--pos)}

/* ---------------------------------------------------------------- Publicar anúncio (10/10) */
.pb-form{display:flex;flex-direction:column;gap:12px}
.pb-form .alt-bloco{background:var(--card)}
.pb-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.pb-grade select,.pb-form select{font:inherit;font-size:var(--txt-md);padding:8px 10px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);background:var(--card)}
.pb-cats{display:flex;flex-wrap:wrap;gap:6px}
.pb-cats em{font-style:normal;color:var(--tinta-3);font-size:var(--txt-xs)}
.pb-fotos{display:flex;flex-wrap:wrap;gap:8px}
.pb-foto{position:relative;width:76px;height:76px;border:1px solid var(--linha);border-radius:10px;overflow:hidden;background:var(--card-2);display:flex;align-items:center;justify-content:center}
.pb-foto img{width:100%;height:100%;object-fit:cover}
.pb-foto i{font-size:var(--txt-xs);color:var(--tinta-3);padding:4px;word-break:break-all}
.pb-foto button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(15,23,42,.7);color:#fff;cursor:pointer;line-height:1}
.pb-var{display:grid;grid-template-columns:1fr 110px 90px;gap:8px;align-items:center;font-size:var(--txt-sm)}
.pb-var input{font:inherit;padding:6px 8px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm)}
.pb-achados{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.pb-achado{display:flex;gap:10px;align-items:center;text-align:left;padding:8px 10px;border:1px solid var(--linha);border-radius:var(--raio-md);background:var(--card);cursor:pointer;font:inherit}
.pb-achado:hover{border-color:var(--indigo)}
.pb-achado img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.pb-achado span{display:flex;flex-direction:column;min-width:0}
.pb-achado b{font-size:var(--txt-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-achado em{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.pb-msg{margin:0 0 12px;padding:10px 12px;border-radius:var(--raio-sm);background:var(--card-2);font-size:var(--txt-md)}
.pb-msg.bom{background:#eafaf0;color:#14532d} .pb-msg.ruim{background:#fdeeee;color:#7f1d1d}

/* Mercado Ads: mexer na campanha daqui (10/10) */
.ad-camp-acoes{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}

/* Pós-venda: conversa e nota fiscal do pedido (10/10) */
.pd-acoes{display:flex;gap:6px;margin:0 0 10px}
.pv-conversa{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;padding:4px}
.pv-msg{max-width:80%;align-self:flex-start;background:var(--card-2);border:1px solid var(--linha);border-radius:12px 12px 12px 4px;padding:8px 10px}
.pv-msg.voce{align-self:flex-end;background:#eef2ff;border-color:#c7d2fe;border-radius:12px 12px 4px 12px}
.pv-msg p{margin:0;font-size:var(--txt-sm);white-space:pre-wrap;line-height:1.45}
.pv-msg em{display:block;margin-top:3px;font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
#dlg-pedido select{font:inherit;font-size:var(--txt-md);padding:8px 10px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);background:var(--card)}

/* Ficha do anúncio (11/10): fotos, atributos, variações, garantia */
.fi-fotos{display:flex;flex-wrap:wrap;gap:8px}
.fi-foto{position:relative;width:92px;height:92px;border:1px solid var(--linha);border-radius:10px;overflow:hidden;background:var(--card-2);display:flex;align-items:center;justify-content:center}
.fi-foto:first-child{border:2px solid var(--indigo)}
.fi-foto img{width:100%;height:100%;object-fit:cover}
.fi-foto i{font-size:var(--txt-xs);color:var(--tinta-3);padding:4px;word-break:break-all}
.fi-foto-bt{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;background:rgba(15,23,42,.6)}
.fi-foto-bt button{border:0;background:none;color:#fff;cursor:pointer;font-size:12px;padding:3px 7px}
.fi-foto-bt button:disabled{opacity:.3;cursor:default}
.fi-vars{display:flex;flex-direction:column;gap:6px}
.fi-var{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--linha);border-radius:var(--raio-sm)}
.fi-var span{display:flex;flex-direction:column}
.fi-var em{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.fi-var [data-perigo]{background:var(--neg);border-color:var(--neg)}
#dlg-anuncio select{font:inherit;font-size:var(--txt-md);padding:8px 10px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);background:var(--card)}

/* Reclamações e devoluções (11/10) */
.rc-lista{display:flex;flex-direction:column;gap:8px}
.rc-item{border:1px solid var(--linha);border-radius:var(--raio-md);background:var(--card);overflow:hidden}
.rc-item.agir{border-color:#f0c3c3}
.rc-cab{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;text-align:left;padding:10px 14px;border:0;background:none;font:inherit;cursor:pointer}
.rc-cab span{display:flex;flex-direction:column;gap:2px;min-width:0}
.rc-cab em{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.rc-prazo{align-items:flex-end;text-align:right}
.rc-prazo b{color:var(--neg);font-size:var(--txt-sm)}
.rc-item.agir .rc-cab{background:#fdf6f6}
.rc-det{padding:12px 14px;border-top:1px solid var(--linha);display:flex;flex-direction:column;gap:10px}
.rc-rep{margin:0;padding:8px 10px;border-radius:var(--raio-sm);font-size:var(--txt-sm);font-weight:650}
.rc-rep.ruim{background:#fdeeee;color:#7f1d1d} .rc-rep.bom{background:#eafaf0;color:#14532d}
.rc-perigo{border-color:var(--neg);color:var(--neg)}
.rc-det select,.rc-det input,.rc-det textarea{font:inherit}

/* Tendências e mais vendidos (11/10) */
.ps-filhas{display:flex;flex-wrap:wrap;gap:6px}
.ps-filha{border:1px solid var(--linha);background:var(--card);border-radius:999px;padding:4px 10px;font:inherit;font-size:var(--txt-xs);cursor:pointer}
.ps-filha:hover{border-color:var(--indigo);color:var(--indigo)}
.ps-grade{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
.ps-tend{display:flex;flex-wrap:wrap;gap:6px}
.ps-palavra{display:inline-flex;gap:6px;align-items:center;padding:5px 10px;border-radius:999px;border:1px solid var(--linha);text-decoration:none;color:var(--tinta);font-size:var(--txt-sm)}
.ps-palavra em{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.ps-palavra.sua{background:#eef2ff;border-color:#c7d2fe}
.ps-palavra.op{background:#fffbea;border-color:#f5d97a}
.ps-tag{display:inline-block;padding:1px 7px;border-radius:999px;font-size:var(--txt-xs);font-weight:650}
.ps-tag.sua{background:#eef2ff;color:#3730a3} .ps-tag.op{background:#fffbea;color:#8a6100}
.ps-rank{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow-y:auto}
.ps-rank-l{display:flex;gap:10px;align-items:center;font-size:var(--txt-sm)}
.ps-rank-l b{min-width:38px;text-align:center;color:var(--tinta-3)}
.ps-rank-l.dentro b{color:var(--pos)}
.ps-rank-l span{display:flex;flex-direction:column;min-width:0}
.ps-rank-l em,.ps-nome em{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.ps-mais{display:flex;flex-direction:column;gap:6px}
.ps-mv{display:grid;grid-template-columns:40px 48px minmax(0,1fr) 120px 110px;gap:10px;align-items:center;padding:6px 8px;border:1px solid var(--linha);border-radius:var(--raio-sm)}
.ps-mv.seu{background:#eef2ff;border-color:#c7d2fe}
.ps-mv img,.ps-mv>i{width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--card-2)}
.ps-pos{text-align:center;color:var(--tinta-3)}
.ps-nome{display:flex;flex-direction:column;min-width:0;font-size:var(--txt-sm)}
.ps-custo{display:flex;flex-direction:column;font-size:var(--txt-xs);color:var(--tinta-3)}
.ps-custo input{font:inherit;font-size:var(--txt-sm);padding:4px 6px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm)}
.ps-marg{display:flex;flex-direction:column;font-weight:700}
.ps-marg.pos{color:var(--lucro,#1d4ed8)} .ps-marg.neg{color:var(--neg)}
.ps-marg em{font-style:normal;font-weight:500;font-size:var(--txt-xs);color:var(--tinta-3)}
@media (max-width:900px){ .ps-grade{grid-template-columns:1fr} .ps-mv{grid-template-columns:32px 40px minmax(0,1fr)} .ps-custo,.ps-marg{grid-column:3} }

/* ---------------------------------------------------------------- o PAINEL do Resultado (11/10)
   Desenho do dono: tela enxuta em cima; a análise completa (res-antigo, Mercado Ads e a Visão)
   aparece pelo botão. Lucro positivo em AZUL; vermelho só para prejuízo. */
body.res-resumo #trilha .res-antigo, body.res-resumo #palco-lucro, body.res-resumo #palco-visao{display:none !important}
.rn-painel{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
.rn-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.rn-ola{font-size:var(--txt-sm);color:var(--tinta-3);font-weight:600}
.rn-topo h2{margin:2px 0 4px;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.5px;color:var(--tinta)}
.rn-topo p{margin:0;font-size:var(--txt-md);color:var(--tinta-3)}
.rn-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.rn-kpi{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 12px;background:var(--card);border:1px solid var(--linha);border-radius:18px;box-shadow:0 6px 22px rgba(15,23,42,.06);min-width:0}
.rn-kpi.calc-ativo{outline:2px solid var(--indigo)}
.rn-kpi-cab{display:flex;align-items:center;gap:10px}
.rn-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:#eef2ff;color:#4f46e5;flex:none}
.rn-fat .rn-ico{background:#dcfce7;color:#15803d}
.rn-antes .rn-ico{background:#f3e8ff;color:#9333ea}
.rn-publi .rn-ico{background:#ffe4e6;color:#e11d48}
.rn-apos .rn-ico{background:#ede9fe;color:#7c3aed}
.rn-rot{font-size:var(--txt-md);font-weight:650;color:var(--tinta-2)}
.rn-val{font-size:clamp(20px,1.9vw,28px);font-weight:800;letter-spacing:-.6px;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.rn-val.rn-pos{color:var(--lucro,#1d4ed8)} .rn-val.rn-neg{color:var(--neg)}
.rn-meio{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.rn-meio .trilha-var{font-size:var(--txt-xs)}
.rn-meio .kpi-spark{width:46%;height:30px;flex:none}
.rn-sub{font-size:var(--txt-xs);color:var(--tinta-3)}
.rn-ver{align-self:flex-end;margin-top:auto;padding-top:8px;border:0;border-top:1px solid var(--linha);width:100%;text-align:right;background:none;font:inherit;font-size:var(--txt-sm);font-weight:650;color:var(--indigo);cursor:pointer}
.rn-meio-grade{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px}
.rn-cx{background:var(--card);border:1px solid var(--linha);border-radius:18px;padding:16px 18px;box-shadow:0 6px 22px rgba(15,23,42,.06);min-width:0;display:flex;flex-direction:column;gap:8px}
.rn-cx-cab{display:flex;align-items:center;gap:10px;justify-content:space-between}
.rn-cx-cab b{font-size:var(--txt-lg);color:var(--tinta)}
.rn-legenda{display:flex;align-items:center;gap:6px;font-size:var(--txt-xs);color:var(--tinta-3)}
.rn-legenda i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:6px}
.rn-legenda .l-fat{background:#0ea5e9} .rn-legenda .l-luc{background:#a855f7}
.rn-graf{position:relative;height:270px}
.rn-vazio{color:var(--tinta-3);font-size:var(--txt-md);margin:20px 0}
.rn-canais{background:linear-gradient(170deg,#f5f9ff,#fff)}
.rn-canal{display:grid;grid-template-columns:40px minmax(0,1fr) auto 14px;grid-template-rows:auto auto;gap:4px 10px;align-items:center;padding:10px 4px;border:0;border-bottom:1px solid var(--linha);background:none;font:inherit;text-align:left;cursor:pointer}
.rn-canal:last-child{border-bottom:0}
.rn-clogo{grid-row:1 / 3;width:40px;height:40px;border-radius:12px;background:var(--c);display:flex;align-items:center;justify-content:center;font-weight:800;color:#111;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.rn-cnome{font-weight:650;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-cnum{display:flex;gap:8px;align-items:baseline;font-size:var(--txt-sm)}
.rn-cnum b{font-variant-numeric:tabular-nums}
.rn-cvar{font-size:var(--txt-xs);font-weight:700} .rn-cvar.sobe{color:#16a34a} .rn-cvar.desce{color:var(--neg)}
.rn-cbarra{grid-column:2 / 4;height:7px;border-radius:99px;background:#eef2f7;overflow:hidden}
.rn-cbarra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c),#6366f1)}
.rn-cseta{grid-row:1 / 3;grid-column:4;color:var(--tinta-3);font-size:20px}
.rn-baixo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rn-mini{font-size:var(--txt-xs);color:var(--tinta-3)}
.rn-big{display:flex;align-items:center;gap:10px;font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.6px;color:var(--tinta);font-variant-numeric:tabular-nums}
.rn-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--linha)}
.rn-tres span{display:flex;flex-direction:column;gap:2px;min-width:0}
.rn-tres em{font-style:normal;font-size:var(--txt-xs);color:var(--tinta-3)}
.rn-tres b{font-size:var(--txt-md);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-custos .rn-ico{background:#f3e8ff;color:#9333ea}
.rn-resumo .rn-ico{background:#e0f2fe;color:#0284c7}
.rn-destaque{background:radial-gradient(120% 140% at 85% 0%,#3b2a8a 0%,#151a3d 45%,#0b1026 100%);border:1px solid #6d4dff;color:#fff;box-shadow:0 14px 40px rgba(76,29,149,.35)}
.rn-destaque .rn-ico{background:rgba(255,255,255,.12);color:#c7d2fe}
.rn-destaque .rn-cx-cab{justify-content:flex-start}
.rn-destaque .rn-cx-cab span{display:flex;flex-direction:column}
.rn-destaque .rn-cx-cab b{color:#fff}
.rn-destaque small{font-size:var(--txt-xs);color:#c7d2fe}
.rn-destaque .rn-big{color:#fff}
.rn-dvar{font-size:var(--txt-sm);font-weight:700;padding:3px 9px;border-radius:999px;background:#16a34a;color:#fff}
.rn-dvar.desce{background:#dc2626}
.rn-barra{height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:4px}
.rn-barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#38bdf8,#6366f1,#a855f7)}
.rn-barra-rot{align-self:flex-end;font-size:var(--txt-xs);color:#a5b4fc}
.rn-frase{margin:auto 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);font-size:var(--txt-sm);color:#e0e7ff;line-height:1.45}
.rn-completa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border:1px dashed var(--linha-forte);border-radius:14px;background:var(--card-2)}
.rn-completa span{font-size:var(--txt-sm);color:var(--tinta-3)}
@media (max-width:1200px){ .rn-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .rn-meio-grade,.rn-baixo{grid-template-columns:1fr} .rn-kpis{grid-template-columns:1fr 1fr} .rn-graf{height:220px} }
@media (max-width:520px){ .rn-kpis{grid-template-columns:1fr} }
/* painel do Resultado: cor de cada cartão (a mini-curva usa --cor) e títulos dos cartões de baixo à esquerda */
.rn-kpi{--cor:#4f46e5} .rn-fat{--cor:#16a34a} .rn-antes{--cor:#9333ea} .rn-publi{--cor:#e11d48} .rn-apos{--cor:#7c3aed}
.rn-meio .kpi-spark{margin-top:0}
.rn-resumo .rn-cx-cab,.rn-custos .rn-cx-cab{justify-content:flex-start}

/* ---------------------------------------------------------------- filtros numa linha só (11/10)
   Pedido do dono: "no máximo uma linha, quero espaço para o dash". Botões baixos, o rótulo do
   menu na MESMA linha do valor, o "Onde vende" dentro da barra e a busca dividindo a linha
   (antes tomava uma linha inteira). As bolinhas de escolha continuam. */
@media (min-width:761px){
  .barra-filtros{padding:6px 10px;gap:6px;row-gap:6px;margin-bottom:10px;align-items:center}
  .barra-filtros>*{flex:0 0 auto}
  .barra-filtros .periodo-rapido{flex-wrap:nowrap;gap:4px}
  .barra-filtros .periodo-rapido .mf-pil{padding:4px 9px;font-size:12.5px;line-height:1.2}
  .barra-filtros .mf-pil::before{width:11px;height:11px;margin-right:5px;border-width:1.8px}
  .barra-filtros .periodo-rapido .mf-mes{height:28px;padding:0 8px;font-size:12.5px}
  .barra-filtros .menu-botao{padding:4px 9px;gap:6px;border-radius:10px;min-height:30px}
  .barra-filtros .mb-ico .ic{width:14px;height:14px}
  .barra-filtros .mb-txt{flex-direction:row;align-items:baseline;gap:5px}
  .barra-filtros .mb-txt i{font-size:10px;letter-spacing:.04em}
  .barra-filtros .mb-txt b{font-size:12.5px;max-width:130px}
  .barra-filtros #m-periodo .mb-txt i{display:none}          /* o calendário já diz o que é */
  .barra-filtros .bf-publi{gap:6px}
  .barra-filtros .bf-publi .mb-txt b{display:none}            /* a chave mostra se está ligada */
  .barra-filtros .bf-publi-chave{width:28px;height:16px}
  .barra-filtros .bf-publi-chave::after{width:12px;height:12px}
  .barra-filtros .bf-publi[aria-pressed="true"] .bf-publi-chave::after{transform:translateX(12px)}
  .barra-filtros .bf-zerar{padding:4px 9px;font-size:12px}
  .barra-filtros .bf-busca{order:0;flex:1 1 200px;min-width:170px}
  .barra-filtros .bf-busca-cx{min-height:30px;border-width:1px}
  .barra-filtros .bf-busca-cx input{padding:4px 8px;font-size:13px}
  .barra-filtros .bf-aba{padding:3px 8px;font-size:12px}
  .barra-filtros .bf-aba::before{display:none}
  .barra-filtros .bf-agora{font-size:12px}
  .barra-filtros .canais-barra{margin:0;gap:6px;flex-wrap:nowrap}
  .barra-filtros .cb-rot{display:none}
  .barra-filtros .cb-chips{flex-wrap:nowrap;gap:4px}
  .barra-filtros .cb-chip{padding:3px 9px 3px 6px;font-size:12.5px;gap:5px;border-width:1px}
  .barra-filtros .cb-chip.cb-todos{padding-left:9px}
  .barra-filtros .cb-chip img{height:15px}
  .barra-filtros .cb-chip::before{width:11px;height:11px;margin-right:2px;border-width:1.8px}
  .barra-filtros .bf-conta{font-size:12px}
}
@media (min-width:761px){
  .barra-filtros .menu-botao .mb-ico{display:flex}
  .barra-filtros .mb-txt i{display:none}                       /* o nome está na dica do botão */
  .barra-filtros .bf-publi .mb-txt i{display:inline}            /* a chave sozinha não se explica */
  .barra-filtros #m-periodo.pr-coberto .mb-txt{display:none}    /* o atalho marcado já diz o período */
  .barra-filtros .bf-busca{flex:1 1 150px;min-width:140px}
  .barra-filtros .bf-busca-cx:not(:focus-within) .bf-abas:has(.bf-aba.ativa[data-campo="tudo"]){display:none}
}
@media (min-width:761px){
  .barra-filtros .mf-pdf{display:none !important}               /* o PDF mora no topo do painel */
  .barra-filtros .bf-publi .mb-txt{display:none}                /* megafone + chave; o nome está na dica */
  .barra-filtros .periodo-rapido .mf-pil{padding:4px 8px}
  /* nas listas (com busca) os atalhos dão lugar ao menu Período, que tem os mesmos atalhos e os meses */
  .barra-filtros:has(.bf-busca:not(.fora-da-aba)) .periodo-rapido{display:none}
  .barra-filtros:has(.bf-busca:not(.fora-da-aba)) #m-periodo.pr-coberto .mb-txt{display:flex}
}
@media (min-width:761px) and (max-width:1500px){ .barra-filtros .bf-conta{display:none} }
.rn-pdf{align-self:center}
/* telas médias (até 1300 px, com o menu lateral aberto): "2 dias" e "30 dias" ficam no menu Período */
@media (min-width:761px) and (max-width:1500px){
  .barra-filtros{gap:4px;row-gap:4px;padding:5px 8px}
  .barra-filtros .periodo-rapido [data-rapido="2"],.barra-filtros .periodo-rapido [data-rapido="30"]{display:none}
  .barra-filtros .periodo-rapido .mf-mes{width:78px}
  .barra-filtros .menu-botao{padding:4px 7px;gap:5px}
  .barra-filtros .mb-txt b{max-width:92px}
}
@media (min-width:761px) and (max-width:1500px){
  .barra-filtros .periodo-rapido .mf-mes{width:70px}
  .barra-filtros .mb-txt b{max-width:80px}
  .barra-filtros .bf-busca{flex:1 1 120px;min-width:120px}
}

/* ---------------------------------------------------------------- menu lateral, cara nova (11/10)
   Pedido do dono: seções mais visíveis, cores, ícones, divisões. Cada seção tem a SUA cor (--g):
   o título leva um ponto e uma linha divisória; cada ícone mora num quadradinho da cor da seção;
   a aba ativa acende na cor da seção. A cor vale até o próximo título (seletor de irmão ~).
   Só no computador: no celular o menu é a barra de baixo, que não muda. */
@media (min-width:901px){
  .lateral{background:radial-gradient(120% 40% at 0% 0%,rgba(124,58,237,.22),transparent 60%),linear-gradient(180deg,#191541 0%,#13112f 55%,#0f0d26 100%)}
  .lat-visao,.lateral .abas-radar{--g:#a78bfa}
  .lat-vendas,.lat-vendas ~ .ar-aba{--g:#38bdf8}
  .lat-produtos,.lat-produtos ~ .ar-aba{--g:#fbbf24}
  .lat-alterar,.lat-alterar ~ .ar-aba{--g:#f472b6}
  .lat-estoque,.lat-estoque ~ .ar-aba{--g:#34d399}
  #lat-configurar,.lateral .abas-ferramentas{--g:#94a3b8}

  /* o título da seção: ponto colorido + nome + linha que divide */
  .lateral .lat-tit{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px 6px;
    font-size:10.5px;font-weight:800;letter-spacing:.13em;color:rgba(226,232,255,.62)}
  .lateral .lat-tit-1{margin-top:0;padding-top:2px}
  .lateral .lat-tit::before{content:'';flex:none;width:8px;height:8px;border-radius:3px;background:var(--g);
    box-shadow:0 0 10px var(--g)}
  .lateral .lat-tit::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent)}
  .lateral #lat-configurar{border:0;background:none;width:100%;cursor:pointer;font-family:inherit;text-align:left}
  .lateral #lat-configurar>span{order:0}
  .lateral #lat-configurar::after{order:1}
  .lateral #lat-configurar .lat-seta{order:2;flex:none;color:rgba(226,232,255,.5)}

  /* os itens: mais justos, ícone num quadradinho da cor da seção */
  .lateral .abas-radar{gap:2px}
  .lateral .ar-aba{padding:5px 10px 5px 6px;gap:10px;border-radius:11px;font-size:13.5px;font-weight:600;color:rgba(226,232,255,.80)}
  .lateral .ar-aba .ic{box-sizing:border-box;width:30px;height:30px;padding:6px;border-radius:9px;opacity:1;
    color:var(--g);background:color-mix(in srgb,var(--g) 15%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g) 22%,transparent);transition:background .15s,color .15s}
  .lateral .ar-aba:hover:not(.ativa){background:rgba(255,255,255,.06);color:#fff}
  .lateral .ar-aba:hover .ic{background:color-mix(in srgb,var(--g) 26%,transparent)}
  .lateral .ar-aba.ativa{color:#fff;font-weight:700;
    background:linear-gradient(90deg,color-mix(in srgb,var(--g) 30%,transparent),color-mix(in srgb,var(--g) 8%,transparent));
    border-color:color-mix(in srgb,var(--g) 45%,transparent);
    box-shadow:0 10px 24px -16px var(--g), inset 0 1px 0 rgba(255,255,255,.10)}
  .lateral .ar-aba.ativa .ic{color:#120f2e;background:var(--g);box-shadow:0 4px 14px -4px var(--g)}
  .lateral .ar-aba.ativa::before{left:-12px;top:8px;bottom:8px;width:4px;background:var(--g);box-shadow:0 0 12px var(--g)}
  .lateral .ar-conta{box-shadow:0 0 0 2px #15123a}

  /* recolhido: só os quadradinhos; o título vira uma linha fina na cor da seção */
  .menu-recolhido .lateral .ar-aba{padding:5px 0}
  .menu-recolhido .lateral .lat-tit{margin:8px 10px 2px;padding:0;height:2px;border-top:0;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--g),transparent);opacity:.55}
  .menu-recolhido .lateral .lat-tit::before,.menu-recolhido .lateral .lat-tit::after{display:none}
  .menu-recolhido .lateral #lat-configurar .lat-seta{display:none}
}

/* ---------------------------------------------------------------- topo, cara nova (11/10)
   Pedido do dono: o topo no mesmo padrão do menu lateral — fundo escuro com brilho violeta,
   peças de vidro do mesmo tamanho (42 px), logo com anel de luz e "& Lucro" em degradê.
   A pílula do ML deixou de ser um bloco amarelo: vidro escuro, logo do ML e o ponto verde. */
header.topo{background:radial-gradient(60% 180% at 0% 0%,rgba(124,58,237,.30),transparent 60%),
  radial-gradient(40% 160% at 100% 0%,rgba(56,189,248,.14),transparent 60%),
  linear-gradient(90deg,#191541 0%,#151236 55%,#171442 100%);
  border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 12px 30px -20px rgba(9,7,40,.9)}
header.topo::after{height:2px;opacity:1;background:linear-gradient(90deg,#a78bfa,#38bdf8 35%,#34d399 65%,#fbbf24)}
header.topo .marca{gap:12px}
header.topo .marca img.marca-logo{width:40px;height:40px;border-radius:12px;padding:3px;
  background:linear-gradient(145deg,rgba(167,139,250,.35),rgba(56,189,248,.18));
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 8px 22px -8px rgba(124,58,237,.8);filter:none}
header.topo .marca h1{font-size:18px;font-weight:800;letter-spacing:-.4px;color:#fff}
header.topo .marca h1 span{font-weight:700;background:linear-gradient(90deg,#c4b5fd,#7dd3fc);
  -webkit-background-clip:text;background-clip:text;color:transparent}
header.topo .marca p{font-size:12px;color:rgba(203,213,255,.62)}
header.topo .topo-acoes{gap:8px}

/* as peças da direita: vidro, mesma altura */
header.topo .pilula-vivo,header.topo .alerta-btn,header.topo .integ-btn,header.topo .mb-conta{
  height:42px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(8px);color:#fff;transition:background .15s,border-color .15s}
header.topo .pilula-vivo:hover,header.topo .alerta-btn:hover,header.topo .integ-btn:hover,header.topo .mb-conta:hover,
header.topo .alerta-topo.aberto .alerta-btn,header.topo .integ-topo.aberto .integ-btn,header.topo details[open]>.mb-conta{
  background:rgba(255,255,255,.11);border-color:rgba(196,181,253,.45)}
header.topo .alerta-btn{width:42px}
header.topo .mb-conta{border-radius:999px;padding:0 12px 0 5px}
header.topo .mb-avatar{width:32px;height:32px;background:linear-gradient(135deg,#a78bfa,#6366f1);box-shadow:0 4px 12px -4px rgba(124,58,237,.9)}
header.topo .mb-conta .mb-txt i{font-size:10px;letter-spacing:.1em;color:rgba(203,213,255,.6)}
header.topo .mb-conta .mb-txt b{font-size:13px;max-width:170px}
header.topo .integ-btn{padding:0 12px 0 5px}
header.topo .integ-txt b{font-size:13px}
header.topo .integ-txt i{font-size:11px;color:rgba(203,213,255,.65)}
header.topo .integ-logos img{width:30px;height:30px;border-color:#1b1747}

/* a pílula do ML ao vivo: vidro + logo do ML + ponto verde; os avisos mantêm a cor própria */
header.topo .pilula-vivo{gap:8px;padding:0 14px 0 5px;border-radius:999px;font-weight:700;font-size:13px;color:#fff;
  box-shadow:inset 3px 0 0 #ffe600, inset 0 1px 0 rgba(255,255,255,.06)}
header.topo .pilula-vivo .pv-marca{width:30px;height:30px;box-shadow:0 0 0 2px rgba(255,230,0,.35)}
header.topo .pilula-vivo .pv-ponto{background:#4ade80;box-shadow:0 0 8px #4ade80}
header.topo .pilula-vivo .pv-girar{color:rgba(203,213,255,.7)}
header.topo .pilula-vivo.falhou{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.55);color:#fef3c7}
header.topo .pilula-vivo.falhou .pv-ponto{background:#fbbf24;box-shadow:none}
header.topo .pilula-vivo.reconectar{background:rgba(220,38,38,.30);border-color:rgba(248,113,113,.7);color:#fff}
header.topo .pilula-vivo.reconectar .pv-ponto{background:#f87171;box-shadow:none}
/* o caminho das mensagens do pedido: botão forte (o cliente não achava o botãozinho branco) */
.pd-pv{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;font-weight:700;
  box-shadow:0 8px 20px -10px rgba(79,70,229,.8)}
/* os cartões do painel: o valor cabe inteiro em notebook (R$ 167.085,10 cortava em 1366 px) */
@media (max-width:1600px){ .rn-val{font-size:clamp(18px,1.55vw,26px)} .rn-kpi{padding:14px 13px 10px} .rn-rot{font-size:13px} }

/* ---------------------------------------------------------------- MENSAGENS dos compradores (11/10)
   O dono: "acharam muito difícil de achar — um balão avisando, pulando". Contador no menu que pulsa,
   balão no canto que pula e a tela com as conversas sem resposta. */
.ar-conta-msg{background:#ef4444;animation:msg-pulso 1.8s ease-out infinite}
@keyframes msg-pulso{0%{box-shadow:0 0 0 0 rgba(239,68,68,.7),0 0 0 2px #15123a}70%{box-shadow:0 0 0 9px rgba(239,68,68,0),0 0 0 2px #15123a}100%{box-shadow:0 0 0 0 rgba(239,68,68,0),0 0 0 2px #15123a}}
#balao-msg{position:fixed;right:22px;bottom:22px;z-index:900;display:flex;align-items:flex-start;gap:6px;
  animation:bm-entra .5s cubic-bezier(.2,1.4,.4,1) both, bm-pula 2.6s ease-in-out 1s infinite}
#balao-msg[hidden]{display:none}
@keyframes bm-entra{from{transform:translateY(40px) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes bm-pula{0%,62%,100%{transform:translateY(0)}70%{transform:translateY(-14px)}78%{transform:translateY(0)}85%{transform:translateY(-6px)}92%{transform:translateY(0)}}
#balao-msg .bm-abrir{display:flex;align-items:center;gap:12px;max-width:380px;padding:12px 16px 12px 12px;border:0;border-radius:18px;cursor:pointer;
  font:inherit;text-align:left;color:#fff;background:linear-gradient(135deg,#4f46e5,#7c3aed);
  box-shadow:0 18px 40px -12px rgba(79,70,229,.75),0 0 0 3px rgba(255,255,255,.9)}
#balao-msg .bm-abrir:hover{filter:brightness(1.08)}
#balao-msg .bm-ico{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18);font-size:24px}
#balao-msg .bm-ico b{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#ef4444;color:#fff;
  font-size:12px;line-height:22px;text-align:center;box-shadow:0 0 0 2px #fff;animation:msg-pulso2 1.6s ease-out infinite}
@keyframes msg-pulso2{0%{box-shadow:0 0 0 2px #fff,0 0 0 2px rgba(239,68,68,.8)}100%{box-shadow:0 0 0 2px #fff,0 0 0 12px rgba(239,68,68,0)}}
#balao-msg .bm-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
#balao-msg .bm-txt b{font-size:15px}
#balao-msg .bm-txt i{font-style:normal;font-size:12.5px;color:#e0e7ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
#balao-msg .bm-ver{flex:none;font-weight:800;font-size:13px;padding:7px 11px;border-radius:999px;background:#fff;color:#4f46e5}
#balao-msg .bm-fechar{flex:none;width:28px;height:28px;border-radius:50%;border:0;background:#1e1b4b;color:#fff;cursor:pointer;font-size:13px;box-shadow:0 6px 14px -6px #000}
@media (max-width:900px){ #balao-msg{left:12px;right:12px;bottom:84px} #balao-msg .bm-abrir{max-width:none;flex:1} #balao-msg .bm-ver{display:none} }
@media (prefers-reduced-motion:reduce){ #balao-msg,.ar-conta-msg,#balao-msg .bm-ico b{animation:none} }

.msg-tela{display:flex;flex-direction:column;gap:16px;max-width:980px}
.msg-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.msg-kick{font-size:var(--txt-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7c3aed}
.msg-cab h2{margin:4px 0 6px;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.4px}
.msg-cab p{margin:0;color:var(--tinta-3);font-size:var(--txt-md);max-width:640px}
.msg-lista{display:flex;flex-direction:column;gap:10px}
.msg-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card);border:1px solid var(--linha);border-left:4px solid #7c3aed;
  border-radius:16px;box-shadow:0 8px 22px -16px rgba(30,27,75,.5)}
.msg-av{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#ede9fe;font-size:22px}
.msg-av b{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:11.5px;line-height:20px;text-align:center;box-shadow:0 0 0 2px #fff}
.msg-meio{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.msg-topo{display:flex;justify-content:space-between;gap:10px}
.msg-topo b{font-size:var(--txt-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-topo em{flex:none;font-style:normal;font-size:var(--txt-xs);color:#7c3aed;font-weight:700}
.msg-texto{margin:0;padding:8px 12px;border-radius:4px 14px 14px 14px;background:#f5f3ff;color:var(--tinta);font-size:var(--txt-md);line-height:1.45}
.msg-info{font-size:var(--txt-xs);color:var(--tinta-3)}
.msg-resp{flex:none;padding:10px 18px;border-radius:999px;font-weight:800}
.msg-vazio{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 20px;text-align:center;background:var(--card);border:1px dashed var(--linha-forte);border-radius:18px;color:var(--tinta-3)}
.msg-vazio b{color:var(--tinta);font-size:var(--txt-lg)}
.msg-ok span[aria-hidden]{font-size:34px}
.msg-pe{margin:0;font-size:var(--txt-xs);color:var(--tinta-3)}
.msg-erro{margin:0;color:#b45309;font-size:var(--txt-sm)}
@media (max-width:640px){ .msg-item{flex-wrap:wrap} .msg-resp{width:100%} }

/* ---------------------------------------------------------------- seletor de LOJA (11/10)
   Uma escolha por vez (Todas · Mercado Livre · Shopee): bolinha, quadradinho com a marca e o NOME.
   A escolhida acende na cor da loja; as outras ficam claras, com a marca em cor (não "apagada"). */
.cb-chips{display:inline-flex;align-items:center;gap:3px;padding:3px;border-radius:999px;background:#eef0f8;border:1px solid var(--linha)}
.cb-chips .cb-chip{--cb:#4f46e5;display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 8px;border:0;border-radius:999px;
  background:transparent;color:var(--tinta-2);font:inherit;font-size:13px;font-weight:650;line-height:1;cursor:pointer;
  box-shadow:none;transform:none;transition:background .15s,color .15s,box-shadow .15s}
.cb-chips .cb-chip.cb-ml{--cb:#e5c800} .cb-chips .cb-chip.cb-sh{--cb:#ee4d2d}
.cb-chips .cb-chip::before{content:'';flex:none;width:12px;height:12px;margin:0;box-sizing:border-box;border-radius:50%;
  border:2px solid #b4b9d6;background:transparent;opacity:1}
.cb-chips .cb-chip:hover:not(.ativo){background:rgba(255,255,255,.75);color:var(--tinta)}
.cb-chips .cb-chip.ativo{background:#fff;color:var(--tinta);font-weight:800;
  box-shadow:0 0 0 2px var(--cb),0 6px 16px -8px var(--cb)}
.cb-chips .cb-chip.ativo::before{border-color:var(--cb);background:radial-gradient(circle,var(--cb) 0 3px,transparent 3.6px)}
.cb-chips .cb-chip.cb-todos.ativo{background:#4f46e5;color:#fff;box-shadow:0 6px 16px -8px #4f46e5}
.cb-chips .cb-chip.cb-todos.ativo::before{border-color:#fff;background:radial-gradient(circle,#fff 0 3px,transparent 3.6px)}
.cb-chips .cb-chip img{display:none}
.cb-marca{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:11px;font-weight:800;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background:#6366f1}
.cb-m-todas{background:linear-gradient(135deg,#818cf8,#4f46e5)}
.cb-m-todas::after{content:'';width:12px;height:12px;background:
  linear-gradient(#fff 0 0) 0 0/5px 5px no-repeat,linear-gradient(#fff 0 0) 7px 0/5px 5px no-repeat,
  linear-gradient(#fff 0 0) 0 7px/5px 5px no-repeat,linear-gradient(#fff 0 0) 7px 7px/5px 5px no-repeat}
.cb-m-ml{box-sizing:border-box;padding:4px 0;background:url(img/logo-mercado-livre.jpg) -18.7px -2.8px / 59.4px 39.6px no-repeat content-box content-box,#ffe600}
.cb-m-sh{background-color:#ee4d2d;background-image:url(img/logo-shopee.jpg);background-size:66px 34.6px;background-position:-1.6px -6.3px;background-repeat:no-repeat}
.cb-chips .cb-chip i{font-style:normal;font-weight:600;font-size:11px;opacity:.7}
.cb-chips .cb-nome{display:inline}
@media (min-width:761px){
  .barra-filtros .cb-chips{padding:2px;gap:2px}
  .barra-filtros .cb-chips .cb-chip{padding:3px 10px 3px 6px;gap:6px;font-size:12.5px}
  .barra-filtros .cb-chips .cb-chip::before{display:block;width:11px;height:11px}
  .barra-filtros .cb-marca{width:20px;height:20px;border-radius:6px}
}
/* notebook pequeno (até 1300 px): "Ontem" e o "Mês…" ficam só no menu Período, que já tem os dois;
   se um deles estiver escolhido, o menu Período mostra o nome (o ícone sozinho não diria qual é) */
@media (min-width:761px) and (max-width:1300px){
  .barra-filtros .periodo-rapido [data-rapido="ontem"],.barra-filtros .periodo-rapido .mf-mes{display:none}
  .barra-filtros:has(.periodo-rapido [data-rapido="ontem"].ativa) #m-periodo.pr-coberto .mb-txt,
  .barra-filtros:has(.periodo-rapido .mf-mes.ativa) #m-periodo.pr-coberto .mb-txt{display:flex}
}

/* ---------------------------------------------------------------- botões do filtro com NOME (11/10)
   O dono: "ícone sozinho ficou horrível — melhore os ícones e [diga] pra que serve". Cada botão: um
   quadradinho colorido com o ícone, o NOME em cima (PERÍODO, TIPO DE ENVIO, PUBLICIDADE…) e o valor. */
#m-periodo{--fc:#7c3aed} #m-canal{--fc:#0284c7} #m-situacao{--fc:#d97706} #m-ordem{--fc:#475569} #m-analise{--fc:#059669} #chip-publi{--fc:#db2777}
@media (min-width:761px){
  .barra-filtros .menu-botao{padding:3px 10px 3px 4px;gap:8px;min-height:38px;border-radius:12px}
  .barra-filtros .menu-botao .mb-ico{display:inline-grid !important;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;
    background:color-mix(in srgb,var(--fc,#4f46e5) 13%,#fff);color:var(--fc,#4f46e5);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc,#4f46e5) 22%,transparent)}
  .barra-filtros .menu-botao .mb-ico .ic{width:16px;height:16px}
  .barra-filtros .menu-botao .mb-txt,.barra-filtros #m-periodo.pr-coberto .mb-txt,.barra-filtros .bf-publi .mb-txt{display:flex !important;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.1}
  .barra-filtros .menu-botao .mb-txt i,.barra-filtros #m-periodo .menu-botao .mb-txt i,.barra-filtros .bf-publi .mb-txt i{display:block !important;
    font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
  .barra-filtros .menu-botao .mb-txt b,.barra-filtros .bf-publi .mb-txt b{display:block;font-size:12.5px;font-weight:750;color:var(--tinta);max-width:120px}
  /* com um atalho marcado, o Período não repete o nome: vira "Mais datas" (abre meses e datas à mão) */
  .barra-filtros #m-periodo.pr-coberto .mb-txt b{display:none}
  .barra-filtros #m-periodo.pr-coberto .mb-txt::after{content:'Mais datas';font-size:12.5px;font-weight:750;color:var(--tinta)}
  .barra-filtros .bf-publi[aria-pressed="false"] .mb-txt b{color:var(--neg)}
  .barra-filtros .menu-botao:hover{border-color:var(--fc,#4f46e5)}
  .barra-filtros details[open]>.menu-botao{border-color:var(--fc,#4f46e5);box-shadow:0 0 0 3px color-mix(in srgb,var(--fc,#4f46e5) 18%,transparent)}
}

/* ---------------------------------------------------------------- topo: só quem está logado (11/10) */
.topo-quem{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 14px 0 5px;border-radius:999px;cursor:pointer;font:inherit;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:background .15s,border-color .15s}
.topo-quem:hover{background:rgba(255,255,255,.12);border-color:rgba(196,181,253,.5)}
.topo-quem:focus-visible{outline:2px solid #fff;outline-offset:2px}
.topo-quem .mb-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(135deg,#a78bfa,#6366f1);box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.mb-avatar img,.lat-avatar img,.pf-foto img{width:100%;height:100%;object-fit:cover;display:block}
.lat-avatar{overflow:hidden}
.tq-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.tq-txt b{font-size:14px;font-weight:700;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){ .tq-txt{display:none} .topo-quem{padding:0 5px} }

/* ---------------------------------------------------------------- tela de PERFIL (11/10) */
.pf-tela{display:flex;flex-direction:column;gap:18px;max-width:1080px}
.pf-cartao{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:24px 26px;border-radius:22px;color:#fff;
  background:radial-gradient(70% 140% at 0% 0%,rgba(124,58,237,.45),transparent 60%),radial-gradient(50% 120% at 100% 0%,rgba(56,189,248,.22),transparent 60%),linear-gradient(110deg,#191541,#151236 60%,#1c1650);
  box-shadow:0 22px 50px -26px rgba(30,27,75,.9);position:relative;overflow:hidden}
.pf-cartao::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#a78bfa,#38bdf8 35%,#34d399 65%,#fbbf24)}
.pf-foto{position:relative;flex:none;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:32px;font-weight:800;
  background:linear-gradient(135deg,#a78bfa,#6366f1);box-shadow:0 0 0 4px rgba(255,255,255,.18),0 12px 30px -10px #6366f1}
.pf-foto>img{border-radius:50%}
.pf-trocar{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#fff;color:#4f46e5;box-shadow:0 6px 16px -6px #000}
.pf-trocar:hover{transform:scale(1.06)}
.pf-quem{flex:1;min-width:220px;display:flex;flex-direction:column;gap:4px}
.pf-kick{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a5b4fc}
.pf-nome{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pf-nome h2{margin:0;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.5px;color:#fff}
.pf-editar{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#e0e7ff;border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.pf-editar:hover{background:rgba(255,255,255,.16)}
.pf-email{margin:0;color:#c7d2fe;font-size:14px}
.pf-aviso{margin:6px 0 0;padding:8px 12px;border-radius:10px;background:rgba(251,191,36,.15);color:#fde68a;font-size:13px}
.pf-acoes{display:flex;gap:10px;flex-wrap:wrap}
.pf-acoes .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.pf-acoes .pf-sair{background:rgba(239,68,68,.16);border-color:rgba(248,113,113,.5);color:#fecaca}
.pf-dica{margin:0;color:var(--tinta-3);font-size:var(--txt-md)}
.pf-tela .menu-cx-conta{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;align-items:start;
  width:auto;max-height:none;overflow:visible;padding:0;margin:0;background:none;border:0;box-shadow:none;transform:none;opacity:1;visibility:visible}
.pf-grupo{background:var(--card);border:1px solid var(--linha);border-radius:18px;padding:14px 12px 10px;box-shadow:0 10px 26px -20px rgba(30,27,75,.6)}
.pf-grupo .menu-titulo{padding:2px 8px 8px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#7c3aed;text-transform:uppercase}
.pf-grupo .menu-itens{display:flex;flex-direction:column;gap:2px}
.pf-grupo .menu-item{border-radius:12px;padding:10px}
.pf-grupo .menu-item:hover{background:#f5f3ff}
.pf-tela .menu-pe{grid-column:1 / -1;display:none}
#lat-perfil.ativo{background:linear-gradient(90deg,rgba(167,139,250,.30),rgba(167,139,250,.08));border-color:rgba(167,139,250,.55)}

/* ---------------------------------------------------------------- menu lateral: rolagem que se vê (11/10)
   "nem parece que tem scroll": barra clara e uma seta "mais abaixo", pulsando, enquanto houver itens escondidos */
@media (min-width:901px){
  .lat-rolo{scrollbar-width:thin;scrollbar-color:rgba(196,181,253,.55) rgba(255,255,255,.06)}
  .lat-rolo::-webkit-scrollbar{width:8px}
  .lat-rolo::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:8px}
  .lat-rolo::-webkit-scrollbar-thumb{background:rgba(196,181,253,.55);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
  .lat-rolo::-webkit-scrollbar-thumb:hover{background:rgba(196,181,253,.8);background-clip:padding-box}
  .lat-mais-baixo{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;margin:-34px -12px 6px;height:34px;padding-top:6px;border:0;cursor:pointer;
    font:inherit;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c4b5fd;
    background:linear-gradient(180deg,rgba(19,17,47,0),#13112f 70%)}
  .lat-mais-baixo[hidden]{display:none}
  .lat-mais-baixo svg{animation:lat-seta 1.4s ease-in-out infinite}
  .lat-mais-baixo:hover{color:#fff}
  @keyframes lat-seta{0%,100%{transform:translateY(-2px);opacity:.7}50%{transform:translateY(3px);opacity:1}}
  .menu-recolhido .lat-mais-baixo span{display:none}
}
@media (max-width:900px){ .lat-mais-baixo{display:none} }
@media (prefers-reduced-motion:reduce){ .lat-mais-baixo svg{animation:none} }

/* ---------------------------------------------------------------- a barra numa linha, com os nomes (11/10)
   Os atalhos de período viram UM seletor compacto (um clique, bolinha pequena); o "Mês…" sai da barra —
   os meses moram no botão Período, que mostra o mês escolhido. Botões com nome mais justos. */
@media (min-width:761px){
  .barra-filtros .periodo-rapido{gap:2px;padding:2px;border-radius:999px;background:#eef0f8;border:1px solid var(--linha)}
  .barra-filtros .periodo-rapido .mf-pil{border:0;background:transparent;padding:5px 10px;font-size:12.5px;border-radius:999px;box-shadow:none}
  .barra-filtros .periodo-rapido .mf-pil:hover:not(.ativa){background:rgba(255,255,255,.8)}
  .barra-filtros .periodo-rapido .mf-pil.ativa{background:#4f46e5;color:#fff;box-shadow:0 6px 14px -8px #4f46e5}
  .barra-filtros .periodo-rapido .mf-pil::before{width:10px;height:10px;margin-right:5px}
  .barra-filtros .periodo-rapido .mf-mes{display:none}
  .barra-filtros .menu-botao{padding:3px 9px 3px 4px;gap:7px}
  .barra-filtros .menu-botao .mb-txt i,.barra-filtros #m-periodo .menu-botao .mb-txt i,.barra-filtros .bf-publi .mb-txt i{letter-spacing:.05em;font-size:9px}
  .barra-filtros .menu-botao .mb-txt b,.barra-filtros .bf-publi .mb-txt b{max-width:100px}
  .barra-filtros .bf-publi-chave{width:30px;height:17px}
}
@media (min-width:761px) and (max-width:1300px){
  .barra-filtros .periodo-rapido [data-rapido="ontem"]{display:inline-flex}
  .barra-filtros .periodo-rapido .mf-pil{padding:5px 8px}
}
@media (min-width:761px) and (max-width:1500px){
  .barra-filtros .periodo-rapido [data-rapido="ontem"]{display:none !important}
  .barra-filtros:has(.periodo-rapido [data-rapido="ontem"].ativa) #m-periodo.pr-coberto .mb-txt b{display:block}
  .barra-filtros:has(.periodo-rapido [data-rapido="ontem"].ativa) #m-periodo.pr-coberto .mb-txt::after{content:none}
  .barra-filtros .periodo-rapido .mf-pil{padding:5px 8px}
  .barra-filtros .cb-chips .cb-chip{padding:3px 8px 3px 5px;gap:5px}
  .barra-filtros .menu-botao .mb-txt b,.barra-filtros .bf-publi .mb-txt b{max-width:92px}
  .barra-filtros{gap:5px}
}

/* ---------------------------------------------------------------- de qual loja são os números (11/10)
   Uma loja só: o selo "Vendo <logo> Mercado Livre" com um brilho que passa e o ponto "ao vivo".
   Várias: a escolhida "salta" ao ser marcada. */
.cb-vendo{--cb:#e5c800;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 10px;border-radius:999px;
  background:#fff;border:1px solid var(--linha);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb) 55%,transparent),0 6px 16px -10px var(--cb);font-size:13px}
.cb-vendo.cb-sh{--cb:#ee4d2d} .cb-vendo.cb-outro{--cb:#4f46e5}
.cb-vendo em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.cb-vendo b{color:var(--tinta);font-weight:800}
.cb-vendo .cb-marca{animation:cb-respira 2.6s ease-in-out infinite}
.cb-vendo::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  animation:cb-brilho 3.2s ease-in-out infinite}
.cb-vivo{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:cb-pulso 1.8s ease-out infinite}
@keyframes cb-brilho{0%,55%{left:-60%}100%{left:130%}}
@keyframes cb-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes cb-pulso{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
.cb-chips .cb-chip.ativo{animation:cb-salta .45s cubic-bezier(.3,1.6,.5,1)}
.cb-chips .cb-chip.ativo .cb-marca{animation:cb-respira 2.6s ease-in-out .5s infinite}
@keyframes cb-salta{0%{transform:scale(.88)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .cb-vendo::after,.cb-vendo .cb-marca,.cb-vivo,.cb-chips .cb-chip.ativo,.cb-chips .cb-chip.ativo .cb-marca{animation:none} }

/* ---------------------------------------------------------------- Perfil em BLOCOS (11/10, v2)
   Cada grupo ocupa a largura toda: cabeçalho com ícone e "para que serve"; os itens em blocos lado a lado,
   cada um com o seu ícone e cor (--ic). */
.pf-tela{max-width:none}
.pf-tela .menu-cx-conta{display:flex;flex-direction:column;gap:18px}
.pf-grupo{padding:18px 18px 18px;border-radius:20px}
.pf-grupo .menu-titulo{display:flex;align-items:center;gap:12px;padding:0 2px 14px;text-transform:none;letter-spacing:0;color:var(--tinta)}
.pf-grupo .menu-titulo>span:last-child{display:flex;flex-direction:column;gap:2px}
.pf-grupo .menu-titulo b{font-size:17px;font-weight:800;letter-spacing:-.2px}
.pf-grupo .menu-titulo i{font-style:normal;font-size:13px;font-weight:500;color:var(--tinta-3)}
.pf-g-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#818cf8,#4f46e5);box-shadow:0 8px 18px -10px #4f46e5}
.pf-grupo .menu-itens{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pf-grupo .menu-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:132px;padding:16px 16px 14px;
  border:1px solid var(--linha);border-radius:16px;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--ic,#4f46e5) 4%,#fff));
  text-align:left;transition:transform .15s,box-shadow .15s,border-color .15s}
.pf-grupo .menu-item[hidden]{display:none}
.pf-grupo .menu-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ic,#4f46e5) 45%,transparent);
  box-shadow:0 14px 28px -18px color-mix(in srgb,var(--ic,#4f46e5) 80%,transparent);background:#fff}
.pf-ico{display:grid !important;place-items:center;width:44px;height:44px;border-radius:13px;color:var(--ic,#4f46e5);
  background:color-mix(in srgb,var(--ic,#4f46e5) 13%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic,#4f46e5) 22%,transparent)}
.pf-ico::before,.pf-ico::after{content:none !important}
.pf-grupo .menu-item>span:not(.pf-ico):not(.pf-seta){display:flex;flex-direction:column;gap:4px}
.pf-grupo .menu-item b{font-size:15px;font-weight:800;color:var(--tinta)}
.pf-grupo .menu-item i{font-style:normal;font-size:13px;line-height:1.45;color:var(--tinta-3)}
.pf-seta{position:absolute;top:16px;right:16px;font-weight:800;color:var(--ic,#4f46e5);opacity:0;transform:translateX(-4px);transition:.15s}
.pf-grupo .menu-item:hover .pf-seta{opacity:1;transform:none}
@media (max-width:640px){ .pf-grupo .menu-itens{grid-template-columns:1fr} .pf-grupo .menu-item{min-height:0} }
/* Perfil v2 — os cartões na largura toda (os blocos se espalham) e a cor de cada ícone */
.pf-tela .menu-cx-conta{align-items:stretch;width:100%}
.pf-tela .pf-grupo{width:100%;box-sizing:border-box}
.pf-grupo .menu-item .pf-ico,.menu-cx-conta .pf-grupo .menu-item .mi-ico.pf-ico{color:var(--ic,#4f46e5) !important;
  background:color-mix(in srgb,var(--ic,#4f46e5) 13%,#fff) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic,#4f46e5) 25%,transparent) !important}
.pf-grupo .menu-item .pf-ico svg{width:22px;height:22px}
.pf-dica{margin-top:4px}
.pf-tela{gap:22px}
/* topo (11/10, dono: "não precisa nome no topo; centralize melhor os outros menus"): à direita só a foto;
   Ao vivo · sininho · Integrações centralizados no espaço entre o logo e a foto (espaçadores dos dois lados) */
header.topo .topo-acoes{flex:1 1 auto;justify-content:flex-start}
header.topo .topo-acoes::before,header.topo .topo-acoes::after{content:'';flex:1 1 0;order:0}
header.topo .topo-acoes>*{order:1}
header.topo .topo-acoes::after{order:2}
header.topo .topo-quem{order:3;width:46px;height:46px;padding:0;justify-content:center;border-radius:50%}
header.topo .topo-quem .tq-txt{display:none}
header.topo .topo-quem .mb-avatar{width:38px;height:38px;font-size:14px}

/* ---------------------------------------------------------------- menu lateral: rodapé fixo e títulos com vida (11/10) */
@media (min-width:901px){
  .lat-pe{display:flex;flex-direction:column;gap:8px;margin:6px -12px -12px;padding:12px;
    background:linear-gradient(180deg,#241e5c 0%,#1b1748 100%);border-top:1px solid rgba(167,139,250,.28);box-shadow:0 -12px 26px -16px rgba(0,0,0,.7)}
  .lat-pe .lat-perfil{margin-top:0;position:relative;background:rgba(255,255,255,.07);border-color:rgba(167,139,250,.35)}
  .lat-pe .lat-perfil:hover{background:rgba(255,255,255,.13);border-color:rgba(196,181,253,.6)}
  .lat-pe .lat-perfil::after{content:'';flex:none;margin-left:auto;width:8px;height:8px;border-right:2px solid rgba(199,210,254,.7);border-top:2px solid rgba(199,210,254,.7);
    transform:rotate(45deg);transition:transform .15s,border-color .15s}
  .lat-pe .lat-perfil:hover::after{transform:translateX(3px) rotate(45deg);border-color:#fff}
  .lat-pe .lateral-recolher{margin-top:0}
  .menu-recolhido .lat-pe{padding:10px}
  .menu-recolhido .lat-pe .lat-perfil::after{display:none}

  .lateral .lat-tit{color:color-mix(in srgb,var(--g,#a78bfa) 55%,#ffffff);font-size:11px;letter-spacing:.14em;
    text-shadow:0 0 14px color-mix(in srgb,var(--g,#a78bfa) 45%,transparent)}
  .lateral .lat-tit::before{width:9px;height:9px;box-shadow:0 0 12px var(--g),0 0 0 3px color-mix(in srgb,var(--g) 22%,transparent)}
  .lateral .lat-tit::after{height:2px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--g,#a78bfa) 75%,transparent),color-mix(in srgb,var(--g,#a78bfa) 15%,transparent) 70%,transparent)}
}
@media (max-width:900px){ .lat-pe{display:contents} }

/* o selo "Vendo" ao lado do Boa noite (11/10) */
.rn-ola-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rn-ola-linha .cb-vendo{padding:3px 12px 3px 8px;font-size:12.5px}
.cb-marcas{display:inline-flex}
.cb-marcas .cb-marca+.cb-marca{margin-left:-6px;box-shadow:0 0 0 2px #fff}

/* ---------------------------------------------------------------- Perfil v3 (11/10): dados, lojas, segurança, suporte, admin */
.pf-grupo{--gc:#4f46e5}
.pf-g-cab{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pf-g-cab>span:last-child{display:flex;flex-direction:column;gap:2px}
.pf-g-cab b{font-size:17px;font-weight:800;color:var(--tinta);letter-spacing:-.2px}
.pf-g-cab i{font-style:normal;font-size:13px;color:var(--tinta-3)}
.pf-grupo .pf-g-ico{background:linear-gradient(135deg,color-mix(in srgb,var(--gc) 70%,#fff),var(--gc));box-shadow:0 8px 18px -10px var(--gc)}
.pf-blocos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pf-bloco{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:128px;padding:16px;border:1px solid var(--linha);border-radius:16px;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--ic,#4f46e5) 4%,#fff));text-align:left;font:inherit;color:inherit;cursor:pointer;text-decoration:none;
  transition:transform .15s,box-shadow .15s,border-color .15s}
.pf-bloco[hidden]{display:none}
.pf-bloco:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ic,#4f46e5) 45%,transparent);box-shadow:0 14px 28px -18px color-mix(in srgb,var(--ic,#4f46e5) 80%,transparent);background:#fff}
.pf-bloco .pf-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;color:var(--ic,#4f46e5);
  background:color-mix(in srgb,var(--ic,#4f46e5) 13%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic,#4f46e5) 25%,transparent)}
.pf-b-txt{display:flex;flex-direction:column;gap:4px}
.pf-b-txt b{font-size:15px;font-weight:800;color:var(--tinta)}
.pf-b-txt i{font-style:normal;font-size:13px;line-height:1.45;color:var(--tinta-3)}
.pf-bloco .pf-seta{position:absolute;top:16px;right:16px;font-weight:800;color:var(--ic,#4f46e5);opacity:0;transform:translateX(-4px);transition:.15s}
.pf-bloco:hover .pf-seta{opacity:1;transform:none}
.pf-b-sair .pf-b-txt b{color:#b91c1c}
.pf-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px 16px}
.pf-form label{display:flex;flex-direction:column;gap:6px}
.pf-form label span{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3)}
.pf-form label em{font-style:normal;text-transform:none;letter-spacing:0;color:#dc2626;font-weight:700;margin-left:4px}
.pf-form input{height:44px;padding:0 14px;border:1px solid var(--linha-forte);border-radius:12px;font:inherit;font-size:15px;color:var(--tinta);background:#fff}
.pf-form input:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.pf-form input:disabled{background:#f4f5fb;color:var(--tinta-3)}
.pf-form-pe{grid-column:1 / -1;display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.pf-form-msg{margin-right:auto;font-size:13px;color:#b45309;font-weight:600}
.pf-form-msg.ruim{color:#dc2626}
.pf-lojas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:14px}
.pf-loja{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--linha);border-radius:16px;background:#fff}
.pf-loja.breve{opacity:.6}
.pf-loja .mk-logo,.pf-loja img{width:40px;height:40px;border-radius:12px;flex:none;object-fit:cover}
.pf-loja>span:last-child{display:flex;flex-direction:column;gap:3px}
.pf-loja b{font-size:15px}
.pf-loja i{font-style:normal;font-size:12.5px;color:var(--tinta-3);display:flex;align-items:center;gap:6px}
.pf-gerenciar{border-radius:999px}
.pf-selos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pf-selo{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;color:#e0e7ff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.pf-selo.ok{color:#bbf7d0;border-color:rgba(74,222,128,.45);background:rgba(34,197,94,.14)}
.pf-selo.venceu{color:#fecaca;border-color:rgba(248,113,113,.5);background:rgba(239,68,68,.16)}
.pf-selo-lojas img,.pf-selo-lojas .mk-logo{width:20px;height:20px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #1b1747}
.pf-selo-lojas img+img{margin-left:-6px}
.pf-quem h2{margin:2px 0 2px;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.5px;color:#fff}
.pf-admin{border-style:dashed}
.pf-guardados{display:none !important}
.dlg-cadastro{max-width:560px;width:calc(100% - 32px);border:0;border-radius:22px;padding:24px;box-shadow:0 30px 80px -20px rgba(15,23,42,.6)}
.dlg-cadastro::backdrop{background:rgba(15,13,38,.6);backdrop-filter:blur(3px)}
.pf-form-dlg{grid-template-columns:1fr}
.pfd-cab{display:flex;gap:14px;align-items:flex-start}
.pfd-cab h3{margin:0 0 4px;font-size:20px}
.pfd-cab p{margin:0;color:var(--tinta-3);font-size:14px}
.dlg-cadastro .pf-g-ico{background:linear-gradient(135deg,#818cf8,#4f46e5)}
/* o "Limpar" do filtro só com o ✕ em notebook (não empurra a barra para outra linha) */
@media (min-width:761px) and (max-width:1500px){ .barra-filtros .bf-zerar{font-size:0;padding:6px 10px} .barra-filtros .bf-zerar::before{content:'✕';font-size:13px;font-weight:800} }

/* ---------------------------------------------------------------- topo v3 (11/10)
   Esquerda: logo + "Radar". Centro: "Lucro e Gestão Ecommerce". Direita: sininho, Integrações e a foto.
   O "Ao vivo" mora no selo "Vendo", ao lado do Boa noite (a pílula fica escondida, só como fonte do estado). */
header.topo .pilula-vivo{display:none !important}
header.topo .topo-acoes::before{content:none}
header.topo .topo-acoes{justify-content:flex-end}
header.topo .marca h1{font-size:22px;letter-spacing:-.5px}
.topo-slogan{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;
  font-size:15px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#e0e7ff}
.topo-slogan b{font-weight:800;background:linear-gradient(90deg,#a78bfa,#38bdf8,#34d399);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:1100px){ .topo-slogan{display:none} }
/* 3 lojas ou mais no seletor do topo (24/10: várias contas do ML e lojas da Shopee): o seletor cresce e cobria o
   slogan — ele sai; com 4 ou mais, cada loja fica só com a marca e o nome curto */
header.topo:has(.cb-chips > .cb-chip:nth-child(4)) .topo-slogan{display:none}
header.topo .topo-lojas .cb-chips:has(> .cb-chip:nth-child(5)) .cb-chip i{max-width:48px}
/* o selo Vendo + ao vivo: um botão (clique atualiza) */
button.cb-vendo{font:inherit;cursor:pointer}
.cb-vivo-txt{font-size:12px;font-weight:600;color:var(--tinta-3)}
.cb-vivo-txt:empty{display:none}
.cb-girar{flex:none;color:var(--tinta-3);opacity:.7;transition:transform .3s,opacity .15s}
.cb-vendo:hover .cb-girar{opacity:1;transform:rotate(90deg)}
.cb-vendo.sem-vivo .cb-girar,.cb-vendo.sem-vivo .cb-vivo{display:none}
.cb-vendo.lendo .cb-girar{animation:pv-gira .9s linear infinite;opacity:1}
.cb-vendo.falhou .cb-vivo{background:#f59e0b;animation:none}
.cb-vendo.falhou .cb-vivo-txt{color:#b45309}
.cb-vendo.reconectar{box-shadow:0 0 0 2px #ef4444}
.cb-vendo.reconectar .cb-vivo{background:#ef4444;animation:none}
.cb-vendo.reconectar .cb-vivo-txt{color:#dc2626;font-weight:800}
header.topo .topo-acoes::after{content:none}

.pf-breve{margin:-2px 0 14px;font-size:13px;color:var(--tinta-3)} .pf-breve b{color:var(--tinta-2)}

/* varredura 11/10: "Todo o período" saía cortado com … */
@media (min-width:761px){ .barra-filtros #m-periodo .mb-txt b{max-width:132px !important} }

/* varredura 11/10: Mapa de vendas — "470 un" quebrava em duas linhas e o nome da cidade sumia */
.gr-tabela .gr-linha>span{flex:none;white-space:nowrap}
.gr-tabela .gr-barra{flex:0 1 46px;min-width:24px}
.gr-tabela .gr-cidade{flex:1 1 auto;min-width:0;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* varredura 11/10: Resumo mensal — em 1366 px a última coluna ficava escondida à direita */
@media (max-width:1500px){
  .ms-tabela{font-size:13px}
  .ms-tabela th{padding:9px 7px;font-size:11px;letter-spacing:.02em}
  .ms-tabela td{padding:8px 7px}
}
/* varredura 11/10: no celular o Editor em massa voltava às 8 colunas do notebook (a regra de notebook vinha depois) */
@media (max-width:900px){ .edm-linha{grid-template-columns:1fr 1fr;gap:6px 10px;padding:10px 12px} }
/* varredura 11/10: o selo "Vendo" quebrava em várias linhas no celular — lá fica a loja e o ponto verde */
@media (max-width:760px){ .rn-ola-linha .cb-vendo b{white-space:nowrap} .rn-ola-linha .cb-vivo-txt{display:none} .rn-ola-linha .cb-vendo{padding:4px 10px 4px 8px} }
/* varredura 11/10 (celular): Vendidos — o nome do produto invadia a coluna do lucro (texto encavalado) */
@media (max-width:900px){
  .pd-item summary .pd-prodnome{min-width:0;overflow:hidden}
  .pd-item summary .pd-prodnome b,.pd-item summary .pd-prodnome em{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pd-item summary .pd-lucro{text-align:right;white-space:nowrap}
}
/* varredura 11/10 (celular): Produtos — "VENDIDOS" grudava em "LUCRO ANTES DO ADS" (3 linhas) e "274 dias" quebrava */
@media (max-width:900px){
  .pt-linha>summary{column-gap:14px}
  .pt-linha>summary>[data-rot]::before{white-space:nowrap}
  .pt-linha>summary>.pt-lucro::before{content:'Lucro'}
  .pt-linha>summary>[data-rot]{white-space:nowrap}
}

/* ---------------------------------------------------------------- "Entender este preço" (11/10) */
.ex-link{display:inline-block;margin-top:4px;padding:2px 8px;border:1px solid #c7d2fe;border-radius:999px;background:#eef2ff;color:#4338ca;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.ex-link:hover{background:#4f46e5;color:#fff;border-color:#4f46e5}
.ex-link::before{content:'?';display:inline-grid;place-items:center;width:14px;height:14px;margin-right:5px;border-radius:50%;background:currentColor;color:#fff;font-size:10px;font-weight:800;vertical-align:-2px}
.ex-link:hover::before{color:#4f46e5;background:#fff}
.ex-link-b{margin:4px 0 10px}
.ex-dlg{max-width:720px;width:calc(100% - 32px);border:0;border-radius:22px;padding:22px 24px;box-shadow:0 30px 80px -20px rgba(15,23,42,.6)}
.ex-dlg::backdrop{background:rgba(15,13,38,.55);backdrop-filter:blur(2px)}
.ex-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.ex-kick{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7c3aed}
.ex-cab h3{margin:4px 0 0;font-size:18px;line-height:1.3}
.ex-x{border:0;background:#f1f2f8;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;flex:none}
.ex-porque{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:#f5f3ff;border:1px solid #ddd6fe}
.ex-porque p{margin:0;font-size:14px;line-height:1.5;color:var(--tinta)}
.ex-tab{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;font-variant-numeric:tabular-nums}
.ex-tab th{text-align:right;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);padding:6px 10px;border-bottom:1px solid var(--linha)}
.ex-tab td{padding:7px 10px;border-bottom:1px solid var(--linha);text-align:right;white-space:nowrap}
.ex-tab td:first-child{text-align:left;color:var(--tinta-2);white-space:normal}
.ex-tab tr.ex-preco td{font-weight:800;color:var(--tinta)}
.ex-tab tr.ex-frete td{background:#fff7ed}
.ex-tab tr.ex-sobra td{font-weight:800;font-size:15px;border-bottom:0;background:#f8fafc}
.ex-tab tr.ex-sobra td.pos{color:var(--lucro,#1d4ed8)} .ex-tab tr.ex-sobra td.neg{color:var(--neg)}
.ex-tab small{display:block;font-size:11.5px;font-weight:600;color:var(--tinta-3)}
.ex-fazer{padding:12px 14px;border-radius:14px;background:#ecfdf5;border:1px solid #a7f3d0}
.ex-fazer b{font-size:14px}
.ex-fazer ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.45}
.ex-pe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.ex-pe span{flex:1;min-width:200px;font-size:12px;color:var(--tinta-3)}
@media (max-width:560px){ .ex-tab{font-size:12.5px} .ex-tab td,.ex-tab th{padding:6px 5px} }

/* ---------------------------------------------------------------- menu de 8 grupos (11/10): a cor de cada um */
@media (min-width:901px){
  .lat-visao,.lateral .abas-radar{--g:#a78bfa}
  .lat-financeiro,.lat-financeiro ~ .ar-aba{--g:#2dd4bf}
  .lat-vendas,.lat-vendas ~ .ar-aba{--g:#38bdf8}
  .lat-atendimento,.lat-atendimento ~ .ar-aba{--g:#f472b6}
  .lat-anuncios,.lat-anuncios ~ .ar-aba{--g:#fbbf24}
  .lat-mercado,.lat-mercado ~ .ar-aba{--g:#60a5fa}
  .lat-estoque,.lat-estoque ~ .ar-aba{--g:#34d399}
  .lat-conta{order:1;flex:none;min-width:20px;height:18px;padding:0 6px;border-radius:999px;background:#ef4444;color:#fff;
    font-size:11px;font-weight:800;letter-spacing:0;line-height:18px;text-align:center;text-shadow:none;animation:msg-pulso 1.8s ease-out infinite}
  .lateral .lat-tit::after{order:2}
}
/* a barra de baixo do celular: Resultado · A fazer · Mensagens · Vendidos · Mais (Produtos foi para o "Mais") */
@media (max-width:900px){
  .lateral .abas-radar .ar-aba[data-aba="mensagens"]:not(.ativa){display:flex !important}
  .lateral .abas-radar .ar-aba[data-aba="produtos"]:not(.ativa){display:none !important}
}
/* Visitas e conversão: os cartões do atendimento levam à tela de resolver */
.vi-kpi.vi-ir{cursor:pointer;transition:transform .15s,box-shadow .15s}
.vi-kpi.vi-ir:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(30,27,75,.5)}
.rc-rep-topo{margin-bottom:16px}

/* ---------------------------------------------------------------- painel v2 (11/10): Hoje · Saúde · Primeiros passos */
.rn-hoje{display:grid;grid-template-columns:minmax(150px,auto) repeat(3,minmax(0,1fr));gap:14px;align-items:center;padding:14px 18px;border-radius:18px;
  background:linear-gradient(110deg,#191541,#1f1a55 60%,#22205e);color:#fff;box-shadow:0 14px 32px -20px rgba(30,27,75,.8)}
.hj-tit{display:flex;flex-direction:column;gap:2px}
.hj-tit b{font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px}
.hj-tit b::before{content:'';width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:cb-pulso 1.8s ease-out infinite}
.hj-tit span{font-size:12px;color:#c7d2fe}
.hj-it{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:1px solid rgba(255,255,255,.14)}
.hj-it span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a5b4fc}
.hj-it b{font-size:22px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.hj-it b.rn-pos{color:#93c5fd} .hj-it b.rn-neg{color:#fca5a5}
.hj-var{font-style:normal;font-size:12px;font-weight:700;color:#c7d2fe}
.hj-var.sobe{color:#86efac} .hj-var.desce{color:#fca5a5}
.hj-var i{font-style:normal;font-weight:500;color:#a5b4fc}
.rn-meio-grade>.rn-canais{grid-row:1}
.rn-meio-grade{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto auto}
.rn-meio-grade>.rn-evolucao{grid-row:1 / 3}
.rn-saude{gap:6px}
.sd-l{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--linha)}
.sd-l:last-of-type{border-bottom:0}
.sd-ico{font-size:16px;text-align:center}
.sd-rot{font-size:13.5px;color:var(--tinta-2)}
.sd-l b{font-size:15px;font-variant-numeric:tabular-nums}
.sd-l.ok b{color:#16a34a} .sd-l.ruim b{color:var(--neg)} .sd-l.atencao b{color:#d97706}
.sd-ir{border:0;background:#eef2ff;color:#4338ca;border-radius:999px;padding:4px 10px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.sd-ir:hover{background:#4f46e5;color:#fff}
.rn-passos{padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,#fffbeb,#fff);border:1px solid #fde68a;box-shadow:0 10px 26px -20px rgba(180,83,9,.6)}
.ps-cab{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ps-cab b{font-size:16px} .ps-cab span{display:block;font-size:13px;color:var(--tinta-3)}
.ps-esconder{border:0;background:none;color:var(--tinta-3);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline}
.ps-barra{height:8px;border-radius:99px;background:#fef3c7;margin:10px 0 12px;overflow:hidden}
.ps-barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#16a34a)}
.ps-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.ps-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#fff;border:1px solid var(--linha);font-size:13.5px}
.ps-it span:nth-child(2){flex:1}
.ps-chk{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #fbbf24;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.ps-it.ok{opacity:.65} .ps-it.ok .ps-chk{background:#16a34a;border-color:#16a34a}
@media (max-width:900px){ .rn-hoje{grid-template-columns:1fr 1fr} .hj-tit{grid-column:1 / -1} .rn-meio-grade>.rn-evolucao{grid-row:auto} }

/* ---------------------------------------------------------------- Concorrentes: o que mudou e os 30 dias (11/10) */
.ap-mud{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.ap-mud-it{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-style:normal;font-size:12px;font-weight:700;line-height:1.3}
.ap-mud-it b{font-size:11px}
.ap-mud-it.ruim{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.ap-mud-it.bom{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.ap-mud em{font-style:normal;font-size:11.5px;color:var(--tinta-3)}
.ap-item.mudou{box-shadow:0 0 0 2px #fdba74 inset,0 1px 2px rgba(15,23,42,.05)}
.ap-pil-mudou{border-color:#fdba74!important;color:#c2410c}
.ap-pil-mudou.ativa{background:#ea580c!important;border-color:#ea580c!important;color:#fff!important}
.ap-mud-ponto{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.2);animation:apPisca 1.6s ease-in-out infinite}
.ap-pil-mudou.ativa .ap-mud-ponto{background:#fff;box-shadow:none}
@keyframes apPisca{50%{opacity:.35}}
.ap-hist{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 10px;padding:8px 12px;border-radius:12px;background:#f8fafc;border:1px solid var(--linha)}
.ch-graf{flex:none;overflow:visible}
.ch-graf polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ch-menor{stroke:#f97316} .ch-meu{stroke:#2563eb;stroke-dasharray:4 3}
.ch-menor-p{fill:#f97316} .ch-meu-p{fill:#2563eb}
.ap-hist-txt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12.5px;color:var(--tinta-2);min-width:0}
.ap-hist-txt>b{color:var(--tinta);font-size:12.5px}
.ap-hist-leg{display:inline-flex;gap:10px}
.ap-hist-leg i{font-style:normal;font-size:11.5px;color:var(--tinta-3)}
.ap-hist-leg i::before{content:'';display:inline-block;width:12px;height:3px;margin-right:4px;border-radius:2px;vertical-align:middle}
.ap-hist-leg .l-menor::before{background:#f97316} .ap-hist-leg .l-meu::before{background:#2563eb}
.ap-selo.lendo{background:#eef2ff;color:#4338ca;animation:apPisca 1.4s ease-in-out infinite}
.ap-leitura-sub{display:block;font-style:normal;font-size:11.5px;color:var(--tinta-3)}
/* o item do menu enquanto lê em segundo plano: um pontinho que pulsa */
.ar-aba.ap-lendo .ar-nome::after{content:'';display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%;background:#6366f1;vertical-align:1px;animation:apPisca 1.2s ease-in-out infinite}
@media (max-width:560px){ .ap-hist{gap:8px} .ch-graf{width:100%;height:40px} }

.ap-item.mudou.mudou-bom{box-shadow:0 0 0 2px #93c5fd inset,0 1px 2px rgba(15,23,42,.05)}
.ap-hist-txt{flex:1;min-width:240px}

/* ---------------------------------------------------------------- Conciliação (11/10) */
.cc-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 0 14px;padding:18px 20px;border-radius:18px;
  background:linear-gradient(135deg,#eef2ff,#f5f3ff 60%,#fff);border:1px solid #e0e7ff}
.cc-hero-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6d28d9}
.cc-hero-v{display:block;font-size:34px;font-weight:800;letter-spacing:-.6px;color:var(--tinta);line-height:1.15;font-variant-numeric:tabular-nums}
.cc-hero-s{font-size:13px;color:var(--tinta-3)}
.cc-hero .ap-ordem{margin:0}
.cc-escolha{grid-template-columns:repeat(4,minmax(0,1fr))}
.cc-opcao .cn-opcao-txt{flex:1}
.cc-o-num{display:flex;flex-direction:column;align-items:flex-end;flex:none;font-variant-numeric:tabular-nums}
.cc-o-num b{font-size:24px;font-weight:800;line-height:1}
.cc-o-num i{font-style:normal;font-size:12px;color:var(--tinta-3);white-space:nowrap}
.cn-opcao.ativa .cc-o-num i{color:#c7d2fe}
.cc-lista{display:flex;flex-direction:column;gap:10px}
.cc-item{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1.4fr) auto;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  background:var(--card);border:1px solid var(--linha);border-left:5px solid var(--cc,#94a3b8)}
.cc-item.cc-frete{--cc:#f97316} .cc-item.cc-tarifa{--cc:#8b5cf6} .cc-item.cc-repasse{--cc:#0ea5e9}
.cc-item.marcado{opacity:.75}
.cc-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,#fff)}
.cc-quem{display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-tipo{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cc)}
.cc-quem b a{color:var(--tinta);text-decoration:none} .cc-quem b a:hover{text-decoration:underline}
.cc-quem i{font-style:normal;font-size:12.5px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cc-nums span{display:flex;flex-direction:column;gap:1px}
.cc-nums em{font-style:normal;font-size:11.5px;color:var(--tinta-3)}
.cc-nums b{font-size:15px;font-variant-numeric:tabular-nums}
.cc-dif b{color:var(--neg)}
.cc-acoes{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.cc-ok{border-color:#a7f3d0!important;color:#047857!important}
.cc-marca{font-size:12px;font-weight:700;color:#047857}
.cc-como ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.5}
@media (max-width:1100px){ .cc-escolha{grid-template-columns:repeat(2,minmax(0,1fr))} .cc-item{grid-template-columns:auto minmax(0,1fr)} .cc-nums,.cc-acoes{grid-column:1/-1} .cc-acoes{justify-content:flex-start} }
@media (max-width:560px){ .cc-hero-v{font-size:28px} .cc-escolha{grid-template-columns:1fr 1fr;gap:8px} .cc-opcao{padding:12px} .cc-opcao .cn-opcao-ico{display:none} }
/* os cartões de escolha da Conciliação: título em cima, número e valor embaixo (11/10) */
.cc-opcao{flex-wrap:wrap;align-content:center;row-gap:6px}
.cc-opcao .cn-opcao-ico{display:none}
.cc-opcao .cn-opcao-txt{flex:1 1 0;min-width:0}
.cc-o-num{flex:1 1 100%;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px;padding-left:34px}

/* ---------------------------------------------------------------- a loja no TOPO (11/10): bolinha + logo, no fundo escuro */
header.topo .topo-lojas{margin:0;gap:0;flex:none}
header.topo .topo-lojas .cb-chips{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:3px;gap:2px}
header.topo .topo-lojas .cb-chip{padding:4px 9px 4px 7px;gap:6px;color:#e0e7ff;font-size:12.5px}
header.topo .topo-lojas .cb-chip .cb-nome{display:none}
header.topo .topo-lojas .cb-chip.cb-todos .cb-nome{display:inline}
header.topo .topo-lojas .cb-chip.cb-todos .cb-marca{display:none}
header.topo .topo-lojas .cb-chip i{color:#c7d2fe;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header.topo .topo-lojas .cb-chip::before{border-color:rgba(255,255,255,.45)}
header.topo .topo-lojas .cb-chip:hover:not(.ativo){background:rgba(255,255,255,.12);color:#fff}
header.topo .topo-lojas .cb-chip.ativo{background:#fff;color:var(--tinta)}
header.topo .topo-lojas .cb-chip.ativo i{color:var(--tinta-3)}
header.topo .topo-lojas .cb-chip.cb-todos.ativo{background:#6366f1;color:#fff}
/* a faixa da tela que não segue a loja do topo */
.aviso-loja{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;padding:10px 14px;border-radius:14px;
  background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;font-size:13.5px;line-height:1.4}
.aviso-loja .al-ico{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#f97316;color:#fff;font-weight:800;font-style:italic;font-family:Georgia,serif}
.aviso-loja>span:nth-child(2){flex:1;min-width:200px}
.ms-loja-topo{font-weight:800} .ms-escolha i{font-style:normal;font-size:12px;color:var(--tinta-3);margin-left:6px}
/* celular: na mesma linha do topo, compacto — "Todas" vira o ícone de grade */
@media (max-width:760px){
  header.topo .topo-lojas .cb-chips{padding:2px;gap:1px}
  header.topo .topo-lojas .cb-chip{padding:3px 5px 3px 4px;gap:4px}
  header.topo .topo-lojas .cb-chip::before{width:10px;height:10px;border-width:1.6px}
  header.topo .topo-lojas .cb-chip.cb-todos .cb-nome,header.topo .topo-lojas .cb-chip i{display:none}
  header.topo .topo-lojas .cb-chip.cb-todos .cb-marca{display:inline-grid}
}

.pt-no-ml{display:inline-block;margin-left:5px;padding:0 5px;border-radius:5px;background:#fef9c3;color:#854d0e;font-size:10.5px;font-weight:800;vertical-align:1px}

.sv-loja-sh{display:inline-block;padding:0 6px;border-radius:5px;background:#fff1ec;color:#c2410c;font-size:10.5px;font-weight:800;font-style:normal}

.pd-sh{background:#ee4d2d!important;border-color:#ee4d2d!important}
.pd-sh-ver{margin-left:6px}
.pd-sh-dica{display:block;width:100%;margin-top:4px;font-size:12px;color:var(--tinta-3)}
.pd-acoes:has(.pd-sh){display:flex;flex-wrap:wrap;align-items:center;gap:8px;grid-column:1/-1}
.pd-sh,.pd-sh-ver{white-space:nowrap;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px}
.pd-sh-ver{margin-left:0}

/* ---------------------------------------------------------------- Anúncios da Shopee (12/10) */
.sh-selo{background:#fff1ec!important;padding:4px} .sh-selo img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.shp-resumo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:6px 0 12px}
.shp-busca{flex:1;min-width:220px;padding:8px 12px;border-radius:999px;border:1px solid var(--linha);font:inherit;font-size:13px}
.shp-massa{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0;padding:10px 14px;border-radius:14px;background:#fff7f4;border:1px solid #fed7cc;font-size:13.5px}
.shp-massa input[type=text]{width:56px;padding:5px 8px;border-radius:8px;border:1px solid var(--linha);font:inherit;text-align:right}
.shp-tab{border:1px solid var(--linha);border-radius:16px;overflow:hidden;background:var(--card)}
.shp-l{display:grid;grid-template-columns:minmax(0,2.6fr) 110px 140px 110px minmax(0,1.2fr) 80px;gap:10px;align-items:center;padding:9px 14px;border-top:1px solid var(--linha);font-size:13.5px}
.shp-l.shp-cab{border-top:0;background:#f8fafc;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.shp-l.alterada{background:#fffbeb}
.shp-l small{display:block;font-size:11px;color:var(--tinta-3)}
.shp-var{font-style:normal;color:#c2410c}
.shp-in{width:100%;max-width:120px;padding:6px 8px;border-radius:9px;border:1px solid var(--linha);font:inherit;text-align:right;font-variant-numeric:tabular-nums}
.shp-in.mudou{border-color:#f59e0b;background:#fffbeb;font-weight:700}
.shp-in.erro{border-color:var(--neg)}
.shp-promo{color:#ee4d2d} .shp-sem{color:var(--tinta-3);font-style:normal}
.shp-l .pos{color:var(--lucro,#1d4ed8);font-weight:700} .shp-l .neg{color:var(--neg);font-weight:700}
@media (max-width:900px){ .shp-resumo{grid-template-columns:1fr 1fr} .shp-l{grid-template-columns:1fr 1fr} .shp-l>span:first-child{grid-column:1/-1} .shp-l.shp-cab{display:none} }

/* ---------------------------------------------------------------- a cara da loja escolhida (12/10) */
.topo-modo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;
  padding:6px 16px 6px 8px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;white-space:nowrap}
.topo-modo .tm-logo{transform:scale(1.3);margin:0 4px 0 6px}
.topo-modo .tm-txt{display:flex;flex-direction:column;line-height:1.1}
.topo-modo i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.topo-modo b{font-size:16px;font-weight:900;letter-spacing:.01em}
body[data-loja="sh"] .topo-slogan,body[data-loja="ml"] .topo-slogan{display:none}
/* o topo inteiro na cor da loja */
body[data-loja="sh"] header.topo{background:linear-gradient(100deg,#3b120a 0%,#8a2a14 55%,#ee4d2d 100%)}
body[data-loja="sh"] header.topo::after{background:#ff7a59!important;height:3px}
body[data-loja="sh"] .topo-modo{background:rgba(238,77,45,.35);border-color:#ffb199}
body[data-loja="ml"] header.topo{background:linear-gradient(100deg,#1f2a5c 0%,#2d3277 55%,#5a5a1a 100%)}
body[data-loja="ml"] header.topo::after{background:#ffe600!important;height:3px}
body[data-loja="ml"] .topo-modo{background:rgba(255,230,0,.18);border-color:#ffe600}
/* uma faixa fina na cor da loja no alto do conteúdo */
body[data-loja="sh"] .casca-conteudo{box-shadow:inset 0 4px 0 #ee4d2d}
body[data-loja="ml"] .casca-conteudo{box-shadow:inset 0 4px 0 #ffe600}
@media (max-width:1100px){ .topo-modo{position:static;transform:none;padding:4px 10px 4px 4px} .topo-modo i{display:none} .topo-modo b{font-size:13px} }
/* no celular o topo na cor da loja + a bolinha do seletor já dizem qual é: o selo sairia por cima do seletor */
@media (max-width:760px){ .topo-modo{display:none!important} }

/* ---------------------------------------------------------------- Saúde dos anúncios / Ads por anúncio (12/10) */
.sm-escolha{grid-template-columns:repeat(3,minmax(0,1fr))}
.sm-o .cn-opcao-txt{flex:1}
.sm-n{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums}
.sm-n.ruim{color:var(--neg)} .sm-n.atencao{color:#b45309} .sm-n.ok{color:var(--lucro,#1d4ed8)}
.cn-opcao.ativa .sm-n{color:#fff}
.sm-lista{display:flex;flex-direction:column;gap:8px}
.sm-item{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr);gap:14px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--card);
  border:1px solid var(--linha);border-left:5px solid var(--sm,#94a3b8)}
.sm-item.sm-ruim{--sm:var(--neg)} .sm-item.sm-atencao{--sm:#f59e0b} .sm-item.sm-ok{--sm:#22c55e}
.sm-quem{display:flex;gap:10px;align-items:center;min-width:0}
.sm-quem img,.sm-quem>i{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:#f1f5f9}
.sm-quem div{display:flex;flex-direction:column;min-width:0}
.sm-quem b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-quem em{font-style:normal;font-size:12px;color:var(--tinta-3)}
.sm-txt{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tinta-2)}
.sm-txt b{color:var(--tinta)}
.sm-nota{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none;font-weight:900;font-size:17px;color:#fff;background:#22c55e}
.sm-nota.atencao{background:#f59e0b} .sm-nota.ruim{background:var(--neg)}
.sm-acao{display:block;font-size:12.5px} .sm-acao.alerta{color:#b45309;font-weight:700}
.ap-sug{margin:0 0 8px;padding:8px 12px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;font-size:13px;color:var(--tinta-2)}
.ap-sug b{color:#92400e} .ap-sug .neg{color:var(--neg);font-weight:700}
.ads-l{grid-template-columns:minmax(0,2.4fr) 100px 130px 70px 90px 120px 120px}
@media (max-width:900px){ .sm-escolha{grid-template-columns:1fr} .sm-item{grid-template-columns:1fr} .ads-l{grid-template-columns:1fr 1fr} }

.sm-escolha{grid-template-columns:repeat(4,minmax(0,1fr))}
.sm-txt .btn{align-self:flex-start;margin-top:4px}
@media (max-width:1100px){ .sm-escolha{grid-template-columns:1fr 1fr} }

.shv-abas{margin-top:-4px}
.shv-lojas{margin:0 0 10px;padding:8px 10px;border-radius:12px;background:#fff4ef;border:1px solid #ffd5c6}
.shv-lojas .mf-pil.ativa{background:#ee4d2d;border-color:#ee4d2d;color:#fff}
.shv-lojas-nota{font-size:12px;color:#8a5a4a;margin-left:4px}
.shv-tit{margin:18px 0 8px;font-size:16px;font-weight:800}
.shv-form{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:10px 0 4px;padding:12px 14px;border-radius:14px;background:#fff7f4;border:1px solid #fed7cc;font-size:13.5px}
.shv-form>b{flex-basis:100%}
.shv-form input,.shv-form select{padding:6px 8px;border-radius:9px;border:1px solid var(--linha);font:inherit}

.ed-sh-campo{display:flex;flex-direction:column;gap:4px;margin:4px 0;font-size:13px}
.ed-sh-campo>span{font-weight:700;color:var(--tinta-2)}
.ed-sh-campo input:not([type=checkbox]),.ed-sh-campo textarea,.ed-sh-campo select{padding:7px 9px;border-radius:9px;border:1px solid var(--linha);font:inherit;width:100%;box-sizing:border-box}
.ed-sh-campo input[type=number]{width:auto}

.rec-item>div:has(.ed-sh-campo){flex:1;min-width:0}
.ed-sh-campo{width:100%}
.ed-sh-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ed-sh-linha input[type=number]{width:80px!important}

.pm-criar{margin:4px 0 12px}
.pm-criar>summary{cursor:pointer;font-weight:800;padding:8px 12px;border-radius:12px;background:#eef2ff;color:#4338ca;display:inline-block}

/* publicar na Shopee (12/10) */
.pb-destino{align-items:center}
.pb-destino [data-pb-destino="shopee"].ativa{border-color:#ee4d2d;color:#ee4d2d}
.ps-caixa{display:flex;align-items:center;gap:6px}
.ps-caixa input{width:72px}
.ps-canais{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.ps-canais em{color:var(--tinta-3);font-style:normal;font-size:12px}
.pb-foto.ps-pendente{outline:2px dashed #ee4d2d;outline-offset:-2px}
.btn-shopee{background:#ee4d2d;border-color:#ee4d2d}
.pb-sh .alt-prev em{color:var(--tinta-3);font-style:normal;font-size:12px}
.ps-marca{margin:6px 0 10px}

/* extrato do Mercado Pago (12/10) */
.xm-bloco{margin-top:22px;padding:16px;border:1px solid var(--linha);border-radius:14px;background:var(--cartao,#fff)}
.xm-cab h3{margin:0 0 4px}
.xm-cab p{margin:0 0 10px;color:var(--tinta-2)}
.xm-gerar{flex-wrap:wrap;gap:8px;align-items:center}
.xm-gerar label{display:flex;gap:6px;align-items:center;font-size:13px}
.xm-arqs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.xm-arq.ativa{outline:2px solid var(--marca,#5b5bd6)}
.xm-aberto{margin-top:12px;border-top:1px dashed var(--linha);padding-top:12px}
.xm-tit{margin-bottom:8px}
.xm-nums{display:flex;flex-wrap:wrap;gap:18px;margin:6px 0 10px}
.xm-nums span{display:flex;flex-direction:column}
.xm-nums em{font-style:normal;font-size:12px;color:var(--tinta-3)}
.xm-nums b{font-size:18px}
.xm-tab{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.xm-tab th,.xm-tab td{padding:5px 8px;border-bottom:1px solid var(--linha);text-align:left}
.xm-lista{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.xm-l{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:8px 10px;border:1px solid var(--linha);border-radius:10px;font-size:13px}
.xm-l i{color:var(--tinta-3);flex:1 1 200px}

/* Central da Shopee: avaliações, impulsionar, combo/compre e ganhe/relâmpago, fotos e variações (12/10) */
.shm-estrelas{color:#f5a623;letter-spacing:1px}
.shm-estrelas i{color:var(--linha);font-style:normal}
.shm-fotos{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.shm-fotos img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--linha)}
.shm-resp{display:block;margin-top:6px;padding:8px 10px;border-left:3px solid #ee4d2d;background:rgba(238,77,45,.06);border-radius:6px}
.shm-responder{display:flex;flex-direction:column;gap:6px;margin-top:8px;width:100%}
.shm-responder textarea{width:100%;box-sizing:border-box;padding:8px;border-radius:9px;border:1px solid var(--linha);font:inherit}
.shm-responder>span{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.shm-imp{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;margin:10px 0}
.shm-imp-l{display:flex;gap:8px;align-items:center;padding:8px;border:1px solid var(--linha);border-radius:10px;cursor:pointer;font-size:13px}
.shm-imp-l img,.shm-imp-l>i{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:none;background:var(--linha)}
.shm-imp-l em{display:block;font-style:normal;color:var(--tinta-3);font-size:12px}
.shm-ed-botoes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.shm-perigo{color:#b42318;border-color:#f3b4ac}
.btn-forte.shm-perigo{background:#b42318;border-color:#b42318;color:#fff}
.dlg-shm{width:min(760px,calc(100% - 24px));max-height:calc(100vh - 40px);overflow:auto;border:0;border-radius:16px;padding:0}
.shm-corpo{padding:14px 22px;display:flex;flex-direction:column;gap:10px}
.shm-grade{display:flex;flex-wrap:wrap;gap:10px}
.shm-foto{position:relative;width:118px;display:flex;flex-direction:column;gap:4px}
.shm-foto img,.shm-foto>i{width:118px;height:118px;object-fit:cover;border-radius:10px;border:1px solid var(--linha);background:var(--linha)}
.shm-foto>span{display:flex;justify-content:space-between}
.shm-foto button{border:1px solid var(--linha);background:var(--cartao,#fff);border-radius:8px;width:34px;height:28px;cursor:pointer}
.shm-capa{position:absolute;top:6px;left:6px;background:#ee4d2d;color:#fff;font-size:11px;padding:2px 6px;border-radius:6px}
.shm-camada{padding:10px;border:1px solid var(--linha);border-radius:10px}
.shm-opcoes{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.shm-opcoes input{width:140px;padding:6px 8px;border-radius:8px;border:1px solid var(--linha)}
.shm-mods{display:flex;flex-direction:column;gap:6px}
.shm-mod{display:grid;grid-template-columns:1fr 110px 90px 120px;gap:6px;align-items:center;font-size:13px}
label.shm-mod{grid-template-columns:1fr auto auto}
.shm-mod em{font-style:normal;color:var(--tinta-3)}
.shm-mod input{padding:6px 8px;border-radius:8px;border:1px solid var(--linha);min-width:0}
@media (max-width:640px){.shm-mod{grid-template-columns:1fr 1fr}}

/* Ads completo (12/10) */
.ads-camp-painel{border:1px solid var(--linha);border-radius:14px;padding:12px 14px;margin:12px 0}
.ads-camp-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ads-camp-lista{display:flex;flex-direction:column;gap:6px}
.ads-camp-l{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--fundo-2,rgba(0,0,0,.02))}
.ads-camp-l em{display:block;font-style:normal;color:var(--tinta-3);font-size:12px}
.ads-camp-acoes{display:flex;gap:6px;flex:none}
.ads-sel{flex-wrap:wrap}
.ads-fora{margin:6px 0 12px}
.ads-fora summary{cursor:pointer;font-weight:600}
.ads-ck{vertical-align:middle;margin-right:4px}
@media (max-width:640px){.ads-camp-l{flex-direction:column;align-items:flex-start}}

/* a loja do topo manda na tela (14/10): o cartão no lugar dos números da outra loja e o menu apagado */
.ol-cartao{max-width:640px;margin:40px auto;padding:34px 30px;border-radius:20px;border:1px solid var(--linha);background:var(--cartao,#fff);text-align:center;box-shadow:0 10px 30px rgba(20,20,60,.08)}
.ol-cartao h2{margin:14px 0 8px;font-size:22px}
.ol-cartao p{margin:0 auto 18px;max-width:520px;color:var(--tinta-2);line-height:1.5}
.ol-logo{display:inline-block;transform:scale(1.6);margin-top:6px}
.ol-acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ar-aba.aba-outra-loja,.lat-tit.lat-sem-loja{display:none!important}
/* 03/11: a tela que mora dentro de outra (TELAS_JUNTAS) sai do menu — o display:inline-flex do .ar-aba venceria o [hidden] */
.ar-aba[hidden]{display:none!important}
.mi-repor{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border-radius:14px;border:1px solid var(--linha);background:var(--cartao,#fff)}
.mi-repor span{flex:1;min-width:200px}

/* ESPERA COM O LOGO (14/10, pedido do Franklin: "quando estiver carregando, aparecer o logo do Radar carregando —
   não me deixe sem saber se está carregando ou não"). Duas pontas, um desenho só:
   1. tela que ainda não recebeu nada (o script dela é adiado e ainda não chegou): `.palco:empty`;
   2. todo aviso "Lendo…/Perguntando…/Carregando…" das telas e janelas: classe `.carregando`. */
.palco:empty{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.palco:empty[hidden]{display:none}
.palco:empty::before,.carregando::before{content:'';flex:none;width:64px;height:64px;border-radius:50%;
  background:url(/img/radar-256.png) center/contain no-repeat;animation:rc-pulso 1.5s ease-out infinite}
.palco:empty::after{content:'Carregando…';font-weight:600;color:var(--tinta-2)}
.carregando{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:150px;padding:24px 16px;text-align:center;font-weight:600;color:var(--tinta-2)}
@keyframes rc-pulso{
  0%{box-shadow:0 0 0 0 rgba(124,92,255,.45);transform:scale(.94)}
  50%{transform:scale(1)}
  100%{box-shadow:0 0 0 22px rgba(124,92,255,0);transform:scale(.94)}
}
@media (prefers-reduced-motion:reduce){.palco:empty::before,.carregando::before{animation:none}}
/* em linha: aviso que fica junto de conteúdo já desenhado (não empurra a tela) */
.carregando.carregando-linha{flex-direction:row;justify-content:flex-start;min-height:0;padding:10px 0;text-align:left}
.carregando.carregando-linha::before{width:30px;height:30px}

/* aviso de versão nova (versao-aviso.js, 15/10) */
.va-faixa{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 32px);padding:12px 18px;border-radius:14px;background:#1d1640;color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);font-size:14px}
.va-faixa b{color:#ffd76a}

/* Central da Shopee: separador entre os grupos de ação em massa (15/10) */
.shp-sep{display:inline-block;width:1px;align-self:stretch;min-height:22px;background:var(--linha);margin:0 4px}
#shp-alvo,#shp-est{width:64px}

/* Central da Shopee — visitas, dinheiro, vitrine e loja (shopee-novos.js, 15/10) */
.shn-vis .shp-l,.shn-vis.shp-tab .shp-cab{grid-template-columns:minmax(260px,3fr) repeat(5,minmax(70px,1fr))}
.shn-din .shp-l,.shn-din.shp-tab .shp-cab{grid-template-columns:minmax(200px,2fr) minmax(90px,1fr) minmax(110px,1fr) minmax(160px,2fr)}
.shn-sit{font-size:13px;color:var(--tinta-2)}
.shn-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 18px}
.shn-form-col{flex-direction:column;align-items:stretch}
.shn-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--tinta-2)}
.shn-form input[type=text],.shn-form textarea,.shn-form select,.shn-form input[type=datetime-local]{padding:8px 10px;border:1px solid var(--linha);border-radius:10px;font:inherit}
.shn-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.shn-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.shn-esc{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.shn-esc-lista{max-height:260px;overflow:auto;border:1px solid var(--linha);border-radius:12px;padding:6px}
.shn-esc-item{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:8px;cursor:pointer;font-size:13px}
.shn-esc-item:hover{background:var(--fundo-2,#f4f4f8)}
.shn-esc-item img,.shn-esc-item i{width:32px;height:32px;border-radius:6px;object-fit:cover;flex:none}
.shn-cat-corpo{grid-column:1/-1;width:100%;margin-top:8px}
.shn-perfil{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.shn-perfil .shn-form{flex:1;min-width:260px}
.shn-logo{width:84px;height:84px;border-radius:50%;object-fit:cover;border:1px solid var(--linha)}
@media (max-width:700px){.shn-vis .shp-l,.shn-vis.shp-tab .shp-cab,.shn-din .shp-l,.shn-din.shp-tab .shp-cab{grid-template-columns:1fr 1fr}}
.shn-din .shp-l>span:first-child em{display:block;font-size:12px;color:var(--tinta-2)}

/* Reajuste de preços na Shopee: o bloco em destaque quando se chega pelo menu Reajuste (15/10) */
.shp-rj-cab{display:flex;flex-direction:column;gap:4px;margin:14px 0 8px;padding:14px 18px;border-radius:14px;background:linear-gradient(135deg,#ee4d2d,#ff7a45);color:#fff;scroll-margin-top:90px}
.shp-rj-cab b{font-size:17px}
.shp-rj-cab span{font-size:14px;line-height:1.45}
.shp-rj-cab span b{font-size:inherit}
.shp-massa.shp-massa-rj{border:2px solid #ee4d2d;box-shadow:0 6px 18px rgba(238,77,45,.15)}
.shp-so-dono{font-size:13px;font-weight:600;color:var(--tinta-2);padding:6px 10px;border-radius:10px;background:rgba(238,77,45,.08)}

/* ---------------------------------------------------------------- busca numa linha própria (17/10)
   Pedido do dono: "deixe como os outros — Hoje, 7 dias, Este mês — e a lupa de pesquisar produto embaixo, para ter
   mais espaço para consultar; verificar se todos estiverem assim". Antes, nas telas com busca (Produtos, A fazer,
   Reposição, Concorrentes) os atalhos de período SUMIAM para a busca caber na mesma linha, espremida. Agora:
   os atalhos ficam em toda tela que usa período, e a busca desce para uma linha inteira, com as abas Tudo/Nome/SKU/ID. */
@media (min-width:761px){
  .barra-filtros:has(.bf-busca:not(.fora-da-aba)) .periodo-rapido{display:flex}
  .barra-filtros:has(.bf-busca:not(.fora-da-aba)) #m-periodo.pr-coberto .mb-txt{display:none}
  .barra-filtros .bf-busca{order:99;flex:1 1 100%;min-width:0}
  .barra-filtros .bf-busca-cx{min-height:40px}
  .barra-filtros .bf-busca-cx input{padding:6px 10px;font-size:14px}
  .barra-filtros .bf-busca-cx:not(:focus-within) .bf-abas:has(.bf-aba.ativa[data-campo="tudo"]){display:flex}
}
@media (max-width:760px){
  .barra-filtros .bf-busca{order:99}
  /* no celular as abas Tudo/Nome/SKU/ID tomavam a linha e o campo ficava com 3 letras: abas em cima, campo inteiro embaixo */
  .barra-filtros .bf-busca-cx{flex-wrap:wrap}
  .barra-filtros .bf-busca-cx .bf-abas{flex:1 1 100%;border-bottom:1px solid var(--linha)}
  .barra-filtros .bf-busca-cx input{flex:1 1 0;min-width:0}
}

/* ---------------------------------------------------------------- NENHUM TEXTO CORTADO (17/10)
   Pedido do dono: "conferir menus, palavras cortadas — corrigir todos" (print: "O ML BAN…", "MARGEM NA O…").
   O Radar cortava com "…" nomes de menu ("Saúde dos an…", "Tendências e mais vend…"), cabeçalhos de tabela, nomes de
   produto, a linha do pedido no celular, os grupos do Reajuste e os rótulos da barra de filtros. Achado por varredura
   em todas as telas (1440, 1280 e celular — video-demo-apps/videos/radar/demo/cortados.mjs). Aqui o texto QUEBRA a
   linha em vez de sumir; valores grandes (R$ dos cartões) ficam como estavam — não cortavam. */
.ar-nome,.lateral .ar-aba .ar-nome,.lateral .ar-curto,.lat-perfil-txt i,
.edm-cab>span,.rj-gcab b,.rj-gcab small,
.sv-prod b,.pt-prod b,.pd-prodnome b,.pd-prodnome em,.pd-item summary .pd-prodnome b,.pd-item summary .pd-prodnome em,
.vi-prod-nome,.rj-prod b,.rj-prod em,.hi-linha b,.trilha-var,.gr-tabela .gr-cidade,.rn-cnome,.sm-quem b,
.pd-canal,.pd-num,.vg-linha span,.ad-camp-nome,.cst-linha span,.cst-linha>span:not(:last-child),.cst-linha b,
.mf-txt b,.mf-txt i,.rl-nome,.ap-nome>a,.ap-nome>b,.ped-prod b,.ped-sku,.cp-conc-loja b,.vg-top-nome b,.ig-nome b,
.integ-l-txt i,.cp-merc-it i,.fx-rot,.fx-sub,.pb-achado b,.msg-topo b,.cc-quem i,.tq-txt b,#balao-msg .bm-txt i,
header.topo .marca p,header.topo .topo-lojas .cb-chip i{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word;max-width:none!important;
}
/* os que cortavam por número de linhas (line-clamp) voltam a ser bloco comum */
.edm-prod b,.rj-hero p,.kpi-sec,.ge-nome a,.ge-nome>span,.al-item b{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;white-space:normal!important}
/* barra de filtros: o valor do menu ("Mais vendidos") aparece inteiro; a barra quebra a linha se precisar */
.barra-filtros .mb-txt b,.mb-txt b{max-width:none!important;overflow:visible!important;text-overflow:clip!important}
/* menu lateral: nome comprido em duas linhas, alinhado */
.lateral .ar-aba .ar-nome{line-height:1.2}
/* o campo de margem mínima das Promoções era largo e empurrava o "%" para a linha de baixo */
.edm-valor[data-pm-min]{width:72px}

/* ---------------------------------------------------------------- menu lateral mais fácil (17/10)
   Pedido do dono: "faça tudo, quero algo fácil e intuitivo para o menu". Só no computador (≥ 901 px).
   1. compacto: linhas mais baixas e grupos mais juntos (cabem ~15 telas sem rolar, eram 9);
   2. rodapé numa linha: Perfil (nome) + WhatsApp + Recolher, só ícones nos dois últimos;
   3. a tela atual bem marcada: faixa colorida à esquerda, fundo mais forte, nome em negrito;
   4. grupos que abrem e fecham (menu-lateral.js), 5. "Ir para…" (Ctrl+K), 6. estrela → "Meus atalhos". */
@media (min-width:901px){
  .lateral .lat-tit{margin-top:4px;padding:7px 8px 3px}
  .lateral .lat-tit-1{margin-top:2px}
  .lateral .abas-radar{gap:1px}
  .lateral .ar-aba{padding:3px 8px 3px 5px;min-height:34px;gap:9px;font-size:13px;position:relative}
  .lateral .ar-aba .ic{width:26px;height:26px;padding:5px;border-radius:8px}
  /* 3. a tela atual */
  .lateral .ar-aba.ativa{background:linear-gradient(90deg,color-mix(in srgb,var(--g) 46%,transparent),color-mix(in srgb,var(--g) 12%,transparent))!important;
    box-shadow:inset 3px 0 0 var(--g),0 8px 22px -14px var(--g)!important;color:#fff}
  .lateral .ar-aba.ativa .ar-nome{font-weight:800}
  .lateral .ar-aba.ativa::before{display:none}
  /* 4. grupos que abrem e fecham */
  .lateral .lat-dobra{cursor:pointer;user-select:none;border-radius:8px}
  .lateral .lat-dobra:hover{color:#fff;background:rgba(255,255,255,.04)}
  .lateral .lat-dobra:focus-visible{outline:2px solid #fff;outline-offset:1px}
  .lateral .lat-dobra::after{order:5}
  .lateral .lat-dobra:not(.lat-sem-loja)::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent)}
  .lateral .lat-dobra > .lat-conta{order:3}
  .lateral .lat-dobra:not(.lat-tit-1)::before,.lateral .lat-tit-1.lat-dobra::before{order:-1}
  .lateral .lat-dobra.lat-fechado{color:rgba(226,232,255,.45)}
  .lateral .lat-dobra.lat-pendente{color:#fff}
  .lateral .ar-aba.lat-esconde{display:none!important}
  .lateral .lat-chev{order:9;flex:none;font-size:11px;line-height:1;color:rgba(226,232,255,.55);transition:transform .2s}
  .lateral .lat-fechado .lat-chev{transform:rotate(-90deg)}
  .lateral .lat-pendente .lat-chev::after{content:'●';display:inline-block;margin-left:4px;font-size:8px;color:#f43f5e;transform:rotate(90deg)}
  .menu-recolhido .lateral .lat-chev{display:none}
  /* 6. a estrela de cada item: aparece ao passar o mouse; acesa fica sempre */
  .lateral .ar-fav{margin-left:auto;flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;font-size:14px;line-height:1;
    color:rgba(226,232,255,.55);opacity:0;transition:opacity .15s,color .15s,background .15s}
  .lateral .ar-aba:hover .ar-fav,.lateral .ar-fav.ligado{opacity:1}
  .lateral .ar-fav.ligado{color:#fbbf24}
  .lateral .ar-fav:hover{background:rgba(255,255,255,.12);color:#fbbf24}
  .lateral .ar-aba .ar-conta + .ar-fav{margin-left:4px}
  .menu-recolhido .lateral .ar-fav,.menu-recolhido .lateral .lat-favs-tit{display:none}
  /* "Meus atalhos" */
  .lat-favs{display:flex;flex-direction:column;gap:1px;margin-bottom:4px;--g:#fbbf24}
  .lat-favs[hidden]{display:none}
  .lat-favs-tit{display:flex;align-items:center;gap:8px;padding:6px 8px 3px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#fcd34d}
  .lat-favs-tit::before{content:'★';font-size:11px;color:#fbbf24}
  .lat-favs-tit::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(251,191,36,.35),transparent)}
  /* 5. "Ir para…" */
  .lat-ir{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 8px;padding:7px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);color:rgba(226,232,255,.75);font:inherit;font-size:13px;cursor:pointer;text-align:left}
  .lat-ir:hover{background:rgba(255,255,255,.10);color:#fff}
  .lat-ir span{flex:1}
  .lat-ir kbd{font:inherit;font-size:10.5px;padding:1px 6px;border-radius:5px;border:1px solid rgba(255,255,255,.18);color:rgba(226,232,255,.6)}
  .menu-recolhido .lat-ir{justify-content:center;padding:7px 0}
  .menu-recolhido .lat-ir span,.menu-recolhido .lat-ir kbd{display:none}
  /* 2. rodapé numa linha */
  .lat-pe{display:flex;flex-direction:row!important;flex-wrap:nowrap;align-items:center;gap:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
  .lat-pe .lat-perfil{flex:1 1 auto;min-width:0;margin:0;padding:5px 8px}
  .lat-pe .lat-perfil-txt i{display:none}
  .lat-pe .lat-avatar{width:28px;height:28px;font-size:13px}
  .lat-pe .lat-zap,.lat-pe .lateral-recolher{flex:none;width:40px;height:40px;margin:0!important;padding:0!important;justify-content:center;border-radius:10px}
  .lat-pe .lat-zap span,.lat-pe .lateral-recolher span{display:none}
  .menu-recolhido .lat-pe{flex-direction:column!important}
  .menu-recolhido .lat-pe .lat-perfil{width:40px;flex:none}
}
@media (max-width:900px){ .ar-fav,.lat-ir,.lat-favs{display:none!important} }
/* janela "Ir para…" */
.dlg-ir{border:0;padding:0;border-radius:16px;width:min(560px,calc(100vw - 32px));background:var(--card,#fff);box-shadow:0 30px 80px rgba(15,10,50,.45)}
.dlg-ir::backdrop{background:rgba(15,12,40,.45);backdrop-filter:blur(2px)}
.ir-cx{display:flex;flex-direction:column}
.ir-cx input{border:0;border-bottom:1px solid var(--linha);padding:16px 18px;font:inherit;font-size:17px;outline:none}
.ir-lista{max-height:min(420px,60vh);overflow:auto;padding:6px}
.ir-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--tinta)}
.ir-item .ic{width:20px;height:20px;flex:none;color:var(--marca-600,#4f46e5)}
.ir-item span{display:flex;flex-direction:column}
.ir-item b{font-size:14.5px}
.ir-item i{font-style:normal;font-size:12px;color:var(--tinta-3)}
.ir-item.sel,.ir-item:hover{background:var(--marca-50,#eef2ff)}
.ir-vazio{padding:18px;color:var(--tinta-3);margin:0}
.ir-dica{margin:0;padding:8px 14px;border-top:1px solid var(--linha);font-size:12px;color:var(--tinta-3)}

/* 23/10 cobrança: atalhos para a tela de assinar (Perfil e faixa de vencimento) */
a.pf-selo-assinar{text-decoration:none;cursor:pointer;font-weight:700}
a.fa-quem{font-weight:600;opacity:.9}

/* 24/10 conexões por plano: o uso no topo de Integrações */
.ig-uso{margin:10px 0 0;display:inline-block;padding:6px 12px;border-radius:999px;background:var(--fundo-2,#f1f3fa);font-size:var(--txt-sm);color:var(--tinta-2)}
.ig-uso b{color:var(--tinta,#151a35)}
.ig-uso a{font-weight:700}

/* ---------------------------------------------------------------- Catálogo do ML (26/10, catalogo.js) */
.ct-escolha{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1300px){ .ct-escolha{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .ct-escolha{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .ct-escolha{grid-template-columns:1fr} }
.ct-item{align-items:start}
.ct-item .sm-txt>span{line-height:1.45}
.ct-sit{font-size:14px} .ct-sit.ct-ok{color:#1d4ed8} .ct-sit.ct-atencao{color:#b45309} .ct-sit.ct-ruim{color:var(--neg)}
.ct-prob{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;background:#fff8ea;border:1px solid #f3dcae}
.ct-prob.ct-ruim{background:#fdeeee;border-color:#f0c3c3}
.ct-prob b{font-size:13px} .ct-prob span{font-size:12.5px}
.ct-prob .btn{margin-top:4px;align-self:flex-start}
.ct-preco{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:8px 10px;border-radius:10px;background:#eef2ff;border:1px solid #c7d2fe}
.ct-preco .pos{color:#1d4ed8;font-weight:700} .ct-preco .neg{color:var(--neg);font-weight:700}
.ct-ganha,.ct-falta-imp{font-size:12.5px}
.ct-falta-imp i{font-style:normal;display:inline-block;margin:2px 4px 0 0;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:700;font-size:11.5px}
.ct-so{font-size:12px;color:var(--tinta-3);font-style:italic}
.ct-botoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ct-busca{margin:0 0 12px;max-width:420px}
.ct-livre{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px} .ct-livre input{flex:1;min-width:220px;max-width:520px}
.ct-cands{display:flex;flex-direction:column;gap:8px}
.ct-cand{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;background:var(--card);border:1px solid var(--linha)}
.ct-cand>img,.ct-cand>i{width:64px;height:64px;border-radius:10px;object-fit:contain;flex:none;background:#f8fafc}
.ct-cand-txt{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:13px}
.ct-cand-txt>b{font-size:13.5px} .ct-cand-txt>em{font-style:normal;font-size:12px;color:var(--tinta-3)}
.ct-cand-dlg{border:0;padding:0;background:transparent}
.ct-obr{color:#b45309;font-weight:700}
.ct-chips{display:flex;flex-wrap:wrap;gap:4px} .ct-chips i{font-style:normal;font-size:11.5px;padding:2px 8px;border-radius:999px;background:#f1f5f9;color:var(--tinta-2)}
.ct-comp{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.ct-ver{font-size:12.5px} .ct-ver.ct-ok{color:#1d4ed8} .ct-ver.ct-atencao{color:#b45309} .ct-ver.ct-ruim{color:var(--neg)}
.ct-dif{margin:0;padding-left:18px;font-size:12.5px;color:var(--neg)} .ct-dif i{font-style:normal;font-weight:700}
.ct-bate,.ct-falta{margin:0;font-size:12px;color:var(--tinta-3)}

/* ---------------------------------------------------------------- Fotos e vídeos (27/10, midia.js) */
.md-escolha{grid-template-columns:repeat(3,minmax(0,1fr))}
.md-busca{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.md-busca .shp-busca{flex:1;min-width:220px}
.md-busca span{font-size:13px;color:var(--tinta-3)}
.md-botoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.md-botoes .btn{margin-top:0}
.md-nota{font-size:12px;color:var(--tinta-3)}
.md-selo{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:#fef3c7;color:#92400e}
.md-selo.ok{background:#dcfce7;color:#166534}
@media (max-width:900px){ .md-escolha{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- JANELAS DE EDIÇÃO MAIORES (03/11)
   O dono: "aumentar o pop up de edição de cadastros em produtos". A regra genérica `dialog{max-width:min(var(--dlg-max,560px),…)}`
   prendia em 560 px até as janelas que pediam 680 (anúncio do ML) e 760 (Shopee). Agora: 1000 px no computador, tela cheia no celular. */
#dlg-anuncio,#dlg-recado.recado-largo{--dlg-max:1000px;width:min(1000px,calc(100vw - 32px));max-width:min(1000px,calc(100vw - 32px))}
.dlg-shm{--dlg-max:900px;width:min(900px,calc(100vw - 32px));max-width:min(900px,calc(100vw - 32px))}
#dlg-recado.recado-largo textarea{min-height:220px}
#dlg-recado.recado-largo .ed-sh-campo input:not([type=checkbox]):not([type=number]),#dlg-recado.recado-largo .ed-sh-campo textarea{width:100%;box-sizing:border-box}
@media (max-width:560px){
  #dlg-anuncio,#dlg-recado.recado-largo,.dlg-shm{width:100vw;max-width:100vw;max-height:100dvh;margin:0;border-radius:0}
}

/* ---------------------------------------------------------------- MENU ENXUTO (03/11): o seletor das telas que moram juntas */
.telas-juntas{justify-content:flex-start;margin:0 0 14px}
.telas-juntas .vv-n{background:#fde2e1;color:#b42318}
/* Produtos › Fotos e vídeos: o filtro (Todos · Sem vídeo · Poucas fotos) e os botões de cada anúncio */
.md-sub{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.md-botoes .md-excluir{background:#fff;color:#b42318;border:1px solid #f3b4b4}
.md-botoes .md-excluir:hover{background:#fdecec}
.md-botoes .md-editar{background:#fff;color:var(--marca);border:1px solid var(--linha)}
.md-sub .vv-n{display:inline-block;min-width:20px;margin-left:8px;padding:1px 7px;border-radius:999px;background:#eceef6;color:var(--tinta-2);font-size:12px;text-align:center}
.md-sub .vv-faixa.ativa .vv-n{background:rgba(255,255,255,.28);color:#fff}

/* ---------------------------------------------------------------- CUSTO DO PRODUTO (03/11)
   A janela do custo cresce (custo, vigência, embalagem, imposto, kit, fornecedor não cabiam em 560 px) e o imposto
   padrão vira um aviso com link — é da conta inteira, não deste produto. */
#dlg-custo{--dlg-max:720px;width:min(720px,calc(100vw - 32px))}
.c-imposto-conta{margin:2px 0 0;padding:9px 12px;border-radius:var(--raio-md);background:#f7f8fc;border:1px solid var(--linha);font-size:var(--txt-sm);color:var(--tinta-3)}
.c-imposto-conta b{color:var(--tinta)}
@media (max-width:560px){ #dlg-custo{width:100vw;max-width:100vw;max-height:100dvh;margin:0;border-radius:0} }
/* o custo na linha de Produtos: parece valor, mas é botão (o lápis aparece ao passar o mouse) */
.pt-custo-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px dashed transparent;border-radius:8px;background:none;font:inherit;color:inherit;cursor:pointer;font-variant-numeric:tabular-nums}
.pt-custo-btn i{font-style:normal;font-size:12px;color:var(--marca);opacity:0;transition:opacity .15s}
.pt-custo-btn:hover,.pt-custo-btn:focus-visible{border-color:var(--marca-500,#6366f1);background:#f5f4ff}
.pt-custo-btn:hover i,.pt-custo-btn:focus-visible i{opacity:1}
.pt-custo-btn.herdado{color:var(--tinta-3)}
/* Sem venda: o custo de cada anúncio parado (03/11) */
.sv-parado .sv-custo{display:block;margin:4px 0 0 auto;white-space:nowrap}
.sv-parado .sv-custo.falta{color:#b45309;border-color:#f3dcae;background:#fffaf0}

/* ---------------------------------------------------------------- VARREDURA 04/11: o mesmo erro em outras janelas
   (a regra genérica de 560 px prendia também a janela do pedido — mensagens e nota fiscal —, a da publicidade, que é uma
   tabela por mês, e a da devolução da Shopee, que vai com recado largo) */
#dlg-pedido{--dlg-max:860px;width:min(860px,calc(100vw - 32px));max-width:min(860px,calc(100vw - 32px))}
#dlg-publicidade{--dlg-max:760px;width:min(760px,calc(100vw - 32px));max-width:min(760px,calc(100vw - 32px))}
@media (max-width:560px){ #dlg-pedido,#dlg-publicidade{width:100vw;max-width:100vw;max-height:100dvh;margin:0;border-radius:0} }
/* 04/11: os avisos que agora têm o conserto ao lado */
button.hero-chip{border:0;font-family:inherit;cursor:pointer}
button.hero-chip:hover{filter:brightness(.96);text-decoration:underline}
.cst-informar{margin-left:6px;color:#b45309;border-color:#f3dcae;background:#fffaf0}
.cst-informar:hover{background:#fff3dc;border-color:#e9b85c}

/* 04/11 · o resto da varredura: janelas médias (campanha do Ads, publicar no catálogo) e o ⚠ clicável do Resumo mensal */
#dlg-recado.recado-medio{--dlg-max:720px;width:min(720px,calc(100vw - 32px));max-width:min(720px,calc(100vw - 32px))}
button.ms-aviso{border:0;background:none;padding:0 2px;font:inherit;color:inherit;cursor:pointer}
button.ms-aviso:hover{transform:scale(1.2)}

/* 04/11 · o selo da mudança feita pelo suporte no Histórico */
.hi-suporte{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#eef0ff;color:#3730a3;font-size:11px;font-weight:700;white-space:nowrap}

/* ================================================================ VARREDURA DO CELULAR (04/11/2026)
   Achados por varredura em 390 e 360 px (Playwright, todas as telas e janelas). Nada rolava de lado — porque
   .casca-conteudo{overflow-x:clip} CORTA o que passa da borda: o que estourava ficava escondido e inalcançável. */
@media (max-width:900px){
  /* Resultado: o miolo em 1 coluna ("Mercado Livre" saía uma letra por linha; a regra de 2 colunas vinha depois do @media) */
  .rn-meio-grade{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .rn-meio-grade>.rn-canais,.rn-meio-grade>.rn-evolucao{grid-row:auto}
  /* Reajuste: o checkbox ocupa a coluna 1 inteira — os campos caíam na coluna de 30 px e encavalavam */
  .rj-linha>.rj-marca{grid-row:1 / span 5}
  /* cartões de escolha (Saúde) e temas (A fazer) que cortavam à direita: colunas que encolhem */
  .sm-escolha{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mf-temas{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* alvos de toque: os botõezinhos tinham 20–23 px de altura */
  .alt-mini{min-height:32px;padding:3px 10px}
  .alt-link{display:inline-block;min-height:28px;padding:4px 0}
  .alt-x{min-width:40px;min-height:40px}
  .ms-mes{min-height:32px}
  /* janelas longas (custo, publicidade, editor da Shopee): os botões do pé ficam à vista, sem rolar até o fim */
  dialog .dlg-pe,#dlg-recado .rec-pe{position:sticky;bottom:0;z-index:2;background:var(--card,#fff);padding-top:12px;box-shadow:0 -10px 16px -14px rgba(15,18,34,.45)}
}
@media (max-width:760px){
  /* menus da barra de filtros (Análise, Ordenar, Situação, Canal): abriam fora da tela, cortados — agora na largura da barra */
  .barra-filtros{position:relative}
  .barra-filtros details.menu{position:static}
  .barra-filtros .menu-cx,.barra-filtros #m-analise .menu-cx,.barra-filtros #m-ordem .menu-cx{left:0;right:0;min-width:0;max-width:none}
}
@media (max-width:560px){
  /* Produtos (9 colunas no computador): 2 por linha; "Ver detalhes" e o custo rápido ganham a linha inteira */
  .pt-linha>summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-linha>summary>[data-rot]{white-space:normal}
  .pt-linha>summary>.pt-abrir{grid-column:1 / -1;justify-self:start}
  .pt-linha>summary>.pt-custo:has(.pt-custo-rapido){grid-column:1 / -1}
  /* seletor das telas juntas: rótulo comprido ("Promoções e Impulsionar na Shopee") quebra a linha em vez de encavalar */
  #telas-juntas .vv-seletor{grid-template-columns:minmax(0,1fr)}
  #telas-juntas .vv-btn{white-space:normal;justify-content:flex-start;text-align:left}
  /* páginas de Configurar e Integrações: cartões não passam da tela */
  .fe-grade{grid-template-columns:minmax(0,1fr)}
  .ig-grade{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
  .sm-escolha{grid-template-columns:minmax(0,1fr)}
  /* janela do anúncio e a média (campanha, catálogo): tela cheia de verdade */
  #dlg-anuncio,#dlg-recado.recado-medio{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  /* janela do custo: a explicação em cima, o campo embaixo (o campo ficava estreito, "Distribuidora" cortado) */
  #dlg-custo .dlg-linha{grid-template-columns:minmax(0,1fr)}
  /* Pedidos: o número do pedido quebra em vez de ser cortado */
  .pd-prodnome em,.pd-prodnome b{overflow-wrap:anywhere}
  /* balão de mensagens: sem pular sem parar (tomava ~20% da tela) */
  #balao-msg{animation:none}
}
@media (max-width:380px){
  /* topo em 360 px: a pílula de integrações cobria o logo */
  #integ-topo{display:none}
}
/* o "?" do "entender" saía branco em fundo branco (background:currentColor com color:#fff) */
.ex-link::before{background:#4338ca}
.ex-link:hover::before{background:#fff}
/* balão de mensagens no celular (04/11): uma linha compacta — antes tinha ~145 px e cobria 20% da tela */
@media (max-width:560px){
  #balao-msg{align-items:center}
  #balao-msg .bm-abrir{padding:7px 12px 7px 8px;gap:10px;border-radius:14px}
  #balao-msg .bm-ico{width:34px;height:34px;border-radius:10px;font-size:18px}
  #balao-msg .bm-ico b{min-width:18px;height:18px;line-height:18px;font-size:11px;top:-6px;right:-6px}
  #balao-msg .bm-txt b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #balao-msg .bm-txt i{display:none}
  #balao-msg .bm-fechar{width:36px;height:36px}
}

/* ==== FRENTE C · Ads e Saúde (04/11) ==== */
/* filtros compactos no topo (busca + campanha/tipo + ordem), na própria tela: nada de painel novo */
.ads-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.ads-filtros .shp-busca{flex:1 1 220px;min-width:200px}
.ads-filtros select{font:inherit;font-size:var(--txt-sm);padding:6px 9px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm,8px);background:var(--card);max-width:280px}
.ads-filtro-tot{font-size:var(--txt-sm);color:var(--tinta-3);margin-left:auto}
.ads-nota-roas{margin:0 2px 12px}
.ads-nota-roas .ap-como-btn{margin:0 0 0 6px;vertical-align:middle}
/* a tabela com as métricas novas: 8 colunas; rola de lado antes de espremer o nome */
.ads-tab{overflow-x:auto}
.ads-l{grid-template-columns:minmax(200px,2.2fr) repeat(7,minmax(78px,1fr));min-width:860px}
.ads-l.shp-cab small{display:block;font-size:10px;letter-spacing:.04em;font-weight:700;color:var(--tinta-3);opacity:.8}
.ads-l .ads-rot{display:none}
.ads-l.ads-perde{background:#fff5f5}
.ads-flag{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:999px;background:#fee2e2;color:var(--neg,#b62b21);font-size:11.5px;font-weight:700;white-space:nowrap}
.ads-vazio{margin:14px}
.ads-camp-num{display:block;font-style:normal;color:var(--tinta-2);font-size:12px;margin-top:2px}
.ads-camp-num .neg{color:var(--neg);font-weight:700}
.ads-camp-l.ativa{outline:2px solid var(--indigo,#4f46e5);outline-offset:-2px}
.ads-sel [data-ads-todos]{margin-left:4px}
/* Saúde: a linha das vendas ao lado do problema e o "marcar como tratado" */
.sm-filtros{margin-top:12px}
.sm-periodo{margin:0 2px 10px}
.sm-venda{display:block;font-size:12px;color:var(--tinta-2);margin-top:2px}
.sm-venda.sem{color:var(--tinta-3)}
.sm-venda .pos{color:var(--lucro,#1d4ed8)} .sm-venda .neg{color:var(--neg)}
.sm-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.sm-tratado{font-size:12px;font-weight:700;color:var(--lucro,#1d4ed8)}
@media (max-width:900px){
  .ads-l{grid-template-columns:1fr 1fr;min-width:0}
  .ads-l .ads-rot{display:block;font-style:normal;font-size:var(--txt-xs);font-weight:700;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.04em}
  .ads-filtro-tot{margin-left:0;flex-basis:100%}
  .ads-filtros select{max-width:100%;flex:1 1 160px}
}
/* ==== FRENTE A · aplicar preço na tela (04/11) ==== */
/* Concorrentes: "Aplicar R$ X" ao lado do preço recomendado e a barra única do lote "Dá para ganhar" */
.ap-aplicar{margin-left:6px;vertical-align:baseline}
.ap-depois{display:inline-block;margin-left:6px;font-style:normal;font-size:var(--txt-xs);font-weight:650;color:var(--tinta-3)}
.ap-depois.neg{color:var(--neg)}
.ap-sug .ap-aplicar{margin-left:8px}
.ap-lote{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 12px;padding:9px 14px;border:1px solid var(--linha);
  border-radius:12px;background:var(--card-2);font-size:var(--txt-sm);color:var(--tinta-2)}
.ap-lote>span{flex:1 1 280px}
.ap-lote b{color:var(--tinta)}
/* Degraus: o nome abre a janela do anúncio; a marca e o "Aplicar o degrau" na linha; o lote numa barra */
.ge-nome .dg-nome{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ge-nome .dg-nome:hover{color:var(--indigo);text-decoration:underline}
.dg-marca{flex:none;width:16px;height:16px;margin:0;accent-color:var(--indigo);cursor:pointer}
.ge-cab .dg-marca{vertical-align:-3px;margin-right:6px}
.dg-aplicar{white-space:normal;line-height:1.15;text-align:center}
.dg-lote{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:10px 0 0;padding:9px 14px;border:1px solid var(--linha);
  border-radius:12px;background:var(--card-2);font-size:var(--txt-sm);color:var(--tinta-2)}
.dg-lote>span{flex:1 1 260px}
/* Simulador: "Usar este preço" dentro do cartão do cenário */
.sim-cartao .sim-usar{align-self:flex-start;margin-top:6px}
/* Reajuste e Editor: o selo do preço automático (só quando consultado) */
.rj-auto{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:var(--txt-xs);font-weight:700;color:#7a5200}
small.rj-auto{display:flex}
.alt-mini.rj-auto{background:#fff4d6;border-color:#f3dc9b;color:#7a5200}
.rj-auto-ler{margin-left:auto}
/* janela do anúncio: o aviso de "em revisão, esperando correção" nas abas Ficha e Texto */
.alt-correcao{background:#fff8ea;border:1px solid #f3dc9b;border-radius:10px;padding:8px 12px}
/* ==== FRENTE E · reposição (04/11) ==== */
/* a situação (Acabou / Pedir agora / Tem folga / A caminho) como pílulas na MESMA barra do fornecedor: nenhum menu novo */
.repo-estados{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;margin-top:2px;border-top:1px dashed var(--linha)}
.repo-est-faltou:not(.ativa) .ap-pil-n,.repo-est-pedirAgora:not(.ativa) .ap-pil-n{color:var(--neg)}
.repo-est-aCaminho:not(.ativa) .ap-pil-n{color:var(--deduz)}
/* "a caminho: 30 un, chega 19/11" embaixo do Comprar (e no pedido) */
.repo-caminho{display:block;margin-top:3px;font-style:normal;font-size:var(--txt-xs);font-weight:700;color:var(--deduz);line-height:1.25}
.repo-caminho.ruim{color:var(--neg)}
.ped-prod .repo-caminho{font-weight:600}
.ped-botoes{display:flex;flex-wrap:wrap;gap:8px}
/* o último pedido: o número, a chegada e o envio ao fornecedor */
.pc-ult{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding:10px 12px;border-radius:var(--raio-md);background:#f1f8f4;border:1px solid #cfe9d9}
.pc-envio{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.pc-zap{background:#1f9d55;border-color:#1f9d55;color:#fff;text-decoration:none}
.pc-zap:hover{background:#17803f;border-color:#17803f;color:#fff}
.pc-fone{width:170px;min-height:30px;padding:4px 8px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);font:inherit;font-size:var(--txt-sm)}
.pc-fone:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
/* "Pedidos a caminho": uma caixa recolhida no alto da Reposição */
.pc-cx{margin:0 0 14px;border:1px solid var(--linha);border-radius:var(--raio-lg);background:var(--card)}
.pc-cx>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:11px 14px;cursor:pointer;list-style:none;font-size:var(--txt-md)}
.pc-cx>summary::-webkit-details-marker{display:none}
.pc-cx>summary::after{content:'▾';margin-left:auto;color:var(--tinta-3);transition:transform .15s}
.pc-cx[open]>summary::after{transform:rotate(180deg)}
.pc-cx>summary>span{color:var(--tinta-2)}
.pc-cx>summary:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px;border-radius:var(--raio-lg)}
.pc-atraso{font-style:normal;padding:1px 8px;border-radius:999px;background:#fdecea;color:var(--neg);font-size:var(--txt-xs);font-weight:800}
.pc-cx>:not(summary){margin-left:14px;margin-right:14px}
.pc-cx>:last-child{margin-bottom:14px}
.pc-explica{margin-top:0;font-size:var(--txt-sm);color:var(--tinta-3)}
.pc-ped{margin-bottom:10px;padding:10px 12px;border:1px solid var(--linha);border-radius:var(--raio-md);background:#fbfbfe}
.pc-ped.atrasado{border-color:#f3b8b2;background:#fff8f7}
.pc-ped.fechado{opacity:.85}
.pc-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:var(--txt-sm)}
.pc-cab>b{font-family:ui-monospace,Menlo,Consolas,monospace}
.pc-forn{font-weight:700}
.pc-st{font-size:var(--txt-xs);text-transform:uppercase;letter-spacing:.3px}
.pc-datas,.pc-tot{color:var(--tinta-3)}
.pc-itens{margin:6px 0}
.pc-item{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:4px 0;border-top:1px dashed var(--linha);font-size:var(--txt-sm)}
.pc-item:first-child{border-top:0}
.pc-prod{flex:1 1 220px;min-width:0}
.pc-prod i{font-style:normal;color:var(--marca-escuro);font-weight:700}
.pc-qtd{color:var(--tinta-2);font-weight:600}
.pc-chegou{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--tinta-2)}
.pc-chegou input{width:70px;padding:4px 6px;border:2px solid var(--linha-forte);border-radius:var(--raio-sm);font:inherit;font-weight:800;text-align:right}
.pc-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pc-cancelar{margin-left:auto;color:var(--neg)}
.pc-hist{margin:4px 0 10px}
.pc-ml{margin:6px 0 0;font-size:var(--txt-sm);color:var(--pos);font-weight:600}
.pc-texto{white-space:pre-wrap;font:inherit;font-size:var(--txt-sm);margin:0;user-select:all}
@media (max-width:640px){
  .pc-fone{width:100%}
  .pc-cancelar{margin-left:0}
  .ped-botoes{width:100%}
  .ped-botoes .btn{flex:1 1 auto;justify-content:center}
}
/* ==== FRENTE B · pedidos e operação (04/11) ==== */
/* a caixinha do lote mora na coluna da data: a coluna cresce o tamanho dela */
.pd-cab,.pd-item summary{grid-template-columns:76px minmax(0,1fr) 104px 104px 62px 118px}
.pd-data{display:flex;align-items:center;gap:7px;white-space:nowrap}
.pd-marca{width:16px;height:16px;margin:0;flex:none;accent-color:var(--indigo);cursor:pointer}
/* a barra dos marcados: uma linha só, presa no topo enquanto a lista rola */
.pd-lote{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap;
  padding:7px 12px;border:1px solid var(--linha);border-radius:var(--raio-md);background:var(--card);font-size:var(--txt-md);color:var(--tinta-2)}
.pd-lote-todos{display:inline-flex;align-items:center;gap:7px;cursor:pointer;margin-right:auto}
.pd-lote-todos input{width:16px;height:16px;margin:0;accent-color:var(--indigo)}
.pd-lote-fora{font-size:var(--txt-sm);color:var(--tinta-3);cursor:help}
/* o selo do envio no pedido: falta NF/etiqueta (âmbar), perto do prazo (âmbar forte), atrasado (vermelho) */
.pd-envio{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:var(--raio-pill);font-size:var(--txt-xs);font-weight:var(--peso-bold);
  font-style:normal;background:var(--card-2);border:1px solid var(--linha-forte);color:var(--tinta-2);white-space:nowrap}
.pd-envio.falta{background:#fff7e6;border-color:#f0d9a8;color:var(--atencao-txt)}
.pd-envio.perto{background:#fff1d6;border-color:#e8b45a;color:var(--atencao-txt)}
.pd-envio.atrasado{background:#fdeceb;border-color:#f0b4b0;color:var(--neg)}
.pd-envio-txt{color:var(--tinta-2)}
/* com o selo, "#pedido · canal · itens" ficou mais comprido e espremia o nome do produto a zero (uma letra por linha):
   o nome guarda um mínimo e, sem lugar, a linha de baixo quebra */
.pd-prodnome{flex-wrap:wrap;row-gap:2px}
.pd-prodnome b{min-width:min(180px,100%)}
.pd-prodnome em{flex:0 1 auto;min-width:0}
/* o estado do comprador, no fim da barra de filtros */
.pd-uf{font:inherit;font-size:var(--txt-md);font-weight:650;color:var(--tinta-2);background:var(--card);
  border:1px solid var(--linha-forte);border-radius:var(--raio-pill);padding:6px 10px;cursor:pointer}
.pd-uf.ativo{background:var(--indigo);border-color:var(--indigo);color:#fff}
/* o Mapa de vendas: estado com venda é clicável (abre Pedidos nele) */
.gr-uf-ir{cursor:pointer}
.gr-linha.gr-uf-ir:hover b{color:var(--indigo);text-decoration:underline}
/* Lucro por loja: a linha clicada abre os produtos dela, logo embaixo */
.lg-prods{min-width:1040px;padding:8px 12px 12px 22px;background:var(--card-2);border-bottom:1px solid var(--linha)}
.lg-prods-tit,.lg-prods-mais{margin:2px 0 8px;font-size:var(--txt-sm);color:var(--tinta-3)}
.lg-prods-mais{margin:8px 0 0}
.lg-prod{display:grid;grid-template-columns:minmax(200px,2fr) 80px 118px 118px 80px 52px;gap:9px;align-items:center;
  padding:5px 0;font-size:var(--txt-md);border-top:1px dashed var(--linha)}
.lg-prod-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--tinta)}
@media (max-width:900px){
  .pd-item summary{grid-template-columns:70px minmax(0,1fr) 84px auto}
  .lg-prods{min-width:0;padding-left:12px}
  .lg-prod{grid-template-columns:minmax(0,1fr) auto auto;row-gap:2px}
  .lg-prod-nome{grid-column:1/-1}
}
/* ==== FRENTE D · atendimento (04/11) ==== */
/* Perguntas: marcar várias, a barra de responder várias, a idade em cor e o histórico das respondidas */
.fd-sel{display:inline-flex;align-items:center;gap:5px;margin-right:6px;font-size:var(--txt-xs);color:var(--tinta-3);cursor:pointer;vertical-align:middle}
.fd-sel input{width:16px;height:16px;margin:0;accent-color:#4f46e5;cursor:pointer}
.fd-varias{margin:6px 0 4px;padding:8px 10px;border:1px dashed var(--linha-forte);border-radius:var(--raio-sm);background:#f8faff}
.fd-varias b{font-size:var(--txt-sm);color:var(--tinta-2);font-weight:600}
.fd-varias select{font:inherit;font-size:var(--txt-xs);padding:4px 6px;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);background:var(--card)}
.fd-varias small{flex:1 1 100%;font-size:var(--txt-xs);color:var(--tinta-2)}
.fd-varias small:empty{display:none}
.fd-ordem{margin:-4px 0 4px}
.fd-idade,.fd-rep{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-style:normal;font-size:var(--txt-xs);font-weight:650;vertical-align:middle}
.fd-idade.aviso,.fd-rep.aviso,.fd-espera.aviso{background:#fef3c7;color:#78350f}
.fd-idade.ruim,.fd-rep.ruim,.fd-espera.ruim{background:#fdeeee;color:#7f1d1d}
.fd-rep.bom{background:#eafaf0;color:#14532d}
.fd-resp p.fd-resposta{margin:2px 0 4px;padding:6px 10px;border-left:3px solid #4f46e5;border-radius:0 var(--raio-sm) var(--raio-sm) 0;background:#f5f6ff;font-size:var(--txt-sm);color:var(--tinta-2)}
/* Mensagens: a lida sem resposta e o tempo de espera */
.msg-item.fd-lida{border-left-color:#f59e0b}
.msg-item.fd-lida .msg-av{background:#fef3c7}
.fd-espera{padding:1px 8px;border-radius:999px;font-style:normal;white-space:nowrap}
/* Reclamações: Abertas | Fechadas separadas dos outros filtros, a busca e o produto na linha */
.fd-sep{width:1px;height:22px;background:var(--linha-forte);margin:0 2px}
.edm-fl .fd-busca{flex:1;min-width:200px;font:inherit;font-size:var(--txt-sm);padding:6px 10px;border:1px solid var(--linha-forte);border-radius:999px;background:var(--card)}
.rc-cab em.fd-rc-prod{color:var(--tinta-2)}
.rc-prazo .fd-rep{margin:2px 0 0}
@media (max-width:560px){ .fd-sep{display:none} .edm-fl .fd-busca{min-width:0;flex-basis:100%} }