/* Sala de Escucha · reproductor */
body.sala-page{overflow:hidden}
body.sala-page .sala-root{position:fixed;inset:0;z-index:99990}
body.sala-page.admin-bar .sala-root{top:32px}
@media (max-width:782px){body.sala-page.admin-bar .sala-root{top:46px}}
.sala-root{--accent:#7c5cff;--bg:#0b0b10;--panel:#14141c;--panel-2:#1c1c27;--hover:rgba(255,255,255,.07);--ink:#f4f4f8;--ink-2:#a2a2b5;--line:rgba(255,255,255,.09);--tint:#3a2f6b;
  background:var(--bg);color:var(--ink);font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.sala-root *,.sala-root *::before,.sala-root *::after{box-sizing:border-box}
.sala-root button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.sala-root button:disabled{opacity:.4;cursor:default}
.sala-root :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sala-root ul,.sala-root ol{list-style:none;margin:0;padding:0}
.sala-root h1,.sala-root h2,.sala-root h3,.sala-root p{margin:0}
.sala-root svg.i{width:20px;height:20px;flex:none;display:block;fill:currentColor}
.sala-root svg.i.s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sa{height:100%;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 88px;grid-template-areas:"side main" "bar bar";gap:8px;padding:8px}
.sa.with-queue{grid-template-columns:300px minmax(0,1fr) 320px;grid-template-areas:"side main queue" "bar bar bar"}
.sa-side,.sa-main,.sa-queue{background:var(--panel);border-radius:10px;min-height:0;min-width:0}
.sa-side{grid-area:side;display:flex;flex-direction:column;gap:8px;background:none}
.sa-box{background:var(--panel);border-radius:10px}
.sa-nav{padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.sa-brand{display:flex;align-items:center;gap:10px;padding:10px 12px 6px;font-weight:800;font-size:17px;letter-spacing:-.02em}
.sa-brand i{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#ff6ba6);display:grid;place-items:center}
.sa-brand i svg{width:16px;height:16px;fill:#fff}
.sa-nav button{display:flex;align-items:center;gap:16px;height:42px;padding:0 12px;border-radius:8px;color:var(--ink-2);font-weight:650}
.sa-nav button:hover{color:var(--ink)}
.sa-nav button[aria-current=page]{color:var(--ink)}
.sa-lib{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.sa-lib-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px;color:var(--ink-2);font-weight:650}
.sa-lib-head b{display:flex;align-items:center;gap:10px}
.sa-iconbtn{width:34px;height:34px;border-radius:50%;display:inline-grid!important;place-items:center;color:var(--ink-2)}
.sa-iconbtn:hover{background:var(--hover);color:var(--ink)}
.sa-chips{display:flex;gap:8px;padding:6px 16px 10px;flex-wrap:wrap}
.sa-chip{height:32px;padding:0 14px;border-radius:999px;background:var(--panel-2);font-size:13px;font-weight:600}
.sa-chip:hover{background:var(--hover)}
.sa-chip[aria-pressed=true]{background:var(--ink);color:#000}
.sa-liblist{overflow:auto;padding:0 8px 8px;flex:1}
.sa-li{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border-radius:8px}
.sa-li:hover{background:var(--hover)}
.sa-li[aria-current=page]{background:var(--panel-2)}
.sa-li .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-li .s{color:var(--ink-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-li .tx{min-width:0;display:flex;flex-direction:column}

.sa-main{grid-area:main;overflow:auto;position:relative;scroll-behavior:smooth}
.sa-main::before{content:"";position:absolute;inset:0 0 auto 0;height:340px;background:linear-gradient(180deg,var(--tint),transparent);opacity:.55;pointer-events:none;transition:background .6s}
.sa-page{position:relative;padding:0 24px 40px;min-height:100%}
.sa-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:14px 0;margin:0 -24px;padding-inline:24px}
.sa-top.solid{background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(12px)}
.sa-search{position:relative;flex:1;max-width:420px}
.sa-search input{width:100%;height:44px;border-radius:999px;border:1px solid transparent;background:var(--panel-2);color:var(--ink);padding:0 16px 0 46px;font:inherit}
.sa-search input:hover{border-color:var(--line)}
.sa-search input:focus{outline:2px solid var(--ink);outline-offset:0;background:var(--hover)}
.sa-search svg{position:absolute;left:14px;top:12px;color:var(--ink-2)}
.sa-sec{margin-top:26px}
.sa-sec>h2{font-size:24px;letter-spacing:-.02em;margin-bottom:12px}
.sa-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.sa-sec-head h2{font-size:24px;letter-spacing:-.02em}
.sa-hello{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:8px 0 16px}
.sa-shortcuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.sa-short{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;height:56px;position:relative;padding-right:12px}
.sa-short:hover{background:rgba(255,255,255,.16)}
.sa-short .cv{width:56px;height:56px;border-radius:0}
.sa-short b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-short .pl{position:absolute;right:10px;opacity:0;transform:translateY(4px);transition:.15s}
.sa-short:hover .pl{opacity:1;transform:none}
.sa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px}
.sa-card{position:relative;padding:12px;border-radius:8px;background:transparent;display:flex;flex-direction:column;gap:10px;min-width:0;transition:background .2s}
.sa-card:hover{background:var(--panel-2)}
.sa-card .cvw{position:relative}
.sa-card .cv{width:100%;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sa-card.round .cv{border-radius:50%}
.sa-card .t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-card .s{color:var(--ink-2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sa-fab{position:absolute;right:8px;bottom:8px;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:grid!important;place-items:center;box-shadow:0 8px 16px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);transition:.18s}
.sa-card:hover .sa-fab,.sa-fab:focus-visible{opacity:1;transform:none}
.sa-fab:hover{transform:scale(1.06)!important}
.cv{display:block;aspect-ratio:1;position:relative;overflow:hidden;background:linear-gradient(135deg,hsl(var(--h,260) 45% 34%),hsl(calc(var(--h,260) + 40) 50% 18%));flex:none;border-radius:4px}
.cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv::after{content:"";position:absolute;inset:0;background:radial-gradient(circle closest-side at 50% 50%,rgba(255,255,255,.35) 0 10%,transparent 11%),repeating-radial-gradient(circle closest-side at 50% 50%,transparent 0 6%,rgba(0,0,0,.18) 6% 7%)}
.cv.has::after{display:none}
.cv.xs{width:36px}.cv.sm{width:48px}.cv.md{width:56px}

.sa-hero{display:flex;align-items:flex-end;gap:24px;padding:18px 0 22px}
.sa-hero .cv{width:min(34vw,232px);box-shadow:0 14px 40px rgba(0,0,0,.55);border-radius:6px}
.sa-hero.round .cv{border-radius:50%}
.sa-hero .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.sa-hero h1{font-size:clamp(32px,6vw,76px);font-weight:900;letter-spacing:-.04em;line-height:1;margin:8px 0 14px;overflow-wrap:anywhere;text-wrap:balance}
.sa-hero .m{color:var(--ink-2);font-size:14px}
.sa-hero .m b{color:var(--ink)}
.sa-actions{display:flex;align-items:center;gap:18px;padding:6px 0 14px}
.sa-play{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;display:grid!important;place-items:center;transition:transform .12s}
.sa-play:hover{transform:scale(1.05);filter:brightness(1.1)}
.sa-play svg{width:24px;height:24px}
.sa-tracks{display:flex;flex-direction:column}
.sa-th,.sa-tr{display:grid;grid-template-columns:44px minmax(0,6fr) minmax(0,4fr) 56px 36px 36px;gap:14px;align-items:center;padding:0 12px}
.sa-th{height:36px;color:var(--ink-2);font-size:12px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line);margin-bottom:8px;position:sticky;top:64px;background:var(--panel);z-index:3}
.sa-tr{height:56px;border-radius:6px;content-visibility:auto;contain-intrinsic-size:auto 56px}
.sa-tr:hover{background:var(--hover)}
.sa-tr .n{text-align:center;color:var(--ink-2);font-variant-numeric:tabular-nums;display:grid;place-items:center;width:44px;height:44px;grid-column:1}
.sa-tr .n>*{grid-area:1/1}
.sa-tr .n .pi{display:none;color:var(--ink)}
.sa-tr:hover .n .nn,.sa-tr.cur .n .nn{display:none}
.sa-tr:hover .n .pi{display:block}
.sa-tr .n .eqb{display:none;gap:2px;align-items:flex-end;height:14px}
.sa-tr.cur:not(:hover) .n .eqb{display:flex}
.eqb i{width:3px;background:var(--accent);height:30%;border-radius:1px}
.sa-tr.playing .eqb i{animation:eqb .9s ease-in-out infinite alternate}
.sa-tr.playing .eqb i:nth-child(2){animation-delay:-.3s}
.sa-tr.playing .eqb i:nth-child(3){animation-delay:-.6s}
@keyframes eqb{from{height:20%}to{height:100%}}
.sa-tr .who{display:flex;align-items:center;gap:12px;min-width:0}
.sa-tr .tx{min-width:0;display:flex;flex-direction:column}
.sa-tr .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-tr.cur .t{color:var(--accent)}
.sa-tr .a,.sa-tr .al{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-tr .a button:hover,.sa-tr .al button:hover{text-decoration:underline;color:var(--ink)}
.sa-tr .d{color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.sa-tr .lk{color:var(--ink-2);opacity:0}
.sa-tr:hover .lk,.sa-tr .lk.on{opacity:1}
.sa-tr .lk.on{color:var(--accent)}
.sa-empty{max-width:560px;margin:12vh auto 0;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.sa-empty h1{font-size:28px;letter-spacing:-.02em}
.sa-empty p{color:var(--ink-2)}
.sa-btn{height:40px;padding:0 20px;border-radius:999px;background:var(--ink);color:#000;font-weight:700;display:inline-flex!important;align-items:center}
.sa-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.sa-pills{display:flex;gap:8px;margin:8px 0 4px;flex-wrap:wrap}

/* barra inferior */
.sa-bar{grid-area:bar;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:center;gap:16px;padding:0 12px}
.sa-now{display:flex;align-items:center;gap:14px;min-width:0}
.sa-now .cv{width:60px;border-radius:6px;cursor:pointer}
.sa-now .tx{min-width:0;display:flex;flex-direction:column}
.sa-now .t{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-now .a{color:var(--ink-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-now .lk.on,.sa-ibtn.on{color:var(--accent)}
.sa-center{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:720px;margin:0 auto;width:100%}
.sa-ctrls{display:flex;align-items:center;gap:14px}
.sa-ibtn{display:inline-grid!important;place-items:center;width:34px;height:34px;color:var(--ink-2);border-radius:50%;position:relative}
.sa-ibtn:hover{color:var(--ink)}
.sa-ibtn.on::after{content:"";position:absolute;bottom:2px;left:50%;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.sa-pp{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#000;display:grid!important;place-items:center}
.sa-pp:hover{transform:scale(1.06)}
.sa-pp svg{width:20px;height:20px}
.sa-seek{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;width:100%;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sa-seek span:first-child{text-align:right}
.sa-right{display:flex;align-items:center;justify-content:flex-end;gap:6px}
input.sa-range{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:pointer;margin:0;--p:0%}
input.sa-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ink) var(--p),rgba(255,255,255,.22) var(--p))}
input.sa-range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;margin-top:-4px;opacity:0;box-shadow:0 1px 4px rgba(0,0,0,.5)}
input.sa-range:hover::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--accent) var(--p),rgba(255,255,255,.22) var(--p))}
input.sa-range:hover::-webkit-slider-thumb,input.sa-range:focus-visible::-webkit-slider-thumb{opacity:1}
input.sa-range::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
input.sa-range::-moz-range-progress{height:4px;border-radius:2px;background:var(--ink)}
input.sa-range::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.sa-vol{width:110px}

/* cola */
.sa-queue{grid-area:queue;overflow:auto;padding:16px 12px}
.sa-queue h3{font-size:16px;padding:0 8px 10px}
.sa-queue h4{margin:14px 8px 6px;color:var(--ink-2);font-size:13px;font-weight:650}
.sa-q{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;width:100%}
.sa-q:hover{background:var(--hover)}
.sa-q .tx{min-width:0;display:flex;flex-direction:column}
.sa-q .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.sa-q.cur .t{color:var(--accent)}
.sa-q .a{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* menús y avisos */
.sa-menu{position:fixed;z-index:99999;min-width:220px;background:var(--panel-2);border-radius:8px;padding:4px;box-shadow:0 16px 40px rgba(0,0,0,.6);max-height:70vh;overflow:auto}
.sa-menu button{display:flex;width:100%;height:38px;align-items:center;gap:12px;padding:0 12px;border-radius:4px;font-size:14px}
.sa-menu button:hover,.sa-menu button:focus-visible{background:var(--hover)}
.sa-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.sa-menu .lab{padding:6px 12px;color:var(--ink-2);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.sa-toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(10px);background:var(--ink);color:#000;padding:10px 18px;border-radius:8px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:99999}
.sa-toast.on{opacity:1;transform:translateX(-50%)}
.sa-input{height:40px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);padding:0 12px;font:inherit;width:100%}

/* pantalla completa con visualizador */
.sa-full{position:fixed;inset:0;z-index:99995;display:none;background:#050508;overflow:hidden}
.sa-full.on{display:flex;flex-direction:column}
body.admin-bar .sa-full{top:32px}
.sa-full .bg{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(70px) saturate(1.5) brightness(.55);transform:scale(1.2);transition:background-image .6s}
.sa-full .veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 0,rgba(0,0,0,.55) 100%)}
.sa-full canvas{position:absolute;inset:0;width:100%;height:100%}
.sa-fhead{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:18px 24px}
.sa-fhead .modes{display:flex;gap:6px;background:rgba(0,0,0,.35);padding:4px;border-radius:999px;backdrop-filter:blur(8px)}
.sa-fhead .modes button{height:32px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:650;color:var(--ink-2)}
.sa-fhead .modes button[aria-pressed=true]{background:var(--ink);color:#000}
.sa-fmid{position:relative;z-index:2;flex:1;display:grid;place-items:center;pointer-events:none;padding:0 24px}
.sa-fcover{width:min(36vh,300px);box-shadow:0 30px 80px rgba(0,0,0,.7);border-radius:10px;transition:transform .08s linear;will-change:transform}
.sa-ftitle{position:relative;z-index:2;text-align:center;padding:0 24px 12px}
.sa-ftitle h2{font-size:clamp(22px,4vw,40px);font-weight:900;letter-spacing:-.03em;text-wrap:balance}
.sa-ftitle p{color:var(--ink-2);margin-top:4px}
.sa-fbar{position:relative;z-index:2;max-width:760px;width:100%;margin:0 auto;padding:0 24px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.sa-fbar .sa-ctrls{justify-content:center;gap:22px}

/* móvil */
.sa-tabs{display:none}
@media (max-width:900px){
  .sa,.sa.with-queue{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"main" "bar" "tabs";padding:0;gap:0}
  .sa-side,.sa-queue{display:none}
  .sa-main{border-radius:0}
  .sa-page{padding:0 14px 30px}
  .sa-top{margin:0 -14px;padding-inline:14px}
  .sa-bar{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 12px;background:var(--panel-2);border-radius:10px;margin:0 8px 6px}
  .sa-center{display:contents}
  .sa-seek,.sa-right,.sa-ctrls .hide-m{display:none}
  .sa-now .cv{width:44px}
  .sa-tabs{display:flex;grid-area:tabs;justify-content:space-around;padding:4px 0 calc(6px + env(safe-area-inset-bottom,0px));background:var(--bg)}
  .sa-tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--ink-2);padding:6px 16px}
  .sa-tabs button[aria-current=page]{color:var(--ink)}
  .sa-th,.sa-tr{grid-template-columns:34px minmax(0,1fr) 40px 34px 34px}
  .sa-th>:nth-child(3),.sa-tr .al{display:none}
  .sa-tr .lk{opacity:1}
  .sa-hero{flex-direction:column;align-items:flex-start}
  .sa-hero .cv{width:min(60vw,220px)}
  .sa-toast{bottom:150px}
}
@media (prefers-reduced-motion:reduce){.sa-tr.playing .eqb i{animation:none;height:70%}.sa-main{scroll-behavior:auto}}

.sa-fcover.round .cv{border-radius:50%}
.sa-short .sa-fab{bottom:auto;top:9px;width:38px;height:38px}
.sa-tr .mo{opacity:0}.sa-tr:hover .mo,.sa-tr .mo:focus-visible{opacity:1}