/* ============================================================
   CIUTEK - notificacoes
   Sino vazio, botao do som, recado do ADM e o interruptor de
   guardar notificacoes de quem assina.
   ============================================================ */

/* ---------- 1. quando nao ha nada ---------- */
.ck-notif__vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 46px 24px 44px;
  text-align: center;
}
.ck-notif__sino {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(154, 107, 255, .26), rgba(154, 107, 255, .04) 68%);
  box-shadow: inset 0 0 0 1px rgba(178, 149, 255, .22);
}
.ck-notif__sino svg { display: block; }
.ck-notif__titulo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0;
}
.ck-notif__linha {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(185, 168, 221, .95);
  margin: 0;
  max-width: 260px;
}
html.ck-claro .ck-notif__linha { color: #6d6288; }

/* ---------- 2. o botao de desligar o som ---------- */
.notifications-dropdown li.turn-off-sound {
  margin: 8px 10px 6px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #2a1550, #3a1d6b) !important;
  border: 1px solid rgba(178, 149, 255, .28) !important;
  color: #cdb2ff !important;
  font-size: 13px !important;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.notifications-dropdown li.turn-off-sound:hover {
  background: linear-gradient(135deg, #331a61, #46237f) !important;
  border-color: rgba(178, 149, 255, .5) !important;
}
.notifications-dropdown li.turn-off-sound:active { transform: scale(.99); }
.notifications-dropdown li.turn-off-sound span {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  color: #cdb2ff !important;
}
.notifications-dropdown li.turn-off-sound svg {
  width: 18px; height: 18px;
  stroke: #b58cff !important;
  flex: 0 0 auto;
}
html.ck-claro .notifications-dropdown li.turn-off-sound {
  background: linear-gradient(135deg, #2a1550, #3d1f70) !important;
  color: #dcc9ff !important;
}

/* ---------- 3. recado do ADM ---------- */
.notification-list.ck-recado {
  background: linear-gradient(100deg, rgba(122, 65, 240, .14), rgba(122, 65, 240, .04)) !important;
  border-left: 2px solid #9a6bff;
}
.ck-recado__marca {
  width: 42px; height: 42px;
  display: grid !important;
  place-items: center;
  border-radius: 50%;
  color: #c9a5ff;
  background: radial-gradient(circle at 50% 40%, rgba(154, 107, 255, .34), rgba(154, 107, 255, .08));
  box-shadow: inset 0 0 0 1px rgba(178, 149, 255, .38);
}

/* ---------- 4. guardar notificacoes (plano pago) ---------- */
.ck-notif__guardar {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 6px 10px 10px !important;
  padding: 10px 14px !important;
  border-radius: 12px;
  border: 1px solid rgba(178, 149, 255, .2);
  background: rgba(154, 107, 255, .07);
  font-size: 12.5px;
  color: rgba(185, 168, 221, .95);
  cursor: pointer;
}
html.ck-claro .ck-notif__guardar { color: #6d6288; }
.ck-notif__guardar b { color: inherit; font-weight: 600; }
.ck-notif__chave {
  margin-left: auto;
  width: 38px; height: 21px;
  border-radius: 999px;
  background: rgba(120, 100, 160, .35);
  position: relative;
  flex: 0 0 auto;
  transition: background .18s ease;
}
.ck-notif__chave::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}
.ck-notif__guardar[data-ligado="1"] .ck-notif__chave { background: #7a41f0; }
.ck-notif__guardar[data-ligado="1"] .ck-notif__chave::after { transform: translateX(17px); }

/* ------------------------------------------------------------
   Reforco de especificidade: o tema claro pinta
   .dropdown-menu li com !important e vencia a cor do botao.
   ------------------------------------------------------------ */
html:root .ctk-app .notifications-dropdown li.turn-off-sound,
html:root .ctk-app .notifications-dropdown li.turn-off-sound span,
html:root .ctk-app .notifications-dropdown li.turn-off-sound b,
html:root .ctk-app .notifications-dropdown li.turn-off-sound a {
  color: #cdb2ff !important;
}
html:root .ctk-app .notifications-dropdown li.turn-off-sound svg {
  stroke: #b58cff !important;
  color: #b58cff !important;
}
html:root .ctk-app .notifications-dropdown li.turn-off-sound {
  background: linear-gradient(135deg, #2a1550, #3a1d6b) !important;
  border: 1px solid rgba(178, 149, 255, .28) !important;
  border-radius: 12px !important;
}
html:root .ctk-app #notification-list li.ck-notif__vazio,
html:root .ctk-app #notification-list li.ck-notif__vazio p {
  background: transparent !important;
}
html:root .ctk-app #notification-list li.ck-notif__vazio .ck-notif__titulo { color: inherit !important; }
html:root .ctk-app #notification-list li.ck-notif__guardar { color: inherit !important; }