/* css/likes.css */
/* Pills para miniaturas (grid) */
.vote-pills {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.vote-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, background .12s ease;
  border: none;
}

.vote-pill:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, .7);
}

.vote-pill .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.vote-pill.active-like {
  background: rgba(0, 128, 0, .7);
}

.vote-pill.active-dislike {
  background: rgba(128, 0, 0, .7);
}

/* Manita amarilla si tiene likes o está activo por el usuario */
.vote-pill.has-votes .icon,
.vote-pill.active-like .icon,
.vote-pill.active-dislike .icon {
  color: #ffd700;
}

/* En el modal (si quieres reforzar estilos fuera del inline) */
.modal-votes {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  gap: 8px;
}