/* a11y.css — acessibilidade sistêmica (Eixo F / WCAG 2.2 AA). Camada transversal: foco visível por teclado + respeito a reduced-motion. Carregar por ÚLTIMO para vencer estilos que removem outline. */ /* ── Foco visível por teclado (WCAG 2.4.7 / 2.4.11) ─────────────────────────── :focus-visible só dispara em navegação por teclado — não polui o clique de mouse. Aplicado a tudo que é interativo, inclusive elementos que zeram outline. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [role="option"]:focus-visible, [tabindex]:focus-visible, .nav-item:focus-visible, .btn:focus-visible, .cmdbar-item:focus-visible { outline: 2px solid var(--accent, #34d399) !important; outline-offset: 2px !important; border-radius: 4px; } /* Foco dentro de campos de formulário: realce de borda além do outline */ .form-input:focus-visible { outline: 2px solid var(--accent, #34d399) !important; outline-offset: 1px !important; } /* Não remover o anel de foco quando o usuário navega por teclado mesmo que um reset anterior tenha feito outline:none. */ :focus-visible { outline-color: var(--accent, #34d399); } /* Skip-link utilitário (se algum dia adicionarmos no topo do main) */ .a11y-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--accent, #34d399); color: #03110b; padding: 8px 14px; border-radius: 0 0 8px 0; font-weight: 600; } .a11y-skip-link:focus { left: 0; } /* ── prefers-reduced-motion (WCAG 2.3.3 / 2.2.2) ────────────────────────────── Usuários que pedem menos movimento: neutraliza animações/transições longas e o auto-scroll do ticker da landing. Mantém opacidade/cor instantâneas. MOTION OVERRIDE (05/07/2026): todo bloco redutor é guardado por html:not([data-motion="force"]). O produto é animado por design e o dono pediu animação SEMPRE — um snippet no do shell seta data-motion="force" por padrão (opt-out: localStorage cmd_motion='auto'). Antes do SaaS: inverter o default e expor como toggle por usuário. */ @media (prefers-reduced-motion: reduce) { html:not([data-motion="force"]) *, html:not([data-motion="force"]) *::before, html:not([data-motion="force"]) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html:not([data-motion="force"]) .ticker-track, html:not([data-motion="force"]) .cmdbar-overlay, html:not([data-motion="force"]) .cmdbar-panel { animation: none !important; transition: none !important; } } /* ── Exceção: indicadores FUNCIONAIS sobrevivem ao reduced-motion ───────────── O blanket acima zera animation-duration/iteration em TUDO (*), o que congelava também spinners de carregamento, skeletons e o indicador de streaming do chat. Um spinner parado *engana*: parece que o sistema travou. A WCAG 2.3.3 mira movimento decorativo/de grande amplitude — não indicadores de progresso, que são feedback de estado legítimo. Aqui reativamos só os indicadores de atividade; o movimento decorativo (pulse/aurora/glow/parallax) segue suprimido. Seletores de classe vencem o `*` do blanket por especificidade (mesmo origin), então não precisamos mexer no kill-switch acima. */ @media (prefers-reduced-motion: reduce) { /* Spinners (rotação contínua de carregamento) */ [class*="spinner"], #chart-loading-overlay::before, .news-loading-spinner svg circle { animation-duration: 0.7s !important; animation-iteration-count: infinite !important; } /* Skeletons / shimmer (placeholder de conteúdo carregando) */ [class*="skeleton"], [class*="skeleton"] > *, .skeleton, .sk-body, .compare-skeleton { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; } /* Chat: indicador "digitando" + cursor de streaming da resposta */ .chat-typing .typing-dots span { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; } .chat-streaming-cursor::after { animation-duration: 0.75s !important; animation-iteration-count: infinite !important; } } /* Override pontual de contraste (Eixo F): roxo #a855f7 sobre bg roxo-escuro reprovava por 0.06 (4.44 vs 4.5). Texto levemente mais claro passa AA. */ #btn-retrain-all { color: #b674fc !important; }