/* =========================================================================== Notificações de operação — feedback de lançamento, edição e exclusão. Por que existe -------------- O sistema tinha dez implementações de toast, uma por módulo, com dez aparências: `rbac-toast`, `cml-toast`, `ctr-toast`, `rh-colab-toast`, `rh-man-toast`, `adm-toast` e quatro com estilo inline. Duração, cor e ícone divergiam, e o resto das telas — ativos, licenças, custos de TI, drenagem, fulcrum, urbhis — não avisava nada: salvava e ficava calado. Aqui é o desenho único. Os módulos antigos passaram a delegar para cá, e tela nova não precisa escrever CSS de aviso nenhum. SEM regras `html.dark`. O `base.html` marca `` por PADRÃO (só troca para `light` se o tema salvo disser isso) e o `style.css` não tem tema escuro: a área de conteúdo é clara sempre. Regra `html.dark` aqui dispararia para todo mundo. z-index 10000 — acima do overlay de imagem ampliada e dos modais (9999), que é onde a maioria das confirmações de exclusão acontece: aviso escondido atrás do modal que o originou não serve para nada. =========================================================================== */ .bn-notificacoes { position: fixed; right: 24px; bottom: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; width: min(400px, calc(100vw - 32px)); pointer-events: none; /* o vão entre os cartões não bloqueia a tela */ } /* --------------------------------------------------------------------- */ /* Cartão */ /* --------------------------------------------------------------------- */ .bn-notificacao { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; overflow: hidden; border: 1px solid var(--bonin-gray-mid); border-left: 4px solid var(--bonin-gray-dark); border-radius: 12px; background: var(--bonin-white); box-shadow: 0 8px 24px rgba(22, 22, 52, 0.16); color: var(--bonin-navy); font-family: inherit; font-size: 0.875rem; line-height: 1.45; pointer-events: auto; animation: bn-notificacao-entra 0.22s ease-out; } .bn-notificacao__icone { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; font-size: 0.8rem; line-height: 1; } .bn-notificacao__texto { flex: 1 1 auto; min-width: 0; padding-top: 2px; /* Mensagem de erro do banco vem sem espaço em nome longo de constraint e estouraria o cartão na horizontal. */ overflow-wrap: anywhere; } .bn-notificacao__titulo { display: block; margin-bottom: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bonin-gray-dark); } .bn-notificacao__fechar { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--bonin-gray-dark); font-size: 0.8rem; line-height: 1; cursor: pointer; transition: all 0.15s ease; } .bn-notificacao__fechar:hover { background: var(--bonin-gray-light); color: var(--bonin-navy); } .bn-notificacao__fechar:focus-visible { outline: 2px solid var(--bonin-blue); outline-offset: 1px; } /* Barra de tempo restante: explica por que o aviso sumiu sozinho, e some junto com a contagem quando o ponteiro está sobre o cartão. */ .bn-notificacao__tempo { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left center; opacity: 0.45; } /* --------------------------------------------------------------------- */ /* Variações semânticas — paleta do brand manual (v1.2) */ /* --------------------------------------------------------------------- */ .bn-notificacao--sucesso { border-left-color: var(--bonin-success); } .bn-notificacao--sucesso .bn-notificacao__icone { background: rgba(45, 125, 70, 0.12); color: var(--bonin-success); } .bn-notificacao--sucesso .bn-notificacao__tempo { background: var(--bonin-success); } .bn-notificacao--erro { border-left-color: var(--bonin-danger); } .bn-notificacao--erro .bn-notificacao__icone { background: rgba(185, 44, 44, 0.12); color: var(--bonin-danger); } .bn-notificacao--erro .bn-notificacao__tempo { background: var(--bonin-danger); } .bn-notificacao--erro .bn-notificacao__titulo { color: var(--bonin-danger); } .bn-notificacao--aviso { border-left-color: var(--bonin-warning); } .bn-notificacao--aviso .bn-notificacao__icone { background: rgba(200, 125, 30, 0.12); color: var(--bonin-warning); } .bn-notificacao--aviso .bn-notificacao__tempo { background: var(--bonin-warning); } .bn-notificacao--info { border-left-color: var(--bonin-blue); } .bn-notificacao--info .bn-notificacao__icone { background: rgba(107, 168, 215, 0.15); color: var(--bonin-petrol); } .bn-notificacao--info .bn-notificacao__tempo { background: var(--bonin-blue); } /* --------------------------------------------------------------------- */ /* Estados */ /* --------------------------------------------------------------------- */ .bn-notificacao--saindo { animation: bn-notificacao-sai 0.2s ease-in forwards; } /* Mesma mensagem repetida não empilha: o cartão que já está na tela pisca. */ .bn-notificacao--repetida { animation: bn-notificacao-repete 0.3s ease-out; } @keyframes bn-notificacao-entra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes bn-notificacao-sai { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(16px); } } @keyframes bn-notificacao-repete { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } } @keyframes bn-notificacao-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* --------------------------------------------------------------------- */ /* Responsivo e acessibilidade */ /* --------------------------------------------------------------------- */ @media (max-width: 640px) { .bn-notificacoes { right: 12px; left: 12px; bottom: 12px; width: auto; } } @media (prefers-reduced-motion: reduce) { .bn-notificacao, .bn-notificacao--saindo, .bn-notificacao--repetida { animation: none; } .bn-notificacao__tempo { display: none; } }