/* ============================================================ Melhor Passagem · Agency OS — Shell (sidebar + cabeçalho) ------------------------------------------------------------ Fase 3. TODAS as regras escopadas sob .ds-theme: se a classe sair do , nada aqui se aplica e o ds-shell.js fica inerte (ele checa ds-theme antes de agir) — reversão total. O shell NÃO reescreve o menu: o ds-shell.js MOVE os botões nav- legados (já filtrados por perfil) para dentro da nova estrutura, preservando id, onclick=irPara e a classe .ativo. Zero mudança de rota, permissão ou regra. ============================================================ */ /* ── aside vira trilho claro (override do glassmorphism legado) ── */ .ds-theme #app aside.ds-shell { width: 215px; padding: var(--ds-esp-16) var(--ds-esp-12); background: var(--ds-branco); border-right: 1px solid var(--ds-n-200); backdrop-filter: none; display: flex; flex-direction: column; gap: var(--ds-esp-16); transition: width .18s ease; } .ds-theme #app aside.ds-shell.ds-colapsada { width: 64px; padding: var(--ds-esp-16) var(--ds-esp-10); } /* logo + botão de recolher */ .ds-theme aside.ds-shell .logo { padding: 0 30px 0 var(--ds-esp-6); display: flex; flex-direction: row; align-items: center; gap: var(--ds-esp-10); position: relative; } /* A marca oficial e o simbolo quadrado (MP com o aviao), nao a faixa horizontal antiga: ela entra em tamanho de icone e o nome da agencia vai escrito ao lado. Dimensionar em 150px de largura devolvia a faixa antiga a barra lateral. */ .ds-theme aside.ds-shell .logo .logo-marca { width: 42px; height: 42px; flex: none; object-fit: contain; border-radius: 11px; } .ds-theme aside.ds-shell .logo .logo-legenda { display: block; min-width: 0; } /* "MELHOR PASSAGEM" empilhado em duas linhas, como na marca oficial: numa linha só ele nao cabe entre o simbolo e o botao de recolher e sai cortado. */ .ds-theme aside.ds-shell .logo .logo-legenda b { display: block; font-size: 12px; letter-spacing: .07em; line-height: 1.18; color: var(--ds-titulo, #0f172a); font-weight: 700; max-width: 9ch; overflow-wrap: normal; } .ds-theme aside.ds-shell.ds-colapsada .logo .logo-legenda { display: none; } .ds-theme aside.ds-shell .logo small { color: var(--ds-texto-meta); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500; padding-left: 2px; } .ds-theme aside.ds-shell.ds-colapsada .logo .logo-marca, .ds-theme aside.ds-shell.ds-colapsada .logo small { display: none; } .ds-theme aside.ds-shell .ds-mono { display: none; width: 30px; height: auto; border-radius: 8px; } .ds-theme aside.ds-shell.ds-colapsada .ds-mono { display: block; margin: 0 auto; } .ds-shell-toggle { position: absolute; top: 2px; right: -2px; width: 26px; height: 26px; border: 1px solid var(--ds-n-200); background: var(--ds-branco); border-radius: var(--ds-esp-8); color: var(--ds-texto-sec); cursor: pointer; display: flex; align-items: center; justify-content: center; } .ds-shell-toggle:hover { background: var(--ds-n-50); color: var(--ds-brand-600); } .ds-shell-toggle svg { width: 15px; height: 15px; } .ds-theme aside.ds-shell.ds-colapsada .ds-shell-toggle { position: static; margin: 0 auto; } /* ── trilho de navegação ── */ .ds-theme aside.ds-shell nav#menu { overflow: visible; padding: 0; flex: 1; display: flex; flex-direction: column; gap: var(--ds-esp-2); background: var(--ds-trilho); border-radius: var(--ds-esp-8); padding: var(--ds-esp-4); } .ds-theme aside.ds-shell.ds-colapsada nav#menu { background: transparent; padding: var(--ds-esp-4) 0; } /* item de navegação (button nav-, nó movido do legado) */ .ds-theme aside.ds-shell nav#menu button[id^="nav-"] { min-height: 28px; margin: 0; padding: var(--ds-esp-6); border-radius: var(--ds-raio-menu); border-left: 0; box-shadow: none; color: var(--ds-texto-forte); font-family: var(--ds-fonte); font-weight: 500; font-size: 14px; letter-spacing: var(--ds-espaco-letras); display: flex; align-items: center; gap: var(--ds-esp-8); width: 100%; background: none; cursor: pointer; text-align: left; } .ds-theme aside.ds-shell nav#menu button[id^="nav-"]:hover { background: var(--ds-menu-hover); color: var(--ds-texto-forte); } .ds-theme aside.ds-shell nav#menu button[id^="nav-"].ativo { background: var(--ds-grad-marca); color: var(--ds-branco); box-shadow: none; } /* neutraliza o "chip redondo" legado do ícone dentro do shell */ .ds-theme aside.ds-shell nav#menu .nav-icone { width: 16px; height: 16px; border-radius: 0; background: none; color: inherit; flex: 0 0 auto; } .ds-theme aside.ds-shell nav#menu .nav-icone svg { width: 16px; height: 16px; } .ds-theme aside.ds-shell nav#menu button[id^="nav-"].ativo .nav-icone { background: none; color: var(--ds-branco); } .ds-theme aside.ds-shell nav#menu button[id^="nav-"] span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* grupo (expandido) */ .ds-nav-grupo { display: flex; flex-direction: column; } .ds-nav-cab { display: flex; align-items: center; gap: var(--ds-esp-8); width: 100%; min-height: 28px; padding: var(--ds-esp-6); border: 0; background: none; cursor: pointer; border-radius: var(--ds-raio-menu); font-family: var(--ds-fonte); font-weight: 500; font-size: 14px; letter-spacing: var(--ds-espaco-letras); color: var(--ds-texto-sec); } .ds-nav-cab:hover { background: var(--ds-menu-hover); } .ds-nav-cab .ds-nav-cab-ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ds-texto-meta); } .ds-nav-cab .ds-nav-cab-ic svg { width: 16px; height: 16px; } .ds-nav-cab .ds-nav-rotulo { flex: 1; text-align: left; } .ds-nav-cab .ds-nav-chevron { width: 14px; height: 14px; transition: transform .15s ease; color: var(--ds-texto-meta); } .ds-nav-grupo.ds-aberto > .ds-nav-cab .ds-nav-chevron { transform: rotate(180deg); } .ds-nav-lista { display: none; flex-direction: column; gap: 1px; padding: var(--ds-esp-2) 0 var(--ds-esp-2) 0; } .ds-nav-grupo.ds-aberto > .ds-nav-lista { display: flex; } /* recuo dos itens dentro do grupo */ .ds-nav-lista button[id^="nav-"] { padding-left: 26px; font-size: 13px; color: var(--ds-texto-sec); } .ds-nav-lista button[id^="nav-"].ativo { color: var(--ds-branco); } /* grupo aberto: header em azul + bloco contornado (visual do brief) */ .ds-nav-grupo.ds-aberto { border: 1px solid var(--ds-brand-600); border-radius: 5px; overflow: hidden; background: var(--ds-branco); } .ds-nav-grupo.ds-aberto > .ds-nav-cab { background: var(--ds-grad-marca); color: var(--ds-branco); border-radius: 4px 4px 0 0; } .ds-nav-grupo.ds-aberto > .ds-nav-cab .ds-nav-cab-ic, .ds-nav-grupo.ds-aberto > .ds-nav-cab .ds-nav-chevron { color: var(--ds-branco); } .ds-nav-grupo.ds-aberto > .ds-nav-lista { padding: var(--ds-esp-4) var(--ds-esp-4) var(--ds-esp-6); } /* item de submenu ativo = azul claro (o header do grupo já é o azul forte) */ .ds-theme aside.ds-shell nav#menu .ds-nav-lista button[id^="nav-"].ativo { background: var(--ds-submenu-ativo); color: var(--ds-titulo); } .ds-theme aside.ds-shell nav#menu .ds-nav-lista button[id^="nav-"].ativo .nav-icone { color: var(--ds-brand-700); } /* ── modo colapsado: só ícones + flyout ── */ .ds-theme aside.ds-shell.ds-colapsada .ds-nav-rotulo, .ds-theme aside.ds-shell.ds-colapsada .ds-nav-chevron, .ds-theme aside.ds-shell.ds-colapsada nav#menu button[id^="nav-"] span:last-child { display: none; } .ds-theme aside.ds-shell.ds-colapsada nav#menu button[id^="nav-"], .ds-theme aside.ds-shell.ds-colapsada .ds-nav-cab { width: 28px; height: 28px; min-height: 28px; padding: 6px; margin: 0 auto; justify-content: center; } .ds-theme aside.ds-shell.ds-colapsada .ds-nav-grupo { position: relative; align-items: center; } .ds-theme aside.ds-shell.ds-colapsada .ds-nav-grupo.ds-aberto { border: 0; background: none; } .ds-theme aside.ds-shell.ds-colapsada .ds-nav-grupo.ds-aberto > .ds-nav-cab { background: none; color: var(--ds-texto-sec); } .ds-theme aside.ds-shell.ds-colapsada .ds-nav-grupo.ds-aberto > .ds-nav-cab .ds-nav-cab-ic { color: var(--ds-texto-sec); } /* a lista vira flyout ancorado à direita */ .ds-theme aside.ds-shell.ds-colapsada .ds-nav-lista { position: absolute; left: calc(100% + 6px); top: 0; z-index: 60; min-width: 190px; background: var(--ds-n-50); border: 1px solid var(--ds-n-200); border-radius: var(--ds-esp-8); padding: var(--ds-esp-6); box-shadow: var(--ds-sombra-flyout); display: none; gap: 1px; } .ds-theme aside.ds-shell.ds-colapsada .ds-nav-grupo:hover > .ds-nav-lista { display: flex; } /* dentro do flyout os itens voltam a ser ícone + label à esquerda (nav#menu para empatar o id das regras-base do trilho e vencer por classe) */ .ds-theme aside.ds-shell.ds-colapsada nav#menu .ds-nav-lista button[id^="nav-"] { width: 100%; height: auto; min-height: 32px; padding: 7px 8px; margin: 0; justify-content: flex-start; } .ds-theme aside.ds-shell.ds-colapsada nav#menu .ds-nav-lista button[id^="nav-"] span:last-child { display: inline; } .ds-theme aside.ds-shell.ds-colapsada nav#menu .ds-nav-lista .nav-icone { width: 16px; height: 16px; } .ds-theme aside.ds-shell.ds-colapsada .ds-nav-lista button[id^="nav-"]:hover { background: var(--ds-submenu-ativo); } /* título do grupo no topo do flyout */ .ds-flyout-titulo { display: none; font-size: 12px; color: var(--ds-texto-meta); font-weight: 500; padding: var(--ds-esp-6) var(--ds-esp-8) var(--ds-esp-2); letter-spacing: var(--ds-espaco-letras); } .ds-theme aside.ds-shell.ds-colapsada .ds-nav-lista .ds-flyout-titulo { display: block; } /* tooltip simples nos itens standalone colapsados */ .ds-theme aside.ds-shell.ds-colapsada nav#menu > button[id^="nav-"] { position: relative; } /* ── rodapé ── */ .ds-theme aside.ds-shell .rodape { margin: 0; padding: var(--ds-esp-12) var(--ds-esp-6) 0; border: 0; border-top: 1px solid var(--ds-n-300); background: none; border-radius: 0; display: flex; flex-direction: column; gap: var(--ds-esp-4); font-size: 12px; color: var(--ds-texto-meta); } .ds-theme aside.ds-shell .rodape b { color: var(--ds-texto-forte); font-size: 12px; font-weight: 500; } .ds-theme aside.ds-shell .rodape #quem-papel { color: var(--ds-texto-meta); font-size: 11px; } .ds-theme aside.ds-shell .rodape .leve { margin-top: var(--ds-esp-4); background: none; border: 1px solid var(--ds-n-300); border-radius: var(--ds-esp-8); color: var(--ds-texto-sec); font-family: var(--ds-fonte); font-size: 12px; padding: var(--ds-esp-6) var(--ds-esp-10); cursor: pointer; } .ds-theme aside.ds-shell .rodape .leve:hover { background: var(--ds-n-50); } .ds-theme aside.ds-shell.ds-colapsada .rodape { align-items: stretch; padding: var(--ds-esp-12) 0 0; } .ds-theme aside.ds-shell.ds-colapsada .rodape b, .ds-theme aside.ds-shell.ds-colapsada .rodape #quem-papel, .ds-theme aside.ds-shell.ds-colapsada .rodape br, .ds-theme aside.ds-shell.ds-colapsada .rodape .leve:first-of-type { display: none; } /* colapsado: só "Sair" */ .ds-theme aside.ds-shell.ds-colapsada .rodape .leve { margin-top: 0; padding: var(--ds-esp-6) 2px; font-size: 11px; text-align: center; } /* ── cabeçalho de página (leve: só tipografia/espaço) ── */ .ds-theme main .topo h1 { font-family: var(--ds-fonte); font-size: var(--ds-tam-h1); line-height: var(--ds-altura-h1); font-weight: var(--ds-peso-h1); color: var(--ds-titulo); letter-spacing: var(--ds-espaco-letras); } .ds-theme main .topo p { font-family: var(--ds-fonte); font-size: var(--ds-tam-sec); color: var(--ds-texto-meta); letter-spacing: var(--ds-espaco-letras); } /* foco acessível em todos os controles do shell */ .ds-theme aside.ds-shell button:focus-visible, .ds-shell-toggle:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .ds-theme #app aside.ds-shell { transition: none; } .ds-nav-cab .ds-nav-chevron { transition: none; } } /* responsivo: em telas estreitas o trilho recolhe sozinho */ @media (max-width: 900px) { .ds-theme #app aside.ds-shell:not(.ds-colapsada) { width: 190px; } }