Spaces:

aarnal80
/

GDPSalgoritmo

Running

File size: 10,184 Bytes

<!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-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="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 &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>