/* Dónde Jugar Listings — Seller nav bar (Checkpoint 14, 2/3-Sep-2026).
 * Full-bleed dark strip — Ventas / Mi Perfil / Mi Inventario / Video Ayuda /
 * Cerrar sesión — shown ONLY to logged-in sellers, on all 4 seller-facing
 * pages (the 3 shortcode pages via DJL_Board::render() /
 * DJL_Profile::render() / DJL_Dashboard::render_dashboard(), plus the
 * plain "Video Ayuda" page via DJL_Dashboard::inject_seller_nav_on_ayuda_page()).
 * Rendered by DJL_Dashboard::render_seller_nav() — see that method's
 * docblock for why it lives there. Depends on djl-tokens (--djl-line etc.
 * aren't actually used any more here, but keep the dependency for the
 * shared design-token base). */
.djl-seller-nav {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	box-sizing: border-box;

	/* Walter, 2/3-Sep-2026: pegado a 0px del header. The Elementor
	 * section/container wrapping the shortcode carries its own top
	 * spacing (measured ~16px against the Header template on the public
	 * board; bumped to -20px per Walter's own eyeballed fine-tune on
	 * 3-Sep) that this bar sits inside of — a negative margin is the only
	 * way to reach past that from here. Re-check this number if the gap
	 * ever comes back after an Elementor template edit, and note it may
	 * not be identical to the pixel on every one of the 4 pages this now
	 * renders on. */
	margin-top: -20px;

	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;

	background: #333333;
	font-size: 0.8rem;
}

.djl-seller-nav__item {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	height: 26px;
	padding: 0 0.75rem;
	border-radius: 4px;
	color: #FECE00;
	text-decoration: none;
	white-space: nowrap;
}

/* Refuerzo de especificidad — SOLO la página "Ayuda" usa el template por
 * default de WordPress (envuelve el contenido en .page-content); ese
 * wrapper trae del tema un estilo de enlaces con más especificidad que la
 * regla de arriba (clase sola) y le ganaba, subrayando los <a> de esta
 * barra únicamente ahí. nav.djl-seller-nav a.djl-seller-nav__item pesa más
 * (tag + clase + tag + clase) y lo gana en cualquier página, sin tocar la
 * regla base — Walter, detectado 3-Sep-2026. */
nav.djl-seller-nav a.djl-seller-nav__item {
	text-decoration: none;
}

/* Hover reads like a tab: solid black rounded block behind the item. */
a.djl-seller-nav__item:hover,
a.djl-seller-nav__item:focus {
	background: #000000;
	color: #ffffff;
}

/* Current section — plain text, no link, no pointer, no hover. */
.djl-seller-nav__item--current {
	color: #ffffff;
	font-weight: 700;
	cursor: default;
}

/* "Video Ayuda" — its own solid red button instead of the plain tab style. */
a.djl-seller-nav__item--ayuda {
	background: #EC393C;
	color: #ffffff;
	font-weight: 700;
}

a.djl-seller-nav__item--ayuda:hover,
a.djl-seller-nav__item--ayuda:focus {
	background: #EC393C;
	color: #ffffff;
	opacity: 0.85;
}

.djl-seller-nav__power {
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.djl-seller-nav {
		gap: 0.25rem;
		font-size: 0.72rem;
	}
	.djl-seller-nav__item {
		padding: 0 0.4rem;
	}
}

/* "Video Ayuda" (Checkpoint 14, 3-Sep-2026, Walter's own devtools find):
 * that page uses the plain WordPress page template (wraps content in
 * .page-content) instead of the "Elementor Canvas/Full Width" template the
 * other 3 pages use, so it doesn't carry the same top gap the shared
 * -20px above is cancelling out — here it needs none at all. Scoped to
 * this one page via the modifier class render_seller_nav() adds when
 * $current === 'ayuda', so the shared rule above stays untouched for the
 * other 3. */
.djl-seller-nav--ayuda-page {
	margin-top: 0;
}