SCR-INT-004: Detalle de Interaccion
Identificador: SCR-INT-004
Modulo: MTS-INT-001 - Motor de Interacciones Medicamentosas
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Prioridad: ALTA
Tipo: Full Screen
1. Proposito
Pantalla de detalle completo de una interaccion medicamentosa. Muestra toda la informacion tecnica disponible incluyendo mecanismo de accion, recomendaciones clinicas, fuentes y referencias. Accesible desde cualquier alerta de interaccion.
2. Wireframe ASCII
+--------------------------------------------------+
| [<] Detalle de Interaccion [Share icon] |
+--------------------------------------------------+
| |
| +-----------------------------------------------+ |
| | [Severity Badge: Color segun severidad] | |
| | CONTRAINDICADO / SERIO / MODERADO / MENOR | |
| +-----------------------------------------------+ |
| |
| +-----------------------------------------------+ |
| | MEDICAMENTOS INVOLUCRADOS | |
| +-----------------------------------------------+ |
| | +-------------------+ +-------------------+ | |
| | | [Pill] Warfarina | <-> | [Pill] Aspirina | | |
| | | 5mg | | 100mg | | |
| | | Anticoagulante | | Antiinflamatorio| | |
| | +-------------------+ +-------------------+ | |
| +-----------------------------------------------+ |
| |
| +-----------------------------------------------+ |
| | MECANISMO DE INTERACCION | |
| +-----------------------------------------------+ |
| | Tipo: Farmacodinamica | |
| | | |
| | Ambos medicamentos afectan la coagulacion | |
| | sanguinea por mecanismos diferentes: | |
| | | |
| | - Warfarina: Inhibe vitamina K, reduce | |
| | factores de coagulacion | |
| | - Aspirina: Inhibe agregacion plaquetaria | |
| | | |
| | El efecto combinado aumenta significativa- | |
| | mente el riesgo de sangrado. | |
| +-----------------------------------------------+ |
| |
| +-----------------------------------------------+ |
| | EFECTO CLINICO | |
| +-----------------------------------------------+ |
| | - Aumento del riesgo de sangrado (3-5x) | |
| | - Hemorragia gastrointestinal | |
| | - Sangrado intracraneal | |
| | - Hematomas espontaneos | |
| +-----------------------------------------------+ |
| |
| +-----------------------------------------------+ |
| | RECOMENDACION CLINICA | |
| +-----------------------------------------------+ |
| | [ ] Evitar la combinacion si es posible | |
| | [ ] Si es necesario, monitoreo estrecho | |
| | [ ] Considerar alternativas a aspirina | |
| | [ ] INR mas frecuente si se usa aspirina | |
| +-----------------------------------------------+ |
| |
| +-----------------------------------------------+ |
| | SINTOMAS A VIGILAR | |
| +-----------------------------------------------+ |
| | - Sangrado de encias | |
| | - Moretones sin causa aparente | |
| | - Sangre en orina o heces | |
| | - Dolor de cabeza severo | |
| | - Debilidad o mareo | |
| +-----------------------------------------------+ |
| |
| +-----------------------------------------------+ |
| | NIVEL DE EVIDENCIA | |
| +-----------------------------------------------+ |
| | [====] ALTA | |
| | Basado en estudios clinicos controlados | |
| +-----------------------------------------------+ |
| |
| +-----------------------------------------------+ |
| | FUENTES Y REFERENCIAS | |
| +-----------------------------------------------+ |
| | Fuente primaria: DrugBank | |
| | Ultima actualizacion: Diciembre 2025 | |
| | | |
| | Referencias: | |
| | [1] CHEST Guidelines 2022 | |
| | [2] FDA Drug Safety Communication | |
| | [3] UpToDate - Anticoagulation Management | |
| | | |
| | [Ver en PubMed] | |
| +-----------------------------------------------+ |
| |
+--------------------------------------------------+
| DISCLAIMER: Esta informacion es solo orientativa |
| y no sustituye el consejo medico profesional. |
+--------------------------------------------------+
| |
| +--------------------------------------------+ |
| | COMPARTIR CON MI MEDICO | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
3. Especificacion de Componentes
3.1. App Bar
| Propiedad |
Valor |
| Tipo |
Top App Bar Standard |
| Titulo |
"Detalle de Interaccion" |
| Navigation |
Back arrow |
| Actions |
Share icon |
| Elevation |
0 (scroll) / 2dp (scrolled) |
3.2. Badge de Severidad
| Severidad |
Color |
Icono |
| CONTRAINDICADO |
--color-error (#FF4444) |
Warning filled |
| SERIO |
--color-warning (#FF8C00) |
Warning |
| MODERADO |
--color-warning-moderate (#FFCC00) |
Alert |
| MENOR |
--color-info (#4444FF) |
Info |
| Propiedad |
Valor |
| Padding |
8dp 16dp |
| Border radius |
4dp |
| Typography |
Label Large Bold |
| Width |
Full width |
| Alignment |
Center |
3.3. Seccion Medicamentos
| Propiedad |
Valor |
| Background |
--color-surface-variant |
| Border radius |
12dp |
| Padding |
16dp |
| Layout |
Row con conector central |
3.3.1. Card Medicamento
| Propiedad |
Valor |
| Background |
--color-surface |
| Border |
1dp solid --color-outline-variant |
| Border radius |
8dp |
| Icono |
32dp, color categoria |
| Nombre |
Body Large Bold |
| Dosis |
Body Medium |
| Categoria |
Caption, color muted |
3.3.2. Conector
| Propiedad |
Valor |
| Icono |
Arrows left-right |
| Size |
24dp |
| Color |
Segun severidad |
| Background |
Circle, severidad container |
3.4. Secciones de Contenido
Cada seccion sigue el patron:
| Propiedad |
Valor |
| Header |
Label Large Bold, --color-primary |
| Background |
--color-surface |
| Border |
1dp solid --color-outline-variant |
| Border radius |
12dp |
| Padding |
16dp |
| Margin bottom |
12dp |
3.5. Seccion Mecanismo
| Elemento |
Especificacion |
| Label tipo |
Chip con tipo de interaccion |
| Contenido |
Body Medium, justified |
| Bullets |
Custom bullet points |
3.6. Seccion Efecto Clinico
| Elemento |
Especificacion |
| Lista |
Bulleted, iconos de warning |
| Items criticos |
Color --color-error |
| Items informativos |
Color --color-on-surface |
3.7. Seccion Recomendacion
| Elemento |
Especificacion |
| Items |
Checkbox style (visual, no interactive) |
| Background |
--color-primary-container |
| Border left |
3dp --color-primary |
3.8. Seccion Sintomas
| Elemento |
Especificacion |
| Lista |
Icons + texto |
| Iconos |
Warning small, 16dp |
| Typography |
Body Medium |
3.9. Seccion Nivel de Evidencia
| Nivel |
Visual |
Color |
| ALTA |
4/4 bars filled |
--color-success |
| MEDIA |
3/4 bars filled |
--color-warning |
| BAJA |
2/4 bars filled |
--color-error |
| Propiedad |
Valor |
| Bar width |
40dp each |
| Bar height |
8dp |
| Bar radius |
4dp |
| Gap |
4dp |
3.10. Seccion Fuentes
| Elemento |
Especificacion |
| Fuente primaria |
Body Medium Bold |
| Fecha |
Caption |
| Referencias |
Numbered list, links |
| Boton PubMed |
Text button, abre navegador |
| Propiedad |
Valor |
| Background |
--color-tertiary-container |
| Typography |
Body Small |
| Icono |
Info, 16dp |
| Padding |
12dp |
| Sticky |
Bottom when scrolled |
3.12. Boton Compartir
| Propiedad |
Valor |
| Tipo |
Filled Button |
| Background |
--color-primary |
| Icono |
Share, 20dp |
| Typography |
Label Large |
| Width |
Full width - 32dp |
| Height |
48dp |
| Margin |
16dp |
4. Estados
4.1. Estado Normal
- Todo el contenido visible
- Scroll habilitado
- Disclaimer sticky en bottom
4.2. Estado Cargando (Online)
+-----------------------------------------------+
| Verificando informacion actualizada... |
| [Progress indicator] |
+-----------------------------------------------+
4.3. Estado Offline
+-----------------------------------------------+
| [Offline icon] Informacion de base local |
| Ultima sincronizacion: [fecha] |
+-----------------------------------------------+
4.4. Estado Error Carga
+-----------------------------------------------+
| [Error icon] No se pudo cargar detalle |
| [Reintentar] [Ver datos locales] |
+-----------------------------------------------+
5. Comportamiento
5.1. Navegacion
| Accion |
Resultado |
| Back |
Regresa a alerta anterior |
| Share (app bar) |
Abre opciones de compartir |
| Boton compartir |
Abre opciones de compartir |
| Link PubMed |
Abre navegador externo |
| Link referencia |
Abre navegador externo |
5.2. Compartir
sequenceDiagram
participant U as Usuario
participant UI as Pantalla
participant SYS as Sistema
U->>UI: Tap Compartir
UI->>SYS: Generar PDF/Texto
SYS->>SYS: Incluir codigo QR verificacion
SYS-->>UI: Documento listo
UI->>UI: Share sheet nativo
U->>UI: Selecciona metodo
UI->>SYS: Log evento compartir
+--------------------------------------------------+
| MEDTIME - REPORTE DE INTERACCION |
| |
| Fecha: [fecha] |
| Codigo verificacion: [QR] [XXX-XXX] |
| |
+--------------------------------------------------+
| MEDICAMENTOS |
| [Warfarina 5mg] <-> [Aspirina 100mg] |
+--------------------------------------------------+
| SEVERIDAD: CONTRAINDICADO |
+--------------------------------------------------+
| MECANISMO: |
| [Contenido completo] |
+--------------------------------------------------+
| RECOMENDACION: |
| [Contenido completo] |
+--------------------------------------------------+
| FUENTES: |
| [Lista de referencias] |
+--------------------------------------------------+
| Este documento fue generado por MedTime. |
| La informacion es solo orientativa. |
| Verificable en: medtime.app/verify/XXX-XXX |
+--------------------------------------------------+
6. Accesibilidad
6.1. WCAG AA
| Criterio |
Implementacion |
Estado |
| 1.3.1 Info Structure |
Headings semanticos |
Cumple |
| 1.4.3 Contraste |
4.5:1 |
Cumple |
| 2.4.1 Bypass |
Back navigation |
Cumple |
| 2.4.6 Headings |
Cada seccion con heading |
Cumple |
6.2. Screen Reader
La pantalla se lee como documento estructurado:
"Detalle de interaccion. Severidad: Contraindicado.
Encabezado: Medicamentos involucrados.
Warfarina 5 miligramos, anticoagulante.
Interactua con.
Aspirina 100 miligramos, antiinflamatorio.
Encabezado: Mecanismo de interaccion.
Tipo: Farmacodinamica.
[Contenido...]
Encabezado: Efecto clinico.
[Lista de efectos...]
[Continua con cada seccion...]
Boton: Compartir con mi medico."
6.3. Focus Order
- Back button
- Share button (app bar)
- Contenido scrollable
- Links externos (tab dentro del scroll)
- Boton compartir (footer)
7. Responsive
7.1. Mobile (< 600dp)
- Layout vertical como wireframe
- Cards de medicamentos en stack si espacio insuficiente
- Botones full width
7.2. Tablet (> 600dp)
+--------------------------------------------------+
| +---------------------+ +---------------------+ |
| | Medicamentos | | Severidad + Badge | |
| +---------------------+ +---------------------+ |
| |
| +---------------------+ +---------------------+ |
| | Mecanismo | | Efecto Clinico | |
| +---------------------+ +---------------------+ |
| |
| +---------------------------------------------+ |
| | Recomendacion (full width) | |
| +---------------------------------------------+ |
| |
| +---------------------+ +---------------------+ |
| | Sintomas | | Nivel Evidencia | |
| +---------------------+ +---------------------+ |
| |
| +---------------------------------------------+ |
| | Fuentes y Referencias | |
| +---------------------------------------------+ |
8. Animaciones
8.1. Entrada
| Elemento |
Animacion |
Duracion |
| Screen |
Push from right |
300ms |
| Badge |
Fade in |
200ms (delay 100ms) |
| Secciones |
Stagger fade in |
100ms each |
| Elemento |
Animacion |
Trigger |
| App bar |
Elevation change |
Scroll > 0 |
| Disclaimer |
Sticky fade |
Scroll past |
9. Datos Requeridos
interface InteractionDetail {
id: string;
severidad: 'CONTRAINDICADO' | 'SERIO' | 'MODERADO' | 'MENOR';
medicamentoA: MedicamentoInfo;
medicamentoB: MedicamentoInfo;
tipoInteraccion: 'FARMACOCINETICA' | 'FARMACODINAMICA' | 'MIXTA';
mecanismo: string;
efectoClinico: string[];
recomendacion: string[];
sintomasVigilar: string[];
nivelEvidencia: 'ALTA' | 'MEDIA' | 'BAJA';
fuentePrimaria: string;
fechaActualizacion: Date;
referencias: {
titulo: string;
url?: string;
}[];
pubmedLinks?: string[];
}
interface MedicamentoInfo {
nombre: string;
dosis: string;
categoria: string;
icono: MedicationIconType;
}
10. Analytics
| Evento |
Parametros |
interaction_detail_viewed |
interaction_id, severity, source_screen |
interaction_detail_time_spent |
interaction_id, duration_seconds |
interaction_detail_scrolled |
interaction_id, scroll_depth_percent |
interaction_detail_shared |
interaction_id, share_method |
interaction_reference_clicked |
interaction_id, reference_index |
interaction_pubmed_clicked |
interaction_id |
11. Testing Checklist
12. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)