{"id":7311,"date":"2026-05-01T21:10:36","date_gmt":"2026-05-02T00:10:36","guid":{"rendered":"https:\/\/fisica2.fica.unsl.edu.ar\/?page_id=7311"},"modified":"2026-05-02T20:43:37","modified_gmt":"2026-05-02T23:43:37","slug":"carga_campo_magnetico_circular","status":"publish","type":"page","link":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/carga_campo_magnetico_circular\/","title":{"rendered":"carga_campo_magnetico_circular"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7311\" class=\"elementor elementor-7311\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-86d5a3b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"86d5a3b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-400eec4\" data-id=\"400eec4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4bc276f elementor-widget elementor-widget-html\" data-id=\"4bc276f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Laboratorio Virtual: Part\u00edcula en Campo Magn\u00e9tico<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n<style>\r\n:root{--bg:#060b14;--bg2:#0c1525;--bg3:#141d2f;--fg:#e8ecf4;--muted:#7a8ba8;--accent:#00e5a0;--accent2:#f59e0b;--cyan:#00e5ff;--magenta:#e040fb;--lime:#76ff03;--orange:#ff6b35;--border:#1e293b;--red:#ef4444;--blue:#38bdf8}\r\n*{box-sizing:border-box;margin:0;padding:0}\r\nbody{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--fg);height:100vh;overflow:hidden}\r\n.mono{font-family:'JetBrains Mono',monospace}\r\n#app{display:flex;flex-direction:column;height:100vh}\r\nheader{height:46px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 14px;flex-shrink:0;z-index:10}\r\n.hdr-left{display:flex;align-items:center;gap:10px}\r\n.hdr-left .logo{width:26px;height:26px;background:var(--accent);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:var(--bg)}\r\n.hdr-center{display:flex;gap:5px;align-items:center}\r\n.hdr-right{display:flex;align-items:center;gap:10px}\r\n.btn{padding:5px 10px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--fg);font-family:'Space Grotesk',sans-serif;display:inline-flex;align-items:center;gap:4px;transition:all .15s;white-space:nowrap}\r\n.btn:hover{background:var(--border)}\r\n.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--bg)}.btn-accent:hover{filter:brightness(1.1)}\r\n.btn-warn{background:var(--orange);border-color:var(--orange);color:#fff}\r\n.btn-sm{padding:3px 7px;font-size:10px}\r\n.mode-sw{display:flex;border:1px solid var(--border);border-radius:5px;overflow:hidden}\r\n.mode-sw button{padding:4px 12px;font-size:10px;font-weight:600;border:none;cursor:pointer;background:var(--bg3);color:var(--muted);font-family:'Space Grotesk',sans-serif;transition:all .15s}\r\n.mode-sw button.active{background:var(--accent);color:var(--bg)}\r\n#workspace{display:flex;flex:1;min-height:0;overflow:hidden}\r\n#leftPanel{width:250px;background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0;padding:8px 10px}\r\n#leftPanel::-webkit-scrollbar{width:4px}\r\n#leftPanel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}\r\n#centerPanel{flex:1;min-width:0;position:relative}\r\n#rightPanel{width:280px;background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}\r\n#rightPanel::-webkit-scrollbar{width:5px}\r\n#rightPanel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}\r\n.sec{margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}\r\n.sec-t{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:5px}\r\n.row{display:flex;align-items:center;gap:5px;margin-bottom:3px}\r\n.row label{font-size:10px;color:var(--muted);min-width:26px;flex-shrink:0}\r\n.row .val{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--fg);min-width:38px;text-align:right;flex-shrink:0}\r\ninput[type=range]{-webkit-appearance:none;flex:1;height:3px;background:var(--bg3);border-radius:2px;outline:none}\r\ninput[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}\r\n.chk-row{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--muted);cursor:pointer;margin-bottom:2px}\r\n.chk-row input{accent-color:var(--accent)}\r\n.tab-bar{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}\r\n.tab-bar button{flex:1;padding:6px 4px;font-size:10px;font-weight:600;border:none;background:transparent;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;font-family:'Space Grotesk',sans-serif;transition:all .15s}\r\n.tab-bar button.active{color:var(--accent);border-bottom-color:var(--accent)}\r\n.tab-content{display:none;padding:8px 10px;flex:1;overflow-y:auto}\r\n.tab-content.active{display:flex;flex-direction:column}\r\n.data-tbl{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:8px}\r\n.data-tbl th{position:sticky;top:0;background:var(--bg2);color:var(--accent);font-weight:600;text-align:right;padding:2px 3px;border-bottom:1px solid var(--border)}\r\n.data-tbl td{text-align:right;padding:1px 3px;color:var(--muted);border-bottom:1px solid rgba(30,41,59,.3)}\r\n.meas-box{background:rgba(0,229,160,.05);border:1px solid rgba(0,229,160,.15);border-radius:5px;padding:7px;margin-bottom:6px}\r\n.meas-box .mt{font-size:8px;font-weight:700;text-transform:uppercase;color:var(--accent);letter-spacing:.1em;margin-bottom:4px}\r\n.meas-row{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);margin-bottom:1px}\r\n.meas-row span:last-child{color:var(--fg)}\r\n.guide-act{background:var(--bg3);border:1px solid var(--border);border-radius:5px;margin-bottom:6px;overflow:hidden}\r\n.guide-head{padding:6px 8px;cursor:pointer;font-size:10px;font-weight:600;display:flex;justify-content:space-between;align-items:center;transition:background .15s}\r\n.guide-head:hover{background:rgba(0,229,160,.05)}\r\n.guide-body{padding:0 8px 6px;display:none;font-size:9px;line-height:1.5;color:var(--muted)}\r\n.guide-act.open .guide-body{display:block}\r\n.guide-act.open .g-chev{transform:rotate(180deg)}\r\n.g-chev{transition:transform .2s;font-size:8px;color:var(--muted)}\r\n.task{background:rgba(0,229,160,.04);border-left:2px solid var(--accent);padding:4px 6px;margin:3px 0;border-radius:0 3px 3px 0}\r\n.hint-btn{font-size:8px;padding:2px 7px;border-radius:3px;background:var(--bg);border:1px solid var(--border);color:var(--accent2);cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:600}\r\n.hint-btn:hover{background:var(--border)}\r\n.hint-text{display:none;background:rgba(245,158,11,.06);border-left:2px solid var(--accent2);padding:3px 6px;margin-top:2px;border-radius:0 3px 3px 0;font-size:8px;color:var(--accent2)}\r\n.hint-text.show{display:block}\r\n.rhr-canvas{border:1px solid var(--border);border-radius:3px;background:var(--bg3);display:block;margin:3px auto}\r\n#threeCanvas{display:block;width:100%;height:100%}\r\n.view-btns{position:absolute;bottom:8px;left:8px;display:flex;gap:3px;z-index:5}\r\n.vec-legend{position:absolute;top:8px;left:8px;background:rgba(6,11,20,.85);border:1px solid var(--border);border-radius:5px;padding:5px 8px;z-index:5;font-size:8px}\r\n.vec-legend div{display:flex;align-items:center;gap:4px;margin-bottom:1px}\r\n.vec-legend .dot{width:12px;height:2px;border-radius:1px;flex-shrink:0}\r\n.status-info{position:absolute;top:8px;right:8px;background:rgba(6,11,20,.88);border:1px solid var(--border);border-radius:5px;padding:5px 8px;z-index:5;font-family:'JetBrains Mono',monospace;font-size:9px;min-width:120px}\r\n.si-row{display:flex;justify-content:space-between;gap:6px;margin-bottom:1px}\r\n.si-label{color:var(--muted)}.si-val{color:var(--fg)}\r\n#modeBadge{display:none;padding:1px 6px;border-radius:3px;font-size:8px;font-weight:700;background:rgba(0,229,160,.12);color:var(--accent)}\r\n.vel-indicator{margin-top:6px;padding:6px;background:var(--bg3);border:1px solid var(--border);border-radius:4px}\r\n.vel-bar-wrap{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin:2px 0}\r\n.vel-bar{height:100%;border-radius:3px;transition:width .1s}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"app\">\r\n<header>\r\n  <div class=\"hdr-left\"><div class=\"logo\">B<\/div><span style=\"font-weight:700;font-size:12px\">Part\u00edcula en Campo Magn\u00e9tico<\/span><\/div>\r\n  <div class=\"hdr-center\">\r\n    <button class=\"btn btn-accent\" id=\"btnPlay\" onclick=\"togglePlay()\"><i class=\"fa-solid fa-play\"><\/i> <span>Iniciar<\/span><\/button>\r\n    <button class=\"btn\" id=\"btnStep\" onclick=\"stepOnce()\" title=\"Un paso\"><i class=\"fa-solid fa-forward-step\"><\/i><\/button>\r\n    <button class=\"btn\" onclick=\"resetSim()\"><i class=\"fa-solid fa-rotate-right\"><\/i> Reiniciar<\/button>\r\n    <div class=\"mode-sw\">\r\n      <button class=\"active\" id=\"modeFree\" onclick=\"setMode('free')\">Exploraci\u00f3n<\/button>\r\n      <button id=\"modeGuided\" onclick=\"setMode('guided')\">Actividad<\/button>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"hdr-right\">\r\n    <div class=\"mono\" style=\"font-size:10px\"><span style=\"color:var(--muted)\">t =<\/span> <span id=\"timeDisp\" style=\"color:var(--accent)\">0.000<\/span><\/div>\r\n    <div id=\"modeBadge\">GUIADA<\/div>\r\n  <\/div>\r\n<\/header>\r\n\r\n<div id=\"workspace\">\r\n<div id=\"leftPanel\">\r\n  <div class=\"sec\">\r\n    <div class=\"sec-t\">Part\u00edcula<\/div>\r\n    <div class=\"row\"><label>q<\/label><input type=\"range\" id=\"slQ\" min=\"-3\" max=\"3\" step=\"0.1\" value=\"1\"><span class=\"val\" id=\"vQ\">1.0<\/span><\/div>\r\n    <div class=\"row\"><label>m<\/label><input type=\"range\" id=\"slM\" min=\"0.1\" max=\"5\" step=\"0.1\" value=\"1\"><span class=\"val\" id=\"vM\">1.0<\/span><\/div>\r\n    <div id=\"qSign\" style=\"text-align:center;font-size:9px;font-weight:600;color:var(--red)\">q &gt; 0<\/div>\r\n  <\/div>\r\n  <div class=\"sec\">\r\n    <div class=\"sec-t\">Velocidad inicial<\/div>\r\n    <div class=\"row\"><label>vx\u2080<\/label><input type=\"range\" id=\"slVx\" min=\"-5\" max=\"5\" step=\"0.1\" value=\"2\"><span class=\"val\" id=\"vVx\">2.0<\/span><\/div>\r\n    <div class=\"row\"><label>vy\u2080<\/label><input type=\"range\" id=\"slVy\" min=\"-5\" max=\"5\" step=\"0.1\" value=\"0\"><span class=\"val\" id=\"vVy\">0.0<\/span><\/div>\r\n    <div class=\"row\"><label>vz\u2080<\/label><input type=\"range\" id=\"slVz\" min=\"-5\" max=\"5\" step=\"0.1\" value=\"0\"><span class=\"val\" id=\"vVz\">0.0<\/span><\/div>\r\n    <div style=\"font-size:8px;color:var(--muted);margin-top:1px\">Se aplican al reiniciar<\/div>\r\n  <\/div>\r\n  <div class=\"sec\">\r\n    <div class=\"sec-t\">Campo magn\u00e9tico B<\/div>\r\n    <div class=\"row\"><label>Bx<\/label><input type=\"range\" id=\"slBx\" min=\"-2\" max=\"2\" step=\"0.05\" value=\"0\"><span class=\"val\" id=\"vBx\">0.00<\/span><\/div>\r\n    <div class=\"row\"><label>By<\/label><input type=\"range\" id=\"slBy\" min=\"-2\" max=\"2\" step=\"0.05\" value=\"1\"><span class=\"val\" id=\"vBy\">1.00<\/span><\/div>\r\n    <div class=\"row\"><label>Bz<\/label><input type=\"range\" id=\"slBz\" min=\"-2\" max=\"2\" step=\"0.05\" value=\"0\"><span class=\"val\" id=\"vBz\">0.00<\/span><\/div>\r\n  <\/div>\r\n  <div class=\"sec\">\r\n    <div class=\"sec-t\">Simulaci\u00f3n<\/div>\r\n    <div class=\"row\"><label>Vel.<\/label><input type=\"range\" id=\"slSpeed\" min=\"0.1\" max=\"3\" step=\"0.1\" value=\"1\"><span class=\"val\" id=\"vSpeed\">1.0x<\/span><\/div>\r\n    <button style=\"width:100%;margin-top:3px;padding:4px;border-radius:4px;border:none;background:var(--orange);color:#fff;font-size:10px;font-weight:700;cursor:pointer;font-family:'Space Grotesk',sans-serif\" onclick=\"resetSim()\"><i class=\"fa-solid fa-check\" style=\"margin-right:3px\"><\/i>Aplicar y Reiniciar<\/button>\r\n  <\/div>\r\n  <div class=\"sec\">\r\n    <div class=\"sec-t\">Visualizaci\u00f3n<\/div>\r\n    <label class=\"chk-row\"><input type=\"checkbox\" id=\"chkVel\" checked> Velocidad v<\/label>\r\n    <label class=\"chk-row\"><input type=\"checkbox\" id=\"chkForce\" checked> Fuerza F<\/label>\r\n    <label class=\"chk-row\"><input type=\"checkbox\" id=\"chkBVec\" checked> Campo B<\/label>\r\n    <label class=\"chk-row\"><input type=\"checkbox\" id=\"chkVpar\"> v paralela a B<\/label>\r\n    <label class=\"chk-row\"><input type=\"checkbox\" id=\"chkVperp\"> v perpendicular a B<\/label>\r\n    <label class=\"chk-row\"><input type=\"checkbox\" id=\"chkTrail\" checked> Trayectoria<\/label>\r\n    <label class=\"chk-row\"><input type=\"checkbox\" id=\"chkAxes\" checked> Ejes<\/label>\r\n    <label class=\"chk-row\"><input type=\"checkbox\" id=\"chkBField\" checked> Campo B (flechas)<\/label>\r\n  <\/div>\r\n  <div class=\"sec\">\r\n    <div class=\"sec-t\">C\u00e1mara<\/div>\r\n    <div style=\"display:flex;gap:3px;flex-wrap:wrap\">\r\n      <button class=\"btn btn-sm\" onclick=\"setCam('free')\">Libre<\/button>\r\n      <button class=\"btn btn-sm\" onclick=\"setCam('top')\">XZ<\/button>\r\n      <button class=\"btn btn-sm\" onclick=\"setCam('front')\">XY<\/button>\r\n      <button class=\"btn btn-sm\" onclick=\"setCam('side')\">YZ<\/button>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"sec\">\r\n    <div class=\"sec-t\">Regla mano derecha<\/div>\r\n    <canvas id=\"rhrCanvas\" class=\"rhr-canvas\" width=\"210\" height=\"110\"><\/canvas>\r\n    <div style=\"font-size:7px;color:var(--muted);text-align:center;margin-top:1px\">v \u00d7 B \u2192 direcci\u00f3n de F (q &gt; 0)<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"centerPanel\">\r\n  <canvas id=\"threeCanvas\"><\/canvas>\r\n  <div class=\"vec-legend\">\r\n    <div><div class=\"dot\" style=\"background:var(--cyan)\"><\/div><span style=\"color:var(--cyan)\">v<\/span><\/div>\r\n    <div><div class=\"dot\" style=\"background:var(--magenta)\"><\/div><span style=\"color:var(--magenta)\">F = qv\u00d7B<\/span><\/div>\r\n    <div><div class=\"dot\" style=\"background:var(--lime)\"><\/div><span style=\"color:var(--lime)\">B<\/span><\/div>\r\n    <div><div class=\"dot\" style=\"background:var(--accent2)\"><\/div><span style=\"color:var(--accent2)\">v\u2225<\/span><\/div>\r\n    <div><div class=\"dot\" style=\"background:var(--blue)\"><\/div><span style=\"color:var(--blue)\">v\u22a5<\/span><\/div>\r\n  <\/div>\r\n  <div class=\"status-info\">\r\n    <div class=\"si-row\"><span class=\"si-label\">|v|<\/span><span class=\"si-val\" id=\"siV\">0.000<\/span><\/div>\r\n    <div class=\"si-row\"><span class=\"si-label\">|F|<\/span><span class=\"si-val\" id=\"siF\">0.000<\/span><\/div>\r\n    <div class=\"si-row\"><span class=\"si-label\">v\u2225<\/span><span class=\"si-val\" id=\"siVp\">0.000<\/span><\/div>\r\n    <div class=\"si-row\"><span class=\"si-label\">v\u22a5<\/span><span class=\"si-val\" id=\"siVt\">0.000<\/span><\/div>\r\n    <div class=\"si-row\"><span class=\"si-label\">r<\/span><span class=\"si-val\" id=\"siR\">\u2014<\/span><\/div>\r\n    <div class=\"si-row\"><span class=\"si-label\">T<\/span><span class=\"si-val\" id=\"siT\">\u2014<\/span><\/div>\r\n    <div class=\"si-row\"><span class=\"si-label\">Ek<\/span><span class=\"si-val\" id=\"siKE\">0.000<\/span><\/div>\r\n  <\/div>\r\n  <div class=\"view-btns\">\r\n    <button class=\"btn btn-sm\" onclick=\"setCam('free')\"><i class=\"fa-solid fa-video\"><\/i><\/button>\r\n    <button class=\"btn btn-sm\" onclick=\"setCam('top')\">XZ<\/button>\r\n    <button class=\"btn btn-sm\" onclick=\"setCam('front')\">XY<\/button>\r\n    <button class=\"btn btn-sm\" onclick=\"setCam('side')\">YZ<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div id=\"rightPanel\">\r\n  <div class=\"tab-bar\">\r\n    <button class=\"active\" onclick=\"setTab('data',this)\">Datos y Medici\u00f3n<\/button>\r\n    <button onclick=\"setTab('guide',this)\">Actividad Guiada<\/button>\r\n  <\/div>\r\n  <div id=\"tabData\" class=\"tab-content active\">\r\n    <div class=\"meas-box\">\r\n      <div class=\"mt\"><i class=\"fa-solid fa-ruler-combined\" style=\"margin-right:2px\"><\/i>Mediciones<\/div>\r\n      <div class=\"meas-row\"><span>Radio (te\u00f3rico)<\/span><span id=\"measR\">\u2014<\/span><\/div>\r\n      <div class=\"meas-row\"><span>Per\u00edodo (te\u00f3rico)<\/span><span id=\"measT\">\u2014<\/span><\/div>\r\n      <div class=\"meas-row\"><span>|v| inicial<\/span><span id=\"measV0\">\u2014<\/span><\/div>\r\n      <div class=\"meas-row\"><span>|v| actual<\/span><span id=\"measVnow\">\u2014<\/span><\/div>\r\n      <div class=\"meas-row\"><span>\u0394|v| \/ |v\u2080|<\/span><span id=\"measDv\">\u2014<\/span><\/div>\r\n      <div class=\"meas-row\"><span>Ek inicial<\/span><span id=\"measKE0\">\u2014<\/span><\/div>\r\n      <div class=\"meas-row\"><span>Ek actual<\/span><span id=\"measKEnow\">\u2014<\/span><\/div>\r\n      <div class=\"meas-row\"><span>\u0394Ek \/ Ek\u2080<\/span><span id=\"measDke\">\u2014<\/span><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"vel-indicator\">\r\n      <div style=\"font-size:8px;font-weight:700;color:var(--magenta);margin-bottom:2px\">|F| \/ |F_m\u00e1x|<\/div>\r\n      <div class=\"vel-bar-wrap\"><div class=\"vel-bar\" id=\"fBar\" style=\"width:0%;background:var(--magenta)\"><\/div><\/div>\r\n      <div style=\"font-size:8px;font-weight:700;color:var(--cyan);margin-top:3px;margin-bottom:2px\">|v| \/ |v\u2080|<\/div>\r\n      <div class=\"vel-bar-wrap\"><div class=\"vel-bar\" id=\"vBar\" style=\"width:100%;background:var(--cyan)\"><\/div><\/div>\r\n    <\/div>\r\n\r\n    <div style=\"display:flex;gap:3px;margin-bottom:5px;margin-top:4px\">\r\n      <button class=\"btn btn-sm\" onclick=\"clearData()\"><i class=\"fa-solid fa-trash\"><\/i> Limpiar<\/button>\r\n      <button class=\"btn btn-sm\" onclick=\"exportCSV()\"><i class=\"fa-solid fa-download\"><\/i> CSV<\/button>\r\n      <label class=\"chk-row\" style=\"margin:0\"><input type=\"checkbox\" id=\"chkRecord\" checked style=\"accent-color:var(--accent)\"> Registrar<\/label>\r\n    <\/div>\r\n    <div style=\"flex:1;min-height:0;overflow-y:auto;border:1px solid var(--border);border-radius:3px;max-height:300px\">\r\n      <table class=\"data-tbl\">\r\n        <thead><tr><th>t<\/th><th>x<\/th><th>y<\/th><th>z<\/th><th>vx<\/th><th>vy<\/th><th>vz<\/th><\/tr><\/thead>\r\n        <tbody id=\"dataBody\"><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n  <\/div>\r\n  <div id=\"tabGuide\" class=\"tab-content\">\r\n    <div style=\"font-size:9px;color:var(--muted);margin-bottom:6px\">Explor\u00e1 las consignas. Us\u00e1 las pistas solo si las necesit\u00e1s.<\/div>\r\n    <div class=\"guide-act\" id=\"ga1\"><div class=\"guide-head\" onclick=\"tgGuide('ga1')\"><span style=\"color:var(--cyan)\"><i class=\"fa-solid fa-circle-notch\" style=\"margin-right:3px\"><\/i>1: Trayectoria circular<\/span><i class=\"fa-solid fa-chevron-down g-chev\"><\/i><\/div><div class=\"guide-body\"><div class=\"task\">Ajust\u00e1 los par\u00e1metros para obtener una <strong>trayectoria circular<\/strong>.<\/div><button class=\"hint-btn\" onclick=\"tgHint('h1')\">Pista 1<\/button><div class=\"hint-text\" id=\"h1\">\u00bfQu\u00e9 componente de v debe ser cero para que no haya avance helicoidal?<\/div><button class=\"hint-btn\" onclick=\"tgHint('h1b')\" style=\"margin-top:3px\">Pista 2<\/button><div class=\"hint-text\" id=\"h1b\">v debe ser \u22a5 a B. Si B = (0,1,0), prob\u00e1 vy\u2080 = 0.<\/div><\/div><\/div>\r\n    <div class=\"guide-act\" id=\"ga2\"><div class=\"guide-head\" onclick=\"tgGuide('ga2')\"><span style=\"color:var(--magenta)\"><i class=\"fa-solid fa-tornado\" style=\"margin-right:3px\"><\/i>2: Trayectoria helicoidal<\/span><i class=\"fa-solid fa-chevron-down g-chev\"><\/i><\/div><div class=\"guide-body\"><div class=\"task\">Obten\u00e9 una <strong>trayectoria helicoidal<\/strong>.<\/div><button class=\"hint-btn\" onclick=\"tgHint('h2')\">Pista<\/button><div class=\"hint-text\" id=\"h2\">Necesit\u00e1s v con componente \u2225 a B. Si B = (0,1,0), prob\u00e1 vy\u2080 \u2260 0.<\/div><\/div><\/div>\r\n    <div class=\"guide-act\" id=\"ga3\"><div class=\"guide-head\" onclick=\"tgGuide('ga3')\"><span style=\"color:var(--orange)\"><i class=\"fa-solid fa-bolt\" style=\"margin-right:3px\"><\/i>3: Fuerza m\u00e1x. y nula<\/span><i class=\"fa-solid fa-chevron-down g-chev\"><\/i><\/div><div class=\"guide-body\"><div class=\"task\">\u00bfCu\u00e1ndo es <strong>m\u00e1xima<\/strong> F? \u00bfCu\u00e1ndo es <strong>nula<\/strong>?<\/div><button class=\"hint-btn\" onclick=\"tgHint('h3')\">Pista<\/button><div class=\"hint-text\" id=\"h3\">F = qv\u00d7B. \u00bfQu\u00e9 pasa si v \u2225 B? \u00bfY si v \u22a5 B? Observ\u00e1 la barra de |F|.<\/div><\/div><\/div>\r\n    <div class=\"guide-act\" id=\"ga4\"><div class=\"guide-head\" onclick=\"tgGuide('ga4')\"><span style=\"color:var(--lime)\"><i class=\"fa-solid fa-arrows-left-right\" style=\"margin-right:3px\"><\/i>4: \u00bfQu\u00e9 cambia y qu\u00e9 no?<\/span><i class=\"fa-solid fa-chevron-down g-chev\"><\/i><\/div><div class=\"guide-body\"><div class=\"task\">\u00bfCambia |v|? \u00bfY Ek? \u00bfY la direcci\u00f3n de v?<\/div><button class=\"hint-btn\" onclick=\"tgHint('h4')\">Pista<\/button><div class=\"hint-text\" id=\"h4\">Mir\u00e1 \u0394|v|\/|v\u2080| en mediciones. F siempre \u22a5 v \u2192 \u00bfqu\u00e9 trabajo hace?<\/div><\/div><\/div>\r\n    <div class=\"guide-act\" id=\"ga5\"><div class=\"guide-head\" onclick=\"tgGuide('ga5')\"><span style=\"color:var(--accent2)\"><i class=\"fa-solid fa-calculator\" style=\"margin-right:3px\"><\/i>5: Radio de la \u00f3rbita<\/span><i class=\"fa-solid fa-chevron-down g-chev\"><\/i><\/div><div class=\"guide-body\"><div class=\"task\">Verific\u00e1 que r = mv\u22a5\/(|q|B). Cambi\u00e1 m, v\u22a5, q y B por separado.<\/div><button class=\"hint-btn\" onclick=\"tgHint('h5')\">Pista<\/button><div class=\"hint-text\" id=\"h5\">Dobl\u00e1 m \u2192 r se duplica. Dobl\u00e1 |q| \u2192 r se reduce a la mitad.<\/div><\/div><\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<script type=\"importmap\">\r\n{\"imports\":{\"three\":\"https:\/\/unpkg.com\/three@0.160.0\/build\/three.module.js\",\"three\/addons\/\":\"https:\/\/unpkg.com\/three@0.160.0\/examples\/jsm\/\"}}\r\n<\/script>\r\n<script type=\"module\">\r\nimport*as THREE from'three';\r\nimport{OrbitControls}from'three\/addons\/controls\/OrbitControls.js';\r\n\r\n\/\/ === ESTADO ===\r\nconst SIM_DT=0.002,MAX_TRAIL=12000,MAX_DATA=6000;\r\nconst P={q:1,m:1,vx0:2,vy0:0,vz0:0,Bx:0,By:1,Bz:0,x:0,y:0,z:0,vx:2,vy:0,vz:0,Fx:0,Fy:0,Fz:0,t:0,vpar:0,vperp:0,trail:[],data:[],running:false,speed:1,mode:'free',v0mag:2};\r\n\r\nfunction resetState(){\r\n  P.x=0;P.y=0;P.z=0;P.vx=P.vx0;P.vy=P.vy0;P.vz=P.vz0;P.Fx=0;P.Fy=0;P.Fz=0;P.t=0;P.trail=[];P.data=[];\r\n  P.v0mag=Math.sqrt(P.vx0*P.vx0+P.vy0*P.vy0+P.vz0*P.vz0);\r\n  compF();\r\n}\r\n\r\n\/\/ === F\u00cdSICA ===\r\nfunction Bvec(){return new THREE.Vector3(P.Bx,P.By,P.Bz);}\r\nfunction compF(){\r\n  const v=new THREE.Vector3(P.vx,P.vy,P.vz),B=Bvec(),Bm=B.length();\r\n  const f=new THREE.Vector3().crossVectors(v,B).multiplyScalar(P.q);\r\n  P.Fx=f.x;P.Fy=f.y;P.Fz=f.z;\r\n  if(Bm>1e-10){const bh=B.clone().normalize();P.vpar=v.dot(bh);P.vperp=v.clone().sub(bh.multiplyScalar(P.vpar)).length();}\r\n  else{P.vpar=0;P.vperp=Math.sqrt(P.vx*P.vx+P.vy*P.vy+P.vz*P.vz);}\r\n}\r\nfunction acc(vx,vy,vz){\r\n  const v=new THREE.Vector3(vx,vy,vz),B=Bvec(),f=new THREE.Vector3().crossVectors(v,B).multiplyScalar(P.q);\r\n  const mm=Math.max(Math.abs(P.m),1e-10);return[f.x\/mm,f.y\/mm,f.z\/mm];\r\n}\r\nfunction rk4(dt){\r\n  const vx=P.vx,vy=P.vy,vz=P.vz;\r\n  const a1=acc(vx,vy,vz),a2=acc(vx+a1[0]*dt*.5,vy+a1[1]*dt*.5,vz+a1[2]*dt*.5);\r\n  const a3=acc(vx+a2[0]*dt*.5,vy+a2[1]*dt*.5,vz+a2[2]*dt*.5),a4=acc(vx+a3[0]*dt,vy+a3[1]*dt,vz+a3[2]*dt);\r\n  P.vx+=(a1[0]+2*a2[0]+2*a3[0]+a4[0])*dt\/6;P.vy+=(a1[1]+2*a2[1]+2*a3[1]+a4[1])*dt\/6;P.vz+=(a1[2]+2*a2[2]+2*a3[2]+a4[2])*dt\/6;\r\n  P.x+=vx*dt+(a1[0]+a2[0]+a3[0])*dt*dt\/6;P.y+=vy*dt+(a1[1]+a2[1]+a3[1])*dt*dt\/6;P.z+=vz*dt+(a1[2]+a2[2]+a3[2])*dt*dt\/6;\r\n  P.t+=dt;compF();\r\n}\r\nfunction stepPhysics(rdt){\r\n  if(!P.running)return;let pt=rdt*P.speed,st=Math.max(1,Math.ceil(pt\/SIM_DT));st=Math.min(st,2000);const dt=pt\/st;\r\n  for(let i=0;i<st;i++){rk4(dt);\r\n    if(i%4===0){P.trail.push(P.x,P.y,P.z);if(P.trail.length>MAX_TRAIL*3)P.trail.splice(0,3);}\r\n    if(i%25===0&&document.getElementById('chkRecord').checked){P.data.push({t:P.t,x:P.x,y:P.y,z:P.z,vx:P.vx,vy:P.vy,vz:P.vz});if(P.data.length>MAX_DATA)P.data.shift();}\r\n  }\r\n}\r\n\r\n\/\/ === THREE.JS ===\r\nconst canvas=document.getElementById('threeCanvas');\r\nconst renderer=new THREE.WebGLRenderer({canvas,antialias:true});\r\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio,2));renderer.setClearColor(0x060b14);\r\nconst scene=new THREE.Scene();scene.fog=new THREE.FogExp2(0x060b14,0.01);\r\nconst camera=new THREE.PerspectiveCamera(50,1,0.1,500);camera.position.set(8,6,8);\r\nconst controls=new OrbitControls(camera,canvas);controls.enableDamping=true;controls.dampingFactor=0.08;\r\nscene.add(new THREE.AmbientLight(0x404060,0.6));const dL=new THREE.DirectionalLight(0xffffff,0.8);dL.position.set(5,10,5);scene.add(dL);\r\n\r\n\/\/ Grilla y ejes\r\nconst grid=new THREE.GridHelper(30,30,0x1e293b,0x131b2e);scene.add(grid);\r\nfunction mkAx(d,c,l){const m=new THREE.LineBasicMaterial({color:c});const g=new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0,0,0),d.clone().multiplyScalar(l)]);return new THREE.Line(g,m);}\r\nscene.add(mkAx(new THREE.Vector3(1,0,0),0xff4444,15));scene.add(mkAx(new THREE.Vector3(0,1,0),0x44ff44,15));scene.add(mkAx(new THREE.Vector3(0,0,1),0x4488ff,15));\r\nfunction mkLbl(t,p,c){const cv=document.createElement('canvas');cv.width=64;cv.height=32;const x=cv.getContext('2d');x.font='bold 24px JetBrains Mono';x.fillStyle=c;x.textAlign='center';x.textBaseline='middle';x.fillText(t,32,16);const tx=new THREE.CanvasTexture(cv);const sp=new THREE.Sprite(new THREE.SpriteMaterial({map:tx,transparent:true}));sp.position.copy(p);sp.scale.set(1,.5,1);return sp;}\r\nscene.add(mkLbl('X',new THREE.Vector3(15.5,0,0),'#ff4444'));scene.add(mkLbl('Y',new THREE.Vector3(0,15.5,0),'#44ff44'));scene.add(mkLbl('Z',new THREE.Vector3(0,0,15.5),'#4488ff'));\r\n\r\n\/\/ Part\u00edcula\r\nconst pGeom=new THREE.SphereGeometry(0.2,16,16);\r\nconst pMat=new THREE.MeshStandardMaterial({color:0xef4444,emissive:0xef4444,emissiveIntensity:0.5,roughness:0.3,metalness:0.5});\r\nconst pMesh=new THREE.Mesh(pGeom,pMat);scene.add(pMesh);\r\nconst glGeom=new THREE.SphereGeometry(0.5,16,16);const glMat=new THREE.MeshBasicMaterial({color:0xef4444,transparent:true,opacity:0.12});const glMesh=new THREE.Mesh(glGeom,glMat);scene.add(glMesh);\r\n\r\n\/\/ Trail\r\nconst trGeom=new THREE.BufferGeometry();const trArr=new Float32Array(MAX_TRAIL*3);trGeom.setAttribute('position',new THREE.BufferAttribute(trArr,3));trGeom.setDrawRange(0,0);\r\nconst trMat=new THREE.LineBasicMaterial({color:0xef4444,transparent:true,opacity:0.65});const trLine=new THREE.Line(trGeom,trMat);scene.add(trLine);\r\n\r\n\/\/ Vectores\r\nlet vecG=new THREE.Group();scene.add(vecG);\r\nfunction clrVecs(){while(vecG.children.length)vecG.remove(vecG.children[0]);}\r\nfunction addArr(o,d,l,c,hl){if(l<0.01)return;const dd=d.clone().normalize();vecG.add(new THREE.ArrowHelper(dd,o,l,c,Math.min(hl||0.3,l*.25),0.12));}\r\n\r\n\/\/ B field arrows\r\nlet bfG=new THREE.Group();scene.add(bfG);\r\nfunction updBF(){\r\n  while(bfG.children.length)bfG.remove(bfG.children[0]);\r\n  if(!document.getElementById('chkBField').checked)return;\r\n  const B=Bvec(),Bm=B.length();if(Bm<0.01)return;\r\n  const bh=B.clone().normalize(),sp=3,rng=6,al=Math.min(Bm\/2,1)*0.2,col=new THREE.Color(0x76ff03);\r\n  for(let gx=-rng;gx<=rng;gx+=sp)for(let gy=0;gy<=rng;gy+=sp)for(let gz=-rng;gz<=rng;gz+=sp){\r\n    const a=new THREE.ArrowHelper(bh,new THREE.Vector3(gx,gy,gz),1.2,col,0.2,0.08);\r\n    a.line.material.transparent=true;a.line.material.opacity=al;a.cone.material.transparent=true;a.cone.material.opacity=al;bfG.add(a);\r\n  }\r\n}\r\n\r\nfunction updateScene(){\r\n  pMesh.position.set(P.x,P.y,P.z);glMesh.position.set(P.x,P.y,P.z);\r\n  const isP=P.q>=0,pc=isP?0xef4444:0x38bdf8;\r\n  pMat.color.setHex(pc);pMat.emissive.setHex(pc);glMat.color.setHex(pc);trMat.color.setHex(pc);\r\n  const n=P.trail.length\/3;\r\n  for(let i=0;i<n;i++){trArr[i*3]=P.trail[i*3];trArr[i*3+1]=P.trail[i*3+1];trArr[i*3+2]=P.trail[i*3+2];}\r\n  trGeom.attributes.position.needsUpdate=true;trGeom.setDrawRange(0,n);\r\n  clrVecs();const o=new THREE.Vector3(P.x,P.y,P.z);const vs=1.5,fs=1.5;\r\n  if(document.getElementById('chkVel').checked){const vl=Math.sqrt(P.vx*P.vx+P.vy*P.vy+P.vz*P.vz);if(vl>0.01)addArr(o,new THREE.Vector3(P.vx,P.vy,P.vz),vl*vs,0x00e5ff,0.3);}\r\n  if(document.getElementById('chkForce').checked){const fl=Math.sqrt(P.Fx*P.Fx+P.Fy*P.Fy+P.Fz*P.Fz);if(fl>1e-6)addArr(o,new THREE.Vector3(P.Fx,P.Fy,P.Fz),fl*fs,0xe040fb,0.25);}\r\n  if(document.getElementById('chkBVec').checked){const Bm=Bvec().length();if(Bm>0.01)addArr(o,Bvec().normalize(),Bm*2,0x76ff03,0.25);}\r\n  const Bm2=Bvec().length();\r\n  if(Bm2>1e-6){\r\n    const bh=Bvec().normalize();\r\n    if(document.getElementById('chkVpar').checked&&Math.abs(P.vpar)>0.01){const vp=bh.clone().multiplyScalar(P.vpar);addArr(o,vp.clone().normalize(),Math.abs(P.vpar)*vs,0xf59e0b,0.2);}\r\n    if(document.getElementById('chkVperp').checked&&P.vperp>0.01){const bh2=Bvec().normalize();const vpv=bh2.multiplyScalar(P.vpar);const vtv=new THREE.Vector3(P.vx,P.vy,P.vz).sub(vpv);if(vtv.length()>0.01)addArr(o,vtv.normalize(),P.vperp*vs,0x38bdf8,0.2);}\r\n  }\r\n  grid.visible=document.getElementById('chkAxes').checked;trLine.visible=document.getElementById('chkTrail').checked;\r\n}\r\n\r\n\/\/ === UI ===\r\nfunction togglePlay(){P.running=!P.running;const b=document.getElementById('btnPlay');b.innerHTML=P.running?'<i class=\"fa-solid fa-pause\"><\/i> <span>Pausar<\/span>':'<i class=\"fa-solid fa-play\"><\/i> <span>Iniciar<\/span>';b.className=P.running?'btn btn-warn':'btn btn-accent';}\r\nwindow.togglePlay=togglePlay;\r\nfunction stepOnce(){if(P.running)return;rk4(SIM_DT*5);P.trail.push(P.x,P.y,P.z);P.data.push({t:P.t,x:P.x,y:P.y,z:P.z,vx:P.vx,vy:P.vy,vz:P.vz});updateScene();updateUI();}\r\nwindow.stepOnce=stepOnce;\r\nfunction resetSim(){\r\n  P.q=parseFloat(document.getElementById('slQ').value);P.m=parseFloat(document.getElementById('slM').value);\r\n  P.vx0=parseFloat(document.getElementById('slVx').value);P.vy0=parseFloat(document.getElementById('slVy').value);P.vz0=parseFloat(document.getElementById('slVz').value);\r\n  P.Bx=parseFloat(document.getElementById('slBx').value);P.By=parseFloat(document.getElementById('slBy').value);P.Bz=parseFloat(document.getElementById('slBz').value);\r\n  P.running=false;resetState();trArr.fill(0);trGeom.setDrawRange(0,0);updBF();updateScene();updateUI();\r\n  document.getElementById('btnPlay').innerHTML='<i class=\"fa-solid fa-play\"><\/i> <span>Iniciar<\/span>';document.getElementById('btnPlay').className='btn btn-accent';\r\n}\r\nwindow.resetSim=resetSim;\r\nfunction setMode(m){P.mode=m;document.getElementById('modeFree').className=m==='free'?'active':'';document.getElementById('modeGuided').className=m==='guided'?'active':'';document.getElementById('modeBadge').style.display=m==='guided'?'inline-block':'none';if(m==='guided')setTab('guide',document.querySelectorAll('.tab-bar button')[1]);}\r\nwindow.setMode=setMode;\r\nfunction setTab(n,el){document.querySelectorAll('.tab-bar button').forEach(b=>b.classList.remove('active'));el.classList.add('active');document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));document.getElementById('tab'+n.charAt(0).toUpperCase()+n.slice(1)).classList.add('active');}\r\nwindow.setTab=setTab;\r\nfunction setCam(v){if(v==='top'){camera.position.set(0,20,.01);controls.target.set(0,0,0);}if(v==='front'){camera.position.set(0,2,20);controls.target.set(0,2,0);}if(v==='side'){camera.position.set(20,2,0);controls.target.set(0,2,0);}if(v==='free'){camera.position.set(8,6,8);controls.target.set(0,0,0);}controls.update();}\r\nwindow.setCam=setCam;\r\nfunction tgGuide(id){document.getElementById(id).classList.toggle('open');}\r\nwindow.tgGuide=tgGuide;\r\nfunction tgHint(id){document.getElementById(id).classList.toggle('show');}\r\nwindow.tgHint=tgHint;\r\nfunction clearData(){P.data=[];updTable();}\r\nwindow.clearData=clearData;\r\nfunction exportCSV(){let c='t,x,y,z,vx,vy,vz\\n';P.data.forEach(d=>{c+=d.t.toFixed(4)+','+d.x.toFixed(4)+','+d.y.toFixed(4)+','+d.z.toFixed(4)+','+d.vx.toFixed(4)+','+d.vy.toFixed(4)+','+d.vz.toFixed(4)+'\\n';});const b=new Blob([c],{type:'text\/csv'});const a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='datos_simulacion.csv';a.click();}\r\nwindow.exportCSV=exportCSV;\r\n\r\n\/\/ Sliders\r\nconst sMap={slQ:'q',slM:'m',slVx:'vx0',slVy:'vy0',slVz:'vz0',slBx:'Bx',slBy:'By',slBz:'Bz',slSpeed:'speed'};\r\nconst fmtMap={q:v=>v.toFixed(1),m:v=>v.toFixed(1),vx0:v=>v.toFixed(1),vy0:v=>v.toFixed(1),vz0:v=>v.toFixed(1),Bx:v=>v.toFixed(2),By:v=>v.toFixed(2),Bz:v=>v.toFixed(2),speed:v=>v.toFixed(1)+'x'};\r\nObject.keys(sMap).forEach(id=>{\r\n  const sl=document.getElementById(id),vl=document.getElementById('v'+id.slice(2));\r\n  sl.addEventListener('input',()=>{P[sMap[id]]=parseFloat(sl.value);vl.textContent=fmtMap[sMap[id]](P[sMap[id]]);});\r\n});\r\n['slBx','slBy','slBz'].forEach(id=>{document.getElementById(id).addEventListener('input',()=>updBF());});\r\n\r\nfunction updateUI(){\r\n  const v=Math.sqrt(P.vx*P.vx+P.vy*P.vy+P.vz*P.vz);\r\n  const f=Math.sqrt(P.Fx*P.Fx+P.Fy*P.Fy+P.Fz*P.Fz);\r\n  const mm=Math.max(Math.abs(P.m),1e-10);const Bm=Bvec().length();\r\n  document.getElementById('siV').textContent=v.toFixed(3);document.getElementById('siF').textContent=f.toFixed(4);\r\n  document.getElementById('siVp').textContent=P.vpar.toFixed(3);document.getElementById('siVt').textContent=P.vperp.toFixed(3);\r\n  document.getElementById('siKE').textContent=(.5*mm*v*v).toFixed(3);document.getElementById('timeDisp').textContent=P.t.toFixed(3);\r\n  if(Bm>1e-6&&P.vperp>1e-3&&Math.abs(P.q)>1e-6){\r\n    const r=mm*P.vperp\/(Math.abs(P.q)*Bm);const T=2*Math.PI*mm\/(Math.abs(P.q)*Bm);\r\n    document.getElementById('siR').textContent=r.toFixed(3);document.getElementById('measR').textContent=r.toFixed(3);\r\n    document.getElementById('siT').textContent=T.toFixed(3);document.getElementById('measT').textContent=T.toFixed(3);\r\n  }else{document.getElementById('siR').textContent='\u2014';document.getElementById('measR').textContent='\u2014';document.getElementById('siT').textContent='\u2014';document.getElementById('measT').textContent='\u2014';}\r\n  \/\/ Mediciones comparativas\r\n  const v0=P.v0mag||0.001;\r\n  document.getElementById('measV0').textContent=v0.toFixed(3);document.getElementById('measVnow').textContent=v.toFixed(3);\r\n  const dv=v0>0.001?((v-v0)\/v0*100).toFixed(2)+'%':'\u2014';document.getElementById('measDv').textContent=dv;\r\n  const ke0=.5*mm*v0*v0,ken=.5*mm*v*v;\r\n  document.getElementById('measKE0').textContent=ke0.toFixed(3);document.getElementById('measKEnow').textContent=ken.toFixed(3);\r\n  const dke=ke0>1e-6?((ken-ke0)\/ke0*100).toFixed(2)+'%':'\u2014';document.getElementById('measDke').textContent=dke;\r\n  \/\/ Barras\r\n  const fMax=Math.abs(P.q)*v*Bm;if(fMax>1e-6){document.getElementById('fBar').style.width=Math.min(f\/fMax*100,100)+'%';}else{document.getElementById('fBar').style.width='0%';}\r\n  document.getElementById('vBar').style.width=v0>0.001?Math.min(v\/v0*100,150)+'%':'100%';\r\n  \/\/ Signo\r\n  const qs=document.getElementById('qSign');if(P.q>0.01){qs.innerHTML='q &gt; 0';qs.style.color='var(--red)';}else if(P.q<-0.01){qs.innerHTML='q &lt; 0';qs.style.color='var(--blue)';}else{qs.innerHTML='q = 0';qs.style.color='var(--muted)';}\r\n}\r\nfunction updTable(){\r\n  const tb=document.getElementById('dataBody');let h='';const s=Math.max(0,P.data.length-50);\r\n  for(let i=s;i<P.data.length;i++){const d=P.data[i];h+=`<tr><td>${d.t.toFixed(2)}<\/td><td>${d.x.toFixed(2)}<\/td><td>${d.y.toFixed(2)}<\/td><td>${d.z.toFixed(2)}<\/td><td>${d.vx.toFixed(2)}<\/td><td>${d.vy.toFixed(2)}<\/td><td>${d.vz.toFixed(2)}<\/td><\/tr>`;}\r\n  tb.innerHTML=h;\r\n}\r\n\r\n\/\/ Regla mano derecha\r\nfunction drawRHR(){\r\n  const c=document.getElementById('rhrCanvas'),x=c.getContext('2d'),w=c.width,h=c.height;\r\n  x.fillStyle='#141d2f';x.fillRect(0,0,w,h);const cx=w\/2,cy=h\/2+8;\r\n  x.strokeStyle='rgba(255,255,255,0.15)';x.lineWidth=1;\r\n  x.beginPath();x.moveTo(cx,cy);x.lineTo(cx+65,cy);x.stroke();\r\n  x.beginPath();x.moveTo(cx,cy);x.lineTo(cx,cy-55);x.stroke();\r\n  x.beginPath();x.moveTo(cx,cy);x.lineTo(cx-35,cy+30);x.stroke();\r\n  x.strokeStyle='#00e5ff';x.lineWidth=2;x.beginPath();x.moveTo(cx,cy);x.lineTo(cx+50,cy);x.stroke();x.fillStyle='#00e5ff';x.font='bold 10px JetBrains Mono';x.fillText('v',cx+53,cy-3);\r\n  x.strokeStyle='#76ff03';x.lineWidth=2;x.beginPath();x.moveTo(cx,cy);x.lineTo(cx,cy-45);x.stroke();x.fillStyle='#76ff03';x.fillText('B',cx+4,cy-47);\r\n  x.fillStyle='#e040fb';x.beginPath();x.arc(cx+22,cy-18,3.5,0,6.283);x.fill();\r\n  x.strokeStyle='rgba(224,64,251,.4)';x.lineWidth=.7;x.beginPath();x.arc(cx+22,cy-18,7,0,6.283);x.stroke();\r\n  x.fillStyle='#e040fb';x.font='bold 10px JetBrains Mono';x.fillText('F',cx+31,cy-14);\r\n  x.fillStyle='rgba(255,255,255,.25)';x.font='8px Space Grotesk';x.fillText('mano derecha',cx-28,cy+32);\r\n}\r\n\r\n\/\/ Resize\r\nfunction onResize(){const c=document.getElementById('centerPanel');renderer.setSize(c.clientWidth,c.clientHeight);camera.aspect=c.clientWidth\/c.clientHeight;camera.updateProjectionMatrix();}\r\nwindow.addEventListener('resize',onResize);\r\n\r\n\/\/ Loop\r\nlet fc=0;\r\nfunction animate(){requestAnimationFrame(animate);stepPhysics(1\/60);updateScene();controls.update();renderer.render(scene,camera);fc++;if(fc%10===0){updateUI();updTable();}}\r\n\r\nfunction init(){onResize();resetState();updBF();updateScene();updateUI();drawRHR();animate();}\r\ninit();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Laboratorio Virtual: Part\u00edcula en Campo Magn\u00e9tico BPart\u00edcula en Campo Magn\u00e9tico Iniciar Reiniciar Exploraci\u00f3n Actividad t = 0.000 GUIADA Part\u00edcula q1.0 m1.0 q &gt; 0 Velocidad&hellip;<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-7311","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>carga_campo_magnetico_circular - F\u00edsica 2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/carga_campo_magnetico_circular\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"carga_campo_magnetico_circular - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Laboratorio Virtual: Part\u00edcula en Campo Magn\u00e9tico BPart\u00edcula en Campo Magn\u00e9tico Iniciar Reiniciar Exploraci\u00f3n Actividad t = 0.000 GUIADA Part\u00edcula q1.0 m1.0 q &gt; 0 Velocidad&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/carga_campo_magnetico_circular\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-02T23:43:37+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/carga_campo_magnetico_circular\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/carga_campo_magnetico_circular\\\/\",\"name\":\"carga_campo_magnetico_circular - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\"},\"datePublished\":\"2026-05-02T00:10:36+00:00\",\"dateModified\":\"2026-05-02T23:43:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/carga_campo_magnetico_circular\\\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/carga_campo_magnetico_circular\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/carga_campo_magnetico_circular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"carga_campo_magnetico_circular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"name\":\"F\u00edsica 2\",\"description\":\"FICA - UNSL\",\"publisher\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\",\"name\":\"SAC- Secretar\u00eda General FICA\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"contentUrl\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"width\":4483,\"height\":1231,\"caption\":\"SAC- Secretar\u00eda General FICA\"},\"image\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"carga_campo_magnetico_circular - F\u00edsica 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/carga_campo_magnetico_circular\/","og_locale":"es_ES","og_type":"article","og_title":"carga_campo_magnetico_circular - F\u00edsica 2","og_description":"Laboratorio Virtual: Part\u00edcula en Campo Magn\u00e9tico BPart\u00edcula en Campo Magn\u00e9tico Iniciar Reiniciar Exploraci\u00f3n Actividad t = 0.000 GUIADA Part\u00edcula q1.0 m1.0 q &gt; 0 Velocidad&hellip;","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/carga_campo_magnetico_circular\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-05-02T23:43:37+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/carga_campo_magnetico_circular\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/carga_campo_magnetico_circular\/","name":"carga_campo_magnetico_circular - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-05-02T00:10:36+00:00","dateModified":"2026-05-02T23:43:37+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/carga_campo_magnetico_circular\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/carga_campo_magnetico_circular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/carga_campo_magnetico_circular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"carga_campo_magnetico_circular"}]},{"@type":"WebSite","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","name":"F\u00edsica 2","description":"FICA - UNSL","publisher":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-AR"},{"@type":"Organization","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization","name":"SAC- Secretar\u00eda General FICA","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","logo":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","contentUrl":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","width":4483,"height":1231,"caption":"SAC- Secretar\u00eda General FICA"},"image":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/7311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/comments?post=7311"}],"version-history":[{"count":7,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/7311\/revisions"}],"predecessor-version":[{"id":7353,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/7311\/revisions\/7353"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=7311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}