/* Smart Pages: casca das áreas logadas (/clients e /admin). Estrutura do painel-v3 do pages (menu de 256 px, topo,
   gaveta abaixo de 1100 px) na identidade EcomSmart v4 (ADR 0051): menu branco, item ativo em Céu com o azul
   profundo, topo em vidro claro, página Papel e cartões brancos com a Linha; corpo de 16 px; alvos de 44 px. */

.app { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }
.app-menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--es-fundo);
  border-right: 1px solid var(--es-linha); padding: var(--esp-4) var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-4);
}
.app-menu .marca { padding: 0 var(--esp-2); min-height: var(--alvo); }
.app-menu nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.app-menu nav a {
  display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alvo); padding: 0 var(--esp-3);
  border-radius: var(--raio-sm); color: var(--es-texto-2); text-decoration: none; font-size: var(--fs-ui); font-weight: 500;
  transition: background-color var(--es-dur-1), color var(--es-dur-1);
}
.app-menu nav a:hover { background: var(--es-superficie-2); color: var(--es-texto); }
.app-menu nav a[aria-current="page"] { background: var(--es-suave); color: var(--es-destaque); font-weight: var(--peso-ui); }
/* pé do menu: "Sair" como item da navegação, com ícone, e o tema num botão de ícone (lua no claro, sol no escuro) */
.app-menu .rodape-menu { margin-top: auto; padding-top: var(--esp-3); border-top: 1px solid var(--es-linha);
  display: flex; align-items: center; gap: var(--esp-1); }
.menu-item { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alvo); min-width: var(--alvo); padding: 0 var(--esp-3);
  border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--es-texto-2); font-size: var(--fs-ui); font-weight: 500;
  cursor: pointer; transition: background-color var(--es-dur-1), color var(--es-dur-1); }
.menu-item:hover { background: var(--es-superficie-2); color: var(--es-texto); }
.rodape-menu #sair { flex: 1; }
.menu-tema { justify-content: center; padding: 0; }
.icone { flex: none; width: 20px; height: 20px; }
.menu-tema .icone-sol { display: none; }
[data-tema="escuro"] .menu-tema .icone-sol { display: block; }
[data-tema="escuro"] .menu-tema .icone-lua { display: none; }

.app-corpo { min-width: 0; display: flex; flex-direction: column; }
.app-topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--esp-3); min-height: 64px;
  padding: 0 var(--esp-5); background: var(--es-topo-vidro); border-bottom: 1px solid var(--es-linha);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.app-topo .titulo { font-size: var(--fs-xl); font-weight: var(--peso-ui); letter-spacing: -0.01em; margin: 0; flex: 1; min-width: 0; }
.app-topo .usuario { font-size: var(--fs-peq); color: var(--es-texto-2); }
.app-main { padding: var(--esp-5); width: 100%; max-width: 1440px; }
.app-main .card { border: 1px solid var(--es-linha); }
/* Alvos de 44 px nas telas das duas áreas (conferência v2.1 em 390, 1440 e 1920 px): resumo de details, link sozinho
   em célula de tabela ou em dd e campos fora de .campo (busca dos leads). Link no meio de frase fica como está. */
.app-main details > summary { min-height: var(--alvo); padding-block: 10px; cursor: pointer; }
.app-main td > a, .app-main dd > a, .app-main .bo-celula > a { display: inline-flex; align-items: center; min-height: var(--alvo);
  min-width: var(--alvo); }
.app-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), .app-main select {
  min-height: var(--alvo); }
/* gaveta abaixo de 1100 px: o mesmo botão redondo de três traços do site (.burger do tema ecomsmart) */
.botao-menu { display: none; place-items: center; flex: none; width: var(--alvo); height: var(--alvo); padding: 0; border-radius: 50%;
  border: 1px solid var(--es-linha-media); background: var(--es-fundo); color: var(--es-texto); cursor: pointer;
  transition: border-color var(--es-dur-1), background-color var(--es-dur-1); }
.botao-menu:hover { border-color: var(--es-texto); }
.botao-menu svg { width: 20px; height: 20px; }
.app-veu { display: none; }
.seletor-tenant select { min-height: var(--alvo); width: 100%; border-radius: var(--raio-sm); border: 1px solid var(--es-linha-forte);
  background: var(--es-fundo); padding: 0 var(--esp-3); }

@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .app-menu {
    position: fixed; left: 0; top: 0; bottom: 0; width: 280px; max-width: 86vw; z-index: 60;
    transform: translateX(-105%); transition: transform var(--es-dur-2) var(--es-ease); box-shadow: var(--es-sombra-forte);
  }
  .app[data-gaveta="aberta"] .app-menu { transform: translateX(0); }
  .app[data-gaveta="aberta"] .app-veu { display: block; position: fixed; inset: 0; z-index: 50; background: var(--es-veu); }
  .botao-menu { display: inline-grid; }
  .app-topo { padding: 0 var(--esp-4); }
  .app-main { padding: var(--esp-4); }
}
/* No celular o título da tela não quebra em três linhas: o nome de quem entrou sai do topo (fica no menu) */
@media (max-width: 479px) {
  .app-topo .titulo { font-size: var(--fs-h3); line-height: 1.25; }
  .app-topo .usuario { display: none; }
}

/* entrar, convite e páginas curtas do núcleo: cartão branco sobre o Papel */
.entrar { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--esp-5) var(--gutter);
  background: var(--es-fundo-2); }
.entrar .cartao-form { width: min(440px, 100%); }
.entrar .marca { margin-bottom: var(--esp-5); }
.entrar h1 { font-size: clamp(26px, 3vw, 32px); }