/**
 * Calculadora de Gastos Modo Punta — tarjeta azul de marca, look & feel de
 * calculadora física (pantalla de resultado + botón grande con efecto de
 * presionado + switch en vez de checkbox nativo).
 *
 * Azul de marca: #103c61. NO es una aproximación del logo — es el navy que
 * ya usa el propio sitio en sus botones de CTA (confirmado inspeccionando
 * el CSS computado en vivo de modopunta.com). Si existe un manual de marca
 * con el hex exacto, reemplazar --mp-color-navy por ese valor.
 *
 * Tipografía: Acumin Pro (Adobe Fonts / Typekit) — pendiente el kit ID.
 *   <script src="https://use.typekit.net/TU_KIT_ID.js"></script>
 *   <script>try{Typekit.load({ async: true });}catch(e){}</script>
 * Sin ese kit, el stack cae a Helvetica Neue / system sans.
 */

:root {
	--mp-color-navy: #103c61;
	--mp-color-navy-deep: #0b2c48;
	--mp-color-red: #e6484c;       /* rojo aclarado, para leer sobre navy oscuro (tarjeta) */
	--mp-color-red-onlight: #c81e2c; /* rojo más saturado, para leer sobre el panel blanco de resultados */
	--mp-color-orange: #ff6a1a;    /* naranja de alto contraste sobre navy — CTA principal */
	--mp-color-orange-deep: #e0570e; /* estado hover/active del CTA naranja */
	--mp-color-ink: #111111;
	--mp-color-muted: #6b6b6b;
	--mp-color-line: #e6e6e6;

	--mp-font-display: 'acumin-pro', 'Helvetica Neue', Arial, sans-serif;
	--mp-radius: 12px;
}

/* Reset defensivo: box-sizing consistente en todo el componente para que
   ningún padding/border sume por fuera del ancho declarado y rompa el
   contenedor en pantallas angostas. */
.modopunta-calculadora,
.modopunta-calculadora *,
.modopunta-calculadora *::before,
.modopunta-calculadora *::after {
	box-sizing: border-box;
}

/* Bug real: ".resultados" define display:grid y ".btn-compartir" define
   display:inline-flex por clase — una regla de autor con "display" propio
   le gana al [hidden]{display:none} del navegador, así que quedaban
   visibles aunque tuvieran el atributo hidden puesto. Esta es la forma
   canónica de blindar eso, sin importar qué "display" declare cada clase. */
.modopunta-calculadora [hidden] {
	display: none !important;
}

.modopunta-calculadora {
	font-family: var(--mp-font-display);
	color: #ffffff;
	max-width: 960px; /* antes 900px — le da más aire al panel de resultados, que va apretado con 2 sub-columnas adentro */
	width: 100%;
	margin: 0 auto 32px;
	background: linear-gradient( 165deg, var(--mp-color-navy) 0%, var(--mp-color-navy-deep) 100% );
	border-radius: 20px;
	padding: 28px 40px 40px; /* menos padding arriba (antes 40px parejo) */
	box-shadow: 0 24px 60px -20px rgba( 11, 44, 72, 0.55 );
	overflow-x: hidden; /* cinturón de seguridad: nada dentro de la tarjeta puede forzar scroll horizontal de la página */
}

@media ( max-width: 640px ) {
	.modopunta-calculadora {
		padding: 20px 24px 24px;
		border-radius: 16px;
		margin: 0 auto 20px;
	}
}

/* Landscape de celular: viewport ancho pero MUY bajo — el layout de 2
   columnas ya se activa por ancho (>=640px cubre casi todos los celulares
   apaisados), acá solo achicamos el aire vertical para que entre más
   contenido sin scroll excesivo. */
@media ( max-height: 480px ) and ( orientation: landscape ) {
	.modopunta-calculadora {
		padding: 18px 28px 22px;
	}
}

/* Título + logo van en la misma fila, alineados por arriba, en vez de
   apilados (el logo ya no queda "flotando" más abajo que el título). */
.modopunta-calculadora__header {
	display: flex;
	flex-wrap: wrap; /* si no entran uno al lado del otro (pantallas muy angostas), el logo baja en vez de forzar overflow */
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 28px;
}

@media ( max-width: 640px ) {
	.modopunta-calculadora__header {
		margin-bottom: 22px;
	}
}

.modopunta-calculadora__header-texto {
	flex: 1 1 auto;
	min-width: 0;
}

.modopunta-calculadora__marca {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.modopunta-calculadora__marca img {
	height: 54px; /* logo recortado sin margen blanco interno — se percibe más grande */
	width: auto;
	background: #ffffff;
	padding: 8px 16px;
	border-radius: 10px;
	display: block;
}

@media ( max-width: 640px ) {
	.modopunta-calculadora__marca img {
		height: 38px;
		padding: 5px 10px;
	}
}

.modopunta-calculadora__titulo {
	color: #ffffff;
	font-size: 26px;
	line-height: 1.25;
	margin: 0 0 8px;
}

.modopunta-calculadora__subtitulo {
	color: rgba( 255, 255, 255, 0.7 );
	font-size: 15px;
	margin: 0;
}

/* --- Layout de 2 columnas: teclado/form a la izquierda, resultado a la
   derecha. Mobile vertical (<640px) apila; desde 640px (cubre desktop Y
   celulares en horizontal) van lado a lado. --- */
.modopunta-calculadora__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

@media ( min-width: 640px ) {
	.modopunta-calculadora__layout {
		grid-template-columns: minmax( 0, 250px ) minmax( 0, 1fr );
		/* sin align-items: start a propósito — el default "stretch" de grid
		   hace que ambas columnas midan lo mismo (la más corta se estira
		   hasta la altura de la más alta), que es como se logra el
		   equilibrio visual sin inventar un alto fijo a mano. */
		gap: 32px;
	}
}

.modopunta-calculadora__panel-form,
.modopunta-calculadora__panel-resultados {
	min-width: 0;
}

/* "Pantalla" tipo LCD: agrupa la etiqueta + el precio en un panel más
   oscuro que la tarjeta, como el visor de una calculadora física, antes de
   las "teclas" (switch, modo avanzado, etc.) que van debajo. */
.modopunta-calculadora__pantalla {
	background: rgba( 0, 0, 0, 0.18 );
	border-radius: 16px;
	padding: 18px;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.08 );
}

@media ( max-width: 640px ) {
	.modopunta-calculadora__pantalla {
		padding: 14px;
		border-radius: 14px;
	}
}

/* Selector reforzado con el wrapper como prefijo: el tema define una regla
   global ".mp-prose label" (especificidad 0,1,1) que le gana a una clase
   sola (0,1,0) porque la calculadora vive dentro del layout .mp-prose de la
   página. Con el prefijo repetido quedamos en (0,2,0) y ganamos siempre,
   sin depender del orden de carga de los estilos ni usar !important. */
.modopunta-calculadora .modopunta-calculadora__eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.92 );
	font-weight: 600;
	margin-bottom: 10px;
}

/* --- "Pantalla" de precio, estilo display de calculadora ---
   El tema trae ".mp-prose input[type=\"number\"]" (especificidad 0,2,1) que
   le ganaba a la clase sola (0,1,0): el campo quedaba con fondo transparente
   y texto casi negro sobre la tarjeta navy — prácticamente invisible.
   Reforzamos con el wrapper + el atributo de tipo (0,3,0) para ganar
   siempre, sin depender del orden de carga ni de !important. */
.modopunta-calculadora .modopunta-calculadora__input-precio[type="number"] {
	font-family: var(--mp-font-display);
	font-size: 34px; /* antes 38px — con la columna izquierda fija en 270px, un precio de 7 cifras necesita este margen para no cortarse */
	font-weight: 700;
	text-align: right;
	border: none;
	border-radius: var(--mp-radius);
	padding: 18px 22px;
	width: 100%;
	background: rgba( 255, 255, 255, 0.08 );
	color: #ffffff;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.16 );
	box-sizing: border-box;
	transition: box-shadow .15s ease, background .15s ease;
	/* Sin flechitas de incremento nativas del input number ("scroll") —
	   look de calculadora, no de formulario de sistema. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.modopunta-calculadora .modopunta-calculadora__input-precio[type="number"]::-webkit-outer-spin-button,
.modopunta-calculadora .modopunta-calculadora__input-precio[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.modopunta-calculadora .modopunta-calculadora__input-precio[type="number"]::placeholder {
	color: rgba( 255, 255, 255, 0.3 );
}

.modopunta-calculadora .modopunta-calculadora__input-precio[type="number"]:focus {
	outline: none;
	background: rgba( 255, 255, 255, 0.13 );
	box-shadow: inset 0 0 0 2px #ffffff;
}

/* --- Precio + botón, apilados ---
   Antes iban lado a lado, pensado para la tarjeta de una sola columna
   ancha. Con el layout de 2 columnas la izquierda quedó fija en 270px, y
   compartir esa fila con el botón dejaba al precio con ~70px reales para
   un número de 6-7 cifras — por eso se cortaba. Apilados, el precio usa
   el ancho completo de la pantalla y el botón queda debajo, ancho completo. */
.modopunta-calculadora__precio-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media ( max-width: 640px ) {
	.modopunta-calculadora .modopunta-calculadora__input-precio[type="number"] {
		font-size: 26px;
	}
}

/* --- Switch (reemplaza el checkbox nativo, sin tocar el HTML) --- */
.modopunta-calculadora__toggle-row {
	margin-top: 20px;
}

.modopunta-calculadora .modopunta-calculadora__toggle-row label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: rgba( 255, 255, 255, 0.85 );
	cursor: pointer;
}

.modopunta-calculadora__toggle-row input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 42px;
	height: 25px;
	flex-shrink: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.22 );
	position: relative;
	cursor: pointer;
	transition: background .15s ease;
}

.modopunta-calculadora__toggle-row input[type="checkbox"]::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #ffffff;
	transition: transform .15s ease;
}

.modopunta-calculadora__toggle-row input[type="checkbox"]:checked {
	background: var(--mp-color-red);
}

.modopunta-calculadora__toggle-row input[type="checkbox"]:checked::before {
	transform: translateX( 17px );
}

/* --- Modo avanzado: chip expandible --- */
.modopunta-calculadora__avanzado {
	margin-top: 24px;
}

.modopunta-calculadora__avanzado summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: rgba( 255, 255, 255, 0.85 );
	padding: 9px 16px;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 999px;
	transition: background .15s ease;
}

.modopunta-calculadora__avanzado summary:hover {
	background: rgba( 255, 255, 255, 0.08 );
}

.modopunta-calculadora__avanzado summary::-webkit-details-marker {
	display: none;
}

.modopunta-calculadora__avanzado[open] summary {
	margin-bottom: 18px;
}

.modopunta-calculadora .modopunta-calculadora__avanzado label {
	display: block;
	font-size: 13px;
	color: rgba( 255, 255, 255, 0.75 );
	margin-bottom: 16px;
}

/* Mismo choque de especificidad que el input de precio: ".mp-prose
   input[type=\"number\"], .mp-prose select" (0,2,1) le ganaba a estas
   reglas cuando coincidían en especificidad y el orden de carga no
   favorecía al plugin. Reforzamos con el wrapper repetido (0,3,1). */
.modopunta-calculadora .modopunta-calculadora__avanzado input[type="number"],
.modopunta-calculadora .modopunta-calculadora__avanzado select {
	display: block;
	width: 100%;
	margin-top: 8px;
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	color: #ffffff;
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-family: var(--mp-font-display);
	box-sizing: border-box;
}

.modopunta-calculadora__avanzado input[type="checkbox"] {
	margin-right: 8px;
}

/* --- Botón "Calcular": el botón grande, con efecto de presionado ---
   El tema trae una regla global ".mp-prose button[type=\"submit\"]"
   (especificidad 0,2,1) que le gana a una clase sola (0,1,0), porque este
   botón vive dentro del layout .mp-prose de la página y es type="submit".
   Reforzamos con el wrapper + el atributo de tipo para quedar en 0,3,0 y
   ganar siempre, sin depender del orden de carga ni de !important. */
.modopunta-calculadora .modopunta-calculadora__btn-calcular[type="submit"] {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-family: var(--mp-font-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .01em;
	background: var(--mp-color-orange);
	color: #ffffff;
	border: none;
	border-radius: var(--mp-radius);
	cursor: pointer;
	box-shadow: 0 6px 20px -4px rgba( 0, 0, 0, 0.55 );
	transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}

.modopunta-calculadora .modopunta-calculadora__btn-calcular[type="submit"]:hover {
	background: var(--mp-color-orange-deep);
	color: #ffffff;
}

/* El aro azul de foco por defecto del navegador desentona con la marca —
   lo reemplazamos por uno blanco, que sigue siendo accesible (visible al
   navegar con teclado) pero está en paleta. */
.modopunta-calculadora .modopunta-calculadora__btn-calcular[type="submit"]:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.modopunta-calculadora .modopunta-calculadora__btn-calcular[type="submit"]:active {
	transform: translateY( 2px );
	box-shadow: 0 2px 6px -2px rgba( 0, 0, 0, 0.4 );
}

/* Estado vacío del panel derecho: ocupa el mismo lugar que el panel de
   resultados hasta que se calcula, para que la columna no quede en blanco
   ni la tarjeta "salte" de tamaño al mostrar el resultado. */
.modopunta-calculadora__resultados-vacio {
	height: 100%;
	min-height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	background: rgba( 255, 255, 255, 0.06 );
	border-radius: var(--mp-radius);
	color: rgba( 255, 255, 255, 0.85 ); /* antes 0.6 — muy poco contraste sobre el navy */
	font-size: 15px;
	line-height: 1.5;
}

/* --- Resultados: panel blanco (máximo contraste posible contra la
   tarjeta navy) con comprador/vendedor lado a lado --- */
.modopunta-calculadora__resultados {
	background: #ffffff;
	border-radius: var(--mp-radius);
	padding: 24px 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	box-shadow: 0 10px 30px -12px rgba( 0, 0, 0, 0.4 );
}

.modopunta-calculadora__resultados > div {
	min-width: 0; /* deja que "Comisión inmobiliaria" etc. puedan achicarse en vez de forzar overflow */
}

/* Bug real: solo "vendedor" tenía padding-left (por el separador), así que
   su columna quedaba ~24px más angosta que la de "comprador" con el mismo
   texto — por eso "Comisión inmobiliaria" envolvía en dos líneas de un
   lado y no del otro. Le doy el mismo recorte a ambos lados para que
   midan igual, y aparte reduzco el inset de 24 a 16px para ganar aire. */
.modopunta-calculadora__resultados > div:first-child {
	padding-right: 16px;
}

.modopunta-calculadora__resultados > div + div {
	border-left: 1px solid var(--mp-color-line);
	padding-left: 16px;
}

@media ( max-width: 640px ) {
	.modopunta-calculadora__resultados {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.modopunta-calculadora__resultados > div:first-child {
		padding-right: 0;
	}

	.modopunta-calculadora__resultados > div + div {
		border-left: none;
		border-top: 1px solid var(--mp-color-line);
		padding-left: 0;
		padding-top: 20px;
	}
}

.modopunta-calculadora__bloque-label {
	font-size: 12px;
	color: var(--mp-color-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 8px;
}

.modopunta-calculadora__bloque-total {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.modopunta-calculadora__bloque-total--comprador {
	color: var(--mp-color-navy);
}

.modopunta-calculadora__bloque-total--vendedor {
	color: var(--mp-color-red-onlight);
}

.modopunta-calculadora__desglose {
	margin-top: 18px;
	font-size: 13px;
	color: var(--mp-color-ink);
}

.modopunta-calculadora__desglose-grupo + .modopunta-calculadora__desglose-grupo {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--mp-color-line);
}

.modopunta-calculadora__desglose-grupo-titulo {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--mp-color-muted);
	margin-bottom: 8px;
}

.modopunta-calculadora__desglose-item {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	color: #45443f; /* antes --mp-color-muted (#6b6b6b) — más oscuro para leer mejor "ITP", "Honorarios", etc. */
}

.modopunta-calculadora__desglose-ayuda {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-left: 4px;
	border-radius: 50%;
	background: var(--mp-color-line);
	color: var(--mp-color-muted);
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	vertical-align: middle;
}

.modopunta-calculadora__desglose-subtotal {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding-top: 6px;
	margin-top: 4px;
	border-top: 1px solid var(--mp-color-line);
	font-weight: 600;
	color: var(--mp-color-ink);
}

.modopunta-calculadora__alerta {
	margin-top: 24px;
	padding: 14px 16px;
	border-left: 3px solid var(--mp-color-orange);
	background: rgba( 255, 106, 26, 0.16 ); /* tinte naranja para que la aclaración de vivienda única se destaque, en vez de casi confundirse con la tarjeta */
	border-radius: 0 8px 8px 0;
	font-size: 13px;
	color: rgba( 255, 255, 255, 0.95 );
}

.modopunta-calculadora__btn-compartir {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 12px 22px;
	background: transparent;
	color: #ffffff;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: var(--mp-radius);
	font-family: var(--mp-font-display);
	font-size: 14px;
	cursor: pointer;
	transition: background .15s ease;
}

.modopunta-calculadora__btn-compartir:hover {
	background: rgba( 255, 255, 255, 0.1 );
}

.modopunta-calculadora__disclaimer {
	margin-top: 32px;
	font-size: 12px;
	color: rgba( 255, 255, 255, 0.75 );
	border-top: 1px solid rgba( 255, 255, 255, 0.15 );
	padding-top: 16px;
}