/**03**/
/* --- Menú lateral --- */
.sidebar {
    width:35px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    /*
    background-color: rgba(var(--side-back), 0.95);
    color: rgba(var(--side-color), 1);
    */
}
#sidebar{height:100vh;}
.sidebar .toggle-btn::before {
  content: "☰";
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /*  color: #fff;*/
}
.sidebar #Imagen {
  display: none;
}
.sidebar .menu-section {
  display: none;
  margin: 5px 0;
}
.sidebar:hover .menu-section {
  display: inherit;
  margin: 5px 0;
}

.sidebar.abierto,
.sidebar:hover {
  width:fit-content; /* 👈 se expande al hacer hover */
  transition:width 0.5s ease;
  overflow-y: auto;
}
.sidebar.abierto .menu-section ,
.sidebar:hover .menu-section {
  display: block;
}
.sidebar.abierto .optica ,
.sidebar:hover .optica {
  display: flex;
  align-items: center;
  justify-content: space-around;
}


.sidebar:hover .toggle-btn::before,
.sidebar.abierto .toggle-btn::before {
  content: "";
}
.sidebar:hover #Imagen,
.sidebar.abierto #Imagen{
  display: block;
}
.vertiHori{
  display:flex;
  flex-direction: column;
}
/*.sidebar button{margin-left: 20px;}*/
/* Responsive */
@media (max-width:900px) {
  .sidebar {
    max-height: 2em !important;
    width: 100vw;
    overflow-y: hidden;
  }
  .sidebar.abierto,
  .sidebar:hover {
    max-height: 70vh !important;
    height: fit-content !important;
    transition:height 0.5s ease;
    width: 100vw!important;
  }
  .vertiHori{
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  /*,
  .sidebar:hover .menu-section
  */
  .sidebar.abierto .menu-section  {
    /*display: block;*/
    display:flex;
    justify-content: center;
  }
}