/* =====================================================================
   AprovAKI — Toast de Notificações (aki_notif_toast.css) v2
   ---------------------------------------------------------------------
   Mudanças v2 sobre v1 (Hotfix Toast + Handle 2026-07-22):

   - Offset controlado via --aki-toast-top (top absoluto do toast) e
     --aki-toast-side (respiro do canto direito). Evita o toast bater
     no header/banner ou "quebrar" o topo da página.
   - Toast NUNCA ocupa 100% da largura: mesmo no mobile, mantém
     max-width limitado e fica ancorado à direita — sem sobrepor o
     wordmark AprovAKI.
   - Empilhamento múltiplo desativado no CSS também: o JS agora só
     dispara 1 toast por rodada, mas se por qualquer motivo houver
     dois, eles ficam com margem consistente sem colidir.

   Paleta base:
     - Roxo primário : #4B3CB8
     - Roxo escuro   : #2D2464
     - Dourado accent: #F4C24A
     - Verde meta    : #059669
     - Vermelho alert: #E5484D
   ===================================================================== */

:root {
  --aki-toast-top: 84px;   /* desktop: abaixo do header */
  --aki-toast-side: 16px;  /* respiro do canto direito */
}

.aki-toast.toastify {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: 360px;
  width: max-content;
  padding: 12px 14px 12px 16px;
  border-radius: 14px;
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.35;
  border: 0;
  box-shadow:
    0 1px 2px rgba(20, 12, 60, 0.10),
    0 8px 20px rgba(20, 12, 60, 0.18),
    0 20px 40px rgba(20, 12, 60, 0.14);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  animation: aki-toast-in .28s cubic-bezier(.34,1.56,.64,1) both;

  /* Força o Toastify a respeitar nosso topo, mesmo com offset y=0 no JS. */
  top: var(--aki-toast-top) !important;
}

.aki-toast.toastify::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.55);
}

/* ---------- Variantes ---------- */

.aki-toast--padrao {
  background: linear-gradient(135deg, #4B3CB8 0%, #6E5CE0 100%);
}

.aki-toast--info {
  background: linear-gradient(135deg, #4B3CB8 0%, #3B82F6 120%);
}

.aki-toast--meta {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
}

.aki-toast--conquista {
  background: linear-gradient(135deg, #4B3CB8 0%, #F4C24A 140%);
  color: #2D2464;
}
.aki-toast--conquista::before { background: rgba(45, 36, 100, 0.35); }
.aki-toast--conquista .aki-toast__tit,
.aki-toast--conquista .aki-toast__msg { color: #2D2464; }
.aki-toast--conquista .aki-toast__ico {
  background: rgba(45, 36, 100, 0.15);
  color: #2D2464;
}
.aki-toast--conquista .aki-toast__tag {
  background: rgba(45, 36, 100, 0.18);
  color: #2D2464;
}

.aki-toast--alerta {
  background: linear-gradient(135deg, #E5484D 0%, #B91C1C 100%);
}
.aki-toast--alerta::before { background: rgba(255, 255, 255, 0.7); }
.aki-toast--alerta .aki-toast__ico {
  background: rgba(255, 255, 255, 0.22);
}

/* ---------- Estrutura interna ---------- */
.aki-toast .aki-toast__ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.aki-toast .aki-toast__ico i {
  display: block !important;
  font-size: 20px;
  line-height: 1;
}

.aki-toast .aki-toast__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aki-toast .aki-toast__tit {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .1px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aki-toast .aki-toast__msg {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aki-toast .aki-toast__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: 18px;
  padding: 2px 8px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.aki-toast .aki-toast__close {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background-color .12s ease, transform .12s ease;
}
.aki-toast .aki-toast__close:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.08);
}

.aki-toast.toastify .toast-close { display: none !important; }

/* ---------- Animações ---------- */
@keyframes aki-toast-in {
  0%   { opacity: 0; transform: translateY(-14px) scale(.96); }
  100% { opacity: 1; transform: translateY(0)     scale(1);   }
}

.toastify.on { opacity: 1; }

/* ---------- Empilhamento (JS já limita a 1, mas mantemos seguro) ---------- */
.toastify-right { top: var(--aki-toast-top) !important; }
.aki-toast.toastify + .aki-toast.toastify { margin-top: 10px; }

/* ---------- Reduzir movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .aki-toast.toastify { animation: none; }
}

/* ---------- Mobile ----------
   Antes: left:12px + right:12px fazia o toast ocupar quase a tela toda
   e sobrepor o header, dando aquela sensação de "quebra" da página.
   Agora: mantém ancorado à direita, com max-width menor e distância
   segura do topo (banner do perfil não é mais coberto).
*/
@media (max-width: 720px) {
  :root { --aki-toast-top: 74px; --aki-toast-side: 12px; }

  .aki-toast.toastify {
    left: auto !important;
    right: var(--aki-toast-side) !important;
    max-width: min(88vw, 340px) !important;
    min-width: 0 !important;
    top: var(--aki-toast-top) !important;
  }
  .aki-toast .aki-toast__msg { -webkit-line-clamp: 3; }
}

@media (max-width: 400px) {
  :root { --aki-toast-top: 70px; }
  .aki-toast.toastify {
    /* Continua ancorado à direita — nunca 100% da largura, para
       não cobrir o wordmark AprovAKI nem o banner do perfil. */
    max-width: min(84vw, 300px) !important;
    left: auto !important;
    right: 10px !important;
  }
  .aki-toast .aki-toast__tit { font-size: 13px; }
  .aki-toast .aki-toast__msg { font-size: 12px; -webkit-line-clamp: 3; }
}