<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agregar Docente | Sistema Educativo</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                            950: '#082f49',
                        },
                        secondary: {
                            50: '#f5f3ff',
                            100: '#ede9fe',
                            200: '#ddd6fe',
                            300: '#c4b5fd',
                            400: '#a78bfa',
                            500: '#8b5cf6',
                            600: '#7c3aed',
                            700: '#6d28d9',
                            800: '#5b21b6',
                            900: '#4c1d95',
                            950: '#2e1065',
                        },
                        success: {
                            50: '#ecfdf5',
                            100: '#d1fae5',
                            500: '#10b981',
                            600: '#059669',
                            700: '#047857',
                        }
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'fade-in': 'fadeIn 0.5s ease-out forwards',
                        'slide-up': 'slideUp 0.5s ease-out forwards',
                        'slide-right': 'slideRight 0.5s ease-out forwards',
                        'zoom-in': 'zoomIn 0.5s ease-out forwards',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                        slideRight: {
                            '0%': { transform: 'translateX(-20px)', opacity: '0' },
                            '100%': { transform: 'translateX(0)', opacity: '1' },
                        },
                        zoomIn: {
                            '0%': { transform: 'scale(0.95)', opacity: '0' },
                            '100%': { transform: 'scale(1)', opacity: '1' },
                        },
                    },
                    boxShadow: {
                        'card': '0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
                        'card-hover': '0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                        'input-focus': '0 0 0 3px rgba(14, 165, 233, 0.2)',
                        'neon': '0 0 5px rgba(14, 165, 233, 0.5), 0 0 20px rgba(14, 165, 233, 0.3)',
                        'neon-purple': '0 0 5px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3)',
                    }
                }
            }
        }
    </script>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            background-attachment: fixed;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
        }
        
        .form-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
            transition: all 0.3s ease;
        }
        
        .form-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px 0 rgba(31, 38, 135, 0.2);
        }
        
        .input-field {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .input-field:focus {
            transform: translateY(-2px);
            border-color: #0ea5e9;
            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
        }
        
        .input-icon {
            transition: all 0.3s ease;
        }
        
        .input-field:focus + .input-icon {
            color: #0ea5e9;
            transform: scale(1.1);
        }
        
        .form-section {
            transition: all 0.3s ease;
        }
        
        .form-section:hover {
            transform: translateY(-2px);
        }
        
        .btn-primary {
            background-image: linear-gradient(to right, #0ea5e9, #0284c7);
            background-size: 200% auto;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px 0 rgba(14, 165, 233, 0.4);
        }
        
        .btn-primary:hover {
            background-position: right center;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px 0 rgba(14, 165, 233, 0.6);
        }
        
        .btn-primary:active {
            transform: translateY(0);
        }
        
        .btn-success {
            background-image: linear-gradient(to right, #10b981, #059669);
            background-size: 200% auto;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px 0 rgba(16, 185, 129, 0.4);
        }
        
        .btn-success:hover {
            background-position: right center;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.6);
        }
        
        .btn-success:active {
            transform: translateY(0);
        }
        
        .section-title {
            position: relative;
            overflow: hidden;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, #0ea5e9, #8b5cf6);
        }
        
        .floating-label {
            position: absolute;
            left: 16px;
            top: 12px;
            transition: all 0.2s ease;
            pointer-events: none;
        }
        
        .input-field:focus ~ .floating-label,
        .input-field:not(:placeholder-shown) ~ .floating-label {
            transform: translateY(-24px) scale(0.85);
            color: #0ea5e9;
            font-weight: 500;
        }
        
        .input-field:focus ~ .floating-label {
            color: #0ea5e9;
        }
        
        .input-field-container {
            position: relative;
            margin-top: 1rem;
        }
        
        .input-field-container .input-field {
            padding-top: 1.25rem;
            padding-bottom: 0.5rem;
        }
        
        .logo-container {
            animation: float 6s ease-in-out infinite;
        }
        
        .logo-glow {
            position: relative;
        }
        
        .logo-glow::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(14, 165, 233, 0.4) 0%, rgba(14, 165, 233, 0) 70%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .logo-container:hover .logo-glow::after {
            opacity: 1;
        }
        
        /* Estilos para scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #0ea5e9;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #0284c7;
        }
    </style>
    
    <script>
        function autocompletarCI() {
            var ci = document.getElementById('ci_varchar').value;
            document.getElementById('usuario_varchar').value = ci;
            document.getElementById('contrasena').value = ci;
        }
    </script>
</head>

<body class="min-h-screen py-12" x-data="{ 
    activeSection: 'personal',
    formProgress: 0,
    updateProgress() {
        const inputs = document.querySelectorAll('input:required, select:required');
        const filledInputs = Array.from(inputs).filter(input => input.value.trim() !== '');
        this.formProgress = Math.round((filledInputs.length / inputs.length) * 100);
    }
}" x-init="updateProgress()">

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header con logo y título -->
        <div class="text-center mb-10 animate_animated animate_fadeIn">
            <div class="logo-container inline-block mb-4">
                <div class="logo-glow">
                    <img src="../../public/images/logo.png" alt="Logo de la Institución" class="w-32 h-32 object-contain mx-auto">
                </div>
            </div>
            <h1 class="text-4xl font-bold text-gray-900 mb-2">Agregar Nuevo Docente</h1>
            <p class="text-lg text-gray-600">Complete el formulario para registrar un nuevo docente en el sistema</p>
        </div>
        
        <!-- Barra de progreso -->
        <div class="mb-8 animate_animated animatefadeIn animate_delay-1s">
            <div class="flex justify-between items-center mb-2">
                <span class="text-sm font-medium text-gray-700">Progreso del formulario</span>
                <span class="text-sm font-medium text-primary-600" x-text="${formProgress}%"></span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div class="bg-primary-600 h-2.5 rounded-full transition-all duration-500 ease-out" :style="width: ${formProgress}%"></div>
            </div>
        </div>
        
        <!-- Botón de volver -->
        <div class="mb-8 animate_animated animatefadeIn animate_delay-1s">
            <a href="gestion_docentes.php" class="btn-primary inline-flex items-center px-5 py-2.5 rounded-lg text-white font-medium shadow-md hover:shadow-lg transition-all duration-300">
                <i class="fas fa-arrow-left mr-2"></i>
                <span>Volver a Gestión de Docentes</span>
            </a>
        </div>
        
        <!-- Tarjeta del formulario -->
        <div class="form-card rounded-2xl overflow-hidden animate_animated animatezoomIn animate_delay-1s">
            <!-- Navegación de secciones -->
            <div class="bg-gradient-to-r from-primary-600 to-primary-800 p-4 flex justify-center space-x-4 overflow-x-auto">
                <button @click="activeSection = 'personal'" :class="{'bg-white text-primary-700': activeSection === 'personal', 'bg-primary-700/30 text-white': activeSection !== 'personal'}" class="px-4 py-2 rounded-lg font-medium transition-all duration-300 flex items-center">
                    <i class="fas fa-user mr-2"></i>
                    <span>Información Personal</span>
                </button>
                <button @click="activeSection = 'contacto'" :class="{'bg-white text-primary-700': activeSection === 'contacto', 'bg-primary-700/30 text-white': activeSection !== 'contacto'}" class="px-4 py-2 rounded-lg font-medium transition-all duration-300 flex items-center">
                    <i class="fas fa-address-book mr-2"></i>
                    <span>Contacto</span>
                </button>
                <button @click="activeSection = 'cuenta'" :class="{'bg-white text-primary-700': activeSection === 'cuenta', 'bg-primary-700/30 text-white': activeSection !== 'cuenta'}" class="px-4 py-2 rounded-lg font-medium transition-all duration-300 flex items-center">
                    <i class="fas fa-lock mr-2"></i>
                    <span>Cuenta</span>
                </button>
            </div>
            
            <!-- Formulario -->
            <form action="gestion_docentes.php" method="post" class="p-8" oninput="autocompletarCI(); document.querySelector('[x-data]').__x.$data.updateProgress()">
                <!-- Sección de Información Personal -->
                <div x-show="activeSection === 'personal'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" class="form-section">
                    <h3 class="section-title text-2xl font-semibold text-gray-800 pb-2 mb-6 flex items-center">
                        <i class="fas fa-user-circle text-primary-600 mr-2"></i>
                        Información Personal
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="relative">
                            <label for="nombres_varchar" class="block text-sm font-medium text-gray-700 mb-1">Nombres:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-user text-gray-400 input-icon"></i>
                                </div>
                                <input type="text" id="nombres_varchar" name="nombres_varchar" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                            </div>
                        </div>
                        
                        <div class="relative">
                            <label for="paterno_varchar" class="block text-sm font-medium text-gray-700 mb-1">Apellido Paterno:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-user-tag text-gray-400 input-icon"></i>
                                </div>
                                <input type="text" id="paterno_varchar" name="paterno_varchar" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                            </div>
                        </div>
                        
                        <div class="relative">
                            <label for="materno_varchar" class="block text-sm font-medium text-gray-700 mb-1">Apellido Materno:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-user-tag text-gray-400 input-icon"></i>
                                </div>
                                <input type="text" id="materno_varchar" name="materno_varchar" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                            </div>
                        </div>
                        
                        <div class="relative">
                            <label for="ci_varchar" class="block text-sm font-medium text-gray-700 mb-1">CI:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-id-card text-gray-400 input-icon"></i>
                                </div>
                                <input type="text" id="ci_varchar" name="ci_varchar" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                            </div>
                        </div>
                        
                        <div class="relative">
                            <label for="ci_expe_varchar" class="block text-sm font-medium text-gray-700 mb-1">Expedido en:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-map-marker-alt text-gray-400 input-icon"></i>
                                </div>
                                <select id="ci_expe_varchar" name="ci_expe_varchar" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                                    <option value="LP">La Paz (LP)</option>
                                    <option value="CB">Cochabamba (CB)</option>
                                    <option value="SC">Santa Cruz (SC)</option>
                                    <option value="OR">Oruro (OR)</option>
                                    <option value="PT">Potosí (PT)</option>
                                    <option value="CH">Chuquisaca (CH)</option>
                                    <option value="TJ">Tarija (TJ)</option>
                                    <option value="BN">Beni (BN)</option>
                                    <option value="PD">Pando (PD)</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="relative">
                            <label for="fecha_nacimiento_dt" class="block text-sm font-medium text-gray-700 mb-1">Fecha de Nacimiento:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-calendar-alt text-gray-400 input-icon"></i>
                                </div>
                                <input type="date" id="fecha_nacimiento_dt" name="fecha_nacimiento_dt" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                            </div>
                        </div>
                        
                        <div class="relative">
                            <label for="genero_varchar" class="block text-sm font-medium text-gray-700 mb-1">Género:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-venus-mars text-gray-400 input-icon"></i>
                                </div>
                                <select id="genero_varchar" name="genero_varchar" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                                    <option value="M">Masculino</option>
                                    <option value="F">Femenino</option>
                                    <option value="O">Otro</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-8 flex justify-end">
                        <button type="button" @click="activeSection = 'contacto'" class="btn-primary px-6 py-2.5 rounded-lg text-white font-medium shadow-md hover:shadow-lg transition-all duration-300 flex items-center">
                            <span>Siguiente</span>
                            <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Sección de Contacto -->
                <div x-show="activeSection === 'contacto'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" class="form-section">
                    <h3 class="section-title text-2xl font-semibold text-gray-800 pb-2 mb-6 flex items-center">
                        <i class="fas fa-address-book text-primary-600 mr-2"></i>
                        Información de Contacto
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="relative">
                            <label for="celular_varchar" class="block text-sm font-medium text-gray-700 mb-1">Celular:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-mobile-alt text-gray-400 input-icon"></i>
                                </div>
                                <input type="text" id="celular_varchar" name="celular_varchar" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                            </div>
                        </div>
                        
                        <div class="relative">
                            <label for="email_varchar" class="block text-sm font-medium text-gray-700 mb-1">Correo Electrónico:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-envelope text-gray-400 input-icon"></i>
                                </div>
                                <input type="email" id="email_varchar" name="email_varchar" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                            </div>
                        </div>
                        
                        <div class="relative md:col-span-2">
                            <label for="direccion_varchar" class="block text-sm font-medium text-gray-700 mb-1">Dirección:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-home text-gray-400 input-icon"></i>
                                </div>
                                <input type="text" id="direccion_varchar" name="direccion_varchar" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                            </div>
                        </div>
                        
                        <div class="relative">
                            <label for="sucursal" class="block text-sm font-medium text-gray-700 mb-1">Sucursal:</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-building text-gray-400 input-icon"></i>
                                </div>
                                <input type="text" id="sucursal" name="sucursal" required
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-8 flex justify-between">
                        <button type="button" @click="activeSection = 'personal'" class="bg-gray-200 text-gray-700 px-6 py-2.5 rounded-lg font-medium shadow-md hover:bg-gray-300 transition-all duration-300 flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i>
                            <span>Anterior</span>
                        </button>
                        <button type="button" @click="activeSection = 'cuenta'" class="btn-primary px-6 py-2.5 rounded-lg text-white font-medium shadow-md hover:shadow-lg transition-all duration-300 flex items-center">
                            <span>Siguiente</span>
                            <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Sección de Cuenta -->
                <div x-show="activeSection === 'cuenta'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" class="form-section">
                    <h3 class="section-title text-2xl font-semibold text-gray-800 pb-2 mb-6 flex items-center">
                        <i class="fas fa-lock text-primary-600 mr-2"></i>
                        Información de Cuenta
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="relative">
                            <label for="usuario_varchar" class="block text-sm font-medium text-gray-700 mb-1">Nombre de Usuario (automático):</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-user-shield text-gray-400 input-icon"></i>
                                </div>
                                <input type="text" id="usuario_varchar" name="usuario_varchar" readonly
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm bg-gray-50 cursor-not-allowed text-gray-700">
                                <div class="absolute inset-y-0 right-3 flex items-center">
                                    <i class="fas fa-lock text-gray-400"></i>
                                </div>
                            </div>
                            <p class="mt-1 text-xs text-gray-500">El nombre de usuario se genera automáticamente a partir del CI</p>
                        </div>
                        
                        <div class="relative">
                            <label for="contrasena" class="block text-sm font-medium text-gray-700 mb-1">Contraseña (automática):</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-key text-gray-400 input-icon"></i>
                                </div>
                                <input type="password" id="contrasena" name="contrasena" readonly
                                    class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm bg-gray-50 cursor-not-allowed text-gray-700">
                                <div class="absolute inset-y-0 right-3 flex items-center">
                                    <i class="fas fa-lock text-gray-400"></i>
                                </div>
                            </div>
                            <p class="mt-1 text-xs text-gray-500">La contraseña se genera automáticamente a partir del CI</p>
                        </div>
                    </div>
                    
                    <div class="mt-8 flex justify-between">
                        <button type="button" @click="activeSection = 'contacto'" class="bg-gray-200 text-gray-700 px-6 py-2.5 rounded-lg font-medium shadow-md hover:bg-gray-300 transition-all duration-300 flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i>
                            <span>Anterior</span>
                        </button>
                        <button type="submit" name="agregar" class="btn-success px-8 py-3 rounded-lg text-white font-medium shadow-md hover:shadow-lg transition-all duration-300 flex items-center">
                            <i class="fas fa-user-plus mr-2"></i>
                            <span>Registrar Docente</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- Información adicional -->
        <div class="mt-8 bg-white/80 backdrop-blur-sm rounded-xl p-6 shadow-md animate_animated animatefadeIn animate_delay-2s">
            <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
                <i class="fas fa-info-circle text-primary-600 mr-2"></i>
                Información Importante
            </h3>
            <ul class="space-y-2 text-gray-600">
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-primary-500 mt-1 mr-2"></i>
                    <span>Complete todos los campos obligatorios marcados para registrar correctamente al docente.</span>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-primary-500 mt-1 mr-2"></i>
                    <span>El nombre de usuario y contraseña se generan automáticamente a partir del CI del docente.</span>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-primary-500 mt-1 mr-2"></i>
                    <span>Asegúrese de ingresar un correo electrónico válido para comunicaciones importantes.</span>
                </li>
            </ul>
        </div>
        
    </div>
</body>
</html>