/* ==========================================================================
   MJ Neon — skin neón/futurista (tema hijo de MJ Appearance)
   --------------------------------------------------------------------------
   Carga DESPUÉS de dist/assets/app.css del padre y de su inline de diseño,
   así que gana la cascada a igual especificidad.

   No redefine --mj-accent / --mj-bg / --mj-ink: esos llegan por inline
   desde Apariencia → MJ Appearance (con defaults neón vía functions.php del hijo),
   así los pickers del admin siguen funcionando. Acá se ajusta todo lo que
   el admin NO controla: superficies, líneas, glows, degradados, grillas.
   ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Tokens derivados (los que el padre no expone en el admin)
 * -------------------------------------------------------------------------- */
:root,
[data-theme='dark'] {
	/* Superficies y líneas con tinte rojizo (el acento se mezcla solo). */
	--mj-surface: rgb(255 45 70 / 0.045);
	--mj-surface-2: rgb(255 45 70 / 0.08);
	--mj-line: rgb(255 36 69 / 0.13);
	--mj-line-strong: rgb(255 36 69 / 0.38);

	/* Estados en versión neón. */
	--color-success: #2dffa8;
	--color-warning: #ffb020;
	--color-danger: #ff3b5c;
}

/* --------------------------------------------------------------------------
 * 2. Fondo ambiental: glows rojo + magenta y grilla cyber sutil
 * -------------------------------------------------------------------------- */
.mj-ambient {
	background:
		linear-gradient(rgb(255 36 69 / 0.030) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 36 69 / 0.030) 1px, transparent 1px),
		radial-gradient(1000px 560px at 82% -12%, var(--mj-accent-soft), transparent 62%),
		radial-gradient(820px 520px at -12% 32%, rgb(255 0 168 / 0.07), transparent 60%),
		radial-gradient(720px 480px at 50% 115%, rgb(120 0 255 / 0.06), transparent 60%),
		var(--mj-bg);
	background-size:
		56px 56px,
		56px 56px,
		auto,
		auto,
		auto,
		auto;
	mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, black 55%, rgb(0 0 0 / 0.55) 100%);
	-webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, black 55%, rgb(0 0 0 / 0.55) 100%);
}

/* --------------------------------------------------------------------------
 * 3. Tipografía display (Orbitron): tracking más abierto y títulos con glow
 * -------------------------------------------------------------------------- */
.display {
	letter-spacing: 0.015em;
}

/* Título del hero: mayúsculas sci-fi con halo rojo (estilo DDR). */
h1.display {
	text-transform: uppercase;
	text-shadow: 0 0 46px rgb(255 36 69 / 0.30);
}

/* Degradado del título destacado del hero: violeta/cyan → rojo/magenta. */
h1.display span[class*='bg-clip-text'] {
	background-image: linear-gradient(100deg, #ff2d2d 0%, #ff00a8 58%, #b300ff 100%);
	filter: drop-shadow(0 0 22px rgb(255 0 120 / 0.35));
}

/* --------------------------------------------------------------------------
 * 4. Botones primarios: degradado rojo → magenta, uppercase, glow fuerte
 *    (el degradado arranca en var(--mj-accent): si el admin cambia el
 *    acento, el degradado lo acompaña)
 * -------------------------------------------------------------------------- */
button.bg-accent,
a.bg-accent,
.mj-header span.bg-accent {
	background-image: linear-gradient(100deg, var(--mj-accent) 0%, #ff0f5a 45%, #ff00a8 100%);
	background-color: transparent;
}

button.bg-accent,
a.bg-accent {
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	box-shadow:
		0 0 24px -4px var(--mj-accent-glow),
		0 0 64px -16px rgb(255 0 168 / 0.45);
}

/* Botones secundarios (glass): borde y texto al acento, uppercase. */
a.glass.inline-flex,
button.glass.inline-flex {
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	border-color: color-mix(in srgb, var(--mj-accent) 48%, transparent);
	color: var(--mj-accent);
}
a.glass.inline-flex:hover,
button.glass.inline-flex:hover {
	box-shadow: 0 0 26px -8px var(--mj-accent-glow);
}

/* --------------------------------------------------------------------------
 * 5. Cards de producto: borde + glow neón, con rotación de color por
 *    posición (rojo/cyan/magenta/verde, como las fichas gamer de ref.)
 * -------------------------------------------------------------------------- */
.grid > .group.relative > a.rounded-xl3.border {
	border-color: color-mix(in srgb, var(--card-glow, var(--mj-accent)) 30%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--card-glow, var(--mj-accent)) 10%, transparent),
		0 0 28px -10px color-mix(in srgb, var(--card-glow, var(--mj-accent)) 45%, transparent);
	transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.grid > .group.relative > a.rounded-xl3.border:hover {
	border-color: color-mix(in srgb, var(--card-glow, var(--mj-accent)) 68%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--card-glow, var(--mj-accent)) 28%, transparent),
		0 0 48px -8px color-mix(in srgb, var(--card-glow, var(--mj-accent)) 60%, transparent),
		0 0 110px -26px color-mix(in srgb, var(--card-glow, var(--mj-accent)) 50%, transparent);
}

/* Rotación de glow por card (el resto de la paleta queda en el acento). */
.grid > .group.relative:nth-child(4n+2) { --card-glow: #22e6ff; }
.grid > .group.relative:nth-child(4n+3) { --card-glow: #ff00a8; }
.grid > .group.relative:nth-child(4n)   { --card-glow: #39ff88; }

/* Etiqueta de categoría dentro de la card: cyan neón con halo. */
.grid > .group.relative > a.rounded-xl3 p.uppercase {
	color: #22e6ff;
	text-shadow: 0 0 14px rgb(34 230 255 / 0.45);
}

/* Otras superficies con marco (slider de banners, showcase, modales): borde neón suave. */
.rounded-xl3.border:not(.grid .group.relative a) {
	border-color: color-mix(in srgb, var(--mj-accent) 26%, transparent);
}

/* --------------------------------------------------------------------------
 * 6. Precios: rojo neón con halo (el precio tachado queda tenue)
 * -------------------------------------------------------------------------- */
.items-baseline > span.font-display {
	color: var(--mj-accent);
	text-shadow: 0 0 18px var(--mj-accent-glow);
}

/* --------------------------------------------------------------------------
 * 7. Header y navegación
 * -------------------------------------------------------------------------- */

/* Links del menú: uppercase con tracking (estilo arcade). */
.mj-header nav[aria-label='Navegación principal'] a,
.mj-header nav[aria-label='Navegación principal'] button {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
}

/* Link activo: pill roja translúcida (como "Inicio" en la referencia). */
.mj-header nav[aria-label='Navegación principal'] a[aria-current='page'] {
	background: rgb(255 36 69 / 0.14);
	color: #fff;
	box-shadow: 0 0 18px -4px var(--mj-accent-glow);
}

/* Buscador del header: pill con borde neón permanente + glow al enfocar. */
.mj-header form .glass {
	border-color: color-mix(in srgb, var(--mj-accent) 32%, transparent);
}
.mj-header form .glass:focus-within {
	border-color: color-mix(in srgb, var(--mj-accent) 62%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--mj-accent) 24%, transparent),
		0 0 34px -6px var(--mj-accent-glow);
}

/* La skin neón es oscura: se oculta el toggle sol/luna. */
.mj-header [aria-label='Cambiar tema'] {
	display: none;
}

/* --------------------------------------------------------------------------
 * 8. Detalles globales
 * -------------------------------------------------------------------------- */

/* Scrollbar neón (como en la referencia). */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--mj-bg);
}
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--mj-accent), #ff00a8);
	border-radius: 999px;
	border: 2px solid var(--mj-bg);
}
::-webkit-scrollbar-thumb:hover {
	background: #ff00a8;
}
html {
	scrollbar-color: var(--mj-accent) var(--mj-bg);
}

/* Selección de texto con glow. */
::selection {
	background: var(--mj-accent);
	color: #fff;
	text-shadow: 0 0 10px rgb(255 255 255 / 0.4);
}

/* Focus visible: anillo neón más marcado. */
:focus-visible {
	outline-color: var(--mj-accent);
	box-shadow: 0 0 18px -2px var(--mj-accent-glow);
}

/* Badges "sólidos" (Nuevo, etc.): degradado acorde al acento. */
span.bg-accent {
	background-image: linear-gradient(100deg, var(--mj-accent), #ff00a8);
	background-color: transparent;
}