/* TrainingLoadManager v216 — consolidated responsive layer.
   Loaded last on purpose: one predictable mobile/tablet composition. */

html{max-width:100%}
img,svg,canvas,video{max-width:100%}
button,input,select,textarea{max-width:100%}

/* ---------- Public landing ---------- */
@media (max-width:768px){
  .landing-v213{overflow:visible}
  .landing-v213 .lp-nav .ln-container{position:relative}
  .landing-v213 .lp-nav .mobile-open .lp-links{max-height:calc(100dvh - 66px);overflow-y:auto;box-shadow:0 18px 35px rgba(7,27,44,.15)}
  .landing-v213 .lp-nav .mobile-open .lp-links>a,
  .landing-v213 .lp-nav .mobile-open .lp-links>button{min-height:48px;display:flex;align-items:center}
  .landing-v213 .lp-nav .mobile-open .lp-links .ln-cta{justify-content:center}
  .landing-v213 .lp-hero-product{overflow:hidden}
  .landing-v213 .lp-shot{height:clamp(245px,70vw,350px);overflow:hidden;padding:5px;background:#e9eef2}
  .landing-v213 .lp-shot img{width:auto;max-width:none;height:100%;object-fit:cover;object-position:18% center}
  .landing-v213 .lp-wide-shot{height:clamp(260px,72vw,390px);overflow:hidden;border:1px solid #9eacb7;background:#e9eef2}
  .landing-v213 .lp-wide-shot img{width:auto;max-width:none;height:100%;object-fit:cover;object-position:42% center;border:0}
  .landing-v213 .lp-wide-shot figcaption{position:absolute;left:-9999px}
  .landing-v213 .lp-product-figure,.landing-v213 .lp-pair figure,.landing-v213 .lp-players figure{overflow:hidden}
  .landing-v213 .lp-product-figure img,.landing-v213 .lp-pair img,.landing-v213 .lp-players figure img{min-height:230px;object-fit:cover;object-position:left center}
  .landing-v213 .lp-plan-common p{min-height:42px;display:flex!important;align-items:center}
  .landing-v213 .lp-plan-compare button,.landing-v213 .lp-faq-list button{min-height:48px}
  .landing-v213 .lp-footer nav a{min-height:44px;display:flex;align-items:center}
}
@media (max-width:430px){
  .landing-v213 .lp-shell{width:calc(100% - 32px)}
  .landing-v213 .lp-hero{padding-top:52px}
  .landing-v213 .lp-hero h1{font-size:clamp(40px,11.3vw,49px);line-height:.98;overflow-wrap:anywhere}
  .landing-v213 .lp-lead{font-size:16px;line-height:1.55}
  .landing-v213 .lp-problem,.landing-v213 .lp-feature,.landing-v213 .lp-players,.landing-v213 .lp-senior,.landing-v213 .lp-pricing{padding:68px 0}
  .landing-v213 .lp-problem h2,.landing-v213 .lp-feature h2,.landing-v213 .lp-workflow h2,.landing-v213 .lp-players h2,.landing-v213 .lp-senior h2,.landing-v213 .lp-pricing h2,.landing-v213 .lp-faq h2{font-size:34px;overflow-wrap:anywhere}
  .landing-v213 .lp-workflow li{grid-template-columns:28px 92px minmax(0,1fr);gap:4px}
  .landing-v213 .lp-workflow li span{font-size:12px}
  .landing-v213 .lp-plan-compare header{gap:12px}
  .landing-v213 .lp-plan-compare header>strong{font-size:25px}
  .landing-v213 .lp-footer nav{width:100%;grid-template-columns:1fr 1fr;gap:0 20px}
}

/* ---------- Private product shell ---------- */
@media (max-width:900px){
  #app-shell{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:60px minmax(0,1fr)!important;grid-template-areas:"header" "main"!important;width:100%!important;max-width:100%!important}
  body.demo-mode #app-shell{height:calc(100dvh - 38px)!important;min-height:0!important}
  #app-shell>.app-header{grid-area:header!important;grid-column:1!important;height:60px!important;min-height:60px!important;padding:0 12px!important;gap:10px!important;position:relative!important;top:0!important;left:0!important}
  html body #app-shell>header.app-header{top:0!important;inset-block-start:0!important;transform:none!important}
  body.demo-mode #app-shell>.app-header{top:0!important}
  #app-shell>.app-sidebar{position:fixed!important;inset:0 auto 0 0!important;width:min(290px,86vw)!important;max-width:86vw!important;height:100dvh!important;z-index:1001!important;transform:translateX(-102%)!important;transition:transform .2s ease!important;box-shadow:18px 0 44px rgba(4,18,32,.25)!important}
  #app-shell.mobile-nav-open>.app-sidebar,#app-shell.sidebar-open>.app-sidebar{transform:translateX(0)!important}
  #app-shell.mobile-nav-open:after,#app-shell.sidebar-open:after{content:"";position:fixed;inset:0;background:rgba(4,18,32,.48);z-index:1000}
  #app-shell>main{grid-area:main!important;grid-column:1!important;width:100%!important;max-width:100%!important;min-width:0!important}
  body.demo-mode #app-shell>.app-sidebar{top:38px!important;height:calc(100dvh - 38px)!important}
  #app-shell>.app-header .mobile-nav-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 44px!important;width:44px!important;height:44px!important;padding:10px!important}
  .app-header .ah-title-wrap{min-width:0!important;flex:1 1 auto!important}
  .app-header .header-team-switcher{min-width:0!important;width:min(100%,330px)!important}
  .app-header .header-team-switcher label{min-width:0!important;flex:1 1 auto!important}
  .app-header .header-team-switcher select{min-width:0!important;width:100%!important;text-overflow:ellipsis!important}
  .app-header>div:last-child{gap:6px!important;flex:0 0 auto!important}
  .app-header>div:last-child>div:first-child,.app-header>div:last-child>div:nth-child(2){display:none!important}
  .app-header .profile-trigger{width:44px!important;height:44px!important;justify-content:center!important;padding:4px!important}
  .app-header .profile-trigger .ah-user-name,.app-header .profile-trigger>svg{display:none!important}
  #user-menu{top:56px!important;right:10px!important;max-width:calc(100vw - 20px)!important}
  #app-shell>main>.tab-panel{width:100%!important;max-width:100%!important;min-width:0!important}
  .tab-panel>.page,.tab-panel>.page-shell,.tab-panel>[class$="-wrap"],.tab-panel>[class$="-root"]{max-width:100%!important}
  .panel-header,.page-header,.ce44-toolbar,.salud-toolbar,.somato-toolbar,.unified-report-toolbar,.load-player-toolbar,.pm-pro-toolbar,.mcf-toolbar{flex-wrap:wrap!important;gap:12px!important}
  .panel-header>* ,.page-header>* ,.ce44-toolbar>* ,.salud-toolbar>* ,.somato-toolbar>* ,.unified-report-toolbar>*{min-width:0!important}
  .pricing-grid,.dashboard-grid,.inicio-grid,.analysis-grid,.charts-grid,.grid-2,.page-grid,.wellness-chart-grid,.injury-insights-grid,.somato-grid,.fr-grid{grid-template-columns:1fr!important}
  .kpi-grid,.kpis-grid,.dash-kpis,.db-kpis,.inicio-kpis,.salud-kpis-grid,.report-kpi-grid,.tlr-kpis,.pv38-kpis,.mcf-summary-kpis,.cmj-analisis-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .table-wrap,.report-table-wrap,.tlr-table-wrap,.fr-table-wrap,.somato-table-wrap,.wellness-table-wrap,.pm-minutes-table-wrap,.match-science-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .table-wrap table,.report-table-wrap table,.tlr-table-wrap table,.fr-table-wrap table,.somato-table-wrap table,.wellness-table-wrap table,.pm-minutes-table-wrap table,.match-science-table-wrap table{min-width:680px}
  canvas{width:100%!important;max-width:100%!important}
  .modal,.modal-content,.profile-modal,.team-admin-modal{max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important}
}

@media (max-width:640px){
  #app-shell>.app-header{padding-inline:8px!important}
  .app-header .header-team-icon{display:none!important}
  .app-header .header-team-switcher{width:auto!important;flex:1 1 auto!important;max-width:none!important}
  .app-header .header-team-switcher label>span{font-size:8px!important}
  .app-header .header-team-manage{flex:0 0 40px!important;width:40px!important;height:40px!important}
  #app-shell>main>.tab-panel{padding:12px!important}
  .tab-panel h1,.tab-panel .page-title{font-size:clamp(24px,8vw,32px)!important;line-height:1.05!important;overflow-wrap:anywhere}
  .tab-panel h2{overflow-wrap:anywhere}
  .subtabs,.tabs,.salud-tabs,.fr-tabs,.match-tabs,.partido-tabs,.plan-v38-tabs,.isak-tabs{display:flex!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain;scrollbar-width:none}
  .subtabs::-webkit-scrollbar,.tabs::-webkit-scrollbar,.salud-tabs::-webkit-scrollbar,.fr-tabs::-webkit-scrollbar,.match-tabs::-webkit-scrollbar,.partido-tabs::-webkit-scrollbar{display:none}
  .subtabs button,.tabs button,.salud-tabs button,.fr-tabs button,.match-tabs button,.partido-tabs button,.plan-v38-tabs button,.isak-tabs button{flex:0 0 auto!important;min-height:44px!important;white-space:nowrap!important}
  .kpi-grid,.kpis-grid,.dash-kpis,.db-kpis,.inicio-kpis,.salud-kpis-grid,.report-kpi-grid,.tlr-kpis,.pv38-kpis,.mcf-summary-kpis,.cmj-analisis-kpis{grid-template-columns:1fr!important}
  .player-grid,.players-cards-grid,.player-load-grid,.pv38-grid,.pm-pro-grid,.pm32-grid,.pm33-grid,.pp24-grid,.ce44-picker-grid,.ce44-guide-grid,.report-guide-grid,.injury-form-grid,.form-grid,.profile-edit-grid{grid-template-columns:1fr!important}
  .cal-grid,.pv38-annual-grid{grid-template-columns:repeat(7,minmax(42px,1fr))!important;overflow-x:auto!important}
  .calendar-day,.pv38-annual-grid>*{min-width:42px!important}
  input,select,textarea{font-size:16px!important}
  button,.btn,[role="button"]{min-height:44px}
  .ce44-task-toolbar,.ce44-task-toolbar-main,.ce44-toolbar,.pm-header,.pm-pro-header,.mcf-header{flex-wrap:wrap!important}
  .ce44-task-toolbar>* ,.ce44-toolbar>* ,.pm-header>* ,.mcf-header>*{min-width:0!important}
  .ce44-guide-grid{font-size:12px!important}
  .pricing-card{padding:24px 20px!important}
}

@media (max-width:430px){
  .app-header .header-team-switcher{max-width:calc(100vw - 112px)!important}
  .app-header .header-team-manage{display:none!important}
  .app-header .header-team-switcher label>span{display:none!important}
  .app-header .header-team-switcher select{height:42px!important}
  #app-shell>main>.tab-panel{padding:10px!important}
  .panel-header,.page-header{margin-bottom:16px!important;padding-top:8px!important}
  .modal,.modal-content,.profile-modal,.team-admin-modal{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;margin:8px!important;border-radius:12px!important}
  .lp-plan-compare article{max-width:100%}
}
