:root {
  --bg: #0d1117;
  --bg2: #161b22;
  --panel: #1c2230;
  --fg: #c9d1d9;
  --dim: #5c6470;
  --accent: #e2b714;      /* amarillo monkeytype */
  --accent2: #4ad295;     /* verde */
  --error: #ff5c5c;
  --error-bg: #3a1d1d;
  --border: #2a313c;
  --mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -10%, #131a26 0%, var(--bg) 60%);
  color: var(--fg);
  font-family: var(--mono);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  background: rgba(13,17,23,.6); backdrop-filter: blur(6px);
}
.brand { font-weight: 700; font-size: 20px; letter-spacing: .5px; }
.logo { color: var(--accent); margin-right: 4px; }
.controls { display: flex; gap: 8px; margin-left: 8px; }
.user { margin-left: auto; display: flex; align-items: center; gap: 12px; position: relative; }
.hi { color: var(--accent); font-size: 14px; }

/* menu de usuario (desplegable del encabezado) */
.user-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid transparent; color: var(--accent);
  padding: 7px 12px; border-radius: 10px; cursor: pointer; font-size: 14px;
}
.user-trigger:hover { border-color: var(--border); background: var(--panel); }
.user-trigger .caret { color: var(--dim); font-size: 11px; transition: transform .18s ease; }
.user-trigger.open .caret { transform: rotate(180deg); color: var(--accent); }
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 220px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 2px;
  animation: menuIn .13s ease;
}
.user-menu.hidden { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; background: transparent; border: none; color: var(--fg);
  padding: 10px 12px; border-radius: 9px; font-size: 14px; cursor: pointer;
  text-decoration: none; font-family: var(--mono);
}
.menu-item:hover { background: var(--bg2); color: var(--accent); }
.menu-sep { height: 1px; background: var(--border); margin: 6px 6px; }

@media (max-width: 720px) {
  .user-menu { right: auto; left: 0; }
}

select, button, input {
  font-family: var(--mono);
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 14px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .05s;
}
select:hover, button:hover { border-color: var(--accent); }
button:active { transform: translateY(1px); }
.ghost { background: transparent; text-decoration: none; color: var(--dim); }
.ghost:hover { color: var(--accent); }
.primary { background: var(--accent); color: #1a1a1a; font-weight: 700; border: none; }
.primary:hover { filter: brightness(1.08); }
.ia-btn { background: linear-gradient(135deg, #7c5cff, #b14ad2); color: #fff; border: none; font-weight: 600; }
.ia-btn:hover { filter: brightness(1.12); border: none; }
.ia-btn:disabled { opacity: .6; cursor: default; }
.lesson-on { color: var(--accent); border-color: var(--accent); background: rgba(226,183,20,.08); }

/* ---------- live stats ---------- */
.live-stats {
  display: flex; gap: 40px; justify-content: center;
  padding: 18px; color: var(--dim);
}
.stat { text-align: center; }
.stat span { display: block; font-size: 30px; font-weight: 700; color: var(--accent); }
.stat label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- arena ---------- */
.arena {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 20px 24px 26px;
}
.practice-shell {
  width: min(1380px, 100%);
  display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(260px, .95fr);
  gap: 20px; align-items: stretch;
}
.typing-pane {
  min-width: 0; display: flex; flex-direction: column; gap: 14px;
}
.snippet-title {
  color: var(--dim); font-size: 14px; letter-spacing: .5px;
}
.typer {
  position: relative;
  width: 100%; min-height: 380px;
  max-height: 62vh; overflow-y: auto;       /* scroll INTERNO en codigo largo */
  overscroll-behavior: contain;             /* no arrastra el scroll a la pagina */
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 34px 38px; outline: none;
  font-size: 23px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  cursor: text;
}
.typer.focused { border-color: var(--accent); }

.code-explain {
  position: relative; align-self: stretch; min-height: 260px;
  background: linear-gradient(180deg, rgba(28,34,48,.98), rgba(22,27,34,.94));
  border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 22px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.34);
  overflow: hidden;
}
.code-explain::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.explain-kicker {
  color: var(--accent); font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.2px; margin: 4px 0 12px; font-weight: 700;
}
.code-explain h2 {
  margin: 0 0 12px; color: var(--fg); font-size: 18px; line-height: 1.3;
}
.code-explain p {
  margin: 0; color: var(--fg); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.55;
}
.explain-detail {
  margin-top: 14px !important; color: var(--dim) !important; font-size: 13px !important;
  line-height: 1.45 !important;
}
.explain-line {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  color: var(--dim); border-top: 1px solid var(--border); padding-top: 12px;
  font-size: 12px; display: flex; justify-content: space-between; gap: 8px;
}
.explain-line b { color: var(--accent2); font-weight: 700; }

/* barra de scroll a tono con el tema (delgada y discreta) */
.typer { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.typer::-webkit-scrollbar { width: 10px; }
.typer::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.typer::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 10px;
  border: 3px solid var(--bg2);   /* deja aire alrededor del pulgar */
}
.typer::-webkit-scrollbar-thumb:hover { background: #3a4656; }

.ch { position: relative; color: var(--dim); }
.ch.correct { color: var(--fg); }
.ch.incorrect { color: var(--error); background: var(--error-bg); border-radius: 3px; }
.ch.ws-incorrect { background: var(--error-bg); border-radius: 3px; }

/* resaltado de sintaxis: sin teclear queda gris; el color del token aparece
   al teclear el caracter correcto (incorrecto = rojo, no se pinta). */
.ch.correct.tok-plain   { color: var(--fg); }
.ch.correct.tok-keyword { color: #ff7b72; }
.ch.correct.tok-func    { color: #d2a8ff; }
.ch.correct.tok-const   { color: #79c0ff; }
.ch.correct.tok-number  { color: #79c0ff; }
.ch.correct.tok-string  { color: #7ee787; }
.ch.correct.tok-comment { color: #6e7681; font-style: italic; }
.ch.current::before {
  content: ""; position: absolute; left: -1px; top: 4%; bottom: 4%;
  width: 2px; background: var(--accent); border-radius: 2px;
  animation: blink 1s steps(2, start) infinite;
}
.nl { color: var(--dim); opacity: .35; }   /* glifo de salto de linea */
@keyframes blink { 50% { opacity: 0; } }

.hint { color: var(--dim); font-size: 13px; }

/* ---------- result overlay ---------- */
.result-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,12,.7); backdrop-filter: blur(4px); z-index: 50;
}
.result-overlay.hidden { display: none; }
.result-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 32px 40px; text-align: center; min-width: 360px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.result-card h2 { margin: 0 0 18px; color: var(--accent2); }
.result-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 22px; }
.result-grid b { display: block; font-size: 30px; color: var(--accent); }
.result-grid span { font-size: 11px; text-transform: uppercase; color: var(--dim); letter-spacing: 1px; }
.result-actions { display: flex; gap: 12px; justify-content: center; }
.round-errors { min-height: 18px; margin: -6px 0 16px; color: var(--error); font-size: 12px; }
.mini-stats { margin-top: 18px; color: var(--dim); font-size: 12px; }

/* progreso de la ronda */
.round-progress { min-height: 18px; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.round-progress.prog-up { color: var(--accent2); }
.round-progress.prog-down { color: var(--accent); }
.round-progress.prog-flat { color: var(--dim); }
.round-rank { min-height: 18px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--accent2); }
.round-rank.rank-first { color: var(--accent); }

/* modal de cambio de contraseña */
.pass-card { position: relative; min-width: 340px; max-width: 90vw; text-align: center; }
.pass-form { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 14px; text-align: left; }
.pass-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--dim); }
.pass-form input { width: 100%; }

/* ---------- modal de progreso ---------- */
.progress-card { position: relative; min-width: 520px; max-width: 90vw;
  max-height: 88vh; display: flex; flex-direction: column; text-align: left; }
/* el cuerpo (tabla de progreso / lista de ranking) hace scroll interno;
   el encabezado, filtros y resumen quedan fijos para no salirse de la pantalla */
.progress-card .prog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin-right: -10px; padding-right: 10px; }
.prog-close {
  position: absolute; top: 12px; right: 14px; background: transparent; border: none;
  color: var(--dim); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 8px;
}
.prog-close:hover { color: var(--accent); }
.progress-card h2 { text-align: center; color: var(--accent); }
.prog-global-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
  color: var(--dim); font-size: 13px; margin-bottom: 18px; }
.prog-global-row b { color: var(--fg); }
.prog-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.prog-table th { text-align: left; color: var(--dim); font-weight: 600; padding: 6px 8px;
  border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.prog-table td { padding: 8px; border-bottom: 1px solid var(--border); color: var(--fg); }
.prog-table .prog-var { color: var(--dim); }
.tend-up { color: var(--accent2); font-weight: 600; }
.tend-down { color: var(--error); font-weight: 600; }
.tend-flat { color: var(--dim); }
.prog-note { color: var(--dim); font-size: 11px; margin-top: 14px; text-align: center; }
.prog-empty { color: var(--dim); text-align: center; padding: 20px; }

/* ---------- ranking (tabla de lideres) ---------- */
.rank-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: space-between; margin-bottom: 14px; color: var(--dim); font-size: 12px; }
.rank-filters select { font-size: 12px; padding: 4px 8px; }
.rank-hint { color: var(--dim); font-size: 11px; }
.rank-h { color: var(--accent); font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; margin: 18px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.rank-global .rank-h:first-child, .prog-body .rank-h:first-child { margin-top: 0; }
.rank-table td:first-child, .rank-table th:first-child { width: 36px; text-align: center; }
.rank-me { background: rgba(226,183,20,.10); }
.rank-tu { color: var(--accent); font-size: 10px; text-transform: uppercase;
  border: 1px solid #e2b71455; border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.rank-card { background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.rank-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rank-card-head b { color: var(--fg); font-size: 14px; }
.rank-chip { font-size: 10px; color: var(--dim); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .3px; }
.rank-chip-learn { color: var(--accent2); border-color: #4ad29555; }
.rank-players { margin-left: auto; color: var(--dim); font-size: 11px; }
.rank-redo { margin-left: 8px; font-size: 11px; padding: 3px 10px; cursor: pointer;
  background: var(--bg2); color: var(--accent); border: 1px solid var(--border); border-radius: 7px; }
.rank-redo:hover { border-color: var(--accent); background: rgba(226,183,20,.12); }
.rank-aviso { color: var(--accent); font-weight: 600; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 4px 6px;
  border-radius: 6px; font-size: 13px; }
.rank-med { width: 26px; text-align: center; }
.rank-pos { color: var(--dim); font-size: 12px; }
.rank-name { flex: 1; color: var(--fg); }
.rank-wpm { color: var(--fg); }
.rank-wpm b { color: var(--accent); }
.rank-acc { color: var(--dim); font-size: 11px; min-width: 92px; text-align: right; white-space: nowrap; }

/* ---------- bottombar ---------- */
.bottombar {
  display: flex; gap: 30px; justify-content: center;
  padding: 12px; color: var(--dim); font-size: 12px;
  border-top: 1px solid var(--border);
}

/* ---------- login ---------- */
.login-body { align-items: center; justify-content: center; }
.login-card {
  margin: auto; background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 38px 40px; width: 340px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.login-card .brand { font-size: 28px; text-align: center; }
.tagline { text-align: center; color: var(--dim); font-size: 13px; margin: 4px 0 24px; }
.login-card label { display: block; font-size: 13px; color: var(--dim); margin-bottom: 14px; }
.login-card input {
  display: block; width: 100%; margin-top: 6px; cursor: text;
}
.login-card button { width: 100%; margin-top: 8px; background: var(--accent); color: #1a1a1a; font-weight: 700; border: none; }
.error { background: var(--error-bg); color: var(--error); padding: 10px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; text-align: center; }

/* separador y boton de huella */
.sep { display: flex; align-items: center; gap: 10px; color: var(--dim); margin: 18px 0 14px; font-size: 12px; }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.huella-btn {
  width: 100%; background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); font-size: 15px; padding: 11px;
}
.huella-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ================= modo administracion (cuenta docente) ================= */
/* el docente no practica: se oculta la arena y el panel pasa a pagina completa */
.admin-mode .controls,
.admin-mode .live-stats,
.admin-mode .arena,
.admin-mode #result { display: none !important; }
.admin-mode #btn-progreso,
.admin-mode #btn-comprension { display: none; }
.admin-root { display: none; }
.admin-mode .admin-root { display: block; padding: 24px 18px 60px; }
.td-inline { min-width: 0; width: 100%; max-width: 1080px; max-height: none;
  margin: 0 auto; box-shadow: none; }
.td-inline .prog-close { display: none; }
.admin-mode .bottombar { display: none; }
/* pestanas del panel docente (cada opcion a pantalla completa) */
.td-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border);
  margin: 6px 0 20px; }
.td-tab { background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--dim); font-size: 14px; padding: 10px 18px; cursor: pointer;
  border-radius: 8px 8px 0 0; transition: color .15s, background .15s; }
.td-tab:hover { color: var(--fg); background: var(--bg2); }
.td-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.td-content { min-height: 42vh; }
.td-detail-name { color: var(--accent); margin: 6px 0 16px; }
.td-activity-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.td-online-badge { color: var(--fg); font-weight: 600; }
.td-online { color: var(--accent2); }

/* presencia social (estudiantes): companeros en linea + saludos con emoji */
.presence { position: fixed; left: 16px; bottom: 16px; z-index: 45; font-size: 13px; }
.admin-mode .presence { display: none; }
.presence-toggle { display: flex; align-items: center; gap: 7px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 20px; padding: 7px 14px; color: var(--fg); cursor: pointer; }
.presence-toggle:hover { border-color: var(--accent2); }
.presence-lbl { color: var(--dim); font-size: 12px; }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2);
  box-shadow: 0 0 6px var(--accent2); display: inline-block; flex: none; }
.presence-panel { position: absolute; left: 0; bottom: 48px; width: 234px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 13px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.presence-h { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 9px; }
.presence-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.presence-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 12px; padding: 3px 9px; font-size: 12px; color: var(--fg); }
.presence-chip.me { border-color: var(--accent); color: var(--accent); }
.presence-chip.profe { border-color: var(--accent); color: var(--accent);
  background: rgba(226,183,20,.10); font-weight: 600; }
.presence-dot.profe { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.profe-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; opacity: .85; }
.presence-profe-flag { margin-left: 2px; font-size: 14px; }
.presence-empty { color: var(--dim); font-size: 12px; }
.presence-saludar-h { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.presence-emojis { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.presence-emoji-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  font-size: 17px; line-height: 1; padding: 5px 7px; cursor: pointer; transition: transform .1s, border-color .1s; }
.presence-emoji-btn:hover { border-color: var(--accent2); transform: scale(1.15); }

/* lluvia de saludos: en los bordes, sin bloquear ni robar foco a quien teclea */
#emoji-rain { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 44; }
.emoji-float { position: absolute; display: flex; flex-direction: column; align-items: center;
  animation: emoji-up 3.2s ease-out forwards; will-change: transform, opacity; }
.emoji-float-e { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.emoji-float-n { font-size: 11px; color: var(--fg); background: rgba(0,0,0,.4);
  border-radius: 8px; padding: 0 6px; margin-top: 3px; white-space: nowrap; }
@keyframes emoji-up {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  15%  { transform: translateY(-12px) scale(1); opacity: 1; }
  100% { transform: translateY(-170px) scale(1); opacity: 0; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .brand { font-size: 18px; }
  .controls { margin-left: 0; order: 3; width: 100%; }
  .controls select { flex: 1; }
  .user { width: 100%; order: 2; }
  select, button, input { padding: 9px 10px; font-size: 13px; }

  .live-stats { gap: 22px; padding: 14px 8px; flex-wrap: wrap; }
  .stat span { font-size: 24px; }

  .arena { padding: 12px; align-items: stretch; }
  .practice-shell { grid-template-columns: 1fr; gap: 12px; }
  .typer { font-size: 17px; padding: 20px 17px; line-height: 1.65; border-radius: 12px; min-height: 300px; max-height: 52vh; }
  .code-explain { min-height: 0; padding: 18px 18px 54px; }
  .code-explain h2 { font-size: 16px; }
  .code-explain p { font-size: 14px; }
  .explain-line { left: 16px; right: 16px; bottom: 12px; }
  .snippet-title { font-size: 12px; text-align: center; padding: 0 8px; }
  .hint { font-size: 11px; text-align: center; padding: 0 12px; }

  .result-card { min-width: unset; width: 90vw; padding: 24px 18px; }
  .result-grid { gap: 10px; }
  .result-grid b { font-size: 22px; }

  .login-card { width: 90vw; max-width: 340px; padding: 30px 24px; }
}

@media (max-width: 420px) {
  .live-stats { gap: 14px; }
  .stat span { font-size: 20px; }
  .typer { font-size: 15px; }
  .code-explain { display: none; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
}

/* dispositivos tactiles: el area de tecleo debe poder enfocar teclado */
@media (hover: none) {
  .hint::after { content: " · toca el recuadro para abrir el teclado"; }
}

/* ================= MODO APRENDIZAJE ================= */
/* utilidad generica: el flujo de aprendizaje revela pasos quitando .hidden */
.hidden { display: none !important; }

.learn-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,12,.78); backdrop-filter: blur(5px); padding: 20px;
}
.learn-overlay.hidden { display: none; }
.learn-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 26px 30px; width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.lc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.lc-step { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.lc-phase { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .5px; border: 1px solid var(--border); }
.phase-sensar { color: #58a6ff; border-color: #58a6ff55; }
.phase-pensar { color: var(--accent); border-color: #e2b71455; }
.phase-actuar { color: var(--accent2); border-color: #4ad29555; }
.phase-base   { color: var(--dim); }
.lc-mission { margin: 0 0 16px; font-size: 22px; color: var(--fg); line-height: 1.35; }
.lc-block { margin-bottom: 14px; }
.lc-block b { display: block; color: var(--accent); font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 4px; }
.lc-block p { margin: 0; line-height: 1.55; }
.lc-subgoals { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; }
.lc-expl { color: var(--dim); font-size: 14px; line-height: 1.55; }
.lc-prompt { font-size: 17px; line-height: 1.5; margin: 0 0 16px; }

/* selector de temas (¿que quieres aprender?) */
.lc-tracks { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 16px; }
.lc-track {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; cursor: pointer; transition: border-color .12s, transform .05s;
}
.lc-track:hover { border-color: var(--accent); }
.lc-track:active { transform: translateY(1px); }
.lc-track-icon { font-size: 30px; line-height: 1; }
.lc-track-body { display: flex; flex-direction: column; gap: 3px; }
.lc-track-body b { font-size: 16px; color: var(--fg); }
.lc-track-desc { font-size: 13px; color: var(--dim); line-height: 1.4; }
.lc-track-n { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

.lc-concepts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lc-chip { font-size: 11px; color: var(--dim); background: var(--bg2);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.lc-chip.state-mastered { color: var(--accent2); border-color: #4ad29555; }
.lc-chip.state-practiced { color: var(--accent); border-color: #e2b71455; }
.lc-chip.state-in_progress { color: #58a6ff; border-color: #58a6ff55; }
.lc-chip.state-seen { color: var(--dim); }

.lc-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.lc-opt { text-align: left; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; font-size: 15px; transition: border-color .12s, background .12s; }
.lc-opt:hover:not(.done) { border-color: var(--accent); }
.lc-opt.done { cursor: default; opacity: .9; }
.lc-opt.ok { border-color: var(--accent2); background: rgba(74,210,149,.12); color: var(--accent2); }
.lc-opt.bad { border-color: var(--error); background: var(--error-bg); color: var(--error); }

.lc-conf { color: var(--dim); font-size: 13px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lc-conf-btns { display: inline-flex; gap: 6px; }
.lc-conf-btns button { padding: 5px 11px; background: var(--bg2); }
.lc-conf-btns button.sel { border-color: var(--accent); color: var(--accent); }

.lc-feedback { min-height: 18px; font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.lc-feedback.ok { color: var(--accent2); }
.lc-feedback.bad { color: var(--accent); }
.lc-feedback.hint { color: var(--dim); font-style: italic; }

.lc-textarea { width: 100%; min-height: 90px; resize: vertical; cursor: text;
  background: var(--bg2); color: var(--fg); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
.lc-textarea:focus { outline: none; border-color: var(--accent); }
.lc-notebook { min-height: 120px; }

/* bloques de codigo / Monitor Serial / casillas (rellenar, cazar error, serial) */
.lc-code {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 14px; font-family: var(--mono); font-size: 14px;
  line-height: 1.7; color: var(--fg); white-space: pre-wrap; overflow-x: auto;
}
.lc-serial {
  background: #0b1020; border: 1px solid var(--border); border-radius: 10px;
  padding: 26px 14px 12px; margin: 0 0 14px; position: relative;
  font-family: var(--mono); font-size: 13px; color: var(--accent2); white-space: pre-wrap;
}
.lc-serial-tag {
  position: absolute; top: 6px; left: 12px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--dim);
}
.lc-blank {
  display: inline-block; min-width: 66px; width: auto; background: #0d1117;
  border: none; border-bottom: 2px solid var(--accent); color: var(--accent);
  font-family: var(--mono); font-size: 14px; padding: 1px 4px; text-align: center;
}
.lc-blank:focus { outline: none; background: rgba(226, 183, 20, .1); }
.lc-blank.blank-ok { color: var(--accent2); border-bottom-color: var(--accent2); }
.lc-blank.blank-bad { color: var(--error); border-bottom-color: var(--error); }
.lc-codearea { min-height: 170px; font-size: 14px; line-height: 1.5; }

.lc-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.lc-model { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 14px; }

/* boton y tarjeta de retroalimentacion IA (tutor formativo) */
.ia-eval-btn {
  background: linear-gradient(135deg, #7c5cff, #b14ad2); color: #fff;
  border: none; font-weight: 600;
}
.ia-eval-btn:hover { filter: brightness(1.12); }
.ia-eval-btn:disabled { opacity: .65; cursor: default; }
.ia-feedback {
  margin: 4px 0 14px; padding: 14px 16px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  animation: menuIn .15s ease;
}
.ia-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ia-badge { font-size: 13px; font-weight: 700; }
.ia-badge.ia-ok { color: var(--accent2); }
.ia-badge.ia-mid { color: var(--accent); }
.ia-badge.ia-low { color: var(--error); }
.ia-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: #c9b3ff; border: 1px solid #7c5cff66; border-radius: 999px; padding: 2px 8px;
}
.ia-tag.heur { color: var(--dim); border-color: var(--border); }
.ia-row { margin-top: 8px; }
.ia-row b {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 3px;
}
.ia-row p { margin: 0; line-height: 1.5; font-size: 14px; }
.ia-good b { color: var(--accent2); }
.ia-miss b { color: var(--accent); }
.ia-model b { color: #b9a3ff; }
.ia-model { border-top: 1px dashed var(--border); padding-top: 10px; }
.lc-checks { display: flex; flex-direction: column; gap: 8px; }
.lc-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--fg); cursor: pointer; }
.lc-check input { width: auto; margin-top: 3px; }

.lc-pins { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.lc-pin { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 14px; text-align: center; }
.lc-pin b { display: block; color: var(--accent); font-size: 13px; }
.lc-pin span { font-size: 12px; color: var(--dim); }
.lc-run-title { color: var(--accent2); margin: 0 0 12px; }
.lc-effect b { color: var(--accent2); }

.lc-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
.lc-sumcol { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.lc-sumcol h3 { margin: 0 0 10px; font-size: 14px; }
.lc-sumcol p { margin: 4px 0; font-size: 14px; color: var(--dim); }
.lc-sumcol b { color: var(--fg); }
.lc-dim { color: var(--dim); font-size: 12px; }

/* barra lateral durante el tecleo */
.learn-side {
  position: fixed; top: 96px; right: 18px; z-index: 40; width: 210px;
  background: rgba(28,34,48,.92); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.learn-side.hidden { display: none; }
.ls-phase { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.ls-mission { font-size: 13px; color: var(--fg); margin-bottom: 8px; line-height: 1.4; }
.ls-subgoals { margin: 0 0 8px; padding-left: 18px; font-size: 12px; color: var(--dim); line-height: 1.6; }

/* panel docente */
.td-card { max-width: 720px; max-height: 88vh; overflow-y: auto; }
.td-section { margin-bottom: 22px; }
.td-section h3 { color: var(--accent); font-size: 14px; margin: 0 0 10px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.td-form { display: flex; gap: 8px; flex-wrap: wrap; }
.td-form input { flex: 1; min-width: 120px; cursor: text; }
.td-link { color: var(--accent); text-decoration: none; }
.td-link:hover { text-decoration: underline; }
.td-ilus { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--fg); }
.td-back { margin-bottom: 10px; }
.td-attempt { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; }
.td-attempt-h { margin-bottom: 4px; }
.td-quote { margin-top: 8px; font-size: 13px; color: var(--fg); border-left: 2px solid var(--border);
  padding-left: 10px; line-height: 1.5; }

@media (max-width: 720px) {
  .learn-card { padding: 20px 18px; }
  .lc-mission { font-size: 19px; }
  .lc-summary { grid-template-columns: 1fr; }
  .learn-side { display: none; }   /* no estorbar en movil */
  .td-card { max-width: 96vw; }
}

/* ================= PANEL DOCENTE: pulido visual 2026-06-14 ================= */
/* Reconstruido desde la especificacion del usuario (su edicion directa en el
   server quedo pisada por un deploy; este bloque la reimplementa fielmente). */
:root {
  --scroll-thumb: #2a313c;
  --scroll-thumb-hover: #3a4656;
  --td-soft: rgba(255, 255, 255, .03);
  --td-soft-strong: rgba(255, 255, 255, .06);
}

/* --- scrollbars personalizadas (comunes) --- */
body { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
body::-webkit-scrollbar { width: 12px; height: 12px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 3px solid var(--bg); }
body::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

.learn-card, .lc-textarea, .td-section {
  scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent;
}
.learn-card::-webkit-scrollbar,
.lc-textarea::-webkit-scrollbar,
.td-section::-webkit-scrollbar { width: 10px; height: 10px; }
.learn-card::-webkit-scrollbar-thumb,
.lc-textarea::-webkit-scrollbar-thumb,
.td-section::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; }
.learn-card::-webkit-scrollbar-thumb:hover,
.lc-textarea::-webkit-scrollbar-thumb:hover,
.td-section::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* --- scrollbar especial del panel docente: degradado amarillo/verde --- */
.td-card { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.td-card::-webkit-scrollbar { width: 12px; }
.td-card::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.td-card::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius: 10px; border: 3px solid var(--panel);
}
.td-card::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }

/* --- tarjeta del panel docente --- */
.td-card {
  width: min(960px, 94vw); max-width: 960px; padding: 30px;
  background:
    radial-gradient(1100px 380px at 50% -12%, rgba(226, 183, 20, .07), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--bg2));
}

/* --- cada seccion como tarjeta --- */
.td-section {
  padding: 16px;
  background: var(--td-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow-x: auto;
}
.td-section h3 { margin-top: 0; }

/* --- tablas dentro del panel docente --- */
.td-card .prog-table {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-width: 560px;
}
.td-card .prog-table th { padding: 10px 12px; }
.td-card .prog-table td { padding: 10px 12px; }
.td-card .prog-table tbody tr { transition: background .12s; }
.td-card .prog-table tbody tr:hover { background: var(--td-soft-strong); }

/* --- links mas destacados --- */
.td-card .td-link {
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.td-card .td-link:hover { border-bottom-color: var(--accent); }

/* --- botones ghost integrados --- */
.td-card .ghost {
  background: var(--td-soft);
  border: 1px solid var(--border);
  color: var(--fg);
}
.td-card .ghost:hover { border-color: var(--accent); color: var(--accent); }

/* --- lista de ilusiones: sin bullets, tarjetas por elemento --- */
.td-ilus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.td-ilus li {
  background: var(--td-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--error);
  border-radius: 10px;
  padding: 10px 12px;
}

/* --- intentos y citas mas pulidos --- */
.td-attempt {
  background: var(--td-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.td-quote {
  background: var(--td-soft-strong);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 8px 12px;
}

/* editor de misiones */
.me-list { display: flex; flex-direction: column; gap: 6px; }
.me-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  text-align: left; background: var(--td-soft); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 14px; color: var(--fg); cursor: pointer; font-size: 14px;
}
.me-item:hover { border-color: var(--accent); color: var(--accent); }
.me-edited {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent2);
  border: 1px solid #4ad29555; border-radius: 999px; padding: 2px 8px; flex: none;
}
.me-form { display: flex; flex-direction: column; gap: 14px; }
.me-sec { background: var(--td-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.me-sec h4 { margin: 0 0 10px; color: var(--accent); font-size: 13px; }
.me-f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.me-f > span { font-size: 12px; color: var(--dim); }
.me-f textarea, .me-f input {
  width: 100%; background: var(--bg2); color: var(--fg); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: var(--mono);
  resize: vertical; cursor: text;
}
.me-f textarea:focus, .me-f input:focus { outline: none; border-color: var(--accent); }

/* --- movil --- */
@media (max-width: 720px) {
  .td-card { width: 96vw; padding: 18px; }
  .td-card h2 { font-size: 20px; }
  .td-section { padding: 12px; }
  .td-card .prog-table { min-width: 480px; }
}

/* ================= Duelo de rapidez (estudiante vs estudiante) ================= */
/* boton retar dentro de cada chip de companero en linea */
.reto-btn {
  margin-left: 6px; border: none; background: transparent; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px; opacity: .7;
  transition: transform .12s, opacity .12s;
}
.reto-btn:hover { opacity: 1; transform: scale(1.25); }

/* capa flotante de toasts / tarjetas de duelo */
#duel-layer {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 78px;
}
#duel-layer > * { pointer-events: auto; }

.duel-toast {
  background: var(--panel); color: var(--fg); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 16px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  animation: duelIn .2s ease;
}

.duel-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 22px; min-width: 260px; max-width: 90vw; text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); animation: duelIn .2s ease;
}
.duel-card.invite { border-color: var(--accent); }
.duel-card.result.win { border-color: var(--accent2); }
.duel-card.result.lose { border-color: var(--error); }
.duel-card-t { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.duel-card p { margin: 6px 0 14px; color: var(--fg); font-size: 14px; }
.duel-actions { display: flex; gap: 10px; justify-content: center; }
.duel-btn {
  border: none; border-radius: 9px; padding: 9px 16px; cursor: pointer;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  background: var(--accent); color: #1a1300;
}
.duel-btn.ghost { background: transparent; color: var(--dim); border: 1px solid var(--border); }
.duel-btn:hover { filter: brightness(1.08); }

/* HUD de la carrera: dos barras de avance en vivo */
#duel-hud {
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: 14px; padding: 12px 18px; min-width: 320px; max-width: 92vw;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
}
.dh-title { font-size: 13px; margin-bottom: 10px; text-align: center; color: var(--fg); }
.dh-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.dh-name { width: 84px; font-size: 12px; color: var(--dim); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-bar { flex: 1; height: 12px; background: var(--bg2); border-radius: 7px; overflow: hidden; }
.dh-bar > i { display: block; height: 100%; width: 0;
  background: var(--accent2); border-radius: 7px; transition: width .25s ease; }
.dh-row.rival .dh-bar > i { background: var(--accent); }

/* cuenta regresiva 3-2-1 */
#duel-count {
  font-size: 84px; font-weight: 800; color: var(--accent);
  text-shadow: 0 4px 24px rgba(0,0,0,.6); margin-top: 8vh;
}
#duel-count.pop { animation: duelPop .5s ease; }

@keyframes duelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes duelPop { 0% { transform: scale(.5); opacity: 0; } 40% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

@media (max-width: 720px) {
  #duel-hud { min-width: 0; width: 94vw; }
  .dh-name { width: 64px; }
}

/* ================= Teclado guía (qué dedo usar) ================= */
.kb-toggle.on { background: var(--accent); color: #1a1300; border-color: var(--accent); }
.admin-mode #keyboard { display: none !important; }   /* el docente no practica */

.keyboard {
  margin: 10px auto 22px; max-width: 760px; width: 96%;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 14px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.kb-board { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.kb-row { display: flex; gap: 6px; justify-content: center; }

.kb-key {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--fg);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  position: relative; user-select: none; transition: box-shadow .12s, transform .12s;
}
.kb-lbl { pointer-events: none; }
.kb-w2 { width: 62px; }
.kb-sp { width: 252px; font-size: 11px; color: var(--dim); }
.kb-mod { color: var(--dim); background: rgba(255,255,255,.02); font-size: 11px; }

/* marca táctil de la fila de inicio (F y J) */
.kb-home::after {
  content: ""; position: absolute; bottom: 6px; left: 50%; width: 12px; height: 2px;
  transform: translateX(-50%); background: currentColor; opacity: .55; border-radius: 2px;
}

/* colores por dedo (van por POSICIÓN física; valen en cualquier teclado).
   Sólidos y vívidos para que se vea claramente qué dedo va en cada tecla. */
.kb-key { color: #15191f; }    /* texto oscuro sobre los colores vivos */
.kb-lp { --fc: #ff6b6b; background: #ff7b7b; border-color: #d94b4b; }
.kb-lr { --fc: #ffa94d; background: #ffb866; border-color: #e08a2e; }
.kb-lm { --fc: #ffd43b; background: #ffdf63; border-color: #d9b21f; }
.kb-li { --fc: #69db7c; background: #7fe392; border-color: #44b85c; }
.kb-ri { --fc: #38d9c0; background: #5fe3ce; border-color: #20b39d; }
.kb-rm { --fc: #4dabf7; background: #6cbcff; border-color: #2f8ad9; }
.kb-rr { --fc: #9775fa; background: #ab90fb; border-color: #7551e0; }
.kb-rp { --fc: #f783ac; background: #fb9bbe; border-color: #e05c8c; }
.kb-th { --fc: #ced4da; background: #c4ccd6; border-color: #98a2af; }
.kb-mod { color: var(--dim); background: rgba(255,255,255,.03); }   /* re-afirma gris para modificadores */
.kb-sp { color: #2a3340; }

/* próxima tecla a presionar: anillo blanco + glow del color de su dedo */
.kb-next {
  transform: translateY(-3px) scale(1.06);
  z-index: 2;
  border-color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 20px 2px var(--fc);
}
.kb-shift { opacity: 1; }   /* el Shift de la mano contraria también se ilumina */

/* leyenda de dedos */
.kb-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--dim);
}
.kb-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.kb-leg-item i {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  background: var(--fc, #555); border: 1px solid rgba(255,255,255,.18);
}
.kb-leg-item .kb-lp { --fc: #ff6b6b; } .kb-leg-item .kb-lr { --fc: #ffa94d; }
.kb-leg-item .kb-lm { --fc: #ffd43b; } .kb-leg-item .kb-li { --fc: #69db7c; }
.kb-leg-item .kb-ri { --fc: #38d9c0; } .kb-leg-item .kb-rm { --fc: #4dabf7; }
.kb-leg-item .kb-rr { --fc: #9775fa; } .kb-leg-item .kb-rp { --fc: #f783ac; }
.kb-leg-item .kb-th { --fc: #ced4da; }

@media (max-width: 760px) {
  .keyboard { padding: 10px 8px; overflow-x: auto; }
  .kb-board { min-width: 620px; }
}

/* ===================== Modo Laboratorio ===================== */
.lab-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: var(--bg); display: flex;
}
.lab-overlay.hidden { display: none; }
.lab-shell { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.lab-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.lab-crumb { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; overflow: hidden; }
.lab-bloque { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.lab-crumb b { color: var(--fg); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-nav { display: flex; align-items: center; gap: 8px; }
.lab-pos { color: var(--dim); font-size: 13px; min-width: 38px; text-align: center; }
.lab-btn {
  background: transparent; border: 1px solid var(--border); color: var(--fg);
  border-radius: 8px; padding: 7px 11px; cursor: pointer; font-family: var(--mono);
  font-size: 13px; transition: all .15s ease;
}
.lab-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lab-btn:disabled { opacity: .35; cursor: default; }
.lab-btn.lab-small { font-size: 12px; padding: 5px 9px; }
.lab-exit { color: var(--dim); }
.lab-exit:hover { border-color: var(--error); color: var(--error); }

.lab-body { flex: 1; display: flex; min-height: 0; position: relative; }
.lab-left, .lab-right {
  flex: 1; min-width: 0; padding: 22px 26px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.lab-left { border-right: 1px solid var(--border); max-width: 46%; }
.lab-left-tag, .lab-editor-head span {
  color: var(--accent); font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 12px; display: block;
}
.lab-objetivo { color: var(--fg); line-height: 1.6; font-size: 15px; }
.lab-objetivo p { margin: 0 0 10px; }
.lab-objetivo ul { margin: 8px 0; padding-left: 20px; }
.lab-objetivo li { margin: 4px 0; line-height: 1.5; }
.lab-objetivo code, .lab-pista code {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-size: 13px; color: var(--accent2);
}
.lab-objetivo b { color: #fff; }
.lab-dim { color: var(--dim); }

.lab-pista-wrap { margin-top: 16px; }
.lab-pista-btn {
  background: transparent; border: 1px dashed var(--border); color: var(--dim);
  border-radius: 8px; padding: 7px 12px; cursor: pointer; font-family: var(--mono); font-size: 13px;
}
.lab-pista-btn:hover, .lab-pista-btn.on { color: var(--accent); border-color: var(--accent); }
.lab-pista {
  margin-top: 10px; padding: 12px 14px; background: var(--bg2);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; line-height: 1.55; font-size: 14px;
}
.lab-pista.hidden { display: none; }

.lab-right { display: flex; flex-direction: column; padding-bottom: 76px; }  /* aire para el FAB de notas */
.lab-editor-head { display: flex; align-items: center; justify-content: space-between; }
.lab-editor-head span { margin-bottom: 0; }
/* editor con resaltado: backdrop <pre> coloreado + <textarea> transparente encima */
.lab-editor { position: relative; flex: 1; min-height: 260px; margin: 12px 0; }
.lab-hl, .lab-code {
  position: absolute; inset: 0; box-sizing: border-box; margin: 0;
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  font-family: var(--mono); font-size: 14px; line-height: 1.55; tab-size: 2;
  white-space: pre; overflow: auto; word-wrap: normal;
}
.lab-hl {
  z-index: 1; background: #0b0f14; color: var(--fg);
  pointer-events: none; scrollbar-width: none;
}
.lab-hl::-webkit-scrollbar { display: none; }
.lab-hl code { font: inherit; white-space: pre; }
.lab-code {
  z-index: 2; background: transparent; color: transparent;
  caret-color: var(--fg); resize: none;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.lab-code:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #e2b71422; }
.lab-code::selection { background: #2a4b6e; }
/* paleta de tokens (estilo VSCode Dark+) */
.lab-t-com   { color: #6a9955; font-style: italic; }
.lab-t-str   { color: #ce9178; }
.lab-t-chr   { color: #ce9178; }
.lab-t-pre   { color: #c586c0; }
.lab-t-num   { color: #b5cea8; }
.lab-t-ctrl  { color: #c586c0; }
.lab-t-type  { color: #569cd6; }
.lab-t-const { color: #4fc1ff; }
.lab-t-fn    { color: #dcdcaa; }
.lab-t-obj   { color: #4ec9b0; }
.lab-actions { display: flex; align-items: center; gap: 14px; }
.lab-revisar {
  background: var(--accent); color: #1a1300; border: none; border-radius: 9px;
  padding: 10px 18px; font-weight: 700; cursor: pointer; font-family: var(--mono); font-size: 14px;
}
.lab-revisar:hover:not(:disabled) { filter: brightness(1.08); }
.lab-revisar:disabled { opacity: .6; cursor: default; }
.lab-go { background: var(--accent2); color: #052016; margin-top: 12px; }
.lab-saved { color: var(--dim); font-size: 12px; }

.lab-feedback-wrap { margin-top: 14px; }
.lab-fb {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; line-height: 1.55; font-size: 14px; color: var(--fg);
}
.lab-fb-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lab-fb-badge { font-weight: 700; }
.lab-fb-ok  { border-color: #4ad29555; } .lab-fb-ok  .lab-fb-badge { color: var(--accent2); }
.lab-fb-mid { border-color: #e2b71455; } .lab-fb-mid .lab-fb-badge { color: var(--accent); }
.lab-fb-low { border-color: #ff5c5c55; } .lab-fb-low .lab-fb-badge { color: var(--error); }
.lab-fb-err { border-color: #ff5c5c55; color: var(--error); }
.lab-fb-note { color: var(--dim); }
.lab-fb-row { margin-top: 8px; }
.lab-fb-row b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.lab-fb-row p { margin: 0; }
.lab-fb-row.good b { color: var(--accent2); }
.lab-fb-row.miss b { color: var(--accent); }
.lab-fb-row.idea b { color: #58a6ff; }
.lab-iatag {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--accent2);
  color: var(--accent2); text-transform: uppercase; letter-spacing: .5px;
}
.lab-iatag.heur { border-color: var(--dim); color: var(--dim); }

/* indice lateral deslizante */
.lab-index {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 5; width: 300px; max-width: 80%;
  background: var(--bg2); border-right: 1px solid var(--border); overflow-y: auto;
  padding: 14px; box-shadow: 14px 0 40px rgba(0,0,0,.4);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.lab-index.hidden { display: none; }
.lab-idx-bloque { margin-bottom: 16px; }
.lab-idx-bh { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.lab-idx-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 8px 10px; cursor: pointer; color: var(--fg); font-family: var(--mono); font-size: 13px;
}
.lab-idx-item:hover { background: var(--panel); }
.lab-idx-item.on { border-color: var(--accent); }
.lab-idx-item.done .lab-idx-t { color: var(--dim); }
.lab-idx-mark { color: var(--dim); font-size: 13px; width: 14px; text-align: center; }
.lab-idx-item.done .lab-idx-mark { color: var(--accent2); }
.lab-idx-item.locked { opacity: .5; cursor: not-allowed; }
.lab-idx-item.locked:hover { background: transparent; }
.lab-idx-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* aviso breve (bloqueo) */
.lab-toast {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(12px);
  background: var(--panel); border: 1px solid var(--accent); color: var(--fg);
  padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 20;
  box-shadow: 0 12px 34px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.lab-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* pantalla continuar / empezar de nuevo */
.lab-chooser {
  position: absolute; inset: 0; z-index: 10; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lab-chooser.hidden { display: none; }
.lab-chooser-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 30px 34px; max-width: 460px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.lab-chooser-tag { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.lab-chooser-card h2 { margin: 0 0 10px; color: var(--fg); font-size: 22px; }
.lab-chooser-card p { color: var(--fg); line-height: 1.5; margin: 0 0 6px; }
.lab-intro { color: var(--dim) !important; font-size: 14px; margin: 8px 0 16px !important; line-height: 1.6; }
.lab-chooser-card b { color: var(--accent); }
.lab-chooser-actions { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 10px; }
.lab-chooser-note { color: var(--dim); font-size: 12.5px; margin-top: 6px; }

/* panel docente · vista Laboratorio */
.td-bar { display: inline-block; width: 70px; height: 7px; border-radius: 999px;
  background: var(--border); vertical-align: middle; margin-left: 6px; overflow: hidden; }
.td-bar i { display: block; height: 100%; background: var(--accent2); }
.td-lab-full { color: var(--accent2); font-weight: 700; }
.td-lab-detail-box { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.td-lab-list { list-style: none; padding: 0; margin: 8px 0 0; }
.td-lab-it { padding: 5px 0; line-height: 1.5; border-bottom: 1px solid var(--border); }
.td-lab-it .td-lab-m { display: inline-block; width: 16px; }
.td-lab-it.ok .td-lab-m { color: var(--accent2); }
.td-lab-it.mid .td-lab-m { color: var(--accent); }
.td-lab-it.dim { color: var(--dim); }
.td-lab-it small { color: var(--dim); }
.td-codepeek { background: transparent; border: 1px solid var(--border); color: var(--dim);
  border-radius: 6px; padding: 1px 8px; font-size: 11px; cursor: pointer; margin-left: 6px; font-family: var(--mono); }
.td-codepeek:hover { color: var(--accent); border-color: var(--accent); }
.td-lab-code { margin: 8px 0 4px; padding: 10px 12px; background: #0b0f14;
  border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  white-space: pre; overflow-x: auto; color: var(--fg); }
.td-lab-code.hidden { display: none; }

@media (max-width: 820px) {
  .lab-body { flex-direction: column; }
  .lab-left { max-width: none; border-right: none; border-bottom: 1px solid var(--border); }
  .lab-left, .lab-right { max-height: none; }
}

/* ===================== Bloc de notas (global) ===================== */
.notas-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 75;
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 16px; cursor: pointer; font-family: var(--mono); font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.notas-fab:hover { transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.notas-fab-i { font-size: 17px; }
.notas-fab-t { font-weight: 600; }

.notas-modal {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(5,8,12,.7); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: notas-fade .18s ease;
}
.notas-modal.hidden { display: none; }
@keyframes notas-fade { from { opacity: 0; } to { opacity: 1; } }
.notas-card {
  display: flex; width: 100%; max-width: 880px; height: 72vh; max-height: 680px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: notas-pop .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes notas-pop { from { transform: scale(.97); opacity: .6; } to { transform: scale(1); opacity: 1; } }

.notas-side {
  width: 270px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--bg2); border-right: 1px solid var(--border);
}
.notas-side-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; font-size: 14px; color: var(--fg); font-weight: 600;
}
.notas-new {
  background: transparent; border: 1px solid var(--border); color: var(--accent);
  border-radius: 8px; padding: 5px 11px; cursor: pointer; font-family: var(--mono); font-size: 12.5px;
  transition: all .15s ease;
}
.notas-new:hover { background: var(--accent); color: #1a1300; border-color: var(--accent); }
.notas-list { flex: 1; overflow-y: auto; padding: 4px 10px 12px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.notas-item {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-left: 3px solid transparent;
  border-radius: 9px; padding: 10px 12px; margin-bottom: 4px; cursor: pointer;
  font-family: var(--mono); transition: background .12s ease, border-color .12s ease;
}
.notas-item:hover { background: var(--panel); }
.notas-item.on { background: var(--panel); border-left-color: var(--accent); }
.notas-item-t { color: var(--fg); font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notas-item-p { color: var(--dim); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notas-item-d { color: var(--dim); font-size: 10.5px; opacity: .8; }

.notas-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.notas-main.vacio .nota-title, .notas-main.vacio .nota-body { opacity: .4; pointer-events: none; }
.notas-main-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border); }
.nota-title {
  flex: 1; background: transparent; border: none; color: var(--fg);
  font-family: var(--mono); font-size: 17px; font-weight: 600; padding: 4px 2px;
}
.nota-title:focus { outline: none; }
.nota-title::placeholder { color: var(--dim); font-weight: 400; }
.nota-icon {
  background: transparent; border: 1px solid transparent; color: var(--dim);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1;
  transition: all .15s ease;
}
.nota-icon:hover { border-color: var(--border); color: var(--fg); }
#nota-del:hover { color: var(--error); border-color: var(--error); }
.nota-body {
  flex: 1; resize: none; background: transparent; border: none; color: var(--fg);
  font-family: var(--mono); font-size: 14.5px; line-height: 1.7; padding: 16px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.nota-body:focus { outline: none; }
.nota-body::placeholder { color: var(--dim); }
.notas-foot { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; border-top: 1px solid var(--border); }
.nota-saved { color: var(--accent2); font-size: 12px; }
.notas-hint { color: var(--dim); font-size: 11.5px; }
.notas-dim { color: var(--dim); font-size: 13px; padding: 14px 12px; line-height: 1.6; }

@media (max-width: 720px) {
  .notas-fab-t { display: none; }
  .notas-fab { padding: 12px; }
  .notas-card { flex-direction: column; height: 86vh; max-height: none; }
  .notas-side { width: auto; max-height: 38%; border-right: none; border-bottom: 1px solid var(--border); }
}