
/* v2.6 · Notificaciones superpuestas inspiradas en Sileo, adaptadas sin React ni dependencias externas. */
.toast-region.emtel-toast-region {
  position: fixed;
  top: 18px;
  right: 18px;
  bottom: auto;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}
.emtel-toast {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr 28px;
  gap: 10px;
  align-items: start;
  overflow: hidden;
  padding: 12px 12px 12px 12px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(255, 255, 255, .94);
  color: #0f172a;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .16), 0 8px 22px rgba(15, 23, 42, .08);
  backdrop-filter: blur(16px);
  pointer-events: auto;
  animation: emtelToastIn .28s cubic-bezier(.2,.85,.2,1.15) both;
}
.emtel-toast__glow {
  position: absolute;
  inset: auto auto -38px -28px;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--toast-accent, #2563eb), transparent 64%);
  opacity: .16;
  pointer-events: none;
}
.emtel-toast__icon {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--toast-accent, #2563eb);
  background: color-mix(in srgb, var(--toast-accent, #2563eb) 10%, white);
  border: 1px solid color-mix(in srgb, var(--toast-accent, #2563eb) 18%, white);
}
.emtel-toast__body { min-width: 0; display: grid; gap: 3px; }
.emtel-toast__body strong { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; }
.emtel-toast__body p { margin: 0; color: #475569; line-height: 1.35; font-size: .84rem; }
.emtel-toast__details { margin: 6px 0 0; padding-left: 16px; color: #475569; font-size: .8rem; line-height: 1.35; }
.emtel-toast__action {
  justify-self: start;
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--toast-accent, #2563eb) 20%, #cbd5e1);
  border-radius: 999px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--toast-accent, #2563eb) 8%, white);
  color: var(--toast-accent, #2563eb);
  font-weight: 700;
  cursor: pointer;
}
.emtel-toast__close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #64748b;
  border-radius: 999px;
  cursor: pointer;
}
.emtel-toast__close:hover { background: #f1f5f9; color: #0f172a; }
.emtel-toast-success { --toast-accent: #16a34a; }
.emtel-toast-warning { --toast-accent: #f59e0b; }
.emtel-toast-error { --toast-accent: #dc2626; }
.emtel-toast-info, .emtel-toast-default { --toast-accent: #2563eb; }
.emtel-toast.is-leaving { animation: emtelToastOut .18s ease-in both; }
@keyframes emtelToastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes emtelToastOut { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (max-width: 720px) {
  .toast-region.emtel-toast-region { top: 10px; right: 10px; width: calc(100vw - 20px); }
}
