/* Tarjeta de fidelizacion — markup generado por fx_loyalty_render_tarjeta().
   Se carga tanto en el panel como en las paginas publicas del cliente y del staff,
   asi que no depende de Bootstrap ni de Tailwind: solo de las variables que el
   render inyecta inline (--fxlc-bg, --fxlc-text, --fxlc-label, --fxlc-col). */

.fxlc {
    /* Proporcion de un pase de wallet: angosto y alto, no una tarjeta de credito.
       Apple usa 375pt de ancho, de ahi el ancho por defecto.

       Es una variable porque la pagina del CLIENTE la ensancha: ahi la tarjeta
       no es una miniatura entre controles, es la pantalla entera, y su QR es lo
       que el empleado tiene que escanear de un toque. En el panel —el
       disenador, el tablero, el listado— se queda en 340: compite con el resto
       de la pantalla y ademas conviene que se vea del tamano al que la mira el
       cliente en su celular. */
    width: 100%;
    max-width: var(--fxlc-ancho, 340px);
    box-sizing: border-box;
    /* El margen interno es una variable porque la franja de sellos lo necesita
       para sangrarse hasta los bordes: la banda tiene que llegar al borde de la
       tarjeta como el strip llega al borde del pase, y para eso se lo resta.
       Cada pantalla que ensancha la tarjeta pisa --fxlc-pad, no `padding`, o la
       franja se sangraria de menos y quedaria flotando. */
    --fxlc-pad: 18px;
    padding: var(--fxlc-pad);
    border-radius: 16px;
    /* Fondo plano: es el unico que los dos wallets saben reproducir. --fxlc-bg
       es tambien el que usan los sellos para su contraste interno. */
    background: var(--fxlc-bg, #0F172A);
    color: var(--fxlc-text, #fff);
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.fxlc *,
.fxlc *::before,
.fxlc *::after { box-sizing: border-box; }

/* Etiquetas: chicas, en mayuscula y en el color de acento. Es la convencion
   visual de los pases de wallet y lo que hace que se lea como una tarjeta
   y no como una tabla. */
.fxlc .fxlc-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fxlc-label, #F59E0B);
    margin: 0 0 2px;
}

/* --- Cabecera --- */
.fxlc .fxlc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.fxlc .fxlc-marca {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.fxlc .fxlc-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(255, 255, 255, .1);
    flex-shrink: 0;
}
.fxlc .fxlc-logo.is-circulo {
    border-radius: 50%;
    object-fit: cover;
}
.fxlc .fxlc-nombre {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    /* El nombre del programa lo escribe el negocio y puede ser largo:
       se corta en dos lineas en vez de romper el layout. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fxlc .fxlc-head-campo { text-align: right; flex-shrink: 0; }
.fxlc .fxlc-head-valor { font-size: 15px; font-weight: 700; white-space: nowrap; }

/* Estado del premio con la tarjeta completa ("Listo para canjear"). El contador
   es corto y entra siempre en una linea; esto no, asi que se le permite cortar
   y se le pone un techo para que no se coma el nombre del negocio. */
.fxlc .fxlc-head-campo.is-estado { max-width: 48%; }
.fxlc .fxlc-head-campo.is-estado .fxlc-head-valor {
    white-space: normal;
    line-height: 1.2;
    display: block;
}

/* --- Grilla de sellos --- */
.fxlc .fxlc-sellos {
    display: grid;
    grid-template-columns: repeat(var(--fxlc-col, 5), 1fr);
    gap: 8px;
}
/* La grilla como FRANJA: solo cuando el negocio le eligio un color propio
   (sellos_ui.fondo). Nacio para el pase —ahi la franja es el strip.png de Apple
   y el heroImage de Google— pero el negocio elige ese color mirando la tarjeta,
   y verlo pintado en las maquetas de wallet y no en la tarjeta web se lee como
   que el color no se guardo.

   Se sangra hasta los bordes con --fxlc-pad: una banda con margenes a los lados
   no es una franja, es un recuadro. El aire vertical va solo aca —sin color
   propio la grilla no lleva fondo y no hay banda que separar—, asi que las
   tarjetas ya disenadas se siguen viendo igual que siempre.

   Las variables de contraste (--fxlc-bg del glifo del sello lleno y --fxlc-vacio
   del punteado) las escribe el render inline sobre este mismo nodo: se resuelven
   contra el fondo de la FRANJA, no contra el de la tarjeta. Ver
   fx_loyalty_render_tarjeta(). */
.fxlc .fxlc-sellos.is-franja {
    margin-left: calc(var(--fxlc-pad, 18px) * -1);
    margin-right: calc(var(--fxlc-pad, 18px) * -1);
    padding: 12px var(--fxlc-pad, 18px);
}
/* --- Franja del programa de DESCUENTO ---
   Ocupa el lugar de la grilla de sellos. Dos versiones:

   - .fxlc-franja-img: la imagen que eligio el negocio, a sangre y con la
     proporcion del strip de Apple (375x144). Es la misma imagen que viaja al
     pase como strip.png / heroImage, recortada centrada igual que alla.
   - .fxlc-descuento: sin imagen, el porcentaje en grande. Sin color propio de
     franja se apoya sobre el fondo de la tarjeta; con color, se sangra como la
     franja de sellos (.is-franja). */
.fxlc .fxlc-franja-img {
    margin-left: calc(var(--fxlc-pad, 18px) * -1);
    margin-right: calc(var(--fxlc-pad, 18px) * -1);
    aspect-ratio: 375 / 144;
    overflow: hidden;
}
.fxlc .fxlc-franja-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fxlc .fxlc-descuento {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
}
.fxlc .fxlc-descuento.is-franja {
    margin-left: calc(var(--fxlc-pad, 18px) * -1);
    margin-right: calc(var(--fxlc-pad, 18px) * -1);
    padding: 14px var(--fxlc-pad, 18px);
}
.fxlc .fxlc-descuento-pct {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--fxlc-sello, var(--fxlc-label, #F59E0B));
}
/* La franja del programa de cumpleaños: el beneficio en grande y centrado, con
   la bajada debajo, como el strip/hero de los wallets
   (fx_loyalty_franja_img_render()). Mismo lugar, sangria y tamaño que la del de
   descuento. Debajo, el estado cuando no esta disponible. */
.fxlc .fxlc-cumple {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 0;
    min-width: 0;
}
.fxlc .fxlc-cumple.is-franja {
    margin-left: calc(var(--fxlc-pad, 18px) * -1);
    margin-right: calc(var(--fxlc-pad, 18px) * -1);
    padding: 14px var(--fxlc-pad, 18px);
}
.fxlc .fxlc-cumple-grande {
    max-width: 100%;
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--fxlc-sello, var(--fxlc-label, #F59E0B));
    overflow-wrap: anywhere;
}
/* El monto y el regalo pueden ser mas anchos que la franja: el PNG achica la
   letra hasta que entre; aca se achica de entrada y el regalo, que es texto
   libre, puede ir en dos lineas. */
.fxlc .fxlc-cumple--monto .fxlc-cumple-grande { font-size: 40px; }
.fxlc .fxlc-cumple--regalo .fxlc-cumple-grande {
    font-size: 26px;
    line-height: 1.15;
}
.fxlc .fxlc-cumple-chico {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fxlc-vacio, var(--fxlc-text, #fff));
}
.fxlc .fxlc-cumple-detalle {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    color: var(--fxlc-text, #fff);
    opacity: .85;
}
.fxlc .fxlc-descuento-txt {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fxlc-vacio, var(--fxlc-text, #fff));
}

.fxlc .fxlc-sello {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* El sello vacio se dibuja con la tinta de la tarjeta, rebajada. No es
       --fxlc-text directo: cuando el texto no contrasta contra el fondo —el
       clasico blanco sobre blanco— el servidor manda en --fxlc-vacio el negro o
       blanco que si se ve, y ahi el punteado se despega del resto del texto a
       proposito. Ver fx_loyalty_sellos_tinta(). El fallback es para el HTML
       viejo que todavia no trae la variable. */
    border: 2px dashed color-mix(in srgb, var(--fxlc-vacio, var(--fxlc-text, #fff)) 45%, transparent);
    color: color-mix(in srgb, var(--fxlc-vacio, var(--fxlc-text, #fff)) 55%, transparent);
    transition: background .18s, border-color .18s, color .18s;
}
.fxlc .fxlc-circulo { border-radius: 50%; }
.fxlc .fxlc-cuadrado { border-radius: 8px; }

/* El sello completado lleva su propio color, elegido en la seccion Sellos del
   disenador. El servidor lo resuelve en --fxlc-sello y cae en --fxlc-label —el
   color de subtitulos, que es como se pintaban antes— cuando el negocio no
   eligio ninguno. */
.fxlc .fxlc-sello.is-on {
    background: var(--fxlc-sello, var(--fxlc-label, #F59E0B));
    border-color: var(--fxlc-sello, var(--fxlc-label, #F59E0B));
    border-style: solid;
    /* El icono se pinta con el fondo de la tarjeta: es el unico color del que
       ya sabemos que no es el del sello. */
    color: var(--fxlc-bg, #0F172A);
}
.fxlc .fxlc-sello i,
.fxlc .fxlc-sello svg { width: 55%; height: 55%; stroke-width: 2.2; }

/* Sello con imagen propia del negocio. object-fit contain para que un logo
   apaisado no se deforme dentro del circulo. */
.fxlc .fxlc-sello-img {
    width: 68%;
    height: 68%;
    object-fit: contain;
    display: block;
}
.fxlc .fxlc-num { font-size: 11px; font-weight: 600; opacity: .65; }

/* Ultima casilla de una grilla recortada ("+7"): los sellos que no se dibujan.
   Se queda con el borde punteado del sello vacio —es un lugar por llenar, no un
   sello distinto— y solo cambia el contenido por el numero. */
.fxlc .fxlc-sello-mas {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -.02em;
    opacity: .75;
}

/* --- Casilla de recompensa intermedia ---
   No es un sello comun: dice "aca hay un premio". Lleva la imagen que el negocio
   subio en el disenador (.has-img) o, sin imagen, un regalo. Tres estados, los
   mismos que dibuja el PNG del pase (fx_loyalty_sellos_img_premio_casilla()):

   .is-bloq      — sin alcanzar: el contorno punteado del vacio; la imagen
                   atenuada, o el regalo en lugar del numero.
   .is-disp      — alcanzada y sin retirar: a todo color; sin imagen, sobre el
                   color del sello.
   .is-entregada — ya retirada en este ciclo: rebajada y con una tilde. */
.fxlc .fxlc-sello.is-premio {
    position: relative;
    overflow: hidden;
}
.fxlc .fxlc-sello.is-premio.is-disp,
.fxlc .fxlc-sello.is-premio.is-entregada {
    background: var(--fxlc-sello, var(--fxlc-label, #F59E0B));
    border-color: var(--fxlc-sello, var(--fxlc-label, #F59E0B));
    border-style: solid;
    color: var(--fxlc-bg, #0F172A);
}
.fxlc .fxlc-sello.is-premio.is-entregada:not(.has-img) { opacity: .55; }

/* Con imagen, el fondo de color se va y, alcanzada, tambien el borde: la imagen
   ocupa la casilla entera, sin el anillo del color del sello alrededor. El
   estado lo dicen la opacidad y la tilde. Sin alcanzar conserva el punteado del
   vacio: es un lugar por llenar. */
.fxlc .fxlc-sello.is-premio.has-img { background: transparent; }
.fxlc .fxlc-sello.is-premio.has-img.is-disp,
.fxlc .fxlc-sello.is-premio.has-img.is-entregada { border: 0; }
.fxlc .fxlc-premio-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fxlc .fxlc-sello.is-premio.is-bloq .fxlc-premio-img,
.fxlc .fxlc-sello.is-premio.is-entregada .fxlc-premio-img { opacity: .4; }
.fxlc .fxlc-premio-check {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--fxlc-sello, var(--fxlc-label, #F59E0B));
}

/* Navegadores sin color-mix (Safari viejo) igual ven un borde legible. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .fxlc .fxlc-sello { border-color: rgba(255, 255, 255, .45); color: rgba(255, 255, 255, .55); }
}

/* --- Campos --- */
.fxlc .fxlc-primario-valor {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    display: block;
}
.fxlc .fxlc-secundarios {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    /* Un poco mas de aire antes del QR que el `gap` general de la tarjeta:
       pegados, "Vence" se leia como una etiqueta del propio codigo. */
    margin-bottom: 6px;
}
.fxlc .fxlc-campo { min-width: 0; }
.fxlc .fxlc-valor { font-size: 13px; font-weight: 600; }

/* --- Codigo QR --- */
.fxlc .fxlc-barcode {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* Sin esto el recuadro se estira a todo el ancho de la tarjeta (es hijo de
       un flex column) y queda un marco blanco enorme alrededor del QR. */
    align-self: center;
}
.fxlc .fxlc-qr { line-height: 0; }
.fxlc .fxlc-qr canvas,
.fxlc .fxlc-qr img { display: block; }
/* Lado del QR, en UN solo lugar.
   Lo usan el damero del disenador (regla de abajo) y el codigo real, que lo lee
   de aca con getComputedStyle (fx_loyalty_tarjeta.js). Antes cada uno tenia su
   numero y el preview mostraba un hueco de la mitad del QR que despues veia el
   cliente.

   Este es el de las miniaturas del panel, donde el QR es identificacion del
   programa y nadie lo escanea. Las pantallas donde SI se escanea lo suben junto
   con el ancho de la tarjeta; ver .fxp-tarjeta-zona en fx_loyalty_publico.css. */
.fxlc { --fxlc-qr-lado: 116px; }

.fxlc .fxlc-qr-placeholder {
    width: var(--fxlc-qr-lado);
    height: var(--fxlc-qr-lado);
    border-radius: 6px;
    /* Damero gris: se lee como "acá va el QR" sin fingir un código real. */
    background-image:
        linear-gradient(45deg, #e4e4e7 25%, transparent 25%, transparent 75%, #e4e4e7 75%),
        linear-gradient(45deg, #e4e4e7 25%, transparent 25%, transparent 75%, #e4e4e7 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    background-color: #f4f4f5;
}
.fxlc .fxlc-qr-alt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #52525b;
}

/* --- Pie: datos utiles a la izquierda, marca a la derecha --- */
.fxlc .fxlc-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;   /* se pega abajo aunque la tarjeta sea alta */
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--fxlc-text, #fff) 14%, transparent);
}
.fxlc .fxlc-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.fxlc .fxlc-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.3;
    opacity: .85;
    min-width: 0;
}
.fxlc .fxlc-info-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--fxlc-label, #F59E0B);
}
.fxlc .fxlc-info-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Firma de Fiweex: presente siempre, discreta.
   El PNG original es oscuro. brightness(0) lo lleva a negro puro y de ahi
   invert(1) lo pasa a blanco, que es como se adapta al color de la tarjeta:
   el render agrega .is-oscuro cuando el texto de la tarjeta es oscuro. */
.fxlc .fxlc-powered {
    height: 28px;
    width: auto;
    max-width: 200px;
    opacity: .6;
    flex-shrink: 0;
    align-self: flex-end;
    display: block;
    filter: brightness(0) invert(1);
}
.fxlc .fxlc-powered.is-oscuro {
    filter: brightness(0);
    opacity: .45;
}
.fxlc .fxlc-footer-dorso { justify-content: flex-end; }

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .fxlc .fxlc-footer { border-top-color: rgba(255, 255, 255, .14); }
}

/* Sello en modo "completo": la imagen ocupa todo, sin color ni borde propios. */
.fxlc .fxlc-sello.fxlc-sello-full {
    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
}
.fxlc .fxlc-sello-full .fxlc-sello-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Dorso --- */
.fxlc-dorso { justify-content: flex-start; }
.fxlc .fxlc-dorso-body { display: flex; flex-direction: column; gap: 16px; }
.fxlc .fxlc-bloque { min-width: 0; }
.fxlc .fxlc-parrafo {
    /* 14px y no los 12px del resto de los textos chicos de la tarjeta: esto es
       el unico bloque de la tarjeta que se LEE seguido —son las reglas de la
       promocion— y a 12px, en el celular, obligaba a acercar la pantalla. Los
       12px se justifican en un rotulo de dos palabras, no en un parrafo. */
    font-size: 14px;
    /* Los terminos vienen una clausula por linea (ver
       fx_loyalty_generar_terminos()); mas interlineado que el resto de la
       tarjeta separa cada oracion de la siguiente en vez de apretarlas.
       Con la letra mas grande alcanza con 1.8: a 2 el dorso empezaba a
       necesitar scroll con tres clausulas. */
    line-height: 1.8;
    margin: 0;
    opacity: .9;
    overflow-wrap: anywhere;
}
.fxlc .fxlc-vacio {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    opacity: .55;
    text-align: center;
    padding: 24px 8px;
}