/* Estrutura da aplicação.
   Desktop (>= 1024px): menu lateral fixo + conteúdo.
   Celular e tablet: barra superior + barra de navegação inferior + folha "Mais". */

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

/* ---------- Menu lateral ---------- */
.lateral {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--papel);
  border-right: 1px solid var(--linha);
  overflow-y: auto;
}
.marca-estab {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-4);
}
.marca-estab__selo {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--marca); color: var(--sobre-marca);
  font-family: var(--fonte-titulo); font-size: 1.35rem; line-height: 1;
}
.marca-estab__nome { font-weight: 600; font-size: var(--t-md); line-height: 1.25; }
.marca-estab__seg { font-size: var(--t-xs); color: var(--cinza); }

.nav { padding: var(--e-2) var(--e-3) var(--e-5); display: grid; gap: var(--e-4); }
.nav__grupo { display: grid; gap: 2px; }
.nav__titulo {
  font-size: var(--t-xs); font-weight: 600; color: var(--cinza);
  padding: 0 var(--e-3) var(--e-1);
}
.nav__item {
  position: relative;
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 40px; padding: 0 var(--e-3);
  border-radius: var(--r-sm);
  color: var(--grafite); text-decoration: none; font-size: var(--t-sm); font-weight: 500;
  transition: background var(--transicao), color var(--transicao);
}
.nav__item:hover { background: var(--nevoa); color: var(--tinta); }
.nav__item[aria-current="page"] { background: var(--marca-suave); color: var(--marca-forte); font-weight: 600; }
.nav__item[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--marca);
}
.lateral__rodape {
  margin-top: auto; padding: var(--e-4) var(--e-5);
  border-top: 1px solid var(--linha);
  font-size: var(--t-xs); color: var(--cinza);
}

/* ---------- Área principal ---------- */
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 10;
  height: var(--topo);
  display: flex; align-items: center; gap: var(--e-4);
  padding: 0 var(--e-6);
  background: color-mix(in srgb, var(--nevoa) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.topo__data { font-size: var(--t-sm); color: var(--grafite); }
.topo__marca-movel { display: none; }
.topo__fim { margin-left: auto; display: flex; align-items: center; gap: var(--e-3); }

.conteudo {
  width: 100%; max-width: 1200px;
  padding: var(--e-6) var(--e-6) var(--e-7);
  flex: 1;
}
.cabecalho-pagina {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--e-4); margin-bottom: var(--e-6);
}
.cabecalho-pagina h1 {
  font-family: var(--fonte-titulo); font-weight: 400;
  font-size: var(--t-3xl); letter-spacing: -0.01em; line-height: 1.05;
}
.cabecalho-pagina p { color: var(--grafite); margin-top: var(--e-2); max-width: 60ch; }
.cabecalho-pagina__acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }

.aviso-ambiente {
  display: flex; gap: var(--e-2); align-items: center;
  padding: var(--e-2) var(--e-6);
  background: var(--alerta-suave); color: var(--alerta);
  font-size: var(--t-sm); border-bottom: 1px solid color-mix(in srgb, var(--alerta) 25%, transparent);
}

/* ---------- Barra inferior (celular) ---------- */
.barra-movel { display: none; }

@media (max-width: 1023px) {
  .app { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .topo { padding: 0 var(--e-4); }
  .topo__data { display: none; }
  .topo__marca-movel { display: flex; align-items: center; gap: var(--e-2); font-weight: 600; }
  .topo__marca-movel .marca-estab__selo { width: 30px; height: 30px; font-size: 1.1rem; }
  .aviso-ambiente { padding: var(--e-2) var(--e-4); }
  .conteudo { padding: var(--e-5) var(--e-4) calc(var(--barra-movel) + var(--e-6) + env(safe-area-inset-bottom)); }
  .cabecalho-pagina { margin-bottom: var(--e-5); }
  .cabecalho-pagina h1 { font-size: var(--t-2xl); }

  .barra-movel {
    position: fixed; inset: auto 0 0 0; z-index: 20;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: calc(var(--barra-movel) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--papel); border-top: 1px solid var(--linha);
  }
  .barra-movel__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; background: none; cursor: pointer;
    color: var(--cinza); text-decoration: none; font-size: 0.6875rem; font-weight: 500;
  }
  .barra-movel__item[aria-current="page"] { color: var(--marca); font-weight: 600; }
  .barra-movel__item .icone { width: 22px; height: 22px; }
}

/* Folha "Mais" no celular reaproveita o menu completo */
.folha-nav .nav { padding: 0; }
.folha-nav .nav__item[aria-current="page"]::before { left: -4px; }

/* ---------- Telas cheias (entrada, avisos de sessão) ---------- */
.tela-cheia {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--e-5) var(--e-4);
}
.tela-cheia__caixa { width: min(420px, 100%); display: grid; gap: var(--e-5); }
.tela-cheia__marca { display: flex; align-items: center; gap: var(--e-3); font-weight: 600; }
.tela-cheia h1 {
  font-family: var(--fonte-titulo); font-weight: 400;
  font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -0.01em;
}
.tela-cheia__texto { color: var(--grafite); margin-top: var(--e-2); }
.tela-cheia__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.tela-cheia form { display: grid; gap: var(--e-4); }
.tela-cheia__opcoes { display: grid; gap: var(--e-2); }
.tela-cheia__opcao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  width: 100%; padding: var(--e-3) var(--e-4); text-align: left; cursor: pointer;
  background: var(--papel); border: 1px solid var(--linha-forte); border-radius: var(--r-sm);
}
.tela-cheia__opcao:hover { border-color: var(--marca); }
.tela-cheia__rodape { font-size: var(--t-xs); color: var(--cinza); }
.link-botao {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--marca); font-size: var(--t-sm); font-weight: 600; text-decoration: underline;
}
@media (max-width: 1023px) {
  .tela-cheia h1 { font-size: var(--t-2xl); }
  .topo__nome { display: none; }
}
.topo__nome { font-size: var(--t-sm); color: var(--grafite); text-align: right; line-height: 1.25; }
.topo__nome strong { display: block; color: var(--tinta); font-weight: 600; }

/* Topo estreito: nome longo vira reticências e atalhos secundários somem. */
.topo__marca-movel { min-width: 0; }
.topo__marca-movel > div:last-child { min-width: 0; }
.topo__marca-movel .marca-estab__nome,
.topo__marca-movel .marca-estab__seg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo__fim { flex: none; }
@media (max-width: 639px) {
  .topo .topo__extra { display: none; }
}