Pantalla: Logros de Adherencia¶

Identificador: SCR-ADH-009 Modulo: MTS-ADH-001 - Motor de Adherencia Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado FASE: 2 - Value

1. Informacion General¶

Atributo	Valor
Nombre	Logros de Adherencia
Proposito	Gamificacion - badges y logros desbloqueados
Tipo	Full Screen
Acceso	SCR-ADH-001 > "Ver logros" o Tap en racha
Prioridad	Media
Referencia	MTS-GAM-001 (Gamificacion)

2. Wireframe ASCII¶

2.1. Estado: Con Logros¶

+------------------------------------------+
|  [<]    Mis Logros                        |
+------------------------------------------+
|                                           |
|  ┌─────────────────────────────────────┐  |
|  │                                     │  |
|  │       🔥 Tu racha actual 🔥         │  |
|  │                                     │  |
|  │            21 dias                  │  |  <- Destacado
|  │                                     │  |
|  │     Solo 2 dias para tu record!     │  |
|  │     Record actual: 23 dias          │  |
|  │                                     │  |
|  └─────────────────────────────────────┘  |
|                                           |
|  RACHAS                                   |
|  ┌────────┬────────┬────────┬────────┐   |
|  │  🔥    │  🔥🔥  │ 🔥🔥🔥 │  ⭐   │   |
|  │  3d    │  7d    │  14d   │  30d  │   |
|  │  [✓]   │  [✓]   │  [✓]   │  [○]  │   |
|  └────────┴────────┴────────┴────────┘   |
|                                           |
|  ADHERENCIA PERFECTA                      |
|  ┌────────┬────────┬────────┬────────┐   |
|  │  💯    │  💯    │  💯    │  🏆   │   |
|  │  1dia  │  7dias │ 1mes   │ 3mes  │   |
|  │  [✓]   │  [✓]   │  [○]   │  [○]  │   |
|  └────────┴────────┴────────┴────────┘   |
|                                           |
|  MEJORA CONTINUA                          |
|  ┌────────┬────────┬────────┬────────┐   |
|  │  📈    │  📈    │  📈    │  📈   │   |
|  │ +5%    │ +10%   │ +15%   │ +20%  │   |
|  │  [✓]   │  [✓]   │  [✓]   │  [○]  │   |
|  └────────┴────────┴────────┴────────┘   |
|                                           |
|  HITOS                                    |
|  ┌────────┬────────┬────────┬────────┐   |
|  │  💊    │  💊    │  💊    │  💊   │   |
|  │  100   │  500   │ 1000   │ 5000  │   |
|  │  [✓]   │  [✓]   │  [○]   │  [○]  │   |
|  └────────┴────────┴────────┴────────┘   |
|                                           |
|  ─────────────────────────────────────    |
|                                           |
|  Progreso total: 12 de 20 logros (60%)   |
|  ████████████████████░░░░░░░░░░░░        |
|                                           |
+------------------------------------------+

+------------------------------------------+
|                                           |
|                                           |
|          ┌─────────────────┐              |
|          │                 │              |
|          │      🔥🔥🔥     │              |
|          │                 │              |
|          └─────────────────┘              |
|                                           |
|          Nuevo logro!                     |
|                                           |
|        RACHA DE 14 DIAS                   |
|                                           |
|   "Has mantenido tu adherencia perfecta   |
|    durante 2 semanas consecutivas!"       |
|                                           |
|   +150 puntos                             |
|                                           |
|   ┌─────────────────────────────────────┐ |
|   │  📈 Siguiente: Racha de 30 dias     │ |
|   │     Solo 16 dias mas!               │ |
|   └─────────────────────────────────────┘ |
|                                           |
|   [Compartir]         [Continuar]         |
|                                           |
+------------------------------------------+

2.3. Estado: Detalle de Badge¶

+------------------------------------------+
|                                           |
|          ┌─────────────────┐              |
|          │                 │              |
|          │       💯        │              |
|          │                 │              |
|          └─────────────────┘              |
|                                           |
|        SEMANA PERFECTA                    |
|                                           |
|   "Logra 100% de adherencia durante       |
|    una semana completa"                   |
|                                           |
|   Estado: Completado ✓                    |
|   Fecha: 15 Nov 2024                      |
|   Puntos: +100                            |
|                                           |
|   ─────────────────────────────────────   |
|                                           |
|   🏅 Logrado por 23% de usuarios          |
|                                           |
|   [Compartir]         [Cerrar]            |
|                                           |
+------------------------------------------+

3. Componentes UI¶

3.1. Current Streak Hero¶

Propiedad	Valor
Componente	CMP-ADH-018 (StreakHero) NUEVO
Background	Gradient primary
Icono	Fuego animado
Numero	Bold, 48sp
Progress to next	Texto motivacional

3.2. Badge Grid¶

Propiedad	Valor
Componente	CMP-ADH-019 (BadgeGrid) NUEVO
Layout	4 columnas
Item size	80x80dp
Gap	8dp

3.3. Badge Item¶

Propiedad	Valor
Componente	CMP-ADH-020 (BadgeItem) NUEVO
Size	80x80dp
Icono	Emoji grande 32sp
Label	12sp, debajo
Estado	Check o circle

Estados de Badge:

Estado	Visualizacion
Desbloqueado	Color full, check badge
Bloqueado	Grayscale, opacity 0.5
Proximo	Border pulsante
Nuevo	Glow animation

3.4. Category Header¶

Propiedad	Valor
Texto	Uppercase, medium
Color	neutral.600
Margin	24dp top, 8dp bottom

Propiedad	Valor
Componente	CMP-ADH-021 (AchievementModal) NUEVO
Background	White con confetti
Icono	Grande, animado
Puntos	Highlight color
Next goal	Card secundaria

4. Comportamientos¶

4.1. Gestos¶

Gesto	Elemento	Accion
Tap	Badge desbloqueado	Abrir detalle
Tap	Badge bloqueado	Mostrar requisitos
Tap	"Compartir"	Share con imagen
Long press	Badge	Preview rapido

4.2. Animaciones¶

Trigger	Animacion
Badge nuevo	Pulse + glow loop
Desbloqueo	Modal con confetti
Streak	Fuego animado
Barra progreso	Fill animado

4.3. Gamificacion Rules¶

Logro	Requisito	Puntos
Racha 3 dias	3 dias consecutivos 100%	25
Racha 7 dias	7 dias consecutivos 100%	50
Racha 14 dias	14 dias consecutivos 100%	150
Racha 30 dias	30 dias consecutivos 100%	500
Semana perfecta	7 dias 100% (no consecutivos)	100
Mes perfecto	30 dias 100% (no consecutivos)	300
Mejora +5%	Subir 5% vs mes anterior	50
100 tomas	Acumular 100 tomas	20
1000 tomas	Acumular 1000 tomas	200

5. Datos Requeridos¶

5.1. Input Data¶

interface AchievementsData {
  // Current streak
  currentStreak: number;
  bestStreak: number;
  nextStreakMilestone: number;
  daysToNextMilestone: number;

  // Categories
  categories: AchievementCategory[];

  // Progress
  totalAchievements: number;
  unlockedAchievements: number;
  totalPoints: number;

  // New achievements
  newAchievements: string[];    // IDs to highlight
}

interface AchievementCategory {
  id: string;
  name: string;                  // "RACHAS", "ADHERENCIA PERFECTA"
  achievements: Achievement[];
}

interface Achievement {
  id: string;
  icon: string;                  // Emoji
  name: string;
  description: string;
  requirement: string;
  points: number;
  status: 'LOCKED' | 'UNLOCKED' | 'NEW';
  unlockedAt?: Date;
  progress?: number;             // 0-100 for locked
  isNext: boolean;               // Proximo a desbloquear
  rarity?: number;               // % de usuarios que lo tienen
}

5.2. Output Events¶

Evento	Payload	Destino
onBadgeTap	achievement_id	Detalle modal
onShare	achievement_id	Share sheet
onDismissNew	achievement_id	Marcar visto

6. Accesibilidad¶

6.1. Labels¶

Elemento	accessibilityLabel
Badge desbloqueado	"{nombre}, completado, {puntos} puntos"
Badge bloqueado	"{nombre}, bloqueado, {progreso}%"
Streak	"Racha actual de {N} dias"
Progress	"{N} de {M} logros completados"

Evento	Anuncio
Nuevo logro	"Felicidades! Desbloqueaste {nombre}"
Pantalla cargada	"{N} logros desbloqueados. Racha de {M} dias"

7. Metricas¶

7.1. Analytics Events¶

Evento	Parametros
screen_view	screen_name: "achievements"
badge_tap	badge_id, status
achievement_share	badge_id
achievement_unlocked	badge_id, points

8. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)