/* 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;
  }
}