/* Movimiento del flujo por pasos del kiosco. */

.assignment-card {
  animation: kioskCardEnter 0.45s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.assignment-field {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.assignment-field.ui-step-enter,
.emp-info.ui-step-enter {
  animation: kioskStepEnter 0.3s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.assignment-field.is-step-active > label {
  color: #1f5fc4 !important;
}

.assignment-field.is-step-active .step-num {
  box-shadow: 0 0 0 5px rgba(47, 115, 223, 0.11);
  animation: kioskStepPulse 0.42s ease;
}

.assignment-field.is-step-active .assignment-input,
.assignment-field.is-step-active .assignment-select {
  border-color: rgba(47, 115, 223, 0.42);
}

.assignment-button.ui-button-ready {
  animation: kioskButtonReady 0.38s ease;
}

.assignment-button.is-kiosk-loading {
  position: relative;
  cursor: wait;
  opacity: 0.82;
  pointer-events: none;
}

.assignment-button.is-kiosk-loading::after {
  content: "";
  width: 15px;
  height: 15px;
  display: inline-block;
  margin-left: 9px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -3px;
  animation: kioskSpin 0.7s linear infinite;
}

#movimientos .ui-kiosk-error {
  animation: kioskErrorEnter 0.32s ease both;
}

#movimientos .activity-started-icon {
  animation: kioskSuccessPop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

@keyframes kioskCardEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes kioskStepEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kioskStepPulse {
  0% { transform: scale(0.9); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes kioskButtonReady {
  50% { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(47, 115, 223, 0.24); }
}

@keyframes kioskSpin {
  to { transform: rotate(360deg); }
}

@keyframes kioskErrorEnter {
  0% { opacity: 0; transform: translateX(0); }
  30% { opacity: 1; transform: translateX(-5px); }
  65% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

@keyframes kioskSuccessPop {
  from { opacity: 0; transform: scale(0.55) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .assignment-card,
  .assignment-field.ui-step-enter,
  .emp-info.ui-step-enter,
  .assignment-field.is-step-active .step-num,
  .assignment-button.ui-button-ready,
  .assignment-button.is-kiosk-loading::after,
  #movimientos .ui-kiosk-error,
  #movimientos .activity-started-icon {
    animation: none !important;
  }

  .assignment-field {
    transition: none;
  }
}