/* =============================================================================
   Página de login — Legião de Maria
   Tela cheia, overlay escuro, cartão com cores institucionais.
   ============================================================================= */

:root {
    --vermelho: #A30001;
    --vermelho-escuro: #7d0001;
    --bege: #DBDAAC;
    --preto: #000000;
}

body.pagina-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    padding: 2rem 1rem;

    /* Fundo padrão: gradiente sóbrio institucional + textura sutil */
    background:
        linear-gradient(160deg, rgba(0, 0, 0, .82) 0%, rgba(125, 0, 1, .55) 100%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 16px),
        radial-gradient(120% 90% at 75% 15%, var(--vermelho-escuro) 0%, var(--preto) 72%);
    background-attachment: fixed;
}

/* Quando existir assets/img/login_bg.(jpg|jpeg|webp|png), ela é usada */
body.pagina-login.com-fundo {
    background:
        linear-gradient(160deg, rgba(0, 0, 0, .78) 0%, rgba(125, 0, 1, .62) 100%),
        var(--fundo) center / cover no-repeat fixed;
}

/* --------------------------------------------------------------- Cartão */
.cartao-login {
    width: min(430px, 94vw);
    background: #FFFFFF;
    border-radius: 14px;
    border-top: 6px solid var(--vermelho);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    padding: 3.4rem 2.4rem 2rem;
    margin-top: 44px; /* espaço para o logo flutuante */
    animation: surgir .45s ease both;
}

@keyframes surgir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.logo-flutuante {
    width: 92px;
    height: 92px;
    object-fit: contain;
    background: #fff;
    border: 4px solid var(--bege);
    border-radius: 50%;
    padding: 8px;
    display: block;
    margin: -108px auto 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}

.titulo-login {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--vermelho);
    text-align: center;
    letter-spacing: .02em;
    margin-bottom: .15rem;
}

.subtitulo-login {
    text-align: center;
    color: #6d6d6d;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: 1.6rem;
}

/* ------------------------------------------------------------- Mensagens */
.alerta-erro {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    background: #fdecec;
    border-left: 4px solid var(--vermelho);
    color: #7d0001;
    border-radius: 8px;
    font-size: .86rem;
    padding: .65rem .85rem;
    margin-bottom: 1.1rem;
}
.alerta-erro i { margin-top: .12rem; }

.cartao-login .alert {
    border-radius: 8px;
    font-size: .86rem;
}

/* ------------------------------------------------------------ Formulário */
.rotulo {
    display: block;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #333;
    margin-bottom: .35rem;
    margin-top: 1rem;
}

.campo-grupo {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #d9d9d9;
    border-radius: 9px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
    background: #fbfbf7;
}
.campo-grupo:focus-within {
    border-color: var(--vermelho);
    box-shadow: 0 0 0 .22rem rgba(163, 0, 1, .13);
    background: #fff;
}

.icone-campo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    color: var(--vermelho);
    background: var(--bege);
    font-size: .95rem;
}

.campo {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    padding: .72rem .85rem;
    font-size: .95rem;
    background: transparent;
    color: #111;
}
.campo::placeholder { color: #a9a9a9; }

.botao-ver-senha {
    border: none;
    background: transparent;
    color: #888;
    padding: 0 .85rem;
    cursor: pointer;
}
.botao-ver-senha:hover { color: var(--vermelho); }

.linha-opcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .95rem;
    font-size: .84rem;
}

.lembrar {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #444;
    cursor: pointer;
    user-select: none;
}
.lembrar input {
    width: 16px;
    height: 16px;
    accent-color: var(--vermelho);
    cursor: pointer;
}

.botao-entrar {
    width: 100%;
    margin-top: 1.35rem;
    padding: .78rem;
    border: none;
    border-radius: 9px;
    background: var(--vermelho);
    color: #fff;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease;
}
.botao-entrar:hover { background: var(--vermelho-escuro); }
.botao-entrar:active { transform: translateY(1px); }
.botao-entrar i { margin-right: .45rem; }

.nota-login {
    text-align: center;
    color: #8b8b8b;
    font-size: .74rem;
    margin: 1.5rem 0 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------- Rodapé */
.rodape-login {
    color: rgba(255, 255, 255, .75);
    font-size: .74rem;
    margin-top: 1.6rem;
    text-align: center;
}
.rodape-login em { opacity: .85; }

/* -------------------------------------------------------- Responsividade */
@media (max-width: 420px) {
    .cartao-login { padding: 3rem 1.4rem 1.6rem; }
    .titulo-login { font-size: 1.7rem; }
}