@jjlmoya/utils-health 1.1.0

package/src/tool/bloodUnitConverter/component.astro

@@ -0,0 +1,915 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { BloodUnitConverterUI } from './ui';
+
+interface Props {
+  ui?: Partial<BloodUnitConverterUI>;
+}
+
+const ui = (Astro.props.ui ?? {}) as BloodUnitConverterUI;
+
+interface AnalyteRange {
+  max: number | null;
+  labelKey: string;
+  status: string;
+}
+
+interface Analyte {
+  id: string;
+  nameKey: string;
+  icon: string;
+  factor: number;
+  ranges: AnalyteRange[];
+}
+
+const analytes: Analyte[] = [
+  {
+    id: 'glucosa',
+    nameKey: 'analyteGlucosa',
+    icon: 'mdi:water-percent',
+    factor: 18.016,
+    ranges: [
+      { max: 70,   labelKey: 'rangeBajo',       status: 'low'    },
+      { max: 100,  labelKey: 'rangeNormal',      status: 'normal' },
+      { max: 126,  labelKey: 'rangePrediabetes', status: 'border' },
+      { max: null, labelKey: 'rangeDiabetes',    status: 'high'   },
+    ],
+  },
+  {
+    id: 'colesterol-total',
+    nameKey: 'analyteColesterolTotal',
+    icon: 'mdi:heart-pulse',
+    factor: 38.67,
+    ranges: [
+      { max: 200,  labelKey: 'rangeDeseable', status: 'normal' },
+      { max: 240,  labelKey: 'rangeLimite',   status: 'border' },
+      { max: null, labelKey: 'rangeAlto',     status: 'high'   },
+    ],
+  },
+  {
+    id: 'hdl',
+    nameKey: 'analyteHdl',
+    icon: 'mdi:shield-check',
+    factor: 38.67,
+    ranges: [
+      { max: 40,   labelKey: 'rangeRiesgo',    status: 'high'   },
+      { max: 60,   labelKey: 'rangeAceptable', status: 'border' },
+      { max: null, labelKey: 'rangeExcelente', status: 'normal' },
+    ],
+  },
+  {
+    id: 'ldl',
+    nameKey: 'analyteLdl',
+    icon: 'mdi:alert-octagon',
+    factor: 38.67,
+    ranges: [
+      { max: 100,  labelKey: 'rangeOptimo',     status: 'normal' },
+      { max: 130,  labelKey: 'rangeCasiOptimo', status: 'normal' },
+      { max: 160,  labelKey: 'rangeLimite',     status: 'border' },
+      { max: 190,  labelKey: 'rangeAlto',       status: 'high'   },
+      { max: null, labelKey: 'rangeMuyAlto',    status: 'high'   },
+    ],
+  },
+  {
+    id: 'trigliceridos',
+    nameKey: 'analyteTriglic',
+    icon: 'mdi:chart-arc',
+    factor: 88.57,
+    ranges: [
+      { max: 150,  labelKey: 'rangeNormal',  status: 'normal' },
+      { max: 200,  labelKey: 'rangeLimite',  status: 'border' },
+      { max: 500,  labelKey: 'rangeAlto',    status: 'high'   },
+      { max: null, labelKey: 'rangeMuyAlto', status: 'high'   },
+    ],
+  },
+  {
+    id: 'creatinina',
+    nameKey: 'analyteCreatinina',
+    icon: 'mdi:test-tube',
+    factor: 11.312,
+    ranges: [
+      { max: 0.7,  labelKey: 'rangeBajo',    status: 'low'    },
+      { max: 1.3,  labelKey: 'rangeNormal',  status: 'normal' },
+      { max: null, labelKey: 'rangeElevado', status: 'high'   },
+    ],
+  },
+  {
+    id: 'urea',
+    nameKey: 'analyteUrea',
+    icon: 'mdi:flask-outline',
+    factor: 6.006,
+    ranges: [
+      { max: 10,   labelKey: 'rangeBajo',   status: 'low'    },
+      { max: 50,   labelKey: 'rangeNormal', status: 'normal' },
+      { max: null, labelKey: 'rangeAlto',   status: 'high'   },
+    ],
+  },
+];
+---
+
+<div class="buc" data-ui={JSON.stringify(ui)}>
+  <div class="buc__card">
+
+    
+    <div class="buc__header">
+      <span class="buc__header-icon"><Icon name="mdi:stethoscope" /></span>
+      <div>
+        <h2 class="buc__header-title" data-key="appTitle">Analítica Suite</h2>
+        <p class="buc__header-sub" data-key="appSubtitle">Conversor de unidades clínicas profesional</p>
+      </div>
+    </div>
+
+    
+    <div class="buc__section">
+      <span class="buc__section-title" data-key="sectionAnalyte">Seleccionar Analito</span>
+      <div class="buc__analyte-grid">
+        {analytes.map((a) => (
+          <button
+            class={`buc__analyte${a.id === 'glucosa' ? ' buc__analyte--active' : ''}`}
+            data-id={a.id}
+            data-factor={a.factor}
+            data-ranges={JSON.stringify(a.ranges)}
+          >
+            <span class="buc__analyte-icon"><Icon name={a.icon} /></span>
+            <span class="buc__analyte-label" data-key={a.nameKey}></span>
+          </button>
+        ))}
+      </div>
+    </div>
+
+    
+    <div class="buc__section buc__section--bordered">
+      <div class="buc__converter">
+        <div class="buc__input-group" id="buc-group-mg">
+          <label class="buc__input-label" for="buc-mg" data-key="labelMg">Masa (mg/dL)</label>
+          <div class="buc__input-wrap">
+            <input class="buc__input" id="buc-mg" type="number" placeholder="0.00" step="any" inputmode="decimal" />
+            <span class="buc__unit-tag">mg/dL</span>
+          </div>
+        </div>
+
+        <button class="buc__swap" id="buc-swap" aria-label="Cambiar dirección de conversión">
+          <span class="buc__swap-icon buc__swap-icon--h"><Icon name="mdi:swap-horizontal" /></span>
+          <span class="buc__swap-icon buc__swap-icon--v"><Icon name="mdi:swap-vertical" /></span>
+        </button>
+
+        <div class="buc__input-group" id="buc-group-mmol">
+          <label class="buc__input-label" for="buc-mmol" data-key="labelMmol">Molar (mmol/L)</label>
+          <div class="buc__input-wrap">
+            <input class="buc__input" id="buc-mmol" type="number" placeholder="0.00" step="any" inputmode="decimal" />
+            <span class="buc__unit-tag">mmol/L</span>
+          </div>
+        </div>
+      </div>
+
+      
+      <div class="buc__gauge">
+        <div class="buc__gauge-track">
+          <div class="buc__gauge-seg buc__gauge-seg--low"></div>
+          <div class="buc__gauge-seg buc__gauge-seg--normal"></div>
+          <div class="buc__gauge-seg buc__gauge-seg--border"></div>
+          <div class="buc__gauge-seg buc__gauge-seg--high"></div>
+          <div class="buc__gauge-marker" id="buc-gauge-marker"></div>
+        </div>
+        <div class="buc__gauge-status">
+          <span class="buc__status-text" id="buc-status" data-key="statusIdle">Analice un valor</span>
+        </div>
+      </div>
+    </div>
+
+    
+    <div class="buc__section buc__section--bordered">
+      <div class="buc__history-header">
+        <span class="buc__section-title" data-key="sectionHistory">Mi Historial</span>
+        <button class="buc__btn-add" id="buc-add">
+          <span class="buc__btn-icon"><Icon name="mdi:plus" /></span>
+          <span data-key="historyAdd">Añadir a Tabla</span>
+        </button>
+      </div>
+      <div class="buc__table-wrap">
+        <table class="buc__table" id="buc-table">
+          <thead>
+            <tr>
+              <th data-key="historyAnalyte">Analito</th>
+              <th data-key="historyMg">mg/dL</th>
+              <th data-key="historyMmol">mmol/L</th>
+              <th data-key="historyStatus">Estado</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody id="buc-tbody">
+            <tr class="buc__empty-row">
+              <td colspan="5" data-key="historyEmpty">No hay registros guardados</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    
+    <div class="buc__footer">
+      <span class="buc__footer-icon"><Icon name="mdi:information-outline" /></span>
+      <p class="buc__footer-text" data-key="disclaimerText">
+        Aviso Médico: herramienta informativa. No sustituye un diagnóstico profesional.
+      </p>
+    </div>
+
+  </div>
+
+  
+  <div class="buc__icon-cache" aria-hidden="true">
+    <span id="buc-icon-delete"><Icon name="mdi:close-circle-outline" /></span>
+  </div>
+</div>
+
+<style>
+  .buc {
+    --buc-accent: #3b82f6;
+    --buc-accent-dark: #2563eb;
+    --buc-bg: #fff;
+    --buc-border: #e2e8f0;
+    --buc-divider: rgba(226, 232, 240, 0.8);
+    --buc-text: #0f172a;
+    --buc-muted: #64748b;
+    --buc-input-bg: #f1f5f9;
+    --buc-header-bg: linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(37,99,235,0.04) 100%);
+    --buc-low:    #64748b;
+    --buc-normal: #10b981;
+    --buc-border-c: #f59e0b;
+    --buc-high:   #ef4444;
+
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 1rem;
+  }
+
+  
+  .buc__card {
+    background: var(--buc-bg);
+    border: 1px solid var(--buc-border);
+    border-radius: 2.5rem;
+    box-shadow: 0 25px 50px rgba(0,0,0,0.08);
+    overflow: hidden;
+  }
+
+  .buc__icon-cache { display: none; }
+
+  
+  .buc__section {
+    padding: 2.5rem;
+  }
+
+  .buc__section--bordered {
+    border-top: 1px solid var(--buc-divider);
+  }
+
+  .buc__section-title {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--buc-muted);
+    margin-bottom: 1.5rem;
+  }
+
+  
+  .buc__header {
+    padding: 2.5rem;
+    background: var(--buc-header-bg);
+    border-bottom: 1px solid var(--buc-divider);
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+  }
+
+  .buc__header-icon {
+    color: var(--buc-accent);
+    width: 3rem;
+    height: 3rem;
+    flex-shrink: 0;
+  }
+
+  .buc__header-icon svg { width: 100%; height: 100%; display: block; }
+
+  .buc__header-title {
+    font-size: 1.75rem;
+    font-weight: 800;
+    color: var(--buc-text);
+    margin: 0;
+  }
+
+  .buc__header-sub {
+    font-size: 0.9rem;
+    color: var(--buc-muted);
+    margin: 0.2rem 0 0;
+  }
+
+  
+  .buc__analyte-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    gap: 0.875rem;
+  }
+
+  .buc__analyte {
+    background: var(--buc-bg);
+    border: 1px solid var(--buc-border);
+    border-radius: 1.25rem;
+    padding: 1rem 0.75rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.45rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: var(--buc-text);
+  }
+
+  .buc__analyte:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+    border-color: var(--buc-accent);
+  }
+
+  .buc__analyte--active {
+    background: var(--buc-accent);
+    border-color: var(--buc-accent);
+    color: #fff;
+    box-shadow: 0 8px 20px rgba(59,130,246,0.3);
+  }
+
+  .buc__analyte-icon {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .buc__analyte-icon svg { width: 100%; height: 100%; display: block; }
+
+  .buc__analyte-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-align: center;
+    line-height: 1.2;
+  }
+
+  
+  .buc__converter {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: 1.25rem;
+    margin-bottom: 2rem;
+  }
+
+  .buc__input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .buc__input-label {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--buc-muted);
+  }
+
+  .buc__input-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .buc__input {
+    width: 100%;
+    background: var(--buc-input-bg);
+    border: 2px solid transparent;
+    border-radius: 1rem;
+    padding: 1rem 4.5rem 1rem 1.1rem;
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--buc-text);
+    outline: none;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+  }
+
+  .buc__input:focus {
+    background: var(--buc-bg);
+    border-color: var(--buc-accent);
+    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
+  }
+
+  .buc__input::-webkit-inner-spin-button,
+  .buc__input::-webkit-outer-spin-button { -webkit-appearance: none; }
+  .buc__input[type="number"] { -moz-appearance: textfield; }
+
+  .buc__unit-tag {
+    position: absolute;
+    right: 0.875rem;
+    font-size: 0.68rem;
+    font-weight: 800;
+    color: var(--buc-muted);
+    background: var(--buc-bg);
+    padding: 0.2rem 0.45rem;
+    border-radius: 0.4rem;
+    border: 1px solid var(--buc-border);
+    pointer-events: none;
+  }
+
+  .buc__swap {
+    width: 3.25rem;
+    height: 3.25rem;
+    border-radius: 50%;
+    background: var(--buc-input-bg);
+    border: 1px solid var(--buc-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--buc-text);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+  }
+
+  .buc__swap:hover, .buc__swap--active {
+    background: var(--buc-accent);
+    border-color: var(--buc-accent);
+    color: #fff;
+  }
+
+  .buc__swap:hover { transform: rotate(180deg); }
+
+  .buc__swap-icon {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+
+  .buc__swap-icon svg { width: 100%; height: 100%; display: block; }
+
+  .buc__swap-icon--v { display: none; }
+
+  
+  .buc__gauge-track {
+    height: 14px;
+    background: var(--buc-input-bg);
+    border-radius: 7px;
+    display: flex;
+    position: relative;
+    overflow: visible;
+    margin-bottom: 1.5rem;
+  }
+
+  .buc__gauge-seg {
+    height: 100%;
+    flex: 1;
+  }
+
+  .buc__gauge-seg--low    { background: var(--buc-low);      border-radius: 7px 0 0 7px; }
+  .buc__gauge-seg--normal { background: var(--buc-normal); }
+  .buc__gauge-seg--border { background: var(--buc-border-c); }
+  .buc__gauge-seg--high   { background: var(--buc-high);     border-radius: 0 7px 7px 0; }
+
+  .buc__gauge-marker {
+    position: absolute;
+    top: -8px;
+    left: 0%;
+    width: 30px;
+    height: 30px;
+    background: var(--buc-bg);
+    border: 5px solid var(--buc-accent);
+    border-radius: 50%;
+    transform: translateX(-50%);
+    transition: left 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
+    z-index: 2;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  }
+
+  .buc__gauge-status {
+    text-align: center;
+    min-height: 2rem;
+  }
+
+  .buc__status-text {
+    font-size: 1.2rem;
+    font-weight: 800;
+    color: var(--buc-muted);
+    transition: color 0.3s ease;
+  }
+
+  .buc :global(.buc__status--low)    { color: var(--buc-low); }
+  .buc :global(.buc__status--normal) { color: var(--buc-normal); }
+  .buc :global(.buc__status--border) { color: var(--buc-border-c); }
+  .buc :global(.buc__status--high)   { color: var(--buc-high); }
+
+  
+  .buc__history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
+
+  .buc__history-header .buc__section-title { margin-bottom: 0; }
+
+  .buc__btn-add {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(59,130,246,0.1);
+    color: var(--buc-accent);
+    border: none;
+    padding: 0.625rem 1.25rem;
+    border-radius: 0.875rem;
+    font-weight: 800;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .buc__btn-add:hover {
+    background: rgba(59,130,246,0.18);
+    transform: translateY(-1px);
+  }
+
+  .buc__btn-icon {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+
+  .buc__btn-icon svg { width: 100%; height: 100%; display: block; }
+
+  .buc__table-wrap {
+    overflow-x: auto;
+    border-radius: 1rem;
+    border: 1px solid var(--buc-border);
+  }
+
+  .buc__table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+    min-width: 520px;
+  }
+
+  .buc__table thead th {
+    padding: 1rem 1.25rem;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    font-weight: 800;
+    color: var(--buc-muted);
+    background: rgba(0,0,0,0.02);
+    border-bottom: 2px solid var(--buc-border);
+  }
+
+  .buc__table tbody td {
+    padding: 1rem 1.25rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+    border-bottom: 1px solid var(--buc-border);
+    color: var(--buc-text);
+  }
+
+  .buc__table tbody tr:last-child td { border-bottom: none; }
+
+  .buc__empty-row td {
+    text-align: center;
+    padding: 3rem;
+    color: var(--buc-muted);
+    font-style: italic;
+    font-weight: 400;
+  }
+
+  
+  :global(.buc__row-status) {
+    font-size: 0.8rem;
+    font-weight: 700;
+    padding: 0.25rem 0.75rem;
+    border-radius: 2rem;
+    display: inline-block;
+  }
+
+  :global(.buc__row-status--low)    { background: rgba(100,116,139,0.12); color: var(--buc-low); }
+  :global(.buc__row-status--normal) { background: rgba(16,185,129,0.12);  color: var(--buc-normal); }
+  :global(.buc__row-status--border) { background: rgba(245,158,11,0.12);  color: var(--buc-border-c); }
+  :global(.buc__row-status--high)   { background: rgba(239,68,68,0.12);   color: var(--buc-high); }
+
+  :global(.buc__row-delete) {
+    background: rgba(239,68,68,0.08);
+    border: none;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    color: var(--buc-high);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    padding: 0;
+  }
+
+  :global(.buc__row-delete) svg { width: 1.1rem; height: 1.1rem; display: block; }
+
+  :global(.buc__row-delete):hover {
+    background: var(--buc-high);
+    color: #fff;
+  }
+
+  
+  .buc__footer {
+    padding: 1.5rem 2.5rem;
+    background: rgba(0,0,0,0.02);
+    border-top: 1px solid var(--buc-divider);
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+
+  .buc__footer-icon {
+    color: var(--buc-accent);
+    width: 1.4rem;
+    height: 1.4rem;
+    flex-shrink: 0;
+    margin-top: 0.1rem;
+  }
+
+  .buc__footer-icon svg { width: 100%; height: 100%; display: block; }
+
+  .buc__footer-text {
+    font-size: 0.82rem;
+    line-height: 1.6;
+    color: var(--buc-muted);
+    margin: 0;
+  }
+
+  
+  :global(.theme-dark) .buc {
+    --buc-bg: #0f172a;
+    --buc-border: #1e293b;
+    --buc-divider: rgba(30,41,59,0.9);
+    --buc-text: #f8fafc;
+    --buc-muted: #94a3b8;
+    --buc-input-bg: #1e293b;
+    --buc-header-bg: linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(15,23,42,0.5) 100%);
+  }
+
+  :global(.theme-dark) .buc__analyte {
+    background: #1e293b;
+    border-color: #334155;
+  }
+
+  :global(.theme-dark) .buc__unit-tag {
+    background: #0f172a;
+    border-color: #334155;
+  }
+
+  :global(.theme-dark) .buc__input:focus {
+    background: #1e293b;
+  }
+
+  :global(.theme-dark) .buc__table thead th {
+    background: rgba(255,255,255,0.02);
+  }
+
+  :global(.theme-dark) .buc__footer {
+    background: rgba(255,255,255,0.02);
+  }
+
+  
+  @media (max-width: 768px) {
+    .buc__section { padding: 1.75rem 1.25rem; }
+    .buc__header   { padding: 1.75rem 1.25rem; }
+    .buc__footer   { padding: 1.25rem; }
+
+    .buc__converter {
+      grid-template-columns: 1fr;
+      gap: 1.25rem;
+    }
+
+    .buc__swap {
+      justify-self: center;
+    }
+
+    .buc__swap-icon--h { display: none; }
+    .buc__swap-icon--v { display: block; }
+
+    .buc__input { font-size: 1.25rem; }
+  }
+</style>
+
+<script>
+  interface BucUI {
+    appTitle?: string; appSubtitle?: string;
+    sectionAnalyte?: string; sectionHistory?: string;
+    labelMg?: string; labelMmol?: string;
+    swapAriaLabel?: string; statusIdle?: string;
+    analyteGlucosa?: string; analyteColesterolTotal?: string;
+    analyteHdl?: string; analyteLdl?: string;
+    analyteTriglic?: string; analyteCreatinina?: string; analyteUrea?: string;
+    rangeBajo?: string; rangeNormal?: string; rangeAlto?: string;
+    rangeMuyAlto?: string; rangeLimite?: string; rangeElevado?: string;
+    rangePrediabetes?: string; rangeDiabetes?: string; rangeDeseable?: string;
+    rangeRiesgo?: string; rangeAceptable?: string; rangeExcelente?: string;
+    rangeOptimo?: string; rangeCasiOptimo?: string;
+    historyAdd?: string; historyAnalyte?: string;
+    historyMg?: string; historyMmol?: string;
+    historyStatus?: string; historyEmpty?: string;
+    disclaimerText?: string;
+  }
+
+  interface AnalyteRange {
+    max: number | null;
+    labelKey: string;
+    status: string;
+  }
+
+  function applyUI(container: Element, ui: BucUI): void {
+    container.querySelectorAll<HTMLElement>('[data-key]').forEach((el) => {
+      const key = el.dataset.key as keyof BucUI;
+      const val = ui[key];
+      if (val) el.textContent = val;
+    });
+  }
+
+  function calcGaugePosition(mg: number, ranges: AnalyteRange[]): { pct: number; labelKey: string; status: string } {
+    const segSize = 100 / ranges.length;
+    for (let i = 0; i < ranges.length; i++) {
+      const range = ranges[i];
+      const prevMax = i > 0 ? (ranges[i - 1].max ?? 0) : 0;
+      if (range.max === null || mg < range.max) {
+        let pct: number;
+        if (range.max === null) {
+          pct = Math.min(i * segSize + segSize * 0.8, 97);
+        } else {
+          const offset = (mg - prevMax) / (range.max - prevMax);
+          pct = i * segSize + offset * segSize;
+        }
+        return { pct: Math.min(Math.max(pct, 0), 97), labelKey: range.labelKey, status: range.status };
+      }
+    }
+    const last = ranges[ranges.length - 1];
+    return { pct: 95, labelKey: last.labelKey, status: last.status };
+  }
+
+  // eslint-disable-next-line complexity, max-lines-per-function
+  function initBuc(container: Element): void {
+    const ui: BucUI = JSON.parse((container as HTMLElement).dataset.ui ?? '{}');
+    applyUI(container, ui);
+
+    const inputMg    = container.querySelector<HTMLInputElement>('#buc-mg');
+    const inputMmol  = container.querySelector<HTMLInputElement>('#buc-mmol');
+    const swapBtn    = container.querySelector<HTMLButtonElement>('#buc-swap');
+    const marker     = container.querySelector<HTMLElement>('#buc-gauge-marker');
+    const statusEl   = container.querySelector<HTMLElement>('#buc-status');
+    const addBtn     = container.querySelector<HTMLButtonElement>('#buc-add');
+    const tbody      = container.querySelector<HTMLElement>('#buc-tbody');
+    const deleteHtml = container.querySelector('#buc-icon-delete')?.innerHTML ?? '';
+
+    let factor = 18.016;
+    let ranges: AnalyteRange[] = JSON.parse(
+      container.querySelector<HTMLElement>('.buc__analyte--active')?.dataset.ranges ?? '[]'
+    );
+    let isMgToMmol = true;
+
+    // eslint-disable-next-line complexity
+    function updateStatus(mg: number): void {
+      if (!mg || isNaN(mg)) {
+        if (marker) marker.style.left = '0%';
+        if (statusEl) {
+          statusEl.textContent = ui.statusIdle ?? 'Analice un valor';
+          statusEl.className = 'buc__status-text';
+        }
+        return;
+      }
+      const result = calcGaugePosition(mg, ranges);
+      if (marker) marker.style.left = `${result.pct}%`;
+      if (statusEl) {
+        statusEl.textContent = ui[result.labelKey as keyof BucUI] ?? result.labelKey;
+        statusEl.className = `buc__status-text buc__status--${result.status}`;
+      }
+    }
+
+    function convertMgToMmol(valMg: number): void {
+      if (!isNaN(valMg)) {
+        if (inputMmol) inputMmol.value = (valMg / factor).toFixed(3);
+        updateStatus(valMg);
+      } else {
+        if (inputMmol) inputMmol.value = '';
+        updateStatus(NaN);
+      }
+    }
+
+    function convertMmolToMg(valMmol: number): void {
+      if (!isNaN(valMmol)) {
+        const mg = valMmol * factor;
+        if (inputMg) inputMg.value = mg.toFixed(3);
+        updateStatus(mg);
+      } else {
+        if (inputMg) inputMg.value = '';
+        updateStatus(NaN);
+      }
+    }
+
+    function convert(): void {
+      const valMg   = parseFloat(inputMg?.value ?? '');
+      const valMmol = parseFloat(inputMmol?.value ?? '');
+      if (isMgToMmol) {
+        convertMgToMmol(valMg);
+      } else {
+        convertMmolToMg(valMmol);
+      }
+    }
+
+    
+    container.querySelectorAll<HTMLElement>('.buc__analyte').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        container.querySelectorAll('.buc__analyte').forEach((b) => b.classList.remove('buc__analyte--active'));
+        btn.classList.add('buc__analyte--active');
+        factor = parseFloat(btn.dataset.factor ?? '1');
+        ranges = JSON.parse(btn.dataset.ranges ?? '[]');
+        convert();
+      });
+    });
+
+    inputMg?.addEventListener('input', () => { if (isMgToMmol) convert(); });
+    inputMmol?.addEventListener('input', () => { if (!isMgToMmol) convert(); });
+
+    swapBtn?.addEventListener('click', () => {
+      isMgToMmol = !isMgToMmol;
+      swapBtn.classList.toggle('buc__swap--active', !isMgToMmol);
+      convert();
+    });
+
+    function createDeleteCell(row: HTMLTableRowElement): HTMLTableCellElement {
+      const tdDel = document.createElement('td');
+      const delBtn = document.createElement('button');
+      delBtn.className = 'buc__row-delete';
+      delBtn.innerHTML = deleteHtml;
+      delBtn.setAttribute('aria-label', 'Delete');
+      delBtn.addEventListener('click', () => {
+        row.remove();
+        if (tbody && tbody.children.length === 0) {
+          const empty = document.createElement('tr');
+          empty.className = 'buc__empty-row';
+          const td = document.createElement('td');
+          td.setAttribute('colspan', '5');
+          td.textContent = ui.historyEmpty ?? 'No hay registros guardados';
+          empty.appendChild(td);
+          tbody.appendChild(empty);
+        }
+      });
+      tdDel.appendChild(delBtn);
+      return tdDel;
+    }
+
+    function createStatusCell(statusText: string, statusCls: string): HTMLTableCellElement {
+      const tdStatus = document.createElement('td');
+      const badge = document.createElement('span');
+      badge.className = `buc__row-status buc__row-status--${statusCls.replace('buc__status--', '')}`;
+      badge.textContent = statusText;
+      tdStatus.appendChild(badge);
+      return tdStatus;
+    }
+
+    function buildRowCells(data: { analyteName: string; valMg: string; valMmol: string; statusText: string; statusCls: string }, row: HTMLTableRowElement): void {
+      const tdAnalyte = document.createElement('td');
+      tdAnalyte.textContent = data.analyteName;
+      const tdMg = document.createElement('td');
+      tdMg.textContent = data.valMg;
+      const tdMmol = document.createElement('td');
+      tdMmol.textContent = data.valMmol;
+
+      row.appendChild(tdAnalyte);
+      row.appendChild(tdMg);
+      row.appendChild(tdMmol);
+      row.appendChild(createStatusCell(data.statusText, data.statusCls));
+      row.appendChild(createDeleteCell(row));
+    }
+
+    // eslint-disable-next-line complexity
+    function addHistoryRow(): void {
+      const valMg   = inputMg?.value;
+      const valMmol = inputMmol?.value;
+      const statusText = statusEl?.textContent ?? '';
+      const statusCls  = (statusEl?.className ?? '').replace('buc__status-text', '').trim();
+      const analyteName = container.querySelector<HTMLElement>('.buc__analyte--active .buc__analyte-label')?.textContent ?? '';
+
+      if (!valMg || !valMmol || !analyteName || statusText === (ui.statusIdle ?? '')) return;
+
+      tbody?.querySelector('.buc__empty-row')?.remove();
+
+      const row = document.createElement('tr');
+      buildRowCells({ analyteName, valMg, valMmol, statusText, statusCls }, row);
+      tbody?.appendChild(row);
+    }
+
+    addBtn?.addEventListener('click', addHistoryRow);
+
+    updateStatus(NaN);
+  }
+
+  document.querySelectorAll<HTMLElement>('.buc').forEach(initBuc);
+</script>