/* ==========================================================================
   Roteiro FLH - estilos das telas de pergunta
   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(--amarelo-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(--amarelo-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(--amarelo-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(--amarelo-600);
}

.pergunta__titulo {
  font-family: var(--font-display);
  font-weight: 500;
  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(--amarelo-500);
  background: rgba(194, 162, 79, 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(--amarelo-500);
  background: var(--amarelo-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-amarelo);
}

.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(--amarelo-500);
  outline: none;
}

/* O autopreenchimento do navegador (nome, e-mail) ignora a cor de fundo
   e de texto do campo e forca as dele — um fundo quase branco com o
   texto claro que o campo normalmente usa, ilegivel. O truque do
   box-shadow interno reafirma o fundo escuro por cima do que o
   navegador tenta impor; -webkit-text-fill-color reafirma a cor do
   texto, porque autofill ignora `color` sozinho. */
.campo__entrada:-webkit-autofill,
.campo__entrada:-webkit-autofill:hover,
.campo__entrada:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-in-out 0s;
}

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

/* Tabela de faturamento mes a mes (P03B, P04, P05).
   Duas colunas em tela larga, para que doze meses caibam sem rolagem
   longa; uma coluna em tela estreita. */
.meses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px var(--space-3);
  margin-bottom: var(--space-3);
}

.meses__linha {
  display: grid;
  grid-template-columns: 1fr 132px;
  align-items: center;
  gap: var(--space-2);
}

.meses__rotulo {
  font-size: var(--size-small);
  color: var(--text-secondary);
  text-transform: capitalize;
}

.meses__total {
  font-size: var(--size-small);
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

/* 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(--alerta-300);
}

/* --- 5b. campo com unidade ----------------------------------------------- */

/* A unidade fica DENTRO do campo, encostada a direita, e o padding do
   input abre espaco para ela — sobrepor sem abrir espaco faria o "%"
   cobrir o numero assim que ele ficasse longo. */
.campo__com-unidade {
  position: relative;
  display: block;
}

.campo__com-unidade .campo__entrada {
  padding-right: 44px;
}

.campo__unidade {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--amarelo-600);
  font-weight: 600;
  pointer-events: none;
}

/* As setinhas do type=number ficavam exatamente onde a unidade precisa
   estar, e num campo de 0 a 100 elas nao valem a colisao: ninguem chega a
   trinta por cento clicando trinta vezes. */
.campo__com-unidade .campo__entrada::-webkit-outer-spin-button,
.campo__com-unidade .campo__entrada::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.campo__com-unidade .campo__entrada[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* --- 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);
}

/* As 3 acoes do resultado (baixar PDF, ajustar resposta, nova analise)
   com largura de conteudo (flex, como o resto do .acoes) formavam um
   degrau: a terceira caia sozinha embaixo da primeira, mas com largura
   diferente dela, parecendo desalinhada. Uma coluna so, todas com a
   mesma largura, empilhadas — alinhamento padronizado do começo ao fim. */
.acoes--resultado {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.acoes--resultado .btn {
  width: 100%;
}

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

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

/* Porta de saida: tom de marca, e nao de erro. Sair da triagem nao e
   falha do respondente — e informacao util entregue de graca, e por isso
   a borda esquerda e amarela e nao vermelha. */
.saida {
  border: 1px solid var(--border-amarelo);
  border-left: 3px solid var(--amarelo-600);
  background: linear-gradient(
    100deg,
    rgba(194, 162, 79, 0.09),
    rgba(194, 162, 79, 0.02)
  );
  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(--amarelo-600);
  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(--amarelo-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(--amarelo-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;
  }

  .meses {
    grid-template-columns: 1fr;
  }

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