[hidden] { display: none !important; }
.ltp-controls[hidden] { display: none !important; }

.ltp-pl-wrap { max-width: 100%; }
.ltp-pl-search { margin-bottom: 1rem; }
.ltp-pl-input {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  font-size: 1rem;
}

.ltp-pl-item {
  display: grid; grid-template-columns: 96px 1fr; gap: .75rem;
  align-items: start; padding: .75rem; border: 1px solid #eef2f7; border-radius: 1rem;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.ltp-pl-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: .75rem; }
.ltp-pl-meta { display: grid; gap: .5rem; }
.ltp-pl-title { margin: 0; font-size: 1rem; line-height: 1.3; }

.ltp-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 0; border-radius: 999px; padding: .9rem 1.25rem; cursor: pointer;
  font-weight: 600; color: #fff; background: #0a8f1e; /* verde "escuchar" */
  box-shadow: 0 2px 8px rgba(16,185,129,.3);
}
.ltp-btn .ltp-icon { display:inline-block; width:1em; text-align:center; }

.ltp-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ltp-btn-pause { background: #196b83; } /* azul/teal "pausar" */
.ltp-btn-ghost {
  border: 1px solid #e2e8f0; background: #fff; color: #111827;
  padding: .5rem .75rem; border-radius: .75rem; font-weight: 600; cursor: pointer;
}
.ltp-ctrl { position: relative; }
.ltp-speed-menu {
  position: absolute; top: calc(100% + 4px); left: 0; background: #fff;
  border: 1px solid #e5e7eb; border-radius: .5rem; min-width: 120px;
  list-style: none; margin: 0; padding: .25rem; z-index: 10; box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.ltp-speed-menu li { padding: .4rem .6rem; border-radius: .375rem; cursor: pointer; }
.ltp-speed-menu li:hover { background: #f3f4f6; }

.ltp-volume { display: inline-flex; align-items: center; gap: .5rem; }
.ltp-range { width: 140px; accent-color: #0a8f1e; }
@media (max-width: 480px) {
  .ltp-pl-item { grid-template-columns: 1fr; }
  .ltp-pl-thumb { width: 100%; height: 160px; }
  .ltp-range { width: 110px; }
}

.ltp-pl-list{
  display:grid;
  gap:28px;
  grid-template-columns: repeat(var(--ltp-cols, 2), minmax(0,1fr));
}
.ltp-cols-1 .ltp-pl-list{ --ltp-cols:1; }
.ltp-cols-2 .ltp-pl-list{ --ltp-cols:2; }
.ltp-cols-3 .ltp-pl-list{ --ltp-cols:3; }
.ltp-cols-4 .ltp-pl-list{ --ltp-cols:4; }

/* Móvil: solo cambiamos la variable */
@media (max-width: 900px){
  .ltp-pl-list{ --ltp-cols:1!important; }
}