/* SemChip — construtor de prova.
 *
 * Uma tela só, e é essa a decisão que define o resto.
 *
 * O cadastro anterior era um assistente de quatro passos, e assistente esconde
 * o todo: quem monta uma prova precisa ver o percurso enquanto escolhe o tempo
 * limite, porque oito quilômetros com 300 m de ganho não têm o mesmo corte de
 * três. Em passos, essas duas informações nunca aparecem juntas, e a pessoa
 * decide de memória — ou volta, confere e perde o preenchido.
 *
 * Daí a bancada: trilha do que falta à esquerda, ficha no meio, mapa fixo à
 * direita. Nada rola junto: cada coluna rola por si, então mexer no percurso
 * não some com o formulário.
 */

.construtor {
  display: grid;
  grid-template-columns: 190px minmax(360px, 1fr) minmax(400px, 520px);
  grid-template-rows: var(--barra) 1fr auto;
  grid-template-areas: "topo topo topo" "trilho ficha mapa" "pe pe pe";
  height: 100vh; width: 100%; overflow: hidden;
}

.c-topo {
  grid-area: topo; background: var(--bg); border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
}
.c-topo .marca {
  display: flex; align-items: center; gap: 7px; text-decoration: none;
  font-family: "Inter Tight", Inter, sans-serif; font-weight: 800; font-size: 14px;
  color: var(--grafite); letter-spacing: -.02em; flex: 0 0 auto;
}
.c-topo .separa { width: 1px; height: 22px; background: var(--linha); flex: 0 0 auto }
.c-topo .nome-vivo {
  font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; font-size: 14px;
  color: var(--grafite); min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 40ch;
}
.c-topo .nome-vivo:empty::before { content: 'Prova sem nome'; color: var(--tenue); font-weight: 500 }
.c-topo .direita { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto }

/* Marca de rascunho salvo. Discreta de propósito: é confirmação, não alerta —
   piscar em laranja a cada tecla treinaria a pessoa a ignorar a área. */
.rascunho { font-size: 11.5px; color: var(--tenue); display: flex; align-items: center; gap: 5px }
.rascunho b { width: 6px; height: 6px; border-radius: 99px; background: #16A34A; display: block }

/* ------------------------------------------------------------- trilho
 *
 * A lista do que falta, e não um índice de seções. A diferença está no que
 * cada linha responde: índice diz "aqui tem um assunto"; isto diz "este
 * assunto já está resolvido". É a pergunta de quem quer publicar a prova.
 */
.c-trilho {
  grid-area: trilho; background: var(--bg); border-right: 1px solid var(--linha);
  overflow-y: auto; padding: 14px 10px;
}
.c-trilho h3 {
  margin: 0 0 8px; padding: 0 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tenue);
}
.passo {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--suave); padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.passo:hover { background: var(--linha2); color: var(--grafite) }
.passo[aria-current="true"] { background: var(--laranja-tenue); color: var(--laranja); font-weight: 600 }
.passo .marca-passo {
  width: 16px; height: 16px; border-radius: 99px; flex: 0 0 auto;
  border: 1.6px solid var(--linha); display: grid; place-items: center;
  color: #fff; font-size: 9px;
}
.passo.feito .marca-passo { background: #16A34A; border-color: #16A34A }
.passo.opcional .marca-passo { border-style: dashed }
.passo .resumo { margin-left: auto; font-size: 10.5px; color: var(--tenue); font-variant-numeric: tabular-nums }

.c-trilho .nota {
  margin: 14px 8px 0; padding-top: 12px; border-top: 1px solid var(--linha2);
  font-size: 11px; color: var(--fraco); line-height: 1.45;
}

/* --------------------------------------------------------------- ficha */

.c-ficha { grid-area: ficha; overflow-y: auto; padding: 18px 20px 40px; background: var(--bg-fundo) }
.c-ficha > .bloco { margin-bottom: 14px; scroll-margin-top: 14px }

.bloco { background: var(--bg); border: 1px solid var(--linha); border-radius: var(--r-g) }
.bloco > header {
  height: 38px; padding: 0 14px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--linha); background: var(--bg-alt);
  border-radius: var(--r-g) var(--r-g) 0 0;
}
.bloco > header h2 { margin: 0; font-size: 12px; font-weight: 700; color: var(--grafite) }
.bloco > header .selo { margin-left: auto }
.bloco > .corpo { padding: 14px }

/* Escolha entre poucas opções que têm explicação: cartão de rádio, não lista
   suspensa. Numa lista suspensa o raio padrão de cada tipo ficaria escondido
   atrás de um clique, e é justamente ele que decide a escolha. */
.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px }
.opcoes label {
  border: 1px solid var(--linha); border-radius: var(--r); padding: 8px 10px;
  cursor: pointer; display: block; background: var(--bg);
}
.opcoes label:hover { border-color: var(--tenue) }
.opcoes input { position: absolute; opacity: 0; pointer-events: none }
.opcoes label:has(input:checked) { border-color: var(--laranja); background: var(--laranja-tenue) }
.opcoes label:has(input:focus-visible) { outline: 2px solid var(--laranja); outline-offset: 1px }
.opcoes .t { font-size: 12.5px; font-weight: 600; color: var(--grafite); display: block }
.opcoes label:has(input:checked) .t { color: var(--laranja) }
.opcoes .d { font-size: 11px; color: var(--fraco); display: block; margin-top: 1px }

/* ---------------------------------------------------------------- mapa */

.c-mapa {
  grid-area: mapa; border-left: 1px solid var(--linha); background: var(--bg);
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
.c-mapa .ferramentas {
  min-height: 40px; flex: 0 0 auto; border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; flex-wrap: wrap;
}
.c-mapa .modos button { padding: 5px 9px; font-size: 12px }
.c-mapa .alternar { font-size: 12px }
.c-mapa .caixa-mapa { flex: 1; position: relative; min-height: 0; background: var(--linha2) }
.c-mapa .caixa-mapa > #mapa { position: absolute; inset: 0 }

.c-mapa .numeros {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--linha); border-top: 1px solid var(--linha);
}
.c-mapa .numeros > div { background: var(--bg); padding: 7px 12px }
.c-mapa .numeros .valor {
  font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; font-size: 17px;
  color: var(--grafite); line-height: 1.2; font-variant-numeric: tabular-nums;
}
.c-mapa .numeros .rotulo { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tenue) }

.c-mapa .lista-cps {
  flex: 0 0 auto; max-height: 34%; overflow-y: auto; border-top: 1px solid var(--linha);
  padding: 8px;
}
.c-mapa .lista-cps:empty { display: none }

/* ------------------------------------------------------------------ pé */

.c-pe {
  grid-area: pe; background: var(--bg); border-top: 1px solid var(--linha);
  display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 52px;
}
.c-pe .recado { flex: 1; min-width: 0; font-size: 12.5px }
.c-pe .recado.erro { color: #B91C1C }
.c-pe .recado.ok { color: #15803D }

/* Registro do que aconteceu ao gravar. A criação são quatro chamadas em
   sequência — prova, categorias, percurso, checkpoints — e quando a terceira
   falha a pessoa precisa saber que as duas primeiras passaram, senão tenta de
   novo e cria a prova em duplicata. */
.diario {
  position: fixed; right: 14px; bottom: 62px; width: 320px; z-index: 800;
  background: var(--bg); border: 1px solid var(--linha); border-radius: var(--r-g);
  box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 10px 12px; font-size: 12px;
}
.diario ol { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px }
.diario li.ok { color: #15803D }
.diario li.erro { color: #B91C1C; font-weight: 600 }
.diario li.espera { color: var(--fraco) }

@media (max-width: 1280px) {
  .construtor { grid-template-columns: 56px minmax(320px, 1fr) minmax(340px, 44%) }
  .c-trilho { padding: 12px 6px }
  .c-trilho h3, .passo span:not(.marca-passo), .c-trilho .nota { display: none }
  .passo { justify-content: center }
}

/* Celular: uma coluna. Ficha em cima, mapa embaixo com altura fixa, rodapé
   preso no fim da tela. O trilho vira uma linha de passos rolável no topo. */
@media (max-width: 899px) {
  .construtor { display: block; height: auto; overflow: visible }
  .c-topo { position: sticky; top: 0; z-index: 30; flex-wrap: wrap; height: auto; min-height: var(--barra); padding: 6px 10px }
  .c-trilho { border-right: 0; border-bottom: 1px solid var(--linha); padding: 6px 8px; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden }
  .c-trilho h3, .c-trilho .nota, .passo .resumo { display: none }
  .passo { width: auto; flex: 0 0 auto; padding: 8px 10px; min-height: 40px }
  .passo span:not(.marca-passo) { display: inline }
  .c-ficha { padding: 14px 12px 20px }
  .c-mapa { border-left: 0; border-top: 1px solid var(--linha) }
  .c-mapa .caixa-mapa { height: 58vh; min-height: 320px; flex: none }
  .c-mapa .ferramentas { flex-wrap: wrap; padding: 6px 8px }
  .c-mapa .lista-cps { max-height: none }
  .c-pe { position: sticky; bottom: 0; z-index: 30; height: auto; min-height: 52px; flex-wrap: wrap; padding: 8px 12px; gap: 8px }
  .campos-3, .grade-2 { grid-template-columns: 1fr }
  .btn, .modos button { min-height: 40px }
  .diario { left: 10px; right: 10px; width: auto; bottom: 70px }
}