Spaces:
Running
Running
File size: 10,654 Bytes
b3bcfa4 c7b38a7 b3bcfa4 c7b38a7 b3bcfa4 c7b38a7 b3bcfa4 c7b38a7 b3bcfa4 c7b38a7 b3bcfa4 c7b38a7 b3bcfa4 0fcdb99 c7b38a7 b3bcfa4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 |
<!DOCTYPE html>
<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-amber-800 flex items-center justify-center">
<i class="fas fa-pills mr-3 text-amber-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>
<!-- Botón volver -->
<div class="flex justify-end mb-4">
<a href="../index.html" class="border border-gray-500 text-gray-700 hover:bg-gray-100 px-4 py-2 rounded-lg flex items-center transition-colors text-sm">
<i class="fas fa-arrow-left mr-2"></i>Volver al Asistente
</a>
</div>
<div class="bg-amber-50 p-6 rounded-lg mb-6 border border-amber-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-amber-700 hover:underline">
<i class="fas fa-file-pdf mr-1"></i>Ver algoritmo completo (PDF)
</a>
</div>
<!-- Créditos -->
<div class="text-center mt-8 pt-6 border-t border-gray-200">
<p class="text-gray-600 text-sm">
Desarrollado por el Dr. Antonio J. Arnal Meinhardt<br />
<span class="text-xs">Médico de Urgencias | Atención Primaria</span>
</p>
</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> |