/* ============================================================
   FORM.CSS
   ============================================================ */

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.form__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.form__input,
.form__select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--glass-bg);
  border: var(--border-width) solid var(--glass-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-fast) var(--ease-smooth),
              background-color var(--duration-fast) var(--ease-smooth);
  appearance: none;
  -webkit-appearance: none;
}

.form__input::placeholder {
  color: var(--color-text-tertiary);
}

/* select: fondo oscuro para que el dropdown no quede blanco */
.form__select option {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.form__input:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--glass-bg-hover);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--spacing-sm);
}