/* ============================================================
   ProfeAcademī — Lite Mode (Modo Rendimiento)
   ============================================================
   Carga DESPUÉS de todos los demás estilos para máximo peso.
   Activa con: document.documentElement.classList.add('lite-mode')

   Selectores duplicados html.lite-mode / body.lite-mode para cubrir
   tanto la detección temprana (html) como reflejos del toggle (body).
   ============================================================ */


/* ── 1. Scroll suave → desactivar ── */
html.lite-mode,
html.lite-mode body {
  scroll-behavior: auto !important;
}


/* ── 2. Matar TODAS las animaciones y transiciones ── */
html.lite-mode *,
html.lite-mode *::before,
html.lite-mode *::after {
  animation:              none !important;
  animation-duration:     0.001ms !important;
  animation-delay:        0.001ms !important;
  animation-iteration-count: 1 !important;
  transition:             none !important;
  transition-duration:    0.001ms !important;
  transition-delay:       0.001ms !important;
}


/* ── 3. Quitar propiedades costosas para GPU ── */

/* backdrop-filter es uno de los efectos más pesados */
html.lite-mode nav,
html.lite-mode .pa-slideshow,
html.lite-mode .pa-slide-arrow,
html.lite-mode .pa-slide-manage,
html.lite-mode .pa-slide-modal-overlay,
html.lite-mode .pa-slide-modal,
html.lite-mode .screensaver-btn,
html.lite-mode .screensaver-mode,
html.lite-mode .modal-overlay,
html.lite-mode [class*="modal"],
html.lite-mode [class*="overlay"],
html.lite-mode [class*="popup"],
html.lite-mode [class*="dropdown"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* box-shadow: simplificar (eliminar multi-capa y blur grande) */
html.lite-mode .pa-slideshow,
html.lite-mode .screensaver-btn,
html.lite-mode .pa-slide-dot.is-active,
html.lite-mode .hero-eyebrow {
  box-shadow: none !important;
}

/* text-shadow */
html.lite-mode * {
  text-shadow: none !important;
}

/* filter: blur() y drop-shadow() — GPU-heavy */
html.lite-mode .blob,
html.lite-mode .glow-effect,
html.lite-mode .pa-slideshow-empty .pa-empty-icon,
html.lite-mode .hero-grid {
  filter: none !important;
}


/* ── 4. Fondos animados → ocultar, reemplazar por sólidos ── */
html.lite-mode .animated-background,
html.lite-mode #bg-animated-dark,
html.lite-mode #bg-animated-light,
html.lite-mode #bg-animated-rosa,
html.lite-mode #bg-animated-neon {
  display: none !important;
  visibility: hidden !important;
}

/* Colores sólidos de respaldo según tema */
html.lite-mode body {
  background: #1a1a2e !important;
}
html.lite-mode body.theme-light {
  background: #f0faf6 !important;
}
html.lite-mode body.theme-rosa {
  background: #fff0f5 !important;
}
html.lite-mode body.theme-neon {
  background: #191d1e !important;
}
/* index.html no usa body.theme-*, su fondo viene del inline style */
html.lite-mode body:not([class*="theme"]) {
  background: #e8f8f4 !important;
}


/* ── 5. Blobs del Hero (index.html) ── */
html.lite-mode .blob,
html.lite-mode .blob-1,
html.lite-mode .blob-2,
html.lite-mode .blob-3 {
  display: none !important;
}

/* Hero grid: quitar mask-image (requiere GPU) */
html.lite-mode .hero-grid {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 0.05 !important;
}

/* Gradiente del hero → sólido */
html.lite-mode .hero {
  background: linear-gradient(155deg, #e8f8f4 0%, #d4f0e8 100%) !important;
}


/* ── 6. Scroll Reveal → mostrar inmediatamente ── */
html.lite-mode .reveal,
html.lite-mode .reveal-left,
html.lite-mode .reveal-right {
  opacity: 1 !important;
  transform: none !important;
}
html.lite-mode .stagger > * {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
}


/* ── 7. Nav → fondo opaco y sin blur ── */
html.lite-mode nav {
  background: rgba(232, 248, 244, 0.98) !important;
}
html.lite-mode body.theme-dark nav,
html.lite-mode body:not(.theme-light) nav {
  background: rgba(15, 15, 35, 0.98) !important;
}


/* ── 8. Slideshow → estático, sin Ken Burns ni glow ── */
html.lite-mode .pa-slideshow {
  background: #1a1033 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}
html.lite-mode .pa-slideshow::before {
  display: none !important;
}
/* Slides: ocultar todas, mostrar solo la activa sin escala */
html.lite-mode .pa-slide {
  opacity: 0 !important;
  transform: none !important;
}
html.lite-mode .pa-slide.is-active {
  opacity: 1 !important;
  transform: none !important;
}
html.lite-mode .pa-slide.is-active img {
  transform: none !important;
  animation: none !important;
}
/* Dot activo sin glow */
html.lite-mode .pa-slide-dot.is-active {
  box-shadow: none !important;
  background: #a78bfa !important;
}
/* Flechas sin blur */
html.lite-mode .pa-slide-arrow {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(20, 5, 45, 0.8) !important;
}


/* ── 9. Salvapantallas → desactivar efectos ── */
html.lite-mode .screensaver-btn {
  background: rgba(0, 0, 0, 0.55) !important;
  box-shadow: none !important;
}
html.lite-mode .screensaver-mode {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ── 10. Gradientes de texto → texto plano ── */
html.lite-mode .pa-slideshow-empty h3,
html.lite-mode .pa-slide-modal-head h2,
html.lite-mode [style*="-webkit-background-clip: text"],
html.lite-mode [style*="background-clip: text"] {
  -webkit-text-fill-color: unset !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  color: #c4b5fd !important;
}


/* ── 11. Tarjetas del launcher → sin hover animado ── */
html.lite-mode .launcher-card:hover,
html.lite-mode .launcher-card:focus {
  transform: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}


/* ── 12. index.html: elementos con opacity:0 como estado base (fadeUp forwards) ── */
/* Sin este bloque, al matar la animación quedan invisibles para siempre. */
html.lite-mode .hero-eyebrow,
html.lite-mode .hero h1,
html.lite-mode .hero-sub,
html.lite-mode .hero-cta,
html.lite-mode .hero-stats {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Eyebrow pulse dot: estático */
html.lite-mode .eyebrow-pulse {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── 12b. Marquee → congelar (scroll infinito = costoso) ── */
html.lite-mode .marquee-track {
  animation: none !important;
  transform: translateX(0) !important;
}
html.lite-mode .marquee-wrap {
  overflow: hidden !important;
}


/* ── 12c. profeacademi.html: header glass, dock y bolas decorativas ── */

/* backdrop-filter del header flotante, dock y paneles glass: el efecto más
   caro por frame. Se compensa subiendo la opacidad del fondo (misma estética
   de píldora, sin desenfoque). */
html.lite-mode .pa-top-header,
html.lite-mode .pa-macdock,
html.lite-mode .pa-dock-modal,
html.lite-mode #pa-dock-modal-overlay,
html.lite-mode .glass-radio-group,
html.lite-mode .patv-arrow,
html.lite-mode .patv-badge,
html.lite-mode .header-options-pop,
html.lite-mode #pa-close-app-btn,
html.lite-mode #pa-back-app-btn,
html.lite-mode #pa-tv-widget::before,
html.lite-mode .pa-modal-overlay,
html.lite-mode .pa-bsimce-overlay,
html.lite-mode .pa-notif-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.lite-mode .pa-top-header:not(.pa-intro) { background: rgba(12, 12, 28, 0.96) !important; }
html.lite-mode body.theme-light .pa-top-header:not(.pa-intro) { background: rgba(255, 255, 255, 0.96) !important; }
html.lite-mode body.theme-dark .pa-top-header:not(.pa-intro) { background: rgba(8, 8, 22, 0.97) !important; }
html.lite-mode body.theme-neon .pa-top-header:not(.pa-intro) { background: rgba(0, 8, 30, 0.97) !important; }
html.lite-mode body.theme-rosa .pa-top-header:not(.pa-intro) { background: rgba(255, 235, 248, 0.96) !important; }
html.lite-mode .pa-macdock { background: rgba(30, 30, 52, 0.94) !important; }
html.lite-mode body.theme-light .pa-macdock { background: rgba(255, 255, 255, 0.94) !important; }

/* Bolas decorativas con blur(34-38px) + mix-blend-mode (intro, aviso y
   loader del TV): puro costo de GPU. El fondo oscuro del intro se mantiene. */
html.lite-mode .pa-hball,
html.lite-mode .pa-aviso-ball,
html.lite-mode .patv-loader .ball {
  display: none !important;
}


/* ── 13. Botón de toggle: NO afectar con el kill global ── */
html.lite-mode #lite-mode-toggle,
html.lite-mode #lite-mode-toggle *,
html.lite-mode #lite-mode-toggle::before,
html.lite-mode #lite-mode-toggle::after {
  transition: background 0.15s ease, color 0.15s ease !important;
  animation: none !important;
}


/* ================================================================
   ESTILOS DEL BOTÓN TOGGLE
   — En index.html aparece como pill en el nav
   — En profeacademi.html aparece como pa-dropdown-item (sin estilos propios)
   ================================================================ */

/* ── Estilo pill para index.html ── */
nav .nav-right #lite-mode-toggle,
nav #lite-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  border: 1.5px solid rgba(255, 107, 26, 0.35);
  border-radius: 50px;
  background: transparent;
  color: #5a6a7a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

nav #lite-mode-toggle:hover {
  background: rgba(255, 107, 26, 0.08);
  border-color: rgba(255, 107, 26, 0.6);
  color: #FF6B1A;
}

nav #lite-mode-toggle .lm-icon {
  font-size: 14px;
  line-height: 1;
}

nav #lite-mode-toggle.is-active {
  background: #FF6B1A;
  border-color: #FF6B1A;
  color: #ffffff;
}

nav #lite-mode-toggle.is-active:hover {
  background: #e55a0a;
  border-color: #e55a0a;
  color: #ffffff;
}

/* ── Estado activo del item en el dropdown de profeacademi.html ── */
.pa-dropdown-menu #lite-mode-toggle.is-active {
  color: #FF6B1A !important;
  font-weight: 700;
}

.pa-dropdown-menu #lite-mode-toggle.is-active svg {
  stroke: #FF6B1A;
}

/* Estado activo en temas oscuros */
body.theme-dark .pa-dropdown-menu #lite-mode-toggle.is-active,
body:not(.theme-light) .pa-dropdown-menu #lite-mode-toggle.is-active {
  color: #a78bfa !important;
}

body.theme-dark .pa-dropdown-menu #lite-mode-toggle.is-active svg,
body:not(.theme-light) .pa-dropdown-menu #lite-mode-toggle.is-active svg {
  stroke: #a78bfa;
}