/* Notificaciones del panel: campana, lista, avisos emergentes */
.sidebar { position: relative; }
.sidebar .nt-campana { position: absolute; top: 14px; right: 12px; width: 38px; height: 38px; background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.sidebar .nt-campana:hover { background: rgba(255,255,255,.18); }
.sidebar .nt-contador { box-shadow: 0 0 0 2px #1f2430; }
.sidebar h1 { padding-right: 58px !important; }
.nt-campana {
  position: fixed; top: 14px; right: 18px; z-index: 950;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: #1f2430; box-shadow: 0 2px 10px rgba(15,30,46,.15);
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: transform .15s ease;
}
.nt-campana:hover { transform: scale(1.06); }
.nt-campana svg { width: 22px; height: 22px; }
.nt-campana.timbre svg { animation: nt-timbre .9s ease; transform-origin: 50% 8%; }
@keyframes nt-timbre { 0%,100%{transform:rotate(0)} 15%{transform:rotate(16deg)} 30%{transform:rotate(-14deg)} 45%{transform:rotate(10deg)} 60%{transform:rotate(-6deg)} 75%{transform:rotate(3deg)} }
.nt-contador {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: #ef4444; color: #fff; font: 700 11px/20px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center; box-shadow: 0 0 0 2px #fff;
}
.nt-contador[hidden] { display: none; }

.nt-panel {
  position: fixed; top: 66px; right: 18px; z-index: 960; width: 380px; max-height: min(75vh, 620px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,30,46,.25);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #1f2430;
  opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: opacity .16s, transform .16s;
}
.nt-panel.abierto { opacity: 1; transform: none; pointer-events: auto; }
.nt-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.nt-cab h4 { margin: 0; font-size: 17px; font-weight: 800; }
.nt-cab button { background: none; border: 0; color: #2563eb; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px; }
.nt-disp { margin: 0 14px 10px; padding: 11px 13px; border-radius: 12px; background: #f1f5f9; font-size: 13px; line-height: 1.45; }
.nt-disp.ok { background: #ecfdf5; color: #065f46; }
.nt-disp.alerta { background: #fff7ed; color: #9a3412; }
.nt-disp button { margin-top: 8px; border: 0; border-radius: 9px; padding: 9px 14px; background: #2563eb; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.nt-disp .nt-link { background: none; color: inherit; text-decoration: underline; padding: 0; margin: 0 0 0 6px; font-weight: 600; }
.nt-lista { overflow-y: auto; padding: 4px 8px 10px; -webkit-overflow-scrolling: touch; }
.nt-item { display: flex; gap: 12px; padding: 11px 10px; border-radius: 12px; cursor: pointer; text-decoration: none; color: inherit; position: relative; }
.nt-item:hover { background: #f8fafc; }
.nt-item.nueva { background: #f0f7ff; }
.nt-item.nueva::after { content: ""; position: absolute; top: 18px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; }
.nt-ico { flex: 0 0 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.nt-txt { min-width: 0; flex: 1; padding-right: 14px; }
.nt-tit { font-weight: 700; font-size: 14px; line-height: 1.3; }
.nt-cuerpo { font-size: 13px; color: #475569; margin-top: 2px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nt-hora { font-size: 11.5px; color: #94a3b8; margin-top: 3px; }
.nt-vacio { text-align: center; color: #94a3b8; padding: 34px 10px; font-size: 14px; }

/* colores por tipo */
.nt-t-whatsapp { background: #dcfce7; } .nt-t-agente { background: #ffedd5; } .nt-t-pago_reportado { background: #ede9fe; }
.nt-t-ticket { background: #dbeafe; } .nt-t-factura { background: #e2e8f0; } .nt-t-pago { background: #d1fae5; }
.nt-t-vencida { background: #fef3c7; } .nt-t-suspension { background: #fee2e2; } .nt-t-cliente { background: #ccfbf1; } .nt-t-prueba, .nt-t-general { background: #e0e7ff; }

/* avisos emergentes */
.nt-avisos { position: fixed; right: 18px; bottom: 18px; z-index: 970; display: flex; flex-direction: column; gap: 10px; width: 360px; pointer-events: none; }
.nt-aviso {
  pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 12px; cursor: pointer;
  background: #fff; border-radius: 14px; box-shadow: 0 12px 36px rgba(15,30,46,.22); border-left: 5px solid #2563eb;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #1f2430;
  animation: nt-entra .35s cubic-bezier(.2,.9,.3,1.2);
}
.nt-aviso.sale { animation: nt-sale .25s ease forwards; }
@keyframes nt-entra { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nt-sale { to { opacity: 0; transform: translateX(40px); } }
.nt-aviso .nt-cerrar { background: none; border: 0; color: #94a3b8; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.nt-aviso.b-whatsapp { border-left-color: #22c55e; } .nt-aviso.b-agente { border-left-color: #f97316; } .nt-aviso.b-pago_reportado { border-left-color: #8b5cf6; }
.nt-aviso.b-ticket { border-left-color: #3b82f6; } .nt-aviso.b-pago { border-left-color: #10b981; } .nt-aviso.b-vencida { border-left-color: #f59e0b; }
.nt-aviso.b-suspension { border-left-color: #ef4444; } .nt-aviso.b-cliente { border-left-color: #14b8a6; }

@media (max-width: 768px) {
  body.m-app .nt-campana { top: calc(env(safe-area-inset-top) + 10px); right: 10px; background: transparent; color: #fff; box-shadow: none; }
  body.m-app .nt-contador { box-shadow: none; }
  .nt-panel { top: calc(env(safe-area-inset-top) + 72px); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 160px); }
  .nt-avisos { left: 10px; right: 10px; width: auto; top: calc(env(safe-area-inset-top) + 74px); bottom: auto; }
  @keyframes nt-entra { from { opacity: 0; transform: translateY(-24px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes nt-sale { to { opacity: 0; transform: translateY(-24px); } }
}