.notificaciones-widget{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.notificaciones-boton{
    width:38px;
    height:38px;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.72);
    border-radius:50%;
    background:rgba(255,255,255,.40);
    color:#111;
    cursor:pointer;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:transform .3s cubic-bezier(.22,1,.36,1), background .25s ease;
}

.notificaciones-boton:hover{
    background:rgba(255,255,255,.72);
    transform:translateY(-2px);
}

.notificaciones-icono{
    width:18px;
    height:18px;
    display:block;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.notificaciones-badge{
    min-width:17px;
    height:17px;
    position:absolute;
    top:-5px;
    right:-5px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    border:2px solid #fff;
    border-radius:100px;
    background:#59BEE8;
    color:#071014;
    font:700 8px Arial,sans-serif;
}

.notificaciones-badge[hidden]{display:none}

.botones a[href="mensajes.php"],
.panel-nav a[href="mensajes.php"]{
    position:relative;
    overflow:visible !important;
}

.mensajes-badge{
    min-width:17px;
    height:17px;
    position:absolute;
    top:-3px;
    right:-3px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    border:2px solid #fff;
    border-radius:100px;
    background:#59bee8;
    color:#071014;
    font:700 8px/1 Arial,sans-serif;
    box-shadow:0 3px 9px rgba(7,16,20,.18);
}

.mensajes-badge[hidden]{display:none}

.notificaciones-dialogo{
    width:min(440px, calc(100% - 28px));
    max-height:min(680px, calc(100dvh - 28px));
    margin:auto;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.82);
    border-radius:30px;
    background:rgba(239,250,253,.94);
    color:#111;
    box-shadow:0 28px 80px rgba(7,16,20,.30);
    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);
}

.notificaciones-dialogo::backdrop{
    background:rgba(7,16,20,.28);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.notificaciones-encabezado{
    height:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 24px 17px;
    border-bottom:1px solid rgba(0,0,0,.07);
}

.notificaciones-encabezado p{
    margin:0 0 4px;
    color:rgba(0,0,0,.72);
    font-size:8px;
    font-weight:700;
    letter-spacing:1.8px;
}

.notificaciones-encabezado h2{
    margin:0;
    font-size:25px;
    font-weight:500;
}

.notificaciones-cerrar{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.72);
    color:#111;
    font-size:23px;
    cursor:pointer;
}

.notificaciones-lista{
    max-height:min(560px, calc(100dvh - 125px));
    padding:10px;
    overflow-y:auto;
}

.notificacion-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border-radius:21px;
    color:#111;
    text-decoration:none;
    transition:background .25s ease, transform .25s ease;
}

.notificacion-item:hover{
    background:rgba(255,255,255,.66);
    transform:translateX(2px);
}

.notificacion-item.nueva{background:rgba(89,190,232,.12)}

.botones .notificacion-item::before{
    content:none;
    display:none;
}

.notificacion-avatar{
    width:44px;
    height:44px;
    flex:0 0 44px;
    overflow:hidden;
    border:2px solid rgba(255,255,255,.92);
    border-radius:50%;
    background:#071014;
}

.notificacion-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.notificacion-contenido{min-width:0;flex:1}

.notificacion-contenido p{
    margin:0;
    font-size:11px;
    line-height:1.4;
}

.notificacion-contenido strong{font-weight:700}

.notificacion-detalle{
    display:block;
    overflow:hidden;
    margin-top:3px;
    color:rgba(0,0,0,.68);
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.notificacion-fecha{
    display:block;
    margin-top:4px;
    color:rgba(0,0,0,.68);
    font-size:8px;
}

.notificaciones-estado{
    padding:50px 20px;
    color:rgba(0,0,0,.68);
    font-size:11px;
    text-align:center;
}

.panel-usuario .notificaciones-boton{
    width:32px;
    height:32px;
    border:0;
    background:rgba(255,255,255,.62);
}

.panel-usuario .notificaciones-icono{width:16px;height:16px}

@media (min-width:801px) and (max-width:1000px){
    nav > .acciones-superiores{
        position:absolute;
        top:50%;
        left:22px;
        right:22px;
        z-index:1800;
        display:flex;
        align-items:center;
        justify-content:space-between;
        transform:translateY(-50%);
        pointer-events:none;
    }

    .acciones-superiores > *{pointer-events:auto}

    .notificaciones-widget.notificaciones-superior{
        width:30px;
        min-width:30px;
        position:static;
        transform:none;
    }

    .notificaciones-superior .notificaciones-boton{
        width:30px;
        height:30px;
    }

    .notificaciones-superior .notificaciones-icono{
        width:14px;
        height:14px;
    }

    .acciones-superiores > .menu-avatar-superior{
        width:38px;
        height:38px;
        flex:0 0 38px;
        position:static;
        margin:0;
        overflow:hidden;
        border:1.5px solid rgba(255,255,255,.82);
        border-radius:50%;
        transform:none;
    }
}

@media (max-width:800px){
    nav > .acciones-superiores{
        position:absolute;
        top:50%;
        left:18px;
        right:18px;
        z-index:1800;
        display:flex;
        align-items:center;
        justify-content:space-between;
        transform:translateY(-50%);
        pointer-events:none;
    }

    .acciones-superiores > *{pointer-events:auto}

    .notificaciones-widget.notificaciones-superior{
        width:30px;
        min-width:30px;
        position:static;
        transform:none;
    }

    .notificaciones-superior .notificaciones-boton{
        width:30px;
        height:30px;
        border:1px solid rgba(255,255,255,.72);
        background:rgba(255,255,255,.40);
    }

    .botones a[href="logout.php"]{order:3}
    .botones a.menu-avatar{order:5}

    .notificaciones-superior .notificaciones-icono{width:14px;height:14px}

    .acciones-superiores > .menu-avatar-superior{
        width:34px;
        height:34px;
        flex:0 0 34px;
        position:static;
        margin:0;
        padding:0;
        overflow:hidden;
        border:1.5px solid rgba(255,255,255,.82);
        border-radius:50%;
        transform:none;
    }

    .acciones-superiores > .menu-avatar-superior img{
        width:100%;
        height:100%;
        display:block;
        object-fit:cover;
        border-radius:inherit;
    }

    .notificaciones-dialogo{
        width:calc(100% - 20px);
        max-height:calc(100dvh - 20px);
        border-radius:27px;
    }
}

@media (orientation:landscape) and (min-width:480px) and (max-width:1000px) and (max-height:1024px) and (hover:none) and (pointer:coarse){
    nav > .acciones-superiores{top:50%;right:18px;left:18px;justify-content:space-between;transform:translateY(-50%)}
    .notificaciones-widget.notificaciones-superior{width:28px;min-width:28px;position:static;transform:none}
    .notificaciones-superior .notificaciones-boton{width:28px;height:28px;border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.40)}
    .botones a[href="logout.php"]{order:3}
    .botones a.menu-avatar{order:5}
    .notificaciones-superior .notificaciones-icono{width:13px;height:13px}
    .acciones-superiores > .menu-avatar-superior{width:32px;height:32px;flex-basis:32px;position:static;transform:none}
    .notificaciones-dialogo{width:min(560px, calc(100% - 20px));max-height:calc(100dvh - 16px)}
    .notificaciones-lista{max-height:calc(100dvh - 105px)}
}