/*!
 * Toyocentro Inventario · selector "Encuentra tu modelo"
 *
 * Prefijado y con !important en lo que el tema pisa (botones): el tema pinta
 * todos los <button> como pastillas rojas.
 */

.tc-selector {
	--tc-sel-acento: #e30613;
	--tc-sel-texto: #101114;
	--tc-sel-suave: #616161;
	--tc-sel-muestra: 36px;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	color: var(--tc-sel-texto);
}

.tc-selector__titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

/* Motor: control segmentado (Gasolina | Hibrido) */
.tc-selector .tc-selector__motores {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: #f1f1f2;
}

.tc-selector .tc-selector__motor {
	min-height: 0 !important;
	margin: 0 !important;
	padding: 8px 18px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--tc-sel-suave) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}

.tc-selector .tc-selector__motor.is-activo {
	background: #fff !important;
	color: var(--tc-sel-texto) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12) !important;
}

/* Versiones: texto con subrayado rojo en la activa */
.tc-selector__versiones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 28px;
}

.tc-selector .tc-selector__version {
	min-height: 0 !important;
	margin: 0 !important;
	padding: 8px 4px !important;
	border: 0 !important;
	border-bottom: 3px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--tc-sel-suave) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}

.tc-selector .tc-selector__version:hover {
	color: var(--tc-sel-texto) !important;
}

.tc-selector .tc-selector__version.is-activa {
	color: var(--tc-sel-texto) !important;
	border-bottom-color: var(--tc-sel-acento) !important;
}

.tc-selector .tc-selector__version[hidden] {
	display: none !important;
}

.tc-selector__transmision {
	margin: 0;
	font-size: 16px;
}

.tc-selector__transmision[hidden] {
	display: none;
}

/* Escena: la foto y, encima, la del hover, que aparece con un fundido */
.tc-selector__escena {
	position: relative;
	width: 100%;
	max-width: 720px;
	height: 300px;
}

.tc-selector__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity .35s ease;
}

.tc-selector__foto.is-cambiando {
	opacity: .35;
}

.tc-selector__foto--hover {
	opacity: 0;
}

.tc-selector__foto--hover[hidden] {
	display: none;
}

.tc-selector__escena.tiene-hover:hover .tc-selector__foto:not(.tc-selector__foto--hover) {
	opacity: 0;
}

.tc-selector__escena.tiene-hover:hover .tc-selector__foto--hover {
	opacity: 1;
}

.tc-selector__color {
	margin: 4px 0 0;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.tc-selector__nota {
	margin: 0;
	font-size: 14px;
	color: var(--tc-sel-suave);
}

/* Circulos de color */
.tc-selector__muestras {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	padding: 6px 0;
}

.tc-selector .tc-selector__muestra {
	position: relative;
	width: var(--tc-sel-muestra) !important;
	height: var(--tc-sel-muestra) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--muestra, #ccc) !important;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) !important;
	cursor: pointer;
	transition: transform .15s ease;
}

.tc-selector .tc-selector__muestra:hover {
	transform: scale(1.08);
}

/* Activo: aro del color de acento y un check */
.tc-selector .tc-selector__muestra.is-activa {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tc-sel-acento) !important;
}

.tc-selector .tc-selector__muestra.is-activa::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 46%;
	width: 30%;
	height: 16%;
	border-left: 2.5px solid var(--check, #fff);
	border-bottom: 2.5px solid var(--check, #fff);
	transform: translate(-50%, -50%) rotate(-45deg);
}

.tc-selector .tc-selector__muestra:focus-visible {
	outline: 2px solid var(--tc-sel-texto);
	outline-offset: 4px;
}

.tc-selector .tc-selector__boton {
	display: inline-block;
	margin-top: 8px;
	padding: 12px 28px !important;
	border-radius: 999px !important;
	background: var(--tc-sel-texto) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
}

.tc-selector .tc-selector__boton:hover {
	background: var(--tc-sel-acento) !important;
}

@media (max-width: 600px) {
	.tc-selector__escena { height: 200px; }
	.tc-selector__versiones { gap: 4px 16px; }
	.tc-selector__muestras { gap: 10px; }
}

/* "Transmision:" y su valor: el mismo tamano y la misma letra que el resto
   del bloque. El tema agrandaba la negrita (strong) y salia gigante. */
/* :where() deja la especificidad en una clase: lo que se elija en los
   controles de Estilo del widget siempre gana a esto. */
.tc-selector :where(.tc-selector__transmision, .tc-selector__transmision span) {
	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

:where(.tc-selector) .tc-selector__etiqueta {
	font-weight: 700;
}

:where(.tc-selector) .tc-selector__valor {
	font-weight: 400;
}