<style>
    body { font-family: 'Segoe UI', sans-serif; }
    .table td, .table th { vertical-align: middle; }
    .sidebar { width: 220px; background-color: #343a40; position: fixed; top: 56px; bottom: 0; left: 0; z-index: 1045; padding-top: 1rem; height: 100vh; overflow-y: auto; border-right: 1px solid #dee2e6; }
    .sidebar a { color: white; text-decoration: none; }
    .sidebar .nav-link.active,
    .sidebar .nav-link:hover { background-color: #495057; }
    .content { margin-left: 230px; margin-top: 70px; }
    @media (max-width: 991.98px) {
      .sidebar { position: relative; width: 100%; height: auto; border-right: none; }
      .content { margin-left: 0; margin-top: 20px; }
    }
  </style>
  
<!-- 🔷 NAVBAR -->
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">SIIH | Admin</a>
  </div>
</nav>

<!-- 📘 SIDEBAR -->
<div class="sidebar text-white">
  <nav class="nav flex-column">
    <a href="/IMPORTADORES/sistemas/alta_usuarios" class="nav-link px-3 py-2 <?= $_GET['url'] === 'sistemas/alta_usuarios' ? 'active' : '' ?>">👥 Usuarios</a>

    <a href="/IMPORTADORES/sistemas/bitacora_login" class="nav-link px-3 py-2 <?= $_GET['url'] === 'sistemas/bitacora_login' ? 'active' : '' ?>">🕵️ Bitácora Accesos</a>
    
    <a href="/IMPORTADORES/sistemas/bitacora_usuarios" class="nav-link px-3 py-2 <?= $_GET['url'] === 'sistemas/bitacora_usuarios' ? 'active' : '' ?>">🛠️ Bitácora Usuarios</a>

    <a href="#" class="nav-link px-3 py-2">📦 Configuración</a>

    <a href="/IMPORTADORES/sistemas/logout" class="nav-link px-3 py-2 text-danger">🚪 Cerrar sesión</a>
  </nav>
</div>