/* ============================================================
   Dualtic Toasts — sistema de notificaciones tipo Sonner
   (reemplaza Alertify.js). Vanilla, sin dependencias.
   Mobile: arriba centrado (estilo notificación de teléfono).
   Desktop: abajo a la derecha.
   Tipografía: Hanken Grotesk (la del sitio).
   ============================================================ */

.dt-toaster {
  /* Tokens locales del componente (autocontenido) */
  --dt-bg: #ffffff;
  --dt-text: #141414;
  --dt-muted: #6a5651;
  --dt-border: #ecd7d2;
  --dt-success: #2e9e6b;
  --dt-error: #c62828;
  --dt-warning: #d98a2b;
  --dt-default: #ed6f5c;
  --dt-radius: 14px;
  --dt-font: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --dt-shadow: 0 10px 24px -8px rgba(60, 30, 25, .22), 0 3px 8px -3px rgba(60, 30, 25, .14);
  --dt-ease: cubic-bezier(.23, 1, .32, 1);

  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 380px;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  font-family: var(--dt-font);
}

/* Desktop: abajo a la derecha, el más nuevo abajo */
@media (min-width: 640px) {
  .dt-toaster {
    right: 24px;
    bottom: 24px;
    flex-direction: column;
  }
}

/* Mobile: arriba centrado, el más nuevo arriba */
@media (max-width: 639px) {
  .dt-toaster {
    top: max(12px, env(safe-area-inset-top, 12px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 24px);
  }
}

.dt-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--dt-bg);
  color: var(--dt-text);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  box-shadow: var(--dt-shadow);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.006em;
  will-change: transform, opacity;
  touch-action: none;
  transition:
    transform 360ms var(--dt-ease),
    opacity 360ms var(--dt-ease);
}

/* Estados de entrada/salida — desktop entra/sale por abajo */
.dt-toast[data-mounted="false"],
.dt-toast[data-removing="true"] {
  opacity: 0;
  transform: translateY(18px);
}

/* Mobile entra/sale por arriba (como notificación del teléfono) */
@media (max-width: 639px) {
  .dt-toast[data-mounted="false"],
  .dt-toast[data-removing="true"] {
    transform: translateY(-130%);
  }
}

/* Durante el swipe, JS controla el transform inline → sin transición */
.dt-toast[data-swiping="true"] {
  transition: none;
}

.dt-toast__icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}

.dt-toast__icon svg {
  width: 12px;
  height: 12px;
  display: block;
}

.dt-toast--success .dt-toast__icon { background: var(--dt-success); }
.dt-toast--error   .dt-toast__icon { background: var(--dt-error); }
.dt-toast--warning .dt-toast__icon { background: var(--dt-warning); }
.dt-toast--default .dt-toast__icon { background: var(--dt-default); }

.dt-toast__msg {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Movimiento reducido: solo opacidad, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
  .dt-toaster { transform: none; }
  @media (max-width: 639px) {
    .dt-toaster { left: 50%; transform: translateX(-50%); }
  }
  .dt-toast {
    transition: opacity 200ms ease;
  }
  .dt-toast[data-mounted="false"],
  .dt-toast[data-removing="true"] {
    transform: none;
    opacity: 0;
  }
}