codigo0/docs/guia-refuerzo-modelo.md
planetazuzu a26963654f Implementación completa: Guías de Refuerzo (Modo Formativo)
- Arquitectura paralela para Guías de Refuerzo
- Nuevos componentes: GuideCard, GuideHeader, GuideNavigation, etc.
- Vistas formativas: GuideIndex, GuideViewer, GuideSectionViewer
- Layout específico GuideLayout (sin BottomNav)
- Índice de guías con ABCDE Operativo y RCP Adulto SVB
- Corrección de Service Worker para desarrollo
- Enlaces de navegación en menú y página principal
- Documentación completa de implementación
2025-12-27 19:29:00 +01:00

832 lines
22 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 📚 Modelo Oficial - Guía de Refuerzo
**Fecha de creación:** 2025-12-23
**Versión:** 1.0
**Estado:** Contrato Conceptual Oficial
**Propósito:** Definir esquema, estructura y reglas de la Guía de Refuerzo
---
## 🎯 Propósito del Documento
Este documento es el **contrato conceptual oficial** del sistema de Guías de Refuerzo. Define:
-**Qué es** una Guía de Refuerzo
-**Cómo se estructura** (secciones estándar)
-**Qué bloques de contenido** puede usar
-**Cómo convive** con el contenido operativo
-**Reglas de diseño** que deben seguirse
**Uso:**
- No improvisar al crear guías
- No contaminar Markdown con contenido operativo
- Tener criterio claro cuando haya dudas
- Mantener coherencia entre guías
---
## 1⃣ Esquema de Secciones Estándar
Toda Guía de Refuerzo sigue esta estructura de **8 secciones**:
### Sección 1: Introducción
**Propósito:** Establecer contexto y expectativas
**Contenido obligatorio:**
- Título y subtítulo descriptivo
- Contexto clínico del tema
- Objetivos de aprendizaje (qué aprenderás)
- Tiempo estimado de lectura/visualización
- Prerrequisitos (qué debes saber antes)
- **Enlace al protocolo operativo relacionado** (obligatorio)
**Formato:** Texto narrativo corto (2-3 párrafos)
**Bloques permitidos:**
- Texto Explicativo
**Cuándo se usa:** Siempre presente, primera sección
---
### Sección 2: Explicación Clínica
**Propósito:** Proporcionar base científica y comprensión profunda
**Contenido:**
- Fisiopatología del proceso
- Mecanismos de acción (si aplica)
- Conceptos científicos clave
- Relaciones causa-efecto
- Contexto clínico amplio
**Formato:** Texto narrativo con diagramas embebidos
**Bloques permitidos:**
- Texto Explicativo
- Imagen Estática
- Diagrama de Flujo
- Tabla de Referencia
**Cuándo se usa:** Para temas que requieren comprensión científica
**Relación con operativo:** Explica el "por qué" de los pasos operativos
---
### Sección 3: Algoritmo Comentado
**Propósito:** Visualizar el protocolo operativo con explicaciones
**Contenido:**
- Diagrama de flujo del protocolo
- Comentarios explicativos en cada paso
- Decisiones y ramificaciones visualizadas
- **Enlace directo al protocolo operativo** (obligatorio)
- Variaciones según contexto (adulto/pediátrico)
**Formato:** Infografía interactiva o diagrama estático con anotaciones
**Bloques permitidos:**
- Infografía
- Diagrama de Flujo
- Texto Explicativo (comentarios)
**Cuándo se usa:** Para protocolos complejos con múltiples decisiones
**Relación con operativo:** Visualiza y explica los pasos operativos sin duplicarlos
---
### Sección 4: Medios Visuales
**Propósito:** Aprender mediante visualización
**Contenido:**
- Infografías paso a paso de técnicas
- Vídeos de demostración (si aplica)
- Diagramas anatómicos
- Secuencias fotográficas
- Animaciones de procesos
**Formato:** Galería de medios con descripciones
**Bloques permitidos:**
- Galería de Imágenes
- Vídeo
- Imagen Estática
- Infografía
**Cuándo se usa:** Para técnicas que requieren visualización (inmovilización, uso de equipamiento)
**Relación con operativo:** Muestra visualmente cómo ejecutar los pasos operativos
---
### Sección 5: Errores Frecuentes
**Propósito:** Prevenir errores mediante aprendizaje visual
**Contenido:**
- Errores comunes identificados
- Visualización del error (imagen/vídeo)
- Visualización de la forma correcta
- Consecuencias del error
- Cómo evitarlo
**Formato:** Comparación lado a lado (incorrecto vs correcto)
**Bloques permitidos:**
- Comparación Visual
- Caja de Advertencia
- Texto Explicativo
- Imagen Estática
**Cuándo se usa:** Para procedimientos donde los errores son frecuentes o críticos
**Relación con operativo:** Profundiza en los "Puntos críticos TES" del contenido operativo
---
### Sección 6: Casos Clínicos
**Propósito:** Aprender mediante ejemplos prácticos
**Contenido:**
- Caso clínico completo (real o simulado)
- Presentación del caso
- Análisis paso a paso
- Aplicación del protocolo
- Puntos de aprendizaje
- Variaciones del caso
**Formato:** Narrativa estructurada con imágenes/vídeos
**Bloques permitidos:**
- Caso Clínico
- Imagen Estática
- Vídeo (opcional)
- Texto Explicativo
**Cuándo se usa:** Para protocolos complejos o situaciones poco frecuentes
**Relación con operativo:** Muestra aplicación práctica del protocolo operativo
---
### Sección 7: Resumen Visual
**Propósito:** Síntesis rápida y referencia visual
**Contenido:**
- Infografía resumen del tema completo
- Puntos clave destacados visualmente
- **Enlace rápido al protocolo operativo** (obligatorio)
- Checklist visual de pasos críticos
**Formato:** Infografía única de una página
**Bloques permitidos:**
- Resumen Visual
- Infografía
**Cuándo se usa:** Siempre presente como cierre
**Relación con operativo:** Proporciona puente visual hacia el protocolo operativo
---
### Sección 8: Referencias
**Propósito:** Fuentes y recursos adicionales
**Contenido:**
- Guías oficiales citadas (ERC, AHA, SEMES)
- Bibliografía científica
- Enlaces a protocolos relacionados
- Recursos adicionales de formación
**Formato:** Lista estructurada con enlaces
**Bloques permitidos:**
- Lista Estructurada
**Cuándo se usa:** Siempre presente
**Relación con operativo:** Proporciona contexto y validación del contenido operativo
---
## 2⃣ Tipos de Bloques de Contenido
### Bloque 1: Texto Explicativo
**Propósito:** Proporcionar información narrativa y contextual
**Características:**
- Texto estructurado en párrafos
- Longitud variable (1-5 párrafos típicamente)
- Puede incluir formato (negrita, cursiva, listas)
- Soporta enlaces internos y externos
**Cuándo usarlo:**
- Introducciones y contexto
- Explicaciones científicas
- Descripciones de conceptos
- Narrativas de casos clínicos
**Relación con operativo:**
- Explica el "por qué" de los pasos operativos
- Proporciona contexto que no está en operativo
- Nunca duplica pasos operativos
---
### Bloque 2: Imagen Estática
**Propósito:** Mostrar fotografías, diagramas o ilustraciones
**Características:**
- Imagen única con descripción
- Caption opcional
- Alt text para accesibilidad
- Puede tener zoom o lightbox
**Cuándo usarlo:**
- Fotografías de técnicas
- Diagramas anatómicos
- Ilustraciones de conceptos
- Capturas de equipamiento
**Relación con operativo:**
- Muestra visualmente lo que los pasos operativos describen
- Complementa información operativa sin duplicarla
---
### Bloque 3: Infografía
**Propósito:** Visualizar información compleja de forma sintética
**Características:**
- Combinación de texto, iconos, diagramas
- Diseño visual estructurado
- Información densa pero escaneable
- Puede ser interactiva
**Cuándo usarlo:**
- Algoritmos visuales
- Flujos de decisión
- Comparaciones lado a lado
- Resúmenes visuales
**Relación con operativo:**
- Visualiza protocolos operativos sin duplicar pasos
- Hace comprensible información compleja
---
### Bloque 4: Vídeo
**Propósito:** Demostrar técnicas o procesos en movimiento
**Características:**
- Archivo de vídeo embebido
- Controles de reproducción
- Subtítulos opcionales
- Descripción textual alternativa
**Cuándo usarlo:**
- Técnicas que requieren movimiento
- Secuencias temporales
- Demostraciones prácticas
- Animaciones de procesos
**Relación con operativo:**
- Muestra ejecución de pasos operativos
- Complementa descripciones textuales
---
### Bloque 5: Lista Estructurada
**Propósito:** Organizar información en formato de lista
**Características:**
- Lista numerada o con viñetas
- Items con formato consistente
- Puede tener sub-items
- Puede ser expandible/colapsable
**Cuándo usarlo:**
- Conceptos clave
- Características o propiedades
- Checklist de verificación
- Pasos explicativos (no operativos)
**Relación con operativo:**
- Organiza información complementaria
- Nunca duplica listas de pasos operativos
---
### Bloque 6: Caja de Advertencia
**Propósito:** Destacar información crítica de seguridad
**Características:**
- Fondo de color distintivo (amarillo/naranja/rojo)
- Icono de alerta
- Texto destacado
- Borde visible
**Cuándo usarlo:**
- Advertencias de seguridad
- Errores críticos a evitar
- Información de riesgo
- Contraindicaciones importantes
**Relación con operativo:**
- Profundiza en advertencias operativas
- Proporciona contexto de por qué es importante
- Nunca contradice información operativa
---
### Bloque 7: Caso Clínico
**Propósito:** Aprender mediante ejemplo práctico completo
**Características:**
- Estructura narrativa completa
- Presentación del caso
- Análisis paso a paso
- Aplicación de protocolo
- Puntos de aprendizaje
**Cuándo usarlo:**
- Situaciones complejas
- Aplicación práctica de protocolos
- Aprendizaje por casos
- Validación de comprensión
**Relación con operativo:**
- Muestra aplicación real del protocolo operativo
- Ilustra cómo se usan los pasos en contexto
---
### Bloque 8: Comparación Visual
**Propósito:** Mostrar diferencias entre opciones o errores vs correcto
**Características:**
- Dos o más elementos lado a lado
- Etiquetas claras (correcto/incorrecto, antes/después)
- Diferencias destacadas visualmente
- Descripción de cada opción
**Cuándo usarlo:**
- Errores frecuentes vs forma correcta
- Comparación de técnicas
- Antes y después
- Opciones de tratamiento
**Relación con operativo:**
- Visualiza los "Puntos críticos TES" del contenido operativo
- Muestra qué NO hacer (complementa lo que SÍ hacer)
---
### Bloque 9: Tabla de Referencia
**Propósito:** Organizar información tabular compleja
**Características:**
- Filas y columnas estructuradas
- Headers claros
- Datos organizados lógicamente
- Puede ser responsive
**Cuándo usarlo:**
- Valores de referencia
- Comparaciones sistemáticas
- Rangos y parámetros
- Clasificaciones
**Relación con operativo:**
- Proporciona contexto de valores mencionados en operativo
- Nunca duplica tablas operativas críticas
---
### Bloque 10: Diagrama de Flujo
**Propósito:** Visualizar procesos de decisión y algoritmos
**Características:**
- Nodos y flechas
- Decisiones y acciones claras
- Flujo lógico visualizado
- Puede ser interactivo
**Cuándo usarlo:**
- Algoritmos de decisión
- Flujos de protocolo
- Árboles de decisión
- Procesos complejos
**Relación con operativo:**
- Visualiza la lógica detrás de los pasos operativos
- Muestra ramificaciones y decisiones
---
### Bloque 11: Galería de Imágenes
**Propósito:** Mostrar secuencia de imágenes relacionadas
**Características:**
- Múltiples imágenes en secuencia
- Navegación entre imágenes
- Descripción por imagen
- Vista previa en miniatura
**Cuándo usarlo:**
- Secuencias paso a paso de técnicas
- Múltiples ángulos de vista
- Progresión temporal
- Variaciones de un procedimiento
**Relación con operativo:**
- Muestra visualmente la secuencia de pasos operativos
- Proporciona múltiples perspectivas
---
### Bloque 12: Resumen Visual
**Propósito:** Síntesis visual de toda la guía
**Características:**
- Infografía única de una página
- Puntos clave destacados
- Diseño escaneable rápidamente
- Enlace al protocolo operativo
**Cuándo usarlo:**
- Cierre de guía
- Referencia rápida posterior
- Resumen de aprendizaje
**Relación con operativo:**
- Proporciona puente visual hacia protocolo operativo
- Síntesis de lo aprendido
---
## 3⃣ Reglas de Convivencia con el Modo Operativo
### Regla 1: Separación Clara de Propósitos
**Operativo = Acción | Refuerzo = Comprensión**
- **Operativo:** Información para ejecutar AHORA
- **Refuerzo:** Información para entender y aprender
**Implementación:**
- Navegación separada pero relacionada
- Enlaces bidireccionales claros
- Indicadores visuales de modo (operativo vs refuerzo)
---
### Regla 2: Información que NUNCA Debe Ir a la Guía de Refuerzo
**Lista de exclusión absoluta:**
1.**Pasos numerados de protocolos**
- **Razón:** Son sagrados en operativo, fuente única de verdad
- **Alternativa:** Enlazar al protocolo operativo, comentar visualmente
2.**Dosis exactas de fármacos**
- **Razón:** Valores críticos que no deben duplicarse
- **Alternativa:** Explicar mecanismo, enlazar a vademécum operativo
3.**Contraindicaciones exactas**
- **Razón:** Información crítica de seguridad
- **Alternativa:** Explicar por qué son contraindicaciones, enlazar a operativo
4.**Advertencias críticas operativas**
- **Razón:** Prevención de errores en tiempo real
- **Alternativa:** Profundizar en errores frecuentes con casos visuales
5.**Valores numéricos críticos** (profundidad compresiones, frecuencias)
- **Razón:** Valores precisos necesarios para ejecución
- **Alternativa:** Explicar por qué esos valores, enlazar a operativo
**Principio:** La información operativa es **fuente única de verdad** para valores y pasos críticos.
---
### Regla 3: Información que Puede Aparecer en Ambos Modos
**Lista de información compartida:**
1.**Títulos y nombres**
- Protocolo: "RCP Adulto SVB"
- Fármaco: "Adrenalina"
- **Razón:** Identificación común, no valores críticos
2.**Categorías y clasificaciones**
- Prioridad: "Crítico"
- Categoría: "Soporte Vital"
- **Razón:** Metadatos de organización, no información operativa
3.**Relaciones entre entidades**
- "Este protocolo usa este fármaco"
- "Protocolos relacionados"
- **Razón:** Navegación y contexto, no valores críticos
4.**Metadatos de navegación**
- Enlaces relacionados
- Breadcrumbs
- **Razón:** Navegación, no contenido crítico
**Principio:** Solo metadatos y navegación pueden compartirse, nunca valores o pasos críticos.
---
### Regla 4: Enlaces Operativo ↔ Refuerzo
**Patrón de enlace:**
```
[Contenido Operativo]
↓ "¿Quieres entender más?"
[Guía de Refuerzo]
[Guía de Refuerzo]
↓ "Ver protocolo operativo"
[Contenido Operativo]
```
**Implementación:**
1. **Desde Operativo hacia Refuerzo:**
- Botón discreto: "Guía de Refuerzo" o "Aprender más"
- Ubicación: Al final del contenido operativo
- Estilo: Secundario, no compite con información crítica
2. **Desde Refuerzo hacia Operativo:**
- Botón destacado: "Ver Protocolo Operativo" o "Ir a Acción Rápida"
- Ubicación: Múltiples puntos (introducción, resumen, referencias)
- Estilo: Primario, claro que lleva a acción
**Principio:** Los enlaces deben ser **claros y bidireccionales**, sin confundir al usuario sobre qué modo está usando.
---
### Regla 5: Indicadores Visuales de Modo
**Sistema de identificación:**
1. **Header/Breadcrumb:**
- Operativo: "Protocolo RCP" | Badge "Operativo"
- Refuerzo: "Guía de Refuerzo: RCP" | Badge "Formación"
2. **Colores/Temas:**
- Operativo: Colores de acción (rojo/naranja para crítico)
- Refuerzo: Colores de aprendizaje (azul/verde para formación)
3. **Iconografía:**
- Operativo: Iconos de acción (play, check, alert)
- Refuerzo: Iconos de aprendizaje (book, lightbulb, video)
**Principio:** El usuario debe saber **inmediatamente** en qué modo está.
---
### Regla 6: Prevención de Confusión
**Estrategias:**
1. **Nunca mostrar ambos modos simultáneamente**
- No mostrar pasos operativos dentro de guía de refuerzo
- No mostrar explicaciones extensas dentro de protocolo operativo
2. **Transiciones claras**
- Al cambiar de modo, indicar claramente el cambio
- Mostrar breadcrumb actualizado
- Resaltar visualmente el nuevo contexto
3. **Mensajes contextuales**
- En operativo: "Para acción inmediata"
- En refuerzo: "Para comprensión y formación"
**Principio:** El usuario nunca debe dudar sobre qué información usar en cada contexto.
---
## 4⃣ Estructura Abstracta de una Guía de Refuerzo
### Modelo Conceptual
```
GUÍA DE REFUERZO
├── METADATOS
│ ├── ID único
│ ├── Título
│ ├── Tema relacionado (protocolo/fármaco/herramienta)
│ ├── Nivel de dificultad
│ ├── Tiempo estimado
│ └── Enlace a contenido operativo relacionado (obligatorio)
├── SECCIÓN 1: INTRODUCCIÓN
│ ├── Bloque: Texto Explicativo
│ └── Contenido: Contexto, objetivos, prerrequisitos
├── SECCIÓN 2: EXPLICACIÓN CLÍNICA
│ ├── Bloque: Texto Explicativo
│ ├── Bloque: Imagen / Diagrama
│ └── Contenido: Base científica, fisiopatología
├── SECCIÓN 3: ALGORITMO COMENTADO
│ ├── Bloque: Diagrama de Flujo / Infografía
│ ├── Bloque: Texto Explicativo (comentarios)
│ └── Contenido: Visualización del protocolo con explicaciones
├── SECCIÓN 4: MEDIOS VISUALES
│ ├── Bloque: Galería de Imágenes
│ ├── Bloque: Vídeo (opcional)
│ └── Contenido: Técnicas visualizadas paso a paso
├── SECCIÓN 5: ERRORES FRECUENTES
│ ├── Bloque: Comparación Visual
│ ├── Bloque: Caja de Advertencia
│ └── Contenido: Errores comunes con visualización
├── SECCIÓN 6: CASOS CLÍNICOS
│ ├── Bloque: Caso Clínico
│ ├── Bloque: Imagen / Vídeo (opcional)
│ └── Contenido: Ejemplos prácticos completos
├── SECCIÓN 7: RESUMEN VISUAL
│ ├── Bloque: Resumen Visual / Infografía
│ └── Contenido: Síntesis de una página
└── SECCIÓN 8: REFERENCIAS
├── Bloque: Lista Estructurada
└── Contenido: Bibliografía y enlaces
```
---
## 5⃣ Reglas de Validación
**Validaciones que debe cumplir una Guía de Refuerzo:**
1.**Debe tener enlace a contenido operativo relacionado**
- No puede existir sin relación con operativo
2.**No debe duplicar pasos operativos**
- Puede comentarlos, visualizarlos, explicarlos
- No puede listarlos como pasos numerados
3.**Debe tener al menos una sección de medios visuales**
- Al menos una imagen, infografía o vídeo
- Diferencia clave con contenido operativo
4.**Debe tener sección de resumen visual**
- Siempre presente como cierre
- Proporciona síntesis y enlace a operativo
5.**Debe tener tiempo estimado realista**
- Basado en longitud de contenido
- Ayuda al usuario a decidir si tiene tiempo
---
## 6⃣ Criterios de Decisión
### ¿Cuándo crear una Guía de Refuerzo?
**Crear guía cuando:**
- ✅ El protocolo es complejo y se beneficiaría de explicación visual
- ✅ Hay errores frecuentes que requieren visualización
- ✅ El tema requiere comprensión científica profunda
- ✅ Hay casos clínicos que ilustran el protocolo
- ✅ El contenido operativo existe y está completo
**NO crear guía cuando:**
- ❌ El protocolo operativo aún no existe
- ❌ El contenido es muy simple y no requiere explicación
- ❌ No hay medios visuales disponibles
- ❌ El protocolo es muy nuevo y puede cambiar
---
### ¿Qué información va a cada sección?
**Introducción:**
- Contexto general, objetivos, tiempo estimado
**Explicación Clínica:**
- Fisiopatología, mecanismos, ciencia detrás del protocolo
**Algoritmo Comentado:**
- Visualización del protocolo con comentarios explicativos
**Medios Visuales:**
- Técnicas paso a paso, demostraciones visuales
**Errores Frecuentes:**
- Errores comunes visualizados, comparaciones correcto/incorrecto
**Casos Clínicos:**
- Ejemplos prácticos completos con análisis
**Resumen Visual:**
- Síntesis de una página con puntos clave
**Referencias:**
- Guías oficiales, bibliografía, enlaces relacionados
---
## 7⃣ Ejemplo de Uso del Modelo
### Ejemplo: Guía de Refuerzo "RCP Adulto SVB"
**Metadatos:**
- ID: `refuerzo-rcp-adulto-svb`
- Título: "Guía de Refuerzo: RCP Adulto SVB"
- Relacionado con: `protocolo-rcp-adulto-svb`
- Nivel: Intermedio
- Tiempo: 15 minutos
**Estructura:**
**Sección 1: Introducción**
- Bloque Texto: "La reanimación cardiopulmonar (RCP) es el conjunto de maniobras destinadas a sustituir temporalmente la función del corazón y los pulmones..."
- Enlace: "Ver Protocolo Operativo RCP"
**Sección 2: Explicación Clínica**
- Bloque Texto: Explicación de fisiopatología de la PCR
- Bloque Imagen: Diagrama del sistema cardiovascular
- Bloque Texto: Explicación de por qué las compresiones salvan vidas
**Sección 3: Algoritmo Comentado**
- Bloque Infografía: Algoritmo RCP visual con comentarios en cada paso
- Bloque Texto: "Paso 1: Garantizar seguridad - Esto es crítico porque..."
- Enlace: "Ver pasos operativos completos"
**Sección 4: Medios Visuales**
- Bloque Galería: 6 imágenes de técnica de compresiones (posición manos, profundidad, frecuencia)
- Bloque Vídeo: Demostración de compresiones de calidad (30 segundos)
**Sección 5: Errores Frecuentes**
- Bloque Comparación Visual: Compresiones incorrectas vs correctas (lado a lado)
- Bloque Caja Advertencia: "Error común: No permitir descompresión completa"
- Bloque Texto: Explicación de consecuencias del error
**Sección 6: Casos Clínicos**
- Bloque Caso Clínico: "Caso: PCR en vía pública"
- Presentación: "Varón de 45 años encontrado inconsciente..."
- Análisis: Aplicación paso a paso del protocolo
- Puntos de aprendizaje: 3 puntos clave
**Sección 7: Resumen Visual**
- Bloque Resumen Visual: Infografía de una página con algoritmo completo y puntos clave
**Sección 8: Referencias**
- Bloque Lista: Guías ERC 2021, AHA 2020, enlaces relacionados
---
## Conclusión
Este modelo es el **contrato conceptual oficial** para crear Guías de Refuerzo.
**Principios fundamentales:**
1.**Nunca duplicar** información operativa crítica
2.**Siempre enlazar** al protocolo operativo relacionado
3.**Usar medios visuales** como diferencia clave
4.**Seguir estructura** de 8 secciones estándar
5.**Mantener separación** clara con contenido operativo
**Uso del modelo:**
- Consultar antes de crear cualquier guía
- Seguir estructura y reglas definidas
- No improvisar ni contaminar Markdown operativo
- Mantener coherencia entre todas las guías
---
**Fin del Modelo Oficial**
*Este documento debe consultarse siempre que se cree o modifique una Guía de Refuerzo.*