/* ============================================================================
   compat.css — subconjunto de Bootstrap 3 que el rediseño (custom.css) TODAVÍA usa.
   mx-infonavit nunca estuvo 100% desacoplado de Bootstrap: custom.css le pisó el
   look pero su markup sigue usando la grilla (.row/.col-sm-*/.column/.stacked) que
   antes inyectaba bootstrap.min.css inline desde el head del core.

   Va ANTES de custom.css (mismo orden de cascada que tenía el sitio, donde
   bootstrap.min.css cargaba primero). custom.css pisa donde tiene opinión.

   Clases realmente usadas en el markup (inventariadas): row (158), col-sm-12 (117),
   col-sm-6 (97), column (78), stacked (28), img-responsive (1), container.
   Valores tomados de Bootstrap 3.3 para paridad. Pruning = follow-up.
   ============================================================================ */

/* Imágenes responsive */
.img-responsive { display: block; max-width: 100%; height: auto; }

/* Clearfix (row con hijos float) */
.row::before, .row::after { content: " "; display: table; }
.row::after { clear: both; }

/* Container — base + anchos por breakpoint (Bootstrap 3.3). custom.css le agrega
   fondo/sombra/radius (lo vuelve una "tarjeta" centrada); SIN estos width el
   .container queda full-width y el sitio se ve "muy ancho". */
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* Grilla — float + ancho %. Dentro de .row (custom.css puede volverla flex) el float
   se ignora; en bloque normal las pone lado a lado como hacía Bootstrap. */
.col-sm-6, .col-sm-12, .column {
    position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px;
}
.col-sm-12 { width: 100%; }
@media (min-width: 768px) {
    .col-sm-12 { width: 100%; float: left; }
    .col-sm-6  { width: 50%; float: left; }
}
/* Abajo de 768px las columnas apilan (full width, sin float) — comportamiento col-sm-*. */
@media (max-width: 767px) {
    .col-sm-6, .col-sm-12 { width: 100%; float: none; }
}

/* ===== custom.css (tema Infonavit, portado verbatim de css/custom.css) ===== */

/* =====================================================================
   Mi Portal Infonavit — Tema visual moderno (Inter + paleta Infonavit)
   ===================================================================== */

:root {
	/* Paleta Infonavit */
	--color-primary:      #9e1b31;
	--color-primary-dk:   #7a1325;
	--color-primary-lt:   #b32140;
	--color-primary-grad: linear-gradient(135deg, #b32140 0%, #7a1325 100%);

	--color-navy:         #213d65;
	--color-navy-dk:      #162c4d;
	--color-navy-lt:      #2d4f80;

	--color-accent:       #c5870f;
	--color-accent-dk:    #9a6a0c;

	--color-success:      #2d8a2d;
	--color-success-bg:   #dff0d8;
	--color-warning:      #c5870f;
	--color-warning-bg:   #fcf8e3;
	--color-danger:       #9e1b31;
	--color-danger-bg:    #f2dede;

	/* Neutros */
	--color-bg:           #ffffff;
	--color-surface:      #fafafa;
	--color-surface-alt:  #f0f0f3;
	--color-border:       #e0e0e3;
	--color-border-soft:  #ebebef;
	--color-text:         #2c2c2c;
	--color-text-soft:    #666666;
	--color-text-muted:   #999999;

	/* Sombras (suaves, capas) */
	--shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
	--shadow-sm:  0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
	--shadow-md:  0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
	--shadow-lg:  0 4px 6px rgba(0,0,0,0.04), 0 10px 25px rgba(0,0,0,0.08);
	--shadow-focus: 0 0 0 3px rgba(158,27,49,0.15);

	/* Radios */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;

	/* Transitions */
	--t-fast: 150ms ease;
	--t-med:  250ms ease;

	/* Fuentes */
	--font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */
body {
	overflow-x: clip;
	max-width: 100%;
}
body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-base);
	font-weight: 600;
	color: var(--color-text);
	letter-spacing: -0.01em;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--t-fast);
}
a:hover {
	color: var(--color-primary-dk);
	text-decoration: underline;
}

/* ---------- Container ---------- */
div.container {
	background: var(--color-surface);
	box-shadow: var(--shadow-lg);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

/* ---------- Header ---------- */
#header {
	background: var(--color-surface);
	background-image: none;
	border-bottom: 1px solid var(--color-border-soft);
	box-shadow: var(--shadow-xs);
}

#header #headerContent {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	min-height: 116px;
}

#header #headerContent #logo {
	width: auto;
	margin: 14px 0 14px 28px;
	flex: 0 0 auto;
}

/* Skyline decorativo al extremo derecho — emparejado en altura con el logo (92px) */
.header-skyline {
	display: flex;
	margin-left: auto;
	align-items: flex-end;
	justify-content: flex-start;
	opacity: 0.9;
	overflow: hidden;
	pointer-events: none;
	flex: 0 1 auto;
	min-width: 0;
}
.header-skyline img {
	height: 80px;
	width: auto;
	display: block;
}

/* Badge "Sitio no oficial" — esquina superior derecha del header */
.no-oficial-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border-radius: var(--radius-md);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-navy);
	border: 1px solid rgba(33, 61, 101, 0.22);
	backdrop-filter: blur(4px);
	box-shadow: var(--shadow-xs);
	position: absolute;
	top: 10px;
	right: 18px;
	z-index: 2;
}

.no-oficial-badge svg {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	color: var(--color-accent);
}

.no-oficial-badge strong {
	font-weight: 700;
}

/* Última actualización: fila propia antes del footer, alineada a la derecha */
.last-update-row {
	margin: 18px 0 10px;
}
.last-update-row .col-sm-12 {
	display: flex;
	justify-content: flex-end;
	padding-right: 22px;
}
.last-update-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: var(--radius-md);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.2;
	background: rgba(45, 138, 45, 0.05);
	color: #1e6b1e;
	border: 1px solid rgba(45, 138, 45, 0.18);
}
.last-update-pill svg {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	color: var(--color-success);
}
.last-update-pill strong {
	font-weight: 700;
}

@media (max-width: 680px) {
	.last-update-row .col-sm-12 {
		justify-content: center;
		padding-right: 0;
	}
	.last-update-pill {
		font-size: 11.5px;
		padding: 4px 10px;
	}
}

@media only screen and (max-width: 680px) {
	#header #headerContent {
		gap: 8px;
		padding: 26px 12px 10px 12px;
		min-height: 0;
	}
	#header #headerContent #logo {
		margin: 4px 0;
		flex: 0 0 auto;
	}
	#header #headerContent #logo img {
		max-width: 290px;
		height: auto;
	}
	.header-skyline img {
		height: 62px;
	}
	.no-oficial-badge {
		font-size: 10px;
		padding: 3px 7px;
		gap: 3px;
		line-height: 1.15;
		top: 6px;
		right: 8px;
	}
	.no-oficial-badge svg {
		width: 11px;
		height: 11px;
		flex: 0 0 11px;
	}
	.footer-last-update {
		font-size: 11.5px;
		padding: 5px 10px;
	}
}

/* Pantallas muy angostas: priorizar logo, dejar al skyline solo el espacio que quede */
@media only screen and (max-width: 440px) {
	#header #headerContent #logo img {
		max-width: 220px;
	}
	.header-skyline img {
		height: 52px;
	}
}

#header #headerContent #logo-mobile img {
	margin: auto;
}

@media only screen and (max-width: 680px) {
	#header {
		background: var(--color-surface);
		background-image: none;
	}
}

#header #headerContent #title,
#header #headerContent #title .heading a,
#header #headerContent #subtitle {
	color: var(--color-text);
	font-style: normal;
}

/* ---------- Footer ---------- */
.footer-row {
	margin-top: 24px;
}

#footer {
	background: var(--color-navy);
	padding: 24px 20px;
}

#footer #footerContent .text,
#footer #footerContent .disclaimer,
#footer #footerContent .contact,
#footer #footerContent .contact a,
#footer #footerContent .policies a {
	color: #f7f7f7;
}

#footer #footerContent .disclaimer {
	font-size: 13px;
	opacity: 0.85;
	line-height: 1.5;
	margin-top: 10px;
	margin-bottom: 33px;
}

#footer #footerContent .text {
	padding: 8px 0 0;
}

#footer #footerContent .contact a,
#footer #footerContent .policies a {
	text-decoration: underline;
	opacity: 0.9;
	transition: opacity var(--t-fast);
}
#footer #footerContent .contact a:hover,
#footer #footerContent .policies a:hover {
	opacity: 1;
}

/* Layout */
.footer-row .col-sm-12,
.header-row .col-sm-12 {
	padding: 0;
}

/* ---------- Boxes (cajas de contenido) ---------- */
.container .box {
	background: linear-gradient(135deg, #fafafa 0%, #f0f0f3 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin-top: 0;
	margin-bottom: 20px;
	overflow: hidden;
	transition: box-shadow var(--t-med);
}

/* Cuando un .box viene inmediatamente después de un .boxHeading, sus esquinas
   superiores deben ser cuadradas para conectar visualmente con el heading
   (el heading ya tiene esquinas superiores redondeadas e inferiores cuadradas) */
.container .boxHeading + .box {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: none;
}

.container .box:hover {
	box-shadow: var(--shadow-md);
}

.container .row.box {
	margin-left: 0;
	margin-right: 0;
}

.container .box .text {
	font-size: 15px;
	padding: 18px 22px;
	text-align: left;
	line-height: 1.6;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.container .box .text p {
	text-align: left;
	overflow-wrap: break-word;
}

/* Mantener centrado solo donde tiene sentido (botones, captcha, formulario) */
.container .box .text.centered,
.container .box .controls,
.container .box .form-group.submitter,
.container .box .form-group.captchaimage {
	text-align: center;
}

/* Imágenes nunca rompen el layout */
.container .box .text img {
	max-width: 100%;
	height: auto;
}

/* Tablas anchas: scroll horizontal si el contenido lo requiere */
.container .box .text table {
	max-width: 100%;
}

/* Reserva de altura para evitar CLS en el banner del simulador
   (date('Y') y otros elementos dinámicos cambian altura al cargar). */
.cta-simulador-banner {
	min-height: 147px;
}

/* En mobile, diferenciar por presencia de min-width inline:
   - Tablas CON min-width (anchas): display:block + overflow-x:auto para scroll
     horizontal y scrollbar visible.
   - Tablas SIN min-width (chicas): mantener display:table natural + width 100%
     para que las celdas se distribuyan correctamente y ocupen el ancho. */
@media (max-width: 768px) {
	.container .box .text table {
		width: 100%;
		max-width: 100%;
	}
	.container .box .text table[style*="min-width"] {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Flex items (cols dentro de .row.stacked) tienen min-width: auto por
	   default — eso impide que se achiquen cuando hay tablas anchas adentro.
	   Forzando min-width: 0 permite que el contenido scrollee correctamente. */
	.container .row.stacked > [class*="col-"] {
		min-width: 0;
	}
}

.container ul {
	font-size: 15px;
}

/* Listas no numeradas (bullets ::before en otra regla) */
.container .box .text ul {
	text-align: left;
	margin: 12px 0 8px;
	padding-left: 0;
}

/* Listas numeradas: dejar espacio para que el "1." entre dentro de la caja */
.container .box .text ol {
	text-align: left;
	margin: 12px 0 8px;
	padding-left: 28px;
}

.container .box .text ol li {
	font-size: 15px;
	margin-bottom: 8px;
	line-height: 1.5;
	padding-left: 4px;
}

.container .box .text ul li {
	font-size: 15px;
	margin-bottom: 8px;
	line-height: 1.5;
}

@media (max-width: 600px) {
	.container .box .text {
		padding: 14px 16px;
	}
	.container .box .text ol {
		padding-left: 24px;
	}
}

/* ---------- Box Heading ---------- */
.container .boxHeading {
	background: transparent;
	margin: 0;
	padding: 0;
	border-radius: 0;
}

.container .boxHeading h1,
.container .boxHeading h2 {
	text-align: left;
	background: var(--color-primary-grad);
	color: #fff;
	font-family: var(--font-base);
	font-weight: 600;
	letter-spacing: -0.01em;
	padding: 14px 22px;
	margin: 24px 0 0;
	width: 100%;
	box-sizing: border-box;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: var(--shadow-xs);
}

.container .boxHeading h1 {
	font-size: 22px;
}

.container .boxHeading h2 {
	font-size: 18px;
}

/* Stacked boxes: heading se conecta visualmente al body */
.container .row.stacked-grid .col-sm-6 .boxHeading + .box,
.container .row.stacked-grid .col-sm-12 .boxHeading + .box {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: none;
	margin-bottom: 18px;
}

.container .row.box {
	border: 1px solid var(--color-border);
	background: linear-gradient(135deg, #fafafa 0%, #f0f0f3 100%);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin: 0 0 18px;
	padding: 20px 22px;
}

/* Cuando un .boxHeading es el primer hijo de un col dentro de .row.box,
   romper el padding interno para que el header rojo llegue de borde a borde
   del card visual, igual que cuando va en su row propia. */
.container .row.box > .col-sm-12 > .boxHeading:first-child,
.container .row.box > .column.col-sm-12 > .boxHeading:first-child,
.container .row.box > .col-md-12 > .boxHeading:first-child,
.container .row.box > .column.col-md-12 > .boxHeading:first-child {
	/* Compensa padding del .row.box (20 22) + padding lateral del col Bootstrap (15) */
	margin: -20px -37px 18px -37px;
}

/* En mobile, en vez de extender el boxHeading con margin negativo (que falla
   por el containing block del col en algunos viewports), quitamos el padding
   lateral del .row.box y lo movemos al .text/.box. El boxHeading queda flush
   borde a borde naturalmente sin necesitar márgenes negativos. */
@media (max-width: 767px) {
	.container .row.box {
		padding-left: 0;
		padding-right: 0;
	}
	.container .row.box > [class*="col-"] > .text,
	.container .row.box > [class*="col-"] > .box,
	.container .row.box > [class*="col-"] > p {
		padding-left: 22px;
		padding-right: 22px;
	}
	.container .row.box > .col-sm-12 > .boxHeading:first-child,
	.container .row.box > .column.col-sm-12 > .boxHeading:first-child,
	.container .row.box > .col-md-12 > .boxHeading:first-child,
	.container .row.box > .column.col-md-12 > .boxHeading:first-child {
		margin: -20px 0 18px 0;
	}
}

.container .row.box > [class*="col-"] > .boxHeading:first-child h1,
.container .row.box > [class*="col-"] > .boxHeading:first-child h2 {
	margin: 0;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Fallback para usos antiguos: boxHeading no como primer hijo dentro de .row.box */
.container .row.box .boxHeading:not(:first-child) h1,
.container .row.box .boxHeading:not(:first-child) h2 {
	margin-top: 0;
	margin-bottom: 14px;
	border-radius: var(--radius-md);
}

/* Subheading (h4 dentro de cajas) */
.container .box .subHeading,
.subHeading {
	color: var(--color-navy);
	border-bottom: 2px solid var(--color-navy);
	font-weight: 600;
	padding-bottom: 4px;
	margin: 18px 0 10px;
}

/* ---------- Buttons ---------- */
.container .box .controls .button,
.container .box .text .button,
a.button,
.button {
	background: var(--color-primary-grad);
	color: #fff;
	font-family: var(--font-base);
	font-weight: 600;
	font-size: 14px;
	padding: 11px 22px;
	border-radius: var(--radius-md);
	border: none;
	text-decoration: none;
	display: inline-block;
	box-shadow: var(--shadow-sm);
	transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
	cursor: pointer;
	letter-spacing: 0.01em;
}

.container .box .controls .button:hover,
.container .box .text .button:hover,
a.button:hover,
.button:hover {
	background: linear-gradient(135deg, var(--color-primary-dk) 0%, var(--color-primary) 100%);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.container .box .controls .button.clicked,
.button.clicked {
	cursor: wait;
	opacity: 0.85;
}

/* Botón inline (link estilo botón chico) */
.button[type="inline_link"],
a.button.inline_link {
	background: none;
	color: var(--color-primary);
	padding: 0;
	box-shadow: none;
	font-weight: 600;
	text-decoration: underline;
}
.button[type="inline_link"]:hover {
	background: none;
	color: var(--color-primary-dk);
}

/* ---------- Tablas ---------- */
.infonavit_table {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--color-border);
}

.infonavit_table th {
	background: var(--color-primary);
	font-weight: 600;
	color: #fff;
	text-align: center;
	padding: 12px 10px;
}

.container .infonavit_table tr:nth-of-type(1) td {
	background: var(--color-navy);
	font-weight: 600;
	color: #fff;
	text-align: center;
	padding: 10px;
}

.infonavit_table td {
	padding: 10px 12px;
	border-color: var(--color-border) !important;
}

.infonavit_table td:first-child:not(:only-child) {
	background: var(--color-surface-alt);
	font-weight: 600;
	text-align: center;
}

.infonavit_table td.ticked,
.infonavit_table td.unticked {
	text-align: center;
	vertical-align: middle;
}

.infonavit_table td.ticked {
	background: var(--color-success-bg);
}

.infonavit_table td.unticked {
	background: var(--color-danger-bg);
}

table.table-hover td {
	text-align: center;
	border: 1px solid var(--color-border);
}

table.table-hover td.toLeft {
	text-align: left;
	padding-left: 16px;
}

table.table-striped tbody tr:nth-of-type(odd) {
	background: var(--color-surface-alt);
}

/* ---------- Forms ---------- */
.form-control {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 9px 12px;
	font-family: var(--font-base);
	font-size: 14px;
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-control:focus {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-focus);
	outline: none;
}

.form-group {
	margin-bottom: 14px;
}

.form-group .control-label {
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 6px;
}

#formHolder .control-label {
	text-align: center;
}

.form-group.submitter {
	margin-bottom: 5px;
	margin-top: 18px;
	text-align: center;
}

/* Validación */
.has-error .form-control {
	border-color: var(--color-danger);
}

.has-error .text-danger {
	color: var(--color-danger);
	font-size: 12px;
	font-weight: 500;
	display: block;
	margin-top: 4px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Date input (día/mes/año) */
div.dateInput {
	width: 33%;
	float: left;
	padding: 0 3px;
}

@media only screen and (min-width: 680px) {
	div.form-top-text {
		border-bottom: 1px solid var(--color-border);
		margin-bottom: 12px;
		padding-bottom: 6px;
	}
}

div.form-top-text p {
	margin: 0;
}

/* Captcha */
form .captchaImageHolder {
	width: 200px;
	height: 50px;
	position: relative;
	margin: 0 auto;
}

form .refreshCaptcha {
	position: absolute;
	right: 11px;
	top: 17px;
	line-height: 17px;
	display: none;
	cursor: pointer;
}

.box form .captcha {
	margin: 0 auto;
}

.box form .captcha.loaded {
	height: 58px;
}

form .button-spinner {
	margin-left: 5px;
}

/* External link helpers */
.externalLink {
	font-size: 12px;
	text-align: left;
	font-style: italic;
	color: var(--color-text-muted);
	line-height: 24px;
}

.externalLink a {
	font-style: normal;
}

/* ---------- Verificador T100 destacado en /vivienda-para-el-bienestar ---------- */
.t100-checker-featured {
	border: 2px solid var(--color-primary) !important;
	background: linear-gradient(135deg, rgba(158,27,49,0.03), rgba(197,135,15,0.05)) !important;
	box-shadow: 0 4px 20px rgba(158,27,49,0.10) !important;
}
.t100-checker-featured .boxHeading h2 {
	background: var(--color-primary-grad);
}

/* ---------- Mini calculadoras de cada página de crédito ---------- */
.mc-row {
	margin-bottom: 14px;
}
.mc-row label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--color-text);
	font-size: 14px;
}
.mc-row input,
.mc-row select {
	width: 100%;
	padding: 10px 12px;
	font-family: var(--font-base);
	font-size: 15px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mc-row input:focus,
.mc-row select:focus {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-focus);
	outline: none;
}
.mc-help {
	font-size: 12px;
	color: var(--color-text-soft);
	margin-top: 4px;
	font-style: italic;
}
.mc-result {
	margin-top: 16px;
	padding: 18px 20px;
	border-radius: var(--radius-lg);
	background: var(--color-surface-alt);
	border-left: 4px solid var(--color-primary);
	font-size: 15px;
	line-height: 1.6;
}
.mc-result.ok {
	background: var(--color-success-bg);
	border-left-color: var(--color-success);
}
.mc-result.warn {
	background: var(--color-warning-bg);
	border-left-color: var(--color-warning);
}
.mc-result.bad {
	background: var(--color-danger-bg);
	border-left-color: var(--color-danger);
}
.mc-result h4 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
}
.mc-result .mc-amount {
	font-size: 28px;
	font-weight: 700;
	color: var(--color-primary);
	margin: 6px 0;
}
.mc-result.ok .mc-amount { color: var(--color-success); }
.mc-result .mc-note {
	font-size: 12px;
	color: var(--color-text-soft);
	font-style: italic;
	margin-top: 8px;
}
#conyugal-calc, #familiar-calc, #segundo-calc, #independiente-calc {
	max-width: 540px;
	margin: 12px 0;
}

/* Stacked rows: el comportamiento flex+equal-heights ahora viene de core/css/main.css */

/* ---------- Cards comparativos de modelos (clásico vs T100) ---------- */
.modelos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 18px 0 8px;
}
.modelo-card {
	background: var(--color-surface-alt);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.modelo-card.t100 {
	border-color: var(--color-primary);
	background: linear-gradient(135deg, rgba(158,27,49,0.04), rgba(197,135,15,0.04));
}
.modelo-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

/* Cuando la card es link (clickeable), hover lift como el banner */
.modelo-card.modelo-link {
	text-decoration: none;
	color: var(--color-text);
	cursor: pointer;
	transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
	box-shadow: var(--shadow-sm);
}
.modelo-card.modelo-link:hover {
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-navy);
}
.modelo-card.modelo-link.t100:hover {
	border-color: var(--color-primary-dk);
}

.modelo-badge {
	display: inline-block;
	width: fit-content;
	padding: 4px 10px;
	border-radius: var(--radius-md);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.modelo-badge.classic {
	background: var(--color-navy);
	color: #fff;
}
.modelo-badge.new {
	background: var(--color-primary-grad);
	color: #fff;
}
.modelo-pts {
	font-size: 28px;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 4px 0 8px;
}
.modelo-card.t100 .modelo-pts {
	color: var(--color-primary);
}
.modelo-cta {
	font-size: 12.5px;
	color: var(--color-text-soft);
	font-style: italic;
}
.modelo-cta-link {
	display: inline-block;
	margin-top: 8px;
	color: var(--color-navy);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: 0.01em;
}
.modelo-card.t100 .modelo-cta-link {
	color: var(--color-primary);
}
.modelo-card.modelo-link:hover .modelo-cta-link {
	text-decoration: underline;
}

/* ---------- Stepper (cuanto-debo, cuanto-ahorro) ---------- */
.container .box ul.stepper .controls {
	padding: 18px 0;
}

ul.stepper .step.active::before,
ul.stepper .step.done::before {
	background-color: var(--color-success);
}

.explain-box {
	background: var(--color-surface-alt);
	border-left: 3px solid var(--color-primary);
	padding: 14px 18px;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin: 8px 0;
}

/* ---------- Alerts / Callouts ---------- */
.bs-callout {
	margin: 0 0 14px;
	padding: 18px 20px;
	border-left: 4px solid var(--color-border);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	background: var(--color-surface-alt);
}

.bs-callout-danger {
	background: var(--color-danger-bg);
	border-left-color: var(--color-danger);
	border: 1px solid #f5d0d0;
	border-left-width: 4px;
}

.bs-callout-success {
	background: var(--color-success-bg);
	border-left-color: var(--color-success);
}

.bs-callout-danger h4 {
	color: var(--color-danger);
	text-align: left;
	margin-top: 0;
}

/* Alerts como cards: padding propio, border-left de color, separados del borde */
.alert-success,
.alert-warning,
.alert-danger,
.container .box .text ul.alert-success,
.container .box .text ul.alert-warning,
.container .box .text ul.alert-danger {
	padding: 12px 16px;
	margin: 10px 4px;
	border-radius: var(--radius-md);
	border-left: 4px solid;
	list-style: none;
}

.alert-success,
.container .box .text ul.alert-success {
	background: var(--color-success-bg);
	color: var(--color-success);
	border-left-color: var(--color-success);
}

.alert-warning,
.container .box .text ul.alert-warning {
	background: var(--color-warning-bg);
	color: var(--color-warning);
	border-left-color: var(--color-warning);
}

.alert-danger,
.container .box .text ul.alert-danger {
	background: var(--color-danger-bg);
	color: var(--color-danger);
	border-left-color: var(--color-danger);
}

.alert-success li,
.alert-warning li,
.alert-danger li,
.container .box .text ul.alert-success li,
.container .box .text ul.alert-warning li,
.container .box .text ul.alert-danger li {
	list-style: none;
	padding-left: 24px;
	position: relative;
	background: none !important;
	background-image: none !important;
	line-height: 1.55;
	margin-bottom: 4px;
}

.alert-success li:last-child,
.alert-warning li:last-child,
.alert-danger li:last-child {
	margin-bottom: 0;
}

.alert-success li::before {
	content: "✓";
	position: absolute;
	left: 2px;
	top: 0;
	font-weight: 700;
	color: var(--color-success);
	font-size: 15px;
	line-height: 1.55;
}

.alert-warning li::before {
	content: "•";
	position: absolute;
	left: 4px;
	top: -2px;
	font-weight: 700;
	color: var(--color-warning);
	font-size: 22px;
	line-height: 1.4;
}

.alert-danger li::before {
	content: "✗";
	position: absolute;
	left: 2px;
	top: 0;
	font-weight: 700;
	color: var(--color-danger);
	font-size: 15px;
	line-height: 1.55;
}

/* Top message bar */
.top_message {
	text-align: center;
	margin-top: 10px;
}

.top_message span {
	line-height: 27px;
}

.top_message .alert {
	margin: 0;
	padding: 10px 15px;
	border-radius: var(--radius-md);
}

.top_message a {
	white-space: nowrap;
}

/* ---------- Listas con bullets de color (override del core/main.css) ---------- */
ul.positive,
ul.negative,
ul.neutral,
.container .box .text ul.positive,
.container .box .text ul.negative,
.container .box .text ul.neutral {
	list-style: none;
	padding-left: 4px;
	margin-left: 0;
}

/* Anula los background-image PNG del core/main.css y reemplaza por ::before */
ul.positive li,
ul li.positive,
ul.negative li,
ul li.negative,
ul.neutral li,
ul li.neutral,
.container .box .text ul.positive li,
.container .box .text ul.negative li,
.container .box .text ul.neutral li {
	background: none !important;
	background-image: none !important;
	padding: 0 0 0 26px !important;
	position: relative;
	list-style: none;
}

ul.positive li::before,
ul li.positive::before {
	content: "✓";
	color: var(--color-success);
	position: absolute;
	left: 4px;
	top: 0;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.5;
}

ul.negative li::before,
ul li.negative::before {
	content: "✗";
	color: var(--color-danger);
	position: absolute;
	left: 4px;
	top: 0;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.5;
}

ul.neutral li::before,
ul li.neutral::before {
	content: "•";
	color: var(--color-navy);
	position: absolute;
	left: 4px;
	top: 0;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
}

/* ---------- Ext-link (cajas verdes con botón) ---------- */
.ext-link {
	background: var(--color-success);
	border-radius: var(--radius-md);
	color: #fff;
	padding: 0.5em 0.8em;
	text-decoration: none;
	margin-left: 5px;
	transition: background var(--t-fast);
}

.ext-link:focus,
.ext-link:hover {
	background: #1f6b1f;
	color: #fff;
	text-decoration: none;
}

/* ---------- Bolded helper ---------- */
.bolded {
	font-weight: 600;
}

.centered {
	text-align: center;
}

.info-source {
	font-style: italic;
	font-size: 12px;
	color: var(--color-text-muted);
}

/* ---------- Cleanup elementos viejos no usados ---------- */
.col_central h1,
.col_central h2 {
	display: none;
}

.col_central br {
	display: none;
}

.col_central br:nth-of-type(1) {
	display: inline;
}

.col_central input:focus {
	outline: none;
}

td.ui-panelgrid-cell,
.ui-panelgrid .ui-panelgrid-cell,
.ui-panelgrid-cell td,
.ui-panelgrid td {
	border: none !important;
}

.ui-widget-content {
	border: none !important;
}

.ui-panelgrid-even {
	background: var(--color-surface-alt);
}

.ui-panelgrid-even:nth-of-type(1) {
	background: none;
}

.margen_izq,
.margen_der {
	display: none;
}

.point-msj.OK2 input {
	border: none;
	background: none;
}

.rounded_fancy {
	text-align: center;
}

.rounded_fancy img {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	margin: 0 auto;
}

#points-detail {
	padding: 0 10px;
}

.container .box .text.checar-puntos-text-bottom {
	font-size: 14px;
	border-top: 1px solid var(--color-border);
}