/* Notificações do sistema: balões no canto da tela (site, painel e futuras áreas) */

.notificacoes {
  position: fixed; top: 1.25rem; right: 1.25rem; z-index: 1000;
  display: flex; flex-direction: column; gap: .75rem;
  width: min(25rem, calc(100vw - 2rem));
  pointer-events: none;
}
@media (max-width: 40rem) {
  .notificacoes { top: .75rem; right: .75rem; left: .75rem; width: auto; }
}

.notificacao {
  --cor: #C4AC96;
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid rgb(243 238 232 / .1); border-radius: 1rem;
  background: rgb(38 32 28 / .94);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1.25rem 2.75rem -1rem rgb(20 16 14 / .55), 0 0 0 1px rgb(0 0 0 / .04);
  color: #F3EEE8;
  font: 400 .875rem/1.45 "Inter", "Raleway", system-ui, sans-serif;
  animation: notificacao-entra .55s cubic-bezier(.2, .9, .3, 1.2) both;
}
.notificacao--sucesso { --cor: #7DB394; }
.notificacao--erro { --cor: #E08A7E; }
.notificacao--aviso { --cor: #E2B46A; }
.notificacao--info { --cor: #C4AC96; }

/* luz suave da cor do tipo, vinda do canto do ícone */
.notificacao::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(14rem circle at 0 0, color-mix(in srgb, var(--cor) 22%, transparent), transparent 70%);
}

.notificacao__icone {
  position: relative; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: color-mix(in srgb, var(--cor) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor) 45%, transparent);
  color: var(--cor);
}
.notificacao__icone svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.notificacao__corpo { position: relative; min-width: 0; padding-top: .1rem; }
.notificacao__titulo { display: block; margin-bottom: .15rem; font-weight: 600; font-size: .9rem; color: #fff; }
.notificacao__texto { margin: 0; color: rgb(243 238 232 / .78); overflow-wrap: anywhere; }
.notificacao__texto a { color: #F3EEE8; text-decoration: underline; text-decoration-color: var(--cor); text-underline-offset: .2em; }

.notificacao__fechar {
  position: relative; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; margin: -.25rem -.25rem 0 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: rgb(243 238 232 / .55);
  cursor: pointer; transition: background .25s, color .25s;
}
.notificacao__fechar:hover { background: rgb(243 238 232 / .1); color: #fff; }
.notificacao__fechar:focus-visible { outline: 2px solid var(--cor); outline-offset: 1px; }
.notificacao__fechar svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* tempo restante: a linha encolhe; parar o mouse em cima pausa */
.notificacao__tempo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--cor); opacity: .85; transform-origin: left;
  animation: notificacao-tempo var(--duracao, 6s) linear forwards;
}
.notificacao:hover .notificacao__tempo, .notificacao:focus-within .notificacao__tempo { animation-play-state: paused; }

.notificacao.saindo { animation: notificacao-sai .4s cubic-bezier(.4, 0, 1, 1) forwards; }

@keyframes notificacao-entra { from { opacity: 0; translate: 2.5rem 0; scale: .96; } }
@keyframes notificacao-sai { to { opacity: 0; translate: 2rem 0; scale: .96; } }
@keyframes notificacao-tempo { to { scale: 0 1; } }

@media (max-width: 40rem) {
  @keyframes notificacao-entra { from { opacity: 0; translate: 0 -1.5rem; scale: .96; } }
}

@media (prefers-reduced-motion: reduce) {
  .notificacao, .notificacao.saindo { animation-duration: .01ms; }
}