.App.Panel{--headerHeight:96px;grid-template-columns:64px 1fr;grid-template-areas:"nav header""nav main";grid-template-rows:var(--headerHeight)1fr;row-gap:5vh;display:grid;position:relative}.App.Panel nav{z-index:10;background-color:#242424;flex-direction:column;gap:24px;padding:36px 12px 16px;display:flex}.App.Panel nav hr{background-color:var(--white);height:3px}.App.Panel nav .navMenu,.App.Panel nav .navPanel{flex-direction:column;gap:16px;display:flex}.App.Panel nav a{border-radius:100%;justify-content:center;align-items:center;padding:6px;font-weight:200;display:flex}.App.Panel nav a:hover{background-color:var(--lightBlack)}.App.Panel nav .icon{color:var(--white);width:100%;height:100%}.App.Panel nav a.active .icon,.App.Panel nav a:hover .icon,.App.Panel header a.active .icon,.App.Panel header a:hover .icon{color:var(--primaryColor)}.App.Panel header{z-index:9;justify-content:space-between;align-items:center;padding:12px 56px;display:flex;position:relative;box-shadow:12px 0 24px #24242430}.App.Panel header .navMenu{align-items:center;gap:16px;display:none}.App.Panel header .headerPanel button,.App.Panel header .navMenu a{justify-content:center;align-items:center;width:54px;height:54px;padding:12px;font-size:54px;display:flex}.App.Panel header .headerPanel button{opacity:.6;padding:10px}.App.Panel header .headerPanel button .icon{color:var(--black)}.App.Panel header .headerPanel button:hover{opacity:1}.App.Panel header .headerNotificationPanel>a,.App.Panel header .headerNotificationPanel>button{border-radius:100%;width:54px;height:54px;padding:12px;position:relative}.App.Panel header .headerNotificationPanel>a:hover,.App.Panel header .headerNotificationPanel>button:hover{background-color:var(--primaryColor20)}.App.Panel header .headerNotificationPanel>a.active,.App.Panel header .headerNotificationPanel>button.active{opacity:1;background-color:var(--primaryColor20)}.App.Panel header .headerNotificationPanel>a.active .icon,.App.Panel header .headerNotificationPanel>button.active .icon{color:var(--primaryColor)}.App.Panel header .headerNotificationPanel>a .icon,.App.Panel header .headerNotificationPanel>button .icon{color:var(--black60)}.App.Panel header .headerNotificationPanel>a .number,.App.Panel header .headerNotificationPanel>button .number{background-color:var(--primaryColor80);width:20px;height:20px;color:var(--white);border-radius:100%;justify-content:center;align-items:center;display:flex;position:absolute;bottom:8px;right:8px}.App.Panel header .headerNotificationPanel .expandPanel{opacity:0;width:384px;position:absolute;top:100%;right:40px;overflow:hidden}.App.Panel header .headerNotificationPanel .expandPanel.open{opacity:1}.App.Panel header .headerNotificationPanel .expandPanel.open .wrapper{max-height:768px}.App.Panel header .headerNotificationPanel .expandPanel .wrapper{background-color:var(--white);box-shadow:4px 4px 16px var(--black20);border-radius:0 0 8px 8px;grid-template-rows:1fr auto;max-height:0;margin:0 16px 16px;display:grid;overflow:hidden}.App.Panel header .headerNotificationPanel .expandPanel .wrapper>a{text-align:center;color:var(--primaryColor);padding:8px}.App.Panel header .headerNotificationPanel .expandPanel .wrapper>a:hover{background-color:var(--primaryColor20)}.App.Panel header .headerNotificationPanel .expandPanel .content{background-color:#f6f6f6}.App.Panel header .headerNotificationPanel .expandPanel .content .singleNotification{border-bottom:1px solid var(--primaryColor20);padding:16px;display:grid}.App.Panel header .headerNotificationPanel .expandPanel .content>p{text-align:center;color:var(--black60);padding:24px 12px;font-size:16px}.App.Panel header .headerNotificationPanel .expandPanel .content .singleNotification:hover{background-color:var(--primaryColor20)}.App.Panel header .headerNotificationPanel .expandPanel .content .singleNotification h5{font-size:16px}.App.Panel header .headerNotificationPanel .expandPanel .content .singleNotification h6{color:var(--primaryColor60);margin-top:4px;margin-bottom:8px;font-size:13px}.App.Panel header .headerNotificationPanel .expandPanel .content .singleNotification p{font-size:15px}.App.Panel header .headerNotificationPanel .expandPanel .content{width:100%;display:grid}@media (max-width:1080px){.App.Panel{grid-template-columns:1fr;grid-template-areas:"header""main"}.App.Panel nav{flex-direction:row;width:100%;height:64px;padding:10px 24px;position:fixed;bottom:0}.App.Panel nav .navMenu,.App.Panel nav hr{display:none}.App.Panel nav .navPanel{flex-direction:row;justify-content:space-evenly;width:100%}.App.Panel nav .navPanel a{height:44px}.App.Panel header .navMenu{display:flex}.App.Panel header .headerNotificationPanel>a.onlyMovil{display:flex!important}}