/* ═══════════════════════════════════════════════
   OneProtocol Clinical & Performance Coaching
   03-layout — Topbar, Bottom Nav, Section Label
   AUTO-EXTRACTED — safe to edit individually
═══════════════════════════════════════════════ */


/* ── TOPBAR ─────────────────────────────────────────────────────────────
   padding-top = safe-area-inset-top + 10px visual
   Igual que .plan-tb: el contenido empieza justo bajo el reloj/batería
   ──────────────────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  /* Safe area top — funciona en PWA y Safari browser */
  padding-top:max(calc(var(--safe-t,0px) + 10px), env(safe-area-inset-top, 0px) + 10px);
  background:rgba(4,5,7,.98);
  backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);
  border-bottom:1px solid rgba(201,168,76,.10);
  flex-shrink:0;z-index:10;
  min-height:calc(52px + max(var(--safe-t,0px), env(safe-area-inset-top, 0px)));
  box-shadow:0 1px 0 rgba(201,168,76,.08),0 4px 32px rgba(0,0,0,.6),0 1px 0 rgba(250,232,154,.04) inset;
  position:relative;
}
.topbar::after{
  content:"";position:absolute;bottom:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,203,104,.35),rgba(201,168,76,.5),rgba(242,203,104,.35),transparent);
  pointer-events:none;
}
.tb-logo{height:26px;width:auto;min-width:34px;filter:drop-shadow(0 1px 12px rgba(201,168,76,.38)) drop-shadow(0 0 4px rgba(250,232,154,.15))}
.tb-wm{font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:900;letter-spacing:4px;color:var(--gold);text-transform:uppercase;line-height:1}
.tb-sub{font-size:9.5px;letter-spacing:1.8px;color:rgba(201,168,76,.45);text-transform:uppercase;margin-top:2px;font-family:"Inter",sans-serif}
.tb-r{display:flex;align-items:center;gap:6px;margin-left:auto}
.ibtn{width:36px;height:36px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;transition:all .17s cubic-bezier(.32,1,.36,1);flex-shrink:0;position:relative;appearance:none;-webkit-appearance:none;font-family:inherit;color:inherit;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04)}
.ibtn:active{transform:scale(.86);background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.25);box-shadow:0 0 0 2px rgba(201,168,76,.08)}
.iq-ic{display:inline-flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;color:currentColor;vertical-align:middle;flex-shrink:0}
.iq-ic svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.iq-ic.fill svg{fill:currentColor;stroke:none}
.iq-ic.stroke-light svg{stroke-width:1.7}
.iq-ic.sm{width:.95em;height:.95em}
.iq-ic.lg{width:1.3em;height:1.3em}
.iq-ic.xl{width:1.6em;height:1.6em}
.iq-ic.gold{color:var(--gold)}
.iq-ic.blue{color:var(--blue)}
.iq-ic.green{color:var(--green)}
.iq-ic.red{color:var(--red)}
.iq-ic.amber{color:var(--amber)}
.iq-ic.muted{color:var(--muted)}
.ibtn .iq-ic{width:18px;height:18px;color:var(--silver)}
.dot-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;background:var(--red);border-radius:99px;border:2px solid var(--bg);display:none;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;padding:0 3px;font-family:"Inter",sans-serif}
.dot-badge.on{display:flex}

/* BOTTOM NAV */
#bnav{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:rgba(3,4,6,.98);
  backdrop-filter:blur(48px) saturate(220%);-webkit-backdrop-filter:blur(48px) saturate(220%);
  border-top:1px solid rgba(201,168,76,.10);
  padding:6px 0 calc(6px + max(var(--safe-b,0px), env(safe-area-inset-bottom, 0px)));display:none;
  box-shadow:0 -20px 60px rgba(0,0,0,.8),0 -1px 0 rgba(201,168,76,.08);
}
/* Borde dorado superior del bnav */
#bnav::before{
  content:"";position:absolute;top:0;left:20%;right:20%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.18),transparent);
  pointer-events:none;
}
.ni{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 4px;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.ni-ic{font-size:20px;line-height:1;transition:transform .22s cubic-bezier(.32,1,.36,1),color .2s;position:relative;display:flex;align-items:center;justify-content:center;min-height:22px;color:var(--silver2)}
.ni-ic .iq-ic{width:20px;height:20px;transition:filter .25s}
.ni-lb{font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--muted);transition:color .2s,opacity .2s;text-transform:uppercase}
.ni-bar{position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:2.5px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .28s cubic-bezier(.22,1,.36,1)}
.ni-glow{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:32px;height:20px;background:radial-gradient(ellipse,rgba(201,168,76,.18) 0%,transparent 70%);border-radius:50%;opacity:0;transition:opacity .28s;pointer-events:none}
.ni.on .ni-lb{color:var(--gold);opacity:1}
.ni.on .ni-ic{color:var(--gold);transform:translateY(-3px) scale(1.12)}
.ni.on .ni-ic .iq-ic{filter:drop-shadow(0 0 6px rgba(201,168,76,.65)) drop-shadow(0 0 2px rgba(250,232,154,.3))}
.ni.on .ni-bar{opacity:1;width:32px}
.ni.on .ni-glow{opacity:1}
.ni-pip{position:absolute;top:-2px;right:-4px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid var(--bg);display:none}
.ni-pip.on{display:block;animation:bounce-in .3s ease}

/* SECTION LABEL */
.sl{
  font-size:9.5px;font-weight:700;letter-spacing:2.8px;text-transform:uppercase;
  color:rgba(82,87,106,.9);margin:20px 0 10px;padding-left:1px;
  display:flex;align-items:center;gap:7px;font-family:"Inter",sans-serif
}
.sl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(42,45,56,.8),transparent)}
.sl:first-child{margin-top:2px}
.sl .iq-ic{width:13px;height:13px;color:var(--gold);opacity:.8}


/* ── Safari Browser (no PWA) — compensar barra de URL ───────────────────
   IMPORTANTE: NO usar env(safe-area-inset-top) aquí directamente.
   El JS en 19-init.js ya calcula --safe-t incluyendo la barra de Safari
   (notch + chrome del browser). Usar --safe-t evita el conflicto donde
   CSS y JS calculan valores distintos y se solapan.
   .safari-browser se agrega via JS en 19-init.js al <html>
────────────────────────────────────────────────────────────────────── */
.safari-browser .topbar {
  /* En Safari browser el layout ya usa 100svh (excluye la barra de URL).
     --safe-t = solo el notch (env(safe-area-inset-top)).
     Mismo padding que el topbar normal — no sumar nada extra. */
  padding-top: calc(var(--safe-t, 44px) + 10px);
  min-height: calc(52px + var(--safe-t, 44px));
}

/* svh = small viewport height — excluye la barra de URL de Safari.
   El contenido ocupa exactamente el espacio visible, sin gaps. */
.safari-browser .screen {
  height: 100svh;
  max-height: 100svh;
}
.safari-browser #app {
  height: 100svh;
}

/* Bottom nav */
.safari-browser #bnav {
  padding-bottom: calc(var(--safe-b, 20px) + 6px);
}