/* ═══════════════════════════════════════════════════════════════════════
   OneProtocol — Experiencia del cliente y del coach (14/11/2026)
   1. Barra inferior de vidrio líquido (js/04b-nav-glass.js)
   2. Botón «+ Peso» sobre la barra y modal de registrar peso
   3. Pantalla de PIN
   4. Onboarding del cliente (#onb-overlay) y del coach (#coach-tour-overlay)
   Todo con los tokens del acento (la marca del coach) y movimiento que se
   apaga con «reducir movimiento».
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Barra inferior: cápsula de vidrio flotante ─────────────────────
   Flota sobre el contenido (que se ve desenfocado por debajo) con una lente
   que se desliza a la pestaña activa con un rebote líquido y se puede
   arrastrar con el dedo. El alto total sigue siendo --bnav-real-h: el plan y
   los botones flotantes se miden igual que antes. */
#bnav{
  left:max(12px,calc(50% - 250px))!important;right:max(12px,calc(50% - 250px))!important;
  bottom:max(10px,calc(env(safe-area-inset-bottom,0px) - 10px))!important;
  height:64px!important;padding:6px!important;gap:0;border-radius:32px!important;
  border:1px solid rgba(255,255,255,.12)!important;border-top-color:rgba(255,255,255,.18)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 45%,rgba(255,255,255,.05) 100%),
    rgba(14,16,21,.5)!important;
  -webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);
  box-shadow:0 20px 46px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.04)!important;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;isolation:isolate
}
#bnav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 90% at 50% -35%,rgba(255,255,255,.14),transparent 55%)}
#bnav::after{content:"";position:absolute;top:-1px;left:24%;right:24%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.75),transparent)}
html.op-lite #bnav{background:rgba(16,18,23,.95)!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#bnav{background:rgba(16,18,23,.95)!important}}
#bnav .ni{position:relative;z-index:1;min-height:0!important;padding:0!important;gap:3px!important;color:rgba(226,232,242,.56)}
#bnav .ni-ic{width:30px!important;height:28px!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:inherit!important}
#bnav .ni-ic svg{width:24px;height:24px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.32,1.6,.5,1),filter .3s}
#bnav .ni-ic svg .f{fill:currentColor;fill-opacity:0;transition:fill-opacity .3s ease}
#bnav .ni-lb{margin-top:0!important;font-size:10.5px!important;color:inherit!important;transition:color .3s,letter-spacing .3s}
#bnav .ni.on{color:#fff}
#bnav .ni.on .ni-ic{color:var(--accent-text,#9ccaff)!important;background:none!important;box-shadow:none!important}
#bnav .ni.on .ni-ic svg .f{fill-opacity:.24}
#bnav .ni.on .ni-ic svg{filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.6))}
#bnav .ni.on .ni-lb{color:#fff!important;font-weight:750!important}
#bnav .ni:active .ni-ic svg{transform:scale(.84)}
#bnav .ni-pip{top:-2px;right:-2px;border-color:rgba(14,16,21,.9)}
/* La lente: vidrio con tinte del acento. Su posición la pone el JS; el rebote
   líquido sale del cubic-bezier con sobrepaso y de un estirado al moverse. */
#bnav .nv-lens{position:absolute;z-index:0;top:6px;bottom:6px;left:0;width:72px;border-radius:26px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),rgba(var(--accent-rgb),.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(var(--accent-rgb),.32),0 8px 20px -6px rgba(var(--accent-rgb),.55);
  transition:transform .55s cubic-bezier(.3,1.45,.45,1),width .4s cubic-bezier(.3,1.3,.5,1),opacity .25s ease;will-change:transform}
#bnav .nv-lens.is-moving{animation:nv-stretch .55s cubic-bezier(.3,1.2,.5,1)}
@keyframes nv-stretch{0%{border-radius:26px}35%{border-radius:22px 30px 30px 22px}100%{border-radius:26px}}
#bnav .nv-pop{animation:nv-pop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes nv-pop{0%{transform:scale(.72) translateY(2px)}50%{transform:scale(1.18) translateY(-2px)}100%{transform:scale(1)}}
#bnav.is-dragging .nv-lens{transition:width .2s ease,opacity .2s ease;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.08)),rgba(var(--accent-rgb),.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(var(--accent-rgb),.42),0 14px 30px rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px) saturate(170%);backdrop-filter:blur(6px) saturate(170%)}
#bnav.is-dragging .ni.on .ni-ic svg{transform:scale(1.14)}

/* ── 2. «+ Peso» encima de la barra ──────────────────────────────────── */
#scr-prog .prog-fab{bottom:calc(var(--bnav-real-h,88px) + 14px)!important;right:16px!important}
#scr-prog .scroll{padding-bottom:calc(var(--bnav-real-h,88px) + 90px)!important}

/* Modal de registrar peso */
#m-addprog .pw-body{display:flex;flex-direction:column;gap:12px;padding:2px 18px calc(18px + var(--safe-b,0px))}
#m-addprog .pw-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
#m-addprog .pw-head-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;flex:none;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent));box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.9)}
#m-addprog .pw-head-ic .iq-ic{width:22px;height:22px}
#m-addprog .pw-head-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
#m-addprog .pw-head-copy b{font:800 20px/1.15 var(--font,"Inter"),sans-serif;letter-spacing:-.02em;color:#f4f7fb}
#m-addprog .pw-head-copy small{font:550 12.5px var(--font,"Inter"),sans-serif;color:var(--cx-sub,rgba(214,224,238,.62))}
#m-addprog .pw-main{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:10px;padding:16px 12px;border-radius:22px;
  background:radial-gradient(120% 120% at 50% 0%,rgba(var(--accent-rgb),.12),rgba(0,0,0,.2) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:box-shadow .2s}
#m-addprog .pw-main:focus-within{box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.7),0 0 0 4px rgba(var(--accent-rgb),.12)}
#m-addprog .pw-step{width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;font:500 26px/1 var(--font,"Inter"),sans-serif;color:#f4f7fb;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);-webkit-tap-highlight-color:transparent;transition:transform .12s,background .15s}
#m-addprog .pw-step:active{transform:scale(.9);background:rgba(var(--accent-rgb),.22)}
#m-addprog .pw-field{display:flex;align-items:baseline;justify-content:center;gap:6px;min-width:0;cursor:text}
#m-addprog .pw-field input{width:100%;max-width:170px;min-width:0;padding:0;border:0;outline:0;background:transparent;text-align:center;
  font:850 52px/1 var(--font,"Inter"),sans-serif;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
#m-addprog .pw-field input::placeholder{color:rgba(255,255,255,.22)}
#m-addprog .pw-field span{font:700 17px var(--font,"Inter"),sans-serif;color:var(--cx-label,rgba(214,224,238,.55))}
#m-addprog .pw-meta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px;margin-top:-2px}
#m-addprog .pw-meta span{font:550 12.5px var(--font,"Inter"),sans-serif;color:var(--cx-sub,rgba(214,224,238,.62))}
#m-addprog .pw-meta em{padding:3px 9px;border-radius:99px;font:800 12px/1.2 var(--font,"Inter"),sans-serif;font-style:normal;color:#e8edf5;background:rgba(255,255,255,.08)}
#m-addprog .pw-meta em.is-down{color:#86efac;background:rgba(74,222,128,.12)}
#m-addprog .pw-meta em.is-up{color:#fcd38a;background:rgba(251,191,36,.12)}
#m-addprog .pw-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .2s}
#m-addprog .pw-row:focus-within{box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.6)}
#m-addprog .pw-row-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:none;color:var(--accent-text,#9ccaff);background:rgba(var(--accent-rgb),.14)}
#m-addprog .pw-row-ic .iq-ic{width:17px;height:17px}
#m-addprog .pw-row-copy{flex:1;min-width:0;font:700 14px var(--font,"Inter"),sans-serif;color:#eef2f7}
#m-addprog .pw-row-copy span{display:block;margin-top:2px;font:550 11.5px var(--font,"Inter"),sans-serif;color:var(--cx-label,rgba(214,224,238,.55))}
#m-addprog .pw-row-val{display:flex;align-items:baseline;gap:3px}
#m-addprog .pw-row-val input{width:64px;padding:0;border:0;outline:0;background:transparent;text-align:right;font:800 24px/1 var(--font,"Inter"),sans-serif;color:#fff;font-variant-numeric:tabular-nums}
#m-addprog .pw-row-val input::placeholder{color:rgba(255,255,255,.25)}
#m-addprog .pw-row-val i{font:700 14px var(--font,"Inter"),sans-serif;font-style:normal;color:var(--cx-label,rgba(214,224,238,.55))}
#m-addprog .pw-note textarea{width:100%;min-height:56px;padding:12px 14px;border:0;border-radius:16px;outline:0;resize:none;
  font:500 14.5px/1.45 var(--font,"Inter"),sans-serif;color:#eef2f7;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
#m-addprog .pw-note textarea:focus{box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.6)}
#m-addprog .pw-save{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:56px;margin-top:4px;border:0;border-radius:18px;cursor:pointer;
  font:800 16px var(--font,"Inter"),sans-serif;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 16px 30px -14px rgba(var(--accent-rgb),.95);-webkit-tap-highlight-color:transparent;transition:transform .12s}
#m-addprog .pw-save:active{transform:scale(.98)}
#m-addprog .pw-save .iq-ic{width:18px;height:18px}
#m-addprog .pw-cancel{height:46px;border:0;background:none;cursor:pointer;font:650 14px var(--font,"Inter"),sans-serif;color:var(--cx-label,rgba(214,224,238,.6))}

/* ── 3. Pantalla de PIN ────────────────────────────────────────────────
   Fondo vivo: dos auroras del acento que derivan despacio detrás del vidrio.
   Logo en un halo que respira, saludo con su nombre, puntos que saltan al
   llenarse y teclas redondas de vidrio con pulso del acento al tocarlas. */
#pin-screen{
  --pk-size:78px;--pk-gap:16px;--pin-max:300px;
  background:radial-gradient(120% 70% at 50% 0%,rgba(var(--accent-rgb),.16),transparent 60%),linear-gradient(180deg,#0e1116 0%,#0b0d11 60%,#090a0d 100%)!important}
#pin-screen::before{content:"";position:absolute;inset:-20%;pointer-events:none;z-index:0;opacity:.9;
  background:
    radial-gradient(38% 30% at 22% 28%,rgba(var(--accent-rgb),.28),transparent 70%),
    radial-gradient(34% 28% at 80% 70%,rgba(var(--purple-rgb,139,92,246),.2),transparent 70%);
  filter:blur(30px);animation:pin-aurora 18s ease-in-out infinite alternate}
@keyframes pin-aurora{0%{transform:translate3d(-4%,-2%,0) rotate(0deg)}50%{transform:translate3d(5%,3%,0) rotate(8deg)}100%{transform:translate3d(-2%,5%,0) rotate(-6deg)}}
#pin-screen.open .pin-stack{animation:pin-rise .6s cubic-bezier(.22,1,.36,1) both}
@keyframes pin-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
#pin-logo{width:78px!important;height:78px!important;margin:0 0 20px!important;border-radius:24px!important;padding:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 8px rgba(var(--accent-rgb),.06),0 18px 40px -12px rgba(var(--accent-rgb),.6);
  filter:none!important;animation:pin-breathe 4.5s ease-in-out infinite}
@keyframes pin-breathe{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 8px rgba(var(--accent-rgb),.05),0 18px 40px -12px rgba(var(--accent-rgb),.5)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 13px rgba(var(--accent-rgb),.09),0 18px 46px -10px rgba(var(--accent-rgb),.75)}}
.pin-title{font:800 27px/1.1 var(--font,"Inter"),sans-serif!important;letter-spacing:-.025em!important;text-transform:none!important;color:#fff!important;margin-bottom:8px!important}
.pin-sub{font:500 14px/1.45 var(--font,"Inter"),sans-serif!important;color:rgba(214,224,238,.66)!important;margin-bottom:30px!important}
.pin-dots{gap:20px!important;margin-bottom:38px!important}
.pd{width:14px!important;height:14px!important;border:1.5px solid rgba(255,255,255,.28)!important;background:transparent!important}
.pd.fill{background:var(--accent)!important;border-color:var(--accent)!important;transform:scale(1.15)!important;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18),0 0 16px rgba(var(--accent-rgb),.7)!important;animation:pd-pop .32s cubic-bezier(.3,1.8,.5,1)}
@keyframes pd-pop{0%{transform:scale(.6)}60%{transform:scale(1.35)}100%{transform:scale(1.15)}}
.pd.err{background:#ff6b6b!important;border-color:#ff6b6b!important;box-shadow:0 0 14px rgba(255,107,107,.6)!important}
.pin-grid{justify-items:center;row-gap:var(--pk-gap)!important;column-gap:22px!important}
.pk{width:var(--pk-size);height:var(--pk-size)!important;border-radius:50%!important;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.1)!important;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px rgba(0,0,0,.7)!important;
  transition:transform .16s cubic-bezier(.3,1.5,.5,1),background .2s ease,box-shadow .25s ease!important}
.pk:active{transform:scale(.9)!important;background:linear-gradient(180deg,rgba(var(--accent-rgb),.5),rgba(var(--accent-rgb),.28))!important;
  border-color:rgba(var(--accent-rgb),.6)!important;box-shadow:0 0 0 6px rgba(var(--accent-rgb),.14),0 0 26px rgba(var(--accent-rgb),.45)!important}
.pk-n{font:600 32px/1 var(--font,"Inter"),sans-serif!important;letter-spacing:-.02em;color:#fff!important;text-shadow:none!important}
.pk-l{font:700 9px/1 var(--font,"Inter"),sans-serif!important;letter-spacing:2px!important;color:rgba(214,224,238,.55)!important;margin-top:3px!important}
.pk-act,.pk-empty{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.pk-act:active{background:rgba(255,255,255,.08)!important;box-shadow:none!important}
.pk-bio svg{color:var(--accent-text,#9ccaff)!important}
.pin-skip{margin-top:28px!important;padding:10px 18px!important;border:0!important;background:none!important;
  font:650 14px var(--font,"Inter"),sans-serif!important;letter-spacing:0!important;color:rgba(214,224,238,.62)!important}
.pin-skip:active{color:#fff!important}
#pin-screen.is-set .pin-title{background:linear-gradient(100deg,#fff,color-mix(in srgb,var(--accent) 55%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent!important}
@media (max-height:740px){#pin-screen{--pk-size:70px;--pk-gap:12px}#pin-logo{width:64px!important;height:64px!important;margin-bottom:14px!important}.pin-dots{margin-bottom:26px!important}.pin-sub{margin-bottom:20px!important}}
@media (max-height:620px){#pin-screen{--pk-size:62px;--pk-gap:10px}}
@media (prefers-reduced-motion:reduce){#pin-screen::before,#pin-logo,#pin-screen.open .pin-stack,.pd.fill{animation:none!important}}
#pin-logo{padding:7px!important}
.pk-act .iq-ic{width:26px!important;height:26px!important}

/* ── 4. Onboarding: cliente (#onb-overlay) y coach (#coach-tour-overlay) ─
   Mismo motor, mismo escenario: auroras del acento que derivan, el icono de
   cada paso en una ficha de vidrio que flota con un anillo que gira, el saludo
   o el paso arriba del título, una barra de avance que crece y un CTA vivo
   con un brillo que lo cruza. Se pasa de pantalla también deslizando. */
:is(#onb-overlay,#coach-tour-overlay){
  background:radial-gradient(120% 70% at 50% 0%,rgba(var(--accent-rgb),.18),transparent 60%),linear-gradient(180deg,#0e1116 0%,#0b0d11 60%,#08090c 100%)!important;
  overflow-x:hidden!important;isolation:isolate}
:is(#onb-overlay,#coach-tour-overlay)::before{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:radial-gradient(36% 28% at 20% 30%,rgba(var(--accent-rgb),.3),transparent 70%),radial-gradient(32% 26% at 82% 72%,rgba(var(--purple-rgb,139,92,246),.22),transparent 70%);
  filter:blur(34px);animation:pin-aurora 20s ease-in-out infinite alternate}
#onb-glow{display:none!important}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide-icon{position:relative;width:112px!important;height:112px!important;border-radius:34px!important;margin-bottom:28px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03))!important;
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 26px 50px -20px currentColor,0 0 0 10px rgba(255,255,255,.025)!important;
  animation:onb-float 5s ease-in-out infinite}
#coach-tour-overlay .onb-slide-icon{color:var(--accent-text,#9ccaff)!important}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide-icon::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  border:1.5px solid currentColor;opacity:0;animation:onb-ring 3.2s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes onb-ring{0%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(1.32)}}
#onb-overlay .onb-slide:is([data-slide="0"],[data-slide="4"]) .onb-slide-icon{color:var(--accent-text,#9ccaff)!important}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide-icon svg{width:44px!important;height:44px!important;filter:drop-shadow(0 0 12px currentColor)}
@keyframes onb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
:is(#onb-overlay,#coach-tour-overlay) .onb-hello{margin:0 0 10px;padding:5px 12px;border-radius:99px;font:800 11px/1.2 var(--font,"Inter"),sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-text,#9ccaff);background:rgba(var(--accent-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.28)}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide-title{font:850 29px/1.12 var(--font,"Inter"),sans-serif!important;letter-spacing:-.03em!important;color:#fff!important;margin-bottom:12px!important}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide-sub{font:500 15.5px/1.55 var(--font,"Inter"),sans-serif!important;color:rgba(214,224,238,.72)!important;max-width:310px!important}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide-sub strong{color:#fff}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide-note{border-color:rgba(var(--accent-rgb),.3)!important;background:rgba(var(--accent-rgb),.1)!important;color:var(--accent-text,#9ccaff)!important;font-size:11.5px!important;letter-spacing:0!important}
/* Avance: puntos que se vuelven una barra del acento */
:is(#onb-overlay,#coach-tour-overlay) .onb-dot{width:8px!important;height:8px!important;border-radius:4px!important;background:rgba(255,255,255,.16)!important;box-shadow:none!important;transition:width .45s cubic-bezier(.3,1.4,.5,1),background .3s!important}
:is(#onb-overlay,#coach-tour-overlay) .onb-dot.active{width:30px!important;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,#fff),var(--accent))!important;box-shadow:0 0 12px rgba(var(--accent-rgb),.6)!important}
/* CTA vivo con brillo */
:is(#onb-overlay,#coach-tour-overlay) .onb-btn-primary{position:relative;overflow:hidden;height:58px;padding:0 18px!important;border-radius:20px!important;
  font:800 16px var(--font,"Inter"),sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#fff!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 34px -14px rgba(var(--accent-rgb),.95)!important}
:is(#onb-overlay,#coach-tour-overlay) .onb-btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:onb-shine 3.6s ease-in-out infinite 1s}
@keyframes onb-shine{0%,65%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
:is(#onb-overlay,#coach-tour-overlay) .onb-btn-primary:active{transform:scale(.97)}
:is(#onb-overlay,#coach-tour-overlay) .onb-btn-skip{font:650 13.5px var(--font,"Inter"),sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:rgba(214,224,238,.6)!important}
:is(#onb-overlay,#coach-tour-overlay) .onb-btn-skip.is-decision{color:#eef2f7!important}
@keyframes onb-in-fwd{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes onb-in-back{from{opacity:0;transform:translateX(-40px) scale(.96)}to{opacity:1;transform:none}}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide.active{animation-duration:.55s!important}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide.active>*{animation:onb-stagger .6s cubic-bezier(.22,1,.36,1) both}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide.active>:nth-child(2){animation-delay:.06s}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide.active>:nth-child(3){animation-delay:.12s}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide.active>:nth-child(4){animation-delay:.18s}
:is(#onb-overlay,#coach-tour-overlay) .onb-slide.active>.onb-slide-icon{animation:onb-stagger .6s cubic-bezier(.22,1,.36,1) both,onb-float 5s ease-in-out .6s infinite}
@keyframes onb-stagger{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  :is(#onb-overlay,#coach-tour-overlay)::before,:is(#onb-overlay,#coach-tour-overlay) .onb-slide-icon,:is(#onb-overlay,#coach-tour-overlay) .onb-slide-icon::before,
  :is(#onb-overlay,#coach-tour-overlay) .onb-btn-primary::after,:is(#onb-overlay,#coach-tour-overlay) .onb-slide.active>*{animation:none!important}
}

/* Reproductor con el teclado abierto (js/24c-workout-player.js · wpAjustarTeclado):
   ocupa solo el área visible, arriba de donde empieza y con su alto. */
.wp.is-kb{top:0!important;bottom:auto!important;height:var(--wp-h,100%)!important;transform:translate3d(0,var(--wp-dy,0px),0)!important;transition:opacity .3s ease!important}

/* ── 5. Suplementación del plan de nutrición (js/24d · _nnSuppsHtml) ──
   Portada de IronQx: sin estos estilos los iconos SVG crecían a todo el ancho. */
.nn-supps{display:flex;flex-direction:column;gap:14px;padding:16px 14px 14px;border-radius:22px;border:1px solid rgba(255,255,255,.07);
  background:radial-gradient(120% 70% at 100% 0%,rgba(var(--rn-acc-rgb),.1),transparent 60%),linear-gradient(160deg,#15161b,#0e0f13);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.nn-supps-h{display:flex;align-items:center;gap:12px}
.nn-supps-ic{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;background:linear-gradient(150deg,var(--rn-acc-hi2),var(--rn-acc-hi) 55%,var(--rn-acc-lo));color:var(--rn-acc-ink);box-shadow:0 8px 18px rgba(var(--rn-acc-rgb),.28)}
.nn-supps-ic svg{width:21px;height:21px}
.nn-supps-h>div:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nn-supps-h small{font:800 10px/1 "Inter",sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:var(--rn-acc-hi2)}
.nn-supps-h strong{font:850 21px/1 var(--font,"Inter"),sans-serif;letter-spacing:-.02em;color:var(--txt)}
.nn-supps-dots{display:flex;gap:5px}
.nn-supps-dots span{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.nn-supps-dots svg{width:14px;height:14px}
.nn-sp-g{display:flex;flex-direction:column;gap:8px}
.nn-sp-gh{display:flex;align-items:center;gap:7px;padding:0 2px;font:800 10.5px/1 "Inter",sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--c)}
.nn-sp-gh svg{width:14px;height:14px}
.nn-sp-gh em{margin-left:auto;font-style:normal;color:rgba(236,238,245,.4)}
.nn-sp-g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.nn-sp{position:relative;display:flex;flex-direction:column;gap:10px;padding:13px;border-radius:18px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 7%,rgba(255,255,255,.035)),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.nn-sp-top{display:flex;align-items:center;gap:11px}
.nn-sp-ic{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 25%,transparent)}
.nn-sp-ic svg{width:18px;height:18px}
.nn-sp-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.nn-sp-t b{font:800 14.5px/1.2 "Inter",sans-serif;color:var(--txt)}
.nn-sp-when{display:flex;align-items:flex-start;gap:5px;font:600 11.5px/1.35 "Inter",sans-serif;color:rgba(236,238,245,.62)}
.nn-sp-when svg{width:12px;height:12px;flex:0 0 auto;margin-top:1.5px;color:var(--c)}
.nn-sp-qty{flex:0 0 auto;min-width:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 10px;border-radius:14px;
  background:color-mix(in srgb,var(--c) 13%,rgba(0,0,0,.25));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.nn-sp-qty b{font:850 23px/1 var(--font,"Inter"),sans-serif;letter-spacing:-.03em;color:var(--txt);white-space:nowrap;font-variant-numeric:tabular-nums}
.nn-sp-qty b i{margin-left:2px;font:800 12px/1 "Inter",sans-serif;font-style:normal;color:var(--c)}
.nn-sp-qty small{font:800 10px/1 "Inter",sans-serif;letter-spacing:.9px;text-transform:uppercase;color:rgba(236,238,245,.55)}
.nn-sp-dose{align-self:flex-start;padding:6px 10px;border-radius:10px;background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 28%,transparent);font:800 12.5px/1.25 "Inter",sans-serif;color:var(--txt)}
.nn-sp-sub{font:600 11px/1.35 "Inter",sans-serif;color:rgba(236,238,245,.5)}
.nn-sp-note{margin:0;padding:9px 11px;border-radius:12px;background:rgba(0,0,0,.22);font:500 12px/1.5 "Inter",sans-serif;color:rgba(236,238,245,.72)}
.nn-sp-flag{flex:0 0 auto;padding:4px 9px;border-radius:99px;background:rgba(243,199,122,.16);font:800 10px/1.2 "Inter",sans-serif;font-style:normal;letter-spacing:.8px;text-transform:uppercase;color:#f3c77a}
.nn-sp.is-alert{--c:#f3c77a;border-color:rgba(243,199,122,.32);background:rgba(243,199,122,.05)}
.nn-supps-f{margin:0;padding:0 2px;font:500 10.5px/1.4 "Inter",sans-serif;color:rgba(236,238,245,.4);text-align:center}
.nn-item-t small.nn-estimate{font-size:12px;line-height:1.4;color:#d6c182}
.nn-closed-choice{display:grid;gap:8px;margin:14px 0;padding:14px;border:1px solid var(--line,#393939);border-radius:14px;background:rgba(255,255,255,.04);color:#e8e8e8;font-size:13px}.nn-closed-choice>span{font-weight:700}.nn-closed-choice select{width:100%;min-width:0;min-height:46px;padding:10px;border:1px solid #777;border-radius:9px;background:#171717;color:#f5f5f5;font:inherit}.nn-closed-choice select:focus-visible{outline:2px solid var(--acc,#d5b864);outline-offset:3px}

/* ── 6. Chat del cliente sobre el plan abierto ──────────────────────────
   El chat (z 260) se abría DEBAJO del plan de nutrición o de rutina abierto
   a pantalla completa (.rnw, z 8900): se veía el velo pero el chat quedaba
   tapado y se superponían. Con un plan abierto, el chat sube por encima. */
body.rnw-on #plan-chat-scrim{z-index:9190!important}
body.rnw-on #plan-chat-drawer{z-index:9210!important}

/* ── 7. Acceso pausado (js/41-acceso.js) ────────────────────────────────
   Tapa la app entera, también los planes abiertos (8900) y el reproductor
   (9000). Solo el chat con el coach puede quedar por encima. */
.acc-lock{position:fixed;inset:0;z-index:9800;display:flex;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) 22px max(24px,env(safe-area-inset-bottom,0px));
  background:rgba(6,7,10,.86);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);animation:acc-in .35s ease both}
.acc-lock[hidden]{display:none!important}
.acc-lock-bg{position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(40% 30% at 30% 25%,rgba(var(--accent-rgb),.22),transparent 70%),radial-gradient(36% 28% at 75% 75%,rgba(251,191,36,.12),transparent 70%);filter:blur(30px)}
.acc-lock-card{position:relative;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 22px 22px;border-radius:28px;
  background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -30px rgba(0,0,0,.95);animation:acc-rise .5s cubic-bezier(.22,1,.36,1) both}
.acc-lock-ic{display:grid;place-items:center;width:72px;height:72px;border-radius:24px;margin-bottom:16px;color:#fbbf24;
  background:linear-gradient(160deg,rgba(251,191,36,.22),rgba(251,191,36,.06));box-shadow:inset 0 0 0 1px rgba(251,191,36,.35),0 16px 34px -14px rgba(251,191,36,.6)}
.acc-lock-ic svg{width:32px;height:32px}
.acc-lock-k{font:800 11px/1 var(--font,"Inter"),sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fbbf24}
.acc-lock-t{margin:10px 0 0;font:850 25px/1.15 var(--font,"Inter"),sans-serif;letter-spacing:-.025em;color:#fff}
.acc-lock-p{margin:12px 0 0;font:500 15px/1.55 var(--font,"Inter"),sans-serif;color:rgba(214,224,238,.72)}
.acc-lock-p b{color:#fff}
.acc-lock-acts{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.acc-lock-btn{display:flex;align-items:center;justify-content:center;width:100%;height:54px;border:0;border-radius:17px;cursor:pointer;text-decoration:none;
  font:750 15.5px var(--font,"Inter"),sans-serif;color:#eef2f7;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);-webkit-tap-highlight-color:transparent}
.acc-lock-btn.is-main{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 30px -14px rgba(var(--accent-rgb),.95)}
.acc-lock-btn:active{transform:scale(.98)}
.acc-lock-out{margin-top:4px;padding:10px;border:0;background:none;cursor:pointer;font:650 14px var(--font,"Inter"),sans-serif;color:rgba(214,224,238,.55)}
body.acc-locked #plan-chat-scrim{z-index:9890!important}
body.acc-locked #plan-chat-drawer{z-index:9900!important}
body.acc-locked #bnav{visibility:hidden}
@keyframes acc-in{from{opacity:0}to{opacity:1}}
@keyframes acc-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.acc-lock,.acc-lock-card{animation:none}}