/* forms.css — Formularios: afilados, etiquetas en mayúsculas, foco rojo.
   Los formularios NUNCA se inclinan: legibilidad y usabilidad primero. */

.form {
  display: grid;
  gap: var(--space-4);
}

/* FIX: en un grid los hijos se estiran por defecto; un botón inclinado a todo
   el ancho se ve roto/desalineado. Los botones abrazan su contenido salvo
   que se pida ancho completo explícito con .btn-block. */
.form .btn {
  justify-self: start;
}
.form .btn-block {
  justify-self: stretch;
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
}
.field .req {
  color: var(--brand);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.7em 0.9em;
  background: var(--surface-2);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition),
    background-color var(--transition);
}
.field textarea {
  resize: vertical;
  min-height: 3.2em;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 3px 3px 0 var(--brand-soft);
}

.field-invalid input,
.field-invalid textarea {
  border-color: var(--brand-strong);
}

.field-hint {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}
.field-error {
  color: var(--brand-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* Aviso a nivel de formulario (ej. credenciales incorrectas). */
.form-error {
  padding: var(--space-3) var(--space-4);
  background: var(--brand);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  transform: skewX(calc(var(--skew) / 2));
  box-shadow: var(--shadow-ink-sm);
  margin-bottom: var(--space-4);
}