/* =====================================================================
   RV25 Relojería · BOTÓN FAVORITO ♡ Y CONTADORES
   ---------------------------------------------------------------------
   .favorito        el corazón de cada reloj (tarjetas y ficha). Vacío
                    = no guardado; lleno y rojo vino = guardado
                    (aria-pressed="true"). Late una vez al guardarlo.
   .contador        el numerito sobre el corazón y la bolsa de la barra
   Lo arma js/nucleo/favoritos.js (boton) y lo mantiene al día
   js/secciones/panel-favoritos.js.
   ===================================================================== */

.favorito {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: #FFFFFF; color: var(--tinta);
  box-shadow: 0 1px 3px rgba(6, 26, 40, .12);
  transition: transform .15s ease, color .2s ease;
}
.favorito .icono { width: 20px; height: 20px; }
.favorito:hover { transform: scale(1.06); }
.favorito[aria-pressed="true"] { color: var(--favorito); --corazon-relleno: currentColor; }
.favorito[aria-pressed="true"] .icono { animation: favorito-late .35s ease; }
@keyframes favorito-late { 50% { transform: scale(1.25); } }

/* Numerito sobre los íconos de la barra (favoritos y carrito) */
.contador {
  position: absolute; top: 4px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--acento); color: var(--noche);
  font: 700 11px/18px var(--letra); text-align: center; letter-spacing: 0;
}
.contador[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .favorito[aria-pressed="true"] .icono { animation: none; }
}