/* ===== SIDEBAR PRO ===== */
.sidebar{
  position:fixed;
  left:0;
  top:0;
  width:260px;
  height:100vh;
  background:linear-gradient(to bottom,#1E3A5F,#142B44);
  color:white;
  padding:30px 0;
  box-shadow:4px 0 20px rgba(0,0,0,.25);
  z-index:1000;
  overflow-y:auto;
  scrollbar-width:thin;
}

/* Scroll bonito */
.sidebar::-webkit-scrollbar{
  width:6px;
}
.sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.3);
  border-radius:10px;
}

/* LOGO */
.logo{
  text-align:center;
  margin-bottom:35px;
}
.logo-img{
  width:150px;
  transition:.3s;
}
.logo-img:hover{
  transform:scale(1.05);
}

/* MENU */
.sidebar ul{
  list-style:none;
  padding:0 20px;
}
.sidebar ul li{
  margin:10px 0;
}
.sidebar ul li a{
  color:white;
  text-decoration:none;
  display:flex;
  align-items:center;
  padding:12px 15px;
  border-radius:8px;
  transition:.25s;
}
.sidebar ul li a i{
  margin-right:12px;
}

/* Hover */
.sidebar ul li a:hover{
  background:rgba(255,255,255,.15);
  padding-left:22px;
}

/* ACTIVO */
.activo a{
  background:#4A90E2;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* ===== SUBMENU ADMIN ===== */
.submenu{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  margin-left:10px;
}
.submenu a{
  display:block;
  font-size:14px;
  background:rgba(255,255,255,.08);
  margin:5px 0;
  padding:8px 10px;
  border-radius:6px;
}
.menu-open .submenu{
  max-height:300px;
}

.arrow{
  margin-left:auto;
  transition:.3s;
}
.menu-open .arrow{
  transform:rotate(180deg);
}

/* CONTENIDO */
.main-content{
  margin-left:260px;
  padding:30px;
}

/* Responsive (celular) */
@media(max-width:900px){
  .sidebar{
    transform:translateX(-100%);
    transition:.3s;
  }
  .sidebar.show{
    transform:translateX(0);
  }
  .main-content{
    margin-left:0;
  }
}