/* =============================================================================
   j0-jsol-landing.css
   Estilos específicos y sobritura de tokens IPAX para la Landing de JSOL.
   ============================================================================= */

/* ─── DERRAME DE PALETA ESPECÍFICA DE MARCA (IPAX OVERRIDE) ───────────────── */
:root {
	/* Paleta Clara Personalizada para JSOL Landing */
	--j0-absolute-light-paper-x: oklch(100% 0.01 67);
	/* #FFFFFF; */

	/* --j0-absolute-light-paper:    #fdf7f1;  */

	--j0-absolute-light-paper: oklch(98% 0.01 67);
	/* --j0-absolute-light-paper:    #faf0e6; JSON's linen */
	/* #f0f0f0; */

	--j0-absolute-light-accent-p: #d2ff61;
	--j0-absolute-light-accent: #2b7bc4;
	--j0-absolute-light-accent-i: oklch(45% 0.4 200);
	--j0-absolute-light-ink:    #272420;
	  /* #1a1d20; */
	   /* oklch(25% 0.01 67); */

	--j0-absolute-light-ink-x: oklch(10% 0.02 67);
	/* --j0-absolute-light-ink-x:    #000000;	 */
}

BODY {
	background-color: var(--j0-ipax-paper) !important;
}

.j0 h1,
.j0 h2,
.j0 h3,
.j0 h4,
.j0 h5 {
	font-family: var(--j0ui-font-serif);
}

.j0 ul.fs-nav__links{
margin: 0;
}

.j0 SECTION P A{
	text-decoration:underline;
}
.j0 SECTION P A[target="_blank"]::after {
	content: " \2197";
    display: inline-block;
    margin-left: 0.15em;
    font-size: 0.7em;
    vertical-align: super;
    text-decoration: none;
    opacity: 0.7;
}

.j0 PRE.jsol-repl-source-code{
    background: transparent !important;
	border:none;
}

.j0 PRE.jsol-repl-source-code CODE{
	color:var(--jsol-text-muted);
	
	padding:0;
}

[data-theme="dark"] h1 {
	text-shadow: 0 1px 2px black;
}
/* [data-theme="dark"] h2,
[data-theme="dark"] h3, 
[data-theme="dark"] h4 { */

html[data-theme="dark"] {
	--j0-absolute-light-paper: #DAD9D8;
}

:root,
.j0,
HTML {
	--j0ui-font:
		"Bai Jamjuree", system-ui, -apple-system, "Helvetica Neue", sans-serif;

	--j0ui-font-mono: monospace;
	/* , ui-monospace, 'SF Mono', 'Courier New'; */

	--j0ui-font-serif: Georgia, serif;

	--j0ui-size-font-sm: var(--j0-pt-12);
	--j0ui-size-font-ui: var(--j0-pt-14);
	--j0ui-size-font-lg: var(--j0-pt-18);
	--j0ui-size-font-xl: var(--j0-pt-21);
	--j0ui-size-font-2xl: var(--j0-pt-28);
	--j0ui-size-font-3xl: var(--j0-pt-36);
	--j0ui-size-input: 42px;
	--j0ui-size-header: 56px;
	--j0ui-space-sm: 12px;
	--j0ui-space-md: 20px;
	--j0ui-space-lg: 32px;
	--j0ui-success: #40c057;
}

.j0ui-card-body{
	    font-size: var(--j0ui-size-font-sm);

}

html {
	scroll-behavior: smooth;
}


.j0ui-container-wide{
	    max-width: 1044px;
}

TH,
TD {
	/* font-weight: 700; */
	color: var(--j0ui-text-main);
}

/* ─── NAVEGACIÓN PRINCIPAL & BRANDING ───────────────────────────────────────── */
.fs-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--j0ui-space-sm) var(--j0ui-space-md);
	background: var(--j0ui-bg-header);
	border-bottom: 1px solid var(--j0ui-border-window);
	position: sticky;
	top: 0;
	z-index: 1000;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.fs-nav__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--j0ui-text-main);
}

.fs-nav__logo {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.fs-nav__name {
	font-weight: 700;
	font-size: var(--j0ui-size-font-lg);
}

.fs-nav__slogan {
	display: none;
}

@media (min-width: 768px) {
	.fs-nav__slogan {
		display: inline-block;
		padding-left: 12px;
		border-left: 1px solid var(--j0ui-border-subtle);
	}
}

.fs-nav__links {
	display: none;
	gap: var(--j0ui-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.fs-nav__links {
		display: flex;
		align-items: center;
	}
}

.fs-nav__link {
	color: var(--j0ui-text-muted);
	text-decoration: none;
	font-size: var(--j0ui-size-font-sm);
	font-weight: 500;
	transition: color 0.15s;
}

.fs-nav__link:hover {
	color: var(--j0ui-text-main);
}

.fs-nav__controls {
	display: flex;
	align-items: center;
	gap: var(--j0ui-space-sm);
}

.fs-nav__lang-btn {
	background: transparent;
	border: none;
	color: var(--j0ui-text-main);
	font-size: var(--j0ui-size-font-sm);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--j0ui-radius-sm);
}

/* ─── HERO SECTION ──────────────────────────────────────────────────────────── */
.jsol-hero {
	padding: var(--j0-space-2xl) 0 var(--j0-space-xl);
}

.jsol-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--j0-space-xl);
	align-items: center;
}

@media (min-width: 992px) {
	.jsol-hero__grid {
		grid-template-columns: 1.2fr 0.8fr;
	}
}

.jsol-hero__title {
	font-size: var(--j0-pt-36);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: var(--j0-space-md);
}

.jsol-hero__subtitle {
	font-size: var(--j0ui-size-font-lg);
	color: var(--j0ui-text-muted);
	line-height: 1.5;
	margin-bottom: var(--j0-space-lg);
}

.jsol-hero__mascot-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}

.jsol-hero__mascot-img {
	max-width: 100%;
	height: auto;
	max-height: 580px;
	object-fit: contain;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

/* ─── INTERPRETER EMBED WINDOW ───────────────────────────────────────────────── */
#repl{
	margin-top: 1em;
	min-height: .5em;
}

.jsol-interpreter-section {
	padding: var(--j0-space-xl) 0;
}

.jsol-repl-window-frame {
	background: var(--j0ui-bg-window);
	border: 1px solid var(--j0ui-border-window-active);
	border-radius: var(--j0ui-radius);
	box-shadow: var(--j0ui-shadow-window-active);
	overflow: hidden;
	margin-top: var(--j0-space-md);
	position: relative;
}

.jsol-repl-window-frame .jsol-repl-container {
	height: 620px; /* Ancho acotado para integrarlo limpiamente en la landing */
}

/* ─── GRID DE CASOS DE USO Y CARACTERÍSTICAS ───────────────────────────────── */
.jsol-features-section {
	padding: var(--j0-space-2xl) 0;
	background: color-mix(
		in srgb,
		var(--j0ui-core-bg-surface) 95%,
		var(--j0ui-core-text-main) 5%
	);
	border-top: 1px solid var(--j0ui-border-subtle);
	border-bottom: 1px solid var(--j0ui-border-subtle);
}

.jsol-feature-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.jsol-feature-card__icon {
	font-size: 2rem;
	margin-bottom: var(--j0ui-space-sm);
	display: inline-block;
}

/* ─── COMUNIDAD & CONTRIBUCIÓN ───────────────────────────────────────────────── */
.jsol-contrib-section {
	padding: var(--j0-space-2xl) 0;
}

.jsol-contrib-banner {
	padding: var(--j0-space-xl);
	border-radius: var(--j0ui-radius);
	background: var(--j0ui-accent-bg);
	border: 1px solid var(--j0ui-core-accent);
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────────── */
.jsol-footer {
	padding: var(--j0-space-xl) 0;
	border-top: 1px solid var(--j0ui-border-subtle);
	color: var(--j0ui-text-muted);
	font-size: var(--j0ui-size-font-sm);
}

.j0 A {
	text-decoration: none;
}

.j0 .j0ui-btn--primary {
	color: var(--j0-absolute-light-paper);
}

.j0ui-shell-header {
	cursor: default;
}

.j0 h1 {
	letter-spacing: -2px;
	
}
@media (min-width: 769px) {
.j0 h1{
	font-size: var(--j0-pt-48);
}
}

.nobr{
	white-space: nowrap;

}

/* =========================================
   UI TABLES (Responsive & Themed)
   ========================================= */
.j0ui-table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1.5rem;
}

.j0ui-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 0.95rem;
	white-space: normal;
}

.j0ui-table th,
.j0ui-table td {
	padding: 12px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	vertical-align: top;
}

.j0ui-table th {
	font-weight: 600;
	background-color: rgba(255, 255, 255, 0.05);
}

.j0ui-table--striped tbody tr:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.02);
}

/* Modo Claro Override */
html[data-theme="light"] .j0ui-table th,
html[data-theme="light"] .j0ui-table td {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .j0ui-table th {
	background-color: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .j0ui-table--striped tbody tr:nth-child(even) {
	background-color: rgba(0, 0, 0, 0.02);
}

/* =========================================
   REPL FRAME & SWITCH ISOLATION
   ========================================= */
.jsol-repl-window-frame {
	background: var(--jsol-bg);
	border: 1px solid var(--jsol-border);
	border-radius: 6px;
	overflow: hidden;
}

.jsol-repl-window-frame .jsol-repl-shell-header {
	background: var(--jsol-surface);
	color: var(--jsol-text);
	border-bottom: 1px solid var(--jsol-border);
	transition:
		background-color 0.2s,
		color 0.2s;
}

/* 
 * Aislamiento de Animación UI: 
 * Al agregar `html .jsol-repl...` obtenemos especificidad de (0,0,3,1), 
 * que vence a `html[data-theme="light"] .theme-pill` (0,0,2,1) de j0-base.css.
 * De esta forma, la pastilla obedece SÓLO al estado del frame, ignorando el HTML global.
 */

/* FRAME MODO LIGHT */
html .jsol-repl-window-frame[data-theme="light"] .theme-pill {
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.1);
}

html .jsol-repl-window-frame[data-theme="light"] .pill-indicator {
	background: #ffffff;
	transform: translateX(0);
}

html .jsol-repl-window-frame[data-theme="light"] .pill-sun {
	opacity: 1;
	color: #ff9500;
}

html .jsol-repl-window-frame[data-theme="light"] .pill-moon {
	opacity: 0.3;
	color: rgba(0, 0, 0, 0.4);
}

/* FRAME MODO DARK */
html .jsol-repl-window-frame:not([data-theme="light"]) .theme-pill {
	background: var(--j0ui-core-accent, #4a90e2);
	border: 1px solid transparent;
}

html .jsol-repl-window-frame:not([data-theme="light"]) .pill-indicator {
	background: #ffffff;
	transform: translateX(20px);
}

html .jsol-repl-window-frame:not([data-theme="light"]) .pill-sun {
	opacity: 0.35;
	color: rgba(255, 255, 255, 0.8);
}

html .jsol-repl-window-frame:not([data-theme="light"]) .pill-moon {
	opacity: 1;
	color: #ffffff;
}