/* Calculadoras Empresas — Inversiones Andinas
 *
 * Todo cuelga de .ia-calc y usa el prefijo iac-, para que el CSS del tema no se
 * meta y para no pisarle estilos a nadie. Los colores salen del manual de marca
 * 2023 y están como variables, así que se ajustan desde un solo lugar.
 *
 * Las tipografías se heredan del sitio a propósito: si el tema ya carga Poppins
 * y Roboto, la calculadora se ve como el resto de la página sin pedir otra
 * fuente. Si no, cae en la del tema y sigue siendo coherente.
 */

.ia-calc {
	--iac-navy: #05297A;
	--iac-blue: #2465F6;
	--iac-green: #128766;
	--iac-jade: #18B488;
	--iac-mint: #21E2AB;
	--iac-warn: #E9CB30;

	--iac-bg: #fff;
	--iac-bg2: #f7f9fc;
	--iac-borde: #e6e9f2;
	--iac-campo: #fff;
	--iac-campo-borde: #d9dfec;
	--iac-txt: #1a2233;
	--iac-txt2: #5a6478;
	--iac-titulo: var(--iac-navy);
	--iac-dato: var(--iac-navy);
	--iac-ok: var(--iac-green);

	color: var(--iac-txt);
	line-height: 1.6;
	max-width: 920px;
	margin: 0 auto;
}

.ia-calc--oscuro {
	--iac-bg: rgba(255, 255, 255, .06);
	--iac-bg2: rgba(255, 255, 255, .04);
	--iac-borde: rgba(255, 255, 255, .16);
	--iac-campo: rgba(255, 255, 255, .1);
	--iac-campo-borde: rgba(255, 255, 255, .22);
	--iac-txt: #fff;
	--iac-txt2: rgba(255, 255, 255, .72);
	--iac-titulo: #fff;
	--iac-dato: var(--iac-mint);
	--iac-ok: var(--iac-mint);
}

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

/* ── Pestañas ── */
.ia-calc .iac-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.ia-calc .iac-tab {
	background: var(--iac-bg2);
	border: 1px solid var(--iac-borde);
	color: var(--iac-txt2);
	font: inherit;
	font-weight: 600;
	font-size: .9rem;
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: .18s;
	line-height: 1.2;
}
.ia-calc .iac-tab:hover { border-color: var(--iac-blue); color: var(--iac-blue); }
.ia-calc .iac-tab.is-on { background: var(--iac-blue); border-color: var(--iac-blue); color: #fff; }
.ia-calc .iac-tab:focus-visible { outline: 2px solid var(--iac-blue); outline-offset: 2px; }

/* ── Tarjeta ── */
.ia-calc .iac-calc {
	display: none;
	background: var(--iac-bg);
	border: 1px solid var(--iac-borde);
	border-radius: 20px;
	overflow: hidden;
}
.ia-calc .iac-calc.is-on { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
	.ia-calc .iac-calc.is-on { grid-template-columns: 1fr; }
}

.ia-calc .iac-panel { padding: 28px; }
.ia-calc .iac-out {
	background: var(--iac-bg2);
	border-left: 1px solid var(--iac-borde);
	display: flex;
	flex-direction: column;
}
@media (max-width: 760px) {
	.ia-calc .iac-out { border-left: 0; border-top: 1px solid var(--iac-borde); }
}

.ia-calc .iac-h {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--iac-titulo);
	margin: 0 0 4px;
	line-height: 1.25;
}
.ia-calc .iac-sub { font-size: .88rem; color: var(--iac-txt2); margin: 0 0 22px; }

/* ── Campos ── */
.ia-calc .iac-f { margin-bottom: 16px; }
.ia-calc .iac-f label,
.ia-calc .iac-lbl {
	display: block;
	font-size: .82rem;
	color: var(--iac-txt2);
	margin-bottom: 6px;
	font-weight: 500;
}
.ia-calc .iac-f input[type="number"] {
	width: 100%;
	background: var(--iac-campo);
	border: 1px solid var(--iac-campo-borde);
	border-radius: 12px;
	padding: 12px 14px;
	color: var(--iac-txt);
	font: inherit;
	font-weight: 600;
	font-size: 1.05rem;
	outline: none;
	margin: 0;
	box-shadow: none;
}
.ia-calc .iac-f input[type="number"]:focus { border-color: var(--iac-blue); }
.ia-calc .iac-hint {
	display: block;
	font-size: .75rem;
	color: var(--iac-txt2);
	opacity: .85;
	margin-top: 5px;
}
.ia-calc .iac-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
	.ia-calc .iac-duo { grid-template-columns: 1fr; }
}

.ia-calc .iac-segs { display: flex; gap: 6px; flex-wrap: wrap; }
.ia-calc .iac-segs button {
	background: var(--iac-bg2);
	border: 1px solid var(--iac-borde);
	color: var(--iac-txt2);
	font: inherit;
	font-weight: 600;
	font-size: .8rem;
	padding: 8px 13px;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.2;
}
.ia-calc .iac-segs button.is-on { background: var(--iac-jade); border-color: var(--iac-jade); color: #fff; }

/* ── Resultado ── */
.ia-calc .iac-reslbl {
	display: block;
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--iac-txt2);
}
.ia-calc .iac-resval {
	font-weight: 800;
	font-size: 2rem;
	color: var(--iac-dato);
	line-height: 1.15;
	margin: 4px 0 2px;
	font-variant-numeric: tabular-nums;
}
.ia-calc .iac-ressub { font-size: .88rem; color: var(--iac-txt2); margin: 0; }
.ia-calc .iac-lin { border: 0; border-top: 1px solid var(--iac-borde); margin: 20px 0; }
.ia-calc .iac-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: .92rem;
	color: var(--iac-txt2);
	margin-bottom: 8px;
}
.ia-calc .iac-row--sep { margin-top: 16px; }
.ia-calc .iac-row b { font-weight: 700; color: var(--iac-txt); font-variant-numeric: tabular-nums; }

.ia-calc .iac-delta {
	background: rgba(18, 135, 102, .1);
	border: 1px solid rgba(18, 135, 102, .3);
	border-radius: 12px;
	padding: 12px 15px;
	margin-top: 12px;
	font-size: .9rem;
	color: var(--iac-txt);
}
.ia-calc--oscuro .iac-delta { background: rgba(33, 226, 171, .12); border-color: rgba(33, 226, 171, .35); }
.ia-calc .iac-delta b {
	display: block;
	color: var(--iac-ok);
	font-size: 1.15rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.ia-calc .iac-delta.is-neg { background: rgba(233, 203, 48, .12); border-color: rgba(233, 203, 48, .4); }
.ia-calc .iac-delta.is-neg b { color: #9A7B00; }
.ia-calc--oscuro .iac-delta.is-neg b { color: var(--iac-warn); }

.ia-calc .iac-nota {
	font-size: .76rem;
	color: var(--iac-txt2);
	opacity: .8;
	margin: auto 0 0;
	padding-top: 18px;
}
.ia-calc .iac-fuente { font-size: .78rem; color: var(--iac-txt2); margin: 14px 0 0; text-align: center; }
.ia-calc .iac-fuente b { color: var(--iac-txt); font-weight: 600; }
.ia-calc .iac-legal {
	font-size: .72rem;
	color: var(--iac-txt2);
	opacity: .75;
	margin: 10px auto 0;
	text-align: center;
	max-width: 70ch;
}