motor-de-encuestas/sprints/sprint-4/ETAPA_DASHBOARD_CLARO.md

ETAPA — Dashboard tema claro (marca Re)

1. Objetivo

Convertir el dashboard de tema oscuro a tema claro usando la paleta oficial de marca Re. Un solo archivo modificado: app/globals.css.

2. Decisiones ya tomadas — no consultar

• Fondo página: #E7E6E5 (gris claro Re)
• Cards/widgets: #FFFFFF
• Texto principal: #494F4F (carbón Re)
• Acento teal, colores de alerta inline y barras de pct: SIN CAMBIO
• Texto de tabs activos sobre teal (.db-survey-link-active): #FFFFFF

3. Tarea

En app/globals.css, sección DASHBOARD (línea 710 en adelante), aplicar los siguientes reemplazos SOLO en esa sección:

FONDOS:

• background: #0F1923 → background: #E7E6E5 (.db-page, línea 716)
• background: #1A2535 → background: #FFFFFF (.db-widget, línea 741)
• background: #14202e → background: #F0EFEE (.db-sidebar, línea 887)
• background: #101a30 → background: #F0EFEE (.db-lens-intro, .db-placeholder)
• background: #2a3547 → background: rgba(73,79,79,0.10) (.db-bar-track)
• background: #1e2d42 → background: #FFFFFF (.db-filter-select)
• background: #1e2d42 → background: rgba(73,79,79,0.08) (.db-skeleton-block)

TEXTO:

• color: #E7E6E5 → color: #494F4F (en TODAS las clases .db-* de esa sección)
• color: #9ca3af → color: #6B7878
• color: #7A8FA0 → color: #8A9A9A
• color: #7d8da5 → color: #8A9A9A
• color: #9fb0cc → color: #8A9A9A
• color: #6b7280 → color: #9CA8A8
• color: #0F1923 → color: #FFFFFF (solo .db-survey-link-active)
• color: #fff → color: #494F4F (solo .db-page-title, línea 721)

NO TOCAR:

• color: var(--color-re-teal) — sin cambio en ninguna clase
• color: #ef4444, #f0b429, #f06b6b, #f06b6b — sin cambio
• Todo lo que esté fuera de la sección DASHBOARD (línea 710 en adelante)
• Cualquier archivo .tsx

4. DoD (checklist antes de reportar)

• Solo app/globals.css modificado
• git diff --name-only HEAD lista únicamente app/globals.css
• Ningún valor de acento (teal, rojos, ámbar) fue tocado
• Ninguna clase fuera de la sección DASHBOARD fue modificada
• Build sin errores: npm run build

5. Qué reportar

• Cantidad de líneas modificadas
• Lista de clases tocadas con valor anterior → valor nuevo
• Output de git diff --name-only HEAD
• Output de npm run build (últimas 5 líneas)
• Hallazgo visual: ¿.db-gap-brecha (#f0b429 ámbar) tiene contraste visible sobre el nuevo fondo #F0EFEE? Verificar si el valor en pantalla sería legible.

6. Qué NO hacer

• No tocar variables :root
• No tocar archivos .tsx
• No modificar colores de acento ni alertas
• No hacer deploy — solo commit y push a Gitea