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:

: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:

<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á)

4.4 KiB Raw Blame History