/**
 * Rejamarca — Compatibilidad.
 * Usa los tokens del tema activo (theme.json) con valores de reserva,
 * de modo que también se ve correcto con otro tema.
 */

/* ---------------- Tabla de compatibilidad ---------------- */

.tp-compat__intro {
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.tp-compat__table {
	border: 1px solid var(--wp--preset--color--border, #d5d8dc);
	border-collapse: collapse;
	border-radius: 3px;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	width: 100%;
}

.tp-compat__table th,
.tp-compat__table td {
	border-bottom: 1px solid var(--wp--preset--color--border, #d5d8dc);
	padding: 0.75rem 0.9rem;
	text-align: left;
	vertical-align: top;
}

.tp-compat__table thead th {
	background: var(--wp--preset--color--base-alt, #f4f5f7);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tp-compat__table tbody tr:last-child th,
.tp-compat__table tbody tr:last-child td {
	border-bottom: 0;
}

.tp-compat__brand {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 700;
	white-space: nowrap;
	width: 12rem;
}

.tp-compat__models {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* Cada modelo es un enlace a su archivo: "todos los repuestos para X". */
.tp-compat__model {
	background: var(--wp--preset--color--base-alt, #f4f5f7);
	border: 1px solid var(--wp--preset--color--border, #d5d8dc);
	border-radius: 3px;
	color: var(--wp--preset--color--primary, #1c1f24);
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	padding: 0.3rem 0.55rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tp-compat__model:hover,
.tp-compat__model:focus-visible {
	background: var(--wp--preset--color--accent, #e2600a);
	border-color: var(--wp--preset--color--accent, #e2600a);
	color: #fff;
	text-decoration: none;
}

.tp-compat__note,
.tp-compat__empty {
	color: var(--wp--preset--color--muted, #6a727c);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	margin-top: 0.85rem;
}

.tp-compat-section {
	margin-top: var(--wp--preset--spacing--l, 2.5rem);
}

.tp-compat-section__title {
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	margin-bottom: 0.75rem;
}

/* ---------------- Buscador de compatibilidad ---------------- */

.tp-finder {
	background: var(--wp--preset--color--base-alt, #f4f5f7);
	border: 1px solid var(--wp--preset--color--border, #d5d8dc);
	border-radius: 3px;
	padding: var(--wp--preset--spacing--l, 2.5rem) var(--wp--preset--spacing--m, 1.5rem);
}

.tp-finder__title {
	margin: 0 0 0.35rem;
	text-align: center;
}

.tp-finder__subtitle {
	color: var(--wp--preset--color--muted, #6a727c);
	margin: 0 0 1.5rem;
	text-align: center;
}

.tp-finder__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.tp-finder__field {
	display: flex;
	flex: 1 1 14rem;
	flex-direction: column;
	gap: 0.35rem;
	max-width: 20rem;
}

.tp-finder__field--action {
	flex: 0 0 auto;
	justify-content: flex-end;
	max-width: none;
}

.tp-finder__label {
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tp-finder__select {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #d5d8dc);
	border-radius: 3px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	padding: 0.7rem 0.8rem;
	width: 100%;
}

.tp-finder__submit {
	background: var(--wp--preset--color--accent, #e2600a);
	border: 0;
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0.85rem 1.6rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.tp-finder__submit:hover,
.tp-finder__submit:focus-visible {
	background: var(--wp--preset--color--accent-hover, #b94d07);
}

.tp-finder__hint {
	color: var(--wp--preset--color--muted, #6a727c);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	margin: 1.25rem 0 0;
	text-align: center;
}

@media (max-width: 600px) {
	.tp-finder__field,
	.tp-finder__field--action {
		flex: 1 1 100%;
		max-width: none;
	}
	.tp-finder__submit {
		width: 100%;
	}
	.tp-compat__brand {
		width: auto;
	}
}

/* ---------------- Referencias OEM ---------------- */

.tp-oem {
	margin-top: var(--wp--preset--spacing--m, 1.5rem);
}

.tp-oem__intro {
	font-weight: 600;
	margin-bottom: 0.6rem;
}

.tp-oem__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tp-oem__ref {
	background: var(--wp--preset--color--primary, #1c1f24);
	border-radius: 3px;
	color: #fff;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	letter-spacing: 0.03em;
	padding: 0.3rem 0.6rem;
}

.tp-oem__note {
	color: var(--wp--preset--color--muted, #6a727c);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	margin-top: 0.8rem;
}

/* Campo de numero de parte dentro del buscador */
.tp-finder__oem {
	border-top: 1px solid var(--wp--preset--color--border, #d5d8dc);
	margin-top: 1.5rem;
	padding-top: 1.25rem;
}

.tp-finder__oem-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
}

.tp-finder__input {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #d5d8dc);
	border-radius: 3px;
	flex: 1 1 16rem;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	max-width: 22rem;
	padding: 0.7rem 0.8rem;
}

@media (max-width: 600px) {
	.tp-finder__input {
		flex: 1 1 100%;
		max-width: none;
	}
}