/* Botón remove redondo con brillo y animaciones */
.remove-pill{
  position:absolute;
  top:-10px; right:-10px;           /* puedes ajustar aquí la posición */
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  font-weight:900; font-size:13px; line-height:1;
  color:#fff;
  background: radial-gradient(60% 60% at 50% 45%, #ff5858 0%, #d41111 70%, #8f0d0d 100%);
  border:1.5px solid var(--accent, #FFA500);   /* usa el color del borde de la tarjeta si lo pasas */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 0 10px rgba(255, 60, 60, .75),
    0 2px 6px rgba(0,0,0,.45);
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  cursor:pointer;
  outline:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.remove-pill:hover{
  transform: scale(1.12) rotate(-8deg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 0 14px rgba(255, 80, 80, .95),
    0 3px 10px rgba(0,0,0,.5);
}
.remove-pill:active{
  transform: scale(.92);
  filter: brightness(.95);
}
.remove-pill::before{
  /* la X, más fina y centrada */
  content: "×";
  font-size: 14px;
  line-height: 1;
}