<?php
require_once '../../includes/auth.php';
require_once __DIR__ . '/../../includes/database.php';
require_once '../../includes/header.php';
requireRole('direccion');  // Cambiamos a rol de dirección

// Configuración de página
$pageTitle = "Nuevo Estudiante";
$nombreColegio = APP_NAME;
$usuarioNombre = $_SESSION['user_name'] ?? 'Director';
$usuarioRol = 'Director';

// Procesar formulario si se envió (código idéntico al del admin)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Validar y procesar los datos del formulario
    $nombre = trim($_POST['nombre'] ?? '');
    $apellido = trim($_POST['apellido'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $telefono = trim($_POST['telefono'] ?? '');
    $dni = trim($_POST['dni'] ?? '');
    $grado = $_POST['grado'] ?? '';
    $seccion = $_POST['seccion'] ?? '';
    $nivel = $_POST['nivel'] ?? '';
    $fecha_nacimiento = $_POST['fecha_nacimiento'] ?? '';

    // Validaciones básicas
    $errores = [];
    if (empty($nombre)) $errores[] = "El nombre es requerido";
    if (empty($apellido)) $errores[] = "El apellido es requerido";
    if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) $errores[] = "Email inválido";
    if (empty($dni) || !preg_match('/^[0-9]{8}$/', $dni)) $errores[] = "DNI inválido, debe tener 8 dígitos";
    if (empty($grado)) $errores[] = "El grado es requerido";
    if (empty($seccion)) $errores[] = "La sección es requerida";
    if (empty($nivel)) $errores[] = "El nivel es requerido";

    if (empty($errores)) {
        global $db;
        try {
            // Iniciar transacción
            $db->beginTransaction();
            
            // 1. Insertar en tabla usuarios (AGREGADO CAMPO DNI)
            $usuarioId = $db->insert("usuarios", [
                'nombre' => $nombre,
                'apellido' => $apellido,
                'dni' => $dni, // Aquí agregamos el DNI
                'email' => $email,
                'telefono' => $telefono,
                'password' => password_hash($dni, PASSWORD_DEFAULT),
                'tipo' => 'estudiante',
                'fecha_creacion' => date('Y-m-d H:i:s')
            ]);
            
            // 2. Insertar en tabla estudiantes
            $db->insert("estudiantes", [
                'usuario_id' => $usuarioId,
                'nivel' => $nivel,
                'grado' => $grado,
                'seccion' => $seccion,
                'fecha_nacimiento' => $fecha_nacimiento
            ]);
            
            // Confirmar transacción
            $db->commit();
            
            // Redirigir al listado con mensaje de éxito
            $_SESSION['mensaje'] = "Estudiante registrado exitosamente";
            header("Location: " . APP_URL . "/modules/direccion/lista_alumnos.php");
            exit;
        } catch (Exception $e) {
            // Revertir transacción en caso de error
            $db->rollBack();
            $errores[] = "Error al registrar el estudiante: " . $e->getMessage();
        }
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $pageTitle ?> - <?= $nombreColegio ?></title>
    
    <!-- Cargar Font Awesome desde CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Cargar Bootstrap CSS local -->
    <link href="<?= APP_URL ?>/assets/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Estilos personalizados -->
    <style>
        /* ============================= */
        /* ESTILOS DEL MENÚ LATERAL DIRECTOR */
        /* ============================= */
        :root {
            --primary: #2c3e50;
            --secondary: #9b59b6; /* Morado director */
            --accent: #e74c3c;
            --light: #ecf0f1;
            --dark: #34495e;
            --success: #2ecc71;
            --warning: #f39c12;
            --sidebar-width: 280px;
            --header-height: 70px;
            --director-color: #9b59b6;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            display: flex;
            min-height: 100vh;
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow-x: hidden;
        }

        /* Sidebar */
        .sidebar {
            width: var(--sidebar-width);
            background: linear-gradient(to bottom, var(--primary), var(--dark));
            color: white;
            height: 100vh;
            position: fixed;
            overflow-y: auto;
            transition: all 0.3s ease;
            box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transform: translateX(-100%);
        }

        .sidebar.active {
            transform: translateX(0);
        }

        .logo-container {
            padding: 20px 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background-color: rgba(0, 0, 0, 0.1);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo i {
            font-size: 28px;
            color: var(--director-color);
        }

        .logo h1 {
            font-size: 22px;
            font-weight: 600;
        }

        .menu-section {
            padding: 25px 0;
        }

        .menu-title {
            padding: 0 25px 10px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 500;
        }

        .menu-items {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .menu-item {
            padding: 12px 25px;
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            transition: all 0.2s ease;
            border-left: 4px solid transparent;
            position: relative;
        }

        .menu-item:hover {
            background-color: rgba(255, 255, 255, 0.05);
            border-left-color: var(--director-color);
        }

        .menu-item.active {
            background-color: rgba(255, 255, 255, 0.1);
            border-left-color: var(--director-color);
        }

        .menu-item i {
            width: 24px;
            text-align: center;
            font-size: 18px;
            color: var(--director-color);
        }

        .menu-item span {
            font-size: 16px;
            font-weight: 500;
        }

        /* Main Content */
        .main-content {
            flex: 1;
            margin-left: 0;
            padding-bottom: 30px;
            transition: all 0.3s;
            width: 100%;
        }

        .main-content.sidebar-open {
            margin-left: var(--sidebar-width);
        }

        /* Header */
        .header {
            height: var(--header-height);
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 900;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .toggle-menu {
            display: block;
            font-size: 24px;
            cursor: pointer;
            color: var(--dark);
        }

        .search-bar {
            position: relative;
        }

        .search-bar input {
            padding: 10px 15px 10px 40px;
            border-radius: 30px;
            border: 1px solid #ddd;
            width: 100%;
            max-width: 300px;
            transition: all 0.3s ease;
        }

        .search-bar input:focus {
            outline: none;
            border-color: var(--director-color);
            box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.2);
        }

        .search-bar i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #95a5a6;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-profile {
            position: relative;
            cursor: pointer;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--director-color), #8e44ad);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }

        .user-details {
            display: flex;
            flex-direction: column;
        }

        .user-name {
            font-weight: 600;
            font-size: 15px;
        }

        .user-role {
            font-size: 13px;
            color: #7f8c8d;
        }

        /* Footer */
        .footer {
            padding: 20px 30px;
            text-align: center;
            color: #7f8c8d;
            font-size: 14px;
            border-top: 1px solid #eee;
            margin-top: 30px;
            background: white;
        }

        /* ============================= */
        /* ESTILOS DE FORMULARIO */
        /* ============================= */
        .content {
            padding: 20px;
        }
        
        .form-container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        
        .app-header {
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            color: white;
            padding: 20px 25px;
            position: relative;
        }
        
        .app-header h1 {
            font-weight: 700;
            font-size: 1.5rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 15px;
            letter-spacing: -0.5px;
        }
        
        .app-header h1 i {
            font-size: 1.5rem;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .back-btn {
            background: rgba(255, 255, 255, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.35);
            color: white;
            padding: 10px 18px;
            border-radius: 10px;
            transition: all 0.3s;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            font-size: 0.95rem;
            margin-top: 15px;
        }
        
        .back-btn:hover {
            background: rgba(255, 255, 255, 0.35);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .form-body {
            padding: 25px;
        }
        
        .card-section {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
            border: 1px solid #f0f4f8;
        }
        
        .card-section h2 {
            color: #9b59b6;
            font-weight: 700;
            font-size: 1.3rem;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .card-section h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 4px;
            background: #9b59b6;
            border-radius: 2px;
        }
        
        .card-section h2 i {
            color: #118ab2;
            font-size: 1.2rem;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            display: block;
        }
        
        .form-control, .form-select {
            border-radius: 10px;
            padding: 12px 15px;
            border: 2px solid #e9ecef;
            transition: all 0.3s;
            font-size: 1rem;
            width: 100%;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: #9b59b6;
            box-shadow: 0 0 0 4px rgba(155, 89, 182, 0.2);
            outline: none;
        }
        
        .btn-submit {
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            border: none;
            padding: 12px 24px;
            font-weight: 600;
            border-radius: 10px;
            transition: all 0.3s;
            font-size: 1rem;
            color: white;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(155, 89, 182, 0.4);
        }
        
        .alert-danger {
            background: rgba(231, 76, 60, 0.15);
            border: 1px solid rgba(231, 76, 60, 0.25);
            color: #e74c3c;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        .alert-danger ul {
            margin-bottom: 0;
        }
        
        /* ============================= */
        /* RESPONSIVE DESIGN */
        /* ============================= */
        @media (min-width: 768px) {
            .sidebar {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: var(--sidebar-width);
            }
            
            .sidebar.active {
                transform: translateX(0);
            }
            
            .toggle-menu {
                display: none;
            }
            
            .app-header h1 {
                font-size: 1.8rem;
            }
            
            .form-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
        }

        @media (min-width: 992px) {
            .app-header h1 {
                font-size: 2rem;
            }
            
            .back-btn {
                position: absolute;
                top: 25px;
                right: 25px;
                margin-top: 0;
            }
        }
        
        @media (max-width: 767px) {
            .header {
                padding: 0 15px;
            }
            
            .app-header {
                padding: 15px 20px;
            }
            
            .app-header h1 {
                font-size: 1.3rem;
            }
        }
        
        @media (max-width: 576px) {
            .content {
                padding: 15px;
            }
            
            .app-header h1 {
                font-size: 1.2rem;
                flex-wrap: wrap;
            }
        }
        /* Agregar estos estilos al final de tu hoja de estilo */
.form-control, .form-select {
    max-width: 500px; /* Tamaño máximo para campos de texto */
    box-sizing: border-box;
}

/* Ajuste específico para el campo de fecha */
.date-input input[type="date"] {
    max-width: 450px;
}

/* Para mantener proporción en móviles */
@media (max-width: 767px) {
    .form-control, .form-select {
        max-width: 100%;
    }
}
    </style>
</head>

<body>
    <!-- Sidebar Menu -->
    <div class="sidebar">
        <div class="logo-container">
            <div class="logo">
                <i class="fas fa-user-tie"></i>
                <h1><?= $nombreColegio ?></h1>
            </div>
        </div>

        <div class="menu-section">
            <h3 class="menu-title">Principal</h3>
            <ul class="menu-items">
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/dashboard.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-home"></i>
                        <span>Menú Principal</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/notificaciones.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-inbox"></i>
                        <span>Buzón de Mensajería</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/historial_de_correos.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-history"></i>
                        <span>Historial de Comunicados</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="menu-section">
            <h3 class="menu-title">Funciones</h3>
            <ul class="menu-items">
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/lista_alumnos.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-chart-bar"></i>
                        <span>Lista de Alumnos</span>
                    </a>
                </li>
               <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/lista_docentes.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <span>Personal Académico</span>
                    </a>
                </li>
                <li class="menu-item active">
                    <a href="<?= APP_URL ?>/modules/direccion/usuarios.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-user-graduate"></i>
                        <span>Añadir Estudiantes</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/agregar_docente.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <span>Añadir Docente</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/anadir_auxiliar.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-user-graduate"></i>
                        <span>Añadir Auxiliar</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/correo_administrativo.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-users"></i>
                        <span>Correo Administrativo</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/reportes.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-chart-bar"></i>
                        <span>Reportes de Asistencia</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="menu-section">
            <h3 class="menu-title">Administración</h3>
            <ul class="menu-items">
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/cambiar_contrasena.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-cog"></i>
                        <span>Cambiar de Contraseña</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/auth/logout.php" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>Cerrar Sesión</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Header Director -->
        <header class="header">
            <div class="header-left">
                <div class="toggle-menu">
                    <i class="fas fa-bars"></i>
                </div>
            </div>

            <div class="header-right">
                <div class="user-profile">
                    <div class="user-info">
                        <div class="user-avatar"><?= substr($usuarioNombre, 0, 1) . (strpos($usuarioNombre, ' ') !== false ? substr($usuarioNombre, strpos($usuarioNombre, ' ') + 1, 1) : '') ?></div>
                        <div class="user-details">
                            <div class="user-name"><?= $usuarioNombre ?></div>
                            <div class="user-role"><?= $usuarioRol ?></div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Content Area -->
        <div class="content">
            <div class="form-container">
                <div class="app-header">
                    <h1><i class="fas fa-user-graduate"></i> Nuevo Estudiante</h1>
                    <a href="<?= APP_URL ?>/modules/direccion/lista_alumnos.php" class="back-btn">
                        <i class="fas fa-arrow-left"></i> Volver a Lista
                    </a>
                </div>
                
                <div class="form-body">
                    <?php if (!empty($errores)): ?>
                        <div class="alert alert-danger">
                            <strong>Corrija los siguientes errores:</strong>
                            <ul>
                                <?php foreach ($errores as $error): ?>
                                    <li><?= htmlspecialchars($error) ?></li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    <?php endif; ?>
                    
                    <form method="POST" action="">
                        <div class="card-section">
                            <h2><i class="fas fa-user-circle"></i> Datos Personales</h2>
                            
                            <div class="form-grid">
                                <div class="form-group">
                                    <label class="form-label" for="nombre">Nombre</label>
                                    <input type="text" class="form-control" id="nombre" name="nombre" required 
                                           value="<?= htmlspecialchars($_POST['nombre'] ?? '') ?>">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label" for="apellido">Apellido</label>
                                    <input type="text" class="form-control" id="apellido" name="apellido" required
                                           value="<?= htmlspecialchars($_POST['apellido'] ?? '') ?>">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label" for="dni">DNI (será usado como contraseña)</label>
                                    <input type="text" class="form-control" id="dni" name="dni" required 
                                           pattern="[0-9]{8}" title="Ingrese un DNI válido de 8 dígitos"
                                           value="<?= htmlspecialchars($_POST['dni'] ?? '') ?>">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label" for="email">Email</label>
                                    <input type="email" class="form-control" id="email" name="email" required
                                           value="<?= htmlspecialchars($_POST['email'] ?? '') ?>">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label" for="telefono">Teléfono</label>
                                    <input type="tel" class="form-control" id="telefono" name="telefono"
                                           value="<?= htmlspecialchars($_POST['telefono'] ?? '') ?>">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label" for="fecha_nacimiento">Fecha de Nacimiento</label>
                                    <input type="date" class="form-control" id="fecha_nacimiento" name="fecha_nacimiento"
                                           value="<?= htmlspecialchars($_POST['fecha_nacimiento'] ?? '') ?>">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card-section">
                            <h2><i class="fas fa-graduation-cap"></i> Información Académica</h2>
                            
                            <div class="form-grid">
                                <div class="form-group">
                                    <label class="form-label" for="nivel">Nivel</label>
                                    <select class="form-select" id="nivel" name="nivel" required>
                                        <option value="">Seleccionar...</option>
                                        <option value="primaria" <?= ($_POST['nivel'] ?? '') === 'primaria' ? 'selected' : '' ?>>Primaria</option>
                                        <option value="secundaria" <?= ($_POST['nivel'] ?? '') === 'secundaria' ? 'selected' : '' ?>>Secundaria</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="form-label" for="grado">Grado</label>
                                    <select class="form-select" id="grado" name="grado" required>
                                        <option value="">Seleccionar...</option>
                                        <?php 
                                        $selectedNivel = $_POST['nivel'] ?? '';
                                        $selectedGrado = $_POST['grado'] ?? '';
                                        
                                        // Mostrar grados según nivel seleccionado
                                        if ($selectedNivel === 'primaria') {
                                            for ($i = 1; $i <= 6; $i++): 
                                                $selected = ($selectedGrado == $i) ? 'selected' : '';
                                                ?>
                                                <option value="<?= $i ?>" <?= $selected ?>>
                                                    <?= $i ?>
                                                </option>
                                            <?php endfor;
                                        } elseif ($selectedNivel === 'secundaria') {
                                            for ($i = 1; $i <= 5; $i++): 
                                                $selected = ($selectedGrado == $i) ? 'selected' : '';
                                                ?>
                                                <option value="<?= $i ?>" <?= $selected ?>>
                                                    <?= $i ?>
                                                </option>
                                            <?php endfor;
                                        } else {
                                            // Mostrar todos los grados si no hay nivel seleccionado
                                            for ($i = 1; $i <= 6; $i++): ?>
                                                <option value="<?= $i ?>" <?= ($selectedGrado == $i) ? 'selected' : '' ?>>
                                                    <?= $i ?>
                                                </option>
                                            <?php endfor;
                                        }
                                        ?>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label" for="seccion">Sección</label>
                                    <select class="form-select" id="seccion" name="seccion" required>
                                        <option value="">Seleccionar...</option>
                                        <?php foreach (range('A', 'E') as $letra): ?>
                                            <option value="<?= $letra ?>" <?= ($_POST['seccion'] ?? '') === $letra ? 'selected' : '' ?>>
                                                Sección <?= $letra ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <button type="submit" class="btn btn-submit">
                                <i class="fas fa-save"></i> Guardar Estudiante
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="footer">
            <p>Sistema Escolar Integrado v3.0 © <?= date('Y') ?> - Todos los derechos reservados</p>
        </footer>
    </div>

    <!-- Bootstrap JS -->
    <script src="<?= APP_URL ?>/assets/js/bootstrap.bundle.min.js"></script>
    
    <!-- Script para mejorar la experiencia de usuario -->
    <script>
        // Toggle sidebar on mobile
        document.querySelector('.toggle-menu').addEventListener('click', function() {
            document.querySelector('.sidebar').classList.toggle('active');
            document.querySelector('.main-content').classList.toggle('sidebar-open');
        });

        // Cerrar menú lateral si se hace clic fuera de él
        document.addEventListener('click', function(event) {
            const sidebar = document.querySelector('.sidebar');
            const toggleBtn = document.querySelector('.toggle-menu');
            
            if (sidebar.classList.contains('active') && 
                !sidebar.contains(event.target) && 
                !toggleBtn.contains(event.target)) {
                sidebar.classList.remove('active');
                document.querySelector('.main-content').classList.remove('sidebar-open');
            }
        });
        
        // Validación en tiempo real del email
        document.getElementById('email').addEventListener('blur', function() {
            const email = this.value;
            if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                this.classList.add('is-invalid');
            } else {
                this.classList.remove('is-invalid');
            }
        });
        
        // Habilitar/deshabilitar secciones según nivel
        document.getElementById('nivel').addEventListener('change', function() {
            const gradoSelect = document.getElementById('grado');
            gradoSelect.innerHTML = '<option value="">Seleccionar...</option>';
            
            if (this.value === 'primaria') {
                for (let i = 1; i <= 6; i++) {
                    gradoSelect.innerHTML += `<option value="${i}">${i}</option>`;
                }
            } else if (this.value === 'secundaria') {
                for (let i = 1; i <= 5; i++) {
                    gradoSelect.innerHTML += `<option value="${i}">${i}</option>`;
                }
            }
        });
        
        // Validar y formatear DNI
        document.getElementById('dni').addEventListener('input', function() {
            this.value = this.value.replace(/\D/g, '').slice(0, 8);
        });
    </script>
</body>
</html>