:root{ --fundo:#f6f7f9; --papel:#fff; --texto:#1c1f24; --suave:#646b75; --borda:#e3e6ea; --linha:#eef0f3; --acento:#2d6cdf; --ok:#178a4a; --erro:#c0392b; --aviso:#b8860b; --lateral:#fff; /* O cinza da linha de resumo: entre a zebra das linhas e o escuro do cabecalho, para separar sem competir com o titulo. */ /* A linha de somatória: mais escura que a zebra, para não se confundir com uma linha comum (dono, 21/09/2026). */ --resumo:#ccd3de; --otimo:#1565c0; /* A listra da lista. Era #fafbfc — 1% de diferenca para o branco, o que na pratica nao separava uma linha da outra. Um tom abaixo resolve sem pesar: continua mais clara que a borda (--linha), entao a linha ainda manda no desenho da tabela. UM TOKEN SO, de proposito: as tres listas do sistema (tabela comum, tabela compacta e a lista de pedidos) leem daqui, entao o ajuste vale em todas de uma vez. */ --zebra:#f1f3f6; --realce:#f1f5fd; /* Célula CALCULADA da Precificação: um verde claro, diferente da listra e do realce, para não se confundir com o que se digita. */ --calc:#e3f4e9; /* A coluna que o dono destaca clicando no titulo (Envios Full): um tom claro o bastante para o numero continuar lendo em preto. */ --coluna-marcada:#dcebff; /* A linha sob o mouse no Envios Full: mais escura que a zebra, para o olho nao pular de linha no meio de tanto numero. No cruzamento com a coluna destacada, um azul um tom abaixo. */ --linha-foco:#dfe5ee; --coluna-marcada-foco:#c4dbfb; /* O cinza do cabecalho de tabela: escuro o bastante para a fonte branca passar em contraste, e sem puxar para o azul do acento. */ --cabecalho:#3b424e; --cabecalho-realce:#4a5261; --cabecalho-texto:#fff; /* O mapa de vendas por estado: branco e "sem vendas"; quanto mais venda, mais perto da cor cheia. */ --mapa:#1f5fbf; --mapa-vazio:#ffffff; /* Usados no estilo e nunca declarados até a auditoria de 18/09/2026 — no escuro, a faixa de andamento ficava creme com letra clara. */ --fundo-aviso:#fff8e6; --cartao:#fff; --texto-fraco:#7a7a7a; --cor-serie:#2d6cdf; } @media (prefers-color-scheme: dark){ :root:not([data-theme=light]){ --fundo:#14171c; --papel:#1c2027; --texto:#e8eaed; --suave:#98a0ab; --borda:#2b313a; --linha:#242a32; --acento:#5b91f5; --ok:#4cc17e; --erro:#ef6b5e; --aviso:#d6a336; --lateral:#181c22; --resumo:#39414e; --otimo:#68b0f8; /* No escuro, "subir um tom" e o contrario: a listra tem que ficar mais CLARA que o papel para separar as linhas. Mesmo salto. */ --zebra:#262d37; --realce:#232a34; --calc:#1c3326; --coluna-marcada:#223754; --linha-foco:#303947; --coluna-marcada-foco:#2c4670; --cabecalho:#333b47; --cabecalho-realce:#414a58; --cabecalho-texto:#f2f4f7; --mapa:#6aa2ff; --mapa-vazio:#262c35; --fundo-aviso:#2e2818; --cartao:#1c2027; --texto-fraco:#98a0ab; --cor-serie:#5b91f5; } } *{box-sizing:border-box} body{margin:0;background:var(--fundo);color:var(--texto); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px;line-height:1.55} /* LINK SEM CARA DE LINK, em todo o sistema (dono, 18/09/2026: "todo lugar com link, nunca deixe com formatação com cores de links, deixe a formatação normal da página"). Seletor de elemento, o mais fraco que existe: botão, aba, chip e menu têm classe e continuam como são. Dentro de tabela e de texto, o passar do mouse sublinha — é o único sinal de que dá para clicar. */ a,a:visited{color:inherit;text-decoration:none} table a:not(.botao):hover,.cartao p a:not(.botao):hover{ text-decoration:underline;text-underline-offset:2px} .layout{display:flex;min-height:100vh} /* `sticky` + `align-self:flex-start` e o par que faz o menu ficar parado enquanto so o conteudo rola. Sem o align-self, o item flex estica ate a altura do irmao mais alto e nao sobra folga para ele grudar em lugar nenhum — o sticky vira enfeite. A altura de uma tela com `overflow-y` cobre o caso do menu crescer mais que o monitor. */ aside{width:236px;flex:0 0 236px;background:var(--lateral); border-right:1px solid var(--borda);padding:14px 0; display:flex;flex-direction:column; position:sticky;top:0;align-self:flex-start; height:100vh;overflow-y:auto} aside .marca{padding:0 20px 14px;font-weight:700;font-size:1.12rem; line-height:1.2} aside .marca span{display:block;font-size:.72rem;font-weight:400; color:var(--suave);letter-spacing:.02em} /* Titulo de subgrupo com fundo proprio: sem ele, "Promoções" parecia mais um item clicavel da lista, e nao o rotulo do que vem abaixo. */ /* FUNDO ESCURO, LETRA BRANCA — a mesma cor dos cabecalhos de tabela. O menu passou de cinco para nove secoes, e com o cinza claro de antes as faixas deixaram de separar coisa nenhuma. O dono, em 10/09/2026: "ja tem muitos e esta dificil de ler... talvez a mesma cor dos titulos de tabelas, com fonte branca". E a mesma variavel, entao os dois lugares continuam iguais sozinhos. */ aside .grupo{margin:12px 0 4px;padding:5px 20px;font-size:.66rem; font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--cabecalho-texto);background:var(--cabecalho)} aside .grupo + a{margin-top:2px} aside .marca{display:flex;align-items:center;gap:10px} aside .marca img{width:34px;height:34px;flex:0 0 34px;border-radius:8px; object-fit:contain} /* A MARCA VIROU LINK para o Dashboard (22/09/2026): ela precisa continuar parecendo o cabecalho do menu, e nao mais um item da lista. */ aside a.marca{border-left:0;padding:0 20px 14px;color:var(--texto)} /* O ALFINETE, ao lado da marca (05/10/2026). */ aside .marca-linha{display:flex;align-items:flex-start;justify-content:space-between} aside .marca-linha a.marca{flex:1;min-width:0;padding-right:4px} .fixar-menu{flex:0 0 auto;margin:4px 10px 0 0;width:28px;height:28px; display:inline-flex;align-items:center;justify-content:center;padding:0; border:1px solid var(--borda);border-radius:7px;background:var(--papel); color:var(--acento);cursor:pointer} .fixar-menu[aria-pressed="false"]{color:var(--suave);transform:rotate(45deg)} .fixar-menu:hover{border-color:var(--acento)} /* O MENU RECOLHIDO (dono, 05/10/2026: "desabilitado o menu fica retrátil e se esconde na esquerda, e quando passo o mouse na barra com os ícones ele aparece"). Vira uma faixa com o logo e o ícone de cada grupo; ao passar o mouse abre inteiro POR CIMA do conteúdo, sem empurrar a página. Só em tela larga: no celular o menu já vai para o topo. */ @media (min-width:761px){ html.menu-solto aside{position:fixed;left:0;top:0;bottom:0;height:100vh; width:58px;flex:none;z-index:70;overflow:hidden;transition:width .15s} html.menu-solto main{margin-left:58px} html.menu-solto aside:hover{width:236px;overflow-y:auto; box-shadow:6px 0 24px rgba(0,0,0,.18)} html.menu-solto aside:not(:hover) > a, html.menu-solto aside:not(:hover) .quem, html.menu-solto aside:not(:hover) .fixar-menu, html.menu-solto aside:not(:hover) .marca div{display:none} html.menu-solto aside:not(:hover) a.marca{padding:0 12px 14px} html.menu-solto aside:not(:hover) .grupo{font-size:0;letter-spacing:0; padding:7px 0;justify-content:center;background:transparent;margin:6px 0} html.menu-solto aside:not(:hover) .grupo svg{width:22px;height:22px; flex:0 0 22px} } aside a.marca:hover{background:transparent} aside a.marca:hover div{color:var(--acento)} /* O TITULO DO GRUPO COM A MARCA DO MARKETPLACE ao lado do nome. */ aside .grupo.com-marca{display:flex;align-items:center;gap:7px} aside .grupo.com-marca svg{flex:0 0 16px;border-radius:3.5px} aside a{display:block;padding:6px 20px;color:var(--texto); text-decoration:none;font-size:.92rem;border-left:3px solid transparent} aside a:hover{background:var(--linha)} aside a.ativo{border-left-color:var(--acento);color:var(--acento); font-weight:600;background:var(--linha)} /* Sub-item: uma tela QUE PERTENCE a de cima. O recuo diz isso sem custar um nivel de navegacao. A CLASSE SE CHAMA `subitem`, E NAO `sub`, POR UM DEFEITO REAL. ------------------------------------------------------------- Ela se chamava `sub`. Mais abaixo neste mesmo arquivo existe `.sub{color:...;margin:0 0 24px;...}`, que e o SUBTITULO da pagina. Sao dois assuntos sem relacao nenhuma com o mesmo nome de classe. `aside a.sub` tem especificidade maior, entao vencia no que declarava — recuo, tamanho, cor. Mas ela nao declarava `margin`, e o `margin:0 0 24px` do subtitulo escorria para dentro do menu: 24 pixels de vao depois de "Sincronizacao", que ninguem pediu e que fazia "Produtos" parecer de outro grupo. Foi o que o dono viu na tela em 02/09/2026. Consertar com `margin:0` aqui esconderia a colisao ate a proxima propriedade nova no subtitulo. Renomear a classe faz as duas nunca mais se encontrarem. */ aside a.subitem{padding-left:36px;font-size:.86rem;color:var(--suave)} aside a.subitem:hover{color:var(--texto)} aside a.subitem.ativo{color:var(--acento)} /* Bloco de acao destrutiva. Vermelho e visivel de proposito: estava escondido dentro de um
em letra pequena, e acao que nao volta atras nao pode ficar mais discreta que um botao comum. */ .cartao.perigo{border-left:4px solid var(--erro)} .cartao.perigo h2{color:var(--erro)} button.perigo{background:var(--erro);border-color:var(--erro);color:#fff} /* O LINK que leva a remover tambem e vermelho, e discreto: ele nao pode competir com os botoes que a pessoa usa todo dia, mas tem de ser inconfundivel quando ela procurar por ele. */ a.botao.perigo{color:var(--erro);border-color:var(--erro);background:none} a.botao.perigo:hover{background:var(--erro);color:#fff} .form-remover{margin-top:16px;padding-top:14px; border-top:1px solid var(--borda);display:grid;gap:6px;max-width:340px} .form-remover label{font-size:.8rem;color:var(--texto);font-weight:600} button.perigo:hover:not(:disabled){filter:brightness(1.08)} /* Quem esta logado, no pe do menu. `margin-top:auto` empurra para baixo sem depender da altura do menu: com ou sem o grupo de Administracao, o bloco fica colado no rodape. */ aside .quem{margin-top:auto;padding:10px 20px 8px; border-top:1px solid var(--borda);font-size:.82rem} aside .quem .nome{font-weight:600;line-height:1.3} aside .quem .papel{color:var(--suave);font-size:.72rem;margin-bottom:6px} aside .quem a{display:inline;padding:0;font-size:.78rem;color:var(--suave); border:0;text-decoration:none} aside .quem a:hover{background:none;color:var(--texto)} /* SO UM dos dois pode ter `margin-top:auto`. Dois filhos com auto na mesma coluna flex DIVIDEM o espaco livre entre si: medido, o bloco do usuario ficava com 190px de vao ate o botao, boiando no meio da barra em vez de colado no rodape. Quando nao ha usuario, o botao mantem o auto dele e continua no lugar certo. */ aside .quem + .atualizar-tudo{margin-top:0} /* ------------------------------------------------------------------ Tela de entrada. Sem menu, sem rodape, sem link que leve para fora: a unica coisa que da para fazer aqui e entrar. Cada elemento a mais nesta pagina e uma pergunta a mais para quem so quer ver as vendas. ------------------------------------------------------------------ */ .entrada{min-height:100vh;display:flex;align-items:center; justify-content:center;padding:28px 20px; /* Um brilho quente atras da marca, na cor da propria logo. */ background: radial-gradient(900px 520px at 50% -6%, rgba(245,197,24,.10), transparent 62%), var(--fundo)} .entrada .caixa{width:100%;max-width:392px} .entrada .marca{display:flex;flex-direction:column;align-items:center; text-align:center;gap:12px;margin-bottom:22px} .entrada .marca img{width:112px;height:112px;border-radius:26px; object-fit:contain; /* Sombra na cor da logo: assenta a imagem no fundo escuro sem precisar de moldura nem de borda. */ box-shadow:0 12px 34px rgba(245,197,24,.16)} .entrada .marca .nome{font-size:1.62rem;font-weight:700;letter-spacing:-.015em; line-height:1.1} .entrada .marca .sub{color:var(--suave);font-size:.84rem;margin-top:3px} .entrada form.cartao{padding:22px 22px 20px} .entrada h2{font-size:1.02rem;margin:0 0 4px} .entrada .passo{color:var(--suave);font-size:.85rem;margin:0 0 14px} .entrada label{display:block;font-size:.79rem;color:var(--suave); margin:13px 0 5px;font-weight:600;letter-spacing:.01em} .entrada input{width:100%;box-sizing:border-box;padding:11px 12px; border:1px solid var(--borda);border-radius:9px;font-size:.96rem; font-family:inherit;background:var(--fundo);color:var(--texto)} .entrada input:focus{outline:none;border-color:var(--acento); box-shadow:0 0 0 3px rgba(245,197,24,.14)} .entrada button[type=submit]{width:100%;margin-top:20px;padding:11px; font-size:.96rem;font-weight:600} /* Ajuda embaixo do campo: as regras da senha, o aviso de forca. */ .entrada .dica{font-size:.76rem;color:var(--suave);margin:6px 0 0; line-height:1.45} /* Os dois caminhos alternativos, lado a lado embaixo do cartao. Fora do cartao de proposito: quem chega aqui quer ENTRAR, e recuperar senha ou criar conta sao a excecao, nao a escolha do dia. */ .entrada .outros{display:flex;justify-content:space-between;gap:14px; margin-top:15px;font-size:.85rem} .entrada .outros a{color:var(--suave);text-decoration:none} .entrada .outros a:hover{color:var(--acento);text-decoration:underline} .entrada .voltar{display:block;text-align:center;margin-top:16px; font-size:.85rem;color:var(--suave);text-decoration:none} .entrada .voltar:hover{color:var(--acento)} @media (max-width:420px){ .entrada .marca img{width:88px;height:88px;border-radius:21px} .entrada .marca .nome{font-size:1.42rem} .entrada .outros{flex-direction:column;gap:9px;text-align:center} } /* Lista de CNPJs com caixa de marcar, no cadastro de usuario. Em coluna, e nao em linha: com cinco CNPJs em linha o nome quebra no meio e fica impossivel saber qual caixa e de qual empresa. */ .marcaveis{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px} label.marcavel{display:flex;align-items:center;gap:8px;font-size:.9rem; color:var(--texto);margin:6px 0 0;cursor:pointer} label.marcavel input{width:auto;margin:0} main{flex:1;min-width:0;padding:28px 34px 60px} h1{font-size:1.4rem;margin:0 0 3px} .sub{color:var(--suave);margin:0 0 24px;font-size:.92rem} h2{font-size:1.02rem;margin:0 0 12px} .cartao{background:var(--papel);border:1px solid var(--borda); border-radius:11px;padding:18px 20px;margin-bottom:18px} .ok{border-left:4px solid var(--ok)} .erro{border-left:4px solid var(--erro)} /* Aguardando o Mercado Livre / sem confirmação — nem ok, nem erro. */ .cartao.espera{border-left:4px solid #d99a2b} .aviso{border-left:4px solid var(--aviso)} /* A FAIXA DO RASCUNHO RESTAURADO. Ela nasce pelo JavaScript, quando o que foi digitado e nao chegou a salvar volta para os campos. Amarela e nao vermelha de proposito: nada deu errado agora — o trabalho foi devolvido, e o que se pede e conferir antes de mandar. */ .aviso-rascunho{background:var(--cartao);border:1px solid var(--aviso); border-left:4px solid var(--aviso);border-radius:8px; padding:9px 12px;margin:0 0 10px;font-size:.86rem; display:flex;align-items:center;gap:10px;flex-wrap:wrap} .aviso-rascunho button{margin-left:auto} table{border-collapse:collapse;width:100%} th{text-align:left;font-size:.7rem;text-transform:uppercase; letter-spacing:.05em;color:var(--suave);padding:6px 10px;font-weight:600} td{padding:9px 10px;border-top:1px solid var(--linha);font-size:.9rem; vertical-align:top} .rotulo{color:var(--suave);width:40%} .num{text-align:right;font-variant-numeric:tabular-nums} button:disabled{opacity:.6;cursor:not-allowed} /* Bolinha girando ao lado do botao: enquanto o sistema fala com o Mercado Livre, o usuario precisa ver que ALGO esta acontecendo — senao a tela parece travada e ele clica de novo. */ .girando{display:inline-block;width:15px;height:15px;vertical-align:-3px; margin-left:9px;border:2px solid var(--borda);border-top-color:var(--acento); border-radius:50%;animation:girar .8s linear infinite} .processando{display:inline-flex;align-items:center;gap:0;color:var(--suave); font-size:.8rem} .carregando{display:flex;align-items:center;justify-content:center;gap:12px; padding:26px 12px;color:var(--suave);font-size:.86rem} .girando.grande{width:26px;height:26px;border-width:3px;margin:0} @keyframes girar{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.girando{animation-duration:2.4s}} a.botao,button{display:inline-block;padding:8px 15px;border-radius:8px; background:var(--acento);color:#fff;border:0;text-decoration:none; font-size:.88rem;cursor:pointer;font-family:inherit} a.botao.secundario,button.botao.secundario{background:transparent; color:var(--texto);border:1px solid var(--borda)} button.perigo{background:var(--erro)} button.perigo:disabled{opacity:.5;cursor:not-allowed} .acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px} label{display:block;font-size:.8rem;color:var(--suave);margin:14px 0 5px} input[type=text]{width:100%;padding:9px 11px;border-radius:8px; border:1px solid var(--borda);background:var(--fundo);color:var(--texto); font-size:.9rem;font-family:inherit} .linha{display:flex;gap:16px;flex-wrap:wrap} .linha>div{flex:1;min-width:170px} pre{white-space:pre-wrap;word-break:break-word;font-size:.8rem; background:var(--linha);padding:11px;border-radius:8px;margin:0} .pequeno{font-size:.8rem;color:var(--suave)} .etiqueta{display:inline-block;padding:2px 8px;border-radius:99px; font-size:.72rem;border:1px solid var(--borda);color:var(--suave)} .vazio{color:var(--suave);font-size:.9rem} .filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end} .filtros>div{flex:0 0 auto} .filtros label{margin-top:0} .filtros input,.filtros select{padding:8px 10px;border-radius:8px; border:1px solid var(--borda);background:var(--fundo);color:var(--texto); font-size:.88rem;font-family:inherit} /* Os cartoes de numero. Tres andares fixos — titulo em cima, valor no meio, nota embaixo — e altura igual em toda a fileira: a nota existe sempre, mesmo vazia, senao o cartao sem nota encolhe e o olho le a diferenca de altura como diferenca de importancia. */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px;margin-bottom:12px;align-items:stretch} .kpis.contagem{grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); margin-bottom:18px} .kpi{background:var(--papel);border:1px solid var(--borda);border-radius:11px; padding:12px 15px;display:flex;flex-direction:column;min-height:96px} .kpi .titulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em; color:var(--suave);line-height:1.25;min-height:2.5em} .kpi .valor{font-size:1.16rem;font-weight:650;margin:auto 0; font-variant-numeric:tabular-nums} .kpi .nota{font-size:.74rem;color:var(--suave);margin-top:auto; min-height:1.15em;line-height:1.25} .kpi.destaque{border-left:4px solid var(--ok)} /* A PROJEÇÃO DO MÊS: tracejada e tingida, para nunca ser lida como venda. */ .kpi.projecao{border:1.5px dashed var(--acento); background:linear-gradient(0deg,rgba(45,108,223,.07),rgba(45,108,223,.07)), var(--papel)} .kpi.projecao .valor{color:var(--acento)} /* A correção de SKU na própria linha da lista de SKUs sem cadastro. */ form.linha-correcao{display:flex;gap:6px;margin:0;align-items:center} form.linha-correcao input{width:170px;padding:4px 8px} form.linha-correcao button{padding:4px 12px} /* A variação contra o período anterior, na nota dos cartões. */ .kpi .nota .var{font-weight:650;font-variant-numeric:tabular-nums; white-space:nowrap} .kpi .nota .var.bom{color:var(--ok)} .kpi .nota .var.ruim{color:var(--erro)} .kpi .nota .var-vs,.kpi .nota .var-nada{color:var(--suave)} /* A EVOLUÇÃO DO PERÍODO, entre os cartões e as roscas. */ .evolucao{border:1px solid var(--borda);border-radius:11px;padding:12px 15px; margin:4px 0 16px;background:var(--papel)} .ev-topo{display:flex;justify-content:space-between;gap:10px 20px; flex-wrap:wrap;align-items:flex-start} .ev-topo h3{margin:0 0 2px;font-size:.98rem} .ev-topo p{margin:0} .ev-comparar{font-size:.82rem;display:flex;gap:6px;align-items:center; cursor:pointer;flex-wrap:wrap} .ev-legenda{display:flex;gap:4px 14px;flex-wrap:wrap;margin:8px 0 0} .ev-leg{background:none;border:0;color:var(--texto);font:inherit; font-size:.78rem;cursor:pointer;display:flex;align-items:center;gap:6px; padding:2px 4px;border-radius:6px} .ev-leg:focus-visible{outline:2px solid var(--acento)} .ev-leg[aria-pressed="false"]{opacity:.38;text-decoration:line-through} /* Quadradinho com a cor da linha antes do nome (dono, 25/09/2026): mais facil de relacionar que o traco fino. */ .ev-leg i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 11px} .ev-caixa{position:relative} .ev-caixa svg{width:100%;height:auto;display:block} .ev-grade{stroke:var(--linha);stroke-width:1} .ev-base{stroke:var(--borda);stroke-width:1} .ev-eixo{fill:var(--suave);font-size:12px;font-variant-numeric:tabular-nums} .ev-linha{fill:none;stroke-width:2.4;stroke-linejoin:round; stroke-linecap:round} .ev-anterior{stroke-dasharray:7 6;opacity:.55;stroke-width:2} .ev-area{opacity:.08} .ev-ponto{stroke:var(--papel);stroke-width:1.5} .ev-alvo{fill:transparent;cursor:crosshair} .ev-guia{stroke:var(--suave);stroke-dasharray:3 3;stroke-width:1} .ev-dica{position:absolute;top:6px;background:var(--papel); border:1px solid var(--borda);border-radius:8px;padding:8px 10px; font-size:.78rem;box-shadow:0 4px 14px rgba(0,0,0,.14); pointer-events:none;min-width:200px;z-index:3;line-height:1.5; font-variant-numeric:tabular-nums} .ev-dica i{display:inline-block;width:10px;height:3px;margin-right:6px; vertical-align:3px} .ev-dica hr{border:0;border-top:1px dashed var(--borda);margin:6px 0} .rolagem{overflow-x:auto;border-radius:11px;border:1px solid var(--borda); background:var(--papel)} /* O TÍTULO DAS COLUNAS SEMPRE À VISTA (dono, 02/10/2026: "quando tiver barra de rolagem vertical, faça os títulos ficarem fixos em cima pra sabermos qual coluna é qual"). O `sticky` do cabeçalho (logo abaixo) só gruda dentro de quem ROLA — e a caixa só rolava na horizontal, então ele nunca grudava. Com altura máxima a tabela longa rola dentro do quadro, como no Excel (o mesmo da Precificação), e o título fica parado. A segunda linha de títulos ganha o `top` certo em `SCRIPT_CABECALHO_FIXO`. */ .rolagem{max-height:calc(100vh - 110px);overflow:auto} .rolagem table{min-width:1000px} /* SO O CABECALHO gruda e ganha o fundo escuro. Com `.rolagem th` a regra pegava tambem os `th` de LINHA — a coluna de UF em "Vendas por estado" — e pintava a primeira coluna de escuro com a fonte cinza por cima, ilegivel. Achado pelo dono em 06/09/2026, no dia seguinte a padronizacao. */ .rolagem thead th{position:sticky;top:0;background:var(--cabecalho);z-index:1} /* `th` de linha e cabecalho de LINHA, e nao de tabela: fundo do corpo, como qualquer celula, so que em negrito. */ tbody th{background:transparent;color:var(--texto); border-top:1px solid var(--linha)} .rolagem td{border-top:1px solid var(--linha);white-space:nowrap} .produto{display:flex;gap:9px;align-items:flex-start;min-width:290px; white-space:normal} .produto img{width:38px;height:38px;object-fit:contain;border-radius:6px; background:var(--linha);flex:0 0 38px} .produto .txt{font-size:.85rem;line-height:1.3} .produto .meta{font-size:.72rem;color:var(--suave)} .neg{color:var(--erro)} .pos{color:var(--ok)} .bom{font-weight:600} /* ------------------------------------------------------------------ As quatro cores da margem. azul acima do planejado verde conforme planejado amarelo atencao vermelho verificar Os limites sao POR CNPJ (Configuracoes -> a empresa), porque 20% e otimo em ferramenta e ruim em eletronico. `!important` aqui e proposital, e nao preguica: estes valores aparecem dentro de tabelas e cartoes que ja tem regra de cor propria e mais especifica (`.numeros-pedido .conta b`, `td.num.mc .mc-pct`). Sem isto a cor da margem perde para a cor do contexto — foi exatamente o que aconteceu quando o verde e o vermelho do pedido nao apareciam. */ .mc-azul{color:var(--otimo)!important} .mc-verde{color:var(--ok)!important} .mc-amarelo{color:var(--aviso)!important} .mc-vermelho{color:var(--erro)!important} /* A TELA DE PROMOCOES DA SHOPEE: tres campos que dizem a mesma coisa. O campo de MC nasce colorido pela faixa do CNPJ — a mesma cor que a margem tem em toda tela do sistema. Uma margem preta aqui e colorida na de Pedidos obrigaria a reaprender a ler ao trocar de tela. */ table.promo-shopee input{font-variant-numeric:tabular-nums; text-align:right;font-weight:600} table.promo-shopee input.mc-campo.mc-azul{color:var(--otimo)} table.promo-shopee input.mc-campo.mc-verde{color:var(--ok)} table.promo-shopee input.mc-campo.mc-amarelo{color:var(--aviso)} table.promo-shopee input.mc-campo.mc-vermelho{color:var(--erro)} /* PRECO ACIMA DO CHEIO: promocao nao aumenta preco. O campo diz isso antes de a pessoa clicar em salvar, e o motivo aparece embaixo. */ table.promo-shopee input.campo-ruim{border-color:var(--erro); background:color-mix(in srgb,var(--erro) 8%,transparent); color:var(--erro)} table.promo-shopee .meta{display:flex;align-items:center;gap:5px; flex-wrap:wrap} /* O NOME DA PROMOCAO NA LISTA. Era link azul que virava roxo depois de clicado — a cor dizia "ja visitei", que nao e informacao nenhuma aqui, e competia com o resto da tabela. Agora e o titulo da linha, escuro e forte, e o azul aparece so quando o mouse passa. */ a.nome-promo{color:var(--texto);text-decoration:none;font-weight:650; font-size:.95rem;letter-spacing:-.01em} a.nome-promo:visited{color:var(--texto)} a.nome-promo:hover{color:var(--acento);text-decoration:underline} /* O TITULO QUE ABRE A LOJA. Mesma ideia do nome da promocao: e o titulo da linha, e nao um link azul — o azul aparece no hover, e a setinha diz que sai daqui. */ a.titulo.abre-fora{color:var(--texto);text-decoration:none} /* O SKU que abre a Análise individual, SEM CARA DE LINK (dono, 15/09/2026). */ a.sku-ficha,a.sku-ficha:visited{color:inherit;text-decoration:none} /* O "≈" do valor ESTIMADO, até a plataforma liquidar (dono, 15/09/2026). */ .estimado{color:#b7791f;font-weight:700;cursor:help;margin-right:3px} .selo-afiliado{display:inline-block;font-size:10px;line-height:16px; font-weight:700;color:#fff;background:#c2185b;border-radius:8px; padding:0 6px;margin-left:5px;vertical-align:middle;cursor:help} /* O QUADRO COM FAIXA DE TITULO (dono, 16/09/2026): "uma faixa de titulo em outra cor pra destacar, com um titulo em negrito". A cor e a dos cabecalhos de tabela, para o painel falar uma lingua so. */ .cartao.com-faixa{padding:0;overflow:hidden} .com-faixa > .faixa-titulo{background:var(--cabecalho); color:var(--cabecalho-texto);padding:10px 20px} .com-faixa > .faixa-titulo h2{margin:0;color:inherit;font-weight:700; font-size:1.05rem} .com-faixa > .miolo{padding:18px 20px} .com-faixa > .miolo > .linha > .cartao{margin-bottom:0} .grade-custos{display:grid;gap:14px;align-items:start; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))} .grade-custos > .cartao{margin:0;min-width:0} /* A tabela de custos cabe no cartão: o texto quebra, só o valor não. */ .grade-custos table.densa{width:100%;min-width:0} .grade-custos table.densa td{white-space:normal} .grade-custos table.densa td.num{white-space:nowrap;width:1%} .grade-custos table.densa td.rotulo{width:auto} /* OS QUATRO GRÁFICOS DO DASHBOARD, num padrão só (17/09/2026). */ /* DOIS POR LINHA (dono: faturamento e marketplace em cima, logística e pedidos embaixo); um só quando a tela é estreita. */ .grade-graficos{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:1100px){.grade-graficos{grid-template-columns:1fr}} .grade-graficos > .cartao{margin:0;min-width:0} /* Quando a tabela desce para baixo da rosca, a rosca fica no meio do cartao em vez de sozinha num canto. Lado a lado nao muda nada: a tabela ja ocupa a sobra. */ .qp-corpo{display:flex;gap:18px;align-items:center;flex-wrap:wrap; justify-content:center} .qp-corpo .rosca.padrao{flex:0 0 150px} .qp-corpo .rosca.padrao svg{flex:0 0 150px} /* 330px e a largura em que a tabela ainda mostra todas as colunas com a comparacao (21/09/2026): abaixo disso ela desce para baixo da rosca e usa o cartao inteiro, em vez de cortar o valor. */ .qp-tabela{flex:1 1 330px;min-width:0;overflow-x:auto} /* Sem barra de rolagem: a tabela ocupa o espaço que tem, colunas justas. */ .qp-tabela table.densa{width:100%;min-width:0} .qp-tabela table.densa th,.qp-tabela table.densa td{padding:1px 3px} .qp-tabela table.densa .tipo{max-width:7.5rem;white-space:normal; line-height:1.15} .qp-tabela table.densa td.cor-col{width:14px;padding-right:0} .qp-tabela .ponto{display:inline-block;width:11px;height:11px; border-radius:3px;vertical-align:middle} .qp-tabela tr.total td{border-top:1px solid var(--borda);background:var(--resumo)} .kpis.contagem.seis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .rosca.grande svg{flex:0 0 225px} /* Saldos em estoque (17/09/2026). */ .saldos-acao{display:flex;gap:16px;align-items:center;flex-wrap:wrap; justify-content:space-between} .saldos-acao p{margin:0;flex:1 1 420px} .grafico-saldos{position:relative;margin:4px 0 12px} .grafico-saldos svg{width:100%;height:auto;display:block} .grafico-saldos .grade{stroke:var(--linha);stroke-width:1} .grafico-saldos text{font-size:10px;fill:var(--suave); font-variant-numeric:tabular-nums} .grafico-saldos .eixo-y{text-anchor:end} .grafico-saldos .eixo-x{text-anchor:middle} .legenda-saldos{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem; color:var(--suave)} .legenda-saldos i{display:inline-block;width:12px;height:3px;border-radius:2px; margin-right:5px;vertical-align:middle} table.tabela-saldos td.sku-inteiro{white-space:nowrap;font-weight:600} table.tabela-saldos tr.total td{border-top:2px solid var(--borda); background:var(--resumo)} table.tabela-saldos th.grupo{text-align:center} table.tabela-saldos tr.negativo td{color:var(--erro)} .grafico-saldos .topo-barra{text-anchor:middle;font-weight:600; fill:var(--texto)} .grafico-saldos .alvo-barra{fill:transparent} .grafico-saldos .alvo-barra:hover{fill:color-mix(in srgb,var(--texto) 6%,transparent)} .legenda-saldos i{height:10px!important;width:10px!important;border-radius:2px} ul.lista-skus{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap; gap:4px 6px} ul.lista-skus li{font-size:.76rem;font-weight:600;white-space:nowrap; background:var(--linha);border-radius:4px;padding:0 6px} table.tabela-avisos td:first-child{width:38%} /* A EXPERIENCIA DE COMPRA (22/09/2026): a outra nota do painel do Meli. A cor vem DELE — verde, laranja, vermelho. */ .exp-nivel{display:flex;align-items:center;gap:10px;margin:2px 0 8px; font-size:1.05rem} .exp-nivel .exp-valor{display:inline-flex;align-items:center; justify-content:center;min-width:42px;height:42px;border-radius:50%; font-weight:700;font-size:1rem;background:var(--linha)} .exp-nivel.exp-boa .exp-valor{background:var(--ok);color:#fff} .exp-nivel.exp-media .exp-valor{background:var(--aviso);color:#fff} .exp-nivel.exp-ruim .exp-valor{background:var(--erro);color:#fff} .exp-problema{border-left:3px solid var(--borda);padding:4px 0 4px 10px; margin:8px 0} .exp-problema .solucao{color:var(--suave)} /* O SELO DE CATALOGO no titulo do anuncio (22/09/2026): ao abrir a pagina ja se ve que e catalogo E em que posicao estamos. */ .selo-catalogo{display:inline-block;vertical-align:middle;margin-right:8px; padding:3px 9px;border-radius:6px;font-size:.68rem;font-weight:700; letter-spacing:.06em;background:var(--linha);color:var(--texto)} /* AZUL GANHANDO, LARANJA PERDENDO (dono, 22/09/2026: "coloque tags colorido pra falar se está ganhando ou perdendo, tipo azul ganhando e laranja perdendo"). Dividir o primeiro lugar fica entre os dois. */ .selo-catalogo.cat-ganha{background:var(--acento);color:#fff} .selo-catalogo.cat-divide{background:#7c5cd6;color:#fff} .selo-catalogo.cat-perde{background:#e0821a;color:#fff} .selo-catalogo.cat-fora{background:var(--suave);color:#fff} /* A MESMA COR no cartao da posicao, dentro do quadro. */ .kpi.pos-ganha{border-left-color:var(--acento)} .kpi.pos-divide{border-left-color:#7c5cd6} .kpi.pos-perde{border-left-color:#e0821a} .kpi.pos-fora{border-left-color:var(--suave)} .cartao.com-faixa.faixa-catalogo > .faixa-titulo{background:#2d3277} /* A LISTA DE QUEM MAIS VENDE O PRODUTO (22/09/2026). */ table.concorrentes-cat td .tag{margin-left:6px} /* O PEDIDO VENDIDO NO ATACADO (28/10/2026), antes do título do produto. */ /* PAUSADO NO MELI COM ESTOQUE NO ERP (29/10/2026). */ .alerta-pausado{display:inline-block;padding:1px 6px;border-radius:4px; font-weight:600;color:#fff;background:var(--erro);white-space:nowrap; cursor:help} /* A MARGEM NO PREÇO MELI+ (30/10/2026). */ .mc-meli{font-size:.64rem;font-weight:700;line-height:1.3;color:var(--acento)} .mc-no-meli{cursor:help} .selo-atacado{flex:none;padding:0 6px;border-radius:4px;font-size:.68rem; font-weight:700;line-height:1.6;color:#fff;background:#6d28d9; text-transform:uppercase;letter-spacing:.03em;cursor:help} table.concorrentes-cat .ganhador-cat{background:var(--acento);color:#fff} /* A NOSSA LINHA (28/10/2026): bem marcada, com a borda do acento e negrito; os outros anúncios nossos num tom abaixo. */ table.concorrentes-cat tr.linha-foco > td{font-weight:700; background:color-mix(in srgb,var(--acento) 22%,var(--cartao))} table.concorrentes-cat tr.linha-foco > td:first-child{ box-shadow:inset 4px 0 0 var(--acento)} table.concorrentes-cat tr.linha-nossa > td{ background:color-mix(in srgb,var(--acento) 9%,var(--cartao))} table.comparativo-boost td.b-bom{color:var(--ok);font-weight:600} table.comparativo-boost td.b-falta{color:var(--erro);font-weight:600} table.comparativo-boost td.b-neutro{color:var(--suave)} /* OS BOTOES DA LINHA DA PROMOCAO (22/09/2026): duplicar e ferramenta, e nao texto escondido; encerrar e excluir tem cores proprias porque nao voltam atras. */ td.acoes-linha{white-space:nowrap;text-align:right} td.acoes-linha .botao,td.acoes-linha form, td.acoes-linha .vazio-col{display:inline-block; margin-left:8px;vertical-align:middle} .botao.pequeno{padding:3px 10px;font-size:.76rem;font-weight:600} .botao.perigo-leve{background:var(--aviso);border-color:var(--aviso); color:#fff} .botao.perigo-leve:hover{filter:brightness(1.08)} /* VERMELHO CLARO com texto em negrito: tirar uma linha da lista nao e a mesma coisa que apagar uma promocao, e a cor precisa dizer isso. */ .botao.perigo-claro{background:color-mix(in srgb,var(--erro) 14%,transparent); border-color:color-mix(in srgb,var(--erro) 35%,transparent); color:var(--erro);font-weight:700} .botao.perigo-claro:hover{background:color-mix(in srgb,var(--erro) 22%, transparent)} table#tabela-escolhidos td.marca-col, table#tabela-escolhidos th.marca-col{width:26px;text-align:center} table#tabela-escolhidos tr.bloqueado td{opacity:.75} /* A COLUNA "vs anterior" das tabelas dos graficos (21/09/2026): a seta e do numero, a cor e do significado — custo, devolucao e cancelamento que crescem sobem em vermelho. */ .qp-tabela th.vs,.qp-tabela td.vs{white-space:nowrap} .qp-tabela td.vs .variacao{margin-left:0} .var-bom{color:var(--ok)} .var-mau{color:var(--erro)} /* Resultado final: cartoes em duas colunas e a rosca ao lado. */ .resultado-corpo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:18px;align-items:start;margin-bottom:14px} .resultado-corpo .kpis{margin-bottom:0} .resultado-rosca .rosca .legenda{min-width:220px} /* A rosca do resultado final divide a coluna com a tabela — a mesma das tabelas dos graficos de cima (dono, 21/09/2026). */ .resultado-rosca.qp-corpo .rosca.grande{flex:0 0 225px} .resultado-lado > p.pequeno{margin-top:.4rem} @media(max-width:980px){.resultado-corpo{grid-template-columns:1fr}} /* Estados e horarios lado a lado quando cabe; um embaixo do outro quando nao. */ .dupla-analise{display:grid;gap:18px;margin-bottom:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,620px),1fr))} .dupla-analise > .cartao{margin:0;min-width:0} /* DOIS QUADROS LADO A LADO, metade da tela cada (Promoções Shopee, 09/10/2026); um embaixo do outro em tela estreita. */ .lado-a-lado{display:grid;gap:14px;margin-bottom:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))} .lado-a-lado > .cartao{margin:0;min-width:0} .lado-a-lado > .cartao.acoes-promo{display:flex;align-items:center;gap:12px} .promo-aberta .busca-na-promo .filtros{margin:6px 0 0} .estados-corpo{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start} .mapa-uf{position:relative;flex:1 1 300px;max-width:470px} .mapa-uf svg{width:100%;height:auto;display:block} .uf-mapa{stroke:var(--borda);stroke-width:.6;cursor:default} .uf-mapa:hover{stroke:var(--texto);stroke-width:1.2} .escala-mapa{display:flex;align-items:center;gap:6px;font-size:.7rem; color:var(--suave);margin-top:4px} .escala-mapa i{flex:1;height:8px;border-radius:4px;border:1px solid var(--borda); background:linear-gradient(90deg,var(--mapa-vazio),var(--mapa))} /* A lista inteira, sem rolagem: linhas baixas e as tres colunas justas. */ .lista-uf{flex:0 1 auto;min-width:0} .lista-uf table.estados{width:auto;min-width:0} .lista-uf table.estados th,.lista-uf table.estados td{padding:1px 8px; font-size:.8rem;line-height:1.35;white-space:nowrap} .horarios{position:relative} .horarios svg{width:100%;height:auto;display:block} .horarios text{font-size:10px;fill:var(--suave); font-variant-numeric:tabular-nums} .horarios text.hora{text-anchor:middle} .horarios text.soma{text-anchor:end;fill:var(--texto);font-weight:600} .horarios text.dia{fill:var(--texto);font-size:11px} .horarios .fundo-eixo{fill:var(--linha)} .horarios .fundo-total{fill:var(--resumo)} .bolha.sem{fill:var(--borda)} .bolha.baixa{fill:color-mix(in srgb,var(--mapa) 35%,var(--mapa-vazio))} .bolha.media{fill:color-mix(in srgb,var(--mapa) 68%,var(--mapa-vazio))} .bolha.alta{fill:var(--mapa)} .alvo-bolha{fill:transparent} .alvo-bolha:hover{fill:color-mix(in srgb,var(--mapa) 10%,transparent)} .legenda-bolhas{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.74rem; color:var(--suave);margin:2px 0 6px} .legenda-bolhas span{display:inline-flex;align-items:center;gap:3px} .kpis.quatro{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))} a.titulo.abre-fora:visited{color:var(--texto)} a.titulo.abre-fora:hover{color:var(--acento);text-decoration:underline} a.titulo.abre-fora::after{content:" ↗";color:var(--suave); font-size:.8em} /* ZERO DE DESCONTO E UM NUMERO, e nao uma lacuna: a coluna de preco promocional mostra 0,00 no anuncio que nao esta em campanha, apagado para nao competir com os que estao. */ .zerado{color:var(--suave);font-variant-numeric:tabular-nums} /* NECESSIDADE DE COMPRA. A tela e uma lista para decidir dinheiro: o que precisa de acao tem de saltar sem ninguem procurar. Duas cores fazem esse trabalho — a seta da tendencia e a coluna de quanto comprar — e o resto fica quieto. */ .seta{font-size:.72rem;margin-left:5px;vertical-align:1px} .seta.sobe{color:var(--ok)} .seta.desce{color:var(--erro)} .ok-cor{color:var(--ok)} /* DIFERENCA POSITIVA e azul: entrou mais do que se esperava. Nao e erro nem acerto — e algo para entender, e por isso nao usa nem o verde do "esta certo" nem o vermelho do "faltou". */ .azul-cor{color:var(--otimo)} .aviso-cor{color:var(--aviso)} table.compras td.compra{color:var(--suave);font-variant-numeric:tabular-nums} table.compras td.compra.precisa{color:var(--texto);font-weight:650} /* A LINHA DE TITULOS COM CARA DE TITULO. Pedido do dono em 04/09/2026: cinza escuro e fonte branca. Nasceu so na tela de Necessidade de compra e virou o padrao de TODAS as tabelas em 05/09/2026 — "use como padrao as da necessidade de compra". Cabecalho que muda de cara de uma tela para outra faz o sistema parecer costurado de pedacos. */ thead th{background:var(--cabecalho); color:var(--cabecalho-texto);border-bottom:0;font-weight:700; letter-spacing:.01em} thead th:first-child{border-top-left-radius:7px} thead th:last-child{border-top-right-radius:7px} thead th.ordena:hover{color:#fff;background:var(--cabecalho-realce)} /* Texto pequeno DENTRO do cabecalho — "atual", a data do mes, a legenda de uma coluna. Sem isto ele herdava a cor de `.pequeno`, que e cinza sobre claro: cinza sobre o cinza escuro do cabecalho some. */ thead th .pequeno{color:var(--cabecalho-texto);opacity:.72} /* OS MESES DE CALENDARIO. O mes corrente esta em curso e nao pode ser lido de igual para igual com os fechados ao lado — ele fica separado por uma borda e com o numero mais apagado. */ table.compras td.mes{font-variant-numeric:tabular-nums;color:var(--texto)} table.compras td.mes-atual,table.compras th.mes-atual{ border-left:1px solid var(--borda)} table.compras td.mes-atual{color:var(--suave)} table.compras th.mes-atual .pequeno{color:var(--cabecalho-texto);opacity:.7; font-weight:400} /* O SKU E O QUE SE COPIA E O QUE SE PROCURA: ele vem em negrito, e o nome do anuncio fica de apoio. Pedido do dono em 04/09/2026. */ table.compras .produto-col .sku-forte{font-weight:700;color:var(--texto)} table.compras td.sku-col{white-space:nowrap} /* MEU PEDIDO DE COMPRA: o campo digitável e o valor ao lado. O TÍTULO fica igual ao dos outros (dono, 21/09/2026: "o fundo do título das duas últimas está com outra cor, deixe na mesma da tabela"); o tom claro é só das células. */ table.compras td.compra-real{ background:color-mix(in srgb,var(--acento) 6%,transparent)} table.compras thead th.compra-real{background:var(--cabecalho)} table.compras td.divisao,table.compras th.divisao{ border-left:2px solid var(--borda)} table.compras input.a-comprar{width:4.2rem;font:inherit;font-size:.78rem; text-align:right;padding:1px 3px;border:1px solid var(--borda); border-radius:3px;background:var(--papel);color:inherit} table.compras tr.tem-compra td.compra-real{ background:color-mix(in srgb,var(--ok) 12%,transparent)} .total-compra{display:flex;flex-wrap:wrap;gap:10px;align-items:center; justify-content:flex-start; background:var(--papel);border:1px solid var(--borda);border-radius:10px; padding:8px 12px;margin:10px 0} .total-compra .limpar-compra,.total-compra .botao{padding:4px 10px; font-size:.78rem} .total-compra .total-dinheiro{color:var(--acento)} table.compras td.sku-col .sku-forte{font-weight:700;color:var(--texto)} /* O SKU LEVA A ANALISE DO PRODUTO (dono, 23/09/2026) — e e la que se preenche a caixa do fornecedor. Sem cara de link para nao competir com o nome do produto ao lado; sublinha no passar do mouse. */ table.compras td.sku-col a.sku-forte{text-decoration:none} table.compras td.sku-col a.sku-forte:hover{color:var(--acento); text-decoration:underline} /* QUANTAS PECAS VEM NA CAIXA: compacto, porque a tabela ja e larga. A barra fica apagada — ela separa dois numeros, nao e um deles. */ table.compras td.caixa-col{white-space:nowrap;font-variant-numeric:tabular-nums} .barra-caixa{color:var(--suave);opacity:.6;margin:0 1px} /* A CAIXA DO FORNECEDOR, na analise do produto: uma linha por CNPJ. */ .linha-embalagem{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap; margin:0 0 10px} .linha-embalagem label{display:flex;flex-direction:column;gap:3px; font-size:.78rem;color:var(--suave);margin:0} .linha-embalagem input{width:110px;margin:0} .linha-embalagem button{padding:6px 14px} .linha-embalagem + .linha-embalagem{padding-top:10px; border-top:1px solid var(--linha)} /* PRODUTO E SKU PARADOS À ESQUERDA na Necessidade de compra (dono, 21/09/2026: "coloque a coluna de nome e SKU fixa na lateral esquerda, pra não rolar com a tabela"), do mesmo jeito que em Envios Full. A primeira tem largura fixa para a segunda saber onde começar. */ table.compras td.fixa-1,table.compras th.fixa-1{ position:sticky;left:0;z-index:2;width:250px;min-width:250px; max-width:250px;background:var(--papel)} /* A CURVA, entre o produto e o SKU (28/10/2026), também travada. */ table.compras td.fixa-c,table.compras th.fixa-c{ position:sticky;left:250px;z-index:2;width:46px;min-width:46px; max-width:46px;background:var(--papel)} table.compras td.fixa-2,table.compras th.fixa-2{ position:sticky;left:296px;z-index:2;width:160px;min-width:160px; max-width:160px;background:var(--papel); box-shadow:2px 0 0 var(--borda)} /* A SEGUNDA LINHA DE TÍTULOS passa POR BAIXO das duas colunas travadas quando a tabela rola para o lado (dono, 21/09/2026: "a linha de subtítulo não tá travada, ela sobrepõe as duas primeiras travadas"). */ table.compras thead th.fixa-1,table.compras thead th.fixa-c,table.compras thead th.fixa-2{ z-index:6;background:var(--cabecalho)} table.compras thead tr:nth-child(2) th{z-index:1} table.compras td.fixa-1,table.compras td.fixa-c,table.compras td.fixa-2{z-index:2} table.compras tbody tr:nth-child(even) td.fixa-1, table.compras tbody tr:nth-child(even) td.fixa-c, table.compras tbody tr:nth-child(even) td.fixa-2{background:var(--zebra)} table.compras tbody tr:hover td.fixa-1, table.compras tbody tr:hover td.fixa-c, table.compras tbody tr:hover td.fixa-2{background:var(--linha-foco)} /* O TITULO MESCLADO que cobre um grupo de colunas — "QTDs vendidas" sobre os quatro meses, "Sugestao de compra" sobre os pares de peca e dinheiro. Pedido do dono em 04/09/2026, nas duas telas de suprimentos. Ele nao ordena nada: e rotulo, e por isso nao tem a setinha. */ thead th.grupo{font-size:.62rem;letter-spacing:.08em; text-transform:uppercase;font-weight:600;text-align:center; cursor:default;padding-top:2px;padding-bottom:2px;position:relative} /* CADA GRUPO COM O SEU PROPRIO TRACO, e nao um risco de fora a fora. O `border-bottom` de dois `th` vizinhos se emenda num traco unico, e dois grupos lado a lado passavam a parecer um so — "parece que e tudo a mesma coisa", em 07/09/2026. Com o traco recuado nas pontas sobra um vao entre eles, e o desenho vira o que ele sempre quis ser: uma chave por cima de cada trio de colunas. */ thead th.grupo::after{content:"";position:absolute;bottom:0; left:12px;right:12px;height:1px;background:rgba(255,255,255,.4)} /* DENTRO DA TABELA QUE ROLA o título do grupo também gruda (02/10/2026): `sticky` serve de base para o traço de baixo tanto quanto `relative`. */ .rolagem thead th.grupo{position:sticky} /* O CABECALHO MAIS BAIXO. Ele tem duas linhas desde os titulos mesclados, e duas linhas com o espacamento de uma cada custavam altura que a tabela precisa para mostrar produto. Pedido do dono em 04/09/2026: "creio que da pra cair pela metade da altura". */ thead th{padding-top:3px;padding-bottom:3px; line-height:1.15} thead th .pequeno{line-height:1;font-size:.6rem} /* A SOMATORIA, no alto e alinhada com as colunas. Ela fica no cabecalho de proposito: dentro do corpo, a ordenacao a embaralharia junto com os produtos, e um total no meio da lista nao e um total. (E o comentario nao escreve as tags por extenso: esta folha de estilo e embutida na pagina, entao qualquer coisa parecida com marcacao aqui dentro vira texto procuravel no HTML — foi assim que um comentario meu virou o primeiro "corpo de tabela" da pagina e enganou um teste.) */ /* A LINHA DE RESUMO precisa se separar das linhas de produto sem virar um segundo cabecalho. Ela era `--zebra`, a mesma faixa das linhas alternadas, e sumia no meio delas. Pedido do dono em 06/09/2026: mais escura que as linhas, menos que o cabecalho. */ /* As duas primeiras células da somatória ficam TRAVADAS como as colunas (dono, 21/09/2026: "ao arrastar a barra de rolagem, essa linha das somatórias passa reto sobre as colunas fixas, dá sensação de erro"). */ table.compras thead tr.totais td.fixa-1, table.compras thead tr.totais td.fixa-c, table.compras thead tr.totais td.fixa-2{ position:sticky;z-index:4;background:var(--resumo)} table.compras thead tr.totais td{background:var(--resumo); font-weight:650;font-size:.82rem;padding:5px 9px; font-variant-numeric:tabular-nums; border-bottom:2px solid var(--borda)} table.compras thead tr.totais td:first-child{color:var(--suave); font-weight:600;font-size:.76rem;text-transform:uppercase; letter-spacing:.04em} /* O INVESTIMENTO fica mais apagado que a quantidade: a decisao e quantas pecas comprar, e o dinheiro e a consequencia dela. */ /* O INVESTIMENTO fica mais apagado que a quantidade: a decisao e quantas pecas comprar, e o dinheiro e a consequencia dela. So ganha contraste cheio quando a quantidade ao lado e uma compra de verdade. (Aqui havia um `:has(+ td)` que casava com QUALQUER celula seguida de outra — ou seja, todas menos a ultima — e anulava a regra de cima. Foi removido na auditoria de 04/09/2026.) */ table.compras td.investimento{color:var(--suave); font-variant-numeric:tabular-nums} table.compras td.compra.precisa + td.investimento{color:var(--texto)} /* Treze colunas nao cabem nos 1180 padrao: a tabela pede a rolagem horizontal do proprio container em vez de espremer o nome do produto. */ .rolagem table.compras{min-width:1320px} .rolagem table.full-meli{min-width:1400px} /* LINHAS BAIXAS COM MINIATURA. O dono pediu as duas coisas juntas em 04/09/2026 — "coloque miniaturas dos produtos no inicio da linha, altura das linhas bem compactas" e, na tela de compra, "de modo que a linha nao fique mais alta do que ja e hoje". As duas so convivem se a foto for MENOR que a altura que a linha ja tinha: 26px cabe dentro das duas linhas de texto (titulo + meta) que a celula ja mostrava, e a linha nao cresce um pixel. */ table.compras .produto{gap:7px;align-items:center;min-width:0} table.compras .produto img,table.compras .semfoto{width:26px;height:26px; flex:0 0 26px;border-radius:5px;object-fit:contain;background:var(--linha)} table.compras td{padding-top:4px;padding-bottom:4px} /* O NOME EM DUAS LINHAS, e nao numa so cortada. O dono, em 09/09/2026: "preciso saber o nome completo do anuncio pois tenho alguns com nomes parecidos, e pelo SKU e dificil". O corte de 80 caracteres e feito em Python; aqui a regra so precisa NAO cortar antes disso — com `nowrap` e 250px o texto morria por volta do 35o caractere, e o limite de 80 nao servia para nada. */ table.compras .produto .titulo{font-size:.81rem;line-height:1.25; max-width:340px;overflow:hidden;white-space:normal; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} table.compras .produto{align-items:flex-start} /* Promoções da Amazon: o título em DUAS linhas e a coluna com 80% da largura de antes (dono, 18/09/2026), para a tabela caber sem rolar. */ table.promo-amazon td.produto-amz{min-width:200px;max-width:340px} table.promo-amazon .titulo-2l{font-size:.8rem;line-height:1.25; overflow:hidden;white-space:normal; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} table.full-meli .produto .titulo{max-width:230px} /* Nas colunas de mes do Full, as duas origens empilhadas ficam menores que o normal: sao quatro colunas assim, e o peso somado esticaria a linha justamente onde ela precisa ser baixa. */ table.full-meli .estoques{gap:0} table.full-meli .onde-estoque{font-size:.72rem} table.full-meli .onde-estoque .lugar{font-size:.58rem} /* A COLUNA MAIS ESTREITA QUE COUBER. O dono pediu em 04/09/2026: o rotulo NAO estica — ele ocupa so o que a maior palavra pede ("Necessidade", "Deposito") e o numero vem logo em seguida, encostado a direita. O `min-width` saiu de cena: era ele que abria a coluna muito alem do texto. E O ROTULO ENCOLHEU PELA METADE, no segundo pedido do mesmo dia: "diminua a altura da fonte das palavras FULL, DEPOSITO, NECESSIDADE e REAL pela metade, assim destacamos os valores e nao o titulo". Ele esta certo — a palavra se repete em toda linha e toda coluna; quem muda de linha para linha e o numero. */ /* OS TRÊS BLOCOS DE ENVIO (11/09/2026): quatro colunas compactas de necessidade, quatro de envio possível e o envio real. Uma linha mais forte separa um bloco do outro. */ table.full-meli td.envio-col,table.full-meli th.envio-col{padding-left:6px; padding-right:6px;min-width:38px} table.full-meli td.envio-col b{font-size:.84rem} table.full-meli .divisao{border-left:2px solid var(--borda)} table.full-meli thead th.divisao{border-left:2px solid var(--cabecalho-realce)} /* A COLUNA DESTACADA POR CLIQUE, em qualquer tabela que pedir (23/09/2026). Nasceu em Envios Full e o dono pediu o mesmo em Necessidade de compra: clicar no FUNDO do titulo pinta a coluna inteira, clicar no TEXTO ordena. Duas acoes no mesmo cabecalho so funcionam porque cada uma tem a sua area — e a seta de ordenar mora no texto, onde o clique ordena. */ thead th.marcavel{cursor:cell;user-select:none} thead th.marcavel.ordena:after{content:none} thead th.marcavel .rotulo-dia,thead th.marcavel .rotulo-col{ display:inline-block;padding:2px 4px;border-radius:4px; cursor:pointer} thead th.marcavel .rotulo-dia:hover, thead th.marcavel .rotulo-col:hover{background:rgba(255,255,255,.18)} thead th.marcavel .rotulo-dia:after, thead th.marcavel .rotulo-col:after{content:"\2195"; opacity:.35;margin-left:3px;font-size:.8em} thead th.marcavel.asc .rotulo-dia:after, thead th.marcavel.asc .rotulo-col:after{content:"\2191"; opacity:.9} thead th.marcavel.desc .rotulo-dia:after, thead th.marcavel.desc .rotulo-col:after{content:"\2193"; opacity:.9} thead th.marcavel.coluna-marcada{box-shadow:inset 0 -3px 0 var(--acento)} tbody td.coluna-marcada{background:var(--coluna-marcada) !important} tbody tr:hover td.coluna-marcada{ background:var(--coluna-marcada-foco) !important} .total-envio .baixar-planilha{padding:4px 12px;margin-left:8px} table.full-meli thead .soma-envio{display:inline-block;margin-top:4px; padding:2px 8px;border-radius:10px;background:var(--acento);color:#fff; font-size:.78rem;font-weight:600;text-transform:none;letter-spacing:0} table.full-meli thead .soma-envio b{font-size:.9rem} .recarga-pendente{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .recarga-pendente .botao{padding:4px 12px} .estoque-olist{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:0 0 8px} .estoque-olist .botao{padding:4px 10px} table.full-meli input.a-enviar{width:64px;text-align:right;padding:3px 5px; font:inherit;font-weight:650;border:1px solid var(--borda);border-radius:6px; background:var(--papel);color:var(--texto)} table.full-meli td.deposito-apos{min-width:62px} /* ZERA: amarelo. FALTA PEÇA: os dois em vermelho — pedido do dono. */ table.full-meli .zera{background:#fff3c4 !important;color:#6b5200} table.full-meli .falta{background:#fde2e0 !important;color:var(--erro); border-color:var(--erro) !important} .total-envio{display:flex;gap:8px;align-items:center;flex-wrap:wrap; margin:4px 0 8px;font-size:.88rem} /* OS BOTÕES JUNTO DA INFORMAÇÃO, à esquerda (dono, 21/09/2026) — antes o "limpar" era empurrado para a outra ponta da faixa. */ .total-envio .limpar-envio{padding:4px 10px;font-size:.78rem} /* ESCOLHER AS COLUNAS (dono, 02/10/2026), à direita, em cima da tabela. */ .colunas-escolha{margin-left:auto;display:flex;gap:6px;position:relative} .colunas-escolha button{padding:4px 10px;font-size:.78rem} .total-compra .colunas-escolha button{padding:4px 10px;font-size:.78rem} .colunas-painel{position:absolute;right:0;top:calc(100% + 6px);z-index:30; background:var(--papel);border:1px solid var(--borda);border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18);padding:12px 14px;min-width:300px; max-height:70vh;overflow:auto;font-size:.82rem} .colunas-painel h4{margin:10px 0 4px;font-size:.7rem;text-transform:uppercase; letter-spacing:.05em;color:var(--suave)} .colunas-painel h4:first-child{margin-top:0} .colunas-painel label{display:flex;gap:8px;align-items:center;padding:3px 0; cursor:pointer;white-space:nowrap} .colunas-painel label.fixa{color:var(--suave);cursor:default} /* PRODUTO E SKU PARADOS À ESQUERDA, o resto rola — pedido do dono em 11/09/2026: com os blocos de envio a tabela ficou larga, e sem o nome fixo não se sabe de que produto é o número lá no fim. A primeira coluna tem largura fixa para a segunda saber onde começar. */ table.full-meli td.produto-col,table.full-meli thead tr:first-child th:first-child{ position:sticky;left:0;z-index:2;width:270px;min-width:270px; max-width:270px;background:var(--papel)} /* A CURVA (28/10/2026) entre os dois, travada também. */ table.full-meli td.curva-col,table.full-meli thead tr:first-child th:nth-child(2){ position:sticky;left:270px;z-index:2;background:var(--papel); width:46px;min-width:46px;max-width:46px} table.full-meli td.sku-col,table.full-meli thead tr:first-child th:nth-child(3){ position:sticky;left:316px;z-index:2;background:var(--papel); width:175px;min-width:175px;max-width:175px; box-shadow:2px 0 0 var(--borda)} table.full-meli thead tr:first-child th:first-child, table.full-meli thead tr:first-child th:nth-child(2), table.full-meli thead tr:first-child th:nth-child(3){ z-index:3;background:var(--cabecalho)} table.full-meli tbody tr:nth-child(even) td.produto-col, table.full-meli tbody tr:nth-child(even) td.curva-col, table.full-meli tbody tr:nth-child(even) td.sku-col{background:var(--zebra)} /* A LINHA SOB O MOUSE, inteira — inclusive Produto e SKU, que por serem fixas tem fundo proprio e nao herdavam o realce da linha. Pedido do dono em 11/09/2026. Vem depois da zebra para ganhar dela. */ table.full-meli tbody tr:hover td, table.full-meli tbody tr:hover td.produto-col, table.full-meli tbody tr:hover td.sku-col{background:var(--linha-foco)} table.full-meli tbody tr:hover td.coluna-marcada{ background:var(--coluna-marcada-foco) !important} table.full-meli td.estoque-col{text-align:left} table.full-meli .onde-estoque{gap:3px} table.full-meli .onde-estoque .lugar{flex:0 0 auto;white-space:nowrap; font-size:.5rem;letter-spacing:.02em;opacity:.75} table.full-meli .onde-estoque b{margin-left:auto;text-align:right; font-size:.8rem} /* NECESSIDADE na cor do texto, REAL em vermelho claro. Sao duas leituras diferentes: a primeira e a decisao, a segunda e o limite de hoje. */ table.full-meli .onde-estoque.real b, table.full-meli .onde-estoque.real .lugar{color:var(--erro);opacity:.7} table.full-meli td.envio.precisa .onde-estoque:first-child b{ color:var(--texto);font-weight:700} /* O TRAVESSAO DO ZERO quase nao aparece: ele existe para MANTER O ALINHAMENTO, e nao para ser lido. Pedido do dono em 04/09/2026 — "para nao ter tanto destaque". */ table.full-meli .onde-estoque .pequeno, table.compras td .vazio-col{color:var(--suave);opacity:.55} /* A MARGEM MEDIA, AO LADO DO NUMERO e nao embaixo dele. Embaixo, ela empurrava a linha e quebrava a comparacao entre colunas — o dono desfez em 04/09/2026. Ela responde se aquelas vendas foram boas ou queima de estoque, e por isso segue a mesma cor de faixa do resto do sistema. */ .mc-mes{font-size:.64rem;margin-left:4px;font-weight:600; font-variant-numeric:tabular-nums} /* No Full ela fica DEPOIS do numero, e o numero perde o "encostar a direita" — sao dois valores por linha agora, e o alinhamento passa a ser do par. */ table.full-meli .onde-estoque b{margin-left:auto} table.full-meli .onde-estoque .mc-mes{flex:0 0 auto;min-width:46px; text-align:right} /* A COLUNA DE 30 DIAS e a decisao de hoje: ela ganha peso, e as de 60 e 90 ficam de apoio. Sem isso as tres competem, e a tela para de responder "o que eu compro agora". */ table.compras td.compra:nth-last-child(3).precisa{color:var(--erro); font-size:1.02rem} /* Com o cabecalho branco no escuro, o destaque da coluna de 30 dias nao pode mais ser cor: vira peso. */ table.compras thead th:nth-last-child(3){font-weight:750} .depositos{display:flex;flex-wrap:wrap;align-items:center;gap:12px; margin-top:12px} .depositos .rot{font-size:.8rem;color:var(--suave)} label.caixa-deposito{display:inline-flex;align-items:center;gap:6px; margin:0;font-size:.84rem;color:var(--texto);cursor:pointer} label.caixa-deposito input{width:15px;height:15px} /* ENTRAR E SAIR DE UMA PROMOCAO. A janela e um do proprio navegador: foco presoENTER, ESC que fecha e fundo inerte vem de graça, sem biblioteca e sem imitar isso mal em JavaScript. O CSS aqui so veste o que ja funciona. */ /* DESCONTO E MARGEM, CADA UM COM A SUA COR. Sao dois caminhos para o mesmo numero, e lado a lado pareciam o mesmo campo repetido. O dono pediu a distincao em 04/09/2026: "um amarelo no desconto e um verde na margem, que e pro usuario ver que tem diferenca nos dois". A cor vai na BORDA e num fundo de leve — nao no texto — para o numero digitado continuar com o contraste normal de leitura. */ input.campo-desconto{border-color:var(--aviso); background:color-mix(in srgb, var(--aviso) 7%, var(--papel))} input.campo-margem{border-color:var(--ok); background:color-mix(in srgb, var(--ok) 7%, var(--papel))} input.campo-desconto:focus{outline:2px solid var(--aviso);outline-offset:1px} input.campo-margem:focus{outline:2px solid var(--ok);outline-offset:1px} label.rot-desconto{color:var(--aviso);font-weight:600} label.rot-margem{color:var(--ok);font-weight:600} .acoes-promo{display:flex;flex-wrap:wrap;align-items:center;gap:10px; margin:2px 0 14px} .acoes-promo .pequeno{color:var(--suave)} button.botao.perigo{background:var(--erro);border-color:var(--erro); color:#fff} button.botao.perigo:hover:not(:disabled){filter:brightness(1.07)} button.botao.perigo:disabled{background:var(--linha);color:var(--suave); border-color:var(--borda);cursor:not-allowed} td.marca-col,th.marca-col{width:34px;text-align:center;padding-right:0} .marca-item,#marca-todos{width:16px;height:16px;cursor:pointer} /* A JANELA DE POR UM ANUNCIO NA CAMPANHA PELO PRECO. Pedido do dono em 06/09/2026: ate entao o candidato de campanha de preco digitavel nao tinha botao nenhum — so dava para entrar em lote, pelo campo de margem. A janela e uma so na pagina; o botao da linha carrega os numeros dela. */ .sobreposto.oculto{display:none} .sobreposto-caixa.janela-preco{max-width:470px;position:relative} .janela-preco .fecha-janela{position:absolute;top:10px;right:12px; background:transparent;color:var(--suave);border:0;font-size:1.5rem; line-height:1;padding:0 5px;cursor:pointer} .janela-preco .fecha-janela:hover{color:var(--texto)} .janela-preco .linha-cheio{display:flex;justify-content:space-between; align-items:baseline;padding:8px 0;border-bottom:1px solid var(--linha); color:var(--suave);font-size:.82rem} .janela-preco .linha-cheio b{color:var(--texto);font-size:1rem} /* A faixa que a campanha aceita: informacao de apoio, nao o numero principal — por isso nao ganha o mesmo peso do preco cheio. */ .janela-preco .faixa-campanha b{font-size:.82rem;font-weight:600} .janela-preco .tres-campos{display:grid; grid-template-columns:1fr 1fr 1fr;gap:10px;margin:14px 0 4px} .janela-preco .tres-campos label{display:block;font-size:.62rem; text-transform:uppercase;letter-spacing:.05em;color:var(--suave); font-weight:700;margin-bottom:3px} .janela-preco .tres-campos input{width:100%; font-variant-numeric:tabular-nums} /* A MARGEM EM DESTAQUE: e ela que decide, e nao o preco. */ .janela-preco .resultado-mc{display:flex;justify-content:space-between; align-items:baseline;gap:10px;padding:9px 11px;margin-top:8px; background:var(--zebra);border-radius:8px;font-size:.82rem; color:var(--suave)} .janela-preco .resultado-mc b{font-size:1.05rem; font-variant-numeric:tabular-nums} .janela-preco .bloco-plus{margin-top:14px;padding-top:12px; border-top:1px solid var(--linha)} .janela-preco .liga-plus{display:flex;align-items:flex-start;gap:8px; font-size:.84rem;cursor:pointer} .janela-preco .liga-plus input{margin-top:2px;width:16px;height:16px; cursor:pointer} .janela-preco .acoes{margin-top:16px;display:flex;gap:9px} .janela-preco .campo-ruim{border-color:var(--erro)} /* A CLASSE E `janela-lote`, E NAO `janela`. `.janela` JA EXISTIA nesta folha, mais abaixo: e a linha de datas da campanha, e ela e `display:flex`. Como vinha depois, vencia — e o `` virava um container flex, o que faz do `
` de dentro um ITEM flex. Item flex tem `min-width:auto`: ele nao encolhe abaixo do conteudo. Resultado: a janela de 602px com um formulario de 882px dentro, titulos sem cortar e barra de rolagem horizontal — o que o dono viu em 04/09/2026. E a segunda vez que um nome de classe generico morde este projeto (a primeira foi `.selo`). Nome de classe e nome: quando dois lugares diferentes usam o mesmo, um deles quebra em silencio. FECHADA E FECHADA, aconteca o que acontecer. O navegador esconde `dialog` sem `open` pela folha dele, mas isso vale se ele CONHECER o elemento. Num navegador que nao conheca, ou depois de uma volta pelo botao "voltar" (que restaura o DOM com o `open` de antes), a janela reaparecia no meio da pagina, fora de lugar e sem saida — foi o que o dono viu em 04/09/2026: "apareceu uma tela de incluir itens sem eu clicar em nada... nao consigo sair dela". Estas duas regras tiram a duvida: sem `open`, nao existe; com `open`, ela flutua no meio da tela e o resto fica atras — mesmo quando o `showModal()` nao pode ser usado. */ dialog.janela-lote:not([open]){display:none!important} dialog.janela-lote{border:1px solid var(--borda);border-radius:12px;padding:0; width:min(960px,96vw);max-height:88vh;background:var(--papel); color:var(--texto);box-shadow:0 18px 48px rgba(0,0,0,.22); position:fixed;inset:0;margin:auto;z-index:60} dialog.janela-lote::backdrop{background:rgba(15,18,22,.45)} /* O escurecido de tras, para quando a janela abre SEM `showModal` — ali nao existe `::backdrop`, e sem isto a pagina de tras parece clicavel. */ .fundo-lote{position:fixed;inset:0;background:rgba(15,18,22,.45); z-index:59} dialog.janela-lote form{display:flex;flex-direction:column;max-height:88vh; padding:18px 20px;gap:12px} .lote-topo{display:flex;align-items:flex-start;justify-content:space-between; gap:12px} .lote-topo h2{margin:0;font-size:1.05rem} button.fechar-janela{background:none;border:0;font-size:1.5rem;line-height:1; color:var(--suave);cursor:pointer;padding:0 4px} button.fechar-janela:hover{color:var(--texto)} .lote-pe{display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:10px;border-top:1px solid var(--linha); padding-top:12px} .lote-pe .acoes{display:flex;gap:8px} .lista-elegiveis{overflow-y:auto;overflow-x:hidden;flex:1;min-height:140px; max-height:46vh;border:1px solid var(--linha);border-radius:8px} .lista-elegiveis > p{padding:16px;margin:0} /* O TITULO CORTA, e nao empurra. Titulo de anuncio de marketplace tem oitenta caracteres — "Interruptor Cortina Wifi Persiana Rele Inteligente Alexa Google Siri Tuya Smartlife App Automacao Residencial". Sem o corte, cada linha empurrava a janela para o lado e nascia uma barra de rolagem horizontal: o dono viu isso em 04/09/2026. Quem escolhe reconhece o produto pelo comeco do titulo e pelo SKU embaixo; o resto e ruido. `min-width:0` nos dois niveis e o que permite o corte: sem ele, um item flex nao encolhe abaixo do tamanho do conteudo, e o `text-overflow` nao tem onde agir. */ label.linha-elegivel{display:flex;align-items:center;gap:10px;min-width:0; padding:8px 12px;border-bottom:1px solid var(--linha);cursor:pointer} label.linha-elegivel:last-child{border-bottom:0} label.linha-elegivel:hover{background:var(--realce)} label.linha-elegivel:has(input:checked){background:var(--realce)} label.linha-elegivel input{width:16px;height:16px} label.linha-elegivel img,label.linha-elegivel .semfoto{width:34px;height:34px; object-fit:contain;border-radius:6px;background:var(--zebra);flex:none} label.linha-elegivel .txt{flex:1 1 0;min-width:0;display:flex; flex-direction:column;overflow:hidden} label.linha-elegivel .titulo,label.linha-elegivel .meta{display:block; max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} label.linha-elegivel .titulo{font-size:.86rem;font-weight:500} label.linha-elegivel .meta{font-size:.74rem;color:var(--suave)} label.linha-elegivel .num{text-align:right;font-size:.86rem;flex:none; font-variant-numeric:tabular-nums;display:flex;flex-direction:column; gap:2px;white-space:nowrap} label.linha-elegivel .num .pequeno{color:var(--suave)} @media (max-width:560px){ dialog.janela-lote{width:96vw} label.linha-elegivel .num{font-size:.8rem} } /* A LISTA DE ELEGIVEIS VIROU TABELA (11/09/2026): estoque, marca e a promocao em que o anuncio ja esta, cada um na sua coluna, e todas ordenando pelo titulo. O titulo ficou com metade da largura que tinha. */ dialog#janela-adicionar{width:min(1180px,96vw)} table.tabela-elegiveis{width:100%;border-collapse:collapse;font-size:.84rem} table.tabela-elegiveis thead th{position:sticky;top:0;z-index:1; background:var(--cabecalho);color:var(--cabecalho-texto);font-size:.72rem; text-transform:uppercase;letter-spacing:.03em;padding:7px 8px; text-align:left;white-space:nowrap} table.tabela-elegiveis thead th.num,table.tabela-elegiveis td.num{ text-align:right;font-variant-numeric:tabular-nums} table.tabela-elegiveis thead th.ord{cursor:pointer;user-select:none} table.tabela-elegiveis thead th.ord:after{content:"\2195";opacity:.35; margin-left:4px;font-size:.8em} table.tabela-elegiveis thead th.ord.asc:after{content:"\2191";opacity:.9} table.tabela-elegiveis thead th.ord.desc:after{content:"\2193";opacity:.9} table.tabela-elegiveis td{padding:6px 8px;border-bottom:1px solid var(--linha); vertical-align:middle} table.tabela-elegiveis tbody tr{cursor:pointer} table.tabela-elegiveis tbody tr:hover{background:var(--realce)} table.tabela-elegiveis tbody tr:has(input:checked){background:var(--realce)} table.tabela-elegiveis tbody tr.bloqueado{cursor:default;opacity:.62} table.tabela-elegiveis td.sel,table.tabela-elegiveis th.sel{width:28px} table.tabela-elegiveis .anuncio-cel{display:flex;align-items:center;gap:8px; width:330px;max-width:330px;min-width:0} table.tabela-elegiveis .anuncio-cel img, table.tabela-elegiveis .anuncio-cel .semfoto{width:30px;height:30px; object-fit:contain;border-radius:6px;background:var(--zebra);flex:none} table.tabela-elegiveis .anuncio-cel .txt{min-width:0;display:flex; flex-direction:column} table.tabela-elegiveis .anuncio-cel .titulo, table.tabela-elegiveis .anuncio-cel .meta{overflow:hidden; text-overflow:ellipsis;white-space:nowrap} table.tabela-elegiveis .anuncio-cel .meta{font-size:.72rem; color:var(--suave)} table.tabela-elegiveis td.promo-atual{max-width:190px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* A SITUACAO DA PROMOCAO, colorida pelo que ela PERMITE fazer: verde no que esta no ar (a unica em que um preco novo vale hoje), azul na agendada, apagada na encerrada. */ .tag.selo-viva{background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok);border-color:color-mix(in srgb,var(--ok) 42%,transparent); font-weight:650} .tag.selo-vindo{background:color-mix(in srgb,var(--otimo) 14%,transparent); color:var(--otimo); border-color:color-mix(in srgb,var(--otimo) 40%,transparent); font-weight:650} .tag.selo-fim{color:var(--suave);opacity:.85} /* Tarja de "tem tarefa rodando em OUTRA tela". Discreta de proposito: ela informa, nao impede — a cortina fica reservada para a tarefa que a propria tela disparou. */ .tarja-outra{display:flex;align-items:center;gap:9px;font-size:.85rem; padding:10px 14px;margin-bottom:14px} .tarja-outra .girando{width:13px;height:13px;flex:0 0 13px;border-radius:50%; border:2px solid var(--borda);border-top-color:var(--acento); animation:girar .8s linear infinite} /* ------------------------------------------------------------------ Faixa de ANDAMENTO: aparece em toda tela de numeros enquanto os dados ainda estao chegando. E chamativa de proposito. O defeito que ela conserta nao e a demora — e a tela mostrar frete zerado e margem inflada como se fossem apurados, quando o frete daquele mes ainda nem foi coletado. Numero provisorio com cara de definitivo e o pior defeito deste sistema, e quem le a tela sem ter acompanhado a importacao nao tem como saber. (O comentario evita escrever o valor zerado por extenso: este bloco viaja dentro do