/* likes.css */

/* ── Contenedor del botón ── */
.like-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2.5rem 0 2rem;
  gap: .6rem;
}

/* ── Texto sobre el botón ── */
.like-container::before {
  content: '¿Te resultó útil?';
  font-size: .85rem;
  color: #999;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ── Botón corazón ── */
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #fff;
  border: 2px solid #B9976F;
  border-radius: 999px;
  padding: .75rem 2rem;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  color: #B9976F;
  transition: background .25s, color .25s, transform .15s, box-shadow .25s;
  box-shadow: 0 2px 12px rgba(185,151,111,.15);
  user-select: none;
}

.like-btn::before {
  content: '♡';
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .2s;
}

.like-btn:hover {
  background: #B9976F;
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 4px 20px rgba(185,151,111,.35);
}

.like-btn:hover::before {
  transform: scale(1.15);
}

/* Estado activo */
.like-btn--active {
  background: #B9976F;
  color: #fff;
  border-color: #B9976F;
}

.like-btn--active::before {
  content: '♥';
}

/* Animación pulse */
@keyframes like-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.like-btn--pulse {
  animation: like-pulse .45s ease forwards;
}

/* ── Toast ── */
#like-toast {
  position: fixed;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 16, 12, 0.96);
  border: 1px solid rgba(185,151,111,.55);
  border-radius: 14px;
  padding: 1rem 1.6rem;
  color: #e8ddd0;
  font-size: 1rem;
  text-align: center;
  max-width: min(420px, 90vw);
  z-index: 9999;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  transition: bottom .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}

#like-toast.like-toast--visible {
  bottom: 2rem;
  pointer-events: auto;
}

#like-toast a {
  color: #B9976F;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#like-toast a:hover { color: #d4b48a; }