Spaces:

aarnal80
/

GDPSalgoritmo

Running

App Files Files Community

aarnal80 commited on May 4, 2025

Commit

cb5a6a6

verified ·

1 Parent(s): a2ec728

Update index.html

Browse files

Files changed (1) hide show

index.html +119 -152

index.html CHANGED Viewed

@@ -5,179 +5,146 @@
   <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="<7">HbA1c &lt;7 % (&lt;154 mg/dl)</option>
-          <option value="7-9">HbA1c 7–9 % (154‑212 mg/dl)</option>
-          <option value=">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."
     };
-    const conditionSelector = document.getElementById("conditionSelector");
-    const controlSelector = document.getElementById("controlSelector");
-    const display = document.getElementById("algo-display");
-    function updateDisplay() {
-      const cond = conditionSelector.value;
-      const ctrl = controlSelector.value;
-      let html = "";
-      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>`;
-      }
-      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>${controlMap[ctrl]}</p>`;
-      }
-      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>

   <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>