/* ==========================================================
   CENTRO DE NOTIFICACIONES — REPORTES ASEP
========================================================== */

.notification-count{
    position:absolute;
    top:2px;
    right:0;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:var(--color-primary);
    color:#fff;
    border:2px solid var(--bg-navbar);
    font-size:.62rem;
    font-weight:800;
    line-height:1;
    z-index:3;
}

.notification-dot{ display:none !important; }
.notification-count[hidden]{ display:none !important; }

.notification-panel{
    position:absolute;
    top:calc(100% + .65rem);
    right:6.7rem;
    width:min(420px, calc(100vw - 2rem));
    max-height:min(620px, calc(100vh - 7rem));
    overflow:hidden;
    border:1px solid var(--border-light);
    border-radius:18px;
    background:var(--bg-card);
    box-shadow:var(--shadow-lg);
    z-index:2147483000 !important;
}

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

.notification-panel-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.1rem .9rem;
    border-bottom:1px solid var(--border-light);
    background:var(--bg-surface);
}

.notification-panel-header > div{
    display:flex;
    flex-direction:column;
    gap:.2rem;
    min-width:0;
}

.notification-panel-header strong{
    color:var(--color-heading);
    font-size:.96rem;
}

.notification-panel-header span{
    color:var(--color-text-muted);
    font-size:.76rem;
}

.notification-mark-all{
    border:0;
    padding:.4rem .55rem;
    border-radius:8px;
    background:transparent;
    color:var(--color-primary);
    font-size:.72rem;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
}

.notification-mark-all:hover{
    background:var(--color-primary-soft);
}

.notification-list{
    max-height:520px;
    overflow:auto;
}

.notification-item{
    position:relative;
    width:100%;
    display:grid;
    grid-template-columns:38px 1fr auto;
    gap:.8rem;
    align-items:start;
    padding:1rem 1.05rem;
    border:0;
    border-bottom:1px solid var(--border-light);
    background:transparent;
    text-align:left;
    color:var(--color-text);
    cursor:pointer;
    transition:background var(--transition-fast);
}

.notification-item:hover{
    background:var(--bg-hover);
}

.notification-item.is-unread{
    background:color-mix(in srgb, var(--color-primary) 5%, var(--bg-card));
}

.notification-item-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:1rem;
}

.notification-item-content{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:.25rem;
}

.notification-item-content strong{
    color:var(--color-heading);
    font-size:.84rem;
    line-height:1.25;
}

.notification-item-content span{
    color:var(--color-text-secondary);
    font-size:.76rem;
    line-height:1.4;
}

.notification-item-content small{
    color:var(--color-text-muted);
    font-size:.67rem;
}

.notification-unread-dot{
    width:8px;
    height:8px;
    margin-top:.35rem;
    border-radius:50%;
    background:var(--color-primary);
    box-shadow:0 0 0 4px var(--color-primary-soft);
}

.notification-empty{
    min-height:220px;
    padding:2rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    text-align:center;
}

.notification-empty i{
    font-size:1.6rem;
    color:var(--color-text-muted);
    margin-bottom:.25rem;
}

.notification-empty strong{
    color:var(--color-heading);
    font-size:.88rem;
}

.notification-empty span{
    max-width:250px;
    color:var(--color-text-muted);
    font-size:.74rem;
    line-height:1.45;
}

@media (max-width: 768px){
    .notification-panel{
        right:.75rem;
        width:min(420px, calc(100vw - 1.5rem));
    }
}


/* ==========================================================
   PANEL OVERLAY / CENTRO / GUÍA INICIAL
   Estas reglas son globales porque la guía puede abrirse
   desde cualquier pantalla del dashboard.
========================================================== */

.notification-panel{
    position:fixed !important;
    top:100px;
    right:18px;
    width:min(420px,calc(100vw - 24px));
    max-height:min(620px,calc(100vh - 118px));
    isolation:isolate;
}

.notification-panel-header-actions{
    display:flex;
    align-items:center;
    gap:.25rem;
}

.notification-view-all{
    padding:.38rem .5rem;
    border-radius:8px;
    color:var(--color-primary);
    text-decoration:none;
    font-size:.72rem;
    font-weight:800;
}

.notification-view-all:hover{
    background:var(--color-primary-soft);
}

.notification-empty-link{
    margin-top:.45rem;
    color:var(--color-primary);
    font-size:.72rem;
    font-weight:700;
    text-decoration:none;
}

.notification-onboarding{
    position:fixed;
    inset:0;
    z-index:2147483640;
    display:grid;
    place-items:center;
    padding:1.25rem;
}

.notification-onboarding-backdrop{
    position:absolute;
    inset:0;
    background:rgba(3,10,22,.64);
    backdrop-filter:blur(4px);
}

.notification-onboarding-dialog{
    position:relative;
    width:min(760px,100%);
    max-height:min(86vh,820px);
    overflow:auto;
    border:1px solid var(--border-light);
    border-radius:24px;
    background:var(--bg-card);
    color:var(--color-text);
    box-shadow:0 30px 80px rgba(0,0,0,.28);
    padding:1.25rem;
}

.notification-onboarding-head{
    display:grid;
    grid-template-columns:54px 1fr auto;
    gap:.8rem;
    align-items:start;
}

.notification-onboarding-icon{
    width:54px;
    height:54px;
    flex:0 0 54px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:1.2rem;
}

.notification-onboarding-eyebrow{
    display:block;
    color:var(--color-primary);
    font-size:.68rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.notification-onboarding-head h2{
    margin:.25rem 0 0;
    color:var(--color-heading);
    font-size:1.25rem;
}

.notification-onboarding-intro{
    margin:1rem 0;
    color:var(--color-text-secondary);
    font-size:.82rem;
    line-height:1.55;
}

.notification-guide-close{
    border:0;
    background:transparent;
    color:var(--color-text-muted);
    font-size:1rem;
    cursor:pointer;
}

.notification-guide-close:hover{color:var(--color-heading);}

.notification-guide-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
}

.notification-guide-item{
    display:flex;
    gap:.75rem;
    padding:.9rem;
    border:1px solid var(--border-light);
    border-radius:14px;
    background:var(--bg-surface);
}

.notification-guide-item-icon{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--color-primary-soft);
    color:var(--color-primary);
}

.notification-guide-item strong{
    display:block;
    color:var(--color-heading);
    font-size:.8rem;
}

.notification-guide-item p{
    margin:.25rem 0 0;
    color:var(--color-text-secondary);
    font-size:.74rem;
    line-height:1.45;
}

.notification-onboarding-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding-top:1rem;
    margin-top:1rem;
    border-top:1px solid var(--border-light);
}

.notification-guide-download,
.notification-guide-full{
    color:var(--color-primary);
    font-size:.74rem;
    font-weight:800;
    text-decoration:none;
}

.notification-guide-full{margin-right:.65rem;}

.notification-guide-confirm{
    border:0;
    border-radius:11px;
    padding:.6rem .8rem;
    background:var(--color-primary);
    color:#fff;
    font-size:.74rem;
    font-weight:800;
    cursor:pointer;
}

.notification-guide-confirm:hover{
    filter:brightness(1.03);
    transform:translateY(-1px);
}

@media(max-width:700px){
    .notification-panel{
        right:12px;
        width:min(420px,calc(100vw - 24px));
    }

    .notification-guide-grid{grid-template-columns:1fr;}

    .notification-onboarding-dialog{padding:1rem;}

    .notification-onboarding-footer{
        align-items:flex-start;
        flex-direction:column;
    }

    .notification-guide-confirm{width:100%;}
}

/* Guía del sistema: registro permanente y siempre disponible. */
.notification-item.is-permanent{
    background: color-mix(in srgb, var(--color-info-soft) 45%, var(--bg-card));
}
.notification-item.is-permanent:hover{
    background: color-mix(in srgb, var(--color-info-soft) 70%, var(--bg-card));
}
.notification-page-item.is-permanent{
    background: color-mix(in srgb, var(--color-info-soft) 35%, var(--bg-card));
}
.notification-page-item.is-permanent:hover{
    background: color-mix(in srgb, var(--color-info-soft) 55%, var(--bg-card));
}
.notification-permanent-label{
    align-self:center;
    white-space:nowrap;
    padding:.28rem .5rem;
    border-radius:999px;
    background:var(--color-info-soft);
    color:var(--color-primary);
    font-size:.64rem;
    font-weight:800;
}
.notification-page-item.is-permanent .notification-open-btn{
    border-color:var(--color-primary-border);
    color:var(--color-primary);
}