/* AULA · LSIA104 — hoja única del sitio.

   SISTEMA DE DISEÑO: «Broadsheet» — el periódico impreso.
   Tipografía Source Serif 4 en todo (titulares y cuerpo), papel gris frío,
   dos tintas de proceso —cian y magenta—, filetes de 1 px y esquinas casi
   rectas. Nada de píldoras ni sombras grandes: esto se lee como una plana.

   Tres reglas que explican el resto de la hoja:
     1. Las tintas son DOS. Cian = avance, lo hecho, la acción principal.
        Magenta = lo que pide atención (errores, entregas, avisos).
        No hay verde ni rojo: el color nunca es el único canal — siempre
        hay además una palabra o una forma.
     2. El texto a color usa el escalón -700 de su rampa, no la tinta pura:
        la tinta pura mide 3.65:1 sobre el papel y no pasa AA a tamaño de
        lectura. La tinta pura se reserva para rellenos y filetes.
     3. Mono sólo para código y cifras que se alinean. Los rótulos en
        versalitas son serif, como en la plana.

   Las fuentes van auto-hospedadas en estatico/fuentes/. Sin recursos
   externos: si el alumno está en una red que bloquea CDNs, el sitio se ve
   idéntico. Source Serif 4 es OFL (Adobe). */

/* ── Source Serif 4, auto-hospedada. Los dos ficheros «normal» son
      variables (400–600), por eso un solo archivo cubre ambos pesos. ───── */
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:400 600;
  font-display:swap; src:url("fuentes/source-serif-4-latin-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:400 600;
  font-display:swap; src:url("fuentes/source-serif-4-latin-ext-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Source Serif 4"; font-style:italic; font-weight:400 600;
  font-display:swap; src:url("fuentes/source-serif-4-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Serif 4"; font-style:italic; font-weight:400 600;
  font-display:swap; src:url("fuentes/source-serif-4-latin-ext-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Papel y tinta */
  --bg:#f3f2f2;        --bg-elev:#eae9e9;
  --ink:#201e1d;       --ink-soft:#444141;   --ink-faint:#605d5d;
  --rule:#d1d0d0;      --rule-mayor:#201e1d;

  /* Tinta 1 · cian de proceso. Avance, lo hecho, la acción principal */
  --accent:#0088b0;         /* tinta pura: rellenos y filetes */
  --accent-txt:#006786;     /* -700: texto a color, 5.7:1 sobre papel */
  --accent-fuerte:#004961;  /* -800: hover de lo relleno */
  --accent-soft:#e9f8ff;    /* -100: fondos teñidos */
  --accent-borde:#99e0ff;   /* -300: subrayado al pasar el cursor */

  /* «Completado» es la misma tinta 1: en esta paleta no hay verde */
  --jade:#006786;      --jade-fuerte:#0088b0;   --jade-soft:#e9f8ff;

  /* Tinta 2 · magenta de proceso. Lo que pide atención */
  --warn:#aa0b56;      --warn-fuerte:#d6006c;   --warn-soft:#fff1f4;
  --warn-borde:#ffc0d0;

  --obsidian:#201e1d;  --papel:#f3f2f2;   /* bloque de código: papel sobre tinta */
  --amarillo:#edbb00;  /* tercera tinta de proceso: sólo para las planchas */

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Source Serif 4",Georgia,"Times New Roman",serif; /* Broadsheet es serif en todo */
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;

  --r-sm:1px; --r-md:2px; --r-lg:4px;   /* casi rectas, como el impreso */

  /* Anchos de plana. El canal crece con la pantalla en vez de quedarse en
     1rem: en un monitor ancho, 16 px de margen contra el borde se ven como un
     descuido. El clamp pone piso (16 px, el minimo del contrato) y techo (para
     que en 4K no se coma media pantalla), y en medio manda el porcentaje. */
  --canal:clamp(1rem, 4vw, 3.5rem);
  --ancho-lectura:46rem;   /* prosa: la medida de lectura, NO se toca */
  --ancho-amplio:68rem;    /* reproductor y paneles */
  --ancho-taller:84rem;    /* el Ajolote: cuadricula + editor, lado a lado */
  --ancho-cabecera:84rem;  /* cromo: cabecera y pie. NO cambia entre paginas */
}

/* El fondo oscuro no venía en el sistema, pero sus rampas lo permiten y el
   alumno lee de noche: tinta de fondo, papel encima, y las tintas en su
   escalón -300/-400 para que sigan pasando AA. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#201e1d;      --bg-elev:#2d2b2b;
    --ink:#f8f4f4;     --ink-soft:#d7d3d3;   --ink-faint:#9b9797;
    --rule:#444141;    --rule-mayor:#d7d3d3;
    --accent:#62c5ee;  --accent-txt:#99e0ff; --accent-fuerte:#cbeeff;
    --accent-soft:#004961; --accent-borde:#1186ac;
    --jade:#99e0ff;    --jade-fuerte:#62c5ee; --jade-soft:#004961;
    --warn:#ffc0d0;    --warn-fuerte:#ff90b1; --warn-soft:#4b1528;
    --warn-borde:#aa0b56;
    --obsidian:#15140f; --papel:#f8f4f4;
  }
}
:root[data-theme="dark"]{
  --bg:#201e1d;      --bg-elev:#2d2b2b;
  --ink:#f8f4f4;     --ink-soft:#d7d3d3;   --ink-faint:#9b9797;
  --rule:#444141;    --rule-mayor:#d7d3d3;
  --accent:#62c5ee;  --accent-txt:#99e0ff; --accent-fuerte:#cbeeff;
  --accent-soft:#004961; --accent-borde:#1186ac;
  --jade:#99e0ff;    --jade-fuerte:#62c5ee; --jade-soft:#004961;
  --warn:#ffc0d0;    --warn-fuerte:#ff90b1; --warn-soft:#4b1528;
  --warn-borde:#aa0b56;
  --obsidian:#15140f; --papel:#f8f4f4;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}

/* ════════════════════════════════════════════════════════════════════════
   LA CABECERA — el cabezote del periódico
   Nombre, materia y semana; filete grueso, filete fino, la navegación, y
   un filete delgado que la cierra. No va fija: se pasa de largo al leer.
   ════════════════════════════════════════════════════════════════════════ */
/* La cabecera es una BANDA: ocupa toda la ventana y no se mueve de una
   pagina a otra. Su ancho ya no depende del cuerpo — ese acoplamiento era el
   que comprimia el contenido. Dentro, `.cabecera-dentro` centra el texto. */
.cabecera{
  width:100%;
  padding-top:env(safe-area-inset-top, 0px);
}
.cabecera-dentro{
  max-width:var(--ancho-cabecera); margin:0 auto;
  padding-inline:var(--canal);
}
.cabecera-dentro:first-child{ padding-top:1.2rem; }

/* Los filetes SI van de borde a borde. Es lo que hace que la cabecera se lea
   como una banda de diario y no como una columna que deba alinearse con el
   texto de abajo — que es justo el problema que tenia antes. */
.cabecera > .regla-mayor,
.cabecera > .regla-menor,
.cabecera > .regla-fina{ width:100%; }
.cabecera-fila{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.marca{
  display:flex; align-items:baseline; gap:0.65rem; flex-wrap:wrap;
  color:var(--ink); text-decoration:none;
}
.marca-nombre{
  display:inline-block;
  font-family:var(--serif); font-size:1.55rem; font-weight:600;
  letter-spacing:-0.012em; line-height:1;
}
.marca span{ font-size:0.84rem; font-weight:400; color:var(--ink-faint); letter-spacing:0; }
.cabecera-fecha{ font-size:0.84rem; color:var(--ink-faint); }

/* El selector de materia. Va en el cabezote y no en un menú escondido porque
   el curso vive en la sesión: si no se viera, cambiarlo en otra pestaña movería
   ésta sin avisar. Sólo aparece cuando hay más de una materia. */
.cambia-curso{
  display:flex; align-items:baseline; gap:0.5rem; flex-wrap:wrap;
  margin-top:0.5rem; font-size:0.84rem;
}
.cambia-curso label{
  color:var(--ink-faint); text-transform:uppercase;
  letter-spacing:0.08em; font-size:0.72rem;
}
.cambia-curso select{
  font-family:var(--serif); font-size:0.88rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:0.15rem 0.35rem; max-width:22rem;
  /* 🪤 `min-width:0` no sobra. Un elemento de flex no encoge por debajo de su
     contenido mínimo, y el mínimo de este <select> es su opción más larga
     —«LSIA104 · Fundamentos de la Programación»—. Sin esto se sale del ancho
     del teléfono por unos píxeles: medido, 391 sobre 390. Un desbordamiento
     así no se ve como un error, se ve como que la página «se mueve». */
  min-width:0; flex:0 1 auto;
}
.cambia-curso select:focus-visible{ outline:2px solid var(--accent-txt); outline-offset:2px; }

/* Un plegable de formulario: lo que no se usa a diario no ocupa pantalla. */
.plegable{ margin-top:1rem; border-top:1px solid var(--rule); padding-top:0.9rem; }
.plegable summary{
  cursor:pointer; font-weight:600; color:var(--accent-txt); font-size:0.95rem;
}
.plegable summary:focus-visible{ outline:2px solid var(--accent-txt); outline-offset:3px; }

.regla-mayor{ border-top:2px solid var(--rule-mayor); margin-top:0.6rem; }
.regla-menor{ border-top:1px solid var(--rule-mayor); margin-top:2px; }
.regla-fina{ border-top:1px solid var(--rule); }

.barra-fin{
  display:flex; align-items:center; gap:1.35rem; flex-wrap:wrap;
  padding-top:0.5rem;
}
.en-linea{ display:inline; margin:0; }
.enlace-barra{
  background:none; border:0; cursor:pointer;
  padding:0.35rem 0 0.5rem; margin:0;
  font-family:var(--serif); font-size:0.95rem; font-weight:400;
  color:var(--ink); text-decoration:none;
  border-bottom:2px solid transparent;
}
.enlace-barra:hover{ border-bottom-color:var(--accent-borde); }
.enlace-barra[aria-current="page"]{ font-weight:600; border-bottom-color:var(--accent); }
/* El diccionario de errores es el destino más usado a media tarea: va en la
   segunda tinta, que es justo la de lo que pide atención */
.socorro{
  font-size:0.95rem; font-weight:600; text-decoration:none;
  color:var(--warn); background:none;
  padding:0.35rem 0 0.5rem; border-bottom:2px solid transparent;
  white-space:nowrap;
}
.socorro:hover{ border-bottom-color:var(--warn-borde); }

/* ── Las planchas mal registradas: el nombre impreso a tres tintas ───────
   Cian, magenta y amarillo desplazadas un pelo; el negro sale del multiply
   de las tres. La copia «paper» lleva el texto real (las otras van
   aria-hidden). Si el navegador no sabe multiplicar, se esconden. */
.cmyk-head{ position:relative; }
.cmyk-head .paper{
  color:var(--bg);
  text-shadow:0.027em 0.0185em 0 var(--bg), -0.0245em -0.0175em 0 var(--bg);
}
.cmyk-head .plate{
  position:absolute; inset:0; mix-blend-mode:multiply;
  pointer-events:none; user-select:none;
}
.cmyk-head .plate-c{ color:var(--accent); }
.cmyk-head .plate-m{ color:var(--warn-fuerte); translate:0.018em 0.0125em; }
.cmyk-head .plate-y{ color:var(--amarillo); translate:-0.0155em -0.0115em; }
@supports not (mix-blend-mode:multiply){
  .cmyk-head .paper{ color:var(--ink); text-shadow:none; }
  .cmyk-head .plate{ display:none; }
}
/* Sobre fondo oscuro la plancha no funciona —multiplicar sobre tinta da
   tinta—, así que ahí el nombre se imprime liso. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cmyk-head .paper{ color:var(--ink); text-shadow:none; }
  :root:not([data-theme="light"]) .cmyk-head .plate{ display:none; }
}
:root[data-theme="dark"] .cmyk-head .paper{ color:var(--ink); text-shadow:none; }
:root[data-theme="dark"] .cmyk-head .plate{ display:none; }

/* El CUERPO es la unica banda que se ajusta. La banda ocupa la ventana; el
   contenedor de dentro elige hasta donde llega el contenido de cada pagina. */
.cuerpo{ width:100%; }
.cuerpo-dentro{
  max-width:var(--ancho-lectura); margin:0 auto;
  padding-inline:var(--canal); padding-block:1.8rem 3.5rem;
}

/* ── Encabezado de la semana ───────────────────────────────────────────── */
.ahora{ display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; }
.ahora h1{
  font-family:var(--serif); font-size:2.1rem; font-weight:600;
  margin:0; letter-spacing:-0.02em; line-height:1.1;
}
.fechas{ font-size:0.82rem; color:var(--ink-faint); }

/* ── Lo de esta semana: tres renglones, sin adornos ────────────────────── */
.tareas{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.85rem; }
.tareas li{ display:grid; grid-template-columns:5.6rem 1fr; gap:0.9rem; align-items:baseline; }
.tareas .rotulo{
  font-family:var(--serif); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--ink-faint);
}
.tareas .que{ font-size:1rem; }
.tareas .que a{ color:var(--ink); text-decoration-color:var(--rule); text-underline-offset:3px; }
.tareas em{ font-style:normal; font-family:var(--mono); font-size:0.88em; color:var(--ink-soft); }
.tareas b{ color:var(--ink); }

/* ── La acción principal. La tinta cian se gasta aquí ──────────────────── */
.principal{
  display:block; margin-top:1.6rem; text-align:center;
  background:var(--accent-txt); color:var(--bg);
  font-family:var(--serif); font-size:1.05rem; font-weight:600; text-decoration:none;
  padding:0.85rem 1rem; border:1px solid var(--accent-txt); border-radius:var(--r-md);
}
.principal:hover{ background:var(--accent-fuerte); border-color:var(--accent-fuerte); }
.principal small{ display:block; font-weight:400; font-size:0.8rem; opacity:0.85; margin-top:0.15rem; }

/* ── Aviso de la sesión en vivo ────────────────────────────────────────── */
.vivo{
  margin-top:1.4rem; border-left:3px solid var(--warn-fuerte); background:var(--warn-soft);
  padding:0.85rem 1rem; font-size:0.94rem; color:var(--ink); border-radius:var(--r-md);
}
.vivo b{ color:var(--warn); }

/* ── Secciones de abajo ────────────────────────────────────────────────── */
.seccion{ margin-top:2.75rem; }
.seccion > h2{
  font-family:var(--serif); font-size:1.5rem; font-weight:600; margin:0 0 1rem;
  padding-bottom:0.5rem; border-bottom:1px solid var(--rule); letter-spacing:-0.015em;
}

.enlaces{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.enlaces li{ border-bottom:1px solid var(--rule); }
.enlaces a{ display:block; padding:0.85rem 0; color:var(--ink); text-decoration:none; }
.enlaces a:hover{ color:var(--accent-txt); }
.enlaces .titulo{ font-weight:600; font-size:1.05rem; letter-spacing:-0.01em; }
.enlaces .detalle{ display:block; font-size:0.88rem; color:var(--ink-soft); margin-top:0.15rem; }

/* ── Las 4 semanas ─────────────────────────────────────────────────────── */
.semanas{ display:flex; flex-direction:column; gap:1.4rem; }
.semana{ border-left:3px solid var(--rule); padding:0.2rem 0 0.2rem 1rem; }
.semana h3{
  font-family:var(--serif); font-size:1.15rem; font-weight:600; margin:0 0 0.2rem;
  display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; letter-spacing:-0.012em;
}
.semana .meta{ font-size:0.76rem; color:var(--ink-faint); font-weight:400; letter-spacing:0; }
.semana dl{ margin:0.6rem 0 0; display:grid; grid-template-columns:5.6rem 1fr; gap:0.4rem 0.9rem; font-size:0.94rem; }
.semana dt{
  font-family:var(--serif); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--ink-faint); padding-top:0.25rem;
}
.semana dd{ margin:0; color:var(--ink-soft); }
.semana .trampa{ margin-top:0.7rem; font-size:0.9rem; color:var(--ink-soft); }
.semana .trampa b{ color:var(--warn); }

/* Etiquetas de estado: rectángulos con la tinta que toca, nunca píldoras */
.marca-estado{
  font-family:var(--serif); font-size:0.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.1em; border-radius:var(--r-sm); padding:0.15rem 0.5rem;
}
.semana .marca-estado{ display:none; }

/* El estado de cada semana sale del atributo data-semana del body: una sola edición.
   Sin JavaScript — si falla, las cuatro semanas siguen visibles y legibles. */
body[data-semana="1"] .s1,
body[data-semana="2"] .s2,
body[data-semana="3"] .s3,
body[data-semana="4"] .s4{ border-left-color:var(--accent); }

body[data-semana="1"] .s1 > h3 .actual,
body[data-semana="2"] .s2 > h3 .actual,
body[data-semana="3"] .s3 > h3 .actual,
body[data-semana="4"] .s4 > h3 .actual{
  display:inline-block; background:var(--accent-soft); color:var(--accent-fuerte);
}

body[data-semana="2"] .s1 .lista-hecha,
body[data-semana="3"] .s1 .lista-hecha, body[data-semana="3"] .s2 .lista-hecha,
body[data-semana="4"] .s1 .lista-hecha, body[data-semana="4"] .s2 .lista-hecha,
body[data-semana="4"] .s3 .lista-hecha{
  display:inline-block; background:var(--jade-soft); color:var(--jade);
}
body[data-semana="2"] .s1, body[data-semana="3"] .s1, body[data-semana="4"] .s1,
body[data-semana="3"] .s2, body[data-semana="4"] .s2,
body[data-semana="4"] .s3{ opacity:0.72; border-left-color:var(--rule); }

/* En la portada sólo se ve la semana en curso; la ruta completa las muestra todas */
body[data-semana="1"] .portada .semana:not(.s1),
body[data-semana="2"] .portada .semana:not(.s2),
body[data-semana="3"] .portada .semana:not(.s3),
body[data-semana="4"] .portada .semana:not(.s4){ display:none; }

/* ── Tarjetas de lección ───────────────────────────────────────────────── */
.lecciones{ display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); gap:1rem; }
.leccion{ background:var(--bg-elev); border-radius:var(--r-md); padding:1rem 1.1rem; }
.leccion h3{ font-family:var(--serif); font-size:1.1rem; margin:0 0 0.35rem; letter-spacing:-0.012em; }
.leccion .num{
  font-family:var(--serif); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--accent-txt); display:block; margin-bottom:0.25rem;
}
.leccion p{ margin:0 0 0.8rem; font-size:0.92rem; color:var(--ink-soft); }
.leccion .duracion{ font-family:var(--mono); font-size:0.72rem; color:var(--ink-faint); }
.leccion a{ color:var(--accent-txt); font-weight:600; font-size:0.94rem; text-decoration:none; }
.leccion a:hover{ text-decoration:underline; text-underline-offset:3px; }

.prosa{ font-family:var(--serif); font-size:1.05rem; line-height:1.6; color:var(--ink-soft); }
.prosa strong{ color:var(--ink); }
.prosa.pequena{ font-size:0.92rem; }

/* El PIE es la tercera banda, fuera de <main>. Su filete cruza la ventana
   entera, como el de la cabecera: las dos son cromo del sitio y se leen
   igual en todas las paginas. */
.pie-pagina{
  width:100%; border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.pie-dentro{
  max-width:var(--ancho-cabecera); margin:0 auto;
  padding-inline:var(--canal);
}
.pie{
  margin:0; padding-block:1.2rem 2.4rem;
  font-size:0.85rem; color:var(--ink-faint);
}

a{ color:var(--accent-txt); text-underline-offset:3px; }
a:focus-visible, :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }
::selection{ background:var(--accent-borde); color:var(--ink); }

@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }

/* ── La portada muestra una sola semana: sin riel ni atenuado ──────────── */
.portada .semana{ border-left:0; padding-left:0; opacity:1; }
.portada .semana .trampa{ margin-top:1rem; }

code{
  font-family:var(--mono); font-size:0.86em;
  background:var(--accent-soft); color:var(--accent-fuerte);
  padding:0.1em 0.3em; border-radius:var(--r-sm);
}

/* ════════════════════════════════════════════════════════════════════════
   Acceso, avisos, formularios y panel
   ════════════════════════════════════════════════════════════════════════ */

/* ── Entrar: la portada del periódico ──────────────────────────────────── */
.acceso{ max-width:26rem; margin:2.5rem auto 0; }
.acceso h1{
  font-family:var(--serif); font-size:4.2rem; font-weight:600;
  margin:0 0 1rem; letter-spacing:-0.03em; line-height:0.95;
}
.eyebrow{
  font-family:var(--serif); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 0.7rem;
}
.nota-acceso{ margin-top:1.6rem; font-size:0.88rem; color:var(--ink-faint); }

/* ── Formularios ───────────────────────────────────────────────────────── */
.formulario{ display:flex; flex-direction:column; gap:0.35rem; margin-top:1.6rem; }
.formulario.ancho{ max-width:32rem; }
.formulario label{
  font-family:var(--serif); font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:0.9rem;
}
.formulario input, .formulario select{
  font-family:var(--serif); font-size:1rem;
  background:var(--bg-elev); color:var(--ink); caret-color:var(--accent);
  border:1px solid var(--rule); border-radius:var(--r-md);
  padding:0.6rem 0.7rem; width:100%;
}
.formulario input:hover, .formulario select:hover{ border-color:var(--ink-faint); }
.formulario input:focus, .formulario select:focus{ border-color:var(--accent); outline-offset:0; }
.formulario .principal{ margin-top:1.5rem; }
.ayuda{ font-size:0.86rem; color:var(--ink-soft); margin:0.4rem 0 0; }

/* ── Avisos ────────────────────────────────────────────────────────────── */
.avisos{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.6rem; }
.aviso{ margin:0; padding:0.75rem 1rem; border-left:3px solid; font-size:0.95rem; border-radius:var(--r-md); }
.aviso-ok{ border-color:var(--accent); background:var(--accent-soft); color:var(--ink); }
.aviso-error{ border-color:var(--warn-fuerte); background:var(--warn-soft); color:var(--ink); }

/* ── Entregas del alumno ───────────────────────────────────────────────── */
.entregas-mias{ list-style:none; margin:0; padding:0; }
.fila-entrega{
  display:grid; grid-template-columns:6rem 7.5rem 1fr; gap:0.9rem; align-items:center;
  padding:0.75rem 0; border-bottom:1px solid var(--rule); font-size:0.95rem;
}
.fila-entrega.es-actual{ font-weight:600; }
.fila-entrega .sem{
  font-family:var(--serif); font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--ink-faint);
}
.fila-entrega .nota{ color:var(--ink-soft); font-size:0.9rem; }
.estado{
  font-size:0.72rem; letter-spacing:0.02em;
  border-radius:var(--r-sm); padding:0.2rem 0.6rem; text-align:center;
}
.estado-pendiente{ background:var(--warn-soft); color:var(--warn); }
.estado-entregada{ background:var(--bg-elev); color:var(--ink-soft); }
.estado-revisada{ background:var(--jade-soft); color:var(--jade); }

/* ── Panel del docente ─────────────────────────────────────────────────── */
.tabla-envoltura{ overflow-x:auto; }
.tabla{ width:100%; border-collapse:collapse; font-size:0.94rem; }
.tabla th{
  text-align:left; font-family:var(--serif); font-size:0.68rem;
  text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-faint);
  border-bottom:1px solid var(--rule); padding:0.55rem 0.6rem 0.55rem 0;
  white-space:nowrap;
}
.tabla td{ padding:0.7rem 0.6rem 0.7rem 0; border-bottom:1px solid var(--rule); vertical-align:top; }
.mono{ font-family:var(--mono); font-size:0.85rem; }
.acciones{ display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; }

.pildora{
  font-size:0.7rem; letter-spacing:0.02em;
  border-radius:var(--r-sm); padding:0.2rem 0.55rem; white-space:nowrap;
}
.pildora-si{ background:var(--jade-soft); color:var(--jade); }
.pildora-no{ background:var(--warn-soft); color:var(--warn); }
.pildora-tibia{ background:var(--accent-soft); color:var(--accent-fuerte); }

.boton-menor{
  font-family:var(--serif); font-size:0.85rem; font-weight:600; cursor:pointer;
  background:transparent; color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r-md); padding:0.35rem 0.7rem;
}
.boton-menor:hover{ background:var(--bg-elev); border-color:var(--ink-faint); }
.boton-menor.peligro:hover{ border-color:var(--warn); color:var(--warn); background:var(--warn-soft); }
.campo-menor{
  font-family:var(--serif); font-size:0.85rem; width:9.5rem;
  background:var(--bg-elev); color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r-md); padding:0.35rem 0.5rem;
}

.bloque-alumno{ margin-top:1.9rem; }
.bloque-alumno h3{
  font-family:var(--serif); font-size:1.1rem; margin:0 0 0.6rem;
  padding-bottom:0.4rem; border-bottom:1px solid var(--rule); letter-spacing:-0.012em;
}
.rejilla-semanas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem,1fr)); gap:0.8rem; }
.celda-entrega{
  display:flex; flex-direction:column; gap:0.35rem;
  background:var(--bg-elev); border-radius:var(--r-md); padding:0.8rem;
}
.celda-entrega label{
  font-family:var(--serif); font-size:0.66rem; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--ink-faint);
}
.celda-entrega select, .celda-entrega input{
  font-family:var(--serif); font-size:0.88rem; width:100%;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r-sm); padding:0.35rem 0.45rem;
}

.volver{ margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--rule); font-size:0.92rem; }
.volver a{ color:var(--accent-txt); text-decoration:none; }
.volver a:hover{ text-decoration:underline; text-underline-offset:3px; }
/* En la ruta se ven las 4 semanas aunque haya una en curso */
.semanas.todas .semana{ display:block !important; }

/* ════════════════════════════════════════════════════════════════════════
   EL REPRODUCTOR DEL CURSO
   Barra lateral con la estructura, lienzo de lectura y el paso a paso.
   Sin JavaScript: lo plegable son <details> y el estado vive en el servidor.
   ════════════════════════════════════════════════════════════════════════ */

/* 🪤 Los modificadores de ancho van con prefijo `ancho-`, y NO es cosmético.
   Se llamaban `amplio` y `taller` a secas, y `taller` es tambien el nombre del
   componente del Ajolote —`.taller{ display:grid; 1fr 1fr }`—. El selector no
   los distinguia: el contenedor de la pagina se volvia una rejilla de dos
   columnas, el contenido se acomodaba en la mitad izquierda y la derecha
   quedaba en blanco. El lienzo del reto medía 285 px donde debía medir 520.
   Un modificador de ancho nunca debe poder chocar con una clase de componente:
   por eso el prefijo, y por eso lo vigila una prueba en prueba_armazon.py. */
.cuerpo-dentro.ancho-amplio{ max-width:var(--ancho-amplio); }
.cuerpo-dentro.ancho-taller{ max-width:var(--ancho-taller); }

.con-lateral{ display:grid; gap:2.5rem; grid-template-columns:17rem minmax(0,1fr); }

/* En pantalla chica el contenido va primero: la estructura es navegación
   secundaria, y el alumno viene a leer, no a explorar el árbol. */
@media (max-width:52rem){
  .con-lateral{ grid-template-columns:1fr; gap:2.5rem; }
  .con-lateral .lienzo{ order:1; }
  .con-lateral .lateral{ order:2; border-top:1px solid var(--rule); padding-top:1.5rem; }
}

/* ── Medidor de avance: tramos, como los cuadros de una plana ──────────── */
.medidor{
  --medidor-hueco:var(--bg);
  position:relative; height:6px; background:var(--rule);
  overflow:hidden; margin:0.55rem 0 0.35rem;
}
.medidor i{ display:block; height:100%; background:var(--jade-fuerte); }
.medidor::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0 26px, var(--medidor-hueco) 26px 29px);
}
.medidor.grande{ height:10px; }

/* ── La palomita: una casilla que se llena. El símbolo de haber terminado ── */
.paloma{
  display:inline-block; flex:0 0 auto;
  width:1rem; height:1rem; border-radius:var(--r-sm);
  border:1.5px solid var(--ink-faint); background:transparent;
  position:relative; vertical-align:-0.15rem;
}
.paloma.chica{ width:0.82rem; height:0.82rem; vertical-align:-0.08rem; }
.paloma.llena{ background:var(--jade-fuerte); border-color:var(--jade-fuerte); }
.paloma.llena::after{
  content:""; position:absolute; left:31%; top:14%;
  width:24%; height:48%;
  border:solid var(--bg); border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.paloma.chica.llena::after{ border-width:0 1.5px 1.5px 0; }

/* ── Barra lateral ─────────────────────────────────────────────────────── */
.lateral{ font-size:0.92rem; align-self:start; position:sticky; top:1.5rem; }
@media (max-width:52rem){ .lateral{ position:static; } }

.lateral-cabeza{ padding-bottom:1rem; border-bottom:1px solid var(--rule); }
.lateral-marca{
  font-family:var(--serif); font-size:1.1rem; font-weight:600;
  color:var(--ink); text-decoration:none; display:block; line-height:1.25;
  letter-spacing:-0.015em;
}
.lateral-marca:hover{ color:var(--accent-txt); }
.lateral-pct{ margin:0; font-size:0.82rem; color:var(--ink-soft); }
.lateral-pct b{ color:var(--ink); }

.lateral-arbol{ margin-top:1.1rem; }
.lateral-semana + .lateral-semana{ margin-top:1.2rem; }
.lateral-semana h3{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:0 0 0.4rem; font-family:var(--serif); font-size:0.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-faint);
}
.lateral-pct-sem{ letter-spacing:0; font-family:var(--mono); font-size:0.72rem; }
.lateral-pct-sem.completa{ color:var(--jade); }

.lateral-unidad{ border-left:2px solid var(--rule); }
.lateral-unidad[open]{ border-left-color:var(--accent); }
.lateral-unidad summary{
  display:flex; align-items:center; gap:0.5rem;
  padding:0.4rem 0 0.4rem 0.65rem; cursor:pointer; list-style:none;
  color:var(--ink-soft);
}
.lateral-unidad summary::-webkit-details-marker{ display:none; }
.lateral-unidad summary:hover{ color:var(--accent-txt); }
.lateral-unidad[open] > summary .lateral-nombre{ color:var(--ink); font-weight:600; }
.lateral-nombre{ flex:1 1 auto; line-height:1.3; font-size:0.88rem; }
.lateral-cuenta{ font-family:var(--mono); font-size:0.72rem; color:var(--ink-faint); }

.lateral-paginas{ list-style:none; margin:0 0 0.5rem; padding:0 0 0 0.65rem; }
.lateral-paginas a{
  display:flex; align-items:flex-start; gap:0.5rem;
  padding:0.32rem 0.45rem 0.32rem 0.6rem;
  text-decoration:none; color:var(--ink-soft); line-height:1.35;
  border-radius:var(--r-sm);
}
.lateral-paginas a:hover{ background:var(--accent-soft); color:var(--accent-fuerte); }
.lateral-pagina-titulo{ font-size:0.85rem; }
.lateral-paginas li.aqui > a{ background:var(--accent-soft); color:var(--accent-fuerte); font-weight:600; }
.marcador-mini{ color:var(--warn); font-size:0.75rem; }
.lateral-pie{ margin-top:1.3rem; padding-top:0.85rem; border-top:1px solid var(--rule); font-size:0.85rem; }
.lateral-pie a{ color:var(--accent-txt); text-decoration:none; }

/* ── El lienzo: donde se lee ───────────────────────────────────────────── */
.lienzo{ min-width:0; }
.lienzo-cabeza{ border-bottom:1px solid var(--rule); padding-bottom:1.2rem; }
.migas{ margin:0 0 0.55rem; font-size:0.82rem; color:var(--ink-faint); }
.migas a{ color:var(--ink-soft); text-decoration:none; }
.migas a:hover{ color:var(--accent-txt); }
.migas span{ margin:0 0.35rem; }

.lienzo-meta{ display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.lienzo h1{
  font-family:var(--serif); font-size:2.2rem; line-height:1.12;
  margin:0.6rem 0 0; letter-spacing:-0.022em; text-wrap:balance; font-weight:600;
}
.contador{ font-family:var(--mono); font-size:0.74rem; color:var(--ink-faint); }
.minutos{ font-size:0.8rem; color:var(--ink-faint); }

/* Etiqueta de tipo: cada clase de página pide algo distinto del alumno */
.etiqueta{
  font-family:var(--serif); font-size:0.68rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.12em; padding:0.2rem 0.5rem; border-radius:var(--r-sm);
  background:var(--bg-elev); color:var(--ink-soft);
}
.etiqueta-idea{ background:var(--accent-soft); color:var(--accent-fuerte); }
.etiqueta-lectura{ background:var(--bg-elev); color:var(--ink-soft); }
.etiqueta-practica{ background:var(--jade-soft); color:var(--jade); }
.etiqueta-cuaderno{ background:var(--jade-soft); color:var(--jade); }
.etiqueta-entrega{ background:var(--warn-soft); color:var(--warn); }
.etiqueta-comprueba{ background:var(--accent-soft); color:var(--accent-fuerte); }

/* ── Tipografía del cuerpo de una página ───────────────────────────────── */
.prosa-larga{ font-family:var(--serif); font-size:1.08rem; line-height:1.62; color:var(--ink-soft); }
.prosa-larga p{ margin:1.15rem 0; }
.prosa-larga b, .prosa-larga strong{ color:var(--ink); font-weight:600; }
.prosa-larga ul, .prosa-larga ol{ margin:1.15rem 0; padding-left:1.4rem; }
.prosa-larga li{ margin:0.45rem 0; }
.prosa-larga a{ color:var(--accent-txt); }
.prosa-larga kbd{
  font-family:var(--mono); font-size:0.8em; border:1px solid var(--rule);
  border-bottom-width:2px; border-radius:var(--r-sm); padding:0.1em 0.35em; background:var(--bg-elev);
}
.prosa-larga pre{
  background:var(--obsidian); color:var(--papel);
  padding:0.9rem 1rem; border-radius:var(--r-md); overflow-x:auto;
  font-size:0.86rem; line-height:1.5; margin:1.3rem 0;
}
.prosa-larga pre code{ background:none; color:inherit; padding:0; font-size:1em; }

/* El párrafo que carga la idea de la página. Uno por página, no cuatro. */
.prosa-larga .clave{
  font-size:1rem; line-height:1.55;
  border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:0.85rem 1rem; margin:1.5rem 0; color:var(--ink); border-radius:var(--r-md);
}
.prosa-larga .aviso-inline{
  font-size:0.96rem;
  border-left:3px solid var(--jade-fuerte); background:var(--jade-soft);
  padding:0.75rem 0.95rem; margin:1.4rem 0; color:var(--ink); border-radius:var(--r-md);
}
.prosa-larga .salvedad{
  font-size:0.94rem;
  border:1px solid var(--rule); border-radius:var(--r-md);
  padding:0.85rem 1rem; margin:1.5rem 0; color:var(--ink-soft);
}
.prosa-larga .salvedad b{ color:var(--warn); }

.tabla-comparativa{ width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:0.94rem; }
.tabla-comparativa th{
  text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--ink-faint); border-bottom:1px solid var(--rule); padding:0.45rem 0.6rem 0.45rem 0;
}
.tabla-comparativa td{
  padding:0.6rem 0.6rem 0.6rem 0; border-bottom:1px solid var(--rule); vertical-align:top;
}

.lista-check{ list-style:none; padding-left:0; }
.lista-check li{ position:relative; padding-left:1.7rem; font-size:0.98rem; color:var(--ink); }
.lista-check li::before{
  content:""; position:absolute; left:0; top:0.42em;
  width:0.85rem; height:0.85rem; border-radius:var(--r-sm); border:1.5px solid var(--ink-faint);
}

/* ── Salida a lo externo ───────────────────────────────────────────────── */
.salida{ margin-top:1.9rem; }
.salida .principal{ margin-top:0; }
.secundario{
  display:block; margin-top:1.3rem; text-align:center;
  border:1px solid var(--rule); background:transparent; color:var(--ink);
  font-family:var(--serif); font-size:1rem; font-weight:600; text-decoration:none;
  padding:0.75rem 1rem; border-radius:var(--r-md);
}
.secundario small{ display:block; font-weight:400; font-size:0.8rem; color:var(--ink-faint); }
.secundario:hover{ background:var(--bg-elev); border-color:var(--ink-faint); }

/* ── Marcar y moverse ──────────────────────────────────────────────────── */
.acciones-pagina{
  display:flex; gap:0.7rem; flex-wrap:wrap; align-items:center;
  margin-top:2.3rem; padding-top:1.4rem; border-top:1px solid var(--rule);
}
.boton-hecho{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--serif); font-size:0.98rem; font-weight:600; cursor:pointer;
  border:1px solid var(--jade); background:transparent; color:var(--jade);
  padding:0.6rem 1.1rem; border-radius:var(--r-md);
}
.boton-hecho:hover{ background:var(--jade-soft); }
.boton-hecho.hecho{ background:var(--jade-soft); }
.boton-marcar{
  font-family:var(--serif); font-size:0.92rem; cursor:pointer;
  border:1px solid var(--rule); background:transparent; color:var(--ink-soft);
  padding:0.6rem 0.9rem; border-radius:var(--r-md);
}
.boton-marcar:hover{ border-color:var(--warn); color:var(--warn); }
.boton-marcar.activo{ border-color:var(--warn); color:var(--warn); background:var(--warn-soft); }

.paso{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:1.7rem; padding-top:1.3rem; border-top:1px solid var(--rule);
}
.paso a{ text-decoration:none; color:var(--ink-soft); max-width:46%; }
.paso a:hover{ color:var(--accent-txt); }
.paso-adelante{ text-align:right; margin-left:auto; }
.paso-rotulo{
  display:block; font-family:var(--serif); font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--ink-faint);
}
.paso-titulo{ display:block; font-size:0.92rem; font-weight:600; line-height:1.3; margin-top:0.2rem; }
.paso-fin{ font-size:0.88rem; color:var(--ink-faint); margin-left:auto; }

/* ── Mapa del curso ────────────────────────────────────────────────────── */
.resumen-avance{
  --medidor-hueco:var(--bg-elev);
  margin-top:1.7rem; padding:1.2rem 1.3rem;
  border-radius:var(--r-md); background:var(--bg-elev);
}
.resumen-avance p{ margin:0.25rem 0 0; font-size:0.9rem; color:var(--ink-soft); }
.resumen-avance p b{ color:var(--ink); font-size:1.1rem; }
.resumen-avance .principal{ margin-top:1.1rem; }

.bloque-semana > h2{ display:flex; align-items:baseline; gap:0.6rem; flex-wrap:wrap; }
.sem-pct{ margin-left:auto; font-family:var(--mono); font-size:0.78rem; color:var(--ink-faint); }
.semana-en-curso > h2{ color:var(--accent-txt); border-bottom-color:var(--accent); }

.rejilla-unidades{
  display:grid; gap:0.9rem; margin-top:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
}
.tarjeta-unidad{
  display:block; text-decoration:none; color:inherit;
  border-radius:var(--r-md); background:var(--bg-elev);
  padding:0.95rem 1.05rem; border-left:3px solid transparent;
}
.tarjeta-unidad:hover{ background:var(--accent-soft); border-left-color:var(--accent); }
.tarjeta-unidad.completa{ border-left-color:var(--jade-fuerte); }
.tarjeta-codigo{
  font-family:var(--serif); font-size:0.66rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-txt);
}
.tarjeta-unidad h3{
  font-family:var(--serif); font-size:1.12rem; line-height:1.25;
  margin:0.25rem 0 0.45rem; letter-spacing:-0.015em;
}
.tarjeta-resumen{ margin:0; font-size:0.88rem; line-height:1.45; color:var(--ink-soft); }
.tarjeta-pie{
  display:flex; justify-content:space-between; gap:0.5rem;
  margin:0.55rem 0 0; font-size:0.74rem; color:var(--ink-faint);
  font-family:var(--mono);
}

/* ── «Sigue aquí» en el inicio del alumno ──────────────────────────────── */
.continuar{
  --medidor-hueco:var(--bg-elev);
  margin-top:1.6rem; padding:1.2rem 1.3rem;
  border-left:3px solid var(--accent);
  border-radius:var(--r-md); background:var(--bg-elev);
}
.continuar-rotulo{
  font-family:var(--serif); font-size:0.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--accent-txt);
}
.continuar h2{
  font-family:var(--serif); font-size:1.6rem; line-height:1.18;
  margin:0.35rem 0 0.3rem; letter-spacing:-0.02em;
}
.continuar-donde{ margin:0; font-size:0.86rem; color:var(--ink-faint); }
.continuar-pct{ margin:0; font-size:0.8rem; color:var(--ink-soft); font-family:var(--mono); }
.continuar .principal{ margin-top:1.1rem; }

/* ── Tabla de avance del docente ───────────────────────────────────────── */
.celda-avance{ min-width:7rem; }
.celda-avance .medidor{ margin:0 0 0.25rem; }
.col-unidad{ text-align:center; font-size:0.78rem; }
.punto{
  display:inline-block; min-width:1.4rem; padding:0.1rem 0.25rem; border-radius:var(--r-sm);
  font-family:var(--mono); font-size:0.75rem;
  background:var(--bg-elev); color:var(--ink-faint);
}
.punto-medio{ background:var(--accent-soft); color:var(--accent-fuerte); }
.punto-lleno{ background:var(--jade-soft); color:var(--jade); }

.lista-contenido{ margin:0.6rem 0 0; padding-left:1.3rem; font-size:0.92rem; }
.lista-contenido li{ margin:0.35rem 0; display:flex; gap:0.5rem; align-items:baseline; flex-wrap:wrap; }
.lista-contenido a{ color:var(--ink); text-decoration:none; }
.lista-contenido a:hover{ color:var(--accent-txt); }

/* ════════════════════════════════════════════════════════════════════════
   LA ZONA DE PRÁCTICA
   Python corre en el navegador del alumno (Pyodide, servido por nosotros).
   El taller vive en /practicar y una copia plegada al pie de cada página.
   ════════════════════════════════════════════════════════════════════════ */

.consola{
  background:var(--bg-elev); border-radius:var(--r-md);
  padding:0.95rem 1.05rem 1.05rem; margin-top:1.1rem;
}
.consola.corriendo{ box-shadow:inset 3px 0 0 var(--accent); }

.consola-barra{
  display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem;
  flex-wrap:wrap; margin-bottom:0.6rem; padding-bottom:0.5rem;
  border-bottom:1px solid var(--rule);
}
.consola-titulo{
  font-family:var(--serif); font-size:0.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--ink-faint);
}
.consola-estado{ font-size:0.82rem; color:var(--accent-txt); font-family:var(--mono); }

.consola-rotulo{
  display:block; font-family:var(--serif); font-size:0.68rem; font-weight:600;
  color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.14em;
  margin:0.7rem 0 0.3rem;
}

.consola-codigo, .consola-entradas{
  display:block; width:100%; resize:vertical;
  font-family:var(--mono); font-size:0.88rem; line-height:1.6;
  background:var(--obsidian); color:var(--papel);
  border:1px solid var(--obsidian); border-radius:var(--r-md);
  padding:0.75rem 0.85rem;
  tab-size:4;
}
.consola-codigo{ min-height:8.5rem; }
.consola-codigo.alta{ min-height:15rem; }
.consola-entradas{ min-height:3.5rem; font-size:0.85rem; }
.consola-codigo:focus, .consola-entradas:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.consola-plegable{ margin-top:0.75rem; }
.consola-plegable summary{ cursor:pointer; font-size:0.86rem; color:var(--ink-soft); padding:0.2rem 0; }
.consola-plegable summary:hover{ color:var(--accent-txt); }
.consola-plegable .ayuda{ margin-top:0.35rem; }

.consola-botones{ display:flex; gap:0.55rem; flex-wrap:wrap; align-items:center; margin-top:0.9rem; }
.principal-menor{
  font-family:var(--serif); font-size:0.95rem; font-weight:600; cursor:pointer;
  background:var(--accent-txt); color:var(--bg); border:1px solid var(--accent-txt);
  padding:0.55rem 1.1rem; border-radius:var(--r-md);
}
.principal-menor:hover{ background:var(--accent-fuerte); border-color:var(--accent-fuerte); }
.principal-menor small{ display:inline; font-weight:400; font-size:0.74rem; opacity:0.8; margin-left:0.4rem; }
.principal-menor:disabled{ opacity:0.55; cursor:progress; }
.consola-parar{
  font-family:var(--serif); font-size:0.92rem; font-weight:600; cursor:pointer;
  border:1px solid var(--warn); background:var(--warn-soft); color:var(--warn);
  padding:0.55rem 0.95rem; border-radius:var(--r-md);
}

.consola-salida{
  margin:0.35rem 0 0; min-height:5rem; max-height:22rem; overflow:auto;
  background:var(--obsidian); color:var(--papel);
  border-radius:var(--r-md); padding:0.75rem 0.85rem;
  font-family:var(--mono); font-size:0.85rem; line-height:1.6;
  white-space:pre-wrap; word-break:break-word;
}
.consola-salida .es-error{ color:#ff90b1; }   /* magenta -400: legible sobre tinta */
.consola-salida .es-aviso{ color:#9b9797; }

/* ── «Probar esto» junto a cada ejemplo de una página del curso ────────── */
.ejemplo{ position:relative; }
.ejemplo .probar{
  position:absolute; top:0.5rem; right:0.5rem;
  font-family:var(--serif); font-size:0.74rem; font-weight:600; cursor:pointer;
  background:rgba(243,242,242,0.12); color:var(--papel);
  border:1px solid rgba(243,242,242,0.3); border-radius:var(--r-sm);
  padding:0.2rem 0.55rem;
  opacity:0; transition:opacity 0.12s ease;
}
.ejemplo:hover .probar, .ejemplo .probar:focus{ opacity:1; }
/* En táctil no hay hover: el botón se queda visible. */
@media (hover: none){ .ejemplo .probar{ opacity:1; } }
.ejemplo .probar:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }

#consola-de-pagina{ margin-top:2.1rem; padding-top:1.4rem; border-top:1px solid var(--rule); }
.titulo-taller{ font-family:var(--serif); font-size:1.4rem; margin:0; letter-spacing:-0.015em; }

/* ── Retos de arranque ─────────────────────────────────────────────────── */
.rejilla-retos{
  display:grid; gap:0.9rem; margin-top:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
}
.reto{ background:var(--bg-elev); border-radius:var(--r-md); padding:0.9rem 1rem; }
.reto-sem{
  font-family:var(--serif); font-size:0.66rem; font-weight:600;
  letter-spacing:0.14em; color:var(--accent-txt); text-transform:uppercase;
}
.reto h3{ font-family:var(--serif); font-size:1.1rem; line-height:1.25; margin:0.25rem 0 0.55rem; letter-spacing:-0.015em; }
.reto pre{
  background:var(--obsidian); color:var(--papel); border-radius:var(--r-md);
  padding:0.65rem 0.75rem; overflow-x:auto;
  font-size:0.8rem; line-height:1.5; margin:0 0 0.55rem;
}
.reto pre code{ background:none; color:inherit; padding:0; font-size:1em; }
.reto p{ margin:0; font-size:0.86rem; color:var(--ink-soft); line-height:1.45; }

/* ── futurecoder incrustado ────────────────────────────────────────────── */
.marco-externo{
  margin-top:1.1rem; border:1px solid var(--rule); border-radius:var(--r-md);
  overflow:hidden; background:var(--bg-elev);
}
.marco-externo iframe{ display:block; width:100%; height:min(78vh, 46rem); border:0; }
@media (max-width:52rem){ .marco-externo iframe{ height:34rem; } }

/* ── Los recursos, contados como un blog ───────────────────────────────────
      Plana de diario: cintillos con filete arriba, titular serif, bajada en
      cursiva. Sin tarjetas con sombra — aquí todo se separa con una raya de
      1 px, como en el impreso. Todo el color sale de los tokens, así que el
      modo oscuro ya viene resuelto. */

.entradas{ display:grid; gap:0; margin-top:1rem; }

.entrada{
  border-top:1px solid var(--rule);
  padding:1.15rem 0 1.05rem;
}
.entrada:last-child{ border-bottom:1px solid var(--rule); }

.entrada-liga{ display:block; text-decoration:none; color:inherit; }
.entrada-liga:hover h3{ color:var(--accent-txt); }
.entrada-liga:focus-visible{
  outline:2px solid var(--accent-txt); outline-offset:3px; border-radius:var(--r-sm);
}

.entrada-unidad{
  font-family:var(--serif); font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent-txt);
}
.entrada h3{
  font-family:var(--serif); font-size:1.42rem; font-weight:600; line-height:1.2;
  margin:0.28rem 0 0.4rem; color:var(--ink); text-wrap:balance;
}
.entrada-bajada{
  font-family:var(--serif); font-style:italic; font-size:1rem; line-height:1.5;
  color:var(--ink-soft); margin:0;
}
.entrada-pie{
  display:flex; flex-wrap:wrap; gap:0.9rem; align-items:baseline;
  margin:0.6rem 0 0; font-size:0.8rem; color:var(--ink-faint);
}
.entrada-nota{
  font-family:var(--serif); font-size:0.72rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--warn);
}

/* ── La entrada abierta ───────────────────────────────────────────────── */

.articulo{ max-width:38rem; margin:0 auto; }

.articulo-cabeza{ border-bottom:1px solid var(--rule-mayor); padding-bottom:1.1rem; }
.articulo-cabeza h1{
  font-family:var(--serif); font-size:2.6rem; font-weight:600; line-height:1.06;
  letter-spacing:-0.02em; margin:0.5rem 0 0.6rem; color:var(--ink);
  text-wrap:balance;
}
.articulo-bajada{
  font-family:var(--serif); font-style:italic; font-size:1.16rem; line-height:1.48;
  color:var(--ink-soft); margin:0 0 0.9rem;
}
.articulo-meta{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:baseline;
  margin:0; font-size:0.8rem; color:var(--ink-faint);
  font-family:var(--serif); letter-spacing:0.06em; text-transform:uppercase;
}

/* La frase de la unidad. Va a sangría negativa con un filete de tinta: es lo
   único de la página que se lee aunque el lector no lea nada más. */
.lema{
  font-family:var(--serif); font-size:1.3rem; font-weight:600; line-height:1.34;
  color:var(--ink); border-left:3px solid var(--accent);
  padding:0.9rem 0 0.9rem 1.1rem; margin:1.8rem 0 1.4rem;
  text-wrap:balance;
}

/* ── El material de la unidad ─────────────────────────────────────────── */

.materiales{ margin-top:2.6rem; border-top:1px solid var(--rule-mayor); padding-top:1.3rem; }
.materiales h2{
  font-family:var(--serif); font-size:0.74rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin:0 0 0.9rem;
}

.lista-materiales{ list-style:none; padding:0; margin:0; }
.material{
  display:grid; grid-template-columns:7.5rem 1fr; gap:0.2rem 1rem;
  border-top:1px solid var(--rule); padding:0.8rem 0;
}
.material:first-child{ border-top:none; }

.material-que{
  grid-row:span 2;
  font-family:var(--serif); font-size:0.68rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-faint); padding-top:0.28rem;
}
.material-titulo{
  font-family:var(--serif); font-size:1.02rem; font-weight:600; line-height:1.34;
  color:var(--accent-txt); text-decoration:none;
}
.material-titulo:hover{ text-decoration:underline; text-underline-offset:3px; }
.material-titulo:focus-visible{
  outline:2px solid var(--accent-txt); outline-offset:2px; border-radius:var(--r-sm);
}
/* Lo que no sale del sitio no se pinta como enlace: no engaña al dedo. */
.material-interno{ color:var(--ink); font-weight:600; }
.material-detalle{
  grid-column:2; font-size:0.88rem; line-height:1.45; color:var(--ink-faint);
}

.socorro-articulo{
  margin:2.4rem 0 0; padding:0.85rem 1rem;
  border:1px solid var(--warn-borde); background:var(--warn-soft);
  border-radius:var(--r-md); font-size:0.94rem; color:var(--ink);
}
.socorro-articulo a{ color:var(--warn); font-weight:600; }

@media (max-width: 34rem){
  .articulo-cabeza h1{ font-size:2.05rem; }
  .entrada h3{ font-size:1.24rem; }
  .lema{ font-size:1.12rem; }
  .material{ grid-template-columns:1fr; gap:0.2rem; }
  .material-que{ grid-row:auto; padding-top:0; }
  .material-detalle{ grid-column:1; }
}

/* ── El Ajolote ────────────────────────────────────────────────────────────
      Cuadrícula a la izquierda, editor a la derecha, y en el celular uno
      encima del otro — con el mundo ARRIBA, porque es lo que hay que mirar
      mientras se escribe. Todo el color sale de los tokens: el canvas los lee
      con getComputedStyle, así que el modo oscuro también le aplica. */

.reto-cabeza{ border-bottom:1px solid var(--rule-mayor); padding-bottom:0.9rem; }
.reto-cabeza h1{
  font-family:var(--serif); font-size:2.2rem; font-weight:600; line-height:1.08;
  letter-spacing:-0.02em; margin:0.45rem 0 0.55rem; color:var(--ink);
  text-wrap:balance;
}

.reto-etiquetas{ display:flex; flex-wrap:wrap; gap:0.5rem; margin:0; }
.reto-ensena, .reto-unidad{
  font-family:var(--serif); font-size:0.68rem; letter-spacing:0.13em;
  text-transform:uppercase; padding:0.2rem 0.5rem; border-radius:var(--r-sm);
}
.reto-ensena{ background:var(--accent-soft); color:var(--accent-txt); }
.reto-unidad{ border:1px solid var(--rule); color:var(--ink-faint); }

.enunciado{
  font-family:var(--serif); font-size:1.14rem; line-height:1.55;
  color:var(--ink); border-left:3px solid var(--accent);
  padding:0.85rem 0 0.85rem 1.05rem; margin:1.5rem 0 1.6rem;
}

/* ── el taller: mundo + editor ─────────────────────────────────────────── */

.taller{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.6rem; align-items:start; }
@media (max-width: 52rem){ .taller{ grid-template-columns:1fr; } }

.mundo{ position:sticky; top:1rem; }
@media (max-width: 52rem){ .mundo{ position:static; } }

.mundo-lienzo{
  display:block; max-width:100%;
  border:1px solid var(--rule-mayor); border-radius:var(--r-md);
  background:var(--bg-elev);
}

.marcador{
  font-family:var(--mono); font-size:0.78rem; color:var(--ink-faint);
  margin:0.5rem 0 0; font-variant-numeric:tabular-nums;
}

.veredicto{
  font-family:var(--serif); font-size:1rem; line-height:1.45; font-weight:600;
  padding:0.75rem 0.95rem; margin:0.7rem 0 0; border-radius:var(--r-md);
  border-left:3px solid;
}
.veredicto-si{ background:var(--jade-soft); border-color:var(--jade-fuerte); color:var(--ink); }
.veredicto-no{ background:var(--warn-soft); border-color:var(--warn-fuerte); color:var(--ink); }

.leyenda{ font-size:0.82rem; line-height:1.45; color:var(--ink-faint); margin:0.7rem 0 0; }

.consola-ajolote{ margin-top:0; }
.consola-codigo.alto-medio{ min-height:17rem; }

.rapidez-rotulo{
  font-family:var(--serif); font-size:0.68rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--ink-faint); margin-left:auto;
  align-self:center;
}
.ajolote-rapidez{
  font-family:var(--serif); font-size:0.88rem; color:var(--ink);
  background:var(--bg-elev); border:1px solid var(--rule);
  border-radius:var(--r-md); padding:0.35rem 0.5rem;
}

.ajolote-pista{
  margin:1.8rem 0 0; border:1px solid var(--rule); border-radius:var(--r-md);
  padding:0.75rem 1rem; background:var(--bg-elev);
}
.ajolote-pista summary{
  font-family:var(--serif); font-weight:600; cursor:pointer; color:var(--accent-txt);
}
.ajolote-pista summary:focus-visible{ outline:2px solid var(--accent-txt); outline-offset:3px; }
.ajolote-pista p{ font-size:0.96rem; line-height:1.55; color:var(--ink-soft); margin:0.7rem 0 0; }

/* ── el índice de retos ────────────────────────────────────────────────── */

.retos-lista{ list-style:none; padding:0; margin:1rem 0 0; counter-reset:none; }
.reto-fila{ border-top:1px solid var(--rule); }
.reto-fila:last-child{ border-bottom:1px solid var(--rule); }

.reto-liga{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr) auto; gap:0 1rem;
  align-items:start; padding:1.05rem 0; text-decoration:none; color:inherit;
}
.reto-liga:hover .reto-titulo{ color:var(--accent-txt); }
.reto-liga:focus-visible{ outline:2px solid var(--accent-txt); outline-offset:3px; border-radius:var(--r-sm); }

.reto-num{
  font-family:var(--serif); font-size:1.8rem; font-weight:600; line-height:1;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.reto-cuerpo{ display:block; }
.reto-titulo{
  display:block; font-family:var(--serif); font-size:1.22rem; font-weight:600;
  line-height:1.25; color:var(--ink); margin-bottom:0.28rem;
}
.reto-enunciado{
  display:block; font-size:0.94rem; line-height:1.5; color:var(--ink-soft);
}
.reto-liga .reto-etiquetas{ flex-direction:column; align-items:flex-end; gap:0.3rem; }

@media (max-width: 40rem){
  .reto-liga{ grid-template-columns:2.2rem minmax(0,1fr); }
  .reto-liga .reto-etiquetas{
    grid-column:2; flex-direction:row; align-items:flex-start; margin-top:0.5rem;
  }
  .reto-cabeza h1{ font-size:1.8rem; }
  .enunciado{ font-size:1.04rem; }
}

.tabla-ordenes td:first-child{ width:11rem; white-space:nowrap; }
.tabla-ordenes th[colspan]{ padding-top:1rem; }