/* ==========================================================================
   Bussolas - estilos do questionario
   Depende de tokens.css e styles.css.
   Uma pergunta por tela, centralizada, com largura de leitura confortavel.
   ========================================================================== */

/* --- 1. estrutura da tela ------------------------------------------------ */

.form-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.form-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-3) var(--space-8);
}

.form-card {
  width: 100%;
  max-width: 680px;
}

/* --- 2. progresso -------------------------------------------------------- */

.progresso {
  height: 2px;
  background: var(--border);
  overflow: hidden;
}

.progresso__barra {
  height: 100%;
  width: 0;
  background: var(--ouro-500);
  transition: width var(--transition);
}

/* --- 3. enunciado -------------------------------------------------------- */

.pergunta__fase {
  display: block;
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ouro-600);
  margin-bottom: var(--space-2);
}

/* Identificadores de tela e de alternativa.
   Auxilio de validacao desta etapa: permitem apontar um trecho pelo codigo
   estavel (P02, I9, C04) em vez de descrever a tela. Saem na virada para
   producao — o respondente nao tem uso para eles. */
.pergunta__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  color: var(--ouro-400);
  text-transform: none;
}

.opcao__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-right: 2px;
}

.opcao[aria-checked="true"] .opcao__id,
.opcao[data-marcada="true"] .opcao__id {
  color: var(--ouro-600);
}

.pergunta__titulo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.2vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.pergunta__apoio {
  color: var(--text-secondary);
  font-size: var(--size-small);
  margin-bottom: var(--space-4);
  max-width: 60ch;
}

/* --- 4. opcoes ----------------------------------------------------------- */

.opcoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-4);
}

.opcao {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: 400 var(--size-body)/1.5 var(--font-body);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.opcao:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}

.opcao[aria-checked="true"],
.opcao[data-marcada="true"] {
  border-color: var(--ouro-500);
  background: rgba(212, 176, 108, 0.08);
}

/* Indicador: circulo para escolha unica, quadrado para multipla. */
.opcao__marca {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  position: relative;
  transition: border-color var(--transition);
}

.opcao--multipla .opcao__marca {
  border-radius: var(--radius-sm);
}

.opcao[aria-checked="true"] .opcao__marca,
.opcao[data-marcada="true"] .opcao__marca {
  border-color: var(--ouro-500);
  background: var(--ouro-500);
}

.opcao[aria-checked="true"] .opcao__marca::after,
.opcao[data-marcada="true"] .opcao__marca::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: var(--text-on-gold);
}

.opcao--neutra {
  background: transparent;
  color: var(--text-secondary);
}

/* --- 5. campos ----------------------------------------------------------- */

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

.campo__rotulo {
  display: block;
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.campo__entrada {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--size-body-lg);
  transition: border-color var(--transition);
}

.campo__entrada:focus {
  border-color: var(--ouro-500);
  outline: none;
}

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

/* Linha de reparticao percentual (P08). */
.reparticao__linha {
  display: grid;
  grid-template-columns: 1fr 130px;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
}

.reparticao__soma {
  font-size: var(--size-small);
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
}

.reparticao__soma[data-valida="false"] {
  color: var(--vinho-400);
}

/* --- 6. acoes e mensagens ------------------------------------------------ */

.acoes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.voltar {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--size-small);
  cursor: pointer;
}

.voltar:hover {
  color: var(--text-secondary);
}

.erro {
  min-height: 20px;
  font-size: var(--size-small);
  color: var(--vinho-400);
  margin-top: var(--space-1);
}

/* Rotulo tecnico, visivel apenas em modo de inspecao (?debug=1). */
.variavel {
  display: inline-block;
  font-size: var(--size-label);
  color: var(--ouro-600);
  background: rgba(212, 176, 108, 0.08);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  margin-top: var(--space-4);
}

.revisao {
  display: block;
  font-size: var(--size-label);
  color: var(--vinho-400);
  border: 1px solid var(--vinho-600);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-top: 10px;
  max-width: 62ch;
  line-height: 1.6;
}

/* --- 7. telas especiais -------------------------------------------------- */

/* Porta de saida: painel vinho, sem tom de erro. Sair da triagem nao e
   falha do respondente — e informacao util entregue de graca. */
.saida {
  border: 1px solid var(--vinho-600);
  border-left-width: 3px;
  background: linear-gradient(
    100deg,
    rgba(115, 49, 44, 0.22),
    rgba(115, 49, 44, 0.06)
  );
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.saida__codigo {
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vinho-400);
  margin-bottom: var(--space-1);
}

/* Gate de pagamento. */
.gate__resumo {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.gate__preco {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ouro-500);
  margin-bottom: var(--space-2);
}

.consentimento {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--size-small);
  color: var(--text-secondary);
  margin-block: var(--space-3);
}

.consentimento input {
  margin-top: 4px;
  accent-color: var(--ouro-500);
  width: 18px;
  height: 18px;
}

/* Tela final: os fatos que iriam ao servidor. */
.payload {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  overflow-x: auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre;
}

/* --- 8. responsivo ------------------------------------------------------- */

@media (max-width: 560px) {
  .form-main {
    padding-top: var(--space-4);
  }

  .reparticao__linha {
    grid-template-columns: 1fr 110px;
  }

  }