Saltar a contenido

SCR-INT-001: Alerta de Interaccion CONTRAINDICADO

Identificador: SCR-INT-001 Modulo: MTS-INT-001 - Motor de Interacciones Medicamentosas Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Prioridad: CRITICA (Seguridad del Paciente) Tipo: Full Screen Modal Bloqueante

1. Proposito

Esta pantalla es la alerta maxima de seguridad del sistema. Aparece cuando se detecta una interaccion CONTRAINDICADA entre medicamentos (severidad 4). Es bloqueante - el usuario no puede continuar sin tomar una accion explicita.

Principio de Diseno: La seguridad del paciente es innegociable. Esta pantalla debe ser imposible de ignorar accidentalmente.

2. Wireframe ASCII

+--------------------------------------------------+
|                 STATUS BAR                        |
+--------------------------------------------------+
|                                                   |
|    +-----------------------------------------+    |
|    |                                         |    |
|    |         [!] CONTRAINDICADO              |    |
|    |              (Icono 64dp)               |    |
|    |                                         |    |
|    +-----------------------------------------+    |
|                                                   |
|    +-------------------------------------------+  |
|    |  INTERACCION MEDICAMENTOSA CRITICA       |  |
|    +-------------------------------------------+  |
|                                                   |
|    Los siguientes medicamentos NO deben          |
|    tomarse juntos:                               |
|                                                   |
|    +-------------------------------------------+  |
|    |  [Pill]  Warfarina 5mg                   |  |
|    |          (Anticoagulante)                |  |
|    +-------------------------------------------+  |
|                    +                              |
|    +-------------------------------------------+  |
|    |  [Pill]  Aspirina 100mg                  |  |
|    |          (Antiinflamatorio)              |  |
|    +-------------------------------------------+  |
|                                                   |
|    +-------------------------------------------+  |
|    | RIESGO: Alto riesgo de sangrado severo   |  |
|    | incluyendo hemorragia gastrointestinal   |  |
|    | y cerebral.                              |  |
|    +-------------------------------------------+  |
|                                                   |
|    [Ver mecanismo y recomendaciones]              |
|                                                   |
+--------------------------------------------------+
|                                                   |
|    +-------------------------------------------+  |
|    | [Lock] Para continuar, se requiere       |  |
|    | confirmacion de un profesional de salud  |  |
|    +-------------------------------------------+  |
|                                                   |
|    [ ] He consultado con mi medico y           |  |
|        me ha autorizado esta combinacion       |  |
|                                                   |
|    +-------------------------------------------+  |
|    |  Codigo de verificacion: [Generar]       |  |
|    +-------------------------------------------+  |
|                                                   |
|  +---------------------+  +---------------------+ |
|  |      CANCELAR       |  |  CONTINUAR (gris)  | |
|  |   (Blanco/Rojo)     |  |   (deshabilitado)  | |
|  +---------------------+  +---------------------+ |
|                                                   |
+--------------------------------------------------+
|  FUENTE: DrugBank | Actualizado: Dic 2025        |
+--------------------------------------------------+
|  IMPORTANTE: Esta informacion es solo            |
|  orientativa. Consulte siempre con su medico.    |
+--------------------------------------------------+

3. Especificacion de Componentes

3.1. Header de Alerta

Propiedad Valor
Background --color-error-900 (#7F0000)
Icono Warning Triangle, 64dp, blanco
Animacion Pulse suave cada 2 segundos
Texto "CONTRAINDICADO"
Typography Headline Large, Bold, Blanco
Padding 24dp all sides

3.2. Subtitulo

Propiedad Valor
Texto "INTERACCION MEDICAMENTOSA CRITICA"
Typography Title Medium, Bold
Color --color-error-700
Background --color-error-100
Padding 12dp horizontal, 8dp vertical
Border radius 4dp

3.3. Cards de Medicamentos

Propiedad Valor
Background --color-surface
Border 2dp solid --color-error-500
Border radius 12dp
Elevation 2dp
Padding 16dp
Icono medicamento 40dp, color categoria
Nombre Body Large, Bold
Categoria Body Medium, --color-on-surface-variant

3.4. Conector Visual

Elemento Especificacion
Simbolo "+" en circulo
Tamano 32dp
Background --color-error-500
Color simbolo Blanco
Margin 12dp vertical

3.5. Card de Riesgo

Propiedad Valor
Background --color-error-50
Border left 4dp solid --color-error-500
Label "RIESGO:" en bold
Typography Body Medium
Color texto --color-error-900
Icono Alert Circle, 24dp

3.6. Boton Ver Detalle

Propiedad Valor
Tipo Text Button
Color --color-error-700
Icono Chevron Right, 18dp
Typography Label Large
Padding 12dp horizontal

3.7. Seccion de Confirmacion

Propiedad Valor
Background --color-surface-variant
Icono Lock, 24dp, --color-on-surface-variant
Texto explicativo Body Medium
Checkbox Custom, 24dp touch target 48dp
Checkbox label Body Medium, max 2 lineas

3.8. Generador de Codigo

Propiedad Valor
Tipo Card interactiva
Estado inicial "Generar codigo" como link
Estado generado Codigo de 6 digitos monospace
Format codigo XXX-XXX (con guion)
Vigencia "Valido por 24 horas"
Acciones Copiar, Compartir
Icono copiar 24dp, tap para copiar

3.9. Botones de Accion

3.9.1. Boton Cancelar (Primario recomendado)

Propiedad Valor
Tipo Outlined Button
Color borde --color-error-500
Color texto --color-error-700
Background hover --color-error-50
Min width 140dp
Height 48dp

3.9.2. Boton Continuar

Propiedad Estado Deshabilitado Estado Habilitado
Background --color-surface-variant --color-error-500
Color texto --color-on-surface-disabled Blanco
Habilitacion Checkbox marcado + codigo generado -
Min width 140dp 140dp
Height 48dp 48dp
Propiedad Valor
Background --color-surface-variant
Typography Caption
Color --color-on-surface-variant
Contenido "FUENTE: [source]
Padding 8dp

3.11. Disclaimer Obligatorio

Propiedad Valor
Background --color-tertiary-container
Typography Body Small
Color --color-on-tertiary-container
Icono Info, 16dp
Padding 12dp
Border radius 8dp

4. Estados

4.1. Estado Inicial

  • Modal aparece con animacion fade + scale
  • Checkbox desmarcado
  • Codigo no generado
  • Boton "Continuar" deshabilitado y gris
  • Focus inicial en boton "Cancelar" (accion segura)

4.2. Estado: Codigo Generado

+-------------------------------------------+
|  Codigo de verificacion:                  |
|                                           |
|     +-------------------------------+     |
|     |       A7F - 3K9              |     |
|     +-------------------------------+     |
|                                           |
|  Valido por 24 horas                      |
|                                           |
|  [Copy icon]  [Share icon]                |
+-------------------------------------------+

4.3. Estado: Checkbox Marcado

  • Checkbox animacion de check (200ms)
  • Si codigo generado: Boton "Continuar" se habilita
  • Transicion de color del boton (fade 200ms)

4.4. Estado: Listo para Continuar

  • Boton "Continuar" activo en rojo
  • Texto cambia a "Continuar con precaucion"
  • Animacion sutil de atencion

5. Comportamiento

5.1. Aparicion

Aspecto Comportamiento
Trigger Deteccion de interaccion severidad 4
Animacion entrada Fade 300ms + scale from 0.9
Bloqueo Pantalla completa, sin back gesture
System back Ejecuta "Cancelar"

5.2. Generacion de Codigo

sequenceDiagram
    participant U as Usuario
    participant UI as Pantalla
    participant SYS as Sistema

    U->>UI: Tap "Generar codigo"
    UI->>SYS: Solicitar codigo verificacion
    SYS->>SYS: Generar codigo unico 6 chars
    SYS->>SYS: Asociar a interaccion + timestamp
    SYS-->>UI: Codigo + vigencia
    UI->>UI: Mostrar codigo con animacion
    UI->>UI: Mostrar opciones copiar/compartir

5.3. Validacion de Codigo (Profesional)

El codigo puede ser verificado por un profesional de salud via:

  1. Portal web de MedTime
  2. Deep link medtime://verify/{code}
  3. Llamada telefonica a soporte

El profesional ve:

  • Medicamentos involucrados
  • Fecha/hora de generacion
  • Estado del codigo (usado/no usado)

5.4. Flujo de Cancelar

flowchart TD
    A[Tap Cancelar] --> B[Animacion fade out]
    B --> C[Revertir cambio de medicamento]
    C --> D[Regresar a pantalla anterior]
    D --> E[Snackbar: Medicamento no agregado]

5.5. Flujo de Continuar

flowchart TD
    A[Tap Continuar] --> B{Validaciones}
    B --> |Checkbox no marcado| C[Shake checkbox]
    B --> |Codigo no generado| D[Highlight generar codigo]
    B --> |Todo OK| E[Confirmar accion]

    E --> F[Guardar medicamento]
    F --> G[Flag: OVERRIDE_CONTRAINDICADO]
    G --> H[Log HIPAA audit]
    H --> I[Crear alerta persistente]
    I --> J[Cerrar modal]
    J --> K[Snackbar: Guardado con advertencia]

6. Accesibilidad

6.1. Nivel WCAG: AAA (Pantalla Critica)

Criterio Implementacion Estado
1.4.3 Contraste (AA) 7:1 para texto critico Excede
1.4.6 Contraste (AAA) 10:1 texto blanco/rojo oscuro Cumple
1.4.11 Non-text 3:1 iconos y bordes Cumple
2.1.1 Keyboard Tab order logico Cumple
2.4.3 Focus Order Cancelar > Detalle > Checkbox > Generar > Continuar Cumple
4.1.2 Name, Role Todos los elementos etiquetados Cumple
4.1.3 Status aria-live="assertive" en aparicion Cumple

6.2. Screen Reader

On appear:
"Alerta critica. Pantalla bloqueante. Interaccion contraindicada
detectada entre Warfarina 5 miligramos anticoagulante y Aspirina
100 miligramos antiinflamatorio. Riesgo: Alto riesgo de sangrado
severo incluyendo hemorragia gastrointestinal y cerebral.
Para continuar se requiere confirmacion de profesional de salud.
Use Tab para navegar entre opciones. Boton Cancelar enfocado."

6.3. Elementos Focusables (Tab Order)

  1. Boton "Cancelar" (focus inicial)
  2. Link "Ver mecanismo y recomendaciones"
  3. Checkbox de confirmacion
  4. Boton/Link "Generar codigo"
  5. Boton "Copiar codigo" (si visible)
  6. Boton "Compartir codigo" (si visible)
  7. Boton "Continuar"

6.4. Gestos

Gesto Accion Accesibilidad
Back (Android) Ejecuta Cancelar Anunciado
Swipe down (iOS) Deshabilitado No aplica
Double tap Activa elemento enfocado Standard
Long press codigo Copiar Anunciado

7. Responsive Design

7.1. Mobile Portrait (< 600dp)

  • Layout mostrado en wireframe
  • Cards de medicamentos stack vertical
  • Botones 100% width en stack

7.2. Mobile Landscape (< 600dp height)

  • Scroll habilitado
  • Header reducido (48dp icono)
  • Botones side by side

7.3. Tablet (> 600dp)

+--------------------------------------------------+
|                                                   |
|  +-------------------+  +---------------------+   |
|  |  [Warfarina]     |  | RIESGO:             |   |
|  |  +               |  | Alto riesgo de...   |   |
|  |  [Aspirina]      |  |                     |   |
|  +-------------------+  +---------------------+   |
|                                                   |
  • Layout 2 columnas para medicamentos y riesgo
  • Max width 600dp para contenido
  • Centrado horizontal

8. Animaciones

8.1. Entrada

Elemento Animacion Duracion Delay
Overlay Fade in 200ms 0
Modal Scale 0.9->1 + fade 300ms 100ms
Icono header Fade in 200ms 300ms
Contenido Fade in stagger 200ms/item 400ms

8.2. Icono Pulsante

@keyframes pulse-alert {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}
/* Duration: 2s, infinite, ease-in-out */

8.3. Generacion de Codigo

Elemento Animacion Duracion
Boton -> Input Morph 300ms
Digitos codigo Fade in secuencial 100ms/digito
Icono copiar Pop in 200ms

8.4. Reduccion de Movimiento

Con prefers-reduced-motion: reduce:

  • Pulse: Deshabilitado (icono estatico)
  • Transiciones: 0ms o instant
  • Stagger: Simultaneo
  • Solo feedback haptico

9. Datos Requeridos

9.1. Input

interface ContraindicacionAlertData {
  medicamentoA: {
    nombre: string;
    dosis: string;
    categoria: string;
    icono: MedicationIconType;
  };
  medicamentoB: {
    nombre: string;
    dosis: string;
    categoria: string;
    icono: MedicationIconType;
  };
  riesgo: string;
  mecanismoResumen: string;
  fuente: string;
  fechaActualizacion: Date;
  interaccionId: string;
}

9.2. Output

interface ContraindicacionAlertResult {
  accion: 'cancelar' | 'continuar';
  codigoVerificacion?: string;
  timestampConfirmacion?: Date;
  checkboxConfirmado: boolean;
}

10. Analytics

10.1. Eventos

Evento Parametros Cuando
contraindication_alert_shown med_pair, source Al mostrar
contraindication_detail_tapped med_pair Tap ver detalle
contraindication_code_generated med_pair, code_id Generar codigo
contraindication_code_copied code_id Copiar codigo
contraindication_code_shared code_id, method Compartir
contraindication_checkbox_checked med_pair Marcar checkbox
contraindication_cancelled med_pair, time_on_screen Cancelar
contraindication_overridden med_pair, code_id, time_on_screen Continuar

10.2. Metricas de Seguridad

Metrica Objetivo Alerta Si
Override rate < 10% > 15%
Tiempo promedio en pantalla > 30s < 10s
Ver detalle rate > 50% < 30%
Codigo verificado por profesional > 80% de overrides < 50%

11. Testing Checklist

11.1. Funcional

  • Modal bloquea toda interaccion exterior
  • System back ejecuta Cancelar
  • Checkbox habilita/deshabilita Continuar
  • Codigo se genera correctamente
  • Codigo se puede copiar
  • Codigo se puede compartir
  • Cancelar revierte cambios
  • Continuar guarda con flag

11.2. Accesibilidad

  • Screen reader lee contenido completo
  • Tab order es logico
  • Contraste AAA verificado
  • Touch targets 48dp minimo
  • Funciona sin animaciones

11.3. Seguridad

  • No se puede omitir sin accion explicita
  • Codigo es unico por interaccion
  • Codigo expira en 24h
  • Log de auditoria se genera
  • Flag OVERRIDE se guarda

12. Referencias

Documento generado por MobileUxUiDrone (Eight of Eight) "En seguridad del paciente, no hay atajos."