/* ============================================================
   playlist.css — Panel derecho: lista de reproducción
   ============================================================ */
.pl-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  cursor: grab;
}
.pl-item.live { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(47,129,247,.4); }
.pli-head {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 8px 5px 10px;
  cursor: grab;
}
.pli-num {
  background: var(--panel2); border-radius: 10px;
  font-size: 11px; padding: 1px 7px; color: var(--text-dim);
}
.pl-item.live .pli-num { background: var(--accent); color: #fff; }
.pli-ico { font-size: 13px; }
.pli-title {
  font-weight: 600; font-size: 13px;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pli-tools { display: flex; gap: 3px; opacity: .55; }
.pl-item:hover .pli-tools { opacity: 1; }
.pli-tools .btn { padding: 1px 6px; font-size: 10px; }

.pli-thumbs {
  display: flex; gap: 6px;
  padding: 2px 10px 10px;
  overflow-x: auto;
}
.pli-thumb {
  width: 92px; min-width: 92px;
  aspect-ratio: 16/9;
  border-radius: 5px; overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--text-dim);
}
.pli-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pli-thumb:hover { border-color: var(--border2); }
.pli-thumb.active { border-color: var(--accent); }
.pli-more { align-self: center; color: var(--text-dim); font-size: 12px; }