/* Forms — Field, Input, Select, Checkbox, Radio, Switch. */

/* ── Field ────────────────────────────────────────────────────────────── */
.vz-field{display:flex;flex-direction:column;gap:var(--space-2)}
.vz-field__label{
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-secondary);
}
.vz-field__required{color:var(--vz-coral)}
.vz-field__msg{font-family:var(--font-body);font-size:var(--text-caption);color:var(--text-muted)}
.vz-field__msg--error{color:var(--status-danger)}

/* ── Input / Textarea / Select (mesma pele) ───────────────────────────── */
.vz-input,.vz-select{
  width:100%;box-sizing:border-box;margin:0;
  padding:var(--vz-pad-input);border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:var(--text-body);line-height:var(--vz-leading-input);
  background:var(--surface-glass);color:var(--text-primary);
  border:var(--border-hair) solid var(--border-subtle);outline:none;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.vz-input::placeholder{color:var(--text-muted)}
.vz-input:is(:focus,:focus-visible,.is-focus),.vz-select:is(:focus,:focus-visible,.is-focus){border-color:var(--border-focus);box-shadow:var(--glow-teal-sm)}
.vz-input.is-invalid,.vz-select.is-invalid,.vz-field.is-invalid .vz-input,.vz-field.is-invalid .vz-select{border-color:var(--status-danger);box-shadow:none}
.vz-input:disabled,.vz-select:disabled{background:transparent;opacity:var(--vz-opacity-disabled-soft);cursor:not-allowed}
.vz-input[readonly]{background:transparent;border-style:dashed}
.vz-input--multiline{resize:vertical}
.vz-input--icon{padding-left:var(--vz-indent-input-icon)}

.vz-input-wrap,.vz-select-wrap{position:relative;display:block}
.vz-input-wrap__icon,.vz-select-wrap__chevron{position:absolute;top:var(--vz-offset-input-icon);color:var(--text-muted);pointer-events:none}
.vz-input-wrap__icon{left:var(--vz-offset-input-icon)}
.vz-select-wrap__chevron{right:var(--vz-offset-input-icon)}
.vz-select{appearance:none;-webkit-appearance:none;padding-right:var(--vz-indent-input-icon);cursor:pointer}
.vz-select option{background:var(--surface-raised);color:var(--text-primary)}
.vz-select.is-empty{color:var(--text-muted)}

/* ── Escolhas: Checkbox / Radio / Switch ──────────────────────────────── */
.vz-choice{position:relative;display:flex;gap:var(--space-3);align-items:center;cursor:pointer}
.vz-choice.has-description{align-items:flex-start}
.vz-choice.is-disabled{cursor:not-allowed;opacity:var(--vz-opacity-disabled-soft)}
.vz-choice__input{position:absolute;opacity:0;width:0;height:0;margin:0}
.vz-choice__text{display:flex;flex-direction:column;gap:var(--vz-gap-2xs)}
.vz-choice__label{font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--text-primary)}
.vz-choice__desc{font-family:var(--font-body);font-size:var(--text-caption);color:var(--text-muted)}

.vz-choice__box{
  flex:0 0 auto;width:var(--vz-size-control);height:var(--vz-size-control);
  display:grid;place-items:center;background:var(--surface-glass);
  border:var(--border-hair) solid var(--border-strong);
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.vz-choice.has-description .vz-choice__box,.vz-choice.has-description .vz-choice__track{margin-top:var(--vz-gap-2xs)}
.vz-choice--checkbox .vz-choice__box{border-radius:var(--radius-xs)}
.vz-choice--radio .vz-choice__box{border-radius:var(--radius-pill)}
.vz-choice__check{color:var(--vz-offwhite);opacity:0}
.vz-choice__dot{width:var(--vz-size-sm);height:var(--vz-size-sm);border-radius:var(--radius-pill);background:var(--vz-teal);opacity:0}

.vz-choice:is(:hover,.is-hover):not(.is-disabled) .vz-choice__box{border-color:var(--interactive-hover)}
.vz-choice__input:checked + .vz-choice__box{border-color:var(--vz-teal)}
.vz-choice--checkbox .vz-choice__input:checked + .vz-choice__box{background:var(--vz-teal)}
.vz-choice__input:checked + .vz-choice__box .vz-choice__check,
.vz-choice__input:checked + .vz-choice__box .vz-choice__dot{opacity:1}
.vz-choice__input:focus-visible + :is(.vz-choice__box,.vz-choice__track),
.vz-choice.is-focus :is(.vz-choice__box,.vz-choice__track){outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}
.vz-choice.is-invalid .vz-choice__box{border-color:var(--status-danger)}

/* Switch — pílula 44×26 */
.vz-choice__track{
  flex:0 0 auto;display:flex;align-items:center;justify-content:flex-start;
  width:var(--vz-size-switch-w);height:var(--vz-size-switch-h);padding:var(--vz-size-switch-pad);box-sizing:border-box;
  border-radius:var(--radius-pill);border:var(--border-hair) solid var(--border-strong);background:var(--surface-glass);
  transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.vz-choice__thumb{
  width:var(--vz-size-thumb);height:var(--vz-size-thumb);border-radius:var(--radius-pill);background:var(--text-muted);
  transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.vz-choice:is(:hover,.is-hover):not(.is-disabled) .vz-choice__track{border-color:var(--interactive-hover)}
.vz-choice__input:checked + .vz-choice__track{background:var(--vz-teal);border-color:var(--vz-teal)}
.vz-choice__input:checked + .vz-choice__track .vz-choice__thumb{
  background:var(--vz-offwhite);
  transform:translateX(calc(var(--vz-size-switch-w) - var(--vz-size-thumb) - 2 * var(--vz-size-switch-pad) - 2 * var(--border-hair)));
}