/* ICAC Comercial — tokens do design system ICAC (só :root + 2 temas + reset). O estilo de cada tela é INLINE no markup (padrão do handoff do Design). Extraído de design_system_icac/tokens-and-components.css (sem as classes legadas do painel de produção). */ /* ── Fonte, servida por NÓS ──────────────────────────────────────────────── Era um @import do Google e ele travava a renderização. Um @import dentro da folha é invisível ao preload scanner do navegador: só é descoberto depois que ESTA folha baixa e é lida, e aí começa uma corrente de três saltos — DNS + TLS para fonts.googleapis.com, o CSS de lá, e então DNS + TLS para fonts.gstatic.com. Medido (2026-07-27): a requisição ao Google começava no mesmo milissegundo em que esta folha terminava, e custava 135 a 400 ms na primeira visita, dependendo do aparelho. Servido daqui, o navegador já está com a conexão aberta e nada disso existe. Quatro arquivos, não oito: latin e latin-ext, normal e itálico. Cirílico e vietnamita ficaram de fora — não servem a esta base. O `unicode-range` faz o navegador baixar SÓ o subconjunto que a página usa, então o latin-ext custa zero para quem não escreve nenhum caractere dele. As faixas de peso são EXATAMENTE as que o Google declarava (normal 300-800, itálico 500-600). A fonte é variável e cobriria mais, mas alargar aqui mudaria o desenho de textos que hoje o navegador sintetiza — não é hora de mexer na aparência. O `?v=` é LITERAL e precisa ser trocado à mão se a fonte for atualizada. Aqui não dá para usar o helper `estatico()`: isto é um arquivo estático, não um template Jinja. Sem o carimbo, `_cache_do_caminho` devolveria `no-cache` e a fonte revalidaria a cada navegação — trocaríamos um custo de primeira visita por um custo permanente. Hanken Grotesk, de Alfredo Marco Pradil, sob SIL Open Font License 1.1 — a licença exige que o texto acompanhe os arquivos, e está em fonts/OFL.txt. */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/static/comercial/fonts/hanken-grotesk-latin.woff2?v=1') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/static/comercial/fonts/hanken-grotesk-latin-ext.woff2?v=1') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 500 600; font-display: swap; src: url('/static/comercial/fonts/hanken-grotesk-latin-italic.woff2?v=1') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 500 600; font-display: swap; src: url('/static/comercial/fonts/hanken-grotesk-latin-ext-italic.woff2?v=1') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --font: 'Hanken Grotesk', system-ui, sans-serif; --accent: #d8a73f; --r-card: 16px; --r-sm: 10px; } /* ---------- TEMA ESCURO ---------- */ [data-theme="dark"] { --bg-0: #131f37; --bg-1: #18254180; --bg-grad: radial-gradient(120% 90% at 80% -10%, #1d2c4d 0%, #15223c 55%, #111c33 100%); --card: #1b2a48; --card-2: #16243f; --card-bd: rgba(255,255,255,.07); --card-bd-strong: rgba(255,255,255,.12); --hero: #f1ede1; --text: #e7ecf5; --text-2: #b9c4d8; --muted: #7e8db0; --muted-2: #65759a; --track: rgba(255,255,255,.08); --row-bd: rgba(255,255,255,.06); --green: #5ec98c; --red: #e85f57; --gold: #e3b352; /* Desvio de preço da T9. O handoff crava oklch() no JS, que NÃO troca entre os temas — aqui viram token, um par por tema. Usados só como ponto ao lado do texto (o texto fica em --hero), então o que importa é distinguir-se do vermelho e do verde vizinhos. */ --laranja: #f0913f; --azul: #6ea8f0; /* Dourado para TEXTO. O handoff pinta de `--gold` os verbos da T9 ("Trocar", "Adicionar item", "Entrega programada") e o dono pediu esse amarelo de volta — mas `--gold` sobre cartão claro dá 2,75:1 e reprova em AA. No tema escuro o próprio `--gold` já dá 7,3:1, então aqui é o mesmo valor; no claro ele escurece o suficiente para passar (ver o par lá embaixo). */ --gold-txt: #e3b352; --chip: rgba(255,255,255,.05); --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.6); --logo-mark: #e0463c; --blue: #6ea8e6; } /* ---------- TEMA CLARO (padrão) ---------- */ [data-theme="light"] { --bg-0: #efe7d6; --bg-1: #ffffff; --bg-grad: radial-gradient(120% 90% at 80% -10%, #f6f0e3 0%, #efe7d6 60%, #e9dfca 100%); --card: #fdfbf6; --card-2: #fbf8f1; --card-bd: rgba(28,40,72,.10); --card-bd-strong: rgba(28,40,72,.16); --hero: #1c2c4a; --text: #283a5c; --text-2: #56627c; --muted: #8c8270; --muted-2: #a59a85; --track: rgba(28,40,72,.08); --row-bd: rgba(28,40,72,.07); --green: #2f9d61; --red: #d24a44; --gold: #c2912c; --laranja: #b9631a; --azul: #2d6cc0; /* Par claro de --gold-txt: o mesmo âmbar, escurecido até passar em AA sobre as TRÊS superfícies onde ele aparece — cartão #fdfbf6 (6,1:1), --bg-0 #efe7d6 (5,2:1) e, a mais escura de todas, o fim do --bg-grad #e9dfca (4,8:1). É essa última que decide: o "+ Adicionar item" tracejado mora sobre o gradiente, não sobre o --bg-0 chapado, e calibrar pelo token liso deixava o botão em 4,36:1. Continua lendo como dourado ao lado do --gold decorativo, que segue claro. */ --gold-txt: #7d590c; --chip: rgba(28,40,72,.04); --shadow: 0 1px 2px rgba(28,40,72,.04), 0 14px 30px -20px rgba(28,40,72,.22); --logo-mark: #e0463c; --blue: #3f74b8; } /* Etapas do item — MESMAS cores do dashboard de Expedição (expedicao.css .mat-tag), para o representante ler a etapa igual ao pessoal da fábrica. */ .etapa { font-size:13px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; } .etapa-pendente { color:var(--text-2); background:color-mix(in srgb, var(--text-2) 15%, transparent); } .etapa-producao { color:oklch(0.74 0.13 200); background:oklch(0.74 0.13 200 / 0.16); } .etapa-parcial { color:var(--gold); background:color-mix(in srgb, var(--gold) 16%, transparent); } .etapa-disponivel { color:var(--green); background:color-mix(in srgb, var(--green) 16%, transparent); } /* Em separação: rolos já apartados para o pedido, ainda sem despacho. Laranja para não colidir com o dourado do "Parcial" (mais amarelo) nem com o azul do "Em despacho", que é o passo seguinte. */ .etapa-separacao { color:oklch(0.70 0.15 50); background:oklch(0.70 0.15 50 / 0.16); } .etapa-despachado { color:var(--blue); background:color-mix(in srgb, var(--blue) 16%, transparent); } .etapa-faturado { color:oklch(0.72 0.15 300); background:oklch(0.72 0.15 300 / 0.16); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; font-family: var(--font); background-color: var(--bg-0); color: var(--text); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; } a { color: var(--gold); } a:hover { color: var(--accent); } input::placeholder { color: var(--muted-2); opacity: 1; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* KPIs do cabeçalho do pedido (T4): no mobile ocupam a largura toda; no desktop as colunas encolhem para o conteúdo e o bloco encosta à direita — sobra espaço para o nome do cliente e a data fica alinhada à direita. */ .kpi-bloco { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; } .kpi-entrega { min-width: 0; } @media (min-width: 900px) { .kpi-bloco { flex: 0 1 auto; margin-left: auto; } /* Metragem e Valor com largura fixa; Entrega encolhe ao conteúdo (data tem tamanho estático) e fica alinhada à direita. */ .kpi-grid { grid-template-columns: 200px 200px max-content; justify-content: end; gap: 14px 30px; } .kpi-entrega { text-align: right; } } /* Esconder linhas por filtro/busca SEM apagar o `display` inline da linha (grid/flex) — por isso classe com !important, nunca style.display="". */ .oculto { display: none !important; } /* Feedback de interação da Início (T2). No protótipo isso vinha em atributos `style-hover`/`style-active`, que não existem em HTML — viram classe, a mesma exceção da regra "o resto do estilo fica inline". */ .card-link { transition: border-color .15s ease; } /* !important porque a borda mora no `style` inline do card (padrão do handoff) e estilo inline vence qualquer seletor — sem isto o hover é código morto. */ .card-link:hover { border-color: var(--card-bd-strong) !important; } .card-link:hover span { color: inherit; } /* o `a:hover` global não vale aqui */ /* Card/atalho cujo dado ainda não existe: visível para dar a medida da tela, mas claramente sem acesso (decisão P3). `pointer-events:none` impede clique e arrasto; não há href, então não entra na navegação por teclado. NÃO usar `opacity` aqui: ela compõe o card inteiro contra o fundo da página e derruba o contraste do texto a ~1,8:1 no tema claro — ilegível, ainda mais para o público-alvo. Também não lavar o texto em `--muted`: mesmo sem opacity fica em ~3,8:1, abaixo do AA. O que marca o card é a BORDA TRACEJADA (inline, como todo o resto do estilo) e o selo "Em breve"; o texto mantém o contraste dos cards normais — 4,97:1 no tema claro, 9,34:1 no escuro. */ .em-breve { pointer-events: none; background: var(--chip); } /* Grade da T7 — áreas do handoff (T7 Produto.dc.html:325). Mobile empilha; desktop põe a foto numa coluna à direita que atravessa info/preço/ação, e a ficha ocupa a largura toda. Alinhamento centralizado no mobile, à esquerda no desktop (headAlign do protótipo). */ /* `minmax(0, 1fr)` e não `1fr`: em grid, `1fr` é `minmax(auto, 1fr)`, e esse `auto` NÃO encolhe abaixo do conteúdo mínimo da coluna. Um código de produto comprido esticava a coluna para 348px dentro de uma tela de 344 — e o estouro não ficava na T7, virava rolagem horizontal na página inteira. A regra de desktop logo abaixo já usava `minmax(0, …)`; faltava aqui. */ .t7-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; grid-template-areas: "info" "foto" "prec" "acao" "ficha"; } .t7-acao { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; } .t7-info, .t7-prec, .t7-est { text-align: center; } @media (min-width: 900px) { .t7-grid { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); grid-template-areas: "info foto" "prec foto" "acao foto" "ficha ficha"; } .t7-acao { grid-template-columns: 1.15fr 1fr; } .t7-info, .t7-prec, .t7-est { text-align: left; } } /* Botão presente no layout mas sem destino ainda (a T9 é da E5): mantém o peso visual do handoff — é a âncora da grade — e diz "em breve" por escrito. */ .sem-acao { pointer-events: none; } /* Grades da T8 (Desempenho). Mesma regra das outras: o `display` mora aqui, o resto do estilo fica inline. Mobile empilha e centraliza os KPIs; desktop põe os 3 lado a lado e alinha à esquerda, como no handoff. */ .t8-kpis { display: grid; grid-template-columns: 1fr; gap: 14px; text-align: center; } .t8-duo { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; } .t8-cresc { justify-content: center; } @media (min-width: 900px) { .t8-kpis { grid-template-columns: repeat(3, 1fr); text-align: left; } .t8-duo { grid-template-columns: repeat(2, 1fr); } .t8-cresc { justify-content: flex-start; } } /* Barra do gráfico: é um link (clicar refiltra o período), então precisa de alvo visível no hover e no foco por teclado. */ .t8-barra { transition: background .12s ease; } .t8-barra:hover, .t8-barra:focus-visible { background: var(--gold) !important; } /* Acordeão da ficha técnica (T7) com
nativo — sem JS, que a CSP proíbe inline, e já vem navegável por teclado e por leitor de tela. Só escondemos o marcador padrão (o chevron é SVG no markup) e giramos ele. */ summary::-webkit-details-marker { display: none; } summary::marker { content: ""; } details[open] > summary svg { transform: rotate(180deg); } summary svg { transition: transform .18s ease; flex: 0 0 auto; } /* Alternância mobile↔desktop (breakpoint 900px, igual ao handoff do Design). O `display` (e flex-direction quando preciso) mora AQUI, na classe; todo o resto do estilo de cada elemento fica inline no markup. Assim o toggle nunca briga com os estilos inline (bug do antigo display:revert). */ .dc-mob { display: block; } /* bloco só do mobile */ .dc-desk { display: none; } /* bloco só do desktop */ .dc-hdr-nav { display: none; } /* nav topo: só desktop */ .dc-cards { display: flex; flex-direction: column; } /* lista mobile */ .dc-table { display: none; } /* tabela: só desktop */ .dc-btmnav { display: grid; } /* nav inferior: só mobile */ .dc-spacer { display: block; } /* respiro da nav inferior */ /* T1 · Login — elementos que nascem `hidden` e o script revela. O `:not([hidden])` é obrigatório: uma regra de id vence o `display:none` que o navegador aplica ao atributo `hidden`, e sem ele a folha de ajuda nasceria ABERTA por cima da tela. */ #biometria-ou:not([hidden]) { display: flex; } #ver-senha:not([hidden]) { display: flex; } #ajuda:not([hidden]) { display: flex; } @media (min-width: 900px) { .dc-mob { display: none; } .dc-desk { display: block; } .dc-hdr-nav { display: flex; } .dc-cards { display: none; } .dc-table { display: flex; flex-direction: column; } .dc-btmnav { display: none; } .dc-spacer { display: none; } } /* ─── T9 · Novo orçamento ──────────────────────────────────────────────── Duas telas MUITO diferentes a partir do mesmo HTML, como no handoff: · MOBILE — assistente de 3 passos. Um bloco por vez, escolhido pelo atributo `data-passo` da grade; trilha de bolhas no topo e barra de ações grudada no rodapé. É a única tela do app SEM a nav inferior — a barra de ações ocupa o lugar dela, e as duas juntas empilhariam. · DESKTOP — sem passo nenhum: Cliente e Itens empilhados à esquerda e um cartão Resumo grudado à direita, atravessando as duas linhas. É o Resumo que carrega o botão de enviar, e ele substitui o passo 3. O `display` mora AQUI e nunca inline no markup: inline venceria a media query. E as regras de passo e as do desktop têm a MESMA especificidade (0,3,0) de propósito — quem desempata é a ordem, por isso o bloco do desktop vem depois. Mexer na ordem quebra o layout grande. Cada seção é uma COLUNA, não um cartão: o rótulo em versalete ("CLIENTE", "ITENS") é IRMÃO dos cartões, não filho — é isso que o põe fora do bloco, como no handoff (T9:107, 176, 269). */ .orc-grade { display: grid; gap: 14px; align-items: start; grid-template-areas: "cli" "itn" "rev"; } .orc-cli { grid-area: cli; flex-direction: column; gap: 10px; } .orc-itn { grid-area: itn; flex-direction: column; gap: 10px; } .orc-rev { grid-area: rev; flex-direction: column; gap: 10px; } .orc-cli, .orc-itn, .orc-rev { display: flex; } .orc-res { grid-area: res; display: none; } /* resumo: só desktop */ .orc-trilha { display: flex; } /* trilha 1-2-3: só mobile */ .orc-barra { display: flex; } /* barra de ações: só mobile */ .orc-grade[data-passo="1"] .orc-itn, .orc-grade[data-passo="1"] .orc-rev, .orc-grade[data-passo="2"] .orc-cli, .orc-grade[data-passo="2"] .orc-rev, .orc-grade[data-passo="3"] .orc-cli, .orc-grade[data-passo="3"] .orc-itn { display: none; } /* Prazo e transportadora LADO A LADO em qualquer largura (o handoff empilha abaixo de ~420px, e o dono pediu lado a lado). A transportadora leva 30% a mais de coluna porque os nomes de lá são longos, e o `text-overflow` do aberto mostra o texto inteiro na lista do sistema, então o corte só afeta o estado fechado. `minmax(0, …)` nas duas: sem isso a coluna não encolhe abaixo do conteúdo e a grade vaza a tela no celular. */ .orc-cond { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; } /* "Cliente: FULANO" no topo dos Itens: no celular o passo 2 esconde o bloco Cliente, e sem esta linha o rep perde de vista para quem está cotando. No desktop o bloco Cliente está do lado, então ela sobra. */ .orc-so-mob { display: block; } @media (min-width: 900px) { .orc-grade { grid-template-areas: "cli res" "itn res"; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); } /* tudo visível ao mesmo tempo, seja qual for o passo guardado */ .orc-grade[data-passo] .orc-cli, .orc-grade[data-passo] .orc-itn { display: flex; } .orc-grade[data-passo] .orc-rev { display: none; } .orc-res { display: block; position: sticky; top: 14px; } .orc-trilha { display: none; } .orc-barra { display: none; } .orc-so-mob { display: none; } } /* Janela modal. O reset `* { margin: 0 }` lá em cima MATA o `margin: auto` que a folha do navegador usa para centralizar um modal — sem esta linha ele encosta no canto superior esquerdo da tela. Vale para as duas janelas do app (a do detalhe na T10 e a de adicionar item na T9). */ dialog { margin: auto; } dialog::backdrop { background: color-mix(in srgb, #0d1626 55%, transparent); } /* Sem padding na própria janela: o respiro mora no miolo (#orc-picker-corpo), senão o toque na borda interna conta como clique no fundo e fecha o pop-up. */ .orc-modal { width: 100%; max-width: 480px; max-height: 86dvh; overflow-y: auto; padding: 0; border: 1px solid var(--card-bd-strong); border-radius: 20px; background: var(--card); color: var(--text); box-shadow: var(--shadow); } /* ── T11 Requisições ─────────────────────────────────────────────────────── Duas colunas no desktop, empilhado no celular — a mesma quebra de 900px que o handoff usa (`s.w < 900`, T11:207). A coluna do formulário fica STICKY: a lista de requisições rola sozinha e o rep pode abrir uma nova sem voltar ao topo (T11:279 `formPos`). O `display` mora aqui, nunca inline no markup — inline venceria a media query. Mesma razão do `.orc-grade`. Cada seção é uma COLUNA, não um cartão: o rótulo em versalete ("NOVA REQUISIÇÃO", "MINHAS REQUISIÇÕES") é IRMÃO do cartão, não filho, que é o que o põe fora do bloco como no handoff (T11:66 e 103). */ .req-grade { display: grid; gap: 14px; align-items: start; grid-template-areas: "form" "lista"; } .req-form { grid-area: form; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .req-lista { grid-area: lista; display: flex; flex-direction: column; gap: 10px; min-width: 0; } @media (min-width: 900px) { .req-grade { grid-template-areas: "form lista"; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.5fr); } .req-form { position: sticky; top: 14px; } } /* O seletor de tipo é um rádio DE VERDADE, só que invisível: assim o teclado anda com as setas, o leitor de tela anuncia o grupo, e a tela funciona com o JavaScript desligado. O visual do handoff (ladrilho do ícone dourado, círculo com o tique) vem de `:checked`, não de classe posta por script. `clip` em vez de `display:none` porque campo escondido de verdade sai da ordem de tabulação e deixa de ser focável — o rádio precisa continuar lá. */ .req-tipo input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .req-tipo { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 9px 0; cursor: pointer; } .req-tipo + .req-tipo { border-top: 1px solid var(--row-bd); } .req-tipo .req-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); } .req-tipo .req-marca { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--card-bd-strong); background: transparent; display: flex; align-items: center; justify-content: center; color: #1b1303; } .req-tipo .req-marca svg { visibility: hidden; } .req-tipo input:checked ~ .req-ic { background: var(--accent); color: #1b1303; } .req-tipo input:checked ~ .req-marca { border: 0; background: var(--accent); } .req-tipo input:checked ~ .req-marca svg { visibility: visible; } /* o foco do teclado precisa aparecer em algum lugar, já que o rádio é invisível */ .req-tipo input:focus-visible ~ .req-ic { outline: 2px solid var(--accent); outline-offset: 2px; } /* "acima" no celular, "ao lado" no desktop — o handoff troca a frase por JS (T11:300); aqui as duas existem no HTML e o CSS mostra a certa. Media query não vira `if` de servidor: o servidor não sabe a largura da tela. */ .req-so-mob { display: inline; } .req-so-desk { display: none; } @media (min-width: 900px) { .req-so-mob { display: none; } .req-so-desk { display: inline; } } /* Rótulo que só o leitor de tela ouve. O `` nomeia o grupo de rádios — sem ele o leitor anuncia sete opções soltas, sem dizer do quê. Não dá para usar `display:none`: isso o tira da árvore de acessibilidade também. */ .sr-so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }