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

// --- INICIO DEL BLOQUE AÑADIDO PARA MENÚS Y SEGURIDAD ---
// 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ú (aunque no se use, es buena práctica mantenerlo)
$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;
}
// Es una buena práctica inicializar y limpiar las variables GET
$clave_paciente = isset($_GET['clave_paciente']) ? htmlspecialchars($_GET['clave_paciente']) : '';
$codigo_paciente = isset($_GET['codigo_paciente']) ? htmlspecialchars($_GET['codigo_paciente']) : '';
$nombre_paciente = isset($_GET['nombre_paciente']) ? htmlspecialchars($_GET['nombre_paciente']) : '';
$apellido_paterno_paciente = isset($_GET['apellido_paterno_paciente']) ? htmlspecialchars($_GET['apellido_paterno_paciente']) : '';
$apellido_materno_paciente = isset($_GET['apellido_materno_paciente']) ? htmlspecialchars($_GET['apellido_materno_paciente']) : '';
$fecha_nacimiento_paciente = isset($_GET['fecha_nacimiento_paciente']) ? htmlspecialchars($_GET['fecha_nacimiento_paciente']) : '';
?>
<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="stylesheet" type="text/css" href="../Css/EstilosUpdateWi.css">
    <title>CELF 9-21 - Formulario</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"> CELF 9-21 </h1>
        <a href="CCELF9-21.php" class="btn-salir">Volver a la lista</a> 
        </div>

        <form method="POST" action="ICELF9-21.php" id="myForm">

            <!-- Sección Datos Personales -->
            <div class="form-section">
                <h2 class="section-tittle">Datos Personales</h2>
                <div class="input-grid">
                    <input type="hidden" id="clave_paciente" name="clave_paciente" value="<?php print $clave_paciente; ?>">
                    
                    <div class="input-box">
                        <label for="codigo_paciente">Código</label>
                        <input type="text" id="codigo_paciente" name="codigo_paciente" value="<?php print $codigo_paciente; ?>" readonly class="auto-filled">
                    </div>

                    <div class="input-box">
                        <label for="nombre_paciente">Nombre</label>
                        <input type="text" id="nombre_paciente" name="nombre_paciente" value="<?php print $nombre_paciente; ?>" readonly class="auto-filled">
                    </div>

                    <div class="input-box">
                        <label for="apellido_paterno_paciente">Apellido Paterno</label>
                        <input type="text" id="apellido_paterno_paciente" name="apellido_paterno_paciente" value="<?php print $apellido_paterno_paciente; ?>" readonly class="auto-filled">
                    </div>

                    <div class="input-box">
                        <label for="apellido_materno_paciente">Apellido Materno</label>
                        <input type="text" id="apellido_materno_paciente" name="apellido_materno_paciente" value="<?php print $apellido_materno_paciente; ?>" readonly class="auto-filled">
                    </div>

                    <div class="input-box">
                        <label for="fecha_nacimiento_paciente">Fecha de nacimiento</label>
                        <input type="date" id="fecha_nacimiento_paciente" name="fecha_nacimiento_paciente" value="<?php print $fecha_nacimiento_paciente; ?>" readonly class="auto-filled">
                    </div>

                    <div class="input-box">
                        <label for="fecha_evaluacion">Fecha de evaluación</label>
                        <input type="date" id="fecha_evaluacion" name="fecha_evaluacion">
                    </div>

                    <div class="input-box">
                        <label for="edad">Edad Cronológica</label>
                        <input type="text" placeholder="Calculada autom." id="edad" name="edad" readonly class="auto-filled">
                    </div>

                    <div class="input-box">
                        <label for="rango_edad">Rango de Edad</label>
                        <input type="text" id="rango_edad" name="rango_edad" readonly class="auto-filled">
                    </div>
                </div>
            </div>

            <!-- Título añadido para separar visualmente -->
            <h2 class="subpruebas-titulo-principal">Subpruebas de Lenguaje</h2>

            <!-- Sub-tests Sections -->

             <!-- Fields corresponding to sub_concep_sig_dir_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Concepto Significativo Directo</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_concep_sig_dir_bruto">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_concep_sig_dir_bruto" name="sub_concep_sig_dir_bruto">
                    </div>
                    <div class="input-box">
                        <label for="sub_concep_sig_dir_escal">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_concep_sig_dir_escal" name="sub_concep_sig_dir_escal">
                    </div>
                     <div class="input-box">
                        <label for="sub_concep_sig_dir_perce">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_concep_sig_dir_perce" name="sub_concep_sig_dir_perce">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_concep_sig_dir_interpre">Interpretación</label>
                    <textarea id="sub_concep_sig_dir_interpre" name="sub_concep_sig_dir_interpre" rows="5"></textarea>
                </div>
            </div>

             <!-- Fields corresponding to sub_record_oraci_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Recuerdo de Oraciones</h3>
                 <div class="input-grid">
                    <!-- SQL does not list a bruto score for Recuerdo de Oraciones -->
                     <div class="input-box">
                        <label for="sub_record_oraci_brut">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="4" id="sub_record_oraci_brut" name="sub_record_oraci_brut">
                    </div>
                    <div class="input-box">
                        <label for="sub_record_oraci_escal">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_record_oraci_escal" name="sub_record_oraci_escal">
                    </div>
                     <div class="input-box">
                        <label for="sub_record_oraci_percen">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_record_oraci_percen" name="sub_record_oraci_percen">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_record_oraci_interpr">Interpretación</label>
                    <textarea id="sub_record_oraci_interpr" name="sub_record_oraci_interpr" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to sub_formul_oraci_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Formulación de Oraciones</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_formul_oraci_brut">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_formul_oraci_brut" name="sub_formul_oraci_brut">
                    </div>
                    <div class="input-box">
                        <label for="sub_formul_oraci_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_formul_oraci_esc" name="sub_formul_oraci_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_formul_oraci_perc">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_formul_oraci_perc" name="sub_formul_oraci_perc">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_formul_oraci_interpr">Interpretación</label>
                    <textarea id="sub_formul_oraci_interpr" name="sub_formul_oraci_interpr" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to sub_clases_palab_recep_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Clases Palabras Receptivas</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_clases_palab_recep_bru">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_clases_palab_recep_bru" name="sub_clases_palab_recep_bru">
                    </div>
                    <div class="input-box">
                        <label for="sub_clases_palab_recep_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_clases_palab_recep_esc" name="sub_clases_palab_recep_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_clases_palab_recep_percen">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_clases_palab_recep_percen" name="sub_clases_palab_recep_percen">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_clases_palab_recep_interp">Interpretación</label>
                    <textarea id="sub_clases_palab_recep_interp" name="sub_clases_palab_recep_interp" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to sub_clas_pala_expre_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Clases Palabras Expresivas</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_clas_pala_expre_brut">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_clas_pala_expre_brut" name="sub_clas_pala_expre_brut">
                    </div>
                    <div class="input-box">
                        <label for="sub_clas_pala_expre_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_clas_pala_expre_esc" name="sub_clas_pala_expre_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_clas_pala_expre_percen">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_clas_pala_expre_percen" name="sub_clas_pala_expre_percen">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_clas_pala_expre_interpr">Interpretación</label>
                    <textarea id="sub_clas_pala_expre_interpr" name="sub_clas_pala_expre_interpr" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to sub_clas_pala_tot_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Total Clases Palabras</h3>
                 <div class="input-grid">
                    
                    <div class="input-box">
                        <label for="sub_clas_palab_suma_escalares">Suma de Puntuaciones Escalares</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="4" id="sub_clas_palab_suma_escalares" name="sub_clas_palab_suma_escalares">
                    </div>
                    <div class="input-box">
                        <label for="sub_clas_pala_tot_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_clas_pala_tot_esc" name="sub_clas_pala_tot_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_clas_pala_tot_perce">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_clas_pala_tot_perce" name="sub_clas_pala_tot_perce">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_clas_pala_tot_inter">Interpretación</label>
                    <textarea id="sub_clas_pala_tot_inter" name="sub_clas_pala_tot_inter" rows="5"></textarea>
                </div>
                
            </div>

            <!-- Fields corresponding to sub_defin_pala_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Definición Palabras</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_defin_pala_brut">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_defin_pala_brut" name="sub_defin_pala_brut">
                    </div>
                    <div class="input-box">
                        <label for="sub_defin_pala_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_defin_pala_esc" name="sub_defin_pala_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_defin_pala_perc">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_defin_pala_perc" name="sub_defin_pala_perc">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_defin_pala_inter">Interpretación</label>
                    <textarea id="sub_defin_pala_inter" name="sub_defin_pala_inter" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to sub_vocab_expr_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Vocabulario Expresivo</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_vocab_expr_bruto">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_vocab_expr_bruto" name="sub_vocab_expr_bruto">
                    </div>
                    <div class="input-box">
                        <label for="sub_voc_expr_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_voc_expr_esc" name="sub_voc_expr_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_voc_expr_perc">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_voc_expr_perc" name="sub_voc_expr_perc">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_voc_expr_inter">Interpretación</label>
                    <textarea id="sub_voc_expr_inter" name="sub_voc_expr_inter" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to sub_enten_parra_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Entendimiento Párrafos</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_enten_parra_bru">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_enten_parra_bru" name="sub_enten_parra_bru">
                    </div>
                    <div class="input-box">
                        <label for="sub_enten_parra_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_enten_parra_esc" name="sub_enten_parra_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_enten_parra_perc">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_enten_parra_perc" name="sub_enten_parra_perc">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_enten_parra_inter">Interpretación</label>
                    <textarea id="sub_enten_parra_inter" name="sub_enten_parra_inter" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to sub_rep_num_forw1o2_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Repetición Números Directa</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_rep_num_forw1o2_bru">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_rep_num_forw1o2_bru" name="sub_rep_num_forw1o2_bru">
                    </div>
                    <div class="input-box">
                        <label for="sub_rep_num_forw1o2_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_rep_num_forw1o2_esc" name="sub_rep_num_forw1o2_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_rep_num_forw1o2_perce">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_rep_num_forw1o2_perce" name="sub_rep_num_forw1o2_perce">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_rep_num_forw1o2_inter">Interpretación</label>
                    <textarea id="sub_rep_num_forw1o2_inter" name="sub_rep_num_forw1o2_inter" rows="5"></textarea>
                </div>
            </div>

             <!-- Fields corresponding to sub_rep_num_backw1o2_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Repetición Números Inversa</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_rep_num_backw1o2_bru">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_rep_num_backw1o2_bru" name="sub_rep_num_backw1o2_bru">
                    </div>
                    <div class="input-box">
                        <label for="sub_rep_num_backw1o2_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_rep_num_backw1o2_esc" name="sub_rep_num_backw1o2_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_rep_num_backw1o2_perc">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_rep_num_backw1o2_perc" name="sub_rep_num_backw1o2_perc">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_rep_num_backw1o2_inter">Interpretación</label>
                    <textarea id="sub_rep_num_backw1o2_inter" name="sub_rep_num_backw1o2_inter" rows="5"></textarea>
                </div>
            </div>

             <!-- Fields corresponding to sub_rep_num1o2_tot_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Repetición Números Total</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_rep_num1o2_tot_bru">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_rep_num1o2_tot_bru" name="sub_rep_num1o2_tot_bru">
                    </div>
                    <div class="input-box">
                        <label for="sub_rep_num1o2_tot_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_rep_num1o2_tot_esc" name="sub_rep_num1o2_tot_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_rep_num1o2_tot_perce">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_rep_num1o2_tot_perce" name="sub_rep_num1o2_tot_perce">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_rep_num1o2_tot_inter">Interpretación</label>
                    <textarea id="sub_rep_num1o2_tot_inter" name="sub_rep_num1o2_tot_inter" rows="5"></textarea>
                </div>
            </div>

             <!-- Fields corresponding to sub_sec_famil1o2_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Sub-test: Secuencia Familiar</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="sub_sec_famil1o2_bru">Puntuación bruta</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="sub_sec_famil1o2_bru" name="sub_sec_famil1o2_bru">
                    </div>
                    <div class="input-box">
                        <label for="sub_sec_famil1o2_esc">Puntuación escalar</label>
                        <input type="text" class="input-field" validate="escalar" autocomplete="off" placeholder="0" maxlength="2" id="sub_sec_famil1o2_esc" name="sub_sec_famil1o2_esc">
                    </div>
                     <div class="input-box">
                        <label for="sub_sec_famil1o2_perc">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="sub_sec_famil1o2_perc" name="sub_sec_famil1o2_perc">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="sub_sec_famil1o2_inter">Interpretación</label>
                    <textarea id="sub_sec_famil1o2_inter" name="sub_sec_famil1o2_inter" rows="5"></textarea>
                </div>
            </div>

            <!-- Título añadido para separar visualmente -->
            <h2 class="subpruebas-titulo-principal">Pruebas Centrales de Lenguaje (Índices)</h2>

            <!-- Sección CELF9-21 -->

            <!-- Fields corresponding to celf921_leng_tot_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Lenguaje Total</h3>
                <div class="input-grid">
                    <div class="input-box">
                        <label for="celf921_leng_tot_stand">Estándar</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="celf921_leng_tot_stand" name="celf921_leng_tot_stand">
                    </div>
                    <div class="input-box">
                        <label for="celf921_leng_tot_percen">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="celf921_leng_tot_percen" name="celf921_leng_tot_percen">
                    </div>
                </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="celf921_leng_tot_interp">Interpretación</label>
                    <textarea id="celf921_leng_tot_interp" name="celf921_leng_tot_interp" rows="5"></textarea>
                </div>
            </div>

             <!-- Fields corresponding to celf921_leng_recep_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Lenguaje Receptivo</h3>
                <div class="input-grid">
                    <div class="input-box">
                        <label for="celf921_leng_recep_stand">Estándar</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="celf921_leng_recep_stand" name="celf921_leng_recep_stand">
                    </div>
                    <div class="input-box">
                        <label for="celf921_leng_recep_perce">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="celf921_leng_recep_perce" name="celf921_leng_recep_perce">
                    </div>
                </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="celf921_leng_recep_inter">Interpretación</label>
                    <textarea id="celf921_leng_recep_inter" name="celf921_leng_recep_inter" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to celf921_leng_expre_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Lenguaje Expresivo</h3>
                <div class="input-grid">
                    <div class="input-box">
                        <label for="celf921_leng_expre_stand">Estándar</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="celf921_leng_expre_stand" name="celf921_leng_expre_stand">
                    </div>
                    <div class="input-box">
                        <label for="celf921_leng_expre_perc">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="celf921_leng_expre_perc" name="celf921_leng_expre_perc">
                    </div>
                </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="celf921_leng_expre_interpre">Interpretación</label>
                    <textarea id="celf921_leng_expre_interpre" name="celf921_leng_expre_interpre" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to celf921_conte_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Contenido</h3>
                <div class="input-grid">
                    <div class="input-box">
                        <label for="celf921_conte_stand">Estándar</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="celf921_conte_stand" name="celf921_conte_stand">
                    </div>
                     <div class="input-box">
                        <label for="celf921_conte_perc">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="celf921_conte_perc" name="celf921_conte_perc">
                    </div>
                </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="celf921_conte_interp">Interpretación</label>
                    <textarea id="celf921_conte_interp" name="celf921_conte_interp" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to celf921_mem_leng_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Memoria de Lenguaje</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="celf921_mem_leng_stand">Estándar</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="celf921_mem_leng_stand" name="celf921_mem_leng_stand">
                    </div>
                    <div class="input-box">
                        <label for="celf921_mem_leng_percent">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="celf921_mem_leng_percent" name="celf921_mem_leng_percent">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="celf921_mem_leng_inter">Interpretación</label>
                    <textarea id="celf921_mem_leng_inter" name="celf921_mem_leng_inter" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to celf921_mem_trab_... -->
            <div class="highlight-section">
                <h3 class="sub-section-tittle">Memoria de Trabajo</h3>
                 <div class="input-grid">
                    <div class="input-box">
                        <label for="celf921_mem_trab_stand">Estándar</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="4" id="celf921_mem_trab_stand" name="celf921_mem_trab_stand">
                    </div>
                    <div class="input-box">
                        <label for="celf921_mem_trab_percen">Percentil</label>
                        <input type="text" class="input-field" validate="numeric" autocomplete="off" placeholder="0" maxlength="3" id="celf921_mem_trab_percen" name="celf921_mem_trab_percen">
                    </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="celf921_mem_trab_interp">Interpretación</label>
                    <textarea id="celf921_mem_trab_interp" name="celf921_mem_trab_interp" rows="5"></textarea>
                </div>
            </div>

            <!-- Fields corresponding to dat_clin_... -->
             <div class="highlight-section">
                <h3 class="sub-section-tittle">Datos Clínicos</h3>
                
                 <div class="input-grid">
                    <div class="input-box">
                    <label for="dat_clin_ref_ater">¿Requiere terapia?</label>
                    <select class="input-field" id="dat_clin_ref_ater" name="dat_clin_ref_ater">
                        <option value="No">No</option>
                        <option value="Si">Sí</option>
                        <option value="Habla">Habla</option>
                        <option value="Lenguaje">Lenguaje</option>
                        <option value="Ambas">Ambas</option>
                    </select>
                </div>
                 </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="dat_clin_observ_clin">Observación Clínica</label>
                    <textarea id="dat_clin_observ_clin" name="dat_clin_observ_clin" rows="5"></textarea>
                </div>
                 <div class="input-box input-box-fullwidth">
                    <label for="dat_clin_otra_observ">Otra Observación</label>
                    <textarea id="dat_clin_otra_observ" name="dat_clin_otra_observ" rows="5"></textarea>
                </div>
            </div>

            <input type="submit"  class="btn-submit" value="Registrar" id="registrar">
        </form> 

        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="../Jquery/jquery-3.6.0.min.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                
                // 1. Validación de campos numéricos (Solo permite números enteros)
                const inputsNumericos = document.querySelectorAll('input[validate="numeric"], input[validate="escalar"], input[id$="_bruto"], input[id$="_brut"], input[id$="_bru"], input[id$="_stand"], input[id$="_perce"], input[id$="_percen"], input[id$="_perc"]');
                
                inputsNumericos.forEach(input => {
                    input.addEventListener('input', function(e) {
                        let valor = e.target.value;
                        // Permitir solo números
                        if (!/^\d*$/.test(valor)) {
                            e.target.value = valor.replace(/[^\d]/g, '');
                        }
                    });
                });

                // 2. Lógica de cálculo de Edad y Rango
                const birthDateElem = document.getElementById('fecha_nacimiento_paciente');
                const evalDateElem = document.getElementById('fecha_evaluacion');
                const cronoAgeElem = document.getElementById('edad');
                const baremoElem = document.getElementById('rango_edad');

                function calculatePreciseAge(startDate, endDate) {
                    if (!startDate || !endDate || isNaN(startDate) || isNaN(endDate) || startDate > endDate) return null;
                    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; }
                    return { years, months, days };
                }

                function getRangoCELF921(age) {
                    if (!age) return null;
                    const { years } = age;
                    // CELF 9-21 cubre desde los 9 hasta los 21 años
                    if (years >= 9 && years <= 21) {
                        // El rango suele ser anual en estas pruebas (ej: 9:0-9:11)
                        return `${years}:0-${years}:11`; 
                    }
                    return null;
                }

                function calcularEdadAutomatico() {
                    cronoAgeElem.value = '';
                    baremoElem.value = '';

                    if (!birthDateElem.value || !evalDateElem.value) return;

                    const birthDate = new Date(birthDateElem.value + 'T00:00:00');
                    const evalDate = new Date(evalDateElem.value + 'T00:00:00');

                    const age = calculatePreciseAge(birthDate, evalDate);

                    if (!age) {
                        Swal.fire({ icon: 'error', title: 'Error', text: 'Verifica las fechas ingresadas.' });
                        return;
                    }

                    // Mostrar Edad Cronológica
                    cronoAgeElem.value = `${age.years}A ${age.months}M ${age.days}D`;

                    // Calcular Rango
                    const rango = getRangoCELF921(age);
                    
                    if (rango) {
                        baremoElem.value = rango;
                    } else {
                        baremoElem.value = "Fuera de Rango";
                        Swal.fire({ 
                            icon: 'warning', 
                            title: 'Edad Fuera de Rango', 
                            text: `La edad del paciente (${age.years} años) está fuera del rango para CELF 9-21 (9 a 21 años).` 
                        });
                    }
                }

                // Evento al cambiar la fecha de evaluación
                evalDateElem.addEventListener('change', calcularEdadAutomatico);

                // Calcular al inicio si ya hay fechas (por si es un update en el futuro)
                if(birthDateElem.value && evalDateElem.value) {
                    calcularEdadAutomatico();
                }
            });
        </script>
    </div>
</body>
</html>