:root {
  --color-fondo: #ffffff;
  --color-fondo-rgb: 255,255,255;
  --color-fondo-secundario: #f5f5f5;
  --color-fondo-secundario-rgb: 245,245,245;
  --color-texto: #1a1a1a;
  --color-acento: #007aff;
  --color-acento-rgb: 0,122,255;
  --color-borde: #dcdcdc;
}
[data-theme='dark'] {
  --color-fondo: #121212;
  --color-fondo-rgb: 18,18,18;
  --color-fondo-secundario: #1e1e1e;
  --color-fondo-secundario-rgb: 30,30,30;
  --color-texto: #e5e5e5;
  --color-acento: #0a84ff;
  --color-acento-rgb: 10,132,255;
  --color-borde: #333333;
}
body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
}
a { color: var(--color-acento); }
nav, footer {
  background-color: rgba(var(--color-fondo-rgb), 0.8);
  backdrop-filter: blur(12px);
  border-color: var(--color-borde);
  color: var(--color-texto);
}
.neon-blue { color: var(--color-acento); }
.neon-border { border: 1px solid rgba(0,0,0,0.6); }
.neon-glow { box-shadow: 0 0 10px rgba(0,0,0,0.8); }
.avatar-ring { border: 3px solid var(--color-acento); box-shadow: 0 0 15px var(--color-acento); }
.stat-card { background: rgba(var(--color-fondo-rgb), 0.7); backdrop-filter: blur(10px); }
.category-filter.active { background-color: var(--color-acento); color: #fff; }
.main-nav { background-color: rgba(var(--color-fondo-rgb), 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-borde); }
.bg-section { background-color: rgba(var(--color-fondo-rgb), 0.7); }
.bg-accent { background-color: var(--color-acento) !important; }
.nav-link:hover { color: var(--color-acento) !important; }
/* Overrides para clases comunes de Tailwind */
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.bg-gray-300,
.bg-slate-800,
.bg-slate-700,
.bg-gray-800,
.bg-gray-900,
.bg-slate-900 { background-color: var(--color-fondo-secundario) !important; }
.bg-slate-800\/70 { background-color: rgba(var(--color-fondo-rgb), 0.7) !important; }
.bg-slate-900\/70 { background-color: rgba(var(--color-fondo-rgb), 0.7) !important; }
.bg-slate-900\/80 { background-color: rgba(var(--color-fondo-rgb), 0.8) !important; }
.text-gray-800,
.text-gray-900,
.text-gray-700,
.text-gray-600,
.text-gray-500,
.text-gray-400,
.text-gray-300,
.text-gray-200,
.text-gray-100,
.text-black,
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-slate-700 { color: var(--color-texto) !important; }
.border-gray-200,
.border-gray-300,
.border-gray-400,
.border-gray-500,
.border-gray-600,
.border-gray-700,
.border-slate-600,
.border-slate-700,
.border-slate-800 { border-color: var(--color-borde) !important; }
.bg-blue-600,
.bg-blue-500,
.bg-blue-700 { background-color: var(--color-acento) !important; }

/* Encabezados principales adaptados al tema */
.prose h1,
.prose h2,
.prose h3 { color: #000; }
[data-theme='dark'] .prose h1,
[data-theme='dark'] .prose h2,
[data-theme='dark'] .prose h3 { color: #fff; }

/* Etiquetas <strong> heredan color de tema si no se define otro */
strong { color: #000; }
[data-theme='dark'] strong { color: #fff; }

/* Estilo unificado para botones principales */
.btn-gaming {
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento) 100%);
  color: #fff !important;
  transition: all 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-gaming:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Certificación: tarjetas de respuesta */
.progress-bar { transition: width 0.5s ease-in-out; }
.option-card { transition: all 0.3s ease; }
.option-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.cert-radio:checked + .option-card { border-color: var(--color-acento); background-color: rgba(var(--color-acento-rgb),0.1); }
.cert-radio:checked + .option-card .cert-dot { background-color: var(--color-acento); }

/* Asegura que las etiquetas de noticias muestren texto blanco */
.bg-blue-700.text-white,
.bg-purple-700.text-white,
.bg-green-700.text-white,
.bg-yellow-700.text-white,
.bg-slate-700.text-white {
  color: #fff !important;
}

/* Iconos del footer adaptados al tema */
.footer-icon {
  color: #000;
}
[data-theme='dark'] .footer-icon {
  color: #fff;
}
.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-borde) var(--color-fondo-secundario);
}
.custom-scroll::-webkit-scrollbar { width: 8px; }
.custom-scroll::-webkit-scrollbar-track { background: var(--color-fondo-secundario); }
.custom-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-borde);
  border-radius: 9999px;
  border: 2px solid var(--color-fondo-secundario);
}
.custom-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--color-acento); }

.theme-toggle {
  --size: 1.5rem;
  --icon-fill: hsl(210 10% 30%);
  --icon-fill-hover: hsl(210 10% 15%);
  background: none;
  border: none;
  padding: 0;
  width: var(--size);
  height: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 5px;
}
.theme-toggle svg { width: 100%; height: 100%; stroke-linecap: round; }
[data-theme='dark'] .theme-toggle { --icon-fill: hsl(210 10% 70%); --icon-fill-hover: hsl(210 15% 90%); }
.sun-and-moon > .moon,
.sun-and-moon > .sun,
.sun-and-moon > .sun-beams { transform-origin: center center; }
.sun-and-moon > .moon,
.sun-and-moon > .sun { fill: var(--icon-fill); }
.theme-toggle:hover .sun-and-moon > .moon,
.theme-toggle:focus-visible .sun-and-moon > .moon,
.theme-toggle:hover .sun-and-moon > .sun,
.theme-toggle:focus-visible .sun-and-moon > .sun { fill: var(--icon-fill-hover); }
.sun-and-moon > .sun-beams { stroke: var(--icon-fill); stroke-width: 2px; }
.theme-toggle:hover .sun-and-moon > .sun-beams,
.theme-toggle:focus-visible .sun-and-moon > .sun-beams { stroke: var(--icon-fill-hover); }
[data-theme='dark'] .sun-and-moon > .sun { transform: scale(1.75); }
[data-theme='dark'] .sun-and-moon > .sun-beams { opacity: 0; }
[data-theme='dark'] .sun-and-moon > .moon > circle { transform: translateX(-7px); }