/* gym-integration.css — Puente prototipo «Gym App» ↔ sitio ricardopadilla.es
   Cargado ÚLTIMO en /gym (después de gym.css, gym-ui.css, gym-screens.css).
   v2 — 2026-05-29 */

/* ── Tokens en body (auth/loading/dialog fuera de .app) ── */
body.page-gym {
  --bg:        oklch(0.16 0.006 270);
  --bg-grad:   radial-gradient(120% 80% at 50% -10%, oklch(0.22 0.012 270) 0%, oklch(0.15 0.006 270) 55%);
  --surface:   oklch(0.21 0.008 270);
  --surface-2: oklch(0.25 0.010 270);
  --surface-3: oklch(0.30 0.012 270);
  --text:      oklch(0.97 0.004 270);
  --text-2:    oklch(0.74 0.010 270);
  --text-3:    oklch(0.56 0.012 270);
  --line:      oklch(1 0 0 / .09);
  --line-2:    oklch(1 0 0 / .15);
  --good:      oklch(0.80 0.16 150);
  --warn:      oklch(0.78 0.16 70);
  --accent:       oklch(0.86 0.20 128);
  --accent-ink:   #0b1402;
  --accent-soft:  oklch(0.86 0.20 128 / .14);
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow-pop: 0 18px 50px -18px rgba(0,0,0,.55);
  --font-display: 'Bebas Neue', 'DM Sans', sans-serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  min-height: 100%;
  height: auto;
  overflow: auto;
}

/* gym.css resetea padding del body. Solo el gate de AUTH (sin sesión) reserva hueco bajo el
   nav del sitio; en carga y app el nav está oculto → padding 0 (evita el flash del nav al F5). */
body.page-gym {
  padding-top: 0;
}

body.page-gym.gym-mode-auth {
  padding-top: var(--nav-h, 58px);
}

body.page-gym[data-theme="medianoche"] {
  --bg:        oklch(0.17 0.030 264);
  --bg-grad:   radial-gradient(120% 80% at 50% -10%, oklch(0.24 0.045 264) 0%, oklch(0.15 0.028 264) 55%);
  --surface:   oklch(0.22 0.038 264);
  --surface-2: oklch(0.27 0.044 264);
  --surface-3: oklch(0.32 0.048 264);
  --text:      oklch(0.97 0.010 264);
  --text-2:    oklch(0.76 0.024 264);
  --text-3:    oklch(0.58 0.030 264);
  --line:      oklch(1 0 0 / .10);
  --line-2:    oklch(1 0 0 / .17);
}

body.page-gym[data-theme="pista"] {
  --bg:        oklch(0.96 0.004 95);
  --bg-grad:   radial-gradient(120% 80% at 50% -10%, oklch(0.99 0.006 95) 0%, oklch(0.94 0.004 95) 60%);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.975 0.003 95);
  --surface-3: oklch(0.94 0.005 95);
  --text:      oklch(0.20 0.010 270);
  --text-2:    oklch(0.44 0.010 270);
  --text-3:    oklch(0.62 0.010 270);
  --line:      oklch(0.20 0.01 270 / .10);
  --line-2:    oklch(0.20 0.01 270 / .16);
  --shadow-pop: 0 18px 50px -18px rgba(20,20,30,.22);
  color-scheme: light;
}

body.page-gym[data-accent="naranja"] { --accent: oklch(0.76 0.18 52);  --accent-ink:#1a0c00; --accent-soft: oklch(0.76 0.18 52 / .15); }
body.page-gym[data-accent="azul"]    { --accent: oklch(0.72 0.15 248); --accent-ink:#020a16; --accent-soft: oklch(0.72 0.15 248 / .16); }
body.page-gym[data-accent="magenta"] { --accent: oklch(0.72 0.20 350); --accent-ink:#16020c; --accent-soft: oklch(0.72 0.20 350 / .15); }
body.page-gym[data-accent="violeta"] { --accent: oklch(0.70 0.16 295); --accent-ink:#0c0216; --accent-soft: oklch(0.70 0.16 295 / .16); }

html:has(body.page-gym) {
  height: auto;
  min-height: 100%;
}

/* Móvil inmersivo solo con la app visible */
@media (max-width: 767px) {
  body.page-gym.gym-mode-app {
    overflow: hidden;
    height: 100%;
  }
  html:has(body.page-gym.gym-mode-app) {
    height: 100%;
  }
}

/* ── Pantalla de carga: overlay FIJO que cubre mientras la app se monta y luego se desvanece
   (sensación de app: no se ve el contenido montándose). gym.html no carga perfil.css. ── */
@keyframes gym-spin { to { transform: rotate(360deg); } }
@keyframes gym-loading-pulse {
  0%, 100% { transform: scale(1);    opacity: .92; }
  50%      { transform: scale(1.07); opacity: 1; }
}

body.page-gym #screen-loading.spinner-wrap {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-grad, var(--bg));
  transition: opacity .42s ease;
}

/* Se añade por JS cuando la pantalla ya está montada → desvanece el overlay y la revela */
body.page-gym #screen-loading.gym-loading-out {
  opacity: 0;
  pointer-events: none;
}

body.page-gym #screen-loading[hidden] {
  display: none !important;
}

.gym-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.gym-loading-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  animation: gym-loading-pulse 1.8s ease-in-out infinite;
}

body.page-gym #screen-loading .spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gym-spin 0.7s linear infinite;
}

.gym-loading-text {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── Auth gate (sustituye login-section del sitio en /gym) ── */
body.page-gym #screen-auth {
  display: none;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--bg-grad, var(--bg));
}

body.page-gym #screen-auth.gym-gate--open {
  display: flex;
}

body.page-gym .gym-gate-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 40px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-pop);
}

body.page-gym .gym-gate-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}

body.page-gym .gym-gate-title {
  font-family: var(--font-display);
  font-size: clamp(42px, 10vw, 56px);
  line-height: 0.9;
  margin-bottom: 14px;
  color: var(--text);
}

body.page-gym .gym-gate-title em {
  color: var(--accent);
  font-style: normal;
}

body.page-gym .gym-gate-sub {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 28px;
}

body.page-gym .gym-gate-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: filter 0.2s, transform 0.12s var(--ease);
}

body.page-gym .gym-gate-cta:hover { filter: brightness(1.06); }
body.page-gym .gym-gate-cta:active { transform: scale(0.97); }

body.page-gym .gym-gate-logo {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  border-radius: 18px;
}

body.page-gym.gym-mode-app .gym-mobile-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px 4px;
  text-decoration: none;
}

body.page-gym.gym-mode-app .gym-mobile-brand-img {
  width: 52px;
  height: 52px;
  border-radius: 13px;
}

body.page-gym .rail-brand-logo-img {
  margin: auto;
  width: 78px;
  height: 78px;
  border-radius: 16px;
  display: block;
}

body.page-gym .rail-brand-name {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-top: 10px;
}

@media (min-width: 768px) {
  body.page-gym.gym-mode-app .gym-mobile-brand {
    display: none;
  }
}

body.page-gym.gym-mode-app .bottomnav .gym-admin-link {
  display: none;
}

@media (min-width: 768px) {
  body.page-gym.gym-mode-app .bottomnav .gym-admin-link:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
}

/* Diálogo global (fuera de .app) — mismas reglas que gym-admin.css, cargadas aquí */
body.page-gym #gym-delete-dialog.gym-dialog {
  margin: auto;
  padding: 0;
  border: none;
  max-width: min(400px, calc(100vw - 32px));
  width: calc(100% - 32px);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  color: var(--text);
  font-family: var(--font-ui);
  box-shadow: var(--shadow-pop);
}

body.page-gym #gym-delete-dialog.gym-dialog:not([open]) {
  display: none;
}

body.page-gym #gym-delete-dialog.gym-dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}

body.page-gym #gym-delete-dialog .gym-dialog-inner {
  padding: 28px 28px 24px;
}

body.page-gym #gym-delete-dialog .gym-dialog-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 40px);
  line-height: 0.92;
  margin: 0 0 12px;
  color: var(--text);
}

body.page-gym #gym-delete-dialog .gym-dialog-lead {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0 0 24px;
}

body.page-gym #gym-delete-dialog .gym-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

body.page-gym #gym-delete-dialog .gym-btn-cancel {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 12px 20px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  min-height: 48px;
}

body.page-gym #gym-delete-dialog .gym-btn-cancel:hover {
  background: var(--surface-3);
}

body.page-gym #gym-delete-dialog .btn-danger {
  background: oklch(0.56 0.22 27);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}

body.page-gym #gym-delete-dialog .btn-danger:hover {
  filter: brightness(1.06);
}

body.page-gym #gym-delete-dialog .btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Chrome del sitio: no aplastar con reset del prototipo */
body.page-gym > nav,
body.page-gym > nav *,
body.page-gym > footer,
body.page-gym > footer * {
  box-sizing: border-box;
}

body.page-gym > footer {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   APP ABIERTA — inmersivo en TODOS los tamaños
   (antes ≥768 mostraba nav del sitio + rail del gym = doble menú)
   ════════════════════════════════════════════════════════════ */
/* Sin barra de scroll horizontal (100vw del prototipo + flex rail desbordan) */
html:has(body.page-gym.gym-mode-app),
body.page-gym.gym-mode-app {
  overflow-x: hidden;
  max-width: 100%;
}

body.page-gym.gym-mode-app #screen-app {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* Nav/footer del sitio OCULTOS por defecto en /gym (carga + app inmersiva): evita el flash
   del nav al recargar. Solo el gate de auth (.gym-mode-auth) los muestra (regla más abajo). */
body.page-gym #nav-root,
body.page-gym > nav,
body.page-gym > .nav-mobile-menu,
body.page-gym > footer {
  display: none !important;
}

/* Por si el chrome se inyectara dos veces por error */
body.page-gym #gym-app > .bottomnav ~ .bottomnav {
  display: none !important;
}

/* Modo live (entrenar/resumen): pantalla inmersiva sin bottomnav */
#gym-app.gym-live-active > .bottomnav {
  display: none !important;
}
/* La pantalla ocupa toda la altura del .app cuando no hay nav */
#gym-app.gym-live-active > .screen {
  flex: 1;
  height: 100%;
}

body.page-gym.gym-mode-app .stage {
  /* El prototipo usa 100vw → provoca scroll horizontal con la barra vertical */
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

body.page-gym.gym-mode-app .app {
  overflow-x: hidden;
  max-width: 100%;
  min-width: 0;
}

body.page-gym.gym-mode-app .screen {
  min-width: 0;
  overflow-x: hidden;
}

body.page-gym.gym-mode-app .bottomnav {
  min-width: 0;
  flex-shrink: 0;
  overflow-x: hidden;
}

/* ── Móvil: layout inmersivo correcto ────────────────────────────────────────
   Causa raíz: .gym-mobile-brand (~66px) se inserta antes de .stage, que tiene
   height:100dvh → el total supera el viewport y el bottomnav queda cortado.
   Fix: #screen-app es flex-column 100dvh; .stage toma el espacio restante.     */
@media (max-width: 767px) {
  body.page-gym.gym-mode-app #screen-app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  body.page-gym.gym-mode-app .stage {
    flex: 1;
    height: auto;    /* override gym.css height:100dvh */
    min-height: 0;   /* override min-height:100dvh del bloque global */
  }
  body.page-gym.gym-mode-app .app {
    height: 100%;    /* fill su .stage padre */
    max-height: none;
  }
  /* FAB sobresale hacia arriba (Y); clip solo en X para no cortarlo */
  body.page-gym.gym-mode-app .bottomnav {
    overflow-x: clip;
  }
}

@media (min-width: 768px) {
  body.page-gym.gym-mode-app .stage {
    min-height: 100dvh;
    padding: 16px 20px 24px;
    align-items: stretch;
  }

  body.page-gym.gym-mode-app .app {
    max-width: min(1120px, 100%);
    width: 100%;
    max-height: min(94dvh, 1000px);
    margin-inline: auto;
  }
}

/* ── Watermark logo en móvil (sustituye al .gym-mobile-brand físico) ─────────
   Pseudo-elemento ::before en .app: logo centrado, baja opacidad, sin espacio.
   El contenido de .screen y .bottomnav queda por encima (z-index:1).
   Path relativo al CSS: assets/css/ → ../logos/                              */
@media (max-width: 767px) {
  body.page-gym.gym-mode-app .app::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: url('../logos/web-app-manifest-192x192.png') no-repeat center / 110px 110px;
    opacity: 0.07;
    border-radius: 22px;
    pointer-events: none;
    z-index: 0;
  }
  body.page-gym.gym-mode-app .screen,
  body.page-gym.gym-mode-app .bottomnav {
    position: relative;
    z-index: 1;
  }
}

/* Solo el gate de AUTH (sin sesión) muestra el nav/footer del sitio. En carga permanecen
   ocultos → sin flash del nav al hacer F5 estando ya logueado. */
body.page-gym.gym-mode-auth > nav {
  display: flex !important;
}

body.page-gym.gym-mode-auth > footer {
  display: block !important;
}

/* Enlace «Volver al sitio» en el rail (solo ≥768, ver gym-ui integration) */
body.page-gym .bottomnav .gym-site-link {
  display: none;
  margin-bottom: 6px;
  text-decoration: none;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  transition: background 0.15s, color 0.15s;
}
body.page-gym .bottomnav .gym-site-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

@media (min-width: 768px) {
  body.page-gym.gym-mode-app .bottomnav .gym-site-link,
  body.page-gym.gym-mode-app .bottomnav .gym-account-link {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

body.page-gym.gym-mode-app .bottomnav .gym-account-link {
  display: none;
  margin-bottom: 6px;
}