/* Paginas publicas de Fiweex Loyalty: la landing donde el cliente se registra
   y la pagina de su tarjeta.

   No depende de Bootstrap ni de Tailwind. Estas dos paginas las abre el cliente
   final desde el celular y cargan un solo CSS ademas del de la tarjeta.

   Prefijo .fxp-* para no chocar con .fxlc-* (la tarjeta) ni con .fxd-* (el
   disenador del panel). */

:root {
    --fxp-fondo: #F4F4F5;
    --fxp-panel: #FFFFFF;
    --fxp-borde: #E4E4E7;
    --fxp-texto: #18181B;
    --fxp-suave: #71717A;
    --fxp-acento: #4F46E5;
    --fxp-acento-h: #4338CA;
    --fxp-error: #DC2626;

    /* Verde del "ya está en tu Wallet". No sale de la marca del negocio a
       proposito: lo que confirma no es la tarjeta —que ya se ve ahi arriba con
       sus colores— sino que una accion salio bien, y para eso el verde se lee
       solo. Si tomara el color del local, un negocio con marca verde no tendria
       como distinguir la confirmacion del resto de la pantalla, y uno con marca
       roja estaria dando una buena noticia en rojo. */
    --fxp-ok: #15803D;
    --fxp-ok-fondo: rgba(21, 128, 61, .09);
    --fxp-ok-borde: rgba(21, 128, 61, .22);

    /* Lila de Fiweex. Son los mismos valores que el portal Enterprise usa como
       fallback de --fx-theme-color (splash_enterprise.html:304-306), donde el
       color real lo pisa el tema del negocio. Aca no hay tema por negocio: la
       landing es de Fiweex, no del local, y el lila es lo que la identifica. */
    --fxp-lila: #957AFB;
    --fxp-lila-35: rgba(109, 79, 212, .35);

    /* El PNG de "Powered by Fiweex" es BLANCO puro. Sobre el fondo claro
       desaparecia. brightness(0) lo pasa a negro sin depender del tinte del
       archivo. Va como variable, y no como regla suelta en .fxp-pie, para que el
       filtro del logo y el fondo de la pagina salgan de la MISMA declaracion:
       asi no puede volver a pasar que uno cambie de tema y el otro no. */
    --fxp-logo-filtro: brightness(0);
}

/* Modo oscuro por preferencia del sistema. La tarjeta no cambia: sus colores
   los eligio el negocio y son parte de su marca. Lo que se adapta es el marco. */
@media (prefers-color-scheme: dark) {
    :root {
        --fxp-fondo: #09090B;
        --fxp-panel: #18181B;
        --fxp-borde: #27272A;
        --fxp-texto: #FAFAFA;
        --fxp-suave: #A1A1AA;

        /* El verde oscuro del modo claro no contrasta contra el #09090B del
           fondo: sobre oscuro va el mismo verde aclarado. */
        --fxp-ok: #4ADE80;
        --fxp-ok-fondo: rgba(74, 222, 128, .10);
        --fxp-ok-borde: rgba(74, 222, 128, .24);

        /* El PNG ya es blanco: sobre el fondo oscuro se usa tal cual. */
        --fxp-logo-filtro: none;
    }
}

.fxp-body {
    margin: 0;
    padding: 0;
    background: var(--fxp-fondo);
    color: var(--fxp-texto);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    /* El navegador del celular tapa la parte de abajo con su barra: sin esto el
       boton de submit queda debajo del borde en iPhone. */
    padding-bottom: env(safe-area-inset-bottom);
}

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

.fxp-wrap {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fxp-centrado {
    min-height: 100svh;
    justify-content: center;
}

.fxp-tarjeta-zona {
    display: flex;
    justify-content: center;
}

/* El display:flex de arriba le gana al atributo hidden, y el paso 2 esconde la
   tarjeta justamente con hidden para que el cliente mire solo sus datos. */
.fxp-tarjeta-zona[hidden] {
    display: none;
}

/* En las paginas del cliente la tarjeta ocupa todo el ancho disponible en vez
   de los 340px del panel. Dos motivos, y el segundo es el que manda:
   la tarjeta ES esta pantalla, no un elemento mas; y el QR crece con ella, que
   es lo que el empleado escanea con el cliente enfrente y a veces con mala luz.
   --fxlc-qr-lado lo lee fx_loyalty_tarjeta.js con getComputedStyle para dibujar
   el codigo real, asi que tiene que quedar en px. */
.fxp-tarjeta-zona .fxlc,
.fxp-flip .fxlc {
    --fxlc-ancho: 100%;
    --fxlc-qr-lado: 200px;
    /* Los sellos escalan solos —son 1fr con aspect-ratio— así que al ensanchar
       la tarjeta solo hace falta acompañar el margen interno. Va por la variable
       y no por `padding` porque la franja de sellos se sangra contra ella. */
    --fxlc-pad: 22px;
}
/* El número del sello vacío es un tamaño fijo: con los sellos más grandes
   quedaba una cifra diminuta en el medio de un círculo. */
.fxp-tarjeta-zona .fxlc .fxlc-num,
.fxp-flip .fxlc .fxlc-num { font-size: 13px; }

/* ============================================================================
   Panel de formulario
   ============================================================================ */

.fxp-panel {
    background: var(--fxp-panel);
    border: 1px solid var(--fxp-borde);
    border-radius: 16px;
    padding: 20px 18px;
}

.fxp-titulo {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.fxp-sub {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fxp-suave);
}

.fxp-form { display: block; }

.fxp-label {
    display: block;
    margin: 14px 0 6px;
    font-size: 13px;
    font-weight: 600;
}
.fxp-form > .fxp-label:first-of-type { margin-top: 0; }

.fxp-opt {
    font-weight: 400;
    color: var(--fxp-suave);
}

/* Asterisco de campo obligatorio.
   No reusa .fxp-req, que es el del correo del paso 1: aquel va en blanco porque
   vive adentro del bloque lila, y sobre el panel blanco seria invisible. */
.fxp-obl {
    color: var(--fxp-error);
    font-weight: 700;
    margin-left: 1px;
}

.fxp-input {
    width: 100%;
    /* 16px exactos: con menos, Safari en iPhone hace zoom al enfocar el campo y
       la pagina queda descuadrada hasta que el cliente la vuelve a achicar. */
    font-size: 16px;
    font-family: inherit;
    color: var(--fxp-texto);
    background: var(--fxp-fondo);
    border: 1px solid var(--fxp-borde);
    border-radius: 10px;
    padding: 12px 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.fxp-input:focus {
    border-color: var(--fxp-acento);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

/* --- Fecha (cumpleaños) ---
   El iconito del calendario lo dibuja el navegador, no nosotros, y lo pinta
   segun el color-scheme del elemento: sin avisarle que el campo esta en oscuro
   lo dibuja negro sobre negro y queda un cuadrado invisible al lado de la
   fecha. color-scheme va SOLO en este input y no en :root para no tocar de
   rebote el resto de la pagina —la tarjeta la pinta el negocio con sus
   colores—. El filter es el respaldo para los WebKit viejos, que ignoran
   color-scheme en el indicador. */
@media (prefers-color-scheme: dark) {
    input[type="date"].fxp-input { color-scheme: dark; }
    input[type="date"].fxp-input::-webkit-calendar-picker-indicator {
        filter: invert(1);
        opacity: .85;
        cursor: pointer;
    }
}

/* Cada campo del paso 2. Los dibuja el JS con lo que manda el servidor, así que
   no se puede depender de :first-of-type para el margen del primero: el
   contenedor los envuelve a todos por igual. */
.fxp-campo-wrap + .fxp-campo-wrap { margin-top: 14px; }
.fxp-campo-wrap .fxp-label { margin-top: 0; }

/* --- Telefono: prefijo + numero ---
   Una sola fila, con el selector angosto y a la izquierda: el prefijo es la
   parte que casi nadie toca —viene con el del negocio ya elegido— y el numero
   es lo que el cliente escribe, asi que se lleva todo el ancho que sobra. */
.fxp-tel-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.fxp-tel-row .fxp-input { min-width: 0; }
.fxp-tel-prefijo {
    /* Ancho al contenido y no fijo: las etiquetas son cortas por construccion
       ("PY +595", ver fx_loyalty_prefijos_paises) y el navegador ya las mide
       mejor que cualquier numero puesto a mano. El tope es para que un dia con
       etiquetas largas se coma como mucho un tercio de la fila, en vez de
       empujar el numero fuera de la pantalla.

       .fxp-input trae width:100%: hay que soltarlo o el select se estira y no
       queda lugar para el numero. */
    flex: 0 0 auto;
    width: auto;
    max-width: 34%;
    /* Sitio para la flecha del control nativo, que es la que dice que esto se
       despliega. Sin el padding, la flecha se come la ultima letra. */
    padding-left: 10px;
    padding-right: 8px;
    text-align: center;
    /* El menu nativo del celular es el que mejor maneja una lista larga: no se
       reemplaza por uno propio, solo se lo hace combinar con los demas campos. */
    text-align-last: center;
}
.fxp-tel-row > .fxp-input:not(.fxp-tel-prefijo) { flex: 1 1 auto; }

.fxp-campo-wrap textarea.fxp-input {
    resize: vertical;
    min-height: 76px;
    line-height: 1.45;
    padding: 10px 14px;
}

.fxp-fila {
    display: flex;
    gap: 10px;
}
.fxp-col { flex: 1 1 0; min-width: 0; }
.fxp-col .fxp-label { margin-top: 14px; }

/* --- Chips de genero --- */
.fxp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fxp-chip { cursor: pointer; }
.fxp-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.fxp-chip span {
    display: inline-block;
    font-size: 13px;
    padding: 8px 14px;
    border: 1px solid var(--fxp-borde);
    border-radius: 999px;
    background: var(--fxp-fondo);
    transition: background .15s, border-color .15s, color .15s;
}
.fxp-chip input:checked + span {
    background: var(--fxp-acento);
    border-color: var(--fxp-acento);
    color: #fff;
}
/* El foco se ve solo con teclado: en el celular el chip ya se pinta al tocarlo. */
.fxp-chip input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .25);
}

/* ============================================================================
   Buscador de correo — calcado del portal Enterprise

   Referencia: splash_enterprise.html:236-330 y :504-527. Mismo bloque lila,
   misma lupa blanca de 44px, mismo pulso al habilitarse.

   Se reescribe con prefijo .fxp-* en vez de importar aquel CSS porque alla todo
   cuelga del selector #forminputs, que en esta pagina no existe. Copiar el
   archivo ataria la landing a un CSS del modulo WiFi que nadie sabria que la
   rompe al tocarlo.
   ============================================================================ */

/* El bloque toma el fondo y la tinta de la TARJETA del negocio: las variables
   --fxp-marca-* las baja la landing con fx_loyalty_estilo_marca(). El lila de
   Fiweex queda solo de respaldo, para cuando este bloque se muestra sin un
   programa detras. */
/* ----------------------------------------------------------------------------
   Términos de acceso — el check que va DEBAJO del buscador de correo

   Deliberadamente sobrio y en los colores del sistema, no en los de la marca
   del negocio: el bloque del correo es del negocio, pero estos términos son de
   FIWEEX y pintarlos con los colores del local los haría pasar por suyos.
   ---------------------------------------------------------------------------- */
.fxp-acepto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* Aire de los dos lados: el check vive entre los campos del alta y el
       boton "Crear mi tarjeta", y es lo ultimo que el cliente lee antes de
       tocarlo. Pegado al boton se leia como parte de el. */
    margin: 12px 0 14px;
    padding: 11px 12px;
    border: 1px solid var(--fxp-borde);
    border-radius: 12px;
    background: var(--fxp-panel);
    font-size: 13px;
    line-height: 1.45;
    color: var(--fxp-texto);
    cursor: pointer;
    transition: border-color .12s;
}
.fxp-acepto.is-activo { border-color: var(--fxp-marca, var(--fxp-acento)); }

/* 18px y no el tamaño por defecto: en un celular esto es un blanco táctil, y
   el nativo de ~13px obliga a apuntar. */
.fxp-acepto input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: var(--fxp-marca, var(--fxp-acento));
}
.fxp-acepto-txt { min-width: 0; }
.fxp-acepto a {
    color: var(--fxp-acento);
    font-weight: 600;
    text-decoration: underline;
}

.fxp-email-block {
    padding: 12px 12px 10px;
    margin-bottom: 4px;
    border-radius: 14px;
    background: var(--fxp-marca, var(--fxp-lila));
    box-shadow: 0 4px 18px var(--fxp-marca-sombra, var(--fxp-lila-35));
}

.fxp-email-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fxp-marca-tinta, #fff);
}
.fxp-req { color: var(--fxp-marca-tinta, #fff); font-weight: 700; }

.fxp-email-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
}

.fxp-email-row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    /* 16px exactos: con menos, Safari en iPhone hace zoom al enfocar y la
       pagina queda descuadrada hasta que el cliente la vuelve a achicar. */
    font-size: 16px;
    font-family: inherit;
    /* Tinta FIJA, no var(--fxp-texto).
       Este campo va sobre el bloque lila y su fondo es blanco fijo, no sigue al
       tema. La variable sí lo sigue: en modo oscuro vale #FAFAFA, o sea que el
       cliente escribia su correo en blanco sobre blanco y no veia lo que
       tipeaba. Fondo fijo, tinta fija. */
    color: #18181B;
    background: #fff;
    /* Un filo oscuro apenas visible. Sobre una tarjeta oscura no se nota; sobre
       una clara es lo que separa el campo blanco del bloque, que si no se
       funden en una sola mancha. */
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 12px;
    padding: 0 14px;
    outline: none;
}
/* Por lo mismo: sin regla propia, el gris del placeholder lo deriva el
   navegador del `color`, y en modo oscuro tambien salia casi blanco. */
.fxp-email-row input::placeholder { color: #A1A1AA; opacity: 1; }
.fxp-email-row input:focus {
    /* Dos anillos, uno para cada extremo: el blanco se ve sobre fondo oscuro y
       el negro sobre fondo claro. El color del bloque lo elige el negocio, asi
       que el foco no puede depender de que sea uno de los dos. */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 0 0 4px rgba(0, 0, 0, .12);
}

.fxp-buscar-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
}

/* Anillo que late detras del boton para llevar el pulgar hasta ahi. Va debajo
   (z-index 0) y sin eventos, para no comerse el toque. */
.fxp-buscar-pulse {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 3px solid var(--fxp-marca-tinta, #fff);
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}

.fxp-btn-buscar {
    position: relative;
    z-index: 1;
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 12px;
    background: #fff;
    color: #111;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: opacity .15s ease, transform .12s ease, box-shadow .15s ease;
}
.fxp-btn-buscar:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    animation: none !important;
}
.fxp-btn-buscar:not(:disabled):active { transform: scale(.98); }

.fxp-buscar-icono {
    width: 20px;
    height: 20px;
    stroke: #111;
}

/* Con el email ya completo, el boton rebota y el anillo late: es la senal de
   "ya podes tocar". Se apaga sola cuando el boton se deshabilita. */
.fxp-buscar-wrap.is-highlight .fxp-buscar-pulse {
    animation: fxp-buscar-pulse 1.6s ease-out infinite;
}
.fxp-buscar-wrap.is-highlight .fxp-btn-buscar:not(:disabled) {
    animation: fxp-buscar-bounce 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .15), 0 6px 16px rgba(0, 0, 0, .35);
}
.fxp-buscar-wrap.is-highlight .fxp-btn-buscar:not(:disabled):active {
    animation: none;
    transform: scale(.98);
}

@keyframes fxp-buscar-pulse {
    0%   { transform: scale(1);    opacity: .9; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}
@keyframes fxp-buscar-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* Mientras busca: la lupa se va, gira el spinner y se corta el rebote. */
.fxp-btn-buscar.is-cargando .fxp-buscar-icono { visibility: hidden; }
.fxp-btn-buscar.is-cargando .fxp-spinner { display: block; }
.fxp-btn-buscar.is-cargando {
    animation: none !important;
}
.fxp-btn-buscar .fxp-spinner {
    border-color: rgba(17, 17, 17, .25);
    border-top-color: #111;
}

/* La tinta de la tarjeta, apagada. Se hace con opacidad y no con un
   rgba(255,255,255,.78) fijo porque el color del bloque lo elige el negocio:
   sobre una tarjeta clara ese blanco desaparecia. */
.fxp-email-hint {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    text-align: left;
    color: var(--fxp-marca-tinta, #fff);
    opacity: .78;
}

/* Quien pidio menos animacion no ve latir nada. */
@media (prefers-reduced-motion: reduce) {
    .fxp-buscar-wrap.is-highlight .fxp-buscar-pulse,
    .fxp-buscar-wrap.is-highlight .fxp-btn-buscar:not(:disabled) {
        animation: none;
    }
}

/* ============================================================================
   Botones
   ============================================================================ */

/* Lleva los colores de la TARJETA del negocio, igual que el buscador de correo:
   es la misma pagina y el mismo bloque de marca, y con el lila de Fiweex el
   unico boton grande de la landing era lo unico que no seguia al programa. El
   acento queda de respaldo, para cuando estas clases se muestran sin diseno
   detras. */
.fxp-btn {
    position: relative;
    width: 100%;
    margin-top: 20px;
    /* 48px de alto: el minimo comodo para un dedo segun las guias de Apple y
       Google. Este boton se toca parado en una caja, no con un mouse. */
    min-height: 48px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    color: var(--fxp-marca-tinta, #fff);
    background: var(--fxp-marca, var(--fxp-acento));
    box-shadow: 0 4px 18px var(--fxp-marca-sombra, transparent);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
}
/* Sin --fxp-acento-h: el fondo puede ser un degradado del negocio y no hay un
   segundo color para el hover. El filtro lo oscurece sea cual sea. */
.fxp-btn:hover { filter: brightness(.94); }
/* .55 y no .75: "Crear mi tarjeta" nace apagado hasta que el cliente acepta los
   terminos, y a .75 se veia lo bastante vivo como para que lo tocara y no
   entendiera por que no pasaba nada. Mientras carga no se apaga —ahi manda
   .is-cargando, que muestra el spinner—. */
.fxp-btn:disabled { cursor: default; opacity: .55; }
.fxp-btn.is-cargando:disabled { opacity: 1; }

.fxp-btn.is-cargando .fxp-btn-txt { visibility: hidden; }
.fxp-btn.is-cargando .fxp-spinner { display: block; }

.fxp-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fxp-girar .7s linear infinite;
}
@keyframes fxp-girar { to { transform: rotate(360deg); } }

/* La tinta del boton la elige el negocio y puede ser oscura: el spinner blanco
   fijo desaparecia sobre una tarjeta clara. */
.fxp-btn .fxp-spinner {
    border-color: rgba(127, 127, 127, .35);
    border-top-color: currentColor;
}

/* ============================================================================
   El buscador de correo como popup

   La clase .fxp-modal la pone y la saca el JS sobre el ENVOLTORIO del paso 1
   (#fxpPaso1Zona). Con la clase, el panel flota centrado sobre la pagina; sin
   ella, el envoltorio es un div cualquiera y adentro queda el mismo panel de
   siempre, en el flujo, debajo de la tarjeta.

   Es todo el mecanismo: no hay dos copias del buscador ni se mueven nodos de un
   lado a otro. Un solo formulario que cambia de lugar segun una clase, que es
   lo que hace que cerrarlo no pueda dejar al cliente sin forma de registrarse.
   ============================================================================ */

.fxp-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    /* El aire minimo contra los bordes de la pantalla, y el safe-area del
       iPhone para que el popup no quede debajo del notch ni de la barra. */
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

/* El fondo y la X existen SOLO en modo popup: en la pagina el panel no tiene de
   donde cerrarse porque ya no tapa nada. */
.fxp-modal-fondo,
.fxp-modal-x { display: none; }

.fxp-modal > .fxp-modal-fondo {
    display: block;
    position: absolute;
    inset: 0;
    /* Casi negro y con desenfoque: la tarjeta se sigue adivinando detras —el
       cliente no perdio de vista que esto es para ESA tarjeta— pero deja de
       competir con el campo de correo. */
    background: rgba(9, 9, 11, .72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: fxp-aparecer-quieto .3s ease-out both;
}

.fxp-modal > .fxp-modal-caja {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    /* Con el teclado abierto en un celular chico el panel no entra: que scrollee
       el popup y no la pagina de atras, que esta bloqueada. */
    max-height: 100%;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* El panel arranca con foco puesto (tabindex -1 en la vista) y el navegador le
   dibuja su anillo: sobre un dialogo que el cliente no abrio, ese recuadro se
   lee como un error. El foco sigue estando, que es lo que importa para el
   teclado y el lector de pantalla. */
.fxp-modal > .fxp-modal-caja:focus { outline: none; }

.fxp-modal-x {
    position: absolute;
    top: 10px;
    right: 10px;
    /* 36px: el minimo comodo para un dedo sin que el boton compita con el
       titulo que tiene al lado. */
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--fxp-suave);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.fxp-modal > .fxp-modal-caja > .fxp-modal-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fxp-modal-x:hover {
    color: var(--fxp-texto);
    background: var(--fxp-fondo);
}
.fxp-modal-x svg { width: 18px; height: 18px; }

/* El titulo no se mete debajo de la X. */
.fxp-modal > .fxp-modal-caja > .fxp-titulo { padding-right: 34px; }

/* Con el popup abierto la pagina de atras no se mueve: sin esto, el dedo que
   arrastra sobre el fondo scrollea la landing por detras del dialogo. */
.fxp-body.fxp-con-modal { overflow: hidden; }

/* ============================================================================
   Aparicion del buscador de correo

   El paso 1 no esta al entrar: se destapa solo a los 3 segundos, cuando el
   cliente ya miro la tarjeta (ver fx_loyalty_landing.js).

   La animacion no es decoracion. Un bloque que se materializa de golpe a mitad
   de pagina se lee como un salto del navegador; subiendo unos pixeles mientras
   aparece se lee como algo que llega, que es lo unico que tiene que decir.
   ============================================================================ */

.fxp-aparece { animation: fxp-aparecer .45s ease-out both; }

@keyframes fxp-aparecer {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Sin movimiento el bloque aparece igual, solo que sin viajar: lo que molesta
   es el desplazamiento, no el aviso de que hay algo nuevo. Quitar la animacion
   entera dejaria al buscador materializandose de golpe, que es peor. */
@media (prefers-reduced-motion: reduce) {
    .fxp-aparece { animation-name: fxp-aparecer-quieto; }
}

@keyframes fxp-aparecer-quieto {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fxp-btn-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--fxp-texto);
    background: var(--fxp-panel);
    border: 1px solid var(--fxp-borde);
    border-radius: 999px;
    cursor: pointer;
}
.fxp-btn-sec svg { width: 16px; height: 16px; }

/* "¿No sos vos? Registrate con otro correo".
 *
 * Era texto gris sin fondo ni borde, del tamano de un pie de pagina: la unica
 * salida del cliente que se equivoco de correo no se veia. Ahora es una
 * pastilla con su propio fondo, recortada del panel que la contiene.
 *
 * Sigue siendo secundaria a proposito —el borde es el mismo gris de los campos
 * y no el color de la marca—: la accion principal de esta pantalla es crear la
 * tarjeta, y este boton tiene que estar cuando se lo busca, no antes. */
.fxp-volver {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Ancho al contenido y centrado, no estirado al ancho del panel: es una
       salida debajo de "Crear mi tarjeta", no una segunda opcion en pie de
       igualdad con ese boton. width:fit-content + margin:auto lo centra sin
       competir con el ancho completo del boton principal que tiene arriba. */
    width: fit-content;
    max-width: 100%;
    /* Separado del boton principal por arriba; abajo lo separa de los terminos
       del programa el margin-top que ya trae .fxp-terminos. */
    margin: 14px auto 0;
    padding: 9px 14px;
    font-size: 13px;
    line-height: 1.35;
    font-family: inherit;
    text-align: left;
    color: var(--fxp-suave);
    /* El color de la tarjeta del negocio, pero lavado: es de la misma marca que
       el boton de al lado sin competir con el. El relleno lleno lo tiene "Crear
       mi tarjeta", que es la accion principal de la pantalla. Los grises quedan
       de respaldo para cuando esta clase se muestra sin diseno detras. */
    background: var(--fxp-marca-tenue, var(--fxp-fondo));
    border: 1px solid var(--fxp-marca-borde, var(--fxp-borde));
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

/* La pregunta en el color del texto y la respuesta en gris: lo que engancha al
   que se equivoco es "¿no sos vos?", y leido todo del mismo gris habia que
   leer la linea entera para darse cuenta de que lo interpelaba. */
.fxp-volver b {
    color: var(--fxp-texto);
    font-weight: 600;
}

/* El hover sube el mismo color, no cambia de color: subirlo es lo que se lee
   como "esto responde". */
.fxp-volver:hover {
    color: var(--fxp-texto);
    border-color: var(--fxp-marca, var(--fxp-suave));
    background: var(--fxp-marca-tenue-alto, var(--fxp-panel));
}

.fxp-volver:focus-visible {
    outline: 2px solid var(--fxp-suave);
    outline-offset: 2px;
}

/* La flecha no se achica cuando el texto se parte en dos renglones en pantallas
   angostas. */
.fxp-volver svg { width: 15px; height: 15px; flex: none; }

.fxp-acciones {
    display: flex;
    justify-content: center;
}

/* Badges de wallet. El alto fijo de 48px es el minimo que pide Google (48dp)
   y con el gap de 12px se respeta el espacio libre de 8dp de su guia y el
   .1X de la de Apple. El ancho va en `auto` para no deformar el arte: cada
   badge tiene su propia proporcion y ninguna de las dos guias deja tocarla. */
.fxp-wallets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
/* El display:flex de arriba le gana al hidden del HTML, y el JS esconde este
   bloque con la propiedad .hidden cuando muestra la confirmacion. Sin esta
   regla los badges y el "ya está en tu Wallet" quedan los dos en pantalla. */
.fxp-wallets[hidden] { display: none; }

/* Los dos badges se apilan y cada uno tiene su proporcion oficial (Apple 3.15:1,
   Google 4.35:1), asi que a igual alto quedan de distinto ancho y centrados se
   ven escalonados. El ancho fijo es el del badge mas ancho —el de Google— y el
   arte va centrado adentro: empareja el bloque sin escalar ni recortar el SVG,
   que es lo unico que las dos guias no permiten. */
.fxp-wallet-btn {
    display: inline-flex;
    justify-content: center;
    width: 209px;
    padding: 0;
    background: none;
    border: 0;
    line-height: 0;
    cursor: pointer;
}
.fxp-wallet-btn:focus-visible {
    outline: 2px solid var(--fxp-acento);
    outline-offset: 3px;
    border-radius: 8px;
}

.fxp-wallet-badge {
    height: 48px;
    width: auto;
    display: block;
}

/* En el telefono queda un solo badge: el de la plataforma del cliente. La clase
   la pone el script del partial de botones —nunca el servidor—, y solo cuando
   los dos badges existen. Sin JS quedan los dos, que es el estado de siempre. */
.fxp-wallets--solo-apple .fxp-wallet-btn--google,
.fxp-wallets--solo-google .fxp-wallet-btn--apple {
    display: none;
}

/* El cartel que ocupa el lugar de los badges cuando el cliente vuelve de
   guardar; el JS esconde uno y muestra el otro (fx_loyalty_tarjeta.js).

   Mismo ancho que los badges —209px, el del arte mas ancho— para que el cambio
   no mueva nada de lo que hay alrededor: el bloque vive al pie de la pagina y
   un salto de altura ahi arrastra el scroll justo cuando el cliente esta
   leyendo la confirmacion. */
.fxp-wallet-ok {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 209px;
    margin: 0 auto;
}
.fxp-wallet-ok[hidden] { display: none; }

.fxp-wallet-ok-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    /* Los 48px del badge que reemplaza, para que el bloque conserve su alto. */
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    background: var(--fxp-ok-fondo);
    border: 1px solid var(--fxp-ok-borde);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fxp-ok);
}

.fxp-wallet-ok-txt svg { width: 18px; height: 18px; flex: none; }

/* Las dos caras del cartel, y solo una a la vez. Viven las dos en el HTML
   —no las escribe el JS— porque el estado puede cambiar dos veces en la misma
   pantalla: se toca el badge, aparece la pregunta, y unos segundos despues la
   respuesta del servidor la convierte en la confirmacion. */
.fxp-wallet-ok .fxp-wallet-ok-txt--tentativa,
.fxp-wallet-ok .fxp-wallet-otra--tentativa,
.fxp-wallet-ok.is-tentativa .fxp-wallet-ok-txt--firme,
.fxp-wallet-ok.is-tentativa .fxp-wallet-otra--firme {
    display: none;
}
.fxp-wallet-ok.is-tentativa .fxp-wallet-ok-txt--tentativa { display: flex; }

/* Sin el verde del "ok": todavia no hay nada bueno que celebrar, y el color de
   confirmacion leido de reojo es exactamente el mensaje equivocado —el cliente
   ve verde, no lee, y se va sin la tarjeta—. Neutro, como la pregunta. */
.fxp-wallet-ok-txt--tentativa {
    background: none;
    border-color: var(--fxp-borde);
    color: var(--fxp-texto);
}

/* Deliberadamente discreto: es la salida para el que canceló del otro lado o
   cambió de teléfono, no una segunda invitación a guardar. Compitiendo con la
   confirmación volveria a sembrar la duda que el cartel acaba de despejar. */
.fxp-wallet-otra {
    padding: 4px 8px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 12px;
    color: var(--fxp-suave);
    text-decoration: underline;
    cursor: pointer;
}

/* Salvo cuando el cartel pregunta: ahi el boton es la respuesta, no una nota
   al pie. El que cancelo tiene que poder volver sin buscar. */
.fxp-wallet-ok.is-tentativa .fxp-wallet-otra {
    font-size: 13px;
    color: var(--fxp-texto);
}
.fxp-wallet-otra:focus-visible {
    outline: 2px solid var(--fxp-acento);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ============================================================================
   Mensajes
   ============================================================================ */

.fxp-error {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--fxp-error);
}
.fxp-error[hidden] { display: none; }

.fxp-hint {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--fxp-suave);
}

.fxp-saludo {
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.35;
    color: var(--fxp-texto);
}
/* Nombre del cliente: color de marca de la tarjeta cuando contrasta con el
   fondo de la pagina, y el texto normal de la pagina cuando no. Las dos
   variantes las calcula fx_loyalty_tarjeta_publica.php en linea; acá solo se
   elige cuál de las dos usar segun el tema del sistema. */
.fxp-saludo-nombre { color: var(--fxp-saludo-claro); }
@media (prefers-color-scheme: dark) {
    .fxp-saludo-nombre { color: var(--fxp-saludo-oscuro); }
}

/* ============================================================================
   "Guardala para que no se pierda"

   El saludo y los badges de wallet, envueltos para poder levantarse como popup
   a los 5 segundos (ver fx_loyalty_tarjeta.js). Es el mismo mecanismo que el
   buscador de la landing: el envoltorio (#fxpGuardarZona) toma .fxp-modal
   mientras flota y la pierde al cerrarlo, y ahi adentro queda el mismo bloque
   de siempre, en el flujo, debajo de la tarjeta.

   Por eso la caja NO tiene fondo ni borde propios: en la pagina el saludo va
   sobre el fondo de la pagina, como estuvo siempre, y el recuadro aparece solo
   en modo popup, donde si tiene que despegarse de lo que hay atras.
   ============================================================================ */

.fxp-guardar {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Los mismos 18px que separan a los hijos de .fxp-wrap: envolverlos no
       tiene que cambiar como se ven cuando el popup no esta. */
    gap: 18px;
}

.fxp-modal > .fxp-guardar {
    background: var(--fxp-panel);
    border: 1px solid var(--fxp-borde);
    border-radius: 18px;
    /* Arriba sobra lugar para la X, que en modo popup se dibuja en la esquina. */
    padding: 34px 20px 26px;
}

/* Wallet primero: en la primera visita la tarjeta web no se ve hasta que el
   cliente cierra el popup. La clase la pone la vista antes del primer pintado
   y la saca mostrarTarjeta() (fx_loyalty_tarjeta.js). El "Powered by Fiweex"
   tambien se esconde: detras del popup quedaba solo, flotando en una pagina
   vacia, y aparece junto con la tarjeta al tocar "Ver mi tarjeta web". */
.fxp-wallet-primero > .fxp-banner-premio,
.fxp-wallet-primero > .fxp-flip,
.fxp-wallet-primero > .fxp-acciones,
.fxp-wallet-primero > .fxp-pie { display: none; }

/* Al destaparse, la tarjeta entra con un fundido y no de golpe. Solo opacidad:
   un transform sobre .fxp-flip se pisaria con el volteo 3D. */
.fxp-tarjeta-revela > .fxp-banner-premio,
.fxp-tarjeta-revela > .fxp-flip,
.fxp-tarjeta-revela > .fxp-acciones,
.fxp-tarjeta-revela > .fxp-pie {
    animation: fxp-aparecer-quieto .35s ease-out both;
}

/* El saludo cambia segun donde este el bloque: "esta es tu tarjeta" en la
   pagina, con la tarjeta arriba; "tu tarjeta está lista" en el popup, donde
   todavia no se ve. */
.fxp-saludo-popup { display: none; }
.fxp-modal .fxp-saludo-popup { display: inline; }
.fxp-modal .fxp-saludo-pagina { display: none; }

/* "Ver mi tarjeta web": la salida del popup, con estilo de link para no
   competir con los badges. Solo existe en modo popup, igual que la X. */
.fxp-ver-web { display: none; }
.fxp-modal .fxp-ver-web {
    display: inline-block;
    /* Alto de dedo aunque se vea como un link. */
    min-height: 44px;
    margin-top: -6px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--fxp-suave);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.fxp-modal .fxp-ver-web:hover { color: var(--fxp-texto); }
.fxp-ver-web:focus-visible {
    outline: 2px solid var(--fxp-acento);
    outline-offset: 2px;
    border-radius: 6px;
}

.fxp-terminos {
    margin-top: 16px;
    font-size: 12px;
    color: var(--fxp-suave);
}
.fxp-terminos summary { cursor: pointer; }
.fxp-terminos p {
    margin: 8px 0 0;
    line-height: 1.5;
    max-height: 180px;
    overflow-y: auto;
}

.fxp-banner-premio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #16A34A, #15803D);
    color: #fff;
}
/* Premio pendiente de otra visita: ámbar y no verde. El verde se lee como
   "listo, andá a buscarlo", que es justo lo que todavía no puede hacer. */
.fxp-banner-premio.is-pendiente {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}
/* Vencida: gris y no rojo. Es una mala noticia, no un error del cliente ni algo
   que él pueda arreglar tocando la pantalla; el rojo pediría una acción que no
   existe. Es el mismo banner porque ocupa el mismo lugar y responde la misma
   pregunta —"¿qué pasa con mi tarjeta?"—, apagado. */
.fxp-banner-premio.is-vencida {
    background: linear-gradient(135deg, #64748B, #475569);
}
.fxp-banner-emoji { font-size: 26px; line-height: 1; }
.fxp-banner-premio b { display: block; font-size: 15px; }
.fxp-banner-premio span { font-size: 13px; opacity: .92; }

.fxp-aviso {
    text-align: center;
    padding: 8px 4px;
}
.fxp-aviso-icono {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    color: var(--fxp-suave);
}
.fxp-aviso-icono svg { width: 100%; height: 100%; }
.fxp-aviso h1 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
}
.fxp-aviso p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fxp-suave);
}

/* ============================================================================
   Volteo de la tarjeta
   ============================================================================

   Las dos caras se apilan en la misma celda del grid y se rotan en 3D. El dorso
   se renderiza de entrada y no por AJAX: ya esta calculado del lado del
   servidor y voltear la tarjeta no puede depender de la señal del cliente. */

.fxp-flip {
    display: grid;
    perspective: 1400px;
    /* Antes compartia justify-content:center con .fxp-tarjeta-zona, cuando
       ambos eran flex. Al pasar a grid ese valor no se resetea: la columna
       auto se queda en max-content (el QR) y la tarjeta queda estrecha.
       stretch + width 100% es el mismo ancho que la landing. */
    justify-content: stretch;
    width: 100%;
}
.fxp-flip-cara {
    grid-area: 1 / 1;
    width: 100%;
    display: flex;
    justify-content: center;
    backface-visibility: hidden;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    transform-style: preserve-3d;
}
.fxp-flip-frente { transform: rotateY(0deg); }
.fxp-flip-dorso  { transform: rotateY(180deg); }
.fxp-flip.is-girada .fxp-flip-frente { transform: rotateY(-180deg); }
.fxp-flip.is-girada .fxp-flip-dorso  { transform: rotateY(0deg); }

/* Quien pidio menos animacion ve el cambio de cara sin la rotacion. */
@media (prefers-reduced-motion: reduce) {
    .fxp-flip-cara { transition: none; }
}

/* ============================================================================
   Pie
   ============================================================================ */

.fxp-pie {
    display: flex;
    justify-content: center;
    padding-top: 6px;
}
.fxp-pie img {
    height: 28px;
    width: auto;
    opacity: .8;
    /* Ver --fxp-logo-filtro arriba: negro en tema claro, sin tocar en oscuro. */
    filter: var(--fxp-logo-filtro);
}

/* Aviso de que Fiweex ya tenia parte de los datos. Va arriba de los campos que
   quedaron, o solo, cuando no quedo ninguno. */
/* El correo con el que se esta registrando, arriba de los campos del paso 2.
   Es un renglon y no una caja con borde: no es un campo mas que haya que
   completar —no se puede escribir en el— y dibujarlo como input invitaria a
   tocarlo para corregirlo, que es justo lo que no hace. Gris y chico: esta
   para confirmar, no para competir con lo que si hay que llenar. */
.fxp-email-usado {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--fxp-suave);
}
.fxp-email-usado svg { width: 15px; height: 15px; flex: none; }
/* El correo puede ser largo y la pantalla angosta: se corta con puntos en vez
   de empujar el ancho del panel. */
.fxp-email-usado-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--fxp-texto);
}
.fxp-email-usado[hidden] { display: none; }

/* ============================================================================
   Editar datos

   Lo que abre el paso 2 cuando Fiweex ya conoce a esta persona. Antes era una
   nota con fondo —"Ya tenemos todos tus datos."— con el boton adentro; quedo
   solo el boton, sin el envoltorio: la frase explicaba una ausencia que nadie
   estaba reclamando, y el boton dice lo mismo por implicacion.

   En tamano de nota y sin relleno de color: la accion principal de esta pantalla
   sigue siendo crear la tarjeta. Este boton tiene que estar cuando se lo busca,
   no antes —es el mismo criterio que .fxp-volver—.
   ============================================================================ */

.fxp-btn-editar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* El margen de abajo lo separa del primer campo, o del check de terminos
       cuando no queda ningun campo que pedir. Lo tenia el bloque que lo envolvia
       y ahora lo lleva el boton, que es lo unico que queda. */
    margin: 0 0 14px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--fxp-texto);
    background: var(--fxp-panel);
    border: 1px solid var(--fxp-marca-borde, var(--fxp-borde));
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.fxp-btn-editar svg { width: 14px; height: 14px; flex: none; }
.fxp-btn-editar:hover { border-color: var(--fxp-marca, var(--fxp-suave)); }
/* Apagado mientras el servidor manda el codigo: el popup aparece recien cuando
   el mail ya salio, y sin esta senal el boton se ve tocable todo ese rato. */
.fxp-btn-editar:disabled { opacity: .55; cursor: default; }
.fxp-btn-editar:focus-visible {
    outline: 2px solid var(--fxp-suave);
    outline-offset: 2px;
}

/* ============================================================================
   Corrección de datos: el popup del código

   El cliente toca "Editar datos" en el paso 2 y este dialogo le pide los seis
   digitos que le acaban de llegar por correo. Reusa .fxp-modal y .fxp-panel: es
   el mismo popup que el buscador de correo, con otro contenido adentro. Lo
   unico propio es el campo, que no se parece a ningun otro input del formulario
   —y eso es a proposito: se llena copiando, no escribiendo—.
   ============================================================================ */

/* El correo, entero y sin tapar, dentro de la frase del popup. En su propia
   linea y sin cortar a mitad de palabra: es lo que el cliente tiene que
   RECONOCER, y un correo partido por la mitad del renglon se lee mal. */
.fxp-otp-email {
    display: inline-block;
    word-break: break-all;
    color: var(--fxp-texto);
}

/* "Ya te lo habiamos mandado hace unos minutos". Solo aparece cuando el codigo
   viene de un correo anterior: es la respuesta a un boton que se toco y no hizo
   salir ningun mail. */
.fxp-otp-nota {
    margin: 0 0 4px;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--fxp-lila-08, rgba(109, 79, 212, .08));
    color: var(--fxp-texto);
    font-size: 12px;
    line-height: 1.45;
}
.fxp-otp-nota[hidden] { display: none; }

.fxp-otp-input {
    /* Grande, centrado y espaciado: son seis digitos que se leen de un mail y
       se tipean sin mirar el teclado. El tracking los separa de a uno, que es
       lo que evita el 6 pegado al 8 cuando el cliente los compara con el
       correo. */
    width: 100%;
    padding: 13px 12px;
    font-family: inherit;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .28em;
    /* El text-indent compensa el espacio que letter-spacing agrega DESPUES del
       ultimo digito: sin esto el numero se ve corrido a la izquierda. */
    text-indent: .28em;
    text-align: center;
    color: var(--fxp-texto);
    background: var(--fxp-panel);
    border: 1px solid var(--fxp-borde);
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.fxp-otp-input::placeholder {
    color: var(--fxp-suave);
    opacity: .45;
    font-weight: 600;
}
.fxp-otp-input:focus {
    outline: none;
    border-color: var(--fxp-marca, var(--fxp-acento));
    box-shadow: 0 0 0 3px var(--fxp-lila-08, rgba(109, 79, 212, .12));
}

/* El spinner del boton secundario: el de .fxp-btn se posiciona sobre un boton
   que ocupa el ancho del panel, y este es una pastilla al lado de otra. */
.fxp-btn-sec { position: relative; }
.fxp-btn-sec.is-cargando span:not(.fxp-spinner) { visibility: hidden; }
.fxp-btn-sec.is-cargando svg { visibility: hidden; }
.fxp-btn-sec.is-cargando .fxp-spinner { display: block; }
.fxp-btn-sec .fxp-spinner {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-color: rgba(127, 127, 127, .35);
    border-top-color: currentColor;
}
.fxp-btn-sec:disabled { opacity: .6; cursor: default; }
.fxp-btn-sec.is-cargando:disabled { opacity: 1; }