/* ================================
   Personalización del Right Sidebar
   AdminLTE 3.8
   ================================ */

/* Sidebar derecho a 1/4 del ancho de la pantalla */
.control-sidebar {
  width: 25vw !important;   /* 25% del ancho del viewport */
  max-width: none !important;
}

/* Ajustar contenido cuando el sidebar se desliza */
/* .control-sidebar-slide-open .content-wrapper,
.control-sidebar-slide-open .main-footer,
.control-sidebar-slide-open .main-header {
  margin-right: 25vw !important;
} */

/* Ajuste de scroll interno */
.control-sidebar,
.control-sidebar-content {
  height: 100%;
  overflow-y: auto;
}

/* Right Sidebar full-width en móviles (≤991.98px) */
@media (max-width: 991.98px){
  /* Aumentamos especificidad con .wrapper y !important para vencer a AdminLTE */
  .wrapper aside.control-sidebar{
    position: fixed !important;
    top: 0 !important; bottom: 0 !important;
    right: -100vw !important;   /* oculto fuera de pantalla */
    width: 100vw !important;    /* ocupa todo el ancho */
    max-width: 100vw !important;
    height: 100vh !important;   /* alto completo */
    height: 100dvh !important;  /* viewport dinámico moderno */
    z-index: 1060 !important;
    border-left: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transition: right .3s ease !important;
  }

  /* Cuando se abre (slide u open), tráelo a la vista */
  body.control-sidebar-slide-open .wrapper aside.control-sidebar,
  body.control-sidebar-open .wrapper aside.control-sidebar{
    right: 0 !important;
  }

  /* Bloquea scroll del fondo */
  body.control-sidebar-slide-open,
  body.control-sidebar-open{
    overflow: hidden !important;
  }

  /* Backdrop opcional */
  .cs-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1055;
    display: none;
  }
  body.control-sidebar-slide-open .cs-backdrop,
  body.control-sidebar-open .cs-backdrop{ display: block; }
}