/* ════════════════════════════════════════════════════════════════════════
   bo-nav.css — Navigation aligned to the iOS app.
   iOS = 4 tabs (Hoy · Agenda · Inventario · Finanzas) + a central floating
   AI-assistant FAB. Guest PRO is removed from the nav (it is built but never
   wired/instantiated on iOS, so the web mirror hides it too; the view + code
   stay intact). Non-destructive layer; tokens only (DESIGN.md).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Central AI-assistant FAB (mobile: floats above the bottom bar) ──────── */
.nav-fab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 0;
}
.nav-fab > i {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  font-size: 22px; color: #fff;
  background: var(--crimson);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.45);
  transform: translateY(-18px);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.nav-fab:hover > i { background: #b53333; }
.nav-fab:active > i { transform: translateY(-18px) scale(0.94); }
.nav-fab .nav-fab-label {
  position: absolute; bottom: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-secondary);
}

/* ── Desktop sidebar (>=1024px): FAB collapses into a normal nav row ─────── */
@media (min-width: 1024px) {
  .app-navbar .nav-fab {
    flex-direction: row; justify-content: flex-start; align-items: center;
    gap: 13px; width: 100%; height: 46px; padding: 0 14px;
    border-radius: 10px; color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
  }
  .app-navbar .nav-fab > i {
    width: 22px; height: 22px; border-radius: 6px; font-size: 18px;
    background: none; box-shadow: none; transform: none; color: var(--crimson);
  }
  .app-navbar .nav-fab:hover > i { background: none; }
  .app-navbar .nav-fab .nav-fab-label {
    position: static; font-size: 14px; font-weight: 600; color: inherit;
  }
  .app-navbar .nav-fab:hover { background: var(--bg-tertiary); color: var(--text-primary); }
}