/* Navbar notificaciones: dropdown + offcanvas */
.notif-menu-panel {
    border-radius: 0.75rem;
}

.notif-list .list-group-item {
    transition: background-color 0.15s ease;
}

.notif-list .list-group-item:hover {
    background-color: var(--bs-secondary-bg);
}

/**
 * Badge sobre la campana (mismo criterio que .navbar-badge del carrito):
 * anclado a la esquina superior derecha del glifo, no al borde del botón.
 */
.app-header .nav-notif-icon-wrap,
.storefront-navbar .nav-notif-icon-wrap {
    line-height: 0;
    vertical-align: middle;
}

.app-header .nav-notif-icon-wrap .nav-notif-badge,
.storefront-navbar .nav-notif-icon-wrap .nav-notif-badge {
    position: absolute;
    top: -0.2rem;
    right: -0.35rem;
    left: auto;
    transform: none;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.12rem 0.4rem;
    line-height: 1.15;
    min-width: 1.125rem;
    text-align: center;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
}

.app-header .nav-notif-badge:not(.d-none),
.storefront-navbar .nav-notif-badge:not(.d-none) {
    animation: nav-notif-badge-pop 0.35s ease;
}

@keyframes nav-notif-badge-pop {
    0% {
        transform: scale(0.65);
    }
    60% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-header .nav-notif-badge:not(.d-none),
    .storefront-navbar .nav-notif-badge:not(.d-none) {
        animation: none;
    }
}

#notificationsOffcanvas .notif-list {
    max-height: calc(100vh - 8rem);
}

.notif-item-new {
    animation: notif-item-fade-in 0.3s ease;
}

@keyframes notif-item-fade-in {
    from {
        opacity: 0;
        background-color: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.15));
    }
    to {
        opacity: 1;
        background-color: transparent;
    }
}