/* ==========================================================================
   Notificaciones (campanita) y avisos en pantalla — Propuesta A "Tarjeta limpia".
   Se carga en base_studio.html después de studio.css y theme-wharton.css.
   ========================================================================== */
.nt-root{
  --nt-crimson:var(--mcw-crimson,#9E1B32);--nt-crimson-bg:#FBE9EC;--nt-navy:var(--mcw-navy2,#0A3169);--nt-ink:var(--mcw-ink,#14213D);--nt-muted:var(--mcw-muted,#5C6B85);
  --nt-line:var(--mcw-line,#E2E5EC);--nt-bg-alt:var(--mcw-bg-alt,#F5F7FA);--nt-ok:#0F9D77;--nt-ok-bg:var(--mcw-ok-bg,#E4F6EF);--nt-warn:#B25E09;--nt-info-bg:var(--mcw-info-bg,#EAF1FC);
  --nt-purple:#6C4AB6;--nt-purple-bg:#EFE9FB;--nt-gold:#B07A00;--nt-gold-bg:#FFF4DA;--nt-lock:#8A93A6;--nt-lock-bg:var(--mcw-lock-bg,#F0F1F4);
}

/* ---------- Campana ---------- */
#stBtnNotif.nt-bell svg{width:18px;height:18px;}
#stBtnNotif.nt-bell.nt-ring svg{animation:nt-ring 1.2s ease;}
@keyframes nt-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)}}
#stNotifBadge.nt-badge{top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;background:var(--mcw-crimson,#9E1B32);border:2px solid var(--mcw-navy,#0B1220);color:#fff;font-size:10.5px;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;}

/* ---------- Panel ---------- */
#stDropNotif.nt-panel{
  width:380px;max-width:calc(100vw - 24px);padding:0;background:#fff;color:var(--nt-ink);
  border:1px solid var(--nt-line);border-top:2px solid var(--nt-crimson);border-radius:4px;
  box-shadow:0 16px 40px -12px rgba(11,18,32,.45);overflow:visible;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;text-align:left;
}
#stDropNotif.nt-panel.st-open{animation:nt-pop .16s ease;}
@keyframes nt-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.nt-head{display:flex;align-items:center;gap:10px;padding:16px 16px 10px;}
.nt-head h4{margin:0;font-family:'Sora',sans-serif;font-size:15px;font-weight:700;flex:1;display:flex;align-items:center;gap:8px;color:var(--nt-ink);}
.nt-head h4 span{background:var(--nt-crimson);color:#fff;font-size:12px;border-radius:2px;padding:1px 7px;font-family:'Plus Jakarta Sans',sans-serif;}
.nt-mark{border:none;background:none;color:var(--nt-navy);font-size:12px;font-weight:700;cursor:pointer;padding:4px 6px;border-radius:2px;font-family:inherit;}
.nt-mark:hover{background:var(--nt-info-bg);}
.nt-mark[disabled]{opacity:.45;cursor:default;background:none;}
.nt-tabs{display:flex;gap:4px;padding:0 16px 10px;border-bottom:1px solid var(--nt-line);}
.nt-tabs button{border:none;background:none;padding:6px 10px;border-radius:2px;font-size:12px;font-weight:700;color:var(--nt-muted);cursor:pointer;font-family:inherit;}
.nt-tabs button.on{background:var(--nt-bg-alt);color:var(--nt-ink);}
.nt-list{max-height:380px;overflow-y:auto;border-radius:0 0 4px 4px;overscroll-behavior:contain;}
.nt-it{position:relative;display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid #f0f2f6;cursor:pointer;transition:background .12s;width:100%;background:none;border-left:none;border-right:none;border-top:none;text-align:left;font-family:inherit;color:inherit;}
.nt-it:last-child{border-bottom:none;}
.nt-it:hover,.nt-it:focus-visible{background:var(--nt-bg-alt);outline:none;}
.nt-it.nt-new{background:#f6f9ff;}
.nt-it.nt-new::after{content:"";position:absolute;right:16px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--nt-navy);}
.nt-ic{width:36px;height:36px;border-radius:2px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nt-ic svg{width:16px;height:16px;}
.nt-t{flex:1;min-width:0;padding-right:14px;}
.nt-t p{margin:0;font-size:13px;line-height:1.45;color:var(--nt-ink);word-wrap:break-word;}
.nt-it.nt-new .nt-t p{font-weight:600;}
.nt-t small{display:block;font-size:11px;color:var(--nt-muted);margin-top:3px;}
.nt-empty{padding:34px 20px;text-align:center;color:var(--nt-muted);font-size:13px;}
.nt-empty .nt-ic{width:48px;height:48px;border-radius:2px;margin:0 auto 10px;background:var(--nt-lock-bg);color:var(--nt-muted);}

/* Colores por tipo */
.nt-t-foro{background:var(--nt-purple-bg);color:var(--nt-purple);}
.nt-t-resp{background:var(--nt-crimson-bg);color:var(--nt-crimson);}
.nt-t-sesion{background:var(--nt-info-bg);color:var(--nt-navy);}
.nt-t-material{background:var(--nt-ok-bg);color:var(--nt-ok);}
.nt-t-cert{background:var(--nt-gold-bg);color:var(--nt-gold);}
.nt-t-general{background:var(--nt-lock-bg);color:var(--nt-muted);}

@media (max-width:560px){
  #stDropNotif.nt-panel{position:fixed;top:64px;left:10px;right:10px;width:auto;max-width:none;}
  .nt-list{max-height:60vh;}
}

/* ---------- Avisos en pantalla (mensajes) ---------- */
.nt-toasts{position:fixed;top:80px;right:18px;z-index:1090;display:flex;flex-direction:column;gap:10px;width:370px;max-width:calc(100vw - 36px);pointer-events:none;}
.nt-toast{pointer-events:auto;position:relative;display:flex;gap:12px;align-items:flex-start;background:#fff;color:var(--nt-ink);border-radius:4px;padding:13px 14px 15px;box-shadow:0 18px 40px -14px rgba(11,18,32,.35);border:1px solid var(--nt-line);overflow:hidden;animation:nt-in .28s cubic-bezier(.2,.9,.3,1.2);font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
.nt-toast .nt-ic{width:34px;height:34px;border-radius:2px;}
.nt-toast__txt{flex:1;min-width:0;}
.nt-toast__txt b{display:block;font-family:'Sora',sans-serif;font-size:13.5px;font-weight:700;color:var(--nt-ink);}
.nt-toast__txt p{margin:2px 0 0;font-size:12.5px;color:var(--nt-muted);line-height:1.45;word-wrap:break-word;}
.nt-toast__x{margin-left:auto;border:none;background:none;color:var(--nt-lock);cursor:pointer;font-size:19px;line-height:1;padding:0 2px;flex-shrink:0;}
.nt-toast__x:hover{color:var(--nt-ink);}
.nt-toast__bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;animation:nt-shrink 6s linear forwards;}
.nt-toast:hover .nt-toast__bar{animation-play-state:paused;}
.nt-toast--success .nt-toast__bar{background:var(--nt-ok);}
.nt-toast--error .nt-toast__bar{background:var(--nt-crimson);}
.nt-toast--warning .nt-toast__bar{background:#E0932B;}
.nt-toast--info .nt-toast__bar{background:var(--nt-navy);}
.nt-toast--success .nt-ic{background:var(--nt-ok-bg);color:var(--nt-ok);}
.nt-toast--error .nt-ic{background:var(--nt-crimson-bg);color:var(--nt-crimson);}
.nt-toast--warning .nt-ic{background:#FCEEDD;color:var(--nt-warn);}
.nt-toast--info .nt-ic{background:var(--nt-info-bg);color:var(--nt-navy);}
.nt-toast.nt-out{animation:nt-outR .25s ease forwards;}
@keyframes nt-shrink{to{transform:scaleX(0)}}
@keyframes nt-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes nt-outR{to{opacity:0;transform:translateX(30px)}}
@media (max-width:560px){ .nt-toasts{top:72px;left:12px;right:12px;width:auto;max-width:none;} }
@media (prefers-reduced-motion:reduce){
  .nt-toast,.nt-toast.nt-out,#stDropNotif.nt-panel.st-open,#stBtnNotif.nt-bell.nt-ring svg{animation:none;}
  .nt-toast__bar{animation:none;display:none;}
}

/* ---------- Ventana de confirmación (reemplaza el confirm() del navegador) ---------- */
.nt-confirm{position:fixed;inset:0;z-index:3500;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(11,18,32,.55);backdrop-filter:blur(3px);animation:nt-fade .15s ease;}
.nt-confirm[hidden]{display:none;}
.nt-confirm__box{width:100%;max-width:420px;background:#fff;border-radius:4px;border-top:2px solid var(--nt-crimson);padding:24px 22px 20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);text-align:center;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--nt-ink);animation:nt-pop2 .2s cubic-bezier(.2,.9,.3,1.2);}
.nt-confirm__ic{width:54px;height:54px;border-radius:2px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--nt-info-bg);color:var(--nt-navy);}
.nt-confirm__ic svg{width:26px;height:26px;}
.nt-confirm.is-danger .nt-confirm__ic{background:var(--nt-crimson-bg);color:var(--nt-crimson);}
.nt-confirm__box h3{margin:0 0 8px;font-family:'Sora',sans-serif;font-size:17px;font-weight:700;color:var(--nt-ink);}
.nt-confirm__box p{margin:0 0 20px;font-size:13.5px;line-height:1.55;color:var(--nt-muted);white-space:pre-line;}
.nt-confirm__btns{display:flex;gap:10px;}
.nt-confirm__btns button{flex:1;border-radius:2px;padding:11px 14px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s;}
.nt-confirm__no{background:#fff;border:1px solid var(--nt-line);color:var(--nt-ink);}
.nt-confirm__no:hover{border-color:#c6ccd8;background:var(--nt-bg-alt);}
.nt-confirm__si{background:var(--nt-navy);border:1px solid var(--nt-navy);color:#fff;}
.nt-confirm__si:hover{background:var(--mcw-navy,#0B1220);border-color:var(--mcw-navy,#0B1220);}
.nt-confirm.is-danger .nt-confirm__si{background:var(--nt-crimson);border-color:var(--nt-crimson);}
.nt-confirm.is-danger .nt-confirm__si:hover{background:var(--mcw-crimson-dark,#6b1220);border-color:var(--mcw-crimson-dark,#6b1220);}
.nt-confirm__btns button:focus-visible{outline:3px solid rgba(10,49,105,.35);outline-offset:2px;}
body.nt-noscroll{overflow:hidden;}
@keyframes nt-fade{from{opacity:0}to{opacity:1}}
@keyframes nt-pop2{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:480px){ .nt-confirm{align-items:flex-end;padding:0;} .nt-confirm__box{max-width:none;border-radius:0;padding-bottom:26px;} .nt-confirm__btns{flex-direction:column-reverse;} }
@media (prefers-reduced-motion:reduce){ .nt-confirm,.nt-confirm__box{animation:none;} }