body {
  margin:0;
  background:#000;
  color:#fff;
  font-family:sans-serif;
  overflow:hidden;
}
#video {
  width:100vw;
  height:100vh;
  background:#000;
}

/* Barra vertical lado derecho */
#sidebar {
  position:absolute;
  top:0; right:0;
  width:clamp(120px, 20vw, 220px);
  height:100%;
  display:flex; 
  flex-direction:column;
  align-items:center; 
  justify-content:flex-start;
  padding:2vh 0.5vw;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(8px);
  overflow-y:auto; overflow-x:hidden;
  transition:opacity 0.5s;
  scroll-behavior:smooth;
}
#sidebar.hidden {
  opacity:0;
  pointer-events:none;
}
#sidebar::-webkit-scrollbar { display:none; }

.item {
  width:90%;
  height:clamp(90px, 14vh, 160px);
  margin:1vh 0;
  border-radius:1vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:rgba(255,255,255,0.05);
  cursor:pointer;
  transition:transform 0.2s, background 0.3s, color 0.3s;
  flex-shrink:0;
  padding:0.5vh;
}
.item.active {
  background:rgba(255,255,255,0.2);
  transform:scale(1.1);
}
.logo {
  width:70%;
  height:70%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.logo img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.item .title {
  font-size:clamp(10px, 1.2vw, 16px);
  text-align:center;
  margin-top:0.5vh;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:90%;
}
.item.active .title {
  color:#0f9dff;
}

/* Overlay canal actual */
#channelOverlay {
  position:absolute;
  top:2vh; left:2vw;
  background:rgba(0,0,0,0.7);
  padding:1vh 2vw;
  border-radius:1vw;
  display:flex; 
  align-items:center; 
  gap:1vw;
  opacity:0;
  transition:opacity 0.5s;
}
#channelOverlay.show { opacity:1; }
#channelOverlay .logo {
  width:clamp(40px, 5vw, 60px);
  height:clamp(40px, 5vw, 60px);
}
#channelOverlay .name {
  font-size:clamp(12px, 2vw, 20px);
  font-weight:bold;
}

/* Overlay de reconexión */
#reconnectOverlay {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  background:rgba(0,0,0,0.8);
  padding:2vh 4vw;
  border-radius:1vw;
  font-size:clamp(16px, 3vw, 28px);
  font-weight:bold;
  text-align:center;
  opacity:0;
  transition:opacity 0.5s;
}
#reconnectOverlay.hidden { opacity:0; pointer-events:none; }
#reconnectOverlay.show { opacity:1; }

/* Controles inferiores */
#controls {
  position:absolute;
  bottom:3vh;
  left:50%;
  transform:translateX(-50%);
  display:flex; 
  gap:2vw;
  background:rgba(0,0,0,0.6);
  padding:1vh 2vw;
  border-radius:1vw;
  transition:opacity 0.5s;
}
#controls.hidden {
  opacity:0;
  pointer-events:none;
}
button {
  background:none;
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:clamp(18px, 2vw, 28px);
}
button:hover { color:#0f9dff; }