/* Recompensas con puntos: catálogo (recompensas.php), código del canje
   (canje.php y qr.php) y el código escrito a mano en el panel de discoteca
   (panel-discoteca.php: .validacion__codigo y .validacion__resultado). */

.recompensas__cabecera { max-width: 640px; margin-bottom: 28px; }
.recompensas__saldo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.recompensas__pasos { display: grid; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; color: var(--texto-suave); font-size: .9375rem; }
.recompensas__pasos li { padding-left: 1.6em; text-indent: -1.6em; }

/* Sin recompensas todavía: la frase encendida como el cero del 404
   (.no-encontrado__cifra y su animación neon-404 están en base.css). */
.recompensas-vacio { padding-block: 24px 48px; text-align: center; }
.recompensas-vacio__neon {
    max-width: 20ch;
    margin: 0 auto 16px;
    font-size: clamp(1.75rem, 1.1rem + 3.2vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--acento);
    text-shadow: 0 0 18px color-mix(in srgb, var(--acento) 55%, transparent),
                 0 0 48px color-mix(in srgb, var(--acento) 30%, transparent);
    animation: neon-404 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .recompensas-vacio__neon { animation: none; }
}
.recompensas-vacio .texto-suave { max-width: 440px; margin-inline: auto; }

.recompensas-locales { display: grid; gap: 16px; }
.recompensa-local h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.recompensa-local h2 small { color: var(--texto-suave); font-size: .875rem; font-weight: 400; }

.lista-recompensas { margin: 0; padding: 0; list-style: none; }
.lista-recompensas li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--borde);
}
.lista-recompensas li:first-child { border-top: 0; padding-top: 4px; }
.recompensa__datos { flex: 1 1 220px; min-width: 0; }
.recompensa__nombre { margin: 0; font-weight: 600; }
.recompensa__detalle { margin: 2px 0 0; color: var(--texto-suave); font-size: .875rem; }
.recompensa__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.recompensa__puntos { font-weight: 600; white-space: nowrap; }
.recompensa__accion form { margin: 0; }

/* Código del canje */
.canje { max-width: 440px; margin-inline: auto; text-align: center; }
.canje h1 { margin-bottom: 6px; }
.qr { display: block; width: min(280px, 78vw); height: auto; margin: 20px auto 12px; border-radius: var(--radio-pequeno); }
.canje__codigo {
    margin: 0 0 8px;
    font: 600 1.75rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
}
.canje__estado { margin: 20px 0; }
.canje .fila-acciones { justify-content: center; }

/* Código escrito a mano en la puerta (panel de discoteca) */
.validacion__codigo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.validacion__codigo .campo { flex: 1 1 200px; margin: 0; }
.validacion__codigo input { text-transform: uppercase; letter-spacing: .08em; }
.validacion__resultado {
    margin: 20px 0;
    padding: 18px 20px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--superficie);
}
.validacion__resultado--ok { border-color: var(--exito); }
.validacion__resultado--error { border-color: var(--error); }
.validacion__resultado h2 { margin-bottom: 6px; font-size: 1.375rem; }
.validacion__resultado--ok h2 { color: var(--exito); }
.validacion__resultado--error h2 { color: var(--error); }
.validacion__resultado p { margin: 4px 0; }
.validacion__resultado form { margin-top: 14px; }

/* Tarjeta de qr/{código} (qr.php, js/tarjeta-giro.js): se gira deslizando en
   horizontal o con sus botones, y lleva un reflejo que cruza al girarla y, en
   reposo, de vez en cuando. El vertical sigue siendo scroll (touch-action: pan-y).
   El reflejo queda fuera de la tarjeta en reposo (--reflejo 100 %) para no tapar
   el QR. Las dos caras van en la misma celda de la rejilla: la tarjeta mide lo
   que la más alta. */
.giro { max-width: 440px; margin-inline: auto; perspective: 1200px; touch-action: pan-y; cursor: grab; }
.giro--arrastrando { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.giro__interior {
    display: grid;
    transform: rotateY(var(--giro, 0deg));
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.giro--arrastrando .giro__interior { transition: none; }
.giro__cara {
    grid-area: 1 / 1;
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
}
.giro__cara--dorso { transform: rotateY(180deg); }
.giro__reflejo {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .05) 52%, transparent 64%),
        linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 38%);
    background-size: 250% 100%, 100% 100%;
    background-position: var(--reflejo, 100%) 0, 0 0;
    background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
    .giro:not(.giro--arrastrando):not(.giro--movido) .giro__reflejo { animation: reflejo-tarjeta 7s ease-in-out 1s infinite; }
}
@keyframes reflejo-tarjeta {
    0% { background-position: 100% 0, 0 0; }
    22%, 100% { background-position: 0% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .giro__interior { transition: none; }
}
/* «Reserva mesa en el plano 3D», bajo el QR: le da la vuelta (sin JS no sale). */
.giro__girar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 18px auto 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 45%, #ff3d8b));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--acento) 35%, transparent);
    color: var(--fondo);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

/* Dorso: el plano 3D de la discoteca para reservar mesa (js/plano-qr.js).
   Arriba la barra (volver al QR, la fiesta y «Reservar»): deslizar sobre ella
   gira la tarjeta; sobre el plano, mueve el plano. Mientras se ve el QR, el
   iframe va oculto: no se pinta (ni asoma por delante si un navegador no
   respeta backface-visibility en un iframe). */
.giro__cara--plano { display: flex; flex-direction: column; padding: 0; }
.plano-qr {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: min(600px, calc(100vh - 140px));
    min-height: min(600px, calc(100svh - 140px));
}
.plano-qr__barra { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.plano-qr__volver {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}
.plano-qr__titulo { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .875rem; line-height: 1.3; text-align: left; }
.plano-qr__titulo strong, .plano-qr__titulo span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plano-qr__titulo span { color: var(--texto-suave); font-size: .8125rem; }
.plano-qr__titulo span:empty { display: none; }
.plano-qr__reservar {
    flex: none;
    padding: 7px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 45%, #ff3d8b));
    color: var(--fondo);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}
.plano-qr__marco { position: relative; flex: 1 1 auto; min-height: 260px; background: #0b0b10; }
.plano-qr__plano { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.giro:not(.giro--dorso) .plano-qr__plano { visibility: hidden; }
.plano-qr__cargando { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--texto-suave); font-size: .875rem; }