/* 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; }