html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #ffffff;
}


    /* Animação fade-in */
        .fade-in {
            animation: fadeIn 0.8s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Layout básico */
        .login-container {
            display: flex;
            height: 100vh;
        }
        .login-left {
            flex: 1;
            background: #0d6efd; /* Azul */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-left img {
            max-width: 70%;
        }
        .login-right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .login-card {
            width: 350px;
            padding: 50px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            border-radius: 8px;
        }
        
        
        
        /* Container que agrupa todos os botões abaixo do campo de senha */
.login-actions-container {
    display: flex;
    flex-direction: column; /* Coloca um embaixo do outro */
    align-items: center;    /* Centraliza os botões */
    gap: 12px;             /* Espaçamento entre os botões */
    margin-top: 20px;
    width: 100%;
}

/* Estilo comum para deixar os botões menores e finos */
.btn-compact {
    width: 200px !important;   /* Define uma largura fixa menor */
    padding: 5px 0 !important; /* Diminui a altura (deixa mais fino) */
    font-size: 0.9em !important; /* Diminui um pouco a fonte */
}

/* Centraliza a coluna de botões */
.login-actions-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Espaço entre os botões */
    margin-top: 15px;
    width: 100%;
}

/* Estilo para todos os botões ficarem iguais e finos */
.btn-login-main, .btn-login-secondary, .btn-login-flat {
    width: 100% !important;
    max-width: 250px !important; /* Tamanho menor no centro */
    padding: 2px 0 !important;   /* Deixa o botão mais fino */
    height: 35px !important;     /* Altura controlada */
}

/* Cor específica para o botão entrar (exemplo) */
.btn-login-main {
    background-color: #2196F3 !important;
}

/* Cor específica para o cadastrar */
.btn-login-secondary {
    background-color: #0056b3 !important;
}

        
        .login-igreja {
    width: 650px;
    padding: 40px 60px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    border-radius: 8px;
    margin: 40px auto;
    overflow-y: auto;
}
        .login-card h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .login-input {
            width: 100%;
            margin-bottom: 15px;
        }
        .login-btn {
            width: 100%;
        }
        
        
        /* CONTAINER EM TELAS IGUAIS 50/50 */
.login-container {
    display: flex;
    width: 100%;
    height: 100vh;
}

/* BLOCO ESQUERDO — TELA CHEIA */
.login-left {
    width: 60%;
    background: #0066ff; /* azul como sua imagem */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

/* Centraliza a imagem */
.logo-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* BLOCO DIREITO */
.login-right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CARD DE LOGIN */
.login-card {
    width: 400px;
    padding: 30px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 0 25px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Inputs */
.login-input {
    width: 100%;
    margin-bottom: 12px;
}

/* Botão entrar */
.login-btn {
    width: 100%;
}

/* Botão cadastrar */
.login-btn-secondary {
    width: 100%;    
    margin-top: 12px;
    background-color: #0066cc !important;
    color: white !important;
    border-radius: 8px !important;
}

.button-row { width:100%; display:flex; gap:10px; }
.button-row h\\:form { flex: 1; margin: 0; } /* aplica ao form dentro do row */

.login-footer{
    position: fixed;
    bottom:0;
    left:0;
    width:100%;

    background:#ffffff;
    border-top:1px solid #e5e7eb;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 35px;

    font-size:13px;
    color:#555;

    box-shadow:0 -2px 10px rgba(0,0,0,.05);
}

.login-footer a{
    color:#1565c0;
    text-decoration:none;
    margin:0 4px;
}

.login-footer a:hover{
    text-decoration:underline;
}

.login-footer i{
    margin-right:4px;
}

.footer-center,
.footer-right{
    display:flex;
    align-items:center;
    gap:8px;
}

@media(max-width:1000px){

    .login-footer{
        flex-direction:column;
        gap:8px;
        text-align:center;
        padding:15px;
    }

}

.pagina{
            max-width:1000px;
            margin:40px auto;
            padding:40px;
            background:white;
            border-radius:10px;
            box-shadow:0 2px 12px rgba(0,0,0,.15);
            line-height:1.7;
        }

        h1{
            color:#1565C0;
        }

        h2{
            margin-top:35px;
            color:#1565C0;
        }

        .voltar{
            margin-top:40px;
            text-align:center;
        }