/* ================================================================
   toast.css — Notificaciones custom Manzas Magics
   ================================================================ */

#mm-toast-container {
  position: fixed;
  top: calc(68px + 16px); /* debajo del navbar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: calc(100vw - 32px);
  max-width: 420px;
}

/* ── Toast base ─────────────────────────────────────────────── */
.mm-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  background: #1c2128;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 14px 18px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.55),
    0 2px 8px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  cursor: default;
  /* Entrada — estado inicial: cae desde arriba */
  opacity: 0;
  transform: translateY(-14px) scale(.97);
  transition:
    opacity .28s cubic-bezier(.4,0,.2,1),
    transform .28s cubic-bezier(.4,0,.2,1);
  /* Barra de color izquierda */
  border-left: 3px solid var(--toast-color, #388bfd);
  /* Brillo sutil del color en el borde izquierdo */
  box-shadow:
    0 8px 32px rgba(0,0,0,.55),
    0 2px 8px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05),
    -1px 0 12px rgba(0,0,0,.2);
}

.mm-toast--in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mm-toast--out {
  opacity: 0;
  transform: translateY(-10px) scale(.95);
  transition:
    opacity .22s ease,
    transform .22s ease;
  pointer-events: none;
}

/* ── Ícono ───────────────────────────────────────────────────── */
.mm-toast__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.08); /* fallback Safari < 16 */
  background: color-mix(in srgb, var(--toast-color) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.mm-toast__icon svg {
  width: 16px;
  height: 16px;
  color: var(--toast-color);
  stroke: var(--toast-color);
}

/* ── Body ────────────────────────────────────────────────────── */
.mm-toast__body {
  flex: 1;
  min-width: 0;
}
.mm-toast__title {
  font-size: .84rem;
  font-weight: 700;
  color: #e6edf3;
  margin-bottom: 3px;
  line-height: 1.3;
}
.mm-toast__msg {
  font-size: .8rem;
  color: #8b949e;
  line-height: 1.4;
  word-break: break-word;
}

/* ── Botón cerrar ────────────────────────────────────────────── */
.mm-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: #6e7681;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
  margin-top: -2px;
}
.mm-toast__close svg {
  width: 14px;
  height: 14px;
}
.mm-toast__close:hover {
  color: #e6edf3;
  background: rgba(255,255,255,.08);
}

/* ── Barra de progreso ───────────────────────────────────────── */
.mm-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.07);
}
.mm-toast__bar {
  height: 100%;
  width: 100%;
  background: var(--toast-color);
  opacity: .7;
  border-radius: 0 0 14px 14px;
  transform-origin: left;
}

/* ── Hover pause visual ──────────────────────────────────────── */
.mm-toast:hover { border-color: rgba(255,255,255,.14); }

/* ── Tipos de color ──────────────────────────────────────────── */
.mm-toast--success { --toast-color: #14a44d; }
.mm-toast--error   { --toast-color: #da3633; }
.mm-toast--warning { --toast-color: #d4af37; }
.mm-toast--info    { --toast-color: #388bfd; }

/* ── Móvil: sigue centrado en la parte superior ─────────────── */
@media (max-width: 600px) {
  #mm-toast-container {
    top: calc(56px + 12px); /* navbar más pequeño en móvil */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 24px);
    max-width: 100%;
    gap: 6px;
    padding: 0;
  }

  .mm-toast {
    width: 100%;
    border-radius: 12px;
  }
}

/* has-mobile-bar ya no necesita ajustar el toast (está arriba, no abajo) */

/* ── Reducir animaciones si el usuario lo prefiere ───────────── */
@media (prefers-reduced-motion: reduce) {
  .mm-toast,
  .mm-toast--in,
  .mm-toast--out { transition: opacity .15s ease; transform: none !important; }
}