/* ===================================================================== ds-shell.css — casca da área restrita /dpmg ===================================================================== O que `ds.css` não podia trazer porque não é do design system, e o que ele traz mas depende do markup real desta aplicação: S1 Menu móvel da navbar (drawer) e detalhes do markup real S2 Breadcrumb dentro do container da aplicação S3 Cabeçalho de página (main-container / page-header / page-title) S4 Paleta de busca global Ctrl+K (dpmg-busca-*) S5 Blocos genéricos de página (vazio, meta, container de tabela) Carregado por `{% block css_area %}` de templates/html/base.html, logo depois de `ds.css` e `ds-compat.css`. Toda cor vem de token do DS. ===================================================================== */ /* ===================================================================== S1 — NAVBAR: o que o componente do DS deixa para quem o consome ===================================================================== `ds.css` define a navbar até o ponto em que ela deixa de ser genérica. O comportamento móvel depende de quantos blocos a barra tem — aqui são três (menu, bloco de usuário, toggler) — então mora nesta folha, ao lado do `ds-navbar.js` que escreve as classes. */ .dpmg-navbar__caret { font-size: 0.7em; opacity: 0.75; } .dpmg-navbar__item--dropdown.is-open .dpmg-navbar__caret { transform: rotate(180deg); } /* Item de dropdown correspondente à página atual. O `ds.css` não define esta variante porque no protótipo o painel não tinha item ativo; aqui tem, e a regra do design system vale igual: `--active` nunca aparece sem `aria-current="page"` no mesmo elemento (ver base.html). */ .dpmg-navbar__dropdown-item--active, .dpmg-navbar__dropdown-item[aria-current="page"] { background: var(--ds-green-50); color: var(--ds-green-900); font-weight: var(--ds-weight-semibold); } /* O rótulo "Buscar" e a tecla de atalho somem antes do resto: numa navbar com 6 grupos, eles são a primeira coisa dispensável quando o espaço aperta, e o ícone sozinho continua nomeando o botão pelo `title`. */ @media (max-width: 1200px) { .dpmg-navbar__search-label, .dpmg-navbar__search kbd { display: none; } .dpmg-navbar__search { padding-inline: var(--ds-space-2); } } /* ---- Drawer móvel (abaixo de 1024px) ------------------------------- O painel fica EM FLUXO, não sobreposto. Menu e bloco de usuário são irmãos: se os dois virarem `position:absolute` em `top:100%`, ocupam a mesma origem e o posterior no DOM cobre o anterior — medido no protótipo, 3 de 6 itens do menu ficavam inclicáveis porque `elementFromPoint` devolvia o bloco de usuário. Com `flex-wrap` + `order` + `flex-basis:100%` eles empilham e a navbar cresce; sobreposição deixa de ser possível por construção. */ @media (max-width: 1024px) { .dpmg-navbar.is-menu-open { max-height: 100dvh; overflow-y: auto; } .dpmg-navbar.is-menu-open .dpmg-navbar__inner { flex-wrap: wrap; align-items: flex-start; row-gap: var(--ds-space-2); padding-bottom: var(--ds-space-4); } .dpmg-navbar.is-menu-open .dpmg-navbar__brand { order: 0; } .dpmg-navbar.is-menu-open .dpmg-navbar__toggler { order: 1; margin-left: auto; } .dpmg-navbar.is-menu-open .dpmg-navbar__menu { order: 2; } .dpmg-navbar.is-menu-open .dpmg-navbar__side { order: 3; } .dpmg-navbar.is-menu-open .dpmg-navbar__menu, .dpmg-navbar.is-menu-open .dpmg-navbar__side { display: flex; flex-direction: column; align-items: stretch; gap: var(--ds-space-1); flex-basis: 100%; min-width: 0; } .dpmg-navbar.is-menu-open .dpmg-navbar__side { border-top: 1px solid var(--ds-border-on-brand); padding-top: var(--ds-space-3); } /* O painel do grupo só aparece com `.is-open` — a MESMA fonte de verdade do desktop. Sem `.is-open` no seletor, abrir o menu móvel escancararia todos os submenus enquanto cada gatilho seguisse anunciando `aria-expanded="false"`. */ .dpmg-navbar.is-menu-open .dpmg-navbar__item--dropdown.is-open > .dpmg-navbar__dropdown { display: flex; position: static; background: transparent; border: none; box-shadow: none; padding: 0 0 var(--ds-space-2) var(--ds-space-4); } .dpmg-navbar.is-menu-open .dpmg-navbar__dropdown-item { color: rgba(255, 255, 255, 0.85); } .dpmg-navbar.is-menu-open .dpmg-navbar__dropdown-item:hover, .dpmg-navbar.is-menu-open .dpmg-navbar__dropdown-item--active { background: rgba(255, 255, 255, 0.10); color: var(--ds-on-brand); } .dpmg-navbar.is-menu-open .dpmg-navbar__search { justify-content: flex-start; } } /* ---- Rodapé: reset da lista ----------------------------------------- O reset do `ds.css` é `ul[class] { list-style: none; padding: 0 }` — só alcança lista COM classe, de propósito, para não roubar os marcadores de listas de conteúdo. As colunas do rodapé usam `