/* VoltZap — estrutura global: menu lateral, conteúdo, cabeçalho de página. */
#app { grid-template-columns: var(--lateral) 1fr; transition: grid-template-columns .22s var(--ease); background: var(--bg); }
#app.recolhida { grid-template-columns: var(--lateral-min) 1fr; }

#lateral { background: var(--side); color: var(--side-ink); border-right: 1px solid var(--side-line); padding: 14px 12px 12px; gap: 0; overflow: hidden auto; display: flex; flex-direction: column; min-width: 0; }
#lateral::-webkit-scrollbar { width: 0; }
.lat-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 12px 6px; }
.lat-marca { display: flex; align-items: center; gap: 10px; color: var(--side-ink); text-decoration: none; font: 800 19px var(--titulo); letter-spacing: -.03em; min-width: 0; }
.lat-nome { white-space: nowrap; overflow: hidden; }
.lat-btn { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--side-line); background: transparent; color: var(--side-muted); cursor: pointer; transition: all var(--rapido); }
.lat-btn:hover { background: var(--side-hover); color: var(--side-ink); } .lat-btn svg { transition: transform .22s var(--ease); }
#app.recolhida .lat-btn svg { transform: rotate(180deg); }

.lat-emp { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0 0 8px; background: var(--side-hover); border: 1px solid var(--side-line); border-radius: var(--r-lg); min-width: 0; }
.lat-av { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.lat-emp-txt { display: grid; min-width: 0; line-height: 1.25; } .lat-emp-txt b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lat-emp-txt small { display: flex; align-items: center; gap: 6px; color: var(--side-muted); font-size: 11.5px; white-space: nowrap; }
.pt { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: inline-block; flex: none; } .pt.on { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); } .pt.off { background: var(--red); }

.lat-nav { display: grid; gap: 2px; align-content: start; flex: 1; padding-top: 4px; }
#lateral .grupo { padding: 16px 12px 6px; font-size: 10.5px; letter-spacing: .1em; color: var(--side-muted); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
#lateral a { position: relative; display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: var(--r-md); color: var(--side-muted); text-decoration: none; font-weight: 550; font-size: 14px; opacity: 1; transition: background var(--rapido), color var(--rapido), transform var(--rapido); white-space: nowrap; }
#lateral a .ic { transition: transform var(--rapido) var(--ease); }
#lateral a:hover { background: var(--side-hover); color: var(--side-ink); } #lateral a:hover .ic { transform: translateX(1px) scale(1.04); }
#lateral a.ativo { background: var(--accent-soft); color: #fff; box-shadow: inset 0 0 0 1px var(--accent-line); font-weight: 650; }
#lateral a.ativo::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
#lateral a.ativo .ic { color: var(--accent); }
#lateral a .num { margin-left: auto; min-width: 20px; text-align: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; border-radius: var(--r-pill); padding: 1px 7px; }
#lateral a .breve { margin-left: auto; font-size: 10px; color: var(--side-muted); border: 1px solid var(--side-line); border-radius: var(--r-pill); padding: 0 7px; }

.lat-rodape { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--side-line); display: grid; gap: 8px; }
.lat-conta { display: flex; align-items: center; gap: 10px; padding: 6px; min-width: 0; }
.lat-conta .lat-av { width: 30px; height: 30px; border-radius: 50%; background: var(--card-3); color: var(--side-ink); font-size: 12px; }
.lat-conta span:last-child { display: grid; min-width: 0; line-height: 1.25; } .lat-conta b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lat-conta small { color: var(--side-muted); font-size: 11px; }
.lat-acoes { display: flex; gap: 6px; }
.lat-acoes button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--side-hover); border: 1px solid var(--side-line); color: var(--side-ink); border-radius: var(--r-md); padding: 7px; cursor: pointer; font-weight: 600; font-size: 12.5px; transition: background var(--rapido); }
.lat-acoes button:hover { background: rgba(255, 255, 255, .12); }

/* menu recolhido */
#app.recolhida .lat-nome, #app.recolhida .lat-emp-txt, #app.recolhida .grupo, #app.recolhida #lateral a > span:not(.num), #app.recolhida .lat-conta span:last-child, #app.recolhida .lat-acoes button span { display: none; }
#app.recolhida .lat-topo { flex-direction: column; padding: 2px 0 12px; } #app.recolhida .lat-btn { order: 2; }
#app.recolhida .lat-emp { justify-content: center; padding: 8px 4px; } #app.recolhida #lateral a { justify-content: center; padding: 10px 0; } #app.recolhida #lateral a.ativo::before { left: -12px; }
#app.recolhida #lateral a .num { position: absolute; top: 3px; right: 6px; min-width: 16px; font-size: 10px; padding: 0 4px; }
#app.recolhida .lat-conta { justify-content: center; padding: 6px 0; } #app.recolhida .lat-acoes { flex-direction: column; }
#app.recolhida #lateral a:hover::after { content: attr(data-nome); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: #05080d; color: #f5f7fa; border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-sm); z-index: 130; box-shadow: var(--sombra); }
#app.recolhida #lateral { overflow: visible; }

/* conteúdo */
#conteudo { background: var(--bg); } #pagina { padding: 30px 36px 80px; max-width: 1500px; } #pagina.cheia { max-width: none; }
.cabeca { margin-bottom: 22px; } .cabeca h2 { font-size: var(--t-2xl); font-weight: 750; letter-spacing: -.03em; }
.cabeca .sub, .sub-pagina { color: var(--muted); font-size: var(--t-sm); margin: 4px 0 0; flex-basis: 100%; }
.grade { gap: 14px; }

@media (max-width: 860px) {
  #app, #app.recolhida { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #lateral { flex-direction: row; align-items: center; gap: 4px; padding: 8px 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--side-line); }
  .lat-topo { padding: 0 8px 0 2px; } .lat-btn, .lat-emp, #lateral .grupo, .lat-rodape .lat-conta, .lat-nome { display: none; }
  .lat-nav { display: flex; padding: 0; gap: 2px; align-content: center; } #lateral a { padding: 8px 12px; flex: none; } #lateral a.ativo::before { display: none; }
  .lat-rodape { margin: 0 0 0 auto; padding: 0 0 0 8px; border: 0; display: flex; } .lat-acoes { flex-direction: row; } .lat-acoes button span { display: none; }
  #pagina { padding: 18px 16px 70px; }
}

@media (max-width: 860px) {
  #lateral { scrollbar-width: none; } #lateral::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) {
  #lateral a:not(.ativo) > span:not(.num) { display: none; } #lateral a:not(.ativo) { padding: 9px 11px; }
  #lateral a .num { position: absolute; top: 2px; right: 2px; min-width: 16px; font-size: 10px; padding: 0 4px; }
}

/* menu: nada cortado e rodapé sempre visível */
#lateral { padding-bottom: 0; }
.lat-nav { flex: 1 0 auto; gap: 1px; }
#lateral a > span:not(.num):not(.breve) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#lateral a .num, #lateral a .breve { flex: none; margin-left: auto; }
.lat-rodape { position: sticky; bottom: 0; z-index: 2; background: var(--side); margin-top: 8px; padding: 10px 0 12px; }
@media (min-width: 861px) and (max-height: 960px) {
  #lateral { padding-top: 10px; } .lat-topo { padding-bottom: 8px; } .lat-emp { margin-bottom: 4px; padding: 7px 10px; }
  #lateral .grupo { padding: 10px 12px 4px; } #lateral a { padding: 7px 12px; font-size: 13.5px; }
  .lat-rodape { gap: 6px; padding: 8px 0 10px; } .lat-conta { padding: 2px 6px; } .lat-acoes button { padding: 6px; }
}
@media (min-width: 861px) { #app { grid-template-rows: minmax(0, 1fr); } #lateral { min-height: 0; height: 100vh; } }
@media (min-width: 861px) {
  #lateral { overflow: hidden; }
  .lat-nav { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-right: -6px; padding-right: 6px; scrollbar-width: thin; }
  .lat-nav::-webkit-scrollbar { width: 4px; display: block; } .lat-nav::-webkit-scrollbar-thumb { background: var(--side-line); border-radius: 4px; }
  .lat-rodape { flex: none; position: static; }
  #app.recolhida #lateral { overflow: visible; } #app.recolhida .lat-nav { overflow: visible; }
}