/**
 * Plantilla «Coches archivo v1».
 *
 * Todo cuelga de `.iat-tpl--coches-archivo-v1`, incluidas las variables de
 * color y el reinicio de márgenes. Como la temporada, esta plantilla ocupa la
 * página entera del archivo —entre la cabecera y el pie del tema—, así que el
 * fondo llega al borde de la ventana y el contenido se queda dentro de
 * `.iat-container`.
 *
 * Las tarjetas no se visten aquí: son las mismas que las de la temporada y las
 * viste `tarjeta-coche.css`, que se encola antes que esta hoja y se tiñe con
 * las variables de abajo.
 *
 * @package InfoAsphaltTemplates
 */

.iat-tpl--coches-archivo-v1 {
	--card: #73008F;
	--card-alt: #2b0038;
	--card-border: #B53EE4;
	/* Fondo de una fila de características y el de la fila de rango, que cierra
	   la tabla. Van como capa negra sobre la tarjeta en vez de como hexadecimal
	   propio: así siguen al color de la tarjeta si algún día cambia. */
	--fila: rgba(0, 0, 0, 0.18);
	--fila-total: rgba(0, 0, 0, 0.42);
	--barra: #2b0038;
	--accent: #d355ff;
	--accent-soft: #dc84ff;
	--oc: #FE7112;
	/* La tinta del dibujo de EVO cuando es el estado puesto, sobre el blanco de
	   la opción elegida. El overclock usa su propio naranja, el de arriba. */
	--evo: #1E0029;
	--text: #ffffff;
	--text-soft: #c9a2d9;
	--chip-linea: #B53EE4;
	/* Tinta oscura para el texto sobre un relleno claro. */
	--tinta: #1a0022;
	/* La de la barra del teléfono, donde lo puesto se pinta sobre blanco. */
	--activo: #510066;
	/* Lo que se aclara un desplegable de la barra del teléfono mientras está
	   abierto, y el tamaño y el color del punto que marca al que tiene algo
	   puesto. Los tres son los mismos en las calculadoras de evento, que llevan
	   la misma barra. */
	--abierto: rgba(255, 255, 255, 0.2);
	--punto: 6px;
	--punto-color: #FE7112;
	/* Lo que el contenedor se separa del borde de la ventana cuando ya no le
	   sobra sitio. La barra del teléfono lo descuenta para quedarse a diez
	   píxeles del borde y no a los del contenedor. */
	--margen: 1rem;
	--radius: 14px;
	/* Sin fondo propio: el de la página lo pone el tema, y la plantilla se
	   limita a poner sus tarjetas y sus barras encima. */
	box-sizing: border-box;
	color: var(--text);
	line-height: normal;
	text-align: left;
	/* Aire por arriba para no quedar pegados a la cabecera del sitio, y un
	   remate generoso por abajo por lo mismo con el pie. */
	padding: 2rem 0 5rem;
	margin: 0;
}

/* El reinicio es para lo de dentro. El contenedor queda fuera a propósito: si
   entrara, este `padding: 0` anularía el suyo, que es justo lo que separa la
   plantilla de la cabecera y del pie del tema. */
.iat-tpl--coches-archivo-v1 *,
.iat-tpl--coches-archivo-v1 *::before,
.iat-tpl--coches-archivo-v1 *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* La tipografía la pone el tema. Los controles de formulario no la heredan por
   sí solos, así que se les pide de forma explícita. */
.iat-tpl--coches-archivo-v1 button,
.iat-tpl--coches-archivo-v1 input,
.iat-tpl--coches-archivo-v1 select,
.iat-tpl--coches-archivo-v1 textarea {
	font-family: inherit;
}

.iat-tpl--coches-archivo-v1 .iat-container {
	max-width: 1200px;
	width: 100%;
	margin-inline: auto;
	min-width: 0;
}

.iat-tpl--coches-archivo-v1 .iat-oculto-visual {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.iat-tpl--coches-archivo-v1 a {
	color: inherit;
	text-decoration: none;
}

.iat-tpl--coches-archivo-v1 [hidden] {
	display: none !important;
}

/* Cabecera ---------------------------------------------------------------- */

.iat-tpl--coches-archivo-v1 .iat-titulo {
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 900;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.5px;
	color: var(--text);
}

/* El título y el botón de comparar, uno a cada lado de la franja. El margen que
   separaba el título de los filtros pasa a la franja, que es lo que ahora hace
   de bloque. */
.iat-tpl--coches-archivo-v1 .iat-titulo-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

/* El conmutador de vista y el enlace al comparador, juntos al otro extremo de
   la franja del título. En el teléfono la franja se pone en columna y esta caja
   baja entera debajo del título, con los dos hombro con hombro. */
.iat-tpl--coches-archivo-v1 .iat-titulo-acciones {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.iat-tpl--coches-archivo-v1 .iat-boton-comparar {
	display: inline-block;
	padding: 0.6rem 1.35rem;
	border: 1px solid var(--text);
	border-radius: 9999px;
	color: var(--text);
	font-size: 0.8rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.iat-tpl--coches-archivo-v1 .iat-boton-comparar:hover {
	background: var(--text);
	color: var(--tinta);
}

/* En el teléfono el botón baja debajo del título y pegado a la izquierda. */
@media (max-width: 700px) {
.iat-titulo-fila{margin-bottom:0 !important;}

	.iat-tpl--coches-archivo-v1 .iat-titulo-fila {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.9rem;
	}
}

/* Controles --------------------------------------------------------------- */

/* Las tres barras son la misma caja y se separan siempre por lo mismo, 10 px:
   son tres tramos de un mismo bloque de mandos, no tres secciones. */
.iat-tpl--coches-archivo-v1 .iat-cabecera-filtros,
.iat-tpl--coches-archivo-v1 .iat-controles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 3rem;
	margin-bottom: 10px;
	padding: 1rem 1.5rem;
	border-radius: var(--radius);
	background: var(--barra);
}

/* La primera barra es la única que no lleva rótulos: el resumen de clases a la
   izquierda y el buscador ocupando lo que quede. */
.iat-tpl--coches-archivo-v1 .iat-cabecera-filtros {
	gap: 10px 1.5rem;
}


.iat-tpl--coches-archivo-v1 .iat-control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	min-width: 0;
}

.iat-tpl--coches-archivo-v1 .iat-control__titulo {
	flex: none;
	color: var(--text);
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* En la barra de arriba el grupo va sobre fondo hundido, como un conmutador de
   verdad; en la de abajo los filtros son chips sueltos. */
.iat-tpl--coches-archivo-v1 .iat-pills {
	display: inline-flex;
	flex-wrap: wrap;
	padding: 3px;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.35);
}

.iat-tpl--coches-archivo-v1 .iat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	min-width: 0;
}

.iat-tpl--coches-archivo-v1 .iat-chip {
	border: 1px solid var(--chip-linea);
	background: transparent;
	color: var(--chip-linea);
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.iat-tpl--coches-archivo-v1 .iat-chip:hover,
.iat-tpl--coches-archivo-v1 .iat-chip:focus-visible {
	border-color: var(--accent);
	color: var(--text);
}

.iat-tpl--coches-archivo-v1 .iat-chip.is-on {
	background: var(--text);
	border-color: var(--text);
	color: var(--tinta);
	font-weight: 900;
}

/* Un criterio que ya no ordena nada —«clase» con una clase filtrada— se queda
   a la vista pero apagado: quitarlo movería de sitio a los demás cada vez que
   se filtra, y quien busca el chip no lo encontraría donde lo dejó. */
.iat-tpl--coches-archivo-v1 .iat-chip.is-off {
	opacity: 0.3;
	pointer-events: none;
}

/* Dentro del conmutador el chip pierde el contorno: el fondo hundido del grupo
   ya hace de marco y seis contornos seguidos sólo añaden ruido. */
.iat-tpl--coches-archivo-v1 .iat-pills .iat-chip {
	border-color: transparent;
	color: var(--text);
	font-weight: 500;
	text-transform: none;
}

.iat-tpl--coches-archivo-v1 .iat-pills .iat-chip:hover,
.iat-tpl--coches-archivo-v1 .iat-pills .iat-chip:focus-visible {
	border-color: transparent;
	color: var(--accent-soft);
}

.iat-tpl--coches-archivo-v1 .iat-pills .iat-chip.is-on {
	background: var(--text);
	border-color: var(--text);
	color: var(--tinta);
	font-weight: 900;
}

/* Buscador ---------------------------------------------------------------- */

/* Ocupa lo que quede de la primera barra, a la derecha del resumen de clases.
   El campo va sin caja, sólo con una línea debajo: la caja ya la pone la barra,
   y dos cajas anidadas competirían entre ellas. */
.iat-tpl--coches-archivo-v1 .iat-buscador {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
	min-width: 15rem;
}

.iat-tpl--coches-archivo-v1 .iat-buscador__campo {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	border-bottom: 1px solid var(--chip-linea);
	transition: border-color 0.15s ease;
}

.iat-tpl--coches-archivo-v1 .iat-buscador__campo:focus-within {
	border-bottom-color: var(--accent);
}

/* El selector lleva la etiqueta delante de la clase a propósito: el tema
   estiliza sus propios campos de formulario y, sin eso, el color del texto que
   se escribe acaba siendo el suyo. `-webkit-text-fill-color` va con el `color`
   porque es el que de verdad manda en WebKit. */
.iat-tpl--coches-archivo-v1 input.iat-buscador__input,
.iat-tpl--coches-archivo-v1 input.iat-buscador__input:hover,
.iat-tpl--coches-archivo-v1 input.iat-buscador__input:focus {
	flex: 1;
	min-width: 0;
	padding: 0.4rem 0.2rem;
	border: 0;
	outline: none;
	box-shadow: none;
	background: transparent;
	color: var(--text);
	-webkit-text-fill-color: var(--text);
	caret-color: var(--text);
	font-size: 0.9rem;
}

.iat-tpl--coches-archivo-v1 input.iat-buscador__input::placeholder {
	color: var(--text-soft);
	-webkit-text-fill-color: var(--text-soft);
	opacity: 1;
}

/* Lo que rellena el navegador viene con su propio fondo y su propio color, y no
   hay forma de quitarlos: se tapan con una sombra interior del color de la
   barra. */
.iat-tpl--coches-archivo-v1 input.iat-buscador__input:-webkit-autofill,
.iat-tpl--coches-archivo-v1 input.iat-buscador__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text);
	box-shadow: 0 0 0 100px var(--barra) inset;
}

/* La aspa de limpiar sólo está cuando hay algo que limpiar. */
.iat-tpl--coches-archivo-v1 .iat-buscador__limpiar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--text);
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.iat-tpl--coches-archivo-v1 .iat-buscador__limpiar:hover,
.iat-tpl--coches-archivo-v1 .iat-buscador__limpiar:focus-visible {
	background: var(--accent);
	color: var(--tinta);
}

/* El botón repite la píldora blanca de un filtro puesto: es la misma familia
   de mandos y hace lo mismo, confirmar una elección. */
.iat-tpl--coches-archivo-v1 .iat-buscador__boton {
	flex: none;
	padding: 0.5rem 1.4rem;
	border: 1px solid var(--text);
	border-radius: 999px;
	background: var(--text);
	color: var(--tinta);
	font-size: 0.75rem;
	font-weight: 900;
	font-style: italic;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.iat-tpl--coches-archivo-v1 .iat-buscador__boton:hover,
.iat-tpl--coches-archivo-v1 .iat-buscador__boton:focus-visible {
	background: transparent;
	color: var(--text);
}

/* Con JavaScript el listado se rehace al teclear, así que el botón de enviar
   sobra: sólo está para que el formulario funcione sin él. */
.iat-tpl--coches-archivo-v1 .iat-buscador.is-vivo .iat-buscador__boton {
	display: none;
}

/* Barra del teléfono ------------------------------------------------------ */

/* En el escritorio esta caja no existe: se deshace y el buscador que lleva
   dentro vuelve a caer en la barra de arriba, que es donde va. Lo demás —los
   desplegables, el botón de ajustes, la lupa y el chevron— sólo tiene sentido
   con los mandos anclados abajo, así que aquí no se pinta. */
.iat-tpl--coches-archivo-v1 .iat-movil,
.iat-tpl--coches-archivo-v1 .iat-movil__barra {
	display: contents;
}

/* Sin `!important`, que ya lo pone `[hidden]`: esto es para cuando el script
   los ha abierto en el teléfono y luego la ventana se ensancha. */
.iat-tpl--coches-archivo-v1 .iat-movil__paneles,
.iat-tpl--coches-archivo-v1 .iat-movil__ajustes,
.iat-tpl--coches-archivo-v1 .iat-buscador__lupa,
.iat-tpl--coches-archivo-v1 .iat-buscador__chevron {
	display: none;
}

/* Flechas de ordenación --------------------------------------------------- */

/* Las dos flechas van siempre en el marcado y sólo se enseña la que toca: así
   cambiar de sentido es cambiar una clase, y el JavaScript no tiene que
   construir nada. La flecha dice cómo está ordenado ahora mismo, no lo que
   pasaría al pulsar; sólo la lleva el criterio puesto, porque en los demás sería
   una promesa y no un dato. */
.iat-tpl--coches-archivo-v1 .iat-flecha {
	display: none;
	margin-left: 0.3rem;
	font-weight: 900;
}

.iat-tpl--coches-archivo-v1 .iat-chip.is-on.is-asc .iat-flecha--asc,
.iat-tpl--coches-archivo-v1 .iat-chip.is-on.is-desc .iat-flecha--desc {
	display: inline;
}

/* Clases: resumen y filtro ------------------------------------------------ */

/* La tira dice cuántos coches hay de cada clase y a la vez filtra por ella. Es
   el mismo dato haciendo de mando: la cifra que se lee antes de pulsar es la
   que va a quedar en pantalla después. */
.iat-tpl--coches-archivo-v1 .iat-contadores {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0.6rem 0.4rem;
	border: 1px solid var(--card-border);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.25);
}

/* Rejilla de dos filas con la de arriba de alto fijo: el distintivo de clase y
   la palabra «TOTAL» no miden lo mismo —el SVG es 24×19, así que a 26 px de
   ancho se queda en ~21 de alto— y sin una fila común sus cifras arrancarían a
   alturas distintas. La fila mide 30 px y no los 21 justos del dibujo porque
   el distintivo lleva ahora relleno propio: es lo que sostiene el blanco de la
   clase elegida, igual que en la barra del teléfono. */
.iat-tpl--coches-archivo-v1 .iat-contador {
	display: grid;
	grid-template-rows: 30px auto;
	align-items: center;
	justify-items: center;
	gap: 0.3rem;
	min-width: 4rem;
	padding: 0 0.9rem;
	color: var(--text);
}

.iat-tpl--coches-archivo-v1 .iat-contador + .iat-contador {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.iat-tpl--coches-archivo-v1 a.iat-contador {
	cursor: pointer;
}

.iat-tpl--coches-archivo-v1 a.iat-contador:hover .iat-contador__n,
.iat-tpl--coches-archivo-v1 a.iat-contador.is-on .iat-contador__n {
	color: var(--accent-soft);
}

/* Y lo puesto se señala igual que en la barra del teléfono: el distintivo se
   lee sobre blanco entero. Aquí el relleno va en el distintivo y no en toda la
   casilla porque debajo cuelga la cifra, que es del resumen y no del mando: lo
   que se enciende es a lo que se apunta al pulsar. Al pasar por encima el mismo
   blanco a medias, como un anticipo de lo que va a quedar.

   Las clases que no están puestas no se apagan: el blanco ya dice cuál es la
   elegida, y las demás siguen siendo un resumen que se lee —la cifra de cada
   clase es un dato de la lista entera, no de lo filtrado—, así que atenuarlas
   escondía lo que la tira está para contar. */
.iat-tpl--coches-archivo-v1 a.iat-contador:not(.is-on):hover .iat-contador__ico,
.iat-tpl--coches-archivo-v1 a.iat-contador:not(.is-on):focus-visible .iat-contador__ico,
.iat-tpl--coches-archivo-v1 a.iat-contador:not(.is-on):hover .iat-contador__letra,
.iat-tpl--coches-archivo-v1 a.iat-contador:not(.is-on):focus-visible .iat-contador__letra {
	background: rgba(255, 255, 255, 0.5);
}

.iat-tpl--coches-archivo-v1 .iat-contador.is-on .iat-contador__ico,
.iat-tpl--coches-archivo-v1 .iat-contador.is-on .iat-contador__letra {
	background: var(--text);
}

/* Sobre el blanco, la palabra pasa a tinta: el distintivo de clase no lo
   necesita porque se pinta solo, con sus propios colores. */
.iat-tpl--coches-archivo-v1 .iat-contador.is-on .iat-contador__letra {
	color: var(--activo);
}

/* La tira y su aviso van juntos, en columna, para que el aviso caiga debajo de
   las clases y no debajo de toda la barra. */
.iat-tpl--coches-archivo-v1 .iat-clases {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

/* Los dos avisos están siempre en el marcado; el CSS enseña el que toca. */
.iat-tpl--coches-archivo-v1 .iat-pista {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding-left: 0.4rem;
	color: var(--text);
	font-size: 12px;
	line-height: 1.3;
}

/* Fina y pequeña: señala hacia las clases, no compite con ellas. */
.iat-tpl--coches-archivo-v1 .iat-pista__flecha {
	font-size: 11px;
	font-weight: 300;
	line-height: 1;
}

.iat-tpl--coches-archivo-v1 .iat-pista__texto {
	display: none;
}

.iat-tpl--coches-archivo-v1 .iat-pista .iat-pista__texto--libre,
.iat-tpl--coches-archivo-v1 .iat-pista.is-filtrado .iat-pista__texto--filtrado {
	display: inline;
}

.iat-tpl--coches-archivo-v1 .iat-pista.is-filtrado .iat-pista__texto--libre {
	display: none;
}

.iat-tpl--coches-archivo-v1 .iat-pista__fuerte {
	font-weight: 900;
}

/* El ancho es el del dibujo —26 px— más los cuatro de relleno a cada lado:
   con `border-box` el relleno se come el ancho, así que hay que sumárselo para
   que el distintivo siga midiendo lo mismo que antes. */
.iat-tpl--coches-archivo-v1 .iat-contador__ico {
	display: block;
	width: 34px;
	height: auto;
	padding: 4px;
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

.iat-tpl--coches-archivo-v1 .iat-contador__letra {
	padding: 5px 8px;
	border-radius: 6px;
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.5px;
	line-height: 1;
	color: var(--text);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.iat-tpl--coches-archivo-v1 .iat-contador__n {
	font-size: 0.95rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}

.iat-tpl--coches-archivo-v1 .iat-contador--total .iat-contador__n {
	color: var(--accent-soft);
}

/* Rejilla ----------------------------------------------------------------- */

/* La separación con el bloque de mandos la pone la rejilla, no la última barra:
   entre las barras hay 10 px porque son tramos de lo mismo, y aquí se cambia de
   asunto. Va en la rejilla y no en un `:last-of-type` de las barras porque ése
   mira el tipo de etiqueta y no la clase, y el último `div` hermano es el de
   «ver más». */
.iat-tpl--coches-archivo-v1 .iat-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 1rem;
	margin-top: 2rem;
	padding-bottom: 2rem
}

/* Mientras se espera al servidor las tarjetas se apagan un poco: dice que hay
   algo en marcha sin mover nada de sitio. */
.iat-tpl--coches-archivo-v1 .iat-rejilla[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.iat-tpl--coches-archivo-v1 .iat-vacio,
.iat-tpl--coches-archivo-v1 .iat-cargando {
	padding: 1.5rem 0;
	color: var(--text-soft);
	font-size: 0.9rem;
}

/* Vista: rejilla o tabla --------------------------------------------------- */

/* Los dos juegos de coches están siempre en el documento y aquí se decide cuál
   se ve. Es lo mismo que se hace con las flechas de ordenación y con los avisos
   de las clases: cambiar de vista es cambiar una clase de la raíz, y así el
   script no construye ni vuelve a pedir nada. */
.iat-tpl--coches-archivo-v1.is-vista-rejilla .iat-tabla-caja,
.iat-tpl--coches-archivo-v1.is-vista-tabla .iat-rejilla {
	display: none;
}

/* Con la tabla puesta ordena su cabecera, así que la barra de «ordenar por»
   sobra: dos mandos para lo mismo, uno encima del otro, sólo hacen dudar de si
   hacen lo mismo. Sigue en el marcado porque en la rejilla es la única forma de
   ordenar, y porque el script la repinta pase lo que pase. */
.iat-tpl--coches-archivo-v1.is-vista-tabla .iat-controles--orden {
	display: none;
}

/* El conmutador va en el mismo grupo hundido que las unidades, pero con las
   esquinas menos redondeadas: lo que lleva dentro son dos dibujos cuadrados y
   no dos palabras, y una píldora les dejaría demasiado aire a los lados. */
.iat-tpl--coches-archivo-v1 .iat-pills--ico {
	border-radius: 12px;
	padding: 4px;
}

/* Los dibujos vienen en línea, así que su color es el del botón: blanco
   mientras la vista está apagada y la tinta oscura sobre el blanco de la
   puesta, que es lo que ya dice `.iat-chip`. */
.iat-tpl--coches-archivo-v1 .iat-chip--ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	padding: 0.4rem 0.9rem;
}

.iat-tpl--coches-archivo-v1 .iat-chip__ico {
	display: flex;
}

.iat-tpl--coches-archivo-v1 .iat-chip__ico svg {
	display: block;
	width: auto;
	height: 15px;
}

/* Tabla ------------------------------------------------------------------- */

/* Nueve columnas no caben en cualquier ventana, y encogerlas hasta que quepan
   dejaría las cifras sin leerse, así que la tabla se arrastra dentro de su caja.

   Y se arrastra en los dos ejes, no sólo de lado: la caja mide lo que la ventana
   y el listado corre por dentro. Eso es lo que hace que la cabecera se quede
   arriba de verdad. Un elemento que arrastra pasa a ser el contenedor contra el
   que se pega lo que lleva dentro, así que mientras la caja creciera con el
   listado —sin alto propio, arrastrándose sólo de lado— la cabecera se pegaba al
   borde de la caja y se iba con la página igual que antes. No hay forma de
   evitarlo desde el CSS: cualquier cosa que arrastre en horizontal se lleva
   consigo el eje vertical.

   Sólo el eje de lado se contiene. El vertical se deja encadenar a propósito:
   contenido también, llegar al final de la tabla dejaría de mover la página y
   no habría manera de seguir bajando.

   La caja lleva `tabindex` para que se pueda recorrer también con el teclado: un
   contenido que se desplaza y no recibe el foco no hay forma de leerlo sin
   ratón. */
.iat-tpl--coches-archivo-v1 .iat-tabla-caja {
	/* Lo que se le deja a la página por debajo de la tabla. En el teléfono es
	   más porque ahí abajo está la barra de mandos, que va pegada al borde. */
	--hueco-tabla: 3rem;
	max-height: calc(100vh - var(--hueco-tabla));
	margin-top: 2rem;
	overflow: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

/* El testigo del final, dentro de la caja porque es ella la que se arrastra: el
   bloque de «ver más» se queda fuera y desde dentro no se le ve llegar nunca. */
.iat-tpl--coches-archivo-v1 .iat-listado__final {
	height: 1px;
}

.iat-tpl--coches-archivo-v1 .iat-tabla-caja:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

/* Separada y no colapsada: lo que separa una fila de otra son cuatro píxeles de
   fondo de página, así que cada coche se lee como una banda y no como el
   renglón de una hoja de cálculo. */
.iat-tpl--coches-archivo-v1 .iat-listado {
	/* El fondo de una fila y el que se le pone al pasar por encima. Van con
	   nombre porque una columna que deja de estar quieta tiene que volver a
	   ellos, y dos sitios escribiendo el mismo negro a mano es la forma más
	   fácil de que un día dejen de ser el mismo. */
	--banda: rgba(0, 0, 0, 0.22);
	--banda-encima: rgba(0, 0, 0, 0.38);
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 4px;
	font-size: 0.82rem;
	white-space: nowrap;
}

/* Mientras se espera al servidor las filas se apagan un poco, como las
   tarjetas: dice que hay algo en marcha sin mover nada de sitio. */
.iat-tpl--coches-archivo-v1 .iat-listado[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

/* La cabecera se queda arriba: con doscientos coches cargados, una cifra a
   media pantalla no dice de qué columna es si el rótulo se ha ido de la
   ventana. */
.iat-tpl--coches-archivo-v1 .iat-listado thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 0.7rem 0.75rem;
	background: var(--barra);
	color: var(--accent);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.5px;
	line-height: 1.25;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
}

.iat-tpl--coches-archivo-v1 .iat-listado thead th:first-child {
	border-radius: var(--radius) 0 0 var(--radius);
}

.iat-tpl--coches-archivo-v1 .iat-listado thead th:last-child {
	border-radius: 0 var(--radius) var(--radius) 0;
}

.iat-tpl--coches-archivo-v1 .iat-listado tbody td,
.iat-tpl--coches-archivo-v1 .iat-listado tbody th {
	padding: 0.5rem 0.75rem;
	background: var(--banda);
	font-weight: 700;
	text-align: left;
	vertical-align: middle;
}

/* Los cinco de más rango de cada clase llevan el mismo degradado que su
   tarjeta, de arriba abajo de la fila. Es lo que los nombra en la rejilla, y sin
   él la tabla sería el único sitio del listado donde ser de élite no se ve.

   Encima va una capa negra que la tarjeta no necesita: allí el degradado queda
   detrás del nombre en blanco, y aquí detrás de las cifras de serie, que son de
   un rosa claro y sobre el magenta de arriba del degradado no se leerían. La
   capa lo oscurece sin cambiarle el color, así que la fila sigue siendo la
   misma que la tarjeta, sólo que legible. */
.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila.is-elite > * {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
		linear-gradient(180deg, #B53EE4 0%, #73008F 100%);
}

.iat-tpl--coches-archivo-v1 .iat-listado tbody tr:hover td,
.iat-tpl--coches-archivo-v1 .iat-listado tbody tr:hover th {
	background: var(--banda-encima);
}

.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila.is-elite:hover > * {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
		linear-gradient(180deg, #B53EE4 0%, #73008F 100%);
}

.iat-tpl--coches-archivo-v1 .iat-listado tbody tr > *:first-child {
	border-radius: 10px 0 0 10px;
}

.iat-tpl--coches-archivo-v1 .iat-listado tbody tr > *:last-child {
	border-radius: 0 10px 10px 0;
}

.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__clase {
	width: 1%;
	padding-right: 0.4rem;
}

.iat-tpl--coches-archivo-v1 .iat-fila__clase-ico {
	display: block;
	width: 26px;
	height: auto;
}

.iat-tpl--coches-archivo-v1 .iat-fila__clase-letra {
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.5px;
}

/* El nombre es lo único de la fila que lleva enlace, así que es lo único que se
   subraya al pasar por encima: el resto son cifras, no destinos. */
.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__coche {
	font-size: 0.88rem;
	font-weight: 900;
	color: var(--text);
}

.iat-tpl--coches-archivo-v1 .iat-fila__coche a:hover,
.iat-tpl--coches-archivo-v1 .iat-fila__coche a:focus-visible {
	color: var(--accent-soft);
	text-decoration: underline;
}

.iat-tpl--coches-archivo-v1 .iat-fila__etiqueta,
.iat-tpl--coches-archivo-v1 .iat-fila__oc {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin-left: 0.4rem;
	vertical-align: middle;
	font-size: 0.62rem;
	font-weight: 900;
	letter-spacing: 0.5px;
}

/* Las dos etiquetas son la misma caja y sólo cambian de color, así que el borde
   sigue al texto en vez de repetirlo cada una. */
.iat-tpl--coches-archivo-v1 .iat-fila__etiqueta {
	padding: 0.1rem 0.4rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	white-space: nowrap;
}

.iat-tpl--coches-archivo-v1 .iat-fila__etiqueta--evo {
	color: var(--accent);
}

/* La de élite en blanco: va sobre el degradado de su propia fila, y el morado
   de EVO ahí no se leería. Es además la que más pesa de las dos —dice contra
   quién compite el coche, no qué es—, y el blanco es lo que más resalta sobre
   cualquiera de los dos fondos. */
.iat-tpl--coches-archivo-v1 .iat-fila__etiqueta--elite {
	color: var(--text);
}

.iat-tpl--coches-archivo-v1 .iat-fila__estrellas-tira {
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

.iat-tpl--coches-archivo-v1 .iat-fila__estrellas .iat-estrella {
	display: block;
	width: 16px;
	height: 16px;
}

/* Los planos son una cifra como las demás, así que se alinean como las demás:
   a la derecha, que es donde las unidades de una columna de números caen unas
   debajo de otras y se pueden comparar de un vistazo. */
.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__planos {
	color: var(--text);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Las dos cifras de una característica, una encima de la otra: arriba el coche
   de serie y abajo el mismo coche terminado. Es la misma pareja que la tarjeta
   pone en dos columnas, aquí apilada para que la tabla quepa a lo ancho.

   La de arriba en el rosa de la plantilla y la de abajo en blanco: a esa
   distancia el color separa antes que cualquier rótulo, y por eso el rótulo que
   llevan delante es de los que sólo se oyen. */
.iat-tpl--coches-archivo-v1 .iat-fila__cifra {
	text-align: right;
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

/* En flujo normal el salto de línea que el marcado deja detrás de la cifra se
   descartaría, pero la tabla va en `nowrap` y ahí ese hueco sobrevive: se queda
   pegado al borde derecho y empuja el número unos píxeles hacia dentro, justo
   los que lo desalineaban de su cabecera. Una caja flexible no tiene ese
   problema: el espacio en blanco entre hijos no llega a ser nada. */
.iat-tpl--coches-archivo-v1 .iat-fila__valor {
	display: flex;
	justify-content: flex-end;
}

/* La pareja de rótulos que abre la tira de cifras, repetida en cada fila. Va en
   el mismo sitio que las cifras que nombra —arriba el de serie, abajo el del
   máximo— y en cada uno de sus dos colores, que es lo que la convierte en
   leyenda y no en dos palabras sueltas.

   Pequeña y sin negrita: nombra la columna de al lado, no compite con ella.
   Doce píxeles y no `rem` porque es un rótulo fijo, de los que no crecen con el
   cuerpo del texto. */
.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__leyenda {
	width: 1%;
	padding-right: 0.5rem;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1.35;
	text-align: right;
	white-space: nowrap;
}

/* Una raya finísima entre las dos mitades de la fila, desde la leyenda hasta la
   última columna. No separa dos cosas distintas —son el mismo coche— así que se
   queda en lo justo para que el ojo siga en horizontal la línea de arriba sin
   irse a la de abajo, y no en una regla que parta la fila en dos.

   Va en un pseudoelemento y no en un borde de la cifra: un borde acabaría donde
   acaba el relleno de cada celda y la raya saldría a trozos, con un hueco en
   cada junta. Así cruza la fila entera de un tirón.

   Al 50 % de la celda, que es justo donde se tocan las dos mitades: las dos
   cifras miden lo mismo y el relleno es simétrico, así que el centro de la celda
   y la juntura son el mismo sitio. */
.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__leyenda,
.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__cifra {
	position: relative;
}

.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__leyenda::after,
.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__cifra::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.iat-tpl--coches-archivo-v1 .iat-fila__valor--stock {
	color: var(--accent-soft);
}

.iat-tpl--coches-archivo-v1 .iat-fila__valor--max {
	color: var(--text);
	padding-top:.3rem;
}

.iat-tpl--coches-archivo-v1 .iat-listado thead th.iat-listado__cifra {
	text-align: right;
}

/* La cabecera que ordena es el mismo mando que un chip de «ordenar por», sólo
   que puesto donde se busca al mirar una tabla. Se comporta como tal: cambia de
   color al pasar por encima y se enciende en blanco cuando es el criterio
   puesto, que es lo que hace el chip con su relleno. */
.iat-tpl--coches-archivo-v1 .iat-listado .iat-orden {
	display: inline-block;
	color: inherit;
	cursor: pointer;
	transition: color 0.15s ease;
}

.iat-tpl--coches-archivo-v1 .iat-listado .iat-orden:hover,
.iat-tpl--coches-archivo-v1 .iat-listado .iat-orden:focus-visible {
	color: var(--accent-soft);
}

.iat-tpl--coches-archivo-v1 .iat-listado .iat-orden.is-on {
	color: var(--text);
}

/* Un criterio que ya no ordena nada —«clase» con una sola clase filtrada— se
   queda a la vista pero apagado, igual que su chip: quitarlo movería de sitio
   una columna entera cada vez que se filtra. */
.iat-tpl--coches-archivo-v1 .iat-listado .iat-orden.is-off {
	opacity: 0.35;
	pointer-events: none;
}

/* Aquí la flecha está siempre, y no sólo en la columna que ordena. En los chips
   sólo la lleva el criterio puesto porque en los demás sería una promesa; en una
   cabecera de tabla es al revés: la flecha es lo que dice que esa columna se
   puede pulsar, y sin ella no hay nada que distinga una cabecera de un rótulo.
   Apagada mientras no ordene, encendida cuando sí.

   La que se enseña es la del sentido que hay puesto en la columna que ordena, y
   la del sentido natural del criterio en las demás. */
.iat-tpl--coches-archivo-v1 .iat-listado .iat-orden.is-asc .iat-flecha--asc,
.iat-tpl--coches-archivo-v1 .iat-listado .iat-orden.is-desc .iat-flecha--desc {
	display: inline;
}

.iat-tpl--coches-archivo-v1 .iat-listado .iat-orden:not(.is-on) .iat-flecha {
	opacity: 0.4;
}

/* La flecha va delante del rótulo en todas las columnas, vayan alineadas a un
   lado o al otro. Siempre en el mismo sitio se lee como lo que es —el asa de la
   cabecera— y no como una marca que a veces sale por un lado y a veces por el
   otro.

   En las columnas de cifras, además, es lo único que las deja caer encima de lo
   que nombran: detrás sería la flecha la que quedara pegada al borde derecho de
   la celda, y el rótulo se apartaría de las cifras justo lo que ella mide. */
.iat-tpl--coches-archivo-v1 .iat-listado thead th .iat-orden {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
}

.iat-tpl--coches-archivo-v1 .iat-listado thead th .iat-flecha {
	order: -1;
	margin-left: 0;
}

/* La celda numérica es la misma que la de la tarjeta, pero allí la viste
   `tarjeta-coche.css` colgando de `.iat-coche` y aquí no hay tarjeta ninguna. */
.iat-tpl--coches-archivo-v1 .iat-listado .iat-num {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.iat-tpl--coches-archivo-v1 .iat-listado .iat-num--cambia .iat-num__v {
	color: var(--oc);
}


/* Ver más ----------------------------------------------------------------- */

.iat-tpl--coches-archivo-v1 .iat-mas {
	display: flex;
	justify-content: center;
	padding-top: 2rem;
}

/* Con la carga al llegar al final en marcha el botón no se llega a necesitar
   nunca, así que se quita de en medio. Es lo mismo que se hace con el botón de
   buscar, y por lo mismo: los dos están para que la página funcione sin
   JavaScript, no para usarse con él. El script lo devuelve a la vista si el
   endpoint falla. */
.iat-tpl--coches-archivo-v1 .iat-mas.is-vivo {
	display: none;
}

.iat-tpl--coches-archivo-v1 .iat-boton {
	display: inline-block;
	padding: 0.7rem 1.75rem;
	border: 1px solid var(--text);
	border-radius: 999px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: var(--text);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.iat-tpl--coches-archivo-v1 .iat-boton:hover,
.iat-tpl--coches-archivo-v1 .iat-boton:focus-visible {
	background: var(--text);
	color: var(--tinta);
}

/* Pantallas estrechas ----------------------------------------------------- */

/* En cuanto la ventana baja del ancho del contenedor, el margen que antes ponía
   el `max-width` desaparece y hay que devolvérselo al contenido. */
@media (max-width: 1200px) {
	.iat-tpl--coches-archivo-v1 .iat-container {
		padding-inline: var(--margen);
	}
}

@media (max-width: 700px) {
	/* En columna para poder mandar la cabecera al final con `order`: el buscador
	   está al principio del marcado porque en el escritorio va arriba, y para
	   que se pegue al borde inferior sin dejar un hueco donde estaba tiene que
	   ser el último de la fila. */
	.iat-tpl--coches-archivo-v1 .iat-container {
		display: flex;
		flex-direction: column;
	}

	/* Las dos barras de mandos de arriba dejan de mandar: lo que hacían lo hace
	   la barra de abajo. La cabecera no se esconde del todo porque el buscador
	   vive dentro; pierde su caja y baja al final convertida en el ancla de esa
	   barra.
	 *
	   Es ella la que se pega y no lo que lleva dentro, para que la que se pegue
	   sea una caja de verdad: un `display: contents` de por medio deja al hijo
	   colgando del contenedor y el anclaje depende entonces de cómo resuelva
	   eso cada navegador.
	 *
	   Pegajosa y no fija: así se para donde acaba el contenido en vez de seguir
	   flotando sobre el pie del tema, que no es suyo. Al ser la última de la
	   columna su sitio natural ya es el final, y mientras ese final quede por
	   debajo de la ventana la barra sube a los diez píxeles del borde.
	 *
	   El margen negativo es el del contenedor: sin él la barra se quedaría a la
	   distancia del contenido y no a la del borde de la ventana. */
	.iat-tpl--coches-archivo-v1 .iat-cabecera-filtros {
		order: 1;
		position: sticky;
		bottom: 10px;
		z-index: 100;
		display: block;
		margin: 0 calc(10px - var(--margen));
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.iat-tpl--coches-archivo-v1 .iat-clases,
	.iat-tpl--coches-archivo-v1 .iat-controles {
		display: none;
	}

	/* La pila de la barra: los desplegables encima y el buscador abajo del todo,
	   que es lo que queda a mano del pulgar. */
	.iat-tpl--coches-archivo-v1 .iat-movil {
		--ajustes: 44px;
		/* Lo que separa el campo de búsqueda del botón que tiene al lado, y lo
		   que por tanto hay que descontarle al ancho de los desplegables para
		   que caigan justo debajo del campo. */
		--hueco: 10px;
		/* Entre cajas apiladas basta con mucho menos: son la misma barra a
		   varias alturas, no cosas distintas. */
		--pila: 4px;
		display: flex;
		flex-direction: column;
		gap: var(--pila);
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__paneles {
		display: flex;
		flex-direction: column;
		gap: var(--pila);
	}

	/* Las clases y la ordenación miden lo que el campo de búsqueda: cuelgan de
	   él, no del botón que tiene al lado. */
	.iat-tpl--coches-archivo-v1 .iat-movil__paneles--filtros {
		width: calc(100% - var(--ajustes) - var(--hueco));
	}

	/* Los ajustes cuelgan del botón que los abre, así que se alinean con él por
	   la derecha y miden lo que midan. */
	.iat-tpl--coches-archivo-v1 .iat-movil__paneles--ajustes {
		align-items: flex-end;
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__caja {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 4px;
		padding: 5px;
		border: 1px solid var(--card-border);
		border-radius: 999px;
		background: var(--barra);
	}

	/* Los distintivos de clase ya vienen con su propio aire dibujado dentro, y
	   con seis casillas repartidas de extremo a extremo la tira se leía como
	   seis cosas sueltas y no como una. Juntas y en el centro se leen como lo
	   que son: una escala. */
	.iat-tpl--coches-archivo-v1 .iat-movil__caja--clases {
		justify-content: center;
	}

	/* Los seis criterios no caben de ancho: la tira se arrastra de lado y la
	   barra de desplazamiento sobra, que el corte a la derecha ya dice que
	   sigue. */
	.iat-tpl--coches-archivo-v1 .iat-movil__caja--tira {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__caja--tira::-webkit-scrollbar {
		display: none;
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__opcion {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		flex: none;
		min-width: 34px;
		height: 30px;
		padding: 0 0.55rem;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: var(--accent-soft);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__opcion--texto {
		padding: 0 0.85rem;
	}

	/* El distintivo de clase ya viene con su propio margen dibujado dentro del
	   archivo, así que aquí no lleva nada: ni relleno a los lados ni el ancho
	   mínimo que ensancha a los demás. Va detrás de la regla general a
	   propósito —las dos pesan lo mismo— porque lo que hace es deshacerla. */
	.iat-tpl--coches-archivo-v1 .iat-movil__opcion--clase {
		min-width: 0;
		padding: 5px;
		border-radius: 6px;
	}

	/* La opción elegida se lee sobre blanco entero: es el único relleno opaco de
	   la barra —lo demás que se aclara, el desplegable abierto, va al 20 %— así
	   que no hace falta nada más para señalarla. */
	.iat-tpl--coches-archivo-v1 .iat-movil__opcion.is-on {
		background: var(--text);
		color: var(--activo);
		font-weight: 900;
	}

	/* Y el estado puesto se lee además en su color, el mismo con el que la
	   tarjeta dice que las cifras llevan el incremento del overclock sumado: el
	   dibujo es lo único que nombra al estado en la barra —el rótulo va oculto—
	   así que es ahí donde tiene que decirse. Los iconos van en línea y pintados
	   con `currentColor`, de modo que basta con el color del texto. */
	.iat-tpl--coches-archivo-v1 .iat-movil__opcion.is-on[data-valor="overclock"] {
		color: var(--oc);
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__opcion.is-on[data-valor="evo"] {
		color: var(--evo);
	}

	/* Igual que arriba: un criterio que ya no ordena nada se queda a la vista
	   pero apagado, para que los demás no cambien de sitio. */
	.iat-tpl--coches-archivo-v1 .iat-movil__opcion.is-off {
		opacity: 0.3;
		pointer-events: none;
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__ico {
		display: flex;
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__ico svg {
		display: block;
		width: auto;
		height: 15px;
	}

	/* El distintivo de clase conserva su color: es lo que lo identifica, y aquí
	   no hay letra que leer al lado. */
	.iat-tpl--coches-archivo-v1 .iat-movil__clase {
		display: block;
		width: 24px;
		height: auto;
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__letra {
		font-size: 0.72rem;
		font-weight: 900;
	}

	/* La flecha de la ordenación se enseña igual que en los chips de arriba:
	   sólo la del criterio puesto, y sólo en el sentido en que está. */
	.iat-tpl--coches-archivo-v1 .iat-movil__opcion.is-on.is-asc .iat-flecha--asc,
	.iat-tpl--coches-archivo-v1 .iat-movil__opcion.is-on.is-desc .iat-flecha--desc {
		display: inline;
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__barra {
		display: flex;
		align-items: center;
		gap: var(--hueco);
	}

	/* Buscador ------------------------------------------------------------ */

	/* Aquí el campo sí lleva caja: la barra de arriba, que era la que la ponía,
	   ya no está. */
	.iat-tpl--coches-archivo-v1 .iat-buscador {
		flex: 1;
		gap: 0;
		min-width: 0;
	}

	.iat-tpl--coches-archivo-v1 .iat-buscador__campo {
		gap: 0.5rem;
		height: var(--ajustes);
		padding: 0 0.6rem 0 0.9rem;
		border: 1px solid var(--card-border);
		border-radius: 999px;
		background: var(--barra);
	}

	.iat-tpl--coches-archivo-v1 .iat-buscador__campo:focus-within {
		border-color: var(--accent);
	}

	.iat-tpl--coches-archivo-v1 .iat-buscador__lupa {
		display: flex;
		flex: none;
		color: var(--accent-soft);
	}

	.iat-tpl--coches-archivo-v1 .iat-buscador__lupa svg {
		display: block;
	}

	/* El tamaño de letra tiene que ser 16 px o iOS hace zoom al enfocar el
	   campo, y con la barra anclada abajo el zoom la deja fuera de la pantalla. */
	.iat-tpl--coches-archivo-v1 input.iat-buscador__input,
	.iat-tpl--coches-archivo-v1 input.iat-buscador__input:hover,
	.iat-tpl--coches-archivo-v1 input.iat-buscador__input:focus {
		padding: 0;
		font-size: 16px;
	}

	.iat-tpl--coches-archivo-v1 input.iat-buscador__input:-webkit-autofill,
	.iat-tpl--coches-archivo-v1 input.iat-buscador__input:-webkit-autofill:focus {
		box-shadow: 0 0 0 100px var(--barra) inset;
	}

	/* Sin JavaScript se busca pulsando intro: el formulario tiene un solo campo
	   de texto y se envía solo. El botón ocuparía el ancho del campo. */
	.iat-tpl--coches-archivo-v1 .iat-buscador__boton {
		display: none;
	}

	.iat-tpl--coches-archivo-v1 .iat-buscador__chevron {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 1.6rem;
		height: 1.6rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--accent-soft);
		cursor: pointer;
		transition: background-color 0.15s ease;
	}

	.iat-tpl--coches-archivo-v1 .iat-buscador__ico {
		display: flex;
		transition: transform 0.2s ease;
	}

	/* Abierto se aclara el fondo, y nada más: es el estado que ya se está viendo
	   —el desplegable ocupa media pantalla— así que no necesita gritarlo. */
	.iat-tpl--coches-archivo-v1 .iat-buscador__chevron[aria-expanded="true"] {
		background: var(--abierto);
	}

	/* Y acotando lleva el punto, que es lo único que queda a la vista de que hay
	   algo detrás cuando el desplegable está cerrado. Un punto y no un relleno
	   claro: el relleno es lo que marca la opción elegida dentro del
	   desplegable, y las dos cosas a la vez se leerían como lo mismo. */
	.iat-tpl--coches-archivo-v1 .iat-buscador__chevron.is-puesto::after {
		content: "";
		position: absolute;
		top: 3px;
		right: 1px;
		width: var(--punto);
		height: var(--punto);
		border-radius: 50%;
		background: var(--punto-color);
	}

	/* Apuntando abajo mientras hay algo desplegado: la flecha dice hacia dónde
	   se va al pulsar, no dónde está. El punto se queda quieto, que va en el
	   botón y no en el dibujo. */
	.iat-tpl--coches-archivo-v1 .iat-buscador__chevron[aria-expanded="true"] .iat-buscador__ico {
		transform: rotate(180deg);
	}

	/* Cerrado va vestido como el campo que tiene al lado —fondo de la barra y
	   contorno rosa— porque en reposo es una puerta y no una elección. */
	.iat-tpl--coches-archivo-v1 .iat-movil__ajustes {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: var(--ajustes);
		height: var(--ajustes);
		padding: 0;
		border: 1px solid var(--card-border);
		border-radius: 50%;
		background: var(--barra);
		color: var(--accent-soft);
		cursor: pointer;
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}

	/* Abierto se aclara, igual que el chevron. */
	.iat-tpl--coches-archivo-v1 .iat-movil__ajustes[aria-expanded="true"] {
		background: var(--abierto);
	}

	/* Y lleva el punto cuando hay algo tocado detrás: las millas y el estado no
	   se leen en ningún sitio con el desplegable cerrado, así que sin esto el
	   listado estaría en millas sin decirlo.
	 *
	   Cuelga del dibujo y se va a la esquina del botón, que aquí son cuarenta y
	   cuatro píxeles: el dibujo ya lleva un mando redondo arriba a la derecha, y
	   el punto pegado a él se leería como parte del propio dibujo. */
	.iat-tpl--coches-archivo-v1 .iat-movil__ajustes.is-puesto .iat-movil__ico {
		position: relative;
	}

	.iat-tpl--coches-archivo-v1 .iat-movil__ajustes.is-puesto .iat-movil__ico::after {
		content: "";
		position: absolute;
		top: -8px;
		right: -8px;
		width: var(--punto);
		height: var(--punto);
		border-radius: 50%;
		background: var(--punto-color);
	}
}

/* La tabla arrastrándose de lado ---------------------------------------- */

/* En cuanto la ventana baja de lo que mide la tabla hay que arrastrarla, y
   arrastrándola el nombre del coche se va por la izquierda: a partir de la
   tercera columna, una cifra a media pantalla ya no dice de quién es. Así que la
   clase y el nombre se quedan quietos contra el borde y el resto pasa por
   debajo.

   Sólo desde aquí y no siempre: mientras la tabla quepa entera no hay nada que
   arrastrar, y dejar dos columnas con fondo propio sin motivo partiría la fila
   en dos a cambio de nada.

   Van en el morado de la cabecera y no en el negro translúcido de las bandas
   porque por debajo les pasa el resto de la fila: un fondo con transparencia
   dejaría verlo. Al ser el mismo color de la cabecera, las dos quietas se leen
   como parte del marco de la tabla. Los coches de élite ya llevan su degradado,
   que es opaco, así que ahí no hace falta cambiar nada.

   El ancho del nombre es fijo porque de él cuelga dónde empieza la clase, y una
   columna que se ajusta a su contenido no se puede escribir aquí. Además es la
   única que hace falta acotar: el nombre más largo del catálogo decide lo ancha
   que sería, y eso deja la tabla sin sitio para las cifras, que es a lo que se
   viene. El ancho va a la celda y no al enlace, o los distintivos de al lado la
   estirarían igual. */
@media (max-width: 1200px) {
	.iat-tpl--coches-archivo-v1 .iat-listado {
		--col-coche: 11rem;
	}

	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__coche,
	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__clase,
	.iat-tpl--coches-archivo-v1 .iat-listado thead th:first-child,
	.iat-tpl--coches-archivo-v1 .iat-listado thead th:nth-child(2) {
		position: sticky;
		/* El color y no el atajo: el atajo borraría también la imagen de fondo,
		   y la de un coche de élite es su degradado. Al ser opaco, en esas filas
		   el degradado tapa este color y las dos columnas quietas siguen siendo
		   de la misma pieza que el resto de su fila. */
		background-color: var(--barra);
	}

	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__coche,
	.iat-tpl--coches-archivo-v1 .iat-listado thead th:first-child {
		left: 0;
		width: var(--col-coche);
		min-width: var(--col-coche);
		max-width: var(--col-coche);
		/* La tabla va en `nowrap` para que ninguna cifra se parta; el nombre es
		   lo único que sí tiene que partirse. */
		white-space: normal;
	}

	/* Dos líneas siempre que hagan falta, y si con dos no cabe, puntos
	   suspensivos. Cortar en la primera dejaría medio catálogo llamándose igual
	   —«Chevrolet Corvette…», «Chevrolet Camaro…»— cuando la palabra que los
	   distingue cabía en la línea de abajo. El nombre entero está a un toque, en
	   la ficha del coche. */
	.iat-tpl--coches-archivo-v1 .iat-fila__coche a {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-width: 100%;
		line-height: 1.2;
		overflow-wrap: anywhere;
	}

	/* Con la columna acotada, lo que va al lado del nombre ya no cabe al lado: se
	   pone debajo, y la primera pierde su margen para arrancar donde arranca el
	   nombre. Las etiquetas se quedan —ni «élite» ni «EVO» se dicen en ningún
	   otro sitio de la tabla—; el distintivo del overclock se va, porque cuesta
	   una línea entera para repetir lo que ya dicen las cifras, que llevan cada
	   una el suyo allí donde el incremento las cambia. */
	.iat-tpl--coches-archivo-v1 .iat-fila__etiqueta:first-of-type {
		margin-left: 0;
	}

	.iat-tpl--coches-archivo-v1 .iat-fila__oc {
		display: none;
	}

	/* Una sombra al borde por donde pasan las cifras. Sin ella la columna quieta
	   corta los números por la mitad y parece que la tabla está rota; con ella
	   se lee que las cifras pasan por debajo. */
	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__clase,
	.iat-tpl--coches-archivo-v1 .iat-listado thead th:nth-child(2) {
		left: var(--col-coche);
		box-shadow: 6px 0 8px -5px rgba(0, 0, 0, 0.65);
	}

	/* Las de la cabecera están quietas por partida doble —arriba y a la
	   izquierda— así que quedan por encima de las que sólo lo están por un
	   lado. */
	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__clase,
	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__coche {
		z-index: 1;
	}

	.iat-tpl--coches-archivo-v1 .iat-listado thead th:first-child,
	.iat-tpl--coches-archivo-v1 .iat-listado thead th:nth-child(2) {
		z-index: 3;
	}

	/* Pasar por encima aclara la fila entera menos las dos quietas, que llevan
	   su propio fondo opaco: se les da el aclarado a mano para que la fila siga
	   leyéndose como una sola. */
	.iat-tpl--coches-archivo-v1 .iat-listado tbody tr:hover .iat-fila__clase,
	.iat-tpl--coches-archivo-v1 .iat-listado tbody tr:hover .iat-fila__coche {
		background-color: var(--activo);
	}
}

/* En el teléfono la tabla se aprieta: la misma tabla con menos aire y menos
   cuerpo de letra. Cada píxel que se le quita a una columna es un píxel menos
   que arrastrar, y son diez columnas de cifras. */
@media (max-width: 700px) {
	.iat-tpl--coches-archivo-v1 .iat-listado {
		font-size: 0.76rem;
	}

	.iat-tpl--coches-archivo-v1 .iat-listado thead th {
		padding: 0.55rem 0.5rem;
		font-size: 0.62rem;
	}

	.iat-tpl--coches-archivo-v1 .iat-listado tbody td,
	.iat-tpl--coches-archivo-v1 .iat-listado tbody th {
		padding: 0.45rem 0.5rem;
	}

	/* En rem y no en porcentaje: una columna que se ajusta a su contenido no
	   tiene contra qué medir un porcentaje. */
	.iat-tpl--coches-archivo-v1 .iat-listado {
		--col-coche: 6.5rem;
	}

	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__coche {
		font-size: 0.8rem;
	}

	.iat-tpl--coches-archivo-v1 .iat-fila__clase-ico {
		width: 22px;
	}

	.iat-tpl--coches-archivo-v1 .iat-fila__estrellas .iat-estrella {
		width: 13px;
		height: 13px;
	}

	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__leyenda {
		font-size: 10px;
		padding-right: 0.35rem;
	}

	/* La franja del título es lo único que queda arriba en el teléfono, así que
	   el conmutador de vista se queda con ella. La tabla no cabe de ancho, pero
	   para eso se arrastra. */
	.iat-tpl--coches-archivo-v1 .iat-titulo-acciones {
		gap: 0.6rem;
	}

	/* Y la caja se queda por encima de la barra de mandos, que en el teléfono va
	   pegada al borde de abajo. */
	.iat-tpl--coches-archivo-v1 .iat-tabla-caja {
		--hueco-tabla: 7rem;
	}

	/* Aquí sólo se queda quieto el nombre. Dos columnas fijas en una pantalla de
	   este ancho se comen lo que hay que leer, y de las dos la que dice de qué
	   coche es la fila es el nombre: la clase es un dato más del coche, como las
	   estrellas o los planos, y puede viajar con ellos.

	   Se suelta quitándole el desplazamiento, no cambiando su posición: la
	   cabecera tiene que seguir pegada arriba, y eso también es `sticky`. Sin
	   ningún desplazamiento puesto, `sticky` no pega por ningún lado. */
	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__clase,
	.iat-tpl--coches-archivo-v1 .iat-listado thead th:nth-child(2) {
		left: auto;
		box-shadow: none;
	}

	/* Y con ella suelta, la sombra del borde pasa a la que se queda. */
	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__coche,
	.iat-tpl--coches-archivo-v1 .iat-listado thead th:first-child {
		box-shadow: 6px 0 8px -5px rgba(0, 0, 0, 0.65);
	}

	/* Vuelve al fondo de su fila: el morado era para no dejar ver por debajo lo
	   que le pasaba por detrás, y ya no le pasa nada. En los coches de élite no
	   cambia nada, que ahí el fondo es su degradado y ese va aparte. */
	.iat-tpl--coches-archivo-v1 .iat-listado tbody .iat-fila__clase {
		z-index: auto;
		background-color: var(--banda);
	}

	.iat-tpl--coches-archivo-v1 .iat-listado tbody tr:hover .iat-fila__clase {
		background-color: var(--banda-encima);
	}

	/* Y pasa por debajo del nombre, no por encima. */
	.iat-tpl--coches-archivo-v1 .iat-listado thead th:nth-child(2) {
		z-index: 2;
	}
}