/*
 * ══════════════════════════════════════════════
 *  MODO RENDIMIENTO — AFM Solutions POS v2.0
 *  Estrategia nuclear: overrides de máxima
 *  especificidad sobre TODOS los elementos.
 * ══════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────
   PASO 1 — VARIABLES: tiempos reducidos al mínimo
───────────────────────────────────────────── */
html.perf-mode {
  --transition-fast:  50ms linear;
  --transition-base:  80ms linear;
  --transition-slow:  80ms linear;
  --animation-bounce: linear;
  --animation-smooth: linear;
  --sidebar-transition: 0.08s linear;
  --blur-md: blur(0px);
  --blur-lg: blur(0px);

  --shadow-sm:    0 1px 2px rgba(0,0,0,0.10);
  --shadow-md:    0 2px 5px rgba(0,0,0,0.12);
  --shadow-lg:    0 3px 8px rgba(0,0,0,0.14);
  --shadow-xl:    0 4px 12px rgba(0,0,0,0.16);
  --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.06);
  --shadow-afm:   0 2px 6px rgba(109,40,217,0.15);

  --glass-bg:          #ffffff;
  --glass-border:      #e5e7eb;
  --glass-bg-dark:     #18181f;
  --glass-border-dark: rgba(255,255,255,0.1);
}

/* ─────────────────────────────────────────────
   PASO 2 — NUCLEAR
   animation-duration:0.001ms + iteration:1
   mata cualquier animación (incluso infinite).
───────────────────────────────────────────── */
html.perf-mode *,
html.perf-mode *::before,
html.perf-mode *::after {
  backdrop-filter:           none     !important;
  -webkit-backdrop-filter:   none     !important;
  filter:                    none     !important;
  will-change:               auto     !important;

  animation-duration:        0.001ms  !important;
  animation-iteration-count: 1        !important;
  animation-delay:           0ms      !important;

  transition-duration:        80ms    !important;
  transition-timing-function: linear  !important;
}

/* ─────────────────────────────────────────────
   PASO 3 — FONDOS SÓLIDOS
───────────────────────────────────────────── */
html.perf-mode .sidebar {
  background: #f0f0f5 !important;
  box-shadow: 1px 0 0 #e5e7eb !important;
}
html.dark.perf-mode .sidebar {
  background: #18181f !important;
  box-shadow: 1px 0 0 rgba(255,255,255,0.06) !important;
}
html.perf-mode .app-header {
  background: #ffffff !important;
  box-shadow: 0 1px 0 #e5e7eb !important;
}
html.dark.perf-mode .app-header {
  background: #18181f !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ─────────────────────────────────────────────
   PASO 4 — EXCEPCIÓN spinners (necesitan girar)
───────────────────────────────────────────── */
html.perf-mode .fa-spin,
html.perf-mode .fa-spinner,
html.perf-mode [class*="spinner"] {
  animation-duration:        0.6s     !important;
  animation-iteration-count: infinite !important;
  animation-timing-function: linear   !important;
}

/* ─────────────────────────────────────────────
   PASO 5 — SOMBRAS SIMPLIFICADAS
───────────────────────────────────────────── */
html.perf-mode .btn-pago {
  box-shadow: 0 2px 4px rgba(0,0,0,0.10) !important;
}
html.perf-mode .btn-pago:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.14) !important;
  transform: translateY(-1px) !important;
}
html.perf-mode [class*="modal"],
html.perf-mode [id*="modal"] {
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

/* ─────────────────────────────────────────────
   PASO 6 — INDICADOR VISUAL INEQUÍVOCO
───────────────────────────────────────────── */
html.perf-mode #btn-perf-mode {
  background: rgba(16,185,129,0.15) !important;
  border-left: 3px solid #10b981 !important;
}
html.perf-mode #btn-perf-mode i,
html.perf-mode #btn-perf-mode .perf-label,
html.perf-mode #btn-perf-mode .sidebar-link-label {
  color: #10b981 !important;
}

/* Indicador: solo el botón en sidebar cambia de color */