/* =====================================================================
   Acabamento: telas grandes (tablet deitado, notebook, monitor).
   O app continua mobile-first: tudo nos outros arquivos é o desenho do
   celular, e aqui só entram as mudanças a partir de 1024px de largura.

   No celular                      No computador (>= 1024px)
   ┌──────────────┐               ┌──────────────────────────────────┐
   │ topo         │               │ topo (fica preso no alto)        │
   │              │               ├────────┬─────────────────────────┤
   │  conteúdo    │               │ Hoje   │                         │
   │              │               │ Agenda │   conteúdo (centrado)   │
   │          (+) │               │ Entrada│                         │
   │ Hoje Agenda… │               │[Anotar]│                         │
   └──────────────┘               └────────┴─────────────────────────┘

   Por que 1024px? Abaixo disso (celular, tablet em pé), o menu embaixo fica
   perto do polegar. Acima, a tela é larga e quase sempre há um mouse: uma
   barra lateral aproveita o espaço que sobraria vazio dos lados.
   ===================================================================== */

:root {
  --largura-menu: 232px;
  --altura-topo: 64px;
}

@media (min-width: 1024px) {
  /* Grade da página: topo em cima (2 colunas), menu à esquerda, conteúdo à direita.
     Só com login: a tela de entrar continua com o cartão centralizado. */
  body.logado {
    display: grid;
    grid-template-columns: var(--largura-menu) minmax(0, 1fr); /* minmax(0, …): texto longo não estoura a coluna */
    grid-template-rows: auto 1fr;
  }

  /* Topo preso no alto: o conteúdo rola por baixo dele.
     Fundo sólido pelo mesmo motivo do menu (veja .menu em componentes.css). */
  body.logado .topo {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--altura-topo);
    padding-inline: 24px;
  }
  .topo__email { max-width: 32ch; }

  /* Menu: de barra embaixo para coluna à esquerda.
     "sticky" + altura da tela: ele fica parado enquanto o conteúdo rola. */
  body.logado .menu {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: var(--altura-topo);
    /* Desfaz o left/right/bottom: 0 do menu de celular (no sticky, eles também "prendem") */
    left: auto; right: auto; bottom: auto;
    align-self: start; /* sem isto, a grade estica o menu até o fim da página e o sticky não funciona */
    height: calc(100dvh - var(--altura-topo));
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 20px 12px;
    border-top: 0;
    border-right: 1px solid var(--borda);
  }
  .menu__item {
    flex: none;
    max-width: none;
    flex-direction: row;         /* ícone ao lado do nome, como num menu de computador */
    justify-content: flex-start;
    gap: 12px;
    min-height: 44px;
    padding: 0 14px;
  }
  .menu__nome { font-size: 0.95rem; font-weight: 600; }

  /* Selo da Entrada: com ícone e nome lado a lado, no canto do ícone ele cobriria
     o nome. Vai para a ponta direita do item, centrado na altura. */
  .menu__item { position: relative; }
  .menu__icone { position: static; } /* o selo passa a se posicionar pelo item inteiro */
  .menu__selo { top: calc(50% - 9px); right: 14px; } /* 9px = metade da altura do selo */

  /* Conteúdo: coluna da direita, centrado e um pouco mais largo que no celular */
  body.logado #app {
    grid-column: 2;
    grid-row: 2;
    max-width: 760px;
    padding: 40px 32px 64px; /* sem menu embaixo, não precisa do espaço extra de 150px */
  }

  /* Botão "+" vira "+ Anotar", preso no pé da barra lateral */
  .fab {
    left: 12px;
    right: auto;
    bottom: 20px;
    width: calc(var(--largura-menu) - 24px);
    height: 48px;
    gap: 8px;
    border-radius: var(--raio-pequeno);
    font: inherit;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .fab svg { width: 22px; height: 22px; }
  .fab__rotulo { display: inline; }
  @media (prefers-reduced-motion: no-preference) {
    /* Largo como um botão comum: afunda como um botão comum (os 8% do celular seriam demais) */
    .fab:active { transform: scale(0.97); }
  }

  /* Aviso: centrado na área do conteúdo (não na tela toda) e perto do pé */
  body.logado .aviso { left: var(--largura-menu); bottom: 32px; }

  /* Navegação da Revisão: sem menu embaixo, ela encosta no pé da tela */
  body.logado .revisao__navegacao { bottom: 0; }
}