/* Responsabilidad: campos, labels, ayudas, errores y controles del portal interno. */

.ui-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.ui-field--full {
  grid-column: 1 / -1;
}

.ui-field > :where(label, span):first-child,
.ui-field__label {
  color: var(--fg-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ui-field > :where(label, span):first-child small,
.ui-field__label small {
  color: var(--fg-soft);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.ui-field > :where(input, select, textarea) {
  width: 100%;
  min-height: var(--control-h-lg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background-color: #fff;
  color: var(--fg);
  font: inherit;
  padding: 11px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ui-field > textarea {
  min-height: 100px;
  resize: vertical;
}

.ui-field > :where(input, select, textarea):focus {
  border-color: var(--wm-azul-oscuro);
  box-shadow: 0 0 0 4px rgba(45, 51, 78, 0.07);
  outline: none;
}

.ui-field > :where(input, select, textarea):disabled {
  background-color: var(--line-soft);
  color: var(--fg-soft);
  cursor: not-allowed;
}

.ui-field > :where(input, select, textarea)[aria-invalid='true'] {
  border-color: var(--alert-fg);
  box-shadow: 0 0 0 4px rgba(204, 45, 59, 0.07);
}

.ui-field__feedback,
.ui-field__help {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.ui-field__feedback {
  color: var(--alert-fg);
}

.ui-field__help {
  color: var(--fg-soft);
}

@media (max-width: 760px) {
  .ui-field--full {
    grid-column: auto;
  }
}