/* Toast / Notification styles extracted for global reuse */
:root { --toast-gap: 10px; }

.notification {
    position: fixed;
    top: var(--toast-top, 100px);
    background: var(--toast-bg, var(--glass-bg, rgba(15, 23, 42, 0.9)));
    border: 1px solid transparent;
    border-radius: var(--radius-md, 12px);
    padding: 14px 18px;
    color: var(--toast-fg, #fff);
    font-weight: 500;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-toast, var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.25)));
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: min(92vw, 400px);
    overflow: hidden;
    will-change: transform, opacity;
    transform-origin: right center;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Anclajes seguros a los lados con safe-area */
.notification.at-right { right: var(--toast-gap, 10px); left: auto; }
.notification.at-left { left: var(--toast-gap, 10px); right: auto; }

/* Fondos degradados por tipo (rojo, verde, amarillo, azul) */
.notification-success { background: var(--toast-success, linear-gradient(135deg, rgba(34,197,94,0.95), rgba(21,128,61,0.95))); color: var(--toast-success-fg, var(--toast-fg, #fff)); }
.notification-error { background: var(--toast-error, linear-gradient(135deg, rgba(239,68,68,0.95), rgba(185,28,28,0.95))); color: var(--toast-error-fg, var(--toast-fg, #fff)); }
.notification-warning { background: var(--toast-warning, linear-gradient(135deg, rgba(250,204,21,0.98), rgba(217,119,6,0.98))); color: var(--toast-warning-fg, #1b1b1b); }
.notification-info { background: var(--toast-info, linear-gradient(135deg, rgba(59,130,246,0.95), rgba(29,78,216,0.95))); color: var(--toast-info-fg, var(--toast-fg, #fff)); }

/* Borde con ondas y colores que tiemblan (rojo→verde→azul→amarillo) */
.notification::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    padding: 2px;
    background: conic-gradient(
        from 0deg,
        #ef4444,
        #22c55e,
        #3b82f6,
        #f59e0b,
        #ef4444
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: borderWave 1.2s ease-out forwards, borderSpin 2.2s linear infinite;
}

@keyframes borderWave {
    0% { opacity: 1; filter: saturate(1.3) blur(0.5px); }
    50% { opacity: 0.75; filter: saturate(1.1) blur(0.3px); }
    100% { opacity: 0.55; filter: saturate(0.9) blur(0.2px); }
}

@keyframes borderSpin { to { transform: rotate(1turn); } }

/* Timeline/progress de 1.5s máximo */
.notification .notification-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0.45));
    animation: notificationProgress 1.5s linear forwards;
}

@keyframes notificationProgress {
    from { width: 0%; }
    to { width: 100%; }
}

.notification i { font-size: 30px; opacity: 0.95; text-shadow: var(--toast-icon-shadow, 0 1px 2px rgba(0,0,0,0.4)); }
.notification .icon-wrap { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--toast-icon-bg, radial-gradient(ellipse at 30% 30%, rgba(0,0,0,0.7), rgba(0,0,0,0.25) 70%));
    border: 2px solid var(--toast-icon-border, rgba(255,255,255,0.22));
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.08), 0 6px 14px rgba(0,0,0,0.25);
    position: relative;
}

/* Halo de borde iluminado: más intenso junto al borde, menor hacia afuera */
.notification .icon-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 0 2px currentColor,
        0 0 10px currentColor,
        0 0 18px currentColor,
        0 0 28px rgba(0,0,0,0.15);
    opacity: 0.85;
}
.notification .icon-wrap.icon-wow { animation: iconZoomRotate 0.85s cubic-bezier(.22,1.24,.28,1) both; will-change: transform; }
.notification-success i { color: #28a745; }
.notification-error i { color: #dc3545; }
.notification-warning i { color: #ffc107; }
.notification-info i { color: #17a2b8; }

/* Efectos */
@keyframes toastShake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

.notification.is-shaking {
    animation: toastShake 0.35s ease-in-out;
}

/* Vibración del icono (interrogante, ok, stop, etc.) */
@keyframes iconVibrate { 
    0%, 100% { transform: translate3d(0,0,0); }
    15% { transform: translate3d(-1.5px,0,0); }
    30% { transform: translate3d(1.5px,0,0); }
    45% { transform: translate3d(-1px,0,0); }
    60% { transform: translate3d(1px,0,0); }
    75% { transform: translate3d(-0.5px,0,0); }
}
.notification i.icon-vibrate { animation: iconVibrate 0.55s ease-in-out both; will-change: transform; }

/* Rotación + Zoom (envolvente del icono) */
@keyframes iconZoomRotate {
    0% { transform: perspective(400px) translateZ(0) scale(0.7) rotate(-22deg); filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25)); }
    45% { transform: perspective(400px) translateZ(8px) scale(1.25) rotate(12deg); }
    70% { transform: perspective(400px) translateZ(4px) scale(0.96) rotate(-6deg); }
    100% { transform: perspective(400px) translateZ(0) scale(1) rotate(0); }
}

/* Bounce espectacular desde la derecha/izquierda */
@keyframes toastBounceInRight {
    0% { transform: translateX(120%) scale(0.98); opacity: 0; }
    60% { transform: translateX(-10px) scale(1.02); opacity: 1; }
    80% { transform: translateX(5px) scale(1); }
    100% { transform: translateX(0) scale(1); }
}
@keyframes toastBounceInLeft {
    0% { transform: translateX(-120%) scale(0.98); opacity: 0; }
    60% { transform: translateX(10px) scale(1.02); opacity: 1; }
    80% { transform: translateX(-5px) scale(1); }
    100% { transform: translateX(0) scale(1); }
}
@keyframes toastRetractOutRight {
    0% { transform: translateX(0); opacity: 1; }
    20% { transform: translateX(6px); }
    100% { transform: translateX(130%); opacity: 0; }
}
@keyframes toastRetractOutLeft {
    0% { transform: translateX(0); opacity: 1; }
    20% { transform: translateX(-6px); }
    100% { transform: translateX(-130%); opacity: 0; }
}

.notification.is-entering.from-right { animation: toastBounceInRight 0.7s cubic-bezier(.22,1.24,.28,1) both; }
.notification.is-entering.from-left { animation: toastBounceInLeft 0.7s cubic-bezier(.22,1.24,.28,1) both; }
.notification.is-exiting.from-right { animation: toastRetractOutRight 0.35s ease both; }
.notification.is-exiting.from-left { animation: toastRetractOutLeft 0.35s ease both; }

@media (max-width: 768px) {
	.notification {
		right: var(--toast-gap, 10px);
		left: var(--toast-gap, 10px);
		min-width: auto;
		max-width: none;
	}
}