Pantalla: Perfil Principal¶

Identificador: SCR-USR-001 Nombre: Perfil Principal Modulo: MTS-USR-001 - Gestion de Usuarios Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight)

1. Informacion General¶

Atributo	Valor
Tipo	Pantalla principal de seccion
Acceso	Bottom Navigation > Perfil/Mas
Roles	PI, CR
Tiers	Free, Pro, Perfect
Prioridad	Alta

2. Proposito¶

Pantalla central de gestion del perfil de usuario. Muestra resumen de informacion personal, medica y opciones de configuracion. Es el hub de acceso a todas las funciones de perfil y configuracion.

3. Wireframe¶

+--------------------------------------------------+
| [<]  Mi Perfil                              [?]  |
+--------------------------------------------------+
|                                                   |
|            +---------------+                      |
|            |     [Avatar]  |                      |
|            |       CR      |                      |
|            +---------------+                      |
|                                                   |
|         Maria Garcia Lopez                        |
|         maria@email.com                           |
|         +52 55 1234 5678                          |
|                                                   |
|         [Tier Badge: Pro]                         |
|                                                   |
+--------------------------------------------------+
| CUENTA                                            |
+--------------------------------------------------+
|  [user-icon]   Datos Personales              [>] |
|                Nombre, email, telefono            |
+--------------------------------------------------+
|  [heart-icon]  Informacion Medica            [>] |
|                Alergias, condiciones              |
+--------------------------------------------------+
|  [people-icon] Mis Cuidadores                [>] |
|                3 activos, 1 pendiente             |
+--------------------------------------------------+
|  [alert-icon]  Contactos Emergencia          [>] |
|                2 contactos configurados           |
+--------------------------------------------------+
|                                                   |
+--------------------------------------------------+
| PREFERENCIAS                                      |
+--------------------------------------------------+
|  [gear-icon]   Preferencias de App           [>] |
|                Idioma, formato, tema              |
+--------------------------------------------------+
|  [shield-icon] Privacidad y Datos            [>] |
|                Permisos, exportar                 |
+--------------------------------------------------+
|  [share-icon]  Perfil Medico Compartible     [>] |
|                QR, PDF, enlace                    |
+--------------------------------------------------+
|                                                   |
+--------------------------------------------------+
| CUENTA                                            |
+--------------------------------------------------+
|  [logout-icon] Cerrar Sesion                 [>] |
+--------------------------------------------------+
|  [trash-icon]  Eliminar Cuenta               [>] |
|                (texto rojo)                       |
+--------------------------------------------------+
|                                                   |
|         Version 1.0.0 (Build 1234)               |
|                                                   |
+--------------------------------------------------+
| [Home] [Meds] [+] [Calendar] [Profile]  <-active |
+--------------------------------------------------+

4. Elementos de UI¶

4.1. Componentes¶

ID	Componente	Tipo	Requerido
header	Top App Bar	CMP-NAV-002	Si
avatar	Profile Avatar	Custom	Si
tier_badge	Tier Indicator	CMP-DAT-003	Si
section_account	Section Header	Text	Si
row_personal	Menu Row	CMP-LST-002	Si
row_medical	Menu Row	CMP-LST-002	Si
row_caregivers	Menu Row + Badge	CMP-LST-002	Si
row_emergency	Menu Row	CMP-LST-002	Si
section_prefs	Section Header	Text	Si
row_preferences	Menu Row	CMP-LST-002	Si
row_privacy	Menu Row	CMP-LST-002	Si
row_share	Menu Row	CMP-LST-002	Si
section_danger	Section Header	Text	Si
row_logout	Menu Row	CMP-LST-002	Si
row_delete	Menu Row (Danger)	CMP-LST-002	Si
bottom_nav	Bottom Navigation	CMP-NAV-001	Si

4.2. Especificaciones Visuales¶

Avatar:

Size: 96x96dp
Border radius: full (circular)
Placeholder: Iniciales del nombre
Tap: Opcion de cambiar foto

Tier Badge:

Free: Gris (#9E9E9E)
Pro: Azul (#2196F3)
Perfect: Morado (#9C27B0)

Menu Rows:

Height: 72dp
Icon: 24x24dp
Subtitle: neutral.600
Chevron: 24x24dp, neutral.400
Touch target: Full row

Danger Zone:

Delete text: error color (#D32F2F)

5. Estados¶

5.1. Por Tipo de Usuario¶

Elemento	PI	CR
Mis Cuidadores	Muestra CS asignados	Muestra "Mis Dependientes" adicional
Contactos Emergencia	Visible	Visible
Perfil Compartible	Visible	Por cada dependiente

5.2. Por Tier¶

Elemento	Free	Pro	Perfect
Badge tier	Gris	Azul	Morado
Cuidadores count	N/A	Hasta 5	Hasta 10
Exportar datos	Limitado	Si	Si

5.3. Estados Especiales¶

Estado	Visual
Perfil incompleto	Badge naranja en row relevante
Cuenta pendiente eliminacion	Banner rojo superior
Offline	Banner offline + funciones limitadas
Cuidador pendiente	Badge numerico en "Mis Cuidadores"

6. Interacciones¶

6.1. Gestos¶

Gesto	Elemento	Accion
Tap	Avatar	Cambiar foto (bottom sheet)
Tap	Cualquier row	Navegar a pantalla
Long press	Avatar	Ver foto completa
Pull down	Screen	No aplica (no hay refresh)

6.2. Transiciones¶

Origen	Destino	Animacion
Row tap	Pantalla destino	Push right
Avatar tap	Bottom sheet	Slide up
Back	Anterior	Pop left

7. Logica de Negocio¶

7.1. Datos Mostrados¶

Dato	Fuente	Formato
Nombre	UserProfile.nombre + apellidos	String
Email	UserProfile.email	String (parcial si largo)
Telefono	UserProfile.telefono	Formatted E.164
Tier	Subscription.tier	Badge
Cuidadores count	RelacionCuidador.count	"X activos"
Emergencia count	ContactoEmergencia.count	"X configurados"

7.2. Validaciones de Navegacion¶

Destino	Condicion	Si no cumple
Mis Cuidadores	tier != Free	Mostrar upsell
Exportar	tier != Free	Mostrar upsell
Eliminar	!isInDeletionPeriod	Mostrar estado actual

8. Accesibilidad¶

Elemento	Label	Hint
Avatar	"Foto de perfil de [nombre]"	"Toca dos veces para cambiar"
Row personal	"Datos personales"	"Toca para editar nombre, email y telefono"
Row caregivers	"Mis cuidadores, [N] activos"	"Toca para gestionar cuidadores"
Badge tier	"Plan [tier]"	-
Row delete	"Eliminar cuenta"	"Accion destructiva"

8.2. WCAG Compliance¶

Criterio	Estado	Notas
1.4.3 Contraste	OK	Textos 4.5:1 verificado
2.4.7 Focus visible	OK	Outline 2dp en todos los rows
2.5.5 Target size	OK	Rows 72dp height
4.1.2 Name, Role, Value	OK	Labels semanticos

9. Eventos de Analytics¶

Evento	Trigger	Parametros
screen_view	Abrir pantalla	screen: profile
profile_section_tapped	Tap en cualquier row	section: [nombre]
avatar_change_started	Tap en avatar	-
logout_initiated	Tap cerrar sesion	-

10. Casos de Prueba¶

ID	Caso	Resultado Esperado
TC-001	Usuario Free ve pantalla	Sin badge cuidadores
TC-002	Usuario Pro ve pantalla	Badge cuidadores visible
TC-003	Tap datos personales	Navega a SCR-USR-002
TC-004	Cuenta en eliminacion	Banner rojo visible
TC-005	Perfil incompleto	Badge warning en row
TC-006	Modo offline	Banner offline, acciones limitadas

11. Notas de Implementacion¶

El avatar se carga de forma lazy con placeholder de iniciales
Los contadores (cuidadores, emergencia) se actualizan al volver a esta pantalla
El tier badge debe reflejar cambios en tiempo real (ej: upgrade)
La version de app se obtiene de BuildInfo

12. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)