.app-shell > .app-header { position:relative; }
.fitness-nav { position:sticky; top:0; z-index:21; display:flex; align-items:center; justify-content:center; gap:8px; padding:4px max(12px,env(safe-area-inset-left)); background:rgba(248,251,247,.97); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.fitness-nav-tabs { display:flex; flex:1; max-width:380px; gap:2px; padding:2px; background:#eaf0eb; border-radius:12px; }
.fitness-nav-link { display:flex; flex:1; min-width:0; min-height:44px; align-items:center; justify-content:center; gap:7px; padding:6px 12px; border-radius:10px; color:#53695d; font-size:13px; font-weight:600; text-decoration:none; }
.fitness-nav-link svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fitness-nav-link.is-active { background:#fff; color:#176a49; box-shadow:0 2px 5px #213e2710; }
.fitness-nav #settingsButton { display:flex; align-items:center; justify-content:center; gap:6px; flex:none; width:auto; min-width:76px; min-height:44px; padding:0 10px; border:0; border-radius:10px; background:transparent; color:#28704f; font-size:13px; }
.fitness-nav #settingsButton svg { width:19px; height:19px; }
.fitness-nav :is(a,button):focus-visible { outline:3px solid #268a64; outline-offset:2px; }
.route-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px; gap: 16px; }
.route-toolbar .button { min-height:44px; padding:8px 12px; font-size:13px; border-radius:10px; }
.route-title { font-size: clamp(25px,4vw,34px); letter-spacing: -.8px; margin: 0; }
.fitness-page { min-width: 0; }
.fitness-page > :first-child { margin-top: 0; }
.profile-page-card { max-width: 800px; margin: auto; padding: 28px; }
.profile-page-card .settings-grid { margin-block: 24px; }
.profile-privacy { margin-block: 20px; line-height: 1.6; color: var(--muted); font-size: 14px; }
.profile-privacy a { color: var(--green); }
.quick-launch { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.quick-launch button { background: var(--surface); color: var(--green); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; cursor: pointer; font-weight: 650; }
.quick-launch button.is-active { background: var(--green-soft); border-color: var(--green); }
.quick-section .quick-grid { grid-template-columns: minmax(0,1fr); max-width: 640px; }
.quick-section { margin-top: 20px; }
.history-tools { display: flex; align-items: end; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.history-tools label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.history-tools input, .history-tools select { padding: 10px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; color: var(--ink); }
.fitness-date-loading .day-heading { opacity: .65; }
.date-context { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.strength-progress { margin-top: 24px; padding: 24px; }
.strength-progress h2 { margin: 0 0 8px; }
.strength-progress p { color: var(--muted); font-size: 14px; }
.strength-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.strength-table th, .strength-table td { border-bottom: 1px solid var(--line); padding: 12px 8px; }
.strength-table th { color: var(--muted); font-size: 12px; }
.strength-table-wrap { overflow-x: auto; }
.strength-plus { margin-top: 20px; display: grid; gap: 10px; }
.strength-plus h3 { margin: 6px 0 0; font-size: 15px; }
.strength-records { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.strength-records li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.strength-records li div { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.strength-records li span { color: var(--muted); font-size: 13px; }
.strength-records .strength-new { color: var(--green); font-weight: 700; }
.strength-spark { width: 96px; height: 24px; flex: none; color: var(--green); }
.strength-spark polyline { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.strength-weeks { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 72px; }
.strength-weeks span { background: var(--green); border-radius: 4px 4px 0 0; opacity: .85; }
@media (max-width: 700px) {
  .fitness-nav-link { padding:6px 8px; }
  .page-shell { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  .route-toolbar { margin-bottom: 16px; }
  .profile-page-card { padding: 20px; }
  .action-toast { bottom:calc(16px + env(safe-area-inset-bottom)); }
  .quick-launch { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
  .quick-launch button { padding: 12px 3px; font-size: 13px; }
  .strength-progress { padding: 18px; }
  .strength-table { font-size: 12px; }
  .private-footer { margin-bottom: 20px; }
}

/* A single navigation and concise page heading in both views. */
.app-shell .page-shell { padding-top:12px; }
.app-shell .day-heading { align-items:center; min-height:44px; margin:0 0 12px; }
.day-heading .fitness-eyebrow { display:none; }
.app-shell .day-heading h1, .route-title { font-size:26px; line-height:1.2; margin:0; }
.route-toolbar { min-height:44px; margin-bottom:12px; }
.day-picker-wrap { display:flex; align-items:center; gap:12px; }
.day-picker-wrap .date-label { margin:0; font-size:12px; }
@media(max-width:560px) {
  .day-picker-wrap .date-label { display:none; }
  .app-shell .page-shell { padding-top:8px; }
  .app-shell .day-heading h1, .route-title { font-size:23px; }
}
/* Two clear rows on mobile; brand, navigation and account share one row on PC. */
.app-header #logoutButton { display:none; }
.app-chrome { position:sticky; top:0; z-index:25; background:#f8fbf7f7; backdrop-filter:blur(12px); border-bottom:1px solid #dce7df; }
.app-chrome .app-header { position:static; border:0; background:none; backdrop-filter:none; min-height:60px; padding:8px max(16px,env(safe-area-inset-left)) 8px max(16px,env(safe-area-inset-right)); gap:16px; }
.app-chrome .private-brand { flex:none; min-height:44px; gap:6px; }
.app-chrome .fitness-brand-mark { width:32px; height:32px; border-radius:10px; box-shadow:none; }
.app-chrome .fitness-brand-mark svg { width:21px; }
.app-chrome .brand-copy { display:block; }
.app-chrome .brand-copy strong { display:block; padding:0; border:0; font-size:24px; letter-spacing:-1px; }
.app-chrome .header-actions { flex:0 1 auto; min-width:0; overflow:visible; }
.app-chrome .fitness-nav { position:static; border:0; background:none; backdrop-filter:none; padding:0 max(16px,env(safe-area-inset-left)) 8px max(16px,env(safe-area-inset-right)); gap:12px; }
.app-chrome .fitness-nav-tabs { max-width:380px; }
.app-chrome .fitness-nav #settingsButton:hover { background:#e8f0e9; }
.app-chrome :is(.private-brand,.profile-summary):focus-visible { outline:3px solid #268a64; outline-offset:3px; }
@media(min-width:1001px) {
 .app-chrome { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px) minmax(0,1fr); gap:24px; padding:8px max(24px,calc((100vw - 1120px)/2)); min-height:64px; align-items:center; }
 .app-chrome .app-header { display:contents; }
 .app-chrome .private-brand { grid-column:1; grid-row:1; justify-self:start; }
 .app-chrome .header-actions { grid-column:3; grid-row:1; justify-self:end; }
 .app-chrome .fitness-nav { grid-column:2; grid-row:1; padding:0; }
}
@media(max-width:350px) { .app-chrome .app-header { gap:12px; padding-inline:max(12px,env(safe-area-inset-left)); } .app-chrome .fitness-nav { gap:8px; padding-inline:12px; } }
/* Phones: four destinations at thumb reach replace the top tabs, Metas and the Amigos chip. */
.bottom-nav { display:none; }
@media (max-width:767px) {
  .fituba-app .bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:4px max(8px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background:#fffffff5; border-top:1px solid #dce5dd; backdrop-filter:blur(10px); }
  .bottom-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:54px; border:0; border-radius:12px; background:none; color:#5f7468; font:inherit; font-size:11px; font-weight:650; cursor:pointer; }
  .bottom-nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .bottom-nav-item[aria-current=page] { color:#1f6b45; }
  .bottom-nav-item[aria-current=page] svg { stroke-width:2.3; }
  .bottom-nav-item:focus-visible { outline:3px solid #268a64; outline-offset:-3px; }
  .fituba-app .app-chrome .fitness-nav, .fituba-app #dayFriendsButton { display:none; }
  .fituba-app #appShell { padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
  .fituba-app .action-toast { bottom:calc(72px + env(safe-area-inset-bottom)); }
  .fituba-app .workout-shortcut:not([hidden]) { bottom:calc(76px + env(safe-area-inset-bottom)); }
}
/* Entrenar/Comunidad: the active tab already names the page; on phones and tablets the 3D stage gets that room.
   Perfil carries its own visible heading (Mi perfil · Metas), so its page title is for screen readers only. */
@media (max-width:1000px) { .day-heading:is([data-route="entrenar"],[data-route="comunidad"]) + .route-toolbar { position:absolute; width:1px; height:1px; min-height:0; margin:0; overflow:hidden; clip-path:inset(50%); } }
.day-heading[data-route="perfil"] + .route-toolbar { position:absolute; width:1px; height:1px; min-height:0; margin:0; overflow:hidden; clip-path:inset(50%); }
/* Constancy calendar right above Historial: 13 weeks on phones and in the PC side column, the full year in between. */
.page-constancy{margin:0;padding:16px;min-width:0;border-top:1px solid #e7ede9}
.page-constancy .constancy-year{display:none}
.page-constancy .constancy-quarter{display:grid;max-width:440px}
@media(min-width:640px){.page-constancy .constancy-year{display:grid}.page-constancy .constancy-quarter{display:none}}
@media(min-width:1001px){.page-constancy{padding:16px 20px 4px;border-top:0;border-left:1px solid #e7ede9}.page-constancy .constancy-year{display:none}.page-constancy .constancy-quarter{display:grid}}
.day-heading[data-route="entrenar"] + .route-toolbar { position:absolute; width:1px; height:1px; min-height:0; margin:0; overflow:hidden; clip-path:inset(50%); }
.data-chat { margin-top: 24px; padding: 24px; display: grid; gap: 14px; }
.data-chat-head { display: flex; align-items: center; gap: 10px; }
.data-chat-head h2 { margin: 0; }
.data-chat-badge { padding: 3px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700; }
.data-chat-form { display: flex; gap: 8px; }
.data-chat-form input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; }
.data-chat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.data-chat-chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.data-chat-answer:empty { display: none; }
.data-chat-answer { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: var(--green-soft); }
.data-chat-answer p { margin: 0; line-height: 1.5; }
.data-chat-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.data-chat-facts li { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: #fff; font-size: 12px; }
.data-chat-facts span { color: var(--muted); }
.data-chat-facts strong { font-size: 14px; }
.data-chat-wait, .data-chat-error { color: var(--muted); }
.data-chat-locked { display: grid; gap: 10px; }
.data-chat-locked p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { .data-chat { padding: 18px; } .data-chat-form .button { padding-inline: 14px; } }
.plus-benefits { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.plus-benefits li { position: relative; padding-left: 22px; font-size: 14px; }
.plus-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plus-benefit-link { padding: 0; border: 0; background: none; color: var(--green); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.training-card { position: relative; }
.training-card-plus { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 700; }