/* ============================================================
   GymFlux — mobile / PWA
   Navegação inferior (bottom-nav) visível apenas em telas pequenas.
   ============================================================ */

/* Desktop: bottom-nav oculta */
.bottom-nav { display: none; }

@media (max-width: 768px) {
  /* Espaço para a barra não cobrir o conteúdo */
  body.has-bottom-nav { padding-bottom: 72px; }

  .bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 16px rgba(17,17,17,0.06);
  }

  .bottom-nav-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 2px;
    font-size: 11px; font-weight: 600; color: var(--muted);
    text-decoration: none; border: none; background: none; cursor: pointer;
    border-radius: 10px; transition: color .15s, background .15s;
  }
  .bottom-nav-item .nav-icon { font-size: 20px; line-height: 1; }
  .bottom-nav-item:active { background: var(--surface); }
  .bottom-nav-item.active { color: var(--accent); }
  .bottom-nav-item:hover { text-decoration: none; }
}