# 🎛️ DISEÑO FUNCIONAL COMPLETO - PANEL DE ADMINISTRACIÓN TES

**Proyecto:** Guía TES - Sistema de Gestión de Contenido  
**Fecha:** 2025-01-07  
**Arquitecto:** Sistema de Contenido  
**Estado:** ✅ DISEÑO FUNCIONAL DEFINITIVO

---

## 🎯 OBJETIVO

Definir el diseño funcional completo del Panel de Administración TES, sin implementar código. Este documento servirá como especificación para:

- ✅ Modelo de datos (ya definido en `MODELO_DATOS_CANONICO_DEFINITIVO.md`)
- ✅ Endpoints de API
- ✅ UI del panel
- ✅ Sistema de permisos y roles
- ✅ Workflows de validación

---

## 📐 PRINCIPIOS DE DISEÑO

### 1. Separación de Capas Funcionales

**CRÍTICO:** El panel debe respetar la separación de capas:
- ✅ **Operativa:** Protocolos y checklists (escena real)
- ✅ **Formativa:** Guías de refuerzo (comprensión)
- ✅ **Referencia:** Manual y vademécum (consulta profunda)

**NUNCA mezclar capas en una misma vista o editor.**

### 2. Roles y Permisos Granulares

Cada rol tiene acceso específico según su función clínica:
- **Super Admin:** Control total
- **Admin:** Gestión de contenido y usuarios
- **Editor Clínico:** Crear/editar protocolos y fármacos
- **Editor Formativo:** Crear/editar guías formativas
- **Revisor:** Revisar y aprobar contenido
- **TES Validador:** Validar contenido operativo
- **Médico:** Validar contenido clínico
- **Formador:** Validar contenido formativo
- **Viewer:** Solo lectura

### 3. Workflow de Validación

Todo contenido debe pasar por:
```
draft → submitted → in_review → approved → published
  ↓         ↓           ↓
rejected  rejected   rejected
```

### 4. Offline-First

El panel genera Content Pack JSON que la app consume offline.

---

## 🏗️ ESTRUCTURA DEL PANEL

### Navegación Principal

```
┌─────────────────────────────────────────────────────────┐
│  🏠 Dashboard                                            │
│  📚 Biblioteca de Contenido                             │
│  📝 Editores                                             │
│  🖼️  Recursos Multimedia                                 │
│  ✅ Validación                                           │
│  📦 Content Pack                                         │
│  🎓 SCORM                                                │
│  👥 Usuarios                                             │
│  📊 Estadísticas                                         │
│  ⚙️  Configuración                                       │
└─────────────────────────────────────────────────────────┘
```

---

## 📊 SECCIONES DEL PANEL

### 1. 🏠 DASHBOARD

**Propósito:** Vista general del estado del sistema y contenido.

#### Contenido Principal

**1.1 Estadísticas Generales**
```
┌─────────────────────────────────────────────────────────┐
│  📊 ESTADÍSTICAS GENERALES                               │
├─────────────────────────────────────────────────────────┤
│  Total Contenido: 150 items                             │
│  ├─ Protocolos: 25 (20 publicados)                      │
│  ├─ Guías: 10 (8 publicadas)                             │
│  ├─ Fármacos: 35 (30 publicados)                        │
│  ├─ Checklists: 15 (15 publicadas)                     │
│  └─ Manual: 65 capítulos (60 publicados)                │
│                                                          │
│  Recursos Multimedia: 200                               │
│  ├─ Imágenes: 150                                       │
│  └─ Vídeos: 50                                          │
│                                                          │
│  Content Pack: v1.2.3 (última actualización: hace 2h)   │
└─────────────────────────────────────────────────────────┘
```

**1.2 Contenido Pendiente de Validación**
```
┌─────────────────────────────────────────────────────────┐
│  ⚠️  CONTENIDO PENDIENTE                                 │
├─────────────────────────────────────────────────────────┤
│  🔴 Crítico: 5 items                                     │
│  🟡 En revisión: 12 items                               │
│  🟢 Aprobado (pendiente publicación): 3 items            │
│                                                          │
│  [Ver todos →]                                          │
└─────────────────────────────────────────────────────────┘
```

**1.3 Actividad Reciente**
```
┌─────────────────────────────────────────────────────────┐
│  📋 ACTIVIDAD RECIENTE                                  │
├─────────────────────────────────────────────────────────┤
│  • Hace 2h: "Control Hemorragias" publicado por Admin  │
│  • Hace 5h: "RCP Adulto SVB" aprobado por TES Validador │
│  • Hace 1d: "Adrenalina" actualizado por Editor Clínico │
│  • Hace 2d: Nueva guía "Shock Hipovolémico" creada      │
│                                                          │
│  [Ver historial completo →]                            │
└─────────────────────────────────────────────────────────┘
```

**1.4 Estadísticas de Validación**
```
┌─────────────────────────────────────────────────────────┐
│  ✅ VALIDACIÓN                                           │
├─────────────────────────────────────────────────────────┤
│  Tiempo promedio de validación: 2.5 días               │
│  Tasa de aprobación: 85%                                │
│  Rechazos últimos 30 días: 5                           │
│                                                          │
│  [Ver dashboard de validación →]                        │
└─────────────────────────────────────────────────────────┘
```

---

### 2. 📚 BIBLIOTECA DE CONTENIDO

**Propósito:** Vista general de todo el contenido con filtros y búsqueda.

#### Vista Principal: Tabla de Contenido

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  📚 BIBLIOTECA DE CONTENIDO                          [+ Nuevo Contenido]   │
├─────────────────────────────────────────────────────────────────────────────┤
│  🔍 Buscar...  [Filtros ▼]  [Ordenar por: Reciente ▼]                      │
│                                                                              │
│  ┌────────────────────────────────────────────────────────────────────┐    │
│  │ Tipo │ Título │ Capa │ Estado │ Prioridad │ Última Actualización │    │
│  ├────────────────────────────────────────────────────────────────────┤    │
│  │ 📋  │ Control Hemorragias │ Operativa │ ✅ Publicado │ 🔴 Crítica │    │
│  │     │                     │           │              │ 2h          │    │
│  ├────────────────────────────────────────────────────────────────────┤    │
│  │ 📚  │ RCP Adulto SVB     │ Formativa │ ⏳ En revisión│ 🔴 Crítica │    │
│  │     │                     │           │              │ 5h          │    │
│  ├────────────────────────────────────────────────────────────────────┤    │
│  │ 💊  │ Adrenalina         │ Referencia│ ✅ Publicado │ 🟠 Alta    │    │
│  │     │                     │           │              │ 1d          │    │
│  └────────────────────────────────────────────────────────────────────┘    │
│                                                                              │
│  [< Anterior]  Página 1 de 10  [Siguiente >]                              │
└─────────────────────────────────────────────────────────────────────────────┘
```

#### Filtros Disponibles

- **Tipo:** Protocolo | Guía | Manual | Fármaco | Checklist
- **Capa Funcional:** Operativa | Formativa | Referencia
- **Estado:** Draft | En revisión | Aprobado | Publicado | Archivado
- **Prioridad:** Crítica | Alta | Media | Baja
- **Tema Clínico:** (15 temas de FASE B)
- **Fecha:** Última semana | Último mes | Último año
- **Validador:** Todos | TES | Médico | Formador

#### Acciones por Fila

- 👁️ Ver detalles
- ✏️ Editar (si tiene permiso)
- 📋 Ver historial de versiones
- 🔗 Ver relaciones
- 📦 Generar SCORM (solo guías formativas)
- 🗑️ Archivar (si tiene permiso)

---

### 3. 📝 EDITORES

**Propósito:** Crear y editar contenido según su tipo y capa funcional.

#### 3.1 Editor de Protocolo Operativo

**Ruta:** `/admin/edit/protocol/:id` o `/admin/new/protocol`

**Estructura del Editor:**

```
┌─────────────────────────────────────────────────────────┐
│  ✏️  EDITOR DE PROTOCOLO OPERATIVO                     │
│  [Guardar borrador]  [Enviar a revisión]  [Cancelar]   │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📋 INFORMACIÓN BÁSICA                                   │
│  ┌────────────────────────────────────────────────────┐│
│  │ Título: [Control de Hemorragias Externas        ] ││
│  │ Título corto: [Hemorragias                    ] ││
│  │ Descripción: [Protocolo operativo para...      ] ││
│  │ Slug: [control-hemorragias-externas] (auto)      ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🏷️  CLASIFICACIÓN                                       │
│  ┌────────────────────────────────────────────────────┐│
│  │ Tema clínico: [Control hemorragias externas ▼]   ││
│  │ Categoría: [Trauma ▼]                             ││
│  │ Subcategoría: [Hemorragia ▼]                       ││
│  │ Prioridad: [🔴 Crítica ▼]                         ││
│  │ Grupo de edad: [Adulto ▼]                         ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📝 PASOS DEL PROTOCOLO                                  │
│  ┌────────────────────────────────────────────────────┐│
│  │ [1] [Garantizar seguridad de la escena        ] [🗑️]│
│  │      [ ] Paso crítico                            ││
│  │      [ ] Requiere verificación                   ││
│  │      Advertencias: [+ Añadir]                    ││
│  │      Recursos: [+ Añadir imagen/vídeo]           ││
│  ├────────────────────────────────────────────────────┤│
│  │ [2] [Aplicar presión directa...              ] [🗑️]││
│  │      [✓] Paso crítico                            ││
│  │      [✓] Requiere verificación                   ││
│  │      Advertencias: "Profundidad 5-6 cm"          ││
│  │      Recursos: [📷 imagen_presion_directa.jpg]   ││
│  ├────────────────────────────────────────────────────┤│
│  │ [+ Añadir paso]                                    ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  ⚠️  ADVERTENCIAS GLOBALES                               │
│  ┌────────────────────────────────────────────────────┐│
│  │ [1] "No retirar presión hasta llegar al hospital"││
│  │ [2] "Si hemorragia masiva, considerar torniquete"││
│  │ [+ Añadir advertencia]                            ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🔑 PUNTOS CLAVE                                         │
│  ┌────────────────────────────────────────────────────┐│
│  │ [1] "La presión directa es el método más efectivo" ││
│  │ [2] "Tiempo es crítico en hemorragias masivas"     ││
│  │ [+ Añadir punto clave]                             ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🧰 EQUIPO NECESARIO                                     │
│  ┌────────────────────────────────────────────────────┐│
│  │ [1] [Guantes estériles                    ] [🗑️]││
│  │ [2] [Gasas compresivas                    ] [🗑️]││
│  │ [3] [Vendaje elástico                     ] [🗑️]││
│  │ [+ Añadir equipo]                                 ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  💊 FÁRMACOS RELACIONADOS                                │
│  ┌────────────────────────────────────────────────────┐│
│  │ [Buscar fármaco...]                                ││
│  │ [✓] Adrenalina                                     ││
│  │ [✓] Tranexámico                                    ││
│  │ [+ Añadir fármaco]                                 ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  ✅ MODO CHECKLIST                                       │
│  ┌────────────────────────────────────────────────────┐│
│  │ [✓] Activar modo checklist                         ││
│  │                                                     ││
│  │ Pasos del checklist:                              ││
│  │ [1] [ ] Verificar seguridad escena            ] [🗑️]││
│  │ [2] [ ] Aplicar presión directa              ] [🗑️]││
│  │ [+ Añadir paso checklist]                          ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🔗 RELACIONES                                           │
│  ┌────────────────────────────────────────────────────┐│
│  │ Guía formativa relacionada:                        ││
│  │ [Buscar guía...] [Seleccionar: "Control Hemorragias"]││
│  │                                                     ││
│  │ Manual relacionado:                                ││
│  │ [Buscar manual...] [Seleccionar: "BLOQUE_03_6"]   ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📚 FUENTE Y REFERENCIAS                                 │
│  ┌────────────────────────────────────────────────────┐│
│  │ Fuente: [Manual TES Digital ▼]                    ││
│  │ Referencia: [BLOQUE_03_6_CONTROL_HEMORRAGIAS.md]  ││
│  │ Año: [2024]                                         ││
│  │ URL: [https://...]                                  ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  💬 NOTAS INTERNAS (solo para editores)                  │
│  ┌────────────────────────────────────────────────────┐│
│  │ [Área de texto para notas internas...]              ││
│  └────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘
```

**Validaciones:**
- Título obligatorio
- Al menos 3 pasos
- Al menos 1 advertencia global
- Tema clínico obligatorio
- Prioridad obligatoria

**Permisos:**
- Crear: `editor_clinico`, `admin`, `super_admin`
- Editar: Creador, `admin`, `super_admin`
- Publicar: Solo `admin`, `super_admin` (después de validación)

---

#### 3.2 Editor de Guía Formativa

**Ruta:** `/admin/edit/guide/:id` o `/admin/new/guide`

**Estructura del Editor:**

```
┌─────────────────────────────────────────────────────────┐
│  ✏️  EDITOR DE GUÍA FORMATIVA                          │
│  [Guardar borrador]  [Enviar a revisión]  [Cancelar]   │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📋 INFORMACIÓN BÁSICA                                   │
│  ┌────────────────────────────────────────────────────┐│
│  │ Título: [Control de Hemorragias Externas        ] ││
│  │ Descripción: [Guía formativa para comprender...  ] ││
│  │ Icono: [🩸] (selector de emoji)                   ││
│  │ Slug: [control-hemorragias-guia] (auto)           ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🔗 PROTOCOLO OPERATIVO RELACIONADO                     │
│  ┌────────────────────────────────────────────────────┐│
│  │ [Buscar protocolo...]                              ││
│  │ [Seleccionado: "Control Hemorragias Externas"]    ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📚 SECCIONES DE LA GUÍA (8 secciones estándar)         │
│  ┌────────────────────────────────────────────────────┐│
│  │ [1] Introducción y Contexto                       ││
│  │     Archivo: [SECCION_01_INTRODUCCION.md]         ││
│  │     Tiempo estimado: [5] minutos                  ││
│  │     [Editar contenido Markdown]                   ││
│  │     Recursos: [+ Añadir imagen/vídeo]              ││
│  ├────────────────────────────────────────────────────┤│
│  │ [2] Fundamentos Teóricos                           ││
│  │     [Editar contenido Markdown]                   ││
│  ├────────────────────────────────────────────────────┤│
│  │ [3] Protocolo Operativo Relacionado                ││
│  │     [Vista previa del protocolo]                  ││
│  ├────────────────────────────────────────────────────┤│
│  │ [4] Casos Clínicos                                 ││
│  │     [Editar contenido Markdown]                   ││
│  ├────────────────────────────────────────────────────┤│
│  │ [5] Errores Frecuentes                             ││
│  │     [Editar contenido Markdown]                   ││
│  ├────────────────────────────────────────────────────┤│
│  │ [6] Recursos Adicionales                           ││
│  │     [Editar contenido Markdown]                   ││
│  ├────────────────────────────────────────────────────┤│
│  │ [7] Autoevaluación                                 ││
│  │     [Editar contenido Markdown]                   ││
│  ├────────────────────────────────────────────────────┤│
│  │ [8] Referencias y Bibliografía                     ││
│  │     [Editar contenido Markdown]                   ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🎓 SCORM                                                │
│  ┌────────────────────────────────────────────────────┐│
│  │ [✓] Habilitar exportación SCORM                   ││
│  │ Versión SCORM: [1.2 ▼]                            ││
│  │ Tiempo total estimado: [40] minutos               ││
│  │ [Generar paquete SCORM]                           ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📊 OBJETIVOS DE APRENDIZAJE                            │
│  ┌────────────────────────────────────────────────────┐│
│  │ [1] "Comprender la fisiopatología de hemorragias" ││
│  │ [2] "Identificar técnicas de control de hemorragia"││
│  │ [+ Añadir objetivo]                               ││
│  └────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘
```

**Características:**
- Editor Markdown con vista previa
- Cada sección puede tener recursos multimedia asociados
- Generación automática de SCORM cuando está habilitado
- Validación: Todas las 8 secciones deben tener contenido

**Permisos:**
- Crear: `editor_formativo`, `admin`, `super_admin`
- Editar: Creador, `admin`, `super_admin`
- Generar SCORM: `editor_formativo`, `admin`, `super_admin`

---

#### 3.3 Editor de Fármaco (Vademécum)

**Ruta:** `/admin/edit/drug/:id` o `/admin/new/drug`

**Estructura del Editor:**

```
┌─────────────────────────────────────────────────────────┐
│  ✏️  EDITOR DE FÁRMACO                                  │
│  [Guardar borrador]  [Enviar a revisión]  [Cancelar]   │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📋 INFORMACIÓN BÁSICA                                   │
│  ┌────────────────────────────────────────────────────┐│
│  │ Nombre genérico: [Adrenalina                    ] ││
│  │ Nombre comercial: [Adrenalina 1mg/1ml         ] ││
│  │ Categoría: [Cardiovascular ▼]                    ││
│  │ Presentación: [1mg/1ml ampolla                 ] ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  💉 DOSIS                                                │
│  ┌────────────────────────────────────────────────────┐│
│  │ Dosis adulto: [1mg IV/IO cada 3-5 min]          ││
│  │ Dosis pediátrica: [0.01mg/kg IV/IO cada 3-5 min] ││
│  │ Vías de administración:                           ││
│  │   [✓] IV  [✓] IO  [ ] IM  [ ] Subcutánea        ││
│  │ Dilución: [No requiere dilución]                 ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📋 INDICACIONES                                         │
│  ┌────────────────────────────────────────────────────┐│
│  │ [1] Parada cardiorrespiratoria (RCP)              ││
│  │ [2] Shock anafiláctico                            ││
│  │ [3] Bradicardia sintomática                       ││
│  │ [+ Añadir indicación]                             ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  ⚠️  CONTRAINDICACIONES                                 │
│  ┌────────────────────────────────────────────────────┐│
│  │ [1] Hipertensión arterial severa                  ││
│  │ [2] Arritmias ventriculares                       ││
│  │ [+ Añadir contraindicación]                       ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🔴 EFECTOS ADVERSOS                                     │
│  ┌────────────────────────────────────────────────────┐│
│  │ [Área de texto...]                                 ││
│  │ Taquicardia, hipertensión, arritmias...           ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  💊 ANTÍDOTO                                             │
│  ┌────────────────────────────────────────────────────┐│
│  │ [No aplica / Propranolol / ...]                   ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📝 NOTAS                                                │
│  ┌────────────────────────────────────────────────────┐│
│  │ [1] "En RCP, administrar cada 3-5 minutos"       ││
│  │ [2] "Monitorizar constantes vitales"              ││
│  │ [+ Añadir nota]                                    ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🔑 PUNTOS CRÍTICOS TES                                  │
│  ┌────────────────────────────────────────────────────┐│
│  │ [1] "Verificar dosis según peso en pediatría"     ││
│  │ [2] "No mezclar con otros fármacos en misma jeringa"││
│  │ [+ Añadir punto crítico]                           ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📚 FUENTE                                               │
│  ┌────────────────────────────────────────────────────┐│
│  │ [Manual TES Digital / ERC / SEMES ▼]             ││
│  └────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘
```

**Permisos:**
- Crear: `editor_clinico`, `admin`, `super_admin`
- Editar: Creador, `admin`, `super_admin`

---

#### 3.4 Editor de Checklist

**Ruta:** `/admin/edit/checklist/:id` o `/admin/new/checklist`

**Estructura del Editor:**

```
┌─────────────────────────────────────────────────────────┐
│  ✏️  EDITOR DE CHECKLIST                                │
│  [Guardar borrador]  [Enviar a revisión]  [Cancelar]   │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📋 INFORMACIÓN BÁSICA                                   │
│  ┌────────────────────────────────────────────────────┐│
│  │ Título: [Checklist Material Pre-Escena        ] ││
│  │ Fase: [Pre-escena ▼] (Inicio turno / Pre-escena /││
│  │        Post-servicio)                             ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📦 SECCIONES DEL CHECKLIST                              │
│  ┌────────────────────────────────────────────────────┐│
│  │ Sección 1: Oxígeno                                 ││
│  │   [1] [ ] Botella oxígeno llena            ] [🗑️]││
│  │   [2] [ ] Manómetro funcionando           ] [🗑️]││
│  │   [3] [ ] Mascarillas varias tallas       ] [🗑️]││
│  │   [+ Añadir item]                                 ││
│  │   Notas: [Área de texto opcional...]              ││
│  ├────────────────────────────────────────────────────┤│
│  │ Sección 2: Material de Vía Aérea                  ││
│  │   [1] [ ] Laringoscopio con pilas          ] [🗑️]││
│  │   [2] [ ] Tubos endotraqueales varios tallas] [🗑️]││
│  │   [+ Añadir item]                                 ││
│  ├────────────────────────────────────────────────────┤│
│  │ [+ Añadir sección]                                 ││
│  └────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘
```

---

### 4. 🖼️  RECURSOS MULTIMEDIA

**Propósito:** Gestión centralizada de imágenes y vídeos.

#### Vista Principal: Galería de Recursos

```
┌─────────────────────────────────────────────────────────┐
│  🖼️  RECURSOS MULTIMEDIA                    [+ Subir]   │
├─────────────────────────────────────────────────────────┤
│  🔍 Buscar...  [Filtros: Tipo ▼] [Ordenar: Reciente ▼] │
│                                                          │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐│
│  │ [📷]     │ │ [📷]     │ │ [🎥]     │ │ [📷]     ││
│  │ Presión  │ │ Torniquete│ │ Técnica  │ │ Hemorragia││
│  │ Directa  │ │           │ │ AMBU     │ │           ││
│  │          │ │           │ │          │ │           ││
│  │ Operativa│ │ Operativa │ │ Formativa│ │ Referencia││
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘│
│                                                          │
│  [< Anterior]  Página 1 de 15  [Siguiente >]           │
└─────────────────────────────────────────────────────────┘
```

#### Subida de Recursos

**Modal de Subida:**

```
┌─────────────────────────────────────────────────────────┐
│  📤 SUBIR RECURSO MULTIMEDIA                    [X]     │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📁 SELECCIONAR ARCHIVO                                  │
│  ┌────────────────────────────────────────────────────┐│
│  │ [Arrastrar archivo aquí o hacer clic]             ││
│  │ Formatos: JPG, PNG, SVG, WEBP, MP4, WEBM         ││
│  │ Tamaño máximo: 50MB                               ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📋 INFORMACIÓN BÁSICA                                   │
│  ┌────────────────────────────────────────────────────┐│
│  │ Título: [Presión Directa - Técnica Correcta   ] ││
│  │ Descripción: [Imagen que muestra...            ] ││
│  │ Texto alternativo (alt): [Obligatorio]         ││
│  │ Caption: [Opcional]                             ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🏷️  CLASIFICACIÓN                                       │
│  ┌────────────────────────────────────────────────────┐│
│  │ Tipo: [Imagen ▼]                                  ││
│  │ Capas funcionales:                                ││
│  │   [✓] Operativa  [✓] Formativa  [ ] Referencia  ││
│  │ Tema clínico: [Control hemorragias externas ▼]  ││
│  │ Categoría: [Hemorragia ▼]                        ││
│  │ Tags: [presión, directa, técnica]                ││
│  │ Prioridad: [🔴 Crítica ▼]                       ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📚 FUENTE Y ATRIBUCIÓN                                  │
│  ┌────────────────────────────────────────────────────┐│
│  │ Fuente: [Manual TES Digital]                     ││
│  │ Atribución: [Opcional]                            ││
│  │ Licencia: [CC BY 4.0 / Propietario ▼]            ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  [Cancelar]  [Subir y asociar a contenido]             │
└─────────────────────────────────────────────────────────┘
```

#### Vista de Detalle de Recurso

```
┌─────────────────────────────────────────────────────────┐
│  🖼️  PRESIÓN DIRECTA - TÉCNICA CORRECTA          [✏️]   │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  [Vista previa del recurso]                             │
│                                                          │
│  📊 INFORMACIÓN                                          │
│  • Tipo: Imagen                                         │
│  • Formato: JPG                                         │
│  • Dimensiones: 1920x1080                               │
│  • Tamaño: 2.5 MB                                       │
│  • Subido: Hace 2 días                                  │
│  • Estado: ✅ Publicado                                 │
│                                                          │
│  🔗 CONTENIDO ASOCIADO                                  │
│  • Protocolo: "Control Hemorragias Externas"          │
│    └─ Contexto: Paso 2 - Aplicar presión directa       │
│  • Guía: "Control Hemorragias - Guía Formativa"       │
│    └─ Contexto: Sección 3 - Protocolo Operativo        │
│                                                          │
│  [+ Asociar a contenido]                                │
│                                                          │
│  [🗑️ Eliminar]  [📥 Descargar]                        │
└─────────────────────────────────────────────────────────┘
```

---

### 5. ✅ VALIDACIÓN

**Propósito:** Workflow de validación clínica con roles específicos.

#### Vista Principal: Contenido Pendiente

```
┌─────────────────────────────────────────────────────────┐
│  ✅ VALIDACIÓN                                           │
├─────────────────────────────────────────────────────────┤
│  [Filtros: Estado ▼] [Ordenar: Prioridad ▼]            │
│                                                          │
│  ┌────────────────────────────────────────────────────┐│
│  │ 🔴 CRÍTICO - PENDIENTE                             ││
│  ├────────────────────────────────────────────────────┤│
│  │ 📋 Control Hemorragias Externas                    ││
│  │    Tipo: Protocolo | Capa: Operativa              ││
│  │    Creado por: Editor Clínico                      ││
│  │    Enviado: Hace 2 días                            ││
│  │    [Ver detalles] [Aprobar] [Rechazar]            ││
│  ├────────────────────────────────────────────────────┤│
│  │ 📚 RCP Adulto SVB - Guía Formativa                 ││
│  │    Tipo: Guía | Capa: Formativa                    ││
│  │    Creado por: Editor Formativo                    ││
│  │    Enviado: Hace 1 día                             ││
│  │    [Ver detalles] [Aprobar] [Rechazar]            ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  ┌────────────────────────────────────────────────────┐│
│  │ 🟡 EN REVISIÓN                                      ││
│  ├────────────────────────────────────────────────────┤│
│  │ 💊 Adrenalina                                      ││
│  │    Tipo: Fármaco | Capa: Referencia                ││
│  │    Revisando: TES Validador                        ││
│  │    Desde: Hace 5 horas                             ││
│  │    [Ver detalles]                                  ││
│  └────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘
```

#### Vista de Detalle para Validación

```
┌─────────────────────────────────────────────────────────┐
│  ✅ VALIDAR: Control Hemorragias Externas              │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📋 VISTA PREVIA DEL CONTENIDO                          │
│  [Vista completa del protocolo con todos los pasos]   │
│                                                          │
│  📊 INFORMACIÓN DE VALIDACIÓN                           │
│  • Estado actual: Enviado para revisión                │
│  • Creado por: Editor Clínico (Juan Pérez)              │
│  • Enviado: Hace 2 días                                │
│  • Prioridad: 🔴 Crítica                                │
│                                                          │
│  ✅ CHECKLIST DE VALIDACIÓN                             │
│  ┌────────────────────────────────────────────────────┐│
│  │ [✓] Protocolo completo y estructurado              ││
│  │ [✓] Pasos numerados y claros                      ││
│  │ [✓] Advertencias incluidas                        ││
│  │ [✓] Recursos multimedia asociados                 ││
│  │ [✓] Relaciones con guía y manual correctas        ││
│  │ [✓] Fuente y referencias correctas                ││
│  │ [ ] Revisar con médico especialista (opcional)    ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  💬 COMENTARIOS DE VALIDACIÓN                           │
│  ┌────────────────────────────────────────────────────┐│
│  │ [Área de texto para comentarios...]                ││
│  │                                                     ││
│  │ Ejemplo: "Protocolo completo. Añadir paso sobre    ││
│  │          torniquete en hemorragias masivas."      ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  ⚠️  RECHAZAR                                            │
│  ┌────────────────────────────────────────────────────┐│
│  │ Motivo del rechazo: [Seleccionar motivo ▼]       ││
│  │   • Contenido incompleto                         ││
│  │   • Errores clínicos                             ││
│  │   • Falta de recursos                            ││
│  │   • Otro                                         ││
│  │                                                   ││
│  │ Comentarios: [Área de texto...]                  ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  [Cancelar]  [Rechazar]  [Aprobar para publicación]   │
└─────────────────────────────────────────────────────────┘
```

**Permisos por Rol:**
- **TES Validador:** Puede validar contenido operativo (protocolos, checklists)
- **Médico:** Puede validar contenido clínico (protocolos, fármacos)
- **Formador:** Puede validar contenido formativo (guías)
- **Revisor:** Puede revisar cualquier contenido

---

### 6. 📦 CONTENT PACK

**Propósito:** Generar y gestionar el Content Pack JSON para la app.

#### Vista Principal

```
┌─────────────────────────────────────────────────────────┐
│  📦 CONTENT PACK                                         │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📊 ESTADO ACTUAL                                        │
│  ┌────────────────────────────────────────────────────┐│
│  │ Versión actual: v1.2.3                            ││
│  │ Generado: Hace 2 horas                            ││
│  │ Hash: sha256:a1b2c3d4...                          ││
│  │ Tamaño: 2.5 MB                                     ││
│  │ Items incluidos: 150                               ││
│  │ Recursos incluidos: 200                            ││
│  │                                                     ││
│  │ [📥 Descargar Content Pack]                       ││
│  │ [🔗 URL pública: /api/content-pack/latest.json]   ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🔄 GENERAR NUEVA VERSIÓN                                │
│  ┌────────────────────────────────────────────────────┐│
│  │ Versión: [1.2.4] (semántica: MAJOR.MINOR.PATCH)  ││
│  │ Notas: [Área de texto para notas de versión...]  ││
│  │                                                     ││
│  │ Opciones:                                          ││
│  │   [✓] Incluir solo contenido publicado             ││
│  │   [ ] Incluir también contenido aprobado          ││
│  │   [✓] Incluir recursos multimedia                  ││
│  │   [✓] Incluir relaciones bidireccionales          ││
│  │                                                     ││
│  │ [Generar Content Pack]                            ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📜 HISTORIAL DE VERSIONES                               │
│  ┌────────────────────────────────────────────────────┐│
│  │ v1.2.3 - Hace 2h - "Actualización protocolos"    ││
│  │ v1.2.2 - Hace 1d - "Nuevos fármacos"              ││
│  │ v1.2.1 - Hace 3d - "Correcciones menores"         ││
│  │ [Ver todas las versiones →]                       ││
│  └────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘
```

**Permisos:**
- Generar: `admin`, `super_admin`
- Ver: Todos los usuarios autenticados

---

### 7. 🎓 SCORM

**Propósito:** Generar y gestionar paquetes SCORM desde guías formativas.

#### Vista Principal

```
┌─────────────────────────────────────────────────────────┐
│  🎓 SCORM                                                │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📚 GUÍAS CON SCORM DISPONIBLE                          │
│  ┌────────────────────────────────────────────────────┐│
│  │ 📚 Control Hemorragias - Guía Formativa           ││
│  │    Versión SCORM: 1.2                             ││
│  │    Generado: Hace 1 día                           ││
│  │    Tamaño: 15 MB                                   ││
│  │    [📥 Descargar] [🔄 Regenerar] [🗑️ Eliminar]   ││
│  ├────────────────────────────────────────────────────┤│
│  │ 📚 RCP Adulto SVB - Guía Formativa                ││
│  │    Versión SCORM: 1.2                             ││
│  │    Generado: Hace 3 días                          ││
│  │    Tamaño: 20 MB                                   ││
│  │    [📥 Descargar] [🔄 Regenerar] [🗑️ Eliminar]   ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📋 GUÍAS SIN SCORM                                      │
│  ┌────────────────────────────────────────────────────┐│
│  │ 📚 Shock Hipovolémico - Guía Formativa            ││
│  │    [Generar SCORM]                                ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  ⚙️  CONFIGURACIÓN SCORM                                │
│  ┌────────────────────────────────────────────────────┐│
│  │ Versión SCORM: [1.2 ▼]                            ││
  │ Organización: [TES Digital]                         ││
  │ Puntuación de dominio: [80] %                       ││
  │ Tiempo límite: [Sin límite ▼]                      ││
  └────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘
```

**Permisos:**
- Generar: `editor_formativo`, `admin`, `super_admin`
- Descargar: Todos los usuarios autenticados

---

### 8. 👥 USUARIOS

**Propósito:** Gestión de usuarios y roles.

#### Vista Principal: Lista de Usuarios

```
┌─────────────────────────────────────────────────────────┐
│  👥 USUARIOS                                 [+ Nuevo]  │
├─────────────────────────────────────────────────────────┤
│  🔍 Buscar...  [Filtros: Rol ▼] [Ordenar: Nombre ▼]    │
│                                                          │
│  ┌────────────────────────────────────────────────────┐│
│  │ Email │ Usuario │ Rol │ Estado │ Último acceso    ││
│  ├────────────────────────────────────────────────────┤│
│  │ admin@... │ Admin │ Super Admin │ ✅ Activo │ 2h ││
│  │ juan@... │ Juan │ Editor Clínico │ ✅ Activo │ 1d ││
│  │ maria@... │ María │ TES Validador │ ✅ Activo │ 3h ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  [< Anterior]  Página 1 de 5  [Siguiente >]           │
└─────────────────────────────────────────────────────────┘
```

#### Editor de Usuario

```
┌─────────────────────────────────────────────────────────┐
│  ✏️  EDITAR USUARIO: Juan Pérez                         │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  📋 INFORMACIÓN BÁSICA                                   │
│  ┌────────────────────────────────────────────────────┐│
│  │ Email: [juan.perez@tes.local]                     ││
│  │ Usuario: [juan.perez]                             ││
│  │ Contraseña: [••••••••] [Cambiar contraseña]      ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🎭 ROL                                                  │
│  ┌────────────────────────────────────────────────────┐│
│  │ Rol principal: [Editor Clínico ▼]                ││
│  │   • Crear/editar protocolos                       ││
│  │   • Crear/editar fármacos                         ││
│  │   • Ver contenido                                 ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  🔐 PERMISOS GRANULARES (opcional)                       │
│  ┌────────────────────────────────────────────────────┐│
│  │ Contenido:                                         ││
│  │   [✓] Crear  [✓] Editar  [ ] Eliminar  [ ] Publicar││
│  │                                                     ││
│  │ Recursos:                                          ││
│  │   [✓] Subir  [✓] Editar  [ ] Eliminar             ││
│  │                                                     ││
│  │ Validación:                                        ││
│  │   [ ] Aprobar  [ ] Rechazar                        ││
│  │                                                     ││
│  │ SCORM:                                             ││
│  │   [ ] Generar  [ ] Exportar                       ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  📊 ESTADO                                               │
│  ┌────────────────────────────────────────────────────┐│
│  │ [✓] Usuario activo                                ││
│  │ Último acceso: Hace 1 día                         ││
│  └────────────────────────────────────────────────────┘│
│                                                          │
│  [Cancelar]  [Guardar cambios]                         │
└─────────────────────────────────────────────────────────┘
```

**Permisos:**
- Ver: `admin`, `super_admin`
- Crear/Editar: `super_admin`
- Eliminar: `super_admin`

---

### 9. 📊 ESTADÍSTICAS

**Propósito:** Dashboard avanzado con métricas del sistema.

#### Secciones del Dashboard

1. **Estadísticas de Contenido**
   - Total por tipo
   - Por estado (draft, publicado, etc.)
   - Por capa funcional
   - Por tema clínico (15 temas de FASE B)

2. **Estadísticas de Validación**
   - Tiempo promedio de validación
   - Tasa de aprobación/rechazo
   - Contenido más rechazado
   - Validadores más activos

3. **Estadísticas de Uso**
   - Content Pack más descargado
   - SCORM más generado
   - Recursos más utilizados

4. **Estadísticas de Usuarios**
   - Usuarios activos
   - Contenido creado por usuario
   - Actividad por rol

---

### 10. ⚙️  CONFIGURACIÓN

**Propósito:** Configuración general del sistema.

#### Opciones de Configuración

- **Content Pack:**
  - URL base del Content Pack
  - Versión por defecto
  - Hash algorithm

- **SCORM:**
  - Versión SCORM por defecto
  - Organización
  - Configuración de dominio

- **Validación:**
  - Tiempo máximo de revisión
  - Notificaciones por email

- **Sistema:**
  - Límites de tamaño de archivo
  - Formatos permitidos
  - Backup automático

---

## 🔐 SISTEMA DE PERMISOS

### Matriz de Permisos por Rol

| Acción | Super Admin | Admin | Editor Clínico | Editor Formativo | Revisor | TES Validador | Médico | Formador | Viewer |
|--------|-------------|-------|----------------|------------------|---------|---------------|--------|----------|--------|
| **Contenido** |
| Crear protocolo | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Crear guía | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Crear fármaco | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Editar propio | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Editar ajeno | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Eliminar | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Publicar | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| **Validación** |
| Enviar a revisión | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Aprobar | ✅ | ✅ | ✅ | ✅ | ✅ | ✅* | ✅* | ✅* | ❌ |
| Rechazar | ✅ | ✅ | ✅ | ✅ | ✅ | ✅* | ✅* | ✅* | ❌ |
| **Recursos** |
| Subir | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Eliminar | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| **SCORM** |
| Generar | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Descargar | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Content Pack** |
| Generar | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Descargar | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Usuarios** |
| Ver | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Crear/Editar | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Eliminar | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |

\* Solo para contenido de su especialidad (TES → operativo, Médico → clínico, Formador → formativo)

---

## 🔄 WORKFLOWS

### Workflow de Creación de Contenido

```
1. Editor crea contenido → Estado: draft
2. Editor guarda borrador → Estado: draft (guardado)
3. Editor envía a revisión → Estado: submitted
4. Sistema asigna revisor → Estado: in_review
5. Revisor aprueba → Estado: approved
6. Admin publica → Estado: published
```

### Workflow de Validación Clínica

```
1. Contenido operativo → Requiere validación TES
2. Contenido clínico → Requiere validación Médico
3. Contenido formativo → Requiere validación Formador
4. Validación puede ser:
   - Aprobado → Pasa a approved
   - Rechazado → Vuelve a draft con comentarios
```

### Workflow de Generación SCORM

```
1. Editor habilita SCORM en guía formativa
2. Editor genera paquete SCORM
3. Sistema crea ZIP con estructura SCORM 1.2
4. Paquete disponible para descarga
5. Si se actualiza la guía, se puede regenerar
```

---

## 📱 RESPONSIVE Y ACCESIBILIDAD

### Diseño Responsive

- **Desktop:** Vista completa con todas las funcionalidades
- **Tablet:** Adaptación de tablas y formularios
- **Mobile:** Vista simplificada, navegación por pestañas

### Accesibilidad

- **WCAG 2.1 AA:** Cumplimiento mínimo
- **Navegación por teclado:** Todas las funciones accesibles
- **Lectores de pantalla:** Etiquetas ARIA completas
- **Contraste:** Mínimo 4.5:1 para texto

---

## 🎨 DISEÑO VISUAL

### Paleta de Colores

- **Primario:** Azul sanitario (#0066CC)
- **Secundario:** Verde éxito (#00AA44)
- **Advertencia:** Naranja (#FF8800)
- **Error:** Rojo (#CC0000)
- **Fondo:** Gris claro (#F5F5F5)

### Iconografía

- **Protocolos:** 📋
- **Guías:** 📚
- **Fármacos:** 💊
- **Checklists:** ✅
- **Recursos:** 🖼️
- **SCORM:** 🎓
- **Validación:** ✅

---

## ✅ VALIDACIONES Y REGLAS DE NEGOCIO

### Validaciones de Contenido

1. **Protocolo:**
   - Título obligatorio
   - Mínimo 3 pasos
   - Al menos 1 advertencia global
   - Tema clínico obligatorio

2. **Guía:**
   - Todas las 8 secciones deben tener contenido
   - Protocolo relacionado obligatorio
   - Objetivos de aprendizaje obligatorios

3. **Fármaco:**
   - Nombre genérico obligatorio
   - Dosis adulto obligatoria
   - Al menos 1 indicación
   - Al menos 1 contraindicación

### Reglas de Negocio

1. **Separación de Capas:**
   - Un protocolo SIEMPRE es operativa
   - Una guía SIEMPRE es formativa
   - Un fármaco SIEMPRE es referencia

2. **Relaciones:**
   - Una guía debe tener protocolo relacionado
   - Un protocolo puede tener guía relacionada
   - Las relaciones son bidireccionales

3. **Publicación:**
   - Solo contenido `approved` puede publicarse
   - Publicar requiere validación clínica (si aplica)
   - Publicar genera nueva versión del Content Pack

---

## 🚀 PRÓXIMOS PASOS

Este diseño funcional servirá como base para:

1. ✅ **Modelo de datos** (ya definido en `MODELO_DATOS_CANONICO_DEFINITIVO.md`)
2. ⏳ **Endpoints de API** (definir rutas y métodos)
3. ⏳ **UI del panel** (implementar componentes React)
4. ⏳ **Sistema de permisos** (middleware de autorización)
5. ⏳ **Workflows** (lógica de validación)

---

**Última actualización:** 2025-01-07  
**Estado:** ✅ DISEÑO FUNCIONAL COMPLETO - LISTO PARA IMPLEMENTACIÓN