/* XMARTS LOCAL V98 · Centro de avisos agrupado, sin marcar mensajes como leídos al abrir el panel. */
#notificationPanel.notification-panel{
  display:flex!important;
  flex-direction:column!important;
  width:min(395px,calc(100vw - 25px))!important;
  height:min(515px,calc(100dvh - 92px))!important;
  max-height:calc(100dvh - 92px)!important;
  padding:9px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:rgba(8,27,43,.97)!important;
  border:1px solid #6db9ed47!important;
  border-radius:14px!important;
  box-shadow:0 20px 55px #0009!important;
  backdrop-filter:blur(18px);
}
#notificationPanel[hidden]{display:none!important}
#notificationPanel .notification-head{
  flex:0 0 auto;
  min-height:34px;
  display:flex!important;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  padding:4px 4px 9px!important;
  background:transparent!important;
  border-bottom:1px solid #ffffff18!important;
}
#notificationPanel .notification-head b{font-size:14px!important;white-space:nowrap;color:#f2faff!important}
#notificationPanel .notification-head button{
  border:0!important;background:transparent!important;
  font-size:10px!important;color:#acd0e7!important;
  line-height:1.3!important;white-space:normal;text-align:right;
}
#notificationPanel .notification-head button:hover{color:#fff!important;text-decoration:underline}
#notificationPanel .notification-tabs{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  margin:9px 0 7px;
  padding:3px;
  border-radius:9px;
  background:#061b2b;
  border:1px solid #30779b63;
}
#notificationPanel .notification-tabs button{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  width:100%;
  min-height:35px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#b8d5e6;
  font-weight:750;
  font-size:11px;
  cursor:pointer;
  padding:5px 3px;
}
#notificationPanel .notification-tabs button:hover{background:#163952}
#notificationPanel .notification-tabs button.active{
  color:#fff;
  background:linear-gradient(180deg,#12658a,#095076);
  border-color:#37abd5c4;
  box-shadow:0 0 0 1px #07314d;
}
#notificationPanel .notification-tabs button:focus-visible{outline:2px solid #80d9ff;outline-offset:2px}
#notificationPanel .notification-tab-count{
  min-width:18px;height:18px;
  padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
  color:#fff;
  font-size:10px;font-weight:900;
  background:#c83a47;
}
#notificationPanel .notification-tab-count[hidden]{display:none!important}
#notificationPanel #notificationList{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#6394a8 transparent;
  padding:0 2px 4px;
}
#notificationPanel .notification-item{
  padding:12px 9px!important;
  border-radius:8px;
  border-bottom:1px solid #ffffff15!important;
  cursor:pointer;
}
#notificationPanel .notification-item.unread{border-left:3px solid #43b9f0!important;background:#1d597033!important}
#notificationPanel .notification-item strong{font-size:12px!important}
#notificationPanel .notification-item p{font-size:11px!important;line-height:1.4!important;overflow-wrap:anywhere}
#notificationPanel .notification-actions button{
  font-size:11px!important;
  padding:7px 11px!important;
  color:#e7f7ff!important;
  background:#104263!important;
  border:1px solid #4e9fc899!important;
  border-radius:8px;
}
#notificationPanel .notification-actions button.primary{
  background:#087c8e!important;
  border-color:#36c4d7!important;
}
#notificationPanel .notification-actions button:hover{filter:brightness(1.15)}
@media(max-width:620px){
  #notificationPanel.notification-panel{
    height:min(510px,calc(100dvh - var(--notification-mobile-top,120px) - 15px))!important;
    max-height:calc(100dvh - var(--notification-mobile-top,120px) - 15px)!important;
  }
  #notificationPanel .notification-tabs button{font-size:10px!important}
}