/**
 * /calculadora/ — recorrido unificado.
 *
 * Solo lo propio de esta página. Los campos, la escala térmica y las cajas de
 * resultado vienen de calculadora.css, que comparten las cuatro calculadoras
 * del sitio; aquí no se redefine nada de eso.
 *
 * Se carga únicamente en esta página (ver functions.php).
 */

/* ── Portada de la herramienta ─────────────────────────────────────────── */

.ce-calc__portada {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.ce-calc__portada h1 {
	margin: 0.4rem 0 0.9rem;
	font-family: var(--ce-serif);
	font-size: clamp(1.9rem, 5vw, 3rem);
	line-height: 1.1;
}

.ce-calc__entrada {
	max-width: 60ch;
	color: var(--ce-texto-suave);
	font-size: 1.05rem;
	line-height: 1.65;
}

/* ── El flujo de pasos ─────────────────────────────────────────────────── */

.ce-calc__flujo {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.ce-calc__paso {
	background: var(--ce-superficie);
	border: 1px solid var(--ce-borde);
	border-radius: var(--ce-radio);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.ce-calc__paso > h2 {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.1rem;
	font-family: var(--ce-serif);
	font-size: clamp(1.25rem, 3vw, 1.6rem);
}

/* El número del paso: la pista de que esto se recorre en orden. */
.ce-calc__numero {
	display: inline-grid;
	place-items: center;
	inline-size: 1.9em;
	block-size: 1.9em;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ce-termico);
	color: var(--ce-fondo);
	font-family: var(--ce-mono);
	font-size: 0.62em;
	font-weight: 600;
}

/*
 * Columnas más anchas que las de las calculadoras insertadas en artículos.
 * Con el mínimo compartido de 210 px entraban cinco campos por fila y la opción
 * más larga —«Radiadores de baja temperatura»— se cortaba dentro del select.
 * Los desplegables no admiten puntos suspensivos, así que el ancho es la única
 * salida. `align-items: end` mantiene alineados los campos aunque una etiqueta
 * ocupe dos líneas.
 */
.ce-calc__paso .ce-campos {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	align-items: end;
}

.ce-calc__ayuda,
.ce-calc__zona {
	margin: 0.9rem 0 0;
	color: var(--ce-texto-suave);
	font-size: 0.92rem;
	line-height: 1.6;
}

.ce-calc__zona {
	padding: 0.6rem 0.85rem;
	border-inline-start: 3px solid var(--ce-termico);
	background: color-mix(in srgb, var(--ce-termico) 8%, transparent);
	border-radius: 0 var(--ce-radio) var(--ce-radio) 0;
}

.ce-calc__zona strong {
	font-family: var(--ce-mono);
	color: var(--ce-texto);
}

.ce-calc__zona em {
	display: block;
	margin-top: 0.35rem;
	font-style: normal;
	font-size: 0.88rem;
}

/* Dentro de un paso el resultado va separado de los campos, no flotando. */
.ce-resultado--principal {
	margin-top: 1.4rem;
}

/* ── El veredicto ──────────────────────────────────────────────────────── */

/*
 * Deliberadamente más pesado que cualquier caja de resultado: es la conclusión,
 * no un dato más. El color lo pone el tipo de veredicto, y los tres existen
 * porque este bloque puede decir «no lo hagas», que es la razón de la página.
 */
.ce-calc__veredicto {
	border: 1px solid var(--ce-borde-fuerte);
	border-inline-start-width: 5px;
	border-radius: var(--ce-radio);
	padding: clamp(1.1rem, 3vw, 1.75rem);
	background: var(--ce-superficie);
}

.ce-calc__veredicto[hidden] {
	display: none;
}

.ce-calc__veredicto p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.7;
}

.ce-calc__veredicto .ce-etiqueta {
	margin-bottom: 0.5rem;
}

.ce-calc__veredicto--aviso {
	border-inline-start-color: var(--ce-calor);
}

.ce-calc__veredicto--matiz {
	border-inline-start-color: var(--ce-e3);
}

.ce-calc__veredicto--favorable {
	border-inline-start-color: var(--ce-frio);
}

/* ── Compartir ─────────────────────────────────────────────────────────── */

.ce-calc__compartir {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	margin: 0;
}

.ce-boton-secundario {
	border: 1px solid var(--ce-borde-fuerte);
	border-radius: var(--ce-radio);
	padding: 0.6rem 1.1rem;
	background: transparent;
	color: var(--ce-texto);
	font: inherit;
	font-size: 0.92rem;
	cursor: pointer;
	transition: var(--ce-transicion);
}

.ce-boton-secundario:hover,
.ce-boton-secundario:focus-visible {
	border-color: var(--ce-termico);
	color: var(--ce-termico);
}

.ce-calc__copiado {
	color: var(--ce-frio);
	font-size: 0.9rem;
}

.ce-calc__copiado[hidden] {
	display: none;
}

/* ── Método y referencias ──────────────────────────────────────────────── */

/*
 * Esta sección es tan importante como la calculadora. Declarar qué sale de la
 * norma, qué está publicado y qué hemos elegido nosotros es lo que separa esta
 * herramienta de las quince que devuelven una cifra sin explicar de dónde sale.
 * Por eso se lee cómoda y no va escondida en un desplegable.
 */
.ce-calc__metodo {
	border-top: 1px solid var(--ce-borde);
	padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.ce-calc__metodo h2 {
	margin: 0 0 1rem;
	font-family: var(--ce-serif);
	font-size: clamp(1.4rem, 3.5vw, 1.9rem);
}

.ce-calc__metodo h3 {
	margin: 2rem 0 0.6rem;
	font-size: 1.02rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ce-termico);
}

.ce-calc__metodo p {
	max-width: 68ch;
	margin: 0 0 0.85rem;
	color: var(--ce-texto-suave);
	line-height: 1.75;
}

.ce-calc__metodo strong {
	color: var(--ce-texto);
}

.ce-calc__nota-fija {
	margin-top: 1.5rem !important;
	padding: 0.9rem 1.1rem;
	border: 1px dashed var(--ce-borde-fuerte);
	border-radius: var(--ce-radio);
	font-size: 0.93rem;
}

.ce-calc__lecturas {
	border-top: 1px solid var(--ce-borde);
	padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(2.5rem, 6vw, 4rem);
}

.ce-calc__lecturas ul {
	margin: 0.8rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

.ce-calc__lecturas a {
	font-family: var(--ce-serif);
	font-size: 1.05rem;
}

/* ── Móvil ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.ce-calc__paso {
		/* A sangre: en pantallas estrechas el margen lateral de la tarjeta se
		   come el espacio que necesitan los campos. */
		margin-inline: calc(var(--ce-e3) * -1);
		border-radius: 0;
		border-inline: 0;
	}

	.ce-calc__compartir {
		margin-inline: 0;
	}
}