/* ===========================================================================
   hub.css — o visual SÓ da porta de entrada (hub.grupomultvision.com).
   ---------------------------------------------------------------------------
   Repaginação aprovada pelo Sidney em 26/out/2026: fundo com dois brilhos
   lilás, barra com ícones no lugar das siglas, saudação grande e cartões de
   sistema na horizontal, com a seta que desliza.

   POR QUE UM ARQUIVO À PARTE, E NÃO O hub-ui.css: a biblioteca é copiada
   pelos outros seis sistemas. O que mudasse lá mudaria o Pipeline, o
   Propostas, o Contratos, a OS, o Estoque e a Cobrança junto. Aqui só entram
   regras que valem para esta página -- a barra dos outros sistemas é a do
   hub-shell.js e continua como era.
   As cores, fontes e sombras são os tokens da biblioteca; só a sombra do
   cartão em foco é nova, e mora aqui.
   =========================================================================== */
:root{ --sombra-hover:0 14px 34px rgba(115,42,123,.16); --vidro:rgba(255,255,255,.82); }

/* ------------------------------------------------------------------ o fundo
   Dois brilhos do roxo-tênue nos cantos, no lugar do bege chapado. Fixos: a
   página rola por cima deles. */
body{ position:relative; min-height:100vh; overflow-x:hidden; }
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 420px at 88% -8%, var(--roxo-tenue), transparent 70%),
    radial-gradient(700px 360px at -5% 4%, var(--roxo-tenue), transparent 65%); }

/* ------------------------------------------------------------------ a barra
   Vidro fosco sobre o fundo, e o conteúdo no mesmo trilho de 1120px da página. */
.hub-topo{ background:var(--vidro); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  height:auto; min-height:60px; gap:16px;
  padding:13px max(20px, calc((100% - 1120px) / 2 + 20px)); }
.hub-menu{ gap:6px; }
.hub-menu a{ gap:7px; padding:8px 14px; border-radius:var(--raio-pill); font-size:13.5px; }
.hub-menu a .ni{ width:17px; height:17px; flex:none; }
.hub-eu{ gap:10px; font-size:13.5px; }
.hub-avatar{ width:34px; height:34px; font:700 12.5px Sora,Inter,sans-serif; }
#bSair{ color:var(--roxo-claro); font-size:13.5px; font-weight:500; }

/* ----------------------------------------------------------------- a página */
.pagina{ max-width:1120px; padding:40px 20px 64px; }
.hub-rodape{ max-width:1120px; margin:0 auto; padding:4px 20px 40px; color:var(--texto-3); font-size:12px; }

.hero{ margin-bottom:28px; }
.hero h1{ font:700 clamp(28px,5vw,36px)/1.55 Sora,Inter,sans-serif; letter-spacing:-.015em; }
.hero p{ margin:7px 0 0; color:var(--texto-2); font-size:16px; }
.hero .conta{ color:var(--roxo); font-weight:600; }

/* --------------------------------------------------------- os cartões
   Horizontais: símbolo à esquerda, nome e descrição à direita, a seta no
   canto. O cartão inteiro é o link -- alvo grande, bom no celular. */
.sistemas{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); }
.sys{ position:relative; display:flex; align-items:flex-start; gap:14px; padding:17px 16px;
  background:var(--papel); border:1px solid var(--borda); border-radius:16px;
  box-shadow:var(--sombra-cx); text-decoration:none; color:inherit;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
a.sys:hover{ transform:translateY(-3px); box-shadow:var(--sombra-hover); border-color:transparent; }
a.sys:focus-visible{ outline:2px solid var(--roxo-claro); outline-offset:2px; }
.sys .ico{ width:50px; height:50px; border-radius:14px; flex:none; display:block; }
/* sem desenho para o sistema, volta a sigla -- no mesmo quadrado */
.sys .sigla{ display:grid; place-items:center; background:var(--roxo-tenue); color:var(--roxo);
  font:700 17px Sora,Inter,sans-serif; }
.sys .txt{ min-width:0; padding-right:14px; }
.sys .nm{ font:600 16.5px/1.2 Sora,Inter,sans-serif; letter-spacing:-.015em; margin-bottom:3px; }
.sys .ds{ color:var(--texto-3); font-size:12.8px; line-height:1.4; }
.sys .seta{ position:absolute; top:16px; right:14px; color:var(--borda);
  transition:color .16s ease, transform .16s ease; }
a.sys:hover .seta{ color:var(--roxo); transform:translateX(3px); }

/* Espaço reservado: presente, mas claramente ainda não. Sem seta, sem
   sombra, e o símbolo desbotado. */
.sys-porvir{ background:transparent; border-style:dashed; box-shadow:none; cursor:default; }
.sys-porvir .ico{ opacity:.4; }
.sys-porvir .nm{ color:var(--texto-2); }
.sys-porvir .selo{ display:block; width:fit-content; margin-top:6px; }

/* ------------------------------------------------------------------ celular
   A barra quebra: marca e "eu" na primeira linha, os três atalhos embaixo. */
@media (max-width:620px){
  .hub-topo{ flex-wrap:wrap; gap:10px; padding:10px 16px; }
  .hub-menu{ order:3; flex-basis:100%; flex-wrap:wrap; overflow:visible; }
  .hub-eu .hub-nome{ display:none; }
  .pagina{ padding:28px 16px 48px; }
  .hub-rodape{ padding:4px 16px 32px; }
}