/* Telas de entrada: login (modernizada em 23/09/2026) e as de senha do allauth
   (templates/account/). Mesmo fundo, cartão e componentes; tudo escopado em `.lg-login`,
   nada global além do fundo do body. */

html, body { height: 100%; margin: 0; }

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../../img/background.jpg") no-repeat center center fixed !important;
    background-size: cover !important;
}

/* Véu sobre o fundo: claro, com um tom de marca para dar profundidade. */
.overlay {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(60% 55% at 78% 12%, rgba(74, 108, 247, .22), transparent 70%),
        rgba(255, 255, 255, .78);
    z-index: 0;
}

.container { display: flex; justify-content: center; align-items: center; height: 100%; }

.lg-login {
    --lg-brand: #4a6cf7;
    --lg-brand-dark: #3b5bdb;
    --lg-ink: #1f2937;
    --lg-muted: #6b7280;
    --lg-line: #e3e7f3;
    position: relative;
    z-index: 1;
}

.lg-login .custom-card {
    width: min(58rem, 94vw);
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: 28px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 30px 70px rgba(31, 45, 90, .22) !important;
    overflow: hidden;
}

/* Filete de marca no topo do cartão. */
.lg-login .custom-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--lg-brand), #7c93ff);
    z-index: 2;
}

.lg-login .lg-lado-logo {
    background: linear-gradient(160deg, rgba(74, 108, 247, .08), rgba(124, 147, 255, .02));
    padding: 2rem 1.5rem;
}
.lg-login .custom-img { width: min(20rem, 100%); height: auto; object-fit: contain; }

.lg-login .custom-coluna { display: block; padding: 2.4rem 2.4rem 2.2rem; }

.lg-boas-vindas { margin-bottom: 1.5rem; }
.lg-boas-vindas h1 { margin: 0 0 .25rem; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--lg-ink); }
.lg-boas-vindas p { margin: 0; font-size: .92rem; color: var(--lg-muted); }

/* Campos com ícone à esquerda. */
.lg-campo { position: relative; margin-bottom: 1rem; }
.lg-campo > i.lg-campo-icone {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3b8;
    font-size: .95rem;
    pointer-events: none;
    transition: color .15s ease;
}
/* Especificidade acima de `.user .form-control-user` do sb-admin, que zerava o recuo
   do ícone e deixava o texto por cima dele. */
.lg-login .lg-campo .form-control.form-control-user {
    height: 50px;
    padding: 0 46px 0 46px;
    border: 1px solid var(--lg-line);
    border-radius: 14px;
    background: #fff;
    font-size: .95rem;
    color: var(--lg-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lg-login .lg-campo .form-control.form-control-user::placeholder { color: #a3abbf; }
.lg-login .lg-campo .form-control.form-control-user:focus { border-color: var(--lg-brand); box-shadow: 0 0 0 4px rgba(74, 108, 247, .16); }
.lg-campo:focus-within > i.lg-campo-icone { color: var(--lg-brand); }

.lg-olho {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #9aa3b8;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lg-olho:hover { background: #f1f3fa; color: var(--lg-ink); }

.lg-botao {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.lg-botao:hover { transform: translateY(-1px); text-decoration: none; }
.lg-botao:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(74, 108, 247, .25); }
.lg-botao--primario { background: var(--lg-brand); color: #fff; box-shadow: 0 8px 20px rgba(74, 108, 247, .38); }
.lg-botao--primario:hover { background: var(--lg-brand-dark); color: #fff; }
.lg-botao--google { background: #fff; border-color: var(--lg-line); color: var(--lg-ink); }
.lg-botao--google:hover { border-color: #c9d1ea; box-shadow: 0 6px 16px rgba(15, 23, 42, .08); color: var(--lg-ink); }
.lg-botao--google .fa-google { color: #ea4335; }

.lg-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.3rem 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a3abbf;
}
.lg-divisor::before, .lg-divisor::after { content: ""; flex: 1; height: 1px; background: var(--lg-line); }

/* Avisos (erro de credencial, sessão expirada). */
.lg-login .alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border: 0;
    border-radius: 12px;
    font-size: .86rem;
    text-align: left !important;
}
.lg-login .alert-danger { background: rgba(231, 74, 59, .1); color: #a52c20; }
.lg-login .alert-warning { background: rgba(246, 194, 62, .18); color: #7a5a08; }

@media (max-width: 991.98px) {
    .lg-login .lg-lado-logo { padding: 1.5rem 1rem 0; }
    .lg-login .custom-img { width: 12rem; }
    .lg-login .custom-coluna { padding: 1.5rem 1.5rem 1.8rem; }
}

@media (max-height: 720px) {
    .container { height: auto; padding: 1.5rem 0; }
    body { align-items: flex-start; overflow-y: auto; }
}

#login-error-alert { display: none; }
#login-error-alert.show { display: block; }

/* Telas de senha: o mesmo cartão, numa coluna só, com o logo no topo. */
.lg-login .lg-cartao-unico { width: min(30rem, 94vw); }
.lg-login .lg-cartao-unico .custom-coluna { padding: 2.2rem 2.2rem 2rem; }
.lg-topo-logo { display: block; width: 8.5rem; height: auto; margin: 0 0 1.5rem; }

.lg-icone-estado {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    border-radius: 16px;
    background: rgba(74, 108, 247, .12);
    color: var(--lg-brand);
    font-size: 1.3rem;
}
.lg-icone-estado--ok { background: rgba(28, 200, 138, .14); color: #13855c; }
.lg-icone-estado--alerta { background: rgba(246, 194, 62, .2); color: #7a5a08; }

.lg-texto { margin: 0 0 1.3rem; font-size: .92rem; line-height: 1.55; color: var(--lg-muted); }
.lg-campo-erro { margin: -.45rem 0 1rem; font-size: .8rem; font-weight: 600; color: #a52c20; }

.lg-regras {
    margin: 0 0 1.3rem;
    padding: .8rem 1rem;
    border-radius: 12px;
    background: #f5f7fd;
    font-size: .8rem;
    color: var(--lg-muted);
}
.lg-regras strong { display: block; margin-bottom: .3rem; color: var(--lg-ink); font-weight: 700; }
.lg-regras ul { margin: 0; padding-left: 1.1rem; }

.lg-voltar { display: block; margin-top: 1.2rem; text-align: center; font-size: .86rem; }