/* Kukinas — widget "Novedades — Listado". */

.kk-nov-list {
	background: var(--kk-canvas);
}

.kk-nov-list__intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-block: 64px 36px;
}

.kk-nov-list__title {
	margin: 0;
	color: var(--kk-ink);
	font-family: var(--kk-font-display);
	font-size: clamp(44px, 5vw, 64px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.8px;
}

.kk-nov-list__lead {
	max-width: 820px;
	margin: 0;
	color: var(--kk-ink-2);
	font-size: 18px;
	line-height: 1.6;
}

.kk-nov-list__tools {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 32px;
}

/* Buscador */

.kk-nov-search {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 56px;
	padding: 0 8px 0 24px;
	background: var(--kk-surface);
	border: 1px solid var(--kk-border-strong);
	border-radius: 999px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kk-nov-search:focus-within {
	border-color: var(--kk-focus);
	box-shadow: 0 0 0 3px rgba(18, 58, 116, 0.15);
}

.kk-nov-search__icon {
	width: 20px;
	height: 20px;
	color: var(--kk-ink-2);
}

.kk-nov-list .kk-nov-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--kk-ink);
	font-family: var(--kk-font-body);
	font-size: 15px;
	line-height: 1.6;
	outline: none;
}

.kk-nov-search__input::placeholder {
	color: var(--kk-ink-2);
	opacity: 1;
}

.kk-nov-search__input::-webkit-search-cancel-button {
	display: none;
}

.kk-nov-list .kk-nov-search__input:focus-visible {
	outline: none;
}

.kk-nov-search__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--kk-ink-2);
}

.kk-nov-search__clear:hover {
	background: var(--kk-canvas);
	color: var(--kk-ink);
}

.kk-nov-btn.kk-nov-search__submit {
	min-height: 40px;
	height: 40px;
	padding: 0 22px;
	font-weight: 700;
	line-height: 1.5;
}

/* Filtros */

.kk-nov-filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Resultados */

.kk-nov-list__results {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-bottom: 56px;
	scroll-margin-top: 24px;
}

.kk-nov-list__count {
	margin: 0;
	color: var(--kk-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

.kk-nov-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-top: 16px;
}

.kk-nov-pagination__num {
	min-width: 50px;
	padding-inline: 18px;
}

.kk-nov-pagination__gap {
	color: var(--kk-ink-2);
	padding-inline: 4px;
}

/* Sin resultados */

.kk-nov-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	min-height: 350px;
	text-align: center;
}

.kk-nov-empty__title {
	max-width: 760px;
	margin: 0;
	color: var(--kk-ink);
	font-family: var(--kk-font-display);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.1;
}

.kk-nov-empty__text {
	max-width: 620px;
	margin: 0;
	color: var(--kk-ink-2);
	font-size: 16px;
	line-height: 1.6;
}

.kk-nov-empty .kk-nov-btn {
	min-height: 49px;
	padding: 16px 24px;
}

@media (max-width: 1024px) {
	.kk-nov-list__intro {
		padding-block: 48px 28px;
	}
}

@media (max-width: 767px) {
	.kk-nov-list__intro {
		gap: 12px;
		padding-block: 36px 24px;
	}

	.kk-nov-list__lead {
		font-size: 16px;
	}

	.kk-nov-list__tools {
		gap: 16px;
	}

	.kk-nov-search {
		padding-left: 16px;
		gap: 10px;
	}

	/* 16 px evita además el zoom automático de iOS al enfocar. */
	.kk-nov-list .kk-nov-search__input {
		font-size: 16px;
	}

	.kk-nov-btn.kk-nov-search__submit {
		padding: 0 16px;
	}

	/* Chips en una fila deslizable para no ocupar media pantalla. */
	.kk-nov-filters {
		margin-inline: calc(var(--kk-gutter) * -1);
	}

	.kk-nov-filters ul {
		flex-wrap: nowrap;
		gap: 8px;
		padding-inline: var(--kk-gutter);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.kk-nov-filters ul::-webkit-scrollbar {
		display: none;
	}

	.kk-nov-filters .kk-nov-chip {
		min-height: 44px;
		padding: 10px 18px;
	}

	.kk-nov-list__count {
		font-size: 16px;
	}

	.kk-nov-empty {
		min-height: 260px;
	}

	.kk-nov-empty__title {
		font-size: 28px;
	}
}