/*
|--------------------------------------------------------------------------
| Centro de notificaciones RedGK V1
|--------------------------------------------------------------------------
*/

.rgk-notification-trigger{
    position:relative;
    display:inline-flex !important;
    min-height:38px;
    padding:7px 10px !important;
    align-items:center;
    gap:7px;
    border:1px solid transparent;
    border-radius:12px;
    color:inherit;
    text-decoration:none;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.rgk-notification-trigger:hover,
.rgk-notification-trigger[aria-expanded="true"]{
    border-color:rgba(142,118,255,.28);
    background:rgba(126,93,255,.10);
}

.rgk-notification-trigger.is-ringing{
    animation:rgkNotificationRing .65s ease;
}

.rgk-notification-trigger-icon{
    position:relative;
    display:grid;
    width:25px;
    height:25px;
    place-items:center;
    border-radius:9px;
    background:rgba(255,255,255,.05);
    font-size:15px;
}

.rgk-notification-trigger-label{
    font:inherit;
}

.rgk-notification-trigger
.v8-nav-badge{
    position:static;
    display:inline-grid;
    min-width:20px;
    height:20px;
    padding:0 5px;
    place-items:center;
    border-radius:999px;
}

.rgk-notification-trigger
.v8-nav-badge[hidden]{
    display:none !important;
}

.rgk-notification-overlay{
    position:fixed;
    inset:0;
    z-index:10055;
    background:rgba(2,6,19,.46);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
}

.rgk-notification-overlay.is-open{
    opacity:1;
    pointer-events:auto;
}

.rgk-notification-panel{
    position:fixed;
    z-index:10060;
    top:68px;
    right:18px;
    display:flex;
    width:min(410px,calc(100vw - 32px));
    max-height:min(690px,calc(100vh - 88px));
    overflow:hidden;
    flex-direction:column;
    border:1px solid rgba(154,169,220,.25);
    border-radius:22px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(121,87,255,.15),
            transparent 18rem
        ),
        rgba(9,17,43,.985);
    box-shadow:
        0 28px 100px rgba(0,0,0,.55);
    color:#f7f8ff;
    opacity:0;
    transform:
        translateY(-8px)
        scale(.98);
    pointer-events:none;
    transition:
        opacity .2s ease,
        transform .2s ease;
    font-family:
        Poppins,
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
    backdrop-filter:blur(18px);
}

.rgk-notification-panel.is-open{
    opacity:1;
    transform:
        translateY(0)
        scale(1);
    pointer-events:auto;
}

.rgk-notification-header{
    display:flex;
    padding:18px 18px 13px;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid rgba(154,169,220,.15);
}

.rgk-notification-heading{
    min-width:0;
}

.rgk-notification-eyebrow{
    display:block;
    margin-bottom:3px;
    color:#f0c65e;
    font-size:10px;
    font-weight:900;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.rgk-notification-title{
    margin:0;
    color:#fff;
    font-size:1.22rem;
    line-height:1.15;
}

.rgk-notification-close{
    display:grid;
    width:38px;
    height:38px;
    flex:0 0 38px;
    place-items:center;
    border:1px solid rgba(154,169,220,.2);
    border-radius:12px;
    background:rgba(255,255,255,.035);
    color:#fff;
    font:inherit;
    font-size:20px;
    cursor:pointer;
}

.rgk-notification-toolbar{
    display:flex;
    padding:11px 14px;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid rgba(154,169,220,.12);
}

.rgk-notification-tabs{
    display:flex;
    gap:6px;
}

.rgk-notification-tab{
    min-height:34px;
    padding:7px 11px;
    border:1px solid rgba(154,169,220,.18);
    border-radius:999px;
    background:rgba(255,255,255,.025);
    color:#c8d0e5;
    font:inherit;
    font-size:11px;
    font-weight:850;
    cursor:pointer;
}

.rgk-notification-tab.is-active{
    border-color:rgba(130,95,255,.42);
    background:rgba(126,91,255,.20);
    color:#fff;
}

.rgk-notification-mark-all{
    border:0;
    background:transparent;
    color:#bcaeff;
    font:inherit;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.rgk-notification-mark-all:disabled{
    opacity:.45;
    cursor:default;
}

.rgk-notification-list{
    min-height:180px;
    overflow:auto;
    overscroll-behavior:contain;
}

.rgk-notification-list::-webkit-scrollbar{
    width:8px;
}

.rgk-notification-list::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(154,169,220,.22);
}

.rgk-notification-item{
    position:relative;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:12px;
    padding:14px 17px;
    border-bottom:1px solid rgba(154,169,220,.10);
    color:inherit;
    text-decoration:none;
    transition:
        background .18s ease,
        transform .18s ease;
}

.rgk-notification-item:hover{
    background:rgba(126,91,255,.075);
}

.rgk-notification-item.is-unread{
    background:
        linear-gradient(
            90deg,
            rgba(126,91,255,.12),
            rgba(101,220,186,.035)
        );
}

.rgk-notification-item.is-unread::after{
    content:"";
    position:absolute;
    top:20px;
    right:13px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#7561ff;
    box-shadow:0 0 13px rgba(117,97,255,.75);
}

.rgk-notification-icon{
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.045);
    font-size:19px;
}

.rgk-notification-item[data-category="cita"]
.rgk-notification-icon{
    background:rgba(229,189,104,.12);
}

.rgk-notification-item[data-category="ticket"]
.rgk-notification-icon{
    background:rgba(119,90,255,.15);
}

.rgk-notification-item[data-category="bitacora"]
.rgk-notification-icon{
    background:rgba(94,218,180,.12);
}

.rgk-notification-copy{
    min-width:0;
    padding-right:10px;
}

.rgk-notification-item-title{
    display:block;
    margin-bottom:4px;
    color:#fff;
    font-size:12.5px;
    font-weight:900;
    line-height:1.35;
}

.rgk-notification-item-message{
    display:-webkit-box;
    margin:0;
    overflow:hidden;
    color:#b7c0d7;
    font-size:11.5px;
    line-height:1.48;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.rgk-notification-time{
    display:block;
    margin-top:7px;
    color:#7885a7;
    font-size:10.5px;
    font-weight:750;
}

.rgk-notification-state{
    display:grid;
    min-height:210px;
    padding:28px;
    place-items:center;
    text-align:center;
    color:#aeb8d0;
}

.rgk-notification-state strong{
    display:block;
    margin-bottom:6px;
    color:#fff;
}

.rgk-notification-footer{
    padding:13px;
    border-top:1px solid rgba(154,169,220,.14);
}

.rgk-notification-see-all{
    display:flex;
    min-height:42px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(126,91,255,.34);
    border-radius:12px;
    background:
        linear-gradient(
            135deg,
            rgba(109,83,245,.20),
            rgba(143,108,255,.12)
        );
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:900;
}

.rgk-notification-toast{
    position:fixed;
    z-index:10070;
    right:18px;
    bottom:18px;
    width:min(360px,calc(100vw - 32px));
    padding:14px 16px;
    border:1px solid rgba(105,220,184,.30);
    border-radius:15px;
    background:#10273a;
    color:#fff;
    box-shadow:0 20px 60px rgba(0,0,0,.42);
    font-family:
        Poppins,
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
    font-size:12px;
}

.rgk-notification-toast[hidden]{
    display:none;
}

@keyframes rgkNotificationRing{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(-5deg)}
    55%{transform:rotate(5deg)}
}

@media(max-width:720px){
    body.rgk-notification-open{
        overflow:hidden;
    }

    .rgk-notification-trigger-label{
        display:none;
    }

    .rgk-notification-trigger{
        min-width:42px;
        justify-content:center;
    }

    .rgk-notification-overlay{
        background:rgba(2,6,19,.70);
    }

    .rgk-notification-panel{
        inset:0;
        top:0;
        right:0;
        width:100%;
        max-height:none;
        border:0;
        border-radius:0;
        transform:translateX(100%);
    }

    .rgk-notification-panel.is-open{
        transform:translateX(0);
    }

    .rgk-notification-header{
        padding:
            max(18px,env(safe-area-inset-top))
            17px
            14px;
    }

    .rgk-notification-list{
        flex:1 1 auto;
    }

    .rgk-notification-item{
        padding:15px 16px;
    }

    .rgk-notification-footer{
        padding:
            12px
            14px
            max(12px,env(safe-area-inset-bottom));
    }

    .rgk-notification-toast{
        right:12px;
        bottom:
            max(12px,env(safe-area-inset-bottom));
    }
}

@media(prefers-reduced-motion:reduce){
    .rgk-notification-panel,
    .rgk-notification-overlay,
    .rgk-notification-trigger,
    .rgk-notification-item{
        transition:none;
    }

    .rgk-notification-trigger.is-ringing{
        animation:none;
    }
}