/**
 * NandaStream — Custom Header CSS
 * Version: 3.0.0 — Paleta "D2 Electric Indigo Equilibrada"
 *
 * CAMBIO PRINCIPAL v3:
 * - Paleta light mode (fondo claro #FAFAFF en vez de #0B0B14)
 * - Acento de marca: Indigo #4F46E5 + Cyan #06B6D4 (gradient)
 * - Texto principal: Slate-900 #0F172A (casi negro) para máxima legibilidad
 * - Texto secundario: Slate-800 #1E293B con font-weight 500
 * - Acentos secundarios: Pink #EC4899 (urgencia/trending), Cyan #06B6D4 (info)
 *
 * ESTRATEGIA: Mobile-first. Estilos base = móvil. Media queries añaden layout desktop.
 */

/* ==============================================================
   1. TOKENS — Paleta D2 Electric Indigo Equilibrada
   ============================================================== */
:root {
	/* Backgrounds */
	--ns-bg:           #FAFAFF;
	--ns-bg-blur:      rgba(250, 250, 255, 0.92);
	--ns-bg-elev:      #FFFFFF;
	--ns-bg-soft:      #EEF2FF;

	/* Text — todos oscuros para legibilidad seria */
	--ns-text:         #0F172A;
	--ns-text-strong:  #1E293B;
	--ns-text-mute:    #475569;
	--ns-text-dim:     #64748B;

	/* Brand colors */
	--ns-accent:       #4F46E5;
	--ns-accent-l:     #6366F1;
	--ns-accent-d:     #4338CA;
	--ns-cyan:         #06B6D4;
	--ns-cyan-d:       #0E7490;
	--ns-pink:         #EC4899;
	--ns-pink-d:       #9D174D;

	/* Borders */
	--ns-border:       #E0E7FF;
	--ns-border-soft:  #EEF2FF;
	--ns-border-hov:   #C7D2FE;

	/* Surfaces */
	--ns-surf:         #FFFFFF;
	--ns-surf-alt:     #F9FAFB;
	--ns-surf-hov:     #F1F5F9;

	/* Semantic */
	--ns-success-bg:   #DCFCE7;
	--ns-success:      #166534;
	--ns-info-bg:      #CFFAFE;
	--ns-info:         #0E7490;
	--ns-warn-bg:      #FEF3C7;
	--ns-warn:         #92400E;
	--ns-trend-bg:     #FCE7F3;
	--ns-trend:        #9D174D;

	/* Gradients */
	--ns-grad-cta:     linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);

	/* Shadows */
	--ns-shadow-cta:   0 1px 2px rgba(79, 70, 229, 0.2), 0 4px 12px rgba(79, 70, 229, 0.25);
	--ns-shadow-cta-h: 0 2px 4px rgba(79, 70, 229, 0.25), 0 8px 20px rgba(79, 70, 229, 0.35);
	--ns-shadow-card:  0 1px 3px rgba(79, 70, 229, 0.04);
	--ns-shadow-pop:   0 12px 32px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04);

	/* Layout */
	--ns-r-sm:         6px;
	--ns-r:            8px;
	--ns-r-lg:         12px;
	--ns-z-header:     50;
	--ns-z-dropdown:   60;
	--ns-z-backdrop:   99;
	--ns-z-drawer:     100;
	--ns-t:            150ms ease;
	--ns-t-md:         200ms ease;
	--ns-stack:        -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}

/* ==============================================================
   2. RESET + BASE
   ============================================================== */
.ns-header,
.ns-header *,
.ns-drawer,
.ns-drawer *,
.ns-backdrop {
	box-sizing: border-box;
}
.ns-header,
.ns-drawer {
	font-family: var(--ns-stack);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--ns-text);
}
.ns-header button,
.ns-drawer button {
	font-family: inherit;
	font-size: inherit;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 0;
}
.ns-header [hidden],
.ns-drawer[hidden],
.ns-backdrop[hidden] {
	display: none !important;
}

/* ==============================================================
   3. HEADER · LAYOUT MÓVIL DEFAULT
   ============================================================== */
.ns-header {
	position: sticky;
	top: 0;
	z-index: var(--ns-z-header);
	background: var(--ns-bg-blur);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border-bottom: 1px solid var(--ns-border);
}

.ns-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	max-width: 1440px;
	margin: 0 auto;
}

/* ==============================================================
   4. COMPONENTES
   ============================================================== */

/* Logo */
.ns-logo {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ns-text);
	text-decoration: none;
	flex-shrink: 0;
	line-height: 1;
}
.ns-logo strong {
	color: var(--ns-accent);
	font-weight: 700;
}
.ns-logo:hover {
	color: var(--ns-text);
}

/* Hamburguesa */
.ns-burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 32px;
	height: 32px;
	background: var(--ns-surf);
	border: 1px solid var(--ns-border);
	border-radius: 7px;
	flex-shrink: 0;
	transition: background var(--ns-t), border-color var(--ns-t);
}
.ns-burger:hover {
	background: var(--ns-bg-soft);
	border-color: var(--ns-border-hov);
}
.ns-burger span {
	display: block;
	width: 13px;
	height: 1.5px;
	background: var(--ns-text);
	border-radius: 1px;
	transition: transform var(--ns-t), opacity var(--ns-t);
}
.ns-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(4.5px) rotate(45deg);
}
.ns-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.ns-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-4.5px) rotate(-45deg);
}

/* Botón Explorar (oculto móvil, visible desktop) */
.ns-explore {
	display: none;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	background: var(--ns-surf);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-r);
	font-size: 12px;
	font-weight: 600;
	color: var(--ns-text);
	flex-shrink: 0;
	line-height: 1;
	transition: background var(--ns-t), border-color var(--ns-t);
}
.ns-explore svg {
	stroke: var(--ns-accent);
	transition: stroke var(--ns-t);
}
.ns-explore:hover {
	background: var(--ns-bg-soft);
	border-color: var(--ns-border-hov);
}
.ns-explore[aria-expanded="true"] {
	background: var(--ns-bg-soft);
	border-color: var(--ns-accent);
	color: var(--ns-accent-d);
}
.ns-chev {
	transition: transform var(--ns-t-md);
}
.ns-explore[aria-expanded="true"] .ns-chev {
	transform: rotate(180deg);
}

.ns-spacer {
	flex: 1;
}

/* Search */
.ns-search-form {
	order: 99;
	flex: 0 0 100%;
	margin: 4px 0 0;
}
.ns-search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 16px;
	background: var(--ns-surf);
	border: 1px solid var(--ns-border);
	border-radius: 999px;
	transition: border-color var(--ns-t);
}
.ns-search:focus-within {
	border-color: var(--ns-accent);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.ns-search svg {
	stroke: var(--ns-accent);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.ns-search-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--ns-text);
	font: 500 14px var(--ns-stack);
	padding: 0;
}
.ns-search-input::placeholder {
	color: var(--ns-text-dim);
	font-weight: 400;
}
.ns-kbd {
	display: none;
	font-size: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	background: var(--ns-bg-soft);
	border: 1px solid var(--ns-border);
	padding: 3px 7px;
	border-radius: 4px;
	color: var(--ns-accent-d);
	font-weight: 600;
	flex-shrink: 0;
}

/* País */
.ns-country-wrap {
	display: none;
	flex-shrink: 0;
}
.ns-country {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	background: var(--ns-surf);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-r);
	transition: background var(--ns-t), border-color var(--ns-t);
	line-height: 1;
}
.ns-country:hover {
	background: var(--ns-bg-soft);
	border-color: var(--ns-border-hov);
}
.ns-country svg {
	stroke: var(--ns-accent);
}
.ns-flag {
	display: block;
	width: 16px;
	height: 12px;
	border-radius: 2px;
	background: linear-gradient(to bottom,
		#D91023 0%, #D91023 33%,
		#fff 33%, #fff 66%,
		#D91023 66%, #D91023 100%);
	border: 0.5px solid var(--ns-border-soft);
	flex-shrink: 0;
}

/* CTA gradient */
.ns-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: var(--ns-grad-cta);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: var(--ns-shadow-cta);
	transition: box-shadow var(--ns-t-md), transform 100ms ease;
	flex-shrink: 0;
	line-height: 1;
}
.ns-cta svg {
	stroke: #fff;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
}
.ns-cta:hover {
	color: #fff;
	box-shadow: var(--ns-shadow-cta-h);
}
.ns-cta:active {
	transform: translateY(1px);
}
.ns-cta-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* User menu (logged-in) */
.ns-user {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 3px;
	background: var(--ns-surf);
	border: 1px solid var(--ns-border);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ns-text);
	flex-shrink: 0;
	transition: background var(--ns-t), border-color var(--ns-t);
	line-height: 1;
}
.ns-user:hover {
	background: var(--ns-bg-soft);
	border-color: var(--ns-border-hov);
}
.ns-user[aria-expanded="true"] {
	background: var(--ns-bg-soft);
	border-color: var(--ns-accent);
}
.ns-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.ns-user-name {
	max-width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ns-user svg {
	stroke: var(--ns-text-mute);
}

/* ==============================================================
   5. DROPDOWNS
   ============================================================== */
.ns-dropdown,
.ns-user-dropdown {
	position: absolute;
	background: var(--ns-bg-elev);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-r-lg);
	box-shadow: var(--ns-shadow-pop);
	z-index: var(--ns-z-dropdown);
	overflow: hidden;
	animation: ns-fade-down 200ms ease-out;
}
@keyframes ns-fade-down {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Dropdown Explorar */
.ns-dropdown {
	top: calc(100% + 8px);
	left: 130px;
	width: 460px;
}
.ns-dropdown-head {
	padding: 14px 16px 10px;
	border-bottom: 1px solid var(--ns-border-soft);
	font-size: 11px;
	font-weight: 700;
	color: var(--ns-text);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.ns-dropdown-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 8px;
}
.ns-dropdown-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	border-top: 1px solid var(--ns-border-soft);
	background: var(--ns-bg-soft);
	font-size: 11px;
	color: var(--ns-text-mute);
	font-weight: 600;
}
.ns-dropdown-foot a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--ns-accent);
	font-weight: 700;
	text-decoration: none;
}
.ns-dropdown-foot a:hover {
	color: var(--ns-accent-d);
}
.ns-dropdown-foot svg {
	stroke: currentColor;
}

/* Item categoría */
.ns-cat {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px;
	border-radius: var(--ns-r);
	text-decoration: none;
	color: var(--ns-text);
	transition: background 120ms ease;
}
.ns-cat:hover {
	background: var(--ns-bg-soft);
	color: var(--ns-text);
}
.ns-cat.is-active {
	background: var(--ns-bg-soft);
}
.ns-cat-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 7px;
	background: var(--ns-bg-soft);
	flex-shrink: 0;
}
.ns-cat-ico svg {
	stroke: var(--ns-accent);
}
.ns-cat.is-active .ns-cat-ico {
	background: var(--ns-accent);
}
.ns-cat.is-active .ns-cat-ico svg {
	stroke: #fff;
}
.ns-cat-body {
	display: block;
	min-width: 0;
}
.ns-cat-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ns-text);
	margin-bottom: 2px;
}
.ns-cat-desc {
	display: block;
	font-size: 11px;
	line-height: 1.4;
	color: var(--ns-text-strong);
	font-weight: 500;
}

.ns-badge {
	font-size: 9px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: 0.04em;
	line-height: 1.4;
}
.ns-badge--live  { background: var(--ns-trend-bg);   color: var(--ns-trend); }
.ns-badge--promo { background: var(--ns-success-bg); color: var(--ns-success); }

/* Dropdown usuario */
.ns-user-dropdown {
	top: calc(100% + 8px);
	right: 24px;
	width: 280px;
}
.ns-user-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ns-border-soft);
	background: var(--ns-bg-soft);
}
.ns-user-head img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}
.ns-user-info {
	min-width: 0;
}
.ns-user-fullname {
	font-size: 13px;
	font-weight: 700;
	color: var(--ns-text);
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ns-user-email {
	font-size: 11px;
	color: var(--ns-text-mute);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}
.ns-user-nav {
	display: flex;
	flex-direction: column;
	padding: 6px;
}
.ns-user-nav a {
	padding: 9px 10px;
	border-radius: var(--ns-r-sm);
	color: var(--ns-text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--ns-t);
}
.ns-user-nav a:hover {
	background: var(--ns-bg-soft);
	color: var(--ns-accent-d);
}
.ns-user-foot {
	padding: 6px;
	border-top: 1px solid var(--ns-border-soft);
}
.ns-logout {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: var(--ns-r-sm);
	color: var(--ns-text-mute);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--ns-t), color var(--ns-t);
}
.ns-logout:hover {
	background: rgba(239, 68, 68, 0.08);
	color: #B91C1C;
}
.ns-logout svg {
	stroke: currentColor;
}

/* ==============================================================
   6. DRAWER + BACKDROP
   ============================================================== */
.ns-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	z-index: var(--ns-z-backdrop);
	opacity: 0;
	transition: opacity 250ms ease;
}
.ns-backdrop.is-open {
	opacity: 1;
}

.ns-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 85%;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	background: var(--ns-bg-elev);
	border-right: 1px solid var(--ns-border);
	z-index: var(--ns-z-drawer);
	transform: translateX(-100%);
	transition: transform 250ms ease;
	overflow: hidden;
}
.ns-drawer.is-open {
	transform: translateX(0);
}

.ns-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 52px;
	padding: 0 14px;
	border-bottom: 1px solid var(--ns-border-soft);
	flex-shrink: 0;
}
.ns-drawer-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--ns-surf-hov);
	border-radius: 7px;
	color: var(--ns-text);
	transition: background var(--ns-t);
}
.ns-drawer-close:hover {
	background: var(--ns-bg-soft);
}
.ns-drawer-close svg {
	stroke: currentColor;
}

.ns-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 8px;
}
.ns-section-label {
	padding: 8px 10px 6px;
	margin-top: 4px;
	font-size: 10px;
	font-weight: 700;
	color: var(--ns-text);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.ns-drawer-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ns-drawer-nav .ns-cat .ns-cat-ico { width: 28px; height: 28px; border-radius: 6px; }
.ns-drawer-nav .ns-cat .ns-cat-ico svg { width: 13px; height: 13px; }
.ns-drawer-nav .ns-cat .ns-cat-title { font-size: 13px; font-weight: 600; }
.ns-drawer-nav .ns-cat .ns-cat-desc { font-size: 10px; }

.ns-drawer-link {
	display: block;
	padding: 9px 10px;
	border-radius: 7px;
	color: var(--ns-text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--ns-t);
}
.ns-drawer-link:hover {
	background: var(--ns-bg-soft);
	color: var(--ns-accent-d);
}

.ns-drawer-foot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--ns-border-soft);
	flex-shrink: 0;
	background: var(--ns-bg-soft);
}
.ns-drawer-country {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	background: var(--ns-surf);
	border: 1px solid var(--ns-border);
	border-radius: 7px;
	color: var(--ns-text);
	font-size: 12px;
	font-weight: 600;
	transition: background var(--ns-t);
}
.ns-drawer-country:hover {
	background: var(--ns-bg-soft);
}
.ns-drawer-country span:not(.ns-flag) {
	flex: 1;
	text-align: left;
}
.ns-drawer-country svg {
	stroke: var(--ns-text-mute);
}

.ns-drawer-curcy {
	padding: 6px 10px;
	background: var(--ns-surf);
	border: 1px solid var(--ns-border);
	border-radius: 7px;
}

.ns-drawer-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	background: var(--ns-grad-cta);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border-radius: var(--ns-r);
	text-decoration: none;
	box-shadow: var(--ns-shadow-cta);
}
.ns-drawer-cta:hover {
	color: #fff;
	box-shadow: var(--ns-shadow-cta-h);
}
.ns-drawer-cta svg {
	stroke: #fff;
}

.ns-drawer-logout {
	display: block;
	padding: 11px;
	background: var(--ns-surf);
	border: 1px solid var(--ns-border);
	border-radius: 7px;
	color: var(--ns-text-mute);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background var(--ns-t), color var(--ns-t);
}
.ns-drawer-logout:hover {
	background: rgba(239, 68, 68, 0.08);
	color: #B91C1C;
	border-color: rgba(239, 68, 68, 0.2);
}

body.ns-drawer-open {
	overflow: hidden;
}

/* ==============================================================
   7. LAYOUT DESKTOP (≥1024px)
   ============================================================== */
@media (min-width: 1024px) {
	.ns-container {
		flex-wrap: nowrap;
		gap: 14px;
		padding: 0 24px;
		height: 64px;
	}

	.ns-burger { display: none; }
	.ns-explore { display: inline-flex; }
	.ns-country-wrap { display: block; }

	.ns-logo { font-size: 18px; }

	.ns-search-form {
		order: 0;
		flex: 1 1 auto;
		max-width: 380px;
		margin: 0;
	}
	.ns-search {
		height: 38px;
		padding: 0 12px 0 14px;
		border-radius: var(--ns-r);
	}
	.ns-search:hover:not(:focus-within) {
		border-color: var(--ns-border-hov);
	}
	.ns-search svg {
		width: 14px;
		height: 14px;
	}
	.ns-search-input {
		font-size: 13px;
	}
	.ns-kbd { display: inline-block; }

	.ns-cta {
		padding: 9px 16px;
		font-size: 12px;
		border-radius: 8px;
		gap: 7px;
	}
	.ns-cta svg {
		width: 12px;
		height: 12px;
	}

	.ns-user {
		padding: 4px 12px 4px 4px;
		gap: 8px;
		font-size: 12px;
	}
	.ns-avatar {
		width: 28px;
		height: 28px;
	}
	.ns-user-name {
		max-width: 120px;
	}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
	.ns-container {
		flex-wrap: nowrap;
		gap: 10px;
		padding: 0 16px;
		height: 60px;
	}
	.ns-burger { display: none; }
	.ns-explore { display: inline-flex; }
	.ns-country-wrap { display: block; }

	.ns-logo { font-size: 17px; }

	.ns-search-form {
		order: 0;
		flex: 1 1 auto;
		max-width: 240px;
		margin: 0;
	}
	.ns-search {
		height: 36px;
		padding: 0 12px 0 14px;
		border-radius: var(--ns-r);
	}

	.ns-cta {
		padding: 8px 14px;
		font-size: 12px;
		border-radius: 8px;
	}
}

/* Pantallas extra-pequeñas */
@media (max-width: 359px) {
	.ns-cta {
		font-size: 10px;
		padding: 7px 10px;
		gap: 4px;
	}
	.ns-cta svg { width: 10px; height: 10px; }
	.ns-logo { font-size: 13px; }
	.ns-container { padding: 8px 10px; gap: 6px; }
}

/* Dropdowns full-width en móvil/tablet */
@media (max-width: 1023px) {
	.ns-dropdown,
	.ns-user-dropdown {
		left: 10px;
		right: 10px;
		width: auto;
		max-width: none;
	}
}

/* ==============================================================
   8. COMPAT PLUGINS + ACCESIBILIDAD
   ============================================================== */

/* CURCY override */
.ns-curcy .wmc-currency-switcher,
.ns-curcy select,
.ns-curcy .wmc-current-currency,
.ns-curcy > div {
	background: var(--ns-surf) !important;
	border: 1px solid var(--ns-border) !important;
	color: var(--ns-text) !important;
	border-radius: var(--ns-r) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 6px 9px !important;
	font-family: var(--ns-stack) !important;
}
.ns-curcy a,
.ns-curcy a:hover,
.ns-curcy a:visited {
	color: var(--ns-text) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}

.ns-drawer-curcy .wmc-currency-switcher,
.ns-drawer-curcy > div {
	width: 100% !important;
	background: transparent !important;
	border: none !important;
}

/* Focus visible */
.ns-header *:focus-visible,
.ns-drawer *:focus-visible {
	outline: 2px solid var(--ns-accent);
	outline-offset: 2px;
	border-radius: var(--ns-r);
}
.ns-cta:focus-visible,
.ns-drawer-cta:focus-visible {
	outline-offset: 3px;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.ns-dropdown,
	.ns-user-dropdown,
	.ns-drawer,
	.ns-backdrop,
	.ns-burger span,
	.ns-chev,
	.ns-cta,
	.ns-explore {
		animation: none !important;
		transition: none !important;
	}
}


/* ============================================================
   NS Live Search - panel de resultados (nativo)
   ============================================================ */
.ns-search { position: relative; }
.ns-ls-panel{
	position:absolute;
	top:calc(100% + 8px);
	left:0; right:0;
	background:var(--ns-bg-elev);
	border:1px solid var(--ns-border);
	border-radius:14px;
	box-shadow:0 14px 38px -10px rgba(15,23,42,.22), 0 3px 10px -4px rgba(15,23,42,.12);
	padding:6px;
	display:none;
	z-index:1200;
	max-height:min(60vh,420px);
	overflow-y:auto;
}
.ns-ls-panel.ns-ls-open{ display:block; }
.ns-ls-item{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:10px 12px;
	border-radius:10px;
	color:var(--ns-text);
	text-decoration:none;
	font:500 13px/1.3 var(--ns-stack);
}
.ns-ls-item:hover,
.ns-ls-item.ns-ls-active{ background:var(--ns-bg-soft); }
.ns-ls-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ns-ls-go{ color:var(--ns-accent); font-size:13px; flex-shrink:0; opacity:.65; }
.ns-ls-empty{
	padding:14px 12px;
	color:var(--ns-text-dim);
	font:400 13px var(--ns-stack);
	text-align:center;
}


/* Input unificado dentro del buscador (anula estilos globales de inputs) */
.ns-search .ns-search-input,
.ns-search-form .ns-search-input{
	border:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	outline:none !important;
	-webkit-appearance:none !important;
	appearance:none !important;
	border-radius:0 !important;
	height:auto !important;
	padding:0 !important;
	margin:0 !important;
}


/* Color del nombre de resultado (texto oscuro, no parece enlace crudo) */
.ns-search .ns-ls-item,
.ns-search .ns-ls-item:link,
.ns-search .ns-ls-item:visited,
.ns-search .ns-ls-name{ color:var(--ns-text) !important; }
.ns-search .ns-ls-item:hover .ns-ls-name,
.ns-search .ns-ls-item.ns-ls-active .ns-ls-name{ color:var(--ns-accent) !important; }


/* ============================================================
   NS Search - boton "Buscar" integrado y profesional
   ============================================================ */
.ns-search-form{ display:flex !important; align-items:stretch; gap:8px; }
.ns-search-form .ns-search{ flex:1 1 auto; min-width:0; }
.ns-search-form .ns-kbd{ display:none !important; }
.ns-search-btn{
	flex:0 0 auto;
	display:inline-flex; align-items:center; justify-content:center;
	padding:0 20px;
	border:0; border-radius:var(--ns-r);
	background:var(--ns-accent);
	color:#fff;
	font:600 13px var(--ns-stack);
	letter-spacing:.2px;
	cursor:pointer;
	white-space:nowrap;
	box-shadow:0 2px 8px -2px rgba(79,70,229,.45);
	transition:background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.ns-search-btn:hover{ background:#4338CA; box-shadow:0 4px 12px -2px rgba(79,70,229,.55); }
.ns-search-btn:active{ transform:translateY(1px); }