/* ─────────────────────────────────────────────────────────────────────────────
   Tela de acesso ao ARGS.
   O fundo é o hangar do aeroclube — continua sendo a primeira coisa que se vê.
   O que muda é que o formulário deixa de flutuar solto sobre a fotografia: vai
   para um cartão, onde texto e campos têm fundo próprio e contraste garantido.
   Antes, "Mantenha-me conectado" era texto branco com sombra sobre a foto, e
   ficava ilegível justamente na faixa clara do telhado.
   ───────────────────────────────────────────────────────────────────────────── */

/* A paleta vem de global_sistema.css, que carrega antes desta folha: o
   backoffice e a tela de acesso são o mesmo sistema visual. */

body {
    background: url('/img/site/bg_login.jpg') no-repeat center center fixed;
    background-size: cover;

    /* Véu escuro: a foto continua visível, o cartão para de brigar com ela. */
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--args-tinta);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 38%, rgba(18, 41, 74, .18), rgba(18, 41, 74, .62) 70%),
        linear-gradient(180deg, rgba(10, 22, 40, .35), rgba(10, 22, 40, .55));
    pointer-events: none;
}

/* ── Cartão ─────────────────────────────────────────────────────────────── */

.container {
    position: relative;
    z-index: 1;
    max-width: 420px;
    padding: 24px 16px 96px;
}

.container form {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(6, 16, 32, .45), 0 2px 6px rgba(6, 16, 32, .25);
    padding: 34px 30px 28px;
    overflow: hidden;
    position: relative;
    text-align: left;
}

/* Filete no topo, nas duas cores do logotipo. */
.container form::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--args-vermelho) 0 38%, var(--args-navy) 38% 100%);
}

/* A marca do clube em cima: o símbolo, o nome e a qualificação da escola.
   O arquivo /img/site/logo.png traz o nome em branco, embutido na imagem —
   sobre o cartão claro, sumia. Aqui o símbolo é imagem e o nome é texto, que
   além de legível é selecionável e lido por leitor de tela. */
.container form .marca {
    text-align: center;
    margin-bottom: 22px;
}

#logoARGS {
    display: block;
    width: 92px;
    margin: 0 auto 12px;
}

.container form .marca h1 {
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--args-navy);
    letter-spacing: -.01em;
}

.container form .marca p {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--args-cinza);
}

.container form .subtitulo {
    display: block;
    text-align: center;
    margin: 0 0 22px;
    padding-top: 16px;
    border-top: 1px solid var(--args-borda);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--args-cinza);
}

/* ── Campos ─────────────────────────────────────────────────────────────── */

.container .input-group {
    border: 1px solid var(--args-borda);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.container .input-group:focus-within {
    border-color: var(--args-ceu);
    box-shadow: 0 0 0 4px rgba(61, 126, 201, .18);
}

.container .input-group-text {
    background: #f4f6fa;
    border: 0;
    border-right: 1px solid var(--args-borda);
    color: var(--args-cinza);
    width: 44px;
    justify-content: center;
}

.container .form-control {
    border: 0;
    box-shadow: none;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--args-tinta);
}

.container .form-control:focus {
    box-shadow: none;
}

/* Era `#9aa4b2`, um cinza-azulado à parte da paleta: 2,52:1 sobre o branco do
   cartão, quando o mínimo é 4,5:1. "Usuário" e "Senha" são a única indicação
   do que vai em cada campo — esta tela não tem <label> visível —, então era
   justamente o texto que não se podia perder.

   `--args-cinza-claro` é apelido de `--text-subtle`, que é o cinza que o
   sistema já usa em todo `::placeholder` do backoffice (medido no campo de
   busca da moldura: rgb(111, 104, 101)). Dá 5,54:1 sobre branco. */
.container .form-control::placeholder {
    color: var(--args-cinza-claro);
}

/* ── Manter conectado ───────────────────────────────────────────────────── */

#labelManterLogado {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 22px;
    color: var(--args-cinza);
    font-size: 14px;
    text-shadow: none;   /* era branco com sombra, para sobreviver à foto */
    cursor: pointer;
}

#labelManterLogado input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--args-navy);
    cursor: pointer;
}

/* O aviso da sessão de 24 h: só existe com a caixa marcada. Pelo `:has()`, sem
   script — vale também quando o navegador devolve a caixa marcada ao voltar
   para esta tela. As cores são as do `.alert` desta mesma folha (6:1 de
   contraste). */
.aviso-manter {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin: -12px 0 22px;
    padding: 10px 12px;
    border: 1px solid #f3d69b;
    border-radius: 10px;
    background: #fdf6e6;
    color: #7a5a12;
    font-size: 13px;
    line-height: 1.45;
}

.aviso-manter i {
    margin-top: 2px;
    color: #b7791f;
}

form:has(#manter_logado:checked) .aviso-manter {
    display: flex;
    animation: aviso-manter-entra .18s ease-out;
}

@keyframes aviso-manter-entra {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    form:has(#manter_logado:checked) .aviso-manter {
        animation: none;
    }
}

/* ── Desafio da Cloudflare ──────────────────────────────────────────────── */

/* O widget tem largura fixa de 300px e é desenhado dentro de um iframe, então
   nem centraliza sozinho nem encolhe junto com o cartão. Sem isto ele encosta
   na margem esquerda e destoa de todo o resto, que é centrado.

   Os 22px embaixo são os mesmos do "Mantenha-me conectado": o widget entra no
   ritmo do formulário em vez de ficar colado no botão. Encostado, a caixa da
   Cloudflare parecia parte do botão — e um clique mirando o "Acessar o
   sistema" caía dentro do desafio. */
.turnstile {
    display: flex;
    justify-content: center;
    margin: 4px 0 22px;
}

/* Vale enquanto o widget carrega: a `.cf-turnstile` nasce vazia e só ganha o
   iframe quando o api.js roda. Reservar a altura evita que o botão "Acessar o
   sistema" pule para baixo no meio do clique de quem foi rápido demais. */
.turnstile .cf-turnstile:empty {
    min-height: 65px;
}

/* ── Botões ─────────────────────────────────────────────────────────────── */

.container a.btn,
.container button.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .01em;
    padding: 12px 18px;
    margin: 0;
    border: 1px solid transparent;
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.container button.btn-primary {
    background: var(--args-navy);
    border-color: var(--args-navy);
    box-shadow: 0 6px 16px rgba(18, 41, 74, .28);
}

.container button.btn-primary:hover,
.container button.btn-primary:focus {
    background: var(--args-navy-claro);
    border-color: var(--args-navy-claro);
}

.container button.btn-primary:active {
    transform: translateY(1px);
}

/* Recuperar senha é a saída secundária: deixa de ser um bloco amarelo do mesmo
   peso visual do acesso e vira um botão discreto. */
.container a.btn-warning {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--args-borda);
    border-radius: 0;
    background: none;
    color: var(--args-cinza);
    font-weight: 500;
    font-size: 14px;
    box-shadow: none;
}

.container a.btn-warning:hover,
.container a.btn-warning:focus {
    background: none;
    color: var(--args-navy);
    text-decoration: underline;
}

.container .btn:focus-visible {
    outline: 3px solid rgba(61, 126, 201, .55);
    outline-offset: 2px;
}

/* ── Aviso ──────────────────────────────────────────────────────────────── */

.container .alert {
    border: 1px solid #f3d69b;
    background: #fdf6e6;
    color: #7a5a12;
    border-radius: 10px;
    text-align: left;
    font-size: 14px;
    padding: 12px 14px;
}

/* O botão de fechar fica ABSOLUTO no canto do aviso, e a regra acima, por ser
   mais específica que a do Bootstrap, apagava o espaço que ele reservava à
   direita. O "×" passava por cima da última linha: no aviso "falta pelo menos
   1 letra maiúscula", o × caía em cima de "maiúscula". Trinta e oito pixels é
   a largura que o botão ocupa. */
.container .alert-dismissible {
    padding-right: 38px;
}

/* ── Assinatura ─────────────────────────────────────────────────────────── */

/* Continua no canto inferior direito, onde sempre esteve. O que muda é a
   moldura branca do `img-thumbnail`, que desenhava um selo sobre a fotografia,
   e a cor: o logotipo original é azul-marinho e, contra o hangar escurecido,
   ficava ilegível.

   Some abaixo de 560px de altura. Em janela baixa — notebook com a barra de
   favoritos, celular deitado — o canto inferior direito é ocupado pelo próprio
   cartão, e a marca passava por cima do formulário. */
.assinatura {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 104px;
    margin: 14px;
    opacity: .8;
    transition: opacity .15s ease;
}

@media (max-height: 560px) {
    .assinatura {
        display: none;
    }
}

.assinatura:hover,
.assinatura:focus-visible {
    opacity: 1;
}

.assinatura img {
    display: block;
    width: 100%;
}

@media (max-width: 420px) {
    .container form {
        padding: 26px 20px 22px;
    }
}