/* =========================================================
   Calculadora de margen y valor en cuotas de Serie A
   Todo el CSS está limitado a #sa-margen-valor
   ========================================================= */

#sa-margen-valor {
	/* --- Colores: ajusta aquí para encajar con el tema --- */
	--sa-texto: #1b2430;
	--sa-texto-suave: #5b6775;
	--sa-fondo: #ffffff;
	--sa-panel: #f5f7fa;
	--sa-panel-alt: #eef1f6;
	--sa-borde: #dde3ea;
	--sa-borde-fuerte: #c3ccd7;
	--sa-acento: #0b6b4a;
	--sa-acento-oscuro: #08553b;
	--sa-acento-suave: #e6f2ed;
	--sa-positivo: #0b6b4a;
	--sa-positivo-suave: #e6f2ed;
	--sa-negativo: #a3241d;
	--sa-negativo-suave: #fbecea;
	--sa-neutro: #4a5566;
	--sa-neutro-suave: #eef1f6;
	--sa-foco: #0b6b4a;

	/* --- Tipografía --- */
	--sa-familia: inherit;
	--sa-tam-base: 1rem;
	--sa-tam-peq: 0.875rem;
	--sa-tam-mini: 0.8125rem;
	--sa-tam-titulo: 1.5rem;
	--sa-tam-cifra: 1.5rem;
	--sa-peso-fuerte: 700;
	--sa-interlineado: 1.6;

	/* --- Espaciado y formas --- */
	--sa-esp: 1rem;
	--sa-esp-peq: 0.625rem;
	--sa-radio: 10px;
	--sa-radio-peq: 6px;
	--sa-borde-ancho: 1px;

	box-sizing: border-box;
	display: block;
	max-width: 100%;
	overflow-wrap: break-word;
	margin: 2rem 0;
	padding: clamp(1rem, 3vw, 1.75rem);
	border: var(--sa-borde-ancho) solid var(--sa-borde);
	border-radius: var(--sa-radio);
	background-color: var(--sa-fondo);
	color: var(--sa-texto);
	font-family: var(--sa-familia);
	font-size: var(--sa-tam-base);
	line-height: var(--sa-interlineado);
	text-align: left;
}

#sa-margen-valor *,
#sa-margen-valor *::before,
#sa-margen-valor *::after {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

#sa-margen-valor [hidden] {
	display: none;
}

/* ---------- Cabecera ---------- */

#sa-margen-valor .sa-mv__cabecera {
	margin-bottom: var(--sa-esp);
}

#sa-margen-valor .sa-mv__etiqueta {
	display: inline-block;
	margin: 0 0 var(--sa-esp-peq);
	padding: 0.2em 0.7em;
	border-radius: 999px;
	background-color: var(--sa-acento-suave);
	color: var(--sa-acento-oscuro);
	font-size: var(--sa-tam-mini);
	font-weight: var(--sa-peso-fuerte);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#sa-margen-valor .sa-mv__titulo {
	margin: 0 0 var(--sa-esp-peq);
	color: var(--sa-texto);
	font-size: var(--sa-tam-titulo);
	font-weight: var(--sa-peso-fuerte);
	line-height: 1.25;
}

#sa-margen-valor .sa-mv__intro {
	margin: 0;
	color: var(--sa-texto-suave);
	font-size: var(--sa-tam-peq);
}

#sa-margen-valor .sa-mv__intro strong {
	color: var(--sa-texto);
}

/* ---------- Bloque de entrada ---------- */

#sa-margen-valor .sa-mv__entrada {
	padding: var(--sa-esp);
	border: var(--sa-borde-ancho) solid var(--sa-borde);
	border-radius: var(--sa-radio);
	background-color: var(--sa-panel);
}

#sa-margen-valor .sa-mv__grupo {
	margin: 0 0 var(--sa-esp);
	padding: 0;
	border: 0;
	min-width: 0;
}

#sa-margen-valor .sa-mv__legend {
	display: block;
	width: 100%;
	margin: 0 0 var(--sa-esp-peq);
	padding: 0 0 0.35em;
	border-bottom: var(--sa-borde-ancho) solid var(--sa-borde-fuerte);
	color: var(--sa-texto);
	font-size: var(--sa-tam-mini);
	font-weight: var(--sa-peso-fuerte);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Rejillas fluidas: se reorganizan solas, sin depender de media queries */
#sa-margen-valor .sa-mv__rejilla {
	display: grid;
	gap: var(--sa-esp-peq);
	align-items: end;
}

#sa-margen-valor .sa-mv__rejilla--cuatro {
	/* min() evita que el mínimo del track supere el ancho disponible */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

#sa-margen-valor .sa-mv__rejilla--tres {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

#sa-margen-valor .sa-mv__rejilla--dos {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

#sa-margen-valor .sa-mv__campo {
	min-width: 0;
}

#sa-margen-valor .sa-mv__campo-fila {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sa-esp-peq);
	align-items: stretch;
}

#sa-margen-valor .sa-mv__campo-fila .sa-mv__input {
	flex: 1 1 100px;
	min-width: 0;
}

#sa-margen-valor .sa-mv__campo-fila .sa-mv__boton {
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#sa-margen-valor .sa-mv__label {
	display: block;
	margin-bottom: 0.35em;
	color: var(--sa-texto);
	font-size: var(--sa-tam-peq);
	font-weight: var(--sa-peso-fuerte);
	line-height: 1.3;
}

#sa-margen-valor .sa-mv__input,
#sa-margen-valor .sa-mv__select {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0.55em 0.7em;
	border: var(--sa-borde-ancho) solid var(--sa-borde-fuerte);
	border-radius: var(--sa-radio-peq);
	background-color: var(--sa-fondo);
	color: var(--sa-texto);
	font-family: inherit;
	/* 16px evita el zoom automático en iOS */
	font-size: 16px;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
}

#sa-margen-valor .sa-mv__select {
	padding-right: 2em;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.05em top 55%, right 0.7em top 55%;
	background-size: 0.35em 0.35em, 0.35em 0.35em;
	background-repeat: no-repeat;
}

#sa-margen-valor .sa-mv__input:hover,
#sa-margen-valor .sa-mv__select:hover {
	border-color: var(--sa-acento);
}

#sa-margen-valor .sa-mv__ayuda {
	margin: var(--sa-esp-peq) 0 0;
	color: var(--sa-texto-suave);
	font-size: var(--sa-tam-mini);
	line-height: 1.45;
}

/* ---------- Radios ---------- */

#sa-margen-valor .sa-mv__radios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sa-esp-peq);
}

#sa-margen-valor .sa-mv__radio {
	flex: 1 1 56px;
	display: block;
}

#sa-margen-valor .sa-mv__radio input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

#sa-margen-valor .sa-mv__radio label {
	display: block;
	padding: 0.6em 0.6em;
	border: var(--sa-borde-ancho) solid var(--sa-borde-fuerte);
	border-radius: var(--sa-radio-peq);
	background-color: var(--sa-fondo);
	color: var(--sa-texto);
	font-size: var(--sa-tam-peq);
	font-weight: var(--sa-peso-fuerte);
	text-align: center;
	cursor: pointer;
}

#sa-margen-valor .sa-mv__radio input:checked + label {
	border-color: var(--sa-acento);
	background-color: var(--sa-acento);
	color: #ffffff;
}

#sa-margen-valor .sa-mv__radio input:focus-visible + label {
	outline: 3px solid var(--sa-foco);
	outline-offset: 2px;
}

/* ---------- Botones ---------- */

#sa-margen-valor .sa-mv__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sa-esp-peq);
}

#sa-margen-valor .sa-mv__boton {
	display: inline-block;
	padding: 0.6em 1.1em;
	border: var(--sa-borde-ancho) solid var(--sa-borde-fuerte);
	border-radius: var(--sa-radio-peq);
	background-color: var(--sa-fondo);
	color: var(--sa-texto);
	font-family: inherit;
	font-size: var(--sa-tam-peq);
	font-weight: var(--sa-peso-fuerte);
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
}

#sa-margen-valor .sa-mv__boton:hover {
	border-color: var(--sa-acento);
	color: var(--sa-acento-oscuro);
}

#sa-margen-valor .sa-mv__boton--secundario {
	padding: 0.55em 0.8em;
	background-color: var(--sa-panel-alt);
	font-size: var(--sa-tam-mini);
}

#sa-margen-valor button:focus-visible,
#sa-margen-valor input:focus-visible,
#sa-margen-valor select:focus-visible {
	outline: 3px solid var(--sa-foco);
	outline-offset: 2px;
}

/* ---------- Bloque de salida ---------- */

#sa-margen-valor .sa-mv__salida {
	margin-top: var(--sa-esp);
}

#sa-margen-valor .sa-mv__error {
	margin: 0 0 var(--sa-esp-peq);
	padding: 0.7em 0.9em;
	border-left: 4px solid var(--sa-negativo);
	border-radius: var(--sa-radio-peq);
	background-color: var(--sa-negativo-suave);
	color: var(--sa-negativo);
	font-size: var(--sa-tam-peq);
	font-weight: var(--sa-peso-fuerte);
}

#sa-margen-valor .sa-mv__veredicto {
	margin: 0 0 var(--sa-esp);
	padding: 0.85em 1em;
	border-left: 4px solid var(--sa-neutro);
	border-radius: var(--sa-radio-peq);
	background-color: var(--sa-neutro-suave);
	color: var(--sa-texto);
	font-size: var(--sa-tam-peq);
}

#sa-margen-valor .sa-mv__veredicto[data-tono="positivo"] {
	border-left-color: var(--sa-positivo);
	background-color: var(--sa-positivo-suave);
}

#sa-margen-valor .sa-mv__veredicto[data-tono="negativo"] {
	border-left-color: var(--sa-negativo);
	background-color: var(--sa-negativo-suave);
}

/* ---------- Tarjetas de cifras ---------- */

#sa-margen-valor .sa-mv__tarjetas {
	display: grid;
	gap: var(--sa-esp-peq);
	margin: 0 0 var(--sa-esp);
	padding: 0;
}

#sa-margen-valor .sa-mv__tarjetas--tres {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

#sa-margen-valor .sa-mv__tarjetas--cuatro {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

#sa-margen-valor .sa-mv__tarjeta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.35em;
	min-width: 0;
	padding: 0.8em 0.9em;
	border: var(--sa-borde-ancho) solid var(--sa-borde);
	border-radius: var(--sa-radio-peq);
	background-color: var(--sa-panel);
}

#sa-margen-valor .sa-mv__tarjeta-etq {
	display: block;
	margin: 0;
	color: var(--sa-texto-suave);
	font-size: var(--sa-tam-mini);
	font-weight: 400;
	line-height: 1.35;
}

#sa-margen-valor .sa-mv__tarjeta-valor {
	display: block;
	margin: 0;
	color: var(--sa-texto);
	font-size: var(--sa-tam-cifra);
	font-weight: var(--sa-peso-fuerte);
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	overflow-wrap: break-word;
}

#sa-margen-valor .sa-mv__tarjeta-valor[data-tono="positivo"] {
	color: var(--sa-positivo);
}

#sa-margen-valor .sa-mv__tarjeta-valor[data-tono="negativo"] {
	color: var(--sa-negativo);
}

/* ---------- Tabla ---------- */

#sa-margen-valor .sa-mv__tabla-envoltura {
	margin-bottom: var(--sa-esp);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

#sa-margen-valor .sa-mv__tabla {
	width: 100%;
	min-width: 380px;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--sa-tam-peq);
	font-variant-numeric: tabular-nums;
}

#sa-margen-valor .sa-mv__caption {
	margin-bottom: 0.5em;
	color: var(--sa-texto-suave);
	font-size: var(--sa-tam-mini);
	text-align: left;
	caption-side: top;
}

#sa-margen-valor .sa-mv__tabla th,
#sa-margen-valor .sa-mv__tabla td {
	padding: 0.55em 0.6em;
	border-bottom: var(--sa-borde-ancho) solid var(--sa-borde);
	color: var(--sa-texto);
	text-align: right;
	vertical-align: middle;
}

#sa-margen-valor .sa-mv__tabla thead th {
	border-bottom: 2px solid var(--sa-borde-fuerte);
	color: var(--sa-texto-suave);
	font-size: var(--sa-tam-mini);
	font-weight: var(--sa-peso-fuerte);
	white-space: nowrap;
}

#sa-margen-valor .sa-mv__tabla thead th:first-child,
#sa-margen-valor .sa-mv__tabla tbody th {
	text-align: left;
	font-weight: var(--sa-peso-fuerte);
}

#sa-margen-valor .sa-mv__tabla tbody tr[data-activa="si"] {
	background-color: var(--sa-acento-suave);
}

/* ---------- Subtítulo ---------- */

#sa-margen-valor .sa-mv__subtitulo {
	margin: 0 0 var(--sa-esp-peq);
	color: var(--sa-texto);
	font-size: var(--sa-tam-base);
	font-weight: var(--sa-peso-fuerte);
}

/* ---------- Pie ---------- */

#sa-margen-valor .sa-mv__pie {
	margin-top: var(--sa-esp);
	padding-top: var(--sa-esp);
	border-top: var(--sa-borde-ancho) solid var(--sa-borde);
}

#sa-margen-valor .sa-mv__nota {
	margin: 0 0 var(--sa-esp-peq);
	color: var(--sa-texto-suave);
	font-size: var(--sa-tam-mini);
	line-height: 1.5;
}

#sa-margen-valor .sa-mv__nota:last-child {
	margin-bottom: 0;
}

#sa-margen-valor .sa-mv__nota strong {
	color: var(--sa-texto);
}

#sa-margen-valor .sa-mv__nota--aviso {
	padding: 0.7em 0.9em;
	border-radius: var(--sa-radio-peq);
	background-color: var(--sa-panel-alt);
}

/* ---------- Refinamiento cosmético en pantallas anchas ---------- */

@media (min-width: 48em) {
	#sa-margen-valor {
		--sa-tam-cifra: 1.75rem;
	}
}

/* ---------- Preferencias de movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
	#sa-margen-valor *,
	#sa-margen-valor *::before,
	#sa-margen-valor *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}