/**
 * Loading Don Gestión - Spinner para botones "Esperando pago" (PosNet / QR)
 * Mismo dongestion.svg que dongestion-loading.css: D + 3 líneas animadas
 */

.dongestion-loading-button-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 8px;
}

.dongestion-loading-button-spinner .dongestion-loading-button-logo {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dongestion-loading-button-spinner .dongestion-loading-button-logo svg {
    width: 36px;
    height: 36px;
}

/* Variante grande para loading inicial (Generando QR / Procesando pago Point) */
.dongestion-loading-button-spinner--large {
    min-width: 64px;
    min-height: 64px;
    margin-right: 0;
    margin-bottom: 8px;
}
.dongestion-loading-button-spinner--large .dongestion-loading-button-logo {
    width: 64px;
    height: 64px;
}
.dongestion-loading-button-spinner--large .dongestion-loading-button-logo svg {
    width: 64px;
    height: 64px;
}

/* Mismas animaciones que dongestion-loading.css (3 líneas wave) */
.dongestion-loading-button-spinner .loading-bar-1 {
    animation: loadingWave1 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0s;
    transform: translate(223px, 187px);
}

.dongestion-loading-button-spinner .loading-bar-2 {
    animation: loadingWave2 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0.15s;
    transform: translate(223px, 187px);
}

.dongestion-loading-button-spinner .loading-bar-3 {
    animation: loadingWave3 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0.3s;
    transform: translate(182px, 210px);
}

@keyframes loadingWave1 {
    0%, 100% { transform: translate(223px, 187px); }
    50%      { transform: translate(223px, 145px); }
}

@keyframes loadingWave2 {
    0%, 100% { transform: translate(223px, 187px); }
    50%      { transform: translate(223px, 155px); }
}

@keyframes loadingWave3 {
    0%, 100% { transform: translate(182px, 210px); }
    50%      { transform: translate(182px, 175px); }
}

/* D - animación de color (igual que dongestion-loading) */
.dongestion-loading-button-spinner .d-shape-animated.d-shape-1,
.dongestion-loading-button-spinner #d-shape-1.d-shape-animated {
    animation: colorChange1 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0s;
    filter: drop-shadow(0 0 2px rgba(109, 141, 224, 0.5));
}

.dongestion-loading-button-spinner .d-shape-animated.d-shape-2,
.dongestion-loading-button-spinner #d-shape-2.d-shape-animated {
    animation: colorChange2 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0.15s;
    filter: drop-shadow(0 0 2px rgba(110, 142, 225, 0.5));
}

@keyframes colorChange1 {
    0%, 100% { fill: #506CCE; filter: drop-shadow(0 0 2px rgba(80, 108, 206, 0.5)); }
    25%      { fill: #7FA3FF; filter: drop-shadow(0 0 6px rgba(127, 163, 255, 0.8)); }
    50%      { fill: #9BB5FF; filter: drop-shadow(0 0 8px rgba(155, 181, 255, 1)); }
    75%      { fill: #7FA3FF; filter: drop-shadow(0 0 6px rgba(127, 163, 255, 0.8)); }
}

@keyframes colorChange2 {
    0%, 100% { fill: #6D8DE0; filter: drop-shadow(0 0 2px rgba(109, 141, 224, 0.5)); }
    25%      { fill: #8FB0FF; filter: drop-shadow(0 0 6px rgba(143, 176, 255, 0.8)); }
    50%      { fill: #A8C4FF; filter: drop-shadow(0 0 8px rgba(168, 196, 255, 1)); }
    75%      { fill: #8FB0FF; filter: drop-shadow(0 0 6px rgba(143, 176, 255, 0.8)); }
}

/* En alertas un poco más chico */
.alert .dongestion-loading-button-spinner .dongestion-loading-button-logo {
    width: 32px;
    height: 32px;
}

.alert .dongestion-loading-button-spinner .dongestion-loading-button-logo svg {
    width: 32px;
    height: 32px;
}