/**
 * Directorio médico — frontend (identidad Acerta).
 *
 * IMPORTANTE sobre las variables: se declaran en los TRES posibles contenedores
 * raíz —.mdd-directory (shortcode), .mdd-search (widget Buscador de Elementor) y
 * .mdd-results (widget Resultados)— porque en Elementor el buscador y los
 * resultados son widgets SEPARADOS y ninguno está dentro de .mdd-directory. Si
 * los tokens vivieran solo en .mdd-directory, en Elementor ningún var() se
 * resolvería y los campos saldrían sin estilo. Además, cada uso lleva un valor
 * de reserva —var(--mdd-x, fallback)— para que los controles se vean bien aunque
 * una variable falte por completo.
 *
 * Los controles del widget (Color principal, Fondo de campos, Redondeo) siguen
 * sobrescribiendo --mdd-accent, --mdd-field-bg y --mdd-radius.
 *
 * @package MDD
 */

.mdd-directory,
.mdd-search,
.mdd-results {
	--mdd-ink: #252525;
	--mdd-body: #4A4A52;
	--mdd-muted: #636363;
	--mdd-accent: #ff7546;
	--mdd-accent-hover: #ff7546;
	--mdd-accent-2: #ff7546;
	--mdd-soft: #FDEDE6;
	--mdd-border: rgba(0, 0, 0, 0.12);
	--mdd-border-soft: rgba(0, 0, 0, 0.08);
	--mdd-field-bg: #ffffff;
	--mdd-card: #ffffff;
	--mdd-bg: #FAFAFA;

	--mdd-radius: 40px;
	--mdd-radius-card: 16px;
	--mdd-control-h: 52px;
	--mdd-gap: 16px;
	--mdd-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
	--mdd-shadow-btn: 0 10px 30px rgba(130, 124, 120, 0.17);
	--mdd-shadow-card-hover: 0 2px 6px rgba(16, 24, 40, 0.08), 0 12px 28px rgba(16, 24, 40, 0.09);

	--mdd-font-head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--mdd-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.mdd-directory,
.mdd-search,
.mdd-results {
	color: var(--mdd-body, #4A4A52);
	font-family: var(--mdd-font-body, sans-serif);
}

.mdd-directory *,
.mdd-directory *::before,
.mdd-directory *::after,
.mdd-search *,
.mdd-search *::before,
.mdd-search *::after,
.mdd-results *,
.mdd-results *::before,
.mdd-results *::after {
	box-sizing: border-box;
}

.mdd-search .screen-reader-text,
.mdd-results .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================ Buscador (tarjeta) ============================ */

.mdd-search {
	box-sizing: border-box;
	padding: 32px 32px 28px;
	background: var(--mdd-card, #fff);
	border-radius: var(--mdd-radius-card, 16px);
	box-shadow: var(--mdd-shadow, 0 10px 30px rgba(0, 0, 0, 0.04));
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/*
 * Rejilla de campos a DOS columnas (50 % cada uno). Contiene los cinco
 * desplegables (que llegan desde el panel AJAX) y el campo de nombre.
 *
 * El panel #mdd-facets-panel usa display:contents para NO crear una caja propia:
 * sus hijos (los cinco .mdd-field) pasan a ser celdas directas de esta misma
 * rejilla, junto al .mdd-field--name. Así el nombre es una celda del 50 % como
 * las demás, pero vive FUERA del bloque que el AJAX reemplaza, y por tanto no se
 * destruye mientras el usuario teclea.
 */
.mdd-search__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

.mdd-facets-panel {
	display: contents;
}

.mdd-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.mdd-field__label {
	font-family: var(--mdd-font-body, sans-serif);
	font-size: 14px;
	font-weight: 600;
	color: var(--mdd-ink, #252525);
}

.mdd-field__control {
	position: relative;
	display: flex;
	align-items: center;
}

.mdd-field select,
.mdd-field__control--search input {
	box-sizing: border-box;
	width: 100%;
	height: var(--mdd-control-h, 52px);
	border: 1px solid var(--mdd-border, rgba(0, 0, 0, 0.15));
	border-radius: var(--mdd-radius, 40px);
	background-color: var(--mdd-field-bg, #ffffff);
	font-family: var(--mdd-font-body, sans-serif);
	font-size: 16px;
	color: var(--mdd-body, #4A4A52);
	line-height: normal;
}

.mdd-field select {
	/* appearance:none quita la flecha NATIVA del navegador. Se mantiene para que
	   esa flecha nativa no reaparezca y vuelva a duplicar la del tema. La flecha
	   propia del plugin se ha retirado a propósito: el tema de Acerta ya pinta la
	   suya sobre el .selection-box, y tener las dos las superponía. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0 48px 0 24px;
	cursor: pointer;
}

/*
 * El tema de Acerta envuelve cada <select> en un .selection-box (y le añade su
 * propia flecha). Ese contenedor no ocupaba todo el ancho de la celda, así que
 * el desplegable salía más estrecho que el campo de nombre. Se fuerza al 100 %.
 * Acotado a .mdd-field para no tocar los selects del tema en el resto del sitio.
 */
.mdd-field .selection-box {
	width: 100%;
}

/* Edge/IE antiguos: ocultar su propia flecha. */
.mdd-field select::-ms-expand {
	display: none;
}

.mdd-field select.is-active {
	border-color: var(--mdd-accent, #ff7546);
	background-color: var(--mdd-soft, #FDEDE6);
	color: var(--mdd-accent, #ff7546);
	font-weight: 600;
}

.mdd-field select:focus-visible,
.mdd-field__control--search input:focus-visible {
	outline: none;
	border-color: var(--mdd-accent, #ff7546);
	box-shadow: 0 0 0 4px var(--mdd-soft, #FDEDE6);
}

/* ---------- Campo de nombre (con lupa) ---------- */

.mdd-field__control--search {
	position: relative;
}

.mdd-field__control--search input {
	padding: 0 24px 0 50px;
}

.mdd-field__icon {
	position: absolute;
	left: 20px;
	display: inline-flex;
	color: var(--mdd-muted, #636363);
	pointer-events: none;
}

/* ---------- Chips de filtros activos ---------- */

.mdd-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.mdd-chips:empty {
	display: none; /* Sin filtros, sin fila vacía. */
}

.mdd-chip--active {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px 7px 14px;
	border-radius: var(--mdd-radius, 40px);
	background: var(--mdd-soft, #FDEDE6);
	color: var(--mdd-accent, #ff7546);
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
}

.mdd-chip--active:hover .mdd-chip__x {
	background: var(--mdd-accent, #ff7546);
	color: #ffffff;
}

.mdd-chip__label {
	opacity: 0.8;
}

.mdd-chip__value {
	font-weight: 700;
}

.mdd-chip__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	transition: background 0.12s ease, color 0.12s ease;
}

.mdd-chips__clear {
	color: var(--mdd-muted, #636363);
	font-size: 13px;
	text-decoration: underline;
}

.mdd-chips__clear:hover {
	color: var(--mdd-accent, #ff7546);
}

/* ---------- Pie del formulario: mensaje + botones ---------- */

.mdd-search__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mdd-search__hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mdd-muted, #636363);
}

.mdd-search__buttons {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.mdd-search__clear {
	font-size: 14px;
	font-weight: 600;
	color: var(--mdd-body, #4A4A52);
	text-decoration: none;
	white-space: nowrap;
}

.mdd-search__clear:hover {
	color: var(--mdd-accent, #ff7546);
}

.mdd-search__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--mdd-control-h, 52px);
	padding: 0 40px;
	border: 0;
	border-radius: var(--mdd-radius, 40px);
	background: var(--mdd-accent, #ff7546);
	color: #ffffff;
	font-family: var(--mdd-font-head, sans-serif);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: var(--mdd-shadow-btn, 0 10px 30px rgba(130, 124, 120, 0.17));
	transition: background 0.15s ease;
}

.mdd-search__submit:hover {
	background: var(--mdd-accent-hover, #ff7546);
}

.mdd-search__noscript {
	margin: 0;
	font-size: 13px;
	color: var(--mdd-muted, #636363);
}

/* ============================== Resultados ============================== */

.mdd-results {
	margin-top: 28px;
	transition: opacity 0.15s ease;
}

.mdd-results.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.mdd-results__count {
	margin: 0 0 20px;
	color: var(--mdd-muted, #636363);
	font-size: 15px;
}

.mdd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--mdd-gap, 16px);
}

/* ---------- Tarjeta de proveedor ---------- */

.mdd-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: var(--mdd-card, #fff);
	border: 1px solid var(--mdd-border-soft, rgba(0, 0, 0, 0.08));
	border-radius: var(--mdd-radius-card, 16px);
	box-shadow: var(--mdd-shadow, 0 10px 30px rgba(0, 0, 0, 0.04));
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.mdd-card:hover {
	box-shadow: var(--mdd-shadow-card-hover, 0 12px 28px rgba(16, 24, 40, 0.09));
	transform: translateY(-2px);
}

.mdd-card__head {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.mdd-card__title {
	margin: 0;
	font-family: var(--mdd-font-head, sans-serif);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--mdd-ink, #252525);
}

.mdd-card__subtitle {
	margin: 0;
	color: var(--mdd-accent, #ff7546);
	font-size: 14px;
	font-weight: 600;
}

.mdd-card__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--mdd-muted, #636363);
	font-size: 14px;
	line-height: 1.45;
}

.mdd-card__meta-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
}

.mdd-card__meta-item .dashicons {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	font-size: 17px;
	margin-top: 1px;
	color: var(--mdd-accent-2, #ff7546);
}

.mdd-card__planes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdd-chip--plan {
	padding: 4px 11px;
	border-radius: 6px;
	background: #F2F2F2;
	color: var(--mdd-muted, #636363);
	font-size: 12px;
	font-weight: 600;
}

.mdd-card__phones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
}

.mdd-card__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--mdd-border, rgba(0, 0, 0, 0.15));
	border-radius: var(--mdd-radius, 40px);
	color: var(--mdd-ink, #252525);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.mdd-card__phone .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.mdd-card__phone:hover,
.mdd-card__phone:focus-visible {
	border-color: var(--mdd-accent, #ff7546);
	background: var(--mdd-soft, #FDEDE6);
	color: var(--mdd-accent, #ff7546);
}

.mdd-card__phone--plain {
	border-style: dashed;
	color: var(--mdd-muted, #636363);
	font-weight: 400;
}

/* ---------- Vacío y paginación ---------- */

.mdd-empty {
	padding: 56px 24px;
	border: 1px dashed var(--mdd-border, rgba(0, 0, 0, 0.15));
	border-radius: var(--mdd-radius-card, 16px);
	text-align: center;
}

.mdd-empty__title {
	margin: 0 0 6px;
	font-family: var(--mdd-font-head, sans-serif);
	font-size: 17px;
	font-weight: 700;
	color: var(--mdd-ink, #252525);
}

.mdd-empty__hint {
	margin: 0;
	color: var(--mdd-muted, #636363);
}

.mdd-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}

.mdd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--mdd-border, rgba(0, 0, 0, 0.15));
	border-radius: 10px;
	color: var(--mdd-ink, #252525);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.mdd-pagination .page-numbers:hover {
	border-color: var(--mdd-accent, #ff7546);
	color: var(--mdd-accent, #ff7546);
}

.mdd-pagination .page-numbers.current {
	border-color: var(--mdd-accent, #ff7546);
	background: var(--mdd-accent, #ff7546);
	color: #ffffff;
}

.mdd-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ============================== Responsive ============================== */

@media (max-width: 680px) {
	.mdd-search {
		padding: 22px 18px 20px;
	}

	.mdd-search__grid {
		grid-template-columns: 1fr; /* Una sola columna en móvil. */
	}

	.mdd-search__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.mdd-search__buttons {
		justify-content: space-between;
	}

	.mdd-search__submit {
		flex: 1 1 auto;
		justify-content: center;
	}

	.mdd-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================ Accesibilidad ============================ */

@media (prefers-reduced-motion: reduce) {
	.mdd-directory *,
	.mdd-search *,
	.mdd-results * {
		transition: none !important;
		animation: none !important;
	}

	.mdd-card:hover {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.mdd-directory,
	.mdd-search,
	.mdd-results {
		--mdd-border: #6b7280;
		--mdd-muted: #374151;
	}
}