/*
 * Telas de acesso — entrar e criar conta.
 *
 * Estava embutido no login.php. Saiu para cá quando o cadastro publico
 * passou a precisar do mesmo visual: duas copias do mesmo CSS divergem na
 * primeira alteracao que alguem faz so num dos arquivos.
 * Usa os tokens de assets/css/app.css, que os dois carregam antes.
 */
/* ==========================================================
   Tela de entrada
   Usa os tokens do design system (app.css). O que vive aqui e
   so o que existe apenas nesta tela: a abertura animada e o
   fundo neutro da marca.
   ========================================================== */

body { display: block; padding-bottom: 0; }

.login-palco {
    min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
    position: relative; overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.login-brilho { display: none; }

.login-cartao {
    position: relative; z-index: 1;
    width: 100%; max-width: 412px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6) var(--space-5) var(--space-5);
    animation: cartao-sobe 620ms var(--ease-out) both;
}
@keyframes cartao-sobe {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ---- Marca ---- */
.login-marca { text-align: center; margin-bottom: var(--space-5); }
.login-logo-caixa {
    width: 86px; height: 86px; margin: 0 auto var(--space-3);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    animation: logo-entra 720ms var(--ease-out) both;
}
.login-logo-caixa img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
@keyframes logo-entra {
    from { opacity: 0; transform: scale(.72) rotate(-7deg); }
    60%  { opacity: 1; transform: scale(1.06) rotate(2deg); }
    to   { opacity: 1; transform: none; }
}

.login-titulo { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.login-sub { font-size: .86rem; color: var(--bs-secondary-color); margin: .2rem 0 0; }

/* Entrada escalonada dos campos, no mesmo idioma do painel "Mais". */
.login-passo { animation: passo-entra 520ms var(--ease-out) both; animation-delay: calc(var(--ordem, 0) * 70ms + 180ms); }
@keyframes passo-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.login-campo { position: relative; }

/* A altura do campo pertence ao cartao, nao ao .login-campo. Enquanto essa
   regra estava presa ao wrapper do olho, so a senha o tinha: ela saia 51px e
   os vizinhos 38px, na mesma linha do formulario. Agora todo campo do login e
   do cadastro mede igual, e .login-campo cuida apenas do botao de ver senha. */
.login-cartao .form-control,
.login-cartao .form-select { padding: .78rem 1rem; background: var(--bs-tertiary-bg); }
.login-cartao .form-control:focus,
.login-cartao .form-select:focus { background: var(--bs-body-bg); }
.login-campo-icone {
    position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--bs-secondary-color); background: none; border: 0; padding: 0; line-height: 1;
}
.login-campo-icone:hover { color: var(--bs-primary-text-emphasis); }

.btn-entrar {
    width: 100%; padding: .8rem; font-weight: 700; letter-spacing: .02em;
    border: 0; border-radius: var(--radius-sm);
    background: var(--bs-primary); color: var(--on-primary);
    box-shadow: var(--shadow-sm);
    transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-entrar:hover  { filter: brightness(1.05); color: var(--on-primary); box-shadow: var(--shadow-md); }
.btn-entrar:active { transform: scale(.985); }
.btn-entrar[disabled] { filter: grayscale(.5); opacity: .8; }

/* ---- Assinatura do fabricante ---- */
.login-rodape {
    margin-top: var(--space-5); padding-top: var(--space-4);
    border-top: 1px solid var(--bs-border-color); text-align: center;
    animation: passo-entra 520ms var(--ease-out) both; animation-delay: .48s;
}
/* O nome e o logotipo EMPILHADOS. Em linha, sem gap, os dois se encostavam e
   a assinatura ficava ilegível — o logotipo passava por cima do texto. */
.login-ap {
    display: inline-flex; flex-direction: column; align-items: center;
    gap: .45rem;
    text-decoration: none; opacity: .8;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.login-ap:hover { opacity: 1; }

.login-ap-nome {
    font-size: .72rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--bs-secondary-color); line-height: 1;
}

.login-rodape-produto {
    font-size: .88rem; color: var(--bs-secondary-color);
    margin: 0 0 var(--space-4);
}

/* Assinatura discreta: no claro usa a arte escura e no escuro a clara. */
.login-ap-marca { height: 26px; width: auto; display: block; }
.login-ap-marca--escuro { display: none; }
[data-bs-theme="dark"] .login-ap-marca--claro  { display: none; }
[data-bs-theme="dark"] .login-ap-marca--escuro { display: block; }

.hp-field { display: none !important; position: absolute; left: -9999px; }

@media (prefers-reduced-motion: reduce) {
    .login-cartao, .login-logo-caixa, .login-passo, .login-rodape, .login-brilho {
        animation: none !important;
    }
}