/* Componentes do Perfil do Arrematante. SO variaveis: os valores moram nas peles
   (pele-clube.css, pele-cfl.css). Spec: ux/FRONTEND-SPEC.md. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.app { max-width: 480px; margin: 0 auto; padding: 24px 20px 48px; min-height: 100vh; }
.carregando { color: var(--texto-2); text-align: center; margin-top: 40vh; }
[data-foco]:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.tela { display: flex; flex-direction: column; gap: 16px; animation: entra 220ms ease-out; }
/* So desloca, nunca some: com animacao pausada (aba em segundo plano, economia de energia)
   um keyframe que parte de opacity 0 deixava a tela inteira invisivel. Medido no preview em 29/09. */
@keyframes entra { from { transform: translateY(8px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tela { animation: none; }
  * { transition: none !important; }
}

.sobretitulo {
  margin: 0; color: var(--acento); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.titulo {
  margin: 0; font-family: var(--fonte-display); font-weight: var(--display-peso);
  font-size: clamp(32px, 8.5vw, 40px); line-height: 1.08; letter-spacing: -0.015em;
}
.titulo--m { font-size: clamp(28px, 7.5vw, 34px); }
.titulo--perfil { font-size: var(--perfil-tamanho); }
.lead { margin: 0; font-size: 19px; line-height: 1.4; }
.texto { margin: 0; }
.texto--2 { color: var(--texto-2); }
.pequeno { margin: 0; font-size: 14px; color: var(--texto-2); }

/* botoes */
.botao {
  font: inherit; border: 0; cursor: pointer; border-radius: 12px;
  min-height: 52px; padding: 14px 20px; font-weight: 600; font-size: 17px;
}
.botao--primario { background: var(--destaque); color: var(--texto-destaque); width: 100%; }
.botao--secundario { background: transparent; color: var(--texto); border: 1px solid var(--filete); width: 100%; }
.botao--link { background: none; color: var(--texto-2); text-decoration: underline; min-height: 48px; align-self: center; font-weight: 500; }
.botao--carregando { opacity: 0.85; cursor: progress; }
.botao:disabled { cursor: progress; }

/* progresso */
.progresso { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; }
.botao--voltar { background: none; color: var(--texto); min-height: 48px; min-width: 48px; padding: 0; font-size: 22px; }
.botao--voltar-vazio { width: 48px; height: 48px; }
.progresso__trilho { height: 4px; background: var(--filete); border-radius: 4px; overflow: hidden; }
.progresso__barra { height: 100%; background: var(--decor); transition: width 220ms ease-out; }
.progresso__texto { font-size: 14px; color: var(--texto-2); white-space: nowrap; }

/* pergunta e opcoes */
.form-pergunta { margin: 0; }
.opcoes { border: 0; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pergunta {
  padding: 0; margin-bottom: 4px; font-family: var(--fonte-display); font-weight: var(--display-peso);
  font-size: var(--pergunta-tamanho); line-height: 1.2;
}
.ajuda { margin: 0 0 4px; font-size: 15px; color: var(--texto-2); }
.opcao {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 14px 16px; border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--filete); cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.opcao__radio { position: absolute; opacity: 0; pointer-events: none; }
.opcao__texto { flex: 1; font-size: 17px; }
.opcao__check { opacity: 0; font-weight: 700; }
.opcao:has(.opcao__radio:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcao--marcada { background: var(--destaque); border-color: var(--destaque); color: var(--texto-destaque); }
.opcao--marcada .opcao__check { opacity: 1; }

/* captura */
.form-captura { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rotulo { font-size: 15px; font-weight: 600; margin-top: 8px; }
.form-captura input {
  font: inherit; font-size: 16px; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--filete); border-radius: 12px; min-height: 52px; padding: 12px 14px;
}
.form-captura input[aria-invalid="true"] { border-color: var(--acento); }
.erro-campo { margin: 0; font-size: 14px; color: var(--acento); min-height: 0; }
.erro-campo:not(:empty)::before { content: "⚠ "; }
.form-captura .botao--primario { margin-top: 12px; }

/* resultado */
.cartoes { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.cartao { background: var(--superficie); border: 1px solid var(--filete); border-radius: 14px; padding: 12px 16px; }
.cartao--meu { background: var(--destaque); border-color: var(--destaque); color: var(--texto-destaque); }
.cartao__linha { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.cartao__trilho { margin-top: 8px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.cartao__barra { height: 100%; background: var(--texto-2); border-radius: 4px; }
.cartao--meu .cartao__barra { background: var(--texto-destaque); }

.bloco { background: var(--superficie); border: 1px solid var(--filete); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bloco--comece { border: 2px solid var(--decor); }
.bloco__rotulo { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento); }
.codigo { margin: 0; font-size: 13px; color: var(--texto-2); letter-spacing: 0.04em; }
.aula { margin: 0; font-weight: 600; }
.aula--destaque { font-family: var(--fonte-display); font-weight: var(--display-peso); font-size: 24px; line-height: 1.2; }
.lista-aulas { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.lista-aulas li { padding-left: 4px; }
.lista-aulas li .codigo { display: block; }
.lista-aulas li .aula { display: block; }
.ferramenta { margin: 0; font-size: 20px; font-weight: 700; color: var(--texto); }
.fecho { margin: 0; padding: 16px; border-radius: 14px; border-left: 3px solid var(--decor); background: rgb(255 255 255 / 0.04); }
.aviso-gravacao { margin: 0; font-size: 14px; color: var(--texto-2); }