/* ===========================================================================
   Tela de entrada (login / cadastro) — fatia 12e do redesign.

   Layout do mockup de MELHORIAS: cartão centrado com faixa da marca no topo,
   sobre um fundo claro em gradiente. Só tokens, como o resto do redesign.
   ======================================================================== */

.gp-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--superficie) 0%, var(--superficie-alta) 100%);
    color: var(--cor-texto);
}

/* --- Barra superior ------------------------------------------------------ */

.gp-login__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding: var(--esp-4) var(--esp-5);
}

.gp-login__produto {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    font-family: var(--fonte-titulo);
    font-size: var(--texto-pequeno);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-texto);
}

.gp-login__produto-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--raio-md);
    background-color: var(--superficie-cartao);
    box-shadow: var(--sombra-1);
    font-size: 1.1rem;
}

.gp-login__suporte {
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
}

/* --- Cartão -------------------------------------------------------------- */

.gp-login__centro {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--esp-4) var(--esp-4) var(--esp-6);
}

.gp-login__cartao {
    width: 100%;
    max-width: 27rem;
    background-color: var(--superficie-cartao);
    border-radius: var(--raio-xl);
    box-shadow: var(--sombra-3);
    overflow: hidden;
}

/* O cadastro tem o dobro de campos e duas colunas: cartao mais largo, senao as
   duas colunas ficam estreitas demais para caber "-- Selecione uma Empresa --". */
.gp-login__cartao--largo { max-width: 34rem; }

/* Faixa da marca: mesmo tom da sidebar. A tela de entrada é a primeira coisa
   que o usuário vê do sistema, e ela precisa parecer o sistema. */
.gp-login__marca {
    padding: var(--esp-5) var(--esp-4);
    background-color: var(--superficie-nav);
    text-align: center;
}

.gp-login__marca img {
    max-width: 10rem;
    height: auto;
}

.gp-login__marca-texto {
    display: block;
    margin-top: var(--esp-2);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-sobre-nav);
}

.gp-login__corpo {
    padding: var(--esp-5) var(--esp-5) var(--esp-4);
}

.gp-login__titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--cor-texto);
}

.gp-login__subtitulo {
    margin: var(--esp-1) 0 var(--esp-5);
    text-align: center;
    color: var(--cor-texto-suave);
}

/* --- Campos -------------------------------------------------------------- */

.gp-campo {
    margin-bottom: var(--esp-4);
}

.gp-campo__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-bottom: var(--esp-2);
}

.gp-campo__rotulo {
    font-size: var(--texto-pequeno);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

.gp-campo__caixa {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    padding: 0 var(--esp-3);
    background-color: var(--superficie-baixa);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
}

.gp-campo__caixa:focus-within {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--superficie-alta);
}

.gp-campo__caixa.is-erro {
    border-color: var(--cor-erro);
}

.gp-campo__icone {
    flex: 0 0 auto;
    color: var(--cor-texto-suave);
    line-height: 1;
}

/* O input perde a moldura própria: a moldura agora é a caixa, que também
   abriga o ícone e o botão de mostrar a senha. */
.gp-campo__caixa input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.7rem 0;
    border: 0;
    background: transparent;
    color: var(--cor-texto);
    font-family: inherit;
    font-size: var(--texto-base);
}

.gp-campo__caixa input:focus {
    outline: none;
    box-shadow: none;
}

.gp-campo__olho {
    flex: 0 0 auto;
    padding: var(--esp-1);
    border: 0;
    background: none;
    color: var(--cor-texto-suave);
    cursor: pointer;
    line-height: 1;
}

.gp-campo__erro {
    margin-top: var(--esp-1);
    font-size: var(--texto-pequeno);
    color: var(--cor-erro);
}

/* Duas colunas nas linhas em que os campos sao curtos (e-mail + unidade,
   senha + repetir). Vira uma coluna so no celular. */
.gp-campo--duplo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-3);
}

/* O <select> do WTForms entra dentro da mesma caixa dos inputs, para a linha
   ficar com a mesma altura e a mesma moldura do campo de texto ao lado. */
.gp-campo__caixa select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.7rem 0;
    border: 0;
    background: transparent;
    color: var(--cor-texto);
    font-family: inherit;
    font-size: var(--texto-base);
    appearance: none;
    cursor: pointer;
}

.gp-campo__caixa select:focus {
    outline: none;
}

.gp-campo__seta {
    flex: 0 0 auto;
    color: var(--cor-texto-suave);
    pointer-events: none;
}

/* Regra da senha logo abaixo do campo: exibida so quando nao ha erro, para nao
   competir com a mensagem de validacao no mesmo lugar. */
.gp-campo__ajuda {
    margin-top: var(--esp-1);
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
}

.gp-login__lembrar {
    display: flex;
    /* flex-start, e nao center: o aceite dos termos quebra em duas linhas, e
       centralizado a caixa flutuaria no meio do paragrafo. */
    align-items: flex-start;
    gap: var(--esp-2);
    margin-bottom: var(--esp-4);
    font-size: var(--texto-base);
    line-height: 1.45;
    color: var(--cor-texto);
}

.gp-login__lembrar input[type="checkbox"] {
    /* Alinha a caixa com a primeira linha do texto. */
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.gp-login__lembrar a { color: var(--cor-primaria); }

.gp-login__botao {
    width: 100%;
    padding: 0.8rem var(--esp-4);
    border: 0;
    border-radius: var(--raio-lg);
    background-color: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
    font-family: var(--fonte-titulo);
    font-size: var(--texto-base);
    font-weight: 700;
    cursor: pointer;
}

.gp-login__botao:hover {
    background-color: var(--cor-primaria-hover);
}

/* --- Divisor e Google ---------------------------------------------------- */

.gp-login__ou {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin: var(--esp-5) 0 var(--esp-4);
    font-size: var(--texto-pequeno);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

.gp-login__ou::before,
.gp-login__ou::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--cor-borda);
}

.gp-login__google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-3);
    width: 100%;
    padding: 0.7rem var(--esp-4);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background-color: var(--superficie-cartao);
    color: var(--cor-texto);
    font-size: var(--texto-base);
}

.gp-login__google:hover {
    background-color: var(--superficie-baixa);
    color: var(--cor-texto);
}

/* --- Rodapé do cartão ---------------------------------------------------- */

.gp-login__rodape-cartao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    padding: var(--esp-3) var(--esp-5);
    border-top: 1px solid var(--cor-borda);
    background-color: var(--superficie-baixa);
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
}

.gp-login__estado {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
}

/* O ponto começa neutro e só ganha cor quando o /health responde: verde antes
   da resposta seria um "tudo certo" que ninguém verificou. */
.gp-login__ponto {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--raio-total);
    background-color: var(--cor-borda-forte);
}

.gp-login__estado.is-ok .gp-login__ponto { background-color: var(--cor-sucesso); }
.gp-login__estado.is-falha .gp-login__ponto { background-color: var(--cor-erro); }
.gp-login__estado.is-ok { color: var(--cor-sucesso); }
.gp-login__estado.is-falha { color: var(--cor-erro); }

/* --- Textos abaixo do cartão --------------------------------------------- */

.gp-login__aviso {
    max-width: 34rem;
    margin: var(--esp-5) auto 0;
    text-align: center;
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
}

.gp-login__aviso a {
    color: var(--cor-primaria);
}

.gp-login__rodape {
    padding: var(--esp-4);
    text-align: center;
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
}

/* --- Mensagens ----------------------------------------------------------- */

.gp-login__mensagens {
    width: 100%;
    max-width: 27rem;
    margin-bottom: var(--esp-4);
}

@media screen and (max-width: 480px) {
    .gp-campo--duplo { grid-template-columns: 1fr; }
    .gp-login__topo { padding: var(--esp-3); }
    .gp-login__corpo { padding: var(--esp-4) var(--esp-4) var(--esp-3); }
    .gp-login__rodape-cartao { flex-direction: column; align-items: flex-start; }
}