body {
  margin:0;
  font-family: Arial, sans-serif;
  background:#f0f0f0;
}

/* ===== LAYOUT ===== */
.app {
  display:flex;
  height:100vh;
}

/* PANEL CENTRAL */
.player-panel {
  flex:1;
  padding:20px;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* PANEL DERECHO */
.side-panel {
  width:320px;
  background:#fff;
  border-left:1px solid #ddd;
  display:flex;
  flex-direction:column;
}

/* TABS */
.tabs {
  display:flex;
}
.tab-btn {
  flex:1;
  padding:12px;
  border:none;
  cursor:pointer;
  background:#eee;
}
.tab-btn.active {
  background:#007cba;
  color:#fff;
}

/* LISTA CANALES */
.channel-list {
  overflow-y:auto;
  flex:1;
}
.channel {
  padding:12px;
  border-bottom:1px solid #eee;
  cursor:pointer;
}
.channel:hover {
  background:#f5f5f5;
}

/* PLAYER */
.video-js {
  width:100%;
  max-width:900px;
  aspect-ratio:16/9;
}

#audioPlayer {
  width:100%;
  max-width:600px;
}