/* ==========================================================================
   Simulador de Crédito de Vivienda — [simulador_vivienda]
   Diseño: Figma High-fi Fase 2 (nodos 2973-18128 / 18252 / 18445)
   ========================================================================== */

.csv-wrap {
	--csv-primary: #005066;
	--csv-primary-800: #002c38;
	--csv-accent: #3cb4e5;
	--csv-bg-soft: #f7f7f7;
	--csv-neutral: #9d9d9d;
	--csv-muted: #555;
	--csv-track: #e5e7eb;
	--csv-border: rgba(0, 0, 0, 0.13);

	--csv-serif: 'Elizeth Trial', Georgia, 'Times New Roman', serif;
	--csv-sans: 'Cabin', system-ui, -apple-system, sans-serif;

	max-width: 1240px;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: var(--csv-sans);
	color: var(--csv-primary);
}
.csv-wrap *,
.csv-wrap *::before,
.csv-wrap *::after { box-sizing: border-box; }

/* ───────── Stepper ───────── */
.csv-steps {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border-radius: 20px;
	padding: 16px 24px;
	margin-bottom: 24px;
	box-shadow: 0 16px 24px rgba(24, 24, 27, 0.06), 0 0 1px rgba(24, 24, 27, 0.3);
}
.csv-step {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	padding: 8px 16px;
	border-radius: 14px;
	transition: background .2s ease;
}
.csv-step.is-active { background: var(--csv-bg-soft); }
.csv-step-num {
	flex-shrink: 0;
	width: 32px; height: 32px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--csv-track);
	color: var(--csv-neutral);
	font-weight: 600;
	font-size: 14px;
}
.csv-step.is-active .csv-step-num { background: var(--csv-accent); color: #fff; }
.csv-step.is-done .csv-step-num { background: var(--csv-primary); color: #fff; }
.csv-step-txt {
	display: flex; flex-direction: column;
	font-family: var(--csv-serif);
	font-weight: 500;
	font-size: 16px;
	line-height: 19.5px;
	color: #272727; /* token text/Headings — neutral/600 */
}
.csv-step-txt small {
	font-family: var(--csv-sans);
	font-size: 10px;
	letter-spacing: .08em;
	color: var(--csv-neutral);
	margin-bottom: 2px;
}
.csv-step-sep { color: #BDBDBD; flex-shrink: 0; display: flex; }
.csv-step-sep svg { width: 24px; height: 24px; }

/* ───────── Card ───────── */
.csv-card {
	display: flex;
	gap: 32px;
	align-items: stretch;
	background: #fff;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 16px 24px rgba(24, 24, 27, 0.10), 0 0 1px rgba(24, 24, 27, 0.30);
}
.csv-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* ¿Cuál crédito? */
.csv-row-credito {
	display: flex;
	align-items: center;
	gap: 25px;
	background: var(--csv-bg-soft);
	border-radius: 20px;
	padding: 16px 24px;
}
.csv-q {
	margin: 0;
	font-family: var(--csv-serif);
	font-size: 16px;
	line-height: 24px;
	color: var(--csv-primary);
	flex: 1 1 auto;
}
.csv-select {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: #fff;
	border: 1px solid var(--csv-border);
	border-radius: 8px;
	padding: 14px 16px;
	min-width: 240px;
	font-size: 16px;
	color: var(--csv-primary);
}
.csv-select svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Tabs (prefijo .csv-wrap para ganar especificidad al tema/Elementor) */
.csv-tabs { display: flex; gap: 20px; }
.csv-wrap .csv-tab {
	flex: 1;
	display: flex; flex-direction: column; gap: 5px; align-items: center;
	appearance: none; -webkit-appearance: none;
	background: var(--csv-bg-soft);
	color: var(--csv-neutral);
	border: 0; box-shadow: none; cursor: pointer;
	border-radius: 20px;
	padding: 16px;
	text-align: center;
	transition: background .2s ease, color .2s ease;
}
.csv-wrap .csv-tab:hover { background: #eef0f2; color: var(--csv-neutral); }
.csv-tab-title { font-family: var(--csv-serif); font-weight: 500; font-size: 16px; }
.csv-tab-sub { font-family: var(--csv-sans); font-size: 12px; }
.csv-wrap .csv-tab.is-active,
.csv-wrap .csv-tab.is-active:hover { background: var(--csv-accent); color: #fff; }

/* Sliders */
.csv-sliders { display: flex; flex-direction: column; gap: 24px; }
.csv-slider-top {
	display: flex; align-items: center; gap: 16px;
	justify-content: space-between;
}
.csv-slider-top label {
	font-family: var(--csv-serif);
	font-size: 16px; line-height: 24px;
	color: var(--csv-primary);
}
.csv-input {
	background: #fff;
	border: 1px solid var(--csv-border);
	border-radius: 8px;
	min-width: 219px; height: 58px;
	display: flex; align-items: center; justify-content: flex-end;
	padding: 9px 15px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.csv-input:focus-within {
	border-color: var(--csv-accent);
	box-shadow: 0 0 0 3px rgba(60, 180, 229, .18);
}
.csv-input input {
	width: 100%;
	border: 0; outline: 0; background: transparent;
	text-align: right;
	font-family: var(--csv-sans);
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	color: var(--csv-primary);
	-moz-appearance: textfield;
}
.csv-input input::-webkit-outer-spin-button,
.csv-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.csv-slider-help {
	display: flex; justify-content: space-between;
	margin-top: 6px;
	font-family: 'Inter', var(--csv-sans);
	font-size: 11px; line-height: 16.5px;
	color: var(--csv-muted);
}

/* Barra de progreso (solo lectura — no arrastrable) */
.csv-bar {
	position: relative;
	width: 100%; height: 4px;
	margin: 12px 0 0;
	border-radius: 9999px;
	background: var(--csv-track);
}
.csv-bar-fill {
	position: absolute; left: 0; top: 0;
	height: 100%;
	width: 0;
	border-radius: 9999px;
	background: var(--csv-accent);
	transition: width .25s ease;
}
.csv-bar-fill::after {
	content: '';
	position: absolute; right: -9px; top: 50%;
	transform: translateY(-50%);
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--csv-accent);
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Form fields (paso 2) */
.csv-fields { display: flex; flex-direction: column; gap: 16px; }
.csv-field { display: flex; flex-direction: column; gap: 6px; }
.csv-field label {
	font-family: var(--csv-serif);
	font-weight: 500;
	font-size: 16px; line-height: 18px;
	color: var(--csv-primary); /* primary/500 #005066 (paso 3) */
}
.csv-wrap .csv-field input {
	appearance: none; -webkit-appearance: none;
	height: 44px;
	border: 1px solid var(--csv-border);
	border-radius: 8px;
	padding: 0 15px;
	font-family: 'Inter', var(--csv-sans);
	font-size: 14px;
	color: #111827;
	background: #fff;
	box-shadow: none;
}
.csv-wrap .csv-field input:focus {
	outline: 0;
	border-color: var(--csv-accent);
	box-shadow: 0 0 0 3px rgba(60, 180, 229, .18);
}
.csv-field input::placeholder { color: rgba(17, 24, 39, .5); }
.csv-check {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 14px; color: var(--csv-muted);
	font-family: var(--csv-sans);
}
.csv-check input { margin-top: 3px; accent-color: var(--csv-accent); }
.csv-error {
	background: #FEE2E2; color: #B91C1C;
	border-radius: 8px; padding: 10px 14px;
	font-size: 13px; font-family: var(--csv-sans);
}

/* Buttons */
.csv-actions { display: flex; justify-content: center; margin-top: 8px; }
.csv-wrap .csv-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	appearance: none; -webkit-appearance: none;
	border: 0; box-shadow: none; cursor: pointer;
	border-radius: 16px;
	height: 48px; padding: 0 20px;
	font-family: var(--csv-sans);
	font-weight: 500; font-size: 16px;
	text-decoration: none;
	transition: filter .15s ease, background .15s ease, color .15s ease;
}
.csv-btn svg { width: 20px; height: 20px; }
.csv-wrap .csv-btn-accent { background: var(--csv-accent); color: #fff; min-width: 240px; }
.csv-wrap .csv-btn-accent:hover { filter: brightness(.95); }
.csv-wrap .csv-btn-ghost { background: #b0c9d0; color: #fff; min-width: 240px; } /* bg/button-muted */
.csv-wrap .csv-btn-ghost.is-ready { background: var(--csv-accent); color: #fff; cursor: pointer; }

/* Acciones del paso 3 (fuera del panel oscuro) */
.csv-wrap .csv-btn-asesor { background: #63c3ea; color: #fff; } /* blue/focusring */
.csv-wrap .csv-btn-asesor:hover { filter: brightness(.96); }
.csv-wrap .csv-btn-outline-dark {
	background: transparent;
	border: 1px solid #9d9d9d; /* gray/muted */
	color: #181818;            /* gray/fg */
}
.csv-wrap .csv-btn-outline-dark:hover { background: rgba(0, 0, 0, .03); }
.csv-wrap .csv-link-dark {
	appearance: none; -webkit-appearance: none;
	background: none; border: 0; box-shadow: none; cursor: pointer;
	height: 48px;
	color: #181818; text-decoration: underline;
	font-family: var(--csv-sans); font-weight: 500; font-size: 16px;
	align-self: center; padding: 0 20px;
}
.csv-btn-block { width: 100%; }
.csv-btn-outline { background: transparent; border: 1px solid #fff; color: #fff; }
.csv-btn-outline:hover { background: rgba(255,255,255,.08); }
.csv-link {
	background: none; border: 0; cursor: pointer;
	color: #fff; text-decoration: underline;
	font-family: var(--csv-sans); font-size: 15px;
	align-self: center; padding: 4px;
}

/* ───────── Columna derecha (panel + acciones) ───────── */
.csv-right {
	flex: 0 0 453px;
	display: flex; flex-direction: column; gap: 24px;
}
.csv-panel {
	flex: 1 1 auto;
	width: 100%;
	background: var(--csv-primary-800);
	border-radius: 20px;
	padding: 32px;
	display: flex; flex-direction: column; gap: 32px;
	color: #fff;
}
.csv-panel-stack { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.csv-panel-head { display: flex; flex-direction: column; gap: 16px; }
.csv-panel-title { margin: 0; font-family: var(--csv-serif); font-size: 16px; line-height: 24px; }
.csv-panel-big { margin: 0; font-family: var(--csv-sans); font-weight: 500; font-size: 48px; line-height: 52px; }

.csv-resultbox {
	background: rgba(247, 247, 247, 0.1);
	border-radius: 20px;
	padding: 24px 13px;
	display: flex; flex-direction: column; gap: 32px;
}
.csv-result-row { display: flex; gap: 12px; align-items: flex-start; }
.csv-ico { flex-shrink: 0; }
.csv-ico svg { width: 20px; height: 20px; opacity: .9; }
.csv-result-txt { display: flex; flex-direction: column; gap: 8px; }
.csv-result-txt strong {
	font-family: var(--csv-sans);
	font-weight: 600; font-size: 30px; line-height: 38px;
}
.csv-result-txt span { font-family: var(--csv-serif); font-weight: 300; font-size: 16px; line-height: 20px; }

.csv-cond {
	display: flex; align-items: center; justify-content: space-between; gap: 5px;
	background: rgba(255, 254, 242, .9);
	border-radius: 20px; padding: 8px 16px;
	color: #272727; text-decoration: none;
	font-family: var(--csv-sans); font-weight: 500; font-size: 14px; line-height: 19.5px;
}
.csv-cond svg { width: 20px; height: 20px; flex-shrink: 0; color: #272727; }

.csv-panel-actions { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }

/* ───────── Visibilidad por paso ───────── */
.csv-wrap[data-step="1"] [data-only-step]:not([data-only-step~="1"]) { display: none !important; }
.csv-wrap[data-step="2"] [data-only-step]:not([data-only-step~="2"]) { display: none !important; }
.csv-wrap[data-step="3"] [data-only-step]:not([data-only-step~="3"]) { display: none !important; }
[hidden] { display: none !important; }

/* ───────── Modal plan de pagos ───────── */
.csv-modal {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(0, 0, 0, .55);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.csv-modal-box {
	background: #fff; border-radius: 12px;
	max-width: 980px; width: 100%; max-height: 88vh;
	padding: 0; overflow: hidden;
	display: flex; flex-direction: column;
}
.csv-modal-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
	background: #14566a; color: #fff;
	padding: 18px 24px;
}
.csv-modal-head h3 { margin: 0; font-family: var(--csv-serif); font-weight: 500; font-size: 20px; line-height: 1.2; color: #fff; }
.csv-modal-sub { margin: 4px 0 0; font-family: var(--csv-sans); font-size: 13px; color: rgba(255, 255, 255, .8); }
.csv-modal-close {
	background: none; border: 0; cursor: pointer; flex-shrink: 0;
	font-size: 26px; line-height: 1; color: #fff;
}

.csv-table-scroll { overflow-y: auto; padding: 0; flex: 1; }
.csv-table-body { padding: 16px 24px; }
.csv-table { width: 100%; border-collapse: collapse; font-family: var(--csv-sans); font-size: 13px; }
.csv-table th, .csv-table td { padding: 10px 12px; text-align: right; white-space: nowrap; }
.csv-table thead th {
	background: #8c994b; color: #fff; font-weight: 600;
	position: sticky; top: 0; border: 0;
}
.csv-table thead th:first-child { border-top-left-radius: 6px; }
.csv-table thead th:last-child { border-top-right-radius: 6px; }
.csv-table tbody td { color: #333; }
.csv-table tbody tr:nth-child(even) { background: #f5f6f7; }
.csv-table tbody td:last-child { color: #2e9bc7; font-weight: 600; }
.csv-table td:first-child, .csv-table th:first-child { text-align: center; }

.csv-modal-foot {
	display: flex; justify-content: flex-end;
	padding: 16px 24px; border-top: 1px solid #eee;
}
.csv-wrap .csv-modal-foot .csv-btn { min-width: 110px; height: 40px; border-radius: 8px; padding: 0 24px; }

/* ───────── Responsive ───────── */
@media (max-width: 980px) {
	.csv-card { flex-direction: column; padding: 24px; }
	.csv-right { flex-basis: auto; width: 100%; }
	.csv-panel { flex-basis: auto; }
	.csv-tabs { flex-wrap: wrap; }
	.csv-tab { flex: 1 1 30%; }
}
@media (max-width: 600px) {
	.csv-steps { flex-wrap: wrap; }
	.csv-step-sep { display: none; }
	.csv-row-credito { flex-direction: column; align-items: stretch; gap: 12px; }
	.csv-slider-top { flex-direction: column; align-items: stretch; gap: 8px; }
	.csv-input { min-width: 0; width: 100%; }
	.csv-input span { font-size: 22px; }
	.csv-btn-accent, .csv-btn-ghost { min-width: 0; width: 100%; }
}