/* Campana de notificaciones (inclusion/barramenus.php + js/notificaciones/campana_notificaciones.js). */
.campana { position:relative; flex:none; }
.campana-btn { position:relative; }
.campana-insignia { position:absolute; top:2px; right:0; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border-radius:999px; border:2px solid var(--fondo-blanco,#fff); background:var(--red, var(--fondo-rojo,#e11d2e)); color:var(--fondo-blanco,#fff); font-size:10.5px; font-weight:700; line-height:1; animation:campanaLate .4s ease; }
.campana-insignia[hidden] { display:none; }
@keyframes campanaLate { 0% { transform:scale(.4); } 70% { transform:scale(1.15); } 100% { transform:scale(1); } }
.campana-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:150; width:min(380px, calc(100vw - 20px)); max-height:min(560px, calc(100vh - 90px)); display:flex; flex-direction:column; border-radius:20px; background:var(--fondo-blanco,#fff); box-shadow:0 18px 48px var(--sombra-tinta-a18-2,rgba(60,20,10,.18)), 0 2px 6px var(--sombra-tinta-a08-2,rgba(60,20,10,.08)); opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; transition:opacity .18s ease, transform .18s ease; overflow:hidden; }
.campana-panel.abierta { opacity:1; transform:none; }
.campana-panel[hidden] { display:none; }
.campana-cabeza { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px 8px; }
.campana-cabeza h2 { margin:0; font-size:18px; }
.campana-todas { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 10px; border:0; border-radius:999px; background:none; color:var(--texto-rojo-2,#b4141f); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.campana-todas .ic { width:14px; height:14px; }
.campana-todas:hover:not(:disabled) { background:var(--fondo-rojo-claro,#fff1ee); }
.campana-todas:disabled { color:var(--soft); cursor:default; opacity:.7; }
.campana-lista { list-style:none; margin:0; padding:0 6px 8px; overflow-y:auto; }
.campana-item { border-radius:14px; transition:background .15s ease, opacity .25s ease, transform .25s ease; }
.campana-item.nueva { background:var(--fondo-hover-salmon-claro,#fff6f3); }
.campana-item.saliendo { opacity:0; transform:translateX(16px); }
.campana-enlace { display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; color:var(--ink); text-decoration:none; }
.campana-enlace:hover { background:var(--fondo-rojo-claro,#fff1ee); }
.campana-foto { width:44px; height:44px; flex:none; border-radius:50%; border:2px solid var(--fondo-blanco,#fff); object-fit:cover; background:var(--fondo-crema-5,#f3e9e4); }
.campana-texto { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:13.5px; line-height:1.35; overflow-wrap:anywhere; }
.campana-texto time { font-size:12px; color:var(--soft); }
.campana-item.nueva .campana-texto time { color:var(--texto-rojo-2,#b4141f); font-weight:600; }
.campana-punto { width:10px; height:10px; flex:none; border-radius:50%; background:var(--red, var(--fondo-rojo,#e11d2e)); }
.campana-acciones { display:flex; gap:8px; padding:0 10px 10px 64px; }
.campana-acciones .btn { flex:1 1 0; }
.campana-hecho { display:flex; align-items:center; gap:6px; margin:0; padding:0 10px 10px 64px; font-size:13px; font-weight:600; color:var(--texto-verde-oscuro-3,#17703c); }
.campana-hecho .ic { width:16px; height:16px; }
.campana-vacia { display:grid; justify-items:center; gap:6px; padding:28px 12px; color:var(--soft); text-align:center; font-size:14px; }
.campana-vacia .ic { width:36px; height:36px; opacity:.7; }
.campana-vacia p { margin:0; }
@media (max-width:768px){
  header > .campana { margin-left:auto; }
  header > .campana + .menudrop + .menu-hamburguesa, header > .campana ~ .menu-hamburguesa { margin-left:8px; }
  .campana-btn { width:48px; height:48px; border-radius:16px; background:var(--fondo-rojo-claro,#fff1ee); }
  .campana-panel { position:fixed; top:calc(var(--hdr, 64px) + 6px); right:10px; left:10px; width:auto; }
}
@media (prefers-reduced-motion:reduce){ .campana-panel, .campana-item, .campana-insignia { transition:none; animation:none; } }