docuneo:criteri_di_diagnosi_von [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>
/* Stili per il calcolatore Criteri VON 2024 */
.von-2024-calculator {
    font-family: Arial, sans-serif;
    max-width: 900px;
    margin: 20px auto;
    background: #fff;
    border: 3px solid #d32f2f;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.von-title {
    text-align: center;
    color: #d32f2f;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: bold;
    border-bottom: 4px solid #f44336;
    padding-bottom: 15px;
}

.von-subtitle {
    text-align: center;
    color: #424242;
    margin-bottom: 25px;
    font-size: 18px;
    font-style: italic;
}

.diagnostic-rule {
    background: #ffebee;
    border: 3px solid #d32f2f;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.diagnostic-rule h3 {
    margin-top: 0;
    color: #b71c1c;
    font-size: 20px;
    text-align: center;
}

.rule-text {
    font-size: 16px;
    font-weight: bold;
    color: #c62828;
    margin: 15px 0;
    text-align: center;
}

.criteria-requirement {
    background: #fff3e0;
    border: 2px solid #ff9800;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    text-align: center;
}

.criteria-requirement h4 {
    margin-top: 0;
    color: #ef6c00;
    font-size: 18px;
}

.requirement-text {
    font-size: 16px;
    font-weight: bold;
    color: #e65100;
}

.criteria-group {
    background: #f8f9fa;
    border: 2px solid #6c757d;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.group-header {
    background: linear-gradient(135deg, #d32f2f, #b71c1c);
    color: white;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-content {
    padding: 15px;
}

.criterion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin: 8px 0;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.criterion-item:hover {
    border-color: #f44336;
    box-shadow: 0 2px 4px rgba(244, 67, 54, 0.2);
}

.criterion-item.selected {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    border: 2px solid #d32f2f;
    box-shadow: 0 3px 8px rgba(211, 47, 47, 0.3);
    transform: translateX(5px);
}

.criterion-item.selected::before {
    content: "✓";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    background: #d32f2f;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.criterion-text {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #2c3e50;
    margin-right: 15px;
}

.criterion-item.selected .criterion-text {
    font-weight: bold;
    color: #b71c1c;
}

.criterion-status {
    background: #d32f2f;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    min-width: 80px;
    text-align: center;
}

.criterion-item.selected .criterion-status {
    background: #4caf50;
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.group-status {
    background: #d32f2f;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
}

.group-status.satisfied {
    background: #4caf50;
}

.results-section {
    margin-top: 30px;
    padding: 25px;
    border: 3px solid #d32f2f;
    border-radius: 15px;
    background: linear-gradient(135deg, #fff5f5, #ffebee);
}

.groups-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.summary-group {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    font-weight: bold;
    border: 3px solid;
}

.summary-group.satisfied {
    background: #c8e6c9;
    color: #2e7d32;
    border-color: #4caf50;
}

.summary-group.not-satisfied {
    background: #ffcdd2;
    color: #c62828;
    border-color: #f44336;
}

.diagnosis-result {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 25px 0;
    padding: 20px;
    border-radius: 10px;
    color: white;
}

.diagnosis-positive {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    animation: blink 1.5s ease-in-out infinite alternate;
}

.diagnosis-negative {
    background: linear-gradient(135deg, #4caf50, #388e3c);
}

@keyframes blink {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

.action-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.reset-btn {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
}

.reset-btn:hover {
    background: linear-gradient(135deg, #d32f2f, #b71c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

.print-btn {
    background: linear-gradient(135deg, #d32f2f, #b71c1c);
    color: white;
}

.print-btn:hover {
    background: linear-gradient(135deg, #b71c1c, #8e0000);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(211, 47, 47, 0.3);
}

.note-text {
    font-size: 14px;
    color: #666;
    font-style: italic;
    margin-top: 10px;
    text-align: center;
}

.context-note {
    background: #e3f2fd;
    border: 2px solid #2196f3;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    color: #1565c0;
    font-size: 14px;
}
</style>

<div class="von-2024-calculator">
    <h1 class="von-title">📋 Calcolatore Criteri VON 2024</h1>
    <div class="von-subtitle">Vermont Oxford Network - Diagnosi Enterocolite Necrotizzante</div>
    
    <!-- Regola Diagnostica -->
    <div class="diagnostic-rule">
        <h3>🎯 Criteri Diagnostici VON 2024</h3>
        <div class="rule-text">
            Rispondere <strong>"SÌ"</strong> se il neonato ha avuto Enterocolite Necrotizzante (NEC) diagnosticata in chirurgia, 
            all'esame post-mortem, o con criteri clinici e di imaging diagnostico utilizzando i seguenti criteri:
        </div>
        
        <!-- Requisiti -->
        <div class="criteria-requirement">
            <h4>📋 Requisiti per la Diagnosi</h4>
            <div class="requirement-text">
                Deve essere presente <strong>almeno UNO</strong> dei segni clinici
                <br><strong>E</strong><br>
                <strong>almeno UNO</strong> dei reperti di imaging diagnostico
            </div>
        </div>
        
        <div class="context-note">
            <strong>📝 Nota:</strong> Rispondere <strong>"NO"</strong> se il neonato non soddisfa la definizione di NEC sopra riportata.
        </div>
    </div>

    <!-- Gruppo 1: Segni Clinici -->
    <div class="criteria-group">
        <div class="group-header">
            <span>🩺 Segni Clinici (almeno UNO dei seguenti)</span>
            <span class="group-status" id="clinical-status">Non Soddisfatto</span>
        </div>
        <div class="group-content">
            <div class="criterion-item" onclick="toggleClinicalSign(this, 'bilious')">
                <span class="criterion-text">Aspirato gastrico biliare o vomito</span>
                <span class="criterion-status">PRESENTE</span>
            </div>
            <div class="criterion-item" onclick="toggleClinicalSign(this, 'distension')">
                <span class="criterion-text">Distensione addominale o scoloramento</span>
                <span class="criterion-status">PRESENTE</span>
            </div>
            <div class="criterion-item" onclick="toggleClinicalSign(this, 'blood')">
                <span class="criterion-text">Sangue occulto o evidente nelle feci (no ragadi)</span>
                <span class="criterion-status">PRESENTE</span>
            </div>
            <div class="note-text">
                📝 <strong>Nota:</strong> È sufficiente che sia presente UNO qualsiasi dei segni clinici sopra elencati
            </div>
        </div>
    </div>

    <!-- Gruppo 2: Imaging Diagnostico -->
    <div class="criteria-group">
        <div class="group-header">
            <span>🔬 Reperti di Imaging Diagnostico (almeno UNO dei seguenti)</span>
            <span class="group-status" id="imaging-status">Non Soddisfatto</span>
        </div>
        <div class="group-content">
            <div class="criterion-item" onclick="toggleImagingSign(this, 'pneumatosis')">
                <span class="criterion-text">Pneumatosi intestinalis</span>
                <span class="criterion-status">PRESENTE</span>
            </div>
            <div class="criterion-item" onclick="toggleImagingSign(this, 'hepato-biliary')">
                <span class="criterion-text">Gas epato-biliare</span>
                <span class="criterion-status">PRESENTE</span>
            </div>
            <div class="criterion-item" onclick="toggleImagingSign(this, 'pneumoperitoneum')">
                <span class="criterion-text">Pneumoperitoneo</span>
                <span class="criterion-status">PRESENTE</span>
            </div>
            <div class="note-text">
                📝 <strong>Nota:</strong> È sufficiente che sia presente UNO qualsiasi dei reperti di imaging sopra elencati
            </div>
        </div>
    </div>

    <!-- Sezione Risultati -->
    <div class="results-section">
        <h3 style="text-align: center; margin-top: 0; color: #d32f2f;">📊 Risultati Diagnostici VON 2024</h3>
        
        <!-- Riassunto Gruppi -->
        <div class="groups-summary">
            <div class="summary-group not-satisfied" id="clinical-summary">
                <div style="font-size: 18px;">🩺 Segni Clinici</div>
                <div style="margin: 10px 0;">❌ Non Soddisfatto</div>
                <div style="font-size: 14px;">Richiesto: almeno 1 segno</div>
            </div>
            <div class="summary-group not-satisfied" id="imaging-summary">
                <div style="font-size: 18px;">🔬 Imaging Diagnostico</div>
                <div style="margin: 10px 0;">❌ Non Soddisfatto</div>
                <div style="font-size: 14px;">Richiesto: almeno 1 reperto</div>
            </div>
        </div>
        
        <!-- Risultato Diagnostico -->
        <div id="diagnosis-result" class="diagnosis-result diagnosis-negative">
            🔍 DIAGNOSI VON: NO - Criteri insufficienti per NEC
        </div>
        
        <div class="action-buttons">
            <button class="action-btn reset-btn" onclick="resetCalculator()">🔄 Reset</button>
            <button class="action-btn print-btn" onclick="printResults()">🖨️ Stampa</button>
        </div>
    </div>
</div>

<script>
var clinicalSigns = {
    bilious: false,
    distension: false,
    blood: false
};

var imagingSigns = {
    pneumatosis: false,
    'hepato-biliary': false,
    pneumoperitoneum: false
};

function toggleClinicalSign(element, signType) {
    clinicalSigns[signType] = !clinicalSigns[signType];
    
    if (clinicalSigns[signType]) {
        element.classList.add('selected');
    } else {
        element.classList.remove('selected');
    }
    
    updateGroupStatus('clinical');
    updateDiagnosis();
}

function toggleImagingSign(element, signType) {
    imagingSigns[signType] = !imagingSigns[signType];
    
    if (imagingSigns[signType]) {
        element.classList.add('selected');
    } else {
        element.classList.remove('selected');
    }
    
    updateGroupStatus('imaging');
    updateDiagnosis();
}

function updateGroupStatus(groupType) {
    var satisfied = false;
    var statusElement, summaryElement;
    
    if (groupType === 'clinical') {
        // Verifica se almeno un segno clinico è presente
        for (var sign in clinicalSigns) {
            if (clinicalSigns[sign]) {
                satisfied = true;
                break;
            }
        }
        statusElement = document.getElementById('clinical-status');
        summaryElement = document.getElementById('clinical-summary');
        
    } else if (groupType === 'imaging') {
        // Verifica se almeno un reperto imaging è presente
        for (var sign in imagingSigns) {
            if (imagingSigns[sign]) {
                satisfied = true;
                break;
            }
        }
        statusElement = document.getElementById('imaging-status');
        summaryElement = document.getElementById('imaging-summary');
    }
    
    if (satisfied) {
        statusElement.textContent = 'Soddisfatto';
        statusElement.classList.add('satisfied');
        
        summaryElement.className = 'summary-group satisfied';
        if (groupType === 'clinical') {
            summaryElement.innerHTML = 
                '<div style="font-size: 18px;">🩺 Segni Clinici</div>' +
                '<div style="margin: 10px 0;">✅ Soddisfatto</div>' +
                '<div style="font-size: 14px;">Almeno 1 segno presente</div>';
        } else {
            summaryElement.innerHTML = 
                '<div style="font-size: 18px;">🔬 Imaging Diagnostico</div>' +
                '<div style="margin: 10px 0;">✅ Soddisfatto</div>' +
                '<div style="font-size: 14px;">Almeno 1 reperto presente</div>';
        }
    } else {
        statusElement.textContent = 'Non Soddisfatto';
        statusElement.classList.remove('satisfied');
        
        summaryElement.className = 'summary-group not-satisfied';
        if (groupType === 'clinical') {
            summaryElement.innerHTML = 
                '<div style="font-size: 18px;">🩺 Segni Clinici</div>' +
                '<div style="margin: 10px 0;">❌ Non Soddisfatto</div>' +
                '<div style="font-size: 14px;">Richiesto: almeno 1 segno</div>';
        } else {
            summaryElement.innerHTML = 
                '<div style="font-size: 18px;">🔬 Imaging Diagnostico</div>' +
                '<div style="margin: 10px 0;">❌ Non Soddisfatto</div>' +
                '<div style="font-size: 14px;">Richiesto: almeno 1 reperto</div>';
        }
    }
}

function updateDiagnosis() {
    // Verifica se almeno un segno clinico è presente
    var clinicalSatisfied = false;
    for (var sign in clinicalSigns) {
        if (clinicalSigns[sign]) {
            clinicalSatisfied = true;
            break;
        }
    }
    
    // Verifica se almeno un reperto imaging è presente
    var imagingSatisfied = false;
    for (var sign in imagingSigns) {
        if (imagingSigns[sign]) {
            imagingSatisfied = true;
            break;
        }
    }
    
    var diagnosisElement = document.getElementById('diagnosis-result');
    var diagnosisText, diagnosisClass;
    
    if (clinicalSatisfied && imagingSatisfied) {
        diagnosisText = '🔴 DIAGNOSI VON: SÌ - NEC confermata secondo criteri VON 2024';
        diagnosisClass = 'diagnosis-result diagnosis-positive';
    } else {
        var missingCriteria = [];
        if (!clinicalSatisfied) missingCriteria.push('segni clinici');
        if (!imagingSatisfied) missingCriteria.push('reperti imaging');
        
        diagnosisText = '🟢 DIAGNOSI VON: NO - Criteri insufficienti per NEC (mancano: ' + missingCriteria.join(', ') + ')';
        diagnosisClass = 'diagnosis-result diagnosis-negative';
    }
    
    diagnosisElement.textContent = diagnosisText;
    diagnosisElement.className = diagnosisClass;
}

function resetCalculator() {
    // Reset segni clinici
    for (var sign in clinicalSigns) {
        clinicalSigns[sign] = false;
    }
    
    // Reset imaging
    for (var sign in imagingSigns) {
        imagingSigns[sign] = false;
    }
    
    // Rimuovi tutte le selezioni visive
    var allItems = document.querySelectorAll('.criterion-item');
    for (var i = 0; i < allItems.length; i++) {
        allItems[i].classList.remove('selected');
    }
    
    // Reset status gruppi
    updateGroupStatus('clinical');
    updateGroupStatus('imaging');
    
    // Aggiorna diagnosi
    updateDiagnosis();
}

function printResults() {
    window.print();
}

// Inizializzazione
updateGroupStatus('clinical');
updateGroupStatus('imaging');
updateDiagnosis();
</script>
</html>