.contenedorcookie2 { width: 300px;position:absolute;left:37.5%;top:53%; }

.fondocookie2{
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  text-align: center;
  padding: 30px;
  background:#E9E9E9;
  -webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;filter:alpha(opacity=20); opacity:.2;
  width: 100%;height: 100%;position: absolute;top: 0;left: 0;
}
.infocookie2 {
    width: 100%;height: 100%;position: absolute;top: 5;left:10%;z-index: 10;
}

.otp-wrapper h3 {
  margin-bottom: 20px;
  color: #333;
  
}

.otp-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 25px;
}

.otp-input {
  width: 50px;
  height: 50px;
  font-size: 24px;
  text-align: center;
  border: 2px solid #bdc3c7;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease-in-out;
  color: #2c3e50;
}

.otp-input:focus {
  border-color: #E2D611;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
}

/* Ocultar flechas nativas de tipo número si cambias el input a type="number" */
.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

button:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}
.otp-input.error {
  border-color: #e74c3c !important;
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.4) !important;
  animation: shake 0.2s ease-in-out 2;
}



/* Estilo del mensaje de error */
#error-message {
  color: #e74c3c;
  font-size: 14px;
  font-weight: 500;
  margin-top: -10px;
  margin-bottom: 20px;
  display: none; /* Oculto inicialmente */
}


/*----------------------------*/

/* Nuevo contenedor para alinear los botones horizontalmente */
.actions-container {
  display: flex;
  justify-content: space-between; /* Separa los botones a los extremos */
  align-items: center;           /* Los centra verticalmente */
  gap: 20px;                     /* Espacio mínimo entre ellos */
  margin-top: 10px;
}

/* Ajuste del botón principal para que no use todo el espacio */
#btn-verify {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap; /* Evita que el texto del botón se rompa en dos líneas */
}

#btn-verify:disabled {
  background-color: #323232;
  cursor: not-allowed;
}

/* Contenedor del temporizador/reenvío alineado */
.resend-container {
  font-size: 14px;
  color: #000000;
  white-space: nowrap; 
}

#timer-text strong {
  color: #FFFFFF;
}

/* Botón secundario para reenviar */
#btn-resend {
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

#btn-resend:hover {
  color: #FFFFFF;
}

/* Estilo del mensaje de error */
#error-message {
  color: #e74c3c;
  font-size: 14px;
  font-weight: 500;
  margin-top: -10px;
  margin-bottom: 15px;
  text-align: left;
  display: none;
}

/* Efecto visual de error */
.otp-input.error {
  border-color: #e74c3c !important;
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.4) !important;
  animation: shake 0.2s ease-in-out 2;
}
/* Animación de vibración */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}