/* V141 — horizontal application navigation and zero-offset content flow */
:root{--tlm-topnav-h:68px;--tlm-context-h:58px}
#app-shell,#app-shell.sidebar-collapsed{
 --tlm-sidebar:100%!important;
 display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;
 grid-template-rows:var(--tlm-topnav-h) var(--tlm-context-h) auto!important;
 grid-template-areas:"navigation" "context" "content"!important;
 width:100%!important;height:auto!important;min-height:100vh!important;
 margin-left:0!important;padding:0!important;
}
#app-shell>.app-sidebar{
 grid-area:navigation!important;position:sticky!important;inset:0 auto auto 0!important;
 width:100%!important;height:var(--tlm-topnav-h)!important;min-height:var(--tlm-topnav-h)!important;
 display:flex!important;flex-direction:row!important;align-items:center!important;
 overflow:visible!important;background:var(--tlm-navy)!important;z-index:120!important;
 border:0!important;border-bottom:1px solid rgba(255,255,255,.1)!important;
 transform:none!important;
}
#app-shell .sidebar-brand{
 width:220px!important;height:var(--tlm-topnav-h)!important;min-height:var(--tlm-topnav-h)!important;
 flex:0 0 220px!important;padding:0 18px!important;border:0!important;border-right:1px solid rgba(255,255,255,.09)!important;
}
#app-shell .sidebar-collapse,#app-shell .mobile-nav-toggle,#app-shell .sidebar-scrim{display:none!important}
#app-shell .brand-lockup{display:block!important}
#app-shell .app-nav{
 height:100%!important;min-width:0!important;flex:1!important;padding:0 14px!important;
 display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:3px!important;overflow-x:auto!important;overflow-y:hidden!important;
 scrollbar-width:thin!important;
}
#app-shell .app-nav>.nav-section-label{display:none!important}
#app-shell .app-nav>.nav-main,#app-shell .app-nav>.nav-group>.nav-group-toggle{
 width:auto!important;min-width:max-content!important;height:40px!important;min-height:40px!important;
 margin:0!important;padding:0 11px!important;border-radius:8px!important;gap:8px!important;
 color:#adbdca!important;font-size:11.5px!important;
}
#app-shell .app-nav>.nav-main .tab-label,#app-shell .app-nav>.nav-group>.nav-group-toggle .tab-label{display:inline!important;overflow:visible!important}
#app-shell .app-nav>.nav-main.active:before,#app-shell .app-nav>.nav-group.active>.nav-group-toggle:before{
 left:10px!important;right:10px!important;top:auto!important;bottom:-14px!important;width:auto!important;height:3px!important;border-radius:3px 3px 0 0!important;
}
#app-shell .app-nav>.nav-group{position:relative!important;display:block!important;width:auto!important;height:40px!important;min-height:40px!important;flex:0 0 auto!important;margin:0!important;padding:0!important}
#app-shell .app-nav .nav-group-items{
 position:fixed!important;top:68px!important;left:auto!important;width:220px!important;
 display:none!important;padding:7px!important;margin:0!important;background:#0d2236!important;
 border:1px solid #253b50!important;border-radius:10px!important;box-shadow:0 18px 38px rgba(3,12,23,.28)!important;
 grid-template-rows:none!important;opacity:1!important;z-index:300!important;
}
#app-shell .app-nav .nav-group.open>.nav-group-items{display:block!important}
#app-shell .app-nav .nav-group-items button{
 width:100%!important;min-height:36px!important;margin:1px 0!important;padding:0 10px!important;color:#aabcc9!important;
}
#app-shell>.app-header{
 grid-area:context!important;position:sticky!important;top:var(--tlm-topnav-h)!important;left:auto!important;right:auto!important;
 width:100%!important;height:var(--tlm-context-h)!important;min-height:var(--tlm-context-h)!important;
 margin:0!important;padding:0 clamp(16px,2.4vw,36px)!important;z-index:100!important;
}
#app-shell>main{
 grid-area:content!important;grid-column:1!important;grid-row:3!important;position:relative!important;inset:auto!important;
 display:block!important;width:100%!important;height:auto!important;min-height:calc(100vh - var(--tlm-topnav-h) - var(--tlm-context-h))!important;
 margin:0!important;padding:0!important;overflow:visible!important;align-self:start!important;
}
#app-shell>main>#dashboard-root{display:none!important;position:static!important;width:0!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important}
#app-shell>main>.tab-panel,#app-shell>main>.tab-panel.active{
 position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
 transform:none!important;float:none!important;clear:none!important;width:100%!important;height:auto!important;min-height:0!important;
 margin:0!important;padding:24px clamp(16px,2.5vw,38px) 48px!important;vertical-align:top!important;
}
#app-shell>main>.tab-panel:not(.active){display:none!important}
#app-shell>main>.tab-panel.active{display:block!important}
#app-shell>main>.tab-panel.active>:first-child{margin-top:0!important}
#tab-temporada,#tab-perfiles,#tab-planificación,#tab-readiness,#tab-antropometria{padding-top:24px!important}
body.demo-mode #app-shell{height:auto!important;min-height:calc(100vh - 38px)!important;margin-top:38px!important}
body.demo-mode #app-shell>.app-sidebar{top:0!important;height:var(--tlm-topnav-h)!important}
body.demo-mode #app-shell>.app-header{top:var(--tlm-topnav-h)!important}
body.demo-mode #app-shell .app-nav .nav-group-items{top:106px!important}

@media(max-width:1180px){
 #app-shell .sidebar-brand{width:178px!important;flex-basis:178px!important}
 #app-shell .brand-name{font-size:12px!important}
 #app-shell .app-nav{padding-inline:8px!important;gap:0!important}
 #app-shell .app-nav>.nav-main,#app-shell .app-nav>.nav-group>.nav-group-toggle{padding-inline:8px!important;font-size:10.5px!important}
 #app-shell .app-nav .tab-icon{width:16px!important;height:16px!important;min-width:16px!important}
}
@media(max-width:900px){
 :root{--tlm-topnav-h:116px;--tlm-context-h:54px}
 #app-shell>.app-sidebar{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:52px 64px!important;align-items:stretch!important}
 #app-shell .sidebar-brand{width:100%!important;height:52px!important;min-height:52px!important;flex-basis:auto!important;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;padding-inline:14px!important}
 #app-shell .sidebar-brand .brand-mark{width:29px!important;height:29px!important;min-width:29px!important}
 #app-shell .app-nav{width:100%!important;height:64px!important;overflow-x:auto!important;overflow-y:visible!important;padding:0 10px!important;justify-content:flex-start!important}
 #app-shell .app-nav>.nav-main,#app-shell .app-nav>.nav-group>.nav-group-toggle{height:38px!important;min-height:38px!important}
 #app-shell .app-nav>.nav-main.active:before,#app-shell .app-nav>.nav-group.active>.nav-group-toggle:before{bottom:-13px!important}
 #app-shell .app-nav .nav-group-items{position:fixed!important;top:104px!important;left:12px!important;width:min(260px,calc(100vw - 24px))!important}
 #app-shell>.app-header{padding-inline:12px!important}
 body.demo-mode #app-shell>.app-header{top:var(--tlm-topnav-h)!important}
 body.demo-mode #app-shell .app-nav .nav-group-items{top:154px!important}
 #app-shell>main>.tab-panel,#app-shell>main>.tab-panel.active{padding:18px 14px 38px!important}
}
@media(max-width:560px){
 #app-shell .app-header .ah-title-wrap{min-width:0!important;flex:1!important}
 #app-shell .app-header #header-equipo-select{max-width:138px!important}
 #app-shell .app-header>div:last-of-type>div:first-child{display:none!important}
 #app-shell .app-nav>.nav-main,#app-shell .app-nav>.nav-group>.nav-group-toggle{padding-inline:9px!important}
}
