/* --- ESTRUCTURA I DESKTOP --- */
        :root {
            --primary-color: #004B93;


            --sidebar-bg: #fff;
            --sidebar-submenu-bg: #fff;
            --sidebar-active-bg:#e8f0fe;
            --sidebar-hover-bg:#f4f7f6;

            --sidebar-color:#002B54;
            --sidebar-active-color:#002B54;
            --sidebar-hover-color:#002B54;

            --sidebar-width: 280px;

            --sub-nav-height: 46px;




            --sub-nav-color:#002B54;
            --sub-nav-active-color:#002B54;
            --sub-nav-hover-color:#002B54;

            --sub-nav-bg:#fff;
            --sub-nav-active-bg:#e8f0fe;
            --sub-nav-hover-bg:#f4f7f6;
            
            --top-nav-height: 60px;
            

            
           
            
            
        }

        body { background-color: #f4f7f6; margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

        .header-fixed { position: fixed; top: 0; width: 100%; z-index: 1050; }
        .nav-top { background: var(--primary-color); height: var(--top-nav-height); color: white; display: flex; align-items: center; padding: 0 20px; }
        
        .nav-sub {
            background: white; border-bottom: 1px solid #dee2e6; height: var(--sub-nav-height);
            display: flex; align-items: center;
            
        }
        .nav-sub li{
            font-size: 0.8725rem !important;
        }
        .nav-user-list{
            font-size: 0.8725rem !important;
        }

        .nav-sub .nav-link {  display: flex; align-items: center; gap: 8px; height: calc(var(--sub-nav-height) - 1px);}

        
        


        .nav-sub .nav-item  .nav-link{ color:var(--sub-nav-color); background-color: var(--sub-nav-bg);} /*primer nivell*/
        .nav-sub .nav-item  .nav-link.active{ color:var(--sub-nav-active-color); background-color: var(--sub-nav-active-bg) !important; } /*primer nivell*/
        .nav-sub .nav-item  .nav-link:not(.active):hover{ color:var(--sub-nav-hover-color); background-color: var(--sub-nav-hover-bg);} /*primer nivell*/

        .nav-sub .nav-item.dropdown .dropdown-item{ color:var(--sub-nav-color); background-color: var(--sub-nav-bg); }/*segon Nivell*/
        .nav-sub .nav-item.dropdown .dropdown-item.active{  color:var(--sub-nav-active-color); background-color: var(--sub-nav-active-bg); }/*segon Nivell*/
        .nav-sub .nav-item.dropdown .dropdown-item:not(.active):hover{  color:var(--sub-nav-hover-color); background-color: var(--sub-nav-hover-bg);}/*segon Nivell*/

        
        .nav-sub .nav-item.dropdown .dropdown-submenu  .UlN2 .dropdown-item{ color:var(--sub-nav-color); background-color: var(--sub-nav-bg);} /*tercer Nivell*/
        .nav-sub .nav-item.dropdown .dropdown-submenu  .UlN2 .dropdown-item.active{color:var(--sub-nav-active-color); background-color: var(--sub-nav-active-bg);} /*tercer Nivell*/
        .nav-sub .nav-item.dropdown .dropdown-submenu  .UlN2 .dropdown-item:not(.active):hover{ color:var(--sub-nav-hover-color); background-color: var(--sub-nav-hover-bg);} /*tercer Nivell*/

        

        .nav-sub .nav-item.dropdown:hover > .nav-link {
                color:var(--sub-nav-hover-color); background-color: var(--sub-nav-hover-bg);
            }
        

        .dropdown-submenu:hover > .TriggerN2:not(.active){
            color:var(--sub-nav-hover-color); background-color: var(--sub-nav-hover-bg) !important;
        }


        /*.nav-sub .nav-item.dropdown  .nav-link.TriggerN1{  color: #ff0 !important; } /*primer nivell*/
        /*.nav-sub .nav-item.dropdown .dropdown-submenu .dropdown-item.TriggerN2{ color: #00f !important;}/*segon Nivell*/

        
        
        





        body.desktop-mode #user-menu-desktop:hover .dropdown-menu {
            display: block;
            margin-top: 0; 
            position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 42px);

        }

        





        
        body.desktop-mode #user-menu-desktop a{
                font-size: 0.8725rem !important;
        }
        body.desktop-mode #user-btn-mobile{
            display: none !important;
        }


        body.desktop-mode #user-menu-desktop .dropdown-menu .dropdown-item.active {
            color:var(--sub-nav-active-color) !important; background-color: var(--sub-nav-active-bg) !important;

        }
        body.desktop-mode #user-menu-desktop .dropdown-menu .dropdown-item {
            color:var(--sub-nav-color) !important;

        }


        body.desktop-mode  .nav-item.dropdown:hover > .dropdown-menu { display: block; }
        body.desktop-mode .dropdown-submenu:hover > .dropdown-menu { display: block; }
            
        body.desktop-mode .dropdown-submenu { position: relative; }
        body.desktop-mode .dropdown-submenu .dropdown-menu { 
                top: 0; left: 100%; 
                margin-top: -1px; 
                display: none; position: absolute;
            }

            body.desktop-mode .nav-sub .nav  li.LimitN1 >ul.dropdown-menu{
                position: absolute; inset: 3px 0px auto auto; margin: 0px; transform: translate(0px, 42px);
            }

            body.desktop-mode .nav-sub .nav  li.LimitN2 >ul.dropdown-menu .dropdown-menu{
                right:100% !important;
                left: auto;
            }



 #user-menu-desktop i.fa-user, #user-btn-mobile i.fa-user {
    font-size: 22px;
}
     body.desktop-mode #user-menu-desktop       .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -4px; /* Alçada suficient per tapar el buit */
    left: 0;
    right: 0;
    height: 10px;
    display: block;
    
}
body.desktop-mode .CenterLogo{
    display: none;
}
        




        .dropdown-submenu > a { display: flex !important; align-items: center; justify-content: space-between; white-space: nowrap; padding-right: 15px !important; }
        .dropdown-submenu > a::after { 
            content: "\f105"; 
            font-family: "Font Awesome 6 Free"; 
            font-weight: 900; 
            border: none; 
            margin-left: 15px; 
            font-size: 0.8rem;
            transition: transform 0.3s ease;
        }

        /* Sidebar Original amb funcionalitat Toggle */
        .sidebar {
            width: var(--sidebar-width); height: 100vh;  position: fixed;
            top: calc(var(--top-nav-height) + var(--sub-nav-height)); left: 0;
            background: var(--sidebar-bg); padding-top: 30px; z-index: 1000; 
            transition: all 0.3s ease-in-out;
        }

        .sidebar-scroll-container {
    /* --- 1. CONFIGURACIÓ PER A FIREFOX --- */
    /* Sintaxi: color-del-botó color-del-fons */
    scrollbar-width: thin; 
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    width: 100%;
    /* Calculem l'alçada perquè no s'escapi per sota */
    height: calc(100% - 120px);

    /* --- 2. CONFIGURACIÓ PER A CHROME, SAFARI, EDGE --- */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Estils específics per a Webkit (Chrome/Safari) */
.sidebar-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.sidebar-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scroll-container::-webkit-scrollbar-thumb {
    background-color: transparent; /* Invisible per defecte */
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.3s;
}

/* Apareix en fer hover a la sidebar */
.sidebar-scroll-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}


.main-wrapper .container-fluid{
    --bs-gutter-x:0;

}

        body.sidebar-closed .sidebar { left: calc(-1 * var(--sidebar-width) + 12px); }
        body.sidebar-closed .main-wrapper { margin-left: 12px; }

        #toggle-sidebar-btn {
            position: absolute; right: -12px; top: 5px;
            width: 24px; height: 24px; background: var(--primary-color);
            color: white; border-radius: 50%; display: flex;
            align-items: center; justify-content: center;
            cursor: pointer; z-index: 1001; transition: all 0.3s ease-in-out;
            border: 2px solid white; padding: 0;
        }
        #toggle-sidebar-btn button { background: none; border: none; color: white; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; }
        #toggle-sidebar-btn i { font-size: 0.7rem; transition: transform 0.3s ease; }
        #toggle-sidebar-btn i { transform: rotate(0deg); }
        body.sidebar-closed #toggle-sidebar-btn i { transform: rotate(180deg); }

        .sidebar .nav-link { color: var(--sidebar-color); display: flex; align-items: center; text-decoration: none; }
        .sidebar .nav-link.active{background-color:var(--sidebar-active-bg); color:var(--sidebar-active-color); }
        .sidebar .submenu li a.active{background-color:var(--sidebar-active-bg); color:var(--sidebar-active-color);}


        

        .sidebar .nav-link:not(.active):hover { background-color:var(--sidebar-hover-bg); color:var(--sidebar-hover-color); }


        .sidebar .nav-link i.main-icon { width: 25px; text-align: center; margin-right: 8px; flex-shrink: 0; height: 18px;}
        .glass-panel i.main-icon { width: 14px; text-align: center; margin-right: 1px; flex-shrink: 0; height: 14px;}
        .sidebar .nav-link span.link-text { flex-grow: 1; }
        .sidebar .nav-link i.fa-chevron-down { font-size: 0.75rem; margin-left: auto; }
        
        .sidebar .submenu { background: var(--sidebar-submenu-bg); list-style: none; padding: 0; margin-bottom:0.5rem; }
        .sidebar .submenu li a { padding: 5px 20px 5px 40px; display: block; color: var(--sidebar-color); text-decoration: none; font-size: 0.85rem; }
        
        
        .sidebar .submenu li a:not(.active):hover {background-color:var(--sidebar-hover-bg); color:var(--sidebar-hover-color);}

        .sidebar div.hasSub:hover > a.nav-link:not(.active){
           background-color:var(--sidebar-hover-bg); color:var(--sidebar-hover-color);
        } 

        .main-wrapper { 
            margin-left: var(--sidebar-width); 
            padding: calc(var(--top-nav-height) + var(--sub-nav-height) + 20px) 30px 30px;
            transition: all 0.3s ease-in-out;
        }

        /* --- VISTA MOBILE (UNIFICADA) --- */
        #hamburguesa-btn { display: none; cursor: pointer; }
        
        #user-nav-mobile { 
            display: none; background: white; border-bottom: 1px solid #dee2e6; position: absolute; 
            top: var(--top-nav-height); width: 100%; z-index: 1100; padding: 0;
        }

        body.mobile-mode #hamburguesa-btn { display: block; }
        body.mobile-mode .sidebar { left: calc(-1 * var(--sidebar-width) + 12px); top: var(--top-nav-height); }
        body.mobile-mode .main-wrapper { margin-left: 0; padding: calc(var(--top-nav-height)  + 20px) 40px 30px;}
            
        body.mobile-mode.sidebar-open-mobile .sidebar { left: 0; }
        body.mobile-mode #toggle-sidebar-btn i { transform: rotate(180deg); }
        body.mobile-mode.sidebar-open-mobile #toggle-sidebar-btn i { transform: rotate(0deg); }

        body.mobile-mode .nav-sub, body.mobile-mode #user-nav-mobile { 
                display: none; height: auto; position: absolute; top: var(--top-nav-height); 
                width: 100%; background: white; z-index: 1100; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            }
        body.mobile-mode .nav-sub { padding-left: 0 !important; padding-right: 0 !important; }
            
        body.mobile-mode .nav-sub.open-mobile, body.mobile-mode #user-nav-mobile.open-mobile { display: block; overflow-y: auto; height: calc(100vh - 80px); -webkit-overflow-scrolling: touch; }
        body.mobile-mode .nav-sub .nav, body.mobile-mode #user-nav-mobile .nav-user-list { flex-direction: column; padding: 0; list-style: none; margin: 0; }
            
        body.mobile-mode #user-menu-desktop { display: none !important; }

        body.mobile-mode .nav-sub .nav-link, body.mobile-mode #user-nav-mobile .nav-link { 
                padding: 12px 20px; color: #495057; border-bottom: 1px solid #eee; 
                text-decoration: none; display: flex; align-items: center; font-weight: 500; gap: 12px;
            }

        body.mobile-mode .nav-sub .dropdown-menu { 
                position: static !important; float: none; width: 100%; 
                box-shadow: none !important; border: none !important; 
                background: #fcfcfc !important; display: none; padding: 0; margin: 0;
            }
            
        body.mobile-mode .nav-sub .dropdown-toggle::after {
                content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900;
                margin-left: auto; transition: transform 0.3s ease; border: none;
            }
        body.mobile-mode .nav-sub .dropdown-toggle.show-mobile::after { transform: rotate(90deg); }
            
        body.mobile-mode .nav-sub .show-mobile > a::after { transform: rotate(90deg) !important; }

        body.mobile-mode .nav-sub .dropdown-menu.show-mobile { display: block; }
            
        body.mobile-mode .nav-sub .dropdown-item {  padding: 12px 25px 12px 45px; border-bottom: 1px solid #f1f1f1; }
        body.mobile-mode .nav-sub .dropdown-submenu > a { padding-left: 45px !important; }

        /*body.mobile-mode #menuExport .dropdown-item, body.mobile-mode #menuCoord .dropdown-item { padding-left: 70px !important; }*/

        body.mobile-mode .UlN2 .dropdown-item { padding-left: 70px !important; }
        
        body.mobile-mode #user-btn-mobile{
            display: block !important;

        }
        body.mobile-mode .DesktopLogo, body.mobile-mode .BrandName{
            display: none;
        }
        body.mobile-mode #user-nav-mobile .nav-user-list .nav-link.active{
            color:var(--sub-nav-active-color) !important; background-color: var(--sub-nav-active-bg) !important;

        }
        body.mobile-mode #user-nav-mobile .nav-user-list .nav-link:not(.active):hover{
            color:var(--sub-nav-hover-color) !important; background-color: var(--sub-nav-hover-bg) !important;
        }




        a i.customSVG{
            display: inline-flex;
            width: 14px;   /* Mateixa mida que el text */
            height: 14px;
            align-self: center;         /* Alineació interna */
            vertical-align: middle;     /* Alineació respecte al text adjacent */
            position: relative;
            top: -2px;
            background-color: currentColor; /* Això fa que agafi el color del text! */
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;
            
        }

         a i.customSVG{
            margin-right: 2px !important;
        }
        a i.customSVG.me-0{
            margin-right: 0px !important;
        }

        a i.customSVG.myMoodle{
            -webkit-mask-image: url('moodle.svg');
            mask-image: url('moodle.svg');
        }
        
        a i.customSVG.myIeduca{
            -webkit-mask-image: url('ieduca.svg');
            mask-image: url('ieduca.svg');
        }

        a i.customSVG.myEduGestio{
            -webkit-mask-image: url('edugestio.svg');
            mask-image: url('edugestio.svg');
        }

        a i.customSVG.myEsfera{
            -webkit-mask-image: url('Esfera.svg');
            mask-image: url('Esfera.svg');
        }

        a i.customSVG.myGCalendar{
            -webkit-mask-image: url('GCalendar.svg');
            mask-image: url('GCalendar.svg');
        }

        a i.customSVG.myGClassroom{
            -webkit-mask-image: url('GClassroom.svg');
            mask-image: url('GClassroom.svg');
        }
        a i.customSVG.myOdissea{
            -webkit-mask-image: url('odissea.svg');
            mask-image: url('odissea.svg');
        }
        a i.customSVG.myGencat{
            -webkit-mask-image: url('Gencat.svg');
            mask-image: url('Gencat.svg');
        }
        a i.customSVG.myGencatEscut{
            -webkit-mask-image: url('GencatEscut.svg');
            mask-image: url('GencatEscut.svg');
        }
        a i.customSVG.myLogoIns{
            -webkit-mask-image: url('LogoIns.svg');
            mask-image: url('LogoIns.svg');
        }
        a i.customSVG.myRegularCSV{
            -webkit-mask-image: url('RegularCSV.svg');
            mask-image: url('RegularCSV.svg');
            

        }
        a i.customSVG.myRegularCSV.Em1{
            width: 1em;
            height: 1em;

        }


        
        
        

        .nav-sub .nav {
            --bs-nav-link-padding-x: 0.7rem !important; 
        }