/*
 * Calculadoras de Marketing sin Recursos.
 *
 * Mismo lenguaje visual que el diagnostico, a proposito: misma paleta, bordes
 * de 1 px, radio de 3, los mismos tamanos de letra. Las tipografias se heredan
 * del tema; aqui no se carga ninguna fuente ni se pide nada a un tercero.
 *
 * Pensado para vivir dentro de una columna de 700 px.
 */

.msr-calc {
	--m: #C98A1E;
	--mt: #8A5D08;
	--ol: #5B6B45;
	--ti: #2B2119;
	--ts: #6B5D50;
	--ln: #E3DCD1;
	--cr: #EFE7D8;
	--pa: #F8F5F0;
	--ro: #8C3A2B;
	border: 1px solid var(--ln);
	border-radius: 3px;
	background: var(--pa);
	padding: clamp(18px, 4vw, 30px);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.msr-calc * { box-sizing: border-box; }
.msr-calc [hidden] { display: none !important; }
.msr-calc p { margin: 0; line-height: 1.6; }
.msr-calc h3 { margin: 0; line-height: 1.3; font-size: 19px; }

/* ---------- los campos ---------- */

.msr-calc .msr-calc-form { margin: 0; }

.msr-calc .msr-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 22px;
}

.msr-calc .msr-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.msr-calc .msr-campo label {
	font-size: 15px;
	font-weight: 700;
	color: var(--ti);
	line-height: 1.35;
}

/* La unidad va dentro del recuadro, a la derecha, para que el numero no
   compita con el simbolo. */
.msr-calc .msr-input-unidad {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--ln);
	border-radius: 3px;
	background: #fff;
	overflow: hidden;
}

.msr-calc .msr-input-unidad:focus-within {
	border-color: var(--mt);
	box-shadow: 0 0 0 1px var(--mt);
}

.msr-calc .msr-input-unidad input {
	font: inherit;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	padding: 11px 12px;
	border: 0;
	background: transparent;
	color: var(--ti);
	width: 100%;
	min-width: 0;
	outline: none;
}

/* Fuera las flechitas del campo numerico: invitan a pulsar y aqui se escribe. */
.msr-calc .msr-input-unidad input::-webkit-outer-spin-button,
.msr-calc .msr-input-unidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.msr-calc .msr-input-unidad input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.msr-calc .msr-unidad {
	display: flex;
	align-items: center;
	padding: 0 13px;
	background: var(--cr);
	border-left: 1px solid var(--ln);
	color: var(--ts);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.msr-calc .msr-ayuda { font-size: 13.5px; color: var(--ts); line-height: 1.5; }

/* Un campo que ocupa las dos columnas: para el ultimo de una rejilla impar, o
   para uno cuya ayuda es larga y no debe partirse en una columna estrecha. */
.msr-calc .msr-campo-ancho { grid-column: 1 / -1; }
.msr-calc .msr-campo-ancho .msr-input-unidad { max-width: 50%; }

.msr-calc .msr-opcional { font-weight: 400; color: var(--ts); }

/* ---------- el boton ---------- */

.msr-calc .msr-acciones {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.msr-calc .msr-btn {
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	background: var(--mt);
	color: #fff;
	border: 1px solid var(--mt);
	padding: 12px 26px;
	border-radius: 3px;
	cursor: pointer;
	line-height: 1.3;
}
.msr-calc .msr-btn:hover { background: var(--ti); border-color: var(--ti); }
.msr-calc .msr-btn:focus-visible { outline: 2px solid var(--mt); outline-offset: 3px; }

.msr-calc .msr-aviso-campos { font-size: 14.5px; color: var(--ro); line-height: 1.5; }

/* El campo trampa sale de la pagina sin usar display:none, para que un robot
   que lea el CSS no lo detecte tan facil. */
.msr-calc .msr-trampa {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- estado vacio ---------- */

.msr-calc .msr-vacio {
	border-top: 1px solid var(--ln);
	padding-top: 22px;
	font-size: 15px;
	color: var(--ts);
}

/* ---------- el resultado ---------- */

.msr-calc .msr-resultado {
	border-top: 1px solid var(--ln);
	padding-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.msr-calc .msr-veredicto {
	background: #fff;
	border: 1px solid var(--ln);
	border-left: 4px solid var(--m);
	padding: clamp(16px, 3.5vw, 22px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.msr-calc .msr-veredicto.msr-tono-malo { border-left-color: var(--ro); }
.msr-calc .msr-veredicto.msr-tono-medio { border-left-color: var(--m); }
.msr-calc .msr-veredicto.msr-tono-bueno { border-left-color: var(--ol); }

/* ---------- la tabla de antes y despues ---------- */

.msr-calc .msr-tabla {
	border: 1px solid var(--ln);
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
}

.msr-calc .msr-fila {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	padding: 12px 14px;
	border-top: 1px solid var(--ln);
	align-items: baseline;
	font-size: 15.5px;
	font-variant-numeric: tabular-nums;
}
.msr-calc .msr-fila:first-child { border-top: 0; }

.msr-calc .msr-fila span:not(.msr-concepto) { text-align: right; }

.msr-calc .msr-cabecera {
	background: var(--cr);
	font-size: 13px;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ts);
}

.msr-calc .msr-concepto { color: var(--ts); text-align: left; }

/* Variante de dos columnas: concepto e importe. Para un desglose, donde no hay
   un antes y un despues que comparar sino un recorrido del dinero. */
.msr-calc .msr-tabla-2 .msr-fila { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.msr-calc .msr-tabla-2 .msr-resta span:not(.msr-concepto) { color: var(--ro); }
.msr-calc .msr-tabla-2 .msr-suma { border-top-width: 2px; }

/* La fila de las unidades es la que responde a la pregunta, y se ve. */
.msr-calc .msr-destacada {
	background: var(--cr);
	font-weight: 700;
	font-size: 17px;
}
.msr-calc .msr-destacada .msr-concepto { color: var(--ti); }

.msr-calc .msr-pie-tabla { font-size: 13.5px; color: var(--ts); margin-top: -12px; }

/* ---------- las consecuencias ---------- */

.msr-calc .msr-consecuencias { display: flex; flex-direction: column; gap: 18px; }

.msr-calc .msr-consecuencia {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-left: 14px;
	border-left: 2px solid var(--ln);
}
.msr-calc .msr-consecuencia h3 { font-size: 16px; }
.msr-calc .msr-consecuencia p { font-size: 15.5px; color: var(--ts); }

.msr-calc .msr-nota {
	font-size: 13.5px;
	color: var(--ts);
	border-top: 1px solid var(--ln);
	padding-top: 16px;
}

/* ---------- estrecho ---------- */

@media (max-width: 560px) {
	.msr-calc .msr-campos { grid-template-columns: minmax(0, 1fr); }
	.msr-calc .msr-campo-ancho .msr-input-unidad { max-width: none; }
	.msr-calc .msr-fila {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		row-gap: 2px;
	}
	.msr-calc .msr-fila .msr-concepto { grid-column: 1 / -1; font-size: 14px; }
	.msr-calc .msr-cabecera .msr-concepto { display: none; }

	/* El desglose de dos columnas cabe en el movil tal cual: concepto a la
	   izquierda, importe a la derecha. No hay que partirlo en dos lineas. */
	.msr-calc .msr-tabla-2 .msr-fila { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); row-gap: 0; }
	.msr-calc .msr-tabla-2 .msr-fila .msr-concepto { grid-column: auto; font-size: 14.5px; }

	/* El dato de la fila destacada no se parte. «dia 15 de 26» con el 26 solo
	   en la linea de abajo se lee fatal, y es justo el numero que la gente
	   viene a ver. El concepto de al lado si puede partirse. */
	.msr-calc .msr-tabla-2 .msr-destacada span:not(.msr-concepto) { white-space: nowrap; }
}