# ETAPA 2C — Branding RE: Header, Footer y Variables CSS

## 1. Objetivo
Implementar la identidad visual de la marca **RE** en el formulario de encuestas.
Color predominante: **#43BBC8** (teal). Logo RE en blanco sobre fondo teal en el header.
Footer con logos de Fundación Solidaridad e InQuality.

---

## 2. Contexto previo
- Etapa 2B completada: el formulario carga desde `?s=UUID`, tiene consentimiento,
  geo dropdowns Paraguay, y persiste datos en Supabase.
- Stack: Next.js 15 (App Router), Tailwind CSS, Supabase Cloud.
- URL piloto: `http://economia-cuidado.inqualityhq.com?s=30000000-0000-0000-0000-000000000001`
- Los SVG de logos ya están en `public/logos/` del repo:
  - `public/logos/re-mono-svg.svg` — logo RE monocromático blanco
  - `public/logos/inq-white-svg.svg` — logo InQuality blanco
  - `public/logos/FS-ISO-SVG.svg` — isotipo Fundación Solidaridad

---

## 3. DECISIONES YA TOMADAS (no consultar de nuevo)
- Color primario header: `#43BBC8` (teal RE)
- Color oscuro/texto: `#494F4F` (gris oscuro RE)
- Color acento naranja: `#F8AD13`
- Color naranja intenso: `#EE761A`
- Color fondo claro: `#E7E6E5`
- Logo RE en header: `public/logos/re-mono-svg.svg` sobre fondo `#43BBC8`
- Logo InQuality footer: `public/logos/inq-white-svg.svg` — "Powered by"
- Logo Fundación Solidaridad footer: `public/logos/FS-ISO-SVG.svg` — "Un producto de"
- Tipografía: Inter (ya en uso, coincide con manual FS)
- Jerarquía: RE es la marca predominante; FS e InQ son secundarios en footer

---

## 4. Tareas

### 4.1 Variables CSS globales
En `app/globals.css` (o equivalente), agregar variables CSS:
```css
:root {
  --color-re-teal: #43BBC8;
  --color-re-dark: #494F4F;
  --color-re-orange: #F8AD13;
  --color-re-orange-intense: #EE761A;
  --color-re-light: #E7E6E5;
  --color-re-white: #FFFFFF;
}
```

### 4.2 Componente SurveyHeader
Crear `components/survey-header.tsx`:
- Fondo: `#43BBC8`
- Contenido en una fila, alineado verticalmente al centro, padding py-4 px-6
- Logo RE: `<img src="/logos/re-mono-svg.svg" alt="RE" />` altura ~48px
- Título a la derecha del logo: **"DATOS PAÍS SOBRE EL CUIDADO"**
  - Inter bold, color blanco, ~1rem, tracking-wide (letter-spacing amplio)

### 4.3 Componente SurveyFooter
Crear `components/survey-footer.tsx`:
- Fondo: `#494F4F`
- Flex row, justify-between, padding py-3 px-6
- Izquierda: texto `"Un producto de"` (blanco, xs) + `<img src="/logos/FS-ISO-SVG.svg" alt="Fundación Solidaridad" />` ~32px alto
- Derecha: texto `"Powered by"` (blanco, xs) + `<img src="/logos/inq-white-svg.svg" alt="InQuality" />` ~32px alto
- Cada par texto+logo alineado verticalmente al centro (flex, items-center, gap-2)

### 4.4 Acentos de color en el formulario
Aplicar la paleta RE a los elementos existentes — **solo color, sin cambiar layout ni tamaños**:
- Botones primarios (Siguiente, Enviar): fondo `#43BBC8`, texto blanco, hover `#3DAAB6`
- Checkboxes/radios seleccionados: acento `#43BBC8`
- Bordes de inputs con foco: `#43BBC8`
- Barra de progreso (si existe): `#43BBC8`
- Links: `#43BBC8`

### 4.5 Layout principal
En `app/page.tsx` o el layout de la encuesta, componer:
```tsx
<SurveyHeader />
<main>
  {/* formulario existente sin cambios estructurales */}
</main>
<SurveyFooter />
```

---

## 5. Entregables (DoD)

- [ ] Variables CSS definidas en globals.css
- [ ] `SurveyHeader` renderiza: fondo teal, logo RE blanco ~48px, título blanco bold
- [ ] `SurveyFooter` renderiza: fondo oscuro, logos FS e InQ con labels
- [ ] Botones del formulario usan color `#43BBC8`
- [ ] Inputs con foco muestran borde `#43BBC8`
- [ ] Build sin errores (`next build`)
- [ ] `git diff --name-only HEAD` — solo archivos autorizados en el diff

---

## 6. Qué reportar
```
Verificado:
- build exitoso
- archivos en diff: [lista]
- SurveyHeader: [descripción visual]
- SurveyFooter: [descripción visual]
- Colores aplicados: [elementos modificados]

Asumido:
- [lo que no se pudo verificar visualmente]

Decisiones proactivas (Nivel 2 — validar/revertir si hay problema):
- [cambios fuera de scope si los hubo]
```

---

## 7. Qué NO hacer
- ❌ No modificar estructura de preguntas, widgets o lógica de submit
- ❌ No tocar `lib/supabase.ts`, `app/actions/`, ni migraciones
- ❌ No cambiar tamaños de fuente ni layout de grilla
- ❌ No agregar nuevas dependencias npm
- ❌ No resolver ítems de TECH_DEBT.md o BACKLOG.md
- ❌ No modificar archivos fuera del scope (git diff lo detectará)