calcolo_iwl [DocuNeo]

Questa pagina è in sola lettura. Puoi visualizzare il sorgente, ma non puoi modificarlo. Contatta l'amministratore se pensi che ci sia un errore.
<html>
<style>
  .iwl-calculator {
    max-width: 1200px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
  }
  
  .iwl-header {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
  }
  
  .iwl-header h1 {
    margin: 0;
    color: #3498db;
    font-size: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }
  
  .iwl-header p {
    margin: 10px 0 0 0;
    color: #7f8c8d;
    font-size: 1.1em;
  }
  
  .iwl-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
  }
  
  @media (max-width: 768px) {
    .iwl-main-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .iwl-section {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  
  .iwl-section-patient {
    border-left: 4px solid #3498db;
  }
  
  .iwl-section-environment {
    border-left: 4px solid #27ae60;
  }
  
  .iwl-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: bold;
    color: #2c3e50;
  }
  
  .iwl-form-group {
    margin-bottom: 15px;
  }
  
  .iwl-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #34495e;
    font-size: 0.9em;
  }
  
  .iwl-input, .iwl-select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ecf0f1;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
  }
  
  .iwl-input:focus, .iwl-select:focus {
    outline: none;
    border-color: #3498db;
  }
  
  .iwl-checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .iwl-checkbox {
    width: auto !important;
    margin: 0;
  }
  
  .iwl-results {
    background: linear-gradient(135deg, #ebf4ff 0%, #e8f5e8 100%);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
  }
  
  .iwl-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: bold;
    color: #2c3e50;
  }
  
  .iwl-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .iwl-result-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  .iwl-result-value {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .iwl-result-value.primary { color: #3498db; }
  .iwl-result-value.success { color: #27ae60; }
  .iwl-result-value.info { color: #9b59b6; }
  
  .iwl-result-unit {
    font-size: 0.9em;
    color: #7f8c8d;
  }
  
  .iwl-corrections {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  .iwl-corrections h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
  }
  
  .iwl-corrections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    font-size: 0.9em;
  }
  
  .iwl-correction-item {
    padding: 5px;
  }
  
  .iwl-correction-value {
    font-weight: bold;
    color: #3498db;
  }
  
  .iwl-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
  }
  
  .iwl-warning-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  
  .iwl-warning h3 {
    margin: 0 0 10px 0;
    color: #856404;
  }
  
  .iwl-warning ul {
    margin: 0;
    padding-left: 20px;
    color: #856404;
  }
  
  .iwl-warning li {
    margin-bottom: 5px;
    font-size: 0.9em;
  }
  
  .iwl-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }
  
  .iwl-icon-large {
    width: 32px;
    height: 32px;
    fill: currentColor;
  }

  .iwl-daily-highlight {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-left: 4px solid #e74c3c;
  }

  .iwl-daily-value {
    font-size: 2.2em;
    font-weight: bold;
    color: #e74c3c;
    margin-bottom: 5px;
  }

  .iwl-peso-display {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
    text-align: center;
  }

  .toggle-button {
    background: #27ae60;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    margin: 20px auto;
    display: block;
  }

  .scientific-info {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    border-left: 4px solid #27ae60;
    margin: 20px 0;
    display: none;
  }

  .scientific-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background: white;
    border-radius: 5px;
    overflow: hidden;
  }

  .scientific-table th,
  .scientific-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .scientific-table th {
    background: #f1f1f1;
    font-weight: bold;
  }
</style>

<div class="iwl-calculator">
  <div class="iwl-header">
    <h1>
      <svg class="iwl-icon-large" viewBox="0 0 24 24">
        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
      </svg>
      Calcolatore IWL
    </h1>
    <p>Perdite di Acqua Insensibile nei Neonati Pretermine</p>
  </div>

  <div class="iwl-main-grid">
    <!-- Dati del Paziente -->
    <div class="iwl-section iwl-section-patient">
      <div class="iwl-section-title">
        <svg class="iwl-icon" viewBox="0 0 24 24">
          <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 5.5V9.5L21 11V9ZM3 13V11L9 9.5V13.5L3 15V13ZM13 7H11V9H13V7ZM13 11H11V13H13V11ZM13 15H11V17H13V15ZM13 19H11V21H13V19Z"/>
        </svg>
        Dati del Paziente
      </div>

      <div class="iwl-form-group">
        <label class="iwl-label">Età Gestazionale (settimane)</label>
        <input type="number" id="gestationalAge" class="iwl-input" min="22" max="42" step="0.1" placeholder="es. 26.5" value="28">
      </div>

      <div class="iwl-form-group">
        <label class="iwl-label">Peso Attuale (g)</label>
        <input type="number" id="weightGrams" class="iwl-input" min="300" max="5000" step="10" placeholder="es. 800" value="800">
      </div>

      <div class="iwl-form-group">
        <label class="iwl-label">Età Postnatale (giorni)</label>
        <input type="number" id="postnatalAge" class="iwl-input" min="0" max="365" placeholder="es. 3" value="2">
      </div>

      <div class="iwl-form-group">
        <label class="iwl-label">Temperatura Corporea (°C)</label>
        <input type="number" id="bodyTemp" class="iwl-input" min="35" max="40" step="0.1" value="36.5">
      </div>
    </div>

    <!-- Condizioni Ambientali -->
    <div class="iwl-section iwl-section-environment">
      <div class="iwl-section-title">
        <svg class="iwl-icon" viewBox="0 0 24 24">
          <path d="M17 12C17 7.5 13.5 4 9 4S1 7.5 1 12C1 16.5 4.5 20 9 20S17 16.5 17 12ZM9 18C5.7 18 3 15.3 3 12S5.7 6 9 6S15 8.7 15 12S12.3 18 9 18ZM9 8C7.3 8 6 9.3 6 11H8C8 10.4 8.4 10 9 10S10 10.4 10 11C10 12 9 11.8 9 13H10C10 11.2 12 11 12 9C12 7.3 10.7 6 9 6V8ZM8 15H10V17H8V15Z"/>
        </svg>
        Condizioni Assistenziali
      </div>

      <div class="iwl-form-group">
        <label class="iwl-label">Dispositivo di Assistenza</label>
        <select id="deviceType" class="iwl-select">
          <option value="incubator">Incubatrice Chiusa</option>
          <option value="radiant_warmer">Lettino Riscaldante</option>
          <option value="open_crib">Culla Aperta</option>
        </select>
      </div>

      <div class="iwl-form-group">
        <label class="iwl-label">Umidità Relativa (%)</label>
        <input type="number" id="humidity" class="iwl-input" min="20" max="95" value="60">
      </div>

      <div class="iwl-form-group">
        <label class="iwl-label">Temperatura Ambientale (°C)</label>
        <input type="number" id="ambientTemp" class="iwl-input" min="30" max="38" step="0.1" value="34">
      </div>

      <div class="iwl-form-group">
        <label class="iwl-label">Supporto Ventilatorio</label>
        <select id="ventilation" class="iwl-select">
          <option value="none">Respiro Spontaneo</option>
          <option value="heated_humidified">VM Gas Umidificati</option>
          <option value="non_humidified">VM Gas Non Umidificati</option>
          <option value="cpap">CPAP</option>
        </select>
      </div>

      <div class="iwl-form-group">
        <div class="iwl-checkbox-group">
          <input type="checkbox" id="phototherapy" class="iwl-checkbox">
          <label for="phototherapy" class="iwl-label">Fototerapia</label>
        </div>
      </div>
    </div>
  </div>

  <!-- Risultati -->
  <div id="results" class="iwl-results">
    <div class="iwl-results-title">
      <svg class="iwl-icon" viewBox="0 0 24 24">
        <path d="M12 2C11.5 2 11 2.5 11 3V4H13V3C13 2.5 12.5 2 12 2ZM21 11H20V13H21C21.5 13 22 12.5 22 12S21.5 11 21 11ZM3 11C2.5 11 2 11.5 2 12S2.5 13 3 13H4V11H3ZM5.5 6.5L6.9 5.1C7.3 4.7 7.3 4.1 6.9 3.7S5.9 3.3 5.5 3.7L4.1 5.1C3.7 5.5 3.7 6.1 4.1 6.5S5.1 6.9 5.5 6.5ZM19.9 18.3L18.5 16.9C18.1 16.5 17.5 16.5 17.1 16.9S16.7 17.9 17.1 18.3L18.5 19.7C18.9 20.1 19.5 20.1 19.9 19.7S20.3 18.7 19.9 18.3ZM12 5C8.1 5 5 8.1 5 12S8.1 19 12 19 19 15.9 19 12 15.9 5 12 5ZM12 17C9.2 17 7 14.8 7 12S9.2 7 12 7 17 9.2 17 12 14.8 17 12 17Z"/>
      </svg>
      Risultati del Calcolo
    </div>

    <div class="iwl-peso-display" id="pesoDisplay">Peso: 800 g</div>

    <div class="iwl-results-grid">
      <div class="iwl-result-card">
        <div id="iwlPerKgPerHour" class="iwl-result-value primary">2.0</div>
        <div class="iwl-result-unit">ml/kg/h</div>
      </div>
      <div class="iwl-result-card">
        <div id="iwlPerHour" class="iwl-result-value success">1.6</div>
        <div class="iwl-result-unit">ml/h totali</div>
      </div>
      <div class="iwl-daily-highlight">
        <div id="iwlPerDay" class="iwl-daily-value">38.4</div>
        <div class="iwl-result-unit">📅 ml/die totali</div>
      </div>
    </div>

    <div class="iwl-corrections">
      <h3>Fattori di Correzione Applicati:</h3>
      <div class="iwl-corrections-grid">
        <div class="iwl-correction-item">
          Fattore Base: <span id="baseFactor" class="iwl-correction-value">2.75</span>
        </div>
        <div class="iwl-correction-item">
          Età Postnatale: <span id="postnatalCorrection" class="iwl-correction-value">0.90</span>
        </div>
        <div class="iwl-correction-item">
          Dispositivo/Umidità: <span id="deviceCorrection" class="iwl-correction-value">0.70</span>
        </div>
        <div class="iwl-correction-item">
          Fototerapia: <span id="photoCorrection" class="iwl-correction-value">1.0</span>
        </div>
        <div class="iwl-correction-item">
          Ventilazione: <span id="ventCorrection" class="iwl-correction-value">1.0</span>
        </div>
        <div class="iwl-correction-item">
          Temperature: <span id="tempCorrection" class="iwl-correction-value">1.0</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Note Cliniche -->
  <div class="iwl-warning">
    <div class="iwl-warning-header">
      <svg class="iwl-icon" viewBox="0 0 24 24" style="color: #856404; margin-top: 2px; flex-shrink: 0;">
        <path d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z"/>
      </svg>
      <div>
        <h3>Note Cliniche Importanti</h3>
        <ul>
          <li>Questi calcoli forniscono una <strong>stima</strong> - il monitoraggio clinico rimane essenziale</li>
          <li>Le IWL variano significativamente tra pazienti individuali</li>
          <li>Considerare sempre bilancio idrico, elettroliti e funzione renale</li>
          <li>Valori normali: <strong>0.5-3.0 ml/kg/h</strong> a seconda delle condizioni</li>
          <li>In presenza di PDA, sepsi o altre patologie applicare correzioni aggiuntive</li>
        </ul>
      </div>
    </div>
  </div>

  <button class="toggle-button" onclick="toggleScientificInfo()">
    📚 Mostra Spiegazioni Scientifiche e Bibliografia
  </button>

  <div id="scientificInfo" class="scientific-info">
    <h2 style="color: #27ae60; margin-top: 0;">📊 Base Scientifica del Calcolatore IWL</h2>
    
    <h3>🧬 Formula e Algoritmo di Calcolo</h3>
    <div style="background: white; padding: 15px; border-radius: 5px; margin: 15px 0; font-family: monospace;">
      <strong>IWL (ml/kg/h) = Fattore Base × Correzione Età × Correzione Dispositivo × Correzione Fototerapia × Correzione Ventilazione × Correzione Temperature</strong>
    </div>

    <h3>📋 Fattori Base per Età Gestazionale</h3>
    <p><strong>Derivazione scientifica:</strong> Basati sui lavori pioneristici di <strong>Hammarlund & Sedin (1979-1983)</strong></p>
    
    <table class="scientific-table">
      <tr>
        <th>Età Gestazionale</th>
        <th>Fattore Base</th>
        <th>Riferimento</th>
        <th>Meccanismo</th>
      </tr>
      <tr>
        <td><strong>&lt; 28 settimane</strong></td>
        <td><strong>2.75 ml/kg/h</strong></td>
        <td>Hammarlund 1983</td>
        <td>Stratum corneum assente/minimo</td>
      </tr>
      <tr>
        <td><strong>28-30 settimane</strong></td>
        <td><strong>1.75 ml/kg/h</strong></td>
        <td>Bell & Oh 1994</td>
        <td>Barriera cutanea immatura</td>
      </tr>
      <tr>
        <td><strong>30-32 settimane</strong></td>
        <td><strong>1.25 ml/kg/h</strong></td>
        <td>Rutter 2000</td>
        <td>Maturazione progressiva</td>
      </tr>
      <tr>
        <td><strong>32-34 settimane</strong></td>
        <td><strong>0.90 ml/kg/h</strong></td>
        <td>Tang 1997</td>
        <td>Barriera quasi matura</td>
      </tr>
      <tr>
        <td><strong>&gt; 34 settimane</strong></td>
        <td><strong>0.70 ml/kg/h</strong></td>
        <td>Sedin 1985</td>
        <td>Funzione barriera normale</td>
      </tr>
    </table>

    <h3>📚 Bibliografia Essenziale</h3>
    <div style="background: white; padding: 15px; border-radius: 5px; font-size: 14px;">
      <ol>
        <li><strong>Hammarlund K, Sedin G.</strong> Transepidermal water loss in newborn infants. <em>Acta Paediatr Scand</em> 1979;68:795-801.</li>
        <li><strong>Bell EF, Oh W.</strong> Fluid and electrolyte balance in very low-birth-weight infants. <em>Clin Perinatol</em> 1994;21:405-422.</li>
        <li><strong>Rutter N.</strong> Clinical consequences of an immature barrier. <em>Semin Neonatol</em> 2000;5:281-287.</li>
        <li><strong>Modi N.</strong> Management of fluid balance in the very immature neonate. <em>Arch Dis Child Fetal Neonatal Ed</em> 2004;89:F108-F111.</li>
      </ol>
    </div>

    <div style="text-align: center; margin: 20px 0;">
      <button onclick="toggleScientificInfo()" style="background: #e74c3c; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
        ✖️ Chiudi Spiegazioni
      </button>
    </div>
  </div>
</div>

<script>
(function() {
  'use strict';
  
  // Elementi del DOM
  const elements = {
    gestationalAge: document.getElementById('gestationalAge'),
    postnatalAge: document.getElementById('postnatalAge'),
    weightGrams: document.getElementById('weightGrams'),
    bodyTemp: document.getElementById('bodyTemp'),
    deviceType: document.getElementById('deviceType'),
    humidity: document.getElementById('humidity'),
    ambientTemp: document.getElementById('ambientTemp'),
    phototherapy: document.getElementById('phototherapy'),
    ventilation: document.getElementById('ventilation'),
    results: document.getElementById('results'),
    iwlPerKgPerHour: document.getElementById('iwlPerKgPerHour'),
    iwlPerHour: document.getElementById('iwlPerHour'),
    iwlPerDay: document.getElementById('iwlPerDay'),
    pesoDisplay: document.getElementById('pesoDisplay'),
    baseFactor: document.getElementById('baseFactor'),
    postnatalCorrection: document.getElementById('postnatalCorrection'),
    deviceCorrection: document.getElementById('deviceCorrection'),
    photoCorrection: document.getElementById('photoCorrection'),
    ventCorrection: document.getElementById('ventCorrection'),
    tempCorrection: document.getElementById('tempCorrection')
  };

  // Funzione di calcolo delle IWL
  function calculateIWL() {
    const ga = parseFloat(elements.gestationalAge.value);
    const weightGrams = parseFloat(elements.weightGrams.value);
    const postnatalAge = parseInt(elements.postnatalAge.value) || 0;
    const bodyTemp = parseFloat(elements.bodyTemp.value);
    const ambientTemp = parseFloat(elements.ambientTemp.value);
    const humidity = parseFloat(elements.humidity.value);

    // Validazione input essenziali
    if (!ga || !weightGrams || ga < 22 || ga > 42 || weightGrams < 300 || weightGrams > 5000) {
      elements.results.style.display = 'none';
      return;
    }

    const weight = weightGrams / 1000; // Conversione a kg

    // Fattore base in base all'età gestazionale
    let baseFactor;
    if (ga < 28) baseFactor = 2.75;
    else if (ga < 30) baseFactor = 1.75;
    else if (ga < 32) baseFactor = 1.25;
    else if (ga < 34) baseFactor = 0.9;
    else baseFactor = 0.7;

    // Correzione per età postnatale
    let postnatalCorrection = Math.max(0.5, 1 - (postnatalAge * 0.05));

    // Correzione per tipo di dispositivo e umidità
    let deviceCorrection = 1;
    const deviceType = elements.deviceType.value;
    
    switch (deviceType) {
      case 'incubator':
        if (humidity >= 80) deviceCorrection = 0.5;
        else if (humidity >= 60) deviceCorrection = 0.7;
        else if (humidity >= 40) deviceCorrection = 0.9;
        else deviceCorrection = 1.2;
        break;
      case 'radiant_warmer':
        deviceCorrection = humidity < 30 ? 2.5 : 2.0;
        break;
      case 'open_crib':
        deviceCorrection = 1.5;
        break;
    }

    // Correzione per fototerapia
    let photoCorrection = elements.phototherapy.checked ? 1.3 : 1;

    // Correzione per ventilazione
    let ventCorrection = 1;
    const ventilation = elements.ventilation.value;
    
    switch (ventilation) {
      case 'heated_humidified':
        ventCorrection = 0.8;
        break;
      case 'non_humidified':
        ventCorrection = 1.3;
        break;
      case 'cpap':
        ventCorrection = 0.9;
        break;
    }

    // Correzione per temperature
    let tempCorrection = 1;
    
    // Temperatura corporea
    if (bodyTemp > 37.5) tempCorrection *= 1.2;
    else if (bodyTemp < 36) tempCorrection *= 1.1;
    
    // Gradiente termico
    const tempGradient = bodyTemp - ambientTemp;
    if (tempGradient > 4) tempCorrection *= 1.3;
    else if (tempGradient > 2.5) tempCorrection *= 1.1;
    else if (tempGradient < 1.5) tempCorrection *= 0.8;

    // Calcolo finale
    const iwlPerKgPerHour = baseFactor * postnatalCorrection * deviceCorrection * photoCorrection * ventCorrection * tempCorrection;
    const iwlPerHour = iwlPerKgPerHour * weight;
    const iwlPerDay = iwlPerHour * 24;

    // Aggiornamento risultati
    elements.pesoDisplay.textContent = 'Peso: ' + weightGrams + ' g';
    elements.iwlPerKgPerHour.textContent = iwlPerKgPerHour.toFixed(2);
    elements.iwlPerHour.textContent = iwlPerHour.toFixed(1);
    elements.iwlPerDay.textContent = iwlPerDay.toFixed(1);
    
    // Aggiornamento fattori di correzione
    elements.baseFactor.textContent = baseFactor.toFixed(2);
    elements.postnatalCorrection.textContent = postnatalCorrection.toFixed(2);
    elements.deviceCorrection.textContent = deviceCorrection.toFixed(2);
    elements.photoCorrection.textContent = photoCorrection.toFixed(2);
    elements.ventCorrection.textContent = ventCorrection.toFixed(2);
    elements.tempCorrection.textContent = tempCorrection.toFixed(2);

    // Mostra risultati
    elements.results.style.display = 'block';
  }

  // Event listeners per calcolo automatico
  Object.values(elements).forEach(element => {
    if (element && element.addEventListener) {
      element.addEventListener('input', calculateIWL);
      element.addEventListener('change', calculateIWL);
    }
  });

  // Calcolo iniziale
  calculateIWL();
})();

function toggleScientificInfo() {
  var info = document.getElementById('scientificInfo');
  var button = document.querySelector('.toggle-button');
  
  if (info.style.display === 'none' || info.style.display === '') {
    info.style.display = 'block';
    button.textContent = '📚 Nascondi Spiegazioni Scientifiche';
    button.style.background = '#e67e22';
  } else {
    info.style.display = 'none';
    button.textContent = '📚 Mostra Spiegazioni Scientifiche e Bibliografia';
    button.style.background = '#27ae60';
  }
}
</script>
</html>