/* Verificação humana do login — mesmas medidas do componente do TecSkill Hub:
   caixa «Não sou um robô» (14 px, borda 1 px translúcida, raio 12 px, padding 12×16) que dá lugar ao quebra-cabeça
   (320×160, centralizado, raio 12 px) e à barra de arrastar NATIVA (input range, 16 px de altura). */
.desafio { margin: 0; }
.desafio__caixa {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
  border: 1px solid rgba(15, 23, 42, .1); border-radius: .75rem; background: transparent;
  color: #5B6678; font: inherit; font-size: .875rem; font-weight: 400; line-height: 1.25rem; cursor: pointer;
}
.desafio__caixa:disabled { cursor: progress; }
.desafio__caixa:focus-visible, .desafio__de-novo:focus-visible { outline: 3px solid #00AEEF; outline-offset: 2px; }
.desafio__marca {
  display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, .1); border-radius: .25rem; background: transparent;
}
.desafio__giro { width: .875rem; height: .875rem; color: #A3A3A3; animation: desafio-gira 1s linear infinite; }
.desafio__giro[hidden], .desafio__caixa[hidden], .desafio__painel[hidden], .desafio__falha[hidden], .desafio__ok[hidden] { display: none; }
@keyframes desafio-gira { to { transform: rotate(360deg); } }
.desafio__falha { margin: .5rem 0 0; font-size: .875rem; line-height: 1.25rem; color: #DC2626; }
.desafio__de-novo { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

.desafio__palco {
  position: relative; width: 100%; max-width: 20rem; margin: 0 auto; aspect-ratio: 2 / 1; overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .1); border-radius: .75rem; background: #F0F6FC; user-select: none; -webkit-user-select: none;
}
.desafio__fundo { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.desafio__peca { position: absolute; left: 0; pointer-events: none; will-change: transform; filter: drop-shadow(0 2px 3px rgba(0, 16, 51, .4)); }
.desafio__ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(16, 185, 129, .1); }
.desafio__ok span { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 999px; background: #059669; color: #fff; font-size: .75rem; line-height: 1rem; font-weight: 500; }

/* A barra é o range nativo do navegador, como no Hub: sem desenhar trilho nem alça. Centralizada sob a imagem. */
.desafio__range { display: block; width: 100%; max-width: 20rem; margin: .5rem auto 0; }
.desafio__aviso { margin: .25rem 0 0; font-size: .75rem; line-height: 1rem; color: #5B6678; max-width: 20rem; margin-inline: auto; }
.desafio[data-estado="carregando"] .desafio__aviso { color: #5B6678; }
.desafio[data-estado="erro"] .desafio__aviso { color: #DC2626; }
.desafio[data-estado="ok"] .desafio__aviso { display: none; }
@media (prefers-reduced-motion: reduce) { .desafio__giro { animation: none; } }