/* ═══════════════════════════════════════════════════════════════════════════ Análise Delivery — sistema visual ─────────────────────────────────────────────────────────────────────────── CONCEITO: a régua. O herói do produto é a fita de margem — o faturamento sendo consumido até sobrar o lucro. Aqui ela é um INSTRUMENTO DE MEDIDA: tem escala graduada impressa no trilho, então você lê a porcentagem sem consultar legenda. O mesmo trilho graduado reaparece em miniatura nas barras de ranking e na coluna de margem — é um sistema, não cards soltos. A ousadia mora na fita. Todo o resto é quieto e denso, como instrumento de trabalho que se usa todo dia. HIERARQUIA POR SUPERFÍCIE, não por repetição de card: fita raio 20 elevada — o herói, um por tela caixa raio 16 hairline — seção de conteúdo ind-c raio 12 sem sombra — leitura de instrumento, não cartão cova recuo — trilhos, cabeçalho de tabela, insets COR vem do domínio e é VALIDADA: a paleta da fita passou nos seis testes de scripts/validate_palette.js (skill dataviz) em claro e escuro — faixa de luminosidade, croma, separação sob daltonismo (ΔE ≥ 8), piso de visão normal (ΔE ≥ 15) e contraste ≥ 3:1 contra a superfície. A anterior reprovava: comissão × taxa davam ΔE 4,0 em deuteranopia. Cor segue a ENTIDADE (CMV é sempre coral), nunca a posição no ranking. Tela: . Claro é o padrão; escuro por escolha. ═══════════════════════════════════════════════════════════════════════════ */ @import url("/css/fontes.css"); /* Propriedades tipadas: só assim dá pra animar um custom property. A fita cresce animando --p em vez de width — não dispara layout. */ @property --p { syntax:""; inherits:false; initial-value:0%; } @property --giro { syntax:""; inherits:false; initial-value:0deg; } :root{ /* ── superfícies: quatro níveis, não dois ───────────────────────────── */ --fundo:#F2F5F4; /* a página, levemente esverdeada e mais escura que o cartão — é o que faz o cartão existir */ --fundo-2:#E8EDEB; --superficie:#FFFFFF; /* cartão */ --superficie-2:#F7FAF9; /* linha alternada, hover de tabela */ --cova:#EEF3F1; /* recuo: trilho de barra, cabeçalho de tabela */ --texto:#07171C; --suave:#4D6468; --fraco:#7A9094; --borda:#E0E7E5; --borda-forte:#C4D2CF; --tinta:#07171C; /* preto real da marca, não um #111 morno */ --vendas-seg:color-mix(in oklab,var(--tinta) 74%,var(--superficie)); --vendas-rot:var(--superficie); /* ── paleta da fita — VALIDADA, não mexer sem rodar o validador ─────── */ --fita-cmv:#D6453A; /* CMV — o produto */ --fita-comissao:#8B5CF6; /* comissão do marketplace — terceiro */ --fita-taxa:#0785A8; /* taxa de pagamento — financeiro */ --fita-var:#C98500; /* custos variáveis — embalagem, entrega */ --lucro:#00875F; /* o que sobra — e o acento da interface */ --lucro-fundo:color-mix(in srgb,var(--lucro) 11%,transparent); --lucro-texto:#FFFFFF; --custo:#D6453A; --custo-fundo:color-mix(in srgb,var(--custo) 10%,transparent); --atencao:#A96A00; --atencao-fundo:color-mix(in srgb,#C98500 14%,transparent); --frio:#0785A8; --frio-fundo:color-mix(in srgb,var(--frio) 11%,transparent); /* ── tipografia ─────────────────────────────────────────────────────── */ --titulo:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; --fonte:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace; /* ── métrica ────────────────────────────────────────────────────────── */ --lateral:260px; --raio-sm:10px; --raio:12px; --raio-md:16px; --raio-lg:20px; /* elevação em duas partes: um fio de luz no topo + a sombra difusa. É o fio que dá a impressão de objeto físico; só a sombra fica borrada. */ --fio:inset 0 1px 0 rgba(255,255,255,.9); --e1:var(--fio), 0 1px 2px rgba(7,23,28,.05); --e2:var(--fio), 0 1px 2px rgba(7,23,28,.05), 0 12px 28px -18px rgba(7,23,28,.24); --e3:var(--fio), 0 2px 4px rgba(7,23,28,.06), 0 28px 60px -28px rgba(7,23,28,.36); --vidro:color-mix(in srgb,var(--fundo) 78%,transparent); --ease:cubic-bezier(.2,.7,.2,1); --mola:cubic-bezier(.34,1.3,.42,1); color-scheme:light; } /* ── escuro ───────────────────────────────────────────────────────────── */ /* só por escolha (botão na barra, gravado no navegador): o padrão desta casa é claro, mesmo com o sistema escuro — decisão de produto, não esquecimento */ :root[data-tema="escuro"]{ --vendas-seg:color-mix(in oklab,var(--tinta) 34%,var(--superficie)); --vendas-rot:var(--tinta); --fundo:#070E11; --fundo-2:#0B161A; --superficie:#101C21; --superficie-2:#15242A; --cova:#0C1A1F; --texto:#E9F2EF; --suave:#8FA5A0; --fraco:#63797B; --borda:#1B2C32; --borda-forte:#2A4048; --tinta:#E9F2EF; --fita-cmv:#DD5344; --fita-comissao:#9A6FE8; --fita-taxa:#279BB0; --fita-var:#C08A0C; --lucro:#00AD79; --lucro-texto:#02120C; --custo:#DD5344; --atencao:#C08A0C; --frio:#279BB0; --fio:inset 0 1px 0 rgba(255,255,255,.045); --e1:var(--fio), 0 1px 2px rgba(0,0,0,.5); --e2:var(--fio), 0 1px 2px rgba(0,0,0,.5), 0 16px 36px -22px rgba(0,0,0,.85); --e3:var(--fio), 0 2px 6px rgba(0,0,0,.6), 0 32px 70px -30px rgba(0,0,0,.95); --vidro:color-mix(in srgb,var(--fundo) 72%,transparent); color-scheme:dark; } /* ═════════ base ═════════ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable} body{margin:0;min-height:100dvh;background:var(--fundo);color:var(--texto); font:400 .9375rem/1.55 var(--fonte); font-feature-settings:"cv11","ss01"; /* Geist: 1 com serifa, a de caixa única */ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} img,svg{display:block;max-width:100%} a{color:inherit} h1,h2,h3,h4{margin:0;font-family:var(--titulo);font-weight:600;line-height:1.14; letter-spacing:-.028em;text-wrap:balance} h1{font-size:clamp(1.5rem,1.15rem + 1.1vw,1.875rem);font-weight:640;letter-spacing:-.04em; font-variation-settings:"wdth" 96} h2{font-size:1.0625rem;letter-spacing:-.024em} h3{font-size:.9375rem;letter-spacing:-.016em} p{margin:0;text-wrap:pretty} button,input,select,textarea{font:inherit;color:inherit} button{padding:0;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--lucro);outline-offset:2px;border-radius:6px} [hidden]{display:none!important} ::selection{background:color-mix(in srgb,var(--lucro) 22%,transparent)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .mono{font-family:var(--mono);font-size:.8125rem;letter-spacing:-.01em} .suave{color:var(--suave)} /* tabular só em COLUNA de números; nunca num valor grande solto — tabular dá a todo dígito a largura do zero e "121" fica frouxo. */ .num{font-variant-numeric:tabular-nums} /* ═════════ casca ═════════ */ .casca{display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);min-height:100dvh} .casca.cheia{grid-template-columns:minmax(0,1fr)} .casca.cheia .lateral{display:none} .lateral{position:sticky;top:0;height:100dvh;z-index:20;overflow:hidden; display:flex;flex-direction:column;gap:2px;padding:18px 14px 14px; border-right:1px solid var(--borda);background:var(--fundo-2)} /* calor da fita sangrando atrás da marca — a assinatura da casa, bem fraca */ .lateral::before{content:"";position:absolute;inset:-160px -60px auto -60px;height:300px; background:conic-gradient(from 210deg at 50% 100%, var(--fita-cmv),var(--fita-var),var(--lucro),var(--fita-taxa),var(--fita-cmv)); opacity:.085;filter:blur(64px);pointer-events:none} :root[data-tema="escuro"] .lateral::before{opacity:.16} .marca{position:relative;display:inline-flex;align-items:center;gap:10px; padding:2px 6px 16px;text-decoration:none;font-family:var(--titulo); font-weight:680;font-size:1.0625rem;letter-spacing:-.045em; font-variation-settings:"wdth" 92} .marca-i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center; background:var(--lucro);color:var(--lucro-texto);box-shadow:var(--e1)} .marca-i svg{width:19px;height:19px} .marca em{font-style:normal;font-weight:450;color:var(--suave)} /* ── seletor de loja: o instrumento principal do gestor, não conveniência ── */ .sel-loja{position:relative;display:flex;align-items:center;gap:10px;width:100%; padding:8px 10px;margin-bottom:14px;text-align:left; border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie); box-shadow:var(--e1);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)} .sel-loja:hover{border-color:var(--borda-forte);box-shadow:var(--e2)} .sel-loja-i{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center; background:var(--cova);color:var(--suave);font-size:.6875rem;font-weight:700; letter-spacing:-.02em} .sel-loja-tx{flex:1;min-width:0;line-height:1.25} .sel-loja-tx b{display:block;font-size:.8125rem;font-weight:600;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .sel-loja-tx span{display:block;font-size:.6875rem;color:var(--fraco)} .sel-loja svg.seta{flex:none;width:14px;height:14px;color:var(--fraco)} .sel-loja select{flex:1;min-width:0;border:0;background:transparent;font-size:.8125rem; font-weight:550;outline:none;text-overflow:ellipsis;cursor:pointer} /* ── navegação ── */ .nav{position:relative;display:flex;flex-direction:column;gap:1px} .nav-t{padding:16px 10px 6px;font-size:.6875rem;font-weight:600;color:var(--fraco); letter-spacing:.01em} .nav a{position:relative;display:flex;align-items:center;gap:11px;min-height:36px;white-space:nowrap; padding:0 10px;border-radius:var(--raio-sm);color:var(--suave);text-decoration:none; font-size:.875rem;font-weight:500; transition:color .16s var(--ease),background .16s var(--ease)} .nav a svg{width:17px;height:17px;flex:none;opacity:.72} .nav a:hover{color:var(--texto);background:color-mix(in srgb,var(--superficie) 70%,transparent)} .nav a.ativo{color:var(--texto);background:var(--superficie);font-weight:600;box-shadow:var(--e1)} .nav a.ativo svg{opacity:1;color:var(--lucro)} .nav a.ativo::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px; border-radius:0 3px 3px 0;background:var(--lucro)} .nav .etiq{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:5px; display:grid;place-items:center;font-size:.625rem;font-weight:700; color:var(--lucro);background:var(--lucro-fundo);font-variant-numeric:tabular-nums} .nav .etiq.aviso{color:var(--atencao);background:var(--atencao-fundo)} .gat.bt-menu,.veu{display:none} .barra-loja{font-size:.8125rem;color:var(--suave)} .lateral-pe{margin-top:auto;display:flex;flex-direction:column;gap:9px;padding-top:14px} /* medidor de confiança do dado — o diferencial do produto ocupa o vazio da lateral com algo útil: sobre quantos % do catálogo o lucro é real. */ .confianca{display:block;padding:11px 12px;border-radius:var(--raio);text-decoration:none; border:1px solid var(--borda);background:var(--superficie); transition:border-color .18s var(--ease)} .confianca:hover{border-color:var(--borda-forte)} .confianca-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px; font-size:.75rem;color:var(--suave)} .confianca-t b{font-size:.8125rem;font-weight:650;color:var(--texto); font-variant-numeric:tabular-nums} .confianca .trilho{margin-top:8px} .confianca-n{display:block;margin-top:7px;font-size:.6875rem;color:var(--fraco);line-height:1.4} .conta{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:var(--raio); border:1px solid var(--borda);background:var(--superficie);text-decoration:none; transition:border-color .18s var(--ease)} .conta:hover{border-color:var(--borda-forte)} .conta-av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center; background:var(--lucro);color:var(--lucro-texto);font-weight:700;font-size:.75rem} .conta-nm{display:block;font-size:.8125rem;font-weight:600;line-height:1.25;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .conta-em{display:block;font-size:.6875rem;color:var(--fraco);line-height:1.25;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .principal{min-width:0;display:flex;flex-direction:column} .conteudo{flex:1;width:100%;max-width:1400px;padding:22px 30px 64px; container:tela / inline-size} /* as telas reagem à largura REAL, não à janela */ /* ═════════ barra de comando ═════════ Sticky, em vidro. Concentra o que muda a LEITURA da tela (loja, período, busca) e tira isso do meio do conteúdo. A borda de baixo só aparece quando a página rolou — animação dirigida por rolagem, sem uma linha de JS. */ .barra{position:sticky;top:0;z-index:18;display:flex;align-items:center;gap:10px; min-height:56px;padding:0 30px; background:var(--vidro);-webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7); border-bottom:1px solid transparent} @supports (animation-timeline:scroll()){ .barra{animation:barra-pousa linear both;animation-timeline:scroll();animation-range:0 90px} @keyframes barra-pousa{to{border-bottom-color:var(--borda)}} } .barra-tit{font-family:var(--titulo);font-weight:600;font-size:.9375rem; letter-spacing:-.025em;white-space:nowrap} .barra-sep{width:1px;height:20px;background:var(--borda);flex:none} .barra-dir{margin-left:auto;display:flex;align-items:center;gap:8px} /* botão de gatilho da barra: discreto até tocar */ .gat{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px; border:1px solid transparent;border-radius:var(--raio-sm);color:var(--suave); font-size:.8125rem;font-weight:550;white-space:nowrap; transition:color .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease)} .gat:hover{color:var(--texto);background:var(--superficie);border-color:var(--borda)} .gat[aria-expanded="true"]{color:var(--texto);background:var(--superficie); border-color:var(--borda-forte)} .gat svg{width:16px;height:16px;flex:none;opacity:.8} .gat b{font-weight:650;color:var(--texto)} .gat-ic{padding:0;width:34px;justify-content:center} .gat kbd{font-family:var(--mono);font-size:.6875rem;padding:1px 5px;border-radius:5px; background:var(--cova);border:1px solid var(--borda);color:var(--fraco); line-height:1.5} /* sino com pendência: o ponto é posição + cor, nunca cor sozinha */ .gat-sino{position:relative} .gat-sino[data-n]:not([data-n="0"])::after{content:"";position:absolute;top:6px;right:7px; width:7px;height:7px;border-radius:50%;background:var(--custo); box-shadow:0 0 0 2px var(--fundo)} /* conta no canto da barra: a inicial, e o menu com Minha conta e Sair */ .gat-conta{padding:0;width:34px;justify-content:center;border-radius:50%} .gat-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center; background:var(--lucro-fundo);color:var(--lucro);font-size:.75rem;font-weight:700; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lucro) 22%,transparent)} .gat-conta:hover .gat-av,.gat-conta[aria-expanded="true"] .gat-av{background:var(--lucro); color:var(--lucro-texto)} .gat-conta:hover,.gat-conta[aria-expanded="true"]{background:none;border-color:transparent} .gat-conta:focus-visible{outline:2px solid var(--lucro);outline-offset:2px} /* ═════════ popover nativo ═════════ API do navegador: sem biblioteca, sem z-index de guerra, fecha no Esc e no clique fora de graça. @starting-style dá a entrada sem JS. */ [popover]{margin:0;padding:0;border:0;background:none;overflow:visible} .pop{position:absolute;width:max-content;min-width:230px;max-width:min(92vw,360px); padding:6px;border:1px solid var(--borda);border-radius:var(--raio-md); background:var(--superficie);box-shadow:var(--e3);color:var(--texto)} .pop:popover-open{animation:pop-entra .16s var(--mola) both} @starting-style{.pop:popover-open{opacity:0;transform:translateY(-6px) scale(.97)}} @keyframes pop-entra{from{opacity:0;transform:translateY(-6px) scale(.97)}} .pop-t{padding:8px 10px 6px;font-size:.6875rem;font-weight:600;color:var(--fraco)} .pop a,.pop button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px; padding:6px 10px;border-radius:var(--raio-sm);text-decoration:none;text-align:left; font-size:.875rem;font-weight:500;color:var(--suave); transition:background .14s var(--ease),color .14s var(--ease)} .pop a:hover,.pop button:hover{background:var(--cova);color:var(--texto)} .pop a.on,.pop button.on{color:var(--texto);font-weight:650;background:var(--cova)} .pop a.on::after,.pop button.on::after{content:"";margin-left:auto;width:6px;height:6px; border-radius:50%;background:var(--lucro);flex:none} .pop hr{margin:5px 8px;border:0;border-top:1px solid var(--borda)} .pop-quem{display:flex;align-items:center;gap:10px;padding:8px 10px 6px;min-width:0} .pop-conta{min-width:250px} .pop-conta form{margin:0} .pop-conta a svg,.pop-conta button svg{flex:none;opacity:.75} .pop button.pop-sair:hover{color:var(--custo);background:var(--custo-fundo)} .pop-vazio{padding:16px 12px;font-size:.8125rem;color:var(--fraco);text-align:center} /* linha de loja dentro do popover: nome + margem, pra escolher com informação */ .pop-loja{display:grid!important;grid-template-columns:26px 1fr auto;gap:2px 10px; align-items:center} .pop-loja .av{grid-row:span 2;width:26px;height:26px;border-radius:8px;display:grid; place-items:center;background:var(--cova);font-size:.625rem;font-weight:700; color:var(--suave)} .pop-loja b{font-size:.8125rem;font-weight:600;color:inherit} .pop a.pop-nova{color:var(--lucro);font-weight:600} .pop a.pop-nova svg{flex:none} .pop-loja .met{grid-column:2;font-size:.6875rem;color:var(--fraco); font-variant-numeric:tabular-nums} .pop-loja .var{grid-row:span 2;font-size:.75rem;font-weight:650; font-variant-numeric:tabular-nums} /* ═════════ paleta de comando (⌘K) ═════════ */ dialog.paleta{width:min(100% - 32px,560px);padding:0;border:1px solid var(--borda); border-radius:var(--raio-lg);background:var(--superficie);color:var(--texto); box-shadow:var(--e3);margin-top:12vh} dialog.paleta::backdrop{background:color-mix(in srgb,var(--tinta) 42%,transparent); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} dialog.paleta[open]{animation:pal-entra .18s var(--mola) both} @starting-style{dialog.paleta[open]{opacity:0;transform:translateY(-10px) scale(.98)}} @keyframes pal-entra{from{opacity:0;transform:translateY(-10px) scale(.98)}} .paleta-busca{display:flex;align-items:center;gap:11px;padding:14px 16px; border-bottom:1px solid var(--borda)} .paleta-busca svg{width:18px;height:18px;color:var(--fraco);flex:none} .paleta-busca input{flex:1;border:0;background:none;outline:none;font-size:1rem; padding:0} .paleta-busca input::placeholder{color:var(--fraco)} .paleta-lista{max-height:min(56vh,420px);overflow-y:auto;padding:6px} .paleta-lista .pop-t{padding:10px 10px 4px} .paleta-lista a{display:flex;align-items:center;gap:11px;min-height:40px;padding:7px 10px; border-radius:var(--raio-sm);text-decoration:none;color:var(--suave);font-size:.875rem; font-weight:500} .paleta-lista a svg{width:16px;height:16px;flex:none;opacity:.75} .paleta-lista a .tipo{margin-left:auto;font-size:.6875rem;color:var(--fraco)} .paleta-lista a[aria-selected="true"]{background:var(--cova);color:var(--texto)} .paleta-pe{display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--borda); font-size:.6875rem;color:var(--fraco);background:var(--cova); border-radius:0 0 var(--raio-lg) var(--raio-lg)} .paleta-pe kbd{font-family:var(--mono);padding:1px 5px;border-radius:4px; background:var(--superficie);border:1px solid var(--borda)} /* ═════════ cabeçalho de tela ═════════ */ .cab{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:6px 0 20px} .cab-tx{flex:1;min-width:240px} .cab-tx p{margin-top:6px;color:var(--suave);font-size:.875rem;max-width:68ch} .cab-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .periodos{display:inline-flex;padding:3px;gap:2px;border-radius:var(--raio); background:var(--cova);border:1px solid var(--borda);flex-wrap:wrap} .periodos a{padding:5px 11px;border-radius:8px;font-size:.8125rem;font-weight:550; color:var(--suave);text-decoration:none;white-space:nowrap; transition:color .16s var(--ease)} .periodos a:hover{color:var(--texto)} .periodos a.on{background:var(--superficie);color:var(--texto);font-weight:650; box-shadow:var(--e1)} .abas{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px; border-bottom:1px solid var(--borda)} .abas a{position:relative;padding:9px 1px;font-size:.875rem;font-weight:550; color:var(--suave);text-decoration:none;transition:color .16s var(--ease)} .abas a:hover{color:var(--texto)} .abas a.on{color:var(--texto);font-weight:650} .abas a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:var(--lucro);border-radius:2px 2px 0 0} .abas a.bloq{opacity:.4;pointer-events:none} .abas a .n{margin-left:6px;font-size:.6875rem;color:var(--fraco); font-variant-numeric:tabular-nums} /* ═════════════════════════════════════════════════════════════════════════ A FITA — o herói, um por tela O faturamento é a barra inteira; cada custo come um pedaço; o que sobra é jade. A escala graduada em cima transforma a barra num instrumento: dá pra ler "a comissão vai de 27% a 38%" correndo o olho, sem legenda. Os vãos de 2px entre segmentos são da cor da superfície — é o vão que separa, nunca um contorno (contorno é tinta que não é dado). ═════════════════════════════════════════════════════════════════════════ */ .fita{position:relative;padding:20px 24px 22px;margin-bottom:16px; border:1px solid var(--borda);border-radius:var(--raio-lg); background:var(--superficie);box-shadow:var(--e2);overflow:hidden} /* sangria jade na direita: o lado onde o lucro sobra */ .fita::after{content:"";position:absolute;inset:0 0 auto auto;width:42%;height:100%; background:radial-gradient(120% 90% at 100% 0%, color-mix(in srgb,var(--lucro) 9%,transparent),transparent 70%); pointer-events:none} .fita-topo{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end; gap:8px 24px;margin-bottom:20px} .fita-de > span{display:block;font-size:.8125rem;color:var(--suave);font-weight:500} .fita-de b{display:block;margin-top:3px;font-size:1.5rem;font-weight:600; letter-spacing:-.035em;line-height:1} .fita-para{margin-left:auto;text-align:right} /* número herói: no sans do corpo, nunca na display — é leitura, não título */ .fita-para b{display:block;font-size:clamp(2rem,1.4rem + 1.9vw,2.75rem);font-weight:620; letter-spacing:-.045em;line-height:1;color:var(--lucro)} .fita-para > span{display:block;margin-bottom:4px;font-size:.8125rem;color:var(--suave);font-weight:500} .fita-para .margem{font-weight:650;color:var(--texto);font-size:.8125rem} .fita-d{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:8px;min-height:18px} .fita-para .fita-d{justify-content:flex-end} .fita-liq{margin-top:6px;font-size:.75rem;color:var(--fraco)} .fita-vazia{padding:0} /* ── a régua ── */ .fita-regua{position:relative} .fita-escala{position:relative;display:flex;justify-content:space-between; height:15px;margin-bottom:5px;font-size:.625rem;color:var(--fraco); font-variant-numeric:tabular-nums;user-select:none} .fita-escala span{position:absolute;left:var(--x);translate:-50% 0} .fita-escala span:first-child{translate:0 0} .fita-escala span:last-child{translate:-100% 0} /* os traços miúdos a cada 5% — impressos no fundo, como fita métrica */ .fita-escala::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px; background: repeating-linear-gradient(90deg,var(--borda-forte) 0 1px,transparent 1px 5%) 0 100%/100% 3px no-repeat, repeating-linear-gradient(90deg,var(--borda-forte) 0 1px,transparent 1px 25%) 0 100%/100% 5px no-repeat; opacity:.85} .fita-barra{display:flex;gap:2px;height:38px;border-radius:var(--raio-sm); background:var(--superficie)} .fita-barra .seg{position:relative;display:block;height:100%;width:var(--p); background:var(--cor);min-width:2px;font-style:normal} .fita-barra .seg:first-child{border-radius:var(--raio-sm) 0 0 var(--raio-sm)} .fita-barra .seg:last-child{border-radius:0 var(--raio-sm) var(--raio-sm) 0;flex:1} /* rótulo dentro do segmento, mas só quando cabe de verdade (>=9%): texto cortado é pior que texto ausente — a legenda embaixo carrega o resto */ .fita-barra .seg > span{position:absolute;inset:0;display:none;align-items:center; justify-content:center;font-size:.6875rem;font-weight:650;color:#fff; font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.28)} .fita-barra .seg.cabe > span{display:flex} .fita-barra .seg.claro > span{color:rgba(0,0,0,.72);text-shadow:none} /* balão no hover: o valor exato sem poluir a barra. --c é o centro do segmento na barra (0..1) e --l o mesmo ponto medido a partir do segmento; o rodapé mede os dois ao passar o mouse. Com left = --l e translate = -c×largura do balão, ele nunca sai da barra: centrado no meio, encostado na ponta perto das bordas (segmento do meio perto da direita saía 25 px da tela no celular). Sem JS vale o padrão: meio centrado, primeiro e último encostados. */ .fita-barra .seg{--c:.5;--l:50%} .fita-barra .seg:first-child{--c:0;--l:0%} .fita-barra .seg:last-child{--c:1;--l:100%} .fita-barra .seg::after{content:attr(data-bolha);position:absolute; bottom:calc(100% + 9px);left:var(--l);translate:calc(var(--c) * -100%) 0;z-index:5; width:max-content;max-width:calc(100vw - 16px); padding:6px 9px;border-radius:8px;pointer-events:none; background:var(--tinta);color:var(--fundo);font-size:.75rem;font-weight:550; opacity:0;transition:opacity .14s var(--ease),translate .14s var(--ease)} .fita-barra .seg:hover::after,.fita-barra .seg:focus-visible::after{opacity:1;translate:calc(var(--c) * -100%) -3px} .fita-barra .seg:hover{filter:brightness(1.08)} .fita-leg{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px} .fita-leg div{display:flex;align-items:baseline;gap:7px;font-size:.8125rem} .fita-leg b{align-self:center;width:9px;height:9px;border-radius:3px;flex:none; background:var(--cor)} .fita-leg .nm{color:var(--suave)} .fita-leg .vl{font-weight:600} .fita-leg .pc{color:var(--fraco);font-variant-numeric:tabular-nums} /* ═════════ trilho graduado — a régua em miniatura ═════════ Mesmo vocabulário da fita, reusado em ranking, margem e cobertura. */ .trilho{position:relative;display:block;height:6px;border-radius:99px;background:var(--cova); overflow:hidden} .trilho > i{display:block;height:100%;width:var(--p);border-radius:99px; background:var(--cor,var(--lucro))} .trilho.g::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:repeating-linear-gradient(90deg, color-mix(in srgb,var(--texto) 18%,transparent) 0 1px,transparent 1px 25%)} .trilho-alto{height:8px} /* ═════════ indicadores ═════════ Não são cartões: são leituras de instrumento. Sem sombra, raio menor, fundo da página — quem tem sombra aqui é a fita. */ .ind{display:grid;gap:10px;margin-bottom:16px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr))} @container tela (min-width:1100px){ .ind{grid-template-columns:repeat(5,1fr)} } .ind-c{position:relative;padding:13px 15px 12px;border:1px solid var(--borda); border-radius:var(--raio);background:var(--superficie)} .ind-r{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--suave); font-weight:550} .ind-r svg{width:13px;height:13px;opacity:.6} .ind-v{margin-top:7px;font-size:1.375rem;font-weight:620;letter-spacing:-.035em; line-height:1.05} .ind-v small{font-size:.8125rem;font-weight:500;color:var(--fraco);letter-spacing:0} .ind-s{margin-top:4px;font-size:.75rem;color:var(--fraco)} .ind-c.lucro .ind-v{color:var(--lucro)} .ind-c.custo .ind-v{color:var(--custo)} /* delta: seta + valor + contra o quê. A direção é forma, não só cor. */ .delta{display:inline-flex;align-items:center;gap:3px;font-size:.75rem;font-weight:650; font-variant-numeric:tabular-nums} .delta svg{width:11px;height:11px} .delta.sobe{color:var(--lucro)} .delta.desce{color:var(--custo)} .delta.parado{color:var(--fraco)} .delta-ref{color:var(--fraco);font-weight:400;margin-left:4px} /* faísca: a tendência do período, ponto final no valor de agora */ .faisca-w{position:relative;display:block;height:24px;margin-top:10px;color:var(--suave)} .faisca{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .faisca *{vector-effect:non-scaling-stroke} .faisca .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round; stroke-linejoin:round;opacity:.55} .faisca .ar{fill:currentColor;opacity:.08} .faisca-w i{position:absolute;left:100%;width:6px;height:6px;border-radius:50%; translate:-50% -50%;background:currentColor;box-shadow:0 0 0 2px var(--superficie)} .ind-c.lucro .faisca-w{color:var(--lucro)} .ind-c.custo .faisca-w{color:var(--custo)} /* ═════════ caixas e grade ═════════ */ .caixa{background:var(--superficie);border:1px solid var(--borda); border-radius:var(--raio-md);box-shadow:var(--e1)} .caixa-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:14px 18px;border-bottom:1px solid var(--borda)} .caixa-cab h2{flex:1;min-width:130px} .caixa-cab .sub{width:100%;margin-top:-3px;font-size:.8125rem;color:var(--suave)} .caixa-corpo{padding:18px} .caixa-pe{padding:12px 18px;border-top:1px solid var(--borda);background:var(--cova); border-radius:0 0 var(--raio-md) var(--raio-md);font-size:.8125rem;color:var(--suave)} .grade{display:grid;gap:14px;align-items:start;margin-bottom:14px} .g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))} .g2 > .caixa{align-self:stretch} .g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} /* a leitura principal: gráfico largo + coluna de apoio */ .g-leitura{grid-template-columns:minmax(0,1fr)} @container tela (min-width:1040px){ .g-leitura{grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr)} } /* ═════════ gráfico ═════════ Eixo único sempre. O SVG estica pra qualquer largura e o traço não engorda (non-scaling-stroke); rótulo, ponto e balão são HTML em % — continuam redondos e nítidos no celular. Malha discreta, ponto final com anel da superfície pra não sumir quando cruza outra linha. */ .graf-caixa{position:relative;--alt-graf:236px;display:flex;flex-direction:column;height:100%} .caixa-graf{align-self:stretch;display:flex;flex-direction:column} .caixa-graf > .caixa-corpo{flex:1;display:flex;flex-direction:column} .graf-plano{flex:1;display:grid;grid-template-columns:52px minmax(0,1fr);min-height:var(--alt-graf)} .graf-y{position:relative} .graf-y span{position:absolute;right:10px;translate:0 -50%;font-size:.6875rem; color:var(--fraco);font-variant-numeric:tabular-nums;white-space:nowrap} .graf-area{position:relative;outline:none;touch-action:pan-y; cursor:crosshair} .graf-area:focus-visible{box-shadow:0 0 0 2px var(--lucro);border-radius:4px} .graf{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .graf *{vector-effect:non-scaling-stroke} .graf .malha{stroke:var(--borda);stroke-width:1} .graf .malha.zero{stroke:var(--borda-forte)} .graf .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .graf .ln.fat{stroke:var(--tinta);stroke-width:1.75} .graf .ln.luc{stroke:var(--lucro);stroke-width:2.25} .graf .ln.ant{stroke:var(--fraco);stroke-width:1.5;stroke-dasharray:4 4;opacity:.8} /* o último trecho ainda está acontecendo (hora/dia corrente): tracejado */ .graf .ln.parcial{stroke-dasharray:3 4} .graf .ar{fill:var(--lucro);opacity:.16} /* o custo é o vão entre faturamento e lucro — cinza de tinta, não cor de categoria: ele junta as quatro fatias da fita */ .graf .faixa-custo{fill:var(--texto);opacity:.055} .graf .futuro{fill:var(--cova);opacity:.7} .graf-agora{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--borda-forte); pointer-events:none} .graf-agora i{position:absolute;top:-2px;left:6px;font-style:normal;font-size:.625rem; font-weight:600;color:var(--fraco)} .graf-pt,.marca-h{position:absolute;width:9px;height:9px;border-radius:50%; translate:-50% -50%;background:var(--cor);box-shadow:0 0 0 2px var(--superficie); pointer-events:none} .graf-pt{transition:opacity .15s var(--ease)} .graf-caixa.ativo .graf-pt{opacity:0} .marca-h{opacity:0;transition:opacity .12s var(--ease)} .graf-caixa.ativo .marca-h:not([hidden]){opacity:1} .cruz{position:absolute;top:0;bottom:0;width:0;border-left:1px solid var(--borda-forte); opacity:0;pointer-events:none} .graf-caixa.ativo .cruz{opacity:1} .graf-x{position:relative;height:22px;margin:6px 0 0 52px} .graf-x span{position:absolute;top:0;translate:-50% 0;font-size:.6875rem;color:var(--fraco); font-variant-numeric:tabular-nums;white-space:nowrap} .graf-x span:first-child{translate:0 0} .graf-x span:last-child{translate:-100% 0} /* estreito: um rótulo sim, um não, contando do fim (o de hoje fica). Com 30 dias em 390 px os rótulos das pontas se encostavam ("28/0802/09"). */ @container tela (max-width:560px){ .graf-x span:nth-last-child(even){display:none} } /* balão: ao lado da cruz, do lado que tem espaço */ .balao{position:absolute;top:6px;z-index:6;min-width:196px;padding:10px 12px; pointer-events:none;border-radius:var(--raio-sm);background:var(--tinta);color:var(--fundo); box-shadow:var(--e3);font-size:.75rem;opacity:0;translate:14px 0; transition:opacity .12s var(--ease)} .balao.esq{translate:calc(-100% - 14px) 0} .graf-caixa.ativo .balao{opacity:1} .balao b{display:block;margin-bottom:6px;font-size:.6875rem;font-weight:600;opacity:.62} .balao div{display:flex;align-items:center;gap:8px;margin-top:4px; font-variant-numeric:tabular-nums} .balao i{width:8px;height:8px;border-radius:2px;flex:none;background:var(--cor); box-shadow:0 0 0 1px color-mix(in srgb,var(--fundo) 45%,transparent)} .balao i.risco{height:2px;width:10px;border-radius:1px} .balao span{margin-left:auto;padding-left:14px;font-weight:650} .balao em{display:block;margin-top:8px;padding-top:7px;font-style:normal;font-size:.6875rem; opacity:.62;border-top:1px solid color-mix(in srgb,var(--fundo) 18%,transparent)} /* entrada: o traço corre da esquerda pra direita uma vez, quando a tela abre */ @media (prefers-reduced-motion:no-preference){ .graf{animation:revela .9s var(--ease) .1s both} .graf-pt{animation:surge .3s var(--ease) .85s both} @keyframes revela{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes surge{from{opacity:0;scale:.4}} } .legenda{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:12px;font-size:.8125rem; color:var(--suave)} .legenda span{display:inline-flex;align-items:center;gap:7px} .legenda i{width:9px;height:9px;border-radius:3px;flex:none} .legenda i.risco{width:14px;height:2px;border-radius:2px} .legenda i.tracejado{background:repeating-linear-gradient(90deg,var(--fraco) 0 4px,transparent 4px 7px)} .legenda i.faixa-i{background:color-mix(in srgb,var(--texto) 9%,transparent); box-shadow:inset 0 0 0 1px var(--borda-forte)} /* ═════════ tabela ═════════ */ .rolagem{overflow-x:auto;overscroll-behavior-x:contain} table{width:100%;border-collapse:collapse;font-size:.8438rem} th{padding:10px 14px;text-align:left;white-space:nowrap; font-size:.6875rem;font-weight:600;color:var(--fraco); background:var(--cova);border-bottom:1px solid var(--borda)} .caixa > .rolagem > table > thead th:first-child{border-radius:0} td{padding:11px 14px;border-bottom:1px solid var(--borda);vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr.clicavel{cursor:pointer;transition:background .13s var(--ease)} tbody tr.clicavel:hover{background:var(--superficie-2)} /* a linha inteira ganha um fio jade à esquerda no hover — mostra o alvo do clique sem repintar a linha toda */ tbody tr.clicavel:hover td:first-child{box-shadow:inset 3px 0 0 var(--lucro)} .dir{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .val-pos{color:var(--lucro);font-weight:600} .val-neg{color:var(--custo);font-weight:600} tfoot td{font-weight:700;background:var(--cova);border-top:1px solid var(--borda-forte)} /* A coluna de itens é a elástica: width:100% + max-width:0 zera a largura mínima dela, então as outras colunas ficam do tamanho do conteúdo e esta pega só o que sobrar — e corta com reticências em vez de empurrar a tabela. */ .celula-itens{width:100%;max-width:0;font-size:.8125rem;color:var(--suave)} .celula-itens > span{display:block;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .celula-nome b{display:block;font-weight:600} .celula-nome span{font-size:.75rem;color:var(--fraco)} /* margem com o trilho embutido: o número e a régua na mesma célula */ .cel-margem{display:flex;align-items:center;gap:9px;justify-content:flex-end} .cel-margem .trilho{width:52px;flex:none} td.quando{white-space:nowrap} /* tabela estreita: some a coluna longa, fica o que decide (valor, lucro, status) */ @container tela (max-width:640px){ .oc-estreito{display:none} } /* a lista de pedidos tem 9 colunas: antes de rolar de lado, ela vai largando o que é detalhe — itens (está no pedido), nome do canal (fica a inicial colorida), a régua da margem e, por último, a fita por pedido */ @container tela (max-width:1060px){ .tab-pedidos :is(th,td){padding-inline:10px} .tab-pedidos .oc-medio{display:none} } @container tela (max-width:880px){ .tab-pedidos .plat-n{display:none} .tab-pedidos .cel-margem .trilho{display:none} } @container tela (max-width:760px){ .tab-pedidos .oc-fita{display:none} } .c-rot{display:none} /* no celular a linha vira cartão: número e total em cima, hora, canal e lucro embaixo — o dinheiro não pode ficar escondido atrás de rolagem lateral */ @container tela (max-width:560px){ .tab-pedidos, .tab-pedidos tbody{display:block} .tab-pedidos thead{display:none} .tab-pedidos tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center; gap:3px 12px;padding:12px 16px;border-bottom:1px solid var(--borda); grid-template-areas:"ped total" "meta lucro" "meta status"} .tab-pedidos tbody tr:last-child{border-bottom:0} .tab-pedidos td{padding:0;border:0;display:block} .tab-pedidos tr.clicavel:hover td:first-child{box-shadow:none} .tab-pedidos tr.clicavel:hover{box-shadow:inset 3px 0 0 var(--lucro)} .tab-pedidos .celula-nome{grid-area:ped;display:flex;align-items:baseline;gap:8px;min-width:0} .tab-pedidos .celula-nome span{overflow:hidden} .tab-pedidos .c-total{grid-area:total;font-weight:650} .tab-pedidos .c-lucro{grid-area:lucro;font-size:.8125rem} .tab-pedidos .c-rot{display:inline;color:var(--fraco);font-weight:450} .tab-pedidos .c-status{grid-area:status;justify-self:end} .tab-pedidos .c-margem{display:none} /* hora e canal dividem a mesma célula da grade */ .tab-pedidos .quando{grid-area:meta;align-self:start;font-size:.75rem} .tab-pedidos .c-canal{grid-area:meta;align-self:end} .tab-pedidos .c-canal .plat-n{display:inline} .tab-pedidos .c-canal .plat{font-size:.75rem;color:var(--suave)} } /* ═════════ selos e plataformas ═════════ */ .selo{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:7px; font-size:.6875rem;font-weight:650;white-space:nowrap;line-height:1.45} .selo-ok{background:var(--lucro-fundo);color:var(--lucro)} .selo-ruim{background:var(--custo-fundo);color:var(--custo)} .selo-espera{background:var(--atencao-fundo);color:var(--atencao)} .selo-frio{background:var(--frio-fundo);color:var(--frio)} .selo-nulo{background:var(--cova);color:var(--suave);border:1px solid var(--borda)} .pt{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .selo-vivo .pt{animation:pulsa 1.8s var(--ease) infinite} @keyframes pulsa{0%{box-shadow:0 0 0 0 currentColor}70%,100%{box-shadow:0 0 0 6px transparent}} .plat{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:550; white-space:nowrap} .plat-i{width:20px;height:20px;border-radius:6px;flex:none;display:grid;place-items:center; color:#fff;font-size:.5625rem;font-weight:700;background:var(--cor)} /* ═════════ composição / ranking ═════════ */ .comp{display:flex;flex-direction:column;gap:15px} .comp-l{display:grid;grid-template-columns:1fr auto;gap:5px 14px;align-items:baseline} .comp-l .nm{font-size:.875rem;font-weight:550} .comp-l .vl{font-size:.875rem;font-weight:620} .comp-l .pc{font-size:.75rem;color:var(--fraco)} .comp-l .trilho{grid-column:1/-1;margin-top:2px} /* legado: telas ainda não refeitas usam
*/ .comp-l .br{grid-column:1/-1;height:6px;margin-top:2px;border-radius:99px; background:var(--cova);overflow:hidden} .comp-l .br i{display:block;height:100%;border-radius:99px} /* ═════════ alertas ═════════ O concorrente mostra "Sem alertas no momento". O nosso só existe quando o motor achou algo de verdade, e cada linha vem com o que fazer. */ .alertas{display:flex;flex-direction:column} .alerta{display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 12px; padding:13px 18px;border-bottom:1px solid var(--borda);align-items:start} .alerta:last-child{border-bottom:0} .alerta-i{width:30px;height:30px;border-radius:9px;display:grid; place-items:center;background:var(--cor-f);color:var(--cor)} .alerta-i svg{width:16px;height:16px} .alerta b{font-size:.875rem;font-weight:600;line-height:1.35} .alerta p{grid-column:2;font-size:.8125rem;color:var(--suave);line-height:1.45} .alerta-i{grid-row:span 3} .alerta-acao{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:5px; margin-top:7px;font-size:.8125rem;font-weight:600;color:var(--cor);text-decoration:none} .alerta-acao:hover{text-decoration:underline;text-underline-offset:3px} .alerta.grave{--cor:var(--custo);--cor-f:var(--custo-fundo)} .alerta.atento{--cor:var(--atencao);--cor-f:var(--atencao-fundo)} .alerta.info{--cor:var(--frio);--cor-f:var(--frio-fundo)} .alerta.bom{--cor:var(--lucro);--cor-f:var(--lucro-fundo)} /* ═════════ painel ═════════ */ .cab-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px} .canais{display:inline-flex;align-items:center;gap:8px;color:var(--fraco)} .canais .plat-i{width:18px;height:18px;border-radius:5px;font-size:.5rem;margin-right:-4px; box-shadow:0 0 0 2px var(--fundo)} .canais .plat-i:last-of-type{margin-right:2px} .cab-acoes .btn .pulso{margin-right:1px} /* primeiros passos: uma linha de etapas, não uma lista de tarefas riscadas */ .passos{margin-bottom:16px} .passos-cab{display:flex;align-items:center;gap:16px;padding:14px 16px 12px 18px} .passos-cab > div{flex:1;min-width:0} .passos-cab p{margin-top:2px;font-size:.8125rem;color:var(--suave)} .passos-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px; margin:0;padding:0 12px 12px;list-style:none} .passos-l a{display:grid;grid-template-columns:24px 1fr;gap:2px 10px;height:100%; padding:11px 12px;border:1px solid var(--borda);border-radius:var(--raio); text-decoration:none;background:var(--superficie); transition:border-color .16s var(--ease),background .16s var(--ease)} .passos-l a:hover{border-color:var(--borda-forte);background:var(--superficie-2)} .passos-l b{font-size:.8125rem;font-weight:600;line-height:1.35} .passos-l span:not(.passo-i){grid-column:2;font-size:.75rem;color:var(--suave);line-height:1.4} .passo-i{grid-row:span 2;width:24px;height:24px;border-radius:50%;display:grid; place-items:center;font-size:.6875rem;font-weight:700;color:var(--suave); border:1.5px dashed var(--borda-forte)} .passos-l .feito a{background:var(--cova);border-color:transparent} .passos-l .feito b{color:var(--suave)} .passos-l .feito .passo-i{border:0;background:var(--lucro);color:var(--lucro-texto)} /* indicador que é link (avaliação) */ a.ind-c{display:block;text-decoration:none;transition:border-color .16s var(--ease)} a.ind-c:hover{border-color:var(--borda-forte)} .ind-s{display:flex;align-items:center;flex-wrap:wrap;gap:3px 6px;min-height:18px} .ind-s .delta-ref{margin-left:0} /* estrelas como medidor: uma máscara de 5 estrelas preenchida até a nota */ .estrelas{display:inline-block;width:62px;height:11px;flex:none; background:linear-gradient(90deg,var(--fita-var) var(--p),var(--borda-forte) var(--p)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M6 .5l1.6 3.4 3.7.4-2.8 2.5.8 3.7L6 8.6 2.7 10.5l.8-3.7L.7 4.3l3.7-.4z'/%3E%3C/svg%3E") 0 0/12.4px 11px repeat-x; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M6 .5l1.6 3.4 3.7.4-2.8 2.5.8 3.7L6 8.6 2.7 10.5l.8-3.7L.7 4.3l3.7-.4z'/%3E%3C/svg%3E") 0 0/12.4px 11px repeat-x} .coluna{display:flex;flex-direction:column;gap:14px;min-width:0} .contagem{min-width:22px;height:22px;padding:0 7px;border-radius:7px;display:grid; place-items:center;font-size:.75rem;font-weight:700;background:var(--cova); color:var(--suave);font-variant-numeric:tabular-nums} .vazio-p{padding:22px 18px;text-align:left} .vazio-p p{margin:0;font-size:.8125rem} /* canal: identidade pelo ícone da plataforma; a barra é a MARGEM, então é jade */ .canais-l{display:flex;flex-direction:column} .canal{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:3px 12px; align-items:center;padding:12px 18px;border-bottom:1px solid var(--borda)} .canal:last-child{border-bottom:0} .canal .plat-i{width:24px;height:24px;border-radius:7px;font-size:.625rem} .canal-nm b,.canal-v b{display:block;font-size:.875rem;font-weight:600;line-height:1.3} .canal-nm span,.canal-v span{display:block;font-size:.75rem;color:var(--fraco)} .canal-v{text-align:right;font-variant-numeric:tabular-nums} .canal .trilho{grid-column:2/-1;margin-top:5px} /* ranking de itens */ .rank{margin:0;padding:4px 0;list-style:none} .rank li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center; padding:10px 18px} .rank li + li{border-top:1px solid var(--borda)} .rank-n{width:22px;height:22px;border-radius:7px;display:grid;place-items:center; font-size:.6875rem;font-weight:700;color:var(--fraco);background:var(--cova); font-variant-numeric:tabular-nums} .rank-nm{min-width:0} .rank-nm b{display:block;font-size:.875rem;font-weight:600;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .rank-nm span{display:block;font-size:.75rem;color:var(--fraco);font-variant-numeric:tabular-nums} .rank-v{display:flex;flex-direction:column;align-items:flex-end;gap:4px; font-variant-numeric:tabular-nums} .rank-v b{font-size:.875rem} .rank-v .cel-margem{font-size:.75rem;color:var(--suave)} /* horário de pico: colunas HTML, a hora cheia em tinta, o resto em cinza */ .pico-lide{margin-bottom:16px;font-size:.875rem;color:var(--suave)} .pico-lide b{color:var(--texto);font-weight:650} .picos{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px; align-items:end;height:128px} .picos i{position:relative;display:block;height:max(var(--h),2px);border-radius:4px 4px 1px 1px; background:color-mix(in srgb,var(--texto) 16%,transparent); transition:background .14s var(--ease)} .picos i.topo{background:var(--tinta)} .picos i:hover{background:var(--lucro)} .picos i::after{content:attr(data-bolha);position:absolute;bottom:calc(100% + 7px);left:50%; translate:-50% 0;z-index:5;padding:5px 8px;border-radius:7px;white-space:nowrap; pointer-events:none;background:var(--tinta);color:var(--fundo);font-size:.6875rem; font-weight:550;opacity:0;transition:opacity .12s var(--ease)} .picos i:hover::after{opacity:1} /* nas pontas o balão encosta na borda em vez de centrar — senão vaza da tela */ .picos i:nth-child(-n+2)::after{left:0;translate:0 0} .picos i:nth-last-child(-n+2)::after{left:auto;right:0;translate:0 0} .picos-x{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px;margin-top:6px} .picos-x span{font-size:.625rem;color:var(--fraco);text-align:center; font-variant-numeric:tabular-nums;white-space:nowrap} @media (prefers-reduced-motion:no-preference){ .picos i{transform-origin:bottom;animation:sobe-col .5s var(--ease) both} @keyframes sobe-col{from{transform:scaleY(0)}} } a.lk{text-decoration:none;font-weight:600} a.lk:hover{text-decoration:underline;text-underline-offset:3px} /* ═════════ formulário e botões ═════════ */ label{display:block;margin-bottom:5px;font-size:.75rem;font-weight:600;color:var(--suave)} input[type=text],input[type=email],input[type=password],input[type=number], input[type=search],input[type=date],select,textarea{ width:100%;padding:9px 12px;border:1px solid var(--borda);border-radius:var(--raio-sm); background:var(--cova);color:var(--texto);font-size:.875rem;outline:none; transition:border-color .16s var(--ease),box-shadow .16s var(--ease), background .16s var(--ease)} input:hover,select:hover,textarea:hover{border-color:var(--borda-forte)} input:focus,select:focus,textarea:focus{background:var(--superficie); border-color:var(--lucro); box-shadow:0 0 0 3px color-mix(in srgb,var(--lucro) 15%,transparent)} ::placeholder{color:var(--fraco)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:36px;padding:0 14px;border-radius:var(--raio-sm); border:1px solid var(--borda);background:var(--superficie);box-shadow:var(--e1); font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap; transition:border-color .16s var(--ease),background .16s var(--ease), transform .1s var(--ease)} .btn:hover{border-color:var(--borda-forte);background:var(--superficie-2)} .btn:active{transform:translateY(1px)} .btn svg{width:16px;height:16px;flex:none} .btn-p{background:var(--lucro);border-color:color-mix(in srgb,var(--lucro) 78%,#000); color:var(--lucro-texto); box-shadow:var(--fio), 0 1px 2px rgba(7,23,28,.1), 0 8px 20px -10px color-mix(in srgb,var(--lucro) 60%,transparent)} .btn-p:hover{background:color-mix(in srgb,var(--lucro) 90%,#fff); border-color:color-mix(in srgb,var(--lucro) 78%,#000)} .btn-s{min-height:30px;padding:0 11px;font-size:.8125rem} .btn-f{background:transparent;border-color:transparent;box-shadow:none;color:var(--suave)} .btn-f:hover{background:var(--cova);border-color:var(--borda);color:var(--texto)} .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none} .filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px} /* ═════════ filtros de lista ═════════ Uma barra só: busca larga + seletores compactos que se aplicam sozinhos. */ .filtros-p{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px} .filtros-p label{margin:0} .busca-c{position:relative;flex:1 1 240px;min-width:200px;display:block} .busca-c svg{position:absolute;left:11px;top:50%;translate:0 -50%;color:var(--fraco); pointer-events:none} .busca-c input{padding-left:36px;background:var(--superficie);min-height:38px} .sel-c{position:relative;display:block;flex:0 0 auto} .sel-c select{width:auto;min-height:38px;padding:0 30px 0 12px;background-color:var(--superficie); font-size:.8125rem;font-weight:550;cursor:pointer;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A9094' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:14px} .sel-c select:has(option:checked:not([value=""])){border-color:var(--borda-forte);color:var(--texto)} .sel-ordem{margin-left:auto} .sel-ordem svg{position:absolute;left:11px;top:50%;translate:0 -50%;color:var(--fraco); pointer-events:none} .sel-ordem select{padding-left:33px} .chips-ativos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px} .chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 11px; border-radius:99px;background:var(--lucro-fundo);color:var(--lucro);font-size:.8125rem; font-weight:600;text-decoration:none; border:1px solid color-mix(in srgb,var(--lucro) 24%,transparent)} .chip:hover{background:color-mix(in srgb,var(--lucro) 18%,transparent)} .chip svg{opacity:.7} .chip-limpa{margin-left:4px;font-size:.8125rem;color:var(--suave)} .chip-limpa:hover{color:var(--texto)} /* totais do filtro: números + a régua fina embaixo */ .resumo-f{margin-bottom:14px;padding:14px 18px 16px} .resumo-n{display:grid;gap:10px 20px;grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); margin-bottom:14px} .resumo-n span{display:block;font-size:.75rem;color:var(--suave);font-weight:550} .resumo-n b{display:block;margin-top:3px;font-size:1.125rem;font-weight:620; letter-spacing:-.03em} .resumo-n small{display:block;margin-top:1px;font-size:.6875rem;color:var(--fraco)} .fita-fina{height:10px;border-radius:99px} .fita-fina .seg:first-child{border-radius:99px 0 0 99px} .fita-fina .seg:last-child{border-radius:0 99px 99px 0} /* a fita miúda da linha: o pedido inteiro em 96px */ .mini-fita{position:relative;display:flex;gap:1px;width:96px;height:8px;border-radius:99px; background:var(--cova)} .mini-fita i{display:block;height:100%;width:var(--p);background:var(--cor);flex:none} .mini-fita i:first-child{border-radius:99px 0 0 99px} .mini-fita i:last-child{border-radius:0 99px 99px 0} .mini-fita::after{content:attr(data-bolha);position:absolute;bottom:calc(100% + 8px);left:50%; translate:-50% 0;z-index:5;padding:7px 10px;border-radius:8px;white-space:pre; pointer-events:none;background:var(--tinta);color:var(--fundo);font-size:.6875rem; line-height:1.55;font-weight:500;font-variant-numeric:tabular-nums;opacity:0; transition:opacity .12s var(--ease)} tr:hover .mini-fita::after{opacity:1} .tab-pedidos .celula-nome a{display:inline-block} .tab-pedidos .celula-nome span{display:flex;align-items:center;gap:4px;white-space:nowrap; margin-top:1px;font-size:.75rem;color:var(--fraco)} .tag{display:inline-block;white-space:nowrap;padding:0 6px;border-radius:5px;font-style:normal;font-size:.625rem; font-weight:650;line-height:1.6;background:var(--cova);color:var(--suave); border:1px solid var(--borda)} .tag-desc{background:var(--atencao-fundo);color:var(--atencao);border-color:transparent; font-variant-numeric:tabular-nums} tr.cancelado td:not(:last-child){opacity:.55} .pag .reticencia{color:var(--fraco);border:0} .filtros > div{flex:0 0 auto;min-width:132px} .filtros .busca{flex:1;min-width:210px} /* ═════════ integrações ═════════ */ .int-secao{margin-bottom:26px} .int-secao > h2{margin-bottom:3px} .int-secao > p{margin-bottom:13px;font-size:.8125rem;color:var(--suave)} .int-grade{display:grid;gap:11px;align-items:start; grid-template-columns:repeat(auto-fill,minmax(330px,1fr))} .int{padding:14px 16px;border:1px solid var(--borda);border-radius:var(--raio); background:var(--superficie);transition:border-color .18s var(--ease)} .int:hover{border-color:var(--borda-forte)} .int.ligada{border-color:color-mix(in srgb,var(--lucro) 40%,transparent); background:linear-gradient(180deg,var(--lucro-fundo),transparent 58%),var(--superficie)} .int-cab{display:flex;align-items:center;gap:12px} .int-i{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center; color:#fff;font-weight:700;font-size:.8125rem;letter-spacing:-.03em} .int-nm{flex:1;min-width:0} .int-nm b{display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.3; font-size:.9375rem;font-weight:600} .int-nm span{display:block;margin-top:1px;font-size:.75rem;color:var(--suave)} .int-form{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px; padding-top:14px;border-top:1px solid var(--borda)} .int-form .cheio{grid-column:1/-1} .int-form .acao{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end} /* ═════════ ao vivo ═════════ */ .vivo{padding:28px 26px 32px;text-align:center;border:1px solid var(--borda); border-radius:var(--raio-lg); background:radial-gradient(120% 140% at 50% 0%, color-mix(in srgb,var(--lucro) 22%,transparent) 0%,var(--superficie) 62%)} .vivo h2{font-size:1.625rem;font-weight:680;letter-spacing:-.04em} .vivo-rel{display:inline-flex;align-items:center;gap:8px;margin-top:10px; padding:5px 13px;border-radius:99px;background:var(--superficie); border:1px solid var(--borda);font-size:.8125rem;color:var(--suave)} .pulso{width:7px;height:7px;border-radius:50%;background:var(--lucro); animation:pulsa 1.8s var(--ease) infinite} .vivo-n{display:grid;gap:1px;margin-top:22px;background:var(--borda); border:1px solid var(--borda);border-radius:var(--raio-md);overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .vivo-n div{padding:19px 16px;background:var(--superficie)} .vivo-n span{display:block;margin-bottom:8px;font-size:.8125rem;color:var(--suave)} .vivo-n b{display:block;font-size:2rem;font-weight:640;letter-spacing:-.045em;line-height:1} /* ═════════ estados ═════════ */ .vazio{padding:44px 24px;text-align:center} .vazio-i{width:46px;height:46px;margin:0 auto 12px;border-radius:14px;display:grid; place-items:center;background:var(--cova);color:var(--fraco)} .vazio-i svg{width:21px;height:21px} .vazio h3{margin-bottom:6px;font-size:1rem} .vazio p{margin:0 auto;max-width:46ch;font-size:.875rem;color:var(--suave)} .vazio .btn{margin-top:14px} .nota{padding:11px 14px;border-radius:var(--raio-sm);font-size:.8438rem; background:var(--lucro-fundo);color:var(--lucro); border:1px solid color-mix(in srgb,var(--lucro) 22%,transparent)} .nota-erro{background:var(--custo-fundo);color:var(--custo); border-color:color-mix(in srgb,var(--custo) 22%,transparent)} .pag{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap; padding:16px;border-top:1px solid var(--borda)} .pag a,.pag span{padding:6px 11px;border-radius:8px;font-size:.8125rem; text-decoration:none;color:var(--suave);border:1px solid transparent} .pag a:hover{border-color:var(--borda);color:var(--texto)} .pag .on{background:var(--cova);color:var(--texto);font-weight:650; border-color:var(--borda)} /* ═════════ movimento ═════════ Uma entrada orquestrada, não efeito em cada elemento. A fita cresce uma vez quando a tela abre — é a única animação não pedida pelo usuário. */ @keyframes cresce{from{width:0}} @media (prefers-reduced-motion:no-preference){ .fita-barra .seg{animation:cresce .62s var(--ease) both} .fita-barra .seg:nth-child(2){animation-delay:.05s} .fita-barra .seg:nth-child(3){animation-delay:.1s} .fita-barra .seg:nth-child(4){animation-delay:.15s} .fita-barra .seg:last-child{animation-delay:.2s} } /* barras de ranking enchem ao entrar na tela — rolagem, não tempo */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .trilho > i{animation:cresce .01s linear both;animation-timeline:view(); animation-range:entry 10% entry 62%} } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} } /* troca de página sem piscar: a casca fica parada, só o conteúdo cruza */ @view-transition{navigation:auto} @media (prefers-reduced-motion:no-preference){ ::view-transition-old(conteudo){animation:sai .16s var(--ease) both} ::view-transition-new(conteudo){animation:entra .22s var(--ease) both} @keyframes sai{to{opacity:0;transform:translateY(-4px)}} @keyframes entra{from{opacity:0;transform:translateY(6px)}} } .lateral{view-transition-name:lateral} .barra{view-transition-name:barra} .conteudo{view-transition-name:conteudo} /* ═════════ responsivo ═════════ */ /* ═════════ carteira (Minhas lojas) ═════════ A peça da tela é a fita dupla: a mesma ordem de lojas em cima (parte nas vendas) e embaixo (parte no lucro). Loja cujo número "encolhe" de uma fita pra outra vende muito e sobra pouco — é a leitura que o gestor procura. */ .partes{position:relative;display:grid;gap:8px} .partes-l{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px} .partes-r{font-size:.75rem;font-weight:550;color:var(--suave)} .partes-b{height:28px} .partes-b.vendas .seg{--cor:var(--vendas-seg)} .partes-b.vendas .seg > span{color:var(--vendas-rot);text-shadow:none} .partes-b.lucro .seg{--cor:var(--lucro)} /* o hover numa loja acende o par dela nas duas fitas */ .partes:has(.seg:hover) .seg:not(:hover){opacity:.55} .partes-leg{position:relative;list-style:none;margin:16px 0 0;padding:0 0 0 64px; display:grid;gap:6px 26px;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))} .partes-leg li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 8px;align-items:baseline} .partes-n{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;align-self:center; grid-row:span 2;font-size:.6875rem;font-weight:650;background:var(--cova);color:var(--suave); font-variant-numeric:tabular-nums} .partes-leg a{font-size:.8125rem;font-weight:600;color:var(--texto);text-decoration:none; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .partes-leg a:hover{text-decoration:underline;text-underline-offset:3px} .partes-v{font-size:.75rem;color:var(--fraco)} .partes-v b{font-weight:650;color:var(--suave)} .partes-v b.val-neg{color:var(--custo)} .partes-v b.val-pos{color:var(--lucro)} .partes-nota{position:relative;margin-top:12px;padding-left:64px;font-size:.75rem;color:var(--custo)} @container tela (min-width:900px){ .ind-4{grid-template-columns:repeat(4,1fr)} } /* avatar de loja: quadrado de raio médio, iniciais — não é pessoa, não é círculo */ .loja-av{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center; font-size:.6875rem;font-weight:700;letter-spacing:.02em;color:var(--suave); background:var(--cova);border:1px solid var(--borda)} .atencao{display:flex;flex-direction:column} .aten{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center; padding:12px 18px;border-top:1px solid var(--borda); box-shadow:inset 3px 0 0 var(--cor)} .aten.grave{--cor:var(--custo)} .aten.atento{--cor:var(--atencao)} .aten.info{--cor:var(--frio)} .aten-tx{min-width:0;display:flex;flex-direction:column;gap:2px} .aten-nm{font-size:.75rem;font-weight:600;color:var(--suave);text-decoration:none} .aten-nm:hover{color:var(--texto);text-decoration:underline;text-underline-offset:3px} .aten-tx b{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;line-height:1.35} .aten-tx b svg{flex:none;width:14px;height:14px;color:var(--cor)} .aten-mais{font-size:.75rem;color:var(--fraco);line-height:1.45} /* tabela lado a lado */ .th-ord{display:inline-flex;align-items:center;gap:3px;color:inherit;text-decoration:none} .th-ord svg{width:11px;height:11px;opacity:0;transition:opacity .15s var(--ease)} .th-ord:hover{color:var(--texto)} .th-ord:hover svg{opacity:.5} .th-ord.on{color:var(--texto)} .th-ord.on svg{opacity:1} .tab-lojas td{padding-block:12px} .c-loja{position:relative;display:flex;align-items:center;gap:11px;min-width:220px} .c-loja-tx{min-width:0;display:flex;flex-direction:column;gap:3px} .c-loja-tx .lk{color:var(--texto);white-space:nowrap} .c-loja-meta{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--fraco)} .canais-mini{display:inline-flex;gap:3px} .canais-mini .plat-i{width:15px;height:15px;border-radius:4px;font-size:.5625rem} .plat-i.erro{outline:2px solid var(--custo);outline-offset:1px} /* o pior sinal da loja, como um ponto na ponta do nome */ .ponto-sinal{width:7px;height:7px;border-radius:50%;flex:none;margin-left:auto;background:var(--cor)} .ponto-sinal.grave{--cor:var(--custo)} .ponto-sinal.atento{--cor:var(--atencao)} .ponto-sinal.info{--cor:var(--frio)} .c-fat b,.c-luc b{display:block;font-weight:620} .c-sub{display:flex;justify-content:flex-end;margin-top:2px;min-height:16px} .c-sub .delta{font-size:.6875rem} .c-tend{width:120px} .c-tend .faisca-w{margin-top:0;width:110px;color:var(--suave)} .tab-lojas .cel-margem .trilho{width:64px;overflow:visible} /* o risco da média da carteira atravessa a régua de cada loja */ .regua-media::after{content:"";position:absolute;left:var(--media);top:-3px;bottom:-3px;width:2px; margin-left:-1px;border-radius:1px;background:var(--tinta);z-index:2} .regua-media > i{border-radius:99px} .nota-c{display:inline-flex;align-items:center;gap:4px;font-weight:600} .nota-c svg{width:12px;height:12px;color:var(--atencao)} /* lista em duas colunas quando a caixa é larga; a borda entre itens vira grade */ .rank-duas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));column-gap:28px;padding-inline:0} .rank.rank-duas li + li{border-top:0} .rank.rank-duas li{border-bottom:1px solid var(--borda)} /* fios entre as lojas desenhados na própria célula: a última linha incompleta fica em branco, não num bloco cinza de "vão" da grade */ .caixa-grade{overflow:hidden} .campeoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); margin:0 -1px -1px 0;border-top:1px solid var(--borda)} .campeao{padding:14px 18px 16px;border-right:1px solid var(--borda);border-bottom:1px solid var(--borda)} .campeao-cab{display:flex;align-items:center;gap:9px;margin-bottom:10px;color:var(--texto);text-decoration:none} .campeao-cab .loja-av{width:26px;height:26px;border-radius:7px;font-size:.625rem} .campeao-cab b{font-size:.8125rem;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .campeao-cab:hover b{text-decoration:underline;text-underline-offset:3px} .campeao ol{list-style:none;margin:0;padding:0;display:grid;gap:9px} .campeao li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px} .campeao-nm{font-size:.8125rem;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .campeao-v{font-size:.8125rem;font-weight:600} .campeao-b{grid-column:1 / -1;height:4px;border-radius:99px;background:var(--cova)} .campeao-b i{display:block;height:100%;width:var(--p);border-radius:inherit;background:var(--tinta);opacity:.78} .campeao-m{grid-column:1 / -1;font-size:.6875rem;color:var(--fraco)} .campeao-m b{font-weight:650;color:var(--lucro)} .campeao-m b.val-neg{color:var(--custo)} /* como na lista de pedidos: antes de rolar de lado, larga o que o painel da loja já mostra — primeiro a faísca, depois pedidos e ticket */ @container tela (max-width:1060px){ .tab-lojas .oc-medio{display:none} .tab-lojas :is(th,td){padding-inline:11px} } @container tela (max-width:900px){ .tab-lojas .oc-900{display:none} } @container tela (max-width:560px){ .partes-l{grid-template-columns:44px minmax(0,1fr);gap:8px} .partes-leg,.partes-nota{padding-left:0} .aten{grid-template-columns:32px minmax(0,1fr);padding:12px 16px} .aten > .btn{grid-column:2;justify-self:start} /* a tabela vira cartões: nome em cima, faturamento e lucro lado a lado */ .tab-lojas,.tab-lojas tbody{display:block} .tab-lojas thead,.tab-lojas tfoot{display:none} .tab-lojas tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px 16px; border-bottom:1px solid var(--borda)} .tab-lojas tbody tr:last-child{border-bottom:0} .tab-lojas td{display:block;padding:0;border:0} .tab-lojas td.oc-estreito,.tab-lojas td.oc-medio{display:none} .tab-lojas tr.clicavel:hover td:first-child{box-shadow:none} .tab-lojas td.c-loja{grid-column:1 / -1;min-width:0;display:flex} .tab-lojas .c-fat,.tab-lojas .c-luc{text-align:left} .tab-lojas .c-sub{justify-content:flex-start} .tab-lojas .c-marg{grid-column:1 / -1;text-align:left} .tab-lojas .c-marg .cel-margem{justify-content:flex-start} .tab-lojas .cel-margem .trilho{display:block;flex:1} } @media (max-width:960px){ .casca{grid-template-columns:1fr} /* a lateral inteira vira gaveta — mesmo menu, mesma ordem, nada escondido. visibility entra no transition pra gaveta fechada sair da ordem de foco */ .lateral{position:fixed;inset:0 auto 0 0;z-index:70;width:min(300px,86vw);height:100dvh; overflow-y:auto;overscroll-behavior:contain;box-shadow:0 24px 64px rgb(6 12 15 / .22); transform:translateX(-104%);visibility:hidden; transition:transform .3s var(--ease),visibility 0s linear .3s} body.menu-aberto .lateral{transform:none;visibility:visible;transition:transform .3s var(--ease)} .veu{position:fixed;inset:0;z-index:65;background:rgb(6 12 15 / .44); backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)} body.menu-aberto .veu{opacity:1;pointer-events:auto} body.menu-aberto{overflow:hidden} .gat.bt-menu{display:inline-flex;margin-left:-6px} .veu{display:block} .barra{padding:0 16px;gap:6px} .barra-sep,.barra-loja,.gat-rot,.gat kbd{display:none} .barra-tit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .conteudo{padding:16px 16px 56px} .fita{padding:16px 16px 18px} .fita-para{margin-left:0;text-align:left;width:100%} .fita-escala{font-size:.5625rem} .cel-margem .trilho{display:none} .fita-para .fita-d{justify-content:flex-start} } @media (max-width:560px){ .ind{grid-template-columns:repeat(auto-fit,minmax(134px,1fr))} .fita-barra{height:30px} .periodos{width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none;overscroll-behavior-x:contain} .periodos::-webkit-scrollbar{display:none} .cab-acoes{width:100%} } /* ═════════ tela de entrar ═════════ Mantida do desenho anterior: o lado direito é o painel REAL dentro de uma janela de navegador — densidade vende. Só os tokens foram religados. */ /* ───────── entrar ───────── */ .entrar{min-height:100dvh;display:grid;place-items:center;padding:24px; background:radial-gradient(90% 60% at 50% -10%, color-mix(in srgb,var(--lucro) 16%,transparent),var(--fundo) 60%)} .entrar-cx{width:100%;max-width:372px} .entrar-cx .marca{justify-content:center;width:100%;padding-bottom:22px} .campo{margin-bottom:14px} /* A janela do lado direito é o painel REAL em miniatura — densidade vende. Texto pequeno é textura; legibilidade só na hierarquia alta. ═══════════════════════════════════════════════════════════════ */ .entrada{min-height:100dvh;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr)} .entrada-form{display:flex;flex-direction:column;justify-content:center; padding:48px 6vw;background:var(--fundo)} .entrada-form .dentro{width:100%;max-width:376px;margin:0 auto} .entrada-form .marca{padding:0 0 40px} .entrada h1{font-size:1.75rem;letter-spacing:-.035em;margin-bottom:6px} .entrada .sub{color:var(--suave);font-size:.9375rem;margin-bottom:28px} .entrada .campo{margin-bottom:15px} .entrada label{font-size:.8125rem;margin-bottom:6px} .entrada input{padding:12px 14px;font-size:.9375rem;border-radius:11px;background:var(--superficie)} .entrada .btn{padding:13px 18px;font-size:.9375rem;border-radius:11px;width:100%;margin-top:4px} .entrada .pe{margin-top:24px;padding-top:20px;border-top:1px solid var(--borda); color:var(--fraco);font-size:.8125rem;line-height:1.75} .entrada .pe code{font-family:var(--mono);font-size:.75rem;color:var(--suave); background:var(--fundo-2);padding:2px 6px;border-radius:5px} /* ---------- cena escura + janela ---------- */ .cena{--p0:#070B0F;--p1:#0C1218;--p2:#111922;--t1:#E8EFEC;--t2:#93A5A0;--t3:#63736F; --h1:rgba(255,255,255,.07);--h2:rgba(255,255,255,.12);--ac:#2BBF74; position:relative;display:flex;flex-direction:column;justify-content:center; padding:48px 4vw;background:var(--p0);overflow:hidden} .cena::before{content:"";position:absolute;inset:-30% -20% 30% -20%; background:radial-gradient(55% 60% at 50% 70%,rgba(43,191,116,.16),transparent 72%); pointer-events:none} .cena-in{position:relative;width:100%;max-width:640px;margin:0 auto} .janela{border-radius:13px;overflow:hidden;background:var(--p1); border:1px solid var(--h2); box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 44px 80px -30px rgba(0,0,0,.9); font-variant-numeric:tabular-nums} .janela-barra{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--p0); border-bottom:1px solid var(--h1)} .dots{display:flex;gap:5px} .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)} .url{flex:1;display:flex;align-items:center;gap:6px;justify-content:center; background:rgba(255,255,255,.05);border-radius:6px;padding:3px 10px; font-family:var(--mono);font-size:10.5px;color:var(--t3);letter-spacing:.01em} .url svg{width:9px;height:9px;flex:none;opacity:.7} /* ---------- miniatura do painel ---------- */ .app{display:grid;grid-template-columns:104px minmax(0,1fr);min-height:330px} .lat{background:var(--p0);border-right:1px solid var(--h1);padding:11px 9px; display:flex;flex-direction:column;gap:2px} .lat-marca{display:flex;align-items:center;gap:6px;padding:2px 4px 11px; font-size:10px;font-weight:700;color:var(--t1);letter-spacing:-.02em} .lat-marca svg{width:14px;height:14px;color:var(--ac);flex:none} .lat a{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:5px; font-size:9.5px;color:var(--t3);text-decoration:none} .lat a.on{background:rgba(255,255,255,.06);color:var(--t1);font-weight:600} .lat a i{width:4px;height:4px;border-radius:1px;background:currentColor;opacity:.55;flex:none} .lat-pe{margin-top:auto;display:flex;align-items:center;gap:6px;padding:6px 4px 0; border-top:1px solid var(--h1)} .lat-av{width:15px;height:15px;border-radius:50%;background:var(--ac);flex:none} .lat-pe span{font-size:8.5px;color:var(--t3)} .tela{padding:13px 15px} .tela-cab{display:flex;align-items:baseline;gap:8px;margin-bottom:11px} .tela-cab h3{font-size:12.5px;color:var(--t1);letter-spacing:-.01em} .tela-cab .trilha{font-family:var(--mono);font-size:8.5px;color:var(--t3)} .tela-cab .periodo{margin-left:auto;display:flex;gap:2px} .tela-cab .periodo i{font-style:normal;font-size:8.5px;color:var(--t3); padding:2px 6px;border-radius:4px} .tela-cab .periodo i.on{background:rgba(255,255,255,.07);color:var(--t1)} .inds{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px} .ind2{background:var(--p2);border:1px solid var(--h1);border-radius:7px;padding:7px 8px} .ind2 span{display:block;font-size:8px;color:var(--t3);margin-bottom:2px} .ind2 b{font-size:13px;color:var(--t1);letter-spacing:-.02em} .ind2 em{font-style:normal;font-size:8px;color:var(--ac);margin-left:3px} .ind2 .spark{display:flex;align-items:flex-end;gap:1.5px;height:9px;margin-top:4px} .ind2 .spark i{flex:1;background:var(--ac);opacity:.55;border-radius:1px} .faixa{background:var(--p2);border:1px solid var(--h1);border-radius:7px; padding:9px 10px;margin-bottom:11px} .faixa-topo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px} .faixa-topo span{font-size:8.5px;color:var(--t3)} .faixa-topo b{font-size:11px;color:var(--ac)} .faixa-barra{display:flex;height:13px;gap:1.5px;border-radius:4px;overflow:hidden} .faixa-barra i{display:block;height:100%} .faixa-barra i:first-child{border-radius:4px 0 0 4px} .faixa-barra i:last-child{border-radius:0 4px 4px 0} .faixa-leg{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap} .faixa-leg span{display:flex;align-items:center;gap:4px;font-size:8px;color:var(--t3)} .faixa-leg span i{width:5px;height:5px;border-radius:1.5px;flex:none} .mini{width:100%;border-collapse:collapse} .mini th{font-size:7.5px;color:var(--t3);text-align:left;padding:0 6px 5px; border-bottom:1px solid var(--h1);font-weight:500;letter-spacing:.02em} .mini td{font-size:9px;color:var(--t2);padding:5px 6px;border-bottom:1px solid var(--h1)} .mini tr:last-child td{border-bottom:0} .mini .d{text-align:right} .mini .nome{color:var(--t1)} .mini .pos{color:var(--ac)} .mini .neg{color:#FF8B7D} .selo2{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;padding:1px 5px; border-radius:3px;background:rgba(43,191,116,.14);color:var(--ac)} .selo2 i{width:3px;height:3px;border-radius:50%;background:currentColor} .selo2.al{background:rgba(255,139,125,.14);color:#FF8B7D} .cena-texto{margin-top:30px;max-width:44ch} .cena-texto h2{font-family:var(--titulo);font-size:1.5rem;font-weight:600; letter-spacing:-.035em;line-height:1.2;color:var(--t1);margin-bottom:8px} .cena-texto p{color:var(--t2);font-size:.875rem} @media (max-width:1000px){ .entrada{grid-template-columns:1fr} .cena{order:-1;padding:26px 18px 24px} .cena-in{max-width:560px} .cena-texto{margin-top:20px} .cena-texto h2{font-size:1.25rem} .entrada-form{padding:34px 20px 48px} .entrada-form .marca{padding-bottom:26px} } @media (max-width:620px){ .app{grid-template-columns:1fr} .lat{display:none} } /* ── sino (onda 2) ── */ /* O popover vai para a camada do topo e perde o vínculo com o botão: sem isto ele abria colado no canto esquerdo da janela. O sino fica sempre no canto direito da barra fixa, então o balão pousa ali, logo abaixo dela. */ #pop-avisos{position:fixed;inset:auto;top:calc(56px + 2px);right:max(12px,env(safe-area-inset-right)); width:min(380px,calc(100vw - 24px));max-width:none;min-width:0;margin:0; max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain} @media (min-width:961px){ #pop-avisos{right:30px} } .pop-avisos .pop-t{display:flex;align-items:center;gap:6px} /* cada aviso: o ícone carrega a gravidade (cor + forma do ícone), o texto diz o que houve e a loja vem embaixo quando há mais de uma */ .pop a.aviso{align-items:flex-start;gap:11px;padding:9px 10px;color:var(--texto); font-size:.8125rem;line-height:1.4;font-weight:500} .aviso-i{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center; color:var(--cor,var(--frio));background:var(--cor-f,var(--frio-fundo))} .aviso-i svg{width:15px;height:15px} .aviso-grave{--cor:var(--custo);--cor-f:var(--custo-fundo)} .aviso-atento{--cor:var(--atencao);--cor-f:var(--atencao-fundo)} .aviso-info{--cor:var(--frio);--cor-f:var(--frio-fundo)} .aviso-tx{min-width:0;padding-top:3px} .aviso-loja{display:block;margin-top:1px;font-size:.75rem;color:var(--fraco);font-weight:500} .aviso-grave .aviso-tx{font-weight:600} .pop a.aviso:focus-visible{outline:2px solid var(--lucro);outline-offset:-2px} /* grave pinta o ponto do sino; o resto só marca que há algo */ .gat-sino:has(+ #pop-avisos .aviso-grave)::after{background:var(--custo)} .gat-sino:not(:has(+ #pop-avisos .aviso-grave))[data-n]:not([data-n="0"])::after{background:var(--atencao)}