/* =====================================================================
   Captcha deslizante (anti-bot no login). Montado por
   assets/js/captcha-deslize.js. Pino azul do sistema; estado OK em verde.

   ELE FOI ESCRITO CONTRA OUTRO SISTEMA DE TOKENS, E SETE NAO EXISTIAM

   Achado em 09/09/2026 pela conferencia `token_de_css_sem_definicao`. Este
   arquivo usava `--space-4`, `--radius-md`, `--radius-sm`, `--font-size-sm`,
   `--color-border-strong`, `--color-text-secondary` e `--color-success-bg`,
   nomes de uma escala que este projeto nao tem: a daqui e `--sp-4`, `--r-md`,
   `--fs-sm`, `--line`, `--ink-muted`.

   Nenhum deles dava erro. Declaracao com token inexistente fica invalida no
   calculo e a propriedade volta ao valor inicial, em silencio, e o CSS
   continua parecendo correto na leitura. Na pratica o captcha do LOGIN, que e
   a porta do sistema, estava sem margem inferior, sem canto arredondado, sem
   borda, com o rotulo no tamanho e na cor herdados, e sem o fundo verde do
   acerto.

   Agora usa os tokens que a escala tem.
   ===================================================================== */
.captcha-deslize {
    width: 100%;
    margin-bottom: var(--sp-4);
}
.captcha-trilho {
    position: relative;
    display: block;
    height: 44px;
    border-radius: var(--r-md);
    background: linear-gradient(#eef2f8, #e5eaf3);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.captcha-rotulo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 44px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-muted);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.captcha-pino {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 44px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
    transition: background-color 0.15s ease;
    z-index: 2;
}
.captcha-pino svg {
    width: 16px;
    height: 16px;
    display: block;
}
.captcha-arrastando .captcha-pino { cursor: grabbing; }
.captcha-arrastando .captcha-rotulo { color: var(--color-primary); }
.captcha-ok .captcha-trilho {
    background: var(--surface-alt);
    border-color: var(--color-success);
}
.captcha-ok .captcha-pino {
    background: var(--color-success);
    cursor: default;
}
.captcha-ok .captcha-rotulo { color: var(--color-success); }
.captcha-treme { animation: captchaTreme 0.4s ease; }
@keyframes captchaTreme {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}