/* ================================================================================
   Acadesc Apoio aos Pais - Tela de login (login.php)

   Ticket #012910 - segundo passo do site novo: a pagina inicial (index.php) ja
   entrou no layout novo e esta folha traz a tela de login para o mesmo padrao.

   Arquivo AUTOSSUFICIENTE: nao depende de css/style.css (o antigo, que ainda
   serve dezenas de telas internas) nem do CSS da area logada. Depende apenas
   do Bootstrap 5 e do Bootstrap Icons carregados pelo login.php.

   As cores e as fontes sao as MESMAS da pagina inicial
   (assets/site/css/site.css): azul #123A63, amarelo #FFC72C, Poppins nos
   titulos e Roboto no corpo. A estrutura (papel de parede + cartao branco
   central + rodape) segue a tela de login da area da escola
   (escola/css/style_login.css), que ja nasceu no padrao novo.
   ================================================================================ */

:root {
    /* --- Cores da marca: as mesmas de assets/site/css/site.css --- */
    --ap-azul:         #123A63;
    --ap-azul-claro:   #1B5390;
    --ap-azul-hover:   #0E2E4F;
    --ap-amarelo:      #FFC72C;

    /* Navy do proprio papel de parede (amostrado de
       assets/img/fundo_login_apoio.webp). Entra como cor de reserva, para a
       pagina nunca aparecer branca enquanto a imagem nao chegou. */
    --ap-navy-fundo:   #061237;

    /* --- Neutros --- */
    --ap-cinza-claro:  #F4F6F8;
    --ap-cinza-borda:  #DEE2E6;
    --ap-texto:        #333F4E;
    --ap-texto-suave:  #6C757D;

    /* --- Tipografia --- */
    --ap-fonte-titulo: "Poppins", "Segoe UI", Arial, sans-serif;
    --ap-fonte-corpo:  "Roboto", "Segoe UI", Arial, sans-serif;

    --ap-raio: 14px;
}

* { box-sizing: border-box; }

html { height: 100%; }


/* ================================================================================
   1. Papel de parede
   ================================================================================ */

body.login-apoio {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--ap-fonte-corpo);
    color: var(--ap-texto);

    /* A imagem (background-image) e injetada pelo login.php com ?v=filemtime,
       para o navegador baixar a nova sempre que o arquivo for trocado. Aqui
       fica so o posicionamento e o navy de reserva. */
    background-color: var(--ap-navy-fundo);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

/* O papel de parede se repete sem costura, mas ele NAO e usado como azulejo:
   em `cover` nao existe emenda nenhuma para aparecer, e o desenho e discreto
   o bastante para o leve aumento de escala em telas largas nao incomodar. */

/* Vinheta: escurece as bordas e concentra a atencao no cartao, sem apagar o
   desenho do papel de parede no centro. */
body.login-apoio::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at center,
            rgba(6, 18, 55, .15) 0%,
            rgba(6, 18, 55, .72) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Area central: ocupa o espaco livre e centraliza o cartao */
.login-wrapper {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px 20px;
}


/* ================================================================================
   2. O cartao
   ================================================================================ */

.login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: var(--ap-raio);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .40);
}

/* Cabecalho azul. Onde a tela da escola escreve "Gestao Escolar", aqui entra
   a logo do Acadesc Apoio aos Pais - a MESMA arte branca usada no cabecalho
   da pagina inicial (assets/site/img/logo-apoio.webp). */
.login-card__header {
    background: linear-gradient(135deg, var(--ap-azul) 0%, var(--ap-azul-claro) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 22px;
}

.login-card__logo {
    display: block;
    height: 46px;
    width: auto;
    max-width: 100%;
}

.login-card__body {
    padding: 20px 22px 22px;
}

/* "Realize seu login": a mesma frase da tela antiga, agora como legenda do
   formulario. */
.login-card__legenda {
    font-family: var(--ap-fonte-titulo);
    font-weight: 600;
    font-size: 15px;
    color: var(--ap-azul);
    text-align: center;
    margin: 0 0 16px;
}


/* ================================================================================
   3. Campos
   ================================================================================ */

.login-card__body .form-label {
    font-family: var(--ap-fonte-titulo);
    font-size: 11px;
    font-weight: 600;
    color: var(--ap-azul);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.login-card__body .form-control {
    border-radius: 8px;
    border: 1px solid var(--ap-cinza-borda);
    font-size: 15px;
    padding: 10px 12px;
    height: auto;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.login-card__body .form-control:focus {
    border-color: var(--ap-azul);
    box-shadow: 0 0 0 3px rgba(18, 58, 99, .15);
}

.login-card__body .form-control[readonly] {
    background: var(--ap-cinza-claro);
}

.login-card__campo { margin-bottom: 14px; }

/* O lib/rotina_login.php responde com um <script> que marca o campo errado
   com as classes has-error/has-feedback do Bootstrap 3. Elas nao existem mais
   no Bootstrap 5 - a regra abaixo devolve o efeito: a borda do campo apontado
   pelo servidor fica vermelha. */
.login-card__campo.has-error .form-control {
    border-color: #DC3545;
}

.login-card__campo.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .18);
}

/* Botao de mostrar/ocultar senha, colado no campo */
.login-card__body .btn-ver-senha {
    border: 1px solid var(--ap-cinza-borda);
    border-left: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #fff;
    color: var(--ap-texto-suave);
    padding: 0 14px;
    font-size: 15px;
    line-height: 1;
}

.login-card__body .btn-ver-senha:hover,
.login-card__body .btn-ver-senha:focus {
    background: var(--ap-cinza-claro);
    color: var(--ap-azul);
    border-color: var(--ap-cinza-borda);
    border-left: none;
}


/* ================================================================================
   4. Botoes
   ================================================================================ */

.login-btn {
    font-family: var(--ap-fonte-titulo);
    border-radius: 8px;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    /* Borda transparente, e não `none`: assim o botão primário tem a MESMA
       altura do "Limpar", que precisa da borda cinza. */
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}

.login-btn:hover { transform: translateY(-1px); }

.login-btn-primary {
    background: var(--ap-azul);
    color: #fff;
}

.login-btn-primary:hover,
.login-btn-primary:focus {
    background: var(--ap-azul-hover);
    color: var(--ap-amarelo);
}

.login-btn-primary:disabled {
    background: #A0B0C0;
    color: #fff;
    cursor: not-allowed;
    transform: none;
}

.login-btn-secondary {
    background: transparent;
    color: var(--ap-texto-suave);
    border: 1px solid var(--ap-cinza-borda);
    font-weight: 500;
}

.login-btn-secondary:hover,
.login-btn-secondary:focus {
    background: var(--ap-cinza-claro);
    color: var(--ap-azul);
    border-color: var(--ap-cinza-borda);
}

/* "Esqueci minha senha": acao terciaria, entao vira link e nao botao. */
.login-esqueci {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--ap-fonte-corpo);
    font-size: 14px;
    color: var(--ap-azul-claro);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-esqueci:hover { color: var(--ap-azul); }


/* ================================================================================
   5. Cloudflare Turnstile
   ================================================================================ */

/* O widget tem largura minima de ~300px; sem este contêiner ele vaza para
   fora do cartao em telas estreitas. */
.login-turnstile {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 14px;
}

.login-turnstile .cf-turnstile { max-width: 100%; }


/* ================================================================================
   6. Mensagens de retorno do login
   --------------------------------------------------------------------------------
   O lib/rotina_login.php e antigo e responde com HTML no padrao do Bootstrap
   3: <p class="alert alert-info fade in" style="width: 50%;"> com um botao
   <button class="close" data-dismiss="alert">. Mexer nele para trocar isso
   afetaria TODOS os fluxos de login (app, links externos, troca de aluno),
   entao o backend fica como esta e as tres incompatibilidades sao resolvidas
   aqui:

   1. `width: 50%` inline deixaria o alerta com metade da largura do cartao;
   2. `.fade` sem `.show` e INVISIVEL no Bootstrap 5 (o `in` do 3 nao conta);
   3. `.close` nao existe mais - o "x" sairia como texto solto.

   O fechar do "x" (data-dismiss, que no Bootstrap 5 seria data-bs-dismiss)
   e resolvido por um handler no login.php.
   ================================================================================ */

#erros { margin-bottom: 4px; }

#erros .alert {
    width: auto !important;
    border-radius: 8px;
    font-size: 14px;
    padding: 11px 34px 11px 12px;
    margin-bottom: 14px;
    position: relative;
    text-align: left;
}

/* (2) Devolve a visibilidade ao "fade in" do Bootstrap 3 */
#erros .fade { opacity: 1; }

/* (3) O "x" do Bootstrap 3 */
#erros .close {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 0 4px;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    opacity: .55;
}

#erros .close:hover { opacity: 1; }


/* ================================================================================
   7. Voltar para a pagina inicial
   ================================================================================ */

.login-voltar {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

.login-voltar:hover {
    color: var(--ap-amarelo);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ================================================================================
   8. Modal "Esqueci minha senha"
   ================================================================================ */

.modal-senha .modal-content {
    border: 0;
    border-radius: var(--ap-raio);
    overflow: hidden;
}

.modal-senha .modal-header {
    background: linear-gradient(135deg, var(--ap-azul) 0%, var(--ap-azul-claro) 100%);
    color: #fff;
    border-bottom: 0;
    padding: 14px 18px;
}

.modal-senha .modal-title {
    font-family: var(--ap-fonte-titulo);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
}

.modal-senha .modal-title i { color: var(--ap-amarelo); }

/* O "x" do Bootstrap 5 e preto; sobre o azul ele precisa ficar branco. */
.modal-senha .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .7;
}

.modal-senha .btn-close:hover { opacity: 1; }

.modal-senha .modal-body {
    padding: 18px;
    font-size: 14px;
    color: var(--ap-texto);
}

.modal-senha .modal-body .form-label {
    font-family: var(--ap-fonte-titulo);
    font-size: 11px;
    font-weight: 600;
    color: var(--ap-azul);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.modal-senha .modal-body .form-control {
    border-radius: 8px;
    border: 1px solid var(--ap-cinza-borda);
    font-size: 15px;
    padding: 10px 12px;
}

.modal-senha .modal-body .form-control:focus {
    border-color: var(--ap-azul);
    box-shadow: 0 0 0 3px rgba(18, 58, 99, .15);
}

.modal-senha .modal-footer {
    border-top: 1px solid var(--ap-cinza-borda);
    padding: 12px 18px;
}

/* Aviso dentro do modal: e onde a resposta do esqueci_senha.php aparece.
   Antes essa resposta vinha num alert() do navegador. */
.modal-senha .senha-aviso {
    border-radius: 8px;
    font-size: 14px;
    padding: 11px 12px;
    margin-bottom: 14px;
}


/* ================================================================================
   9. Aguarde (envio do "esqueci minha senha")
   ================================================================================ */

.login-aguarde {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(6, 18, 55, .72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #fff;
    font-size: 16px;
}


/* ================================================================================
   10. Rodape
   --------------------------------------------------------------------------------
   Diferente do rodape da tela da escola (uma faixa cinza), aqui ele e
   transparente e fica POR CIMA do papel de parede: a tela inteira continua
   sendo uma peca so. O texto e a arte da Fanny's sao os mesmos da barra de
   creditos da pagina inicial - e sao brancos, entao so funcionam sobre o
   azul.
   ================================================================================ */

.login-rodape {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 16px 20px 20px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .78);
}

.login-rodape a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .2s ease;
}

.login-rodape a:hover {
    color: var(--ap-amarelo);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-rodape__linha1 { margin: 0; }

.login-rodape__destaque {
    font-weight: 700;
    color: #fff;
}

.login-rodape__creditos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 8px;
    font-size: 12px;
    opacity: .85;
}

.login-rodape__fannys {
    height: 34px;
    width: auto;
}


/* ================================================================================
   11. Responsivo
   ================================================================================ */

@media (max-width: 575.98px) {
    .login-wrapper { padding: 20px 12px 16px; }

    /* Padding menor garante >= 300px uteis para o Turnstile */
    .login-card__body { padding: 18px 14px 20px; }
    .login-card__header { padding: 16px 14px; }
    .login-card__logo { height: 38px; }

    /* No iOS o background-attachment: fixed tem comportamento erratico
       (a imagem "salta" ao rolar). A tela cabe na altura do celular, entao
       nao ha perda em soltar o fundo. */
    body.login-apoio { background-attachment: scroll; }

    .login-rodape { font-size: 12px; }
    .login-rodape__sep { display: none; }
    .login-rodape__linha1 { display: flex; flex-direction: column; gap: 4px; }
}

/* Telas muito estreitas: reduz o widget para caber sem estourar a lateral.
   O Turnstile tem largura minima de 300px (mesmo no modo flexible) e a 320px
   de tela sobram 268px uteis no cartao - 0,85 fecha a conta com folga
   (300 x 0,85 = 255). Medido no navegador. */
@media (max-width: 360px) {
    .login-turnstile {
        transform: scale(.85);
        transform-origin: center top;
        margin-bottom: 6px;
    }
}