@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
/* 25/08/2026: a familia do sistema virou Inter. Antes eram tres vozes --
   Archivo nos titulos, IBM Plex Sans no corpo e IBM Plex Mono em todo numero.
   O mono deixava os numeros com cara de terminal; a referencia que o Roderjan
   mandou usa uma sans so, com algarismos de largura fixa. Entao --fu, --fb e
   --fn passaram a ser Inter (o alinhamento das colunas vem de
   font-variant-numeric:tabular-nums, que ja estava aplicado) e sobrou --fc,
   ainda IBM Plex Mono, para o que e codigo de verdade: SKU e numero de pedido,
   onde ler caractere por caractere importa mais do que ficar bonito. */
:root{--s5:#b4531f;--s6:#c2185b;--s7:#9a6b00;--fundo:#eef1f5;--sup:#fff;--sup2:#f6f8fa;--linha:#dbe1e8;--linha2:#eceff3;--t1:#101720;--t2:#4a5866;--t3:#7d8a98;--s1:#2a78d6;--s2:#eb6834;--s3:#1f7a5a;--s4:#8e5bd0;--neg:#c0392b;--dest:#0f6d7a;--fu:'Inter',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif;--fn:'Inter',system-ui,sans-serif;--fc:'IBM Plex Mono',ui-monospace,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s5:#d08b52;--s6:#ec6a9c;--s7:#e0b24a;--fundo:#0d1218;--sup:#151d26;--sup2:#1b242e;--linha:#2a3641;--linha2:#212b35;--t1:#e8edf2;--t2:#a7b4c0;--t3:#76838f;--s1:#3987e5;--s2:#e2743f;--s3:#34a578;--s4:#a87ce0;--neg:#e5675a;--dest:#3fa2ae}}
:root[data-theme="dark"]{--s5:#d08b52;--s6:#ec6a9c;--s7:#e0b24a;--fundo:#0d1218;--sup:#151d26;--sup2:#1b242e;--linha:#2a3641;--linha2:#212b35;--t1:#e8edf2;--t2:#a7b4c0;--t3:#76838f;--s1:#3987e5;--s2:#e2743f;--s3:#34a578;--s4:#a87ce0;--neg:#e5675a;--dest:#3fa2ae}
*{box-sizing:border-box}
body{margin:0;display:flex;min-height:100vh;background:var(--fundo);color:var(--t1);font-family:var(--fb);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.lado{width:214px;flex:0 0 214px;background:var(--sup);border-right:1px solid var(--linha);padding:18px 0 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.marca{font-family:var(--fu);font-weight:700;font-size:16px;letter-spacing:-.01em;padding:0 18px 10px;display:flex;align-items:center;gap:8px}
.pt{width:9px;height:9px;border-radius:2px;background:var(--dest)}
.gr{font-family:var(--fu);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);padding:14px 18px 5px}
.it{display:block;padding:7px 18px;color:var(--t2);text-decoration:none;border-left:2px solid transparent}
.it:hover{background:var(--sup2);color:var(--t1)}
.it.on{color:var(--dest);border-left-color:var(--dest);background:var(--sup2);font-weight:600}
.pe{margin-top:auto;padding:13px 11px 0;border-top:1px solid var(--linha2)}
.rot-conta{font-family:var(--fu);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin-bottom:5px;padding-left:2px}
.barra-conta{display:flex;gap:5px;align-items:stretch}
.barra-conta select{flex:1;min-width:0;font-family:var(--fn);font-size:12px;padding:7px 2px 7px 6px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1)}
.eng{flex:0 0 auto;width:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t2);text-decoration:none}
.eng:hover,.eng.on{border-color:var(--dest)}
.eng:hover{color:var(--dest)}
.eng.on{color:#fff;background:var(--dest)}
.eng svg{width:15px;height:15px;display:block}
.coleta-info{font-family:var(--fn);font-size:10px;color:var(--t3);line-height:1.6;margin-top:9px;padding-left:2px}
main{flex:1;min-width:0;padding:22px 26px 60px}
.topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
h1{font-family:var(--fu);font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
.sub{margin:2px 0 0;color:var(--t3);font-family:var(--fn);font-size:12px}
.presets{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.presets a{font-family:var(--fn);font-size:11px;padding:5px 10px;border:1px solid var(--linha);border-radius:3px;color:var(--t2);text-decoration:none;background:var(--sup)}
.presets a.on{background:var(--dest);border-color:var(--dest);color:#fff}
.aviso{background:var(--sup);border:1px solid var(--linha);border-left:3px solid var(--s2);border-radius:4px;padding:10px 13px;margin:0 0 12px;color:var(--t2);font-size:13px}
.aviso a{color:var(--dest)}
.filtros{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;background:var(--sup);border:1px solid var(--linha);border-radius:5px;padding:12px 14px;margin-bottom:16px}
.filtros label{display:flex;flex-direction:column;gap:4px;font-family:var(--fu);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.filtros .cresce{flex:1;min-width:230px}
.filtros input,.filtros select{font-family:var(--fn);font-size:13px;padding:6px 8px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1);width:100%}
.filtros button{font-family:var(--fu);font-weight:600;font-size:13px;padding:7px 16px;border:0;border-radius:3px;background:var(--dest);color:#fff;cursor:pointer}
.limpar{font-size:13px;color:var(--t3);text-decoration:none;padding:7px 4px}
:focus-visible{outline:2px solid var(--dest);outline-offset:2px}
/* align-items:start faz cada card crescer sozinho: abrir um nao estica os outros */
/* 25/08/2026: os cards passaram a ter a MESMA altura. Antes era align-items:start,
   entao cada um encolhia ate o proprio conteudo e a fileira ficava serrilhada --
   o "Custos e taxas" tem quatro linhas de detalhe e o "Gasto ADS" nenhuma.
   Agora a grade estica todos e o bloco "periodo anterior" e empurrado para o
   rodape com margin-top:auto, entao a comparacao alinha em todos os cards. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:11px;margin-bottom:6px;align-items:stretch}
.kpi{background:var(--sup);border:1px solid var(--linha);border-top:2px solid var(--linha);border-radius:5px;padding:13px 15px;
  display:flex;flex-direction:column;height:100%}
.kpi .comp{margin-top:auto;padding-top:10px}
.kpi .sub{flex:0 0 auto}
.kpi-caixa{display:flex;flex-direction:column;height:100%}
.kpi-caixa>.kpi-bt{flex:1 1 auto;display:flex}
.kpi-caixa>.kpi-bt>.kpi{width:100%}
.kpi.t-a{border-top-color:var(--s1)}.kpi.t-b{border-top-color:var(--s2)}.kpi.t-c{border-top-color:var(--s3)}.kpi.t-ruim{border-top-color:var(--neg)}
.rot{font-family:var(--fu);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.val{font-family:var(--fn);font-size:21px;font-weight:500;margin-top:5px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi.t-a .val{color:var(--s1)}.kpi.t-b .val{color:var(--s2)}.kpi.t-c .val{color:var(--s3)}.kpi.t-ruim .val{color:var(--neg)}
.kpi .sub{font-size:11px;color:var(--t3);margin-top:3px;font-family:var(--fn)}
.kpi .ads-lido,.kpi .lido{display:inline-block;margin-top:4px;font-size:10px;letter-spacing:.04em;color:var(--t3);opacity:.9}
.kpi .ads-lido.ads-atrasado,.kpi .ads-lido.ads-sem{color:var(--neg);font-weight:700;opacity:1}
.kpi.clicavel{cursor:pointer}
.kpi.clicavel:hover{border-color:var(--dest)}
.kpi.clicavel.aberto{box-shadow:inset 0 0 0 1px var(--dest)}
.kpi .maisinfo{font-family:var(--fn);font-size:10.5px;color:var(--dest);margin-top:8px;padding-top:6px;border-top:1px solid var(--linha2)}
.comp{font-family:var(--fn);font-size:11px;margin-top:6px;padding-top:6px;border-top:1px solid var(--linha2);font-variant-numeric:tabular-nums}
.comp .rot-comp{font-family:var(--fu);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.comp .linha-comp{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:1px}
.comp .vc{color:var(--t2)}
.comp .pc.sobe{color:var(--s3)}
.comp .pc.cai{color:var(--neg)}
.comp .pc.neutro{color:var(--t3)}
.comp .parcial{color:var(--t3);font-size:10px;opacity:.85;margin-top:1px}
.nota-comp{font-family:var(--fn);font-size:11px;color:var(--t3);margin:0 0 20px}
.bloco{margin-bottom:26px}
.bloco h2{font-family:var(--fu);font-size:15px;font-weight:600;margin:0}
.leg{color:var(--t3);font-size:12px;margin:2px 0 10px}
.atencao-bloco{border-left:3px solid var(--neg);padding-left:14px}
.custos-bloco{border-left:3px solid var(--s2);padding-left:14px}
.proj-bloco{border-left:3px solid var(--s1);padding-left:14px}
.breve-bloco{border-left:3px dashed var(--linha);padding-left:14px}
.breve-bloco h2{color:var(--t2)}
.tag-breve{font-family:var(--fu);font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:5px 12px;border:1px dashed var(--t3);border-radius:20px;color:var(--t3);white-space:nowrap}
.lista-custos{display:grid;gap:10px}
.lc{background:var(--sup);border:1px solid var(--linha);border-radius:5px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:end}
.lc-nome b{display:block;font-weight:600;font-size:13.5px}
.lc-nome span{font-family:var(--fc);font-size:11.5px;color:var(--t3)}
.lc-campo{display:flex;gap:8px;align-items:flex-end}
.lc-campo label{display:flex;flex-direction:column;gap:4px;font-family:var(--fu);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.lc-campo input{font-family:var(--fn);font-size:14px;padding:6px 8px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1);width:150px}
.lc .recado{grid-column:1/-1;margin-top:0}
.cabecalho-bloco{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.cabecalho-bloco .leg{margin:2px 0 0}
.modos{display:flex;flex:0 0 auto}
/* 03/09/2026: a barra do bloco "Anuncios de catalogo" -- segura o grupo
   .modos (Filtros) e o botao Atualizar lado a lado, com respiro entre eles.
   O Atualizar fica FORA do .modos de proposito: ali dentro ele herdaria o
   desenho de controle segmentado e perderia a cor de destaque. */
.barra-cat{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- aba Fluxo: a venda dia a dia (03/09/2026) ----
   A tabela tem trinta e quatro colunas e rola de lado. Quem prende as tres
   primeiras (arquivar, produto e total) e o colunasFixas(), pelo data-fixa=3
   no <table> -- aqui embaixo so vai o que e proprio desta tela. */
/* 03/09/2026, pedido do Roderjan: "quero que a parte dos numeros de vendas seja
   maior do que a do titulo".

   Antes a tabela era width:auto com min-width:100%. Nesse arranjo o navegador
   distribui a folga entre as colunas na proporcao do CONTEUDO -- e o titulo do
   anuncio e o conteudo mais comprido da tabela, entao ele levava quase tudo.
   Num periodo de cinco dias a coluna do produto ficava com 60% da largura e as
   cinco colunas de numero se espremiam no que sobrava, que e o oposto do que a
   tela serve para mostrar.

   Com table-layout:fixed as tres colunas presas ficam com a largura exata que
   pedem e TODA a folga vai para as colunas de dia, que nao declaram largura --
   em layout fixo, coluna sem largura divide o resto em partes iguais. A largura
   minima da tabela vem do --fx-dias que o app.js escreve na tag: assim um
   periodo longo continua rolando de lado, e um curto preenche a tela. */
table.fluxo{table-layout:fixed;width:100%;min-width:calc(464px + var(--fx-dias,30) * 34px)}
table.fluxo td{vertical-align:middle}
/* as larguras moram no colgroup, e nao nas celulas: ver o comentario no app.js.
   A soma da exatamente 100% da tabela, entao nao sobra folga para o navegador
   repartir -- e e isso que mantem a coluna do produto no lugar. */
/* a fileira-regua: existe so para declarar largura. Sem altura, sem borda e
   sem tinta -- ver o comentario no app.js. */
table.fluxo tr.fx-regua th{height:0;padding:0;border:0;line-height:0;font-size:0}
table.fluxo tr.fx-regua th.fx-dia{width:calc((100% - 464px) / var(--fx-dias,30))}

/* o botao de arquivar fica na ESQUERDA, junto da foto, e nao no fim da linha
   como o lixo das outras tabelas: no fim, alcanca-lo exigiria rolar as trinta
   colunas de dias. */
table.fluxo th.fx-acao,table.fluxo td.fx-acao{width:40px;min-width:40px;padding-right:0}
.fx-arq{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid var(--linha);border-radius:4px;background:var(--sup);color:var(--t3);cursor:pointer}
.fx-arq svg{width:14px;height:14px}
.fx-arq:hover{border-color:var(--s2);color:var(--s2)}
.fx-arq.voltar:hover{border-color:var(--s3);color:var(--s3)}
.fx-arq:disabled{opacity:.45;cursor:default}

/* largura fixa no produto: o deslocamento das colunas presas e medido pela
   largura real, entao um titulo comprido empurraria o Total para fora da tela. */
table.fluxo th.fx-prod,table.fluxo td.fx-prod{width:300px;min-width:300px;max-width:300px}
.fx-nome{display:flex;flex-direction:column;gap:2px;min-width:0}
.fx-nome>a,.fx-nome>.nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.fx-sub{color:var(--t3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- a estrela que fixa no topo (03/09/2026) ----
   Vazada quando solta, cheia quando fixada: a forma ja diz o estado, entao
   quem nao distingue a cor continua lendo pelo preenchimento. */
.fx-estrela{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;margin-top:9px;border:0;background:none;cursor:pointer;
  color:var(--t3);fill:none}
.fx-estrela svg{width:15px;height:15px}
.fx-estrela:hover{color:var(--s7)}
.fx-estrela.on{color:var(--s7);fill:var(--s7)}
.fx-estrela:disabled{opacity:.45;cursor:default}

table.fluxo th.fx-tot,table.fluxo td.fx-tot{width:62px;min-width:62px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* as trinta colunas de dia: estreitas, numero centralizado e alinhado pela
   casa decimal, para a linha poder ser lida como um grafico de barras. */
/* ---- a fileira de cima: uma faixa por semana ----
   As tres celulas da esquerda se repetem nas duas fileiras (sem rowspan), com
   altura fixa de 22px porque a fileira de baixo precisa saber onde grudar. */
table.fluxo thead .fx-lin-sem th{height:22px;padding:3px 8px;line-height:16px;top:0}
table.fluxo thead .fx-lin-dia th{top:22px}
th.fx-sem{text-align:center;color:var(--t2);letter-spacing:.02em;text-transform:none;font-size:10.5px;
  background:var(--sup2);border-bottom:1px solid var(--linha)}

/* a divisa entre semanas: uma linha so, na primeira coluna de cada semana. E o
   que faz cada semana ser lida como um bloco em vez de trinta colunas soltas. */
table.fluxo th.ini-sem,table.fluxo td.ini-sem{border-left:2px solid var(--linha)}

/* as colunas de dia: estreitas, numero centralizado e alinhado pela casa, para
   a linha poder ser lida de relance como uma faixa de intensidade. */
/* A largura das colunas de dia e o QUE SOBRA, dividido pelo numero de dias.
   Nao da para deixar 'auto': em table-layout:fixed o Chrome reparte a folga
   proporcionalmente as larguras declaradas, e com 40/300/62 declarados a
   coluna do produto levava 69% da tabela (medido: 975px de 1410 num periodo
   de cinco dias, com os dias em 13px). Declarando TODAS as larguras, a soma
   da exatamente 100% e nao sobra nada para repartir.
   Em periodo longo a tabela vai para o min-width e a mesma conta devolve os
   34px (ou 46px com setas) por dia, voltando a rolar de lado. */
table.fluxo th.fx-dia,table.fluxo td.fx-dia{width:calc((100% - 464px) / var(--fx-dias,30));text-align:center;padding-left:2px;padding-right:2px;font-variant-numeric:tabular-nums}
table.fluxo th.fx-dia{line-height:1.15;padding-top:5px;padding-bottom:5px}
.fx-ds{display:block;font-size:9px;color:var(--t3);text-transform:lowercase;letter-spacing:0}
.fx-dd{display:block;font-size:11px;color:var(--t2)}
/* hoje se marca no CABECALHO, nunca no fundo da celula: o fundo ja e a escala
   de cor, e um destaque ali brigaria com o dado. */
table.fluxo th.fx-dia.hoje .fx-ds,table.fluxo th.fx-dia.hoje .fx-dd{color:var(--dest);font-weight:700}

/* dia sem venda nao vira zero: fica vazio. Trinta zeros numa linha escondem os
   dias que tiveram venda, que e o que a pessoa foi olhar. A celula vazia deixa
   passar a listra da linha, que e o que ajuda a seguir o produto ate o fim. */
table.fluxo td.fx-dia.zero{color:transparent}

/* ---- coluna do saldo no Full (05/09/2026) ----
   Mesma largura e alinhamento do Total, ao lado dele. Entra na faixa presa a
   esquerda: o data-fixa do <table> passou de 3 para 4. */
table.fluxo th.fx-est,table.fluxo td.fx-est{width:62px;text-align:right;
  font-variant-numeric:tabular-nums}
table.fluxo td.fx-est{color:var(--t2)}

/* ---- cabecalho da semana clicavel ---- */
table.fluxo th.fx-sem{cursor:pointer}
table.fluxo th.fx-sem:hover{color:var(--dest)}
table.fluxo th.fx-sem:focus-visible{outline:2px solid var(--dest);outline-offset:-2px}
table.fluxo th.fx-sem.aberta{color:var(--dest)}
table.fluxo th.fx-sem.aberta::after{content:' ×';font-weight:700}

/* ---- atalhos de periodo ---- */
.fx-atalhos{margin-top:0}
.fx-atalhos a{font-family:var(--fn);font-size:11px;padding:5px 10px;border:1px solid var(--linha);
  border-radius:3px;color:var(--t2);background:var(--sup);text-decoration:none}
.fx-atalhos a:hover{border-color:var(--dest);color:var(--dest)}
.fx-atalhos a.on{background:var(--dest);border-color:var(--dest);color:#fff}

/* ---- o balaozinho do dia ---- */
.fx-balao{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  min-width:170px;padding:9px 11px;border:1px solid var(--linha);border-radius:6px;
  background:var(--sup2);box-shadow:0 8px 24px rgba(0,0,0,.35);
  font-family:var(--fn);font-size:12px;color:var(--t1)}
.fx-b-dia{font-family:var(--fu);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t3);margin-bottom:6px}
.fx-b-sku{font-family:var(--fn);font-size:11px;color:var(--t3);margin:-4px 0 6px}
/* UM grid para o balao todo, e cada linha entra nele com display:contents.
   Com um grid por linha as colunas nao se falavam e cada numero terminava num
   lugar -- foi o que o Roderjan viu em 05/09/2026. */
.fx-b-corpo{display:grid;grid-template-columns:1fr auto auto;
  align-items:baseline;column-gap:12px;line-height:1.75}
.fx-b-l{display:contents}
.fx-b-l span{color:var(--t3)}
.fx-b-l b{font-variant-numeric:tabular-nums;text-align:right}
.fx-b-vazio{grid-column:1/-1;color:var(--t3)}
/* 05/09/2026: a porcentagem ao lado do dinheiro, na margem e na margem pos ADS,
   e a cor no valor -- verde quando sobra, vermelho quando falta. */
.fx-b-pc{font-style:normal;color:var(--t3);font-weight:400;text-align:right;
  font-variant-numeric:tabular-nums}
/* as mesmas cores do COR_COL, o mapa das tabelas e do grafico */
.fx-b-l b.fx-b-fat{color:var(--s1)}
.fx-b-l b.fx-b-un{color:var(--s5)}
.fx-b-l b.fx-b-ads{color:var(--s2)}
.fx-b-l b.fx-b-mais{color:var(--s3)}
/* prejuizo continua vermelho, venca quem vencer acima */
.fx-b-l b.fx-b-menos{color:var(--neg)}
.fx-b-sep{grid-column:1/-1;border-top:1px solid var(--linha);margin:7px 0 5px}
/* 05/09/2026, contra a media diaria do proprio anuncio. Sao duas cores, e as
   duas dependem do campo de queda:
     vermelho  nao vendeu (sempre), ou caiu mais que o percentual do campo
     verde     vendeu e ficou dentro do percentual
     sem cor   vendeu com o campo vazio -- sem percentual nao ha o que medir
   O verde saiu e voltou no mesmo dia: saiu quando a regra era "qualquer queda",
   que pintava quase tudo, e voltou amarrado ao campo.
   Mistura sobre --sup para o numero continuar legivel nos dois. */
table.fluxo td.fx-dia.baixa{background:color-mix(in srgb,var(--neg) 30%,var(--sup))}
table.fluxo td.fx-dia.ok{background:color-mix(in srgb,var(--s3) 30%,var(--sup))}
/* dia sem venda e vermelho: o fundo e o aviso, e o numero continua escondido */
table.fluxo td.fx-dia.baixa.zero{color:transparent}

/* o campo, ao lado das abas Ativos/Arquivados */
.fx-queda{display:inline-flex;align-items:center;gap:6px;font-family:var(--fn);font-size:11px;
  color:var(--t3);white-space:nowrap}
.fx-queda input{width:52px;font-family:var(--fn);font-size:12px;padding:4px 6px;text-align:right;
  border:1px solid var(--linha);border-radius:3px;background:var(--sup);color:var(--t1)}
.fx-queda input:focus{outline:none;border-color:var(--dest)}

/* ---- a escala de cor (03/09/2026) ----
   Magnitude pede UM hue, do claro ao escuro. O hue e o --s3 -- o verde do
   painel, o mesmo de "positivo" no resto da tela -- a pedido do Roderjan em
   03/09/2026. Os cinco degraus sao os mesmos nos dois temas: como --sup e --s3
   ja invertem entre claro e escuro, o color-mix inverte a ancora sozinho -- no
   claro a rampa escurece e no escuro ela clareia, que e o comportamento
   correto e nao um espelho automatico.

   AS PORCENTAGENS NAO SAO REDONDAS DE PROPOSITO. Com a rampa antiga eram
   10/24/42/62/86; no verde, 86% cai num meio-tom (#3e8d71) que nao serve nem
   para tinta clara (4.00) nem para escura (4.51 no limite), e 70% reprovava no
   tema escuro (4.29). Varri a faixa e parei em 10/26/46/64/100 -- o q5 e o --s3
   puro, sem mistura.

   Medido, contraste do numero contra o fundo do degrau:
     claro  15.80 / 12.49 / 9.18 / 6.76 / 5.26
     escuro 12.52 /  9.64 / 6.59 / 4.77 / 6.08
   Todos acima de 4.5:1. So o q5 troca de tinta -- dai --fx-tinta5. */
:root{--fx-tinta5:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fx-tinta5:#08131a}}
:root[data-theme="dark"]{--fx-tinta5:#08131a}


/* ---- o dia que vendeu menos da metade da media (03/09/2026) ----
   Um degrau so, e nao uma segunda rampa: e ESTADO, nao intensidade. Vence o
   verde porque a celula tem um fundo so e o aviso importa mais que o tamanho
   do dia.

   28% de --neg foi medido, nao escolhido no olho: e a mistura mais forte que
   ainda deixa a SETA vermelha legivel por cima (3,54 no claro, 3,49 no
   escuro). A 38% a seta cai para 2,9 e some dentro da propria celula.
   O numero fica em 11,72 (claro) e 9,69 (escuro), bem acima de 4,5:1. */
/* 04/09/2026: as tres cores passaram a comparar o dia com a media diaria do
   proprio anuncio, e nao com o maior dia da linha. Menos mistura de --s3 sobre
   o fundo escuro da uma verde MAIS ESCURA, entao "na media" fica abaixo de
   "acima da media" na escada -- foi assim que o Roderjan descreveu. */
/* dia sem venda entra como vermelho (zero e sempre menos que o piso), mas o
   numero continua escondido pelo .zero -- sobra so o fundo, que e o aviso. */

/* a caixinha da folga, na mesma fileira do calendario e do comparador */
  color:var(--t3);white-space:nowrap}
  border:1px solid var(--linha);border-radius:3px;background:var(--sup);color:var(--t1)}

/* ---- seguir a linha com o olho ----
   A listra ja vem do painel (tbody tr[data-zebra] td) e continua valendo nas
   celulas vazias. Nas celulas coloridas ela nao aparece -- e nem deve, ali
   quem manda e a escala. Entao o que amarra a linha de ponta a ponta e o
   hover: dois fios que atravessam as 34 colunas, inclusive por cima da cor. */
/* 2px de respiro do fundo em CIMA E EMBAIXO, e so. Sem isto os preenchimentos
   de linhas vizinhas se encostam e a tabela vira uma mancha -- a listra do
   painel nao atravessa celula pintada, entao nada separaria uma linha da outra
   no meio dos trinta dias.
   O respiro NAO vai nas laterais de proposito: colado na horizontal, os dias de
   uma semana formam uma faixa continua e a semana se le como um bloco, que e o
   pedido. Quem separa uma semana da outra e a divisa .ini-sem; se cada dia
   tambem tivesse folga dos lados, todas as colunas ficariam igualmente soltas e
   o agrupamento por semana sumiria.
   Celula sem venda fica lisa -- ali a listra da linha aparece. */

/* ---- seguir a linha com o olho ----
   Dois fios que atravessam as 34 colunas, inclusive por cima da cor. Nas
   celulas pintadas os fios vem ANTES do anel na lista de sombras, para ficarem
   por cima dele. */
table.fluxo tbody tr:hover td{box-shadow:inset 0 1px 0 var(--dest),inset 0 -1px 0 var(--dest)}

/* ---- as setas de subiu/desceu (03/09/2026) ----
   Verde e vermelho SOMEM em cima dos degraus fortes: medido, o verde cai para
   2,74:1 no q3 e 1,17:1 no q5, contra 3:1 de minimo para glifo. A saida e a
   regra de marca sobreposta -- um anel da cor da superficie em volta da seta,
   que a descola de qualquer fundo. Por isso os dois drop-shadow: um so deixa
   o anel fino demais na diagonal do triangulo.

   A direcao nao e dada SO pela cor: quem aponta para cima e verde, quem aponta
   para baixo e vermelho. Quem nao distingue as duas cores continua lendo a
   seta pela forma. */
.fx-controles{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
/* o calendario do Fluxo e o MESMO componente de Metricas (classe .filtros, que
   e o que as setinhas de um dia procuram). Aqui ele entra numa fileira de
   controles em vez de ser uma faixa sozinha, entao perde a margem de baixo e
   aperta o respiro interno. */
.fx-controles .fx-periodo{margin-bottom:0;padding:8px 10px}

.fx-n{vertical-align:middle}
  border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  /* halo curto e repetido: com raio maior que 1px o borrao invade um triangulo
     de 8px e a seta sai vazada em cima dos degraus fortes -- lida como forma,
     mas perde a cor justamente no dia que mais interessa. */
  filter:drop-shadow(0 0 .9px var(--sup)) drop-shadow(0 0 .9px var(--sup)) drop-shadow(0 0 .9px var(--sup))}
/* seta sozinha, em dia que zerou: sem numero ao lado ela nao precisa de recuo */
table.fluxo tbody tr:hover td.fx-prod .fx-nome>a,
table.fluxo tbody tr:hover td.fx-prod .fx-nome>.nome{color:var(--dest)}
.modos a,.modos button{font-family:var(--fu);font-weight:600;font-size:12px;padding:6px 14px;border:1px solid var(--linha);color:var(--t2);text-decoration:none;background:var(--sup);cursor:pointer;line-height:1.5}
.modos>*:first-child{border-radius:3px 0 0 3px}
.modos>*:last-child{border-radius:0 3px 3px 0}
.modos>*:only-child{border-radius:3px}
.modos>*+*{border-left:0}
.modos a.on,.modos button.on{background:var(--dest);border-color:var(--dest);color:#fff}
.painel-cols{background:var(--sup);border:1px solid var(--linha);border-radius:5px;padding:14px;margin-bottom:12px}
.grade-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:7px 14px;margin:10px 0 13px}
.grade-cols label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);cursor:pointer}
.grade-cols input{accent-color:var(--dest);width:15px;height:15px;flex:0 0 auto}
.grade-cols .mestre{grid-column:1/-1;font-weight:600;color:var(--t1);border-bottom:1px solid var(--linha2);padding-bottom:9px;margin-bottom:2px}
.acoes-cols{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--linha2);padding-top:12px}
.acoes-cols button{font-family:var(--fu);font-weight:600;font-size:12px;padding:6px 13px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t2);cursor:pointer}
.acoes-cols button:hover{border-color:var(--dest);color:var(--dest)}
.acoes-cols button.destaque{background:var(--dest);border-color:var(--dest);color:#fff}
.acoes-cols button.destaque:hover{color:#fff;opacity:.92}
.acoes-cols .marca-padrao{font-family:var(--fn);font-size:11px;color:var(--t3);margin-left:auto}
.paginacao{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:11px;font-family:var(--fn);font-size:12px;color:var(--t3)}
.paginacao .info{flex:1 1 auto;min-width:170px}
.paginacao .botoes{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.pg{min-width:30px;height:30px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--linha);border-radius:3px;color:var(--t2);text-decoration:none;background:var(--sup);font-variant-numeric:tabular-nums}
a.pg:hover{color:var(--dest);border-color:var(--dest)}
.pg.on{background:var(--dest);border-color:var(--dest);color:#fff}
.pg.seta{font-size:17px;line-height:1;padding-bottom:2px}
.pg.desativado{opacity:.38;border-color:var(--linha2)}
.pg.reticencias{border:0;background:none;min-width:14px;padding:0}
.tw{overflow-x:auto;background:var(--sup);border:1px solid var(--linha);border-radius:5px}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th{font-family:var(--fu);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);text-align:left;padding:9px 8px;border-bottom:1px solid var(--linha);white-space:nowrap;position:sticky;top:0;background:var(--sup)}
th.ord{cursor:pointer;user-select:none}
th.ord:hover{color:var(--t1);background:var(--sup2)}
th.ord:hover .seta{opacity:1}
th.ord a{color:inherit;text-decoration:none;display:block}
th.ativa{color:var(--dest)}
th .seta{margin-left:5px;font-size:10px;opacity:.42;letter-spacing:-1px}
th.ativa .seta{opacity:1;font-size:11px;letter-spacing:0}
td{padding:8px 8px;border-bottom:1px solid var(--linha2);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--sup2)}
th.n,td.n{text-align:right;font-family:var(--fn);font-variant-numeric:tabular-nums;white-space:nowrap}
td.neg{color:var(--neg)}
td.mono{font-family:var(--fc);font-size:12px;white-space:nowrap}
.prod{max-width:300px;min-width:180px}
/* 28/08/2026, pedido do Roderjan: "aqui tem muito espaço vago, dá pra ser mais
   justificado". Numa tabela de poucas colunas o navegador repartia a sobra
   IGUALMENTE entre todas: no Cadastro de SKUs a coluna de SKU ficava com 508px
   para escrever "PROT-PRETO", enquanto o título do produto -- o único texto que
   precisa de espaço -- quebrava em duas linhas ao lado do vão.
   Agora cada coluna encolhe até o conteúdo (width:1px é o pedido mínimo) e a
   folga inteira vai para a coluna do produto (width:100% é quem absorve).
   Em tabela larga, que já transborda, nada muda: não há folga para repartir. */
table th:not(.prod),table td:not(.prod){width:1px;white-space:nowrap}
table th.prod,table td.prod{width:100%;max-width:none}

/* ===== a coluna do produto presa a esquerda (03/09/2026) =====
   O "left" de cada celula presa vem do JS (colunasFixas), que e quem sabe a
   largura real da coluna. Aqui fica so o que nao depende de medida.

   O fundo e obrigatorio: sem ele o que rola por baixo apareceria ATRAVES da
   celula presa. Ele e o mais fraco de todos de proposito -- zebra, alerta,
   linha aberta e hover pintam TODOS os td da linha, tem seletor mais forte e
   continuam mandando, entao a celula presa nunca destoa da propria linha.

   O corte usa box-shadow inset, e nao border-right: borda somaria 1px a
   largura da coluna DEPOIS de o JS ter medido, e o "left" da coluna seguinte
   sairia deslocado. */
/* o fundo vem sozinho, num seletor de UMA classe: zebra (tr[data-zebra] td),
   alerta, linha aberta e hover pesam mais e continuam pintando a celula presa
   junto com o resto da linha. Com ".tw td.col-presa" este fundo ganharia
   deles e a coluna presa ficaria lisa no meio de linhas listradas. */
td.col-presa{background:var(--sup)}
.tw th{z-index:3}
.tw th.col-presa,.tw td.col-presa{position:sticky}
.tw td.col-presa{z-index:2}
.tw th.col-presa{z-index:4}
.tw th.col-presa-fim,.tw td.col-presa-fim{box-shadow:inset -1px 0 0 var(--linha)}
.tw.rolou-lado th.col-presa-fim,.tw.rolou-lado td.col-presa-fim{
  box-shadow:inset -1px 0 0 var(--linha),9px 0 12px -9px rgba(0,0,0,.55)}

/* o fantasma que acompanha o ponteiro no arrasto de card e de coluna */
.arrasta-fantasma{position:fixed;left:0;top:0;z-index:9997;pointer-events:none;
  transform-origin:top left;will-change:transform;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.arrasta-fantasma.f-card{opacity:.9}
.arrasta-fantasma.f-col{opacity:.95;font-family:var(--fu);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--t1);white-space:nowrap;
  padding:8px 12px;border-radius:6px;background:var(--sup2);border:1px solid var(--dest)}
td.abre{cursor:pointer}
/* 01/09/2026: a setinha que avisa que o SKU abre o dia a dia dos 30 dias.
   Mesmo desenho da seta dos cards, para nao inventar um simbolo novo. */
.abre-seta{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--t3);
  transition:transform .15s,color .15s}
.abre-seta svg{width:14px;height:14px;display:block}
td.abre:hover .abre-seta{color:var(--dest)}
td.abre.aberto .abre-seta{color:var(--dest);transform:rotate(180deg)}
td a.ml,td.abre .nome{color:var(--dest);text-decoration:underline;text-decoration-color:var(--linha);text-underline-offset:2px}
td a.ml:hover,td.abre:hover .nome{text-decoration-color:var(--dest)}
.pill{display:inline-block;padding:2px 9px;border-radius:10px;font-family:var(--fn);font-size:11px;white-space:nowrap}
.pill.atencao{background:rgba(192,57,43,.13);color:var(--neg)}
.pill.saudavel{background:rgba(31,122,90,.13);color:var(--s3)}
.pill.semgiro{background:var(--sup2);color:var(--t3);border:1px solid var(--linha2)}
.vazio{color:var(--t3);font-size:13px;background:var(--sup);border:1px solid var(--linha);border-radius:5px;padding:16px}
.cartao{background:var(--sup);border:1px solid var(--linha);border-radius:5px;padding:14px}
.detalhe{border-left:3px solid var(--dest);padding-left:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:1px solid var(--linha);border-radius:3px;padding:6px 10px;font-family:var(--fn);font-size:12px;color:var(--t2);background:var(--sup2)}
.chip b{color:var(--t1);font-weight:500}
.legenda{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px;font-size:12px;color:var(--t2)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:12px;height:10px;border-radius:2px;display:inline-block}
.legenda i.tr{height:0;border-top:2px solid currentColor;border-radius:0}
.envoltorio{position:relative}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}
.dica{position:absolute;background:var(--sup);border:1px solid var(--linha);border-radius:4px;padding:9px 12px;font-family:var(--fn);font-size:11.5px;pointer-events:none;white-space:nowrap;box-shadow:0 3px 16px rgba(0,0,0,.16);z-index:6;line-height:1.7}
.dica .band{color:var(--s2);font-weight:500;margin-top:3px}
.dica .sub2{padding-left:15px}
.fechar{font-family:var(--fu);font-weight:600;font-size:12px;padding:6px 14px;border:1px solid var(--linha);border-radius:3px;background:var(--sup);color:var(--t2);cursor:pointer}
.fechar:hover{color:var(--dest);border-color:var(--dest)}
.contas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.cc{background:var(--sup);border:1px solid var(--linha);border-radius:5px;padding:16px}
.cc.foco{border-color:var(--dest);box-shadow:inset 0 0 0 1px var(--dest)}
.cc h3{font-family:var(--fu);font-size:16px;margin:0 0 2px}
.cc .id{font-family:var(--fc);font-size:11px;color:var(--t3)}
.cc dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:12px 0;font-size:12.5px}
.cc dt{color:var(--t3)}
.cc dd{margin:0;text-align:right;font-family:var(--fn);font-variant-numeric:tabular-nums}
.imposto{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--linha2);padding-top:12px}
.imposto label{flex:1;display:flex;flex-direction:column;gap:4px;font-family:var(--fu);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.imposto input{font-family:var(--fn);font-size:14px;padding:6px 8px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1);width:100%}
.botao{font-family:var(--fu);font-weight:600;font-size:13px;padding:7px 16px;border:0;border-radius:3px;background:var(--dest);color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
.recado{font-size:12px;font-family:var(--fn);margin-top:8px;min-height:16px}
/* 09/10/2026: imposto Flex/Correios no card da conta */
.imp-flex{border-top:1px solid var(--linha2);padding-top:12px;margin-top:4px}
.if-liga{display:flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--fu);font-size:12px;font-weight:600;color:var(--t2)}
.if-liga input{width:16px;height:16px;margin:0;accent-color:var(--dest);cursor:pointer}
.imp-flex .if-campo,.imp-flex .if-leg{display:none}
.imp-flex.on .if-campo{display:flex;border-top:0;padding-top:10px}
.imp-flex.on .if-leg{display:block;margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--t3)}
.imp-flex .if-rec:empty{min-height:0;margin-top:0}
.recado.bom{color:var(--s3)}
.recado.ruim{color:var(--neg)}
@media(max-width:820px){body{flex-direction:column}.lado{width:100%;flex:none;height:auto;position:static;flex-direction:row;overflow-x:auto;align-items:center;padding:10px 12px;gap:8px}.lado nav{display:flex;align-items:center;gap:2px}.gr{display:none}.marca{padding:0 6px 0 0;white-space:nowrap}.it{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:6px 10px}.it.on{border-left:0;border-bottom-color:var(--dest)}.pe{margin-top:0;padding:0;border-top:0;min-width:190px}.rot-conta,.coleta-info{display:none}main{padding:16px 14px 50px}.presets{justify-content:flex-start}.prod{max-width:none;min-width:150px}.paginacao{justify-content:flex-start}.acoes-cols .marca-padrao{margin-left:0;width:100%}}
@media(max-width:640px){.lc{grid-template-columns:1fr}.lc-campo input{width:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* foto de capa na coluna Produto */
.cel-prod{display:flex;align-items:flex-start;gap:10px;min-width:0}
td.com-capa{min-width:250px;max-width:320px}
.prod.com-capa{min-width:270px}
.cel-prod .nome{min-width:0}
.capa{width:42px;height:42px;flex:0 0 42px;border-radius:6px;object-fit:cover;background:var(--sup2);border:1px solid var(--linha2);display:block}
.capa.vazia{background:var(--sup2)}
@media(max-width:640px){.capa{width:34px;height:34px;flex-basis:34px}}

/* atalhos de periodo abaixo do filtro de datas */
.presets.abaixo{margin:-6px 0 14px;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}

/* barra de visao (Venda a venda / Por produto / ...) sempre na mesma linha, abaixo do texto */
.cabecalho-bloco.empilha{display:block}
.cabecalho-bloco.empilha .modos{margin-top:12px}

/* linha de catálogo clicável */
tr.linha-abre{cursor:pointer}
tr.linha-abre.aberta td{background:var(--sup2)}
tr.linha-abre:hover td{background:var(--sup2)}

/* entrada e baixa de estoque local */
td.cel-local{white-space:nowrap}
.passo{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.passo .qtd{font-family:var(--fn);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.mm{width:26px;height:26px;border-radius:7px;border:1px solid var(--linha);background:var(--sup);
    color:var(--t2);font-size:15px;line-height:1;cursor:pointer;font-family:var(--fb)}
.mm:hover{border-color:var(--dest);color:var(--dest)}
.mm.mais{border-color:var(--dest);color:var(--dest)}
.mm.mais:hover{background:var(--dest);color:#fff}
.previa{grid-column:1/-1;font-size:13px;color:var(--t2);margin-top:6px}

/* lixeira e caixa de resposta das perguntas */
td.cel-lixo,th.cel-lixo{width:38px;padding-left:8px;padding-right:0}
.lixo{width:30px;height:30px;border-radius:8px;border:1px solid var(--linha);background:var(--sup);
      color:var(--t3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.lixo:hover{border-color:var(--neg);color:var(--neg)}
.lixo:disabled{opacity:.4;cursor:default}
.lc-largo{grid-column:1/-1}
.lc-largo textarea{width:100%;min-height:80px;resize:vertical;font-family:var(--fb);font-size:14px;
  padding:10px 12px;border:1px solid var(--linha);border-radius:9px;background:var(--sup);color:var(--t1)}
.lc-largo textarea:focus{outline:2px solid var(--dest);outline-offset:1px;border-color:var(--dest)}
.citacao{color:var(--t2);font-style:italic}

/* formulários que abrem embaixo da linha clicada */
tr.linha-extra td{background:var(--sup2);padding:12px 16px;border-bottom:1px solid var(--linha);
  position:sticky;left:0}
tr.linha-extra td>*{max-width:min(1100px,calc(100vw - 300px))}
@media(max-width:900px){tr.linha-extra td>*{max-width:calc(100vw - 60px)}}
.linha-form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.linha-form.coluna{display:block}
.rot-form{font-family:var(--fu);font-weight:600;font-size:13px;color:var(--t1);align-self:center}
.mini{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.mini input{width:130px;padding:8px 10px;border:1px solid var(--linha);border-radius:8px;background:var(--sup);
  color:var(--t1);font-family:var(--fn);font-size:14px}
.mini input:focus{outline:2px solid var(--dest);outline-offset:1px;border-color:var(--dest)}
.linha-form .previa{font-size:12px;color:var(--t2);align-self:center}
.linha-form .recado{font-size:12px;align-self:center}
.acoes-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.linha-form textarea{width:100%;min-height:62px;resize:vertical;font-family:var(--fb);font-size:14px;
  padding:10px 12px;border:1px solid var(--linha);border-radius:9px;background:var(--sup);color:var(--t1)}
.linha-form textarea:focus{outline:2px solid var(--dest);outline-offset:1px;border-color:var(--dest)}
.lista-conc{display:flex;flex-direction:column;gap:2px}
.conc{display:grid;grid-template-columns:minmax(120px,1.4fr) 110px 1fr 1fr 150px;gap:12px;
  padding:7px 10px;border-radius:8px;font-size:13px;align-items:center}
.conc:nth-child(odd){background:var(--sup)}
.conc.meu{outline:1px solid var(--dest)}
.conc .cp{font-family:var(--fn);text-align:right;font-variant-numeric:tabular-nums}
.conc .cx{color:var(--t2)}
@media(max-width:720px){.conc{grid-template-columns:1fr auto;row-gap:2px}.conc .cx{font-size:12px}}

/* lista de denúncia massiva */
.conc.den-col{grid-template-columns:minmax(120px,1.3fr) 100px 1fr .8fr 140px 110px}
.den{border:1px solid var(--linha);background:var(--sup);color:var(--t2);border-radius:8px;
  padding:5px 10px;font-size:12px;cursor:pointer;font-family:var(--fb);white-space:nowrap}
.den:hover{border-color:var(--neg);color:var(--neg)}
.den.on{background:var(--neg);border-color:var(--neg);color:#fff}
.den-bloco{border-left:3px solid var(--neg)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--sup2);border:1px solid var(--linha);
  border-radius:999px;padding:5px 6px 5px 12px;font-size:12px;font-family:var(--fn)}
.chip button{border:0;background:none;color:var(--t3);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.chip button:hover{color:var(--neg)}
@media(max-width:720px){.conc.den-col{grid-template-columns:1fr auto}}

.mini.largo{flex:1 1 340px}
.mini.largo input{width:100%}
.mini input[type="text"]{font-family:var(--fb)}
.rot-form.bom{color:var(--s3)}
.rot-form.ruim{color:var(--neg)}

/* gráfico miudinho dentro do card */
.linha-val{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.faisca{flex:0 0 auto;opacity:.9;margin-bottom:4px;width:76px;height:26px}
.kpi{overflow:hidden}
.linha-val .val{min-width:0}
.faisca.sobe{color:var(--s3)}
.faisca.cai{color:var(--neg)}
/* no celular o gráfico miudinho sai: o número é o que importa na tela pequena */
@media(max-width:640px){.faisca{display:none}.linha-val{display:block}}

.den-modelo{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:10px}
.den-modelo .mini{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--fraco)}
.den-modelo input[type=file]{font:inherit;font-size:12px;text-transform:none;letter-spacing:0;color:var(--tinta)}
.den-modelo .previa{font-size:12.5px;color:var(--fraco);max-width:52ch}

.lapis{background:none;border:1px solid var(--borda);border-radius:6px;color:var(--fraco);cursor:pointer;font-size:13px;line-height:1;padding:4px 7px}
.lapis:hover{color:var(--dest);border-color:var(--dest)}
.setinha{background:none;border:0;color:var(--dest);cursor:pointer;font:inherit;padding:0 4px 0 0}
.grade-sku{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 14px;padding:4px 0 14px}
.cxsku{display:flex;align-items:center;gap:7px;font-size:12.5px;font-family:var(--mono,inherit)}
.cxsku.off span{opacity:.45;text-decoration:line-through}
.modos.sub{margin-bottom:8px}

.rolagem{overflow-x:auto;max-width:100%}
.rolagem table{min-width:900px}

.tw.puxando{cursor:grabbing;user-select:none}
.rolagem.puxando{cursor:grabbing;user-select:none}

/* --- rolar a tabela para o lado (27/08/2026) ---
   A maozinha so aparece quando a tabela e mais larga que a tela: a classe
   .rola-lado e posta pelo barraCima(), que ja mede isso. Numa tabela que cabe
   inteira, uma maozinha de "arraste-me" seria mentira. */
.tw.rola-lado,.rolagem.rola-lado{cursor:grab}
.tw.rola-lado a,.rolagem.rola-lado a{cursor:pointer}

/* A barra de cima e uma caixa rolavel vazia com um pedaco invisivel da mesma
   largura da tabela. Altura fixa: sem ela, uma caixa de conteudo de 1px pode
   nao mostrar barra nenhuma nos navegadores de barra flutuante (Mac). */
.tw-topo{overflow-x:auto;overflow-y:hidden;height:12px;margin:0 0 5px;border-radius:5px}
.tw-topo>i{display:block;height:1px}
.tw-topo,.tw,.rolagem{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--dest) 45%,transparent) transparent}
.tw-topo::-webkit-scrollbar,.tw::-webkit-scrollbar,.rolagem::-webkit-scrollbar{height:10px}
.tw-topo::-webkit-scrollbar-track,.tw::-webkit-scrollbar-track,.rolagem::-webkit-scrollbar-track{background:color-mix(in srgb,var(--t3) 12%,transparent);border-radius:5px}
.tw-topo::-webkit-scrollbar-thumb,.tw::-webkit-scrollbar-thumb,.rolagem::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--dest) 42%,transparent);border-radius:5px}
.tw-topo::-webkit-scrollbar-thumb:hover,.tw::-webkit-scrollbar-thumb:hover,.rolagem::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--dest) 62%,transparent)}
/* 25/08/2026: esta caixa estava invisivel. As tres cores dela -- --borda,
   --fundo2 e --tinta -- sao de uma paleta antiga que nao existe mais neste
   arquivo. Variavel que nao existe e sem reserva derruba a declaracao inteira,
   entao o campo ficava sem borda, sem fundo e herdando a cor do texto ao redor:
   parecia desabilitado. Agora usa os tokens de verdade, os mesmos do campo de
   busca do Cadastro de SKUs. */
.busca input{font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--linha);border-radius:4px;background:var(--sup2);color:var(--t1);min-width:230px}
.busca input::placeholder{color:var(--t3)}
.busca input:focus{border-color:var(--dest);outline:none;box-shadow:0 0 0 1px var(--dest)}
.busca-conta{font-family:var(--fn);font-size:11.5px;color:var(--t3);margin-left:9px;align-self:center;white-space:nowrap}

.den.amigo{background:var(--s3-fraco,#e3f3ec);color:var(--s3,#1c7d5a);border:1px solid currentColor;border-radius:999px;padding:3px 10px;font-size:12px;cursor:default;display:inline-block}
.chip.amigo{background:var(--s3-fraco,#e3f3ec);color:var(--s3,#1c7d5a)}
.mais-amigo{background:none;border:1px dashed var(--borda);border-radius:999px;color:var(--fraco);cursor:pointer;font-size:11.5px;padding:3px 9px;margin-left:6px}
.mais-amigo:hover{color:var(--s3,#1c7d5a);border-color:currentColor}

.sem-custo{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}

.modos.contas{align-items:center;gap:6px;margin-bottom:8px}
.rot-contas{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fraco);margin-right:4px}

/* ---------------- calculadora ---------------- */
.calc{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr);gap:18px;padding:4px 0 6px}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.calc-esq{display:flex;flex-direction:column;gap:14px;min-width:0}
.calc-bloco{border:1px solid var(--borda);border-radius:10px;padding:14px 16px;background:var(--fundo2,transparent)}
.calc-bloco h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fraco);margin:0 0 8px}
.calc-bloco .leg{margin:0 0 10px}
.calc-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cc-campo{display:flex;flex-direction:column;gap:4px}
.cc-campo span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--fraco)}
.cc-campo input,.calc-linha input,.calc-linha select{font:inherit;font-size:14px;padding:8px 11px;border:1px solid var(--borda);border-radius:8px;background:var(--carta,transparent);color:var(--tinta);width:100%}
.cc-campo input:focus,.calc-linha input:focus{outline:2px solid var(--dest);outline-offset:1px}
.calc-linha{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.calc-linha input,.calc-linha select{flex:1 1 220px}
.calc-base{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--s3-fraco,#e3f3ec);color:var(--s3,#1c7d5a);font-weight:600}
.calc-achado{display:flex;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--borda)}
.calc-achado img{width:56px;height:56px;object-fit:contain;border-radius:6px;flex:0 0 auto}
.calc-achado b{display:block;font-size:13.5px;line-height:1.35}
.calc-achado small{display:block;color:var(--fraco);font-size:12px;margin-top:3px}
.calc-achado small.calc-aviso{color:var(--neg)}
.calc-tarifas{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.calc-dir{border:1px solid var(--borda);border-radius:10px;padding:16px 18px;height:max-content;position:sticky;top:14px}
.calc-dir h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fraco);margin:0 0 12px}
.cl{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px;align-items:baseline}
.cl span{color:var(--fraco)}
.cl b{font-variant-numeric:tabular-nums}
.cl b i{font-style:normal;font-size:11.5px;color:var(--fraco)}
.cl.forte{border-top:1px solid var(--borda);margin-top:6px;padding-top:10px;font-weight:600}
.cl.forte span{color:var(--tinta)}
.calc-margem{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--s3-fraco,#e3f3ec);color:var(--s3,#1c7d5a)}
.calc-margem.ruim{background:var(--neg-fraco,#fbe9e9);color:var(--neg)}
.calc-margem .rot{font-size:11px;letter-spacing:.07em;text-transform:uppercase;opacity:.85}
.calc-margem .dupla{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:20px;margin-top:4px;font-variant-numeric:tabular-nums}
.calc-proj{margin-top:14px;padding-top:12px;border-top:1px solid var(--borda)}
.calc-proj .rot{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--fraco);margin-bottom:4px}
.cl b.pos{color:var(--s3,#1c7d5a)}

/* ---- botao de tema (claro/escuro/automatico) ---- */
.bt-tema{cursor:pointer;padding:0;font:inherit;line-height:0}
.bt-tema:hover{color:var(--dest);border-color:var(--dest)}
.bt-tema:active{transform:scale(.94)}
.bt-tema svg{width:15px;height:15px;display:block}

/* ---- caixa de importacao de custos por planilha ---- */
.imp-custos{display:flex;flex-direction:column;gap:11px}
.imp-custos input[type=file]{font-family:var(--fn);font-size:12px;color:var(--t2);max-width:100%}
.imp-arq-linha{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.imp-dica{margin:-4px 0 0;font-family:var(--fn);font-size:12px;line-height:1.45;color:var(--t2)}
.imp-dica b{color:var(--t1)}
.bt-modelo{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bt-modelo svg{width:15px;height:15px;flex:none}
.imp-bts{display:flex;gap:8px;flex-wrap:wrap}
.bt-imp{font-family:var(--fu);font-weight:600;font-size:13px;padding:7px 15px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1);cursor:pointer}
.bt-imp.forte{background:var(--dest);border-color:var(--dest);color:#fff}
.bt-imp:disabled{opacity:.42;cursor:default}
.imp-custos .recado:empty{display:none}

/* ---- celula editavel com um clique ---- */
.edit-cel{cursor:pointer;border-bottom:1px dashed var(--linha)}
.edit-cel:hover{color:var(--dest);border-bottom-color:var(--dest)}
.cel-inp{width:76px;font-family:var(--fn);font-size:12px;padding:3px 5px;border:1px solid var(--dest);border-radius:3px;background:var(--sup);color:var(--t1);text-align:right}

/* ---- botao atualizar agora ---- */
.bt-atualizar{display:inline-flex;align-items:center;gap:6px;font-family:var(--fn);font-size:11px;padding:5px 11px;border:1px solid var(--dest);border-radius:3px;background:var(--sup);color:var(--dest);cursor:pointer;white-space:nowrap}
.bt-atualizar:hover{background:var(--dest);color:#fff}
.bt-atualizar:disabled{opacity:.6;cursor:default}
.bt-atualizar svg{width:13px;height:13px;flex:0 0 auto}
/* 04/09/2026: os botoes de Excel e PDF ganharam icone de tipo de arquivo, com
   cor propria em vez de currentColor. Precisam de alguns pixels a mais para a
   etiqueta do formato ficar legivel, e nao podem herdar o fill do botao. */
.bt-arquivo svg{width:16px;height:16px}
.bt-arquivo svg text{letter-spacing:-.2px}
.bt-atualizar.girando svg{animation:girar 1s linear infinite}
.bt-denuncia{border-color:var(--neg);color:var(--neg)}
.bt-denuncia:hover{background:var(--neg);color:#fff}
/* 18/09/2026 (noite): Reportar ao lado do Copiar link, e a marca de ja reportado */
.den-acoes{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.den.rep-feito{background:var(--sup2);color:var(--neg);border-color:var(--neg);cursor:default;opacity:.85}
/* 18/09/2026: o recado que fica no lugar do Reportar enquanto falta atualizar */
.den-falta{max-width:330px;line-height:1.35;text-align:right;align-self:center}
.conc.den-col{grid-template-columns:minmax(120px,1.3fr) 100px 1fr .8fr 140px 190px}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---- aviso vermelho de conta ainda importando ---- */
.importando{background:var(--sup);border:1px solid var(--neg);border-left:4px solid var(--neg);border-radius:5px;padding:12px 14px;margin:0 0 14px;color:var(--t1);font-size:13.5px;line-height:1.55}
.importando b{color:var(--neg)}
.importando .sub2{margin-top:4px}

/* ---- SKU com botao de copiar ---- */
.cel-sku{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.copiar{flex:0 0 auto;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t3);cursor:pointer;padding:0}
.copiar:hover{color:var(--dest);border-color:var(--dest)}
.copiar svg{width:11px;height:11px;display:block}
.copiar.copiado{color:#fff;background:var(--s3);border-color:var(--s3)}

/* ---- seletor minha conta / mentorado ---- */
.tipo-conta{display:flex;gap:6px;margin:12px 0 4px}
.tipo-op{flex:1;font-family:var(--fu);font-weight:600;font-size:11.5px;padding:7px 6px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t2);cursor:pointer}
.tipo-op:hover{border-color:var(--dest);color:var(--t1)}
.tipo-op.on{background:var(--dest);border-color:var(--dest);color:#fff}
.tipo-op:disabled{opacity:.55;cursor:default}

/* ---- cards clicaveis do catalogo ---- */
.kpi-bt{display:block;cursor:pointer;border-radius:5px;outline:none}
.kpi-bt .kpi{height:100%;transition:border-color .12s,transform .12s}
.kpi-bt:hover .kpi{border-color:var(--dest)}
.kpi-bt:focus-visible .kpi{border-color:var(--dest);box-shadow:0 0 0 2px var(--dest)}
.kpi-bt.on .kpi{border-color:var(--dest);box-shadow:inset 0 0 0 1px var(--dest)}
.kpi-bt.on .rot{color:var(--dest)}
.filtro-ativo{margin:-8px 0 16px;font-size:12.5px;color:var(--t2)}
.limpa-fcat{font-family:var(--fn);font-size:11px;padding:3px 9px;margin-left:6px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t2);cursor:pointer}
.limpa-fcat:hover{border-color:var(--dest);color:var(--dest)}

/* ---- cards que ligam e desligam linhas do grafico ---- */
.kpi-serie{position:relative}
.kpi-serie.on .kpi{border-top-color:var(--cor-serie,var(--dest))}
.kpi-serie.on .kpi::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 5px 5px;background:var(--cor-serie,var(--dest))}
.graf30 .modos-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.graf30 .modos-bar .modos{margin-top:0}
.graf30 .legenda{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.lg-serie{display:inline-flex;align-items:center;gap:6px;font-family:var(--fb);font-size:12px;color:var(--t3);background:none;border:1px solid transparent;border-radius:3px;padding:3px 8px;cursor:pointer}
.lg-serie:hover{color:var(--t1);border-color:var(--linha)}
.lg-serie.on{color:var(--t1);border-color:var(--linha);background:var(--sup2)}
.lg-serie .m{width:14px;height:3px;border-radius:2px;opacity:.35}
.lg-serie.on .m{opacity:1}
.graf30 .grafico{position:relative;min-height:120px}
.graf30 svg{display:block;width:100%;height:auto;overflow:visible}

.imp-completa{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--t2);line-height:1.45;cursor:pointer}
.imp-completa input{margin-top:2px;flex:0 0 auto}

.dica-dia{color:var(--t3);font-size:11px;line-height:1.35;margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--linha)}
.dica-dia b{color:var(--t1);font-size:13px}

/* ---- contas em caixas de selecao (varias ao mesmo tempo) ---- */
.contas-cx{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.contas-cx .rot-contas{font-family:var(--fu);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin-right:2px}
.cx-conta{display:inline-flex;align-items:center;gap:7px;font-family:var(--fb);font-size:13px;color:var(--t2);background:var(--sup);border:1px solid var(--linha);border-radius:4px;padding:7px 13px;cursor:pointer;user-select:none}
.cx-conta:hover{border-color:var(--dest);color:var(--t1)}
.cx-conta.on{border-color:var(--dest);color:var(--t1);background:var(--sup2);font-weight:600}
.cx-conta input{width:15px;height:15px;accent-color:var(--dest);cursor:pointer;margin:0}
@media(max-width:820px){.contas-cx{gap:6px}.cx-conta{padding:6px 10px;font-size:12.5px}}

/* ---- cadastro de custo na mao ---- */
.custo-manual{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.custo-manual .mini{display:flex;flex-direction:column;gap:4px;font-family:var(--fu);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.custo-manual input{font-family:var(--fn);font-size:13px;padding:7px 9px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1);min-width:170px}
.custo-manual input:focus{border-color:var(--dest);outline:none}
.custo-manual .recado{flex:1 1 100%}
@media(max-width:820px){.custo-manual{gap:9px}.custo-manual input{min-width:0;width:100%}.custo-manual .mini{flex:1 1 100%}}
/* 28/08/2026: o Salvar do "Custo de um produto" virou tres botoes de alcance */
.cm-bts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cm-bts .botao{white-space:nowrap}
.cm-periodo{flex:1 1 100%;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--linha2)}
.cm-periodo .mini{flex:0 1 190px}
.cm-periodo input[type="date"]{width:100%;min-width:170px;color-scheme:light dark}
.cm-periodo>span{align-self:center;color:var(--t3);font-size:11.5px}

/* ===== Cadastro de SKUs por conta: abas, ferramentas, situacao do anuncio (10/09/2026) ===== */
.ct-abas{display:flex;gap:0;border-bottom:1px solid var(--linha);margin:0 0 16px;overflow-x:auto}
.ct-aba{display:flex;flex-direction:column;gap:2px;padding:10px 16px 11px;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;color:var(--t2);font-family:var(--fu);white-space:nowrap;min-width:140px}
.ct-aba .nome{font-size:14px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:7px}
.ct-aba .nome i{width:8px;height:8px;border-radius:50%;background:var(--t3);flex:0 0 auto}
.ct-aba.on .nome i{background:var(--s3)}
.ct-aba .det{font-family:var(--fn);font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.ct-aba:hover .nome,.ct-aba.on .nome{color:var(--t1)}
.ct-aba.on{border-bottom-color:var(--dest)}
.ct-aba:focus-visible{outline:2px solid var(--dest);outline-offset:-2px;border-radius:4px}
.ferr-sku{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.ferr-sku button[data-ferr-sku]{font-family:var(--fu);font-weight:600;font-size:12.5px;padding:7px 13px;border:1px solid var(--linha);border-radius:3px;background:var(--sup);color:var(--t1);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ferr-sku button[data-ferr-sku] svg{width:14px;height:14px}
.ferr-sku button[data-ferr-sku].on{border-color:var(--dest);color:var(--dest)}
.ferr-sku .bt-sku-atu{margin-left:auto;padding:7px 13px;font-size:12px}
.ferr-sku .bt-sku-atu svg{width:14px;height:14px}
.barra-sku{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 11px}
.barra-sku .busca-sku{margin:0;flex:1 1 260px}
.modos-sku{display:inline-flex;border:1px solid var(--linha);border-radius:3px;overflow:hidden;background:var(--sup);flex:0 0 auto}
.modos-sku button{appearance:none;border:0;background:none;padding:8px 12px;font-family:var(--fu);font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;border-right:1px solid var(--linha)}
.modos-sku button:last-child{border-right:0}
.modos-sku button.on{background:var(--dest);color:#fff}
.pastilha.p-fim{color:var(--neg);border-color:rgba(192,57,43,.35);background:rgba(192,57,43,.10)}
.pastilha.p-rev{color:var(--s7);border-color:rgba(154,107,0,.35);background:rgba(154,107,0,.12)}
tr[data-off="1"] td{color:var(--t3)}
tr[data-off="1"] td a.ml{color:var(--t2)}
@media(max-width:640px){.ct-aba{min-width:110px;padding:9px 11px}.ferr-sku .bt-sku-atu{margin-left:0}}

/* ===== Cadastro de SKUs: busca de produto, tarja "sem SKU", periodo na linha, notas da planilha (10/09/2026) ===== */
.tag-inc.semskuml{background:rgba(192,57,43,.13);color:var(--neg)}
.custo-manual .sku-combo-wrap{position:relative}
.custo-manual #cm-sku{min-width:280px}
.sku-dropdown{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;max-width:min(520px,calc(100vw - 40px));z-index:6;background:var(--sup);border:1px solid var(--linha);border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.14);max-height:280px;overflow-y:auto;text-transform:none;letter-spacing:normal;text-align:left}
.sku-opt{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--linha2);font-family:var(--fb);color:var(--t1)}
.sku-opt:last-child{border-bottom:0}
.sku-opt:hover,.sku-opt.ativa{background:var(--sup2)}
.sku-opt .so-nome{font-size:12.5px;font-weight:600;color:var(--t1);white-space:normal}
.sku-opt .so-linha2{display:flex;gap:6px;align-items:center;margin-top:2px;flex-wrap:wrap}
.sku-opt .so-sku{font-family:var(--fc);font-size:11px;color:var(--t3)}
.sku-opt .so-tag{font-family:var(--fu);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:999px}
.sku-opt .so-tag.fora{background:rgba(235,104,52,.16);color:var(--s2)}
.sku-opt .so-tag.tem{background:rgba(31,122,90,.14);color:var(--s3)}
.sku-opt .so-tag.sem{background:var(--sup2);color:var(--t3);border:1px solid var(--linha2)}
.sku-opt .so-tag.semskuml{background:rgba(192,57,43,.13);color:var(--neg)}
.sku-vazia{padding:12px 10px;font-size:12.5px;color:var(--t3);font-family:var(--fb);white-space:normal}
.custo-manual .sku-hint{flex:1 1 100%;font-family:var(--fn);font-size:11.5px;color:var(--t3);min-height:0}
.custo-manual .sku-hint:empty{display:none}
.custo-manual .sku-hint b{color:var(--t1);font-weight:600}
.nao-achou{margin:0 0 10px;font-family:var(--fn);font-size:12.5px;color:var(--t2)}
.nao-achou button{font-family:inherit;font-size:inherit;color:var(--dest);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.linha-form .s-periodo{flex:1 1 100%}
.linha-form .s-periodo .mini{flex:0 1 190px}
.modelo-nota{display:flex;gap:8px;align-items:flex-start;background:var(--sup2);border:1px dashed var(--linha);border-radius:5px;padding:9px 11px;font-family:var(--fn);font-size:12px;color:var(--t2);line-height:1.45}
.modelo-nota svg{flex:0 0 auto;width:15px;height:15px;margin-top:1px;color:var(--s3)}
.modelo-nota b{color:var(--t1)}
.aceito-formatos{font-family:var(--fn);font-size:11.5px;color:var(--t3);margin:0}
@media(max-width:820px){.custo-manual #cm-sku{min-width:0}.sku-dropdown{width:100%;max-width:100%}.linha-form .s-periodo .mini{flex:1 1 calc(50% - 6px)}}
.custo-manual /* 28/08/2026: o atalho dos meses anteriores deixou de ser texto cinza e virou
   botao com contorno -- do tamanho dos outros, para ser achado. */
.cm-meses{flex:1 1 100%;margin:10px 0 0}
.link-meses{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fn);font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--dest);background:var(--sup);
  border:1px solid var(--dest);border-radius:4px;
  padding:9px 14px;cursor:pointer;text-decoration:none}
.link-meses:hover{color:#fff;background:var(--dest)}
.link-meses:active{transform:translateY(1px)}
@media(max-width:820px){.cm-bts{flex:1 1 100%}.cm-bts .botao{flex:1 1 auto}.cm-periodo .mini{flex:1 1 calc(50% - 6px)}.cm-periodo .botao{flex:1 1 100%}.cm-periodo>span{width:100%}}

/* a caixinha do grafico grande fica no topo, acima da linha */
.graf30 .dica{top:6px;z-index:6}

/* ---- setinha do card e divisao por conta ---- */
.kpi-caixa{position:relative;display:flex;flex-direction:column}
.kpi-caixa .kpi-bt{flex:1}
.kpi-seta{align-self:center;margin-top:-11px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border:1px solid var(--linha);border-radius:11px;background:var(--sup);color:var(--t3);cursor:pointer;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.14)}
.kpi-seta:hover{color:var(--dest);border-color:var(--dest);transform:translateY(1px)}
.kpi-seta svg{width:13px;height:13px;transition:transform .18s}
.kpi-seta.on{color:#fff;background:var(--dest);border-color:var(--dest)}
.kpi-seta.on svg{transform:rotate(180deg)}

.kpi-contas{margin-top:8px;border:1px solid var(--linha);border-radius:6px;background:var(--sup);padding:11px 13px 13px;box-shadow:0 4px 16px rgba(0,0,0,.10)}
.kpi-contas.fechado{display:none}
.pc-cabeca{font-family:var(--fu);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin-bottom:9px}
.pc-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pc-item{display:flex;flex-direction:column;gap:4px}
.pc-topo{display:flex;align-items:center;gap:7px}
.pc-ponto{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.pc-nome{flex:1;min-width:0;font-size:12.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-valor{font-family:var(--fn);font-size:12px;color:var(--t1);white-space:nowrap;font-variant-numeric:tabular-nums}
.pc-trilho{height:6px;border-radius:4px;background:var(--linha2);overflow:hidden}
.pc-trilho i{display:block;height:6px;border-radius:4px;transition:width .25s}
.pc-pct{font-family:var(--fn);font-size:10.5px;color:var(--t3);white-space:nowrap;flex:0 0 auto}
.pc-pct.sobe{color:var(--s3)}
.pc-pct.cai{color:var(--neg)}
.pc-vazio{font-size:11.5px;color:var(--t3)}
.ads-conta-status{align-self:flex-start;margin-left:15px;font-family:var(--fn);font-size:10px;line-height:1.2}
.ads-conta-status.bom{color:var(--s3)}
.ads-conta-status.ruim{color:var(--neg);font-weight:700}
.aviso-ads{margin:0 0 12px}


/* ================= lateral Ecommetrics ================= */
:root{--eco1:#38bdf8;--eco2:#22d3ee;--eco3:#7dd3fc;--eco-fundo1:#0a2a55;--eco-fundo2:#061a38;--eco-fundo3:#04122a}
.lado{
  background:linear-gradient(180deg,var(--eco-fundo1) 0%,var(--eco-fundo2) 45%,var(--eco-fundo3) 100%);
  border-right:1px solid rgba(56,189,248,.18);
  padding:14px 0 16px;
}
.lado::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:radial-gradient(120% 80% at 0% 100%,rgba(56,189,248,.12),transparent 70%)}
.lado{scrollbar-width:thin;scrollbar-color:rgba(56,189,248,.3) transparent}
.lado::-webkit-scrollbar{width:6px}
.lado::-webkit-scrollbar-track{background:transparent}
.lado::-webkit-scrollbar-thumb{background:rgba(56,189,248,.28);border-radius:3px}

.marca{padding:4px 16px 18px;display:flex;align-items:center;justify-content:flex-start;gap:0}
.marca-logo{width:42px;height:42px;display:block;flex:0 0 auto;
  filter:drop-shadow(0 3px 12px rgba(56,189,248,.45))}

.lado .gr{color:#6f93c2;letter-spacing:.13em;padding:16px 18px 6px;font-size:9.5px}
.lado .gr:first-of-type{padding-top:4px}

.lado .it{display:flex;align-items:center;gap:8px;padding:8px 16px;margin-right:10px;
  color:#c6dbf2;border-left:2px solid transparent;border-radius:0 9px 9px 0;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.lado .it:hover{background:rgba(56,189,248,.11);color:#fff}
.lado .it.on{font-weight:600;color:#04122a;border-left-color:var(--eco3);
  background:linear-gradient(90deg,var(--eco1),var(--eco2));
  box-shadow:0 3px 14px rgba(56,189,248,.35)}
.lado .it.on:hover{color:#04122a}

.lado .it-breve{opacity:.42;cursor:default}
.lado .it-breve:hover{background:transparent;color:#c6dbf2}
.tag-breve{margin-left:auto;font-style:normal;font-size:8.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--eco3);border:1px solid rgba(125,211,252,.4);
  border-radius:999px;padding:1px 6px;line-height:1.5;white-space:nowrap}

/* 06/09/2026: o aviso de Atendimento -- quantas perguntas e quantas conversas
   estao esperando resposta. Ocupa a MESMA vaga do "em breve" (margin-left:auto),
   e nunca disputam: um item ou esta bloqueado ou tem contador, nunca os dois.
   Cheio, e nao contornado como o "em breve", porque este e para ser visto de
   canto de olho -- e ele so existe quando ha numero (ver avisoMenu no app.js).
   O vermelho e fixo, e nao var(--neg): a barra lateral e escura nos dois temas,
   com cor propria, entao um token que muda com o tema desafinaria dela. */
.menu-alerta{margin-left:auto;font-style:normal;font-weight:700;font-size:10px;
  min-width:19px;padding:0 6px;line-height:17px;text-align:center;
  background:#e04434;color:#fff;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(224,68,52,.45)}
.lado .it.on .menu-alerta{background:#b4291b;box-shadow:none}

/* ================= aviso "Em breve" ================= */
.breve-fundo{position:fixed;inset:0;z-index:9999;padding:20px;
  background:rgba(3,10,26,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;animation:breveEntra .16s ease-out}
@keyframes breveEntra{from{opacity:0}to{opacity:1}}
.breve-cx{width:min(370px,100%);text-align:center;border-radius:18px;padding:28px 26px 22px;
  background:var(--sup);border:1px solid rgba(56,189,248,.28);
  box-shadow:0 26px 70px rgba(0,0,0,.45);animation:breveSobe .2s ease-out}
@keyframes breveSobe{from{transform:translateY(10px) scale(.97)}to{transform:none}}
.breve-ic{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;color:#04122a;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--eco1),var(--eco2));
  box-shadow:0 6px 20px rgba(56,189,248,.4)}
.breve-ic svg{width:28px;height:28px}
.breve-tt{font-family:var(--fu);font-size:20px;font-weight:700;color:var(--t1);margin-bottom:7px}
.breve-tx{font-size:13.5px;line-height:1.55;color:var(--t2);margin-bottom:20px}
.breve-tx b{color:var(--t1)}
.breve-bt{border:0;border-radius:11px;padding:10px 24px;font-size:14px;font-weight:600;
  cursor:pointer;color:#04122a;background:linear-gradient(135deg,var(--eco1),var(--eco2))}
.breve-bt:hover{filter:brightness(1.08)}

@media (max-width:860px){
  .marca{padding:0 6px 0 0}
  .marca-logo{width:30px;height:30px}
  .lado .it{margin-right:0;border-radius:0}
}


/* ================= modo privacidade ================= */
.bt-olho.on{color:var(--eco1);background:rgba(56,189,248,.14)}
html.privado a.ml,
html.privado .nome,
html.privado .cel-sku,
html.privado [data-copiar],
html.privado .pc-nome,
html.privado .cx-conta span,
html.privado .chip,
html.privado .conta-nome,
html.privado td.produto,
html.privado .titulo-anuncio{
  filter:blur(5px);
  -webkit-user-select:none;user-select:none;
  transition:filter .12s ease
}
/* o desborrar ao passar o mouse so vale onde EXISTE mouse: no celular
   um toque conta como hover e ia revelar o nome bem na hora da gravacao */
@media (hover:hover) and (pointer:fine){
  html.privado a.ml:hover,
  html.privado .cel-sku:hover,
  html.privado .pc-nome:hover{filter:blur(0)}
}
html.privado .cx-conta span{filter:blur(4px)}

/* o que faltava: nome da conta no alto da pagina e no seletor, SKU digitado
   no filtro, SKU no titulo dos formularios e a busca do estoque */
html.privado .topo .sub,
html.privado #selconta,
html.privado .txt-sku,
html.privado .rot-form,
html.privado .filtros input[name="sku"],
html.privado #busca-est{
  filter:blur(5px);
  -webkit-user-select:none;user-select:none;
  transition:filter .12s ease
}

/* no celular a barra de cima rola para o lado e o olhinho ficava escondido
   la na ponta. Aqui ele vira um botao redondo, sempre no canto da tela. */
@media(max-width:820px){
  .bt-olho{position:fixed;right:14px;bottom:14px;z-index:60;
    width:48px;height:48px;border-radius:50%;
    background:var(--sup);border:1px solid var(--linha);color:var(--t2);
    box-shadow:0 6px 20px rgba(0,0,0,.20)}
  .bt-olho svg{width:20px;height:20px}
  .bt-olho.on{background:var(--dest);border-color:var(--dest);color:#fff}
}


/* ================= chavinha do frete do comprador ================= */
.chave-frete{display:flex;align-items:center;gap:9px;margin:0 0 12px;flex-wrap:wrap}
.chave{width:40px;height:22px;border-radius:999px;border:1px solid var(--linha2);
  background:var(--sup2);position:relative;cursor:pointer;padding:0;flex:0 0 auto;
  transition:background .18s ease,border-color .18s ease}
.chave .bolinha{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--t3);transition:transform .18s ease,background .18s ease}
.chave.on{background:linear-gradient(90deg,var(--eco1),var(--eco2));border-color:transparent}
.chave.on .bolinha{transform:translateX(18px);background:#fff}
.chave-rot{font-size:13px;color:var(--t2);cursor:pointer;user-select:none}
.chave-ajuda{width:15px;height:15px;border-radius:50%;border:1px solid var(--linha2);
  color:var(--t3);font-size:10px;line-height:14px;text-align:center;cursor:help;flex:0 0 auto}
.chave-tag{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--eco1);
  border:1px solid rgba(56,189,248,.35);border-radius:999px;padding:2px 8px}


/* ================= tela de entrada ================= */
html.sem-painel body{display:block;background:
  radial-gradient(1000px 600px at 15% -10%, rgba(56,189,248,.16), transparent 60%),
  radial-gradient(800px 500px at 100% 100%, rgba(34,211,238,.12), transparent 60%),
  var(--fundo)}
html.sem-painel main{padding:0}
.porta{min-height:100vh;display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(440px,.95fr);padding:0;background:var(--sup)}
.porta-apresentacao{position:relative;overflow:hidden;display:flex;min-height:100vh;flex-direction:column;padding:42px 54px 36px;color:#fff;background:#061a33}
.porta-apresentacao:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,rgba(56,189,248,.28),transparent 28%),radial-gradient(circle at 10% 80%,rgba(15,109,122,.3),transparent 35%),linear-gradient(135deg,transparent 55%,rgba(56,189,248,.06));pointer-events:none}
.porta-apresentacao:after{content:"";position:absolute;width:440px;height:440px;right:-230px;bottom:-215px;border:1px solid rgba(125,211,252,.18);border-radius:50%;box-shadow:0 0 0 70px rgba(125,211,252,.035),0 0 0 140px rgba(125,211,252,.025)}
.porta-apresentacao-topo,.porta-chamada,.porta-rodape{position:relative;z-index:1}
.porta-apresentacao-topo{display:flex;align-items:center;justify-content:space-between;gap:24px}
.porta-marca{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.porta-marca .marca-logo{width:40px;height:40px;display:block}
.porta-selo{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#b9c9d9;font-size:11px;letter-spacing:.04em}
.porta-selo i{width:6px;height:6px;border-radius:50%;background:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.12)}
.porta-chamada{width:min(610px,100%);margin:auto 0}
.porta-sobretitulo,.porta-form-sobretitulo{display:block;color:#38bdf8;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.porta-chamada h2{margin:18px 0 20px;font-size:clamp(38px,4.4vw,66px);line-height:1.04;letter-spacing:-.055em;font-weight:700}
.porta-chamada h2 em{color:#7dd3fc;font-style:normal}
.porta-chamada>p{max-width:560px;margin:0;color:#adbdcc;font-size:16px;line-height:1.7}
.porta-beneficios{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.porta-beneficios>div{padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.porta-beneficios span{color:#38bdf8;font-family:var(--fc);font-size:10px}
.porta-beneficios p{margin:7px 0 0;color:#8397aa;font-size:12px;line-height:1.5}
.porta-beneficios b{display:block;margin-bottom:3px;color:#f3f8fc;font-size:13px;font-weight:600}
.porta-rodape{margin:0;color:#71869a;font-size:11px;letter-spacing:.04em}
.porta-acesso{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:48px clamp(32px,6vw,92px);background:var(--sup)}
.porta-cx{width:min(420px,100%);background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.porta-logo{width:60px;height:60px;margin:0 auto 16px}
.porta-logo svg{width:60px;height:60px;display:block;filter:drop-shadow(0 4px 16px rgba(56,189,248,.45))}
.porta-logo-mobile{display:none}
.porta-tt{font-family:var(--fu);font-size:32px;font-weight:700;text-align:left;margin:8px 0 8px;color:var(--t1);letter-spacing:-.04em}
.porta-sub{text-align:left;font-size:14px;color:var(--t3);margin:0 0 30px}
/* 26/08/2026: o recado de erro era vermelho claro sobre fundo quase branco --
   no cartao de entrada, que e claro nos dois temas, quase nao dava para ler.
   Agora e vermelho escuro solido com letra branca, a pedido do Roderjan. */
.porta-erro{background:#991b1b;border:1px solid #7f1d1d;color:#fff;font-weight:600;
  border-radius:10px;padding:11px 13px;font-size:13px;margin-bottom:16px;line-height:1.45}
.porta-rot{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--t2);margin:0 0 7px;font-weight:600}
.porta-inp{width:100%;box-sizing:border-box;background:var(--sup2);color:var(--t1);
  border:1px solid var(--linha);border-radius:10px;padding:13px 14px;font-size:14.5px;
  margin-bottom:18px;font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.porta-inp:focus{outline:none;border-color:var(--eco1);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
.porta-bt{width:100%;border:0;border-radius:10px;padding:13px;font-size:14px;font-weight:700;
  cursor:pointer;color:#fff;background:linear-gradient(135deg,#087da4,#0f6d7a);
  box-shadow:0 10px 24px rgba(15,109,122,.22);margin-top:8px;font-family:inherit;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.porta-bt:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 13px 28px rgba(15,109,122,.28)}
.porta-bt:disabled{opacity:.6;cursor:default}
.porta-troca{text-align:center;font-size:12.5px;color:var(--t3);margin-top:18px}
.porta-troca+.porta-troca{margin-top:10px}
.porta-troca a{color:var(--dest);text-decoration:none;font-weight:600}
.porta-troca a:hover{text-decoration:underline}
.bt-sair:hover{color:#fca5a5}


/* olho de ver a senha e confirmação */
.porta-senha{position:relative;margin-bottom:15px}
.porta-senha .porta-inp{margin-bottom:0;padding-right:44px}
.porta-olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:8px;cursor:pointer;color:var(--t3);padding:0}
.porta-olho svg{width:18px;height:18px}
.porta-olho:hover{color:var(--t1);background:var(--sup2)}
.porta-olho.on{color:var(--eco1)}
.porta-conf{font-size:12px;margin:-8px 0 14px;min-height:15px}
.porta-conf.ok{color:#34d399}
.porta-conf.ruim{color:#fca5a5}
.porta-seguranca{display:flex;align-items:center;justify-content:center;gap:7px;margin:28px 0 0;color:var(--t3);font-size:11px}
.porta-seguranca svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:960px){
  .porta{grid-template-columns:minmax(340px,.85fr) minmax(400px,1.15fr)}
  .porta-apresentacao{padding:34px 32px}
  .porta-selo{display:none}
  .porta-beneficios{grid-template-columns:1fr;gap:10px;margin-top:34px}
  .porta-beneficios>div{display:flex;gap:12px;padding-top:10px}
  .porta-beneficios p{margin:0}.porta-beneficios b{display:inline;margin-right:5px}
  .porta-chamada h2{font-size:40px}
  .porta-acesso{padding:40px}
}
@media(max-width:720px){
  .porta{display:flex;min-height:100vh;background:var(--sup)}
  .porta-apresentacao{display:none}
  .porta-acesso{width:100%;min-height:100vh;padding:38px 24px}
  .porta-logo-mobile{display:block;margin:0 0 24px;width:48px;height:48px}
  .porta-logo-mobile svg{width:48px;height:48px}
  .porta-tt{font-size:28px}
}


/* ================= convidar mentorado ================= */
.cx-convite{padding:16px 18px}
.cv-linha{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.cv-campo{display:flex;flex-direction:column;gap:5px;flex:1 1 200px;min-width:180px}
.cv-campo span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.cv-campo input{background:var(--sup2);color:var(--t1);border:1px solid var(--linha2);
  border-radius:9px;padding:9px 11px;font-size:14px;font-family:inherit;width:100%;box-sizing:border-box}
.cv-campo input:focus{outline:none;border-color:var(--eco1);box-shadow:0 0 0 3px rgba(56,189,248,.16)}
.cv-pronto{margin-top:16px;padding:14px 16px;border-radius:12px;
  background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.28)}
.cv-tit{font-size:13.5px;color:var(--t2);margin-bottom:9px}
.cv-link{font-family:var(--fn),monospace;font-size:12px;color:var(--t1);word-break:break-all;
  background:var(--sup2);border:1px solid var(--linha2);border-radius:9px;padding:10px 12px;line-height:1.5}
.cv-bts{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.cv-bts .bt-imp{text-decoration:none;display:inline-flex;align-items:center}
.cv-aviso{font-size:12px;color:var(--t3);margin-top:9px}


/* ---- botao de tirar unidade: apagado quando nao ha o que tirar ---- */
.mm.off,.mm.off:hover{border-color:var(--linha2);color:var(--t3);background:transparent;opacity:.45;cursor:default;pointer-events:none}
/* SKU que so existe como anuncio Full: nao ha deposito proprio para mexer */
.so-full{font-family:var(--fn);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);
  border:1px dashed var(--linha);border-radius:20px;padding:2px 9px;display:inline-block}
/* chave "manter deposito zerado" */
.chave-dep{margin:0 0 14px}
.chave-tag.fraco{color:var(--t3)}

/* reprocessar imposto de um periodo */
.cx-imposto{margin-top:12px}
.cx-imposto .ip-nota{flex:1 0 100%;font-size:12px;color:var(--t3);line-height:1.55;margin:2px 0 0}
/* 03/09/2026: sem texto explicativo fixo, a caixa nasce vazia e so aparece
   quando ha recado -- erro de validacao ou o resultado do Aplicar. */
.cx-imposto .ip-nota:empty{display:none}

/* quem esta ganhando o catalogo */
.tag-ganha{margin-left:8px;font-family:var(--fn);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--s3);border:1px solid var(--s3);border-radius:20px;padding:1px 8px;white-space:nowrap}
.conc.ganha{border-color:var(--s3)}

/* aviso curtinho enquanto a tela nova nao chega */
.carregando{color:var(--t3);font-family:var(--fn);font-size:13px;padding:18px 2px}

/* ---- barra fina no topo enquanto a tela nova nao chega ---- */
#barra-carga{position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--eco1,#38bdf8),var(--eco2,#22d3ee));
  opacity:0;transition:opacity .15s ease}
#barra-carga.anda{opacity:1;animation:corre 1.1s ease-in-out infinite}
@keyframes corre{
  0%{width:0;margin-left:0}
  50%{width:65%;margin-left:0}
  100%{width:0;margin-left:100%}
}
/* enquanto troca, o conteudo antigo fica de lado sem sumir: nada pisca */
html.trocando main{opacity:.5;transition:opacity .12s ease}
main{transition:opacity .12s ease}
@media (prefers-reduced-motion:reduce){
  #barra-carga.anda{animation:none;width:100%}
  html.trocando main{opacity:.6;transition:none}
}

/* deposito que o Mercado Livre nao deixa alterar (anuncio Full) */
.dep-travado{display:inline-flex;align-items:center;gap:7px;background:none;border:1px dashed var(--linha);
  border-radius:20px;padding:3px 10px;color:var(--t1);font-family:var(--fn);font-size:13px;cursor:pointer;
  font-variant-numeric:tabular-nums}
.dep-travado:hover{border-color:var(--dest);color:var(--dest)}
.cadeado{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.dep-travado:hover .cadeado{color:var(--dest)}


/* lançamentos já feitos no SKU, dentro da caixa de entrada */
.movs{flex:1 1 100%;width:100%;margin-top:12px;border-top:1px solid var(--linha);padding-top:10px}
.movs-tt{font-family:var(--fu);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
/* 28/08/2026: colunas arrastáveis, no mesmo gesto dos cards.
   O arrasto não move o corpo da tabela: mostra só onde a coluna vai cair, com
   uma barra vertical no cabeçalho vizinho, e ao soltar a tabela é redesenhada. */
thead tr[data-ordena-col] > th[data-ord-col]{cursor:grab}
thead tr[data-ordena-col].reordenando > th[data-ord-col]{cursor:grabbing}
thead tr[data-ordena-col] > th.arrastando{opacity:.4}
thead tr[data-ordena-col] > th.solta-antes{box-shadow:inset 3px 0 0 var(--dest)}
thead tr[data-ordena-col] > th.solta-depois{box-shadow:inset -3px 0 0 var(--dest)}
thead tr[data-ordena-col].reordenando a{pointer-events:none}

/* 28/08/2026: histórico de lançamentos fechado por padrão, com seta para abrir */
.movs-det>summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;user-select:none}
.movs-det>summary::-webkit-details-marker{display:none}
.movs-det>summary::before{content:"";flex:none;width:0;height:0;
  border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s ease}
.movs-det[open]>summary::before{transform:rotate(90deg)}
.movs-det>summary:hover{color:var(--t1)}
.movs-qt{font-family:var(--fc);font-size:10.5px;font-weight:600;letter-spacing:0;
  padding:1px 6px;border-radius:999px;border:1px solid var(--linha);color:var(--t3)}
.mv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--linha)}
.mv:last-of-type{border-bottom:0}
.mv-txt{display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--t1);min-width:0}
.mv-quando{font-size:12px;color:var(--t3)}
.mv-saida .mv-txt b{color:var(--t2)}
.mv-vazio,.mv-nota{font-size:12.5px;color:var(--t3);margin:8px 0 0;max-width:60ch}
.lixo{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--linha);border-radius:9px;background:var(--sup);color:var(--neg);cursor:pointer;padding:0}
.lixo:hover{border-color:var(--neg)}
.lixo.off{color:var(--t3);opacity:.4;cursor:not-allowed}
.lixo.off:hover{border-color:var(--linha)}


/* número clicável nas colunas Depósito no ML e Estoque local.
   Substituiu os botõezinhos de + e −: o número em si é o alvo do clique. */
.num-edita{font:inherit;font-family:var(--fn);font-size:14px;color:var(--t1);
  background:var(--sup2);border:1px solid var(--linha);border-radius:8px;
  padding:7px 14px;min-width:66px;cursor:pointer;text-align:right;
  transition:border-color .12s ease,color .12s ease}
.num-edita:hover{border-color:var(--dest);color:var(--dest)}
.num-edita:focus-visible{outline:2px solid var(--dest);outline-offset:1px}
.num-edita.travado{border-style:dashed;color:var(--t3);cursor:help}
.num-edita.travado:hover{border-color:var(--t3);color:var(--t2)}

/* alternador Entrada / Baixa dentro da caixa do estoque local */
.modo-est{display:inline-flex;border:1px solid var(--linha);border-radius:8px;overflow:hidden;align-self:center}
.modo-est .me{font:inherit;font-size:13px;padding:7px 14px;border:0;background:var(--sup2);
  color:var(--t2);cursor:pointer}
.modo-est .me+.me{border-left:1px solid var(--linha)}
.modo-est .me.on{background:var(--dest);color:#fff}


/* linhinha entre parênteses acima do nome de uma coluna (ex.: Places/Flex) */
.sup-col{display:block;font-size:9px;line-height:1.3;letter-spacing:.06em;
  font-weight:500;color:var(--t3);margin-bottom:2px;white-space:nowrap}
th.ativa .sup-col,th.ord:hover .sup-col{color:inherit;opacity:.75}


/* recado vermelho: o passo que não pode ser pulado depois de ligar a conta */
.aviso-vermelho{background:var(--sup);border:1px solid var(--neg);border-left:4px solid var(--neg);
  border-radius:6px;padding:12px 14px;margin:14px 0 0;color:var(--neg);font-size:13.5px;line-height:1.6;max-width:78ch}
.aviso-vermelho b{color:var(--neg)}


/* quem acessa cada conta (tela do administrador) */
.ac-linha{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:13px 0;border-bottom:1px solid var(--linha)}
.ac-linha:last-of-type{border-bottom:0}
.ac-quem{display:flex;flex-direction:column;gap:2px;min-width:190px;font-size:14px;color:var(--t1)}
.ac-quem span{font-size:12.5px;color:var(--t3)}
.ac-contas{display:flex;flex-wrap:wrap;gap:8px}
/* 08/09/2026: quando a conta da pessoa foi integrada, e a barra Mais novo/Mais antigo do cabecalho */
.ac-vinculo{display:flex;flex-direction:column;gap:2px;min-width:120px;font-size:12.5px;color:var(--t2)}
.ac-vinculo-rot{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.02em}
.ac-vinculo-vazio{color:var(--t3);font-style:italic}
.ac-cx{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  border:1px solid var(--linha);border-radius:9px;padding:7px 12px;background:var(--sup2);
  font-size:13px;color:var(--t2)}
.ac-cx.on{border-color:var(--dest);color:var(--t1)}
.ac-cx.fixa{opacity:.6;cursor:not-allowed}
.ac-cx input{margin:0;cursor:inherit}
/* 08/09/2026: quem acabou de se cadastrar, sem revisao do administrador ainda */
.ac-linha.pendente{background:color-mix(in srgb,var(--s7) 10%,var(--sup));border-left:3px solid var(--s7);padding-left:11px;border-radius:0 6px 6px 0}
.ac-pendente-marca{font-family:var(--fn);font-size:11.5px;padding:5px 11px;border:1px solid var(--s7);border-radius:20px;color:var(--s7);background:transparent;cursor:pointer;white-space:nowrap;align-self:center}
.ac-pendente-marca:hover{background:var(--s7);color:#fff}
@media(max-width:640px){.ac-linha{flex-direction:column}.ac-contas{width:100%}.ac-cx{flex:1 1 auto}.ac-vinculo{width:100%}}


/* ===== Todas as contas: a visão do administrador ===== */
.vg-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px;align-items:start}
.vg-card{background:var(--sup);border:1px solid var(--linha);border-radius:8px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:5px}
.vg-card.foco{border-color:var(--dest);box-shadow:inset 0 0 0 1px var(--dest)}
.vg-topo{display:flex;align-items:center;gap:7px}
.vg-ponto{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.vg-topo h3{margin:0;font-family:var(--fu);font-size:14px;font-weight:700;color:var(--t1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-tag{flex:0 0 auto;font-family:var(--fu);font-size:9px;letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;border-radius:99px;border:1px solid var(--linha);color:var(--t3);background:var(--sup2)}
.vg-tag.mentorado{color:var(--s4);border-color:var(--s4)}
.vg-dono{font-size:11.5px;color:var(--t3)}
.vg-fat{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px}
.vg-fat b{font-family:var(--fu);font-size:22px;letter-spacing:-.02em;color:var(--t1)}
.vg-var{font-family:var(--fn);font-size:11px;color:var(--t3)}
.vg-var.sobe{color:var(--s3)}
.vg-var.cai{color:var(--neg)}
.vg-leg{font-size:11px;color:var(--t3);margin-top:-3px}
.vg-grade{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--linha2);border:1px solid var(--linha2);border-radius:6px;overflow:hidden;margin-top:7px}
.vg-it{background:var(--sup2);padding:7px 8px;min-width:0}
.vg-it-rot{display:block;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-it b{font-family:var(--fn);font-size:12.5px;font-weight:600;color:var(--t1);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-it b i{font-style:normal;font-size:11px;color:var(--t3)}
.vg-bt{margin-top:10px;display:block;text-align:center;padding:8px 10px;border-radius:6px;background:var(--dest);color:#fff;text-decoration:none;font-weight:600;font-size:12.5px}
.vg-bt:hover{filter:brightness(1.08)}
.vg-nao{margin-top:10px;padding-top:8px;border-top:1px dashed var(--linha);font-size:11px;line-height:1.5;color:var(--t3)}
.vg-aviso{grid-column:1/-1;margin:0;font-size:12px;color:var(--neg)}
@media (max-width:560px){.vg-lista{grid-template-columns:1fr}}


/* o cabeçalho do card virou botão: abre o ranking de produtos embaixo */
.vg-topo{width:100%;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.vg-seta{width:16px;height:16px;flex:0 0 auto;color:var(--t3);transition:transform .15s}
.vg-topo:hover .vg-seta{color:var(--dest)}
.vg-seta.on{transform:rotate(180deg);color:var(--dest)}
.vg-prod{margin-top:10px;padding-top:10px;border-top:1px solid var(--linha)}
.vg-prod-tt{font-family:var(--fu);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin-bottom:7px}
.vg-prod .tw{max-height:520px;overflow:auto}


/* ranking de produtos em cartões, para caber no celular */
.vg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:9px}
.vg-bar .vg-prod-tt{margin:0;flex:1 1 100%}
.vg-ord{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.vg-ord select{font-family:var(--fb);font-size:12px;text-transform:none;letter-spacing:0;padding:5px 6px;border:1px solid var(--linha);border-radius:5px;background:var(--sup2);color:var(--t1);max-width:150px}
.vg-bt2{font-family:var(--fb);font-size:12px;padding:6px 10px;border:1px solid var(--linha);border-radius:5px;background:var(--sup2);color:var(--t2);cursor:pointer}
.vg-bt2:hover,.vg-bt2.on{border-color:var(--dest);color:var(--dest)}
.vg-esc{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;padding:10px;border:1px solid var(--linha);border-radius:6px;background:var(--sup2)}
.vg-esc-tt{flex:1 1 100%;font-family:var(--fu);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.vg-cx{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t2);border:1px solid var(--linha);border-radius:99px;padding:4px 10px;cursor:pointer;background:var(--sup)}
.vg-cx.on{border-color:var(--dest);color:var(--dest)}
.vg-cx input{margin:0;width:13px;height:13px}
.vg-p-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vg-p{position:relative;border:1px solid var(--linha);border-radius:7px;background:var(--sup2);padding:9px 9px 9px 28px}
.vg-p-pos{position:absolute;left:7px;top:10px;font-family:var(--fn);font-size:11px;color:var(--t3)}
.vg-p-cab{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--t1)}
.vg-p-cab .capa{width:36px;height:36px;flex:0 0 auto;border-radius:4px;object-fit:cover;background:var(--linha2)}
.vg-p-cab .nome{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vg-p-met{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:1px;margin-top:8px;background:var(--linha2);border:1px solid var(--linha2);border-radius:5px;overflow:hidden}
.vg-m{background:var(--sup);padding:6px 8px;min-width:0}
.vg-m span{display:block;font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-m b{font-family:var(--fn);font-size:12px;font-weight:600;color:var(--t1);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-m b.neg{color:var(--neg)}
.vg-mais{display:block;width:100%;margin-top:9px;padding:9px;border:1px dashed var(--linha);border-radius:6px;background:none;color:var(--t2);font:inherit;font-size:12px;cursor:pointer}
.vg-mais:hover{border-color:var(--dest);color:var(--dest)}


/* ===== o card aberto não pode mudar de tamanho no celular =====
   Item de grid nasce com min-width:auto: qualquer coisa larga la dentro
   (nome de produto sem espaco, a barra de ordenacao, a grade de numeros)
   estica a COLUNA inteira, e ai o card aberto fica maior que os fechados e a
   pagina anda para o lado. Travar o min-width em 0 resolve na raiz. */
.vg-lista{grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr))}
.vg-card,.vg-topo,.vg-grade,.vg-it,.vg-prod,.vg-bar,.vg-esc,
.vg-p,.vg-p-cab,.vg-p-met,.vg-m{min-width:0;max-width:100%}
.vg-card{overflow:hidden}
.vg-p-lista{min-width:0}
.vg-p-cab .nome{overflow-wrap:anywhere;word-break:break-word}
.vg-ord{min-width:0;flex:1 1 150px}


/* ===== detalhes da conta em nova aba (10/09/2026) =====
   ?aba=visao_conta&alvo=<user_id>. A pastilha do card virou link (.vg-nova);
   a tela reaproveita o cabecalho do card (.vg-topo, .vg-dono, .vg-imp) em
   tamanho de pagina, os cards .kpi das outras telas e a tabela de produtos
   com a largura toda. */
.vg-seta-bt.vg-nova{text-decoration:none}
.vc-cab{background:var(--sup);border:1px solid var(--linha);border-radius:8px;padding:14px 18px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:14px}
.vc-cab .vg-topo{flex:1 1 280px;min-width:0;cursor:default}
.vc-cab .vg-topo h3{font-size:19px;white-space:normal;overflow:visible}
.vc-cab .vg-ponto{width:11px;height:11px}
.vc-cab .vg-dono{flex:1 1 100%;font-size:12.5px}
.vc-cab .vg-imp{flex:1 1 280px;margin:0}
.vc-cab .vg-bt{flex:0 0 auto;margin:0;padding:9px 16px}
.vc-cab .vg-nao{flex:1 1 100%;margin:0;padding:0;border:0;font-size:12px}
.vc-volta{flex:0 0 auto;margin-left:auto;font-size:12px;color:var(--t3);text-decoration:none}
.vc-volta:hover{color:var(--dest)}
.vc-kpis{margin-bottom:22px}
@media (max-width:560px){.vc-cab{padding:12px 14px}.vc-cab .vg-topo h3{font-size:16px}.vc-volta{margin-left:0}}
.vg-ord select{flex:1 1 auto;min-width:0;max-width:100%}
.vg-bt2{flex:0 0 auto}

/* no celular, dois numeros por linha: com tres o valor era cortado */
@media (max-width:560px){
  .vg-ord{flex:1 1 100%}
  .vg-m b i{display:block;margin-left:0;margin-top:1px}
  .vg-grade{grid-template-columns:1fr 1fr}
  .vg-p-met{grid-template-columns:1fr 1fr}
  .vg-it b,.vg-m b{white-space:normal}
}


/* o percentual que anda junto do número, no card do produto */
.vg-m b i{font-style:normal;font-size:10.5px;font-weight:500;color:var(--t3);margin-left:3px;white-space:nowrap}


/* aviso vermelho ao lado do Lucro real quando falta custo ou imposto no SKU */
.tag-inc{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px;
  font-family:var(--fu);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:#cf3a2e;white-space:nowrap;vertical-align:middle;line-height:1.6}
td .tag-inc{margin-left:5px}
.kpi .sub .tag-inc{margin-left:5px}

/* o faturamento cancelado, embaixo da contagem de pedidos (27/08/2026).
   Menor e mais apagado que o resto do .sub de proposito: e um aviso de canto de
   olho, nao um numero para comparar com o de cima. */
.marca-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--dest);background:color-mix(in srgb,var(--dest) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--dest) 30%,transparent);white-space:nowrap}

/* --- situacao do anuncio no Mercado Livre (28/08/2026) --- */
/* 28/08/2026: a coluna Situação passou a escrever ATIVO/INATIVO ao lado do
   símbolo. A cor é a leitura de relance; o desenho continua distinguindo POR QUE
   está inativo (pausado pelo vendedor, sem saldo no Full, encerrado). */
.cel-sit{width:96px;text-align:left;padding-left:8px;padding-right:8px}
.sit{display:inline-flex;align-items:center;justify-content:flex-start;gap:5px;min-height:16px;line-height:1;cursor:help;white-space:nowrap}
.sit svg{width:14px;height:14px;display:block;flex:none}
.sit-txt{font-family:var(--fu);font-size:10px;font-weight:700;letter-spacing:.07em}
.sit-on{color:#22c55e}
.sit-off{color:var(--neg)}
.sit-ativo{color:#22c55e}
.sit-pausado{color:var(--neg)}
.sit-sem_estoque{color:var(--neg);opacity:.9}
.sit-encerrado{color:var(--neg);opacity:.8}
.sit-nada{color:var(--t3);opacity:.45;font-size:12px}

.kpi .canc{display:block;margin-top:3px;font-size:10.5px;color:var(--t3);opacity:.72;letter-spacing:.01em}
.vg-m .tag-inc{margin:3px 0 0;display:block;width:max-content;max-width:100%}

/* botao Buscar do seletor de contas (25/08/2026) */
.contas-cx .bt-buscar{margin-left:8px;padding:7px 16px;border-radius:8px;cursor:pointer;
  font-family:var(--fb);font-size:13px;font-weight:600;
  border:1px solid var(--dest);background:var(--dest);color:#fff}
.contas-cx .bt-buscar[disabled]{cursor:default;opacity:.45;
  border-color:var(--linha);background:transparent;color:var(--t3)}
.contas-cx .bt-buscar:not([disabled]):hover{filter:brightness(1.12)}
.contas-cx .bt-buscar:focus-visible{outline:2px solid var(--dest);outline-offset:2px}

.pc-rodape{margin-top:9px;padding-top:8px;border-top:1px solid var(--linha2);
  font-family:var(--fn);font-size:11px;color:var(--t3)}

/* grafico dos ultimos dias: nasce fechado, abre no clique (25/08/2026).
   v2: setinha a ESQUERDA e botao destacado -- antes era discreto demais. */
.graf30 .graf-abre{display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px 10px 14px;margin:0;cursor:pointer;
  border:1px solid var(--dest);border-radius:10px;background:var(--sup2);
  font-family:var(--fu);font-weight:700;font-size:15px;letter-spacing:-.01em;
  color:var(--dest);text-align:left}
.graf30 .graf-abre svg{width:20px;height:20px;flex:0 0 auto;
  transition:transform .18s ease}
.graf30 .graf-abre em{font-family:var(--fn);font-style:normal;font-weight:400;
  font-size:12px;color:var(--t3)}
.graf30 .graf-abre:hover{background:var(--dest);color:#fff}
.graf30 .graf-abre:hover em{color:rgba(255,255,255,.8)}
.graf30 .graf-abre:focus-visible{outline:2px solid var(--dest);outline-offset:3px}
.graf30.graf-fechado .graf-abre svg{transform:rotate(-90deg)}
.graf30.graf-fechado .graf-corpo{display:none}
.graf30.graf-fechado{padding-bottom:16px}
.graf30 .graf-corpo{margin-top:16px}
.graf30 .graf-corpo .modos-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (prefers-reduced-motion:reduce){.graf30 .graf-abre svg{transition:none}}

/* cores das colunas da tabela de Vendas -- espelham as linhas do grafico (25/08/2026) */
td.c-fat{color:var(--s1)}
td.c-saida{color:var(--s7)}
td.c-margem{color:var(--s3)}
td.c-ads{color:var(--s2)}
td.c-lucro{color:var(--s4)}
td.c-un{color:var(--s5)}
td.c-visita{color:var(--s6)}
/* prejuizo continua vermelho, venca quem vencer acima */
td.neg,td.c-fat.neg,td.c-saida.neg,td.c-margem.neg,td.c-ads.neg,
td.c-lucro.neg,td.c-un.neg,td.c-visita.neg{color:var(--neg)}

/* caixa de sugestoes (25/08/2026) */
.sug-form{display:flex;flex-direction:column;gap:12px;max-width:640px}
.sug-form textarea{width:100%;resize:vertical;min-height:120px;padding:12px 14px;
  border:1px solid var(--linha);border-radius:8px;background:var(--sup);color:var(--t1);
  font-family:var(--fb);font-size:14px;line-height:1.5}
.sug-form textarea:focus{outline:2px solid var(--dest);outline-offset:1px;border-color:var(--dest)}
.sug-baixo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bt-sug{padding:10px 20px;border-radius:8px;cursor:pointer;border:1px solid var(--dest);
  background:var(--dest);color:#fff;font-family:var(--fb);font-size:14px;font-weight:600}
.bt-sug:hover{filter:brightness(1.12)}
.bt-sug[disabled]{opacity:.5;cursor:default}
.recado.bom{color:var(--s3)}

.sug-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sug-item{background:var(--sup);border:1px solid var(--linha);border-left:3px solid var(--dest);
  border-radius:6px;padding:13px 15px}
.sug-topo{display:flex;align-items:center;gap:10px}
.sug-topo b{font-family:var(--fb);font-size:13.5px;color:var(--t1)}
.sug-quando{font-family:var(--fn);font-size:11px;color:var(--t3);margin-right:auto}
.sug-texto{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--t1);white-space:pre-wrap}
.sug-quem{margin-top:7px;font-family:var(--fn);font-size:11px;color:var(--t3)}

/* ===================== cards do painel (25/08/2026) =====================
   A cor do card passou a vir da MESMA paleta das linhas do grafico, por
   --cor-card, em vez dos tons genericos t-a/t-b/t-c. Faturamento e azul no
   card e azul no grafico; ADS e laranja nos dois; a fileira inteira fica
   legivel de relance.

   Os tons antigos continuam valendo onde --cor-card nao e definido -- os
   cards da tela de SKUs e da visao geral usam kpi() direto e nao passam cor.
   Por isso a regra e var(--cor-card, <o tom de antes>): quem define a
   variavel manda, quem nao define fica como estava.

   O fundo e um banho leve da propria cor. Vem com background solido ANTES,
   como reserva: navegador que nao entenda color-mix ignora a segunda linha e
   fica com o card branco de sempre, em vez de transparente. */
.kpi{background:var(--sup);background:color-mix(in srgb,var(--cor-card,var(--sup)) 9%,var(--sup));
  border-top-color:var(--cor-card,var(--linha))}
.kpi .val{color:var(--cor-card,var(--t1))}
.kpi.t-a{border-top-color:var(--cor-card,var(--s1))}
.kpi.t-b{border-top-color:var(--cor-card,var(--s2))}
.kpi.t-c{border-top-color:var(--cor-card,var(--s3))}
.kpi.t-a .val{color:var(--cor-card,var(--s1))}
.kpi.t-b .val{color:var(--cor-card,var(--s2))}
.kpi.t-c .val{color:var(--cor-card,var(--s3))}
/* lucro negativo e vermelho por cima de qualquer cor de card */
.kpi.t-ruim{border-top-color:var(--neg)}
.kpi.t-ruim .val{color:var(--neg)}
.kpi .comp{border-top-color:color-mix(in srgb,var(--cor-card,var(--linha2)) 22%,var(--linha2))}

/* ---- barra de busca: contas + escolha de cards + Buscar ---- */
.barra-busca{margin:0 0 14px}
.barra-busca>.contas-cx{margin:0}
.barra-busca .filtros-unificados{margin-bottom:10px}
.barra-busca .busca-presets{justify-content:flex-start;margin:0 0 10px}
.barra-busca .busca-presets button{font-family:var(--fn);font-size:11px;padding:5px 10px;border:1px solid var(--linha);border-radius:3px;color:var(--t2);background:var(--sup);cursor:pointer}
.barra-busca .busca-presets button.on{background:var(--dest);border-color:var(--dest);color:#fff}
.bt-cards{font-family:var(--fu);font-weight:600;font-size:12.5px;padding:6px 12px;border:1px solid var(--linha);
  border-radius:4px;background:var(--sup);color:var(--t2);cursor:pointer;line-height:1.5}
.bt-cards:hover{border-color:var(--dest);color:var(--dest)}
.bt-cards.on{border-color:var(--dest);color:#fff;background:var(--dest)}
.painel-cards{background:var(--sup);border:1px solid var(--linha);border-left:3px solid var(--dest);
  border-radius:5px;padding:14px;margin:10px 0 0}
.painel-cards .grade-cols{margin:10px 0 0}
.painel-cards .pt-cor{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.cards-pend{margin:12px 0 0;font-family:var(--fn);font-size:12px;color:var(--dest)}

/* ---- imposto mes a mes, no card da conta (25/08/2026) ---- */
.bt-meses{margin-top:10px;width:100%;font-family:var(--fu);font-weight:600;font-size:12px;padding:7px 12px;
  border:1px dashed var(--linha);border-radius:4px;background:transparent;color:var(--t2);cursor:pointer}
.bt-meses:hover{border-color:var(--dest);border-style:solid;color:var(--dest)}
.meses-cx:not(:empty){margin-top:10px;border-top:1px solid var(--linha2);padding-top:10px}
.mi-cabeca,.mi-linha{display:grid;grid-template-columns:52px 62px 1fr 1fr auto;gap:8px;align-items:center}
.mi-cabeca{font-family:var(--fu);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding-bottom:6px}
.mi-cabeca span:nth-child(3),.mi-cabeca span:nth-child(4){text-align:right}
.mi-lista{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.mi-linha{font-size:12px;padding:2px 0}
.mi-mes{color:var(--t2);font-variant-numeric:tabular-nums}
.mi-pct{font-family:var(--fn);font-size:12.5px;padding:4px 6px;border:1px solid var(--linha);border-radius:3px;
  background:var(--sup2);color:var(--t1);width:100%;text-align:right}
.mi-pct:focus{border-color:var(--dest);outline:none}
.mi-fat,.mi-imp{text-align:right;font-variant-numeric:tabular-nums;color:var(--t2)}
.mi-imp{color:var(--t1)}
.mi-zero .mi-imp{color:var(--neg);font-weight:600}
.mi-aviso{font-family:var(--fu);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:10px;background:var(--sup2);color:var(--t3);border:1px solid var(--linha2);white-space:nowrap}
.mi-aviso.mi-alerta{background:rgba(192,57,43,.13);color:var(--neg);border-color:transparent}
.mi-pe{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:11px}

/* marquinha de "tem balao aqui" na coluna do saldo parado no Full */
.tem-balao{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;margin-left:5px;
  border-radius:50%;border:1px solid var(--linha);color:var(--t3);font-size:9px;line-height:1;cursor:help;vertical-align:1px}

/* ---- pastilha de status da campanha (25/08/2026) ---- */
.pastilha{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 9px;border-radius:11px;
  font-family:var(--fu);font-weight:600;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;border:1px solid transparent;background:var(--sup2)}
.pastilha::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pastilha.p-ok{color:var(--s3);border-color:var(--s3);
  background:color-mix(in srgb,var(--s3) 14%,var(--sup))}
.pastilha.p-off{color:var(--t3);border-color:var(--linha2);background:var(--sup2)}

/* ---- boas-vindas de quem acabou de conectar uma conta (25/08/2026) ---- */
.conectou{max-width:620px;margin:8px auto 0;background:var(--sup);border:1px solid var(--linha);
  border-radius:9px;padding:30px 30px 26px}
.cn-selo{display:inline-flex;align-items:center;gap:9px;font-family:var(--fu);font-weight:600;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--s3);margin-bottom:13px}
.cn-selo i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.cn-tit{font-family:var(--fu);font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 7px;text-wrap:balance}
.cn-sub{margin:0 0 16px;color:var(--t2);font-size:15px}
.cn-prazo{background:var(--linha2);border-radius:7px;padding:13px 15px;margin:0 0 4px;font-size:14.5px;color:var(--t1)}
.cn-h2{font-family:var(--fu);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--t3);margin:26px 0 8px}
.cn-nota{margin:0 0 18px;color:var(--t2);font-size:14px}
.cn-passos{margin:0;padding:0;list-style:none;counter-reset:n}
.cn-passos li{counter-increment:n;position:relative;padding:0 0 20px 40px;font-size:14.5px;color:var(--t2)}
.cn-passos li:last-child{padding-bottom:2px}
.cn-passos li b{color:var(--t1);font-weight:600}
.cn-passos li::before{content:counter(n);position:absolute;left:0;top:-1px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--dest);color:#fff;font-family:var(--fu);font-size:13px;font-weight:600}
.cn-bt{display:inline-block;margin-top:9px;font-family:var(--fu);font-weight:600;font-size:12.5px;
  padding:7px 14px;border:1px solid var(--dest);border-radius:4px;color:var(--dest);text-decoration:none}
.cn-bt:hover{background:var(--dest);color:#fff}
.cn-pe{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--linha2);font-size:13.5px;color:var(--t3)}
.cn-pe a{color:var(--dest)}
@media(max-width:640px){.conectou{padding:22px 18px 20px}.cn-tit{font-size:20px}}

/* ---- quanto do historico ja desceu, no card do Gerenciador (25/08/2026) ---- */
.vg-imp{margin:10px 0 2px;padding:9px 11px;border:1px solid var(--linha2);border-radius:6px;background:var(--sup2)}
.vg-imp-topo{display:flex;align-items:baseline;gap:8px}
.vg-imp-rot{font-family:var(--fu);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.vg-imp-pct{margin-left:auto;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;color:var(--t2)}
.vg-imp-trilho{height:5px;border-radius:3px;background:var(--linha);overflow:hidden;margin-top:6px}
.vg-imp-trilho i{display:block;height:5px;border-radius:3px;background:var(--s2);transition:width .3s}
.vg-imp-pe{margin-top:5px;font-size:10.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.vg-imp.pronta .vg-imp-trilho i{background:var(--s3)}
.vg-imp.pronta .vg-imp-rot,.vg-imp.pronta .vg-imp-pct{color:var(--s3)}
.vg-imp.vazia .vg-imp-trilho i{background:var(--linha)}

/* ---- card de tipo de envio ----
   Trilho igual ao da divisao por conta (.pc-trilho): mesma leitura, mesma
   altura, entao os dois cards nao brigam quando ficam lado a lado. */
.lg-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.lg-item{font-size:12px}
.lg-topo{display:flex;align-items:baseline;gap:8px}
.lg-nome{color:var(--t2)}
.lg-valor{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--t1);font-weight:500}
.lg-trilho{height:6px;border-radius:4px;background:var(--linha2);overflow:hidden;margin-top:4px}
.lg-trilho i{display:block;height:6px;border-radius:4px;background:var(--cor-card,var(--dest));transition:width .25s}
.lg-pe{margin-top:3px;font-size:10.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.lg-vazio{font-size:12px;color:var(--t3)}

/* ---- faixa da divisao por conta, embaixo da fileira de cards ----
   Ela saiu de dentro do card em 25/08/2026. Ver o comentario de
   painelPorConta() no app.js: era ali que abrir um card esticava o vizinho. */
/* 25/08/2026 (2a volta): a faixa usa a MESMA grade dos cards -- mesmo
   minmax, mesmo gap -- entao cada divisao aberta tem exatamente a largura de
   um card, e nao a da tela inteira. Na primeira versao ela era uma grade
   propria de 258px e uma divisao sozinha esticava de ponta a ponta.
   Ficar embaixo do card CERTO nao da para garantir em CSS: com auto-fit o
   numero de colunas muda com a largura da tela, e o indice do card so vira
   coluna quando tudo cabe numa linha. Por isso a ligacao e pela cor: a borda
   esquerda da divisao e a mesma cor do card, e o titulo repete o nome dele. */
.kpis-abertos{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:11px;margin:0 0 6px;align-items:start}
.kpi-contas{margin-top:0;border-left:3px solid var(--cor-card,var(--dest))}

/* ---- campo de busca do Cadastro de SKUs (25/08/2026) ---- */
.busca-sku{margin:0 0 11px}
.busca-sku input{width:100%;max-width:420px;font-family:var(--fb);font-size:14px;padding:9px 12px;
  border:1px solid var(--linha);border-radius:4px;background:var(--sup2);color:var(--t1)}
.busca-sku input::placeholder{color:var(--t3)}
.busca-sku input:focus{border-color:var(--dest);outline:none;box-shadow:0 0 0 1px var(--dest)}
.limpa-busca{font-family:var(--fu);font-weight:600;font-size:11.5px;padding:3px 10px;border:1px solid var(--linha);
  border-radius:3px;background:var(--sup2);color:var(--t2);cursor:pointer}
.limpa-busca:hover{border-color:var(--dest);color:var(--dest)}

/* barra de SKU com lista propria (a <datalist> nativa nao abre sozinha) */
.filtros .sku-campo{position:relative;display:block;width:100%}
.sku-lista{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;background:var(--sup);border:1px solid var(--linha);border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.sku-lista[hidden]{display:none}
.sku-op{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;border:0;background:none;padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--linha);font-family:var(--fn)}
.sku-op:last-child{border-bottom:0}
.sku-op:hover,.sku-op:focus{background:var(--sup2)}
.sku-op b{font-size:12px;font-weight:600;color:var(--t1);text-transform:none;letter-spacing:0}
.sku-op span{font-size:11px;color:var(--t3);text-transform:none;letter-spacing:0}
.sku-vazio{padding:10px;font-size:12px;color:var(--t3);font-family:var(--fn)}

/* 26/08/2026: o titulo do card virou uma faixa. Pedido do Roderjan: "o titulo
   maior, centralizado, com fundo mais escuro do que o card, mas na mesma cor,
   deixando mais harmonico".

   Cada card ja carrega a propria cor em --cor-card (kpiSel escreve isso no
   .kpi-caixa) e pinta o corpo com 9% dela sobre --sup. A faixa usa a MESMA
   cor, so que assentada sobre --fundo em vez de --sup. --fundo e mais escuro
   que --sup nos dois temas (claro: #eef1f5 contra #fff; escuro: #0d1218 contra
   #151d26), entao a faixa desce um degrau em qualquer tema sem trocar de
   matiz -- que era exatamente o pedido.

   As margens negativas (-13px -15px) anulam o padding do .kpi e levam a faixa
   ate a borda; o .kpi ja tem overflow:hidden, entao o canto arredondado corta
   a faixa sozinho. O seletor e filho direto (.kpi>.rot) de proposito: .rot
   tambem existe na calculadora de margem e na projecao, e la o titulo continua
   como estava.

   Quem manda no card ligado no grafico continua sendo .kpi-bt.on .rot (linha
   430), que tem especificidade maior e pinta o titulo de --dest.

   A faixa tem altura fixa (min-height:40px, conteudo centrado no meio) porque
   "Visitas nos anuncios" quebra em duas linhas e os vizinhos nao. Sem isso, o
   card de visitas empurrava o numero 15px para baixo e a fileira inteira
   ficava desalinhada -- o oposto de harmonico. */
.kpi>.rot{
  margin:-13px -15px 10px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 12px;
  text-align:center;
  line-height:1.18;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:color-mix(in srgb,var(--cor-card,var(--t2)) 40%,var(--t1));
  background:color-mix(in srgb,var(--cor-card,var(--linha)) 15%,var(--fundo));
  border-bottom:1px solid color-mix(in srgb,var(--cor-card,var(--linha)) 28%,var(--fundo));
}
.kpi>.rot+.linha-val .val,.kpi>.rot+.val{margin-top:0}

/* --- cards: faixa escura e conteudo centralizado ---
   26/08/2026, pedido do Roderjan: "o quadrado do titulo mais escuro, quase sem
   transparencia, as informacoes centralizadas ocupando a maior parte possivel
   do quadrado, e todas do mesmo tamanho".

   A FAIXA. Era a cor do card a 15% sobre --fundo. Agora e 26% sobre --fundo JA
   escurecido com 12% de preto. Escurecer com preto funciona nos DOIS temas: no
   claro tira o ar lavado, no escuro chega perto do preto. Misturar com --t1
   (a cor do texto) NAO serviria -- no tema escuro --t1 e claro, e a faixa
   clarearia em vez de escurecer.

   A ALTURA DA FAIXA virou fixa (48px). Com min-height, um titulo de duas linhas
   ("Margem de contribuicao", "Visitas nos anuncios") deixava aquela faixa mais
   alta que a do card do lado. Agora todas tem a mesma altura, com o titulo
   centrado no meio, cabendo em uma ou duas linhas.

   O CONTEUDO ficou centralizado. As duas linhas que eram flex com
   space-between (o valor e o par valor-anterior/percentual) passaram a
   justify-content:center, senao o texto ficaria centrado mas os numeros
   continuariam grudados nas bordas.

   O valor subiu de 21px para 22px e para por ai: a 25px "R$ 14.830,11" quebra
   em duas linhas num card de celular.

   ALTURA IGUAL so na fileira das Metricas (.kpis-iguais). grid-auto-rows:1fr
   deixa TODAS as linhas da grade do tamanho da mais alta -- bom aqui, onde os
   cards sao numeros parecidos, e ruim nas outras telas, onde um card com lista
   dentro esticaria todos os vizinhos.

   O :has() e de proposito: quando o card NAO tem comparacao (Gasto ADS, Lucro
   real quando o periodo e parcial), sobra muito espaco embaixo e o valor fica
   boiando no alto. As duas margens automaticas centram o miolo. Navegador sem
   :has() ignora as duas regras e volta ao alinhamento de antes -- degrada para
   o que ja existia, nao para algo quebrado.

   A lista do card de Tipo de envio fica de fora: linha corrida alinhada a
   esquerda, que centralizada viraria uma bagunca. */
.kpis-iguais{grid-auto-rows:1fr}
.kpi{text-align:center}
.kpi>.rot{
  height:48px;
  min-height:0;
  margin:-13px -15px 12px;
  font-size:13px;
  letter-spacing:.05em;
  color:color-mix(in srgb,var(--cor-card,var(--t2)) 34%,var(--t1));
  background:color-mix(in srgb,var(--cor-card,var(--linha)) 26%,color-mix(in srgb,var(--fundo) 88%,#000));
  border-bottom:1px solid color-mix(in srgb,var(--cor-card,var(--linha)) 34%,#000);
}
.kpi .linha-val{justify-content:center}
.kpi .val{font-size:22px}
.kpi .comp .linha-comp{justify-content:center;gap:12px}
.kpi:has(.comp) .linha-val{margin-top:auto}
.kpi:not(:has(.comp)) .linha-val{margin-top:auto}
.kpi:not(:has(.comp)) .sub{margin-bottom:auto}
.kpi .lg-lista{text-align:left}

/* --- zebra nas tabelas ---
   26/08/2026, pedido do Roderjan: "onde houver uma lista, uma linha mais clara,
   outra mais escura, seguindo um padrao de cor". Vale em toda tabela do painel,
   porque todas passam pela mesma funcao tabela(): venda a venda, por produto,
   por variacao, Estoque, Estoque Full, Catalogo, Conversas, Cadastro de SKUs.

   A faixa e um veu de --t3 sobre transparente. --t3 e o cinza medio do tema:
   no claro (#7d8a98) escurece a linha par, no escuro (#76838f) clareia. Um so
   valor serve para os dois, e como e transparente funciona por cima de
   qualquer fundo que a tabela tenha embaixo.

   26/08/2026, segunda passada: comecou em --t1 5% e o Roderjan pediu mais
   visivel e mais cinza. --t1 e a cor do TEXTO -- azulada nos dois temas --,
   entao subir a porcentagem dela deixaria a listra azulada, nao cinza. Trocar
   para --t3, que ja e cinza puro, resolve as duas coisas de uma vez. Foram
   comparados 12%, 18% e 26% em imagem: 18% le bem nos dois temas sem competir
   com o realce do mouse, que continua sendo --sup2.

   As tres regras depois da zebra sao reposicionamento, nao mudanca: elas ja
   existiam mais acima no arquivo e precisam vir DEPOIS para continuar
   vencendo. Sem isso, a linha par ficaria com a listra mesmo com o mouse em
   cima, aberta ou sendo a linha-extra -- e o destaque, que e o que importa,
   sumiria. */
tbody tr[data-zebra] td{background:color-mix(in srgb,var(--t3) 18%,var(--sup))}
tbody tr:hover td{background:var(--sup2)}
tr.linha-abre.aberta td{background:var(--sup2)}
tr.linha-extra td{background:var(--sup2)}

/* --- cards moveis ---
   26/08/2026. O cartao levantado fica translucido e um pouco maior, com sombra:
   e o sinal de que esta na mao. A grade inteira troca o cursor para "fechado"
   enquanto dura o arrasto, e o corpo perde a selecao de texto -- sem isso, no
   computador, arrastar em cima de um numero pinta o texto de azul no meio do
   caminho. */
[data-ordena]>[data-ord-k]{touch-action:manipulation}
[data-ordena]>[data-ord-k].arrastando{
  opacity:.62;transform:scale(1.03);position:relative;z-index:6;
  box-shadow:0 12px 30px rgba(0,0,0,.34);cursor:grabbing}
[data-ordena]>[data-ord-k].arrastando *{cursor:grabbing}
.kpis.reordenando{cursor:grabbing}
body.sem-selecao{user-select:none;-webkit-user-select:none}

/* --- divisao por conta na sequencia do card ---
   26/08/2026, pedido do Roderjan: "preciso que seja NO card a extensao. Nao tem
   problema um card ser maior que o outro, e normal, afinal um card tem mais
   informacao que o outro".

   Essa segunda frase e a chave. Ate aqui o painel nao podia morar dentro do card
   porque o vizinho esticava junto e virava um retangulo vazio. Com a igualdade
   de altura dispensada enquanto ha painel aberto, o obstaculo some.

   Todos os :has pedem :not(.fechado) de proposito. Os paineis sao montados
   sempre, abertos ou fechados -- e o .fechado que esconde. Um :has(.kpi-contas)
   solto acertaria TODOS os cards, inclusive os de painel escondido, e cada um
   ganharia a moldura dupla do estado aberto.

   A faixa .kpis-abertos, casa antiga dos paineis, fica vazia e some. */
.kpi-caixa>.kpi-contas{margin-top:0;border:0;border-radius:0;background:transparent;box-shadow:none;
  border-top:1px solid color-mix(in srgb,var(--cor-card,var(--linha)) 30%,var(--linha2));
  padding:12px 15px 14px}
/* o card aberto passa a ser a moldura, e o corpo dele perde a propria: sem
   isso seriam duas bordas, uma dentro da outra */
.kpi-caixa:has(>.kpi-contas:not(.fechado)){
  background:color-mix(in srgb,var(--cor-card,var(--sup)) 9%,var(--sup));
  border:1px solid var(--linha);border-top:2px solid var(--cor-card,var(--linha));
  border-radius:5px;overflow:hidden;height:auto}
.kpi-caixa:has(>.kpi-contas:not(.fechado))>.kpi-bt>.kpi{border:0;background:transparent}
/* o anel de "este esta no grafico" muda de dono junto com a moldura */
.kpi-caixa:has(>.kpi-contas:not(.fechado)):has(>.kpi-bt.on){
  border-color:var(--dest);box-shadow:inset 0 0 0 1px var(--dest)}
.kpi-caixa:has(>.kpi-contas:not(.fechado)) .kpi-serie.on .kpi::after{display:none}
/* ESTA e a regra que faz o pedido caber: com um painel aberto, cada card fica
   do tamanho que precisa. Sem ela o vizinho estica junto e vira um retangulo
   vazio -- foi por isso que em 25/08 o painel teve de sair de dentro do card.
   O height:auto e obrigatorio: .kpi-caixa tem height:100%, que sozinho vence o
   align-self. */
.kpis:has(.kpi-contas:not(.fechado))>.kpi-caixa{align-self:start;height:auto}
/* 26/08/2026: "voce nao precisa mover os dois da esquerda, eles podem ficar no
   lugar que estavam; so mudariam de local se os de cima estivessem estendidos".

   Numa grade comum a linha inteira tem a altura do item mais alto, entao abrir
   um card empurra TODA a fileira de baixo. Para o card crescer sem levar os
   vizinhos de outra coluna junto, a grade passa a trabalhar em linhas de 1px e
   cada card ocupa quantas linhas precisar (grid-row: inicio / span N, calculado
   no app.js pelo ordEmpilha). Cada coluna passa a andar sozinha.

   O row-gap vira zero e o respiro entre os cards vem do margin-bottom -- por
   isso o span soma 11px, o mesmo da margem, senao a coluna encavalaria.

   So vale enquanto ha um painel aberto. Fechou, tudo volta ao grid-auto-rows:1fr
   e os cards voltam a ter todos o mesmo tamanho. */
.kpis.empilha-livre:has(.kpi-contas){grid-auto-rows:1px;row-gap:0}
.kpis.empilha-livre>.kpi-caixa{margin-bottom:11px;align-self:start;height:auto}
.kpis-abertos:empty{display:none}

/* --- tela de Catalogo: leitura no celular ---
   26/08/2026. O Roderjan mandou um print do iPhone com tres queixas: os textos
   explicativos (removidos no app.js), os produtos "desjustificados as suas
   linhas", e "um transparente, um risco no meio da tela dificultando a
   visualizacao".

   A FAIXA TRANSLUCIDA. Medi o print pixel a pixel: uma faixa azulada de ~75px
   de altura atravessava a tela INTEIRA, inclusive fora da tabela, com borda de
   baixo dura e de cima esfumacada -- nada no CSS desenha isso. Duas causas
   possiveis, e as duas foram fechadas porque as duas correcoes sao inofensivas:

     1) o realce de toque do iOS. A linha da tabela de catalogo e clicavel
        (linhaCat), e o iOS pinta um veu cinza por cima do elemento tocado, que
        em <tr> dentro de container rolavel costuma vazar da caixa. Desligado
        abaixo.
     2) a propria zebra. Ela era uma cor com ALFA (color-mix com transparent).
        Agora e cor solida, misturada com --sup em vez de com transparente: fica
        igualzinha na tela e nao depende mais de composicao de camada.

   OS PRODUTOS. No celular .prod perde o max-width e o titulo do anuncio ocupa
   tres, quatro linhas -- cada linha da tabela com uma altura, nada alinhado. O
   titulo passa a ser cortado em duas linhas. O SKU continua inteiro do lado, e
   o toque abre o anuncio, entao nada se perde de verdade. */
.tw,.tw *,.kpi-caixa,.kpi-caixa *{-webkit-tap-highlight-color:rgba(0,0,0,0)}
@media(max-width:820px){
  td.prod{min-width:200px;max-width:260px}
  td.prod .nome,td.prod a.ml{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* --- card de estoque acabando ---
   26/08/2026. Lista curta dentro do card, com a continuacao na extensao.
   O text-align:left e obrigatorio: o .kpi inteiro e centralizado desde a
   mudanca de hoje, e lista centralizada nao se le -- o olho precisa de uma
   margem reta para descer. */
.ac-lista{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;text-align:left}
.ac-item{display:flex;align-items:center;gap:8px;font-family:var(--fn);font-size:11.5px;line-height:1.25}
.ac-dias{flex:0 0 auto;min-width:32px;text-align:center;padding:1px 5px;border-radius:4px;font-weight:600;
  font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--neg) 18%,var(--sup));color:var(--neg)}
/* menos de tres dias nao e aviso, e urgencia: inverte para chamar o olho */
.ac-dias.urgente{background:var(--neg);color:#fff}
.ac-nome{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2)}
.ac-qtd{flex:0 0 auto;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-resto{margin-top:9px;font-size:11px;color:var(--t3);text-align:left}
/* No celular o card tem uns 190px de largura: em uma linha so, o SKU virava
   "ORBS-..." e a lista deixava de servir para o que existe. O nome passa a
   ocupar a linha inteira, e os dias e a quantidade vao para a linha de baixo,
   um em cada ponta. */
@media(max-width:640px){
  .ac-item{flex-wrap:wrap;gap:3px 8px}
  .ac-nome{order:1;flex:1 1 100%}
  .ac-dias{order:2}
  .ac-qtd{order:3;margin-left:auto}
}

/* --- menu lateral que encolhe ---
   27/08/2026. A primeira versao pos a seta no alto, junto do logo. O Roderjan
   pediu no meio e com moldura, "mostrando facil que da para encolher".

   Virou a alca redonda a MEIO CAMINHO da altura, montada em cima da propria
   borda do menu -- metade dentro, metade fora. E o lugar onde o olho procura
   quando quer empurrar um painel para o lado, e a moldura redonda com sombra
   diz sozinha que aquilo se clica.

   POSITION:FIXED, e nao absolute: o .lado tem overflow-y:auto, e um filho
   absoluto pendurado para fora da borda seria cortado pela rolagem. O fixed
   escapa do corte, e como o menu comeca na beirada da tela e ocupa a altura
   inteira, a conta de posicao e direta -- largura do menu menos meio botao.

   So no computador: abaixo de 821px a barra vira faixa horizontal no alto e a
   alca perde o sentido. Sem esse cerco as regras de fechado, mais especificas,
   ainda venceriam as de celular. */
.bt-lado{
  position:fixed; top:50%; transform:translateY(-50%);
  left:200px; /* 214 do menu - 14 de meio botao: a alca senta na borda */
  z-index:30; width:28px; height:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linha); border-radius:50%;
  background:var(--sup); color:var(--dest); cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:left .18s ease, background .12s, color .12s, border-color .12s}
.bt-lado:hover{background:var(--dest); color:#fff; border-color:var(--dest)}
.bt-lado:focus-visible{outline:2px solid var(--dest); outline-offset:2px}
.bt-lado svg{width:15px; height:15px; display:block; transition:transform .18s ease}
html.lado-fechado .bt-lado{left:40px}
html.lado-fechado .bt-lado svg{transform:rotate(180deg)}
@media(max-width:820px){.bt-lado{display:none}}

@media(min-width:821px){
  .lado{transition:width .18s ease, flex-basis .18s ease}
  html.lado-fechado .lado{width:54px; flex-basis:54px; padding:18px 0 14px; overflow:hidden}
  html.lado-fechado .lado nav,
  html.lado-fechado .lado .pe{display:none}
  /* o logo fica: da identidade a tira estreita e serve de alvo para voltar */
  html.lado-fechado .marca{padding:0; justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .lado,.bt-lado,.bt-lado svg{transition:none}
}

/* --- campo de data: o campo todo abre ---
   27/08/2026. Quem abre o calendario e o app.js; aqui so o cursor, para a mao
   avisar antes do clique que aquilo tudo e um botao. */
input[type="date"],input[type="month"]{cursor:pointer}

/* --- campo de data: tirar o realce azul da casinha em foco ---
   27/08/2026. Efeito colateral de abrir o calendario pelo campo inteiro: ao
   receber o foco, o Chrome pinta de azul a casinha (dia, mes ou ano) que ficou
   ativa. Funcionalmente correto, visualmente barulhento -- o campo parece ter
   texto selecionado sem ninguem ter selecionado nada.

   Aqui o realce vira transparente e a letra volta a cor normal. O foco continua
   existindo, so nao aparece: as setas e a digitacao seguem funcionando na
   casinha ativa.

   RESSALVA: quem navega so de teclado perde a pista de qual casinha vai editar.
   Se um dia isso incomodar, trocar o transparent por um cinza bem fraco
   (ex.: background:var(--linha)) em vez de voltar ao azul. */
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="month"]::-webkit-datetime-edit-month-field:focus,
input[type="month"]::-webkit-datetime-edit-year-field:focus{
  background:transparent;
  color:inherit;
  outline:none;
}
/* Firefox nao tem esses pseudo-elementos: la o realce vem da selecao de texto. */
input[type="date"]::selection,input[type="month"]::selection{background:transparent}

/* --- Gerenciador: a seta de abrir os produtos foi para o rodape do card ---
   27/08/2026. Mesmo desenho da .kpi-seta dos cards de Metricas: pastilha
   redonda encostada na borda de baixo, que gira quando abre. O .vg-topo
   deixou de ser botao, entao o cursor de mao sai dele. */
.vg-topo{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:0;text-align:left}
.vg-seta-bt{align-self:center;display:flex;align-items:center;justify-content:center;
  width:30px;height:24px;margin:12px auto 0;border:1px solid var(--linha);border-radius:12px;
  background:var(--sup);color:var(--t3);cursor:pointer;padding:0;
  box-shadow:0 1px 4px rgba(0,0,0,.14)}
.vg-seta-bt:hover{color:var(--dest);border-color:var(--dest);transform:translateY(1px)}
.vg-seta-bt svg{width:14px;height:14px;transition:transform .18s}
.vg-seta-bt.on{color:#fff;background:var(--dest);border-color:var(--dest)}
.vg-seta-bt.on svg{transform:rotate(180deg)}

/* --- campos De/Ate: fora o icone do calendario, dentro as setas de um dia ---
   27/08/2026. O seletor continua abrindo ao tocar em qualquer ponto do campo
   (showPicker no app.js); so o desenho nativo saiu. As setas nao usam o estilo
   de .filtros button (que e o botao cheio, azul) -- aqui e pastilha discreta. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
input[type="date"]::-webkit-inner-spin-button{display:none}

.filtros .data-linha{display:flex;align-items:stretch;gap:4px}
.filtros .data-linha input{flex:1 1 auto;min-width:112px;width:auto}
.filtros .data-nav{display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:32px;padding:0;
  background:var(--sup2);color:var(--t2);
  border:1px solid var(--linha);border-radius:3px;cursor:pointer}
.filtros .data-nav:hover{color:var(--dest);border-color:var(--dest)}
.filtros .data-nav:active{transform:translateY(1px)}
.filtros .data-nav svg{width:15px;height:15px}




/* ===== alerta de estoque baixo (28/08/2026) =====
   A fileira de caixinhas em cima da lista de Estoque usa a mesma pastilha das
   contas (.cx-conta), para o gesto ser reconhecido de primeira. */
/* 05/09/2026: o respiro em cima. As sub-abas Ativos/Arquivados vem logo
   acima e o .modos nao tem margem nenhuma, entao as duas fileiras
   encostavam e a de baixo parecia entrar na de cima. */
.barra-alerta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
/* 05/09/2026: cada alerta e UM bloco fechado, com a bolinha da cor que ele
   pinta na lista, o nome, a condicao, o numero e o interruptor -- tudo dentro
   da mesma borda. A borda veste a cor do proprio alerta, entao o bloco se
   explica sozinho e a legenda de cores que ficava no fim da fileira pode
   sumir. Desligado, ele apaga (opacity) em vez de sumir: quem desligou precisa
   continuar vendo qual e o numero que volta a valer quando religar. */
.alerta-cx{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-size:13px;color:var(--t2);background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:5px 10px 5px 12px;user-select:none}
.alerta-cx .alerta-cor{width:9px;height:9px;border-radius:50%;flex:none;background:var(--t3)}
.alerta-cx .alerta-nome{font-weight:600;color:var(--t1);white-space:nowrap}
.alerta-cx.acabando.on{border-color:color-mix(in srgb,var(--neg) 60%,var(--linha))}
.alerta-cx.acabando.on .alerta-cor{background:var(--neg)}
.alerta-cx.acabando .cx-dias-campo:focus{border-color:var(--neg)}
.alerta-cx.acabando .alerta-off input{accent-color:var(--neg)}
.alerta-cx.parado.on{border-color:color-mix(in srgb,var(--s7) 60%,var(--linha))}
.alerta-cx.parado.on .alerta-cor{background:var(--s7)}
.alerta-cx.parado .cx-dias-campo:focus{border-color:var(--s7)}
.alerta-cx.parado .alerta-off input{accent-color:var(--s7)}
.alerta-cx.off{opacity:.5}
.alerta-cx.off .alerta-nome{color:var(--t3)}
/* 05/09/2026: a caixa ligada virou um botao -- clicar traz para o topo tudo
   que cai na regra dela, clicar de novo devolve a ordem de antes. O campo de
   dias e a caixa de desligar continuam com o cursor deles: sao acoes proprias
   e o clique nelas nao puxa nada. */
.alerta-cx.on{cursor:pointer}
.alerta-cx .cx-dias-campo{cursor:auto}
.alerta-cx.on:hover{background:var(--sup2)}
.alerta-cx.acabando.puxando{background:color-mix(in srgb,var(--neg) 13%,var(--sup));border-color:var(--neg)}
.alerta-cx.parado.puxando{background:color-mix(in srgb,var(--s7) 13%,var(--sup));border-color:var(--s7)}
.alerta-cx.puxando .alerta-nome{color:var(--t1)}
.alerta-topo{font-size:13px;line-height:1;font-weight:700;margin-left:1px}
.alerta-cx.acabando .alerta-topo{color:var(--neg)}
.alerta-cx.parado .alerta-topo{color:var(--s7)}
/* o interruptor mora DENTRO do bloco, separado por um fio: e o que tira a
   duvida de qual alerta cada "desligar" desliga */
.alerta-off{display:inline-flex;align-items:center;gap:5px;margin-left:2px;padding-left:10px;border-left:1px solid var(--linha);color:var(--t3);font-size:12px;white-space:nowrap;cursor:pointer}
.alerta-off input{margin:0;cursor:pointer}
.cx-dias-rot{color:var(--t3);font-size:12px;white-space:nowrap}
.cx-dias-campo{width:64px;padding:5px 6px;text-align:center;font-family:var(--fb);font-size:14px;font-weight:600;color:var(--t1);background:var(--fundo);border:1px solid var(--linha);border-radius:4px}
.cx-dias-campo:focus{outline:none;border-color:var(--dest);box-shadow:0 0 0 2px rgba(0,0,0,.18)}
.cx-dias-campo:disabled{cursor:not-allowed;color:var(--t3);background:transparent}
@media(max-width:820px){.alerta-cx{padding:4px 8px;gap:6px}.cx-dias-campo{width:52px;font-size:13px}.alerta-off{padding-left:7px}}
/* A linha inteira em vermelho. Fundo suave (nao chapado) porque a tabela tem
   dezenas de linhas e um vermelho solido cansa; o texto vai na cor negativa,
   que e o que faz a linha "gritar". Vem DEPOIS da zebra e do hover de
   proposito: os tres seletores tem a mesma forca e quem manda e a ordem. */
tbody tr[data-alerta] td{background:color-mix(in srgb,var(--neg) 16%,var(--sup));color:var(--neg)}
tbody tr[data-alerta] td a,tbody tr[data-alerta] td .n,tbody tr[data-alerta] td span{color:var(--neg)}
tbody tr[data-alerta]:hover td{background:color-mix(in srgb,var(--neg) 26%,var(--sup))}
/* a linha aberta (formulario de entrada/baixa) tem seletor mais forte la em
   cima; sem esta regra ela perderia o vermelho justo quando esta em uso */
tbody tr[data-alerta].aberta td{background:color-mix(in srgb,var(--neg) 26%,var(--sup));color:var(--neg)}
/* O alerta irmao: estoque PARADO, em ambar (--s7). Cor propria de proposito --
   com o mesmo vermelho dos dois lados, "acabando" e "sobrando" viravam a mesma
   linha na tela, e sao decisoes opostas: uma manda comprar, a outra manda
   parar de comprar. Mesma receita do bloco acima, so trocando a cor. */
tbody tr[data-parado] td{background:color-mix(in srgb,var(--s7) 16%,var(--sup));color:var(--s7)}
tbody tr[data-parado] td a,tbody tr[data-parado] td .n,tbody tr[data-parado] td span{color:var(--s7)}
tbody tr[data-parado]:hover td{background:color-mix(in srgb,var(--s7) 26%,var(--sup))}
tbody tr[data-parado].aberta td{background:color-mix(in srgb,var(--s7) 26%,var(--sup));color:var(--s7)}

/* ================= Financeiro (01/09/2026) =================
   Segue o desenho do "Custo de um produto": mesma caixa, mesmas medidas de
   campo. Nada aqui inventa cor -- todas saem das variaveis do tema, senao a
   tela ficaria certa no claro e ilegivel no escuro. */
.fin-mes{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.fin-mes b{font-family:var(--fu);font-size:14px;min-width:12ch;text-align:center;color:var(--t1)}
.fin-seta{width:28px;height:28px;border-radius:3px;border:1px solid var(--linha);
  background:var(--sup2);color:var(--t1);font-size:16px;line-height:1;cursor:pointer}
.fin-seta:hover{border-color:var(--dest);color:var(--dest)}
.fin-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.fin-form .mini{display:flex;flex-direction:column;gap:4px;font-family:var(--fu);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.fin-form input,.fin-form select{font-family:var(--fn);font-size:13px;padding:7px 9px;
  border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1);min-width:170px}
.fin-form input:focus,.fin-form select:focus{border-color:var(--dest);outline:none}
.fin-form .recado{flex:1 1 100%}
/* 01/10/2026: o Simulador no formato do cartao do FedEx -- os numeros digitados na propria linha */
.sim-in{width:112px;max-width:100%;box-sizing:border-box;text-align:right;font-family:var(--fn);font-size:13px;font-variant-numeric:tabular-nums;padding:4px 7px;border:1px dashed var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1)}
.sim-in:focus{border-style:solid;border-color:var(--dest);outline:none}
.imp-cartao tr.unit .sim-in{width:76px;text-align:left;font-weight:700}
.sim-calc .imp-pe{flex-wrap:wrap}
.fp-nota{min-width:190px}
.fp-nota-escolha{position:relative;display:block}
.fp-nota-escolha input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-width:0}
.fp-nota-botao{display:block;padding:8px 12px;border:1px dashed var(--dest);border-radius:3px;
  background:color-mix(in srgb,var(--dest) 8%,var(--sup2));color:var(--dest);font-family:var(--fu);
  font-size:12px;letter-spacing:0;text-transform:none;text-align:center;cursor:pointer}
.fp-nota-escolha:hover .fp-nota-botao{background:color-mix(in srgb,var(--dest) 15%,var(--sup2))}
.fp-nota>small{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--t3);font-family:var(--fn);font-size:10px;letter-spacing:0;text-transform:none}
.fp-datas-cx{flex:1 1 100%;padding:12px;border:1px solid var(--linha);border-radius:4px;background:var(--sup2)}
.fp-datas-cx>b{display:block;font-family:var(--fu);font-size:12px;color:var(--t1);margin-bottom:2px}
.fp-datas-cx>span{display:block;font-family:var(--fn);font-size:11px;color:var(--t3);margin-bottom:10px}
.fp-datas{display:flex;gap:8px;flex-wrap:wrap}
.fp-datas label{display:grid;grid-template-columns:auto 165px 24px;align-items:center;gap:5px 6px;font-family:var(--fn);font-size:11px;color:var(--t2)}
.fp-datas label small{grid-column:2;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-top:2px}
.fin-form .fp-datas input{min-width:165px;width:165px;cursor:pointer}
.fin-form .fp-datas .fp-data-edit{display:flex;align-items:center;gap:4px}
.fin-form .fp-datas .fp-data-edit .fp-data-rep{min-width:132px;width:132px;cursor:text}
.fin-form .fp-datas .fp-data-edit .fp-data-cal{min-width:28px;width:28px;height:32px;padding:3px;cursor:pointer;color:transparent}
.fin-form .fp-datas .fp-valor-rep{grid-column:2;cursor:text}
.fp-remove{width:24px;height:24px;padding:0;border:1px solid color-mix(in srgb,var(--neg) 55%,var(--linha));
  border-radius:50%;background:transparent;color:var(--neg);font-size:17px;line-height:1;cursor:pointer}
.fp-remove:hover{background:color-mix(in srgb,var(--neg) 12%,transparent)}
.fp-remove:disabled{opacity:.25;cursor:not-allowed;background:transparent}
.fp-mais{margin-top:10px;padding:7px 11px;border:1px dashed var(--dest);border-radius:3px;background:transparent;
  color:var(--dest);font-family:var(--fu);font-size:11px;cursor:pointer}
.fp-mais:hover{background:color-mix(in srgb,var(--dest) 10%,transparent)}
.fp-itens-cx{flex:1 1 100%;padding:12px;border:1px solid var(--linha);border-radius:4px;background:var(--sup2)}
.fp-itens-cx>b{display:block;font-family:var(--fu);font-size:12px;color:var(--t1);margin-bottom:2px}
.fp-itens-cx>span{display:block;font-family:var(--fn);font-size:11px;color:var(--t3);margin-bottom:10px}
.fp-itens{display:grid;gap:7px}
.fp-item-nota{display:grid;grid-template-columns:minmax(100px,.55fr) minmax(220px,1.35fr) minmax(90px,.5fr) minmax(260px,1.8fr) minmax(130px,.75fr) 28px;gap:8px;align-items:end}
.fp-item-nota label{display:flex;flex-direction:column;gap:3px}
.fp-item-nota small{font-family:var(--fu);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.fin-form .fp-item-nota input,.fin-form .fp-item-nota select{width:100%;min-width:0}
.fp-remove-item{margin-bottom:5px}
.fp-item-novo{grid-column:1/-2;display:grid;grid-template-columns:minmax(130px,.6fr) minmax(260px,1.4fr);gap:8px;
  padding:8px;border:1px dashed var(--dest);border-radius:3px;background:color-mix(in srgb,var(--dest) 6%,transparent)}
.fp-item-novo[hidden]{display:none}
.mini-bt{padding:3px 10px;font-size:12px}
tr.fin-total td{border-top:2px solid var(--linha);background:var(--sup2);font-family:var(--fu)}
tr.off td{opacity:.55}
@media(max-width:820px){
  .fin-form{gap:9px}
  .fin-form input,.fin-form select{min-width:0;width:100%}
  .fin-form .mini{flex:1 1 100%}
  .fp-item-nota{grid-template-columns:1fr 1fr}.fp-item-nome-cx,.fp-item-prod-cx{grid-column:1/-1}
  .fp-item-novo{grid-column:1/-1;grid-template-columns:1fr}
}


/* ===== perguntas: ordem da lista e exclusao por periodo (06/09/2026) =====
   A barra mora no cabecalho do bloco, do lado do titulo. O .cabecalho-bloco ja
   e flex com justify-content:space-between, entao ela cai sozinha na direita e
   quebra para baixo em tela estreita, sem regra de largura nenhuma aqui. */
.barra-perg{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.barra-perg .modos button{display:inline-flex;align-items:center;gap:6px}
.barra-perg .modos button svg{width:14px;height:14px;flex:0 0 auto}
/* o botao de excluir fica FORA do .modos: la dentro ele herdaria o desenho de
   controle segmentado (colado no vizinho, sem borda entre os dois) e pareceria
   a terceira opcao de ordem, que e o oposto do que ele faz. */
.bt-expurgo{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.bt-expurgo svg{width:15px;height:15px;flex:0 0 auto}
.bt-expurgo:not(:disabled):hover{border-color:var(--neg);color:var(--neg)}

/* A caixa. Mesmo fundo e mesma entrada do aviso "Em breve" -- e a outra caixa
   do painel, e duas caixas com desenhos diferentes na mesma tela confundem --
   porem com o texto alinhado a esquerda, porque aqui se le um formulario e nao
   um recado. As animacoes breveEntra/breveSobe sao daquele bloco. */
.xp-fundo{position:fixed;inset:0;z-index:9999;padding:20px;
  background:rgba(3,10,26,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;animation:breveEntra .16s ease-out}
.xp-cx{width:min(440px,100%);border-radius:16px;padding:20px 22px 18px;
  background:var(--sup);border:1px solid rgba(56,189,248,.28);
  box-shadow:0 26px 70px rgba(0,0,0,.45);animation:breveSobe .2s ease-out}
.xp-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:15px}
.xp-topo h3{font-family:var(--fu);font-size:17px;font-weight:700;color:var(--t1);margin:0}
.xp-x{border:0;background:transparent;color:var(--t3);font-size:23px;line-height:1;cursor:pointer;padding:0 2px}
.xp-x:hover{color:var(--t1)}
.xp-x:disabled{opacity:.4;cursor:default}
.xp-campo{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  border:1px solid var(--linha);border-radius:8px;padding:12px 14px;background:var(--sup2);
  font-size:14px;color:var(--t1)}
.xp-campo input{font-family:var(--fn);font-size:15px;text-align:center;width:78px;padding:6px 8px;
  border:1px solid var(--linha);border-radius:3px;background:var(--sup);color:var(--t1)}
/* min-height presa: a linha troca de texto a cada tecla e a cada exclusao, e
   sem altura fixa os botoes de baixo pulavam a cada volta da fila. */
.xp-conta{font-size:12.5px;line-height:1.55;color:var(--t2);margin:11px 2px 0;min-height:36px}
.xp-conta b{color:var(--t1)}
.xp-conta.ruim{color:var(--neg)}
.xp-conta.ruim b{color:var(--neg)}
.xp-conta.bom{color:var(--s3)}
.xp-acoes{display:flex;gap:9px;justify-content:flex-end;margin-top:12px}
.xp-bt{font-family:var(--fu);font-weight:600;font-size:13.5px;padding:9px 18px;
  border:1px solid var(--dest);border-radius:9px;background:var(--dest);color:#fff;cursor:pointer}
.xp-bt.fraco{background:var(--sup);border-color:var(--linha);color:var(--t2)}
.xp-bt.fraco:hover{color:var(--t1)}
.xp-bt:disabled{opacity:.5;cursor:default}


/* ================= aba Reclamações (06/09/2026) =================
   A conversa de uma reclamação tem três vozes -- o comprador, o mediador do
   Mercado Livre e você -- e saber quem falou é metade da informação. Por isso
   o balão do outro lado encosta à esquerda, com barra laranja, e o seu vai
   para a direita, com barra verde: dá para ler a conversa de relance, sem
   soletrar os nomes.
   O max-height existe porque a primeira mensagem do mediador costuma ser
   longa (ele lista as opções de resolução inteiras) -- sem ele, o campo de
   resposta nasceria fora da tela. */
.rec-conversa{margin:0 0 12px}
.rec-msgs{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:9px;max-height:420px;overflow-y:auto}
.rec-msgs li{border:1px solid var(--linha);border-radius:6px;background:var(--sup2);padding:9px 12px;max-width:min(680px,92%)}
.rec-msgs li.deles{align-self:flex-start;border-left:3px solid var(--s2)}
.rec-msgs li.minha{align-self:flex-end;border-left:3px solid var(--s3);background:var(--sup)}
.rec-de{font-family:var(--fn);font-size:11px;color:var(--t3);margin-bottom:4px}
.rec-txt{font-size:13.5px;color:var(--t1);word-break:break-word}
.rec-anexo{font-family:var(--fn);font-size:11px;color:var(--t3);margin-top:6px;padding-top:5px;border-top:1px solid var(--linha2)}

/* o seletor de contas da própria aba Reclamações (06/09/2026), ao lado de
   Abertas/Todas. Mesma altura e mesma borda do select do rodapé da lateral --
   é o mesmo controle, e ler como dois seria mentira. */
.rec-conta{display:inline-flex;align-items:center;gap:7px;font-family:var(--fn);font-size:11px;color:var(--t3)}
.rec-conta select{font-family:var(--fn);font-size:12px;padding:6px 8px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1);max-width:230px}


/* ===== autenticador (Google Authenticator), 10/09/2026 ===== */
.porta-codigo{font-family:var(--fn);font-size:22px;letter-spacing:.35em;text-align:center}
.seg-status{margin:0 0 10px;font-size:13px;color:var(--t2)}
.seg-status.on b{color:var(--s3)}
.seg-status.off b{color:var(--t1)}
.seg-recado{margin:0 0 10px;padding:8px 10px;border-radius:3px;font-size:13px;border:1px solid var(--linha)}
.seg-recado.ok{border-color:var(--s3);color:var(--s3)}
.seg-recado.ruim{border-color:var(--neg);color:var(--neg)}
.seg-form{max-width:460px}
.seg-form p{margin:0 0 10px;font-size:13px;color:var(--t2)}
.seg-form .porta-inp{margin-bottom:10px}
.seg-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.seg-cancela{background:var(--sup2);color:var(--t2);border:1px solid var(--linha)}
.seg-perigo{background:var(--neg)}
.seg-senha{margin-top:18px;padding-top:14px;border-top:1px solid var(--linha)}
.seg-senha h3{margin:0 0 8px;font-size:14px;color:var(--t1)}
.seg-marca{display:flex;gap:8px;align-items:flex-start;margin:2px 0 12px;font-size:13px;color:var(--t2);cursor:pointer}
.seg-marca input{margin-top:2px;flex:none}
/* QR do autenticador (10/09): moldura branca de 20px = margem de silencio que a
   camera precisa; a caixa se ajusta ao QR (antes a caixa tinha 200px com padding
   dentro e o QR de 200px vazava 20px para a direita, sobre o fundo escuro) */
.seg-qr{display:inline-block;padding:20px;background:#fff;border-radius:8px;margin:4px 0 10px;line-height:0;width:auto}
.seg-qr svg,.seg-qr img{display:block;width:264px;height:264px;max-width:calc(100vw - 80px);max-height:calc(100vw - 80px)}
.seg-chave{font-family:var(--fn);font-size:14px;letter-spacing:.08em;word-break:break-all;user-select:all;margin:0 0 12px;padding:8px 10px;background:var(--sup2);border:1px dashed var(--linha);border-radius:3px}
.ac-2fa{display:inline-flex;align-items:center;font-size:11px;color:var(--t3);padding:3px 8px;border:1px dashed var(--linha);border-radius:99px;margin-left:6px}
.ac-2fa.on{color:var(--s3);border-style:solid;border-color:var(--s3)}
.ac-2fa-zerar{margin-left:6px}
.seg-porta .seg-form{max-width:none}
.seg-porta .seg-qr{margin-left:auto;margin-right:auto;display:block;width:fit-content}


/* ===== captcha ("Não sou um robô"), 10/09/2026 ===== */
.porta-captcha{display:flex;flex-direction:column;align-items:center;gap:8px;margin:2px 0 14px}
.porta-captcha .porta-conf{margin:0;text-align:center}

/* QR desenhado pelo painel (10/09): tamanho do proprio SVG, modulos inteiros */
.seg-qr svg.qrp{width:auto;height:auto}

/* ===== Importação › FedEx (14/09/2026) =====
   Dashboard de importações, só do dono. Reaproveita .fin-form, .kpis, .pill,
   .tw, .lapis e .modos; o que não existia ganha .imp-*. Nada aqui inventa cor. */
.imp-topo{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.imp-topo .modos{margin-left:6px}
/* 16/09/2026 (noite): a barra do job do robô do Mac mini, ao lado do botão Atualizar FedEx.
   Vazia (sem job) some; cinza quando o robô está offline; pulsa enquanto espera na fila. */
.imp-job{display:inline-flex;align-items:center;gap:8px;min-width:0}
.imp-job:empty{display:none}
.imp-job .imp-sub{display:inline;white-space:nowrap}
.imp-prog{display:inline-block;width:150px;height:8px;border-radius:99px;background:var(--sup2);border:1px solid var(--linha);overflow:hidden;vertical-align:middle;flex:0 0 auto}
.imp-prog i{display:block;height:100%;background:var(--dest);border-radius:99px;transition:width .4s ease}
.imp-prog.off i{background:var(--t3)}
.imp-prog.espera i{animation:imp-espera 1.2s ease-in-out infinite alternate}
@keyframes imp-espera{from{margin-left:0}to{margin-left:70%}}
.imp-cod{font-family:var(--fn);font-size:12.5px;color:var(--t1);text-decoration:none;white-space:nowrap}
.imp-cod:hover{color:var(--dest)}
.imp-sub{display:block;color:var(--t3);font-size:11px;font-family:var(--fn);font-weight:400}
.imp-sub.x{color:var(--neg)}
.pill.imp-info{background:color-mix(in srgb,var(--dest) 14%,transparent);color:var(--dest)}
.pill.imp-cinza{background:var(--sup2);color:var(--t3);border:1px solid var(--linha2)}
tr.imp-det>td{background:var(--sup2);padding:12px 14px}
.imp-h3{font-family:var(--fu);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);margin:10px 0 6px}
.imp-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 18px;margin-bottom:10px;font-size:12.5px;color:var(--t1)}
.imp-grade b{display:block;font-family:var(--fu);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);font-weight:600;margin-bottom:2px}
.imp-grade .imp-total{font-weight:600}
.imp-previa{margin:10px 0 6px;padding:12px;border:1px solid var(--linha);border-radius:4px;background:var(--sup)}
.imp-previa>b{display:block;font-family:var(--fu);font-size:12px;color:var(--t1);margin-bottom:8px}
.imp-cob{margin:0 0 10px;padding:10px 12px;border:1px dashed var(--linha);border-radius:4px;background:var(--sup)}
.imp-cob>b{display:block;font-family:var(--fu);font-size:12px;color:var(--t1);margin-bottom:6px}
.imp-eventos{margin:0;padding:0;list-style:none;font-size:12.5px;color:var(--t1)}
.imp-eventos li{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;padding:5px 0;border-bottom:1px solid var(--linha2)}
.imp-eventos li .q{font-family:var(--fn);color:var(--t3);white-space:nowrap}
.imp-eventos li .x{color:var(--neg)}
.imp-ok{border-left-color:var(--s3)}
.imp-chave{font-family:var(--fn);font-size:13px;user-select:all;word-break:break-all}
table.imp-tab td.n b{color:var(--t1)}
.fin-form .mini select{font-family:var(--fn);font-size:13px;padding:7px 9px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1)}
button.imp-falta{border:0;cursor:pointer;font-family:var(--fn);margin-left:4px}
button.imp-falta:hover{text-decoration:underline}
.imp-cmp-cab{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
table.imp-cmp tr.imp-maior td{color:var(--neg)}
table.imp-cmp tr.imp-menor td{color:var(--s3)}
table.imp-cmp tr.imp-cmp-total td{border-top:2px solid var(--linha);background:var(--sup)}
/* ---- 16/09/2026: cartões como a planilha do Roderjan (modelo A). O verde e o laranja
   são os da planilha dele, de propósito; o resto usa as cores do painel. ---- */
/* 23/09/2026: legenda das cores -- verde faturado, azul entregue sem fatura, laranja a caminho */
.imp-legenda{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;margin:0 0 12px}
.imp-legenda i.imp-bola{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}
.imp-legenda i.imp-bola.verde{background:#4FD65A}
.imp-legenda i.imp-bola.azul{background:#46B1EE}
.imp-legenda i.imp-bola.laranja{background:#F3A53A}
.imp-legenda i.imp-bola.vermelho{background:#EF5350}
.imp-legenda i.imp-bola.amarelo{background:#F5D547}
.imp-legenda .imp-sub{display:inline}
/* 01/10/2026: seletor Mostrar (Todos / A caminho / A faturar / Faturados) acima da legenda */
.imp-mostra{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px}
.imp-mostra .modos{flex:1 1 auto;min-width:0;flex-wrap:wrap;gap:4px}
.imp-mostra .modos>a{padding:6px 11px;white-space:nowrap;border-left:1px solid var(--linha);border-radius:3px}
.imp-mostra .modos>a.on{border-color:var(--dest)}
.imp-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:16px}
.imp-cartao{background:var(--sup);border:1px solid var(--linha);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.imp-cartao.aberto{grid-column:1/-1}
.imp-cartao.fechada{opacity:.72}
.imp-cartao.fechada:hover{opacity:1}
.imp-cartao .imp-cab{background:#4FD65A;color:#0F2E17;padding:11px 14px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.imp-cartao .imp-cab.verde{background:#4FD65A;color:#0F2E17}
.imp-cartao .imp-cab.laranja{background:#F3A53A;color:#4A2D05}
/* 23/09/2026: azul = entregue, mas a fatura da FedEx ainda nao veio */
.imp-cartao .imp-cab.azul{background:#46B1EE;color:#06263C}
/* 01/10/2026: vermelho = parada na alfandega; amarelo = a caminho (laranja = chega em ate 3 dias) */
.imp-cartao .imp-cab.vermelho{background:#EF5350;color:#2A0405}
.imp-cartao .imp-cab.amarelo{background:#F5D547;color:#3D3305}
.imp-cartao .imp-cab .imp-rastreio{margin-top:3px}
.imp-cartao .imp-cab .imp-quando{opacity:.8}
.imp-cartao .imp-cab a.imp-cod,.imp-cartao .imp-cab a.imp-cod:hover{color:inherit;font-family:var(--fu);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;white-space:normal}
.imp-cartao .imp-cab .imp-sub{color:inherit;opacity:.8;text-transform:none}
.imp-cartao .imp-cab .imp-st{font-size:11px;font-weight:600;background:rgba(255,255,255,.55);color:inherit;border-radius:4px;padding:4px 7px;white-space:nowrap;flex:0 0 auto}
.imp-cartao table{width:100%;border-collapse:collapse;font-size:13px}
.imp-cartao th{font-family:var(--fu);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);text-align:right;padding:8px 12px 4px;border-bottom:1px solid var(--linha)}
.imp-cartao th:first-child{text-align:left}
.imp-cartao td{padding:6px 12px;border-bottom:1px solid var(--linha2);text-align:right;font-family:var(--fn);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--t1)}
.imp-cartao td:first-child{text-align:left;color:var(--t2);font-family:var(--fu);white-space:normal}
/* 01/10/2026: em 320 px a tabela Previsto x Cobrado passava 33-38 px do cartao e a coluna
   Cobrado sumia na borda (FedEx e Simulador). Abaixo de 380 px o respiro das celulas encolhe. */
@media (max-width:380px){.imp-cartao th,.imp-cartao td{padding-left:7px;padding-right:7px}.imp-cartao td{font-size:12px}}
.imp-cartao td.mais{color:var(--neg)}
.imp-cartao td.menos{color:var(--s3)}
.imp-cartao tr.total td{border-top:2px solid var(--linha);border-bottom:0;font-weight:600;color:var(--t1);background:var(--sup2)}
.imp-cartao tr.unit td{background:#DDF7DF;color:#0F2E17;border-bottom:0;font-weight:700;font-size:15px;padding:10px 12px}
.imp-cartao tr.unit td:first-child{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#0F2E17}
.imp-cartao .imp-pe{padding:9px 12px;border-top:1px solid var(--linha);display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--t2);margin-top:auto}
.imp-cartao .imp-pe .imp-acoes{margin-left:auto;display:flex;gap:4px}
.imp-det-cartao{background:var(--sup2);padding:12px 14px;border-top:1px solid var(--linha)}


/* 16/09/2026 -- Importacao > FedEx: dois cards clicaveis e a aba de faturas */
.imp-kpis{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.imp-fat-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.imp-fat-cab h2{margin:0 0 4px}
.imp-fat td.v,.imp-fat th.v{text-align:right;white-space:nowrap}
.imp-fat tr.imp-fat-grupo{cursor:pointer}
.imp-fat tr.imp-fat-grupo:hover td{background:var(--sup2)}
.imp-fat tr.imp-fat-grupo.aberta td{background:var(--sup2);font-weight:600}
.imp-fat tr.imp-fat-grupo:focus-visible{outline:2px solid var(--dest);outline-offset:-2px}
.imp-fat .imp-fat-num{white-space:nowrap;font-variant-numeric:tabular-nums}
.imp-fat tr.imp-fat-item td{font-size:12px;border-top:0;padding-left:26px}
.imp-fat tr.imp-fat-item td.v{padding-left:8px}
.imp-fat tfoot td{border-top:1px solid var(--linha2);font-weight:600}

/* 17/09/2026 -- Importacao > FedEx: numero do cartao editavel no toque */
.imp-ed{cursor:pointer;border-bottom:1px dashed currentColor;border-bottom-color:color-mix(in srgb,currentColor 45%,transparent);border-radius:2px;outline:none}
.imp-ed:hover,.imp-ed:focus-visible{background:color-mix(in srgb,var(--dest) 16%,transparent);border-bottom-color:var(--dest)}
.imp-ed-cx{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;vertical-align:middle}
.imp-ed-in{width:7.5em;max-width:100%;text-align:right;font:inherit;font-variant-numeric:tabular-nums;color:var(--t1);
  background:var(--sup2);border:1px solid var(--dest);border-radius:4px;padding:3px 6px}
.imp-ed-in:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--dest) 35%,transparent)}
.imp-ed-in.erro{border-color:var(--neg)}
.imp-ed-in[readonly]{opacity:.6}
.imp-sub .imp-ed-in,td:first-child .imp-ed-in{width:5.5em;text-align:left}
.imp-sub .imp-ed-cx,td:first-child .imp-ed-cx{align-items:flex-start}
.imp-ed-msg{font-size:11px;color:var(--t3);white-space:nowrap}
.imp-ed-msg.erro{color:var(--neg)}

/* 23/09/2026 -- Simulador: campo vazio induz o toque, conta se distingue de campo */
.imp-vaga{display:inline-block;font-style:normal;font-size:11.5px;color:var(--t3);white-space:nowrap;
  border:1px dashed color-mix(in srgb,currentColor 55%,transparent);border-radius:6px;padding:0 6px}
.imp-vaga::after{content:"✎";margin-left:4px;font-size:10px;opacity:.75}
.imp-ed.vazia{border-bottom-color:transparent}
.imp-ed.vazia:hover,.imp-ed.vazia:focus-visible{background:none}
.imp-ed.vazia:hover .imp-vaga,.imp-ed.vazia:focus-visible .imp-vaga{border-color:var(--dest);color:var(--t1);background:color-mix(in srgb,var(--dest) 12%,transparent)}
.imp-cartao td.imp-conta{color:var(--t2)}

/* ===== FINANCEIRO refeito (18/09/2026): pendência do recorrente e dashboard ===== */
.pill.fin-conf{background:color-mix(in srgb,var(--s2) 16%,transparent);color:var(--s2)}
tr.fin-pend td{background:color-mix(in srgb,var(--s2) 6%,transparent)}
.fin-confirma{display:inline-flex;gap:6px;align-items:center}
.fin-confirma input{width:96px;font-family:var(--fn);font-size:12px;padding:5px 7px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2);color:var(--t1);text-align:right}
.fin-confirma input:focus{border-color:var(--dest);outline:none}
.fin-dash-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.fin-dash-2 .cartao h3,.fin-evo h3{font-family:var(--fu);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:0 0 10px;font-weight:600}
.fin-dash-2 .cartao .fin-barras+h3,.fin-dash-2 .cartao .vazio+h3{margin-top:18px}
.fin-dash-2 .cartao .tw{border:0}
.fin-barras{display:grid;gap:6px}
.fin-barra{display:grid;grid-template-columns:minmax(90px,.8fr) 1fr minmax(110px,auto);gap:8px;align-items:center;font-family:var(--fn);font-size:12px;color:var(--t2)}
.fin-barra-rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-barra-trilho{display:block;height:10px;background:var(--sup2);border:1px solid var(--linha2);border-radius:5px;overflow:hidden}
.fin-barra-fill{display:block;height:100%;background:var(--dest);border-radius:5px}
.fin-barra-val{text-align:right;font-family:var(--fc);font-size:11px;color:var(--t1);white-space:nowrap}
.fin-barra-val small{color:var(--t3)}
.fin-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.fin-cal-h{font-family:var(--fu);font-size:10px;color:var(--t3);text-align:center;padding:2px 0}
.fin-cal-d{min-height:52px;border:1px solid var(--linha2);border-radius:4px;padding:4px 5px;font-family:var(--fn);font-size:11px;display:flex;flex-direction:column;gap:1px;background:var(--sup)}
.fin-cal-d.vazio-d{border-color:transparent;background:transparent}
.fin-cal-d b{font-size:11px;color:var(--t3);font-weight:500}
.fin-cal-d span{font-family:var(--fc);font-size:11px;color:var(--t1)}
.fin-cal-d small{font-size:9px;color:var(--t3)}
.fin-cal-d.hoje{outline:2px solid var(--dest);outline-offset:-2px}
.fin-cal-d.pago{background:color-mix(in srgb,var(--s3) 12%,var(--sup))}
.fin-cal-d.aberto{background:color-mix(in srgb,var(--s2) 14%,var(--sup))}
.fin-cal-d.atras{background:color-mix(in srgb,var(--neg) 16%,var(--sup))}
.fin-cal-leg{margin:8px 0 0}
.fin-cal-leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 8px;vertical-align:middle}
.fin-cal-leg i.atras{background:color-mix(in srgb,var(--neg) 40%,var(--sup))}
.fin-cal-leg i.aberto{background:color-mix(in srgb,var(--s2) 40%,var(--sup))}
.fin-cal-leg i.pago{background:color-mix(in srgb,var(--s3) 40%,var(--sup))}
.fin-evo{margin-top:12px}
@media (max-width:820px){.fin-dash-2{grid-template-columns:1fr}.fin-barra{grid-template-columns:minmax(70px,.8fr) 1fr auto}.fin-cal-d{min-height:40px}.fin-cal-d small{display:none}}


/* ===== chat shopee (18/09/2026) ===== */
.shop-robo{margin-top:6px;font-family:var(--fu)}
.shop-robo.ok b{color:var(--s3)}
.shop-robo.off b{color:var(--neg)}
.shop-lista{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.shop-item{border:1px solid var(--linha);border-radius:6px;background:var(--sup);padding:12px}
.shop-item.aberta{border-color:var(--s1);box-shadow:0 0 0 1px var(--s1) inset}
.shop-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.shop-acoes{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.shop-ultima{margin:8px 0 6px;font-size:13px;color:var(--t1);line-height:1.45}
.shop-pedido{font-size:12px;color:var(--t2)}
.shop-agendada{margin-top:10px;padding:10px;border-radius:5px;border:1px dashed var(--linha);background:var(--sup2)}
.shop-agendada.auto{border-color:var(--s7)}
.shop-agendada-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.shop-agendada-topo b{font-family:var(--fu);font-size:12px}
.shop-conta{font-family:var(--fc);font-size:11px;color:var(--s2)}
.shop-texto{margin:0;font-size:13px;line-height:1.5;color:var(--t1)}
.shop-conversa{margin-top:12px;border-top:1px solid var(--linha2);padding-top:12px}
.shop-dados{margin-bottom:10px;padding:8px 10px;border-radius:5px;background:var(--sup2)}
.shop-dados b{font-family:var(--fu);font-size:12px}
.shop-hist{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto;padding-right:4px}
.shop-msg{max-width:78%;padding:8px 10px;border-radius:8px;background:var(--sup2);border:1px solid var(--linha2)}
.shop-msg.meu{align-self:flex-end;background:var(--linha2)}
.shop-msg.ia{border-style:dashed}
.shop-msg .leg{display:block;margin-bottom:3px;font-size:10px}
.shop-msg p{margin:0;font-size:13px;line-height:1.45}
.shop-escreve{margin-top:12px}
.shop-escreve textarea{width:100%;padding:9px 10px;border:1px solid var(--linha);border-radius:5px;background:var(--sup);color:var(--t1);font-family:var(--fn);font-size:13px;line-height:1.45;resize:vertical}
.shop-escreve-pe{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
@media (max-width:700px){.shop-msg{max-width:92%}}
.shop-modelo{margin-top:12px;padding:12px;border:1px solid var(--linha);border-radius:6px;background:var(--sup2)}
.shop-modelo.desligada{opacity:.62}
.shop-modelo textarea{width:100%;margin-top:6px;padding:9px 10px;border:1px solid var(--linha);border-radius:5px;background:var(--sup);color:var(--t1);font-family:var(--fn);font-size:13px;line-height:1.45;resize:vertical}
.shop-previa{margin-top:10px;padding:10px;border-left:3px solid var(--s1);background:var(--sup)}
.shop-previa b{display:block;font-family:var(--fu);font-size:11px;color:var(--t3);margin-top:6px}
.shop-previa b:first-child{margin-top:0}
.shop-previa p{margin:2px 0 0;font-size:13px;line-height:1.5}
.shop-pal-add{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.shop-pal-add input{flex:1 1 260px;padding:7px 9px;border:1px solid var(--linha);border-radius:5px;background:var(--sup);color:var(--t1);font-family:var(--fn);font-size:13px}

/* ===== observação miúda a lado de um dado (18/09/2026) =====
   NAO use .dica para isto: ala e uma caixa flutuante (absolute) das tooltips nos gráficos,
    e por isso estava pairando por cima das celulas vizinhas. */
.fin-obs{color:var(--t3);font-size:11px;font-family:var(--fn);margin-left:2px}

/* ===== o "escondido" no formulário do Financeiro (18/09/2026) =====
   O navegador esconde quem tem [hidden] com display:none -- mas só quando o
   elemento não tem regra de display própria, e `.fin-form .mini` tem
   display:flex. Resultado: "Quantas vezes?" continuava na tela depois de
   escolher recorrente, e "O valor é fixo?" aparecia quando não era. */
.fin-form [hidden]{display:none}
.shop-cliente{margin:8px 0 4px;font-size:13px;line-height:1.45;color:var(--t1)}
.shop-cliente .leg,.shop-ultima .leg{font-size:11px}
.shop-porque{margin:8px 0 6px;padding:8px 10px;border-left:3px solid var(--s7);background:var(--sup2);font-size:12px;line-height:1.45;color:var(--t2)}
.shop-item.aprovar{border-left:3px solid var(--s1)}
.shop-item.aprovar textarea{width:100%;margin-top:8px;padding:9px 10px;border:1px solid var(--linha);border-radius:5px;background:var(--sup);color:var(--t1);font-family:var(--fn);font-size:13px;line-height:1.5;resize:vertical}
.shop-nota{flex:1 1 320px;padding:7px 9px;border:1px solid var(--linha);border-radius:5px;background:var(--sup);color:var(--t1);font-family:var(--fn);font-size:12px}
.shop-hist-min{margin:6px 0}
.shop-hist-min summary{cursor:pointer;font-size:11px;color:var(--t3);font-family:var(--fu)}
.shop-hist-min p{margin:4px 0}
tr.off{opacity:.5}
.shop-rotulo{margin:0 0 6px}
.shop-eu-mesmo{margin-top:12px;border-top:1px dashed var(--linha);padding-top:10px}
.shop-eu-mesmo summary{cursor:pointer;font-size:12px;color:var(--t3);font-family:var(--fu)}
.shop-eu-mesmo textarea{margin-top:8px}

/* 24/09/2026: Shopee › A enviar */
.senv th.n,.senv td.n{text-align:right;white-space:nowrap}
.senv-atras{color:var(--neg);font-weight:600}

/* ================= lista de reposição (24/09/2026) =================
   A barra fica ENTRE os filtros e a tabela porque é ali que ela é lida: a
   pessoa marca as caixinhas na primeira coluna e o contador, logo acima,
   responde "quantos já entraram". O "Próximo" nasce desligado -- lista de
   reposição sem item marcado não existe.
   A caixa que abre é a mesma do painel (xp-fundo/xp-cx, do "Excluir perguntas
   por período"): só o cartão é mais largo, porque aqui se lê uma lista de
   produtos e não um campo só. */
.rep-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;
  border:1px solid var(--linha);border-radius:9px;padding:9px 12px;background:var(--sup2);
  font-size:13px;color:var(--t2)}
.rep-barra b{color:var(--t1)}
.rep-ic{width:17px;height:17px;flex:0 0 auto;color:var(--dest)}
.rep-bts{display:flex;gap:8px;margin-left:auto}
.rep-bt{font-family:var(--fu);font-weight:600;font-size:12.5px;padding:7px 15px;
  border:1px solid var(--dest);border-radius:8px;background:var(--dest);color:#fff;cursor:pointer}
.rep-bt.fraco{background:var(--sup);border-color:var(--linha);color:var(--t2)}
.rep-bt.fraco:hover:not(:disabled){color:var(--t1)}
.rep-bt:disabled{opacity:.45;cursor:default}
td.cel-rep{text-align:center}
td.cel-rep label{display:inline-flex;align-items:center;justify-content:center;padding:3px;cursor:pointer}
td.cel-rep input{width:15px;height:15px;accent-color:var(--dest);cursor:pointer;margin:0}
.rep-cx{width:min(700px,100%)}
.rep-dias{margin:0 0 12px}
.rep-dias button{margin-left:auto}
/* max-height em vh, e não em px: com 40 itens marcados a lista precisa rolar
   dentro do cartão, senão os botões de baixo nascem fora da tela. */
.rep-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  max-height:44vh;overflow-y:auto}
.rep-item{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--linha);border-radius:8px;background:var(--sup2)}
.rep-item .capa{width:34px;height:34px;flex-basis:34px}
.rep-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.rep-nome{font-size:13px;font-weight:600;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-sub{font-size:11.5px;color:var(--t3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-qtd{font-family:var(--fn);font-size:15px;text-align:center;width:88px;flex:0 0 auto;
  padding:6px 8px;border:1px solid var(--linha);border-radius:3px;background:var(--sup);color:var(--t1)}
@media(max-width:640px){
  .rep-bts{margin-left:0;width:100%}
  .rep-bts button{flex:1 1 auto}
  .rep-item{flex-wrap:wrap}
  .rep-qtd{width:100%}
}

/* 24/09/2026: estrela dos menus restritos (so admin / liberados um a um) */
/* 27/09/2026: submenu da Gestão -- os menus com estrela moram debaixo dela
   (menuLateral no app.js). A setinha abre e fecha sem trocar de tela. */
.it-mae{position:relative}
.lado .it-mae>.it{padding-right:44px}
.bt-sub{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  padding:0;border:0;border-radius:6px;background:transparent;color:#8fb3dc;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.bt-sub:hover{background:rgba(56,189,248,.16);color:#fff}
.bt-sub svg{width:14px;height:14px;transition:transform .15s ease}
.it-mae.aberto .bt-sub svg{transform:rotate(180deg)}
.it-mae>.it.on+.bt-sub{color:#04122a}
.it-mae>.it.on+.bt-sub:hover{background:rgba(4,18,42,.12);color:#04122a}
.sub-menu{margin:2px 0 4px}
.sub-menu[hidden]{display:none}
.lado .it.it-sub{padding:6px 16px 6px 32px;font-size:.93em}
.sub-gr{font-family:var(--fu);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:#5f81ad;padding:10px 18px 3px 32px}
@media(max-width:820px){
  .it-mae{display:flex;align-items:center}
  .lado .it-mae>.it{padding-right:6px}
  .bt-sub{position:static;transform:none}
  .sub-menu{display:flex;align-items:center;gap:2px;margin:0}
  .sub-gr{display:none}
  .lado .it.it-sub{padding:6px 10px}
}
.estrela-menu{display:inline-flex;align-items:center;margin-left:6px;color:#fbbf24;vertical-align:middle;line-height:0}
.estrela-menu svg{filter:drop-shadow(0 0 3px rgba(251,191,36,.45))}
.it.on .estrela-menu{color:#b45309}

/* ================= Gestão (24/09/2026) =================
   A tela reaproveita o que já existe -- .bloco, .modos, .kpis, .ac-linha e
   .ac-cx da tela "Quem acessa cada conta", .rep-item da caixa de reposição.
   O que vem aqui é só o que não tinha dono. */

/* o alto da tela: a explicação e as sub-abas, antes do primeiro bloco */
.gest-topo{margin:0 0 14px}
.gest-topo .leg{margin:0 0 10px;max-width:70ch}
.gest-topo .modos{margin:0}

/* Adicionar colaborador: nome, e-mail e o botão, numa linha só em tela grande */
.colab-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.colab-form label{display:flex;flex-direction:column;gap:5px;flex:1 1 220px;
  font-size:12.5px;color:var(--t2)}
.colab-form input{font-family:inherit;font-size:14px;padding:9px 11px;
  border:1px solid var(--linha);border-radius:8px;background:var(--sup2);color:var(--t1)}
.colab-form input:focus{outline:none;border-color:var(--dest)}
.colab-form .botao{flex:0 0 auto}

/* a linha de cada pessoa: quem é de um lado, as caixinhas do outro */
.colab-linha{align-items:flex-start}
.colab-linha .ac-quem{gap:4px;max-width:260px}
.colab-conta{font-size:12px;color:var(--dest)}
.colab-caixas{flex:1 1 420px;gap:7px}
/* o título quebra a linha das caixinhas em dois grupos (Menus / Contas) sem
   precisar de outro contêiner */
.colab-tit{width:100%;margin:2px 0 0;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--t3)}
.colab-linha .rep-bt{margin-top:7px;align-self:flex-start}

/* Fulls para repor: a mesma lista da caixa, agora com a caixinha do separador */
/* 24/09/2026: na janela de quantidade, o aviso de que aquele SKU já tem pedido
   em aberto. Fica embaixo do SKU, na cor de atenção, sem empurrar o layout. */
.rep-ja{font-size:11.5px;line-height:1.35;color:var(--s7);display:block}
.rep-ja:empty{display:none}
.rep-ja b{color:var(--s7)}

.repo-listas{margin:0 0 12px}
.repo-obs{margin:0 0 10px}
/* 24/09/2026: escolher a conta dentro da lista (quem separa trabalha uma loja
   de cada vez). O número ao lado é quantos itens aquela conta tem na lista. */
.repo-contas{margin:0 0 12px}
.repo-contas a{display:inline-flex;align-items:center;gap:7px}
.repo-contas em{font-style:normal;font-size:11.5px;opacity:.72}
.repo-itens{max-height:none}
.repo-item{gap:12px}
.repo-marca{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;padding:3px;cursor:pointer}
.repo-marca input{width:18px;height:18px;accent-color:var(--dest);cursor:pointer;margin:0}
.repo-item.feito{opacity:.62}
.repo-item.feito .rep-nome{text-decoration:line-through}
.repo-qtd{font-family:var(--fn);font-size:17px;font-weight:600;color:var(--t1);
  width:72px;flex:0 0 auto;text-align:right}
/* 24/09/2026: o × que tira o pedido da lista. Discreto até o mouse chegar em
   cima da linha -- é uma ação destrutiva e não deve competir com a caixinha de
   separado, que é o que se clica o tempo todo. */
.repo-x{flex:0 0 auto;width:26px;height:26px;padding:0;line-height:1;
  font-size:17px;border:1px solid transparent;border-radius:7px;
  background:transparent;color:var(--t3);cursor:pointer;opacity:.55}
.repo-item:hover .repo-x{opacity:1}
.repo-x:hover:not(:disabled){border-color:var(--neg);color:var(--neg);background:var(--sup)}
.repo-x:disabled{opacity:.3;cursor:default}
@media(hover:none){.repo-x{opacity:1}}

.repo-rodape{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.repo-rodape .leg{margin:0}
@media(max-width:640px){
  .colab-linha .ac-quem{max-width:none}
  .colab-form .botao{width:100%}
  .repo-qtd{width:auto;margin-left:auto}
}

/* ================= Gestão › Separação por SKU (24/09/2026) =================
   Cards grandes, para a expedição marcar rápido com a mão ocupada. O card
   inteiro é o botão -- mirar numa caixinha pequena ali é o caminho do erro. */
.sep-quando{margin:4px 0 0;font-size:12px}
.sep-barra{margin-bottom:12px}
.sep-nota{font-size:11.5px;color:var(--t3)}
.sep-abaixo{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t2)}
.sep-abaixo input{width:62px;font-family:var(--fn);font-size:13px;padding:6px 8px;text-align:center;
  border:1px solid var(--linha);border-radius:6px;background:var(--sup);color:var(--t1)}

.sep-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sep-card{border:1px solid var(--linha);border-radius:11px;padding:12px;background:var(--sup2);
  cursor:pointer;user-select:none;display:flex;flex-direction:column;gap:6px}
.sep-card:hover{border-color:var(--dest)}
.sep-card.on{border-color:var(--dest);box-shadow:0 0 0 2px var(--dest) inset}
.sep-topo{display:flex;align-items:center;gap:8px}
.sep-caixa{width:20px;height:20px;flex:0 0 auto;border:1px solid var(--linha);border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
  background:var(--sup);color:transparent}
.sep-card.on .sep-caixa{background:var(--dest);border-color:var(--dest);color:#fff}
.sep-sku{font-family:var(--fc);font-size:12.5px;font-weight:600;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sep-nome{margin:0;font-size:12px;color:var(--t2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sep-nums{display:flex;align-items:flex-end;gap:6px;margin-top:auto}
.sep-grande{font-family:var(--fn);font-size:26px;font-weight:700;color:var(--t1);line-height:1}
.sep-nums .rot{font-size:11px;color:var(--t3)}
.sep-un{margin-left:auto;text-align:right;font-size:13px;color:var(--t2)}
.sep-junto{margin:0;font-size:11px;color:var(--s7)}

/* a caixa com os números para colar */
.sep-lote{border:1px solid var(--linha);border-radius:9px;padding:10px;margin-bottom:10px;background:var(--sup2)}
.sep-lote-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;
  font-size:13px;color:var(--t2)}
.sep-lote-txt{width:100%;box-sizing:border-box;font-family:var(--fc);font-size:11.5px;line-height:1.4;
  border:1px solid var(--linha);border-radius:7px;padding:8px;background:var(--sup);color:var(--t1);resize:vertical}
@media(max-width:640px){
  .sep-cards{grid-template-columns:1fr 1fr}
  .sep-abaixo{width:100%}
}

/* ---------------- Gestão › Auditoria de Frete (25/09/2026) ----------------
   Aqui vermelho e verde NÃO seguem a regra do resto do painel, onde vermelho é
   "número negativo". Nesta tela o frete que SOBE é a má notícia e o que DESCE é
   a boa -- então o sinal do número e a cor andam ao contrário do td.neg. É por
   isso que existem .fr-sobe e .fr-desce em vez de reaproveitar .neg. As cores
   saem das variáveis de tema, então o modo escuro acompanha sozinho. */
.fr-sobe{color:var(--neg)}
.fr-desce{color:var(--s3)}

.fr-filtros .fr-dias{margin:0}
.fr-filtros .fr-busca{flex:1;min-width:200px}
.fr-varredura{margin:-4px 0 12px}
.fr-ordem,.fr-somas{margin:10px 0 12px}

table.fr-cons tbody tr.fr-linha{cursor:pointer}
table.fr-cons tbody tr.fr-linha:hover,
table.fr-cons tbody tr.fr-linha:focus-visible{background:var(--sup2);outline:0}
table.fr-cons td.fr-sku{white-space:nowrap}
table.fr-cons td.fr-tit{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.fr-cons td.v b{font-family:var(--fn);font-weight:600}

/* o segundo e o terceiro andar de uma célula: o valor embaixo da contagem, e o
   "com mesmo preço" embaixo dele. Bloco, para não brigar com o número. */
.fr-sub{display:block;font-family:var(--fn);font-size:11px;color:var(--t3);font-weight:400}
.fr-mlb{display:block;font-family:var(--fc);font-size:11px;color:var(--t3)}
table.fr-det td.fr-ped{font-family:var(--fc);font-size:12px;white-space:nowrap}

.fr-tag{display:inline-block;font-family:var(--fu);font-size:11px;padding:2px 8px;
  border:1px solid var(--linha);border-radius:999px;white-space:nowrap;color:var(--t2)}
.fr-tag.fr-sobe{border-color:var(--neg)}

.fr-volta{margin:0 0 6px}
.fr-det-tit{margin:0 0 4px;font-size:15px}
.fr-det-sub{font-weight:400;font-size:12px;color:var(--t3)}

@media (max-width:760px){
  table.fr-cons td.fr-tit{max-width:160px}
}

/* Os links desta tela (o MLB do anúncio e o "voltar") estavam saindo com o azul
   PADRÃO DO NAVEGADOR, #0000EE: o painel não estiliza <a> solto dentro de
   tabela, cada tela cuida do seu. No tema escuro aquele azul sobre o #151d26
   ficava ilegível. Aqui eles passam a usar o azul do tema, que tem contraste
   nos dois modos. */
.fr-mlb a,table.fr-det td a,.fr-volta a{color:var(--s1);text-decoration:none}
.fr-mlb a:hover,table.fr-det td a:hover,.fr-volta a:hover,
.fr-mlb a:focus-visible,table.fr-det td a:focus-visible,.fr-volta a:focus-visible{text-decoration:underline}

/* 27/09/2026 - Gestão › Criador de anúncio ("Central de produção", layout 3).
   Escura de propósito, nos dois temas do painel: azul-marinho/grafite com
   destaques roxo e turquesa. Tudo fica dentro de .cr para não vazar. */
.cr{--cr-f:#0e1426;--cr-f2:#131b31;--cr-c:#1a2340;--cr-c2:#212c4f;--cr-l:#2c3963;--cr-t1:#e8edf8;--cr-t2:#a9b4cf;--cr-t3:#7683a3;
  --cr-roxo:#8b5cf6;--cr-roxo2:#a78bfa;--cr-tur:#2dd4bf;--cr-tur2:#5eead4;--cr-ruim:#f87171;--cr-aviso:#fbbf24;--cr-ok:#34d399;
  background:var(--cr-f);color:var(--cr-t1);border-radius:16px;padding:20px;margin:0 0 24px;box-sizing:border-box;min-width:0}
.cr *{box-sizing:border-box}
.cr h2,.cr h3,.cr h4{margin:0;color:var(--cr-t1)}
.cr small{color:var(--cr-t3)}
.cr code{background:var(--cr-c2);padding:1px 6px;border-radius:5px;font-size:12px;color:var(--cr-tur2);word-break:break-all}
.cr .ruim{color:var(--cr-ruim)}
.cr-topo{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.cr-migalha{font-size:12px;color:var(--cr-t3);letter-spacing:.02em}
.cr-migalha span{margin:0 4px;color:var(--cr-roxo2)}
.cr-topo h2{font-size:24px;font-weight:700;margin-top:2px;background:linear-gradient(90deg,var(--cr-t1),var(--cr-tur2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-conexoes{display:flex;gap:10px;flex-wrap:wrap}
.cr-chip{display:flex;align-items:center;gap:10px;background:var(--cr-c);border:1px solid var(--cr-l);border-radius:12px;padding:8px 12px;flex-wrap:wrap;max-width:100%}
.cr-chip>div{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cr-chip b{font-size:13px}.cr-chip span{font-size:12px;color:var(--cr-t2);overflow-wrap:anywhere}
.cr-ponto{width:9px;height:9px;border-radius:50%;background:var(--cr-t3);flex:none}
.cr-chip.ok .cr-ponto{background:var(--cr-ok);box-shadow:0 0 8px var(--cr-ok)}
.cr-chip.ruim .cr-ponto{background:var(--cr-ruim)}
.cr-chip.aviso .cr-ponto{background:var(--cr-aviso)}
.cr-bt{text-transform:none;letter-spacing:normal;appearance:none;border:1px solid var(--cr-l);background:var(--cr-c2);color:var(--cr-t1);border-radius:9px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.cr-bt:hover{border-color:var(--cr-roxo2)}
.cr-bt:disabled{opacity:.45;cursor:not-allowed}
.cr-bt.prim{background:linear-gradient(135deg,var(--cr-roxo),#6d28d9);border-color:transparent;color:#fff}
.cr-bt.fraco{background:transparent;color:var(--cr-t2)}
.cr-bt.mini{padding:4px 9px;font-size:12px;border-radius:7px}
.cr-bt:focus-visible,.cr-seg button:focus-visible,.cr-card:focus-visible,.cr-foto:focus-visible{outline:2px solid var(--cr-tur);outline-offset:2px}
.cr-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.cr-seg{display:inline-flex;background:var(--cr-f2);border:1px solid var(--cr-l);border-radius:11px;padding:3px;flex-wrap:wrap}
.cr-seg button{appearance:none;border:0;background:transparent;color:var(--cr-t2);padding:7px 13px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.cr-seg button.on{background:var(--cr-c2);color:var(--cr-tur2);box-shadow:inset 0 0 0 1px var(--cr-tur)}
.cr-seg.peq button{padding:5px 11px;font-size:12px}
.cr-selo{margin-left:auto;font-size:12px;font-weight:700;color:var(--cr-tur2);border:1px dashed var(--cr-tur);border-radius:20px;padding:5px 12px;white-space:nowrap}
.cr-aviso{background:var(--cr-c);border-left:3px solid var(--cr-tur);border-radius:8px;padding:9px 12px;margin:8px 0;font-size:13px;color:var(--cr-t2)}
.cr-aviso.ruim{border-left-color:var(--cr-ruim);color:#fecaca}
.cr-aviso.bom{border-left-color:var(--cr-ok);color:#bbf7d0}
.cr-dica{font-size:12px;color:var(--cr-t3);margin:6px 0}
.cr-vazio{color:var(--cr-t3);font-size:13px;padding:14px 4px;margin:0}
.cr-colunas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cr-col{background:var(--cr-f2);border:1px solid var(--cr-l);border-radius:14px;padding:12px;min-height:180px;min-width:0}
.cr-col h3{font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--cr-t2);text-transform:uppercase;letter-spacing:.06em}
.cr-col h3 em{font-style:normal;background:var(--cr-c2);color:var(--cr-tur2);border-radius:10px;padding:0 8px;font-size:12px}
.cr-abas-cel{display:none}
.cr-card{display:flex;gap:10px;width:100%;text-align:left;appearance:none;border:1px solid var(--cr-l);background:var(--cr-c);color:var(--cr-t1);border-radius:12px;padding:10px;margin-bottom:9px;cursor:pointer;font:inherit}
.cr-card:hover{border-color:var(--cr-roxo2)}
.cr-card.sel{border-color:var(--cr-tur);box-shadow:0 0 0 1px var(--cr-tur)}
.cr-card.atencao{border-left:3px solid var(--cr-aviso)}
.cr-mini{flex:none;width:64px;height:64px;border-radius:9px;overflow:hidden;background:var(--cr-c2);display:flex;align-items:center;justify-content:center}
.cr-mini img{width:100%;height:100%;object-fit:cover}
.cr-mini i{font-size:10px;color:var(--cr-t3);font-style:normal;text-align:center}
.cr-card-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cr-card-txt b{font-size:14px;overflow-wrap:anywhere}
.cr-card-txt small{font-size:11.5px;overflow-wrap:anywhere}
.cr-tags{display:flex;gap:4px;flex-wrap:wrap}
.cr-tags em{font-style:normal;font-size:10.5px;font-weight:700;border-radius:5px;padding:1px 6px;background:var(--cr-c2);color:var(--cr-t2)}
.cr-tags .mk-shopee{color:#fb923c}.cr-tags .mk-amazon{color:#fcd34d}.cr-tags .mk-mercadolivre{color:#fde047}
.cr-est{display:inline-block;font-size:11.5px;font-weight:700;color:var(--cr-tur2)}
.cr-est.est-precisa_info,.cr-est.est-pausado,.cr-est.est-finalizado_pendencias{color:var(--cr-aviso)}
.cr-est.est-erro,.cr-est.est-cancelado{color:var(--cr-ruim)}
.cr-est.est-finalizado{color:var(--cr-ok)}
.cr-est.est-aguardando_referencias,.cr-est.est-na_fila{color:var(--cr-t2)}
.cr-barrinha{display:block;height:5px;border-radius:3px;background:var(--cr-c2);overflow:hidden;margin-top:3px}
.cr-barrinha i{display:block;height:100%;background:linear-gradient(90deg,var(--cr-roxo),var(--cr-tur))}
.cr-painel{background:var(--cr-f2);border:1px solid var(--cr-l);border-radius:14px;padding:16px;margin:14px 0}
.cr-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.cr-cab h3{font-size:17px}
.cr-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cr-x{appearance:none;border:0;background:transparent;color:var(--cr-t2);font-size:24px;line-height:1;cursor:pointer;padding:0 6px}
.cr-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cr-grade label,.cr-campo{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--cr-t2);min-width:0}
.cr-larga{grid-column:1/-1}
.cr-campo b{color:var(--cr-t1);font-size:13.5px;overflow-wrap:anywhere}
.cr input[type=text],.cr input[type=number],.cr textarea,.cr select{width:100%;background:var(--cr-f);color:var(--cr-t1);border:1px solid var(--cr-l);border-radius:8px;padding:8px 10px;font:inherit;font-size:13.5px}
.cr input:focus,.cr textarea:focus,.cr select:focus{outline:none;border-color:var(--cr-tur)}
.cr textarea{resize:vertical}
.cr-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cr-linha input{flex:1;min-width:180px}
.cr-pe{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:14px}
.cr-prev{margin-right:auto;font-size:13px;color:var(--cr-t2)}
.cr-prev b{color:var(--cr-tur2)}
.cr-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:12px}
.cr-resumo>div{background:var(--cr-c);border-radius:10px;padding:9px 11px;min-width:0}
.cr-resumo span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--cr-t3)}
.cr-resumo b{font-size:13px;overflow-wrap:anywhere;font-weight:600}
.cr-duvidas{background:#2a2410;border:1px solid #6b5a1c;border-radius:12px;padding:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:9px}
.cr-duvidas h4{color:var(--cr-aviso);font-size:14px}
.cr-duvidas label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--cr-t1)}
.cr-duvidas .cr-bt{align-self:flex-start}
.cr-abas{display:flex;gap:4px;border-bottom:1px solid var(--cr-l);margin-bottom:12px;overflow-x:auto}
.cr-abas button{appearance:none;border:0;background:transparent;color:var(--cr-t2);padding:8px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.cr-abas button.on{color:var(--cr-tur2);border-bottom-color:var(--cr-tur)}
.cr-grupo{margin-bottom:16px}
.cr-grupo-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:13.5px}
.cr-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.cr-foto{appearance:none;border:1px solid var(--cr-l);background:var(--cr-c);color:var(--cr-t1);border-radius:11px;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;min-width:0}
.cr-foto:hover{border-color:var(--cr-roxo2)}
.cr-foto img,.cr-foto>i{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:var(--cr-c2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--cr-t3);font-style:normal}
.cr-foto img.rasc{opacity:.45;filter:grayscale(.6)}
.cr-foto span{font-size:12px;font-weight:600}
.cr-foto em{font-style:normal;font-size:11px;color:var(--cr-tur2)}
.cr-foto.est-pendente{border-color:#7f2a2a}.cr-foto.est-pendente em{color:var(--cr-ruim)}
.cr-foto.est-gerando em,.cr-foto.est-revisando em,.cr-foto.est-corrigindo em{color:var(--cr-aviso)}
.cr-foto small{font-size:10.5px;line-height:1.25}
.cr-bloco-geral,.cr-pedidos{background:var(--cr-c);border-radius:12px;padding:12px;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.cr-alcance{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--cr-t2)}
.cr-alcance>span{font-weight:700;color:var(--cr-t3)}
.cr-cx{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;color:var(--cr-t1);cursor:pointer}
.cr-cx input{accent-color:var(--cr-tur)}
.cr-bloco-geral .cr-bt{align-self:flex-start}
.cr-ped{border-top:1px solid var(--cr-l);padding-top:8px;font-size:13px}
.cr-ped p{margin:4px 0;color:var(--cr-t2);overflow-wrap:anywhere}
.cr-ped em{font-style:normal;color:var(--cr-tur2)}
.cr-ped.est-falhou em{color:var(--cr-ruim)}.cr-ped.est-precisa_info em{color:var(--cr-aviso)}
.cr-ped .cr-perg{color:var(--cr-aviso)}
.cr-ped .cr-res{font-size:12px}
.cr-texto{background:var(--cr-c);border-radius:12px;padding:12px;margin-bottom:10px}
.cr-texto h4{font-size:14px;margin-bottom:8px;color:var(--cr-tur2)}
.cr-tx span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--cr-t3);margin-top:6px}
.cr-tx p{margin:2px 0}
.cr pre{white-space:pre-wrap;word-break:break-word;background:var(--cr-f);border-radius:8px;padding:9px;font-size:12px;margin:4px 0;color:var(--cr-t2);font-family:var(--fc,ui-monospace,monospace)}
.cr details{border-top:1px solid var(--cr-l);padding:6px 0}
.cr summary{cursor:pointer;font-size:13px;font-weight:600}
.cr-refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.cr-ref{background:var(--cr-c);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:0}
.cr-ref img,.cr-ref>i{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:var(--cr-c2);display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--cr-t3)}
.cr-ref b{font-size:11.5px;overflow-wrap:anywhere}
.cr-anexar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.cr-hist{list-style:none;margin:0;padding:0;font-size:13px}
.cr-hist li{border-bottom:1px solid var(--cr-l);padding:6px 0;color:var(--cr-t2);overflow-wrap:anywhere}
.cr-modal{position:fixed;inset:0;background:rgba(4,8,20,.78);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.cr-modal-in{background:var(--cr-f2);border:1px solid var(--cr-l);border-radius:16px;width:min(1180px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:16px}
.cr-modal-corpo{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.cr-grande{width:100%;border-radius:10px;display:block;background:#fff}
.cr-ad{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cr-ad figure{margin:0}.cr-ad img{width:100%;border-radius:8px;display:block}
.cr-ad figcaption{font-size:12px;color:var(--cr-t2);text-align:center;margin-top:4px}
.cr-modal-lado{display:flex;flex-direction:column;gap:8px;min-width:0}
.cr-regra{margin:0;font-size:13px;font-weight:700;color:var(--cr-tur2);background:rgba(45,212,191,.08);border:1px solid rgba(45,212,191,.35);border-radius:8px;padding:8px 10px}
.cr-modal-lado .cr-bt.prim{align-self:flex-start}
.cr-acoes-foto{display:flex;gap:8px;flex-wrap:wrap}
.cr-versoes{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
.cr-ver{appearance:none;display:grid;grid-template-columns:44px 1fr;gap:2px 8px;align-items:center;text-align:left;background:var(--cr-c);border:1px solid var(--cr-l);border-radius:9px;padding:5px;color:var(--cr-t1);font:inherit;font-size:12px;cursor:pointer}
.cr-ver img{width:44px;height:44px;object-fit:cover;border-radius:6px;grid-row:span 2}
.cr-ver small{grid-column:2}
.cr-ver.atual{border-color:var(--cr-tur)}
.cr-ver.reprov span{color:var(--cr-ruim)}
.cr-ver.sel{box-shadow:0 0 0 1px var(--cr-roxo2)}
@media (max-width:900px){
  .cr{padding:14px;border-radius:12px}
  .cr-abas-cel{display:flex;gap:4px;margin-bottom:10px;background:var(--cr-f2);border:1px solid var(--cr-l);border-radius:11px;padding:3px}
  .cr-abas-cel button{flex:1;appearance:none;border:0;background:transparent;color:var(--cr-t2);padding:8px 4px;border-radius:8px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
  .cr-abas-cel button.on{background:var(--cr-c2);color:var(--cr-tur2)}
  .cr-abas-cel em{font-style:normal;opacity:.7}
  .cr-colunas{grid-template-columns:1fr}
  .cr-col{display:none;min-height:0}
  .cr-col.on{display:block}
  .cr-col h3{display:none}
  .cr-grade{grid-template-columns:1fr}
  .cr-selo{margin-left:0}
  .cr-chip{width:100%;flex-wrap:wrap}
  .cr-chip>div{flex:1 1 calc(100% - 30px)}
  .cr-barra .cr-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .cr-barra .cr-seg button{padding:7px 4px;font-size:12px}
  .cr-topo h2{font-size:20px}
  .cr-modal{padding:0;align-items:stretch}
  .cr-modal-in{border-radius:0;max-height:100vh;height:100vh}
  .cr-modal-corpo{grid-template-columns:1fr}
  .cr-fotos{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}

/* 28/09/2026: área de anexo (clicar, colar com Ctrl+V/⌘+V, arrastar) */
.cr-zona{border:1.5px dashed var(--cr-l);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:7px;background:var(--cr-f);font-size:13px;color:var(--cr-t2);margin-top:4px}
.cr-zona>b{color:var(--cr-t1);font-size:13.5px}
.cr-zona.sobre{border-color:var(--cr-tur);background:rgba(45,212,191,.07)}
.cr-zona .cr-bt{margin-right:2px}
.cr-grade .cr-zona label.cr-bt,.cr-zona label.cr-bt{display:inline-flex;flex-direction:row;width:auto;align-self:auto;color:#fff;font-size:12px;gap:0;vertical-align:middle}
.cr kbd{font:inherit;font-size:11.5px;font-weight:700;background:var(--cr-c2);border:1px solid var(--cr-l);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--cr-t1)}
.cr-pend{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:4px}
.cr-pend-it{position:relative;background:var(--cr-c);border-radius:9px;padding:5px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cr-pend-it img,.cr-pend-it>i{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:var(--cr-c2);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;color:var(--cr-t3)}
.cr-pend-it small{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-pend-it .cr-x{position:absolute;top:2px;right:2px;font-size:18px;background:rgba(14,20,38,.85);border-radius:50%;width:24px;height:24px;padding:0;line-height:22px}
.cr-refs+.cr-zona{margin-top:12px}

/* 28/09/2026 - Gestão › JARVIS (os robôs do Mac mini). Usa só as variáveis do
   painel (--sup, --linha, --t1…), que já mudam no modo escuro. */
.jv{display:flex;flex-direction:column;gap:14px;max-width:1200px}
.jv-vazio{color:var(--t3);padding:12px 0}
.jv-topo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:stretch}
.jv-sinal{background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:10px 12px;display:grid;grid-template-columns:12px 1fr;column-gap:8px;align-items:center;min-width:0}
.jv-sinal i{width:10px;height:10px;border-radius:50%;background:var(--t3);grid-row:span 2}
.jv-sinal.on i{background:var(--s3)}
.jv-sinal.off i{background:var(--neg)}
.jv-sinal.rodando i{background:var(--s1);animation:jvPisca 1.2s ease-in-out infinite}
.jv-sinal b{font-size:13px;color:var(--t1)}
.jv-sinal small{font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes jvPisca{50%{opacity:.35}}
.jv-acoes{display:flex;flex-direction:column;gap:6px;justify-content:center}
.jv .botao:not(.prim){background:transparent;color:var(--dest);box-shadow:inset 0 0 0 1px var(--dest)}
.jv .botao[disabled]{opacity:.5;cursor:default}
.jv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.jv-card{background:var(--sup);border:1px solid var(--linha);border-left:4px solid var(--t3);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.jv-card header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.jv-card h3{margin:0;font-size:15px;color:var(--t1)}
.jv-st{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:10px;background:var(--sup2);color:var(--t2);white-space:nowrap}
.jv-ok{border-left-color:var(--s3)}      .jv-ok .jv-st{color:var(--s3)}
.jv-rodando,.jv-na_fila{border-left-color:var(--s1)} .jv-rodando .jv-st,.jv-na_fila .jv-st{color:var(--s1)}
.jv-erro-card,.jv-card.jv-erro{border-left-color:var(--neg)} .jv-card.jv-erro .jv-st{color:var(--neg)}
.jv-precisa_login{border-left-color:var(--s7)} .jv-precisa_login .jv-st{color:var(--s7)}
.jv-pausado{border-left-color:var(--t3)}
.jv-lin{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.jv-lin span{color:var(--t3)}
.jv-lin b{color:var(--t1);font-weight:600;text-align:right}
.jv-lin em{color:var(--t3);font-style:normal;font-weight:400}
.jv-res{margin:0;font-size:12px;color:var(--t2)}
p.jv-erro{margin:0;font-size:12px;color:var(--neg);background:var(--sup2);border-radius:4px;padding:6px 8px}
p.jv-erro.login{color:var(--s7)}
.jv-espera{margin:0;font-size:11px;color:var(--s1)}
.jv-card footer{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.jv-recado{margin:0;font-size:13px;color:var(--s3)}
.jv-recado.ruim{color:var(--neg)}
.jv-hist{background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:12px 14px;overflow-x:auto}
.jv-hist h3{margin:0 0 8px;font-size:14px;color:var(--t1)}
.jv-dobra>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;user-select:none}
.jv-dobra>summary::-webkit-details-marker{display:none}
.jv-dobra>summary::before{content:'▸';color:var(--t3);font-size:12px;transition:transform .15s}
.jv-dobra[open]>summary::before{transform:rotate(90deg)}
.jv-dobra>summary>h3,.jv-dobra>summary>h4{display:inline;margin:0}
.jv-dobra[open]>summary{margin-bottom:8px}
.jv-ext .jv-dobra{margin-top:16px}
.jv-hist table{width:100%;border-collapse:collapse;font-size:12px}
.jv-hist th{text-align:left;color:var(--t3);font-weight:600;padding:4px 8px;border-bottom:1px solid var(--linha)}
.jv-hist td{padding:5px 8px;border-bottom:1px solid var(--linha2);color:var(--t2);vertical-align:top}
.jv-hist td:first-child{white-space:nowrap}
.jv-hist tr.jv-erro .jv-st{color:var(--neg)} .jv-hist tr.jv-ok .jv-st{color:var(--s3)} .jv-hist tr.jv-precisa_login .jv-st{color:var(--s7)}
@media (max-width:760px){
  .jv-topo{grid-template-columns:1fr}
  .jv-acoes{flex-direction:row}
  .jv-cards{grid-template-columns:1fr}
}

/* 28/09/2026 - JARVIS › card do Chat Shopee: o que a IA respondeu */
.jvsh-res{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 2px}
.jvsh-res small,.jvsh-ok{color:var(--t3);font-size:12px}
.jvsh-res a.botao,.jvsh-it footer a{text-decoration:none}
.jvsh-fundo{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow:auto}
.jvsh-caixa{background:var(--sup);color:var(--t1);border:1px solid var(--linha);border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.3);width:100%;max-width:820px;padding:16px 18px}
.jvsh-caixa>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.jvsh-caixa>header h3{margin:0;font-size:16px;color:var(--t1)}
.jvsh-filtros{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.jvsh-lista{display:flex;flex-direction:column;gap:10px}
.jvsh-it{background:var(--sup2);border:1px solid var(--linha);border-left:4px solid var(--t3);border-radius:6px;padding:10px 12px}
.jvsh-it>header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.jvsh-it>header b{color:var(--t1)}
.jvsh-it>header small{color:var(--t3);margin-left:auto}
.jvsh-it .jv-st{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--linha2);color:var(--t2)}
.jvsh-enviada{border-left-color:var(--s3)}
.jvsh-aprovada,.jvsh-enviando{border-left-color:var(--s1)}
.jvsh-rascunho{border-left-color:var(--s7)}
.jvsh-rascunho .jv-st{color:var(--s7)}
.jvsh-erro,.jvsh-cancelada{border-left-color:var(--neg)}
.jvsh-q,.jvsh-a,.jvsh-p{display:grid;grid-template-columns:150px 1fr;gap:8px;margin:4px 0}
.jvsh-q span,.jvsh-a span,.jvsh-p span{font-size:12px;color:var(--t3);padding-top:2px}
.jvsh-q p,.jvsh-a p,.jvsh-p p{margin:0;white-space:pre-wrap;word-break:break-word;color:var(--t2)}
.jvsh-a p{color:var(--t1)}
.jvsh-p p{font-style:italic}
.jvsh-it footer{margin-top:8px}
@media (max-width:600px){.jvsh-q,.jvsh-a,.jvsh-p{grid-template-columns:1fr;gap:2px}.jvsh-fundo{padding:12px}}
.jvsh-caixa .botao:not(.prim){background:transparent;color:var(--dest);box-shadow:inset 0 0 0 1px var(--dest)}
/* 28/09/2026 - JARVIS › TikTok Shop (cores do painel: claro e escuro) */
.jt{padding:14px 16px;border:1px solid var(--linha);border-radius:6px;background:var(--sup);color:var(--t1)}
.jt h3{margin:0 0 12px;font-size:15px;color:var(--t1)}
.jt h4{margin:18px 0 8px;font-size:14px;color:var(--t1)}
.jt-topo{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:stretch}
.jt-topo>div{padding:10px 12px;border-radius:6px;background:var(--sup2);border:1px solid var(--linha2);display:flex;flex-direction:column;gap:2px}
.jt-topo small{color:var(--t3);font-size:12px}
.jt-topo b{font-size:20px;color:var(--t1)}
.jt-topo span{font-size:12px;color:var(--t2)}
.jt-topo .jt-bts{background:none;border:0;justify-content:center}
.jt-on{color:var(--s3)!important;font-size:15px!important}.jt-off{color:var(--s7)!important;font-size:15px!important}
.jt-tab{width:100%;border-collapse:collapse;font-size:13px}
.jt-tab th,.jt-tab td{padding:6px 8px;border-bottom:1px solid var(--linha);text-align:left;vertical-align:top;color:var(--t2)}
.jt-tab th{color:var(--t3);font-weight:600}
.jt-tab a{color:var(--dest)}
.jt-tab tr.jt-err td{background:color-mix(in srgb,var(--neg) 10%,transparent)}
.jt-bts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.jt-chip{display:inline-block;padding:2px 8px;margin:2px;border-radius:99px;font-size:12px;background:color-mix(in srgb,var(--s1) 15%,transparent);color:var(--t1)}
.jt-chip.recusar{background:color-mix(in srgb,var(--neg) 15%,transparent)}
.jt-chip a{color:var(--dest)}
.jt-det{margin-top:10px;color:var(--t2)}
.jt-det summary{cursor:pointer;font-weight:600;color:var(--t1)}
@media (max-width:640px){.jt-tab th:nth-child(5),.jt-tab td:nth-child(5){display:none}.jt{overflow-x:auto}}
/* 29/09/2026 JARVIS › PPPI (card de denúncias) */
.jp-abre{cursor:pointer}
.jp-abre:hover>div{outline:1px solid var(--linha)}
.jp-cat{margin:10px 0;padding:10px;border:1px solid var(--linha);border-radius:6px;background:var(--sup)}
.jp-cat-cab{display:flex;flex-direction:column;gap:3px;margin-bottom:6px;font-size:13px;color:var(--t1)}
.jp-hist{margin:12px 0;padding:10px;border-radius:6px;background:var(--sup2);border:1px solid var(--linha2)}

/* 29/09/2026 - JARVIS: card abre e mostra o detalhe do robô como extensão */
.jv-card[data-jv-card]{cursor:pointer}
.jv-card[data-jv-card]>header:hover h3{color:var(--dest)}
.jv-card>header:focus-visible{outline:2px solid var(--dest);outline-offset:2px;border-radius:4px}
.jv-seta{display:inline-block;width:1em;color:var(--t3)}
.jv-card.jv-aberto{outline:2px solid var(--dest);outline-offset:-1px}
.jv-pista{margin:0;font-size:12px;color:var(--s7)}
.jv-ext{cursor:auto;margin-top:8px;padding-top:10px;border-top:1px solid var(--linha);min-width:0;overflow-x:auto}
.jv-ext .jt{padding:0;border:0;background:none;overflow:visible}
.jv-ext .jt>h3{display:none}
.jv-ext h4{margin:16px 0 8px;font-size:14px;color:var(--t1)}
.jv-ext>h4:first-child,.jv-ext .jt+h4{margin-top:4px}
.jv-ext .jt+h4{margin-top:18px}
.jv-ext .jp-cat a{color:var(--dest)}

/* 29/09/2026 - JARVIS: detalhe do robô num painel embaixo dos cards */
.jv-painel.jv-ext{margin-top:12px;padding:14px 16px;background:var(--sup);border:1px solid var(--dest);border-radius:6px}
.jv-painel-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.jv-painel-cab h3{margin:0;font-size:15px;color:var(--t1)}
.jv-painel-bt{display:flex;gap:8px;flex-wrap:wrap}

/* 29/09/2026 - Gestão › HUNTER: pesquisa de produtos da Shopee (reusa .jv-*) */
.hu{max-width:none}
.hu-topo{grid-template-columns:repeat(4,minmax(0,1fr))}
.hu-barra{display:block;height:6px;border-radius:3px;background:var(--linha2);overflow:hidden;margin-top:4px}
.hu-barra span{display:block;height:100%;background:var(--s1)}
.hu-ctl{background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.hu-nova{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hu-nova label{font-size:13px;font-weight:600;color:var(--t1)}
.hu input[type=search],.hu input[type=text]{font-family:var(--fn);font-size:13px;color:var(--t1);background:var(--sup2);border:1px solid var(--linha);border-radius:3px;padding:6px 8px;min-width:0}
.hu-nova input{width:260px;max-width:100%}
.hu-bts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hu .botao.hu-perigo:not(.prim){color:var(--neg);box-shadow:inset 0 0 0 1px var(--neg)}
.hu-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--t2);cursor:pointer;white-space:nowrap}
.hu-filtros{background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.hu-faixa{display:flex;align-items:center;gap:6px}
.hu-faixa span,.hu-cls span{font-size:12px;color:var(--t3);font-weight:600}
.hu-faixa input{width:74px}
.hu-cls{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.hu-busca{width:220px}
.hu-multi{position:relative}
.hu-multi summary{cursor:pointer;font-size:13px;color:var(--t2);background:var(--sup2);border:1px solid var(--linha);border-radius:3px;padding:6px 10px;list-style:none;white-space:nowrap}
.hu-multi summary::-webkit-details-marker{display:none}
.hu-multi summary b{color:var(--t1);font-weight:600}
.hu-multi-cx{position:absolute;z-index:50;top:calc(100% + 4px);left:0;width:300px;max-width:calc(100vw - 32px);background:var(--sup);border:1px solid var(--linha);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:8px;display:flex;flex-direction:column;gap:6px}
.hu-multi-cx input[type=search]{width:100%}
.hu-multi-lista{max-height:260px;overflow:auto;display:flex;flex-direction:column}
.hu-multi-lista label{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--t1);padding:3px 2px;cursor:pointer}
.hu-multi-lista label[hidden]{display:none}
.hu-multi-lista small{color:var(--t3);font-size:11px;margin-left:auto;white-space:nowrap}
.hu-limpa[hidden]{display:none}
.hu-limpa{align-self:flex-end;border:0;background:none;color:var(--dest);font-size:12px;cursor:pointer;padding:0}
.hu-info{margin:0;font-size:12px;color:var(--t3);min-height:16px}
.hu-resumo{margin:0 0 6px;font-size:13px;color:var(--t2)}
.hu-resumo b{color:var(--t1)}
.hu-tab td.n,.hu-tab th:nth-child(n+3):nth-child(-n+8){text-align:right}
.hu-tab td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.hu-tab td{vertical-align:middle}
.hu-img{width:52px}
.hu-img img{width:44px;height:44px;object-fit:cover;border-radius:4px;display:block;background:var(--sup2)}
.hu-tit{min-width:240px;max-width:420px}
.hu-tit small{display:block;color:var(--t3);font-size:11px;margin-top:2px}
.hu-abre{border:0;background:none;padding:0;text-align:left;color:var(--t1);font:inherit;font-weight:600;cursor:pointer;line-height:1.35}
.hu-abre:hover{color:var(--dest);text-decoration:underline}
.hu-ord{border:0;background:none;padding:0;font:inherit;color:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.hu-ord.on{color:var(--t1)}
.hu-quando{white-space:nowrap}
.hu a{color:var(--dest)}
.hu a:hover{color:var(--t1)}
.hu-caixa a{color:var(--dest)}
.hu-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--sup2);color:var(--s3);white-space:nowrap}
.hu-tag.thy{color:var(--s2)}
.hu-tag.t3d{color:var(--s4)}
tr.hu-excl td{opacity:.6}
.hu-pag{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;font-size:13px;color:var(--t2)}
.hu-caixa{max-width:1100px}
.hu-hist-topo{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.hu-hist-topo img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.hu-hist-topo p{margin:0;font-size:13px;color:var(--t2)}
.hu-fontes{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;margin:0;font-size:11px}
.hu-fontes dt{color:var(--t3)}
.hu-fontes dd{margin:0;color:var(--t2);word-break:break-word}
@media (max-width:760px){
  .hu-topo{grid-template-columns:1fr}
  .hu-nova input,.hu-busca{width:100%}
  .hu-nova{width:100%}
}
/* 02/10/2026 - card Radar Shopee (JARVIS) */
.rs-num{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 2px}
.rs-num>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--linha);border-radius:8px}
.rs-num b{font-size:22px;line-height:1.1;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.rs-num span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.rs-nota{margin:0 0 8px;font-size:13px;color:var(--t3)}
.rs-tabw{overflow-x:auto}
.rs-tab th.rs-n,.rs-tab td.rs-n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-tab td.rs-n small,.rs-tab td.rs-nome small{display:block;color:var(--t3);font-size:11px}
.rs-tab td.rs-nome{width:62%;min-width:220px;white-space:normal;overflow-wrap:anywhere}
.rs-tab td.rs-nome a{white-space:normal;display:inline}
.rs-tab td.rs-nome a{text-decoration:none}
.rs-tab td.rs-nome a:hover{text-decoration:underline}
.rs-tab td b{color:var(--t1)}
.rs-ord{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--t3)}
.rs-ord i{font-style:normal;font-size:10px;opacity:.6}
.rs-ord.on{color:var(--t1)}
.rs-ord.on i{opacity:1;color:var(--dest)}
.rs-ord:focus-visible{outline:2px solid var(--dest);outline-offset:2px;border-radius:3px}
.rs-mais{display:flex;align-items:center;gap:10px;margin:10px 0 0}
.rs-mais small{color:var(--t3)}
/* 02/10/2026 - card Shopping de Preços (JARVIS); usa as classes rs-* do Radar Shopee */
.sdp-tab td.rs-nome{width:52%}
.sdp-prod{display:flex;gap:10px;align-items:flex-start}
.sdp-foto{flex:0 0 40px;width:40px;height:40px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--linha)}
.sdp-tag{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--linha);border-radius:999px;font-size:10px;line-height:16px;color:var(--t3);vertical-align:1px}
.sdp-ord2{margin:-2px 0 8px}
.sdp-ord2 .rs-ord{font-weight:500}
/* 02/10/2026 - card Shopping de Preços: blocos (bloco parcial e em branco) */
.sdp-tab td.rs-n small.sdp-parcial{font-style:italic}
.sdp-tab td.sdp-vazio{background:transparent}
/* 02/10/2026 - card Shopping de Preços: copiar título e preço */
.sdp-tit{display:flex;align-items:flex-start;gap:2px}
/* título em até 2 linhas; o texto inteiro fica no title e é o que o botão copia */
.sdp-tab td.rs-nome .sdp-tt{flex:0 1 auto;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  overflow-wrap:anywhere;padding-top:4px}
.sdp-tit .sdp-cp,.sdp-tit .sdp-fb{flex:0 0 auto}
.sdp-tit .sdp-fb{padding-top:6px}
.sdp-tags{margin:1px 0 0;margin-left:-6px}
.sdp-preco{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.sdp-pg{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.sdp-preco{margin:2px 0 1px}
.sdp-pv{font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.sdp-pv em{font-style:normal;font-weight:400;color:var(--t3);font-size:12px}
.sdp-pv.sdp-ind{font-weight:400;color:var(--t3)}
.sdp-tab td.rs-nome .sdp-preco small.sdp-pd{display:inline;color:var(--t3);font-size:11px}
.sdp-cp{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;padding:0;margin:0;
  border:1px solid transparent;border-radius:6px;background:transparent;color:var(--t3);cursor:pointer}
.sdp-cp:hover:not(:disabled){color:var(--t1);background:var(--sup2);border-color:var(--linha)}
.sdp-cp:focus-visible{outline:2px solid var(--dest);outline-offset:1px}
.sdp-cp:disabled{opacity:.35;cursor:not-allowed}
.sdp-cp.ok{color:var(--s3)}
.sdp-cp.erro{color:var(--neg)}
.sdp-fb{font-size:11px;font-weight:600}
.sdp-fb:empty{display:none}
.sdp-fb.ok{color:var(--s3)}
.sdp-fb.erro{color:var(--neg)}
@media (pointer:coarse){.sdp-cp{width:40px;height:40px}.sdp-cp svg{width:16px;height:16px}}


/* 02/10/2026, pedido do Roderjan: o olho passa a esconder também a CONTA, o
   SKU, a FOTO do produto, o vencedor/vendedor do catálogo e o nome da campanha,
   em todas as abas (Métricas, Estoque, Catálogo, Campanhas, Cadastro de SKUs...).
   Sem :hover que revele -- no celular o toque contaria como hover. */
html.privado .olho-priv,
html.privado td.olho-priv *,
html.privado img:not([alt^="QR"]),
html.privado .capa,
html.privado .cv,
html.privado .vg-dono,
html.privado .fr-sku,
html.privado .cxsku,
html.privado .sku-op,
html.privado .sku-opt{filter:blur(6px)!important;-webkit-user-select:none;user-select:none}
html.privado td.olho-priv *{filter:none!important}
/* 03/10/2026 - card Shopping de Preços: seletor de categorias, ordem e período */
.sdp-ctl{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 14px;margin:2px 0 10px}
.sdp-drop{position:relative}
.sdp-drop-bt{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid var(--linha);border-radius:8px;
  background:var(--sup);color:var(--t2);font:inherit;font-size:13px;cursor:pointer}
.sdp-drop-bt b{color:var(--t1);font-weight:600}
.sdp-drop-bt em{font-style:normal;color:var(--t3)}
.sdp-drop-bt i{font-style:normal;color:var(--t3)}
.sdp-drop-bt:focus-visible,.sdp-seg:focus-visible,.sdp-pz:focus-visible{outline:2px solid var(--dest);outline-offset:1px}
.sdp-drop.aberto .sdp-drop-bt{border-color:var(--dest)}
.sdp-drop-pn{position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:min(560px,calc(100vw - 32px));border:1px solid var(--linha);
  border-radius:10px;background:var(--sup);box-shadow:0 10px 28px rgba(0,0,0,.28);padding:8px}
.sdp-drop-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:2px 2px 8px;border-bottom:1px solid var(--linha2)}
.sdp-drop-top small{flex:1 1 100%;color:var(--t3);font-size:11px}
.sdp-drop-lista{max-height:min(360px,60vh);overflow-y:auto;padding-top:4px}
.sdp-drop-it{display:flex;align-items:center;gap:8px;padding:4px 2px;border-bottom:1px solid var(--linha2)}
.sdp-drop-it:last-child{border-bottom:0}
.sdp-drop-it label{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;cursor:pointer;color:var(--t1);font-size:13px;padding:4px 0}
.sdp-drop-it label input{width:16px;height:16px;margin:0;accent-color:var(--dest)}
.sdp-drop-it label small{flex:1 1 100%;padding-left:22px;color:var(--t3);font-size:11px}
.sdp-drop-it label small b{color:var(--neg);font-weight:600}
.sdp-drop-it.pz label span{color:var(--t3)}
.sdp-pz{flex:0 0 auto;min-height:30px;padding:4px 8px;border:1px solid var(--linha);border-radius:6px;background:transparent;color:var(--t2);
  font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.sdp-pz:hover:not(:disabled){border-color:var(--neg);color:var(--neg)}
.sdp-pz.on{border-color:var(--s3);color:var(--s3)}
.sdp-pz:disabled{opacity:.5;cursor:wait}
.sdp-segs{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sdp-segs span{color:var(--t3);font-size:12px;margin-right:2px}
.sdp-seg{min-height:34px;padding:6px 10px;border:1px solid var(--linha);border-radius:8px;background:transparent;color:var(--t2);font:inherit;font-size:13px;cursor:pointer}
.sdp-seg.on{border-color:var(--dest);color:var(--t1);background:var(--sup2);font-weight:600}
@media (pointer:coarse){.sdp-drop-bt,.sdp-seg{min-height:40px}.sdp-pz{min-height:40px;padding:6px 10px}.sdp-drop-it label input{width:20px;height:20px}}
/* 03/10/2026 ~03h - card Shopping de Preços: árvore de categorias com "Não mapear" em qualquer nível */
.sdp-seta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid transparent;
  border-radius:6px;background:transparent;color:var(--t2);font:inherit;font-size:16px;line-height:1;cursor:pointer}
.sdp-seta:hover{color:var(--t1);border-color:var(--linha)}
.sdp-seta:focus-visible{outline:2px solid var(--dest);outline-offset:1px}
.sdp-seta.vazia{cursor:default}
.sdp-drop-sub{padding-left:calc(var(--n,1) * 18px);background:var(--sup2)}
.sdp-drop-sub>small{display:block;padding:6px 4px;color:var(--t3);font-size:11px}
.sdp-drop-nm{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;color:var(--t1);font-size:13px;padding:4px 0}
.sdp-drop-nm small{flex:1 1 100%;color:var(--t3);font-size:11px}
.sdp-drop-it small b{color:var(--neg);font-weight:600}
.sdp-drop-it.pz>.sdp-drop-nm>span,.sdp-drop-it.pz>label>span{color:var(--t3);text-decoration:line-through;text-decoration-color:var(--neg)}
.sdp-pz-her{flex:0 0 auto;font-size:11px;color:var(--neg);white-space:nowrap}
.sdp-pz-lista{margin:8px 0 4px;padding:6px 8px;border:1px solid var(--linha);border-left:3px solid var(--neg);border-radius:8px;font-size:12px}
.sdp-pz-lista>b{display:block;margin-bottom:4px;color:var(--t1)}
.sdp-pz-lista>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0;color:var(--t2)}
.sdp-pz-lista>div span{min-width:0;overflow-wrap:anywhere}
@media (pointer:coarse){.sdp-seta{width:40px;height:40px;font-size:14px}}
/* 03/10/2026 ~14:20 - card Shopping de Preços: categoria clicável, "ocultar" subcategoria e filtro por categoria */
.sdp-catlk{all:unset;cursor:pointer;color:var(--dest);border-bottom:1px dotted currentColor}
.sdp-catlk:hover{color:var(--t1)}
.sdp-catlk:focus-visible{outline:2px solid var(--dest);outline-offset:1px}
.sdp-ocu{margin-left:4px;padding:1px 6px;border:1px solid var(--linha);border-radius:999px;background:transparent;color:var(--t3);
  font:inherit;font-size:10px;line-height:16px;cursor:pointer;vertical-align:1px}
.sdp-ocu:hover:not(:disabled){border-color:var(--neg);color:var(--neg)}
.sdp-ocu:disabled{opacity:.5;cursor:wait}
.sdp-chip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;padding:6px 10px;border:1px solid var(--dest);
  border-radius:8px;background:var(--sup2);font-size:13px;color:var(--t2)}
.sdp-chip b{color:var(--t1)}
@media (pointer:coarse){.sdp-ocu{padding:6px 10px;font-size:12px}}
.fin-venc-modal{width:min(680px,calc(100vw - 28px));max-width:none;max-height:min(80vh,720px);padding:20px;border:1px solid var(--linha);border-radius:8px;background:var(--sup);color:var(--t1);box-shadow:0 18px 48px rgba(0,0,0,.35)}
.fin-venc-modal::backdrop{background:rgba(0,0,0,.58)}
.fin-venc-modal h2{margin:0 0 8px;font-size:18px}
.fin-venc-modal p{margin:0 0 12px;color:var(--t2);font-size:13px}
.fin-venc-tabela{max-height:40vh;overflow:auto;border:1px solid var(--linha);border-radius:6px}
.fin-venc-tabela table{width:100%;border-collapse:collapse;font-size:13px}
.fin-venc-tabela th,.fin-venc-tabela td{padding:8px 10px;border-bottom:1px solid var(--linha2);text-align:left;white-space:nowrap}
.fin-venc-tabela th{position:sticky;top:0;background:var(--sup2);color:var(--t2);font-size:11px}
.fin-venc-tabela tr:last-child td{border-bottom:0}
.fin-venc-modal .fin-venc-nota{margin:12px 0;color:var(--t3);font-size:12px}
.fin-venc-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-top:16px}
.fin-venc-acoes .botao,.fin-venc-acoes .fechar{min-height:38px}
.fin-venc-modal .secundario{background:transparent;color:var(--t1);border:1px solid var(--linha)}
@media(max-width:560px){.fin-venc-modal{padding:14px}.fin-venc-acoes{display:grid;grid-template-columns:1fr}.fin-venc-acoes button{width:100%}.fin-venc-tabela th,.fin-venc-tabela td{padding:7px 8px}}

/* ===== o "escondido" no formulário do Financeiro (18/09/2026) =====
   O navegador esconde quem tem [hidden] com display:none -- mas só quando o
   elemento não tem regra de display própria, e `.fin-form .mini` tem
   display:flex. Resultado: "Quantas vezes?" continuava na tela depois de
   escolher recorrente, e "O valor é fixo?" aparecia quando não era. */
.fin-form [hidden]{display:none}
.shop-cliente{margin:8px 0 4px;font-size:13px;line-height:1.45;color:var(--t1)}
.shop-cliente .leg,.shop-ultima .leg{font-size:11px}
.shop-porque{margin:8px 0 6px;padding:8px 10px;border-left:3px solid var(--s7);background:var(--sup2);font-size:12px;line-height:1.45;color:var(--t2)}
.shop-item.aprovar{border-left:3px solid var(--s1)}
.shop-item.aprovar textarea{width:100%;margin-top:8px;padding:9px 10px;border:1px solid var(--linha);border-radius:5px;background:var(--sup);color:var(--t1);font-family:var(--fn);font-size:13px;line-height:1.5;resize:vertical}
.shop-nota{flex:1 1 320px;padding:7px 9px;border:1px solid var(--linha);border-radius:5px;background:var(--sup);color:var(--t1);font-family:var(--fn);font-size:12px}
.shop-hist-min{margin:6px 0}
.shop-hist-min summary{cursor:pointer;font-size:11px;color:var(--t3);font-family:var(--fu)}
.shop-hist-min p{margin:4px 0}
tr.off{opacity:.5}
.shop-rotulo{margin:0 0 6px}
.shop-eu-mesmo{margin-top:12px;border-top:1px dashed var(--linha);padding-top:10px}
.shop-eu-mesmo summary{cursor:pointer;font-size:12px;color:var(--t3);font-family:var(--fu)}
.shop-eu-mesmo textarea{margin-top:8px}

/* 24/09/2026: Shopee › A enviar */
.senv th.n,.senv td.n{text-align:right;white-space:nowrap}
.senv-atras{color:var(--neg);font-weight:600}

/* ================= lista de reposição (24/09/2026) =================
   A barra fica ENTRE os filtros e a tabela porque é ali que ela é lida: a
   pessoa marca as caixinhas na primeira coluna e o contador, logo acima,
   responde "quantos já entraram". O "Próximo" nasce desligado -- lista de
   reposição sem item marcado não existe.
   A caixa que abre é a mesma do painel (xp-fundo/xp-cx, do "Excluir perguntas
   por período"): só o cartão é mais largo, porque aqui se lê uma lista de
   produtos e não um campo só. */
.rep-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;
  border:1px solid var(--linha);border-radius:9px;padding:9px 12px;background:var(--sup2);
  font-size:13px;color:var(--t2)}
.rep-barra b{color:var(--t1)}
.rep-ic{width:17px;height:17px;flex:0 0 auto;color:var(--dest)}
.rep-bts{display:flex;gap:8px;margin-left:auto}
.rep-bt{font-family:var(--fu);font-weight:600;font-size:12.5px;padding:7px 15px;
  border:1px solid var(--dest);border-radius:8px;background:var(--dest);color:#fff;cursor:pointer}
.rep-bt.fraco{background:var(--sup);border-color:var(--linha);color:var(--t2)}
.rep-bt.fraco:hover:not(:disabled){color:var(--t1)}
.rep-bt:disabled{opacity:.45;cursor:default}
td.cel-rep{text-align:center}
td.cel-rep label{display:inline-flex;align-items:center;justify-content:center;padding:3px;cursor:pointer}
td.cel-rep input{width:15px;height:15px;accent-color:var(--dest);cursor:pointer;margin:0}
.rep-cx{width:min(700px,100%)}
.rep-dias{margin:0 0 12px}
.rep-dias button{margin-left:auto}
/* max-height em vh, e não em px: com 40 itens marcados a lista precisa rolar
   dentro do cartão, senão os botões de baixo nascem fora da tela. */
.rep-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  max-height:44vh;overflow-y:auto}
.rep-item{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--linha);border-radius:8px;background:var(--sup2)}
.rep-item .capa{width:34px;height:34px;flex-basis:34px}
.rep-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.rep-nome{font-size:13px;font-weight:600;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-sub{font-size:11.5px;color:var(--t3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-qtd{font-family:var(--fn);font-size:15px;text-align:center;width:88px;flex:0 0 auto;
  padding:6px 8px;border:1px solid var(--linha);border-radius:3px;background:var(--sup);color:var(--t1)}
@media(max-width:640px){
  .rep-bts{margin-left:0;width:100%}
  .rep-bts button{flex:1 1 auto}
  .rep-item{flex-wrap:wrap}
  .rep-qtd{width:100%}
}

/* 24/09/2026: estrela dos menus restritos (so admin / liberados um a um) */
/* 27/09/2026: submenu da Gestão -- os menus com estrela moram debaixo dela
   (menuLateral no app.js). A setinha abre e fecha sem trocar de tela. */
.it-mae{position:relative}
.lado .it-mae>.it{padding-right:44px}
.bt-sub{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  padding:0;border:0;border-radius:6px;background:transparent;color:#8fb3dc;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.bt-sub:hover{background:rgba(56,189,248,.16);color:#fff}
.bt-sub svg{width:14px;height:14px;transition:transform .15s ease}
.it-mae.aberto .bt-sub svg{transform:rotate(180deg)}
.it-mae>.it.on+.bt-sub{color:#04122a}
.it-mae>.it.on+.bt-sub:hover{background:rgba(4,18,42,.12);color:#04122a}
.sub-menu{margin:2px 0 4px}
.sub-menu[hidden]{display:none}
.lado .it.it-sub{padding:6px 16px 6px 32px;font-size:.93em}
.sub-gr{font-family:var(--fu);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:#5f81ad;padding:10px 18px 3px 32px}
@media(max-width:820px){
  .it-mae{display:flex;align-items:center}
  .lado .it-mae>.it{padding-right:6px}
  .bt-sub{position:static;transform:none}
  .sub-menu{display:flex;align-items:center;gap:2px;margin:0}
  .sub-gr{display:none}
  .lado .it.it-sub{padding:6px 10px}
}
.estrela-menu{display:inline-flex;align-items:center;margin-left:6px;color:#fbbf24;vertical-align:middle;line-height:0}
.estrela-menu svg{filter:drop-shadow(0 0 3px rgba(251,191,36,.45))}
.it.on .estrela-menu{color:#b45309}

/* ================= Gestão (24/09/2026) =================
   A tela reaproveita o que já existe -- .bloco, .modos, .kpis, .ac-linha e
   .ac-cx da tela "Quem acessa cada conta", .rep-item da caixa de reposição.
   O que vem aqui é só o que não tinha dono. */

/* o alto da tela: a explicação e as sub-abas, antes do primeiro bloco */
.gest-topo{margin:0 0 14px}
.gest-topo .leg{margin:0 0 10px;max-width:70ch}
.gest-topo .modos{margin:0}

/* Adicionar colaborador: nome, e-mail e o botão, numa linha só em tela grande */
.colab-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.colab-form label{display:flex;flex-direction:column;gap:5px;flex:1 1 220px;
  font-size:12.5px;color:var(--t2)}
.colab-form input{font-family:inherit;font-size:14px;padding:9px 11px;
  border:1px solid var(--linha);border-radius:8px;background:var(--sup2);color:var(--t1)}
.colab-form input:focus{outline:none;border-color:var(--dest)}
.colab-form .botao{flex:0 0 auto}

/* a linha de cada pessoa: quem é de um lado, as caixinhas do outro */
.colab-linha{align-items:flex-start}
.colab-linha .ac-quem{gap:4px;max-width:260px}
.colab-conta{font-size:12px;color:var(--dest)}
.colab-caixas{flex:1 1 420px;gap:7px}
/* o título quebra a linha das caixinhas em dois grupos (Menus / Contas) sem
   precisar de outro contêiner */
.colab-tit{width:100%;margin:2px 0 0;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--t3)}
.colab-linha .rep-bt{margin-top:7px;align-self:flex-start}

/* Fulls para repor: a mesma lista da caixa, agora com a caixinha do separador */
/* 24/09/2026: na janela de quantidade, o aviso de que aquele SKU já tem pedido
   em aberto. Fica embaixo do SKU, na cor de atenção, sem empurrar o layout. */
.rep-ja{font-size:11.5px;line-height:1.35;color:var(--s7);display:block}
.rep-ja:empty{display:none}
.rep-ja b{color:var(--s7)}

.repo-listas{margin:0 0 12px}
.repo-obs{margin:0 0 10px}
/* 24/09/2026: escolher a conta dentro da lista (quem separa trabalha uma loja
   de cada vez). O número ao lado é quantos itens aquela conta tem na lista. */
.repo-contas{margin:0 0 12px}
.repo-contas a{display:inline-flex;align-items:center;gap:7px}
.repo-contas em{font-style:normal;font-size:11.5px;opacity:.72}
.repo-itens{max-height:none}
.repo-item{gap:12px}
.repo-marca{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;padding:3px;cursor:pointer}
.repo-marca input{width:18px;height:18px;accent-color:var(--dest);cursor:pointer;margin:0}
.repo-item.feito{opacity:.62}
.repo-item.feito .rep-nome{text-decoration:line-through}
.repo-qtd{font-family:var(--fn);font-size:17px;font-weight:600;color:var(--t1);
  width:72px;flex:0 0 auto;text-align:right}
/* 24/09/2026: o × que tira o pedido da lista. Discreto até o mouse chegar em
   cima da linha -- é uma ação destrutiva e não deve competir com a caixinha de
   separado, que é o que se clica o tempo todo. */
.repo-x{flex:0 0 auto;width:26px;height:26px;padding:0;line-height:1;
  font-size:17px;border:1px solid transparent;border-radius:7px;
  background:transparent;color:var(--t3);cursor:pointer;opacity:.55}
.repo-item:hover .repo-x{opacity:1}
.repo-x:hover:not(:disabled){border-color:var(--neg);color:var(--neg);background:var(--sup)}
.repo-x:disabled{opacity:.3;cursor:default}
@media(hover:none){.repo-x{opacity:1}}

.repo-rodape{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.repo-rodape .leg{margin:0}
@media(max-width:640px){
  .colab-linha .ac-quem{max-width:none}
  .colab-form .botao{width:100%}
  .repo-qtd{width:auto;margin-left:auto}
}

/* ================= Gestão › Separação por SKU (24/09/2026) =================
   Cards grandes, para a expedição marcar rápido com a mão ocupada. O card
   inteiro é o botão -- mirar numa caixinha pequena ali é o caminho do erro. */
.sep-quando{margin:4px 0 0;font-size:12px}
.sep-barra{margin-bottom:12px}
.sep-nota{font-size:11.5px;color:var(--t3)}
.sep-abaixo{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t2)}
.sep-abaixo input{width:62px;font-family:var(--fn);font-size:13px;padding:6px 8px;text-align:center;
  border:1px solid var(--linha);border-radius:6px;background:var(--sup);color:var(--t1)}

.sep-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sep-card{border:1px solid var(--linha);border-radius:11px;padding:12px;background:var(--sup2);
  cursor:pointer;user-select:none;display:flex;flex-direction:column;gap:6px}
.sep-card:hover{border-color:var(--dest)}
.sep-card.on{border-color:var(--dest);box-shadow:0 0 0 2px var(--dest) inset}
.sep-topo{display:flex;align-items:center;gap:8px}
.sep-caixa{width:20px;height:20px;flex:0 0 auto;border:1px solid var(--linha);border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
  background:var(--sup);color:transparent}
.sep-card.on .sep-caixa{background:var(--dest);border-color:var(--dest);color:#fff}
.sep-sku{font-family:var(--fc);font-size:12.5px;font-weight:600;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sep-nome{margin:0;font-size:12px;color:var(--t2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sep-nums{display:flex;align-items:flex-end;gap:6px;margin-top:auto}
.sep-grande{font-family:var(--fn);font-size:26px;font-weight:700;color:var(--t1);line-height:1}
.sep-nums .rot{font-size:11px;color:var(--t3)}
.sep-un{margin-left:auto;text-align:right;font-size:13px;color:var(--t2)}
.sep-junto{margin:0;font-size:11px;color:var(--s7)}

/* a caixa com os números para colar */
.sep-lote{border:1px solid var(--linha);border-radius:9px;padding:10px;margin-bottom:10px;background:var(--sup2)}
.sep-lote-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;
  font-size:13px;color:var(--t2)}
.sep-lote-txt{width:100%;box-sizing:border-box;font-family:var(--fc);font-size:11.5px;line-height:1.4;
  border:1px solid var(--linha);border-radius:7px;padding:8px;background:var(--sup);color:var(--t1);resize:vertical}
@media(max-width:640px){
  .sep-cards{grid-template-columns:1fr 1fr}
  .sep-abaixo{width:100%}
}

/* ---------------- Gestão › Auditoria de Frete (25/09/2026) ----------------
   Aqui vermelho e verde NÃO seguem a regra do resto do painel, onde vermelho é
   "número negativo". Nesta tela o frete que SOBE é a má notícia e o que DESCE é
   a boa -- então o sinal do número e a cor andam ao contrário do td.neg. É por
   isso que existem .fr-sobe e .fr-desce em vez de reaproveitar .neg. As cores
   saem das variáveis de tema, então o modo escuro acompanha sozinho. */
.fr-sobe{color:var(--neg)}
.fr-desce{color:var(--s3)}

.fr-filtros .fr-dias{margin:0}
.fr-filtros .fr-busca{flex:1;min-width:200px}
.fr-varredura{margin:-4px 0 12px}
.fr-ordem,.fr-somas{margin:10px 0 12px}

table.fr-cons tbody tr.fr-linha{cursor:pointer}
table.fr-cons tbody tr.fr-linha:hover,
table.fr-cons tbody tr.fr-linha:focus-visible{background:var(--sup2);outline:0}
table.fr-cons td.fr-sku{white-space:nowrap}
table.fr-cons td.fr-tit{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.fr-cons td.v b{font-family:var(--fn);font-weight:600}

/* o segundo e o terceiro andar de uma célula: o valor embaixo da contagem, e o
   "com mesmo preço" embaixo dele. Bloco, para não brigar com o número. */
.fr-sub{display:block;font-family:var(--fn);font-size:11px;color:var(--t3);font-weight:400}
.fr-mlb{display:block;font-family:var(--fc);font-size:11px;color:var(--t3)}
table.fr-det td.fr-ped{font-family:var(--fc);font-size:12px;white-space:nowrap}

.fr-tag{display:inline-block;font-family:var(--fu);font-size:11px;padding:2px 8px;
  border:1px solid var(--linha);border-radius:999px;white-space:nowrap;color:var(--t2)}
.fr-tag.fr-sobe{border-color:var(--neg)}

.fr-volta{margin:0 0 6px}
.fr-det-tit{margin:0 0 4px;font-size:15px}
.fr-det-sub{font-weight:400;font-size:12px;color:var(--t3)}

@media (max-width:760px){
  table.fr-cons td.fr-tit{max-width:160px}
}

/* Os links desta tela (o MLB do anúncio e o "voltar") estavam saindo com o azul
   PADRÃO DO NAVEGADOR, #0000EE: o painel não estiliza <a> solto dentro de
   tabela, cada tela cuida do seu. No tema escuro aquele azul sobre o #151d26
   ficava ilegível. Aqui eles passam a usar o azul do tema, que tem contraste
   nos dois modos. */
.fr-mlb a,table.fr-det td a,.fr-volta a{color:var(--s1);text-decoration:none}
.fr-mlb a:hover,table.fr-det td a:hover,.fr-volta a:hover,
.fr-mlb a:focus-visible,table.fr-det td a:focus-visible,.fr-volta a:focus-visible{text-decoration:underline}

/* 27/09/2026 - Gestão › Criador de anúncio ("Central de produção", layout 3).
   Escura de propósito, nos dois temas do painel: azul-marinho/grafite com
   destaques roxo e turquesa. Tudo fica dentro de .cr para não vazar. */
.cr{--cr-f:#0e1426;--cr-f2:#131b31;--cr-c:#1a2340;--cr-c2:#212c4f;--cr-l:#2c3963;--cr-t1:#e8edf8;--cr-t2:#a9b4cf;--cr-t3:#7683a3;
  --cr-roxo:#8b5cf6;--cr-roxo2:#a78bfa;--cr-tur:#2dd4bf;--cr-tur2:#5eead4;--cr-ruim:#f87171;--cr-aviso:#fbbf24;--cr-ok:#34d399;
  background:var(--cr-f);color:var(--cr-t1);border-radius:16px;padding:20px;margin:0 0 24px;box-sizing:border-box;min-width:0}
.cr *{box-sizing:border-box}
.cr h2,.cr h3,.cr h4{margin:0;color:var(--cr-t1)}
.cr small{color:var(--cr-t3)}
.cr code{background:var(--cr-c2);padding:1px 6px;border-radius:5px;font-size:12px;color:var(--cr-tur2);word-break:break-all}
.cr .ruim{color:var(--cr-ruim)}
.cr-topo{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.cr-migalha{font-size:12px;color:var(--cr-t3);letter-spacing:.02em}
.cr-migalha span{margin:0 4px;color:var(--cr-roxo2)}
.cr-topo h2{font-size:24px;font-weight:700;margin-top:2px;background:linear-gradient(90deg,var(--cr-t1),var(--cr-tur2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-conexoes{display:flex;gap:10px;flex-wrap:wrap}
.cr-chip{display:flex;align-items:center;gap:10px;background:var(--cr-c);border:1px solid var(--cr-l);border-radius:12px;padding:8px 12px;flex-wrap:wrap;max-width:100%}
.cr-chip>div{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cr-chip b{font-size:13px}.cr-chip span{font-size:12px;color:var(--cr-t2);overflow-wrap:anywhere}
.cr-ponto{width:9px;height:9px;border-radius:50%;background:var(--cr-t3);flex:none}
.cr-chip.ok .cr-ponto{background:var(--cr-ok);box-shadow:0 0 8px var(--cr-ok)}
.cr-chip.ruim .cr-ponto{background:var(--cr-ruim)}
.cr-chip.aviso .cr-ponto{background:var(--cr-aviso)}
.cr-bt{text-transform:none;letter-spacing:normal;appearance:none;border:1px solid var(--cr-l);background:var(--cr-c2);color:var(--cr-t1);border-radius:9px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.cr-bt:hover{border-color:var(--cr-roxo2)}
.cr-bt:disabled{opacity:.45;cursor:not-allowed}
.cr-bt.prim{background:linear-gradient(135deg,var(--cr-roxo),#6d28d9);border-color:transparent;color:#fff}
.cr-bt.fraco{background:transparent;color:var(--cr-t2)}
.cr-bt.mini{padding:4px 9px;font-size:12px;border-radius:7px}
.cr-bt:focus-visible,.cr-seg button:focus-visible,.cr-card:focus-visible,.cr-foto:focus-visible{outline:2px solid var(--cr-tur);outline-offset:2px}
.cr-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.cr-seg{display:inline-flex;background:var(--cr-f2);border:1px solid var(--cr-l);border-radius:11px;padding:3px;flex-wrap:wrap}
.cr-seg button{appearance:none;border:0;background:transparent;color:var(--cr-t2);padding:7px 13px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.cr-seg button.on{background:var(--cr-c2);color:var(--cr-tur2);box-shadow:inset 0 0 0 1px var(--cr-tur)}
.cr-seg.peq button{padding:5px 11px;font-size:12px}
.cr-selo{margin-left:auto;font-size:12px;font-weight:700;color:var(--cr-tur2);border:1px dashed var(--cr-tur);border-radius:20px;padding:5px 12px;white-space:nowrap}
.cr-aviso{background:var(--cr-c);border-left:3px solid var(--cr-tur);border-radius:8px;padding:9px 12px;margin:8px 0;font-size:13px;color:var(--cr-t2)}
.cr-aviso.ruim{border-left-color:var(--cr-ruim);color:#fecaca}
.cr-aviso.bom{border-left-color:var(--cr-ok);color:#bbf7d0}
.cr-dica{font-size:12px;color:var(--cr-t3);margin:6px 0}
.cr-vazio{color:var(--cr-t3);font-size:13px;padding:14px 4px;margin:0}
.cr-colunas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cr-col{background:var(--cr-f2);border:1px solid var(--cr-l);border-radius:14px;padding:12px;min-height:180px;min-width:0}
.cr-col h3{font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--cr-t2);text-transform:uppercase;letter-spacing:.06em}
.cr-col h3 em{font-style:normal;background:var(--cr-c2);color:var(--cr-tur2);border-radius:10px;padding:0 8px;font-size:12px}
.cr-abas-cel{display:none}
.cr-card{display:flex;gap:10px;width:100%;text-align:left;appearance:none;border:1px solid var(--cr-l);background:var(--cr-c);color:var(--cr-t1);border-radius:12px;padding:10px;margin-bottom:9px;cursor:pointer;font:inherit}
.cr-card:hover{border-color:var(--cr-roxo2)}
.cr-card.sel{border-color:var(--cr-tur);box-shadow:0 0 0 1px var(--cr-tur)}
.cr-card.atencao{border-left:3px solid var(--cr-aviso)}
.cr-mini{flex:none;width:64px;height:64px;border-radius:9px;overflow:hidden;background:var(--cr-c2);display:flex;align-items:center;justify-content:center}
.cr-mini img{width:100%;height:100%;object-fit:cover}
.cr-mini i{font-size:10px;color:var(--cr-t3);font-style:normal;text-align:center}
.cr-card-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cr-card-txt b{font-size:14px;overflow-wrap:anywhere}
.cr-card-txt small{font-size:11.5px;overflow-wrap:anywhere}
.cr-tags{display:flex;gap:4px;flex-wrap:wrap}
.cr-tags em{font-style:normal;font-size:10.5px;font-weight:700;border-radius:5px;padding:1px 6px;background:var(--cr-c2);color:var(--cr-t2)}
.cr-tags .mk-shopee{color:#fb923c}.cr-tags .mk-amazon{color:#fcd34d}.cr-tags .mk-mercadolivre{color:#fde047}
.cr-est{display:inline-block;font-size:11.5px;font-weight:700;color:var(--cr-tur2)}
.cr-est.est-precisa_info,.cr-est.est-pausado,.cr-est.est-finalizado_pendencias{color:var(--cr-aviso)}
.cr-est.est-erro,.cr-est.est-cancelado{color:var(--cr-ruim)}
.cr-est.est-finalizado{color:var(--cr-ok)}
.cr-est.est-aguardando_referencias,.cr-est.est-na_fila{color:var(--cr-t2)}
.cr-barrinha{display:block;height:5px;border-radius:3px;background:var(--cr-c2);overflow:hidden;margin-top:3px}
.cr-barrinha i{display:block;height:100%;background:linear-gradient(90deg,var(--cr-roxo),var(--cr-tur))}
.cr-painel{background:var(--cr-f2);border:1px solid var(--cr-l);border-radius:14px;padding:16px;margin:14px 0}
.cr-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.cr-cab h3{font-size:17px}
.cr-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cr-x{appearance:none;border:0;background:transparent;color:var(--cr-t2);font-size:24px;line-height:1;cursor:pointer;padding:0 6px}
.cr-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cr-grade label,.cr-campo{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--cr-t2);min-width:0}
.cr-larga{grid-column:1/-1}
.cr-campo b{color:var(--cr-t1);font-size:13.5px;overflow-wrap:anywhere}
.cr input[type=text],.cr input[type=number],.cr textarea,.cr select{width:100%;background:var(--cr-f);color:var(--cr-t1);border:1px solid var(--cr-l);border-radius:8px;padding:8px 10px;font:inherit;font-size:13.5px}
.cr input:focus,.cr textarea:focus,.cr select:focus{outline:none;border-color:var(--cr-tur)}
.cr textarea{resize:vertical}
.cr-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cr-linha input{flex:1;min-width:180px}
.cr-pe{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:14px}
.cr-prev{margin-right:auto;font-size:13px;color:var(--cr-t2)}
.cr-prev b{color:var(--cr-tur2)}
.cr-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:12px}
.cr-resumo>div{background:var(--cr-c);border-radius:10px;padding:9px 11px;min-width:0}
.cr-resumo span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--cr-t3)}
.cr-resumo b{font-size:13px;overflow-wrap:anywhere;font-weight:600}
.cr-duvidas{background:#2a2410;border:1px solid #6b5a1c;border-radius:12px;padding:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:9px}
.cr-duvidas h4{color:var(--cr-aviso);font-size:14px}
.cr-duvidas label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--cr-t1)}
.cr-duvidas .cr-bt{align-self:flex-start}
.cr-abas{display:flex;gap:4px;border-bottom:1px solid var(--cr-l);margin-bottom:12px;overflow-x:auto}
.cr-abas button{appearance:none;border:0;background:transparent;color:var(--cr-t2);padding:8px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.cr-abas button.on{color:var(--cr-tur2);border-bottom-color:var(--cr-tur)}
.cr-grupo{margin-bottom:16px}
.cr-grupo-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:13.5px}
.cr-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.cr-foto{appearance:none;border:1px solid var(--cr-l);background:var(--cr-c);color:var(--cr-t1);border-radius:11px;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;min-width:0}
.cr-foto:hover{border-color:var(--cr-roxo2)}
.cr-foto img,.cr-foto>i{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:var(--cr-c2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--cr-t3);font-style:normal}
.cr-foto img.rasc{opacity:.45;filter:grayscale(.6)}
.cr-foto span{font-size:12px;font-weight:600}
.cr-foto em{font-style:normal;font-size:11px;color:var(--cr-tur2)}
.cr-foto.est-pendente{border-color:#7f2a2a}.cr-foto.est-pendente em{color:var(--cr-ruim)}
.cr-foto.est-gerando em,.cr-foto.est-revisando em,.cr-foto.est-corrigindo em{color:var(--cr-aviso)}
.cr-foto small{font-size:10.5px;line-height:1.25}
.cr-bloco-geral,.cr-pedidos{background:var(--cr-c);border-radius:12px;padding:12px;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.cr-alcance{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--cr-t2)}
.cr-alcance>span{font-weight:700;color:var(--cr-t3)}
.cr-cx{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;color:var(--cr-t1);cursor:pointer}
.cr-cx input{accent-color:var(--cr-tur)}
.cr-bloco-geral .cr-bt{align-self:flex-start}
.cr-ped{border-top:1px solid var(--cr-l);padding-top:8px;font-size:13px}
.cr-ped p{margin:4px 0;color:var(--cr-t2);overflow-wrap:anywhere}
.cr-ped em{font-style:normal;color:var(--cr-tur2)}
.cr-ped.est-falhou em{color:var(--cr-ruim)}.cr-ped.est-precisa_info em{color:var(--cr-aviso)}
.cr-ped .cr-perg{color:var(--cr-aviso)}
.cr-ped .cr-res{font-size:12px}
.cr-texto{background:var(--cr-c);border-radius:12px;padding:12px;margin-bottom:10px}
.cr-texto h4{font-size:14px;margin-bottom:8px;color:var(--cr-tur2)}
.cr-tx span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--cr-t3);margin-top:6px}
.cr-tx p{margin:2px 0}
.cr pre{white-space:pre-wrap;word-break:break-word;background:var(--cr-f);border-radius:8px;padding:9px;font-size:12px;margin:4px 0;color:var(--cr-t2);font-family:var(--fc,ui-monospace,monospace)}
.cr details{border-top:1px solid var(--cr-l);padding:6px 0}
.cr summary{cursor:pointer;font-size:13px;font-weight:600}
.cr-refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.cr-ref{background:var(--cr-c);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:0}
.cr-ref img,.cr-ref>i{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:var(--cr-c2);display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--cr-t3)}
.cr-ref b{font-size:11.5px;overflow-wrap:anywhere}
.cr-anexar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.cr-hist{list-style:none;margin:0;padding:0;font-size:13px}
.cr-hist li{border-bottom:1px solid var(--cr-l);padding:6px 0;color:var(--cr-t2);overflow-wrap:anywhere}
.cr-modal{position:fixed;inset:0;background:rgba(4,8,20,.78);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.cr-modal-in{background:var(--cr-f2);border:1px solid var(--cr-l);border-radius:16px;width:min(1180px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:16px}
.cr-modal-corpo{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.cr-grande{width:100%;border-radius:10px;display:block;background:#fff}
.cr-ad{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cr-ad figure{margin:0}.cr-ad img{width:100%;border-radius:8px;display:block}
.cr-ad figcaption{font-size:12px;color:var(--cr-t2);text-align:center;margin-top:4px}
.cr-modal-lado{display:flex;flex-direction:column;gap:8px;min-width:0}
.cr-regra{margin:0;font-size:13px;font-weight:700;color:var(--cr-tur2);background:rgba(45,212,191,.08);border:1px solid rgba(45,212,191,.35);border-radius:8px;padding:8px 10px}
.cr-modal-lado .cr-bt.prim{align-self:flex-start}
.cr-acoes-foto{display:flex;gap:8px;flex-wrap:wrap}
.cr-versoes{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
.cr-ver{appearance:none;display:grid;grid-template-columns:44px 1fr;gap:2px 8px;align-items:center;text-align:left;background:var(--cr-c);border:1px solid var(--cr-l);border-radius:9px;padding:5px;color:var(--cr-t1);font:inherit;font-size:12px;cursor:pointer}
.cr-ver img{width:44px;height:44px;object-fit:cover;border-radius:6px;grid-row:span 2}
.cr-ver small{grid-column:2}
.cr-ver.atual{border-color:var(--cr-tur)}
.cr-ver.reprov span{color:var(--cr-ruim)}
.cr-ver.sel{box-shadow:0 0 0 1px var(--cr-roxo2)}
@media (max-width:900px){
  .cr{padding:14px;border-radius:12px}
  .cr-abas-cel{display:flex;gap:4px;margin-bottom:10px;background:var(--cr-f2);border:1px solid var(--cr-l);border-radius:11px;padding:3px}
  .cr-abas-cel button{flex:1;appearance:none;border:0;background:transparent;color:var(--cr-t2);padding:8px 4px;border-radius:8px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
  .cr-abas-cel button.on{background:var(--cr-c2);color:var(--cr-tur2)}
  .cr-abas-cel em{font-style:normal;opacity:.7}
  .cr-colunas{grid-template-columns:1fr}
  .cr-col{display:none;min-height:0}
  .cr-col.on{display:block}
  .cr-col h3{display:none}
  .cr-grade{grid-template-columns:1fr}
  .cr-selo{margin-left:0}
  .cr-chip{width:100%;flex-wrap:wrap}
  .cr-chip>div{flex:1 1 calc(100% - 30px)}
  .cr-barra .cr-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .cr-barra .cr-seg button{padding:7px 4px;font-size:12px}
  .cr-topo h2{font-size:20px}
  .cr-modal{padding:0;align-items:stretch}
  .cr-modal-in{border-radius:0;max-height:100vh;height:100vh}
  .cr-modal-corpo{grid-template-columns:1fr}
  .cr-fotos{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}

/* 28/09/2026: área de anexo (clicar, colar com Ctrl+V/⌘+V, arrastar) */
.cr-zona{border:1.5px dashed var(--cr-l);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:7px;background:var(--cr-f);font-size:13px;color:var(--cr-t2);margin-top:4px}
.cr-zona>b{color:var(--cr-t1);font-size:13.5px}
.cr-zona.sobre{border-color:var(--cr-tur);background:rgba(45,212,191,.07)}
.cr-zona .cr-bt{margin-right:2px}
.cr-grade .cr-zona label.cr-bt,.cr-zona label.cr-bt{display:inline-flex;flex-direction:row;width:auto;align-self:auto;color:#fff;font-size:12px;gap:0;vertical-align:middle}
.cr kbd{font:inherit;font-size:11.5px;font-weight:700;background:var(--cr-c2);border:1px solid var(--cr-l);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--cr-t1)}
.cr-pend{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:4px}
.cr-pend-it{position:relative;background:var(--cr-c);border-radius:9px;padding:5px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cr-pend-it img,.cr-pend-it>i{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:var(--cr-c2);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;color:var(--cr-t3)}
.cr-pend-it small{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-pend-it .cr-x{position:absolute;top:2px;right:2px;font-size:18px;background:rgba(14,20,38,.85);border-radius:50%;width:24px;height:24px;padding:0;line-height:22px}
.cr-refs+.cr-zona{margin-top:12px}

/* 28/09/2026 - Gestão › JARVIS (os robôs do Mac mini). Usa só as variáveis do
   painel (--sup, --linha, --t1…), que já mudam no modo escuro. */
.jv{display:flex;flex-direction:column;gap:14px;max-width:1200px}
.jv-vazio{color:var(--t3);padding:12px 0}
.jv-topo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:stretch}
.jv-sinal{background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:10px 12px;display:grid;grid-template-columns:12px 1fr;column-gap:8px;align-items:center;min-width:0}
.jv-sinal i{width:10px;height:10px;border-radius:50%;background:var(--t3);grid-row:span 2}
.jv-sinal.on i{background:var(--s3)}
.jv-sinal.off i{background:var(--neg)}
.jv-sinal.rodando i{background:var(--s1);animation:jvPisca 1.2s ease-in-out infinite}
.jv-sinal b{font-size:13px;color:var(--t1)}
.jv-sinal small{font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes jvPisca{50%{opacity:.35}}
.jv-acoes{display:flex;flex-direction:column;gap:6px;justify-content:center}
.jv .botao:not(.prim){background:transparent;color:var(--dest);box-shadow:inset 0 0 0 1px var(--dest)}
.jv .botao[disabled]{opacity:.5;cursor:default}
.jv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.jv-card{background:var(--sup);border:1px solid var(--linha);border-left:4px solid var(--t3);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.jv-card header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.jv-card h3{margin:0;font-size:15px;color:var(--t1)}
.jv-st{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:10px;background:var(--sup2);color:var(--t2);white-space:nowrap}
.jv-ok{border-left-color:var(--s3)}      .jv-ok .jv-st{color:var(--s3)}
.jv-rodando,.jv-na_fila{border-left-color:var(--s1)} .jv-rodando .jv-st,.jv-na_fila .jv-st{color:var(--s1)}
.jv-erro-card,.jv-card.jv-erro{border-left-color:var(--neg)} .jv-card.jv-erro .jv-st{color:var(--neg)}
.jv-precisa_login{border-left-color:var(--s7)} .jv-precisa_login .jv-st{color:var(--s7)}
.jv-pausado{border-left-color:var(--t3)}
.jv-lin{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.jv-lin span{color:var(--t3)}
.jv-lin b{color:var(--t1);font-weight:600;text-align:right}
.jv-lin em{color:var(--t3);font-style:normal;font-weight:400}
.jv-res{margin:0;font-size:12px;color:var(--t2)}
p.jv-erro{margin:0;font-size:12px;color:var(--neg);background:var(--sup2);border-radius:4px;padding:6px 8px}
p.jv-erro.login{color:var(--s7)}
.jv-espera{margin:0;font-size:11px;color:var(--s1)}
.jv-card footer{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.jv-recado{margin:0;font-size:13px;color:var(--s3)}
.jv-recado.ruim{color:var(--neg)}
.jv-hist{background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:12px 14px;overflow-x:auto}
.jv-hist h3{margin:0 0 8px;font-size:14px;color:var(--t1)}
.jv-dobra>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;user-select:none}
.jv-dobra>summary::-webkit-details-marker{display:none}
.jv-dobra>summary::before{content:'▸';color:var(--t3);font-size:12px;transition:transform .15s}
.jv-dobra[open]>summary::before{transform:rotate(90deg)}
.jv-dobra>summary>h3,.jv-dobra>summary>h4{display:inline;margin:0}
.jv-dobra[open]>summary{margin-bottom:8px}
.jv-ext .jv-dobra{margin-top:16px}
.jv-hist table{width:100%;border-collapse:collapse;font-size:12px}
.jv-hist th{text-align:left;color:var(--t3);font-weight:600;padding:4px 8px;border-bottom:1px solid var(--linha)}
.jv-hist td{padding:5px 8px;border-bottom:1px solid var(--linha2);color:var(--t2);vertical-align:top}
.jv-hist td:first-child{white-space:nowrap}
.jv-hist tr.jv-erro .jv-st{color:var(--neg)} .jv-hist tr.jv-ok .jv-st{color:var(--s3)} .jv-hist tr.jv-precisa_login .jv-st{color:var(--s7)}
@media (max-width:760px){
  .jv-topo{grid-template-columns:1fr}
  .jv-acoes{flex-direction:row}
  .jv-cards{grid-template-columns:1fr}
}

/* 28/09/2026 - JARVIS › card do Chat Shopee: o que a IA respondeu */
.jvsh-res{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 2px}
.jvsh-res small,.jvsh-ok{color:var(--t3);font-size:12px}
.jvsh-res a.botao,.jvsh-it footer a{text-decoration:none}
.jvsh-fundo{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow:auto}
.jvsh-caixa{background:var(--sup);color:var(--t1);border:1px solid var(--linha);border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.3);width:100%;max-width:820px;padding:16px 18px}
.jvsh-caixa>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.jvsh-caixa>header h3{margin:0;font-size:16px;color:var(--t1)}
.jvsh-filtros{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.jvsh-lista{display:flex;flex-direction:column;gap:10px}
.jvsh-it{background:var(--sup2);border:1px solid var(--linha);border-left:4px solid var(--t3);border-radius:6px;padding:10px 12px}
.jvsh-it>header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.jvsh-it>header b{color:var(--t1)}
.jvsh-it>header small{color:var(--t3);margin-left:auto}
.jvsh-it .jv-st{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--linha2);color:var(--t2)}
.jvsh-enviada{border-left-color:var(--s3)}
.jvsh-aprovada,.jvsh-enviando{border-left-color:var(--s1)}
.jvsh-rascunho{border-left-color:var(--s7)}
.jvsh-rascunho .jv-st{color:var(--s7)}
.jvsh-erro,.jvsh-cancelada{border-left-color:var(--neg)}
.jvsh-q,.jvsh-a,.jvsh-p{display:grid;grid-template-columns:150px 1fr;gap:8px;margin:4px 0}
.jvsh-q span,.jvsh-a span,.jvsh-p span{font-size:12px;color:var(--t3);padding-top:2px}
.jvsh-q p,.jvsh-a p,.jvsh-p p{margin:0;white-space:pre-wrap;word-break:break-word;color:var(--t2)}
.jvsh-a p{color:var(--t1)}
.jvsh-p p{font-style:italic}
.jvsh-it footer{margin-top:8px}
@media (max-width:600px){.jvsh-q,.jvsh-a,.jvsh-p{grid-template-columns:1fr;gap:2px}.jvsh-fundo{padding:12px}}
.jvsh-caixa .botao:not(.prim){background:transparent;color:var(--dest);box-shadow:inset 0 0 0 1px var(--dest)}
/* 28/09/2026 - JARVIS › TikTok Shop (cores do painel: claro e escuro) */
.jt{padding:14px 16px;border:1px solid var(--linha);border-radius:6px;background:var(--sup);color:var(--t1)}
.jt h3{margin:0 0 12px;font-size:15px;color:var(--t1)}
.jt h4{margin:18px 0 8px;font-size:14px;color:var(--t1)}
.jt-topo{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:stretch}
.jt-topo>div{padding:10px 12px;border-radius:6px;background:var(--sup2);border:1px solid var(--linha2);display:flex;flex-direction:column;gap:2px}
.jt-topo small{color:var(--t3);font-size:12px}
.jt-topo b{font-size:20px;color:var(--t1)}
.jt-topo span{font-size:12px;color:var(--t2)}
.jt-topo .jt-bts{background:none;border:0;justify-content:center}
.jt-on{color:var(--s3)!important;font-size:15px!important}.jt-off{color:var(--s7)!important;font-size:15px!important}
.jt-tab{width:100%;border-collapse:collapse;font-size:13px}
.jt-tab th,.jt-tab td{padding:6px 8px;border-bottom:1px solid var(--linha);text-align:left;vertical-align:top;color:var(--t2)}
.jt-tab th{color:var(--t3);font-weight:600}
.jt-tab a{color:var(--dest)}
.jt-tab tr.jt-err td{background:color-mix(in srgb,var(--neg) 10%,transparent)}
.jt-bts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.jt-chip{display:inline-block;padding:2px 8px;margin:2px;border-radius:99px;font-size:12px;background:color-mix(in srgb,var(--s1) 15%,transparent);color:var(--t1)}
.jt-chip.recusar{background:color-mix(in srgb,var(--neg) 15%,transparent)}
.jt-chip a{color:var(--dest)}
.jt-det{margin-top:10px;color:var(--t2)}
.jt-det summary{cursor:pointer;font-weight:600;color:var(--t1)}
@media (max-width:640px){.jt-tab th:nth-child(5),.jt-tab td:nth-child(5){display:none}.jt{overflow-x:auto}}
/* 29/09/2026 JARVIS › PPPI (card de denúncias) */
.jp-abre{cursor:pointer}
.jp-abre:hover>div{outline:1px solid var(--linha)}
.jp-cat{margin:10px 0;padding:10px;border:1px solid var(--linha);border-radius:6px;background:var(--sup)}
.jp-cat-cab{display:flex;flex-direction:column;gap:3px;margin-bottom:6px;font-size:13px;color:var(--t1)}
.jp-hist{margin:12px 0;padding:10px;border-radius:6px;background:var(--sup2);border:1px solid var(--linha2)}

/* 29/09/2026 - JARVIS: card abre e mostra o detalhe do robô como extensão */
.jv-card[data-jv-card]{cursor:pointer}
.jv-card[data-jv-card]>header:hover h3{color:var(--dest)}
.jv-card>header:focus-visible{outline:2px solid var(--dest);outline-offset:2px;border-radius:4px}
.jv-seta{display:inline-block;width:1em;color:var(--t3)}
.jv-card.jv-aberto{outline:2px solid var(--dest);outline-offset:-1px}
.jv-pista{margin:0;font-size:12px;color:var(--s7)}
.jv-ext{cursor:auto;margin-top:8px;padding-top:10px;border-top:1px solid var(--linha);min-width:0;overflow-x:auto}
.jv-ext .jt{padding:0;border:0;background:none;overflow:visible}
.jv-ext .jt>h3{display:none}
.jv-ext h4{margin:16px 0 8px;font-size:14px;color:var(--t1)}
.jv-ext>h4:first-child,.jv-ext .jt+h4{margin-top:4px}
.jv-ext .jt+h4{margin-top:18px}
.jv-ext .jp-cat a{color:var(--dest)}

/* 29/09/2026 - JARVIS: detalhe do robô num painel embaixo dos cards */
.jv-painel.jv-ext{margin-top:12px;padding:14px 16px;background:var(--sup);border:1px solid var(--dest);border-radius:6px}
.jv-painel-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.jv-painel-cab h3{margin:0;font-size:15px;color:var(--t1)}
.jv-painel-bt{display:flex;gap:8px;flex-wrap:wrap}

/* 29/09/2026 - Gestão › HUNTER: pesquisa de produtos da Shopee (reusa .jv-*) */
.hu{max-width:none}
.hu-topo{grid-template-columns:repeat(4,minmax(0,1fr))}
.hu-barra{display:block;height:6px;border-radius:3px;background:var(--linha2);overflow:hidden;margin-top:4px}
.hu-barra span{display:block;height:100%;background:var(--s1)}
.hu-ctl{background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.hu-nova{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hu-nova label{font-size:13px;font-weight:600;color:var(--t1)}
.hu input[type=search],.hu input[type=text]{font-family:var(--fn);font-size:13px;color:var(--t1);background:var(--sup2);border:1px solid var(--linha);border-radius:3px;padding:6px 8px;min-width:0}
.hu-nova input{width:260px;max-width:100%}
.hu-bts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hu .botao.hu-perigo:not(.prim){color:var(--neg);box-shadow:inset 0 0 0 1px var(--neg)}
.hu-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--t2);cursor:pointer;white-space:nowrap}
.hu-filtros{background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.hu-faixa{display:flex;align-items:center;gap:6px}
.hu-faixa span,.hu-cls span{font-size:12px;color:var(--t3);font-weight:600}
.hu-faixa input{width:74px}
.hu-cls{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.hu-busca{width:220px}
.hu-multi{position:relative}
.hu-multi summary{cursor:pointer;font-size:13px;color:var(--t2);background:var(--sup2);border:1px solid var(--linha);border-radius:3px;padding:6px 10px;list-style:none;white-space:nowrap}
.hu-multi summary::-webkit-details-marker{display:none}
.hu-multi summary b{color:var(--t1);font-weight:600}
.hu-multi-cx{position:absolute;z-index:50;top:calc(100% + 4px);left:0;width:300px;max-width:calc(100vw - 32px);background:var(--sup);border:1px solid var(--linha);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:8px;display:flex;flex-direction:column;gap:6px}
.hu-multi-cx input[type=search]{width:100%}
.hu-multi-lista{max-height:260px;overflow:auto;display:flex;flex-direction:column}
.hu-multi-lista label{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--t1);padding:3px 2px;cursor:pointer}
.hu-multi-lista label[hidden]{display:none}
.hu-multi-lista small{color:var(--t3);font-size:11px;margin-left:auto;white-space:nowrap}
.hu-limpa[hidden]{display:none}
.hu-limpa{align-self:flex-end;border:0;background:none;color:var(--dest);font-size:12px;cursor:pointer;padding:0}
.hu-info{margin:0;font-size:12px;color:var(--t3);min-height:16px}
.hu-resumo{margin:0 0 6px;font-size:13px;color:var(--t2)}
.hu-resumo b{color:var(--t1)}
.hu-tab td.n,.hu-tab th:nth-child(n+3):nth-child(-n+8){text-align:right}
.hu-tab td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.hu-tab td{vertical-align:middle}
.hu-img{width:52px}
.hu-img img{width:44px;height:44px;object-fit:cover;border-radius:4px;display:block;background:var(--sup2)}
.hu-tit{min-width:240px;max-width:420px}
.hu-tit small{display:block;color:var(--t3);font-size:11px;margin-top:2px}
.hu-abre{border:0;background:none;padding:0;text-align:left;color:var(--t1);font:inherit;font-weight:600;cursor:pointer;line-height:1.35}
.hu-abre:hover{color:var(--dest);text-decoration:underline}
.hu-ord{border:0;background:none;padding:0;font:inherit;color:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.hu-ord.on{color:var(--t1)}
.hu-quando{white-space:nowrap}
.hu a{color:var(--dest)}
.hu a:hover{color:var(--t1)}
.hu-caixa a{color:var(--dest)}
.hu-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--sup2);color:var(--s3);white-space:nowrap}
.hu-tag.thy{color:var(--s2)}
.hu-tag.t3d{color:var(--s4)}
tr.hu-excl td{opacity:.6}
.hu-pag{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;font-size:13px;color:var(--t2)}
.hu-caixa{max-width:1100px}
.hu-hist-topo{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.hu-hist-topo img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.hu-hist-topo p{margin:0;font-size:13px;color:var(--t2)}
.hu-fontes{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;margin:0;font-size:11px}
.hu-fontes dt{color:var(--t3)}
.hu-fontes dd{margin:0;color:var(--t2);word-break:break-word}
@media (max-width:760px){
  .hu-topo{grid-template-columns:1fr}
  .hu-nova input,.hu-busca{width:100%}
  .hu-nova{width:100%}
}
/* 02/10/2026 - card Radar Shopee (JARVIS) */
.rs-num{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 2px}
.rs-num>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--linha);border-radius:8px}
.rs-num b{font-size:22px;line-height:1.1;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.rs-num span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.rs-nota{margin:0 0 8px;font-size:13px;color:var(--t3)}
.rs-tabw{overflow-x:auto}
.rs-tab th.rs-n,.rs-tab td.rs-n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-tab td.rs-n small,.rs-tab td.rs-nome small{display:block;color:var(--t3);font-size:11px}
.rs-tab td.rs-nome{width:62%;min-width:220px;white-space:normal;overflow-wrap:anywhere}
.rs-tab td.rs-nome a{white-space:normal;display:inline}
.rs-tab td.rs-nome a{text-decoration:none}
.rs-tab td.rs-nome a:hover{text-decoration:underline}
.rs-tab td b{color:var(--t1)}
.rs-ord{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--t3)}
.rs-ord i{font-style:normal;font-size:10px;opacity:.6}
.rs-ord.on{color:var(--t1)}
.rs-ord.on i{opacity:1;color:var(--dest)}
.rs-ord:focus-visible{outline:2px solid var(--dest);outline-offset:2px;border-radius:3px}
.rs-mais{display:flex;align-items:center;gap:10px;margin:10px 0 0}
.rs-mais small{color:var(--t3)}
/* 02/10/2026 - card Shopping de Preços (JARVIS); usa as classes rs-* do Radar Shopee */
.sdp-tab td.rs-nome{width:52%}
.sdp-prod{display:flex;gap:10px;align-items:flex-start}
.sdp-foto{flex:0 0 40px;width:40px;height:40px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--linha)}
.sdp-tag{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--linha);border-radius:999px;font-size:10px;line-height:16px;color:var(--t3);vertical-align:1px}
.sdp-ord2{margin:-2px 0 8px}
.sdp-ord2 .rs-ord{font-weight:500}
/* 02/10/2026 - card Shopping de Preços: blocos (bloco parcial e em branco) */
.sdp-tab td.rs-n small.sdp-parcial{font-style:italic}
.sdp-tab td.sdp-vazio{background:transparent}
/* 02/10/2026 - card Shopping de Preços: copiar título e preço */
.sdp-tit{display:flex;align-items:flex-start;gap:2px}
/* título em até 2 linhas; o texto inteiro fica no title e é o que o botão copia */
.sdp-tab td.rs-nome .sdp-tt{flex:0 1 auto;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  overflow-wrap:anywhere;padding-top:4px}
.sdp-tit .sdp-cp,.sdp-tit .sdp-fb{flex:0 0 auto}
.sdp-tit .sdp-fb{padding-top:6px}
.sdp-tags{margin:1px 0 0;margin-left:-6px}
.sdp-preco{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.sdp-pg{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.sdp-preco{margin:2px 0 1px}
.sdp-pv{font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.sdp-pv em{font-style:normal;font-weight:400;color:var(--t3);font-size:12px}
.sdp-pv.sdp-ind{font-weight:400;color:var(--t3)}
.sdp-tab td.rs-nome .sdp-preco small.sdp-pd{display:inline;color:var(--t3);font-size:11px}
.sdp-cp{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;padding:0;margin:0;
  border:1px solid transparent;border-radius:6px;background:transparent;color:var(--t3);cursor:pointer}
.sdp-cp:hover:not(:disabled){color:var(--t1);background:var(--sup2);border-color:var(--linha)}
.sdp-cp:focus-visible{outline:2px solid var(--dest);outline-offset:1px}
.sdp-cp:disabled{opacity:.35;cursor:not-allowed}
.sdp-cp.ok{color:var(--s3)}
.sdp-cp.erro{color:var(--neg)}
.sdp-fb{font-size:11px;font-weight:600}
.sdp-fb:empty{display:none}
.sdp-fb.ok{color:var(--s3)}
.sdp-fb.erro{color:var(--neg)}
@media (pointer:coarse){.sdp-cp{width:40px;height:40px}.sdp-cp svg{width:16px;height:16px}}


/* 02/10/2026, pedido do Roderjan: o olho passa a esconder também a CONTA, o
   SKU, a FOTO do produto, o vencedor/vendedor do catálogo e o nome da campanha,
   em todas as abas (Métricas, Estoque, Catálogo, Campanhas, Cadastro de SKUs...).
   Sem :hover que revele -- no celular o toque contaria como hover. */
html.privado .olho-priv,
html.privado td.olho-priv *,
html.privado img:not([alt^="QR"]),
html.privado .capa,
html.privado .cv,
html.privado .vg-dono,
html.privado .fr-sku,
html.privado .cxsku,
html.privado .sku-op,
html.privado .sku-opt{filter:blur(6px)!important;-webkit-user-select:none;user-select:none}
html.privado td.olho-priv *{filter:none!important}
/* 03/10/2026 - card Shopping de Preços: seletor de categorias, ordem e período */
.sdp-ctl{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 14px;margin:2px 0 10px}
.sdp-drop{position:relative}
.sdp-drop-bt{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid var(--linha);border-radius:8px;
  background:var(--sup);color:var(--t2);font:inherit;font-size:13px;cursor:pointer}
.sdp-drop-bt b{color:var(--t1);font-weight:600}
.sdp-drop-bt em{font-style:normal;color:var(--t3)}
.sdp-drop-bt i{font-style:normal;color:var(--t3)}
.sdp-drop-bt:focus-visible,.sdp-seg:focus-visible,.sdp-pz:focus-visible{outline:2px solid var(--dest);outline-offset:1px}
.sdp-drop.aberto .sdp-drop-bt{border-color:var(--dest)}
.sdp-drop-pn{position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:min(560px,calc(100vw - 32px));border:1px solid var(--linha);
  border-radius:10px;background:var(--sup);box-shadow:0 10px 28px rgba(0,0,0,.28);padding:8px}
.sdp-drop-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:2px 2px 8px;border-bottom:1px solid var(--linha2)}
.sdp-drop-top small{flex:1 1 100%;color:var(--t3);font-size:11px}
.sdp-drop-lista{max-height:min(360px,60vh);overflow-y:auto;padding-top:4px}
.sdp-drop-it{display:flex;align-items:center;gap:8px;padding:4px 2px;border-bottom:1px solid var(--linha2)}
.sdp-drop-it:last-child{border-bottom:0}
.sdp-drop-it label{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;cursor:pointer;color:var(--t1);font-size:13px;padding:4px 0}
.sdp-drop-it label input{width:16px;height:16px;margin:0;accent-color:var(--dest)}
.sdp-drop-it label small{flex:1 1 100%;padding-left:22px;color:var(--t3);font-size:11px}
.sdp-drop-it label small b{color:var(--neg);font-weight:600}
.sdp-drop-it.pz label span{color:var(--t3)}
.sdp-pz{flex:0 0 auto;min-height:30px;padding:4px 8px;border:1px solid var(--linha);border-radius:6px;background:transparent;color:var(--t2);
  font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.sdp-pz:hover:not(:disabled){border-color:var(--neg);color:var(--neg)}
.sdp-pz.on{border-color:var(--s3);color:var(--s3)}
.sdp-pz:disabled{opacity:.5;cursor:wait}
.sdp-segs{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sdp-segs span{color:var(--t3);font-size:12px;margin-right:2px}
.sdp-seg{min-height:34px;padding:6px 10px;border:1px solid var(--linha);border-radius:8px;background:transparent;color:var(--t2);font:inherit;font-size:13px;cursor:pointer}
.sdp-seg.on{border-color:var(--dest);color:var(--t1);background:var(--sup2);font-weight:600}
@media (pointer:coarse){.sdp-drop-bt,.sdp-seg{min-height:40px}.sdp-pz{min-height:40px;padding:6px 10px}.sdp-drop-it label input{width:20px;height:20px}}
/* 03/10/2026 ~03h - card Shopping de Preços: árvore de categorias com "Não mapear" em qualquer nível */
.sdp-seta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid transparent;
  border-radius:6px;background:transparent;color:var(--t2);font:inherit;font-size:16px;line-height:1;cursor:pointer}
.sdp-seta:hover{color:var(--t1);border-color:var(--linha)}
.sdp-seta:focus-visible{outline:2px solid var(--dest);outline-offset:1px}
.sdp-seta.vazia{cursor:default}
.sdp-drop-sub{padding-left:calc(var(--n,1) * 18px);background:var(--sup2)}
.sdp-drop-sub>small{display:block;padding:6px 4px;color:var(--t3);font-size:11px}
.sdp-drop-nm{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;color:var(--t1);font-size:13px;padding:4px 0}
.sdp-drop-nm small{flex:1 1 100%;color:var(--t3);font-size:11px}
.sdp-drop-it small b{color:var(--neg);font-weight:600}
.sdp-drop-it.pz>.sdp-drop-nm>span,.sdp-drop-it.pz>label>span{color:var(--t3);text-decoration:line-through;text-decoration-color:var(--neg)}
.sdp-pz-her{flex:0 0 auto;font-size:11px;color:var(--neg);white-space:nowrap}
.sdp-pz-lista{margin:8px 0 4px;padding:6px 8px;border:1px solid var(--linha);border-left:3px solid var(--neg);border-radius:8px;font-size:12px}
.sdp-pz-lista>b{display:block;margin-bottom:4px;color:var(--t1)}
.sdp-pz-lista>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0;color:var(--t2)}
.sdp-pz-lista>div span{min-width:0;overflow-wrap:anywhere}
@media (pointer:coarse){.sdp-seta{width:40px;height:40px;font-size:14px}}
.sdp-cat-filtro{display:flex;flex:1 1 100%;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-left:3px solid var(--dest);background:var(--sup2);color:var(--t2);font-size:12px}
.sdp-cat-filtro b{color:var(--t1);font-weight:600}
.sdp-cat-filtro button{flex:0 0 auto;border:0;background:none;color:var(--dest);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.sdp-cat-link{display:block;max-width:100%;overflow-wrap:anywhere;padding:0;border:0;background:none;color:var(--dest);font:inherit;font-size:11px;text-align:left;text-decoration:underline;text-decoration-style:dotted;cursor:pointer}
.sdp-cat-link:hover{text-decoration-style:solid}
.sdp-cat-link:focus-visible,.sdp-cat-filtro button:focus-visible{outline:2px solid var(--dest);outline-offset:2px}
.fin-lote{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:12px 0 2px;padding:10px 12px;border-top:1px solid var(--linha2);color:var(--t2);font-size:13px}
.fin-lote-bt{min-height:38px;padding:8px 14px;border:0;border-radius:6px;background:var(--s3);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.fin-lote-bt:hover{filter:brightness(1.08)}
.fin-lote-bt:disabled{opacity:.55;cursor:wait}
.fin-check{width:34px;text-align:center}
.fin-check input{width:17px;height:17px;accent-color:var(--dest);cursor:pointer}
.fin-check input:disabled{cursor:not-allowed;opacity:.4}
.fin-cell-edit{max-width:100%;padding:2px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--t3);cursor:text;overflow-wrap:anywhere}
.fin-cell-edit:hover{text-decoration-color:var(--dest);color:var(--dest)}
.fin-cell-edit:focus-visible,.fin-inline-editor :focus-visible{outline:2px solid var(--dest);outline-offset:2px}
.fin-inline-editor{display:inline-flex;align-items:center;gap:4px;min-width:120px}
.fin-inline-editor input,.fin-inline-editor select{min-width:90px;max-width:220px;padding:6px 7px;border:1px solid var(--linha);border-radius:4px;background:var(--sup);color:var(--t1);font:inherit}
.fin-inline-save,.fin-inline-cancel{width:28px;height:28px;border:1px solid var(--linha);border-radius:4px;background:var(--sup2);color:var(--t1);font:inherit;cursor:pointer}
.fin-inline-save{color:var(--s3);font-weight:700}
.fin-inline-cancel{color:var(--neg)}
.fin-ref-modal{width:min(820px,calc(100vw - 28px));max-width:none;max-height:min(82vh,760px);padding:20px;border:1px solid var(--linha);border-radius:8px;background:var(--sup);color:var(--t1);box-shadow:0 18px 48px rgba(0,0,0,.35)}
.fin-ref-modal::backdrop{background:rgba(0,0,0,.58)}
.fin-ref-modal h2{margin:0 0 8px;font-size:18px}
.fin-ref-modal p{margin:0 0 12px;color:var(--t2);font-size:13px}
.fin-ref-tabela{max-height:48vh;overflow:auto;border:1px solid var(--linha);border-radius:6px}
.fin-ref-tabela table{width:100%;border-collapse:collapse;font-size:12px}
.fin-ref-tabela th,.fin-ref-tabela td{padding:8px 9px;border-bottom:1px solid var(--linha2);text-align:left;white-space:nowrap}
.fin-ref-tabela th{position:sticky;top:0;background:var(--sup2);color:var(--t2);font-size:11px}
.fin-ref-tabela tr:last-child td{border-bottom:0}
.fin-ref-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:16px}
.fin-ref-acoes button{min-height:38px}
.fin-ref-modal .secundario{background:transparent;color:var(--t1);border:1px solid var(--linha)}
.fin-cal-d{position:relative;z-index:0}
.fin-cal-d.tem-itens{cursor:help}
.fin-cal-d:hover,.fin-cal-d:focus{z-index:10}
.fin-cal-tooltip{display:none;position:absolute;top:calc(100% + 5px);left:0;width:min(340px,78vw);max-height:330px;overflow:auto;padding:11px;border:1px solid var(--linha);border-radius:7px;background:var(--sup);box-shadow:0 12px 32px rgba(0,0,0,.32);color:var(--t1);text-align:left;white-space:normal}
.fin-cal-d:nth-child(7n+5) .fin-cal-tooltip,.fin-cal-d:nth-child(7n+6) .fin-cal-tooltip,.fin-cal-d:nth-child(7n+7) .fin-cal-tooltip{left:auto;right:0}
.fin-cal-d:hover .fin-cal-tooltip,.fin-cal-d:focus .fin-cal-tooltip{display:block}
.fin-cal-tooltip> b{display:block;margin-bottom:7px;font-size:13px}
.fin-cal-tip-item{display:grid;grid-template-columns:auto 1fr;gap:3px 7px;padding:7px 0;border-top:1px solid var(--linha2);font-size:11px}
.fin-cal-tip-item>span:nth-of-type(2),.fin-cal-tip-item>small{grid-column:1/-1;color:var(--t2)}
.fin-cal-status{display:inline-block;padding:2px 5px;border-radius:3px;font-size:10px;font-weight:700}
.fin-cal-status.pago{background:color-mix(in srgb,var(--s3) 18%,var(--sup));color:var(--s3)}
.fin-cal-status.aberto{background:color-mix(in srgb,var(--s2) 20%,var(--sup));color:var(--s2)}
.fin-cal-status.atrasado{background:color-mix(in srgb,var(--neg) 20%,var(--sup));color:var(--neg)}
.fin-cal-status.confirmar{background:color-mix(in srgb,var(--dest) 18%,var(--sup));color:var(--dest)}
@media(max-width:620px){.fin-lote{align-items:stretch;flex-direction:column}.fin-lote-bt{width:100%}.fin-ref-modal{padding:14px}.fin-ref-acoes{display:grid;grid-template-columns:1fr}.fin-ref-acoes button{width:100%}.fin-ref-tabela th,.fin-ref-tabela td{padding:7px}.fin-cal-tooltip{position:fixed;top:50%;left:50%!important;right:auto!important;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 28px));max-height:65vh}}
/* 08/10/2026 - JARVIS: botão "Copiar erro" (jvCpBt; reaproveita o visual do .sdp-cp) */
p.jv-erro.jv-cp-l{display:flex;align-items:flex-start;gap:6px}
p.jv-erro.jv-cp-l>span:first-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.jv-cp-w{display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;vertical-align:middle;margin-left:4px;font-weight:600}
p.jv-erro .jv-cp-w{margin:-5px -4px -5px 0}
.jv-cp{color:inherit}
.jv-cp-fb{max-width:9em;line-height:1.2}
.jv-cp.ok,.jv-cp-fb.ok{color:var(--s3)}
.jv-cp.erro,.jv-cp-fb.erro{color:var(--neg)}

/* 08/10/2026 — Shopping de Preços: filtro "Anúncios com até N dias" (mesmo desenho dos botões de Ordenar/Período) */
.sdp-idade label{color:var(--t3);font-size:12px;margin-right:2px}
.sdp-idade-in{width:64px;min-height:34px;padding:6px 8px;border:1px solid var(--linha);border-radius:8px;background:transparent;color:var(--t1);font:inherit;font-size:13px;text-align:center;font-variant-numeric:tabular-nums}
.sdp-idade-in::placeholder{color:var(--t3)}
.sdp-idade-in:focus-visible{outline:2px solid var(--dest);outline-offset:1px}
.sdp-idade.on .sdp-idade-in{border-color:var(--dest);background:var(--sup2);font-weight:600}
.sdp-idade-in.erro,.sdp-idade.on .sdp-idade-in.erro{border-color:var(--neg)}
.sdp-idade-x{padding:6px 9px;line-height:1}
.sdp-idade .sdp-fb{flex-basis:100%;font-weight:500}
.sdp-aviso{border-left:3px solid var(--dest);padding-left:8px}
@media (pointer:coarse){.sdp-idade-in{min-height:40px;font-size:16px}}

/* ================= Cadastro de SKUs: arquivar em lote (08/10/2026) =================
   A caixinha de selecao, a barra "N selecionados", a tag vermelha de Full
   arquivado nas abas das contas e a lista que ela abre. O vermelho e o --neg,
   o mesmo dos outros alertas do painel. */
th.cel-sel,td.cel-sel{width:34px;padding-left:10px;padding-right:4px;text-align:center}
.sel-rot{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;margin:-6px 0;cursor:pointer}
.sel-rot input{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--dest)}
.sel-barra{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 10px;padding:8px 10px;border:1px solid var(--linha);border-radius:3px;background:var(--sup2)}
.sel-n{font-family:var(--fn);font-size:13px;font-variant-numeric:tabular-nums;color:var(--t2);min-width:120px}
.sel-barra .sel-bt:disabled{opacity:.45;cursor:default}
.sel-barra .recado{margin-top:0;flex:1 1 220px}
.ct-aba .nome{flex-wrap:wrap}
.tag-full{display:inline-block;font-family:var(--fu);font-size:10px;font-weight:700;letter-spacing:.03em;line-height:1.25;padding:3px 7px;border-radius:3px;background:var(--neg);color:#fff;cursor:pointer;white-space:nowrap}
.tag-full:hover{filter:brightness(1.08)}
.tag-full:focus-visible{outline:2px solid var(--neg);outline-offset:2px}
.ct-alerta-nota{font-size:12px;color:var(--t3);margin:-8px 0 12px}
td.full-alerta{color:var(--neg);font-weight:700}
.af-cx{width:min(520px,100%)}
.af-lista{list-style:none;margin:12px 0 0;padding:0;max-height:min(55vh,420px);overflow:auto;border:1px solid var(--linha);border-radius:8px}
.af-lista li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 12px;border-bottom:1px solid var(--linha2)}
.af-lista li:last-child{border-bottom:0}
.af-nome{font-size:13.5px;color:var(--t1);overflow-wrap:anywhere}
.af-sku{grid-column:1;font-family:var(--fc);font-size:11.5px;color:var(--t3);overflow-wrap:anywhere}
.af-qtd{grid-column:2;grid-row:1/span 2;align-self:center;font-family:var(--fn);font-size:14px;color:var(--neg);white-space:nowrap}
@media(max-width:640px){
  .sel-barra .sel-bt{flex:1 1 100%}
  .sel-rot{min-width:36px;min-height:36px}
  .tag-full{white-space:normal}
}

/* 10/10/2026 - JARVIS › card Conteúdo (iframe solto no body, ver jvCtPosiciona) */
/* 10/10/2026 (noite): card Conteúdo nativo, sem iframe e sem chave (dados de /api/conteudo-resumo) */
.ct-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:6px;margin:2px 0 4px}
.ct-num{background:var(--sup2);border-radius:6px;padding:7px 8px;display:flex;flex-direction:column;gap:1px;min-width:0}
.ct-num b{font-size:20px;line-height:1.1;color:var(--t1);font-variant-numeric:tabular-nums}
.ct-num b small{font-size:12px;color:var(--t3);font-weight:600}
.ct-num span{font-size:12px;font-weight:600;color:var(--t2)}
.ct-num em{font-size:11px;font-style:normal;color:var(--t3)}
.ct-num.ok b{color:var(--s3)}
.ct-num.alerta b{color:var(--s7)}
.ct-h{margin:4px 0 0;font-size:12px;color:var(--t3);font-weight:600}
.ct-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--t2)}
.ct-lista li{overflow-wrap:anywhere}
.ct-lista b{color:var(--t1);font-weight:600}
.ct-lista em{font-style:normal;color:var(--t3);font-size:12px}
.ct-lista small{color:var(--t3)}
.ct-lista a{color:var(--dest)}
.ct-card .ct-lista li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-tag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:8px;background:var(--sup2);color:var(--t2)}
.ct-card{min-width:0}
.ct-card footer{align-items:center}
.ct-ha{font-size:12px;color:var(--t3)}
.ct-falha{margin:0}
.jv-painel[data-jv-painel="conteudo"] h4{margin:16px 0 6px;font-size:14px;color:var(--t1)}
.ct-tab-rolo{overflow-x:auto}
.ct-alertas{margin-bottom:8px}
.ct-frentes{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.ct-sub{font-size:12px;color:var(--t3);margin:8px 0 4px}
/* 11/10/2026: card Conteúdo › Carrosséis (revisão das artes do GPT) */
.ct-tag-rev{background:var(--s1);color:#fff}
.ct-cars{display:flex;flex-direction:column;gap:12px}
.ct-car{border:1px solid var(--borda,var(--sup2));border-left:3px solid var(--sup2);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ct-car header{display:flex;gap:8px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.ct-car header b{color:var(--t1);font-size:14px;overflow-wrap:anywhere}
.ct-car-st{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:10px;background:var(--sup2);color:var(--t2);white-space:nowrap}
.ct-car-revisao{border-left-color:var(--s1)} .ct-car-revisao .ct-car-st{color:var(--s1)}
.ct-car-gerando,.ct-car-corrigir,.ct-car-corrigindo{border-left-color:var(--s7)} .ct-car-gerando .ct-car-st,.ct-car-corrigir .ct-car-st,.ct-car-corrigindo .ct-car-st{color:var(--s7)}
.ct-car-aprovado,.ct-car-entregue{border-left-color:var(--s3)} .ct-car-aprovado .ct-car-st,.ct-car-entregue .ct-car-st{color:var(--s3)}
.ct-car-erro,.ct-car-espera{border-left-color:var(--neg)} .ct-car-erro .ct-car-st,.ct-car-espera .ct-car-st{color:var(--neg)}
.ct-car .ct-sub{margin:0}
.ct-car-tira{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.ct-car-sl{margin:0;flex:0 0 auto;display:flex;flex-direction:column;gap:3px;align-items:center;scroll-snap-align:start}
.ct-car-sl img{display:block;width:108px;height:135px;object-fit:cover;border-radius:6px;background:var(--sup2)}
.ct-car-sl.refaz img{outline:2px solid var(--s7);outline-offset:1px}
.ct-car-sl figcaption{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.ct-car-sl label{display:flex;gap:4px;align-items:center;cursor:pointer;color:var(--t2)}
.ct-car-leg summary{cursor:pointer;font-size:12.5px;color:var(--t2)}
.ct-car-leg p{margin:6px 0 0;font-size:13px;color:var(--t2);overflow-wrap:anywhere}
.ct-car-bt{display:flex;gap:8px;flex-wrap:wrap}
.ct-car-form{display:flex;flex-direction:column;gap:6px}
.ct-car-form label{font-size:13px;font-weight:600;color:var(--t1)}
.ct-car-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:8px;border-radius:6px;resize:vertical}
.ct-car-form small{font-size:12px;color:var(--t3)}
/* 10/10/2026 (noite): card Radar YouTube no JARVIS (dados de /api/radar-youtube) */
.ry-alertas li .ct-tag{margin-right:2px}
.ry-alertas .ry-critico .ct-tag{background:color-mix(in srgb,var(--neg) 16%,transparent);color:var(--neg)}
.ry-alertas .ry-alto .ct-tag{background:color-mix(in srgb,var(--s5) 16%,transparent);color:var(--s5)}
/* 11/10/2026: o detalhe é o painel completo, com o desenho do painel.py (tokens próprios, seguem o tema do Ecommetrics) */
.ryp{--ry-bg:#f3f2ee;--ry-sup:#fcfcfb;--ry-sup2:#f0efec;--ry-linha:#e0dfda;--ry-t1:#0b0b0b;--ry-t2:#52514e;--ry-t3:#7a7973;--ry-acento:#2a78d6;
  --ry-s1:#2a78d6;--ry-s2:#eb6834;--ry-s3:#1baf7a;--ry-s4:#eda100;--ry-s5:#e87ba4;--ry-s6:#008300;--ry-vazia:#c9c8c2;
  --ry-ok:#13834f;--ry-warn:#a86f00;--ry-serious:#c4501d;--ry-crit:#c93636;--ry-idea:#4a3aa7;
  --ry-ok-bg:rgba(19,131,79,.09);--ry-warn-bg:rgba(168,111,0,.10);--ry-serious-bg:rgba(196,80,29,.09);--ry-crit-bg:rgba(201,54,54,.09);--ry-idea-bg:rgba(74,58,167,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ryp{--ry-bg:#0f0f0e;--ry-sup:#1a1a19;--ry-sup2:#232321;--ry-linha:#31312e;--ry-t1:#f4f3ef;--ry-t2:#c3c2b7;--ry-t3:#8c8b83;--ry-acento:#3987e5;
  --ry-s1:#3987e5;--ry-s2:#d95926;--ry-s3:#199e70;--ry-s4:#c98500;--ry-s5:#d55181;--ry-s6:#008300;--ry-vazia:#4a4a46;
  --ry-ok:#3fb27f;--ry-warn:#e0a526;--ry-serious:#e57a3a;--ry-crit:#e66767;--ry-idea:#9085e9;
  --ry-ok-bg:rgba(63,178,127,.13);--ry-warn-bg:rgba(224,165,38,.13);--ry-serious-bg:rgba(229,122,58,.13);--ry-crit-bg:rgba(230,103,103,.14);--ry-idea-bg:rgba(144,133,233,.14)}}
:root[data-theme="dark"] .ryp{--ry-bg:#0f0f0e;--ry-sup:#1a1a19;--ry-sup2:#232321;--ry-linha:#31312e;--ry-t1:#f4f3ef;--ry-t2:#c3c2b7;--ry-t3:#8c8b83;--ry-acento:#3987e5;
  --ry-s1:#3987e5;--ry-s2:#d95926;--ry-s3:#199e70;--ry-s4:#c98500;--ry-s5:#d55181;--ry-s6:#008300;--ry-vazia:#4a4a46;
  --ry-ok:#3fb27f;--ry-warn:#e0a526;--ry-serious:#e57a3a;--ry-crit:#e66767;--ry-idea:#9085e9;
  --ry-ok-bg:rgba(63,178,127,.13);--ry-warn-bg:rgba(224,165,38,.13);--ry-serious-bg:rgba(229,122,58,.13);--ry-crit-bg:rgba(230,103,103,.14);--ry-idea-bg:rgba(144,133,233,.14)}
.jv-painel[data-jv-painel="radar_youtube"]{padding:0;overflow:hidden}
.jv-painel[data-jv-painel="radar_youtube"]>.jv-painel-cab{padding:12px 16px 0;margin:0}
.ryp{background:var(--ry-bg);color:var(--ry-t1);padding:16px 18px 22px;font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
.ryp a{color:inherit}
.ryp-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ryp-marca{font-weight:650;font-size:16px;display:flex;align-items:center;gap:10px}
.ryp-radar{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ry-acento);position:relative;overflow:hidden;display:inline-block}
.ryp-radar::after{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 300deg,color-mix(in srgb,var(--ry-acento) 70%,transparent) 360deg);animation:rygira 3s linear infinite}
@keyframes rygira{to{transform:rotate(360deg)}}
.ryp-vivo{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--ry-sup);border:1px solid var(--ry-linha);color:var(--ry-t2);font-size:13px}
.ryp-ponto{width:8px;height:8px;border-radius:50%;background:var(--ry-ok);animation:rypulsa 2s infinite}
.ryp-ponto.parado{background:var(--ry-crit);animation:none}
.ryp-ponto.rodando{background:var(--ry-warn)}
@keyframes rypulsa{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ry-ok) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ryp-esp{flex:1}
.ryp-sub0{color:var(--ry-t3);font-size:12.5px}
.ryp-relogio{font-size:22px;font-weight:600;letter-spacing:-.02em}
.ryp-erro{background:var(--ry-crit-bg);color:var(--ry-crit);padding:10px 14px;border-radius:10px;margin:0 0 14px}
.ryp-grade{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.ryp-card{background:var(--ry-sup);border:1px solid var(--ry-linha);border-radius:14px;padding:16px 18px;min-width:0}
.ryp-c12{grid-column:span 12}.ryp-c7{grid-column:span 7}.ryp-c5{grid-column:span 5}
@media (max-width:1100px){.ryp-c7,.ryp-c5{grid-column:span 12}}
.ryp h5{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--ry-t2);text-transform:uppercase;letter-spacing:.06em}
.ryp h6{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ry-t2);text-transform:uppercase;letter-spacing:.06em}
.ryp-sub{color:var(--ry-t3);font-size:12.5px;margin:0 0 12px}
.ryp-pe{margin:14px 0 0}
.ryp-bom{color:var(--ry-ok)}.ryp-mau{color:var(--ry-crit)}.ryp-mudo{color:var(--ry-t3)}.ryp-aviso{color:var(--ry-warn)}
.ryp-vazio{color:var(--ry-t3);padding:16px;text-align:center;margin:0}
.ryp-agora{display:flex;gap:14px;align-items:flex-start;margin:6px 0 16px}
.ryp-cerebro{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--ry-sup2);font-size:22px}
.ryp-t{font-size:22px;font-weight:650;letter-spacing:-.02em}
.ryp-p{color:var(--ry-t2);font-size:14px;margin-top:2px}
.ryp-escada{display:grid;gap:6px}
.ryp-degrau{display:grid;grid-template-columns:22px 110px 1fr auto;gap:12px;align-items:center;padding:8px 12px;border-radius:10px;background:var(--ry-sup2);border:1px solid transparent}
.ryp-degrau.escolhida{border-color:var(--ry-acento);background:color-mix(in srgb,var(--ry-acento) 12%,var(--ry-sup2))}
.ryp-degrau.depois{opacity:.55}
.ryp-degrau .ic{font-size:13px;text-align:center;color:var(--ry-t3)}
.ryp-degrau .n{font-weight:600}
.ryp-degrau .m{color:var(--ry-t2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ryp-chip{font-size:11.5px;padding:2px 8px;border-radius:999px;border:1px solid var(--ry-linha);color:var(--ry-t3);white-space:nowrap}
.ryp-chip.cota{color:var(--ry-warn);border-color:color-mix(in srgb,var(--ry-warn) 40%,transparent)}
.ryp-chip.gratis{color:var(--ry-ok);border-color:color-mix(in srgb,var(--ry-ok) 40%,transparent)}
.ryp-chip.rede{color:var(--ry-acento);border-color:color-mix(in srgb,var(--ry-acento) 40%,transparent)}
.ryp svg text{fill:var(--ry-t3);font-size:11px;font-family:inherit}
.ryp svg text.ryp-gv{font-size:24px;font-weight:650;fill:var(--ry-t1)}
.ryp svg text.ryp-forte{fill:var(--ry-t1)}
.ryp svg text.ryp-seg{fill:var(--ry-t2)}
.ryp-gauge{display:flex;gap:20px;align-items:center}
.ryp-gauge svg{flex:none}
.ryp-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;color:var(--ry-t2)}
.ryp-kv b{color:var(--ry-t1);font-weight:600;text-align:right}
.ryp-bars{margin-top:14px}
.ryp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.ryp-tile{background:var(--ry-sup2);border-radius:10px;padding:10px 12px}
.ryp-tile .v{font-size:20px;font-weight:650;letter-spacing:-.02em}
.ryp-tile .l{color:var(--ry-t3);font-size:12px}
.ryp-ideias{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ryp-ideia{border-radius:12px;padding:14px 16px;background:var(--ry-sup2);border-left:3px solid var(--ry-linha);cursor:pointer}
.ryp-ideia:focus-visible{outline:2px solid var(--ry-acento);outline-offset:2px}
.ryp-ideia.critico{border-left-color:var(--ry-crit);background:var(--ry-crit-bg)}
.ryp-ideia.alto{border-left-color:var(--ry-serious);background:var(--ry-serious-bg)}
.ryp-ideia.medio{border-left-color:var(--ry-warn);background:var(--ry-warn-bg)}
.ryp-ideia.oportunidade{border-left-color:var(--ry-idea);background:var(--ry-idea-bg)}
.ryp-ideia .top{display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--ry-t3);text-transform:uppercase;letter-spacing:.05em}
.ryp-ideia .nivel{font-weight:700}
.ryp-ideia.critico .nivel{color:var(--ry-crit)}.ryp-ideia.alto .nivel{color:var(--ry-serious)}.ryp-ideia.medio .nivel{color:var(--ry-warn)}.ryp-ideia.oportunidade .nivel{color:var(--ry-idea)}
.ryp-ideia .tt{font-weight:600;font-size:14.5px;margin:6px 0 4px}
.ryp-ideia .dd{color:var(--ry-t2);font-size:13px;overflow-wrap:anywhere}
.ryp-ideia .ganho{display:inline-block;margin-top:8px;font-size:12px;color:var(--ry-ok)}
.ryp-ideia .ac{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--ry-linha);font-size:13px}
.ryp-ideia.aberta .ac{display:block}
.ryp-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ry-t2);margin-bottom:8px}
.ryp-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.ryp-eventos{display:grid;gap:2px;max-height:360px;overflow:auto}
.ryp-ev{display:grid;grid-template-columns:96px 12px 1fr auto;gap:10px;align-items:baseline;padding:6px 4px;border-bottom:1px solid var(--ry-linha);font-size:13px}
.ryp-ev .q{color:var(--ry-t3)}
.ryp-ev .bol{width:9px;height:9px;border-radius:50%;align-self:center}
.ryp-ev .x{font-weight:600;font-size:12px;padding:1px 7px;border-radius:999px;background:var(--ry-sup2)}
.ryp-ev .x:empty{display:none}
.ryp-ev .x.laco{color:var(--ry-crit);background:var(--ry-crit-bg)}
.ryp-ev .s{color:var(--ry-t3);font-size:12px}
.ryp-rolo{overflow-x:auto}
.ryp-hm{border-collapse:collapse;width:100%}
.ryp-hm td,.ryp-hm th{padding:4px;text-align:center;font-size:12px;border:0;background:none}
.ryp-hm th{color:var(--ry-t3);font-weight:500}
.ryp-hm td:first-child,.ryp-hm th:first-child{text-align:left;color:var(--ry-t2);white-space:nowrap}
.ryp-cel{display:inline-grid;place-items:center;width:100%;min-width:24px;height:24px;border-radius:5px;font-size:12px;font-weight:700}
.ryp-cel.ok{background:var(--ry-ok-bg);color:var(--ry-ok)}
.ryp-cel.fa{background:var(--ry-crit-bg);color:var(--ry-crit)}
.ryp-abas{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--ry-linha)}
.ryp-aba{background:none;border:0;padding:8px 12px;color:var(--ry-t3);font:inherit;font-weight:550;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ryp-aba.on{color:var(--ry-t1);border-bottom-color:var(--ry-acento)}
.ryp-filtro{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ryp-bt{background:var(--ry-sup);border:1px solid var(--ry-linha);color:var(--ry-t2);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer}
.ryp-bt.on{color:var(--ry-t1);border-color:var(--ry-acento)}
.ryp-aba:focus-visible,.ryp-bt:focus-visible{outline:2px solid var(--ry-acento);outline-offset:2px}
.ryp-pautas{display:grid;gap:8px}
.ryp-pauta{display:grid;grid-template-columns:34px 1fr auto;gap:12px;padding:10px 12px;background:var(--ry-sup2);border-radius:10px;align-items:start}
.ryp-pauta .r{color:var(--ry-t3);font-weight:600;text-align:right}
.ryp-pauta .tt a{text-decoration:none;font-weight:600}
.ryp-pauta .tt a:hover{text-decoration:underline}
.ryp-pauta .meta{color:var(--ry-t3);font-size:12px;margin:2px 0 6px}
.ryp-lab{display:flex;flex-wrap:wrap;gap:5px}
.ryp-lab span{font-size:11.5px;padding:2px 8px;border-radius:999px}
.ryp-lab .bom{background:var(--ry-ok-bg);color:var(--ry-ok)}
.ryp-lab .falta{background:var(--ry-sup);color:var(--ry-t3);border:1px dashed var(--ry-linha)}
.ryp-lab .ruim{background:var(--ry-crit-bg);color:var(--ry-crit)}
.ryp-pontos{text-align:right}
.ryp-pontos .v{font-size:18px;font-weight:650}
.ryp-pontos .l{font-size:11px;color:var(--ry-t3)}
.ryp-lista{display:grid;gap:8px}
.ryp-item{padding:10px 12px;background:var(--ry-sup2);border-radius:10px;font-size:13.5px;overflow-wrap:anywhere}
.ryp-item .meta{color:var(--ry-t3);font-size:12px;margin-top:3px}
.ryp-item .likes{float:right;font-weight:650;margin-left:10px}
.ryp-duas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.ryp-duas{grid-template-columns:1fr}}
.ryp-tema{display:grid;grid-template-columns:140px 1fr 70px;gap:12px;align-items:center;font-size:13px}
.ryp-tema .trilho{background:var(--ry-sup2);border-radius:4px;height:16px}
.ryp-tema .trilho div{height:100%;border-radius:4px;background:var(--ry-s1)}
.ryp-tema b{text-align:right}
.ryp-tip{position:fixed;pointer-events:none;z-index:9999;background:var(--sup);color:var(--t1);border:1px solid var(--linha);border-radius:8px;padding:8px 10px;font-size:12.5px;box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .1s;max-width:300px}
@media (max-width:640px){.ryp{padding:12px}.ryp-degrau{grid-template-columns:18px 84px 1fr}.ryp-degrau .ryp-chip{display:none}.ryp-ideias{grid-template-columns:1fr}.ryp-tiles{grid-template-columns:repeat(2,1fr)}
  .ryp-ev{grid-template-columns:76px 10px 1fr}.ryp-ev .x{grid-column:3;justify-self:start}.ryp-gauge{flex-wrap:wrap}.ryp-relogio{font-size:18px}}

/* 13/10/2026 - JARVIS aba Arquivado */
.jv-abas{display:flex;gap:8px;margin:4px 0 12px}
.jv-arq{opacity:.8}

/* 15/10/2026 - Shopee › Loja (API) */
.sapi-barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sapi-barra .modos{flex-wrap:wrap;max-width:100%}
.sapi-per{margin-left:auto}
.sapi-amb{padding:1px 7px;border-radius:999px;font-size:11.5px}
.sapi-amb-sandbox{background:var(--sup2);color:var(--s7);border:1px solid var(--s7)}
.sapi-amb-live{background:var(--sup2);color:var(--s3);border:1px solid var(--s3)}
.sapi-ok{background:var(--sup);border:1px solid var(--linha);border-left:3px solid var(--s3);border-radius:4px;padding:10px 13px;margin:0 0 12px;color:var(--t2);font-size:13px}
.sapi-alerta{color:var(--neg);font-weight:600}
.sapi-neg{color:var(--neg)}
.sapi-loja{border:1px solid var(--linha);border-radius:8px;padding:12px 14px;margin:0 0 12px;background:var(--sup)}
.sapi-loja-cab{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:8px}
.sapi-tag{font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid var(--linha);color:var(--t2);white-space:nowrap}
.sapi-tag.ok{color:var(--s3);border-color:var(--s3)}
.sapi-tag.off{color:var(--neg);border-color:var(--neg)}
.sapi-kv{border-collapse:collapse;font-size:13px}
.sapi-kv th{text-align:left;font-weight:500;color:var(--t3);padding:3px 16px 3px 0;vertical-align:top;white-space:nowrap}
.sapi-kv td{padding:3px 0;overflow-wrap:anywhere}
.sapi-conf{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:10px 0;font-size:13px}
.sapi-conf input{font:inherit;padding:4px 8px;border:1px solid var(--linha);border-radius:4px;background:var(--sup2);color:var(--t1)}
.sapi-tec{margin-top:10px;font-size:13px}
.sapi-tec summary{cursor:pointer;color:var(--t2)}
.sapi-status{flex-wrap:wrap;margin-bottom:8px}
.sapi-st{font-size:12px;white-space:nowrap}
.sapi-st-completed{color:var(--s3)}
.sapi-st-cancelled,.sapi-st-in_cancel,.sapi-st-to_return{color:var(--neg)}
.sapi-st-ready_to_ship,.sapi-st-processed,.sapi-st-retry_ship{color:var(--s2)}
.sapi-it{font-size:12.5px;line-height:1.35}
.sapi-pag{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sapi-filtro{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#sapi-busca,#sapi-pbusca{font:inherit;padding:6px 10px;border:1px solid var(--linha);border-radius:4px;background:var(--sup2);color:var(--t1)}
.sapi-custo{font:inherit;padding:3px 6px;border:1px solid var(--linha);border-radius:4px;background:var(--sup2);color:var(--t1)}
.sapi-custo.sapi-invalido{border-color:var(--neg)}
@media (max-width:600px){.sapi-kv,.sapi-kv tbody,.sapi-kv tr,.sapi-kv th,.sapi-kv td{display:block}.sapi-kv th{padding:6px 0 0;white-space:normal}.sapi-per{margin-left:0}}

/* 19/10/2026: Gestão › Radar de Categoria */
.rc-barra{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:8px}
.rc-dia select{margin-left:6px;padding:4px 8px;border:1px solid var(--linha);border-radius:6px;background:var(--sup);color:var(--t1)}
.rc-c1{--rc:var(--s1)}.rc-c2{--rc:var(--s4)}.rc-c3{--rc:var(--s5)}
.rc-conta{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;color:var(--rc,var(--t2));border:1px solid var(--rc,var(--linha));white-space:nowrap}
.rc-tab tr.rc-meu td{background:color-mix(in srgb,var(--rc,var(--s1)) 10%,transparent)}
.rc-tab tr.rc-meu td:first-child{box-shadow:inset 3px 0 0 var(--rc,var(--s1))}
.rc-tab tr.rc-linha{cursor:pointer}
.rc-tab tr.rc-linha:hover td,.rc-tab tr.rc-linha:focus td{background:var(--sup2)}
.rc-var{font-size:12px;font-weight:600;white-space:nowrap;color:var(--t2)}
.rc-sobe{color:var(--s3)}.rc-desce{color:var(--neg)}.rc-novo{color:var(--s1)}
.rc-img img{width:40px;height:40px;object-fit:contain;border-radius:6px;background:#fff;display:block}
.rc-tit{min-width:240px;max-width:420px}
.rc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:12px 0}
.rc-card{background:var(--sup);border:1px solid var(--linha);border-radius:10px;padding:12px 14px}
.rc-card h3{font-size:13px;margin:0 0 8px;color:var(--t2)}
.rc-card ol{margin:0;padding-left:18px;display:grid;gap:8px}
.rc-card li a{color:var(--t1);text-decoration:none;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-card li a:hover{text-decoration:underline}
.rc-card li .leg{display:block;font-size:11px}
.rc-avisos{margin:4px 0 0;padding-left:18px;color:var(--s7);font-size:12px}
.rc-tab a,.rc-volta a,.aviso a[data-rc-recarrega]{color:var(--s1)}
.rc-tab .rc-tit a{text-decoration:none;font-weight:500}
.rc-tab .rc-tit a:hover{text-decoration:underline}

/* ================= Mentorias (23/10/2026) — telas mt_* ================= */
.mt-recado{max-width:720px}
.mt-h2{margin:8px 0 2px!important}
.mt-h3{font-family:var(--fu);font-size:14px;font-weight:600;margin:18px 0 8px}
.mt-rot{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin:14px 0 6px}
.mt-titulo{font-family:var(--fu);font-weight:600;font-size:14px;margin:0 0 8px}
.mt-cartao{background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:14px 16px;margin:0 0 14px;min-width:0}
.mt-cartao>summary{cursor:pointer}
.mt-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.mt-col{min-width:0}
.mt-acoes-topo{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mt-acoes-topo .chip{cursor:pointer}
.chip.on{border-color:var(--dest);color:var(--t1);background:var(--sup)}
.mt-pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;white-space:nowrap;background:var(--sup2);color:var(--t2);border:1px solid var(--linha);vertical-align:1px}
.mt-pill.mt-ok{color:var(--s3);border-color:var(--s3)}
.mt-pill.mt-av{color:var(--s7);border-color:var(--s7)}
.mt-pill.mt-ruim{color:var(--neg);border-color:var(--neg)}
.mt-tabela-caixa{overflow-x:auto;border:1px solid var(--linha);border-radius:6px;background:var(--sup)}
.mt-tabela{width:100%;border-collapse:collapse;font-size:13px}
.mt-tabela th{text-align:left;font-weight:600;color:var(--t3);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:9px 10px;border-bottom:1px solid var(--linha);white-space:nowrap}
.mt-tabela td{padding:9px 10px;border-bottom:1px solid var(--linha2,var(--linha));vertical-align:top}
.mt-tabela tr:last-child td{border-bottom:0}
.mt-linha{cursor:pointer}
.mt-linha:hover td,.mt-linha:focus td{background:var(--sup2)}
.mt-linha:focus{outline:2px solid var(--dest);outline-offset:-2px}
.mt-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.mt-assunto{max-width:340px}
.mt-abas{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--linha);margin:12px 0 14px}
.mt-aba{font:inherit;font-size:13px;background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;color:var(--t2);cursor:pointer}
.mt-aba.on{color:var(--t1);border-bottom-color:var(--dest);font-weight:600}
.mt-aba:focus-visible{outline:2px solid var(--dest)}
.mt-dados{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:13.5px}
.mt-dados dt{color:var(--t3)}
.mt-dados dd{margin:0;overflow-wrap:anywhere}
.mt-form{display:grid;gap:8px;max-width:720px}
.mt-form-linha{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;max-width:none;margin:6px 0 10px}
.mt-form-linha>.porta-inp{flex:1 1 180px;width:auto}
.mt-form-linha>label{flex:0 1 auto}
.mt-form-linha .botao{flex:0 0 auto}
.mt-duas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.mt-duas{grid-template-columns:1fr}}
.mt-curto{max-width:120px}
.mt-busca{max-width:320px}
.mt-checks{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 10px}
.mt-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--t2);cursor:pointer}
.mt-dia{margin:0 0 14px}
.mt-dia h4{font-size:13px;font-weight:600;margin:0 0 6px}
.mt-dia h4::first-letter,.mt-escolhido::first-letter{text-transform:uppercase}
.mt-horas{display:flex;flex-wrap:wrap;gap:6px}
.mt-hora{font:inherit;font-size:13px;font-variant-numeric:tabular-nums;border:1px solid var(--linha);background:var(--sup);color:var(--t1);border-radius:5px;padding:6px 10px;cursor:pointer}
.mt-hora small{color:var(--t3);font-size:11px}
.mt-hora:hover{border-color:var(--dest)}
.mt-hora.on{background:var(--dest);border-color:var(--dest);color:#fff}
.mt-hora.on small{color:#fff}
.mt-escolhido{background:var(--sup2);border-radius:5px;padding:8px 10px;margin:0 0 10px}
.mt-faixa{border:1px solid var(--linha);border-radius:6px;padding:8px 10px;margin:0 0 8px;background:var(--sup)}
.mt-faixa-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;margin:0 0 6px}
.mt-vaga{font:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;border-radius:5px;padding:4px 9px;border:1px solid var(--linha);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.mt-vaga small{font-size:11px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-vaga.livre{background:var(--sup);color:var(--t1);cursor:pointer}
.mt-vaga.livre:hover{border-color:var(--neg)}
.mt-vaga.ocupada{background:var(--sup2);color:var(--s3);border-color:var(--s3)}
.mt-vaga.retirada{color:var(--t3);text-decoration:line-through;background:transparent}
.mt-vaga.confirma{border-color:var(--neg)}
.mt-vaga .botao{padding:2px 8px;font-size:11.5px}
.mt-lista{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.mt-lista-simples{margin:4px 0 10px;padding-left:18px;font-size:13px}
.mt-lista-simples li{margin:2px 0}
.mt-item{border:1px solid var(--linha);border-radius:5px;padding:8px 10px;font-size:13px;background:var(--sup);overflow-wrap:anywhere}
.mt-item .botao{padding:3px 10px;font-size:12px;margin-left:4px}
.mt-sug{border-style:dashed;border-color:var(--s7)}
.mt-desc{opacity:.55}
.mt-sub{margin:6px 0 0;padding-left:18px;color:var(--t2)}
.mt-sel{font:inherit;font-size:12px;padding:2px 4px;border:1px solid var(--linha);border-radius:4px;background:var(--sup2);color:var(--t1)}
.mt-material{border:1px solid var(--linha);border-radius:6px;margin:0 0 12px;background:var(--sup)}
.mt-mat-cab{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--linha);font-size:13px}
.mt-mat-acoes{margin-left:auto;display:flex;gap:8px;align-items:center}
.mt-mat-acoes .botao{padding:3px 10px;font-size:12px}
.mt-mat-topo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center}
.mt-texto{padding:10px 12px;font-size:13.5px;line-height:1.55;max-height:520px;overflow:auto;overflow-wrap:anywhere}
.mt-texto p{margin:0 0 8px}
.mt-texto mark{background:var(--s7);color:#fff;border-radius:2px;padding:0 1px}
.mt-quem{font-weight:600}
.mt-pauta{font-family:var(--fn);line-height:1.5}
.mt-metrica{border-top:1px solid var(--linha);padding:10px 0}
.mt-metrica:first-of-type{border-top:0}
.mt-spark{display:block;color:var(--dest);max-width:100%;height:auto;margin:4px 0 8px}
.mt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.mt-card{background:var(--sup);border:1px solid var(--linha);border-radius:6px;padding:12px 14px}
.mt-card .mt-rot{margin:0 0 4px}
.mt-grande{font-family:var(--fu);font-size:22px;font-weight:600;margin:0 0 6px;font-variant-numeric:tabular-nums}
.seg-recado.ok{border-color:var(--s3);color:var(--s3)}

/* 26/10/2026: Publicidade › Fluxo Ads. A mesma tabela do Fluxo, com 5 colunas
   presas (produto + 4 de total) em vez de 4, e dias de 40px: o numero de
   dinheiro abreviado (1,2k) nao cabe nos 34px do Fluxo.
   As cinco somam 508px de proposito: colunasFixas() so prende o que cabe em
   45% da largura (FIX_MAX). Com o produto em 300px, como no Fluxo, davam 616px
   e numa tela de 1440 nada ficava preso -- o nome sumia ao rolar para o lado. */
table.fluxo.fxa{min-width:calc(508px + var(--fx-dias,30) * 40px)}
table.fluxo.fxa tr.fx-regua th.fx-dia,table.fluxo.fxa th.fx-dia,table.fluxo.fxa td.fx-dia{width:calc((100% - 508px) / var(--fx-dias,30))}
table.fluxo.fxa th.fx-prod,table.fluxo.fxa td.fx-prod{width:204px;min-width:204px;max-width:204px}
table.fluxo th.fxa-m,table.fluxo td.fxa-m{width:76px;min-width:76px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.fluxo td.fxa-m{font-weight:600}
table.fluxo th.fxa-m{letter-spacing:0;padding-left:4px;padding-right:8px}
table.fluxo td.fxa-dia{font-size:11px}
table.fluxo td.fxa-t1{background:color-mix(in srgb,var(--s2) 8%,var(--sup))}
table.fluxo td.fxa-t2{background:color-mix(in srgb,var(--s2) 15%,var(--sup))}
table.fluxo td.fxa-t3{background:color-mix(in srgb,var(--s2) 22%,var(--sup))}
table.fluxo td.fxa-t4{background:color-mix(in srgb,var(--s2) 30%,var(--sup))}
table.fluxo td.fxa-t5{background:color-mix(in srgb,var(--s2) 40%,var(--sup))}
table.fluxo td.fxa-ruim.fxa-t1{background:color-mix(in srgb,var(--neg) 8%,var(--sup))}
table.fluxo td.fxa-ruim.fxa-t2{background:color-mix(in srgb,var(--neg) 15%,var(--sup))}
table.fluxo td.fxa-ruim.fxa-t3{background:color-mix(in srgb,var(--neg) 22%,var(--sup))}
table.fluxo td.fxa-ruim.fxa-t4{background:color-mix(in srgb,var(--neg) 30%,var(--sup))}
table.fluxo td.fxa-ruim.fxa-t5{background:color-mix(in srgb,var(--neg) 40%,var(--sup))}
.fxa-resumo{margin:0 0 10px;color:var(--t2);font-size:12px}
.fxa-resumo b{color:var(--t1);font-variant-numeric:tabular-nums}