<?php
session_start(); // Iniciar sesión al principio

// 1. Verificación de sesión y obtención del rol
if (!isset($_SESSION['Inicio']) || $_SESSION['Inicio'] !== "Ok" || !isset($_SESSION['Rol'])) {
    header("Location: ../login.php?m=5"); 
    exit;
}

// 2. Determinar la URL del menú basada en el rol
$urlMenuCorrespondiente = "";
switch ($_SESSION['Rol']) {
    case "Administrativo":
        $urlMenuCorrespondiente = "../MenuAdministrativo.php";
        break;
    case "Titular":
        $urlMenuCorrespondiente = "../MenuTitular.php";
        break;
    case "Pasante":
        $urlMenuCorrespondiente = "../MenuPasante.php";
        break;
    default:
        header("Location: ../login.php?m=6"); 
        exit;
}

// Obtener datos del paciente de la URL
// Obtener datos del paciente (ahora soporta POST y GET vía REQUEST)
$clave_paciente = isset($_REQUEST['clave_paciente']) ? htmlspecialchars($_REQUEST['clave_paciente'], ENT_QUOTES, 'UTF-8') : '';
$codigo_paciente = isset($_REQUEST['codigo_paciente']) ? htmlspecialchars($_REQUEST['codigo_paciente'], ENT_QUOTES, 'UTF-8') : '';
$nombre_paciente = isset($_REQUEST['nombre_paciente']) ? htmlspecialchars($_REQUEST['nombre_paciente'], ENT_QUOTES, 'UTF-8') : '';
$apellido_paterno_paciente = isset($_REQUEST['apellido_paterno_paciente']) ? htmlspecialchars($_REQUEST['apellido_paterno_paciente'], ENT_QUOTES, 'UTF-8') : '';
$apellido_materno_paciente = isset($_REQUEST['apellido_materno_paciente']) ? htmlspecialchars($_REQUEST['apellido_materno_paciente'], ENT_QUOTES, 'UTF-8') : '';
$fecha_nacimiento_paciente_get = isset($_REQUEST['fecha_nacimiento_paciente']) ? htmlspecialchars($_REQUEST['fecha_nacimiento_paciente'], ENT_QUOTES, 'UTF-8') : '';
$sexo_paciente = isset($_REQUEST['sexo_paciente']) ? htmlspecialchars($_REQUEST['sexo_paciente']) : '';
$semanas_gestacion = isset($_REQUEST['semanas_gestacion']) ? htmlspecialchars($_REQUEST['semanas_gestacion']) : '';
?>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Montserrat:wght@700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="./img/UNAM amarillo.png"> 
    <link rel="stylesheet" type="text/css" href="../Css/EstilosUpdateWi.css">
    <title>Bele Articulación - Ingreso de Datos</title>
    <style>
        .auto-filled { background-color: #e9ecef; cursor: not-allowed; }
        .header-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #f0f0f0; }
        .main-tittle { margin: 0; padding: 0; border: none; }
        .btn-salir { white-space: nowrap; padding: 8px 20px; flex-shrink: 0; font-size: 0.9rem; }
        .hidden { display: none; }
        .age-fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: flex-end; /* Añadido para alinear mejor */ }.edad-activa { background-color: #e0e8f0; border-color: #0056b3; box-shadow: 0 0 5px rgba(0, 86, 179, 0.3); }
        .edad-activa { background-color: #e0e8f0; border-color: #0056b3; box-shadow: 0 0 5px rgba(0, 86, 179, 0.3); }
        .instruccion-evaluacion { font-size: 0.9em; color: #555; background-color: #f8f9fa; padding: 10px; border-left: 4px solid #007bff; margin-top: 0; margin-bottom: 15px; border-radius: 0 4px 4px 0; }
        .instruccion-evaluacion strong { color: #0056b3; }
        .prox-eval-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: flex-end; }
        .hidden { display: none; }
        .baremo-container { display: flex; gap: 10px; align-items: flex-end; }
        .baremo-container > .input-box { flex-grow: 1; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-section"> <!-- Contenedor nuevo -->
        <h1 class="main-tittle"> Bele Articulación </h1>
        <a href="CBele.php" class="btn-salir">Volver a la lista</a> 
        </div>
        <form method="GET" action="IBele.php" id="myForm">

            <!-- Sección Datos Personales (readonly) -->
           <div class="form-section">
    <h2 class="section-tittle">Datos Personales del Paciente</h2>
    <div class="input-grid">
        <!-- Campos ocultos para los cálculos -->
        <input type="hidden" name="clave_paciente" value="<?php echo $clave_paciente; ?>">
        <input type="hidden" id="semanas_gestacion_hidden" value="<?php echo $semanas_gestacion; ?>">

        <div class="input-box"><label>Código</label><input type="text" value="<?php echo $codigo_paciente; ?>" readonly class="auto-filled"></div>
        <div class="input-box"><label>Nombre</label><input type="text" value="<?php echo $nombre_paciente; ?>" readonly class="auto-filled"></div>
        <div class="input-box"><label>A. Paterno</label><input type="text" value="<?php echo $apellido_paterno_paciente; ?>" readonly class="auto-filled"></div>
        <div class="input-box"><label>A. Materno</label><input type="text" value="<?php echo $apellido_materno_paciente; ?>" readonly class="auto-filled"></div>
        <div class="input-box"><label>F. Nacimiento</label><input type="date" id="fecha_nacimiento_paciente" value="<?php echo $fecha_nacimiento_paciente_get; ?>" readonly class="auto-filled"></div>
        <div class="input-box"><label>Semanas Gestación</label><input type="text" value="<?php echo $semanas_gestacion; ?>" readonly class="auto-filled"></div>
    </div>

    <h2 class="section-tittle" style="margin-top: 20px;">Datos de Evaluación</h2>
    <p class="instruccion-evaluacion">
        <strong>Instrucción:</strong> Elige la fecha de evaluación para calcular las edades y activar el formulario.
    </p>
    <div class="age-fields-grid">
        <div class="input-box">
            <label for="fecha_evaluacion">Fecha de Evaluación</label>
            <input type="date" id="fecha_evaluacion" name="fecha_evaluacion" required class="input-field">
        </div>
        <div class="input-box">
            <label>Edad Cronológica</label>
            <input type="text" placeholder="Seleccione fechas" id="edad" name="edad" readonly class="input-field auto-filled" required>
        </div>
        <div class="input-box">
            <label>Edad Corregida</label>
            <input type="text" placeholder="Cálculo automático" id="edad_corregida" name="edad_corregida" readonly class="input-field auto-filled">
        </div>
        <div class="input-box">
            <label>Condición</label>
            <input type="text" id="condicion_paciente" value="" readonly class="input-field auto-filled">
        </div>
        <div class="input-box">
            <label>Baremo de Edad Utilizado</label>
            <input type="text" id="rango_edad" name="rango_edad" readonly class="input-field auto-filled">
        </div>
        <div class="input-box">
            <label>Anular Baremo (Manual)</label>
            <select id="baremo_manual_select" class="input-field hidden">
                <option value="0">Seleccione para anular...</option>
            </select>
        </div>
    </div>
</div>

            <!-- Sección Datos de la Prueba Bele (editables) -->
            <div class="form-section">
                <h2 class="section-tittle">Resultados Evaluación Bele Articulación</h2>
                <div class="highlight-section">
                    <div class="input-grid">
                       <div class="input-box">
                        <label for="punt_bruto_bele">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0-63" maxlength="4" id="punt_bruto_bele" name="punt_bruto_bele" required>
                    </div>
                    <div class="input-box">
                        <label for="punt_esc_bele">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="Se genera automáticamente / Ingreso manual" maxlength="4" id="punt_esc_bele" name="punt_esc_bele" required>
                    </div>
                    </div>
                </div>
                <!-- SECCIÓN 1: Fonemas con Retraso -->
<div class="highlight-section">
    <div class="input-box-fullwidth">
        <label for="fonema_con_retras" class="sub-section-tittle">Fonemas con Retraso</label>
        <input type="text" class="input-field" autocomplete="off" placeholder="Click en fonemas o NA" id="fonema_con_retras" name="fonema_con_retras" required>
    </div>
    <div class="fonema-buttons-container">
        <button type="button" class="btn-clear-fonemas" onclick="limpiarInput('fonema_con_retras')">Limpiar</button>
        <!-- Botones de fonemas -->
        <div class="fonema-category-buttons"><h4>Vocales</h4>
            <div class="fonema-button" onclick="agregarFonema('/a/', 'fonema_con_retras')">/a/</div>
            <div class="fonema-button" onclick="agregarFonema('/e/', 'fonema_con_retras')">/e/</div>
            <div class="fonema-button" onclick="agregarFonema('/i/', 'fonema_con_retras')">/i/</div>
            <div class="fonema-button" onclick="agregarFonema('/o/', 'fonema_con_retras')">/o/</div>
            <div class="fonema-button" onclick="agregarFonema('/u/', 'fonema_con_retras')">/u/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Oclusivas</h4>
            <div class="fonema-button" onclick="agregarFonema('/p/', 'fonema_con_retras')">/p/</div>
            <div class="fonema-button" onclick="agregarFonema('/b/', 'fonema_con_retras')">/b/</div>
            <div class="fonema-button" onclick="agregarFonema('/t/', 'fonema_con_retras')">/t/</div>
            <div class="fonema-button" onclick="agregarFonema('/d/', 'fonema_con_retras')">/d/</div>
            <div class="fonema-button" onclick="agregarFonema('/k/', 'fonema_con_retras')">/k/</div>
            <div class="fonema-button" onclick="agregarFonema('/g/', 'fonema_con_retras')">/g/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Fricativas</h4>
            <div class="fonema-button" onclick="agregarFonema('/f/', 'fonema_con_retras')">/f/</div>
            <div class="fonema-button" onclick="agregarFonema('/s/', 'fonema_con_retras')">/s/</div>
            <div class="fonema-button" onclick="agregarFonema('/ʝ/', 'fonema_con_retras')">/ʝ/</div>
            <div class="fonema-button" onclick="agregarFonema('/x/', 'fonema_con_retras')">/x/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Nasales</h4>
            <div class="fonema-button" onclick="agregarFonema('/m/', 'fonema_con_retras')">/m/</div>
            <div class="fonema-button" onclick="agregarFonema('/n/', 'fonema_con_retras')">/n/</div>
            <div class="fonema-button" onclick="agregarFonema('/ɲ/', 'fonema_con_retras')">/ɲ/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Líquidas</h4>
            <div class="fonema-button" onclick="agregarFonema('/l/', 'fonema_con_retras')">/l/</div>
            <div class="fonema-button" onclick="agregarFonema('/ɾ/', 'fonema_con_retras')">/ɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/rr/', 'fonema_con_retras')">/rr/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Africadas</h4>
            <div class="fonema-button" onclick="agregarFonema('/tʃ/', 'fonema_con_retras')">/tʃ/</div>
        </div>
    </div>
</div>

<!-- SECCIÓN 2: Subgrupos Consonánticos -->
<div class="highlight-section">
    <div class="input-box-fullwidth">
        <label for="subgrupo_consonanticos" class="sub-section-tittle">Subgrupos Consonánticos</label>
        <input type="text" class="input-field" autocomplete="off" placeholder="Click en grupos o NA" id="subgrupo_consonanticos" name="subgrupo_consonanticos" required>
    </div>
    <div class="fonema-buttons-container">
        <button type="button" class="btn-clear-fonemas" onclick="limpiarInput('subgrupo_consonanticos')">Limpiar</button>
        <div class="fonema-category-buttons"><h4>Grupos /l/</h4>
            <div class="fonema-button" onclick="agregarFonema('/pl/', 'subgrupo_consonanticos')">/pl/</div>
            <div class="fonema-button" onclick="agregarFonema('/bl/', 'subgrupo_consonanticos')">/bl/</div>
            <div class="fonema-button" onclick="agregarFonema('/fl/', 'subgrupo_consonanticos')">/fl/</div>
            <div class="fonema-button" onclick="agregarFonema('/kl/', 'subgrupo_consonanticos')">/kl/</div>
            <div class="fonema-button" onclick="agregarFonema('/gl/', 'subgrupo_consonanticos')">/gl/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Grupos /ɾ/</h4>
            <div class="fonema-button" onclick="agregarFonema('/pɾ/', 'subgrupo_consonanticos')">/pɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/bɾ/', 'subgrupo_consonanticos')">/bɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/fɾ/', 'subgrupo_consonanticos')">/fɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/tɾ/', 'subgrupo_consonanticos')">/tɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/dɾ/', 'subgrupo_consonanticos')">/dɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/kɾ/', 'subgrupo_consonanticos')">/kɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/gɾ/', 'subgrupo_consonanticos')">/gɾ/</div>
        </div>
    </div>
</div>

<!-- SECCIÓN 3: Diptongos -->
<div class="highlight-section">
    <div class="input-box-fullwidth">
        <label for="subgrupo_diptongos" class="sub-section-tittle">Diptongos</label>
        <input type="text" class="input-field" autocomplete="off" placeholder="Click en diptongos o NA" id="subgrupo_diptongos" name="subgrupo_diptongos" required>
    </div>
    <div class="fonema-buttons-container">
        <button type="button" class="btn-clear-fonemas" onclick="limpiarInput('subgrupo_diptongos')">Limpiar</button>
        <div class="fonema-category-buttons"><h4>Crecientes</h4>
            <div class="fonema-button" onclick="agregarFonema('ua', 'subgrupo_diptongos')">ua</div>
            <div class="fonema-button" onclick="agregarFonema('ue', 'subgrupo_diptongos')">ue</div>
            <div class="fonema-button" onclick="agregarFonema('ie', 'subgrupo_diptongos')">ie</div>
        </div>
        <div class="fonema-category-buttons"><h4>Decrecientes</h4>
            <div class="fonema-button" onclick="agregarFonema('au', 'subgrupo_diptongos')">au</div>
            <div class="fonema-button" onclick="agregarFonema('ei', 'subgrupo_diptongos')">ei</div>
        </div>
    </div>
</div>
                <div class="highlight-section">
                    <div class="input-box input-box-fullwidth">
                        <label for="bele_interpreta" class="sub-section-tittle">Interpretación / Observaciones</label>
                        <textarea id="bele_interpreta" name="bele_interpreta_ta" class="input-field" rows="5" placeholder="Se genera automáticamente / Ingreso manual" readonly></textarea>
                        <select id="bele_interpreta_select" name="bele_interpreta" class="input-field" style="display: none;" required>
                            <!-- Opciones cargadas con JS -->
                        </select>
                    </div>
                </div>
            </div>
            <input type="submit" class="btn-submit" value="Registrar Evaluación" id="registrar">
        </form>

        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="../Jquery/jquery-3.6.0.min.js"></script>
       <script>
    
    function setupFieldValidation(selector, regex) {
    document.querySelectorAll(selector).forEach(input => {
        input.setAttribute('data-prev-value', input.value);

        // Valida caracteres mientras se escribe
        input.addEventListener('input', e => {
            if (e.target.readOnly) return;
            let valor = e.target.value;
            if (!regex.test(valor)) {
                e.target.value = e.target.getAttribute('data-prev-value') || '';
            }
            e.target.setAttribute('data-prev-value', e.target.value);
        });

        // Valida el valor máximo al salir del campo
        input.addEventListener('blur', e => {
            const maxValue = parseInt(e.target.getAttribute('data-max-value'), 10);
            const valor = e.target.value;
            if (isNaN(maxValue) || valor === '') return;

            const numValue = parseInt(valor, 10);

            if (!isNaN(numValue) && numValue > maxValue) {
                const labelText = e.target.labels[0]?.textContent || 'este campo';
                Swal.fire({
                    icon: 'error',
                    title: 'Valor fuera de rango',
                    text: `El puntaje para "${labelText}" no puede ser mayor a ${maxValue}.`
                }).then(() => {
                    e.target.value = '';
                    e.target.focus();
                });
            }
        });
    });
}
    
    // =====================================================
    // --- DATOS Y TABLAS DE LA PRUEBA BELE ---
    // =====================================================
    const tablaBeleArticulacion = {
        '3': { minMonths: 36, maxMonths: 41, data: [{ range: [1, 22], escalar: 0 }, { range: [23, 25], escalar: 1 }, { range: [26, 28], escalar: 2 }, { range: [29, 31], escalar: 3 }, { range: [32, 33], escalar: 4 }, { range: [34, 36], escalar: 5 }, { range: [37, 39], escalar: 6 }, { range: [40, 42], escalar: 7 }, { range: [43, 45], escalar: 8 }, { range: [46, 47], escalar: 9 }, { range: [48, 50], escalar: 10 }, { range: [51, 53], escalar: 11 }, { range: [54, 56], escalar: 12 }, { range: [57, 58], escalar: 13 }, { range: [59, 61], escalar: 14 }, { range: [62, 63], escalar: 15 }] },
        '3.5': { minMonths: 42, maxMonths: 47, data: [{ range: [1, 29], escalar: 0 }, { range: [30, 32], escalar: 1 }, { range: [33, 34], escalar: 2 }, { range: [35, 37], escalar: 3 }, { range: [38, 40], escalar: 4 }, { range: [41, 42], escalar: 5 }, { range: [43, 45], escalar: 6 }, { range: [46, 48], escalar: 7 }, { range: [49, 50], escalar: 8 }, { range: [51, 53], escalar: 9 }, { range: [54, 56], escalar: 10 }, { range: [57, 58], escalar: 11 }, { range: [59, 61], escalar: 12 }, { range: [62, 63], escalar: 13 }] },
        '4': { minMonths: 48, maxMonths: 59, data: [{ range: [1, 39], escalar: 0 }, { range: [40, 41], escalar: 1 }, { range: [42, 43], escalar: 2 }, { range: [44, 45], escalar: 3 }, { range: [46, 47], escalar: 4 }, { range: [48, 49], escalar: 5 }, { range: [50, 51], escalar: 6 }, { range: [52, 53], escalar: 7 }, { range: [54, 55], escalar: 8 }, { range: [56, 57], escalar: 9 }, { range: [58, 58], escalar: 10 }, { range: [59, 60], escalar: 11 }, { range: [61, 62], escalar: 12 }, { range: [63, 63], escalar: 13 }] },
        '5': { minMonths: 60, maxMonths: 71, data: [{ range: [1, 49], escalar: 0 }, { range: [50, 51], escalar: 1 }, { range: [52, 52], escalar: 2 }, { range: [53, 53], escalar: 3 }, { range: [54, 54], escalar: 4 }, { range: [55, 55], escalar: 5 }, { range: [56, 57], escalar: 6 }, { range: [58, 58], escalar: 7 }, { range: [59, 59], escalar: 8 }, { range: [60, 60], escalar: 9 }, { range: [61, 61], escalar: 10 }, { range: [62, 63], escalar: 11 }] },
        '6': { minMonths: 72, maxMonths: 83, data: [{ range: [1, 51], escalar: 0 }, { range: [52, 53], escalar: 1 }, { range: [54, 54], escalar: 2 }, { range: [55, 55], escalar: 3 }, { range: [56, 56], escalar: 4 }, { range: [57, 57], escalar: 5 }, { range: [58, 58], escalar: 6 }, { range: [59, 59], escalar: 7 }, { range: [60, 60], escalar: 8 }, { range: [61, 61], escalar: 9 }, { range: [62, 62], escalar: 10 }, { range: [63, 63], escalar: 11 }] }
    };
    const interpretacionesManuales = ["Extremadamente inferior al promedio.", "Muy inferior al promedio.", "Inferior al promedio.", "Normal o promedio.", "Superior al promedio.", "Muy superior al promedio.", "Puntuación no aplicable para esta edad.", "No aplicable"];

    // =====================================================
    // --- VARIABLES Y ELEMENTOS GLOBALES DEL DOM ---
    // =====================================================
    let isManualMode = false;
    let activeAgeTable = null;
    const puntBrutoInput = document.getElementById('punt_bruto_bele');
    const puntEscInput = document.getElementById('punt_esc_bele');
    const interpretaTextarea = document.getElementById('bele_interpreta');
    const interpretaSelect = document.getElementById('bele_interpreta_select');
    const baremoManualSelect = document.getElementById('baremo_manual_select');

    // =====================================================
    // --- LÓGICA DE CÁLCULO DE EDAD Y BELE ---
    // =====================================================
    function calculatePreciseAge(startDate, endDate) {
        if (!(startDate instanceof Date) || !(endDate instanceof Date) || isNaN(startDate) || isNaN(endDate)) return { years: 0, months: 0, days: 0, totalMonths: 0 };
        let years = endDate.getFullYear() - startDate.getFullYear();
        let months = endDate.getMonth() - startDate.getMonth();
        let days = endDate.getDate() - startDate.getDate();
        if (days < 0) { months--; days += new Date(endDate.getFullYear(), endDate.getMonth(), 0).getDate(); }
        if (months < 0) { years--; months += 12; }
        const totalMonths = (years * 12) + months;
        return { years, months, days, totalMonths };
    }

    function setPatientCondition() {
        const gestWeeks = parseInt(document.getElementById('semanas_gestacion_hidden').value, 10);
        document.getElementById('condicion_paciente').value = (gestWeeks > 0 && gestWeeks < 37) ? "Prematuro" : (gestWeeks >= 37) ? "Nacido a término" : "No especificado";
    }

    function findAgeTableForBele(totalMonths) {
        for (const key in tablaBeleArticulacion) {
            const table = tablaBeleArticulacion[key];
            if (totalMonths >= table.minMonths && totalMonths <= table.maxMonths) {
                return { key: key, ...table };
            }
        }
        return null;
    }
    
    function calcularPuntuacionEscalar() {
        if (isManualMode || !activeAgeTable) {
            puntEscInput.value = '';
            interpretaTextarea.value = '';
            return;
        }

        const brutoStr = puntBrutoInput.value.trim();
        if (brutoStr === '' || isNaN(parseInt(brutoStr, 10))) {
            puntEscInput.value = '';
            interpretaTextarea.value = '';
            return;
        }
        
        const bruto = parseInt(brutoStr, 10);
        let escalarEncontrado = null;

        for (const item of activeAgeTable.data) {
            if (bruto >= item.range[0] && bruto <= item.range[1]) {
                escalarEncontrado = item.escalar;
                break;
            }
        }

        puntEscInput.value = (escalarEncontrado !== null) ? escalarEncontrado : '';
        actualizarInterpretacion();
    }

    function actualizarInterpretacion() {
        if (isManualMode) return;
        const escalarStr = puntEscInput.value.trim();
        if (escalarStr === '' || isNaN(parseInt(escalarStr, 10)) || !activeAgeTable) {
            interpretaTextarea.value = '';
            return;
        }
        
        const escalar = parseInt(escalarStr, 10);
        const years = Math.floor(activeAgeTable.minMonths / 12);
        let interpretacion = '';

        if (escalar === 0) { interpretacion = 'Extremadamente inferior al promedio.'; }
        else if (escalar >= 1 && escalar <= 3) { interpretacion = 'Muy inferior al promedio.'; }
        else if (escalar >= 4 && escalar <= 6) { interpretacion = 'Inferior al promedio.'; }
        else if (escalar >= 7 && escalar <= 11) { interpretacion = 'Normal o promedio.'; }
        else if (escalar >= 12 && escalar <= 13) {
            interpretacion = (years === 3 || years === 4) ? 'Superior al promedio.' : 'Puntuación no aplicable para esta edad.';
        } else if (escalar >= 14 && escalar <= 15) {
            interpretacion = (years === 3) ? 'Muy superior al promedio.' : 'Puntuación no aplicable para esta edad.';
        }
        interpretaTextarea.value = interpretacion;
    }

    function gestionarModoFormulario(manual) {
        isManualMode = manual;
        puntEscInput.readOnly = !manual;
        puntEscInput.classList.toggle('auto-filled', !manual);

        interpretaTextarea.style.display = manual ? 'none' : 'block';
        interpretaTextarea.disabled = manual;
        
        interpretaSelect.style.display = manual ? 'block' : 'none';
        interpretaSelect.disabled = !manual;

        if (manual) { 
            puntEscInput.placeholder = "Ingreso manual";
            interpretaTextarea.name = "";
            interpretaSelect.name = "bele_interpreta";
        } else {
            puntEscInput.placeholder = "Se genera automáticamente";
            interpretaTextarea.name = "bele_interpreta";
            interpretaSelect.name = "";
        }
    }

    function calculateAllAgesAndUpdate_Bele() {
    // 1. OBTENER ELEMENTOS
    const birthDateElem = document.getElementById('fecha_nacimiento_paciente');
    const evalDateElem = document.getElementById('fecha_evaluacion');
    const cronoAgeElem = document.getElementById('edad');
    const correctedAgeElem = document.getElementById('edad_corregida');
    const rangoEdadElem = document.getElementById('rango_edad');

    // Limpiar atributos de validación y placeholders en el campo bruto
    puntBrutoInput.removeAttribute('data-max-value');
    puntBrutoInput.placeholder = '0-63';

    // Resetear campos visuales
    cronoAgeElem.value = ''; 
    correctedAgeElem.value = ''; 
    rangoEdadElem.value = '';
    cronoAgeElem.classList.remove('edad-activa'); 
    correctedAgeElem.classList.remove('edad-activa');
    baremoManualSelect.classList.add('hidden'); 
    baremoManualSelect.value = "0";
    
    // Deshabilitar el formulario si no hay fechas
    const allOutputs = [puntBrutoInput, puntEscInput, interpretaTextarea];
    allOutputs.forEach(input => { input.value = ''; });
    interpretaSelect.value = "";
    if (!birthDateElem.value || !evalDateElem.value) { 
        gestionarModoFormulario(true); 
        return; 
    }

    const startDate = new Date(birthDateElem.value);
    const endDate = new Date(evalDateElem.value);
    if (startDate > endDate) {
        Swal.fire({ icon: 'error', title: 'Error en las fechas', text: 'La fecha de nacimiento no puede ser posterior a la de evaluación.' });
        gestionarModoFormulario(true); 
        baremoManualSelect.classList.remove('hidden'); 
        return;
    }

    // Lógica de cálculo de edad (sin cambios)...
    const cronoAge = calculatePreciseAge(startDate, endDate);
    cronoAgeElem.value = `${cronoAge.years}A ${cronoAge.months}M ${cronoAge.days}D`;

    const gestWeeks = parseInt(document.getElementById('semanas_gestacion_hidden').value, 10);
    const esPrematuro = gestWeeks > 0 && gestWeeks < 37;
    const esMenorDe3Anos = cronoAge.totalMonths < 36;
    
    let edadAUsar = cronoAge;
    let edadActivaElem = cronoAgeElem;

    if (esPrematuro && esMenorDe3Anos) {
        // ... (lógica de edad corregida sin cambios)
        const daysToCorrect = (40 - gestWeeks) * 7;
        let correctedEndDate = new Date(endDate);
        correctedEndDate.setDate(correctedEndDate.getDate() - daysToCorrect);
        
        if (correctedEndDate >= startDate) {
            const correctedAge = calculatePreciseAge(startDate, correctedEndDate);
            correctedAgeElem.value = `${correctedAge.years}A ${correctedAge.months}M ${correctedAge.days}D`;
            edadAUsar = correctedAge;
            edadActivaElem = correctedAgeElem;
        } else {
            correctedAgeElem.value = 'No aplicable (< 0)';
            edadAUsar.totalMonths = -1;
        }
    } else {
        correctedAgeElem.value = 'No Aplica';
    }
    
    edadActivaElem.classList.add('edad-activa');
    
    activeAgeTable = findAgeTableForBele(edadAUsar.totalMonths);

    if (activeAgeTable) {
        rangoEdadElem.value = `${edadAUsar.years}:${edadAUsar.months}`;
        gestionarModoFormulario(false);
        baremoManualSelect.classList.add('hidden');
        
        // --- INICIO DE LA LÓGICA DE VALIDACIÓN AÑADIDA ---
        const maxValue = 63; // El puntaje máximo en Bele no varía por edad.
        puntBrutoInput.setAttribute('data-max-value', maxValue);
        puntBrutoInput.placeholder = `0 - ${maxValue}`;
        // --- FIN DE LA LÓGICA DE VALIDACIÓN AÑADIDA ---

        calcularPuntuacionEscalar();
    } else {
        rangoEdadElem.value = "No Aplica";
        gestionarModoFormulario(true);
        baremoManualSelect.classList.remove('hidden');
        
        const mensaje = edadAUsar.totalMonths < 0 
            ? 'La edad corregida es negativa. La evaluación automática no es posible.'
            : `La edad (${edadAUsar.totalMonths} meses) está fuera del rango para Bele (36-83 meses). Ingrese los valores manualmente o seleccione un baremo.`;
        Swal.fire({ icon: 'warning', title: 'Atención', text: mensaje });
    }
}

    // =====================================================
    // --- LÓGICA DE FONEMAS Y VALIDACIÓN DE FORMULARIO ---
    // =====================================================
     function agregarFonema(fonema, inputId) {
        const inputField = document.getElementById(inputId);
        let currentValue = inputField.value.trim();
        
        if (currentValue.toUpperCase() === 'NA') {
            currentValue = '';
        }
        
        const fonemas = currentValue === '' ? [] : currentValue.split(/, /);
        
        if (!fonemas.includes(fonema)) {
            inputField.value = currentValue === '' ? fonema : currentValue + ', ' + fonema;
        }
    }

    function limpiarInput(inputId) {
        document.getElementById(inputId).value = '';
    }

    // =====================================================
    // --- INICIALIZACIÓN Y EVENTOS ---
    // =====================================================
    document.addEventListener('DOMContentLoaded', function() {
    // 1. APLICA LA VALIDACIÓN al campo de puntuación bruta
    const numericOnlyRegex = /^\d*$/;
    setupFieldValidation('#punt_bruto_bele', numericOnlyRegex);

    // 2. CONFIGURACIÓN INICIAL
    setPatientCondition();
    
    // 3. POBLAR SELECTORES
    // Poblar selector de baremo manual
    for (const key in tablaBeleArticulacion) {
        let option = document.createElement('option');
        option.value = key;
        option.textContent = `${key} Años`;
        baremoManualSelect.appendChild(option);
    }
    
    // Poblar selector de interpretaciones manuales
    let defaultOption = document.createElement('option');
    defaultOption.value = "";
    defaultOption.textContent = "Seleccione una interpretación...";
    defaultOption.disabled = true;
    defaultOption.selected = true;
    interpretaSelect.appendChild(defaultOption);
    interpretacionesManuales.forEach(texto => {
        let option = document.createElement('option');
        option.value = texto;
        option.textContent = texto;
        interpretaSelect.appendChild(option);
    });

    // 4. EJECUTAR CÁLCULOS INICIALES (para deshabilitar el formulario al principio)
    calculateAllAgesAndUpdate_Bele();

    // 5. LISTENERS DE EVENTOS
    document.getElementById('fecha_evaluacion').addEventListener('change', calculateAllAgesAndUpdate_Bele);
    puntBrutoInput.addEventListener('input', calcularPuntuacionEscalar);
    
    puntEscInput.addEventListener('input', () => { if(isManualMode) actualizarInterpretacion(); });

    baremoManualSelect.addEventListener('change', function() {
        const baremoElem = document.getElementById('rango_edad');
        const selectedKey = this.value;
        if (selectedKey === "0") {
            baremoElem.value = "Entrada Manual Requerida";
            activeAgeTable = null;
            gestionarModoFormulario(true);
            // Limpiar validación si se va a modo manual
            puntBrutoInput.removeAttribute('data-max-value');
            puntBrutoInput.placeholder = '0-63';
        } else {
            activeAgeTable = { key: selectedKey, ...tablaBeleArticulacion[selectedKey] };
            baremoElem.value = `Edad ${selectedKey}`;
            gestionarModoFormulario(false);
            
            // Establecer validación al seleccionar baremo manual
            const maxValue = 63;
            puntBrutoInput.setAttribute('data-max-value', maxValue);
            puntBrutoInput.placeholder = `0 - ${maxValue}`;

            calcularPuntuacionEscalar();
        }
    });

    // Listener de Submit
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const requiredFields = this.querySelectorAll('[required]:not([disabled])');
        let allValid = true;
        let firstInvalidField = null;

        requiredFields.forEach(field => {
            field.classList.remove('campo-error'); // Asume una clase CSS para error
            if (!field.value.trim()) {
                allValid = false;
                field.classList.add('campo-error');
                if (!firstInvalidField) firstInvalidField = field;
            }
        });

        if (!allValid) {
            Swal.fire({ icon: 'error', title: 'Campos incompletos', text: 'Por favor, complete todos los campos requeridos.' })
            .then(() => { if (firstInvalidField) firstInvalidField.focus(); });
        } else {
            if (isManualMode) {
                interpretaTextarea.value = interpretaSelect.value;
                interpretaTextarea.disabled = false;
            }
            this.submit();
        }
    });
});
</script>
    </div>
</body>
</html>

