/* ─────────────────────────────────────────────────────────────────────────────
   Recuperar senha — a irmã da tela de acesso.
   Esta folha tinha ficado para trás na modernização: `padding-top: 18%`, o
   formulário solto sobre a fotografia do hangar e os três botões empilhados
   com pesos visuais iguais. Quem clicava em "Esqueci minha senha" saía de um
   cartão desenhado e caía numa tela de outra época.
   Agora é o mesmo cartão, o mesmo ritmo e a mesma hierarquia do login.
   ───────────────────────────────────────────────────────────────────────────── */

/* A paleta precisa ser declarada aqui.

   A cascata de assets carrega `global_site.css` para o módulo `application`, e
   é `global_sistema.css` — do backoffice — que define os `--args-*`. Herdar
   não é opção: esta tela vive no site. Os valores são os mesmos de lá, e é de
   lá que devem ser copiados se a paleta mudar. */
:root {
    --args-navy: #12294a;
    --args-navy-claro: #1d3d6b;
    --args-vermelho: #a8232b;
    --args-ceu: #3d7ec9;
    --args-tinta: #1b2430;
    --args-cinza: #5b6675;
    /* Um passo mais claro que `--args-cinza`, para o `placeholder`.

       Medido: 5,55:1 sobre o branco do cartão. O limite que decidiu o valor
       não foi esse — foi o campo DESABILITADO, que o Bootstrap pinta de
       `#e9ecef`. Sobre esse cinza, o `#667082` que eu tinha escolhido primeiro
       media 4,21:1 e reprovava; este mede 4,68:1. */
    --args-cinza-claro: #5f6979;
    --args-borda: #dde3ec;
}

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

    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--args-tinta);
}

/* Véu escuro: a foto continua visível, o cartão para de brigar com ela. */
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;
}

.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, como no login: o símbolo é imagem e o nome é texto — legível,
   selecionável e lido por leitor de tela. O `logo.png` que estava aqui traz o
   nome em branco embutido na imagem e sumia sobre o cartão claro. */
.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);
}

/* Diz o que a tela faz antes de pedir os dados. Sem isto, o formulário abria
   com dois campos e nenhuma explicação do que aconteceria depois de enviar. */
.container form .explicacao {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.45;
    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`: 2,52:1 sobre o branco do cartão, contra os 4,5:1 do mínimo.
   Como no login, o `placeholder` é o único rótulo dos campos.

   O valor não vem de `--text-subtle` como no backoffice porque esta tela não
   recebe `tokens.css` nem `global_sistema.css` — ela vive no site, com a
   paleta fria declarada no `:root` acima. `--args-cinza-claro` é um passo mais
   claro que `--args-cinza` na mesma família: 5,55:1 sobre o branco do cartão e
   4,68:1 sobre o `#e9ecef` do campo desabilitado. */
.container .form-control::placeholder {
    color: var(--args-cinza-claro);
}

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

/* Mesmas medidas do login: o widget tem largura fixa e vive num iframe, então
   não centraliza sozinho; os 22px o mantêm no ritmo do formulário em vez de
   colado no botão. */
.turnstile {
    display: flex;
    justify-content: center;
    margin: 4px 0 22px;
}

.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);
}

/* As duas saídas secundárias. Eram um bloco amarelo e um cinza, do mesmo peso
   do botão de ação — três blocos coloridos disputando o olho. Viram links
   discretos, separados por um filete, na ordem em que fazem sentido: quem não
   sabe o usuário não vai conseguir preencher o formulário acima. */
.container a.btn-warning,
.container a.btn-secondary {
    padding: 12px 18px 0;
    border-radius: 0;
    background: none;
    color: var(--args-cinza);
    font-weight: 500;
    font-size: 14px;
    box-shadow: none;
}

.container a.btn-warning {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--args-borda);
}

.container a.btn-warning:hover,
.container a.btn-warning:focus,
.container a.btn-secondary:hover,
.container a.btn-secondary: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-radius: 10px;
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
    padding: 12px 14px;
}

/* Os quatro tipos que `ViewModel::buildMessage()` produz: success, warning,
   info e danger. Nesta tela os três primeiros aparecem de verdade — sucesso no
   envio, atenção na combinação que não confere, erro quando o e-mail não sai. */
.container .alert-warning {
    border: 1px solid #f3d69b;
    background: #fdf6e6;
    color: #7a5a12;
}

.container .alert-success {
    border: 1px solid #b7e0c8;
    background: #e7f5ee;
    color: #1f7a4d;
}

.container .alert-info {
    border: 1px solid #bcd6ec;
    background: #e8f1fa;
    color: #1a5f9e;
}

.container .alert-danger {
    border: 1px solid #f2c2be;
    background: #fdecea;
    color: #b3261e;
}

/* ── 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;
    }
}