/* Lo propio de crear cuenta. El marco (panel violeta, campos, botón, social y
   pie) vive en css/auth-shell.css, compartido con las otras pantallas de cuenta. */

.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;
}

.is-available .input-status-icon { color: #15803D; }
.is-taken .input-status-icon { color: #B91C1C; }

/* Etiquetas flotantes: el campo trae 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: #6B7280;
  font-weight: 500;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: #6D28D9;
  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; }

/* Datos de la academia: aparecen solo si el rol es administrador. */
#admin-fields {
  border-top: 1px solid #E5E7EB;
  padding-top: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 991.98px) {
  /* Compactar el espaciado vertical del form en móvil */
  #formAuthentication .mb-3 { margin-bottom: 0.85rem; }
  #formAuthentication .mb-4 { margin-bottom: 1rem; }
}