/* ============================================================ * Fundo decorativo de ícones médicos flutuantes (iOS Style) * - 35 ícones em coordenadas estáveis (renderizados via floating-bg.js) * - Animação suave (brand-float-a / brand-float-b) * - Decorativo: aria-hidden + pointer-events:none * - Suporta tema claro e escuro (data-bs-theme + prefers-color-scheme) * - Respeita prefers-reduced-motion * ============================================================ */ .floating-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .floating-bg .brand-icon { position: absolute; opacity: 0.14; user-select: none; will-change: transform; filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.08)); } @keyframes brand-float-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot)); } 50% { transform: translate3d(0, -14px, 0) rotate(calc(var(--rot) + 4deg)); } } @keyframes brand-float-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot)); } 50% { transform: translate3d(8px, 10px, 0) rotate(calc(var(--rot) - 5deg)); } } @media (prefers-reduced-motion: reduce) { .floating-bg .brand-icon { animation: none !important; } } /* Tema escuro: opacidade levemente maior + drop-shadow mais clara */ @media (prefers-color-scheme: dark) { .floating-bg .brand-icon { opacity: 0.18; filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.08)); } } html[data-bs-theme="dark"] .floating-bg .brand-icon, html[data-bs-theme="semi-dark"] .floating-bg .brand-icon { opacity: 0.18; filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.08)); } /* Conteúdo principal deve ficar acima do fundo. As cores de fundo permanecem aplicadas no — os shells ficam transparentes para permitir que a camada de ícones apareça por trás. Cards e painéis internos mantêm seus próprios backgrounds opacos. IMPORTANTE: NÃO definir z-index numérico aqui. Com z-index: auto os shells permanecem como contextos de posicionamento sem criar um stacking context isolado. Caso contrário, p:dialog (renderizado como filho do shell) fica preso ao nível do shell e termina escondido por elementos fixos como sidebar/topbar que vivem em outros stacking contexts globais. */ .auth-shell, .main-wrapper, .layout-wrapper, .main-content, .page-content { position: relative; background: transparent !important; }