/* Bee360 Gym · layout.css (frente design, v1 06/11/2026)
   Shell: barra lateral + topo + conteúdo. Estrutura esperada (core monta em index.html/app.js):

   <div class="app" id="app">                         (.menu-aberto quando o hambúrguer abre)
     <aside class="lateral">
       <a class="lateral-marca" href="#/i9/dashboard"><span class="logo">B</span><span class="rot">Bee360 <b>Gym</b></span></a>
       <nav class="nav" aria-label="Telas">
         <div class="nav-grupo">Visão</div>
         <a class="nav-item ativo" href="#/i9/dashboard" aria-current="page"><span class="ico">…svg…</span><span class="rot">Dashboard</span></a>
       </nav>
       <div class="lateral-rodape">…</div>
     </aside>
     <div class="lateral-fundo" data-fecha-menu></div>
     <div class="principal">
       <header class="topo">
         <button class="btn btn-fantasma btn-icone menu-btn" aria-label="Abrir menu">☰</button>
         <div class="seletor-academia">…<select class="campo">…</select></div>
         <div class="topo-espaco"></div>
         <div class="usuario"><span class="avatar sm">NA</span><span class="rot">Nathan</span></div>
       </header>
       <main class="conteudo"><div class="conteudo-in"> <section class="page">…</section> </div></main>
     </div>
   </div>
   Breakpoints: ≥ 1280 lateral 240 px · 769–1279 lateral 72 px (só ícone, rótulo vira dica) · ≤ 768 lateral fora da tela, abre por hambúrguer. */

.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* ---------- barra lateral ---------- */
.lateral {
  position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: var(--z-lateral);
  display: flex; flex-direction: column; gap: var(--e2);
  background: var(--panel); border-right: 1px solid var(--line); padding: var(--e3) var(--e3) var(--e4);
  overflow-y: auto; overflow-x: hidden;
}
.lateral-marca {
  display: flex; align-items: center; gap: var(--e3); height: 44px; padding: 0 var(--e2); margin-bottom: var(--e2);
  color: var(--ink); text-decoration: none; font-size: var(--fs-lg); font-weight: var(--peso-forte); letter-spacing: -.01em; white-space: nowrap;
}
.lateral-marca:hover { text-decoration: none; }
.lateral-marca b { font-weight: var(--peso-negrito); }
.logo {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: 16px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-grupo { font-size: 11px; font-weight: var(--peso-forte); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); padding: var(--e4) var(--e3) var(--e1); white-space: nowrap; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: var(--e3); min-height: var(--toque); padding: 0 var(--e3);
  border-radius: var(--r-md); color: var(--ink2); font-weight: var(--peso-medio); text-decoration: none; white-space: nowrap;
  transition: background var(--t-rapido), color var(--t-rapido);
}
.nav-item:hover { background: var(--panel3); color: var(--ink); text-decoration: none; }
.nav-item.ativo, .nav-item[aria-current="page"] { background: var(--brand-soft); color: var(--ink); font-weight: var(--peso-forte); }
.nav-item.ativo::before, .nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.nav-item .ico { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.nav-item .ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item .rot { overflow: hidden; text-overflow: ellipsis; }
.nav-item .cont { margin-left: auto; font-size: var(--fs-xs); color: var(--ink3); font-variant-numeric: tabular-nums; }
.lateral-rodape { border-top: 1px solid var(--line); padding-top: var(--e3); display: flex; flex-direction: column; gap: var(--e2); font-size: var(--fs-xs); color: var(--ink3); }
.lateral-rodape .rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-fundo { display: none; }

/* ---------- área principal ---------- */
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: var(--z-topo); height: var(--topo);
  display: flex; align-items: center; gap: var(--e3); padding: 0 var(--e5);
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.menu-btn { display: none; }
.seletor-academia { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.seletor-academia .rot { font-size: var(--fs-xs); color: var(--ink3); white-space: nowrap; }
.seletor-academia select { height: 38px; font-weight: var(--peso-forte); max-width: 260px; }
.topo-espaco { flex: 1; }
.topo .atualizado { font-size: var(--fs-xs); color: var(--ink3); white-space: nowrap; }
.usuario { display: flex; align-items: center; gap: var(--e2); min-height: var(--toque); padding: 0 var(--e2); border-radius: var(--r-md); color: var(--ink); font-weight: var(--peso-medio); font-size: var(--fs-sm); }
.usuario .papel { display: block; font-size: var(--fs-xs); color: var(--ink3); font-weight: var(--peso-normal); }

.conteudo { flex: 1; padding: var(--e5); container-type: inline-size; container-name: conteudo; }
.conteudo-in { max-width: var(--conteudo-max); margin: 0 auto; }

/* ---------- KPIs responsivos (pela largura do conteúdo, não da tela) 6 → 3 → 2 ---------- */
@container conteudo (max-width: 1080px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container conteudo (max-width: 560px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .kpi { padding: var(--e3); }
  .kpi-valor { font-size: 22px; }
}
.kpis.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container conteudo (max-width: 1080px) { .kpis.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- lateral recolhida (telas médias) ---------- */
@media (min-width: 769px) and (max-width: 1279px) {
  .app { grid-template-columns: var(--lateral-mini) minmax(0, 1fr); }
  .lateral { padding: var(--e3) var(--e2); align-items: center; }
  .lateral-marca { padding: 0; justify-content: center; width: 48px; }
  .lateral-marca .rot, .nav-item .rot, .nav-item .cont, .lateral-rodape .rot { display: none; }
  .nav { width: 100%; align-items: center; }
  .nav-grupo { font-size: 0; padding: var(--e2) 0; width: 32px; border-top: 1px solid var(--line); margin-top: var(--e2); }
  .nav-grupo:first-child { border-top: 0; margin-top: 0; }
  .nav-item { width: 48px; justify-content: center; padding: 0; }
  .nav-item.ativo::before, .nav-item[aria-current="page"]::before { left: -8px; }
  .nav-item:hover::after {
    content: attr(data-rotulo); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    padding: 5px 9px; border-radius: var(--r-sm); background: var(--ink); color: var(--panel); font-size: var(--fs-xs); white-space: nowrap; z-index: var(--z-tooltip);
  }
  .lateral { overflow: visible; }
  .lateral-rodape { align-items: center; }
}

/* ---------- celular / tablet estreito ---------- */
@media (max-width: 768px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto;
    transform: translateX(-100%); transition: transform var(--t-lento) var(--curva); box-shadow: var(--sombra-3);
  }
  .app.menu-aberto .lateral { transform: none; }
  .app.menu-aberto .lateral-fundo { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: calc(var(--z-lateral) - 1); }
  .menu-btn { display: inline-flex; margin-left: calc(var(--e2) * -1); }
  .topo { padding: 0 var(--e3); gap: var(--e2); }
  .seletor-academia .rot, .usuario .txt, .topo .atualizado { display: none; }
  .seletor-academia select { max-width: 190px; }
  .conteudo { padding: var(--e4) var(--e3) var(--e6); }
  .page { gap: var(--e4); }
  .page-header h1 { font-size: 18px; }
  .page-header .acoes { width: 100%; }
  .card-header { padding: var(--e3) var(--e3) 0; }
  .card-body { padding: var(--e3); }
  .grafico { height: 220px; }
}

/* ---------- login ---------- */
.login {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--e4);
  background:
    radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent),
    radial-gradient(700px 500px at -10% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent),
    var(--bg);
}
.login-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: var(--e6); box-shadow: var(--sombra-2); display: flex; flex-direction: column; gap: var(--e4); }
.login-card .lateral-marca { padding: 0; margin: 0; font-size: var(--fs-xl); }
.login-card .campo { width: 100%; height: var(--toque); }
.login-card label { font-size: var(--fs-sm); font-weight: var(--peso-forte); display: block; margin-bottom: 6px; }
.login-card .btn { min-height: var(--toque); }
.login-rodape { text-align: center; font-size: var(--fs-xs); color: var(--ink3); }
.lista-academias { display: flex; flex-direction: column; gap: var(--e2); }
.lista-academias a {
  display: flex; align-items: center; gap: var(--e3); min-height: 56px; padding: var(--e2) var(--e3); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); text-decoration: none;
}
.lista-academias a:hover { border-color: var(--brand); background: var(--brand-soft); }
.lista-academias .sutil { display: block; }
@media (max-width: 480px) { .login-card { padding: var(--e5); } }

/* ---------- impressão ---------- */
@media print {
  :root { color-scheme: light; }
  .lateral, .lateral-fundo, .topo, .menu-btn, .filtros, .periodo, .btn, .toasts, .drawer-fundo { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .conteudo { padding: 0; }
  .card, .kpi { box-shadow: none; break-inside: avoid; }
  .drawer { position: static; transform: none; width: auto; box-shadow: none; }
  .tabela th { position: static; }
  a { color: inherit; }
}