/* ==========================================================================
   PRISMA · field.css — campos de formulário
   --------------------------------------------------------------------------
   REGRAS DO SISTEMA, e nenhuma é negociável:

   · Todo campo tem <label> visível. Placeholder NÃO é rótulo: some quando a
     pessoa começa a digitar, que é justamente quando ela precisa conferir.
   · Erro se diz em texto, não só em vermelho. Cor sozinha exclui quem não
     distingue vermelho de cinza.
   · O erro fica ligado ao campo por aria-describedby, senão o leitor de tela
     anuncia o campo e não o motivo.
   · Campo desabilitado continua legível. "Apagado" não é sinônimo de ilegível.
   ========================================================================== */

.campo { display: flex; flex-direction: column; gap: var(--espaco-2); }

.campo-rotulo {
  font-size: var(--label-size);
  font-weight: 550;
  color: var(--text-secondary);
}
.campo-rotulo .obrigatorio {
  color: var(--danger);
  margin-inline-start: 2px;
}

.campo-dica  { font-size: var(--caption-size); color: var(--text-muted); }

.campo-erro {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  font-size: var(--caption-size);
  color: var(--danger);
}
.campo-erro svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.campo-sucesso {
  display: flex; align-items: center; gap: var(--espaco-2);
  font-size: var(--caption-size); color: var(--success);
}

/* --------------------------------------------------------------------------
   O controle
   -------------------------------------------------------------------------- */
.entrada {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--body-size);
  line-height: 1.5;
  transition: border-color var(--motion-fast) var(--easing-standard),
              background-color var(--motion-fast) var(--easing-standard),
              box-shadow var(--motion-fast) var(--easing-standard);
}

/* 16px no celular não é escolha estética: abaixo disso o iOS dá zoom
   automático ao focar o campo e desloca a tela inteira. */
@media (max-width: 640px) { .entrada { font-size: 16px; } }

.entrada::placeholder { color: var(--text-muted); }

.entrada:hover:not(:disabled):not(:focus) { border-color: var(--border-strong); }

.entrada:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--surface-1);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.entrada:disabled {
  background: var(--surface-1);
  color: var(--text-disabled);
  border-color: var(--border-subtle);
  cursor: not-allowed;
}

.entrada[readonly] { background: var(--surface-1); color: var(--text-secondary); }

/* Estados de validação. A borda muda E o texto de erro aparece; nunca só a borda. */
.entrada[aria-invalid="true"] {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger-surface) 55%, var(--surface-2));
}
.entrada[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}
.entrada[data-estado="sucesso"] { border-color: var(--success); }

textarea.entrada { min-height: 108px; resize: vertical; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Afixos — prefixo, sufixo, ícone, botão dentro do campo
   -------------------------------------------------------------------------- */
.campo-caixa {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding-inline: var(--espaco-4);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  min-height: var(--alvo-toque);
  transition: border-color var(--motion-fast) var(--easing-standard),
              box-shadow var(--motion-fast) var(--easing-standard);
}
.campo-caixa:focus-within {
  border-color: var(--border-focus);
  background: var(--surface-1);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
/* O input interno perde a própria moldura: quem desenha é a caixa. */
.campo-caixa .entrada {
  border: 0; background: transparent; box-shadow: none;
  padding-inline: 0; min-height: auto;
  /* min-width:0 é o que impede o input de empurrar afixo e atalho para fora
     da caixa quando o espaço aperta — flex:1 sozinho não segura. */
  flex: 1 1 0; min-width: 0;
}
.campo-caixa .entrada:focus { box-shadow: none; background: transparent; }
.campo-afixo { color: var(--text-muted); font-size: var(--body-sm-size); flex: none; }
.campo-caixa svg { width: var(--icone-md); height: var(--icone-md);
                   stroke-width: var(--icone-traco); color: var(--text-muted); flex: none; }

/* Busca: pílula, porque busca é controle e não campo de formulário. */
.campo-busca { border-radius: var(--radius-full); padding-inline: var(--espaco-5); }

/* --------------------------------------------------------------------------
   Select — a seta é desenhada por nós para não herdar a do sistema
   -------------------------------------------------------------------------- */
select.entrada {
  appearance: none;
  padding-inline-end: var(--espaco-9);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237A8699' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--espaco-4) center;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Checkbox e Radio
   O input real continua existindo (só fica invisível), então teclado,
   formulário e leitor de tela funcionam sem JavaScript nenhum.
   -------------------------------------------------------------------------- */
.escolha {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  cursor: pointer;
  min-height: var(--alvo-toque);
  padding-block: var(--espaco-2);
}
.escolha input { position: absolute; opacity: 0; width: 0; height: 0; }

.escolha-marca {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  transition: background-color var(--motion-fast) var(--easing-standard),
              border-color var(--motion-fast) var(--easing-standard);
}
.escolha--radio .escolha-marca { border-radius: 50%; }

.escolha input:checked + .escolha-marca {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
.escolha input:checked + .escolha-marca::after {
  content: "";
  width: 10px; height: 6px;
  border: 2px solid var(--text-on-accent);
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.escolha--radio input:checked + .escolha-marca::after {
  width: 8px; height: 8px; border: 0; border-radius: 50%;
  background: var(--text-on-accent); transform: none;
}
.escolha input:focus-visible + .escolha-marca {
  outline: 2px solid var(--border-focus); outline-offset: 2px;
}
.escolha input:disabled + .escolha-marca { background: var(--surface-1); border-color: var(--border-subtle); }
.escolha input:disabled ~ .escolha-texto { color: var(--text-disabled); }
.escolha-texto { font-size: var(--body-size); color: var(--text-primary); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Switch — para ligar/desligar algo que vale na hora.
   Se a mudança só vale depois de "Salvar", é checkbox, não switch.
   -------------------------------------------------------------------------- */
.switch { display: inline-flex; align-items: center; gap: var(--espaco-3); cursor: pointer;
          min-height: var(--alvo-toque); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-trilho {
  width: 44px; height: 26px; flex: none;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  padding: 2px;
  transition: background-color var(--motion-default) var(--easing-standard);
}
.switch-botao {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform var(--motion-default) var(--easing-enter),
              background-color var(--motion-default) var(--easing-standard);
}
.switch input:checked + .switch-trilho { background: var(--accent-primary); border-color: var(--accent-primary); }
.switch input:checked + .switch-trilho .switch-botao {
  transform: translateX(18px); background: var(--text-on-accent);
}
.switch input:focus-visible + .switch-trilho { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Slider
   -------------------------------------------------------------------------- */
.slider { width: 100%; appearance: none; background: transparent; height: var(--alvo-toque); }
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--radius-full); background: var(--surface-3);
}
.slider::-webkit-slider-thumb {
  appearance: none; width: 20px; height: 20px; margin-top: -7px;
  border-radius: 50%; background: var(--accent-primary);
  border: 2px solid var(--background-canvas); box-shadow: var(--elev-raised);
}
.slider::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--surface-3); }
.slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent-primary);
  border: 2px solid var(--background-canvas);
}
.slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--glow-focus); }

/* --------------------------------------------------------------------------
   Código de verificação — dígito a dígito
   -------------------------------------------------------------------------- */
.codigo { display: flex; gap: var(--espaco-2); }
.codigo .entrada {
  width: 48px; height: 56px; text-align: center;
  font-family: var(--fonte-mono); font-size: 1.25rem;
  padding: 0; border-radius: var(--radius-sm);
}