codigo0/imagenes-pendientes/BLOQUE_03_0A_guia_colocacion_dispositivos_oxigenoterapia.svg

323 lines
17 KiB
XML
Raw Normal View History

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1700" viewBox="0 0 1200 1700" role="img" aria-label="Colocación Correcta de Dispositivos de Oxigenoterapia - 6 pasos">
<defs>
<style>
.bg{fill:#fff}
.title{font:700 34px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#1f3b55}
.sub{font:500 15px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#3a5873}
.h{font:700 18px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#163246}
.t{font:600 14px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#23465f}
.tiny{font:500 13px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#2f516a}
.num{font:800 16px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;fill:#0e4f74}
.card{fill:#f5fbff;stroke:#5aa7d6;stroke-width:2.2}
.iconStroke{stroke:#3f90c1;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.iconFill{fill:#e8f5ff;stroke:#3f90c1;stroke-width:2.2}
.arrow{stroke:#3f90c1;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.badge{fill:#dff1ff;stroke:#3f90c1;stroke-width:2}
.shadow{filter:url(#shadow)}
</style>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#0b3756" flood-opacity="0.12"></feDropShadow>
</filter>
<marker id="arrowHead" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
<path d="M1,1 L11,6 L1,11" fill="none" stroke="#3f90c1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
</marker>
</defs>
<!-- Background -->
<rect class="bg" x="0" y="0" width="1200" height="1700"></rect>
<!-- Header -->
<text class="title" x="600" y="78" text-anchor="middle">Colocación Correcta de Dispositivos de Oxigenoterapia</text>
<text class="sub" x="600" y="110" text-anchor="middle">Serie ilustrada paso a paso (6) • Estilo flat sanitario • Paciente genérico • Textos cortos</text>
<!-- Layout constants (3 cols x 2 rows) -->
<!-- Cards: 360x620? Let's do 340x640-ish; but in 2 rows: 6 cards total -->
<!-- Card size -->
<!-- First row y=160, second row y=920 -->
<!-- x positions: 70, 420, 770 -->
<!-- card w=360 h=700 -->
<!-- We'll fit with margins -->
<!-- Card size -->
<!-- w=360 h=700 -->
<!-- Reusable patient icon (head + torso) -->
<!-- Step 1 -->
<g class="shadow">
<rect class="card" x="70" y="160" rx="22" ry="22" width="360" height="700"></rect>
</g>
<g transform="translate(95,185)">
<circle class="badge" cx="22" cy="22" r="18"></circle>
<text class="num" x="22" y="27" text-anchor="middle">1</text>
<text class="h" x="55" y="28">Evaluación inicial</text>
<text class="t" x="0" y="62">• ABC y nivel de conciencia</text>
<text class="t" x="0" y="84">• FR, esfuerzo respiratorio</text>
<text class="t" x="0" y="106">• SatO₂ y signos de hipoxemia</text>
<!-- Patient + stethoscope + monitor -->
<g transform="translate(25,140)">
<!-- patient -->
<circle class="iconFill" cx="110" cy="60" r="38"></circle>
<path class="iconFill" d="M60 140 C60 110,85 92,110 92 C135 92,160 110,160 140 L160 210 L60 210 Z"></path>
<!-- stethoscope -->
<path class="iconStroke" d="M50 110 C40 90,40 70,55 58"></path>
<path class="iconStroke" d="M170 110 C180 90,180 70,165 58"></path>
<path class="iconStroke" d="M110 118 C110 150,140 155,150 145"></path>
<circle class="iconFill" cx="156" cy="143" r="10"></circle>
<!-- pulse-ox monitor -->
<rect class="iconFill" x="190" y="30" rx="14" ry="14" width="110" height="90"></rect>
<path class="iconStroke" d="M205 80 L222 80 L232 60 L246 100 L260 75 L272 75"></path>
<text class="tiny" x="245" y="55" text-anchor="middle">SatO₂</text>
<!-- small arrow to imply check -->
<path class="arrow" d="M168 70 L190 70" marker-end="url(#arrowHead)"></path>
</g>
<text class="tiny" x="0" y="610">Clave: identificar hipoxemia y/o ventilación ineficaz.</text>
<text class="tiny" x="0" y="632">Registrar valores basales antes de iniciar O₂.</text>
</g>
<!-- Step 2 -->
<g class="shadow">
<rect class="card" x="420" y="160" rx="22" ry="22" width="360" height="700"></rect>
</g>
<g transform="translate(445,185)">
<circle class="badge" cx="22" cy="22" r="18"></circle>
<text class="num" x="22" y="27" text-anchor="middle">2</text>
<text class="h" x="55" y="28">Selección del dispositivo</text>
<text class="t" x="0" y="62">• Según SatO₂, FR y clínica</text>
<text class="t" x="0" y="84">• Objetivo de oxigenación</text>
<text class="t" x="0" y="106">• Escalar si no hay respuesta</text>
<!-- Devices icons row -->
<g transform="translate(10,150)">
<!-- nasal cannula -->
<rect class="iconFill" x="0" y="0" rx="18" ry="18" width="150" height="170"></rect>
<path class="iconStroke" d="M50 55 C55 40,75 40,80 55"></path>
<path class="iconStroke" d="M50 55 C40 80,45 110,65 125"></path>
<path class="iconStroke" d="M80 55 C90 80,85 110,65 125"></path>
<path class="iconStroke" d="M65 80 L65 94"></path>
<text class="tiny" x="75" y="152" text-anchor="middle">Gafas</text>
<!-- simple mask -->
<rect class="iconFill" x="170" y="0" rx="18" ry="18" width="150" height="170"></rect>
<path class="iconStroke" d="M245 40 C225 42,212 62,214 82 C216 106,232 122,245 124 C258 122,274 106,276 82 C278 62,265 42,245 40 Z"></path>
<path class="iconStroke" d="M214 80 L195 70"></path>
<path class="iconStroke" d="M276 80 L295 70"></path>
<text class="tiny" x="245" y="152" text-anchor="middle">Simple</text>
<!-- reservoir -->
<rect class="iconFill" x="0" y="190" rx="18" ry="18" width="150" height="170"></rect>
<path class="iconStroke" d="M75 230 C55 232,42 252,44 272 C46 296,62 312,75 314 C88 312,104 296,106 272 C108 252,95 232,75 230 Z"></path>
<path class="iconStroke" d="M44 270 L25 260"></path>
<path class="iconStroke" d="M106 270 L125 260"></path>
<path class="iconStroke" d="M60 325 C60 312,90 312,90 325 L90 350 C90 362,60 362,60 350 Z"></path>
<text class="tiny" x="75" y="342" text-anchor="middle">Reserv.</text>
<!-- BVM -->
<rect class="iconFill" x="170" y="190" rx="18" ry="18" width="150" height="170"></rect>
<path class="iconStroke" d="M220 310 C212 305,205 296,205 286 C205 272,216 264,229 266 C241 268,250 280,247 293 C245 304,232 314,220 310 Z"></path>
<path class="iconStroke" d="M247 294 L280 304 C291 308,297 321,292 332 C287 343,273 346,263 338 L242 325"></path>
<path class="iconStroke" d="M280 300 L305 288"></path>
<text class="tiny" x="245" y="342" text-anchor="middle">BVM</text>
<!-- arrows between device choices -->
<path class="arrow" d="M150 85 L170 85" marker-end="url(#arrowHead)"></path>
<path class="arrow" d="M245 170 L245 190" marker-end="url(#arrowHead)"></path>
<path class="arrow" d="M150 275 L170 275" marker-end="url(#arrowHead)"></path>
</g>
<text class="tiny" x="0" y="610">Idea: empezar con el mínimo efectivo y titular según respuesta.</text>
<text class="tiny" x="0" y="632">Si ventilación ineficaz → priorizar ventilación asistida.</text>
</g>
<!-- Step 3 -->
<g class="shadow">
<rect class="card" x="770" y="160" rx="22" ry="22" width="360" height="700"></rect>
</g>
<g transform="translate(795,185)">
<circle class="badge" cx="22" cy="22" r="18"></circle>
<text class="num" x="22" y="27" text-anchor="middle">3</text>
<text class="h" x="55" y="28">Preparación material y flujo</text>
<text class="t" x="0" y="62">• Verificar fuente de O₂</text>
<text class="t" x="0" y="84">• Conectar y purgar sistema</text>
<text class="t" x="0" y="106">• Ajustar caudal indicado</text>
<!-- O2 cylinder + flowmeter + tubing -->
<g transform="translate(20,150)">
<!-- cylinder -->
<rect class="iconFill" x="10" y="10" rx="22" ry="22" width="90" height="260"></rect>
<rect class="iconFill" x="25" y="-6" rx="10" ry="10" width="60" height="30"></rect>
<text class="tiny" x="55" y="80" text-anchor="middle">O₂</text>
<!-- flowmeter -->
<rect class="iconFill" x="130" y="40" rx="16" ry="16" width="160" height="120"></rect>
<circle class="iconFill" cx="160" cy="100" r="18"></circle>
<path class="iconStroke" d="M160 100 L175 88"></path>
<text class="tiny" x="250" y="78" text-anchor="middle">Caudalímetro</text>
<text class="tiny" x="250" y="100" text-anchor="middle">L/min</text>
<!-- tubing -->
<path class="iconStroke" d="M100 120 C120 120,120 100,130 100"></path>
<path class="iconStroke" d="M290 100 C320 100,325 120,310 140 C295 160,320 180,335 195"></path>
<!-- device connector -->
<rect class="iconFill" x="320" y="190" rx="14" ry="14" width="40" height="40"></rect>
<path class="iconStroke" d="M330 210 L350 210"></path>
<!-- arrows -->
<path class="arrow" d="M105 120 L130 100" marker-end="url(#arrowHead)"></path>
<path class="arrow" d="M290 100 L320 190" marker-end="url(#arrowHead)"></path>
</g>
<text class="tiny" x="0" y="610">Comprobar fugas y que el flujo es audible/visible.</text>
<text class="tiny" x="0" y="632">Reservorio: inflarlo antes de colocar (si aplica).</text>
</g>
<!-- Row arrows between cards (top row) -->
<path class="arrow" d="M430 510 L420 510" marker-end="url(#arrowHead)"></path>
<path class="arrow" d="M780 510 L770 510" marker-end="url(#arrowHead)"></path>
<!-- Step 4 -->
<g class="shadow">
<rect class="card" x="70" y="920" rx="22" ry="22" width="360" height="700"></rect>
</g>
<g transform="translate(95,945)">
<circle class="badge" cx="22" cy="22" r="18"></circle>
<text class="num" x="22" y="27" text-anchor="middle">4</text>
<text class="h" x="55" y="28">Colocación correcta</text>
<text class="t" x="0" y="62">• Posición cómoda (semi-Fowler)</text>
<text class="t" x="0" y="84">• Sellado adecuado (mascarillas)</text>
<text class="t" x="0" y="106">• Fijación sin compresión excesiva</text>
<!-- patient + mask placement with arrows -->
<g transform="translate(20,150)">
<!-- patient -->
<circle class="iconFill" cx="150" cy="70" r="40"></circle>
<path class="iconFill" d="M95 160 C95 125,122 100,150 100 C178 100,205 125,205 160 L205 235 L95 235 Z"></path>
<!-- mask -->
<path class="iconFill" d="M150 95 C130 98,118 115,120 132 C122 155,140 170,150 172 C160 170,178 155,180 132 C182 115,170 98,150 95 Z"></path>
<path class="iconStroke" d="M120 130 L95 118"></path>
<path class="iconStroke" d="M180 130 L205 118"></path>
<path class="iconStroke" d="M150 172 L150 190"></path>
<!-- straps -->
<path class="iconStroke" d="M122 120 C95 115,78 105,60 90"></path>
<path class="iconStroke" d="M178 120 C205 115,222 105,240 90"></path>
<!-- arrows showing placement -->
<path class="arrow" d="M65 70 L110 110" marker-end="url(#arrowHead)"></path>
<path class="arrow" d="M235 70 L190 110" marker-end="url(#arrowHead)"></path>
<text class="tiny" x="150" y="265" text-anchor="middle">Centrar sobre nariz y boca</text>
</g>
<text class="tiny" x="0" y="610">Gafas: puntas hacia abajo y ajustar bajo mentón si es necesario.</text>
<text class="tiny" x="0" y="632">BVM: sellado “CE” con dos manos si es posible.</text>
</g>
<!-- Step 5 -->
<g class="shadow">
<rect class="card" x="420" y="920" rx="22" ry="22" width="360" height="700"></rect>
</g>
<g transform="translate(445,945)">
<circle class="badge" cx="22" cy="22" r="18"></circle>
<text class="num" x="22" y="27" text-anchor="middle">5</text>
<text class="h" x="55" y="28">Ajuste y confort</text>
<text class="t" x="0" y="62">• Explicar el procedimiento</text>
<text class="t" x="0" y="84">• Ajustar bandas y puntos de presión</text>
<text class="t" x="0" y="106">• Humidificar si procede (tiempo)</text>
<!-- patient + comfort checks icons -->
<g transform="translate(25,150)">
<!-- patient -->
<circle class="iconFill" cx="150" cy="70" r="40"></circle>
<path class="iconFill" d="M95 160 C95 125,122 100,150 100 C178 100,205 125,205 160 L205 235 L95 235 Z"></path>
<!-- nasal cannula on patient -->
<path class="iconStroke" d="M130 92 C136 84,144 82,150 82 C156 82,164 84,170 92"></path>
<path class="iconStroke" d="M130 92 C120 110,120 135,138 150"></path>
<path class="iconStroke" d="M170 92 C180 110,180 135,162 150"></path>
<!-- speech bubble -->
<path class="iconFill" d="M240 35 rx"></path>
<path class="iconFill" d="M235 30 C235 14,250 4,268 4 L318 4 C336 4,351 14,351 30 L351 60 C351 76,336 86,318 86 L288 86 L272 100 L274 86 L268 86 C250 86,235 76,235 60 Z"></path>
<text class="tiny" x="293" y="38" text-anchor="middle">Respira</text>
<text class="tiny" x="293" y="56" text-anchor="middle">tranquilo</text>
<!-- comfort icons: strap + skin -->
<rect class="iconFill" x="20" y="260" rx="16" ry="16" width="120" height="70"></rect>
<path class="iconStroke" d="M40 295 C55 280,70 280,85 295 C100 310,115 310,130 295"></path>
<text class="tiny" x="80" y="320" text-anchor="middle">Ajuste</text>
<rect class="iconFill" x="160" y="260" rx="16" ry="16" width="170" height="70"></rect>
<path class="iconStroke" d="M185 305 C195 285,215 280,232 290 C248 299,270 296,285 286"></path>
<text class="tiny" x="245" y="320" text-anchor="middle">Piel / presión</text>
<!-- arrows -->
<path class="arrow" d="M210 105 L240 70" marker-end="url(#arrowHead)"></path>
</g>
<text class="tiny" x="0" y="610">Evitar fugas (mascarillas) y lesiones por presión (bandas).</text>
<text class="tiny" x="0" y="632">Si ansiedad: acompañar, explicar y reevaluar tolerancia.</text>
</g>
<!-- Step 6 -->
<g class="shadow">
<rect class="card" x="770" y="920" rx="22" ry="22" width="360" height="700"></rect>
</g>
<g transform="translate(795,945)">
<circle class="badge" cx="22" cy="22" r="18"></circle>
<text class="num" x="22" y="27" text-anchor="middle">6</text>
<text class="h" x="55" y="28">Verificación y respuesta</text>
<text class="t" x="0" y="62">• Comprobar SatO₂ y FR</text>
<text class="t" x="0" y="84">• Valorar trabajo respiratorio</text>
<text class="t" x="0" y="106">• Escalar / titular según clínica</text>
<!-- monitor + checklist + arrows -->
<g transform="translate(20,150)">
<!-- monitor -->
<rect class="iconFill" x="10" y="20" rx="18" ry="18" width="220" height="150"></rect>
<path class="iconStroke" d="M30 105 L60 105 L75 75 L95 135 L115 95 L135 95 L150 70 L165 110 L200 110"></path>
<text class="tiny" x="120" y="55" text-anchor="middle">SatO₂ / FR</text>
<!-- patient -->
<circle class="iconFill" cx="290" cy="70" r="36"></circle>
<path class="iconFill" d="M245 150 C245 120,267 100,290 100 C313 100,335 120,335 150 L335 220 L245 220 Z"></path>
<!-- simple mask on patient -->
<path class="iconFill" d="M290 95 C272 98,260 114,262 130 C264 150,280 164,290 166 C300 164,316 150,318 130 C320 114,308 98,290 95 Z"></path>
<path class="iconStroke" d="M262 128 L240 118"></path>
<path class="iconStroke" d="M318 128 L340 118"></path>
<!-- checklist -->
<rect class="iconFill" x="10" y="205" rx="18" ry="18" width="330" height="150"></rect>
<path class="iconStroke" d="M35 245 L55 265 L85 230"></path>
<path class="iconStroke" d="M35 285 L55 305 L85 270"></path>
<path class="iconStroke" d="M35 325 L55 345 L85 310"></path>
<path class="iconStroke" d="M105 245 L320 245"></path>
<path class="iconStroke" d="M105 285 L320 285"></path>
<path class="iconStroke" d="M105 325 L320 325"></path>
<text class="tiny" x="220" y="225" text-anchor="middle">Reevaluar • Registrar • Ajustar</text>
<!-- arrows between patient & monitor -->
<path class="arrow" d="M230 95 L250 95" marker-end="url(#arrowHead)"></path>
</g>
<text class="tiny" x="0" y="610">Si no mejora o empeora: revisar sellado/flujo y escalar dispositivo.</text>
<text class="tiny" x="0" y="632">Documentar tiempos, flujos, SatO₂ y cambios clínicos.</text>
</g>
<!-- Row arrows between cards (bottom row) -->
<path class="arrow" d="M430 1270 L420 1270" marker-end="url(#arrowHead)"></path>
<path class="arrow" d="M780 1270 L770 1270" marker-end="url(#arrowHead)"></path>
<!-- Big vertical flow arrows between rows -->
<path class="arrow" d="M600 860 L600 900" marker-end="url(#arrowHead)"></path>
<text class="sub" x="600" y="892" text-anchor="middle">Continuar secuencia</text>
<!-- Footer strip -->
<rect x="0" y="1650" width="1200" height="50" fill="#f5fbff"></rect>
<text class="sub" x="600" y="1682" text-anchor="middle">Uso educativo • Estilo flat sanitario • Paciente genérico sin rasgos identificables</text>
</svg>