/* frontend_simples/css/style.css */

/* Cores de fundo para cabeçalho e rodapé */
.header-bg {
    background: linear-gradient(to right, #1E3A8A, #64b5f8); /* Verde escuro */
}
.footer-bg {
    background: linear-gradient(to right, #64b5f8, #1E3A8A); 
}

/* Tamanho das logos */
.logo-header {
    height: 80px; /* Ajuste conforme a imagem real */
    width: auto;
}
.logo-footer {
    height: 100px; /* Ajuste conforme a imagem real */
    width: auto;
    opacity: 0.8; /* Para dar um efeito mais suave no rodapé */
}

/* Estilos para os cards de manifestação (botões) */
.manifestation-card {
    min-height: 120px; /* Altura mínima para os botões */
    font-size: 1.2rem;
    font-weight: bold;
    display: flex; /* Para centralizar o texto verticalmente */
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 0.5rem; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.manifestation-card:hover {
    transform: translateY(-5px); /* Efeito de levantar */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra mais forte no hover */
}

/* Cores dos botões de manifestação (inspirado no Bootstrap e nos prints) */
.btn-elogio { background-color: #28a745; border-color: #28a745; color: white;}
.btn-sugestao { background-color: #007bff; border-color: #007bff; color: white;}
.btn-solicitacao { background-color: #fd7e14; border-color: #fd7e14; color: white;}
.btn-reclamacao { background-color: #ffc107; border-color: #ffc107; color: #343a40;} /* Texto escuro para contraste */
.btn-denuncia { background-color: #dc3545; border-color: #dc3545; color: white;}
.btn-acesso { background-color: #6c757d; border-color: #6c757d; color: white;} /* Cinza para "Acesso à Informação" */

/* Ajustes de tipografia e links */
.text-xsmall { font-size: 0.75rem; }
.small-link { font-size: 0.85rem; } /* Links menores no cabeçalho/rodapé */
.small-link:hover { opacity: 1 !important; } /* Garante hover no link */

/* Classes de texto do Bootstrap para usar */
.text-secondary { color: #6c757d !important; } /* Cinza mais escuro para títulos e textos */
.text-muted { color: #6c757d !important; } /* Para parágrafos, um cinza mais claro */

/* Centraliza os botões de consulta e dá um espaçamento */
.space-x-3 > .btn {
    margin-right: 1rem;
    margin-left: 0;
}
.space-x-3 > .btn:last-child {
    margin-right: 0;
}


/* Responsividade básica (Bootstrap já faz muito, mas pode refinar aqui) */
@media (max-width: 768px) {
    .logo-header {
        height: 60px; /* Reduz logo em telas menores */
    }
    .logo-footer {
        height: 80px;
    }
    .manifestation-card {
        font-size: 1rem;
        min-height: 100px;
    }
    .btn-lg {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
}

/* Modal mais “clean” */
#declaracaoModal .modal-content {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,.15);
}
#declaracaoModal .modal-title {
  font-weight: 700;
}
#declaracaoModal .bg-light {
  background: #f8fafc !important;
}