<?php
require_once '../../includes/auth.php';
require_once __DIR__ . '/../../includes/database.php';
require_once '../../includes/header.php';
requireRole('direccion');

// Obtener datos del director desde la sesión
$usuarioNombre = $_SESSION['user_name'] ?? 'Director';
$usuarioId = $_SESSION['user_id'] ?? 0;
$usuarioRol = 'Director';
$nombreColegio = APP_NAME;

// INICIALIZAR TODAS LAS VARIABLES PARA EVITAR ERRORES
$success_message = '';
$error_message = '';
$searchTerm = '';
$docentes = [];
$auxiliares = [];
$totalDocentes = 0;
$activos = 0;
$inactivos = 0;
$licencia = 0;
$totalAuxiliares = 0;
$auxiliaresActivos = 0;
$auxiliaresInactivos = 0;

// Procesar búsqueda
if (isset($_GET['search']) && !empty($_GET['search'])) {
    $searchTerm = htmlspecialchars(trim($_GET['search']));
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['guardar'])) {
    // Reemplazar FILTER_SANITIZE_STRING (obsoleto) con FILTER_DEFAULT y luego sanitizar
    $id = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
    $type = filter_input(INPUT_POST, 'type', FILTER_DEFAULT);
    $nombre = filter_input(INPUT_POST, 'nombre', FILTER_DEFAULT);
    $apellido = filter_input(INPUT_POST, 'apellido', FILTER_DEFAULT);
    $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
    $telefono = filter_input(INPUT_POST, 'telefono', FILTER_DEFAULT);
    $especialidad = filter_input(INPUT_POST, 'especialidad', FILTER_DEFAULT);
    $estado = filter_input(INPUT_POST, 'estado', FILTER_DEFAULT);
    
    // Sanitizar manualmente los valores
    $type = $type ? htmlspecialchars($type, ENT_QUOTES, 'UTF-8') : '';
    $nombre = $nombre ? htmlspecialchars($nombre, ENT_QUOTES, 'UTF-8') : '';
    $apellido = $apellido ? htmlspecialchars($apellido, ENT_QUOTES, 'UTF-8') : '';
    $telefono = $telefono ? htmlspecialchars($telefono, ENT_QUOTES, 'UTF-8') : '';
    $especialidad = $especialidad ? htmlspecialchars($especialidad, ENT_QUOTES, 'UTF-8') : '';
    $estado = $estado ? htmlspecialchars($estado, ENT_QUOTES, 'UTF-8') : '';

    if ($id && $type && $nombre && $email) {
        try {
            // Obtener la conexión PDO directamente
            $pdo = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_NAME, DB_USER, DB_PASS);
            $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            
            // Usar consultas preparadas para seguridad
            $stmt = $pdo->prepare("UPDATE usuarios SET nombre = ?, apellido = ?, email = ?, telefono = ? WHERE id = ?");
            $stmt->execute([$nombre, $apellido, $email, $telefono, $id]);

            // Actualizar datos específicos según el tipo
            if ($type === 'docente') {
                $stmt = $pdo->prepare("UPDATE docentes SET especialidad = ?, estado = ? WHERE usuario_id = ?");
                $stmt->execute([$especialidad, $estado, $id]);
            } elseif ($type === 'auxiliar') {
                $stmt = $pdo->prepare("UPDATE auxiliares SET estado = ? WHERE usuario_id = ?");
                $stmt->execute([$estado, $id]);
            }

            $success_message = "¡Cambios guardados con éxito!";
        } catch (Exception $e) {
            $error_message = "Error al guardar los cambios: " . $e->getMessage();
        }
    } else {
        $error_message = "Datos incompletos para la actualización";
    }
}

// Obtener todos los docentes con filtro de búsqueda si existe
try {
    $pdo = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_NAME, DB_USER, DB_PASS);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $sql = "
        SELECT u.id, u.nombre, u.apellido, u.email, u.telefono, u.dni, d.especialidad, d.estado, d.id as docente_id 
        FROM usuarios u
        JOIN docentes d ON d.usuario_id = u.id
    ";
    
    if (!empty($searchTerm)) {
        $sql .= " WHERE (u.nombre LIKE :search OR u.apellido LIKE :search OR u.dni LIKE :search OR u.email LIKE :search) ";
    }
    
    $sql .= " ORDER BY u.apellido, u.nombre";
    
    $stmt = $pdo->prepare($sql);
    
    if (!empty($searchTerm)) {
        $searchParam = "%$searchTerm%";
        $stmt->bindParam(':search', $searchParam, PDO::PARAM_STR);
    }
    
    $stmt->execute();
    $docentes = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
    $docentes = [];
    $error_message = "Error al obtener docentes: " . $e->getMessage();
}

// Contar estados de docentes
$totalDocentes = count($docentes);
$activos = 0;
$inactivos = 0;
$licencia = 0;

foreach ($docentes as $docente) {
    switch ($docente['estado']) {
        case 'activo':
            $activos++;
            break;
        case 'inactivo':
            $inactivos++;
            break;
        case 'licencia':
            $licencia++;
            break;
    }
}

// Obtener todos los auxiliares con filtro de búsqueda si existe
try {
    $pdo = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_NAME, DB_USER, DB_PASS);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $sql = "
        SELECT u.id, u.nombre, u.apellido, u.email, u.telefono, u.dni, a.estado, a.id as auxiliar_id 
        FROM usuarios u
        JOIN auxiliares a ON a.usuario_id = u.id
    ";
    
    if (!empty($searchTerm)) {
        $sql .= " WHERE (u.nombre LIKE :search OR u.apellido LIKE :search OR u.dni LIKE :search OR u.email LIKE :search) ";
    }
    
    $sql .= " ORDER BY u.apellido, u.nombre";
    
    $stmt = $pdo->prepare($sql);
    
    if (!empty($searchTerm)) {
        $searchParam = "%$searchTerm%";
        $stmt->bindParam(':search', $searchParam, PDO::PARAM_STR);
    }
    
    $stmt->execute();
    $auxiliares = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
    $auxiliares = [];
    if (empty($error_message)) {
        $error_message = "Error al obtener auxiliares: " . $e->getMessage();
    }
}

// Contar estados de auxiliares
$totalAuxiliares = count($auxiliares);
$auxiliaresActivos = 0;
$auxiliaresInactivos = 0;

foreach ($auxiliares as $auxiliar) {
    if ($auxiliar['estado'] === 'activo') {
        $auxiliaresActivos++;
    } elseif ($auxiliar['estado'] === 'inactivo') {
        $auxiliaresInactivos++;
    }
}

// Configurar título de página
$pageTitle = "Gestión de Personal";
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($pageTitle) ?> - <?= htmlspecialchars($nombreColegio) ?></title>
    
    <!-- Meta tags adicionales para compatibilidad -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Sistema de gestión de personal académico">
    
    <!-- Cargar Font Awesome desde CDN con fallback -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Cargar Bootstrap CSS con versión específica -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Estilos personalizados CORREGIDOS -->
    <style>
        /* ============================= */
        /* VARIABLES CSS PARA COMPATIBILIDAD */
        /* ============================= */
        :root {
            --primary: #2c3e50;
            --secondary: #9b59b6;
            --accent: #e74c3c;
            --light: #ecf0f1;
            --dark: #34495e;
            --success: #2ecc71;
            --warning: #f39c12;
            --sidebar-width: 280px;
            --header-height: 70px;
            --director-color: #9b59b6;
        }

        /* Reset básico para compatibilidad */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

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

        /* ============================= */
        /* SIDEBAR - CORREGIDO */
        /* ============================= */
        .sidebar {
            width: var(--sidebar-width);
            background: linear-gradient(to bottom, var(--primary), var(--dark));
            color: white;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            overflow-y: auto;
            transition: transform 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);
        }

        /* En desktop, mostrar por defecto */
        @media (min-width: 768px) {
            .sidebar {
                transform: translateX(0);
                position: fixed;
            }
            
            .main-content {
                margin-left: var(--sidebar-width);
                width: calc(100% - var(--sidebar-width));
            }
            
            .toggle-menu {
                display: none;
            }
        }

        .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;
            margin: 0;
        }

        .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 {
            position: relative;
        }

        .menu-item a {
            padding: 12px 25px;
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            transition: all 0.2s ease;
            border-left: 4px solid transparent;
            color: inherit;
            text-decoration: none;
        }

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

        .menu-item.active a {
            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 - CORREGIDO */
        /* ============================= */
        .main-content {
            flex: 1;
            margin-left: 0;
            padding-bottom: 30px;
            transition: margin-left 0.3s ease, width 0.3s ease;
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
        }

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

        /* ============================= */
        /* HEADER - CORREGIDO */
        /* ============================= */
        .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;
            width: 100%;
        }

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

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

        /* Ocultar hamburguesa en desktop */
        @media (min-width: 768px) {
            .toggle-menu {
                display: none;
            }
        }

        .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;
        }

        /* ============================= */
        /* CONTENT AREA - CORREGIDO */
        /* ============================= */
        .content {
            padding: 30px;
            flex: 1;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .teachers-container {
            width: 100%;
            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);
            color: white;
        }

        /* ============================= */
        /* PESTAÑAS - CORREGIDAS */
        /* ============================= */
        .nav-tabs {
            border-bottom: 2px solid #e9ecef;
            margin-bottom: 20px;
            background: transparent;
        }
        
        .nav-tabs .nav-link {
            padding: 12px 25px;
            border: none;
            border-radius: 8px 8px 0 0;
            font-weight: 600;
            color: #6c757d;
            transition: all 0.3s;
            background: transparent;
            margin-right: 5px;
        }
        
        .nav-tabs .nav-link.active {
            color: #9b59b6 !important;
            background-color: transparent !important;
            border-bottom: 3px solid #9b59b6 !important;
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;
        }
        
        .nav-tabs .nav-link:hover:not(.active) {
            color: #9b59b6;
            background-color: rgba(155, 89, 182, 0.05);
            border-color: transparent;
        }

        /* ============================= */
        /* SECCIONES Y CARDS */
        /* ============================= */
        .section-card {
            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;
        }
        
        .section-card 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;
        }
        
        .section-card h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 4px;
            background: #9b59b6;
            border-radius: 2px;
        }
        
        .section-card h2 i {
            color: #118ab2;
            font-size: 1.2rem;
        }
        
        .teacher-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #f0e8f5, #e6d9f1);
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            border: 1px solid #d9cfe6;
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: #8e44ad;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 1rem;
            color: #7f8c8d;
        }
        
        /* ============================= */
        /* BUSCADOR */
        /* ============================= */
        .search-container {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
        }
        
        .search-form {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .search-input {
            flex: 1;
            position: relative;
        }
        
        .search-input input {
            padding-left: 40px;
            border-radius: 25px;
        }
        
        .search-input i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
        }
        
        .search-results {
            margin-top: 10px;
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        /* ============================= */
        /* TABLAS */
        /* ============================= */
        .teachers-table-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
            padding: 20px;
            margin-bottom: 20px;
            overflow-x: auto;
            border: 1px solid #f0f4f8;
        }
        
        .teachers-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }
        
        .teachers-table th {
            background: #9b59b6;
            color: white;
            font-weight: 600;
            padding: 14px 15px;
            text-align: left;
            font-size: 0.95rem;
        }
        
        .teachers-table th:first-child {
            border-top-left-radius: 10px;
        }
        
        .teachers-table th:last-child {
            border-top-right-radius: 10px;
        }
        
        .teachers-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
            font-size: 0.95rem;
        }
        
        .teachers-table tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        .teachers-table tr:hover {
            background-color: #f5edfa;
        }
        
        /* ============================= */
        /* STATUS BADGES */
        /* ============================= */
        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.85rem;
            display: inline-block;
        }
        
        .status-active {
            background-color: rgba(6, 214, 160, 0.15);
            color: #06d6a0;
        }
        
        .status-inactive {
            background-color: rgba(239, 71, 111, 0.15);
            color: #ef476f;
        }
        
        .status-licencia {
            background-color: rgba(255, 209, 102, 0.25);
            color: #e6a500;
        }
        
        /* ============================= */
        /* BOTONES DE ACCIÓN */
        /* ============================= */
        .action-btn {
            padding: 6px 12px;
            border-radius: 20px;
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.85rem;
            transition: all 0.2s;
            border: none;
            cursor: pointer;
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
        }
        
        .btn-edit {
            background: rgba(52, 152, 219, 0.15);
            color: #3498db;
        }
        
        .btn-edit:hover {
            background: rgba(52, 152, 219, 0.25);
            color: #3498db;
        }
        
        .btn-view {
            background: rgba(155, 89, 182, 0.15);
            color: #9b59b6;
        }
        
        .btn-view:hover {
            background: rgba(155, 89, 182, 0.25);
            color: #9b59b6;
        }
        
        .btn-contact {
            background: rgba(46, 204, 113, 0.15);
            color: #2ecc71;
        }
        
        .btn-contact:hover {
            background: rgba(46, 204, 113, 0.25);
            color: #2ecc71;
        }
        
        /* ============================= */
        /* EMPTY STATE */
        /* ============================= */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #6c757d;
        }
        
        .empty-state i {
            font-size: 4rem;
            color: #e2e8f0;
            margin-bottom: 20px;
            opacity: 0.7;
        }
        
        .empty-state h4 {
            font-weight: 700;
            margin-bottom: 15px;
            color: #212529;
            font-size: 1.4rem;
        }
        
        .empty-state p {
            font-size: 1rem;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.7;
        }
        
        /* ============================= */
        /* ALERTAS */
        /* ============================= */
        .alert-container {
            width: 100%;
            margin: 20px auto 0;
        }

        .alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 16px;
        }

        .alert-success {
            background-color: #d1edff;
            color: #0c5460;
            border: 1px solid #b8daff;
        }

        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        /* ============================= */
        /* MODAL */
        /* ============================= */
        .modal-content {
            border-radius: 12px;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            color: white;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            padding: 15px 20px;
            border-bottom: none;
        }
        
        .modal-title {
            font-weight: 600;
        }

        .btn-close {
            background: transparent;
            border: none;
            color: white;
            opacity: 0.8;
        }

        .btn-close:hover {
            opacity: 1;
        }
        
        .modal-body {
            padding: 25px;
        }
        
        .form-label {
            font-weight: 600;
            color: #34495e;
            margin-bottom: 8px;
        }
        
        .form-control, .form-select {
            border-radius: 8px;
            padding: 10px 15px;
            border: 1px solid #ddd;
            transition: all 0.3s;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: #9b59b6;
            box-shadow: 0 0 0 0.25rem rgba(155, 89, 182, 0.25);
        }
        
        .btn-save {
            background: #9b59b6;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s;
            color: white;
        }
        
        .btn-save:hover {
            background: #8e44ad;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #6c757d;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
        }
        
        /* ============================= */
        /* FOOTER */
        /* ============================= */
        .footer {
            padding: 20px 30px;
            text-align: center;
            color: #7f8c8d;
            font-size: 14px;
            border-top: 1px solid #eee;
            margin-top: auto;
            background: white;
        }
        
        /* ============================= */
        /* RESPONSIVE DESIGN - CORREGIDO */
        /* ============================= */
        @media (max-width: 767px) {
            .header {
                padding: 0 15px;
            }
            
            .content {
                padding: 15px;
            }
            
            .app-header {
                padding: 15px 20px;
            }
            
            .app-header h1 {
                font-size: 1.3rem;
            }

            .back-btn {
                position: static;
                margin-top: 10px;
            }

            .user-details {
                display: none;
            }
            
            .search-form {
                flex-direction: column;
            }
            
            .search-form .btn {
                width: 100%;
            }

            /* En móvil, cuando el sidebar está abierto, evitar scroll del contenido principal */
            body.sidebar-open {
                overflow: hidden;
            }
            
            .main-content.sidebar-open {
                margin-left: 0;
                width: 100%;
            }
            
            .sidebar.active {
                transform: translateX(0);
                width: 280px;
            }
        }
        
        @media (max-width: 576px) {
            .content {
                padding: 15px;
            }
            
            .app-header h1 {
                font-size: 1.2rem;
                flex-wrap: wrap;
            }
            
            .teacher-stats {
                grid-template-columns: 1fr;
            }

            .nav-tabs .nav-link {
                padding: 8px 15px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>

<body>
    <!-- Sidebar Menu -->
    <div class="sidebar" id="sidebar">
        <div class="logo-container">
            <div class="logo">
                <i class="fas fa-user-tie"></i>
                <h1><?= htmlspecialchars($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">
                        <i class="fas fa-chart-bar"></i>
                        <span>Lista de Alumnos</span>
                    </a>
                </li>
               <li class="menu-item active">
                    <a href="<?= APP_URL ?>/modules/direccion/lista_docentes.php">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <span>Personal Académico</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="<?= APP_URL ?>/modules/direccion/usuarios.php">
                        <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">
                        <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">
                        <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">
                        <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">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>Cerrar Sesión</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-content" id="mainContent">
        <!-- Header Director -->
        <header class="header">
            <div class="header-left">
                <button class="toggle-menu" id="toggleMenu" type="button">
                    <i class="fas fa-bars"></i>
                </button>
            </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"><?= htmlspecialchars($usuarioNombre) ?></div>
                            <div class="user-role"><?= htmlspecialchars($usuarioRol) ?></div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Content Area -->
        <div class="content">
            <!-- Mostrar mensajes de éxito o error -->
            <?php if (!empty($success_message)): ?>
                <div class="alert-container">
                    <div class="alert alert-success" role="alert">
                        <?= htmlspecialchars($success_message) ?>
                        <button type="button" class="btn-close" onclick="this.parentElement.style.display='none'" aria-label="Close">×</button>
                    </div>
                </div>
            <?php endif; ?>
            
            <?php if (!empty($error_message)): ?>
                <div class="alert-container">
                    <div class="alert alert-danger" role="alert">
                        <?= htmlspecialchars($error_message) ?>
                        <button type="button" class="btn-close" onclick="this.parentElement.style.display='none'" aria-label="Close">×</button>
                    </div>
                </div>
            <?php endif; ?>
            
            <div class="teachers-container">
                <div class="app-header">
                    <h1><i class="fas fa-chalkboard-teacher"></i> Gestión de Personal Académico</h1>
                    <a href="<?= APP_URL ?>/modules/direccion/dashboard.php" class="back-btn">
                        <i class="fas fa-arrow-left"></i> Volver al Panel
                    </a>
                </div>
                
                <div class="container py-4">
                    <!-- Buscador general -->
                    <div class="search-container">
                        <form method="get" action="" class="search-form">
                            <div class="search-input">
                                <i class="fas fa-search"></i>
                                <input type="text" name="search" class="form-control" placeholder="Buscar por nombre, apellido, DNI o email..." value="<?= htmlspecialchars($searchTerm) ?>">
                            </div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search"></i> Buscar
                            </button>
                            <?php if (!empty($searchTerm)): ?>
                                <a href="?" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Limpiar
                                </a>
                            <?php endif; ?>
                        </form>
                        <?php if (!empty($searchTerm)): ?>
                            <div class="search-results">
                                <i class="fas fa-info-circle"></i> 
                                Mostrando resultados para: "<?= htmlspecialchars($searchTerm) ?>"
                                <?php if ($totalDocentes > 0 || $totalAuxiliares > 0): ?>
                                    - Se encontraron <?= $totalDocentes ?> docente(s) y <?= $totalAuxiliares ?> auxiliar(es)
                                <?php else: ?>
                                    - No se encontraron resultados
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                    
                    <!-- Pestañas para Docentes y Auxiliares -->
                    <ul class="nav nav-tabs" id="personalTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="docentes-tab" data-tab="docentes" type="button" role="tab" aria-controls="docentes" aria-selected="true">
                                <i class="fas fa-chalkboard-teacher me-1"></i> Docentes (<?= $totalDocentes ?>)
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="auxiliares-tab" data-tab="auxiliares" type="button" role="tab" aria-controls="auxiliares" aria-selected="false">
                                <i class="fas fa-user-tie me-1"></i> Auxiliares (<?= $totalAuxiliares ?>)
                            </button>
                        </li>
                    </ul>
                    
                    <div class="tab-content" id="personalTabsContent">
                        <!-- Pestaña de Docentes -->
                        <div class="tab-pane fade show active" id="docentes" role="tabpanel" aria-labelledby="docentes-tab">
                            <div class="section-card">
                                <h2><i class="fas fa-chart-pie"></i> Estadísticas de Docentes</h2>
                                
                                <div class="teacher-stats">
                                    <div class="stat-card">
                                        <div class="stat-number"><?= $totalDocentes ?></div>
                                        <div class="stat-label">Docentes Totales</div>
                                    </div>
                                    
                                    <div class="stat-card">
                                        <div class="stat-number"><?= $activos ?></div>
                                        <div class="stat-label">Docentes Activos</div>
                                    </div>
                                    
                                    <div class="stat-card">
                                        <div class="stat-number"><?= $licencia ?></div>
                                        <div class="stat-label">En Licencia</div>
                                    </div>
                                    
                                    <div class="stat-card">
                                        <div class="stat-number"><?= $inactivos ?></div>
                                        <div class="stat-label">Inactivos</div>
                                    </div>
                                </div>
                                
                                <h2><i class="fas fa-list"></i> Lista Completa</h2>
                                
                                <?php if (!empty($docentes)): ?>
                                    <div class="teachers-table-container">
                                        <table class="teachers-table">
                                            <thead>
                                                <tr>
                                                    <th>Docente</th>
                                                    <th>DNI</th>
                                                    <th>Especialidad</th>
                                                    <th>Estado</th>
                                                    <th>Contacto</th>
                                                    <th>Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php foreach ($docentes as $docente): ?>
                                                    <tr>
                                                        <td>
                                                            <strong>
                                                                <?php 
                                                                if (!empty($docente['apellido'])) {
                                                                    echo htmlspecialchars($docente['apellido']) . ', ';
                                                                }
                                                                echo htmlspecialchars($docente['nombre'] ?? '');
                                                                ?>
                                                            </strong><br>
                                                            <small><?= htmlspecialchars($docente['email'] ?? '') ?></small>
                                                        </td>
                                                        <td><?= !empty($docente['dni']) ? htmlspecialchars($docente['dni']) : '<span class="text-muted">No especificado</span>' ?></td>
                                                        <td><?= htmlspecialchars($docente['especialidad'] ?? 'Sin especialidad') ?></td>
                                                        <td>
                                                            <?php if ($docente['estado'] === 'activo'): ?>
                                                                <span class="status-badge status-active">
                                                                    <i class="fas fa-check-circle"></i> Activo
                                                                </span>
                                                            <?php elseif ($docente['estado'] === 'inactivo'): ?>
                                                                <span class="status-badge status-inactive">
                                                                    <i class="fas fa-times-circle"></i> Inactivo
                                                                </span>
                                                            <?php elseif ($docente['estado'] === 'licencia'): ?>
                                                                <span class="status-badge status-licencia">
                                                                    <i class="fas fa-file-medical"></i> Licencia
                                                                </span>
                                                            <?php endif; ?>
                                                        </td>
                                                        <td>
                                                            <?php if (!empty($docente['telefono'])): ?>
                                                                <i class="fas fa-phone"></i> <?= htmlspecialchars($docente['telefono']) ?>
                                                            <?php else: ?>
                                                                <span class="text-muted">Sin teléfono</span>
                                                            <?php endif; ?>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex gap-2">
                                                                <button type="button" class="action-btn btn-edit" onclick="openEditModal(<?= htmlspecialchars(json_encode([
                                                                    'id' => $docente['id'],
                                                                    'type' => 'docente',
                                                                    'nombre' => $docente['nombre'],
                                                                    'apellido' => $docente['apellido'],
                                                                    'email' => $docente['email'],
                                                                    'telefono' => $docente['telefono'],
                                                                    'especialidad' => $docente['especialidad'],
                                                                    'estado' => $docente['estado']
                                                                ])) ?>)">
                                                                    <i class="fas fa-edit"></i> Editar
                                                                </button>
                                                                <a href="mailto:<?= htmlspecialchars($docente['email']) ?>" class="action-btn btn-contact">
                                                                    <i class="fas fa-envelope"></i> Contactar
                                                                </a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                <?php endforeach; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                <?php else: ?>
                                    <div class="empty-state">
                                        <i class="fas fa-user-slash"></i>
                                        <h4>No se encontraron docentes</h4>
                                        <p><?= !empty($searchTerm) ? 'No hay resultados para tu búsqueda.' : 'Actualmente no hay docentes registrados en el sistema.' ?></p>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        
                        <!-- Pestaña de Auxiliares -->
                        <div class="tab-pane fade" id="auxiliares" role="tabpanel" aria-labelledby="auxiliares-tab">
                            <div class="section-card">
                                <h2><i class="fas fa-chart-pie"></i> Estadísticas de Auxiliares</h2>
                                
                                <div class="teacher-stats">
                                    <div class="stat-card">
                                        <div class="stat-number"><?= $totalAuxiliares ?></div>
                                        <div class="stat-label">Auxiliares Totales</div>
                                    </div>
                                    
                                    <div class="stat-card">
                                        <div class="stat-number"><?= $auxiliaresActivos ?></div>
                                        <div class="stat-label">Auxiliares Activos</div>
                                    </div>
                                    
                                    <div class="stat-card">
                                        <div class="stat-number"><?= $auxiliaresInactivos ?></div>
                                        <div class="stat-label">Inactivos</div>
                                    </div>
                                </div>
                                
                                <h2><i class="fas fa-list"></i> Lista Completa</h2>
                                
                                <?php if (!empty($auxiliares)): ?>
                                    <div class="teachers-table-container">
                                        <table class="teachers-table">
                                            <thead>
                                                <tr>
                                                    <th>Auxiliar</th>
                                                    <th>DNI</th>
                                                    <th>Estado</th>
                                                    <th>Contacto</th>
                                                    <th>Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php foreach ($auxiliares as $auxiliar): ?>
                                                    <tr>
                                                        <td>
                                                            <strong>
                                                                <?php 
                                                                if (!empty($auxiliar['apellido'])) {
                                                                    echo htmlspecialchars($auxiliar['apellido']) . ', ';
                                                                }
                                                                echo htmlspecialchars($auxiliar['nombre'] ?? '');
                                                                ?>
                                                            </strong><br>
                                                            <small><?= htmlspecialchars($auxiliar['email'] ?? '') ?></small>
                                                        </td>
                                                        <td><?= !empty($auxiliar['dni']) ? htmlspecialchars($auxiliar['dni']) : '<span class="text-muted">No especificado</span>' ?></td>
                                                        <td>
                                                            <?php if ($auxiliar['estado'] === 'activo'): ?>
                                                                <span class="status-badge status-active">
                                                                    <i class="fas fa-check-circle"></i> Activo
                                                                </span>
                                                            <?php else: ?>
                                                                <span class="status-badge status-inactive">
                                                                    <i class="fas fa-times-circle"></i> Inactivo
                                                                </span>
                                                            <?php endif; ?>
                                                        </td>
                                                        <td>
                                                            <?php if (!empty($auxiliar['telefono'])): ?>
                                                                <i class="fas fa-phone"></i> <?= htmlspecialchars($auxiliar['telefono']) ?>
                                                            <?php else: ?>
                                                                <span class="text-muted">Sin teléfono</span>
                                                            <?php endif; ?>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex gap-2">
                                                                <button type="button" class="action-btn btn-edit" onclick="openEditModal(<?= htmlspecialchars(json_encode([
                                                                    'id' => $auxiliar['id'],
                                                                    'type' => 'auxiliar',
                                                                    'nombre' => $auxiliar['nombre'],
                                                                    'apellido' => $auxiliar['apellido'],
                                                                    'email' => $auxiliar['email'],
                                                                    'telefono' => $auxiliar['telefono'],
                                                                    'estado' => $auxiliar['estado']
                                                                ])) ?>)">
                                                                    <i class="fas fa-edit"></i> Editar
                                                                </button>
                                                                <a href="mailto:<?= htmlspecialchars($auxiliar['email']) ?>" class="action-btn btn-contact">
                                                                    <i class="fas fa-envelope"></i> Contactar
                                                                </a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                <?php endforeach; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                <?php else: ?>
                                    <div class="empty-state">
                                        <i class="fas fa-user-slash"></i>
                                        <h4>No se encontraron auxiliares</h4>
                                        <p><?= !empty($searchTerm) ? 'No hay resultados para tu búsqueda.' : 'Actualmente no hay auxiliares registrados en el sistema.' ?></p>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

    <!-- Modal de Edición -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Editar <span id="editType"></span></h5>
                    <button type="button" class="btn-close" onclick="closeModal()" aria-label="Close">×</button>
                </div>
                <form id="editForm" method="post" action="">
                    <input type="hidden" name="id" id="editId">
                    <input type="hidden" name="type" id="editUserType">
                    <input type="hidden" name="guardar" value="1">
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="editNombre" class="form-label">Nombre</label>
                                <input type="text" class="form-control" id="editNombre" name="nombre" required>
                            </div>
                            <div class="col-md-6">
                                <label for="editApellido" class="form-label">Apellido</label>
                                <input type="text" class="form-control" id="editApellido" name="apellido">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="editEmail" class="form-label">Email</label>
                                <input type="email" class="form-control" id="editEmail" name="email" required>
                            </div>
                            <div class="col-md-6">
                                <label for="editTelefono" class="form-label">Teléfono</label>
                                <input type="text" class="form-control" id="editTelefono" name="telefono">
                            </div>
                        </div>
                        <div class="row mb-3" id="especialidadField">
                            <div class="col-md-12">
                                <label for="editEspecialidad" class="form-label">Especialidad</label>
                                <input type="text" class="form-control" id="editEspecialidad" name="especialidad">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="editEstado" class="form-label">Estado</label>
                                <select class="form-select" id="editEstado" name="estado" required>
                                    <option value="activo">Activo</option>
                                    <option value="inactivo">Inactivo</option>
                                    <option value="licencia" id="licenciaOption">Licencia</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancelar</button>
                        <button type="submit" class="btn btn-primary btn-save">Guardar Cambios</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // Variables globales
        let currentModal = null;
        
        document.addEventListener('DOMContentLoaded', function() {
            initializeComponents();
        });

        function initializeComponents() {
            // Configurar toggle del menú lateral
            const toggleMenu = document.getElementById('toggleMenu');
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            
            if (toggleMenu && sidebar && mainContent) {
                toggleMenu.addEventListener('click', function(e) {
                    e.preventDefault();
                    sidebar.classList.toggle('active');
                    
                    if (window.innerWidth < 768) {
                        // En móvil, solo toggle de la clase active
                        document.body.classList.toggle('sidebar-open');
                    } else {
                        // En desktop, toggle de la clase sidebar-open en el contenido
                        mainContent.classList.toggle('sidebar-open');
                    }
                });

                // Cerrar menú lateral al hacer clic fuera (solo mobile)
                document.addEventListener('click', function(event) {
                    if (window.innerWidth < 768 && 
                        sidebar.classList.contains('active') && 
                        !sidebar.contains(event.target) && 
                        !toggleMenu.contains(event.target)) {
                        sidebar.classList.remove('active');
                        document.body.classList.remove('sidebar-open');
                    }
                });

                // Manejar cambios de tamaño de ventana
                window.addEventListener('resize', function() {
                    if (window.innerWidth >= 768) {
                        // En desktop, asegurar que el sidebar esté visible
                        sidebar.classList.add('active');
                        mainContent.classList.add('sidebar-open');
                        document.body.classList.remove('sidebar-open');
                    } else {
                        // En móvil, ocultar sidebar por defecto
                        sidebar.classList.remove('active');
                        mainContent.classList.remove('sidebar-open');
                        document.body.classList.remove('sidebar-open');
                    }
                });

                // Inicializar estado según el tamaño de pantalla
                if (window.innerWidth >= 768) {
                    sidebar.classList.add('active');
                    mainContent.classList.add('sidebar-open');
                }
            }

            // Configurar pestañas personalizadas
            initializeTabs();
        }

        function initializeTabs() {
            const tabButtons = document.querySelectorAll('[data-tab]');
            const tabPanes = document.querySelectorAll('.tab-pane');
            
            tabButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const targetTab = this.getAttribute('data-tab');
                    
                    // Remover clases activas
                    tabButtons.forEach(btn => {
                        btn.classList.remove('active');
                        btn.setAttribute('aria-selected', 'false');
                    });
                    
                    tabPanes.forEach(pane => {
                        pane.classList.remove('show', 'active');
                    });
                    
                    // Activar pestaña actual
                    this.classList.add('active');
                    this.setAttribute('aria-selected', 'true');
                    
                    const targetPane = document.getElementById(targetTab);
                    if (targetPane) {
                        targetPane.classList.add('show', 'active');
                    }
                });
            });
        }

        function openEditModal(data) {
            console.log('Abriendo modal con datos:', data);
            
            try {
                // Actualizar el título del modal
                const editType = document.getElementById('editType');
                if (editType) {
                    editType.textContent = data.type === 'docente' ? 'Docente' : 'Auxiliar';
                }

                // Poblar los campos
                document.getElementById('editId').value = data.id || '';
                document.getElementById('editUserType').value = data.type || '';
                document.getElementById('editNombre').value = data.nombre || '';
                document.getElementById('editApellido').value = data.apellido || '';
                document.getElementById('editEmail').value = data.email || '';
                document.getElementById('editTelefono').value = data.telefono || '';
                document.getElementById('editEstado').value = data.estado || 'activo';

                // Mostrar u ocultar el campo de especialidad según el tipo
                const especialidadField = document.getElementById('especialidadField');
                const editEspecialidad = document.getElementById('editEspecialidad');
                const licenciaOption = document.getElementById('licenciaOption');

                if (data.type === 'docente') {
                    if (especialidadField) especialidadField.style.display = 'block';
                    if (editEspecialidad) editEspecialidad.value = data.especialidad || '';
                    if (licenciaOption) licenciaOption.style.display = 'block';
                } else {
                    if (especialidadField) especialidadField.style.display = 'none';
                    if (editEspecialidad) editEspecialidad.value = '';
                    if (licenciaOption) licenciaOption.style.display = 'none';
                    
                    // Si el estado actual es licencia para auxiliar, cambiamos a activo
                    if (data.estado === 'licencia') {
                        document.getElementById('editEstado').value = 'activo';
                    }
                }

                // Mostrar el modal
                showModal('editModal');
                
            } catch (error) {
                console.error('Error al abrir el modal:', error);
                alert('Error al abrir el formulario de edición');
            }
        }

        function showModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.style.display = 'block';
                modal.classList.add('show');
                modal.setAttribute('aria-hidden', 'false');
                document.body.style.overflow = 'hidden';
                
                // Agregar backdrop
                if (!document.querySelector('.modal-backdrop')) {
                    const backdrop = document.createElement('div');
                    backdrop.className = 'modal-backdrop fade show';
                    backdrop.style.cssText = `
                        position: fixed;
                        top: 0;
                        left: 0;
                        z-index: 1040;
                        width: 100vw;
                        height: 100vh;
                        background-color: rgba(0, 0, 0, 0.5);
                    `;
                    backdrop.onclick = () => closeModal();
                    document.body.appendChild(backdrop);
                }
                
                currentModal = modal;
                
                // Focus en el primer input
                const firstInput = modal.querySelector('input[type="text"], input[type="email"]');
                if (firstInput) {
                    setTimeout(() => firstInput.focus(), 100);
                }
            }
        }

        function closeModal() {
            if (currentModal) {
                currentModal.style.display = 'none';
                currentModal.classList.remove('show');
                currentModal.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = '';
                
                // Remover backdrop
                const backdrop = document.querySelector('.modal-backdrop');
                if (backdrop) {
                    backdrop.remove();
                }
                
                currentModal = null;
            }
        }

        // Cerrar modal con ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && currentModal) {
                closeModal();
            }
        });

        // Manejar envío del formulario
        document.getElementById('editForm').addEventListener('submit', function(e) {
            const submitBtn = this.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';
            }
        });
    </script>
</body>
</html>