/**
 * Layout — o shell da página: sidebar fixa, conteúdo, off-canvas e breakpoints.
 * Este arquivo só POSICIONA; quem pinta é componentes.css. Visibilidade conta
 * como posicionamento, então é aqui que peças inteiras aparecem e somem por
 * breakpoint.
 *
 * A sidebar tem dois slots: navegação no topo e sessão do usuário colada no pé
 * (`.lateral > .slot + .slot { margin-top: auto }`).
 *
 * Abaixo de 1024px a sidebar vira off-canvas: fica fora da tela até o
 * hambúrguer abrir (`body.menu-aberto`), e o `.veu` entra junto para fechar no
 * toque. O `.hamburguer` só existe nesse modo.
 *
 * As seções `.vista` são ABAS, não âncoras de rolagem — cada item da sidebar
 * troca a vista visível. O `scroll-margin-top` em `section[id]` cuida do que
 * ainda é âncora, para não colar no topo da janela.
 *
 * Em 1680px+ a tela precisa trabalhar em vez de virar deserto: a sidebar
 * engorda e o conteúdo perde o teto de largura. O grid antigo de duas colunas
 * do `#cliente` saiu daqui — quem divide a fileira saldo/lançamentos/
 * integridade agora é o próprio `.cliente__trio` (20/65/15).
 *
 * Até 767px a navegação principal é a barra de abas inferior (o padrão de
 * bottom tab bar das HIG/Material), não um menu escondido; o `.principal` abre
 * espaço embaixo para ela e o rodapé some.
 *
 * O `.espiar` é o convite discreto para a landing: uma alça fixa na borda
 * direita, só em desktop.
 */

.lateral {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--lateral-larg);
  display: flex;
  flex-direction: column;
  background: var(--marca-tinta);
  z-index: 30;
  overflow-y: auto;
  padding-left: env(safe-area-inset-left);
  padding-bottom: env(safe-area-inset-bottom);
}

.principal {
  margin-left: var(--lateral-larg);
  padding: 0 max(var(--e6), env(safe-area-inset-right)) var(--e10)
           max(var(--e6), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  max-width: calc(var(--largura-max) + 2 * var(--e6));
}

.veu {
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(16, 17, 20, .45);
  z-index: 20;
  cursor: default;
}

.hamburguer { display: none; }

.lateral > .slot + .slot { margin-top: auto; }

@media (max-width: 1023px) {
  .lateral {
    transform: translateX(-100%);
    transition: transform var(--transicao);
    box-shadow: none;
  }

  body.menu-aberto .lateral {
    transform: none;
    box-shadow: var(--sombra-flutua);
  }

  .principal {
    margin-left: 0;
    padding: 0 max(var(--e4), env(safe-area-inset-right)) var(--e10)
             max(var(--e4), env(safe-area-inset-left));
  }

  .hamburguer { display: grid; }
}

section[id] { scroll-margin-top: var(--e6); }

.vista {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-width: 0;
}


@media (min-width: 1680px) {
  :root { --lateral-larg: 280px; }

  .principal { max-width: none; }

  .cartoes-clientes { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

.barra { display: none; }

@media (max-width: 767px) {
  .barra {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 25;
    display: flex;
    justify-content: space-around;
    background: var(--sup-cartao);
    border-top: 1px solid var(--borda-cartao);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  }

  .barra__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 62px;
    padding: 4px 6px;
    border-radius: var(--raio-pequeno);
    color: var(--tinta-3);
    font-size: var(--t-etiqueta);
    font-weight: var(--peso-forte);
    text-decoration: none;
  }

  .barra__item--ativo { color: var(--sem-info); }

  .principal { padding-bottom: 84px; }
  .rodape { display: none; }
}


.espiar { display: none; }

@media (min-width: 1024px) {
  .espiar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 15;
    display: grid;
    place-items: center;
    width: 34px;
    height: 76px;
    border-radius: var(--raio-medio) 0 0 var(--raio-medio);
    background: var(--marca-tinta);
    color: var(--marca-amarelo);
  }

  .espiar__seta { transform: rotate(90deg); transition: transform var(--transicao); }

  .espiar:hover .espiar__seta { transform: rotate(90deg) translateY(3px); }
}