/* ══ App shell ═════════════════════════════════════════════════════════════
   Extraído del bloque <style> inline de includes/layout-start.php
   (limpieza de CSS inline → archivo externo). */

html, body { height: 100%; overflow: hidden; margin: 0; }

.app-shell {
  display:  flex;
  height:   100vh;
  overflow: hidden;
}

#app-sidebar {
  width:       220px;
  flex-shrink: 0;
}

.main-panel {
  flex:       1;
  min-width:  0;
  overflow-y: auto;
  overflow-x: hidden;
  display:    flex;
  flex-direction: column;
}

main.page, .page {
  flex:       1;
  padding:    24px;
  background: #f8fafc;
}

/* ── Hamburger (solo móvil) ── */
#sidebar-hamburger {
  display:         none;
  position:        fixed;
  top:             calc(env(safe-area-inset-top, 0px) + 10px);
  left:            10px;
  z-index:         1000;
  width:           40px;
  height:          40px;
  background:      #0f172a;
  border:          none;
  border-radius:   8px;
  cursor:          pointer;
  align-items:     center;
  justify-content: center;
  padding:         0;
  flex-shrink:     0;
  box-shadow:      0 2px 8px rgba(0,0,0,0.15);
}

/* ── Overlay del sidebar (móvil) ── */
#sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(15,23,42,0.5);
  z-index:    998;
  backdrop-filter: blur(1px);
}

@media (max-width: 768px) {
  #sidebar-hamburger { display: flex; }
  #sidebar-overlay.visible { display: block; }
}