/**
 * Cántico de Fe Music
 * Toast Engine
 *
 * Dark Visual Design System
 */

/* ==========================================================
   Container
   ========================================================== */

.cantico-toast-container {
  position:
    fixed;

  top:
    24px;

  right:
    24px;

  z-index:
    10000;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  pointer-events:
    none;
}

/* ==========================================================
   Toast Base
   ========================================================== */

.cantico-toast {
  position:
    relative;

  min-width:
    320px;

  max-width:
    420px;

  padding:
    16px
    18px;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      var(--color-surface-elevated),
      var(--color-background-secondary)
    );

  color:
    var(--color-text);

  box-shadow:
    var(--shadow-lg);

  animation:
    cantico-toast-enter
    0.25s
    ease;

  pointer-events:
    auto;
}

/* ==========================================================
   Title
   ========================================================== */

.cantico-toast__title {
  margin:
    0 0
    6px;

  color:
    var(--color-text);

  font-size:
    16px;

  font-weight:
    var(--font-weight-bold);

  line-height:
    1.3;
}

/* ==========================================================
   Message
   ========================================================== */

.cantico-toast__message {
  margin:
    0;

  color:
    var(--color-text-secondary);

  font-size:
    15px;

  line-height:
    1.5;
}

/* ==========================================================
   Success
   ========================================================== */

.cantico-toast--success {
  border-left:
    6px solid
    #2fbf71;

  box-shadow:
    var(--shadow-lg),
    inset 4px 0 18px
    rgba(47, 191, 113, 0.06);
}

.cantico-toast--success
.cantico-toast__title {
  color:
    #74dfa2;
}

/* ==========================================================
   Error
   ========================================================== */

.cantico-toast--error {
  border-left:
    6px solid
    #e45858;

  box-shadow:
    var(--shadow-lg),
    inset 4px 0 18px
    rgba(228, 88, 88, 0.06);
}

.cantico-toast--error
.cantico-toast__title {
  color:
    #ff9d9d;
}

/* ==========================================================
   Warning
   ========================================================== */

.cantico-toast--warning {
  border-left:
    6px solid
    var(--color-primary);

  box-shadow:
    var(--shadow-lg),
    inset 4px 0 18px
    rgba(244, 208, 111, 0.06);
}

.cantico-toast--warning
.cantico-toast__title {
  color:
    var(--color-primary);
}

/* ==========================================================
   Info
   ========================================================== */

.cantico-toast--info {
  border-left:
    6px solid
    #3c8ed9;

  box-shadow:
    var(--shadow-lg),
    inset 4px 0 18px
    rgba(60, 142, 217, 0.06);
}

.cantico-toast--info
.cantico-toast__title {
  color:
    #8fc7f4;
}

/* ==========================================================
   Animation
   ========================================================== */

@keyframes cantico-toast-enter {
  from {
    opacity:
      0;

    transform:
      translateX(40px);
  }

  to {
    opacity:
      1;

    transform:
      translateX(0);
  }
}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 520px) {
  .cantico-toast-container {
    top:
      16px;

    right:
      16px;

    left:
      16px;
  }

  .cantico-toast {
    width:
      100%;

    min-width:
      0;

    max-width:
      none;
  }
}

/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .cantico-toast {
    animation:
      none;
  }
}