/* tecnoLSM · capa de marca para «Electricidad y electrónica básicas en 3D»
   Adaptación de Electronics 101 (Dilum Sanjaya) — CC BY-NC-SA 4.0.
   Se carga DESPUÉS de assets/index-*.css. No toca lógica ni contenido de la app.
   Temas: claro (por defecto, papel) y oscuro (identidad). Conmutador en la barra lateral. */

/* ---------- Tipografías del brand (autohospedadas) ---------- */
@font-face{font-family:'Space Grotesk';src:url('fonts-brand/SpaceGrotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts-brand/SpaceGrotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts-brand/SpaceGrotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts-brand/SpaceGrotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts-brand/DMSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts-brand/DMSans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts-brand/DMSans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts-brand/DMSans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts-brand/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts-brand/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts-brand/IBMPlexMono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tema claro (por defecto) ---------- */
html[data-theme="light"]{
  color-scheme:light;
  /* tokens canónicos brand · variante clara */
  --ls-accent:#005F6C; --ls-craft:#8F4700; --ls-ok:#006129; --ls-warn:#764C00; --ls-danger:#9E2225;
  --ls-chip:#071523; --ls-chip-ink:#F1EEE6;
  --ls-shadow:0 1px 2px rgb(7 21 35 / .06), 0 8px 20px rgb(7 21 35 / .10);
  /* remapeo de las variables de la app */
  --bg:#F1EEE6; --bg-deep:#E9E4D8; --sidebar:#EAE6DC; --card:#FAF8F4;
  --card-soft:rgba(250,248,244,.97); --code-bg:#F5F2EA;
  --line:#7D9199; --line-soft:#D6D0C4;
  --navy:#071523; --navy-2:#1E3145;
  --ink:#13212D; --muted:#2E3F4F; --faint:#56666E;
  --teal:#005F6C; --teal-deep:#0B5563;
  --trace:#C9C2B4; --track:#E3DED1;
  --kw:#0B4A6F; --fn:#8F4700; --gutter:#5F6E78;
  --sans:'DM Sans',system-ui,sans-serif;
  --cond:'Space Grotesk','DM Sans',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---------- Tema oscuro ---------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --ls-accent:#00D0E2; --ls-craft:#E28D4F; --ls-ok:#5BBD74; --ls-warn:#E3AE28; --ls-danger:#F3625D;
  --ls-chip:#102032; --ls-chip-ink:#D7ECF4;
  --ls-shadow:0 1px 2px rgb(3 7 17 / .45), 0 8px 24px rgb(3 7 17 / .38);
  --bg:#030711; --bg-deep:#02050C; --sidebar:#071120; --card:#091423;
  --card-soft:rgba(9,20,35,.97); --code-bg:#0C1A2A;
  --line:#4E6C86; --line-soft:#223649;
  --navy:#E4F2F8; --navy-2:#C6DEE9;
  --ink:#D7ECF4; --muted:#9BB6C3; --faint:#8AA6B4;
  --teal:#00D0E2; --teal-deep:#5FD5E3;
  --trace:#2B4257; --track:#16273A;
  --kw:#8CBCFF; --fn:#E28D4F; --gutter:#7C96A4;
  --sans:'DM Sans',system-ui,sans-serif;
  --cond:'Space Grotesk','DM Sans',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* El halo de papel del autor (rgba(255,250,240,.55)) convierte el lienzo en una
   niebla gris sobre fondo oscuro: medido rgb(121,121,122) en el centro. Fuera. */
html[data-theme="dark"] .artboard{background:var(--bg)}

/* ---------- Compensación de anchura (Space Grotesk es +20 % que Barlow Semi Condensed) ---------- */
body{letter-spacing:-.003em}
.side-label{font-size:16px;letter-spacing:.03em}
.credit-text b{letter-spacing:.02em}
.info-title,.lesson h3,.card h3{letter-spacing:-.01em}

/* ---------- Cromo de la app: superficies del brand ---------- */
.sidebar{background:linear-gradient(90deg,#E4E0D4 0%,var(--sidebar) 70%,#E7E3D8 100%);box-shadow:inset -1px 0 rgb(7 21 35 / .10)}
.side-toggle{background:color-mix(in oklab,var(--card) 82%,transparent);border-color:var(--line)}
.credit{color:var(--navy);background:color-mix(in oklab,var(--card) 82%,transparent);border-color:var(--line);box-shadow:var(--ls-shadow)}
.credit-rule{background:var(--line)}
.readout,.cd-tip,.view-hint,.cd-switch button.is-active,.cd-zoom button[aria-pressed="true"],.seg button.is-on{
  background:var(--ls-chip);color:var(--ls-chip-ink);border-color:var(--ls-chip)
}
.readout{box-shadow:0 2px 8px -4px rgb(3 7 17 / .5)}

html[data-theme="dark"] .sidebar{background:linear-gradient(90deg,#050C16 0%,var(--sidebar) 70%,#060E1A 100%);box-shadow:inset -1px 0 rgb(0 0 0 / .6)}
html[data-theme="dark"] .side-toggle,
html[data-theme="dark"] .credit{background:color-mix(in oklab,var(--card) 78%,transparent);border-color:var(--line)}
html[data-theme="dark"] .side-toggle:hover,
html[data-theme="dark"] a.credit:hover{background:color-mix(in oklab,var(--card) 92%,transparent)}
html[data-theme="dark"] .stage,
html[data-theme="dark"] .lessons,
html[data-theme="dark"] .info{color:var(--ink)}

/* ---------- Grises sueltos del CSS compilado (no son variables): a tokens ----------
   Sin esto, en oscuro el texto se queda en gris papel sobre negro. */
.lede,.features li,.maths p,.truth{color:var(--ink)}
.callout p,.tip span,.insp-desc,.pc-desc{color:var(--muted)}
.lesson-title,.insp-row label,.insp-label{color:var(--muted)}
.lesson.is-todo .lesson-title{color:var(--faint)}
.clock,.schematic text{color:var(--muted)}
.chart-grip,.boardview .bv-board-text text,.boardview .bv-board-text .bv-col.is-five{color:var(--faint);fill:var(--faint)}
.credit-text small{color:var(--muted)}
.side-lang{font-size:13px;color:var(--ls-chip-ink);background:var(--ls-chip);border-color:var(--line-soft)}

/* ---------- Superficies del autor con color quemado: en oscuro, tokens ----------
   Medido: .stage con crema al 60 % dejaba el lienzo en rgb(149,145,140) y
   .info-card/.flyout/.tip/.lesson.* seguían en papel. */
html[data-theme="dark"] .stage{background:transparent}
html[data-theme="dark"] .info-card{background:color-mix(in oklab,var(--card) 62%,transparent);border-color:var(--line-soft)}
html[data-theme="dark"] .info-body{background:var(--card)}
html[data-theme="dark"] .flyout,
html[data-theme="dark"] .inspector{background:color-mix(in oklab,var(--card) 98%,transparent);border-color:var(--line-soft)}
html[data-theme="dark"] .tip,
html[data-theme="dark"] .viewbar,
html[data-theme="dark"] .progress-card{background:var(--card-soft);border-color:var(--line-soft);box-shadow:var(--ls-shadow)}
html[data-theme="dark"] .lesson.is-active,
html[data-theme="dark"] .lesson.is-todo{background:var(--card-soft)}
html[data-theme="dark"] .knob{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .progress-track,
html[data-theme="dark"] .loader-track{background:var(--line-soft)}
html[data-theme="dark"] .power-pill{background:linear-gradient(#22314C,#16223A);border:1px solid var(--line)}
html[data-theme="dark"] .power-pill.is-on{background:linear-gradient(#0E6E6C,#0A5755)}

/* ---------- Texto quemado en grises o navy ---------- */
.tabs button{color:var(--muted)}
.insp-note{color:var(--muted)}
.chart-value{color:var(--teal)}
.seg button{color:var(--muted)}
.seg button.is-on{background:var(--ls-chip);border-color:var(--ls-chip);color:var(--ls-chip-ink)}
.seg button:hover,.btn-ghost:hover,.lesson-step:hover{border-color:var(--line)}
.feature-icon,.tut-icon,.band-row>span{background:var(--card)}

/* ---------- Gráficas: el papel del lienzo del SVG no es una variable ---------- */
.chart-body svg{background:var(--code-bg)}
.cc-axis-label{fill:var(--navy);stroke:var(--code-bg)}
.cc-mark-label,.cc-note{stroke:var(--code-bg)}
.cc-dot{stroke:var(--code-bg);fill:var(--teal)}

/* ---------- Marca en el cromo ---------- */
.ls-wordmark{font:600 15px/1 var(--mono);letter-spacing:.06em;color:var(--fg,var(--ink));white-space:nowrap}
.ls-wordmark b{color:var(--teal);font-weight:600}
.ls-credit-src{font:500 13px/1.15 var(--cond);letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.credit-side .ls-credit-src{font-size:12px;letter-spacing:.02em}
.ls-credit{text-decoration:none;cursor:default}

/* ---------- Conmutador de tema (barra lateral, junto a Idioma) ---------- */
.side-nav li.ls-theme-li{top:576px}
.side-theme{display:grid;place-items:center;width:44px;height:40px;border:1.5px solid transparent;border-radius:9px;
  background:transparent;color:var(--navy);cursor:pointer;padding:0;min-height:44px;position:relative}
.side-theme:hover{background:color-mix(in oklab,var(--teal) 14%,transparent);border-color:color-mix(in oklab,var(--teal) 45%,transparent)}
.side-theme:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.side-theme svg{width:26px;height:26px;fill:currentColor;stroke:none}
/* Se ofrece el icono del tema al que se va a cambiar */
html[data-theme="light"] .ls-icon-sun{display:none}
html[data-theme="dark"] .ls-icon-moon{display:none}

/* La barra compacta coloca los li en flujo: basta con no posicionarlo */
html.compact .side-nav li.ls-theme-li{top:auto}

/* ---------- Pie ---------- */
.ls-credit .credit-text small{font-size:13px;line-height:15px;letter-spacing:.12em;color:var(--faint)}
.ls-credit .credit-text b{font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.05em;color:var(--navy)}

/* ---------- Ajustes finos medidos sobre el clon (06/11) ----------
   .power-pill.is-on: crema sobre el verde del autor daba 3,26:1 → verde más hondo.
   .tabs button: «Circuito» pedía 91 px en una caja de 82 al pasar a Space Grotesk.
   .credit-side: el wordmark horizontal desbordaba la columna de 47 px. */
.power-pill.is-on{background:linear-gradient(#0E706E,#0A5B59)}
.tabs button{font-size:16.5px;letter-spacing:.01em}
.credit-side .ls-wordmark{font-size:13px;letter-spacing:.02em}

/* Escala didáctica: los rótulos legibles de la gráfica suben al mínimo del brand.
   Las marcas de eje del SVG (10,5-11 px) se quedan: el gráfico mide 330 px fijos y
   son cifras de referencia, no texto de lectura. Queda anotado como excepción medida. */
.chart-head,.chart-value{font-size:13px}

/* El crédito vertical del autor mide 47 px y el wordmark pedía 55: se ensancha el
   contenedor (cabe en la barra de 72 px) en vez de encoger la marca por debajo de 13 px. */
.credit-side{width:57px}
.credit-side{width:47px}
.credit-side .ls-wordmark{writing-mode:vertical-rl;transform:rotate(180deg);font-size:14px;letter-spacing:.04em}

/* Menú de idiomas: el nombre en español de cada lengua iba en #6a6e74
   (3,93:1 en oscuro, 4,31:1 en claro). Es texto de lectura, va a --muted. */
.fly-text small{color:var(--muted)}

/* Barra compacta: en 320 px el sexto icono tocaba el borde (holgura 0).
   Se recorta solo el botón de tema para devolver 4 px de aire. */
@media (max-width:360px){html.compact .side-theme{width:40px}}