/* *********************************************************** */
/* Desarrollado por Herlin R. Espinosa G. (herlin25@gmail.com) */
/* *********************************************************** */

/* Campana de notificaciones de la barra superior (public/js/notification-bell.js).
   El texto del item se oculta: en la barra queda solo el icono, como el resto. */

/* El centrado vertical del icono lo resuelve la regla común de la barra superior
   (`main.css`: `.main-header.navbar .navbar-nav > .nav-item > .nav-link` con flex).
   Aquí solo se oculta el texto del item (queda el icono) y se fija su tamaño.
   `position: relative` lo declara también AdminLTE: es el ancla del .navbar-badge. */
.navbar-notification > .nav-link {
  position: relative;
  font-size: 0;
}

.navbar-notification > .nav-link > i {
  font-size: 1.1rem;
  line-height: 1;
}

/* Badge con el número de no leídas (AdminLTE ya posiciona .navbar-badge) */
.navbar-notification .ntf-bell-badge {
  font-size: 0.65rem;
  padding: 2px 5px;
}

/* Con no leídas, la campana llama un poco la atención */
.navbar-notification.has-unread > .nav-link > i {
  color: #f39c12;
  animation: ntf-bell-ring 2.5s ease-in-out 3;
  transform-origin: top center;
}

@keyframes ntf-bell-ring {
  0%, 85%, 100% { transform: rotate(0); }
  88% { transform: rotate(12deg); }
  91% { transform: rotate(-10deg); }
  94% { transform: rotate(7deg); }
  97% { transform: rotate(-4deg); }
}

/* ===== Desplegable ===== */
.ntf-bell-menu {
  max-width: 320px;
}

.ntf-bell-list {
  max-height: 320px;
  overflow-y: auto;
}

.ntf-bell-item {
  white-space: normal;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ntf-bell-item:last-child {
  border-bottom: 0;
}

.ntf-bell-item-text {
  font-size: 0.85rem;
  line-height: 1.25;
}

.ntf-bell-item-unread .ntf-bell-item-text {
  font-weight: 600;
}

.ntf-bell-item-date {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  opacity: 0.7;
}

.ntf-bell-empty {
  white-space: normal;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* En móvil el desplegable deja de colgar del <li> y pasa a ser un panel fijo de
   ancho completo. Anclado al item quedaba cortado contra el borde de la pantalla:
   el <li> está pegado a la derecha (con el menú de usuario al lado), así que una
   caja ancha alineada a ese borde se sale por la izquierda.
   Los `!important` son necesarios porque Popper escribe `position` y `transform`
   en el atributo style del elemento al abrirlo.
   El `top` llega en la variable --ntf-bell-top, que fija notification-bell.js con la
   posición real de la campana (el valor por defecto, el alto de la barra, es el
   respaldo). Va por variable + !important y no como estilo inline porque Popper
   escribe su propio `top` inline DESPUÉS, y lo pisaría. */
@media (max-width: 575.98px) {
  .navbar-notification .ntf-bell-menu {
    position: fixed !important;
    transform: none !important;
    top: var(--ntf-bell-top, 3.5rem) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    max-width: none;
  }

  /* Que el panel nunca pase de la pantalla a lo alto */
  .ntf-bell-list {
    max-height: 60vh;
  }
}