/* =========================================================
   Animación disco en clave VEXUM: azul y blanco, sobria.
   Se apaga con el botón 🪩 (html.no-disco).
   ========================================================= */

/* Bola de espejos plateada con reflejos azules */
.discoball { position: relative; display: inline-block; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 32% 28%, #ffffff 0 5%, #dfe6f2 14%, #8f9bb3 48%, #3b4357 80%, #1a1e29 100%);
  box-shadow: 0 0 28px rgba(0, 102, 255, .45), 0 0 70px rgba(0, 102, 255, .2), inset -8px -10px 20px rgba(0, 0, 0, .5); overflow: hidden; }
.discoball::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image:
    repeating-linear-gradient(0deg, rgba(11, 11, 11, .4) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(11, 11, 11, .4) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, transparent 10%, rgba(61, 133, 255, .55) 35%, rgba(255, 255, 255, .45) 50%, rgba(0, 102, 255, .5) 65%, transparent 90%);
  background-size: auto, 10px 100%, 220% 100%;
  animation: ball-spin 3.2s linear infinite; }
.discoball::after { content: ""; position: absolute; top: 10px; left: 14px; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, .9); animation: glint 2.2s ease-in-out infinite; }
.ball-hang { display: flex; flex-direction: column; align-items: center; margin: -2rem auto 1rem; }
.ball-hang::before { content: ""; width: 1px; height: 34px; background: linear-gradient(transparent, rgba(255, 255, 255, .45)); }
@keyframes ball-spin { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 40px 0, -220% 0; } }
@keyframes glint { 0%, 100% { opacity: .15; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.2); } }

/* Login: focos azules que barren la pista */
.login { position: relative; overflow: hidden; }
.login::before, .login::after { content: ""; position: absolute; top: -10%; width: 38%; height: 130%; pointer-events: none; opacity: .55;
  background: linear-gradient(180deg, rgba(61, 133, 255, .55), rgba(0, 102, 255, 0) 70%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); filter: blur(18px); transform-origin: 50% 0; }
.login::before { left: 8%; animation: sweep-l 8s ease-in-out infinite alternate; }
.login::after { right: 8%; animation: sweep-r 9s ease-in-out infinite alternate; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 65%); }
@keyframes sweep-l { from { transform: rotate(-22deg); } to { transform: rotate(14deg); } }
@keyframes sweep-r { from { transform: rotate(20deg); } to { transform: rotate(-16deg); } }

/* Reflejos de la bola girando por la pantalla del login */
.login .card::after { content: ""; position: absolute; inset: -60vh -60vw; z-index: -1; pointer-events: none; opacity: .28;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(61, 133, 255, .9) 0 1.5px, transparent 2px);
  background-size: 140px 120px, 190px 170px; background-position: 0 0, 60px 40px;
  animation: reflections 40s linear infinite; }
@keyframes reflections { to { transform: rotate(360deg); } }

/* Resplandor de la marca moviéndose lento (fondo de todo el sistema) */
body::before { animation: glow-drift 18s ease-in-out infinite alternate; }
@keyframes glow-drift {
  from { background-position: 0 0, 0 0; transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-6%, 3%, 0); } }

/* Línea de luz bajo el menú */
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue) 30%, #fff 50%, var(--blue) 70%, transparent);
  background-size: 200% 100%; opacity: .8; animation: lights 6s linear infinite; }
@keyframes lights { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Venta que sube en vivo: destello azul */
.kpi .value.bump { animation: bump 1.2s var(--ease-out); }
@keyframes bump { 0% { color: var(--blue-soft); text-shadow: 0 0 18px rgba(0, 102, 255, .9); transform: scale(1.06); } 100% { transform: none; } }

/* Destellos al guardar */
.confetti { position: fixed; z-index: 200; pointer-events: none; width: 6px; height: 6px; border-radius: 50%;
  animation: confetti 900ms var(--ease-out) forwards; box-shadow: 0 0 8px currentColor; }
@keyframes confetti { to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }

.disco-toggle { font-size: 1rem; line-height: 1; padding: .3rem .5rem; }

/* Apagado */
html.no-disco *, html.no-disco *::before, html.no-disco *::after { animation: none !important; }
html.no-disco .login::before, html.no-disco .login::after, html.no-disco .login .card::after, html.no-disco .topbar::after { display: none; }
html.no-disco .disco-toggle { filter: grayscale(1); opacity: .5; }
@media (prefers-reduced-motion: reduce) { .login::before, .login::after, .login .card::after, body::before { animation: none; } }