/* styles.css */
body {
    background-color: #2c3e50; /* Cor de fundo do body */
    font-family: 'Arial', sans-serif; /* Fonte padrão */
    margin: 0;
    padding-top: 20px;
    color: white; /* Cor do texto */
}

.container-fluid {
    background-color: #2c3e50; /* Cor de fundo para o container principal */
    padding: 20px; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    margin-top: 20px; /* Espaçamento superior */
}

.navbar {
    background-color: #222; /* Barra de navegação mais escura */
    border-bottom: 2px solid #444; /* Borda inferior */
}

#sidebar {
    min-height: 100vh; /* Altura completa da viewport */
    background-color: #2c3e50 !important; /* Cor de fundo da barra lateral */
    color: white; /* Cor do texto */
    border-right: 1px solid #444; /* Linha divisória sutil no lado direito */
    padding: 15px; /* Espaçamento interno */
    width: 250px; /* Largura fixa para manter a consistência */
}

#sidebar .nav-link {
    color: white !important; /* Cor dos links */
    background-color: transparent !important; /* Fundo transparente */
    margin: 10px 0;
    padding: 10px;
    display: block; /* Torna toda a área clicável */
    border-radius: 5px; /* Bordas arredondadas para os links */
}

#sidebar .nav-link:hover, #sidebar .nav-link.active {
    color: #fff;
    background-color: #34495e !important; /* Fundo mais escuro para itens ativos ou ao passar o mouse */
}

.main-content {
    background-color: #333; /* Fundo para o conteúdo principal */
    padding: 20px; /* Espaçamento interno */
}

.card {
    background-color: #222; /* Fundo dos cartões */
    color: #ddd; /* Cor do texto nos cartões */
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Sombra para profundidade */
}

.card-body {
    position: relative;
}

.btn-primary {
    background-color: #007bff;
    border-color: #0056b3;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #bd2130;
}

.img-fluid {
    border-radius: 8px; /* Bordas arredondadas para as imagens */
}

@media (max-width: 768px) {
    #sidebar {
        min-height: auto;
        width: 100%; /* Ajuste para dispositivos móveis */
    }
}

/* Adiciona espaçamento abaixo de cada cartão de app */
.card {
    margin-bottom: 20px;  /* Aumenta o espaço abaixo de cada cartão */
}

/* Estilos aprimorados para o botão do WhatsApp */
.whatsapp-btn {
    background-color: #25D366;  /* Cor verde característica do WhatsApp */
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;  /* Bordas arredondadas */
    display: inline-block;  /* Garante que o botão mantenha sua forma */
    margin-top: 10px;  /* Espaço acima do botão para separação clara do texto */
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);  /* Sombra leve para um efeito 3D sutil */
    transition: background-color 0.3s;  /* Transição suave de cor ao passar o mouse */
}

/* Mudança de cor ao passar o mouse para um tom mais escuro de verde */
.whatsapp-btn:hover {
    background-color: #128C7E;
}

.img-fit {
    width: 100%; /* Ajusta a largura ao contêiner pai */
    height: auto; /* Mantém a proporção da imagem */
    max-width: 400px; /* Limite de largura máxima */
    max-height: 300px; /* Limite de altura máxima */
    display: block; /* Centraliza a imagem na coluna */
    margin: 0 auto; /* Centraliza a imagem horizontalmente */
}.navbar-toggler {
    background-color: #2c3e50; /* Cor de fundo igual à barra lateral */
    border-color: #34495e; /* Cor da borda para destacar o botão */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); /* Ícone branco com transparência ajustável */
}

/* Estilos adicionais para melhorar a visibilidade e interatividade */
.navbar-toggler:hover,
.navbar-toggler:focus {
    background-color: #34495e; /* Cor de fundo mais escura ao passar o mouse ou focar */
}

/* Garantir visibilidade em telas pequenas */
@media (max-width: 768px) {
    #sidebar {
        min-height: auto;
        width: 100%; /* Ajuste para dispositivos móveis */
        background-color: #2c3e50; /* Cor de fundo para a barra lateral em modo móvel */
    }
}
/* styles.css */
.login-body {
    background-color: #2c3e50; /* Cor de fundo do body para a página de login */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color:#000000;
}

.login-container {
    background-color: #fff; /* ou qualquer cor desejada */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 400px;
    margin: 50px auto; /* Centraliza vertical e horizontalmente */
}
.login-logo {
    display: block;
    max-width: 200px; /* Ajuste a largura conforme necessário */
    height: auto;
    margin: 0 auto 20px; /* Centraliza horizontalmente e adiciona margem abaixo */
}