Especificacion UI Consolidada - MTS-INT-001¶

Identificador: UI-MTS-INT-001 Modulo Funcional: MTS-INT-001 - Motor de Interacciones Medicamentosas Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Completado Prioridad: CRITICA (Seguridad del Paciente)

1. Resumen Ejecutivo¶

1.1. Alcance¶

Este documento consolida la especificacion completa de interfaz de usuario para el modulo de Interacciones Medicamento-Medicamento (MTS-INT-001). Este es un modulo CRITICO de seguridad del paciente que detecta y alerta sobre interacciones potencialmente peligrosas entre medicamentos.

1.2. Metricas del Modulo¶

Metrica	Valor
Total de pantallas	4
Pantallas criticas	1 (SCR-INT-001)
Pantallas alta prioridad	2 (SCR-INT-002, SCR-INT-004)
Pantallas media prioridad	1 (SCR-INT-003)
User journeys documentados	1
Flujos Mermaid	5
Nivel WCAG	AA (AAA para SCR-INT-001)
Cobertura de accesibilidad	100%

1.3. Pantallas Incluidas¶

ID	Nombre	Prioridad	Estado	Tipo
SCR-INT-001	Alerta CONTRAINDICADO	CRITICA	Especificado	Full Screen Bloqueante
SCR-INT-002	Alerta SERIO	ALTA	Especificado	Modal
SCR-INT-003	Alerta MODERADO/MENOR	MEDIA	Especificado	Bottom Sheet / Card
SCR-INT-004	Detalle de Interaccion	ALTA	Especificado	Full Screen

2. Consideraciones de Seguridad¶

2.1. Principios de Diseno de Seguridad¶

Principio	Implementacion
No ignorable	Alertas CONTRAINDICADO bloquean completamente
Verificacion	Codigo de 6 digitos para profesional de salud
Trazabilidad	Log HIPAA de todos los overrides
Claridad	Color + Icono + Texto siempre combinados

2.2. Codigo de Colores de Severidad¶

Severidad	Codigo	Color Primario	Color Container	Icono
CONTRAINDICADO	4	#FF4444 (Rojo)	#FFEBEE	Warning Filled
SERIO	3	#FF8C00 (Naranja)	#FFF3E0	Warning
MODERADO	2	#FFCC00 (Amarillo)	#FFFDE7	Alert
MENOR	1	#4444FF (Azul)	#E3F2FD	Info Circle

2.3. Comportamiento por Severidad¶

Severidad	Bloqueo	Requiere Confirmacion	Codigo Verificacion	Override Permitido
CONTRAINDICADO	Total	Checkbox + Codigo	Obligatorio	Con autorizacion medica
SERIO	Parcial	Checkbox simple	Opcional (compartir)	Si, con acknowledgement
MODERADO	No	No	No	Automatico
MENOR	No	No	No	Automatico

3. User Journey¶

3.1. Paciente Independiente (PI) - Recibir Alerta de Interaccion¶

Persona: Carlos, 62 anos, toma Warfarina para fibrilacion auricular.

Objetivo: Agregar un nuevo medicamento de forma segura.

Escenario: Carlos intenta agregar Aspirina (recomendada por un conocido).

Flujo principal:

Abre app -> Tab Medicamentos
Tap FAB (+) -> Buscar Aspirina
Selecciona Aspirina 100mg
Motor detecta Warfarina activa
[ALERTA CRITICA] Pantalla roja bloqueante
Lee riesgo de sangrado
Tap "Ver detalle" -> Comprende mecanismo
Decide cancelar y consultar medico
Llama a su medico antes de agregar

Tiempo objetivo: Variable (depende de decision informada)

Resultado esperado: El paciente toma una decision informada sobre su salud.

Puntos criticos de seguridad:

La alerta NO puede ser ignorada
El detalle esta disponible para comprension
La opcion de cancelar es prominente

4. Arquitectura de Navegacion¶

4.1. Diagrama de Flujo¶

flowchart TD
    subgraph Triggers["Puntos de Activacion"]
        MED[SCR-MED-003<br/>Agregar Med]
        EDIT[SCR-MED-002<br/>Editar Med]
        RX[Importar Receta]
    end

    subgraph Motor["Motor MTS-INT-001"]
        DETECT[Detectar Interacciones]
        CLASS[Clasificar Severidad]
    end

    subgraph Alerts["Pantallas de Alerta"]
        INT1[SCR-INT-001<br/>CONTRAINDICADO]
        INT2[SCR-INT-002<br/>SERIO]
        INT3[SCR-INT-003<br/>MODERADO/MENOR]
        INT4[SCR-INT-004<br/>Detalle]
    end

    subgraph Actions["Resultados"]
        CANCEL[Cancelar<br/>No guardar]
        OVERRIDE[Override<br/>Guardar con flag]
        ACK[Acknowledge<br/>Guardar con log]
        CONTINUE[Continuar<br/>Guardar normal]
    end

    MED --> DETECT
    EDIT --> DETECT
    RX --> DETECT

    DETECT --> CLASS
    CLASS -->|Sev 4| INT1
    CLASS -->|Sev 3| INT2
    CLASS -->|Sev 2-1| INT3

    INT1 --> INT4
    INT2 --> INT4
    INT3 --> INT4

    INT1 -->|Cancelar| CANCEL
    INT1 -->|Confirmar| OVERRIDE

    INT2 -->|Cancelar| CANCEL
    INT2 -->|Entendido| ACK

    INT3 -->|Dismiss| CONTINUE

    INT4 -->|Back| INT1
    INT4 -->|Back| INT2
    INT4 -->|Back| INT3

    style INT1 fill:#FF4444,color:#FFF
    style INT2 fill:#FF8C00,color:#FFF
    style INT3 fill:#FFCC00,color:#000

4.2. Deep Links¶

Ruta	Destino	Uso
`medtime://interactions`	Lista de interacciones activas	Menu principal
`medtime://interactions/{id}`	SCR-INT-004	Desde notificacion
`medtime://verify/{code}`	Verificacion de codigo	Profesional de salud

5. Componentes Utilizados¶

5.1. Componentes del Design System¶

Componente	ID	Uso en Modulo
Top App Bar	CMP-NAV-002	SCR-INT-004
Dialog Modal	CMP-FBK-002	SCR-INT-001, SCR-INT-002
Bottom Sheet	CMP-FBK-003	SCR-INT-003
Primary Button	CMP-BTN-001	Todas
Outlined Button	CMP-BTN-002	Cancelar
Text Button	CMP-BTN-003	Ver detalle
Checkbox	CMP-INP-007	SCR-INT-001, SCR-INT-002
Medication Card	CMP-CRD-001	Todas
Interaction Card	CMP-CRD-004	SCR-INT-004
Alert Banner	CMP-FBK-004	Todas
Badge	CMP-DAT-002	Severidad
Snackbar	CMP-FBK-001	Feedback acciones

5.2. Componentes Personalizados (Nuevos)¶

Componente	Descripcion	Pantalla
SeverityBadge	Badge con color por severidad	Todas
VerificationCodeCard	Card para codigo de 6 digitos	SCR-INT-001
MedicationPairDisplay	Visualizacion de par de medicamentos	Todas
EvidenceLevelBar	Barra de nivel de evidencia	SCR-INT-004
InteractionConnector	Conector visual entre medicamentos	Todas

6. Auditoria de Accesibilidad WCAG 2.1¶

6.1. Resumen de Cumplimiento¶

Pantalla	Nivel Base	Nivel Alcanzado	Notas
SCR-INT-001	AA	AAA	Pantalla critica de seguridad
SCR-INT-002	AA	AA	Cumple todos los criterios
SCR-INT-003	AA	AA	Cumple todos los criterios
SCR-INT-004	AA	AA	Cumple todos los criterios

6.2. Criterios Verificados¶

6.2.1. Perceptible¶

Criterio	ID	SCR-INT-001	SCR-INT-002	SCR-INT-003	SCR-INT-004
Alternativas de texto	1.1.1	AAA	AA	AA	AA
Info y relaciones	1.3.1	AAA	AA	AA	AA
Uso del color	1.4.1	AAA	AA	AA	AA
Contraste minimo	1.4.3	AAA (7:1)	AA	AA	AA
Contraste mejorado	1.4.6	AAA (10:1)	N/A	N/A	N/A
Non-text contrast	1.4.11	AAA	AA	AA	AA

6.2.2. Operable¶

Criterio	ID	Estado	Implementacion
Teclado	2.1.1	Cumple	Tab order completo
Sin trampa	2.1.2	Cumple	Back siempre disponible
Focus Order	2.4.3	Cumple	Logico por pantalla
Proposito enlaces	2.4.4	Cumple	Links descriptivos
Focus visible	2.4.7	Cumple	Outline 2dp
Target Size	2.5.5	Cumple	Minimo 48x48dp

6.2.3. Comprensible¶

Criterio	ID	Estado	Implementacion
Idioma pagina	3.1.1	Cumple	lang="es"
On Focus	3.2.1	Cumple	Sin cambios inesperados
On Input	3.2.2	Cumple	Predecible
Error identification	3.3.1	Cumple	Errores claros
Labels	3.3.2	Cumple	Todos los inputs

6.2.4. Robusto¶

Criterio	ID	Estado	Implementacion
Name, Role, Value	4.1.2	Cumple	Semantica correcta
Status Messages	4.1.3	Cumple	aria-live apropiado

6.3. Consideraciones Especiales de Accesibilidad¶

6.3.1. SCR-INT-001 (Critica)¶

Contraste AAA: 10:1 para texto blanco sobre rojo oscuro
aria-live="assertive": Anuncio inmediato al aparecer
Focus trap intencional: Modal no se puede cerrar sin accion
Screen reader priority: Contenido completo leido automaticamente

6.3.2. Codigo de Colores¶

6.3.3. Nunca usamos solo color para indicar severidad¶

Severidad	Color	Icono	Texto	Screen Reader
CONTRAINDICADO	Rojo	Warning Filled	"CONTRAINDICADO"	"Alerta critica"
SERIO	Naranja	Warning	"ADVERTENCIA SERIA"	"Advertencia"
MODERADO	Amarillo	Alert	"PRECAUCION"	"Precaucion"
MENOR	Azul	Info	"NOTA"	"Nota informativa"

7. Responsive Design¶

7.1. Breakpoints¶

Ancho	Adaptacion
< 360dp	Compacto, texto reducido
360-600dp	Mobile standard
600-840dp	Tablet portrait
> 840dp	Tablet landscape

7.2. Adaptaciones por Pantalla¶

Pantalla	Mobile	Tablet
SCR-INT-001	Full screen modal	Centered modal max 500dp
SCR-INT-002	Full screen modal	Centered modal max 500dp
SCR-INT-003	Bottom sheet 40%	Centered card 400dp
SCR-INT-004	Single column	Two column layout

8. Animaciones y Movimiento¶

8.1. Transiciones¶

Transicion	Duracion	Ease	Reducido
Modal appear	300ms	ease-out	Instant
Modal dismiss	200ms	ease-in	Instant
Bottom sheet	250ms	ease-out	100ms
Screen push	300ms	ease	Instant

8.2. Animaciones Especiales¶

Elemento	Animacion	Duracion	Proposito
Icono CONTRAINDICADO	Pulse	2s loop	Llamar atencion
Borde rojo	Glow	1.5s loop	Urgencia
Codigo generado	Fade secuencial	600ms total	Claridad
Checkbox	Scale bounce	200ms	Feedback

8.3. Reduccion de Movimiento¶

Con prefers-reduced-motion: reduce:

Todas las animaciones loop: Deshabilitadas
Transiciones: Reducidas a < 100ms
Solo feedback haptico mantenido

9. Estados de Error¶

9.1. Errores del Motor¶

Error	Codigo	UI	Fallback
Cache corrupto	ERR-INT-001	Loading + reconstruir	Base bundle
API timeout	ERR-INT-002	Banner "datos locales"	Cache local
Sin conexion	ERR-INT-003	Badge offline	100% offline
IA no responde	ERR-INT-004	Sin analisis contextual	Datos base

9.2. Mensajes de Error¶

Escenario	Mensaje
Fallback a local	"Verificacion con datos locales. Para verificacion completa, intente con conexion estable."
Sin interacciones en local	"No se encontraron interacciones en base local. Consulte a su medico si tiene dudas."
Error persistente	"Servicio temporalmente no disponible. Se verificara automaticamente mas tarde."

10. Metricas de UX¶

10.1. KPIs del Modulo¶

Metrica	Objetivo	Medicion
Override rate CONTRAINDICADO	< 10%	Overrides / Alertas
Tiempo en pantalla CONTRAINDICADO	> 30s	analytics
Ver detalle rate	> 50%	Detail views / Alerts
Cancelacion rate CONTRAINDICADO	> 85%	Cancelaciones / Alertas
Compartir con medico rate	> 20%	Shares / Overrides

10.2. Eventos de Analytics Criticos¶

Evento	Parametros	Prioridad
`contraindication_shown`	med_pair, source	CRITICA
`contraindication_overridden`	med_pair, code, time	CRITICA
`contraindication_cancelled`	med_pair, time	ALTA
`serious_interaction_shown`	med_pair	ALTA
`serious_interaction_acknowledged`	med_pair, time	ALTA
`interaction_detail_viewed`	interaction_id, severity	MEDIA
`interaction_shared`	interaction_id, method	MEDIA

11. Archivos del Modulo¶

11.1. Flujos¶

flows/UIF-INT-001-interacciones-medicamentos.md

11.2. Pantallas¶

screens/SCR-INT-001-alerta-contraindicado.md
screens/SCR-INT-002-alerta-serio.md
screens/SCR-INT-003-alerta-moderado-menor.md
screens/SCR-INT-004-detalle-interaccion.md

11.3. Especificacion Consolidada¶

specs/UI-MTS-INT-001.md (este documento)

12. Referencias¶

12.1. Especificacion Funcional¶

MTS-INT-001 - Motor de Interacciones

12.2. Modulos Relacionados¶

12.3. Design System¶

13. Historial de Cambios¶

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial completa

14. Aprobaciones¶

Rol	Nombre	Estado	Fecha
UX Lead	MobileUxUiDrone	Completado	2025-12-05
A11y Review	Pendiente	-	-
Product Owner	Pendiente	-	-
Security Review	Pendiente	-	-

Documento generado por MobileUxUiDrone (Eight of Eight) "La seguridad del paciente es innegociable - cada pixel cuenta."