/* Barra de vidro com ondas: o topo de toda gaveta e painel lateral do sistema (.ui-dh nas gavetas comuns; .ui-vidro nas barras próprias
   de Boletins, Painel de chamados, Base de conhecimento, Service Desk e portal do cliente).
   Fica num arquivo carregado pelo base.html, e não no radar_ui.css: Boletins e Painel de chamados não carregam o radar_ui.css, e a barra
   deles sumiu quando o fundo próprio saiu para dar lugar a esta (v4.24.0). Carregado aqui, nenhuma página fica sem.
   As ondas andam devagar, ficam na metade de baixo e somem antes de chegar ao texto (máscara); sem movimento quando o sistema pede menos animação. */
.ui-dh, .ui-vidro { position:relative; isolation:isolate; overflow:hidden; color:#fff;
  background:linear-gradient(115deg, color-mix(in srgb, var(--brand-nav, #1a3a6b) 94%, transparent), color-mix(in srgb, var(--brand-nav, #1a3a6b) 76%, #2f7bd6 24%));
  backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(8,20,40,.18); }
/* navegador sem color-mix: a cor da marca, lisa */
@supports not (background:color-mix(in srgb, red, blue)) { .ui-dh, .ui-vidro { background:var(--brand-nav, #1a3a6b); } }
.ui-dh::before, .ui-dh::after, .ui-vidro::before, .ui-vidro::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:62%; z-index:-1; pointer-events:none;
  background-repeat:repeat-x; background-size:680px 100%; opacity:.42; animation:ui-ondas 46s linear infinite;
  -webkit-mask-image:linear-gradient(to top, #000 35%, transparent); mask-image:linear-gradient(to top, #000 35%, transparent); }
.ui-dh::before, .ui-vidro::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C 90 18 160 18 250 34 S 420 50 510 34 S 630 18 680 34 V60 H0Z' fill='%23ffffff' fill-opacity='.09'/%3E%3C/svg%3E"); }
.ui-dh::after, .ui-vidro::after { height:48%; opacity:.5; animation-duration:64s; animation-direction:reverse;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 110 46 230 46 340 30 S 570 14 680 30 V60 H0Z' fill='%2378b6ff' fill-opacity='.13'/%3E%3C/svg%3E"); }
@keyframes ui-ondas { from { background-position-x:0; } to { background-position-x:680px; } }
@media (prefers-reduced-motion: reduce) { .ui-dh::before, .ui-dh::after, .ui-vidro::before, .ui-vidro::after { animation:none; } }
