/* ============================================================ LOVDOG — lovdog-likes.css Sistema de likes: corazones + avatares apilados + marcos Ubícalo en: /public_html/assets/css/lovdog-likes.css USO: añadir en el de cualquier página que use likes ============================================================ */ /* ── Fila contenedora del like (inline) ─────────────────────── */ .lv-like-row { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; line-height: 1; } /* ── Número de likes ─────────────────────────────────────────── */ .lv-like-num { font-size: .82rem; font-weight: 700; color: #e05577; font-family: 'Outfit', sans-serif; white-space: nowrap; min-width: 0; } .lv-like-num:empty { display: none; } /* ── Etiqueta "Me gusta" / "Te gusta" ───────────────────────── */ .lv-like-label { font-size: .82rem; font-weight: 600; color: #e05577; font-family: 'Outfit', sans-serif; white-space: nowrap; } /* ── Botón corazón ───────────────────────────────────────────── */ .lv-like-btn { background: none; border: none; padding: 0; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .lv-like-btn svg { width: 22px; height: 22px; display: block; transition: transform .15s cubic-bezier(.34,1.56,.64,1); } /* Latido en bucle cuando está liked */ @keyframes lv-heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.14); } 70% { transform: scale(1); } 100% { transform: scale(1); } } .lv-like-btn.liked svg { animation: lv-heartbeat 2.4s ease-in-out infinite; will-change: transform; } /* Bounce al hacer click */ .lv-like-btn.bounce svg { animation: none !important; transform: scale(1.35); } /* Cursor default cuando ya votó (like permanente) */ .lv-like-btn.liked { cursor: default; } /* ── Contenedor de avatares apilados ─────────────────────────── */ .lv-like-avs { display: flex; align-items: center; flex-shrink: 0; overflow: visible; max-width: 130px; margin-left: 4px; padding: 4px 2px; /* espacio para que el glow de marcos no se recorte */ } .lv-like-avs:empty { display: none; margin: 0; } .lv-like-avs-inner { display: flex; align-items: center; overflow: visible; padding: 2px 0; } /* Scroll automático cuando hay >5 avatares */ .lv-like-avs-inner.do-scroll { animation: lv-avs-scroll 16s linear infinite; } @keyframes lv-avs-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── Avatar imagen ───────────────────────────────────────────── */ .lav { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; object-fit: cover; flex-shrink: 0; background: #E8F5EE; } /* ── Avatar iniciales (sin foto) ─────────────────────────────── */ .lav-init { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; flex-shrink: 0; background: #4A9B6F; color: #fff; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Fredoka', sans-serif; } /* Primer avatar sin margen izquierdo */ .lav:first-child, .lav-init:first-child { margin-left: 0; } /* ── Marco activo en carrusel ────────────────────────────────── */ /* El CSS de cada marco se inyecta dinámicamente por JS */ /* Este es el placeholder para la animación base */ .lav.lv-marco-activo { border: 1.5px solid currentColor !important; animation: lv-marco-anim 2.4s ease-in-out infinite !important; transform-origin: center; } /* ── Contador de texto opcional ─────────────────────────────── */ .lv-like-count-txt { font-size: .78rem; color: #9BB5A5; white-space: nowrap; font-family: 'Outfit', sans-serif; } /* ── Variante bloque (para usar entre secciones de contenido) ── */ .lv-like-block { margin: 32px 0 24px; display: flex; align-items: center; gap: 10px; }