/* Forsend Botón Liquidación */
.fbl-boton {
    --fbl-color: #e10600;
    --fbl-top: 50%;
    position: fixed;
    left: 0;
    top: var(--fbl-top);
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 10px;
    background: var(--fbl-color);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transform: translateY(-50%);
    transform-origin: left center;
    animation: fbl-latido 1.4s ease-in-out infinite;
    transition: padding .2s ease, filter .2s ease;
}

/* Anillo que "palpita" hacia afuera */
.fbl-boton::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--fbl-color);
    z-index: -1;
    animation: fbl-onda 1.4s ease-out infinite;
}

.fbl-boton__texto {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.fbl-boton:hover,
.fbl-boton:focus-visible {
    padding-left: 16px;
    filter: brightness(1.1);
    animation-play-state: paused;
}

.fbl-boton:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

@keyframes fbl-latido {
    0%, 40%, 100% { transform: translateY(-50%) scale(1); }
    10%           { transform: translateY(-50%) scale(1.12); }
    20%           { transform: translateY(-50%) scale(1); }
    30%           { transform: translateY(-50%) scale(1.08); }
}

@keyframes fbl-onda {
    0%   { opacity: .6; transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.5, 1.25); }
}

@media (max-width: 768px) {
    .fbl-boton { padding: 14px 7px; }
    .fbl-boton__texto { font-size: 12px; letter-spacing: 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .fbl-boton,
    .fbl-boton::before { animation: none; }
}