/* AONDE - LAYOUT PADRAO - estrutura (menu lateral, cabecalho, conteudo, tela simples). Cores so por variaveis. */
body.com-menu{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh;background:var(--fundo)}
/* Menu: coluna fixa na altura da janela (sticky + 100dvh, align-self:start) - o fundo nunca termina antes da pagina. */
.menu{background:var(--menu-fundo);color:var(--menu-texto);display:flex;flex-direction:column;position:sticky;top:0;align-self:start;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;transition:transform .25s ease}
.menu-logo{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none}
.menu-logo img{width:40px;height:40px;background:#fff;border-radius:50%;padding:3px}
.menu-logo .marca{display:block;font-size:1.25rem;font-weight:800;letter-spacing:.8px;color:#fff;line-height:1.1}
.menu-logo small{display:block;color:var(--menu-texto);opacity:.85;font-size:.78rem}
.menu nav{flex:1;padding:10px 0}
.grupo-titulo{all:unset;display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:11px 18px;cursor:pointer;color:var(--menu-texto);font-weight:600;font-size:.92rem;transition:background .2s}
.grupo-titulo:hover,.grupo-titulo:focus-visible{background:var(--menu-destaque)}
.grupo-titulo .seta{margin-left:auto;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .25s}
.grupo-titulo[aria-expanded="true"] .seta{transform:rotate(45deg)}
.grupo ul{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
.grupo.aberto ul{max-height:900px}
.grupo ul a{display:block;padding:8px 18px 8px 46px;color:var(--menu-texto);text-decoration:none;font-size:.88rem;border-left:3px solid transparent;transition:background .18s,border-color .18s}
.grupo ul a:hover,.grupo ul a.ativo{background:var(--menu-destaque);border-left-color:var(--menu-ativo);color:#fff}
/* Icones do menu: SVG proprios em /recursos/imagens/icones/<nome>.svg (traco 2px, identidade Aonde) aplicados como
   MASCARA (cor = var(--menu-ativo), muda com o tema). Arquivo SVG externo (mesma origem): nao depende de data: na CSP.
   .icone sem regra propria usa o pino de localizacao (padrao.svg). Grupo de menu novo: criar o SVG e a linha abaixo. */
.icone{width:20px;height:20px;display:inline-block;flex:none;background:var(--menu-ativo);opacity:.95;-webkit-mask:url("../../imagens/icones/padrao.svg") center/contain no-repeat;mask:url("../../imagens/icones/padrao.svg") center/contain no-repeat}
.grupo-titulo:hover .icone,.grupo.aberto .icone{opacity:1}
.icone-painel{-webkit-mask-image:url("../../imagens/icones/painel.svg");mask-image:url("../../imagens/icones/painel.svg")}
.icone-inicio{-webkit-mask-image:url("../../imagens/icones/inicio.svg");mask-image:url("../../imagens/icones/inicio.svg")}
.icone-sistema{-webkit-mask-image:url("../../imagens/icones/sistema.svg");mask-image:url("../../imagens/icones/sistema.svg")}
.icone-configuracoes{-webkit-mask-image:url("../../imagens/icones/configuracoes.svg");mask-image:url("../../imagens/icones/configuracoes.svg")}
.icone-atualizacoes{-webkit-mask-image:url("../../imagens/icones/atualizacoes.svg");mask-image:url("../../imagens/icones/atualizacoes.svg")}
.icone-auditoria{-webkit-mask-image:url("../../imagens/icones/auditoria.svg");mask-image:url("../../imagens/icones/auditoria.svg")}
.icone-cadastros{-webkit-mask-image:url("../../imagens/icones/cadastros.svg");mask-image:url("../../imagens/icones/cadastros.svg")}
.icone-clientes{-webkit-mask-image:url("../../imagens/icones/clientes.svg");mask-image:url("../../imagens/icones/clientes.svg")}
.icone-comercial{-webkit-mask-image:url("../../imagens/icones/comercial.svg");mask-image:url("../../imagens/icones/comercial.svg")}
.icone-equipamentos{-webkit-mask-image:url("../../imagens/icones/equipamentos.svg");mask-image:url("../../imagens/icones/equipamentos.svg")}
.icone-dispositivos{-webkit-mask-image:url("../../imagens/icones/dispositivos.svg");mask-image:url("../../imagens/icones/dispositivos.svg")}
.icone-estoque{-webkit-mask-image:url("../../imagens/icones/estoque.svg");mask-image:url("../../imagens/icones/estoque.svg")}
.icone-faturas{-webkit-mask-image:url("../../imagens/icones/faturas.svg");mask-image:url("../../imagens/icones/faturas.svg")}
.icone-notas{-webkit-mask-image:url("../../imagens/icones/notas.svg");mask-image:url("../../imagens/icones/notas.svg")}
.icone-financeiro{-webkit-mask-image:url("../../imagens/icones/financeiro.svg");mask-image:url("../../imagens/icones/financeiro.svg")}
.icone-fiscal{-webkit-mask-image:url("../../imagens/icones/fiscal.svg");mask-image:url("../../imagens/icones/fiscal.svg")}
.icone-relatorios{-webkit-mask-image:url("../../imagens/icones/relatorios.svg");mask-image:url("../../imagens/icones/relatorios.svg")}
.icone-servidores{-webkit-mask-image:url("../../imagens/icones/servidores.svg");mask-image:url("../../imagens/icones/servidores.svg")}
.icone-suporte{-webkit-mask-image:url("../../imagens/icones/suporte.svg");mask-image:url("../../imagens/icones/suporte.svg")}
.icone-chat{-webkit-mask-image:url("../../imagens/icones/chat.svg");mask-image:url("../../imagens/icones/chat.svg")}
.icone-tabelas{-webkit-mask-image:url("../../imagens/icones/tabelas.svg");mask-image:url("../../imagens/icones/tabelas.svg")}
.icone-vendas{-webkit-mask-image:url("../../imagens/icones/vendas.svg");mask-image:url("../../imagens/icones/vendas.svg")}
.icone-contratos{-webkit-mask-image:url("../../imagens/icones/contratos.svg");mask-image:url("../../imagens/icones/contratos.svg")}
.icone-conta{-webkit-mask-image:url("../../imagens/icones/conta.svg");mask-image:url("../../imagens/icones/conta.svg")}
.icone-seguranca{-webkit-mask-image:url("../../imagens/icones/seguranca.svg");mask-image:url("../../imagens/icones/seguranca.svg")}
.menu-rodape{padding:12px 18px;font-size:.76rem;opacity:.75;border-top:1px solid rgba(255,255,255,.08)}
.principal{display:flex;flex-direction:column;min-width:0}
.cabecalho{display:flex;align-items:center;gap:14px;padding:10px 24px;background:var(--cabecalho-fundo);border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:5}
.titulo-pagina{font-size:1.12rem;margin:0;font-weight:700;flex:1;color:var(--texto)}
.cabecalho-acoes{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.btn-menu{all:unset;display:none;font-size:1.4rem;cursor:pointer;color:var(--texto)}
.btn-tema{all:unset;cursor:pointer;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--superficie-2);color:var(--texto);transition:transform .3s}
.btn-tema:hover{transform:rotate(20deg)}
.usuario{display:flex;align-items:center;gap:10px;font-size:.88rem}
.usuario-nome{font-weight:600}
.btn-sair{all:unset;cursor:pointer;color:var(--perigo);font-weight:600}
.conteudo{padding:24px;flex:1;animation:aparecer .3s ease}
.rodape{padding:12px 24px;font-size:.76rem;color:var(--texto-suave);border-top:1px solid var(--borda)}
/* Tela simples (login, 2FA, recuperacao) */
body.simples{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,var(--fundo) 0%,var(--primaria-suave) 100%)}
.centro{width:100%;max-width:430px;padding:16px}
.versao-rodape{text-align:center;color:var(--texto-suave);font-size:.76rem;margin-top:16px}
@media (max-width:900px){
  body.com-menu{grid-template-columns:1fr}
  .menu{position:fixed;left:0;top:0;width:264px;z-index:20;transform:translateX(-100%)}
  .menu.aberto{transform:translateX(0)}
  .btn-menu{display:block}
  .conteudo{padding:16px}
  .cabecalho{padding:10px 14px;flex-wrap:wrap;row-gap:6px}
  /* Celular/tablet: botao do menu e acoes na 1a linha; titulo SEMPRE em linha propria abaixo (todas as telas) */
  .btn-menu{order:1}
  .cabecalho-acoes{order:2;margin-left:auto;flex-wrap:wrap;min-width:0;gap:8px;justify-content:flex-end}
  .titulo-pagina{order:3;flex:1 1 100%;min-width:0;overflow-wrap:anywhere;font-size:1.05rem}
  .usuario{flex-wrap:wrap;min-width:0}
  .usuario-nome{overflow-wrap:anywhere}
}