/* ============================================================
   Campanita (centro de notificaciones) + aviso flotante.
   Compartido por el mapa (app.blade) y el panel del cliente.
   ============================================================ */

/* Aviso amable (ubicación, etc.) */
.map-toast {
  position: absolute; top: 70px; left: 12px; right: 12px; z-index: 600;
  max-width: 440px; margin: 0 auto;
  background: rgba(15,15,15,.94); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: .85rem 1.1rem; border-radius: 14px; font-size: .86rem; line-height: 1.4;
  text-align: center; box-shadow: 0 12px 34px rgba(0,0,0,.32);
  opacity: 0; transform: translateY(-12px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.map-toast.show { opacity: 1; transform: none; }

/* ---------- Centro de notificaciones (campanita) ---------- */
.notif-dot {
  position: absolute; top: 5px; right: 5px; width: 9px; height: 9px;
  background: var(--domicilio); border-radius: 50%; border: 2px solid var(--white);
}
.notif-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.25); animation: notifFade .22s ease; }
.notif-backdrop.hidden { display: none; }
.notif-backdrop.is-closing { animation: notifFadeOut .24s ease forwards; }
.notif-panel {
  position: fixed; top: 58px; left: 10px; right: 10px; z-index: 950;
  max-width: 380px; margin-left: auto;
  background: var(--white); border-radius: 16px; box-shadow: 0 14px 44px rgba(0,0,0,.24);
  max-height: 72dvh; display: flex; flex-direction: column; overflow: hidden;
  transform-origin: top right;
  animation: notifIn .3s cubic-bezier(.2, .8, .25, 1);
}
.notif-panel.hidden { display: none; }
.notif-panel.is-closing { animation: notifOut .24s ease forwards; }
@keyframes notifIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes notifOut { to { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes notifFade { from { opacity: 0; } }
@keyframes notifFadeOut { to { opacity: 0; } }
.notif-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--gray-100); font-weight: 700;
}
.notif-panel__close { width: 30px; height: 30px; border-radius: 50%; background: var(--gray-100); display: grid; place-items: center; color: var(--gray-700); }
.notif-panel__list { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); }
.notif-item.is-unread { background: #fbf6ec; }
.notif-item__title { font-weight: 600; font-size: .95rem; }
.notif-item__body { font-size: .88rem; color: var(--gray-700); margin-top: 3px; line-height: 1.35; }
.notif-item__time { font-size: .72rem; color: var(--gray-500); margin-top: 5px; }
.notif-empty { padding: 2.5rem 1rem; text-align: center; color: var(--gray-500); font-size: .9rem; }
.notif-panel__foot { padding: 12px 16px; border-top: 1px solid var(--gray-100); }
.notif-panel__foot .btn { padding: .7rem 1rem; font-size: .92rem; }

/* Estado de notificaciones en el pie del panel */
.notif-status {
  display: flex; align-items: center; gap: 9px;
  font-size: .86rem; color: var(--gray-500, #8a8a8a); line-height: 1.35;
  padding: 2px 2px;
}
.notif-status svg { flex: 0 0 auto; width: 17px; height: 17px; }
.notif-status__dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--black, #0d0d0d); margin-left: auto;
}

/* hidden debe ganar SIEMPRE en el pie del panel (la clase .btn pone display propio) */
.notif-panel__foot [hidden] { display: none !important; }

/* Activadas: la campana respira (se colorea y descolorea) y el punto late al tiempo */
.notif-status--on svg,
.notif-status--on .notif-status__dot { animation: bellBreathe 2.2s ease-in-out infinite; }
.notif-status--on .notif-status__dot { background: currentColor; }
@keyframes bellBreathe {
  0%, 100% { color: #c6c6c6; opacity: .75; }
  50% { color: var(--black, #0d0d0d); opacity: 1; }
}

/* Notificaciones: clickeables + botón de borrar (las personales) */
.notif-item { position: relative; }
.notif-item.is-link { cursor: pointer; }
.notif-item.is-link:hover { background: var(--gray-50); }
.notif-item__title { padding-right: 22px; }
.notif-item__del {
  position: absolute; top: 9px; right: 10px;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: transparent; color: var(--gray-400, #b0b0b0);
  font-size: 19px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.notif-item__del:hover { background: var(--gray-100); color: var(--black); }