/**
 * Tarjeta de coche.
 *
 * La misma tarjeta en la página de temporada y en el listado de coches, así que
 * sus estilos viven aquí y no duplicados en las dos hojas. Los selectores
 * cuelgan de `.iat-tpl`, que es el contenedor común de todas las plantillas:
 * siguen encapsulados —fuera del bloque no se aplica nada— y a la vez sirven
 * para cualquiera de ellas.
 *
 * Los colores no se declaran aquí: se toman de las variables que define la
 * plantilla anfitriona, de modo que la tarjeta se tiñe con la paleta de la
 * página en la que caiga.
 *
 * @package InfoAsphaltTemplates
 */

/* La tarjeta no lleva relleno propio: la foto va a sangre de lado a lado, y el
   margen lo ponen los dos bloques de texto que la rodean. */
.iat-tpl .iat-coche {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	overflow: hidden;
}

/* Un coche de élite se distingue desde lejos, sin tener que leer la etiqueta:
   fondo en degradado y borde del mismo rosa que ella. Los colores van literales
   y no como variables de la plantilla anfitriona porque son de la distinción en
   sí, y tienen que ser los mismos en el listado y en la temporada. */
.iat-tpl .iat-coche.is-elite {
	background: linear-gradient(180deg, #B53EE4 0%, #73008F 100%);
	border-color: #FF4FED;
}

.iat-tpl .iat-coche__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 1rem;
}

/* Empuja la tabla al fondo cuando la tarjeta es más alta que su contenido, que
   es lo que mantiene alineadas las filas de toda la rejilla. */
.iat-tpl .iat-coche__pie {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1rem;
	padding: 1rem;
	flex: 1;
}

.iat-tpl .iat-coche__cab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
}

.iat-tpl .iat-coche__nombre {
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--text);
}

.iat-tpl .iat-coche__nombre a {
	color: var(--text);
	text-decoration: none;
}

.iat-tpl .iat-coche__nombre a:hover,
.iat-tpl .iat-coche__nombre a:focus-visible {
	color: var(--accent-soft);
}

.iat-tpl .iat-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.iat-tpl .iat-etiqueta {
	--iat-chip-color: var(--accent);
	--iat-chip-ink: var(--tinta);
	background: var(--iat-chip-color);
	color: var(--iat-chip-ink);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* El distintivo de élite: de los cinco de más rango de su clase. Va en rosa y
   no en el morado de las etiquetas de evento porque no dice de dónde sale el
   coche, sino cómo de bueno es; son dos cosas distintas y comparten esquina. */
.iat-tpl .iat-elite {
	/* El mismo rosa que el borde de la tarjeta: la etiqueta nombra lo que el
	   borde ya está diciendo. */
	--iat-chip-color: #FF4FED;
	--iat-chip-ink: #ffffff;
}

/* Clase y estrellas, en la misma línea: son las dos caras del mismo dato —lo
   que el coche es y hasta dónde llega—. */
.iat-tpl .iat-coche__nivel {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.iat-tpl .iat-coche .iat-estrellas {
	display: flex;
	gap: 0.15rem;
}

.iat-tpl .iat-coche .iat-estrella {
	display: block;
	width: 22px;
	height: 22px;
}

.iat-tpl .iat-coche .iat-clase-ico {
	display: block;
	width: 34px;
	height: auto;
}

.iat-tpl .iat-coche .iat-clase,
.iat-tpl .iat-coche .iat-evo {
	background: var(--accent);
	color: var(--tinta);
	border-radius: 6px;
	padding: 0.15rem 0.45rem;
	font-size: 0.7rem;
	font-weight: 900;
}

/* Distintivo de la tarjeta cuando el listado está filtrado por overclock: las
   cifras llevan el incremento sumado y hay que decirlo una vez, arriba, en vez
   de repetir el icono en las diez celdas. */
.iat-tpl .iat-oc-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 1px solid var(--oc, #fe7112);
	border-radius: 6px;
	padding: 0.15rem 0.45rem;
	color: var(--oc, #fe7112);
	font-size: 0.65rem;
	font-weight: 900;
	letter-spacing: 0.5px;
}

.iat-tpl .iat-oc-marca img {
	display: block;
	width: 14px;
	height: 14px;
}

/* Planos y piezas épicas: dos datos distintos, cada uno en su bloque, para que
   se lean por separado y no como una sola línea de cifras. */
.iat-tpl .iat-coche__bloques {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* Los dos bloques son párrafos, y el margen que el tema les pone encogería la
   caja de uno mientras la del otro ocupa toda la altura de la línea. */
.iat-tpl .iat-coche__bloques .iat-planos,
.iat-tpl .iat-coche__bloques .iat-epicas {
	margin: 0;
}

/* Planos: lo que pide cada estrella y, entre paréntesis, el total. */
.iat-tpl .iat-planos,
.iat-tpl .iat-epicas {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--fila-total);
	border-radius: 10px;
	padding: 0.45rem 0.75rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text);
}

.iat-tpl .iat-planos__ico {
	display: block;
	flex: none;
	height: 18px;
	width: auto;
}

/* Piezas épicas que admite el coche al completo. */
.iat-tpl .iat-epicas__ico {
	display: block;
	flex: none;
	width: 13px;
	height: 15px;
}

.iat-tpl .iat-planos__etapas {
	color: var(--text);
}

/* La llave ocupa el sitio del cero de la primera estrella, así que se alinea
   con las cifras y no con la caja. */
.iat-tpl .iat-planos__llave {
	display: inline-block;
	width: 19px;
	height: 19px;
	vertical-align: -0.3em;
}

.iat-tpl .iat-planos__total {
	color: var(--accent-soft);
}

.iat-tpl .iat-coche__foto {
	display: block;
	background: var(--card-alt);
	height: 200px;
	line-height: 0;
}

.iat-tpl .iat-coche__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tabla de características ------------------------------------------------ */

/* `separate` con espaciado vertical en vez de `collapse`: es lo que permite
   darle fondo y esquinas redondeadas a cada fila. */
.iat-tpl .iat-coche .iat-tabla {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 0.3rem;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.iat-tpl .iat-coche .iat-tabla th,
.iat-tpl .iat-coche .iat-tabla td {
	padding: 0.5rem 0.75rem;
	text-align: right;
	font-weight: 700;
}

.iat-tpl .iat-coche .iat-tabla thead th {
	padding-block: 0 0.25rem;
	font-size: 0.72rem;
	letter-spacing: 1px;
	color: var(--text);
}

/* La primera columna se deja como celda de tabla —nada de `display: flex`, que
   la sacaría del modelo de columnas y descuadraría las cifras—; el icono se
   alinea como texto. */
.iat-tpl .iat-coche .iat-tabla tbody th {
	text-align: left;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	width: 100%;
}

.iat-tpl .iat-coche .iat-tabla tbody th,
.iat-tpl .iat-coche .iat-tabla tbody td {
	background: var(--fila);
}

.iat-tpl .iat-coche .iat-tabla tbody th {
	border-radius: 8px 0 0 8px;
}

.iat-tpl .iat-coche .iat-tabla tbody td:last-child {
	border-radius: 0 8px 8px 0;
}

/* La columna de serie va apagada y la del máximo en blanco: lo que se busca de
   un vistazo es hasta dónde llega el coche, no de dónde parte. */
.iat-tpl .iat-coche .iat-tabla th:nth-child(2),
.iat-tpl .iat-coche .iat-tabla td:nth-child(2) {
	color: var(--accent-soft);
}

.iat-tpl .iat-coche .iat-tabla th:nth-child(3),
.iat-tpl .iat-coche .iat-tabla td:nth-child(3) {
	color: var(--text);
}

.iat-tpl .iat-coche .iat-tabla .iat-asset--svg {
	display: inline-flex;
	width: 18px;
	height: 18px;
	margin-right: 0.5rem;
	vertical-align: -0.3em;
	color: var(--text);
	line-height: 0;
}

.iat-tpl .iat-coche .iat-tabla .iat-asset--svg svg {
	width: 100%;
	height: 100%;
}

/* El rango cierra la tabla y resume las cuatro filas de arriba, así que se
   separa con un fondo más marcado. */
.iat-tpl .iat-coche .iat-tabla .iat-fila--rango th,
.iat-tpl .iat-coche .iat-tabla .iat-fila--rango td {
	background: var(--fila-total);
	color: var(--text);
	font-weight: 900;
	text-transform: uppercase;
}

.iat-tpl .iat-coche .iat-tabla .iat-fila--rango td:nth-child(2) {
	color: var(--accent-soft);
}

/* Cifras ------------------------------------------------------------------ */

/* La celda es el bloque que el conmutador de unidades reescribe: el icono de
   overclock va dentro para que no se separe de su cifra al cambiarla. */
.iat-tpl .iat-coche .iat-num {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.3rem;
	white-space: nowrap;
}

.iat-tpl .iat-coche .iat-num--cambia .iat-num__v {
	color: var(--oc, #fe7112);
}

.iat-tpl .iat-coche .iat-num__oc {
	display: block;
	flex: none;
	width: 14px;
	height: 14px;
}

/* Una cifra que la hoja no trae. Se dice con una interrogación y en tono
   apagado: un cero se leería como una medida, y esto es una medida que falta. */
.iat-tpl .iat-coche .iat-num--sindato {
	color: inherit;
	opacity: 0.6;
	cursor: help;
}