:root {
  /* spacing — 4px base scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* neutral ramp (single ramp, cool slate) */
  --n-900: #0d1218; --n-800: #141b24; --n-700: #1c2733; --n-600: #2b3948;
  --n-400: #64748b; --n-200: #cbd5e1; --n-100: #e8edf3; --n-0: #ffffff;
  /* accents */
  --a-500: #4f6ef7; --a-600: #3d59d8;      /* primary  */
  --ok-500: #16a34a; --ok-600: #12833c;    /* Ejecutar */
  --dg-500: #dc2626; --dg-600: #b91c1c;    /* Detener  */
  --amber: #f5c518;                         /* active line */
  /* type */
  --ff-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-code: ui-monospace, 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-code: 12.5px;
  /* elevation + shape */
  --r-md: 10px; --r-sm: 6px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .10);
  --sh-2: 0 2px 4px rgba(0, 0, 0, .08), 0 8px 20px rgba(0, 0, 0, .10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  background: var(--n-900);
  color: var(--n-100);
}

/* The [hidden] attribute has very low UA-stylesheet specificity, so the
   id-selector `display` rules below (#home, #app, #editor-mapa,
   #editor-mapa-herramientas) would otherwise silently win and keep the
   "hidden" element visible — these overrides fix that. */
#home[hidden],
#app[hidden],
#editor-mapa[hidden],
#editor-mapa-herramientas[hidden],
#autor-mapas[hidden] {
  display: none;
}

#home {
  height: 100vh;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-5);
  background: var(--n-900);
  transition: opacity 220ms ease, transform 220ms ease;
}

#home.home-saliendo {
  opacity: 0;
  transform: translateY(-32px);
}

#home-cab {
  margin: 0 auto var(--sp-5);
}

#home-cab h1 {
  margin: 0 0 var(--sp-2);
  font-size: 28px;
  color: var(--n-0);
}

#home-cab p {
  margin: 0;
  font-size: 15px;
  color: var(--n-200);
}

#home-lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.home-leccion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--n-800);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  width: 100%;
}

.home-leccion .leccion-titulo {
  font-size: 24px;
  margin-bottom: var(--sp-2);
}

.home-leccion .leccion-seccion h3 {
  font-size: 13px;
}

.home-leccion .leccion-seccion p {
  font-size: 17px;
  line-height: 1.6;
}

.home-tarjeta-resumen {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--n-200);
}

.home-iniciar-btn {
  align-self: center;
  height: 64px;
  padding: 0 var(--sp-6);
  border: none;
  border-radius: var(--r-sm);
  background: var(--a-500);
  color: var(--n-0);
  font-family: var(--ff-ui);
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.home-iniciar-btn:hover { background: var(--a-600); }

.home-sandbox-btn {
  align-self: center;
  height: 48px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--n-600);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--n-200);
  font-family: var(--ff-ui);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.home-sandbox-btn:hover { background: var(--n-700); }

#btn-volver-home {
  height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--n-600);
  background: transparent;
  color: var(--n-100);
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
}

#btn-volver-home:hover { border-color: var(--n-400); }

#app {
  --w-leccion: 320px;
  --w-editor: 460px;
  --h-codigo: 240px;
  display: grid;
  grid-template-columns: var(--w-leccion) 6px var(--w-editor) 6px 1fr;
  grid-template-rows: 48px 1fr 6px var(--h-codigo);
  grid-template-areas:
    "barra   barra barra   barra barra"
    "leccion gv1   editor  gv2   sim"
    "leccion gv1   editor  gv2   gh1"
    "leccion gv1   editor  gv2   codigo";
  height: 100vh;
  padding: var(--sp-3);
  gap: var(--sp-3);
  background: var(--n-900);
  overflow: hidden;
  transition: grid-template-columns 160ms ease;
}

#app.gutter-arrastrando { transition: none; }

/* Lesson panel collapsed: JS pins --w-leccion to 40px (see main.js) and
   reclaims that width for editor/sim/codigo, the panels actually worked in. */
#app.leccion-colapsada {
  --w-leccion: 40px;
}

#app.leccion-colapsada #gutter-leccion-editor {
  pointer-events: none;
  opacity: .35;
}

#barra {
  grid-area: barra;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-2);
  color: var(--n-100);
}

#barra button {
  height: 32px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

#barra button:focus-visible {
  outline: 2px solid var(--a-500);
  outline-offset: 2px;
}

#btn-ejecutar {
  background: var(--ok-500);
  color: var(--n-0);
}
#btn-ejecutar:hover:not(:disabled) { background: var(--ok-600); }

#btn-detener {
  background: var(--dg-500);
  color: var(--n-0);
}
#btn-detener:hover:not(:disabled) { background: var(--dg-600); }

#btn-reiniciar,
#btn-marcar-completado {
  background: transparent;
  border-color: var(--n-600);
  color: var(--n-100);
}
#btn-reiniciar:hover:not(:disabled),
#btn-marcar-completado:hover:not(:disabled) { border-color: var(--n-400); }

#barra button:disabled {
  background: var(--n-600);
  border-color: var(--n-600);
  color: var(--n-200);
  opacity: .5;
  cursor: not-allowed;
}

#editor-mapa {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

#editor-mapa-herramientas {
  display: flex;
  gap: var(--sp-1);
}

#btn-modo-editar-mapa[aria-pressed="true"] {
  background: var(--a-500);
  color: var(--n-0);
}

#editor-mapa-herramientas button.herramienta-activa {
  border-color: var(--a-500);
  color: var(--a-500);
}

#feedback-linea {
  margin-left: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--n-200);
}

#feedback-linea.feedback-error {
  color: #ff9a8b;
  font-weight: 600;
}

#sensor-readout {
  display: flex;
  gap: var(--sp-3);
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--n-400);
}

/* ---- Panels: titled cards, auto/1fr internal grid ---- */
.panel {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--n-800);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.panel-cab {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n-200);
  background: var(--n-700);
  border-bottom: 1px solid var(--n-600);
  min-width: 0;
}

.panel-body {
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* ---- Gutters: draggable dividers between panels ---- */
.gutter {
  position: relative;
  background: transparent;
  border-radius: var(--r-sm);
}

.gutter::after {
  content: '';
  position: absolute;
  background: var(--n-600);
  border-radius: var(--r-sm);
  transition: background-color 120ms ease;
}

.gutter:hover::after,
.gutter.gutter-activo::after {
  background: var(--a-500);
}

.gutter-v {
  cursor: col-resize;
}

.gutter-v::after {
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
}

.gutter-h {
  cursor: row-resize;
}

.gutter-h::after {
  left: 0;
  right: 0;
  top: 2px;
  height: 2px;
}

#leccion { grid-area: leccion; }
#leccion .panel-cab { justify-content: space-between; }
#leccion .panel-body {
  background: var(--n-700);
  overflow-y: auto;
  padding: var(--sp-3);
}

.leccion-toggle-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--n-200);
  font-size: var(--fs-xs);
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.leccion-toggle-btn:hover { background: var(--n-600); color: var(--n-0); }

.leccion-toggle-btn:focus-visible {
  outline: 2px solid var(--a-500);
  outline-offset: 1px;
}

#app.leccion-colapsada #leccion .panel-cab-titulo,
#app.leccion-colapsada #leccion .panel-body {
  display: none;
}

#app.leccion-colapsada .leccion-toggle-btn {
  transform: rotate(180deg);
}

.leccion-titulo {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--n-0);
}

.leccion-seccion {
  margin-bottom: var(--sp-4);
}

.leccion-seccion h3 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n-200);
}

.leccion-seccion p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--n-100);
  white-space: pre-line;
}

.leccion-sandbox-msg {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--n-200);
}

.leccion-resultado {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.leccion-resultado:empty { display: none; }

.leccion-resultado-ok { color: #7ee787; background: rgba(126, 231, 135, .08); }
.leccion-resultado-fail { color: #ff9a8b; background: rgba(255, 154, 139, .08); }

.leccion-completar-btn {
  align-self: flex-start;
  margin-top: var(--sp-3);
  height: 32px;
  padding: 0 var(--sp-4);
  border: none;
  border-radius: var(--r-sm);
  background: var(--a-500);
  color: var(--n-0);
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.leccion-completar-btn:hover { background: var(--a-600); }

.leccion-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(13, 18, 24, .72);
  z-index: 100;
}

.leccion-siguiente-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: 480px;
  padding: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--n-800);
  border: 1px solid rgba(126, 231, 135, .35);
  box-shadow: var(--sh-2);
  text-align: center;
}

.leccion-siguiente-banner p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #7ee787;
}

.leccion-siguiente-btn {
  height: 40px;
  padding: 0 var(--sp-5);
  border: none;
  border-radius: var(--r-sm);
  background: var(--a-500);
  color: var(--n-0);
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.leccion-siguiente-btn:hover { background: var(--a-600); }

#gutter-leccion-editor { grid-area: gv1; }
#gutter-editor-sim { grid-area: gv2; }
#gutter-sim-codigo { grid-area: gh1; }

#editor { grid-area: editor; }
#editor .panel-body { background: var(--n-700); }

#editor-blockly {
  position: absolute;
  inset: 0;
}

#sim { grid-area: sim; }
#sim .panel-body {
  background: var(--n-700);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
}

#sim-canvas {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 800 / 600;
  background: #f4f6f8;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
}

#codigo { grid-area: codigo; }
#codigo .panel-body {
  background: var(--n-900);
  overflow: auto;
}

.codigo-cpp {
  margin: 0;
  padding: var(--sp-2) 0;
  font-family: var(--ff-code);
  font-size: var(--fs-code);
  line-height: 1.5;
  color: var(--n-100);
}

.linea {
  display: block;
  white-space: pre;
  padding: 0 var(--sp-3);
}

/* Accent-bar active line: keeps syntax token colors intact instead of a
   solid fill that would otherwise need per-token color overrides. */
.linea.activa {
  background: rgba(245, 197, 24, .14);
  box-shadow: inset 3px 0 0 var(--amber);
}

.gutter {
  display: inline-block;
  width: 2.5em;
  color: var(--n-400);
  user-select: none;
}

.indent {
  white-space: pre;
}

/* cpp-view token classes */
.kw { color: #c586c0; }
.call { color: #4ec9b0; }
.num { color: #b5cea8; }
.punct { color: var(--n-100); }
.pre { color: #c586c0; }
.tipo { color: #569cd6; }
.fn { color: #dcdcaa; }
.com { color: #6a8759; font-style: italic; }

/* ---- Hidden lesson-map authoring tool (#editor-mapas): re-skins #app in
   place so #sim-canvas never moves and the normal render loop keeps drawing. ---- */
#app.autor-mapas {
  grid-template-columns: 320px 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "autor sim";
}
#app.autor-mapas #barra,
#app.autor-mapas #leccion,
#app.autor-mapas #editor,
#app.autor-mapas #codigo,
#app.autor-mapas .gutter {
  display: none;
}
#autor-mapas { grid-area: autor; }
#autor-mapas-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  overflow: auto;
  background: var(--n-700);
}
#autor-mapas-body button,
#autor-mapas-body select {
  height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--n-600);
  background: var(--n-800);
  color: var(--n-100);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
#autor-mapas-body button:hover { border-color: var(--n-400); }
#autor-mapas-body button.herramienta-activa { border-color: var(--a-500); color: var(--a-500); }
#autor-herramientas, #autor-acciones { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
#autor-salida {
  flex: 1;
  min-height: 160px;
  resize: none;
  padding: var(--sp-2);
  border: 1px solid var(--n-600);
  border-radius: var(--r-sm);
  background: var(--n-900);
  color: var(--n-100);
  font-family: var(--ff-code);
  font-size: var(--fs-code);
  line-height: 1.5;
}
#autor-estado { font-size: var(--fs-sm); color: var(--n-200); min-height: 1.5em; }