/* ============================================================ cheff-ui.css — Portal do Colaborador · Loja Cheff Direção C "Superfície" · fechado em 03/08/2026 · superfície v3 em 03/09/2026 · 70 decisões Canônico em: ~/portal/public/cheff-ui.css A razão de cada regra está no Guia de UI. Não "conserte" o que parece inconsistente sem ler o porquê — quase tudo aqui é deliberado e tem custo registrado. ============================================================ */ /* ---------- 0.1 COR ------------------------------------------ A TINTA (--fg) é a cor de COMANDO, não "cor de texto". Quatro cores semânticas, e cor SÓ diz estado (decisão 66, 03/09/2026): vermelho = queda, erro, destrutivo · verde = positivo · âmbar = atenção (vence hoje, parada, baixo giro) · azul = informação neutra (novo, delegada, "atualizado às"). PROIBIDO continua: cor decorativa, azul de LINK, cor em botão comum, cor em ícone de menu, gradiente. Fundo da página é N100 (#F5F4F2) e o card é branco: quem separa o bloco do fundo é a SOMBRA (decisão 61-62). Cinza de contenção (--fill) marca ativo, controle e cabeçalho — nunca decora. Todo texto ≥ 4.5:1. Cinza novo entra só depois de medido. */ :root{ /* ---------- 0.0 TOKENS SEMÂNTICOS (decisão 60, 03/09/2026) ---------- Nome de PAPEL, nunca de cor. Todo componente lê daqui; fora deste bloco não existe #fff nem #000 (travado por teste). O modo escuro é uma segunda tabela destes mesmos nomes — nada de regra por tema em componente. */ --page-bg:#F5F4F2; /* fundo da página — N100 (decisão 61); card branco por cima */ --surface:#FFFFFF; /* card, popover, modal, campo, botão secundário */ --surface-2:#FAF9F8; /* cabeçalho de card dividido */ --hover:#FAF9F8; /* linha sob o cursor */ --fill:#F5F4F2; /* contenção: trilho, cabeçalho de tabela, selo neutro */ --fg:#121110; /* texto e comando — 18.9:1 no branco */ --fg-2:#2E2C2A; /* texto secundário */ --fg-mut:#6F6B66; /* apoio — 5.29 no branco · 5.03 no --hover · 4.81 no --fill (decisão 65) */ --fg-dis:var(--fg-mut); /* texto de controle desabilitado — mesmo degrau do apoio desde a decisão 65 */ --on-fg:#FFFFFF; /* texto sobre --fg e sobre cor forte (primário, toast, badge do menu) */ --on-fg-mut:rgba(255,255,255,.62); /* apoio sobre --fg — 4.6:1, medido */ --knob:#FFFFFF; /* bolinha do interruptor */ --logo-filter:none; /* a logo é PNG preto: no escuro vira invert(1) (único caso de imagem) */ --line:#ECEBE9; /* divisor dentro do card (linha, célula) */ --line-shell:#E0DED9; /* fio do shell sobre o fundo N100: lateral, topo, rodapé — #ECEBE9 seria mais claro que o fundo */ --scrim:rgba(18,17,16,.4); /* cortina de modal */ --line-card:#ECEBE9; /* fio do card: 1,08 sobre N100, e é deliberado — o halo da sombra faz o contorno (decisão 62) */ --line-2:#DCDBD8; /* fio de controle */ --ring:0 0 0 3px rgba(18,17,16,.08); /* anel de foco de campo */ --red:#D2232A; --red-bg:#FCEBEB; /* Pantone 485 C — SÓ queda, erro, destrutivo · 5.23 no branco · 4.54 no selo */ --green:#0E7A46; --green-bg:#E3F1E9; /* SÓ positivo · 5.40 · 4.63 */ --amber:#9A5B00; --amber-bg:#FBF0DC; /* atenção · 5.43 · 4.81 (decisão 66) */ --blue:#2F5D8A; --blue-bg:#E7EEF6; /* informação neutra · 6.88 · 5.88 (decisão 66) */ /* apelidos legados — as 99 views leem estes nomes; não remover */ --ink:var(--fg); --ink-2:var(--fg-2); --mut:var(--fg-mut); /* série de gráfico — máx. 2 por valor (ver 0.9) */ --s1:var(--ink); --s2:#949089; /* 3.1:1 — se sustenta sozinho */ --grid:var(--line); /* grade e trilho, NUNCA série */ /* ---------- 0.3 ESPAÇO — base 4, nada fora da régua ---------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; /* ---------- 0.4 RAIO — o quadrado vem da logo ---------- v2 (19/08/2026): 4→6 e 6→10. O raio maior suaviza sem virar bolha; o quadrado da marca continua nos cantos vivos da logo e do shell. */ --r-1:6px; --r-2:10px; --r-full:999px; /* ---------- 0.4b SUPERFÍCIE (v2) ---------- Cinza de CONTENÇÃO, não de decoração: marca o que está ativo, o que é controle e o que é cabeçalho. Desde 03/09/2026 (decisão 61) o fundo da PÁGINA é este mesmo N100 e o card é branco por cima: o cinza que era reprovado em 19/08 foi aprovado quando veio com sombra. --mut (#6F6B66, decisão 65) dá 4.81 sobre --surf e passa. */ --surf:var(--fill); /* ---------- 0.5 SOMBRA — quente, nunca preto puro ---------- */ --sh-1:0 1px 2px rgba(18,17,16,.03); /* v2: com preenchimento e raio maior, a sombra pesa */ --sh-2:0 1px 2px rgba(18,17,16,.05), 0 2px 10px -4px rgba(18,17,16,.14); --sh-3:0 8px 20px -6px rgba(18,17,16,.16), 0 24px 60px -20px rgba(18,17,16,.28); /* sombra do card (decisão 62): halo de 3% faz o contorno, a camada larga faz o bloco existir sobre o N100. Escolha do owner na prancheta v2. */ --card-sh:0 0 0 1px rgba(18,17,16,.03), 0 1px 2px rgba(18,17,16,.05), 0 6px 18px -6px rgba(18,17,16,.16); /* ---------- 0.6 MOVIMENTO — tudo < 300ms ---------- */ --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1); --t-press:140ms; --t-fast:160ms; --t-ui:200ms; --t-panel:260ms; /* ---------- medidas ---------- */ --side-w:224px; /* v2: era 248 */ /* Respiro no alto da página. Token PRÓPRIO porque dois lugares precisam concordar: o padding da .page e a compensação do cabeçalho grudento (que come esse respiro pra que o fundo branco cubra tudo ao grudar). Em 20/08/2026 eles discordaram — a .page foi pra 20px e a compensação ficou em 32 — e o conteúdo passou a entrar 12px POR BAIXO do cabeçalho. Com um token só, não tem como divergir de novo. */ --page-pt:var(--sp-6); --page-px:var(--sp-6); /* respiro lateral da página; o cabeçalho grudado cobre esse respiro (decisão 76) */ /* ---------- ESCALA DE CONTROLE (v2, 19/08/2026) ---------- Três degraus e nada mais. Antes disso, o mesmo cabeçalho de card tinha segmentado 30px/11.5, botão pequeno 32px/12.5 e select 40px/16 — o owner viu na tela e reprovou. Agora barra < ação < campo. --bar-h controle DENTRO de barra/cabeçalho de card: segmentado, select de filtro, busca de tabela, tbl-input, botão pequeno --ctl-h botão de ação da página --fld-h campo de formulário (alvo de mira e permanência) --bar-fs é a fonte única desses controles. No celular ela volta a 16px porque abaixo disso o Safari do iPhone dá zoom sozinho ao focar — a regra dura continua valendo exatamente onde ela tem objeto. */ --bar-h:32px; --bar-fs:13px; --fld-fs:13.5px; /* fonte do campo de formulário no mouse (owner, 13/09/2026) — 16px no toque, ver abaixo */ --ctl-h:36px; /* v2: era 40 */ --fld-h:46px; /* campo: alvo de mira e permanência — maior de propósito */ --w-app:1440px; } /* Largura NÃO é o critério certo pra fonte de campo. O que dispara o zoom automático do Safari é ser um dispositivo de TOQUE, não a tela ser estreita: um iPad em paisagem tem 1024px e zoomaria do mesmo jeito. `pointer:coarse` pega o caso certo. Era um defeito da v2, que amarrou --bar-fs a 760px. Altura e alvo de toque seguem na largura: lá o critério é o layout. */ @media (max-width:759px){ :root{ --bar-h:44px; --ctl-h:44px; --fld-h:50px; } } /* Filtros · Ordenar · Colunas cabiam em duas fileiras no iPhone (mais ~60px de cabeçalho antes da tabela). Com o padding menor os três entram numa linha só, e a altura de 44px do alvo de toque fica intacta. */ @media (max-width:759px){ .card__head .btn--sm{ padding-left:var(--sp-3); padding-right:var(--sp-3) } /* os gatilhos de popover da barra dividem a linha em partes iguais: em 390px, "Colunas" caía sozinho numa segunda fileira e custava mais 52px antes da primeira linha da tabela. */ .card__head > .pop__wrap{ flex:1 1 0; min-width:0 } .card__head > .pop__wrap > .btn{ width:100% } } @media (pointer:coarse){ :root{ --bar-fs:16px; --fld-fs:16px } } /* ---------- 0.0b MODO ESCURO (decisão 69, 03/09/2026) ---------- Uma segunda tabela de valores para os MESMOS tokens. Nenhum componente tem regra de tema; o que não estiver em token não muda de cor, e é isso que a guarda da decisão 60 garante. Contrastes medidos ≥ 4,5 em toda combinação de texto. "A tinta é a cor de comando": o botão primário no escuro é claro com texto escuro (16,46). Quem escolheu "escuro" recebe data-theme="dark" do servidor (decisão 70); quem escolheu "sistema" não recebe atributo e cai na media query. */ :root[data-theme="dark"]{ color-scheme:dark; --page-bg:#141312; --surface:#1E1C1A; /* 1,09 sobre a página: a sombra some, o fio trabalha */ --surface-2:#242220; --hover:#242220; --fill:#2B2926; --fg:#F3F1EE; /* 15,07 na superfície */ --fg-2:#D3CFC8; /* 10,94 */ --fg-mut:#A39C93; /* 6,26 na superfície · 5,34 no --fill */ --on-fg:#141312; /* texto sobre a tinta clara */ --on-fg-mut:rgba(20,19,18,.62); --knob:#F3F1EE; --logo-filter:invert(1); --line:#33302C; /* 1,29 sobre a superfície */ --line-shell:#33302C; --line-card:#33302C; --line-2:#403C37; --ring:0 0 0 3px rgba(243,241,238,.14); --scrim:rgba(0,0,0,.55); --card-sh:0 0 0 1px rgba(0,0,0,.35); /* sombra sobre preto não separa; o halo escuro faz o contorno */ --s2:#A39C93; --red:#F28A8D; --red-bg:#3B1F20; /* 7,11 na superfície · 6,27 no selo */ --green:#66C592; --green-bg:#183227; /* 8,06 · 6,54 */ --amber:#E8AC55; --amber-bg:#3A2C15; /* 8,46 · 6,75 */ --blue:#88B4E0; --blue-bg:#1C2A3A; /* 7,81 · 6,69 */ } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --page-bg:#141312; --surface:#1E1C1A; /* 1,09 sobre a página: a sombra some, o fio trabalha */ --surface-2:#242220; --hover:#242220; --fill:#2B2926; --fg:#F3F1EE; /* 15,07 na superfície */ --fg-2:#D3CFC8; /* 10,94 */ --fg-mut:#A39C93; /* 6,26 na superfície · 5,34 no --fill */ --on-fg:#141312; /* texto sobre a tinta clara */ --on-fg-mut:rgba(20,19,18,.62); --knob:#F3F1EE; --logo-filter:invert(1); --line:#33302C; /* 1,29 sobre a superfície */ --line-shell:#33302C; --line-card:#33302C; --line-2:#403C37; --ring:0 0 0 3px rgba(243,241,238,.14); --scrim:rgba(0,0,0,.55); --card-sh:0 0 0 1px rgba(0,0,0,.35); /* sombra sobre preto não separa; o halo escuro faz o contorno */ --s2:#A39C93; --red:#F28A8D; --red-bg:#3B1F20; /* 7,11 na superfície · 6,27 no selo */ --green:#66C592; --green-bg:#183227; /* 8,06 · 6,54 */ --amber:#E8AC55; --amber-bg:#3A2C15; /* 8,46 · 6,75 */ --blue:#88B4E0; --blue-bg:#1C2A3A; /* 7,81 · 6,69 */ } } /* ---------- 0.2 TIPOGRAFIA — Manrope. Hierarquia por tamanho e peso, NUNCA por cor. Tracking é específico por tamanho. --- */ body{ margin:0; background:var(--page-bg); color:var(--ink); font-family:'Manrope',system-ui,-apple-system,sans-serif; font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; } .t-display{ font-size:30px; line-height:1.05; font-weight:800; letter-spacing:-.035em; } .t-title { font-size:20px; line-height:1.2; font-weight:800; letter-spacing:-.025em; } .t-head { font-size:15px; line-height:1.3; font-weight:700; letter-spacing:-.015em; } .t-panel { font-size:13px; line-height:1.3; font-weight:700; letter-spacing:-.01em; } .t-caption{ font-size:11.5px; line-height:1.4; font-weight:500; color:var(--mut); } .t-micro { font-size:10px; line-height:1.3; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); } .num { font-variant-numeric:tabular-nums; } /* "Número M" da escala do guia (0.2): total, subtotal, placar. Estava na TABELA de tipografia desde agosto mas nunca virou classe — 8 lugares escreviam 20px/800 à mão. */ .t-num-m { font-size:20px; line-height:1; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; } /* unidade NÃO é dado — e por isso também não tem o tom do dado. O `color` entrou em 20/08/2026: o BI já escrevia `.72em + 700 + --ink-2` à mão em 8 lugares, e a prática estava mais completa que a classe. ⚠️ Muda o tom da unidade nos 3 usos antigos de `.u` (fica um passo mais claro que o número). É melhoria deliberada, não efeito colateral. */ .u { font-size:.72em; font-weight:700; color:var(--ink-2) } .prose { max-width:65ch; } /* ---------- base ---------- */ *{ box-sizing:border-box } /* [hidden] SEMPRE vence: sem isso, qualquer elemento com display próprio (flex/grid) ignora o atributo e "vaza" na tela. Cobre o caso geral que .modal[hidden] etc. cobriam um a um. */ [hidden]{ display:none!important } a{ color:inherit; text-decoration:none } button{ font:inherit; color:inherit; cursor:pointer } /* Controle de formulário herda a fonte da página (lote de ajustes, 13/09/2026). Sem isto, campo fora de .field nasce com a fonte do SISTEMA: o envio de planilha da Campanha da marca media 22px de altura em Arial 13,33px. :where() zera a especificidade: qualquer regra de componente vence. */ :where(input,select,textarea){ font:inherit; color:inherit } :focus-visible{ outline:2px solid var(--red); outline-offset:2px } /* único uso não-semântico do vermelho */ /* depois de um toque ou clique, foco movido pelo código não desenha anel (o iPhone acendia o anel de teclado no ☰ ao fechar o menu, 14/09/2026). Uma tecla qualquer volta a mostrar: quem navega por teclado não perde nada. Lido do cheff-ui.js (data-entrada no ). */ :root[data-entrada="ponteiro"] :focus-visible{ outline:none } button:active,[role="button"]:active{ transform:scale(.97) } button,[role="button"]{ transition:transform var(--t-press) var(--ease-out) } @media (prefers-reduced-motion:reduce){ *{ transition-duration:0ms!important; animation:none!important } } /* ============================================================ 1. SHELL — lateral SEMPRE transparente, nunca escura ============================================================ */ .app{ display:flex; height:100vh; overflow:hidden } .side{ width:var(--side-w); flex:0 0 var(--side-w); display:flex; flex-direction:column; padding:var(--sp-4) var(--sp-3); background:transparent; border-right:1px solid var(--line-shell) } /* menu v2 (31/08/2026): os rótulos de grupo (.nav__label) e o espaçador entre grupos (.nav__group) morreram — o menu é uma pilha única de botões de 1º nível; hierarquia vem do acordeão, não de rótulo em caixa alta. */ .nav__item{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); font-size:13px; color:var(--ink-2); border-radius:var(--r-2); transition:background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out) } /* v3 (03/09/2026, decisão 68): item ativo = CARD BRANCO elevado, a letra original da seção 1 do guia. A v2 tinha trocado por preenchimento cinza porque o card branco sumia sobre lateral branca; com o fundo N100 o card branco é exatamente o que se lê de longe. Única elevação da lateral. */ .nav__item.is-active{ background:var(--surface); color:var(--ink); font-weight:700; border:1px solid var(--line-card); box-shadow:var(--card-sh) } @media (hover:hover) and (pointer:fine){ .nav__item:hover:not(.is-active){ background:var(--hover) } } .topbar{ display:flex; align-items:center; gap:var(--sp-4); height:48px; flex:0 0 48px; padding:0 var(--sp-5); border-bottom:1px solid var(--line-shell) } .topbar__l,.topbar__r{ display:flex; align-items:center; gap:var(--sp-3) } .topbar__r{ flex:1 1 auto; justify-content:flex-end } @media (max-width:759px){ /* laterais de largura igual mantêm a logo no centro exato */ .topbar__l,.topbar__r{ flex:1 1 0 } /* z-index 45 (era 20): o menu aberto fica acima de tudo que mora na página (balão de gráfico 30, popover 40/39) e abaixo do diálogo (scrim 50). Em 20, o balão do BI desenhava por cima do menu (print do owner, 13/09/2026). */ .side{ position:fixed; inset:0 auto 0 0; z-index:45; background:var(--surface); width:270px; transform:translateX(-100%); transition:transform var(--t-panel) var(--ease-drawer); box-shadow:var(--sh-3) } body.nav-open .side{ transform:translateX(0) } /* entra e sai pelo MESMO lado */ /* o menu recebe o foco ao abrir só pra tirar o foco da página: ele mesmo não é alvo de Tab (tabindex -1), então não desenha anel */ .side:focus{ outline:none } /* Áreas seguras do iPhone (14/09/2026): com viewport-fit=cover e a barra de status translúcida, a página desenha sob o relógio e sob a barra de início. O topo e o menu descem o tamanho da faixa; fora do app instalado env() vale 0 e nada muda. */ .topbar{ padding-top:env(safe-area-inset-top); height:calc(48px + env(safe-area-inset-top)); flex-basis:calc(48px + env(safe-area-inset-top)) } .side{ padding-top:calc(var(--sp-4) + env(safe-area-inset-top)); padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom)) } .content{ padding-bottom:env(safe-area-inset-bottom) } .nav__item{ padding:14px var(--sp-4) } } /* ============================================================ 2. PÁGINA — Início (saudação) · App (título+ação) · Aninhada ============================================================ */ .page{ padding:var(--page-pt) var(--page-px) var(--sp-9); max-width:var(--w-app); margin:0 auto; width:100% } .page--wide{ max-width:none } /* telas de tabela */ /* --- 59. RITMO VERTICAL DA PÁGINA vem do .page, não da view (03/09/2026) --- Owner: "quase toda tela nova nasce sem espaçamento, sem respiro; já falei isso algumas vezes". Causa: o .page era um bloco sem ritmo e o respiro entre cards dependia de cada view lembrar do mb-4 (16 telas faziam à mão; a 17ª esquecia). Agora todo filho do .page nasce a 20px do anterior (guia §2: 20px entre blocos; 16 no celular). Margens manuais (mb-*) COLAPSAM com esta em layout de bloco: não somam, então as telas antigas não ficam mais espaçadas do que já eram. O cabeçalho da página já traz o próprio respiro (padding-bottom): filho logo depois dele não ganha margem. Travado por teste (design-system). */ .page > * + *{ margin-top:var(--sp-5) } .page > .page__head + *{ margin-top:0 } @media (max-width:759px){ .page > * + *{ margin-top:var(--sp-4) } } /* 24px entre cabeçalho e conteúdo. O guia pedia 32; a v2 cortou pra 16 e o owner apontou que ficou apertado (20/08). 24 é o meio-termo medido. */ /* ── Barra de rolagem ───────────────────────────────────────────────────── No macOS ela é overlay e some sozinha; no Windows é a clássica: ~17px, com setas nas pontas, permanente em toda área que rola. O mesmo Portal ganhava dois riscos cinza grossos que ninguém desenhou — no menu lateral e dentro do campo de aviso (relatado pelo owner em 20/08, print do desktop). Cinza é permitido em fio e texto de apoio (decisão 3); barra de sistema larga não é nem uma coisa nem outra. Padronizada para os dois sistemas. Chrome ≥121 e Firefox obedecem `scrollbar-width`/`-color` e IGNORAM as regras `::-webkit-`; as `::-webkit-` ficam para Safari e Chrome antigo. As duas descrições desenham a mesma barra: fina, trilho transparente, polegar no cinza de fio, escurecendo no hover. */ *{ scrollbar-width:thin; scrollbar-color:var(--line) transparent } ::-webkit-scrollbar{ width:10px; height:10px } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{ background:transparent } ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:var(--r-full); border:3px solid transparent; background-clip:content-box } ::-webkit-scrollbar-thumb:hover{ background:var(--mut); background-clip:content-box } /* rolar o menu até o fim não pode continuar rolando a página atrás dele */ .side__nav, .content, .modal__body, .palette__list{ overscroll-behavior:contain } .page__head{ display:flex; align-items:flex-start; gap:var(--sp-4); padding-bottom:var(--sp-6) } .page__head--sticky{ position:sticky; top:0; background:var(--page-bg); z-index:5; padding-top:var(--page-pt); margin-top:calc(var(--page-pt) * -1); /* Decisão 76, causa medida em 15/09/2026: o cabeçalho tinha a largura do conteúdo e deixava os 24px de respiro lateral descobertos; a sombra do card rolando por baixo aparecia ali como uma linha vertical fina dos dois lados. O cabeçalho agora cobre o respiro inteiro da página. */ margin-inline:calc(var(--page-px) * -1); padding-inline:var(--page-px) } /* Decisão 76 (15/09/2026): revoga o fio da rodada 2 — "linha esquisita ao rolar" (relato repetido do owner). O cabeçalho gruda no MESMO fundo da página (--page-bg): não precisa de fio nem sombra pra separar, o conteúdo simplesmente passa por baixo. Padding/margin do "grudado" ficam — só a borda sai. */ .page__head--sticky.is-stuck{ padding-bottom:var(--sp-4); margin-bottom:var(--sp-4) } .page__actions{ margin-left:auto; display:flex; gap:var(--sp-2); flex:0 0 auto } /* Cards irmãos empilhados na página respiram (achado 30/08: Itens × Aguardando cadastro colados no detalhe do pedido). Regra global: correção mora aqui, nunca na página. */ .page > .card + .card{ margin-top:var(--sp-4) } .cols{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:var(--sp-4); align-items:start } /* conteúdo curto NÃO estica */ /* par de colunas do MESMO peso (BI v2: Por empresa / Por canal) — o par assimétrico acima é .cols puro; aqui os dois lados pesam igual. */ .cols--eq{ grid-template-columns:1fr 1fr } /* trilho estreito fixo + conteúdo que sobra (Base de Conhecimento, spec 2026-09-19): a árvore de seções não pode crescer com o conteúdo — 256px é o suficiente pro nome mais longo de área sem quebrar em 2 linhas toda hora. */ .cols--tree{ grid-template-columns:256px minmax(0,1fr) } @media (max-width:899px){ .cols, .cols--eq, .cols--tree{ grid-template-columns:1fr } } @media (min-width:900px){ .cols--tree > :first-child{ position:sticky; top:var(--sp-4) } } @media (max-width:759px){ .page{ --page-px:var(--sp-4); padding:var(--page-pt) var(--page-px) var(--sp-8) } .page__head{ flex-direction:column; gap:var(--sp-4) } /* v2.1 (24/08/2026): com 3-4 ações o nowrap empurrava o primário pra fora da tela (x=604 em 390px, catálogo/pedido). Quebra linha; o primário fecha sozinho em largura cheia, alcançável sem rolagem horizontal. */ .page__actions{ margin-left:0; width:100%; flex-wrap:wrap } .page__actions .btn--primary{ flex:1 1 100% } /* primário ocupa a largura */ .page__actions > form:has(> .btn--primary){ flex:1 1 100% } /* primário embrulhado em form (Emitir) */ .page__actions > form > .btn--primary{ width:100% } /* DUAS ações dividem a linha (08/09/2026). Antes, cada uma virava um bloco de largura cheia: no Produtos, "Aplicar flag" + "Exportar Excel" comiam 150px dos 664 da tela do iPhone, e sobrava UMA linha de tabela — o owner descreveu como "a tela toda é um botão só". Com 3+ ações a regra de 24/08 continua valendo: quebra linha e o primário fecha em largura cheia, que é o que impede o primário de sair da tela. */ .page__actions:has(> :nth-child(2)):not(:has(> :nth-child(3))) > *{ flex:1 1 0; min-width:0 } .page__actions:has(> :nth-child(2)):not(:has(> :nth-child(3))) .btn{ width:100% } .page__actions:has(> :nth-child(2)):not(:has(> :nth-child(3))) .btn--primary{ flex:1 1 0 } } /* ============================================================ 3. CARD — fio 1px + sombra leve, os dois discretos ============================================================ */ .card{ background:var(--surface); border:1px solid var(--line-card); border-radius:var(--r-2); box-shadow:var(--card-sh) } .card__head{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4) } /* v2: o cabeçalho dividido ganha preenchimento — separa comando de conteúdo. --hover e não --surf porque a linha de descrição do cabeçalho é --mut. */ .card__head--divided{ border-bottom:1px solid var(--line-card); background:var(--surface-2) } /* SÓ quando o corpo é lista */ .card__head--divided:first-child{ border-radius:calc(var(--r-2) - 1px) calc(var(--r-2) - 1px) 0 0 } /* 15px (decisão 64, 03/09/2026): a 13px o título era MENOR que o texto do card e a meio pixel do título das linhas — não havia segundo nível de leitura entre o h1 e o corpo. É o .t-head da escala. */ .card__title{ font-size:15px; font-weight:700; letter-spacing:-.015em } .card__link{ margin-left:auto; font-size:11.5px; color:var(--mut) } /* link, NUNCA botão */ .card__body{ padding:var(--sp-4) } .card__foot{ padding:var(--sp-2) var(--sp-4); border-top:1px solid var(--line-card) } /* rodapé com legenda longa ao lado do botão primário (Transferências, 09/09/2026): no celular a legenda espremia em ~8 linhas ao dividir a largura com o botão. Mesmo padrão do .page__actions — o primário desce pra baixo do texto e ocupa a largura inteira. */ .card__foot--stack{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3) } @media (max-width:759px){ .card__foot--stack{ flex-direction:column; align-items:stretch } .card__foot--stack .btn--primary{ width:100% } } /* corpo com fio em cima — o par do card__head--divided, pra quando o corpo vem DEPOIS de outro corpo (vazio + formulário no mesmo cartão) */ .card__body--divided{ border-top:1px solid var(--line) } /* Cartão de FORMULÁRIO acompanha a largura do formulário (owner, 20/08). Antes: form de 560px dentro de cartão de 1400px — sobrava meia tela de cartão vazio e o olho voltava de 1400 pra 560 a cada campo. Cartão de lista e de tabela continua full: lá a largura é o conteúdo. */ .card--form{ max-width:calc(560px + var(--sp-4) * 2) } /* Decisão 71 (13/09/2026): formulário como filho direto do card recebe o respiro do corpo. Antes, quem esquecia o .card__body entregava pílulas coladas na borda (prints do owner: registrar contato e nova oportunidade). Agora a régua é do CSS: o padding nasce certo mesmo sem o embrulho. */ .card > .form{ padding:var(--sp-5) } .card.is-compact .card__head{ padding:var(--sp-3) var(--sp-4) } .card.is-compact .card__body{ padding:var(--sp-4) } /* clicável inteiro SÓ com destino único e nada mais interativo dentro */ a.card{ display:block; color:inherit; transition:box-shadow var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-press) var(--ease-out) } @media (hover:hover) and (pointer:fine){ a.card:hover{ box-shadow:var(--sh-2); border-color:var(--line-2) } } a.card:active{ transform:scale(.99) } /* .99, não .97: superfície grande */ /* ============================================================ 4. STAT CARD — conjunto de comparação: alturas SE igualam ============================================================ */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3) } /* faixa de KPIs da home (Task 3): no máximo 3 curados por pessoa — decisão de produto, não limite técnico. A base .stats de 4 fica intacta pro resto do Portal; no celular a media query abaixo já cai pra 2 colunas sozinha. */ .stats--home{ grid-template-columns:repeat(3,minmax(0,1fr)) } @media (max-width:899px){ .stats{ grid-template-columns:1fr 1fr } } /* nunca 1 só */ .stat{ position:relative; display:flex; flex-direction:column; gap:var(--sp-2); height:100%; padding:var(--sp-4) } /* position:relative pro .stat__go ancorar quando card+stat são o MESMO elemento (KPI clicável da home, Task 3: ) — nos usos aninhados (
) o ancestral já é o feito à mão; aqui não sobra estilo inline nenhum. */ .stat__value{ font-size:28px; line-height:1; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums } .stat__value--none{ color:var(--mut); letter-spacing:0 } /* — = não apurado. 0 é dado, vai em preto */ .stat__delta{ font-size:12px; font-weight:700; font-variant-numeric:tabular-nums } /* cor = bom/ruim. seta = direção. NUNCA derive a cor do sinal do número. */ .stat__delta--good{ color:var(--green) } .stat__delta--bad { color:var(--red) } .stat__delta--flat{ color:var(--mut) } /* 0% = traço, sem seta e sem cor */ .stat__spark{ margin-top:auto } .stat__go{ position:absolute; top:var(--sp-4); right:var(--sp-4) } /* seta SEMPRE visível */ /* ============================================================ 5. LISTA ============================================================ */ .rows{ list-style:none; margin:0; padding:0 } /* lista NÃO tem padding no contêiner */ .row{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); position:relative } .row:last-child{ border-bottom:0 } /* nunca divisor sobrando */ .row__main{ flex:1 1 auto; min-width:0 } /* só o miolo estica */ .row__title{ font-size:13.5px; font-weight:500 } /* 500: não compete com o card */ .row__sub{ font-size:11px; color:var(--mut) } .row__end{ flex:0 0 auto; font-size:11.5px; color:var(--mut); font-variant-numeric:tabular-nums } /* conteúdo quebra em 2 · dado trunca em 1 · nunca quebra livre */ .list--text .row__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } .list--dense .row__title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } /* âncora esticada: linha clicável SEM aninhar interativos */ .row__link{ position:absolute; inset:0; z-index:1 } /* ação própria dentro de linha clicável (ex.: Excluir em Meus briefs): fica acima do .row__link, senão o clique vira navegação pra linha */ .row__acao{ position:relative; z-index:2; flex:0 0 auto } .row__action{ position:relative; z-index:2 } @media (hover:hover) and (pointer:fine){ .row--click:hover{ background:var(--hover) } } /* Home personalizada (Task 4) — bloco oculto na tela /home/personalizar: continua na lista (a posição não se perde ao mostrar de novo), mas o peso visual cai pra sinalizar "não aparece na home agora". Opacity, não cor nova — a regra é zero quarta cor. */ .row--oculto{ opacity:.5 } /* Home v2 (spec docs/superpowers/specs/2026-09-19-home-v2-design.md, bloco 2) — busca universal: campo hero acima das colunas, maior que o campo de formulário padrão (--fld-h) DE PROPÓSITO. É o primeiro gesto da tela — o dado que motivou a home nova (30 dias de uso_eventos, 19/09) é que Produtos é o app mais aberto do Portal e a home existe principalmente pra levar lá. Fonte fixa em 16px (nunca --fld-fs, que cai pra 13.5 no mouse): aqui a legibilidade do convite pesa mais que a densidade do resto do formulário — e 16px elimina de saída o zoom automático do Safari no toque. */ .busca-home{ position:relative; margin-bottom:var(--sp-5) } .busca-home__form{ position:relative; display:flex; align-items:center } .busca-home__form > .ti{ position:absolute; left:var(--sp-4); font-size:20px; color:var(--mut); pointer-events:none } .busca-home__input{ font:inherit; font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-2); height:52px; width:100%; padding:0 var(--sp-4) 0 calc(20px + var(--sp-4) + var(--sp-2)) } .busca-home__input:focus{ outline:none; border-color:var(--ink); box-shadow:var(--ring) } @media (max-width:759px){ .busca-home__input{ height:50px } } /* painel de resultado: mesma receita visual do .pop (fio + --sh-2 + --r-2) — cresce a partir do campo, nunca centralizado (guia 0.6). Cada grupo é um rótulo .t-micro + uma .rows normal: reaproveita o componente de lista da rodada 5 em vez de inventar um segundo idioma de linha. */ .busca-home__painel{ position:absolute; top:calc(100% + var(--sp-2)); left:0; right:0; z-index:40; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--sh-2); max-height:min(60vh, 480px); overflow-y:auto } .busca-home__painel .t-micro{ padding:var(--sp-3) var(--sp-4) var(--sp-1) } .busca-home__painel .rows{ padding-bottom:var(--sp-2) } .busca-home__painel .row.is-hi{ background:var(--hover) } .busca-home__vazio{ padding:var(--sp-4); font-size:12.5px; color:var(--mut) } /* atenção: âmbar. Nomeada pelo SIGNIFICADO (mesmo idioma de .u-queda/.u-alta acima) — vence hoje, ordem parada. Nunca vermelho: vermelho é só queda/erro/destrutivo (guia 0.1). */ .u-atencao{ color:var(--amber) } /* ============================================================ 6. BOTÕES — três níveis e nada mais ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); height:var(--ctl-h); padding:0 var(--sp-4); border-radius:var(--r-2); border:1px solid transparent; font-size:13px; font-weight:700; line-height:1; white-space:nowrap; position:relative; transition:transform var(--t-press) var(--ease-out), opacity var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out) } .btn--primary { background:var(--ink); color:var(--on-fg) } /* UM por tela */ .btn--secondary{ background:var(--surface); color:var(--ink); border-color:var(--line); font-weight:600 } .btn--tertiary { background:transparent; color:var(--mut); font-weight:600; padding:0 var(--sp-2) } .btn--danger { background:var(--red); color:var(--on-fg) } /* SÓ no confirmar do diálogo */ .btn--sm{ height:var(--bar-h); padding:0 var(--sp-3); font-size:var(--bar-fs) } .btn--icon{ width:var(--ctl-h); padding:0 } /* só p/ ação universal + aria-label */ .btn--block{ width:100% } @media (hover:hover) and (pointer:fine){ .btn--primary:hover,.btn--danger:hover{ opacity:.88 } .btn--secondary:hover{ border-color:var(--line-2); background:var(--hover) } .btn--tertiary:hover{ color:var(--ink) } } /* aria-*, NÃO disabled: disabled tira o elemento da tabulação e quem usa teclado perde a posição. O bloqueio do clique é do JS. */ .btn[aria-disabled="true"]{ background:var(--hover); color:var(--fg-dis); border-color:var(--line-2); cursor:not-allowed } .btn[aria-disabled="true"]:active{ transform:none } /* Botão travado que continua legível e explica o porquê (Expedição SP, coluna Etiqueta): cinza mais firme que o desabilitado comum — fundo --fill em vez de --hover, texto --fg-mut (4,81:1 no --fill, contra 5,03:1 no --hover). O motivo vai no title, no texto .sr-only e, ao toque, num aviso (expedicao.js). */ .btn--travado[aria-disabled="true"]{ background:var(--fill); color:var(--fg-mut); border-color:var(--line-2); box-shadow:none } .btn[aria-busy="true"]{ cursor:progress } .btn[aria-busy="true"] .btn__label{ visibility:hidden } /* largura NÃO muda */ .btn__spinner{ display:none; position:absolute; width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:var(--r-full); animation:spin 620ms linear infinite } .btn[aria-busy="true"] .btn__spinner{ display:block } @keyframes spin{ to{ transform:rotate(360deg) } } /* v2: trilho cinza, ativo = lasca BRANCA elevada (era pílula preta). O preto sólido competia com o botão primário da tela, e o guia manda um preto por tela. Texto em --ink-2: é controle, não apoio. */ /* v3 (03/09/2026): o trilho ganha fio — sobre a página N100 o cinza do trilho é o mesmo do fundo e o segmentado virava só uma pílula branca solta com texto ao lado (achado no preview do Focus). O fio é o do shell. */ .seg{ display:inline-flex; background:var(--surf); border:1px solid var(--line-shell); border-radius:var(--r-full); padding:3px } .seg button{ border:0; background:transparent; font-size:var(--bar-fs); font-weight:600; color:var(--ink-2); height:calc(var(--bar-h) - 6px); padding:0 var(--sp-3); display:inline-flex; align-items:center; border-radius:var(--r-full) } .seg button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); font-weight:700; box-shadow:0 0 0 1px rgba(18,17,16,.07), 0 1px 3px rgba(18,17,16,.14) } /* ============================================================ 7. GRÁFICO — máx. 2 séries por valor; 3ª vira small multiples ============================================================ */ .chart{ position:relative } .chart svg{ display:block; width:100% } /* Tooltip do crosshair (guia r.7): superfície escura única do sistema — é sobreposição efêmera presa ao cursor, não área da página. Texto em branco; o delta mostra só a SETA (direção), sem cor: verde/vermelho foram medidos pra superfície branca e aqui virariam tom novo não medido. */ .bi-tip{ position:absolute; z-index:30; pointer-events:none; white-space:nowrap; background:var(--ink); color:var(--on-fg); border-radius:var(--r-2); box-shadow:var(--sh-2); padding:7px 10px; font-size:11.5px; line-height:1.45; transform:translate(-50%,calc(-100% - 12px)) } .bi-tip__data{ color:var(--on-fg-mut); font-weight:700 } .bi-tip__num{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums } .bi-tip__sub{ color:var(--on-fg-mut); font-variant-numeric:tabular-nums } .chart .grid{ stroke:var(--grid); stroke-width:1; stroke-dasharray:3 4 } /* só horizontal */ .chart .axis{ font-size:9.5px; fill:var(--mut); font-weight:600; letter-spacing:.06em } .chart .s1{ fill:var(--s1) } .chart .s2{ fill:var(--s2) } .chart .line{ fill:none; stroke:var(--s1); stroke-width:2; stroke-linecap:round; stroke-linejoin:round } .chart .crosshair{ stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3; opacity:.32 } /* Barra sob o cursor fica, as outras recuam pro --line-2 (rodada 22, decisão 80). Só cor, 150ms: é hover repetido dezenas de vezes, não pode parecer lento. */ .chart .bi-barra{ transition:fill 150ms ease } @media (prefers-reduced-motion: reduce){ .chart .bi-barra{ transition:none } } .chart__label{ font-size:10.5px; font-weight:800; fill:var(--ink); font-variant-numeric:tabular-nums } /* PROIBIDO: pizza, rosca, eixo duplo, 3D, radar, área empilhada 3+, grade densa de quadradinhos (reprovada pelo time). */ /* ============================================================ 8. TABELA — toda coluna ordenável (regra permanente da casa) ============================================================ */ /* Rolagem horizontal da tabela (revisto em 08/09/2026, owner no iPhone: "a rolagem tá esquisita"). Duas coisas mudaram: 1. `` SAIU. Era necessário no iOS 12 e hoje é legado: com ele, contêiner que rola dentro de outro que rola (o .content) e coluna `position:sticky` brigam — a rolagem trava, treme e a coluna congelada descola. O momentum já é o padrão. 2. `overscroll-behavior-x: contain` ENTROU. Sem ele, ao chegar na borda esquerda da tabela o gesto vaza para o navegador e vira o "voltar" do iOS: a pessoa tenta ver as colunas e o app sai da página. */ .tbl__wrap{ overflow-x:auto; overscroll-behavior-x:contain } /* A barra NATIVA da tabela também é desenhada (16/09/2026, achado da varredura das 85 telas): a `.tbl__barra` fixa some quando o rodapé da tabela entra em quadro, e quem assumia dali pra frente era a barra overlay do macOS, que é invisível em repouso — o mesmo defeito que a decisão 79 foi corrigir, só que no fim da tabela. Estilizar `::-webkit-scrollbar` troca a overlay pela barra clássica, que ocupa 10px e fica sempre à vista. Mesmos tokens da `.tbl__barra` pra serem a MESMA barra aos olhos de quem usa: some uma, entra a outra, no mesmo lugar e da mesma cor. Vale também nas `--vscroll`, onde a vertical passa a aparecer pelo mesmo motivo. */ .tbl__wrap{ scrollbar-width:auto; scrollbar-color:var(--fg-mut) var(--fill) } .tbl__wrap::-webkit-scrollbar{ height:10px; width:10px } .tbl__wrap::-webkit-scrollbar-track{ background:var(--fill) } .tbl__wrap::-webkit-scrollbar-thumb{ background:var(--fg-mut); border-radius:999px; border:2px solid var(--fill); background-clip:padding-box } @media (hover:hover) and (pointer:fine){ .tbl__wrap::-webkit-scrollbar-thumb:hover{ background:var(--fg) } } /* Cabeçalho de tabela grudado (decisão 77, 15/09/2026): `position:sticky` num thead morre dentro de qualquer contêiner com rolagem horizontal (`.tbl__wrap{overflow-x:auto}`), e as tabelas de Ordens não cabem em toda largura de janela (a do owner tem ~1140px). Por isso o wrap marcado `--grudado` NÃO usa sticky: o cheff-ui.js cria um cabeçalho FANTASMA (`.tbl__fantasma`, cópia do thead em position:fixed, logo abaixo do cabeçalho da página) que aparece quando o thead real passa por baixo e acompanha a rolagem horizontal do wrap. Nenhuma coluna se perde. */ .tbl__fantasma{ position:fixed; z-index:4; background:var(--surface); pointer-events:none } .tbl__fantasma__jan{ overflow:hidden } /* é ESTA janela que acompanha a rolagem lateral, não a caixa (senão a barra do topo andaria junto) */ .tbl__fantasma table{ table-layout:fixed } .tbl__fantasma[hidden]{ display:none } /* Barra de arrastar GRUDADA NA BASE (decisão 79, 16/09/2026). Tabela larga só anunciava a rolagem na barra nativa do rodapé DA TABELA — que numa lista de 120 linhas fica a cinco telas de distância (e no macOS ainda é a barra fantasma que some em repouso): pra alcançar as colunas escondidas a pessoa descia até o fim, arrastava e voltava. A primeira versão pôs uma segunda barra ACIMA do cabeçalho e o owner recusou — "não é assim que fala a melhor prática" — com razão: o padrão é a barra seguir EMBAIXO e só parar de fugir da tela. Então a `.tbl__barra` é um contêiner de rolagem VAZIO (uma tira de 1px com a largura do conteúdo), fixo no rodapé da área útil e espelhado nos dois sentidos com o `.tbl__wrap` pelo cheff-ui.js. Aparece só quando a tabela transborda E o rodapé dela ainda não chegou na tela; some quando a barra nativa entra em quadro, pra nunca haver duas. Desenhada SEMPRE (não a overlay do sistema): trilho em --fill (contenção) e polegar em --fg-mut (apoio, 4,81 sobre o trilho), nenhuma cor nova e os dois já têm par no modo escuro. O polegar começou em --line-2 e sumia: 1,14 sobre o trilho é fio, não objeto — e ser visto é justamente o pedido. NO TOQUE é só indicador (`pointer-events:none`): o dedo arrasta a tabela inteira, e um alvo de 10px violaria os 44px do guia — custo aceito, ali ela informa em vez de operar. */ .tbl__barra{ position:fixed; z-index:4; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:auto; scrollbar-color:var(--fg-mut) var(--fill) } .tbl__barra > i{ display:block; height:1px } .tbl__barra[hidden]{ display:none } .tbl__barra::-webkit-scrollbar{ height:10px } .tbl__barra::-webkit-scrollbar-track{ background:var(--fill); border-radius:999px } .tbl__barra::-webkit-scrollbar-thumb{ background:var(--fg-mut); border-radius:999px; border:2px solid var(--fill); background-clip:padding-box } @media (hover:hover) and (pointer:fine){ .tbl__barra::-webkit-scrollbar-thumb:hover{ background:var(--fg) } } @media (pointer:coarse){ .tbl__barra{ pointer-events:none } } .tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px } .tbl th,.tbl td{ padding:var(--sp-2) var(--sp-4); text-align:left; white-space:nowrap; border-bottom:1px solid var(--line) } /* Decisão 77 (15/09/2026): toda linha do corpo (e o rodapé, quando existe) tem a MESMA altura — 40px, nem mais nem menos — mesmo quando uma célula carrega um selo ou um campo. Sem isso um badge (padding próprio) ou um `.tbl__in` engordavam só a linha deles, e a tabela ficava com dentes. Zera o padding vertical da célula (o alinhamento vertical sozinho centraliza o conteúdo); o padding horizontal continua vindo da regra `.tbl th,.tbl td` acima. */ .tbl tbody td, .tbl tfoot th, .tbl tfoot td{ height:40px; padding-block:0; vertical-align:middle } .tbl .tbl__in{ height:32px } /* campo de linha cabe nos 40px com respiro */ /* Coluna "Passo" da lista de Ordens (decisão 77): largura travada pra tabela caber sem rolar no desktop — situação + apoio truncam cada um na própria linha, o título carrega o texto inteiro. */ .tbl-passo{ max-width:170px } .tbl-passo__ln{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } /* v2: o cabeçalho da tabela é UMA superfície só, as duas linhas e todas as células. Pintar só as células com rótulo produzia branco → cinza ("ESTOQUE") → branco, um mosaico (defeito relatado pelo owner, 19/08). Quem separa os grupos é o fio vertical, não a troca de cor — e o fio sobe para --line-2, porque --line sobre --surf praticamente não existe. */ /* O thead é --surface (branco), não --surf (= --fill = --page-bg): achado 16/09 do owner ("linha esquisita ao rolar") era o thead grudado se fundindo com o fundo da página atrás dele, sobrando só o fio de baixo boiando sozinho. --surface é a mesma superfície do card (guia §8: "sem preenchimento cinza" já valia, só a cor estava errada). */ .tbl thead th, .tbl thead td{ background:var(--surface) } .tbl thead th{ position:sticky; top:0; z-index:3; /* acima do .tbl td .btn (z 2): botão de linha não fura o cabeçalho grudado */ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); font-weight:700 } /* `--head-h` só existe pra empurrar o thead pra baixo do cabeçalho DA PÁGINA quando ele está sticky contra o `.content` — ou seja, só dentro de `.tbl__wrap--grudado` (ver comentário acima). Nas demais tabelas o wrap é o próprio contêiner de rolagem (`overflow-x:auto`), o sticky vale contra ELE, e empurrar por `--head-h` (117px) enfiava o thead dentro do corpo da tabela (achado 16/09: "Aguardando cadastro" com o thead 117px abaixo do topo do wrap). */ .tbl__wrap--grudado .tbl thead th{ position:static } /* o grudado é o fantasma (cheff-ui.js), não o thead real */ /* decisão 79: quem ganhou fantasma (hoje, toda tabela do conteúdo) tem o thead real estático — dois cabeçalhos grudados brigariam, e o real fica onde sempre esteve, no topo da tabela. A classe é posta pelo JS: sem JS, o sticky da regra acima continua valendo como estava. */ .tbl.is-fantasma thead th{ position:static } .tbl thead tr.tbl__grps th, .tbl thead th.tbl__grp-edge{ border-left-color:var(--line-2) } .tbl tbody tr:last-child td{ border-bottom:0 } /* sem zebra: cansa em 1.800 linhas */ .tbl .num{ text-align:right; font-variant-numeric:tabular-nums } .tbl th[aria-sort]{ color:var(--ink) } @media (hover:hover) and (pointer:fine){ .tbl tbody tr:hover{ background:var(--hover) } } .tbl .frozen{ position:sticky; left:0; z-index:1; background:var(--surface) } .tbl thead .frozen{ z-index:3; background:var(--surface) } /* mesma correção do thead: branco, não --surf */ /* a borda da coluna congelada SÓ quando há conteúdo passando por baixo */ .tbl .frozen--edge::after{ content:""; position:absolute; inset:0 0 0 auto; width:12px; background:linear-gradient(90deg,var(--line) 0 1px,rgba(18,17,16,.06),transparent); opacity:0; transition:opacity var(--t-ui) var(--ease-out); pointer-events:none } .tbl__wrap.is-scrolled .frozen--edge::after{ opacity:1 } /* Produtos v2 (12/09/2026): a lista ganhou uma 2ª coluna congelada, a foto, antes do SKU. `.frozen` sozinha gruda tudo em left:0 — as duas empilhariam uma em cima da outra. A foto fica em left:0 (sem sombra própria: --edge é só da ÚLTIMA congelada) e o SKU desloca pela largura medida da célula da foto (16px de respiro + 36px de imagem + 16px). */ .tbl .foto-cell.frozen{ left:0 } .tbl .frozen.frozen--apos-foto{ left:68px } /* ---- Foto de produto (Produtos v2, 12/09/2026) ---- Só URL do S3 do Tiny; o Portal nunca copia binário. Ladrilho neutro (--fill) quando não há foto: imagem quebrada mente e ícone genérico vira ruído em 100 linhas. */ .foto{ display:block; object-fit:cover; background:var(--fill); border:1px solid var(--line-card); border-radius:var(--r-1); flex:0 0 auto } .foto--sm{ width:36px; height:36px } .foto--lg{ width:88px; height:88px; border-radius:var(--r-2) } .foto--vazia{ position:relative } .foto--vazia::after{ content:""; position:absolute; inset:9px; border:1.5px dashed var(--line-2); border-radius:3px } .foto-cell{ width:1%; padding-top:6px; padding-bottom:6px } .ident{ display:flex; gap:var(--sp-4); align-items:flex-start; min-width:0 } @media (max-width:759px){ .ident{ flex-direction:column } } .tbl__bulk{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--ink); color:var(--on-fg); border-radius:var(--r-2) } /* rodapé, nunca topo */ /* Variante flutuante (Expedição SP, 29/09/2026): a barra de seleção em lote sobe do rodapé da janela quando há caixa marcada (public/expedicao.js liga .is-open) e some quando não há. Só transform e opacity animam; visibility sai depois da descida pra a barra fechada não entrar na tabulação. Sob prefers-reduced-motion não há deslocamento, só o fade. */ .tbl__bulk--flutua{ position:fixed; left:0; right:0; bottom:var(--sp-5); z-index:40; flex-wrap:wrap; width:max-content; max-width:calc(100vw - 32px); margin:0 auto; box-shadow:var(--sh-3); transform:translateY(calc(100% + var(--sp-5))); opacity:0; visibility:hidden; transition:transform 220ms var(--ease-out), opacity 160ms var(--ease-out), visibility 0s linear 220ms } .tbl__bulk--flutua.is-open{ transform:none; opacity:1; visibility:visible; transition-delay:0s } .tbl__bulk .btn--tertiary{ color:var(--on-fg-mut) } @media (hover:hover) and (pointer:fine){ .tbl__bulk .btn--tertiary:hover{ color:var(--on-fg) } } @media (max-width:759px){ .tbl__bulk--flutua{ left:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4); width:auto; max-width:none } } @media (prefers-reduced-motion:reduce){ .tbl__bulk--flutua{ transform:none; transition:opacity 160ms var(--ease-out), visibility 0s linear 160ms } .tbl__bulk--flutua.is-open{ transition-delay:0s } } /* Tabelas do Estoque tudo à esquerda (decisão do owner no preview de 06/08/2026). Precisa cobrir .num: `.tbl .num` (linha ~255) realinha números à direita e empata em especificidade — aqui vence por ordem. */ .tbl--left th, .tbl--left td, .tbl--left .num { text-align: left; } /* ============================================================ 9. FORMULÁRIO — "punir tarde, perdoar cedo" ============================================================ */ .form{ display:flex; flex-direction:column; gap:var(--sp-6); max-width:560px } .field{ display:flex; flex-direction:column; gap:var(--sp-2) } .field > label{ font-size:13px; font-weight:700 } /* SEMPRE acima, nunca placeholder */ .field__optional{ font-weight:500; color:var(--mut); margin-left:var(--sp-2) } /* marcamos o opcional */ .field input,.field select,.field textarea{ font:inherit; font-size:var(--fld-fs); /* 13,5px no mouse, 16px no toque */ color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); padding:0 var(--sp-4); height:var(--fld-h); width:100%; transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out) } /* Select de formulário: mesmo remédio do .tbl-filter (comentário lá) — sem `appearance:none` o macOS/iOS impõe o chrome nativo (fonte de sistema, altura própria) e a fonte "feia e grande" volta (owner, 01/09/2026). O chevron nativo some junto: entra um em SVG na própria borda direita. */ .field select{ appearance:none; -webkit-appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2373716e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center } .field textarea{ height:auto; min-height:128px; padding:var(--sp-4); line-height:1.55 } /* ── Campo de ARQUIVO ──────────────────────────────────────────────────── O widget nativo ("Escolher arquivo · Nenhum arquivo escolhido") traz a fonte, o botão e o cinza do SISTEMA pra dentro de um formulário do Portal — no Windows é gritante. 4 campos assim no RH e 1 no X9. O `::file-selector-button` deixa estilizar só o botão, sem JS e sem esconder o input: o teclado, o arrastar-e-soltar e o leitor de tela continuam funcionando, que é o que se perde na gambiarra de label+input escondido. O texto "nenhum arquivo" ao lado é do navegador e fica — ele é a única confirmação de que o arquivo entrou. */ .field input[type=file]{ padding:0 var(--sp-3); font-size:var(--fld-fs); color:var(--mut); display:flex; align-items:center; gap:var(--sp-3); cursor:pointer } .field input[type=file]::file-selector-button{ height:var(--ctl-h); padding:0 var(--sp-4); margin-right:var(--sp-3); border:1px solid var(--line-2); border-radius:var(--r-1); background:var(--surface); color:var(--ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:background var(--t-fast) var(--ease-out) } .field input[type=file]::file-selector-button:hover{ background:var(--hover) } .field input[type=file]:focus-visible{ outline:none; border-color:var(--ink); box-shadow:var(--ring) } .field :is(input,select,textarea):focus{ outline:none; border-color:var(--ink); box-shadow:var(--ring) } .field__hint{ font-size:12px; color:var(--mut) } /* ── Campos LADO A LADO (decisão 72, lote de ajustes 13/09/2026) ────────── Campo lado a lado sempre declara a largura. Numa linha flexível genérica (.u-hstack) o .field vira item sem base e fica da largura do TEXTO DE AJUDA embaixo dele: nos Parâmetros de Compras os campos mediam de 314 a 738px. Dois ou três irmãos → .frow (partes iguais). Muitos → .fgrid (colunas iguais que quebram sozinhas). Largura fixa num irmão → .field--xs/--sm/--md. Travado por teste no design-system.test.js. */ .fgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr)); gap:var(--sp-4) var(--sp-3); align-items:start } .fgrid > .field{ min-width:0 } /* Rótulo que quebra em duas linhas empurrava a caixa pra baixo e a linha de campos ficava torta. Com subgrid, rótulo, caixa e ajuda de todos os campos da mesma linha dividem as MESMAS trilhas: as caixas alinham sempre. */ @supports (grid-template-rows: subgrid){ .fgrid > .field{ grid-row:span 3; display:grid; grid-template-rows:subgrid; row-gap:var(--sp-2); align-content:start } } /* grupo de campos com título: o fieldset nativo traz borda e recuo do navegador */ .fset{ border:0; margin:0; padding:0; min-width:0 } /* botão na linha de campos: alinha com a CAIXA, não com o rótulo. O deslocamento é a altura da linha do rótulo (13px × 1,55) + o gap do .field. */ .fgrid__acao{ align-self:start; justify-self:start; display:flex; gap:var(--sp-2); margin-top:calc(13px * 1.55 + var(--sp-2)) } .fgrid__acao > .btn{ height:var(--fld-h) } @supports (grid-template-rows: subgrid){ /* com subgrid o botão senta na trilha da CAIXA, mesmo com rótulo de duas linhas ao lado */ .fgrid__acao{ grid-row:span 3; display:grid; grid-template-rows:subgrid; row-gap:var(--sp-2); margin-top:0 } .fgrid__acao > .fgrid__botoes{ grid-row:2; display:flex; gap:var(--sp-2); align-items:center } } .fgrid__botoes{ display:flex; gap:var(--sp-2) } .fgrid__botoes > .btn{ height:var(--fld-h) } .field--xs{ width:7rem } .field__error{ display:none; font-size:12px; color:var(--red); font-weight:600 } .field.is-invalid :is(input,select,textarea){ border-color:var(--red) } /* ── Campo DENTRO de linha de tabela (compras-v2, 24/08/2026) ───────────── Quantidade/preço/SKU editados linha a linha (remessa, pedido de compra, conferência, recebimento). Sem esta classe o input nasce cru do navegador: 21px de altura e 13px de fonte — abaixo do alvo de 44px no toque e da fonte de 16px que evita o zoom do iOS. Altura de AÇÃO (--ctl-h: 36 / 44 no celular), não de campo: é um controle inline num comando (decisão 56). */ .tbl__in{ font:inherit; font-size:var(--fld-fs); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); padding:0 var(--sp-3); height:var(--ctl-h); width:6rem; font-variant-numeric:tabular-nums } .tbl__in--preco{ width:7.5rem } .tbl__in--sku{ width:9.5rem } .tbl__in:focus{ outline:none; border-color:var(--ink); box-shadow:var(--ring) } /* arquivo enviado de dentro de uma linha de tabela (Campanha da marca) */ .tbl__in--arquivo{ width:17rem; padding:0 var(--sp-2) 0 0; border:0; background:transparent; color:var(--mut); display:inline-flex; align-items:center; cursor:pointer } .tbl__in--arquivo::file-selector-button{ height:var(--bar-h); padding:0 var(--sp-3); margin-right:var(--sp-2); border:1px solid var(--line-2); border-radius:var(--r-1); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--bar-fs); font-weight:700; cursor:pointer } .field.is-invalid .field__error{ display:flex } .field.is-invalid .field__hint{ display:none } /* substitui, não empilha */ .form__summary{ border:1px solid var(--red); border-radius:var(--r-2); padding:var(--sp-4) } /* ============================================================ 10. ESTADOS — nenhum é beco sem saída ============================================================ */ .empty{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); padding:var(--sp-6) var(--sp-5); text-align:center } .empty p{ font-size:12.5px; color:var(--mut); max-width:38ch } /* "nunca teve" e "o filtro cortou" são estados DIFERENTES: um oferece criar, o outro oferece limpar filtro. */ .skeleton{ height:12px; border-radius:var(--r-1); background:linear-gradient(90deg,var(--line) 25%,var(--fill) 37%,var(--line) 63%); background-size:400% 100%; animation:shimmer 1400ms linear infinite } @keyframes shimmer{ to{ background-position:-135% 0 } } /* esqueleto espelha a forma final e reserva a altura. Nada abaixo de 300ms. */ .stale{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); background:var(--hover); font-size:12px; color:var(--mut) } /* ============================================================ 11. FEEDBACK — o que exige ação NÃO desaparece sozinho ============================================================ */ /* v3 (03/09/2026, decisões 66-67): selo CHEIO — fundo tingido, sem fio. Quatro cores, cada uma com o próprio fundo, todas ≥ 4.5:1 sobre ele. O ponto (.badge__dot) só existe no selo neutro: no colorido a cor já é o fundo, e o ponto virava ruído. */ .badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--r-1); font-size:11px; font-weight:700; border:1px solid transparent; color:var(--ink-2); background:var(--fill) } .badge .ti{ font-size:14px; flex:none } /* ícone do passo (Expedição SP): cor diz o que fazer, ícone diz o passo */ .badge__dot{ width:6px; height:6px; border-radius:var(--r-full); background:var(--mut) } .badge--ok { color:var(--green); background:var(--green-bg) } .badge--bad { color:var(--red); background:var(--red-bg) } .badge--attention{ color:var(--amber); background:var(--amber-bg) } /* atenção é ÂMBAR (decisão 66) */ .badge--info { color:var(--blue); background:var(--blue-bg) } /* informação neutra */ /* Decisão 77 (15/09/2026): dentro de tabela o selo é compacto — nunca estica a linha de 40px. */ .tbl .badge{ height:22px; padding:0 8px; line-height:22px; font-size:11.5px } /* Flags de Produto (spec 2026-09-08 §7). A etiqueta é o DADO e o × é a ação: com oito flags num produto, oito botões do tamanho de um icon-btn (40px) viram uma parede de × e a leitura das etiquetas se perde. No mouse o × aparece no hover ou no foco; no toque fica sempre visível, porque ali não existe hover pra revelar — e com 44px de alvo, que é a lei do celular. */ .flag{ display:inline-flex; align-items:center; gap:var(--sp-1) } .flag__x{ width:20px; height:20px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; border-radius:var(--r-1); color:var(--mut); cursor:pointer; transition:opacity var(--t-fast), color var(--t-fast) } .flag__x .ti{ font-size:14px } .flag__x:hover{ color:var(--red) } /* destrutivo é neutro em repouso, vermelho no hover */ @media (hover:hover) and (pointer:fine){ .flag__x{ opacity:0 } .flag:hover .flag__x, .flag__x:focus-visible{ opacity:1 } } /* No celular o × some: alvo de 44px (a lei do toque) vezes oito flags abre buracos entre as etiquetas e a leitura do produto se perde. Ali a remoção mora no painel "Gerenciar flags", que é onde há espaço pra um alvo honesto — e continua reversível, porque é só remarcar. */ @media (max-width:759px){ .flag__x{ display:none } } .badge--ok .badge__dot, .badge--bad .badge__dot, .badge--attention .badge__dot, .badge--info .badge__dot{ display:none } .toasts{ position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:60; display:flex; flex-direction:column; gap:var(--sp-2); width:min(340px,calc(100vw - 32px)) } @media (max-width:759px){ .toasts{ left:var(--sp-4); right:var(--sp-4); width:auto } } .toast{ display:flex; align-items:flex-start; gap:var(--sp-3); background:var(--ink); color:var(--on-fg); border-radius:var(--r-2); padding:var(--sp-4); box-shadow:var(--sh-3); font-size:13px } /* sucesso 5s · com desfazer 10s · falha NÃO some · máx. 3 na tela */ /* ============================================================ 12. SOBREPOSIÇÕES — Esc fecha · clique fora fecha · botão visível ============================================================ */ .scrim{ position:fixed; inset:0; background:var(--scrim); z-index:50 } .modal{ position:fixed; z-index:51; left:50%; top:50%; width:min(440px,calc(100vw - 32px)); background:var(--surface); border-radius:var(--r-2); box-shadow:var(--sh-3); transform:translate(-50%,-50%) } /* exceção: nasce no centro */ .menu{ position:absolute; min-width:210px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--sh-2); padding:var(--sp-1); transform-origin:top left } /* cresce DO GATILHO */ @media (max-width:759px){ /* no celular o diálogo vira folha de baixo — zona do polegar */ .modal{ top:auto; bottom:0; left:0; width:100%; transform:none; border-radius:var(--r-2) var(--r-2) 0 0; padding-bottom:env(safe-area-inset-bottom) } } /* Ao abrir: foco entra na sobreposição e no botão SEGURO. Ao fechar: foco volta ao gatilho. Página atrás não rola. Uma sobreposição por vez. */ /* ============================================================ CAMADA DE APP — Portal do Colaborador (03/08/2026) Componentes que as telas do Portal precisam e o guia ainda não fixa como CSS. Tudo deriva das decisões do guia; nada aqui introduz cor, curva ou medida fora da lei. Prefixo por componente (lição da rodada 9: `.sw` virou `.tgl`). ============================================================ */ /* ---------- shell: esqueleto de layout ---------- */ .main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column } .content{ flex:1 1 auto; overflow-y:auto } /* -webkit-overflow-scrolling saiu: ver .tbl__wrap */ .side__logo{ height:26px; display:block; margin:var(--sp-2) var(--sp-3) var(--sp-4) } .side__logo, .topbar__logo, .auth__logo{ filter:var(--logo-filter) } /* overflow-X hidden é DELIBERADO: o conteúdo do menu cabe na largura (199 de 224px), mas com só o overflow-y a barra vertical rouba largura e o navegador passa a desenhar TAMBÉM a horizontal. Era o risco de rolagem lateral que o owner viu em 20/08. */ /* ── Área que rola sem barra, com a borda desbotada no lugar dela ──────── Nasceu no menu lateral (decisão 52) e a barra de abas da ficha do colaborador pediu a mesma coisa na horizontal: 7 abas não cabem em 390px, e um corte reto na borda parece "acabou aqui" — foi o defeito exato que a barra de rolagem tinha. Uma classe, dois eixos. `tem-mais` = há conteúdo adiante · `tem-antes` = há conteúdo atrás. Ligadas pelo cheff-ui.js. */ .rola{ scrollbar-width:none; -ms-overflow-style:none; --fade:20px; transition:mask-image .15s ease } .rola::-webkit-scrollbar{ width:0; height:0 } .rola--y{ overflow-y:auto; overflow-x:hidden } /* anel de foco DENTRO do item quando a lista rola: por fora, o overflow corta as bordas de cima e de baixo e sobram só os cantos vermelhos (13/09/2026) */ .rola--y :focus-visible{ outline-offset:-2px } .rola--x{ overflow-x:auto; overflow-y:hidden } /* dentro de uma área que rola na horizontal, o segmentado não pode encolher pra caber — é justamente disso que ele tem que escapar */ .rola--x > .seg{ width:max-content } .rola--x > .seg a, .rola--x > .seg button{ flex:0 0 auto; white-space:nowrap } .rola--y.tem-mais { mask-image:linear-gradient(#000 calc(100% - var(--fade)), transparent) } .rola--y.tem-antes{ mask-image:linear-gradient(transparent, #000 var(--fade)) } .rola--y.tem-antes.tem-mais{ mask-image:linear-gradient(transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent) } .rola--x.tem-mais { mask-image:linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent) } .rola--x.tem-antes{ mask-image:linear-gradient(90deg, transparent, #000 var(--fade)) } .rola--x.tem-antes.tem-mais{ mask-image:linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent) } /* o menu usa `.rola .rola--y` no HTML — aqui fica só o que é dele */ .side__nav{ flex:1 1 auto; min-height:0 } /* espaço da seta reservado mesmo sem destino: sem isto, a linha SEM seta empurra o valor 28px pra direita e a coluna de número deixa de alinhar (achado do owner no "Por canal": Camicado e Outros fora do prumo). Mesma lógica da decisão 13 — a seta não pode aparecer e sumir. */ .row__go--vazio{ visibility:hidden } /* textarea de composição: começa com a cara de um campo de uma linha e cresce conforme o texto (altura controlada no cheff-ui.js). */ .field textarea.cresce{ min-height:var(--fld-h); height:var(--fld-h); padding-top:12px; padding-bottom:12px; resize:none; /* `hidden` e não `auto`: enquanto o texto cabe, não existe rolagem — e no Windows `auto` desenhava a barra clássica COM SETAS dentro do campo de uma linha por diferença de arredondamento de line-height. O script liga `auto` só quando o campo trava no máximo de linhas. */ overflow-y:hidden } .side__foot{ margin-top:auto; padding:var(--sp-3) var(--sp-3) var(--sp-2); border-top:1px solid var(--line-shell); display:flex; align-items:center; gap:var(--sp-3) } .side__foot .t-caption{ line-height:1.3 } .nav__item .ti{ font-size:16px; flex:0 0 auto } .nav__count{ margin-left:auto; font-size:11.5px; color:var(--mut); font-variant-numeric:tabular-nums } /* badge preto no menu = exige ação (Aprovar ideias 2). Contador cinza = só informa. */ .nav__badge{ margin-left:auto; min-width:18px; height:18px; padding:0 6px; border-radius:var(--r-full); background:var(--ink); color:var(--on-fg); font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums } .skip{ position:absolute; left:-9999px; z-index:100; background:var(--ink); color:var(--on-fg); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-2) } .skip:focus{ left:var(--sp-3); top:var(--sp-3) } /* ---------- menu em árvore: Grupo → App → Página (19/08/2026) ---------- Mockup aprovado pelo owner em 18/08. Dropdown só com 2+ páginas reais; acordeão (um aberto por vez) vive no cheff-ui.js; o pai da rota ativa renderiza aberto pelo servidor — carga de página não anima (guia 0.6). Nível 3 sem ícone, texto alinhado ao rótulo do pai: 16px padding + 17px ícone + 12px gap = 45px. */ .nav__item{ border:1px solid transparent } /* .is-active tem fio de 1px — sem isto o item cresce 2px ao ativar e a lateral pula */ button.nav__item{ width:100%; background:transparent; text-align:left } .nav__chev{ margin-left:auto; font-size:14px; color:var(--mut); flex:0 0 auto; transition:transform var(--t-ui) var(--ease-out) } button.nav__item[aria-expanded="true"] .nav__chev{ transform:rotate(90deg) } /* pai da rota ativa engrossa, mas NÃO eleva — única elevação da lateral é o item ativo */ button.nav__item.has-active{ color:var(--ink); font-weight:700 } /* 0fr → 1fr anima a altura sem medir nada em JS */ .nav__sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-ui) var(--ease-out) } .nav__sub.is-open{ grid-template-rows:1fr } .nav__sub > div{ min-height:0; overflow:hidden } .nav__subitem{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3) var(--sp-2) 40px; margin-top:1px; font-size:12.5px; color:var(--ink-2); border-radius:var(--r-2); border:1px solid transparent; transition:background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out) } @media (hover:hover) and (pointer:fine){ .nav__subitem:hover:not(.is-active){ background:var(--hover) } } .nav__subitem.is-active{ background:var(--surface); color:var(--ink); font-weight:700; border-color:var(--line-card); box-shadow:var(--card-sh) } @media (max-width:759px){ .nav__subitem{ min-height:44px; padding-top:12px; padding-bottom:12px } } /* ---------- menu v2 (31/08/2026): 3º nível + badge que sobe ---------- Sub-item que também é dropdown (Focus, Mercado Livre, Aprovações): mesmo .nav__subitem, em