/* =====================================================
   Agendaki — telas de entrada (login, cadastro, senha)

   Segue o desenho do aplicativo: fundo claro, logo grande no topo, campos
   brancos com ícone à esquerda e botão azul ocupando a largura.

   A versão anterior tinha degradê escuro no fundo, com o logo por cima. Não
   dá para manter: o logo tem letra azul-marinho e verde, e sobre azul escuro
   ele some. Fundo claro é também o que o aplicativo faz — e é onde a marca
   aparece inteira.

   Carrega depois do app.css e só nestas telas.
   ===================================================== */

.pagina-auth {
    min-height: 100vh;
    /* dvh corrige a barra de endereço do celular, que come 100vh e empurra o
       conteúdo para fora da tela ao rolar. Vem depois do vh como reserva. */
    min-height: 100dvh;

    background: var(--fundo);
    color: var(--texto);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
}

.auth-caixa {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

/* Logo em cima e grande. É a primeira página que a pessoa vê do sistema, e o
   desenho carrega a marca melhor que qualquer título. */
.auth-logo-top {
    display: inline-block;
    width: 74%;
    max-width: 270px;
    margin-bottom: 2rem;
}
.auth-logo-top:hover { text-decoration: none; }
.auth-logo-top img { width: 100%; height: auto; display: block; }

/* O nome escrito sai: repetir "Agendaki" embaixo de um logo escrito
   "Agendaki" é ruído. */
.auth-marca { display: none; }

/* Sem cartão: no aplicativo os campos ficam direto sobre o fundo, e a moldura
   extra só apertaria a largura útil no celular. */
.auth-card {
    background: transparent;
    text-align: left;
}

.auth-card h1 {
    font-size: 1.3rem;
    color: var(--texto);
    text-align: center;
    margin-bottom: .25rem;
}

.auth-subtitulo {
    text-align: center;
    color: var(--texto-suave);
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

/* ===== Campo com ícone ===== */

.campo-icone { position: relative; }

.campo-icone svg {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--n400);
    pointer-events: none;
}

/* O ícone ocupa a esquerda do campo; o texto começa depois dele. */
.campo-icone input { padding-left: 2.9rem; }

/* Campo de senha reserva a direita para o botão de mostrar. */
.campo-icone.com-acao input { padding-right: 3rem; }

.campo-olho {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: var(--raio-sm);
    color: var(--n500);
    cursor: pointer;
}
.campo-olho:hover { background: var(--n100); color: var(--n900); }
.campo-olho svg { position: static; transform: none; width: 20px; height: 20px; color: inherit; }

/* Campos brancos sobre o fundo cinza, com sombra em vez de borda pesada —
   é o desenho do aplicativo. */
.auth-card .campo input {
    background: var(--branco);
    border-color: var(--n200);
    box-shadow: var(--sombra);
    min-height: 52px;
}

/* "Esqueci minha senha" alinhado à direita, logo abaixo da senha. */
.auth-esqueci {
    text-align: right;
    margin: -.6rem 0 1.1rem;
    font-size: .875rem;
}
.auth-esqueci a { font-weight: 600; }

.auth-card .btn-bloco { min-height: 52px; font-size: 1rem; }

.auth-links {
    margin-top: 1.4rem;
    text-align: center;
    font-size: .9rem;
    color: var(--texto-suave);
}
.auth-links a { color: var(--marca-escura); font-weight: 700; }
.auth-links p { margin-bottom: .4rem; }
.auth-links p:last-child { margin-bottom: 0; }

.auth-rodape {
    margin-top: 2.5rem;
    font-size: .8rem;
    color: var(--texto-suave);
}
.auth-rodape a { color: var(--marca-escura); font-weight: 600; }

.auth-card .aviso { margin-bottom: 1.1rem; }

@media (max-width: 380px) {
    .auth-logo-top { max-width: 220px; margin-bottom: 1.5rem; }
    .auth-card h1  { font-size: 1.18rem; }
}

/* =====================================================
   O campo-isca
   =====================================================

   Fora da tela, e não display:none. Robô que procura isca costuma
   checar justamente display:none e visibility:hidden para pular o campo;
   empurrar para fora da área visível engana mais e esconde igual.

   Para leitor de tela o aria-hidden no HTML já resolve — e por isso aqui
   não há nada que dependa de ser visto. */
.isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}