/* Casca do sistema: menu lateral, topo e cabeçalho de tela.

   No desktop o menu é uma coluna fixa. Abaixo de 1000px ele vira uma gaveta
   que entra por cima do conteúdo — em vez de empilhar no topo e empurrar a
   tela para baixo, como fazia antes. */

#app{display:none;min-height:100vh;grid-template-columns:268px minmax(0,1fr)}
#app.on{display:grid}

/* ---------- menu lateral ---------- */
.side{
  background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:60;
}
.side-top{padding:1.15rem 1.2rem;border-bottom:1px solid var(--line)}
.side-top .brand-logo{height:22px}

.side-module{padding:1.1rem 1.1rem .5rem}
.side-module label{
  font-size:.62rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mute);
}
.mod-switch{
  display:flex;gap:.25rem;margin-top:.55rem;background:var(--fundo-2);
  padding:.25rem;border-radius:var(--r-sm);border:1px solid var(--line);
}
.mod-switch button{
  flex:1;background:transparent;border:none;color:var(--ink-soft);
  padding:.5rem .3rem;border-radius:6px;font-size:.73rem;font-weight:700;
  transition:background .12s,color .12s;
}
.mod-switch button:not(.active):not(.sem-acesso):hover{background:#fff;color:var(--ink)}
.mod-switch button.active{background:var(--orange);color:#fff}

.side-nav{padding:.7rem .7rem 1rem;flex:1;overflow-y:auto}
.side-nav .navlabel{
  font-size:.62rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mute);padding:.5rem .55rem .4rem;
}
.side-nav button{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  background:transparent;border:none;color:var(--ink-soft);
  padding:.7rem .7rem;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:600;margin-bottom:.12rem;min-height:42px;
  transition:background .12s,color .12s;
}
.side-nav button svg{width:18px;height:18px;stroke:currentColor;fill:none;flex:0 0 18px}
.side-nav button:hover{background:var(--fundo-2);color:var(--ink)}
.side-nav button.active{background:var(--orange);color:#fff}

.side-foot{padding:.9rem 1.1rem;border-top:1px solid var(--line)}
.side-foot button{
  display:flex;align-items:center;gap:.55rem;background:transparent;border:none;
  color:var(--ink-soft);font-size:.84rem;font-weight:600;padding:.45rem 0;
}
.side-foot button:hover{color:var(--orange-deep)}
.side-foot button svg{width:16px;height:16px;stroke:currentColor;fill:none}

/* fundo escurecido da gaveta — só aparece quando ela está aberta */
.side-backdrop{
  display:none;position:fixed;inset:0;z-index:55;
  background:rgba(11,11,12,.45);backdrop-filter:blur(2px);
}

/* botão de abrir a gaveta — escondido no desktop */
.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);
}
.menu-btn svg{width:19px;height:19px;stroke:currentColor;fill:none}
.menu-btn:hover{background:var(--fundo-2)}

/* ---------- área principal ---------- */
.main{min-width:0;display:flex;flex-direction:column;background:var(--fundo)}
.topbar{
  display:flex;align-items:center;gap:.8rem;
  padding:.8rem clamp(1rem,3vw,2rem);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:30;min-height:60px;
}
.crumb{
  display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--ink-mute);
  min-width:0;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sep{opacity:.45}
.top-actions{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;background:var(--fundo-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.4rem .85rem;
  font-size:.76rem;font-weight:600;color:var(--ink-soft);white-space:nowrap;
}
.chip .live{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 7px}

.view{padding:clamp(1.2rem,3vw,2.2rem);max-width:1240px;width:100%}
.view-head{
  margin-bottom:1.6rem;display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.view-head h2{font-size:clamp(1.25rem,2.1vw,1.7rem);font-weight:700;letter-spacing:-.022em}
.view-head p{color:var(--ink-soft);font-size:.9rem;margin-top:.3rem;max-width:72ch}