/* Taller de montaje FPV (/montar-drone-fpv): lección interactiva para montar y configurar el Mario 5 */
.tf{--bench:#14191d;--bench-2:#1b2227;--bench-line:#262f36;--pcb:#121417;--pad:#d9a441;--ok:#2fa36b;--bad:#d2453a;--warn:#d99a1e;
  font-family:var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.tf *{box-sizing:border-box}
.tf-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--chip)}
.tf-top .ph{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.tf-top .bar{flex:1;min-width:120px;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.tf-top .bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s}
.tf-top .sc{font:600 14px/1 var(--mono);white-space:nowrap}
.tf-top button{font:500 13px var(--sans);background:none;border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer;color:var(--ink-2)}
.tf-main{display:grid;grid-template-columns:230px 1fr;min-height:640px}
.tf-steps{border-right:1px solid var(--line);padding:10px 0;max-height:860px;overflow:auto;background:var(--paper)}
.tf-steps h4{margin:12px 16px 4px;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tf-steps button{display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;border:0;background:none;padding:6px 16px;font:14px/1.3 var(--sans);color:var(--ink-2);cursor:pointer}
.tf-steps button:disabled{color:#b0aca4;cursor:default}
.tf-steps button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.tf-steps button b{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;font:600 10px/15px var(--mono);text-align:center}
.tf-steps button.ok b{background:var(--ok);border-color:var(--ok);color:#fff}
.tf-stage{display:flex;flex-direction:column;min-width:0}
.tf-card{padding:16px 20px 14px;border-bottom:1px solid var(--line)}
.tf-card .k{font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.tf-card h3{margin:0 0 6px;font:700 26px/1.1 var(--display);letter-spacing:.01em}
.tf-card p{margin:0 0 8px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.tf-card p b{color:var(--ink)}
.tf-fb{margin:8px 0 4px;display:flex;flex-direction:column;gap:6px}
.tf-fb div{padding:9px 12px;border-radius:6px;font-size:14.5px;line-height:1.45;border-left:4px solid}
.tf-fb .ok{background:#eaf6ef;border-color:var(--ok)}
.tf-fb .bad{background:#fbecea;border-color:var(--bad)}
.tf-fb .warn{background:#fdf4e2;border-color:var(--warn)}
.tf-fb .tip{background:var(--chip);border-color:var(--accent)}
.tf-fb small{display:block;margin-top:3px;color:var(--ink-3);font:12px var(--mono)}
.tf-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.tf-act .btn{min-height:40px;padding:8px 18px;font-size:15px}
.tf-act .btn-line{border:1px solid var(--line);background:var(--card)}
.tf-act .btn:disabled{opacity:.45;cursor:default}
.tf-bench{position:relative;background:var(--bench);background-image:linear-gradient(var(--bench-line) 1px,transparent 1px),linear-gradient(90deg,var(--bench-line) 1px,transparent 1px);background-size:32px 32px;padding:12px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e7ebee;min-height:420px}
.tf-bench svg.sc{width:100%;max-width:760px;height:auto;max-height:620px;display:block;user-select:none;-webkit-user-select:none}
.tf-bench .lg{position:absolute;left:12px;bottom:10px;font:11px var(--mono);color:#8b979f}
.tf-tray{display:flex;gap:10px;padding:12px;overflow-x:auto;background:var(--bench-2);border-top:1px solid #2a333a;min-height:20px}
.tf-tray:empty{display:none}
.tf-it{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;background:#222b31;border:1px solid #36414a;border-radius:8px;color:#eef1f3;font:500 14px var(--sans);cursor:grab;touch-action:none;user-select:none}
.tf-it svg{width:40px;height:40px;flex:none}
.tf-it.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.tf-it.used{opacity:.3;pointer-events:none}
.tf-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.9;transform:translate(-50%,-50%) scale(1.05)}
/* opciones a elegir */
.tf-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:12px;width:100%;max-width:820px}
.tf-opt{display:flex;flex-direction:column;gap:6px;text-align:left;background:#1f272d;border:1px solid #36414a;border-radius:10px;padding:14px;color:#eef1f3;cursor:pointer;font:15px/1.35 var(--sans);transition:border-color .15s,transform .15s}
.tf-opt:hover{border-color:#5b6a75;transform:translateY(-1px)}
.tf-opt svg{width:64px;height:64px}
.tf-opt b{font-size:16px}
.tf-opt span{color:#aab5bd;font-size:13.5px}
.tf-opt.good{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok)}
.tf-opt.wrong{border-color:var(--bad);opacity:.6}
/* SVG */
.tf svg text{font-family:var(--mono)}
.tf .zone{fill:rgba(240,106,42,.12);stroke:#F06A2A;stroke-width:2;stroke-dasharray:6 5;animation:tfz 1.2s linear infinite}
.tf .zone.hot{fill:rgba(240,106,42,.32)}
@keyframes tfz{to{stroke-dashoffset:-22}}
.tf .pad{cursor:pointer;touch-action:none}
.tf .zone,.tf .clk{touch-action:none}
.tf .pad .hit{fill:transparent}
.tf .pad .p{fill:var(--pad);stroke:#7a5a1c;stroke-width:1}
.tf .pad.act .p{fill:#ffcf6b;stroke:#F06A2A;stroke-width:3}
.tf .pad.tgt .p{animation:tfp 1s ease-in-out infinite}
.tf .pad.done .p{fill:#9a7a3a}
@keyframes tfp{50%{stroke:#F06A2A;stroke-width:4}}
.tf .wire{fill:none;stroke-width:5;stroke-linecap:round;pointer-events:none}
.tf .wire.sh{stroke:#000;stroke-opacity:.35;stroke-width:8}
.tf .wire.tmp{stroke:#F06A2A;stroke-dasharray:6 6;stroke-width:3}
.tf .wire.badw{stroke:var(--bad);animation:tfb .9s ease-out forwards}
@keyframes tfb{to{stroke-opacity:0}}
.tf .spin{animation:tfs .5s linear infinite;transform-box:fill-box;transform-origin:center}
.tf .spin.ccw{animation-direction:reverse}
@keyframes tfs{to{transform:rotate(360deg)}}
.tf .clk{cursor:pointer}
/* configurador emulado */
.tf-bf{width:100%;max-width:880px;background:#1a1f24;border:1px solid #333d45;border-radius:8px;overflow:hidden;color:#e4e8eb;font:14px/1.4 var(--sans);text-align:left}
.tf-bf .hd{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#101418;border-bottom:1px solid #2d363d;font:12px var(--mono);color:#9aa6ae}
.tf-bf .hd b{color:#F06A2A;letter-spacing:.06em}
.tf-bf .hd .dot{width:8px;height:8px;border-radius:50%;background:#2fa36b}
.tf-bf .bd{display:grid;grid-template-columns:150px 1fr;min-height:340px}
.tf-bf nav{background:#14181c;border-right:1px solid #2d363d;padding:6px 0}
.tf-bf nav span{display:block;padding:7px 12px;color:#7d8a93;font-size:13px}
.tf-bf nav span.on{color:#fff;background:#232a30;box-shadow:inset 3px 0 0 #F06A2A}
.tf-bf .ct{padding:14px;overflow-x:auto}
.tf-bf h5{margin:0 0 10px;font:600 15px var(--sans)}
.tf-bf table{border-collapse:collapse;width:100%;font-size:13px}
.tf-bf th,.tf-bf td{padding:6px 8px;border-bottom:1px solid #2a3239;text-align:left;white-space:nowrap}
.tf-bf th{color:#93a0a9;font-weight:500;font-size:12px}
.tf-bf select,.tf-bf input[type=number]{background:#0f1316;color:#e4e8eb;border:1px solid #3a454e;border-radius:4px;padding:4px 6px;font:13px var(--sans)}
.tf-bf .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #2a3239}
.tf-bf .row label{color:#c9d1d6}
.tf-bf .row small{display:block;color:#7d8a93;font-size:12px}
.tf-sw{position:relative;display:inline-block;width:38px;height:22px;flex:none}
.tf-sw input{opacity:0;width:0;height:0}
.tf-sw i{position:absolute;inset:0;background:#3a454e;border-radius:99px;transition:.15s;cursor:pointer}
.tf-sw i:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.tf-sw input:checked+i{background:#F06A2A}
.tf-sw input:checked+i:before{transform:translateX(16px)}
.tf-sw input:disabled+i{opacity:.5;cursor:default}
.tf-bf .ft{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;background:#14181c;border-top:1px solid #2d363d}
.tf-bf .ft button{font:600 13px var(--sans);padding:8px 14px;border-radius:4px;border:0;background:#F06A2A;color:#160B04;cursor:pointer}
.tf-bf .ft button.sec{background:#2b343b;color:#e4e8eb}
.tf-chb{display:grid;grid-template-columns:70px 1fr 48px;gap:8px;align-items:center;margin:4px 0;font:12px var(--mono)}
.tf-chb .b{height:14px;background:#0f1316;border:1px solid #3a454e;border-radius:3px;overflow:hidden}
.tf-chb .b i{display:block;height:100%;background:#F06A2A}
.tf-stk{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.tf-stk .pd{width:130px;height:130px;border-radius:14px;background:#0f1316;border:1px solid #3a454e;position:relative;touch-action:none}
.tf-stk .pd:before,.tf-stk .pd:after{content:"";position:absolute;background:#2a3239}
.tf-stk .pd:before{left:50%;top:8px;bottom:8px;width:1px}.tf-stk .pd:after{top:50%;left:8px;right:8px;height:1px}
.tf-stk .kn{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#F06A2A;box-shadow:0 2px 6px rgba(0,0,0,.5);z-index:1;cursor:grab}
.tf-stk .lb{text-align:center;font:11px var(--mono);color:#93a0a9;margin-top:4px}
.tf-todo{list-style:none;margin:8px 0 0;padding:0;font-size:13.5px}
.tf-todo li{padding:3px 0 3px 22px;position:relative;color:#aab5bd}
.tf-todo li:before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border:1.5px solid #5b6a75;border-radius:3px}
.tf-todo li.ok{color:#e4e8eb}
.tf-todo li.ok:before{background:#2fa36b;border-color:#2fa36b}
.tf-flags{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.tf-flags span{font:600 12px var(--mono);padding:4px 8px;border-radius:4px;background:#5a1f1a;color:#ffb4a9}
.tf-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tf-acts button{font:500 13px var(--sans);padding:8px 12px;border-radius:6px;border:1px solid #3a454e;background:#232a30;color:#e4e8eb;cursor:pointer}
.tf-acts button.done{border-color:#2fa36b;color:#8fe0b5}
.tf-q{width:100%;max-width:760px;display:flex;flex-direction:column;gap:10px}
.tf-q button{display:block;width:100%;text-align:left;font:15px/1.4 var(--sans);padding:12px 14px;border-radius:8px;border:1px solid #36414a;background:#1f272d;color:#eef1f3;cursor:pointer}
.tf-q button:hover{border-color:#5b6a75}
.tf-q button.good{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok)}
.tf-q button.wrong{border-color:var(--bad);opacity:.6}
.tf-fin{max-width:760px;width:100%;color:#e7ebee}
.tf-fin .big{font:700 64px/1 var(--display);color:#F06A2A}
.tf-fin ul{padding-left:18px;color:#c3ccd2;font-size:14.5px}
.tf-fin .btn{margin:6px 8px 0 0}
@media (max-width:900px){
  .tf-main{grid-template-columns:1fr}
  .tf-steps{display:none;border-right:0;border-bottom:1px solid var(--line);max-height:320px}
  .tf.menu .tf-steps{display:block}
  .tf-card h3{font-size:22px}
  .tf-bench{min-height:300px;padding:8px}
  .tf-bench.wide{overflow-x:auto;align-items:flex-start;justify-content:flex-start}
  .tf-bench.wide svg.sc{min-width:640px}
  .tf-bench.wide:after{content:'Desliza para ver toda la placa →';position:sticky;left:8px;bottom:4px;align-self:flex-start;font:11px var(--mono);color:#8b979f;margin-top:4px}
  .tf-bf .bd{grid-template-columns:1fr}
  .tf-bf nav{display:flex;overflow-x:auto;padding:0;border-right:0;border-bottom:1px solid #2d363d}
  .tf-bf nav span{white-space:nowrap}
}
@media (min-width:901px){.tf-top .mn{display:none}}
/* contenido de la página */
.tf-tab{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:15px}
.tf-tab th,.tf-tab td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tf-tab th{background:var(--chip);font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tf-scroll{overflow-x:auto}
.tf-src{font-size:14.5px;color:var(--ink-2);padding-left:18px}