/* whatsapp.css - Botón flotante de WhatsApp y toasts (tema oscuro). */
.mm-wa-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 130;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2be07a, #1ebe5b);
  color: var(--mm-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(30, 190, 91, 0.6), 0 18px 44px -14px rgba(11, 22, 34, 0.5);
  transition: transform var(--mm-t-medio) var(--mm-ease), box-shadow var(--mm-t-medio) var(--mm-ease), filter var(--mm-t-medio) var(--mm-ease);
  animation: mm-wa-pulso 3s var(--mm-ease) infinite;
  will-change: transform;
}

.mm-wa-flotante:hover {
  animation: none;
  transform: translateY(-4px) scale(1.06);
  filter: brightness(1.05);
  box-shadow: 0 16px 38px -10px rgba(30, 190, 91, 0.7), 0 24px 54px -16px rgba(11, 22, 34, 0.55);
}

.mm-wa-flotante:active {
  animation: none;
  transform: translateY(0) scale(0.95);
  filter: brightness(0.98);
}

.mm-wa-flotante svg {
  width: 28px;
  height: 28px;
  fill: var(--mm-texto);
}

@keyframes mm-wa-pulso {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-wa-flotante {
    animation: none;
  }
}

/* Toasts */
.mm-toast-region {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
}

.mm-toast {
  background: var(--mm-fondo-2);
  color: var(--mm-texto);
  border: 1px solid var(--mm-borde);
  border-radius: var(--mm-radio-m);
  padding: 14px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--mm-sombra-m);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: mm-toast-in var(--mm-t-medio) var(--mm-ease);
}

.mm-toast::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mm-texto-tenue);
  flex-shrink: 0;
}

.mm-toast.exito {
  border-color: color-mix(in srgb, var(--mm-exito) 45%, transparent);
  background: color-mix(in srgb, var(--mm-exito) 10%, var(--mm-fondo-2));
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--mm-exito) 45%, transparent), var(--mm-sombra-m);
}

.mm-toast.exito::before {
  background: var(--mm-exito);
}

.mm-toast.error {
  border-color: color-mix(in srgb, var(--mm-peligro) 45%, transparent);
  background: color-mix(in srgb, var(--mm-peligro) 10%, var(--mm-fondo-2));
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--mm-peligro) 45%, transparent), var(--mm-sombra-m);
}

.mm-toast.error::before {
  background: var(--mm-peligro);
}

.mm-toast .mm-toast-accion {
  margin-left: auto;
  color: var(--mm-primario-claro);
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: color var(--mm-t-rapida) var(--mm-ease);
}

.mm-toast .mm-toast-accion:hover {
  color: var(--mm-primario);
}

@keyframes mm-toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}