/* ============================================================================
   styles.css — "Cuaderno de laboratorio". Sistema de diseño compartido, fijo
   para todas las vistas del curso. Claro = cuaderno de papel milimétrico con
   tintas verde pizarra; oscuro = pizarrón de laboratorio con gis. La paleta
   semántica de estados es CONTRATO FIJO e idéntica en ambos modos (los tintes
   alfa de las sims funcionan sobre claro y oscuro). Sin fuentes externas:
   solo el stack del sistema (cero requests / funciona offline).
   ========================================================================== */

/* ============================================================================
   0. FUENTES — Google Fonts self-hosteadas (subset latin, woff2, en ./fonts/).
   Cero peticiones externas: sigue funcionando offline con doble clic.
   ========================================================================== */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/karla-400.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: italic; font-weight: 400; font-display: swap; src: url("./fonts/karla-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/karla-500.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/karla-600.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/space-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/space-mono-700.woff2") format("woff2"); }

:root {
  --color-primary:       #2C7A57;   /* verde pizarra */
  --color-primary-hover: #226246;
  --color-primary-muted: #D4E7DA;

  /* --- Papel milimétrico / tinta --- */
  --color-bg-canvas:      #E6EFE7;
  --color-bg-muted:       #D7E4D8;
  --color-bg-surface:     #F7FAF6;
  --color-bg-lit:         #FCFEFB;
  --color-fg-default:     #202A22;
  --color-fg-subtle:      #54685A;
  --color-fg-faint:       #82927F;
  --color-border-default: #BFD2C1;
  --color-border-strong:  #A5BFA8;
  --color-border-soft:    #D2E0D3;

  /* cuadrícula milimétrica (solo textura de fondo, nunca codifica datos) */
  --grid-line: rgba(44, 122, 87, 0.12);

  /* --- Paleta semántica de estado (CONTRATO FIJO, igual en claro y oscuro) --- */
  --st-neutral: #B9B2A6;
  --st-active:  #E0A93B;   /* examinando ahora (ámbar) */
  --st-cand:    #3E7CB1;   /* comparando (azul) */
  --st-goal:    #7B5EA7;   /* objetivo (violeta) */
  --st-done:    #4C9A6A;   /* resuelto (verde) */
  --st-out:     #B05B4D;   /* descartado (rojo apagado) */
  --st-path:    #2E8B8B;   /* visitado (teal) */

  /* --- Tipografía: Google Fonts self-hosteadas con fallback del sistema --- */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Karla", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Radios / sombras --- */
  --radius-sm: 6px;
  --radius-md:    8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(36,43,37,0.06);
  --shadow-md:    0 2px 6px rgba(36,43,37,0.07), 0 1px 2px rgba(36,43,37,0.05);
  --shadow-lg: 0 8px 24px rgba(36,43,37,0.10), 0 2px 6px rgba(36,43,37,0.06);
}

html.dark {
  --color-primary:       #74C79D;   /* gis verde */
  --color-primary-hover: #90D4B1;
  --color-primary-muted: #1F4534;

  --color-bg-canvas:      #17211A;
  --color-bg-muted:       #121A14;
  --color-bg-surface:     #202D23;
  --color-bg-lit:         #263529;
  --color-fg-default:     #E9F1E8;
  --color-fg-subtle:      #A5B8A6;
  --color-fg-faint:       #778877;
  --color-border-default: #30402F;
  --color-border-strong:  #3E5240;
  --color-border-soft:    #283626;

  --grid-line: rgba(140, 200, 170, 0.075);

  --shadow-sm: 0 0 0 1px rgba(232,239,231,0.03), 0 2px 6px rgba(0,0,0,0.40);
  --shadow-md: inset 0 1px 0 rgba(232,239,231,0.04), 0 12px 32px rgba(0,0,0,0.45);
  --shadow-lg: inset 0 1px 0 rgba(232,239,231,0.05), 0 24px 60px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--color-bg-canvas);
  background-size: 16px 16px, 16px 16px, auto;
  color: var(--color-fg-default);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grano finísimo (SVG inline, sin request). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 160px 160px;
  opacity: 0.035;
  mix-blend-mode: multiply;
}
.notebook-lines {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 31px,
    color-mix(in srgb, var(--color-fg-default) 5%, transparent) 31px, color-mix(in srgb, var(--color-fg-default) 5%, transparent) 32px);
}

/* Enlaces (default + hover) desde la paleta, para contenido futuro. */
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-fg-default); }

/* ---- Tipografía utilitaria ---- */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-fg-subtle);
  display: inline-flex; align-items: center; gap: 6px;
}
.subtle { color: var(--color-fg-subtle); }
.faint  { color: var(--color-fg-faint); }

/* ---- Superficies ---- */
.card {
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.well {
  background: var(--color-bg-muted); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

/* ============================================================================
   Cromo del sitio + layout general de la SPA
   ========================================================================== */
.app-root { position: relative; z-index: 1; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 24px 56px; }
.wrap.app-root > .mod-header,
.wrap.app-root > .masthead { position: relative; }

.site-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.site-home {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-faint);
}
.site-home:hover { color: var(--color-fg-default); }

/* toggle de tema (mismo cromo en las 3 guías) */
.theme-toggle {
  display: flex; background: var(--color-bg-muted);
  border-radius: var(--radius-md); padding: 2px; gap: 2px;
}
.theme-toggle button {
  width: 30px; height: 28px; border: 0; border-radius: var(--radius-sm);
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-fg-subtle); padding: 0; font: inherit;
}
.theme-toggle button.active {
  background: var(--color-bg-surface); color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.theme-toggle .ticon {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.site-foot {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--color-border-default);
  font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-faint);
  letter-spacing: 0.04em;
}
.kbd-hint { margin-top: 18px; text-align: center; }
.kbd-hint .faint { font-size: 11.5px; }

/* ---- Navegación entre módulos ---- */
.mod-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.mod-nav-home, .mod-nav-pill {
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--color-border-default);
  background: transparent; color: var(--color-fg-subtle);
}
.mod-nav-home { font-family: var(--font-sans); font-size: 12px; font-weight: 500; }
.mod-nav-pill { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; gap: 8px; }
.mod-nav-pill .mn-no { opacity: 0.7; }
.mod-nav-pill .mn-name { font-family: var(--font-sans); font-weight: 500; }
.mod-nav-home:hover, .mod-nav-pill:hover { border-color: var(--color-fg-faint); color: var(--color-fg-default); }
.mod-nav-pill.is-on { background: var(--color-fg-default); color: var(--color-bg-canvas); border-color: var(--color-fg-default); }
.mod-nav-pill.is-on .mn-name { color: var(--color-bg-canvas); }

/* ---- Cabecera de módulo ---- */
.mod-header { margin-bottom: 6px; }
.mod-title { font-size: 40px; line-height: 1.04; margin: 8px 0 10px; max-width: 20ch; }
.mod-intro { font-size: 16.5px; line-height: 1.5; color: var(--color-fg-subtle); max-width: 64ch; text-wrap: pretty; margin: 0 0 4px; }

/* ---- Pestañas de sub-lección ---- */
.tabbar {
  display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px;
  background: var(--color-bg-muted); border: 1px solid var(--color-border-default);
  margin: 18px 0 24px;
}
.lesson-tab {
  appearance: none; cursor: pointer; border: none; background: transparent;
  color: var(--color-fg-subtle); display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
}
.lesson-tab .tab-no { font-size: 11px; opacity: 0.7; }
.lesson-tab[aria-selected="true"] { background: var(--color-fg-default); color: var(--color-bg-canvas); }

/* ============================================================================
   Controles
   ========================================================================== */
.ctrl {
  appearance: none; font-family: var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--color-bg-surface); color: var(--color-fg-default);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .05s ease;
}
.ctrl:hover:not(:disabled) { background: var(--color-bg-muted); border-color: var(--color-fg-subtle); }
.ctrl:active:not(:disabled) { transform: translateY(1px); }
.ctrl:disabled { opacity: .42; cursor: not-allowed; }
.ctrl:focus-visible { outline: 2px solid var(--st-cand); outline-offset: 2px; }
.ctrl-icon { width: 42px; height: 42px; font-size: 15px; border-radius: var(--radius-sm); }
.ctrl-play {
  width: 52px; height: 52px; font-size: 18px;
  background: var(--color-fg-default); color: var(--color-bg-canvas); border-color: var(--color-fg-default);
}
.ctrl-play:hover:not(:disabled) { background: color-mix(in srgb, var(--color-fg-default) 88%, var(--color-bg-canvas)); border-color: color-mix(in srgb, var(--color-fg-default) 88%, var(--color-bg-canvas)); }

.pill {
  appearance: none; font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  background: var(--color-bg-surface); color: var(--color-fg-default);
  border: 1px solid var(--color-border-strong); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.pill:hover:not(:disabled) { background: var(--color-bg-muted); border-color: var(--color-fg-subtle); }
.pill:focus-visible { outline: 2px solid var(--st-cand); outline-offset: 2px; }
.pill[aria-pressed="true"] { background: var(--color-fg-default); color: var(--color-bg-canvas); border-color: var(--color-fg-default); }
.pill:disabled { opacity: .42; cursor: not-allowed; }
.pill.danger-pill { border-color: var(--st-out); color: var(--st-out); }

.seg {
  display: inline-flex; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-surface);
}
.seg button {
  appearance: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  padding: 0 11px; height: 42px; background: transparent; color: var(--color-fg-subtle);
  border: none; border-left: 1px solid var(--color-border-default); cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.seg button:first-child { border-left: none; }
.seg button:hover { background: var(--color-bg-muted); color: var(--color-fg-default); }
.seg button[aria-pressed="true"] { background: var(--color-fg-default); color: var(--color-bg-canvas); }
.seg button:focus-visible { outline: 2px solid var(--st-cand); outline-offset: -2px; }

.tag-mono {
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  letter-spacing: 0.01em; white-space: nowrap;
}

/* ============================================================================
   Motor de línea de tiempo (controles + scrubber)
   ========================================================================== */
.timeline { }
.controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ctrl-group { display: flex; align-items: center; gap: 8px; }
.scrub-block { margin-top: 16px; }
.scrub-wrap { position: relative; width: 100%; height: 26px; display: flex; align-items: center; }
.scrub-track {
  position: absolute; left: 0; right: 0; height: 8px; border-radius: 999px;
  background: var(--color-bg-muted); border: 1px solid var(--color-border-default); overflow: hidden;
}
.scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-fg-default); opacity: 0.85; }
input[type="range"].scrub {
  -webkit-appearance: none; appearance: none; position: relative;
  width: 100%; height: 26px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"].scrub::-webkit-slider-runnable-track { height: 26px; background: transparent; }
input[type="range"].scrub::-moz-range-track { height: 26px; background: transparent; }
input[type="range"].scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: 3px;
  border-radius: 999px; background: var(--color-fg-default); border: 3px solid var(--color-bg-canvas);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fg-default) 30%, transparent);
}
input[type="range"].scrub::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 999px; background: var(--color-fg-default); border: 3px solid var(--color-bg-canvas);
}
input[type="range"].scrub:disabled { opacity: .4; }
input[type="range"].scrub:focus-visible { outline: 2px solid var(--st-cand); outline-offset: 4px; border-radius: 999px; }
.scrub-labels { display: flex; justify-content: space-between; margin-top: 2px; }
.scrub-lab { font-size: 10.5px; color: var(--color-fg-faint); }

/* ============================================================================
   Celdas + pista de arreglo
   ========================================================================== */
.track-scroll { overflow-x: auto; padding: 4px 2px 2px; }
.track-row { display: flex; gap: 7px; justify-content: center; min-width: min-content; margin: 0 auto; }
.cell { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.cell-marker { height: 18px; display: flex; align-items: center; }
.cell-marker-tag {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
  padding: 1px 6px; border-radius: 999px; color: var(--color-bg-canvas);
}
.cell-box {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-family: var(--font-mono); font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background .18s ease, border-color .18s ease;
}
.no-motion .cell-box { transition: none; }
.cell-badge {
  position: absolute; top: -7px; right: -7px; width: 16px; height: 16px;
  border-radius: 999px; color: var(--color-bg-canvas); font-size: 10px;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--color-bg-canvas);
}
.cell-index { height: 20px; display: flex; flex-direction: column; align-items: center; margin-top: 3px; }
.cell-idx { font-size: 9.5px; color: var(--color-fg-faint); }
.cell-pointer { color: #E0A93B; font-size: 12px; line-height: 1; }

/* ---- Leyenda de estados ---- */
.state-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.sl-item { display: inline-flex; align-items: center; gap: 6px; }
.sl-swatch { width: 15px; height: 15px; border-radius: 4px; display: inline-block; }
.sl-label { font-size: 11px; color: var(--color-fg-subtle); white-space: nowrap; }

/* ---- Fila de estadísticas ---- */
.stat-row { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px; }
.stat { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.stat-label { font-size: 10.5px; letter-spacing: 0.06em; }
.stat-value { font-size: 13.5px; font-weight: 600; color: var(--color-fg-default); }

/* ============================================================================
   Tabla de complejidad + código
   ========================================================================== */
table.cx { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.cx th, table.cx td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--color-border-default); vertical-align: middle; }
table.cx thead th {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-fg-subtle); font-weight: 600; background: var(--color-bg-muted);
}
table.cx td.num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
table.cx tr:last-child td { border-bottom: none; }

pre.code {
  margin: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  color: var(--color-fg-default); white-space: pre; overflow-x: auto;
}
pre.code .kw { color: var(--st-goal); font-weight: 600; }
pre.code .cm { color: var(--color-fg-faint); font-style: italic; }
pre.code .fn { color: var(--st-cand); }
/* ============================================================================
   Layout de simulación (shell común de todas las pantallas)
   ========================================================================== */
.sim-title { font-size: 32px; line-height: 1.05; margin: 0 0 8px; }
.sim-intro { font-size: 16px; line-height: 1.5; color: var(--color-fg-subtle); max-width: 66ch; margin: 0 0 20px; text-wrap: pretty; }

.input-card { padding: 14px 18px; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.input-label { display: inline-flex; align-items: center; gap: 9px; }
.num-input {
  width: 76px; padding: 7px 10px; font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); border-radius: 6px; color: var(--color-fg-default);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border: 1px solid var(--color-border-strong); border-radius: 999px;
  background: var(--color-bg-surface); font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
}

.stage-card { padding: 18px 20px 20px; margin-bottom: 16px; }
.stage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.stage-head-l { display: inline-flex; align-items: center; gap: 8px; }
.obj-pill { font-size: 13px; padding: 3px 11px; border-radius: 999px; border: 2px solid var(--st-goal); color: var(--st-goal); }
.stage-status { font-size: 13px; font-weight: 600; }
.track-host { padding: 14px 10px 8px; }

.ctrl-card { padding: 16px 20px; margin-bottom: 16px; }
.narr-card { padding: 18px 20px; }
.narr-note { font-size: 15.5px; line-height: 1.55; margin: 0 0 14px; max-width: 720px; text-wrap: pretty; min-height: 46px; }
.narr-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cx-panel { padding: 14px 16px; margin-top: 12px; }
.cx-panel p { font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.cx-intro { font-size: 14px; line-height: 1.6; margin: 0 0 10px !important; }
.cx-list { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--color-fg-subtle); }

/* ---- Predecir antes de revelar (binaria) ---- */
.ask-panel { margin-top: 14px; padding: 14px 16px; border-color: var(--st-goal); }
.ask-q { font-size: 14.5px; margin: 0 0 12px; }
.ask-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-btn { padding: 9px 14px; }
.ask-hint { font-size: 12px; margin: 10px 2px 0; }

/* ---- Avisos / feedback ---- */
.warn-host:not(:empty) { margin-bottom: 16px; }
.warn-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-color: var(--st-out); background: rgba(176,91,77,0.09); }
.warn-glyph { color: var(--st-out); font-size: 16px; line-height: 1.3; }
.warn-text { font-size: 13.5px; line-height: 1.5; margin: 0; flex: 1; }
.fb-host:not(:empty) { margin-bottom: 14px; }
.fb-card { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; }
.fb-ok { border-color: var(--st-done); background: rgba(76,154,106,0.08); }
.fb-warn { border-color: var(--st-active); background: rgba(224,169,59,0.10); }
.fb-glyph { font-size: 15px; }
.fb-ok .fb-glyph { color: var(--st-done); }
.fb-warn .fb-glyph { color: var(--st-active); }
.fb-text { font-size: 13.5px; line-height: 1.5; margin: 0; flex: 1; }

/* ============================================================================
   Portada / índice tipo almanaque
   ========================================================================== */
/* Hero normalizado — misma estructura en las 3 guías:
   fila de marca (glifo + eyebrow | edición) → título grande → lede. */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.folio { display: flex; align-items: center; gap: 10px; }
.mark { width: 26px; height: 26px; color: var(--color-fg-default); flex: none; }
.folio-meta { line-height: 1.25; }
.folio-sub { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--color-fg-subtle); }
.edition { text-align: right; line-height: 1.7; }
.ed-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-subtle); }

h1.title { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.5vw, 50px); line-height: 1.05; letter-spacing: -0.01em; margin: 12px 0 0; max-width: 22ch; }
.lede { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--color-fg-subtle); max-width: 66ch; }
.lede em { font-family: var(--font-display); font-style: italic; color: var(--color-fg-default); }

.double-rule { height: 4px; border: 0; border-top: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); margin: 0; }
.running-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; margin-top: 26px; gap: 12px; flex-wrap: wrap; }
.running-head .eyebrow { color: var(--color-fg-faint); }

.filter { margin-top: 30px; }
.filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.filter-q { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 21px; color: var(--color-fg-default); }
.filter-hint { font-size: 13.5px; color: var(--color-fg-faint); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.fchip { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--color-fg-default); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 999px; padding: 8px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.fchip:hover { border-color: var(--color-fg-faint); }
.fchip[aria-pressed="true"] { background: var(--color-fg-default); color: var(--color-bg-canvas); border-color: var(--color-fg-default); }
.fchip .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-fg-faint); flex: none; }
.fchip[aria-pressed="true"] .dot { background: var(--st-active); }

.status { margin-top: 16px; min-height: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--color-fg-subtle); }
.status b { color: var(--color-fg-default); font-weight: 600; }
.count-pill { font-family: var(--font-mono); font-size: 12px; background: var(--st-done); color: #fff; border-radius: 5px; padding: 2px 8px; letter-spacing: .02em; }
.reset { font-family: var(--font-sans); font-size: 13px; color: var(--color-fg-subtle); background: none; border: 0; border-bottom: 1px solid var(--color-fg-faint); padding: 0 0 1px; cursor: pointer; }
.reset:hover { color: var(--color-fg-default); border-color: var(--color-fg-default); }

.legend { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; margin-top: 24px; padding: 12px 0; border-top: 1px solid var(--color-border-soft); border-bottom: 1px solid var(--color-border-soft); }
.legend-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.legend-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-fg-faint); }
.freq-item, .cat-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-fg-subtle); }
.freq-glyph { font-size: 14px; line-height: 1; width: 15px; text-align: center; }
.freq-star { color: var(--color-fg-default); } .freq-half { color: var(--color-fg-subtle); } .freq-open { color: var(--color-fg-faint); }
.cat-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.catalog { margin-top: 34px; display: flex; flex-direction: column; gap: 30px; }
.mod-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--cat); flex-wrap: wrap; }
.mod-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mod-no { font-family: var(--font-mono); font-size: 13px; color: var(--cat); font-weight: 500; }
.mod-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--cat); margin: 0; }
.mod-count { font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-faint); }
.mod-count b { color: var(--cat); font-weight: 500; }
.mod-open { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-fg-subtle); text-decoration: none; border-bottom: 1px solid var(--color-fg-faint); padding-bottom: 1px; white-space: nowrap; }
.mod-open:hover { color: var(--color-fg-default); border-color: var(--color-fg-default); }
.mod-desc { font-size: 13px; color: var(--color-fg-subtle); margin: 10px 0 0; line-height: 1.45; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; margin-top: 14px; }
.card2 { position: relative; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-left: 3px solid var(--cat); border-radius: 9px; padding: 12px 14px 13px; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; display: block; text-decoration: none; }
.card2:hover { border-color: var(--cat); box-shadow: var(--shadow-lg); background: var(--color-bg-lit); }
.card2:focus-visible { outline: 2px solid var(--st-cand); outline-offset: 2px; }
.card2-top { display: flex; align-items: center; gap: 10px; }
.card2-no { font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-faint); flex: none; }
.card2-name { font-family: var(--font-display); font-size: 18px; letter-spacing: -.01em; color: var(--color-fg-default); flex: 1; line-height: 1.15; }
.card2.is-star .card2-name { font-weight: 600; }
.card2.is-half .card2-name { font-weight: 500; }
.card2.is-open .card2-name { font-weight: 400; color: var(--color-fg-subtle); }
.card2-freq { font-size: 14px; line-height: 1; flex: none; }
.card2-intent { display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.42; color: var(--color-fg-subtle); }
.card2-hit { display: none; margin-top: 9px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--st-done); align-items: center; gap: 5px; }
.card2-hit .check { font-family: var(--font-mono); }

.catalog.filtering .card2.lit { border-color: var(--cat); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat) 34%, transparent), var(--shadow-lg); background: var(--color-bg-lit); }
.catalog.filtering .card2.lit .card2-hit { display: flex; }
.catalog.filtering .card2.dim { opacity: .26; }
.catalog.filtering .card2.dim:hover { opacity: .55; }

.disambig { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 14px; padding: 20px 24px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); }
.disambig:hover { border-color: var(--color-fg-faint); background: var(--color-bg-lit); box-shadow: var(--shadow-lg); }
.dz-l { display: flex; flex-direction: column; gap: 4px; }
.dz-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--st-active); }
.dz-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--color-fg-default); }
.dz-sub { font-size: 13.5px; color: var(--color-fg-subtle); max-width: 74ch; line-height: 1.45; }
.dz-arrow { font-family: var(--font-mono); font-size: 22px; color: var(--color-fg-faint); flex: none; }
.disambig:hover .dz-arrow { color: var(--color-fg-default); }

.not-here { margin-top: 26px; padding: 16px 20px; border: 1px dashed var(--color-border-default); border-radius: 12px; }
.not-here .nh-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-fg-faint); }
.not-here p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--color-fg-subtle); }

.colophon-wrap { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--color-border-default); }
.colophon { font-size: 12.5px; color: var(--color-fg-faint); line-height: 1.55; max-width: 74ch; }

/* ============================================================================
   Foco, movimiento reducido, responsivo
   ========================================================================== */
:focus-visible { outline: 2px solid var(--st-cand); outline-offset: 2px; }

.no-motion *, .no-motion *::before, .no-motion *::after {
  transition-duration: 0.001ms !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
}

@media (max-width: 720px) {
  .stage-head { align-items: flex-start; }
  .mod-title { font-size: 32px; }
  .sim-title { font-size: 26px; }
}
@media (max-width: 560px) {
  .wrap { padding: 20px 16px 44px; }
  .input-card { gap: 10px 12px; }
  .input-card > span[style] { display: none; }
}

/* ============================================================================
   Módulo 00 · Big O
   ============================================================================ */
.bigo-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 18px; align-items: stretch; }
.bigo-plot { padding: 10px 12px 6px; }
.bigo-boxes { padding: 14px 16px; }
.bigo-legend { display: flex; flex-wrap: wrap; gap: 6px; }

.boxes-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.boxes-cols { display: flex; gap: 6px; align-items: stretch; }
.box-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity .14s ease; }
.box-label { display: flex; align-items: center; gap: 5px; }
.box-stack-wrap { position: relative; width: 100%; max-width: 46px; }
.box-overflow { position: absolute; top: -15px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.box-stack { display: flex; flex-direction: column-reverse; gap: 2px; padding: 4px; border-radius: 6px; background: var(--color-bg-muted); border: 1px solid var(--color-border-default); }
.box-seg { height: 8px; border-radius: 2px; }
.box-count { text-align: center; }
.box-count-n { font-size: 14px; font-weight: 600; color: var(--color-fg-default); }
.box-count-u { font-size: 9.5px; color: var(--color-fg-faint); letter-spacing: 0.08em; }

.bigo-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border-default); }
.ctrl-card.is-locked { opacity: 0.5; pointer-events: none; }

.predict-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--color-bg-canvas) 80%, transparent); backdrop-filter: blur(2px); border-radius: inherit; }
.predict-card { max-width: 460px; padding: 22px 24px; box-shadow: var(--shadow-lg); }
.predict-title { font-size: 22px; margin: 8px 0 6px; }
.predict-sub { font-size: 13.5px; margin: 0 0 16px; }
.predict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 8px; }
.predict-opt { padding: 11px 10px; justify-content: flex-start; gap: 9px; }
.solved-badge { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--st-goal); color: var(--color-bg-canvas); }

@media (max-width: 780px) {
  .bigo-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Guía de decisión «¿Cuál algoritmo usar?»
   ============================================================================ */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-faint); display: flex; align-items: center; gap: 8px; }
.crumbs a { color: var(--color-fg-subtle); }
.crumbs a:hover { color: var(--color-fg-default); }
.crumbs .sep { color: var(--color-fg-faint); }
.crumbs .here { color: var(--color-fg-default); }
.topmeta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-fg-faint); }

.compnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.cn { appearance: none; font-family: var(--font-sans); font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; cursor: pointer; background: var(--color-bg-surface); color: var(--color-fg-subtle); border: 1px solid var(--color-border-default); }
.cn:hover { border-color: var(--color-fg-faint); color: var(--color-fg-default); }
.cn.is-on { background: var(--color-fg-default); color: var(--color-bg-canvas); border-color: var(--color-fg-default); }

.comp { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--color-border-default); }
.comp:first-of-type { border-top: none; }
.comp-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
.comp-vs { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--st-active); font-style: normal; }
.same-chip { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--color-fg-subtle); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 999px; padding: 3px 10px; margin-left: 4px; }
.comp-tag { font-size: 14.5px; line-height: 1.5; color: var(--color-fg-subtle); max-width: 76ch; margin: 10px 0 0; text-wrap: pretty; }

.comp-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; margin-top: 18px; }
.ptabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--color-bg-muted); border: 1px solid var(--color-border-default); margin-bottom: 12px; }
.pt { appearance: none; cursor: pointer; border: none; background: transparent; color: var(--color-fg-subtle); display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.pt .pdot { width: 8px; height: 8px; border-radius: 999px; }
.pt.is-on { background: var(--color-bg-surface); color: var(--color-fg-default); box-shadow: var(--shadow-sm); }

.traits { display: flex; flex-direction: column; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-surface); }
.trait { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--color-border-default); }
.trait:last-child { border-bottom: none; }
.trait.hot { background: rgba(224,169,59,0.12); }
.trait-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-fg-subtle); }
.trait.hot .trait-k { color: color-mix(in srgb, var(--st-active) 70%, var(--color-fg-default)); }
.trait-v { font-size: 13.5px; text-align: right; color: var(--color-fg-default); }
.trait-v .cx { font-family: var(--font-mono); font-weight: 600; }
.traits-cap { font-size: 11.5px; color: var(--color-fg-faint); margin-top: 8px; }

.comp-right { display: flex; flex-direction: column; gap: 10px; }
.intent-card { background: var(--color-bg-muted); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 16px 18px; flex: 1; }
.il { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-fg-faint); }
.il .d { width: 6px; height: 6px; border-radius: 999px; background: var(--st-goal); }
.iname { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 8px 0 8px; }
.iname .cdot { width: 10px; height: 10px; border-radius: 999px; }
.itext { font-size: 13.5px; line-height: 1.55; color: var(--color-fg-subtle); margin: 0 0 10px; text-wrap: pretty; }
.ipick { font-size: 13.5px; line-height: 1.5; color: var(--color-fg-default); margin: 0; }
.ipick b { font-weight: 600; }
.open-link { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-fg-subtle); border-bottom: 1px solid var(--color-fg-faint); padding-bottom: 1px; align-self: flex-start; }
.open-link:hover { color: var(--color-fg-default); border-color: var(--color-fg-default); }

.quiz { margin-top: 18px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 16px 18px; }
.quiz-h { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.qic { width: 22px; height: 22px; border-radius: 999px; background: var(--st-goal); color: var(--color-bg-canvas); font-family: var(--font-mono); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.qt { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.scenario { padding: 12px 0; border-top: 1px solid var(--color-border-soft); }
.scenario:first-of-type { border-top: none; }
.prompt { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.prompt .q { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-goal); margin-right: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { appearance: none; cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--color-bg-surface); color: var(--color-fg-default); border: 1px solid var(--color-border-strong); }
.opt:hover:not(:disabled) { background: var(--color-bg-muted); border-color: var(--color-fg-subtle); }
.opt:disabled { cursor: default; }
.opt.correct { background: rgba(76,154,106,0.16); border-color: var(--st-done); color: var(--color-fg-default); font-weight: 600; }
.opt.wrong { background: rgba(176,91,77,0.12); border-color: var(--st-out); color: var(--st-out); text-decoration: line-through; }
.opt.muted { opacity: 0.5; }
.answer { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--color-fg-subtle); }
.answer .ck { color: var(--st-done); font-family: var(--font-mono); font-weight: 600; }
.answer b { color: var(--color-fg-default); }

.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-border-default); font-size: 12.5px; color: var(--color-fg-faint); }
.legend-hot { display: inline-flex; align-items: center; gap: 8px; }
.legend-hot .hb { width: 14px; height: 14px; border-radius: 3px; background: rgba(224,169,59,0.5); border: 1px solid var(--st-active); }

@media (max-width: 720px) {
  .comp-body { grid-template-columns: 1fr; }
}

/* ============================================================================
   Módulo 02 · Ordenamiento (BarTrack + bandeja de mezcla)
   ============================================================================ */
.bar-scroll { overflow-x: auto; padding: 2px 2px 0; }
.bar-stage { position: relative; margin: 0 auto; }
.bar-overlay { position: absolute; inset: 0; pointer-events: none; }
.bar-el { position: absolute; }
.no-motion .bar-el { transition: none !important; }
.bar-el { transition: left .34s cubic-bezier(.4,0,.2,1); }
.bar-marker { position: absolute; left: 0; width: 100%; text-align: center; }
.bar-marker-tag { font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 999px; color: var(--color-bg-canvas); white-space: nowrap; }
.bar-val { position: absolute; left: 0; width: 100%; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--color-fg-default); }
.bar-fill { width: 100%; border-radius: 3px 3px 0 0; border: 1px solid; transition: height .34s cubic-bezier(.4,0,.2,1), background .2s ease, border-color .2s ease; }
.no-motion .bar-fill { transition: background .2s ease, border-color .2s ease; }
.bar-idx { position: absolute; left: 0; width: 100%; text-align: center; font-size: 9px; color: var(--color-fg-faint); }
.bar-boundary { position: absolute; width: 0; border-left: 1.5px dashed var(--st-done); }
.bar-bracket { position: absolute; height: 0; border-top: 2px solid; }
.bar-bracket-lab { position: absolute; top: -15px; left: 0; font-size: 9.5px; }

.qs-stack { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.tray-host:not(:empty) { margin-top: 14px; }
.tray { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.tray-row { display: flex; align-items: center; gap: 9px; }
.tray-label { font-size: 10.5px; width: 64px; text-align: right; color: var(--color-fg-subtle); flex: none; }
.tray-boxes { display: flex; gap: 5px; flex-wrap: wrap; }
.tray-box { min-width: 30px; height: 30px; padding: 0 7px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; }
.tray-div { height: 1px; background: var(--color-border-default); margin: 2px 0; }

/* ============================================================================
   Módulo 03 · Recursión (pila de llamadas + Hanói)
   ============================================================================ */
.stack-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.stack-host { padding: 16px 18px; flex: 1 1 360px; }
.stack-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.callstack { min-height: 260px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cs-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; width: 100%; }
.cs-rule { flex: 1; height: 1px; background: var(--color-border-default); min-width: 40px; }
.cs-base { width: 300px; max-width: 100%; margin-top: 2px; border-top: 2px solid var(--color-fg-default); padding-top: 4px; }
.stack-frame { width: 300px; max-width: 100%; border-radius: 7px; padding: 9px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: background .18s ease, border-color .18s ease; }
.no-motion .stack-frame { transition: none; }
.sf-name { font-size: 13.5px; font-weight: 600; }
.sf-val { font-size: 12px; color: var(--color-fg-subtle); }
.result-box { padding: 12px 14px; text-align: center; }
.result-n { font-size: 26px; font-weight: 600; color: var(--st-done); }
.overflow-box { padding: 12px 14px; border-color: var(--st-out); background: rgba(176,91,77,0.08); }

.hanoi-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 20px; align-items: stretch; }
.hanoi-towers { padding: 14px 14px 8px; }
.hanoi-tree { padding: 14px 14px 10px; }
.hanoi-tree-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hanoi-call { font-size: 11.5px; color: var(--color-fg-subtle); text-align: center; margin-top: 4px; }
.rectree-scroll { overflow-x: auto; }
.towers { display: flex; gap: 12px; justify-content: space-around; align-items: flex-end; padding: 0 6px; }
.tower { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.tower-stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; justify-content: flex-start; width: 100%; }
.disc { height: 15px; border-radius: 4px; border: 1px solid; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; color: var(--color-fg-default); }
.tower-base { width: 82%; height: 4px; background: var(--color-fg-default); border-radius: 2px; margin-top: 5px; }
.tower-label { font-size: 12px; font-weight: 600; color: var(--color-fg-subtle); margin-top: 4px; }

@media (max-width: 820px) { .hanoi-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Módulo 04 · Estructuras de datos
   ============================================================================ */
.tree-scroll { overflow-x: auto; }
.listview { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; }
.lv-head { font-size: 10.5px; color: var(--color-fg-subtle); margin-right: 6px; }
.lv-arrow0 { color: var(--color-fg-faint); margin-right: 4px; }
.lv-node { padding: 0 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px; transition: background .18s ease, border-color .18s ease; }
.no-motion .lv-node { transition: none; }
.lv-arrow { margin: 0 5px; font-size: 15px; }

.al-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cost-badge { display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--color-border-default); background: var(--color-bg-surface); }
.cost-badge.hot { border-color: var(--st-out); background: rgba(176,91,77,0.08); }
.cb-l { font-size: 10.5px; color: var(--color-fg-subtle); }
.cb-v { font-size: 14px; font-weight: 600; color: var(--color-fg-default); }
.cost-badge.hot .cb-v { color: var(--st-out); }

.hash-grid { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: 22px; align-items: center; }
.hash-left { padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 150px; justify-content: center; }
.hash-right { padding: 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.hash-key { padding: 8px 16px; border-radius: 7px; border: 2px solid var(--st-goal); background: rgba(123,94,167,0.08); font-family: var(--font-mono); font-weight: 600; font-size: 15px; }
.hashbox-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hashbox { padding: 10px 14px; border-radius: 8px; border: 2px solid var(--color-border-strong); background: var(--color-bg-surface); font-family: var(--font-mono); font-size: 12px; text-align: center; min-width: 130px; }
.hashbox.on { border-color: var(--st-active); background: rgba(224,169,59,0.12); }
.hb-row { display: flex; align-items: center; gap: 8px; }
.hb-idx { width: 22px; text-align: right; font-size: 11px; color: var(--color-fg-faint); font-weight: 600; }
.hb-idx.on { color: var(--st-active); }
.hb-slot { flex: 1; min-height: 34px; display: flex; align-items: center; padding: 3px 6px; border-radius: 7px; border: 1.5px solid var(--color-border-default); background: var(--color-bg-muted); }
.hb-slot.on { border-color: var(--st-active); background: rgba(224,169,59,0.07); }
.hb-key { padding: 3px 9px; border-radius: 5px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.hb-arrow { color: var(--color-fg-faint); margin: 0 4px; }

.bst-out-host:not(:empty) { margin-top: 12px; }
.bst-out { padding: 10px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bst-chip { padding: 3px 9px; border-radius: 5px; background: rgba(76,154,106,0.16); border: 1px solid var(--st-done); font-weight: 600; font-size: 12.5px; }
.heap-arr-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; flex-wrap: wrap; }

@media (max-width: 820px) { .hash-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Módulo 05 · Grafos
   ============================================================================ */
.graph-scroll { overflow-x: auto; }
.graph-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 20px; align-items: start; }
.graph-side { display: flex; flex-direction: column; }
.qv-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 38px; }
.qv-item { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px; border: 1.5px solid var(--color-border-strong); background: var(--color-bg-surface); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px; }
.qv-item.head { border-color: var(--st-active); background: rgba(224,169,59,0.12); }
.sv-col { display: flex; flex-direction: column-reverse; gap: 4px; min-height: 38px; }
.sv-item { height: 28px; padding: 0 10px; border-radius: 6px; border: 1.5px solid var(--color-border-strong); background: var(--color-bg-surface); display: flex; align-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px; }
.sv-item.top { border-color: var(--st-active); background: rgba(224,169,59,0.12); }

.mx-table { border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.mx-h { padding: 2px 7px; color: var(--color-fg-subtle); font-weight: 600; }
.mx-cell { width: 26px; height: 26px; text-align: center; border: 1px solid var(--color-border-default); cursor: pointer; }
.adj-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; }
.adj-id { font-weight: 600; width: 16px; }
.adj-chip { padding: 1px 7px; border-radius: 5px; font-weight: 600; }

.ord-chip, .topo-chip { padding: 3px 9px; border-radius: 5px; font-weight: 600; font-size: 12.5px; }
.ord-chip { border: 1px solid; background: var(--color-bg-surface); }
.topo-chip { border: 1px solid var(--st-done); background: rgba(76,154,106,0.16); }

.pq-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
.pq-table th { padding: 2px 6px; color: var(--color-fg-subtle); font-size: 10px; }
.pq-table td { padding: 3px 6px; }

.astar-grid { display: grid; gap: 2px; justify-content: center; user-select: none; }
.astar-cell { width: 30px; height: 30px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 8.5px; line-height: 1.05; position: relative; }

@media (max-width: 860px) { .graph-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Módulo 06 · Greedy y DP
   ============================================================================ */
.acts { display: flex; flex-direction: column; gap: 6px; }
.act-row { display: flex; align-items: center; gap: 8px; }
.act-id { width: 16px; font-weight: 600; font-size: 12px; }
.act-track { position: relative; flex: 1; height: 26px; }
.act-bar { position: absolute; top: 0; height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--color-fg-default); transition: background .18s, border-color .18s; }
.no-motion .act-bar { transition: none; }
.act-ticks { display: flex; margin-left: 24px; margin-top: 2px; }
.act-tick { flex: 1; font-size: 8.5px; color: var(--color-fg-faint); text-align: left; }

.fib-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 20px; align-items: start; }
.fib-slider { width: 130px; }
.fib-memo-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; }
.fib-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }

.knap-table { border-collapse: collapse; margin: 0 auto; font-family: var(--font-mono); font-size: 12.5px; }
.knap-h { padding: 4px 8px; color: var(--color-fg-subtle); font-size: 11px; }
.knap-rh { padding: 4px 8px; color: var(--color-fg-subtle); font-size: 10.5px; text-align: right; white-space: nowrap; }
.knap-cell { width: 34px; height: 32px; text-align: center; font-weight: 600; }

@media (max-width: 860px) { .fib-grid { grid-template-columns: 1fr; } }