/* ---------- Barra de iconos (izquierda) ---------- */
:root{
  --icon-bar-w:   60px;      /* ancho fijo de la barra de iconos */
}

#icon-bar{
  position: fixed;
  top: 0;
  left: calc(-1 * var(--icon-bar-w)); /* fuera de pantalla */
  width: var(--icon-bar-w);
  height: 100%;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(5px);
  border-right: 1px solid #ccc;
  transition: left .3s ease;
  z-index: 1001;
}
#icon-bar.visible{ left: 0; }

.icon-item{
  width: 30px;
  height: 30px;
  margin: 15px 0;
  cursor: pointer;
}
.icon-item img{ width: 100%; height: auto; }