/* ============================================================
   XINGUZINHO - SININHO / AVISOS V2
   ============================================================ */

.xinguzinho-notif-wrap {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
  z-index: 5000;
}

.xinguzinho-notif-bell {
  position: relative;

  width: 42px;
  height: 42px;

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

  border:
    1px solid
    rgba(148,163,184,.22);

  border-radius:
    12px;

  background:
    rgba(15,28,49,.82);

  color:
    #fff;

  font-size:
    18px;

  cursor:
    pointer;

  transition:
    .15s ease;
}

.xinguzinho-notif-bell:hover {
  background:
    rgba(30,50,78,.95);

  transform:
    translateY(-1px);
}


.xinguzinho-notif-badge {
  position:
    absolute;

  top:
    -6px;

  right:
    -6px;

  min-width:
    20px;

  height:
    20px;

  padding:
    0 5px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    2px solid
    #0c1626;

  border-radius:
    999px;

  background:
    #ef4444;

  color:
    white;

  font-size:
    10px;

  font-weight:
    800;
}


.xinguzinho-notif-painel {
  position:
    absolute;

  top:
    calc(100% + 10px);

  right:
    0;

  width:
    390px;

  max-width:
    calc(100vw - 30px);

  overflow:
    hidden;

  border:
    1px solid
    rgba(148,163,184,.20);

  border-radius:
    14px;

  background:
    #111c2f;

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.45);
}


.xinguzinho-notif-header {
  padding:
    14px 15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  border-bottom:
    1px solid
    rgba(148,163,184,.15);
}


.xinguzinho-notif-header > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.xinguzinho-notif-header strong {
  color:
    #f8fafc;

  font-size:
    16px;
}


.xinguzinho-notif-header small {
  color:
    #94a3b8;

  font-size:
    11px;
}


#xinguzinhoNotifLerTodas {
  border:
    0;

  background:
    transparent;

  color:
    #60a5fa;

  cursor:
    pointer;

  font-size:
    11px;
}


.xinguzinho-notif-lista {
  max-height:
    420px;

  overflow-y:
    auto;

  padding:
    8px;
}


.xinguzinho-notif-item {
  width:
    100%;

  margin-bottom:
    7px;

  padding:
    12px;

  border:
    1px solid
    transparent;

  border-radius:
    10px;

  background:
    transparent;

  color:
    #f8fafc;

  text-align:
    left;

  cursor:
    pointer;
}


.xinguzinho-notif-item:hover {
  background:
    rgba(255,255,255,.04);
}


.xinguzinho-notif-item.nao-lida {
  border-color:
    rgba(59,130,246,.35);

  background:
    rgba(59,130,246,.08);
}


.xinguzinho-notif-item-top {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;
}


.xinguzinho-notif-item-top strong {
  flex:
    1;

  font-size:
    13px;

  line-height:
    1.4;
}


.xinguzinho-notif-dot {
  width:
    8px;

  height:
    8px;

  margin-top:
    5px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    #3b82f6;
}


.xinguzinho-notif-msg {
  margin-top:
    6px;

  color:
    #a9b4c7;

  font-size:
    12px;

  line-height:
    1.45;

  white-space:
    pre-line;
}


.xinguzinho-notif-item small {
  display:
    block;

  margin-top:
    7px;

  color:
    #75839a;

  font-size:
    10px;
}


.xinguzinho-notif-vazio {
  padding:
    28px 16px;

  text-align:
    center;

  color:
    #94a3b8;

  font-size:
    13px;
}


@media (
  max-width: 700px
) {

  .xinguzinho-notif-painel {
    position:
      fixed;

    top:
      72px;

    left:
      14px;

    right:
      14px;

    width:
      auto;
  }
}

/* ============================================================
   XINGUZINHO_SININHO_POSICAO_V3
   Não interfere no layout das barras internas.
   ============================================================ */

.xinguzinho-notif-wrap {
  margin-left: 0 !important;
  margin-right: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}