@keyframes member-counter-dance{ 0%,100%{transform:translateY(0) rotate(0) scale(1)} 20%{transform:translateY(-5px) rotate(-10deg) scale(1.05)} 40%{transform:translateY(0) rotate(8deg) scale(1)} 60%{transform:translateY(-3px) rotate(-6deg) scale(1.05)} 80%{transform:translateY(0) rotate(3deg) scale(1)} } @keyframes member-counter-pop{ 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.05);opacity:1} 100%{transform:scale(1);opacity:1} } .member-counter-avatar{ width:38px;height:38px; border-radius:50%; background:#3b89ce; border:3px solid #fff; display:flex;align-items:center;justify-content:center; flex-shrink:0; box-shadow:0 8px 18px rgba(20,55,51,.18) } .member-counter-avatar--dance{ animation:member-counter-dance .9s ease-in-out 2 } .member-counter-expanded{ border:0; padding:0; background:none; cursor:pointer; text-align:left; font-family:inherit } /* Móvil: pestaña + pastilla flotantes */ .member-counter-tab{ position:fixed; top:70px; right:0; width:14px; height:34px; border:0; border-radius:10px 0 0 10px; background:#3b89ce; opacity:.5; z-index:640; cursor:pointer } .member-counter-tab.member-counter-collapsed--hidden{display:none} .member-counter-widget{ position:fixed; top:70px; right:12px; display:none; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:5px 14px 5px 5px; box-shadow:0 10px 24px rgba(20,55,51,.2); z-index:640 } .member-counter-widget.member-counter-expanded--open{ display:flex; animation:member-counter-pop .35s ease-out } .member-counter-widget .member-counter-avatar{width:32px;height:32px} .member-counter-copy{display:flex;flex-direction:column;line-height:1.25} .member-counter-number{font-size:.82rem;font-weight:800;color:var(--text)} .member-counter-caption{font-size:.58rem;color:var(--muted);font-weight:600} /* Escritorio: overlay fijo alineado con el sidebar, colapsado por defecto. Vive fuera de #app (se monta una sola vez en ) para que la navegación entre pantallas —que reconstruye #app por completo en cada clic— nunca lo toque. Si viviera dentro del sidebar, cada clic lo destruiría y recrearía, reiniciando su animación de aparición y dando la sensación de "salto". */ .sidebar-counter-zone{ display:none; position:fixed; left:14px; top:340px; /* JS recalcula esto justo debajo del último botón del menú */ width:calc(var(--sidebar-w) - 28px); z-index:90 } .sidebar-counter-collapsed{ width:38px;height:38px; margin-left:12px; border:0; padding:0; background:none; cursor:pointer; display:flex } .sidebar-counter-collapsed .member-counter-avatar{width:38px;height:38px} .sidebar-counter-collapsed.member-counter-collapsed--hidden{display:none} .sidebar-counter{ display:none; align-items:center; gap:10px; width:100%; padding:8px 12px; border-radius:12px; background:var(--surface-2) } .sidebar-counter.member-counter-expanded--open{ display:flex; animation:member-counter-pop .3s ease-out } .sidebar-counter .member-counter-avatar{width:34px;height:34px} .sidebar-counter-copy{display:flex;flex-direction:column;line-height:1.25} .sidebar-counter-copy strong{font-size:.78rem;color:var(--text)} .sidebar-counter-copy small{font-size:.6rem;color:var(--muted);font-weight:600} @media(min-width:1024px){ html.is-desktop .member-counter-tab, html.is-desktop .member-counter-widget{ display:none } html.is-desktop .sidebar-counter-zone{ display:block } }