# Plano de Correção CSS/UX/A11y — Portal SUCESU

Data: 2026-08-11
Metodologia: sniff-css MCP (sniff_page + run_checks) em 12 páginas + análise de código fonte
seeds: `sucesu-ac5e` (P1), `sucesu-a2f2` (P2), `sucesu-4935` (P2), `sucesu-36ce` (P3)

## Ordem de leitura — siga esta sequência

| # | Arquivo | Conteúdo | ~tempo leitura |
|---|---------|----------|----------------|
| 1 | `00-index.md` | Este arquivo — visão geral | 2 min |
| 2 | `01-diagnostico.md` | Diagnóstico completo com evidências + resultados run_checks por página | 10 min |
| 3 | `02-p1-bridge-theme-vars.md` | **CRÍTICO**: Bridge de vars legacy → tenant no SleConfigsSeeder | 8 min |
| 4 | `03-p2-contraste-acessibilidade.md` | Correções de contraste + btn-primary | 5 min |
| 5 | `04-p3-grids-targets.md` | Grids, target-size, overlap, a11y bar | 5 min |
| 6 | `05-execucao.md` | Ordem de execução, comandos, validação | 5 min |

## Resumo do problema

O portal SUCESU carrega dois sistemas de tema que competem na cascata CSS:

1. **V2 (PortalConfigsService):** `colors.blade.php` + `fonts.blade.php` + `normalize.blade.php` — injetam `--tenant-*` no `:root` com valores do banco `v2_portal_configs`. Flags atuais: primary `#1a3c6e`, accent `#f7941d`, radius `4px`, font `Nunito Sans`.

2. **Legacy SUCESU (SLE):** `main.min.css` + `color.css` — carregados pelo `SleConfigsSeeder` via SLE `css_head`, após os estilos V2. Definem `--theme:#1C71A6`, `--header:#223D73`, `--theme-2:#142d52`, font `DM Sans`. Header/footer/CTAs/títulos usam essas vars.

**Resultado:** mudar a cor no CMS não reflete no portal; fonte, botões e cores divergem em todas as 12 páginas.

## Abordagem da correção

**Bridge CSS** no próprio `SleConfigsSeeder.php`: injetar `<style>` após `main.min.css` que remapeia as vars legadas para tenant vars. Sem mexer em CSS externo, sem recompilar, sem quebrar o design.

## Páginas analisadas
`/`, `/regionais`, `/regional/sucesu-para`, `/associados`, `/parceiros-institucionais`, `/noticias`, `/noticia/ciberseguranca-...`, `/agenda`, `/sobre-nos`, `/historia`, `/fale-conosco`, `/associe-se`