:root {
    --wz-ink: #180b0e;
    --wz-wine: #5c1025;
    --wz-red: #a91d33;
    --wz-gold: #f4bd45;
    --wz-cream: #fff1ca;
    --wz-mint: #45e0c1;
    --wz-panel: rgba(28, 12, 18, .92);
    /* Marco naranjo de la pantalla. El punto de luz corre por FUERA de él, así
       que el aro exterior queda reservado para la luz y el marco se dibuja
       hacia adentro. Grosor y radio van juntos: el radio interior es el
       exterior menos el grosor, o la esquina se ve mordida. */
    --wz-marco: 3px;
    --wz-radio-pantalla: 20px;
    --wz-line: rgba(255, 224, 155, .25);
    /* Alto común de los tres botones de acción de la cola (vaciar, guardar y
       Sorpréndeme): solo deben diferenciarse en el ancho. */
    --wz-alto-accion: 42px;
    /* Compás de la máquina: de acá salen el golpe del disco y el destello de
       los neones, para que vayan sincronizados. .6s ≈ 100 pulsos por minuto,
       un ranchera de tempo medio. Bajarlo acelera el beat, subirlo lo calma;
       es el único número que hay que tocar. */
    --wz-compas: .6s;
    --wz-ciclo-neon: calc(var(--wz-compas) * 3);
    /* Cuánto crece el disco en cada golpe: 1.06 = 6% más grande. Subirlo marca
       más el beat, bajarlo lo hace apenas perceptible. */
    --wz-golpe-escala: 1.04;
    /* Hasta dónde se abre el halo antes de apagarse, como múltiplo del disco.
       ⚠ Tiene que ser MAYOR a 1: con un valor menor el aro se encoge hacia el
       centro en vez de salir. 1.5 = llega a una vez y media el disco. */
    --wz-halo-alcance: 1.25;
    /* Qué tan marcado sale el halo: .45 discreto, 1 a full. */
    --wz-halo-fuerza: .45;
    /* Lado de las portadas del carrusel. Todo lo demás del coverflow se deriva
       de acá: el ancho del escenario en CSS y la separación y profundidad 3D
       en el JS. Sube en pantallas anchas para no quedar chico junto al video. */
    --wz-portada: 186px;
}

body.page-wurlitzer {
    min-width: 320px;
    margin: 0;
    color: var(--wz-cream);
    background:
        radial-gradient(circle at 50% -10%, rgba(244, 189, 69, .2), transparent 32rem),
        radial-gradient(circle at 10% 55%, rgba(169, 29, 51, .22), transparent 38rem),
        #10070a;
    font-family: "Nunito Sans", sans-serif;
}

.page-wurlitzer .pr-loading-global { z-index: 5000; }

.wz-app {
    min-height: 100vh;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 26px 26px;
}

.wz-topbar {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 10px clamp(16px, 3vw, 48px);
    border-bottom: 1px solid rgba(255, 222, 143, .16);
    background: rgba(15, 6, 9, .88);
    backdrop-filter: blur(12px);
}

.wz-brand,
.wz-exit {
    display: inline-flex;
    align-items: center;
    gap:6px;
    color: var(--wz-cream);
    text-decoration: none;
    font-weight: 800;
}

.wz-brand img { width: auto; height: 34px; object-fit: contain; }
.wz-brand span { padding-left: 12px; border-left: 1px solid var(--wz-line); }
.wz-topbar__actions { display: flex; align-items: center; gap: 20px; }
.wz-user { color: rgba(255, 241, 202, .72); font-size: .9rem; }
.wz-exit { padding: 8px 13px; }
.wz-exit:hover, .wz-brand:hover { color: var(--wz-gold); }

/* Hamburguesa: abre el mismo offcanvas del header global (_MenuMovil), con el
   aspecto de la rockola en vez del estilo claro del portal. */
.wz-burger {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--wz-line);
    border-radius: 12px;
    color: var(--wz-cream);
    background: rgba(255,255,255,.045);
    font-size: 1.25rem;
    line-height: 1;
}
.wz-burger:hover, .wz-burger:focus-visible { color: var(--wz-ink); background: var(--wz-gold); border-color: var(--wz-gold); }

.wz-stage { padding: clamp(22px, 4vw, 54px) clamp(10px, 2.7vw, 48px) 44px; }

.wz-machine {
    position: relative;
    width: min(1640px, 100%);
    margin: 0 auto;
    padding: clamp(22px, 3vw, 46px);
    overflow: hidden;
    border: 3px solid #7b3f25;
    border-radius: 190px 190px 42px 42px;
    background:
        linear-gradient(115deg, rgba(255,255,255,.08), transparent 25%),
        linear-gradient(180deg, #4d1721 0, #260d14 46%, #17090e 100%);
    box-shadow:
        0 0 0 7px #1c0a0d,
        0 0 0 10px #bd733a,
        0 28px 80px rgba(0,0,0,.58),
        inset 0 0 70px rgba(0,0,0,.7);
}

.wz-machine::before,
.wz-machine::after {
    content: "";
    position: absolute;
    inset: 22px;
    pointer-events: none;
    border: 1px solid rgba(255, 213, 111, .26);
    border-radius: 164px 164px 28px 28px;
}

.wz-machine::after {
    inset: auto 0 0;
    height: 24%;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-radius: 0;
    background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.018) 11px 12px);
}

.wz-machine__arch {
    position: absolute;
    inset: 17px 24px auto;
    height: 255px;
    pointer-events: none;
}

.wz-neon {
    position: absolute;
    inset: 0;
    border: 5px solid var(--wz-gold);
    border-bottom: 0;
    border-radius: 155px 155px 0 0;
    opacity: .8;
    box-shadow: 0 0 8px var(--wz-gold), 0 0 24px rgba(244,189,69,.5), inset 0 0 16px rgba(244,189,69,.35);
}

.wz-neon--two { inset: 12px; border-color: var(--wz-red); box-shadow: 0 0 10px var(--wz-red), 0 0 24px rgba(169,29,51,.6); }
.wz-neon--three { inset: 24px; border-color: var(--wz-mint); box-shadow: 0 0 8px var(--wz-mint), 0 0 20px rgba(69,224,193,.45); }

/* Los tres arcos destellan en cadena de adentro hacia afuera —menta, rojo,
   dorado— y cada destello cae justo sobre un golpe del disco. Para que vayan
   a la par, el ciclo dura exactamente 3 compases y el desfase entre arcos es
   1 compás: así los tres siempre pegan en el tiempo, no entre medio.
   Los retardos son negativos para que al cargar ya estén repartidos en el
   ciclo en vez de encenderse los tres juntos. */
/* El momento del destello es `retardo mod ciclo`, así que los negativos se
   leen al revés de lo que uno esperaría: menta arranca en 0, y para que rojo
   caiga un compás después necesita -2 compases, y dorado -1. */
.wz-neon { animation: wz-neon-latido var(--wz-ciclo-neon) ease-out infinite; animation-delay: calc(var(--wz-compas) * -1); }
.wz-neon--two { animation-delay: calc(var(--wz-compas) * -2); }
.wz-neon--three { animation-delay: 0s; }
/* El pico va en el 0% y no en la mitad: así el retardo negativo equivale
   directo al momento del golpe y la cuenta queda legible. */
@keyframes wz-neon-latido {
    0% { opacity: 1; }
    55%, 100% { opacity: .34; }
}

.wz-marquee {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 5vw, 80px);
    min-height: 160px;
    padding: 25px 12px 18px;
    text-align: center;
}

.wz-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--wz-gold);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.wz-marquee h1 {
    margin: 0;
    color: #fff7da;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(2.15rem, 5vw, 5.2rem);
    line-height: .95;
    letter-spacing: -.055em;
}

.wz-marquee__stars { color: var(--wz-gold); font-size: clamp(1rem, 2vw, 1.8rem); letter-spacing: .5em; }

.wz-notice,
.wz-shared {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto 18px;
    padding: 11px 18px;
    border: 1px solid rgba(244, 189, 69, .45);
    border-radius: 13px;
    color: #1d1010;
    background: #f6cc72;
    text-align: center;
}

.wz-notice--upcoming { background: #f0d9a3; }
.wz-shared { color: var(--wz-cream); background: rgba(69,224,193,.1); border-color: rgba(69,224,193,.5); }

.wz-console {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(250px, .82fr) minmax(420px, 1.45fr) minmax(250px, .82fr);
    gap: clamp(12px, 1.6vw, 24px);
    align-items: stretch;
}

.wz-panel,
.wz-player-panel {
    min-width: 0;
    border: 1px solid var(--wz-line);
    border-radius: 20px;
    background: var(--wz-panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 35px rgba(0,0,0,.28);
}

.wz-panel { display: flex; flex-direction: column; padding: 18px; }
.wz-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.wz-panel__heading > div { display: flex; align-items: center; gap: 10px; }
    .wz-panel__heading h2 {
        margin: 0;
        font-size: 1rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--wz-gold);
    }
.wz-catalog-title__mobile { display: none; }
.wz-queue-heading-tools { display: flex; align-items: center; }
.wz-queue-order { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(244,189,69,.3); border-radius: 50%; color: var(--wz-gold); background: rgba(244,189,69,.06); font-size: .78rem; }
.wz-queue-order:hover:not(:disabled), .wz-queue-order[aria-pressed="true"] { color: #27100f; background: var(--wz-gold); }
.wz-queue-order:disabled { opacity: .32; cursor: not-allowed; }

/* ---------- Buscador con desplegable propio ---------- */
.wz-searchbox { position: relative; z-index: 6; margin-bottom: 9px; }
/* Abierto tiene que ganarle al video, a los discos y a la hoja de canciones. */
.wz-app.is-buscando .wz-searchbox { z-index: 60; }
.wz-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: min(58vh, 420px);
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(244,189,69,.32);
    border-radius: 12px;
    background: #2a1017;
    box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.wz-results[hidden] { display: none; }
.wz-results__group { padding: 8px 8px 5px; color: rgba(255,241,202,.5); font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.wz-hit { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; margin-bottom: 4px; padding: 6px; border: 0; border-radius: 10px; color: var(--wz-cream); background: rgba(0,0,0,.26); text-align: left; }
.wz-hit:hover:not(:disabled), .wz-hit:focus-visible { background: rgba(244,189,69,.16); }
.wz-hit:disabled { opacity: .45; }
/* La tapa es la identidad del resultado: en celular no cabe el nombre de la
   banda en una línea, así que la foto del disco es lo que lo distingue. */
.wz-hit__cover { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 2px solid #0c0a0b; border-radius: 50%; color: var(--wz-gold); background: repeating-radial-gradient(circle, #211c1d 0 2px, #0e0c0d 3px 4px); }
.wz-hit__cover img { width: 100%; height: 100%; object-fit: cover; }
.wz-hit__info { min-width: 0; }
.wz-hit__info strong { display: block; overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.wz-hit__info span { display: block; overflow: hidden; color: rgba(255,241,202,.62); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.wz-hit__go { color: rgba(244,189,69,.72); font-size: .82rem; }
.wz-song__go { color: rgba(244,189,69,.62); font-size: .82rem; }
/* Confirmación de encolado: el "+" se vuelve un tilde verde y da un saltito.
   Solo aparece cuando la canción entró de verdad; si se rechazó por repetida
   o por el tope de 100, no se marca nada y el aviso explica el motivo. */
.wz-hit__go, .wz-song__go { transition: color .18s ease; }
.wz-hit.is-agregada .wz-hit__go,
.wz-song.is-agregada .wz-song__go {
    color: var(--wz-mint);
    animation: wz-tilde-ok .5s ease;
}
@keyframes wz-tilde-ok {
    0% { transform: scale(.4); opacity: .2; }
    55% { transform: scale(1.45); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.wz-results__vacio { display: grid; gap: 4px; padding: 22px 12px; color: rgba(255,241,202,.6); font-size: .75rem; text-align: center; }
.wz-results__vacio i { color: rgba(244,189,69,.6); font-size: 1.4rem; }
.wz-results__vacio strong { color: var(--wz-cream); font-size: .82rem; }

.wz-search { display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--wz-line); border-radius: 10px; background: rgba(255,255,255,.045); }
.wz-search:focus-within { border-color: var(--wz-gold); box-shadow: 0 0 0 3px rgba(244,189,69,.12); }
.wz-search input { width: 100%; min-width: 0; padding: 11px 0; border: 0; outline: 0; color: var(--wz-cream); background: transparent; }
.wz-search input::placeholder { color: rgba(255,241,202,.48); }
.wz-band-filter { margin: 2px 0 13px; }
.wz-band-filter__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.wz-band-filter__heading span { color: rgba(255,241,202,.72); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.wz-band-filter__heading small { color: rgba(255,241,202,.4); font-size: .62rem; }
.wz-band-rail { position: relative; display: block; min-height: calc(var(--wz-portada) + 46px); }
/* El escenario del coverflow se topa a 324px y se centra. Sin tope, en un
   panel ancho (tablet: la cola ocupa todo el ancho) entran portadas que están
   a dos o más posiciones del centro, y esas se giran más de 90°: quedan de
   espaldas y el navegador las dibuja espejadas. Con el tope siempre se ve la
   misma terna —activa más dos asomando— en cualquier pantalla. */
.wz-band-track { display: block; width: 100%; min-width: 0; max-width: calc(var(--wz-portada) * 1.742); margin-inline: auto; padding: 12px 0 14px; overflow: hidden; }
.wz-band-track .swiper-wrapper { height: auto; align-items: flex-start; }
.wz-band-track .swiper-slide { height: auto; }
.wz-band-track:focus-visible { outline: 1px solid var(--wz-gold); outline-offset: 3px; border-radius: 8px; }
.wz-band-nav { position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; width: 31px; height: 56px; padding: 0; border: 1px solid rgba(244,189,69,.22); border-radius: 999px; color: var(--wz-gold); background: rgba(244,189,69,.06); transform: translateY(-50%); }
.wz-band-nav.js-wz-band-prev { left: 0; }
.wz-band-nav.js-wz-band-next { right: 0; }
.wz-band-nav:hover { color: var(--wz-ink); background: var(--wz-gold); }
.wz-band { flex: 0 0 auto; width: var(--wz-portada); padding: 0; border: 0; color: rgba(255,241,202,.58); background: transparent; scroll-snap-align: center; text-align: center; }
.wz-band[hidden] { display: none; }
/* Portadas cuadradas tipo rockola, iguales en celular y escritorio. El disco
   redondo que había acá se confundía con el plato giratorio de play, que ahora
   es el mismo control en las dos vistas. */
.wz-band__disc { position: relative; display: grid; place-items: center; width: var(--wz-portada); height: var(--wz-portada); margin: 0 auto 8px; overflow: hidden; border: 3px solid #080608; border-radius: 14px; color: var(--wz-gold); background: #140d10; box-shadow: 0 9px 23px rgba(0,0,0,.52); transition: border-color .2s, box-shadow .2s; }
.wz-band__disc::before { content: ""; position: absolute; z-index: 2; inset: 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; pointer-events: none; }
.wz-band__disc img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.wz-band__disc > i { position: relative; z-index: 1; font-size: 3.5rem; }
.wz-band__disc--all { background: repeating-radial-gradient(circle, #612033 0 4px, #211014 5px 8px); }
/* El eje central era del disco redondo: en una portada cuadrada no va. */
.wz-band__hub { display: none; }
.wz-band__name { display: block; overflow: hidden; color: inherit; font-size: .78rem; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; margin-bottom:5px}
/* visibility y no display: así las portadas laterales conservan el hueco del
   rótulo y siguen alineadas con la activa. */
.swiper-slide:not(.swiper-slide-active) .wz-band__name { visibility: hidden; }
.wz-band.is-active { color: var(--wz-gold); }
/* Ni aro dorado ni brillo en la activa: estar adelante y de frente ya la
   distingue. Tampoco gira: el que gira es el plato de play. */
.wz-band:hover .wz-band__disc,
.wz-band.is-active .wz-band__disc,
.wz-band.is-current-song .wz-band__disc,
.wz-band.is-current-song.is-playing .wz-band__disc {
    transform: none;
    border-color: #080608;
    box-shadow: 0 9px 23px rgba(0,0,0,.52);
    animation: none;
}
.wz-band-empty { position: absolute; z-index: 3; inset: 0 38px; display: grid; place-items: center; padding: 10px 4px; color: rgba(255,241,202,.58); font-size: .75rem; text-align: center; }
.wz-band-empty[hidden], .wz-band-prompt[hidden] { display: none; }
.wz-mobile-song-sheet { display: none; }

.wz-song-list,
.wz-queue-list {
    overflow-y: auto;
    scrollbar-color: var(--wz-gold) rgba(255,255,255,.05);
    scrollbar-width: thin;
}

.wz-song-list {
    min-height: 250px;
    max-height: 380px;
    padding-right: 7px;
    scrollbar-gutter: stable;
}
.wz-song-list__heading { display: none; }

.wz-queue-list {
    min-height: 0;
    max-height: 222px;
    scrollbar-gutter: stable;
}

.wz-song {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: inherit;
    background: rgba(255,255,255,.035);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s;
}

.wz-song:hover { border-color: rgba(244,189,69,.35); background: rgba(255,255,255,.065); transform: translateY(-1px); }
.wz-song:focus-visible { outline: 2px solid var(--wz-gold); outline-offset: 2px; border-color: var(--wz-gold); }
.wz-song:active:not(:disabled) { transform: translateY(0) scale(.99); }
.wz-song:disabled { opacity: .42; cursor: not-allowed; }
.wz-song[hidden] { display: none; }
.wz-song__cover { position: relative; display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden; border-radius: 9px; color: var(--wz-gold); background: radial-gradient(circle, #6e2332, #271016 70%); }
.wz-song__cover i { font-size: 1.35rem; }
.wz-song__info { min-width: 0; }
.wz-song__info strong, .wz-song__info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-song__info strong { color: #fff7da; font-size: .9rem; }
.wz-song__info span { color: rgba(255,241,202,.58); font-size: .78rem; }

.wz-player-panel { position: relative; display: flex; flex-direction: column; padding: clamp(15px, 2vw, 26px); background: linear-gradient(180deg, rgba(58,20,28,.97), rgba(23,9,14,.97)); }
.wz-player-panel::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px dashed rgba(244,189,69,.2); border-radius: 15px; }

/* El marco de la pantalla se dibuja FUERA con sombras, no con `border`.
   Con border, el `aspect-ratio: 16/9` se aplicaba a la caja externa y los 7px
   se comían el interior: quedaba en 1.82 en vez de 1.78 y YouTube compensaba
   metiendo franjas negras a los lados. Sin border, el recuadro interior es
   16/9 exacto y el video cubre todo. */
.wz-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 0;
    border-radius: var(--wz-radio-pantalla);
    background: radial-gradient(circle at 50% 35%, #52202d, #0d080a 72%);
    box-shadow: 0 12px 35px rgba(0,0,0,.45), inset 0 0 40px rgba(0,0,0,.6);
}
/* El contorno naranjo, ahora por dentro: deja libre el canto exterior para que
   el punto de luz lo recorra por fuera. Va sobre el aviso de consentimiento
   para que el marco no desaparezca cuando ese panel se muestra. */
.wz-screen::after {
    content: "";
    position: absolute;
    z-index: 9;
    inset: var(--wz-marco);
    border: var(--wz-marco) solid #8b4a2c;
    border-radius: calc(var(--wz-radio-pantalla) - var(--wz-marco));
    pointer-events: none;
}

.wz-screen__glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 28%); z-index: 4; }

/* Punto de luz recorriendo el canto de la pantalla.
   El hijo es un cuadrado con un degradado cónico que gira; el padre lo recorta
   a un aro del grosor del borde con dos máscaras que se restan (content-box
   menos la caja completa). Así el arco claro del cónico va iluminando tramos
   sucesivos del perímetro y se lee como un punto que lo recorre.
   Ocupa el canto exterior de la caja, por fuera del marco naranjo, que se
   dibuja hacia adentro justamente para dejarle ese lugar. No puede salirse con
   inset negativo porque .wz-screen tiene overflow hidden.
   Se anima solo transform, que resuelve la GPU sin repintar. */
.wz-screen__haz {
    position: absolute;
    z-index: 10;
    inset: 0;
    padding: var(--wz-marco);
    overflow: hidden;
    border-radius: var(--wz-radio-pantalla);
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
.wz-screen__haz i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170%;
    aspect-ratio: 1;
    /* Un solo tramo claro y corto: el resto transparente para que sea un punto
       y no un barrido. */
    background: conic-gradient(from 0deg,
        transparent 0 86%,
        rgba(255,255,255,.95) 91%,
        transparent 95%);
    transform: translate(-50%, -50%);
    /* Ocho compases por vuelta: va a la par del resto de la máquina. */
    animation: wz-haz-borde calc(var(--wz-compas) * 8) linear infinite;
}
@keyframes wz-haz-borde {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .wz-screen__haz { display: none; }
}
/* Escudo sobre el iframe: no se puede inyectar un clic dentro de un iframe de
   otro dominio, pero sí impedir que los toques lleguen a YouTube, que es lo
   que despliega su título, el canal y las tarjetas del final. Queda bajo el
   botón de pantalla completa (7) y bajo el aviso de consentimiento (8). */
.wz-fullscreen { position: absolute; z-index: 7; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px; border: 1px solid rgba(255,241,202,.35); border-radius: 999px; color: var(--wz-cream); background: rgba(13,8,10,.78); box-shadow: 0 5px 16px rgba(0,0,0,.28); font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; backdrop-filter: blur(8px); }
.wz-fullscreen:hover { color: var(--wz-ink); background: var(--wz-gold); }
.wz-fullscreen[hidden] { display: none; }
.wz-tv-activation { display: none; }
/* El 1.5% de más es seguro contra el redondeo a subpíxeles: con alturas
   fraccionarias podía asomar una línea de fondo en un canto. Recorta tan poco
   que no se nota, y garantiza que el video tape el recuadro completo. */
.wz-youtube, .wz-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transform: scale(1.015); transform-origin: center; }
.wz-youtube { z-index: 2; opacity: 1; visibility: visible; transition: opacity .16s ease; }
.wz-player-panel.has-no-song .wz-youtube { opacity: 0; visibility: hidden; }
.wz-idle, .wz-consent { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; }
.wz-idle i { color: var(--wz-gold); font-size: clamp(3rem, 7vw, 6.5rem); filter: drop-shadow(0 0 15px rgba(244,189,69,.3)); }
.wz-idle span { color: rgba(255,241,202,.62); }
.wz-consent { z-index: 8; background: rgba(13,8,10,.92); }
.wz-consent i { color: #ff394f; font-size: 2.4rem; }
.wz-consent span { max-width: 330px; color: rgba(255,241,202,.64); font-size: .88rem; }
.wz-consent[hidden], .wz-idle[hidden] { display: none; }

.wz-now {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 40px;
    place-items: center;
    padding: 20px 0px 9px 0px;
    text-align: center;
}
.wz-now[hidden] { display: none; }
.wz-now__marquee { width: 100%; }
.wz-now strong { display: block; color: #fff8dc; font-family: "Archivo Black", sans-serif; font-size: clamp(1.15rem, 2vw, 1.65rem); line-height: 1.08; }
.wz-now.is-prompt strong { color: #fff8dc; }

.wz-controls { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 16px; margin: 6px 0 20px; }
.wz-control { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--wz-line); border-radius: 50%; color: var(--wz-cream); background: #291118; font-size: 1.2rem; }
.wz-control--main { width: 70px; height: 70px; border: 4px solid #7a3f28; color: #27100f; background: var(--wz-gold); box-shadow: 0 0 0 3px #1a0b0e, 0 0 22px rgba(244,189,69,.34); font-size: 2rem; }
/* El plato giratorio hace de play/pausa en las dos vistas, así que el botón
   redondo solo reaparece en pantalla completa y modo TV, donde el disco de
   148px no cabe. */
.wz-controls .wz-control--main { display: none; }
.wz-control:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.15); }
.wz-control:disabled, .wz-btn:disabled, .wz-surprise:disabled { opacity: .42; cursor: not-allowed; }

.wz-surprise { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; min-height: var(--wz-alto-accion); margin-top: auto; padding: 6px 18px; border: 1px solid rgba(69,224,193,.5); border-radius: 14px; color: #e8fff9; background: linear-gradient(135deg, rgba(69,224,193,.18), rgba(69,224,193,.06)); text-align: left; }
.wz-surprise > i { font-size: 1.35rem; line-height: 1; }
.wz-surprise span, .wz-surprise small { display: block; }
/* Tipografía y interlineado apretados para que las dos líneas quepan en los
   --wz-alto-accion y el botón mida lo mismo que "Vaciar cola". */
.wz-surprise span { line-height: 1.12; }
.wz-surprise strong { font-size: .84rem; }
.wz-surprise small { color: rgba(232,255,249,.6); font-size: .69rem; line-height: 1.15; }
.wz-queue .wz-surprise { width: 100%; flex: 0 0 auto; margin: 0; padding: 4px 14px; border-radius: 11px; }

.wz-player-panel:fullscreen,
.wz-player-panel:-webkit-full-screen {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #451521;
}
.wz-player-panel:fullscreen::before,
.wz-player-panel:-webkit-full-screen::before {
    z-index: 10;
    inset: 7px;
    border: 2px dotted rgba(244,189,69,.62);
    border-radius: 8px;
}
.wz-player-panel:fullscreen .wz-screen,
.wz-player-panel:-webkit-full-screen .wz-screen {
    position: absolute;
    z-index: 1;
    inset: 13px;
    width: auto;
    height: auto;
    max-width: none;
    margin: 0;
    --wz-marco: 2px;
    --wz-radio-pantalla: 8px;
    border-radius: var(--wz-radio-pantalla);
    aspect-ratio: auto;
    box-shadow: inset 0 0 40px rgba(0,0,0,.65);
}
.wz-player-panel:fullscreen .wz-now,
.wz-player-panel:-webkit-full-screen .wz-now,
/* El plato es exclusivo del celular en vista normal: en pantalla completa
   estorba y los controles vuelven a su barra propia. */
.wz-player-panel:fullscreen .wz-deck,
.wz-player-panel:-webkit-full-screen .wz-deck { display: none !important; }
.wz-player-panel:fullscreen .wz-tv-activation,
.wz-player-panel:-webkit-full-screen .wz-tv-activation {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: block;
    touch-action: manipulation;
}
.wz-player-panel:fullscreen .wz-controls,
.wz-player-panel:-webkit-full-screen .wz-controls {
    position: absolute;
    z-index: 9;
    top: auto;
    bottom: 34px;
    left: 50%;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid rgba(255,241,202,.2);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    background: rgba(18,7,10,.66);
    box-shadow: 0 12px 34px rgba(0,0,0,.4);
    backdrop-filter: blur(10px);
    transform: translateX(-50%) scale(.94);
    transition: opacity .22s, transform .22s;
}
.wz-player-panel:fullscreen.is-controls-visible .wz-controls,
.wz-player-panel:-webkit-full-screen.is-controls-visible .wz-controls,
.wz-player-panel:fullscreen .wz-controls:hover,
.wz-player-panel:-webkit-full-screen .wz-controls:hover,
.wz-player-panel:fullscreen .wz-controls:focus-within,
.wz-player-panel:-webkit-full-screen .wz-controls:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}
.wz-player-panel:fullscreen .wz-control,
.wz-player-panel:-webkit-full-screen .wz-control { width: 62px; height: 62px; background: rgba(25,9,14,.88); }
.wz-player-panel:fullscreen .wz-control--main,
.wz-player-panel:-webkit-full-screen .wz-control--main { width: 84px; height: 84px; background: var(--wz-gold); }
.wz-player-panel:fullscreen .wz-surprise,
.wz-player-panel:-webkit-full-screen .wz-surprise { display: none; }
.wz-player-panel:fullscreen .wz-fullscreen,
.wz-player-panel:-webkit-full-screen .wz-fullscreen {
    top: 24px;
    right: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}
.wz-player-panel:fullscreen.is-controls-visible .wz-fullscreen,
.wz-player-panel:-webkit-full-screen.is-controls-visible .wz-fullscreen,
.wz-player-panel:fullscreen .wz-fullscreen:hover,
.wz-player-panel:-webkit-full-screen .wz-fullscreen:hover,
.wz-player-panel:fullscreen .wz-fullscreen:focus-visible,
.wz-player-panel:-webkit-full-screen .wz-fullscreen:focus-visible { opacity: 1; pointer-events: auto; }

.wz-empty { display: flex; min-height: 250px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 25px; color: rgba(255,241,202,.58); text-align: center; }
.wz-empty i { color: var(--wz-gold); font-size: 3rem; }
.wz-empty strong { color: var(--wz-cream); }

.wz-queue-list .wz-empty { min-height: 222px; }
.wz-queue-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; height: 67px; margin-bottom: 7px; padding: 9px; border: 1px solid transparent; border-radius: 11px; color: inherit; background: rgba(255,255,255,.035); font: inherit; text-align: left; cursor: pointer; }
.wz-queue-item.is-current { border-color: rgba(69,224,193,.5); background: rgba(69,224,193,.08); }
.wz-queue-item:hover { border-color: rgba(244,189,69,.28); background: rgba(255,255,255,.06); }
.wz-queue-item:focus-visible { outline: 2px solid var(--wz-gold); outline-offset: 2px; }
.wz-queue-item__number { color: var(--wz-gold); font-size: .72rem; font-weight: 900; text-align: center; }
.wz-queue-item__text { min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.wz-queue-item__text strong, .wz-queue-item__text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-queue-item__text strong { font-size: .84rem; }
.wz-queue-item__text span { color: rgba(255,241,202,.56); font-size: .72rem; }
.wz-queue-item__drag, .wz-queue-item__remove { display: none; }
.wz-queue.is-ordering .wz-queue-item { grid-template-columns: 22px 28px minmax(0, 1fr) 28px; cursor: grab; user-select: none; }
.wz-queue.is-ordering .wz-queue-item.is-current { cursor: default; }
.wz-queue.is-ordering .wz-queue-item__drag { display: grid; place-items: center; color: rgba(255,241,202,.5); font-size: 1rem; }
.wz-queue.is-ordering .wz-queue-item.is-orderable .wz-queue-item__drag { color: var(--wz-gold); }
.wz-queue.is-ordering .wz-queue-item__remove { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid rgba(255,109,126,.25); border-radius: 7px; color: #ff9aa7; background: rgba(255,109,126,.08); }
.wz-queue.is-ordering .wz-queue-item__remove:hover:not(:disabled) { color: #fff; background: rgba(255,109,126,.24); }
.wz-queue.is-ordering .wz-queue-item__remove:disabled { visibility: hidden; }
.wz-queue-item.is-drag-chosen { border-color: rgba(244,189,69,.58); cursor: grabbing; }
.wz-queue-item.is-drag-ghost { opacity: .25; }
.wz-queue-item.is-dragging { cursor: grabbing; box-shadow: 0 15px 30px rgba(0,0,0,.45); }
.wz-mini-btn { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 6px; color: rgba(255,241,202,.72); background: rgba(255,255,255,.06); font-size: .74rem; }
.wz-mini-btn:hover:not(:disabled) { color: var(--wz-ink); background: var(--wz-gold); }
.wz-mini-btn:disabled { opacity: .25; }

/* Dos acciones en una línea, repartidas 10/2: Sorpréndeme se lleva el ancho y
   vaciar queda al final, solo con el icono. */
.wz-queue-actions { display: grid; grid-template-columns: 10fr 2fr; gap: 8px; margin-top: 13px; align-items: stretch; }
.wz-btn--icono { padding: 9px; font-size: 1rem; }
.wz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; min-height: var(--wz-alto-accion); padding: 9px 12px; border: 1px solid var(--wz-line); border-radius: 10px; color: var(--wz-cream); background: rgba(255,255,255,.045); font-size: .82rem; font-weight: 900; }
.wz-btn--gold { border-color: #7e4f1c; color: #27100f; background: var(--wz-gold); }
.wz-btn:hover:not(:disabled) { filter: brightness(1.12); }

.wz-save { margin-top: 12px; padding: 13px; border: 1px solid rgba(244,189,69,.3); border-radius: 12px; background: rgba(244,189,69,.06); }
.wz-save label { display: block; color: rgba(255,241,202,.72); font-size: .78rem; font-weight: 800; }
.wz-save input[type="text"] { display: block; width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--wz-line); border-radius: 8px; color: var(--wz-cream); background: #1d0c11; }
.wz-save .wz-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-weight: 600; }
.wz-save__actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 7px; margin-top: 12px; }

.wz-my-lists { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--wz-line); }
.wz-my-lists__heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.wz-my-lists h3 { margin: 0; color: var(--wz-gold); font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.wz-my-lists a { color: var(--wz-mint); font-size: .72rem; }
.wz-playlist { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.wz-playlist__name { min-width: 0; border: 0; padding: 0; color: var(--wz-cream); background: transparent; text-align: left; }
.wz-playlist__name strong, .wz-playlist__name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-playlist__name small { color: rgba(255,241,202,.48); }
.wz-playlist__tools { display: flex; gap: 4px; }

.wz-machine__footer { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 25px 10px 0; color: rgba(255,241,202,.48); font-size: .73rem; text-align: center; text-transform: uppercase; letter-spacing: .08em; }

.wz-toast { position: fixed; z-index: 1000; right: 20px; bottom: 20px; max-width: min(390px, calc(100vw - 32px)); padding: 13px 17px; border: 1px solid rgba(244,189,69,.45); border-radius: 12px; color: var(--wz-cream); background: #2b1018; box-shadow: 0 15px 40px rgba(0,0,0,.45); }
.wz-toast.is-error { border-color: #ff6d7e; }

/* ---------- Plato giratorio (solo celular) ---------- */
/* Es el botón de play/pausa: el disco arranca cuando arranca la canción. */
.wz-deck { display: none; }
.wz-deck[hidden] { display: none !important; }
/* Mismo lenguaje que los discos del carrusel: aro oscuro, surcos, anillo
   interior y resplandor dorado cuando está sonando. */
.wz-deck__disc {
    position: relative;
    display: grid;
    place-items: center;
    width: 148px;
    height: 148px;
    padding: 0;
    border: 2px solid #080608;
    border-radius: 50%;
    color: var(--wz-gold);
    background: transparent;
    box-shadow: 0 9px 23px rgba(0,0,0,.52);
    transition: border-color .2s, box-shadow .2s;
}
.wz-deck__disc::before { content: ""; position: absolute; z-index: 2; inset: 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; pointer-events: none; }
.wz-deck__disc:disabled { opacity: .45; }
.wz-deck__disc.is-playing { border-color: var(--wz-gold); box-shadow: 0 0 0 2px #4f1b24, 0 0 17px rgba(244,189,69,.46); }
/* Este envoltorio es el que gira, con los surcos incluidos. */
.wz-deck__plato {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, #211c1d 0 3px, #0e0c0d 4px 6px);
}
.wz-deck__art { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 50%; object-fit: cover; }
.wz-deck__art[hidden] { display: none; }
.wz-deck__hub { position: absolute; z-index: 3; top: 50%; left: 50%; width: 9px; height: 9px; border: 2px solid #27100f; border-radius: 50%; background: var(--wz-gold); transform: translate(-50%,-50%); box-shadow: 0 0 0 2px rgba(255,255,255,.24); }
/* Pastilla chica al centro: marca el estado sin tapar la portada. */
.wz-deck__estado {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #1d1010;
    background: var(--wz-gold);
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
    font-size: .95rem;
}

/* Antihorario, como gira un disco de verdad visto desde arriba. */
@keyframes wz-plato-girando {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}
/* La animación está siempre puesta y solo se pausa: al parar, el disco se
   queda donde iba en vez de volver de un salto al origen. Mismo criterio que
   los discos del carrusel. */
.wz-deck__plato {
    animation: wz-plato-girando 5.4s linear infinite;
    animation-play-state: paused;
}
.wz-deck__disc.is-playing .wz-deck__plato { animation-play-state: running; }

/* El golpe va en el botón y el giro en el plato de adentro: son dos elementos
   distintos porque ambos animan transform y se pisarían en uno solo.
   Ataque rápido y vuelta suave, para que se sienta un bum y no un vaivén. */
/* will-change promueve el disco a su propia capa: sin eso el navegador
   vuelve a rasterizar la portada en cada cuadro y el escalado se ve rasposo. */
.wz-deck__disc.is-playing {
    animation: wz-golpe-disco var(--wz-compas) ease-in-out infinite;
    will-change: transform;
}
/* Sube durante el 40% del compás y baja durante el 60%, sin tramo plano:
   antes crecía en un 12% (60 ms) y se quedaba quieto más de la mitad del
   ciclo, así que aparecía grande de golpe en vez de hincharse. */
@keyframes wz-golpe-disco {
    0% { transform: scale(1); }
    40% { transform: scale(var(--wz-golpe-escala)); }
    100% { transform: scale(1); }
}

/* Halo: un aro de luz que nace en el canto del disco y se abre hacia afuera
   en cada golpe. Es un degradado radial hueco al centro, para no lavar la
   portada; solo brilla el borde. Se anima con transform y opacity —las dos
   que resuelve la GPU— en vez de box-shadow, que obliga a repintar. */
/* Aro que nace pegado al canto del disco y solo crece hacia afuera.
   Es un `border`, no un degradado: con radial-gradient el 100% no es el borde
   de la caja sino la esquina (≈141% del radio), así que el anillo quedaba
   dentro del disco y al escalar cruzaba la cara hacia afuera; se leía al
   revés, como si la luz entrara. Con un aro no hay ambigüedad: por dentro no
   hay nada que pintar. */
.wz-deck__disc.is-playing::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: -2px;
    border: 2px solid rgba(244,189,69,.85);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(244,189,69,.55);
    animation: wz-halo-disco var(--wz-compas) ease-out infinite;
    pointer-events: none;
}
/* Invisible durante el envión y recién asoma cuando el disco llega a su
   punto más grande (40%): así se lee como que el golpe expulsa la luz, y no
   como un aro que ya venía saliendo antes del golpe. */
@keyframes wz-halo-disco {
    0%, 30% { transform: scale(1); opacity: 0; }
    45% { transform: scale(1.04); opacity: var(--wz-halo-fuerza); }
    100% { transform: scale(var(--wz-halo-alcance)); opacity: 0; }
}

/* Con animaciones reducidas se apaga todo lo que late o gira. */
@media (prefers-reduced-motion: reduce) {
    .wz-neon,
    .wz-deck__disc.is-playing,
    .wz-deck__disc.is-playing .wz-deck__plato { animation: none; }
    .wz-deck__disc.is-playing::after { display: none; }
}

/* -50% del carrete = exactamente una copia del rótulo más su separación. */
@keyframes wz-marquesina {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes wz-disc-girando {
    from { transform: translateY(-2px) rotate(0deg); }
    to { transform: translateY(-2px) rotate(-360deg); }
}

@media (max-width: 1180px) {
    .wz-console { grid-template-columns: 1fr 1fr; }
    .wz-player-panel { grid-column: 1 / -1; grid-row: 1; }
    .wz-screen { max-width: 850px; width: 100%; margin: 0 auto; }
    .wz-song-list { max-height: 380px; }
}

@media (max-width: 720px), (pointer: coarse) and (max-width: 960px) {
    .wz-topbar { min-height: 56px; padding: 8px 13px; }
    .wz-brand img { height: 28px; }
    .wz-brand span, .wz-user, .wz-exit { font-size: .76rem; }
    .wz-exit { padding: 7px 0px; }
    .wz-stage { padding: 10px 3px 24px; }
    .wz-machine { padding: 16px 5px 20px; border-width: 2px; border-radius: 74px 74px 25px 25px; box-shadow: 0 0 0 3px #1c0a0d, 0 0 0 5px #bd733a, 0 18px 50px rgba(0,0,0,.55); }
    .wz-machine::before { inset: 9px; border-radius: 63px 63px 18px 18px; }
    .wz-machine__arch { inset: 7px 10px auto; height: 145px; }
    .wz-neon { border-width: 3px; border-radius: 59px 59px 0 0; }
    .wz-neon--two { inset: 7px; }
    .wz-neon--three { inset: 14px; }
    .wz-marquee { min-height: 112px; padding: 15px 5px 10px; gap: 9px; }
    .wz-marquee h1 { max-width: 260px; font-size: clamp(1.8rem, 10vw, 2.8rem); }
    .wz-marquee__stars { display: none; }
    .wz-kicker { font-size: .6rem; }
    .wz-console { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .wz-player-panel { grid-column: auto; grid-row: 1; padding: 12px 6px; }
    .wz-catalog { grid-row: 2; }
    .wz-queue { grid-row: 3; }
    .wz-app.is-mobile-order .wz-catalog { display: none; }
    .wz-app.is-mobile-order .wz-player-panel { grid-row: 1; }
    .wz-app.is-mobile-order .wz-player-panel::before { display: none; }
    .wz-app.is-mobile-order .wz-player-panel:fullscreen::before,
    .wz-app.is-mobile-order .wz-player-panel:-webkit-full-screen::before { display: none; }
    .wz-app.is-mobile-order .wz-queue { grid-row: 2; }
    .wz-app.is-mobile-order .wz-player-panel > .wz-searchbox,
    .wz-app.is-mobile-order .wz-player-panel > .wz-band-filter,
    .wz-app.is-mobile-order .wz-player-panel > .wz-now,
    .wz-app.is-mobile-order .wz-player-panel > .wz-screen,
    .wz-app.is-mobile-order .wz-player-panel > .wz-controls,
    .wz-app.is-mobile-order .wz-player-panel > .wz-song-list { width: 100%; flex: 0 0 auto; }
    .wz-app.is-mobile-order .wz-player-panel > .wz-panel__heading { display: none; }
    .wz-app.is-mobile-order .wz-band-filter__heading { display: none; }
    .wz-app.is-mobile-order .wz-queue > .wz-searchbox { margin-bottom: 12px; }
    .wz-app.is-mobile-order .wz-player-panel > .wz-band-filter { margin: 0 0 10px; }
    /* Mismo marco por sombra, más fino: en celular el desajuste era mayor
       todavía, porque el borde pesa más sobre una pantalla chica. */
    .wz-screen { --wz-marco: 2px; --wz-radio-pantalla: 13px; border-radius: var(--wz-radio-pantalla); box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 0 34px rgba(0,0,0,.6); }
    .wz-fullscreen { top: 7px; right: 7px; min-height: 29px; padding: 5px 8px; }
    .wz-player-panel:fullscreen .wz-controls,
    .wz-player-panel:-webkit-full-screen .wz-controls { bottom: 22px; padding: 9px 12px; }
    .wz-consent { padding: 13px; }
    .wz-consent i { font-size: 1.8rem; }
    .wz-consent strong { font-size: .85rem; }
    .wz-consent span { font-size: .72rem; }
    .wz-consent .wz-btn { min-height: 34px; padding: 7px 9px; }
    .wz-now { min-height: 88px; padding-top: 18px; }
    .wz-app.is-mobile-order .wz-now { min-height: 40px; padding: 5px; overflow: hidden; }
    .wz-app.is-mobile-order .wz-now__marquee { width: 100%; overflow: hidden; white-space: nowrap; }
    .wz-app.is-mobile-order .wz-now__marquee-track {
        display: block;
        width: 100%;
    }
    .wz-app.is-mobile-order .wz-now__marquee-track strong {
        display: block;
        width: 100%;
        min-width: 0;
        padding-right: 0;
        overflow: hidden;
        font-size: 1.05rem;
        line-height: 1.2;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .wz-app.is-mobile-order .wz-now.is-prompt .wz-now__marquee-track strong {
        font-size: .92rem;
    }
    /* Rodando el rótulo no se corta con puntos suspensivos: se desliza sin fin.
       El carrete lleva DOS copias del rótulo, cada una con su separación a la
       derecha, y se corre exactamente -50%: cuando la primera termina de salir
       por la izquierda, la segunda está justo donde estaba la primera, así que
       el reinicio no se ve y el texto entra por el otro lado. */
    .wz-app.is-mobile-order .wz-now.is-rodando .wz-now__marquee-track {
        display: flex;
        width: max-content;
        animation: wz-marquesina var(--wz-duracion, 8s) linear infinite;
        animation-delay: 1.2s;
    }
    .wz-app.is-mobile-order .wz-now.is-rodando .wz-now__marquee-track > strong {
        flex: 0 0 auto;
        width: auto;
        padding-right: 3rem;
        overflow: visible;
        text-align: left;
        text-overflow: clip;
    }

    /* Tres columnas con los costados iguales: así el disco queda centrado de
       verdad y el botón "siguiente" no lo corre hacia la izquierda. */
    /* El disco vive dentro de la barra de controles: queda centrado entre
       "anterior" y "siguiente" sin trucos de maquetación. El botón redondo
       de escritorio sobra, porque el disco cumple su función. */
    .wz-app.is-mobile-order .wz-controls { gap: 16px; margin: 8px 0 10px; }


    /* Los discos ahora encabezan el bloque de la cola, así que su título
       vuelve a servir: es el rótulo de esa sección. */
    .wz-app.is-mobile-order .wz-queue > .wz-band-filter { margin: 0 0 14px; }
    .wz-app.is-mobile-order .wz-queue > .wz-band-filter .wz-band-filter__heading { display: flex; margin-bottom: 8px; }

    .wz-now strong { font-size: 1.2rem; }
    /* Un poco más grandes que el resto de los controles chicos: en celular
       son el objetivo táctil de anterior y siguiente. El modo TV los define
       aparte con más especificidad, así que no se ve afectado. */
    .wz-app.is-mobile-order .wz-control { width: 46px; height: 46px; font-size: 1.15rem; }
    .wz-app.is-mobile-order .wz-control--main { width: 54px; height: 54px; border-width: 3px; font-size: 1.45rem; }
    .wz-app.is-mobile-order .wz-player-panel:fullscreen .wz-controls,
    .wz-app.is-mobile-order .wz-player-panel:-webkit-full-screen .wz-controls {
        width: auto;
        max-width: calc(100% - 28px);
        margin: 0;
        flex: 0 0 auto;
    }
    .wz-app.is-mobile-order .wz-player-panel:fullscreen > .wz-screen,
    .wz-app.is-mobile-order .wz-player-panel:-webkit-full-screen > .wz-screen {
        inset: 10px;
        width: auto;
        max-width: none;
        flex: none;
    }
    .wz-panel { padding: 13px 7px; }
    .wz-band-filter__heading small { display: none; }
    .wz-app.is-mobile-order .wz-band-rail { min-height: 232px; }
    .wz-app.is-mobile-order .wz-band__disc > i { font-size: 3rem; }
    /* Con el coverflow, las flechas sobran: ver las portadas de al lado ya
       dice que se desliza. */
    .wz-app.is-mobile-order .wz-band-nav { display: none; }
    /* El latido de invitación pasa al botón de play: late mientras no esté
       sonando —sin arrancar o en pausa— y se apaga al reproducir. */
    .wz-app.is-mobile-order .wz-deck__disc:not(:disabled):not(.is-playing) {
        animation: wz-disc-invite-pulse 1.9s ease-in-out infinite;
    }
    .wz-song-list { max-height: 390px; }
    /* Siempre visible bajo el carrusel, con alto de unas 3 canciones: alcanza
       para saber qué hay sin empujar la cola fuera de la pantalla. */
    .wz-app.is-mobile-order .wz-song-list {
        min-height: 0;
        max-height: 196px;
        margin-bottom: 14px;
        padding: 0 7px 7px;
        overflow-y: auto;
        /* Con borde no queda flotando sobre el fondo de la máquina. */
        border: 1px solid rgba(244,189,69,.18);
        border-radius: 12px;
        background: rgba(0,0,0,.16);
        scrollbar-gutter: stable;
        /* Sin scroll-snap: con el encabezado fijo arriba, los puntos de anclaje
           de cada canción caían detrás de él y el navegador se negaba a parar
           en el tope, dejando la primera canción inalcanzable. */
    }
    /* El encabezado vuelve a verse y queda fijo arriba: el scroll es para las
       canciones, no para el rótulo ni para el botón de toda la banda. */
    .wz-app.is-mobile-order .wz-song-list__heading {
        position: sticky;
        z-index: 2;
        top: 0;
        display: flex;
        margin-bottom: 7px;
        padding: 7px 0 6px;
        background: #1b0b11;
    }
    .wz-app.is-mobile-order .wz-song { grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 7px; min-height: 45px; margin-bottom: 3px; padding: 4px; }
    .wz-app.is-mobile-order .wz-song__cover { width: 34px; height: 34px; }
    .wz-app.is-mobile-order .wz-song__cover i { font-size: 1.15rem; }
    .wz-app.is-mobile-order .wz-song__info span { display: none; }
    .wz-app.is-mobile-order .wz-song-list .wz-empty { min-height: 108px; }
    .wz-app.is-mobile-order .wz-queue-list {
        padding-right: 7px;
        scrollbar-gutter: stable;
    }
    .wz-app.is-mobile-order .wz-queue .wz-surprise {
        width: 100%;
        max-width: none;
        gap: 8px;
        align-self: center;
        flex: 0 0 auto;
        margin: 0;
        padding: 4px 12px;
        border-radius: 11px;
    }
    .wz-app.is-mobile-order .wz-queue .wz-surprise > i { font-size: 1.1rem; }
    .wz-app.is-mobile-order .wz-queue .wz-surprise span { line-height: 1.05; }
    /* En celular todo es más compacto: el token baja y los tres siguen parejos. */
    :root { --wz-alto-accion: 42px; }
    .wz-app.is-mobile-order .wz-queue .wz-surprise strong { font-size: .82rem; }
    .wz-app.is-mobile-order .wz-queue .wz-surprise small { font-size: .68rem; }
    .wz-machine__footer { flex-direction: column; gap: 5px; padding-top: 18px; font-size: .61rem; }
    .wz-machine__footer span:nth-child(2) { display: none; }
}

@keyframes wz-disc-invite-pulse {
    0%, 100% { box-shadow: 0 0 9px rgba(244,189,69,.26); }
    50% { box-shadow: 0 0 17px rgba(244,189,69,.48); }
}

.wz-player-panel:fullscreen > .wz-panel__heading,
.wz-player-panel:fullscreen > .wz-searchbox,
.wz-player-panel:fullscreen > .wz-band-filter,
.wz-player-panel:fullscreen > .wz-song-list,
.wz-player-panel:-webkit-full-screen > .wz-panel__heading,
.wz-player-panel:-webkit-full-screen > .wz-searchbox,
.wz-player-panel:-webkit-full-screen > .wz-band-filter,
.wz-player-panel:-webkit-full-screen > .wz-song-list { display: none; }

@media (prefers-reduced-motion: reduce) {
    .wz-song, .wz-control, .wz-band__disc { transition: none; }
    .wz-band.is-current-song .wz-band__disc { animation: none; }
    .wz-app.is-mobile-order.is-awaiting-playback .wz-band.is-active .wz-band__disc { animation: none; }
    .wz-band-track { scroll-behavior: auto; }
}

/* Modo TV simulado: respaldo para navegadores sin Fullscreen API sobre el panel
   (iPhone). Replica el aspecto de :fullscreen ocupando toda la ventana. Va en un
   bloque propio a propósito: agrupar estos selectores junto a :-webkit-full-screen
   haría que un navegador que no reconoce ese prefijo descarte la regla completa. */
body.wz-tv-abierto { overflow: hidden; }
/* .wz-console declara position:relative + z-index, así que crea un contexto de
   apilamiento y encierra el z-index del panel: el header (z-index 20) y el pie
   de la máquina quedaban dibujados sobre el video. La pantalla completa nativa
   no sufre esto porque el navegador promueve el elemento a la top layer. */
body.wz-tv-abierto .wz-console { z-index: auto; }
.wz-player-panel.is-tv {
    position: fixed;
    z-index: 1200;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #451521;
}
.wz-player-panel.is-tv::before {
    z-index: 10;
    inset: 7px;
    border: 2px dotted rgba(244,189,69,.62);
    border-radius: 8px;
}
.wz-player-panel.is-tv .wz-screen {
    position: absolute;
    z-index: 1;
    inset: 13px;
    width: auto;
    height: auto;
    max-width: none;
    margin: 0;
    --wz-marco: 2px;
    --wz-radio-pantalla: 8px;
    border-radius: var(--wz-radio-pantalla);
    aspect-ratio: auto;
    box-shadow: inset 0 0 40px rgba(0,0,0,.65);
}
.wz-player-panel.is-tv .wz-now,
.wz-player-panel.is-tv .wz-deck { display: none !important; }
/* En pantalla completa y modo TV vuelve el botón redondo y se esconde el
   plato: 148px de disco dentro de la barra se comían la pantalla. */
.wz-player-panel:fullscreen .wz-deck__disc,
.wz-player-panel:-webkit-full-screen .wz-deck__disc,
.wz-player-panel.is-tv .wz-deck__disc { display: none !important; }
.wz-player-panel:fullscreen .wz-controls .wz-control--main,
.wz-player-panel:-webkit-full-screen .wz-controls .wz-control--main,
.wz-player-panel.is-tv .wz-controls .wz-control--main { display: grid; }
.wz-player-panel.is-tv .wz-tv-activation {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: block;
    touch-action: manipulation;
}
.wz-player-panel.is-tv .wz-controls {
    position: absolute;
    z-index: 9;
    top: auto;
    bottom: 34px;
    left: 50%;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid rgba(255,241,202,.2);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    background: rgba(18,7,10,.66);
    box-shadow: 0 12px 34px rgba(0,0,0,.4);
    backdrop-filter: blur(10px);
    transform: translateX(-50%) scale(.94);
    transition: opacity .22s, transform .22s;
}
.wz-player-panel.is-tv.is-controls-visible .wz-controls,
.wz-player-panel.is-tv .wz-controls:hover,
.wz-player-panel.is-tv .wz-controls:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}
.wz-player-panel.is-tv .wz-control { width: 62px; height: 62px; background: rgba(25,9,14,.88); }
.wz-player-panel.is-tv .wz-control--main { width: 84px; height: 84px; background: var(--wz-gold); }
.wz-player-panel.is-tv .wz-surprise { display: none; }
.wz-player-panel.is-tv > .wz-panel__heading,
.wz-player-panel.is-tv > .wz-searchbox,
.wz-player-panel.is-tv > .wz-band-filter,
.wz-player-panel.is-tv > .wz-song-list { display: none; }
.wz-player-panel.is-tv .wz-fullscreen {
    top: 24px;
    right: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}
.wz-player-panel.is-tv.is-controls-visible .wz-fullscreen,
.wz-player-panel.is-tv .wz-fullscreen:hover,
.wz-player-panel.is-tv .wz-fullscreen:focus-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 720px), (pointer: coarse) and (max-width: 960px) {
    .wz-player-panel.is-tv::before { display: none; }
    .wz-player-panel.is-tv .wz-controls { bottom: 22px; padding: 9px 12px; }
    /* En un teléfono, 62 y 84px tapan medio video: acá van más contenidos. */
    .wz-app.is-mobile-order .wz-player-panel.is-tv .wz-control,
    .wz-app.is-mobile-order .wz-player-panel:fullscreen .wz-control,
    .wz-app.is-mobile-order .wz-player-panel:-webkit-full-screen .wz-control { width: 44px; height: 44px; font-size: 1rem; }
    .wz-app.is-mobile-order .wz-player-panel.is-tv .wz-control--main,
    .wz-app.is-mobile-order .wz-player-panel:fullscreen .wz-control--main,
    .wz-app.is-mobile-order .wz-player-panel:-webkit-full-screen .wz-control--main { width: 60px; height: 60px; border-width: 3px; font-size: 1.5rem; }
    .wz-app.is-mobile-order .wz-player-panel.is-tv .wz-controls {
        width: auto;
        max-width: calc(100% - 28px);
        margin: 0;
        flex: 0 0 auto;
    }
    .wz-app.is-mobile-order .wz-player-panel.is-tv > .wz-screen {
        inset: 10px;
        width: auto;
        max-width: none;
        flex: none;
    }
}


@media (max-width: 720px) {
    .wz-machine::before, .wz-machine::after {
        border: none;
    }
}
/* ---------- Buscador de canciones y maratón de banda ---------- */
.wz-song-list__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.wz-band-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid rgba(69,224,193,.45);
    border-radius: 999px;
    color: #d6fff4;
    background: rgba(69,224,193,.12);
    font-size: .66rem;
    font-weight: 900;
    white-space: nowrap;
}
.wz-band-all:hover:not(:disabled) { color: #0d3b31; background: var(--wz-mint); }
.wz-band-all[hidden] { display: none; }
.wz-band-all:disabled { opacity: .4; }

/* Buscando, el aviso de "elige un disco" sobra: los resultados cruzan bandas. */
.wz-app.is-buscando .wz-band-prompt { display: none; }

/* Tablet táctil: la máquina va en una sola columna y a todo el ancho, así que
   el video se estira al doble que en un teléfono. Las portadas crecen con él
   para no quedar de juguete al lado. El escenario del coverflow y los
   parámetros 3D se derivan de este mismo valor, en CSS y en el JS. */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 960px) {
    :root { --wz-portada: 260px; }
}