/* =========================================================================
   Hormiganzas — herramientas
   El panel de resultado es lo único en losa oscura del sitio: es la
   respuesta, y tiene que leerse de un vistazo.
   ========================================================================= */

.hz-herramienta {
	padding-block: var(--hz-e6) var(--hz-e12);
}

.hz-herramienta__cabecera {
	margin-bottom: var(--hz-e8);
}

.hz-herramienta__titulo {
	margin: 0 0 var(--hz-e4);
	max-width: 20ch;
}

.hz-herramienta__entrada {
	margin: 0;
	max-width: 58ch;
	font-size: var(--hz-t-lg);
	line-height: 1.6;
	color: var(--hz-secundario);
}

.hz-calc {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hz-e6);
	margin-bottom: var(--hz-e8);
}

/* -------------------------------------------------------------------------
   Mandos
   ---------------------------------------------------------------------- */

.hz-calc__mandos {
	display: grid;
	gap: var(--hz-e6);
	padding: var(--hz-e6);
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-bloque);
}

.hz-campo__etiqueta {
	display: block;
	margin-bottom: var(--hz-e3);
	font-size: var(--hz-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hz-jade);
}

.hz-campo__moneda {
	display: flex;
	align-items: baseline;
	gap: var(--hz-e2);
	padding: var(--hz-e3) var(--hz-e4);
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-anuncio);
	background: var(--hz-papel);
}

.hz-campo__moneda:focus-within {
	border-color: var(--hz-jade);
}

.hz-campo__prefijo {
	font-family: var(--hz-fuente-titular);
	font-size: var(--hz-t-lg);
	font-weight: 500;
	color: var(--hz-terciario);
}

.hz-campo__moneda input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0;
	background: transparent;
	font-family: var(--hz-fuente-titular);
	font-size: var(--hz-t-2xl);
	font-weight: 700;
	color: var(--hz-tinta);
	font-variant-numeric: tabular-nums;
}

.hz-campo__moneda input:focus {
	outline: none;
}

.hz-campo__sufijo {
	font-size: var(--hz-t-xs);
	color: var(--hz-terciario);
	white-space: nowrap;
}

.hz-campo__rango {
	width: 100%;
	margin-top: var(--hz-e4);
	accent-color: var(--hz-jade);
}

.hz-campo__limites {
	display: flex;
	justify-content: space-between;
	margin: var(--hz-e2) 0 0;
	font-size: var(--hz-t-xs);
	color: var(--hz-terciario);
	font-variant-numeric: tabular-nums;
}

.hz-campo__nota {
	margin: var(--hz-e3) 0 0;
	font-size: var(--hz-t-xs);
	line-height: 1.55;
	color: var(--hz-secundario);
}

.hz-opciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hz-e2);
}

.hz-opcion input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.hz-opcion span {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-pildora);
	font-size: var(--hz-t-sm);
	font-weight: 500;
	color: var(--hz-secundario);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hz-opcion input:checked + span {
	background: var(--hz-jade);
	border-color: var(--hz-jade);
	color: var(--hz-papel);
}

.hz-opcion input:focus-visible + span {
	outline: 2px solid var(--hz-jade);
	outline-offset: 2px;
}

.hz-campo select {
	width: 100%;
	padding: var(--hz-e3) var(--hz-e4);
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-anuncio);
	background: var(--hz-papel);
	font-family: inherit;
	font-size: var(--hz-t-base);
	color: var(--hz-tinta);
}

/* -------------------------------------------------------------------------
   Resultado
   ---------------------------------------------------------------------- */

.hz-calc__resultado {
	padding: var(--hz-e8) var(--hz-e6);
	border-radius: var(--hz-radio-superficie);
	background: var(--hz-grad-jade);
	color: var(--hz-papel);
}

.hz-calc__rotulo {
	margin: 0 0 var(--hz-e2);
	font-size: var(--hz-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hz-lima);
}

/* La cifra que responde la pregunta. Una por vista. */
.hz-calc__neto {
	margin: 0;
	font-family: var(--hz-fuente-titular);
	font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--hz-lima);
	font-variant-numeric: tabular-nums;
}

.hz-calc__sistema {
	margin: var(--hz-e2) 0 var(--hz-e6);
	font-size: var(--hz-t-sm);
	color: var(--hz-tinte);
}

.hz-desglose {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--hz-e3) var(--hz-e4);
	margin: 0 0 var(--hz-e6);
	padding-top: var(--hz-e6);
	border-top: 1px solid rgba(232, 244, 236, 0.18);
}

.hz-desglose__titulo {
	margin: 0;
	font-size: var(--hz-t-sm);
	font-weight: 600;
	color: var(--hz-papel);
}

.hz-desglose__titulo.es-tuyo {
	color: var(--hz-lima);
}

.hz-desglose__nota {
	display: block;
	margin-top: 2px;
	font-size: var(--hz-t-xs);
	font-weight: 400;
	line-height: 1.45;
	color: rgba(232, 244, 236, 0.72);
	max-width: 42ch;
}

.hz-desglose__monto {
	margin: 0;
	font-family: var(--hz-fuente-titular);
	font-size: var(--hz-t-base);
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.hz-calc__totales {
	display: grid;
	gap: var(--hz-e3);
	padding-top: var(--hz-e6);
	border-top: 1px solid rgba(232, 244, 236, 0.18);
}

.hz-calc__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hz-e4);
	font-size: var(--hz-t-sm);
}

.hz-calc__total strong {
	font-family: var(--hz-fuente-titular);
	font-size: var(--hz-t-lg);
	font-variant-numeric: tabular-nums;
}

.hz-calc__total--tuyo strong {
	color: var(--hz-lima);
}

.hz-calc__total--costo strong {
	color: #F0A9A9;
}

.hz-calc__pie {
	margin: var(--hz-e6) 0 0;
	font-size: var(--hz-t-xs);
	line-height: 1.55;
	color: rgba(232, 244, 236, 0.72);
}

/* -------------------------------------------------------------------------
   Comparativa entre AFP
   ---------------------------------------------------------------------- */

.hz-comparativa {
	padding: var(--hz-e6);
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-bloque);
}

.hz-comparativa__nota {
	margin: 0 0 var(--hz-e4);
	font-size: var(--hz-t-xs);
	color: var(--hz-terciario);
}

.hz-comparativa__tabla {
	overflow-x: auto;
}

.hz-comparativa table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hz-t-sm);
}

.hz-comparativa th,
.hz-comparativa td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--hz-borde);
	white-space: nowrap;
}

.hz-comparativa th {
	font-weight: 600;
	color: var(--hz-jade);
	background: var(--hz-tinte);
}

.hz-comparativa td {
	font-variant-numeric: tabular-nums;
}

.hz-comparativa td:first-child {
	font-weight: 600;
}

.hz-comparativa tbody tr:last-child td {
	border-bottom: 0;
}

.hz-herramienta__texto {
	margin-top: var(--hz-e12);
}

/* -------------------------------------------------------------------------
   Escritorio
   ---------------------------------------------------------------------- */

@media (min-width: 900px) {
	.hz-calc {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: start;
	}

	.hz-comparativa {
		grid-column: 1 / -1;
	}

	.hz-calc__resultado {
		padding: var(--hz-e12) var(--hz-e8);
	}
}