/* ═══════════════════════════════════════════════════════════════ ApoioTEA — Camada de acessibilidade sensorial ═══════════════════════════════════════════════════════════════ Carregue DEPOIS do design system: esta folha sobrescreve tokens. O que motiva cada regra aqui não é preferência estética. Autismo envolve diferenças de processamento sensorial: uma animação de brilho, um som de acerto, um vermelho saturado podem levar à sobrecarga — e sobrecarga encerra a sessão. Cada ajuste abaixo remove uma dessas fontes. Os atributos são aplicados na tag pelo middleware ShareAccessibilityPreferences, a partir do perfil salvo do usuário. ═══════════════════════════════════════════════════════════════ */ /* ── Escala de texto ───────────────────────────────────────────── --text-scale vem do perfil (0.8 a 2.0). Reduz a fonte-base em vez de dar zoom na página, para o layout continuar respondendo normalmente. */ html { font-size: calc(16px * var(--text-scale, 1)); } /* ── Movimento reduzido ────────────────────────────────────────── Respeita tanto a escolha explícita no app quanto a do sistema operacional. Quem já configurou o aparelho não deveria ter de configurar de novo aqui. */ [data-reduce-motion="1"], [data-reduce-motion="1"] *, [data-reduce-motion="1"] *::before, [data-reduce-motion="1"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── Baixo estímulo ────────────────────────────────────────────── Dessatura a paleta, elimina degradês, sombras e brilhos. A interface fica visualmente monótona de propósito: a atenção vai para a tarefa, não para a decoração. */ [data-low-stimulus="1"] { --ds-primary: #4A7C78; --ds-primary-light: #6FA39E; --ds-primary-lighter: #E3EDEC; --ds-accent: #7A7FA8; --ds-success: #6B9B85; --ds-warning: #B89A6B; --ds-danger: #B07E7E; --ds-info: #7891AE; --ds-bg: #F4F6F7; --ds-bg-card: #FFFFFF; } [data-low-stimulus="1"] * { background-image: none !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; } [data-low-stimulus="1"] .card, [data-low-stimulus="1"] .ds-card { border: 1px solid var(--ds-border); } /* Confete, pulsação e brilho de recompensa saem por completo: são exatamente o tipo de estímulo que causa sobrecarga. */ [data-low-stimulus="1"] .confetti, [data-low-stimulus="1"] .celebration, [data-low-stimulus="1"] .sparkle, [data-low-stimulus="1"] [data-decorative="true"] { display: none !important; } /* ── Alto contraste ────────────────────────────────────────────── Para baixa visão e para ambientes com muita luz. Vai além do mínimo da WCAG AA porque o uso real inclui tela de celular ao sol. */ [data-high-contrast="1"] { --ds-bg: #FFFFFF; --ds-bg-card: #FFFFFF; --ds-text: #000000; --ds-text-secondary: #1A1A1A; --ds-text-muted: #333333; --ds-border: #000000; --ds-primary: #005A54; --ds-danger: #B3000F; --ds-success: #0A5C32; --ds-info: #00408F; --ds-warning: #7A4E00; } [data-high-contrast="1"] * { border-color: currentColor; } [data-high-contrast="1"] a, [data-high-contrast="1"] button, [data-high-contrast="1"] .nav-item { text-decoration-thickness: 2px; } [data-high-contrast="1"] :focus-visible { outline: 4px solid #000 !important; outline-offset: 2px !important; } /* ── Fonte para dislexia ───────────────────────────────────────── Sem depender de webfont externa: usa famílias que costumam estar presentes e aumenta o espaçamento, que é a parte do efeito com evidência mais consistente. */ [data-dyslexia-font="1"] { --ds-font-heading: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif; --ds-font-body: "Verdana", "Tahoma", "Trebuchet MS", sans-serif; } [data-dyslexia-font="1"] body, [data-dyslexia-font="1"] p, [data-dyslexia-font="1"] li, [data-dyslexia-font="1"] label { letter-spacing: 0.06em; word-spacing: 0.12em; line-height: 1.9; } /* Blocos de texto nunca justificados: o "rio" de espaços que a justificação cria atrapalha o rastreio da linha. */ [data-dyslexia-font="1"] * { text-align: left; hyphens: none; } /* ── Tema escuro ───────────────────────────────────────────────── Escolha explícita, não automática: nem toda pessoa com hipersensibilidade prefere o escuro, e algumas leem pior nele. */ [data-theme="dark"] { --ds-bg: #0D1917; --ds-bg-card: #142523; --ds-text: #E6F2F0; --ds-text-secondary: #A9C4BF; --ds-text-muted: #7A9A95; --ds-border: #1F3634; --ds-border-light: #182927; --ds-gray-50: #142523; --ds-gray-100: #182927; --ds-gray-200: #1F3634; --ds-primary-lighter: #123B37; color-scheme: dark; } [data-theme="high-contrast"] { --ds-bg: #FFFFFF; --ds-bg-card: #FFFFFF; --ds-text: #000000; --ds-border: #000000; } /* ── Base de acessibilidade, sempre ativa ──────────────────────── Isto não depende de preferência: é o mínimo para o app ser usável. */ /* Foco sempre visível. Navegação por teclado e por switch depende disso, e switch é a via de acesso de parte do público-alvo. */ :focus-visible { outline: 3px solid var(--ds-primary, #0F766E); outline-offset: 2px; border-radius: 4px; } /* Alvo de toque de 44px: a recomendação da WCAG 2.2 (2.5.8) e o mínimo realista para uma criança com coordenação motora em desenvolvimento. */ button, [role="button"], a.nav-item, input[type="checkbox"], input[type="radio"], select { min-height: 44px; } button, [role="button"] { min-width: 44px; } /* Link de pular para o conteúdo. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 12px 20px; background: var(--ds-primary, #0F766E); color: #fff; border-radius: 0 0 8px 0; font-weight: 600; } .skip-link:focus { left: 0; } /* Conteúdo visível só para leitores de tela. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only-focusable:focus, .sr-only-focusable:focus-within { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* Impressão: a prancha de rotina em papel é recurso de verdade, não um resto do design de tela. */ @media print { .sidebar, .topbar, .no-print, button { display: none !important; } body { background: #fff; color: #000; } .main-content, .content-area { margin: 0; padding: 0; } }