/* ---- temas (menu 🎨 no topo: html[data-tema] = claro | cinza | escuro). Identidade: **Midnight Purple** (#2E1A47).
   Pedido do usuário (15/10/2026): cada tema é a sua cor base levemente puxada para o roxo — 90% cor do tema +
   10% Midnight Purple (color-mix) —, o roxo forte fica só nos elementos (botões, aba ativa, links). */
:root { --midnight: #2e1a47; }
:root, html[data-tema="claro"] {
  --fundo: color-mix(in srgb, #fafafa 90%, var(--midnight));
  --cartao: color-mix(in srgb, #ffffff 97%, var(--midnight));   /* cartão quase branco para destacar do fundo */
  --texto: color-mix(in srgb, #161616 90%, var(--midnight));
  --suave: color-mix(in srgb, #666666 90%, var(--midnight));
  --borda: color-mix(in srgb, #dddddd 90%, var(--midnight));
  --destaque: var(--midnight);
  --destaque-fundo: color-mix(in srgb, var(--midnight) 10%, #ffffff);
  --destaque-texto: #3f2563;   /* Midnight Purple para texto/links (contraste no fundo do tema) */
  --ok: #16a34a;
  --erro: #dc2626;
  --aviso: #b45309;
  --c-MercadoLivre: #f2c200;
  --c-Shopee: #ee4d2d;
  --c-TikTokShop: #111827;
  --c-Magalu: #0086ff;
  --c-Vendedores: #7b2cbf;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(40,20,80,.05), 0 4px 16px rgba(40,20,80,.05);
  --topo-fundo: var(--cartao);
  color-scheme: light;
}
html[data-tema="cinza"] {
  --fundo: color-mix(in srgb, #3a3a3a 90%, var(--midnight));
  --cartao: color-mix(in srgb, #474747 90%, var(--midnight));
  --texto: color-mix(in srgb, #f3f3f3 90%, var(--midnight));
  --suave: color-mix(in srgb, #c6c6c6 90%, var(--midnight));
  --borda: color-mix(in srgb, #5c5c5c 90%, var(--midnight));
  --destaque: #5b3a87;   /* Midnight Purple um pouco mais claro: no fundo escuro o original some */
  --destaque-fundo: color-mix(in srgb, var(--midnight) 45%, #474747);
  --destaque-texto: #d0c1ea;
  --ok: #4ade80;
  --erro: #f87171;
  --aviso: #fbbf24;
  --c-TikTokShop: #18181b;
  --sombra: 0 1px 3px rgba(0,0,0,.18);
  --topo-fundo: color-mix(in srgb, #303030 90%, var(--midnight));
  color-scheme: dark;
}
html[data-tema="escuro"] {
  /* preto puxado bem pouco para o roxo (um roxo muito, muito escuro) */
  --fundo: color-mix(in srgb, #0a0a0a 90%, var(--midnight));
  --cartao: color-mix(in srgb, #171717 90%, var(--midnight));
  --texto: color-mix(in srgb, #ededed 90%, var(--midnight));
  --suave: color-mix(in srgb, #9c9c9c 90%, var(--midnight));
  --borda: color-mix(in srgb, #2a2a2a 90%, var(--midnight));
  --destaque: #5b3a87;
  --destaque-fundo: color-mix(in srgb, var(--midnight) 55%, #171717);
  --destaque-texto: #c3b0e3;
  --ok: #4ade80;
  --erro: #f87171;
  --aviso: #fbbf24;
  --c-TikTokShop: #fe2c55;
  --sombra: none;
  --topo-fundo: color-mix(in srgb, #111111 90%, var(--midnight));
  color-scheme: dark;
}

/* ---- tamanho das letras e ícones (html[data-tamanho] = pequeno | medio | grande): escala a página inteira.
   No Grande o menu de páginas desce para a 2ª linha mais cedo (cabe menos na largura) */
html[data-tamanho="pequeno"] { --zoom: .88; }
html[data-tamanho="grande"] { --zoom: 1.15; }
@media (max-width: 1660px) {
  html[data-tamanho="grande"] .topo { flex-wrap: wrap; row-gap: 6px; }
  html[data-tamanho="grande"] .abas { order: 3; flex-basis: 100%; }
}
body { zoom: var(--zoom, 1); }

/* ---- visualização simples: esconde o que é "avançado" (gráficos, métricas extras, explicações) — nada é apagado,
   é só trocar para Avançado no menu 🎨 */
html[data-visao="simples"] .so-avancado, html[data-visao="simples"] details.ajuda { display: none !important; }

* { box-sizing: border-box; }

/* o atributo hidden precisa vencer regras como display: grid/flex (ex.: overlay de soltar) */
[hidden] { display: none !important; }

/* ---- fonte: Inter (variável, guardada em web/fontes — funciona sem internet). Pedido do usuário (15/10/2026):
   mais legível e menos fina, moderna, sem ser negrito → texto em 450 e destaques em 600 (não 700) */
@font-face {
  font-family: "Inter";
  src: url("fontes/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 450 14px/1.5 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv11", "ss01";   /* "a" de um andar e números abertos (6, 9, 4 mais fáceis de ler) */
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
b, strong, th, h1, h2, h3 { font-weight: 600; }

/* ---- topo: uma linha (marca | páginas | loja + conta); em tela estreita as páginas viram uma faixa que rola de lado */
.topo {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 20px;
  background: var(--topo-fundo, var(--cartao));
  border-bottom: 1px solid var(--borda);
  border-top: 3px solid var(--destaque);
  position: sticky;   /* acompanha a rolagem da página */
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.marca { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.logo { font-size: 22px; }
h1 { margin: 0; font-size: 16px; white-space: nowrap; }
.topo h1 { color: var(--destaque-texto); }
.sub { margin: 0; color: var(--suave); font-size: 13px; }
.topo-direita { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-shrink: 0; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

select, .btn {
  font: inherit;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: var(--cartao);
  color: var(--texto);
  cursor: pointer;
}
.btn:hover, select:hover { border-color: var(--destaque); }
a.btn { display: inline-block; text-decoration: none; }
.btn.primario { background: var(--destaque); border-color: var(--destaque); color: #fff; font-weight: 600; }
.btn.primario:hover { filter: brightness(1.08); }
.btn.pequeno { padding: 4px 10px; font-size: 13px; }
.btn.excluir { padding: 3px 9px; font-size: 12px; color: var(--erro); }
.btn.excluir:hover { border-color: var(--erro); }
.btn.icone { padding: 2px 8px; font-size: 13px; line-height: 1.5; }

/* ---- menus suspensos (details.menu): "⋯ Mais", "📋 Conferência ▾", conta do usuário */
details.menu { position: relative; }
details.menu > summary { list-style: none; user-select: none; white-space: nowrap; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu[open] > summary { border-color: var(--destaque); }
.menu-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  display: grid; gap: 2px; padding: 6px;
  min-width: 250px; max-width: min(360px, calc(100vw - 20px));
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.menu-pop.direita { left: auto; right: 0; }
.menu-pop .btn { width: 100%; text-align: left; border-color: transparent; white-space: normal; }
.menu-pop .btn:hover { background: var(--fundo); border-color: var(--borda); }
.menu-pop .btn small { display: block; font-size: 12px; color: var(--suave); font-weight: 400; }
.menu-pop.aparencia { min-width: 300px; }
.opcoes-aparencia { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 2px 4px 8px; }
.menu-pop .opcoes-aparencia .btn { text-align: center; border-color: var(--borda); padding: 7px 6px; font-size: 13px; }
.opcoes-aparencia .btn.ativa { background: var(--destaque-fundo); border-color: var(--destaque); color: var(--destaque-texto); font-weight: 600; }
.opcoes-aparencia big { font-size: 1.2em; font-weight: 700; }
.opcoes-aparencia small { display: inline !important; font-size: .8em !important; }
.menu-info { padding: 6px 10px 8px; font-size: 12px; color: var(--suave); border-bottom: 1px solid var(--borda); margin-bottom: 2px; }

/* ---- cartões que abrem/fecham (details.dobravel) e textos de ajuda (details.ajuda) */
details.dobravel > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
details.dobravel > summary::-webkit-details-marker { display: none; }
details.dobravel > summary::before { content: "▸"; color: var(--suave); transition: transform .15s; }
details.dobravel[open] > summary::before { transform: rotate(90deg); }
details.dobravel > summary h2 { margin: 0; display: inline; }
details.dobravel.painel-separar > summary { flex-wrap: nowrap; }
details.dobravel[open] > summary { margin-bottom: 10px; }
details.ajuda { margin-top: 12px; font-size: 13px; color: var(--suave); }
details.ajuda > summary { cursor: pointer; width: fit-content; }
details.ajuda > summary:hover { color: var(--texto); }
details.ajuda p { margin: 6px 0; line-height: 1.5; }

/* ---- formulário de pedido manual */
dialog {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--cartao);
  color: var(--texto);
  padding: 20px;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { margin: 0; font-size: 18px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.campos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
.campos .inteiro { grid-column: 1 / -1; }
.campos input, .campos select {
  font: inherit; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px;
}
.campos input:focus, .campos select:focus { outline: 2px solid var(--destaque); outline-offset: -1px; }
.dica-form { font-size: 12px; color: var(--suave); margin: 14px 0 0; }
.erro-form { color: var(--erro); font-size: 13px; margin: 10px 0 0; }
.rodape-form { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } }
/* ---- envios */
.barra-envios { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 10px; font-size: 14px; }
.barra-envios label { display: flex; align-items: center; gap: 6px; }
.envios-blocos { display: grid; gap: 12px; }
/* nome da plataforma numa faixa da largura do bloco, na cor dela (ML amarelo, Shopee laranja…) */
.faixa-plat {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 12px; padding: 9px var(--pad);
  background: var(--cor); color: #fff; border-radius: var(--raio) var(--raio) 0 0;
}
.faixa-plat b { font-size: 16px; letter-spacing: .01em; }
.faixa-plat span { font-size: 13px; opacity: .95; }
.faixa-plat.MercadoLivre { color: #1d2129; }
.faixa-plat.pequena { margin: 0 0 2px; padding: 5px 10px; border-radius: 8px; }
.faixa-plat.pequena b { font-size: 13px; }
.faixa-plat.pequena span { font-size: 12px; }
.bloco-envio.vazio-envio { padding: 0; }
.bloco-envio.vazio-envio .faixa-plat { margin: 0; border-radius: var(--raio); opacity: .75; }
.envio-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .envio-colunas { grid-template-columns: minmax(0, 1fr); } }
.envio-bloco { border: 1px solid var(--borda); border-radius: 10px; padding: 8px; min-width: 0; }
.acoes-pedido { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.envio-bloco.hoje { border-top: 3px solid var(--erro); }
.envio-bloco.depois { border-top: 3px solid var(--borda); }
.envio-bloco-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.envio-bloco-topo .botoes-conf { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.btn:disabled { opacity: .5; cursor: default; }
.envio-bloco tr.conferido td { opacity: .65; }
.ok-conf { color: var(--ok); }
.qtd-alerta { color: var(--erro); }
.prazo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--fundo); border: 1px solid var(--borda); }
.prazo.atrasado { background: var(--erro); border-color: var(--erro); color: #fff; font-weight: 600; }
.prazo.estimado { color: var(--suave); font-style: italic; }
.envio-colunas.uma { grid-template-columns: minmax(0, 1fr); }
/* Envios: pedidos + painel "Produtos para separar" ao lado; em tela estreita o painel vem antes (abre/fecha) */
.envios-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
@media (min-width: 1101px) {
  .painel-separar { position: sticky; top: calc(var(--topo-h, 56px) + 12px); overflow: auto;
    max-height: calc(100vh / var(--zoom, 1) - var(--topo-h, 56px) - 24px); }
}
@media (max-width: 1100px) {
  .envios-layout { grid-template-columns: minmax(0, 1fr); }
  .painel-separar { order: -1; }
}
/* pedidos dos Envios viram cartões no celular (nada some: cliente/nº, produtos e prazo/botões) */
@media (max-width: 600px) {
  .tabela-envio tr:first-child { display: none; }
  .tabela-envio tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
  .tabela-envio td { border: 0; padding: 0; }
  .tabela-envio td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .tabela-envio td:nth-child(3) { grid-column: 2; grid-row: 1; }
}
.painel-separar .sep-grupo { margin-bottom: 14px; }
.painel-separar .sep-grupo-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 2px;
  border-bottom: 2px solid var(--borda); }
.painel-separar .sep-item {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.painel-separar .sep-item.completo { opacity: .6; }
.painel-separar .sep-nome { font-size: 14px; line-height: 1.25; }
.painel-separar .sep-num { font-size: 12px; color: var(--suave); grid-column: 1 / -1; }
.painel-separar .sep-num b.falta { color: var(--erro); }
.painel-separar .sep-num b.ok { color: var(--ok); }
.painel-separar .sep-botoes { display: flex; gap: 4px; align-items: start; }
.painel-separar .sep-botoes .btn { padding: 2px 8px; min-width: 30px; }
.sel-envio { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; cursor: pointer; }
.barra-selecao { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--texto); color: var(--cartao); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.barra-selecao .btn { background: var(--cartao); color: var(--texto); }
.itens-pedido { margin-top: 16px; border: 1px solid var(--borda); border-radius: 10px; padding: 12px; }
.itens-topo { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.item-pedido { display: grid; grid-template-columns: 1fr 120px 70px 100px 100px 32px; gap: 6px; align-items: end;
  padding: 8px 0; border-top: 1px dashed var(--borda); }
.item-pedido:first-child { border-top: 0; padding-top: 0; }
.item-pedido label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); min-width: 0; }
.item-pedido input { font: inherit; color: var(--texto); background: var(--fundo); width: 100%;
  border: 1px solid var(--borda); border-radius: 8px; padding: 7px 8px; }
.item-pedido input:focus { outline: 2px solid var(--destaque); outline-offset: -1px; }
.item-pedido .tirar { height: 34px; padding: 0; }
.item-pedido .vinculo-ok { grid-column: 1 / -1; font-size: 11px; color: var(--ok); margin-top: -2px; }
.itens-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .item-pedido { grid-template-columns: 1fr 1fr; }
  .item-pedido label:first-child { grid-column: 1 / -1; }
}

main { max-width: 1280px; margin: 0 auto; padding: 16px 20px 40px; }

/* ---- área de soltar (faixa compacta) */
.drop {
  display: flex; align-items: center; gap: 12px;
  border: 2px dashed var(--borda);
  border-radius: var(--raio);
  background: var(--cartao);
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop:focus { border-color: var(--destaque); outline: none; }
.drop.ativo { border-color: var(--destaque); background: var(--destaque-fundo); }
.drop.carregando { opacity: .6; pointer-events: none; }
.drop-icone { font-size: 22px; }
.drop-titulo { font-size: 15px; font-weight: 600; }
.drop-sub { color: var(--suave); font-size: 13px; }
.busca-cartao { margin-bottom: 12px; }
.busca-cartao .campo-busca { margin: 0; }
.busca-cartao table:not(:empty) { margin-top: 8px; }

/* ---- resultado da importação */
.resultado { margin-top: 16px; display: grid; gap: 8px; }
.item-res {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--ok);
  border-radius: 10px;
  padding: 10px 14px;
}
.item-res.erro { border-left-color: var(--erro); }
.item-res.aviso { border-left-color: var(--aviso); }
.item-res b { display: block; }
.item-res small { color: var(--suave); }

/* ---- KPIs */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.kpi {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 10px 14px;
  box-shadow: var(--sombra);
  min-width: 0;
}
.kpi-rotulo { color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.kpi-valor { font-size: 21px; font-weight: 650; margin-top: 1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-nota { font-size: 12px; color: var(--suave); }
.sobe { color: var(--ok); }
.desce { color: var(--erro); }

/* ---- cartões */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  --pad: 14px;
  padding: var(--pad);
  box-shadow: var(--sombra);
  min-width: 0;
}
.largo { grid-column: 1 / -1; }
.cartao h2 { margin: 0 0 10px; font-size: 15px; }
.cartao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--suave); }
.legenda span::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; background: var(--cor);
}

/* ---- gráfico de barras por dia */
.grafico {
  display: flex; align-items: flex-end; gap: 3px;
  height: 220px; padding-top: 10px;
  border-bottom: 1px solid var(--borda);
}
.dia { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; min-width: 0; }
.dia .pilha { display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; }
.dia .pilha i { display: block; }
.dia .num { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--suave); }
.dia:hover .pilha { filter: brightness(1.1); }
.dia[data-dica]:hover::after {
  content: attr(data-dica);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  white-space: pre; z-index: 2;
  background: var(--texto); color: var(--cartao);
  font-size: 12px; padding: 6px 8px; border-radius: 6px;
}
.grafico-espaco { height: 22px; }

/* ---- barras por plataforma */
.plat { margin-bottom: 14px; }
.plat-topo { display: flex; justify-content: space-between; font-size: 14px; }
.plat-topo small { color: var(--suave); }
.barra { height: 10px; background: var(--fundo); border-radius: 6px; overflow: hidden; margin-top: 5px; }
.barra i { display: block; height: 100%; background: var(--cor); border-radius: 6px; }

/* ---- tabelas */
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borda); }
th { color: var(--suave); font-weight: 600; font-size: 12px; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.etiqueta {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  background: var(--cor); color: #fff;
}
.etiqueta.MercadoLivre { color: #1d2129; }
.vazio { color: var(--suave); text-align: center; padding: 20px; }

/* ---- lojas */
:root { --l-Bioage: #0f9d76; --l-Thabella: #c2417d; --l-LojaPropria: #7b2cbf; }
.filtro-loja { font-weight: 600; }
.etiqueta-loja {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--cor-loja, var(--borda)); color: var(--cor-loja, var(--texto));
}
.loja-Bioage { --cor-loja: var(--l-Bioage); }
.loja-Thabella { --cor-loja: var(--l-Thabella); }
.loja-LojaPropria { --cor-loja: var(--l-LojaPropria); }
.barra.loja-Bioage i, .barra.loja-Thabella i { background: var(--cor-loja); }
.plat-detalhe { margin-top: 6px; font-size: 12px; line-height: 1.9; }
.plat.apagado { opacity: .45; }
body[data-loja="Bioage"] .topo { border-bottom: 3px solid var(--l-Bioage); }
body[data-loja="Thabella"] .topo { border-bottom: 3px solid var(--l-Thabella); }

.etiqueta-marca {
  display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 600;
  background: var(--fundo); color: var(--suave); border: 1px solid var(--borda); vertical-align: 1px;
}
.sugestao { display: block; font-size: 11px; color: var(--suave); margin-top: 2px; }
.sugestao.boa { color: var(--ok); }
.cartao-topo .acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#cartao-anuncios { margin-bottom: 16px; }
/* lista de anúncios sem vínculo pode ter centenas de linhas: rola dentro do cartão */
#cartao-sem-vinculo .tabela-rolagem { max-height: 420px; overflow-y: auto; }
#cartao-sem-vinculo th { position: sticky; top: 0; background: var(--cartao); z-index: 1; }

/* ---- integrações */
.campos-1 { grid-template-columns: 1fr; }
.passos { margin: 0 0 12px; padding-left: 20px; font-size: 13px; color: var(--suave); line-height: 1.6; }
.passos code { background: var(--fundo); padding: 0 4px; border-radius: 4px; }
.conta { border: 1px solid var(--borda); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.conta.conectada { border-color: color-mix(in srgb, var(--ok) 45%, var(--borda)); }
.conta-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.conta-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.conectar { display: flex; gap: 6px; margin-top: 8px; }
.conectar input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; }
.sync-grade { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.sync-grade label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
.interruptor { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 15px !important;
  color: var(--texto) !important; font-weight: 600; padding-bottom: 6px; }
.interruptor input { width: 18px; height: 18px; }
.historico { max-height: 480px; overflow-y: auto; }
tr.linha-erro td { background: color-mix(in srgb, var(--erro) 7%, transparent); }

/* ---- diálogo "em qual loja lançar?" */
.lista-arquivos-loja { display: grid; gap: 10px; margin-top: 14px; max-height: 60vh; overflow-y: auto; }
.arquivo-loja { border: 1px solid var(--borda); border-radius: 10px; padding: 12px; }
.arquivo-loja-topo { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.arquivo-loja-topo b { word-break: break-all; }
.opcoes-loja { display: flex; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; }
.opcao-loja {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 10px; padding: 8px 14px;
}
.opcao-loja:has(input:checked) { border-color: var(--destaque); background: var(--destaque-fundo); }
.opcao-loja .etiqueta-loja { font-size: 14px; padding: 2px 10px; }
.dica-arquivo { font-size: 12px; color: var(--suave); margin-top: 4px; }
.pergunta-texto { line-height: 1.6; }
.pergunta-botoes { flex-wrap: wrap; }

/* ---- navegação entre páginas */
.abas {
  display: flex; gap: 2px; background: var(--fundo); padding: 3px; border-radius: 12px; border: 1px solid var(--borda);
  min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
.abas::-webkit-scrollbar { display: none; }
.abas a {
  padding: 6px 11px; border-radius: 9px; color: var(--suave); text-decoration: none; font-weight: 600;
  display: flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0;
}
.abas a:hover { color: var(--texto); }
.abas a.ativa { background: var(--destaque); color: #fff; box-shadow: var(--sombra); }
.abas a.ativa .contador { background: #fff; color: var(--erro); }
.contador {
  background: var(--erro); color: #fff; font-size: 11px; border-radius: 999px; padding: 0 6px; line-height: 18px;
}
.titulo-view { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.titulo-view h2 { margin: 0; font-size: 20px; }
.titulo-view h2::first-letter { text-transform: uppercase; }
.link { color: var(--destaque-texto); text-decoration: none; font-size: 13px; }
.link:hover { text-decoration: underline; }
.suave { color: var(--suave); }
.nowrap { white-space: nowrap; }

/* ---- soltar arquivo em qualquer página */
.soltar-overlay {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--destaque) 18%, transparent);
  border: 3px dashed var(--destaque);
}
.soltar-overlay div { background: var(--cartao); padding: 18px 28px; border-radius: var(--raio); font-size: 20px; font-weight: 700; box-shadow: var(--sombra); }

/* ---- KPIs clicáveis / alertas */
a.kpi { color: inherit; text-decoration: none; transition: border-color .15s; }
a.kpi:hover { border-color: var(--destaque); }
.kpi-alerta { border-color: color-mix(in srgb, var(--erro) 45%, var(--borda)); }
.kpi-alerta .kpi-valor { color: var(--erro); }
.cartao.alerta { border-color: color-mix(in srgb, var(--aviso) 50%, var(--borda)); margin-bottom: 16px; }

/* ---- produtos */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filtros input { flex: 1; min-width: min(240px, 100%); }
.filtros select { max-width: 100%; }
.contagem-filtro { margin: -4px 0 10px; font-size: 12px; color: var(--suave); }
.filtros input, .campo-tabela {
  font: inherit; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px; padding: 7px 10px;
}
.campo-tabela { width: 100%; min-width: 180px; padding: 5px 8px; font-size: 13px; }
.campo-tabela.un { width: 80px; min-width: 0; text-align: right; }
.barra-contagem {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--destaque-fundo); border: 1px solid var(--destaque); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; font-size: 14px;
  position: sticky; top: calc(var(--topo-h, 56px) + 8px); z-index: 5;
}
.barra-contagem .acoes { display: flex; gap: 8px; }
.tabela-produtos td { vertical-align: middle; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--fundo); }
tr.riscado td { color: var(--suave); text-decoration: line-through; }
.estoque {
  display: inline-block; min-width: 42px; text-align: center; font-weight: 700;
  padding: 2px 8px; border-radius: 8px; font-variant-numeric: tabular-nums; font-size: 14px;
}
.estoque.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.estoque.baixo { background: color-mix(in srgb, var(--aviso) 18%, transparent); color: var(--aviso); }
.estoque.zerado { background: color-mix(in srgb, var(--erro) 15%, transparent); color: var(--erro); }
.estoque.sem { background: var(--fundo); color: var(--suave); font-weight: 400; font-size: 12px; }
h2 .estoque { font-size: 13px; vertical-align: middle; margin-left: 6px; }

/* ---- diálogo do produto */
dialog.largo { width: min(900px, calc(100vw - 32px)); }
dialog h3 { font-size: 15px; margin: 22px 0 6px; }
.add-vinculo { display: flex; gap: 8px; margin-top: 10px; }
.add-vinculo input { font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 7px 10px; }
.add-vinculo input:first-child { flex: 1; min-width: 0; }
.add-vinculo input[type="number"] { width: 80px; }
.grade-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grade-dupla .tabela-rolagem { max-height: 260px; overflow-y: auto; }
.acoes-mov { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 0; }

/* ---- telas estreitas: meia tela do monitor, monitor em pé, tablet e celular (nenhuma informação some:
   as páginas viram uma faixa que rola de lado e o resto passa para uma coluna) */
@media (max-width: 1440px) {
  .topo { flex-wrap: wrap; row-gap: 6px; }
  .abas { order: 3; flex-basis: 100%; }
}
@media (max-width: 960px) { .rotulo-largo { display: none; } }
@media (max-width: 760px) {
  .grade-dupla { grid-template-columns: 1fr; }
  .topo { padding: 6px 12px; }
  main { padding: 12px 12px 32px; }
  .grade { grid-template-columns: minmax(0, 1fr); }
  .dia .num { display: none; }
  .filtros input { min-width: 100%; }
  .filtros select { flex: 1 1 150px; }
}
@media (max-width: 600px) {
  .topo h1, #usuario-nome b { display: none; }
  .topo-direita { margin-left: auto; }
  .filtro-loja { max-width: 46vw; }
  .titulo-view h2 { font-size: 18px; }
  .titulo-view .acoes { width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-valor { font-size: 19px; }
  .cartao { --pad: 12px; }
  .rotulo-largo { display: none; }
  table { font-size: 12.5px; }
  th, td { padding: 6px; }
  .drop-sub { display: none; }
  /* tabelas largas rolam de lado (dedo) em vez de espremer cada linha em várias */
  .tabela-rolagem > table:not(.tabela-envio) { min-width: 540px; }
  .abas-marca { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .abas-marca button { flex-shrink: 0; }
  dialog { width: calc(100vw - 12px); max-width: none; padding: 16px; }
  .campos { grid-template-columns: 1fr; }
}
/* toque (celular/tablet): botões e caixinhas maiores */
@media (pointer: coarse) {
  .btn.pequeno, .btn.icone { min-height: 34px; }
  .sel-envio { width: 20px; height: 20px; }
}
th, .etiqueta, .etiqueta-loja { white-space: nowrap; }


/* ---- perfis: elemento .so-<capacidade> só aparece para quem tem a capacidade (body.cap-<capacidade>) */
body:not(.cap-ver_pedidos) .so-ver_pedidos,
body:not(.cap-editar_pedidos) .so-editar_pedidos,
body:not(.cap-importar) .so-importar,
body:not(.cap-envios) .so-envios,
body:not(.cap-ver_produtos) .so-ver_produtos,
body:not(.cap-editar_produtos) .so-editar_produtos,
body:not(.cap-ver_custo) .so-ver_custo,
body:not(.cap-ver_liquido) .so-ver_liquido,
body:not(.cap-ver_vendedores) .so-ver_vendedores,
body:not(.cap-editar_vendedores) .so-editar_vendedores,
body:not(.cap-cancelar) .so-cancelar,
body:not(.cap-baixar) .so-baixar,
body:not(.cap-vendas_proprias) .so-vendas_proprias,
body:not(.cap-usuarios) .so-usuarios,
body:not(.cap-integracoes) .so-integracoes,
body:not(.cap-manutencao) .so-manutencao,
body:not(.cap-servidor) .so-servidor,
body:not(.cap-ver_faturamento) .so-ver_faturamento,
body:not(.cap-faturar) .so-faturar,
body:not(.cap-fiscal_config) .so-fiscal_config,
body:not(.cap-vendas) .so-vendas,
body:not(.cap-metas) .so-metas,
body:not(.cap-financeiro) .so-financeiro,
body:not(.cap-clientes) .so-clientes,
body:not(.cap-editar_clientes) .so-editar_clientes,
body:not(.cap-lancar_venda) .so-lancar_venda { display: none !important; }

/* ---- login */
.tela-login { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: var(--fundo); }
.caixa-login { width: min(380px, 100%); }
.caixa-login .marca { margin-bottom: 8px; }
.largo-total { width: 100%; margin-top: 14px; padding: 10px; }
body.sem-login .topo, body.sem-login main { visibility: hidden; }
.usuario-topo > summary { font-size: 13px; }
.usuario-topo .menu-pop { min-width: 210px; }
.perfis-ajuda { margin-top: 14px; font-size: 13px; color: var(--suave); }
.perfis-ajuda p { margin: 4px 0; }
.campo-busca { width: 100%; font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.etiqueta-perfil { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--destaque-fundo);
  color: var(--destaque-texto); }
tr.linha-cancelada td { opacity: .6; }
tr.linha-cancelada td:first-child { text-decoration: line-through; }
.status-venda { font: inherit; font-size: 13px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--borda);
  background: var(--fundo); color: var(--texto); }

/* ---- manutenção (TI) */
.ferramentas { display: grid; gap: 8px; }
.ferramentas .btn { text-align: left; }
.saida-texto { white-space: pre-wrap; word-break: break-word; font: 12px/1.45 ui-monospace, Consolas, monospace; background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px; padding: 10px; margin: 10px 0 0; max-height: 420px; overflow: auto; }
.saida-texto.log { max-height: 520px; }
.tabela-limite { max-height: 360px; overflow: auto; }

/* ---- faturamento */
.busca-numero { display: flex; gap: 8px; }
.busca-numero input { flex: 1; font: inherit; font-size: 16px; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.ficha-pedido { margin-top: 12px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
@media (max-width: 800px) { .ficha-pedido { grid-template-columns: 1fr; } }
.ficha-pedido h3 { margin: 0 0 6px; font-size: 15px; }
.pendencia { display: inline-block; margin: 1px 2px; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  background: color-mix(in srgb, var(--aviso) 14%, transparent); color: var(--aviso); }
.pendencia.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.aviso-empresa { border-left: 4px solid var(--aviso); }

/* ---- produto: seções do cadastro, "pronto para anunciar", artes e fotos */
.campos textarea { font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 8px; padding: 8px 10px; resize: vertical; }
.campos textarea:focus { outline: 2px solid var(--destaque); outline-offset: -1px; }
.campos-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 600px) { .campos-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
details.secao-produto { margin-top: 14px; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
details.secao-produto > summary { cursor: pointer; font-weight: 600; }
details.secao-produto > .campos { margin-top: 10px; }
.pronto-plataformas { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.pronto { display: inline-flex; gap: 4px; align-items: baseline; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--borda); }
.pronto.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--borda)); }
.pronto.falta { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 40%, var(--borda)); }
.pronto small { color: var(--suave); }
.pasta-arte { border-top: 1px dashed var(--borda); padding-top: 8px; margin-top: 8px; }
.pasta-arte-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pasta-arte-topo .acoes { margin-left: auto; }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-top: 8px; }
.miniatura { position: relative; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--fundo);
  aspect-ratio: 1; overflow: hidden; cursor: pointer; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura.escolhida { border-color: var(--destaque); }
.miniatura span, .fotos-escolhidas figcaption { position: absolute; left: 4px; top: 4px; background: var(--destaque); color: #fff;
  font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; }
.fotos-escolhidas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.fotos-escolhidas figure { position: relative; margin: 0; width: 72px; height: 72px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  border: 2px solid var(--destaque); cursor: pointer; }
.fotos-escolhidas img { width: 100%; height: 100%; object-fit: cover; }
.arquivos-arte { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; }
.arquivos-arte a { color: var(--destaque-texto); text-decoration: none; }
.capa-arte { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; background: var(--fundo); }
.artes-tabela { max-height: 520px; overflow-y: auto; }
.acoes-arte { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; min-width: 260px; }
.acoes-arte .campo-tabela { min-width: 140px; width: 160px; }

/* ---- 🎯 metas */
.metas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
#minha-meta .meta-cartao { margin-bottom: 12px; }
.meta-cartao { border-left: 4px solid var(--cor-meta, var(--borda)); }
.meta-cartao.ok { --cor-meta: var(--ok); }
.meta-cartao.perto { --cor-meta: var(--aviso); }
.meta-cartao.longe { --cor-meta: var(--erro); }
.meta-cartao .cartao-topo h2 { margin-bottom: 6px; }
.meta-numeros { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.meta-numeros b { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.meta-pct { margin-left: auto; font-size: 18px; font-weight: 650; color: var(--cor-meta); }
.meta-barra { position: relative; height: 12px; background: var(--fundo); border-radius: 999px; margin: 8px 0; overflow: visible; }
.meta-barra i { display: block; height: 100%; border-radius: 999px; background: var(--cor-meta); }
.meta-barra s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--texto); opacity: .55; border-radius: 2px; }
.meta-linha { margin: 4px 0 0; font-size: 13px; }

/* ---- abas por marca (Produtos) */
.abas-marca { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.abas-marca button { font: inherit; font-size: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--borda);
  background: var(--cartao); color: var(--texto); cursor: pointer; }
.abas-marca button:hover { border-color: var(--destaque); }
.abas-marca button.ativa { background: var(--destaque); border-color: var(--destaque); color: #fff; font-weight: 600; }
.abas-marca button small { opacity: .75; margin-left: 4px; }
.painel-marca-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 900px) { .painel-marca-grade { grid-template-columns: 1fr; } }
.barras-mes { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 10px; }
.barras-mes div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%;
  font-size: 11px; color: var(--suave); gap: 4px; }
.barras-mes i { display: block; width: 100%; max-width: 46px; background: var(--destaque); border-radius: 6px 6px 0 0; min-height: 2px; }
.barras-mes b { font-size: 11px; color: var(--texto); font-weight: 600; }
.barra-part { height: 8px; background: var(--fundo); border-radius: 999px; overflow: hidden; min-width: 80px; }
.barra-part i { display: block; height: 100%; background: var(--destaque); }
tr.clicavel-marca { cursor: pointer; }
tr.clicavel-marca:hover td { background: var(--destaque-fundo); }
.sobe { color: var(--ok); } .desce { color: var(--erro); }

/* ---- página /instalar (certificado da empresa + instalar o app) */
.pagina-instalar { max-width: 720px; }
.pagina-instalar .marca { margin: 8px 0 4px; }
.pagina-instalar .marca h1 { font-size: 20px; color: var(--destaque-texto); }
.pagina-instalar .passo { margin-top: 12px; }
.pagina-instalar ol { margin: 6px 0; padding-left: 20px; line-height: 1.6; color: var(--texto); }
.pagina-instalar details.ajuda { color: var(--texto); }

/* ---- 💰 financeiro */
.item-compra { grid-template-columns: minmax(0, 1fr) 80px 110px 110px 32px; }
@media (max-width: 640px) { .item-compra { grid-template-columns: 1fr 1fr; } }
.tabela-config { margin-top: 10px; }
.tabela-config input { width: 100px; }
.fin-receber { max-height: 560px; overflow-y: auto; }
.pendencia.erro { background: color-mix(in srgb, var(--erro) 14%, transparent); color: var(--erro); }


/* ---- 📢 aviso do sistema e 🚧 tela de manutenção */
.aviso-sistema { position: sticky; top: var(--topo-h, 56px); z-index: 15; }
.faixa-aviso { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 40px 8px 16px;
  font-size: 14px; position: relative; text-align: center; color: #fff; background: #2563eb; }
.faixa-aviso.instabilidade { background: #b45309; }
.faixa-aviso.critico { background: #b91c1c; }
.faixa-aviso a { color: #fff; font-weight: 600; }
.faixa-aviso small { opacity: .85; }
.fechar-aviso { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff;
  font-size: 16px; cursor: pointer; padding: 4px 8px; }
.tela-manutencao { z-index: 60; }
.tela-manutencao .caixa-login { text-align: center; }
.manut-icone { font-size: 52px; }
.tela-manutencao h1 { font-size: 22px; margin: 4px 0 8px; color: var(--destaque-texto); }
#manut-avisos { margin-bottom: 12px; }
#manut-avisos h3 { font-size: 15px; }
.senha-temp { font: 600 26px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-align: center; margin: 12px 0;
  padding: 10px; border-radius: 10px; background: var(--destaque-fundo); color: var(--destaque-texto); user-select: all; }
.aviso-pend { color: var(--aviso); font-size: 11px; white-space: nowrap; }
.item-kit { grid-template-columns: minmax(0, 1fr) 90px 32px; }
#barra-contagem .check { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 13px; }
.cad-lista { max-height: 340px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; display: grid; gap: 2px; font-size: 13px; }

/* Produtos: abas "📦 Produtos (estoque)" × "Anúncios <plataforma>" (15/10/2026) */
.abas-plat-prod { margin-bottom: 8px; }
.abas-plat-prod button[style*="--cor"].ativa { background: var(--cor); border-color: var(--cor); color: #fff; }
.abas-plat-prod button[data-aba-plat="MercadoLivre"].ativa { color: #2b2300; }
.fora-da-aba { display: none !important; }

/* Envios: pacote do ML (vários nºs de pedido num envio só) — 15/10/2026 */
.tabela-envio hr.sep-item { border: 0; border-top: 1px dashed var(--borda); margin: 5px 0; }
.tabela-envio .btn.icone.mini { padding: 0 5px; min-height: 0; font-size: 11px; line-height: 1.5; vertical-align: middle; }

/* 🔄 atualizações (Manutenção) — 15/10/2026 */
.faixa-aviso.atualizacao { background: var(--destaque); }
.lista-mudancas { margin: 6px 0 0; padding-left: 18px; }
.lista-mudancas li { margin: 2px 0; }
details.dobravel-simples { margin-top: 10px; }
details.dobravel-simples > summary { cursor: pointer; font-weight: 600; color: var(--destaque-texto); }

/* 🖥️ Servidor — 16/10/2026 */
.srv-principal { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--destaque) 10%, var(--cartao)); }
.srv-principal > a { font-size: clamp(18px, 3vw, 26px); font-weight: 650; color: var(--destaque-texto); word-break: break-all; }
.srv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip-srv { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borda); }
.chip-srv.ok { background: color-mix(in srgb, #16a34a 12%, var(--cartao)); }
.chip-srv.alerta { background: color-mix(in srgb, #d97706 16%, var(--cartao)); }
.srv-lista td, .srv-dados td { padding: 6px 8px; vertical-align: top; border-top: 1px solid var(--borda); }
.srv-dados td:first-child { width: 34%; }
.campo-sufixo { display: flex; align-items: stretch; }
.campo-sufixo > span { display: flex; align-items: center; padding: 0 8px; background: var(--fundo); border: 1px solid var(--borda); color: var(--suave, inherit); font-size: 13px; }
.campo-sufixo > span:first-child { border-radius: 8px 0 0 8px; border-right: 0; }
.campo-sufixo > span:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.campo-sufixo > input { flex: 1; min-width: 0; border-radius: 0; }
.campos label.linha-check { display: flex; flex-direction: row; gap: 8px; align-items: center; }
.campos label.linha-check input { width: auto; margin: 0; }

/* situação dos anúncios — 16/10/2026 */
.sit { display: inline-block; font-size: 12.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--borda); }
.sit small { opacity: .8; font-size: 11.5px; }
.sit-ativo.sit { background: color-mix(in srgb, #16a34a 14%, var(--cartao)); }
.sit-pausado.sit, .sit-em_revisao.sit { background: color-mix(in srgb, #d97706 16%, var(--cartao)); }
.sit-inativo.sit, .sit-finalizado.sit, .sit-nao_encontrado.sit { background: color-mix(in srgb, #dc2626 13%, var(--cartao)); }
.sit-nada.sit { opacity: .7; }
.sit-txt.sit-ativo { color: #15803d; }
.sit-txt.sit-pausado, .sit-txt.sit-em_revisao { color: #b45309; }
.sit-txt.sit-inativo, .sit-txt.sit-finalizado, .sit-txt.sit-nao_encontrado { color: #b91c1c; }
:root[data-tema="escuro"] .sit-txt.sit-ativo, :root[data-tema="cinza"] .sit-txt.sit-ativo { color: #4ade80; }
:root[data-tema="escuro"] .sit-txt.sit-pausado, :root[data-tema="cinza"] .sit-txt.sit-pausado { color: #fbbf24; }
:root[data-tema="escuro"] .sit-txt.sit-finalizado, :root[data-tema="escuro"] .sit-txt.sit-inativo { color: #f87171; }
.sit-txt.sit-nada { opacity: .7; }
.resumo-anuncios { line-height: 1.6; }
tr.anuncio-parado td { opacity: .78; }

/* 📝 contagem rápida (celular) — 16/10/2026 */
body.ct-aberta { overflow: hidden; }
.ct { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--fundo); }
.ct[hidden] { display: none !important; }
.ct-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--cartao); border-bottom: 1px solid var(--borda); }
.ct-titulo { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.ct-titulo small { font-size: 12px; color: #15803d; }
.ct-titulo small.off { color: #b91c1c; font-weight: 600; }
.ct-progresso { height: 6px; background: color-mix(in srgb, var(--destaque) 15%, var(--cartao)); }
#ct-barra { height: 100%; width: 0; background: var(--destaque); transition: width .25s; }
.ct-progresso-txt { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 14px; font-size: 14px; }
.ct-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ct-busca { position: relative; padding: 0 12px 8px; }
.ct-busca input { width: 100%; font-size: 16px; padding: 10px 12px; }
.ct-achados { position: absolute; left: 12px; right: 12px; top: 100%; z-index: 2; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 50vh; overflow: auto; }
.ct-achados button { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 12px; border: 0;
  border-bottom: 1px solid var(--borda); background: none; font: inherit; color: inherit; }
.ct-cartao { flex: 1; overflow: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.ct-pos { font-size: 13px; opacity: .7; }
.ct-nome { margin: 0; font-size: 22px; line-height: 1.25; }
.ct-info { font-size: 14px; opacity: .85; }
.ct-numero { display: grid; grid-template-columns: 72px 1fr 72px; gap: 10px; margin-top: 8px; }
.ct-mais-menos { font-size: 34px; font-weight: 600; border-radius: 14px; border: 1px solid var(--borda); background: var(--cartao); color: inherit;
  min-height: 72px; touch-action: manipulation; }
.ct-mais-menos:active { background: color-mix(in srgb, var(--destaque) 18%, var(--cartao)); }
#ct-valor { font-size: 44px; font-weight: 650; text-align: center; min-height: 72px; border-radius: 14px; padding: 0 8px; width: 100%; min-width: 0; }
.ct-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-atalhos .btn { min-width: 44px; min-height: 38px; }
.ct-ok { font-size: 13px; color: #15803d; }
.ct-ok.vazio { color: inherit; opacity: .6; }
.ct-nav { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; margin-top: auto; padding-top: 8px; }
.ct-nav .btn { min-height: 52px; font-size: 16px; }
.ct-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--cartao); border-top: 1px solid var(--borda); }
.ct-rodape > div { display: flex; flex-direction: column; gap: 4px; }
.ct-rodape .btn { min-height: 48px; padding: 0 18px; font-size: 16px; }
.ct-fim { text-align: center; padding: 40px 10px; font-size: 18px; }
@media (min-width: 761px) { .ct { inset: 24px max(24px, calc(50vw - 300px)); border-radius: 16px; border: 1px solid var(--borda); box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; } }

/* contagem por marca (Bioage por último) — 16/10/2026 */
.ct-marcas { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 2px; scrollbar-width: none; }
.ct-marcas::-webkit-scrollbar { display: none; }
.ct-marcas button { flex-shrink: 0; font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--borda);
  background: var(--cartao); color: inherit; }
.ct-marcas button small { opacity: .75; margin-left: 3px; }
.ct-marcas button.ativa { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.ct-marcas button.completa:not(.ativa) { border-color: #16a34a; }
.ct-troca-marca { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--destaque) 12%, var(--cartao)); font-size: 15px; }
.ct-pos .etiqueta-marca { margin-right: 6px; }
tr.grupo-marca td { background: color-mix(in srgb, var(--destaque) 10%, var(--cartao)); font-weight: 650; font-size: 15px; padding: 8px 12px; }
tr.grupo-marca small { font-weight: 450; opacity: .7; margin-left: 6px; }

/* venda de vendedor: cliente profissional × homecare (16/10/2026) */
fieldset.tipo-cliente { border: 1px solid var(--borda); border-radius: 10px; padding: 6px 12px 10px; display: flex; gap: 18px; flex-wrap: wrap; margin: 0; }
fieldset.tipo-cliente legend { font-size: 13px; padding: 0 4px; }
fieldset.tipo-cliente label { display: flex; align-items: center; gap: 6px; flex-direction: row; font-size: 15px; cursor: pointer; }
.item-pedido .preco-unit { grid-column: 1 / -1; }
.selo-tipo-cliente { font-size: 12px; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--destaque) 14%, var(--cartao)); }
.selo-tipo-cliente.homecare { background: color-mix(in srgb, #16a34a 16%, var(--cartao)); }
.precos-vendedor { margin: 10px 0 4px; padding: 10px 12px; border: 1px dashed var(--borda); border-radius: 10px; }
.precos-vendedor .campos { margin-top: 6px; }

/* 📇 clientes (16/10/2026) */
.filtros-clientes #cli-busca, .filtros-clientes #tk-busca { flex: 1 1 320px; min-width: 0; font: inherit; color: var(--texto); background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 10px; padding: 9px 12px; }
.filtros-clientes { gap: 8px; }
.kpi-clicavel { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kpi-clicavel:hover { border-color: var(--destaque); }
.kpi-clicavel.ativo { border-color: var(--destaque); box-shadow: 0 0 0 2px color-mix(in srgb, var(--destaque) 25%, transparent); }
.kpi-texto { font-size: 18px; }
.kpis-ficha { margin-bottom: 8px; }
.selo-tabela { font-size: 12px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--borda); }
.selo-nivel { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #d97706 18%, var(--cartao)); }
.selo-sss { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, #2563eb 16%, var(--cartao)); font-weight: 600; }
.titulo-secao { margin: 16px 0 6px; font-size: 15px; }
.acoes-contato { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.lista-compras { max-height: 360px; overflow-y: auto; }
.centro { text-align: center; }
.linha-tabela-preco { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.linha-tabela-preco input[data-nome-tabela] { flex: 1; font: inherit; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--fundo); color: var(--texto); }
.escolher-cliente { position: relative; }
.lista-busca-cliente { position: absolute; left: 0; right: 0; z-index: 5; max-height: 320px; overflow-y: auto; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.lista-busca-cliente button { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0;
  border-bottom: 1px solid var(--borda); padding: 8px 12px; cursor: pointer; }
.lista-busca-cliente button:hover { background: color-mix(in srgb, var(--destaque) 8%, var(--cartao)); }
.lista-busca-cliente button.novo { color: var(--destaque-texto); font-weight: 600; }
.lista-busca-cliente button.desabilitado { opacity: .55; }
.lista-busca-cliente .vazio-busca { padding: 10px 12px; }
.cliente-escolhido { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--destaque); background: color-mix(in srgb, var(--destaque) 6%, var(--cartao)); }

/* 📅 fechamento anual e 📤 extração (16/10/2026) */
.barras-ano { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 10px; }
.barras-ano > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%;
  font-size: 11px; color: var(--suave); gap: 4px; min-width: 0; }
.barras-ano b { font-size: 10px; color: var(--texto); font-weight: 600; white-space: nowrap; }
.barras-ano .par { display: flex; align-items: flex-end; gap: 2px; width: 100%; max-width: 54px; height: 100%; }
.barras-ano .par i { flex: 1; border-radius: 5px 5px 0 0; min-height: 2px; }
.barras-ano i.atual, .leg.atual { background: var(--destaque); }
.barras-ano i.anterior, .leg.anterior { background: color-mix(in srgb, var(--suave) 35%, transparent); }
.leg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
.tabela-compacta td, .tabela-compacta th { font-size: 13px; padding: 6px 7px; }
tr.linha-total td { border-top: 2px solid var(--borda); }
.opcoes-linha { display: flex; flex-wrap: wrap; gap: 4px 16px; }
#form-extrair fieldset { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; margin: 0; }
#form-extrair fieldset label.linha-check { margin: 3px 0; }
@media (max-width: 600px) { .barras-ano b { display: none; } }
.kpis-fech { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpis-fech .kpi-valor { white-space: nowrap; font-size: clamp(20px, 2vw, 26px); }
@media (max-width: 600px) { #origem-filtro, #loja-filtro { max-width: 31vw; font-size: 13px; padding-left: 6px; padding-right: 2px; } }
.aviso-bloqueio { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid #dc2626;
  background: color-mix(in srgb, #dc2626 8%, var(--cartao)); }
.aviso-bloqueio p { margin: 4px 0; }

/* 🛎️ atendimento ML (19/10/2026) */
.pergunta-ml { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.pergunta-ml p { margin: 4px 0 8px; }
.pergunta-ml textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--fundo); color: var(--texto); margin-bottom: 6px; box-sizing: border-box; }

/* 🎫 tickets (19/10/2026) */
.tk-selo { font-size: 12px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; font-weight: 600; }
.tk-aberto { background: color-mix(in srgb, #2563eb 16%, var(--cartao)); }
.tk-andamento { background: color-mix(in srgb, #d97706 18%, var(--cartao)); }
.tk-aguardando { background: color-mix(in srgb, #dc2626 16%, var(--cartao)); }
.tk-resolvido { background: color-mix(in srgb, #16a34a 18%, var(--cartao)); }
.tk-fechado { background: color-mix(in srgb, var(--suave) 18%, var(--cartao)); }
.tk-prio { font-size: 12px; }
.tk-prio-alta { color: #d97706; font-weight: 600; }
.tk-prio-urgente { color: #dc2626; font-weight: 700; }
tr.tk-nao-lido td { font-weight: 600; }
.tk-info { margin: 4px 0 10px; }
.tk-ctx { margin-top: 6px; }
.tk-msgs { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.tk-msg { border: 1px solid var(--borda); border-radius: 12px; padding: 8px 12px; max-width: 85%; background: var(--cartao); }
.tk-msg.do-ti { align-self: flex-end; background: color-mix(in srgb, var(--destaque) 8%, var(--cartao)); }
.tk-msg.interna { border-style: dashed; background: color-mix(in srgb, #d97706 8%, var(--cartao)); }
.tk-autor { font-size: 13px; margin-bottom: 4px; }
.tk-texto { white-space: normal; overflow-wrap: anywhere; }
.tk-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tk-imgs img { max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--borda); }
.tk-evento { align-self: center; font-size: 12px; color: var(--suave); }
.tk-resposta { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tk-resposta textarea { font: inherit; padding: 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); }
.tk-resposta-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.tk-acoes { display: flex; gap: 6px; }
.tk-anexos { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-colado { font-size: 13px; padding: 2px 8px; border: 1px solid var(--borda); border-radius: 999px; }
.tk-colado button { border: 0; background: none; cursor: pointer; color: inherit; }

/* 🔄 atualizar no topo (19/10/2026) */
.menu-atualizar .menu-info { font-size: 12px; color: var(--suave); padding: 6px 10px 2px; }
@media (max-width: 600px) { .menu-atualizar .so-largo { display: none; } }

/* 📦 kit (19/10/2026) */
.kit-caixa { margin: 10px 0 4px; padding: 10px 12px; border: 1px dashed var(--borda); border-radius: 10px; }
.kit-tabela { width: 100%; margin-top: 8px; }
.kit-tabela input { font: inherit; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); width: 100%; box-sizing: border-box; }
.kit-tabela .kit-qtd { width: 80px; text-align: right; }
.selo-kit { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #7c3aed 16%, var(--cartao)); }

/* 🔔 avisos (19/10/2026) */
.menu-avisos summary { position: relative; }
.menu-avisos .contador { position: absolute; top: -6px; right: -6px; }
.contador.contador-calmo { background: #d97706; }
.lista-avisos { width: min(420px, 92vw); max-height: 70vh; overflow-y: auto; padding: 6px; }
.aviso-item { display: flex; gap: 8px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 14px;
  border-left: 4px solid transparent; }
.aviso-item:hover { background: color-mix(in srgb, var(--destaque) 8%, var(--cartao)); }
.aviso-alto { border-left-color: #dc2626; }
.aviso-medio { border-left-color: #d97706; }
.aviso-baixo { border-left-color: #2563eb; }

/* 📢 anúncio por plataforma (19/10/2026) */
.abas-anuncio-plat { margin: 6px 0 10px; }
.regras-aplat { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.regras-aplat ul { list-style: none; margin: 6px 0 0; padding: 0; columns: 2; column-gap: 18px; }
@media (max-width: 700px) { .regras-aplat ul { columns: 1; } }
.regras-aplat li { margin: 2px 0; break-inside: avoid; }
.regra-falta { color: #dc2626; }
.regra-rec { color: #b45309; }
.pronto[data-pronto-plat] { cursor: pointer; }

/* 💬 conversa do ML, 🚀 publicar, ↩️ devolução, 🏷️ promoção (19/10/2026) */
.conversa-ml { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px;
  border: 1px solid var(--borda); border-radius: 10px; margin: 8px 0; background: var(--fundo); }
.msg-ml { max-width: 80%; padding: 6px 10px; border-radius: 10px; background: var(--cartao); border: 1px solid var(--borda); }
.msg-ml p { margin: 2px 0 0; white-space: pre-wrap; }
.msg-ml.minha { align-self: flex-end; background: color-mix(in srgb, var(--destaque) 12%, var(--cartao)); }
.publicar-ml { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; border: 1px dashed var(--borda); border-radius: 10px; }
.publicar-ml > small, .publicar-ml > #pub-ml-resultado { flex-basis: 100%; }
.publicar-ml ul { margin: 4px 0; padding-left: 18px; }
.devolucao-nota { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--borda); }
.preco-promo { width: 7em; }

.copiar-sku { border: 1px dashed var(--borda); background: transparent; color: inherit; font: inherit; padding: 0 5px; border-radius: 6px; cursor: copy; }
.copiar-sku:hover { border-style: solid; background: var(--cartao); }
.copiar-sku.copiado { border-color: #2e7d32; color: #2e7d32; }

/* 💲 tabela rápida de custos e preços */
dialog.tela-cheia { width: calc(100vw - 24px); max-width: none; height: calc(100vh - 24px); max-height: none; display: none; flex-direction: column; }
dialog.tela-cheia[open] { display: flex; }
.grade-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grade-topo h2 { margin: 0 8px 0 0; }
.grade-acoes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.grade-rolagem { flex: 1; overflow: auto; border: 1px solid var(--borda); border-radius: 8px; }
#grade-tabela { border-collapse: collapse; width: 100%; }
#grade-tabela thead th { position: sticky; top: 0; background: var(--cartao); z-index: 1; }
#grade-tabela td { padding: 1px 4px; border-bottom: 1px solid var(--borda); }
.celula-grade { width: 7.5em; text-align: right; padding: 3px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; font: inherit; }
.celula-grade:hover { border-color: var(--borda); }
.celula-grade:focus { border-color: var(--destaque); outline: none; background: var(--cartao); }
.celula-grade.mudou { background: #fff3b0; color: #222; }

/* menu de páginas: quebra em linhas em vez de rolar de lado (fora do celular) */
@media (min-width: 601px) {
  .abas { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; }
  .topo.abas-cheias { flex-wrap: wrap; row-gap: 6px; }
  .topo.abas-cheias .abas { order: 3; flex-basis: 100%; justify-content: center; }
}
#form-ml-conversa > label, #form-ml-reclamacao > label, #form-devolucao > label { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
#form-ml-conversa textarea, #form-ml-reclamacao textarea, #form-devolucao textarea { width: 100%; box-sizing: border-box; font: inherit; }
.publicar-ml select { width: auto; }

/* 🔁 atualizar SKUs pela planilha */
.skus-opcoes { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 6px 0; }
.skus-opcoes select { width: auto; }
.skus-prod { width: 100%; min-width: 260px; }
#skus-tabela { border-collapse: collapse; width: 100%; }
#skus-tabela thead th { position: sticky; top: 0; background: var(--cartao); z-index: 1; text-align: left; }
#skus-tabela td { padding: 3px 6px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
#skus-tabela tr.regra-falta td { background: color-mix(in srgb, #ffb300 12%, transparent); }

#skusa-grupos tr.fora-loja td { opacity: .35; }
#skusa-grupos tr.fora-loja [data-skus-ml] { display: none; }

.sync-sku { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 8px 10px; border: 1px dashed var(--borda); border-radius: 10px; }
.sync-sku small { flex-basis: 100%; }

/* 🏷️ etiquetas de todos, por marketplace (20/10/2026) */
.envios-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-left: auto; }
.envios-etiquetas .etq-plat { display: inline-flex; align-items: center; gap: 6px; }
/* Envios: colunas fixas, produto numa linha (nome inteiro no title), botões quebram linha em vez de sumir (20/10/2026) */
.tabela-envio { table-layout: fixed; width: 100%; }
.tabela-envio col.c-cli { width: 38%; }
.tabela-envio col.c-prazo { width: 118px; }
.tabela-envio .item-env { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92em; cursor: default; }
.tabela-envio td { overflow-wrap: anywhere; }
.tabela-envio .prazo { white-space: nowrap; }
@media (max-width: 600px) { .tabela-envio colgroup { display: none; } }
.aviso-filtro { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, #f59e0b 14%, var(--cartao));
  border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--borda)); font-size: .92em; }

.num-curto { width: 84px; display: inline-block; padding: 4px 6px; }
/* caixinhas da sincronização (SKU automático, estoque fictício) lado a lado, não empilhadas */
.sync-sku label.check { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; margin: 0 8px 0 0; font-weight: 450; }
.sync-sku label.check input { width: auto; margin: 0; }
.sync-sku > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sync-sku > span > span { display: inline-flex; flex-wrap: wrap; gap: 4px 4px; }

/* 💸 custo de cada plataforma (20/10/2026) */
.custo-plat-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
.custo-plat-campos > span { flex-basis: 100%; }
.custo-plat-campos label { flex: 1 1 110px; }
.tabela-custos td, .tabela-custos th { white-space: nowrap; }
.tabela-custos tr.linha-total td { border-top: 2px solid var(--borda); background: color-mix(in srgb, var(--destaque) 6%, var(--cartao)); }
.tabela-custos th.detalhe-custo, .tabela-custos td.detalhe-custo { color: var(--texto-suave, #666); font-size: .92em; }
#form-custo-fixo label.check { flex-direction: row; align-items: center; gap: 6px; align-self: end; }
#form-custo-fixo label.check input { width: auto; }

/* ☁️ links das fotos (imageupload.io) — 21/10/2026 */
.nuvem-painel { margin: 0 0 12px; padding: 10px 12px; border: 1px dashed var(--borda); border-radius: 10px; display: grid; gap: 6px; }
.nuvem-painel:empty { display: none; }
.nuvem-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.nuvem-linha .acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.nuvem-progresso { height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--destaque) 15%, var(--cartao)); overflow: hidden; }
.nuvem-progresso > div { height: 100%; background: var(--destaque); transition: width .4s; }

/* ⋯ Mais de Produtos em grupos (22/10/2026) */
.menu-grupos .menu-info { margin-top: 6px; font-weight: 600; color: var(--destaque-texto, inherit); border-top: 1px solid var(--borda); padding-top: 6px; }
.menu-grupos .menu-info:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.menu-grupos { max-height: 75vh; overflow-y: auto; }
.kpis-pequenos .kpi-valor { font-size: 1.4em; }

/* 📥 entrada de estoque em lote (26/10/2026) */
.ent-barra { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 8px 0; }
.ent-busca { position: relative; flex: 1 1 340px; }
.ent-busca input { width: 100%; font-size: 16px; padding: 8px 10px; }
.ent-sugestoes { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); max-height: 320px; overflow: auto; }
.ent-sugestoes button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ent-sugestoes button:hover, .ent-sugestoes button.ativo { background: color-mix(in srgb, var(--destaque) 14%, transparent); }
#ent-tabela tr.ent-dif td { background: color-mix(in srgb, var(--erro) 12%, transparent); }
#ent-tabela tr.ent-ok td.ent-chegou { color: var(--ok, #1b7f3b); font-weight: 600; }
#ent-tabela tr.ent-piscar td { animation: entPiscar .8s; }
@keyframes entPiscar { from { background: color-mix(in srgb, var(--destaque) 30%, transparent); } }
#ent-editor { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#ent-lista-tela { display: flex; flex-direction: column; gap: 6px; }

#ent-nota { width: 10em; }

/* 💹 resultado: faturamento → lucro (27/10/2026) */
.barras-ano i.lucro, .leg.lucro { background: #16a34a; }
.barras-ano i.lucro.negativo { background: #dc2626; }
.tabela-dre { width: 100%; border-collapse: collapse; }
.tabela-dre td { padding: 6px 4px; border-bottom: 1px solid var(--borda); }
.tabela-dre td.n { text-align: right; white-space: nowrap; }
.tabela-dre tr.sub td { font-weight: 600; border-top: 2px solid var(--borda); }
.tabela-dre tr.menos td:first-child { padding-left: 16px; color: var(--suave); }
.tabela-dre tr.final td { font-size: 1.1em; font-weight: 650; }
#res-busca { min-width: 180px; }

/* 📊 painel do Início (27/10/2026) */
.painel-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 6px; }
.painel-topo .abas-marca { margin: 0; }
.kpis-operacao .kpi { padding: 8px 12px; }
.kpis-operacao .kpi-valor { font-size: 18px; }
.kpis-painel { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpis-painel .kpi-valor { font-size: clamp(20px, 2vw, 26px); white-space: nowrap; }
.kpi .var { font-size: 12px; font-weight: 600; margin-left: 4px; }
.kpi-destaque { border-color: color-mix(in srgb, var(--ok) 45%, var(--borda)); background: color-mix(in srgb, var(--ok) 6%, var(--cartao)); }
.barras-painel { height: 210px; gap: 2px; }
.barras-painel > div { font-size: 10px; }
.barras-painel .par { max-width: 34px; }
.canal-painel { margin: 0 0 10px; }
.canal-painel .plat-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.canal-painel .barra { height: 8px; border-radius: 6px; background: var(--fundo); overflow: hidden; margin: 4px 0 2px; }
.canal-painel .barra i { display: block; height: 100%; background: var(--destaque); border-radius: 6px; }
.lista-alertas { max-height: 380px; overflow-y: auto; }
.alerta-item { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.alerta-item:last-child { border-bottom: 0; }
.alerta-item small { display: block; color: var(--suave); }
.selo-abc { display: inline-block; min-width: 20px; text-align: center; border-radius: 6px; font-weight: 700; font-size: 12px; padding: 1px 5px; color: #fff; }
.selo-abc.A { background: #16a34a; } .selo-abc.B { background: #d97706; } .selo-abc.C { background: #6b7280; }
.resumo-whats { white-space: pre-wrap; font: inherit; font-size: 13px; margin: 0; background: var(--fundo); border-radius: 10px; padding: 10px 12px;
  max-height: 320px; overflow-y: auto; }

/* menu em grupos (27/10/2026): grupos na linha de cima, páginas do grupo na de baixo */
.grupos { display: flex; gap: 2px; background: var(--fundo); padding: 3px; border-radius: 12px; border: 1px solid var(--borda);
  min-width: 0; overflow-x: auto; scrollbar-width: none; }
.grupos::-webkit-scrollbar { display: none; }
.grupos button { font: inherit; font-weight: 600; padding: 6px 12px; border: 0; border-radius: 9px; background: none; color: var(--suave);
  cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.grupos button:hover { color: var(--texto); }
.grupos button.ativa { background: var(--destaque); color: #fff; box-shadow: var(--sombra); }
.topo .abas { order: 3; flex-basis: 100%; background: none; border: 0; padding: 0; justify-content: flex-start; }
.topo .abas a { padding: 4px 10px; font-size: 14px; }
.topo .abas a.ativa { background: color-mix(in srgb, var(--destaque) 14%, transparent); color: var(--destaque-texto); box-shadow: none; }
.topo .abas a.ativa .contador { background: var(--erro); color: #fff; }
.topo { flex-wrap: wrap; row-gap: 6px; }
.topo.sem-subabas .abas { display: none; }
.abas a.fora-grupo { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: 0; opacity: 0; pointer-events: none;
  clip-path: inset(50%); }
@media (max-width: 1100px) { .grupos { order: 2; flex-basis: 100%; } .topo-direita { order: 1; } }
@media (max-width: 600px) {
  .topo-direita { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 1; min-width: 0; row-gap: 6px; }
}

/* 📈 análise por SKU (27/10/2026) */
.tabela-sku td { vertical-align: top; }
.tabela-sku td.n small { display: block; }
.tabela-sku tr.clicavel:hover td { background: color-mix(in srgb, var(--destaque) 5%, transparent); }
.sinal { display: inline-block; font-size: 11px; border-radius: 6px; padding: 1px 6px; margin: 2px 2px 0 0; background: var(--fundo);
  border: 1px solid var(--borda); white-space: nowrap; }
.sinal.ruim { border-color: color-mix(in srgb, var(--erro) 50%, var(--borda)); color: var(--erro); }
.sinal.bom { border-color: color-mix(in srgb, var(--ok) 50%, var(--borda)); color: var(--ok); }
#sku-busca { min-width: 200px; }

/* 🏷️ ofertas (28/10/2026) */
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 14px; align-items: end; }
.form-grade label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.form-grade label.linha-check { flex-direction: row; align-items: center; gap: 6px; }
.form-grade input, .form-grade select { font: inherit; }
#form-ofertas-cfg input[size] { width: 4em; display: inline-block; }

/* 🖥️ saúde do servidor (28/10/2026) */
.grade-uso { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 18px; }
.uso-srv .plat-topo { display: flex; justify-content: space-between; gap: 8px; }
.uso-srv .barra { height: 9px; border-radius: 6px; background: var(--fundo); overflow: hidden; margin: 4px 0 3px; }
.uso-srv .barra i { display: block; height: 100%; border-radius: 6px; }

#preco-taxas input.campo-tabela { width: 64px !important; min-width: 0; padding: 4px 6px; }
#preco-taxas th, #preco-taxas td { white-space: nowrap; }