/* ═══════════════════════════════════════════════════════════
   Prueba de rediseño: la referencia de Dribbble del 2026-10-05.

   Un panel redondeado sobre una barra lateral más oscura y de sólo texto;
   arriba el buscador subrayado y la cuenta con su nombre; el destacado
   verde con la estrella; tarjetas con el título encima de la carátula;
   lo escuchado en filas; «A continuación» de alto completo, que flota y
   no corre la página; la barra de lo que suena con el avance como una
   raya en su borde; y la vista grande sobre la carátula desenfocada.

   En el teléfono, lo mismo adaptado: la barra de lo que suena acoplada
   sobre las pestañas, la cola y los menús como hojas que suben desde
   abajo, y la vista grande que sube a pantalla entera.

   Va después de design.css; quitarlo (y su <link>) deja la interfaz como
   estaba. El oscuro es el de la referencia y el claro, su espejo, con
   los mismos tokens.

   Orden: 1 tokens · 2 componentes (todas las pantallas) · 3 escritorio
   · 4 teléfono · 5 movimiento.
   ═══════════════════════════════════════════════════════════ */

/* La barra de controles de la vista grande sólo existe en escritorio */
.stage-barra{display:none}

/* ═══════════════════════════════════════════════════════════
   1 · TOKENS
   ═══════════════════════════════════════════════════════════ */
:root{
  --sans:'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --base:#e7e7e5;--base-2:#dedbd4;--card:#f8f8f7;--ink:#161616;
  --rd-calido:rgba(214,192,160,.32);
  --rd-nav:rgba(0,0,0,.62);
  --rd-fila-on:rgba(0,0,0,.075);
  --rd-barra:#eef0ef;
  --rd-pista:rgba(0,0,0,.14);
  --rd-progreso:#1eb0fc;
  --rd-heroe:#415f3e;--rd-heroe-2:#4a6a43;
  --rd-estrella:#e08683;
  --rd-btn:rgba(var(--glass),.08);--rd-btn-2:rgba(var(--glass),.14);
  --rd-elevado:#ffffff;--rd-sombra:0 24px 60px -18px rgba(0,0,0,.28);
  /* En la referencia casi todo el texto es blanco: lo secundario se aparta
     por tamaño y peso más que por color */
  --text-2:color-mix(in oklab, var(--ink) 80%, var(--card));
  --text-3:color-mix(in oklab, var(--ink) 66%, var(--card));
  /* El fondo del panel, con el resplandor cálido de dos esquinas. Va fijo a
     la ventana: así la columna de la cola, que flota encima, lleva el mismo
     fondo sin costura. */
  --rd-lienzo:radial-gradient(70% 55% at 100% 0%, var(--rd-calido), transparent 72%) fixed,
    radial-gradient(55% 60% at 12% 100%, var(--rd-calido), transparent 70%) fixed, var(--card);
  /* Las curvas: una salida rápida y suave para casi todo, y un resorte corto
     —apenas pasa de largo— para lo que aparece, se aprieta o se desliza */
  --rd-sale:cubic-bezier(.22,1,.36,1);
  --rd-resorte:linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%,
    .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);

  /* La vista grande: el velo sobre la carátula desenfocada, el vidrio de la
     cola en escritorio y la hoja de la cola en el teléfono */
  --sv-velo:rgba(247,247,245,.62);--sv-velo-2:rgba(247,247,245,.88);
  --sv-cristal:rgba(250,250,248,.42);--sv-hoja:#f3f3f1;
}
:root[data-theme="dark"]{
  --base:#111111;--base-2:#1f1e19;--card:#1f1f1f;--ink:#ffffff;
  --rd-calido:rgba(62,50,40,.7);
  --rd-nav:rgba(255,255,255,.8);
  --rd-fila-on:#4e4e4e;
  --rd-barra:#222a29;
  --rd-pista:#4c4c4e;
  --rd-elevado:#2a2a2a;--rd-sombra:0 24px 60px -16px rgba(0,0,0,.7);
  --sv-velo:rgba(8,8,8,.46);--sv-velo-2:rgba(6,6,6,.82);
  --sv-cristal:rgba(10,10,10,.3);--sv-hoja:#141414;
}

/* ═══════════════════════════════════════════════════════════
   2 · COMPONENTES — iguales en escritorio y en el teléfono;
   cada pantalla ajusta después sus medidas
   ═══════════════════════════════════════════════════════════ */
body{letter-spacing:0}
.main-wrap{background:var(--rd-lienzo)}

/* ─── El buscador, subrayado ─── */
.top-search{justify-self:stretch;width:100%;height:42px;padding:0 2px;gap:12px;border:0;border-radius:0;
  border-bottom:1px solid rgba(var(--glass),.3);background:none}
.top-search:hover{background:none;border-bottom-color:rgba(var(--glass),.5)}
.top-search:focus-within,.top-search.has-val{background:none;box-shadow:none;border-bottom-color:var(--text)}
.search-ico{width:18px;height:18px;color:var(--text)}
.top-search input,.top-search input::placeholder{font-size:14px}
.top-search input::placeholder{color:var(--text-2)}
.theme-sw{width:38px;height:38px;background:none;color:var(--text-2)}
.theme-sw:hover{background:rgba(var(--glass),.06);color:var(--text)}

/* ─── Títulos y textos de cada página ─── */
.sec-t{font-size:30px;font-weight:700;letter-spacing:-.02em}
.search-head{gap:10px;margin:0 0 28px}
.search-lead{font-size:14px;color:var(--text-2)}
.search-meta{padding:0 2px 20px;font-size:13px;color:var(--text-2)}
.search-meta b{color:var(--text)}
.empty,.profile-note{color:var(--text-2)}
.sec-h,.rail-h{margin:0 0 16px;align-items:center}
.sec-h h3,.rail-h h3,.profile-section h3,.search-songs-title{font-size:19px;font-weight:700;letter-spacing:-.01em}
.see-all,.rail-why{padding:4px 0;background:none;font-size:13px;font-weight:500;color:var(--text-2)}
.see-all:hover{background:none;color:var(--text)}
.home-sec{margin:0 0 40px}
.rails{gap:40px;margin-bottom:40px}

/* ─── El inicio en el orden de la referencia: título, destacado, tarjetas y
   filas. Los artistas, la donación y el pie quedan al final. ─── */
.view[data-view="inicio"].is-on{display:flex;flex-direction:column}
.home-heading{display:none}
.home-title{order:0;margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--text)}
.view[data-view="inicio"] .feature{order:1}
#rails{order:2}
#sec-recientes{order:3}
#sec-artistas{order:4}
/* Lo que llega al bajar va después de tus artistas (ver vista-inicio.js) */
#rails-mas{order:5}
.inicio-mas{order:6}
.home-foot{order:8}

/* ─── El destacado: verde, con la estrella y la foto saliendo por arriba ───
   Todo se mide con su alto (--h), y cada pantalla pone el suyo. El margen de
   arriba deja lugar a lo que sobresale, o el borde del contenido lo recortaría. */
.feature{--h:clamp(196px, 15vw, 236px);
  position:relative;display:flex;align-items:center;height:var(--h);min-height:0;
  margin:calc(var(--h) * .12) 0 44px;overflow:visible;border-radius:16px;box-shadow:none;color:#fff;
  background:linear-gradient(100deg, var(--rd-heroe), var(--rd-heroe-2))}
.feature-in{position:relative;z-index:2;max-width:58%;padding:0 40px;gap:6px}
.feature-kicker{font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;opacity:1;color:#fff}
.feature-title{font-size:clamp(26px, 2.3vw, 34px);font-weight:700;letter-spacing:-.015em;line-height:1.15;text-transform:none}
.feature-sub,.feature-ver,.feature-stats{display:none}
.feature-foot{margin-top:22px}
.feature-play{height:42px;padding:0 24px 0 18px;gap:10px;border-radius:99px;background:#fff;color:#141414;
  font-size:14px;font-weight:600}
.feature-play svg{width:15px;height:15px}
.feature::after{content:'';position:absolute;z-index:0;pointer-events:none;
  width:calc(var(--h) * 1.1);aspect-ratio:1;top:calc(var(--h) * -.104);right:calc(var(--h) * .211);
  background:var(--rd-estrella);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0L59.8 13.3L75 6.7L76.9 23.1L93.3 25L86.7 40.2L100 50L86.7 59.8L93.3 75L76.9 76.9L75 93.3L59.8 86.7L50 100L40.2 86.7L25 93.3L23.1 76.9L6.7 75L13.3 59.8L0 50L13.3 40.2L6.7 25L23.1 23.1L25 6.7L40.2 13.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0L59.8 13.3L75 6.7L76.9 23.1L93.3 25L86.7 40.2L100 50L86.7 59.8L93.3 75L76.9 76.9L75 93.3L59.8 86.7L50 100L40.2 86.7L25 93.3L23.1 76.9L6.7 75L13.3 59.8L0 50L13.3 40.2L6.7 25L23.1 23.1L25 6.7L40.2 13.3Z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Los auriculares y el casete, con fondo transparente: apoyados en el borde
   de abajo y saliendo por arriba, delante de la estrella. La estrella va
   centrada detrás del dibujo: su centro es el del contenido de la imagen
   (49 % del ancho, 50 % del alto), que cae en (derecha − 0,76 alto, 0,45 alto),
   y mide lo más que entra sin pasar del borde de abajo. */
.feature-art{position:absolute;z-index:1;top:auto;left:auto;right:calc(var(--h) * .14);bottom:calc(var(--h) * -.06);
  width:calc(var(--h) * 1.22);height:calc(var(--h) * 1.22);border-radius:0;background:none;
  -webkit-mask-image:none;mask-image:none;pointer-events:none}
.feature-art img{display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.32))}
.feature-art.on{opacity:1}
/* Mientras se decodifica, los signos cambian de ancho: el título no empuja nada */
.feature-title{white-space:nowrap;font-variant-ligatures:none}

/* ─── Tarjetas: el título encima de la carátula ─── */
.card{display:block;aspect-ratio:1;overflow:hidden;border-radius:12px;background:var(--surface-2)}
/* Sin z-index propio: así los botones quedan sobre el título, que es de la tarjeta */
.card-art{position:absolute;inset:0;z-index:auto;aspect-ratio:auto;border-radius:0;box-shadow:none}
.card:hover .card-art{transform:none;filter:none}
.card-art::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 42%, rgba(0,0,0,0) 56%, rgba(0,0,0,.6))}
.card-t,.card-a{position:absolute;z-index:2;left:14px;right:14px;padding:0;color:#fff;pointer-events:none}
.card-t{top:12px;font-size:15px;font-weight:600;line-height:1.25;white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.card-ver{color:rgba(255,255,255,.72)}
.card-a{bottom:12px;right:56px;margin:0;font-size:12px;font-weight:500;color:rgba(255,255,255,.9)}
.card-play{z-index:4;right:10px;bottom:10px;width:38px;height:38px;background:#fff;color:#141414;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.5)}
.card.en-dispositivo .card-art::after{z-index:3;left:auto;top:auto;right:14px;bottom:14px}
.card.is-cur{box-shadow:0 0 0 2px var(--text)}
.card.is-cur .card-art{box-shadow:none}

/* ─── Escuchado recientemente: filas como las de la cola ───
   La duración pegada al borde; lo demás está en el menú del tema. */
.recent{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 28px}
.recent .row.rrow{grid-template-columns:46px minmax(0,1fr) auto;gap:14px;min-height:0;
  padding:6px 8px;border:0;border-radius:8px}
.recent .rrow-a{display:none}
.recent .row-d{grid-column:3;grid-row:1;justify-self:end}
.recent .row.rrow .row-m span{display:block;margin-top:2px;font-size:12px;color:var(--text-2)}
.recent .row-art{width:46px;height:46px;border-radius:6px;box-shadow:none}
.recent .row-m strong{font-size:14px;font-weight:600}
.recent .row-d{font-size:12.5px;font-weight:500;color:var(--text)}
.recent .row.is-cur{background:var(--rd-fila-on);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ─── A continuación: la cabecera y las filas ─── */
.qpanel{padding:0;gap:0;border:0}
.qpanel-h{padding:10px 24px 16px}
.qpanel-t{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.qpanel-t svg{display:none}
.qpanel-h .side-add{width:auto;height:auto;padding:4px 2px;border-radius:6px;font-size:13px;font-weight:500;color:var(--text-2)}
.qpanel-h .side-add svg{display:none}
.qpanel-h .side-add::after{content:'Cerrar'}
.qpanel-h .side-add:hover{background:none;color:var(--text)}
/* Lo que suena es la primera fila, resaltada de borde a borde */
.qpanel-ahora{padding:0;gap:0;border:0}
.qpanel-rot{display:none}
.qpanel-now{grid-template-columns:46px minmax(0,1fr) auto;gap:14px;padding:8px 24px;background:var(--rd-fila-on)}
.qpanel-now i{width:46px;height:46px;border-radius:5px}
.qpanel-now em{display:block;font-style:normal;font-size:12.5px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.qpanel-now .un-m b{color:var(--text)}
.qpanel-list{padding:0 0 16px;gap:0}
.qpanel .un{grid-template-columns:46px minmax(0,1fr) auto;gap:14px;padding:8px 24px;border-radius:0}
.qpanel .un i{width:46px;height:46px;border-radius:5px;box-shadow:none}
.qpanel .un-m{gap:2px}
.qpanel .un-m b,.qpanel-now .un-m b{font-size:14px;font-weight:600}
.qpanel .un-m span,.qpanel-now .un-m span{font-size:12px;color:var(--text-2)}
.qpanel .un em{font-size:12.5px;font-weight:500;color:var(--text)}
.qpanel .upnext-empty{margin:12px 24px}

/* ─── El avance, del color del texto en todas partes: blanco en oscuro ─── */
.line .line-fill,.line .line-knob{background:var(--text);box-shadow:none}

/* ─── Chips y botones en píldora, como «Reproducir» del destacado ─── */
.chips{gap:8px}
.chip,.lib-chip{height:auto;padding:9px 16px;border:0;border-radius:99px;background:var(--rd-btn);
  font-size:13px;font-weight:600;color:var(--text-2)}
.chip:hover,.lib-chip:hover{background:var(--rd-btn-2);color:var(--text)}
.chip.is-on,.lib-chip.is-on{background:var(--text);color:var(--card);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.lib-actions button,.profile-button,.ask-row button,.bulk-new,.btn-pp{height:42px;min-height:42px;padding:0 20px;
  border:0;border-radius:99px;background:var(--rd-btn);color:var(--text);font-size:14px;font-weight:600;box-shadow:none}
.lib-actions button:hover,.profile-button:hover,.ask-row button:hover,.btn-pp:hover{
  background:var(--rd-btn-2);transform:none}
.lib-actions button.primary,.ask-row .primary,.bulk-new{background:var(--text);color:var(--card)}
.lib-actions button.primary:hover,.ask-row .primary:hover{background:var(--text)}
.lib-actions button.ghost,.ask-row .ghost{background:none;color:var(--text-2)}
.lib-actions button.ghost:hover,.ask-row .ghost:hover{background:var(--rd-btn);color:var(--text)}
.lib-actions button svg{width:17px;height:17px}
/* «← Volver» de los perfiles: un enlace, no un botón más */
:is(#artist-profile,#album-profile)>.profile-button:first-child{height:34px;min-height:34px;margin:0 0 4px;padding:0 12px 0 8px;
  background:none;color:var(--text-2)}
:is(#artist-profile,#album-profile)>.profile-button:first-child:hover{background:var(--rd-btn);color:var(--text)}

/* ─── Cabeceras de lista, álbum y artista ─── */
.lib-head,.profile-header{gap:32px;align-items:flex-end}
.lib-head{padding:4px 0 28px;margin:0;border-bottom:0}
.profile-header{margin:12px 0 32px}
.lib-art,.profile-header>.entity-image{width:208px;height:208px;margin:0;border-radius:14px;
  box-shadow:0 26px 50px -22px rgba(0,0,0,.6)}
.profile-header>.entity-image.round{border-radius:50%}
.lib-info{gap:8px}
.lib-kind,.profile-label{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2)}
.lib-title,.profile-header h2{margin:6px 0 10px;font-size:clamp(34px, 4.2vw, 60px);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.lib-title{margin:0}
.lib-meta,.mix-sub{font-size:13.5px;color:var(--text-2)}
.profile-artist-link{color:var(--text-2);font-weight:600;text-decoration:none}
.profile-artist-link:hover{color:var(--text)}
.lib-actions{gap:10px;padding:0 0 22px}
.profile-section{margin:8px 0 40px}
.dl-estado{margin:0 0 10px;padding:0 4px;background:none}
.dl-estado p{font-size:12.5px;color:var(--text-3)}
.dl-avisos{background:var(--rd-btn);font-weight:600}
.dl-avisos:hover{background:var(--rd-btn-2)}

/* ─── Filas: como las de la cola, sin rayas y con la que suena resaltada ─── */
.rows{gap:2px}
.row{min-height:0;padding:8px 14px;gap:16px;border:0;border-radius:10px}
.row:hover{background:rgba(var(--glass),.06)}
.row.is-cur{background:var(--rd-fila-on);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.row-art{width:46px;height:46px;border-radius:6px;box-shadow:none}
.row-m strong{font-size:14px;font-weight:600}
.row-m span{margin-top:2px;font-size:12px;color:var(--text-2)}
.row-d{font-size:12.5px;color:var(--text-2)}
.row-n{color:var(--text-3)}

/* ─── Artistas y álbumes ───
   Los artistas, redondos y sin caja, como en el inicio; los álbumes, como
   las tarjetas del inicio, con el título encima de la carátula. */
.entity-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:28px 18px;margin:8px 0 32px}
.entity-card{gap:12px;padding:0;border:0;border-radius:12px;background:none}
.entity-card:hover{background:none;border-color:transparent}
.artist-card .entity-image{margin:0;box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.artist-card strong{font-size:14.5px;font-weight:600}
.artist-card>span:last-child{display:none}
.entity-card:not(.artist-card){position:relative;isolation:isolate;aspect-ratio:1;overflow:hidden;gap:0;background:var(--surface-2)}
.entity-card:not(.artist-card) .entity-image{position:absolute;inset:0;width:auto;margin:0;border-radius:0;aspect-ratio:auto}
.entity-card:not(.artist-card)::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 42%, rgba(0,0,0,0) 56%, rgba(0,0,0,.6))}
.entity-card:not(.artist-card) strong,.entity-card:not(.artist-card)>span:last-child{position:absolute;z-index:2;
  left:14px;right:14px;color:#fff}
.entity-card:not(.artist-card) strong{top:12px;font-size:15px;font-weight:600;line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.entity-card:not(.artist-card)>span:last-child{bottom:12px;font-size:12px;color:rgba(255,255,255,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ─── Ecualizador: la curva con el azul del avance ─── */
.eq-head{margin-bottom:24px;padding-bottom:0;border-bottom:0}
.eq-card{padding:24px 22px 18px;border:0;border-radius:16px;background:rgba(var(--glass),.04)}
.eq-cero{stroke:rgba(var(--glass),.18)}
.eq-linea{stroke:var(--rd-progreso)}
.eq-area{fill:color-mix(in srgb, var(--rd-progreso) 14%, transparent)}
.eq-banda output{color:var(--text)}
.eq-banda span{color:var(--text-2)}
.eq-banda input::-webkit-slider-runnable-track{width:3px;background:rgba(var(--glass),.16)}
.eq-banda input::-webkit-slider-thumb{width:16px;height:16px;margin-left:-6.5px;background:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.eq-banda input::-moz-range-track{width:3px;background:rgba(var(--glass),.16)}
.eq-banda input::-moz-range-thumb{width:16px;height:16px;background:var(--text)}
.eq-switch{font-size:14px;color:var(--text)}
.eq-switch input:checked{background:var(--rd-progreso)}
.eq-switch input:checked::after{background:#fff}
.eq-pre input{accent-color:var(--rd-progreso)}

/* ─── Menús, diálogos y avisos: elevados sobre el panel ─── */
.acct-menu,.addpl-menu{padding:8px;border:1px solid rgba(var(--glass),.08);border-radius:14px;
  background:var(--rd-elevado);box-shadow:var(--rd-sombra)}
.acct-i,.addpl-menu button{min-height:40px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text)}
.acct-i:hover,.acct-i:focus-visible,.addpl-menu button:hover,.addpl-menu button:focus-visible{background:rgba(var(--glass),.08)}
.acct-sep,.addpl-menu .sep{background:rgba(var(--glass),.08)}
.ask form,.bulk-dialog-card{padding:28px;border:1px solid rgba(var(--glass),.08);border-radius:18px;
  background:var(--rd-elevado);box-shadow:var(--rd-sombra)}
.ask h3{font-size:22px;font-weight:700;letter-spacing:-.01em}
/* El campo, subrayado como el buscador */
.ask input{height:46px;padding:0 2px;border:0;border-bottom:1px solid rgba(var(--glass),.3);border-radius:0;
  background:none;font-size:16px}
.ask input:focus-visible{outline:none;border-bottom-color:var(--text);box-shadow:0 1px 0 var(--text)}
.ask-row{gap:8px}
.toast{padding:12px 22px;border-radius:99px;background:var(--text);color:var(--card);font-size:13.5px;font-weight:600;
  box-shadow:var(--rd-sombra)}

/* ─── La vista grande: el fondo y la letra ───
   El fondo es la carátula, desenfocada y quieta, en su propia capa: el
   desenfoque se calcula al cambiar de tema y no en cada cuadro. La letra va
   grande y gruesa, sin desenfoque; entre línea y línea cambian opacidad y
   escala, que resuelve el compositor. */
.stage::before{content:'';position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:var(--tapa, none) center/cover no-repeat;filter:blur(70px) saturate(1.35);will-change:transform}
.stage-bg{display:none}
.stage .blyrics-container{--blyrics-font-weight:750;--blyrics-lyric-inactive-color:color-mix(in oklab,var(--lyr-on) 36%,transparent);letter-spacing:-.02em}
.stage-badges .badge{background:rgba(var(--glass),.1);color:var(--text-2);box-shadow:none}

/* ═══════════════════════════════════════════════════════════
   3 · ESCRITORIO
   ═══════════════════════════════════════════════════════════ */
@media (min-width:861px){
  :root{
    --sidebar:208px;--topH:84px;--barH:76px;--pad:36px;
    --cola-ancho:clamp(330px, 26vw, 400px);
    --radio-panel:24px;
  }

  /* ─── Marco: barra lateral y panel ─── */
  /* El degradado de la barra lateral va en el marco entero y no sólo en ella:
     las esquinas redondeadas del panel dejan ver lo que hay detrás, y abajo
     asomaba el fondo de la página, más oscuro que la barra. Era la muesca. */
  .shell{grid-template-columns:var(--sidebar) minmax(0,1fr);height:100vh;height:100dvh;padding:0;
    background:linear-gradient(180deg, var(--base) 30%, var(--base-2))}
  .main-wrap{border-radius:var(--radio-panel) 0 0 var(--radio-panel)}

  .library-sidebar{padding:24px 14px 28px 20px;border-right:0;background:none}
  .sidebar-toggle{display:grid;place-items:center;width:40px;height:40px;margin:0 0 30px 2px;
    border-radius:10px;color:var(--text-2)}
  .sidebar-toggle:hover{color:var(--text);background:rgba(var(--glass),.06)}
  .sidebar-toggle svg{width:20px;height:20px}

  /* Sólo texto, sin íconos ni fondos: lo activo va en blanco y más grueso */
  .top-menu{position:relative;flex:1;min-height:0;gap:2px}
  .top-menu .tm-i{height:38px;padding:0 12px;gap:12px;font-size:15px;font-weight:500;letter-spacing:0;color:var(--rd-nav)}
  .top-menu .tm-i svg{display:none}
  .top-menu .tm-i:hover{background:none;color:var(--text)}
  .top-menu .tm-i[aria-current="page"],.top-menu .tm-i[aria-expanded="true"]{background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;color:var(--text);font-weight:700}
  .nav-section-label{padding:28px 12px 10px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
  .sidebar-pie{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:2px}
  /* La raya que marca dónde se está: la ubica layout.js */
  .nav-indicador{position:absolute;z-index:1;left:0;top:0;width:3px;height:18px;border-radius:3px;
    background:var(--text);opacity:0;pointer-events:none}

  /* Tus listas: un desplegable de sólo texto bajo su botón */
  .top-listas .tm-i::after{font-size:17px;opacity:.6}
  .listas-menu{padding:2px 0 8px;gap:0}
  .listas-menu .side-h{padding:0}
  .listas-menu .side-h>span{display:none}
  .listas-menu .side-add{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;height:32px;
    padding:0 12px 0 24px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text-3)}
  .listas-menu .side-add::after{content:'Nueva lista'}
  .listas-menu .side-add svg{width:12px;height:12px}
  .listas-menu .side-add:hover{background:none;color:var(--text)}
  .listas-menu .pl{padding:7px 12px 7px 24px;font-size:13.5px;font-weight:500;color:var(--text-3);border-radius:8px}
  .listas-menu .pl i{display:none}
  .listas-menu .pl:hover{background:none;color:var(--text)}
  .listas-menu .pl.is-on{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    color:var(--text);font-weight:700}
  .listas-menu .pl b{font-weight:500;color:var(--text-3);opacity:.7}
  .listas-menu .side-empty{margin:4px 12px 4px 24px}

  /* Achicada con las tres rayas: una columna de íconos */
  :root.menu-mini{--sidebar:80px}
  .menu-mini .library-sidebar{padding-inline:18px}
  .menu-mini .sidebar-toggle{margin-left:2px}
  .menu-mini .top-menu .tm-i{width:44px;height:44px;padding:0;justify-content:center}
  .menu-mini .top-menu .tm-i svg{display:block;width:20px;height:20px}
  .menu-mini .top-menu .tm-i[aria-current="page"]{background:rgba(var(--glass),.1)}
  .menu-mini .nav-label,.menu-mini .top-listas .tm-i::after{display:none}
  .menu-mini .nav-section-label{font-size:0;padding:0;margin:14px 10px;border-top:1px solid var(--stroke)}
  .menu-mini .nav-indicador{left:-12px}
  /* Las listas, achicada: sus carátulas debajo de su ícono, con el nombre al
     pasar el puntero (layout.js, .nav-tip), y el + para crear una */
  /* Achicada, el desplegable queda «cerrado» (hidden, que styles.css esconde
     con !important) pero las carátulas se ven igual */
  .menu-mini .listas-menu,.menu-mini .listas-menu[hidden]{display:flex!important;flex-direction:column;align-items:flex-start;gap:4px;padding:6px 0 8px}
  .menu-mini .listas-menu .side-h{display:flex;width:44px;justify-content:center}
  .menu-mini .listas-menu .side-add{width:44px;height:36px;padding:0;justify-content:center;border-radius:10px}
  .menu-mini .listas-menu .side-add::after{content:none}
  .menu-mini .listas-menu .side-add svg{width:14px;height:14px}
  .menu-mini .listas-menu .side-add:hover{background:rgba(var(--glass),.06)}
  .menu-mini .listas-menu .side-list{align-items:flex-start;gap:4px}
  .menu-mini .listas-menu .pl{width:44px;height:44px;padding:0;justify-content:center;border-radius:10px}
  .menu-mini .listas-menu .pl:hover{background:rgba(var(--glass),.06)}
  .menu-mini .listas-menu .pl i{display:block;width:32px;height:32px;border-radius:7px}
  .menu-mini .listas-menu .pl.is-on i{box-shadow:0 0 0 2px var(--text)}
  .menu-mini .listas-menu .pl span,.menu-mini .listas-menu .pl b,.menu-mini .listas-menu .side-empty{display:none}

  /* El nombre de un destino al pasar el puntero (layout.js) */
  .nav-tip{position:fixed;left:0;top:0;z-index:300;transform:translateY(-50%);max-width:260px;padding:7px 11px;
    border:1px solid rgba(var(--glass),.08);border-radius:9px;background:var(--rd-elevado);box-shadow:var(--rd-sombra);
    font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
  .nav-tip[hidden]{display:none}

  /* ─── Arriba: el buscador y la cuenta con su nombre ─── */
  .topbar{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:24px;padding:0 var(--pad);
    background:none;border-bottom:0}
  .tb-left{display:none}
  .tb-actions{gap:12px}
  .gbtn.on{gap:14px;height:46px;padding:0 3px 0 12px;border-radius:99px}
  .gbtn.on:hover{background:rgba(var(--glass),.05)}
  .gbtn.on .gbtn-t{display:block;max-width:200px;font-size:15px;font-weight:600;letter-spacing:0}
  .gbtn.on .avatar{order:2;width:40px;height:40px;font-size:13px;box-shadow:0 0 0 2px rgba(var(--glass),.12)}
  .gbtn.on .gchev{display:none}

  /* ─── Contenido ───
     Pasa por debajo de la barra de abajo: el relleno del pie deja ver lo
     último entero. */
  .content{padding:6px var(--pad) calc(var(--barH) + 56px)}
  .view{max-width:none;margin:0}
  .rail{grid-auto-columns:clamp(150px, 11.5vw, 184px);gap:16px}
  .recent{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Los destinos de la biblioteca ya están en la barra lateral */
  .lib-chips{display:none}

  /* ─── A continuación: una columna de alto completo a la derecha ───
     Sigue flotando —no le quita ancho a la página— pero ya no es una
     ventana: va de la barra de arriba a la de abajo, pegada al borde. */
  .qpanel{top:var(--topH);right:0;bottom:var(--barH);width:var(--cola-ancho);
    border-radius:0;background:var(--rd-lienzo);
    box-shadow:-34px 0 60px -34px rgba(0,0,0,.6);
    transform-origin:right center;animation-name:qp-lado;animation-duration:.24s}
  @keyframes qp-lado{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
  /* Sobre la vista grande layout.js la muda adentro de ella: queda entre el
     fondo y la × y la barra de controles, que flotan encima. De alto
     completo, como en la página, y de vidrio: el desenfoque toma los colores
     de la carátula de atrás y tapa la letra. El gris del panel ahí no
     combinaba con nada y la ventana se veía recortada. */
  .stage .qpanel{z-index:5;top:0;bottom:0;padding:var(--sv-arriba) 0 var(--sv-barra);
    background:var(--sv-cristal);box-shadow:inset 1px 0 rgba(var(--glass),.08);
    -webkit-backdrop-filter:blur(36px) saturate(1.25);backdrop-filter:blur(36px) saturate(1.25)}
  .stage .qpanel-now,.stage .qpanel .un:hover{background:rgba(var(--glass),.1)}
  /* Las filas se esfuman al llegar a la barra de controles */
  .stage .qpanel-list{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 36px), transparent);
            mask-image:linear-gradient(180deg, #000 calc(100% - 36px), transparent)}

  /* ─── La barra de abajo ───
     De lado a lado del panel y pegada a su pie. El avance es la raya de su
     borde de arriba, sin los tiempos. Opaca y sin desenfoque: con la página
     pasando por debajo, el desenfoque se recalculaba en cada cuadro del
     desplazamiento, y con el 94 % de opacidad de antes ni se veía. */
  .bar{left:var(--sidebar);right:0;bottom:0;height:var(--barH);padding:0 var(--pad);gap:24px;overflow:visible;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    border:0;border-radius:0 0 0 var(--radio-panel);box-shadow:none;background:var(--rd-barra);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .bar-art{width:46px;height:46px;border-radius:6px}
  .bar-meta{gap:3px}
  .bar-meta strong{font-size:14px;font-weight:600}
  .bar-meta span{font-size:12px;color:var(--text-2)}
  /* El avance se ubica respecto de la barra, no de su columna */
  .bar .bar-mid{position:static}
  .bar .seek{position:absolute;z-index:2;left:0;right:0;top:0;height:12px;gap:0}
  .bar .seek .t{display:none}
  .bar .line{height:12px;align-items:flex-start}
  /* Al pasar el puntero la raya engorda con scaleY y no con height: así no
     hay que volver a diseñarla en cada cuadro */
  .bar .line::before,.bar .line-fill{top:0;height:4px;border-radius:0;transform-origin:0 0;
    transition:transform .25s var(--rd-sale)}
  .bar .line::before{background:var(--rd-pista)}
  .bar .line:hover::before,.bar .line:hover .line-fill,.bar .line.drag::before,.bar .line.drag .line-fill{transform:scaleY(1.5)}
  .bar .line-knob{top:-4px;width:12px;height:12px}
  /* Repetir a la izquierda y aleatorio a la derecha, como en la referencia */
  .bar .transport{gap:14px}
  .bar #repeat{order:1}.bar #prev{order:2}.bar #play{order:3}.bar #next{order:4}.bar #shuffle{order:5}
  .bar .transport .ico,.bar-end .ico{width:38px;height:38px;color:var(--text)}
  .bar .transport .ico svg,.bar-end .ico svg{width:20px;height:20px}
  .bar .play{width:46px;height:46px}
  .bar .play svg{width:20px;height:20px}
  .bar-end{gap:6px}
  .bar .vol{gap:8px;margin-left:4px}
  /* El relleno lo marca --v, que pone la sincronización con el volumen */
  .bar .vol-range{width:96px;height:3px;
    background:linear-gradient(90deg, var(--text) var(--v,100%), var(--rd-pista) var(--v,100%))}
  .bar .vol-range::-webkit-slider-thumb{width:11px;height:11px;background:var(--text);box-shadow:none;opacity:0;transition:opacity .15s}
  .bar .vol:hover .vol-range::-webkit-slider-thumb,.bar .vol-range:focus-visible::-webkit-slider-thumb{opacity:1}
  .bar .vol-range::-moz-range-thumb{width:11px;height:11px;background:var(--text)}

  /* ═══ La vista grande ═══
     Sobre la carátula desenfocada: a la izquierda la carátula con su título
     encima y, debajo, aleatorio y repetir; a la derecha la letra, donde la
     referencia tiene la lista; y al pie, de lado a lado, la barra de
     controles. «A continuación» se sigue abriendo en su columna. Los
     controles los acomoda layout.js; sin vecinas ni visualizador. */
  :root{
    --sv-barra:104px;--sv-arriba:76px;
    --sv-tapa:min(34vw, calc(100vh - var(--sv-barra) - 220px), 520px);
  }
  .stage .peek,.stage .viz,.stage-extras,.stage-label,.stage-acts{display:none}
  .stage-veil{background:linear-gradient(0deg, var(--sv-velo-2), transparent 24%),
    linear-gradient(90deg, var(--sv-velo-2), var(--sv-velo) 46%)}

  /* Sólo queda la ×, arriba a la derecha */
  .stage-top{display:contents}
  #stage-close{position:absolute;z-index:7;top:22px;right:26px;width:42px;height:42px;border-radius:10px;
    background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--text)}
  #stage-close:hover{background:rgba(var(--glass),.1);transform:none}
  #stage-close svg{display:none}
  #stage-close::before{content:'';width:22px;height:22px;background:currentColor;
    -webkit-mask:var(--ico-cerrar) center/contain no-repeat;
            mask:var(--ico-cerrar) center/contain no-repeat}

  .stage-cuerpo{grid-template-columns:var(--sv-tapa) minmax(0,660px);justify-content:center;
    gap:clamp(40px,5vw,88px);max-width:none;
    padding:var(--sv-arriba) 56px calc(var(--sv-barra) + 12px)}
  .stage-player{justify-content:center;gap:18px;overflow:visible}

  /* La carátula, con el título y el artista encima, al pie y centrados */
  .stage-cover{width:100%}
  .stage-art{border-radius:3px;box-shadow:0 34px 70px -24px rgba(0,0,0,.65)}
  .stage-cover::after{content:'';position:absolute;inset:auto 0 0;height:46%;z-index:1;pointer-events:none;
    border-radius:0 0 3px 3px;background:linear-gradient(180deg, transparent, rgba(0,0,0,.66))}
  .stage-cover .stage-id{position:absolute;z-index:2;left:0;right:0;bottom:7%;padding:0 22px;
    text-align:center;pointer-events:none}
  .stage-cover .stage-id h2{font-size:clamp(20px, 1.7vw, 27px);font-weight:700;letter-spacing:-.01em;color:#fff;
    white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    text-shadow:0 2px 14px rgba(0,0,0,.45)}
  .stage-cover .stage-id p{margin-top:6px;font-size:15px;font-weight:500;color:rgba(255,255,255,.86);
    text-shadow:0 1px 10px rgba(0,0,0,.45)}

  /* Debajo: el me gusta, aleatorio, repetir y el ⋯ */
  .stage-transport{order:2;justify-content:center;gap:10px;padding:0}
  .stage-transport .ico{width:42px;height:42px;border-radius:10px;color:var(--text-2)}
  .stage-transport .ico:hover{color:var(--text);background:rgba(var(--glass),.1)}
  .stage-head{order:3;display:flex;justify-content:center}
  .stage-badges{justify-content:center;margin:0}

  /* La letra, en la columna de la lista, con el parlante adelante de la
     línea que suena, como la fila que suena */
  .stage-letra{position:relative;align-items:stretch}
  .stage .lyrics{-webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
            mask-image:linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent)}
  .stage .blyrics-container{--blyrics-font-size:clamp(24px, 2.15vw, 34px);--blyrics-line-height:1.24;
    --blyrics-padding:clamp(8px, 1.1vh, 12px);padding-left:44px}
  .stage .blyrics--line{position:relative}
  .stage .blyrics--line.blyrics--active::before{content:'';position:absolute;left:-44px;top:calc(var(--blyrics-padding) + .3em);width:.7em;height:.7em;background:var(--lyr-on);
    -webkit-mask:var(--ico-sonido) center/contain no-repeat;
            mask:var(--ico-sonido) center/contain no-repeat}
  .stage .lyr-none{padding-left:0;font-size:15px}

  /* ─── La barra de controles ───
     Anterior, pausa y siguiente a la izquierda; la canción y el avance al
     centro, con el azul de la barra de la página; a la derecha los ajustes,
     el volumen y «A continuación». Los costados nunca miden menos que sus
     botones: con poco ancho cede el avance del centro, que si no quedaba
     debajo de los íconos de la derecha. */
  .stage-barra{position:absolute;z-index:6;left:0;right:0;bottom:0;height:var(--sv-barra);
    display:grid;grid-template-columns:minmax(max-content,1fr) minmax(280px,640px) minmax(max-content,1fr);
    align-items:center;gap:28px;padding:0 32px 6px}
  .stage:not(.is-closing) .stage-barra{animation:rise .55s var(--ease) .1s both}
  .sb-izq{display:flex;align-items:center;gap:8px}
  .sb-izq .ico,.sb-izq .play{width:48px;height:48px;border-radius:10px;background:none;box-shadow:none;color:var(--text)}
  .sb-izq .ico svg{width:22px;height:22px}
  .sb-izq .play svg{width:30px;height:30px}
  .sb-izq .ico:hover,.sb-izq .play:hover{background:rgba(var(--glass),.1);transform:none}
  .sb-centro{display:flex;flex-direction:column;gap:6px;min-width:0}
  .stage-ahora{margin:0;text-align:center;font-size:14px;font-weight:600;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sb-centro .stage-seek{padding:0;gap:12px}
  .sb-centro .t{width:38px;font-size:12px;font-weight:500;color:var(--text-2)}
  .sb-centro .line::before{height:5px;background:rgba(var(--glass),.24)}
  .sb-centro .line-fill{height:5px}
  .sb-centro .line-knob{width:14px;height:14px}
  .sb-der{display:flex;align-items:center;justify-content:flex-end;gap:4px}
  .sb-der .ico,.sb-der .stage-btn{width:42px;height:42px;border-radius:10px;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;color:var(--text)}
  .sb-der .ico svg,.sb-der .stage-btn svg{width:20px;height:20px}
  .sb-der .ico:hover,.sb-der .stage-btn:hover{background:rgba(var(--glass),.1);transform:none}
  .sb-der .ico.on,.sb-der .stage-btn[aria-expanded="true"]{background:rgba(var(--glass),.16);color:var(--text)}
  .sb-der .stage-vol{display:flex;align-items:center;gap:6px;margin:0 4px}
  .sb-der .vol-range{width:90px;height:3px;
    background:linear-gradient(90deg, var(--text) var(--v,100%), rgba(var(--glass),.24) var(--v,100%))}
  .sb-der .vol-range::-webkit-slider-thumb{width:11px;height:11px;background:var(--text);box-shadow:none}
}

/* Entre 861 y 1100 px: menos aire y una barra lateral más angosta */
@media (min-width:861px) and (max-width:1100px){
  :root{--sidebar:184px;--pad:26px}
  .feature-in{max-width:62%;padding:0 28px}
  .recent{grid-template-columns:minmax(0,1fr)}
  .stage-cuerpo{padding-inline:32px}
  .stage-barra{gap:16px;padding-inline:20px}
  .sb-der .vol-range{display:none}
}

/* ═══════════════════════════════════════════════════════════
   4 · TELÉFONO
   Lo mismo, a una mano: arriba el buscador; abajo, acopladas, la
   barra de lo que suena —con la raya blanca del avance en su borde— y
   las pestañas, con la raya que marca la activa. La cola y los menús
   son hojas que suben desde abajo, y la vista grande, la pantalla
   entera sobre la carátula desenfocada.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:860px){
  :root{--tabH:56px;--miniH:64px;--barH:calc(var(--tabH) + var(--miniH))}
  body{background:var(--card)}

  /* ─── Arriba: sólo el buscador, el tema y la foto de la cuenta ─── */
  .topbar{grid-template-columns:minmax(0,1fr) auto;gap:12px;
    padding:0 calc(16px + var(--sa-r)) 0 calc(16px + var(--sa-l));background:none;border-bottom:0}
  .tb-left{display:none}
  .top-search{height:40px}
  .tb-actions{gap:2px}
  /* El buscador, sólo en Buscar (navegacion.js marca la vista en <html>). En
     las demás la barra de arriba no está; sin conexión queda sólo su píldora,
     chica y a la derecha */
  html:not([data-vista="buscar"]) .top-search{display:none}
  html:not([data-vista="buscar"]) .topbar{grid-template-columns:minmax(0,1fr);height:auto;padding-top:10px}
  html:not([data-vista="buscar"]) .topbar:not(:has(.sin-red:not([hidden]))){display:none}
  /* Sin ella, lo de arriba de cada vista no queda pegado al borde */
  html:not([data-vista="buscar"]) .main-wrap:not(:has(.sin-red:not([hidden]))) .content{padding-top:16px}
  .gbtn.on{padding:0 0 0 4px;background:none}
  .gbtn .avatar{width:34px;height:34px;box-shadow:0 0 0 2px rgba(var(--glass),.12)}

  /* ─── Contenido ─── */
  .content{padding:4px calc(16px + var(--sa-r)) 28px calc(16px + var(--sa-l))}
  .home-title{font-size:28px;margin-top:8px}
  .sec-t{font-size:28px}
  .sec-h h3,.rail-h h3,.profile-section h3,.search-songs-title{font-size:18px}
  /* La etiqueta de cada carril va debajo del título, como antes */
  .rail-h{align-items:flex-start;gap:4px}
  .home-sec{margin-bottom:32px}
  .rails{gap:32px;margin-bottom:32px}

  /* El destacado, a la medida del teléfono: la estrella más chica y el
     texto con lugar a su izquierda */
  .feature{--h:172px;margin:calc(var(--h) * .12) 0 30px}
  .feature-in{max-width:56%;padding:0 18px;gap:4px}
  .feature-kicker{font-size:13.5px}
  .feature-title{font-size:24px}
  .feature-foot{margin-top:16px}
  .feature-play{height:38px;padding:0 18px 0 14px;font-size:13.5px}
  /* Los auriculares, de 1,12 del alto, apoyados abajo; la estrella, centrada
     detrás de su dibujo (en derecha − 0,53 alto, 0,44 alto), como en la app */
  .feature::after{width:calc(var(--h) * 1.12);top:calc(var(--h) * -.123);right:calc(var(--h) * -.03)}
  .feature-art{inset:auto calc(var(--h) * -.04) 0 auto;width:calc(var(--h) * 1.12);height:calc(var(--h) * 1.12)}

  /* Las tarjetas, más grandes (144 → 168); el texto, del mismo tamaño */
  .rail{grid-auto-columns:168px;gap:12px}
  .card-t{top:10px;left:12px;right:12px;font-size:14px}
  .card-a{left:12px;bottom:10px;font-size:11.5px}
  .card-play{width:34px;height:34px;right:8px;bottom:8px}

  /* ─── Biblioteca, perfiles y listas ─── */
  .lib-chips{display:flex;margin-bottom:20px}
  .lib-head,.profile-header{gap:18px}
  .lib-head{padding:0 0 22px}
  .profile-header{margin:12px 0 26px}
  .lib-art,.profile-header>.entity-image{width:116px;height:116px;border-radius:12px}
  .profile-header>.entity-image.round{border-radius:50%}
  .lib-kind,.profile-label{font-size:12px}
  .lib-title,.profile-header h2{font-size:30px;letter-spacing:-.025em}
  .lib-actions{gap:8px}
  .lib-actions button{height:40px;min-height:40px;padding:0 16px;font-size:13.5px}
  /* Las filas, más grandes: la carátula de 44 a 56 y la letra apenas, 2 px */
  .row{grid-template-columns:24px 56px minmax(0,1fr);padding:8px 4px;gap:12px}
  .rows.seleccionando .row{grid-template-columns:24px 56px minmax(0,1fr)}
  .row-art{width:56px;height:56px;border-radius:7px}
  .row-n{font-size:14px}
  .row-m strong{font-size:16px}
  .row-m span{margin-top:3px;font-size:13.5px}
  .row.rrow,.recent .row.rrow{grid-template-columns:56px minmax(0,1fr)}
  .recent .row-art{width:56px;height:56px;border-radius:7px}
  .recent .row-m strong{font-size:16px}
  .recent .row.rrow .row-m span{margin-top:3px;font-size:13.5px}
  .entity-grid{gap:22px 14px}
  .eq-card{padding:18px 8px 12px}
  .ask form{padding:24px}

  /* ─── La barra de lo que suena, acoplada sobre las pestañas ───
     Sigue el tema, como la del escritorio: los tokens que antes la dejaban
     oscura siempre vuelven a heredarse. El avance es la raya de arriba, del color del texto. */
  .bar{--ink:inherit;--card:inherit;--text:inherit;--text-2:inherit;--text-3:inherit;--track:inherit;--hover-2:inherit;
    --emph:inherit;--emph-on:inherit;--emph-ink:inherit;--aura:inherit;--aura-ring:inherit;--accent:inherit;
    left:0;right:0;bottom:calc(var(--tabH) + var(--sa-b));height:var(--miniH);gap:10px;overflow:visible;
    padding:0 calc(10px + var(--sa-r)) 0 calc(12px + var(--sa-l));
    border:0;border-radius:0;box-shadow:none;background:var(--rd-barra)}
  .bar-art{width:44px;height:44px;border-radius:6px}
  .bar-meta{gap:2px}
  .bar-meta strong{font-size:14px;font-weight:600}
  .bar-meta span{font-size:12px;color:var(--text-2)}
  .bar .fav{color:var(--text)}
  .bar .play{width:40px;height:40px;background:var(--text);color:var(--card)}
  .bar .play svg{width:18px;height:18px}
  .bar .seek{left:0;right:0;top:0;bottom:auto;height:3px}
  .bar .line,.bar .line::before,.bar .line-fill{height:3px}
  .bar .line::before{top:0;background:rgba(var(--glass),.14)}
  .bar .line-fill{top:0}

  /* ─── Las pestañas: con el fondo de la barra lateral y la raya arriba ─── */
  .tabbar{grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--tabH) + var(--sa-b));
    padding:0 calc(4px + var(--sa-r)) var(--sa-b) calc(4px + var(--sa-l));background:var(--base);border-top:0}
  .tab-i{margin:0;border-radius:0;gap:5px;font-size:10.5px;font-weight:600;color:rgba(var(--glass),.55);background:none}
  .tab-i.is-on{color:var(--text);font-weight:750;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .tab-i svg{width:24px;height:24px}
  /* Sólo el ícono: el nombre queda para los lectores de pantalla (aria-label) */
  .tab-i>span:not(.perfil-av){display:none}
  .tab-i .perfil-av--tab{width:26px;height:26px;font-size:10px}
  /* La ubica layout.js */
  .tab-indicador{position:absolute;z-index:1;left:0;top:0;width:24px;height:3px;border-radius:0 0 3px 3px;
    background:var(--text);opacity:0;pointer-events:none}

  /* ─── Las hojas: todo lo que sube desde abajo ───
     El menú de un tema (y su página de listas), A continuación y el destino
     de la selección, con el mismo molde: pegadas al borde de abajo y de lado
     a lado, las esquinas de arriba redondeadas y la manija. El fondo es el
     de las hojas del tema teñido con el color de la carátula que suena, como
     ya lo hacía la cola sobre la vista grande (y como en la app); sin nada
     sonando, un gris neutro. */
  :root{--hoja:color-mix(in oklab, var(--now-tint, #555) 22%, var(--sv-hoja));--hoja-sombra:0 -24px 60px -24px rgba(0,0,0,.6)}
  /* El menú se coloca a mano junto a lo que lo abrió (menus.js): en el teléfono, no */
  .addpl-menu{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto;min-width:0;max-width:none;
    max-height:74dvh;padding:0 10px calc(10px + var(--sa-b));border:0;border-radius:22px 22px 0 0;
    background:var(--hoja);box-shadow:var(--hoja-sombra)}
  .addpl-menu button{min-height:48px;font-size:15px}
  .addpl-tema{padding:4px 12px 12px;margin-bottom:6px}
  .addpl-tema img{width:40px;height:40px;border-radius:6px}
  .addpl-tema strong{font-size:14px;font-weight:600}
  .addpl-tema small{font-size:12.5px;color:var(--text-2)}
  .acct-menu{border-radius:16px}
  .acct-i{min-height:46px;font-size:15px}
  .bulk-dialog{width:100%;max-width:none;max-height:80dvh;margin:0;inset:auto 0 0 0;border-radius:0}
  .bulk-dialog-card{max-height:80dvh;padding:0 18px calc(16px + var(--sa-b));border:0;border-radius:22px 22px 0 0;
    background:var(--hoja);box-shadow:var(--hoja-sombra)}
  /* La manija: dice que es una hoja */
  .qpanel::before,.addpl-menu::before,.bulk-dialog-card::before{content:'';display:block;flex:none;width:36px;height:4px;
    margin:8px auto 0;border-radius:2px;background:rgba(var(--glass),.22)}
  .addpl-menu::before{margin-bottom:10px}
  .bulk-dialog-card::before{margin-bottom:14px}

  /* ─── A continuación ─── */
  .qpanel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:74dvh;padding-bottom:var(--sa-b);
    border:0;border-radius:22px 22px 0 0;background:var(--hoja);box-shadow:var(--hoja-sombra)}
  .qpanel-h{padding:8px 18px 12px}
  .qpanel-t{font-size:18px}
  .qpanel-now,.qpanel .un{gap:12px;padding:8px 18px}
  .qpanel-now,.qpanel .un{grid-template-columns:44px minmax(0,1fr) auto}
  .qpanel-now i,.qpanel .un i{width:44px;height:44px}
  .qpanel .un-m b,.qpanel-now .un-m b{font-size:14.5px}
  .qpanel .un-m span,.qpanel-now .un-m span{font-size:12.5px}
  .qpanel .upnext-empty{margin:12px 18px}
  .qpanel-now{background:rgba(var(--glass),.1)}

  /* ═══ La vista grande en el teléfono ═══
     La carátula desenfocada de fondo, con el velo más cerrado hacia abajo,
     donde van los controles. Arriba, minimizar y la cola; la carátula; el
     título debajo, con el me gusta y el ⋯; el avance, blanco y más grueso; y los
     controles, con el play en un círculo. */
  .stage{background:var(--base)}
  .stage-veil{background:linear-gradient(180deg, var(--sv-velo), var(--sv-velo) 35%, var(--sv-velo-2))}
  .stage-label{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2)}
  .stage-btn{border-radius:12px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--text)}
  .stage-btn[aria-expanded="true"]{background:rgba(var(--glass),.14);color:var(--text)}
  .stage-art{border-radius:10px;box-shadow:0 30px 60px -26px rgba(0,0,0,.7)}
  .stage-id h2{font-size:23px;font-weight:800;letter-spacing:-.02em}
  .stage-id p{font-size:14px;color:var(--text-2)}
  .stage-acts .ico{color:var(--text-2)}
  .stage-seek .t{font-size:11.5px;color:var(--text-2)}
  .stage-seek .line::before{height:5px;background:rgba(var(--glass),.22)}
  .stage-seek .line-fill{height:5px}
  .stage-seek .line-knob{width:15px;height:15px;opacity:1}
  .stage-transport .ico{color:var(--text)}
  .stage-transport .play{width:66px;height:66px;background:var(--text);color:var(--card);
    box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
  .stage-transport .play svg{width:26px;height:26px}
  .stage-extras{border-top:0}
  .stage-extras .ico{color:var(--text-2)}
  .stage-extras .ico.on{background:rgba(var(--glass),.14);color:var(--text)}
  .stage .blyrics-container{--blyrics-font-size:clamp(26px, 7.2vw, 34px);--blyrics-line-height:1.22}
  .stage .lyr-none{font-size:15px}
}

/* ═══════════════════════════════════════════════════════════
   5 · MOVIMIENTO: microinteracciones a 60 cuadros.

   Todo lo que se mueve anima transform u opacidad —o translate,
   scale y rotate, sus versiones sueltas—, que resuelve el
   compositor sin diseñar ni pintar. Lo que sólo cambia de color
   (los fondos al pasar el puntero) repinta un botón, nada más.
   Nada de esto corre con «menos movimiento».

   Con puntero los íconos se animan al pasar por encima, cada uno
   según lo que hace —siguiente empuja, repetir da la vuelta, el me
   gusta late—: la idea de los íconos animados de Animate UI hecha
   con CSS, porque la aplicación no usa React ni tiene paso de
   compilación. Con el dedo, que no pasa por encima, se animan al
   cambiar de estado y responden al apretarlos.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  @keyframes rd-salto{40%{scale:1.15}70%{scale:.96}}
  @keyframes rd-adelante{40%{translate:3px 0}}
  @keyframes rd-atras{40%{translate:-3px 0}}
  @keyframes rd-vuelta{to{rotate:180deg}}
  @keyframes rd-cruce{30%{rotate:-12deg}65%{rotate:8deg}}
  @keyframes rd-latido{20%{scale:1.32}45%{scale:.9}70%{scale:1.08}}
  @keyframes rd-tilde{30%{rotate:-16deg}65%{rotate:9deg}}
  @keyframes rd-punto{40%{translate:0 -3px}}
  @keyframes rd-sube{40%{translate:0 -2px}}
  @keyframes rd-vista{from{opacity:0;translate:0 10px}}
  @keyframes rd-entra{from{opacity:0;translate:0 14px}}
  @keyframes rd-asoma{from{opacity:0;scale:.95}}
  @keyframes rd-fundido{from{opacity:0}}
  @keyframes rd-estrella{from{opacity:0;rotate:-50deg;scale:.6}}

  /* ─── Apretar ─── */
  button{transition-property:background-color,border-color,color,opacity,box-shadow,transform,translate,scale,rotate;
    transition-duration:.22s;transition-timing-function:var(--rd-sale)}
  button:active:not(:disabled){scale:.94;transition-duration:.08s}
  :is(.top-menu .tm-i,.lib-actions button,.chip,.lib-chip,.acct-i,.addpl-menu button,.profile-button,.ask-row button,.tab-i):active:not(:disabled){scale:.97}
  .card,.entity-card,.row,.un,.artist{transition:translate .5s var(--rd-resorte), scale .2s var(--rd-sale), background-color .2s}
  :is(.card,.entity-card,.artist):active{scale:.97;transition-duration:.08s}
  :is(.row,.un):active{scale:.99;transition-duration:.08s}
  /* Siguiente y anterior empujan para su lado al apretarlos */
  [data-act="next"] svg,[data-act="prev"] svg{transition:translate .35s var(--rd-resorte)}
  [data-act="next"]:active svg{translate:3px 0}
  [data-act="prev"]:active svg{translate:-3px 0}

  /* ─── El buscador: la raya de abajo se llena desde la izquierda ─── */
  .top-search{position:relative}
  .top-search::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--text);
    transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--rd-sale)}
  .top-search:focus-within::after,.top-search.has-val::after{transform:none}
  .top-search:focus-within,.top-search.has-val{border-bottom-color:rgba(var(--glass),.3)}
  .top-search:focus-within .search-ico{animation:rd-tilde .6s var(--rd-sale)}

  /* ─── El destacado: la estrella entra girando con la página ─── */
  .view.is-on .feature::after{animation:rd-estrella .9s var(--rd-sale) .08s backwards}
  .feature-art{transition:opacity .8s ease, translate .7s var(--rd-resorte)}
  .card-art img,.entity-card .entity-image img{transition:transform .6s var(--rd-sale)}
  .card-play{transition:opacity .25s var(--rd-sale), transform .45s var(--rd-resorte), scale .2s var(--rd-sale)}

  /* ─── Entradas: cada página y cada lista, de a una pieza ───
     Al cambiar de página las piezas vuelven a entrar solas: estaban en un
     display:none, y al mostrarse sus animaciones arrancan de nuevo. Sólo
     las primeras de cada lista: más abajo no se ven entrar. backwards y no
     both, para no dejar un translate puesto al terminar. */
  .view.is-on{animation:rd-vista .45s var(--rd-sale) backwards}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(-n+18){
    animation:rd-entra .55s var(--rd-sale) backwards;animation-delay:calc(var(--n, 0) * 28ms)}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(2){--n:1}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(3){--n:2}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(4){--n:3}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(5){--n:4}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(6){--n:5}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(7){--n:6}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(8){--n:7}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(9){--n:8}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(10){--n:9}
  :is(.rail,.grid,.entity-grid,.recent,.artists,.rows,.qpanel-list,.side-list,.chips,.lib-actions,.lib-chips)>:nth-child(n+11){--n:10}

  /* ─── Lo que aparece y se va ─── */
  .qpanel{animation-timing-function:var(--rd-sale);animation-duration:.32s}
  .acct-menu,.addpl-menu{transform-origin:top right;animation:rd-asoma .22s var(--rd-resorte) both}
  .ask[open] form,.bulk-dialog[open] .bulk-dialog-card{animation:rd-asoma .32s var(--rd-resorte) both}
  .ask[open]::backdrop,.bulk-dialog[open]::backdrop{animation:rd-fundido .25s ease both}
}

/* ─── Con puntero: lo que pasa al pasar por encima ─── */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  :is(.ico,.stage-btn,.sidebar-toggle,.side-add,.search-clear):is(:hover,:focus-visible) svg{animation:rd-salto .5s var(--rd-sale)}
  [data-act="next"]:is(:hover,:focus-visible) svg{animation-name:rd-adelante}
  [data-act="prev"]:is(:hover,:focus-visible) svg{animation-name:rd-atras}
  [data-act="repeat"]:is(:hover,:focus-visible) svg{animation:rd-vuelta .65s var(--rd-sale)}
  [data-act="shuffle"]:is(:hover,:focus-visible) svg{animation:rd-cruce .6s var(--rd-sale)}
  [aria-controls="qpanel"]:is(:hover,:focus-visible) svg,#addpl-btn:is(:hover,:focus-visible) svg{animation-name:rd-sube}
  /* El me gusta late al marcarlo: el puntero está encima justo cuando cambia */
  .fav[aria-pressed="true"]:is(:hover,:focus-visible) svg{animation:rd-latido .6s var(--rd-sale)}
  .feature-play:is(:hover,:focus-visible) svg,.lib-actions .primary:is(:hover,:focus-visible) svg{animation:rd-adelante .5s var(--rd-sale)}

  .card:hover,.entity-card:hover{translate:0 -4px}
  .card:hover .card-art img,.entity-card:hover .entity-image img{transform:scale(1.05)}
  .artist .artist-ph{transition:transform .5s var(--rd-resorte)}
  .row-art img{transition:scale .5s var(--rd-sale)}
  .row:hover .row-art img{scale:1.08}
  .qpanel .un i{transition:scale .5s var(--rd-sale)}
  .qpanel .un:hover i{scale:1.07}
  .feature::after{transition:rotate 1.2s var(--rd-sale), scale .8s var(--rd-resorte)}
  .feature:hover::after{rotate:24deg;scale:1.04}
  .feature:hover .feature-art{translate:0 -6px}
  .feature-play:hover{transform:translateY(-1px)}
}

/* ─── Con el dedo: los íconos se animan al cambiar de estado ─── */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  .fav[aria-pressed="true"] svg{animation:rd-latido .6s var(--rd-sale)}
  [data-act="repeat"][aria-pressed="true"] svg{animation:rd-vuelta .65s var(--rd-sale)}
  [data-act="shuffle"][aria-pressed="true"] svg{animation:rd-cruce .6s var(--rd-sale)}
  .stage-btn[aria-expanded="true"] svg,.stage-extras .ico.on svg{animation:rd-salto .5s var(--rd-sale)}
}

/* ─── Sólo en escritorio ─── */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  /* La barra lateral: el texto se asoma y la raya se desliza hasta el destino */
  .top-menu .nav-label{transition:translate .4s var(--rd-resorte)}
  .top-menu .tm-i:hover .nav-label{translate:4px 0}
  .nav-indicador{transition:translate .55s var(--rd-resorte), opacity .25s var(--rd-sale)}
  .top-listas .tm-i::after{transition:transform .35s var(--rd-resorte)}
  #stage-close::before{transition:rotate .45s var(--rd-resorte)}
  #stage-close:is(:hover,:focus-visible)::before{rotate:90deg}
  /* La cola se va como entró; stage.js la esconde al terminar */
  @keyframes qp-sale{to{opacity:0;transform:translateX(28px)}}
  .qpanel.saliendo{animation:qp-sale .22s var(--rd-sale) both;pointer-events:none}
  .bar .line-knob{scale:.4;transition:opacity .15s, scale .3s var(--rd-resorte)}
  .bar .line:is(:hover,.drag,:focus-visible) .line-knob{scale:1}
}

/* ─── Sólo en el teléfono ─── */
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  /* La vista grande sube desde la barra de lo que suena y baja al cerrarse.
     Una sola animación: stage.js la espera para esconderla. */
  @keyframes rd-vista-sube{from{transform:translateY(100%)}}
  @keyframes rd-vista-baja{to{transform:translateY(100%)}}
  .stage:not([hidden]){animation:rd-vista-sube .44s var(--rd-sale) both}
  .stage.is-closing{animation:rd-vista-baja .3s cubic-bezier(.5,0,.75,.2) both}
  /* Las hojas suben desde abajo, y la cola baja al cerrarse */
  @keyframes rd-hoja{from{opacity:0;translate:0 28px}}
  @keyframes qp-sale-movil{to{opacity:0;transform:translateY(24px)}}
  .qpanel{animation-name:rd-hoja;animation-timing-function:var(--rd-resorte);animation-duration:.42s}
  .qpanel.saliendo{animation:qp-sale-movil .22s var(--rd-sale) both;pointer-events:none}
  .addpl-menu{transform-origin:bottom center;animation:rd-hoja .4s var(--rd-resorte) both}
  .bulk-dialog[open] .bulk-dialog-card{animation:rd-hoja .4s var(--rd-resorte) both}
  /* Las pestañas: la raya se desliza y el ícono de la nueva salta */
  .tab-indicador{transition:translate .5s var(--rd-resorte), opacity .25s var(--rd-sale)}
  .tab-i.is-on svg{animation:rd-salto .5s var(--rd-sale)}
  /* La barra de lo que suena se hunde un poco al tocarla */
  .bar-now{transition:scale .2s var(--rd-sale)}
  .bar-now:active{scale:.98;transition-duration:.08s}
}

/* ═══════════════════════════════════════════════════════════
   6 · PERFIL — la cuenta y los ajustes (ui/vista-perfil.js)
   ═══════════════════════════════════════════════════════════ */

/* La foto de la cuenta: en la pestaña, al pie de la barra lateral y en la
   cabecera. Las iniciales hasta que llega (ui/sesion.js, pintarAvatar). */
.perfil-av{display:grid;place-items:center;flex:none;border-radius:50%;overflow:hidden;
  background:var(--surface-2) center/cover no-repeat;color:var(--text-2);font-weight:700;letter-spacing:0;line-height:1}
.perfil-av--tab{width:24px;height:24px;font-size:9.5px;box-shadow:0 0 0 1.5px currentColor}
.tab-i.is-on .perfil-av--tab{box-shadow:0 0 0 2px var(--text)}
.perfil-av--nav{width:24px;height:24px;font-size:9.5px;box-shadow:0 0 0 1.5px rgba(var(--glass),.18)}
.top-menu .tm-perfil[aria-current="page"] .perfil-av--nav{box-shadow:0 0 0 2px var(--text)}
.perfil-av--grande{width:160px;height:160px;font-size:52px;box-shadow:0 26px 50px -22px rgba(0,0,0,.6), 0 0 0 4px rgba(var(--glass),.08)}
.perfil-head{align-items:center}
.perfil-head .lib-meta{overflow-wrap:anywhere}

/* Cada sección: su título y una tarjeta de vidrio con las filas */
.ajustes-sec{max-width:820px;margin:0 0 36px}
.ajustes-sec h3{margin:0 0 14px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.ajustes-lista{display:flex;flex-direction:column;border-radius:16px;background:rgba(var(--glass),.05);overflow:hidden}
.ajuste{display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 16px}
.ajuste+.ajuste{border-top:1px solid rgba(var(--glass),.07)}
.ajuste-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;
  background:rgba(var(--glass),.07);color:var(--text-2)}
.ajuste-ico svg{width:19px;height:19px}
.ajuste-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ajuste-t strong{font-size:14.5px;font-weight:600;color:var(--text)}
.ajuste-t small{font-size:12.5px;line-height:1.45;color:var(--text-2)}
.ajuste-v{flex:none;font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ajuste-b{flex:none;height:36px;padding:0 16px;border:0;border-radius:99px;background:var(--rd-btn);
  color:var(--text);font-size:13px;font-weight:650;white-space:nowrap}
.ajuste-b:hover{background:var(--rd-btn-2)}
.ajuste-b.primary{background:var(--text);color:var(--card)}
.ajuste-b.peligro{color:#f43f5e}
.ajustes-nota{margin:12px 2px 0;font-size:13px;line-height:1.5;color:var(--text-2)}
.ajustes-nota:first-child{margin-top:0}

/* El tema: dos tarjetas con una muestra de cada uno; la elegida, con su aro */
.tema-elegir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:460px}
.tema-elegir button{display:flex;flex-direction:column;gap:10px;padding:10px;border:0;border-radius:16px;
  background:rgba(var(--glass),.05);color:var(--text-2);text-align:left;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .25s var(--rd-sale), background-color .2s, color .2s}
.tema-elegir button:hover{background:rgba(var(--glass),.08)}
.tema-elegir button[aria-checked="true"]{color:var(--text);box-shadow:inset 0 0 0 2px var(--text)}
.tema-muestra{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;height:74px;padding:12px;border-radius:10px}
.tema-muestra i{display:block;height:7px;border-radius:4px}
.tema-muestra i:nth-child(1){width:46%}.tema-muestra i:nth-child(2){width:72%}.tema-muestra i:nth-child(3){width:58%;opacity:.6}
.tema-muestra--oscuro{background:radial-gradient(70% 80% at 100% 0%, rgba(62,50,40,.9), transparent 72%), #1f1f1f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tema-muestra--oscuro i{background:rgba(255,255,255,.82)}
.tema-muestra--claro{background:radial-gradient(70% 80% at 100% 0%, rgba(214,192,160,.45), transparent 72%), #f8f8f7;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tema-muestra--claro i{background:rgba(22,22,22,.78)}
.tema-nombre{display:flex;align-items:center;gap:8px;padding:0 4px 2px;font-size:14px;font-weight:650}
.tema-nombre svg{width:17px;height:17px}

/* Lo escuchado: cuadros con el número grande, y el artista y la canción */
/* Arriba el tiempo, en dos; abajo los números, que se reparten la fila: los
   de la última, si sobran, se estiran en lugar de dejar un hueco */
.stats-grid{display:flex;flex-wrap:wrap;gap:10px}
.stats-grid>.stat{flex:1 1 112px}
.stats-grid+.stats-grid{margin-top:10px}
.stats-grid--tiempo>.stat{flex-basis:220px}
.stat{display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px;border-radius:16px;background:rgba(var(--glass),.05)}
.stat-v{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat--ancho .stat-v{font-size:30px}
.stat-l{font-size:12.5px;font-weight:550;color:var(--text-2)}
.stats-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:10px}
.stats-fav{display:flex;align-items:center;gap:14px;min-width:0;padding:12px;border:0;border-radius:16px;
  background:rgba(var(--glass),.05);color:inherit;text-align:left;font:inherit}
button.stats-fav{cursor:pointer}
button.stats-fav:hover{background:rgba(var(--glass),.08)}
.stats-img{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:10px;
  background:var(--surface-2) center/cover no-repeat;color:var(--text-3)}
.stats-img svg{width:24px;height:24px}
.stats-img--redonda{border-radius:50%}
.stats-fav-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.stats-fav-t small{font-size:12px;font-weight:600;color:var(--text-2)}
.stats-fav-t strong{font-size:15.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats-fav-t em{font-style:normal;font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* En la barra lateral de sólo texto la foto sí se ve: es el ícono del Perfil */
@media (min-width:861px){
  .top-menu .tm-perfil{gap:12px}
  .menu-mini .top-menu .tm-perfil .perfil-av--nav{width:26px;height:26px}
}

@media (max-width:860px){
  .perfil-av--grande{width:96px;height:96px;font-size:32px}
  .ajustes-sec{margin-bottom:30px}
  .ajustes-sec h3{font-size:18px}
  .ajuste{gap:12px;padding:12px 14px}
  .ajuste-b{height:34px;padding:0 14px}
  .stats-grid{gap:8px}
  .stats-grid>.stat{flex-basis:calc(33.333% - 6px)}
  .stats-grid+.stats-grid{margin-top:8px}
  .stats-grid--tiempo>.stat{flex-basis:calc(50% - 4px)}
  .stat{padding:14px}
  .stat-v{font-size:21px}
  .stat--ancho .stat-v{font-size:26px}
  .stats-top{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:8px}
}

/* ─── El cambio de tema ───
   Con View Transitions, el tema nuevo entra en un círculo que se abre desde
   donde se tocó (vista-perfil.js anima el clip-path): sin el fundido de
   siempre debajo. Sin ellas, los colores se cruzan en un instante. */
:root.tema-revelando::view-transition-old(root),
:root.tema-revelando::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.tema-revelando::view-transition-old(root){z-index:1}
:root.tema-revelando::view-transition-new(root){z-index:2}
:root.tema-cruzando,:root.tema-cruzando *,:root.tema-cruzando *::before,:root.tema-cruzando *::after{
  transition:background-color .4s var(--rd-sale), color .4s var(--rd-sale), border-color .4s var(--rd-sale),
    fill .4s var(--rd-sale), stroke .4s var(--rd-sale), box-shadow .4s var(--rd-sale) !important}

/* ═══════════════ Playlists publicadas ═══════════════ */

/* ─── Explorar con algo escrito: cuatro pestañas y nada más arriba ─── */
[data-view="buscar"].con-consulta .search-head{display:none}
.search-tabs{display:flex;gap:8px;margin:0 0 22px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.search-tabs[hidden]{display:none}
.search-tabs::-webkit-scrollbar{display:none}
.search-tabs button{flex:none;height:auto;padding:9px 18px;border:0;border-radius:99px;background:var(--rd-btn);
  color:var(--text-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.search-tabs button:hover{background:var(--rd-btn-2);color:var(--text)}
.search-tabs button[aria-selected="true"]{background:var(--text);color:var(--card)}
.search-meta:empty{display:none}

/* La tarjeta de una playlist: como la de una canción, con sus hashtags */
.lista-card{position:relative;padding:0;border:0;font:inherit;text-align:left;cursor:pointer;color:inherit}
.lista-card .card-art{display:grid;place-items:center;color:var(--text-3)}
.lista-card .card-art>svg{width:34%;height:34%}
.lista-card .card-a{right:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-card .card-tags{position:absolute;z-index:2;left:14px;right:14px;bottom:30px;pointer-events:none;
  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─── Las filas, sin número ───
   El número a la izquierda no decía nada que no dijera el orden. La que
   suena se sigue viendo por el fondo de la fila. */
.row:not(.rrow){grid-template-columns:46px minmax(0,1fr) auto auto}
.rows.seleccionando .row{grid-template-columns:28px 46px minmax(0,1fr)}
@media (max-width:860px){
  .row:not(.rrow){grid-template-columns:56px minmax(0,1fr)}
  .rows.seleccionando .row{grid-template-columns:24px 56px minmax(0,1fr)}
}

/* ─── La cabecera de una lista: descripción y hashtags ─── */
.lib-volver{margin:0 0 18px}
.lib-volver[hidden]{display:none}
.lib-desc{margin:2px 0 0;max-width:62ch;font-size:14px;line-height:1.5;color:var(--text-2);white-space:pre-line}
.lib-desc[hidden],.lib-tags[hidden]{display:none}
.lib-tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.lib-tag{padding:4px 10px;border:0;border-radius:99px;background:var(--rd-btn);color:var(--text-2);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.lib-tag:hover{background:var(--rd-btn-2);color:var(--text)}

/* ─── Ajustes: las opciones que borran algo, en rojo ─── */
.addpl-menu button.peligro,.addpl-menu button.peligro svg,.lib-actions button.peligro{color:#e5484d}
.addpl-sin-tapa{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:7px;
  background:var(--rd-btn);color:var(--text-3)}
.addpl-sin-tapa svg{width:18px;height:18px}

/* ─── La sección de publicar ─── */
.pub-volver{margin:0 0 18px}
.pub-head{display:flex;flex-direction:column;gap:6px;margin:0 0 26px}
.pub-head .lib-title{overflow-wrap:anywhere}
.pub-form{display:flex;flex-direction:column;gap:22px;max-width:720px}
.pub-campo{display:flex;flex-direction:column;gap:8px}
.pub-rot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;color:var(--text)}
.pub-cuenta{font-size:12px;font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
.pub-input{width:100%;padding:12px 14px;border:1px solid transparent;border-radius:12px;background:var(--rd-btn);
  color:var(--text);font:inherit;font-size:15px;line-height:1.45;resize:vertical}
.pub-input:focus-visible,.pub-tags:focus-within,.pub-buscar:focus-within{outline:none;border-color:rgba(var(--glass),.35);background:var(--rd-btn-2)}
.pub-input::placeholder,.pub-tag-input::placeholder,.pub-buscar input::placeholder{color:var(--text-3)}
.pub-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:48px;padding:8px 10px;
  border:1px solid transparent;border-radius:12px;background:var(--rd-btn);cursor:text}
.pub-tag{display:inline-flex;align-items:center;gap:2px;padding:4px 4px 4px 11px;border-radius:99px;
  background:var(--text);color:var(--card);font-size:13px;font-weight:600}
.pub-tag button{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;
  background:none;color:inherit;cursor:pointer;opacity:.75}
.pub-tag button:hover{opacity:1}
.pub-tag svg{width:13px;height:13px}
.pub-tag-input{flex:1;min-width:120px;height:30px;padding:0 4px;border:0;background:none;color:var(--text);font:inherit;font-size:15px;outline:none}
.pub-tag-input[hidden]{display:none}
.pub-ayuda,.pub-nota{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.pub-nota{padding:8px 2px}
.pub-canciones{display:flex;flex-direction:column;gap:10px}
.pub-sub{display:flex;align-items:baseline;gap:8px;margin:6px 0 0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.pub-sub small{font-size:13px;font-weight:600;color:var(--text-3)}
.pub-buscar{display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid transparent;border-radius:12px;background:var(--rd-btn)}
.pub-buscar svg{width:18px;height:18px;flex:none;color:var(--text-3)}
.pub-buscar input{flex:1;min-width:0;height:46px;border:0;background:none;color:var(--text);font:inherit;font-size:15px;outline:none}
.pub-resultados:not(:empty){display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:12px;background:rgba(var(--glass),.04)}
.pub-lista{display:flex;flex-direction:column;gap:2px}
.pub-tema{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:14px;padding:6px 8px;border-radius:10px}
.pub-tema:hover{background:rgba(var(--glass),.06)}
.pub-arte{display:grid;place-items:center;width:46px;height:46px;overflow:hidden;border-radius:6px;background:var(--rd-btn);color:var(--text-3)}
.pub-arte img{width:100%;height:100%;object-fit:cover;display:block}
.pub-arte svg{width:20px;height:20px}
.pub-m{display:flex;flex-direction:column;gap:2px;min-width:0}
.pub-m strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-m small{font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-boton{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;
  background:var(--rd-btn);color:var(--text-2);cursor:pointer;transition:background .15s,color .15s}
.pub-boton:hover{background:var(--rd-btn-2);color:var(--text)}
.pub-boton.esta{background:var(--text);color:var(--card)}
.pub-boton svg{width:17px;height:17px}
.pub-acciones{padding:6px 0 0}
.pub-zona{display:flex;flex-direction:column;gap:12px;margin-top:6px;padding-top:20px;border-top:1px solid rgba(var(--glass),.1)}
.pub-zona p{margin:0;font-size:13px;line-height:1.5;color:var(--text-2)}
.pub-zona .lib-actions{padding:0}
@media (max-width:860px){
  .pub-input,.pub-tag-input,.pub-buscar input{font-size:16px}   /* iOS no agranda la página al enfocar */
  .pub-tema,.pub-tema:hover{grid-template-columns:52px minmax(0,1fr) auto;padding:6px 2px;background:none}
  .pub-arte{width:52px;height:52px}
  .pub-m strong{font-size:15px}
  .pub-acciones button,.pub-zona .lib-actions button{flex:1}
  /* Las cuatro entran en 375 px: se reparten el ancho */
  .search-tabs{gap:6px;margin-bottom:18px}
  .search-tabs button{flex:1 1 auto;padding:9px 8px}
}

/* ─── Explorar: las búsquedas recientes, en lugar de los artistas sugeridos ─── */
.chips[hidden],.recientes[hidden]{display:none}
.recientes{display:flex;flex-direction:column;gap:6px;max-width:640px;margin-top:6px}
.recientes-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.recientes-h h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.recientes-borrar{padding:6px 10px;border:0;border-radius:99px;background:none;color:var(--text-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.recientes-borrar:hover{background:var(--rd-btn);color:var(--text)}
.recientes-lista{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.recientes-lista li{display:flex;align-items:center;gap:4px;border-radius:10px}
.recientes-lista li:hover{background:rgba(var(--glass),.06)}
.reciente{flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:48px;padding:0 10px;border:0;background:none;
  color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.reciente svg{width:18px;height:18px;flex:none;color:var(--text-3)}
.reciente span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reciente-x{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;
  background:none;color:var(--text-3);cursor:pointer}
.reciente-x:hover{background:var(--rd-btn);color:var(--text)}
.reciente-x svg{width:16px;height:16px}

/* ─── Publicar: «Guardar cambios» apagado mientras no haya cambios, y el buscador sobre el teclado ─── */
.pub-acciones button.primary:disabled{background:var(--rd-btn);color:var(--text-3);opacity:1;cursor:default;box-shadow:none}
.pub-acciones button.primary:disabled:hover{background:var(--rd-btn);transform:none}
.pub-buscar{scroll-margin-top:14px}
.buscando-temas .pub-form{padding-bottom:70vh}

/* ─── Perfil: el nombre de usuario ─── */
.usuario-caja{display:flex;flex-direction:column}
.usuario-caja+.ajuste{border-top:1px solid rgba(var(--glass),.07)}
/* Dentro de la tarjeta, alineado con el texto de la fila (16 + 36 del ícono + 14) */
.usuario-editor{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px 66px}
.usuario-campo{position:relative;display:block;max-width:360px}
.usuario-campo .pub-input{padding-right:58px}
.usuario-campo .pub-cuenta{position:absolute;right:14px;top:50%;translate:0 -50%;pointer-events:none}
.usuario-error{margin:0;font-size:13px;color:#e5484d}
.usuario-error[hidden]{display:none}
.usuario-acciones{display:flex;flex-wrap:wrap;gap:8px}
.usuario-acciones .ajuste-b:disabled{opacity:.45;cursor:default}
@media (max-width:860px){
  .usuario-editor{padding:0 14px 14px}
  .usuario-campo{max-width:none}
}

/* ═══════════════════════════════════════════════════════════
   Apoyar el proyecto (ver ui/apoyo.js)
   ═══════════════════════════════════════════════════════════ */
:root{--oro:#a86b0c;--oro-claro:#f4c04a;--oro-tinta:#2b1d00}
:root[data-theme="dark"]{--oro:#f2b33d}

/* El disco de oro junto a un nombre: del tamaño de la letra, con el disco
   apenas teñido */
.insignia-apoyo{display:inline-grid;place-items:center;width:1em;height:1em;margin-left:.3em;
  vertical-align:-.14em;color:var(--oro);flex:none}
.insignia-apoyo svg{display:block;width:100%;height:100%}
.insignia-apoyo svg>:first-child{fill:color-mix(in oklab, currentColor 26%, transparent)}
.lib-title .insignia-apoyo{width:.8em;height:.8em;margin-left:.22em;vertical-align:-.08em}
/* Sobre la carátula el texto es blanco: el oro claro se lee mejor */
.card-a .insignia-apoyo{color:var(--oro-claro)}
.ajuste-ico .insignia-apoyo{width:19px;height:19px;margin:0}

/* El botón de Inicio: arriba a la derecha y fijo al bajar. El ancla no ocupa
   lugar —alto cero, encima del título—; el botón cuelga de ella */
.apoyar-ancla{position:sticky;top:10px;height:0;align-self:flex-end;z-index:20;order:-1}
.apoyar-ancla[hidden]{display:none}
.apoyar-fijo{position:absolute;right:0;top:0;display:inline-flex;align-items:center;gap:7px;height:38px;
  padding:0 16px 0 12px;border-radius:99px;background:var(--oro-claro);color:var(--oro-tinta);
  font-size:14px;font-weight:750;text-decoration:none;white-space:nowrap;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);
  transition:transform .2s var(--rd-sale),box-shadow .2s var(--rd-sale)}
.apoyar-fijo:hover{transform:translateY(-1px)}
.apoyar-fijo:active{transform:scale(.97)}
.apoyar-fijo svg{width:19px;height:19px;flex:none}
.apoyar-fijo [data-icono="discoDeOro"],.apoyar-fijo.ya-apoya [data-icono="cafe"]{display:none}
.apoyar-fijo.ya-apoya [data-icono="discoDeOro"]{display:block}
@media (max-width:860px){
  .apoyar-fijo{height:36px;padding:0 14px 0 11px;font-size:13.5px}
}


/* Lo que sigue al bajar en Inicio */
.rails-mas:empty{display:none}
.inicio-mas{display:flex;justify-content:center;padding:4px 0 36px;font-size:13px;color:var(--text-2)}
.inicio-mas[hidden]{display:none}

/* Los agradecimientos de Perfil */
.gracias{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.gracias li{display:inline-flex;align-items:center;padding:7px 13px;border-radius:99px;
  background:rgba(var(--glass),.07);font-size:14px;font-weight:650}
.con-insignia{white-space:nowrap}

/* Para quien opera el servidor: el disco de oro a mano (ver ui/apoyo.js) */
#perfil-admin-sec[hidden]{display:none}
.admin-apoyo{display:flex;flex-direction:column;gap:10px;max-width:520px;margin-top:12px}
.admin-apoyo-fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px}
.admin-ultimas{display:flex;flex-direction:column;gap:2px;margin:16px 0 0;padding:0;list-style:none}
.admin-ultimas li{display:flex;flex-direction:column;gap:2px;padding:9px 2px;border-top:1px solid rgba(var(--glass),.07)}
.admin-ultimas li:first-child{border-top:0}
.admin-ultimas strong{font-size:14px;font-weight:650;overflow-wrap:anywhere}
.admin-ultimas span{font-size:12.5px;color:var(--text-2)}
@media (max-width:860px){ .admin-apoyo-fila{grid-template-columns:minmax(0,1fr)} }