/* CSS/perf.css — Rendimiento: animaciones que no castiguen al teléfono. Se carga AL FINAL para ganar a las demás hojas.
   Medido en Fondos y Reservas con la CPU 4x más lenta (un celular promedio): con la pantalla quieta el teléfono
   trabajaba el 100% del tiempo y la vista iba a 7–14 cuadros por segundo. Las causas eran animaciones infinitas que
   obligan a REDIBUJAR (no solo a mover capas) en cada cuadro:
     · background-position + mix-blend-mode (destello de las medallas),
     · box-shadow que late (insignia de la campana, punto de ayuda, íconos del centro de notificaciones),
     · paneles CERRADOS que seguían animándose aunque no se vieran (ficha de cliente, centro de notificaciones).
   Regla para lo que venga: animar solo transform y opacity; nada infinito que redibuje; nada animado en lo oculto. */

/* ---------------------------------------------------------------
   1. Paneles cerrados: sus animaciones se detienen (siguen montados, invisibles, y se redibujaban sin parar)
   --------------------------------------------------------------- */
#crm-profile-modal:not(.is-open) *,
.notification-drawer:not(.active) * {
    animation-play-state: paused !important;
}

/* ---------------------------------------------------------------
   2. Latidos con box-shadow: llaman la atención unas veces y se quedan quietos
   --------------------------------------------------------------- */
.bell-badge.nc-urgent,
.help-btn.has-dot .help-dot,
.nc-ico {
    animation-iteration-count: 4 !important;
}

/* ---------------------------------------------------------------
   3. Destello de las medallas (Fondos y Reservas, logros del Inicio)
   Antes: el degradado se desplazaba con background-position y se mezclaba con mix-blend-mode → redibujo por cuadro.
   Ahora: la misma franja de luz GIRA dentro del círculo (transform + opacity): lo hace la tarjeta gráfica y, como gira
   sobre su centro, nunca se sale de la medalla.
   --------------------------------------------------------------- */
.sv-medal::after,
.ha-shine {
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%) !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    mix-blend-mode: normal !important;
    opacity: 0;
    will-change: transform, opacity;
}
.sv-medal::after { animation: perfShine 4.5s ease-in-out infinite !important; }
.ha-shine { animation: perfShine 5s ease-in-out infinite !important; }
@keyframes perfShine {
    0%, 55% { opacity: 0; transform: rotate(-70deg); }
    65%     { opacity: 1; }
    90%     { opacity: 0.8; }
    100%    { opacity: 0; transform: rotate(110deg); }
}

/* ---------------------------------------------------------------
   4. Fondos y Reservas: la vida al ENTRAR, luego quietud
   Medido: mientras cualquiera de estas animaciones infinitas corre, la vista se recalcula en cada cuadro (35% del
   procesador con la pantalla quieta; 4% sin ellas). Se mueven unas veces al abrir la vista (~15 s) y descansan;
   como la vista oculta usa display:none, al volver a abrirla se animan de nuevo.
   --------------------------------------------------------------- */
#savings-view .sv-hero::after { animation-iteration-count: 2 !important; }          /* moneda: baja y sube una vez */
#savings-view .sv-hero-glow { animation-iteration-count: 2 !important; }
#savings-view .sv-level-fill::after { animation-iteration-count: 3 !important; }
#savings-view .sv-ach.is-unlocked .sv-medal { animation-iteration-count: 3 !important; }
#savings-view .sv-medal::after { animation-iteration-count: 3 !important; }
.ha-shine { animation-iteration-count: 3 !important; }

/* Movimiento reducido: todo quieto */
@media (prefers-reduced-motion: reduce) {
    .sv-medal::after, .ha-shine { animation: none !important; opacity: 0; }
}