<?php
// FORMATO PEDIATRÍA (Refactorizado con Estilos MSP y Partials)
?>
<!-- Cargar Chart.js explícitamente ya que no está en el footer global -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<form name="formulariop" id="formulariop" method="POST">
    <input type="hidden" name="idatencion" id="idatencion" value="<?php echo $_POST['idatencion'] ?? ''; ?>">
    <input type="hidden" name="tipo_formato" value="PEDIATRIA">
    <!-- Campos ocultos compatibles con scripts anteriores -->
    <input type="hidden" name="idresultado" id="idresultado">
    <input type="hidden" name="idatencionp" id="idatencionp">
    <input type="hidden" name="idpersona" id="idpersona">

    <!-- ENCABEZADO OFICIAL -->
    <div class="msp-header"
        style="background-color: #00BCD4; color: white; padding: 10px; font-weight: bold; text-align: center; font-size: 1.2em; border-radius: 5px; margin-bottom: 20px;">
        HISTORIA CLÍNICA PEDIÁTRICA
    </div>

    <!-- DATOS DEL PACIENTE -->
    <?php include 'partials/patient_header.php'; ?>

    <div class="msp-container">

        <!-- RECORD DE VACUNACIÓN (Timeline) -->
        <div class="msp-section">
            <div class="msp-section-title" style="display:flex; justify-content:space-between; align-items:center;">
                RECORD DE VACUNACIÓN
                <span id="lbl-estado-vacunal-pediatria" class="badge bg-gray">Calculando...</span>
            </div>
            <div id="vaccine-timeline-pediatria"
                style="overflow-x: auto; white-space: nowrap; padding: 10px; border: 1px solid #eee; border-radius: 5px; min-height: 100px; background: #fff;">
                <p class="text-muted text-center" style="padding: 20px;">Cargando historial de vacunas...</p>
            </div>
        </div>

        <!-- ANTROPOMETRÍA Y SIGNOS VITALES (Custom para mantener IDs de gráficos) -->
        <div class="msp-section">
            <div class="msp-section-title">ANTROPOMETRÍA Y SIGNOS VITALES</div>
            <div class="msp-row">
                <div class="msp-col-3">
                    <label class="msp-field-label">Peso (Kg)</label>
                    <input type="text" class="msp-input" name="peso" id="peso" placeholder="Kg">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Talla (Cm)</label>
                    <input type="text" class="msp-input" name="talla" id="talla" placeholder="Cm">
                </div>
                <div class="msp-col-2">
                    <label class="msp-field-label">P. Cefálico (Cm)</label>
                    <input type="text" class="msp-input" name="perimetro_cefalico" id="perimetro_cefalico"
                        placeholder="Cm">
                </div>
                <div class="msp-col-2">
                    <label class="msp-field-label">P. Abdominal (Cm)</label>
                    <input type="text" class="msp-input" name="perimetro_abdominal" id="perimetro_abdominal"
                        placeholder="Cm">
                </div>
                <div class="msp-col-2">
                    <label class="msp-field-label">IMC</label>
                    <input type="text" class="msp-input" name="imc" id="imc" readonly
                        style="background-color: #f0f0f0;">
                </div>
            </div>
            <div class="msp-row msp-mt-10">
                <div class="msp-col-3">
                    <label class="msp-field-label">Temperatura (°C)</label>
                    <input type="text" class="msp-input" name="temperatura" id="temperatura">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">F. Respiratoria (x')</label>
                    <input type="text" class="msp-input" name="frecuencia_respiratoria" id="frecuencia_respiratoria">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">F. Cardíaca (x')</label>
                    <input type="text" class="msp-input" name="frecuencia_cardiaca" id="frecuencia_cardiaca">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Saturación (%)</label>
                    <input type="text" class="msp-input" name="saturacion" id="saturacion">
                </div>
            </div>
        </div>

        <!-- GRÁFICOS DE CRECIMIENTO (Manteniendo estructura para JS) -->
        <div class="msp-section">
            <div class="msp-section-title">CURVAS DE CRECIMIENTO (OMS 0-20 AÑOS)</div>
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab_peso_edad" data-toggle="tab">Peso/Edad</a></li>
                    <li><a href="#tab_talla_edad" data-toggle="tab">Talla/Edad</a></li>
                    <li><a href="#tab_imc_edad" data-toggle="tab">IMC/Edad</a></li>
                    <li><a href="#tab_pce_edad" data-toggle="tab">P. Cefálico/Edad</a></li>
                    <li><a href="#tab_peso_talla" data-toggle="tab">Peso/Talla</a></li>
                </ul>
                <div class="tab-content" style="border: 1px solid #ddd; padding: 10px; border-top: none;">
                    <div role="tabpanel" class="tab-pane active" id="tab_peso_edad">
                        <div class="chart-container" style="position: relative; height:40vh; width:100%">
                            <canvas id="chartPesoEdad"></canvas>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_talla_edad">
                        <div class="chart-container" style="position: relative; height:40vh; width:100%">
                            <canvas id="chartTallaEdad"></canvas>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_imc_edad">
                        <div class="chart-container" style="position: relative; height:40vh; width:100%">
                            <canvas id="chartImcEdad"></canvas>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_pce_edad">
                        <div class="chart-container" style="position: relative; height:40vh; width:100%">
                            <canvas id="chartPceEdad"></canvas>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_peso_talla">
                        <div class="chart-container" style="position: relative; height:40vh; width:100%">
                            <canvas id="chartPesoTalla"></canvas>
                        </div>
                        <p class="text-muted small text-center" style="margin-top:5px;">Curva Peso para Talla — OMS (eje X = talla en cm).</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- ANAMNESIS -->
        <div class="msp-section">
            <div class="msp-section-title">ANAMNESIS Y EXAMEN FÍSICO</div>

            <div class="msp-form-group">
                <label class="msp-field-label">Motivo de Consulta</label>
                <textarea class="msp-textarea" name="motivo_consulta" id="motivo_consulta" rows="2"></textarea>
            </div>

            <div class="msp-form-group">
                <label class="msp-field-label">Enfermedad Actual</label>
                <input type="text" class="msp-input" name="tiempo_enfermedad" id="tiempo_enfermedad">
            </div>

            <div class="msp-form-group">
                <label class="msp-field-label">Antecedentes Pediátricos (Perinatales, Patológicos, Familiares)</label>
                <textarea class="msp-textarea" name="antecedentes" id="antecedentes" rows="3"></textarea>
            </div>

            <div class="msp-row">
                <div class="msp-col-4">
                    <label class="msp-field-label">Vacunas Completas</label>
                    <select class="msp-select" name="vacunas_completas" id="vacunas_completas">
                        <option value="SI">SI</option>
                        <option value="NO">NO</option>
                    </select>
                </div>
                <div class="msp-col-4">
                    <label class="msp-field-label">Alergias</label>
                    <input type="text" class="msp-input" name="alergia" id="alergia" style="border-color: #F44336;">
                </div>
                <div class="msp-col-4">
                    <label class="msp-field-label">Desarrollo Psicomotor / Observaciones</label>
                    <input type="text" class="msp-input" name="intervenciones_quirurgicas"
                        id="intervenciones_quirurgicas">
                </div>
            </div>

            <div class="msp-form-group msp-mt-10">
                <label class="msp-field-label">Examen Físico</label>
                <textarea class="msp-textarea" name="examen_fisico" id="examen_fisico" rows="4"></textarea>
            </div>
        </div>

        <!-- DIAGNÓSTICO -->
        <?php include 'partials/diagnostics.php'; ?>

        <!-- PLAN Y TRATAMIENTO (Campo tratamiento estándar de resultado) -->
        <div class="msp-section">
            <div class="msp-section-title">PLAN Y TRATAMIENTO</div>
            <div class="msp-form-group">
                <label class="msp-field-label">Indicaciones Terapéuticas</label>
                <textarea class="msp-textarea" name="tratamiento" id="tratamiento" rows="3"></textarea>
            </div>
            <div class="msp-row">
                <div class="msp-col-6">
                    <label class="msp-field-label">Próxima Cita</label>
                    <input type="date" class="msp-input" name="proxima_cita" id="proxima_cita">
                </div>
            </div>
        </div>

        <!-- BOTONES -->
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="guardar"
            style="text-align: center; margin-top: 20px; display: none;">
            <button class="btn btn-primary btn-lg msp-btn-primary" type="submit" id="btnGuardarP">
                <i class="fa fa-save"></i> GUARDAR PEDIATRÍA
            </button>
            <button class="btn btn-danger btn-lg msp-btn-danger" onclick="cancelarform()" type="button">
                <i class="fa fa-arrow-circle-left"></i> Cancelar
            </button>
        </div>

    </div>
</form>

<script>
    // --- LÓGICA INTEGRADA DE GRÁFICOS OMS PARA PEDIATRÍA ---
    // (Incrustado para asegurar ejecución sin errores de carga externa)

    var globalOmsData = {};
    var globalHistorial = [];
    var globalCharts = {};

    function logEstadoGraficos(msg, tipo = 'info') {
        console.log("GRAFICOS: " + msg);
        // UI DEBUG DESACTIVADO POR PETICIÓN DE USUARIO
        // var $debug = $("#debug-chart-status");
        // if ($debug.length) {
        //     $debug.html('<div class="alert alert-' + tipo + '" style="padding: 5px; margin-bottom: 5px;">' + msg + '</div>');
        // }
    }

    // Inicializar Gráficos
    function initGraficosInternal(idpersona, sexo) {
        logEstadoGraficos("Cargando estándares OMS para sexo: " + sexo + "...", 'warning');

        if (typeof Chart === 'undefined') {
            logEstadoGraficos("ERROR: Chart.js no cargado.", 'danger');
            return;
        }

        $.when(
            $.ajax({ url: "../ajax/crecimiento.php?op=listar_oms", type: "POST", data: { tipo: "oms_pde", sexo: sexo } }), // Peso/Edad
            $.ajax({ url: "../ajax/crecimiento.php?op=listar_oms", type: "POST", data: { tipo: "oms_tde", sexo: sexo } }), // Talla/Edad
            $.ajax({ url: "../ajax/crecimiento.php?op=listar_oms", type: "POST", data: { tipo: "oms_imc", sexo: sexo } }), // IMC/Edad
            $.ajax({ url: "../ajax/crecimiento.php?op=listar_oms", type: "POST", data: { tipo: "oms_pce", sexo: sexo } }), // P.Cef/Edad
            $.ajax({ url: "../ajax/crecimiento.php?op=listar_oms", type: "POST", data: { tipo: "oms_pt", sexo: sexo } }),  // Peso/Talla
            $.ajax({ url: "../ajax/crecimiento.php?op=listar_historial", type: "POST", data: { idpersona: idpersona } })  // Historial
        ).done(function (r1, r2, r3, r4, r5, r6) {

            globalOmsData.pde = JSON.parse(r1[0]);
            globalOmsData.tde = JSON.parse(r2[0]);
            globalOmsData.imc = JSON.parse(r3[0]);
            globalOmsData.pce = JSON.parse(r4[0]);
            globalOmsData.pt  = JSON.parse(r5[0]);
            globalHistorial = JSON.parse(r6[0]);

            logEstadoGraficos("Datos OMS cargados correctamente.", 'success');

            // Renderizar inicial
            refreshChartsInternal();

        }).fail(function (err) {
            console.error(err);
            logEstadoGraficos("Error cargando datos del servidor. Revise consola.", 'danger');
        });
    }

    function refreshChartsInternal(manualPoint = null, currentIdAtencion = null) {
        if (!globalOmsData.pde) return;

        renderChartInternal('chartPesoEdad', 'Peso', 'kg', globalOmsData.pde, globalHistorial, 'peso', manualPoint, currentIdAtencion);
        renderChartInternal('chartTallaEdad', 'Talla', 'cm', globalOmsData.tde, globalHistorial, 'talla', manualPoint, currentIdAtencion);
        renderChartInternal('chartImcEdad', 'IMC', '', globalOmsData.imc, globalHistorial, 'imc', manualPoint, currentIdAtencion);
        renderChartInternal('chartPceEdad', 'P. Cefálico', 'cm', globalOmsData.pce, globalHistorial, 'perimetro_cefalico', manualPoint, currentIdAtencion);
        renderChartPesoTalla('chartPesoTalla', globalOmsData.pt, globalHistorial, manualPoint, currentIdAtencion);
    }

    // Renderiza curva Peso/Talla: eje X = talla (cm), eje Y = peso (kg)
    function renderChartPesoTalla(canvasId, omsData, patientData, manualPoint, currentIdAtencion) {
        var ctx = document.getElementById(canvasId);
        if (!ctx) return;
        if (globalCharts[canvasId]) globalCharts[canvasId].destroy();

        if (!omsData || omsData.length === 0) {
            var c = ctx.getContext('2d');
            ctx.height = 200;
            c.clearRect(0, 0, ctx.width, ctx.height);
            c.fillStyle = '#888';
            c.font = '14px Arial';
            c.textAlign = 'center';
            c.fillText('Tabla OMS peso/talla (oms_pt) sin datos en la base.', ctx.width / 2, 90);
            c.fillText('Importa los percentiles de la OMS para activar esta curva.', ctx.width / 2, 110);
            return;
        }

        var pF = function (v) { var n = parseFloat(v); return isNaN(n) ? null : n; };
        // En oms_pt, el campo "mes" se reutiliza como "talla_cm" (eje X)
        var keyTalla = (omsData[0].talla_cm !== undefined) ? 'talla_cm' : 'mes';

        var sd3 = omsData.map(function (e) { return { x: pF(e[keyTalla]), y: pF(e.sd3) }; });
        var sd2 = omsData.map(function (e) { return { x: pF(e[keyTalla]), y: pF(e.sd2) }; });
        var sd0 = omsData.map(function (e) { return { x: pF(e[keyTalla]), y: pF(e.sd0) }; });
        var sd2n = omsData.map(function (e) { return { x: pF(e[keyTalla]), y: pF(e.sd2neg) }; });
        var sd3n = omsData.map(function (e) { return { x: pF(e[keyTalla]), y: pF(e.sd3neg) }; });

        var patientPoints = patientData.map(function (e) {
            var t = parseFloat(e.talla);
            var p = parseFloat(e.peso);
            if (!t || !p) return null;
            return { x: t, y: p, fecha: e.fecha, idatencion: e.idatencion };
        }).filter(function (e) { return e !== null; });

        if (manualPoint && manualPoint.peso && manualPoint.talla) {
            if (currentIdAtencion) {
                patientPoints = patientPoints.filter(function (p) { return p.idatencion != currentIdAtencion; });
            }
            patientPoints.push({ x: parseFloat(manualPoint.talla), y: parseFloat(manualPoint.peso), fecha: 'Actual' });
        }
        patientPoints.sort(function (a, b) { return a.x - b.x; });

        globalCharts[canvasId] = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [
                    { label: '+3 SD', data: sd3,  borderColor: '#e74c3c', borderWidth: 1, fill: false, pointRadius: 0 },
                    { label: '+2 SD', data: sd2,  borderColor: '#e67e22', borderWidth: 1, fill: false, pointRadius: 0 },
                    { label: 'Media', data: sd0,  borderColor: '#27ae60', borderWidth: 2, fill: false, pointRadius: 0 },
                    { label: '-2 SD', data: sd2n, borderColor: '#e67e22', borderWidth: 1, fill: false, pointRadius: 0 },
                    { label: '-3 SD', data: sd3n, borderColor: '#e74c3c', borderWidth: 1, fill: false, pointRadius: 0 },
                    { label: 'Paciente', data: patientPoints, borderColor: '#3498db', backgroundColor: '#3498db', pointRadius: 6, pointHoverRadius: 8, fill: false, showLine: false }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{ type: 'linear', position: 'bottom', scaleLabel: { display: true, labelString: 'Talla (cm)' } }],
                    yAxes: [{ scaleLabel: { display: true, labelString: 'Peso (kg)' } }]
                }
            }
        });
    }

    function renderChartInternal(canvasId, label, unit, omsData, patientData, dataKey, manualPoint, currentIdAtencion) {
        var ctx = document.getElementById(canvasId);
        if (!ctx) {
            return;
        }

        // Preparar datasets OMS
        var keyMes = (omsData.length > 0 && typeof omsData[0].mes !== 'undefined') ? 'mes' : 'meses';
        var pF = function (v) { var n = parseFloat(v); return isNaN(n) ? null : n; };
        var pI = function (v) { var n = parseInt(v); return isNaN(n) ? 0 : n; };

        var sd3 = omsData.map(function (e) { return { x: pI(e[keyMes]), y: pF(e.sd3) }; });
        var sd2 = omsData.map(function (e) { return { x: pI(e[keyMes]), y: pF(e.sd2) }; });
        var sd0 = omsData.map(function (e) { return { x: pI(e[keyMes]), y: pF(e.sd0) }; });
        var sd2n = omsData.map(function (e) { return { x: pI(e[keyMes]), y: pF(e.sd2neg) }; });
        var sd3n = omsData.map(function (e) { return { x: pI(e[keyMes]), y: pF(e.sd3neg) }; });

        // Preparar Historial
        var patientPoints = patientData.map(function (e) {
            var val = parseFloat(e[dataKey]);
            if (!val || val <= 0) return null;
            return { x: parseFloat(e.edad_meses), y: val, fecha: e.fecha, idatencion: e.idatencion };
        }).filter(function (e) { return e !== null; });

        // Agregar punto manual actual
        if (manualPoint && manualPoint[dataKey] && manualPoint.edad_meses >= 0) {
            if (currentIdAtencion) {
                patientPoints = patientPoints.filter(function (p) { return p.idatencion != currentIdAtencion; });
            }
            var yVal = parseFloat(manualPoint[dataKey]);
            if (yVal > 0) {
                patientPoints.push({ x: parseFloat(manualPoint.edad_meses), y: yVal, fecha: 'Actual' });
            }
        }

        patientPoints.sort(function (a, b) { return a.x - b.x; });

        // Destruir instancia previa
        if (globalCharts[canvasId]) {
            globalCharts[canvasId].destroy();
        }

        // Calcular max X dinámico (extendido a 20 años = 240 meses por solicitud usuario)
        var maxAge = 240; 
        patientPoints.forEach(function (p) { if (p.x > maxAge) maxAge = p.x; });
        var stepSize = 12; // Mostrar por años para mayor claridad en el rango extendido


        var config = {
            type: 'line',
            data: {
                datasets: [
                    { label: '+3 SD', data: sd3, borderColor: '#e74c3c', borderWidth: 1, fill: false, pointRadius: 0 },
                    { label: '+2 SD', data: sd2, borderColor: '#e67e22', borderWidth: 1, fill: false, pointRadius: 0 },
                    { label: 'Media', data: sd0, borderColor: '#27ae60', borderWidth: 2, fill: false, pointRadius: 0 },
                    { label: '-2 SD', data: sd2n, borderColor: '#e67e22', borderWidth: 1, fill: false, pointRadius: 0 },
                    { label: '-3 SD', data: sd3n, borderColor: '#e74c3c', borderWidth: 1, fill: false, pointRadius: 0 },
                    {
                        label: 'Paciente',
                        data: patientPoints,
                        borderColor: '#3498db',
                        backgroundColor: '#3498db',
                        pointRadius: 6,
                        pointHoverRadius: 8,
                        fill: false,
                        showLine: false
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{ type: 'linear', position: 'bottom', scaleLabel: { display: true, labelString: 'Edad (Meses)' }, ticks: { max: maxAge, stepSize: stepSize } }],
                    yAxes: [{ scaleLabel: { display: true, labelString: label + (unit ? ' (' + unit + ')' : '') } }]
                },
                tooltips: {
                    callbacks: {
                        title: function (items) { return 'Edad: ' + parseFloat(items[0].xLabel).toFixed(2) + ' m'; },
                        label: function (item, data) {
                            var l = data.datasets[item.datasetIndex].label || '';
                            return l + ': ' + Math.round(item.yLabel * 100) / 100;
                        }
                    }
                }
            }
        };

        globalCharts[canvasId] = new Chart(ctx, config);
    }



    // --- LÓGICA DE FORMULARIO PEDIATRÍA ---
    $(function () {
        console.log("Pediatría: Init Full Inline");

        // UI DEBUG DESACTIVADO
        if (!$("#debug-chart-status").length) {
            $(".nav-tabs-custom").prepend('<div id="debug-chart-status"></div>');
        }

        // Helper valores padre
        function getParentValue(id) {
            var $all = $("#" + id).not("#formulariop #" + id);
            var val = "";
            $all.each(function () { if ($(this).val()) { val = $(this).val(); return false; } });
            if (!val) {
                var $lbl = $("#lbl_" + id);
                if ($lbl.length && $lbl.text().trim() !== "" && !$lbl.text().includes("..")) { val = $lbl.text().trim(); }
            }
            return val;
        }

        // Sincronizar
        function sincronizarDesdeTriaje() {
            var campos = ['peso', 'talla', 'temperatura', 'frecuencia_respiratoria', 'frecuencia_cardiaca', 'saturacion'];
            campos.forEach(function (field) {
                var $inputPropio = $("#formulariop #" + field);
                if (!$inputPropio.val()) {
                    var parentVal = getParentValue(field);
                    if (parentVal && parentVal !== "--") { $inputPropio.val(parentVal); }
                }
            });
            calcularIMC();
            // Force Perimetro Cefalico sync separately to be sure
            var pcParent = getParentValue('perimetro_cefalico');
            if (pcParent && !$("#formulariop #perimetro_cefalico").val()) {
                $("#formulariop #perimetro_cefalico").val(pcParent);
                refreshGraficosConDatosActuales();
            }
            // Sincronizar Perímetro Abdominal del triaje (si está presente)
            var paParent = getParentValue('perimetro_abdominal');
            if (paParent && !$("#formulariop #perimetro_abdominal").val()) {
                $("#formulariop #perimetro_abdominal").val(paParent);
            }
        }

        // Calcular IMC
        function calcularIMC() {
            var peso = parseFloat($("#formulariop #peso").val());
            var talla_cm = parseFloat($("#formulariop #talla").val());

            if (peso > 0 && talla_cm > 0) {
                var talla_m = talla_cm / 100;
                var imc = peso / (talla_m * talla_m);
                $("#formulariop #imc").val(imc.toFixed(2));
                if ($("#lbl_imc").length) $("#lbl_imc").text(imc.toFixed(2));

                var color = '#f0f0f0';
                if (imc < 18.5) color = '#fff3cd';
                else if (imc < 25) color = '#d4edda';
                else if (imc < 30) color = '#fff3cd';
                else color = '#f8d7da';
                $("#formulariop #imc").css('background-color', color);
            }
            refreshGraficosConDatosActuales();
        }

        // Refresh Wrapper
        function refreshGraficosConDatosActuales() {
            console.log("🔄 refreshGraficosConDatosActuales() llamada");
            console.log("- currentPatientData:", currentPatientData);

            if (typeof currentPatientData === 'undefined') {
                console.error("❌ currentPatientData no está definido");
                return;
            }

            if (!currentPatientData.fecha_nacimiento) {
                console.error("❌ currentPatientData.fecha_nacimiento no disponible");
                console.log("- currentPatientData completo:", JSON.stringify(currentPatientData));
                return;
            }

            // Calcular edad exacta en meses
            var fechaNac = currentPatientData.fecha_nacimiento;
            console.log("📅 Fecha de nacimiento:", fechaNac);

            var nac = new Date(fechaNac);
            if (isNaN(nac.getTime())) {
                console.error("❌ Fecha de nacimiento inválida:", fechaNac);
                return;
            }

            var hoy = new Date();
            var diffTime = Math.abs(hoy - nac);
            var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            var edadMesesExacta = diffDays / 30.4375;

            console.log("👶 Edad calculada:", edadMesesExacta.toFixed(2), "meses");

            var valPC = $("#formulariop #perimetro_cefalico").val();
            var valPA = $("#formulariop #perimetro_abdominal").val();

            var datosManuales = {
                edad_meses: edadMesesExacta,
                peso: $("#formulariop #peso").val(),
                talla: $("#formulariop #talla").val(),
                imc: $("#formulariop #imc").val(),
                perimetro_cefalico: valPC,
                perimetro_abdominal: valPA
            };

            // Debug for PC
            if (valPC) {
                console.log("📏 P. Cefálico ingresado:", valPC, "cm");
                console.log("📊 Datos para gráfica:", datosManuales);
            }

            refreshChartsInternal(datosManuales, $("#idatencion").val());
        }

        // MAESTRO DE INICIO
        function iniciarPediatriaMaster(intentos = 0) {
            console.log("=== INICIANDO PEDIATRIA MASTER (Intento " + intentos + ") ===");

            // Esperar datos
            var pid = $("#idpersona").val(); // Input hidden local
            if (!pid && typeof currentPatientData !== 'undefined') pid = currentPatientData.idpersona;

            if (!pid) {
                if (intentos < 5) {
                    console.log("No hay ID de persona aún, reintentando...");
                    setTimeout(function () { iniciarPediatriaMaster(intentos + 1); }, 500);
                } else {
                    logEstadoGraficos("No se encontró paciente seleccionado para gráficos.", 'danger');
                }
                return;
            }

            // Datos existen
            var sexo = (typeof currentPatientData !== 'undefined') ? currentPatientData.sexo : '';
            var fechaNac = (typeof currentPatientData !== 'undefined') ? currentPatientData.fecha_nacimiento : '';

            // Fallback si currentPatientData no tiene sexo (raro)
            if (!sexo) sexo = getParentValue('sexo');

            console.log("Datos del paciente encontrados:");
            console.log("- ID Persona:", pid);
            console.log("- Sexo:", sexo);
            console.log("- Fecha Nacimiento:", fechaNac);
            console.log("- currentPatientData:", currentPatientData);

            if (sexo) {
                initGraficosInternal(pid, sexo);

                // Sync posterior
                setTimeout(function () {
                    sincronizarDesdeTriaje();
                }, 500);
            } else {
                logEstadoGraficos("Falta dato SEXO del paciente para curvas OMS.", 'danger');
            }

            // Vacunas
            if (typeof cargarEsquemaVacunasPediatria === 'function' && typeof currentPatientData !== 'undefined') {
                cargarEsquemaVacunasPediatria(pid, currentPatientData.fecha_nacimiento);
            }
        }

        // Listeners
        $("#formulariop #peso, #formulariop #talla").on('change keyup input blur', function () {
            calcularIMC();
        });

        // Listener EXCLUSIVO para P. Cefálico para asegurar reactividad en tiempo real
        var pcTimeout;
        $("#formulariop #perimetro_cefalico").on('input change keyup blur', function (e) {
            clearTimeout(pcTimeout);
            var valor = $(this).val();

            // Actualización inmediata en blur o change
            if (e.type === 'blur' || e.type === 'change') {
                console.log("P. Cefálico actualizado (" + e.type + "): " + valor);
                refreshGraficosConDatosActuales();
            } else {
                // Pequeño debounce para input/keyup (300ms)
                pcTimeout = setTimeout(function () {
                    console.log("P. Cefálico actualizado (input): " + valor);
                    refreshGraficosConDatosActuales();
                }, 300);
            }
        });

        // Listener Perímetro Abdominal
        var paTimeout;
        $("#formulariop #perimetro_abdominal").on('input change keyup blur', function () {
            clearTimeout(paTimeout);
            paTimeout = setTimeout(function () { refreshGraficosConDatosActuales(); }, 300);
        });

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            console.log("Tab changed. Redrawing charts...");
            refreshGraficosConDatosActuales();
        });

        // Header styles ahora controlados por CSS y patient_header.php inline styles

        // FORZAR ESTILOS DEL HEADER INMEDIATAMENTE (Anti-caché agresivo)
        // Color según sexo del paciente
        setTimeout(function () {
            var sexo = (typeof currentPatientData !== 'undefined') ? currentPatientData.sexo : '';
            var colorFondo = "#00ACC1"; // Default cyan
            var colorTexto = "#ffffff";

            // Cambiar color según sexo
            if (sexo === 'M') {
                colorFondo = "#2196F3"; // Azul fuerte para niños
                console.log("👦 Paciente masculino - Banner AZUL");
            } else if (sexo === 'F') {
                colorFondo = "#E91E63"; // Rosado fuerte para niñas
                console.log("👧 Paciente femenino - Banner ROSADO");
            }

            $(".msp-patient-header").css({
                "background": colorFondo,
                "color": colorTexto,
                "padding": "15px 20px",
                "border-radius": "4px",
                "margin-bottom": "20px",
                "box-shadow": "0 4px 6px rgba(0,0,0,0.2)",
                "text-shadow": "0 1px 2px rgba(0,0,0,0.3)"
            });
            $(".msp-patient-header span").css({
                "text-shadow": "0 1px 2px rgba(0,0,0,0.3)",
                "font-weight": "600",
                "color": colorTexto
            });
            $(".msp-patient-header strong").css({
                "color": colorTexto,
                "font-weight": "700"
            });
            console.log("✅ Estilos del header forzados via JavaScript - Color: " + colorFondo);
        }, 100);

        // ESCUCHAR EVENTO DE DATOS DEL PACIENTE LISTOS
        $(document).on('patientDataLoaded', function (event, patientData) {
            console.log("=== EVENTO patientDataLoaded RECIBIDO ===");
            console.log("Datos del paciente:", patientData);
            
            // Actualizar color del header según sexo
            var sexo = patientData.sexo || '';
            var colorFondo = "#00ACC1"; // Default
            
            if (sexo === 'M') {
                colorFondo = "#2196F3"; // Azul fuerte para niños
                console.log("👦 Actualizando banner a AZUL (niño)");
            } else if (sexo === 'F') {
                colorFondo = "#E91E63"; // Rosado fuerte para niñas
                console.log("👧 Actualizando banner a ROSADO (niña)");
            }
            
            $(".msp-patient-header").css({
                "background": colorFondo,
                "color": "#ffffff"
            });
            
            // Esperar un momento para que el DOM esté completamente listo
            setTimeout(function () {
                iniciarPediatriaMaster();
            }, 300);
        });

        // ARRANCAR (fallback si el evento ya se disparó antes de que este script se cargara)
        if (typeof currentPatientData !== 'undefined' && currentPatientData.idpersona) {
            console.log("currentPatientData ya existe, iniciando directamente...");
            iniciarPediatriaMaster();
        } else {
            console.log("Esperando evento patientDataLoaded...");
        }
    });
</script>