# P1: Bridge de Variáveis Legacy → Tenant (CRÍTICO)

seeds: `sucesu-ac5e`

## Objetivo

Mapear as variáveis CSS legadas (`--theme`, `--header`, `--theme-2`, `--theme-3`) para as tenant vars do PortalConfigsService (`--tenant-primary`, `--tenant-secondary`, `--tenant-accent`), para que o tema configurado no CMS reflita no portal.

## Arquivo: `V2/Seeds/SleConfigsSeeder.php`

### Modificação 1: Adicionar bridge CSS após main.min.css

**Local**: entre a linha 58 (`<link> main.min.css`) e a linha 60 (`{{-- Correções !important --}}`)

**Inserir**:

```blade
{{-- Bridge: mapeia variáveis legadas SUCESU → tenant vars do PortalConfigsService --}}
<style>
    :root {
        --theme: var(--tenant-primary);
        --header: var(--tenant-primary);
        --theme-2: var(--tenant-secondary);
        --theme-3: var(--tenant-accent);
        --ratting: var(--tenant-accent);
        --white: var(--color-bg-main);
        --bg: color-mix(in srgb, var(--tenant-primary) 5%, var(--color-bg-main));
    }

    /*
     * Fonte do tema (vence main.min.css body/h1..h6 por ordem posterior na cascata)
     * main.min.css:136 define body { font-family: "DM Sans" }
     * main.min.css:173 define h1..h6 { font-family: "DM Sans" }
     * Este bloco, vindo DEPOIS no mesmo nível de especificidade, prevalece.
     */
    body { font-family: var(--font-sans); }
    h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); }

    /*
     * Bootstrap 5.3 btn-primary compila --bs-btn-bg: #0d6efd direto no CSS
     * (não usa var(--bs-primary)). Override necessário para refletir o tema.
     * seeds: sucesu-4935
     */
    .btn-primary {
        --bs-btn-bg: var(--tenant-primary);
        --bs-btn-border-color: var(--tenant-primary);
        --bs-btn-hover-bg: var(--tenant-secondary);
        --bs-btn-hover-border-color: var(--tenant-secondary);
        --bs-btn-active-bg: var(--tenant-secondary);
        --bs-btn-active-border-color: var(--tenant-secondary);
        --bs-btn-disabled-bg: var(--tenant-primary);
        --bs-btn-disabled-border-color: var(--tenant-primary);
    }
    .btn-outline-primary {
        --bs-btn-color: var(--tenant-primary);
        --bs-btn-border-color: var(--tenant-primary);
        --bs-btn-hover-bg: var(--tenant-primary);
        --bs-btn-hover-border-color: var(--tenant-primary);
        --bs-btn-active-bg: var(--tenant-primary);
        --bs-btn-active-border-color: var(--tenant-primary);
        --bs-btn-disabled-color: var(--tenant-primary);
        --bs-btn-disabled-border-color: var(--tenant-primary);
    }
    .bg-primary { background-color: var(--tenant-primary) !important; }
    .text-primary { color: var(--tenant-primary) !important; }
    .border-primary { border-color: var(--tenant-primary) !important; }
</style>
```

### Modificação 2: Substituir cores hardcoded nos overrides `!important`

**Local**: linhas 61-97 do bloco `{{-- Correções !important --}}`

| Linha | Antes | Depois | Motivo |
|-------|-------|--------|--------|
| 62-66 | `color: #fff !important` | `color: var(--color-bg-main) !important` | Branco = bg main |
| 68 | `color: #fff !important` | `color: var(--color-bg-main) !important` | Menu links |
| 69 | `color: var(--theme) !important` | `color: var(--tenant-primary) !important` | Menu hover (já bridge mas explícito) |
| 71 | `color: #fff !important` | `color: var(--color-bg-main) !important` | Social icons |
| 72 | `color: var(--theme-3) !important` | `color: var(--tenant-accent) !important` | Social hover (já bridge) |
| 76 | `color: #c9c9d2 !important` | `color: var(--color-text-muted) !important` | Footer links |
| 77 | `color: var(--theme-3) !important` | `color: var(--tenant-accent) !important` | Footer hover (já bridge) |
| 79-80 | `color: #ddd !important` | `color: var(--color-text-muted) !important` | Footer-bottom |
| 82 | `background-color: #142d52 !important` | `background-color: var(--tenant-secondary) !important` | Contact-info-area-2 bg |
| 83 | `color: var(--theme-3) !important` | `color: var(--tenant-accent) !important` | Contact area p |
| 85-86 | `color: #fff !important` | `color: var(--color-bg-main) !important` | Contact area h6 |
| 87 | `color: #fff !important` | `color: var(--color-bg-main) !important` | Contact area icon |
| 90 | `color: var(--theme) !important` | `color: var(--tenant-primary) !important` | theme-btn icon (já bridge) |
| 92 | `background-color: #fff !important` | `background-color: var(--color-bg-main) !important` | Sticky header bg |
| 93-95 | `color: var(--header) !important` | `color: var(--tenant-primary) !important` | Sticky menu/contact (já bridge) |

### Código final do bloco `!important` (substituir linhas 60-97)

```blade
{{-- Correções !important — usam tenant vars após bridge (linha acima) --}}
<style>
    .header-top-section,
    .header-top-section p,
    .header-top-section li,
    .header-top-section a,
    .header-top-section .link { color: var(--color-bg-main) !important; }

    .header-main .main-menu ul li a { color: var(--color-bg-main) !important; }
    .header-main .main-menu ul li a:hover { color: var(--tenant-primary) !important; }

    .header-main .header-right .social-icon a { color: var(--color-bg-main) !important; margin: 0 8px !important; }
    .header-main .header-right .social-icon a:hover { color: var(--tenant-accent) !important; }

    .main-menu ul li { display: inline-block !important; }

    .footer-section a { color: var(--color-text-muted) !important; }
    .footer-section a:hover { color: var(--tenant-accent) !important; }
    .footer-bottom,
    .footer-bottom p,
    .footer-bottom a { color: var(--color-text-muted) !important; }

    .contact-info-area-2 { background-color: var(--tenant-secondary) !important; }
    .contact-info-area-2 .content p { color: var(--tenant-accent) !important; }
    .contact-info-area-2 .content h6,
    .contact-info-area-2 .content h6 a { color: var(--color-bg-main) !important; }
    .contact-info-area-2 .icon { color: var(--color-bg-main) !important; }
    .contact-info-area-2 .icon i { color: var(--color-bg-main) !important; }

    .theme-btn i.bi,
    .link-btn i.bi { line-height: 49px !important; font-size: 15px !important; vertical-align: middle !important; color: var(--tenant-primary) !important; }

    .sticky { background-color: var(--color-bg-main) !important; }
    .sticky.header-1 .header-main .main-menu ul li a { color: var(--tenant-primary) !important; }
    .sticky.header-1 .header-main .header-right .contact-items .content span { color: var(--color-text-main) !important; }
    .sticky.header-1 .header-main .header-right .contact-items .content h6 a { color: var(--tenant-primary) !important; }
    .sticky.header-1 .header-main .header-right .search-icon { color: var(--tenant-primary) !important; }
</style>
```

## O que esta correção resolve

| Componente | Antes | Depois |
|------------|-------|--------|
| Header `#header-sticky` bg | `#223D73` hardcoded | `--tenant-primary` (`#1a3c6e`, configurável) |
| Footer `footer-section` bg | `#1C71A6` hardcoded | `--tenant-primary` |
| Footer-bottom bg | `#142D52` hardcoded | `--tenant-secondary` (`#0A4C8C`) |
| CTAs `.theme-btn` bg | `#1C71A6` | `--tenant-primary` |
| CTAs hover | `#142D52` | `--tenant-secondary` |
| Link buttons `.link-btn` | `#1C71A6` | `--tenant-primary` |
| Link buttons hover | `#F7941D` | `--tenant-accent` (já coincidia) |
| Card titles `h3` | `#223D73` | `--tenant-primary` |
| Section titles `h2` | `#223D73` | `--tenant-primary` |
| Section sub-titles | `#1C71A6` | `--tenant-primary` |
| Date chips `h4.number` | `#1C71A6` | `--tenant-primary` |
| Breadcrumb link | `#1C71A6` | `--tenant-primary` |
| Contact area bg | `#142D52` | `--tenant-secondary` |
| Social icons hover | `#F7941D` | `--tenant-accent` (já coincidia) |
| Footer link hover | `#F7941D` | `--tenant-accent` |
| Rating stars `--ratting` | `#F7941D` | `--tenant-accent` (já coincidia) |
| Body font | `DM Sans` | `var(--font-sans)` = Nunito Sans configurável |
| Headings font | `DM Sans` | `var(--font-sans)` |
| `.btn-primary` bg | `#0D6EFD` Bootstrap | `--tenant-primary` |
| `.btn-outline-primary` | `#0D6EFD` Bootstrap | `--tenant-primary` |
| Section bg tint `--bg` | `rgba(28,113,166,0.05)` | `rgba(26,60,110,0.05)` (via color-mix) |

## Nota sobre `color-mix`

`color-mix(in srgb, var(--tenant-primary) 5%, var(--color-bg-main))` requer suporte CSS Color Level 5. Suporte: Chrome 111+, Firefox 113+, Safari 16.2+. Todos navegadores modernos.

Fallback para compatibilidade:
```css
--bg: rgba(26, 60, 110, 0.05); /* fallback: tenant-primary @ 5% opacity */
@supports (color: color-mix(in srgb, red, blue)) {
    --bg: color-mix(in srgb, var(--tenant-primary) 5%, var(--color-bg-main));
}
```

Ou usar diretamente o fallback fixo (mais seguro para PHP 7.4 / legacy):
```css
--bg: var(--color-bg-canvas); /* usa bg-canvas em vez do tint */
```
Recomendo o fallback fixo para evitar complexidade.