/**
 * notification-center.css — Notification System UI v1.0
 * Namespaced .nc-  · Zero desktop layout interference.
 */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --nc-panel-w:       420px;
  --nc-critica:       #EF4444;
  --nc-alta:          #F59E0B;
  --nc-media:         #3B82F6;
  --nc-baja:          #6B7280;

  --nc-sistema:       #6B7280;
  --nc-negocio:       #8B5CF6;
  --nc-seguridad:     #EF4444;
  --nc-ia:            #06B6D4;
  --nc-recordatorio:  #F59E0B;
  --nc-financiero:    #10B981;
}

/* ── BELL ───────────────────────────────────────────── */
.nc-bell {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 10px; background: none; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #6B7280;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.nc-bell:hover { background: #F3F4F6; color: var(--primary, #8e44ad); }
.nc-bell.has-unread { color: var(--primary, #8e44ad); }
.nc-badge {
  position: absolute; top: 3px; right: 2px;
  min-width: 18px; height: 18px;
  background: var(--nc-critica); color: #fff;
  font-size: 10px; font-weight: 800;
  border-radius: 99px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; border: 2px solid #fff; pointer-events: none;
  animation: ncPulse 2s infinite;
}
@keyframes ncPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.25)} }

/* ── PANEL ──────────────────────────────────────────── */
.nc-backdrop {
  display: none; position: fixed; inset: 0; z-index: 980;
  background: rgba(0,0,0,.18); backdrop-filter: blur(1px);
  animation: ncFadeIn .18s ease;
}
.nc-backdrop.active { display: block; }

.nc-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--nc-panel-w); max-width: 96vw;
  background: #fff; z-index: 990;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 8px 40px rgba(0,0,0,.16);
  display: flex; flex-direction: column; overflow: hidden;
}
.nc-panel.open { transform: translateX(0); }

@keyframes ncFadeIn { from{opacity:0} to{opacity:1} }

/* ── PANEL HEADER ───────────────────────────────────── */
.nc-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 12px; border-bottom: 1px solid #F3F4F6; flex-shrink: 0;
}
.nc-header__title { font-size: 16px; font-weight: 800; color: #1F2937; }
.nc-header__count {
  background: var(--primary,#8e44ad); color: #fff;
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px;
}
.nc-header__actions { margin-left: auto; display: flex; gap: 6px; }
.nc-header-btn {
  height: 30px; padding: 0 11px; border-radius: 7px; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
  background: #F3F4F6; color: #6B7280; transition: all .13s; white-space: nowrap;
}
.nc-header-btn:hover { background: #E5E7EB; color: #1F2937; }
.nc-close {
  width: 34px; height: 34px; border-radius: 8px; border: none;
  background: #F9FAFB; color: #6B7280; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s;
}
.nc-close:hover { background: #F3F4F6; }

/* ── FILTER TABS ────────────────────────────────────── */
.nc-filters {
  display: flex; gap: 5px; padding: 10px 18px 8px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid #F3F4F6; flex-shrink: 0;
}
.nc-filters::-webkit-scrollbar { display: none; }
.nc-filter {
  padding: 5px 11px; border-radius: 99px;
  border: 1.5px solid #E5E7EB; background: #fff; color: #6B7280;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all .13s; -webkit-tap-highlight-color: transparent;
}
.nc-filter:hover  { border-color: var(--primary,#8e44ad); color: var(--primary,#8e44ad); }
.nc-filter.active { background: var(--primary,#8e44ad); color:#fff; border-color:var(--primary,#8e44ad); }

/* ── LIST ───────────────────────────────────────────── */
.nc-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.nc-group-label {
  padding: 8px 18px 3px;
  font-size: 10px; font-weight: 800; color: #9CA3AF;
  text-transform: uppercase; letter-spacing: .5px;
}

/* ── ITEM ───────────────────────────────────────────── */
.nc-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 18px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s;
  position: relative;
}
.nc-item:hover { background: #F9FAFB; }
.nc-item.unread { background: #FAFAFD; border-left-color: var(--primary,#8e44ad); }
.nc-item--critica  { border-left-color: var(--nc-critica) !important; }
.nc-item--alta     { border-left-color: var(--nc-alta) !important; }

.nc-item__icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.nc-item--sistema      .nc-item__icon { background:#F3F4F6; }
.nc-item--negocio      .nc-item__icon { background:#F5F3FF; }
.nc-item--seguridad    .nc-item__icon { background:#FEF2F2; }
.nc-item--ia           .nc-item__icon { background:#ECFEFF; }
.nc-item--recordatorio .nc-item__icon { background:#FFFBEB; }
.nc-item--financiero   .nc-item__icon { background:#ECFDF5; }

.nc-item__body { flex: 1; min-width: 0; }
.nc-item__title {
  font-size: 13px; font-weight: 600; color: #374151;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nc-item.unread .nc-item__title { font-weight: 800; color: #111827; }
.nc-item__text {
  font-size: 12px; color: #6B7280; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.nc-item__meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.nc-item__time { font-size: 10px; color: #9CA3AF; }
.nc-type {
  font-size: 9px; font-weight: 800; padding: 1px 5px;
  border-radius: 99px; text-transform: uppercase; letter-spacing: .4px;
}
.nc-type--sistema     { background:#F3F4F6; color:var(--nc-sistema); }
.nc-type--negocio     { background:#F5F3FF; color:var(--nc-negocio); }
.nc-type--seguridad   { background:#FEF2F2; color:var(--nc-seguridad); }
.nc-type--ia          { background:#ECFEFF; color:var(--nc-ia); }
.nc-type--recordatorio{ background:#FFFBEB; color:var(--nc-recordatorio); }
.nc-type--financiero  { background:#ECFDF5; color:var(--nc-financiero); }

.nc-item__cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 4px 9px;
  border-radius: 6px; border: none; cursor: pointer;
  background: #F3F4F6; color: #374151;
  font-size: 11px; font-weight: 700; transition: background .12s;
}
.nc-item__cta:hover { background: #E5E7EB; }
.nc-item__cta--primary { background: var(--primary,#8e44ad); color:#fff; }
.nc-item__cta--primary:hover { opacity:.88; }

.nc-item__dismiss {
  position: absolute; top: 10px; right: 12px;
  width: 22px; height: 22px; border-radius: 6px; border: none;
  background: none; color: #D1D5DB; cursor: pointer;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s, background .12s;
}
.nc-item:hover .nc-item__dismiss { opacity: 1; }
.nc-item__dismiss:hover { background: #F3F4F6; color: #6B7280; }

/* ── SKELETON ───────────────────────────────────────── */
.nc-skel {
  display: flex; gap: 11px; padding: 12px 18px;
}
.nc-skel__icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(90deg,#F3F4F6 25%,#E9EAED 50%,#F3F4F6 75%);
  background-size: 200% 100%; animation: ncShim 1.4s infinite;
}
.nc-skel__lines { flex:1; display:flex; flex-direction:column; gap:7px; padding-top:4px; }
.nc-skel__line {
  height: 12px; border-radius: 4px;
  background: linear-gradient(90deg,#F3F4F6 25%,#E9EAED 50%,#F3F4F6 75%);
  background-size: 200% 100%; animation: ncShim 1.4s infinite;
}
@keyframes ncShim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── EMPTY STATE ────────────────────────────────────── */
.nc-empty {
  padding: 60px 30px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center;
}
.nc-empty__icon  { font-size: 38px; }
.nc-empty__title { font-size: 14px; font-weight: 700; color: #374151; }
.nc-empty__sub   { font-size: 12px; color: #9CA3AF; }

/* ── FOOTER ─────────────────────────────────────────── */
.nc-footer {
  padding: 10px 18px; border-top: 1px solid #F3F4F6;
  text-align: center; flex-shrink: 0;
}
.nc-load-more {
  background: none; border: 1.5px solid #E5E7EB;
  padding: 6px 18px; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: #6B7280; cursor: pointer;
  transition: all .13s;
}
.nc-load-more:hover { border-color: var(--primary,#8e44ad); color: var(--primary,#8e44ad); }

/* ── TOAST ──────────────────────────────────────────── */
.nc-toasts {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.nc-toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: #FFFFFF; color: #1F2937;
  padding: 12px 14px; border-radius: 12px;
  max-width: 320px; min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  pointer-events: all; cursor: pointer;
  border: 1px solid #E5E7EB;
  border-left: 4px solid var(--primary,#7C3AED);
  animation: ncTIn .3s cubic-bezier(.4,0,.2,1);
}
.nc-toast--critica   { border-left-color: var(--nc-critica); }
.nc-toast--seguridad { border-left-color: var(--nc-seguridad); }
.nc-toast__icon  { font-size: 17px; flex-shrink:0; margin-top:1px; }
.nc-toast__title { font-size: 13px; font-weight: 700; }
.nc-toast__text  { font-size: 11px; color: #D1D5DB; margin-top: 2px; }
.nc-toast__x {
  background:none; border:none; color:#9CA3AF;
  cursor:pointer; font-size:14px; flex-shrink:0; padding:0 2px; margin-left:auto;
}
@keyframes ncTIn  { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }
@keyframes ncTOut { to{opacity:0;transform:translateX(115%)} }
.nc-toast.out { animation: ncTOut .22s ease forwards; }

/* ── PREFERENCES SLIDE ──────────────────────────────── */
.nc-prefs {
  position: absolute; inset: 0; background: #fff; z-index: 5;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
}
.nc-prefs.open { transform: translateX(0); }
.nc-prefs-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 18px; border-bottom: 1px solid #F3F4F6;
  font-weight: 800; font-size: 15px; color: #1F2937; flex-shrink: 0;
}
.nc-prefs-body { flex: 1; overflow-y: auto; padding: 12px 18px; }
.nc-pref-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid #F9FAFB;
}
.nc-pref-row:last-child { border: none; }
.nc-pref-icon  { font-size: 18px; width: 26px; text-align: center; }
.nc-pref-label { flex: 1; font-size: 13px; font-weight: 700; color: #1F2937; }
.nc-pref-desc  { font-size: 11px; color: #9CA3AF; margin-top: 1px; }
.nc-toggle {
  width: 38px; height: 22px; background: #E5E7EB;
  border-radius: 99px; position: relative; cursor: pointer; border: none;
  transition: background .18s; flex-shrink: 0;
}
.nc-toggle::after {
  content:''; position:absolute; top:3px; left:3px;
  width:16px; height:16px; background:#fff; border-radius:50%;
  transition: transform .18s;
}
.nc-toggle.on { background: var(--primary,#8e44ad); }
.nc-toggle.on::after { transform: translateX(16px); }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 480px) {
  .nc-panel  { max-width: 100vw; width: 100%; }
  .nc-toasts { top: auto; bottom: 80px; left: 10px; right: 10px; }
  .nc-toast  { max-width: 100%; }
}