/* ==========================================================================
   Estilos Adicionais (Adicionar ao final do arquivo)
   ========================================================================== */

/* ----------------------------------
   Botões do Header Principal
   ---------------------------------- */
.main-header .main-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Espaçamento entre os botões */
}

.main-header .btn-nav {
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--raio-borda);
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Estilo padrão (Minha Conta, Login, etc) */
.main-header .btn-nav {
    background-color: var(--cor-fundo);
    color: var(--cor-texto-suave);
    border-color: var(--cor-borda);
}
.main-header .btn-nav:hover {
    background-color: #e9ecef;
    color: var(--cor-texto);
}

/* Botão Primário (CTA - Call to Action) */
.main-header .btn-nav.btn-nav-primary {
    background-color: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}
.main-header .btn-nav.btn-nav-primary:hover {
    background-color: var(--cor-primaria-hover);
    border-color: var(--cor-primaria-hover);
}

/* Botão Secundário (Sair) */
.main-header .btn-nav.btn-nav-secondary {
    background-color: transparent;
    color: var(--cor-texto-suave);
    border-color: transparent;
}
.main-header .btn-nav.btn-nav-secondary:hover {
    background-color: #f8d7da; /* Fundo vermelho claro */
    color: #721c24; /* Texto vermelho escuro */
    border-color: transparent;
}

/* ==========================================================================
   Estilos Adicionais (Adicionar ao final do arquivo)
   ========================================================================== */

/* ----------------------------------
   Estilo dos Botões do Menu Lateral (SEÇÃO CORRIGIDA)
   ---------------------------------- */

/* NOVO: Controla o alinhamento dos links na barra lateral */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os links à esquerda */
    gap: 0.5rem; /* Espaço entre os links */
}

.sidebar-nav a {
    display: inline-flex; /* FAZ O LINK TER O TAMANHO DO CONTEÚDO */
    align-items: center;
    gap: 12px; /* Espaço entre o ícone e o texto */
    font-size: 1rem;
    font-weight: 500;
    color: #495057;
    padding: 10px 15px; /* Define um preenchimento interno */
    border-radius: var(--raio-borda); /* Arredonda as bordas */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-nav a svg {
    transition: stroke 0.2s ease;
}

/* Efeito Hover */
.sidebar-nav a:hover {
    background-color: #f8f9fa;
    color: var(--cor-primaria);
}

/* Estilo do Botão Ativo (Agora a barra azul terá o tamanho correto) */
.sidebar-nav a.active {
    background-color: var(--cor-primaria);
    color: #fff;
}

.sidebar-nav a.active svg {
    stroke: #fff; /* Ícone fica branco no botão ativo */
}
/* ==========================================================================
   Estilos da Notificação de Dispositivo (SEÇÃO CORRIGIDA)
   ========================================================================== */

.sidebar-nav a {
    position: relative; 
}

.notification-badge {
    /* REMOVIDO o posicionamento absoluto que causava o problema */
    margin-left: 8px; /* ADICIONADO para dar um espaço do texto */
    background-color: var(--cor-perigo);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0; /* Impede que a bolinha seja esmagada */
}