/* KinesPrime · Notificaciones (plano, un acento, efectos suaves) */
#notifDropdown.notif-dropdown {
  width: 360px; max-width: calc(100vw - 24px);
  padding: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid #ECE7EC !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 50px -24px rgba(20, 8, 24, .45) !important;
  animation: kpnIn .22s cubic-bezier(.2, .8, .2, 1) !important;
}
#notifDropdown .kpn-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 10px; margin-bottom: 4px;
  border-bottom: 1px solid #F2EEF3;
}
#notifDropdown .notif-title {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  color: #16121A !important; font-size: 1rem !important; font-weight: 800 !important; letter-spacing: -.01em !important;
}
#notifDropdown .kpn-close {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #F4F1F5; color: #6B6470; transition: background .2s, color .2s;
}
#notifDropdown .kpn-close:hover { background: #E11D48; color: #fff; }

#notifListContainer { gap: 4px !important; max-height: min(64vh, 420px) !important; padding: 2px; scrollbar-width: thin; }

#notifDropdown .kpn-item {
  position: relative;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 12px; border-radius: 15px;
  background: transparent; transition: background .2s;
}
#notifDropdown.open .kpn-item { animation: kpnRise .35s cubic-bezier(.2, .8, .2, 1) both; }
#notifDropdown.open .kpn-item:nth-child(1) { animation-delay: .02s; }
#notifDropdown.open .kpn-item:nth-child(2) { animation-delay: .06s; }
#notifDropdown.open .kpn-item:nth-child(3) { animation-delay: .1s; }
#notifDropdown.open .kpn-item:nth-child(4) { animation-delay: .14s; }
#notifDropdown.open .kpn-item:nth-child(n+5) { animation-delay: .18s; }
#notifDropdown .kpn-item:hover { background: #F7F5F8; }
#notifDropdown .kpn-item.is-unread { background: #FFF1F3; }
#notifDropdown .kpn-item.is-unread::after {
  content: ""; position: absolute; top: 14px; right: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: #E11D48;
  animation: kpnPulse 2s ease-in-out infinite;
}

#notifDropdown .kpn-ico {
  flex: none; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: #F4F1F5; color: #6B6470;
}
#notifDropdown .kpn-item[data-tone="ok"] .kpn-ico { background: #ECFDF4; color: #15803D; }
#notifDropdown .kpn-item[data-tone="gold"] .kpn-ico { background: #FEF6E7; color: #B7791F; }
#notifDropdown .kpn-item[data-tone="warn"] .kpn-ico { background: #FFF7ED; color: #C2410C; }
#notifDropdown .kpn-item[data-tone="accent"] .kpn-ico { background: #FFE4E9; color: #E11D48; }

#notifDropdown .kpn-body { flex: 1; min-width: 0; }
#notifDropdown .kpn-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#notifDropdown .kpn-top h5 {
  margin: 0; color: #16121A; font-family: inherit;
  font-size: .86rem; font-weight: 700; line-height: 1.3;
}
#notifDropdown .kpn-top time { flex: none; color: #A39BA7; font-size: .68rem; white-space: nowrap; padding-right: 12px; }
#notifDropdown .kpn-body p { margin: 3px 0 0; color: #6B6470; font-size: .78rem; line-height: 1.5; }

#notifDropdown .kpn-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 20px; text-align: center;
}
#notifDropdown .kpn-empty-ico {
  width: 48px; height: 48px; border-radius: 16px; margin-bottom: 4px;
  display: grid; place-items: center; background: #FFF1F3; color: #E11D48;
}
#notifDropdown .kpn-empty strong { color: #16121A; font-size: .92rem; }
#notifDropdown .kpn-empty span { color: #8A8290; font-size: .78rem; line-height: 1.5; max-width: 240px; }

/* Oscuro */
body.dark-theme #notifDropdown.notif-dropdown { background: #16141B !important; border-color: #26222D !important; }
body.dark-theme #notifDropdown .kpn-head { border-bottom-color: #26222D; }
body.dark-theme #notifDropdown .notif-title { color: #F5F2F7 !important; }
body.dark-theme #notifDropdown .kpn-close { background: #25212B; color: #A29AA8; }
body.dark-theme #notifDropdown .kpn-item:hover { background: #1F1C25; }
body.dark-theme #notifDropdown .kpn-item.is-unread { background: rgba(225, 29, 72, .12); }
body.dark-theme #notifDropdown .kpn-ico { background: #25212B; color: #A29AA8; }
body.dark-theme #notifDropdown .kpn-top h5,
body.dark-theme #notifDropdown .kpn-empty strong { color: #F5F2F7; }
body.dark-theme #notifDropdown .kpn-body p { color: #A29AA8; }
body.dark-theme #notifDropdown .kpn-empty-ico { background: rgba(225, 29, 72, .14); }

/* Celular: hoja desde abajo */
@media (max-width: 640px) {
  #notifDropdown.notif-dropdown {
    position: fixed !important; inset: auto 0 0 0 !important;
    width: auto !important; max-width: none !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 6px 8px calc(10px + env(safe-area-inset-bottom)) !important;
    animation: kpnSheet .28s cubic-bezier(.2, .8, .2, 1) !important;
    z-index: 4000 !important;
  }
  #notifDropdown.notif-dropdown::before {
    content: ""; display: block; width: 38px; height: 4px; margin: 6px auto 2px;
    border-radius: 99px; background: #E2DDE5;
  }
  body.dark-theme #notifDropdown.notif-dropdown::before { background: #322C39; }
  #notifListContainer { max-height: 56vh !important; }
}

@keyframes kpnIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kpnSheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kpnRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kpnPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .65; } }
@media (prefers-reduced-motion: reduce) {
  #notifDropdown, #notifDropdown * { animation: none !important; }
}
.kpn-backdrop {
  position: fixed; inset: 0; z-index: 3900;
  background: rgba(12, 6, 16, .45);
  animation: kpnFade .2s ease both;
}
@keyframes kpnFade { from { opacity: 0; } to { opacity: 1; } }

/* Acceso a mensajes privados dentro del panel */
#notifDropdown .kp-msg-link {
  order: 9; display: flex !important; align-items: center; gap: 10px;
  margin: 6px 2px 2px !important; padding: 11px 12px !important;
  border: 0 !important; border-radius: 15px !important;
  background: #FFF1F3 !important; color: #E11D48 !important;
  font-size: .85rem; font-weight: 700; text-decoration: none;
  transition: background .2s;
}
#notifDropdown .kp-msg-link:hover { background: #FFE4E9 !important; }
#notifDropdown .kp-msg-link b { margin-left: auto; background: #E11D48; color: #fff; border-radius: 99px; padding: 1px 7px; font-size: .7rem; }
#notifDropdown .kp-msg-link b[hidden] { display: none !important; }
body.dark-theme #notifDropdown .kp-msg-link { background: rgba(225, 29, 72, .14) !important; color: #FDA4AF !important; }
#notifDropdown.notif-dropdown { flex-direction: column !important; }
#notifDropdown.notif-dropdown.open { display: flex !important; }
#notifDropdown .kpn-head { order: 1; }
#notifListContainer { order: 2; }