:root { --sidebar-width: 200px; }

.app-wrap { display:flex; min-height: calc(100vh - 56px); }

.app-sidebar{
  width: var(--sidebar-width);
  background:#fff;
  border-right:1px solid rgba(0,0,0,.08);
  position: fixed;
  top:56px;
  left:0;
  height: calc(100vh - 56px);
  transform: translateX(-100%);
  transition: transform .18s ease;
  z-index:1040;
}

.app-sidebar.open{ transform: translateX(0); }

.app-main{
  flex:1;
  width:100%;
  margin-left: 0;
  transition: margin-left .18s ease;
}

/* Cuando sidebar está abierto, empuja el contenido SOLO en desktop */
@media (min-width: 992px){
  .app-main.shifted{ margin-left: var(--sidebar-width); }
}

.app-overlay{
  display:none;
  position:fixed;
  top:56px; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.35);
  z-index:1030;
}
.app-overlay.show{ display:block; }