/* ============================================================
   SHELL — a moldura do sistema: menu lateral no computador,
   barra inferior no celular.

   POR QUE ESTE ARQUIVO EXISTE
   Estas regras viviam em duas cópias: no base.css (usado por cinco páginas) e
   dentro do <style> do financeiro.html, que é autossuficiente. As cópias já
   tinham divergido — barra de 70px contra 64px, ícone com opacidade 1 contra
   .85, item com 7px de padding contra 6px. Menu com duas aparências no mesmo
   sistema é bug, só que silencioso.

   Carregar o base.css inteiro no financeiro resolveria o menu e traria ~200
   regras que ele também define — o risco não está no menu, está no resto.
   Então o shell virou arquivo próprio, do mesmo jeito que o nav.js.

   Carregar ANTES do base.css e antes do <style> da página, para que uma regra
   específica de página ainda possa vencer.
   ============================================================ */
.shell{position:fixed;z-index:60;background:var(--surface);
  display:flex;transition:background .2s}
/* --- computador: coluna à esquerda --- */
.shell{top:0;left:0;bottom:0;width:var(--nav-w,240px);flex-direction:column;
  border-right:1px solid var(--line);padding:16px 12px}
.shell .marca{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;margin-bottom:6px}
.shell .marca .logo{width:34px;height:34px;border-radius:10px;background:var(--verde);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:var(--sh)}
.shell .marca .tt{font-weight:700;font-size:var(--t3);letter-spacing:-.02em;line-height:1}
.shell .marca .tt small{display:block;font-size:var(--t0);font-weight:500;color:var(--mut);letter-spacing:0;margin-top:2px}
.shell .links{display:flex;flex-direction:column;gap:3px;flex:1}
.shell a.ln{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
  color:var(--txt2);font-weight:600;font-size:var(--t2);cursor:pointer;line-height:1;position:relative;
  text-decoration:none}
/* alguns navegadores e o alto contraste do Windows forçam sublinhado em link */
.shell a.ln,.shell a.ln:hover,.shell a.ln:focus,.shell a.ln:visited{text-decoration:none}
@media(forced-colors:active){ .shell a.ln{text-decoration:none} }
.shell a.ln svg{width:20px;height:20px;opacity:.85}
.shell a.ln:hover{background:var(--surface2);color:var(--txt)}
.shell a.ln.on{background:var(--verde-cl);color:var(--verde)}
html[data-tema="escuro"] .shell a.ln.on{color:var(--pos)}
.shell a.ln .lbl{flex:1}
/* no menu lateral cabe o nome inteiro, então o rótulo curto fica escondido */
.shell a.ln .lbl-c{display:none}
.shell .fim{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.shell .fim button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  background:none;border:0;color:var(--mut);font-weight:600;font-size:var(--t1);cursor:pointer;
  font-family:inherit;text-align:left;width:100%}
.shell .fim button svg{width:19px;height:19px}
.shell .fim button:hover{background:var(--surface2);color:var(--txt)}

/* deslocamento do conteúdo para não ficar embaixo do menu */
body{padding-left:var(--nav-w,240px)}

/* --- celular: barra inferior --- */
@media(max-width:860px){
  /* 66px de reserva: a barra mede ~61px com seis itens, e essa folga cobre a
     diferença de fonte entre aparelhos. Antes eram 64 aqui e 70 no financeiro. */
  body{padding-left:0;padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .shell{top:auto;left:0;right:0;bottom:0;width:auto;height:auto;flex-direction:row;
    border-right:0;border-top:1px solid var(--line);padding:6px 4px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));box-shadow:0 -1px 10px rgba(0,0,0,.05)}
  .shell .marca,.shell .fim{display:none}
  .shell .links{flex-direction:row;flex:1;gap:0}
  .shell a.ln{flex-direction:column;gap:4px;padding:6px 1px;border-radius:9px;font-size:10px;
    font-weight:600;flex:1;min-width:0;justify-content:center;text-align:center}
  /* opacidade cheia no celular: na barra inferior o ícone é o principal jeito
     de identificar a aba, e a 85% ele some no tema escuro */
  .shell a.ln svg{width:22px;height:22px;opacity:1}
  /* com seis itens a fatia cai para ~61px: quem tem nome comprido usa o curto,
     e o resto é cortado com reticência em vez de empurrar a barra */
  .shell a.ln .lbl,.shell a.ln .lbl-c{flex:0 0 auto;max-width:100%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .shell a.ln.temc .lbl{display:none}
  .shell a.ln.temc .lbl-c{display:block}
  .shell a.ln.on{background:transparent;color:var(--verde)}
  .shell a.ln:hover{background:transparent}
}