body { background: #f7f9fb; }
.card-soft { border: 1px solid #eaecef; border-radius: 14px; box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.sidebar {
  background:#fff; border:1px solid #eaecef; border-radius:14px; padding:14px;
}
.lesson-item { border-radius: 10px; }
.lesson-item.active { background:#eef6ff; border:1px solid #cfe3ff; }
.badge-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot-done { background:#16a34a; }
.dot-pending { background:#cbd5e1; }




:root{
  --sidebar-w: 320px;
  --navbar-h: 64px; /* ajusta si tu navbar es más alto */
}

/* Sidebar fijo SOLO en desktop */
.sidebar-wrap{
  width: var(--sidebar-w);
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  height: calc(100vh - var(--navbar-h));
  overflow-y: auto;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 1030;
}

/* Contenido empujado a la derecha SOLO en desktop */
@media (min-width: 992px){
  .content-wrap{
    margin-left: var(--sidebar-w);
    transition: margin-left .25s ease;
  }
}

/* Estado oculto en desktop */
.sidebar-hidden .sidebar-wrap{
  transform: translateX(calc(-1 * var(--sidebar-w)));
  opacity: 0;
}
@media (min-width: 992px){
  .sidebar-hidden .content-wrap{
    margin-left: 0;
  }
}












/* Layout base borrar es el sidebar */
#pageLayout {
  transition: all .25s ease;
}

/* Sidebar */
#pageLayout .sidebar {
  transition: transform .25s ease, opacity .25s ease;
}

/* Cuando se oculta */
#pageLayout.sidebar-hidden .sidebar {
  transform: translateX(-110%);
  opacity: 0;
}

/* El contenido ocupa todo */
#pageLayout.sidebar-hidden .col-lg-9 {
  width: 100%;
}