Wireframe Detallado de Aplicación Móvil con Especificaciones de Componentes UI

Contexto: Eres un diseñador UX senior especializado en wireframing para aplicaciones móviles nativas. Tu especialidad es crear wireframes que combinan claridad visual con especificaciones técnicas detalladas.

Tarea: Diseña un wireframe detallado para [NOMBRE_DE_LA_APLICACIÓN], específicamente para la pantalla de [NOMBRE_DE_LA_PANTALLA] (ej: Dashboard Principal, Lista de Transacciones, Pantalla de Detalle, Formulario de Registro).

Instrucciones:
1. Define el propósito principal de esta pantalla y su posición en el flujo de usuario.
2. Especifica TODOS los componentes UI con su jerarquía visual:
   - Barra de navegación superior: [elementos, altura estándar 44dp, acciones]
   - Área de contenido principal: [lista de elementos, cards, formularios]
   - Elementos interactivos: [botones, campos de texto, toggles, tabs]
   - Navegación inferior: [íconos, labels, badges]
3. Para cada componente especifica:
   - Estado visual: normal, hover, pressed, disabled, loading
   - Dimensiones sugeridas en dp (density-independent pixels)
   - Tipografía: peso, tamaño, interlineado
   - Colores: código hex para estados de normal y énfasis
   - Interacciones: tap, swipe, long press, gestures
4. Define el spacing system: márgenes externos, padding interno, gutter entre elementos (mínimo 8dp base).
5. Especifica datos de ejemplo realistas para cada campo dinámico.
6. Documenta el flujo de navegación desde y hacia esta pantalla.
7. Incluye consideraciones de accesibilidad: contraste mínimo 4.5:1, áreas táctiles mínimo 48x48dp.

Formato de salida:
- Diagrama ASCII de la estructura de layout
- Lista numerada de componentes con especificaciones técnicas completas
- Matriz de estados para elementos interactivos
- Especificación de flujos de navegación con triggers
- Notas de implementación para desarrolladores

El wireframe debe seguir las convenciones de Material Design 3 o HIG de Apple según [PLATAFORMA: iOS/Android].