#sidebar{
    background-color: rgb(31, 41, 55);
    margin: 10px 0px 10px 10px;
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye verticalmente */
    align-items: center;
    background-color: rgb(31, 41, 55);
    box-sizing: border-box;
    /* 
  margin: 10px 0px 10px 10px;
    border-radius: 99999px;
     */
}
----------- IMAGEN DE PERFIL ----------- */
#sidebar_logo {
  width: 55px;
  height: 55px;
  border-radius: 100%;
  object-fit: cover; /* Para que la imagen se recorte bien si no es cuadrada */
}

  
  /* ----------- CONTENEDORES ----------- */
  .sidebar_buttons {
    background-color: rgb(31, 41, 55);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .sidebar_logo,
  .sidebar_user {
    padding: 50px 0;
    text-align: center;
  }
  
  #sidebar_bottom_buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    gap: 0.5rem;
  }
  
  /* ----------- BOTONES SUPERIORES ----------- */
  .sidebar_button {
    cursor: pointer;
    margin-top: 10px;
    font-family: Roboto;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    width: 100%;
    height: 50px;
    border: none;
    background: transparent;
    display: block;
  }
  
  .sidebar_button img {
    width: 40px;
    height: 40px;
    display: block;
    margin: auto;
    transition: all 0.3s ease;
    filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(146%) hue-rotate(10deg) brightness(90%) contrast(95%);
  }
  
  /* Hover y activo (glow blanco puro) */
  .sidebar_button:hover img,
  .sidebar_button.active img {
    transform: scale(1.1);
    filter: invert(100%) brightness(200%) drop-shadow(0 0 6px #ece5df) drop-shadow(0 0 2px #ece5df)
  }
  
  /* ----------- BOTONES INFERIORES (SETTINGS + LOGOUT) ----------- */
  .sidebar_icon_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.3s ease;
  }
  
  /* Tamaño especial para íconos pequeños */
  #logout_button img,
  #settings_button img {
    width: 20px;
    height: 20px;
    display: block;
    margin: auto;
    transition: all 0.3s ease;
    filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(146%) hue-rotate(10deg) brightness(90%) contrast(95%);
  }
  
  /* Hover glow */
  #logout_button:hover img,
  #settings_button:hover img {
    transform: scale(1.1);
    filter: invert(100%) brightness(200%) drop-shadow(0 0 6px #ece5df) drop-shadow(0 0 2px #ece5df)
  }
  
  /* Estado activo fijo solo para settings */
  #settings_button.active img {
    transform: scale(1.1);
    filter: invert(100%) brightness(200%) drop-shadow(0 0 6px #ece5df) drop-shadow(0 0 2px #ece5df)
  }
  
  #sidebar_bottom_buttons form{
    margin: auto;
  }