/* ecommerce-enhance — aprimoramentos de frontend (5 waves) · brasilgeo.ai/ecommerce Gerado por scripts/ecommerce-enhance/build-enhance.mjs — NÃO editar à mão. Edite os módulos em scripts/ecommerce-enhance/src/ e rode: node build-enhance.mjs */ /* ===== w1-a11y.css ===== */ /* w1-a11y.css — WAVE 1 (Acessibilidade & Fundacao) do portal /ecommerce. Camada universal, aditiva e defensiva injetada no das 182 paginas (familias A e B). Entrega: skip-link de alto contraste, foco sempre visivel, scroll-margin para header sticky, realce de :target, alvos de toque 44x44, color-scheme nativo e rede de seguranca de reduced-motion. Regras: contraste WCAG AA nos 2 temas; !important so em resets de a11y; nunca usar seletor universal `*`; toda animacao com guard de motion. Cor de marca com fallback encadeado: --color-brand (familia B) -> --brand (familia A) -> #0166c4. */ /* ---- Esquema de cores nativo (scrollbar, inputs, controles do SO) ---- */ :root { color-scheme: light dark; } /* ---- Skip-link universal ----------------------------------------------- Serve tanto ao skip-link nativo da familia B (a[href="#conteudo"]) quanto ao injetado pelo JS na familia A (.ec-skip / a[href="#main"]). sr-only por padrao; torna-se visivel e contrastante ao receber foco. */ a.ec-skip, a[href="#conteudo"].ec-skip, a[href="#conteudo"]:not(.ec-skip), a[href="#main"] { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 100000; /* Cor de marca com fallback; texto branco garante AA sobre azul/indigo. */ background: var(--color-brand, var(--brand, #0166c4)) !important; color: #ffffff !important; padding: 0.75rem 1.15rem; border-radius: 0.5rem; font: 600 1rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } a.ec-skip:focus, a.ec-skip:focus-visible, a[href="#conteudo"]:focus, a[href="#conteudo"]:focus-visible, a[href="#main"]:focus, a[href="#main"]:focus-visible { position: fixed !important; left: 1rem !important; top: 1rem !important; width: auto !important; height: auto !important; overflow: visible !important; outline: 3px solid #ffffff !important; outline-offset: 2px !important; } /* ---- Foco sempre visivel e harmonizado -------------------------------- Outline de alta visibilidade nos 2 temas. Usa color-mix sobre currentColor para herdar e contrastar; fallback para a cor de marca em navegadores sem color-mix. !important permitido (reset de a11y). */ :is(a, button, summary, [tabindex], input, textarea, select, [role="button"]):focus-visible { outline: 3px solid var(--color-brand, var(--brand, #0166c4)) !important; outline-offset: 2px !important; border-radius: 4px; } @supports (outline-color: color-mix(in srgb, red, blue)) { :is(a, button, summary, [tabindex], input, textarea, select, [role="button"]):focus-visible { /* Mistura a cor de marca com o texto atual para garantir contraste em fundos claros e escuros sem cor fixa. */ outline-color: color-mix( in srgb, var(--color-brand, var(--brand, #0166c4)) 70%, currentColor ) !important; } } /* Conservador: nao remover foco de quem usa teclado. So neutraliza o anel para ponteiro (mouse/touch), preservando :focus-visible. */ :is(a, button, summary, [tabindex], input, textarea, select, [role="button"]):focus:not(:focus-visible) { outline: none; } /* ---- scroll-margin para header sticky nao cobrir ancoras --------------- */ :where(h1, h2, h3, h4, [id]) { scroll-margin-top: calc(var(--ee-header-height, 4rem) + 1rem); } :target { scroll-margin-top: calc(var(--ee-header-height, 4rem) + 1rem); } /* Realce temporario do alvo de ancora (com guard de motion mais abaixo). */ :target { outline: 2px solid color-mix( in srgb, var(--color-brand, var(--brand, #0166c4)) 60%, transparent ); outline-offset: 3px; border-radius: 4px; animation: ec-target-fade 2.2s ease-out 1; } @keyframes ec-target-fade { 0% { outline-color: var(--color-brand, var(--brand, #0166c4)); background-color: color-mix( in srgb, var(--color-brand, var(--brand, #0166c4)) 14%, transparent ); } 100% { outline-color: transparent; background-color: transparent; } } /* ---- Rolagem suave somente fora de reduced-motion --------------------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ---- Alvos de toque >= 44x44 em elementos de UI (nao em texto corrido) - Atua apenas em links de navegacao/sumario, nunca em links inline de paragrafo, para nao inflar a tipografia do corpo. */ .oc-toc a, .oc-rail-link, .oc-tr-step a { display: inline-flex; align-items: center; min-height: 44px; } /* Preserva display e fluxo dos cards/links editoriais dentro de nav. */ .hd .nav-btn, .hd .mega-grp a, .hd .drawer .dl a, [data-header] .menu-btn, .drawer-links a, .mega-cluster, .oc-mini-nav a { min-height: 44px; } /* ---- Rede de seguranca de reduced-motion ------------------------------ Catch-all conservador: encurta (nao remove abruptamente) qualquer animacao/transicao quando o usuario pede menos movimento. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } :target { animation: none; } :where(a, button, summary, [tabindex], input, textarea, select, [role="button"], details, dialog) { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== w2-layout.css ===== */ /* w2-layout.css — WAVE 2 (Responsividade & Robustez de Layout) do portal /ecommerce. Camada universal, aditiva e defensiva injetada no das 182 paginas (familias A e B). Entrega: defesa contra overflow horizontal, quebra robusta de palavras/titulos, hifenizacao PT-BR no corpo, tabelas roláveis com indicadores de scroll e foco navegável por teclado, iframes/imagens fluidas. Regras: contraste WCAG AA nos 2 temas; nunca usar seletor universal `*`; `!important` apenas onde é estritamente necessário para vencer overflow herdado; toda animacao com guard de prefers-reduced-motion. Cor de marca com fallback encadeado: --color-brand (familia B) -> --brand (familia A) -> #0166c4. IMPORTANTE: nao reseta box/cores com `*` para nao quebrar data-astro-cid-* da familia B; usa :where()/:is() (especificidade 0) para nunca sobrescrever max-width/grids que já funcionam. */ /* ---- Defesa universal contra overflow horizontal ----------------------- `clip` preserva position:sticky (diferente de `hidden`, que cria scroll container). Sem !important: usa a cascata natural; serve só de rede de seguranca quando nada mais define overflow no eixo X. */ html, body { overflow-x: clip; } /* Mídia e blocos largos nunca estouram o container. `max-width:100%` em :where() (especificidade 0) não vence regras de layout já existentes; atua só onde não há regra. height:auto preserva proporção das imagens. */ :where(img, svg, video, canvas, iframe, table, pre, code) { max-width: 100%; } :where(img, video) { height: auto; } :where(pre) { overflow: auto; } :where(iframe) { width: 100%; } /* Placeholder leve enquanto a imagem carrega (raster); SVG inline ignora. color-mix adapta aos 2 temas via currentColor. Não força aspect-ratio (desconhecido) para evitar reflow incorreto. */ :where(img) { background: color-mix(in srgb, currentColor 6%, transparent); } /* ---- Quebra robusta de texto longo ------------------------------------ Palavras longas (URLs, termos técnicos) quebram em vez de estourar. */ :where(p, li, figcaption) { overflow-wrap: break-word; } :where(h1, h2, h3) { overflow-wrap: anywhere; text-wrap: balance; } :where(p, li) { text-wrap: pretty; } /* Hifenizacao PT-BR somente no corpo de leitura (lang já é pt-BR nas pgs). Restrita a contextos de prosa para nao hifenizar rótulos/UI. */ :where(.oc-body, .guia-corpo) :where(p) { hyphens: auto; } /* ---- min-width:0 conservador em itens de grid/flex -------------------- Sem min-width:0, um filho com conteúdo largo (tabela, pre) força o item a transbordar a coluna. Escopo deliberadamente estreito aos cards/figuras conhecidos dentro dos contêineres de conteúdo. */ :where(.oc-body, .wrap, main) :where(.oc-card, .ts-card, .vz-cc, figure) { min-width: 0; } /* ---- Tabelas roláveis (wrapper .ee-table-scroll criado pelo JS) ------- Aplica-se apenas a tabelas que ainda não tinham wrapper .ec-table-wrap. O JS move a para dentro de div.ee-table-scroll, marca tabindex=0 e role=region. As regras abaixo dão o scroll horizontal, indicadores de sombra e foco navegável. */ .ee-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 0 0 1rem; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 12px; } /* Foco visível quando navegado por teclado (a região recebe tabindex=0). */ .ee-table-scroll:focus-visible { outline: 3px solid var(--color-brand, var(--brand, #0166c4)); outline-offset: 2px; } /* Indicadores de scroll (sombras laterais) via técnica de gradientes com background-attachment:local + cobertura branca local. As sombras só aparecem quando há conteúdo escondido à esquerda/direita. Exibidas apenas quando o JS confirma overflow real (data-ee-scrollable). A "cobertura" usa a cor de fundo da página (Canvas) para mascarar a sombra nas extremidades; Canvas adapta-se a claro/escuro nativamente. */ .ee-table-scroll[data-ee-scrollable="true"] { background: linear-gradient(to right, Canvas 30%, transparent), linear-gradient(to right, transparent, Canvas 70%) 100% 0, radial-gradient(farthest-side at 0 50%, color-mix(in srgb, currentColor 22%, transparent), transparent), radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, currentColor 22%, transparent), transparent) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } /* A
embrulhada pelo JS: garante largura mínima útil para forçar o scroll em telas estreitas e tipografia/colapso de borda consistentes. */ .ee-table-scroll > table { width: 100%; min-width: 480px; border-collapse: collapse; margin: 0; } .ee-table-scroll > table th, .ee-table-scroll > table td { padding: 0.6rem 0.8rem; vertical-align: top; text-align: left; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); } /* Header com leve destaque que adapta aos 2 temas (sem cor fixa). */ .ee-table-scroll > table thead th { font-weight: 700; background: color-mix(in srgb, currentColor 7%, transparent); } /* Zebra leve, adaptativa, com contraste suficiente nos 2 temas. */ .ee-table-scroll > table tbody tr:nth-child(even) td { background: color-mix(in srgb, currentColor 4%, transparent); } .ee-table-scroll > table tr:last-child td { border-bottom: none; } /* Cabeçalho fixo no topo do scroll vertical (quando a tabela é alta); guardado para não fixar em quem prefere menos movimento de layout. */ @media (prefers-reduced-motion: no-preference) { .ee-table-scroll > table thead th { position: sticky; top: 0; z-index: 1; } } /* ---- Guard de reduced-motion ------------------------------------------ Mantém o scroll suave de inércia desligado quando o usuário pede menos movimento (a rolagem em si continua funcional). */ @media (prefers-reduced-motion: reduce) { .ee-table-scroll { scroll-behavior: auto; } } /* Correções verificadas na auditoria de setembro de 2026. As grades preservam sua largura preferida, mas cabem também no espaço disponível a 320px e com zoom. O conteúdo largo continua rolável localmente. */ .oc-cards, .fn-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .mc-grid, .ts-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .mc-grid-inline, .mc-passos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .ca-hub { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } .oc-toc ul, .oc-related-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .vz-ccs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } .vz-nums, .ca-results { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } .vz-bar-leg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .bv-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } /* Filhos de flex/grid precisam poder encolher antes de quebrar o texto. A matriz mantém dois eixos e quatro quadrantes; não perde sua semântica. */ .viz, .viz-inline, .viz-astro, .viz-wrap, .vz-step-tx, .vz-rung-tx, .vz-ly-tx, .vz-cy-tx, .vz-sw-tx, .vz-destaque > div, .oc-rcard, .oc-card, .fn-card, .mc-card, .ts-card, .ca-panel { min-width: 0; } .viz :is(strong, .vz-src, .vz-step-tx, .vz-rung-tx, .vz-ly-tx, .vz-cy-tx, .vz-d-body), .oc-rcard, .oc-tr-head, .oc-tr-nav span { overflow-wrap: anywhere; } .vz-mx { grid-template-columns: auto minmax(0, 1fr); } .vz-mx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vz-q { min-width: 0; overflow-wrap: anywhere; } .vz-mx-xl, .vz-mx-xr { max-width: 48%; overflow-wrap: anywhere; } .vz-mx-xr { text-align: right; } .ec-table-wrap, .ee-table-scroll, .vz-barras-scroll, .vz-sw-scroll, .vz-hm-scroll, .vz-cp-scroll { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; } /* O parágrafo continha texto solto entre filhos flex, produzindo colunas comprimidas no celular. O fluxo de texto preserva o link dentro da frase. */ .oc-glosslink { display: block; } .oc-glosslink :is(i, svg) { display: inline-block; width: 1rem; height: 1rem; margin-right: .35rem; vertical-align: -.15em; } .oc-tr-head { flex-wrap: wrap; } /* Herda a marca Astro. A declaração anterior referenciava a própria variável no mesmo elemento, invalidando o token e os fundos derivados em 110 páginas. */ .viz-astro { --color-brand: inherit; } @media (max-width: 640px) { .vz-rung { flex-wrap: wrap; align-items: flex-start; } .vz-rung-tx { flex: 1 1 calc(100% - 3rem); } .vz-rung-tag { margin-left: 2.35rem; } .oc-tr-pos { white-space: nowrap; } .vz-rosca .vz-rosca-svg { width: 108px; height: 108px; } } /* Os visuais foram inseridos entre o ícone e o título em cabeçalhos flex. Uma linha exclusiva para a figura evita empurrar o título para fora da tela. */ .flex:has(> .viz-astro, > .viz-wrap, > .viz) { flex-wrap: wrap; } .flex:has(> .viz-astro, > .viz-wrap, > .viz) > :is(h2, h3) { min-width: 0; flex: 1 1 0; } /* O cabeçalho Astro tem nove entradas e busca. Duas linhas deixam a busca acessível e preservam o tamanho dos rótulos. O painel usa o header como referência, evitando transbordamento dos menus das pontas. */ [data-header] > nav { flex-wrap: wrap; max-width: 1600px; } [data-header] > nav > ul { order: 3; flex: 1 1 100%; min-width: 0; margin-left: 0; justify-content: space-between; } [data-header] .menu-item { position: static; } [data-header] .menu-btn { min-height: 44px; max-width: 100%; line-height: 1.3; } [data-header] .busca-btn { width: 250px; flex-shrink: 0; min-height: 44px; } [data-header] .mega { left: 50%; top: 100%; max-width: calc(100vw - 2rem); max-height: calc(100dvh - var(--ee-header-height, 9rem) - 1rem); overflow-y: auto; overscroll-behavior: contain; } .hd .mega { max-height: calc(100dvh - var(--ee-header-height, 4rem)); overflow-y: auto; overscroll-behavior: contain; } .hd-in > .brand, .hero-grid > div, .flowcard, .flow-step > div { min-width: 0; } .hd .burger { flex: 0 0 44px; width: 44px; height: 44px; } .hero .eyebrow, .hero .btn, .prod-card .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } @media (min-width: 1024px) and (max-width: 1099px) { [data-header] > nav > ul, [data-header] .busca-btn { display: none; } [data-header] [data-open-search]:not(.busca-btn), [data-header] [data-drawer-toggle] { display: grid; } } @media (max-width: 1100px) { .hd .nav { display: none; } .hd .burger { display: block; } } @media (max-width: 900px) { .hero-grid .flowcard { order: 0; max-width: 100%; } } @media (max-width: 600px) { .hd-in > .btn { display: none; } .hd-in { gap: .75rem; } .hero-cta .btn { width: 100%; justify-content: center; text-align: center; } } /* Os mínimos fixos do mapa e do playbook excediam os 305px úteis de um viewport de 320px com barra de rolagem do sistema. */ .mp-body { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .mp-trans-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .mp-pillar { min-width: 0; } body:has(> .topbar) { min-width: 0; } /* Tabelas equivalentes de gráficos são mantidas para leitores de tela. O mínimo de uma tabela visual não pode ampliar a alternativa oculta. */ .ee-table-scroll > table:is(.sr-only, .visually-hidden) { min-width: 0; } @media (max-width: 640px) { .geo-nav { flex-wrap: wrap; gap: .4rem 1rem; } .geo-nav-brand { flex-shrink: 0; white-space: nowrap; } .geo-nav-links { flex-wrap: wrap; gap: .25rem 1rem; } .geo-nav-links a { white-space: nowrap; } } /* A grade do glossário respeita a coluna útil em telas de 320px. */ .gl-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .gl-term { min-width: 0; } /* O rótulo longo do glossário não pode expulsar a busca da barra de leitura. */ @media (max-width:480px) { .oc-mini-crumb {min-width:0;max-width:42vw;overflow:hidden;text-overflow:ellipsis;} } /* ===== w3-dataviz.css ===== */ /* w3-dataviz.css — WAVE 3 (Dataviz Cockpit & Polish de Componentes) do portal /ecommerce. Camada universal, ADITIVA e de BAIXA especificidade injetada no das 182 paginas (familia A: onclick/teses/etc. com --ink/--paper/--brand; familia B: guias/ Astro com --color-* e data-astro-cid-*). Principio do dono (cockpit de decisao): nenhum dado depende SO de cor — sempre cor + seta/icone + numero. Bullet > gauge. tabular-nums. Regras observadas: - Acentuacao PT-BR em strings visiveis/aria; ZERO emojis. - Contraste WCAG AA nos 2 temas; semanticas (positivo/negativo/atencao) CLAREIAM no dark. - Tokens proprios com prefixo --ee-* definidos em :root e reescritos para o dark via @media (prefers-color-scheme:dark) E via [data-oc-theme="dark"] (toggle manual da familia A). - Sem seletor universal `*`. Sem !important em cor. Animacao com guard de reduced-motion. - Nao reescreve componentes existentes: REFORCA com seletores simples e :where() controlado. - Marca: var(--color-brand, var(--brand, #0166c4)). Texto: var(--color-text, var(--ink, #181818)). Superficie: var(--color-bg, var(--paper, #fff)) e var(--color-bg-section). */ /* ===================================================================== 1. Tokens semanticos proprios (--ee-*) que adaptam aos 2 temas. Valores claros (light) com bom contraste sobre fundo branco; no dark eles CLAREIAM para manter AA sobre fundo escuro. color-mix garante uma superficie tonal sutil derivada da propria semantica. ===================================================================== */ :root { --ee-brand: var(--color-brand, var(--brand, #0166c4)); --ee-ink: var(--color-text, var(--ink, #181818)); --ee-good: #1f7a45; /* verde escuro AA sobre claro */ --ee-bad: #c0341d; /* vermelho AA sobre claro */ --ee-warn: #9a6400; /* ambar/marrom AA sobre claro */ --ee-info: var(--ee-brand); /* Superficie neutra derivada do texto, util para faixas/realces sutis. */ --ee-surface: color-mix(in srgb, var(--ee-ink) 5%, transparent); /* Sombras coerentes nos 2 temas. */ --ee-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10); --ee-shadow-2: 0 10px 28px rgba(16, 24, 40, 0.14); } /* Dark automatico (familia A e B usam data-theme-mode="auto"). */ @media (prefers-color-scheme: dark) { :root[data-theme-mode="auto"] { --ee-good: #5fd99a; /* clareia no dark */ --ee-bad: #ff8a73; --ee-warn: #f0c267; --ee-surface: color-mix(in srgb, var(--ee-ink) 12%, transparent); --ee-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.55); --ee-shadow-2: 0 12px 30px rgba(0, 0, 0, 0.55); } } /* Dark manual (toggle da familia A: :root[data-oc-theme="dark"]). */ :root[data-oc-theme="dark"] { --ee-good: #5fd99a; --ee-bad: #ff8a73; --ee-warn: #f0c267; --ee-surface: color-mix(in srgb, var(--ee-ink) 12%, transparent); --ee-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.55); --ee-shadow-2: 0 12px 30px rgba(0, 0, 0, 0.55); } /* Light manual explicito reverte para os valores claros (se o usuario forcar light num SO em dark, nao herda os tons claros do @media acima). */ :root[data-oc-theme="light"] { --ee-good: #1f7a45; --ee-bad: #c0341d; --ee-warn: #9a6400; --ee-surface: color-mix(in srgb, var(--ee-ink) 5%, transparent); } /* Fallback de superficie sem color-mix (navegadores antigos). */ @supports not (color: color-mix(in srgb, red, blue)) { :root { --ee-surface: rgba(24, 24, 24, 0.05); } } /* ===================================================================== 2. tabular-nums em numeros (nao herdado por padrao). Aplica figuras de largura fixa onde ha leitura comparativa de numeros, sem tocar a cor. :where() mantem especificidade ZERO p/ nao brigar com o CSS scoped do Astro. ===================================================================== */ :where(.oc-kpi, .statcounter, .vz-num, .vz-mt, .vz-num-n, .statcounter-num, .statcounter-value) :where(.num, [class*="value"], [class*="-num"], [class*="-n"], strong, b), :where(.vz-num-n, .vz-mt-val, .statcounter-num, .statcounter-value), :where(.ee-tnum) { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Celulas numericas de tabela: alinhamento e tabular-nums apenas quando marcadas pelo JS como numericas (evita afetar colunas de texto). */ :where(.ec-table) td.ee-numcell, :where(.ec-table) th.ee-numcell { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; text-align: right; } /* ===================================================================== 3. Polish de cards (.oc-card, .ts-card, .vz-cc): borda/sombra/raio que adaptam aos 2 temas; elevacao leve no hover/focus-within (guard motion). NAO altera cor de texto. Baixa especificidade. ===================================================================== */ :where(.oc-card, .ts-card, .vz-cc) { border-color: color-mix(in srgb, var(--ee-ink) 12%, var(--color-border-light, transparent)); box-shadow: var(--ee-shadow-1); transition: transform 0.16s ease, box-shadow 0.18s ease, border-color 0.18s ease; } @media (prefers-reduced-motion: no-preference) { :where(.oc-card, .ts-card):hover, :where(.oc-card, .ts-card):focus-within, :where(.vz-cc):hover { transform: translateY(-2px); box-shadow: var(--ee-shadow-2); border-color: color-mix(in srgb, var(--ee-brand) 38%, transparent); } } @media (prefers-reduced-motion: reduce) { :where(.oc-card, .ts-card):hover, :where(.oc-card, .ts-card):focus-within, :where(.vz-cc):hover { box-shadow: var(--ee-shadow-2); border-color: color-mix(in srgb, var(--ee-brand) 38%, transparent); } } /* ===================================================================== 4. KPIs (.oc-kpi) — reforco de layout claro: rotulo + valor grande tabular + delta. A marca lateral ::before ja existe na familia A; aqui so garantimos respiro e que o valor respire. NAO sobrescrevemos cores. ===================================================================== */ :where(.oc-kpi) { display: flex; flex-direction: column; gap: 0.2rem; } /* Valor grande quando o autor usa .ee-kpi-value (opt-in, nao quebra markup atual). */ :where(.oc-kpi) .ee-kpi-value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--ee-ink); font-variant-numeric: tabular-nums; } /* ---- Utilitarios de delta: cor + ICONE de seta + sinal + numero ---- Nunca SO cor: a seta (caractere acessivel, aria-hidden no markup) garante leitura sem cor. O sinal textual fica a cargo do conteudo. */ .ee-delta { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 0.1rem 0.45rem; white-space: nowrap; } .ee-delta::before { font-weight: 900; font-size: 0.9em; line-height: 1; } .ee-delta--up { color: var(--ee-good); background: color-mix(in srgb, var(--ee-good) 14%, transparent); } .ee-delta--up::before { content: "\2191"; } /* seta para cima */ .ee-delta--down { color: var(--ee-bad); background: color-mix(in srgb, var(--ee-bad) 14%, transparent); } .ee-delta--down::before { content: "\2193"; } /* seta para baixo */ .ee-delta--flat { color: var(--color-text-secondary, var(--ee-ink)); background: var(--ee-surface); } .ee-delta--flat::before { content: "\2192"; } /* seta lateral (estavel) */ /* ===================================================================== 5. Reforco dos visuais .viz / .vz-* — respiro, legibilidade, contraste de borda e a fonte (.vz-src) discreta porem legivel. Sem tocar cores de texto principais; apenas reforca o que pode ficar pequeno demais. ===================================================================== */ :where(.viz) { box-shadow: var(--ee-shadow-1); } /* Fonte/legenda discreta porem com contraste AA garantido. */ :where(.vz-src), :where(.viz figcaption) { font-size: 0.78rem; line-height: 1.5; color: color-mix(in srgb, var(--ee-ink) 62%, transparent); } /* Garante tamanho minimo legivel (>=14px) em textos auxiliares dos visuais. */ :where(.vz-num-r, .vz-cc span, .vz-mt-nota, .vz-step-tx span, .vz-rung-tx span) { font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem); } /* Medidor .vz-mt (bullet/barra): o nivel ja vem legivel em .vz-mt-val; aqui so reforcamos contraste do trilho e da legenda, e tabular-nums no valor. */ :where(.vz-mt-val) { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } :where(.vz-mt-track) { border-color: color-mix(in srgb, var(--ee-ink) 16%, var(--color-border-light, transparent)); } /* Barra entra com animacao de largura SO fora de reduced-motion; nunca esconde o valor (que e textual e independe da barra). */ @media (prefers-reduced-motion: no-preference) { :where(.vz-mt-fill) { transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); } } /* Escada de maturidade .vz-rung: a etiqueta .vz-rung-tag e o numero .vz-rung-n ja indicam o nivel sem depender de cor. Reforco de contraste da etiqueta. */ :where(.vz-rung-tag) { border: 1px solid color-mix(in srgb, var(--ee-brand) 28%, transparent); } /* Faixa de numeros .vz-num: leve realce de superficie e respiro. */ :where(.vz-num) { box-shadow: var(--ee-shadow-1); } /* ===================================================================== 6. Tabelas de comparacao Sim/Nao/Parcial: utilitarios marcados pelo JS. Icone (check/x/travessao) ANTES do texto, garantindo leitura sem cor. O JS adiciona um com o glifo + a classe; o texto visivel permanece. Cores CLAREIAM no dark. ===================================================================== */ :where(.ee-yes, .ee-no, .ee-partial) { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; } :where(.ee-yes) { color: var(--ee-good); } :where(.ee-no) { color: var(--ee-bad); } :where(.ee-partial) { color: var(--ee-warn); } /* O glifo e fornecido pelo JS num