/* ============================================================
   Telas de autenticação Perazzo — layout COVER:
   - form à ESQUERDA (card branco)
   - brand lateral à DIREITA (gradiente Cork + logo)
   - fundo da página com o padrão (bg-auth) atrás do form
   - input "form-float" da casa (label flutuante)
   Standalone (login/redefinir não estendem o shell do app).
   ============================================================ */

body.page-auth {
    /* Fonte local/sistema — sem requisição externa. (Se quiser a Montserrat
       exata, baixamos os .woff2 pra public/fonts e adicionamos @font-face.) */
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
    position: relative;
}
/* Padrão de fundo da página (mesma imagem da outra tela), atrás do form. */
body.page-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.24;
    background: url("../img/auth/bg-auth.jpg") center center / cover no-repeat;
}

#auth-cover { min-height: 100vh; }

/* ===== Brand lateral (direita) ===== */
.brand-side {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #4361ee 0%, #1e2e77 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    text-align: center;
    padding: 40px;
}
.brand-side img { max-width: 240px; height: auto; margin-bottom: 28px; filter: brightness(0) invert(1); }
.brand-side h1 { font-size: 30px; font-weight: 800; margin-bottom: 14px; }
.brand-side p { font-size: 16px; color: #dfe4ff; font-weight: 500; max-width: 420px; }
.brand-side::after {
    content: "";
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    bottom: -120px; right: -120px;
}

/* ===== Card do form (branco) ===== */
.login-card { background: #fff; border: none; max-width: 420px; width: 100%; }
.login-card h2 { color: #1e2e77; font-weight: 700; font-size: 22px; margin-bottom: 3px; }
.login-card p  { color: #6c6e78; font-size: 13px; }

/* ===== form-float (label flutuante; card branco) ===== */
.form-float { position: relative; }
.form-float input::placeholder,
.form-float textarea::placeholder { color: transparent; }
.form-float input:focus::placeholder,
.form-float textarea:focus::placeholder { color: transparent !important; }
.form-float label {
    position: absolute;
    left: 15px;
    top: 12px;
    padding: 0 5px;
    font-size: 13px;
    color: #888ea8;
    transition: top .25s, color .25s;
    pointer-events: none;
}
.form-float input:focus ~ label,
.form-float input:not(:placeholder-shown) ~ label,
.form-float textarea:focus ~ label,
.form-float textarea:not(:placeholder-shown) ~ label {
    top: -8px;
    background: #fff;
    color: #1e2e77;
}

/* ===== Logo no card (só mobile): a logo é branca e o card é branco, então
   tinge pra #2a2a2a. brightness(0) força preto; invert(.165) sobe pra #2a2a2a. ===== */
.card-logo-mobile { filter: brightness(0) invert(0.165); }

/* ===== Alerta dentro do card (erro de senha / sessão expirada) — limpo ===== */
.auth-alert {
    position: relative;
    border: 0;
    border-left: 3px solid currentColor;
    border-radius: 8px;
    font-size: 13px;
    padding: .7rem 2.2rem .7rem .9rem;   /* espaço à direita pro X */
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
/* X de fechar (ícone Font Awesome local): centralizado, sem caixa, herda a cor
   do alerta (vermelho no danger), discreto. */
.auth-alert-close {
    position: absolute;
    top: 50%;
    right: .6rem;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    font-size: 13px;
    cursor: pointer;
    opacity: .5;
}
.auth-alert-close:hover { opacity: .9; }

/* ===== Olhinho mostrar/ocultar senha ===== */
.form-float--senha .form-control { padding-right: 42px; background-image: none !important; }
.toggle-senha {
    position: absolute;
    top: 11px;
    right: 14px;
    z-index: 3;
    color: #888ea8;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.toggle-senha:hover { color: #1e2e77; }

/* ===== Responsivo: some o brand, form ocupa tudo ===== */
@media (max-width: 991px) {
    .brand-side { display: none !important; }
    #auth-cover .form-side { min-height: 100vh; }
}