/* ═══════════════════════════════════════════════════════════════════════
   AVISOS AO ADMINISTRADOR — cartões (ver docs/js/admin-avisos.js)
   ═══════════════════════════════════════════════════════════════════════
   Os mesmos cartões no workspace e no painel admin. Cores do CORES.md: branco
   e azul da barra, com o acento de estado de cada aviso — azul para conta
   nova, âmbar para Premium, roxo para Empresarial (as cores dos selos de
   plano em todo o produto). Contrastes medidos sobre #fff: #0f2744 15,6:1;
   #536b84 5,6:1; #1f68d5 5,2:1; #a35d06 5,1:1; #7e22ce 7,1:1. No tema escuro
   do app o cartão escurece e os acentos clareiam. */
#mdav-pilha {
  position: fixed;
  top: var(--mdav-topo, 72px);
  right: 18px;
  z-index: 2600;
  width: min(384px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.mdav {
  --mdav-cor: #1f68d5;
  --mdav-fundo: #e8f1fe;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 12px 16px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #d8e3f0;
  box-shadow: 0 18px 46px rgba(15, 39, 68, .18), 0 2px 6px rgba(15, 39, 68, .06);
  font-family: 'Inter', system-ui, sans-serif;
  color: #0f2744;
  animation: mdavEntra .5s cubic-bezier(.16, 1, .3, 1) both;
}
.mdav::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--mdav-cor);
}
.mdav-premium { --mdav-cor: #a35d06; --mdav-fundo: #fff7e6; }
.mdav-empresarial { --mdav-cor: #7e22ce; --mdav-fundo: #f3e8ff; }

.mdav-ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--mdav-fundo);
  color: var(--mdav-cor);
}
.mdav-ico svg { width: 22px; height: 22px; }
.mdav-premium .mdav-ico { animation: mdavBrilho 1.4s ease .3s 2; }
.mdav-txt { min-width: 0; }
.mdav-kicker {
  font-size: .62rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mdav-cor);
  margin-bottom: 3px;
}
.mdav-titulo { font-size: .88rem; font-weight: 700; line-height: 1.32; color: #0f2744; }
.mdav-sub {
  margin-top: 3px;
  font-size: .74rem; color: #536b84;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mdav-ver {
  margin-top: 9px;
  padding: 6px 11px;
  border: 0; border-radius: 9px;
  background: var(--mdav-fundo);
  color: var(--mdav-cor);
  font: 650 .74rem 'Inter', system-ui, sans-serif;
  cursor: pointer;
}
.mdav-ver:hover { filter: brightness(.96); }
.mdav-x {
  width: 30px; height: 30px;
  border-radius: 9px;
  border: 1px solid #d8e3f0;
  background: #fff;
  color: #536b84;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.mdav-x:hover { background: #e8f1fe; color: #1f68d5; }
.mdav :is(.mdav-ver, .mdav-x):focus-visible { outline: 2px solid #2f7ff2; outline-offset: 2px; }

/* A barra do tempo: some junto com o cartão, e para com o ponteiro em cima. */
.mdav-barra {
  position: absolute; left: 4px; right: 0; bottom: 0;
  height: 3px;
  background: var(--mdav-cor);
  opacity: .35;
  transform-origin: left;
  transform: scaleX(0);
}
.mdav.mdav-contando .mdav-barra { animation: mdavTempo var(--mdav-dur, 12s) linear both; }
.mdav.mdav-saindo { animation: mdavSai .28s cubic-bezier(.4, 0, 1, 1) both; }

@keyframes mdavEntra {
  from { opacity: 0; transform: translate3d(28px, -6px, 0) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes mdavSai { to { opacity: 0; transform: translate3d(30px, 0, 0) scale(.97); } }
@keyframes mdavTempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes mdavBrilho { 50% { box-shadow: 0 0 0 6px rgba(163, 93, 6, .12); } }

/* ── Tema escuro do app ─────────────────────────────────────────────── */
html[data-theme="dark"] .mdav {
  --mdav-cor: #8ec5ff;
  --mdav-fundo: rgba(88, 167, 246, .14);
  background: #111820;
  border-color: rgba(255, 255, 255, .1);
  color: #f0f0f0;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .mdav-premium { --mdav-cor: #fcd34d; --mdav-fundo: rgba(252, 211, 77, .12); }
html[data-theme="dark"] .mdav-empresarial { --mdav-cor: #d8b4fe; --mdav-fundo: rgba(216, 180, 254, .12); }
html[data-theme="dark"] .mdav-titulo { color: #f0f0f0; }
html[data-theme="dark"] .mdav-sub { color: rgba(240, 240, 240, .66); }
html[data-theme="dark"] .mdav-x { background: transparent; border-color: rgba(255, 255, 255, .12); color: rgba(240, 240, 240, .7); }
html[data-theme="dark"] .mdav-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ── Celular: faixa logo abaixo da barra de cima ────────────────────── */
@media (max-width: 768px) {
  #mdav-pilha {
    top: calc(var(--mb-top-h, 52px) + env(safe-area-inset-top, 0px) + 8px);
    left: 12px; right: 12px;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdav, .mdav.mdav-saindo, .mdav-premium .mdav-ico { animation: none; }
  .mdav.mdav-contando .mdav-barra { animation: none; }
}