/* KlipTok v61 · «Juegos y más» (antes módulo NettleWeb) — estilos ACOTADOS a .nw para no afectar al resto de la plataforma.
   Paleta de KlipTok (índigo→rosa); claro/oscuro con la clase html.dark que ya usa kt-theme.js. */
 .nw{--bg:#f8fafc;--card:#fff;--ink:#111827;--mute:#6b7280;--line:#e5e7eb;--soft:#f3f4f6;--a:#4f46e5;--b:#9333ea;--c:#db2777;--grad:linear-gradient(90deg,#4f46e5,#db2777);--sh:0 1px 3px rgba(17,24,39,.08),0 6px 18px rgba(79,70,229,.08);--ok:#15803d;--bad:#b91c1c}
:root.dark .nw{--bg:#0b1020;--card:#131a30;--ink:#e8ecf8;--mute:#98a2c3;--line:#26304f;--soft:#1a2342;--sh:0 1px 3px rgba(0,0,0,.4);--ok:#86efac;--bad:#fca5a5}
.nw,.nw *{box-sizing:border-box}
.nw{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);min-height:100%}
.nw a:not([class]){color:var(--a)}:root.dark .nw a:not([class]){color:#a5b4fc}
html.nw-html,body.nw-play{margin:0;min-height:100%}
.nw-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.75rem;padding:.55rem 1rem;background:var(--card);border-bottom:1px solid var(--line)}
.nw-logo{display:flex;align-items:center;gap:.5rem;font:800 1.05rem/1 Georgia,"Times New Roman",serif;color:var(--ink);text-decoration:none;white-space:nowrap}
.nw-logo i{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:.55rem;background:var(--grad);color:#fff;font-style:normal;font-size:1rem}
.nw-nav{display:flex;gap:.15rem;overflow-x:auto;flex:1;scrollbar-width:none}.nw-nav::-webkit-scrollbar{display:none}
.nw-nav a,.nw-btn{flex:0 0 auto;border:0;background:none;color:var(--ink);padding:.5rem .8rem;border-radius:.6rem;font:500 .86rem inherit;text-decoration:none;white-space:nowrap;cursor:pointer}
.nw-nav a:hover,.nw-btn:hover{background:var(--soft)}
.nw-nav a[aria-current=page]{background:linear-gradient(90deg,rgba(79,70,229,.14),rgba(219,39,119,.14));color:var(--a);font-weight:700}
:root.dark .nw .nw-nav a[aria-current=page]{color:#c4b5fd}
.nw-wrap{max-width:1180px;margin:0 auto;padding:1.25rem 1rem 3rem}
.nw-h{margin:.2rem 0 .25rem;font:800 1.7rem/1.15 Georgia,serif}.nw-h span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nw-sub{margin:0 0 1.1rem;color:var(--mute)}
.nw-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.nw-in,.nw-sel{padding:.6rem .8rem;border:1px solid var(--line);border-radius:.6rem;background:var(--card);color:var(--ink);font:inherit;font-size:.9rem;min-width:0}
.nw-in{flex:1 1 220px}.nw-in:focus,.nw-sel:focus{outline:2px solid var(--a);outline-offset:1px}
.nw-pri{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1rem;border:0;border-radius:.6rem;background:var(--grad);color:#fff;font:700 .9rem inherit;cursor:pointer;text-decoration:none}
.nw-pri:hover{filter:brightness(1.08)}.nw-pri:disabled{opacity:.5;cursor:default}
.nw-ghost{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .9rem;border:1px solid var(--line);border-radius:.6rem;background:var(--card);color:var(--ink);font:600 .86rem inherit;cursor:pointer;text-decoration:none}
.nw-ghost:hover{background:var(--soft)}
.nw-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.nw-chip{padding:.3rem .75rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 .78rem inherit;cursor:pointer}
.nw-chip[aria-pressed=true]{background:var(--grad);border-color:transparent;color:#fff}
.nw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.85rem}
.nw-card{position:relative;display:flex;flex-direction:column;gap:.45rem;background:var(--card);border:1px solid var(--line);border-radius:.9rem;box-shadow:var(--sh);padding:.9rem;overflow:hidden;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;font:inherit}
.nw-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.nw-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(79,70,229,.18)}
.nw-card .ic{display:grid;place-items:center;height:5rem;border-radius:.7rem;background:var(--soft);font-size:2.3rem;background-size:cover;background-position:center}
.nw-card b{font-size:.95rem;line-height:1.25}.nw-card small{color:var(--mute);font-size:.78rem}
.nw-pill{align-self:flex-start;padding:.1rem .55rem;border-radius:999px;background:rgba(147,51,234,.14);color:var(--b);font-size:.66rem;font-weight:700}
:root.dark .nw .nw-pill{color:#d8b4fe}
.nw-panel{background:var(--card);border:1px solid var(--line);border-radius:.9rem;box-shadow:var(--sh);padding:1rem;margin-bottom:1rem}
.nw-note{padding:.7rem .9rem;border-radius:.7rem;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4);font-size:.85rem;margin-bottom:1rem}
.nw-empty{padding:2rem 1rem;text-align:center;color:var(--mute)}
.nw-video{position:relative;aspect-ratio:16/9;width:100%;border:0;border-radius:.9rem;background:#000;overflow:hidden}
.nw-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nw-wx{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.nw-wx .d{background:var(--soft);border-radius:.7rem;padding:.7rem;text-align:center}.nw-wx .d b{display:block}.nw-wx .d span{font-size:1.8rem}
.nw-now{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.nw-now .t{font:800 3rem/1 Georgia,serif}.nw-now .e{font-size:3.4rem}
/* reproductor */
body.nw-play{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
#nw-stage{position:relative;flex:1;min-height:0;background:#000;display:flex;align-items:center;justify-content:center}
#nw-stage>*{max-width:100%}#nw-stage iframe{width:100%;height:100%;border:0;background:#fff}
#nw-stage .nw-msg{color:#cbd5e1;text-align:center;padding:1rem}
#nw-stage .nw-err{color:#fca5a5}
#nw-emu,#nw-dos{width:100%;height:100%}
#outputCanvas{max-width:100%;max-height:100%;background:#000;outline:0}
.nw-pick{max-width:560px;margin:2rem auto;width:calc(100% - 2rem)}
.nw-pick label{display:block;margin:.7rem 0 .25rem;font-weight:600;font-size:.85rem}
.nw-pick .nw-in,.nw-pick .nw-sel{width:100%}
@media(max-width:560px){.nw-h{font-size:1.4rem}.nw-nav a{padding:.5rem .6rem}}

.nw .nw-tabs{display:flex;gap:.15rem;overflow-x:auto;margin:-.25rem 0 1rem;border-bottom:1px solid var(--line);scrollbar-width:none}.nw .nw-tabs::-webkit-scrollbar{display:none}
.nw .nw-tabs button{flex:0 0 auto;border:0;background:none;color:var(--ink);padding:.6rem .9rem;font:500 .88rem inherit;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.nw .nw-tabs button:hover{background:var(--soft)}.nw .nw-tabs button[aria-selected=true]{color:var(--a);font-weight:700;border-bottom-color:var(--b)}
:root.dark .nw .nw-tabs button[aria-selected=true]{color:#c4b5fd}
.nw .nw-wrap{padding-top:1rem}
