/* ===== Filter Menu ===== */
.menu{
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	margin: 0 0 14px 0;
	list-style: none;
	border-radius: 16px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	backdrop-filter: blur(6px);
	overflow-x: auto;
}

/* Quitar bullets */
.menu li{
	margin: 0;
	padding: 0;
}

/* Links */
.menu a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: var(--muted);
	white-space: nowrap;
	border: 1px solid transparent;
	transition: all 0.18s ease;
}

/* Hover */
.menu a:hover{
	color: var(--text);
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.08);
}

/* Active */
.menu a.active{
	color: var(--text);
	background: linear-gradient(
		135deg,
		rgba(79,124,255,0.22),
		rgba(124,77,255,0.18)
	);
	border-color: rgba(79,124,255,0.35);
	box-shadow: 0 6px 18px rgba(79,124,255,0.18);
}

/* Active hover (no parpadeo raro) */
.menu a.active:hover{
	background: linear-gradient(
		135deg,
		rgba(79,124,255,0.28),
		rgba(124,77,255,0.22)
	);
}

/* Opcional: scrollbar sutil si hay muchos */
.menu::-webkit-scrollbar{
	height: 6px;
}
.menu::-webkit-scrollbar-thumb{
	background: rgba(255,255,255,0.12);
	border-radius: 99px;
}




/* =========================================================
	 BUTTONS
	 ========================================================= */
.btn{
	padding:10px 14px;
	border-radius:14px;
	border:1px solid var(--border);
	background: rgba(255,255,255,.04);
	color: var(--text);
	cursor:pointer;
	transition: transform .16s ease, background .16s ease, border .16s ease;
}

.btn:hover{
	transform: translateY(-1px);
	background: rgba(255,255,255,.06);
}

.btn:active{
	transform: translateY(0px);
}

.btn-primary{
	background: linear-gradient(180deg, var(--primary), var(--primary2));
	border-color: rgba(91,124,250,.55);
}

.btn-primary:hover{
	background: linear-gradient(180deg, #6d8cff, #4c6cff);
}

.btn-small{
	padding:8px 12px;
	border-radius:12px;
	font-size:13px;
}

.btn-icon{
	width:44px;
	height:44px;
	display:grid;
	place-items:center;
	padding:0;
	border-radius:14px;
	font-size:18px;
}



/* ===== Toolbar Columnas ===== */
.col-toolbar{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center;
	margin-bottom:12px;
	padding: 10px 12px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.04);
}

.col-toolbar-title{
	font-size:12px;
	color: var(--muted);
	margin-right:6px;
	font-weight:700;
}

.colbtn{
	padding: 8px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.05);
	color: var(--muted);
	cursor:pointer;
	font-size:12px;
	font-weight:700;
	transition: 0.15s ease;
}

.colbtn:hover{
	background: rgba(255,255,255,0.08);
	color: var(--text);
}

.colbtn.active{
	border-color: rgba(79,124,255,0.30);
	background: rgba(79,124,255,0.14);
	color: var(--text);
}

/* ===== Ocultar columnas ===== */
.col-hidden{
	display:none !important;
}