.sd-topbar-renov{
  /* nada de position fixed */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 8px 18px;
  background: rgb(192, 0, 35);
  color: #fff;

  /* para que se vea separado del contenido */
  margin: 0;
  border-radius: 0;
}

.sd-topbar-renov__center{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-weight: 700;
  font-size: 17px;
}

.sd-topbar-renov__date{ opacity:.9; font-weight:600; }

.sd-topbar-renov__pill{
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.12);
  font-weight: 900;
}

.sd-topbar-renov__right{ justify-self: end; }
.sd-topbar-renov__link{ color:#fff; text-decoration: underline; font-weight:800; }

@media (max-width: 767px){
  .sd-topbar-renov{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 12px;
  }
  .sd-topbar-renov__center{
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 16px;
  }
  .sd-topbar-renov__right{ justify-self:center; }
}

/* ✅ Empuja el sidebar por la topbar (solo cuando sd-renov-on está activo) */
body.sd-renov-on .main-sidebar,
body.sd-renov-on .left-side{
  padding-top: 50px !important; /* escritorio OK (header) */
}

/* ✅ MÓVIL: el problema es que se corta el menú -> darle altura y scroll */
@media (max-width: 767px){
  body.sd-renov-on .main-sidebar,
  body.sd-renov-on .left-side{
    padding-top: 95px !important; /* tu topbar en móvil (ajustalo si hace falta) */
  }

  body.sd-renov-on .main-sidebar .sidebar{
    height: calc(100vh - 95px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Si AdminLTE te metió slimScroll (MUY común), esto es clave */
  body.sd-renov-on .main-sidebar .slimScrollDiv{
    height: calc(100vh - 95px) !important;
  }
}