/* style.css - Estilos personalizados para o sistema (Estilo Facebook Vibrante) */

body {
    font-family: 'Inter', sans-serif; /* Usando Inter como a fonte principal */
    background-color: #f0f2f5; /* Cor de fundo clara, similar ao Facebook */
    color: #1c1e21; /* Cor de texto padrão do Facebook */
}

/* Estilo para cards e formulários */
.card {
    border-radius: 0.75rem; /* Bordas arredondadas */
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra mais visível e suave */
}

.card-header {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    border-bottom: 1px solid #dadde1; /* Borda sutil */
    background-color: #FFFFFF; /* Fundo branco para cabeçalhos de card */
}

/* Estilos para botões com bordas arredondadas e sombra vibrante */
.btn {
    border-radius: 0.6rem; /* Bordas arredondadas para botões */
    transition: all 0.3s ease-in-out; /* Transição mais suave */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Sombra mais visível */
    font-weight: 600; /* Levemente mais bold */
    letter-spacing: 0.5px; /* Espaçamento para as letras */
    text-transform: uppercase; /* Texto em maiúsculas */
    border: none; /* Mantido para flexibilidade */
    color: #fff;
}

.btn:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.25); /* Sombra mais pronunciada ao passar o mouse */
    transform: translateY(-2px); /* Leve efeito de "levantar" */
}

/* Cores e Estilos inspiradas no Facebook */
.bg-facebook-blue { background-color: #1877f2 !important; } /* Azul primário do Facebook */
.bg-facebook-light { background-color: #f0f2f5 !important; } /* Cor de fundo principal */
.bg-facebook-dark { background-color: #1c1e21 !important; } /* Cor de texto padrão Facebook */

.btn-facebook-primary {
    background-color: #1877f2 !important; /* Azul primário do Facebook para botões */
    color: #fff !important;
}
.btn-facebook-secondary {
    background-color: #ffffff !important; /* Fundo branco para contraste */
    color: #1877f2 !important; /* Texto azul forte */
    border: 1px solid #1877f2; /* Borda azul forte */
}
.btn-facebook-green {
    background-color: #42b72a !important; /* Verde do Facebook para ações como "entrar" */
    color: #fff !important;
}

.text-facebook-blue { color: #1877f2 !important; }
.text-facebook-dark { color: #1c1e21 !important; }
.text-white { color: #fff !important; }


/* Adicionando sombra vibrante ao texto do título (estilo Facebook) */
.h1-vibrant-shadow {
    text-shadow: 2px 2px 5px rgba(24, 119, 242, 0.5), -2px -2px 5px rgba(66, 183, 42, 0.3); /* Sombra azul e verde */
    color: #1877f2; /* Cor direta para o texto principal */
}

/* Estilo para links */
a {
    text-decoration: none;
    color: #1877f2; /* Azul link do Facebook */
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
    color: #0d6efd;
}

/* Estilos para o carrossel de banners */
.carousel-item img {
    height: 350px; /* Altura fixa para as imagens do carrossel */
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
}
/* Estilo para a sombra vibrante do carrossel (estilo Facebook) */
.carousel-vibrant-shadow {
    box-shadow: 0 8px 16px rgba(24, 119, 242, 0.3), 0 0 20px rgba(66, 183, 42, 0.5); /* Sombra azul e verde */
    border: 1px solid #e6e6e6;
}

/* Outros estilos existentes */
.table {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #dadde1;
}

.table thead th {
    background-color: #f0f2f5;
    border-bottom: 2px solid #dadde1;
    color: #1c1e21;
}

.table tbody tr:hover {
    background-color: #e4e6eb;
}

.badge {
    padding: 0.5em 0.75em;
    border-radius: 0.375rem;
    font-size: 0.85em;
}

main {
    padding-top: 20px;
    padding-bottom: 20px;
}

html, body {
    height: 100%;
}
#root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.flex-grow-1 {
    flex-grow: 1;
}

/* Estilos para o rodapé profissional com fundo AZUL FORTE e TEXTO BRANCO */
.professional-footer {
    background-color: #000080 !important; /* Azul Marinho (um azul muito forte!) */
    color: #ffffff !important; /* Texto BRANCO para alto contraste */
    padding: 3rem 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4); /* Sombra mais pronunciada */
}

.professional-footer h5 {
    color: #ffffff !important; /* Títulos em BRANCO */
    margin-bottom: 1.5rem;
    font-weight: 700;
    position: relative;
    padding-bottom: 0.5rem;
}

.professional-footer h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: #007bff; /* Azul vibrante para linha de destaque */
    border-radius: 2px;
}
.professional-footer .text-muted-light {
    color: #e0f2ff !important; /* Azul muito claro, quase branco, para textos informativos */
}

.professional-footer p, .professional-footer a {
    color: #e0f2ff !important; /* Cor de texto padrão do footer em azul muito claro */
    text-decoration: none;
    transition: color 0.3s ease;
}

.professional-footer a:hover {
    color: #ffffff !important; /* Branco no hover para contraste */
    text-decoration: underline;
}

.professional-footer .social-icons a {
    color: #ffffff !important; /* Ícones sociais em BRANCO */
    font-size: 1.8rem;
    margin-right: 20px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.professional-footer .social-icons a:hover {
    color: #007bff !important; /* Azul vibrante no hover (estilo Facebook) */
    transform: translateY(-3px) scale(1.1);
}

@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .card {
        margin: 10px;
    }
    .btn-lg {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
    .carousel-item img {
        height: 200px;
    }
    .professional-footer .footer-section {
        text-align: center;
        margin-bottom: 2rem;
    }
    .professional-footer .footer-section h5::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .professional-footer .social-icons {
        justify-content: center;
    }
}