/**
 * Campos de formulário — Modo Cliente (FRONT-002)
 * Texto, CPF, busca, seleção, data, número, textarea, checkbox, switch,
 * radio — sem lógica real de CPF nesta sprint (só o padrão visual).
 */

.cliente-campo {
  margin-bottom: var(--cliente-space-4);
}

.cliente-campo__label {
  display: block;
  font-size: 12.5px;
  font-weight: var(--cliente-fw-bold);
  margin-bottom: 6px;
}

.cliente--escuro .cliente-campo__label { color: rgba(255, 255, 255, .85); }
.cliente--claro .cliente-campo__label { color: var(--cliente-texto-escuro-principal); }

.cliente-campo__input,
.cliente-campo__select,
.cliente-campo__textarea {
  width: 100%;
  padding: 14px var(--cliente-space-4);
  border-radius: var(--cliente-raio-campo);
  font-size: 15px;
  font-family: var(--cliente-fonte);
  min-height: var(--cliente-altura-toque-minima);
}

.cliente--claro .cliente-campo__input,
.cliente--claro .cliente-campo__select,
.cliente--claro .cliente-campo__textarea {
  border: 1.5px solid var(--cliente-borda-clara);
  background: #fff;
  color: var(--cliente-texto-escuro-principal);
  caret-color: var(--cliente-texto-escuro-principal);
}

.cliente--escuro .cliente-campo__input,
.cliente--escuro .cliente-campo__select,
.cliente--escuro .cliente-campo__textarea {
  border: 1.5px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  caret-color: #fff;
}

/* RC-003-R1 — auditoria relatou texto digitado "branco ou quase
   invisível" no Login/Primeiro Acesso. Não reproduzido no texto normal
   (cor computada confirmada correta, `#0F172A`), mas dois riscos reais e
   até então sem NENHUMA regra própria em todo o projeto foram
   encontrados e corrigidos preventivamente:
   1) Autofill do Chrome/Edge substitui o `background` do campo por um
      tom próprio (geralmente amarelo claro) e pode manter herdado um
      `-webkit-text-fill-color` de algum estado anterior — sem regra
      própria, o texto autocompletado pode ficar ilegível mesmo com
      `color` correto (a propriedade que realmente pinta o texto
      autofill é `-webkit-text-fill-color`, não `color`). O truque
      `box-shadow: inset 0 0 0 1000px <fundo>` força o fundo do próprio
      tema (nunca o amarelo do navegador) de forma mais confiável do que
      `background` sozinho (que o Chrome ignora em campos autofill em
      várias versões).
   2) Nenhuma página deste projeto declarava `color-scheme` (ver
      base.css) — sem essa declaração, o modo escuro forçado do
      navegador (Chrome "Adaptar sites ao tema do dispositivo") pode
      repintar campos de formulário nativos com um esquema de cores que
      o autor nunca escolheu, mesmo numa página clara. */
.cliente--claro .cliente-campo__input:-webkit-autofill,
.cliente--claro .cliente-campo__select:-webkit-autofill,
.cliente--claro .cliente-campo__input:-webkit-autofill:hover,
.cliente--claro .cliente-campo__input:-webkit-autofill:focus,
.cliente--claro .cliente-campo__input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--cliente-texto-escuro-principal);
  box-shadow: inset 0 0 0 1000px #fff;
  caret-color: var(--cliente-texto-escuro-principal);
}

.cliente--escuro .cliente-campo__input:-webkit-autofill,
.cliente--escuro .cliente-campo__select:-webkit-autofill,
.cliente--escuro .cliente-campo__input:-webkit-autofill:hover,
.cliente--escuro .cliente-campo__input:-webkit-autofill:focus,
.cliente--escuro .cliente-campo__input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, .06);
  caret-color: #fff;
}

/* RC-002-R1 — achado real: `<option>` não herda de forma confiável o
 * `background`/`color` do `<select>` pai em vários navegadores (a lista
 * nativa do sistema operacional costuma ignorar um fundo translúcido
 * como `rgba(255,255,255,.06)` acima, mas herda a cor do TEXTO — o
 * resultado é texto branco sobre a lista nativa clara do sistema,
 * ilegível. Precisa de cor opaca própria, nunca a mesma variável
 * translúcida usada no campo fechado.) Afeta qualquer módulo com
 * `<select>` em tema escuro — corrigido aqui uma vez, nunca por tela. */
.cliente--escuro .cliente-campo__input option,
.cliente--escuro .cliente-campo__select option {
  background-color: var(--cliente-fundo-escuro-secundario);
  color: #fff;
}

.cliente--claro .cliente-campo__input option,
.cliente--claro .cliente-campo__select option {
  background-color: var(--cliente-superficie-clara);
  color: var(--cliente-texto-escuro-principal);
}

.cliente-campo__textarea {
  resize: vertical;
  min-height: 90px;
}

.cliente-campo__ajuda {
  font-size: 11.5px;
  color: var(--cliente-texto-escuro-secundario);
  margin-top: 5px;
}

.cliente--escuro .cliente-campo__ajuda { color: var(--cliente-texto-claro-secundario); }

.cliente-campo--erro .cliente-campo__input,
.cliente-campo--erro .cliente-campo__select {
  border-color: var(--cliente-erro) !important;
}

.cliente-campo__erro {
  font-size: 11.5px;
  color: var(--cliente-erro);
  margin-top: 5px;
  display: flex;
  gap: 5px;
  align-items: center;
  font-weight: var(--cliente-fw-semibold);
}

.cliente-campo__erro svg { width: 14px; height: 14px; flex-shrink: 0; }

.cliente-campo--sucesso .cliente-campo__input { border-color: var(--cliente-sucesso) !important; }

.cliente-campo__input:disabled,
.cliente-campo__select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.cliente-campo__input[readonly] {
  background: rgba(148, 163, 184, .12);
}

.cliente-campo--busca {
  display: flex;
  align-items: center;
  gap: var(--cliente-space-2);
  border-radius: 999px;
  padding: 10px var(--cliente-space-4);
  font-size: 12.5px;
}

.cliente--escuro .cliente-campo--busca { background: var(--cliente-superficie-escura); border: 1px solid var(--cliente-borda-escura); color: var(--cliente-texto-claro-secundario); }
.cliente--claro .cliente-campo--busca { background: #fff; border: 1px solid var(--cliente-borda-clara); color: var(--cliente-texto-escuro-secundario); }

.cliente-campo--busca input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 12.5px;
  color: inherit;
  outline: none;
}

.cliente-campo--busca svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- Checkbox / Radio / Switch ---------- */
.cliente-checkbox,
.cliente-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--cliente-space-2);
  font-size: 13px;
  min-height: var(--cliente-altura-toque-minima);
}

.cliente-checkbox input,
.cliente-radio input {
  width: 20px;
  height: 20px;
  accent-color: var(--cliente-verde);
}

.cliente-switch-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--cliente-divisoria-clara);
  min-height: var(--cliente-altura-toque-minima);
}

.cliente--escuro .cliente-switch-linha { border-bottom-color: var(--cliente-divisoria-escura); }

.cliente-switch {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  position: relative;
  background: var(--cliente-verde);
  border: none;
  flex-shrink: 0;
}

.cliente-switch[aria-checked="false"] {
  background: rgba(148, 163, 184, .4);
}

.cliente-switch__bola {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  position: absolute;
  top: 3px;
  right: 3px;
  transition: transform var(--cliente-transicao-padrao);
}

.cliente-switch[aria-checked="false"] .cliente-switch__bola {
  transform: translateX(-18px);
}

/* ---------- Estrelas (versão editável dentro de formulário) ---------- */
.cliente-campo .cliente-nivel__estrela {
  border: none;
  background: transparent;
  min-width: var(--cliente-altura-toque-minima);
  min-height: var(--cliente-altura-toque-minima);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}