SCR-INT-002: Alerta de Interaccion SERIO
Identificador: SCR-INT-002
Modulo: MTS-INT-001 - Motor de Interacciones Medicamentosas
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Prioridad: ALTA
Tipo: Modal / Full Screen (segun contexto)
1. Proposito
Esta pantalla muestra alertas de interaccion de severidad SERIO (nivel 3). A diferencia de CONTRAINDICADO, permite al usuario continuar con un acknowledgement simple, pero con prominencia visual que asegura que el usuario comprende el riesgo.
2. Wireframe ASCII
+--------------------------------------------------+
| STATUS BAR |
+--------------------------------------------------+
| |
| +-----------------------------------------+ |
| | [!] ADVERTENCIA SERIA | |
| | (Icono 48dp) | |
| +-----------------------------------------+ |
| |
| +-------------------------------------------+ |
| | INTERACCION CON RIESGO SIGNIFICATIVO | |
| +-------------------------------------------+ |
| |
| +-------------------------------------------+ |
| | [Pill] Lisinopril 10mg | |
| +-------------------------------------------+ |
| [Arrow down] |
| +-------------------------------------------+ |
| | [Pill] Suplemento de Potasio | |
| +-------------------------------------------+ |
| |
| +-------------------------------------------+ |
| | EFECTO POTENCIAL: | |
| | La combinacion puede causar niveles | |
| | elevados de potasio (hiperpotasemia), | |
| | que pueden afectar el ritmo cardiaco. | |
| +-------------------------------------------+ |
| |
| +-------------------------------------------+ |
| | RECOMENDACION: | |
| | - Monitorear niveles de potasio | |
| | - Evitar exceso de alimentos ricos | |
| | en potasio | |
| | - Reportar sintomas: debilidad, | |
| | palpitaciones | |
| +-------------------------------------------+ |
| |
| [Ver informacion completa] |
| |
+--------------------------------------------------+
| |
| [ ] Entiendo el riesgo y deseo continuar |
| |
| +---------------------+ +---------------------+ |
| | CANCELAR | | CONTINUAR | |
| +---------------------+ +---------------------+ |
| |
| [Share icon] Compartir con mi medico |
| |
+--------------------------------------------------+
| FUENTE: Base MedTime | Actualizado: Dic 2025 |
+--------------------------------------------------+
3. Especificacion de Componentes
| Propiedad |
Valor |
| Background |
--color-warning-container (#FFF3E0) |
| Icono |
Warning Triangle, 48dp, --color-warning |
| Texto |
"ADVERTENCIA SERIA" |
| Typography |
Headline Medium, Bold |
| Color texto |
--color-on-warning-container |
3.2. Badge de Severidad
| Propiedad |
Valor |
| Texto |
"INTERACCION CON RIESGO SIGNIFICATIVO" |
| Background |
--color-warning (#FF8C00) |
| Color texto |
Blanco |
| Typography |
Label Large, Bold |
| Border radius |
4dp |
| Padding |
8dp 16dp |
3.3. Cards de Medicamentos
| Propiedad |
Valor |
| Background |
--color-surface |
| Border |
1dp solid --color-warning |
| Border radius |
12dp |
| Elevation |
1dp |
| Padding |
16dp |
| Icono |
36dp, color categoria |
3.4. Conector Visual
| Elemento |
Especificacion |
| Icono |
Arrow Down en circulo |
| Tamano |
28dp |
| Background |
--color-warning-container |
| Color icono |
--color-warning |
3.5. Card Efecto Potencial
| Propiedad |
Valor |
| Background |
--color-warning-container |
| Border left |
3dp solid --color-warning |
| Label |
"EFECTO POTENCIAL:" en Label Medium Bold |
| Typography |
Body Medium |
| Color |
--color-on-warning-container |
3.6. Card Recomendacion
| Propiedad |
Valor |
| Background |
--color-surface-variant |
| Border left |
3dp solid --color-primary |
| Label |
"RECOMENDACION:" en Label Medium Bold |
| Lista |
Bulleted list |
| Typography |
Body Medium |
3.7. Checkbox de Confirmacion
| Propiedad |
Valor |
| Tipo |
Checkbox custom |
| Size |
24dp (touch target 48dp) |
| Color unchecked |
--color-on-surface-variant |
| Color checked |
--color-warning |
| Label |
Body Medium, max 2 lineas |
3.8. Botones de Accion
3.8.1. Boton Cancelar
| Propiedad |
Valor |
| Tipo |
Outlined Button |
| Color borde |
--color-outline |
| Color texto |
--color-on-surface |
| Min width |
140dp |
| Height |
48dp |
3.8.2. Boton Continuar
| Estado |
Deshabilitado |
Habilitado |
| Background |
--color-surface-variant |
--color-warning |
| Color texto |
--color-on-surface-disabled |
Blanco |
| Condicion |
Checkbox no marcado |
Checkbox marcado |
3.9. Boton Compartir
| Propiedad |
Valor |
| Tipo |
Text Button con icono |
| Icono |
Share, 20dp |
| Color |
--color-primary |
| Typography |
Label Large |
| Posicion |
Centrado debajo de botones |
4. Estados
4.1. Estado Inicial
- Checkbox desmarcado
- Boton Continuar deshabilitado
- Focus en Cancelar
4.2. Estado: Checkbox Marcado
- Checkbox con animacion check
- Boton Continuar se habilita (transicion 200ms)
- Color cambia a warning
4.3. Estado: Compartiendo
+-------------------------------------------+
| Compartir con mi medico |
| |
| [Email icon] Correo electronico |
| [Message icon] Mensaje de texto |
| [WhatsApp] WhatsApp |
| [Copy icon] Copiar resumen |
| |
+-------------------------------------------+
5. Comportamiento
5.1. Aparicion
| Aspecto |
Comportamiento |
| Trigger |
Deteccion de interaccion severidad 3 |
| Animacion |
Slide up desde bottom (300ms) |
| Bloqueo |
Modal overlay, dismiss con back |
| System back |
Ejecuta Cancelar |
5.2. Compartir con Medico
sequenceDiagram
participant U as Usuario
participant UI as Pantalla
participant SYS as Sistema
participant SHARE as Share API
U->>UI: Tap Compartir
UI->>SYS: Generar resumen
SYS->>SYS: Crear texto formateado
SYS-->>UI: Resumen listo
UI->>SHARE: Invocar share sheet
SHARE-->>U: Seleccionar metodo
U->>SHARE: Enviar
SHARE-->>UI: Completado
UI->>UI: Toast: Compartido
5.3. Formato de Texto Compartido
ALERTA DE INTERACCION MEDICAMENTOSA - MedTime
Medicamentos:
- Lisinopril 10mg
- Suplemento de Potasio
Severidad: SERIA
Efecto: La combinacion puede causar niveles elevados
de potasio (hiperpotasemia).
Recomendacion: Monitorear niveles de potasio regularmente.
Generado: [fecha y hora]
Codigo verificacion: [XXX-XXX]
---
Esta informacion es solo orientativa.
Consulte con su medico para mas detalles.
6. Accesibilidad
6.1. Nivel WCAG: AA
| Criterio |
Implementacion |
Estado |
| 1.4.1 Uso del Color |
Naranja + Icono + Texto |
Cumple |
| 1.4.3 Contraste |
4.5:1 minimo |
Cumple |
| 2.1.1 Keyboard |
Tab order logico |
Cumple |
| 4.1.3 Status |
aria-live="polite" |
Cumple |
6.2. Screen Reader Announcement
"Advertencia. Interaccion seria detectada entre Lisinopril
y Suplemento de Potasio. Efecto potencial: niveles elevados
de potasio. Se recomienda monitorear niveles de potasio
regularmente. Marque la casilla para confirmar que entiende
el riesgo antes de continuar."
6.3. Tab Order
- Boton Cancelar
- Link "Ver informacion completa"
- Checkbox confirmacion
- Boton Continuar
- Boton Compartir
7. Animaciones
7.1. Entrada
| Elemento |
Animacion |
Duracion |
| Overlay |
Fade in |
200ms |
| Modal |
Slide up |
300ms |
| Contenido |
Fade in |
200ms (delay 200ms) |
7.2. Checkbox
| Transicion |
Animacion |
Duracion |
| Check |
Scale + opacity |
200ms |
| Boton enable |
Background fade |
200ms |
8. Responsive
8.1. Mobile (< 600dp)
- Layout como wireframe
- Full height modal en landscape
8.2. Tablet (> 600dp)
- Centered modal, max-width 500dp
- Border radius 16dp
- Elevation 8dp
9. Analytics
| Evento |
Parametros |
serious_interaction_shown |
med_pair |
serious_interaction_detail_viewed |
med_pair |
serious_interaction_shared |
med_pair, method |
serious_interaction_acknowledged |
med_pair, time_on_screen |
serious_interaction_cancelled |
med_pair |
10. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)