/* ============================================================
   tarjeta.css
   Ruta: public/assets/css/tarjeta.css
   Creado: 2026-07-15
   Modificado: 2026-07-21 (v11)
   Descripcion: Estilos de "Mi Tarjeta" — card de socio de Zona
                Miembros.

                v11 (2026-07-21) — .tarjeta-stamp--premio-pendiente:
                ver tarjeta.js v11 / TarjetaController v1.4.

                v10 (2026-07-20) — ver tarjeta.js v10 para el detalle
                completo. 'disponible' ahora usa tratamiento dorado
                completo (antes solo un borde con glow, pasaba
                desapercibido en pruebas reales) y se agrega
                '.sello-final' para marcar siempre la ultima casilla
                como el premio gordo del ciclo.

                v7 (2026-07-19) — clases reales para los hitos
                intermedios (ver tarjeta.js v8, que ahora borra su
                fallback inline aplicarEstiloHitoInline() porque ya
                no hace falta). Decision de diseño: 'pendiente' es
                el mas discreto (anillo punteado con pulso lento —
                se nota por movimiento, no por relleno de color, para
                no perderse como paso con el amarillo apagado que se
                probo antes), 'disponible' un paso mas notorio (glow
                fijo, sin dorado todavia), y 'canjeado' es el sello
                VISTOSO — dorado, se destaca solo entre los demas
                sellos naranjas, porque ese si es un logro ya
                completado (el premio ya se entrego), no solo
                anunciado.

                v6 (2026-07-16) — popup de QR a pantalla completa
                (fondo blanco puro, ver nota en tarjeta-card.php
                sobre por que no se puede subir el brillo real de
                la pantalla via web). Se agregan .tarjeta-qr-popup*
                y cursor/foco en .tarjeta-qr-bloque (ahora
                clickeable, abre el popup en vez de solo mostrar el
                QR chico).

                v5 (2026-07-16) — INTEGRACION REAL. El fondo de la
                card (fondo-card.png) dejo de ser un asset fijo del
                tema: ahora es config de admin (card_fondo_url en
                config_tienda, Track B / B1) porque puede cambiar
                por temporada (ej. Halloween, Navidad) sin tocar
                codigo. Por eso el layer de imagen se SACA de la
                regla .tarjeta-cara de aqui abajo — tarjeta.js v5 lo
                aplica en runtime via JS (element.style.backgroundImage)
                sobre cada .tarjeta-cara, combinando el degradado
                (que si sigue fijo aqui, es puramente decorativo) con
                la URL real que llega de GET /api/zona-miembros/tarjeta.
                Los valores de background-size/repeat/position siguen
                viviendo aqui (son propiedades separadas, JS solo
                pisa background-image) — no hace falta tocarlos.

                v4 (2026-07-16) — CORRECCION DE ALCANCE IMPORTANTE:
                la card es el UNICO recurso que se lleva al sistema
                real. La pagina que la envuelve (header "Mi tarjeta",
                fondo de pantalla) es solo arnes de maqueta y NO se
                exporta. Por eso:

                FIX 1: fondo-card.png se saco de .tarjeta-pagina y se
                movio a .tarjeta-cara (frente Y reverso, misma
                textura), que es donde corresponde segun lo aclarado.
                .tarjeta-pagina vuelve a fondo solido simple.

                FIX 2: el bug del texto "El Barrio Burger" flotando
                fuera de la card era el navegador mostrando el texto
                alternativo de una imagen que no cargo (ruta rota o
                archivo no renombrado en ese momento). Se blindo con
                un contenedor de tamaño fijo + overflow:hidden en 3
                capas (wrapper, banner, card) para que aunque la
                imagen fallara de nuevo, nunca vuelva a romper el
                layout — pero la causa real sigue siendo tener el
                archivo bien nombrado y en la ruta correcta (ya
                confirmado: logo-barrio-burger.svg, sin espacios).

                FIX 3 (a confirmar con el archivo real): la forma
                blanca sobre el banner no la genera este CSS — no
                hay ningun elemento blanco posicionado ahi. Candidatos:
                parte de la ilustracion original de banner-card.png,
                o el mismo sintoma del FIX 2 si el navegador tenia
                cacheada una version vieja. Revisar con el archivo
                real.

                FIX 4: se agrega editor tambien en el banner (antes
                solo estaba en el avatar) ya que ambos son
                personalizables por el usuario.

                Se agregan clases .icono-svg-blanco / .icono-svg-naranja
                para cuando llegue el SVG real del sello — permiten
                recolorear un <img> de SVG via filter, sin tener que
                pedir dos versiones del archivo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --tj-negro:        #0a0908;
  --tj-negro-2:       #17130f;
  --tj-tarjeta-bg:    #161210;
  --tj-borde-sutil:   #2c241d;
  --tj-crema:         #f4ead9;
  --tj-crema-suave:   #cdbfa5;
  --tj-naranja:       #ff7a1a;
  --tj-naranja-fuerte: #e8590c;
  --tj-verde-sello:   #6fbf5f;
  --tj-dorado:         #ffd76a;
  --tj-dorado-fuerte:  #c9971f;

  --tj-radio:  20px;
  --tj-sombra: 0 18px 40px -12px rgba(0,0,0,.7);
}

/* ============================================================
   HOLO — capa de brillo tipo foil, reacciona al giroscopio /
   mouse via tarjeta.js. Las variables --holo-* y --glare-* se
   fijan en JS sobre #tarjeta-3d y bajan por herencia (custom
   properties heredan) hasta .tarjeta-holo / .tarjeta-glare de
   cada cara, sin tener que duplicar listeners por cara.
   ============================================================ */
.tarjeta-3d {
  --holo-x: 50%;
  --holo-y: 50%;
  --holo-angle: 115deg;
  --glare-x: 50%;
  --glare-y: 25%;
  --holo-opacity: 0.55;
}

/* FIX 1: la pagina vuelve a ser un arnes simple, sin textura —
   no es parte del asset exportable, no importa como se vea. */
.tarjeta-pagina {
  min-height: 100vh;
  background: var(--tj-negro);
  padding: 40px 20px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  color: var(--tj-crema);
  box-sizing: border-box;
}

.tarjeta-encabezado {
  text-align: center;
  margin-bottom: 34px;
}

.tarjeta-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tj-naranja);
  font-weight: 600;
}

.tarjeta-titulo {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: .02em;
  color: var(--tj-crema);
}

/* ---------- Contenedor 3D / flip ---------- */

.tarjeta-3d {
  width: min(360px, 90vw);
  aspect-ratio: 8 / 12.5;
  perspective: 1600px;
  cursor: pointer;
  outline: none;
  transform-style: preserve-3d;
  /* el tilt (giroscopio / mouse) se aplica ACA via JS con
     transform inline — separado del flip, que sigue viviendo en
     .tarjeta-cara, para que nunca se pisen los dos transforms. */
  transition: transform 120ms ease-out;
}

.tarjeta-3d:focus-visible .tarjeta-cara {
  box-shadow: var(--tj-sombra), 0 0 0 3px var(--tj-naranja);
}

/* FIX 1 (v4): la textura de fondo vive ACA — en la card, que es el
   asset real. Se aplica a frente y reverso por igual (misma
   clase base .tarjeta-cara). Degradado oscuro encima para que el
   texto siga siendo legible sobre la textura.
   v5: la URL de la textura (segundo layer) YA NO va hardcodeada
   aqui — tarjeta.js la aplica en runtime via JS sobre esta misma
   propiedad background-image, con el valor real que llega de
   config_tienda (card_fondo_url, editable por admin). Este bloque
   deja solo el degradado como base visual minima por si el JS no
   llegara a correr (fallback silencioso, no bloquea nada). */
.tarjeta-cara {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--tj-radio);
  background-image: linear-gradient(180deg, rgba(10,9,8,.55), rgba(10,9,8,.88));
  background-size: cover, 360px;
  background-repeat: no-repeat, repeat;
  background-position: center, center;
  background-color: var(--tj-tarjeta-bg);
  border: 1px solid var(--tj-borde-sutil);
  box-shadow: var(--tj-sombra);
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.34,1.15,.64,1);
}

/* Capa 1: barrido de color tipo foil (dorado/naranja/verde sello).
   CLAVE: el gradiente tiene huecos "transparent" entre cada franja
   de color — sin eso, cubre el 100% de la card con color solido y
   se lee como un filtro/tinte parejo en vez de brillo que recorre
   la carta. Cada franja mide ~3% del ciclo, separadas por tramos
   transparentes bien mas anchos. */
.tarjeta-holo {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none; /* nunca bloquea los botones de editar ni los dots */
  mix-blend-mode: color-dodge;
  opacity: 0; /* arranca apagada — la prende JS (clase .interactuando)
                 en cuanto detecta giroscopio, touch o mouse real */
  transition: opacity .35s ease;
  background-image: repeating-linear-gradient(
    var(--holo-angle),
    transparent 0%,
    transparent 6%,
    rgba(255, 122, 26, 0.55) 9%,
    transparent 12%,
    transparent 22%,
    rgba(244, 234, 217, 0.45) 25%,
    transparent 28%,
    transparent 38%,
    rgba(111, 191, 95, 0.45) 41%,
    transparent 44%,
    transparent 54%,
    rgba(232, 89, 12, 0.5) 57%,
    transparent 60%,
    transparent 100%
  );
  background-size: 220% 220%;
  background-position: var(--holo-x) var(--holo-y);
}

.tarjeta-3d.interactuando .tarjeta-holo {
  opacity: var(--holo-opacity);
}

/* El frente compite con la ilustracion (mucho mas cargada
   visualmente que el reverso), asi que ahi el holo va un poco mas
   fuerte para notarse igual. */
.tarjeta-3d.interactuando .tarjeta-frente .tarjeta-holo {
  opacity: calc(var(--holo-opacity) + 0.15);
}

/* Capa idle: brillo lento en loop, 100% CSS, visible SOLO en
   reposo (antes de que el usuario toque o incline la card). Se
   apaga con fade cuando .tarjeta-holo (la controlada por JS) toma
   el control, para que no se vean los dos brillos pisandose. */
.tarjeta-holo-idle {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0.4;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0%,
    transparent 6%,
    rgba(255, 122, 26, 0.45) 9%,
    transparent 12%,
    transparent 22%,
    rgba(244, 234, 217, 0.35) 25%,
    transparent 28%,
    transparent 38%,
    rgba(111, 191, 95, 0.35) 41%,
    transparent 44%,
    transparent 54%,
    rgba(232, 89, 12, 0.4) 57%,
    transparent 60%,
    transparent 100%
  );
  background-size: 260% 260%;
  background-position: 0% 0%;
  animation: tarjeta-holo-idle-shimmer 7s linear infinite;
  transition: opacity .5s ease;
}

.tarjeta-3d.interactuando .tarjeta-holo-idle {
  opacity: 0;
}

@keyframes tarjeta-holo-idle-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-holo-idle { animation: none; opacity: .2; }
}

/* Capa 2: brillo especular puntual, simula el reflejo directo de luz */
.tarjeta-glare {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    circle at var(--glare-x) var(--glare-y),
    rgba(244,234,217,0.55) 0%,
    rgba(244,234,217,0.12) 24%,
    rgba(244,234,217,0) 55%
  );
  mix-blend-mode: overlay;
}

.tarjeta-3d.interactuando .tarjeta-glare {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-holo, .tarjeta-glare { display: none; }
}

.tarjeta-frente { transform: rotateY(0deg); }

/* FIX 1: el reverso YA NO pisa el fondo de .tarjeta-cara con un
   background propio — hereda la misma textura. Solo define
   posicion/transform. */
.tarjeta-reverso {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

.tarjeta-3d.volteada .tarjeta-frente { transform: rotateY(-180deg); }
.tarjeta-3d.volteada .tarjeta-reverso { transform: rotateY(0deg); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-cara { transition: none; }
}

/* ---------- Cara frontal ---------- */

.tarjeta-banner {
  height: 42%;
  width: 100%;
  position: relative;
  overflow: hidden; /* FIX 2, capa 2 de contencion */
  background:
    radial-gradient(circle at 30% 20%, rgba(255,122,26,.35), transparent 55%),
    linear-gradient(160deg, #241a10 0%, var(--tj-negro-2) 70%);
  background-size: cover;
  background-position: center;
}

/* FIX 2: contenedor de tamaño FIJO con overflow:hidden — aunque la
   imagen del logo no cargue y el navegador quiera mostrar el texto
   alternativo, queda encerrado en esta caja de 120x34 y no puede
   desbordar ni romper el layout de la card. */
.tarjeta-logo-wrap {
  position: absolute;
  top: 14px;
  left: 16px;
  width: 120px;
  height: 34px;
  overflow: hidden; /* FIX 2, capa 1 de contencion */
}

.tarjeta-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

/* FIX 4: editor tambien en el banner, no solo en el avatar —
   ambos son personalizables por el usuario. */
.tarjeta-banner-editar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10,9,8,.55);
  border: 1px solid rgba(244,234,217,.35);
  color: var(--tj-crema);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(2px);
}

.icono-lapiz { width: 14px; height: 14px; }

.tarjeta-avatar-editar {
  position: absolute;
  top: calc(42% - 40px);
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.tarjeta-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid var(--tj-tarjeta-bg);
  background: linear-gradient(135deg, var(--tj-naranja), var(--tj-naranja-fuerte));
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
}

.tarjeta-avatar-corona {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tj-naranja);
  color: var(--tj-negro);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tj-tarjeta-bg);
}

.icono-corona-mini { width: 12px; height: 12px; }

.tarjeta-frente-cuerpo {
  padding: 46px 22px 4px;
  text-align: center;
  position: relative;
}

.tarjeta-nombre {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 17px;
  color: var(--tj-crema);
}

.tarjeta-badge-socio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--tj-naranja);
  color: var(--tj-naranja);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.icono-corona { width: 13px; height: 13px; }

.tarjeta-label-id {
  margin: 0;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tj-crema-suave);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tarjeta-estrella {
  color: var(--tj-naranja);
  font-size: 10px;
}

.tarjeta-id {
  margin: 4px 0 18px;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 38px;
  letter-spacing: .06em;
  color: var(--tj-naranja);
  line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,.35);
}

.tarjeta-qr-bloque {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.tarjeta-qr-nota {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tj-naranja);
  line-height: 1.5;
}

.tarjeta-qr-subnota {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: none;
  color: var(--tj-crema-suave);
}

.icono-flecha-qr {
  width: 26px;
  height: 26px;
  color: var(--tj-naranja);
  flex-shrink: 0;
  transform: scaleX(-1); /* apunta hacia el QR, que queda a la derecha */
}

.tarjeta-qr {
  width: 66px;
  height: 66px;
  background: var(--tj-crema);
  border-radius: 8px;
  padding: 6px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarjeta-qr canvas, .tarjeta-qr img { width: 100%; height: 100%; display: block; }

.tarjeta-tagline {
  text-align: center;
  margin: 6px 0 16px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tj-naranja);
  font-weight: 600;
}

.tarjeta-perforado {
  position: absolute;
  left: 0; right: 0; bottom: 46px;
  height: 0;
  border-top: 1px dashed var(--tj-borde-sutil);
}

/* ---------- Cara reverso ---------- */

.tarjeta-reverso-cabecera {
  padding: 22px 22px 0;
  text-align: center;
}

.tarjeta-reverso-eyebrow {
  margin: 0 0 4px;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--tj-crema);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tarjeta-corchete {
  color: var(--tj-naranja);
  font-size: 16px;
}

.tarjeta-reverso-subtitulo {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--tj-crema-suave);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tarjeta-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}

.tarjeta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tj-borde-sutil);
  border: none;
  padding: 0;
  cursor: pointer;
}

.tarjeta-dot.activo { background: var(--tj-naranja); }

.tarjeta-reverso-titulo {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tj-naranja);
}

.tarjeta-sellos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 10px;
  padding: 14px 22px;
}

/* v5: estado real cuando programas_lealtad esta vacia (ver nota en
   tarjeta.php). Ocupa el mismo espacio visual que el grid de sellos
   para que el layout no salte cuando si haya programas. */
.tarjeta-sin-programa {
  padding: 28px 22px;
  text-align: center;
  color: var(--tj-crema-suave);
}
.tarjeta-sin-programa p {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}
.tarjeta-sin-programa-sub {
  font-size: 12px !important;
  font-weight: 400 !important;
  opacity: .75;
}

.sello-slot {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed var(--tj-borde-sutil);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tj-crema-suave);
  font-size: 12px;
  font-weight: 600;
}

.sello-slot.ganado {
  border-style: solid;
  border-color: var(--tj-naranja);
  background: rgba(255,122,26,.12);
  color: var(--tj-naranja);
  animation: sello-pop .35s ease-out;
}

.sello-logo { width: 50%; height: 50%; object-fit: contain; }

/* FIX 2026-07-16 (v5): el sello ya NO es un placeholder dibujado a
   mano. Se confirmo que logo-barrio-burger.svg no es un wordmark
   horizontal sino un emblema circular (llama + hamburguesa en
   silueta) — encaja perfecto en los sello-slot, que ya son
   circulos. Se referencia como <img> real en el <template
   id="tpl-logo-sello"> de tarjeta.php / preview.html, recoloreado
   con .icono-svg-naranja de aca abajo.
   PENDIENTE (sin resolver): el banner del frente SIGUE sin un
   asset horizontal real — este mismo emblema circular no le queda
   bien a esa caja angosta de 120x34px (.tarjeta-logo-wrap). No
   tocar esa parte hasta tener un wordmark horizontal o decidir
   una alternativa (ver conversacion). */
.icono-svg-blanco {
  filter: brightness(0) invert(1);
}
.icono-svg-naranja {
  /* aproximado a #ff7a1a — ajustar en devtools si el tono no calza
     exacto con el SVG real una vez que lo tengamos */
  filter: brightness(0) saturate(100%) invert(60%) sepia(78%) saturate(1500%) hue-rotate(340deg) brightness(103%) contrast(101%);
}

@keyframes sello-pop {
  0%   { transform: scale(.4); opacity: 0; }
  70%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* ============================================================
   v7 (2026-07-19) — Hitos intermedios en el grid de sellos.
   Reemplaza el fallback inline de tarjeta.js (aplicarEstiloHitoInline(),
   quitado en v8 de ese archivo — ya no hace falta con estas clases).

   'pendiente'  → solo un anillo punteado con pulso: avisa "aca hay
                  algo especial" sin insinuar que ya se gano.
   'disponible' → ya se gano, falta que lo entreguen: un paso mas
                  notorio (glow fijo), pero TODAVIA sin dorado.
   'canjeado'   → el sello destacado de verdad: dorado, se nota entre
                  los demas sellos naranjas — es el unico estado que
                  representa un premio ya recibido, no solo ganado.
   'vencido'    → apagado a proposito, nunca debe verse reclamable.
   ============================================================ */

.sello-hito {
  position: relative;
}

.sello-hito-marca {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* ============================================================
   v10 (2026-07-20) — FIX de percepcion (conversacion 2026-07-20):
   antes, 'disponible' (el estado MAS importante — el cliente ya se
   gano el premio y esta esperando que se lo den) se veia casi igual
   a un sello normal ganado (mismo fondo/color naranja, solo un borde
   con glow sutil) — a proposito, segun el comentario viejo de arriba
   ("TODAVIA sin dorado"), pero en la practica pasaba desapercibido,
   que es el problema real que esto soluciona: un hito 'disponible'
   ahora usa EL MISMO tratamiento dorado que 'canjeado' (fondo
   degradado dorado, icono recoloreado), pero con una animacion mas
   intensa/urgente (sello-hito-pulso-urgente en vez de sello-hito-
   brillo) — para que se distinga de un sello "ya resuelto"
   (canjeado, brillo calmo) sin dejar de destacar fuerte del resto.
   ============================================================ */
.sello-hito--pendiente {
  border-style: dotted !important;
  border-color: rgba(255,204,77,.55) !important;
  animation: sello-hito-pulso-sutil 2.6s ease-in-out infinite;
}

@keyframes sello-hito-pulso-sutil {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,204,77,.35); }
  50%      { box-shadow: 0 0 0 5px rgba(255,204,77,0); }
}

/* Mas especificidad (3 clases) que .sello-slot.ganado — pisa el
   fondo naranja normal sin !important. Mismo selector "reforzado"
   que ya se usaba para canjeado, ver mas abajo. */
.sello-slot.ganado.sello-hito--disponible {
  border-color: var(--tj-dorado-fuerte);
  background: linear-gradient(145deg, var(--tj-dorado), var(--tj-dorado-fuerte));
  color: var(--tj-negro);
  box-shadow: 0 0 16px rgba(255, 209, 92, .8), inset 0 0 8px rgba(255,255,255,.35);
  animation: sello-pop .35s ease-out, sello-hito-pulso-urgente 1.4s ease-in-out infinite;
}

.sello-hito--disponible .icono-svg-naranja {
  filter: brightness(0) saturate(100%) invert(85%) sepia(35%) saturate(900%) hue-rotate(1deg) brightness(102%) contrast(104%);
}

@keyframes sello-hito-pulso-urgente {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 209, 92, .8), inset 0 0 8px rgba(255,255,255,.35); transform: scale(1); }
  50%      { box-shadow: 0 0 24px rgba(255, 209, 92, 1), inset 0 0 10px rgba(255,255,255,.5); transform: scale(1.05); }
}

/* Mas especificidad (3 clases) que .sello-slot.ganado (2 clases) —
   pisa el fondo naranja normal sin !important. */
.sello-slot.ganado.sello-hito--canjeado {
  border-color: var(--tj-dorado-fuerte);
  background: linear-gradient(145deg, var(--tj-dorado), var(--tj-dorado-fuerte));
  color: var(--tj-negro);
  box-shadow: 0 0 14px rgba(255, 209, 92, .65), inset 0 0 8px rgba(255,255,255,.35);
  animation: sello-pop .35s ease-out, sello-hito-brillo 3.5s ease-in-out infinite;
}

/* El emblema clonado del <template id="tpl-logo-sello"> viene
   recoloreado a naranja por defecto via .icono-svg-naranja (ver nota
   arriba en este archivo) — acá se pisa con un filtro dorado SOLO
   dentro de un sello canjeado. Ajustar en devtools si el tono no
   calza exacto, mismo criterio que el filtro naranja original. */
.sello-hito--canjeado .icono-svg-naranja {
  filter: brightness(0) saturate(100%) invert(85%) sepia(35%) saturate(900%) hue-rotate(1deg) brightness(102%) contrast(104%);
}

@keyframes sello-hito-brillo {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 209, 92, .65), inset 0 0 8px rgba(255,255,255,.35); }
  50%      { box-shadow: 0 0 20px rgba(255, 209, 92, .9), inset 0 0 10px rgba(255,255,255,.5); }
}

.sello-hito--vencido {
  border-style: dashed !important;
  border-color: rgba(255,255,255,.25) !important;
  opacity: .5;
}

/* ============================================================
   v10 (2026-07-20) — Sello final = "premio gordo" del programa
   (compras_requeridas). A diferencia de los hitos intermedios (que
   el admin elige, pueden existir o no), este SIEMPRE existe y SIEMPRE
   se marca distinto — incluso antes de llegar ahi (pendiente), para
   que desde el arranque se note cual es la meta. No usa el mismo
   'sello-hito--*' de los hitos intermedios a proposito: son
   conceptos distintos (premio de mitad de camino vs. premio final
   del ciclo completo), aunque comparten la idea de "destacar dorado".
   ============================================================ */
.sello-final {
  position: relative;
  border-width: 2px !important;
}

/* Antes de llegar: doble anillo con pulso mas lento que el de un
   hito pendiente — mismo lenguaje visual (algo especial espera aca)
   pero mas calmo, porque falta todo el camino, no solo un tramo. */
.sello-final:not(.ganado) {
  border-style: double !important;
  border-color: rgba(255,204,77,.6) !important;
  animation: sello-final-pulso-lejano 3.4s ease-in-out infinite;
}

@keyframes sello-final-pulso-lejano {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,204,77,.3); }
  50%      { box-shadow: 0 0 0 6px rgba(255,204,77,0); }
}

/* Al llegar: el tratamiento dorado mas fuerte de toda la tarjeta —
   un escalon arriba del de un hito intermedio (mas glow, doble
   anillo), porque este SI es el premio grande del ciclo completo. */
.sello-slot.ganado.sello-final {
  border-color: var(--tj-dorado-fuerte);
  background: linear-gradient(145deg, var(--tj-dorado), var(--tj-dorado-fuerte));
  color: var(--tj-negro);
  box-shadow: 0 0 22px rgba(255, 209, 92, .9), inset 0 0 10px rgba(255,255,255,.4);
  animation: sello-pop .35s ease-out, sello-hito-brillo 3s ease-in-out infinite;
}

.sello-final .icono-svg-naranja {
  filter: brightness(0) saturate(100%) invert(85%) sepia(35%) saturate(900%) hue-rotate(1deg) brightness(102%) contrast(104%);
}

.sello-final-marca {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

.tarjeta-progreso-barra {
  margin: 14px 18px 0;
  background: var(--tj-naranja);
  color: var(--tj-negro);
  clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transform: rotate(-1deg);
}

.tarjeta-progreso-barra strong { color: var(--tj-negro-2); }

.tarjeta-stamp {
  position: absolute;
  right: 20px;
  bottom: 74px;
  border: 2px solid var(--tj-naranja);
  color: var(--tj-naranja);
  border-radius: 8px;
  padding: 5px 9px;
  font-family: 'Anton', sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  transform: rotate(-8deg);
  z-index: 2;
}

/* v2.0 (2026-07-21) — antes, este badge era el UNICO rastro que
   quedaba en la tarjeta de que se completo una vuelta, y era igual
   este badge se viera o no un premio sin reclamar — ninguna
   diferencia visual entre "vuelta completada, ya te dieron el
   combo" y "vuelta completada, todavia te deben el combo". Ahora, en
   el segundo caso, se pinta dorado y pulsa — mismo lenguaje visual
   que ya usa un hito intermedio 'disponible'. */
.tarjeta-stamp--premio-pendiente {
  border-color: var(--tj-dorado-fuerte);
  background: linear-gradient(145deg, var(--tj-dorado), var(--tj-dorado-fuerte));
  color: var(--tj-negro);
  animation: tarjeta-stamp-pulso-urgente 1.4s ease-in-out infinite;
}

/* Version propia (no la genérica sello-hito-pulso-urgente) porque
   esta tiene su propio transform base (rotate(-8deg)) — reusar la
   otra le hubiera pisado la rotacion durante el pulso, un "salto"
   visual chico pero notorio. */
@keyframes tarjeta-stamp-pulso-urgente {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 209, 92, .8); transform: rotate(-8deg) scale(1); }
  50%      { box-shadow: 0 0 24px rgba(255, 209, 92, 1); transform: rotate(-8deg) scale(1.08); }
}

.tarjeta-reverso-footer {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  text-align: center;
  padding: 0 22px;
}

.tarjeta-reverso-footer-texto {
  margin: 0 0 8px;
  font-size: 10.5px;
  color: var(--tj-crema-suave);
  opacity: .8;
  line-height: 1.4;
}

.tarjeta-logo-mini {
  height: 20px;
  width: auto;
  opacity: .9;
}

.tarjeta-nota-flip {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--tj-crema-suave);
  opacity: .7;
}

/* v6: el bloque del QR chico ahora es clickeable — abre el popup
   de pantalla completa. Cursor + foco visible para que se note. */
.tarjeta-qr-bloque {
  cursor: pointer;
}
.tarjeta-qr-bloque:focus-visible {
  outline: 2px solid var(--tj-naranja);
  outline-offset: 2px;
  border-radius: 8px;
}

/* v6: popup de QR — fondo blanco puro a proposito (ver nota en
   tarjeta-card.php), pantalla completa, por encima de todo. */
.tarjeta-qr-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  cursor: pointer;
  animation: tarjeta-qr-popup-in .18s ease-out;
}
.tarjeta-qr-popup[hidden] { display: none; }

.tarjeta-qr-popup-qr {
  width: min(78vw, 340px);
  height: min(78vw, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarjeta-qr-popup-qr img,
.tarjeta-qr-popup-qr canvas {
  width: 100% !important;
  height: 100% !important;
}

.tarjeta-qr-popup-id {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: 34px;
  letter-spacing: .06em;
  color: #0a0908;
}

.tarjeta-qr-popup-nota {
  margin: 0;
  font-size: 13px;
  color: #6b6b6b;
}

@keyframes tarjeta-qr-popup-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 400px) {
  .tarjeta-titulo { font-size: 30px; }
  .tarjeta-id { font-size: 32px; }
}