/**
 * Calculadoras — estilos compartidos.
 *
 * Vivían en home.css, que solo se encola en la portada. Al sacarlos aquí, el
 * shortcode [ce_calculadora] puede insertar una calculadora en cualquier
 * artículo sin arrastrar el resto del CSS de la portada.
 *
 * Lo que NO está aquí y sigue en home.css es `.ce-calculadora-zona`, que es
 * la colocación concreta de la portada: solapa el hero con un margen negativo.
 */

.ce-calculadora {
	background: var(--ce-superficie);
	border: 1px solid var(--ce-borde);
	border-radius: var(--ce-radio);
	padding: clamp(var(--ce-e3), 4vw, var(--ce-e5));
	max-width: 760px;
	box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}

.ce-calculadora h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	margin: var(--ce-e1) 0 var(--ce-e4);
	line-height: 1.1;
}

.ce-campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--ce-e3);
}

.ce-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ce-campo label {
	font-family: var(--ce-mono);
	font-size: 0.68rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ce-texto-suave);
}

.ce-campo input,
.ce-campo select {
	background: var(--ce-fondo);
	border: 1px solid var(--ce-borde-fuerte);
	border-radius: var(--ce-radio);
	color: var(--ce-texto);
	font-family: var(--ce-sans);
	font-size: 1rem;
	padding: 12px var(--ce-e2);
	min-height: 44px;
	width: 100%;
	transition: border-color var(--ce-transicion);
}

.ce-campo input:focus,
.ce-campo select:focus {
	border-color: var(--ce-calor);
	outline: none;
}

.ce-resultado {
	margin-top: var(--ce-e4);
	padding-top: var(--ce-e4);
	border-top: 1px solid var(--ce-borde);
}

/* La escala térmica donde se pinta el resultado: es el remate visual. */
.ce-escala {
	position: relative;
	height: 8px;
	border-radius: 99px;
	background: var(--ce-termico);
	margin-bottom: var(--ce-e3);
	opacity: 0.35;
}

.ce-escala__marca {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--ce-fondo);
	transform: translate(-50%, -50%);
	transition: left 420ms cubic-bezier(0.2, 0, 0, 1);
	left: 30%;
}

.ce-resultado__valor {
	font-family: var(--ce-serif);
	font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
}

.ce-resultado__valor span {
	font-size: 0.4em;
	color: var(--ce-texto-suave);
	font-family: var(--ce-mono);
	letter-spacing: 0.06em;
	margin-left: var(--ce-e1);
}

.ce-resultado__nota {
	color: var(--ce-texto-suave);
	font-size: 0.92rem;
	max-width: 52ch;
	margin: var(--ce-e2) 0 0;
}

/* Línea de detalle bajo la cifra grande: consumo anual y coste anual.
   Solo la usa la calculadora de consumo; la de potencia no la imprime. */
.ce-resultado__detalle {
	color: var(--ce-texto);
	font-size: 1rem;
	margin: var(--ce-e2) 0 0;
}

.ce-resultado__detalle strong {
	color: var(--ce-frio);
	font-weight: 600;
}

/* Insertada dentro de un artículo, la calculadora tiene que respirar y romper
   un poco el ancho de lectura: es un bloque, no un párrafo más. */
.entry-content .ce-calculadora {
	margin-block: var(--ce-e5);
	max-width: none;
}