planetazuzu/codigo0
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
codigo0/docs/MEDIOS_VISUALES_SECCION_2_ABCDE.md

18 KiB
Raw Blame History

📊 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

![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 ✅