/* ==========================================================================
   apps/portal/static/portal/css/campos_formulario.css
   ==========================================================================
   Perguntas do formulário da ouvidoria no portal público (19/10/2026). Usa
   os tokens --vx-* de portal/public/form.html, que já resolvem tema e a cor
   do cliente. Alvo de toque de 44 px (WCAG 2.5.5) em toda opção.
   ========================================================================== */

.vx-fb-grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vx-fb-grupo > legend { padding: 0; margin-bottom: 2px; }

/* Opções (escolha única em botões e múltipla escolha) */
.vx-fb-opcoes { display: flex; flex-direction: column; gap: 6px; }
.vx-fb-opcoes--rolagem { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.vx-fb-opcao { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--vx-brd2); border-radius: var(--vx-rsm); background: var(--vx-sur); cursor: pointer; font-size: 15.5px; color: var(--vx-txt); transition: border-color .15s ease, background-color .15s ease; }
.vx-fb-opcao[hidden] { display: none; }
.vx-fb-opcao input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--vx-ac); }
.vx-fb-opcao:hover { border-color: var(--vx-ac); }
.vx-fb-opcao:has(input:checked) { border-color: var(--vx-ac); background: var(--vxp-ac-tint, var(--vx-ac-g)); box-shadow: inset 0 0 0 1px var(--vx-ac); }
.vx-fb-opcao:has(input:focus-visible) { outline: 2px solid var(--vx-ac); outline-offset: 2px; }

/* Sim ou não */
.vx-fb-pilulas { display: flex; gap: 10px; flex-wrap: wrap; }
.vx-fb-pilula { position: relative; cursor: pointer; }
.vx-fb-pilula input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vx-fb-pilula span { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 48px; padding: 8px 22px; border: 1px solid var(--vx-brd2); border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--vx-txt2); background: var(--vx-sur); }
.vx-fb-pilula input:checked + span { border-color: var(--vx-ac); color: var(--vx-txt); background: var(--vxp-ac-tint, var(--vx-ac-g)); box-shadow: inset 0 0 0 1px var(--vx-ac); }
.vx-fb-pilula input:focus-visible + span { outline: 2px solid var(--vx-ac); outline-offset: 2px; }

/* Escala */
.vx-fb-escala { display: flex; gap: 8px; flex-wrap: wrap; }
.vx-fb-ponto { position: relative; cursor: pointer; }
.vx-fb-ponto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vx-fb-ponto span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--vx-brd2); font-weight: 600; font-size: 15.5px; color: var(--vx-txt2); background: var(--vx-sur); }
.vx-fb-ponto input:checked + span { background: var(--vx-ac); border-color: var(--vx-ac); color: #fff; }
.vx-fb-ponto input:focus-visible + span { outline: 2px solid var(--vx-ac); outline-offset: 2px; }
.vx-fb-pontas { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--vx-txt3); max-width: 440px; }

/* Número, moeda, campos curtos */
.vx-fb-curto { max-width: 240px; }
.vx-fb-afixo { position: relative; display: flex; align-items: center; max-width: 320px; }
.vx-fb-sufixo { position: absolute; right: 16px; font-size: 15px; font-weight: 600; color: var(--vx-txt3); pointer-events: none; }
.vx-fb-afixo .vx-in { padding-right: 64px; }
.vx-fb-afixo--antes .vx-in { padding-left: 46px; padding-right: 16px; }
.vx-fb-prefixo { position: absolute; left: 16px; font-size: 15px; font-weight: 600; color: var(--vx-txt3); pointer-events: none; }

/* Endereço */
.vx-fb-endereco { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; }
.vx-fb-endereco .vx-fb-largo { grid-column: span 1; }
@media (max-width: 520px) { .vx-fb-endereco { grid-template-columns: minmax(0, 1fr); } }

/* Lista longa com busca */
.vx-fb-lista { height: auto; min-height: 0; padding: 6px; background-image: none; }
.vx-fb-lista option { padding: 8px 10px; border-radius: 8px; }
.vx-fb-outro[hidden] { display: none; }

/* Erro da pergunta */
.vx-fb-erro { margin: 0; font-size: 14px; font-weight: 600; color: var(--vxp-danger); }
.vx-fb-erro[hidden] { display: none; }
.vx-fb.err .vx-fb-opcao, .vx-fb.err .vx-fb-pilula span, .vx-fb.err .vx-fb-ponto span { border-color: var(--vxp-danger); }

@media (prefers-reduced-motion: reduce) {
  .vx-fb-opcao { transition: none; }
}