/*
 * AprenderJavaScript — tema oscuro único, v3.
 * Se carga después de las capas heredadas: todos los componentes visuales
 * de la plataforma se presentan sobre superficies oscuras. No existe
 * alternancia de tema ni dependencia de prefers-color-scheme.
 * La vista previa del código del estudiante mantiene sus estilos propios.
 */
:root {
  color-scheme: dark;
  --bg: #0b141b;
  --surface: #14232d;
  --surface-raised: #1b303b;
  --surface-hover: #263e49;
  --ink: #edf5f6;
  --muted: #b1c5ce;
  --line: #36515d;
  --brand: #79dfd3;
  --accent: #83dfcf;
  --accent-soft: #193d3b;
  --green: #8de3be;
  --red: #ffb2aa;
  --navy: #0c1a23;
  --navy2: #162b37;
  --shadow: 0 14px 38px rgba(0,0,0,.16);
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }
::selection { background: #79dfd3; color: #10202a; }
:where(a,button,input,textarea,select,summary):focus-visible,
.search-input:focus-visible,.ref-search-field:focus-within { outline-color: #79dfd3; }
:where(a,button,input,textarea,select,summary):focus-visible { outline-offset: 3px; }
:where(a:not([class]),.article a,.prose a,.ref-article a) { color: var(--accent); }
:where(a:not([class]),.article a,.prose a,.ref-article a):hover { color: #b6ffef; }
.muted,.lead,.caps,.eyebrow,.small.muted,.feature p,.link-card p,.project-body p,
.article p,.prose p,.prose li,.ref-article>p { color: var(--muted); }
.eyebrow:before { background: var(--brand); }
code { background: #203541; color: #d2eaf2; }
pre code,.dark code,.lab code,.ref-code code { background: transparent; color: inherit; }
hr { border-color: var(--line); }
/* Header, menus and buttons */
.site-header { background: rgba(11,20,27,.97); border-color: var(--line); box-shadow: 0 2px 16px rgba(0,0,0,.14); }
.brand { color: var(--ink); }
.brand .js { color: var(--brand); }
.brand-icon { background: var(--brand); color: #10202a; }
.site-nav a { color: #cbdae0; }
.site-nav a:hover,.site-nav a[aria-current="page"] { background: #203842; color: #f2fffd; }
.mobile-nav { background: #0b141b; }
.mobile-nav a { color: #dce7eb; border-color: var(--line); }
.mobile-nav a:hover { background: var(--surface-hover); }
.icon-btn,.btn-outline,.btn-quiet { background: var(--surface); border-color: #4a6570; color: var(--ink); }
.icon-btn:hover,.btn-outline:hover,.btn-quiet:hover { background: #29434c; border-color: #8da8b1; color: white; }
.btn-primary,.lab button.run,.project-demo button.primary { background: var(--brand); color: #14212a; border-color: transparent; }
.btn-primary:hover,.lab button.run:hover { background: #a3f1e5; color: #14212a; }
.btn-blue { background: #156d63; color: #fff; }
.btn-blue:hover { background: #1a8276; }
.btn-dark { background: #314955; color: #fff; }
.btn-dark:hover { background: #3b5b68; }
.link,.prose a,.ref-links a,.ref-aside a,.project-body .link,.ref-card-foot,
.link-card .arrow { color: var(--accent); }
/* Hero, main backgrounds and editorial sections */
.hero { background: radial-gradient(ellipse 65% 70% at 86% 12%, #1b3536 0%, transparent 73%), var(--bg); }
.page-hero,.ref-hero { background: #0f1e27; border-color: var(--line); }
.section-white { background: var(--bg); }
.section-dark { background: #10232d; }
.section-dark .section-head p { color: #c4d5de; }
.section-dark .eyebrow { color: var(--brand); }
.section-head p,.hero-proof,.stat span { color: var(--muted); }
.hero-proof span:before { color: var(--green); }
.accent-highlight { background: linear-gradient(transparent 80%, rgba(121,223,211,.2) 0); }
.crumb,.crumb a { color: #bbd0d8; }
.crumb a:hover { color: white; }
.numbers-row { border-color: var(--line); }
/* Cards and section surfaces */
.feature,.link-card,.project-card,.project-body,.course-module,.course-toolbar,
.exercise-card,.glossary-term,.next-card,.disclosure,.prose,.ref-search-controls,
.ref-card,.ref-aside,.ref-empty,.project-demo { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: none; }
.feature h3,.feature strong,.link-card h3,.link-card strong,.project-body h3,
.project-card h3,.exercise-card h3,.ref-card-link,.next-card strong,.course-module strong { color: var(--ink); }
.feature p,.link-card p,.exercise-card p,.project-card p,.project-body p,
.ref-card p,.project-demo p { color: var(--muted); }
.feature-number,.module-index,.course-module>summary .module-num { background: #174e52; color: #c6f5ee; }
.link-card small { color: #bcefe9; }
.link-card:hover,.link-card:focus-visible,.project-card:hover,.ref-card:hover,.ref-card:focus-within {
  background: #1b303a; border-color: #6c9e9d; box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.module-link { background: #172d37; border-color: #36545f; }
.module-link:hover { background: #243e48; border-color: #89bcbe; }
.module-index { background: #2b4953; color: #e3f4f7; }
.module-link strong { color: white; }
.module-link small { color: #c4d7df; }
.project-art { border-color: var(--line); }
.art-quiz { background: #302e4c; }
.art-tasks { background: #1c423b; }
.art-catalog { background: #4b3d24; }
.art-api { background: #203e55; }
.art-inner { background: #1a2b35; border-color: #5d7885; color: #f3f8fa; box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.promo { background: #79dfd3; color: #14202b; }
.promo h2,.promo p,.promo .caps,.promo .lead { color: #14202b; }
.promo .btn-dark { background: #15242e; color: white; }
.site-footer { background: #081118; border-top: 1px solid #25404b; }
.site-footer h4 { color: #bdcfd6; }
.site-footer a { color: #e5f0f3; }
.footer-bottom { border-color: #2b424e; color: #c0d2d9; }
/* Lists, course listing, lesson metadata */
.pill { background: #203541; border-color: #48606b; color: #d9ebef; }
.pill.optional { background: #173e43; border-color: #567e86; color: #fff0a0; }
.lesson-submeta,.course-toolbar { color: var(--ink); }
.course-module>summary { color: var(--ink); }
.course-module>summary:hover,.course-lessons a:hover { background: var(--surface-hover); }
.course-lessons a { color: var(--ink); border-color: var(--line); }
.course-ttl small { color: var(--muted); }
.lesson-num { color: #b1dfdd; }
.done { color: var(--green); }
.meter { background: #304550; }
.meter>span { background: var(--brand); }
.article,.prose { color: var(--ink); }
.article p,.prose p,.prose li,.article li,.ref-article>p { color: #c5d6dc; }
.article h2,.article h3,.prose h2,.prose h3,.ref-article h2 { color: var(--ink); }
.note { background: #173a40; border-color: #5aafa8; color: #e2f4f1; }
.note p,.note strong { color: inherit; }
.note.soft { background: #193533; border-color: #5eae9b; color: #e1f5ef; }
.note.warn { background: #3c2829; border-color: #e3a09c; color: #fae1df; }
.disclosure summary { color: #f0f8fa; }
.disclosure summary:hover { background: #243942; }
.disclosure>div { color: #d7e6eb; }
.disclosure pre { background: #0d1a22; color: #e7f5f6; }
.next-card:hover { background: var(--surface-hover); border-color: #739b9a; }
.next-card small { color: #b9cad1; }
.reading-progress { border-color: var(--line); }
.reading-progress button { background: #254f44; color: #d8fbea; border-color: #6aa692; }
/* All 60 lessons — sticky independent scroll, clearly grouped, active page. */
.lesson-layout { grid-template-columns: minmax(252px, 290px) minmax(0,1fr); gap: clamp(1.9rem, 4vw, 3.75rem); }
.lesson-side { background: #11222b; border-color: var(--line); border-radius: 14px; padding: .9rem .75rem 1rem; max-height: calc(100dvh - 112px); top: 98px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #607d89 transparent; }
.side-title { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .75rem 1rem; margin: 0; border-bottom: 1px solid var(--line); color: #f1f8fa; font-size: .83rem; letter-spacing: .06em; }
.side-title span { color: var(--muted); font-size: .76rem; text-transform: none; font-weight: 600; letter-spacing: normal; }
.side-links { display: block; margin-top: .75rem; }
.side-module { margin: .4rem 0 1.05rem; }
.side-module-title { display:flex; align-items:center; gap:.65rem; padding: .48rem .75rem; color: #d8e9ee; font-size: .78rem; line-height:1.4; }
.side-module-title>span { font-size: .71rem; color:#abe7df; font-weight:850; }
.side-module-title strong { font-weight:800; }
.side-module-lessons { list-style: none; padding: 0; margin: 0; }
.side-module-lessons li { list-style:none; margin:0; padding:0; }
.side-links .side-module-lessons a { display: grid; grid-template-columns: 1.7rem minmax(0,1fr) auto; gap: .5rem; align-items: start; min-height: 44px; padding: .58rem .66rem; color: #c1d5dd; border-radius: 8px; font-size: .81rem; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.side-links .side-module-lessons a:hover { background: #263f48; color: #f6ffff; }
.side-links .side-module-lessons a.active { background: #284b47; color: #f5fffb; font-weight: 750; box-shadow: inset 3px 0 #79dfd3; }
.side-lesson-number { font-size: .74rem; color: #91b3be; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.side-module-lessons a.active .side-lesson-number { color: #a9ece3; }
.side-done { color: #98e1bf; font-weight: 900; }
.side-all-link { display:block; padding:.85rem .72rem .4rem; margin-top:.5rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--accent); font-weight:750; }
.side-all-link:hover { color:white; }
.lesson-toc-toggle { display:none; margin-bottom:1rem; }
/* Search, filters and reference directory */
.search-input,.ref-search-field,.ref-search-field input,input:not([type=checkbox]):not([type=radio]):not([type=file]),
select,textarea:not(.code-input),.project-demo input,.project-demo select {
  background: #101f28; color: var(--ink); border-color: #59717b;
}
input::placeholder,textarea::placeholder { color: #a9bbc5; opacity: 1; }
.search-wrap { background: var(--surface); border-color: var(--line); }
.search-wrap .magnify { color: var(--muted); }
.filter-controls button,.ref-filters button,.demo-actions button,.project-demo .demo-actions button {
  background: #1b303a; border: 1px solid #526d78; color: #e0edf1;
}
.filter-controls button:hover,.ref-filters button:hover,.demo-actions button:hover,
.project-demo .demo-actions button:hover { background: #2c4953; border-color: #86b5b6; color: white; }
.filter-controls button.active,.ref-filters button.selected,
.demo-actions button[aria-pressed="true"] { background: #28574e; border-color: #86cebb; color: #fff; }
.ref-search-field { background: #101f28; border-color: #5a7580; }
.ref-search-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px #79dfd355; }
.ref-search-field button { color: #12211f; background: #a8eee0; }
.ref-search-field button:hover { color: #12211f; background: #d3fff5; }
.ref-count,.ref-group-head>span,.ref-kind,.ref-links .ref-source { color: var(--muted); }
.ref-group-head { border-color: var(--line); }
.ref-card-link strong { color: var(--ink); }
.ref-card-link span { color: var(--accent); }
.ref-env { background: #244640; color: #d0fbed; border-color: #4f887b; }
.ref-symptom { background: #223a44; color: #e2eff5!important; }
.ref-diagnosis { background: #183431; border-color: #4c7b70; }
.ref-diagnosis ol { color: #d5eee9; }
.ref-answer { background: #163c41; border-color: #6fc9c2; color: #d4f5ef; }
.ref-answer-error { background: #173c35; border-color: #73ccb8; color: #e2f6f2; }
.ref-note { background: #183941; color: #dcf3ed; border-color: #638c8f; }
.ref-note p { color: inherit; }
.ref-links { border-color: var(--line); }
.ref-aside { color: var(--muted); }
.ref-code { background: #091821; border-color: #45606b; }
.ref-code-title { background: #1b3541; color: #f5ffff; border-color: #496471; }
/* Labs and demos: execution still isolated. A learner's iframe retains its authored CSS. */
.lab { background: #0d1b24; border-color: #3a5361; box-shadow: 0 12px 24px rgba(0,0,0,.17); }
.lab-head { background: #182d39; border-color: #3f5967; }
.lab-label,.output { color: #eef7f9; }
.lab-badge { color: #c8f0ea; background: #364432; }
.lab button:not(.run) { color: #e8f4f5; background: #223b48; border-color: #617b87; }
.lab button:not(.run):hover { background: #345361; }
.code-input,.lab-grid .code-input { background: #0d1b24; color: #ebf4f7; border-color: #3f5b68; }
.lab-out { background: #11242d; }
.output.info { color: #d9e9ef; }
.editor-tabs { background: #192e3b; border-color: #486372; }
.editor-tabs button { color: #d5e9ed; }
.editor-tabs button[aria-pressed="true"],.editor-tabs button[aria-selected="true"] { color: #a7f2e7; }
.preview-wrap { background: #12252e; }
.preview-status { color: #c7d9e2; }
.preview-frame { background: #fff; /* learner-controlled document: may explicitly use light styles */ }
.project-demo [data-api-out],.demo-products>div,.demo-tasks li { color: var(--ink); background: #1b313b; border-color: var(--line); }
.exercise-results.good { background: #1b3d31; color: #c6fbe1; border-color: #5eae84; }
.exercise-results.bad { background: #402b2c; color: #ffd5cb; border-color: #bf8180; }
.search-results a { background: var(--surface); border-color: var(--line); color: var(--ink); }
.search-results a:hover { background: var(--surface-hover); }
/* High contrast and forced-colors still work with one dark site theme. */
@media (prefers-contrast: more) {
 :root { --muted:#e2f0f3; --line:#829da7; --accent:#a7fff0; }
 .site-nav a,.side-links .side-module-lessons a { color:#f4faff; }
}
@media (max-width: 860px) {
 .lesson-layout { display:block; }
 .lesson-side { position: static; display:none; overflow:auto; max-height:min(65dvh, 540px); margin-bottom:1.4rem; padding:.75rem; }
 .lesson-side.mobile-open { display:block; }
 .lesson-toc-toggle { display:inline-flex!important; width:100%; justify-content:center; min-height:48px; }
 .side-links .side-module-lessons a { min-height:46px; }
}
@media (max-width: 600px) {
 .lesson-toc-toggle { margin:0 0 1.1rem; }
 .lesson-side { max-height:60dvh; }
}
@media (forced-colors: active) {
 :root { color-scheme: dark; }
 .side-links .side-module-lessons a.active { border-left: 3px solid Highlight; }
}
/* The interactive hero's result strip belongs to the dark lab too. */
.hero-demo-bottom { background: #1a323e; border-color: #49616b; color: var(--ink); }
.demo-number { color: #f3fbff; }
.demo-number small { color: #bcd1db; }
.side-title { position:sticky; top:-.9rem; z-index:2; background:#11222b; }
.preview-status { background:#1a323d; border-color:#466471; color:#d4e7ee; }
/* High-visibility controls that inherit legacy foreground colors. */
.skip { background: var(--brand); color: #12212a; font-weight: 800; }
.mini-circle { color: #14212a; }
.ref-search-field>span { color: #bcd4dd; }

/* Edición 2026-10-08: identidad turquesa sin amarillo; lecciones centradas en comprender y practicar. */
:root { --brand: #79dfd3; --accent: #8ee9dd; --accent-soft: #173d40; }
::selection { background:#79dfd3; color:#0a1920; }
:where(a,button,input,textarea,select,summary):focus-visible { outline:3px solid #79dfd3; outline-offset:3px; }
.brand .js { color:#91e9e0; }
.brand-icon,.btn-primary,.lab button.run,.project-demo button.primary { background:#79dfd3; color:#09232a; }
.btn-primary:hover,.lab button.run:hover,.project-demo button.primary:hover { background:#a3f1e5; color:#09232a; }
.brand-icon { box-shadow:none; }
.eyebrow:before,.meter>span { background:var(--brand); }
.accent-highlight { background:linear-gradient(transparent 80%, rgba(121,223,211,.22) 0); }
.promo { background:#18383d; color:#e8faf8; border:1px solid #356970; }
.promo h2,.promo p,.promo .caps,.promo .lead { color:#e8faf8; }
.promo .btn-dark { background:#79dfd3; color:#0c232a; }
.pill.optional { background:#203c48; border-color:#4e8990; color:#d4f6f2; }
.lab-badge { background:#174246; color:#b5f3e9; }
.editor-tabs button[aria-pressed="true"],.editor-tabs button[aria-selected="true"] { color:#a4f5ea; }
.ref-answer { border-color:#79dfd3; background:#193941; color:#e8faf5; }
.ref-note { background:#193941; color:#d7f2ed; border-color:#416b72; }
.ref-search-field:focus-within { border-color:#79dfd3; box-shadow:0 0 0 2px rgba(121,223,211,.2); }
.side-links .side-module-lessons a.active { box-shadow:inset 3px 0 #79dfd3; }
.side-module-title>span,.side-module-lessons a.active .side-lesson-number { color:#a4e9e2; }
/* La lección se lee como un artículo breve: explicación, ejemplo y práctica. */
.lesson-page .lesson-main { min-width:0; }
.lesson-page .lesson-main h1 { max-width:23ch; font-size:clamp(2.05rem,3.15vw,3.05rem); line-height:1.13; letter-spacing:-.037em; margin-top:.8rem; margin-bottom:.85rem; }
.lesson-page .lesson-kicker { margin-top:1.6rem; }
.lesson-page .lesson-goal { max-width:68ch; font-size:clamp(1.045rem,1.4vw,1.15rem); line-height:1.65; margin:0 0 1.2rem; }
.lesson-page .lesson-submeta { margin:0 0 2rem; gap:.45rem; }
.lesson-page .article { max-width:74ch; }
.lesson-page .lesson-copy h2 { font-size:clamp(1.45rem,2vw,1.75rem); line-height:1.2; margin:2.2rem 0 .95rem; }
.lesson-page .lesson-copy h2:first-child { margin-top:.8rem; }
.lesson-page .lesson-copy p { line-height:1.78; margin:.0rem 0 1.05rem; font-size:1.02rem; color:#d1e1e4; }
.lesson-page .lesson-concept { font-size:1.08rem!important; color:#f1faf9!important; font-weight:520; }
.lesson-explained { padding:1.05rem 1.3rem; margin:1.45rem 0 1.8rem; background:#152c35; border-left:3px solid #79dfd3; border-radius:0 12px 12px 0; }
.lesson-explained p { margin:.45rem 0 0!important; }
.lesson-overline { display:block; font-size:.78rem; letter-spacing:.04em; color:#a1eee4; text-transform:uppercase; font-weight:790; }
.lesson-page .lesson-prediction { margin:.25rem 0 1.3rem!important; color:#e1edf0!important; }
.lesson-page .lesson-prediction strong { color:#f4fbfb; }
.lesson-page .lab { margin-top:0; margin-bottom:1.25rem; border-radius:13px; }
.lesson-page .lesson-finish { padding-bottom:0; }
.lesson-page .lesson-finish .disclosure { margin:0 0 1rem; border-color:#456570; background:#112631; }
.lesson-page .lesson-finish .disclosure summary { font-size:.94rem; padding:1.05rem 1.18rem; }
.lesson-task { padding:1.1rem 0 1.25rem; margin:1.25rem 0 1.05rem; border-bottom:1px solid var(--line); }
.lesson-page .lesson-task p { margin:.52rem 0; color:#e4f2f4; }
.lesson-page .lesson-task .small { font-size:.84rem; color:#aec9d0; }
.lesson-end { margin:1.65rem 0 0; border-top:1px solid var(--line); padding:1.3rem 0 1.05rem; }
.lesson-end p { margin:0 0 1.1rem; font-size:.95rem; }
.lesson-end p strong { color:#effbf8; }
.lesson-end-actions { display:flex; align-items:center; gap:1rem 1.2rem; flex-wrap:wrap; }
.lesson-end-actions [data-mark-read] { border:1px solid #588b8e; border-radius:9px; background:#21524f; color:#effefb; min-height:44px; padding:.55rem 1rem; font-weight:700; cursor:pointer; }
.lesson-end-actions [data-mark-read]:hover { background:#2a6a64; }
.lesson-end-actions .link { font-size:.9rem; }
.lesson-source { font-size:.78rem!important; color:#a9c0c9!important; margin:1rem 0 2rem!important; }
.lesson-source a { color:#9ae9e0; }
.lesson-page .lesson-next { border-top:1px solid var(--line); padding-top:1.6rem; }
@media(max-width:600px){
  .lesson-page .lesson-main h1 { font-size:clamp(2rem,8vw,2.55rem); }
  .lesson-page .lesson-submeta { margin-bottom:1.4rem; }
  .lesson-page .lesson-copy h2 { font-size:1.48rem; margin-top:1.8rem; }
  .lesson-explained { padding:.9rem 1rem; margin:1.3rem 0; }
  .lesson-page .lesson-copy p { font-size:1rem; line-height:1.75; }
  .lesson-end-actions { align-items:stretch; flex-direction:column; }
  .lesson-end-actions [data-mark-read] { width:100%; }
}

/* Indicadores de ventana neutros: el amarillo deja de formar parte de la identidad. */
.window-top .dot:nth-child(1) { background:#647e89; }
.window-top .dot:nth-child(2) { background:#7c9ca4; }
.window-top .dot:nth-child(3) { background:#79dfd3; }