/* ═══════════════════════════════════════════════
   OneProtocol Clinical & Performance Coaching
   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; /* dvh respeta la barra de URL de Safari browser */
  overflow:hidden;
}
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;
  -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:#030609;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:auto;opacity:0;filter:drop-shadow(0 0 40px rgba(201,168,76,.65)) drop-shadow(0 0 14px rgba(201,168,76,.35));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-iron{font-family:"Inter",sans-serif;font-size:28px;font-weight:900;letter-spacing:-1px;background:linear-gradient(165deg,#ffffff 0%,#D4E2F0 40%,#8099B8 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-qx{font-family:"Inter",sans-serif;font-size:28px;font-weight:900;letter-spacing:-1px;background:linear-gradient(165deg,#7EC8FF 0%,#4F8EF7 50%,#2855CC 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(201,168,76,.6);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(--muted);margin-top:4px;opacity:0;transition:opacity .5s .42s ease}
#sp-ver.show{opacity:1}
#sp-bar{display:none}

/* 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(201,168,76,.4)}50%{box-shadow:0 0 0 10px rgba(201,168,76,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)}
}
/* GOLD GLOW — halo cálido de oro */
@keyframes gold-ambient{
  0%,100%{box-shadow:0 0 18px rgba(201,168,76,.12),0 0 4px rgba(201,168,76,.06)}
  50%{box-shadow:0 0 32px rgba(201,168,76,.22),0 0 8px rgba(201,168,76,.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)}
/* svh para Safari browser — small viewport height no incluye la barra de URL.
   Evita el problema donde dvh asume que la barra está oculta y el contenido
   queda cortado. Con svh el layout es conservador y siempre correcto. */
@supports (height: 100svh) {
  .safari-browser #app { height: 100svh; }
}
@supports (height: 100dvh) {
  #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 calc(84px + max(var(--safe-b,0px), 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;
  }
}