/* Variables para Modo Oscuro (Dark Mode por defecto en html.dark) */
:root, html.dark {
  --bg-gradient: radial-gradient(circle at top, #1e1b4b 0%, #0f172a 100%);
  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
  --glass-bg: rgba(15, 23, 42, 0.85);
  --glass-border: rgba(255, 255, 255, 0.12);
  --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Variables para Modo Claro (Light Mode cuando NO existe la clase dark) */
html:not(.dark) {
  --bg-gradient: radial-gradient(circle at top, #e0f2fe 0%, #f1f5f9 100%);
  --text-main: #0f172a;
  --text-muted: #334155;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(15, 23, 42, 0.12);
  --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Aplicación global de estilos */
body {
  background: var(--bg-gradient) !important;
  color: var(--text-main) !important;
  font-family: system-ui, -apple-system, sans-serif;
  transition: background 0.4s ease, color 0.4s ease;
}

.glass-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--card-shadow) !important;
  transition: background 0.4s ease, border 0.4s ease, box-shadow 0.4s ease;
}

/* Textos dinámicos según el tema */
.text-dynamic-main { color: var(--text-main) !important; }
.text-dynamic-muted { color: var(--text-muted) !important; }

/* Paginación Swiper */
.swiper-pagination-bullet-active {
  background: #38bdf8 !important;
  width: 24px !important;
  border-radius: 6px !important;
}

.swiper-pagination-bullet {
  background: var(--text-muted) !important;
}