SCR-INT-003: Alerta de Interaccion MODERADO/MENOR¶

Identificador: SCR-INT-003 Modulo: MTS-INT-001 - Motor de Interacciones Medicamentosas Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Prioridad: MEDIA Tipo: Bottom Sheet / Inline Card

1. Proposito¶

Esta pantalla maneja alertas de interaccion de severidad MODERADO (nivel 2) y MENOR (nivel 1). Son informativas y no bloquean el flujo del usuario. Se muestran como bottom sheet para MODERADO o card inline para MENOR.

2. Wireframe ASCII - MODERADO (Bottom Sheet)¶

+--------------------------------------------------+
|                                                   |
|          [Drag Handle - 32dp x 4dp]              |
|                                                   |
|    +-------------------------------------------+  |
|    | [!] PRECAUCION                           |  |
|    |     Interaccion Moderada                 |  |
|    +-------------------------------------------+  |
|                                                   |
|    +-------------------------------------------+  |
|    | [Pill] Omeprazol 20mg                    |  |
|    |        + Clopidogrel 75mg                |  |
|    +-------------------------------------------+  |
|                                                   |
|    Omeprazol puede reducir la efectividad         |
|    del Clopidogrel. Considere alternativas        |
|    como pantoprazol si es posible.                |
|                                                   |
|    [Ver mas detalles]                             |
|                                                   |
|  +----------------------------------------------+ |
|  |              ENTENDIDO                       | |
|  +----------------------------------------------+ |
|                                                   |
|  FUENTE: Base MedTime                             |
+--------------------------------------------------+

3. Wireframe ASCII - MENOR (Inline Card)¶

+--------------------------------------------------+
|                                                   |
| +-----------------------------------------------+ |
| | [i] Nota: Interaccion Menor                  | |
| |                                               | |
| | Aspirina + Cafe: El cafe puede aumentar      | |
| | ligeramente la absorcion de aspirina.        | |
| | Generalmente sin significancia clinica.      | |
| |                                               | |
| | [Ver detalle >]                              | |
| +-----------------------------------------------+ |
|                                                   |
+--------------------------------------------------+

4. Especificacion de Componentes¶

4.1. Bottom Sheet - MODERADO¶

4.1.1. Header¶

Propiedad	Valor
Drag handle	32dp x 4dp, centered, `--color-outline`
Icono	Warning, 32dp, `--color-warning-moderate` (#FFCC00)
Titulo	"PRECAUCION" - Headline Small Bold
Subtitulo	"Interaccion Moderada" - Body Medium
Background header	`--color-warning-moderate-container`

4.1.2. Card Medicamentos¶

Propiedad	Valor
Background	`--color-surface`
Border	1dp solid `--color-warning-moderate`
Layout	Medicamentos en linea con "+"
Typography nombres	Body Large Bold

4.1.3. Descripcion¶

Propiedad	Valor
Typography	Body Medium
Color	`--color-on-surface`
Max lines	4 (expandible)

4.1.4. Boton Entendido¶

Propiedad	Valor
Tipo	Filled Button
Background	`--color-warning-moderate`
Color texto	`--color-on-warning`
Width	100% - 32dp padding
Height	48dp

4.2. Inline Card - MENOR¶

Propiedad	Valor
Background	`--color-info-container` (#E3F2FD)
Border left	3dp solid `--color-info` (#4444FF)
Border radius	8dp
Padding	12dp
Icono	Info circle, 20dp, `--color-info`
Titulo	"Nota: Interaccion Menor" - Label Large Bold
Descripcion	Body Small
Link	"Ver detalle >" - Label Medium, `--color-info`

5. Estados¶

5.1. MODERADO - Estados¶

5.1.1. Inicial¶

Bottom sheet a 40% de altura
Contenido visible sin scroll

5.1.2. Expandido¶

Drag up para full content
Muestra detalles adicionales si hay

5.1.3. Dismissed¶

Swipe down o tap fuera
Guarda medicamento sin flag especial

5.2. MENOR - Estados¶

5.2.1. Collapsed (Default)¶

Card con resumen de 2-3 lineas
Link "Ver detalle"

5.2.2. Tapped¶

Navega a SCR-INT-004 con detalles

6. Comportamiento¶

6.1. MODERADO¶

flowchart TD
    A[Interaccion MODERADO detectada] --> B[Mostrar Bottom Sheet]
    B --> C{Accion usuario}

    C --> |Tap Entendido| D[Cerrar sheet]
    C --> |Swipe down| D
    C --> |Tap fuera| D
    C --> |Ver mas detalles| E[SCR-INT-004]

    D --> F[Continuar guardado]
    E --> G[Ver mecanismo completo]
    G --> H[Volver]
    H --> B

6.2. MENOR¶

flowchart TD
    A[Interaccion MENOR detectada] --> B[Mostrar Card inline]
    B --> C{Accion usuario}

    C --> |Tap Ver detalle| D[SCR-INT-004]
    C --> |Ignorar| E[Continuar flujo]
    C --> |Scroll past| E

    D --> F[Ver informacion]
    F --> G[Volver a flujo]

7. Diferencias por Severidad¶

Aspecto	MODERADO (2)	MENOR (1)
Color primario	Amarillo (#FFCC00)	Azul (#4444FF)
Presentacion	Bottom Sheet	Card inline
Bloqueo	Semi-bloqueante	No bloqueante
Requiere accion	Tap "Entendido"	Ninguna
Icono	Warning triangle	Info circle
Persistencia	Hasta dismiss	Visible en flujo

8. Accesibilidad¶

8.1. WCAG AA¶

Criterio	MODERADO	MENOR
Contraste texto	4.5:1	4.5:1
Touch targets	48dp boton	48dp link
Screen reader	polite announce	polite announce

8.2.1. MODERADO¶

"Precaucion. Interaccion moderada detectada entre Omeprazol
y Clopidogrel. Omeprazol puede reducir la efectividad del
Clopidogrel. Boton Entendido disponible."

8.2.2. MENOR¶

"Nota informativa. Interaccion menor entre Aspirina y Cafe.
Generalmente sin significancia clinica. Enlace ver detalle
disponible."

9. Responsive¶

9.1. MODERADO¶

Breakpoint	Comportamiento
Mobile portrait	Bottom sheet 40-80%
Mobile landscape	Bottom sheet 60-100%
Tablet	Centered modal, max 400dp width

9.2. MENOR¶

Breakpoint	Comportamiento
Mobile	Full width card
Tablet	Max width 600dp, centered

10. Animaciones¶

10.1. MODERADO¶

Elemento	Animacion	Duracion
Sheet appear	Slide up	250ms
Sheet dismiss	Slide down	200ms
Overlay	Fade	200ms

10.2. MENOR¶

Elemento	Animacion	Duracion
Card appear	Fade in	200ms
Expand to detail	Push right	300ms

11. Analytics¶

Evento	Severidad	Parametros
`moderate_interaction_shown`	2	med_pair
`moderate_interaction_dismissed`	2	med_pair, method
`moderate_interaction_detail_viewed`	2	med_pair
`minor_interaction_shown`	1	med_pair
`minor_interaction_detail_viewed`	1	med_pair

12. Integracion¶

12.1. Cuando Mostrar¶

MODERADO: Despues de seleccionar medicamento, antes de guardar
MENOR: Inline en pantalla de confirmacion de medicamento

12.2. Donde Aparece¶

MODERADO: Overlay sobre cualquier pantalla de flujo de medicamentos
MENOR: Embebido en SCR-MED-003 (agregar) o SCR-MED-002 (detalle)

13. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)