/* Estilos de la lección del Episodio 2 (todo dentro de .lesson) */
.lesson{
  --input:#bfdbfe; --input-b:#2563eb;
  --proc:#fde68a;  --proc-b:#d97706;
  --out:#bbf7d0;   --out-b:#16a34a;
  --const:#ede9fe; --const-b:#7c3aed;
  --t-txt:#fecdd3; --t-txt-b:#e11d48;
  --t-int:#a5f3fc; --t-int-b:#0891b2;
  --t-dec:#d9f99d; --t-dec-b:#65a30d;
  --muted:#6b7280; --bad:#ef4444;
}
.lesson *{box-sizing:border-box}

/* ---- bloques del diagrama (igual que en el juego) ---- */
.lesson .blk{position:relative;width:min(100%,330px);padding:12px 16px;text-align:center;font-weight:700;font-size:1.05rem;transition:filter .2s,transform .2s}
.lesson .blk span{position:relative;display:block}
.lesson .blk::before{content:"";position:absolute;inset:0;background:var(--c);border:3px solid var(--b);border-radius:10px;z-index:0}
.lesson .blk.input::before,.lesson .blk.output::before{transform:skewX(-18deg)}
.lesson .blk.input::before{--c:var(--input);--b:var(--input-b)}
.lesson .blk.output::before{--c:var(--out);--b:var(--out-b)}
.lesson .blk.process::before{--c:var(--proc);--b:var(--proc-b)}
.lesson .blk.active{filter:drop-shadow(0 0 12px #f59e0b);transform:scale(1.05)}
.lesson .blk.done::before{opacity:.7}
.lesson .arrow{width:4px;height:26px;background:#374151;position:relative;margin-bottom:8px}
.lesson .arrow::after{content:"";position:absolute;bottom:-8px;left:-5px;border:7px solid transparent;border-top:10px solid #374151;border-bottom:0}
.lesson .flow{display:flex;flex-direction:column;align-items:center}

/* ---- cajitas de variables ---- */
.lesson .var{width:112px;text-align:center}
.lesson .var.big{width:150px}
.lesson .var .name{font-weight:800;font-size:1.1rem}
.lesson .var .val{width:100%;min-height:52px;border:3px solid;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;font-family:inherit;text-align:center;padding:2px 6px}
.lesson .var .note{font-size:.74rem;line-height:1.15;margin-top:4px;color:var(--muted)}
.lesson .var.in .name{color:var(--input-b)}
.lesson .var.in .val{border-color:var(--input-b);background:var(--input)}
.lesson .var.calc .name{color:var(--proc-b)}
.lesson .var.calc .val{border-color:var(--proc-b);background:var(--proc);border-style:dashed}
.lesson .var.const .name{color:var(--const-b)}
.lesson .var.const .val{border-color:var(--const-b);background:var(--const);box-shadow:inset 0 0 0 3px #fff}
.lesson .var.txt .name{color:var(--t-txt-b)} .lesson .var.txt .val{border-color:var(--t-txt-b);background:var(--t-txt)}
.lesson .var.int .name{color:var(--t-int-b)} .lesson .var.int .val{border-color:var(--t-int-b);background:var(--t-int)}
.lesson .var.dec .name{color:var(--t-dec-b)} .lesson .var.dec .val{border-color:var(--t-dec-b);background:var(--t-dec)}
.lesson input.val{background:#fff!important;outline:0}
.lesson input.val:focus{box-shadow:0 0 0 4px rgba(37,99,235,.3)}
.lesson .val.bad{border-color:var(--bad)!important;animation:l-shake .4s}
.lesson .val.pop{animation:l-pop .5s}
.lesson .val.shake{animation:l-shake .4s}
@keyframes l-pop{40%{transform:scale(1.25);background:#fde68a}}
@keyframes l-shake{25%{translate:-6px}75%{translate:6px}}

/* ---- demos ---- */
.lesson .demo{display:grid;gap:18px;grid-template-columns:1fr;align-items:start}
@media(min-width:768px){.lesson .demo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.lesson .d-mem{display:flex;gap:12px;flex-wrap:wrap}
.lesson .screen{background:#111827;color:#4ade80;font-family:Consolas,monospace;border-radius:12px;padding:10px 16px;font-size:1.4rem;min-height:50px}
.lesson .caption{display:flex;gap:10px;align-items:flex-start;background:#eef2ff;border-radius:14px;padding:10px 14px;min-height:78px;font-size:1.02rem}
.lesson .caption img{width:36px;height:36px;flex:none}
.lesson .btn{flex:none;border:0;border-radius:14px;padding:10px 18px;font-size:1.05rem;font-weight:800;cursor:pointer;background:#22c55e;color:#fff;box-shadow:0 4px 0 #15803d;font-family:inherit}
.lesson .btn:active{transform:translateY(3px);box-shadow:none}
.lesson .btn.alt{background:#6366f1;box-shadow:0 4px 0 #4338ca}
.lesson .btn.gray{background:#94a3b8;box-shadow:0 4px 0 #64748b}
.lesson .btn:disabled{opacity:.5;cursor:not-allowed}
.lesson .tabs{display:flex;gap:8px;flex-wrap:wrap}
.lesson .tab{border:0;border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer;background:#e0e7ff;color:#3730a3;font-family:inherit;font-size:1rem}
.lesson .tab.on{background:#4338ca;color:#fff}

/* ---- widgets sueltos ---- */
.lesson .widget{border:3px dashed #c7d2fe;border-radius:18px;padding:16px;background:#f8faff}
.lesson .widget input[type=number]{flex:none;width:110px;font-size:1.2rem;padding:6px 8px;border:3px solid var(--input-b);border-radius:10px;font-weight:700;text-align:center;font-family:inherit}
.lesson .msg{min-height:3rem;font-weight:600}
.lesson .msg.err{color:#b91c1c}
.lesson .code{background:#0f172a;color:#86efac;border-radius:14px;padding:14px 16px;font-family:Consolas,monospace;font-size:1rem;line-height:1.6;overflow-x:auto}
.lesson .code .c{color:#94a3b8}

/* ---- quiz ---- */
.lesson .q-item{background:#fff;border:3px solid #c7d2fe;border-radius:16px;padding:14px;text-align:center;font-size:1.7rem;font-weight:800;font-family:Consolas,monospace;margin:10px 0}
.lesson .q-opts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lesson .q-opts .btn{min-width:130px}
.lesson .q-fb{text-align:center;min-height:3rem;font-weight:700;margin-top:10px}
.lesson .q-fb.ok{color:#15803d}
.lesson .q-fb.no{color:#b91c1c}

/* ---- INICIO / FIN (óvalos) y catálogo de formas ---- */
.lesson .blk.start::before,.lesson .blk.end::before{border-radius:999px;--c:#e5e7eb;--b:#6b7280}
.lesson .var .val{word-break:break-word}
.lesson .shape-card{background:#f8faff;border:3px solid #e0e7ff;border-radius:18px;padding:14px;text-align:center}
.lesson .shape-card .blk{margin:0 auto 10px}
.lesson .rules li{margin:6px 0}