Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Algoritmo DM2 – Guía Clínica</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" | |
| /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <style> | |
| body { | |
| background-color: #f8fafc; | |
| font-family: "Montserrat", sans-serif; | |
| } | |
| .custom-select { | |
| background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); | |
| background-position: right 0.5rem center; | |
| background-repeat: no-repeat; | |
| background-size: 1.5em 1.5em; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| padding-right: 2.5rem; | |
| width: 100%; | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.5rem; | |
| padding-left: 0.75rem; | |
| border-radius: 0.375rem; | |
| border: 1px solid #d1d5db; | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| font-size: 0.875rem; | |
| line-height: 1.25rem; | |
| } | |
| .custom-select:focus { | |
| outline: none; | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); | |
| } | |
| #algo-display { | |
| background-color: white; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.5rem; | |
| padding: 1.5rem; | |
| margin-top: 1rem; | |
| min-height: 300px; | |
| box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); | |
| overflow-y: auto; | |
| line-height: 1.6; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <div class="mx-auto max-w-2xl p-6 my-8 bg-white rounded-xl shadow-md"> | |
| <div class="text-center mb-6"> | |
| <h1 class="text-xl font-bold text-pink-800 flex items-center justify-center"> | |
| <i class="fas fa-syringe mr-3 text-teal-600"></i>Algoritmo Tratamiento DM2 | |
| </h1> | |
| <p class="text-gray-600 mt-2 text-sm leading-relaxed"> | |
| Basado en redGDPS 2023 | Hospital de Alcañiz | |
| </p> | |
| </div> | |
| <div | |
| class="bg-pink-50 p-6 rounded-lg mb-6 border border-pink-100 shadow-inner space-y-4" | |
| > | |
| <!-- Condición clínica predominante --> | |
| <div> | |
| <label | |
| for="conditionSelector" | |
| class="block text-xs font-medium text-gray-600 mb-1" | |
| >Condición clínica predominante (prioritario)</label | |
| > | |
| <select id="conditionSelector" class="custom-select text-sm"> | |
| <option value="">-- Ninguna / No aplica --</option> | |
| <option value="ECV">Enfermedad cardiovascular (ASCVD)</option> | |
| <option value="IC">Insuficiencia cardiaca</option> | |
| <option value="ERC">Enfermedad renal crónica</option> | |
| <option value="RCV">Elevado riesgo cardiovascular (≥3 FRCV)</option> | |
| <option value="OB">Obesidad (IMC >35 kg/m<sup>2</sup>)</option> | |
| <option value="FR">Fragilidad geriátrica</option> | |
| </select> | |
| </div> | |
| <!-- Control glucémico --> | |
| <div> | |
| <label | |
| for="controlSelector" | |
| class="block text-xs font-medium text-gray-600 mb-1" | |
| >Grado de control glucémico (HbA1c / GME)</label | |
| > | |
| <select id="controlSelector" class="custom-select text-sm"> | |
| <option value="">-- Seleccione HbA1c --</option> | |
| <option value="<7">HbA1c <7 % (<154 mg/dl)</option> | |
| <option value="7-9">HbA1c 7–9 % (154‑212 mg/dl)</option> | |
| <option value=">9">HbA1c >9 % (>212 mg/dl)</option> | |
| <option value="SYM">Hiperglucemia sintomática</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Resultado --> | |
| <div id="algo-display" class="text-gray-800"> | |
| <div class="text-center py-10 text-gray-400"> | |
| <i class="fas fa-notes-medical text-4xl mb-3"></i> | |
| <p>Seleccione una situación clínica y el grado de control.</p> | |
| </div> | |
| </div> | |
| <!-- Enlace al PDF completo --> | |
| <div class="text-center mt-6"> | |
| <a | |
| href="https://www.redgdps.org/gestor/upload/2023/Algoritmo_DM2_ESP_2023.pdf" | |
| target="_blank" | |
| class="text-sm text-pink-700 hover:underline" | |
| ><i class="fas fa-file-pdf mr-1"></i>Ver algoritmo completo (PDF)</a | |
| > | |
| </div> | |
| <script type="module"> | |
| // Mapas simplificados basados en redGDPS 2023 | |
| const conditionMap = { | |
| ECV: | |
| "Añada <span class=\"font-semibold\">iSGLT2</span> y/o <span class=\"font-semibold\">arGLP‑1</span> con evidencia en reducción de eventos cardiovasculares, independientemente de HbA1c. Considere mantener metformina si se tolera.", | |
| IC: | |
| "Priorice <span class=\"font-semibold\">iSGLT2</span> (dapagliflozina, empagliflozina) con o sin metformina. Evite tiazolidinedionas si IC avanzada. Valore añadir arGLP‑1 si HbA1c fuera de objetivo.", | |
| ERC: | |
| "Indique <span class=\"font-semibold\">iSGLT2</span> (FG ≥20 ml/min) y/o <span class=\"font-semibold\">arGLP‑1</span> (FG ≥15 ml/min). Ajuste/retire metformina si FG <45 ml/min.", | |
| RCV: | |
| "Si riesgo cardiovascular elevado, utilice <span class=\"font-semibold\">iSGLT2</span> y/o <span class=\"font-semibold\">arGLP‑1</span> con metformina como base.", | |
| OB: | |
| "Para IMC >35 kg/m<sup>2</sup> prefiera <span class=\"font-semibold\">arGLP‑1</span>; considere cirugía bariátrica. Valore iSGLT2 si esteatosis hepática.", | |
| FR: | |
| "Desintensifique o simplifique. Evite hipoglucemias. Prefiera <span class=\"font-semibold\">iDPP‑4</span>; considere retirar SU y repaglinida." | |
| }; | |
| const controlMap = { | |
| "<7": | |
| "Refuerce medidas no farmacológicas (alimentación, ejercicio, sueño) y mantenga <span class=\"font-semibold\">metformina</span> si se tolera. Reevaluar en 3–6 meses.", | |
| "7-9": | |
| "Inicie <span class=\"font-semibold\">terapia dual</span>: Metformina + otro ADNI según perfil (iSGLT2, arGLP‑1, iDPP‑4, pioglitazona o SU).", | |
| ">9": | |
| "Considere <span class=\"font-semibold\">terapia triple</span> o <span class=\"font-semibold\">insulinización basal</span> si HbA1c >9 % pese a doble terapia.", | |
| SYM: | |
| "Ante síntomas cardinales (poliuria, polidipsia, pérdida de peso), inicie <span class=\"font-semibold\">insulina</span> ± metformina y añada arGLP‑1 o iSGLT2 según tolerancia." | |
| }; | |
| // Diccionario de nombres de fármacos por familia | |
| const drugFamilyNames = { | |
| iSGLT2: [ | |
| "Dapagliflozina", | |
| "Empagliflozina", | |
| "Canagliflozina", | |
| "Ertugliflozina" | |
| ], | |
| "arGLP‑1": [ | |
| "Semaglutida", | |
| "Liraglutida", | |
| "Dulaglutida", | |
| "Exenatida XR" | |
| ], | |
| metformina: ["Metformina"], | |
| "iDPP‑4": [ | |
| "Sitagliptina", | |
| "Saxagliptina", | |
| "Linagliptina", | |
| "Alogliptina" | |
| ], | |
| insulina: [ | |
| "Insulina glargina", | |
| "Insulina degludec", | |
| "Insulina detemir" | |
| ], | |
| pioglitazona: ["Pioglitazona"], | |
| SU: ["Gliclazida", "Glimepirida", "Glibenclamida"], | |
| repaglinida: ["Repaglinida"] | |
| }; | |
| const conditionSelector = document.getElementById("conditionSelector"); | |
| const controlSelector = document.getElementById("controlSelector"); | |
| const display = document.getElementById("algo-display"); | |
| function extractFamilies(text) { | |
| const familiesFound = new Set(); | |
| Object.keys(drugFamilyNames).forEach((family) => { | |
| // Buscar la palabra exacta (ignorando mayúsculas/minúsculas y signos especiales) | |
| const regex = new RegExp(family.replace(/[-‑]/g, "[-‑]"), "i"); | |
| if (regex.test(text)) familiesFound.add(family); | |
| }); | |
| return familiesFound; | |
| } | |
| function buildDrugListHTML(families) { | |
| let list = "<ul class='list-disc ml-4'>"; | |
| families.forEach((f) => { | |
| const names = drugFamilyNames[f]; | |
| if (!names) return; | |
| list += `<li><span class='font-semibold'>${f}:</span> ${names.join(", ")}</li>`; | |
| }); | |
| list += "</ul>"; | |
| return list; | |
| } | |
| function updateDisplay() { | |
| const cond = conditionSelector.value; | |
| const ctrl = controlSelector.value; | |
| console.log("Condición seleccionada:", cond); | |
| console.log("Grado de control seleccionado:", ctrl); | |
| let html = ""; | |
| let combinedText = ""; // Para extraer familias | |
| if (cond && conditionMap[cond]) { | |
| html += `<h2 class='text-base font-bold mb-2 text-pink-700'><i class='fas fa-stethoscope mr-2'></i>Manejo según condición clínica</h2><p class='mb-4'>${conditionMap[cond]}</p>`; | |
| combinedText += conditionMap[cond] + " "; | |
| console.log("Recomendación condición:", conditionMap[cond]); | |
| } | |
| if (ctrl && controlMap[ctrl]) { | |
| html += `<h2 class='text-base font-bold mb-2 text-pink-700'><i class='fas fa-vials mr-2'></i>Manejo según HbA1c / GME</h2><p class='mb-4'>${controlMap[ctrl]}</p>`; | |
| combinedText += controlMap[ctrl] + " "; | |
| console.log("Recomendación HbA1c:", controlMap[ctrl]); | |
| } | |
| // Tercer bloque: lista de fármacos sugeridos | |
| const families = extractFamilies(combinedText); | |
| console.log("Familias detectadas:", Array.from(families)); | |
| if (families.size) { | |
| html += `<h2 class='text-base font-bold mb-2 text-pink-700'><i class='fas fa-pills mr-2'></i>Fármacos sugeridos</h2>${buildDrugListHTML(families)}`; | |
| } | |
| if (!html) { | |
| html = | |
| "<div class='text-center py-10 text-gray-400'><i class='fas fa-notes-medical text-4xl mb-3'></i><p>Seleccione una situación clínica y el grado de control.</p></div>"; | |
| } | |
| display.innerHTML = html; | |
| } | |
| conditionSelector.addEventListener("change", updateDisplay); | |
| controlSelector.addEventListener("change", updateDisplay); | |
| </script> | |
| </body> | |
| </html> | |