:root{
    --bg-0:#04070d;
    --bg-1:#0a1320;
    --cyan:#22e3ff;
    --cyan-soft:#7df3ff;
    --teal:#15c9b8;
    --green:#37f5a0;
    --lock:#5d6b78;
    --ink:#dff6ff;
    --muted:#7c93a3;
    --circuit:#123043;
    --gold:#ffd24a;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    font-family:'Chakra Petch',sans-serif;
    background:var(--bg-0);
    color:var(--ink);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  /* ===== Phone frame ===== */
  #stage{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    background:
      radial-gradient(1200px 700px at 50% -10%, #0d2233 0%, transparent 60%),
      radial-gradient(900px 600px at 90% 110%, #07202a 0%, transparent 55%),
      var(--bg-0);
  }
  .app{
    position:relative;
    width:100%;
    max-width:430px;
    height:100vh;
    max-height:932px;
    overflow:hidden;
    background:var(--bg-0);
    box-shadow:0 0 0 1px rgba(34,227,255,.08), 0 30px 80px rgba(0,0,0,.6);
  }
  @media(min-width:460px){
    .app{ border-radius:42px; height:92vh; }
    #stage{ padding:18px; }
  }

  /* ===== Circuit background ===== */
  .circuit-bg{
    position:absolute; inset:0; z-index:0; opacity:.55;
    background-image:
      linear-gradient(var(--circuit) 1px, transparent 1px),
      linear-gradient(90deg, var(--circuit) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 90%);
            mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 90%);
  }
  .circuit-bg::after{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(2px 2px at 20% 30%, var(--cyan) 50%, transparent 51%),
      radial-gradient(2px 2px at 80% 20%, var(--teal) 50%, transparent 51%),
      radial-gradient(2px 2px at 65% 70%, var(--cyan) 50%, transparent 51%),
      radial-gradient(2px 2px at 30% 80%, var(--green) 50%, transparent 51%);
    opacity:.35;
    animation:twinkle 4s ease-in-out infinite alternate;
  }
  @keyframes twinkle{from{opacity:.15}to{opacity:.5}}

  /* ===== Banner Multiplayer ===== */
  .mp-banner{ position:relative; z-index:4; display:flex; align-items:center; gap:14px;
    margin:0 4px 18px; padding:16px 18px; border-radius:18px; cursor:pointer;
    background:linear-gradient(100deg, rgba(232,131,10,.18), rgba(34,227,255,.12));
    border:1px solid rgba(255,154,60,.4); overflow:hidden;
    box-shadow:0 6px 24px rgba(232,131,10,.18); }
  .mp-banner:active{ transform:scale(.985); }
  .mp-banner::before{ content:''; position:absolute; right:-20px; top:-30px; width:100px; height:100px;
    border-radius:50%; background:var(--orange); filter:blur(45px); opacity:.4; }
  .mp-banner-ic{ font-size:30px; flex:0 0 auto; position:relative; }
  .mp-banner-txt{ flex:1; position:relative; }
  .mp-banner-txt b{ display:block; font-family:'Orbitron'; font-size:15px; color:var(--ink); letter-spacing:.5px; }
  .mp-banner-txt span{ font-size:12px; color:var(--cyan-soft); }
  .mp-banner svg{ color:var(--orange); flex:0 0 auto; position:relative; }

  /* ===== Plan de Estudio banner (mapa) ===== */
  .plan-banner{ position:relative; z-index:4; display:flex; align-items:center; gap:14px;
    margin:0 4px 18px; padding:16px 18px; border-radius:18px; cursor:pointer;
    background:linear-gradient(100deg, rgba(155,77,255,.20), rgba(34,227,255,.12));
    border:1px solid rgba(180,120,255,.42); overflow:hidden;
    box-shadow:0 6px 24px rgba(155,77,255,.18); }
  .plan-banner:active{ transform:scale(.985); }
  .plan-banner::before{ content:''; position:absolute; right:-20px; top:-30px; width:100px; height:100px;
    border-radius:50%; background:#9b4dff; filter:blur(45px); opacity:.4; }
  .plan-banner-ic{ font-size:30px; flex:0 0 auto; position:relative; }
  .plan-banner-txt{ flex:1; position:relative; }
  .plan-banner-txt b{ display:block; font-family:'Orbitron'; font-size:15px; color:var(--ink); letter-spacing:.5px; }
  .plan-banner-txt span{ font-size:12px; color:var(--cyan-soft); }
  .plan-banner svg{ color:#c79bff; flex:0 0 auto; position:relative; }

  /* ===== HUB DE INICIO ===== */
  .home-screen{ position:absolute; inset:0; z-index:55; background:var(--bg-0);
    transform:translateX(0); transition:transform .32s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; pointer-events:auto; }
  .home-screen:not(.open){ transform:translateX(-100%); pointer-events:none; }
  .home-bg{ position:absolute; inset:0; pointer-events:none; opacity:.6;
    background:
      radial-gradient(circle at 18% 12%, rgba(34,227,255,.16), transparent 42%),
      radial-gradient(circle at 85% 30%, rgba(155,77,255,.16), transparent 45%),
      radial-gradient(circle at 50% 95%, rgba(232,131,10,.10), transparent 50%); }
  .home-scroll{ position:relative; z-index:1; flex:1; overflow-y:auto;
    padding:58px 18px calc(96px + env(safe-area-inset-bottom)); }
  .home-head{ margin:0 4px 22px; }
  .home-hi{ font-family:'Orbitron'; font-size:12px; letter-spacing:1.5px; color:var(--cyan); text-transform:uppercase; }
  .home-title{ font-family:'Orbitron'; font-size:25px; color:var(--ink); margin-top:6px; line-height:1.15; }

  .home-card{ position:relative; display:flex; align-items:center; gap:15px; overflow:hidden;
    margin-bottom:14px; padding:20px 18px; border-radius:20px; cursor:pointer;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
    transition:transform .15s, border-color .2s; }
  .home-card:active{ transform:scale(.985); }
  .home-card .hc-glow{ position:absolute; right:-30px; top:-40px; width:130px; height:130px;
    border-radius:50%; filter:blur(48px); opacity:.5; }
  .hc-map  .hc-glow{ background:#22e3ff; }
  .hc-plan .hc-glow{ background:#9b4dff; }
  .hc-arena .hc-glow{ background:#E8830A; }
  .hc-sim  .hc-glow{ background:#37f5a0; }
  .hc-games .hc-glow{ background:#ffd24a; }
  .hc-map{ border-color:rgba(34,227,255,.30); }
  .hc-plan{ border-color:rgba(155,77,255,.30); }
  .hc-arena{ border-color:rgba(232,131,10,.32); }
  .hc-sim{ border-color:rgba(55,245,160,.30); }
  .hc-games{ border-color:rgba(255,210,74,.32); }
  .home-card .hc-ic{ font-size:34px; flex:0 0 auto; position:relative;
    width:58px; height:58px; display:grid; place-items:center; border-radius:16px;
    background:rgba(0,0,0,.25); }
  .home-card .hc-body{ flex:1; position:relative; min-width:0; }
  .home-card .hc-body b{ display:block; font-family:'Orbitron'; font-size:16px; color:var(--ink); letter-spacing:.4px; }
  .home-card .hc-body span{ display:block; font-size:12.5px; color:var(--cyan-soft); margin-top:3px; }
  .home-card .hc-meta{ display:inline-block; margin-top:9px; font-size:10.5px; letter-spacing:.6px;
    text-transform:uppercase; color:var(--muted); background:rgba(255,255,255,.06);
    padding:3px 9px; border-radius:20px; }
  .home-card .hc-arrow{ width:22px; height:22px; flex:0 0 auto; color:var(--muted); position:relative; transition:transform .25s; }
  .home-screen.holo-open .hc-arena .hc-chev{ transform:rotate(180deg); }
  .home-screen.games-open .hc-games .hc-chev-games{ transform:rotate(180deg); }

  /* Submenú holográfico del Multiplayer / Minijuegos */
  .holo-wrap{ max-height:0; overflow:hidden; opacity:0;
    transition:max-height .35s ease, opacity .3s ease; margin:0 6px; }
  .home-screen.holo-open #holoWrap{ max-height:260px; opacity:1; margin-bottom:14px; }
  .home-screen.games-open #gamesWrap{ max-height:900px; opacity:1; margin-bottom:14px; }
  .holo-card.locked{ opacity:.45; filter:grayscale(.6); }
  .holo-card .holo-lock{ flex:0 0 auto; font-size:18px; }
  .holo-card{ position:relative; display:flex; align-items:center; gap:13px; overflow:hidden;
    margin:0 0 10px; padding:15px 16px; border-radius:16px; cursor:pointer;
    background:linear-gradient(120deg, rgba(34,227,255,.10), rgba(155,77,255,.10));
    border:1px solid rgba(34,227,255,.35);
    box-shadow:0 0 22px rgba(34,227,255,.10) inset, 0 6px 18px rgba(0,0,0,.25); }
  .holo-card:active{ transform:scale(.98); }
  .holo-card::before{ content:''; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(34,227,255,.05) 0, rgba(34,227,255,.05) 1px, transparent 1px, transparent 4px); }
  .holo-scan{ position:absolute; left:0; right:0; top:0; height:36%;
    background:linear-gradient(180deg, rgba(34,227,255,.22), transparent);
    animation:holoScan 2.6s linear infinite; pointer-events:none; }
  @keyframes holoScan{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(320%); } }
  .holo-ic{ font-size:24px; flex:0 0 auto; position:relative; filter:drop-shadow(0 0 6px rgba(34,227,255,.5)); }
  .holo-txt{ position:relative; flex:1; }
  .holo-txt b{ display:block; font-family:'Orbitron'; font-size:13px; color:#bff4ff; letter-spacing:.3px; }
  .holo-txt span{ font-size:11.5px; color:var(--cyan-soft); }

  .home-tutor{ display:flex; align-items:center; justify-content:center; gap:9px;
    margin:8px 6px 0; padding:14px; border-radius:14px; cursor:pointer;
    background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.14);
    font-size:13px; color:var(--cyan-soft); }
  .home-tutor .ht-ic{ font-size:18px; }
  .home-tutor b{ color:var(--cyan); }

  /* ===== Plan de Estudio — pantalla ===== */
  .plan-screen{ position:absolute; inset:0; z-index:60; background:var(--bg-0);
    transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
    pointer-events:none; display:flex; flex-direction:column; }
  .plan-screen.open{ transform:translateX(0); pointer-events:auto; }
  .plan-top{ display:flex; align-items:center; gap:12px; padding:50px 18px 14px;
    background:linear-gradient(180deg, rgba(155,77,255,.16), transparent); }
  .plan-top .t-back{ position:static; margin:0; cursor:pointer; color:var(--ink); }
  .plan-top h2{ font-family:'Orbitron'; font-size:16px; color:var(--ink); letter-spacing:.5px; }
  .plan-body{ flex:1; overflow-y:auto; padding:8px 18px 28px; }
  .plan-intro{ font-size:13.5px; color:var(--cyan-soft); line-height:1.55; margin-bottom:18px; text-align:center; }
  .plan-sec-title{ font-family:'Orbitron'; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--muted); margin:18px 2px 10px; }
  .plan-mod{ display:flex; align-items:center; gap:13px; padding:13px 15px; margin-bottom:10px;
    border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    cursor:pointer; transition:.15s; }
  .plan-mod:active{ transform:scale(.99); }
  .plan-mod.on{ background:rgba(155,77,255,.14); border-color:rgba(180,120,255,.55);
    box-shadow:0 0 0 1px rgba(180,120,255,.25) inset; }
  .plan-mod .pm-check{ width:24px; height:24px; flex:0 0 auto; border-radius:7px;
    border:2px solid rgba(255,255,255,.25); display:grid; place-items:center; transition:.15s; }
  .plan-mod.on .pm-check{ background:#9b4dff; border-color:#9b4dff; }
  .plan-mod .pm-check svg{ width:14px; height:14px; color:#fff; opacity:0; transition:.15s; }
  .plan-mod.on .pm-check svg{ opacity:1; }
  .plan-mod .pm-txt b{ display:block; font-size:13.5px; color:var(--ink); }
  .plan-mod .pm-txt span{ font-size:11.5px; color:var(--muted); }
  .plan-diffs{ display:flex; gap:8px; margin-bottom:8px; }
  .plan-diff{ flex:1; text-align:center; padding:11px 6px; border-radius:12px; cursor:pointer;
    font-family:'Orbitron'; font-size:11px; letter-spacing:.5px; color:var(--muted);
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); transition:.15s; }
  .plan-diff.on{ color:var(--ink); background:rgba(34,227,255,.12); border-color:rgba(34,227,255,.5); }
  .plan-actions{ position:relative; padding:14px 18px calc(18px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg, var(--bg-0) 70%, transparent); }
  .plan-go{ width:100%; padding:16px; border:none; border-radius:15px; cursor:pointer;
    font-family:'Orbitron'; font-size:14px; letter-spacing:1px; color:#0a0a14; font-weight:700;
    background:linear-gradient(100deg,#22e3ff,#9b4dff); box-shadow:0 8px 26px rgba(120,90,255,.35); }
  .plan-go:disabled{ opacity:.4; filter:grayscale(.6); cursor:default; box-shadow:none; }
  .plan-go:not(:disabled):active{ transform:scale(.98); }
  .plan-ask{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px;
    font-size:12.5px; color:var(--cyan-soft); cursor:pointer; }
  .plan-ask b{ color:var(--cyan); text-decoration:underline; }
  .plan-count{ text-align:center; font-size:12px; color:var(--muted); margin-bottom:8px; min-height:16px; }

  /* subtemas expandibles */
  .plan-modwrap{ margin-bottom:10px; }
  .plan-mod .pm-chev{ width:20px; height:20px; flex:0 0 auto; color:var(--muted);
    transition:transform .2s; padding:4px; box-sizing:content-box; }
  .plan-modwrap.exp .pm-chev{ transform:rotate(180deg); }
  .plan-mod.partial .pm-check{ background:rgba(155,77,255,.35); border-color:#9b4dff; }
  .plan-mod.partial .pm-check svg{ opacity:.55; }
  .plan-subs{ display:none; padding:6px 0 2px 14px; }
  .plan-modwrap.exp .plan-subs{ display:block; }
  .plan-sub{ display:flex; align-items:center; gap:11px; padding:9px 13px; margin:6px 0;
    border-radius:11px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
    cursor:pointer; transition:.13s; }
  .plan-sub:active{ transform:scale(.99); }
  .plan-sub.on{ background:rgba(34,227,255,.10); border-color:rgba(34,227,255,.4); }
  .plan-sub .ps-check{ width:20px; height:20px; flex:0 0 auto; border-radius:6px;
    border:2px solid rgba(255,255,255,.22); display:grid; place-items:center; transition:.13s; }
  .plan-sub.on .ps-check{ background:#22e3ff; border-color:#22e3ff; }
  .plan-sub .ps-check svg{ width:12px; height:12px; color:#06121a; opacity:0; transition:.13s; }
  .plan-sub.on .ps-check svg{ opacity:1; }
  .plan-sub .ps-txt{ font-size:13px; color:var(--ink); }
  .plan-sub .ps-txt i{ color:var(--muted); font-style:normal; font-size:11.5px; }

  /* toggle saltar repaso */
  .plan-skiprow{ display:flex; align-items:center; gap:12px; margin-top:20px; padding:13px 15px;
    border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
  .plan-skip-txt{ flex:1; }
  .plan-skip-txt b{ display:block; font-size:13.5px; color:var(--ink); }
  .plan-skip-txt span{ font-size:11.5px; color:var(--muted); }
  .plan-toggle{ width:48px; height:28px; border-radius:16px; background:rgba(255,255,255,.14);
    flex:0 0 auto; position:relative; cursor:pointer; transition:.2s; }
  .plan-toggle i{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
    background:#fff; transition:.2s; }
  .plan-toggle.on{ background:#22e3ff; }
  .plan-toggle.on i{ transform:translateX(20px); }

  /* ===== Header ===== */
  header{
    position:relative; z-index:6;
    padding:54px 22px 10px;
    text-align:center;
    background:linear-gradient(180deg, var(--bg-0) 55%, transparent);
  }
  header .kicker{
    font-family:'Orbitron',sans-serif;
    font-size:10px; letter-spacing:5px; color:var(--muted);
    text-transform:uppercase;
  }
  header h1{
    font-family:'Orbitron',sans-serif;
    font-weight:900;
    font-size:24px;
    letter-spacing:1px;
    margin-top:4px;
    color:var(--cyan-soft);
    text-shadow:0 0 18px rgba(34,227,255,.55), 0 0 40px rgba(34,227,255,.25);
  }

  /* ===== Scroll track ===== */
  .scroll{
    position:absolute; inset:0; z-index:4;
    overflow-y:auto; overflow-x:hidden;
    padding-top:118px; padding-bottom:120px;
    scroll-behavior:smooth;
  }
  .scroll::-webkit-scrollbar{display:none;}
  .scroll{scrollbar-width:none;}

  .path-wrap{ position:relative; width:100%; }
  svg.path{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }

  .nodes{ position:relative; z-index:3; padding:10px 0 40px; }

  /* ===== Node ===== */
  .node{
    position:relative;
    display:flex; align-items:center; gap:16px;
    padding:26px 22px;
    opacity:0; transform:translateY(28px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .node.left{ flex-direction:row; }
  .node.right{ flex-direction:row-reverse; text-align:right; }
  .node.in{ opacity:1; transform:translateY(0); }

  .badge{
    position:relative;
    width:96px; height:96px; flex:0 0 96px;
    border-radius:50%;
    display:grid; place-items:center;
    background:radial-gradient(circle at 35% 30%, #0e2433, #061019);
    border:2px solid rgba(34,227,255,.25);
    transition:transform .5s cubic-bezier(.2,.9,.2,1), box-shadow .5s, border-color .5s;
  }
  .badge .ring{
    position:absolute; inset:-7px; border-radius:50%;
    border:2px solid transparent;
    pointer-events:none;
  }
  .node.unlocked .badge{
    border-color:rgba(34,227,255,.9);
    box-shadow:0 0 28px rgba(34,227,255,.5), inset 0 0 18px rgba(34,227,255,.25);
  }
  .node.active .badge{
    transform:scale(1.12);
    box-shadow:0 0 46px rgba(34,227,255,.85), inset 0 0 22px rgba(34,227,255,.4);
  }
  .node.active .ring{
    border-color:rgba(34,227,255,.55);
    animation:pulse 1.6s ease-out infinite;
  }
  @keyframes pulse{
    0%{transform:scale(1);opacity:.8}
    100%{transform:scale(1.4);opacity:0}
  }

  .badge svg{ width:54px; height:54px; }

  /* atom spin when active */
  .atom{ transition:transform .6s ease; }
  .node.active .atom{ animation:spin 9s linear infinite; }
  @keyframes spin{to{transform:rotate(360deg)}}

  /* locked = gear/nut, rotates when node approaches */
  .gear{
    transition:transform .9s cubic-bezier(.34,1.4,.5,1);
    transform:rotate(0deg);
  }
  .node.locked.active .gear{ transform:rotate(140deg); }
  .node.locked.spin-left.active .gear{ transform:rotate(-140deg); }

  .badge.locked-b{
    border-color:rgba(120,140,155,.35);
    background:radial-gradient(circle at 35% 30%, #16212b, #0a1118);
  }

  .info{ flex:1; min-width:0; }
  .eje{
    font-family:'Orbitron',sans-serif;
    font-size:13px; font-weight:700; letter-spacing:1px;
    color:var(--cyan); text-transform:uppercase;
    text-shadow:0 0 12px rgba(34,227,255,.4);
    line-height:1.25; margin-top:40px;
  }
  .node.locked .eje{ color:var(--muted); text-shadow:none; }
  .desc{ font-size:13px; color:var(--muted); margin:5px 0 10px; line-height:1.35; }

  /* --- Diferenciación 11° (naranja) vs 10° (cian) --- */
  .node.year11.unlocked .badge{
    border-color:rgba(232,131,10,.9);
    box-shadow:0 0 28px rgba(232,131,10,.5), inset 0 0 18px rgba(232,131,10,.25);
  }
  .node.year11.active .badge{
    box-shadow:0 0 46px rgba(232,131,10,.85), inset 0 0 22px rgba(232,131,10,.4);
  }
  .node.year11.active .ring{ border-color:rgba(232,131,10,.55); }
  /* resaltado al acercar el dedo/mouse a un módulo desbloqueado: pop rápido + pulso.
     Ojo: los nodos desbloqueados en runtime solo pierden .locked (unlockNode() nunca
     agrega .unlocked, que solo trae el nodo 1 en el literal EJES) — por eso esto se
     engancha en :not(.locked) y no en .unlocked, o nunca se vería en los módulos 2-7. */
  .node.near:not(.locked) .badge{
    transform:scale(1.16);
    transition:transform .16s ease-out, box-shadow .16s ease-out, border-color .16s ease-out;
    box-shadow:0 0 60px rgba(34,227,255,1), 0 0 110px rgba(34,227,255,.55), inset 0 0 26px rgba(34,227,255,.65);
  }
  .node.near:not(.locked) .ring{ border-color:rgba(34,227,255,.95); animation:pulse .8s ease-out infinite; }
  .node.year11.near:not(.locked) .badge{
    box-shadow:0 0 60px rgba(232,131,10,1), 0 0 110px rgba(232,131,10,.55), inset 0 0 26px rgba(232,131,10,.65);
  }
  .node.year11.near:not(.locked) .ring{ border-color:rgba(232,131,10,.95); }
  .node.year11 .eje{ color:#ffae54; text-shadow:0 0 12px rgba(232,131,10,.45); }
  .node.year11.locked .eje{ color:var(--muted); text-shadow:none; }
  .node.year11 .bar i{ background:linear-gradient(90deg,#b35d00,#ffae54); box-shadow:0 0 14px rgba(232,131,10,.7); }
  .node.year11 .pct{ color:#ffc789; }
  .node.year11.locked .pct{ color:var(--muted); }
  .node.year11 .badge svg [stroke]{ }

  .bar{
    height:14px; border-radius:8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden; position:relative;
    max-width:180px;
  }
  .node.right .bar{ margin-left:auto; }
  .bar i{
    position:absolute; inset:0; width:0;
    background:linear-gradient(90deg, var(--teal), var(--cyan));
    box-shadow:0 0 14px rgba(34,227,255,.7);
    border-radius:8px;
    transition:width 1.1s cubic-bezier(.2,.8,.2,1);
  }
  .pct{ font-size:11px; color:var(--cyan-soft); margin-top:5px; font-weight:600; letter-spacing:.5px; }
  .node.locked .pct{ color:var(--muted); }

  /* ===== Top + bottom bars ===== */
  .statusbar{
    position:absolute; top:0; left:0; right:0; z-index:7;
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 22px 6px; font-size:13px; font-weight:600;
    color:var(--ink); pointer-events:none;
  }
  .statusbar .dots{ font-family:'Orbitron'; letter-spacing:2px; font-size:11px; }

  .tabbar{
    position:absolute; bottom:0; left:0; right:0; z-index:7;
    display:flex; justify-content:space-around; align-items:center;
    padding:14px 0 26px;
    background:linear-gradient(0deg, var(--bg-0) 60%, transparent);
    backdrop-filter:blur(6px);
  }
  .tab{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted); font-size:10px; letter-spacing:.5px;}
  .tab svg{width:22px;height:22px;}
  .tab.on{ color:var(--cyan); text-shadow:0 0 10px rgba(34,227,255,.5);}
  .tab.on svg{ filter:drop-shadow(0 0 6px rgba(34,227,255,.7)); }

  /* sound toggle */
  .sound{
    position:absolute; top:46px; right:16px; z-index:8;
    width:38px;height:38px;border-radius:12px;
    background:rgba(10,25,35,.7); border:1px solid rgba(34,227,255,.3);
    display:grid;place-items:center;color:var(--cyan);cursor:pointer;
    backdrop-filter:blur(6px);
  }
  .sound svg{width:18px;height:18px;}

  /* tap hint */
  .hint{
    position:absolute; z-index:9; bottom:96px; left:50%; transform:translateX(-50%);
    font-size:11px; color:var(--muted); letter-spacing:1px;
    opacity:.0; animation:hintIn .6s ease 1.4s forwards;
  }
  @keyframes hintIn{to{opacity:.7}}

  /* spark dot moving along path */
  .spark{ filter:drop-shadow(0 0 6px var(--cyan)); }

  /* ============ WELCOME / LOGIN ============ */
  .screen{
    position:absolute; inset:0; z-index:100;
    display:flex; flex-direction:column;
    overflow-y:auto;
    background:
      radial-gradient(800px 600px at 50% 0%, #0d2a3c 0%, transparent 60%),
      var(--bg-0);
    transition:opacity .5s ease, transform .5s ease;
  }
  .screen.hide{ opacity:0; pointer-events:none; transform:scale(1.04); }
  .screen .cta, .screen b, .screen .back-link, .screen input,
  .screen .school-select, .screen .oauth-row, .screen .oauth-divider,
  .screen .field, .screen .l-toggle, .screen .l-demo, .screen .l-err{ position:relative; z-index:3; }

  .welcome{ text-align:center; padding:0 30px; justify-content:space-between; }
  .w-hero{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding-top:60px;}
  .w-art{
    width:160px;height:160px;border-radius:50%;position:relative;
    display:grid;place-items:center;
    background:radial-gradient(circle at 35% 30%,#10314a,#04101a);
    border:2px solid rgba(34,227,255,.4);
    box-shadow:0 0 50px rgba(34,227,255,.4), inset 0 0 30px rgba(34,227,255,.2);
  }
  .w-art svg{ width:96px;height:96px; animation:spin 11s linear infinite; }
  .w-art .orbit-dot{
    position:absolute;width:14px;height:14px;border-radius:50%;
    background:var(--green);box-shadow:0 0 16px var(--green);
    top:6px;left:50%;margin-left:-7px;
    animation:orbit 4s linear infinite;
  }
  @keyframes orbit{ to{ transform:rotate(360deg) translateY(0); } }
  .w-art .orbit-wrap{ position:absolute; inset:0; animation:spin 6s linear infinite; }

  .w-title{
    font-family:'Orbitron'; font-weight:900; font-size:30px; line-height:1.12;
    color:var(--cyan-soft); text-shadow:0 0 26px rgba(34,227,255,.55);
    letter-spacing:.5px;
  }
  .w-title .glitch{ color:var(--green); text-shadow:0 0 22px rgba(55,245,160,.6);}
  .w-tag{ font-size:14px; color:var(--muted); max-width:300px; line-height:1.5;}

  /* sliding motivational widget */
  .slider{ position:relative; height:46px; width:100%; max-width:330px; overflow:hidden; }
  .slider .mot{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:'Chakra Petch'; font-weight:600; font-size:15px; color:var(--cyan);
    opacity:0; transform:translateX(30px); transition:opacity .5s, transform .5s;
    text-shadow:0 0 12px rgba(34,227,255,.4);
  }
  .slider .mot.on{ opacity:1; transform:translateX(0); }
  .slider-dots{ display:flex; gap:6px; justify-content:center; margin-top:4px;}
  .slider-dots b{ width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:.3s;}
  .slider-dots b.on{ background:var(--cyan); width:18px;border-radius:3px; box-shadow:0 0 8px var(--cyan);}

  .w-foot{ padding:14px 0 40px; width:100%; }
  .cta{
    width:100%; padding:18px; border:none; border-radius:18px; cursor:pointer;
    font-family:'Orbitron'; font-weight:700; font-size:15px; letter-spacing:1.5px;
    background:linear-gradient(90deg,var(--teal),var(--cyan)); color:#04141a;
    box-shadow:0 0 30px rgba(34,227,255,.6);
    transition:transform .15s;
  }
  .cta:active{ transform:scale(.97); }
  .w-alt{ margin-top:16px; font-size:13px; color:var(--muted); }
  .w-alt b{ color:var(--cyan); cursor:pointer; }

  /* login form */
  .login{ justify-content:center; padding:0 30px; gap:0; }
  .l-head{ text-align:center; margin-bottom:26px; }
  .l-head .kicker{ font-family:'Orbitron'; font-size:10px; letter-spacing:4px; color:var(--muted);}
  .l-head h2{ font-family:'Orbitron'; font-weight:900; font-size:24px; color:var(--cyan-soft);
    text-shadow:0 0 20px rgba(34,227,255,.5); margin-top:6px;}
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:11px; letter-spacing:1px; color:var(--muted); margin-bottom:6px; text-transform:uppercase;}
  .field input{
    width:100%; padding:15px 16px; border-radius:14px;
    background:rgba(10,25,35,.7); border:1px solid rgba(34,227,255,.25);
    color:var(--ink); font-family:'Chakra Petch'; font-size:15px; outline:none;
    transition:border-color .25s, box-shadow .25s;
  }
  .field input:focus{ border-color:var(--cyan); box-shadow:0 0 16px rgba(34,227,255,.35); }

  /* selector de colegio */
  .school-select{ width:100%; padding:15px 16px; border-radius:14px; cursor:pointer;
    background:rgba(10,25,35,.7); border:1px solid rgba(34,227,255,.25);
    color:var(--muted); font-family:'Chakra Petch'; font-size:15px;
    display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .school-select.has-val{ color:var(--ink); border-color:var(--cyan); }
  .school-select svg{ flex:0 0 auto; color:var(--muted); }

  /* modal buscador */
  .school-modal{ position:absolute; inset:0; z-index:9999; display:none;
    background:rgba(4,8,14,.8); backdrop-filter:blur(4px); }
  .school-modal.open{ display:block; }
  .school-sheet{ position:absolute; left:0; right:0; bottom:0; top:60px;
    background:var(--bg-0,#06101a); border-radius:20px 20px 0 0;
    border-top:1px solid rgba(34,227,255,.3); display:flex; flex-direction:column;
    box-shadow:0 -10px 40px rgba(0,0,0,.5); }
  .school-bar{ display:flex; align-items:center; gap:10px; padding:16px;
    border-bottom:1px solid rgba(255,255,255,.08); }
  .school-bar svg{ flex:0 0 auto; }
  .school-bar input{ flex:1; background:transparent; border:none; outline:none;
    color:var(--ink); font-family:'Chakra Petch'; font-size:16px; }
  .school-close{ background:transparent; border:none; color:var(--muted);
    font-size:18px; cursor:pointer; padding:4px 8px; }
  .school-results{ flex:1; overflow-y:auto; padding:8px 10px 30px; }
  .school-item{ padding:14px 14px; border-radius:12px; cursor:pointer;
    color:var(--ink); font-size:14px; line-height:1.3;
    border-bottom:1px solid rgba(255,255,255,.04); }
  .school-item:active,.school-item:hover{ background:rgba(34,227,255,.08); }
  .school-item .si-prov{ display:block; font-size:11px; color:var(--muted); margin-top:2px; }
  .school-add{ padding:14px; margin:8px 4px; border-radius:12px; cursor:pointer;
    border:1px dashed rgba(0,232,213,.5); color:var(--cyan); text-align:center;
    font-family:'Orbitron'; font-size:13px; letter-spacing:.5px; }
  .school-add:active{ background:rgba(0,232,213,.1); }
  .school-empty{ text-align:center; color:var(--muted); font-size:13px; padding:24px 16px; }

  /* botones OAuth */
  .oauth-divider{ display:flex; align-items:center; gap:10px; margin:18px 0 14px; }
  .oauth-divider::before,.oauth-divider::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.12); }
  .oauth-divider span{ font-size:11px; color:var(--muted); letter-spacing:.5px; }
  .oauth-row{ display:flex; gap:10px; }
  .oauth-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:13px; border-radius:14px; cursor:pointer; font-family:'Chakra Petch'; font-size:14px; font-weight:600;
    background:#fff; color:#1a1a1a; border:none; transition:transform .15s; }
  .oauth-btn:active{ transform:scale(.96); }

  /* galería de avatares */
  .p-avatar{ cursor:pointer; position:relative; }
  .p-avatar .av-edit{ position:absolute; bottom:-2px; right:-2px; width:26px; height:26px; border-radius:50%;
    background:var(--cyan); color:#04141a; display:grid; place-items:center; font-size:13px;
    border:2px solid var(--bg-0,#06101a); }
  .avatar-modal{ position:absolute; inset:0; z-index:9999; display:none;
    background:rgba(4,8,14,.85); backdrop-filter:blur(4px); }
  .avatar-modal.open{ display:grid; place-items:center; }
  .avatar-sheet{ width:88%; max-width:360px; background:var(--bg-0,#0a1820);
    border:1px solid rgba(34,227,255,.3); border-radius:20px; padding:22px; }
  .avatar-sheet h3{ font-family:'Orbitron'; font-size:15px; color:var(--cyan); text-align:center; margin-bottom:16px; }
  .avatar-head{ display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:16px; }
  .avatar-head h3{ margin:0; }
  .avatar-x{ position:absolute; right:0; top:50%; transform:translateY(-50%);
    width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:var(--muted); }
  .avatar-x:active{ transform:translateY(-50%) scale(.9); }
  .avatar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .av-opt{ aspect-ratio:1; border-radius:50%; display:grid; place-items:center; font-size:26px;
    cursor:pointer; background:rgba(255,255,255,.05); border:2px solid transparent; transition:all .2s; }
  .av-opt:active{ transform:scale(.92); }
  .av-opt.sel{ border-color:var(--cyan); background:rgba(34,227,255,.15); box-shadow:0 0 16px rgba(34,227,255,.4); }
  .avatar-close{ width:100%; margin-top:18px; padding:13px; border-radius:14px; cursor:pointer;
    background:rgba(34,227,255,.15); border:1px solid var(--cyan); color:var(--cyan);
    font-family:'Orbitron'; font-size:12px; letter-spacing:1px; }
  .l-err{ color:#ff6b81; font-size:13px; min-height:18px; text-align:center; margin:2px 0 8px;}
  .l-toggle{ text-align:center; margin-top:16px; font-size:13px; color:var(--muted);}
  .l-toggle b{ color:var(--cyan); cursor:pointer; }
  .l-demo{ text-align:center; margin-top:18px; font-size:11px; color:var(--muted); line-height:1.5;}
  .l-demo code{ color:var(--cyan-soft); background:rgba(34,227,255,.08); padding:1px 6px; border-radius:5px;}
  .back-link{ position:absolute; top:48px; left:18px; z-index:3; color:var(--cyan); cursor:pointer;
    width:40px;height:40px;border-radius:12px;background:rgba(10,25,35,.7);
    border:1px solid rgba(34,227,255,.3);display:grid;place-items:center;}
  .back-link svg{width:20px;height:20px;}

  /* locked-content banner on map */
  .paywall{
    position:absolute; left:0;right:0;bottom:92px; z-index:9; margin:0 16px;
    padding:12px 16px; border-radius:14px;
    background:linear-gradient(90deg, rgba(34,227,255,.12), rgba(55,245,160,.12));
    border:1px solid rgba(34,227,255,.35); backdrop-filter:blur(8px);
    display:flex; align-items:center; gap:10px; font-size:12px; color:var(--cyan-soft);
  }
  .paywall b{ color:#fff; }
  .paywall svg{ width:22px;height:22px;flex:0 0 22px;color:var(--cyan); }

  /* ============ LESSON VIEWER ============ */
  .viewer{
    position:absolute; inset:0; z-index:20;
    background:
      radial-gradient(900px 600px at 50% -5%, #0c2a3a 0%, transparent 60%),
      var(--bg-0);
    display:flex; flex-direction:column;
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.3,.8,.25,1);
    pointer-events:none;
  }
  .viewer.open{ transform:translateX(0); pointer-events:auto; }
  .viewer .circuit-bg{ opacity:.35; }

  .v-top{
    position:relative; z-index:3;
    display:flex; align-items:center; gap:12px;
    padding:48px 18px 10px;
  }
  .v-back{
    width:40px;height:40px;flex:0 0 40px;border-radius:12px;
    background:rgba(10,25,35,.7);border:1px solid rgba(34,227,255,.3);
    display:grid;place-items:center;color:var(--cyan);cursor:pointer;
  }
  .v-back svg{width:20px;height:20px;}
  .v-title{ font-family:'Orbitron'; font-size:12px; letter-spacing:2px; color:var(--cyan); text-transform:uppercase;}
  .v-sub{ font-size:11px; color:var(--muted); }

  .v-progress{
    position:relative; z-index:3; margin:8px 20px 0;
    height:8px; border-radius:6px; background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08); overflow:hidden;
  }
  .v-progress i{
    position:absolute; inset:0; width:10%;
    background:linear-gradient(90deg,var(--teal),var(--cyan));
    box-shadow:0 0 12px rgba(34,227,255,.7); border-radius:6px;
    transition:width .45s cubic-bezier(.3,.8,.25,1);
  }
  .v-count{ z-index:3; text-align:center; font-size:11px; color:var(--cyan-soft); margin-top:6px; letter-spacing:1px; font-weight:600;}

  .deck{ position:relative; z-index:3; flex:1; overflow:hidden; }
  .slide{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:center;
    padding:18px 26px 10px; text-align:center;
    opacity:0; transform:translateX(40px) scale(.97);
    transition:opacity .4s ease, transform .45s cubic-bezier(.3,.8,.25,1);
    pointer-events:none; overflow-y:auto;
  }
  .slide.active{ opacity:1; transform:translateX(0) scale(1); pointer-events:auto; }
  .slide.prev{ transform:translateX(-40px) scale(.97); }

  .slide .tag{
    font-family:'Orbitron'; font-size:10px; letter-spacing:4px; color:var(--muted);
    text-transform:uppercase; margin-bottom:10px;
  }
  .slide h2{
    font-family:'Orbitron'; font-weight:900; font-size:30px; line-height:1.1;
    color:var(--cyan-soft); text-shadow:0 0 22px rgba(34,227,255,.5);
    margin-bottom:18px; letter-spacing:.5px;
  }
  .slide .visual{
    width:128px;height:128px;margin:0 auto 22px;
    display:grid;place-items:center;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#0e2433,#061019);
    border:2px solid rgba(34,227,255,.4);
    box-shadow:0 0 30px rgba(34,227,255,.35), inset 0 0 18px rgba(34,227,255,.2);
  }
  .slide .visual svg{ width:74px;height:74px; }
  .slide .visual.big svg{ width:96px;height:96px; }
  .slide p{ font-size:16px; line-height:1.55; color:var(--ink); max-width:340px; margin:0 auto; }
  .slide p .hl{ color:var(--cyan-soft); font-weight:700; }
  .slide p .warn{ color:var(--green); font-weight:700; }

  .estados{ display:flex; gap:10px; justify-content:center; margin:6px auto 16px; flex-wrap:wrap; max-width:340px;}
  .estado{
    flex:1 1 90px; padding:12px 8px; border-radius:14px;
    background:rgba(13,32,44,.7); border:1px solid rgba(34,227,255,.25);
  }
  .estado .e-ic{ font-size:26px; }
  .estado .e-n{ font-family:'Orbitron'; font-size:11px; color:var(--cyan); margin-top:4px; letter-spacing:1px;}
  .estado .e-d{ font-size:11px; color:var(--muted); margin-top:3px; line-height:1.3;}

  /* Tabla periódica interactiva */
  .pt-wrap{ width:100%; max-width:520px; margin:4px auto 10px; }
  .pt-grid{ display:grid; grid-template-columns:repeat(18,1fr); gap:2px; }
  .pt-cell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    font-family:'Orbitron'; font-size:6.5px; font-weight:700; border-radius:3px;
    background:rgba(255,255,255,.05); color:#9fb0c0; border:1px solid transparent;
    transform:scale(.94); }
  .pt-empty{ aspect-ratio:1; }
  /* base de color por categoría (siempre visible, aunque no esté destacada) */
  .pt-cell.cat-m{  background:rgba(0,232,213,.12);  color:#7fe9e0; --glow:0,232,213; }
  .pt-cell.cat-nm{ background:rgba(55,245,160,.12); color:#9af0c5; --glow:55,245,160; }
  .pt-cell.cat-me{ background:rgba(255,207,107,.12);color:#f0d79b; --glow:255,207,107; }
  .pt-cell.cat-ng{ background:rgba(155,77,255,.14); color:#c79bff; --glow:155,77,255; }
  .pt-cell.cat-t{  background:rgba(232,131,10,.12); color:#e0b27a; --glow:232,131,10; }
  /* no destacados: se quedan visibles al 80%, sin transición (cambio instantáneo, no parpadea) */
  .pt-cell.pt-dim{ opacity:.8; }
  /* tabla completa estática: visible */
  .pt-cell.pt-static{ opacity:1; }
  /* destacados: se elevan, brillan y laten. Solo estas animan. */
  .pt-cell.pt-on{ opacity:1; z-index:2; color:#fff; transform-origin:center center;
    background:rgba(var(--glow),.28);
    border-color:rgba(var(--glow),.9);
    animation:ptBeat 1.8s ease-in-out infinite; }
  @keyframes ptBeat{
    0%,100%{ box-shadow:0 0 4px 0 rgba(var(--glow),.3), 0 3px 8px rgba(var(--glow),.22);
             transform:translateY(-2px) scale(1.06); }
    50%{ box-shadow:0 0 14px 2px rgba(var(--glow),.85), 0 5px 12px rgba(var(--glow),.38);
         transform:translateY(-4px) scale(1.12); }
  }
  .pt-label{ font-size:12.5px; line-height:1.5; color:var(--ink); min-height:54px;
    background:rgba(255,255,255,.04); border-radius:10px; padding:10px 12px; margin-bottom:10px; text-align:left;}
  .pt-legend{ display:flex; flex-wrap:wrap; gap:5px 11px; justify-content:center; margin:7px 0 8px; }
  .pt-lg{ display:inline-flex; align-items:center; gap:5px; font-size:10px; color:var(--muted); }
  .pt-lg i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
  .lg-m{ background:rgba(0,232,213,.55); }
  .lg-t{ background:rgba(232,131,10,.55); }
  .lg-nm{ background:rgba(55,245,160,.55); }
  .lg-me{ background:rgba(255,207,107,.55); }
  .lg-ng{ background:rgba(155,77,255,.6); }
  .pt-btn{ width:100%; padding:12px; border-radius:14px; cursor:pointer;
    border:1px solid rgba(0,232,213,.5); background:rgba(0,232,213,.1); color:var(--cyan);
    font-family:'Orbitron'; font-size:12px; letter-spacing:1px; }
  .pt-btn:active{ transform:scale(.97); background:rgba(0,232,213,.2); }
  @media(min-width:1000px){ .pt-wrap{ max-width:640px; } .pt-cell{ font-size:8px; } }

  .formula{
    display:inline-block; margin-top:14px; padding:10px 18px; border-radius:12px;
    background:rgba(34,227,255,.08); border:1px dashed rgba(34,227,255,.4);
    font-family:'Orbitron'; font-size:15px; color:var(--cyan-soft); letter-spacing:1px;
  }

  .dots-nav{ display:flex; gap:7px; justify-content:center; padding:6px 0 2px; z-index:3;}
  .dots-nav b{ width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);transition:.3s;}
  .dots-nav b.on{ background:var(--cyan); box-shadow:0 0 10px var(--cyan); width:20px; border-radius:4px;}

  .v-nav{ position:relative; z-index:3; display:flex; gap:12px; padding:10px 22px 34px; }
  /* Saber más: lamparita flotante esquina superior derecha del visor */
  .btn-more-float{
    position:absolute; top:14px; right:16px; z-index:80;
    width:42px; height:42px; border-radius:50%; cursor:pointer;
    border:1px solid rgba(155,77,255,.7);
    background:rgba(26,14,42,.92); color:#e9c6ff;
    font-size:18px; display:none; place-items:center;
    box-shadow:0 4px 16px rgba(155,77,255,.45);
    backdrop-filter:blur(6px);
    animation:moreGlow 2.2s ease-in-out infinite;
  }
  @keyframes moreGlow{
    0%,100%{ box-shadow:0 4px 14px rgba(155,77,255,.4), 0 0 6px rgba(212,166,255,.3); }
    50%{ box-shadow:0 4px 18px rgba(155,77,255,.6), 0 0 16px rgba(233,198,255,.7); }
  }
  .btn-more-float:active{ transform:scale(.92); }
  .btn{
    flex:1; padding:16px; border-radius:16px; border:none; cursor:pointer;
    font-family:'Orbitron'; font-weight:700; font-size:14px; letter-spacing:1px;
    transition:transform .15s, box-shadow .3s, opacity .3s;
  }
  .btn:active{ transform:scale(.96); }
  .btn-ghost{ flex:0 0 56px; background:rgba(10,25,35,.7); color:var(--cyan); border:1px solid rgba(34,227,255,.3);}
  .btn-primary{
    background:linear-gradient(90deg,var(--teal),var(--cyan)); color:#04141a;
    box-shadow:0 0 26px rgba(34,227,255,.55);
  }
  .btn-primary.done{ background:linear-gradient(90deg,#1fbf7a,var(--green)); box-shadow:0 0 26px rgba(55,245,160,.55);}

  /* completion overlay */
  .complete{
    position:absolute; inset:0; z-index:30; display:grid; place-items:center;
    background:rgba(4,7,13,.85); backdrop-filter:blur(6px);
    opacity:0; pointer-events:none; transition:opacity .4s;
  }
  .complete.show{ opacity:1; pointer-events:auto; }
  .complete .card{ text-align:center; padding:30px; transform:scale(.8); transition:transform .5s cubic-bezier(.34,1.5,.5,1);}
  .complete.show .card{ transform:scale(1); }
  .complete .ring2{ width:120px;height:120px;margin:0 auto 18px;border-radius:50%;
    border:3px solid var(--green); display:grid;place-items:center;
    box-shadow:0 0 40px rgba(55,245,160,.6); color:var(--green);}
  .complete .ring2 svg{width:60px;height:60px;}
  .complete h3{ font-family:'Orbitron'; font-size:22px; color:var(--green); text-shadow:0 0 20px rgba(55,245,160,.5);}
  .complete p{ color:var(--muted); margin:8px 0 22px; font-size:14px;}

  /* ============ ARENA DE PRÁCTICA ============ */
  .arena{
    position:absolute; inset:0; z-index:50;
    background:radial-gradient(900px 600px at 50% -5%, #2a0d3a 0%, transparent 60%), var(--bg-0);
    display:flex; flex-direction:column;
    transform:translateX(100%); transition:transform .45s cubic-bezier(.3,.8,.25,1);
    pointer-events:none;
  }
  .arena.open{ transform:translateX(0); pointer-events:auto; }
  .a-top{ display:flex; align-items:center; gap:12px; padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 6px; z-index:3;}
  .a-back{ width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:rgba(25,10,35,.7);
    border:1px solid rgba(180,80,255,.35);display:grid;place-items:center;color:#c98bff;cursor:pointer;}
  .a-back svg{width:20px;height:20px;}
  .a-title{ font-family:'Orbitron'; font-size:12px; letter-spacing:2px; color:#c98bff; text-transform:uppercase;}
  .a-prog{ position:relative; margin:6px 20px 0; height:8px; border-radius:6px; background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08); overflow:hidden; z-index:3;}
  .a-prog i{ position:absolute; inset:0; width:0;
    background:linear-gradient(90deg,#9b4dff,#22e3ff); box-shadow:0 0 12px rgba(155,77,255,.6);
    border-radius:6px; transition:width .4s; }
  .a-meta{ display:flex; justify-content:space-between; padding:8px 22px 0; font-size:11px; z-index:3;}
  .a-meta .q{ color:#c98bff; font-weight:600; letter-spacing:1px;}
  .a-meta .score{ color:var(--cyan-soft); font-weight:600;}
  .a-meta .score b{ color:#fff; }

  .a-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:6px 20px; z-index:3; overflow-y:auto; }
  .a-eq{ font-family:'Orbitron'; font-size:11px; color:rgba(180,140,255,.5); text-align:center; letter-spacing:2px; margin-bottom:18px;}
  .qcard{
    background:rgba(20,10,32,.7); border:1px solid rgba(155,77,255,.35); border-radius:22px;
    padding:18px 18px; text-align:center; box-shadow:0 0 40px rgba(155,77,255,.2), inset 0 0 24px rgba(155,77,255,.08);
    margin-bottom:14px; min-height:84px; display:grid; place-items:center;
  }
  .qcard h2{ font-family:'Orbitron'; font-weight:700; font-size:20px; line-height:1.3; color:#fff; text-shadow:0 0 18px rgba(155,77,255,.4);}
  .opts{ display:grid; gap:12px; }
  .opt{
    padding:14px 16px; border-radius:16px; cursor:pointer; text-align:left;
    background:rgba(15,22,30,.8); border:2px solid rgba(255,255,255,.1); color:var(--ink);
    font-family:'Chakra Petch'; font-size:15px; font-weight:600;
    display:flex; align-items:center; gap:12px;
    transition:transform .12s, border-color .25s, background .25s, box-shadow .25s;
  }
  .opt .k{ width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center;
    background:rgba(155,77,255,.18); color:#c98bff; font-family:'Orbitron'; font-size:13px;}
  .opt:active{ transform:scale(.98); }
  .opt.correct{ border-color:var(--green); background:rgba(55,245,160,.14); box-shadow:0 0 22px rgba(55,245,160,.4); color:#fff;}
  .opt.correct .k{ background:var(--green); color:#04141a;}
  .opt.wrong{ border-color:#ff5d73; background:rgba(255,93,115,.14); box-shadow:0 0 22px rgba(255,93,115,.35); color:#fff;}
  .opt.wrong .k{ background:#ff5d73; color:#fff;}
  .opt.disabled{ pointer-events:none; opacity:.85; }
  .opt.dim{ opacity:.4; }

  .a-feedback{ text-align:center; min-height:24px; padding:0 24px; z-index:3;}
  .a-feedback .fb{ display:inline-block; font-size:13.5px; font-weight:600; opacity:0; transform:translateY(8px); transition:.3s;}
  .a-feedback .fb.show{ opacity:1; transform:translateY(0); }
  .fb-ref{ display:block; margin-top:9px; font-size:12px; font-weight:500; line-height:1.45;
    color:var(--cyan-soft); background:rgba(34,227,255,.08); border:1px solid rgba(34,227,255,.18);
    border-radius:10px; padding:8px 11px; }
  .fb-ref b{ color:var(--ink); }
  .fb-ref i{ color:var(--muted); font-style:italic; }
  .fb-ref .ref-ic{ margin-right:4px; }
  .a-feedback .ok{ color:var(--green); } .a-feedback .no{ color:#ff8b9c; }
  .a-feedback .partial{ color:var(--gold); }
  .a-next{ padding:8px 24px calc(env(safe-area-inset-bottom,0px) + 16px); z-index:3;}
  .a-next .btn{ width:100%; opacity:0; pointer-events:none; transition:opacity .3s;}
  .a-next .btn.show{ opacity:1; pointer-events:auto;}

  .a-actions{ padding:0 24px; z-index:3; }
  .btn-more{
    width:100%; padding:13px; border-radius:14px; cursor:pointer; border:1px dashed rgba(155,77,255,.5);
    background:rgba(155,77,255,.1); color:#d4a6ff; font-family:'Orbitron'; font-size:12px; letter-spacing:1px;
    transition:background .2s; margin-bottom:10px;
  }
  .btn-more.show{ opacity:1; }
  .btn-more:active{ background:rgba(155,77,255,.2); }

  /* panel Saber más (bottom sheet) */
  .more-panel{ position:absolute; inset:0; z-index:70; pointer-events:none; visibility:hidden; }
  .resume-modal{ position:absolute; inset:0; z-index:90; display:none; place-items:center;
    background:rgba(4,6,12,.82); backdrop-filter:blur(4px); padding:30px; }
  .resume-modal.open{ display:grid; }
  .resume-card{ background:var(--surface,#0A1F1F); border:1px solid rgba(34,227,255,.25);
    border-radius:20px; padding:30px 26px; max-width:340px; text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.6); }
  .resume-ic{ font-size:42px; margin-bottom:12px; }
  .resume-card h3{ font-family:'Orbitron'; font-size:18px; color:var(--cyan); margin-bottom:10px; }
  .resume-card p{ font-size:14px; color:var(--ink); line-height:1.5; margin-bottom:22px; }
  .more-panel.open{ pointer-events:auto; visibility:visible; }
  .more-scrim{ position:absolute; inset:0; background:rgba(4,4,12,.6); opacity:0; transition:.35s; pointer-events:none; }
  .more-panel.open .more-scrim{ opacity:1; pointer-events:auto; }
  .more-sheet{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    max-height:82%; overflow-y:auto;
    background:linear-gradient(180deg,#1a0e2a,#0c0716);
    border-top:1px solid rgba(155,77,255,.4); border-radius:26px 26px 0 0;
    padding:10px 24px 30px;
    transform:translateY(100%); transition:transform .4s cubic-bezier(.3,.8,.25,1);
    box-shadow:0 -10px 40px rgba(155,77,255,.25);
  }
  .more-panel.open .more-sheet{ transform:translateY(0); }
  .more-handle{ width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:6px auto 16px;cursor:pointer;}
  .more-body h3{ font-family:'Orbitron'; font-size:17px; color:#d4a6ff; margin-bottom:12px; text-shadow:0 0 16px rgba(155,77,255,.4);}
  .more-body p{ font-size:15px; line-height:1.6; color:var(--ink); margin-bottom:16px; text-align:left;}
  .more-body .vid{ position:relative; width:100%; padding-bottom:56.25%; border-radius:14px; overflow:hidden; margin-bottom:16px; border:1px solid rgba(155,77,255,.3);}
  .more-body .vid iframe{ position:absolute; inset:0; width:100%; height:100%; }
  .more-body .reading{ font-size:13px; color:var(--cyan-soft); background:rgba(34,227,255,.08);
    border-left:3px solid var(--cyan); padding:10px 14px; border-radius:8px; margin-bottom:16px; text-align:left;}
  .more-body .ex-box{ background:rgba(232,131,10,.08); border:1px solid rgba(232,131,10,.3);
    border-radius:12px; padding:14px 16px; margin-bottom:16px; text-align:left;}
  .more-body .ex-head{ font-family:'Orbitron'; font-size:12px; letter-spacing:1px; color:#E8830A; margin-bottom:10px;}
  .more-body .ex-prob{ font-size:14px; color:var(--ink); background:rgba(255,255,255,.04);
    padding:10px 12px; border-radius:8px; margin-bottom:12px; line-height:1.5;}
  .more-body .ex-steps{ margin:0 0 12px 0; padding-left:20px; }
  .more-body .ex-steps li{ font-size:13.5px; color:var(--ink); line-height:1.55; margin-bottom:8px; }
  .more-body .ex-ans{ font-size:14px; color:var(--green); background:rgba(55,245,160,.08);
    border-radius:8px; padding:10px 12px; line-height:1.5;}
  .btn-tutor{ width:100%; padding:15px; border:none; border-radius:14px; cursor:pointer;
    background:linear-gradient(90deg,#9b4dff,#22e3ff); color:#fff; font-family:'Orbitron'; font-size:13px; letter-spacing:1px;
    box-shadow:0 0 24px rgba(155,77,255,.5);}
  .btn-tutor:active{ transform:scale(.97); }

  /* arena results */
  .a-result{ position:absolute; inset:0; z-index:60; display:grid; place-items:center;
    background:rgba(6,4,13,.9); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:.4s;}
  .a-result.show{ opacity:1; pointer-events:auto;}
  .a-result .card{ text-align:center; padding:30px; transform:scale(.8); transition:transform .5s cubic-bezier(.34,1.5,.5,1);}
  .a-result.show .card{ transform:scale(1);}
  .a-result .big{ font-family:'Orbitron'; font-weight:900; font-size:46px; line-height:1;
    background:linear-gradient(90deg,#9b4dff,#22e3ff,#37f5a0); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .a-result h3{ font-family:'Orbitron'; font-size:20px; margin-top:8px; color:#fff;}
  .a-result p{ color:var(--muted); margin:10px 0 22px; font-size:14px;}
  .a-result .stars{ font-size:30px; letter-spacing:6px; margin:10px 0;}

  /* timer arena */
  .a-diff{ font-family:'Orbitron'; font-size:9px; letter-spacing:1px; padding:2px 7px; border-radius:10px; margin-left:6px; vertical-align:middle;}
  .a-diff.facil{ background:rgba(55,245,160,.15); color:#37f5a0; border:1px solid rgba(55,245,160,.4);}
  .a-diff.media{ background:rgba(255,207,107,.15); color:#ffcf6b; border:1px solid rgba(255,207,107,.4);}
  .a-diff.dificil{ background:rgba(255,107,129,.15); color:#ff6b81; border:1px solid rgba(255,107,129,.4);}
  .a-timer{ font-family:'Orbitron'; font-size:13px; font-weight:700; color:var(--cyan);
    border:1px solid rgba(34,227,255,.4); padding:4px 10px; border-radius:20px; min-width:48px; text-align:center;
    background:rgba(10,25,35,.6);}
  .a-timer.warn{ color:#ffcf6b; border-color:rgba(255,207,107,.5);}
  .a-timer.danger{ color:#ff6b81; border-color:rgba(255,107,129,.6); animation:tpulse .6s ease-in-out infinite;}
  @keyframes tpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

  /* TUTOR IA */
  .tutor{ position:absolute; inset:0; z-index:55; display:flex; flex-direction:column;
    background:radial-gradient(800px 600px at 50% 0%, #0d2a3c 0%, transparent 55%), var(--bg-0);
    transform:translateX(100%); transition:transform .4s cubic-bezier(.3,.8,.25,1); pointer-events:none;}
  .tutor.open{ transform:translateX(0); pointer-events:auto; }
  .t-top{ display:flex; align-items:center; gap:12px; padding:46px 16px 12px; z-index:3;
    border-bottom:1px solid rgba(34,227,255,.15); background:rgba(6,12,18,.6); backdrop-filter:blur(8px);}
  .t-back{ width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:rgba(10,25,35,.7);
    border:1px solid rgba(34,227,255,.3);display:grid;place-items:center;color:var(--cyan);cursor:pointer;}
  .t-back svg{width:19px;height:19px;}
  .t-id{ flex:1; display:flex; align-items:center; gap:10px;}
  .t-avatar{ width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 35% 30%,#10314a,#04101a); border:1.5px solid rgba(34,227,255,.5);}
  .t-avatar svg{width:26px;height:26px;}
  .t-name{ font-family:'Orbitron'; font-size:14px; color:var(--cyan-soft); font-weight:700;}
  .t-status{ font-size:11px; color:var(--green); }
  .t-quota{ font-size:11px; color:var(--muted); border:1px solid rgba(34,227,255,.25);
    padding:4px 9px; border-radius:20px; font-family:'Orbitron'; letter-spacing:.5px;}
  .t-quota.low{ color:#ffcf6b; border-color:rgba(255,207,107,.4); }
  .t-quota.zero{ color:#ff6b81; border-color:rgba(255,107,129,.4); }
  .t-chat{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; z-index:3;}
  .msg{ max-width:82%; padding:12px 15px; border-radius:18px; font-size:14px; line-height:1.5; }
  .msg.bot{ align-self:flex-start; background:rgba(15,32,44,.9); border:1px solid rgba(34,227,255,.25);
    border-bottom-left-radius:5px; color:var(--ink);}
  .msg.me{ align-self:flex-end; background:linear-gradient(135deg,#155e6b,#1b8a9c);
    border-bottom-right-radius:5px; color:#eafdff;}
  .msg .src{ display:block; margin-top:6px; font-size:10px; color:var(--muted); letter-spacing:.5px;}
  .msg.bot .src.ai{ color:#c98bff; }
  .typing{ align-self:flex-start; display:flex; gap:4px; padding:14px 16px; background:rgba(15,32,44,.9);
    border:1px solid rgba(34,227,255,.25); border-radius:18px; border-bottom-left-radius:5px;}
  .typing b{ width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:tdot 1s infinite;}
  .typing b:nth-child(2){animation-delay:.2s} .typing b:nth-child(3){animation-delay:.4s}
  @keyframes tdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
  .t-chips{ display:flex; gap:8px; overflow-x:auto; padding:8px 16px; z-index:3; }
  .t-chips::-webkit-scrollbar{display:none;} .t-chips{scrollbar-width:none;}
  .chip{ flex:0 0 auto; padding:9px 14px; border-radius:20px; font-size:12px; cursor:pointer;
    background:rgba(34,227,255,.1); border:1px solid rgba(34,227,255,.3); color:var(--cyan-soft); white-space:nowrap;}
  .chip:active{ background:rgba(34,227,255,.2); }
  .t-inputbar{ display:flex; gap:10px; padding:10px 16px 28px; z-index:3; align-items:center;
    background:linear-gradient(0deg,var(--bg-0) 70%, transparent);}
  .t-inputbar input{ flex:1; padding:14px 16px; border-radius:22px; background:rgba(10,25,35,.85);
    border:1px solid rgba(34,227,255,.3); color:var(--ink); font-family:'Chakra Petch'; font-size:14px; outline:none;}
  .t-inputbar input:focus{ border-color:var(--cyan); box-shadow:0 0 14px rgba(34,227,255,.3);}
  .t-send{ width:48px;height:48px;flex:0 0 48px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--teal),var(--cyan)); color:#04141a; display:grid;place-items:center;
    box-shadow:0 0 18px rgba(34,227,255,.5);}
  .t-send:active{ transform:scale(.92); } .t-send svg{width:20px;height:20px;}

  /* PERFIL */
  .profile{ position:absolute; inset:0; z-index:55; display:flex; flex-direction:column;
    background:radial-gradient(800px 600px at 50% 0%, #0d2a3c 0%, transparent 55%), var(--bg-0);
    transform:translateX(100%); transition:transform .4s cubic-bezier(.3,.8,.25,1); pointer-events:none;}
  .profile.open{ transform:translateX(0); pointer-events:auto; }
  .p-top{ display:flex; align-items:center; gap:12px; padding:46px 16px 12px; z-index:3;}
  .p-body{ flex:1; overflow-y:auto; display:flex; flex-direction:column; align-items:center; padding:20px 30px; z-index:3;}
  .p-avatar{ width:90px;height:90px;border-radius:50%;display:grid;place-items:center;
    font-family:'Orbitron';font-weight:900;font-size:38px;color:#04141a;
    background:linear-gradient(135deg,var(--teal),var(--cyan)); box-shadow:0 0 30px rgba(34,227,255,.5); margin-bottom:16px;}
  .p-email{ font-size:15px; color:var(--ink); font-weight:600;}
  .p-plan{ font-family:'Orbitron'; font-size:11px; letter-spacing:1px; color:var(--cyan); margin-top:5px;
    padding:4px 12px; border:1px solid rgba(34,227,255,.3); border-radius:20px;}
  .p-plan.premium{ color:var(--green); border-color:rgba(55,245,160,.4);
    background:rgba(55,245,160,.08); text-shadow:0 0 10px rgba(55,245,160,.4);}
  .p-stats{ display:flex; gap:14px; margin-top:30px; width:100%; }
  .p-name-row,.p-school-row{ display:flex; align-items:center; gap:8px; justify-content:center; }
  .p-name{ font-family:'Orbitron'; font-size:18px; font-weight:700; color:var(--ink); }
  .p-school{ font-size:12px; color:var(--muted); }
  .p-edit-btn{ width:24px; height:24px; border-radius:50%; cursor:pointer; flex:0 0 auto;
    background:rgba(255,255,255,.06); border:1px solid rgba(34,227,255,.25); color:var(--cyan-soft); font-size:11px; }
  .p-edit-btn:active{ transform:scale(.9); }
  .p-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }

  /* menú de foto de perfil (bottom sheet) */
  .photo-menu{ position:absolute; inset:0; z-index:9999; display:none;
    background:rgba(4,8,14,.78); backdrop-filter:blur(4px); }
  .photo-menu.open{ display:block; }
  .photo-menu-sheet{ position:absolute; left:0; right:0; bottom:0;
    background:var(--bg-0,#0a1820); border-radius:22px 22px 0 0; padding:10px 16px 22px;
    border-top:1px solid rgba(34,227,255,.25); box-shadow:0 -10px 40px rgba(0,0,0,.5);
    animation:pmUp .25s ease; }
  @keyframes pmUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
  .pm-grab{ width:40px; height:4px; border-radius:2px; background:rgba(255,255,255,.2); margin:6px auto 16px; }
  .pm-opt{ display:flex; align-items:center; gap:14px; padding:13px 10px; border-radius:14px; cursor:pointer;
    transition:background .15s; }
  .pm-opt:active{ background:rgba(34,227,255,.08); }
  .pm-ic{ width:42px; height:42px; flex:0 0 42px; border-radius:12px; display:grid; place-items:center;
    background:rgba(34,227,255,.1); border:1px solid rgba(34,227,255,.25); color:var(--cyan); }
  .pm-ic svg{ width:22px; height:22px; }
  .pm-txt b{ display:block; font-size:14px; color:var(--ink); font-weight:600; }
  .pm-txt span{ font-size:11.5px; color:var(--muted); }
  .pm-cancel{ width:100%; margin-top:12px; padding:14px; border-radius:14px; cursor:pointer;
    background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--muted);
    font-family:'Chakra Petch'; font-size:14px; }
  .pm-cancel:active{ background:rgba(255,255,255,.05); }
  .p-stat{ flex:1; padding:18px 10px; border-radius:16px; text-align:center;
    background:rgba(13,32,44,.7); border:1px solid rgba(34,227,255,.2);}
  .p-num{ font-family:'Orbitron'; font-weight:900; font-size:24px; color:var(--cyan-soft);}
  .p-lbl{ font-size:11px; color:var(--muted); margin-top:4px; letter-spacing:.5px;}
  .btn-ghost-full{ width:100%; padding:15px; border-radius:14px; cursor:pointer;
    background:transparent; border:1px solid rgba(255,107,129,.4); color:#ff8b9c;
    font-family:'Orbitron'; font-size:12px; letter-spacing:1px;}
  .btn-ghost-full:active{ background:rgba(255,107,129,.1); }

  /* ===== LEADERBOARD ===== */
  .rank-screen{ position:absolute; inset:0; z-index:6; display:none; flex-direction:column;
    background:radial-gradient(800px 500px at 50% 0%,#0d2a1a 0%,transparent 60%), var(--bg-0);
    overflow-y:auto; padding-bottom:80px; }
  .rank-screen.open{ display:flex; }
  .rank-header{ padding:46px 20px 10px; }
  .rank-titlebar{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .rank-titlebar .t-back{ width:38px; height:38px; flex:0 0 38px; border-radius:50%;
    display:grid; place-items:center; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,174,84,.3); color:#ffae54; cursor:pointer; }
  .rank-titlebar .t-back svg{ width:20px; height:20px; }
  .rank-titlebar .t-back:active{ transform:scale(.92); }
  .rank-title{ font-family:'Orbitron'; font-size:18px; font-weight:900; letter-spacing:2px;
    color:#ffae54; display:flex; align-items:center; gap:10px; text-shadow:0 0 20px rgba(232,131,10,.5); }
  .rank-filters{ display:flex; gap:8px; flex-wrap:wrap; }
  .rk-f{ padding:6px 14px; border-radius:20px; font-size:11.5px; font-family:'Orbitron';
    letter-spacing:.5px; cursor:pointer; border:1px solid rgba(255,174,84,.3);
    background:transparent; color:var(--muted); transition:all .2s; }
  .rk-f.on{ background:rgba(232,131,10,.2); border-color:#ffae54; color:#ffae54; }

  /* podio */
  .rank-podium{ display:flex; align-items:flex-end; justify-content:center;
    gap:10px; padding:20px 16px 10px; }
  .podium-place{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; max-width:110px; }
  .podium-place .pos-crown{ font-size:24px; }
  .podium-place .pos-avatar{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
    font-family:'Orbitron'; font-weight:900; font-size:20px; color:#04141a;
    box-shadow:0 0 20px rgba(255,174,84,.4); }
  .podium-place.p1 .pos-avatar{ background:linear-gradient(135deg,#ffd700,#ffae54); width:68px; height:68px; font-size:24px; }
  .podium-place.p2 .pos-avatar{ background:linear-gradient(135deg,#b0bec5,#78909c); }
  .podium-place.p3 .pos-avatar{ background:linear-gradient(135deg,#a1714a,#8d5524); }
  .podium-place .pos-name{ font-size:11px; color:var(--ink); text-align:center; max-width:100px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .podium-place .pos-score{ font-family:'Orbitron'; font-size:12px; color:#ffae54; font-weight:700; }
  .podium-base{ height:8px; border-radius:4px 4px 0 0; width:100%; }
  .podium-place.p1 .podium-base{ background:#ffd700; height:24px; }
  .podium-place.p2 .podium-base{ background:#78909c; height:16px; }
  .podium-place.p3 .podium-base{ background:#8d5524; height:10px; }

  /* lista */
  .rank-list{ padding:0 16px; }
  .rank-row{ display:flex; align-items:center; gap:12px; padding:12px 14px;
    border-radius:14px; margin-bottom:8px; background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06); }
  .rank-row .rr-pos{ font-family:'Orbitron'; font-size:13px; color:var(--muted);
    width:24px; text-align:center; flex:0 0 24px; }
  .rank-row .rr-avatar{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
    font-family:'Orbitron'; font-weight:900; font-size:14px; color:#04141a;
    background:linear-gradient(135deg,var(--teal),var(--cyan)); flex:0 0 36px; }
  .rank-row .rr-info{ flex:1; min-width:0; }
  .rank-row .rr-name{ font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rank-row .rr-sub{ font-size:11px; color:var(--muted); }
  .rank-row .rr-score{ font-family:'Orbitron'; font-size:14px; color:#ffae54; font-weight:700; flex:0 0 auto; }
  .rank-row.is-me{ border-color:rgba(0,232,213,.4); background:rgba(0,232,213,.06); }
  .rank-row.is-me .rr-pos,.rank-row.is-me .rr-score{ color:var(--cyan); }

  /* mi posición fija abajo */
  .rank-me{ padding:10px 16px 6px; }
  .rank-me .rank-row{ border-color:rgba(0,232,213,.5); background:rgba(0,232,213,.08); }

  /* estado vacío/carga */
  .rank-status{ display:none; flex-direction:column; align-items:center; gap:14px;
    padding:40px 20px; color:var(--muted); font-size:14px; }
  .rank-status.show{ display:flex; }
  .rank-spinner{ width:36px; height:36px; border-radius:50%;
    border:3px solid rgba(255,174,84,.15); border-top-color:#ffae54;
    animation:spin 1s linear infinite; }

  /* ============================================================
     VERSIÓN ESCRITORIO (pantallas anchas)
     ============================================================ */
  @media(min-width:1000px){
    body.desktop #stage{ padding:0; }
    body.desktop .app{
      max-width:1100px; width:94vw; height:92vh; max-height:920px;
      border-radius:24px;
    }

    /* BIENVENIDA / LOGIN: en mobile son pensados a lo ancho de un celular;
       en escritorio los centramos en una columna angosta en vez de estirarlos
       a los ~1000px de la tarjeta. */
    body.desktop .w-foot, body.desktop .cta, body.desktop .field,
    body.desktop .oauth-row, body.desktop .oauth-divider,
    body.desktop .l-toggle, body.desktop .l-demo{
      max-width:400px; margin-left:auto; margin-right:auto;
    }
    body.desktop .w-hero{ max-width:460px; margin:0 auto; }

    /* VISOR: los paddings grandes de arriba/abajo son para despejar el
       notch/home-indicator del celular; en escritorio no hacen falta y
       le quitan alto útil al deck (que es lo que se corta). */
    body.desktop .v-top{ padding-top:26px; }
    body.desktop .v-nav{ padding-bottom:18px; }
    body.desktop .estados{ max-width:480px; }
    /* Header arriba, ocupa todo el ancho */
    body.desktop header{ padding:30px 40px 6px; }
    body.desktop header h1{ font-size:30px; }

    /* MAPA HORIZONTAL: el scroll pasa a desplazamiento lateral */
    body.desktop .scroll{
      padding-top:130px; padding-bottom:90px;
      overflow-x:auto; overflow-y:hidden;
    }
    body.desktop .path-wrap{ height:100%; }
    body.desktop .nodes{
      display:flex; flex-direction:row; align-items:center;
      height:100%; padding:0 60px; gap:40px; min-width:max-content;
    }
    body.desktop .node{
      flex-direction:column !important; text-align:center;
      width:200px; flex:0 0 200px; padding:0;
      gap:14px;
    }
    body.desktop .node.left, body.desktop .node.right{ flex-direction:column; }
    /* alterna arriba/abajo para dar el zig-zag del camino */
    body.desktop .node.right{ margin-top:140px; }
    body.desktop .node.left{ margin-bottom:140px; }
    body.desktop .node .info{ text-align:center; }
    body.desktop .node.right .bar{ margin:0 auto; }
    body.desktop .bar{ margin:0 auto; }
    body.desktop .eje{ margin-top:14px; }

    /* ocultar la barra de pestañas inferior flotante y mostrarla integrada */
    body.desktop .tabbar{ max-width:1100px; left:50%; transform:translateX(-50%); }

    /* VISOR: tarjeta más ancha y centrada */
    body.desktop .slide p{ max-width:560px; font-size:17px; }
    body.desktop .slide h2{ font-size:34px; }
    body.desktop .deck{ max-width:720px; margin:0 auto; width:100%; }
    body.desktop .v-progress,
    body.desktop .v-count,
    body.desktop .dots-nav,
    body.desktop .v-nav{ max-width:720px; margin-left:auto; margin-right:auto; }

    /* ARENA dos columnas: pregunta izquierda, opciones derecha */
    body.desktop .a-body{
      flex-direction:row; align-items:center; gap:40px;
      max-width:980px; margin:0 auto; width:100%;
    }
    body.desktop .a-eq{ display:none; }
    body.desktop .qcard{ flex:1; min-height:280px; margin-bottom:0; }
    body.desktop .qcard h2{ font-size:26px; }
    body.desktop .opts{ flex:1; align-content:center; }
    body.desktop .a-meta,
    body.desktop .a-prog,
    body.desktop .a-feedback,
    body.desktop .a-next{ max-width:980px; margin-left:auto; margin-right:auto; }

    /* tutor y perfil: contenido centrado, no estirado */
    body.desktop .t-chat,
    body.desktop .t-chips,
    body.desktop .t-inputbar{ max-width:760px; margin-left:auto; margin-right:auto; width:100%; }
    body.desktop .p-body{ max-width:520px; margin:0 auto; width:100%; }
    body.desktop .p-top{ padding-top:26px; }

    /* lamparita Saber más un poco más adentro */
    body.desktop .btn-more-float{ top:96px; right:40px; }
  }

  /* ===== Logros / Badges ===== */
  .p-badges{ width:100%; margin-top:22px; }
  .pb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .pb-title{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:13px;
    letter-spacing:1.5px; text-transform:uppercase; color:var(--cyan-soft); }
  .pb-count{ font-size:13px; font-weight:600; color:var(--muted);
    background:rgba(34,227,255,.08); border:1px solid rgba(34,227,255,.2);
    padding:3px 10px; border-radius:20px; }
  .pb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .pb-item{ display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:14px 6px 11px; border-radius:16px; cursor:pointer;
    border:1px solid rgba(34,227,255,.12); background:rgba(10,19,32,.6);
    transition:transform .15s ease, box-shadow .2s ease; }
  .pb-item:active{ transform:scale(.95); }
  .pb-item.on{ border-color:rgba(255,210,74,.55);
    background:linear-gradient(160deg, rgba(255,210,74,.12), rgba(10,19,32,.6));
    box-shadow:0 0 18px rgba(255,210,74,.18), inset 0 0 12px rgba(255,210,74,.06); }
  .pb-item.off{ opacity:.5; filter:grayscale(.4); }
  .pb-ic{ font-size:30px; line-height:1; }
  .pb-item.on .pb-ic{ filter:drop-shadow(0 0 8px rgba(255,210,74,.55)); }
  .pb-name{ font-size:10.5px; font-weight:600; text-align:center; line-height:1.2;
    color:var(--ink); }
  .pb-item.off .pb-name{ color:var(--muted); }

  /* Notificación de logro desbloqueado */
  .badge-toast{ position:fixed; top:calc(18px + env(safe-area-inset-top,0px));
    left:50%; transform:translate(-50%,-140%); z-index:2147483600;
    display:flex; align-items:center; gap:12px; max-width:90%;
    padding:12px 18px 12px 14px; border-radius:16px;
    background:linear-gradient(135deg, rgba(20,30,12,.97), rgba(8,20,30,.97));
    border:1px solid rgba(255,210,74,.6);
    box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 24px rgba(255,210,74,.25);
    opacity:0; transition:transform .45s cubic-bezier(.2,.9,.3,1.2), opacity .35s; }
  .badge-toast.show{ transform:translate(-50%,0); opacity:1; }
  .badge-toast .bt-ic{ font-size:34px; line-height:1;
    filter:drop-shadow(0 0 10px rgba(255,210,74,.7)); animation:btpop .5s ease; }
  @keyframes btpop{ 0%{transform:scale(0) rotate(-30deg)} 70%{transform:scale(1.25)} 100%{transform:scale(1)} }
  .badge-toast .bt-txt{ display:flex; flex-direction:column; }
  .badge-toast .bt-txt b{ font-family:'Orbitron',sans-serif; font-size:11px;
    letter-spacing:1px; text-transform:uppercase; color:var(--gold); }
  .badge-toast .bt-txt span{ font-size:15px; font-weight:700; color:var(--ink); }

  /* Mini-modal de detalle de badge */
  .badge-info{ position:fixed; inset:0; z-index:2147483500; display:grid;
    place-items:center; opacity:0; transition:opacity .25s; }
  .badge-info.show{ opacity:1; }
  .badge-info .bi-scrim{ position:absolute; inset:0; background:rgba(2,6,12,.72);
    backdrop-filter:blur(3px); }
  .badge-info .bi-card{ position:relative; width:min(300px,84vw);
    background:linear-gradient(160deg,#0c1828,#081320); border-radius:22px;
    border:1px solid rgba(34,227,255,.25); padding:28px 22px 24px;
    text-align:center; transform:scale(.9); transition:transform .25s; cursor:pointer;
    box-shadow:0 20px 60px rgba(0,0,0,.6); }
  .badge-info.show .bi-card{ transform:scale(1); }
  .badge-info .bi-ic{ font-size:58px; line-height:1; margin-bottom:12px; }
  .badge-info .bi-ic.on{ filter:drop-shadow(0 0 14px rgba(255,210,74,.6)); }
  .badge-info .bi-ic.off{ opacity:.6; }
  .badge-info h3{ font-family:'Orbitron',sans-serif; font-size:17px; color:var(--ink);
    margin-bottom:8px; }
  .badge-info p{ font-size:13.5px; color:var(--muted); line-height:1.4; margin-bottom:16px; }
  .badge-info .bi-state{ display:inline-block; font-size:12px; font-weight:700;
    padding:6px 16px; border-radius:20px; }
  .badge-info .bi-state.on{ color:#04070d; background:linear-gradient(135deg,var(--gold),#ffb43c); }
  .badge-info .bi-state.off{ color:var(--muted); background:rgba(124,147,163,.14);
    border:1px solid rgba(124,147,163,.25); }

  /* ===== Tipos de pregunta interactivos ===== */
  /* Botón COMPROBAR (comparte contenedor .a-next con SIGUIENTE) */
  .btn-check{ background:linear-gradient(135deg,#22e3ff,#15c9b8); color:#04070d; font-weight:700; }
  .a-next .btn-check.show{ opacity:1; pointer-events:auto; }
  .a-next .btn-check.show:not(.ready){ opacity:.4; pointer-events:none; }

  /* ---- Emparejamiento ---- */
  .m-cols{ display:flex; gap:12px; }
  .m-col{ flex:1; display:flex; flex-direction:column; gap:9px; }
  .m-item{ display:flex; align-items:center; gap:8px; padding:12px 11px; border-radius:13px;
    border:1px solid rgba(34,227,255,.16); background:rgba(10,19,32,.6); cursor:pointer;
    font-size:13px; line-height:1.25; min-height:48px; transition:border-color .15s, background .15s, transform .1s; }
  .m-item:active{ transform:scale(.98); }
  .m-right{ flex-direction:row; }
  .m-txt{ flex:1; }
  .m-badge{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:grid; place-items:center;
    font-size:12px; font-weight:700; color:#04070d; background:transparent; }
  .m-item.sel{ border-color:var(--cyan); background:rgba(34,227,255,.14); box-shadow:0 0 16px rgba(34,227,255,.3); }
  .m-item.linked{ border-color:var(--teal); }
  .m-item.linked .m-badge{ background:var(--cyan); }
  .m-item.ok{ border-color:var(--green); background:rgba(55,245,160,.14); }
  .m-item.ok .m-badge{ background:var(--green); }
  .m-item.bad{ border-color:#ff5d73; background:rgba(255,93,115,.14); }
  .m-item.bad .m-badge{ background:#ff5d73; color:#fff; }

  /* ---- Ordenamiento ---- */
  .o-list{ display:flex; flex-direction:column; gap:9px; }
  .o-item{ display:flex; align-items:center; gap:11px; padding:14px 13px; border-radius:13px;
    border:1px solid rgba(34,227,255,.16); background:rgba(10,19,32,.6); cursor:pointer;
    font-size:14px; transition:border-color .15s, background .15s, transform .1s; }
  .o-item:active{ transform:scale(.99); }
  .o-num{ width:26px; height:26px; flex:0 0 26px; border-radius:8px; display:grid; place-items:center;
    font-family:'Orbitron',sans-serif; font-weight:700; font-size:13px; color:var(--cyan);
    background:rgba(34,227,255,.1); }
  .o-txt{ flex:1; }
  .o-grip{ color:var(--muted); font-size:18px; }
  .o-item.sel{ border-color:var(--cyan); background:rgba(34,227,255,.16); box-shadow:0 0 16px rgba(34,227,255,.3); }
  .o-item.ok{ border-color:var(--green); background:rgba(55,245,160,.12); }
  .o-item.ok .o-num{ background:var(--green); color:#04141a; }
  .o-item.bad{ border-color:#ff5d73; background:rgba(255,93,115,.1); }
  .o-item.bad .o-num{ background:#ff5d73; color:#fff; }

  /* ---- Asocie con líneas (SVG) ---- */
  .lk-wrap{ position:relative; display:flex; gap:60px; justify-content:space-between; touch-action:none; }
  .lk-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible; }
  .lk-line{ stroke:var(--cyan); stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(34,227,255,.6)); }
  .lk-line-temp{ stroke:var(--cyan-soft); stroke-dasharray:7 6; opacity:.9; }
  .lk-col{ flex:1; display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
  .lk-node{ display:flex; align-items:center; gap:8px; padding:11px 10px; border-radius:12px;
    border:1px solid rgba(34,227,255,.16); background:rgba(10,19,32,.7); cursor:grab;
    font-size:12.5px; line-height:1.2; min-height:46px; touch-action:none;
    transition:border-color .15s, background .15s; }
  .lk-node:active{ cursor:grabbing; }
  .lk-left{ } .lk-right .lk-txt{ text-align:left; }
  .lk-left .lk-txt{ text-align:right; }
  .lk-txt{ flex:1; }
  .lk-dot{ width:14px; height:14px; flex:0 0 14px; border-radius:50%; background:var(--bg-1);
    border:2px solid var(--cyan); }
  .lk-node.sel{ border-color:var(--cyan); box-shadow:0 0 16px rgba(34,227,255,.35); }
  .lk-node.sel .lk-dot{ background:var(--cyan); }
  .lk-node.linked .lk-dot{ background:var(--teal); border-color:var(--teal); }
  .lk-node.ok{ border-color:var(--green); }
  .lk-node.ok .lk-dot{ background:var(--green); border-color:var(--green); }
  .lk-node.bad{ border-color:#ff5d73; }
  .lk-node.bad .lk-dot{ background:#ff5d73; border-color:#ff5d73; }

  /* ---- Completar frase (chips) ---- */
  .bl-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding-top:6px; }
  .chip{ padding:12px 18px; border-radius:24px; cursor:pointer; font-size:14px; font-weight:600;
    border:1px solid rgba(34,227,255,.25); background:rgba(10,19,32,.7); color:var(--ink);
    transition:border-color .15s, background .15s, transform .1s; }
  .chip:active{ transform:scale(.96); }
  .chip.correct{ border-color:var(--green); background:rgba(55,245,160,.18); color:#fff; box-shadow:0 0 18px rgba(55,245,160,.35); }
  .chip.wrong{ border-color:#ff5d73; background:rgba(255,93,115,.16); color:#fff; }
  .chip.disabled{ pointer-events:none; }

  /* ---- Clasificar ---- */
  .cl-pool{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; min-height:44px;
    padding:10px; border-radius:12px; border:1px dashed rgba(34,227,255,.2); margin-bottom:14px; }
  .cl-chip{ padding:9px 14px; border-radius:20px; cursor:pointer; font-size:13px; font-weight:600;
    border:1px solid rgba(34,227,255,.25); background:rgba(10,19,32,.8); color:var(--ink); transition:.12s; }
  .cl-chip:active{ transform:scale(.95); }
  .cl-chip.sel{ border-color:var(--cyan); background:rgba(34,227,255,.18); box-shadow:0 0 14px rgba(34,227,255,.35); }
  .cl-chip.ok{ border-color:var(--green); background:rgba(55,245,160,.16); }
  .cl-chip.bad{ border-color:#ff5d73; background:rgba(255,93,115,.16); }
  .cl-cats{ display:flex; gap:10px; }
  .cl-cat{ flex:1; border-radius:13px; border:1px solid rgba(34,227,255,.16); background:rgba(10,19,32,.5);
    overflow:hidden; cursor:pointer; }
  .cl-cat-h{ font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; text-align:center;
    padding:9px 4px; background:rgba(34,227,255,.1); color:var(--cyan-soft); }
  .cl-cat-body{ display:flex; flex-direction:column; gap:6px; padding:9px 7px; min-height:60px; }
  .cl-cat-body .cl-chip{ width:100%; text-align:center; }

  /* ---- Drag (ordenar + clasificar) ---- */
  .o-item{ touch-action:none; }
  .o-item .o-grip{ cursor:grab; }
  .o-item.o-holding{ opacity:.3; }
  .cl-chip{ touch-action:none; cursor:grab; }
  .cl-chip.cl-holding{ opacity:.3; }
  .cl-cat.cl-over, .cl-pool.cl-over{ border-color:var(--cyan); background:rgba(34,227,255,.12);
    box-shadow:0 0 16px rgba(34,227,255,.3); }
  .drag-ghost{ box-shadow:0 14px 34px rgba(0,0,0,.55); transform:scale(1.04); opacity:.96;
    border-color:var(--cyan)!important; }

  /* ---- Opción múltiple (varias correctas) ---- */
  .multi-hint{ text-align:center; font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:1px;
    color:var(--gold); background:rgba(255,210,74,.1); border:1px solid rgba(255,210,74,.35);
    border-radius:10px; padding:8px 10px; margin-bottom:12px; text-transform:uppercase; }
  .multi-opt{ position:relative; }
  .multi-opt .multi-box{ width:24px; height:24px; flex:0 0 24px; border-radius:7px;
    border:2px solid var(--muted); display:grid; place-items:center; transition:.15s; }
  .multi-opt.on .multi-box{ background:var(--cyan); border-color:var(--cyan); }
  .multi-opt.on .multi-box::after{ content:'✓'; color:#04070d; font-weight:900; font-size:15px; line-height:1; }
  .multi-opt.on{ border-color:var(--cyan); background:rgba(34,227,255,.1); }
  .multi-opt.correct .multi-box{ background:var(--green); border-color:var(--green); }
  .multi-opt.correct .multi-box::after{ content:'✓'; color:#04141a; font-weight:900; font-size:15px; }
  .multi-opt.wrong .multi-box{ background:#ff5d73; border-color:#ff5d73; }
  .multi-opt.wrong .multi-box::after{ content:'✕'; color:#fff; font-weight:900; font-size:14px; }