/* layout.css - o esqueleto das telas: menu lateral, barra do topo e área de conteúdo. */
.app { display: grid; grid-template-columns: var(--menu-largura) minmax(0, 1fr); min-height: 100vh; }

/* ---------- Menu lateral ---------- */
.menu {
  background: var(--verde-escuro); color: #d7e5d8;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.menu__marca { padding: var(--e-4); }
.menu__logo {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  background: #fff; border-radius: var(--raio); padding: var(--e-2) var(--e-3);
}
.menu__logo img { height: 2.5rem; width: auto; }
.menu__logo span { font-size: var(--t-xs); font-weight: 700; line-height: 1.15; color: var(--verde-escuro); }
.menu__grupo { margin: 0; padding: var(--e-4) var(--e-4) var(--e-2); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em; color: #b6cdb8; font-weight: 600; }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__item {
  display: flex; align-items: center; gap: var(--e-3);
  padding: .6rem var(--e-4); color: #d7e5d8; text-decoration: none;
  border-left: 4px solid transparent; font-size: var(--t-sm);
}
.menu__item:hover { background: var(--verde-escuro-2); color: #fff; }
.menu__item[aria-current="page"] {
  background: var(--verde-escuro-3); color: #fff; font-weight: 600; border-left-color: var(--laranja);
}
.menu__item:focus-visible { box-shadow: inset 0 0 0 3px rgb(255 255 255 / .6); border-radius: 0; }
.menu__rodape { margin-top: auto; padding: var(--e-4); font-size: var(--t-xs); color: #b6cdb8; }
.menu-fundo { position: fixed; inset: 0; background: rgb(28 38 29 / .55); z-index: 40; }

/* ---------- Coluna principal ---------- */
.principal { display: flex; flex-direction: column; min-width: 0; }
.topo {
  position: sticky; top: 0; z-index: 20; height: var(--topo-altura);
  display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-5);
  background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.topo__titulo { font-size: var(--t-lg); font-weight: 700; color: var(--verde-escuro); margin: 0; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .topo__botao-menu { display: none; }
.usuario { display: flex; align-items: center; gap: var(--e-3); }
.usuario__avatar {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--laranja-fundo); color: var(--laranja-escuro); font-weight: 700; font-size: var(--t-sm);
  border: 2px solid var(--laranja);
}
.usuario__nome { font-size: var(--t-sm); font-weight: 600; line-height: 1.2; }
.usuario__perfil { font-size: var(--t-xs); color: var(--texto-suave); }

.conteudo { padding: var(--e-5); max-width: 80rem; width: 100%; margin: 0 auto; flex: 1; }
.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--e-3); margin-bottom: var(--e-5); }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina p { margin: var(--e-1) 0 0; color: var(--texto-suave); }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--borda); background: var(--superficie); padding: var(--e-4) var(--e-5);
  font-size: var(--t-xs); color: var(--texto-suave); display: grid; gap: var(--e-3); }
.rodape__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-5); }
.rodape__uso { font-weight: 600; color: var(--texto); }
.rodape__links a { color: var(--verde-escuro); }
.rodape__versao { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 700; color: var(--laranja-escuro); text-decoration: underline; text-underline-offset: .15em; }
.rodape__lema { font-style: italic; }
.rodape__creditos { text-align: right; line-height: 1.4; }
.rodape__creditos strong { color: var(--verde-escuro); }
.rodape__apoio { background: none; border: 0; padding: 0; cursor: pointer; color: var(--texto-suave); font-size: var(--t-xs); text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Celular e tablet: o menu vira uma gaveta ---------- */
@media (max-width: 62rem) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; z-index: 50; left: 0; top: 0; width: min(var(--menu-largura), 85vw);
          transform: translateX(-100%); transition: transform .2s ease; }
  .menu--aberto { transform: none; box-shadow: var(--sombra-3); }
  .topo { padding: 0 var(--e-3); }
  .topo .topo__botao-menu { display: inline-flex; }
  .usuario__texto { display: none; }
  .conteudo { padding: var(--e-4); }
  .rodape { padding: var(--e-4); }
  .rodape__linha { justify-content: center; text-align: center; }
  .rodape__creditos { text-align: center; }
}