/* Estrutura da página: a coluna de conteúdo e a barra de navegação.

   Mobile primeiro, porque é como quase todo atleta abre. Os breakpoints
   daqui para baixo só acrescentam: em telas maiores a coluna respira, as
   grades ganham colunas e a barra sai de baixo e vai para o lado. */

  .wrap{max-width:780px;margin:0 auto;padding:16px}
  .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .grid{display:grid;gap:10px}

  /* auto-fit em vez de número fixo de colunas: a grade se ajusta sozinha à
     largura, e o antigo @media de 520px deixou de ser necessário. Os
     mínimos são medidos para caber duas (g2) e três (g3) colunas dentro de
     um cartão num aparelho de 360px, que é o mais estreito que importa. */
  .g2{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .g3{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}

  nav{position:fixed;bottom:0;left:0;right:0;background:var(--nav-fundo);backdrop-filter:blur(10px);
    border-top:1px solid var(--linha);display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  nav button{flex:1;background:none;border:none;color:var(--txt-fraco);font-size:11px;padding:8px 2px;display:flex;
    flex-direction:column;align-items:center;gap:3px}
  nav button.on{color:var(--acento)}
  nav .ic{font-size:20px;line-height:1}

/* ── Tablet e telas médias ──
   Espaço para a coluna respirar. Nada muda de lugar; só de tamanho. */
@media (min-width:720px){
  .wrap{padding:24px 20px}
  h1{font-size:26px}
  .card{padding:20px}
}

/* ── Desktop ──
   Até aqui a página era uma faixa de 780px com uma barra de navegação de
   celular esticada de ponta a ponta na base — a única coisa que ocupava a
   tela inteira era justamente a que não devia. A barra vira uma coluna
   fixa à esquerda, com os rótulos ao lado dos ícones, e o conteúdo passa a
   morar numa coluna centrada no espaço que sobra. */
@media (min-width:1024px){
  body{padding-bottom:0;padding-left:var(--nav-largura)}
  /* A barra lateral mora dentro de #app: na tela de login não há barra
     nenhuma, e o recuo do body empurrava a coluna 210px para a direita. */
  body:has(#login:not(.hide)), body:has(#cadastro:not(.hide)){padding-left:0}

  nav{
    top:0;bottom:0;right:auto;width:var(--nav-largura);
    flex-direction:column;justify-content:flex-start;gap:4px;
    padding:20px 12px;
    border-top:0;border-right:1px solid var(--linha);
  }
  nav button{
    flex:0 0 auto;width:100%;
    flex-direction:row;justify-content:flex-start;gap:12px;
    font-size:15px;padding:12px 14px;border-radius:var(--raio-sm);
  }
  nav button.on{background:var(--acento-fundo)}
  nav .ic{font-size:19px}

  .wrap{max-width:860px;padding:28px 32px}

  /* O modal deixa de ser folha que sobe de baixo: no desktop isso parece
     um app de celular esticado. Vira diálogo centrado. */
  .modal{align-items:center;padding:24px}
  .sheet{max-width:560px;border-radius:var(--raio-xl,18px);max-height:86vh}
  .sheet .handle{display:none}

  .toast{bottom:32px}
}

/* ── Telas largas ──
   A tela Hoje tem dois assuntos independentes (o dia e o treino), então
   em tela larga eles ficam lado a lado em vez de empilhados com meia tela
   vazia à direita. */
@media (min-width:1280px){
  .wrap{max-width:1100px}
  #v-hoje > #hojeBody{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:start;gap:16px;
  }
  /* O último filho (o link para a Evolução) atravessa as duas colunas. */
  #v-hoje > #hojeBody > :last-child{grid-column:1 / -1}
}