/* =============================================================================
   DESIGN SYSTEM DO HUB — tokens do tema claro + peças de interface
   =============================================================================

   Por que existe
   --------------
   Cada tela foi escrita direto em utilitárias, decidindo cor e raio na hora: em
   17/09/2026 havia 233 cores hex escritas à mão nos HTML, cartão com três raios
   diferentes (rounded-xl 237×, 2xl 22×, lg 12×) e dois botões primários
   concorrentes (bg-blue-600 e bg-blue-900). Sem vocabulário comum, toda tela nova
   inventava o seu.

   Como usar
   ---------
   Monte a tela com as peças (.hub-card, .hub-btn, .hub-tabela, .hub-selo...) e,
   quando precisar de cor solta, use os tokens — nunca hex no HTML. As peças
   convivem com o Tailwind: dá para migrar uma tela por vez.

   O tema escuro mora em tema.css e redefine os mesmos --t-*; aqui ficam os
   valores do tema claro, que antes só existiam espalhados pelas utilitárias.
   Veja tudo funcionando em /design.html.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- superfícies ---- */
  --t-bg: #f1f3f7;
  --t-surface: #ffffff;
  --t-surface-2: #f7f9fc;
  --t-surface-3: #eef2f8;
  --t-input: #ffffff;
  --t-overlay: rgba(15, 23, 42, 0.5);

  /* ---- texto (contraste sobre --t-surface) ---- */
  --t-txt: #111827;      /* 16.1:1 */
  --t-txt-2: #4b5563;    /*  8.6:1 */
  --t-txt-3: #6b7280;    /*  5.7:1 */
  --t-txt-4: #9199a5;    /*  4.5:1 — placeholder e desabilitado */

  /* ---- linhas ---- */
  --t-line: #e5e7eb;
  --t-line-2: #dbe2ee;
  --t-line-forte: #b9c3d4;

  /* ---- barra de navegação (a mesma cor da lateral de módulos) ---- */
  --t-nav: #0d1930;
  --t-nav-txt: #dbe5f6;
  --t-nav-txt-2: #7f91b0;

  /* ---- marca ---- */
  --t-accent: #1d4ed8;
  --t-accent-2: #2563eb;
  --t-accent-solido: #1d4ed8;
  --t-accent-bg: #eff6ff;
  --t-foco: #2563eb;

  /* ---- semânticas: texto / claro / fundo tonal / borda / sólido ---- */
  --t-ok: #15803d;        --t-ok-2: #16a34a;      --t-ok-bg: #dcfce7;      --t-ok-linha: #86efac;    --t-ok-solido: #16a34a;
  --t-aviso: #a16207;     --t-aviso-2: #ca8a04;   --t-aviso-bg: #fef9c3;   --t-aviso-linha: #fde047; --t-aviso-solido: #ca8a04;
  --t-erro: #b91c1c;      --t-erro-2: #dc2626;    --t-erro-bg: #fee2e2;    --t-erro-linha: #fca5a5;  --t-erro-solido: #dc2626;
  --t-info: #1d4ed8;      --t-info-2: #2563eb;    --t-info-bg: #eff6ff;    --t-info-linha: #bfdbfe;  --t-info-solido: #1d4ed8;
  --t-roxo: #7e22ce;      --t-roxo-2: #9333ea;    --t-roxo-bg: #f3e8ff;    --t-roxo-linha: #d8b4fe;  --t-roxo-solido: #7e22ce;
  --t-teal: #0f766e;      --t-teal-2: #0d9488;    --t-teal-bg: #ccfbf1;    --t-teal-linha: #5eead4;  --t-teal-solido: #0f766e;
  --t-laranja: #c2410c;   --t-laranja-2: #ea580c; --t-laranja-bg: #ffedd5; --t-laranja-linha: #fdba74; --t-laranja-solido: #c2410c;
  --t-rosa: #be185d;      --t-rosa-2: #db2777;    --t-rosa-bg: #fce7f3;    --t-rosa-linha: #f9a8d4;  --t-rosa-solido: #be185d;

  /* ---- forma e profundidade: um valor por papel, não um por tela ---- */
  --hub-raio-sm: 8px;
  --hub-raio: 12px;      /* cartão, painel, modal */
  --hub-raio-lg: 16px;
  --hub-sombra: 0 1px 2px rgba(16, 27, 46, .06), 0 8px 24px rgba(16, 27, 46, .06);
  --hub-sombra-alta: 0 12px 40px rgba(16, 27, 46, .18);
}
html.tema-escuro {
  --t-nav: #0b1527;
  --hub-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
  --hub-sombra-alta: 0 16px 48px rgba(0, 0, 0, .55);
}

/* ── Fundo da tela ──────────────────────────────────────────────────────────
   Os módulos usavam bg-gray-100 (#f3f4f6) e a tela inicial o token (#f1f3f7):
   meio tom de diferença, visível ao trocar de tela. Agora as duas saem daqui. */
.hub-tela { background: var(--t-bg); }
/* Trilho de ícones dos módulos (js/sidebar.js, modo trilho). O espaço e a cor
   dele saem daqui, e não do JS, para a tela já nascer com a faixa no lugar —
   o script só roda depois e, sem isso, o conteúdo pularia 56px para o lado.
   Só em tela com sidebar.js (login e tutorial também usam hub-tela) e só onde
   há mouse: no celular a navegação continua pelo menu de cima. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  html:has(script[src$="/sidebar.js"]) :is(body.hub-tela, body.hub-trilho) { padding-left: 56px; }
  html:has(script[src$="/sidebar.js"]) :is(body.hub-tela, body.hub-trilho)::before {
    content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: 56px;
    background: var(--t-nav); z-index: 40;
  }
}
/* Perfil, Modo e Sair ficam no pé da barra lateral (trilho no computador,
   gaveta do ☰ no celular) — na barra de cima seriam repetidos. */
html:has(script[src$="/sidebar.js"]) body.hub-tela :is(#nav-aparencia-wrap, .nav-sair, .nav-nome-usuario) { display: none; }

/* ── Cartão ─────────────────────────────────────────────────────────────────
   A superfície de tudo: painel, caixa de estatística, modal. Um raio só. */
.hub-card {
  background: var(--t-surface);
  border: 1px solid var(--t-line-2);
  border-radius: var(--hub-raio);
  box-shadow: var(--hub-sombra);
}
.hub-card-pad { padding: 16px 18px; }
/* Faixa colorida no topo — usada para dar assunto ao cartão de número. */
.hub-card-topo-accent { border-top: 3px solid var(--t-accent); }
.hub-card-topo-ok     { border-top: 3px solid var(--t-ok-solido); }
.hub-card-topo-erro   { border-top: 3px solid var(--t-erro-solido); }
.hub-card-topo-roxo   { border-top: 3px solid var(--t-roxo-solido); }
.hub-card-topo-aviso  { border-top: 3px solid var(--t-aviso-solido); }
.hub-card-topo-laranja{ border-top: 3px solid var(--t-laranja-solido); }
.hub-card-topo-neutro { border-top: 3px solid var(--t-line-forte); }
/* Faixa na lateral: usada quando o cartão está numa lista e a cor diz o estado
   da linha, não o assunto do cartão. */
.hub-card-lado-ok     { border-left: 3px solid var(--t-ok-solido); }
.hub-card-lado-roxo   { border-left: 3px solid var(--t-roxo-solido); }
.hub-card-lado-neutro { border-left: 3px solid var(--t-line-forte); }

/* ── Barra de navegação do topo ─────────────────────────────────────────────
   Mesma cor da lateral de módulos: a tela não muda de identidade quando o
   usuário sai da inicial. */
.hub-nav { background: var(--t-nav); color: var(--t-nav-txt); }
.hub-nav a, .hub-nav button { color: inherit; }
/* Dentro da barra moram painéis de fundo claro (aparência, resultados da busca).
   Sem isto eles herdavam a cor do texto da barra — quase branco sobre branco. */
.hub-nav .bg-white, .hub-nav .hub-card { color: var(--t-txt); }
.hub-nav .bg-white a, .hub-nav .bg-white button,
.hub-nav .hub-card a, .hub-nav .hub-card button { color: inherit; }
.hub-nav .hub-nav-sep { color: var(--t-nav-txt-2); }

/* Tela de entrada: mesmo azul da barra e da lateral, com um degradê leve. */
.hub-tela-entrada {
  background: linear-gradient(140deg, var(--t-nav), #1b2c4d);
  color: var(--t-nav-txt);
}
.hub-tela-entrada .hub-apoio { color: var(--t-nav-txt-2); }

/* ── Título de seção ───────────────────────────────────────────────────────── */
.hub-rotulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--t-txt-3);
}

/* ── Números em destaque ───────────────────────────────────────────────────── */
.hub-valor {
  font-family: "Sora", "IBM Plex Sans", system-ui, sans-serif;
  /* Encolhe junto com a tela: em 24px fixos "R$ 4.140.000,00" não cabia na
     largura do celular e quebrava, deixando ",00" sozinho na linha de baixo. */
  font-size: clamp(15px, 3.9vw, 24px);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--t-txt);
}
.hub-valor-accent { color: var(--t-accent); }
.hub-valor-ok     { color: var(--t-ok); }
.hub-valor-erro   { color: var(--t-erro); }
.hub-valor-roxo   { color: var(--t-roxo); }
.hub-valor-aviso  { color: var(--t-aviso); }
.hub-valor-laranja{ color: var(--t-laranja); }
.hub-valor-neutro { color: var(--t-txt); }
/* Cartão que é só o número (carteira, situações): o valor é o conteúdo. */
.hub-valor-g { font-size: clamp(22px, 5.6vw, 30px); }

/* ── Botões ─────────────────────────────────────────────────────────────────
   Um primário só. Antes conviviam bg-blue-600 e bg-blue-900 como "o" botão. */
.hub-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--t-line-forte);
  border-radius: var(--hub-raio-sm);
  background: var(--t-surface);
  color: var(--t-txt-2);
  font: 600 12.5px/1.2 "IBM Plex Sans", system-ui, sans-serif;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.hub-btn:hover { background: var(--t-surface-2); color: var(--t-txt); }
/* .hub-btn declara display, e mora depois do Tailwind no <head>: sem isto, o
   inline-flex vence o .hidden das utilitárias e o botão escondido aparece. */
.hub-btn.hidden, .hub-btn[hidden] { display: none; }
.hub-btn:focus-visible { outline: 2px solid var(--t-foco); outline-offset: 2px; }
.hub-btn[disabled], .hub-btn.desabilitado { opacity: .55; cursor: not-allowed; }

.hub-btn-primario {
  background: var(--t-accent-solido);
  border-color: var(--t-accent-solido);
  color: #fff;
}
.hub-btn-primario:hover { background: var(--t-accent-2); border-color: var(--t-accent-2); color: #fff; }

.hub-btn-ok { background: var(--t-ok-solido); border-color: var(--t-ok-solido); color: #fff; }
.hub-btn-ok:hover { filter: brightness(1.08); color: #fff; }

.hub-btn-perigo { background: var(--t-erro-bg); border-color: var(--t-erro-linha); color: var(--t-erro); }
.hub-btn-perigo:hover { background: var(--t-erro-solido); border-color: var(--t-erro-solido); color: #fff; }

.hub-btn-sm { padding: 5px 10px; font-size: 11.5px; }
.hub-btn svg { width: 15px; height: 15px; flex: none; }

/* ── Barra de filtros ───────────────────────────────────────────────────────
   Divide o que filtra a lista do que age sobre ela. */
.hub-toolbar-divisor { width: 1px; height: 20px; background: var(--t-line-2); margin: 0 2px; }
.hub-toolbar-contagem { font-size: 12px; color: var(--t-txt-3); white-space: nowrap; }

/* ── Selo (estado em uma palavra) ──────────────────────────────────────────── */
.hub-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.hub-selo-ok      { background: var(--t-ok-bg);      color: var(--t-ok); }
.hub-selo-erro    { background: var(--t-erro-bg);    color: var(--t-erro); }
.hub-selo-aviso   { background: var(--t-aviso-bg);   color: var(--t-aviso); }
.hub-selo-info    { background: var(--t-info-bg);    color: var(--t-info); }
.hub-selo-roxo    { background: var(--t-roxo-bg);    color: var(--t-roxo); }
.hub-selo-neutro  { background: var(--t-surface-3);  color: var(--t-txt-2); }

/* ── Campo de formulário ───────────────────────────────────────────────────── */
.hub-campo {
  width: 100%;
  background: var(--t-input);
  border: 1px solid var(--t-line-2);
  border-radius: var(--hub-raio-sm);
  color: var(--t-txt);
  font: 400 13px/1.4 "IBM Plex Sans", system-ui, sans-serif;
  padding: 8px 11px;
}
/* Campo dentro de barra de filtros: largura pelo conteúdo, não 100%. */
.hub-campo-inline { width: auto; }
.hub-campo::placeholder { color: var(--t-txt-4); }
.hub-campo:focus { outline: none; border-color: var(--t-foco); box-shadow: 0 0 0 3px var(--t-accent-bg); }
.hub-label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--t-txt-2);
  margin-bottom: 4px;
}

/* ── Tabela ─────────────────────────────────────────────────────────────────
   Cabeçalho discreto, linha divisória fina, número em largura fixa para as
   casas alinharem na vertical. */
.hub-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.hub-tabela thead th {
  text-align: left;
  background: var(--t-surface-2);
  color: var(--t-txt-2);
  font-size: 11.5px;
  font-weight: 600;
  padding: 9px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--t-line-2);
}
.hub-tabela tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--t-line);
  color: var(--t-txt);
}
.hub-tabela tbody tr:last-child td { border-bottom: 0; }
.hub-tabela tbody tr:hover td { background: var(--t-surface-2); }
/* A tela pode alinhar uma coluna à direita ou ao centro pela utilitária; sem
   isto o text-align da peça venceria, porque hub.css entra depois. */
.hub-tabela .text-right  { text-align: right; }
.hub-tabela .text-center { text-align: center; }

/* Alinhamento vem do tabular-nums, que a IBM Plex Sans tem: a monoespaçada
   alinhava igual, mas com altura de x menor — do lado do nome do cliente os
   valores pareciam menores e de outra tela. */
.hub-tabela .num, .hub-tabela th.num {
  font-variant-numeric: tabular-nums;
}
.hub-tabela tfoot td {
  padding: 11px 14px;
  font-weight: 600;
  background: var(--t-surface-2);
  border-top: 1px solid var(--t-line-2);
}
/* Tabela larga rola sozinha; a página nunca rola de lado. */
.hub-tabela-rolagem { overflow-x: auto; }

/* ── Classes antigas apontando para as peças ────────────────────────────────
   .btn-primary, .input e companhia estão espalhadas por telas que ainda não
   foram migradas. Em vez de reescrever cada uma, elas passam a desenhar com os
   tokens: a tela antiga já sai com a cor e o raio certos, e migrar o HTML
   depois não muda nada visualmente. Largura fica de fora de propósito — há
   campo com w-24, w-40, w-full ao lado. */
.btn-primary, .btn-success, .btn-danger, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--hub-raio-sm);
  font: 600 12.5px/1.2 "IBM Plex Sans", system-ui, sans-serif;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.btn-primary   { background: var(--t-accent-solido); border-color: var(--t-accent-solido); color: #fff; }
.btn-primary:hover { background: var(--t-accent-2); border-color: var(--t-accent-2); }
.btn-success   { background: var(--t-ok-solido);  border-color: var(--t-ok-solido);  color: #fff; }
.btn-danger    { background: var(--t-erro-solido); border-color: var(--t-erro-solido); color: #fff; }
.btn-success:hover, .btn-danger:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--t-surface); border-color: var(--t-line-forte); color: var(--t-txt-2); }
.btn-secondary:hover { background: var(--t-surface-2); color: var(--t-txt); }
.btn-primary[disabled], .btn-success[disabled], .btn-danger[disabled], .btn-secondary[disabled] {
  opacity: .55; cursor: not-allowed;
}
.btn-sm { padding: 5px 10px; font-size: 11.5px; border-radius: var(--hub-raio-sm); }

.input {
  background: var(--t-input);
  border: 1px solid var(--t-line-2);
  border-radius: var(--hub-raio-sm);
  color: var(--t-txt);
  font: 400 13px/1.4 "IBM Plex Sans", system-ui, sans-serif;
  padding: 8px 11px;
}
.input::placeholder { color: var(--t-txt-4); }
.input:focus { outline: none; border-color: var(--t-foco); box-shadow: 0 0 0 3px var(--t-accent-bg); }

/* ── Estado vazio ──────────────────────────────────────────────────────────── */
.hub-vazio {
  padding: 26px 16px;
  text-align: center;
  color: var(--t-txt-3);
  font-size: 12.5px;
}

/* =============================================================================
   BARRA LATERAL DE ATALHOS (js/sidebar.js) — trilho, gaveta do celular, rodapé
   =============================================================================
   Morava num sidebar.css que o script injetava depois de carregar: até o arquivo
   chegar, a faixa ficava ~120 ms só com a cor, sem os ícones — no CRM, que demora
   mais a desenhar, parecia a barra bugando ao abrir. Aqui ela chega junto com o
   resto do padrão, no <head> de toda tela que tem a barra. */

/* IBM Plex Sans da barra lateral. O CRM não carrega o style.css (onde moram as
   @font-face do resto do Hub) e a barra saía na fonte do sistema lá — outra
   letra só naquela tela. Mesmo arquivo e mesma URL: nos módulos vem do cache. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-600.woff2) format("woff2"); }
#hub-sidebar, .hub-menu-botao { font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ── Barra lateral de atalhos ────────────────────────────────────────────────
   Escondida fora da tela; abre quando o cursor encosta na borda esquerda (ver
   montarBarraModulos, em js/app.js). Não ocupa espaço fixo de propósito: as
   telas do Hub são tabelas largas, e uma coluna presa à esquerda comeria
   largura útil o tempo todo para um uso eventual.
   A faixa sensível só existe onde há cursor — em tela de toque ela sairia
   disparando sozinha com o dedo perto da borda. */
.hub-sidebar-gatilho-area {
  position: fixed;
  left: 0;
  top: 0;
  width: 12px;
  height: 100vh;
  z-index: 60;
}
#hub-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 230px;
  z-index: 61;
  background: var(--t-nav, #0d1930);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28);
  transform: translateX(-100%);
  transition: transform 0.18s ease;
  padding: 14px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#hub-sidebar.aberta {
  transform: translateX(0);
}
.hub-sidebar-titulo {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 10px 8px;
}
.hub-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.hub-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.hub-sidebar-item.ativo {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.hub-sidebar-ico {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.85;
}
.hub-sidebar-ico svg {
  width: 100%;
  height: 100%;
}
.hub-sidebar-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Início fica no topo, separado dos grupos. */
.hub-sidebar-inicio-topo {
  margin-bottom: 4px;
}
/* Separa o atalho de voltar à tela inicial do resto da lista. */
.hub-sidebar-inicio {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ── Modo trilho (telas de módulo) ───────────────────────────────────────────
   Sempre à vista, só com os ícones; abre por cima da tela com os nomes quando o
   mouse entra. A largura fechada (56px) é a mesma reservada no hub.css. */
#hub-sidebar.trilho {
  visibility: visible !important;   /* nasce escondido no JS até este CSS chegar */
  transform: none;
  width: 56px;
  padding: 14px 8px;
  overflow-x: hidden;
  box-shadow: none;
  z-index: 45;                 /* abaixo dos modais (z-50), que cobrem o trilho */
  transition: width 0.18s ease, box-shadow 0.18s ease;
}
#hub-sidebar.trilho.aberta {
  width: 230px;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28);
  z-index: 61;
}
#hub-sidebar.trilho .hub-sidebar-nome { opacity: 0; transition: opacity 0.12s; }
#hub-sidebar.trilho.aberta .hub-sidebar-nome { opacity: 1; }
/* Fechado, o título do grupo vira uma linha separando os ícones — mas guarda a
   mesma altura: se encolhesse, os ícones pulavam para cima no meio da animação
   de fechar. Só a cor troca, com o mesmo tempo do nome. */
#hub-sidebar.trilho .hub-sidebar-titulo {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.12s;
}
#hub-sidebar.trilho .hub-sidebar-titulo::after {
  content: "";
  position: absolute;
  left: 6px;
  width: 28px;
  top: calc(50% - 4px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transition: opacity 0.12s;
}
#hub-sidebar.trilho:not(.aberta) .hub-sidebar-titulo { color: transparent; }
#hub-sidebar.trilho.aberta .hub-sidebar-titulo::after { opacity: 0; }
/* ── Rodapé: modo claro/escuro e sair ─────────────────────────────────────── */
#hub-sidebar { display: flex; flex-direction: column; }
.hub-rodape-barra {
  margin-top: auto;               /* empurra para o pé da barra */
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#hub-sidebar .hub-rodape-barra button {
  border: 0;
  background: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
#hub-sidebar .hub-botao-sair:hover { color: #fca5a5; }
/* Perfil no pé da barra: iniciais num círculo (é o que sobra com o trilho
   fechado) e nome + cargo ao lado. */
#hub-sidebar .hub-perfil:not(.hub-perfil-link) { cursor: default; }
#hub-sidebar .hub-perfil:not(.hub-perfil-link):hover { background: none; }
#hub-sidebar .hub-avatar {
  width: 24px; height: 24px; margin: 0 -3px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
}
#hub-sidebar .hub-perfil .hub-sidebar-nome { display: flex; overflow: hidden; flex-direction: column; line-height: 1.25; min-width: 0; }
#hub-sidebar .hub-perfil-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hub-sidebar .hub-perfil small { font-size: 11px; color: rgba(255, 255, 255, 0.55); font-weight: 400; }

/* ── Celular: gaveta aberta pelo botão ☰ ──────────────────────────────────────
   Mesma media query do HUB_MOVEL (js/sidebar.js). A barra vira gaveta com os
   nomes sempre à vista, fora da tela até o botão chamar. Vem por último para
   vencer as regras do trilho (mesma especificidade). */
.hub-menu-botao { display: none; }
.hub-menu-fundo { display: none; }
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .hub-sidebar-gatilho-area { display: none; }
  #hub-sidebar.trilho,
  #hub-sidebar.trilho.aberta {
    width: 264px;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: none;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  #hub-sidebar.trilho.aberta { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35); }
  #hub-sidebar.trilho .hub-sidebar-nome { opacity: 1; }
  #hub-sidebar.trilho:not(.aberta) .hub-sidebar-titulo,
  #hub-sidebar.trilho .hub-sidebar-titulo { color: rgba(255, 255, 255, 0.45); }
  #hub-sidebar.trilho .hub-sidebar-titulo::after { opacity: 0; }
  .hub-sidebar-item { padding: 10px; font-size: 14px; }   /* alvo de toque maior */

  .hub-menu-botao {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none; margin-right: 4px;
    border: 0; border-radius: 9px; cursor: pointer;
    background: rgba(255, 255, 255, 0.12); color: #fff;
  }
  .hub-menu-botao svg { width: 20px; height: 20px; }
  .hub-menu-fundo.aberto {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: rgba(8, 12, 24, 0.45);
  }
}
@media print {
  .hub-sidebar-gatilho-area,
  #hub-sidebar { display: none !important; }
}