tema claro v1

sprints/sprint-4/ETAPA_DASHBOARD_CLARO.md

@@ -0,0 +1,62 @@
+# 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