/* hub/public/console.css
 *
 * A CASCA das páginas de operação: o menu lateral comum ao painel, ao
 * monitor, à administração, às métricas e às gravações (o desenho aprovado em
 * 04/11/2026, docs/design/painel-2). Vem DEPOIS de tema.css e só usa as
 * variáveis dele: as cores continuam nascendo em hub/paletas.js, e esta folha
 * não escreve cor nenhuma.
 *
 * A estrutura de uma página:
 *   <div class="casca">
 *     <aside class="lateral" id="menu"></aside>   (console-menu.js desenha)
 *     <main class="conteudo"> … </main>
 *   </div>
 * No celular o menu vira uma barra no topo, com um botão que o abre.
 */

.casca { display: flex; flex-wrap: wrap; min-height: 100vh; }
.conteudo { flex: 999 1 560px; min-width: 0; }

/* ---- o menu ------------------------------------------------------------- */
.lateral {
  flex: 1 1 236px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 14px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.marca { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; color: var(--fg); text-decoration: none; min-width: 0; }
.marca:hover { text-decoration: none; }
.marca-nome { font-family: var(--font-title); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; line-height: 1.15; }
.marca-evento { font-size: 12.5px; color: var(--muted); font-weight: 500; overflow-wrap: anywhere; }
button.lateral-abrir { display: none; }
.lateral-corpo { display: flex; flex-direction: column; gap: 18px; flex: 1; }

.menu, .menu-ferramentas { display: flex; flex-direction: column; gap: 2px; }
.menu-item, button.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-soft);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}
.menu-item:hover, button.menu-item:hover { background: var(--surface-hi); color: var(--fg); text-decoration: none; }
.menu-item[aria-current="page"] { background: var(--tab-active); color: var(--fg); }
.menu-item svg { flex: none; }
.menu-item .contador { margin-left: auto; }
.menu-grupo { margin: 12px 12px 2px; }
.menu-ferramentas { padding-top: 12px; border-top: 1px solid var(--line); }

.usuario {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 6px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
/* O nome e o papel ficam inteiros: com o menu estreito, o tema e o "sair"
   descem para a linha de baixo em vez de espremer "administrador". */
.usuario .quem { flex: 1 1 110px; min-width: 0; line-height: 1.3; overflow-wrap: break-word; }
.usuario .quem .sub { display: block; }
.avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tab-active);
  color: var(--fg);
  font-weight: 700;
  font-size: 13px;
}

/* O cabeçalho do conteúdo: o título da área, o que ela diz de si e as ações. */
.cabeca-area { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.cabeca-area .sub { margin-top: 6px; }
.subabas { display: flex; flex-wrap: wrap; gap: 4px; }

/* Na tela larga o menu fica parado enquanto a página rola: numa sala com
   dezesseis idiomas, "sair", o tema e o modo TV não podem ficar lá embaixo. */
@media (min-width: 821px) {
  .lateral { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
}

/* ---- no celular: o menu vira uma barra no topo -------------------------- */
@media (max-width: 820px) {
  .lateral { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; gap: 12px; }
  .marca { padding: 0 4px; }
  .marca-nome { font-size: 19px; }
  button.lateral-abrir { display: grid; }
  .lateral-corpo { display: none; }
  .lateral.aberta .lateral-corpo { display: flex; }
}

/* A parede (o monitor numa TV) não tem menu. */
.casca.parede > .lateral { display: none; }