/* ─── CALCULADORA DE GASTOS DE VENTA ─── */
/* Prefijo: .sc-calc-  |  IDs: sc-cv-  */

/* ─── Variables ─── */
.sc-calc-venta {
	--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-deep: #047857;
	--verde-light: #ecfdf5;
	--rojo: #dc2626;
	--rojo-light: #fef2f2;
	--naranja: #d97706;
}

/* ─── TRIGGER (modo colapsable) — corporativo azul ─── */
.sc-calc-venta .sc-calc-trigger {
	background: var(--azul-light) !important;
	border: 2px solid var(--azul) !important;
	color: var(--azul-deep) !important;
}

.sc-calc-venta .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-venta .sc-calc-trigger:hover svg {
	stroke: var(--blanco) !important;
}

/* ─── CARD ─── */
.sc-calc-venta .sc-calc-card {
	background: var(--blanco) !important;
	border-radius: 16px !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-venta .sc-calc-form {
	padding: 36px !important;
}

/* ─── INFO BOX ─── */
.sc-calc-info-box {
	margin: 20px 0 !important;
	padding: 16px 20px !important;
	background: var(--azul-light) !important;
	border: 1px solid rgba(74,143,204,0.15) !important;
	border-radius: 12px !important;
	font-size: 13px !important;
	color: var(--azul-deep) !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	line-height: 1.7 !important;
}

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

/* ─── TOGGLE HIPOTECA ─── */
.sc-calc-toggle-section {
	margin: 20px 0 !important;
	padding: 18px 24px !important;
	border: 2px solid var(--gris-200) !important;
	border-radius: 14px !important;
	transition: border-color 0.2s !important;
}

.sc-calc-toggle-section.active {
	border-color: var(--azul) !important;
}

.sc-calc-toggle-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.sc-calc-toggle-header-text {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--negro) !important;
}

.sc-calc-hipoteca-fields {
	display: none !important;
	margin-top: 16px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--gris-200) !important;
}

.sc-calc-hipoteca-fields.visible {
	display: block !important;
}

/* ─── BOTON CALCULAR (azul corporativo para venta) ─── */
.sc-calc-venta .sc-calc-btn-calcular {
	background: #4a8fcc !important;
}

.sc-calc-venta .sc-calc-btn-calcular:hover {
	background: #3a7fb8 !important;
	box-shadow: 0 4px 16px rgba(74,143,204,0.35) !important;
}

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

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

/* Hero resultado (azul corporativo) */
.sc-calc-resultado-hero {
	padding: 36px !important;
	text-align: center !important;
	background: linear-gradient(135deg, var(--azul) 0%, var(--azul-deep) 100%) !important;
	color: var(--blanco) !important;
}

.sc-calc-rh-label {
	font-size: 15px !important;
	opacity: 0.8 !important;
	margin-bottom: 6px !important;
}

.sc-calc-rh-amount {
	font-size: clamp(32px, 6vw, 48px) !important;
	font-weight: 700 !important;
	letter-spacing: -1px !important;
}

.sc-calc-rh-sub {
	font-size: 14px !important;
	opacity: 0.65 !important;
	margin-top: 8px !important;
}

/* Barra visual */
.sc-calc-barra-visual {
	padding: 24px 36px !important;
	background: var(--gris-50) !important;
	border-bottom: 1px solid var(--gris-200) !important;
}

.sc-calc-barra-container {
	display: flex !important;
	height: 28px !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	margin-bottom: 12px !important;
}

.sc-calc-barra-neto {
	background: var(--verde) !important;
	transition: width 0.6s ease !important;
	border-radius: 8px 0 0 8px !important;
}

.sc-calc-barra-gastos {
	background: var(--rojo) !important;
	transition: width 0.6s ease !important;
	border-radius: 0 8px 8px 0 !important;
}

.sc-calc-barra-legend {
	display: flex !important;
	justify-content: space-between !important;
	font-size: 13px !important;
	color: var(--gris-texto) !important;
}

.sc-calc-barra-legend span {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.sc-calc-barra-legend .sc-calc-dot {
	width: 10px !important;
	height: 10px !important;
	border-radius: 3px !important;
}

.sc-calc-dot-neto {
	background: var(--verde) !important;
}

.sc-calc-dot-gastos {
	background: var(--rojo) !important;
}

.sc-calc-barra-legend strong {
	color: var(--negro) !important;
}

/* Desglose — valores en rojo para venta */
.sc-calc-venta .sc-calc-di-value {
	color: var(--rojo) !important;
}

.sc-calc-venta .sc-calc-di-value.neutral {
	color: var(--negro) !important;
}

/* Metodo plusvalia info box */
.sc-calc-metodo-box {
	margin: 16px 0 !important;
	padding: 16px 20px !important;
	border-radius: 12px !important;
	font-size: 13px !important;
	line-height: 1.7 !important;
	border: 1px solid !important;
}

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

/* CTA corporativo para venta */
.sc-calc-venta .sc-calc-cta-asesoria p strong {
	color: var(--azul) !important;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 640px) {
	.sc-calc-venta .sc-calc-form {
		padding: 24px 20px !important;
	}

	.sc-calc-resultado-hero {
		padding: 28px 20px !important;
	}

	.sc-calc-rh-amount {
		font-size: 36px !important;
	}

	.sc-calc-barra-visual {
		padding: 20px !important;
	}

	.sc-calc-venta .sc-calc-desglose {
		padding: 20px !important;
	}

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

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

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