:root {
    --cor-primaria: #4CAF50;   
    --cor-secundaria: #2E7D32; 
    --cor-fundo: #FFFFFF;
    --cor-fundo-alt: #F4F8F4;
    --cor-texto: #333333;
    --cor-texto-claro: #FFFFFF;
    
    --largura-maxima: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.menu-icon {
    height: 25px;
    width: 25px;
    object-fit: contain;
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

main {
    flex: 1;  
    width: 100%;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;

    box-sizing: border-box;
}

a { text-decoration: none; transition: 0.3s; }
ul { list-style: none; }

 
    /* === CONTAINER CRAVADO NO TAMANHO DO MONITOR === */
    #sidebar-container { 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 260px; 
        height: 100vh !important; /* Trava a altura no limite exato da tela */
        max-height: 100vh !important;
        z-index: 1000; 
        background-color: #1a3c34; 
        box-shadow: 4px 0 15px rgba(0,0,0,0.1); 
        overflow: hidden; /* MÁGICA 1: Corta tudo que tentar vazar da tela */
    }
    
    /* === O MENU EM SI === */
    /* .sidebar {
        display: flex;
        flex-direction: column;
        height: 100vh;  
        overflow: hidden; 
    }
         */
    .sidebar-header { 
        flex-shrink: 0; /* Impede a logo de ser esmagada */
        padding: 10px; 
    }
    
    .sidebar-nav { 
        flex: 1;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
/*     
    .sidebar-profile { 
        flex-shrink: 0;  
        background-color: #122b25; 
        padding: 15px 20px; 
        border-top: 1px solid rgba(255,255,255,0.05); 
    } */

    .sidebar-header, 
    /* .sidebar-profile {
        flex-shrink: 0; 
    } */
    /* Customização da Barra de Rolagem (Estilo Apple) */
    .sidebar-nav::-webkit-scrollbar { width: 6px; }
    .sidebar-nav::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
    .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
    .sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
    .sidebar-nav {
    flex: 1; /* Estica para preencher o miolo */
    overflow-y: auto; /* Cria a barra de rolagem apenas aqui quando necessário */
    overflow-x: hidden;
    padding-bottom: 20px; /* Dá um respiro no final da rolagem */
    
    /* (Opcional) Deixa a barra de rolagem fininha e elegante no Firefox e Chrome */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
    /* === ESTILOS DA SANFONA (ACCORDION) === */
    .accordion-btn {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 12px 20px; background: transparent; border: none;
        color: #cbd5e1; font-size: 0.95rem; font-family: 'Plus Jakarta Sans', sans-serif;
        cursor: pointer; transition: 0.3s ease; outline: none;
    }
    .accordion-btn:hover { background-color: rgba(255, 255, 255, 0.05); color: #ffffff; }
    
    /* Botão Pai ativo (Aberto) */
    .accordion-btn.active { background-color: #122b25; color: var(--cor-primaria); border-left: 3px solid var(--cor-primaria); }
    
    .acc-left { display: flex; align-items: center; gap: 12px; font-weight: 500; }
    .acc-left i { width: 20px; text-align: center; font-size: 1.1rem; }
    
    /* Setinha que gira */
    .acc-arrow { font-size: 0.8rem; transition: transform 0.3s ease; }
    .accordion-btn.active .acc-arrow { transform: rotate(180deg); }

    /* Gaveta de conteúdo */
    /* .accordion-content {
        max-height: 0; overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        background-color: #122b25;  
    } */

    /* Ajuste visual dos botões filhos */
    /* .accordion-content .nav-item {
        padding-left: 45px; 
        font-size: 21.9rem; 
        opacity: 0.85; 
        margin: 2px 0;
        border-radius: 0;
    } */
    .accordion-content .nav-item:hover { opacity: 1; background: rgba(255,255,255,0.03); }
    .accordion-content .nav-item.active { opacity: 1; background: rgba(76, 175, 80, 0.1); border-radius: 0 20px 20px 0; width: 95%;}

    /* ======================================================== */
    /* CORREÇÃO GLOBAL: EMPURRA A PÁGINA PARA NÃO SOBREPOR      */
    /* ======================================================== */
    .main-content, .dashboard-container {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
        transition: all 0.3s ease;
    }

    /* Proteção para visualização no celular */
    @media (max-width: 992px) {
        .main-content, .dashboard-container {
            margin-left: 0 !important;
            width: 100% !important;
        }
        #sidebar-container {
            position: relative;
            width: 100%;
            height: auto;
        }
    }

    /* ======================================================== */
    /* RESPONSIVIDADE VERTICAL (NOTEBOOKS E ZOOM 125% OU 150%)  */
    /* ======================================================== */
    @media (max-height: 850px) {
        /* 1. Encolhe o cabeçalho e a logo */
        .sidebar-header { padding: 15px 20px !important; }
        .sidebar-header img { max-height: 38px; width: auto; }
        
        /* 2. Reduz os espaços e fontes dos botões principais */
        .accordion-btn, .sidebar-nav .nav-item { 
            padding: 10px 20px !important; 
            font-size: 0.85rem !important; 
        }
        .acc-left i, .sidebar-nav .nav-item i { font-size: 1rem !important; }
        
        /* 3. Aperta os sub-menus para caberem muitos itens sem scrollbar gigante */
        .accordion-content .nav-item {
            padding-top: 7px !important;
            padding-bottom: 7px !important;
            margin: 0 !important;
            font-size: 0.8rem !important;
        }

        .accordion-content .nav-item:last-child {
            margin-bottom: 5px !important;
        }

        /* 4. Títulos de separação menores */
        .nav-title { 
            margin-top: 10px !important; 
            margin-bottom: 5px !important;
            font-size: 0.7rem !important; 
        }

        /* 5. Encolhe o rodapé do Perfil e a foto */
        /* .sidebar-profile { padding: 10px 20px !important; }
        .sidebar-profile img { width: 35px; height: 35px; } */
        .profile-text .p-label { font-size: 0.65rem; }
        .profile-text .p-name { font-size: 0.8rem; }
    }

    /* ============================================================
   SIDEBAR RESPONSIVO - CORREÇÃO DE ESCALA/ZOOM (DPI-AWARE)
   Substitua ou adicione ao seu global.css a partir da linha
   que começa com "#sidebar-container {"
   ============================================================ */

 /* ======================================================== */
    /* MENU RETRÁTIL INTELIGENTE E PUXADOR VISUAL               */
    /* ======================================================== */
:root {
        --sidebar-width: 260px;
        --sidebar-mini-width: 75px; /* Largura exata para caber o ícone e a logo */
    }

    #sidebar-container { 
        position: fixed; top: 0; left: 0; bottom: 0 !important; 
        width: var(--sidebar-mini-width); /* Começa encolhido */
        z-index: 1000; 
        background-color: #1a3c34; 
        box-shadow: 4px 0 15px rgba(0,0,0,0.1); 
        overflow: hidden; /* MÁGICA: Corta qualquer coisa (o verde) que tentar vazar */
        transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* O Menu em Si (Mantém o tamanho original por dentro para o texto não quebrar) */
    .sidebar { 
        position: absolute; 
        top: 0; 
        left: 0; 
        bottom: 0; 
        display: flex; 
        flex-direction: column; 
        margin: 0 !important; 
        padding: 0 !important; 
        width: var(--sidebar-width); 
    }

    /* === CABEÇALHO E ALTERNÂNCIA DE LOGOS === */
    /* .sidebar-header { 
        position: relative; flex-shrink: 0; padding: 20px 0; 
        display: flex; align-items: center; justify-content: flex-start; 
        height: 80px; width: var(--sidebar-width);
        box-shadow: 4px 0 75px rgba(0,0,0,0.6); 
    }  */
    
    .sidebar-header {
        position: relative;
        flex-shrink: 0;
        padding: 20px 25px !important;
        display: flex;
        align-items: center;
        height: 70px;
        width: 100% !important; /* Substitui o 260px fixo, agora cresce com o menu */
        box-shadow: 4px 0 25px rgba(0,0,0,0.4);
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .sidebar-header img {
        height: 40px;
        filter: brightness(0) invert(1); 
    }

   .logo-large { 
    display: none; 
    max-width: 150px !important; /* <-- Reduzido de 180px para 150px para não bater no pino */
    margin-left: 15px !important; /* <-- Dá um pequeno respiro na esquerda para centralizar melhor */
    opacity: 0; 
    transition: opacity 0.3s; 
}
    .logo-mini { 
        position: absolute;
        left: calc(var(--sidebar-mini-width) / 2); /* Acha o meio exato dos 75px */
        transform: translateX(-50%); /* Centraliza perfeitamente no próprio eixo */
        margin: 0 !important; /* Remove a margem fixa que quebrava com o zoom */
        max-width: 40px;
        height: auto;
        filter: brightness(0.9) !important;
        display: flex;
    }

    .pin-btn {
        position: absolute; top: 24px; right: 15px;
        background: rgba(255,255,255,0.1); border: none;
        width: 32px; height: 32px; border-radius: 6px;
        color: rgba(255,255,255,0.6); font-size: 0.9rem;
        cursor: pointer; transition: 0.3s ease; display: none; 
        align-items: center; justify-content: center;
    }
    .pin-btn:hover { background: rgba(255,255,255,0.25); color: #fff; transform: scale(1.05); }
    .pin-btn.active { background: var(--cor-primaria); color: #fff; transform: rotate(45deg); }

    /* === ESTADOS DE EXPANSÃO (HOVER OU FIXADO) === */
    body.sidebar-hovered #sidebar-container, 
    body.sidebar-pinned #sidebar-container { width: var(--sidebar-width); }

    body.sidebar-hovered .logo-large, body.sidebar-pinned .logo-large { display: block; opacity: 1; }
    body.sidebar-hovered .logo-mini, body.sidebar-pinned .logo-mini { display: none; opacity: 0; }
    body.sidebar-hovered .pin-btn, body.sidebar-pinned .pin-btn { display: flex; }

    /* === OCULTAR TEXTOS NO MODO MINI === */
    .sidebar-nav .nav-item span, .accordion-btn .acc-left span,
    .accordion-btn .acc-arrow, .nav-title, .profile-text {
        opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    }

    body.sidebar-hovered .sidebar-nav .nav-item span, 
    body.sidebar-hovered .accordion-btn .acc-left span,
    body.sidebar-hovered .accordion-btn .acc-arrow,
    body.sidebar-hovered .nav-title, body.sidebar-hovered .profile-text,
    body.sidebar-pinned .sidebar-nav .nav-item span, 
    body.sidebar-pinned .accordion-btn .acc-left span,
    body.sidebar-pinned .accordion-btn .acc-arrow,
    body.sidebar-pinned .nav-title, body.sidebar-pinned .profile-text {
        opacity: 1; pointer-events: auto; transition-delay: 0.1s;
    }

    /* Trava de segurança para submenu não abrir no modo mini */
    #sidebar-container:not(.pinned):not(:hover) .accordion-content { max-height: 0 !important; }

    /* === CENTRALIZAR ÍCONES NO MODO MINI === */
    .accordion-btn, .sidebar-nav .nav-item { padding: 12px 20px; }
    .acc-left i, .sidebar-nav .nav-item i { 
        min-width: 15px; /* Força os ícones a ficarem perfeitamente no centro dos 75px */
        text-align: center; font-size: 1.0rem;
    }
    .accordion-content .nav-item i { min-width: 25px; }

    /* === EMPURRAR A PÁGINA COM TRANSIÇÃO SUAVE === */
    .main-content, .dashboard-container {
        transition: margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        margin-left: var(--sidebar-mini-width) !important;
        width: calc(100% - var(--sidebar-mini-width)) !important;
    }

    body.sidebar-hovered .main-content, body.sidebar-hovered .dashboard-container,
    body.sidebar-pinned .main-content, body.sidebar-pinned .dashboard-container {
        margin-left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
    }

    /* Responsividade Mobile (Mantém o comportamento padrão do celular) */
    @media (max-width: 992px) {
        #sidebar-container { left: 0 !important; width: 100% !important; }
        .main-content, .dashboard-container,
        body.sidebar-hovered .main-content, body.sidebar-pinned .main-content {
            margin-left: 0 !important; width: 100% !important;
        }
        .logo-large { display: block; opacity: 1; }
        .logo-mini { display: none; opacity: 0; }
        .sidebar-nav .nav-item span, .accordion-btn .acc-left span, .accordion-btn .acc-arrow, .nav-title, .profile-text { opacity: 1; pointer-events: auto; }
        .pin-btn { display: flex; }
    }
        /* === NAVEGAÇÃO: Ocupa TODO o espaço do meio e rola se precisar === */
    .sidebar-nav {
        flex: 1; /* Estica para preencher todo o espaço entre o topo e a base */
        overflow-y: auto; /* ATIVA O SCROLL VERTICAL AUTOMÁTICO */
        overflow-x: hidden;
        padding-bottom: 20px; /* Dá um respiro no final da rolagem */
        
        /* Suaviza o comportamento de rolagem ao abrir uma gaveta */
        scroll-behavior: smooth; 

        /* Estética: Deixa a barra de rolagem mais fina e elegante no Firefox */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
    /* === PERFIL: tamanho fixo no rodapé, não encolhe === */
    /* .sidebar-profile {
        flex: 0 0 auto;
        background-color: #122b25;
        padding: 15px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        min-height: 0;
    } */

    .sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}
/* === ACCORDION: botões e itens === */
.accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 0.9rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    outline: none;
}
.accordion-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
.accordion-btn.active {
    background-color: #122b25;
    color: var(--cor-primaria);
    border-left: 3px solid var(--cor-primaria);
}

.acc-left { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.acc-left i { width: 20px; text-align: center; font-size: 1.1rem; }

.acc-arrow { font-size: 0.8rem; transition: transform 0.3s ease; }
.accordion-btn.active .acc-arrow { transform: rotate(180deg); }

/* === GAVETA ACCORDION (submenu) === */
.accordion-content {
    display: flex;     
    flex-direction: column;      
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out;
    background-color: #122b25;   
}

/* Itens filhos do accordion */
.accordion-content .nav-item {
    padding-left: 45px;
    font-size: 0.9rem;
    opacity: 0.85;
    margin: 2px 0;
    border-radius: 0;
}

 .accordion-content .nav-item:last-child {
    margin-bottom: 15px !important;
}


.accordion-content .nav-item:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.03);
}
.accordion-content .nav-item.active {
    opacity: 1;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 0 20px 20px 0;
    width: 95%;
}

@media (max-width: 992px) {
    #sidebar-container {
        position: relative;
        width: 100%;
        height: auto;
        max-height: none;
        box-shadow: none;
    }

    .sidebar {
        position: relative;
    }

    .sidebar-nav {
        overflow-y: visible;
    }

    .main-content,
    .dashboard-container {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .logo-mini {
        margin-left: 10px;
    }

    .logo-large {
        margin-left: 10px;
    }
}
 
/* Telas muito pequenas em altura (ex: 1080p em 150% = ~720px) */
@media (max-height: 750px) {
    .sidebar-header {
        padding: 10px 20px;
    }
    .sidebar-header img {
        max-height: 40px;    /* reduz o logo se necessário */
        width: auto;
    }
    .accordion-btn {
        padding: 8px 20px;
        font-size: 0.88rem;
    }
    .nav-item {
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 0.88rem;
    }
    /* .sidebar-profile {
        padding: 10px 20px;
    } */

    .logo-mini {
        margin-left: 0px;
    }

    .logo-large {
        margin-left: 5px;
    }
}

#sidebar-container:not(:hover):not(.pinned) .accordion-btn, 
#sidebar-container:not(:hover):not(.pinned) .sidebar-nav .nav-item {
    padding: 15px 0 5px 5px !important;  
    justify-content: flex-start !important;
}
    #sidebar-container:not(:hover):not(.pinned) .nav-title {
        opacity: 1 !important; 
        font-size: 0 !important;
        color: transparent !important;
        display: block !important;
        height: 2px !important; 
        width: 32px !important; 
        margin: 15px 0 15px 5px !important;
        padding: 0 !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.8) !important; 
        border-radius: 2px !important; 
    }
 #sidebar-container:not(:hover):not(.pinned) .accordion-btn.active {
        background-color: transparent !important;
        color: #cbd5e1 !important; 
        border-left: none !important;
        box-shadow: none !important;
    }

    #sidebar-container:not(:hover):not(.pinned) .nav-item.active {
        background: #4caf50 !important; 
        box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4) !important;
        
        /* Seu tamanho e posição */
        width: 40px !important;        
        height: 40px !important;       
        min-height: 40px !important;   
        padding: 0 !important;        
        margin: 0px 0 1px -5px !important; 
        border-radius: 10px !important;
        
        /* Centralização ativada */
        display: flex !important;      
        justify-content: center !important; 
        align-items: center !important;
    }

    #sidebar-container:not(:hover):not(.pinned) .nav-item.active span {
        display: none !important; 
    }

    #sidebar-container:not(:hover):not(.pinned) .nav-item.active i {
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

 /* === NOVO MODAL DE CHANGELOG (SaaS STYLE) === */
.changelog-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.changelog-window {
    background: #ffffff;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.changelog-header {
    padding: 24px 32px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title { display: flex; align-items: center; gap: 15px; }
.header-title i { font-size: 1.5rem; color: var(--cor-primaria); }
.header-title h3 { font-size: 1.2rem; color: #1e293b; font-weight: 800; margin: 0; }
.header-title span { font-size: 0.8rem; color: #64748b; }

.btn-close-changelog {
    background: #f1f5f9;
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    transition: 0.3s;
}
.btn-close-changelog:hover { background: #e2e8f0; color: #1e293b; }

.changelog-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    background: #fff;
}

/* Timeline e Itens */
.changelog-item {
    position: relative;
    padding-left: 35px;
    padding-bottom: 40px;
    border-left: 2px solid #f1f5f9;
    margin-left: 10px;
}
.changelog-item:last-child { border-left: 2px solid transparent; padding-bottom: 10px; }

.changelog-item::before {
    content: '';
    position: absolute;
    left: -7px; top: 0;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--cor-primaria);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #e2e8f0;
}

.item-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 8px;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
}

.type-feature { background: #dcfce7; color: #15803d; }
.type-bugfix { background: #fee2e2; color: #b91c1c; }
.type-perf { background: #fef9c3; color: #854d0e; }
.type-visual { background: #e0f2fe; color: #0369a1; }
.type-manutencao { background: #f1f5f9; color: #64748b; }
.item-date { font-size: 0.85rem; color: #94a3b8; font-weight: 600; }

.changelog-item h4 { font-size: 1.1rem; color: #1e293b; margin-bottom: 8px; font-weight: 700; }
.changelog-item p { font-size: 0.95rem; color: #475569; line-height: 1.6; margin: 0; }

.changelog-footer {
    padding: 20px 32px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #64748b;
}

/* Custom Scrollbar */
.changelog-content::-webkit-scrollbar { width: 6px; }
.changelog-content::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
/* === ESTILO DE LISTA COM CHECK PERSONALIZADO === */
.changelog-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.changelog-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.4;
}

/* O ícone de Check */
.changelog-list li::before {
    content: "\f00c"; /* Código do check no FontAwesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--cor-primaria); /* Usa o verde #4CAF50 do teu sistema */
    font-size: 0.75rem;
}
 

.accordion-content::after {
    content: '';
    display: block;
    min-height: 2px; /* Aumente esse valor se quiser ainda mais espaço */
    width: 100%;
    flex-shrink: 0;
}

.accordion-content .nav-item:last-child {
    margin-bottom: 0 !important; 
}

/* =========================================================
   BLINDAGEM DO MENU LATERAL (Impede quebra de layout)
   ========================================================= */
/* 1. Força o container verde a obedecer o recuo de 80px */
#sidebar-container,
aside.sidebar {
    min-width: 80px !important;
    max-width: 80px !important;
    
    /* A MÁGICA AQUI: Agora mandamos animar o min-width e o max-width! */
    transition: min-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                max-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
                
    will-change: min-width, max-width; /* Otimização correta para a GPU */
    overflow-x: hidden !important;
    flex-shrink: 0 !important;
}
/* 2. Permite a expansão (260px) APENAS no hover ou quando fixado no alfinete */
#sidebar-container:hover,
aside.sidebar:hover,
body.sidebar-pinned #sidebar-container,
body.sidebar-pinned aside.sidebar {
    min-width: 260px !important;
    max-width: 260px !important;
       transition: min-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                max-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;


    will-change: min-width, max-width;
    flex-shrink: 0 !important;
}

/* 3. Garante que o conteúdo não seja esmagado ou coberto pelo menu */
main.dashboard-container,
.main-content {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
    /* Sincroniza a animação com o menu usando a mesma curva suave */
    transition: margin-left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    will-change: width, margin-left; /* MÁGICA: Joga a animação para a GPU */
    flex-shrink: 0 !important;
}

body.sidebar-pinned main.dashboard-container,
body.sidebar-pinned .main-content {
    margin-left: 260px !important;
    width: calc(100% - 260px) !important;
    flex-shrink: 0 !important;
}

/* =========================================================
   CORREÇÃO DO ALINHAMENTO INTERNO DO MENU RECOLHIDO
   ========================================================= */
/* 1. Impede que o texto cause quebras de linha invisíveis que esticam os botões */
.sidebar-nav .nav-item, 
.sidebar-nav .accordion-btn {
    white-space: nowrap !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
/* =========================================================
   AJUSTES VISUAIS FINAIS: ÍCONES E LINHA DIVISÓRIA
   ========================================================= */

/* 1. RESTAURAR A LINHA DIVISÓRIA ("MÓDULOS") */
/* Menu Aberto: Garante a linha suave acima do texto A LINHA TA AQUI COM MENU ABERTO */
.sidebar-nav .nav-title {
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-top: 10px !important;
    margin-top: 10px !important; 
    flex-shrink: 0 !important;
}

/* Menu Recolhido: Esconde o texto, mas mantém a linha visível e centralizada */
body:not(.sidebar-pinned) aside.sidebar:not(:hover) .nav-title,
body:not(.sidebar-pinned) #sidebar-container:not(:hover) .nav-title {
    display: block !important;     /* Anula o 'display: none' do código anterior */
    font-size: 0 !important;       /* Esconde a palavra "MÓDULOS" */
    color: transparent !important;
    height: 0 !important;          /* Zera a altura para sobrar apenas a linha (borda) */
    padding-top: 0 !important;
    margin: 15px 20px !important;  /* Margem lateral para a linha não colar nas beiradas dos 80px */
       flex-shrink: 0 !important;
}


/* 2. CENTRALIZAÇÃO MILIMÉTRICA DOS ÍCONES (Tirar o aspecto "torto") */
/* Cria uma "caixa transparente" de exatos 30px para todos os ícones FontAwesome */
.sidebar-nav .nav-item i,
.sidebar-nav .acc-left i {
    min-width: 30px !important;
    max-width: 30px !important;
    text-align: center !important; /* Força o ícone a ficar bem no meio dessa caixa */
    display: inline-block !important;
    font-size: 1.10rem !important;
       flex-shrink: 0 !important;
}

/* Aplica a mesma regra matemática de largura para a imagem do Power BI */
.sidebar-nav .nav-item .menu-icon {
    min-width: 30px !important;
    max-width: 30px !important;
    height: 22px !important;       /* Levemente menor na altura para harmonizar com o FontAwesome */
    object-fit: contain !important;
    margin-right: 0 !important;    /* Limpa margens antigas que possam empurrar a imagem */
       flex-shrink: 0 !important;
}

body:not(.sidebar-pinned) aside.sidebar:not(:hover) .nav-title,
body:not(.sidebar-pinned) #sidebar-container:not(:hover) .nav-title {
    display: block !important;
    font-size: 0 !important;         /* Esconde o texto */
    color: transparent !important;
    padding: 0 !important;
    
    /* Desenha a linha física */
    height: 2px !important;          /* Espessura da linha */
    background-color: rgba(255, 255, 255, 0.9) !important; /* Cor e brilho da linha */
    border: none !important;         /* Remove a borda antiga para não duplicar */
    
    /* Tamanho e centralização exata no espaço de 80px */
    width: 40px !important;          /* Largura da linha (um pouco maior que o ícone) */
    margin: 15px auto !important;    /* O 'auto' garante que fique perfeitamente no meio */
    flex-shrink: 0 !important;
}

.sidebar-nav .nav-item,
.sidebar-nav .accordion-btn,
#sidebar-container .nav-item.active {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    will-change: min-width, max-width;
}

.sidebar-nav > * {
    flex-shrink: 0 !important;
}

.accordion-content {
    flex-shrink: 0 !important;
}
 
/* =========================================================
   CORREÇÃO DEFINITIVA DA SINCRONIA (JS vs CSS)
   ========================================================= */

/* 1. Anula o CSS :hover apressado e obriga o menu a aguardar os 50ms do JS */
#sidebar-container:hover,
aside.sidebar:hover {
    min-width: 80px !important;
    max-width: 80px !important;
}

/* 2. A expansão só acontece quando o JS confirma o movimento (sidebar-hovered) */
body.sidebar-hovered #sidebar-container,
body.sidebar-hovered aside.sidebar,
body.sidebar-pinned #sidebar-container,
body.sidebar-pinned aside.sidebar {
    min-width: 260px !important;
    max-width: 260px !important;
}

/* 3. O Cabeçalho (Logo e Pino) cresce elástico junto com a caixa verde principal */
.sidebar-header {
    width: 100% !important;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

 /* --- ESTRUTURA BASE (Trava a tela, rola só o conteúdo) --- */
.dashboard-wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #f8fafc;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Evita quebra de layout em telas pequenas */
}

/* --- HEADER GLOBAL --- */
.header-global {
    height: 70px;
    background-color: #004b8d; /* Azul escuro inspirado no e-SUS */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* Botão de Perfil Logado */
.user-dropdown {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.2s;
}

.user-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Efeito de hover translúcido */
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Textos alinhados à direita igual à imagem */
}

.user-info strong {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.user-info span {
    font-size: 0.75rem;
    opacity: 0.85;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.drop-icon {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* --- MENU SUSPENSO (Dropdown de Configurações) --- */
.dropdown-content {
    display: none; 
    position: absolute;
    
    /* PONTOS CHAVE DA CORREÇÃO DE LARGURA E ALINHAMENTO */
    width: 100%; /* Acompanha 100% da largura do container pai (.header-esus-right) */
    min-width: max-content; /* Garante que os botões (ex:"Sair do Sistema") caibam mesmo se o nome do usuário for muito curto */
    box-sizing: border-box; /* Impede que bordas façam o dropdown vazar para fora dos 100% */
    
    /* ALINHAMENTO */
    top: calc(100% + 4px); /* Cola exatamente abaixo do container pai, com um micro respiro de 4px */
    right: 0; 
    
    /* VISUAL */
    background-color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); /* Sombra um pouco mais profunda para destacar */
    border-radius: 6px; 
    border: 1px solid #e2e8f0;
    
    overflow: hidden;
    z-index: 1050;
    animation: fadeInDown 0.2s ease;
}

/* Classe ativada via JavaScript para abrir o menu */
.dropdown-content.show {
    display: block;
}

.dropdown-content a {
    color: #334155;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background-color: #f1f5f9;
    color: #0284c7;
}

.dropdown-content hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 0;
}

.dropdown-content .logout-link {
    color: #ef4444; /* Destaca o botão de sair em vermelho */
}

/* --- ÁREA DO MÓDULO (Onde as páginas carregam) --- */
.conteudo-scroll {
    flex: 1;
    overflow-y: auto; /* A rolagem fica APENAS aqui dentro */
    padding: 30px;
}

/* ==========================================
   HEADER GLOBAL FIXO (Estilo e-SUS)
   ========================================== */
/* =========================================================
   HEADER GLOBAL FIXO (Layout, Cores e Overflow Corrigidos)
   ========================================================= */
.header-esus-fixo {
    position: fixed;
    top: 0;
    right: 0;
    left: 80px; 
    width: calc(100% - 80px) !important; 
    height: 70px;
    background-color: #ffffff; 
    border-bottom: 1px solid #e2e8f0; 
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    padding: 0 30px;
    z-index: 1100 !important; 
    box-sizing: border-box !important; 
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Sincroniza o header quando o menu expande (Hover ou Fixo) */
body.sidebar-hovered .header-esus-fixo,
body.sidebar-pinned .header-esus-fixo {
    left: 260px;
    
    /* CORREÇÃO DO VAZAMENTO (Menu Aberto) */
    width: calc(100% - 260px) !important; 
}

/* --- Container do Perfil --- */
.header-esus-right {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s;
    max-width: 100%; /* Impede o botão de estourar a tela */
}

.header-esus-right:hover {
    background-color: #f8fafc; /* Efeito de hover sutil */
}

/* =========================================================
   HEADER: ALINHAMENTO E CORREÇÃO DE OVERFLOW
   ========================================================= */
.header-esus-right {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s;
    position: relative; /* Necessário para ancorar o dropdown e a bolinha */
    
    /* PONTO CRÍTICO: Permite que o container encolha ao invés de vazar a tela */
    min-width: 0; 
}

.header-esus-right:hover {
    background-color: #f1f5f9; /* Hover sutil e elegante */
}

.user-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alinha tudo à direita */
    gap: 15px; /* Espaço entre o município e a equipe */
    margin-top: 3px;
}

.user-badges .badge-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7) !important;
    white-space: nowrap;
}

/* Cor sutil apenas para os ícones */
.user-badges .badge-item i {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4) !important; 
}

.header-user-info {
    display: flex;
    flex-direction: column;
    text-align: right;
    max-width: 380px; /* Limite máximo do texto */
    overflow: hidden; /* Corta qualquer coisa que tentar sair dessa caixa */
}

.header-user-info .user-name,
.header-user-info .user-unit {
    display: block; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Coloca os "..." quando o texto for muito grande */
    width: 100%;
}

.header-user-info .user-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a3c34; /* Harmonizando com o VERDE ESCURO do Sidebar */
}

.header-user-info .user-unit {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4CAF50; /* Harmonizando com o VERDE CLARO (cor-primaria) do sistema */
}

/* =========================================================
   DROPDOWN DO USUÁRIO
   ========================================================= */
.dropdown-content {
    display: none; /* Escondido por padrão */
    position: absolute;
    top: 110%; /* Fica logo abaixo do nome */
    right: 0; /* Alinhado à direita */
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    z-index: 1050;
    animation: fadeInDown 0.2s ease;
}

/* Classe ativada via JavaScript */
.dropdown-content.show { display: block; }

.dropdown-content a {
    color: #334155;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background-color: #f8fafc;
    color: #1a3c34; /* Fica verde ao passar o mouse */
}

.dropdown-content hr {
    border: 0; border-top: 1px solid #e2e8f0; margin: 0;
}

.dropdown-content .logout-link { color: #ef4444; }
.dropdown-content .logout-link:hover { background-color: #fef2f2; color: #dc2626; }

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ícone de seta */
.icon-arrow {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* Bolinha de Notificação */
.header-esus-right { position: relative; } /* Garante que a bolinha siga o perfil */
/* .notif-dot {
    width: 8px;
    height: 8px;
    background-color: #ef4444;  
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
    border: 2px solid #ffffff;  
} */

/* =========================================================
   AJUSTE DO CONTAINER DOS MÓDULOS (#conteudo-app)
   ========================================================= */
#conteudo-app {
    margin-top: 70px !important; /* Exatamente a altura do seu header fixo */
    height: calc(100vh - 70px) !important;
    overflow-y: auto !important; /* Garante que a rolagem aconteça só aqui */
    background-color: #f4f8f4; /* Fundo do sistema puxado para o seu verde clarinho */
}

/* =========================================================
   CORES DO HEADER - TEMA ESCURO (Integrado ao Sidebar)
   ========================================================= */

/* 1. Fundo do header com a mesma cor do sidebar */
.header-esus-fixo {
    background: #1a3c34 !important; /* Força a cor sólida verde escura */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; /* Linha bem sutil para separar do fundo */
}

/* 2. Efeito ao passar o mouse no perfil (brilho suave em vez de fundo cinza) */
.header-esus-right:hover {
    background-color: rgba(255, 255, 255, 0.08) !important; 
}

/* 3. Nome do usuário em Branco puro */
.header-user-info .user-name {
    color: #ffffff !important;
}

/* 4. Unidade do usuário com branco translúcido (dá uma hierarquia visual linda) */
.header-user-info .user-unit {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 500 !important;
}

/* 5. Setinha para baixo acompanhando a cor da unidade */
.icon-arrow {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* =========================================================
   HEADER TOOLS (Sino, Notificações e Divisor)
   ========================================================= */

/* Container geral que alinha Sino + Divisor + Perfil */
.header-tools {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço uniforme entre os elementos */
}

/* O botão do Sino */
.notif-bell {
    position: relative;
    color: rgba(255, 255, 255, 0.7); /* Mesma transparência dos ícones da equipe */
    font-size: 1.25rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%; /* Faz o hover ficar redondo */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Acende ao passar o mouse */
.notif-bell:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Reposicionando a Bolinha Vermelha para o canto do Sino */
/* Reposicionando e ajustando a Bolinha para aceitar números */
.notif-bell .notif-dot {
    width: auto;
    min-width: 18px; /* Largura mínima para ficar redondinho com 1 dígito */
    height: 18px;
    background-color: #ef4444; 
    border-radius: 10px; /* Formato de pílula para números grandes */
    position: absolute;
    top: 2px; /* Subiu um pouco para compensar o tamanho maior */
    right: -2px; /* Jogou um pouco pra direita */
    border: 2px solid #1a3c34; 
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-sizing: border-box;
}

/* Linha Divisória elegante */
.header-divider {
    height: 32px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.15); /* Branco bem fraquinho */
}

/* =========================================================
   DROPDOWN DE NOTIFICAÇÕES
   ========================================================= */
.notif-dropdown {
    display: none; /* Escondido por padrão */
    position: absolute;
    top: calc(100% + 15px); /* Joga para baixo do header */
    right: -10px; /* Alinha próximo à borda direita */
    width: 320px;
    background-color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    z-index: 1050;
    cursor: default; /* Remove o cursor de 'mãozinha' na área vazia */
    animation: fadeInDown 0.2s ease;
}

/* Ativado via JavaScript */
.notif-dropdown.show {
    display: flex;
    flex-direction: column;
}

/* Cabeçalho da notificação */
.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
    border-radius: 8px 8px 0 0;
}

.notif-header h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 700;
}

.notif-header button {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.notif-header button:hover { color: #2563eb; }

/* Corpo da notificação */
.notif-body {
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 0;
}

/* Estado vazio */
.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    color: #94a3b8;
    text-align: center;
    gap: 10px;
}

.notif-empty i { font-size: 2.5rem; opacity: 0.5; }
.notif-empty p { margin: 0; font-size: 0.9rem; font-weight: 500; }

/* Rodapé */
.notif-footer {
    padding: 12px;
    text-align: center;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
    border-radius: 0 0 8px 8px;
}

.notif-footer a {
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
}

.notif-footer a:hover { text-decoration: underline; }

/* =========================================================
   TEMA ESCURO PARA OS DROPDOWNS (PERFIL E NOTIFICAÇÕES)
   ========================================================= */

/* 1. Fundo e Borda Geral das Gavetas */
.dropdown-content,
.notif-dropdown {
    background-color: #1a3c34 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borda branca muito subtil */
}

/* ==================== DROPDOWN DE PERFIL ==================== */

/* 2. Textos e Ícones do Menu de Perfil */
.dropdown-content a {
    color: #ffffff !important;
}

/* 3. Efeito ao passar o rato (Brilho subtil em vez de fundo cinzento) */
.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important; 
}

/* 4. Linha divisória */
.dropdown-content hr {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 5. Botão de Sair (Vermelho mais claro para destacar no fundo escuro) */
.dropdown-content .logout-link {
    color: #f87171 !important; 
}
.dropdown-content .logout-link:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

/* ==================== DROPDOWN DE NOTIFICAÇÕES ==================== */

/* 6. Topo e Rodapé das Notificações (Levemente mais escuros para dar profundidade) */
.notif-header,
.notif-footer {
    background-color: rgba(0, 0, 0, 0.15) !important; 
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 7. Textos do Topo (Notificações) */
.notif-header h4 {
    color: #ffffff !important;
}
.notif-header button {
    color: rgba(255, 255, 255, 0.6) !important; /* Ícone de "lido" meio transparente */
}
.notif-header button:hover {
    color: #ffffff !important;
}

/* 8. Área central (Estado Vazio) */
.notif-empty {
    color: rgba(255, 255, 255, 0.6) !important; /* Texto branco opaco para descansar a vista */
}

/* 9. Link do Rodapé ("Ver todas as notificações") */
.notif-footer a {
    color: #38bdf8 !important; /* Azul claro (Sky Blue), perfeito para contraste no fundo escuro */
}

/* =========================================================
   RODAPÉ DO MENU LATERAL (Versão do Sistema)
   ========================================================= */
.sidebar-footer {
    flex-shrink: 0;
    padding: 18px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Linha divisória super suave */
    background-color: transparent;
    width: 100%;
}

.sidebar-footer span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3); /* Branco com 30% de opacidade */
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: color 0.3s ease;
    cursor: default;
}

/* Acende um pouco se o usuário passar o mouse por cima */
.sidebar-footer span:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* MODAL HISTÓRICO DE NOTIFICAÇÕES */
.modal-overlay-notif {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 3000;
}
.modal-card-notif {
    background: white; width: 90%; max-width: 600px; border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); overflow: hidden; display: flex; flex-direction: column; max-height: 85vh;
}
.modal-header-notif {
    padding: 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;
}
.modal-header-notif h3 { color: #1a3c34; font-size: 1.2rem; margin: 0; }
.modal-body-notif { padding: 10px 0; overflow-y: auto; flex: 1; background: #f8fafc; }
.btn-close-modal { background: none; border: none; font-size: 1.2rem; color: #94a3b8; cursor: pointer; }
.btn-close-modal:hover { color: #ef4444; }


.system-version {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: default;

    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
}

.system-version .version-text {
    display: none;
    opacity: 0; 
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.system-version:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}


body.sidebar-hovered .system-version,
body.sidebar-pinned .system-version {
    width: fit-content;
    padding: 6px 12px;
    border-radius: 20px;
    gap: 8px; 
}

body.sidebar-hovered .system-version .version-text,
body.sidebar-pinned .system-version .version-text {
    display: inline-block;
    opacity: 1;
    transition-delay: 0.1s;
}