<!-- ============================================================ -->
<!-- SIDEBAR - Navegación principal -->
<!-- ============================================================ -->
<aside id="sidebar" class="sidebar-glass w-64 min-h-screen flex flex-col fixed left-0 top-0 z-[9999] transition-transform duration-300 -translate-x-full lg:translate-x-0">
    
    <!-- Logo -->
    <div class="px-6 py-6 border-b border-white/5">
        <a href="<?= BASE_URL ?>" class="flex items-center gap-3 group">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center shadow-lg shadow-primary-500/25 group-hover:shadow-primary-500/40 transition-shadow">
                <span class="font-sora font-bold text-white text-sm">JW</span>
            </div>
            <div>
                <h1 class="font-sora font-bold text-white text-lg leading-tight tracking-tight">ZLETS</h1>
                <span class="text-[10px] text-gray-400 uppercase tracking-widest">JW DIESEL S.A.C.</span>
            </div>
        </a>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 px-3 py-6 space-y-1 overflow-y-auto">
        <?php
        $menuItems = [
            ['id' => 'dashboard', 'icon' => 'fa-chart-pie',   'label' => 'Dashboard',  'url' => '?c=dashboard'],
            ['id' => 'letras',    'icon' => 'fa-file-invoice-dollar', 'label' => 'Letras', 'url' => '?c=letras'],
            ['id' => 'reportes',      'icon' => 'fa-chart-bar',   'label' => 'Reportes',      'url' => '?c=reportes'],
            ['id' => 'empresas',      'icon' => 'fa-building',    'label' => 'Empresas',      'url' => '?c=empresas'],
            ['id' => 'mantenimiento', 'icon' => 'fa-tools',       'label' => 'Mantenimiento', 'url' => '?c=mantenimiento'],
        ];
        
        foreach ($menuItems as $item):
            $isActive = ($currentPage ?? '') === $item['id'];
        ?>
        <a href="<?= BASE_URL . $item['url'] ?>" 
           class="nav-item flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200
                  <?= $isActive 
                      ? 'bg-primary-600/20 text-primary-400 shadow-lg shadow-primary-500/10 border border-primary-500/20' 
                      : 'text-gray-400 hover:text-white hover:bg-white/5' ?>">
            <i class="fas <?= $item['icon'] ?> w-5 text-center <?= $isActive ? 'text-primary-400' : '' ?>"></i>
            <span><?= $item['label'] ?></span>
            <?php if ($isActive): ?>
                <div class="ml-auto w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse"></div>
            <?php endif; ?>
        </a>
        <?php endforeach; ?>
    </nav>

    <!-- Bottom Card -->
    <div class="px-4 pb-6">
        <div class="glass-card p-4 rounded-2xl text-center">
            <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center shadow-lg shadow-emerald-500/25">
                <i class="fas fa-clock text-white text-lg"></i>
            </div>
            <p class="font-sora font-semibold text-white text-sm mb-1">Hoy es</p>
            <p class="text-xs text-gray-400" id="sidebar-date"><?= date('d/m/Y') ?></p>
            <p class="text-xs text-gray-500 mt-1" id="sidebar-time"><?= date('H:i') ?></p>
        </div>
    </div>
</aside>

<!-- Mobile Overlay -->
<div id="sidebar-overlay" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[9998] hidden lg:hidden" onclick="toggleSidebar()"></div>

<!-- Main Content Area -->
<main class="flex-1 lg:ml-64 min-w-0 transition-all duration-300">
    <!-- Top Bar -->
    <header class="sticky top-0 z-20 glass-header px-6 py-4 flex items-center justify-between">
        <div class="flex items-center gap-4">
            <!-- Mobile menu button -->
            <button onclick="toggleSidebar()" class="lg:hidden p-2 rounded-lg hover:bg-white/5 text-gray-400">
                <i class="fas fa-bars text-lg"></i>
            </button>
            <div>
                <h2 class="font-sora font-bold text-xl text-white"><?= htmlspecialchars($pageTitle ?? 'Dashboard') ?></h2>
                <?php
                $dias_es = ['Sunday'=>'Domingo','Monday'=>'Lunes','Tuesday'=>'Martes','Wednesday'=>'Miércoles','Thursday'=>'Jueves','Friday'=>'Viernes','Saturday'=>'Sábado'];
                $meses_es = ['January'=>'Enero','February'=>'Febrero','March'=>'Marzo','April'=>'Abril','May'=>'Mayo','June'=>'Junio','July'=>'Julio','August'=>'Agosto','September'=>'Septiembre','October'=>'Octubre','November'=>'Noviembre','December'=>'Diciembre'];
                $fechaEsp = $dias_es[date('l')] . ', ' . date('d') . ' de ' . $meses_es[date('F')] . ' de ' . date('Y');
                ?>
                <p class="text-xs text-gray-500 mt-0.5"><?= $fechaEsp ?></p>
            </div>
        </div>
        <div class="flex items-center gap-3">
            <!-- Theme Toggle -->
            <button id="btn-theme-toggle" class="p-2.5 rounded-xl hover:bg-white/5 transition-colors group" onclick="toggleTheme()" title="Cambiar Tema">
                <i id="theme-icon" class="fas fa-sun text-amber-400 group-hover:text-amber-300 transition-colors"></i>
            </button>
            <!-- Notification Bell -->
            <button id="btn-alertas" class="relative p-2.5 rounded-xl hover:bg-white/5 transition-colors group" onclick="mostrarTodasAlertas()">
                <i class="fas fa-bell text-gray-400 group-hover:text-primary-400 transition-colors"></i>
                <span id="badge-alertas" class="absolute -top-0.5 -right-0.5 w-5 h-5 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center shadow-lg shadow-red-500/30 hidden">0</span>
            </button>
            <!-- User Avatar -->
            <div class="flex items-center gap-3 pl-3 border-l border-white/10">
                <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-primary-500 to-violet-600 flex items-center justify-center">
                    <i class="fas fa-user text-white text-sm"></i>
                </div>
                <div class="hidden sm:block">
                    <p class="text-sm font-medium text-white">Admin</p>
                    <p class="text-[10px] text-gray-500">JW DIESEL</p>
                </div>
            </div>
        </div>
    </header>

    <!-- Page Content -->
    <div class="p-6">

    <?php
    // Flash Messages
    $flash = getFlash();
    if ($flash):
        $flashClass = match($flash['tipo']) {
            'success' => 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400',
            'error'   => 'bg-red-500/10 border-red-500/30 text-red-400',
            'warning' => 'bg-amber-500/10 border-amber-500/30 text-amber-400',
            default   => 'bg-primary-500/10 border-primary-500/30 text-primary-400',
        };
        $flashIcon = match($flash['tipo']) {
            'success' => 'fa-check-circle',
            'error'   => 'fa-exclamation-circle',
            'warning' => 'fa-exclamation-triangle',
            default   => 'fa-info-circle',
        };
    ?>
    <div class="mb-6 px-4 py-3 rounded-xl border <?= $flashClass ?> flex items-center gap-3 animate-fade-in" id="flash-msg">
        <i class="fas <?= $flashIcon ?>"></i>
        <span class="text-sm"><?= htmlspecialchars($flash['mensaje']) ?></span>
        <button onclick="document.getElementById('flash-msg').remove()" class="ml-auto opacity-60 hover:opacity-100">
            <i class="fas fa-times"></i>
        </button>
    </div>
    <?php endif; ?>
