/* Directorio de Expositores — personalizable con variables CSS desde el tema o Elementor:
   .expodir { --expodir-accent: #0a6; --expodir-logo-filter: grayscale(1); } */

.expodir {
	--expodir-cols: 4;
	--expodir-gap: 1.25rem;
	--expodir-min: 9rem;
	--expodir-radius: 6px;
	--expodir-border: rgba(0, 0, 0, 0.14);
	--expodir-border-width: 1px;
	--expodir-card-padding: 1rem;
	--expodir-body-gap: 0.25rem;
	--expodir-accent: currentColor;
	--expodir-card-bg: transparent;
	--expodir-logo-bg: #fff;
	--expodir-logo-ratio: 3 / 2;
	--expodir-logo-padding: 1rem;
	--expodir-logo-filter: none;
	--expodir-logo-fit: contain;
	--expodir-name-color: inherit;
	--expodir-name-size: 1em;
	--expodir-field-color: inherit;
	--expodir-field-opacity: 0.8;
	--expodir-cats-display: flex;
	--expodir-cat-icon-size: 1.1em;
	--expodir-cat-icon-color: inherit;
	--expodir-cat-text-size: 0.8em;
	--expodir-cat-text-color: inherit;
	--expodir-cat-bg: rgba(0, 0, 0, 0.06);
	--expodir-cat-radius: 20px;
	--expodir-cat-align: flex-start;
	--expodir-cat-margin: 0rem;
	--expodir-cat-color: currentColor;
	--expodir-filter-active: currentColor;
	--expodir-panel-bg: #fff;
}

/* El tema puede no usar border-box: el directorio no debe depender de ello. */
.expodir,
.expodir *,
.expodir *::before,
.expodir *::after {
	box-sizing: border-box;
}

.expodir .expodir__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--expodir-gap);
}

.expodir .expodir__search,
.expodir .expodir__filter {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: 0.6em 0.8em;
	border: 1px solid var(--expodir-border);
	border-radius: var(--expodir-radius);
	background-color: transparent;
	color: inherit;
	font: inherit;
}

.expodir .expodir__search {
	flex: 1 1 16rem;
	min-width: 0;
}

.expodir .expodir__search:focus-visible,
.expodir .expodir__filter:focus-visible {
	outline: 2px solid var(--expodir-accent);
	outline-offset: 1px;
}

.expodir .expodir__count {
	margin: 0 0 0 auto;
	font-size: 0.875em;
	opacity: 0.75;
}

.expodir .expodir__grid {
	display: grid;
	/* Hasta --expodir-cols columnas; baja sola cuando cada tarjeta quedaría por debajo de --expodir-min. */
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			min(100%, max(var(--expodir-min), (100% - (var(--expodir-cols) - 1) * var(--expodir-gap)) / var(--expodir-cols))),
			1fr
		)
	);
	gap: var(--expodir-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.expodir .expodir__item {
	display: flex;
	margin: 0;
	padding: 0;
}

.expodir .expodir__item::before {
	content: none;
}

.expodir .expodir__item[hidden] {
	display: none;
}

.expodir .expodir__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: var(--expodir-border-width) solid var(--expodir-border);
	border-radius: var(--expodir-radius);
	background: var(--expodir-card-bg);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.expodir a.expodir__card:hover {
	border-color: var(--expodir-accent);
}

.expodir a.expodir__card:hover .expodir__name {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.expodir a.expodir__card:focus-visible {
	outline: 2px solid var(--expodir-accent);
	outline-offset: 2px;
}

.expodir .expodir__logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--expodir-logo-ratio);
	border-bottom: var(--expodir-border-width) solid var(--expodir-border);
	background: var(--expodir-logo-bg);
}

.expodir .expodir__img {
	position: absolute;
	inset: var(--expodir-logo-padding);
	width: calc(100% - 2 * var(--expodir-logo-padding));
	max-width: none;
	height: calc(100% - 2 * var(--expodir-logo-padding));
	margin: 0;
	object-fit: var(--expodir-logo-fit);
	filter: var(--expodir-logo-filter);
	transition: filter 0.2s ease;
}

.expodir a.expodir__card:hover .expodir__img,
.expodir a.expodir__card:focus-visible .expodir__img {
	filter: none;
}

.expodir .expodir__initials {
	font-size: 1.75em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #000;
	opacity: 0.3;
}

/* Selector largo a propósito: algunos temas traen reglas de padding sobre el
   contenido de la entrada que ganarían a un selector más corto. */
.expodir .expodir__card > .expodir__body {
	display: flex;
	flex-direction: column;
	gap: var(--expodir-body-gap);
	padding: var(--expodir-card-padding);
	margin: 0;
}

.expodir .expodir__name {
	color: var(--expodir-name-color);
	font-size: var(--expodir-name-size);
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.expodir .expodir__field {
	color: var(--expodir-field-color);
	font-size: 0.875em;
	line-height: 1.4;
	opacity: var(--expodir-field-opacity);
}

.expodir .expodir__label {
	font-weight: 600;
}

.expodir .expodir__empty {
	margin: var(--expodir-gap) 0 0;
}

.expodir .expodir__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.expodir .expodir__card,
	.expodir .expodir__img {
		transition: none;
	}
}

/* ------------------------------------------------------------- Categorías */

.expodir .expodir__cats {
	display: var(--expodir-cats-display);
	flex-wrap: wrap;
	justify-content: var(--expodir-cat-align);
	align-items: center;
	gap: 0.3em;
	margin: var(--expodir-cat-margin) 0;
}

.expodir .expodir__cat {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	max-width: 100%;
	padding: 0.25em 0.6em;
	border-radius: var(--expodir-cat-radius);
	background: var(--expodir-cat-bg);
	color: var(--expodir-cat-text-color);
	font-size: var(--expodir-cat-text-size);
	line-height: 1.35;
	white-space: nowrap;
}

.expodir .expodir__cat-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* El icono toma el color de la categoría salvo que se fije uno único. */
.expodir .expodir__icon {
	flex: none;
	width: var(--expodir-cat-icon-size);
	height: var(--expodir-cat-icon-size);
	color: var(--expodir-cat-icon-color, var(--expodir-cat-color));
	font-size: var(--expodir-cat-icon-size);
	line-height: 1;
	vertical-align: middle;
}

.expodir .expodir__cat > .expodir__icon {
	color: var(--expodir-cat-color);
}

.expodir[style*="--expodir-cat-icon-color"] .expodir__cat > .expodir__icon,
.expodir[style*="--expodir-cat-icon-color"] .expodir__chip > .expodir__icon {
	color: var(--expodir-cat-icon-color);
}

.expodir span.expodir__icon.dashicons {
	width: auto;
	height: auto;
}

.expodir img.expodir__icon {
	object-fit: contain;
	border-radius: 2px;
}

/* Texto suelto: sin fondo ni padding. */
.expodir--cats-plain .expodir__cat {
	padding: 0;
	background: none;
}

/* Solo icono: chip cuadrado y texto para lectores de pantalla. */
.expodir--cats-icon .expodir__cat.has-icon {
	padding: 0.25em;
}

.expodir--cats-icon .expodir__cat.has-icon .expodir__cat-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.expodir--cats-icon .expodir__cat--more {
	padding: 0.25em 0.5em;
	font-size: var(--expodir-cat-text-size);
}

/* Sobre la imagen: distintivo en la esquina, siempre legible. */
.expodir--cats-over-image .expodir__logo {
	overflow: hidden;
}

.expodir--cats-over-image .expodir__logo .expodir__cats {
	position: absolute;
	inset: auto auto 0.5em 0.5em;
	max-width: calc(100% - 1em);
	margin: 0;
}

.expodir--cats-over-image .expodir__logo .expodir__cat {
	backdrop-filter: blur(3px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------- Filtros */

.expodir .expodir__chips {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.expodir .expodir__chip {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0.45em 0.9em;
	border: 1px solid var(--expodir-border);
	border-radius: var(--expodir-cat-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.expodir .expodir__chip:hover {
	border-color: var(--expodir-filter-active);
}

.expodir .expodir__chip:focus-visible {
	outline: 2px solid var(--expodir-filter-active);
	outline-offset: 2px;
}

.expodir .expodir__chip.is-active {
	border-color: var(--expodir-filter-active);
	background: var(--expodir-filter-active);
	color: #fff;
}

.expodir .expodir__chip.is-active .expodir__icon {
	color: currentColor;
}

.expodir .expodir__chip-count {
	padding: 0 0.4em;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.08);
	font-size: 0.82em;
	font-variant-numeric: tabular-nums;
}

.expodir .expodir__chip.is-active .expodir__chip-count {
	background: rgba(255, 255, 255, 0.25);
}

/* Pestañas: selección única y un indicador que se desliza. */
.expodir .expodir__chips--tabs {
	flex-wrap: nowrap;
	gap: 0.15rem;
	max-width: 100%;
	padding-bottom: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	border-bottom: 1px solid var(--expodir-border);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.expodir .expodir__chips--tabs .expodir__chip {
	flex: none;
	white-space: nowrap;
}

.expodir .expodir__chips--tabs .expodir__chip {
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	opacity: 0.7;
}

.expodir .expodir__chips--tabs .expodir__chip.is-active {
	background: none;
	color: inherit;
	opacity: 1;
	font-weight: 600;
}

.expodir .expodir__chips--tabs .expodir__chip.is-active .expodir__chip-count {
	background: rgba(0, 0, 0, 0.08);
}

.expodir .expodir__ink {
	position: absolute;
	bottom: 2px;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--expodir-filter-active);
	border-radius: 2px;
	opacity: 0;
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}

/* Panel plegable. */
.expodir .expodir__filters {
	/* El desplegable se ancla a la barra de herramientas, no al botón: así nunca se sale. */
	position: static;
}

.expodir .expodir__filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 1em;
	border: 1px solid var(--expodir-border);
	border-radius: var(--expodir-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.expodir .expodir__filters-toggle[aria-expanded="true"],
.expodir .expodir__filters-toggle:hover {
	border-color: var(--expodir-filter-active);
}

.expodir .expodir__filters-toggle:focus-visible {
	outline: 2px solid var(--expodir-filter-active);
	outline-offset: 2px;
}

.expodir .expodir__filters-icon {
	width: 14px;
	height: 10px;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 14px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 2px 4px / 10px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 4px 8px / 6px 2px no-repeat;
}

.expodir .expodir__filters-badge {
	min-width: 1.5em;
	padding: 0 0.35em;
	border-radius: 10px;
	background: var(--expodir-filter-active);
	color: #fff;
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Desplegable flotante: no empuja la rejilla al abrirse. */
.expodir .expodir__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: 100%;
	padding: 0.9rem;
	border: 1px solid var(--expodir-border);
	border-radius: var(--expodir-radius);
	background: var(--expodir-panel-bg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	animation: expodir-panel 0.2s ease;
}

.expodir .expodir__panel[hidden] {
	display: none;
}

/* En la vista previa del escritorio se ve abierto y sin flotar sobre las tarjetas. */
.expodir .expodir__panel--static {
	position: static;
	margin-top: 0.6rem;
	box-shadow: none;
	animation: none;
}

@keyframes expodir-panel {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.expodir .expodir__clear {
	margin-left: auto;
	padding: 0.45em 0.6em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.88em;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.75;
}

/* Panel a lo ancho: el contenedor de herramientas debe permitir el salto. */
.expodir--filter-panel .expodir__tools {
	position: relative;
}

/* -------------------------------------------------- Animación al filtrar */

.expodir .expodir__item.is-leaving {
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

.expodir .expodir__item.is-entering {
	animation: expodir-enter 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes expodir-enter {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
}

@media (prefers-reduced-motion: reduce) {
	.expodir .expodir__chip,
	.expodir .expodir__ink,
	.expodir .expodir__panel,
	.expodir .expodir__item.is-leaving,
	.expodir .expodir__item.is-entering {
		transition: none;
		animation: none;
	}
}

/* Un icono oculto dentro de un chip no debe dejar hueco. */
.expodir .expodir__icon[hidden],
.expodir .expodir__chip-count[hidden] {
	display: none;
}