.barra-superior {
display: flex;
justify-content: flex-end;
position: relative;
margin-bottom: -14px;
}
.campana {
background: var(--panel);
border: 1px solid var(--borde);
border-radius: 999px;
box-shadow: var(--sombra-xs);
padding: 6px 11px;
cursor: pointer;
position: relative;
font-size: 15px;
line-height: 1;
color: var(--texto);
}
.campana:hover { background: var(--panel); border-color: var(--borde-firme); }
.globo {
background: var(--alerta);
color: #fff;
font-size: 11px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
font-style: normal;
}
.campana .globo { position: absolute; top: -6px; right: -6px; }
#globo-lateral { margin-left: 6px; }
.bandeja {
position: absolute;
top: 44px;
right: 0;
width: 356px;
max-width: 92vw;
background: var(--panel);
border: 1px solid var(--borde);
border-radius: var(--radio-lg);
box-shadow: var(--sombra-lg);
z-index: 60;
overflow: hidden;
}
.bandeja-cabecera {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 14px;
border-bottom: 1px solid var(--borde);
background: var(--lienzo);
}
.bandeja-cabecera b { font-size: 14px; }
.bandeja-cabecera button {
background: none;
border: none;
color: var(--campo);
font-size: 12.5px;
cursor: pointer;
font-weight: 600;
}
.bandeja-lista { max-height: 340px; overflow-y: auto; }
.bandeja-vacia { padding: 26px 14px; text-align: center; color: var(--texto-tenue); font-size: 13.5px; }
.bandeja-pie {
display: block;
padding: 10px;
text-align: center;
border-top: 1px solid var(--borde);
font-size: 13px;
text-decoration: none;
color: var(--campo);
font-weight: 600;
}
.bandeja-pie:hover { background: var(--lienzo); }
.notificacion {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 11px 14px;
text-decoration: none;
color: var(--texto);
border-bottom: 1px solid var(--borde);
position: relative;
}
.notificacion:hover { background: var(--lienzo); color: var(--texto); }
.notificacion.pendiente { background: var(--campo-claro); }
.notificacion { border-radius: var(--radio-sm); margin: 2px 6px; }
.notificacion:last-child { border-bottom: none; }
.marca {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 13.5px;
flex-shrink: 0;
background: var(--tinta);
}
.tipo-chat { background: #00a884; }
.tipo-aprobacion { background: #b3800f; }
.tipo-solicitud { background: #3f6b45; }
.tipo-anuncio { background: #1f6feb; }
.tipo-seguridad { background: #9e2f1c; }
.tipo-novedad { background: #6b4fa0; }
.tipo-externo { background: #4a6b3f; }
.tipo-pesv { background: #cc5b00; }
.cuerpo-notificacion { flex: 1; min-width: 0; }
.titulo-notificacion {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.titulo-notificacion b {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.titulo-notificacion time { font-size: 11.5px; color: var(--texto-tenue); flex-shrink: 0; }
.detalle {
display: block;
font-size: 13px;
color: var(--texto-tenue);
margin-top: 2px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.etiqueta-tipo {
display: inline-block;
margin-top: 5px;
font-size: 10.5px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--texto-tenue);
}
.punto-pendiente {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--campo);
flex-shrink: 0;
margin-top: 12px;
}
.lista-notificaciones { display: flex; flex-direction: column; }
@media (max-width: 720px) {
.bandeja { right: -8px; width: 300px; }
}