.btn-loading-spinner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.5em; /* solo por seguridad visual */
}

/* Estado de carga: ocultamos el texto original visualmente */
.btn-loading-spinner.is-loading {
    color: transparent;
}

/* Texto "Espere..." centrado dentro del botón */
.btn-loading-spinner.is-loading::after {
    content: "Espere...";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: inherit; /* usa el color del botón */
    white-space: nowrap;
}

/* Spinner dentro del botón */
.btn-loading-spinner.is-loading::before {
    content: "";
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-right-color: currentColor;
    animation: bls-spin 0.7s linear infinite;
    position: absolute;
    left: calc(50% - 2.2em); /* a la izquierda del texto */
    top: 50%;
    transform: translateY(-50%);
}

/* Animación del spinner */
@keyframes bls-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}