/* ─── CALCULADORA DE GASTOS DE COMPRA ─── */
/* Prefijo: .sc-calc-  |  IDs: sc-cc-  */

/* ─── Variables (heredadas del proyecto) ─── */
.sc-calc-compra {
	--azul: #4a8fcc;
	--azul-hover: #3a7fb8;
	--azul-deep: #2c6fa0;
	--azul-light: #e8f2fa;
	--azul-glow: rgba(74,143,204,0.12);
	--beige: #fbf5e9;
	--beige-dark: #f0e8d5;
	--blanco: #ffffff;
	--gris-50: #f9fafb;
	--gris-100: #f3f4f6;
	--gris-200: #e5e7eb;
	--gris-texto: #54585e;
	--negro: #1f2937;
	--verde: #059669;
	--verde-light: #ecfdf5;
	--rojo: #dc2626;
	--naranja: #d97706;
}

/* ─── TRIGGER (modo colapsable) ─── */
.sc-calc-trigger {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 14px 20px !important;
	background: var(--azul-light) !important;
	border: 2px solid var(--azul) !important;
	border-radius: 10px !important;
	color: var(--azul-deep) !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.25s !important;
	margin-top: 12px !important;
	-webkit-user-select: none !important;
	user-select: none !important;
}

.sc-calc-trigger:hover {
	background: var(--azul) !important;
	color: var(--blanco) !important;
	box-shadow: 0 4px 16px rgba(74,143,204,0.3) !important;
}

.sc-calc-trigger:hover svg {
	stroke: var(--blanco) !important;
}

.sc-calc-trigger svg {
	flex-shrink: 0 !important;
	transition: all 0.25s !important;
}

.sc-calc-chevron {
	margin-left: auto !important;
	transition: transform 0.3s ease !important;
}

.sc-calc-trigger.open .sc-calc-chevron {
	transform: rotate(180deg) !important;
}

/* ─── COLLAPSE container ─── */
.sc-calc-collapse {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease;
}

/* ─── CARD ─── */
.sc-calc-card {
	background: var(--blanco) !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 4px 24px rgba(0,0,0,0.04) !important;
	overflow: hidden !important;
	-webkit-user-select: none !important;
	user-select: none !important;
	border: 1px solid var(--gris-200) !important;
}

.sc-calc-form {
	padding: 24px !important;
}

/* ─── SECTION LABELS ─── */
.sc-calc-section-label {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	color: var(--gris-texto) !important;
	margin-bottom: 12px !important;
	padding-bottom: 6px !important;
	border-bottom: 1px solid var(--gris-200) !important;
}

/* ─── TIPO VIVIENDA ─── */
.sc-calc-tipo-vivienda {
	display: flex !important;
	gap: 8px !important;
	margin-bottom: 20px !important;
}

.sc-calc-tipo-btn {
	flex: 1 !important;
	padding: 12px !important;
	border: 2px solid var(--gris-200) !important;
	border-radius: 10px !important;
	background: var(--blanco) !important;
	cursor: pointer !important;
	text-align: center !important;
	transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--gris-texto) !important;
	position: relative !important;
	overflow: hidden !important;
}

.sc-calc-tipo-btn::before {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: var(--azul-glow) !important;
	opacity: 0 !important;
	transition: opacity 0.25s !important;
}

.sc-calc-tipo-btn:hover {
	border-color: var(--azul) !important;
	color: var(--azul) !important;
}

.sc-calc-tipo-btn:hover::before {
	opacity: 1 !important;
}

.sc-calc-tipo-btn.active {
	border-color: var(--azul) !important;
	background: var(--azul) !important;
	color: var(--blanco) !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 12px rgba(74,143,204,0.3) !important;
}

.sc-calc-tipo-btn.active::before {
	opacity: 0 !important;
}

.sc-calc-tipo-icon {
	font-size: 20px !important;
	display: block !important;
	margin-bottom: 2px !important;
}

/* ─── FORM FIELDS ─── */
.sc-calc-form-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
	margin-bottom: 12px !important;
}

.sc-calc-form-row.single {
	grid-template-columns: 1fr !important;
}

.sc-calc-form-row.triple {
	grid-template-columns: 1fr 1fr 1fr !important;
}

.sc-calc-form-group {
	display: flex !important;
	flex-direction: column !important;
}

.sc-calc-form-group label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--negro) !important;
	margin-bottom: 5px !important;
}

.sc-calc-form-group label .sc-calc-hint {
	font-weight: 400 !important;
	color: var(--gris-texto) !important;
	font-size: 11px !important;
}

.sc-calc-form-group input,
.sc-calc-form-group select {
	padding: 11px 14px !important;
	border: 2px solid var(--gris-200) !important;
	border-radius: 8px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px !important;
	color: var(--negro) !important;
	transition: all 0.2s !important;
	background: var(--blanco) !important;
	width: 100% !important;
	-webkit-appearance: none !important;
}

.sc-calc-form-group input:focus,
.sc-calc-form-group select:focus {
	outline: none !important;
	border-color: var(--azul) !important;
	box-shadow: 0 0 0 3px var(--azul-glow) !important;
}

.sc-calc-input-suffix {
	position: relative !important;
}

.sc-calc-input-suffix input {
	padding-right: 40px !important;
}

.sc-calc-input-suffix::after {
	content: attr(data-suffix) !important;
	position: absolute !important;
	right: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--gris-texto) !important;
	pointer-events: none !important;
}

/* ─── BONIFICACIONES ─── */
.sc-calc-bonificaciones {
	background: var(--gris-50) !important;
	border: 1px solid var(--gris-200) !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	margin: 18px 0 !important;
}

.sc-calc-bonificaciones h3 {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--negro) !important;
	margin-bottom: 10px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	letter-spacing: 0.3px !important;
}

.sc-calc-toggle-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 8px 0 !important;
	border-bottom: 1px solid var(--gris-200) !important;
}

.sc-calc-toggle-row:last-child {
	border-bottom: none !important;
}

.sc-calc-toggle-label {
	font-size: 13px !important;
	color: var(--negro) !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

.sc-calc-tag {
	font-size: 10px !important;
	font-weight: 700 !important;
	padding: 3px 8px !important;
	border-radius: 4px !important;
	background: var(--verde-light) !important;
	color: var(--verde) !important;
	letter-spacing: 0.3px !important;
	text-transform: uppercase !important;
}

/* Toggle switch */
.sc-calc-toggle {
	position: relative !important;
	width: 44px !important;
	height: 24px !important;
	flex-shrink: 0 !important;
}

.sc-calc-toggle input {
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

.sc-calc-toggle .sc-calc-slider {
	position: absolute !important;
	cursor: pointer !important;
	inset: 0 !important;
	background: var(--gris-200) !important;
	border-radius: 24px !important;
	transition: 0.3s !important;
}

.sc-calc-toggle .sc-calc-slider::before {
	content: '' !important;
	position: absolute !important;
	width: 18px !important;
	height: 18px !important;
	left: 3px !important;
	bottom: 3px !important;
	background: var(--blanco) !important;
	border-radius: 50% !important;
	transition: 0.3s !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}

.sc-calc-toggle input:checked + .sc-calc-slider {
	background: var(--azul) !important;
}

.sc-calc-toggle input:checked + .sc-calc-slider::before {
	transform: translateX(20px) !important;
}

/* ─── ITP INFO BOX ─── */
.sc-calc-itp-info {
	margin-top: 12px !important;
	padding: 12px 16px !important;
	border-radius: 8px !important;
	font-size: 12px !important;
	display: none !important;
	align-items: flex-start !important;
	gap: 8px !important;
	line-height: 1.5 !important;
	border: 1px solid transparent !important;
}

.sc-calc-itp-info.visible {
	display: flex !important;
}

.sc-calc-itp-info.reducido {
	background: var(--verde-light) !important;
	color: var(--verde) !important;
	border-color: rgba(5,150,105,0.15) !important;
}

.sc-calc-itp-info.normal {
	background: var(--azul-light) !important;
	color: var(--azul-deep) !important;
	border-color: rgba(74,143,204,0.15) !important;
}

.sc-calc-itp-info svg {
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}

/* ─── FINANCIACION ─── */
.sc-calc-financiacion-section {
	margin: 18px 0 !important;
	padding: 16px 20px !important;
	background: var(--gris-50) !important;
	border: 1px solid var(--gris-200) !important;
	border-radius: 12px !important;
}

.sc-calc-financiacion-section h3 {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--negro) !important;
	margin-bottom: 12px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* ─── BOTON CALCULAR ─── */
.sc-calc-btn-calcular {
	width: 100% !important;
	padding: 14px !important;
	background: var(--azul) !important;
	color: var(--blanco) !important;
	border: none !important;
	border-radius: 10px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.25s !important;
	margin-top: 8px !important;
	letter-spacing: 0.3px !important;
}

.sc-calc-btn-calcular:hover {
	background: var(--azul-hover) !important;
	box-shadow: 0 4px 16px rgba(74,143,204,0.35) !important;
	transform: translateY(-1px) !important;
}

.sc-calc-btn-calcular:active {
	transform: translateY(0) !important;
}

/* ─── RESULTADOS ─── */
.sc-calc-resultados {
	display: none !important;
	border-top: 1px solid var(--gris-200) !important;
}

.sc-calc-resultados.visible {
	display: block !important;
	animation: scCalcFadeIn 0.3s ease !important;
}

@keyframes scCalcFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Desglose toggle (collapsible) */
.sc-calc-desglose-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 12px 24px !important;
	cursor: pointer !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--azul-deep) !important;
	background: var(--gris-50) !important;
	border-bottom: 1px solid var(--gris-200) !important;
	transition: background 0.2s !important;
	-webkit-user-select: none !important;
	user-select: none !important;
}

.sc-calc-desglose-toggle:hover {
	background: var(--azul-light) !important;
}

.sc-calc-desglose-toggle svg {
	transition: transform 0.3s ease !important;
	flex-shrink: 0 !important;
}

.sc-calc-desglose-toggle.open svg {
	transform: rotate(180deg) !important;
}

/* Desglose items (hidden by default) */
.sc-calc-desglose {
	max-height: 0 !important;
	overflow: hidden !important;
	transition: max-height 0.35s ease !important;
	padding: 0 24px !important;
}

.sc-calc-desglose-toggle.open + .sc-calc-desglose {
	max-height: 400px !important;
	padding: 12px 24px !important;
}

.sc-calc-desglose-item {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 7px 0 !important;
	border-bottom: 1px solid var(--gris-100) !important;
}

.sc-calc-desglose-item:last-of-type {
	border-bottom: none !important;
}

.sc-calc-di-left {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.sc-calc-di-dot {
	width: 7px !important;
	height: 7px !important;
	border-radius: 2px !important;
	flex-shrink: 0 !important;
}

.sc-calc-di-name {
	font-size: 13px !important;
	color: var(--negro) !important;
}

.sc-calc-di-value {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--negro) !important;
	white-space: nowrap !important;
	margin-left: 8px !important;
}

/* Total bar */
.sc-calc-total-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 24px !important;
	background: var(--azul-light) !important;
	border-bottom: 1px solid rgba(74,143,204,0.2) !important;
}

.sc-calc-total-left {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--azul-deep) !important;
}

.sc-calc-total-pct {
	font-size: 11px !important;
	font-weight: 400 !important;
	color: var(--gris-texto) !important;
	margin-left: 6px !important;
}

.sc-calc-total-amount {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--azul-deep) !important;
	letter-spacing: -0.3px !important;
}

/* Cuota hipoteca */
.sc-calc-cuota-section {
	padding: 12px 24px !important;
	background: var(--gris-50) !important;
	display: none !important;
	align-items: center !important;
	justify-content: space-between !important;
	border-bottom: 1px solid var(--gris-200) !important;
}

.sc-calc-cuota-section.visible {
	display: flex !important;
}

.sc-calc-cuota-info {
	font-size: 12px !important;
	color: var(--gris-texto) !important;
}

.sc-calc-cuota-info strong {
	color: var(--negro) !important;
	font-size: 18px !important;
	display: block !important;
	margin-top: 1px !important;
}

.sc-calc-cuota-detail {
	text-align: right !important;
	font-size: 11px !important;
	color: var(--gris-texto) !important;
	line-height: 1.5 !important;
}

/* Ahorro hero: el dato clave */
.sc-calc-ahorro-hero {
	background: linear-gradient(135deg, var(--azul) 0%, var(--azul-deep) 100%) !important;
	color: var(--blanco) !important;
	padding: 20px 24px !important;
	text-align: center !important;
}

.sc-calc-ahorro-label {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	opacity: 0.8 !important;
	margin-bottom: 4px !important;
}

.sc-calc-ahorro-amount {
	font-size: clamp(26px, 5vw, 34px) !important;
	font-weight: 700 !important;
	letter-spacing: -0.5px !important;
	line-height: 1.1 !important;
}

.sc-calc-ahorro-detail {
	font-size: 12px !important;
	opacity: 0.65 !important;
	margin-top: 4px !important;
}

/* Footer: nota + CTA en una linea */
.sc-calc-footer {
	padding: 14px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	background: var(--gris-50) !important;
	border-radius: 0 0 14px 14px !important;
}

.sc-calc-nota-legal {
	font-size: 10px !important;
	color: var(--gris-texto) !important;
	line-height: 1.5 !important;
	flex: 1 !important;
}

.sc-calc-cta-asesoria {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-shrink: 0 !important;
}

.sc-calc-cta-asesoria span {
	font-size: 12px !important;
	color: var(--negro) !important;
	white-space: nowrap !important;
}

.sc-calc-cta-asesoria strong {
	color: var(--azul) !important;
}

.sc-calc-cta-asesoria a {
	padding: 8px 16px !important;
	background: var(--azul) !important;
	color: var(--blanco) !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	transition: all 0.2s !important;
	white-space: nowrap !important;
}

.sc-calc-cta-asesoria a:hover {
	background: var(--azul-hover) !important;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
	.sc-calc-form-row.triple {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 640px) {
	/* --- Trigger: compacto --- */
	.sc-calc-trigger {
		padding: 12px 16px !important;
		font-size: 14px !important;
		gap: 8px !important;
		margin-top: 12px !important;
		border-radius: 10px !important;
	}

	.sc-calc-card {
		border-radius: 12px !important;
	}

	/* --- Form: compacto --- */
	.sc-calc-form {
		padding: 20px 16px !important;
	}

	.sc-calc-section-label {
		margin-bottom: 10px !important;
		padding-bottom: 6px !important;
		font-size: 10px !important;
	}

	/* Tipo vivienda: horizontal, compacto */
	.sc-calc-tipo-vivienda {
		gap: 8px !important;
		margin-bottom: 20px !important;
	}

	.sc-calc-tipo-btn {
		padding: 10px 8px !important;
		font-size: 13px !important;
		border-radius: 10px !important;
	}

	.sc-calc-tipo-icon {
		font-size: 18px !important;
		margin-bottom: 2px !important;
	}

	/* Inputs: un poco mas compactos */
	.sc-calc-form-group input,
	.sc-calc-form-group select {
		padding: 11px 14px !important;
		font-size: 15px !important;
		border-radius: 8px !important;
	}

	.sc-calc-form-group label {
		font-size: 12px !important;
		margin-bottom: 4px !important;
	}

	.sc-calc-form-row {
		gap: 12px !important;
		margin-bottom: 12px !important;
	}

	.sc-calc-form-row.single {
		grid-template-columns: 1fr !important;
	}

	/* Financiacion: 3 columnas compactas, no apilar */
	.sc-calc-form-row.triple {
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 8px !important;
	}

	.sc-calc-form-row.triple .sc-calc-form-group label .sc-calc-hint {
		display: none !important;
	}

	/* Bonificaciones: compactas */
	.sc-calc-bonificaciones {
		padding: 14px 16px !important;
		margin: 16px 0 !important;
		border-radius: 10px !important;
	}

	.sc-calc-bonificaciones h3 {
		font-size: 12px !important;
		margin-bottom: 8px !important;
	}

	.sc-calc-toggle-row {
		padding: 8px 0 !important;
	}

	.sc-calc-toggle-label {
		font-size: 13px !important;
	}

	.sc-calc-tag {
		font-size: 9px !important;
		padding: 2px 6px !important;
	}

	/* ITP info box */
	.sc-calc-itp-info {
		padding: 10px 14px !important;
		font-size: 12px !important;
		line-height: 1.5 !important;
		margin-top: 12px !important;
	}

	/* Financiacion section */
	.sc-calc-financiacion-section {
		margin: 16px 0 !important;
		padding: 14px 16px !important;
		border-radius: 10px !important;
	}

	.sc-calc-financiacion-section h3 {
		font-size: 12px !important;
		margin-bottom: 10px !important;
	}

	/* Boton calcular */
	.sc-calc-btn-calcular {
		padding: 14px !important;
		font-size: 15px !important;
		border-radius: 10px !important;
		margin-top: 8px !important;
	}

	/* --- Resultados: compactos --- */
	.sc-calc-desglose-toggle {
		padding: 10px 16px !important;
		font-size: 12px !important;
	}

	.sc-calc-desglose {
		padding: 0 16px !important;
	}

	.sc-calc-desglose-toggle.open + .sc-calc-desglose {
		padding: 10px 16px !important;
	}

	.sc-calc-desglose-item {
		padding: 6px 0 !important;
	}

	.sc-calc-di-name {
		font-size: 12px !important;
	}

	.sc-calc-di-value {
		font-size: 12px !important;
	}

	.sc-calc-total-bar {
		padding: 12px 16px !important;
	}

	.sc-calc-total-left {
		font-size: 12px !important;
	}

	.sc-calc-total-amount {
		font-size: 18px !important;
	}

	.sc-calc-cuota-section {
		padding: 10px 16px !important;
	}

	.sc-calc-cuota-info {
		font-size: 11px !important;
	}

	.sc-calc-cuota-info strong {
		font-size: 16px !important;
	}

	.sc-calc-cuota-detail {
		font-size: 10px !important;
	}

	.sc-calc-ahorro-hero {
		padding: 16px !important;
	}

	.sc-calc-ahorro-label {
		font-size: 10px !important;
	}

	.sc-calc-ahorro-amount {
		font-size: clamp(22px, 5vw, 28px) !important;
	}

	.sc-calc-ahorro-detail {
		font-size: 11px !important;
	}

	.sc-calc-footer {
		padding: 10px 16px !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}

	.sc-calc-nota-legal {
		font-size: 9px !important;
	}

	.sc-calc-cta-asesoria {
		width: 100% !important;
		justify-content: space-between !important;
	}

	.sc-calc-cta-asesoria span {
		font-size: 11px !important;
	}

	.sc-calc-cta-asesoria a {
		padding: 6px 14px !important;
		font-size: 11px !important;
	}
}

@media (max-width: 380px) {
	.sc-calc-form {
		padding: 16px 12px !important;
	}

	/* Tipo vivienda aun mas compacto */
	.sc-calc-tipo-btn {
		padding: 8px 6px !important;
		font-size: 12px !important;
	}

	.sc-calc-tipo-icon {
		font-size: 16px !important;
	}

	/* Financiacion: si no cabe, 3 cols mas apretadas */
	.sc-calc-form-row.triple {
		gap: 6px !important;
	}

	.sc-calc-form-row.triple input {
		padding: 10px 8px !important;
		font-size: 14px !important;
	}

	.sc-calc-form-row.triple .sc-calc-input-suffix::after {
		right: 8px !important;
		font-size: 12px !important;
	}

	/* Resultados */
	.sc-calc-desglose-toggle {
		padding: 8px 12px !important;
	}

	.sc-calc-desglose {
		padding: 0 12px !important;
	}

	.sc-calc-desglose-toggle.open + .sc-calc-desglose {
		padding: 8px 12px !important;
	}

	.sc-calc-desglose-item {
		padding: 5px 0 !important;
	}

	.sc-calc-total-bar {
		padding: 10px 12px !important;
	}

	.sc-calc-total-amount {
		font-size: 16px !important;
	}

	.sc-calc-ahorro-hero {
		padding: 14px 12px !important;
	}

	.sc-calc-ahorro-amount {
		font-size: 22px !important;
	}

	.sc-calc-footer {
		padding: 8px 12px !important;
	}

	.sc-calc-cta-asesoria {
		flex-direction: column !important;
		text-align: center !important;
		gap: 6px !important;
	}

	.sc-calc-cta-asesoria a {
		width: 100% !important;
		text-align: center !important;
	}
}