.login-container {
  background: linear-gradient(135deg, #d8d9da 0%, #a5a6a7 100%);
}

.color-tile {
  color: var(--primary-color) !important;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--light-color);
  width: 100%; 
  max-width: 460px;
  margin: 0 auto;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
hr {
  background-color: #000000;
}
.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.1);
}

#togglePassword:hover i {
  color: var(--primary-color);
}

.form-placeholder, .form-placeholder::placeholder  {
  color:#a5a6a7;
  font-size: 0.9em;
}
/* Colores de iconos por proveedor */
.btn[data-provider="google"] {
    background-color: #DB4437;
    color:#FFF;
}

.btn[data-provider="facebook"] {
    background-color: #1877F2;
    color:#FFF;
}

.btn[data-provider="microsoft"] {
    background-color: #F25022;
    color:#Fff;
}

/* Modo oscuro */
body.dark-mode .login-container {
  background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
}

body.dark-mode .card {
  background-color: #1e1e1e;
  color: #f0f0f0;
}

body.dark-mode .form-control {
  background-color: #2c2c2c;
  border-color: #444;
  color: #f0f0f0;
}

body.dark-mode label,
body.dark-mode .text-muted,
body.dark-mode .small {
  color: #aaa;
}

/* REGISTRO*/
/* Estilo para el input de fecha */
#birthdate {
  text-align: center;
  font-family: monospace;
}

/* Botón de refresh captcha */
#captchaImage {
  flex: 1;
  max-width: 150px;
}

/* Deshabilitar botón si no es válido */
#registerBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}