planetazuzu
1a7f9ae008
- Organizar 48 imágenes en public/assets/infografias/ por bloques - Adaptar MarkdownViewer para procesar rutas de imágenes automáticamente - Actualizar Service Worker para cachear imágenes (offline-first) - Configurar Vite para incluir imágenes en build - Crear documentación: guías de integración, sugerencias de medios, estado de imágenes - Scripts de organización automática de imágenes Cambios técnicos: - MarkdownViewer normaliza rutas de imágenes (relativas → absolutas) - Service Worker cachea /assets/infografias/ automáticamente - Vite config actualizado para mantener estructura de carpetas - 48 imágenes organizadas: bloque-0 (9), bloque-2 (27), bloque-3 (9), bloque-7 (1), bloque-12 (2) Documentación: - GUIA_INTEGRAR_IMAGENES_PWA.md - GUIA_RUTAS_IMAGENES_MARKDOWN.md - SUGERENCIAS_MEDIOS_VISUALES.md - IMAGENES_NECESARIAS.md - ESTADO_FINAL_IMAGENES_PWA.md - RESUMEN_ORGANIZACION_IMAGENES.md
112 lines
5.1 KiB
XML
112 lines
5.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="820" viewBox="0 0 1400 820" role="img" aria-label="Plantilla genérica de diagrama de flujo médico para protocolos avanzados de emergencia">
|
|
<defs>
|
|
<style>
|
|
.title{font:800 34px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#111827}
|
|
.sub{font:500 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#4b5563}
|
|
.box{fill:#ffffff;stroke:#d1d5db;stroke-width:2}
|
|
.boxH{fill:#f8fafc}
|
|
.step{font:700 18px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#111827}
|
|
.desc{font:500 13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#374151}
|
|
.iconStroke{stroke:#374151;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
|
.iconFill{fill:#374151}
|
|
.arrow{stroke:#6b7280;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
|
.note{font:500 12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#6b7280}
|
|
.critical{stroke-dasharray:6 4}
|
|
</style>
|
|
|
|
<marker id="arrowHead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#6b7280"></path>
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect x="0" y="0" width="1400" height="820" fill="#ffffff"></rect>
|
|
|
|
<!-- Title -->
|
|
<text class="title" x="60" y="64">Plantilla de Diagrama de Flujo Médico</text>
|
|
<text class="sub" x="60" y="92">
|
|
Estructura base reutilizable para protocolos avanzados de emergencia (RCP avanzada, vía aérea, etc.)
|
|
</text>
|
|
|
|
<!-- GRID GUIDES (optional visual aid, can be removed) -->
|
|
<!-- <line x1="0" y1="200" x2="1400" y2="200" stroke="#f1f5f9"/> -->
|
|
|
|
<!-- STEP 1: Evaluación inicial -->
|
|
<g transform="translate(100,180)">
|
|
<rect class="box boxH" x="0" y="0" width="420" height="120" rx="16"></rect>
|
|
<text class="step" x="100" y="38">Evaluación inicial</text>
|
|
<text class="desc" x="100" y="66">ABC / SV / Escena segura</text>
|
|
<text class="desc" x="100" y="86">Nivel de consciencia, constantes</text>
|
|
|
|
<!-- Icon: corazón -->
|
|
<g transform="translate(36,36)">
|
|
<path class="iconStroke" d="M24 40C8 26 4 20 4 14a8 8 0 0 1 14-6l6 6 6-6a8 8 0 0 1 14 6c0 6-4 12-20 26Z"></path>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Arrow -->
|
|
<path class="arrow" marker-end="url(#arrowHead)" d="M520 240 H640"></path>
|
|
|
|
<!-- STEP 2: Decisión crítica -->
|
|
<g transform="translate(640,180)">
|
|
<rect class="box critical" x="0" y="0" width="420" height="120" rx="16"></rect>
|
|
<text class="step" x="100" y="38">Decisión crítica</text>
|
|
<text class="desc" x="100" y="66">¿Parada? ¿Vía aérea comprometida?</text>
|
|
<text class="desc" x="100" y="86">¿Inestabilidad grave?</text>
|
|
|
|
<!-- Icon: alerta -->
|
|
<g transform="translate(36,36)">
|
|
<path class="iconStroke" d="M24 6L2 42h44L24 6Z"></path>
|
|
<line class="iconStroke" x1="24" y1="18" x2="24" y2="28"></line>
|
|
<circle class="iconFill" cx="24" cy="34" r="2.5"></circle>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Down arrows (branching placeholder) -->
|
|
<path class="arrow" marker-end="url(#arrowHead)" d="M850 300 V380"></path>
|
|
<path class="arrow" marker-end="url(#arrowHead)" d="M850 300 V380" opacity="0"></path>
|
|
|
|
<!-- STEP 3: Actuación -->
|
|
<g transform="translate(100,420)">
|
|
<rect class="box" x="0" y="0" width="420" height="140" rx="16"></rect>
|
|
<text class="step" x="100" y="38">Actuación</text>
|
|
<text class="desc" x="100" y="66">RCP avanzada / manejo vía aérea</text>
|
|
<text class="desc" x="100" y="86">Fármacos / desfibrilación</text>
|
|
<text class="desc" x="100" y="106">Protocolos específicos</text>
|
|
|
|
<!-- Icon: pulmón -->
|
|
<g transform="translate(36,36)">
|
|
<path class="iconStroke" d="M24 6v36"></path>
|
|
<path class="iconStroke" d="M24 22c-6-8-14-8-18-2-4 6-2 18 10 22"></path>
|
|
<path class="iconStroke" d="M24 22c6-8 14-8 18-2 4 6 2 18-10 22"></path>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Arrow -->
|
|
<path class="arrow" marker-end="url(#arrowHead)" d="M520 490 H640"></path>
|
|
|
|
<!-- STEP 4: Reevaluación -->
|
|
<g transform="translate(640,420)">
|
|
<rect class="box boxH" x="0" y="0" width="420" height="140" rx="16"></rect>
|
|
<text class="step" x="100" y="38">Reevaluación</text>
|
|
<text class="desc" x="100" y="66">Respuesta al tratamiento</text>
|
|
<text class="desc" x="100" y="86">Constantes / ETCO₂ / ECG</text>
|
|
<text class="desc" x="100" y="106">¿Continuar o escalar?</text>
|
|
|
|
<!-- Icon: reloj -->
|
|
<g transform="translate(36,36)">
|
|
<circle class="iconStroke" cx="24" cy="24" r="18"></circle>
|
|
<line class="iconStroke" x1="24" y1="24" x2="24" y2="12"></line>
|
|
<line class="iconStroke" x1="24" y1="24" x2="34" y2="24"></line>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Feedback arrow (loop) -->
|
|
<path class="arrow" marker-end="url(#arrowHead)" d="M1060 490 C1180 490, 1180 240, 1060 240"></path>
|
|
|
|
<!-- Footer -->
|
|
<text class="note" x="60" y="780">
|
|
Plantilla base TES · Sustituir textos por acciones concretas según protocolo local · Diseñada para impresión o edición SVG.
|
|
</text>
|
|
</svg>
|