/* GEOCASSOL — navegacao principal (a nav azul), estilo do modulo compartilhado.
 *
 * Copia das regras de moldura de css/app.css (:15,:18-19,:23-25,:31-38,
 * :465-471,:511-522), que PERMANECEM la para a tela antiga. Enquanto as duas
 * telas convivem, o estilo do menu existe descrito em dois lugares; a copia
 * morre junto com app.js no desligamento.
 *
 * AUTOCONTIDO de proposito. Nao usa variavel de :root de pagina nenhuma:
 * --ink existe nas duas paginas com significados OPOSTOS (navy de fundo em
 * app.css, cor de texto na 2.0) e --paper, --line, --brass e --mono nem existem
 * na 2.0 — as regras cairiam sem valor, sem erro e sem aviso. As cores da
 * identidade ficam declaradas aqui, no escopo do modulo.
 *
 * E nao depende de reset: o `*{margin:0;padding:0}` de app.css nao existe na
 * 2.0, entao cada seletor daqui declara a propria margem e o proprio
 * espacamento — inclusive os botoes, que a 2.0 estiliza por `button{...}`.
 */

#shell{
  --gm-navy:#0c0137; --gm-paper:#F6F7FB; --gm-line:#DEE0EC;
  --gm-brass:#4550a2; --gm-brass-soft:#E6E7F5; --gm-muted:#6A6E8C;
  --gm-sans:'Archivo',system-ui,sans-serif;
  --gm-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  display:flex;min-height:100vh;margin:0;padding:0
}
/* overflow-y:auto: com o submenu Cadastros aberto o conteudo passa de 100vh e,
   sem rolagem interna, vazava da caixa azul pintando por cima do fundo branco */
#menu{width:200px;flex:0 0 auto;background:var(--gm-navy);color:#EDF1EE;display:flex;
  flex-direction:column;padding:18px 12px;margin:0;position:sticky;top:0;height:100vh;
  overflow-y:auto;font-family:var(--gm-sans);font-size:14px}
body.nav-oculta #menu{display:none}
/* alca de recolher a nav AZUL: mora numa CALHA propria de 24px no layout (nao
   flutua sobre conteudo clicavel) e, por estar dentro de #shell, some junto na
   tela de login e fica ABAIXO do veu do modal (z-index 900) */
#navGutter{flex:0 0 24px;position:sticky;top:0;height:100vh;display:flex;align-items:center;
  z-index:5;margin:0;padding:0}
/* O menu so e montado depois do guarda responder (/api/config + /api/eu).
   Ate la o hospedeiro reserva EXATAMENTE o espaco que menu + calha vao ocupar
   — senao o conteudo inteiro pula para a direita quando eles chegam
   (CLS 0,28 na 2.0 a 390px). Mesmas medidas das regras acima e da media 860. */
#menu-host{flex:0 0 224px;height:100vh;background:var(--gm-navy)}
body.nav-oculta #menu-host{flex-basis:24px;background:transparent}
#navToggle{width:24px;height:52px;margin:0;padding:0;border:1px solid var(--gm-line);
  border-left:none;border-radius:0 10px 10px 0;background:var(--gm-paper);color:var(--gm-muted);
  cursor:pointer;font-family:var(--gm-sans);font-size:15px;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.12)}
#navToggle:hover{color:var(--gm-brass);border-color:var(--gm-brass)}

#menu .brand{display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  padding:6px 6px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin:0 0 14px}
#menu .brand .logo{width:156px;max-width:100%;height:auto;display:block;margin:0}
#menu .brand .brand-sub{font-family:var(--gm-mono);font-size:9px;color:rgba(255,255,255,.5);
  letter-spacing:1.6px;text-transform:uppercase;padding-left:2px}
#menu a{display:block;padding:10px 12px;border-radius:9px;color:rgba(237,241,238,.78);
  font-weight:600;font-size:13.5px;text-decoration:none;margin:0 0 2px}
#menu a:hover{background:rgba(255,255,255,.07)}
#menu a.on{background:rgba(122,132,204,.20);color:#B7BEEA}
#menu .menu-foot{margin:auto 0 0;padding:10px 12px;font-family:var(--gm-mono);font-size:11px}
#menu .menu-foot a{color:rgba(237,241,238,.45);margin:0;padding:0}

/* ---- grupo "Cadastros" ---- */
#menu .menu-grupo{margin:0 0 2px;padding:0}
#menu .menu-grupo-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  margin:0;padding:10px 12px;border-radius:9px;color:rgba(237,241,238,.78);font-weight:600;
  font-size:13.5px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left}
#menu .menu-grupo-btn:hover{background:rgba(255,255,255,.07)}
#menu .menu-grupo-btn.on{color:#B7BEEA}
#menu .menu-grupo-btn .seta{transition:transform .18s ease;font-size:15px;opacity:.6}
#menu .menu-grupo-btn.aberto .seta{transform:rotate(90deg)}
#menu .menu-sub{display:none;margin:2px 0 4px 10px;padding-left:8px;
  border-left:1px solid rgba(255,255,255,.14)}
#menu .menu-sub.aberto{display:block}
#menu .menu-sub a{font-size:12.5px;padding:8px 10px;font-weight:500}

/* ---- quem esta logado, no rodape do menu ---- */
#menu-usuario{margin:auto 0 0;padding:12px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;color:rgba(237,241,238,.75)}
#menu-usuario[hidden]{display:none}
#menu-usuario .mu-email{font-weight:600;word-break:break-all;font-size:11.5px}
#menu-usuario .mu-papel{font-family:var(--gm-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:2px}
#menu-usuario #mu-sair{margin:8px 0 0;padding:0;color:var(--gm-brass-soft);font-size:11px;
  font-family:inherit;text-decoration:underline;background:none;border:none;cursor:pointer}

/* Foco do teclado na nav azul. Mesma regra que app.css ganhou, repetida aqui
   pela razao que o cabecalho deste arquivo explica: o modulo e autocontido e
   nao le variavel de :root de pagina nenhuma. Anel claro porque o fundo e
   navy — o contorno padrao do navegador e quase-preto e some contra ele. */
#menu a:focus-visible,#menu button:focus-visible{
  outline:2px solid #B7BEEA;outline-offset:2px}
/* A alca de recolher mora na calha CLARA, nao no navy: com o anel claro dariam
   1,7:1. Aqui vale o indigo da identidade, que da 6,7:1 contra a calha. */
#navToggle:focus-visible{outline:2px solid var(--gm-brass);outline-offset:2px}

/* "Pular para o conteudo": fora da tela ate receber foco. Sem ele sao 14 Tabs
   de menu antes de chegar ao conteudo. Cores literais porque o modulo e
   autocontido (ver o cabecalho). */
#pular{position:absolute;left:-9999px;top:0;z-index:999;background:#4550a2;color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;font-size:13.5px;
  text-decoration:none;font-family:'Archivo',system-ui,sans-serif}
#pular:focus{left:0}
#principal:focus{outline:none}

/* ---- celular: a nav vira gaveta sobre o conteudo (achado 12) --------------
 * Mesma regra que css/app.css ganhou, repetida aqui pela razao do cabecalho:
 * o modulo e autocontido. Em tela de 400px os 200px do menu comiam metade do
 * espaco util e o corpo da pagina passava a rolar de lado. */
@media (max-width:860px){
  #menu{position:fixed;left:0;top:0;height:100vh;width:230px;z-index:800;
    box-shadow:0 0 34px rgba(12,1,55,.4);transition:transform .18s ease}
  body.nav-oculta #menu{display:flex;transform:translateX(-100%)}
  /* A calha continua no layout (ver o comentario da linha 32) e so engorda para
     virar alvo de dedo. Com a gaveta ABERTA ela seria coberta, e sem a alca nao
     haveria como fechar: so nesse estado a alca flutua na borda da gaveta. */
  #navGutter{flex:0 0 36px;width:36px}
  #menu-host,body.nav-oculta #menu-host{flex-basis:36px;background:transparent}
  #navToggle{width:36px;height:64px;font-size:19px}
  body:not(.nav-oculta) #navGutter{position:fixed;left:230px;top:0;z-index:801;
    pointer-events:none}
  body:not(.nav-oculta) #navToggle{pointer-events:auto}
  /* area segura do topo (entalhe) — mesma regra do app.css */
  #menu{padding-top:env(safe-area-inset-top,0px)}
  #navGutter{padding-top:env(safe-area-inset-top,0px)}
  /* veu atras da gaveta: toque fora fecha e e consumido (ver app.css) */
  #navVeu{position:fixed;inset:0;z-index:799;background:rgba(12,1,55,.35);
    touch-action:none}
  body.nav-oculta #navVeu{display:none}
}
@media (pointer:coarse){
  /* alvo de dedo nos itens da gaveta (spec interacao-por-toque) */
  #menu a,#menu .menu-grupo-btn{min-height:44px}
  #navToggle{min-width:44px}
}
@media (prefers-reduced-motion:reduce){
  #menu{transition:none}
}

/* ---------------------------------------------------------------------------
 * APLICATIVO INSTALAVEL (spec aplicativo-instalavel): aviso de versao nova e
 * item "Instalar o aplicativo" no bloco do usuario. Ambos so existem na
 * instancia publicada (auth.js decide); o CSS e inerte no coletor.
 * ------------------------------------------------------------------------- */
#pwaAviso{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1200;
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);
  background:var(--gm-navy);color:#fff;padding:10px 10px 10px 16px;border-radius:12px;
  box-shadow:0 10px 30px rgba(12,1,55,.35);font-size:13.5px}
#pwaAviso button{min-height:36px;border:0;border-radius:8px;cursor:pointer;font:inherit;font-weight:600}
#pwaRecarregar{background:#fff;color:var(--gm-navy);padding:0 14px}
#pwaDepois{background:transparent;color:rgba(255,255,255,.7);width:36px}
#pwaInstalar{display:block;width:100%;margin-top:8px;min-height:36px;border:1px solid rgba(255,255,255,.35);
  border-radius:8px;background:transparent;color:#fff;font:inherit;font-size:12px;cursor:pointer}
#pwaInstalar:active{background:rgba(255,255,255,.12)}