/* Caixa "Sou humano". É um <input type="checkbox"> de verdade: sem este CSS
   ele continua aparecendo como checkbox comum, só perde o cartão em volta. */

.as-linha  { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0; flex-wrap: wrap; }

.as-human  { display: inline-flex; align-items: center; gap: .65rem;
             padding: .75rem .95rem; font: inherit; line-height: 1.2;
             background: #fff; border: 1px solid #c9ccd2; border-radius: 8px;
             cursor: pointer; user-select: none;
             transition: border-color .15s, background .15s, box-shadow .15s; }
.as-human:hover { border-color: #1f6feb; }
.as-human:focus-within { outline: 2px solid #1f6feb; outline-offset: 2px; }

.as-check  { width: 1.35rem; height: 1.35rem; flex: none; margin: 0;
             accent-color: #1a7f37; cursor: inherit; }

/* spinner que ocupa o lugar do checkbox enquanto a prova de trabalho roda */
.as-spin   { display: none; width: 1.35rem; height: 1.35rem; flex: none;
             border: 2px solid #1f6feb; border-right-color: transparent;
             border-radius: 50%; animation: as-gira .7s linear infinite; }
@keyframes as-gira { to { transform: rotate(360deg); } }

.as-human.as-carregando            { cursor: progress; }
.as-human.as-carregando .as-check  { display: none; }
.as-human.as-carregando .as-spin   { display: block; }

/* verificado */
.as-human.as-ok        { border-color: #1a7f37; background: #f0fff4; cursor: default; }
.as-human.as-ok .as-check { cursor: default; }

/* não marcou e tentou enviar */
.as-human.as-alerta    { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }

.as-status { color: #57606a; font-size: .9rem; }
.as-erro   { color: #b42318; }

@media (prefers-reduced-motion: reduce) {
  .as-spin { animation-duration: 2s; }
}

@media (prefers-color-scheme: dark) {
  .as-human            { background: #1c2128; border-color: #3d444d; color: #e6edf3; }
  .as-human.as-ok      { background: #0f2b17; border-color: #2ea043; }
  .as-status           { color: #9198a1; }
}