/* ═══════════════════════════════════════════════════════════
   Underground Player (henrysrdz) — Sistema de diseño

   Colorimetría: cada tema parte de UN color base y UNA tinta
   complementaria (el texto). Todo lo demás — superficies, bordes,
   textos secundarios, hovers — sale de mezclar esos dos en oklab,
   así el contraste queda garantizado en los dos modos.

     --base   fondo del tema
     --ink    complementario del base: el texto a plena legibilidad

   El énfasis NO lleva color: lo que destaca —píldora activa, botón de play,
   barra de progreso— es blanco en los dos modos, y lo que lo despega del
   fondo es el aura, no el tono.

     --emph      relleno de énfasis: blanco, igual en claro y en oscuro
     --emph-on   texto e iconos encima de ese relleno
     --emph-ink  énfasis aplicado a texto: la tinta del tema
     --aura      halo neutro: blanco sobre base oscura, oscuro sobre clara

   El color de la carátula que suena sobrevive sólo en los lavados difusos
   —fondo de página, arranque de la barra, fondo de la vista grande—, donde
   no puede comprometer la lectura de nada:

     --now-tint / --now-tint-2   color crudo de la portada
   ═══════════════════════════════════════════════════════════ */

:root{
  --side: 250px;
  --topH: 60px;
  --barH: 84px;

  /* Zonas seguras del aparato. En un iPhone con isla dinámica o con notch valen lo
     que ocupan esos elementos; en los que no la tienen —SE, 8— valen 0. Así la misma
     regla sirve para los dos sin ramificar por modelo. Necesitan viewport-fit=cover. */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);

  /* Blur leve, general a toda la página */
  --blur: 10px;

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;

  /* ─── MODO CLARO · base #EEF1F6 · tinta #11141B ─── */
  --base: #eef1f6;
  --ink:  #11141b;

  /* Las superficies no llegan a blanco puro: el blanco queda reservado
     al énfasis, para que tenga dónde destacar. */
  --surface:   color-mix(in oklab, #ffffff 72%, var(--base));
  --surface-2: color-mix(in oklab, #ffffff 38%, var(--base));
  --elev: 0 18px 40px -18px color-mix(in oklab, var(--ink) 26%, transparent);
  --elev-s: 0 6px 18px -8px color-mix(in oklab, var(--ink) 20%, transparent);

  /* Tinte por defecto de los lavados, hasta que carga la primera carátula */
  --wash: #6f8ba8;

  /* ─── Énfasis neutro ─── */
  --emph: #ffffff;
  --emph-on: #0b0d12;
  /* Énfasis para lo que NO es un relleno con contenido dentro: texto
     destacado y controles pelados (progreso, volumen, ecualizador). Ahí el
     blanco en modo claro sería invisible sobre su propia pista, así que es
     la tinta del tema: blanco en oscuro, oscuro en claro. */
  --emph-ink: var(--text);

  /* Aura del modo claro: halo oscuro. Acá carga con todo el trabajo, porque
     entre blanco y una superficie clara no hay contraste de relleno posible
     (para 3:1 contra el blanco haría falta un fondo gris medio). El elemento
     se lee como chip elevado, y lo que garantiza la lectura es su contenido:
     texto e iconos oscuros sobre el blanco, a 17:1. */
  --aura: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent),
          0 8px 20px -4px color-mix(in srgb, var(--ink) 38%, transparent),
          0 2px 6px -1px color-mix(in srgb, var(--ink) 22%, transparent);
  --aura-s: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent),
            0 4px 12px -2px color-mix(in srgb, var(--ink) 30%, transparent);
  /* Sobre texto oscuro un halo oscuro sólo ensucia: acá queda casi mudo */
  --aura-t: 0 0 22px color-mix(in srgb, var(--ink) 9%, transparent);
  --aura-ring: color-mix(in srgb, var(--ink) 30%, transparent);

  /* ─── Derivados: idénticos en los dos temas ─── */
  --surface-t:   color-mix(in srgb, var(--surface) 74%, transparent);
  --surface-2-t: color-mix(in srgb, var(--surface-2) 72%, transparent);

  --text:   var(--ink);
  --text-2: color-mix(in oklab, var(--ink) 74%, var(--base));
  --text-3: color-mix(in oklab, var(--ink) 56%, var(--base));

  --stroke:   color-mix(in oklab, var(--ink) 13%, transparent);
  --stroke-2: color-mix(in oklab, var(--ink) 26%, transparent);
  --track:    color-mix(in oklab, var(--ink) 17%, transparent);
  --hover:    color-mix(in oklab, var(--ink) 7%, transparent);
  --hover-2:  color-mix(in oklab, var(--ink) 13%, transparent);

  /* Letra en la vista grande (estilo Apple Music) */
  --lyr-on:  var(--ink);
  --lyr-off: color-mix(in oklab, var(--ink) 58%, var(--base));

  --sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Comfortaa', var(--sans);

  --ease: cubic-bezier(.2,.8,.25,1);
}

/* ─── MODO OSCURO · base #0B0D12 · tinta #EEF1F7 ─── */
:root[data-theme="dark"]{
  --base: #0b0d12;
  --ink:  #eef1f7;

  --surface:   color-mix(in oklab, var(--base) 94%, var(--ink));
  --surface-2: color-mix(in oklab, var(--base) 88%, var(--ink));
  --elev:   0 22px 50px -20px rgba(0,0,0,.85);
  --elev-s: 0 8px 22px -10px rgba(0,0,0,.7);

  --wash: #4f7ea4;

  /* Aura del modo oscuro: acá sí es un halo luminoso alrededor del blanco */
  --aura: 0 0 0 1px rgba(255,255,255,.24),
          0 0 20px rgba(255,255,255,.30),
          0 0 52px rgba(255,255,255,.13);
  --aura-s: 0 0 0 1px rgba(255,255,255,.20),
            0 0 14px rgba(255,255,255,.26);
  --aura-t: 0 0 26px rgba(255,255,255,.42);
  --aura-ring: rgba(255,255,255,.42);
}

*[hidden],[hidden]{display:none !important}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--sans);color:var(--text);
  background:var(--base);overflow:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease, color .3s ease;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit}
::selection{background:var(--emph);color:var(--emph-on)}
:focus-visible{outline:2px solid var(--emph-ink);outline-offset:2px}

/* ─── Campo de fondo: toma el color del disco que suena ─── */
.mesh{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--base);pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(160px);pointer-events:none;
  opacity:.06;transition:background 1.2s ease, opacity 1.2s ease}
.b1{width:62vw;height:62vw;left:-18vw;top:-26vw;background:var(--now-tint,var(--wash))}
.b2{width:58vw;height:58vw;right:-18vw;bottom:-28vw;background:var(--now-tint-2,var(--wash))}
:root[data-theme="dark"] .blob{opacity:.11}
.grain{position:absolute;inset:0;opacity:.022;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ═══════════════════════════════════════════════════════════
   BARRA SUPERIOR — cubre todo el ancho de la página
   ═══════════════════════════════════════════════════════════ */
.topbar{
  position:relative;z-index:30;
  height:calc(var(--topH) + var(--sa-t));flex:none;
  display:grid;grid-template-columns:1fr minmax(0,600px) 1fr;
  align-items:center;gap:16px;
  padding:var(--sa-t) calc(18px + var(--sa-r)) 0 calc(18px + var(--sa-l));
  background:var(--surface-t);
  border-bottom:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
}

.tb-brand{justify-self:start;min-width:0;
  display:flex;align-items:center;gap:11px;
  padding:5px 10px 5px 6px;border-radius:99px;cursor:pointer;transition:background .16s}
.tb-brand:hover{background:var(--hover)}
.brand-mark{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--emph);color:var(--emph-on);box-shadow:var(--aura-s)}
/* La onda del logo va como máscara, no como imagen: así toma el color del tema
   igual que hacía el SVG con currentColor, y sirve en claro y en oscuro. El
   archivo trae sólo la onda —la tipografía del logo repetiría el texto que ya
   está al lado— y es negro sobre transparente, que es lo que la máscara usa. */
.brand-mark::before{content:"";width:21px;height:12px;background:currentColor;
  -webkit-mask:url('../images/logo-mark.png') center/contain no-repeat;
          mask:url('../images/logo-mark.png') center/contain no-repeat}
.brand-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-txt strong{font-family:var(--display);font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.015em}
.brand-txt span{font-size:10.5px;color:var(--text-3);font-weight:500;white-space:nowrap}

/* ─── Portada sin sesión ───
   `locked` en <html> esconde el marco del reproductor y muestra la portada. La
   decide un script en el <head>, antes de pintar, a partir de si la última
   sesión conocida seguía viva; el arranque la corrige si resulta que no. */
.gate{position:fixed;inset:0;z-index:90;display:none;place-items:center;
  padding:24px;overflow:auto;background:var(--base)}
:root.locked .gate{display:grid}
:root.locked .topbar,
:root.locked .shell,
:root.locked .bar,
:root.locked .stage{display:none !important}

.gate-card{width:100%;max-width:420px;text-align:center}

.gate-mark{width:64px;height:64px;margin:0 auto 22px;border-radius:18px;
  display:grid;place-items:center;background:var(--emph);box-shadow:var(--aura)}
.gate-mark::before{content:"";width:42px;height:24px;background:var(--emph-on);
  -webkit-mask:url('../images/logo-mark.png') center/contain no-repeat;
          mask:url('../images/logo-mark.png') center/contain no-repeat}

.gate h1{font-family:var(--display);font-size:clamp(24px,5vw,30px);font-weight:700;
  color:var(--text);letter-spacing:-.02em;margin:0 0 8px}
.gate-sub{font-size:14px;line-height:1.6;color:var(--text-3);margin:0 0 30px}

.gate-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:46px;border-radius:99px;
  background:var(--emph);color:var(--emph-on);
  font-size:14px;font-weight:650;box-shadow:var(--aura-s);transition:.16s var(--ease)}
.gate-btn:hover{transform:translateY(-1px)}
.gate-btn .glogo{width:18px;height:18px;flex:none}

.gate-scope{font-size:11.5px;color:var(--text-3);margin:12px 0 0}

.gate-legal{font-size:11.5px;line-height:1.6;color:var(--text-3);
  margin:34px 0 0;padding-top:20px;border-top:1px solid var(--stroke)}
.gate-links{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:12px}
.gate-links a{font-size:11.5px;color:var(--text-3);text-decoration:underline;
  text-underline-offset:2px}
.gate-links a:hover{color:var(--text)}

/* Pie de la barra lateral: enlaces legales, visibles sin sesión */
.side-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--stroke)}
.side-foot p{margin:0 0 8px;font-size:10.5px;line-height:1.5;color:var(--text-3)}
.side-foot nav{display:flex;flex-wrap:wrap;gap:12px}
.side-foot a{font-size:11px;font-weight:550;color:var(--text-3);text-decoration:none}
.side-foot a:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}

/* Cápsula central: Inicio · Buscador · Biblioteca */
.tb-nav{
  justify-self:stretch;
  display:flex;align-items:center;gap:5px;
  height:42px;padding:3px 4px;border-radius:99px;
  background:var(--surface-2-t);
  border:1px solid var(--stroke);
  box-shadow:var(--elev-s);
  transition:border-color .2s, box-shadow .2s, background .3s;
}
.tb-nav:focus-within{
  border-color:var(--aura-ring);
  box-shadow:var(--aura-s);
}

.nav-i{
  display:flex;align-items:center;gap:6px;
  padding:0 14px;height:34px;border-radius:99px;
  font-size:13px;font-weight:600;color:var(--text-2);
  background:transparent;transition:.16s var(--ease);flex:none;
}
.nav-i svg{width:16px;height:16px;flex:none}
.nav-i:hover{color:var(--text);background:var(--hover)}
.nav-i.is-on{
  color:var(--emph-on);
  background:var(--emph);
  font-weight:700;
  box-shadow:var(--aura);
}

.top-search{
  display:flex;align-items:center;gap:8px;
  flex:1;min-width:0;height:34px;
  padding:0 12px;border-radius:99px;
  background:var(--hover);transition:.18s;
}
.top-search:hover{background:var(--hover-2)}
.top-search:focus-within{background:var(--hover-2)}
.search-ico{width:15px;height:15px;color:var(--text-3);flex:none}
.top-search input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:13px;font-weight:500;color:var(--text);
}
.top-search input::-webkit-search-cancel-button{display:none}
.top-search input::placeholder{color:var(--text-3);font-size:12.5px}
.search-clear{
  width:20px;height:20px;flex:none;border-radius:50%;
  display:none;place-items:center;padding:0;
  color:var(--text-2);background:var(--hover-2);transition:.15s;
}
.search-clear:hover{color:var(--text);background:var(--stroke-2)}
.search-clear svg{width:12px;height:12px}
.top-search.has-val .search-clear{display:grid}

/* Acciones a la derecha */
.tb-actions{justify-self:end;display:flex;align-items:center;gap:8px;min-width:0}

.theme-sw{width:36px;height:36px;flex:none;border-radius:50%;
  display:grid;place-items:center;color:var(--text-2);
  border:1px solid var(--stroke);background:var(--surface-2-t);transition:.16s}
.theme-sw:hover{color:var(--text);background:var(--hover-2);border-color:var(--stroke-2)}
.tsw-ico{width:17px;height:17px;display:grid;place-items:center}
.tsw-ico svg{width:17px;height:17px;grid-area:1/1}
.tsw-ico .i-moon{display:none}
:root[data-theme="dark"] .tsw-ico .i-sun{display:none}
:root[data-theme="dark"] .tsw-ico .i-moon{display:block}

.gbtn{display:flex;align-items:center;gap:8px;min-width:0;
  height:36px;padding:0 14px;border-radius:99px;
  background:var(--surface-2-t);border:1px solid var(--stroke);
  color:var(--text);font-size:12.5px;font-weight:600;transition:.16s}
.gbtn:hover{background:var(--hover-2);border-color:var(--stroke-2)}
.gbtn-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.glogo{width:16px;height:16px;flex:none}
.gbtn.on{background:var(--emph);color:var(--emph-on);border-color:transparent}
.gbtn.on .glogo{display:none}

/* ─── Menú de la cuenta ───
   El galón sólo aparece con sesión: sin ella el botón no abre nada, entra
   directo a Google, y un galón prometería un menú que no existe. */
.gchev{width:13px;height:13px;flex:none;display:none;opacity:.75;
  transition:transform .18s var(--ease)}
.gbtn.on .gchev{display:block}
.gbtn[aria-expanded="true"] .gchev{transform:rotate(180deg)}

.acct{position:relative;min-width:0;display:flex}

.acct-menu{
  position:absolute;right:0;top:calc(100% + 9px);z-index:50;
  min-width:236px;max-width:min(300px, calc(100vw - 24px));
  padding:7px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--stroke);
  box-shadow:var(--elev);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  animation:acct-in .17s var(--ease) both}
@keyframes acct-in{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}

.acct-id{display:flex;align-items:center;gap:10px;padding:9px 10px 11px;min-width:0}
.acct-av{width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--hover-2) center/cover no-repeat;border:1px solid var(--stroke);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--text-2)}
.acct-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.acct-txt strong{font-size:13px;font-weight:650;color:var(--text)}
.acct-txt span{font-size:11.5px;color:var(--text-3)}
/* El correo puede ser larguísimo: se recorta en vez de estirar el menú */
.acct-txt strong,.acct-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.acct-sep{height:1px;margin:3px 6px 4px;background:var(--stroke)}

.acct-i{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:var(--r-s);
  font-size:13px;font-weight:550;color:var(--text-2);
  text-align:left;transition:.14s var(--ease)}
.acct-i svg{width:16px;height:16px;flex:none;opacity:.8}
.acct-i:hover,.acct-i:focus-visible{background:var(--hover);color:var(--text)}
.gbtn .avatar{width:20px;height:20px;border-radius:50%;background-size:cover;background-position:center;flex:none;
  /* Aloja las iniciales mientras la foto carga, o si no hay foto */
  display:grid;place-items:center;font-size:8.5px;font-weight:700;line-height:1;
  background-color:color-mix(in oklab, var(--emph-on) 20%, transparent)}

/* ═══ Estructura: barra lateral + área principal ═══ */
.shell{
  position:relative;z-index:1;display:grid;
  grid-template-columns:var(--side) 1fr;
  /* dvh acompaña a las barras del navegador móvil cuando aparecen y desaparecen;
     el vh de arriba queda de reserva para donde dvh no exista. */
  height:calc(100vh - var(--topH) - var(--sa-t) - var(--barH) - var(--sa-b));
  height:calc(100dvh - var(--topH) - var(--sa-t) - var(--barH) - var(--sa-b));
  overflow:hidden;
}

.sidebar{
  width:var(--side);height:100%;border-right:1px solid var(--stroke);
  padding:20px 14px;display:flex;flex-direction:column;gap:22px;
  overflow-y:auto;overflow-x:hidden;
  background:var(--surface-2-t);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--track);border-radius:6px}

.side-sec{display:flex;flex-direction:column;gap:8px}
.side-h{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);padding:0 8px;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.side-list{display:flex;flex-direction:column;gap:2px}

/* ─── Navegación de la biblioteca en la barra lateral ─── */
.side-nav{display:flex;flex-direction:column;gap:2px}

.side-i{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;
  border-radius:var(--r-s);font-size:13.5px;font-weight:550;
  color:var(--text-2);text-align:left;transition:.15s var(--ease)}
.side-i svg{width:18px;height:18px;flex:none;opacity:.85}
.side-i span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La cuenta va en em para que no la lean como parte del nombre del destino */
.side-i em{font-style:normal;font-size:11px;font-weight:600;color:var(--text-3)}
.side-i:hover{background:var(--hover);color:var(--text)}
.side-i.is-on{background:var(--hover-2);color:var(--text)}
.side-i.is-on svg{opacity:1}

/* El + de crear lista: discreto hasta que se busca */
.side-add{width:22px;height:22px;flex:none;border-radius:6px;display:grid;place-items:center;
  color:var(--text-3);transition:.15s var(--ease)}
.side-add svg{width:14px;height:14px}
.side-add:hover{background:var(--hover-2);color:var(--text)}

.pl.is-on{background:var(--hover-2);color:var(--text)}
.side-empty{margin:2px 8px;font-size:11.5px;line-height:1.5;color:var(--text-3)}

/* ─── Diálogo propio ─── */
.ask{border:0;padding:0;background:none;max-width:min(400px, calc(100vw - 32px))}
.ask::backdrop{background:color-mix(in srgb, #000 55%, transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ask form{padding:22px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--stroke);box-shadow:var(--elev);
  display:flex;flex-direction:column;gap:12px}
.ask h3{margin:0;font-family:var(--display);font-size:17px;font-weight:700;color:var(--text)}
.ask p{margin:0;font-size:13px;line-height:1.55;color:var(--text-3)}
.ask p:empty,.ask input[hidden]{display:none}
.ask input{height:40px;padding:0 12px;border-radius:var(--r-s);
  background:var(--base);border:1px solid var(--stroke);color:var(--text);font-size:13.5px}
.ask input:focus-visible{outline:2px solid var(--emph-ink);outline-offset:1px}
/* iOS agranda la página al enfocar un campo con letra de menos de 16 px, y no
   la vuelve a achicar al salir. -webkit-touch-callout sólo existe en iOS: en
   los demás la barra conserva su letra. Va después de las reglas de arriba,
   que tienen la misma especificidad. */
@supports (-webkit-touch-callout:none){
  .top-search input,.ask input{font-size:16px}
}
.ask-row{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.ask-row button{height:36px;padding:0 16px;border-radius:99px;font-size:13px;font-weight:600;
  transition:.15s var(--ease)}
.ask-row .ghost{background:transparent;color:var(--text-2)}
.ask-row .ghost:hover{background:var(--hover);color:var(--text)}
.ask-row .primary{background:var(--emph);color:var(--emph-on)}
.ask-row .primary:hover{transform:translateY(-1px)}

/* ─── Agregar a una lista, desde la barra de reproducción ─── */
.addpl{position:relative;display:flex}
/* Fixed y colgando de <body>: dentro de .bar quedaba recortado, porque esa
   barra lleva overflow:hidden para su degradado de fondo. La posición la
   calcula el guion a partir del botón. */
.addpl-menu{position:fixed;z-index:95;
  min-width:210px;max-height:min(320px, 46vh);overflow:auto;
  padding:6px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--stroke);box-shadow:var(--elev);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  animation:acct-in .16s var(--ease) both}
.addpl-menu button{display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;border-radius:var(--r-s);
  font-size:12.5px;font-weight:550;color:var(--text-2);text-align:left;transition:.14s var(--ease)}
.addpl-menu button:hover,.addpl-menu button:focus-visible{background:var(--hover);color:var(--text)}
.addpl-menu button b{margin-left:auto;font-weight:600;font-size:11px;color:var(--text-3)}
.addpl-menu .sep{height:1px;margin:4px 6px;background:var(--stroke)}
.addpl-menu p{margin:6px 10px;font-size:11.5px;color:var(--text-3)}
/* Marcador de cuántos temas tiene la lista */
.pl b{font-weight:600;font-size:11px;color:var(--text-3);margin-left:auto;padding-left:8px}

/* Acciones de la cabecera de la vista (reproducir lista, borrarla…) */
.lib-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--pad-x, 0) 14px}
.lib-actions button{height:34px;padding:0 14px;border-radius:99px;font-size:12.5px;font-weight:600;
  background:var(--surface-2-t);border:1px solid var(--stroke);color:var(--text-2);transition:.15s var(--ease)}
.lib-actions button:hover{background:var(--hover-2);color:var(--text)}
.lib-actions button.primary{background:var(--emph);color:var(--emph-on);border-color:transparent}

.pl{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);
  font-size:13px;font-weight:500;color:var(--text-2);text-align:left;transition:.15s}
.pl:hover{background:var(--hover);color:var(--text)}
.pl i{width:24px;height:24px;flex:none;border-radius:6px;background-size:cover;background-position:center;
  border:1px solid var(--stroke)}

.upnext{display:flex}
.upnext-list{display:flex;flex-direction:column;gap:2px}
/* Se pintan hasta veinte; en la columna de escritorio caben tres antes de la
   letra. El cajón del teléfono los muestra todos. */
.upnext-list .un:nth-child(n+4){display:none}

/* Piezas del cajón del teléfono: en escritorio no se muestran */
.cajon-btn,.side-top,.cajon-velo,.bar .cola-btn{display:none}
.upnext-empty{display:block;padding:12px 10px;font-size:12px;color:var(--text-3);font-style:italic;
  background:var(--hover);border-radius:var(--r-s);border:1px dashed var(--stroke);text-align:center}
.un{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-s);
  text-align:left;transition:.15s;min-width:0}
.un:hover{background:var(--hover)}
.un i{width:30px;height:30px;flex:none;border-radius:6px;background-size:cover;background-position:center;
  border:1px solid var(--stroke)}
.un-m{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.un-m b{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.un-m span{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─── Letra en la barra lateral (vista normal) ───
   Toma el hueco que quedaba entre la cola y el pie: flex:1 con min-height:0,
   que es lo que deja a un hijo de columna flexible encogerse de verdad. */
/* Tres líneas como mínimo. Con 74 px la caja de letra se quedaba en 44 y,
   con el degradado de los bordes, la franja opaca medía 21 px: menos que una
   línea, así que todas se veían cortadas y parecían letras sueltas. Si la
   ventana es baja, la barra lateral se desplaza en vez de aplastar la letra. */
.side-lyr{flex:1 1 auto;min-height:124px}
.mini-lyr{position:relative;flex:1;min-height:0;overflow:hidden;padding:0 8px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 72%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 72%,transparent)}
.mini-lyr .lyr-inner{padding:0}
/* Misma mecánica que la pantalla completa, en tipografía de barra lateral.
   Sin desenfoque: a 35 px separa planos, a 12 px sólo emborrona. */
.mini-lyr .lyr-l{font-size:12.5px;font-weight:600;letter-spacing:-.005em;line-height:1.4;
  margin:0 0 8px;max-width:none;opacity:.34;filter:none;
  transform:none;text-shadow:none;transition:opacity .3s var(--ease)}
/* Las variantes repiten el descendiente a propósito: .lyr-l.on y .lyr-l.done
   pesan lo mismo que .mini-lyr .lyr-l y van después en la hoja, así que sin
   esto ganaban ellas y el panel heredaba el desenfoque y el brillo del grande. */
.mini-lyr .lyr-l.near{opacity:.58;filter:none}
.mini-lyr .lyr-l.done{opacity:.26;filter:none}
.mini-lyr .lyr-l.on{opacity:1;font-weight:700;filter:none;transform:none;text-shadow:none}
.mini-lyr .lyr-l:hover{opacity:.85}
.mini-none{margin:0;padding:10px 2px;font-size:11.5px;line-height:1.5;color:var(--text-3)}

.main-wrap{display:flex;flex-direction:column;height:100%;min-width:0;overflow:hidden}

.content{flex:1;overflow-y:auto;scroll-behavior:smooth;padding:30px 34px 40px}
.content::-webkit-scrollbar,.lyrics::-webkit-scrollbar{width:8px}
.content::-webkit-scrollbar-thumb,.lyrics::-webkit-scrollbar-thumb{background:var(--track);border-radius:8px}

.view{display:none;padding-bottom:28px}
.view.is-on{display:block;animation:fade .3s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.sec-t{font-family:var(--display);font-size:26px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.02em}
.sec-t--pad{padding:4px 0 16px}

/* Superficie de cristal reutilizable */
.glass{
  background:var(--surface-t);
  border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);
  backdrop-filter:blur(var(--blur)) saturate(1.4);
}

/* ─── Hero ─── */
.hero{
  border-radius:var(--r-l);padding:34px 38px;display:grid;
  grid-template-columns:1fr 220px;gap:32px;align-items:center;margin-bottom:34px;
  box-shadow:var(--elev-s);transition:background 1s ease, border-color 1s ease;
}
.eyebrow{display:inline-block;padding:5px 12px;border-radius:99px;
  background:color-mix(in oklab,var(--ink) 16%, transparent);
  color:var(--emph-ink);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid color-mix(in oklab,var(--ink) 32%, transparent)}
/* Titular a dos tonos: el énfasis ya no es un color distinto sino la tinta
   plena con su aura, y el resto del titular baja un escalón. */
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,42px);
  line-height:1.15;margin:14px 0 10px;letter-spacing:-.03em;color:var(--text-2)}
.hero h1 em{font-style:normal;color:var(--emph-ink);text-shadow:var(--aura-t)}
.hero p{margin:0;max-width:48ch;font-size:14px;line-height:1.6;color:var(--text-2)}
.hero-cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn-p{padding:11px 22px;border-radius:99px;
  background:var(--emph);color:var(--emph-on);
  font-size:13px;font-weight:700;box-shadow:var(--aura);transition:.16s var(--ease)}
.btn-p:hover{transform:translateY(-1px)}
.btn-g{padding:11px 22px;border-radius:99px;background:var(--hover);
  border:1px solid var(--stroke-2);font-size:13px;font-weight:600;color:var(--text);transition:.16s var(--ease)}
.btn-g:hover{background:var(--hover-2);transform:translateY(-1px)}
/* Donaciones. El logo de PayPal va sobre blanco, como pide la marca, en los dos
   temas; el botón, en el amarillo de sus botones de pago. */
.pp-chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:99px;
  background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 2px rgba(0,0,0,.16)}
.pp-chip img{display:block;height:20px;width:auto}
.btn-pp{display:inline-flex;align-items:center;padding:11px 22px;border-radius:99px;
  background:#FFD140;color:#001C64;font-size:13px;font-weight:700;text-decoration:none;
  transition:.16s var(--ease)}
.btn-pp:hover{filter:brightness(.95);transform:translateY(-1px)}
.hero-art{aspect-ratio:1;border-radius:var(--r-m);box-shadow:var(--elev);overflow:hidden;border:1px solid var(--stroke)}
.hero-art img{width:100%;height:100%;object-fit:cover;display:block}

/* ─── Carriles ─── */
.rails{display:flex;flex-direction:column;gap:34px}
.rail-h{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 2px 14px}
.rail-h h3{font-family:var(--display);font-weight:700;font-size:20px;color:var(--text);margin:0;letter-spacing:-.01em}
.rail-h p{margin:3px 0 0;font-size:12.5px;color:var(--text-3)}
.rail-why{font-size:11px;font-weight:600;color:var(--text-3);background:var(--hover);
  border:1px solid var(--stroke);padding:4px 10px;border-radius:99px;white-space:nowrap}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:176px;gap:14px;
  overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--track);border-radius:6px}

/* ─── Tarjeta ─── */
.card{scroll-snap-align:start;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:9px;
  padding:11px;border-radius:var(--r-m);transition:.2s var(--ease);position:relative;color:inherit;
  background:var(--surface-t);border:1px solid var(--stroke)}
.card:hover{background:var(--surface);border-color:var(--stroke-2);transform:translateY(-3px);box-shadow:var(--elev-s)}
.card.is-cur{background:var(--surface);
  border-color:var(--aura-ring);
  box-shadow:var(--aura-s)}
.card-art{position:relative;aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;
  box-shadow:var(--elev-s);background:var(--surface-2)}
.card-art img{width:100%;height:100%;object-fit:cover;display:block}
.card-play{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--emph);color:var(--emph-on);
  /* Sobre una carátula clara el aura sola no despega: va también sombra dura */
  box-shadow:var(--aura-s), 0 6px 16px -4px rgba(0,0,0,.45);opacity:0;transform:translateY(6px) scale(.9);transition:.2s var(--ease);z-index:2}
.card:hover .card-play,.card.is-cur .card-play{opacity:1;transform:none}
.card-play svg{width:17px;height:17px;margin-left:2px}

/* iOS reproduce sin Web Audio para no cortarse en segundo plano, así que no hay
   analizador que alimente las barras: mejor no dejar el lienzo vacío a la vista. */
body.no-viz .viz{display:none}

.badge-flac{display:inline-block;padding:2px 7px;border-radius:4px;
  background:color-mix(in oklab,var(--ink) 15%, transparent);
  color:var(--emph-ink);font-size:9.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;border:1px solid color-mix(in oklab,var(--ink) 30%, transparent);margin-top:2px}
.card-t{font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-a{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-hi{font-size:11px;line-height:1.45;color:var(--text-2);background:var(--hover);
  border-left:2px solid var(--aura-ring);padding:6px 8px;border-radius:0 8px 8px 0;margin-top:2px}
.card-hi em{font-style:normal;font-weight:700;color:var(--emph-ink);
  background:color-mix(in oklab,var(--ink) 16%, transparent);border-radius:3px;padding:0 2px}

.eq{position:absolute;left:8px;bottom:8px;display:flex;gap:2px;align-items:flex-end;height:14px;
  padding:3px 5px;border-radius:5px;background:color-mix(in srgb,var(--base) 80%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.eq i{width:2.5px;background:var(--emph-ink);border-radius:2px;animation:eqa .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.18s}.eq i:nth-child(3){animation-delay:.36s}
@keyframes eqa{0%,100%{height:3px}50%{height:11px}}

/* ─── Buscar ─── */
.search-head{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;
  padding:22px 24px;border-radius:var(--r-l)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 15px;border-radius:99px;background:var(--hover);
  border:1px solid var(--stroke);font-size:12px;font-weight:600;color:var(--text-2);transition:.16s}
.chip:hover{background:var(--emph);color:var(--emph-on);border-color:transparent}
.search-meta{font-size:13px;color:var(--text-2);padding:0 2px 14px}
.search-meta b{color:var(--emph-ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.empty{padding:52px 20px;text-align:center;color:var(--text-3);font-size:14px}

/* ─── Subida ─── */
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:30px 24px;margin:0 0 16px;border-radius:var(--r-l);
  border:1.5px dashed color-mix(in oklab,var(--ink) 40%, transparent);
  background:var(--surface-t);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  text-align:center;transition:.2s var(--ease)}
.drop.over{border-color:var(--aura-ring);background:var(--surface);transform:scale(1.004)}
.drop.busy{opacity:.7;pointer-events:none}
.drop-ico{width:32px;height:32px;color:var(--emph-ink);margin-bottom:3px}
.drop strong{font-size:14.5px;font-weight:600;color:var(--text)}
.drop-sub{font-size:12.5px;color:var(--text-2)}
.drop-note{font-size:11px;color:var(--text-3);margin-top:4px}
.link{font-size:inherit;font-weight:600;color:var(--emph-ink);
  text-decoration:underline;text-underline-offset:2px}

.uploads{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.up{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  padding:10px 14px;border-radius:var(--r-s);background:var(--surface-t);border:1px solid var(--stroke);font-size:12.5px}
.up-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--text)}
.up-s{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.up-bar{grid-column:1/-1;height:3px;border-radius:99px;background:var(--track);overflow:hidden}
.up-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--emph);transition:width .18s}

/* ─── Biblioteca ─── */
.lib-tabs{display:flex;gap:8px;padding:0 0 16px}
.lib-tabs button{padding:8px 18px;border-radius:99px;font-size:13px;font-weight:600;
  background:var(--hover);border:1px solid var(--stroke);color:var(--text-2);transition:.16s}
.lib-tabs button:hover{color:var(--text);border-color:var(--stroke-2)}
.lib-tabs button.is-on{background:var(--emph);color:var(--emph-on);border-color:transparent;
  font-weight:700;box-shadow:var(--aura-s)}

.rows{display:flex;flex-direction:column;gap:2px}
.row{display:grid;grid-template-columns:26px 44px 1fr auto auto auto;align-items:center;gap:14px;
  padding:8px 12px;border-radius:var(--r-s);text-align:left;cursor:pointer;transition:.15s;color:inherit;border:1px solid transparent}
.row:hover{background:var(--hover);border-color:var(--stroke)}
.row.is-cur{background:color-mix(in oklab,var(--ink) 13%, transparent);
  border-color:color-mix(in oklab,var(--ink) 28%, transparent)}
.row-n{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;text-align:center}
.row-art{width:44px;height:44px;border-radius:8px;overflow:hidden;box-shadow:var(--elev-s);border:1px solid var(--stroke)}
.row-art img{width:100%;height:100%;object-fit:cover;display:block}
.row-m strong{display:block;font-size:13.5px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.row-m span{font-size:12px;color:var(--text-3)}
.row-d{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}

/* ─── Agregar a la cola, desde cualquier tarjeta o fila ───
   Discreto hasta que el puntero pasa por encima; donde no hay puntero
   (táctil) se queda visible, o no habría forma de llegar a él. */
.btn-cola{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--text-2);background:var(--surface-t);border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:.16s var(--ease)}
.btn-cola svg{width:15px;height:15px}
.btn-cola:hover{background:var(--emph);color:var(--emph-on);border-color:transparent}
.card .btn-cola{position:absolute;right:8px;top:8px;z-index:3;transform:translateY(-5px) scale(.9)}
.card:hover .btn-cola,.card .btn-cola:focus-visible{opacity:1;transform:none}
.row .btn-cola{width:28px;height:28px}
.row:hover .btn-cola,.row .btn-cola:focus-visible{opacity:1}
@media (hover:none){
  .card .btn-cola,.row .btn-cola{opacity:1;transform:none}
}

.badge{font-size:10px;font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:5px;
  background:var(--hover-2);color:var(--text-2);border:1px solid var(--stroke);white-space:nowrap}
.badge.ghost{background:transparent;color:var(--text-3)}

/* ═══════════════════════════════════════════════════════════
   BARRA DE REPRODUCCIÓN
   Un solo color de fondo; el color de la carátula entra sólo
   como un degradado corto en el arranque de la barra.
   ═══════════════════════════════════════════════════════════ */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--barH) + var(--sa-b));
  padding:0 calc(26px + var(--sa-r)) var(--sa-b) calc(26px + var(--sa-l));overflow:hidden;
  border-top:1px solid var(--stroke);
  display:grid;grid-template-columns:minmax(220px,330px) 1fr minmax(230px,auto);
  align-items:center;gap:26px;
  background:var(--surface-t);
  -webkit-backdrop-filter:blur(calc(var(--blur) * 1.6)) saturate(1.6);
  backdrop-filter:blur(calc(var(--blur) * 1.6)) saturate(1.6);
}
.bar::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:clamp(240px,38%,620px);pointer-events:none;z-index:0;
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--now-tint,transparent) 36%, transparent) 0%,
    color-mix(in oklab, var(--now-tint,transparent) 14%, transparent) 42%,
    transparent 100%);
  opacity:0;transition:opacity .8s ease, background 1s ease;
}
.bar.tinted::before{opacity:1}
.bar > *{position:relative;z-index:1}

.bar-now{display:flex;align-items:center;gap:13px;min-width:0}
.bar-art{width:52px;height:52px;flex:none;border-radius:var(--r-s);overflow:hidden;
  background:var(--surface-2);box-shadow:var(--elev-s);
  border:1px solid var(--stroke);transition:transform .22s var(--ease);cursor:pointer}
.bar-art img{width:100%;height:100%;object-fit:cover;display:block}
.bar-art:hover{transform:scale(1.06)}
.bar-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.bar-meta strong{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-meta span{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ico{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--text-2);transition:.16s}
.ico svg{width:19px;height:19px}
.ico:hover{background:var(--hover-2);color:var(--text)}
.ico[aria-pressed="true"]{color:var(--emph-ink);
  background:color-mix(in oklab,var(--ink) 16%, transparent)}
.fav[aria-pressed="true"] svg path{fill:#f43f5e;stroke:#f43f5e}
.fav[aria-pressed="true"]{color:#f43f5e;background:color-mix(in srgb,#f43f5e 16%, transparent)}

.seek{display:flex;align-items:center;gap:12px;min-width:0}
.t{font-size:11.5px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums;width:34px;flex:none}
.t:last-child{text-align:right}
.line{position:relative;flex:1;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.line::before{content:'';position:absolute;left:0;right:0;height:4px;border-radius:99px;background:var(--track)}
.line-fill{position:absolute;left:0;height:4px;width:0;border-radius:99px;
  background:var(--emph-ink);box-shadow:0 0 12px var(--aura-ring)}
.line-knob{position:absolute;left:0;width:12px;height:12px;border-radius:50%;background:var(--emph-ink);
  transform:translateX(-50%);box-shadow:var(--aura-s);opacity:0;transition:opacity .15s}
.line:hover .line-knob,.line:focus-visible .line-knob,.line.drag .line-knob{opacity:1}
.line:focus-visible{outline-offset:4px;border-radius:99px}

.bar-end{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.transport{display:flex;align-items:center;gap:4px}
.play{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--emph);color:var(--emph-on);box-shadow:var(--aura);transition:.16s var(--ease)}
.play:hover{transform:scale(1.06)}
.play svg{width:20px;height:20px;grid-area:1/1}
.play .i-pause{display:none}
body.is-playing .play .i-play{display:none}
body.is-playing .play .i-pause{display:block}
.bar-div{width:1px;height:24px;background:var(--stroke-2);flex:none;margin:0 4px}

.vol{display:flex;align-items:center;gap:6px}
#vol{-webkit-appearance:none;appearance:none;width:76px;height:4px;border-radius:99px;background:var(--track);outline:none}
#vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--emph-ink);cursor:pointer;box-shadow:var(--aura-s)}
#vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--emph-ink);cursor:pointer}
.muted #vwaves{opacity:.25}

/* ═══════════════════════════════════════════════════════════
   VISTA GRANDE (letra) — fondo del color base + blur leve
   ═══════════════════════════════════════════════════════════ */
.stage{
  position:fixed;inset:0;z-index:60;overflow:hidden;
  background:var(--base);
}
.stage[hidden]{display:none !important;pointer-events:none !important}
.stage:not([hidden]){animation:stage-in .46s var(--ease) both}
.stage.is-closing{animation:stage-out .3s cubic-bezier(.4,.02,.72,.2) both}

@keyframes stage-in{
  from{opacity:0;transform:translateY(30px) scale(.965);border-radius:26px}
  to{opacity:1;transform:none;border-radius:0}
}
@keyframes stage-out{
  from{opacity:1;transform:none;border-radius:0}
  to{opacity:0;transform:translateY(26px) scale(.97);border-radius:26px}
}

/* Lavado de color de la carátula, muy contenido */
.stage-bg{position:absolute;inset:-25%;z-index:0;opacity:.55;
  filter:blur(80px) saturate(150%);transition:background 1.1s ease}
/* El blur leve que lleva toda la página, acá sobre el lavado */
.stage-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:color-mix(in srgb, var(--base) 55%, transparent);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}

.stage-close{position:absolute;top:calc(22px + var(--sa-t));right:calc(22px + var(--sa-r));
  z-index:5;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-t);color:var(--text);
  border:1px solid var(--stroke);transition:.2s var(--ease);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.stage-close:hover{background:var(--hover-2);transform:scale(1.08)}
.stage-close svg{width:18px;height:18px}

.stage-grid{position:relative;z-index:2;height:100%;display:grid;
  grid-template-columns:minmax(280px,380px) 1fr;gap:60px;
  padding:calc(64px + var(--sa-t)) calc(70px + var(--sa-r)) calc(64px + var(--sa-b)) calc(80px + var(--sa-l));
  align-items:center;max-width:1500px;margin:0 auto}

/* Entrada escalonada del contenido */
.stage:not(.is-closing) .stage-left{animation:rise .55s var(--ease) .06s both}
.stage:not(.is-closing) .stage-right{animation:rise .55s var(--ease) .14s both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.stage-left{display:flex;flex-direction:column;min-width:0}
.stage-art{aspect-ratio:1;border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 34px 80px -24px color-mix(in oklab,var(--now-tint,#000) 70%, transparent),
             0 20px 50px -20px rgba(0,0,0,.5);
  border:1px solid var(--stroke);transition:box-shadow 1s ease}
.stage-art img{width:100%;height:100%;object-fit:cover;display:block}
.stage-left h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.2vw,31px);
  margin:24px 0 4px;letter-spacing:-.03em;line-height:1.15;color:var(--text)}
.stage-left p{margin:0;font-size:15px;color:var(--text-2)}
.stage-badges{display:flex;gap:7px;margin-top:16px;flex-wrap:wrap}
.viz{width:100%;height:56px;margin-top:22px;opacity:.9}

.stage-right{height:100%;display:flex;flex-direction:column;min-height:0}
.lyr-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 0 18px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-3)}
.lyr-off{display:flex;align-items:center;gap:5px;text-transform:none;letter-spacing:0}
.lyr-off button{padding:4px 9px;border-radius:7px;background:var(--hover);
  border:1px solid var(--stroke);font-size:10.5px;font-weight:600;color:var(--text-2);transition:.15s}
.lyr-off button:hover{color:var(--text);background:var(--hover-2)}
.lyr-off b{font-size:10.5px;color:var(--emph-ink);min-width:52px;
  text-align:center;font-variant-numeric:tabular-nums}

/* ─── Letra estilo Apple Music ───
   Tipografía grande y pesada, líneas lejanas desenfocadas y apagadas,
   la línea en curso a plena tinta con barrido palabra por palabra. */
.lyrics{flex:1;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 80%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 80%,transparent)}
.lyr-inner{will-change:transform;padding:38vh 0}

.lyr-l{
  font-size:clamp(23px,2.35vw,35px);
  font-weight:700;letter-spacing:-.024em;line-height:1.26;
  margin:0 0 clamp(16px,1.9vh,28px);
  max-width:20ch;
  color:var(--lyr-off);
  opacity:.38;filter:blur(1.4px);
  transform-origin:left center;
  transition:opacity .45s var(--ease), filter .45s var(--ease),
             transform .45s var(--ease), text-shadow .45s ease;
  cursor:pointer;
}
.lyr-l:hover{opacity:.75;filter:none}
.lyr-l.near{opacity:.6;filter:blur(.5px)}
.lyr-l.done{opacity:.28;filter:blur(.9px)}
.lyr-l.on{
  opacity:1;filter:none;transform:scale(1.025);
  text-shadow:var(--aura-t);
}
/* Barrido: lo cantado a tinta plena, lo que falta apagado */
.lyr-l .w{
  background-image:linear-gradient(90deg,var(--lyr-on) 50%,var(--lyr-off) 50%);
  background-size:200% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lyr-l.on .w{transition:background-position .1s linear}
.lyr-none{font-size:16px;color:var(--text-3);padding-top:38vh;line-height:1.6}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(var(--barH) + var(--sa-b) + 18px);transform:translateX(-50%);
  z-index:80;padding:11px 22px;border-radius:99px;background:var(--emph);color:var(--emph-on);
  font-size:13px;font-weight:600;box-shadow:var(--aura);animation:tin .24s var(--ease) both}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ─── Descargas y sin conexión ─── */
:root{
  /* Círculo con una flecha hacia abajo: «está en este dispositivo» */
  --ico-dl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v6.17l2.3-2.3 1.4 1.42L12 17l-4.7-4.71 1.4-1.42 2.3 2.3z'/%3E%3C/svg%3E");
}
.sin-red{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:99px;
  flex:none;font-size:11.5px;font-weight:650;color:var(--text);
  background:color-mix(in oklab,#f59e0b 22%, var(--surface-2-t));
  border:1px solid color-mix(in oklab,#f59e0b 45%, transparent)}
.sin-red svg{width:14px;height:14px;flex:none}

/* Sin conexión, lo que no está descargado no puede sonar: se ve apagado */
.sin-conexion .card:not(.en-dispositivo),
.sin-conexion .row:not(.en-dispositivo){opacity:.4}

/* La marca de «en este dispositivo» */
.card.en-dispositivo .card-art::after{content:"";position:absolute;left:8px;top:8px;z-index:2;
  width:20px;height:20px;background:var(--emph);filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
  -webkit-mask:var(--ico-dl) center/contain no-repeat;mask:var(--ico-dl) center/contain no-repeat}
.row.en-dispositivo .row-m strong::after{content:"";display:inline-block;width:12px;height:12px;
  margin-left:7px;vertical-align:-1px;background:var(--emph-ink);
  -webkit-mask:var(--ico-dl) center/contain no-repeat;mask:var(--ico-dl) center/contain no-repeat}

/* Resumen de arriba de «Descargas» */
.dl-estado{margin:0 0 14px;padding:12px 14px;border-radius:var(--r-m);
  display:flex;flex-direction:column;gap:4px;
  background:var(--surface-t);border:1px solid var(--stroke)}
.dl-estado p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.dl-estado strong{color:var(--text);font-weight:650}

/* ═══ Responsive ═══ */
@media (max-width:1180px){
  .tb-nav{max-width:520px}
  .gbtn-t{max-width:96px}
}
@media (max-width:980px){
  .brand-txt{display:none}
  .gbtn-t{display:none}
  .gbtn{padding:0 10px}
}
@media (max-width:860px){
  :root{--side:0px;--barH:132px;--topH:58px}
  /* z-index:auto y no 1: con 1 el shell abre un contexto de apilamiento y el
     cajón, que vive dentro, quedaba atrapado en ese nivel —por debajo de la
     barra superior (30) y de su propio velo (50)—. Sin él, el cajón compite
     en el contexto raíz. El shell sigue pintándose sobre .mesh, que va antes
     en el documento con z-index 0. */
  .shell{grid-template-columns:1fr;z-index:auto}

  /* La barra lateral se vuelve un cajón que entra desde la izquierda. Queda
     por encima del contenido y termina donde empieza la barra de
     reproducción, que sigue a mano para manejar lo que suena.
     Cerrado queda fuera del orden de tabulación y del árbol de accesibilidad
     por `inert`, que pone el guion —ver abrirCajon()—. Sin sombra mientras
     está fuera: a -102 % el cajón queda a 6 px del borde y la sombra, más
     ancha, asomaba. */
  .sidebar{position:fixed;z-index:55;left:0;top:0;
    bottom:calc(var(--barH) + var(--sa-b));height:auto;width:min(84vw, 320px);
    padding:calc(12px + var(--sa-t)) 14px 18px calc(14px + var(--sa-l));
    background:var(--surface);border-right:1px solid var(--stroke);box-shadow:none;
    transform:translateX(-102%);transition:transform .28s var(--ease), box-shadow .28s}
  .sidebar.is-open{transform:none;box-shadow:var(--elev)}

  .cajon-velo{display:block;position:fixed;z-index:50;left:0;right:0;top:0;
    bottom:calc(var(--barH) + var(--sa-b));
    background:color-mix(in srgb, #000 48%, transparent);
    opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
  .cajon-velo.is-open{opacity:1;pointer-events:auto}

  /* Arriba a la izquierda, donde estaba la marca */
  .topbar .tb-brand{display:none}
  .cajon-btn{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;
    color:var(--text);background:var(--surface-2-t);border:1px solid var(--stroke);transition:.16s}
  .cajon-btn:hover{background:var(--hover-2)}
  .cajon-btn svg{width:19px;height:19px}

  /* Cabecera del cajón; la marca recupera el texto que el ancho le quitaba */
  .side-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 -4px -6px}
  .side-top .brand-txt{display:flex}
  .side-top .side-add{width:34px;height:34px}
  .side-top .side-add svg{width:16px;height:16px}

  /* En el teléfono la letra tiene la pantalla completa; y la cola, entera */
  .sidebar .side-lyr{display:none}
  .upnext-list .un:nth-child(n+4){display:flex}

  /* Cola a la izquierda y pantalla completa a la derecha: el transporte queda
     centrado entre las dos */
  .bar .cola-btn{display:grid}
  .topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;
    padding:var(--sa-t) calc(12px + var(--sa-r)) 0 calc(12px + var(--sa-l))}
  .tb-nav{height:38px}
  .nav-i span{display:none}
  .nav-i{padding:0 10px}
  .content{padding:18px calc(18px + var(--sa-r)) 32px calc(18px + var(--sa-l))}
  .hero{grid-template-columns:1fr;padding:24px}
  .hero-art{display:none}
  .bar{grid-template-columns:1fr;grid-template-areas:'now' 'seek' 'end';gap:6px;align-content:center;
    padding:10px calc(16px + var(--sa-r)) calc(10px + var(--sa-b)) calc(16px + var(--sa-l))}
  .bar-now{grid-area:now}.seek{grid-area:seek}.bar-end{grid-area:end;justify-content:center}
  .bar-div,.vol{display:none}
  .stage-grid{grid-template-columns:1fr;gap:24px;align-content:center;
    padding:calc(56px + var(--sa-t)) calc(24px + var(--sa-r)) calc(24px + var(--sa-b)) calc(24px + var(--sa-l))}
  .stage-left{flex-direction:row;align-items:center;gap:18px}
  .stage-art{width:104px;flex:none}
  .stage-left h2{font-size:21px;margin:0 0 2px}
  .stage-badges,.viz{display:none}
  .lyr-l{font-size:22px;max-width:none}
  .lyr-inner{padding:26vh 0}
  /* La fila ganó el botón de encolar y en 375 px ya no cabía todo: se va la
     etiqueta de calidad, que es lo que menos se mira en un teléfono, y el
     título recupera el ancho. */
  .row{grid-template-columns:22px 40px 1fr auto auto;gap:10px;padding:8px 8px}
  .row .badge{display:none}
  /* En el teléfono el aviso va sólo con el ícono: el buscador ya anda justo */
  .sin-red{padding:0 8px}
  .sin-red span{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}