:root {
	--listshow-ink: #0f172a;
	--listshow-muted: #64748b;
	--listshow-card: #ffffff;
	--listshow-bg: #f7f7fb;
	--listshow-border: #e5e7eb;
	--listshow-brand: #b51e2e;
	--listshow-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
	--listshow-radius: 14px;
	--listshow-container: 1100px;
}

html,
body {
	margin: 0;
}
body {
	background: var(--listshow-bg);
	color: var(--listshow-ink);
	font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
		'Helvetica Neue', Arial;
}

.listshow_wrap {
	max-width: var(--listshow-container);
	margin: 38px auto 60px;
	padding: 0 20px;
}

.listshow_header {
	margin: 0 0 14px;
}
.listshow_header h1 {
	margin: 0 0 6px;
	font-size: clamp(1.2rem, 2.2vw, 1.7rem);
	font-weight: 800;
}
.listshow_subtitle {
	margin: 0;
	color: var(--listshow-muted);
	font-size: 0.95rem;
}

.listshow_panel {
	background: var(--listshow-card);
	border: 1px solid var(--listshow-border);
	border-radius: var(--listshow-radius);
	box-shadow: var(--listshow-shadow);
	padding: 10px 10px 14px;
}

/* Lista */
.listshow_list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.listshow_item {
	border: 1px solid var(--listshow-border);
	border-radius: 12px;
	background: #fff;
	transition: background-color 0.18s ease, transform 0.18s ease,
		box-shadow 0.18s ease;
	overflow: hidden;
}
.listshow_link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
}
.listshow_bullet {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--listshow-brand);
	flex: 0 0 auto;
	box-shadow: 0 0 0 3px rgba(181, 30, 46, 0.12);
}
.listshow_title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.2px;
}
.listshow_item:hover {
	background: #fff5f6; /* hover tenue */
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.06);
}
.listshow_item:active {
	transform: translateY(0);
}

/* Paginación */
.listshow_pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}
.listshow_pagebtn {
	border: 1px solid var(--listshow-border);
	background: #fff;
	color: var(--listshow-ink);
	border-radius: 10px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.listshow_pagebtn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}
.listshow_pagebtn:hover:not([disabled]) {
	background: #fafafa;
	transform: translateY(-1px);
	box-shadow: var(--listshow-shadow);
}

.listshow_pagenums {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
}
.listshow_pagenums button {
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--listshow-border);
	background: #fff;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.listshow_pagenums button:hover {
	background: #fafafa;
	transform: translateY(-1px);
	box-shadow: var(--listshow-shadow);
}
.listshow_pagenums button[aria-current='page'] {
	background: var(--listshow-brand);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 18px rgba(181, 30, 46, 0.22);
}

/* Responsive */
@media (max-width: 640px) {
	.listshow_link {
		padding: 14px 14px;
	}
	.listshow_pagination {
		gap: 6px;
	}
	.listshow_pagenums button,
	.listshow_pagebtn {
		width: 36px;
		height: 36px;
		min-width: 36px;
	}
	.listshow_title {
		font-size: 1rem;
	}
}