/* CNEC Bolsas - Alertas profissionais */

#cnec-toast-stack{
  position:fixed;
  right:24px;
  top:96px;
  z-index:99999;
  width:min(390px,calc(100vw - 32px));
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.cnec-toast{
  --accent:#0b5ed7;

  position:relative;
  display:grid;
  grid-template-columns:40px 1fr 28px;
  gap:12px;
  align-items:start;

  background:#fff;
  border:1px solid #e2e8f1;
  border-left:4px solid var(--accent);
  border-radius:14px;

  padding:14px 12px;
  box-shadow:0 18px 42px rgba(15,43,81,.16);

  opacity:0;
  transform:translateX(28px) scale(.985);

  animation:cnecToastIn .28s cubic-bezier(.16,1,.3,1) forwards;

  pointer-events:auto;
  overflow:hidden;
}

.cnec-toast--success{ --accent:#18864b; }
.cnec-toast--warning{ --accent:#d18a00; }
.cnec-toast--error{ --accent:#d13d4e; }
.cnec-toast--info{ --accent:#0b5ed7; }

.cnec-toast__icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-weight:800;
  font-size:18px;
}

.cnec-toast--success .cnec-toast__icon{
  background:#eaf8ef;
  color:#18864b;
}

.cnec-toast--warning .cnec-toast__icon{
  background:#fff5df;
  color:#b87300;
}

.cnec-toast--error .cnec-toast__icon{
  background:#fff0f2;
  color:#c83547;
}

.cnec-toast--info .cnec-toast__icon{
  background:#edf5ff;
  color:#0b5ed7;
}

.cnec-toast__title{
  display:block;
  color:#152c50;
  font-size:14px;
  font-weight:800;
  margin:1px 0 4px;
}

.cnec-toast__message{
  margin:0;
  color:#64748c;
  font-size:13px;
  line-height:1.45;
}

.cnec-toast__close{
  border:0;
  background:transparent;
  color:#7e8a9b;
  width:28px;
  height:28px;
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
}

.cnec-toast__close:hover{
  background:#f2f5f9;
}

.cnec-toast::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:3px;
  background:var(--accent);
  transform-origin:left;
  animation:cnecToastProgress 4.5s linear forwards;
}

.cnec-toast.is-leaving{
  animation:cnecToastOut .2s ease forwards;
}

@keyframes cnecToastIn{
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes cnecToastOut{
  to{
    opacity:0;
    transform:translateX(22px) scale(.98);
  }
}

@keyframes cnecToastProgress{
  to{transform:scaleX(0);}
}

@media(max-width:600px){
  #cnec-toast-stack{
    top:82px;
    right:16px;
    left:16px;
    width:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .cnec-toast,
  .cnec-toast::after{
    animation:none !important;
  }

  .cnec-toast{
    opacity:1;
    transform:none;
  }
}