/* TOPO AZUL ESCURO COM LINKS */
#main-header {
    width: 100%;
    z-index: 1000; /* Garante que o header fique acima de todo o conteúdo */
    top: 0;        /* Essencial para 'position: sticky' funcionar */
    position: sticky; /* Faz o elemento se comportar como 'relative' até atingir o 'top' */
    background-color: #fff; /* Fundo branco para garantir que cubra o conteúdo ao rolar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para destacar a separação ao rolar */
}

.topbar {
    background-color: #003b5c;
    color: #fff;
    font-size: 13px;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-left,
.topbar-right {
    display: flex;
    gap: 10px;
}

.topbar a {
    color: #ffffff;
    text-decoration: none;
}

.topbar a:hover {
    text-decoration: underline;
}

/* Centralizar logo e título */
.logo-container {
    background-color: #ffffff;
    text-align: center;
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
}

.logo-container img {
    height: 60px;
    margin-bottom: 10px;
}

.logo-container h1 {
    font-size: 22px;
    color: #0f3554;
    margin-top: 0;
}

/* Formulário de CPF */
#banner {
    background-color: #fff;
    color: #003b5c;
    text-align: center;
    padding: 60px 20px;
}

#banner h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

#banner p {
    font-size: 18px;
    margin-bottom: 20px;
}

#cpf-form {
    margin-top: 20px;
}

#cpf-form input {
    padding: 10px;
    font-size: 16px;
    width: 260px;
    border: 1px solid #000000;
    border-radius: 5px;
    margin-right: 10px;
}

#cpf-form button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #1c6ea4;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#cpf-form button:hover {
    background-color: #145b8a;
}


/* BARRA COM LOGO E TÍTULO */
.header-main {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e6e6e6;
}



.header-title {
    font-size: 20px;
    color: #0f3554;
    font-weight: bold;
}

/* MENU DE NAVEGAÇÃO PRINCIPAL */
.navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.navbar ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.navbar li {
    margin: 0 15px;
}

.navbar a {
    display: block;
    padding: 15px 10px;
    text-decoration: none;
    color: #0f3554;
    font-weight: 500;
}

.navbar a:hover {
    background-color: #f0f4f8;
}

/* Importação de fonte e reset básico (opcional) */
/* @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'); */

:root {
    --dark-blue: #063750; /* Fundo Principal */
    --accent-blue: #1A7B9F; /* Botões e Destaque */
    --text-color: #ffffff;
    --sic-color: #FFCC00; /* Amarelo SIC */
}

/* Container principal para o footer e o botão de acesso rápido */
.footer-container {
	padding: 10px;
    position: relative;
    /* Ajuste de margem/padding conforme necessário */
}

/* Estilo do botão "Acesso Rápido" (centralizado acima do footer) */
.acesso-rapido-btn {
    display: block;
    width: 200px;
    margin: 0 auto; /* Centraliza */
    padding: 10px 20px;
    background-color: var(--accent-blue);
    color: var(--text-color);
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    position: relative;
    top: 1px; /* Ajuste para sobrepor a linha, se houver */
    z-index: 10;
}

.acesso-rapido-btn i {
    margin-left: 8px;
}

/* Estilo do Rodapé Principal */
.main-footer {
    background-color: var(--dark-blue);
    color: var(--text-color);
    padding: 40px 20px;
    font-family: Arial, sans-serif; /* Ajuste a fonte conforme o original */
}

.footer-content-wrapper {
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Distribui as colunas */
    gap: 40px;
    flex-wrap: wrap; /* Para responsividade */
}

.footer-section {
    display: flex;
    flex-direction: column;
    /* Define larguras aproximadas baseadas na imagem */
}

.nossos-canais-politicas {
    flex-basis: 30%; /* Exemplo */
    min-width: 250px;
}

.endereco-telefones {
    flex-basis: 60%; /* Exemplo */
    min-width: 400px;
    display: flex;
    gap: 40px;
}

.endereco, .telefones {
    flex-basis: 50%;
}


.section-title {
    color: var(--text-color);
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Estilo dos Ícones Sociais */
.social-icons a {
    color: var(--text-color);
    font-size: 24px;
    margin-right: 15px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--accent-blue); /* Efeito hover */
}

/* Estilo dos Links de Política */
.policies {
    margin-top: 50px; /* Espaçamento da seção de Canais */
    display: flex;
    gap: 30px;
}

.policy-link {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9em;
    display: flex;
    align-items: center;
}

.policy-link i {
    margin-right: 8px;
}

/* Estilo da seção de Endereço */
.address-links a {
    color: var(--text-color);
    text-decoration: none;
    margin-right: 20px;
    display: inline-flex;
    align-items: center;
    font-size: 0.9em;
}

.address-links i {
    margin-right: 5px;
}

/* Estilo da seção de Telefones */
.telefones > div:first-child {
    margin-bottom: 25px; /* Separa Informações Gerais do SIC */
}

.telefones p {
    margin: 5px 0;
}

/* Estilo da Seção SIC/Ouvidoria */
.sic-ouvidoria {
    background: rgba(0, 0, 0, 0.1); /* Um leve fundo para destacar, se desejar */
    padding: 10px;
    border-radius: 5px;
}

.sic-title-icon {
    color: var(--sic-color);
    font-weight: bold;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.sic-icon {
    background-color: var(--sic-color);
    color: var(--dark-blue); /* Ícone no fundo amarelo */
    padding: 5px;
    border-radius: 50%;
    font-size: 16px;
    margin-right: 8px;
}

.ouvidoria-number {
    font-size: 1.1em;
    margin-top: 5px;
}

/* Estilo do Botão "Avalie" (flutuante no canto inferior direito) */
.avalie-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--accent-blue);
    color: var(--text-color);
    padding: 10px 15px;
    border-radius: 5px 0 0 5px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 100;
    /* Baseado no estilo da imagem, que parece ter um formato diferente, mas fixed é o mais comum */
}

.avalie-btn i {
    margin-right: 8px;
}


.results-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
}

.results-title {
    color: #003b5c;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
    border-bottom: 2px solid #1c6ea4;
    padding-bottom: 10px;
}

.process-card {
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-left: 5px solid #1c6ea4; /* Borda azul de destaque */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


.process-card h3 {
    color: #0f3554;
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 15px;
}

.process-card p {
    margin: 5px 0;
    line-height: 1.5;
    color: #333;
}

.process-detail {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9em;
}

.detail-item {
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #ddd;
}

.detail-item1 {
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #65d06b;
    border: 1px solid #ddd;
}

.status-sim {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
    font-weight: bold;
}

.status-no {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.no-results-message, .error-message {
    text-align: center;
    padding: 20px;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    border-radius: 5px;
}
/* Estilo para os botões de ação nos cards de processo */
.process-actions {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    text-align: right;
}

.btn-decisao {
    background-color: #1A7B9F; /* O azul claro do seu rodapé */
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-decisao:hover {
    background-color: #0d5f7f;
}

/* --- Novo Estilo para Alerta de Saque Pendente --- */

.alerta-saque {
    background-color: #e6f7ff;
    border: 1px solid #99d6ff;
    padding: 15px;
    margin: 10px 0 15px 0;
    border-radius: 5px;
    font-size: 1.1em;
    line-height: 1.4;
}

.alerta-saque-texto {
    margin: 0;
    color: #003b5c;
    font-weight: 500;
}

/* Estilo para o botão/link do WhatsApp */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    background-color: #25D366; /* Cor oficial do WhatsApp */
    color: white;
    padding: 8px 12px;
    margin-left: 10px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.whatsapp-btn:hover {
    background-color: #128C7E;
    text-decoration: none;
}

.whatsapp-btn i {
    margin-right: 8px;
}
/* Responsividade básica - Ajustar para telas menores */
@media (max-width: 900px) {
    .footer-content-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .endereco-telefones {
        flex-direction: column;
        gap: 20px;
    }

    .nossos-canais-politicas, .endereco-telefones, .endereco, .telefones {
        flex-basis: 100%;
        min-width: auto;
    }
    
    .policies {
        margin-top: 20px;
    }
}




/* RESPONSIVO */
/* --- Ajustes para Mobile (Ocultar Menu e Navbar) --- */

@media (max-width: 768px) {
    /* 1. Ocultar o menu de navegação principal */
    .navbar {
        display: none;
    }

    /* 2. Ajustar o espaçamento do topo para compensar a barra superior (topbar) */
    .topbar {
        padding: 5px 10px; /* Reduz o padding lateral na barra de topo */
    }
    
    .topbar-left, .topbar-right {
        /* Se o topbar estiver muito longo, talvez seja necessário quebrar os links */
        flex-wrap: wrap; 
        font-size: 11px;
    }

    /* 3. Ajustar o tamanho do logo em telas menores */
    .logo-container img {
        height: 40px; /* Reduz a altura do logo */
    }
    
    /* 4. Garantir que a área de consulta fique visível */
    #banner {
        padding: 20px 10px;
    }
}