function renderShell(activePage, pageTitle) {
    Auth.requireLogin();
    const usuario = Auth.getUsuario();

    document.body.insertAdjacentHTML('afterbegin', `
    <div class="layout">
      <aside class="sidebar">
        <div class="brand">🚚 Delivery Admin</div>
        <nav>
          <a href="dashboard.html" data-page="dashboard">📦 Pedidos</a>
          <a href="tiendas.html" data-page="tiendas">🏬 Tiendas</a>
          <a href="repartidores.html" data-page="repartidores">🛵 Repartidores</a>
          <a href="zonas.html" data-page="zonas">🗺️ Zonas y tarifas</a>
          <a href="reportes.html" data-page="reportes">📊 Reportes</a>
        </nav>
      </aside>
      <main class="main">
        <div class="topbar">
          <h1>${pageTitle}</h1>
          <div>
            <span class="user">${usuario ? usuario.nombre + ' · ' + usuario.rol : ''}</span>
            <button class="logout" id="btnLogout">Salir</button>
          </div>
        </div>
        <div id="content"></div>
      </main>
    </div>
  `);

    document.querySelectorAll(`.sidebar nav a[data-page="${activePage}"]`).forEach((a) => a.classList.add('active'));
    document.getElementById('btnLogout').addEventListener('click', () => {
        Auth.clear();
        window.location.href = 'login.html';
    });
}

function estadoBadge(estado) {
    return `<span class="badge ${estado}">${estado}</span>`;
}

function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str ?? '';
    return div.innerHTML;
}
