/* -------------------------------------- */
/* Recomendado a nivel global (opcional): */
/* -------------------------------------- */
/* Esto ayuda a que el padding y border   */
/* se incluyan dentro del ancho/alto,     */
/* evitando cálculos inesperados.         */
/* -------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Contenedor principal */
.resultados {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 106px;
	background-color: var(- -variable-collection-color-background-01);
}

/* Fondo interno, con max-width y centrado */
.resultados .resultados-background {
	display: flex;
	flex-direction: column;
	align-self: center;
	background-color: #fff;
	border-radius: var(- -variable-collection-8);
	margin: 0 auto;
	padding: 32px 0;
	max-width: 950px;
	width: 100%;
	box-sizing: border-box;
}

/* Wrapper para el contenido interno */
.resultados .resultados-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	padding: 0 24px;
	position: relative;
	box-sizing: border-box;
	max-width: 950px;
}

/* Ícono de búsqueda */
.resultados .search-icon {
	font-size: 24px;
	color: #B3BEE3;
}

/* Texto pequeño */
.resultados .small,
small {
	font-family: var(- -p-regular-font-family);
	font-weight: var(- -p-regular-font-weight);
	font-size: var(- -p-regular-font-size);
	letter-spacing: var(- -p-regular-letter-spacing);
	line-height: var(- -p-regular-line-height);
	font-style: var(- -p-regular-font-style);
	color: #333;
}

/* Texto en negrita */
.resultados b,
strong {
	font-family: var(- -p-bold-font-family);
	font-weight: var(- -p-bold-font-weight);
	font-size: var(- -p-bold-font-size);
	letter-spacing: var(- -p-bold-letter-spacing);
	line-height: var(- -p-bold-line-height);
	font-style: var(- -p-bold-font-style);
	color: #333;
}

/* Input de búsqueda */
.resultados .search-input {
	height: 44px;
	width: 100%;
	display: flex;
	position: relative;
	font-family: var(- -p-regular-font-family);
	font-weight: var(- -p-regular-font-weight);
	font-size: var(- -p-regular-font-size);
	letter-spacing: var(- -p-regular-letter-spacing);
	line-height: var(- -p-regular-line-height);
	font-style: var(- -p-regular-font-style);
	color: #333;
}

.resultados .search-input input {
	width: 100%;
	border: none;
	outline: none;
}

.resultados .search-input input:focus {
	outline: none;
}

.resultados input[type="text" i] {
	font-family: var(- -p-regular-font-family);
	font-weight: var(- -p-regular-font-weight);
	font-size: var(- -p-regular-font-size);
	letter-spacing: var(- -p-regular-letter-spacing);
	line-height: var(- -p-regular-line-height);
	font-style: var(- -p-regular-font-style);
	color: #333;
}

/* Texto de botón */
.resultados p.text-button {
	height: 15px;
}

.button-medium{
	align-self: center;
}

.resultados .resultados-wrapper .button-search {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	--size-button-icon: 24px;
}

.resultados .resultados-wrapper .button-search.botonBuscar {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 44px;
	padding: 0px 16px;
	position: relative;
	flex: 0 0 auto;
	border-radius: var(--variable-collection-4);
	border: 1px solid;
	border-color: var(--variable-collection-button-tertiary-outline-line);
	color: var(--variable-collection-button-tertiary-outline-line);
	--text-underline: none;
}

.resultados .resultados-wrapper .button-search.botonBuscar:hover {
	background-color: var(--variable-collection-button-tertiary-outline-background);
	border: 1px solid;
	border-color: var(--variable-collection-button-tertiary-line-press);
	color: var(--variable-collection-button-tertiary-line-press);
}

.resultados .resultados-wrapper .button-search.botonBuscar:active {
	background-color: var(--variable-collection-button-tertiary-outline-background);
	border: 2px solid;
	border-color: var(--variable-collection-button-tertiary-line-press);
	color: var(--variable-collection-button-tertiary-line-press);
}

/* Estilo Paginación */
.resultados .paginacion {
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	background-color: var(- -variable-collection-color-grey-light-06);
	border-radius: 8px;
	border: 1px solid var(- -variable-collection-card-border-card-elevation);
	box-shadow: var(- -variable-collection-card-shadow);
	align-items: center;
	position: relative;
	overflow: hidden;
	font-family: var(- -span-regular-font-family);
	font-weight: var(- -span-regular-font-weight);
	color: var(- -variable-collection-button-tertiary-text-outline);
	font-size: var(- -span-regular-font-size);
	letter-spacing: var(- -span-regular-letter-spacing);
	line-height: var(- -span-regular-line-height);
	font-style: var(- -span-regular-font-style);
	align-self: center;
	width: -webkit-fill-available;
}

.resultados .paginacion .paginadocss {
	display: inline-flex;
	gap: 16px;
	flex: 0 0 auto;
	align-items: center;
	position: relative;
}

.resultados .paginacion .paginadocss .active {
	display: flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	background-color: var(- -variable-collection-pagination-bg-number);
	border-radius: var(- -variable-collection-24);
	color: var(- -variable-collection-pagination-number-active);
}

.resultados .paginacion .paginadocss a {
	display: flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	background-color: white;
	border-radius: var(- -variable-collection-24);
	color: var(- -variable-collection-pagination-number-active);
}

.resultados .paginacion .paginadocss a:hover {
	border-radius: var(- -variable-collection-24);
	background-color: var(- -variable-collection-pagination-bg-number);
	box-shadow: none;
}

.resultados .paginacion .paginadocss a:not(.active-page):hover {
	border-radius: var(- -variable-collection-8);
	background-color: var(- -variable-collection-color-brand-blue-07);
	box-shadow: 0px 0px 35px #e7ebf680;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex: 0 0 auto;
}

.resultados .paginacion .paginadocss .navigation-icon {
	background-color: white;
}

.resultados .paginadocss span.no-display {
	display: none;
}

/* Caja de búsqueda */
.resultados-wrapper .searchBoxPage {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	padding-bottom: 32px;
	max-height: 76px;
	width: 100%;
	gap: 16px;
	box-sizing: border-box;
}

/* Search Wrapper */
.resultados-wrapper .searchWrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background-color: var(- -variable-collection-input-default-background-default);
	border: 1px solid #E7EBF6;
	border-radius: var(- -variable-collection-8);
	padding: 0 16px;
}

/* Divider */
.resultados-wrapper .divider {
	width: 100%;
	height: 1px;
	background-color: var(- -variable-collection-card-separador);
}

/* Datos de resultados (no utilizado en XHTML actual, pero se deja) */
.resultados-wrapper .resultados-data {
	width: 100%;
	padding-bottom: 32px;
}

.resultados-wrapper .title-resultados {
	height: 27px;
	font-family: var(- -h6-bold-font-family);
	font-weight: var(- -h6-bold-font-weight);
	font-size: var(- -h6-bold-font-size);
	letter-spacing: var(- -h6-bold-letter-spacing);
	line-height: var(- -h6-bold-line-height);
	font-style: var(- -h6-bold-font-style);
	color: #333;
}

.resultados-wrapper .count-resultados {
	font-family: var(- -p-regular-font-family);
	font-weight: var(- -p-regular-font-weight);
	font-size: var(- -p-regular-font-size);
	letter-spacing: var(- -p-regular-letter-spacing);
	line-height: var(- -p-regular-line-height);
	font-style: var(- -p-regular-font-style);
	color: #333;
}

/* Contenedor de ítems */
.resultados-wrapper .item-wrapper,
.resultados-wrapper .itemWrapper {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	padding: 32px 0 24px;
}

.resultados-wrapper .item-wrapper.active,
.resultados-wrapper .itemWrapper.active,
.resultados-wrapper .init.active {
	display: flex;
	background-color: inherit;
	border-radius: inherit;
}

/* Ítem individual */
.resultados-wrapper .item-wrapper .item,
.resultados-wrapper .itemWrapper .item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	/* Permite que el contenido crezca verticalmente */
	justify-content: space-between;
	background-color: #F9FAFD;
	border: 1px solid #E7EBF6;
	border-radius: var(--variable-collection-8);
	padding: 16px;
	gap: 16px;
	max-width: 952px;
	width: 100%;
	/* Se retiran height y max-height para evitar que el contenido se salga */
	/* height: 56px; */
	/* max-height: 96px; */
}

/* Texto dentro del ítem */
.resultados-wrapper .item .item-text,
.resultados-wrapper .itemWrapper .item-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Se quita height fija para permitir expansión en caso de mucho texto */
	/* height: 64px; */
	width: 85%;
}

/* Detalle Mutual UI */
.resultados .detalle-mutual-UI {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	height: 18px;
	object-fit: cover;
}

/* Estado inicial */
.resultados-wrapper .init {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	width: 100%;
	height: 195px;
	padding: 0;
	overflow: hidden;
}

/* Texto en init */
.resultados-wrapper .init p {
	text-align: center;
	font-family: var(- -p-regular-font-family);
	font-weight: var(- -p-regular-font-weight);
	font-size: var(- -p-regular-font-size);
	letter-spacing: var(- -p-regular-letter-spacing);
	line-height: var(- -p-regular-line-height);
	font-style: var(- -p-regular-font-style);
	color: #333;
}

.resultados-wrapper .init p .size-icon {
	font-size: 40px;
}

/* Se mantiene la regla para #white y #load */
.resultados-wrapper #white .size-icon,
.resultados-wrapper #load .size-icon {
	color: #6A7EC7;
}

/* Ajustes responsivos */
@media (max-width : 1420px) {
	.resultados {
		padding: 32px 88px;
	}
}

@media (max-width : 1180px) {
	.resultados {
		padding: 8px 24px;
	}

	.resultados .resultados-background .resultados-wrapper {
		padding: 0 16px;
	}
}

@media (max-width : 800px) {
	.resultados {
		padding: unset;
	}

	.resultados-wrapper .item-wrapper .item,
	.resultados-wrapper .itemWrapper .item {
		gap: 8px;
	}

	.resultados-wrapper .item-text .item-text-title {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.resultados-wrapper .item-text .item-text-body {
		display: none;
	}

	.resultados p.text-button {
		display: none;
	}

	.resultados-wrapper .item .item-image.active {
		display: none;
	}
}

/* Reglas opcionales para elementos referenciados en JavaScript */
.botonBuscar {
	/* Agrega estilos para el botón de búsqueda si se requiere */

}

.resultados .PanelPrincipal {
	display: block;
	width: 100%;
}

.resultados .resultados-wrapper .panelBlanco {
	display: block;
	align-self: center;
}

/* catidad max lineas texto body de cards */
.resultados .resultados-wrapper .item-wrapper .item .item-text-body {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.resultados .resultados-wrapper .item-wrapper .item .item-text-title {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.resultados .resultados-wrapper .item-wrapper .item .button-medium {
	width: 12%;
}