Zona (perfil) — tamaño de cards/letras y hover del profile-link distintos

17 jul 2026

Producción

Concorde

Qué está mal

Las cards y las letras tienen otro tamaño y desaprovechan el espacio: «Tu actividad» en Producción son skeletons grises vacíos, en Concorde son pills con datos (Ganadas, Consignaciones…).

El hover del profile-link (Tu perfil / Historial) es distinto al de Concorde.

Cómo se corrige

Usar las cards de tamaño fijo de Concorde (375×221, letras 15px) y llenar «Tu actividad» con pills en lugar de skeletons.

Aplicar el hover del ProfileButton de Concorde: círculo relleno naranja + chevron blanco + lift.

Código producción

// PROD — cards fluidas, texto sm/xs, «Tu actividad» = skeletons vacíos
<section className="rounded-2xl bg-white p-4 shadow-[0_0_16px_rgba(0,0,0,0.14)]">
  …
  <div className="text-sm text-[#3b1782]">SubasCoins: >S< 0</div>
</section>

// Tu actividad → placeholders grises (espacio desaprovechado)
<div className="grid grid-cols-2 gap-x-8 gap-y-7">
  <div className="h-10 rounded-full bg-[#d3d6df] w-full"></div>
  … (4 skeletons)
</div>

// profile-link con hover propio (distinto a Concorde)
<a className="profile-link">Ir al Perfil …</a>

Código Concorde

ver código Concorde

// Concorde — cards fijas 375×221 + pills de actividad con datos
<section className="wbc">  {/* width:375px; height:221px; letras 15px */}
  <span className="wbc__row-label">SubasCoins:</span>
</section>

// Tu actividad → pills reales (aprovechan el espacio)
<span className="actpill actpill--orange">
  <span className="actpill__badge">1</span>
  <span className="actpill__label">Ganadas</span>
</span>

/* ProfileButton — el hover correcto */
.pprofilebtn:hover .pprofilebtn__circle {
  background: linear-gradient(90deg, #ff9639, #ef852e 40%, #be3d00);
  color: #ffffff;                       /* chevron blanco */
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  transform: translateY(-1px);          /* lift */
}