/* A barra do módulo — padrão da Central, escolhido pelo Cicero na Busca Ativa em 20/09/2026 e estendido a todos
   os módulos no mesmo dia.

   Como funciona: quando a pessoa está dentro de um módulo, o base.html põe a classe «com-barra» no <body>. Aí o
   topo fica escuro, na cor da marca da empresa (--marca, de marcas.css), com o logo em branco, o nome do módulo
   sob o logo e o menu por cima. Na tela inicial da Central, que não é de módulo nenhum, o topo continua branco.

   A cor sai da marca, e não do módulo: assim a Liberação é verde na Pró, azul na CEDUSP e azul na Prezecor, sem
   ninguém escrever uma cor nova. Módulo que precisar de algo só dele acrescenta no CSS próprio, depois deste. */

body.com-barra .topo {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--marca, #0b5c3f) 72%, #000),
              var(--marca, #0b5c3f) 60%,
              color-mix(in srgb, var(--marca, #0b5c3f) 88%, #fff));
  border-bottom: 0; position: relative; overflow: hidden;
}

/* marca d'água: o logo pintado de branco, bem apagado, atrás do menu */
body.com-barra .topo::after {
  content: ""; position: absolute; right: 260px; top: 50%; transform: translateY(-50%);
  width: 230px; height: 96px; background: url("logo-pro.png") right center / contain no-repeat;
  filter: brightness(0) invert(1); opacity: .12; pointer-events: none;
}
body.com-barra .topo .in { position: relative; z-index: 1; }

/* o logo não encolhe nem corta, e o nome do módulo fica logo abaixo dele */
body.com-barra .topo .in > a.marca { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; text-decoration: none; line-height: 1; }
body.com-barra .topo img { display: block; height: 30px; width: 72px; object-fit: contain;
  filter: brightness(0) invert(1); }
body.com-barra .topo .marca-nome { color: #fff; }
body.com-barra .marca-mod { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.72); }
body.com-barra .topo .tit { display: none; }     /* o nome do módulo já está sob o logo */

/* menu sobre a cor da marca */
body.com-barra .topo nav a, body.com-barra .menu-topo { color: rgba(255,255,255,.84); }
body.com-barra .topo nav a.on { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
body.com-barra .topo nav a:hover { background: rgba(255,255,255,.10); }
body.com-barra .topo nav a i { background: rgba(255,255,255,.18); color: #fff; }
body.com-barra .topo nav a.on i { background: rgba(255,255,255,.28); color: #fff; }
body.com-barra .topo nav a i.alerta { background: var(--e-vermelho-f, #fbeae8); color: var(--vermelho); }
body.com-barra .topo nav a i.nova { background: #fff; color: var(--marca, #0b5c3f); }
body.com-barra .topo .quem { color: rgba(255,255,255,.7); }
body.com-barra .nav-sep { background: rgba(255,255,255,.28); }

/* os menus «▾»: o topo clareia sobre a barra e a lista continua branca, como nas outras telas */
body.com-barra .menu-drop.on .menu-topo, body.com-barra .menu-drop:hover .menu-topo {
  background: rgba(255,255,255,.16); color: #fff; }
body.com-barra .menu-itens { border-color: rgba(0,0,0,.18); }