/* Campos de formulario compartidos. */

@layer components {
  .field {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-field);
    background: var(--color-field);
    color: var(--color-text);
  }

  .field:focus {
    border-color: var(--color-accent);
  }

  .field:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .field--textarea {
    min-height: 120px;
    resize: vertical;
  }

  /*
    Feedback en vivo mientras se escribe (independiente del error de envío de
    abajo, que debe seguir ganando si el formulario ya fue enviado con error).
  */
  .field[data-match="ok"] {
    border-color: var(--color-success);
  }

  .field[data-match="mismatch"] {
    border-color: var(--color-error);
  }

  /*
    Va después de :focus/:focus-visible a propósito: un campo inválido debe
    seguir marcado en rojo incluso mientras tiene foco.
  */
  .field[aria-invalid="true"] {
    border-color: var(--color-error);
  }
}