/* Las vitrinas de la portada y de «Cómo funciona» (31 oct 2026).

   Son pantallas del producto armadas con sus propias hojas (pedir, el match,
   la racha), y `static/js/vitrinas.js` las hace actuar cuando entran en
   pantalla: cae la ficha, se desliza la canción, se prende la racha. Acá va lo
   que no existe en ninguna hoja de pantalla: la tarjeta de la ronda, que en el
   producto la dibuja un guion, y los estados de «tocado» de los botones.

   Jaime, 31 oct 2026: la página «se siente plana», hay que maximizar
   «entusiasmo, sorpresa y diversión». El movimiento sale de las piezas de la
   casa, no de efectos de discoteca (ver la guía de identidad). */

/* Un botón de la vitrina que el guion «toca». */
.vt-tocado {
    scale: .9;
    filter: brightness(1.3);
}

.vt-escena .pd-pedir,
.vt-escena .vt-voto,
.vt-escena .cf-rv-boton { transition: scale .14s ease, filter .14s ease; }

/* ===== Pedir: la demo que se toca =====
   Nada anda solo: se pide fila por fila, los estilos cambian la lista y «Que
   elija la Wurlitzer» abre su hoja adentro del teléfono (31 oct 2026). */

.vt-pedir { position: relative; }

/* Las listas de los otros estilos esperan aquí. Sin `[hidden]`: es una de
   las trampas de app.css. */
.vt-pedir .vt-oculta { display: none; }

/* El lugar del nombre bajo cada arco se guarda desde el principio. En
   pedir.css se esconde mientras no hay pedidos, y acá el primer pedido hacía
   crecer el teléfono (Jaime: «debe ser del mismo tamaño siempre»). */
.vt-escena.vt-pedir .pd-ventanas .pd-ventana-nombre { min-height: 2.1rem; }

/* En pedir.css «Retirar» es un <button>, que centra solo su texto. */
.vt-pedir .pd-retirar { display: grid; place-items: center; }

/* Sin fichas, lo que pide se apaga hasta que se retire una canción. */
.vt-pedir [aria-disabled="true"]:not(.pd-hecha) { opacity: .4; pointer-events: none; }

.vt-pedir .pd-pedir-grande[aria-disabled="true"] { opacity: .45; }

/* La hoja de la ruleta: la misma de pedir.css, pegada al fondo de la
   pantalla, con su velo. En el producto es un <dialog>. */
.vt-ruleta {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    align-items: flex-end;
    background: rgba(3, 3, 4, .78);
    backdrop-filter: blur(6px);
}

.vt-ruleta.is-abierta { display: flex; }
.vt-ruleta .pd-ruleta { animation: pd-sube 380ms cubic-bezier(.2, .8, .25, 1) both; }
.vt-ruleta .pd-pedir-grande,
.vt-ruleta .pd-otra-vez { display: inline-flex; align-items: center; justify-content: center; }

/* ===== Pedir: el buscador sin campo =====
   En pedir.css el borde y el fondo los lleva el `input`; acá, sin campo, los
   lleva el texto de ayuda, con las mismas medidas. */

.vt-busca-tx {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    min-height: 3.5rem;
    padding: 0 1rem 0 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);
    color: #ddd0c2;
    font: 700 1.06rem "Manrope", sans-serif;
}

.vt-escena .pd-busca { position: static; margin-top: .9rem; }
.vt-escena .pd-buscador .pd-lupa { z-index: 1; }

/* La carátula que vuela de la fila al arco, como en Pedir. */
.vt-vuela {
    position: fixed;
    z-index: 50;
    border-radius: 8px;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

/* ===== la ronda de votos =====
   La tarjeta de verdad la dibuja un guion en `vote_jornada.html`, medida
   sobre la pantalla. Acá va armada: el arco con su luz, las ampolletas, la
   carátula y los tres botones con los colores de votar.css. */

.vt-ronda { display: grid; gap: 1rem; }

.vt-ronda-marco {
    position: relative;
    width: 100%;
    aspect-ratio: 240 / 300;
}

.vt-ronda-arco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vt-ronda-arco .vt-riel { fill: none; stroke: #33201a; stroke-width: 3; }

.vt-ronda-arco .vt-luz {
    fill: none;
    stroke: #d78a63;
    stroke-width: 3;
    stroke-dasharray: 70 100;
    transition: stroke-dasharray .6s cubic-bezier(.4, 0, .2, 1);
}

.vt-ronda-arco circle { fill: #3a2a24; transition: fill .3s ease; }
.vt-ronda-arco circle.is-prendida { fill: #fff3dc; filter: drop-shadow(0 0 3px rgba(242, 210, 166, .95)); }
.vt-ronda.is-completa .vt-ronda-arco circle { animation: vt-fiesta .5s ease-in-out 3 alternate; }
.vt-ronda.is-completa .vt-ronda-arco circle:nth-of-type(even) { animation-delay: .25s; }

@keyframes vt-fiesta {
    from { fill: #fff3dc; }
    to { fill: #d78a63; }
}

.vt-ronda-vidrio {
    position: absolute;
    inset: 6% 7.5% 0;
    overflow: hidden;
    border-radius: 999px 999px 18px 18px;
    background: #10131f;
}

/* La carátula difuminada de fondo, como en la ronda. */
.vt-ronda-fondo {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    max-width: none;
    object-fit: cover;
    filter: blur(26px) brightness(.42) saturate(1.2);
    transition: opacity .4s ease;
}

.vt-ronda-carta {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 2.6rem 1rem 1.1rem;
    will-change: transform;
}

.vt-ronda-cara {
    position: relative;
    width: 84%;
    aspect-ratio: 1;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}

/* Los sellos de votar.css: el pulgar que aparece al inclinar la tarjeta. */
.vt-sello {
    position: absolute;
    top: 3.4rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 4.1rem;
    height: 4.1rem;
    border: 2.5px solid currentColor;
    border-radius: 1.05rem;
    background: rgba(8, 9, 10, .52);
    opacity: 0;
    scale: .85;
    transition: opacity .12s ease, scale .12s ease;
}

.vt-sello svg { width: 1.95rem; height: 1.95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vt-sello.is-si { left: 1.6rem; color: #b8e0d8; rotate: -10deg; }
.vt-sello.is-no { right: 1.6rem; color: #f0c8c2; rotate: 10deg; }
.vt-sello.is-visible { opacity: 1; scale: 1; }

.vt-ronda-tx { position: relative; justify-self: stretch; margin-top: 1rem; }
.vt-ronda-pildoras { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 1.3rem; }

.vt-ronda-suya {
    display: inline-flex;
    align-items: center;
    padding: .28rem .6rem;
    border-radius: 999px;
    background: #e3b28f;
    color: #2a1109;
    font: 800 .66rem/1 "Manrope", sans-serif;
}

.vt-ronda-suya:empty { display: none; }
.vt-ronda-tx strong { display: block; margin-top: .55rem; overflow: hidden; color: #fff7ee; font: 800 1.6rem/1.1 "Sora", sans-serif; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.vt-ronda-tx small { display: block; margin-top: .2rem; overflow: hidden; color: rgba(255, 247, 238, .66); font: 600 .95rem "Manrope", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.vt-escena .pill { padding: .28rem .5rem; font-size: .6rem; line-height: 1; }

.vt-ronda-botones { display: flex; align-items: flex-start; justify-content: center; gap: 1.6rem; }

.vt-voto {
    display: inline-grid;
    place-items: center;
    width: 3.7rem;
    height: 3.7rem;
    border-radius: 999px;
}

.vt-voto svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vt-voto.is-no { border: 1px solid rgba(212, 117, 106, .28); background: rgba(212, 117, 106, .09); color: #f0c8c2; }
.vt-voto.is-si { border: 1px solid rgba(107, 184, 165, .28); background: rgba(107, 184, 165, .09); color: #b8e0d8; }
.vt-voto.is-no.vt-tocado { background: rgba(212, 117, 106, .26); border-color: rgba(212, 117, 106, .7); }
.vt-voto.is-si.vt-tocado { background: rgba(107, 184, 165, .26); border-color: rgba(107, 184, 165, .7); }
.vt-pasar { display: grid; justify-items: center; gap: .3rem; margin-top: .45rem; }

.vt-voto.is-pasar {
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 247, 238, .55);
}

.vt-voto.is-pasar svg { width: 1.05rem; height: 1.05rem; }
.vt-pasar small { color: rgba(255, 247, 238, .45); font: 800 .62rem "Manrope", sans-serif; letter-spacing: .14em; text-transform: uppercase; }

/* ===== el match: la tarjeta de celebracion-match.css, quieta ===== */

.vt-escena .vote-match-card { width: 100%; margin: 0 auto; padding-top: .4rem; }
.vt-escena .vote-match-arco { width: min(100%, 300px); }
.vt-escena .vote-match-compartir { display: inline-grid; place-items: center; }

/* ===== la racha: las piezas de racha.css ===== */

.vt-racha { display: grid; justify-items: center; gap: 1.4rem; padding: 1.4rem 0 .8rem; }
.vt-racha .rv-numero { font-size: 84px; }
.vt-racha .rv-fila { padding: 2.2rem 0 0; }
/* En la ventana la ficha de la próxima entra animada; acá ya llegó. */
.vt-racha .rv-ventana > .rv-ficha { opacity: 1; }
.vt-racha .rv-vidrio img { transition: transform .5s cubic-bezier(.2, .9, .25, 1); }
.vt-racha .rv-ventana:not(.is-lista) .rv-vidrio img { transform: translateY(105%); }

@media (prefers-reduced-motion: reduce) {
    .vt-ronda-arco .vt-luz,
    .vt-ronda-fondo,
    .vt-racha .rv-vidrio img { transition: none; }
    .vt-ronda.is-completa .vt-ronda-arco circle { animation: none; }
}