/* =========================================================
   Sistema de notificacions
   Parteix de base.css.
   ========================================================= */

.notif-wrap{position:relative}
.notif-campana{position:relative;font-size:17px;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;border:1px solid var(--linia-forta);background:#fbfcfb}

/* Toc breu quan arriba una notificació nova en directe (SSE) */
.notif-campana-nova{animation:notif-tocar .5s ease}
@keyframes notif-tocar{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-14deg)}
  40%{transform:rotate(11deg)}
  60%{transform:rotate(-7deg)}
  80%{transform:rotate(4deg)}
}
@media(prefers-reduced-motion:reduce){
  .notif-campana-nova{animation:none}
}
.notif-campana .icona-svg{color:var(--gris)}
.notif-campana:hover .icona-svg{color:var(--verd-fort)}
.notif-campana:hover{background:var(--verd-clar);border-color:var(--verd-mig)}
.notif-comptador{position:absolute;top:-4px;right:-4px;background:var(--vermell);color:#fff;font-size:9.5px;font-weight:800;min-width:16px;height:16px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--card)}

.notif-desplegable{display:none;position:fixed;width:340px;max-width:calc(100vw - 20px);max-height:420px;background:var(--card);border:1px solid var(--linia);border-radius:var(--radi-petit);box-shadow:var(--ombra-hover);overflow:hidden;z-index:100}
.notif-desplegable.obert{display:flex;flex-direction:column}
.notif-cap{padding:12px 14px;border-bottom:1px solid var(--linia);display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700}
.notif-cap button{font-size:10.5px;font-weight:700;color:var(--verd-fort)}
.notif-cap button:hover{text-decoration:underline}

.notif-push-fila{padding:8px 14px;border-bottom:1px solid var(--linia);background:#fbfcfb}
.notif-push-fila button{width:100%;font-size:11.5px;font-weight:700;color:var(--verd-fort);background:var(--verd-clar);border:1px solid var(--verd-mig);border-radius:8px;padding:7px 10px}
.notif-push-fila button:hover{background:var(--verd-mig);color:#fff}
.notif-push-fila button[data-actiu="1"]{color:var(--gris);background:#fbfcfb;border-color:var(--linia-forta)}

/* Només té sentit al mòbil (és on el panell no queda obert tota
   l'estona) — en escriptori es queda amagat, encara que la lògica
   JS que hi ha darrere segueixi funcionant igual si mai cal. */
@media(min-width:641px){
  .notif-push-fila{display:none !important}
}

.notif-llista{overflow-y:auto;flex:1}
.notif-item{position:relative;padding:11px 34px 11px 14px;border-bottom:1px solid var(--linia);cursor:pointer;transition:.13s}
.notif-esborrar{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:6px;font-size:14px;line-height:1;color:var(--gris-clar)}
.notif-esborrar:hover{background:var(--vermell-clar);color:var(--vermell)}
.notif-item:hover{background:#fbfcfb}
.notif-item.no-llegida{background:var(--verd-clar)}
.notif-item.no-llegida:hover{background:#e3f3e4}
.notif-item .notif-text{font-size:12.5px;font-weight:600;line-height:1.4;color:var(--tinta)}
.notif-item.no-llegida .notif-text{font-weight:700}
.notif-item .notif-meta{font-size:10.5px;color:var(--gris-clar);margin-top:4px}

/* ---------- Safata de gestió, fusionada aquí amb color propi ---------- */
.notif-item.origen-gestio{border-left:3px solid #607D8B;background:#f4f6f7}
.notif-item.origen-gestio:hover{background:#e9edee}
.notif-etiqueta-gestio{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:#455a64;background:#dde4e6;border-radius:20px;padding:2px 7px;margin-bottom:5px}
.notif-veure-gestio{display:block;text-align:center;font-size:11.5px;font-weight:700;color:var(--verd-fort);padding:10px;border-top:1px solid var(--linia);text-decoration:none;flex-shrink:0}
.notif-veure-gestio:hover{background:var(--verd-clar)}