/* Desarrollo de lecciones: mantiene la paleta de la portada del curso. */
.tema-page { color: #10201d; background: #e6f0eb; }
.tema-page #contenedor { width: min(1220px, calc(100% - 2rem)); margin: 2rem auto; padding: 0; background: #fafdf8; border: 1px solid rgba(11, 46, 42, .12); border-radius: 26px; overflow: hidden; box-shadow: 0 24px 70px #0b2e2a26; }
.lesson-hero { padding: clamp(1.5rem, 5vw, 4rem); background: linear-gradient(130deg, #0b2e2a, #0e6e5e); color: white; }
.lesson-hero a { color: #d4f542; }
.lesson-eyebrow, .section-number { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.lesson-eyebrow { margin-top: 2rem; color: #d4f542; }
.lesson-hero h1 { max-width: 850px; font-size: clamp(2.3rem, 5.5vw, 4.3rem); line-height: 1.08; letter-spacing: -.04em; }
.lesson-hero h1 em { color: #d4f542; font-family: Georgia, serif; font-weight: 400; }
.lesson-lead { max-width: 72ch; margin-top: 1.5rem; color: #deeee7; font-size: 1.12rem; }
.lesson-layout { padding: clamp(1.5rem, 5vw, 4.5rem); }
.lesson-content { width: min(100%, 920px); min-width: 0; padding: 0; margin: auto; font-size: 1.05rem; }
.lesson-content > section { padding-bottom: 2.8rem; margin-bottom: 2.8rem; border-bottom: 1px solid #d2e5dc; scroll-margin-top: 1rem; }
.section-number { color: #0a7565; }
.lesson-content h2 { margin-bottom: 1.3rem; font: 700 clamp(1.8rem, 3.6vw, 2.6rem)/1.17 Georgia, serif; color: #0b2e2a; }
.lesson-content h3 { margin: 1.8rem 0 .7rem; font-size: 1.22rem; color: #0a5c4f; }
.lesson-content li { margin-bottom: .5rem; }
.lesson-callout, .summary-card { padding: 1.25rem; margin: 1.5rem 0; border: 1px solid #bfdbcc; border-left: 4px solid #0e7c6b; border-radius: 10px; background: #e9f5ef; }
.lesson-callout p:last-child { margin-bottom: 0; }
.math-display { padding: 1rem; margin: 1rem 0; border-radius: 10px; background: #0b2e2a; color: #d4f542; font-family: Consolas, monospace; overflow-x: auto; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.comparison-grid > div { border: 1px solid #d2e5dc; border-radius: 12px; padding: 1.2rem; background: white; }
.comparison-grid h3 { margin-top: 0; }
.lesson-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lesson-table caption { caption-side: bottom; color: #526b61; padding-top: .6rem; }
.lesson-table th, .lesson-table td { padding: .75rem; border-bottom: 1px solid #d2e5dc; text-align: left; vertical-align: top; }
.lesson-table th { background: #e9f5ef; color: #0b2e2a; }
.table-responsive { overflow-x: auto; }
.lesson-content pre { padding: 1.3rem; border-radius: 12px; color: #e6f5ed; background: #102d29; overflow-x: auto; font-size: .9rem; }
.lesson-content :not(pre) > code { color: #0a5c4f; }
.lesson-content details { margin: 1rem 0; border: 1px solid #d2e5dc; padding: 1rem; border-radius: 10px; background: white; }
.lesson-content summary { cursor: pointer; font-weight: 650; color: #0a5c4f; }
.lesson-content details[open] summary { margin-bottom: 1rem; }
.lesson-toc { margin: 0 0 clamp(2.8rem, 6vw, 5rem); padding: 1.1rem 1.3rem; border: 1px solid #d2e5dc; border-radius: 14px; background: #e9f5ef; }
.lesson-toc strong { display: block; margin-bottom: .6rem; color: #0a5c4f; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.lesson-toc ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: .3rem 1.5rem; margin: 0; padding-left: 1.3rem; }
.lesson-content .lesson-toc li { margin: 0; font-size: .92rem; }
.lesson-toc a { color: #0b2e2a; text-decoration: none; }
.lesson-toc a:hover { color: #0e7c6b; text-decoration: underline; }
.sequence-lab { padding: clamp(1rem, 3vw, 1.6rem); border-radius: 16px; background: #0b2e2a; color: #edf9f2; }
.sequence-lab h3 { color: #d4f542; margin-top: 0; }
.lab-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 1.2rem 0; }
.lab-controls label { display: flex; align-items: center; gap: .5rem; }
.lab-controls input { width: 1.2rem; height: 1.2rem; accent-color: #d4f542; }
.lab-controls button { padding: .6rem 1rem; border: 1px solid #b9d5c7; border-radius: 8px; background: #f6fff8; color: #0b2e2a; font-weight: 700; cursor: pointer; }
.lab-controls button:hover { background: #d4f542; }
.lab-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.2rem 0; }
.lab-results > div { padding: 1rem; border: 1px solid #77b19e; border-radius: 10px; }
.lab-results small, .lab-results strong { display: block; }
.lab-results strong { color: #d4f542; font-size: 1.7rem; }
.sequence-lab .lesson-table { color: #edf9f2; }
.sequence-lab .lesson-table th { background: #194d43; color: #edf9f2; }
.sequence-lab .lesson-table caption { color: #c5dfd1; }
.lab-status { min-height: 3.3em; }
.block-diagram { width: 100%; height: auto; display: block; margin: 1rem 0; }
.tema-page :is(a, button, input, summary):focus-visible { outline: 3px solid #f39239; outline-offset: 4px; }
@media (max-width: 700px) {
  .tema-page #contenedor { width: 100%; margin: 0; border-radius: 0; }
  .lesson-layout { padding: 1.25rem; }
  .comparison-grid, .lab-results { grid-template-columns: 1fr; }
  .lesson-content { font-size: 1rem; }
}

/* Navegación entre temas: anterior, índice y siguiente en una misma fila */
.lesson-navigation { display: grid; grid-template-columns: 1fr .72fr 1fr; gap: .8rem; padding-bottom: 1rem; }
.lesson-navigation-two { grid-template-columns: 1fr 1fr; }
.lesson-navigation a { display: grid; align-items: center; gap: .2rem .8rem; min-height: 88px; padding: 1rem; color: #0b2e2a; background: white; border: 1px solid #d2e5dc; border-radius: 12px; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.lesson-navigation a:hover { transform: translateY(-2px); border-color: #0e7c6b; box-shadow: 0 10px 22px #0b2e2a1a; }
.lesson-navigation small { color: #526b61; font-size: .7rem; }
.lesson-navigation strong { font-size: .88rem; }
.index-link, .back-link { grid-template-columns: auto 1fr; }
.index-link span, .back-link span { grid-row: 1 / 3; color: #0e7c6b; }
.next-link { grid-template-columns: 1fr auto; text-align: right; }
.next-link span { grid-column: 2; grid-row: 1 / 3; color: #0e7c6b; }
@media (max-width: 700px) {
  .lesson-navigation, .lesson-navigation-two { grid-template-columns: 1fr; }
  .lesson-navigation .next-link { text-align: left; }
}

/* Bloques de código: editables y ejecutables con Python (Pyodide) en el navegador */
.recuadro { position: relative; margin: .75rem 0 1.25rem; padding: .75rem 1rem; overflow-x: auto; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .95rem; color: #17324d; background: #f2faf6; border: 1px solid #bfdbcc; border-left: 4px solid #0e7c6b; border-radius: 8px; }
.recuadro-codigo { margin: 1.25rem 0 1.5rem; padding: 2.8rem 1.1rem 1.1rem; color: #e6f5ed; background: #0c2421; border-color: #1d4a43; border-left-color: #d4f542; border-radius: 10px; cursor: text; box-shadow: 0 14px 32px #0b2e2a2e; }
.lesson-content .recuadro-codigo pre { margin: 0; padding: 0; background: transparent; border-radius: 0; overflow: visible; font-size: .92rem; }
.recuadro-codigo code { display: block; min-height: 1.65em; white-space: pre; color: inherit; background: transparent; outline: none; caret-color: #d4f542; }
.recuadro-codigo.is-editing { box-shadow: 0 0 0 3px #d4f54233, 0 14px 32px #0b2e2a2e; }
.run-btn { position: absolute; top: 10px; right: 12px; padding: .2rem .8rem; font-size: .85rem; font-weight: 800; color: #0b2e2a; background: #d4f542; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.run-btn:hover, .run-btn:focus { background: #e6ff6e; transform: translateY(-1px); outline: none; }
.run-btn.is-loading { opacity: .65; cursor: progress; }
.resultado-ejecucion { margin-top: -.6rem; color: #0b2e2a; background: #e9f5ef; border-color: #bfdbcc; border-left-color: #0e7c6b; white-space: pre-wrap; }
.resultado-ejecucion.is-error { color: #7b241c; background: #fdecea; border-left-color: #c0392b; }
.recuadrooculto { display: none; }
.py-note { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; padding: .85rem 1rem; border: 1px dashed #9ec9bb; border-radius: 10px; background: #f2faf6; color: #39544d; font-size: .88rem; line-height: 1.55; }
.py-note p { margin: 0; }
.py-note strong { color: #0a5c4f; }
.py-status { font-size: .88rem; color: #526b61; }

/* Laboratorio del microcontrolador virtual */
.sequence-lab .lab-controls select { padding: .55rem .8rem; border: 1px solid #b9d5c7; border-radius: 8px; background: #f6fff8; color: #0b2e2a; font-weight: 650; max-width: 100%; }
.sequence-lab .lab-controls label[for="program-select"] { display: grid; gap: .3rem; font-size: .85rem; }
.sequence-lab pre { margin: 1rem 0; border: 1px solid #1d4a43; background: #0c2421; }
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; margin: 1.2rem 0; }
.reg-grid > div { padding: .9rem 1rem; border: 1px solid #77b19e; border-radius: 10px; }
.reg-grid small { display: block; color: #c5dfd1; }
.reg-grid strong { display: block; color: #d4f542; font: 700 1.25rem/1.4 Consolas, monospace; letter-spacing: .08em; }
.led-row { display: flex; gap: .6rem; align-items: center; margin-top: .4rem; }
.led { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid #77b19e; background: transparent; }
.led.is-on { background: #d4f542; border-color: #d4f542; box-shadow: 0 0 10px #d4f542aa; }
.led-row span { font-size: .78rem; color: #c5dfd1; }

/* Selector de microcontrolador */
.req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem 1.2rem; margin: 1.2rem 0; }
.req-grid label { display: grid; gap: .3rem; font-size: .85rem; }
.req-grid label.check { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.req-grid input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: #d4f542; }
.req-grid select { padding: .5rem .7rem; border: 1px solid #b9d5c7; border-radius: 8px; background: #f6fff8; color: #0b2e2a; font-weight: 650; }
.chip-list { display: grid; gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.chip-card { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid #77b19e; border-left-width: 5px; border-radius: 10px; margin: 0; }
.chip-card strong { font-size: 1.05rem; }
.chip-card small { color: #c5dfd1; }
.chip-card.is-ok { border-left-color: #d4f542; background: #ffffff0d; }
.chip-card.is-ok strong { color: #d4f542; }
.chip-card.is-out { border-left-color: #f39239; opacity: .78; }

/* Explorador de direcciones y comparación de buses */
.sequence-lab .tool-block { margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid #77b19e66; }
.sequence-lab .tool-block h4 { margin: 0 0 .6rem; color: #d4f542; font-size: 1.05rem; }
.sequence-lab input[type="text"], .sequence-lab input[type="number"] { padding: .5rem .7rem; border: 1px solid #b9d5c7; border-radius: 8px; background: #f6fff8; color: #0b2e2a; font: 650 1rem Consolas, monospace; width: 9rem; max-width: 100%; }
.sequence-lab input[type="range"] { accent-color: #d4f542; width: min(260px, 100%); }
.sequence-lab .quick-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.sequence-lab .quick-buttons button { padding: .35rem .8rem; border: 1px solid #b9d5c7; border-radius: 999px; background: #f6fff8; color: #0b2e2a; font-weight: 700; cursor: pointer; }
.sequence-lab .quick-buttons button:hover { background: #d4f542; }

/* Placa virtual de LED y botones deshabilitados */
.led-board { display: flex; flex-wrap: wrap; gap: 1rem; margin: .4rem 0 0; }
.led-board > div { display: grid; justify-items: center; gap: .3rem; font-size: .75rem; color: #c5dfd1; }
.sequence-lab .lab-controls button:disabled { opacity: .5; cursor: not-allowed; }
.sequence-lab .lab-controls button:disabled:hover { background: #f6fff8; }

/* Simulador de CPU */
.sequence-lab .lesson-table tr.is-current td { background: #d4f542; color: #0b2e2a; font-weight: 700; }
.sequence-lab .lesson-table td { font-family: Consolas, monospace; font-size: .88rem; }
.cpu-log { margin: .8rem 0 0; padding-left: 1.2rem; font-size: .88rem; color: #edf9f2; }
.cpu-log li { margin-bottom: .35rem; }
.cpu-log li:first-child { color: #d4f542; font-weight: 700; }
.cpu-phase-name { color: #d4f542; font-weight: 700; }

/* Ensamblador interactivo */
.sequence-lab textarea { width: 100%; min-height: 11rem; padding: .8rem 1rem; border: 1px solid #1d4a43; border-radius: 10px; background: #0c2421; color: #e6f5ed; font: .9rem/1.6 Consolas, monospace; resize: vertical; tab-size: 4; }
.sequence-lab textarea:focus-visible { outline: 3px solid #f39239; outline-offset: 2px; }
.op-asm { margin: .8rem 0 0; white-space: pre; }

/* Mapa de la SRAM */
.ram-bar { display: flex; height: 3.2rem; margin: 1rem 0 .4rem; border: 1px solid #77b19e; border-radius: 8px; overflow: hidden; background: #0c2421; }
.ram-seg { display: grid; place-items: center; min-width: 0; overflow: hidden; font-size: .78rem; font-weight: 700; color: #0b2e2a; white-space: nowrap; }
.seg-data { background: #77b19e; }
.seg-bss { background: #4fa38c; }
.seg-heap { background: #f39239; }
.seg-free { background: repeating-linear-gradient(45deg, #123a34, #123a34 8px, #17463f 8px, #17463f 16px); color: #c5dfd1; }
.seg-stack { background: #d4f542; }
.seg-over { background: #c0392b; color: #fff; }

/* Editor de registros */
.bit-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .4rem; margin: 1rem 0; }
.bit-cell { display: grid; justify-items: center; gap: .25rem; padding: .5rem .2rem; border: 1px solid #77b19e; border-radius: 8px; font-size: .75rem; text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.bit-cell small { color: #c5dfd1; }
.bit-cell input { width: 1.3rem; height: 1.3rem; accent-color: #d4f542; }
.bit-cell input:disabled { opacity: .35; }
.bit-cell span { font-family: Consolas, monospace; font-weight: 700; color: #d4f542; }
.flag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.flag-row button { padding: .45rem .9rem; border: 1px solid #b9d5c7; border-radius: 999px; background: transparent; color: #edf9f2; font: 700 .9rem Consolas, monospace; cursor: pointer; }
.flag-row button.is-active { background: #d4f542; color: #0b2e2a; border-color: #d4f542; }
@media (max-width: 560px) { .bit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Líneas de bits */
.bit-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem; margin: .25rem 0; font-family: Consolas, monospace; }
.bit-line-name { min-width: 6.5rem; color: #c5dfd1; font-size: .82rem; }
.bit-line-value { font-size: 1.1rem; letter-spacing: .12em; color: #edf9f2; }
.bit-line-value .bit-changed { color: #0b2e2a; background: #d4f542; border-radius: 3px; padding: 0 .08em; font-weight: 700; }
.bit-lines { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid #1d4a43; border-radius: 10px; background: #0c2421; overflow-x: auto; }

/* Configurador de pines y corredor de luces */
.pin-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .4rem; margin: 1rem 0; }
.pin-cell { display: grid; gap: .3rem; padding: .5rem .35rem; border: 1px solid #77b19e; border-radius: 8px; font-size: .75rem; }
.pin-cell small { color: #d4f542; font: 700 .85rem Consolas, monospace; text-align: center; }
.pin-cell select { width: 100%; padding: .3rem .2rem; border: 1px solid #b9d5c7; border-radius: 6px; background: #f6fff8; color: #0b2e2a; font-size: .72rem; font-weight: 650; }
@media (max-width: 760px) { .pin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Teclado matricial */
.key-grid { display: grid; grid-template-columns: repeat(4, 3.6rem); gap: .5rem; margin: 1rem 0; }
.key-btn { height: 3.2rem; border: 1px solid #b9d5c7; border-radius: 10px; background: #f6fff8; color: #0b2e2a; font: 800 1.1rem Consolas, monospace; cursor: pointer; }
.key-btn:hover { background: #e6ff70; }
.key-btn.is-closed { background: #d4f542; border-color: #d4f542; box-shadow: 0 0 10px #d4f54299; }
.key-btn.is-ghost { background: #f39239; border-color: #f39239; color: #fff; box-shadow: 0 0 10px #f3923999; }
.scan-lines { margin: .8rem 0 0; padding-left: 1.2rem; font: .85rem/1.6 Consolas, monospace; color: #edf9f2; }

/* Elementos ocultos dentro de los laboratorios */
.sequence-lab [hidden] { display: none !important; }

/* Lectura partida y buffer circular */
.reg-grid strong.is-bad, .sequence-lab strong.is-bad { color: #f39239; }
.ring { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem; margin: 1rem 0; }
.ring-slot { display: grid; place-items: center; height: 3rem; border: 1px solid #77b19e; border-radius: 8px; font: 700 1rem Consolas, monospace; color: #edf9f2; }
.ring-slot.is-head { border-color: #d4f542; box-shadow: inset 0 -4px 0 #d4f542; }
.ring-slot.is-tail { border-color: #f39239; box-shadow: inset 0 4px 0 #f39239; }
.ring-slot.is-head.is-tail { box-shadow: inset 0 -4px 0 #d4f542, inset 0 4px 0 #f39239; }