/* ════════════════════════════════════════════════════════════════════════
   STELLA NOVA · BASE
   Reset mínimo, elementos base, prosa de lectura y el chasis del
   sitio-documentación: campo + raíl de navegación + barra de control +
   hojas de papel. El ritmo vertical respeta la grilla de línea base.
   ════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: var(--sn-fs-root);
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--sn-header-h) + var(--sn-s-5));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--sn-font-text);
	font-size: var(--sn-fs-base);
	line-height: var(--sn-leading);
	color: var(--sn-ink);
	background: var(--sn-field);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1;
}

/* Sin transición durante el cambio de tema. Chromium congela un color/fondo
   respaldado por un token cuando éste cambia al conmutar el atributo de un
   ancestro y la propiedad tiene `transition`. Suprimimos toda transición
   mientras el atributo [data-sn-theme] cambia (clase efímera desde site.js). */
html.sn-theming,
html.sn-theming *,
html.sn-theming *::before,
html.sn-theming *::after { transition: none !important; }

/* Grano sutil del campo */
body::before {
	content: "";
	position: fixed; inset: 0;
	pointer-events: none; z-index: 0;
	opacity: var(--sn-field-grain);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--sn-nova-wash); }

/* Foco visible global (WCAG): aro carmín, nunca sólo color */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sn-focus-border);
	outline-offset: 2px;
	border-radius: var(--sn-radius-s);
}

/* ── Skip link ──────────────────────────────────────────────────── */
.sn-skip {
	position: fixed; top: var(--sn-s-2); left: var(--sn-s-2); z-index: var(--sn-z-skip);
	background: var(--sn-paper); color: var(--sn-ink); border: var(--sn-hair);
	padding: var(--sn-s-2) var(--sn-s-4); border-radius: var(--sn-radius);
	transform: translateY(-200%);
}
.sn-skip:focus { transform: none; }


/* ════════════════════════════════════════════════════════════════════════
   CHASIS DEL DOCUMENTO — campo · raíl · barra · contenido
   ════════════════════════════════════════════════════════════════════════ */
.sn-doc {
	position: relative; z-index: 1;
	display: grid;
	grid-template-columns: 16.5rem minmax(0, 1fr);
	max-width: var(--sn-shell);
	margin-inline: auto;
	gap: var(--sn-s-6);
	padding-inline: var(--sn-s-5);
}
@media (max-width: 62rem) {
	.sn-doc { grid-template-columns: 1fr; gap: 0; }
}

/* ── Raíl de navegación (sticky) ────────────────────────────────── */
.sn-rail {
	position: sticky; top: 0; align-self: start;
	height: 100vh; overflow-y: auto;
	padding: var(--sn-s-6) 0 var(--sn-s-7);
	scrollbar-width: thin;
}
@media (max-width: 62rem) {
	.sn-rail {
		position: static; height: auto;
		border-bottom: var(--sn-hair);
		padding-bottom: var(--sn-s-4);
	}
}

.sn-brand { display: flex; align-items: center; gap: var(--sn-s-3); color: var(--sn-ink); text-decoration: none; margin-bottom: var(--sn-s-2); }
.sn-iso { width: 2.8rem; height: 2.8rem; color: var(--sn-nova); flex: none; }
.sn-iso .sn-i-line { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.sn-iso .sn-i-star { fill: currentColor; }
.sn-brand-text { display: flex; flex-direction: column; line-height: 1.06; }
.sn-brand-text b { font-family: var(--sn-font-serif); font-weight: 600; font-size: var(--sn-fs-lg); letter-spacing: .005em; }
.sn-brand-text span { font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); letter-spacing: .14em; text-transform: uppercase; }

.sn-nav { margin-top: var(--sn-s-5); display: flex; flex-direction: column; gap: 1px; }
.sn-nav a {
	display: flex; align-items: baseline; gap: var(--sn-s-2);
	padding: var(--sn-s-2) var(--sn-s-3);
	color: var(--sn-ink-soft); text-decoration: none;
	font-size: var(--sn-fs-sm); border-radius: var(--sn-radius);
	border-left: 2px solid transparent; margin-left: -2px;
	transition: color var(--sn-dur-1), background var(--sn-dur-1);
}
.sn-nav a .n { font-family: var(--sn-font-mono); font-size: var(--sn-fs-xs); color: var(--sn-ink-faint); min-width: 1.6em; }
.sn-nav a:hover { color: var(--sn-ink); background: var(--sn-sunk); }
.sn-nav a.is-active { color: var(--sn-ink); border-left-color: var(--sn-nova); font-weight: 600; }
.sn-nav a.is-active .n { color: var(--sn-nova); }

.sn-rail-foot { margin-top: var(--sn-s-5); padding: var(--sn-s-3); font-size: var(--sn-fs-xs); color: var(--sn-ink-faint); line-height: 1.5; }


/* ── Columna de contenido ───────────────────────────────────────── */
.sn-main { min-width: 0; padding-block: var(--sn-s-5) var(--sn-s-8); }

/* Barra de control (preferencias en vivo) — sticky en la cima */
.sn-controlbar {
	position: sticky; top: var(--sn-s-4); z-index: var(--sn-z-header);
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-s-2);
	padding: var(--sn-s-2);
	background: color-mix(in oklab, var(--sn-paper) 86%, transparent);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border: var(--sn-hair); border-radius: var(--sn-radius-l);
	box-shadow: var(--sn-lift-soft);
	margin-bottom: var(--sn-s-6);
}
.sn-controlbar .grp { display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--sn-sunk); border-radius: var(--sn-radius); }
.sn-controlbar .grp-label { font-size: var(--sn-fs-xs); color: var(--sn-ink-faint); text-transform: uppercase; letter-spacing: .1em; padding-inline: var(--sn-s-2) var(--sn-s-1); }
.sn-seg {
	font: inherit; font-size: var(--sn-fs-xs); font-weight: 600;
	padding: .3rem .5rem; border: 0; background: transparent; color: var(--sn-ink-soft);
	border-radius: calc(var(--sn-radius) - 1px); cursor: pointer; white-space: nowrap;
	transition: background var(--sn-dur-1), color var(--sn-dur-1);
}
.sn-seg:hover { color: var(--sn-ink); }
.sn-seg[aria-pressed="true"], .sn-seg.is-active { background: var(--sn-paper); color: var(--sn-ink); box-shadow: var(--sn-lift-soft); }
.sn-trio-select {
	font: inherit; font-size: var(--sn-fs-xs); font-weight: 600;
	height: 2rem; padding: 0 1.6rem 0 .5rem; color: var(--sn-ink);
	background: var(--sn-paper); border: 1px solid var(--sn-field-border);
	border-radius: var(--sn-radius); cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23968c7c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .4rem center; background-size: .8rem;
}


/* ════════════════════════════════════════════════════════════════════════
   HOJA DE PAPEL — el contenedor editorial de cada sección
   ════════════════════════════════════════════════════════════════════════ */
.sn-sheet {
	background: var(--sn-paper);
	border: 1px solid var(--sn-paper-edge);
	border-radius: var(--sn-radius-paper);
	box-shadow: var(--sn-lift-paper);
	padding: var(--sn-s-6) var(--sn-s-6) var(--sn-s-7);
	margin-bottom: var(--sn-s-6);
	scroll-margin-top: calc(var(--sn-header-h) + var(--sn-s-5));
}
@media (max-width: 40rem) { .sn-sheet { padding: var(--sn-s-5) var(--sn-s-4); } }

.sn-sheet-head { margin-bottom: var(--sn-baseline); }
.sn-kicker {
	font-family: var(--sn-font-mono); font-size: var(--sn-fs-xs);
	text-transform: uppercase; letter-spacing: .16em;
	color: var(--sn-nova); font-weight: 600;
	display: flex; align-items: center; gap: var(--sn-s-2);
}
.sn-kicker::before { content: ""; width: 1.4rem; height: 1px; background: var(--sn-nova); }

/* ── Prosa editorial — todo en la grilla ────────────────────────── */
.sn-prose { max-width: var(--sn-measure); }

h1, h2, h3, h4 { font-family: var(--sn-font-display); text-wrap: balance; }

.sn-title {
	font-weight: 500; font-size: var(--sn-fs-page-title);
	line-height: var(--sn-baseline-2); margin: var(--sn-s-2) 0 var(--sn-baseline);
	letter-spacing: -.014em;
}
.sn-title .dot { color: var(--sn-nova); }
.sn-lead { color: var(--sn-ink-soft); font-size: var(--sn-fs-md); line-height: var(--sn-baseline); margin: 0 0 var(--sn-baseline); max-width: 46rem; text-wrap: pretty; }

.sn-prose h2 {
	font-weight: 600; font-size: var(--sn-fs-xl); line-height: var(--sn-baseline-2);
	margin: var(--sn-baseline-2) 0 var(--sn-baseline);
	padding-bottom: calc(var(--sn-baseline) - 1.4rem);
	border-bottom: var(--sn-hair); letter-spacing: -.01em;
}
.sn-prose h3 { font-weight: 600; font-size: var(--sn-fs-lg); line-height: var(--sn-baseline); margin: var(--sn-baseline-2) 0 var(--sn-s-2); }
.sn-prose h4 { font-weight: 600; font-size: var(--sn-fs-md); line-height: var(--sn-baseline); margin: var(--sn-baseline) 0 0; color: var(--sn-ink-soft); }
.sn-prose p { margin: 0 0 var(--sn-baseline); text-wrap: pretty; }
.sn-prose ul, .sn-prose ol { margin: 0 0 var(--sn-baseline); padding-left: var(--sn-s-5); }
.sn-prose li { line-height: var(--sn-baseline); margin: 0 0 var(--sn-s-1); }
.sn-prose strong { font-weight: 700; }
.sn-prose em { font-style: italic; }
.sn-prose small { font-size: var(--sn-fs-sm); color: var(--sn-ink-soft); }
.sn-prose hr { border: 0; border-top: var(--sn-hair); margin: var(--sn-baseline) 0; }

/* Enlaces de prosa */
.sn-prose a, a.sn-link { color: var(--sn-link); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--sn-link) 35%, transparent); }
.sn-prose a:hover, a.sn-link:hover { color: var(--sn-link-hover); border-bottom-color: var(--sn-link-hover); }

/* Cita — voz serif */
.sn-prose blockquote {
	font-family: var(--sn-font-quote); font-style: italic;
	font-size: var(--sn-fs-md); line-height: var(--sn-baseline);
	margin: var(--sn-baseline) 0; padding-left: var(--sn-s-5);
	border-left: 3px solid var(--sn-nova); color: var(--sn-ink);
}
.sn-prose blockquote cite { display: block; font-style: normal; font-family: var(--sn-font-text); font-size: var(--sn-fs-sm); color: var(--sn-ink-soft); margin-top: var(--sn-s-2); }

/* Código */
code, kbd, samp { font-family: var(--sn-font-mono); }
.sn-prose code, code.sn-code {
	font-size: .9em; background: var(--sn-sunk); padding: .1em .38em;
	border-radius: var(--sn-radius-s); border: 1px solid var(--sn-hairline-soft);
}
kbd.sn-kbd {
	font-family: var(--sn-font-mono); font-size: .82em; padding: .12em .45em;
	background: var(--sn-paper); border: 1px solid var(--sn-hairline);
	border-bottom-width: 2px; border-radius: var(--sn-radius-s); color: var(--sn-ink);
}
pre.sn-pre {
	font-family: var(--sn-font-mono); font-size: var(--sn-fs-sm);
	line-height: 1.55; margin: var(--sn-baseline) 0;
	background: var(--sn-sunk); border: var(--sn-hair); border-left: 3px solid var(--sn-hairline);
	border-radius: var(--sn-radius); padding: var(--sn-s-3) var(--sn-s-4); overflow-x: auto;
	color: var(--sn-ink);
}
pre.sn-pre code { background: none; border: 0; padding: 0; font-size: 1em; }
.sn-pre .c-key { color: var(--sn-nova); }
.sn-pre .c-com { color: var(--sn-ink-faint); font-style: italic; }
.sn-pre .c-str { color: var(--sn-ok); }
.sn-pre .c-var { color: var(--sn-link); }


/* ── Andamiaje editorial reutilizable ───────────────────────────── */
.sn-label { font-family: var(--sn-font-mono); font-size: var(--sn-fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--sn-ink-faint); font-weight: 600; }
.sn-rule-label { display: flex; align-items: center; gap: var(--sn-s-3); margin: var(--sn-baseline) 0 var(--sn-s-3); }
.sn-rule-label::after { content: ""; flex: 1; border-top: var(--sn-hair); }
.sn-rule-label .sn-label { white-space: nowrap; }

/* Nota al margen / aclaración */
.sn-aside-note {
	font-size: var(--sn-fs-sm); color: var(--sn-ink-soft);
	border-left: 2px solid var(--sn-hairline); padding-left: var(--sn-s-4);
	margin: var(--sn-baseline) 0;
}

/* Rejilla de "demo" — superficie hundida donde se muestran componentes vivos */
.sn-demo {
	background: var(--sn-sunk);
	border: var(--sn-hair);
	border-radius: var(--sn-radius);
	padding: var(--sn-s-5);
	margin: var(--sn-s-3) 0 var(--sn-baseline);
}
.sn-demo.is-row { display: flex; flex-wrap: wrap; gap: var(--sn-s-4); align-items: center; }
.sn-demo.is-grid { display: grid; gap: var(--sn-s-4); }

/* Par demo + código */
.sn-figure { margin: var(--sn-s-3) 0 var(--sn-baseline); }
.sn-figure .sn-demo { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sn-figure pre.sn-pre { margin: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }