Files
h-bitosInfantiles/PRD-Rachita.md
T
2026-07-03 17:36:04 -06:00

541 lines
37 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# PRD — Rachita 🦊🔥
### Aplicación de hábitos y creatividad para niñas y niños (Tablet · Landscape)
| Campo | Valor |
|---|---|
| **Producto** | Rachita |
| **Versión del documento** | 1.0 |
| **Fecha** | 2026-07-03 |
| **Autor** | Johann Velázquez |
| **Estado** | Borrador — basado en prototipo funcional `Rachita.html` |
| **Plataforma objetivo** | Tablet Android/iPadOS · Modo Landscape (horizontal) · 1280×800 de referencia |
| **Artefacto de referencia** | `Rachita.html` (prototipo interactivo React de 8 pantallas) |
---
## 1. Resumen ejecutivo
**Rachita** es una aplicación de hábitos gamificada para tablet, dirigida a niñas y niños de ~6 a 10 años, inspirada visualmente en *Finch* y *Little Streaks*. La niña cuida a una mascota virtual (su "compañero") que refleja su progreso: completa hábitos diarios, mantiene **rachas** (streaks), sube un dibujo diario a su **Museo personal**, y comparte **rachas en equipo** con familiares o amigas.
El diferenciador clave es el **Sistema de Monitoreo de Batería**: la app usa el estado de batería del dispositivo como mecánica de cuidado — la mascota "se cansa" cuando la batería está baja y "duerme/entrena en su cápsula" mientras carga, bloqueando el uso de la tablet durante la carga como medida de seguridad y de higiene digital.
### Problema que resuelve
1. Los niños pequeños carecen de motivación sostenida para hábitos rutinarios (bañarse, dormir temprano, ir a la escuela).
2. Los padres necesitan una forma no punitiva de limitar el uso de la tablet mientras carga (riesgo de sobrecalentamiento / hábito de pantalla excesivo).
3. No existe un espacio simple donde el niño registre su creatividad diaria y la familia la celebre.
### Solución
Una app tablet-first con: mascota emocional, tarjetas de hábitos con check gigante, contador de racha con fuego animado, museo de dibujos con cámara/galería, rachas cooperativas, widgets de pantalla de inicio y estados de batería amigables que interrumpen el flujo de forma clara pero afectuosa.
---
## 2. Objetivos y métricas de éxito
### 2.1 Objetivos de producto
| # | Objetivo | Métrica (North Star en negrita) |
|---|---|---|
| O1 | Crear adherencia diaria a hábitos | **% de días con los 3 hábitos completados** ≥ 60% a 30 días |
| O2 | Retención emocional vía mascota | D7 retention ≥ 45%, D30 ≥ 25% |
| O3 | Reducir uso de tablet en carga | ≥ 90% de sesiones de carga sin desbloqueo manual |
| O4 | Fomentar creatividad diaria | ≥ 3 dibujos subidos al museo por semana |
| O5 | Vínculo social/familiar | ≥ 1 racha en equipo activa por usuario a 14 días |
### 2.2 No-objetivos (fuera de alcance v1)
- Modo teléfono / orientación portrait.
- Multi-perfil en un mismo dispositivo (v1 = 1 niño por tablet).
- Chat libre entre usuarios (solo "enviar ánimo" predefinido, por seguridad infantil).
- Tienda / compras dentro de la app / monetización.
- Contenido educativo curricular (lecciones, quizzes).
- Modo offline-first completo con sincronización compleja (v1: local con backup simple).
---
## 3. Usuarios y personas
### 3.1 Persona primaria — "Lucía" (usuaria niña)
- 7 años, usa la tablet familiar 12 h al día.
- No lee textos largos; responde a color, animación, personajes y celebración.
- Motivación: cuidar a su mascota, no "romper" su racha de fuego, mostrar sus dibujos.
- Restricción: no debe requerir escritura compleja, ni contraseñas, ni navegación profunda (máximo 2 niveles).
### 3.2 Persona secundaria — Madre/Padre/Hermano mayor (configurador)
- Configura hábitos, horarios de recordatorio y toggles de alertas.
- Quiere: evidencia de progreso, control del uso durante la carga, cero contenido inapropiado, cero contacto con extraños.
- Participa como "compañero de racha" (persona: "Dani, su hermana mayor").
### 3.3 Persona terciaria — Amiga par ("Ana")
- Otra niña con su propia tablet/cuenta; comparte una racha cooperativa mediante código de invitación.
---
## 4. Alcance funcional — Módulos
El producto se compone de **8 módulos** (todos presentes en el prototipo):
1. Onboarding y selección de compañero (Avatar)
2. Dashboard principal de hábitos y rachas
3. Sistema de Monitoreo de Batería (batería baja + bloqueo en carga)
4. Alertas y pantalla de bloqueo del sistema (notificaciones)
5. Museo Diario — Subida de dibujo
6. Museo Diario — Galería / historial
7. Rachas en equipo (cooperativo)
8. Widgets de pantalla de inicio (mediano 2×2 y grande 4×2)
---
## 5. Requisitos funcionales detallados
> Prioridad: **P0** = imprescindible v1 · **P1** = deseable v1 · **P2** = versión futura.
### 5.1 Módulo 1 — Onboarding y selección de compañero (Avatar)
| ID | Requisito | Prioridad |
|---|---|---|
| AV-01 | La niña puede elegir entre 3 mascotas prediseñadas: **Zorro Rachi** (coral #FF8A66), **Gata Menta** (menta #3FB8AE), **Conejo Sol** (amarillo #F4B63E). | P0 |
| AV-02 | Cuarta opción **"Mi dibujo"**: importar una imagen (foto de un dibujo en papel) desde archivo/cámara, que se recorta en forma de "cabeza de mascota" (border-radius orgánico 34%/40%) y se convierte en el avatar personalizado. | P0 |
| AV-03 | La tarjeta seleccionada muestra borde de color y badge "✓ Elegido". | P0 |
| AV-04 | Si ya existe un dibujo personalizado, mostrar opción "Cambiar dibujo" para reemplazarlo sin perder la selección. | P1 |
| AV-05 | El avatar elegido se refleja **en toda la app**: sidebar, tarjeta de ánimo, widgets, overlays de batería, notificaciones y rachas en equipo. | P0 |
| AV-06 | El avatar personalizado hereda los estados de ánimo (idle/cansado/dormido) mediante filtros y overlays (gotas de sudor, "Z" flotantes). | P1 |
| AV-07 | Botón "Continuar" (CTA primario coral, píldora) lleva al Dashboard. | P0 |
| AV-08 | El nombre de la niña es configurable (prop `childName`, default "Lucía") y se usa en saludos y textos. | P0 |
**Estados de la mascota (aplican a las 3 prediseñadas + personalizada):**
- `idle`: ojos abiertos con parpadeo (animación blink cada ~5 s), mejillas rosadas, respiración suave (animación breathe).
- `tired` (cansada): cejas caídas, gota de sudor animada (animación sweat).
- `sleep` (dormida): ojos cerrados en arco, letras "Z" flotando (animación floatZ).
### 5.2 Módulo 2 — Dashboard principal (pantalla "Inicio")
Layout de **3 columnas** sobre lienzo 1280×800:
| Zona | Ancho | Contenido |
|---|---|---|
| Columna izquierda (sidebar fija) | 232 px | Tarjeta de perfil (mascota animada + nombre + badge de nivel "Nv. 7"), barra de XP (320/500), contador de racha con llama animada, menú de navegación (Inicio, Museo Diario, Mi Galería, Rachas en equipo, Alertas, Logros, Ajustes) |
| Columna central (flexible) | flex | Saludo "¡Hola, {nombre}!", fecha + contador de hábitos pendientes, chip "Activa en segundo plano", contador X/Y hoy, **tarjetas de hábitos** |
| Columna derecha | 296 px | Tarjeta "Tu racha" (llama + número grande + semana L-D), acceso "En equipo", tarjeta de mensaje de la mascota, mini-tarjeta "Museo Diario" con CTA "Subir dibujo de hoy" |
| ID | Requisito | Prioridad |
|---|---|---|
| DA-01 | Mostrar los hábitos del día como tarjetas grandes (≥90 px de alto) con: franja de color lateral, ícono en contenedor 62×62, nombre (23 px Baloo 2), subtítulo descriptivo, y botón check circular de **74×74 px**. | P0 |
| DA-02 | Hábitos v1 de ejemplo: **Bañarse** (menta, "Antes de dormir"), **Dormir temprano** (lila, "A las 9:00 pm"), **Ir a la escuela** (coral, "Sin faltar nunca"). Los hábitos deben ser configurables por el adulto (nombre, subtítulo, ícono, color). | P0 (config P1) |
| DA-03 | Al tocar el check: transición a círculo verde #46C98B con palomita SVG animada (stroke draw 0.5 s) + animación pop + badge "¡Hecho!". El toque es **reversible** (toggle) para corregir errores. | P0 |
| DA-04 | Al completar **todos** los hábitos del día: lluvia de **confeti** (26 piezas, colores de la paleta, caída 1.12.1 s), banner "¡Racha asegurada hoy! 🔥" en la tarjeta de racha, y mensaje celebratorio de la mascota ("¡Lo lograste todo, {nombre}! Estoy súper orgulloso de ti."). | P0 |
| DA-05 | El confeti es desactivable (prop/ajuste `confettiOn`) por accesibilidad (sensibilidad a estímulos). | P1 |
| DA-06 | Contador de racha global (prop `streakStart`, ej. 12 días) visible en sidebar y columna derecha con llama animada (flicker 1.51.6 s). | P0 |
| DA-07 | Vista semanal L-M-M-J-V-S-D con círculos marcados (palomita coral) en días cumplidos. | P0 |
| DA-08 | Barra de estado simulada del SO: hora, señal, **porcentaje e ícono de batería** cuyo color/relleno reacciona al estado (86% normal gris, 18% baja coral #FF6B3D, 64% cargando verde #9BE36D). | P0 |
| DA-09 | Header con contador "{hechos}/{total} hoy" en píldora blanca. | P0 |
| DA-10 | La tarjeta de mensaje de la mascota cambia según contexto (ánimo normal vs. celebración). | P1 |
| DA-11 | Regla de racha: la racha del día se asegura al completar el 100% de hábitos antes de medianoche (hora local). Si no, la racha se reinicia a 0 (v1) — considerar "congelador de racha" como P2. | P0 |
### 5.3 Módulo 3 — Sistema de Monitoreo de Batería
**Máquina de estados:** `normal``low` (<20%) → `charging` (conector detectado) → `normal`.
#### 5.3.1 Estado Batería Baja (<20%) — Overlay
| ID | Requisito | Prioridad |
|---|---|---|
| BA-01 | Al caer la batería por debajo del **20%**, mostrar overlay modal (fondo oscurecido rgba(40,30,26,.5) + blur 4 px) sobre cualquier pantalla, z-index superior al contenido pero inferior al bloqueo de carga. | P0 |
| BA-02 | El overlay muestra: mascota en estado **"cansada"** (cejas caídas + sudor, animación breathe), título "¡Me estoy quedando sin energía!", texto con el % real ("Solo me queda **18%** de batería…"), barra de batería visual coral, y 2 botones: **"Ahora no"** (secundario) y **"Conectar cargador"** (primario coral con animación coralpulse). | P0 |
| BA-03 | "Ahora no" cierra el overlay y permite seguir usando la app; el overlay reaparece a umbrales menores (15%, 10%, 5%) — no debe ser spam constante. | P1 |
| BA-04 | El texto y la narrativa presentan la carga como **cuidar a la mascota**, nunca como castigo. | P0 |
| BA-05 | Usar la Battery Status API / API nativa del SO para leer nivel y estado de carga reales. | P0 |
#### 5.3.2 Estado En Carga — Pantalla de bloqueo de seguridad
| ID | Requisito | Prioridad |
|---|---|---|
| CA-01 | Al detectar conexión al cargador, activar **automáticamente** pantalla de bloqueo a pantalla completa (fondo nocturno #2A2350 con estrellas parpadeantes, animación twinkle). Bloquea toda interacción con la app. | P0 |
| CA-02 | Mostrar mascota **dormida** dentro de una "cápsula de energía" (burbuja translúcida con glow pulsante y respiración), título "Entrenando en mi cápsula de energía…", y subtexto "Guarda la tablet mientras se carga. Cuando despierte, ¡estaremos a tope de batería para jugar y dibujar!". | P0 |
| CA-03 | Barra de progreso de carga real (ej. "Cargando · 64%") en verde #9BE36D. | P0 |
| CA-04 | Botón de escape "Ya la desconecté": verifica el estado real; solo desbloquea si el cargador efectivamente se desconectó (evitar bypass). En el prototipo desbloquea directo — en producción validar contra la API. | P0 |
| CA-05 | Al llegar a 100%, la mascota "despierta" con animación de celebración y la pantalla invita a desconectar. | P1 |
| CA-06 | Registro (log local) de eventos de carga para métrica O3. | P2 |
### 5.4 Módulo 4 — Alertas y pantalla de bloqueo del sistema
| ID | Requisito | Prioridad |
|---|---|---|
| AL-01 | Rachita corre **en segundo plano** y envía notificaciones push locales al lockscreen del SO (vista previa simulada en el prototipo: fondo degradado violeta, reloj gigante 9:41, fecha). | P0 |
| AL-02 | Notificación de batería baja: "🔋 ¡Tu zorro está casi sin energía (18%)! Conéctame al cargador para no perder tu racha de {N} días." — con ícono de llama y branding Rachita. | P0 |
| AL-03 | Notificación de carga: "⚡ Estoy entrenando en mi cápsula de energía. Guárdame mientras cargo y volveré recargado. 💤" | P0 |
| AL-04 | Panel de configuración "Cuándo avisarte" con 3 toggles: avisar con poca batería (<20%), recordar no usar mientras carga, recordatorio de hábitos a las 7 pm. | P0 |
| AL-05 | Los toggles deben ser accesibles desde Ajustes con verificación de adulto (gate parental simple, ej. operación matemática). | P1 |
| AL-06 | Indicador visible en el Dashboard ("Activa en segundo plano" con punto verde) que enlaza a esta pantalla. | P1 |
### 5.5 Módulo 5 — Museo Diario · Subir dibujo
| ID | Requisito | Prioridad |
|---|---|---|
| MU-01 | Layout 2 zonas: izquierda = área de previsualización (placeholder rayado con borde punteado "[ aquí aparecerá tu dibujo ]") + 2 botones enormes (150 px ancho, íconos 34 px): **"Tomar foto"** (coral, abre cámara) y **"Abrir galería"** (menta, abre picker de imágenes). | P0 |
| MU-02 | Zona derecha: campo de texto estilizado como **nube de pensamiento** (tarjeta blanca redondeada con burbujas circulares decorativas debajo), placeholder "Hoy dibujé…", tipografía Nunito 16 px. | P0 |
| MU-03 | Botón "Guardar en mi museo" (CTA coral) persiste: imagen + comentario + fecha + medio (opcional) y navega a la Galería. | P0 |
| MU-04 | Máximo 1 dibujo "del día" destacado; permitir múltiples obras por día como P2. | P1 |
| MU-05 | Botón atrás () regresa al Dashboard. Encabezado con fecha del día. | P0 |
| MU-06 | Compresión de imagen local (max ~1600 px lado largo) para almacenamiento eficiente. | P1 |
| MU-07 | Permisos de cámara/galería solicitados en contexto con explicación amigable. | P0 |
### 5.6 Módulo 6 — Museo Diario · Galería (historial)
| ID | Requisito | Prioridad |
|---|---|---|
| GA-01 | Cuadrícula de **3 columnas** con scroll vertical, agrupada por mes con encabezado ("JUNIO 2026"). | P0 |
| GA-02 | Primera celda fija: tarjeta punteada **"Sube el de hoy"** (+ circular coral) que navega a Subir dibujo. | P0 |
| GA-03 | Cada obra: tarjeta blanca con imagen (150 px alto), **chip de fecha** superpuesto, etiqueta de medio (crayón/acuarela/marcador/lápiz), título y comentario de la niña. | P0 |
| GA-04 | Contador total de obras en el encabezado ("12 obras · sigue creando, {nombre}"). | P1 |
| GA-05 | Tocar una obra abre vista detalle a pantalla completa con zoom (pinch) — P1 en prototipo no implementado. | P1 |
| GA-06 | Exportar/compartir una obra (a padres, por canal seguro) — P2. | P2 |
### 5.7 Módulo 7 — Rachas en equipo (cooperativo)
| ID | Requisito | Prioridad |
|---|---|---|
| EQ-01 | La niña puede tener **rachas compartidas** con otras personas (amiga, hermana, madre/padre). v1 del prototipo: 2 equipos activos (Ana — mejor amiga, racha 8, "Dormir temprano"; Dani — hermana mayor, racha 5, "Leer 10 minutos"). | P0 |
| EQ-02 | Regla cooperativa: **la racha del equipo crece solo si ambas cumplen el mismo día**; si una falla, "la racha descansa" (lenguaje no punitivo). | P0 |
| EQ-03 | Tarjeta por equipo: avatares de ambas unidos por un corazón coral, nombre y rol del compañero, llama + días juntas, "Reto en común", 2 chips de estado (✓ Hiciste tu parte hoy / ⏳ Aún te falta hoy · ✓ {Nombre} ya cumplió / ⏳ {Nombre} va en camino), semana de puntos L-D. | P0 |
| EQ-04 | CTA contextual según estado: **"Hacer mi parte ✓"** (si no ha cumplido) → **"Enviar ánimo a {Nombre} 💪"** (si ella cumplió y la otra no) → confirmación "¡Ánimo enviado! 🎉" → **"¡Racha a salvo hoy! 🔥"** (ambas cumplieron, con animación glow). | P0 |
| EQ-05 | El "ánimo" es un mensaje predefinido/sticker — **sin texto libre** (seguridad infantil). | P0 |
| EQ-06 | Tarjeta de invitación: código corto legible ("LUCIA-7F3"), tocar para copiar (feedback "¡Código copiado! ✓") y botón "Compartir invitación" (share sheet del SO gestionado por el adulto). | P0 |
| EQ-07 | Emparejamiento requiere aprobación del adulto en ambos extremos. | P0 |
| EQ-08 | Límite v1: máximo 3 equipos activos. | P1 |
### 5.8 Módulo 8 — Widgets de pantalla de inicio
| ID | Requisito | Prioridad |
|---|---|---|
| WI-01 | **Widget Mediano (2×2, ~200×200):** mascota mini + llama con racha, texto "HOY · X/Y", fila de 3 botones-hábito (34 px alto) marcables con un toque **sin abrir la app**. | P0 |
| WI-02 | **Widget Grande (4×2, ~430×200):** panel izquierdo con llama + número de racha + "días de racha"; panel derecho con lista de hábitos (checkbox 30×30 + nombre, tachado/atenuado al completarse). | P0 |
| WI-03 | Los toques en el widget actualizan el estado central (sincronización bidireccional con la app y entre widgets). | P0 |
| WI-04 | El widget refleja el avatar elegido y el color de estado (✓ verde #46C98B / ○ beige #F1E6DE). | P1 |
| WI-05 | Implementación nativa: App Widgets (Android) / WidgetKit (iPadOS). | P0 |
---
## 6. Guía de estilo visual (Design System)
### 6.1 Paleta de colores
| Nombre | Hex | Uso |
|---|---|---|
| **Coral** | `#FF8A66` | Primario: CTAs, marca, mascota zorro, racha |
| Coral intenso | `#FF6B3D` | Números de racha, alertas de batería baja |
| **Menta** | `#3FB8AE` | Secundario: hábitos, gata, botón galería |
| **Sol** | `#FBC24E` / `#F4B63E` | XP, logros, conejo |
| **Lila** | `#8C7CE8` | Museo Diario, notificaciones de carga |
| Verde éxito | `#46C98B` | Checks completados, toggles activos |
| Verde carga | `#9BE36D` | Barra de carga de batería |
| Rosa | `#FF6B8A` | Alertas (ítem de menú) |
| **Crema** | `#FFF6EE` | Fondo principal de la app |
| Crema cálido | `#FFE9DF` / `#FFF1E8` | Fondos de tarjetas suaves |
| **Tinta** | `#43352F` | Texto principal |
| Gris cálido | `#a4938a` / `#8a7a72` | Texto secundario |
| Noche | `#2A2350` / degradado `#39306E→#5A4E97→#B98FC4` | Pantallas de carga y lockscreen |
Colores "soft" pareados por hábito: menta `#D6F3F0`, lila `#E7E3FB`, coral `#FFE0D5`.
### 6.2 Tipografía
| Fuente | Pesos | Uso |
|---|---|---|
| **Baloo 2** (redonda, amigable) | 500800 | Títulos, números grandes, botones, badges |
| **Nunito** (alta legibilidad) | 400800 | Cuerpo, descripciones, subtítulos |
Escala: títulos de pantalla 2634 px · nombres de hábito 23 px · número de racha 4292 px · cuerpo 1316 px · captions 1112 px.
### 6.3 Formas, sombras y touch targets
- **Radios:** 1424 px en tarjetas; 999 px (píldora) en CTAs y chips; 50% en checks.
- **Sombras:** suaves y cálidas, teñidas del color del elemento (ej. `0 12px 24px rgba(255,138,102,.32)` para coral). Nunca sombras negras duras.
- **Áreas de toque:** mínimo **58 px**; el check de hábito es de 74 px (regla clave para manos pequeñas).
- Botón primario = píldora coral con sombra; secundario = borde 2 px `#EBDFD7` sobre blanco.
### 6.4 Catálogo de animaciones (microinteracciones)
| Animación | Duración | Uso |
|---|---|---|
| `breathe` | 2.43.6 s loop | Respiración de la mascota |
| `flicker` | 1.51.6 s loop | Llama de racha |
| `pop` | 0.350.4 s | Aparición de checks, badges "¡Hecho!" |
| `drawCheck` | 0.5 s | Trazo de la palomita SVG |
| `confFall` | 1.12.1 s | Confeti al completar todo |
| `glow` | 2.43 s loop | Halo verde "racha a salvo" y cápsula de carga |
| `coralpulse` | 1.6 s loop | CTA urgente "Conectar cargador" |
| `slideUp` | 0.40.5 s | Entrada de modales y notificaciones |
| `twinkle` | 2.23 s loop | Estrellas en pantallas nocturnas |
| `blink` | 5 s loop | Parpadeo de ojos de la mascota |
| `sweat` | 2.4 s loop | Gota de sudor (estado cansado) |
| `floatZ` | 2.6 s loop | Letras "Z" (estado dormido) |
Todas las animaciones deben respetar `prefers-reduced-motion` (P1).
---
## 7. Flujos de interacción clave
### 7.1 Completar un hábito
```mermaid
flowchart LR
A[Dashboard] --> B[Tap en check 74px]
B --> C[Check verde + drawCheck + pop + badge ¡Hecho!]
C --> D{¿Todos los hábitos listos?}
D -- No --> E[Contador X/Y actualiza · pendientes -1]
D -- Sí --> F[Confeti 26 piezas + Racha asegurada 🔥 + mensaje de mascota orgullosa]
F --> G[Racha global +1 al cierre del día]
```
### 7.2 Batería baja → carga → desbloqueo
```mermaid
flowchart TD
A[Uso normal · batería 86%] --> B{Batería < 20%}
B --> C[Overlay: mascota cansada + barra 18% + 2 botones]
C -- "Ahora no" --> D[Sigue usando · re-alerta en 15/10/5%]
C -- "Conectar cargador" --> E[Niña conecta la tablet]
D --> E
E --> F[Bloqueo automático: mascota dormida en cápsula + estrellas]
F --> G{¿Cargador desconectado?}
G -- "Ya la desconecté" + verificación --> H[Regresa al Dashboard]
G -- Carga al 100% --> I[Mascota despierta + celebración] --> H
```
### 7.3 Racha en equipo (día típico)
1. Lucía abre "Rachas en equipo" → ve tarjeta de Ana con "⏳ Aún te falta hoy".
2. Toca **"Hacer mi parte ✓"** → su chip pasa a verde.
3. Ana aún no cumple → aparece **"Enviar ánimo a Ana 💪"**.
4. Lucía lo toca → "¡Ánimo enviado! 🎉" (Ana recibe notificación con sticker).
5. Ana cumple → ambas ven **"¡Racha a salvo hoy! 🔥"** con glow y la racha sube a 9.
### 7.4 Museo diario
Dashboard → "Subir dibujo de hoy" → Tomar foto / Abrir galería → previsualización → escribir comentario en nube de pensamiento → "Guardar en mi museo" → Galería con la obra nueva y chip de fecha.
---
## 8. Navegación y arquitectura de información
```
Rachita
├── Onboarding (primera vez): Elegir compañero → Dashboard
├── Dashboard (Inicio) ← pantalla raíz
│ ├── Museo Diario (subir) → Mi Galería
│ ├── Mi Galería → detalle de obra (P1)
│ ├── Rachas en equipo → invitar compañero
│ ├── Alertas → toggles de notificación
│ ├── Logros (P1 — placeholder en menú)
│ └── Ajustes (P1 — gate parental)
├── Overlays globales (cualquier pantalla)
│ ├── Batería baja (modal)
│ └── En carga (bloqueo total)
└── Fuera de la app
├── Widget mediano 2×2 · Widget grande 4×2
└── Notificaciones en lockscreen
```
Profundidad máxima: 2 niveles. Botón atrás () siempre en la misma posición (arriba-izquierda, 40×40).
---
## 9. Modelo de datos (v1)
```ts
Profile {
childName: string // default "Lucía"
avatar: 'fox' | 'cat' | 'rabbit' | 'custom'
customAvatarSrc?: string // dataURL/imagen local
level: number // ej. 7
xp: number // ej. 320 / xpToNext: 500
streak: number // días de racha global
}
Habit {
id: string // 'banarse' | 'dormir' | 'escuela' | ...
name: string; sub: string
icon: 'drop' | 'moon' | 'book' | ...
color: string; soft: string
doneToday: boolean
history: Record<ISODate, boolean>
}
Artwork {
id: string; date: ISODate
imageUri: string; title: string
note: string // comentario de la niña
medium?: 'crayón'|'acuarela'|'marcador'|'lápiz'
}
TeamStreak {
id: string
partner: { name: string; role: string; avatar: AvatarKind }
sharedHabit: string
streak: number
myDoneToday: boolean; theirDoneToday: boolean
nudgedToday: boolean
week: (0|1)[] // últimos 7 días
}
Settings {
notifyLowBattery: boolean // default true
notifyWhileCharging: boolean // default true
habitReminderAt?: string // ej. "19:00", default off
confettiOn: boolean // default true
}
```
Persistencia v1: almacenamiento local del dispositivo. Rachas en equipo requieren backend mínimo (sync de estado diario + códigos de invitación).
---
## 10. Requisitos no funcionales
| Categoría | Requisito |
|---|---|
| **Rendimiento** | 60 fps en animaciones; arranque < 2 s; imágenes de galería lazy-load |
| **Batería** | El monitoreo en segundo plano debe consumir < 1% batería/día (usar eventos del SO, no polling) |
| **Privacidad infantil** | Cumplir COPPA / GDPR-K: sin anuncios, sin tracking de terceros, sin texto libre entre usuarios, datos del menor cifrados, imágenes solo locales salvo consentimiento parental |
| **Seguridad** | Gate parental para Ajustes e invitaciones; validación real del estado de carga (no confiar en el botón de escape); códigos de invitación de un solo uso con expiración |
| **Accesibilidad** | Touch targets ≥ 58 px; contraste AA en textos sobre crema; `prefers-reduced-motion`; textos cortos con emojis de apoyo; opción de desactivar confeti |
| **Idioma** | v1 español (MX); arquitectura preparada para i18n |
| **Offline** | Hábitos, museo y batería funcionan 100% offline; rachas en equipo se sincronizan al reconectar con resolución "el día cuenta si se marcó localmente ese día" |
| **Compatibilidad** | Tablets ≥ 8" · Android 10+ / iPadOS 15+ · solo landscape (bloquear rotación) |
---
## 11. Analítica (respetando privacidad infantil)
Eventos mínimos, anónimos y agregados (sin PII):
- `habit_completed`, `all_habits_completed_day`
- `streak_incremented`, `streak_lost`
- `battery_low_shown`, `battery_low_dismissed`, `charging_lock_shown`, `charging_lock_bypassed`
- `artwork_uploaded` (sin contenido), `gallery_opened`
- `team_streak_created`, `nudge_sent`, `team_streak_safe`
- `widget_habit_toggled` (por tamaño de widget)
---
## 12. Criterios de aceptación (resumen QA)
1. ✅ Con batería simulada al 18%, el overlay de batería baja aparece sobre cualquier pantalla y muestra la mascota cansada con el % correcto.
2. ✅ Al conectar el cargador, el bloqueo aparece en < 1 s sin interacción del usuario; no se puede navegar detrás de él.
3. ✅ "Ya la desconecté" NO desbloquea si el cable sigue conectado.
4. ✅ Marcar los 3 hábitos dispara confeti una sola vez, y desmarcar/remarcar no lo repite en el mismo estado.
5. ✅ El avatar personalizado importado aparece en sidebar, widgets, overlay de batería (con sudor) y cápsula de carga (con Z).
6. ✅ Marcar un hábito desde el widget actualiza el Dashboard al abrir la app, y viceversa.
7. ✅ En racha en equipo, el CTA sigue exactamente la secuencia: Hacer mi parte → Enviar ánimo → Ánimo enviado → Racha a salvo.
8. ✅ Con `confettiOn = false`, completar todo no muestra confeti pero sí el banner y el mensaje de la mascota.
9. ✅ Todos los touch targets interactivos miden ≥ 58 px en dispositivo real.
10. ✅ La app funciona sin conexión para hábitos y museo.
---
## 13. Riesgos y mitigaciones
| Riesgo | Impacto | Mitigación |
|---|---|---|
| La niña descubre cómo saltarse el bloqueo de carga | Alto (rompe O3) | Validar contra API del SO; el botón de escape verifica el estado real; modo kiosco opcional (P2) |
| Pérdida de racha genera frustración/abandono | Alto | Lenguaje no punitivo ("la racha descansa"), congelador de racha (P2), la mascota nunca "muere" |
| Notificaciones en segundo plano restringidas por el SO | Medio | Solicitar exención de optimización de batería con explicación al adulto; degradar con recordatorios al abrir |
| Fotos del museo con contenido sensible | Medio | Almacenamiento solo local por defecto; compartir requiere gate parental |
| Widget con estado desincronizado | Medio | Fuente de verdad única en almacenamiento compartido app↔widget; refresh al abrir |
| Complejidad del emparejamiento entre familias | Medio | Códigos cortos legibles + aprobación de adulto en ambos lados |
---
## 14. Roadmap sugerido
| Fase | Alcance |
|---|---|
| **MVP (v1.0)** | Onboarding/avatar (3 mascotas + dibujo importado), Dashboard con 3 hábitos, racha global, batería baja + bloqueo de carga, notificaciones locales, museo (subir + galería), widgets 2×2 y 4×2 |
| **v1.1** | Hábitos configurables por el adulto, gate parental, ajustes, congelador de racha, detalle de obra con zoom, `prefers-reduced-motion` |
| **v1.2** | Rachas en equipo con backend + invitaciones, envío de ánimos, logros (pantalla completa) |
| **v2.0** | Multi-perfil, más mascotas/accesorios desbloqueables por XP, exportar museo en PDF "libro de arte", sonidos y voz de mascota |
---
## 15. Funcionalidades deseables (backlog de ideas — no comprometidas)
> Ninguna de estas funcionalidades bloquea el MVP. Son propuestas para enriquecer el producto una vez validado el core. Cada una indica el módulo al que extiende y su valor esperado.
### 15.1 Gamificación y mascota
| ID | Funcionalidad | Descripción | Valor |
|---|---|---|---|
| D-01 | **Accesorios y evolución de la mascota** | Desbloquear sombreros, bufandas, fondos de habitación con XP; la mascota "crece" visualmente al subir de nivel (Nv. 110 con 3 etapas). | Refuerza retención (O2) dando destino al XP, hoy solo visual |
| D-02 | **Habitación de la mascota** | Espacio decorable donde vive el compañero; los muebles se ganan con rachas largas (7, 14, 30 días). | Metas de mediano plazo más allá de la racha diaria |
| D-03 | **Congelador de racha ("poción de descanso")** | 1 por semana: si falla un día, la racha "duerme" en vez de perderse. Se gana completando semanas perfectas. | Mitiga el riesgo #2 (frustración por pérdida de racha) |
| D-04 | **Logros coleccionables** | Pantalla de Logros (hoy placeholder en el menú) con insignias ilustradas: "Primera semana", "Artista x10", "Madrugadora", "Cargadora responsable" (cargar la tablet sin protestar 5 veces). | Completa el ítem de menú existente; celebra conductas específicas |
| D-05 | **Sonidos y voz de la mascota** | Efectos suaves al marcar hábitos, ronquidos en la cápsula, "¡bien hecho!" grabado. Con toggle de silencio y respetando el modo silencio del SO. | Refuerzo multisensorial para no-lectores |
| D-06 | **Reacciones de la mascota al clima/hora** | La mascota saluda distinto en la mañana/noche y comenta el clima (API local u hora del sistema). | Sensación de "ser vivo", vínculo emocional |
### 15.2 Hábitos y rutinas
| ID | Funcionalidad | Descripción | Valor |
|---|---|---|---|
| D-07 | **Editor de hábitos para el adulto** | CRUD completo tras gate parental: nombre, subtítulo, ícono (catálogo ampliado), color, días de la semana aplicables y horario límite. | Hoy los 3 hábitos están fijos; es la petición #1 esperable de padres |
| D-08 | **Hábitos con pasos (checklist hija)** | Un hábito puede tener sub-pasos ilustrados (ej. "Lavarse los dientes": tomar cepillo → pasta → 2 minutos → enjuagar) con temporizador visual. | Guía a niños pequeños que no saben "qué cuenta como hecho" |
| D-09 | **Temporizador visual infantil** | Cuenta regresiva tipo "pastel que se come" para hábitos con duración (leer 10 min, cepillado 2 min). | Los niños de 68 no dimensionan el tiempo abstracto |
| D-10 | **Rutinas por momento del día** | Agrupar hábitos en "Mañana / Tarde / Noche" con encabezados y orden sugerido; el dashboard resalta la rutina activa según la hora. | Reduce carga cognitiva cuando hay >5 hábitos |
| D-11 | **Verificación con foto (opcional)** | El adulto puede marcar un hábito como "requiere evidencia": la niña toma una foto (cama tendida, mochila lista) que el adulto aprueba. | Confianza para hábitos no observables |
### 15.3 Museo y creatividad
| ID | Funcionalidad | Descripción | Valor |
|---|---|---|---|
| D-12 | **Lienzo de dibujo integrado** | Dibujar directamente en la tablet (pincel, crayón, colores de la paleta Rachita) además de fotografiar dibujos en papel. | Elimina fricción cámara/papel; aprovecha el stylus |
| D-13 | **Marcos y sellos para las obras** | Decorar la obra del día con marcos desbloqueables y stickers de la mascota antes de guardarla. | Conecta gamificación con creatividad |
| D-14 | **"Libro de arte" exportable** | Generar PDF mensual con las obras, fechas y comentarios, listo para imprimir o enviar a los abuelos (vía adulto). | Valor tangible para la familia; ya sugerido en v2.0 del roadmap |
| D-15 | **Reto creativo del día** | Sugerencia opcional al abrir el museo: "Hoy dibuja… tu animal favorito con sombrero". Rotación de ~90 prompts. | Resuelve el "no sé qué dibujar", aumenta O4 |
| D-16 | **Nota de voz en la obra** | Además del comentario escrito, grabar hasta 30 s explicando el dibujo (para niñas que aún no escriben fluido). | Accesibilidad por edad; recuerdo familiar valioso |
### 15.4 Familia y social seguro
| ID | Funcionalidad | Descripción | Valor |
|---|---|---|---|
| D-17 | **Panel del adulto (reporte semanal)** | Vista tras gate parental o web: % de cumplimiento, evolución de racha, obras nuevas, eventos de carga. Opcional resumen por correo. | Cierra el loop con el configurador (persona secundaria) |
| D-18 | **Reacciones familiares a las obras** | Los compañeros de equipo aprobados pueden reaccionar a un dibujo con stickers predefinidos (👏 ⭐ ❤️). Sin comentarios de texto libre. | Audiencia para el museo sin riesgo de chat |
| D-19 | **Racha familiar (3+ miembros)** | Extender rachas en equipo a grupos ("Toda la familia lee 10 min"); la racha crece solo si todos cumplen. | Evolución natural de EQ-01 con la misma regla cooperativa |
| D-20 | **Metas con recompensa del mundo real** | El adulto define una recompensa pactada ("30 días de racha = ida al cine") visible como termómetro de progreso. | Puente entre motivación digital y familiar |
### 15.5 Bienestar digital y batería
| ID | Funcionalidad | Descripción | Valor |
|---|---|---|---|
| D-21 | **Modo "hora de dormir"** | A la hora configurada, la app baja brillo/paleta a tonos nocturnos y la mascota bosteza e invita a cerrar; opcional bloqueo suave hasta la mañana. | Extiende la mecánica de cuidado más allá de la batería |
| D-22 | **Límite de tiempo de uso diario** | Presupuesto de minutos configurado por el adulto; la mascota "se cansa" gradualmente al agotarse (misma narrativa que batería baja). | Higiene digital coherente con el sistema existente |
| D-23 | **Historial de cuidado de batería** | Mini-pantalla con calendario de días en que cargó la tablet correctamente; alimenta el logro "Cargadora responsable" (D-04). | Refuerza O3 con feedback positivo visible |
| D-24 | **Modo kiosco/anclaje opcional** | Integración con Screen Pinning (Android) / Acceso Guiado (iPadOS) para que el bloqueo de carga no pueda evadirse saliendo de la app. | Mitiga el riesgo #1 (bypass del bloqueo) |
### 15.6 Plataforma y accesibilidad
| ID | Funcionalidad | Descripción | Valor |
|---|---|---|---|
| D-25 | **Narración por voz (TTS)** | Botón de altavoz que lee títulos y mensajes en voz alta; opción "leer todo automáticamente" para pre-lectores. | Amplía el rango de edad hacia abajo (46 años) |
| D-26 | **Temas de paleta alternativos** | 23 variantes (noche, alto contraste, y una paleta fría) manteniendo la misma jerarquía visual. | Accesibilidad visual y preferencia personal |
| D-27 | **Multi-perfil por dispositivo** | Hasta 3 niños en la misma tablet con selector de perfil al abrir (avatar como identificador, sin contraseña). | Realidad de tablets familiares compartidas; ya en v2.0 |
| D-28 | **Copia de seguridad familiar** | Backup cifrado del perfil, historial y museo en la nube activado por el adulto, con restauración al cambiar de dispositivo. | Protege años de rachas y dibujos (hoy todo es local) |
| D-29 | **Soporte multi-idioma** | Inglés como segundo idioma aprovechando la arquitectura i18n prevista en §10. | Ampliación de mercado |
### Priorización sugerida del backlog
| Horizonte | Candidatas |
|---|---|
| **Corto plazo** (mayor valor / menor esfuerzo) | D-03 congelador de racha · D-07 editor de hábitos · D-04 logros · D-15 reto creativo · D-23 historial de carga |
| **Mediano plazo** | D-01 accesorios · D-12 lienzo de dibujo · D-17 panel del adulto · D-21 hora de dormir · D-16 nota de voz · D-24 modo kiosco |
| **Largo plazo** | D-02 habitación · D-14 libro de arte · D-19 racha familiar · D-25 TTS · D-27 multi-perfil · D-28 backup en la nube |
---
## 16. Preguntas abiertas
1. ¿La racha global se pierde por completo al fallar un día, o se adopta "congelador" desde v1? (Recomendación: v1 simple, congelador en v1.1.)
2. ¿Los hábitos tienen horario límite individual (ej. "Bañarse antes de 9 pm") que afecte cuándo cuentan para la racha?
3. ¿El "medio" del dibujo (crayón/acuarela/…) lo etiqueta la niña, el adulto, o se omite en v1?
4. ¿Qué SO se prioriza para el primer release (Android tablet vs iPad)? Los widgets interactivos tienen restricciones distintas por plataforma.
5. ¿El nivel/XP (Nv. 7, 320/500) tiene tabla de progresión definida y recompensas asociadas, o es solo visual en v1?
6. ¿Se necesita panel/vista para el adulto (web o dentro de la app tras gate) con reporte semanal?
---
## Apéndice A — Inventario del prototipo `Rachita.html`
| Pantalla (tab) | Estado en prototipo | Cobertura PRD |
|---|---|---|
| Guía (estilo visual) | ✅ Completa | §6 |
| Avatar (elegir compañero) | ✅ Completa con import de imagen funcional | §5.1 |
| Inicio (dashboard) | ✅ Completa con toggles y confeti funcionales | §5.2 |
| Equipo (rachas compartidas) | ✅ Completa con máquina de estados de CTA | §5.7 |
| Alertas (lockscreen + toggles) | ✅ Visual completa (toggles estáticos) | §5.4 |
| Museo (subir) | ✅ Visual completa (cámara/galería simuladas) | §5.5 |
| Galería | ✅ Completa con 5 obras de ejemplo + celda "sube el de hoy" | §5.6 |
| Widgets | ✅ Ambos tamaños funcionales (toggle real) | §5.8 |
| Batería baja / En carga | ✅ Overlays funcionales vía botones de simulación | §5.3 |
**Props configurables del prototipo:** `childName` (texto, default "Lucía"), `streakStart` (0365, default 12), `confettiOn` (booleano, default true).