/* PelisAnime · Notificaciones (campana) — panel lateral minimalista */

/* Punto de la campana: solo cuando hay novedades */
.pa-notif-btn .dot{display:block}
.pa-notif-btn .dot[hidden]{display:none}
.pa-notif-btn.has-new svg{transform-origin:50% 6px;animation:nf-ring .9s ease .25s 1}
@keyframes nf-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}}

/* Panel: plano, sin degradados ni adornos */
.layer.notif-layer .ndr{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));right:10px;
  width:min(calc(100vw - 20px),360px);display:flex;flex-direction:column;overflow:hidden;border-radius:24px;
  background:var(--glass);background-image:none;
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--edge);box-shadow:var(--shadow);
  transform:translateX(calc(100% + 24px));transition:transform .35s cubic-bezier(.2,.9,.25,1);touch-action:pan-y}
.layer.notif-layer.open .ndr{transform:none}

/* Cabecera: solo el título y cerrar */
.nf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 12px 8px 20px}
.nf-head h2{margin:0;font:700 17px var(--font);letter-spacing:-.2px;color:var(--text)}
.nf-x{flex:none;background:transparent}
.nf-x:hover{background:var(--card)}
.nf-x svg{width:20px;height:20px}

/* Lista: filas limpias separadas por una línea fina */
.nf-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 8px;transition:opacity .15s;scrollbar-width:thin;scrollbar-color:rgba(var(--ov),.20) transparent}
.notif-layer.busy .nf-body{opacity:.7}
.nf-list{flex:none;list-style:none;margin:0;padding:0}
.nf-item+.nf-item .nf-link{border-top:1px solid var(--edge)}
.nf-link{display:grid;grid-template-columns:44px 1fr 8px;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;color:inherit;text-decoration:none;transition:background .15s}
.nf-link:hover{background:var(--card)}
.nf-th{display:block;width:44px;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:var(--card-h)}
.nf-th img{display:block;width:100%;height:100%;object-fit:cover}
.nf-bd{min-width:0;display:flex;flex-direction:column;gap:2px}
.nf-name{font:600 14px/1.3 var(--font);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nf-time{font:500 12px var(--font);color:var(--muted)}
/* Indicador de "nuevo": un punto discreto, sin etiquetas */
.nf-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0}
.nf-item.is-new .nf-dot{opacity:1}

/* Sin novedades */
.nf-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:48px 20px;text-align:center;color:var(--muted)}
.nf-empty i{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:50%;background:var(--card)}
.nf-empty svg{width:22px;height:22px}
.nf-empty b{font:600 14px var(--font);color:var(--text)}
.nf-empty p{margin:0;font:500 13px var(--font)}

/* Pie: un enlace de texto */
.nf-foot{padding:6px 12px calc(14px + env(safe-area-inset-bottom,0px));text-align:center}
.nf-all{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font:600 13px var(--font);color:var(--muted);text-decoration:none;transition:color .15s,background .15s}
.nf-all:hover{color:var(--text);background:var(--card)}
.nf-all svg{width:15px;height:15px}

@media (prefers-reduced-motion:reduce){
  .layer.notif-layer .ndr{transition:none}
  .pa-notif-btn.has-new svg{animation:none}
}