/* =========================================
   PALETA DE CORES E RESET BASE
   ========================================= */
:root {
    --verde-escuro: #0a5223;
    --verde-claro: #198754; 
    --cinza-claro: #D3D8E0;
    --branco: #FFFFFF;
    --texto-escuro: #333333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: var(--branco);
    color: var(--texto-escuro);
}

/* --- ESTILO DO BOTÃO DE UPLOAD (CÍRCULO) --- */
.container-foto {
    text-align: center;
    margin: 30px 0;
}

.input-escondido {
    display: none; /* Esconde o botão feio do navegador */
}

.circulo-foto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background-color: #f8f9fa;
    border: 2px dashed #198754; /* Borda tracejada verde */
    border-radius: 50%; /* Deixa perfeitamente redondo */
    cursor: pointer;
    transition: all 0.3s ease;
}

.circulo-foto:hover {
    background-color: #e9ecef;
    transform: scale(1.05); /* Dá uma leve aumentada ao passar o mouse */
}

.sinal-mais {
    font-size: 40px;
    color: #198754;
    font-weight: 300;
}

.texto-foto {
    font-size: 14px;
    color: #6c757d;
    margin-top: 10px;
    font-weight: 500;
}

/* --- ESTILO DO BOTÃO DE CADASTRAR --- */
.btn-cadastrar {
    background-color: #198754;
    color: white;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-cadastrar:hover {
    background-color: #146c43; /* Fica um verde mais escuro no hover */
}

/* --- CABEÇALHO DO USUÁRIO --- */
.menu-usuario-topo {
    display: flex; /* Isso coloca os itens lado a lado */
    align-items: center; /* Centraliza a altura */
    gap: 15px; /* Espaço entre a foto e os links */
}

.foto-perfil-mini {
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Deixa redondinho */
    object-fit: cover; /* Evita que a foto fique esticada */
    border: 2px solid #ffffff;
}

.links-topo {
    display: flex;
    gap: 15px;
    align-items: center;
}

.links-topo a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

/* =========================================
   CABEÇALHO E RODAPÉ (GERAL)
   ========================================= */
header {
    background-color: var(--verde-escuro);
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    max-height: 90px;
    width: auto;
    object-fit: contain;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li a {
    text-decoration: none;
    color: var(--branco);
    font-size: 14px;
    font-weight: bold;
}

nav ul li a:hover {
    color: var(--cinza-claro);
}

footer {
    background-color: var(--verde-escuro);
    color: var(--branco);
    padding: 40px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

footer a {
    color: var(--branco);
    text-decoration: none;
    margin-right: 15px;
}

/* =========================================
   PÁGINA HOME
   ========================================= */
/* Ajuste para o Hero de duas colunas */
.hero {
    display: flex; /* Ativa o alinhamento em colunas */
    align-items: center; /* Alinha o texto e a imagem ao centro verticalmente */
    justify-content: space-between; /* Espaça o texto de um lado e a imagem do outro */
    padding: 80px 50px;
    background-color: #f4f6f9;
}

.hero-texto {
    flex: 1; /* O texto ocupa metade da tela */
    padding-right: 40px;
}

.hero-imagem {
    flex: 1; /* A imagem ocupa a outra metade */
    text-align: center;
}

.hero h1 {
    font-size: 36px;
    margin-bottom: 10px;
    color: var(--verde-escuro);
}

.hero p {
    font-size: 16px;
    max-width: 600px;
    margin-bottom: 30px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

.btn-credenciar {
    background-color: var(--verde-escuro);
    color: var(--branco);
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-credenciar:hover {
    background-color: var(--verde-claro);
}

.beneficios {
    display: flex;
    justify-content: space-around;
    padding: 60px 50px;
    background-color: var(--branco);
}

.card {
    background-color: #f4f6f9;
    padding: 30px;
    border-radius: 8px;
    width: 30%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card h3 {
    color: var(--verde-escuro);
    margin-bottom: 15px;
    font-size: 18px;
}

.card p {
    font-size: 14px;
    color: #444;
}

/* =========================================
   PÁGINA DE CADASTRO
   ========================================= */
.main-cadastro {
    background-color: #f4f6f9;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.container-cadastro {
    background-color: var(--branco);
    width: 100%;
    max-width: 800px;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.cabecalho-cadastro {
    text-align: center;
    margin-bottom: 40px;
}

.cabecalho-cadastro h2 {
    color: var(--verde-escuro);
    margin-bottom: 10px;
}

.cabecalho-cadastro p {
    color: #555;
    font-size: 15px;
}

.sessao-form {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--cinza-claro);
    padding-bottom: 20px;
}

.sessao-form:last-of-type {
    border-bottom: none;
}

.sessao-form h3 {
    font-size: 16px;
    color: var(--texto-escuro);
    margin-bottom: 20px;
}

.grupo-input {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    width: 100%;
}

.grupo-input label {
    font-size: 14px;
    font-weight: bold;
    color: var(--texto-escuro);
    margin-bottom: 5px;
}

.grupo-input input, .grupo-input select, .grupo-input textarea {
    padding: 12px;
    border: 1px solid var(--cinza-claro);
    border-radius: 5px;
    font-size: 15px;
    color: #333;
    outline: none;
}

.grupo-input input:focus, .grupo-input select:focus {
    border-color: var(--verde-claro);
}

.linha-dupla {
    display: flex;
    gap: 20px;
}

.grupo-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.grupo-checkbox label {
    font-size: 13px;
    color: #555;
}

.btn-cadastrar-igreja {
    background-color: var(--verde-claro);
    color: var(--branco);
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-cadastrar-igreja:hover {
    background-color: #146c43;
}

.link-login {
    text-align: center;
    margin-top: 15px;
}

.link-login a {
    color: var(--verde-escuro);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

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

/* =========================================
   PÁGINAS DE LOGIN E LOGIN ADMIN
   ========================================= */
.main-login {
    background-color: #f4f6f9;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.container-login {
    background-color: var(--branco);
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.cabecalho-login {
    text-align: center;
    margin-bottom: 20px;
}

.cabecalho-login h2 {
    color: var(--verde-escuro);
    margin: 0;
    margin-bottom: 5px;
    font-size: 24px;
}

.cabecalho-login p {
    color: #666;
    font-size: 14px;
}

.btn-entrar {
    background-color: var(--verde-claro);
    color: var(--branco);
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
}

.btn-entrar:hover {
    background-color: #146c43;
}

.links-acesso {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    clear: both;
}

.links-acesso a {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.link-esqueceu { color: #666; display: block; margin-bottom: 10px;}
.link-esqueceu:hover { color: var(--verde-escuro); text-decoration: underline; }
.link-cadastrar { display: inline-block; color: var(--verde-escuro); }
.link-cadastrar:hover { color: var(--verde-claro); text-decoration: underline; }

/* --- APENAS REGRAS PARA O LOGIN/CADASTRO ADMIN --- */
.container-admin form label {
    display: block !important;
    margin-top: 15px !important;
    font-weight: bold !important;
    color: #333 !important;
}

.container-admin form input {
    display: block !important;
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

.container-admin form button {
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding: 12px !important;
    background-color: var(--verde-escuro) !important; 
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: bold !important;
}

/* =========================================
   PÁGINA SOBRE NÓS
   ========================================= */
.sobre-hero {
    background-color: var(--branco); /* Fundo alterado para branco */
    padding: 60px 20px;
    text-align: center;
    border-top: 3px solid var(--verde-claro); /* Mantém a linha para separar do cabeçalho */
}

.sobre-hero h2 { 
    font-size: 32px; 
    margin-bottom: 10px; 
    color: var(--verde-escuro); /* Título "Quem Somos" em verde */
}

.sobre-hero p { 
    font-size: 16px; 
    color: var(--verde-escuro); /* Subtítulo em verde */
}

.sobre-historia {
    padding: 60px 20px;
    background-color: var(--branco);
    display: flex;
    justify-content: center;
}

.container-texto {
    max-width: 800px;
    text-align: center;
}

.container-texto h3 {
    color: var(--verde-escuro);
    font-size: 24px;
    margin-bottom: 20px;
}

.container-texto p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
    font-size: 16px;
}

.sobre-mvv {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 0 50px 80px 50px;
    background-color: var(--branco);
}

.card-mvv {
    background-color: var(--cinza-claro);
    padding: 30px;
    border-radius: 8px;
    width: 30%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    border-top: 4px solid var(--verde-claro);
}

.card-mvv h4 { color: var(--verde-escuro); margin-bottom: 15px; font-size: 18px; }
.card-mvv p { font-size: 14px; color: #444; line-height: 1.6; }

/* =========================================
   PÁGINA COMO FUNCIONA
   ========================================= */
.cf-hero {
    background-color: var(--branco); /* Fundo alterado para branco */
    padding: 60px 20px;
    text-align: center;
    border-top: 3px solid var(--verde-claro); /* Mantém a linha divisória verde clara */
}

.cf-hero h2 { 
    font-size: 32px; 
    margin-bottom: 10px; 
    color: var(--verde-escuro); /* Título em verde escuro */
}

.cf-hero p { 
    font-size: 16px; 
    color: var(--verde-escuro); /* Subtítulo em verde escuro */
    max-width: 600px; 
    margin: 0 auto; 
}

.cf-passos {
    background-color: #f9f9f9;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.container-passos {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.item-passo {
    display: flex;
    align-items: flex-start;
    background-color: var(--branco);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-left: 5px solid var(--verde-claro);
}

.numero-passo {
    background-color: var(--verde-escuro);
    color: var(--branco);
    font-size: 24px;
    font-weight: bold;
    min-width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 25px;
    flex-shrink: 0;
}

.conteudo-passo h3 { color: var(--verde-escuro); font-size: 20px; margin-bottom: 10px; margin-top: 5px; }
.conteudo-passo p { color: #555; font-size: 15px; line-height: 1.6; }

.cf-cta {
    text-align: center;
    padding: 60px 20px;
    background-color: var(--branco);
}

.cf-cta h3 { color: var(--verde-escuro); font-size: 24px; margin-bottom: 25px; }

/* =========================================
   PAINEL ADMINISTRATIVO (GERAL E MAPA)
   ========================================= */
.body-admin { background-color: #eef2f7; }

.header-admin { background-color: var(--verde-escuro); }
.header-admin .logo, .header-admin nav ul li a, .bem-vindo { color: var(--branco); }
.header-admin nav ul li a:hover { color: var(--cinza-claro); }

.btn-logout {
    background-color: #d9534f;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: bold;
}
.btn-logout:hover { background-color: #c9302c; color: var(--branco) !important; }

.main-painel { padding: 40px 50px; }
.titulo-painel { margin-bottom: 30px; }
.titulo-painel h2 { color: var(--verde-escuro); font-size: 28px; margin-bottom: 5px; }
.titulo-painel p { color: #666; }

.kpis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.kpi-card {
    background-color: var(--branco);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-left: 5px solid var(--verde-escuro);
}

.kpi-titulo {
    font-size: 14px;
    color: #666;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.kpi-valor { font-size: 32px; font-weight: bold; color: var(--texto-escuro); }
.text-verde { color: #28a745; }
.text-laranja { color: #f0ad4e; }
.text-azul { color: var(--verde-claro); } 

.dashboard-duplo {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.card-admin {
    background-color: var(--branco);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.card-admin h3 {
    color: var(--verde-escuro);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--cinza-claro);
    padding-bottom: 10px;
    font-size: 18px;
}

.mapa-rs { flex: 1; display: flex; flex-direction: column; }
.tabela-rs { flex: 2; }

.table-responsive { overflow-x: auto; }
.tabela-dados { width: 100%; border-collapse: collapse; }
.tabela-dados th, .tabela-dados td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; }
.tabela-dados th { background-color: #f8f9fa; color: var(--verde-escuro); font-size: 14px; }
.tabela-dados td { font-size: 14px; color: #444; }

.badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: var(--branco);
}
.pendente { background-color: #f0ad4e; }
.aprovado { background-color: #28a745; }

.btn-acao {
    background-color: var(--verde-claro);
    color: var(--branco);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}
.btn-acao:hover { background-color: var(--verde-escuro); }

/* --- MENSAGENS DE ALERTA (LOGIN E CADASTRO) --- */
.msg-alerta {
    padding: 12px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
}

.msg-erro {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.msg-sucesso {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Centralizando o cabeçalho do Admin */
.alerta-restrito {
    text-align: center;
    font-size: 14px; 
    margin-bottom: 5px;
}

/* No elemento PAI da sua div */
.container-pai {
    display: flex;
    justify-content: center; 
    align-items: center;     
    min-height: 100vh;       
}

.banner-oracao {
    width: 100%;
    height: 400px; /* Ajuste a altura conforme necessário */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 10px; /* Opcional: deixa as bordas arredondadas */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Cria uma camada escura para o texto branco dar leitura em cima da foto */
.banner-oracao::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 50, 20, 0.6); /* Tom de verde escuro transparente */
    border-radius: 10px;
}

/* 1. Desativa a camada verde que ficava por cima da imagem */
.banner-oracao::before {
    display: none; 
}

/* 2. Garante o texto branco com uma sombra escura para dar leitura */
.conteudo-oracao h2 {
    font-size: 45px;
    margin-bottom: 20px;
    color: #FFFFFF; /* Texto 100% branco */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9); /* Sombra preta para destacar o texto da foto natural */
}

/* 3. O Botão continua verde com letras brancas */
.btn-cadastre-se {
    background-color: #198754; 
    color: #FFFFFF;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Sombrinha no botão para ele saltar na tela */
}

.btn-cadastre-se:hover {
    background-color: #0a5223; /* Verde Escuro no Hover */
}

/* Container principal dividindo em duas colunas */
.sobre-nos-split {
    display: flex;
    align-items: center; /* Centraliza verticalmente o texto e a imagem */
    justify-content: space-between;
    padding: 60px 50px;
    gap: 40px; /* Dá um respiro/espaçamento entre o texto e a foto */
    background-color: #ffffff; 
}

/* Coluna do texto */
.sobre-texto {
    flex: 1; /* Ocupa 50% do espaço */
    text-align: justify; /* Deixa o texto alinhado nas bordas */
}

.sobre-texto h2 {
    color: #0a5223; /* A cor verde padrão do seu projeto */
    font-size: 36px;
    margin-bottom: 20px;
}

.sobre-texto p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333;
}

/* Coluna da imagem */
.sobre-imagem {
    flex: 1; /* Ocupa os outros 50% do espaço */
    text-align: center;
}

.sobre-imagem img {
    max-width: 100%;
    height: auto;
    border-radius: 15px; /* Bordas arredondadas profissionais */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* Sombra para dar profundidade */
}

/* --- ESTILO DO LINK ESQUECI A SENHA --- */
.link-esqueci-senha {
    display: inline-block;
    margin-top: 15px;
    color: #6c757d; /* Um cinza moderno e discreto */
    text-decoration: none; /* Remove aquele sublinhado azul feio */
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease; /* Deixa as animações suaves */
}

/* O que acontece quando o mouse passa por cima: */
.link-esqueci-senha:hover {
    color: #198754; /* Acende no verde principal do sistema */
    text-decoration: underline; /* Coloca um sublinhado elegante */
    transform: translateY(-2px); /* Dá um pulinho muito sutil para cima */
}

/* Responsividade: Se abrir no celular, o texto vai para cima e a imagem para baixo */
@media (max-width: 768px) {
    .sobre-nos-split {
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
    }
    
    .sobre-texto {
        text-align: center; /* Centraliza o texto no celular */
    }

    .sobre-imagem {
        margin-top: 30px;
    }
}

/* =========================================
   BLOCO ÚNICO DE RESPONSIVIDADE (MOBILE)
   ========================================= */
@media (max-width: 768px) {
    /* Geral / Header / Footer */
    header { flex-direction: column; padding: 20px; gap: 15px; text-align: center; }
    nav ul { flex-wrap: wrap; justify-content: center; gap: 15px; }
    footer { flex-direction: column; text-align: center; gap: 20px; padding: 30px 20px; }
    footer div { display: flex; flex-direction: column; gap: 10px; }
    footer a { margin-right: 0; }

    /* Home */
    .hero { flex-direction: column; text-align: center; }
    .hero-texto { padding-right: 0; margin-bottom: 30px; }
    .hero h1 { font-size: 28px; }
    .beneficios { flex-direction: column; padding: 40px 20px; gap: 20px; }
    .card { width: 100%; }
    .processo { padding: 40px 20px; }
    .passos { flex-direction: column; gap: 30px; }
    .passo { width: 100%; }

    /* Outras Páginas (Cadastro, Sobre, etc) */
    .linha-dupla { flex-direction: column; gap: 0; }
    .sobre-mvv { flex-direction: column; padding: 0 20px 40px 20px; gap: 20px; }
    .card-mvv { width: 100%; }
    .item-passo { flex-direction: column; align-items: center; text-align: center; padding: 20px; border-left: none; border-top: 5px solid var(--verde-claro); }
    .numero-passo { margin-right: 0; margin-bottom: 15px; }

    /* Painel Admin */
    .main-painel { padding: 20px; }
    .kpis-grid { grid-template-columns: 1fr; gap: 15px; }
    .header-admin nav ul li:not(:last-child) { display: none; }
    .dashboard-duplo { flex-direction: column; }
    .mapa-rs, .tabela-rs { width: 100%; }
}