<?php
session_start();
if (!isset($_SESSION['usuario']) || $_SESSION['rol'] != 1) {
    header('Location: ../../index.php');
    exit;
}

$usuarioId = $_SESSION['usuario'];
$rol = $_SESSION['rol'];
?>

<!DOCTYPE html>
<html lang="es" class="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuperAdministrador</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
   
    <script>
        tailwind.config = {
            darkMode: 'class',
            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',
                        },
                        accent: {
                            50: '#ecfdf5',
                            100: '#d1fae5',
                            200: '#a7f3d0',
                            300: '#6ee7b7',
                            400: '#34d399',
                            500: '#10b981',
                            600: '#059669',
                            700: '#047857',
                            800: '#065f46',
                            900: '#064e3b',
                            950: '#022c22',
                        }
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'bounce-slow': 'bounce 3s infinite',
                        'spin-slow': 'spin 3s linear infinite',
                        'wiggle': 'wiggle 1s ease-in-out infinite',
                        'float': 'float 6s ease-in-out infinite',
                        'slide-in': 'slideIn 0.5s ease-out',
                    },
                    keyframes: {
                        wiggle: {
                            '0%, 100%': { transform: 'rotate(-3deg)' },
                            '50%': { transform: 'rotate(3deg)' },
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        slideIn: {
                            '0%': { transform: 'translateY(20px)', opacity: 0 },
                            '100%': { transform: 'translateY(0)', opacity: 1 },
                        }
                    },
                    boxShadow: {
                        'neon': '0 0 5px theme("colors.primary.400"), 0 0 20px theme("colors.primary.600")',
                        'neon-purple': '0 0 5px theme("colors.secondary.400"), 0 0 20px theme("colors.secondary.600")',
                        'neon-green': '0 0 5px theme("colors.accent.400"), 0 0 20px theme("colors.accent.600")',
                        'inner-glow': 'inset 0 0 15px 0 rgba(255, 255, 255, 0.5)',
                        'card-3d': '0 10px 30px -10px rgba(0, 0, 0, 0.3)',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary-color: #0ea5e9;
            --secondary-color: #8b5cf6;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --dark-color: #1e293b;
            --light-color: #f8fafc;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
        }
        
        .card-hover {
            transition: all 0.3s ease;
            will-change: transform, box-shadow;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .gradient-border {
            position: relative;
            border-radius: 0.75rem;
            z-index: 0;
            overflow: hidden;
        }
        
        .gradient-border::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #0ea5e9, #8b5cf6, #10b981, #f59e0b);
            z-index: -1;
            border-radius: 0.85rem;
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }
        
        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        .menu-item {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .menu-item::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: white;
            transition: width 0.3s ease;
        }
        
        .menu-item:hover::after {
            width: 100%;
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .dark .glass-effect {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .notification-dot {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 8px;
            height: 8px;
            background-color: #ef4444;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
            }
        }
        
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #0ea5e9;
            border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #0284c7;
        }
        
        .dark .custom-scrollbar::-webkit-scrollbar-track {
            background: #1e293b;
        }
        
        .dark .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #0ea5e9;
        }
        
        .card-stats {
            transition: all 0.3s ease;
            overflow: hidden;
            will-change: transform, box-shadow;
        }
        
        .card-stats::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .card-stats:hover::before {
            opacity: 1;
        }
        
        /* Reloj digital */
        .digital-clock {
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.05em;
            backdrop-filter: blur(8px);
            background: rgba(0, 0, 0, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            padding: 0.5rem 1rem;
            border-radius: 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.18);
            font-family: 'Inter', monospace;
        }

        .dark .digital-clock {
            background: rgba(255, 255, 255, 0.05);
        }
        
        .clock-separator {
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        
        /* Dashboard badge */
        .badge-pulse {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #10b981;
            margin-right: 8px;
            position: relative;
        }
        
        .badge-pulse::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: #10b981;
            border-radius: 50%;
            animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
        }
        
        @keyframes ping {
            75%, 100% {
                transform: scale(2);
                opacity: 0;
            }
        }
        
        /* Dropdown menus */
        .dropdown-menu {
            transform-origin: top right;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.05);
            z-index: 100;
        }
        
        .dark .dropdown-menu {
            border-color: rgba(255, 255, 255, 0.1);
        }
        
        /* Card 3D effect */
        .card-3d {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-3d:hover {
            transform: translateY(-10px) rotateX(2deg) rotateY(2deg);
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.25);
        }
        
        .card-3d::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            border-radius: inherit;
        }
        
        .card-3d:hover::before {
            opacity: 1;
        }
    </style>
</head>

<body class="bg-gray-50 dark:bg-gray-900 dark:text-white transition-colors duration-300 custom-scrollbar" x-data="{ 
    sidebarOpen: window.innerWidth >= 1024,
    darkMode: localStorage.getItem('darkMode') === 'true',
    toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
    toggleDarkMode() {
        this.darkMode = !this.darkMode;
        localStorage.setItem('darkMode', this.darkMode);
        if (this.darkMode) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    },
    notifications: [
        { id: 1, title: 'Nuevo estudiante registrado', time: '5 minutos', read: false },
        { id: 2, title: 'Actualización del sistema', time: '1 hora', read: false },
        { id: 3, title: 'Recordatorio: Reunión de personal', time: '3 horas', read: false }
    ],
    showNotifications: false,
    showProfileMenu: false,
    currentTime: '',
    currentDate: '',
    hours: '00',
    minutes: '00',
    seconds: '00',
    ampm: 'AM',
    dayOfWeek: '',
    dayOfMonth: '',
    month: '',
    year: '',
    updateClock() {
        const now = new Date();
        this.hours = now.getHours().toString().padStart(2, '0');
        this.minutes = now.getMinutes().toString().padStart(2, '0');
        this.seconds = now.getSeconds().toString().padStart(2, '0');
        this.ampm = now.getHours() >= 12 ? 'PM' : 'AM';
        this.hours12 = (now.getHours() % 12 || 12).toString().padStart(2, '0');
        
        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        this.currentDate = now.toLocaleDateString('es-ES', options);
        
        this.dayOfWeek = new Intl.DateTimeFormat('es-ES', { weekday: 'long' }).format(now);
        this.dayOfMonth = now.getDate();
        this.month = new Intl.DateTimeFormat('es-ES', { month: 'long' }).format(now);
        this.year = now.getFullYear();
    }
}" x-init="
    $watch('darkMode', value => {
        if (value) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    });
    
    if (darkMode) {
        document.documentElement.classList.add('dark');
    }
    
    updateClock();
    setInterval(() => {
        updateClock();
    }, 1000);
    
    // Inicializar animaciones
    AOS.init({
        duration: 800,
        easing: 'ease-in-out',
        once: true
    });
    
    // Asegurarse de que los menús desplegables permanecen visibles
    window.addEventListener('click', function(e) {
        const notifications = document.getElementById('notifications-dropdown');
        const notificationsTrigger = document.getElementById('notifications-trigger');
        const profile = document.getElementById('profile-dropdown');
        const profileTrigger = document.getElementById('profile-trigger');
        
        // Si el click no fue en los elementos del menú, cerrar los menús
        if (notifications && !notifications.contains(e.target) && notificationsTrigger && !notificationsTrigger.contains(e.target)) {
            showNotifications = false;
        }
        
        if (profile && !profile.contains(e.target) && profileTrigger && !profileTrigger.contains(e.target)) {
            showProfileMenu = false;
        }
    }, false);
    
    // Ajustar sidebar según tamaño de pantalla
    window.addEventListener('resize', function() {
        if (window.innerWidth < 1024) {
            sidebarOpen = false;
        }
    });
">

    <!-- Sidebar Toggle Button -->
    <button 
        @click="toggleSidebar" 
        class="fixed top-4 left-4 p-2 bg-primary-600 dark:bg-primary-700 text-white rounded-lg z-50 shadow-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 hover:scale-105"
        aria-label="Toggle Sidebar">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
    </button>

    <!-- Sidebar -->
    <aside 
        x-show="sidebarOpen" 
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform -translate-x-full"
        x-transition:enter-end="opacity-100 transform translate-x-0"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 transform translate-x-0"
        x-transition:leave-end="opacity-0 transform -translate-x-full"
        class="fixed inset-y-0 left-0 w-72 bg-gradient-to-b from-primary-800 via-primary-900 to-secondary-900 text-white p-5 flex flex-col z-40 shadow-xl overflow-y-auto custom-scrollbar">
        
        <div class="text-center mb-8" data-aos="fade-down">
            <div class="relative inline-block">
                <img src="../../public/images/logo.png" alt="Logo de la Institución" class="w-28 h-28 object-contain mx-auto mb-3 animate-float">
                <div class="absolute -bottom-1 -right-1 bg-accent-500 p-1 rounded-full shadow-lg animate-pulse-slow">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                    </svg>
                </div>
            </div>
            <h2 class="text-xl font-bold mt-2">Panel de Control</h2>
            <div class="flex items-center justify-center mt-1">
                <span class="badge-pulse"></span>
                <p class="text-primary-200 text-sm">Super Administrador</p>
            </div>
        </div>

        <div class="relative mb-6">
            <input type="text" placeholder="Buscar..." class="w-full bg-primary-700/50 text-white placeholder-primary-300 border border-primary-600 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all duration-300 focus:shadow-neon">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute right-3 top-2.5 text-primary-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
        </div>

        <nav class="flex-1">
            <div class="mb-4 text-xs font-semibold text-primary-300 uppercase tracking-wider">Gestión Principal</div>
            <ul class="space-y-1">
                <li data-aos="fade-right" data-aos-delay="100">
                    <a href="../admin/gestion_estudiantes.php" class="menu-item flex items-center p-3 rounded-lg hover:bg-primary-700/50 transition-all duration-200 group">
                        <i class="fas fa-users text-lg mr-3 text-primary-300 group-hover:text-white transition-colors"></i>
                        <span>Gestionar Estudiantes</span>
                    </a>
                </li>
                <li data-aos="fade-right" data-aos-delay="150">
                    <a href="../admin/gestion_docentes.php" class="menu-item flex items-center p-3 rounded-lg hover:bg-primary-700/50 transition-all duration-200 group">
                        <i class="fas fa-chalkboard-teacher text-lg mr-3 text-primary-300 group-hover:text-white transition-colors"></i>
                        <span>Gestionar Docentes</span>
                    </a>
                </li>
                <li data-aos="fade-right" data-aos-delay="200">
                    <a href="../carrera/gestionar_carreras.php" class="menu-item flex items-center p-3 rounded-lg hover:bg-primary-700/50 transition-all duration-200 group">
                        <i class="fas fa-graduation-cap text-lg mr-3 text-primary-300 group-hover:text-white transition-colors"></i>
                        <span>Gestionar Carreras</span>
                    </a>
                </li>
                <li data-aos="fade-right" data-aos-delay="250">
                    <a href="../cursos/gestionar_cursos.php" class="menu-item flex items-center p-3 rounded-lg hover:bg-primary-700/50 transition-all duration-200 group">
                        <i class="fas fa-book-open text-lg mr-3 text-primary-300 group-hover:text-white transition-colors"></i>
                        <span>Gestionar Cursos</span>
                    </a>
                </li>
            </ul>

            <div class="my-4 text-xs font-semibold text-primary-300 uppercase tracking-wider">Administración</div>
            <ul class="space-y-1">
                <li data-aos="fade-right" data-aos-delay="300">
                    <a href="../materias/gestionar_materias.php" class="menu-item flex items-center p-3 rounded-lg hover:bg-primary-700/50 transition-all duration-200 group">
                        <i class="fas fa-calendar-alt text-lg mr-3 text-primary-300 group-hover:text-white transition-colors"></i>
                        <span>Gestionar Materias</span>
                        <li><a href="../asignar_materias/gestionar_asignaciones.php" class="menu-item flex items-center p-3 rounded-lg hover:bg-primary-700/50 transition-all duration-200 group"><i class="fas fa-calendar-alt text-lg mr-3 text-primary-300 group-hover:text-white transition-colors"></i>Asignar Materias</a></li>
                    </a>
                </li>
                <li data-aos="fade-right" data-aos-delay="350">
                    <a href="../superadmin/gestion_roles.php" class="menu-item flex items-center p-3 rounded-lg hover:bg-primary-700/50 transition-all duration-200 group">
                        <i class="fas fa-user-tag text-lg mr-3 text-primary-300 group-hover:text-white transition-colors"></i>
                        <span>Gestionar Roles</span>
                    </a>
                </li>
                <li data-aos="fade-right" data-aos-delay="400">
                    <a href="../admin/gestion_admins.php" class="menu-item flex items-center p-3 rounded-lg hover:bg-primary-700/50 transition-all duration-200 group">
                        <i class="fas fa-user-shield text-lg mr-3 text-primary-300 group-hover:text-white transition-colors"></i>
                        <span>Gestionar Administradores</span>
                    </a>
                </li>
            </ul>

            <div class="my-4 text-xs font-semibold text-primary-300 uppercase tracking-wider">Finanzas</div>
            <ul class="space-y-1">
                <li data-aos="fade-right" data-aos-delay="450">
                    <a href="../caja/dashboard_caja.php" class="menu-item flex items-center p-3 rounded-lg hover:bg-primary-700/50 transition-all duration-200 group">
                        <i class="fas fa-cash-register text-lg mr-3 text-primary-300 group-hover:text-white transition-colors"></i>
                        <span>Caja</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Digital Clock in Sidebar -->
        <div class="mt-6 mb-6 flex flex-col items-center">
            <div class="digital-clock w-full text-center py-3" data-aos="fade-up">
                <div class="text-lg font-bold flex justify-center items-center space-x-1">
                    <span x-text="hours12" class="text-white"></span>
                    <span class="clock-separator text-white">:</span>
                    <span x-text="minutes" class="text-white"></span>
                    <span class="clock-separator text-white">:</span>
                    <span x-text="seconds" class="text-white"></span>
                    <span x-text="ampm" class="text-xs ml-1 text-primary-300"></span>
                </div>
                <div class="text-xs text-primary-300 mt-1 capitalize">
                    <span x-text="dayOfWeek"></span>, 
                    <span x-text="dayOfMonth"></span> de 
                    <span x-text="month"></span>
                </div>
            </div>
        </div>

        <div class="pt-4 border-t border-primary-700">
            <a href="../../logout.php" class="flex items-center justify-center bg-red-600 hover:bg-red-700 text-white p-3 rounded-lg transition-all duration-200 hover:shadow-lg group">
                <i class="fas fa-sign-out-alt mr-2 group-hover:translate-x-[-2px] transition-transform"></i>
                <span>Cerrar Sesión</span>
            </a>
        </div>
    </aside>

    <!-- Overlay para cerrar el sidebar en móviles -->
    <div 
        x-show="sidebarOpen" 
        @click="sidebarOpen = false" 
        x-transition:enter="transition-opacity ease-linear duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition-opacity ease-linear duration-300"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden">
    </div>

    <!-- Main Content -->
    <main class="min-h-screen transition-all duration-300 px-4 sm:px-6 lg:px-8 py-6 ml-0" :class="{ 'lg:ml-72': sidebarOpen }">
        <div class="max-w-7xl mx-auto">
            <!-- Header -->
            <header class="mb-8 mt-12 sm:mt-0">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                    <div class="flex flex-col">
                        <div class="flex items-center">
                            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white flex items-center" data-aos="fade-right">
                                <div class="bg-gradient-to-r from-primary-600 to-secondary-600 p-1.5 rounded-lg mr-3 shadow-lg">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
                                        <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
                                    </svg>
                                </div>
                                Super Admin
                                
                            </h1>
                        </div>
                        <div class="flex items-center mt-2 text-sm text-gray-600 dark:text-gray-400 bg-white/30 dark:bg-gray-800/30 backdrop-blur-sm px-3 py-1.5 rounded-lg shadow-sm" data-aos="fade-right" data-aos-delay="100">
                            <span x-text="currentDate" class="mr-2 capitalize"></span>
                            <div class="digital-clock inline-flex text-primary-600 dark:text-primary-400 font-semibold">
                                <span x-text="hours12"></span>
                                <span class="clock-separator mx-0.5">:</span>
                                <span x-text="minutes"></span>
                                <span class="clock-separator mx-0.5">:</span>
                                <span x-text="seconds"></span>
                                <span x-text="ampm" class="text-xs ml-1 text-primary-500"></span>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center space-x-4">
                        <!-- Toggle Dark Mode -->
                        <button 
                            @click="toggleDarkMode" 
                            class="p-2 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 hover:scale-105"
                            aria-label="Toggle Dark Mode">
                            <svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
                            </svg>
                            <svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-300" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
                            </svg>
                        </button>

                        <!-- Notifications -->
                        <div class="relative" x-data="{ open: false }">
                            <button 
                                @click="open = !open" 
                                id="notifications-trigger"
                                class="relative p-2 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 hover:scale-105"
                                aria-label="Notifications">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                                </svg>
                                <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500 animate-ping"></span>
                                <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
                            </button>

                            <!-- Dropdown -->
                            <div 
                                x-show="open" 
                                @click.away="open = false" 
                                x-transition:enter="transition ease-out duration-200"
                                x-transition:enter-start="opacity-0 scale-95"
                                x-transition:enter-end="opacity-100 scale-100"
                                x-transition:leave="transition ease-in duration-150"
                                x-transition:leave-start="opacity-100 scale-100"
                                x-transition:leave-end="opacity-0 scale-95"
                                id="notifications-dropdown"
                                class="fixed right-4 sm:absolute sm:right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-lg shadow-lg z-50 overflow-hidden dropdown-menu">
                                <div class="p-3 bg-primary-600 dark:bg-primary-700 text-white">
                                    <h3 class="font-semibold">Notificaciones</h3>
                                    <p class="text-xs text-primary-200">Tienes 3 notificaciones sin leer</p>
                                </div>
                                <div class="divide-y divide-gray-200 dark:divide-gray-700 max-h-72 overflow-y-auto custom-scrollbar">
                                    <template x-for="notification in notifications" :key="notification.id">
                                        <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
                                            <div class="flex justify-between items-start">
                                                <div>
                                                    <p class="font-medium text-gray-900 dark:text-white" x-text="notification.title"></p>
                                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1" x-text="Hace ${notification.time}"></p>
                                                </div>
                                                <div x-show="!notification.read" class="h-2 w-2 bg-primary-500 rounded-full"></div>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                                <div class="p-3 bg-gray-50 dark:bg-gray-700 text-center">
                                    <a href="#" class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300">Ver todas las notificaciones</a>
                                </div>
                            </div>
                        </div>

                        <!-- Profile Menu -->
                        <div class="relative" x-data="{ open: false }">
                            <button 
                                @click="open = !open"
                                id="profile-trigger"
                                class="flex items-center space-x-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 hover:scale-105">
                                <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary-600 to-secondary-600 flex items-center justify-center text-white font-semibold">
                                    SA
                                </div>
                                <div class="hidden sm:block text-left">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white">Super Admin</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Administrador</p>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </button>

                            <!-- Dropdown -->
                            <div 
                                x-show="open" 
                                @click.away="open = false" 
                                x-transition:enter="transition ease-out duration-200"
                                x-transition:enter-start="opacity-0 scale-95"
                                x-transition:enter-end="opacity-100 scale-100"
                                x-transition:leave="transition ease-in duration-150"
                                x-transition:leave-start="opacity-100 scale-100"
                                x-transition:leave-end="opacity-0 scale-95"
                                id="profile-dropdown"
                                class="fixed right-4 sm:absolute sm:right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg z-50 overflow-hidden dropdown-menu">
                                <div class="py-1">
                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Mi Perfil</a>
                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Configuración</a>
                                    <div class="border-t border-gray-200 dark:border-gray-700"></div>
                                    <a href="../../logout.php" class="block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700">Cerrar Sesión</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Welcome Section -->
            <section class="mb-8" data-aos="fade-up">
                <div class="relative overflow-hidden bg-gradient-to-r from-primary-600 to-secondary-600 rounded-2xl shadow-xl">
                    <div class="absolute inset-0 bg-grid-white/10 bg-[size:20px_20px]"></div>
                    <div class="relative p-8 sm:p-10">
                        <div class="max-w-3xl">
                            <h2 class="text-3xl sm:text-4xl font-bold text-white mb-2">Bienvenido, Super Administrador</h2>
                            <p class="text-primary-100 text-lg">Gestiona todas las áreas de la institución desde este panel centralizado.</p>
                            
                            <div class="mt-6 flex flex-wrap gap-4">
                                <a href="../admin/gestion_estudiantes.php" class="inline-flex items-center px-4 py-2 bg-white text-primary-700 rounded-lg font-medium shadow-sm hover:bg-primary-50 transition-colors duration-200 hover:scale-105 transform">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                                        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                                    </svg>
                                    Ver Estudiantes
                                </a>
                                <a href="../admin/gestion_docentes.php" class="inline-flex items-center px-4 py-2 bg-primary-800 text-white rounded-lg font-medium shadow-sm hover:bg-primary-900 transition-colors duration-200 hover:scale-105 transform">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
                                    </svg>
                                    Ver Docentes
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Stats Section -->
            <section class="mb-8" data-aos="fade-up" data-aos-delay="100">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    <!-- Estudiantes -->
                    <div class="card-stats relative bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 overflow-hidden card-3d">
                        <div class="flex justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Estudiantes</p>
                                <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">1,248</p>
                                <p class="text-xs text-green-600 dark:text-green-400 mt-2 flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
                                    </svg>
                                    <span>+12.5% este mes</span>
                                </p>
                            </div>
                            <div class="bg-primary-100 dark:bg-primary-900/50 p-3 rounded-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                                </svg>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                <div class="bg-primary-600 h-2 rounded-full" style="width: 75%"></div>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">75% de capacidad</p>
                        </div>
                    </div>

                    <!-- Docentes -->
                    <div class="card-stats relative bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 overflow-hidden card-3d">
                        <div class="flex justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Docentes</p>
                                <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">64</p>
                                <p class="text-xs text-green-600 dark:text-green-400 mt-2 flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
                                    </svg>
                                    <span>+4.2% este mes</span>
                                </p>
                            </div>
                            <div class="bg-secondary-100 dark:bg-secondary-900/50 p-3 rounded-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-secondary-600 dark:text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path d="M12 14l9-5-9-5-9 5 9 5z" />
                                    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998a12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
                                </svg>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                <div class="bg-secondary-600 h-2 rounded-full" style="width: 85%"></div>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">85% de capacidad</p>
                        </div>
                    </div>

                    <!-- Carreras -->
                    <div class="card-stats relative bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 overflow-hidden card-3d">
                        <div class="flex justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Carreras</p>
                                <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">18</p>
                                <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-2 flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
                                    </svg>
                                    <span>Sin cambios</span>
                                </p>
                            </div>
                            <div class="bg-green-100 dark:bg-green-900/50 p-3 rounded-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                </svg>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                <div class="bg-green-600 h-2 rounded-full" style="width: 60%"></div>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">60% de capacidad</p>
                        </div>
                    </div>

                    <!-- Ingresos -->
                    <div class="card-stats relative bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 overflow-hidden card-3d">
                        <div class="flex justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Ingresos</p>
                                <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">Bs. 125,400</p>
                                <p class="text-xs text-green-600 dark:text-green-400 mt-2 flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
                                    </svg>
                                    <span>+18.3% este mes</span>
                                </p>
                            </div>
                            <div class="bg-yellow-100 dark:bg-yellow-900/50 p-3 rounded-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                <div class="bg-yellow-600 h-2 rounded-full" style="width: 90%"></div>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">90% del objetivo mensual</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Charts Section -->
            <section class="mb-8" data-aos="fade-up" data-aos-delay="200">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- Inscripciones Chart -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 card-hover">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Inscripciones por Mes</h3>
                        <div class="h-80">
                            <canvas id="inscripcionesChart"></canvas>
                        </div>
                    </div>

                    <!-- Distribución Chart -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 card-hover">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Distribución por Carrera</h3>
                        <div class="h-80">
                            <canvas id="distribucionChart"></canvas>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Quick Access Cards -->
            <section class="mb-8" data-aos="fade-up" data-aos-delay="300">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-primary-600 dark:text-primary-400" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                    </svg>
                    Acceso Rápido
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                    <!-- Estudiantes -->
                    <a href="../admin/gestion_estudiantes.php" class="card-hover bg-gradient-to-br from-blue-500 to-blue-600 p-6 rounded-xl shadow-md text-white transform transition-all duration-300 hover:scale-105">
                        <div class="text-center">
                            <div class="bg-white/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                                <i class="fas fa-users text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Estudiantes</h3>
                            <p class="text-blue-100 text-sm mt-2">Gestión de estudiantes registrados</p>
                        </div>
                    </a>

                    <!-- Docentes -->
                    <a href="../admin/gestion_docentes.php" class="card-hover bg-gradient-to-br from-purple-500 to-purple-600 p-6 rounded-xl shadow-md text-white transform transition-all duration-300 hover:scale-105">
                        <div class="text-center">
                            <div class="bg-white/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                                <i class="fas fa-chalkboard-teacher text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Docentes</h3>
                            <p class="text-purple-100 text-sm mt-2">Administración del personal docente</p>
                        </div>
                    </a>

                    <!-- Carreras -->
                    <a href="../carrera/gestionar_carreras.php" class="card-hover bg-gradient-to-br from-green-500 to-green-600 p-6 rounded-xl shadow-md text-white transform transition-all duration-300 hover:scale-105">
                        <div class="text-center">
                            <div class="bg-white/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                                <i class="fas fa-graduation-cap text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Carreras</h3>
                            <p class="text-green-100 text-sm mt-2">Control y asignación de carreras</p>
                        </div>
                    </a>

                    <!-- Cursos -->
                    <a href="../cursos/gestionar_cursos.php" class="card-hover bg-gradient-to-br from-yellow-500 to-yellow-600 p-6 rounded-xl shadow-md text-white transform transition-all duration-300 hover:scale-105">
                        <div class="text-center">
                            <div class="bg-white/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                                <i class="fas fa-book-open text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Cursos</h3>
                            <p class="text-yellow-100 text-sm mt-2">Manejo de cursos académicos</p>
                        </div>
                    </a>

                    <!-- Materias -->
                    <a href="../materias/gestionar_materias.php" class="card-hover bg-gradient-to-br from-pink-500 to-pink-600 p-6 rounded-xl shadow-md text-white transform transition-all duration-300 hover:scale-105">
                        <div class="text-center">
                            <div class="bg-white/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                                <i class="fas fa-calendar-alt text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Materias</h3>
                            <p class="text-pink-100 text-sm mt-2">Programación de materias</p>
                        </div>
                    </a>

                    <!-- Roles -->
                    <a href="../superadmin/gestion_roles.php" class="card-hover bg-gradient-to-br from-indigo-500 to-indigo-600 p-6 rounded-xl shadow-md text-white transform transition-all duration-300 hover:scale-105">
                        <div class="text-center">
                            <div class="bg-white/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                                <i class="fas fa-user-tag text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Roles</h3>
                            <p class="text-indigo-100 text-sm mt-2">Gestión de roles y permisos</p>
                        </div>
                    </a>

                    <!-- Administradores -->
                    <a href="../admin/gestion_admins.php" class="card-hover bg-gradient-to-br from-gray-600 to-gray-700 p-6 rounded-xl shadow-md text-white transform transition-all duration-300 hover:scale-105">
                        <div class="text-center">
                            <div class="bg-white/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                                <i class="fas fa-user-shield text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Administradores</h3>
                            <p class="text-gray-300 text-sm mt-2">Gestión de administradores</p>
                        </div>
                    </a>

                    <!-- Caja -->
                    <a href="../caja/dashboard_caja.php" class="card-hover bg-gradient-to-br from-red-500 to-red-600 p-6 rounded-xl shadow-md text-white transform transition-all duration-300 hover:scale-105">
                        <div class="text-center">
                            <div class="bg-white/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                                <i class="fas fa-cash-register text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Caja</h3>
                            <p class="text-red-100 text-sm mt-2">Gestión financiera y pagos</p>
                        </div>
                    </a>
                </div>
            </section>

            
        </div>
    </main>

    <script>
        // Inicializar gráficos cuando el DOM esté listo
        document.addEventListener('DOMContentLoaded', function() {
            // Gráfico de Inscripciones por Mes
            const inscripcionesCtx = document.getElementById('inscripcionesChart').getContext('2d');
            const inscripcionesChart = new Chart(inscripcionesCtx, {
                type: 'line',
                data: {
                    labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    datasets: [{
                        label: 'Inscripciones 2025',
                        data: [65, 78, 90, 85, 92, 110, 120, 130, 145, 160, 175, 190],
                        borderColor: '#0ea5e9',
                        backgroundColor: 'rgba(14, 165, 233, 0.1)',
                        tension: 0.4,
                        fill: true,
                        borderWidth: 3,
                        pointBackgroundColor: '#0ea5e9',
                        pointBorderColor: '#fff',
                        pointRadius: 5,
                        pointHoverRadius: 7
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                color: document.documentElement.classList.contains('dark') ? '#fff' : '#333',
                                font: {
                                    family: "'Inter', sans-serif",
                                    size: 12
                                },
                                padding: 20
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                            titleFont: {
                                family: "'Poppins', sans-serif",
                                size: 14
                            },
                            bodyFont: {
                                family: "'Inter', sans-serif",
                                size: 13
                            },
                            padding: 12,
                            displayColors: false,
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: document.documentElement.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
                            },
                            ticks: {
                                color: document.documentElement.classList.contains('dark') ? '#fff' : '#333',
                                font: {
                                    family: "'Inter', sans-serif",
                                    size: 11
                                },
                                padding: 10
                            }
                        },
                        x: {
                            grid: {
                                color: document.documentElement.classList.contains('dark') ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
                            },
                            ticks: {
                                color: document.documentElement.classList.contains('dark') ? '#fff' : '#333',
                                font: {
                                    family: "'Inter', sans-serif",
                                    size: 11
                                },
                                padding: 10
                            }
                        }
                    },
                    animation: {
                        duration: 2000,
                        easing: 'easeOutQuart'
                    }
                }
            });

            // Gráfico de Distribución por Carrera
            const distribucionCtx = document.getElementById('distribucionChart').getContext('2d');
            const distribucionChart = new Chart(distribucionCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Educacion Parvularia', 'Robotica'],
                    datasets: [{
                        data: [30, 25,],
                        backgroundColor: [
                            
                            '#f59e0b',
                            '#ef4444',
                            
                        ],
                        borderWidth: 1,
                        hoverOffset: 15
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                color: document.documentElement.classList.contains('dark') ? '#fff' : '#333',
                                padding: 20,
                                font: {
                                    family: "'Inter', sans-serif",
                                    size: 12
                                },
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                            titleFont: {
                                family: "'Poppins', sans-serif",
                                size: 14
                            },
                            bodyFont: {
                                family: "'Inter', sans-serif",
                                size: 13
                            },
                            padding: 12,
                            cornerRadius: 8
                        }
                    },
                    cutout: '65%',
                    animation: {
                        animateRotate: true,
                        animateScale: true,
                        duration: 2000,
                        easing: 'easeOutQuart'
                    }
                }
            });

            // Actualizar colores de los gráficos cuando cambia el modo oscuro
            document.addEventListener('alpine:initialized', () => {
                window.Alpine.effect(() => {
                    const isDark = window.Alpine.store('darkMode');
                    
                     // Actualizar colores de los ejes y leyendas
                    inscripcionesChart.options.scales.y.ticks.color = isDark ? '#fff' : '#333';
                    inscripcionesChart.options.scales.x.ticks.color = isDark ? '#fff' : '#333';
                    inscripcionesChart.options.scales.y.grid.color = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
                    inscripcionesChart.options.scales.x.grid.color = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
                    inscripcionesChart.options.plugins.legend.labels.color = isDark ? '#fff' : '#333';
                    
                    distribucionChart.options.plugins.legend.labels.color = isDark ? '#fff' : '#333';
                    
                    inscripcionesChart.update();
                    distribucionChart.update();
                });
            });
        });
    </script>
</body>

</html>
