/* ============================================================
   PuntoCatalogo — Botón Favorito (corazón)
   ============================================================ */

/* Contenedor relativo que envuelve la imagen del producto */
.producto-img-wrap {
  position: relative;
  display: block;
}

/* ── Botón corazón ── */
.btn-favorito {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  -webkit-tap-highlight-color: transparent;
}

.btn-favorito:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.12);
}

.btn-favorito svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #555;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.25s ease, stroke 0.25s ease;
  pointer-events: none;
}

/* Favorito activo: corazón relleno */
.btn-favorito.activo svg {
  fill: #e74c3c;
  stroke: #e74c3c;
}

/* Animación pop al hacer click */
@keyframes fav-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}

.btn-favorito.animando {
  animation: fav-pop 0.35s ease forwards;
}

/* ── Temas oscuros: fondo semi-transparente más oscuro ── */
[data-theme="dark"] .btn-favorito,
[data-theme="dark-blue"] .btn-favorito,
[data-theme="oscuro-naranja"] .btn-favorito {
  background: rgba(30, 30, 30, 0.82);
}

[data-theme="dark"] .btn-favorito svg,
[data-theme="dark-blue"] .btn-favorito svg,
[data-theme="oscuro-naranja"] .btn-favorito svg {
  stroke: #ccc;
}

[data-theme="dark"] .btn-favorito:hover,
[data-theme="dark-blue"] .btn-favorito:hover,
[data-theme="oscuro-naranja"] .btn-favorito:hover {
  background: rgba(30, 30, 30, 1);
}