:root{
  --sidebar-w: 260px;
  --header-h: 60px;
}

#sidebarOverlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.5);
  z-index:1039;
}

/* Main spacing general */
.app-main{
  margin-left: var(--sidebar-w);
  padding-top: var(--header-h);
  min-height: 100vh;
}

@media (max-width: 991.98px){
  /* sidebar se oculta en móvil */
  #appSidebar{
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  #appSidebar.open{ transform: translateX(0); }
  #sidebarOverlay.open{ display:block; }

  /* header ocupa todo */
  header{ left:0 !important; }

  .app-main{ margin-left: 0; }
}