Spaces:

aarnal80
/

GDPSalgoritmo

Running

App Files Files Community

aarnal80 commited on May 4

Commit

b09975b

verified ·

1 Parent(s): cb5a6a6

Update index.html

Browse files

Files changed (1) hide show

index.html +224 -122

index.html CHANGED Viewed

@@ -5,146 +5,248 @@
   <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>
 </head>
-<body class="bg-gray-100 text-gray-800 min-h-screen flex flex-col p-4 md:p-6 lg:p-10">
-  <header class="mb-6 text-center">
-    <h1 class="text-3xl md:text-4xl font-bold mb-2">Algoritmo Terapéutico de la Diabetes Tipo 2 (redGDPS 2023)</h1>
-    <p class="text-sm md:text-base text-gray-600">Seleccione la condición clínica predominante o el rango de HbA1c para ver la recomendación.</p>
-  </header>
-  <!-- Controles de selección -->
-  <section
-    class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8 bg-white p-4 rounded-2xl shadow-sm">
-    <div>
-      <label for="condicion" class="block mb-1 font-medium">Condición clínica predominante</label>
-      <select id="condicion" class="w-full rounded-lg border-gray-300 p-2">
-        <option value="ninguna">Ninguna / No prioritaria</option>
-        <option value="ecv">Enfermedad Cardiovascular (ECV)</option>
-        <option value="ic">Insuficiencia Cardiaca (IC)</option>
-        <option value="erc">Enfermedad Renal Crónica (ERC)</option>
-        <option value="obesidad">Obesidad</option>
-        <option value="fragilidad">Fragilidad</option>
-      </select>
-    </div>
-    <div>
-      <label for="hba1c" class="block mb-1 font-medium">HbA1c (o GME equivalente)</label>
-      <select id="hba1c" class="w-full rounded-lg border-gray-300 p-2">
-        <option value="<7">&lt; 7 % (GME&nbsp;&lt;&nbsp;153 mg/dl)</option>
-        <option value="7-9">7 – 9 % (GME&nbsp;153‑212 mg/dl)</option>
-        <option value=">9">&gt; 9 % (GME&nbsp;&gt;&nbsp;212 mg/dl)</option>
-      </select>
-    </div>
-  </section>
-  <!-- Resultados -->
-  <section class="space-y-6">
-    <!-- Resultado por condición -->
-    <div id="resultado-condicion" class="hidden bg-white rounded-2xl shadow p-4">
-      <h2 class="text-xl font-semibold mb-2 flex items-center"><span class="mr-2">📋</span>Manejo según condición clínica</h2>
-      <p id="texto-condicion" class="leading-relaxed"></p>
     </div>
-    <!-- Resultado por HbA1c -->
-    <div id="resultado-hba1c" class="hidden bg-white rounded-2xl shadow p-4">
-      <h2 class="text-xl font-semibold mb-2 flex items-center"><span class="mr-2">🩸</span>Manejo según HbA1c</h2>
-      <p id="texto-hba1c" class="leading-relaxed"></p>
     </div>
-    <!-- NUEVO: Familias farmacológicas recomendadas -->
-    <div id="resultado-familias" class="hidden bg-white rounded-2xl shadow p-4">
-      <h2 class="text-xl font-semibold mb-2 flex items-center"><span class="mr-2">💊</span>Fármacos recomendados</h2>
-      <ul id="lista-familias" class="list-disc list-inside space-y-1"></ul>
     </div>
-  </section>
-  <!-- Enlace al PDF original -->
-  <footer class="mt-auto pt-6 text-center text-sm text-gray-500">
-    <a href="Algoritmo_DM2_ESP_2023.pdf" target="_blank" class="underline">Ver PDF completo del algoritmo</a>
-  </footer>
-  <!-- Lógica embebida -->
   <script type="module">
-    const condicionSelect = document.getElementById('condicion');
-    const hba1cSelect = document.getElementById('hba1c');
-    const resCond = document.getElementById('resultado-condicion');
-    const resHbA1c = document.getElementById('resultado-hba1c');
-    const resFamilias = document.getElementById('resultado-familias');
-    const txtCond = document.getElementById('texto-condicion');
-    const txtHbA1c = document.getElementById('texto-hba1c');
-    const listaFamilias = document.getElementById('lista-familias');
-    /* Mapas simplificados → puedes refinar con tu criterio clínico */
-    const manejoCondicion = {
-      ecv: 'Priorizar SGLT2‑i o GLP‑1 RA con evidencia cardiovascular.',
-      ic: 'Iniciar/añadir SGLT2‑i. Ajustar diuréticos/IECA según IC.',
-      erc: 'Priorizar SGLT2‑i con beneficio renal. Ajustar dosis según FG.',
-      obesidad: 'Añadir o intensificar GLP‑1 RA; considerar cirugía bariátrica.',
-      fragilidad: 'Preferir iDPP‑4 o insulinas basales de acción larga con bajo riesgo de hipoglucemia.',
-      ninguna: '',
     };
-    const manejoHbA1c = {
-      '<7': 'Continuar estilo de vida + Metformina en monoterapia. Revisar cada 3‑6 meses.',
-      '7-9': 'Escalada a doble terapia: Metformina + (SGLT2‑i, GLP‑1 RA o iDPP‑4 según profile).',
-      '>9': 'Considerar triple terapia o insulinización basal si síntomas. Educación intensiva.',
     };
-    const familiasPorClave = {
-      ecv: ['SGLT2‑i', 'GLP‑1 RA'],
-      ic: ['SGLT2‑i'],
-      erc: ['SGLT2‑i'],
-      obesidad: ['GLP‑1 RA'],
-      fragilidad: ['iDPP‑4', 'Insulina basal (dosis baja)'],
-      '<7': ['Metformina'],
-      '7-9': ['Metformina', 'SGLT2‑i', 'GLP‑1 RA', 'iDPP‑4'],
-      '>9': ['Metformina', 'Insulina basal', 'GLP‑1 RA', 'SGLT2‑i'],
     };
-    function actualizar() {
-      const condicion = condicionSelect.value;
-      const hba1c = hba1cSelect.value;
-      // Reset visibilidad
-      resCond.classList.add('hidden');
-      resHbA1c.classList.add('hidden');
-      resFamilias.classList.add('hidden');
-      listaFamilias.innerHTML = '';
-      if (condicion !== 'ninguna') {
-        // Mostrar manejo por condición
-        txtCond.textContent = manejoCondicion[condicion] ?? '';
-        resCond.classList.remove('hidden');
-        // Familias según condición
-        (familiasPorClave[condicion] ?? []).forEach(fam => {
-          const li = document.createElement('li');
-          li.textContent = fam;
-          listaFamilias.appendChild(li);
-        });
-        if (listaFamilias.childElementCount) resFamilias.classList.remove('hidden');
-      } else {
-        // Mostrar manejo por HbA1c
-        txtHbA1c.textContent = manejoHbA1c[hba1c] ?? '';
-        resHbA1c.classList.remove('hidden');
-        // Familias según HbA1c
-        (familiasPorClave[hba1c] ?? []).forEach(fam => {
-          const li = document.createElement('li');
-          li.textContent = fam;
-          listaFamilias.appendChild(li);
-        });
-        if (listaFamilias.childElementCount) resFamilias.classList.remove('hidden');
-      }
     }
-    condicionSelect.addEventListener('change', actualizar);
-    hba1cSelect.addEventListener('change', actualizar);
-    // Inicializar
-    actualizar();
   </script>
 </body>
 </html>

   <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 (&ge;3 FRCV)</option>
+          <option value="OB">Obesidad (IMC &gt;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&nbsp;/ GME)</label
+        >
+        <select id="controlSelector" class="custom-select text-sm">
+          <option value="">-- Seleccione HbA1c --</option>
+          <option value="&lt;7">HbA1c &lt;7 % (&lt;154 mg/dl)</option>
+          <option value="7-9">HbA1c 7–9 % (154‑212 mg/dl)</option>
+          <option value="&gt;9">HbA1c &gt;9 % (&gt;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="./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>
+  </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 &lt;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 &gt;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 &gt;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>