/* Gradiente en body para que cubra toda la pantalla sin huecos. */
body { background: linear-gradient(135deg, #6C3FC5 0%, #4B2A9C 100%) !important; }

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* En Safari de iPhone 100vh no descuenta la barra del navegador y corta el pie. */
  min-height: 100dvh;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #6C3FC5 0%, #4B2A9C 100%);
}

.login-card {
  max-width: 520px;
  width: 100%;
  padding: 1.75rem 2.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari < 18 solo entiende la versión con prefijo */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6C3FC5, #4B2A9C);
}

.login-logo {
  margin-bottom: 0.5rem;
}

.login-logo img {
  max-width: 88px;
  height: auto;
}

.login-heading { margin-bottom: 1.25rem; }
.login-title {
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 0.15rem;
}
.login-subtitle {
  color: #718096;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.form-control, .form-select {
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #f7fafc;
}

/* Form de registro más compacto en vertical (no solo en móvil). */
#formAuthentication .mb-3 { margin-bottom: 0.85rem; }
#formAuthentication .form-label { margin-bottom: 0.3rem; font-size: 0.9rem; }
#formAuthentication .form-text { margin-top: 0.2rem; font-size: 0.8rem; }

.form-control:focus, .form-select:focus {
  border-color: #6C3FC5;
  box-shadow: 0 0 0 3px rgba(108, 63, 197, 0.1);
  background: white;
}

.form-label {
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 0.5rem;
}

.btn-login {
  background: #6D28D9;
  border: none;
  border-radius: 50rem;
  padding: 0.875rem 2rem;
  color: white!important;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.btn-login:hover {
  background: #5b21b6;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(109, 40, 217, 0.35);
}

/* Deshabilitado pero VISIBLE. El `.btn:disabled` del tema pone el fondo en
   transparente (--bs-btn-disabled-bg) y el botón desaparecía sobre la tarjeta
   blanca; mientras falta verificar el correo tiene que verse apagado, no ausente. */
.btn-login:disabled,
.btn-login.disabled {
  /* Color sólido apagado, no opacity del grupo: con opacity el texto blanco
     también se atenuaba y el botón se leía "raro" además de apagado. */
  background: #A78BC9;
  color: white !important;
  opacity: 1;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: auto;
}

/* El ojo de la contraseña es un <button>: quitarle el look de botón del tema. */
.input-group-merge .js-toggle-password { cursor: pointer; }

.btn-link-action {
  border: 2px solid #e2e8f0;
  border-radius: 50rem;
  padding: 0.75rem 0.75rem;
  font-weight: 500;
  font-size: 0.9375rem;
  color: #6C3FC5;
  background: #f7fafc;
  white-space: normal;
  transition: all 0.3s ease;
}

.btn-link-action:hover {
  border-color: #6C3FC5;
  color: #4B2A9C;
  background: #fff;
}

.form-check-input:checked {
  background-color: #6C3FC5;
  border-color: #6C3FC5;
}

.form-check-input:focus {
  border-color: #6C3FC5;
  box-shadow: 0 0 0 0.25rem rgba(108, 63, 197, 0.25);
}

.alert { border-radius: 0.5rem; border: none; font-weight: 500; }
.alert-danger { background: #fed7d7; color: #c53030; }

.input-with-status { position: relative; }
.input-status-icon {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  pointer-events: none;
}

/* Etiquetas flotantes: el campo del registro tiene borde de 2px y padding
   propio, así que se fija la altura y el padding que Bootstrap espera para que la
   etiqueta suba sin tapar el texto. El icono de estado se corre para no chocar
   con la flecha del select ni con el botón del grupo. */
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.4rem + 4px);
  min-height: calc(3.4rem + 4px);
  padding: 1rem 1rem 0.45rem;   /* vacío: la etiqueta ocupa el centro */
  line-height: 1.25;
}
/* Con valor o foco la etiqueta sube: el texto necesita más aire arriba para no
   pisarla (mismo esquema de dos estados que trae Bootstrap). El select flota siempre. */
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-select {
  padding-top: 1.6rem;
  padding-bottom: 0.4rem;
}
.form-floating > label {
  padding: 1rem;
  color: #718096;
  font-weight: 500;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: #6C3FC5;
  transform: scale(0.8) translateY(-0.55rem) translateX(0.2rem);
}
.form-floating > .form-control::placeholder { color: transparent; }
.input-with-status.form-floating .input-status-icon { right: 1rem; }
/* Dentro de un input-group la flotante ocupa el ancho que sobra. */
.input-group > .form-floating { flex: 1 1 auto; width: 1%; }
.input-group > .form-floating > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-floating:not(:first-child) > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.is-available .input-status-icon { color: #2f855a; }
.is-taken .input-status-icon { color: #c53030; }

#admin-fields {
  border-top: 1px solid #e2e8f0;
  padding-top: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 576px) {
  .login-container { padding: 1rem 0.75rem; }
  .login-card { padding: 1.5rem 1.25rem; margin: 0.5rem; }

  /* Logo más chico: el usuario empieza a escribir antes */
  .login-logo { margin-bottom: 1rem; }
  .login-logo img { max-width: 110px; }

  /* Compactar el espaciado vertical del form en móvil */
  #formAuthentication .mb-3 { margin-bottom: 0.85rem; }
  #formAuthentication .mb-4 { margin-bottom: 1rem; }

  .btn-link-action { font-size: 0.875rem; padding: 0.75rem 0.5rem; }
}