/* Los estilos de templates/playlists/before_pedido.html.

   Vivían en un <style> dentro de la página, y viajaban enteros en cada
   visita. En un archivo aparte el teléfono los guarda y no los vuelve a
   bajar (4 oct 2026). Siguen cargándose dentro del cuerpo, en el mismo
   lugar: así ganan igual que antes a los de app.css, y la navegación
   interna de base.html los espera antes de mostrar la pantalla. */

/* ============================================================
   PEDIR TU CANCIÓN · prefijo pd-
   El fondo se decide por ancho, como en el resto de la casa:
   negro plano en el celular y la sala de app.css en escritorio.
   ============================================================ */
body.pedir-page {
    background: var(--bg);
    overflow-x: hidden;
}

body.pedir-page .site-shell::before,
body.pedir-page .site-shell::after {
    display: none;
}

body.pedir-page .main-shell {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 1.75rem), 68rem);
    padding-top: 0.85rem;
}

/* Esta pantalla es de paso: se entra a buscar una canción y se sale.
   Las tres puertas de la casa estorban aquí; la salida es la flecha. */
body.pedir-page .topbar-publico .mobile-panel,
body.pedir-page .topbar-desktop .nav-row {
    display: none;
}

@media (min-width: 900px) {
    body.pedir-page {
        background: transparent;
    }

    body.pedir-page .site-shell::before,
    body.pedir-page .site-shell::after {
        display: block;
    }
}

.pd-shell {
    --pd-cobre: var(--accent);
    --pd-cobre-f: var(--accent-strong);
    --pd-tinta: #1f0f07;
    --pd-borde: rgb(from var(--accent) r g b / 0.22);
    --pd-borde-f: rgb(from var(--accent) r g b / 0.4);
    --pd-linea: rgba(241, 232, 219, 0.08);
    --pd-superficie: rgba(13, 10, 12, 0.84);
    --pd-txt-fuerte: var(--text-strong);
    --pd-txt-sec: var(--muted);
    --pd-txt-ter: #958c84;
    --pd-salvia: var(--success);
    --pd-salvia-soft: rgba(95, 143, 122, 0.14);
    --pd-salvia-borde: rgba(95, 158, 138, 0.36);
    --pd-salvia-txt: #d2eee5;
    display: block;
    min-width: 0;
}

.pd-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---------- cabecera ---------- */
.pd-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 0.62rem;
}

.pd-volver {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--pd-linea);
    border-radius: 999px;
    color: var(--pd-txt-sec);
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.pd-volver svg {
    width: 17px;
    height: 17px;
}

.pd-volver:hover,
.pd-volver:focus-visible {
    border-color: var(--pd-borde);
    color: var(--pd-txt-fuerte);
}

.pd-titulo {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--pd-txt-fuerte);
}

.pd-garantia {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--pd-salvia-borde);
    border-radius: 999px;
    background: var(--pd-salvia-soft);
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--pd-salvia-txt);
}

/* ---------- la máquina ----------
   Tus pedidos son tres lugares bajo el arco de la marca, cada uno con
   su moneda esperando arriba. Es el contador y es la lista de lo tuyo
   a la vez: de un vistazo se ve cuántas monedas quedan y qué canciones
   ya echaste. */
.pd-maquina {
    position: relative;
    display: grid;
    gap: 0.95rem;
    margin-top: 1rem;
    padding: 1.6rem 0.9rem 0.95rem;
    border: 1px solid rgb(from var(--accent) r g b / 0.28);
    border-radius: 50% 50% 1.4rem 1.4rem / 7rem 7rem 1.4rem 1.4rem;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(215, 138, 99, 0.2), transparent 70%),
        linear-gradient(180deg, #1c1315, #110c0e 80%);
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 220, 190, 0.06);
}

.pd-maquina-ceja {
    justify-self: center;
    color: var(--pd-cobre-f);
    font: 800 0.62rem/1 "Manrope", sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.pd-ventanas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    padding-top: 0.9rem;
}

.pd-ventana {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.4rem;
    min-width: 0;
}

/* La ranura en la cima de cada arco. Se enciende cuando entra la
   moneda. */
.pd-ranura {
    position: absolute;
    z-index: 3;
    top: -0.32rem;
    left: 50%;
    translate: -50% 0;
    width: 1.7rem;
    height: 0.5rem;
    border-radius: 0 0 0.4rem 0.4rem;
    background: var(--pd-cobre);
}

.pd-ranura i {
    position: absolute;
    top: 0.14rem;
    left: 50%;
    translate: -50% 0;
    width: 1.05rem;
    height: 0.16rem;
    border-radius: 1rem;
    background: #1a0f0c;
    transition: background 300ms ease, box-shadow 300ms ease;
}

.pd-ventana.is-echando .pd-ranura i {
    background: #f6dcc4;
    box-shadow: 0 0 0.6rem #f6dcc4;
}

/* La moneda es la de EN VIVO y la de Mi música (`wurlitzer_coin.html`):
   cobre acuñado con el arco de Wurlitzer. Espera y de vez en cuando
   gira; las tres no giran juntas. */
.pd-moneda {
    position: absolute;
    z-index: 4;
    top: -1.75rem;
    left: 50%;
    display: grid;
    place-items: center;
    width: 1.64rem;
    height: 1.64rem;
    margin-left: -0.82rem;
    border-radius: 50%;
    background: linear-gradient(168deg, #f6c79c 0%, #dfa176 38%, #c8815c 66%, #a9663f 100%);
    box-shadow: 0 .19rem .56rem rgba(0, 0, 0, .5), 0 0 0 1px rgba(120, 60, 36, .9), inset 0 1px 0 rgba(255, 240, 220, .6), inset 0 -2px .3rem rgba(88, 38, 20, .45);
    animation: pd-moneda-gira 9s infinite;
}

.pd-ventana:nth-child(2) .pd-moneda { animation-delay: 1.1s; }
.pd-ventana:nth-child(3) .pd-moneda { animation-delay: 2.2s; }

.pd-moneda::before,
.pd-moneda-chica::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: .85;
    background: repeating-conic-gradient(from -12deg, #ffe0bd 0deg 3.2deg, #8c4a2c 3.2deg 6.4deg);
    -webkit-mask: radial-gradient(circle, transparent 0 84%, #000 85%);
    mask: radial-gradient(circle, transparent 0 84%, #000 85%);
}

.pd-moneda::after,
.pd-moneda-chica::after {
    content: "";
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: linear-gradient(168deg, #d99a6e, #b87249 62%, #a25f38);
    box-shadow: inset 0 2px .25rem rgba(84, 36, 20, .55), inset 0 -1px 0 rgba(255, 226, 196, .45);
}

.pd-moneda svg,
.pd-moneda-chica svg {
    position: relative;
    z-index: 2;
    width: 0.85rem;
    height: 0.85rem;
    color: #6b3320;
    filter: drop-shadow(0 1px 0 rgba(255, 236, 212, .6));
}

@keyframes pd-moneda-gira {
    0% { transform: perspective(22rem) rotateY(0); animation-timing-function: cubic-bezier(.36, .05, .28, 1); }
    11%, 100% { transform: perspective(22rem) rotateY(360deg); }
}

.pd-ventana.is-llena .pd-moneda,
.pd-ventana.is-sin-moneda .pd-moneda {
    visibility: hidden;
    animation: none;
}

.pd-ventana.is-echando .pd-moneda {
    visibility: visible;
    animation: pd-moneda-cae 0.5s cubic-bezier(0.5, 0, 0.9, 0.5) forwards;
}

.pd-ventana.is-volviendo .pd-moneda {
    animation: pd-moneda-vuelve 0.55s cubic-bezier(.2, 1.3, .4, 1) both;
}

@keyframes pd-moneda-cae {
    0% { transform: perspective(22rem) translateY(0) rotateY(0); }
    40% { transform: perspective(22rem) translateY(0.3rem) rotateY(84deg); opacity: 1; }
    100% { transform: perspective(22rem) translateY(1.1rem) rotateY(90deg); opacity: 0; }
}

@keyframes pd-moneda-vuelve {
    from { transform: translateY(-1.2rem); opacity: 0; }
}

/* El vidrio tiene la forma del arco: vacío deja ver los surcos de un
   disco; lleno, la carátula de lo que pediste. */
.pd-marco {
    position: relative;
    width: 100%;
}

.pd-vidrio {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 240 / 290;
    padding: 0;
    overflow: hidden;
    border: 2px solid rgb(from var(--accent) r g b / 0.42);
    border-radius: 999px 999px 0.8rem 0.8rem;
    background:
        radial-gradient(circle at 50% 30%, rgba(215, 138, 99, 0.1), transparent 60%),
        #0e0a0b;
    transition: border-color 400ms ease, box-shadow 400ms ease;
}

.pd-vidrio:disabled {
    cursor: default;
}

.pd-vidrio:focus-visible {
    outline: 2px solid var(--pd-cobre-f);
    outline-offset: 3px;
}

.pd-surcos {
    position: absolute;
    inset: 22% 18% auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(241, 232, 219, 0.05) 0 1px, transparent 1px 4px);
    opacity: 0.8;
}

.pd-vidrio img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: translateY(102%);
    transition: transform 550ms cubic-bezier(.2, .9, .25, 1);
}

.pd-ventana.is-llena .pd-vidrio {
    border-color: var(--pd-cobre-f);
    box-shadow: 0 0 1.1rem rgba(215, 138, 99, 0.35);
}

.pd-ventana.is-llena .pd-vidrio img {
    transform: translateY(0);
}

.pd-ventana.is-saliendo .pd-vidrio img {
    transform: translateY(102%);
    transition-timing-function: cubic-bezier(.5, 0, .9, .5);
}

/* Retirar aparece al tocar el arco: el primer toque es la pregunta y
   el segundo, la respuesta. Escondido con `visibility` para que el
   teclado tampoco llegue a un botón que no se ve. */
.pd-ventana-retiro {
    position: absolute;
    z-index: 2;
    inset: auto 0.4rem 0.45rem;
    margin: 0;
    display: grid;
    gap: 0.3rem;
    visibility: hidden;
    opacity: 0;
    translate: 0 0.4rem;
    transition: opacity 200ms ease, translate 200ms ease, visibility 0s 200ms;
}

.pd-ventana.is-abierta .pd-ventana-retiro {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition-delay: 0s;
}

.pd-retirar {
    width: 100%;
    min-height: 2rem;
    padding: 0 0.4rem;
    border: 1px solid rgba(241, 232, 219, 0.18);
    border-radius: 999px;
    background: rgba(12, 9, 10, 0.88);
    color: var(--pd-txt-fuerte);
    font: 800 0.7rem "Sora", sans-serif;
}

/* Volver a escuchar lo pedido (17 oct 2026). Tocar la carátula es
   escucharla, como en las filas: un ▶ chico en cobre lo avisa. El arco que
   suena se enciende y los otros se apagan un poco, para que se lea cuál es. */
.pd-vidrio-oir {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0.5rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgb(from var(--accent) r g b / 0.7);
    border-radius: 50%;
    background: rgba(12, 9, 10, 0.78);
    color: var(--pd-cobre-f);
    translate: -50% 0;
    opacity: 0;
    transition: opacity 300ms ease, background 200ms ease, color 200ms ease;
}

.pd-vidrio-oir svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: currentColor;
}

.pd-vidrio-oir .pd-pausa,
.pd-ventana.is-sonando .pd-vidrio-oir .pd-ir { display: none; }
.pd-ventana.is-sonando .pd-vidrio-oir .pd-pausa { display: block; }

.pd-ventana.is-llena[data-pd-spotify]:not([data-pd-spotify=""]) .pd-vidrio-oir { opacity: 1; }

.pd-ventana.is-sonando .pd-vidrio-oir {
    background: var(--pd-cobre-f);
    color: #1a0f0b;
}

.pd-ventana.is-sonando .pd-vidrio {
    border-color: #f3c29c;
    box-shadow: 0 0 1.6rem rgba(239, 177, 132, 0.55);
}

.pd-ventana .pd-vidrio img { transition: transform 550ms cubic-bezier(.2, .9, .25, 1), filter 250ms ease; }
.pd-ventanas.hay-sonando .pd-ventana.is-llena:not(.is-sonando) .pd-vidrio img { filter: brightness(0.55) saturate(0.7); }
.pd-ventanas.hay-sonando .pd-ventana.is-llena:not(.is-sonando) .pd-vidrio { box-shadow: none; }

/* Bajo los arcos: la demo y «Retirar», con el símbolo de expulsar. */
.pd-sonando[hidden], .pd-sonando-oir[hidden] { display: none; }
.pd-sonando {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.pd-sonando-oir {
    overflow: hidden;
    border-radius: 12px;
}

.pd-sonando-retirar {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0 1.1rem 0 0.9rem;
    border: 1px solid rgba(241, 232, 219, 0.18);
    border-radius: 999px;
    background: rgba(12, 9, 10, 0.6);
    color: var(--pd-txt-fuerte);
    font: 800 0.8rem "Sora", sans-serif;
}

.pd-expulsar {
    width: 1rem;
    height: 1rem;
    fill: var(--pd-cobre-f);
    flex: none;
}

.pd-sonando-retirar:focus-visible {
    outline: 2px solid var(--pd-cobre-f);
    outline-offset: 2px;
}

.pd-retirar:focus-visible {
    outline: 2px solid var(--pd-cobre-f);
    outline-offset: 2px;
}

.pd-ventana-nombre {
    display: -webkit-box;
    width: 100%;
    min-height: 2.1rem;
    overflow: hidden;
    color: var(--pd-txt-sec);
    font: 700 0.7rem/1.25 "Manrope", sans-serif;
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pd-ventana.is-llena .pd-ventana-nombre {
    color: var(--pd-txt-fuerte);
}

/* Sin pedidos no hay nombres: el lugar no se guarda vacío. */
.pd-ventanas:not(:has(.is-llena, .is-reservada)) .pd-ventana-nombre {
    min-height: 0;
}

.pd-ventana-espera {
    margin-top: -0.25rem;
    color: var(--pd-salvia-txt);
    font-size: 0.6rem;
    font-weight: 800;
    text-align: center;
}

.pd-maquina-aviso {
    margin: 0;
    color: #ff9d92;
    font-size: 0.74rem;
    text-align: center;
}

.pd-maquina-aviso[hidden],
.pd-ventana-espera[hidden],
.pd-elige[hidden],
.pd-lleno[hidden],
.pd-pedir-zona[hidden],
.pd-despues[hidden],
.pd-ruleta-oir[hidden] {
    display: none !important;
}

/* Lo que pasa después de echar la moneda: suena tu canción y se
   pregunta la firma. Vive dentro de la máquina en vez de en un aviso
   que tapaba la pantalla. */
.pd-despues {
    display: grid;
    gap: 0.7rem;
}

.pd-despues > * {
    margin-top: 0;
}

.pd-elige {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.9rem;
    border: 1px solid rgba(239, 177, 132, 0.4);
    border-radius: 999px;
    background: rgb(from var(--accent) r g b / 0.1);
    color: #efb184;
    font: 800 0.84rem "Sora", sans-serif;
    transition: background 200ms ease, border-color 200ms ease;
}

.pd-elige:hover,
.pd-elige:focus-visible {
    border-color: rgba(239, 177, 132, 0.7);
    background: rgb(from var(--accent) r g b / 0.18);
}

.pd-elige:focus-visible {
    outline: 2px solid var(--pd-cobre-f);
    outline-offset: 2px;
}

.pd-elige:active { scale: 0.98; }

.pd-elige svg {
    width: 1.25rem;
    height: 1.25rem;
}

.pd-elige-disco {
    transform-origin: 50% 50%;
    animation: pd-disco-gira 3.2s linear infinite;
}

@keyframes pd-disco-gira { to { transform: rotate(360deg); } }

.pd-lleno {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/* El disco que vuela de la fila a su arco. */
.pd-vuela {
    position: fixed;
    z-index: 1300;
    max-width: none;
    border-radius: 10px;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.6);
}

/* ---------- Que elija la Wurlitzer ---------- */
.pd-ruleta {
    width: min(100%, 27rem);
    max-width: 100%;
    max-height: 100%;
    margin: auto auto 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(215, 138, 99, 0.45);
    border-bottom: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    color: var(--pd-txt-fuerte);
    background:
        radial-gradient(circle at 50% 18%, rgba(215, 138, 99, 0.24), transparent 16rem),
        linear-gradient(175deg, #211417, #0e0a0b 75%);
}

/* En un teléfono muy chico la hoja no cabe entera: se desliza por
   dentro en vez de cortar «Girar otra vez». */
.pd-ruleta {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pd-ruleta[open] {
    animation: pd-sube 380ms cubic-bezier(.2, .8, .25, 1) both;
}

.pd-ruleta::backdrop {
    background: rgba(3, 3, 4, 0.78);
    backdrop-filter: blur(6px);
}

@keyframes pd-sube { from { translate: 0 100%; } }

.pd-ruleta-caja {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
}

.pd-ruleta-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pd-ruleta-cabeza span {
    color: var(--pd-cobre-f);
    font: 800 0.64rem "Manrope", sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.pd-ruleta-cerrar {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--pd-txt-ter);
}

.pd-ruleta-cerrar svg {
    width: 0.95rem;
    height: 0.95rem;
}

.pd-ruleta-estilos {
    margin: 0;
}

.pd-carrusel {
    position: relative;
    height: 11.5rem;
    overflow: hidden;
    perspective: 50rem;
    /* La rueda se agarra con el dedo: lo horizontal es suyo, lo vertical
       sigue siendo de la hoja. */
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.pd-carrusel.is-agarrada {
    cursor: grabbing;
}

.pd-anillo {
    position: absolute;
    top: 0.8rem;
    left: 50%;
    width: 8.4rem;
    height: 8.4rem;
    margin-left: -4.2rem;
    transform-style: preserve-3d;
    /* Lo mueve el guion cuadro a cuadro: gire sola o con el dedo. */
    will-change: transform;
}

.pd-anillo-disco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 10px;
    backface-visibility: hidden;
    background: #1a1214;
    box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.pd-anillo-disco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

.pd-carrusel::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2.2rem;
    background: radial-gradient(ellipse at 50% 100%, rgba(215, 138, 99, 0.25), transparent 70%);
}

/* La hoja está pegada abajo: si algo adentro crece, sube de golpe.
   Por eso lo elegido ocupa siempre el mismo alto —estilo, título de
   hasta dos líneas y artista en una— y el reproductor tiene su lugar
   desde que se abre (Jaime, 3 oct 2026). */
.pd-elegida {
    display: grid;
    grid-template-rows: 1.3rem 2.7rem 1.2rem;
    align-items: center;
    justify-items: center;
    gap: 0.3rem;
    height: 6rem;
    min-width: 0;
    text-align: center;
    transition: opacity 250ms ease;
}

.pd-elegida-sobre {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.pd-elegida .pd-estilo {
    font-size: 0.76rem;
}

.pd-elegida .pd-estilo .pd-chip-disco {
    width: 1.2rem;
    height: 1.2rem;
}

.pd-elegida.is-girando {
    opacity: 0;
}

.pd-elegida strong {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    font: 800 1.12rem/1.2 "Sora", sans-serif;
    text-wrap: balance;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pd-elegida .pd-artista {
    max-width: 100%;
    font-size: 0.82rem;
}

.pd-elegida .pd-artista.es-error {
    color: #ff9d92;
}

/* El lugar del reproductor: respira mientras gira y el reproductor
   aparece adentro cuando se detiene, sin mover nada. */
.pd-ruleta-oir-caja {
    height: 80px;
    overflow: hidden;
    border-radius: 12px;
    background: #121212;
}

.pd-ruleta-oir-caja.is-esperando {
    animation: pd-latir 1.5s ease-in-out infinite;
}

.pd-ruleta-oir {
    height: 100%;
    animation: pd-asomar 320ms ease both;
}

.pd-ruleta-oir iframe {
    display: block;
    border: 0;
}

.pd-ruleta-acciones {
    display: grid;
    gap: 0.25rem;
}

.pd-pedir-grande {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    border: 1px solid rgba(255, 221, 191, 0.5);
    border-radius: 999px;
    background: linear-gradient(135deg, #efb184, #cf7f58);
    color: var(--pd-tinta);
    font: 800 0.9rem "Sora", sans-serif;
    box-shadow: 0 0.6rem 1.5rem rgb(from var(--accent) r g b / 0.3);
}

.pd-pedir-grande:disabled {
    opacity: 0.45;
    cursor: default;
}

.pd-pedir-grande:focus-visible,
.pd-otra-vez:focus-visible,
.pd-ruleta-cerrar:focus-visible {
    outline: 2px solid var(--pd-cobre-f);
    outline-offset: 2px;
}

/* La moneda chica, la misma de arriba en tamaño de botón. */
.pd-moneda-chica {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: linear-gradient(168deg, #f6c79c 0%, #dfa176 38%, #c8815c 66%, #a9663f 100%);
    box-shadow: 0 0 0 1px rgba(120, 60, 36, .9), inset 0 1px 0 rgba(255, 240, 220, .6);
}

.pd-moneda-chica svg {
    width: 0.62rem;
    height: 0.62rem;
}

.pd-otra-vez {
    min-height: 2.6rem;
    border: 0;
    background: none;
    color: var(--pd-txt-sec);
    font: 700 0.8rem "Sora", sans-serif;
}

/* En pantallas bajas la hoja se compacta para caber entera. Va
   después de las reglas de la ruleta: con la misma fuerza gana la de
   más abajo. */
@media (max-height: 760px) {
    .pd-ruleta-caja {
        gap: 0.5rem;
        padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    }

    .pd-ruleta-estilos {
        gap: 0.4rem;
    }

    .pd-carrusel {
        height: 8.6rem;
    }

    .pd-anillo {
        top: 0.5rem;
        width: 6.6rem;
        height: 6.6rem;
        margin-left: -3.3rem;
    }

    .pd-elegida {
        grid-template-rows: 1.3rem 2.6rem 1.2rem;
        gap: 0.2rem;
        height: 5.5rem;
    }

    .pd-pedir-grande {
        min-height: 2.85rem;
    }

    .pd-otra-vez {
        min-height: 2.5rem;
    }
}

/* ---------- buscador ----------
   Se queda pegado arriba en el celular: la lista es de mil canciones y
   volver al buscador no puede costar un viaje de scroll. */
.pd-busca {
    position: sticky;
    top: 0;
    z-index: 6;
    padding: 0.35rem 0 0.5rem;
    background: linear-gradient(180deg, var(--bg) 76%, rgba(9, 9, 9, 0));
}

.pd-buscador {
    position: relative;
    display: flex;
    align-items: center;
}

/* El buscador se nota más (Jaime, 9 oct 2026: «lo más importante de esta
   pantalla es pedir tu canción», pensando en gente de más de 60): más alto,
   letra más grande y clara, borde y lupa en cobre. La máquina queda igual. */
.pd-lupa {
    position: absolute;
    left: 1rem;
    display: flex;
    color: #efb489;
    pointer-events: none;
}

.pd-lupa svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
}

.pd-shell .pd-buscador input[type="search"] {
    width: 100%;
    min-width: 0;
    min-height: 3.5rem;
    padding: 0.8rem 2.8rem 0.8rem 3rem;
    border: 1.5px solid rgba(215, 138, 99, .62);
    border-radius: 16px;
    background: #1a1213;
    box-shadow: 0 0 0 4px rgba(215, 138, 99, .08), 0 10px 26px -14px rgba(239, 180, 137, .5);
    font-family: inherit;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--pd-txt-fuerte);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pd-shell .pd-buscador input[type="search"]::placeholder {
    color: #ddd0c2;
    opacity: 1;
}

.pd-shell .pd-buscador input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.pd-shell .pd-buscador input[type="search"]:focus {
    border-color: var(--pd-borde-f);
    box-shadow: 0 0 0 3px rgb(from var(--accent) r g b / 0.15);
    outline: none;
}

.pd-borrar {
    position: absolute;
    right: 0.5rem;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pd-txt-ter);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, color 160ms ease;
}

.pd-borrar svg {
    width: 11px;
    height: 11px;
}

.pd-borrar.es-visible {
    opacity: 1;
    pointer-events: auto;
}

.pd-borrar:hover {
    color: var(--pd-txt-fuerte);
}

/* ---------- estilos como filtro ----------
   Lo primero que se elige en una pista es qué quieres bailar. Cada
   estilo es un disco chico con la etiqueta del color que le puso el
   anfitrión, el mismo idioma de la máquina (3 oct 2026: las pastillas
   de color plano «ya no entonaban»). El puesto se enciende en cobre y
   su disco gira. Son teclas del mismo ancho, con el disco arriba y el
   nombre abajo, todas en una línea y a la vista. Solo si un espacio
   tiene tantos estilos que no caben, la fila se desliza.

   `pill-genre-{paleta}` entrega `--gen` y `--gen-ink` sin pintar nada:
   lo pinta `.pill-genre`, que acá no va. */
.pd-estilos[hidden] {
    display: none !important;
}

.pd-estilos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(3.1rem, 1fr);
    gap: 0.25rem;
    margin-top: 0.2rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.pd-estilos::-webkit-scrollbar {
    display: none;
}

.pd-shell .pd-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-width: 0;
    min-height: 3.7rem;
    padding: 0.45rem 0 0.4rem;
    border: 1px solid rgba(241, 232, 219, 0.09);
    border-radius: 14px;
    background: linear-gradient(180deg, #1a1315, #120d0f);
    color: var(--pd-txt-sec);
    font: 800 0.62rem/1.15 "Manrope", sans-serif;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background 220ms ease, box-shadow 220ms ease;
}

.pd-shell .pd-chip:hover {
    border-color: rgba(var(--gen, 184, 106, 79), 0.55);
    color: var(--pd-txt-fuerte);
}

.pd-shell .pd-chip:focus-visible {
    outline: 2px solid var(--pd-cobre-f);
    outline-offset: 2px;
}

.pd-shell .pd-chip.es-puesto {
    border-color: rgba(239, 177, 132, 0.62);
    background:
        radial-gradient(circle at 50% 32%, rgba(var(--gen, 184, 106, 79), 0.36), transparent 2.6rem),
        linear-gradient(180deg, #2a1b17, #1a1012);
    color: var(--pd-txt-fuerte);
    box-shadow: 0 0 1rem rgba(215, 138, 99, 0.16), inset 0 1px 0 rgba(255, 220, 190, 0.08);
}

/* Un nombre de dos palabras se parte en dos líneas antes que
   cortarse. */
.pd-chip-nombre {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pd-chip .pd-chip-disco {
    width: 1.7rem;
    height: 1.7rem;
}

/* El disco: surcos negros, etiqueta del color del estilo y un brillo
   que deja ver el giro. «Todas» y «Cualquiera» llevan la etiqueta
   cobre de la casa. */
.pd-chip-disco {
    position: relative;
    flex: none;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background:
        radial-gradient(circle, #0b0809 0 9%, rgb(var(--gen, 184, 106, 79)) 10% 30%, #0b0809 31% 34%, transparent 35%),
        repeating-radial-gradient(circle, #241a1c 0 1px, #0e0a0b 1px 2.4px);
    box-shadow: 0 0 0 1px rgba(241, 232, 219, 0.14), 0 2px 6px rgba(0, 0, 0, 0.5);
}

.pd-chip-disco::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 20deg, transparent 0 30deg, rgba(255, 240, 225, 0.22) 50deg, transparent 75deg 200deg, rgba(255, 240, 225, 0.12) 225deg, transparent 250deg);
}

.pd-chip.es-puesto .pd-chip-disco {
    box-shadow: 0 0 0 1px rgba(239, 177, 132, 0.6), 0 0 0.7rem rgba(var(--gen, 184, 106, 79), 0.55);
    animation: pd-disco-gira 3.2s linear infinite;
}

/* Fiestas Patrias: la etiqueta es el esmalte azul con su estrella. */
.pill-genre-fiestas-patrias > .pd-chip-disco {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 1.8l3.09 6.57 6.91.95-5 5.07L18.18 22 12 18.6 5.82 22 7 14.39l-5-5.07 6.91-.95z'/%3E%3C/svg%3E") center / 38% no-repeat,
        radial-gradient(circle, #22459c 0 30%, #ce2e25 31% 34%, transparent 35%),
        repeating-radial-gradient(circle, #241a1c 0 1px, #0e0a0b 1px 2.4px);
}

/* ---------- lista ---------- */
.pd-titulillo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.05rem 0 0.7rem;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--pd-txt-ter);
}

.pd-titulillo::before,
.pd-titulillo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--pd-linea);
}

.pd-titulillo[hidden] {
    display: none !important;
}

.pd-lista {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

/* ---------- la espera ----------
   Un solo gesto para todo lo que tarda: la fila fantasma, con la misma
   forma que la de verdad —el cuadrado de la portada, las dos líneas de
   texto, la pastilla del botón— respirando en el sitio donde va a
   aparecer lo que se está buscando. Una pantalla en blanco con un
   buscador encima no parece que esté cargando, parece que se rompió.

   Respira con opacidad y no con un brillo que cruza: seis destellos
   moviéndose a la vez le cuestan trabajo a un teléfono viejo, y esto se
   mira de pie en una pista, no en un escritorio. */
.pd-fantasmas {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.pd-fantasmas[hidden] {
    display: none !important;
}

.pd-fantasma {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--pd-linea);
    border-radius: 14px;
    background: var(--pd-superficie);
    animation: pd-latir 1.5s ease-in-out infinite;
}

/* Cada una entra un pelo después que la anterior: el conjunto ondea en
   vez de parpadear todo junto, que es lo que se ve barato. */
.pd-fantasma:nth-child(2) { animation-delay: 0.12s; }
.pd-fantasma:nth-child(3) { animation-delay: 0.24s; }
.pd-fantasma:nth-child(4) { animation-delay: 0.36s; }
.pd-fantasma:nth-child(5) { animation-delay: 0.48s; }
.pd-fantasma:nth-child(6) { animation-delay: 0.6s; }

.pd-fantasma i {
    display: block;
    border-radius: 6px;
    background: rgba(241, 232, 219, 0.075);
}

.pd-fantasma-cara {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.pd-fantasma-copy {
    display: grid;
    gap: 0.4rem;
}

.pd-fantasma-copy i:first-child { height: 0.62rem; width: min(62%, 13rem); }
.pd-fantasma-copy i:last-child { height: 0.5rem; width: min(38%, 8rem); }

.pd-fantasma-btn {
    width: 5.2rem;
    height: 2.3rem;
    border-radius: 999px;
}

@keyframes pd-latir {
    50% { opacity: 0.45; }
}

/* La fila que está en el aire: canto cobre mientras el servidor
   responde, para reconocer cuál pediste aunque hayas seguido bajando. */
.pd-fila.is-esperando {
    border-color: var(--pd-borde-f);
    box-shadow: inset 3px 0 0 var(--pd-cobre);
}

/* La portada aparece en vez de aterrizar de golpe. */
@keyframes pd-asomar {
    from { opacity: 0; }
}

/* La fila es una grilla y no una hilera: el reproductor y el selector de
   estilo entran como una franja de ancho completo debajo, sin empujar
   nada de lo de arriba. */
.pd-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--pd-linea);
    border-radius: 14px;
    background: var(--pd-superficie);
    transition: border-color 180ms ease, background 220ms ease;
}

@media (hover: hover) {
    .pd-fila:hover {
        border-color: var(--pd-borde);
    }
}

.pd-fila-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pd-fila-copy strong {
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--pd-txt-fuerte);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El estilo nunca se recorta: se encoge el nombre del artista, que puede
   ser larguísimo, y la pastilla queda entera al final de la línea. */
.pd-fila-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    margin-top: 0.16rem;
    font-size: 0.72rem;
}

.pd-artista {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pd-txt-sec);
}

/* El estilo de cada fila, con el mismo disco de los filtros: en toda
   la pantalla un estilo es un disco con la etiqueta de su color. */
.pd-shell .pd-estilo {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--gen-ink, var(--pd-txt-sec));
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.pd-estilo .pd-chip-disco {
    width: 0.95rem;
    height: 0.95rem;
    box-shadow: 0 0 0 1px rgba(241, 232, 219, 0.12);
}

/* Lo que se sabe de la canción, para pedir variado sin prohibir nada
   (`services/pedir_variado.py`). Con rótulo, la línea se parte en dos
   en vez de esconderlo. */
.pd-fila-meta.con-datos {
    flex-wrap: wrap;
    row-gap: 0.3rem;
}

.pd-dato {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 1.3rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.pd-dato-sono {
    border: 1px dashed rgba(241, 232, 219, 0.22);
    color: var(--pd-txt-ter);
}

.pd-dato-otros {
    border: 1px solid var(--pd-salvia-borde);
    background: var(--pd-salvia-soft);
    color: var(--pd-salvia-txt);
}

.pd-dato-tuya {
    border: 1px solid rgba(239, 177, 132, 0.45);
    background: rgb(from var(--accent) r g b / 0.14);
    color: #efb184;
}

/* ---------- la carátula es el botón de escuchar ----------
   Antes había un disco dibujado con surcos: bonito, pero era un adorno
   igual en las mil filas. La portada del disco de verdad distingue una
   canción de otra de un vistazo, y el triángulo encima dice que suena. */
.pd-cara {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(241, 232, 219, 0.09);
    border-radius: 10px;
    overflow: hidden;
    background: radial-gradient(circle at 32% 26%, #241a1c, #0d0a0b 70%);
    cursor: pointer;
    transition: border-color 180ms ease;
}

.pd-cara img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: pd-asomar 320ms ease both;
}

/* área tocable real de 44px sin agrandar la portada */
.pd-cara::after {
    content: "";
    position: absolute;
    width: 44px;
    height: 44px;
}

.pd-vela {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: rgba(9, 7, 8, 0.44);
    opacity: 0;
    transition: opacity 200ms ease, background 200ms ease;
}

.pd-cara.es-sola .pd-vela,
.pd-cara:hover .pd-vela,
.pd-cara:focus-visible .pd-vela,
.pd-fila.is-sonando .pd-vela {
    opacity: 1;
}

.pd-fila.is-sonando .pd-vela {
    background: rgba(9, 7, 8, 0.62);
}

.pd-vela svg {
    width: 15px;
    height: 15px;
    color: #ffe6d2;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.pd-cara .pd-cerrar,
.pd-fila.is-sonando .pd-cara .pd-ir {
    display: none;
}

.pd-fila.is-sonando .pd-cara .pd-cerrar {
    display: block;
}

.pd-cara:hover,
.pd-fila.is-sonando .pd-cara {
    border-color: var(--pd-borde-f);
}

.pd-cara:focus-visible {
    outline: 2px solid var(--pd-cobre-f);
    outline-offset: 2px;
}

/* ---------- pedir ----------
   Veinticinco botones cobre macizo apilados apagan el cobre: deja de
   ser el acento de la casa y pasa a ser el fondo. El botón va de canto
   y se llena cuando lo apuntas, que es cuando importa. */
.pd-fila form {
    flex: none;
    margin: 0;
}

.pd-pedir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 5.2rem;
    min-height: 2.3rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--pd-borde-f);
    border-radius: 999px;
    background: rgb(from var(--accent) r g b / 0.1);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    color: #edbd9d;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.pd-pedir:hover,
.pd-pedir:focus-visible,
.pd-pedir[aria-expanded="true"] {
    border-color: transparent;
    background: linear-gradient(135deg, #f3bb90, #e5a271 46%, #c8815c);
    color: var(--pd-tinta);
}

.pd-pedir:focus-visible {
    outline: 2px solid var(--pd-cobre-f);
    outline-offset: 3px;
}

.pd-pedir .pd-moneda-chica {
    width: 1.05rem;
    height: 1.05rem;
}

.pd-pedir.is-loading .pd-moneda-chica {
    display: none;
}

.pd-pedir.is-loading {
    cursor: wait;
    opacity: 0.82;
}

.pd-pedir.is-loading::before {
    content: "";
    width: 0.72rem;
    height: 0.72rem;
    border: 2px solid rgba(237, 189, 157, 0.3);
    border-top-color: currentColor;
    border-radius: 999px;
    animation: pd-girar 0.7s linear infinite;
}

@keyframes pd-girar { to { transform: rotate(360deg); } }

.pd-hecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: none;
    min-width: 5.2rem;
    min-height: 2.3rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--pd-salvia-borde);
    border-radius: 999px;
    background: var(--pd-salvia-soft);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--pd-salvia-txt);
}

.pd-hecha svg {
    width: 11px;
    height: 11px;
    flex: none;
}

.pd-fila.is-pedida {
    border-color: var(--pd-salvia-borde);
    background: var(--pd-salvia-soft);
    box-shadow: inset 3px 0 0 var(--pd-salvia);
}

/* reproductor incrustado, igual que en Tendencias */
.pd-emb {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0.5rem;
    border: 1px solid rgba(241, 232, 219, 0.09);
    border-radius: 12px;
    overflow: hidden;
    background: #121212;
}

.pd-emb[hidden] {
    display: none !important;
}

/* El reproductor lo sirve Spotify y tarda lo suyo. El hueco se reserva
   con su alto exacto y respirando, así no queda un rectángulo negro
   mudo ni la lista pega un salto cuando por fin llega. */
.pd-emb.es-cargando {
    height: 80px;
    animation: pd-latir 1.5s ease-in-out infinite;
}

.pd-emb iframe {
    display: block;
    width: 100%;
    height: 80px;
    border: 0;
    animation: pd-asomar 260ms ease both;
}

/* ---------- elegir el estilo dentro de la fila ----------
   Se pliega con la grilla de afuera —de 0fr a 1fr— porque es la única
   forma de animar hasta un alto que no se sabe. El relleno y la línea
   van en el rótulo: dentro de una pista de 0fr no se recortan y la caja
   cerrada seguiría ocupando alto. */
.pd-generos {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 260ms;
}

.pd-generos.es-abierto {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.pd-generos-caja {
    display: grid;
    gap: 0.45rem;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.25rem);
    transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-generos.es-abierto .pd-generos-caja {
    opacity: 1;
    transform: none;
    transition-delay: 60ms;
}

.pd-generos-rotulo {
    margin-top: 0.15rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--pd-linea);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pd-txt-sec);
}

.pd-generos-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.pd-shell .pd-genero {
    min-height: 1.95rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.73rem;
    cursor: pointer;
    transition: box-shadow 180ms ease, transform 140ms ease;
}

.pd-shell .pd-genero:hover {
    box-shadow: 0 0 0 1px rgba(var(--gen, 184, 106, 79), 0.55);
}

.pd-shell .pd-genero:active {
    transform: scale(0.97);
}

/* ---------- avisos ---------- */
.pd-nota {
    margin: 0.9rem 0 0;
    padding: 1.15rem 0.75rem;
    border: 1px dashed var(--pd-linea);
    border-radius: 14px;
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: center;
    color: var(--pd-txt-ter);
}

.pd-nota[hidden] {
    display: none !important;
}

/* ---------- lo que hay en Spotify ----------
   Cuando el repertorio no la tiene, la búsqueda sigue sola: preguntar
   «¿quieres que busque?» es un clic para decir que sí a lo único que se
   podía querer ahí. */
.pd-sp {
    margin-top: 0.9rem;
    padding: 0.85rem 0.8rem 0.8rem;
    border: 1px solid var(--pd-borde);
    border-radius: 16px;
    background: rgb(from var(--accent) r g b / 0.055);
}

.pd-sp[hidden] {
    display: none !important;
}

.pd-sp-cabeza {
    margin-bottom: 0.75rem;
}

.pd-sp-cabeza strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--pd-txt-fuerte);
}

.pd-sp-cabeza span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--pd-txt-sec);
}

.pd-sp .pd-fila {
    background: rgba(9, 7, 8, 0.55);
}

/* Nueve versiones de la misma canción se distinguen por el disco, no por
   el título: acá el álbum sí se muestra y el nombre puede usar dos
   líneas en vez de cortarse. */
.pd-sp .pd-fila-copy strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: initial;
}

/* Quién canta importa más que en qué disco venía: el artista se queda
   entero y el que se recorta es el álbum. Repartiendo el ahogo entre los
   dos, «Queen» terminaba escrito «Q…». */
.pd-sp .pd-artista {
    flex: none;
    max-width: 9rem;
}

.pd-album {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pd-txt-ter);
}

.pd-sep {
    flex: none;
    font-style: normal;
    color: var(--pd-txt-ter);
}

.pd-sp-estado {
    margin: 0.7rem 0 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--pd-txt-sec);
}

.pd-sp-estado:empty {
    margin: 0;
}

.pd-espera {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pd-espera::before {
    content: "";
    width: 0.72rem;
    height: 0.72rem;
    border: 2px solid rgb(from var(--accent) r g b / 0.25);
    border-top-color: var(--pd-cobre-f);
    border-radius: 999px;
    animation: pd-girar 0.7s linear infinite;
}

.pd-mas {
    margin: 0.7rem 0 0;
    font-size: 0.7rem;
    text-align: center;
    color: var(--pd-txt-ter);
}

.pd-mas[hidden] {
    display: none !important;
}

.pd-spotify-otra {
    display: block;
    width: fit-content;
    margin: 0.7rem auto 0;
    padding: 0.15rem;
    border: 0;
    border-bottom: 1px solid rgba(229, 162, 113, 0.45);
    background: transparent;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--pd-cobre-f);
    cursor: pointer;
}

.pd-spotify-otra:hover,
.pd-spotify-otra:focus-visible {
    border-bottom-color: currentColor;
    color: #f3bb90;
}

.pd-spotify-otra[hidden] {
    display: none !important;
}

.pd-enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--pd-linea);
    border-radius: 14px;
    background: var(--pd-superficie);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pd-txt-fuerte);
    text-decoration: none;
    transition: border-color 160ms ease;
}

.pd-enlace:hover,
.pd-enlace:focus-visible {
    border-color: var(--pd-borde);
}

.pd-enlace span:last-child {
    color: var(--pd-cobre-f);
}

/* Quien pidió menos movimiento igual tiene que saber que algo está
   cargando: los fantasmas se quedan quietos pero se quedan, y el canto
   cobre de la fila que espera no se mueve nunca. Lo único que se apaga
   es el latido y el giro. */
@media (prefers-reduced-motion: reduce) {
    .pd-fantasma,
    .pd-ruleta-oir-caja.is-esperando,
    .pd-moneda,
    .pd-elige-disco,
    .pd-ruleta[open],
    .pd-emb.es-cargando,
    .pd-cara img,
    .pd-emb iframe {
        animation: none;
    }

    .pd-pedir.is-loading::before,
    .pd-espera::before {
        animation-duration: 2.4s;
    }

    .pd-generos, .pd-generos-caja { transition-duration: 1ms; }

    .pd-anillo,
    .pd-vidrio img { transition: none; }
}

/* ---------- celular ----------
   En pantalla angosta la máquina va arriba: es lo primero que hay que
   saber. Debajo, la lista. */
@media (max-width: 899px) {
    .pd-grid {
        display: flex;
        flex-direction: column;
    }
}

/* ---------- celular estrecho ---------- */
@media (max-width: 420px) {
    .pd-pedir,
    .pd-hecha {
        min-width: 4.5rem;
        padding-inline: 0.7rem;
        font-size: 0.72rem;
    }

    .pd-fila {
        gap: 0.55rem;
        padding-inline: 0.5rem;
    }
}

/* ---------- escritorio ----------
   La máquina pasa a la columna de al lado y se queda quieta mientras
   la lista corre: se ve llenarse los arcos sin subir. */
@media (min-width: 900px) {
    .pd-titulo {
        font-size: 1.75rem;
    }

    .pd-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem);
        column-gap: 1.9rem;
        align-items: start;
        margin-top: 1.1rem;
    }

    .pd-lado {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 1.5rem;
    }

    .pd-col {
        grid-column: 1;
        grid-row: 1;
    }

    .pd-maquina {
        margin-top: 0;
    }

    .pd-busca {
        position: static;
        padding: 0;
        background: none;
    }

    .pd-pedir-zona > .pd-estilos {
        grid-auto-columns: minmax(4.6rem, 6.4rem);
        justify-content: start;
    }
}

/* ---------- la racha en la máquina (9 oct 2026) ----------
   Cada evento seguido enciende un marco, de izquierda a derecha; la ranura
   y la ficha se encienden con él, así la luz no se corta arriba. La tercera
   sin premio va cerrada: ventana apagada y ficha dormida, quieta. Quien es
   de la casa tiene las fichas doradas y los tres marcos siempre encendidos.
   Ver `services/logros.py`. */
.pd-ranura { transition: background 450ms ease, box-shadow 450ms ease; }
.pd-ventana.is-encendida .pd-vidrio {
    border-color: #efb489;
    box-shadow: 0 0 1rem rgba(239, 180, 137, .45), inset 0 0 .8rem rgba(239, 180, 137, .12);
}
.pd-ventana.is-encendida .pd-ranura { background: #efb489; box-shadow: 0 0 .6rem rgba(239, 180, 137, .6); }
.pd-ventana.is-encendida .pd-moneda {
    box-shadow: 0 0 .8rem rgba(239, 180, 137, .55), 0 0 0 1px rgba(120, 60, 36, .9), inset 0 1px 0 rgba(255, 240, 220, .6), inset 0 -2px .3rem rgba(88, 38, 20, .45);
}
.pd-ventana.is-cerrada .pd-ranura { background: #4a332b; box-shadow: none; }
.pd-ventana.is-cerrada .pd-vidrio {
    border-color: rgba(215, 138, 99, .16);
    background: #0b0809;
    box-shadow: none;
    cursor: pointer;
}
.pd-ventana.is-cerrada .pd-surcos { opacity: .35; }
.pd-ventana.is-cerrada .pd-moneda {
    animation: none;
    background: linear-gradient(168deg, #5a4038 0%, #3e2c26 50%, #2a1d19 100%);
    box-shadow: 0 .19rem .5rem rgba(0, 0, 0, .5), 0 0 0 1px rgba(70, 46, 38, .9);
}
.pd-ventana.is-cerrada .pd-moneda::before { opacity: .25; }
.pd-ventana.is-cerrada .pd-moneda::after { background: linear-gradient(168deg, #463229, #31221d); box-shadow: inset 0 2px .25rem rgba(0, 0, 0, .45); }
.pd-ventana.is-cerrada .pd-moneda svg { color: #1c1210; filter: none; }
.pd-ventana.is-dorada .pd-moneda {
    background: linear-gradient(160deg, #fff4e0 0%, #f2d2a6 35%, #e0ae7c 70%, #b98055 100%);
    box-shadow: 0 0 0 1px rgba(150, 96, 58, .9), 0 0 .9rem rgba(242, 210, 166, .5), inset 0 2px 0 rgba(255, 255, 255, .7);
}
.pd-ventana.is-dorada .pd-moneda::after { background: linear-gradient(160deg, #f6dcb4, #d9a574 60%, #c08a5c); }
.pd-ventana.is-dorada .pd-moneda svg { color: #7a4626; }
.pd-ventana.is-encendida.is-dorada .pd-vidrio {
    border-color: #f2d2a6;
    box-shadow: 0 0 1rem rgba(242, 210, 166, .4), inset 0 0 .8rem rgba(242, 210, 166, .1);
}
.pd-ventana.is-encendida.is-dorada .pd-ranura { background: #f2d2a6; box-shadow: 0 0 .6rem rgba(242, 210, 166, .55); }

/* La hoja de la tercera ficha cerrada */
.pd-hoja-racha {
    width: min(22rem, calc(100vw - 2rem));
    padding: 1.6rem 1.4rem 1.3rem;
    border: 1px solid rgba(215, 138, 99, .35);
    border-radius: 22px;
    background: linear-gradient(180deg, #24181a, #120d0e);
    color: #f6f1e8;
    text-align: center;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .6);
}
.pd-hoja-racha::backdrop { background: rgba(6, 5, 6, .7); }
.pd-hoja-racha h2 { margin: 0 0 .5rem; font: 800 1.3rem/1.2 "Sora", sans-serif; }
.pd-hoja-racha p { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.45; color: #cfc4b8; }
.pd-hoja-racha-ok {
    width: 100%;
    min-height: 3.1rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #efb489 0%, #c8815c 100%);
    color: #1f0f07;
    font: 800 1rem/1 "Sora", sans-serif;
    cursor: pointer;
}