/*=============================================
Interfaz Dashboard
=============================================*/

/*=============================================
El botón hamburguesa solo se necesita en mobile
(ahí es la única forma de abrir el sidebar, que
arranca oculto). En desktop el sidebar ya está
siempre visible, así que se oculta el botón; se
vuelve a mostrar en el media query de abajo.
=============================================*/

#menu-toggle{
  display: none;
  padding: calc(.375rem + 2px) calc(.75rem + 2px) !important;
}

#menu-toggle i{
  font-size: 1rem;
}

#wrapper {
  display: flex;
  flex-direction: row;
}

#sidebar-wrapper {
  min-height: 100vh;
  width: 280px;
  z-index:1;
  transition: all 0.3s;
  position: relative;
}

#sidebar-wrapper .sidebar-heading {
  font-size: 1.5rem;
  text-align: center;
  min-width:225px;
  padding: 0;
  margin: 0 !important;
  height: 110px;
  overflow: hidden;
}

#sidebar-wrapper .sidebar-heading img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
}

#sidebar-wrapper .list-group-item {
  padding: 15px 20px;
}

#sidebar-wrapper .list-group-item i {
  margin-right: 10px;
}

#sidebar-wrapper .menu-text {
  display: inline;
}

#sidebar-wrapper.collapsed {
  width: 80px;

}

#sidebar-wrapper.collapsed .menu-text {
  display: none;

}

/*=============================================
Con el nav achicado, el logo (que normalmente pide
min-width:225px) se encoge para entrar en los 80px
del sidebar; el object-fit:contain que ya tiene la
imagen se encarga de que no se deforme
=============================================*/

#sidebar-wrapper.collapsed .sidebar-heading {
  min-width: 0;
  height: 60px;
}

/*=============================================
Con el nav achicado (solo íconos), ocultamos las
flechas (chevron) de TODOS los desplegables: no
tiene sentido mostrarlas si el click para abrir/
cerrar ya está deshabilitado (ver pointer-events:none
en sidebar.php). Antes esto listaba cada chevron a
mano (Caja/Cortes/Proveedores/Compras) y se
desactualizaba cada vez que se agregaba un
desplegable nuevo; ahora apunta a la clase
compartida "sidebarChevron" que ya tienen todos.
=============================================*/

#sidebar-wrapper.collapsed .sidebarChevron {
  display: none;
}

/*=============================================
Botón de achicar/expandir: al ancho normal apunta
para la izquierda (achicar), rotado 180° apunta para
la derecha (expandir). También lo bajamos un poco en
mobile para que no tape al botón hamburguesa.
=============================================*/

#btnToggleSidebarCollapse {
  background: #fff;
}

#btnToggleSidebarCollapse:hover {
  background: #f0f0f5;
}

#sidebar-wrapper.collapsed .list-group-item {
  margin-right: 0;
  text-align: center;
}

#sidebar-wrapper.collapsed .list-group-item i{
 margin: 0;
}

#page-content-wrapper {
  flex-grow: 1;
  width:50%;
}

/* Float the sidebar for mobile */
@media (max-width: 768px) {
  #sidebar-wrapper {
    position: fixed;
    z-index: 1000;
    height: 100%;
    left: -280px;
    transition: all 0.3s ease;
  }

  #sidebar-wrapper.show {
    left: 0;
  }

  #menu-toggle {
    display: block;
    margin-left: 20px;
  }
  
}

.backDashboard{
    background-color: #f0f0f5 !important;
}
.borderDashboard{
    border: 1px solid #dce1e5 !important;
}