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