@charset "UTF-8";
/* =========================================================================
   Sellado · la tarjeta
   El objeto de la casa. Se pinta igual en el editor, en la página de alta,
   en el monedero del cliente y en el cartel impreso: mismas clases, mismas
   variables. Todo lo que cambia por negocio llega por custom properties
   en el atributo style del contenedor .tarjeta.
   ========================================================================= */

.tarjeta {
    --t-bg: #6B2FA0;
    --t-fondo: var(--t-bg);
    --t-fg: #FFFFFF;
    --t-tenue: rgba(255, 255, 255, .72);
    --t-sello: var(--t-fg);
    --t-radio: 22px;
    --t-ancho: 380px;

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--t-ancho);
    padding: 1.25rem 1.25rem 1.1rem;
    border-radius: var(--t-radio);
    background: var(--t-fondo);
    color: var(--t-fg);
    font-family: var(--texto, system-ui, sans-serif);
    box-shadow: 0 1px 2px rgb(20 14 26 / .18), 0 18px 40px -18px rgb(20 14 26 / .5);
    overflow: hidden;
    isolation: isolate;
}

/* tramas opcionales del fondo */
.tarjeta[data-trama="lunares"]::before,
.tarjeta[data-trama="rayas"]::before,
.tarjeta[data-trama="confeti"]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .16;
    pointer-events: none;
}
.tarjeta[data-trama="lunares"]::before {
    background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
    background-size: 14px 14px;
}
.tarjeta[data-trama="rayas"]::before {
    background-image: repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 11px);
}
.tarjeta[data-trama="confeti"]::before {
    background-image:
        radial-gradient(currentColor 1.6px, transparent 1.7px),
        radial-gradient(currentColor 1.1px, transparent 1.2px);
    background-size: 38px 38px, 26px 26px;
    background-position: 0 0, 13px 19px;
}

/* ------------------------------------------------------------- cabecera */
.tarjeta-cabecera {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.tarjeta-logo {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgb(255 255 255 / .16);
    color: inherit;
    font-family: var(--display, sans-serif);
    font-weight: 800;
    font-size: 15px;
    flex: none;
    overflow: hidden;
}
.tarjeta-logo img { width: 100%; height: 100%; object-fit: cover; }

.tarjeta-identidad { min-width: 0; flex: 1; }
.tarjeta-negocio {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tarjeta-nombre {
    font-family: var(--display, sans-serif);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tarjeta-insignia {
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    background: rgb(255 255 255 / .18);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex: none;
}

/* --------------------------------------------------------- reja de sellos */
.tarjeta-sellos {
    display: grid;
    grid-template-columns: repeat(var(--columnas, 5), 1fr);
    gap: 0.55rem;
    margin: 0.25rem 0 0.9rem;
}

.sello {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--t-sello);
}

/* hueco vacío: el círculo impreso en la cartulina */
.sello::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed currentColor;
    opacity: .34;
}
.tarjeta[data-huecos="solid"] .sello::before { border-style: solid; opacity: .28; }
.tarjeta[data-huecos="ghost"] .sello::before { border: 0; background: currentColor; opacity: .12; }

.sello-numero {
    font-family: var(--mono, monospace);
    font-size: 11px;
    font-weight: 500;
    opacity: .45;
}

/* sello estampado: cada impresión sale un poco torcida, como en papel */
.sello.is-lleno { transform: rotate(var(--giro, -4deg)); }
.sello.is-lleno::before { display: none; }
.sello.is-lleno .sello-numero { display: none; }

.sello-marca {
    width: 62%;
    height: 62%;
    color: var(--t-sello);
    filter: drop-shadow(0 0 .4px currentColor);
}

.sello-tinta {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

/* estilo «tinta»: aro grueso irregular con la marca dentro */
.tarjeta[data-sello="ink"] .sello.is-lleno .sello-tinta {
    box-shadow: inset 0 0 0 2.5px currentColor;
    opacity: .94;
}
.tarjeta[data-sello="ink"] .sello.is-lleno .sello-tinta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgb(255 255 255 / .28) 0 18%, transparent 19%),
        radial-gradient(circle at 72% 68%, rgb(255 255 255 / .2) 0 12%, transparent 13%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* estilo «sólido»: círculo relleno, la marca calada */
.tarjeta[data-sello="solid"] .sello.is-lleno .sello-tinta { background: currentColor; }
.tarjeta[data-sello="solid"] .sello.is-lleno .sello-marca { color: var(--t-bg); mix-blend-mode: normal; }

/* estilo «contorno»: solo la marca, sin aro */
.tarjeta[data-sello="outline"] .sello.is-lleno .sello-tinta { box-shadow: none; }
.tarjeta[data-sello="outline"] .sello.is-lleno .sello-marca { width: 78%; height: 78%; }

.sello-imagen { width: 66%; height: 66%; object-fit: contain; border-radius: 50%; }

/* el momento: la prensa baja, gira y deja la marca */
.sello.recien-sellado { animation: estampar .42s cubic-bezier(.2, 1.5, .4, 1) backwards; }
@keyframes estampar {
    0%   { transform: rotate(calc(var(--giro, -4deg) * 3)) scale(1.75); opacity: 0; }
    45%  { transform: rotate(calc(var(--giro, -4deg) * .4)) scale(.92); opacity: 1; }
    70%  { transform: rotate(var(--giro, -4deg)) scale(1.06); }
    100% { transform: rotate(var(--giro, -4deg)) scale(1); }
}

/* --------------------------------------------------------------- estado */
.tarjeta-estado {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--t-tenue);
}
.tarjeta-estado strong { color: var(--t-fg); font-weight: 600; }
.tarjeta-premio {
    margin-top: 0.15rem;
    font-family: var(--display, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.tarjeta-puntos {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.4rem 0 0.9rem;
}
.tarjeta-puntos-valor {
    font-family: var(--display, sans-serif);
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tarjeta-puntos-unidad { font-size: 0.9rem; color: var(--t-tenue); }

.tarjeta-barra {
    height: 5px;
    border-radius: 3px;
    background: rgb(255 255 255 / .22);
    overflow: hidden;
    margin-top: 0.65rem;
}
.tarjeta-barra i { display: block; height: 100%; border-radius: 3px; background: var(--t-fg); }

/* ------------------------------------------------ perforación y pie de QR */
.tarjeta-perf {
    position: relative;
    height: 1px;
    margin: 0.9rem -1.25rem;
    background-image: linear-gradient(90deg, currentColor 0 5px, transparent 5px 11px);
    background-size: 11px 1px;
    background-repeat: repeat-x;
    opacity: .45;
}
/* Los dos recortes del troquel enseñan el fondo sobre el que se apoya la
   tarjeta, así que toman --fondo-pagina cuando existe (monedero y página de
   alta, que van teñidos con el color del negocio). */
.tarjeta-perf::before,
.tarjeta-perf::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fondo-pagina, var(--papel, #F6F4F8));
    transform: translateY(-50%);
}
.tarjeta-perf::before { left: -8px; }
.tarjeta-perf::after  { right: -8px; }

.tarjeta-pie {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.tarjeta-qr {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
    flex: none;
}
.tarjeta-qr svg, .tarjeta-qr img { width: 100%; height: 100%; display: block; }
.tarjeta-codigo {
    font-family: var(--mono, monospace);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.12em;
}
.tarjeta-codigo-etiqueta {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-tenue);
}

/* ------------------------------------------------------------- variantes */
.tarjeta--mini {
    --t-radio: 14px;
    max-width: 250px;
    padding: 0.85rem;
    box-shadow: 0 1px 2px rgb(20 14 26 / .14), 0 8px 20px -10px rgb(20 14 26 / .4);
}
.tarjeta--mini .tarjeta-cabecera { margin-bottom: 0.6rem; gap: 0.5rem; }
.tarjeta--mini .tarjeta-logo { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
.tarjeta--mini .tarjeta-nombre { font-size: 0.95rem; }
.tarjeta--mini .tarjeta-negocio { font-size: 9.5px; }
.tarjeta--mini .tarjeta-sellos { gap: 0.3rem; margin-bottom: 0.5rem; }
.tarjeta--mini .tarjeta-estado { font-size: 0.75rem; }
.tarjeta--mini .tarjeta-premio { font-size: 0.8rem; }
.tarjeta--mini .tarjeta-perf,
.tarjeta--mini .tarjeta-pie { display: none; }

.tarjeta--grande { --t-ancho: 460px; padding: 1.6rem 1.6rem 1.4rem; }
.tarjeta--grande .tarjeta-perf { margin-left: -1.6rem; margin-right: -1.6rem; }
.tarjeta--grande .tarjeta-nombre { font-size: 1.45rem; }
.tarjeta--grande .tarjeta-qr { width: 96px; height: 96px; }

/* dentro de un marco de móvil, en el editor */
.marco-movil {
    position: relative;
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
    padding: 12px;
    border-radius: 38px;
    background: linear-gradient(160deg, #2B2333, #16111D);
    box-shadow: 0 30px 60px -24px rgb(20 14 26 / .6), inset 0 0 0 1px rgb(255 255 255 / .08);
}
.marco-movil::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 74px;
    height: 6px;
    border-radius: 3px;
    background: rgb(255 255 255 / .16);
    transform: translateX(-50%);
    z-index: 2;
}
.marco-movil-pantalla {
    border-radius: 28px;
    background: var(--papel, #F6F4F8);
    padding: 34px 14px 18px;
    min-height: 460px;
    overflow: hidden;
}
.marco-movil .tarjeta { --t-ancho: none; }
.marco-movil .tarjeta-perf::before,
.marco-movil .tarjeta-perf::after { background: var(--papel, #F6F4F8); }
/* dentro del marco de móvil manda el papel del panel, no el de la página */
.marco-movil { --fondo-pagina: var(--papel, #F6F4F8); }

/* la tarjeta sobre un fondo cualquiera (alta pública, monedero) */
.tarjeta--sobre-color .tarjeta-perf::before,
.tarjeta--sobre-color .tarjeta-perf::after { background: var(--fondo-pagina, #F6F4F8); }

/* ------------------------------------------------------ premio disponible */
.tarjeta-premio-listo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: rgb(255 255 255 / .16);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}
.tarjeta-premio-listo .ico { flex: none; }

/* ------------------------------------------------------------- impresión */
@media print {
    .tarjeta {
        box-shadow: none;
        border: 1px solid #ccc;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .marco-movil { display: none; }
}