158 lines
10 KiB
XML
158 lines
10 KiB
XML
|
<svg width="1200" height="1600" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="gradientA" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#dc2626;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#ea580c;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="gradientB" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#eab308;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="gradientC" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#eab308;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#84cc16;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="gradientD" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="gradientE" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#6366f1;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Fondo -->
|
||
|
|
<rect width="1200" height="1600" fill="#1e293b"/>
|
||
|
|
|
||
|
|
<!-- Badge Modo Formación -->
|
||
|
|
<rect x="50" y="30" width="300" height="50" rx="25" fill="#3b82f6" opacity="0.9"/>
|
||
|
|
<text x="200" y="60" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="white" text-anchor="middle">Modo Formación / Refuerzo</text>
|
||
|
|
|
||
|
|
<!-- Título Principal -->
|
||
|
|
<text x="600" y="120" font-family="Arial, sans-serif" font-size="36" font-weight="bold" fill="#f1f5f9" text-anchor="middle">ABCDE: Estructura Mental de Priorización</text>
|
||
|
|
<text x="600" y="160" font-family="Arial, sans-serif" font-size="24" fill="#94a3b8" text-anchor="middle">Lo que mata antes va primero</text>
|
||
|
|
|
||
|
|
<!-- Comparación: Lado Izquierdo (Desordenado) -->
|
||
|
|
<g transform="translate(100, 220)">
|
||
|
|
<rect x="0" y="0" width="450" height="600" rx="15" fill="#1e293b" stroke="#475569" stroke-width="2"/>
|
||
|
|
<text x="225" y="40" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#ef4444" text-anchor="middle">Sin Estructura</text>
|
||
|
|
<text x="225" y="70" font-family="Arial, sans-serif" font-size="18" fill="#f87171" text-anchor="middle">→ Errores de Prioridad</text>
|
||
|
|
|
||
|
|
<!-- Elementos caóticos -->
|
||
|
|
<circle cx="100" cy="150" r="30" fill="#ef4444" opacity="0.6"/>
|
||
|
|
<text x="100" y="160" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white" text-anchor="middle">?</text>
|
||
|
|
|
||
|
|
<circle cx="250" cy="120" r="25" fill="#f59e0b" opacity="0.6"/>
|
||
|
|
<text x="250" y="130" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white" text-anchor="middle">!</text>
|
||
|
|
|
||
|
|
<circle cx="350" cy="180" r="28" fill="#eab308" opacity="0.6"/>
|
||
|
|
<text x="350" y="190" font-family="Arial, sans-serif" font-size="15" font-weight="bold" fill="white" text-anchor="middle">?</text>
|
||
|
|
|
||
|
|
<circle cx="150" cy="250" r="22" fill="#ef4444" opacity="0.5"/>
|
||
|
|
<text x="150" y="260" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="white" text-anchor="middle">!</text>
|
||
|
|
|
||
|
|
<circle cx="300" cy="280" r="26" fill="#f59e0b" opacity="0.5"/>
|
||
|
|
<text x="300" y="290" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white" text-anchor="middle">?</text>
|
||
|
|
|
||
|
|
<!-- Líneas caóticas -->
|
||
|
|
<line x1="100" y1="150" x2="250" y2="120" stroke="#64748b" stroke-width="2" opacity="0.4"/>
|
||
|
|
<line x1="250" y1="120" x2="350" y2="180" stroke="#64748b" stroke-width="2" opacity="0.4"/>
|
||
|
|
<line x1="350" y1="180" x2="150" y2="250" stroke="#64748b" stroke-width="2" opacity="0.4"/>
|
||
|
|
<line x1="150" y1="250" x2="300" y2="280" stroke="#64748b" stroke-width="2" opacity="0.4"/>
|
||
|
|
|
||
|
|
<!-- Icono de confusión -->
|
||
|
|
<text x="225" y="450" font-family="Arial, sans-serif" font-size="80" fill="#64748b" opacity="0.5" text-anchor="middle">⚠</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Comparación: Lado Derecho (Estructurado ABCDE) -->
|
||
|
|
<g transform="translate(650, 220)">
|
||
|
|
<rect x="0" y="0" width="450" height="600" rx="15" fill="#1e293b" stroke="#22c55e" stroke-width="3"/>
|
||
|
|
<text x="225" y="40" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#22c55e" text-anchor="middle">Con Estructura ABCDE</text>
|
||
|
|
<text x="225" y="70" font-family="Arial, sans-serif" font-size="18" fill="#4ade80" text-anchor="middle">→ Priorización Correcta</text>
|
||
|
|
|
||
|
|
<!-- A - Aire/Respiración (Más crítico) -->
|
||
|
|
<rect x="125" y="100" width="200" height="80" rx="10" fill="url(#gradientA)"/>
|
||
|
|
<text x="225" y="140" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="white" text-anchor="middle">A</text>
|
||
|
|
<text x="225" y="170" font-family="Arial, sans-serif" font-size="16" fill="white" text-anchor="middle">Aire / Respiración</text>
|
||
|
|
<!-- Icono pulmones -->
|
||
|
|
<circle cx="180" cy="130" r="15" fill="white" opacity="0.3"/>
|
||
|
|
<circle cx="270" cy="130" r="15" fill="white" opacity="0.3"/>
|
||
|
|
|
||
|
|
<!-- Flecha descendente -->
|
||
|
|
<polygon points="225,190 235,210 215,210" fill="#f1f5f9"/>
|
||
|
|
|
||
|
|
<!-- B - Circulación -->
|
||
|
|
<rect x="135" y="220" width="180" height="70" rx="10" fill="url(#gradientB)"/>
|
||
|
|
<text x="225" y="255" font-family="Arial, sans-serif" font-size="40" font-weight="bold" fill="white" text-anchor="middle">B</text>
|
||
|
|
<text x="225" y="280" font-family="Arial, sans-serif" font-size="14" fill="white" text-anchor="middle">Circulación</text>
|
||
|
|
<!-- Icono corazón -->
|
||
|
|
<path d="M 200 240 Q 200 230, 210 240 Q 220 230, 240 240 Q 240 250, 225 260 Q 210 250, 200 240" fill="white" opacity="0.3"/>
|
||
|
|
|
||
|
|
<!-- Flecha descendente -->
|
||
|
|
<polygon points="225,300 232,315 218,315" fill="#f1f5f9"/>
|
||
|
|
|
||
|
|
<!-- C - Cerebro/Consciencia -->
|
||
|
|
<rect x="145" y="335" width="160" height="65" rx="10" fill="url(#gradientC)"/>
|
||
|
|
<text x="225" y="370" font-family="Arial, sans-serif" font-size="36" font-weight="bold" fill="white" text-anchor="middle">C</text>
|
||
|
|
<text x="225" y="390" font-family="Arial, sans-serif" font-size="13" fill="white" text-anchor="middle">Cerebro / Consciencia</text>
|
||
|
|
<!-- Icono cerebro -->
|
||
|
|
<ellipse cx="200" cy="360" rx="12" ry="8" fill="white" opacity="0.3"/>
|
||
|
|
<ellipse cx="250" cy="360" rx="12" ry="8" fill="white" opacity="0.3"/>
|
||
|
|
|
||
|
|
<!-- Flecha descendente -->
|
||
|
|
<polygon points="225,410 230,420 220,420" fill="#f1f5f9"/>
|
||
|
|
|
||
|
|
<!-- D - Exposición/Entorno -->
|
||
|
|
<rect x="155" y="440" width="140" height="60" rx="10" fill="url(#gradientD)"/>
|
||
|
|
<text x="225" y="470" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white" text-anchor="middle">D</text>
|
||
|
|
<text x="225" y="490" font-family="Arial, sans-serif" font-size="12" fill="white" text-anchor="middle">Exposición / Entorno</text>
|
||
|
|
<!-- Icono exposición -->
|
||
|
|
<rect x="200" y="455" width="50" height="20" rx="3" fill="white" opacity="0.3"/>
|
||
|
|
|
||
|
|
<!-- Flecha descendente -->
|
||
|
|
<polygon points="225,510 228,518 222,518" fill="#f1f5f9"/>
|
||
|
|
|
||
|
|
<!-- E - Evaluación Continua -->
|
||
|
|
<rect x="165" y="535" width="120" height="55" rx="10" fill="url(#gradientE)"/>
|
||
|
|
<text x="225" y="565" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="white" text-anchor="middle">E</text>
|
||
|
|
<text x="225" y="580" font-family="Arial, sans-serif" font-size="11" fill="white" text-anchor="middle">Evaluación Continua</text>
|
||
|
|
<!-- Icono ciclo -->
|
||
|
|
<circle cx="225" cy="560" r="8" fill="none" stroke="white" stroke-width="2" opacity="0.3"/>
|
||
|
|
<path d="M 225 552 A 8 8 0 0 1 225 568" fill="none" stroke="white" stroke-width="2" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Texto Explicativo Inferior -->
|
||
|
|
<rect x="100" y="860" width="1000" height="200" rx="15" fill="#0f172a" stroke="#334155" stroke-width="2"/>
|
||
|
|
<text x="600" y="900" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#f1f5f9" text-anchor="middle">Estructura Mental de Priorización</text>
|
||
|
|
<text x="600" y="930" font-family="Arial, sans-serif" font-size="16" fill="#cbd5e1" text-anchor="middle" style="max-width: 900px;">
|
||
|
|
El ABCDE no es un checklist, sino una estructura mental que organiza tu pensamiento
|
||
|
|
</text>
|
||
|
|
<text x="600" y="960" font-family="Arial, sans-serif" font-size="16" fill="#cbd5e1" text-anchor="middle" style="max-width: 900px;">
|
||
|
|
bajo estrés. Cada nivel debe evaluarse antes de pasar al siguiente.
|
||
|
|
</text>
|
||
|
|
<text x="600" y="1000" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#22c55e" text-anchor="middle">Aplicable a TODAS las emergencias prehospitalarias</text>
|
||
|
|
|
||
|
|
<!-- Advertencia -->
|
||
|
|
<rect x="100" y="1100" width="1000" height="120" rx="15" fill="#1e293b" stroke="#f59e0b" stroke-width="2"/>
|
||
|
|
<text x="600" y="1135" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#fbbf24" text-anchor="middle">⚠ Esta guía es para formación y comprensión</text>
|
||
|
|
<text x="600" y="1165" font-family="Arial, sans-serif" font-size="16" fill="#fcd34d" text-anchor="middle">Para acción inmediata, consulta el Protocolo Operativo ABCDE</text>
|
||
|
|
|
||
|
|
<!-- Badge Modo Operativo (inferior) -->
|
||
|
|
<rect x="400" y="1250" width="400" height="50" rx="25" fill="#dc2626" opacity="0.9"/>
|
||
|
|
<text x="600" y="1280" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="white" text-anchor="middle">Modo Operativo</text>
|
||
|
|
|
||
|
|
<!-- Contexto visual: Escena de emergencia (sutil) -->
|
||
|
|
<g opacity="0.2">
|
||
|
|
<rect x="50" y="1350" width="1100" height="200" rx="10" fill="#334155"/>
|
||
|
|
<circle cx="200" cy="1450" r="30" fill="#475569"/>
|
||
|
|
<circle cx="1000" cy="1450" r="25" fill="#475569"/>
|
||
|
|
<rect x="500" y="1420" width="200" height="60" rx="5" fill="#475569"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Texto final -->
|
||
|
|
<text x="600" y="1520" font-family="Arial, sans-serif" font-size="14" fill="#64748b" text-anchor="middle">Guía de Refuerzo - ABCDE Operativo</text>
|
||
|
|
<text x="600" y="1550" font-family="Arial, sans-serif" font-size="12" fill="#475569" text-anchor="middle">Estructura mental de priorización para emergencias prehospitalarias</text>
|
||
|
|
</svg>
|
||
|
|
|