/* Ruta de fundamentos, material de trabajo */
@import url("../styles.css");

body{padding:0}
.rt{display:grid;grid-template-columns:290px minmax(0,1fr);min-height:100vh}

/* ---------- Columna lateral ---------- */
.rt__side{
  position:sticky;top:0;height:100vh;overflow-y:auto;
  border-right:1px solid var(--line);background:var(--ink-2);
  padding:26px 22px;display:flex;flex-direction:column;gap:22px;
}
.rt__brand{display:flex;align-items:center;gap:.5em;font-size:19px;font-weight:700;letter-spacing:-.035em}
.rt__brand svg{height:1.05em;width:auto;color:#fff}
.rt__brand i{font-style:normal;color:var(--accent)}
.rt__badge{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--mikado);
  color:var(--ink);font-size:11.5px;font-weight:700;align-self:flex-start}

.rt__prog{display:grid;gap:8px}
.rt__bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.rt__bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;
  transition:width .6s var(--ease)}
.rt__progT{font-size:12.5px;color:var(--muted)}

.rt__nav{list-style:none;display:grid;gap:3px}
.rt__nav button{
  width:100%;text-align:left;display:flex;gap:11px;align-items:flex-start;
  padding:11px 12px;border-radius:11px;font-size:14px;font-weight:500;color:var(--muted);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.rt__nav button:hover{background:var(--ink-3);color:#fff}
.rt__nav button.is-on{background:var(--ink-3);color:#fff;font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent)}
.rt__tick{
  width:17px;height:17px;border-radius:50%;flex-shrink:0;margin-top:1px;
  box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;
  font-size:10px;color:transparent;transition:.35s var(--ease);
}
.rt__nav button.done .rt__tick{background:var(--accent);box-shadow:none;color:var(--accent-ink)}
.rt__back{margin-top:auto;font-size:13.5px;color:var(--muted-2)}
.rt__back:hover{color:#fff}

/* ---------- Contenido ---------- */
.rt__main{padding:clamp(28px,3.4vw,56px) clamp(20px,4vw,64px) 96px;max-width:1180px;width:100%;margin-inline:auto}
.rt__wide{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.step{display:none}
.step.is-on{display:block;animation:stepIn .5s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.step__hd{
  border-radius:20px;padding:clamp(22px,2.4vw,34px);margin-bottom:clamp(10px,1.4vw,20px);
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--ink-2)), var(--ink-2) 62%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  position:relative;overflow:hidden;
}
.step__hd::after{
  content:"";position:absolute;right:-40px;top:-60px;width:230px;height:230px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 12%, transparent);filter:blur(30px);pointer-events:none;
}
.step__k{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
  color:var(--accent-ink);background:var(--accent);padding:6px 13px;border-radius:999px}
.step__h{font-size:clamp(29px,3.8vw,50px);font-weight:800;letter-spacing:-.042em;line-height:1.04;margin-top:16px;position:relative}
.step__lead{margin-top:15px;font-size:17.5px;line-height:1.62;color:#C7C7D2;max-width:66ch;position:relative}

h3.blk{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.03em;
  margin-top:clamp(34px,3.6vw,52px);display:flex;align-items:center;gap:12px}
h3.blk::before{content:"";width:5px;height:1.05em;border-radius:3px;background:var(--accent);flex-shrink:0}
.step p{font-size:16px;line-height:1.7;color:#C3C3CE;margin-top:12px;max-width:70ch}
.step p b{color:#fff;font-weight:600}
.step ul.dots{list-style:none;display:grid;gap:10px;margin-top:14px;max-width:70ch}
.step ul.dots li{display:flex;gap:11px;font-size:15.5px;color:#C3C3CE;line-height:1.6}
.step ul.dots li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  flex-shrink:0;margin-top:.55em}

/* avisos */
.tip,.warn{border-radius:14px;padding:18px 20px;margin-top:22px;max-width:74ch;
  box-shadow:inset 0 0 0 1px var(--line);background:var(--ink-2)}
.tip b,.warn b{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
.tip b{color:var(--mikado)} .warn b{color:var(--giants)}
.tip p,.warn p{margin-top:0;font-size:15px;color:var(--muted)}

/* ---------- Ejercicios ---------- */
.ex2{border-radius:20px;padding:clamp(20px,2.4vw,30px);
  background:var(--ink-2);margin-top:clamp(24px,2.6vw,34px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--line));}
.ex2__k{display:inline-block;padding:5px 11px;border-radius:999px;
  background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent)}
.ex2__k{font-size:12px;font-weight:700;letter-spacing:-.005em}
.ex2__t{font-size:19px;font-weight:700;letter-spacing:-.028em;margin-top:6px}
.ex2__d{font-size:15px;color:var(--muted);margin-top:8px;line-height:1.6}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:18px}
.card2{border-radius:14px;padding:16px;box-shadow:inset 0 0 0 1px var(--line);background:var(--ink);
  font-size:15px;line-height:1.5;color:#D2D2DA;transition:.35s var(--ease)}
.card2__opts{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.opt{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);transition:.3s var(--ease)}
.opt:hover{color:#fff}
.opt.pick{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.card2.ok{box-shadow:inset 0 0 0 1px #4FAE72}
.card2.no{box-shadow:inset 0 0 0 1px var(--giants)}
.card2__fb{font-size:13.5px;color:var(--muted);margin-top:11px;display:none;line-height:1.55}
.card2.ok .card2__fb,.card2.no .card2__fb{display:block}

/* constructor de instrucciones */
.build2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:18px}
.pieces{display:grid;gap:8px;align-content:start}
.piece{text-align:left;padding:13px 15px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);
  transition:.35s var(--ease)}
.piece b{display:block;font-size:14px;font-weight:700;color:#D6D6DE}
.piece span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:3px}
.piece.on{box-shadow:inset 0 0 0 1px var(--sc);background:var(--ink-3)}
.piece.on b{color:var(--sc)}
.out{border-radius:14px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line);padding:18px;
  display:flex;flex-direction:column}
.out__t{font-size:12.5px;font-weight:700;color:var(--muted-2);margin-bottom:12px}
.out__body{font-size:15px;line-height:1.7;color:#D6D6DE;flex:1}
.out__body em{font-style:normal;padding:.08em .16em;border-radius:.2em}
.out__meter{height:4px;border-radius:2px;background:var(--line);margin-top:16px;overflow:hidden}
.out__meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s var(--ease)}
.out__note{font-size:12.5px;color:var(--muted-2);margin-top:9px}

/* evaluador */
.quiz{display:grid;gap:14px;margin-top:18px}
.q{display:grid;gap:9px}
.q__t{font-size:15.5px;font-weight:600;color:#D6D6DE}
.q__opts{display:flex;gap:7px;flex-wrap:wrap}
.score{border-radius:14px;padding:20px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line);
  margin-top:18px;display:none}
.score.on{display:block;animation:stepIn .45s var(--ease) both}
.score__n{font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1}
.score__v{font-size:16px;font-weight:600;margin-top:6px}
.score__d{font-size:15px;color:var(--muted);margin-top:10px;line-height:1.6}

/* ficha final */
.ficha{display:grid;gap:14px;margin-top:18px}
.f{display:grid;gap:7px}
.f label{font-size:13.5px;font-weight:600;color:var(--muted)}
.f textarea,.f input{
  width:100%;background:var(--ink);color:#fff;border:0;border-radius:12px;padding:13px 15px;
  box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:15px;line-height:1.55;resize:vertical;
}
.f textarea:focus,.f input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--accent)}
.f small{font-size:12.5px;color:var(--muted-2)}

.rowbtn{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.mini{padding:11px 20px;border-radius:999px;font-size:14.5px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line-2);color:#fff;transition:.35s var(--ease)}
.mini:hover{background:var(--ink-3)}
.mini--go{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.saved{font-size:13px;color:var(--muted-2)}

/* pie de paso */
.rt__foot{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;
  margin-top:clamp(38px,4vw,60px);padding-top:26px;border-top:1px solid var(--line)}

@media(max-width:900px){
  .rt{grid-template-columns:1fr}
  .rt__side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .build2{grid-template-columns:1fr}
}

/* glosario */
.glos{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px;margin-top:18px}
.gl{
  text-align:left;padding:14px 16px;border-radius:13px;background:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);transition:.35s var(--ease);
}
.gl:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.gl b{display:block;font-size:15px;font-weight:700;color:#DEDEE6;letter-spacing:-.02em}
.gl span{
  display:block;font-size:14px;line-height:1.55;color:var(--muted);
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease),opacity .35s var(--ease),margin-top .45s var(--ease);
}
.gl.on{box-shadow:inset 0 0 0 1px var(--accent);background:var(--ink-3)}
.gl.on b{color:var(--accent)}
.gl.on span{max-height:260px;opacity:1;margin-top:9px}

/* bloques para copiar */
.copybox{position:relative;margin-top:18px}
.copybox pre{
  background:var(--ink);border-radius:14px;padding:20px 20px 60px;
  box-shadow:inset 0 0 0 1px var(--line);
  font:inherit;font-size:14.5px;line-height:1.7;color:#D2D2DA;
  white-space:pre-wrap;word-break:break-word;margin:0;
}
.copybtn{position:absolute;right:14px;bottom:14px}

/* duración del paso */
.step__min{display:inline-block;margin-left:12px;font-size:13px;font-weight:600;
  color:#fff;opacity:.62;vertical-align:middle}
.rt__nav button small{display:block;font-size:11.5px;color:var(--muted-2);font-weight:500;margin-top:2px}

/* tu caso, se va armando durante la ruta */
.tucaso{
  border-radius:18px;padding:clamp(20px,2.2vw,26px);margin-top:clamp(24px,2.6vw,34px);
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--ink-2)), var(--ink-2) 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
}
.tucaso__k{display:inline-block;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;
  background:var(--accent);color:var(--accent-ink)}
.tucaso__t{font-size:19px;font-weight:700;letter-spacing:-.028em;margin-top:12px}
.tucaso__d{font-size:14.5px;color:var(--muted);margin-top:7px;line-height:1.6;max-width:64ch}
.tucaso .f{margin-top:16px}

/* envío de la ficha */
.envio2{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.envio2__t{font-size:17px;font-weight:700;letter-spacing:-.025em}
.envio2__d{font-size:14.5px;color:var(--muted);margin-top:6px;line-height:1.55;max-width:58ch}
.envio2__f{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.envio2__f input{
  flex:1;min-width:190px;background:var(--ink);color:#fff;border:0;border-radius:12px;padding:13px 15px;
  box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:15px;
}
.envio2__f input::placeholder{color:var(--muted-2)}
.envio2__f input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--accent)}
.envio2__e{font-size:14px;margin-top:12px;min-height:20px;color:var(--muted)}
.envio2__e.mal{color:var(--giants)}
.envio2__e.bien{color:var(--accent)}

/* el armador */
.arm__t{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:16px}
.arm__flujo{display:grid;gap:9px}
.arm__p{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border-radius:13px;
  background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.arm__p--ojo{box-shadow:inset 0 0 0 1px var(--giants)}
.arm__n{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--accent);color:var(--accent-ink)}
.arm__p--ojo .arm__n{background:var(--giants);color:#0B0B0C}
.arm__p b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.arm__p span{display:block;font-size:14px;color:var(--muted);margin-top:4px;line-height:1.55}
.arm__d{font-size:15px;color:#C3C3CE;line-height:1.65;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line)}
.arm__d b{color:var(--giants)}

/* ---------- cierre de la ruta ---------- */
.cierre{display:none}
.cierre.on{display:block;animation:stepIn .6s var(--ease) both}
.cierre__marca{width:64px;color:var(--accent);margin-bottom:22px}
.cierre__marca svg{width:100%;height:auto}
.cierre__h{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.042em;line-height:1.04}
.cierre__d{font-size:17.5px;color:#C7C7D2;margin-top:14px;line-height:1.6;max-width:60ch}

.cierre__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(26px,3vw,40px)}
.cierre__box{border-radius:18px;padding:clamp(20px,2.2vw,28px);background:var(--ink-2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--line))}
.cierre__k{display:inline-block;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;
  background:var(--accent);color:var(--accent-ink);margin-bottom:16px}
.cierre__l{list-style:none;display:grid;gap:10px}
.cierre__l li{display:flex;gap:10px;font-size:15px;color:#C9C9D4;line-height:1.55}
.cierre__l li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  flex-shrink:0;margin-top:.5em}
.cierre__ficha{display:grid;gap:14px}
.cierre__ficha dt{font-size:12.5px;font-weight:600;color:var(--muted-2)}
.cierre__ficha dd{font-size:15px;color:#D6D6DE;line-height:1.55;margin-top:4px}
.cierre__ficha dd.vacio{color:var(--muted-2);font-style:italic}

.cierre__next{margin-top:20px;border-radius:18px;padding:clamp(20px,2.2vw,28px);
  background:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.cierre__next p{font-size:16px;color:#C3C3CE;line-height:1.65;max-width:70ch;margin-top:0}

@media(max-width:820px){.cierre__cols{grid-template-columns:1fr}}

/* al guardar el resumen, solo sale el cierre */
@media print{
  body{background:#fff;color:#000}
  .rt__side,.rt__foot,.step,.cierre__next .rowbtn{display:none!important}
  .rt{display:block}
  .rt__main{max-width:none;padding:0}
  .cierre__box,.cierre__next{background:#fff;box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .cierre__h,.cierre__d,.cierre__l li,.cierre__ficha dd,.cierre__next p{color:#000}
  .cierre__k{background:#eee;color:#000}
  .cierre__marca{color:#000}
  .cierre__cols{grid-template-columns:1fr}
}

.envio2__f input.mal{box-shadow:inset 0 0 0 2px var(--giants)}
.envio2__e{min-height:22px}