/**
 * Calculadora de rango: el bloque, esté donde esté.
 *
 * Se monta en su propia página y al final de la ficha de coche, así que la
 * paleta la trae él y no la hereda: es lo que hace que se vea igual en los dos
 * sitios sin depender de qué hoja se haya cargado antes.
 *
 * Los cortes no miran el ancho de la ventana sino el del propio bloque, porque
 * en la ficha vive dentro de un contenedor que el tema puede estrechar: una
 * media query se equivocaría justo ahí.
 */

.iat-calc {
	--calc-panel: #8c15a9;
	--calc-panel-linea: #b546cc;
	--calc-hueco: #3d0a4e;
	--calc-hueco-linea: #6e1785;
	--calc-campo: #33073f;
	--calc-campo-linea: #6b1583;
	--calc-tinta: #fff;
	--calc-tinta-2: #dba6ec;
	--calc-tinta-3: #a868be;
	--calc-oro: #ffc400;
	/* Alto común del selector de coche y del rango deseado: son los dos campos
	   de la cabecera y se leen en la misma línea, así que miden lo mismo pese a
	   llevar cuerpos distintos. */
	--calc-campo-alto: 3.5rem;
	--calc-oc: #fe7112;
	/* El objetivo dentro de la frase de «ya llegas». */
	--calc-objetivo: #ffc300;
	--calc-ok: #4fe3a5;
	--calc-aviso: #ffb347;
	--calc-error: #ff7a6b;

	container-type: inline-size;
	container-name: iatcalc;
	color: var(--calc-tinta);
	font-family: inherit;
}

.iat-calc *,
.iat-calc *::before,
.iat-calc *::after {
	box-sizing: border-box;
}

.iat-calc .iat-calc__datos {
	display: none;
}

/* ------------------------------------------------------------------ rótulos */

.iat-calc .iat-calc__rotulo {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--calc-tinta);
}

.iat-calc .iat-calc__rotulo--suave {
	color: var(--calc-tinta-2);
}

/* ---------------------------------------------------------------- cabecera */

/* Alineadas por arriba y no por abajo: las dos columnas llevan el mismo rótulo
   encima, así que empezar juntas es lo que hace que los dos campos caigan en la
   misma línea pase lo que pase con lo que va debajo —el estado de los datos
   puede ocupar dos líneas, y el rango máximo no—. */
.iat-calc .iat-calc__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: 1.25rem 2rem;
	align-items: start;
	margin-bottom: 1.5rem;
}

@container iatcalc (max-width: 620px) {
	.iat-calc .iat-calc__cabecera {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* En la ficha el bloque llega sin rótulo ni desplegable, y la columna de la
   izquierda se quedaría vacía. */
.iat-calc.iat-calc--sin-marca .iat-calc__cabecera {
	grid-template-columns: minmax(0, 20rem);
}

.iat-calc .iat-calc__antetitulo {
	margin: 0 0 0.15rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--calc-tinta-2);
}

.iat-calc .iat-calc__titulo {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 5cqw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------- selector */

.iat-calc .iat-calc__selector {
	position: relative;
}

.iat-calc .iat-calc__coche {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.875rem;
	min-height: var(--calc-campo-alto);
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--calc-campo-linea);
	border-radius: 0.875rem;
	background: var(--calc-campo);
	color: var(--calc-tinta);
	-webkit-text-fill-color: var(--calc-tinta);
	font: inherit;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.iat-calc .iat-calc__coche:hover {
	border-color: var(--calc-panel-linea);
}

.iat-calc .iat-calc__chevron {
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2.4px solid var(--calc-tinta-2);
	border-bottom: 2.4px solid var(--calc-tinta-2);
	transform: rotate(45deg) translate(-3px, -3px);
}

.iat-calc .iat-calc__lista {
	position: absolute;
	z-index: 40;
	top: calc(100% + 0.625rem);
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: min(28rem, 92cqw);
	padding: 0.625rem;
	border: 1px solid var(--calc-panel-linea);
	border-radius: 0.875rem;
	background: #2a0736;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
}

.iat-calc .iat-calc__lista[hidden] {
	display: none;
}

/* El color va también en `-webkit-text-fill-color`: en un `input[type=search]`
   los navegadores de WebKit pintan el texto con ése y no con `color`, así que
   sin él la caja se quedaba con la tinta oscura del tema sobre fondo morado. */
.iat-calc .iat-calc__buscar {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--calc-campo-linea);
	border-radius: 0.5rem;
	background: var(--calc-campo);
	color: var(--calc-tinta);
	-webkit-text-fill-color: var(--calc-tinta);
	font: inherit;
	font-size: 0.95rem;
}

.iat-calc .iat-calc__buscar::placeholder {
	color: var(--calc-tinta-3);
	-webkit-text-fill-color: var(--calc-tinta-3);
	opacity: 1;
}

.iat-calc .iat-calc__resultados {
	max-height: 17.5rem;
	overflow-y: auto;
	border-radius: 0.5rem;
}

.iat-calc .iat-calc__opcion {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0.7rem;
	border: 0;
	border-radius: 0.5rem;
	background: none;
	color: var(--calc-tinta);
	font: inherit;
	font-size: 0.95rem;
	text-align: left;
	cursor: pointer;
}

.iat-calc .iat-calc__opcion:hover,
.iat-calc .iat-calc__opcion.is-actual {
	background: var(--calc-panel);
}

/* La insignia de clase abre la fila, como en el comparador; el nombre se come el
   hueco que quede y las estrellas cierran por la derecha. */
.iat-calc .iat-calc__opcion-nombre {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.iat-calc .iat-calc__opcion small {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.4rem;
	color: var(--calc-tinta-2);
	font-size: 0.75rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.iat-calc .iat-calc__clase {
	display: block;
	flex: none;
	width: 1.5rem;
	height: auto;
	border-radius: 0.15rem;
}

.iat-calc .iat-calc__clase-txt {
	flex: none;
	font-weight: 700;
}

.iat-calc .iat-calc__rotulo--selector {
	display: block;
	margin-bottom: 0.55rem;
}

/* Con un coche solo el desplegable está para que el bloque se lea igual que en
   su página, no para tocarlo: se apaga del todo y deja de recibir el ratón y el
   tabulador. El estado de los datos, en cambio, se queda legible: eso sí es
   información de este coche. */
.iat-calc--bloqueada .iat-calc__rotulo--selector,
.iat-calc--bloqueada .iat-calc__selector {
	opacity: 0.2;
}

.iat-calc--bloqueada .iat-calc__selector {
	pointer-events: none;
}

.iat-calc--bloqueada .iat-calc__coche {
	cursor: default;
}

.iat-calc .iat-calc__cobertura {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.6rem 0.125rem 0;
	color: var(--calc-tinta-2);
	font-size: 0.8rem;
}

.iat-calc .iat-calc__cobertura::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
}

.iat-calc .iat-calc__cobertura.is-ok {
	color: var(--calc-ok);
}

.iat-calc .iat-calc__cobertura.is-aprox {
	color: var(--calc-aviso);
}

.iat-calc .iat-calc__cobertura.is-mal {
	color: var(--calc-error);
}

.iat-calc .iat-calc__vacio {
	margin: 0;
	padding: 0.75rem;
	color: var(--calc-tinta-3);
	font-size: 0.9rem;
}

/* --------------------------------------------------------------- objetivo */

.iat-calc .iat-calc__objetivo .iat-calc__rotulo {
	display: block;
	margin-bottom: 0.55rem;
}

/* Mismo trato que el buscador: en un `input[type=number]` el tema puede pintar
   el texto con su propia tinta, y sobre morado no se lee. */
.iat-calc .iat-calc__objetivo input {
	width: 100%;
	min-height: var(--calc-campo-alto);
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--calc-campo-linea);
	border-radius: 0.875rem;
	background: var(--calc-campo);
	color: var(--calc-tinta);
	-webkit-text-fill-color: var(--calc-tinta);
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.iat-calc .iat-calc__objetivo input::placeholder {
	color: var(--calc-tinta-3);
	-webkit-text-fill-color: var(--calc-tinta-3);
	opacity: 1;
}

.iat-calc .iat-calc__maximo {
	margin: 0.55rem 0.125rem 0;
	color: var(--calc-tinta-2);
	font-size: 0.8rem;
}

.iat-calc .iat-calc__maximo b {
	color: var(--calc-tinta);
}

/* El techo con el overclock puesto, al lado del de siempre. */
.iat-calc .iat-calc__maximo-oc {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--calc-oc);
}

.iat-calc .iat-calc__maximo-oc b {
	color: inherit;
}


.iat-calc :is(input, button):focus-visible {
	outline: 2px solid var(--calc-oro);
	outline-offset: 2px;
}

/* ------------------------------------------------------ rejilla compartida */

/* Las cinco columnas son las mismas en la tarjeta de arriba y en cada opción:
   es lo que deja leer en vertical qué falta en cada diferenciador. */

.iat-calc .iat-calc__rejilla {
	display: grid;
	gap: 0.7rem;
	grid-template-columns: repeat(4, minmax(0, 1fr)) 15.5rem;
}

@container iatcalc (max-width: 860px) {
	.iat-calc .iat-calc__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

.iat-calc .iat-calc__rejilla > :last-child {
		grid-column: 1 / -1;
	}
}

@container iatcalc (max-width: 430px) {
	.iat-calc .iat-calc__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------- panel «ahora» */

.iat-calc .iat-calc__panel {
	padding: 1.125rem;
	border: 1px solid var(--calc-panel-linea);
	border-radius: 1.125rem;
	background: var(--calc-panel);
}

.iat-calc .iat-calc__panel-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.875rem;
}

/* ------------------------------------------------------------- overclock */

/* Va pegado a las estrellas, a su derecha: son las dos cosas del coche que se
   encienden y se apagan, y se leen juntas. Apagado queda en gris; encendido,
   con el naranja del overclock de la ficha. */
.iat-calc .iat-calc__oc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-left: 0.4rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.24);
	color: var(--calc-tinta-3);
	cursor: pointer;
}

.iat-calc .iat-calc__oc:hover {
	color: var(--calc-tinta-2);
}

/* Encendido, el dibujo se pinta oscuro sobre el naranja: el icono viene en ese
   mismo naranja de fábrica, y dejarlo habría sido naranja sobre naranja. */
.iat-calc .iat-calc__oc.is-on {
	border-color: var(--calc-oc);
	background: var(--calc-oc);
	color: #2a0736;
}

.iat-calc .iat-calc__oc svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

.iat-calc .iat-calc__nota-oc {
	margin: 0.75rem 0.125rem 0;
	color: var(--calc-tinta-2);
	font-size: 0.8rem;
}

.iat-calc .iat-calc__estrellas {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.iat-calc .iat-calc__estrellas-set {
	display: flex;
	gap: 0.2rem;
}

.iat-calc .iat-calc__estrella {
	padding: 0;
	border: 0;
	background: none;
	color: var(--calc-hueco);
	line-height: 0;
	cursor: default;
}

.iat-calc .iat-calc__estrella.is-on {
	color: var(--calc-oro);
}

.iat-calc .iat-calc__estrella.is-elegible {
	cursor: pointer;
}

.iat-calc .iat-calc__estrella svg {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
}

/* ------------------------------------------------------------------ celdas */

.iat-calc .iat-calc__celda {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 0.8rem 0.75rem;
	border: 1px solid var(--calc-hueco-linea);
	border-radius: 0.75rem;
	background: var(--calc-hueco);
}

.iat-calc .iat-calc__celda-nombre {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--calc-tinta);
}

.iat-calc .iat-calc__celda-nombre svg {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
}

.iat-calc .iat-calc__celda-nombre span {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.iat-calc .iat-calc__paso {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.iat-calc .iat-calc__paso button {
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border: 0;
	border-radius: 0.45rem;
	background: none;
	color: var(--calc-tinta-2);
	font-family: inherit;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}

.iat-calc .iat-calc__paso button:hover:not(:disabled) {
	color: var(--calc-oro);
}

.iat-calc .iat-calc__paso button:disabled {
	opacity: 0.28;
	cursor: not-allowed;
}

.iat-calc .iat-calc__paso-n {
	min-width: 1.6rem;
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.iat-calc .iat-calc__celda-pie {
	width: 100%;
	padding-top: 0.55rem;
	border-top: 1px solid var(--calc-hueco-linea);
	color: var(--calc-tinta-2);
	font-size: 0.78rem;
	text-align: center;
}

.iat-calc .iat-calc__celda-pie b {
	color: var(--calc-tinta);
}

.iat-calc .iat-calc__estimado {
	display: block;
	margin-top: 0.1rem;
	color: var(--calc-aviso);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.iat-calc .iat-calc__celda--rango {
	justify-content: center;
	gap: 0.1rem;
}

.iat-calc .iat-calc__celda-k {
	color: var(--calc-tinta-2);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.iat-calc .iat-calc__celda-v {
	font-size: 2.05rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.iat-calc .iat-calc__celda-n {
	font-size: 1.45rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--calc-oro);
}

.iat-calc .iat-calc__celda-n.is-cero {
	color: var(--calc-tinta-3);
}

/* ------------------------------------------------------------------ avisos */

.iat-calc .iat-calc__aviso {
	display: flex;
	gap: 0.5rem;
	margin: 0.75rem 0.125rem 0;
	color: var(--calc-tinta-2);
	font-size: 0.82rem;
}

.iat-calc .iat-calc__aviso::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.4rem;
	border-radius: 50%;
	background: var(--calc-aviso);
}

.iat-calc .iat-calc__aviso--conflicto::before {
	background: var(--calc-error);
}

/* ---------------------------------------------------------------- opciones */

.iat-calc .iat-calc__opthead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.875rem;
	margin: 1.875rem 0.125rem 0.75rem;
}

.iat-calc .iat-calc__opciones {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.iat-calc .iat-calc__fila {
	padding: 0.7rem;
	border: 1px solid var(--calc-panel-linea);
	border-radius: 1.125rem;
	background: var(--calc-panel);
}

.iat-calc .iat-calc__fila.is-mejor {
	border-color: var(--calc-oro);
}

.iat-calc .iat-calc__inversion {
	margin-top: 0.2rem;
	color: var(--calc-tinta-2);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.iat-calc .iat-calc__sube {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.3rem;
	color: var(--calc-oro);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.iat-calc .iat-calc__sube svg {
	width: 0.9rem;
	height: 0.9rem;
}

/* Ya se llega: no es un aviso de que falte nada, así que la fila va con el
   verde de los datos buenos y no con el naranja. */
.iat-calc .iat-calc__fila--llegas {
	border-color: var(--calc-ok);
}

/* La frase ocupa el sitio de los cuatro diferenciadores y el rango final cae en
   la quinta columna, alineado con el de las opciones. */
.iat-calc .iat-calc__llegas {
	grid-column: span 4;
	margin: 0;
	align-self: center;
	color: var(--calc-tinta);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
}

.iat-calc .iat-calc__objetivo {
	color: var(--calc-objetivo);
	font-weight: 700;
}

@container iatcalc (max-width: 860px) {
	.iat-calc .iat-calc__llegas {
		grid-column: 1 / -1;
	}
}

/* Una cifra que sube con el overclock lleva su naranja y su distintivo: avisan
   de que ese rango depende de un alquiler que caduca. El icono hereda el color
   de la cifra, así que los dos van siempre a juego. */
.iat-calc .iat-calc__celda-v.is-oc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	color: var(--calc-oc);
}

.iat-calc .iat-calc__oc-ico {
	display: inline-flex;
	flex: none;
	width: 0.62em;
	height: 0.62em;
}

.iat-calc .iat-calc__oc-ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

.iat-calc .iat-calc__nada {
	padding: 2.125rem 1.25rem;
	border: 1px solid var(--calc-panel-linea);
	border-radius: 1.125rem;
	background: var(--calc-panel);
	text-align: center;
}

.iat-calc .iat-calc__nada b {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 1.2rem;
}

.iat-calc .iat-calc__nada span {
	color: var(--calc-tinta-2);
	font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
	.iat-calc * {
		transition: none !important;
	}
}