/* sg-field — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * Base do campo, byte a byte do <style> de components/forms/input.card.html (bundle 8cd72241,
 * ZIP 48ebf484759c): a casca, o textarea e os estados, até o início dos 10 designs — os designs
 * são o eixo data-field do ds (tokens/component-variants.css), que restiliza estas classes.
 * Mudanças mecânicas e reversíveis: `.shell` → `.sg-field` (colidiria com a casca do app),
 * `.ta` → `.sg-textarea`, `.fx` / `.ic` / `.pre` / `.suf` / `.chev` → `.sg-field__fx` /
 * `__icon` / `__prefix` / `__suffix` / `__chev`, a coluna `.fcol` → `.sg-formfield` e os estados
 * `.is-err` / `.is-dis` → `.is-error` / `.is-disabled`. Tempos finitos viram tokens.
 * Marcação: {% sg_field "cnpj" label="CNPJ" mask="cnpj" %} (templatetags/sg_field.py). */
  /* ═══════════════ CAMPO BASE (shell) ═══════════════ */
  .sg-field{ position:relative; display:flex; align-items:center; gap:8px; width:100%;
    height:var(--control-h); padding:0 12px; background:var(--surface); color:var(--text);
    border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-inset);
    font-family:var(--font-sans); font-size:var(--control-font); line-height:1; overflow:hidden;
    transition:border-color var(--sg-input-t-160) var(--ease-standard), box-shadow var(--sg-input-t-160) var(--ease-standard), background-color var(--sg-input-t-160) var(--ease-standard), transform var(--sg-input-t-200) var(--ease-spring); }
  .sg-field input, .sg-field select{ all:unset; position:relative; z-index:3; flex:1; min-width:0; font:inherit; color:inherit; font-feature-settings:var(--numeric); cursor:text; }
  .sg-field select{ cursor:pointer; }
  .sg-field input::placeholder{ color:var(--text-subtle); }
  .sg-field__prefix, .sg-field__suffix{ position:relative; z-index:3; color:var(--text-subtle); font-variant-numeric:tabular-nums; flex:none; user-select:none; }
  .sg-field__icon{ position:relative; z-index:3; color:var(--text-subtle); display:flex; flex:none; transition:color var(--sg-input-t-160), transform var(--sg-input-t-200) var(--ease-spring); }
  .sg-field__icon svg{ width:16px; height:16px; }
  .sg-field__chev{ position:relative; z-index:3; color:var(--text-subtle); display:flex; flex:none; pointer-events:none; }
  .sg-field__chev svg{ width:16px; height:16px; }
  /* camada de efeito (animações de foco) */
  .sg-field__fx{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; }
  .sg-field:hover{ border-color:var(--gray-400); }

  .sg-textarea{ width:100%; min-height:74px; padding:9px 12px; background:var(--surface); color:var(--text);
    border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-inset);
    font-family:var(--font-sans); font-size:var(--control-font); line-height:var(--leading-normal); resize:vertical; outline:none;
    transition:border-color var(--sg-input-t-160), box-shadow var(--sg-input-t-160); }
  .sg-textarea:focus{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }

  /* estados */
  .sg-formfield.is-error .sg-field{ border-color:var(--negative); }
  .sg-formfield.is-error .sg-field__prefix, .sg-formfield.is-error .sg-field__icon{ color:var(--negative); }
  .sg-formfield.is-disabled{ opacity:1; }
  .sg-formfield.is-disabled .sg-field{ background:var(--surface-sunken); color:var(--text-disabled); box-shadow:none; cursor:not-allowed; }
  .sg-formfield.is-disabled .sg-field input{ cursor:not-allowed; color:var(--text-disabled); }