/**
 * Lomito Inversionista - Capa comun de las calculadoras.
 * Etiquetas de acceso, filtro de /calculadoras/ y un solo diseño para la
 * oferta y la ventana de pago de las cinco calculadoras de pago.
 * Los selectores de la oferta van con «html body» para ganarle a los de cada
 * modulo sin depender del orden en que se cargan.
 */

:root {
	--lmt-calc-verde: var(--lmt-emerald-700, #047857);
	--lmt-calc-pago: #92400e;
}

html[data-lomito-theme="dark"] {
	--lmt-calc-verde: var(--lmt-accent);
	--lmt-calc-pago: #fbbf24;
}

/* ------------------------------------------------------------ Etiquetas */
.lmt-acceso {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--lmt-calc-verde);
	background: color-mix(in srgb, var(--lmt-calc-verde) 12%, transparent);
}

.lmt-acceso--pago {
	color: var(--lmt-calc-pago);
	background: color-mix(in srgb, var(--lmt-calc-pago) 12%, transparent);
}

.lmt-calc-card .lmt-acceso { margin: 2px 0 2px; }
.lmt-vit__texto .lmt-acceso { margin: 0 0 10px; }
.lmt-tool .lmt-acceso { margin: 0 0 6px; }

.lmt-acceso-menu {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 1.5;
	vertical-align: 1px;
	color: var(--lmt-calc-pago);
	background: color-mix(in srgb, var(--lmt-calc-pago) 13%, transparent);
}

.lmt-acceso-linea {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 10px 0 14px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--lmt-text-muted);
}

/* -------------------------------------------------- Filtro de /calculadoras/ */
.lmt-calcfiltro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
}

.lmt-calcfiltro__btn {
	padding: 9px 16px;
	border: 1px solid var(--lmt-border);
	border-radius: 999px;
	background: var(--lmt-surface);
	color: var(--lmt-text);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.lmt-calcfiltro__btn:hover { border-color: var(--lmt-accent); }

.lmt-calcfiltro__btn[aria-pressed="true"] {
	border-color: var(--lmt-calc-verde);
	background: var(--lmt-calc-verde);
	color: #ffffff;
}

html[data-lomito-theme="dark"] .lmt-calcfiltro__btn[aria-pressed="true"] { color: #06251a; }

.lmt-calcfiltro__btn:focus-visible {
	outline: 3px solid var(--lmt-accent);
	outline-offset: 3px;
}

.lmt-calcfiltro__estado {
	margin: 0 0 0 4px;
	font-size: 0.85rem;
	color: var(--lmt-text-muted);
}

.lmt-calc-familia[hidden],
.lmt-calc-card[hidden] { display: none !important; }

/* ------------------------------------------- Oferta de la plantilla (cinco) */
html body :is(.lmt-af-excel, .lmt-cd-excel, .lmt-az-excel, .lmt-cv-excel) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px 32px;
	align-items: center;
	margin: 28px 0 16px;
	padding: clamp(22px, 4vw, 32px);
	border: 1px solid color-mix(in srgb, var(--lmt-accent) 32%, var(--lmt-border));
	border-top: 4px solid var(--lmt-calc-verde);
	border-radius: var(--lmt-radius-lg, 24px);
	background: linear-gradient(180deg, color-mix(in srgb, var(--lmt-accent) 7%, var(--lmt-surface)), var(--lmt-surface) 70%);
	box-shadow: var(--lmt-shadow);
}

@media (min-width: 760px) {
	html body :is(.lmt-af-excel, .lmt-cd-excel, .lmt-az-excel, .lmt-cv-excel) {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}
}

html body :is(.lmt-af-excel, .lmt-cd-excel, .lmt-az-excel, .lmt-cv-excel) > * { min-width: 0; }

html body :is(.lmt-af-excel__k, .lmt-cd-excel__k, .lmt-az-excel__k, .lmt-cv-excel__k) {
	color: var(--lmt-calc-verde);
}

html body :is(.lmt-af-excel__cta, .lmt-cd-excel__cta, .lmt-az-excel__cta, .lmt-cv-excel__cta) {
	display: grid;
	gap: 10px;
	justify-items: start;
	align-content: center;
	padding: 18px 20px;
	border: 1px solid var(--lmt-border);
	border-radius: var(--lmt-radius, 16px);
	background: var(--lmt-bg);
}

/* Precio: la cifra grande y la condicion debajo. */
html body :is(.lmt-af-precio, .lmt-cd-precio, .lmt-az-precio, .lmt-cv-precio) {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--lmt-text-muted);
}

html body :is(.lmt-af-precio, .lmt-cd-precio, .lmt-az-precio, .lmt-cv-precio) strong {
	display: block;
	margin-bottom: 2px;
	font-family: var(--lmt-font-display);
	font-size: 2rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--lmt-text);
}

html body :is(.lmt-af-clip, .lmt-cd-clip, .lmt-az-clip, .lmt-cv-clip) {
	display: inline-block;
	line-height: 0;
	border-radius: 12px;
	transition: transform 0.15s ease, filter 0.15s ease;
}

html body :is(.lmt-af-clip, .lmt-cd-clip, .lmt-az-clip, .lmt-cv-clip):hover { transform: translateY(-1px); filter: brightness(1.04); }

html body :is(.lmt-af-clip, .lmt-cd-clip, .lmt-az-clip, .lmt-cv-clip) img {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
}

html body :is(.lmt-af-clip, .lmt-cd-clip, .lmt-az-clip, .lmt-cv-clip):focus-visible {
	outline: 3px solid var(--lmt-accent);
	outline-offset: 3px;
}

/* Leyenda de «sin devoluciones»: obligatoria junto a cada boton de Clip. */
html body :is(.lmt-af-sinrev, .lmt-cd-sinrev, .lmt-az-sinrev, .lmt-cv-sinrev) {
	margin: 2px 0 0;
	padding-top: 10px;
	border-top: 1px dashed var(--lmt-border);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--lmt-text-muted);
}

html body :is(.lmt-af-sinrev, .lmt-cd-sinrev, .lmt-az-sinrev, .lmt-cv-sinrev) a {
	color: inherit;
	text-decoration: underline;
}

/* ---------------------------------------------- Ventana de pago (cinco) */
html body :is(.lmt-af-gate, .lmt-cd-gate, .lmt-az-gate, .lmt-cv-gate) {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.58);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

html body :is(.lmt-af-gate, .lmt-cd-gate, .lmt-az-gate, .lmt-cv-gate)[hidden] { display: none; }

html body :is(.lmt-af-gate__caja, .lmt-cd-gate__caja, .lmt-az-gate__caja, .lmt-cv-gate__caja) {
	width: min(520px, 100%);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: clamp(22px, 4vw, 32px);
	border: 1px solid var(--lmt-border);
	border-top: 4px solid var(--lmt-calc-verde);
	border-radius: var(--lmt-radius-lg, 24px);
	background: var(--lmt-surface);
	box-shadow: var(--lmt-shadow-lg);
}

html body :is(.lmt-af-gate__caja, .lmt-cd-gate__caja, .lmt-az-gate__caja, .lmt-cv-gate__caja) :is(.lmt-af-precio, .lmt-cd-precio, .lmt-az-precio, .lmt-cv-precio) {
	margin: 4px 0 12px;
}

html body :is(.lmt-af-gate__cerrar, .lmt-cd-gate__cerrar, .lmt-az-gate__cerrar, .lmt-cv-gate__cerrar) {
	display: block;
	margin-top: 16px;
	padding: 10px 18px;
	border: 1px solid var(--lmt-border);
	border-radius: 999px;
	background: transparent;
	color: var(--lmt-text);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

html body :is(.lmt-af-gate__cerrar, .lmt-cd-gate__cerrar, .lmt-az-gate__cerrar, .lmt-cv-gate__cerrar):hover { border-color: var(--lmt-accent); }

html body :is(.lmt-af-gate__cerrar, .lmt-cd-gate__cerrar, .lmt-az-gate__cerrar, .lmt-cv-gate__cerrar):focus-visible {
	outline: 3px solid var(--lmt-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.lmt-calcfiltro__btn,
	html body :is(.lmt-af-clip, .lmt-cd-clip, .lmt-az-clip, .lmt-cv-clip) { transition: none; }
}

/* =========================================================================
   Tanda 2: capa comun de resultados para las 20 calculadoras.
   Solo aplica en paginas de calculadora (clase lmt-es-calc en el body, que
   pone calc-ui.php). No cambia ninguna cuenta: solo como se ven.
   ========================================================================= */
:root {
	--lmt-calc-rojo: #b91c1c;
	--lmt-calc-ambar: #b45309;
}

html[data-lomito-theme="dark"] {
	--lmt-calc-rojo: var(--lmt-down, #f87171);
	--lmt-calc-ambar: #fbbf24;
}

/* Paneles: Interes compuesto no tenia y Enganche usaba otra esquina. */
body.lmt-es-calc :is(.lmt-int-panel, .lmt-eng-panel) {
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--lmt-border);
	border-radius: var(--lmt-radius-lg, 24px);
	background: var(--lmt-surface);
}

/* Resultado principal: la misma caja en todas, con franja verde arriba. */
body.lmt-es-calc :is(.lmt-ret-resultado, .lmt-deu-resultado, .lmt-fb-resultado, .lmt-mm-resultado, .lmt-hu-resultado, .lmt-cd-resultado, .lmt-az-resultado, .lmt-cv-resultado, .lmt-af-resultado, .lmt-int-total, .lmt-fin-total) {
	border: 1px solid var(--lmt-border);
	border-top: 4px solid var(--lmt-calc-verde);
	border-radius: var(--lmt-radius-lg, 24px);
	background: var(--lmt-surface);
	box-shadow: var(--lmt-shadow);
}

/* El total del finiquito se llena al terminar el asistente: vacio no se ve. */
body.lmt-es-calc .lmt-fin-total:empty { display: none; }

/* Cifras: la tipografia de titulos y digitos del mismo ancho en todas. */
body.lmt-es-calc :is(.lmt-ret-resultado__v, .lmt-deu-resultado__v, .lmt-fb-resultado__v, .lmt-mm-resultado__v, .lmt-hu-resultado__v, .lmt-cd-resultado__v, .lmt-az-resultado__v, .lmt-cv-resultado__v, .lmt-af-resultado__valor, .lmt-int-total__v, .lmt-int-mini strong, .lmt-eng-res__v, .lmt-hr__v, .lmt-sc__v, .lmt-fire__v, .lmt-sa__v) {
	font-family: var(--lmt-font-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* Fichas de indicadores con semaforo: mismas esquinas y mismos tres colores. */
body.lmt-es-calc :is(.lmt-hr__m, .lmt-sc__m, .lmt-fire__m, .lmt-sa__m) {
	border-radius: var(--lmt-radius, 16px);
	background: var(--lmt-surface);
}

body.lmt-es-calc :is(.lmt-hr__m--ok, .lmt-sc__m--ok, .lmt-fire__m--ok, .lmt-sa__m--ok) { border-left-color: var(--lmt-calc-verde); }
body.lmt-es-calc :is(.lmt-hr__m--casi, .lmt-sc__m--casi, .lmt-fire__m--casi, .lmt-sa__m--casi) { border-left-color: var(--lmt-calc-ambar); }
body.lmt-es-calc :is(.lmt-hr__m--no, .lmt-sc__m--no, .lmt-fire__m--no, .lmt-sa__m--no) { border-left-color: var(--lmt-calc-rojo); }

/* Te queda en verde, pierdes en rojo. */
body.lmt-es-calc .entry-content .is-up { color: var(--lmt-calc-verde); }
body.lmt-es-calc .entry-content .is-down { color: var(--lmt-calc-rojo); }

/* Tablas: encabezados iguales y cifras alineadas. */
body.lmt-es-calc .entry-content table[class*="-tabla"] thead th {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lmt-text-muted);
	background: transparent;
}

body.lmt-es-calc .entry-content table[class*="-tabla"] td {
	font-variant-numeric: tabular-nums;
}

/* Vitrina de la portada: panel oscuro en las dos modalidades, etiquetas en tonos claros. */
html body .lmt-vit .lmt-acceso--gratis { color: #6ee7b7; background: rgba(110, 231, 183, .14); border-color: rgba(110, 231, 183, .4); }
html body .lmt-vit .lmt-acceso--pago { color: #fbbf24; background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .45); }

/* =========================================================================
   Punto 13: «¿Por qué salió este número?» bajo el resultado (desde la 2.58.0).
   Lo pintan interes.js, millon.js, fire.js, retiro.js y hora.js con lmtExplica().
   ========================================================================= */
body.lmt-es-calc .lmt-explica {
	margin: 16px 0 0;
	padding: 16px 18px;
	border-radius: var(--lmt-radius, 16px);
	border-left: 4px solid var(--lmt-calc-verde, var(--lmt-accent));
	background: var(--lmt-surface-2);
	text-align: left;
}

body.lmt-es-calc .lmt-explica[hidden] { display: none; }

body.lmt-es-calc .lmt-explica__t {
	margin: 0 0 6px;
	font-family: var(--lmt-font-display);
	font-size: .95rem;
	font-weight: 800;
	color: var(--lmt-text);
}

body.lmt-es-calc .lmt-explica__p {
	margin: 6px 0 0;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--lmt-text);
}

body.lmt-es-calc .lmt-explica__p strong {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

body.lmt-es-calc .lmt-explica__p--si {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--lmt-border);
}

body.lmt-es-calc .lmt-explica__si {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--lmt-accent-soft);
	color: #065f46;
	font-size: .78rem;
	font-weight: 800;
}

html[data-lomito-theme="dark"] body.lmt-es-calc .lmt-explica__si { color: #6ee7b7; }


/* =========================================================================
 * Bloque 2 (2.96.x): deslizadores de las 26 calculadoras con zona de toque
 * de 44 px o mas. La especificidad (cuerpo + clase + atributo) gana a las
 * reglas de cada modulo.
 * ====================================================================== */
/* Solo se agranda la zona de toque: el relleno vertical no se pinta porque el
   fondo se recorta a la caja de contenido, asi que la pista que cada modulo
   dibuja (4 a 8 px) sigue igual y el pulgar conserva su tamano y su centro. */
body.lmt-es-calc input[type="range"] { box-sizing: content-box; padding: 20px 0; margin: 0; background-clip: content-box; cursor: pointer; }
body.lmt-es-calc button[class*="chip"], body.lmt-es-calc select { min-height: 44px; }