/* Enlace con icono de notificación */
.notificacion-link {
  position: relative;
  display: inline-block;
  color: #333;
  text-decoration: none;
}

.notificacion-link i {
  font-size: 1.3rem;
  color: #144F7D; 
  transition: color 0.3s ease;
}

.notificacion-link:hover i {
  color: #1e5fb7; 
}

/* 🔴 Contador del badge */
.badge {
  position: absolute;
  top: -5px;
  right: 97px;
  background: #ff0000; /* dorado vibrante */
  color: #fff;
  border-radius: 50%;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: bold;
  display: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/*  Panel tipo card */
.panel-notificaciones {
  position: fixed;
  top: 65px;
  right: 30px;
  width: 350px;
  max-height: 400px;
  overflow-y: auto;
  background: #fffdf9; 
  border: 1px solid #ffd700; 
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  z-index: 9999;
  padding: 10px 0;
  animation: aparecer 0.2s ease-in-out;
}


/* Cada item de notificación */
.item-notificacion {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s, transform 0.2s;
  cursor: default;
  border-radius: 6px; 
  margin: 0 10px 5px 10px; 
  background-color: #fff; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.item-notificacion:last-child {
  border-bottom: none;
}

/* Nuevas notificaciones */
.item-notificacion.nueva {
  background-color: #d9e8ff; 
  border-left: 4px solid #144F7D;
}

/* Hover sobre notificación */
.item-notificacion:hover {
  background-color: #fff5cc; 
  transform: translateY(-1px);
}

/* Texto principal */
.item-notificacion p {
  margin: 3px 0;
  color: #333;
}

/* Fecha */
.item-notificacion span {
  display: block;
  font-size: 12px;
  color: #777;
  margin-top: 5px;
}

/* Sin notificaciones */
.sin-notif {
  text-align: center;
  color: #777;
  font-style: italic;
  padding: 25px 10px;
  font-size: 14px;
}

/* Scroll personalizado */
.panel-notificaciones::-webkit-scrollbar {
  width: 6px;
}

.panel-notificaciones::-webkit-scrollbar-thumb {
  background-color: #a0c4ff; 
  border-radius: 6px;
}

.panel-notificaciones::-webkit-scrollbar-thumb:hover {
  background-color: #74a0ff; 
}

/* Botón “Leer más” */
.leer-mas-container {
  justify-content: center;
  align-items: center; 
  margin-top: 20px; 
  margin-bottom: 20px;
}

.leer-mas-btn {
  padding: 10px 10px; 
  background-color: #d6e7f4;
  color: #576ad4;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s;
}