/* ================================================================
   TELA DE ENTRADA (.gp-lg) — App/Telas/login/index.php
   Na tela larga: a marca da filial (ou o informativo do Gesprov) à
   esquerda e o formulário à direita; no celular, só o cartão do
   formulário. O login.css antigo continua sendo o da verificação em
   duas etapas. Cores só nos tokens; tema claro (o escuro troca os valores
   no gp-login-escuro.css, só nas telas do sistema).
   ================================================================ */
:root {
    --lg-fundo: #f3f6fa;
    --lg-cartao: #fff;
    --lg-linha: #d9e1ea;
    --lg-linha2: #e8edf3;
    --lg-txt: #1f3346;
    --lg-txt2: #5b6b7b;
    --lg-txt3: #8796a5;
    --lg-acc: #3f6ad8;
    --lg-acc-forte: #3156b8;
    --lg-acc-suave: #e8eefc;
    --lg-acc-anel: rgba(63, 106, 216, .18);
    --lg-acc-sombra: rgba(63, 106, 216, .28);
    --lg-link: #3f6ad8;        /* o azul como texto (link, ícone marcado) */
    --lg-link-forte: #3156b8;
    --lg-linha-forte: #c3cfdc;
    --lg-codigo-dica: #c3cfdc;
    --lg-sobre: #fff;
    --lg-circulo: rgba(63, 106, 216, .10);
    --lg-circulo-fim: rgba(63, 106, 216, 0);
    --lg-lado1: #eaf0fb;
    --lg-lado2: #f7f9fd;
    --lg-perigo: #b03a2e;
    --lg-perigo-fundo: #fdecea;
    --lg-aviso: #7a5200;
    --lg-aviso-fundo: #fff4d6;
    --lg-sombra: 0 10px 30px rgba(31, 51, 70, .08), 0 2px 6px rgba(31, 51, 70, .05);
}

html { height: 100%; }
body.gp-lg {
    min-height: 100%; margin: 0; padding: 0; background: var(--lg-fundo); color: var(--lg-txt);
    font-family: "Nunito", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
.gp-lg *, .gp-lg *:before, .gp-lg *:after { box-sizing: border-box; }
.gp-lg-icones { position: absolute; width: 0; height: 0; overflow: hidden; }
.gp-lg .gp-lg-ic {
    flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

/* a página: uma coluna no celular, duas na tela larga */
.gp-lg-pagina { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* o lado da marca (só na tela larga) */
.gp-lg-lado { display: none; }

/* o lado do formulário */
.gp-lg-area {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    min-width: 0; padding: 32px 16px 24px;
}
.gp-lg-cartao {
    width: 100%; max-width: 420px; padding: 28px 24px 22px; border: 1px solid var(--lg-linha2); border-radius: 18px;
    background: var(--lg-cartao); box-shadow: var(--lg-sombra);
}
.gp-lg-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.gp-lg .gp-lg-marca {
    display: block; width: auto; max-width: min(240px, 100%); max-height: 120px; height: auto; margin: 0 auto 4px; object-fit: contain;
}
.gp-lg-titulo { text-align: center; }
.gp-lg-titulo h1 { margin: 0 0 4px; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--lg-txt); }
.gp-lg-titulo p { margin: 0; font-size: 14px; color: var(--lg-txt2); }

/* o aviso do servidor (usuário e senha não encontrados) e o do sandbox */
.gp-lg-alerta {
    display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 14px; border-radius: 10px;
    background: var(--lg-perigo-fundo); color: var(--lg-perigo); font-size: 14px; font-weight: 600; line-height: 1.4;
}
.gp-lg-alerta .gp-lg-ic { margin-top: 1px; }
.gp-lg-alerta.gp-lg-alerta-sandbox { justify-content: center; background: var(--lg-aviso-fundo); color: var(--lg-aviso); letter-spacing: .04em; }

/* os campos: o rótulo em cima, o ícone dentro */
.gp-lg-campo { display: flex; flex-direction: column; gap: 6px; }
.gp-lg-campo > label { margin: 0; font-size: 13px; font-weight: 700; color: var(--lg-txt); }
.gp-lg-entrada { position: relative; display: flex; align-items: center; }
.gp-lg-entrada > .gp-lg-ic { position: absolute; left: 14px; color: var(--lg-txt3); pointer-events: none; transition: color .15s; }
.gp-lg .gp-lg-entrada .form-control {
    width: 100%; height: 50px; margin: 0; padding: 0 14px 0 44px; border: 1px solid var(--lg-linha); border-radius: 12px;
    background: var(--lg-cartao); color: var(--lg-txt); font-family: inherit; font-size: 16px; line-height: normal;
    box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.gp-lg .gp-lg-entrada .form-control::placeholder { color: var(--lg-txt3); opacity: 1; }
.gp-lg .gp-lg-entrada .form-control:hover { border-color: var(--lg-linha-forte); }
.gp-lg .gp-lg-entrada .form-control:focus { outline: 0; border-color: var(--lg-acc); box-shadow: 0 0 0 4px var(--lg-acc-anel); }
.gp-lg .gp-lg-entrada:focus-within > .gp-lg-ic { color: var(--lg-link); }
.gp-lg .gp-lg-entrada #senha { padding-right: 52px; }
.gp-lg .gp-lg-entrada #senha::-ms-reveal { display: none; }

/* mostrar a senha */
.gp-lg-olho {
    position: absolute; right: 5px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    margin: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--lg-txt3); cursor: pointer;
}
.gp-lg-olho:hover { background: var(--lg-fundo); color: var(--lg-txt2); }
.gp-lg-olho:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--lg-acc-anel); color: var(--lg-link); }
.gp-lg-olho[aria-pressed="true"] { color: var(--lg-link); }
.gp-lg-caps { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--lg-aviso); }
.gp-lg-caps[hidden] { display: none; }
.gp-lg-caps .gp-lg-ic { width: 15px; height: 15px; }

/* o botão Entrar */
.gp-lg .gp-lg-botao {
    width: 100%; height: 50px; margin: 4px 0 0; padding: 0 16px; border: 0; border-radius: 12px; background: var(--lg-acc);
    color: var(--lg-sobre); font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: .01em; cursor: pointer;
    box-shadow: 0 6px 16px var(--lg-acc-sombra); transition: background .15s, box-shadow .15s, transform .05s;
    -webkit-appearance: none; appearance: none;
}
.gp-lg .gp-lg-botao:hover { background: var(--lg-acc-forte); }
.gp-lg .gp-lg-botao:active { transform: translateY(1px); }
.gp-lg .gp-lg-botao:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--lg-acc-anel); }
.gp-lg .gp-lg-botao.gp-lg-botao-enviando { background: var(--lg-acc-forte); opacity: .85; cursor: progress; }

/* o IP de quem está entrando */
.gp-lg-ip {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; align-self: center; max-width: 100%;
    margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--lg-fundo); color: var(--lg-txt2);
    font-size: 12.5px; line-height: 1.35; text-align: center;
}
.gp-lg-ip strong { font-weight: 700; color: var(--lg-txt); font-variant-numeric: tabular-nums; word-break: break-all; }
.gp-lg-ip .gp-lg-ic { width: 14px; height: 14px; color: var(--lg-txt3); }

/* o rodapé: a marca do Gesprov */
.gp-lg-rodape { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; color: var(--lg-txt3); font-size: 12.5px; }
.gp-lg-rodape img { display: block; width: auto; height: 26px; }

/* tela larga: a marca da filial à esquerda */
@media (min-width: 992px) {
    .gp-lg-pagina { grid-template-columns: minmax(0, 1fr) minmax(440px, 40%); }
    .gp-lg-lado {
        position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
        padding: 48px; background: linear-gradient(150deg, var(--lg-lado1) 0%, var(--lg-lado2) 70%);
        border-right: 1px solid var(--lg-linha2);
    }
    /* os círculos do fundo: só enfeite */
    .gp-lg-lado:before, .gp-lg-lado:after {
        content: ""; position: absolute; border-radius: 50%; pointer-events: none;
        background: radial-gradient(circle, var(--lg-circulo) 0%, var(--lg-circulo-fim) 70%);
    }
    .gp-lg-lado:before { width: 520px; height: 520px; top: -180px; left: -160px; }
    .gp-lg-lado:after { width: 420px; height: 420px; right: -140px; bottom: -150px; }
    .gp-lg-lado-marca { position: relative; z-index: 1; display: flex; justify-content: center; max-width: 100%; }
    .gp-lg-lado-marca img { display: block; width: auto; max-width: min(460px, 100%); max-height: 46vh; height: auto; object-fit: contain; }
    /* o informativo do Gesprov ocupa o lado inteiro, com rolagem própria */
    .gp-lg-informativo { position: relative; z-index: 1; width: 100%; max-height: calc(100vh - 96px); overflow: auto; }
    .gp-lg-informativo img { max-width: 100%; height: auto; }

    .gp-lg-area { padding: 40px 48px 28px; background: var(--lg-cartao); }
    .gp-lg-cartao { max-width: 380px; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .gp-lg-titulo { text-align: left; }
    .gp-lg .gp-lg-marca { margin: 0 0 4px; max-height: 110px; }
    .gp-lg-titulo h1 { font-size: 26px; }
    /* sem o informativo a marca já está à esquerda: o formulário fica sem ela */
    .gp-lg:not(.gp-lg-com-info) .gp-lg-form .gp-lg-marca { display: none; }
    .gp-lg-ip { align-self: flex-start; }
}

/* telas baixas (celular deitado): começa do alto e rola */
@media (max-height: 560px) {
    .gp-lg-area { justify-content: flex-start; }
}
@media (max-width: 359px) {
    .gp-lg-cartao { padding: 22px 16px 18px; border-radius: 14px; }
    .gp-lg-titulo h1 { font-size: 20px; }
}

/* ================================================================
   AS TELAS DA MESMA FAMÍLIA — a verificação em duas etapas
   (dois-fatores.php), Esqueci a senha (esqueci-senha.php) e
   Recuperar a senha (recuperar-senha.php). Mesmo cartão e mesmo
   lado da marca da entrada; aqui só o que é delas.
   ================================================================ */
.gp-lg {
    --lg-ok: #1d7a4e;
    --lg-ok-fundo: #e5f5ec;
    --lg-c-whatsapp: #1f9d55;
    --lg-c-telegram: #1683c6;
    --lg-c-email: #3f6ad8;
    --lg-c-app: #c94a3d;
    line-height: 1.5;
}

/* o selo da tela (escudo, envelope, chave) em cima do título: só na tela larga,
   onde a marca da filial sai do cartão (no celular a marca já está em cima) */
.gp-lg-selo {
    display: none; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 12px;
    border-radius: 16px; background: var(--lg-acc-suave); color: var(--lg-link);
}
.gp-lg-selo .gp-lg-ic { width: 26px; height: 26px; }
.gp-lg-titulo p strong { color: var(--lg-txt); font-weight: 700; }

/* os avisos verde e amarelo (o vermelho é o .gp-lg-alerta) */
.gp-lg-alerta.gp-lg-alerta-ok { background: var(--lg-ok-fundo); color: var(--lg-ok); }
.gp-lg-alerta.gp-lg-alerta-atencao { background: var(--lg-aviso-fundo); color: var(--lg-aviso); }
.gp-lg-alerta a { color: inherit; font-weight: 800; text-decoration: underline; }
.gp-lg-alerta a:hover { color: inherit; }

/* o aviso que a verificação escreve (enviando, código inválido...) */
.gp-lg-aviso {
    margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center;
    background: var(--lg-acc-suave); color: var(--lg-link-forte);
}
.gp-lg-aviso:empty { display: none; }
.gp-lg-aviso.gp-lg-aviso-erro { background: var(--lg-perigo-fundo); color: var(--lg-perigo); }

/* a frase antes do campo ou dos canais */
.gp-lg-instrucao { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--lg-txt2); }
.gp-lg-instrucao strong { color: var(--lg-txt); }
.gp-lg-instrucao .gp-lg-ic { color: var(--lg-c-app); }

/* o "ou receba um código por:" entre o campo e os canais */
.gp-lg-ou { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; font-size: 13px; color: var(--lg-txt3); }
.gp-lg-ou:before, .gp-lg-ou:after { content: ""; flex: 1 1 0; height: 1px; background: var(--lg-linha2); }

/* os canais de envio do código */
.gp-lg-canais { display: flex; flex-direction: column; gap: 8px; }
.gp-lg .canal-btn {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 9px 14px 9px 10px;
    border: 1px solid var(--lg-linha); border-radius: 12px; background: var(--lg-cartao); color: var(--lg-txt);
    font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.gp-lg .canal-btn:hover { border-color: var(--lg-acc); background: var(--lg-lado2); }
.gp-lg .canal-btn:focus-visible { outline: 0; border-color: var(--lg-acc); box-shadow: 0 0 0 4px var(--lg-acc-anel); }
.gp-lg .canal-btn:disabled { opacity: .55; cursor: not-allowed; background: var(--lg-cartao); border-color: var(--lg-linha); }
.gp-lg-canal-ic {
    display: flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
    background: var(--lg-fundo); color: var(--lg-txt2);
}
.gp-lg-canal-ic .gp-lg-ic { width: 19px; height: 19px; }
.gp-lg .canal-whatsapp .gp-lg-canal-ic { color: var(--lg-c-whatsapp); }
.gp-lg .canal-telegram .gp-lg-canal-ic { color: var(--lg-c-telegram); }
.gp-lg .canal-email .gp-lg-canal-ic { color: var(--lg-c-email); }
.gp-lg-canal-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.gp-lg .canal-btn .destino { font-size: 12.5px; font-weight: 600; color: var(--lg-txt3); overflow-wrap: anywhere; }
.gp-lg-canal-seta { color: var(--lg-txt3); }

/* o campo do código: grande e centrado; o de recuperação, menor */
.gp-lg .gp-lg-entrada .form-control.gp-lg-codigo {
    height: 58px; padding: 0 14px; font-size: 26px; font-weight: 700; letter-spacing: 8px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.gp-lg .gp-lg-entrada .form-control.gp-lg-codigo::placeholder { color: var(--lg-codigo-dica); }
.gp-lg .gp-lg-entrada .form-control.gp-lg-codigo.recuperacao { font-size: 17px; letter-spacing: 2px; }
.gp-lg-contador { margin: 0; font-size: 12.5px; color: var(--lg-txt3); text-align: center; }
.gp-lg-contador:empty { display: none; }
.gp-lg .gp-lg-botao:disabled { background: var(--lg-acc-forte); opacity: .85; cursor: progress; }

/* os links de baixo (código de recuperação, voltar) */
.gp-lg-links { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 14px; text-align: center; }
.gp-lg-links a { color: var(--lg-link); font-weight: 700; text-decoration: none; }
.gp-lg-links a:hover { color: var(--lg-link-forte); text-decoration: underline; }
.gp-lg-links a:focus-visible { outline: 0; border-radius: 6px; box-shadow: 0 0 0 3px var(--lg-acc-anel); }
.gp-lg-links .gp-lg-voltar { color: var(--lg-txt2); font-weight: 600; }

@media (min-width: 992px) {
    .gp-lg-selo { display: flex; margin: 0 0 14px; }
    .gp-lg-links { align-items: flex-start; text-align: left; }
}

/* ================================================================
   CENTRAL DO ASSINANTE — a entrada (central/login.php) e o Recuperar
   (central/recuperar_senha.php) no mesmo cartão; aqui só os botões das
   lojas do aplicativo, que aparecem quando os links estão cadastrados.
   ================================================================ */
.gp-lg-lojas { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 420px; }
.gp-lg-lojas > span { font-size: 13px; font-weight: 700; color: var(--lg-txt2); }
.gp-lg-lojas-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gp-lg-lojas-botoes a { display: block; border-radius: 10px; }
.gp-lg-lojas-botoes a:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--lg-acc-anel); }
.gp-lg-lojas-botoes img { display: block; width: auto; height: 44px; max-width: 100%; }

@media (min-width: 992px) {
    .gp-lg-lojas { align-items: flex-start; max-width: 380px; }
    .gp-lg-lojas-botoes { justify-content: flex-start; }
}