SCR-IES-004: Alerta POS (Restriccion Post-Tratamiento)¶

Identificador: SCR-IES-004 Modulo: MTS-INT-002 - Interacciones Medicamentos-Estudios Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Prioridad: ALTA Tipo: Bottom Sheet

1. Proposito¶

Esta pantalla informa al usuario sobre restricciones de medicamentos que aplican despues de un procedimiento medico. Aparece el dia del procedimiento o inmediatamente despues, recordando al paciente que medicamentos evitar y por cuanto tiempo.

Ejemplo tipico: No tomar sedantes ni alcohol por 24 horas despues de una endoscopia con sedacion.

2. Wireframe ASCII¶

+--------------------------------------------------+
|                                                   |
|          [Drag Handle - 32dp x 4dp]              |
|                                                   |
|    +-----------------------------------------+    |
|    | [i] RESTRICCION POST-PROCEDIMIENTO     |    |
|    +-----------------------------------------+    |
|                                                   |
|    +-------------------------------------------+  |
|    | Procedimiento realizado:                  |  |
|    | Colonoscopia con sedacion                 |  |
|    | Fecha: Hoy                                |  |
|    +-------------------------------------------+  |
|                                                   |
|    +-------------------------------------------+  |
|    | Por las proximas 24 HORAS evitar:        |  |
|    |                                           |  |
|    | [X] Sedantes o tranquilizantes           |  |
|    | [X] Alcohol en cualquier cantidad        |  |
|    | [X] Medicamentos que causen somnolencia  |  |
|    +-------------------------------------------+  |
|                                                   |
|    +-------------------------------------------+  |
|    | MEDICAMENTOS QUE PUEDE TOMAR:            |  |
|    |                                           |  |
|    | [Check] Sus medicamentos habituales      |  |
|    |         (con agua)                       |  |
|    | [Check] Analgesicos suaves si tiene      |  |
|    |         molestias                        |  |
|    +-------------------------------------------+  |
|                                                   |
|    +-------------------------------------------+  |
|    | SIGNOS DE ALARMA (buscar atencion):      |  |
|    |                                           |  |
|    | - Sangrado abundante                      |  |
|    | - Dolor abdominal severo                 |  |
|    | - Fiebre > 38C                           |  |
|    | - Mareo persistente                       |  |
|    +-------------------------------------------+  |
|                                                   |
|  +----------------------------------------------+ |
|  |              ENTENDIDO                       | |
|  +----------------------------------------------+ |
|                                                   |
|  Fuente: Guias ASGE                              |
+--------------------------------------------------+

3. Especificacion de Componentes¶

3.1. Bottom Sheet¶

Propiedad	Valor
Initial height	60%
Max height	90%
Dismissable	Si (swipe down)
Background	`--color-surface`
Border radius top	16dp
Drag handle	32dp x 4dp, centered

3.2. Header¶

Propiedad	Valor
Background	`--color-info-container` (#E3F2FD)
Icono	Info, 32dp, `--color-info` (#4444FF)
Titulo	"RESTRICCION POST-PROCEDIMIENTO"
Typography	Title Medium Bold
Border radius	12dp
Padding	16dp

3.3. Card Procedimiento¶

Propiedad	Valor
Background	`--color-surface-variant`
Label	"Procedimiento realizado:" - Label Medium
Nombre	Body Large Bold
Fecha	Body Medium (destacar "Hoy" en primary)

3.4. Card Evitar¶

Propiedad	Valor
Background	`--color-error-container`
Border left	4dp solid `--color-error`
Titulo	"Por las proximas [X] HORAS evitar:"
Duracion destacada	Body Large Bold, `--color-error`
Lista	Checkboxes visuales (no interactivos) con X
Typography items	Body Medium

3.5. Card Permitido¶

Propiedad	Valor
Background	`--color-success-container`
Border left	4dp solid `--color-success`
Titulo	"MEDICAMENTOS QUE PUEDE TOMAR:"
Lista	Checkmarks verdes
Typography	Body Medium

3.6. Card Signos de Alarma¶

Propiedad	Valor
Background	`--color-warning-container`
Border	2dp solid `--color-warning`
Titulo	"SIGNOS DE ALARMA (buscar atencion):"
Typography titulo	Label Large Bold, `--color-warning`
Lista	Bulleted, iconos warning
Typography items	Body Medium

3.7. Boton¶

Propiedad	Valor
Tipo	Filled Button
Background	`--color-primary`
Color texto	Blanco
Width	100% - 32dp
Height	48dp
Texto	"ENTENDIDO"

4. Estados¶

4.1. Aparicion Automatica¶

Esta pantalla puede aparecer automaticamente:

Inmediatamente despues del horario programado del procedimiento
Al abrir la app el dia del procedimiento
Como notificacion que abre el bottom sheet

4.2. Interactivo¶

Scroll si contenido excede altura
Swipe down para dismiss
Tap fuera para dismiss
Boton "Entendido" para dismiss con confirmacion

4.3. Dismissed¶

Log de visualizacion
No vuelve a aparecer automaticamente
Accesible desde historial de la cita

5. Comportamiento¶

5.1. Trigger de Aparicion¶

flowchart TD
    A[Cita con interaccion POS] --> B[Dia del procedimiento]
    B --> C{Hora actual vs hora cita}

    C -->|Antes| D[Programar notificacion]
    D --> E[Notificacion 1h despues de cita]
    E --> F[Tap notificacion]
    F --> G[Mostrar SCR-IES-004]

    C -->|Despues| H[Al abrir app]
    H --> I{Ya mostrado hoy?}
    I -->|No| G
    I -->|Si| J[No mostrar automaticamente]

5.2. Contenido Dinamico¶

El contenido se genera segun el tipo de procedimiento:

interface RestriccionPost {
  procedimiento: string;
  duracionHoras: number;
  evitar: string[];
  permitido: string[];
  signosAlarma: string[];
  fuente: string;
}

const restriccionesPost: Record<string, RestriccionPost> = {
  'colonoscopia_sedacion': {
    procedimiento: 'Colonoscopia con sedacion',
    duracionHoras: 24,
    evitar: [
      'Sedantes o tranquilizantes',
      'Alcohol en cualquier cantidad',
      'Medicamentos que causen somnolencia'
    ],
    permitido: [
      'Sus medicamentos habituales (con agua)',
      'Analgesicos suaves si tiene molestias'
    ],
    signosAlarma: [
      'Sangrado abundante',
      'Dolor abdominal severo',
      'Fiebre > 38C',
      'Mareo persistente'
    ],
    fuente: 'Guias ASGE'
  },
  // ... otros procedimientos
};

6. Accesibilidad¶

6.1. WCAG AA¶

Criterio	Implementacion
1.4.1 Color	Azul + Icono Info + Texto
1.4.3 Contraste	4.5:1
2.1.1 Keyboard	Tab navigation completa
4.1.3 Status	aria-live="polite"

"Restriccion post-procedimiento.
Procedimiento realizado: Colonoscopia con sedacion, hoy.
Por las proximas 24 horas evitar: Sedantes o tranquilizantes,
Alcohol en cualquier cantidad, Medicamentos que causen somnolencia.
Medicamentos que puede tomar: Sus medicamentos habituales con agua,
Analgesicos suaves si tiene molestias.
Signos de alarma, buscar atencion medica si presenta:
Sangrado abundante, Dolor abdominal severo, Fiebre mayor a 38 grados,
Mareo persistente.
Boton: Entendido."

6.3. Focus Order¶

Drag handle
Contenido scrollable (listas son informativos)
Boton Entendido

7. Responsive¶

Breakpoint	Comportamiento
Mobile portrait	Bottom sheet 60-90%
Mobile landscape	Bottom sheet 80-100%
Tablet	Centered modal, 450dp max

8. Animaciones¶

Elemento	Animacion	Duracion
Sheet appear	Slide up	300ms
Sheet dismiss	Slide down	200ms
Cards	Stagger fade in	100ms each

9. Analytics¶

Evento	Parametros
`pos_alert_shown`	procedure_id, trigger_type
`pos_alert_dismissed`	procedure_id, method
`pos_alarm_signs_viewed`	procedure_id

10. Integracion¶

10.1. Con MTS-NTF-001¶

sequenceDiagram
    participant CIT as MTS-CIT-001
    participant INT2 as MTS-INT-002
    participant NTF as MTS-NTF-001
    participant UI as SCR-IES-004

    CIT->>INT2: Cita con interaccion POS creada
    INT2->>NTF: Programar notificacion post
    Note over NTF: Hora cita + 1 hora

    NTF->>NTF: Dia del procedimiento
    NTF-->>UI: Trigger notificacion
    UI->>UI: Mostrar bottom sheet

11. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)