/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Corpo da página */
body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #ffffff; /* Fundo branco */
    color: #333; /* Cor de texto padrão */
    
}

/* Container principal com limite de largura */
/* Container pai para criar a sombra */
#widescreen-wrapper {
    display: flex;
    justify-content: center;  
    min-height: 100vh; /* Garante que a sombra vá até o final da tela */
}

/* Container principal com limite de largura */
#widescreen-container {
    width: 100%;
    max-width: 600px; /* Defina a largura máxima para centralizar */
    padding: 20px;
    background-color: #ffffff; /* Fundo branco */
    box-shadow: 10px 0 15px rgba(0, 0, 0, 0.1), -10px 0 15px rgba(0, 0, 0, 0.1); /* Sombra apenas nas laterais */
}

/* Estilo do header */
header {
    width: 100%; /* Ocupa toda a largura do container pai */
    max-width: 600px; /* Não ultrapassa o limite do widescreen */
    position: fixed; /* Fixa o header no topo da página */
    top: 0; /* Posiciona o header no topo */
    left: 50%; /* Posiciona ao centro horizontalmente */
    transform: translateX(-50%); /* Centraliza o header completamente */
    height: 60px; /* Altura ajustada */
    background-color: #ffffff; /* Cor de fundo suave */
   
    display: flex;
    justify-content: space-between; /* Espaça o título e o ícone */
    align-items: center; /* Centraliza verticalmente */
    box-shadow: 0 1px 5px rgb(0 0 0 / 4%) !important; /* Sombra sutil na parte inferior */
    z-index: 1000; /* Garante que o header fique acima de outros elementos */
}

/* Estilo para o título */
header h1 {
    font-size: 1.2rem; /* Tamanho da fonte ligeiramente menor */
    margin: 0; /* Remove margem padrão */
    font-weight: 600; /* Negrito */
    color: #333; /* Cor do texto */
}

/* Estilo para o ícone */
header i {
    color: #666; /* Cor do ícone */
    cursor: pointer; /* Muda o cursor para indicar interatividade */
    font-size: 1.2rem;
}
.bell-icon::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
   
}


/* Navbar fixa e centralizada */
.navbar {
    background-color: #ffffff; /* Fundo branco */
    border-top: 1px solid #ddd; /* Linha superior sutil */
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 600px; /* Mesma largura máxima que o container */
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    display: flex;
    justify-content: space-between; /* Centraliza e distribui os itens */
    align-items: center;
    padding: 5px 0;
    z-index: 100001;
}

/* Estilização dos links da navbar */
.navbar a {
    color: #6b6b6b; /* Cor dos links */
    text-decoration: none;
    text-align: center;
    flex: 1; /* Cada link ocupa o mesmo espaço */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Ícones da navbar */
.navbar i {
    font-size: 24px; /* Tamanho dos ícones */
    margin-bottom: -5px; /* Espaço entre ícone e texto */
}
/* Estilo para o link ativo */
.navbar .nav-link.active {
    color: #e29385; /* Cor do link ativo */
    font-weight: bold; /* Destaca o link ativo */
}

/* Estilo para o ícone no link ativo */
.navbar .nav-link.active i {
    color: #e29385; /* Cor do ícone ativo */
}

/* Texto da navbar */
.navbar a span {
    font-size: 12px; /* Ajuste de tamanho do texto */
}

/* Hover para os links */
.navbar a:hover {
    color: #000; /* Destaque leve ao passar o mouse */
}

/* Títulos e textos */
h1, h2, h3, p {
    margin-bottom: 15px;
    text-align: center; /* Centraliza o texto */
}

/* Responsividade */
@media (max-width: 600px) {
    #widescreen-container {
        padding: 10px;
    }

    .navbar {
        height: 60px; /* Ajuste a altura conforme necessário */
    }

    .navbar i {
        font-size: 20px; /* Reduz o tamanho dos ícones em telas menores */
    }
}