/* ============================================================
   TOAST NOTIFICATIONS — Compra Tu Panel
   Todo bajo #ctp-toast-root · z-index: 1800 (sobre cart 1600)
   ============================================================ */

#ctp-toast-root {
  position:       fixed !important;
  top:            1.25rem !important;
  left:           50% !important;
  transform:      translateX(-50%) !important;
  width:          clamp(320px, 60vw, 760px) !important;
  z-index:        1800 !important;
  pointer-events: none !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            0.625rem !important;
}

/* ── Toast individual ─────────────────────────────────────── */
#ctp-toast-root .ctp-toast {
  display:        flex !important;
  align-items:    center !important;
  gap:            0.875rem !important;
  background:     #18181B !important;
  border:         1px solid rgba(255,255,255,0.08) !important;
  border-radius:  14px !important;
  padding:        0.875rem 1rem 0.875rem 1.125rem !important;
  box-shadow:     0 16px 48px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2) !important;
  pointer-events: auto !important;
  position:       relative !important;
  overflow:       hidden !important;
  /* Entrada desde arriba */
  opacity:        0 !important;
  transform:      translateY(-16px) scale(0.97) !important;
  transition:     opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}

#ctp-toast-root .ctp-toast.is-visible {
  opacity:   1 !important;
  transform: translateY(0) scale(1) !important;
}

#ctp-toast-root .ctp-toast.is-leaving {
  opacity:   0 !important;
  transform: translateY(-10px) scale(0.97) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

/* ── Variantes ────────────────────────────────────────────── */
#ctp-toast-root .ctp-toast--success {
  border-left: 3px solid #10B981 !important;
}
#ctp-toast-root .ctp-toast--error {
  border-left: 3px solid #EF4444 !important;
}
#ctp-toast-root .ctp-toast--notice {
  border-left: 3px solid #A1A1AA !important;
}

/* ── Icono ────────────────────────────────────────────────── */
#ctp-toast-root .ctp-toast__icon {
  flex-shrink: 0 !important;
  display:     flex !important;
  color:       #10B981 !important;
}
#ctp-toast-root .ctp-toast--error .ctp-toast__icon  { color: #EF4444 !important; }
#ctp-toast-root .ctp-toast--notice .ctp-toast__icon { color: #A1A1AA !important; }

/* ── Contenido ────────────────────────────────────────────── */
#ctp-toast-root .ctp-toast__content {
  flex:           1 !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            0.75rem !important;
  min-width:      0 !important;
  flex-wrap:      wrap !important;
}

#ctp-toast-root .ctp-toast__msg {
  font-family:  'Inter', sans-serif !important;
  font-size:    0.875rem !important;
  font-weight:  500 !important;
  color:        #FFFFFF !important;
  margin:       0 !important;
  line-height:  1.4 !important;
  flex:         1 !important;
  min-width:    0 !important;
}

/* ── Botón "Ver carrito" ──────────────────────────────────── */
#ctp-toast-root .ctp-toast__cart-btn {
  font-family:    'Inter', sans-serif !important;
  font-size:      0.75rem !important;
  font-weight:    600 !important;
  color:          #10B981 !important;
  background:     rgba(16,185,129,0.12) !important;
  border:         1px solid rgba(16,185,129,0.3) !important;
  border-radius:  9999px !important;
  padding:        0.3125rem 0.875rem !important;
  cursor:         pointer !important;
  white-space:    nowrap !important;
  flex-shrink:    0 !important;
  transition:     background 0.15s ease, border-color 0.15s ease !important;
  line-height:    1 !important;
}
#ctp-toast-root .ctp-toast__cart-btn:hover {
  background:   rgba(16,185,129,0.22) !important;
  border-color: rgba(16,185,129,0.5) !important;
}

/* ── Botón cerrar ─────────────────────────────────────────── */
#ctp-toast-root .ctp-toast__close {
  flex-shrink:     0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           28px !important;
  height:          28px !important;
  border-radius:   50% !important;
  background:      transparent !important;
  border:          none !important;
  color:           rgba(255,255,255,0.35) !important;
  cursor:          pointer !important;
  transition:      color 0.15s ease, background 0.15s ease !important;
  margin-left:     0.25rem !important;
}
#ctp-toast-root .ctp-toast__close:hover {
  color:      rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* ── Barra de progreso ────────────────────────────────────── */
#ctp-toast-root .ctp-toast__progress {
  position:        absolute !important;
  bottom:          0 !important;
  left:            0 !important;
  height:          2px !important;
  width:           100% !important;
  background:      #10B981 !important;
  transform-origin: left center !important;
  transform:       scaleX(1) !important;
}
#ctp-toast-root .ctp-toast--error  .ctp-toast__progress { background: #EF4444 !important; }
#ctp-toast-root .ctp-toast--notice .ctp-toast__progress { background: #71717A !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  #ctp-toast-root {
    width:       calc(100vw - 2rem) !important;
    top:         0.75rem !important;
  }
}