/* Modal aditional css */
.cod_scroll_hidden {
  overflow: hidden;
}
.is-invalid {
  border-color: #dc3545 !important;
  border-width: 1px !important;
  background-color: #f8d7da !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  animation: codErrorPulse 0.5s ease-in-out;
}

.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Estilos específicos para checkbox con error */
input[type='checkbox'].is-invalid {
  border: 2px solid #dc3545 !important;
  background-color: #f8d7da !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  animation: codErrorPulse 0.5s ease-in-out;
}

/* Estilos para el label de términos cuando hay error */
label.is-invalid {
  border: 2px solid #dc3545 !important;
  background-color: #f8d7da !important;
  border-radius: 5px !important;
  padding: 8px 12px !important;
  display: inline-block !important;
  animation: codErrorPulse 0.5s ease-in-out;
}

.invalid-feedback {
  display: none;
  color: #dc3545;
  font-size: 0.875em;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* Animación para campos con error */
@keyframes codErrorPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* Apply animations to button classes */
.shake {
  animation: codshake 3s infinite !important; /* Repetir cada 4 segundos y ser infinita */
}

.bounce {
  animation: codbounce 3s infinite !important; /* Repetir cada 4 segundos y ser infinita */
}

.pulse {
  animation: codpulse 3s infinite !important; /* Repetir cada 4 segundos y ser infinita */
}

/* Define button animations */
@keyframes codshake {
  0% {
    transform: rotate(0);
  }
  2% {
    transform: translateY(-2px) rotate(-2deg);
    transform-origin: center;
  }
  4% {
    transform: translateY(2px) rotate(2deg);
    transform-origin: center;
  }
  6% {
    transform: translateY(-2px) rotate(-2deg);
    transform-origin: center;
  }
  8% {
    transform: translateY(2px) rotate(2deg);
    transform-origin: center;
  }
  10% {
    transform: translateY(-2px) rotate(-2deg);
    transform-origin: center;
  }
  12% {
    transform: rotate(0);
    transform-origin: center;
  }
}

@keyframes codbounce {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(-8px);
  }
  10% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-8px);
  }
  20% {
    transform: translateY(0);
  }
}

@keyframes codpulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  20% {
    transform: scale(1);
  }
}