/* NOTIFICACIÓN */

.notif{
position:fixed; /* 👈 clave */

/* centrado */
left:50%;
transform:translateX(-50%);

/* posición inicial (fuera de pantalla) */
top:-100px;

width:90%;
max-width:320px;

/* glass effect */
background:rgba(30, 30, 30, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

color:white;
border-radius:25px;
padding:12px 14px;
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
border:1px solid rgba(255,255,255,0.15);

opacity:0;
pointer-events:none;
transition:all 0.5s cubic-bezier(0.22, 1, 0.36, 1);

/* 👇 importante para que esté encima de TODO */
z-index:1000;
}

/* cuando aparece */
.notif.show{
top:40px;
opacity:1;
pointer-events:auto;
}

/* avatar */
.notif-avatar{
width:50px;
height:50px;
border-radius:50%;
object-fit:cover;
}

/* punto verde */
.notif-online{
position:absolute;
left:48px;
top:51px;
width:12px;
height:12px;
background:#00e676;
border-radius:50%;
}

/* contenido */
.notif-content{
flex:1;
}

/* nombre */
.notif-name{
font-weight:500;
font-size:15px;
display:flex;
align-items:center;
gap:5px;
}

/* verificado */
.notif-verified{
width:14px;
}

/* texto */
.notif-text{
font-size:13px;
color:#ccc;
margin-top:2px;
}

/* flecha */
.notif-arrow{
width:10px;
opacity:0.8;
}