body {
  margin: 0; font-family: Arial, sans-serif;
  background: #111; color: #fff;
  display: flex; height: 100vh; overflow: hidden;
}

/* Sidebar */
#sidebar {
  width: 220px; background: #000; color: #fff;
  overflow-y: auto; padding: 10px;
}
#sidebar h2 {
  margin: 10px; font-size: 16px; text-align: center; border-bottom: 1px solid #333; padding-bottom: 5px;
}
.canal {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; margin: 5px 0;
  cursor: pointer; border-radius: 6px;
}
.canal:hover { background:#222; }
.canal img {
  max-width: 50px; max-height: 30px; object-fit: contain;
}
.canal p { margin: 0; font-size: 14px; }

/* Main */
#main {
  flex: 1; display: flex; flex-direction: column;
}
header {
  background:#000; padding:10px 20px;
}
header h1 { margin:0; font-size:18px; }
#player-container {
  background:#000; flex-shrink: 0;
}
#infoCanal {
  padding: 15px;
  font-size: 14px;
  background: #1a1a1a;
  color: #bbb;
  flex: 1;
  overflow-y: auto;
}

/* Footer */
footer {
  background:#000; color:#777; padding:8px;
  font-size:12px; text-align:center;
  position:absolute; bottom:0; left:220px; right:0;
}