/* ═══════════════════════════════════════════════
   IronBase — Gym Management Platform
   02-base — Reset, Body, @keyframes, Splash, Skeleton, Screen, Scroll
   AUTO-EXTRACTED — safe to edit individually
═══════════════════════════════════════════════ */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  height:100%;
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:pan-x pan-y;
  -ms-touch-action:pan-x pan-y;
}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:"Barlow",-apple-system,system-ui,sans-serif;
  font-size:14px;
  line-height:1.5;
  height:100%;
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  /* Sin padding aquí — el safe area lo maneja la topbar directamente */
  box-sizing:border-box;
}

/* SPLASH */
#splash{position:fixed;inset:0;z-index:2000;background:#08080E;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .7s ease;overflow:hidden}
#splash.hide{opacity:0;pointer-events:none}
#sp-ecg{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.22;pointer-events:none}
#sp-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
#sp-logo{width:140px;height:140px;opacity:0;filter:drop-shadow(0 0 40px rgba(108,92,231,.5)) drop-shadow(0 0 14px rgba(139,124,240,.3));transition:opacity .5s ease,transform .5s ease;transform:scale(.84) translateY(10px)}
#sp-logo.show{opacity:1;transform:scale(1) translateY(0)}
#sp-wordmark{display:flex;align-items:baseline;gap:0;opacity:0;margin-top:5px;transition:opacity .45s .14s ease,transform .45s .14s ease;transform:translateY(6px)}
#sp-wordmark.show{opacity:1;transform:translateY(0)}
#sp-wm-atlas{font-family:"Inter",sans-serif;font-size:28px;font-weight:900;letter-spacing:-1px;background:linear-gradient(165deg,#F0F0F5 0%,#E0DFF5 40%,#A8A5D0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase}
#sp-wm-space{display:inline-block;width:0px}
#sp-wm-os{font-family:"Inter",sans-serif;font-size:28px;font-weight:900;letter-spacing:-1px;background:linear-gradient(165deg,#A78BFA 0%,#6C5CE7 50%,#4C3DB5 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase}
#sp-tag{font-family:"Inter",sans-serif;font-size:9px;letter-spacing:3.5px;text-transform:uppercase;color:rgba(139,124,240,.5);margin-top:10px;opacity:0;transition:opacity .5s .3s ease}
#sp-tag.show{opacity:1}
#sp-ver{font-family:"Inter",sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--txt2);margin-top:4px;opacity:0;transition:opacity .5s .42s ease}
#sp-ver.show{opacity:1}
#sp-bar{display:none}

/* SPLASH — clase usada en index.html y app.html */
@keyframes splash-logo-in{from{opacity:0;transform:scale(.82) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes splash-title-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes splash-fade-out{from{opacity:1}to{opacity:0;pointer-events:none}}
.splash{
  position:fixed;inset:0;z-index:2000;
  background:#0D0D12;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .55s cubic-bezier(.4,0,.2,1);
}
.splash.hide{opacity:0;pointer-events:none}
.splash-logo-wrap{
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.splash-logo{
  width:88px;height:88px;object-fit:contain;border-radius:22px;
  filter:drop-shadow(0 0 32px rgba(108,92,231,.45)) drop-shadow(0 0 10px rgba(139,124,240,.2));
  animation:splash-logo-in .55s cubic-bezier(.22,1,.36,1) both;
}
.splash-title{
  font-family:"Inter",sans-serif;font-size:22px;font-weight:900;letter-spacing:.5px;
  background:linear-gradient(135deg,#E0DFF5 0%,#8B7CF0 50%,#6C5CE7 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:splash-title-in .45s .12s cubic-bezier(.22,1,.36,1) both;
}
.splash-sub{
  font-family:"Inter",sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(139,124,240,.4);
  animation:splash-title-in .4s .22s ease both;
}

/* ANIM */
@keyframes pulse-badge{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,.4)}50%{box-shadow:0 0 0 10px rgba(108,92,231,0)}}
@keyframes glow-pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes bounce-in{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* METALLIC SHIMMER — deslizamiento de luz sobre superficies doradas */
@keyframes metal-shimmer{
  0%{background-position:200% center}
  100%{background-position:-200% center}
}
/* PLATINUM PULSE — brillo suave plateado */
@keyframes silver-breathe{
  0%,100%{opacity:.7;filter:brightness(1)}
  50%{opacity:1;filter:brightness(1.18)}
}
/* ACCENT GLOW — halo violeta de acento */
@keyframes gold-ambient{
  0%,100%{box-shadow:0 0 18px rgba(108,92,231,.12),0 0 4px rgba(108,92,231,.06)}
  50%{box-shadow:0 0 32px rgba(108,92,231,.22),0 0 8px rgba(108,92,231,.12)}
}
.fu{animation:fu .4s ease both}
.fu1{animation-delay:.06s}.fu2{animation-delay:.12s}.fu3{animation-delay:.18s}.fu4{animation-delay:.24s}.fu5{animation-delay:.30s}

/* SKELETON LOADER */
@keyframes skeleton-sweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel{display:inline-block;border-radius:5px;background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:skeleton-sweep 1.5s ease-in-out infinite}

/* SCREENS */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .24s cubic-bezier(.32,1,.36,1),transform .24s cubic-bezier(.32,1,.36,1);transform:translateX(10px) scale(.99)}
/* dvh = dynamic viewport height — se ajusta dinámicamente cuando Safari
   oculta/muestra su barra al hacer scroll (efecto Reddit).
   Antes usábamos svh (estático) que bloqueaba ese comportamiento. */
@supports (height: 100dvh) {
  #app { height: 100dvh; }
  .safari-browser #app { height: 100dvh; }
}
.screen.active{opacity:1;pointer-events:all;transform:translateX(0) scale(1)}

/* SCROLL */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 14px 98px}
.pwa-standalone .scroll{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
.scroll::-webkit-scrollbar{display:none}

/* ── Safari browser vs PWA safe area ────────────────────────────────────
   En PWA standalone: body padding-top = 0 (la topbar maneja --safe-t)
   En Safari browser: body padding-top = env(safe-area-inset-top) ya aplicado arriba
   El @media standalone detecta el modo PWA y lo cancela.
──────────────────────────────────────────────────────────────────────── */
@media all and (display-mode: standalone) {
  body {
    padding-top: 0;
  }
}
/* iOS Safari standalone vía meta apple-mobile-web-app-capable */
@media all and (display-mode: fullscreen) {
  body {
    padding-top: 0;
  }
}