/* ==========================================================================
   TOASTR.CSS - SISTEMA DE NOTIFICACIONES FLOTANTES (ESTILO SHADCN / BASE UI)
   ========================================================================== */

:root {
  --toast-viewport-width: 380px;
  --toast-gap: 0.75rem;
  --toast-peek: 0.85rem;
  --toast-border-radius: 1rem;
}

/* 1. Viewport / Portal Container (Fixed at Bottom-Right / Bottom Center on Mobile) */
[data-slot="toast-viewport"],
.toastr-viewport {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9999;
  width: 100%;
  max-width: var(--toast-viewport-width);
  margin: 0;
  pointer-events: none;
  outline: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

@media (max-width: 576px) {
  [data-slot="toast-viewport"],
  .toastr-viewport {
    right: 0.75rem;
    left: 0.75rem;
    bottom: 0.75rem;
    max-width: calc(100% - 1.5rem);
    align-items: center;
  }
}

/* 2. Toast Item (Base UI / Shadcn Stack Physics) */
[data-slot="toast"],
.toastr-item {
  pointer-events: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: var(--toast-viewport-width);
  transform-origin: bottom center;
  background-color: var(--bs-card-bg, #ffffff);
  color: var(--bs-body-color, #0f172a);
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-radius: var(--toast-border-radius);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  user-select: none;
  outline: none;
  will-change: transform, opacity, height;
  touch-action: pan-y;
  box-sizing: border-box;

  /* Stacking Variables */
  --toast-scale: calc(max(0, 1 - (var(--toast-index, 0) * 0.05)));
  --toast-shrink: calc(1 - var(--toast-scale));
  --toast-peek-offset: calc(var(--toast-index, 0) * var(--toast-peek));
  --toast-stack-y: calc((var(--toast-peek-offset) * -1) - (var(--toast-shrink) * var(--toast-height, 60px)) + var(--toast-swipe-movement-y, 0px));
  --toast-expanded-y: calc(var(--toast-offset-y, 0px) * -1 + var(--toast-swipe-movement-y, 0px));

  /* Collapsed (Stacked) State */
  transform: translateX(var(--toast-swipe-movement-x, 0px)) translateY(var(--toast-stack-y)) scale(var(--toast-scale));
  z-index: calc(1000 - var(--toast-index, 0));
  opacity: calc(max(0, 1 - (var(--toast-index, 0) * 0.18)));
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 350ms cubic-bezier(0.22, 1, 0.36, 1),
              height 200ms ease,
              box-shadow 300ms ease;
}

/* Toasts deep in stack (> 3) are hidden */
[data-slot="toast"][data-limited="true"],
.toastr-item[data-limited="true"] {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hover / Focus Expanded State */
[data-slot="toast-viewport"][data-expanded="true"] [data-slot="toast"],
.toastr-viewport[data-expanded="true"] .toastr-item {
  transform: translateX(var(--toast-swipe-movement-x, 0px)) translateY(var(--toast-expanded-y)) scale(1);
  opacity: 1 !important;
}

/* Hover bridge: allows continuous mouse movement between stacked toasts without un-hovering */
[data-slot="toast"]::after,
.toastr-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(var(--toast-gap) + 4px);
  pointer-events: auto;
}

/* 3. Entering & Exiting Animations */
[data-slot="toast"][data-state="entering"],
.toastr-item.toastr-entering {
  animation: toastr-shadcn-enter 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

[data-slot="toast"][data-state="leaving"],
.toastr-item.toastr-leaving {
  animation: toastr-shadcn-exit 250ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  pointer-events: none !important;
}

[data-slot="toast"][data-state="swiping"],
.toastr-item.toastr-swiping {
  transition: none !important;
}

@keyframes toastr-shadcn-enter {
  from {
    transform: translateY(120%) scale(0.92);
    opacity: 0;
  }
  to {
    transform: translateX(var(--toast-swipe-movement-x, 0px)) translateY(var(--toast-stack-y)) scale(var(--toast-scale));
    opacity: 1;
  }
}

@keyframes toastr-shadcn-exit {
  from {
    transform: translateX(var(--toast-swipe-movement-x, 0px)) translateY(var(--toast-stack-y)) scale(var(--toast-scale));
    opacity: 1;
  }
  to {
    transform: translateY(120%) scale(0.92);
    opacity: 0;
  }
}

/* 4. Toast Content Layout */
[data-slot="toast-content"],
.toastr-content {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  box-sizing: border-box;
}

/* 5. Icons */
[data-slot="toast-icon"],
.toastr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

[data-slot="toast-icon"] svg,
.toastr-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

.toastr-success [data-slot="toast-icon"],
.toastr-success .toastr-icon {
  color: var(--color-primario, #10b981);
}

.toastr-info [data-slot="toast-icon"],
.toastr-info .toastr-icon {
  color: var(--color-primario, #2563eb);
}

.toastr-warning [data-slot="toast-icon"],
.toastr-warning .toastr-icon {
  color: #f59e0b;
}

.toastr-error [data-slot="toast-icon"],
.toastr-danger [data-slot="toast-icon"],
.toastr-error .toastr-icon,
.toastr-danger .toastr-icon {
  color: #ef4444;
}

.toastr-loading [data-slot="toast-icon"],
.toastr-loading .toastr-icon {
  color: #64748b;
}

/* Spinner Keyframes */
@keyframes toastr-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.toastr-spinner {
  animation: toastr-spin 1s linear infinite;
}

/* 6. Typography */
.toastr-body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-right: 1.25rem; /* space for close button */
}

[data-slot="toast-title"],
.toastr-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bs-heading-color, #0f172a);
  margin: 0;
  letter-spacing: -0.01em;
}

[data-slot="toast-description"],
.toastr-description {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--bs-secondary-color, #64748b);
  margin: 0;
}

/* 7. Action Button */
[data-slot="toast-action"],
.toastr-action-btn {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.35rem 0.65rem;
  background-color: var(--bs-tertiary-bg, #f8fafc);
  color: var(--bs-body-color, #1e293b);
  border: 1px solid var(--bs-border-color, #e2e8f0);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

[data-slot="toast-action"]:hover,
.toastr-action-btn:hover {
  background-color: var(--bs-secondary-bg, #f1f5f9);
}

/* 8. Close Button */
[data-slot="toast-close"],
.toastr-close-btn {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  opacity: 0.65;
  transition: color 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

[data-slot="toast-close"]:hover,
.toastr-close-btn:hover {
  opacity: 1;
  color: #334155;
  background-color: rgba(0, 0, 0, 0.05);
}