codigo0/docs/consolidado/INFORME_ARQUITECTURA_APLICACION.md

# 📋 Informe de Arquitectura - EMERGES TES

**Fecha de análisis:** 2025-12-23  
**Analista:** Arquitecto Senior de Aplicaciones Web y Móviles  
**Versión de la aplicación:** 1.0.0

---

## 1️⃣ Visión General de la Aplicación

### Tipo de Aplicación
**Aplicación Web Progresiva (PWA)** de consulta rápida para profesionales sanitarios de emergencias.

### Funcionalidad Principal
Guía digital de protocolos médicos de emergencias prehospitalarias diseñada específicamente para **Técnicos de Emergencias Sanitarias (TES)**.

### Problema que Resuelve
- **Acceso rápido a información crítica** durante emergencias médicas
- **Consulta offline** de protocolos, fármacos y calculadoras médicas
- **Estandarización de procedimientos** según guías oficiales (ERC, AHA, SEMES)
- **Reducción de errores** mediante acceso inmediato a dosis, contraindicaciones y pasos de protocolos
- **Formación continua** con manual completo estructurado y navegable

### Usuario Final
**Técnicos de Emergencias Sanitarias (TES)** que trabajan en:
- Ambulancias de emergencias
- Servicios de urgencias prehospitalarias
- Equipos de respuesta rápida
- Situaciones de emergencia donde el acceso rápido a información puede salvar vidas

**Contexto de uso:**
- Ambiente de alta presión y estrés
- Necesidad de información inmediata (< 30 segundos)
- Uso frecuente en condiciones adversas (móvil, offline, bajo presión)
- Requisito de precisión absoluta (errores pueden ser críticos)

---

## 2️⃣ Estructura Técnica

### Stack Tecnológico

**Frontend Framework:**
- **React 18.3.1** con TypeScript
- **Vite 5.4.19** como build tool (SWC para compilación rápida)
- **React Router DOM 6.30.1** para navegación SPA

**UI Framework:**
- **Tailwind CSS 3.4.17** para estilos
- **Radix UI** (componentes headless accesibles)
- **shadcn/ui** (componentes pre-construidos sobre Radix)
- **Lucide React** para iconografía

**Estado y Datos:**
- **TanStack Query (React Query) 5.83.0** para gestión de estado del servidor (aunque no hay backend)
- **localStorage** para persistencia de favoritos
- **sessionStorage** para historial de búsquedas
- **Datos estáticos en TypeScript** (`src/data/*.ts`)

**Procesamiento de Contenido:**
- **react-markdown 10.1.0** para renderizado de Markdown
- **remark/rehype** plugins para procesamiento avanzado de Markdown
- **highlight.js** para syntax highlighting en código

**PWA:**
- **Service Worker** personalizado (`public/sw.js`)
- **Manifest.json** configurado para instalación
- **Workbox** no usado (Service Worker manual)

**Temas:**
- **next-themes 0.3.0** para gestión de temas (claro/oscuro/sistema)

### Organización de Carpetas

```
guia-tes/
├── public/
│   ├── manual/              # 94 archivos .md organizados en bloques temáticos
│   ├── assets/infografias/  # Imágenes médicas e infografías
│   ├── sw.js                # Service Worker
│   └── manifest.json        # PWA manifest
├── src/
│   ├── components/          # Componentes React organizados por dominio
│   │   ├── layout/         # Header, Footer, BottomNav, SearchModal, etc.
│   │   ├── drugs/          # Componentes de fármacos
│   │   ├── tools/          # Calculadoras médicas
│   │   ├── procedures/     # Tarjetas de protocolos
│   │   ├── content/        # MarkdownViewer
│   │   ├── decision-trees/ # Árboles de decisión interactivos
│   │   └── ui/             # Componentes UI base (shadcn)
│   ├── pages/              # 25 páginas principales
│   ├── data/               # 14 archivos de datos estáticos TypeScript
│   ├── hooks/              # 6 hooks personalizados
│   ├── lib/                # Utilidades (cn, utils)
│   └── utils/              # Utilidades específicas (markdownUtils)
└── docs/                   # Documentación del proyecto
```

### Componentes Principales

**Layout (Estructura Global):**
- `Header.tsx`: Barra superior fija con logo, búsqueda, menú, estado online/offline
- `BottomNav.tsx`: Navegación inferior con 6 iconos principales
- `Footer.tsx`: Información legal y enlaces
- `SearchModal.tsx`: Modal de búsqueda global con filtros
- `MenuSheet.tsx`: Menú lateral deslizable con acceso a todas las secciones
- `InstallBanner.tsx`: Banner para instalar PWA
- `UpdateNotification.tsx`: Notificación de actualizaciones del Service Worker

**Páginas Principales (25 páginas):**
1. `Index.tsx` - Home con acceso rápido a emergencias críticas
2. `SoporteVital.tsx` - Protocolos de soporte vital básico
3. `Patologias.tsx` - Patologías por sistemas (respiratorias, circulatorias, etc.)
4. `Escena.tsx` - Seguridad, ABCDE, Triage, Inmovilización
5. `Farmacos.tsx` - Vademécum completo con búsqueda y filtros
6. `Herramientas.tsx` - Calculadoras, tablas de perfusión, códigos
7. `Material.tsx` - Checklists de material sanitario
8. `Telefono.tsx` - Protocolos transtelefónicos
9. `Comunicacion.tsx` - Guiones de comunicación
10. `ManualIndex.tsx` - Índice navegable del manual completo
11. `ManualViewer.tsx` - Visor de capítulos del manual (Markdown)
12. `RCP.tsx` - Protocolo RCP detallado (adulto/pediátrico)
13. `Ictus.tsx` - Código Ictus
14. `Shock.tsx` - Protocolo de Shock
15. `ViaAerea.tsx` - Vía Aérea y OVACE
16. `Favoritos.tsx` - Lista de favoritos del usuario
17. `Historial.tsx` - Historial de búsquedas recientes
18. `Ajustes.tsx` - Configuración (tema, limpieza de datos)
19. `Acerca.tsx` - Información sobre la app
20. `GaleriaImagenes.tsx` - Galería de infografías
21. `Privacidad.tsx` - Política de privacidad
22. `DescargoResponsabilidad.tsx` - Descargo de responsabilidad médica
23. `AvisoLegal.tsx` - Aviso legal
24. `NotFound.tsx` - Página 404

**Componentes de Dominio:**
- `DrugCard.tsx` - Tarjeta de fármaco con información completa
- `TESMedicationCard.tsx` - Medicación específica TES
- `ProcedureCard.tsx` - Tarjeta de protocolo con pasos
- `MarkdownViewer.tsx` - Visor de archivos Markdown con procesamiento avanzado
- `DecisionTreeViewer.tsx` - Árboles de decisión interactivos
- `GlasgowCalculator.tsx` - Calculadora de Escala de Glasgow
- `ParklandCalculator.tsx` - Calculadora de fórmula de Parkland (quemaduras)
- `PediatricDoseCalculator.tsx` - Calculadora de dosis pediátricas
- `RCPTimer.tsx` - Temporizador para RCP
- Y 5 calculadoras más...

### Gestión del Estado

**Estado Global:**
- **NO hay estado global** (no usa Redux, Zustand, Context API global)
- Estado local por componente con `useState`
- `TanStack Query` configurado pero no usado activamente (no hay backend)

**Persistencia Local:**
- **localStorage**: Favoritos (`emerges-tes-favorites`)
- **sessionStorage**: Historial de búsquedas (`emerges-tes-search-history`)
- **localStorage**: Banner PWA cerrado (`pwa-install-dismissed`)

**Hooks Personalizados:**
1. `useFavorites.ts` - Gestión de favoritos (CRUD completo)
2. `useSearchHistory.ts` - Historial de búsquedas (máx 20 items, evita duplicados)
3. `usePWAInstall.ts` - Detección y promoción de instalación PWA
4. `useServiceWorker.ts` - Gestión de actualizaciones del Service Worker
5. `use-mobile.tsx` - Detección de dispositivo móvil
6. `use-toast.ts` - Sistema de notificaciones toast

### Comunicación con Backend / Base de Datos

**NO HAY BACKEND:**
- Aplicación completamente estática
- Sin API REST, GraphQL, ni WebSockets
- Sin base de datos (ni SQL ni NoSQL)
- Sin autenticación ni autorización
- Sin sincronización de datos

**Fuentes de Datos:**
- **Archivos TypeScript estáticos** en `src/data/`:
  - `procedures.ts` - Protocolos médicos
  - `drugs.ts` - Vademécum de fármacos
  - `tes-medication.ts` - Medicación específica TES
  - `calculators.ts` - Datos de calculadoras
  - `manual-index.ts` - Índice completo del manual (94 capítulos)
  - `decision-trees.ts` - Árboles de decisión
  - `telephone-protocols.ts` - Protocolos transtelefónicos
  - `communication-scripts.ts` - Guiones de comunicación
  - `material-checklists.ts` - Checklists de material
  - Y 5 archivos más...

- **Archivos Markdown** en `public/manual/`:
  - 94 archivos `.md` organizados en 15 bloques temáticos
  - Cargados dinámicamente mediante `fetch()` en `MarkdownViewer`
  - Procesados con `react-markdown` y plugins

**Estrategia de Carga:**
- **Code Splitting**: Lazy loading de páginas con `React.lazy()`
- **Carga bajo demanda**: Archivos Markdown se cargan solo cuando se visualizan
- **Caché del navegador**: Service Worker cachea recursos estáticos

---

## 3️⃣ Flujo de Usuario

### Pantalla Inicial (Home - `/`)

**Al entrar, el usuario ve:**

1. **Barra de búsqueda** (botón clickeable que abre modal)
   - Placeholder: "Buscar protocolo, fármaco, calculadora..."
   - Acceso rápido a búsqueda global

2. **Grid de Emergencias Críticas** (2x2)
   - Botón grande "RCP / Parada" (crítico, rojo)
   - Botón "Código Ictus" (alto, naranja)
   - Botón "Shock" (medio, amarillo)
   - Botón "Vía Aérea" (crítico, rojo)
   - Cada botón tiene icono, título y subtítulo

3. **Accesos Rápidos** (chips horizontales)
   - OVACE, Glasgow, Triage, Código Ictus, Dopamina, Politrauma
   - Navegación rápida a secciones específicas

4. **Últimas Consultas** (historial reciente)
   - Máximo 3 búsquedas recientes
   - Con timestamp relativo ("hace 5 minutos")
   - Vacío si no hay historial

5. **Botón flotante de emergencia** (esquina inferior derecha)
   - Botón circular grande con icono de alerta
   - Siempre visible, acceso directo a RCP
   - Animación de pulso para llamar la atención

**Header fijo superior:**
- Logo "TES" con nombre de la app
- Indicador de estado online/offline
- Botón de búsqueda
- Botón de menú

**Bottom Navigation fija inferior:**
- 6 iconos: Home, Soporte, Patologías, Escena, Fármacos, Herramientas
- Navegación rápida entre secciones principales

### Pantallas Principales

**1. Soporte Vital (`/soporte-vital`)**
- Lista de protocolos de soporte vital básico
- Tarjetas con título, categoría, prioridad, grupo de edad
- Filtros por categoría y prioridad
- Acceso directo a RCP, OVACE, etc.

**2. Patologías (`/patologias`)**
- Tabs por sistemas: Respiratorias, Circulatorias, Neurológicas, Endocrinas, Intoxicaciones
- Cada patología muestra: Clínica, Actuación, Puntos clave
- Formato de tarjetas expandibles

**3. Escena (`/escena`)**
- Tabs: Seguridad, ABCDE, Triage, Decisiones, Inmovilización, Extricación
- Checklists interactivos
- Árboles de decisión para protocolos
- Guías paso a paso

**4. Fármacos (`/farmacos`)**
- Dos secciones: Medicación TES y Vademécum General
- Filtros por categoría (cardiovascular, respiratorio, etc.)
- Búsqueda por nombre genérico, comercial o indicación
- Cada fármaco muestra: Dosis adulto/pediátrica, vías, indicaciones, contraindicaciones, puntos críticos TES

**5. Herramientas (`/herramientas`)**
- Tabs: Calculadoras, Perfusiones, Anatomía, Códigos
- 9 calculadoras interactivas (Glasgow, Parkland, Dosis pediátricas, etc.)
- Tablas de perfusión (Dopamina, Noradrenalina)
- Guía de terminología anatómica
- Enlaces a códigos de protocolo

**6. Manual Completo (`/manual`)**
- Vista de árbol expandible
- Estructura: Parte → Bloque → Capítulo
- 94 capítulos organizados en 15 bloques temáticos
- Búsqueda y filtrado
- Navegación jerárquica

**7. Manual Viewer (`/manual/:parte/:bloque/:capitulo`)**
- Visor de capítulo individual
- Renderizado de Markdown con estilos
- Navegación anterior/siguiente
- Breadcrumbs de ubicación
- Metadata del capítulo (tiempo lectura, importancia)

### Navegación

**Rutas Principales:**
- **Home**: `/`
- **Contenido**: `/soporte-vital`, `/patologias`, `/escena`, `/farmacos`, `/herramientas`
- **Manual**: `/manual` (índice), `/manual/:parte/:bloque/:capitulo` (visor)
- **Protocolos específicos**: `/rcp`, `/ictus`, `/shock`, `/via-aerea`
- **Utilidades**: `/favoritos`, `/historial`, `/ajustes`
- **Información**: `/acerca`, `/privacidad`, `/aviso-legal`

**Métodos de Navegación:**
1. **Bottom Navigation**: 6 iconos principales siempre visibles
2. **Menú lateral**: Acceso completo a todas las secciones
3. **Búsqueda global**: Modal con resultados instantáneos
4. **Enlaces contextuales**: Dentro del contenido (protocolos relacionados, fármacos mencionados)
5. **Breadcrumbs**: En páginas de manual
6. **Botón "Volver"**: En header cuando no estás en home

### Acciones del Usuario

**Búsqueda:**
- Abrir modal de búsqueda (botón en header o home)
- Escribir mínimo 2 caracteres
- Ver resultados en tiempo real
- Filtrar por tipo (procedimientos, fármacos) y categoría
- Click en resultado → navegar y añadir a historial

**Favoritos:**
- Marcar cualquier protocolo, fármaco o herramienta como favorito
- Ver lista en `/favoritos`
- Agrupar por tipo (procedimientos, fármacos, herramientas, manual)
- Eliminar individual o limpiar todo

**Calculadoras:**
- Seleccionar calculadora en `/herramientas`
- Introducir valores en formularios
- Ver resultados instantáneos
- Interpretación automática de resultados (ej: Glasgow → severidad)

**Visualización de Contenido:**
- Expandir/colapsar secciones
- Navegar entre tabs
- Scroll infinito en listas largas
- Click en tarjetas para ver detalles

**Instalación PWA:**
- Banner automático después de 5 segundos (solo en desarrollo)
- Botón de instalación en menú
- Instalación como app nativa

---

## 4️⃣ Cómo se Muestra la Información

### Tipos de Datos

**1. Protocolos Médicos:**
- **Formato**: Tarjetas (`ProcedureCard`)
- **Información mostrada**:
  - Título y título corto
  - Categoría (soporte_vital, patologias, escena)
  - Prioridad (crítico, alto, medio, bajo) con badge de color
  - Grupo de edad (adulto, pediátrico, neonatal)
  - Lista de pasos numerados
  - Advertencias destacadas
  - Puntos clave
  - Equipamiento necesario
  - Fármacos relacionados
- **Prioridad visual**: 
  - Color según prioridad (rojo=crítico, naranja=alto, amarillo=medio)
  - Iconos según categoría
  - Badges de estado

**2. Fármacos:**
- **Formato**: Tarjetas expandibles (`DrugCard`)
- **Información mostrada**:
  - Nombre genérico y comercial
  - Categoría farmacológica
  - Presentación
  - Dosis adulto (texto descriptivo)
  - Dosis pediátrica (si aplica)
  - Vías de administración (badges)
  - Dilución (si aplica)
  - Indicaciones (lista)
  - Contraindicaciones (lista destacada)
  - Efectos secundarios
  - Antídoto (si aplica)
  - Notas importantes
  - **Puntos críticos TES** (sección especial destacada)
- **Prioridad visual**:
  - Sección expandida por defecto si es medicación TES
  - Puntos críticos TES en color destacado
  - Contraindicaciones en rojo/amarillo

**3. Calculadoras:**
- **Formato**: Formularios interactivos con resultados en tiempo real
- **Información mostrada**:
  - Campos de entrada (inputs numéricos, selects)
  - Resultado calculado
  - Interpretación del resultado (ej: "TCE Grave - IOT" para Glasgow)
  - Explicación del cálculo
  - Referencias o fórmulas
- **Prioridad visual**:
  - Resultado destacado en grande
  - Interpretación con color según severidad
  - Campos de entrada claramente marcados

**4. Manual (Markdown):**
- **Formato**: Renderizado de Markdown con estilos personalizados
- **Información mostrada**:
  - Título del capítulo
  - Contenido estructurado (títulos, listas, tablas, código)
  - Imágenes embebidas (infografías médicas)
  - Enlaces internos y externos
  - Metadata (tiempo lectura, importancia, nivel dificultad)
- **Prioridad visual**:
  - Títulos jerárquicos claros
  - Cajas destacadas para información crítica
  - Tablas con estilos médicos
  - Imágenes responsivas

**5. Patologías:**
- **Formato**: Tarjetas por sistema con información estructurada
- **Información mostrada**:
  - Nombre de la patología
  - Clínica (signos y síntomas)
  - Actuación (pasos de protocolo)
  - Puntos clave adicionales
- **Prioridad visual**:
  - Agrupación por sistemas (tabs)
  - Información clínica vs actuación claramente separada
  - Listas numeradas para pasos

**6. Historial y Favoritos:**
- **Formato**: Lista de items con iconos
- **Información mostrada**:
  - Título del item
  - Tipo (procedimiento, fármaco, herramienta, manual)
  - Timestamp relativo (historial)
  - Fecha de añadido (favoritos)
- **Prioridad visual**:
  - Agrupación por tipo en favoritos
  - Orden cronológico inverso
  - Iconos según tipo

### Formatos de Visualización

**Tarjetas (Cards):**
- Uso: Protocolos, fármacos, patologías
- Estilo: Borde, fondo, hover effect
- Expandible/colapsable según necesidad

**Listas:**
- Uso: Pasos de protocolos, indicaciones, contraindicaciones
- Estilo: Numeradas o con viñetas
- Priorización visual con colores

**Tablas:**
- Uso: Tablas de perfusión, dosis comparativas
- Estilo: Filas alternadas, headers destacados
- Responsive con scroll horizontal en móvil

**Formularios:**
- Uso: Calculadoras
- Estilo: Inputs con labels claros, validación visual
- Resultados destacados

**Árboles de Decisión:**
- Uso: Protocolos con decisiones condicionales
- Estilo: Nodos con preguntas/acciones, flechas de navegación
- Interactivo: click para avanzar

**Markdown Renderizado:**
- Uso: Manual completo
- Estilo: Tipografía médica, espaciado generoso
- Syntax highlighting para código

### Información Prioritaria vs Secundaria

**Prioritaria (siempre visible o destacada):**
- **Título y subtítulo** de protocolos/fármacos
- **Pasos numerados** de protocolos críticos
- **Dosis** de fármacos (adulto y pediátrica)
- **Contraindicaciones** (en rojo/amarillo)
- **Puntos críticos TES** (sección especial)
- **Resultados de calculadoras** (grande y destacado)
- **Advertencias** en protocolos (cajas destacadas)

**Secundaria (expandible o en segundo nivel):**
- Efectos secundarios de fármacos
- Notas adicionales
- Referencias bibliográficas
- Metadata del manual (tiempo lectura, autor)
- Información legal (en páginas dedicadas)

**Oculta hasta interacción:**
- Detalles técnicos de fármacos
- Explicaciones extensas
- Checklists completos (expandibles)
- Árboles de decisión (navegación paso a paso)

---

## 5️⃣ Roles y Permisos

### Tipos de Usuario

**NO HAY SISTEMA DE ROLES:**
- La aplicación es completamente abierta y pública
- No requiere registro ni autenticación
- No hay diferenciación de usuarios
- Todos los usuarios tienen acceso completo a todo el contenido

### Acceso al Contenido

**Acceso Universal:**
- ✅ Todos los protocolos médicos
- ✅ Todo el vademécum de fármacos
- ✅ Todas las calculadoras
- ✅ Manual completo (94 capítulos)
- ✅ Checklists de material
- ✅ Protocolos transtelefónicos
- ✅ Guiones de comunicación

**Sin Restricciones:**
- No hay contenido premium
- No hay contenido por suscripción
- No hay contenido por nivel de certificación
- No hay contenido geográfico restringido

### Personalización por Usuario

**Limitada a datos locales:**
- **Favoritos**: Cada usuario puede marcar sus propios favoritos (almacenado en localStorage)
- **Historial**: Cada usuario tiene su propio historial de búsquedas (almacenado en sessionStorage)
- **Tema**: Preferencia de tema claro/oscuro (almacenado en localStorage por next-themes)

**Sin sincronización:**
- Los favoritos no se sincronizan entre dispositivos
- El historial se pierde al cerrar el navegador
- No hay perfil de usuario ni configuración en la nube

---

## 6️⃣ Lógica Funcional

### Reglas Importantes

**1. Búsqueda:**
- Mínimo 2 caracteres para activar búsqueda
- Búsqueda en tiempo real (sin botón de buscar)
- Busca en: títulos, subtítulos, indicaciones, palabras clave
- Filtros combinables: tipo (procedimiento/fármaco) + categoría
- Resultados ordenados por relevancia (no explícita, implícita por orden en datos)

**2. Historial:**
- Máximo 20 items en historial
- Evita duplicados recientes (mismo item en últimos 5 minutos actualiza timestamp)
- Ordenado por fecha (más reciente primero)
- Se limpia al cerrar navegador (sessionStorage)
- Se puede limpiar manualmente desde Ajustes

**3. Favoritos:**
- Sin límite de favoritos
- Agrupados por tipo (procedimientos, fármacos, herramientas, manual)
- Ordenados por fecha de añadido (más reciente primero)
- Persisten entre sesiones (localStorage)
- Se pueden eliminar individualmente o limpiar todos

**4. Calculadoras:**
- Validación de inputs (rangos numéricos, valores requeridos)
- Cálculo automático al cambiar valores
- Interpretación automática de resultados (ej: Glasgow → severidad)
- Sin guardado de resultados (cada uso es independiente)

**5. Service Worker:**
- Cachea recursos estáticos en instalación
- Estrategia Cache-First para assets (imágenes, CSS, JS)
- Estrategia Network-First para HTML
- Actualiza automáticamente cuando hay nueva versión
- Notifica al usuario cuando hay actualización disponible

**6. PWA Install:**
- Banner automático después de 5 segundos (solo en desarrollo)
- Detección de capacidad de instalación (beforeinstallprompt)
- Instalación como app nativa en móviles y escritorio
- Funciona offline después de instalación

### Decisiones Automáticas

**1. Carga de Contenido:**
- **Lazy loading**: Páginas se cargan solo cuando se navega a ellas
- **Code splitting**: Chunks separados por página y librería
- **Carga bajo demanda**: Archivos Markdown se cargan solo al visualizarlos

**2. Renderizado:**
- **Suspense boundaries**: Muestra loader mientras carga componente lazy
- **Error boundaries**: Captura errores y muestra mensaje amigable
- **Fallbacks**: Si falla carga de Markdown, muestra mensaje de error

**3. Tema:**
- **Detección automática**: Usa tema del sistema por defecto
- **Persistencia**: Guarda preferencia del usuario
- **Transición suave**: Cambio de tema sin flash

**4. Navegación:**
- **SPA routing**: Todas las rutas manejadas por React Router
- **Fallback a index.html**: Rutas no encontradas redirigen a 404
- **Historial del navegador**: Usa history API para navegación

**5. Búsqueda:**
- **Debounce implícito**: Búsqueda se ejecuta en cada cambio (sin debounce explícito)
- **Filtrado automático**: Resultados se filtran según filtros activos
- **Ordenamiento**: Resultados ordenados por orden en datos (no por relevancia calculada)

### Dependencias del Usuario vs Automáticas

**Automáticas (sin intervención del usuario):**
- ✅ Carga de contenido bajo demanda
- ✅ Caché de recursos por Service Worker
- ✅ Detección de actualizaciones del Service Worker
- ✅ Cálculo de resultados en calculadoras
- ✅ Filtrado de resultados en búsqueda
- ✅ Agrupación de favoritos por tipo
- ✅ Ordenamiento de historial por fecha
- ✅ Detección de tema del sistema
- ✅ Detección de estado online/offline

**Requieren acción del usuario:**
- ❌ Marcar/desmarcar favoritos
- ❌ Realizar búsqueda (escribir query)
- ❌ Seleccionar filtros en búsqueda
- ❌ Introducir valores en calculadoras
- ❌ Expandir/colapsar secciones
- ❌ Navegar entre tabs
- ❌ Instalar PWA (requiere confirmación)
- ❌ Aplicar actualización del Service Worker (requiere confirmación)
- ❌ Cambiar tema manualmente
- ❌ Limpiar favoritos/historial

---

## 7️⃣ Puntos Fuertes y Limitaciones Actuales

### Puntos Fuertes

**1. Arquitectura Técnica:**
- ✅ **Stack moderno y mantenible**: React 18 + TypeScript + Vite
- ✅ **Code splitting eficiente**: Lazy loading de páginas reduce bundle inicial
- ✅ **PWA funcional**: Service Worker bien implementado, funciona offline
- ✅ **TypeScript**: Tipado fuerte reduce errores
- ✅ **Componentes reutilizables**: shadcn/ui + Radix UI bien estructurados
- ✅ **Responsive design**: Funciona bien en móvil y escritorio

**2. Organización del Código:**
- ✅ **Separación clara de responsabilidades**: pages, components, data, hooks
- ✅ **Datos estructurados**: TypeScript interfaces bien definidas
- ✅ **Hooks personalizados**: Lógica reutilizable bien encapsulada
- ✅ **Nomenclatura consistente**: Convenciones claras en todo el código

**3. Experiencia de Usuario:**
- ✅ **Navegación intuitiva**: Bottom nav + menú lateral + búsqueda
- ✅ **Acceso rápido a emergencias**: Botones grandes en home
- ✅ **Búsqueda eficiente**: Modal con resultados instantáneos
- ✅ **Offline-first**: Funciona sin conexión después de instalación
- ✅ **Tema claro/oscuro**: Adaptación a preferencias del usuario

**4. Contenido:**
- ✅ **Manual completo**: 94 capítulos bien estructurados
- ✅ **Datos médicos completos**: Protocolos, fármacos, calculadoras
- ✅ **Información crítica destacada**: Puntos TES, contraindicaciones
- ✅ **Formato adecuado**: Markdown permite fácil mantenimiento

**5. Performance:**
- ✅ **Carga rápida inicial**: Bundle pequeño gracias a code splitting
- ✅ **Caché eficiente**: Service Worker cachea recursos estáticos
- ✅ **Lazy loading**: Contenido se carga solo cuando se necesita

### Limitaciones Actuales

**1. Arquitectura:**
- ⚠️ **Sin backend**: No hay sincronización, no hay actualizaciones dinámicas
- ⚠️ **Datos estáticos**: Todo hardcodeado en TypeScript, difícil de actualizar
- ⚠️ **Sin autenticación**: No hay usuarios, no hay personalización avanzada
- ⚠️ **Sin base de datos**: No hay persistencia centralizada, solo localStorage

**2. Escalabilidad:**
- ⚠️ **Manual hardcodeado**: 94 archivos Markdown estáticos, difícil de mantener
- ⚠️ **Datos en código**: Fármacos y protocolos en archivos TS, requiere rebuild para actualizar
- ⚠️ **Sin CMS**: No hay interfaz para editar contenido sin tocar código
- ⚠️ **Sin versionado de contenido**: No hay historial de cambios del manual

**3. Funcionalidad:**
- ⚠️ **Búsqueda básica**: Solo búsqueda por texto, sin ranking de relevancia
- ⚠️ **Sin sugerencias**: No hay autocompletado en búsqueda
- ⚠️ **Sin filtros avanzados**: Filtros limitados a tipo y categoría
- ⚠️ **Sin historial de uso**: No hay analytics ni tracking de uso
- ⚠️ **Sin compartir**: No hay forma de compartir protocolos específicos (solo URL)

**4. UX/UI:**
- ⚠️ **Sin feedback visual avanzado**: No hay animaciones de transición entre páginas
- ⚠️ **Sin modo de lectura**: No hay modo de lectura optimizado para manual
- ⚠️ **Sin marcadores**: No hay forma de marcar posición en manual
- ⚠️ **Sin notas**: No hay forma de añadir notas personales a protocolos

**5. Contenido:**
- ⚠️ **Sin validación médica explícita**: No hay indicador de validación médica por protocolo
- ⚠️ **Sin versionado de protocolos**: No se muestra versión de guía (ERC, AHA) por protocolo
- ⚠️ **Sin referencias cruzadas**: Enlaces entre protocolos relacionados son limitados
- ⚠️ **Sin casos clínicos**: No hay ejemplos prácticos de aplicación

**6. Performance:**
- ⚠️ **Carga inicial de Markdown**: Archivos Markdown se cargan con fetch, puede ser lento
- ⚠️ **Sin pre-carga**: No hay pre-carga de contenido probablemente necesario
- ⚠️ **Bundle grande**: Aunque hay code splitting, el bundle inicial sigue siendo considerable

**7. PWA:**
- ⚠️ **Sin push notifications**: No hay notificaciones de actualizaciones de protocolos
- ⚠️ **Sin sincronización**: Favoritos no se sincronizan entre dispositivos
- ⚠️ **Sin actualizaciones automáticas**: Contenido requiere rebuild para actualizar

**8. Seguridad y Privacidad:**
- ⚠️ **Sin HTTPS requerido**: Aunque es PWA, no hay validación de HTTPS
- ⚠️ **Datos locales sin encriptación**: localStorage sin encriptación
- ⚠️ **Sin política de retención**: No hay límite de tiempo para datos locales

### Partes MVP o Provisionales

**1. Búsqueda:**
- Implementación básica funcional pero mejorable
- Sin ranking de relevancia
- Sin autocompletado
- Sin búsqueda por voz (útil en emergencias)

**2. Manual:**
- Estructura funcional pero rígida
- Sin editor de contenido
- Sin versionado
- Sin colaboración

**3. Analytics:**
- Sin tracking de uso
- Sin métricas de performance
- Sin feedback de usuarios

**4. Actualizaciones:**
- Sistema básico de notificación de actualizaciones
- Sin actualizaciones incrementales
- Sin rollback de versiones

**5. Internacionalización:**
- Solo español
- Sin soporte multi-idioma
- Sin traducción de contenido

---

## 8️⃣ Resumen Final

### Descripción para Otro Desarrollador

**EMERGES TES** es una **aplicación web progresiva (PWA)** diseñada como guía de consulta rápida para Técnicos de Emergencias Sanitarias. Es esencialmente una **enciclopedia médica offline** especializada en protocolos de emergencias prehospitalarias.

**Arquitectura:**
La aplicación está construida con **React 18 + TypeScript + Vite**, usando **React Router** para navegación SPA. No tiene backend ni base de datos; todo el contenido está **hardcodeado en archivos TypeScript** (`src/data/`) y **94 archivos Markdown** (`public/manual/`). Usa **localStorage** para favoritos y **sessionStorage** para historial de búsquedas.

**Estructura de datos:**
El contenido médico está organizado en **14 archivos TypeScript** que definen protocolos, fármacos, calculadoras, árboles de decisión, etc. El manual completo son **94 capítulos Markdown** organizados en 15 bloques temáticos. Todo se carga estáticamente; no hay API ni base de datos.

**Flujo principal:**
1. Usuario entra y ve home con acceso rápido a emergencias críticas
2. Puede buscar protocolos/fármacos mediante modal de búsqueda
3. Navega entre secciones mediante bottom nav o menú lateral
4. Visualiza contenido en formato de tarjetas (protocolos, fármacos) o Markdown (manual)
5. Puede marcar favoritos y ver historial de búsquedas
6. Todo funciona offline después de instalación PWA

**Características clave:**
- **Offline-first**: Service Worker cachea todo, funciona sin internet
- **Code splitting**: Páginas se cargan bajo demanda para reducir bundle inicial
- **Búsqueda global**: Modal que busca en protocolos y fármacos simultáneamente
- **Tema claro/oscuro**: Adaptación a preferencias del sistema/usuario
- **Responsive**: Funciona bien en móvil y escritorio

**Limitaciones principales:**
- **Sin backend**: Todo es estático, requiere rebuild para actualizar contenido
- **Datos hardcodeados**: Fármacos y protocolos en código TypeScript
- **Búsqueda básica**: Sin ranking de relevancia ni autocompletado
- **Sin usuarios**: No hay autenticación ni personalización avanzada
- **Sin sincronización**: Favoritos no se sincronizan entre dispositivos

**Estado actual:**
La aplicación está **funcional y desplegada**, con contenido médico completo (94 capítulos de manual, protocolos, fármacos, calculadoras). Es un **MVP sólido** que cumple su función principal (consulta rápida offline), pero tiene limitaciones de escalabilidad y mantenimiento debido a la arquitectura completamente estática.

**Tecnologías destacadas:**
- React 18 con TypeScript para type safety
- Vite para build rápido y code splitting
- React Router para SPA navigation
- Service Worker manual para PWA offline
- react-markdown para renderizado de contenido médico
- Tailwind CSS + shadcn/ui para UI consistente
- TanStack Query configurado pero no usado activamente (sin backend)

**En resumen:** Es una **enciclopedia médica offline** bien estructurada técnicamente, con contenido completo y funcionalidad básica sólida, pero con limitaciones arquitectónicas que dificultan la escalabilidad y el mantenimiento a largo plazo debido a la ausencia de backend y la naturaleza estática de los datos.

---

**Fin del Informe**

*Este informe describe la aplicación tal como existe actualmente, sin proponer mejoras ni refactorizaciones.*