# Diagnóstico Completo — CSS/UX/A11y

## 1. Arquitetura de carga de CSS

### Ordem real dos estilos no `<head>` (confirmada em `/` home.html)

```
Linha 36:  bootstrap.min.css (external)
Linha 37:  bootstrap-icons.css (external)
Linha 38:  nunito-sans fonts (external)
Linha 41-104: colors.blade.php (inline <style>)   → --tenant-* vars
Linha 138-178: fonts.blade.php (inline <style>)    → --font-sans, body font-family
Linha 179-320: normalize.blade.php (inline <style>) → --theme-radius, --theme-shadow, skips, a11y
Linha 502-505: portal-base.css, portal-nav.css, portal-a11y.css, portal-components.css (external)
Linha 527-541: SLE css_head blocos [BlockRenderer] →
    dm-sans, manrope fonts
    animate, magnific-popup, meanmenu, swiper, nice-select (external libs)
    color.css (external)  → :root { --theme:#1075ad; --theme-2:#142d52; ... }
    main.min.css (external) → :root { --theme:#1C71A6; --header:#223D73; ... }
    <style> bloco !important overrides (inline)
Linha 542+: @stack('head-styles'), @stack('styles')
```

### Resolução de conflito

| Variável | colors.blade.php (inline, linha 41) | color.css (external, linha 540) | main.min.css (external, linha 541) | Quem vence |
|----------|--------------------------------------|--------------------------------|-------------------------------------|------------|
| `--tenant-primary` | `#1a3c6e` | — | — | colors.blade.php |
| `--theme` | — | `#1075ad` | `#1C71A6` | **main.min.css** |
| `--header` | — | `#6c757d` | `#223D73` | **main.min.css** |
| `--theme-2` | — | `#142d52` | — | **color.css** |
| `--theme-3` | — | `#f7941d` | — | **color.css** |
| body `font-family` | inline: `var(--font-sans)` | — | external: `"DM Sans"` | **main.min.css** (external after inline) |

### Cadeia de inclusão

```
base.blade.php
  → colors.blade.php, fonts.blade.php, normalize.blade.php (inline <style>)
  → portal-*.css (external <link>)
  → SLE css_head (BlockRenderer::renderBlock from DB v2_structural_portal_contents)
      → SleConfigsSeeder populates area=css_head with:
          <link> dm-sans, manrope, animate, magnific, meanmenu, swiper, nice-select
          <link> color.css, main.min.css
          <style> !important overrides
  → @stack('head-styles'), @stack('styles')

app-layout.blade.php (extends base)
  → portal-content.blade.php
      → if SLE header active: render SleHeaderSeeder content (header-sticky, header-1)
      → else: V2 fallback (header/header.blade.php + Bootstrap 5 navbar)
      → @yield('main-section-area')
      → if SLE footer active: render SleFooterSeeder content (footer-section, contact-info-area-2)
      → else: V2 fallback (footer/footer.blade.php)
```

Ativação: `StructuralPortalSeeder` (linha 60-67) → SLE só ativa se `titulo_site === 'SUCESU Nacional'`

---

## 2. Paleta hardcoded vs flags do CMS

### Flags configuradas (v2_portal_configs → PortalConfigsService → ModuleProvider → colors.blade.php)

| Flag | valor DB | `:root` var | presente no HTML |
|------|----------|-------------|------------------|
| `theme_primary_color` | `#1a3c6e` | `--tenant-primary` | ✅ linha 4 |
| `theme_secondary_color` | *(não setado)* | `--tenant-secondary: #0a4c8c` | ✅ linha 5 |
| `theme_accent_color` | `#f7941d` | `--tenant-accent` | ✅ linha 6 |
| `theme_link_color` | `#1a3c6e` | `--tenant-links` | ✅ linha 7 |
| `theme_bg_main` | `#ffffff` | `--color-bg-main` | ✅ linha 10 |
| `theme_bg_canvas` | `#f8f9fa` | `--color-bg-canvas` | ✅ linha 11 |
| `theme_font_family` | `Nunito Sans, ...` | `--font-sans` | ✅ linha 140 |
| `theme_font_size_base` | `16` | `--font-size-base: 16px` | ✅ linha 141 |
| `theme_border_radius` | `4px` | `--theme-radius: 4px` | ✅ linha 182 |
| `theme_shadow_intensity` | `none` | `--theme-shadow: none` | ✅ linha 183 |
| — | — | `--bs-primary: var(--tenant-primary)` | ✅ linha 22 |

### Paleta legada (main.min.css + color.css — prevalecem)

| var | valor | fonte (arquivo) | usado por |
|-----|-------|-----------------|-----------|
| `--theme` | `#1C71A6` | main.min.css :root | `.theme-btn`, `.footer-section`, `.link-btn`, `.section-title .sub-title`, `h4.number`, `.breadcrumb-items li a` |
| `--header` | `#223D73` | main.min.css :root | `.header-1`, `h1..h6 { color }`, `.sticky.header-1 a`, card titles |
| `--theme-2` | `#142d52` | color.css :root | `.footer-bottom`, `.theme-btn:hover`, `.theme-bg-2` |
| `--theme-3` | `#f7941d` | color.css :root | `.theme-btn-2`, `.link-btn:hover`, social icons hover, footer link hover |
| `--text` | `#687799` | main.min.css :root | `body { color }` (sombreado) |

### Overrides `!important` hardcoded (SleConfigsSeeder::60-97)

```css
.header-top-section, .header-top-section p, li, a, .link { color: #fff !important; }
.header-main .main-menu ul li a { color: #fff !important; }
.header-main .main-menu ul li a:hover { color: var(--theme) !important; }
.header-main .header-right .social-icon a { color: #fff !important; }
.header-main .header-right .social-icon a:hover { color: var(--theme-3) !important; }
.footer-section a { color: #c9c9d2 !important; }
.footer-section a:hover { color: var(--theme-3) !important; }
.footer-bottom, .footer-bottom p, .footer-bottom a { color: #ddd !important; }
.contact-info-area-2 { background-color: #142d52 !important; }    ← hardcoded #142d52
.contact-info-area-2 .content p { color: var(--theme-3) !important; }
.contact-info-area-2 .content h6, h6 a { color: #fff !important; }
.contact-info-area-2 .icon, .icon i { color: #fff !important; }
.theme-btn i.bi, .link-btn i.bi { color: var(--theme) !important; }
.sticky { background-color: #fff !important; }
```

---

## 3. Achados por página (sniff_page + run_checks)

### Header/Footer (computed-style hash idêntico nas 12 páginas)

| Elemento | CSS class | Computed | fonte CSS |
|----------|-----------|----------|-----------|
| Header bg | `header#header-sticky.header-1` | `#223d73` | main.min.css:3090 |
| Header font | — | `"DM Sans",sans-serif` | main.min.css:33,111 |
| Menu links | `ul li a` | `#ffffff` | override !important |
| CTAs | `a.theme-btn` | bg `#1c71a6`, radius `44px` | color.css:25 + main.min.css:19 |
| Footer bg | `footer.footer-section` | `#1c71a6` | color.css:66 |
| Overlay | `footer.footer-section::before` | rgba overlay | SleFooterSeeder inline |
| Contact box | `div.contact-info-area-2` | bg `#142d52` | override !important |
| Bottom bar | `div.footer-bottom` | bg `#27498c` | color.css:73 |
| Bottom text | `div.footer-bottom *` | `#ddd` | override !important |
| Font | html, body, header, footer, main | `"DM Sans"` | main.min.css:136 |

### Páginas — cores específicas

| Página | Elemento | Cor | Fonte |
|--------|----------|-----|-------|
| `/` (home) | Section titles | `#223d73` | `--header` (hardcoded) |
| `/` | Theme btns | bg `#1c71a6` | `--theme` (hardcoded) |
| `/` | Section bg tint | `#1c71a60d` | rgba(28,113,166,0.05) |
| `/noticias` | Section title h2 | `#223d73` (20.8px) | `--header` |
| `/noticias` | Card h3 a | `#223d73` (22px/600) | `--header` |
| `/noticias` | Date chip h4.number | `#1c71a6` | `--theme` |
| `/noticias` | link-btn "Leia Mais" | `#1c71a6` (ratio 5.3) | `--theme` |
| `/noticia/<slug>` | Body headings h2/h3 | `#1a1a2e` (44/22px) | content-rich CSS |
| `/noticia/<slug>` | Tags badge | `#6c757d` / `#6c757d1a` (4.15) | Bootstrap bg-secondary |
| `/noticia/<slug>` | Star icon | `#ffc107` (1.59) | Bootstrap text-warning |
| `/noticia/<slug>` | "Voltar" btn | `#0d6efd` | Bootstrap btn-primary |
| `/noticia/<slug>` | Social btns | `#0d6efd`, `#212529`, `#198754` | Bootstrap mix |
| `/agenda` | Card h3 a | `#223d73` | `--header` |
| `/agenda` | link-btn "Saiba mais" | `#1c71a6` | `--theme` |
| `/associe-se` | Submit btn | `#0d6efd` (ratio 4.5 exato) | Bootstrap btn-primary |
| `/fale-conosco` | Submit btn | `#0d6efd` | Bootstrap btn-primary |
| `/historia` | h2 title | `#223d73` (44px/700) | `--header` |
| `/historia` | .sub-title | `#1c71a6` / `#1c71a61a` (4.63) | `--theme` |
| `/sobre-nos` | Sections bg tint | `#1c71a60d` | rgba hardcoded |

### run_checks — falhas confirmadas

| Página | Elemento | Check | Valor | Status |
|--------|----------|-------|-------|--------|
| `/noticia/<slug>` | span.badge tags | contrast-aa | 4.15:1 | **FAIL** |
| `/noticia/<slug>` | i.bi-star-fill "Destaques" | contrast-aa | 1.59:1 | **FAIL** |
| Todas | breadcrumb h1 (42px white) | contrast-aa | unmeasurable | **WARN** (esperado — bg-image) |
| `/historia` | sub-title span | contrast-aa | 4.63:1 | borderline |
| `/associe-se` | submit btn .btn-primary | contrast-aa | 4.5:1 | borderline (exato) |
| Todas | a11y bar A+/A- buttons | target-size | 30×20.8px | **FAIL** (<24px) |

### run_checks — uniformidade (grids)

| Página | Grid | Altura row 1 | Altura row 2 | delta |
|--------|------|-------------|-------------|-------|
| `/noticias` | .news-card-items (×3 col) | 628.28px | 600.28px | -28px |
| `/agenda` | .news-card-items (×2 col) | 566.19px | 532.09px | -34px |
| `/associados` | .col-md-6 cards | 511.7px | 476px (cards 11-12) | -36px |
| `/parceiros` | .col-md-6 cards | 307px / 279px | alternando | -28px |
| `/regionais` | first row | 489.28px | rows 2-3 517.28px | +28px |

---

## 4. Falsos positivos confirmados

| Achado original | Verificação no código | Conclusão |
|-----------------|-----------------------|-----------|
| "No `<h1>` on /regional/sucesu-para" | show.blade.php:57: `<h1 class="fw-bold mb-1">{{ $unidade->name }}</h1>` | **FALSO POSITIVO** — não capturado pelo depth do sniff |
| "Breadcrumb H1 no scrim on /historia, /fale-conosco" | main.min.css:3646: `::before` com gradient azul + opacity 0.75 existe em TODAS as páginas | **FALSO POSITIVO** — sniff não mede sobre bg-image |
| "Form placeholders as labels" | associe-se e fale-conosco têm `<label for="...">` em todos os campos | **FALSO POSITIVO** — placeholder é suplementar |
| "Footer link color contrast fail" | Texto `#212529` sobre `#1c71a6` = 2.91, mas o texto visível é `#ddd`/`#c9c9d2` (overrides !important) | **FALSO POSITIVO** — herança de cor não reflete texto visível |