codigo0/docs/ANALISIS_UX_UI_ARQUITECTURA.md

# Análisis Exhaustivo UX/UI y Arquitectura de Producto
**EMERGES TES - Diagnóstico Completo de Estructura Visual y Navegación**

---

## 📋 Índice

1. [Estructura Visual Actual](#1-estructura-visual-actual)
2. [Arquitectura de Navegación](#2-arquitectura-de-navegación)
3. [Organización del Contenido](#3-organización-del-contenido)
4. [Patrones de Diseño Reutilizados](#4-patrones-de-diseño-reutilizados)
5. [Problemas de Escalabilidad](#5-problemas-de-escalabilidad)
6. [Elementos que Merece la Pena Conservar](#6-elementos-que-merece-la-pena-conservar)

---

## 1. Estructura Visual Actual

### 1.1 Jerarquía Visual Global

**Layout Principal:**
```
┌─────────────────────────────────────────┐
│ Header (fixed, z-50, h-14)             │ ← Navegación superior
│ - Logo TES                               │
│ - Estado online/offline                  │
│ - Búsqueda + Menú                        │
├─────────────────────────────────────────┤
│ Main Content (pt-14 pb-safe)            │
│ ┌─────────────────────────────────────┐ │
│ │ Container (max-w-2xl, mx-auto)     │ │ ← Ancho máximo 672px
│ │ └── Contenido de página              │ │
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ BottomNav (fixed, bottom-0, z-50, h-16) │ ← Navegación inferior
│ - 6 items principales                    │
└─────────────────────────────────────────┘
```

**Características del Layout:**
- **Ancho máximo:** `max-w-2xl` (672px) - Diseño centrado, legible
- **Padding superior:** `pt-14` - Compensación para Header fijo
- **Padding inferior:** `pb-safe` - Compensación para BottomNav + safe area
- **Contenedor:** Centrado con `mx-auto`
- **Z-index:** Header (50), BottomNav (50), Modales (90-100)

### 1.2 Sistema de Colores y Tema

**Paleta de Colores:**
- **Tema base:** Dark mode por defecto (optimizado para uso nocturno)
- **Color primario:** Rojo emergencia (`--primary: 0 84% 50%`)
- **Color secundario:** Azul médico (`--secondary: 217 91% 52%`)
- **Colores de emergencia:**
  - Critical: `--emergency-critical` (rojo)
  - High: `--emergency-high` (naranja)
  - Medium: `--emergency-medium` (amarillo)
  - Low: `--emergency-low` (verde)

**Variables CSS Críticas:**
- `--background`, `--foreground` - Colores base
- `--card`, `--card-foreground` - Tarjetas y contenedores
- `--muted`, `--muted-foreground` - Elementos secundarios
- `--border` - Bordes y separadores
- `--radius` - Border radius global (0.75rem)

**Contraste y Legibilidad:**
- Alto contraste para uso con guantes
- Touch targets mínimos: 48px (min-h-touch)
- Focus states visibles: `ring-2 ring-primary`

### 1.3 Tipografía

**Fuente Principal:**
- **Familia:** IBM Plex Sans (Google Fonts)
- **Fallback:** system-ui, -apple-system, sans-serif
- **Tamaños:**
  - `text-2xs`: 0.625rem (10px) - Texto muy pequeño
  - `text-sm`: 0.875rem (14px) - Texto secundario
  - `text-base`: 1rem (16px) - Texto normal
  - `text-lg`: 1.125rem (18px) - Subtítulos
  - `text-xl`: 1.25rem (20px) - Títulos de sección
  - `text-2xl`: 1.5rem (24px) - Títulos de página
  - `text-3xl`: 1.875rem (30px) - Títulos principales

**Jerarquía Tipográfica:**
- **H1:** `text-3xl font-bold` - Títulos principales de página
- **H2:** `text-2xl font-semibold` - Títulos de sección
- **H3:** `text-xl font-medium` - Subtítulos
- **Body:** `text-base` o `text-sm` - Contenido
- **Muted:** `text-muted-foreground` - Texto secundario

### 1.4 Espaciado y Grid

**Sistema de Espaciado:**
- **Base:** Tailwind spacing scale (0.25rem = 4px)
- **Espaciado vertical:** `space-y-{n}` (4, 6, 8 más comunes)
- **Espaciado horizontal:** `gap-{n}` (2, 3, 4 más comunes)
- **Padding de cards:** `p-4`, `p-6` (16px, 24px)
- **Border radius:** `rounded-lg` (0.5rem), `rounded-xl` (0.75rem)

**Patrones de Grid:**
- **Grid 2 columnas:** `grid grid-cols-2 gap-3` (Home - Emergency Buttons)
- **Flex horizontal:** `flex gap-2` (Tabs, chips)
- **Flex vertical:** `flex flex-col space-y-4` (Listas)
- **Sin grid complejo:** La app evita grids complejos, prefiere flex

### 1.5 Componentes Visuales Principales

**Cards y Contenedores:**
- **Card estándar:** `bg-card border border-border rounded-xl p-6`
- **Card de procedimiento:** `.card-procedure` (clase CSS reutilizable)
- **Card expandible:** ProcedureCard, DrugCard (accordion pattern)

**Botones:**
- **Emergency Button:** Variantes critical, high, medium
- **Botón primario:** `bg-primary text-primary-foreground`
- **Botón secundario:** `bg-secondary text-secondary-foreground`
- **Botón ghost:** `hover:bg-muted` (transparente)

**Badges y Etiquetas:**
- **Badge de prioridad:** Variantes critical, high, medium, low
- **Badge de categoría:** `bg-muted rounded-full px-3 py-1`
- **Badge de edad:** Con iconos User/Baby

**Tabs:**
- **Tabs horizontales:** `flex gap-2 overflow-x-auto scrollbar-hide`
- **Tab activo:** `bg-primary text-primary-foreground`
- **Tab inactivo:** `bg-muted text-muted-foreground hover:bg-accent`

---

## 2. Arquitectura de Navegación

### 2.1 Navegación Principal

**BottomNav (Navegación Inferior):**
- **Ubicación:** Fixed bottom, visible en todas las páginas
- **Items:** 6 elementos principales
  - Home (`/`)
  - Soporte (`/soporte-vital`)
  - Patologías (`/patologias`)
  - Escena (`/escena`)
  - Fármacos (`/farmacos`)
  - Herramientas (`/herramientas`)
- **Patrón:** Icono + Label corto
- **Estado activo:** `text-primary` con clase `.active`

**Header (Navegación Superior):**
- **Ubicación:** Fixed top, visible en todas las páginas
- **Elementos:**
  - Botón retroceso (condicional, si no está en `/`)
  - Logo TES
  - Título "EMERGES TES" (solo desktop)
  - Estado online/offline
  - Botón búsqueda
  - Botón menú
- **Funcionalidad:** Acceso rápido a búsqueda y menú lateral

### 2.2 Navegación Secundaria

**MenuSheet (Menú Lateral):**
- **Trigger:** Botón menú en Header
- **Contenido:**
  - Manual Completo
  - Protocolos Transtelefónicos
  - Guiones de Comunicación
  - Checklists Material
  - Favoritos
  - Historial
  - Compartir App
  - Ajustes
  - Acerca de
- **Patrón:** Sheet/Drawer desde la derecha
- **Z-index:** 90-95

**SearchModal (Búsqueda Global):**
- **Trigger:** Botón búsqueda en Header
- **Funcionalidad:**
  - Búsqueda en tiempo real (mínimo 2 caracteres)
  - Filtros por tipo (procedimiento/fármaco)
  - Filtros por categoría
  - Historial de búsquedas
- **Resultados:** Máximo 12 items
- **Z-index:** 100

### 2.3 Navegación por Contenido

**Navegación en Páginas:**
- **BackButton:** Componente reutilizable para volver atrás
- **Breadcrumbs:** No implementado (solo BackButton)
- **Navegación entre secciones:** ManualViewer tiene anterior/siguiente

**Navegación Contextual:**
- **Enlaces relacionados:** Secciones "Protocolos Relacionados" en páginas
- **Deep linking:** Soporte con `?id=` para destacar items
- **Navegación por tabs:** Páginas con múltiples vistas (RCP, Farmacos, Herramientas)

### 2.4 Rutas y Estructura de URLs

**Estructura de Rutas:**
```
/                          → Home
/soporte-vital             → Lista de protocolos
/soporte-vital?id=X        → Protocolo destacado
/patologias                → Lista de patologías
/escena                    → Protocolos de escena
/farmacos                  → Vademécum
/farmacos?id=X             → Fármaco destacado
/herramientas              → Calculadoras y herramientas
/material                  → Checklists de material
/telefono                  → Protocolos transtelefónicos
/comunicacion              → Guiones de comunicación
/manual                    → Índice del manual
/manual/:parte/:bloque/:capitulo → Capítulo del manual
/rcp                       → Página específica RCP
/ictus                     → Página específica Ictus
/shock                     → Página específica Shock
/via-aerea                 → Página específica Vía Aérea
/favoritos                 → Favoritos del usuario
/historial                 → Historial de búsquedas
/ajustes                   → Configuración
/acerca                    → Información de la app
```

**Patrones de URL:**
- **Rutas planas:** Mayoría de páginas principales
- **Rutas con parámetros:** Manual con estructura jerárquica
- **Query params:** `?id=` para destacar items específicos

### 2.5 Flujos de Navegación Principales

**Flujo 1: Búsqueda → Resultado**
```
Header (búsqueda) → SearchModal → Resultado → Página específica
```

**Flujo 2: Home → Emergencia**
```
Home → EmergencyButton → Página de protocolo (RCP, Ictus, etc.)
```

**Flujo 3: BottomNav → Categoría → Item**
```
BottomNav → Categoría → Lista → Item expandido
```

**Flujo 4: Manual → Capítulo**
```
MenuSheet → Manual → ManualIndex → Capítulo → ManualViewer
```

**Flujo 5: Favoritos/Historial → Item**
```
MenuSheet → Favoritos/Historial → Item → Página específica
```

---

## 3. Organización del Contenido

### 3.1 Tipos de Contenido

**1. Protocolos Operativos:**
- **Ubicación:** `src/data/procedures.ts`
- **Estructura:** Categorías (soporte_vital, patologias, escena)
- **Visualización:** ProcedureCard (expandible)
- **Páginas:** SoporteVital, Patologias, Escena

**2. Fármacos:**
- **Ubicación:** `src/data/drugs.ts`, `src/data/tes-medication.ts`
- **Estructura:** Categorías (cardiovascular, respiratorio, etc.)
- **Visualización:** DrugCard, TESMedicationCard (expandibles)
- **Página:** Farmacos

**3. Manual Completo:**
- **Ubicación:** `public/manual/` (archivos .md)
- **Estructura:** Parte → Bloque → Capítulo
- **Índice:** `src/data/manual-index.ts`
- **Visualización:** ManualViewer con MarkdownViewer
- **Páginas:** ManualIndex, ManualViewer

**4. Guías de Refuerzo:**
- **Ubicación:** `docs/consolidado/` (archivos .md)
- **Estructura:** 8 secciones por guía (SECCION_01 a SECCION_08)
- **Estado:** ❌ NO implementado visualmente
- **Datos JSON:** Existe ejemplo en `src/data/guia-refuerzo-rcp-adulto-svb.json`

**5. Herramientas:**
- **Ubicación:** `src/components/tools/` (10 calculadoras)
- **Estructura:** Tabs (calculadoras, perfusiones, anatomía, códigos)
- **Visualización:** Componentes individuales
- **Página:** Herramientas

**6. Referencias:**
- **Ubicación:** `src/components/references/`, `src/data/`
- **Tipos:** Terminología anatómica, farmacológica, etc.
- **Visualización:** Componentes específicos

### 3.2 Jerarquía de Información

**Nivel 1: Categorías Principales**
- Soporte Vital
- Patologías
- Escena
- Fármacos
- Herramientas
- Manual

**Nivel 2: Subcategorías**
- Soporte Vital: RCP, Vía Aérea, Shock
- Patologías: Respiratorias, Circulatorias, Neurológicas, etc.
- Fármacos: TES, Cardiovascular, Respiratorio, etc.
- Herramientas: Calculadoras, Perfusiones, Anatomía, Códigos

**Nivel 3: Items Individuales**
- Protocolos específicos
- Fármacos específicos
- Capítulos del manual
- Calculadoras individuales

### 3.3 Organización de Datos

**Estructura de Datos:**
- **TypeScript interfaces:** Tipos estrictos para todos los datos
- **Archivos de datos:** Separados por dominio (procedures.ts, drugs.ts, etc.)
- **Índices:** manual-index.ts para navegación del manual
- **Búsqueda:** Funciones de búsqueda por dominio (searchProcedures, searchDrugs)

**Metadatos:**
- **Prioridad:** critico, alto, medio, bajo
- **Grupo de edad:** adulto, pediatrico, todos
- **Categoría:** Soporte vital, patologías, etc.
- **Palabras clave:** Para búsqueda
- **Relaciones:** Enlaces relacionados entre items

### 3.4 Contenido Dinámico vs Estático

**Contenido Estático:**
- **Protocolos:** Definidos en `procedures.ts`
- **Fármacos:** Definidos en `drugs.ts`
- **Herramientas:** Componentes React estáticos

**Contenido Dinámico:**
- **Manual:** Archivos Markdown cargados dinámicamente
- **Guías de refuerzo:** Archivos Markdown (no implementado)
- **Búsqueda:** Resultados generados dinámicamente
- **Favoritos/Historial:** Almacenados en localStorage

---

## 4. Patrones de Diseño Reutilizados

### 4.1 Patrón: Card Expandible (Accordion)

**Implementación:**
- **Componentes:** ProcedureCard, DrugCard, TESMedicationCard
- **Comportamiento:**
  - Estado colapsado por defecto
  - Click en card para expandir/colapsar
  - ChevronUp/ChevronDown indica estado
  - Contenido expandido con `border-t` separador

**Estructura:**
```tsx
<div className="card-procedure">
  <button onClick={toggle}>
    {/* Header con título y badges */}
    {/* Chevron icon */}
  </button>
  {isExpanded && (
    <div className="mt-4 pt-4 border-t">
      {/* Contenido expandido */}
    </div>
  )}
</div>
```

**Uso:**
- Listas de protocolos
- Listas de fármacos
- Items con información detallada

### 4.2 Patrón: Tabs Horizontales

**Implementación:**
- **Páginas:** RCP, Farmacos, Herramientas, Patologias
- **Comportamiento:**
  - Tabs horizontales con scroll
  - Tab activo destacado
  - Contenido cambia según tab activo
  - Estado local con `useState`

**Estructura:**
```tsx
<div className="flex gap-2 overflow-x-auto scrollbar-hide">
  {tabs.map(tab => (
    <button
      onClick={() => setActiveTab(tab.id)}
      className={activeTab === tab.id ? 'bg-primary' : 'bg-muted'}
    >
      {tab.label}
    </button>
  ))}
</div>
{activeTab === 'x' && <ContentX />}
```

**Uso:**
- Filtrar contenido por categoría
- Cambiar vista de contenido
- Organizar información relacionada

### 4.3 Patrón: Búsqueda con Filtros

**Implementación:**
- **Componente:** SearchModal
- **Comportamiento:**
  - Búsqueda en tiempo real (mínimo 2 caracteres)
  - Filtros por tipo y categoría
  - Resultados limitados (12 items)
  - Historial de búsquedas

**Estructura:**
```tsx
<input value={query} onChange={handleChange} />
{results.map(result => (
  <button onClick={() => navigate(result.path)}>
    {/* Resultado */}
  </button>
))}
```

**Uso:**
- Búsqueda global
- Búsqueda en páginas específicas (Farmacos)

### 4.4 Patrón: Lista con Badges

**Implementación:**
- **Componentes:** ProcedureCard, DrugCard
- **Comportamiento:**
  - Badges de prioridad/categoría/edad
  - Iconos en badges
  - Colores semánticos

**Estructura:**
```tsx
<div className="flex items-center gap-2">
  <Badge variant="critical">Crítico</Badge>
  <Badge variant="info">
    <User className="w-3 h-3" />
    Adulto
  </Badge>
</div>
```

**Uso:**
- Identificar prioridad de protocolos
- Categorizar contenido
- Indicar grupo de edad

### 4.5 Patrón: Header de Página

**Implementación:**
- **Páginas:** RCP, Ictus, Shock, ViaAerea
- **Comportamiento:**
  - Icono + Título + Subtítulo
  - Badge de prioridad
  - BackButton opcional

**Estructura:**
```tsx
<div className="space-y-4">
  <div className="flex items-center gap-3">
    <div className="w-12 h-12 rounded-xl bg-red-500/20">
      <Icon />
    </div>
    <div>
      <h1>Título</h1>
      <p>Subtítulo</p>
    </div>
  </div>
</div>
```

**Uso:**
- Páginas de protocolos específicos
- Identificación visual rápida

### 4.6 Patrón: Sección de Enlaces Relacionados

**Implementación:**
- **Páginas:** RCP, Ictus, etc.
- **Comportamiento:**
  - Sección al final de página
  - Enlaces a protocolos relacionados
  - Card con hover effect

**Estructura:**
```tsx
<div className="bg-muted/50 border rounded-xl p-4">
  <h3>Protocolos Relacionados</h3>
  <div className="space-y-2">
    <Link to="/x" className="flex items-center justify-between p-3">
      <span>Título</span>
      <ChevronRight />
    </Link>
  </div>
</div>
```

**Uso:**
- Navegación contextual
- Descubrimiento de contenido relacionado

### 4.7 Patrón: Empty State

**Implementación:**
- **Páginas:** Farmacos, SoporteVital, SearchModal
- **Comportamiento:**
  - Mensaje cuando no hay resultados
  - Icono + texto
  - Centrado verticalmente

**Estructura:**
```tsx
<div className="text-center py-12">
  <Icon className="w-12 h-12 text-muted-foreground mb-4" />
  <p className="text-muted-foreground">No hay resultados</p>
</div>
```

**Uso:**
- Búsquedas sin resultados
- Filtros sin coincidencias
- Listas vacías

### 4.8 Patrón: Loading State

**Implementación:**
- **Componente:** PageLoader, MarkdownViewer
- **Comportamiento:**
  - Spinner animado
  - Mensaje de carga
  - Centrado verticalmente

**Estructura:**
```tsx
<div className="flex flex-col items-center justify-center py-12">
  <Loader2 className="w-8 h-8 animate-spin text-primary mb-4" />
  <p className="text-muted-foreground">Cargando...</p>
</div>
```

**Uso:**
- Carga de páginas lazy-loaded
- Carga de archivos Markdown
- Operaciones asíncronas

---

## 5. Problemas de Escalabilidad

### 5.1 Problemas de Estructura

**1. Layout Único Hardcodeado:**
- **Problema:** App.tsx tiene un solo layout fijo
- **Impacto:** Difícil agregar layouts alternativos (ej: para guías de refuerzo)
- **Escalabilidad:** ❌ Baja - Requiere modificar App.tsx para cada nuevo layout

**2. Rutas Estáticas:**
- **Problema:** Todas las rutas están hardcodeadas en App.tsx
- **Impacto:** Agregar nuevas rutas requiere modificar el componente raíz
- **Escalabilidad:** ⚠️ Media - Funciona pero no escala bien

**3. Sin Sistema de Modos:**
- **Problema:** No hay diferenciación entre "Modo Formación" y "Modo Operativo"
- **Impacto:** Las guías de refuerzo no tienen lugar en la arquitectura actual
- **Escalabilidad:** ❌ Baja - No permite agregar nuevos tipos de contenido

### 5.2 Problemas de Contenido

**1. Guías de Refuerzo No Implementadas:**
- **Problema:** Existen archivos Markdown pero no hay visualización
- **Impacto:** Contenido formativo no accesible
- **Escalabilidad:** ❌ Baja - No hay sistema para agregar más guías

**2. MarkdownViewer Único:**
- **Problema:** Un solo componente para todo el Markdown
- **Impacto:** Difícil personalizar renderizado para diferentes tipos de contenido
- **Escalabilidad:** ⚠️ Media - Funciona pero limita flexibilidad

**3. Estructura de Datos Fija:**
- **Problema:** manual-index.ts tiene estructura jerárquica fija
- **Impacto:** Agregar nuevas partes/bloques requiere modificar el archivo
- **Escalabilidad:** ⚠️ Media - Funciona pero requiere mantenimiento manual

### 5.3 Problemas de Navegación

**1. BottomNav Limitado:**
- **Problema:** Solo 6 items, difícil agregar más
- **Impacto:** Nuevas categorías principales no tienen espacio
- **Escalabilidad:** ❌ Baja - Requiere rediseño para escalar

**2. Sin Breadcrumbs:**
- **Problema:** Solo BackButton, no hay indicador de ubicación
- **Impacto:** En contenido profundo (manual) es difícil saber dónde estás
- **Escalabilidad:** ⚠️ Media - Funciona pero limita navegación compleja

**3. Búsqueda Limitada:**
- **Problema:** Solo busca procedimientos y fármacos
- **Impacto:** No busca en manual ni guías de refuerzo
- **Escalabilidad:** ⚠️ Media - Requiere extender funciones de búsqueda

### 5.4 Problemas de Rendimiento

**1. Lazy Loading Parcial:**
- **Problema:** Algunas páginas se cargan lazy, otras no
- **Impacto:** Bundle inicial puede ser grande
- **Escalabilidad:** ⚠️ Media - Funciona pero puede optimizarse

**2. Markdown Cargado en Runtime:**
- **Problema:** Archivos Markdown se cargan con fetch en runtime
- **Impacto:** Dependencia de red, carga lenta
- **Escalabilidad:** ⚠️ Media - Funciona pero limita uso offline

**3. Sin Virtualización:**
- **Problema:** Listas largas renderizan todos los items
- **Impacto:** Rendimiento degrada con muchas items
- **Escalabilidad:** ⚠️ Media - Funciona pero puede optimizarse

### 5.5 Problemas de Mantenibilidad

**1. Componentes Acoplados:**
- **Problema:** Algunos componentes dependen de estructuras de datos específicas
- **Impacto:** Cambios en datos requieren cambios en componentes
- **Escalabilidad:** ⚠️ Media - Funciona pero requiere cuidado

**2. Estilos Mezclados:**
- **Problema:** Algunos estilos están en componentes, otros en CSS
- **Impacto:** Difícil mantener consistencia
- **Escalabilidad:** ⚠️ Media - Funciona pero puede mejorarse

**3. Sin Sistema de Temas Extensible:**
- **Problema:** Tema dark/light pero no hay variantes
- **Impacto:** Difícil crear temas alternativos (ej: modo formativo vs operativo)
- **Escalabilidad:** ⚠️ Media - Funciona pero limita personalización

---

## 6. Elementos que Merece la Pena Conservar

### 6.1 Sistema de Diseño Base

**✅ Conservar: Sistema de Variables CSS**
- **Razón:** Centralizado, fácil de mantener, permite cambios globales
- **Ubicación:** `src/index.css`
- **Valor:** Alto - Base sólida para cualquier rediseño

**✅ Conservar: Tailwind CSS + shadcn/ui**
- **Razón:** Componentes modulares, bien documentados, fácil de extender
- **Ubicación:** `src/components/ui/`
- **Valor:** Alto - Base sólida de componentes

**✅ Conservar: Sistema de Colores de Emergencia**
- **Razón:** Semántico, claro, bien definido
- **Ubicación:** `tailwind.config.ts`, `src/index.css`
- **Valor:** Alto - Específico del dominio médico

### 6.2 Componentes Reutilizables

**✅ Conservar: EmergencyButton**
- **Razón:** Componente específico del dominio, bien diseñado
- **Ubicación:** `src/components/shared/EmergencyButton.tsx`
- **Valor:** Alto - Único y valioso

**✅ Conservar: Badge Component**
- **Razón:** Reutilizable, bien implementado, variantes claras
- **Ubicación:** `src/components/shared/Badge.tsx`
- **Valor:** Alto - Base para identificación visual

**✅ Conservar: Card Patterns (ProcedureCard, DrugCard)**
- **Razón:** Patrón consistente, bien implementado, expandible
- **Ubicación:** `src/components/procedures/`, `src/components/drugs/`
- **Valor:** Alto - Patrón reutilizable

**✅ Conservar: MarkdownViewer**
- **Razón:** Funcional, bien configurado, extensible
- **Ubicación:** `src/components/content/MarkdownViewer.tsx`
- **Valor:** Alto - Base para contenido Markdown

### 6.3 Navegación y UX

**✅ Conservar: BottomNav**
- **Razón:** Mobile-first, accesible, bien posicionado
- **Ubicación:** `src/components/layout/BottomNav.tsx`
- **Valor:** Alto - Navegación principal efectiva

**✅ Conservar: SearchModal**
- **Razón:** Funcional, bien implementado, con filtros
- **Ubicación:** `src/components/layout/SearchModal.tsx`
- **Valor:** Alto - Búsqueda global efectiva

**✅ Conservar: Sistema de Favoritos/Historial**
- **Razón:** Funcional, bien implementado, persistente
- **Ubicación:** `src/hooks/useFavorites.ts`, `src/hooks/useSearchHistory.ts`
- **Valor:** Alto - Mejora UX significativamente

### 6.4 Arquitectura Técnica

**✅ Conservar: Lazy Loading de Páginas**
- **Razón:** Mejora rendimiento, bien implementado
- **Ubicación:** `src/App.tsx`
- **Valor:** Alto - Optimización importante

**✅ Conservar: Code Splitting por Vite**
- **Razón:** Bundle optimizado, bien configurado
- **Ubicación:** `vite.config.ts`
- **Valor:** Alto - Rendimiento optimizado

**✅ Conservar: TypeScript Interfaces**
- **Razón:** Tipado estricto, bien definido, mantenible
- **Ubicación:** `src/data/`
- **Valor:** Alto - Base sólida de tipos

### 6.5 Funcionalidades Específicas

**✅ Conservar: Sistema PWA**
- **Razón:** Funciona offline, instalable, bien implementado
- **Ubicación:** `public/sw.js`, `public/manifest.json`
- **Valor:** Alto - Característica diferenciadora

**✅ Conservar: Sistema de Búsqueda**
- **Razón:** Funcional, con filtros, bien implementado
- **Ubicación:** `src/data/procedures.ts`, `src/data/drugs.ts`
- **Valor:** Alto - Funcionalidad crítica

**✅ Conservar: Sistema de Calculadoras**
- **Razón:** Componentes bien implementados, funcionales
- **Ubicación:** `src/components/tools/`
- **Valor:** Alto - Herramientas valiosas

### 6.6 Contenido y Datos

**✅ Conservar: Estructura de Datos TypeScript**
- **Razón:** Tipado estricto, bien organizado, mantenible
- **Ubicación:** `src/data/`
- **Valor:** Alto - Base sólida de datos

**✅ Conservar: manual-index.ts**
- **Razón:** Estructura jerárquica clara, navegación funcional
- **Ubicación:** `src/data/manual-index.ts`
- **Valor:** Alto - Sistema de navegación del manual

**✅ Conservar: Archivos Markdown del Manual**
- **Razón:** Contenido estructurado, bien organizado
- **Ubicación:** `public/manual/`
- **Valor:** Alto - Contenido crítico

**✅ Conservar: Guías de Refuerzo (archivos)**
- **Razón:** Contenido formativo valioso, bien estructurado
- **Ubicación:** `docs/consolidado/`
- **Valor:** Alto - Contenido a implementar

### 6.7 Estilos y Tema

**✅ Conservar: Dark Mode por Defecto**
- **Razón:** Optimizado para uso nocturno, bien implementado
- **Ubicación:** `src/index.css`, `next-themes`
- **Valor:** Alto - Específico del contexto de uso

**✅ Conservar: Touch-Friendly Design**
- **Razón:** Optimizado para uso con guantes, bien implementado
- **Ubicación:** `src/index.css` (min-height: 48px)
- **Valor:** Alto - Específico del contexto de uso

**✅ Conservar: Safe Area Insets**
- **Razón:** Soporte para dispositivos con notch, bien implementado
- **Ubicación:** `src/index.css` (pb-safe)
- **Valor:** Alto - Mejora UX en móviles modernos

---

## Resumen Ejecutivo

### Fortalezas Actuales

1. **Sistema de diseño sólido:** Variables CSS, Tailwind, shadcn/ui
2. **Componentes reutilizables:** Cards, badges, botones bien implementados
3. **Navegación mobile-first:** BottomNav, SearchModal efectivos
4. **Arquitectura técnica sólida:** Lazy loading, code splitting, TypeScript
5. **Funcionalidades específicas:** PWA, búsqueda, favoritos bien implementados
6. **Contenido estructurado:** Manual y guías bien organizados

### Debilidades Identificadas

1. **Layout único:** No permite layouts alternativos
2. **Sin sistema de modos:** No diferencia formativo/operativo
3. **Guías no implementadas:** Contenido existe pero no accesible
4. **Navegación limitada:** BottomNav con espacio limitado
5. **Búsqueda parcial:** No busca en manual ni guías

### Recomendaciones de Conservación

**Alta Prioridad (Conservar Sin Cambios):**
- Sistema de variables CSS
- Componentes base (shadcn/ui)
- BottomNav y SearchModal
- Sistema PWA
- Estructura de datos TypeScript

**Media Prioridad (Conservar con Mejoras):**
- MarkdownViewer (extender para guías)
- Sistema de búsqueda (extender a manual/guías)
- Card patterns (reutilizar para guías)
- Lazy loading (optimizar)

**Baja Prioridad (Refactorizar):**
- Layout único (permitir layouts alternativos)
- Rutas estáticas (sistema de rutas dinámico)
- BottomNav limitado (rediseñar para escalar)

---

**Documento generado:** Análisis exhaustivo UX/UI y arquitectura de producto
**Fecha:** 2025-01-XX
**Estado:** Diagnóstico completo, listo para decisiones de diseño