/* El sitio es oscuro por defecto; el interruptor guarda «claro» si el visitante lo prefiere. */
:root { --fondo:#111111; --tinta:#EDEDED; --gris:#9A9A9A; --linea:#2A2A2A; --texto:#C9C9C9; --texto2:#C9C9C9; --marca:#2A2A2A; color-scheme:dark; }
:root[data-tema="claro"] { --fondo:#FFFFFF; --tinta:#161616; --gris:#6B6B6B; --linea:#E2E2E2; --texto:#3A3A3A; --texto2:#444444; --marca:#F1F1F1; color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; background:var(--fondo); color:var(--tinta); font:16px/1.65 "IBM Plex Sans", system-ui, sans-serif; }
a { color:inherit; text-decoration:none; }
.mono { font-family:"IBM Plex Mono", monospace; }

header { border-bottom:1px solid var(--linea); }
header .in { padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.marca { display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; }
.marca small { font-weight:400; color:var(--gris); font-size:14px; margin-left:8px; padding-left:12px; border-left:1px solid var(--linea); }
nav a { margin-left:28px; font-size:14px; color:var(--gris); }
nav { display:flex; align-items:center; }
nav button { margin-left:28px; font:14px "IBM Plex Sans", sans-serif; color:var(--gris); background:none; border:0; padding:0; cursor:pointer; }
nav a:hover, nav a[aria-current="page"], nav button:hover { color:var(--tinta); }
nav button { display:inline-flex; align-items:center; gap:10px; vertical-align:middle; }
.pista { position:relative; width:34px; height:18px; border:1px solid var(--gris); border-radius:9px; transition:background .15s, border-color .15s; }
.perilla { position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--gris); transition:transform .15s, background .15s; }
#tema[aria-checked="true"] .pista { background:var(--tinta); border-color:var(--tinta); }
#tema[aria-checked="true"] .perilla { transform:translateX(16px); background:var(--fondo); }
#tema:focus-visible .pista { outline:2px solid var(--tinta); outline-offset:2px; }
.desplegable { position:relative; display:inline-flex; }
#cursos[aria-expanded="true"], #cursos[aria-current="page"] { color:var(--tinta); }
.lista { position:absolute; left:0; top:calc(100% + 21px); min-width:280px; border-top:0; background:var(--fondo); border:1px solid var(--linea); padding:6px 0; z-index:40; }
.lista a { display:block; margin:0; padding:10px 16px; color:var(--tinta); font-size:15px; }
.lista a small { display:block; font:12px "IBM Plex Mono", monospace; color:var(--gris); margin-top:2px; }
.lista a:hover { background:var(--marca); }
.fila.curso { grid-template-columns: 64px 1fr; }
.fila.curso b { font-size:20px; font-weight:600; }
.fila.curso .d { text-align:left; margin-top:10px; }
.fila.curso:hover b { text-decoration:underline; text-underline-offset:4px; }
.cajon .t { margin:0 0 10px; }
.cajon li a { display:grid; grid-template-columns:22px 1fr auto; gap:0 6px; align-items:start; line-height:1.4; padding-top:8px; padding-bottom:8px; }
.cajon li a em { font-style:normal; font:12px/1.6 "IBM Plex Mono", monospace; }
.cajon li a span { padding-top:2px; }

.cuerpo { max-width:1240px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:minmax(0,1fr); }
.cuerpo.solo { grid-template-columns: 1fr; max-width:820px; }
.izq { display:flex; align-items:center; gap:18px; }
.hamb { width:40px; height:40px; display:inline-flex; flex-direction:column; justify-content:center; gap:5px; padding:0 10px; background:none; border:1px solid var(--linea); border-radius:4px; cursor:pointer; }
.hamb span { display:block; height:1.5px; background:var(--tinta); transition:transform .15s, opacity .15s; }
.hamb:hover { border-color:var(--tinta); }
.hamb[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.cajon { position:fixed; top:65px; left:0; bottom:0; width:max(var(--ancho-cajon, 340px), 340px); max-width:86vw; overflow-y:auto; padding:32px 24px; background:var(--fondo); border-right:1px solid var(--linea); transform:translateX(-100%); visibility:hidden; transition:transform .2s ease, visibility .2s; z-index:20; }
.cajon.abierto { transform:none; visibility:visible; }
.velo { position:fixed; inset:65px 0 0 0; background:rgba(0,0,0,.35); z-index:10; }
header { position:sticky; top:0; z-index:30; background:var(--fondo); }
aside .t { font:12px "IBM Plex Mono", monospace; color:var(--gris); text-transform:uppercase; letter-spacing:.8px; margin:0 0 10px; }
aside ol { list-style:none; margin:0 0 28px; padding:0; border-left:1px solid var(--linea); }
aside li a { display:flex; justify-content:space-between; padding:6px 0 6px 14px; font-size:14.5px; color:var(--gris); margin-left:-1px; border-left:1px solid transparent; }
aside li a:hover { color:var(--tinta); border-left-color:var(--tinta); }
aside li a span { font:12px "IBM Plex Mono", monospace; }
aside p { margin:0; font-size:14.5px; }

main { padding:40px 0 80px; min-width:0; }
.cabeza { padding-bottom:36px; border-bottom:1px solid var(--tinta); }
.cabeza .mono { font-size:13px; color:var(--gris); }
h1 { font:600 40px/1.15 "IBM Plex Sans", sans-serif; letter-spacing:-.8px; margin:10px 0 14px; max-width:760px; }
.cabeza p { margin:0; max-width:700px; color:var(--texto); font-size:17px; }
.portada { display:grid; grid-template-columns:minmax(0,1fr) 560px; gap:56px; align-items:center; }
.ir { display:inline-block; margin-top:28px; font-size:15px; font-weight:500; color:var(--tinta); border-bottom:1px solid var(--tinta); padding-bottom:2px; }
.ir:hover { color:var(--gris); border-color:var(--gris); }
.cabeza .mono a { color:var(--gris); border-bottom:1px solid var(--linea); }
.cabeza .mono a:hover { color:var(--tinta); }
.cero { min-width:0; padding-top:6px; }
.cifras { display:flex; gap:48px; margin-top:28px; }
.cifras div { font:13px "IBM Plex Mono", monospace; color:var(--gris); }
.cifras b { display:block; font:600 28px "IBM Plex Sans", sans-serif; color:var(--tinta); }

.tema { padding:36px 0 8px; border-bottom:1px solid var(--linea); scroll-margin-top:16px; }
.tema h2 { font:600 22px "IBM Plex Sans", sans-serif; margin:0 0 4px; display:flex; gap:16px; align-items:baseline; }
.tema h2 span { font:13px "IBM Plex Mono", monospace; color:var(--gris); font-weight:400; }
.tema > p { margin:0 0 18px; color:var(--gris); }
.fila { display:grid; grid-template-columns: 64px 1fr 220px; gap:20px; padding:18px 0; border-top:1px solid var(--linea); align-items:start; }
.fila .n { font:13px "IBM Plex Mono", monospace; color:var(--gris); padding-top:3px; }
.fila b { font-weight:500; font-size:17px; display:block; }
.fila p { margin:4px 0 0; color:var(--texto2); font-size:15px; }
.fila .d { font:12.5px/1.8 "IBM Plex Mono", monospace; color:var(--gris); text-align:right; }
.fila.pub { grid-template-columns: 64px 1fr 300px; }
.fila.pub .d { text-align:left; margin-top:10px; }
.fila.pub img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:left top; border:1px solid var(--linea); display:block; }
.fila.pub:hover b { text-decoration:underline; text-underline-offset:4px; }
.fila.pend b { color:var(--gris); font-weight:400; }

.texto .cabeza { margin-bottom:28px; }
.texto h2 { font:600 22px "IBM Plex Sans", sans-serif; margin:36px 0 8px; }
.texto p { color:var(--texto); font-size:17px; margin:0 0 16px; }
.completar { background:var(--marca); padding:0 4px; }

footer { border-top:1px solid var(--linea); }
footer .in { max-width:1240px; margin:0 auto; padding:24px 32px 48px; display:flex; justify-content:space-between; font-size:14px; color:var(--gris); }

@media (max-width: 1180px) {
  .portada { grid-template-columns:1fr; gap:32px; }
  .cero { max-width:620px; }
}
@media (max-width: 900px) {
  header .in, .cuerpo, footer .in { padding-left:16px; padding-right:16px; }
  .cuerpo { grid-template-columns:1fr; gap:0; }
  .cajon { top:0; padding-top:24px; } .velo { inset:0; }
  .marca small { display:none; }
  header .in { height:auto; flex-wrap:wrap; gap:6px 0; padding-top:14px; padding-bottom:12px; }
  nav { width:100%; }
  nav > .desplegable > button { margin-left:0; }
  .lista { right:auto; left:0; }
  nav a, nav button { margin-left:14px; }
  h1 { font-size:30px; }
  .portada { grid-template-columns:1fr; gap:28px; }
  .cifras { gap:24px; flex-wrap:wrap; }
  .fila, .fila.pub { grid-template-columns: 40px 1fr; }
  .fila .d, .fila.pub img { grid-column: 2; text-align:left; }
  footer .in { flex-direction:column; gap:4px; }
}
:root:not([data-tema="claro"]) .fila.pub img { filter:brightness(.8); transition:filter .15s; }
:root:not([data-tema="claro"]) .fila.pub:hover img { filter:none; }
.aviso { margin-top:16px !important; padding:10px 14px; border:1px solid var(--linea); border-left:2px solid var(--gris); font-size:15px !important; color:var(--gris) !important; max-width:700px; }
@media (min-width: 901px) { main .portada { min-height:calc(100vh - 65px - 40px); padding-bottom:40px; box-sizing:border-box; } }

/* Portada: más ancha, panel de código a la izquierda, animación centrada y franja al pie de la primera pantalla */
.cuerpo { max-width:1360px; }
footer .in { max-width:1360px; }
.portada { grid-template-columns:minmax(0,1fr) 640px; position:relative; }
.cabeza .explica { margin:0 0 18px; font-size:15px; color:var(--gris); max-width:560px; }
.lado { position:relative; top:var(--bajar-lado, 0px); }  /* la animación reserva abajo el sitio de los 6 mapas: se baja la mitad de ese hueco */
main .portada { padding-bottom:80px; }
.franja { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  border-top:1px solid var(--linea); padding:14px 0; font:13px "IBM Plex Mono", monospace; color:var(--gris); }
.franja a { color:var(--gris); } .franja a:hover { color:var(--tinta); }
.franja span { text-align:right; }
.franja .bajar { color:var(--tinta); }
.portada > div { min-width:0; }
.panel-codigo { margin-top:36px; border:1px solid var(--linea); padding:14px 0; max-width:640px; }
.codigo-cero { margin:0; font:12.5px/1.75 "IBM Plex Mono", monospace; overflow-x:auto; }
.codigo-cero .linea { display:grid; grid-template-columns:18px 22px max-content 1fr; gap:0 14px; padding:0 16px 0 0; border-left:2px solid transparent; white-space:pre; transition:background .15s; }
.codigo-cero .flecha { color:#D85A30; visibility:hidden; text-align:right; font-size:10px; }
.codigo-cero .actual { background:rgba(216,90,48,.14); border-left-color:#D85A30; }
.codigo-cero .actual .flecha { visibility:visible; }
.codigo-cero .num { text-align:right; color:var(--gris); opacity:.6; }
.codigo-cero .activa { background:var(--marca); border-left-color:var(--tinta); }
/* colores de VS Code: Dark+ en modo oscuro, Light+ en modo claro (solo el código lleva color) */
.codigo-cero { --c-clave:#C586C0; --c-funcion:#DCDCAA; --c-modulo:#4EC9B0; --c-var:#9CDCFE; --c-num:#B5CEA8; --c-com:#6A9955; --c-texto:#D4D4D4; }
:root[data-tema="claro"] .codigo-cero { --c-clave:#AF00DB; --c-funcion:#795E26; --c-modulo:#267F99; --c-var:#001080; --c-num:#098658; --c-com:#008000; --c-texto:#1F1F1F; }
.codigo-cero .cod { color:var(--c-texto); }
.codigo-cero .t-clave { color:var(--c-clave); } .codigo-cero .t-funcion { color:var(--c-funcion); }
.codigo-cero .t-modulo { color:var(--c-modulo); } .codigo-cero .t-var { color:var(--c-var); } .codigo-cero .t-num { color:var(--c-num); }
.codigo-cero .nota { color:var(--c-com); }
@media (max-width: 1180px) {
  .portada { grid-template-columns:minmax(0,1fr); gap:32px; }
  .lado { top:0; }
  .franja { position:static; margin-top:32px; }
}
@media (max-width: 900px) {
  .franja { grid-template-columns:1fr; gap:6px; }
  .franja span { text-align:left; }
  .portada { grid-template-columns:minmax(0,1fr); gap:28px; }
  .codigo-cero { font-size:11px; }
}
.panel-codigo { max-width:min(640px, 100%); overflow:hidden; }
@media (max-width: 900px) { .panel-codigo { display:none; } }

/* Bloque bajo el código: la casilla en cámara lenta y, al final, la tabla de probabilidades.
   Su alto está reservado para que la portada no salte entre fases. */
.bloque-codigo { position:absolute; left:0; right:0; overflow:hidden; background:var(--fondo); pointer-events:none; z-index:2; opacity:0; transition:opacity .3s; font:11.5px/1.5 "IBM Plex Mono", monospace; color:var(--gris); }
.bloque-codigo.visible { opacity:1; }
.bloque-codigo .b-tit { margin-bottom:8px; color:var(--texto); }
.bloque-codigo .b-mats { display:flex; align-items:center; gap:10px; }
.bloque-codigo .op { color:var(--tinta); font-size:15px; }
.bloque-codigo .m5 { border-collapse:collapse; }
.bloque-codigo .m5 td { width:35px; height:19px; padding:0; text-align:center; border:1px solid var(--linea); color:var(--tinta); font-size:10.5px; }
.bloque-codigo .b-suma { margin-top:9px; color:var(--texto); }
.bloque-codigo .b-suma b { color:var(--tinta); font-weight:500; }
.bloque-codigo .prob { border-collapse:collapse; margin-top:6px; }
.bloque-codigo .prob th { text-align:left; font-weight:400; color:var(--gris); padding:5px 8px 5px 0; }
.bloque-codigo .prob td { text-align:right; padding:5px 5px; color:var(--texto); border-bottom:1px solid var(--linea); }
.bloque-codigo .prob td.top { color:var(--tinta); background:var(--marca); font-weight:500; }
@media (max-width: 900px) { .bloque-codigo { display:none; } }

/* Accesibilidad: saltar al contenido y foco visible con teclado */
.saltar { position:absolute; left:16px; top:-60px; z-index:100; padding:8px 14px; background:var(--tinta); color:var(--fondo); font-size:14px; }
.saltar:focus { top:12px; }
a:focus-visible, button:focus-visible { outline:2px solid var(--tinta); outline-offset:3px; }
.fila:focus-visible { outline-offset:-2px; }

/* «Cargando la animación…» mientras el navegador trae una animación pesada */
.cargando { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:var(--fondo); text-align:center; }
.cargando[hidden] { display:none; }
.cargando svg { width:68px; height:48px; }
.cargando p { margin:18px 0 4px; font-weight:500; }
.cargando small { color:var(--gris); font-size:13px; }

/* Lecciones ya abiertas */
.vista { margin-left:10px; padding:0 6px; border:1px solid var(--linea); font:11.5px "IBM Plex Mono", monospace; color:var(--gris); }

/* Página de una lección */
.leccion .cabeza { border-bottom:0; padding-bottom:20px; }
.leccion h1 { max-width:none; }
.acciones { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:24px; }
.boton { display:inline-block; padding:10px 18px; border:1px solid var(--tinta); color:var(--tinta); font-weight:500; font-size:15px; }
.boton:hover { background:var(--tinta); color:var(--fondo); }
.acciones .ir { margin-top:0; }
.figura { display:block; margin:8px 0 8px; }
.figura img { width:100%; height:auto; border:1px solid var(--linea); display:block; }
:root:not([data-tema="claro"]) .figura img { filter:brightness(.85); }
.ficha { border-top:1px solid var(--tinta); margin-top:28px; }
.ficha h2 { font:600 20px "IBM Plex Sans", sans-serif; margin:30px 0 10px; }
.ficha ul { margin:0; padding-left:20px; color:var(--texto); }
.ficha li { margin:0 0 8px; }
.ficha p { color:var(--texto); margin:0; }
.vecinas { display:flex; justify-content:space-between; gap:24px; margin-top:44px; padding-top:18px; border-top:1px solid var(--linea); font-size:15px; }
.vecinas a { color:var(--gris); } .vecinas a:hover { color:var(--tinta); }

/* clips de las animaciones: la miniatura del temario (16:10) y la figura de la lección (proporción del dibujo) */
.fila.pub img, .fila.pub video { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:center; border:1px solid var(--linea); display:block; background:#111; }
.figura video { width:100%; height:auto; display:block; border:1px solid var(--linea); background:#111; }
:root:not([data-tema="claro"]) .fila.pub img, :root:not([data-tema="claro"]) .figura img { filter:none; }