/* NexoMind V77 · Escena interactiva 2D. Diseño limpio, colores vivos,
   texto legible y comportamiento correcto en celular y tablet. */

.n77 {
  --n77-ink: #231b4d;
  --n77-soft: #efedf9;
  --n77-line: #ddd8f3;
  --n77-a: #6b4fe0;
  --n77-b: #2fb9c9;
  --n77-ok: #15a06a;
  --n77-bad: #d8415f;
  --n77-warn: #e08a1e;
  font: 15px/1.55 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--n77-ink);
}

.n77 *, .n77 *::before, .n77 *::after { box-sizing: border-box; }

/* ---------- cabecera ---------- */
.n77-top {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-end; justify-content: space-between; margin-bottom: 12px;
}
.n77-eyebrow {
  margin: 0 0 2px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--n77-a);
}
.n77-title { margin: 0; font-size: clamp(18px, 2.4vw, 24px); font-weight: 800; line-height: 1.2; }
.n77-meter { min-width: 190px; flex: 0 1 240px; }
.n77-meter-bar { height: 9px; border-radius: 99px; background: var(--n77-soft); overflow: hidden; }
.n77-meter-fill { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--n77-a), var(--n77-b)); transition: width .35s ease; }
.n77-meter-text { display: block; margin-top: 5px; font-size: 12px; color: #6b6797; font-weight: 600; }

/* ---------- selector de modos ---------- */
.n77-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.n77-modes button {
  appearance: none; border: 2px solid var(--n77-line); background: #fff;
  color: var(--n77-ink); font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
  min-height: 42px;
}
.n77-modes button:hover { border-color: var(--n77-a); }
.n77-modes button.on { background: var(--n77-a); border-color: var(--n77-a); color: #fff; }
.n77-modes button.done::after { content: " ✓"; color: var(--n77-ok); font-weight: 900; }
.n77-modes button.on.done::after { color: #d6ffe9; }
.n77-modes button:focus-visible { outline: 3px solid var(--n77-b); outline-offset: 2px; }

.n77-instr {
  margin: 0 0 12px; padding: 11px 15px; border-radius: 13px;
  background: var(--n77-soft); color: #40376f; font-size: 14px; font-weight: 600;
  border-left: 5px solid var(--n77-a);
}

/* ---------- lienzo ---------- */
.n77-stage { position: relative; margin-bottom: 12px; }
.n77-svg text, .n77-svg line, .n77-svg path:not([class]) { pointer-events: none; }
.n77-svg .n77-hot *, .n77-svg .n77-target *, .n77-svg .n77-node * { pointer-events: auto; }

.n77-svg, .n77-canvas {
  display: block; width: 100%; height: auto;
  border-radius: 18px; background: #fff;
  box-shadow: 0 10px 30px rgba(45, 30, 95, .10);
  touch-action: manipulation;
}
.n77-canvas { max-height: 62vh; }

/* zona de toque amplia e invisible: en el teléfono el dedo necesita más
   área que el círculo dibujado, sin agrandar el dibujo */
.n77-hit { fill: transparent; stroke: none; pointer-events: all; }

/* puntos de exploración */
.n77-hot { cursor: pointer; }
.n77-hot-ring { fill: #fff; stroke: var(--n77-a); stroke-width: 3; opacity: .95; }
.n77-hot-dot { fill: var(--n77-a); }
.n77-hot-num { fill: #fff; font-size: 12px; font-weight: 800; text-anchor: middle; pointer-events: none; }
.n77-hot:hover .n77-hot-ring { stroke: var(--n77-b); }
.n77-hot.seen .n77-hot-dot { fill: var(--n77-ok); }
.n77-hot.active .n77-hot-ring { stroke: var(--n77-b); stroke-width: 5; }
.n77-hot:focus-visible .n77-hot-ring { stroke: var(--n77-b); stroke-width: 5; }
.n77-hot:focus { outline: none; }

/* destinos para arrastrar */
.n77-target { cursor: pointer; }
.n77-target-ring { fill: #fff; stroke: var(--n77-b); stroke-width: 3; stroke-dasharray: 6 5; opacity: .97; }
.n77-target-num { fill: var(--n77-b); font-size: 14px; font-weight: 800; text-anchor: middle; pointer-events: none; }
.n77-target.over .n77-target-ring, .n77-target:hover .n77-target-ring { stroke-width: 5; fill: #e6fbfd; }
.n77-target.filled .n77-target-ring { stroke: var(--n77-ok); stroke-dasharray: none; fill: #e6f8f0; }
.n77-target.filled .n77-target-num { fill: var(--n77-ok); }
.n77-target:focus { outline: none; }
.n77-target:focus-visible .n77-target-ring { stroke: var(--n77-a); stroke-width: 5; }
.n77-placed { pointer-events: none; }   /* nunca debe tapar otro destino */
.n77-placed rect { fill: var(--n77-ok); }
.n77-placed text { fill: #fff; font-size: 13px; font-weight: 700; text-anchor: middle; }

/* animación del proceso */
.n77-anim-mark { opacity: .18; transition: opacity .3s; }
.n77-anim-mark.on { opacity: 1; }
.n77-anim-halo { fill: none; stroke: var(--n77-warn); stroke-width: 4; }
.n77-anim-mark.on .n77-anim-halo { animation: n77pulse 1.5s ease-out infinite; }
.n77-anim-dot { fill: var(--n77-warn); }
@keyframes n77pulse { 0% { r: 20; opacity: 1; } 100% { r: 40; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .n77-anim-mark.on .n77-anim-halo { animation: none; } }

.n77-caption {
  margin-top: 10px; padding: 13px 16px; border-radius: 14px;
  background: #1f1a42; color: #fff; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
.n77-caption-n { font-size: 12px; font-weight: 800; color: #ffd466; white-space: nowrap; }
.n77-caption-t { font-size: 14.5px; font-weight: 600; }

/* unir con líneas */
.n77-join .n77-node rect { fill: #fff; stroke: var(--n77-line); stroke-width: 2.5; }
.n77-join .n77-node text { font-size: 14px; font-weight: 700; fill: var(--n77-ink); text-anchor: middle; }
.n77-join .n77-node { cursor: pointer; }
.n77-join .n77-node:hover rect { stroke: var(--n77-a); }
.n77-join .n77-node.sel rect { stroke: var(--n77-a); stroke-width: 4; fill: #f3f0ff; }
.n77-join .n77-node.done rect { stroke: var(--n77-ok); fill: #e9f8f1; }
.n77-join .n77-node:focus { outline: none; }
.n77-join .n77-node:focus-visible rect { stroke: var(--n77-b); stroke-width: 4; }
.n77-line { fill: none; stroke-width: 5; stroke-linecap: round; }
.n77-line.ok { stroke: var(--n77-ok); }
.n77-line.bad { stroke: var(--n77-bad); stroke-dasharray: 8 7; }

/* ---------- panel inferior ---------- */
.n77-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.n77-bank { display: flex; flex-wrap: wrap; gap: 9px; width: 100%; }
.n77-tile {
  appearance: none; border: 2px solid var(--n77-a); background: #fff; color: var(--n77-ink);
  font: inherit; font-size: 14px; font-weight: 700; padding: 11px 16px; border-radius: 12px;
  cursor: grab; min-height: 46px; transition: transform .12s, background .15s, border-color .15s;
}
.n77-tile:hover { background: #f5f2ff; }
.n77-tile.picked { background: var(--n77-a); color: #fff; transform: translateY(-2px); }
.n77-tile.ok { border-color: var(--n77-ok); background: #e9f8f1; color: var(--n77-ok); cursor: default; }
.n77-tile.bad { border-color: var(--n77-bad); background: #fdeaee; animation: n77shake .4s; }
.n77-tile[disabled] { opacity: .75; cursor: default; }
@keyframes n77shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

.n77-btn {
  appearance: none; border: 2px solid var(--n77-line); background: #fff; color: var(--n77-ink);
  font: inherit; font-size: 14px; font-weight: 700; padding: 11px 18px; border-radius: 12px;
  cursor: pointer; min-height: 46px;
}
.n77-btn:hover { border-color: var(--n77-a); }
.n77-btn.primary { background: var(--n77-a); border-color: var(--n77-a); color: #fff; }

.n77-detail {
  width: 100%; background: #fff; border: 2px solid var(--n77-line);
  border-radius: 16px; padding: 15px 18px;
}
.n77-detail.open { border-color: var(--n77-a); }
.n77-detail h4 { margin: 6px 0 6px; font-size: 17px; }
.n77-detail p { margin: 0 0 6px; font-size: 14.5px; color: #4a4473; }
.n77-detail .n77-extra { color: #6b6797; font-size: 13.5px; }
.n77-chip {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  background: var(--n77-soft); color: var(--n77-a); font-size: 11.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}
.n77-hint { margin: 0; font-size: 13.5px; color: #6b6797; }

/* clasificar */
.n77-bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.n77-bin {
  background: #fff; border: 3px dashed var(--n77-line); border-radius: 18px;
  padding: 14px; min-height: 190px; cursor: pointer; transition: border-color .15s, background .15s;
}
.n77-bin:hover, .n77-bin.over { border-color: var(--n77-a); background: #f8f6ff; }
.n77-bin:focus-visible { outline: 3px solid var(--n77-b); outline-offset: 2px; }
.n77-bin h5 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; }
.n77-bin p { margin: 0 0 10px; font-size: 12.5px; color: #6b6797; }
.n77-bin-drop { display: flex; flex-wrap: wrap; gap: 7px; }
.n77-chip-in {
  display: inline-block; padding: 7px 12px; border-radius: 10px;
  background: #e9f8f1; color: var(--n77-ok); font-size: 13px; font-weight: 700;
  border: 2px solid var(--n77-ok);
}

/* ordenar */
.n77-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.n77-step {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 2px solid var(--n77-line); border-radius: 14px; padding: 12px 15px;
  cursor: pointer; min-height: 54px;
}
.n77-step:hover { border-color: var(--n77-a); }
.n77-step.picked { border-color: var(--n77-a); background: #f5f2ff; }
.n77-step.over { border-color: var(--n77-b); border-style: dashed; }
.n77-step.ok { border-color: var(--n77-ok); background: #e9f8f1; }
.n77-step.bad { border-color: var(--n77-bad); background: #fdeaee; }
.n77-step:focus-visible { outline: 3px solid var(--n77-b); outline-offset: 2px; }
.n77-step-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--n77-a); color: #fff; font-weight: 800; font-size: 14px;
  display: grid; place-items: center;
}
.n77-step-t { flex: 1; font-size: 14.5px; font-weight: 600; }
.n77-step-grab { color: #b7b1d8; font-size: 18px; }

/* completar */
.n77-complete { display: grid; gap: 14px; }
.n77-blank { background: #fff; border: 2px solid var(--n77-line); border-radius: 16px; padding: 15px 18px; }
.n77-blank.solved { border-color: var(--n77-ok); background: #f3fbf7; }
.n77-blank-text { margin: 0 0 11px; font-size: 15px; font-weight: 600; }
.n77-slot {
  display: inline-block; min-width: 110px; padding: 2px 10px; border-radius: 8px;
  background: var(--n77-soft); color: var(--n77-a); font-weight: 800;
}
.n77-blank.solved .n77-slot { background: #d9f3e7; color: var(--n77-ok); }
.n77-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.n77-opt {
  appearance: none; border: 2px solid var(--n77-line); background: #fff; color: var(--n77-ink);
  font: inherit; font-size: 14px; font-weight: 700; padding: 10px 15px; border-radius: 11px;
  cursor: pointer; min-height: 44px;
}
.n77-opt:hover:not([disabled]) { border-color: var(--n77-a); }
.n77-opt.ok { border-color: var(--n77-ok); background: #e9f8f1; color: var(--n77-ok); }
.n77-opt.bad { border-color: var(--n77-bad); background: #fdeaee; animation: n77shake .4s; }
.n77-opt[disabled] { opacity: .55; cursor: default; }

/* simulación */
.n77-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; width: 100%; }
.n77-slider { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  background: #fff; border: 2px solid var(--n77-line); border-radius: 14px; padding: 11px 14px; }
.n77-slider span { font-size: 13.5px; font-weight: 700; }
.n77-slider output { font-size: 13.5px; font-weight: 800; color: var(--n77-a); text-align: right; }
.n77-slider input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--n77-a); height: 26px; }
.n77-readout { display: flex; flex-wrap: wrap; gap: 9px; width: 100%; }
.n77-ro { background: #fff; border: 2px solid var(--n77-line); border-radius: 12px; padding: 9px 13px; }
.n77-ro span { display: block; font-size: 11.5px; color: #6b6797; font-weight: 700; }
.n77-ro b { font-size: 15px; color: var(--n77-a); }

.n77-progress-dots { display: flex; gap: 6px; align-items: center; }
.n77-progress-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--n77-line); }
.n77-progress-dots i.on { background: var(--n77-a); }

/* ---------- retroalimentación ---------- */
.n77-feedback { margin-top: 12px; display: none; }
.n77-feedback.show {
  display: block; padding: 13px 16px; border-radius: 14px; font-size: 14.5px;
  border-left: 6px solid var(--n77-a); background: var(--n77-soft);
}
.n77-feedback strong { display: block; font-size: 15px; margin-bottom: 2px; }
.n77-feedback span { display: block; color: #4a4473; }
.n77-feedback.ok { background: #e9f8f1; border-left-color: var(--n77-ok); }
.n77-feedback.ok strong { color: var(--n77-ok); }
.n77-feedback.bad { background: #fdeaee; border-left-color: var(--n77-bad); }
.n77-feedback.bad strong { color: var(--n77-bad); }
.n77-feedback.info { background: var(--n77-soft); border-left-color: var(--n77-a); }

/* ---------- tableta y celular ---------- */
@media (max-width: 900px) {
  .n77-meter { flex: 1 1 100%; }
  .n77-bins { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .n77-modes { gap: 6px; }
  .n77-modes button { font-size: 12.5px; padding: 8px 12px; }
  .n77-instr { font-size: 13px; padding: 10px 12px; }
  .n77-bins { grid-template-columns: 1fr; }
  .n77-bin { min-height: 130px; }
  .n77-tile { font-size: 13px; padding: 10px 13px; }
  .n77-sliders { grid-template-columns: 1fr; }
  .n77-canvas { max-height: none; }
  .n77-caption { flex-direction: column; gap: 4px; }
  .n77-detail { padding: 13px 14px; }
  .n77-step-t { font-size: 13.5px; }
}

/* =====================================================================
   TAREAS POR SEMANAS · selector de semana + tarea de plataforma
   y tarea de cuaderno. Vive dentro del taller V76.
   ===================================================================== */
.n77-host { margin-top: 14px; }

.n77-weekbar {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 14px;
}
.n77-weekchip {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  border: 2px solid #ddd8f3; background: #fff; border-radius: 14px;
  padding: 10px 16px; min-width: 132px; min-height: 56px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .16s, background .16s, transform .12s;
}
.n77-weekchip b { font-size: 15px; font-weight: 800; color: #231b4d; }
.n77-weekchip small { font-size: 11.5px; color: #6b6797; font-weight: 600; }
.n77-weekchip:hover { border-color: #6b4fe0; transform: translateY(-1px); }
.n77-weekchip.on { background: #6b4fe0; border-color: #6b4fe0; }
.n77-weekchip.on b, .n77-weekchip.on small { color: #fff; }
.n77-weekchip.entregada { border-color: #15a06a; }
.n77-weekchip.entregada small { color: #15a06a; }
.n77-weekchip.on.entregada small { color: #c9f5e2; }
.n77-weekchip:focus-visible { outline: 3px solid #2fb9c9; outline-offset: 2px; }

.n77-weekpane {
  border: 2px solid #ddd8f3; border-radius: 20px; padding: 18px 20px; background: #fff;
}
.n77-weekhead {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
}
.n77-weekhead h4 { margin: 0; font-size: 18px; font-weight: 800; color: #231b4d; }

.n77-twotasks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px;
}
.n77-task { border-radius: 16px; padding: 15px 17px; border: 2px solid transparent; }
.n77-task.plat { background: #f3f0ff; border-color: #cdc2f5; }
.n77-task.note { background: #fff6e8; border-color: #f3dcb4; }
.n77-task header { margin-bottom: 8px; }
.n77-task-kind {
  display: inline-block; padding: 4px 11px; border-radius: 99px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.n77-task.plat .n77-task-kind { background: #6b4fe0; color: #fff; }
.n77-task.note .n77-task-kind { background: #d98b1f; color: #fff; }
.n77-task h5 { margin: 7px 0 0; font-size: 15.5px; font-weight: 800; color: #231b4d; }
.n77-task ol { margin: 0 0 10px; padding-left: 20px; }
.n77-task li { font-size: 14px; line-height: 1.5; margin-bottom: 7px; color: #3b3466; }
.n77-materials { margin: 0; font-size: 13px; color: #7a5a1e; }

.n77-evid { margin: 4px 0 8px; font-size: 15px; font-weight: 800; color: #231b4d; }
.n77-evidlist { margin: 0 0 14px; padding-left: 20px; }
.n77-evidlist li { margin-bottom: 12px; }
.n77-evidlist p { margin: 0 0 6px; font-size: 14px; }
.n77-evidlist label { display: block; font-size: 12.5px; color: #6b6797; font-weight: 600; }
.n77-evidlist textarea {
  display: block; width: 100%; min-height: 86px; margin-top: 5px;
  border: 2px solid #ddd8f3; border-radius: 12px; padding: 10px 12px;
  font: inherit; font-size: 14px; resize: vertical; color: #231b4d; background: #fff;
}
.n77-evidlist textarea:focus { outline: none; border-color: #6b4fe0; }

@media (max-width: 760px) {
  .n77-twotasks { grid-template-columns: 1fr; }
  .n77-weekchip { min-width: 108px; padding: 9px 12px; }
  .n77-weekpane { padding: 14px 13px; border-radius: 16px; }
  .n77-weekhead h4 { font-size: 16px; }
}