<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema TIC - UE Giovanni Calles</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Estilo para ocultar scrollbar en el sidebar si es muy largo */
        #sidebar::-webkit-scrollbar { width: 0px; }
    </style>
</head>
<body class="bg-slate-50">

    <header class="lg:hidden bg-slate-900 text-white p-4 flex justify-between items-center fixed top-0 w-full z-50 shadow-md">
        <div class="flex items-center gap-2">
            <i class="fas fa-microchip text-blue-400"></i>
            <span class="font-bold text-sm tracking-tight">TIC Giovanni Calles</span>
        </div>
        <button id="btn-toggle" class="p-2 hover:bg-slate-800 rounded-lg transition">
            <i class="fas fa-bars text-xl"></i>
        </button>
    </header>

    <div class="flex">
        <aside id="sidebar" class="fixed left-0 top-0 h-screen w-64 bg-slate-900 text-slate-300 z-40 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out border-r border-slate-800 overflow-y-auto">
            
            <div class="p-6 border-b border-slate-800">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white shadow-lg shadow-blue-600/20">
                        <i class="fas fa-shield-halved"></i>
                    </div>
                    <h1 class="text-white font-bold text-lg leading-none">Sistema TIC</h1>
                </div>
                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">UE Giovanni Calles</p>
            </div>

            <nav class="p-4 space-y-1">
                <p class="text-[10px] font-bold text-slate-600 uppercase px-3 py-2">General</p>
                
                <a href="../usuario/dashboard.php" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-slate-800 hover:text-white transition group">
                    <i class="fas fa-chart-pie text-slate-500 group-hover:text-blue-400"></i>
                    <span class="text-sm font-medium">Dashboard</span>
                </a>

                <p class="text-[10px] font-bold text-slate-600 uppercase px-3 py-2 mt-4">Recursos</p>

                <a href="../inventario/index.php" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-slate-800 hover:text-white transition group">
                    <i class="fas fa-laptop-code text-slate-500 group-hover:text-blue-400"></i>
                    <span class="text-sm font-medium">Inventario TIC</span>
                </a>

                <a href="../tickets/index.php" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-slate-800 hover:text-white transition group">
                    <i class="fas fa-ticket-alt text-slate-500 group-hover:text-blue-400"></i>
                    <span class="text-sm font-medium">Gestión de Tickets</span>
                </a>

                <?php if ($_SESSION['usuario_rol'] == ROL_ADMIN): ?>
                    <p class="text-[10px] font-bold text-slate-600 uppercase px-3 py-2 mt-4">Administración</p>
                    <a href="../admin/usuarios.php" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-slate-800 hover:text-white transition group">
                        <i class="fas fa-users-cog text-slate-500 group-hover:text-blue-400"></i>
                        <span class="text-sm font-medium">Usuarios</span>
                    </a>
                <?php endif; ?>

                <div class="pt-10">
                    <a href="../../config/logout.php" class="flex items-center gap-3 px-4 py-3 rounded-xl text-red-400 hover:bg-red-500/10 transition">
                        <i class="fas fa-power-off"></i>
                        <span class="text-sm font-bold">Cerrar Sesión</span>
                    </a>
                </div>
            </nav>

            <div class="absolute bottom-0 w-full p-4 border-t border-slate-800 bg-slate-900/50">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center text-[10px] font-bold text-white uppercase">
                        <?php echo substr($_SESSION['usuario_nombre'], 0, 2); ?>
                    </div>
                    <div class="truncate">
                        <p class="text-xs font-bold text-white truncate"><?php echo $_SESSION['usuario_nombre']; ?></p>
                        <p class="text-[9px] text-slate-500 uppercase"><?php echo $_SESSION['usuario_rol'] == ROL_ADMIN ? 'Analista TIC' : 'Docente'; ?></p>
                    </div>
                </div>
            </div>
        </aside>

        <div id="overlay" class="fixed inset-0 bg-slate-900/60 z-30 hidden lg:hidden backdrop-blur-sm"></div>

        <main class="flex-1 min-h-screen transition-all duration-300 pt-20 lg:pt-8 lg:ml-64">
            <div class="px-4 md:px-10">