Pantalla: Seleccion de Rol¶

Identificador: SCR-ONB-002 Modulo: MTS-ONB-001 - Onboarding Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado

1. Informacion General¶

Atributo	Valor
Nombre	Seleccion de Rol
Proposito	Usuario elige si es Paciente Independiente (PI) o Cuidador Responsable (CR)
Tipo	Full Screen (paso 2 de onboarding)
Acceso	Desde SCR-ONB-001
Prioridad	Critica

NOTA: Esta pantalla incluye tambien la seleccion de tier (Free/Pro/Perfect) despues de elegir rol.

2. Wireframe ASCII¶

2.1. Estado: Seleccion de Rol¶

+------------------------------------------+
| [<-]   Paso 2 de 8  ====------------     |
+------------------------------------------+
|                                          |
|         Como usaras MedTime?             |
|                                          |
|   Selecciona la opcion que mejor         |
|   describe tu situacion.                 |
|                                          |
|  +------------------------------------+  |
|  |  [Icono Persona]                   |  |
|  |                                    |  |
|  |  Soy Paciente                      |  |
|  |                                    |  |
|  |  Gestiono mis propios medicamentos |  |
|  |  y mi salud de forma independiente.|  |
|  |                                    |  |
|  +------------------------------------+  |
|                                          |
|  +------------------------------------+  |
|  |  [Icono Familia]                   |  |
|  |                                    |  |
|  |  Soy Cuidador Responsable          |  |
|  |                                    |  |
|  |  Cuido de familiares o personas    |  |
|  |  bajo mi responsabilidad legal.    |  |
|  |                                    |  |
|  +------------------------------------+  |
|                                          |
|                                          |
|   Podras cambiar esta configuracion      |
|   mas adelante.                          |
|                                          |
+------------------------------------------+

2.2. Estado: Rol Seleccionado + Tier¶

+------------------------------------------+
| [<-]   Paso 2 de 8  ====------------     |
+------------------------------------------+
|                                          |
|         Elige tu plan                    |
|                                          |
|   Selecciona el plan que mejor se        |
|   adapte a tus necesidades.              |
|                                          |
| +----------+ +----------+ +----------+   |
| |   FREE   | |   PRO    | | PERFECT  |   |
| |          | |          | |          |   |
| | $0       | | $4.99    | | $9.99    |   |
| | /siempre | | /mes     | | /mes     |   |
| |          | |          | |          |   |
| | [x] Local| |[x]FREE + | |[x]PRO +  |   |
| | [x] 3 med| |[x]Cloud  | |[x]MFA    |   |
| | [x]Alert | |[x]OCR    | |[x]RecKey |   |
| |          | |[x]Ilimit | |[x]Prior  |   |
| |          | |[x]1 CS   | |[x]3 CS   |   |
| |          | |          | |          |   |
| |[Elegir]  | |[Elegir]  | |[Elegir]  |   |
| +----------+ +----------+ +----------+   |
|                                          |
|   Puedes cambiar de plan cuando quieras  |
|                                          |
|  +------------------------------------+  |
|  |           Continuar                |  |  <- Solo si tier seleccionado
|  +------------------------------------+  |
|                                          |
+------------------------------------------+

2.3. Estado: CR - Declaracion de Tutela (Inline)¶

+------------------------------------------+
| [<-]   Paso 2 de 8  ====------------     |
+------------------------------------------+
|                                          |
|   Declaracion de Responsabilidad         |
|                                          |
|  +------------------------------------+  |
|  |                                    |  |
|  |  Como Cuidador Responsable,        |  |
|  |  declaro que:                      |  |
|  |                                    |  |
|  |  - Tengo responsabilidad legal o   |  |
|  |    tutela sobre las personas que   |  |
|  |    agregare como dependientes      |  |
|  |                                    |  |
|  |  - Me comprometo a gestionar sus   |  |
|  |    medicamentos de forma           |  |
|  |    responsable                     |  |
|  |                                    |  |
|  |  - Entiendo que sus datos son      |  |
|  |    confidenciales                  |  |
|  |                                    |  |
|  |  [ ] Acepto esta declaracion       |  |  <- Checkbox
|  |                                    |  |
|  +------------------------------------+  |
|                                          |
|  +------------------------------------+  |
|  |           Continuar                |  |  <- Disabled hasta checkbox
|  +------------------------------------+  |
|                                          |
+------------------------------------------+

3. Componentes UI¶

3.1. Top Bar con Progress¶

Propiedad	Valor
Back button	Si
Progress	"Paso 2 de 8" + barra
Accion back	Volver a SCR-ONB-001

3.2. Titulo de Seccion¶

Propiedad	Valor
Texto Rol	"Como usaras MedTime?"
Texto Tier	"Elige tu plan"
Tipografia	xl (20sp), bold, neutral.900

3.3. Role Selection Card¶

Propiedad	Valor
Componente	CMP-CRD-008 (Selection Card)
Height	Auto (content)
Padding	20dp
Border default	2dp neutral.200
Border selected	2dp primary
Background selected	primary.light (10% opacity)
Icon size	48x48dp
Title	lg (18sp), medium
Description	md (16sp), regular, neutral.700

3.4. Tier Comparison Cards¶

Propiedad	Valor
Componente	CMP-CRD-007 (Tier Card)
Layout	Row de 3 cards
Width cada card	(screen - 48dp) / 3
Header	Nombre tier + precio
Features	Lista con checks
CTA	"Elegir" button

3.5. Checkbox Tutela¶

Propiedad	Valor
Componente	CMP-INP-007 (Checkbox)
Size	24x24dp
Touch target	48x48dp
Label	"Acepto esta declaracion"

3.6. Boton Continuar¶

Propiedad	Valor
Componente	CMP-BTN-001 (Primary Button)
Estado inicial	Disabled
Enabled cuando	Rol + Tier seleccionados (PI) o Tutela aceptada (CR)

4. Comportamientos¶

4.1. Flujo de Seleccion¶

flowchart TD
    A[Pantalla inicial] --> B{Usuario selecciona}
    B -->|Tap Paciente| C[Highlight card PI]
    B -->|Tap Cuidador| D[Highlight card CR]

    C --> E[Mostrar seleccion de tier]
    D --> E

    E --> F{Usuario selecciona tier}
    F -->|Free| G[Enable Continuar PI]
    F -->|Pro/Perfect| H[Requiere OAuth si no completo]

    G --> I{Rol?}
    H --> I

    I -->|PI| J[Continuar a SCR-ONB-003]
    I -->|CR| K[Mostrar declaracion tutela]

    K --> L{Checkbox?}
    L -->|Checked| M[Enable Continuar CR]
    L -->|Unchecked| K
    M --> N[Continuar a SCR-ONB-003 + tutela flag]

4.2. Gestos¶

Gesto	Elemento	Accion
Tap	Card PI	Seleccionar rol PI
Tap	Card CR	Seleccionar rol CR
Tap	Tier card	Seleccionar tier
Tap	Checkbox	Toggle aceptacion
Tap	Continuar	Siguiente paso
Tap	Back	Volver a welcome

4.3. Validaciones¶

Validacion	Mensaje
Rol no seleccionado	Boton Continuar disabled
Tier no seleccionado	Boton Continuar disabled
Tutela no aceptada (CR)	Boton Continuar disabled

5. Estados¶

5.1. Diagrama de Estados¶

stateDiagram-v2
    [*] --> RoleSelection: Pantalla cargada

    RoleSelection --> PISelected: Tap Paciente
    RoleSelection --> CRSelected: Tap Cuidador

    PISelected --> TierSelection: Show tier cards
    CRSelected --> TierSelection: Show tier cards

    TierSelection --> TierChosen: Tap tier card
    TierChosen --> ReadyPI: Si rol = PI
    TierChosen --> TutelageRequired: Si rol = CR

    TutelageRequired --> TutelageAccepted: Check box
    TutelageAccepted --> ReadyCR

    ReadyPI --> [*]: Tap Continuar
    ReadyCR --> [*]: Tap Continuar

6. Accesibilidad¶

6.1. Labels y Hints¶

Elemento	accessibilityLabel	accessibilityHint
Card PI	"Soy Paciente. Gestiono mis propios medicamentos"	"Toca para seleccionar"
Card CR	"Soy Cuidador Responsable. Cuido de familiares"	"Toca para seleccionar"
Card Free	"Plan Free. Gratis siempre. Incluye..."	"Toca para seleccionar"
Card Pro	"Plan Pro. 4.99 dolares al mes. Incluye..."	"Toca para seleccionar"
Card Perfect	"Plan Perfect. 9.99 dolares al mes. Incluye..."	"Toca para seleccionar"
Checkbox	"Aceptar declaracion de responsabilidad"	"Requerido para continuar"

6.2. Orden de Foco¶

6.2.1. Fase 1 - Rol¶

Back button
Titulo
Card Paciente
Card Cuidador

6.2.2. Fase 2 - Tier¶

Titulo Tier
Card Free
Card Pro
Card Perfect
Boton Continuar

6.2.3. Fase 3 - Tutela (CR)¶

Texto declaracion
Checkbox
Boton Continuar

Evento	Anuncio
Rol seleccionado	"Seleccionado: {rol}. Ahora elige tu plan"
Tier seleccionado	"Plan {tier} seleccionado"
Checkbox toggled	"Declaracion {aceptada/no aceptada}"

7. Responsive Design¶

7.1. Tier Cards Layout¶

Ancho	Layout
< 360dp	Vertical stack
360-600dp	Horizontal row (compacto)
> 600dp	Horizontal row con spacing

8. Datos Requeridos¶

8.1. Input Data¶

interface RoleSelectionData {
  user_name: string;
  user_email: string;
  oauth_completed: boolean;
}

8.2. Output Data¶

interface RoleSelectionOutput {
  role: 'PI' | 'CR';
  tier: 'free' | 'pro' | 'perfect';
  tutelage_accepted?: boolean;  // Solo CR
}

9. Metricas¶

9.1. Analytics Events¶

Evento	Parametros
screen_view	screen_name: "onboarding_role"
role_selected	role: "PI"/"CR"
tier_viewed	tier: "free"/"pro"/"perfect"
tier_selected	tier, role
tutelage_accepted	-
step_completed	step: 2, role, tier

10. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)