/*====================================================
DASHBOARD
====================================================*/

.slp-dashboard{
    display:flex;
    min-height:100vh;
    background:#F4F7FB;
}

/*====================================================
MAIN
====================================================*/

.slp-main{
    flex:1;
    margin-left:240px;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    transition:.30s;
}

/*====================================================
HEADER
====================================================*/

.slp-header{

    height:72px;

    background:#FFFFFF;

    border-bottom:1px solid #E5E7EB;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    position:sticky;

    top:0;

    z-index:100;

}

/*====================================================
LEFT
====================================================*/

.slp-header-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.slp-page-title{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:#111827;

}

/*====================================================
RIGHT
====================================================*/

.slp-header-right{

    display:flex;

    align-items:center;

    gap:18px;

}

/*====================================================
BOTONES
====================================================*/

.slp-mobile-menu,
.slp-icon-button{

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:#F3F4F6;

    cursor:pointer;

    font-size:22px;

    transition:.25s;

}

.slp-mobile-menu:hover,
.slp-icon-button:hover{

    background:#E5E7EB;

}

/*====================================================
USUARIO
====================================================*/

.slp-user{

    display:flex;

    align-items:center;

    gap:10px;

}

.slp-user-name{

    font-size:15px;

    font-weight:600;

    color:#111827;

}

/*====================================================
CONTENIDO
====================================================*/

.slp-content{

    flex:1;

    padding:30px;

}

/*====================================================
MÓVIL
====================================================*/

@media (max-width:768px){

    .slp-main{

        margin-left:0;

        width:100%;

    }

    .slp-header{

        padding:0 18px;

    }

    .slp-page-title{

        font-size:18px;

    }

    .slp-content{

        padding:18px;

    }

}

/* ==================================================
   NOTIFICACIONES
================================================== */

.slp-notifications {
    position: relative;
}


/* BOTÓN */

.slp-notifications .slp-icon-button {
    position: relative;
}


/* CONTADOR */

.slp-notifications-badge {

    position: absolute;

    top: -4px;
    right: -4px;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #EF4444;

    color: #FFFFFF;

    border: 2px solid #FFFFFF;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;

    box-sizing: border-box;
}


/* PANEL */

.slp-notifications-panel {

    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 380px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 16px;

    box-shadow:
        0 20px 45px rgba(15,23,42,.15);

    overflow: hidden;

    z-index: 9999;

    display: none;
}


/* PANEL ABIERTO */

.slp-notifications.open .slp-notifications-panel {

    display: block;

}


/* CABECERA */

.slp-notifications-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 20px;

    border-bottom: 1px solid #E2E8F0;

    color: #0F172A;

    font-size: 16px;
}


.slp-notifications-header span {

    min-width: 24px;
    height: 24px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0 6px;

    background: #2563EB;

    color: #FFFFFF;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;
}


/* LISTA */

.slp-notifications-list {

    max-height: 420px;

    overflow-y: auto;
}


/* NOTIFICACIÓN */

.slp-notification-item {

    display: flex;

    gap: 12px;

    padding: 16px 20px;

    text-decoration: none;

    border-bottom: 1px solid #F1F5F9;

    transition: .2s;

}


.slp-notification-item:hover {

    background: #F8FAFC;

}


/* ICONO */

.slp-notification-icon {

    width: 42px;
    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #F1F5F9;

    border-radius: 12px;

    font-size: 20px;

}


/* CONTENIDO */

.slp-notification-content {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

}


.slp-notification-content strong {

    color: #0F172A;

    font-size: 14px;

}


.slp-notification-content span {

    color: #64748B;

    font-size: 13px;

    line-height: 1.4;

}


/* VACÍO */

.slp-notifications-empty {

    padding: 40px 20px;

    text-align: center;

}


.slp-notifications-empty-icon {

    width: 54px;
    height: 54px;

    margin: 0 auto 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #F1F5F9;

    border-radius: 16px;

    font-size: 25px;

}


.slp-notifications-empty strong {

    display: block;

    color: #0F172A;

    font-size: 15px;

}


.slp-notifications-empty p {

    margin: 6px 0 0;

    color: #64748B;

    font-size: 13px;

}


/* MÓVIL */

@media(max-width:768px) {

    .slp-notifications-panel {

        position: fixed;

        top: 75px;

        left: 15px;
        right: 15px;

        width: auto;

    }

}

/* ==================================================
   NOTIFICACIONES
================================================== */

.slp-notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.slp-notifications-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slp-notifications-count {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50px;

    background: #2563EB;
    color: #FFFFFF;

    font-size: 12px;
    font-weight: 700;
}

.slp-mark-all-notifications {
    border: none;

    padding: 7px 10px;

    border-radius: 8px;

    background: transparent;
    color: #2563EB;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}

.slp-mark-all-notifications:hover {
    background: #EFF6FF;
    color: #1D4ED8;
}


/* ==================================================
   NOTIFICACIÓN LEÍDA
================================================== */

.slp-notification-item {
    transition: .2s;
}

.slp-notification-item:hover {
    background: #F8FAFC;
}