/* OVEYON Mail — painel do operador. Folha própria, self-hosted, sem recurso externo (CSP-ready). A partir da FASE 0: tema CLARO e ESCURO. ── MAPA DE TOKENS SEMÂNTICOS ────────────────────────────────────────────── Superfícies --surface (cartão) · --surface-2 (fundo da página) · --surface-3 (realce sutil / hover de linha) Texto --ink (principal) · --muted (secundário) · --faint (terciário) Linhas --line (borda padrão) · --line-2 (divisor mais forte) Marca --brand (navy, texto-marca) · --brand-2 (link / texto-ação) Ação --accent (preenchimento primário) + --accent-ink + --accent-hover Navegação --nav-bg (superfície navy da sidebar/login — ESCURA nos dois temas) Saúde (par de texto+fundo, mais a linha): --ok / --ok-bg / --ok-line --warn / --warn-bg / --warn-line --bad / --bad-bg / --bad-line --neutral / --neutral-bg / --neutral-line --info / --info-bg / --info-line Apoio --tint-ink (texto secundário sobre tints) · --dot-ink (traço do marcador da timeline) · --focus (anel de foco) Sólido --on-solid (tinta sobre preenchimento colorido: badge, aba ativa) Navy --nav-ink / --nav-ink-2 / --nav-ink-3 (rampa de TINTA) · --nav-ink-ws (acento do grupo primário) · --nav-hover-soft / --nav-hover / --nav-line / --nav-active / --nav-outline / --nav-well (rampa de LAVAGEM, um degrau por papel) · --nav-focus (foco) · --nav-ok / --nav-bad (saúde sobre navy) · --nav-context (trilha "estou dentro de um cliente") Elevação --sh-sm / --sh-md / --sh-pop / --sh-lg (rampa) · --scrim (véu) INVARIANTES DE TEMA (definidos só no :root, NUNCA em bloco de tema): --badge-danger-bg, --on-solid e toda a família --nav-*. Eles vivem sobre superfícies que não mudam com o tema (navy, preenchimento sólido); se algum deles for redefinido no bloco escuro, o contraste desaba. Ver o bloco abaixo. Compatibilidade: os nomes originais (--bg/--panel/--text/--border) seguem sendo a FONTE-DA-VERDADE referenciada pelo CSS; --surface/--surface-2/--ink/ --line são apelidos semânticos que acompanham via var(). O modo escuro sobrescreve só a fonte; os apelidos herdam. Contraste AA em claro E escuro. */ /* ── A FONTE DO REDESENHO (22/08/2026) — O PAINEL ACOMPANHA ───────────────── O motivo, os pesos, os subsets e a decisão de auto-hospedar estão escritos por extenso no portal.css, junto do bloco gêmeo deste. Aqui fica só a pergunta que é DESTE arquivo: o painel do operador acompanha o portal na troca de família? SIM, e não por gosto. `--sans` e `--mono` são tokens de VOCABULÁRIO COMPARTILHADO: as duas folhas os definem com o mesmo valor desde a rodada 2, e test/portalContraste.test.js tem catraca de divergência que só admite as SETE divergências declaradas (identidade e densidade) — família de fonte não é uma delas, e abrir a oitava para um redesenho que não é do painel seria exatamente a «divergência silenciosa» que aquela catraca existe para pegar. O que sustenta na prática: o painel e o portal compartilham COMPONENTES inteiros (o modal de mensagem, os selos de saúde, .btn-sm, a barra de simulação). Um componente escrito numa família e lido noutra deixa de ser o mesmo componente — foi assim que as quatro pilhas mono derivadas escaparam na rodada 5. Uma família, os dois lados, um vocabulário. Os quatro arquivos são os MESMOS bytes servidos ao portal (public/fonts/), então o operador que abre as duas superfícies no mesmo navegador baixa a fonte UMA vez. */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree-latin.woff2) 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: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree-latin-ext.woff2) 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: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/jetbrainsmono-latin.woff2) 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: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/jetbrainsmono-latin-ext.woff2) 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 { color-scheme: light dark; /* knob de switch: PEÇA FÍSICA branca nos DOIS temas (mesma doutrina do .switch-knob do painel de IPs) — a cor mora no token, uma vez. */ --sw-knob: #fff; /* superfícies e texto — fonte-da-verdade (esquerda) + apelido semântico. RODADA 2: os apelidos do PORTAL (--panel-2/--border-strong/--muted-2) entram como sinônimos para que as duas folhas falem o MESMO vocabulário. Uma regra copiada de um lado para o outro passa a resolver, em vez de cair num fallback cravado que ignora o tema. */ --bg: #f4f5f8; --surface-2: var(--bg); --panel: #ffffff; --surface: var(--panel); --surface-3: #fbfcfd; --panel-2: var(--surface-3); --text: #0f172a; --ink: var(--text); /* Tinta SECUNDÁRIA — valor vindo do portal (#5b6b7d), escolhido por MEDIDA e não por qual folha é dona: sobre --panel o antigo #66788c dava 4.54:1 (passa raspando) e sobre --bg dava 4.19:1 (REPROVA AA); o novo dá 5.46:1 e 5.05:1. Três regras do painel saíam do AA só por causa disso (.jn-rcpt, .eml-tab, .money-input .money-sym). */ --muted: #5f6c80; /* Tinta TERCIÁRIA — hoje usada SÓ em ícone decorativo (.c-stat-ic, .c-empty-ic). Valor do portal (#8494a5): 3.11:1 sobre --panel, cruza o limiar 3:1 de objeto gráfico; o antigo #8a99a9 media 2.91:1 e reprovava. NÃO use em texto — nenhum dos dois chega aos 4.5:1 de corpo. */ /* --muted-2 é o NOME QUE O PORTAL USA para esta mesma tinta. Fica aqui sem consumidor de propósito: alias de vocabulário existe exatamente para a regra copiada de lá resolver aqui. É categoria diferente de token de VALOR sem consumidor (--shadow, --btn-gap), que foram removidos nesta rodada. */ --faint: #8494a5; --muted-2: var(--faint); --border: #e7e9ee; --line: var(--border); --line-2: #c3cad4; --border-strong: var(--line-2); /* ── A BORDA DO CAMPO — token novo, e a mudança de maior alcance da rodada 5. RODADA 4 MEDIU: a borda de input/select/textarea era `var(--border)`, a MESMA linha dos cartões e divisores. Sobre --panel isso dá **1,29:1** no claro e 1,33:1 no escuro. WCAG 1.4.11 (contraste de elemento NÃO-textual) pede 3:1, e aqui se aplica com força total: a borda é a ÚNICA fronteira do campo — o preenchimento do input é --panel e o cartão onde ele vive também. Sem borda visível o campo não tem forma, e a pessoa descobre onde clicar por tentativa. 49 telas, 2140 ocorrências: o defeito de maior alcance do produto, e o motivo de esta rodada existir. POR QUE UM TOKEN NOVO, E NÃO «escurecer --border». --border desenha divisor de cartão, linha de tabela, separador — decoração, que 1.4.11 NÃO cobre («elemento de puro enfeite» é exceção escrita na norma). Escurecer aquele token engrossaria a folha inteira e trocaria um defeito de acessibilidade por um de hierarquia: se toda linha grita, nenhuma informa. O que muda de categoria é só o CONTROLE — por isso o nome diz CAMPO, não «borda forte». O VALOR SAIU DE MEDIDA. O campo aparece sobre --panel (#fff), sobre --surface-3 (#f8fafc) e sobre --bg (#f4f6f9), e a norma pede 3:1 contra o que houver de CADA lado da linha. #79879a mede 3,66 · 3,49 · 3,38:1 nas três — folga nas três. Reusar --faint (#8494a5) teria sido mais barato e estaria errado: dá 3,11 sobre o branco mas 2,97 sobre --surface-3, ou seja, passaria na tela de login e reprovaria no formulário dentro do cartão. */ --field-border: #79879a; /* marca / ação */ --brand: #16405f; --brand-2: #1f6699; /* ── DIVERGÊNCIA DECLARADA 1 de 2: IDENTIDADE ───────────────────────────── RODADA 6 (22/08/2026). Estas três (--accent, --accent-hover, --focus) e as quatro de DENSIDADE (--btn-pad-y/-x, --btn-fs, --radius) são as ÚNICAS sete que divergem do portal.css. Medido: 72 nomes em comum, 65 no MESMO valor. O navy é a identidade do OPERADOR; o portal adotou o azul do redesenho (#2563eb). Duas identidades, por decisão — e só aqui. Tudo o que é SIGNIFICADO (tinta, superfície, ok/warn/bad/info, borda de campo) tem o mesmo valor nas duas folhas, porque um --ok que é um verde numa tela e outro na outra é divergência SILENCIOSA: ninguém decidiu, ninguém revisa. Com veto desde a rodada 6: test/portalContraste.test.js reprova divergência NOVA e exige que a declarada continue declarada. */ --accent: #1f6699; /* DIVERGENTE (portal: #2563eb) */ --accent-ink: #ffffff; --accent-hover: #16405f; /* DIVERGENTE (portal: #1d4fd7) */ --nav-bg: #16405f; /* ── SAÚDE ───────────────────────────────────────────────────────────────── RODADA 2 — cada par texto/fundo é o MELHOR das quatro combinações que existiam entre as duas folhas, medido (WCAG, contrast.js), não escolhido: ok #1b7440 (painel) sobre #e6f4ec (portal) = 5.12:1 ← era 5.04 e 4.49 warn #8a5a00 (portal) sobre #fff3d1 (painel) = 5.36:1 ← era 4.99 e 5.32 bad #b32731 (igual) sobre #fbe6e8 (portal) = 5.41:1 ← era 5.33 e 5.41 info #1f5aa8 (igual) sobre #e6eefb (portal) = 5.83:1 ← era 5.74 e 5.83 O caso `ok` é o que importa: o cliente via 4.49:1 (REPROVA) em TODO sinal de sucesso do portal — flash, toast, badge, marca de checklist. RODADA 6 — os quatro pares adotam a paleta do redesenho do portal, e por isso mudam AQUI TAMBÉM, no mesmo commit. Não é redesenhar o painel: é troca de valor, sem tocar em nenhuma regra de layout. Medido contra o tint em que cada um é usado, e não sobre branco: ok #0b7a47 sobre #e7f7ef = 4,87:1 ← era 5,12 warn #8a6304 sobre #fdf3de = 4,93:1 ← era 5,36 bad #b4442f sobre #fdedea = 4,85:1 ← era 5,41 info #1d4fd7 sobre #eef4ff = 6,03:1 ← era 5,83 Três folgas encolheram e a quarta cresceu; nenhuma cruzou o 4,5. E os consumidores do painel foram medidos contra os valores NOVOS antes de o commit sair: --tint-ink sobre os quatro tints não desce de 7,89:1, o navy não usa nenhum destes tokens (rampa própria, invariante), e o --accent do painel não mudou. */ --ok: #0b7a47; --ok-bg: #e7f7ef; --ok-line: #bfe7d2; --warn: #8a6304; --warn-bg: #fdf3de; --warn-line: #f0e2b4; --bad: #b4442f; --bad-bg: #fdedea; --bad-line: #f0cfc8; /* Preenchimento SÓLIDO de badge de contagem (com texto branco): vermelho fundo FIXO nos dois temas — no escuro o --bad é #f08a92 (cor de TEXTO) e branco sobre ele reprova AA. Só definido aqui no :root ⇒ não é sobrescrito no dark. RODADA 6 — acompanha o --bad novo (5,51:1 com branco, era 6,46). Ele é uma CÓPIA do vermelho claro, congelada contra o tema; deixá-la para trás faria o selo de contagem ser um vermelho e o estado ser outro, na mesma tela. */ --badge-danger-bg: #b4442f; /* Mesma categoria, outro sinal: ENGAJAMENTO (Lido/Clicado) é sucesso ALÉM da entrega, e o teal preenchido salta do verde de "Entregue" sem gritar. Também é preenchimento SÓLIDO com --on-solid por cima ⇒ fixo nos dois temas. */ --engaged-bg: #0d7d78; --neutral: #5f6c80; --neutral-bg: #eef1f6; --neutral-line: #d8dee6; /* INFO É DA FAMÍLIA DA MARCA (28/08) — o mesmo retinto do portal, no mesmo commit: os tokens de significado resolvem IGUAL nas duas folhas (catraca de portalContraste). Era #1d4fd7 sobre #eef4ff, um azul solto na paleta. */ --info: #1f4b70; --info-bg: #eef2f6; --info-line: #cfdae6; /* Apelidos `-bd` do portal para a MESMA borda de estado. Existem para que uma regra escrita numa folha resolva na outra (era `var(--bad-bd)` no portal e `var(--bad-line)` aqui, para a mesma linha). */ --ok-bd: var(--ok-line); --warn-bd: var(--warn-line); --bad-bd: var(--bad-line); --info-bd: var(--info-line); /* ── ÂMBAR SÓLIDO — chega do redesenho do portal, e chega AQUI TAMBÉM ────── RODADA 6. «Retida» é um estado ATIVO que pede decisão humana, e por isso é PREENCHIMENTO (~55% de saturação) e não tint de 8–10% como os outros quatro. Preenchimento exige tinta própria: branco sobre #f7e2a8 mede 1,28:1 e o próprio --warn mede 4,24:1 — os dois reprovam. #6b5410 mede 5,65:1. --on-warn é da família de --on-solid (tinta sobre PREENCHIMENTO), não de --warn (tinta sobre TINT). Nunca use um pelo outro. Por que o painel ganha um token que talvez ele ainda não pinte: porque a regra é copiada entre as duas folhas o tempo todo, e o modo de falha conhecido desta base é `var(--x)` que não resolve — a rodada 2 existe por causa dele (`var(--surface, #fff)` renderizando branco no tema escuro). Um nome que existe de um lado só é a próxima ocorrência daquele bug. */ --warn-solid: #f7e2a8; --on-warn: #6b5410; /* apoio */ --tint-ink: #3c4a60; --dot-ink: #ffffff; --focus: var(--accent); /* ── TINTA SOBRE SUPERFÍCIE SÓLIDA ───────────────────────────────────────── --on-solid é a tinta de texto sobre um PREENCHIMENTO colorido sólido (badge de contagem, aba ativa, .badge-engaged). NÃO use --accent-ink aqui: ele é #0b1420 no escuro (a tinta certa sobre o accent CLARO do tema escuro), e num badge vermelho/teal viraria texto quase preto. Fixo nos dois temas, como --badge-danger-bg logo acima e pelo mesmo motivo. */ --on-solid: #ffffff; /* ── SUPERFÍCIE NAVY (sidebar, mtopbar, switcher de cliente) ─────────────── --nav-bg é ESCURA NOS DOIS TEMAS, então nada que vive sobre ela pode usar os tokens de tema (--text/--panel/--border/--accent): no modo escuro eles invertem e o contraste desaba. Era por isso que estas cores estavam cravadas à mão — o CSS já anotava "cores fixas como os demais controles da sidebar". Estes tokens são exatamente aqueles valores, agora nomeados: o caminho fácil volta a ser o caminho certo. Fixos nos dois temas DE PROPÓSITO — não os redefina em bloco de tema. */ --nav-ink: #ffffff; /* tinta primária sobre navy (título, item ativo) */ --nav-ink-2: #c8d9e8; /* tinta secundária (item de nav, cabeçalho de subgrupo) */ --nav-ink-3: #9fb8cc; /* tinta terciária (legenda, link de plataforma, desabilitado) */ /* RODADA 3 — o ÚNICO acento de COR da navy: o rótulo do grupo PRIMÁRIO (o workspace do cliente). Era #9fdcff cravado, com `opacity:.9` por cima; agora é um nome, e a opacidade saiu (ver A OPACIDADE QUE SAIU, abaixo). */ --nav-ink-ws: #9fdcff; /* ── RAMPA DE LAVAGEM SOBRE A NAVY ───────────────────────────────────────── RODADA 3. Eram SETE alfas de branco escritos à mão (.05 .09 .10 .12 .14 .16 .30) para CINCO papéis — dois pares de gêmeos separados por 1 e 2 pontos de alfa, que ninguém distingue e ninguém defende numa revisão. Agora são cinco degraus, um por PAPEL declarado: quem for pintar algo novo sobre a navy escolhe o PAPEL, não o alfa. As duas fusões (.09→.10 e .14→.16) mudam pixel DE VERDADE, pouco: 2 e 4 de 255 por canal. Estão medidas e na galeria — não são "arredondamento". */ --nav-hover-soft: rgba(255,255,255,.05); /* hover de ITEM de nav — fraco DE PROPÓSITO: era .07 contra .14 do ativo, perto demais, e num relance parecia haver dois itens selecionados */ --nav-hover: rgba(255,255,255,.1); /* realce de CONTROLE (botão, sino, item de menu) e bloco em REPOUSO sobre a navy */ --nav-line: rgba(255,255,255,.12); /* FIO: divisor de seção e contorno de bloco */ --nav-active: rgba(255,255,255,.16); /* SELECIONADO: item ativo, controle aberto, borda do bloco aberto */ --nav-outline: rgba(255,255,255,.3); /* contorno de controle FANTASMA (sem preenchimento) */ --nav-well: rgba(0,0,0,.22); /* POÇO: bloco RECUADO dentro da navy (menu do switcher). Único degrau escuro — recuo, não elevação. */ --nav-focus: #6db3e8; /* anel de foco / marca de seleção sobre navy (--accent claro é #1f6699 e some na navy) */ /* Saúde SOBRE A NAVY. Os tokens de saúde do tema não servem aqui: --ok claro é #1b7440 e some na navy; --bad escuro é #f08a92, que é cor de TEXTO. Estes dois são os valores que já estavam cravados em `.tsw-dot`, agora nomeados. */ --nav-ok: #55c08a; --nav-bad: #e2707a; /* Trilha de "estou dentro do workspace de um cliente". Âmbar porque não compete com nenhum azul da interface e não carrega semântica de erro — lê como CONTEXTO, que é o que ela é. Fica aqui, e não em --warn, por isso. */ --nav-context: #f0a640; /* ── A OPACIDADE QUE SAIU ────────────────────────────────────────────────── RODADA 3. `opacity` num rótulo é um multiplicador que NENHUM medidor de contraste enxerga: ele lê a cor declarada, não o pixel que sai. `.nav-group` trazia `opacity: .65` e `.pf-label` uma tinta cravada; o par rendia 2,75:1 no tema claro (3,75:1 no escuro) — REPROVA AA — em QUATRO rótulos ("Operação", "Entrega", "Clientes", "Sistema") de TODA página do painel. E o instrumento dizia "0 reprovações", porque a regra não declara fundo e a tinta não era token: o defeito estava escondido nas duas pontas. A regra que fica: sobre a navy a hierarquia se faz com a RAMPA DE TINTA (--nav-ink / -2 / -3), NUNCA com `opacity`. Dimming que o medidor não vê é dimming que ninguém audita. */ /* ── BOTÃO — a FORMA vira token; o PAPEL continua sendo de cada superfície ── Eram 10 variantes (.btn .btn-primary .btn-secondary .btn-ghost .btn-danger .btn-link .btn-sm .btn-inline .btn-copy-inline .btn-archive-view), cada uma com padding, raio e tipo escritos à mão — o sintoma clássico de componente sem token: onze jeitos de dizer "botão". O que legitimamente MUDA entre as duas superfícies é o papel do preenchimento e o tamanho do alvo primário: no painel o botão padrão é CHEIO e denso (o operador clica dezenas por dia); no portal ele é CONTORNADO e grande (a tela de entrada empilha três opções de mesmo peso). O que NÃO muda — e por isso tem o mesmo valor nos dois arquivos — é a forma do botão pequeno e o raio: `--btn-*-sm`, `--btn-radius` e `--btn-min-h` são idênticos aqui e no outro arquivo. É isso que finalmente faz `.btn-sm` ser a MESMA coisa nas duas telas. */ /* ── DIVERGÊNCIA DECLARADA 2 de 2: DENSIDADE ────────────────────────────── Quatro linhas: --btn-pad-y, --btn-pad-x, --btn-fs e --radius. O painel é denso porque o operador clica dezenas de vezes por dia; o portal é folgado porque a tela do cliente empilha três ações de mesmo peso. Decisão de produto, não dívida — e por isso cada uma carrega a marca na própria linha: quem for «unificar» tem de ler o motivo antes. */ --btn-pad-y: 8px; --btn-pad-x: 14px; /* DIVERGENTE (portal: 12px/16px) */ --btn-pad-y-sm: 6px; --btn-pad-x-sm: 12px; /* IGUAL no portal.css */ --btn-radius: 6px; /* IGUAL no portal.css */ --btn-fs: var(--fs-md); /* 14px — DIVERGENTE (portal: 15px) */ --btn-fs-sm: var(--fs-sm); /* 13px — IGUAL no portal.css */ /* (sem --btn-gap aqui: o botão do painel não usa flex/gap. Token de VALOR sem consumidor é dívida — a regra que apliquei em --shadow vale para mim.) */ --btn-min-h: 44px; /* alvo de toque do primário */ --radius: 8px; /* DIVERGENTE (portal: 12px) */ /* ── SOMBRA ──────────────────────────────────────────────────────────────── RODADA 2 — `--sh-lg` era referenciada por .eml-modal e NUNCA foi definida. var() sem fallback e sem token é inválido em tempo de computação: a propriedade cai para o valor inicial, então aquele modal simplesmente não tinha sombra. O valor é o mesmo do modal do portal. */ /* RODADA 3 — a rampa de ELEVAÇÃO fechou. Eram seis sombras escritas à mão, cada uma com seu alfa e seu desfoque, e nenhuma com nome; a rampa é a resposta à pergunta "a quantos milímetros do papel esta peça flutua?". Quatro degraus, do mais colado ao mais solto — todos INVARIANTES de tema (a sombra do painel é preta nos dois; quem varia com o tema é --shadow, e ele mora no portal.css, ver a nota lá embaixo). */ --sh-sm: 0 1px 6px rgba(0,0,0,.06); /* colado: realce de cartão em hover */ --sh-md: 0 6px 20px rgba(0,0,0,.16); /* solto: peça efêmera (toast) */ --sh-pop: 0 8px 28px rgba(0,0,0,.22); /* ancorado: popover preso a um botão */ --sh-lg: 0 20px 60px rgba(0,0,0,.25); /* flutuante: modal e cartão de login. RODADA 2 — este token era referenciado por .eml-modal e NUNCA foi definido. var() sem fallback e sem token é inválido em tempo de computação: a propriedade cai para o valor inicial, então aquele modal simplesmente não tinha sombra. O valor é o mesmo do modal do portal. */ /* VÉU atrás de peça flutuante (backdrop de modal, overlay da gaveta). Uma cor, três consumidores aqui e um no portal — era a mesma rgba escrita quatro vezes, e o dia em que uma delas mudasse sozinha ninguém notaria. */ --scrim: rgba(0,0,0,.5); /* NÃO existe --shadow/--shadow-sm aqui de propósito. Eles chegaram a ser definidos para que o `.card` do painel pudesse ganhar a elevação do portal; com aquela unificação revertida (é densidade, não acabamento — ver o comentário do `.card`), ficariam como token sem consumidor, que é dívida nova disfarçada de vocabulário. O painel só eleva o que flutua. E NÃO existe --sh-drawer/--sh-botnav/--sh-knob: as três sombras que sobram cravadas são DIRECIONAIS ou de PEÇA (ver as declarações no fim do arquivo). Token de um consumidor só é um apelido, não vocabulário. */ /* RODADA 3 — `"SF Mono"` entra na lista. Ele já estava escrito à mão em CINCO atalhos `font:` das duas folhas, que assim mantinham uma SEGUNDA pilha mono quase igual a esta. Acrescentar o apelido aqui torna --mono um superconjunto e deixa aqueles cinco lugares resolverem pelo token sem perder nenhuma face. Inerte para quem já usava --mono: no macOS `ui-monospace` resolve primeiro e os apelidos nunca são consultados. */ /* RODADA 7 (22/08/2026) — a família do mockup entra NA FRENTE da pilha. O token não muda de NOME nem perde uma face: as pilhas antigas viram, na íntegra, o fallback de quem ainda não baixou o woff2 (font-display:swap) e do navegador que não suporta woff2. Ver o bloco @font-face acima. */ --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ── ESCALA TIPOGRÁFICA (rodada 2) ───────────────────────────────────────── Fechada: 14 degraus, os MESMOS nos dois arquivos. Antes eram 25 valores em que 12/12.5 e 13/13.5 conviviam sem querer dizer coisas diferentes — meia dúzia de meio-pixel que ninguém consegue defender numa revisão. Não é progressão geométrica de propósito: um painel de dados legítimo tem 11/12/13/14 como densidades distintas. O que a escala garante é que o conjunto é FECHADO — nenhum tamanho fora desta lista existe no arquivo, e escrever um obriga a nomeá-lo aqui primeiro. */ --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 15px; --fs-xl: 16px; --fs-2xl: 18px; --fs-3xl: 20px; --fs-4xl: 22px; --fs-5xl: 24px; --fs-6xl: 26px; --fs-7xl: 32px; --fs-8xl: 40px; /* ── ESCALA DE ESPAÇO ────────────────────────────────────────────────────── 0 · 1 (fio) · 2 4 6 8 10 12 14 16 18 20 22 24 26 28 · 32 40 48 64 Sem token por valor de propósito: espaço aparece em atalho de 2 a 4 valores (`padding: 2px 14px 12px`) e `var(--sp-3) var(--sp-7)` seria ilegível. A regra que dá para cobrar é "nenhum valor fora da rampa" — e ela é medida por `node measure.js`, não confiada à memória de quem edita. */ /* ── ESCALA DE RAIO ──────────────────────────────────────────────────────── 4px (marca/amostra) · 6px (controle: botão, campo, bloco) · var(--radius) (cartão, painel, modal) · 999px (pílula) · 50% (círculo). */ } /* ── MODO ESCURO ──────────────────────────────────────────────────────────── Espelha portal.css. A media query = default pela preferência do SO; os blocos [data-theme] deixam o TOGGLE do usuário vencer nos dois sentidos (o data-theme=light re-afirma o claro por especificidade maior que a media). Só redefinimos a fonte-da-verdade; os apelidos acompanham. */ @media (prefers-color-scheme: dark) { :root { --bg: #0d141d; --panel: #151f2b; --surface-3: #1b2735; --text: #e7eef6; --muted: #9fb0c2; --faint: #74869a; --border: #263548; --line-2: #34465c; /* 4,03:1 sobre --panel e 3,67:1 sobre --surface-3 — a mesma folga do claro, do outro lado. O escuro tinha o defeito gêmeo: 1,33:1. */ --field-border: #6b7f95; --brand: #cfe0f0; --brand-2: #7fb2e6; --accent: #5b8df5; --accent-ink: #0b1420; --accent-hover: #7aa3f7; --nav-bg: #0f1a24; --ok: #4cc07d; --ok-bg: #12271b; --ok-line: #234c33; --warn: #e6b855; --warn-bg: #2a2210; --warn-line: #4d3f18; --bad: #f08a92; --bad-bg: #2a1315; --bad-line: #522328; --neutral: #9fb0c2; --neutral-bg: #1b2735; --neutral-line: #33465c; --info: #8fb6ee; --info-bg: #131f31; --info-line: #26364f; /* ÂMBAR SÓLIDO no escuro: o par INVERTE — fundo da página sobre o âmbar de texto, 10,00:1. #6b5410 aqui seria tinta escura sobre tinta escura. */ --warn-solid: var(--warn); --on-warn: var(--bg); --tint-ink: #c3d3e6; --dot-ink: #0d141d; } } /* Toggle força escuro (vence a preferência do SO). */ :root[data-theme="dark"] { --bg: #0d141d; --panel: #151f2b; --surface-3: #1b2735; --text: #e7eef6; --muted: #9fb0c2; --faint: #74869a; --border: #263548; --line-2: #34465c; --field-border: #6b7f95; --brand: #cfe0f0; --brand-2: #7fb2e6; --accent: #5b8df5; --accent-ink: #0b1420; --accent-hover: #7aa3f7; --nav-bg: #0f1a24; --ok: #4cc07d; --ok-bg: #12271b; --ok-line: #234c33; --warn: #e6b855; --warn-bg: #2a2210; --warn-line: #4d3f18; --bad: #f08a92; --bad-bg: #2a1315; --bad-line: #522328; --neutral: #9fb0c2; --neutral-bg: #1b2735; --neutral-line: #33465c; --info: #8fb6ee; --info-bg: #131f31; --info-line: #26364f; --warn-solid: var(--warn); --on-warn: var(--bg); /* par INVERTIDO — ver a media acima */ --tint-ink: #c3d3e6; --dot-ink: #0d141d; } /* Toggle força claro (re-afirma os valores base, vencendo a media escura). */ :root[data-theme="light"] { --bg: #f4f5f8; --panel: #ffffff; --surface-3: #fbfcfd; --text: #0f172a; --muted: #5f6c80; --faint: #8494a5; --border: #e7e9ee; --line-2: #c3cad4; --field-border: #79879a; --brand: #16405f; --brand-2: #1f6699; --accent: #1f6699; --accent-ink: #ffffff; --accent-hover: #16405f; --nav-bg: #16405f; --ok: #0b7a47; --ok-bg: #e7f7ef; --ok-line: #bfe7d2; --warn: #8a6304; --warn-bg: #fdf3de; --warn-line: #f0e2b4; --bad: #b4442f; --bad-bg: #fdedea; --bad-line: #f0cfc8; --neutral: #5f6c80; --neutral-bg: #eef1f6; --neutral-line: #d8dee6; /* INFO É DA FAMÍLIA DA MARCA (28/08) — o mesmo retinto do portal, no mesmo commit: os tokens de significado resolvem IGUAL nas duas folhas (catraca de portalContraste). Era #1d4fd7 sobre #eef4ff, um azul solto na paleta. */ --info: #1f4b70; --info-bg: #eef2f6; --info-line: #cfdae6; --warn-solid: #f7e2a8; --on-warn: #6b5410; --tint-ink: #3c4a60; --dot-ink: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font: var(--fs-lg)/1.5 var(--sans); min-height: 100vh; } a { color: var(--brand-2); text-decoration: none; } a:hover { text-decoration: underline; } /* ── ACESSIBILIDADE BASE ───────────────────────────────────────────────────── Anel de foco visível e consistente em qualquer interativo (:where() mantém especificidade 0, então não atropela o estilo dos componentes). */ :where(a, button, .btn, input, select, textarea, summary, [tabindex], [role="menuitem"]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* ---- shell: sidebar + conteúdo ---- */ .shell { display: flex; min-height: 100vh; } /* Chrome mobile (top bar, drawer overlay, bottom nav): inerte no desktop. O media query ≤900px liga cada um; ≥901px nada disso existe visualmente. */ .mtopbar, .botnav, .drawer-overlay { display: none; } .sidebar { width: 220px; flex: 0 0 220px; background: var(--nav-bg); /* RODADA 3: era #dce8f2 cravado. É a tinta HERDADA por quem não declara a sua dentro da barra; passa a ser o mesmo degrau do item de nav, que é o que ela sempre quis ser. (8,73:1 → 7,53:1 sobre a navy; segue AA folgado.) */ color: var(--nav-ink-2); display: flex; flex-direction: column; /* No desktop a sidebar precede o conteúdo no DOM; sem lift de empilhamento o dropdown do sino (que transborda a sidebar) pintaria ATRÁS do conteúdo. Esse z-index sobe a sidebar inteira acima do .content (só o popover transborda — a barra navy nunca cobre o conteúdo). No mobile a regra da drawer sobrescreve (position:fixed; z-index:60), então a ordem drawer/overlay/botnav é preservada. */ position: relative; z-index: 30; } .sidebar .logo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 18px 16px; font-weight: 700; font-size: var(--fs-xl); color: var(--nav-ink); letter-spacing: .5px; border-bottom: 1px solid var(--nav-line); } .sidebar .logo small { display: block; font-weight: 400; font-size: var(--fs-2xs); color: var(--nav-ink-3); letter-spacing: 1px; } .sidebar nav { flex: 1; padding: 10px 0; } /* Item de nav como PÍLULA recuada, não faixa de ponta a ponta. A faixa cheia colava nos rótulos de seção ("CLIENTE", "OPERAÇÃO") — sem respiro, o rótulo parecia parte do item — e deixava o realce do hover quase indistinguível do item ativo (duas barras iguais na largura toda). Recuo + raio resolvem os dois: o realce fica contido e o rótulo volta a flutuar sozinho. */ .sidebar nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; margin: 1px 8px; border-radius: var(--radius); color: var(--nav-ink-2); font-size: var(--fs-md); } /* Ícone de nav (sprite ): escala com a fonte, herda a cor do link (currentColor) e nunca encolhe/estica quando o rótulo quebra. Decorativo. */ .sidebar nav a .ic { width: 1.1em; height: 1.1em; flex-shrink: 0; } /* Hover BEM mais fraco que o ativo: antes eram .07 e .14 — perto demais, e num relance parecia haver dois itens selecionados. */ .sidebar nav a:hover { background: var(--nav-hover-soft); text-decoration: none; } /* SEM traço azul no item: a sidebar JÁ tem uma trilha azul de altura total (.sidebar.in-tenant) dizendo "você está dentro do workspace de um cliente". Um segundo traço da mesma cor, a 8px dela, competia com o primeiro e virava ruído — o olho via duas barras azuis e nenhuma das duas dizia nada sozinha. A pílula (fundo + texto branco + peso) já marca "você está aqui". */ .sidebar nav a.active { background: var(--nav-active); color: var(--nav-ink); font-weight: 600; } .sidebar .whoami { padding: 12px 16px; border-top: 1px solid var(--nav-line); font-size: var(--fs-xs); color: var(--nav-ink-3); word-break: break-all; } .sidebar .whoami button { margin-top: 8px; width: 100%; background: transparent; border: 1px solid var(--nav-outline); color: var(--nav-ink-2); border-radius: 6px; padding: 6px; cursor: pointer; font-size: var(--fs-xs); } /* «Trocar senha» — o link do rodapé da sidebar. RODADA 4 MEDIU **1,77:1**, em 52 telas: era o pior contraste de texto do produto. A CAUSA é a mesma do .tsw-sub logo abaixo e está escrita no bloco de tokens: a NAVY é a única superfície ESCURA NOS DOIS TEMAS, então nada sobre ela pode usar token de tema. Este link não pedia cor nenhuma — só herdava a regra global `a { color: var(--brand-2) }`, que no claro é #1f6699. Azul escuro sobre azul escuro. (No escuro o --brand-2 vira #7fb2e6 e mediria 7,89:1: o defeito só existia no tema CLARO, que é o default de quem nunca mexeu em nada. Herança silenciosa é pior que cor errada — ninguém escreveu esta cor, e por isso ninguém foi conferi-la.) --nav-ink-2 sobre a navy: 7,53:1 no claro, 12,19:1 no escuro. O sublinhado entra porque, sem o azul, cor sozinha deixaria de dizer «isto é um link» no meio de um bloco que já tem texto e dois botões (1.4.1 — cor não pode ser o único portador). */ .sidebar .whoami a { color: var(--nav-ink-2); text-decoration: underline; } /* Você já está nesta página: a marca é PESO + tinta cheia, o mesmo vocabulário do item ativo da nav logo acima. */ .sidebar .whoami a.active { color: var(--nav-ink); font-weight: 600; } .sidebar .whoami button:hover { background: var(--nav-hover); } /* Toggle de tema — vive no navy da sidebar (idêntico nos dois temas), então usa cores fixas como os demais controles do whoami. O ícone reflete o tema EFETIVO: lua no claro (→ escuro), sol no escuro (→ claro). */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; min-height: 44px; background: transparent; border: 1px solid var(--nav-outline); color: var(--nav-ink-2); border-radius: 6px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: var(--fs-xs); } .theme-toggle:hover { background: var(--nav-hover); } .theme-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; } .tt-sun { display: none; } .tt-moon { display: inline-flex; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tt-sun { display: inline-flex; } :root:not([data-theme="light"]) .tt-moon { display: none; } } :root[data-theme="dark"] .tt-sun { display: inline-flex; } :root[data-theme="dark"] .tt-moon { display: none; } :root[data-theme="light"] .tt-sun { display: none; } :root[data-theme="light"] .tt-moon { display: inline-flex; } .content { flex: 1; padding: 24px 28px; min-width: 0; } .content h1 { margin: 0 0 18px; font-size: var(--fs-4xl); } .content h2 { margin: 26px 0 10px; font-size: var(--fs-xl); } .content h3 { margin: 18px 0 8px; font-size: var(--fs-lg); } /* ── `.page-head` — o cabeçalho de tela, na DENSIDADE do painel ────────────── A dívida de 22/08: sete telas do painel (/inbound, /inbound/config, /inbound/destinations, /logs, /logs/:id, /queue e as abas de entregabilidade) abriam com
e a regra só existia em portal.css. O que isso custava, medido no DOM e não deduzido: o

caía no `margin: 1em 0` do navegador e na tinta de CORPO — o subtítulo lia com o mesmo peso do texto da página, e o par título/subtítulo abria 18px no meio (a margem do h1 colapsando com a do p) em vez dos 4px de uma linha só de cabeçalho. NÃO é cópia da regra do portal, e a diferença é deliberada: lá o h1 é --fs-6xl (26px), aqui o painel já declara `.content h1` em --fs-4xl (22px). Copiar o degrau promoveria SETE telas acima de todas as outras do painel — uma decisão de densidade que ninguém tomou, entrando de carona num conserto. É a mesma razão pela qual --btn-fs e --radius divergem entre as folhas. Os 18px do invólucro são os mesmos 18px que `.content h1` já deixava embaixo: uma tela COM subtítulo passa a terminar o cabeçalho na mesma altura de uma tela sem. `> h1, > h2` porque /queue usa o mesmo invólucro para abrir a seção «Resgate» com um

(e ali o 26px de topo de `.content h2` tem de sair do caminho do margin-top que a própria tela pede). */ .page-head { margin-bottom: 18px; } .page-head > h1, .page-head > h2 { margin: 0 0 4px; } /* --muted sobre --bg é o par «subtítulo de tela» que portalContraste mede a cada commit; nunca --faint, que reprova AA em texto pequeno. */ .page-head p { margin: 0; color: var(--muted); } /* ═══ Sino de alertas de saúde operacional ═══════════════════════════════════ Substitui a antiga faixa .banner-danger full-width (que empurrava a página). O sino vive no topo da barra navy — desktop no topo da sidebar (.alertbell-d), mobile na mtopbar (.alertbell-m) — e abre um popover com os MESMOS alertas. Só renderiza quando há alerta (o partial não emite markup vazio). Abre/fecha por JS (classe .is-open no wrapper), Esc e clique-fora. */ .alertbell { position: relative; display: inline-flex; flex: none; } /* Botão-sino: sobre a barra navy (idêntico nos dois temas) — cores fixas como os demais controles da sidebar/mtopbar. Alvo de toque ≥44px. */ .alertbell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; background: none; border: 0; border-radius: var(--radius); color: var(--nav-ink-2); cursor: pointer; } .alertbell-btn:hover { background: var(--nav-hover); } .alertbell.is-open .alertbell-btn { background: var(--nav-active); color: var(--nav-ink); } .alertbell-btn:focus-visible { outline: 2px solid var(--nav-focus); outline-offset: 2px; } .alertbell-ic { width: 22px; height: 22px; } /* Badge de contagem: vermelho urgente (mesma linguagem de .nav-badge), o sinal que o operador PRECISA notar sem a faixa gigante. */ .alertbell-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius); font-size: var(--fs-3xs); font-weight: 700; line-height: 16px; text-align: center; background: var(--badge-danger-bg); color: var(--on-solid); border: 1px solid var(--nav-bg); } /* Popover: superfície clara/escura (tokens), ancorado no sino. Nunca rola a página lateral (max-width limitado à viewport) nem quebra a barra. */ .alertbell-panel { position: absolute; z-index: 60; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-pop); padding: 8px; } .alertbell-head { padding: 6px 8px 8px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); } .alertbell-item { padding: 10px; border-radius: 6px; background: var(--bad-bg); border: 1px solid var(--bad-line); border-left: 3px solid var(--bad); } .alertbell-item + .alertbell-item { margin-top: 8px; } .alertbell-item-title { font-size: var(--fs-sm); font-weight: 700; color: var(--bad); margin-bottom: 4px; } .alertbell-item-body { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); word-break: break-word; } .alertbell-item-body a { color: var(--brand-2); text-decoration: underline; } /* Desktop: sino no topo da sidebar; popover cai logo abaixo, transbordando p/ o conteúdo (a sidebar tem z-index:30, então pinta acima do .content). */ .alertbell-d .alertbell-panel { top: calc(100% + 6px); left: 8px; } /* O sino de desktop não faz sentido dentro do drawer mobile — some ≤900px. */ @media (max-width: 900px) { .alertbell-d { display: none; } } /* O sino mobile vive na mtopbar (já display:none no desktop); trava por garantia. */ @media (min-width: 901px) { .alertbell-m { display: none; } } @media (max-width: 900px) { /* Mobile: popover fixo abaixo da barra, largura da tela, com rolagem própria se a lista crescer — nunca empurra nem rola a página lateralmente. */ .alertbell-m .alertbell-panel { position: fixed; top: calc(52px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; max-width: none; max-height: calc(100vh - 72px); overflow-y: auto; } } /* ---- flash ---- */ /* ── MOMENTO DE ERRO — o mesmo objeto nas duas superfícies ────────────────── Até a rodada 2, cliente e operador viam tratamentos DIFERENTES do mesmo evento: o portal com borda, 13.5px e fundo #fbe6e8; o painel sem borda, 14px e fundo #fbe4e6. A unificação NÃO seguiu "de quem é a classe" e sim o que se LÊ melhor, medido (WCAG): fundo #fbe6e8 → 5.41:1 contra --bad, contra 5.33:1 do #fbe4e6. Vence o mais legível — e é o do portal. corpo 14px → o portal lia a mensagem de ERRO meio pixel menor que o resto do texto da página. Erro não é nota de rodapé. borda 1px --bad-bd → sem ela o bloco é uma mancha de cor que se dissolve no fundo; com ela o aviso tem contorno e o olho acha onde começa. Mede 1.63:1 contra --panel: é reforço de FORMA, não o portador do significado (esse é o par texto/fundo, a 5.41:1) — por isso não é uma reprovação de 1.4.11. Raio: 8px nos dois. Aqui `var(--radius)` do painel e `var(--radius-sm)` do portal resolvem no MESMO 8px; o token é o do cartão de cada superfície. */ .flash { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: var(--fs-md); border: 1px solid transparent; } .flash-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); } .flash-error { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-bd); } .flash-info { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); } /* A ação DEU CERTO, mas o resultado tem ressalva (ex.: credencial reabilitada que volta sob contenção). Verde diria "pronto, siga"; vermelho diria "falhou", e não falhou — este é o terceiro caso, e ele precisa parar o olho. */ .flash-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); } /* ---- segredo exibido uma única vez ---- */ .reveal-box { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; } .reveal-box strong { color: var(--warn); } .reveal-box code { display: inline-block; background: var(--surface); border: 1px dashed var(--warn-line); padding: 4px 8px; border-radius: 6px; font-family: var(--mono); font-size: var(--fs-md); word-break: break-all; margin: 6px 0; } /* ---- cards ---- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; } /* ── DENSIDADE É DECISÃO DE ARQUITETURA DE INFORMAÇÃO, NÃO ACABAMENTO ─────── Correção aplicada depois da primeira leva da rodada 2. A regra da rodada ("portal manda em acabamento") tinha sido esticada até aqui e o `.card` do painel virou 20px + sombra + 18px de respiro, como o do portal. Isso não é acabamento. ACABAMENTO é cor, raio, borda, contraste — muda como o componente PARECE. DENSIDADE é padding e respiro — muda QUANTO CABE na tela, e isso é legitimamente diferente por superfície: o operador varre muitas linhas em muitas telas; o cliente lê uma coisa por vez. Medido antes de reverter, a 1400px: o cartão passava de 107px para 119px e ganhava 18px de margem — **+30px por cartão**. Contando `.card` por TOKEN de classe (a primeira contagem usou substring e inflou o número — `ops-card-link` não é `.card`), o pior caso é /tenants/:id com 5 cartões: **+150px, 7,5% da altura da página**; /domains e /inbound, +120px (6%). Numa página de 2010px isso é uma linha e meia de tabela que deixa de caber, em toda visita. Mesma categoria de `--radius` (8px aqui, 12px no portal): divergência DECLARADA, com motivo. Não "conserte" isto para igualar ao portal. ELEVAÇÃO segue o mesmo raciocínio e a mesma decisão: no painel, sombra é reservada a superfície FLUTUANTE (modal, dropdown). Cartão que não flutua não tem sombra — é o que está em produção e é o que a tela densa pede. */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .card .label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .card .value { font-size: var(--fs-6xl); font-weight: 700; margin-top: 2px; } .card .sub { font-size: var(--fs-xs); color: var(--muted); } .card.card-ok .value { color: var(--ok); } .card.card-warn .value { color: var(--warn); } .card.card-bad .value { color: var(--bad); } /* ---- painel genérico ---- */ .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; } .panel > h2:first-child, .panel > h3:first-child { margin-top: 0; } /* Painel de EVIDÊNCIA ruim (hoje: link malicioso na mensagem). Mesma caixa do .panel, com a moldura de alerta — este bloco existe justamente para NÃO ser lido como "mais um painel" na tela. Cor pelas variáveis (--bad-*), então o tema escuro vem de graça. */ .panel-bad { background: var(--bad-bg); border-color: var(--bad-line); } .panel-bad > h2:first-child { color: var(--bad); } /* ---- painel PRIVILEGIADO (só admin): colapsável, começa fechado ----
nativo. Acento âmbar SUTIL (fio à esquerda + fundo levemente tingido) = "cuidado, controles sensíveis" — sem pintar tudo. O é o cabeçalho clicável (cadeado + título + tag). */ details.panel-locked { border-left: 3px solid var(--warn); } .panel-lock-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; min-height: 44px; } .panel-lock-summary::-webkit-details-marker { display: none; } .panel-lock-summary h2 { margin: 0; display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .panel-lock-summary h2 .ic { width: 18px; height: 18px; flex: none; color: var(--warn); } .panel-lock-summary .lock-tag { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 1px 10px; border-radius: 999px; } .panel-lock-summary::after { content: "▾"; margin-left: auto; color: var(--warn); font-size: var(--fs-sm); line-height: 1; transition: rotate .15s ease; } details.panel-locked[open] .panel-lock-summary::after { rotate: 180deg; } .panel-lock-body { margin-top: 14px; } /* ---- tabelas ---- */ .table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; } tr:hover td { background: var(--surface-3); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td code, .mono { font-family: var(--mono); font-size: var(--fs-sm); } /* ---- badges ---- */ /* ── BADGE — o mesmo objeto nas duas superfícies (rodada 2) ────────────────── Divergiam em duas coisas: o painel não tinha BORDA (o portal tinha) e usava 12px contra 11px. Agora: borda como no portal — ela é o que separa o badge do fundo quando o tint é claro (o par texto/fundo continua sendo quem carrega o significado, a 5.1–5.8:1) — e 11px, o acabamento do portal. `white-space: nowrap` e `vertical-align: 1px` passam a existir nos dois: uma classe que quebra linha num arquivo e não no outro é a divergência silenciosa que o dono apontou. */ .badge { display: inline-block; font-size: var(--fs-2xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; vertical-align: 1px; white-space: nowrap; } /* Badge + carimbo de tempo («drift · há 26h») como UMA unidade: em célula estreita (~1400px) o «há Xh» quebrava sozinho para baixo do badge. Sem cor — só layout; existe nos DOIS arquivos (convenção das classes compartilhadas). */ .badge-since { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; } .badge-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-bd); } .badge-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bd); } .badge-bad { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-bd); } .badge-muted { background: var(--neutral-bg); color: var(--neutral); border: 1px solid var(--neutral-line); } .badge-info { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-bd); } /* Engajamento (Lido/Clicado): sucesso ALÉM da entrega — teal preenchido, salta do verde de "Entregue" sem gritar. Independe de var de tema (funciona claro/escuro). */ .badge-engaged { background: var(--engaged-bg); color: var(--on-solid); } /* Retida: estado ATIVO que não é erro — pede decisão humana, então puxa o olho sem virar o vermelho de falha. Gêmea de portal.css:3627, e existe aqui para o SSOT de `statusPresentation` poder apontar `frozen` para ela: enquanto a classe vivia em uma folha só, virar o mapa canônico deixaria o selo SEM ESTILO na tela do operador. É a mesma família de defeito que custou quatro consertos em 22/08 — a trilha de Retidas reconheceu o padrão e parou em vez de forçar, e esta linha é o que destrava a virada. */ .badge-held { background: var(--warn-solid); color: var(--on-warn); border: 1px solid var(--warn-bd); } /* ---- formulários ---- */ form.inline { display: inline; } label { display: block; font-size: var(--fs-sm); font-weight: 600; margin: 10px 0 4px; } label .hint { font-weight: 400; color: var(--muted); } /* `search` entrou na lista na rodada 5. As views usam `type="search"` em quatro lugares (filtro de IP, busca de mensagem) e ele NÃO casava com nenhum seletor daqui: aqueles quatro campos vinham crus do agente de usuário, com outro raio, outro respiro e outra borda que a do produto. Campo de busca que não parece campo do produto é o mesmo defeito de affordance por outro caminho. */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=url], input[type=search], select, textarea { width: 100%; max-width: 480px; padding: 8px 10px; border: 1px solid var(--field-border); border-radius: 6px; font: inherit; background: var(--panel); color: var(--text); } input:focus, select:focus, textarea:focus { border-color: var(--brand-2); } .form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .form-row > div { flex: 0 1 auto; } .checkbox-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; } .checkbox-row label { margin: 0; } button, .btn { display: inline-block; background: var(--accent); color: var(--accent-ink); border: none; border-radius: var(--btn-radius); padding: var(--btn-pad-y) var(--btn-pad-x); font: inherit; font-size: var(--btn-fs); cursor: pointer; min-height: var(--btn-min-h); } button:hover, .btn:hover { background: var(--accent-hover); text-decoration: none; } button.secondary, .btn.secondary { background: var(--surface); color: var(--brand-2); border: 1px solid var(--brand-2); } button.secondary:hover { background: var(--info-bg); } /* ── VERMELHO É PARA O IRREVERSÍVEL — a regra do dono, 07/08/2026 ─────────── ESTA VARIANTE TEM DONO E TEM PORTA. Antes desta data o vermelho era o acabamento de "ação séria", e isso é uma categoria que só cresce: 26 botões vermelhos nas duas superfícies, dos quais 13 desfaziam-se com um clique no botão vizinho. O gatilho foi /nodes — com os badges calados pelo kernel dos registros, os ONZE «Pausar outbound» viraram a coisa mais chamativa da tela, e pausar é `outboundPaused = 1`: o nó sai do sorteio, a mensagem defere, a fila segura. Nada se perde. É O MESMO ARGUMENTO DA CONFIRMAÇÃO, em cor. O documento de fluxo do dono diz que «confirmação para tudo treina a pessoa a clicar sim sem ler»; vermelho para tudo treina o olho a não ver vermelho. O custo não se paga na tela que ficou espalhafatosa — paga-se no dia do ato que destrói mesmo, quando o olho já não distingue. A PERGUNTA, ÚNICA, ANTES DE ESCREVER `danger` NUM BOTÃO: depois de clicar, dá para voltar ao estado anterior SEM PERDA? Operacionalmente ela quase sempre já está respondida no SQL da rota: · UPDATE simétrico de flag (pausar/retomar, ligar/desligar, suspender/ reativar, congelar/liberar) → volta → SECUNDÁRIO, e a confirmação FICA. Consequência operacional séria não muda a resposta: derrubar o envio de um cliente inteiro é grave e é reversível. · DELETE de linha, UPDATE de status sem rota de volta, sobrescrita de segredo, descarte de chave → não volta → VERMELHO. Duvidoso não se resolve na folha de estilo: fica como está e vai para o dono. A COR NUNCA É O ÚNICO PORTADOR. O rótulo já diz o verbo («Remover domínio», «Revogar»), a confirmação diz a consequência, e as duas irreversíveis mais caras (remover domínio no portal, cancelar conta) ainda exigem digitar o nome exato. O vermelho é o quarto sinal, não o primeiro — é por isso que tirá-lo de onde não cabe não tira informação de ninguém. ONDE ISTO É VETADO: test/vermelhoIrreversivel.test.js congela o inventário dos botões vermelhos das duas superfícies. Botão vermelho novo reprova até entrar no inventário com a justificativa escrita. Documento não veta. */ button.danger { background: var(--bad); } /* #000 aqui NÃO é cor de paleta: é o operando de ESCURECIMENTO do color-mix ("78% do vermelho, 22% de preto"). Trocá-lo por um token seria fingir que a operação matemática é uma escolha de marca. Declarado. */ button.danger:hover { background: color-mix(in srgb, var(--bad) 78%, #000); } /* `button.small` é o botão de CÉLULA DE AÇÃO — o mais repetido do painel: 30 ocorrências em /settings, 22 em /domains/:id, 18 em /messages. Medido, os tokens de `.btn-sm` o levavam de 26px para 32px de altura: +6px × 30 numa tela é densidade de tabela, não acabamento. Volta ao tamanho de produção; 4px e 10px estão na rampa de espaço e o tipo continua vindo da escala. (Dívida conhecida e declarada: o painel tem DOIS tamanhos de botão pequeno, `button.small` e `.btn-sm`. Unificá-los é trabalho do redesenho de tabela, não desta rodada — ver o relatório.) */ button.small { padding: 4px 10px; font-size: var(--fs-xs); } button[data-copy] { background: var(--surface); color: var(--brand-2); border: 1px solid var(--border); } /* Alvos de toque densos do painel ficam compactos (min-height 44 é para os controles primários e para a nav; tabelas/inline preservam a densidade). */ button.small, .btn.small, button[data-copy], .btn-link, .btn-inline, .modal-x, .pw-eye, .tier-form button, .inline-quota button, .actions-cell button, .actions-cell .btn { min-height: 0; } .btn-link, .btn-inline { display: inline; } /* ── ESTADO DESABILITADO — reposição de affordance ────────────────────────── O NAVEGADOR DESENHA ISTO DE GRAÇA. Um