/* ════════════════════════════════════════════════════════════
   smartlearning.school · piezas comunes de las animaciones
   Cabecera, capítulos, intro, panel de explicación, inspector,
   controles y línea de tiempo. Lo específico de cada animación
   vive en su propio <style>.
   ════════════════════════════════════════════════════════════ */
@import url("/lab/tokens.css");

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font:14px/1.6 var(--mono);color:var(--ink);background:var(--bg);overflow-x:hidden;padding-inline:20px;padding-block:22px 32px}
.wrap{max-width:1340px;margin:0 auto}
b{color:#fff;font-weight:700}
i{font-style:italic}
a{color:inherit}
code{font-family:var(--mono);background:var(--raise);border:1px solid var(--dim);padding:0 6px;border-radius:var(--r-sm);font-size:.92em;color:#f1f1f1}
button{font-family:var(--mono)}
button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ico{fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* rayado de cabecera de zona: usa --c del contenedor */
.hatch{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--c) 70%,transparent) 0 1.3px,transparent 1.3px 7px)}

/* ───────── Cabecera ───────── */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.brand{display:flex;flex-direction:column;gap:4px}
.prompt{color:var(--muted);font-size:12.5px}
.prompt a{color:var(--ok);text-decoration:none}
.prompt a:hover{text-decoration:underline}
h1{font-size:22px;letter-spacing:-.01em;line-height:1.3;text-wrap:balance}
.brand p{color:var(--muted);font-size:12.5px}
.chapters{display:flex;gap:8px;flex-wrap:wrap}
.chap{--cc:#fff;border:1px solid var(--dim);background:transparent;color:var(--muted);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;cursor:pointer;transition:.25s}
.chap span{color:var(--line);margin-right:4px;transition:.25s}
.chap:hover{color:var(--ink);border-color:var(--cc)}
.chap.on{color:#000;background:var(--cc);border-color:var(--cc);box-shadow:0 0 22px -6px var(--cc)}
.chap.on span{color:rgba(0,0,0,.55)}

/* ───────── Escenario ───────── */
.stage{position:relative;border:1px solid var(--dim);border-radius:var(--r-xl);background:var(--bg)}

/* globo sobre un nodo */
.badge{position:absolute;z-index:6;padding:4px 11px;border-radius:999px;background:var(--c);color:#000;font-weight:700;font-size:11.5px;white-space:nowrap;
  box-shadow:0 8px 24px -8px var(--c);opacity:0;transform:translateY(8px) scale(.7);transition:.4s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.badge.show{opacity:1;transform:none}
.badge.err{background:var(--err);box-shadow:0 8px 24px -8px var(--err)}

/* paquete que viaja: --pc = color de quien envía */
.packet{--pc:#fff;position:absolute;left:0;top:0;z-index:20;display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  font:700 11.5px/1 var(--mono);color:#000;background:var(--pc);border:1.5px solid var(--pc);white-space:nowrap;will-change:transform,opacity;pointer-events:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 22%,transparent),0 10px 28px -6px var(--pc)}
.packet.res{background:#000;color:var(--pc)}
.packet.jwt{--pc:#fff;background:#fff;color:#000}
.packet.err{--pc:var(--err);background:var(--err);color:#000}
.packet .pi{background:#000;color:#fff;border-radius:999px;padding:3px 7px;font-size:9.5px;letter-spacing:.06em;margin-left:-7px}

@keyframes fin{from{opacity:0;transform:translateY(6px)}}
@keyframes pop{from{transform:scale(.8);opacity:.3}}
@keyframes dash{to{stroke-dashoffset:-28}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ───────── Intro ───────── */
.intro{position:absolute;inset:0;z-index:40;border-radius:var(--r-xl);display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .5s}
.intro.hide{opacity:0;pointer-events:none}
.intro-card{max-width:700px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.intro-card h2{font-size:26px;letter-spacing:-.01em;line-height:1.3;text-wrap:balance}
.intro-card p{color:#c9c9cc;line-height:1.65;font-size:14px}
.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.bigbtn{font-weight:700;font-size:14px;padding:12px 22px;border-radius:12px;border:1px solid #fff;cursor:pointer;color:#000;background:#fff;transition:transform .2s,box-shadow .2s}
.bigbtn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px #fff}
.bigbtn.alt{background:transparent;color:var(--ink);border-color:var(--line)}
.bigbtn.alt:hover{box-shadow:none;border-color:var(--ink)}
.hint{font-size:11.5px;color:var(--muted)}
kbd{font:500 11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r-sm);padding:1px 6px;color:var(--ink)}

/* ───────── Panel inferior ───────── */
.bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:16px;margin-top:16px}
.card{border:1px solid var(--dim);border-radius:16px;background:var(--panel);overflow:hidden}
.explain{padding:18px 22px 20px;position:relative}
.prog{position:absolute;left:0;right:0;top:0;height:3px;background:var(--dim)}
.prog div{height:100%;width:0;background:var(--pc,#fff);box-shadow:0 0 10px var(--pc,#fff)}
.meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;font-size:11.5px}
.ctag{padding:3px 10px;border-radius:999px;font-weight:700;color:#000}
.snum{color:var(--muted);font-variant-numeric:tabular-nums}
.route{margin-left:auto;padding:3px 10px;border-radius:8px;border:1px solid var(--dim);font-weight:500}
.explain h2{font-size:18px;letter-spacing:-.01em;margin-bottom:8px;line-height:1.35;text-wrap:balance}
.stext{font-size:13.5px;line-height:1.75;color:#c9c9cc;max-width:72ch}
.stext ul{margin:6px 0 0;list-style:none;display:flex;flex-direction:column;gap:5px}
.stext li{position:relative;padding-left:2.2ch}
.stext li::before{content:">";position:absolute;left:0;color:var(--muted)}
.tip{margin-top:14px;font-size:13px;line-height:1.65;color:var(--ok);max-width:72ch}
.tip::before{content:"# ";color:color-mix(in srgb,var(--ok) 55%,transparent)}
.tip b,.tip code{color:var(--ok)}
.fade{animation:fin .45s ease both}

/* inspector con aspecto de terminal */
.inspector{display:flex;flex-direction:column;background:#070708}
.ihead{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--dim);font-size:11.5px;color:var(--muted)}
.ihead em{font-style:normal;color:var(--ok)}
.ihead .file{color:var(--ink)}
.inspector pre{margin:0;padding:14px 16px;font:12px/1.7 var(--mono);color:#c9c9cc;white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:340px;min-height:220px}
.kw{color:var(--syn-kw)}.str{color:var(--syn-str)}.num{color:var(--syn-num)}.com{color:var(--syn-com);font-style:italic}.key{color:var(--syn-key)}.val{color:var(--ink)}
.okc{color:var(--ok);font-weight:700}.badc{color:var(--err);font-weight:700}
.cursor{display:inline-block;width:.6em;height:1.1em;background:var(--ink);vertical-align:-.2em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ───────── Controles ───────── */
.controls{display:flex;gap:18px;align-items:center;margin-top:16px;padding:12px 16px}
.btns{display:flex;gap:8px;align-items:center}
.cbtn{min-width:40px;height:38px;padding:0 10px;border-radius:var(--r-md);border:1px solid var(--dim);background:transparent;color:var(--ink);font-size:13px;cursor:pointer;display:grid;place-items:center;transition:.2s}
.cbtn:hover{border-color:var(--ink)}
.cbtn.main{min-width:46px;height:44px;font-size:15px;border-color:#fff;color:#000;background:#fff}
select{background:transparent;color:var(--ink);border:1px solid var(--dim);border-radius:var(--r-md);padding:9px 8px;font:500 12px var(--mono);cursor:pointer}
select option{background:var(--panel)}
.timeline{flex:1;display:flex;gap:14px;min-width:0}
.tgroup{--cc:#fff;display:flex;flex-direction:column;gap:7px;min-width:0}
.tlabel{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgroup.on .tlabel{color:var(--cc)}
.tdots{display:flex;gap:4px;align-items:center}
.dot{flex:1;height:6px;min-width:6px;border-radius:99px;border:0;cursor:pointer;background:var(--dim);transition:.25s}
.dot:hover{background:var(--line)}
.dot.done{background:color-mix(in srgb,var(--cc) 50%,transparent)}
.dot.cur{background:var(--cc);height:10px;box-shadow:0 0 12px var(--cc)}

@media (max-width:1100px){
  .bottom{grid-template-columns:1fr}
  .controls{flex-wrap:wrap}.timeline{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:0s!important}}