/* Underground — sistema visual compartido por todas las superficies.
   styles.css conserva los contratos funcionales del reproductor y del editor. */
html *,html{scrollbar-width:none!important}
html *::-webkit-scrollbar,html::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
/* Las flechas de las filas horizontales: una a cada costado, centradas, y
   sólo mientras el puntero está encima de la fila (ver scroll-controls.js). */
.scroll-nav{position:fixed;z-index:96;transform:translateY(-50%);width:36px;height:36px;padding:0;
  display:grid;place-items:center;border-radius:50%;border:1px solid var(--stroke-2);
  background:var(--card);color:var(--text);box-shadow:0 4px 14px #00000024;
  animation:flecha-in .14s ease both}
.scroll-nav[hidden]{display:none}
@keyframes flecha-in{from{opacity:0}to{opacity:1}}
.scroll-nav svg{width:17px;height:17px}
.scroll-nav--prev svg{transform:rotate(180deg)}
.scroll-nav:hover{background:var(--surface-2);color:var(--accent)}
.ordenando{scroll-snap-type:none!important;scroll-behavior:auto!important;overflow-anchor:none}
[data-drag-ghost]{box-shadow:var(--elev);background:var(--card);border-radius:8px;opacity:.95}
/* Los dos temas son monocromos y uno es el espejo del otro: superficies
   neutras, sin el matiz crema o marrón de la interfaz anterior, y un único
   acento —negro en claro, blanco en oscuro— que heredan todos los estados
   seleccionados: botones, chips, tarjetas, filas, progreso, ecualizador y
   controles del reproductor. */
:root {
  /* La barra lateral queda entre el fondo y la tarjeta, para separar las dos
     superficies. */
  --base:#ededed;--card:#fbfbfb;--ink:#141515;
  --sidebar-bg:#f5f5f5;
  --accent:#0b0c0c;--accent-soft:rgba(0,0,0,.075);
  /* El vidrio de lo seleccionado: el canal del acento a poca opacidad, un filo
     por dentro y una sombra que en claro apenas se nota */
  --glass:0,0,0;--sel-shadow:0 5px 18px rgba(0,0,0,.06);--sel-glow:none;
  --r-s:6px;--r-m:8px;--r-l:12px;--r-xl:16px;
  --emph:var(--accent);--emph-on:#fff;--emph-ink:var(--accent);
  --aura:none;--aura-s:none;--aura-t:none;--aura-ring:rgba(0,0,0,.3);
  --elev:0 16px 50px #0002;--elev-s:0 4px 14px #0001;
  --topH:76px;--barH:92px;--sidebar:222px;
  --brand:var(--sans);color-scheme:light;
}
:root[data-theme="dark"] {
  --base:#070808;--card:#101111;--ink:#f7f7f5;
  --sidebar-bg:#0d0e0e;
  --accent:#fff;--accent-soft:rgba(255,255,255,.075);
  --glass:255,255,255;--sel-shadow:0 5px 18px rgba(0,0,0,.18);--sel-glow:drop-shadow(0 0 5px rgba(255,255,255,.2));
  --emph:#fff;--emph-on:#080909;--emph-ink:#fff;
  --aura:none;--aura-s:none;--aura-t:none;--aura-ring:rgba(255,255,255,.34);
  --elev:0 20px 60px #0006;--elev-s:0 4px 16px #0003;
  color-scheme:dark;
}
body{letter-spacing:-.01em}
.mesh{display:none}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{transition:background .16s,color .16s,opacity .16s,transform .16s}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.shell{grid-template-columns:var(--sidebar) minmax(0,1fr)}
.library-sidebar{display:flex;flex-direction:column;min-height:0;padding:28px 16px 18px;background:var(--sidebar-bg);border-right:1px solid var(--stroke);overflow:auto}
.sidebar-brand{display:flex;align-items:center;gap:10px;text-align:left;padding:0 8px 32px;font-size:19px;font-weight:750;letter-spacing:-.7px}
.sidebar-brand .brand-mark{width:30px;height:30px;border-radius:7px;box-shadow:none}
.brand-caption{display:block;margin-top:6px;font-size:8px;font-weight:600;letter-spacing:1.6px;color:var(--text-3)}
.top-menu{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:0;border:0;background:none;box-shadow:none}
.top-menu .tm-i{width:100%;height:43px;display:flex;justify-content:flex-start;gap:13px;padding:0 13px;border-radius:8px;color:rgba(var(--glass),.72);font-weight:550;font-size:14px}
.top-menu .tm-i svg{width:19px;height:19px;flex:none}
.top-menu .tm-i:hover{background:rgba(var(--glass),.05);color:var(--accent)}
.top-menu .tm-i[aria-current="page"],.top-menu .tm-i[aria-expanded="true"]{
  background:linear-gradient(135deg,rgba(var(--glass),.105),rgba(var(--glass),.045));
  color:var(--accent);font-weight:650;
  box-shadow:inset 0 0 0 1px rgba(var(--glass),.07),var(--sel-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
.top-menu .tm-i[aria-current="page"] svg{filter:var(--sel-glow)}
.nav-section-label{font-size:10px;letter-spacing:1.4px;color:var(--text-3);padding:29px 13px 9px}
.sidebar-foot{margin-top:auto;padding:32px 13px 0;font-size:11px;color:var(--text-3)}
.top-listas{width:100%;display:flex;flex-direction:column;align-items:stretch}
.top-listas .tm-i::after{content:'›';margin-left:auto;font-size:19px;transform:rotate(0deg)}
.top-listas .tm-i[aria-expanded="true"]::after{transform:rotate(90deg)}
.top-listas .tm-i[aria-expanded="true"]:not([aria-current="page"]){
  background:none;color:rgba(var(--glass),.72);font-weight:550;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.listas-menu{position:static;width:100%;min-width:0;max-height:none;padding:14px 0 8px;border:0;border-radius:0;background:none;box-shadow:none;animation:none}
.listas-menu .side-h{font-size:10px;padding:0 12px 8px;letter-spacing:.06em}
.pl{padding:9px 10px;font-size:12px;border-radius:6px}
.pl.is-on,.listas-menu .pl.is-on{background:rgba(var(--glass),.07);color:var(--accent);font-weight:650;box-shadow:inset 0 0 0 1px rgba(var(--glass),.055);backdrop-filter:blur(12px)}
.topbar{grid-template-columns:1fr minmax(220px,420px) 1fr;padding:0 32px;gap:20px;border-bottom:1px solid var(--stroke);background:var(--card)}
.topbar .tb-brand,.crumbs>span,.crumbs>svg{display:none}
.crumbs{font-size:14px}.crumbs strong{font-weight:600}
.top-search{height:40px;width:100%;max-width:none;border-radius:7px;background:var(--surface);border:1px solid var(--stroke)}
.top-search input{font-size:13px}.top-search input::placeholder{font-size:13px}
.tb-actions{gap:10px}.theme-sw{border-radius:7px;background:none;box-shadow:none}
.gbtn{box-shadow:none;border-radius:8px;background:none}
.content{padding:32px clamp(24px,3.3vw,56px) 48px;scrollbar-width:thin}
.view{max-width:1440px;margin:0 auto}
.home-heading{margin:0 0 28px}
.home-heading>span{font-size:10px;letter-spacing:1.8px;font-weight:650;color:var(--accent)}
.home-heading h2{font-size:clamp(28px,3vw,42px);font-weight:650;letter-spacing:-1.5px;margin:10px 0 7px}
.home-heading p{font-size:14px;color:var(--text-3);margin:0}
.feature{min-height:270px;border-radius:10px;box-shadow:none;margin:0 0 38px;grid-template-columns:minmax(0,1fr) 42%;background:linear-gradient(110deg,#343b31,#20281f);}
.feature-in{padding:32px;gap:12px}
.feature-title{text-transform:none;font-size:clamp(32px,3.8vw,52px);font-weight:650;letter-spacing:-1.6px;line-height:1.1}
.feature-kicker{font-size:10px;letter-spacing:1.8px;font-weight:600;color:#deded1}
.feature-sub{font-size:14px;max-width:40ch;color:#efefe3;opacity:.8}
.feature-art{mask-image:linear-gradient(90deg,transparent,#000 28%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%)}
.feature-play{background:#f1eee4;color:#242820;box-shadow:none;border-radius:6px;font-weight:650;height:42px}
.feature-ver{border-radius:6px;box-shadow:none;background:#ffffff12;font-weight:500}
.feature-foot{gap:10px}.feature-stats{font-size:11px}
.sec-h h3,.rail-h h3{font-size:21px;font-weight:650;letter-spacing:-.5px}
.home-sec{margin-bottom:36px}.rails{gap:36px}
.rail{grid-auto-columns:176px;gap:22px}.rail-why{background:none;padding:0;font-weight:450;font-size:11px}
.rail-h p{font-size:13px;margin-top:6px}
.card{gap:11px}.card-art{border-radius:6px;box-shadow:none}
.card::before,.artist-ph::after{display:none}
.card:hover .card-art{transform:none;filter:brightness(1.08)}
.card-t{font-size:14px;font-weight:600;padding:0}.card-a{font-size:12px;padding:0}
.card-play{background:var(--accent);color:var(--emph-on)}
.badge-flac{background:none;padding:0;color:var(--text-3);font-size:9px;letter-spacing:1px}
.artists{grid-auto-columns:116px;gap:24px}.artist-ph{box-shadow:none}.artist:hover .artist-ph{transform:scale(1.025)}
.row{min-height:62px;border-radius:5px;border-bottom:1px solid var(--stroke);font-size:14px}
.row-m strong{font-weight:550}.row:hover{background:var(--hover)}
.row.is-cur{
  background:linear-gradient(100deg,rgba(var(--glass),.09),rgba(var(--glass),.045));
  box-shadow:inset 0 0 0 1px rgba(var(--glass),.065);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.row-art,.un i{border-radius:4px;box-shadow:none}
.sec-t{font-size:34px;font-weight:650;letter-spacing:-1px}
.search-head{gap:12px;margin-bottom:28px}.search-lead{font-size:14px;line-height:1.6}
.chips{gap:8px}.chip,.lib-chip{border-radius:6px;padding:9px 15px;font-weight:550;background:var(--surface);border:1px solid var(--stroke)}
.chip.is-on,.lib-chip.is-on{background:var(--accent-soft);color:var(--accent);border-color:transparent;box-shadow:none}
.grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:28px 22px}
.lib-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.lib-head{gap:28px;padding:10px 0 30px;margin:0;border-bottom:1px solid var(--stroke)}
.lib-art{width:172px;height:172px;border-radius:8px;box-shadow:none;background:var(--accent-soft);color:var(--accent)}
.lib-title{font-size:clamp(30px,4vw,54px);font-weight:650;letter-spacing:-1.6px;line-height:1.08}
.lib-kind{letter-spacing:1.6px;font-size:10px}.lib-meta{font-size:13px}
.lib-actions{padding:20px 0;margin:0;gap:10px;flex-wrap:wrap}
.lib-actions button,.ask-row button,.btn-pp{border-radius:6px;min-height:40px;box-shadow:none;font-weight:600}
.lib-actions button.primary{background:var(--accent);color:var(--emph-on)}
.donate{background:none;border:0;border-top:1px solid var(--stroke);border-radius:0;box-shadow:none;backdrop-filter:none;padding:28px 0 0;margin-top:44px}
.pp-chip{display:none}.donate p{font-size:12px;max-width:55ch}.btn-pp{background:var(--surface);color:var(--text-2);font-size:12px;border:1px solid var(--stroke)}
.home-foot{border:0;color:var(--text-3);opacity:.8}
.bar{background:var(--card);box-shadow:var(--elev-s),0 0 0 1px var(--stroke);border-radius:12px;grid-template-columns:minmax(220px,1fr) minmax(250px,1.6fr) minmax(150px,1fr)}
.bar::before,.bar::after{display:none}.bar-art{border-radius:5px;box-shadow:none}
.bar-meta strong{font-size:13px;font-weight:600}.bar-meta span{font-size:11.5px}
.play{background:var(--ink);color:var(--card);box-shadow:none;width:40px;height:40px}.play:hover{transform:scale(1.04)}
.ico{border-radius:6px}.ico.on{color:var(--accent)}
.line-fill{background:var(--accent)}.line-knob{box-shadow:none}
.qpanel{border-radius:12px;border:1px solid var(--stroke);background:var(--card);box-shadow:var(--elev)}
.qpanel-t{font-size:12px;font-weight:600}.qpanel-now i{border-radius:5px}
.acct-menu,.addpl-menu{background:var(--card);border:1px solid var(--stroke-2);border-radius:10px;padding:8px;box-shadow:var(--elev)}
.acct-i,.addpl-menu button{min-height:42px;border-radius:5px;font-size:13px}
.addpl-menu{min-width:260px;max-height:min(540px,70dvh)}
.ask{width:420px;max-width:calc(100vw - 32px)}
.ask form{padding:28px;gap:18px;border-radius:12px}.ask h3{font-size:23px;font-weight:600;letter-spacing:-.5px}
.ask input{height:46px;font-size:16px;border-radius:6px}.ask p{font-size:14px}.ask-row{margin-top:6px;gap:10px}
.eq-head{padding-bottom:24px;border-bottom:1px solid var(--stroke);margin-bottom:24px}
.eq-card{border-radius:10px;box-shadow:none;background:var(--surface);border:1px solid var(--stroke);padding:26px 20px}
.eq-linea{stroke:var(--accent)}.eq-area{fill:color-mix(in srgb,var(--accent) 10%,transparent)}
.eq-pie{padding:20px 0}.eq-switch{border-radius:6px}
.toast{border-radius:8px;box-shadow:var(--elev);font-size:13px}
.gate{background:var(--base)}.gate-card{text-align:left;max-width:430px;padding:24px}
.gate-mark{margin:0 0 36px;width:54px;height:54px;border-radius:10px;box-shadow:none}
.gate h1{font-size:38px;font-weight:650;line-height:1.05;letter-spacing:-1.6px}
.gate-sub{font-size:19px;margin:18px 0 34px;color:var(--text-2)}
.gate-btn{border-radius:6px;height:48px;font-weight:600;box-shadow:none}.gate-demo{border-radius:6px;height:48px}.gate-scope{font-size:11px;line-height:1.6}
.gate-legal{font-size:11px;line-height:1.8;margin-top:42px}.gate-links{justify-content:flex-start}
.stage{--aura:none;--aura-s:none}
.stage-art{border-radius:7px;box-shadow:none}
.stage-id h2{font-size:20px;font-weight:650}.stage-id p{font-size:13px}
.stage-btn,.stage-extras .ico{border-radius:7px}
.peek{border-radius:12px;box-shadow:var(--elev),0 0 0 1px var(--stroke)}
.stage .blyrics-container{--blyrics-font-weight:650;letter-spacing:-.8px}
@media(min-width:861px) and (max-width:1100px){
  :root{--sidebar:190px}.library-sidebar{padding-inline:10px}.sidebar-brand{font-size:16px;gap:8px}
  .topbar{padding-inline:24px;grid-template-columns:auto minmax(160px,1fr) auto}
  .feature-in{padding:24px}.feature-title{font-size:36px}
}
@media(max-width:860px){
  :root{--topH:64px;--tabH:64px;--miniH:64px;--barH:140px}
  .library-sidebar{display:none}.shell{grid-template-columns:minmax(0,1fr)}
  .topbar{padding:0 16px;gap:10px;grid-template-columns:auto minmax(0,1fr) auto}
  .topbar .tb-brand{display:flex}.topbar .brand-mark{width:27px;height:27px;border-radius:6px;box-shadow:none}
  .top-search{height:38px;min-width:0}.top-search input,.top-search input::placeholder{font-size:12px}
  .tb-actions{gap:2px}.theme-sw{width:30px}.gbtn{padding:0 2px}.gchev{display:none}
  .content{padding:24px 20px 32px}.home-heading{margin-bottom:24px}.home-heading h2{font-size:32px;letter-spacing:-1px}.home-heading p{font-size:12px}
  .feature{min-height:250px;grid-template-columns:minmax(0,1fr);margin-bottom:30px;border-radius:8px}
  .feature-in{padding:24px;gap:12px}.feature-title{font-size:36px}.feature-sub{max-width:27ch;font-size:13px}
  .feature-art{inset:0 0 0 35%}.feature-art.on{opacity:.45}.feature-foot{gap:8px}.feature-ver{padding:0 12px}.feature-stats{width:100%}
  .sec-h h3,.rail-h h3{font-size:20px}.rail{grid-auto-columns:152px;gap:16px}.artists{grid-auto-columns:96px;gap:18px}
  .rail-h{gap:5px}.rail-why{font-size:10px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .sec-t{font-size:30px}.search-head{margin-bottom:24px}
  .lib-chips{flex-wrap:nowrap;overflow:auto;padding:2px 0 10px;gap:7px;margin-bottom:20px}.lib-chip{white-space:nowrap;flex:none;min-height:40px}
  .lib-head{gap:18px;padding-bottom:24px}.lib-art{width:100px;height:100px;flex:none}.lib-title{font-size:29px;letter-spacing:-.8px}
  .lib-kind{font-size:9px}.lib-meta{font-size:11px}.lib-actions{padding:18px 0}
  .row{min-height:66px;padding:8px 2px;gap:8px}
  /* Compactas: número, carátula y título; lo demás está en el menú del tema */
  .row{grid-template-columns:18px 40px minmax(0,1fr)}
  .rows.seleccionando .row{grid-template-columns:18px 40px minmax(0,1fr)}
  .row.rrow{grid-template-columns:42px minmax(0,1fr)}
  /* La tarjeta de lo que suena es oscura en los dos temas: su acento es el
     blanco también en claro, o el avance y los íconos activos no se verían */
  .bar{--accent:#fff;grid-template-columns:minmax(0,1fr) auto;border-radius:8px;left:10px;right:10px;padding:0 12px 0 8px;background:#161717;box-shadow:none;border:1px solid #ffffff0d}
  .bar-art{width:46px;height:46px;border-radius:4px}.bar .play{background:none;color:#f4f1e9}
  .bar .line-fill{background:var(--accent)}.tabbar{background:var(--sidebar-bg);border-top:0}.tab-i{font-size:10px;font-weight:500;gap:5px;margin:7px 5px;border-radius:9px}
  .tab-i.is-on{color:var(--accent);font-weight:650;background:rgba(var(--glass),.065);box-shadow:inset 0 0 0 1px rgba(var(--glass),.045);backdrop-filter:blur(12px)}
  .addpl-menu{left:10px!important;right:10px!important;top:auto!important;bottom:calc(12px + var(--sa-b))!important;width:auto;max-width:none;max-height:70dvh;border-radius:14px;padding:12px;box-shadow:0 -14px 70px #0006}
  body:has(.addpl-menu:not([hidden]))::after{content:'';position:fixed;inset:0;background:#0006;z-index:94;pointer-events:none}
  .addpl-menu button{min-height:48px;font-size:15px}.acct-menu{max-width:calc(100vw - 24px)}
  .ask form{padding:24px}.eq-head{gap:12px}.eq-head .sec-t{font-size:27px}.eq-card{padding:20px 8px}
  .stage-id h2{font-size:19px}.stage-id p{font-size:13px}.stage-art{border-radius:8px}
  .donate{margin-top:30px}.donate--home p{flex-basis:100%}
}
@media(max-width:380px){.content{padding-inline:16px}.topbar{padding-inline:10px;gap:6px}.theme-sw{display:none}.feature-in{padding:20px}.feature-title{font-size:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Artistas, discografía y resultados del catálogo. */
.entity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px;margin:20px 0 30px}
.entity-card{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;text-align:left;padding:12px;border:1px solid transparent;border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer}
.entity-card:hover{background:var(--hover);border-color:var(--stroke)}
.entity-card:focus-visible,.profile-button:focus-visible,.profile-artist-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.entity-card strong{font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.entity-card>span:last-child{font-size:12px;color:var(--text-3);line-height:1.5}
.entity-image{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;overflow:hidden;border-radius:8px;background:var(--accent-soft);color:var(--text);font-size:48px;font-weight:700;margin-bottom:6px}
.entity-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.entity-image.round{border-radius:50%}
.artist-card{text-align:center}
.profile-header{display:flex;align-items:center;gap:32px;margin:30px 0 40px}
.profile-header>.entity-image{width:200px;flex-shrink:0}
.profile-header h2{font-size:clamp(28px,4vw,54px);line-height:1.1;letter-spacing:-.04em;margin:8px 0 16px;overflow-wrap:anywhere}
.profile-header>div{min-width:0}
.profile-label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3)}
.profile-section{margin:24px 0 36px}
.profile-section h3,.search-songs-title{font-size:21px;margin:0 0 16px;letter-spacing:-.025em}
.profile-note{font-size:13px;color:var(--text-3);line-height:1.6;margin:8px 0 20px}
.profile-button{border:1px solid var(--stroke);background:var(--surface);color:var(--text);border-radius:24px;padding:10px 18px;margin:12px 0;cursor:pointer;font:inherit;font-size:13px}
.profile-button:disabled{opacity:.5;cursor:wait}
.profile-artist-link{border:0;background:none;color:var(--text);font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:0}
@media(max-width:760px){
  .tabbar{grid-template-columns:repeat(5,minmax(0,1fr))}
  .entity-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .entity-card{padding:10px}.entity-card strong{font-size:14px}
  .profile-header{gap:18px;margin:24px 0 30px;align-items:flex-start}
  .profile-header>.entity-image{width:108px}.profile-header h2{font-size:28px}
  .profile-label{font-size:10px}.profile-tracks .row{min-width:0}
}