# 📊 Medios Visuales Necesarios - Sección 2 ABCDE

## 🎯 Objetivo

Documentar todos los medios visuales necesarios para la **Sección 2: Explicación Clínica y Fisiopatología** de la Guía de Refuerzo ABCDE, con descripciones detalladas para su creación.

---

## 📋 Resumen de Medios Necesarios

**Total de diagramas:** 3 diagramas conceptuales

1. **Diagrama 1:** Pirámide de Prioridad Vital
2. **Diagrama 2:** Comparación — Evaluación Desordenada vs Estructurada ABCDE
3. **Diagrama 3:** Flujo de Deterioro Fisiológico

---

## 📐 DIAGRAMA 1: Pirámide de Prioridad Vital

### Información General

- **Tipo:** Diagrama conceptual esquemático
- **Formato recomendado:** SVG o PNG de alta resolución
- **Dimensiones sugeridas:** 1200x1600px (vertical)
- **Estilo:** Conceptual, no anatómico detallado
- **Propósito:** Mostrar visualmente la jerarquía de prioridad vital del ABCDE

### Estructura Visual

#### Base de la Pirámide (Inferior)
- **Texto:** "Fundamento: todas las emergencias requieren esta estructura"
- **Color:** Gris suave o azul muy claro
- **Estilo:** Base sólida que sostiene toda la estructura

#### Nivel E - Evaluación Continua (Inferior)
- **Posición:** Parte inferior de la pirámide
- **Tamaño visual:** Menor (base más ancha)
- **Color:** Verde o azul suave (#3b82f6, #22c55e)
- **Iconografía:** Ciclo, repetición, flecha circular
- **Etiqueta:** "Monitoreo continuo"
- **Texto descriptivo:** "Esto mantiene la evaluación actualizada"
- **Características:**
  - Icono de ciclo o evaluación continua
  - Menor prominencia visual
  - Indica menor urgencia inmediata

#### Nivel D - Exposición y Entorno (Medio-Inferior)
- **Posición:** Encima del nivel E
- **Tamaño visual:** Medio-pequeño
- **Color:** Amarillo suave o verde (#eab308, #84cc16)
- **Iconografía:** Entorno, temperatura, factores ambientales
- **Etiqueta:** "Puede empeorar la situación"
- **Texto descriptivo:** "Sin esto, factores externos agravan"
- **Características:**
  - Icono de exposición (escudo, termómetro, entorno)
  - Tamaño ligeramente mayor que E
  - Indica importancia moderada

#### Nivel C - Función Neurológica (Medio)
- **Posición:** Encima del nivel D
- **Tamaño visual:** Medio
- **Color:** Amarillo o naranja suave (#f59e0b, #eab308)
- **Iconografía:** Cerebro estilizado, consciencia, función neurológica
- **Etiqueta:** "Vital para el control"
- **Texto descriptivo:** "Sin esto, el organismo pierde control"
- **Características:**
  - Icono de cerebro estilizado (no anatómico detallado)
  - Tamaño medio
  - Indica importancia alta

#### Nivel B - Circulación (Medio-Superior)
- **Posición:** Encima del nivel C
- **Tamaño visual:** Medio-grande
- **Color:** Naranja o rojo suave (#ea580c, #f59e0b)
- **Iconografía:** Corazón estilizado, flujo sanguíneo, vasos
- **Etiqueta:** "Crítico si falla"
- **Texto descriptivo:** "Sin esto, los órganos mueren rápidamente"
- **Características:**
  - Icono de corazón estilizado (no anatómico detallado)
  - Tamaño medio-grande
  - Indica urgencia alta

#### Nivel A - Vía Aérea y Respiración (Superior - Más Crítico)
- **Posición:** Parte superior de la pirámide (punta)
- **Tamaño visual:** Mayor o más prominente
- **Color:** Rojo intenso o naranja (#dc2626, #ea580c)
- **Iconografía:** Aire/respiración (pulmones estilizados, flujo de aire)
- **Etiqueta:** "Lo que mata primero"
- **Texto descriptivo:** "Sin esto, el organismo muere en minutos"
- **Características:**
  - Icono de pulmones estilizados o flujo de aire
  - Tamaño más grande
  - Color más intenso
  - Máxima prominencia visual

### Elementos de Conexión

#### Flechas Descendentes
- **Función:** Indicar flujo lógico de evaluación
- **Dirección:** De arriba hacia abajo (A → B → C → D → E)
- **Estilo:** Flechas claras, no demasiado gruesas
- **Color:** Gris medio o color que contraste con fondo
- **Ubicación:** Entre cada nivel de la pirámide

#### Gradiente de Color
- **Función:** Reforzar visualmente la jerarquía
- **Aplicación:** 
  - Más intenso arriba (rojo/naranja)
  - Más suave abajo (verde/azul)
- **Efecto:** Transición gradual de color de arriba hacia abajo

### Texto y Etiquetas

- **Tipografía:** Clara y legible, jerarquía clara
- **Tamaños:** 
  - Letras (A, B, C, D, E): Grandes y prominentes
  - Etiquetas: Medianas
  - Textos descriptivos: Pequeños pero legibles
- **Colores de texto:** 
  - Blanco o claro sobre fondos oscuros
  - Oscuro sobre fondos claros

### Estilo Visual General

- **Fondo:** Oscuro (#1e293b) para modo TES, o claro según preferencia
- **Bordes:** Suaves, redondeados
- **Espaciado:** Generoso entre niveles
- **Diseño:** Limpio, no sobrecargado
- **Iconografía:** Estilizada, no anatómica detallada

---

## 📐 DIAGRAMA 2: Comparación — Evaluación Desordenada vs Estructurada ABCDE

### Información General

- **Tipo:** Diagrama comparativo lado a lado
- **Formato recomendado:** SVG o PNG de alta resolución
- **Dimensiones sugeridas:** 1600x1200px (horizontal)
- **Estilo:** Comparativo, conceptual
- **Propósito:** Mostrar visualmente cómo el ABCDE evita la fijación en problemas visibles pero secundarios

### Estructura Visual

#### División en Dos Columnas

**Columna Izquierda:** Evaluación Desordenada
**Columna Derecha:** Evaluación Estructurada ABCDE

---

### LADO IZQUIERDO: Evaluación Desordenada

#### Representación del Paciente
- **Estilo:** Silueta o representación esquemática de paciente
- **Características visibles:**
  - Herida sangrante grande (muy visible, destacada)
  - Deformidad visible (hueso fracturado, prominente)
  - Objeto que sobresale (visible, llamativo)
  - Problema crítico NO visible: vía aérea obstruida (representada de manera sutil o no visible)

#### Múltiples Flechas Desordenadas
- **Dirección:** Aleatoria, cruzadas, desordenadas
- **Color:** Rojo o naranja (#ef4444, #f59e0b)
- **Estilo:** Flechas que apuntan a diferentes problemas de manera aleatoria
- **Destino de flechas:**
  - Algunas apuntan a la herida sangrante
  - Otras apuntan a la deformidad
  - Ninguna apunta a la vía aérea (problema crítico)
- **Efecto visual:** Confusión, desorganización

#### Iconografía de Confusión
- **Elementos:**
  - Flechas cruzadas
  - Elementos desordenados
  - Símbolos de confusión (signos de interrogación, líneas caóticas)
- **Color:** Rojo o naranja que sugiere deterioro
- **Efecto:** Transmitir pensamiento desordenado

#### Etiquetas y Textos
- **Etiqueta principal:** "Fijación en lo visible"
- **Etiqueta secundaria:** "Problemas críticos omitidos"
- **Etiqueta de resultado:** "Resultado: deterioro progresivo"
- **Color de texto:** Rojo o naranja para indicar resultado negativo
- **Ubicación:** Debajo de la representación del paciente

---

### LADO DERECHO: Evaluación Estructurada ABCDE

#### Representación del Mismo Paciente
- **Estilo:** Misma silueta o representación esquemática
- **Mismos problemas visibles:**
  - Herida sangrante grande (visible pero no prioritaria)
  - Deformidad visible (visible pero no prioritaria)
  - Objeto que sobresale (visible pero no prioritaria)
  - Problema crítico ahora VISIBLE y siendo abordado: vía aérea obstruida (ahora destacada)

#### Estructura ABCDE Aplicada
- **Visualización:** Estructura clara del ABCDE aplicada
- **Orden:** Evaluación sistemática de arriba hacia abajo
- **Elementos:**
  - Letras A, B, C, D, E visibles
  - Cada letra en su nivel correspondiente
  - Conexión visual clara entre niveles

#### Flechas Ordenadas
- **Dirección:** Ordenadas, sistemáticas, de arriba hacia abajo
- **Color:** Verde o azul (#22c55e, #3b82f6)
- **Estilo:** Flechas claras que indican flujo lógico
- **Orden de flechas:**
  1. Primero: Vía aérea (A) - siendo abordada
  2. Segundo: Respiración (B)
  3. Tercero: Circulación (C)
  4. Cuarto: Función neurológica (D)
  5. Quinto: Exposición (D) - herida abordada después
- **Efecto visual:** Orden, claridad, estructura

#### Problemas Abordados en Orden
- **Problemas críticos primero:**
  - Vía aérea obstruida (A) - VISIBLE y siendo abordada
  - Indicador visual: Checkmark o símbolo de "abordado"
- **Problemas secundarios después:**
  - Herida sangrante (D) - visible pero abordada después
  - Deformidad (D) - visible pero abordada después
  - Indicador visual: Símbolo de "pendiente" o "después"

#### Iconografía de Organización
- **Elementos:**
  - Estructura clara
  - Flechas ordenadas
  - Símbolos de control (checkmarks, indicadores de progreso)
- **Color:** Verde o azul que sugiere estabilización
- **Efecto:** Transmitir evaluación sistemática

#### Etiquetas y Textos
- **Etiqueta principal:** "Evaluación sistemática"
- **Etiqueta secundaria:** "Problemas críticos primero"
- **Etiqueta de resultado:** "Resultado: estabilización"
- **Color de texto:** Verde o azul para indicar resultado positivo
- **Ubicación:** Debajo de la representación del paciente

---

### Elementos de Comparación

#### Flecha de Transformación
- **Ubicación:** Entre las dos columnas
- **Dirección:** De izquierda (desorden) hacia derecha (estructura)
- **Estilo:** Flecha grande, destacada
- **Color:** Gris medio o color de transición
- **Texto opcional:** "Con estructura ABCDE"

#### Mensaje Visual Central
- **Ubicación:** Parte superior, centrado
- **Texto:** "El orden importa más que la rapidez"
- **Estilo:** Destacado, claro
- **Color:** Contraste con fondo

---

### Estilo Visual General

- **Fondo:** Oscuro (#1e293b) para modo TES
- **Separación:** Línea vertical clara entre columnas
- **Balance:** Ambas columnas con mismo tamaño
- **Contraste:** Izquierda (rojo/naranja) vs Derecha (verde/azul)
- **Diseño:** Limpio, comparación clara

---

## 📐 DIAGRAMA 3: Flujo de Deterioro Fisiológico

### Información General

- **Tipo:** Diagrama de flujo temporal/progresivo
- **Formato recomendado:** SVG o PNG de alta resolución
- **Dimensiones sugeridas:** 1200x1800px (vertical)
- **Estilo:** Secuencial, mostrando progresión temporal
- **Propósito:** Explicar visualmente cómo un fallo no resuelto en niveles superiores conduce al colapso de los inferiores

### Estructura Visual

#### Representación del Organismo como Sistema Integrado
- **Estilo:** Sistema integrado con 5 niveles conectados verticalmente
- **Niveles:** A, B, C, D, E (de arriba hacia abajo)
- **Conexión:** Niveles conectados verticalmente con flechas

---

### ESTADO 1: Estado Inicial (Funcionamiento Normal)

#### Representación Visual
- **Color:** Verde (#22c55e) para todos los niveles
- **Iconografía:** Sistemas funcionando
  - A: Flujo de aire visible
  - B: Respiración efectiva
  - C: Circulación activa
  - D: Función neurológica normal
  - E: Exposición controlada
- **Etiqueta:** "Estado inicial: Todos los niveles funcionando correctamente"
- **Indicadores:** Checkmarks verdes o símbolos de "OK"

---

### ESTADO 2: Fallo en Nivel Superior (A o B)

#### Representación Visual del Fallo
- **Nivel superior (A o B):**
  - **Color:** Cambia a rojo (#dc2626) - FALLO
  - **Iconografía:** Sistema fallando (flujo de aire bloqueado, respiración detenida)
  - **Indicador:** Símbolo de alerta o "X" roja
  - **Etiqueta:** "Fallo en nivel superior"

#### Propagación del Deterioro
- **Flechas de propagación:**
  - **Dirección:** De arriba hacia abajo
  - **Color:** Naranja/amarillo (#f59e0b, #eab308)
  - **Estilo:** Flechas que indican cómo el fallo se propaga
- **Niveles inferiores:**
  - **B (si A falla) o C:** Cambia a amarillo (riesgo)
  - **C, D, E:** Cambian gradualmente a naranja (deterioro)
- **Etiquetas:**
  - "Deterioro progresivo"
  - "Sistemas inferiores colapsan"

#### Representación Visual del Deterioro
- **Gradiente de color:**
  - Rojo arriba (fallo)
  - Naranja medio (deterioro)
  - Amarillo abajo (riesgo)
- **Iconografía:** Sistemas mostrando signos de deterioro

---

### ESTADO 3: Fallo No Resuelto (Progresión)

#### Progresión Visual del Deterioro
- **Extensión del rojo:**
  - Rojo se extiende hacia abajo
  - Todos los niveles cambian gradualmente a rojo
- **Secuencia temporal:**
  - Estado 2 → Estado 3 (progresión visual)
  - Flechas que muestran la progresión

#### Representación de Colapso Completo
- **Todos los niveles:**
  - **Color:** Rojo (#dc2626) - FALLO COMPLETO
  - **Iconografía:** Sistemas completamente fallidos
  - **Indicadores:** Múltiples símbolos de alerta
- **Etiquetas:**
  - "Fallo no resuelto"
  - "Colapso completo"
  - "Resultado: parada cardiorrespiratoria"

---

### ESTADO 4: Fallo Resuelto en Nivel Superior (Recuperación)

#### Representación Visual de la Resolución
- **Nivel superior (A o B):**
  - **Color:** Vuelve a verde (#22c55e) - RESUELTO
  - **Iconografía:** Sistema funcionando nuevamente
  - **Indicador:** Checkmark verde o símbolo de "OK"
  - **Etiqueta:** "Problema superior resuelto"

#### Propagación de la Recuperación
- **Flechas de recuperación:**
  - **Dirección:** De arriba hacia abajo
  - **Color:** Verde (#22c55e, #4ade80)
  - **Estilo:** Flechas que indican cómo la resolución se propaga
- **Niveles inferiores:**
  - Vuelven gradualmente a verde (recuperación)
  - Transición: Naranja → Amarillo → Verde
- **Etiquetas:**
  - "Recuperación progresiva"
  - "Sistemas inferiores se estabilizan"

#### Representación Visual de la Recuperación
- **Gradiente de color:**
  - Verde arriba (resuelto)
  - Verde medio (recuperando)
  - Verde abajo (estabilizado)
- **Iconografía:** Sistemas mostrando signos de recuperación

---

### Elementos de Conexión y Flujo

#### Flechas Bidireccionales
- **Función:** Mostrar interdependencia
- **Dirección:** 
  - Hacia abajo: Fallo se propaga
  - Hacia arriba: Recuperación se propaga
- **Color:** 
  - Rojo/naranja para deterioro
  - Verde para recuperación
- **Estilo:** Flechas claras, no demasiado gruesas

#### Gradiente de Color por Gravedad
- **Verde (#22c55e):** Funcionamiento normal
- **Amarillo (#eab308):** Riesgo o deterioro inicial
- **Naranja (#f59e0b):** Deterioro significativo
- **Rojo (#dc2626):** Fallo completo
- **Aplicación:** Transición gradual entre estados

#### Indicadores Temporales
- **Flechas de tiempo:** Mostrar progresión temporal
- **Etiquetas temporales:** "Tiempo 0", "Tiempo +X min", etc.
- **Estilo:** Sutil, no intrusivo

---

### Estilo Visual General

- **Fondo:** Oscuro (#1e293b) para modo TES
- **Diseño:** Secuencial, mostrando estados en orden
- **Espaciado:** Generoso entre estados
- **Transiciones:** Suaves entre colores
- **Iconografía:** Estilizada, no anatómica detallada
- **Tipografía:** Clara, jerarquía clara

---

## 📊 Resumen de Especificaciones Técnicas

### Formato y Dimensiones

| Diagrama | Formato | Dimensiones | Orientación |
|----------|---------|-------------|-------------|
| Diagrama 1: Pirámide | SVG/PNG | 1200x1600px | Vertical |
| Diagrama 2: Comparación | SVG/PNG | 1600x1200px | Horizontal |
| Diagrama 3: Flujo | SVG/PNG | 1200x1800px | Vertical |

### Paleta de Colores

| Color | Hex | Uso |
|-------|-----|-----|
| Rojo intenso | #dc2626 | Nivel A, fallos críticos |
| Naranja | #ea580c | Nivel B, urgencia alta |
| Amarillo | #f59e0b | Nivel C, importancia alta |
| Verde suave | #22c55e | Nivel D/E, normalidad |
| Azul | #3b82f6 | Información, modo formación |
| Gris | #64748b | Texto secundario |
| Fondo oscuro | #1e293b | Fondo modo TES |

### Estilo de Iconografía

- **Tipo:** Estilizada, conceptual
- **NO:** Anatómica detallada
- **SÍ:** Reconocible, clara, simple
- **Ejemplos:**
  - Pulmones: Forma estilizada, no detalle anatómico
  - Corazón: Forma estilizada, no detalle anatómico
  - Cerebro: Forma estilizada, no detalle anatómico

---

## ✅ Checklist de Creación

### Diagrama 1: Pirámide de Prioridad Vital
- [ ] Estructura piramidal con 5 niveles
- [ ] Gradiente de color (rojo arriba → verde abajo)
- [ ] Iconografía para cada nivel (A, B, C, D, E)
- [ ] Flechas descendentes entre niveles
- [ ] Etiquetas y textos descriptivos
- [ ] Base con texto explicativo

### Diagrama 2: Comparación Desordenada vs Estructurada
- [ ] Dos columnas (izquierda: desorden, derecha: estructura)
- [ ] Representación del mismo paciente en ambas
- [ ] Flechas desordenadas (izquierda) vs ordenadas (derecha)
- [ ] Problemas visibles destacados
- [ ] Problema crítico (vía aérea) visible solo en derecha
- [ ] Etiquetas de resultado (deterioro vs estabilización)
- [ ] Flecha de transformación entre columnas

### Diagrama 3: Flujo de Deterioro Fisiológico
- [ ] 4 estados visuales (inicial, fallo, no resuelto, resuelto)
- [ ] 5 niveles conectados (A, B, C, D, E)
- [ ] Gradiente de color por gravedad
- [ ] Flechas de propagación (deterioro y recuperación)
- [ ] Transiciones visuales entre estados
- [ ] Etiquetas explicativas para cada estado

---

## 📁 Ubicación de Archivos

### Ruta de Guardado
```
public/assets/infografias/bloque-0-fundamentos/
```

### Nombres de Archivos Sugeridos
1. `ABCDE_PIRAMIDE_PRIORIDAD_VITAL.png` (o .svg)
2. `ABCDE_COMPARACION_DESORDEN_VS_ESTRUCTURA.png` (o .svg)
3. `ABCDE_FLUJO_DETERIORO_FISIOLOGICO.png` (o .svg)

---

## 🔗 Integración en Markdown

### Referencias en SECCION_02_ABCDE_OPERATIVO.md

```markdown
![Pirámide de Prioridad Vital ABCDE]/assets/infografias/bloque-0-fundamentos/ABCDE_PIRAMIDE_PRIORIDAD_VITAL.png)

![Comparación: Evaluación Desordenada vs Estructurada]/assets/infografias/bloque-0-fundamentos/ABCDE_COMPARACION_DESORDEN_VS_ESTRUCTURA.png)

![Flujo de Deterioro Fisiológico]/assets/infografias/bloque-0-fundamentos/ABCDE_FLUJO_DETERIORO_FISIOLOGICO.png)
```

---

## 📝 Notas Finales

- **Propósito pedagógico:** Estos diagramas ayudan a visualizar y comprender la jerarquía fisiológica que fundamenta el ABCDE
- **NO muestran:** Técnicas específicas, maniobras, valores numéricos, pasos operativos
- **SÍ muestran:** Conceptos, jerarquías, comparaciones, flujos de deterioro/recuperación
- **Estilo:** Conceptual, educativo, no operativo

---

**Documento completo con todas las especificaciones para crear los 3 diagramas necesarios** ✅