/* bexel v64 — responsive hardening. Final responsive layer, loaded after the base design. */
:root{--bexel-mobile-gutter:16px;--bexel-touch:44px}
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{min-height:100dvh;-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,iframe,canvas,svg{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
.main,.content,.page,.page-content,.card,.card-soft,.panel,.hero,.table-wrap{min-width:0}

@media(max-width:900px){
 body.mobile-nav-open{overflow:hidden!important;touch-action:none}
 .app-shell{display:block!important;min-height:100dvh!important}
 .app-shell>.main{width:100%!important;min-height:100dvh!important;min-width:0!important}
 .app-shell>.sidebar#appSidebar{position:fixed!important;inset:0 auto 0 0!important;width:min(340px,88vw)!important;height:100dvh!important;z-index:2001!important;transform:translate3d(-105%,0,0)!important;transition:transform .22s ease!important;will-change:transform;display:flex!important;flex-direction:column!important;overscroll-behavior:contain!important}
 body.mobile-nav-open .app-shell>.sidebar#appSidebar{transform:translate3d(0,0,0)!important}
 .mobile-backdrop{position:fixed!important;inset:0!important;z-index:2000!important;background:rgba(0,0,0,.58)!important;backdrop-filter:blur(2px)!important;opacity:0!important;pointer-events:none!important;transition:opacity .2s ease!important}
 body.mobile-nav-open .mobile-backdrop{opacity:1!important;pointer-events:auto!important}
 .mobile-nav-close{display:grid!important;place-items:center!important;min-width:44px!important;min-height:44px!important}
 .sidebar-nav{min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
 .sidebar-bottom{padding-bottom:max(10px,env(safe-area-inset-bottom))!important}
 .mobile-menu{display:grid!important;place-items:center!important;min-width:var(--bexel-touch)!important;min-height:var(--bexel-touch)!important;padding:0!important}
 .topbar{position:sticky!important;top:0!important;z-index:40!important}
 .content{padding-bottom:max(28px,calc(28px + env(safe-area-inset-bottom)))!important}
 .grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .modal,.modal-overlay{padding:16px!important}
 .modal-box,.modal-content{width:min(100%,720px)!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important}
}

@media(max-width:620px){
 :root{--bexel-mobile-gutter:14px}
 body{font-size:15px}
 .content{padding:16px var(--bexel-mobile-gutter) max(24px,calc(24px + env(safe-area-inset-bottom)))!important}
 .topbar{min-height:58px!important;padding:7px 10px!important}
 .top-status{display:none!important}
 .breadcrumb{min-width:0!important;overflow:hidden!important}.breadcrumb span,.breadcrumb b{display:none!important}.breadcrumb strong{display:block!important;max-width:calc(100vw - 80px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
 h1{font-size:clamp(26px,8vw,34px)!important;line-height:1.1!important}h2{font-size:clamp(20px,6vw,25px)!important}h3{font-size:17px!important}
 .grid,.grid-2,.grid-3,.grid-4,.form-grid,.media-grid,[class*="-grid"]{grid-template-columns:minmax(0,1fr)!important}
 [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
 .hero,.card,.card-soft,.panel{width:100%!important;max-width:100%!important;min-width:0!important}
 .hero,.card,.card-soft,.panel{padding-left:min(18px,5vw)!important;padding-right:min(18px,5vw)!important}
 .section-head,.split,.actions,.hero-actions{flex-wrap:wrap!important}.section-head>.actions,.section-head>.btn{width:100%!important}
 .btn{min-height:var(--bexel-touch)!important}.input,select.input,textarea.input,input[type="text"],input[type="number"],input[type="email"],input[type="password"]{font-size:16px!important;min-height:var(--bexel-touch)!important}
 textarea,textarea.input{min-height:96px!important}
 .table-wrap{max-width:100%!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important}.table-wrap table{min-width:max-content!important}
 .tabs,.tab-list,[role="tablist"],.r38-tabs{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important}.tabs>*,.tab-list>*,[role="tablist"]>*{flex:0 0 auto!important}
 .modal,.modal-overlay{align-items:flex-end!important;padding:0!important}.modal-box,.modal-content{width:100%!important;max-height:90dvh!important;border-radius:20px 20px 0 0!important;padding-bottom:max(16px,env(safe-area-inset-bottom))!important}
 /* Chat and messaging */
 .chat-layout{display:flex!important;flex-direction:column!important;gap:10px!important}.chat-list{width:100%!important;max-height:260px!important}.chat-window{width:100%!important;min-height:56dvh!important;height:auto!important}.chat-messages{min-height:38dvh!important}.chat-composer{position:sticky!important;bottom:0!important;z-index:2!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
 /* Calendar: keep the grid readable by scrolling its own container, never the whole page. */
 .calendar-grid,.calendar-week,.week-grid{display:grid!important;max-width:none!important;min-width:560px!important}.calendar-grid,.calendar-week,.week-grid{overflow:visible!important}.calendar-grid-wrap,.calendar-wrap,.routine-calendar-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
 .routine-calendar-grid{min-width:720px!important}.routine-menu{position:static!important;top:auto!important}
 /* Guided routine session */
 .r38-set{grid-template-columns:1fr 1fr!important}.r38-set-number,.r38-check{grid-column:1/-1!important}.r38-media{min-height:0!important;aspect-ratio:4/3!important}.r38-media-title{left:16px!important;right:16px!important;bottom:14px!important}.r38-body{padding:16px!important}.r38-drawer{z-index:2100!important}.r38-drawer-panel{width:100%!important;max-width:none!important;height:auto!important;max-height:90dvh!important;padding:16px!important;padding-bottom:max(16px,env(safe-area-inset-bottom))!important}
 /* AI: no fixed desktop-sized chat on a phone */
 .ai-hero{grid-template-columns:1fr!important}.ai-card{padding:14px!important}.ai-chat{height:auto!important;min-height:58dvh!important;max-height:none!important}.ai-messages{min-height:42dvh!important;max-height:56dvh!important;overflow:auto!important}.ai-msg{max-width:94%!important}.ai-compose{grid-template-columns:1fr!important}.ai-compose .btn{width:100%!important}
 /* Marketplace and profile cards */
 #trainers,.trainer-grid,.market-grid{grid-template-columns:minmax(0,1fr)!important}
 [style*="width:1280px"],[style*="width:1000px"],[style*="width:980px"],[style*="width:900px"],[style*="width:760px"],[style*="width:700px"]{width:100%!important;max-width:100%!important}
}

@media(max-width:390px){:root{--bexel-mobile-gutter:10px}.app-shell>.sidebar#appSidebar{width:92vw!important}.content{padding-left:10px!important;padding-right:10px!important}.card,.card-soft,.hero{padding-left:13px!important;padding-right:13px!important}.nav-link{min-height:44px!important}}


/* =========================================================
   bexel v64.1 — Creador de rutinas móvil + navegación desktop
   Targeted polish on top of the v64 responsive layer.
   ========================================================= */

/* The menu close control belongs to the mobile drawer only. */
@media (min-width:901px){
  .mobile-nav-close{display:none!important}
  .mobile-nav-head{display:block!important}
  .sidebar-bottom{
    margin-top:auto!important;
    padding:14px 8px 10px!important;
    border-top:1px solid var(--border)!important;
  }
  .logout-link{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    min-height:46px!important;
    padding:11px 13px!important;
    border:1px solid var(--border)!important;
    border-radius:13px!important;
    background:var(--surface-2)!important;
    color:var(--text-2)!important;
    cursor:pointer!important;
    text-align:left!important;
  }
  .logout-link:hover{
    background:var(--accent-soft)!important;
    border-color:rgba(79,143,134,.28)!important;
    color:var(--text)!important;
  }
  .logout-link .nav-text{display:inline!important;font-size:13px!important}
}

/* Routine editor: the form itself owns scrolling so controls stay reachable. */
.routine-editor-modal{width:min(1100px,calc(100vw - 48px))!important}
.routine-editor-modal .routine-builder{
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
}
.routine-editor-modal .routine-builder-scroll{
  min-height:0!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}
.routine-editor-modal .routine-builder-foot{
  position:relative!important;
  flex:0 0 auto!important;
}

/* Phone layout for the routine creator: single-column, thumb-friendly, no clipped panels. */
@media (max-width:620px){
  body:has(.routine-editor-modal){overflow:hidden!important}

  .modal:has(.routine-editor-modal){
    align-items:stretch!important;
    padding:0!important;
  }
  .routine-editor-modal.modal-box{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    padding:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .routine-editor-modal .routine-editor-top{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:flex-start!important;
    gap:10px!important;
    padding:18px 16px 14px!important;
  }
  .routine-editor-modal .routine-editor-top>div{min-width:0!important}
  .routine-editor-modal .routine-editor-top h2{margin:4px 0 6px!important}
  .routine-editor-modal .routine-editor-top p{font-size:12px!important;line-height:1.45!important}
  .routine-editor-modal #closeModal{
    flex:0 0 auto!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0 12px!important;
  }

  .routine-editor-modal .routine-builder{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    overflow:hidden!important;
  }
  .routine-editor-modal .routine-editor-tabs{
    flex:0 0 auto!important;
    width:100%!important;
    padding:8px 12px!important;
    gap:6px!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    border-top:1px solid var(--border)!important;
    border-bottom:1px solid var(--border)!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .routine-editor-modal .routine-editor-tab{
    flex:0 0 auto!important;
    min-height:42px!important;
    padding:0 14px!important;
  }
  .routine-editor-modal .routine-builder-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    padding:14px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .routine-editor-modal .routine-meta-panel,
  .routine-editor-modal .routine-exercises-panel,
  .routine-editor-modal .routine-summary-panel{
    width:100%!important;
    min-width:0!important;
  }

  .routine-editor-modal .routine-builder-head,
  .routine-editor-modal .routine-builder-head .actions,
  .routine-editor-modal .split{
    align-items:stretch!important;
  }
  .routine-editor-modal .routine-builder-head .actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .routine-editor-modal .routine-builder-head .actions .btn{width:100%!important}

  .routine-editor-modal .routine-builder-row{
    display:block!important;
    position:relative!important;
    padding:14px!important;
  }
  .routine-editor-modal .routine-order{
    position:static!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin-bottom:10px!important;
  }
  .routine-editor-modal .routine-row-tools{
    position:static!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    margin-top:12px!important;
  }
  .routine-editor-modal .routine-row-tools .btn{
    width:100%!important;
    min-height:44px!important;
  }
  .routine-editor-modal .routine-exercise-fields{min-width:0!important}

  /* Per-series data remains readable without forcing the whole page sideways. */
  .routine-editor-modal .per-set-config{
    padding:10px!important;
    overflow:hidden!important;
  }
  .routine-editor-modal .per-set-config>.split{
    display:block!important;
  }
  .routine-editor-modal .apply-base-sets{
    width:100%!important;
    margin-top:10px!important;
  }
  .routine-editor-modal .per-set-head,
  .routine-editor-modal .set-detail-row{
    min-width:500px!important;
  }
  .routine-editor-modal .per-set-config:has(.set-detail-row){
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .routine-editor-modal .routine-summary-hero{
    display:block!important;
  }
  .routine-editor-modal .routine-progress-ring{
    margin:14px auto 0!important;
  }

  .routine-editor-modal .routine-builder-foot{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    padding:12px 14px max(12px,env(safe-area-inset-bottom))!important;
    border-top:1px solid var(--border)!important;
    background:var(--surface)!important;
  }
  .routine-editor-modal .routine-builder-foot .btn{
    width:100%!important;
    min-height:48px!important;
  }
  .routine-editor-modal .routine-builder-foot .small{
    font-size:11px!important;
    line-height:1.35!important;
  }
}

@media (max-width:390px){
  .routine-editor-modal .routine-editor-top{padding-left:12px!important;padding-right:12px!important}
  .routine-editor-modal .routine-builder-scroll{padding:10px!important}
  .routine-editor-modal .routine-row-tools{grid-template-columns:1fr!important}
}


/* bexel v64.2 — Desktop sidebar logout visibility fix.
   The navigation is the only scrollable area, so the account actions never get pushed below the viewport. */
@media (min-width:901px){
  .sidebar#appSidebar{height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;}
  .sidebar#appSidebar .sidebar-nav{
    flex:1 1 0!important;
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    padding-bottom:8px!important;
  }
  .sidebar#appSidebar .sidebar-bottom{
    flex:0 0 auto!important;
    margin-top:0!important;
    position:relative!important;
    z-index:2!important;
    padding-top:10px!important;
    padding-bottom:8px!important;
    background:var(--surface)!important;
  }
  .sidebar#appSidebar .logout-link{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    min-height:44px!important;
  }
}

/* v12 chat selection hardening */
.chat-list-item{position:relative!important;z-index:3!important;pointer-events:auto!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important}
.chat-list-item *{pointer-events:none!important}

/* BEXEL BRAND PALETTE V14 */
:root{--accent:#587f79;--accent-strong:#3f625e;--accent-soft:rgba(79,143,134,.12);--accent-line:rgba(79,143,134,.26);--accent-wash:rgba(79,143,134,.055);--brand-metal:#d0c8bc;--brand-metal-2:#918a80;--bg:#0a0c0c;--surface:#111414;--surface-2:#181c1b;--surface-3:#222725;--text:#f1ede5;--text-2:#a9aaa5;--text-3:#777b78;--border:rgba(241,237,229,.085);--border-strong:rgba(241,237,229,.15);--shadow:0 24px 70px rgba(0,0,0,.30);--shadow-sm:0 10px 32px rgba(0,0,0,.22)}
html[data-theme="dark"]{--accent:#587f79;--accent-strong:#3f625e;--accent-soft:rgba(79,143,134,.14);--accent-line:rgba(79,143,134,.28);--accent-wash:rgba(79,143,134,.06);--bg:#0a0c0c;--surface:#111414;--surface-2:#181c1b;--surface-3:#222725;--text:#f1ede5;--text-2:#a9aaa5;--text-3:#777b78;--border:rgba(241,237,229,.085);--border-strong:rgba(241,237,229,.15)}
html[data-theme="light"]{--accent:#3f625e;--accent-strong:#3f625e;--accent-soft:rgba(47,174,159,.10);--accent-line:rgba(47,174,159,.24);--accent-wash:rgba(47,174,159,.055);--bg:#f3f0eb;--surface:#fffdf9;--surface-2:#f0ede7;--surface-3:#e7e3dc;--text:#191a18;--text-2:#5d625f;--text-3:#858984;--border:rgba(25,26,24,.085);--border-strong:rgba(25,26,24,.15);--shadow:0 24px 70px rgba(25,26,24,.08);--shadow-sm:0 10px 32px rgba(25,26,24,.05)}
html[data-theme="dark"] .nav-link.active{color:#d9e5e1;background:linear-gradient(90deg,rgba(79,143,134,.16),rgba(79,143,134,.06))!important;border-color:rgba(79,143,134,.20);box-shadow:inset 3px 0 0 var(--accent),0 7px 24px rgba(79,143,134,.045)}
html[data-theme="dark"] .btn-primary,html[data-theme="dark"] .btn-primary:hover{color:#071d1b}.brand-image img{filter:drop-shadow(0 10px 24px rgba(79,143,134,.12))}.auth-wrap{background:radial-gradient(circle at 50% 0,rgba(79,143,134,.10),transparent 32%),var(--bg)}

/* BEXEL logo lockup responsive refinements */
.mobile-nav-head .bexel-brand{display:flex!important;align-items:center!important;gap:9px!important}
.mobile-nav-head .bexel-brand-mark{display:grid!important;place-items:center!important}
.mobile-nav-head .bexel-brand-mark img{display:block!important;max-width:none!important;object-position:center!important}


/* BEXEL V4 — responsive palette consolidation */
:root{--accent:#587f79;--accent-strong:#3f625e;--accent-soft:rgba(88,127,121,.13);--accent-line:rgba(88,127,121,.25);--accent-wash:rgba(88,127,121,.055);--brand-metal:#d0c8bc;--brand-metal-2:#918a80;--bg:#0a0c0c;--surface:#111414;--surface-2:#181c1b;--surface-3:#222725;--text:#eeeae2;--text-2:#aaa9a3;--text-3:#777a76;}
html[data-theme="dark"]{--accent:#587f79;--accent-strong:#3f625e;--accent-soft:rgba(88,127,121,.14);--accent-line:rgba(88,127,121,.27);--accent-wash:rgba(88,127,121,.06);--bg:#0a0c0c;--surface:#111414;--surface-2:#181c1b;--surface-3:#222725;--text:#eeeae2;--text-2:#aaa9a3;--text-3:#777a76;}
html[data-theme="light"]{--accent:#3f625e;--accent-strong:#324f4b;--accent-soft:rgba(63,98,94,.09);--accent-line:rgba(63,98,94,.22);--accent-wash:rgba(63,98,94,.045);--bg:#f0eee9;--surface:#fcfbf8;--surface-2:#e9e5de;--surface-3:#ddd8cf;--text:#1c1d1c;--text-2:#5e625f;--text-3:#858781;}