{"id":7300,"date":"2026-04-30T11:42:09","date_gmt":"2026-04-30T14:42:09","guid":{"rendered":"https:\/\/fisica2.fica.unsl.edu.ar\/?page_id=7300"},"modified":"2026-05-05T19:50:30","modified_gmt":"2026-05-05T22:50:30","slug":"selector_velocidades_fuerza_lorentz","status":"publish","type":"page","link":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/selector_velocidades_fuerza_lorentz\/","title":{"rendered":"selector_velocidades_fuerza_lorentz"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Simulador: Part\u00edcula Cargada en Campos E y B<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@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 {\r\n --bg-primary: #050a14; --bg-secondary: #0c1525; --bg-tertiary: #141d2f;\r\n --accent-cyan: #00ffcc; --accent-orange: #ff6b35; --accent-yellow: #eab308;\r\n --accent-green: #22c55e; --accent-magenta: #d946ef;\r\n --text-primary: #f1f5f9; --text-secondary: #94a3b8; --border: #1e293b;\r\n }\r\n \/* Scroll natural: min-height + overflow-y auto *\/\r\n body { font-family:'Space Grotesk',sans-serif; background:var(--bg-primary); color:var(--text-primary); overflow-y:auto; min-height:100vh; }\r\n .font-mono { font-family:'JetBrains Mono',monospace; }\r\n .canvas-container { position:relative; background:var(--bg-primary); border:1px solid var(--border); box-shadow:inset 0 0 50px rgba(0,0,0,0.5); width:100%; height:100%; }\r\n input[type=\"number\"] { background:var(--bg-tertiary)!important; border:1px solid var(--border); color:var(--text-primary)!important; padding:5px 7px; border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:11px; width:100%; transition:border-color 0.2s; }\r\n input[type=\"number\"]:focus { outline:none; border-color:var(--accent-cyan); }\r\n input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0px 1000px var(--bg-tertiary) inset!important; -webkit-text-fill-color:var(--text-primary)!important; }\r\n input[type=\"range\"] { -webkit-appearance:none; width:100%; height:4px; background:var(--bg-tertiary); border-radius:2px; }\r\n input[type=\"range\"]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; background:var(--accent-cyan); border-radius:50%; cursor:pointer; box-shadow:0 0 8px var(--accent-cyan); }\r\n .btn { padding:6px 8px; border-radius:5px; font-weight:600; font-size:11px; cursor:pointer; transition:all 0.2s; border:none; display:flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap; }\r\n .btn-primary { background:var(--accent-cyan); color:var(--bg-primary); } .btn-primary:hover { opacity:0.9; }\r\n .btn-pause { background:var(--accent-yellow); color:var(--bg-primary); } .btn-resume { background:var(--accent-green); color:white; }\r\n .btn-secondary { background:var(--bg-tertiary); color:var(--text-primary); border:1px solid var(--border); } .btn-secondary:hover { background:var(--border); }\r\n .btn-apply { background:var(--accent-orange); color:white; } .btn-apply:hover { opacity:0.9; }\r\n .btn-slow { background:#6366f1; color:white; } .btn-slow.active { background:#818cf8; box-shadow:0 0 12px rgba(99,102,241,0.5); }\r\n .data-card { background:var(--bg-tertiary); border:1px solid var(--border); border-radius:5px; padding:4px 6px; }\r\n .state-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }\r\n .section-compact { padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--border); }\r\n .toggle-sw { position:relative; width:34px; height:18px; cursor:pointer; display:inline-block; flex-shrink:0; }\r\n .toggle-sw input { opacity:0; width:0; height:0; position:absolute; }\r\n .toggle-sw .track { position:absolute; inset:0; background:var(--border); border-radius:9px; transition:.25s; }\r\n .toggle-sw .track::before { content:''; position:absolute; width:14px; height:14px; left:2px; top:2px; background:var(--text-secondary); border-radius:50%; transition:.25s; }\r\n .toggle-sw input:checked+.track { background:var(--accent-cyan); }\r\n .toggle-sw input:checked+.track::before { transform:translateX(16px); background:#fff; }\r\n .btn-guia { position:fixed; bottom:16px; left:16px; z-index:999; background:#3fb950; color:#0d1117; font-family:'Space Grotesk',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:8px 14px; border-radius:7px; border:none; cursor:pointer; box-shadow:0 4px 20px rgba(63,185,80,.35); transition:transform .2s; display:flex; align-items:center; gap:6px; }\r\n .btn-guia:hover { transform:translateY(-2px); }\r\n .guia-panel { position:fixed; bottom:56px; left:16px; width:400px; max-height:70vh; z-index:1000; background:#fff; border:1px solid #d0d7de; border-radius:10px; box-shadow:0 16px 48px rgba(0,0,0,.4); display:none; flex-direction:column; overflow:hidden; font-family:'Space Grotesk',sans-serif; }\r\n .guia-panel.visible { display:flex; }\r\n .guia-header { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid #d0d7de; background:#f6f8fa; }\r\n .guia-header-title { display:flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; color:#1f2328; }\r\n .guia-close { background:none; border:none; color:#636c76; font-size:1rem; cursor:pointer; padding:2px 6px; border-radius:4px; }\r\n .guia-close:hover { color:#1f2328; background:rgba(0,0,0,.06); }\r\n .guia-body { overflow-y:auto; padding:12px; color:#1f2328; font-size:.78rem; line-height:1.55; }\r\n .guia-case { margin-bottom:10px; border:1px solid #d0d7de; border-radius:6px; overflow:hidden; }\r\n .guia-case-head { padding:7px 10px; cursor:pointer; font-weight:700; font-size:.8rem; display:flex; justify-content:space-between; align-items:center; background:#f6f8fa; }\r\n .guia-case-head:hover { background:#eef1f5; }\r\n .guia-case-body { padding:8px 10px; display:none; }\r\n .guia-case.open .guia-case-body { display:block; }\r\n .guia-case.open .case-chev { transform:rotate(180deg); }\r\n .case-chev { transition:transform .25s; font-size:.65rem; color:#636c76; }\r\n .guia-qbox { background:#fff8e1; border-left:3px solid #f59e0b; padding:6px 8px; margin:6px 0; border-radius:0 5px 5px 0; font-size:.75rem; line-height:1.5; }\r\n .guia-qbox strong { color:#b45309; }\r\n .guia-steps { list-style:none; padding:0; counter-reset:gs; }\r\n .guia-steps li { counter-increment:gs; display:flex; gap:6px; margin-bottom:5px; }\r\n .guia-steps li::before { content:counter(gs); background:#dafbe1; color:#1a7f37; font-size:.65rem; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid #1a7f37; }\r\n .preset-btn { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; font-size:.7rem; font-weight:600; background:#1a7f37; color:#fff; border:none; border-radius:3px; cursor:pointer; margin:3px 0; }\r\n .slow-badge { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px; font-weight:700; background:#6366f1; color:white; animation:pulse-slow 1s ease-in-out infinite; }\r\n @keyframes pulse-slow { 0%,100%{opacity:1}50%{opacity:.5} }\r\n .verify-box { background:rgba(0,255,204,0.06); border:1px solid rgba(0,255,204,0.2); border-radius:5px; padding:6px 8px; margin-top:6px; }\r\n .verify-box .vf-title { font-size:8px; text-transform:uppercase; letter-spacing:1px; color:var(--accent-cyan); margin-bottom:3px; font-weight:700; }\r\n .verify-box .vf-line { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-secondary); line-height:1.6; }\r\n .verify-box .vf-line span { color:var(--text-primary); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Header sticky: se queda arriba al hacer scroll -->\r\n <header class=\"h-11 border-b border-[var(--border)] flex items-center justify-between px-4 bg-[var(--bg-secondary)]\/95 backdrop-blur z-20 sticky top-0\">\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-6 h-6 rounded bg-[var(--accent-cyan)] flex items-center justify-center text-[var(--bg-primary)] font-bold text-xs\">F<\/div>\r\n <h1 class=\"text-xs font-semibold tracking-tight\">Part\u00edcula Cargada en Campos E y B<\/h1>\r\n <\/div>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"font-mono text-xs\"><span class=\"text-[var(--text-secondary)]\">t = <\/span><span id=\"time-display\" class=\"text-[var(--accent-cyan)]\">0.000 s<\/span><\/div>\r\n <div id=\"slow-indicator\" style=\"display:none\" class=\"slow-badge\">LENTO<\/div>\r\n <div class=\"flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-[var(--border)]\">\r\n <span id=\"status-dot\" class=\"w-2 h-2 rounded-full bg-gray-500\"><\/span>\r\n <span id=\"status-text\" class=\"text-[9px] font-medium uppercase tracking-wider text-[var(--text-secondary)]\">Listo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- Main: sin altura fija, crece con contenido -->\r\n <main class=\"flex flex-col lg:flex-row\">\r\n <!-- Canvas con altura m\u00ednima fija -->\r\n <div class=\"flex-1 p-2 min-w-0\" style=\"min-height:550px\">\r\n <div class=\"canvas-container rounded-lg overflow-hidden relative\">\r\n <canvas id=\"simCanvas\"><\/canvas>\r\n <div class=\"absolute top-2 left-2 px-2 py-0.5 bg-black\/60 backdrop-blur rounded text-[9px] font-mono flex items-center gap-1.5\"><span class=\"text-[var(--text-secondary)]\">FPS<\/span><span id=\"fps-counter\" class=\"text-[var(--accent-cyan)]\">60<\/span><\/div>\r\n <div class=\"absolute bottom-2 left-2 flex gap-2.5 px-2.5 py-1 bg-black\/60 backdrop-blur rounded text-[9px]\">\r\n <div class=\"flex items-center gap-1\"><span class=\"w-2.5 h-0.5 bg-[var(--accent-cyan)]\"><\/span> Vel<\/div>\r\n <div class=\"flex items-center gap-1\"><span class=\"w-2.5 h-0.5 bg-[var(--accent-yellow)]\"><\/span> F_E<\/div>\r\n <div class=\"flex items-center gap-1\"><span class=\"w-2.5 h-0.5 bg-[var(--accent-magenta)]\"><\/span> F_B<\/div>\r\n <div class=\"flex items-center gap-1\"><span class=\"w-2.5 h-0.5 bg-[var(--accent-green)]\"><\/span> F_tot<\/div>\r\n <\/div>\r\n <div class=\"absolute top-2 right-2 px-2.5 py-1.5 bg-black\/75 backdrop-blur rounded border border-[var(--border)] text-[9px] font-mono leading-relaxed\" style=\"min-width:145px\">\r\n <div class=\"text-[8px] uppercase tracking-wider text-[var(--text-secondary)] mb-0.5 font-semibold\">Tiempo real<\/div>\r\n <div><span class=\"text-[var(--text-secondary)]\">X:<\/span> <span id=\"rt-x\" class=\"text-[var(--accent-cyan)]\">0.00<\/span><span class=\"text-[var(--text-secondary)]\"> m<\/span><\/div>\r\n <div><span class=\"text-[var(--text-secondary)]\">Y:<\/span> <span id=\"rt-y\" class=\"text-[var(--accent-cyan)]\">0.00<\/span><span class=\"text-[var(--text-secondary)]\"> m<\/span><\/div>\r\n <div><span class=\"text-[var(--text-secondary)]\">Vx:<\/span> <span id=\"rt-vx\" class=\"text-[var(--accent-cyan)]\">0.0<\/span><span class=\"text-[var(--text-secondary)]\"> m\/s<\/span><\/div>\r\n <div><span class=\"text-[var(--text-secondary)]\">Vy:<\/span> <span id=\"rt-vy\" class=\"text-[var(--accent-yellow)]\">0.0<\/span><span class=\"text-[var(--text-secondary)]\"> m\/s<\/span><\/div>\r\n <div><span class=\"text-[var(--text-secondary)]\">|v|:<\/span> <span id=\"rt-sp\" class=\"text-[var(--accent-green)]\">0.0<\/span><span class=\"text-[var(--text-secondary)]\"> m\/s<\/span><\/div>\r\n <div class=\"border-t border-[var(--border)] my-0.5\"><\/div>\r\n <div><span class=\"text-[var(--text-secondary)]\">|F_E|:<\/span> <span id=\"rt-fe\" class=\"text-[var(--accent-yellow)]\">0<\/span><span class=\"text-[var(--text-secondary)]\"> N<\/span><\/div>\r\n <div><span class=\"text-[var(--text-secondary)]\">|F_B|:<\/span> <span id=\"rt-fb\" class=\"text-[var(--accent-magenta)]\">0<\/span><span class=\"text-[var(--text-secondary)]\"> N<\/span><\/div>\r\n <div><span class=\"text-[var(--text-secondary)]\">|F|:<\/span> <span id=\"rt-ft\" class=\"text-[var(--accent-green)]\">0<\/span><span class=\"text-[var(--text-secondary)]\"> N<\/span><\/div>\r\n <div class=\"border-t border-[var(--border)] my-0.5\"><\/div>\r\n <div><span class=\"text-[var(--text-secondary)]\">r_L:<\/span> <span id=\"rt-rl\" class=\"text-[var(--accent-magenta)]\">\u2014<\/span><\/div>\r\n <div><span class=\"text-[var(--text-secondary)]\">Campo:<\/span> <span id=\"rt-field\" class=\"text-white\">NO<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Panel lateral: sin scroll interno, crece naturalmente -->\r\n <aside class=\"w-full lg:w-[295px] bg-[var(--bg-secondary)] border-t lg:border-t-0 lg:border-l border-[var(--border)] p-2.5 flex flex-col gap-0.5 shrink-0\">\r\n <section class=\"section-compact\">\r\n <h3 class=\"text-[9px] uppercase tracking-wider text-[var(--text-secondary)] mb-1.5\">Control<\/h3>\r\n <div class=\"grid grid-cols-4 gap-1 mb-1.5\">\r\n <button id=\"btn-start\" class=\"btn btn-primary\"><i class=\"fa-solid fa-play\" style=\"font-size:9px\"><\/i> Iniciar<\/button>\r\n <button id=\"btn-pause\" class=\"btn btn-pause\"><i class=\"fa-solid fa-pause\" style=\"font-size:9px\"><\/i> Pausar<\/button>\r\n <button id=\"btn-reset\" class=\"btn btn-secondary\"><i class=\"fa-solid fa-rotate-right\" style=\"font-size:9px\"><\/i> Reset<\/button>\r\n <button id=\"btn-slow\" class=\"btn btn-slow\" title=\"C\u00e1mara lenta 0.2x (tecla L)\"><i class=\"fa-solid fa-gauge-simple-low\" style=\"font-size:9px\"><\/i> Lento<\/button>\r\n <\/div>\r\n <div class=\"mb-1\"><label class=\"flex justify-between text-[9px] text-[var(--text-secondary)] mb-0.5\"><span>Vel. Simulaci\u00f3n<\/span><span id=\"val-speed\" class=\"text-[var(--accent-cyan)]\">1.0x<\/span><\/label><input type=\"range\" id=\"input-speed\" min=\"0.1\" max=\"3\" step=\"0.1\" value=\"1\"><\/div>\r\n <div class=\"flex gap-2 mt-1\">\r\n <label class=\"flex items-center gap-1 text-[9px] text-[var(--text-secondary)] cursor-pointer\"><input type=\"checkbox\" id=\"chk-vecs\" checked style=\"accent-color:var(--accent-cyan)\"> Vectores<\/label>\r\n <label class=\"flex items-center gap-1 text-[9px] text-[var(--text-secondary)] cursor-pointer\"><input type=\"checkbox\" id=\"chk-trail\" checked style=\"accent-color:var(--accent-cyan)\"> Rastro<\/label>\r\n <\/div>\r\n <\/section>\r\n <section class=\"section-compact\">\r\n <h3 class=\"text-[9px] uppercase tracking-wider text-[var(--text-secondary)] mb-1.5\">Part\u00edcula (unidades SI)<\/h3>\r\n <div class=\"grid grid-cols-2 gap-1.5 mb-1.5\">\r\n <div><label class=\"text-[9px] text-[var(--text-secondary)] block mb-0.5\">Carga q (C)<\/label><input type=\"number\" id=\"input-q\" value=\"1e-6\" step=\"1e-7\"><\/div>\r\n <div><label class=\"text-[9px] text-[var(--text-secondary)] block mb-0.5\">Masa m (kg)<\/label><input type=\"number\" id=\"input-m\" value=\"1e-6\" step=\"1e-7\"><\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-1.5 mb-1.5\">\r\n <div><label class=\"text-[9px] text-[var(--text-secondary)] block mb-0.5\">Vx\u2080 (m\/s)<\/label><input type=\"number\" id=\"input-vx0\" value=\"50\" step=\"5\"><\/div>\r\n <div><label class=\"text-[9px] text-[var(--text-secondary)] block mb-0.5\">Vy\u2080 (m\/s)<\/label><input type=\"number\" id=\"input-vy0\" value=\"0\" step=\"5\"><\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-1.5 mb-1.5\">\r\n <div><label class=\"text-[9px] text-[var(--text-secondary)] block mb-0.5\">X\u2080 (m)<\/label><input type=\"number\" id=\"input-x0\" value=\"0\" step=\"0.5\"><\/div>\r\n <div><label class=\"text-[9px] text-[var(--text-secondary)] block mb-0.5\">Y\u2080 (m)<\/label><input type=\"number\" id=\"input-y0\" value=\"1.5\" step=\"0.5\"><\/div>\r\n <\/div>\r\n <button id=\"btn-apply\" class=\"btn btn-apply w-full text-[10px]\"><i class=\"fa-solid fa-check\"><\/i> Aplicar Cambios<\/button>\r\n <\/section>\r\n <section class=\"section-compact\">\r\n <div class=\"flex items-center justify-between mb-1.5\">\r\n <h3 class=\"text-[9px] uppercase tracking-wider text-[var(--text-secondary)]\"><i class=\"fa-solid fa-bolt text-[var(--accent-yellow)] mr-1\"><\/i>Campo El\u00e9ctrico<\/h3>\r\n <label class=\"toggle-sw\"><input type=\"checkbox\" id=\"togE\"><span class=\"track\"><\/span><\/label>\r\n <\/div>\r\n <div id=\"eCtrl\" style=\"opacity:.35;pointer-events:none\">\r\n <div><label class=\"text-[9px] text-[var(--text-secondary)] block mb-0.5\">Ey (N\/C)<\/label><input type=\"number\" id=\"input-ey\" value=\"-500\" step=\"50\"><\/div>\r\n <p class=\"text-[8px] text-[var(--text-secondary)] mt-0.5 opacity-60\">Ey < 0: E hacia abajo (placa + arriba)<\/p>\r\n <\/div>\r\n <\/section>\r\n <section class=\"section-compact\">\r\n <div class=\"flex items-center justify-between mb-1.5\">\r\n <h3 class=\"text-[9px] uppercase tracking-wider text-[var(--text-secondary)]\"><i class=\"fa-solid fa-magnet text-[var(--accent-magenta)] mr-1\"><\/i>Campo Magn\u00e9tico<\/h3>\r\n <label class=\"toggle-sw\"><input type=\"checkbox\" id=\"togB\" checked><span class=\"track\"><\/span><\/label>\r\n <\/div>\r\n <div id=\"bCtrl\">\r\n <div><label class=\"text-[9px] text-[var(--text-secondary)] block mb-0.5\">Bz (T)<\/label><input type=\"number\" id=\"input-bz\" value=\"-0.05\" step=\"0.01\"><\/div>\r\n <p class=\"text-[8px] text-[var(--text-secondary)] mt-0.5 opacity-60\">Bz < 0: entra al plano (\u2297) | Bz > 0: sale (\u2299)<\/p>\r\n <\/div>\r\n <\/section>\r\n <section class=\"section-compact\">\r\n <h3 class=\"text-[9px] uppercase tracking-wider text-[var(--text-secondary)] mb-1.5\">Escala Visualizaci\u00f3n<\/h3>\r\n <div class=\"mb-1\"><label class=\"flex justify-between text-[9px] text-[var(--text-secondary)] mb-0.5\"><span>Escala fuerza<\/span><span id=\"val-fscale\" class=\"text-[var(--accent-cyan)]\">1.5<\/span><\/label><input type=\"range\" id=\"input-fscale\" min=\"0.1\" max=\"8\" step=\"0.1\" value=\"1.5\"><\/div>\r\n <div class=\"mb-1\"><label class=\"flex justify-between text-[9px] text-[var(--text-secondary)] mb-0.5\"><span>Escala velocidad<\/span><span id=\"val-vscale\" class=\"text-[var(--accent-cyan)]\">1.2<\/span><\/label><input type=\"range\" id=\"input-vscale\" min=\"0.1\" max=\"5\" step=\"0.1\" value=\"1.2\"><\/div>\r\n <\/section>\r\n <section>\r\n <h3 class=\"text-[9px] uppercase tracking-wider text-[var(--text-secondary)] mb-1.5\">Estado Actual<\/h3>\r\n <div class=\"state-grid\">\r\n <div class=\"data-card text-center\"><div class=\"text-[8px] text-[var(--text-secondary)]\">X (m)<\/div><div id=\"out-x\" class=\"font-mono text-[10px] text-[var(--accent-cyan)]\">0.00<\/div><\/div>\r\n <div class=\"data-card text-center\"><div class=\"text-[8px] text-[var(--text-secondary)]\">Y (m)<\/div><div id=\"out-y\" class=\"font-mono text-[10px] text-[var(--accent-cyan)]\">0.00<\/div><\/div>\r\n <div class=\"data-card text-center\"><div class=\"text-[8px] text-[var(--text-secondary)]\">En Campo<\/div><div id=\"out-field\" class=\"font-mono text-[10px] text-white\">NO<\/div><\/div>\r\n <div class=\"data-card text-center\"><div class=\"text-[8px] text-[var(--text-secondary)]\">|v| m\/s<\/div><div id=\"out-v\" class=\"font-mono text-[10px] text-[var(--accent-cyan)] font-bold\">0.00<\/div><\/div>\r\n <div class=\"data-card text-center\"><div class=\"text-[8px] text-[var(--text-secondary)]\">|F_E| N<\/div><div id=\"out-fe\" class=\"font-mono text-[10px] text-[var(--accent-yellow)]\">0<\/div><\/div>\r\n <div class=\"data-card text-center\"><div class=\"text-[8px] text-[var(--text-secondary)]\">|F_B| N<\/div><div id=\"out-fb\" class=\"font-mono text-[10px] text-[var(--accent-magenta)]\">0<\/div><\/div>\r\n <\/div>\r\n <div class=\"data-card mt-1.5 text-center\"><div class=\"text-[8px] text-[var(--text-secondary)]\">Radio Larmor (solo B)<\/div><div id=\"out-rl\" class=\"font-mono text-[10px] text-[var(--accent-magenta)]\">\u2014<\/div><\/div>\r\n <div class=\"verify-box\" id=\"verifyBox\">\r\n <div class=\"vf-title\"><i class=\"fa-solid fa-calculator\" style=\"margin-right:3px\"><\/i>Verificaci\u00f3n F = q(E + v\u00d7B)<\/div>\r\n <div class=\"vf-line\">q = <span id=\"vf-q\">1e-6<\/span> C<\/div>\r\n <div class=\"vf-line\">m = <span id=\"vf-m\">1e-6<\/span> kg<\/div>\r\n <div class=\"vf-line\">v = (<span id=\"vf-vx\">0<\/span>, <span id=\"vf-vy\">0<\/span>) m\/s<\/div>\r\n <div class=\"vf-line\">E = (0, <span id=\"vf-ey\">0<\/span>) N\/C<\/div>\r\n <div class=\"vf-line\">B = (0, 0, <span id=\"vf-bz\">0<\/span>) T<\/div>\r\n <div class=\"vf-line\" style=\"border-top:1px solid rgba(0,255,204,0.15);padding-top:3px;margin-top:3px\">F_E = qE = <span id=\"vf-fecalc\">0<\/span> N<\/div>\r\n <div class=\"vf-line\">F_B = qv\u00d7B = <span id=\"vf-fbcalc\">0<\/span> N<\/div>\r\n <div class=\"vf-line\" style=\"font-weight:600;color:var(--accent-green)\">F_total = <span id=\"vf-ftcalc\">0<\/span> N<\/div>\r\n <\/div>\r\n <\/section>\r\n <\/aside>\r\n <\/main>\r\n\r\n <button class=\"btn-guia\" onclick=\"toggleGuia()\"><i class=\"fa-solid fa-book-open\"><\/i> Gu\u00eda<\/button>\r\n <div class=\"guia-panel\" id=\"guiaPanel\">\r\n <div class=\"guia-header\"><div class=\"guia-header-title\"><i class=\"fa-solid fa-flask\" style=\"color:#3fb950\"><\/i> Gu\u00eda de Exploraci\u00f3n<\/div><button class=\"guia-close\" onclick=\"toggleGuia()\">\u2715<\/button><\/div>\r\n <div class=\"guia-body\">\r\n <p style=\"margin-bottom:10px;color:#636c76;font-size:.75rem\">Fuerza de Lorentz: <strong>F = q(E + v \u00d7 B)<\/strong>. Los campos solo existen entre las placas.<\/p>\r\n <div class=\"guia-case\" id=\"gc1\"><div class=\"guia-case-head\" onclick=\"document.getElementById('gc1').classList.toggle('open')\"><span><i class=\"fa-solid fa-bolt\" style=\"color:#eab308;margin-right:3px\"><\/i>Caso 1 \u2014 Solo E<\/span><i class=\"fa-solid fa-chevron-down case-chev\"><\/i><\/div><div class=\"guia-case-body\"><ol class=\"guia-steps\"><li>Desactiva B, activa E.<\/li><li>Ey = -500 N\/C, Vx\u2080 = 50 m\/s.<\/li><li>Observa la par\u00e1bola.<\/li><\/ol><button class=\"preset-btn\" onclick=\"applyPreset(1)\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Configurar<\/button><div class=\"guia-qbox\"><strong>Pregunta:<\/strong> \u00bfLa aceleraci\u00f3n cambia la direcci\u00f3n, la rapidez o ambas?<\/div><\/div><\/div>\r\n <div class=\"guia-case\" id=\"gc2\"><div class=\"guia-case-head\" onclick=\"document.getElementById('gc2').classList.toggle('open')\"><span><i class=\"fa-solid fa-magnet\" style=\"color:#d946ef;margin-right:3px\"><\/i>Caso 2 \u2014 Solo B<\/span><i class=\"fa-solid fa-chevron-down case-chev\"><\/i><\/div><div class=\"guia-case-body\"><ol class=\"guia-steps\"><li>Desactiva E, activa B (Bz = -0.05).<\/li><li>Vx\u2080 = 50 m\/s.<\/li><li>Observa el c\u00edrculo y |v| constante.<\/li><\/ol><button class=\"preset-btn\" onclick=\"applyPreset(2)\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Configurar<\/button><div class=\"guia-qbox\"><strong>Pregunta:<\/strong> \u00bfPor qu\u00e9 |v| no cambia? F_B siempre es \u22a5 a v.<\/div><\/div><\/div>\r\n <div class=\"guia-case\" id=\"gc3\"><div class=\"guia-case-head\" onclick=\"document.getElementById('gc3').classList.toggle('open')\"><span><i class=\"fa-solid fa-shuffle\" style=\"color:#22c55e;margin-right:3px\"><\/i>Caso 3 \u2014 E \u22a5 B<\/span><i class=\"fa-solid fa-chevron-down case-chev\"><\/i><\/div><div class=\"guia-case-body\"><ol class=\"guia-steps\"><li>Activa ambos: Ey = -500, Bz = -0.05.<\/li><li>Vx\u2080 = 10 \u2192 trayectoria recta (v=E\/B).<\/li><li>Cambia Vx\u2080 a 5 o 20.<\/li><\/ol><button class=\"preset-btn\" onclick=\"applyPreset(3)\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Configurar<\/button><div class=\"guia-qbox\"><strong>Pregunta:<\/strong> Trayectoria recta cuando v = E\/B. \u00bfPuedes verificarlo?<\/div><\/div><\/div>\r\n <div class=\"guia-case\" id=\"gc4\"><div class=\"guia-case-head\" onclick=\"document.getElementById('gc4').classList.toggle('open')\"><span><i class=\"fa-solid fa-compass\" style=\"color:#f59e0b;margin-right:3px\"><\/i>Exploraci\u00f3n libre<\/span><i class=\"fa-solid fa-chevron-down case-chev\"><\/i><\/div><div class=\"guia-case-body\"><button class=\"preset-btn\" onclick=\"applyPreset(0)\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Valores por defecto<\/button><div class=\"guia-qbox\"><strong>Pregunta:<\/strong> \u00bfCu\u00e1ndo la trayectoria deja de ser circular?<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n\r\n <script>\r\n const PIXELS_PER_METER=80,PARTICLE_RADIUS_PX=10,PLATE_HEIGHT=15,PLATE_GAP_METERS=3.0,PHYS_DT=0.00002,MAX_TRAIL=8000;\r\n let config={q:1e-6,m:1e-6,x0:0,y0:1.5,vx0:50,vy0:0,Ey:-500,Bz:-0.05,E_on:false,B_on:true};\r\n let state={x:0,y:0,vx:0,vy:0,ax:0,ay:0,t:0};\r\n let FE={x:0,y:0},FB={x:0,y:0},FT={x:0,y:0};\r\n let isRunning=false,hasCollided=false,simSpeed=1.0,fScale=1.5,vScale=1.2;\r\n let fpsCount=0,fpsTime=0,showVecs=true,showTrail=true,isSlowMode=false;\r\n let trail=[],platesMeters={xStart:0,xEnd:0,yBottom:0,yTop:3.0};\r\n const canvas=document.getElementById('simCanvas'),ctx=canvas.getContext('2d');\r\n\r\n function resizeCanvases(){const c=canvas.parentElement;canvas.width=c.clientWidth;canvas.height=c.clientHeight;calculatePlateGeometry();}\r\n function calculatePlateGeometry(){const vw=canvas.width\/PIXELS_PER_METER,pw=vw*0.55,xo=(vw-pw)\/2;platesMeters.xStart=xo;platesMeters.xEnd=xo+pw;const vh=canvas.height\/PIXELS_PER_METER,yo=(vh-PLATE_GAP_METERS)\/2;platesMeters.yBottom=yo;platesMeters.yTop=yo+PLATE_GAP_METERS;}\r\n window.addEventListener('resize',resizeCanvases);\r\n\r\n function isInsideField(){return state.x>=platesMeters.xStart&&state.x<=platesMeters.xEnd&&state.y>=platesMeters.yBottom&&state.y<=platesMeters.yTop;}\r\n function computeAccel(vx,vy,inside){if(!inside)return[0,0];let ax=0,ay=0,mm=Math.max(Math.abs(config.m),1e-15);if(config.E_on){ax+=config.q*0\/mm;ay+=config.q*config.Ey\/mm;}if(config.B_on){ax+=config.q*vy*config.Bz\/mm;ay+=-config.q*vx*config.Bz\/mm;}return[ax,ay];}\r\n function derivs(vx,vy,inside){let a=computeAccel(vx,vy,inside);return[vx,vy,a[0],a[1]];}\r\n function rk4Step(dt,inside){let vx=state.vx,vy=state.vy;let k1=derivs(vx,vy,inside),k2=derivs(vx+k1[2]*dt*0.5,vy+k1[3]*dt*0.5,inside),k3=derivs(vx+k2[2]*dt*0.5,vy+k2[3]*dt*0.5,inside),k4=derivs(vx+k3[2]*dt,vy+k3[3]*dt,inside);state.x+=(k1[0]+2*k2[0]+2*k3[0]+k4[0])*dt\/6;state.y+=(k1[1]+2*k2[1]+2*k3[1]+k4[1])*dt\/6;state.vx+=(k1[2]+2*k2[2]+2*k3[2]+k4[2])*dt\/6;state.vy+=(k1[3]+2*k2[3]+2*k3[3]+k4[3])*dt\/6;state.t+=dt;}\r\n function updateForces(){let inside=isInsideField();FE.x=(inside&&config.E_on)?config.q*0:0;FE.y=(inside&&config.E_on)?config.q*config.Ey:0;FB.x=(inside&&config.B_on)?config.q*state.vy*config.Bz:0;FB.y=(inside&&config.B_on)?-config.q*state.vx*config.Bz:0;FT.x=FE.x+FB.x;FT.y=FE.y+FB.y;let mm=Math.max(Math.abs(config.m),1e-15);state.ax=FT.x\/mm;state.ay=FT.y\/mm;}\r\n function updatePhysics(realDt){if(hasCollided)return;let pt=realDt*simSpeed,steps=Math.max(1,Math.ceil(pt\/PHYS_DT));steps=Math.min(steps,1500);let dt=pt\/steps,pr=PARTICLE_RADIUS_PX\/PIXELS_PER_METER;for(let i=0;i<steps;i++){let inside=isInsideField();if(inside){rk4Step(dt,true);}else{state.x+=state.vx*dt;state.y+=state.vy*dt;state.t+=dt;}let inX=state.x>=platesMeters.xStart&&state.x<=platesMeters.xEnd;if(inX){if(state.y-pr<=platesMeters.yBottom){state.y=platesMeters.yBottom+pr;handleCollision(\"Placa Inferior\");return;}if(state.y+pr>=platesMeters.yTop){state.y=platesMeters.yTop-pr;handleCollision(\"Placa Superior\");return;}}if(state.y-pr<0){state.y=pr;handleCollision(\"Suelo\");return;}let gTop=canvas.height\/PIXELS_PER_METER;if(state.y+pr>gTop){state.y=gTop-pr;handleCollision(\"Techo\");return;}if(i%8===0){trail.push({x:state.x*PIXELS_PER_METER,y:canvas.height-state.y*PIXELS_PER_METER});if(trail.length>MAX_TRAIL)trail.shift();}}updateForces();}\r\n function handleCollision(surface){state.vx=0;state.vy=0;state.ax=0;state.ay=0;hasCollided=true;isRunning=false;updateForces();document.getElementById('status-dot').className='w-2 h-2 rounded-full bg-[var(--accent-orange)]';document.getElementById('status-text').textContent='Colisi\u00f3n';updatePauseBtn();}\r\n\r\n function draw(){ctx.fillStyle='#050a14';ctx.fillRect(0,0,canvas.width,canvas.height);drawReferenceSystem();drawPlates();drawFieldLines();drawBFieldSymbols();if(showTrail)drawTrail();drawParticle();if(!hasCollided&&showVecs)drawVectors();updateDataUI();}\r\n function drawPlates(){let xs=platesMeters.xStart*PIXELS_PER_METER,xe=platesMeters.xEnd*PIXELS_PER_METER,yb=canvas.height-platesMeters.yBottom*PIXELS_PER_METER,yt=canvas.height-platesMeters.yTop*PIXELS_PER_METER,w=xe-xs,topC,botC;if(config.Ey<0){topC='#ef4444';botC='#3b82f6';}else if(config.Ey>0){topC='#3b82f6';botC='#ef4444';}else{topC='#6b7280';botC='#6b7280';}ctx.fillStyle=topC;ctx.fillRect(xs,yt-PLATE_HEIGHT,w,PLATE_HEIGHT);ctx.fillStyle=botC;ctx.fillRect(xs,yb,w,PLATE_HEIGHT);if(config.E_on&&config.Ey!==0){ctx.fillStyle='white';ctx.font='bold 13px Space Grotesk';ctx.textAlign='center';let sT=config.Ey<0?'+':'-',sB=config.Ey<0?'-':'+';for(let x=xs+25;x<xe;x+=40){ctx.fillText(sT,x,yt-3);ctx.fillText(sB,x,yb+13);}}}\r\n function drawFieldLines(){if(!config.E_on||config.Ey===0)return;let xs=platesMeters.xStart*PIXELS_PER_METER+10,xe=platesMeters.xEnd*PIXELS_PER_METER-10,yb=canvas.height-platesMeters.yBottom*PIXELS_PER_METER-5,yt=canvas.height-platesMeters.yTop*PIXELS_PER_METER+5;ctx.strokeStyle='rgba(234,179,8,0.1)';ctx.lineWidth=1;for(let x=xs;x<xe;x+=40){ctx.beginPath();ctx.moveTo(x,yt);ctx.lineTo(x,yb);ctx.stroke();let arrowY=config.Ey<0?yb:yt,dir=config.Ey<0?1:-1;ctx.fillStyle='rgba(234,179,8,0.12)';ctx.beginPath();ctx.moveTo(x,arrowY);ctx.lineTo(x-4,arrowY-8*dir);ctx.lineTo(x+4,arrowY-8*dir);ctx.closePath();ctx.fill();}}\r\n function drawBFieldSymbols(){if(!config.B_on||Math.abs(config.Bz)<0.0001)return;let xs=platesMeters.xStart*PIXELS_PER_METER+25,xe=platesMeters.xEnd*PIXELS_PER_METER-25,yb=canvas.height-platesMeters.yBottom*PIXELS_PER_METER-25,yt=canvas.height-platesMeters.yTop*PIXELS_PER_METER+25;let isOut=config.Bz>0,intn=Math.min(Math.abs(config.Bz)\/0.1,1),alpha=0.15+intn*0.4,sz=Math.max(4+intn*5,3),sp=45;for(let gx=xs;gx<xe;gx+=sp){for(let gy=yt;gy<yb;gy+=sp){if(isOut){ctx.fillStyle='rgba(168,85,247,'+alpha+')';ctx.beginPath();ctx.arc(gx,gy,Math.max(sz*0.3,1.5),0,6.283);ctx.fill();ctx.strokeStyle='rgba(168,85,247,'+(alpha*0.6)+')';ctx.lineWidth=0.8;ctx.beginPath();ctx.arc(gx,gy,sz,0,6.283);ctx.stroke();}else{ctx.strokeStyle='rgba(251,146,60,'+alpha+')';ctx.lineWidth=1.2;let d=sz*0.6;ctx.beginPath();ctx.moveTo(gx-d,gy-d);ctx.lineTo(gx+d,gy+d);ctx.moveTo(gx+d,gy-d);ctx.lineTo(gx-d,gy+d);ctx.stroke();}}}ctx.fillStyle=isOut?'rgba(168,85,247,0.7)':'rgba(251,146,60,0.7)';ctx.font='11px \"JetBrains Mono\",monospace';ctx.textAlign='center';ctx.fillText(isOut?'B \\u2299 (sale)':'B \\u2297 (entra)',(xs+xe)\/2,yt-10);}\r\n function drawReferenceSystem(){let startX=50;ctx.strokeStyle='rgba(255,255,255,0.2)';ctx.lineWidth=1;ctx.beginPath();ctx.moveTo(startX,20);ctx.lineTo(startX,canvas.height-20);ctx.stroke();ctx.fillStyle='rgba(255,255,255,0.65)';ctx.font='10px \"JetBrains Mono\",monospace';ctx.textAlign='right';ctx.textBaseline='middle';for(let i=0;i<=canvas.height\/PIXELS_PER_METER;i+=0.5){let yp=canvas.height-i*PIXELS_PER_METER;if(yp<10||yp>canvas.height-10)continue;ctx.beginPath();ctx.moveTo(startX,yp);ctx.lineTo(startX+6,yp);ctx.stroke();ctx.fillText(i.toFixed(1)+\" m\",startX-6,yp);}}\r\n function drawTrail(){if(trail.length<2)return;let n=trail.length,isP=config.q>=0,cr=isP?239:59,cg=isP?68:130,cb=isP?68:246;ctx.lineWidth=2;ctx.lineCap='round';for(let i=1;i<n;i++){let a=Math.pow(i\/n,1.5)*0.7;ctx.strokeStyle='rgba('+cr+','+cg+','+cb+','+a+')';ctx.beginPath();ctx.moveTo(trail[i-1].x,trail[i-1].y);ctx.lineTo(trail[i].x,trail[i].y);ctx.stroke();}}\r\n function drawArrowFn(fx,fy,tx,ty,col,lw){let dx=tx-fx,dy=ty-fy,l=Math.hypot(dx,dy);if(l<4)return;let an=Math.atan2(dy,dx),hl=Math.min(10,l*0.3);ctx.strokeStyle=col;ctx.lineWidth=lw||2;ctx.lineCap='round';ctx.beginPath();ctx.moveTo(fx,fy);ctx.lineTo(tx,ty);ctx.stroke();ctx.fillStyle=col;ctx.beginPath();ctx.moveTo(tx,ty);ctx.lineTo(tx-hl*Math.cos(an-0.35),ty-hl*Math.sin(an-0.35));ctx.lineTo(tx-hl*Math.cos(an+0.35),ty-hl*Math.sin(an+0.35));ctx.closePath();ctx.fill();}\r\n function drawVectors(){let px=state.x*PIXELS_PER_METER,py=canvas.height-state.y*PIXELS_PER_METER;let sp=Math.hypot(state.vx,state.vy);if(sp>0.01){drawArrowFn(px,py,px+state.vx*vScale,py-(state.vy*vScale),'#00ffcc',2.5);}let feM=Math.hypot(FE.x,FE.y);if(feM>1e-15){drawArrowFn(px,py,px+FE.x*fScale*PIXELS_PER_METER,py-(FE.y*fScale*PIXELS_PER_METER),'#eab308',2);}let fbM=Math.hypot(FB.x,FB.y);if(fbM>1e-15){drawArrowFn(px,py,px+FB.x*fScale*PIXELS_PER_METER,py-(FB.y*fScale*PIXELS_PER_METER),'#d946ef',2);}let ftM=Math.hypot(FT.x,FT.y);if(ftM>1e-15){ctx.setLineDash([5,3]);drawArrowFn(px,py,px+FT.x*fScale*PIXELS_PER_METER,py-(FT.y*fScale*PIXELS_PER_METER),'#22c55e',2.5);ctx.setLineDash([]);}}\r\n function drawParticle(){let px=state.x*PIXELS_PER_METER,py=canvas.height-state.y*PIXELS_PER_METER,isP=config.q>=0,r=PARTICLE_RADIUS_PX;let g=ctx.createRadialGradient(px,py,r*0.3,px,py,r*2.5);if(isP){g.addColorStop(0,'rgba(239,68,68,0.5)');g.addColorStop(0.5,'rgba(239,68,68,0.1)');g.addColorStop(1,'rgba(239,68,68,0)');}else{g.addColorStop(0,'rgba(59,130,246,0.5)');g.addColorStop(0.5,'rgba(59,130,246,0.1)');g.addColorStop(1,'rgba(59,130,246,0)');}ctx.fillStyle=g;ctx.beginPath();ctx.arc(px,py,r*2.5,0,6.283);ctx.fill();let g2=ctx.createRadialGradient(px-2,py-2,1,px,py,r);if(isP){g2.addColorStop(0,'#ff8a8a');g2.addColorStop(1,'#ef4444');}else{g2.addColorStop(0,'#93c5fd');g2.addColorStop(1,'#3b82f6');}ctx.fillStyle=g2;ctx.beginPath();ctx.arc(px,py,r,0,6.283);ctx.fill();ctx.strokeStyle='rgba(255,255,255,0.3)';ctx.lineWidth=1;ctx.stroke();ctx.fillStyle='#fff';ctx.font='bold 12px \"JetBrains Mono\"';ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText(isP?'+':'\\u2212',px,py+0.5);ctx.textAlign='start';ctx.textBaseline='alphabetic';}\r\n\r\n function fmtSci(v,d){if(Math.abs(v)<1e-15)return'0';return v.toExponential(d||2);}\r\n function updateDataUI(){\r\n document.getElementById('time-display').textContent=state.t.toFixed(3)+' s';\r\n let sp=Math.hypot(state.vx,state.vy),inside=isInsideField();\r\n document.getElementById('out-x').textContent=state.x.toFixed(2);document.getElementById('out-y').textContent=state.y.toFixed(2);document.getElementById('out-v').textContent=sp.toFixed(1);\r\n document.getElementById('out-field').textContent=inside?'SI':'NO';document.getElementById('out-field').className='font-mono text-[10px] '+(inside?'text-[var(--accent-orange)]':'text-white');\r\n document.getElementById('out-fe').textContent=fmtSci(Math.hypot(FE.x,FE.y));document.getElementById('out-fb').textContent=fmtSci(Math.hypot(FB.x,FB.y));\r\n let rL='\u2014';if(config.B_on&&Math.abs(config.Bz)>1e-6&&sp>0.01&&Math.abs(config.q)>1e-15){rL=(Math.abs(config.m*sp\/(config.q*config.Bz))).toFixed(4)+' m';}\r\n document.getElementById('out-rl').textContent=rL;\r\n document.getElementById('rt-x').textContent=state.x.toFixed(2);document.getElementById('rt-y').textContent=state.y.toFixed(2);document.getElementById('rt-vx').textContent=state.vx.toFixed(1);document.getElementById('rt-vy').textContent=state.vy.toFixed(1);document.getElementById('rt-sp').textContent=sp.toFixed(1);\r\n document.getElementById('rt-fe').textContent=fmtSci(Math.hypot(FE.x,FE.y));document.getElementById('rt-fb').textContent=fmtSci(Math.hypot(FB.x,FB.y));document.getElementById('rt-ft').textContent=fmtSci(Math.hypot(FT.x,FT.y));\r\n document.getElementById('rt-field').textContent=inside?'SI':'NO';document.getElementById('rt-field').style.color=inside?'#ff6b35':'#fff';document.getElementById('rt-rl').textContent=rL;\r\n document.getElementById('vf-q').textContent=fmtSci(config.q,3);document.getElementById('vf-m').textContent=fmtSci(config.m,3);\r\n document.getElementById('vf-vx').textContent=state.vx.toFixed(2);document.getElementById('vf-vy').textContent=state.vy.toFixed(2);\r\n document.getElementById('vf-ey').textContent=inside&&config.E_on?config.Ey.toFixed(1):'0 (fuera)';\r\n document.getElementById('vf-bz').textContent=inside&&config.B_on?fmtSci(config.Bz,3):'0 (fuera)';\r\n let feX=inside&&config.E_on?config.q*0:0,feY=inside&&config.E_on?config.q*config.Ey:0;\r\n let fbX=inside&&config.B_on?config.q*state.vy*config.Bz:0,fbY=inside&&config.B_on?-config.q*state.vx*config.Bz:0;\r\n document.getElementById('vf-fecalc').textContent='('+fmtSci(feX)+', '+fmtSci(feY)+') |F_E|='+fmtSci(Math.hypot(feX,feY));\r\n document.getElementById('vf-fbcalc').textContent='('+fmtSci(fbX)+', '+fmtSci(fbY)+') |F_B|='+fmtSci(Math.hypot(fbX,fbY));\r\n document.getElementById('vf-ftcalc').textContent=fmtSci(Math.hypot(feX+fbX,feY+fbY))+' N';\r\n let dot=document.getElementById('status-dot'),txt=document.getElementById('status-text');\r\n if(isRunning){dot.className='w-2 h-2 rounded-full bg-[var(--accent-green)]';txt.textContent='Ejecutando';}else if(!hasCollided){dot.className='w-2 h-2 rounded-full bg-[var(--accent-yellow)]';txt.textContent='Pausado';}\r\n updatePauseBtn();\r\n }\r\n function updatePauseBtn(){let btn=document.getElementById('btn-pause');if(hasCollided){btn.className='btn btn-secondary opacity-50 cursor-not-allowed';btn.innerHTML='<i class=\"fa-solid fa-stop\" style=\"font-size:9px\"><\/i> Fin';return;}if(isRunning){btn.className='btn btn-pause';btn.innerHTML='<i class=\"fa-solid fa-pause\" style=\"font-size:9px\"><\/i> Pausar';}else{btn.className='btn btn-resume';btn.innerHTML='<i class=\"fa-solid fa-play\" style=\"font-size:9px\"><\/i> Continuar';}}\r\n function resetSimulation(){config.q=parseFloat(document.getElementById('input-q').value)||1e-6;config.m=parseFloat(document.getElementById('input-m').value)||1e-6;config.x0=parseFloat(document.getElementById('input-x0').value)||0;config.y0=parseFloat(document.getElementById('input-y0').value)||1.5;config.vx0=parseFloat(document.getElementById('input-vx0').value);if(isNaN(config.vx0))config.vx0=50;config.vy0=parseFloat(document.getElementById('input-vy0').value);if(isNaN(config.vy0))config.vy0=0;config.Ey=parseFloat(document.getElementById('input-ey').value)||0;config.Bz=parseFloat(document.getElementById('input-bz').value)||0;state.x=config.x0;state.y=config.y0;state.vx=config.vx0;state.vy=config.vy0;state.ax=0;state.ay=0;state.t=0;hasCollided=false;isRunning=false;trail=[];FE.x=0;FE.y=0;FB.x=0;FB.y=0;FT.x=0;FT.y=0;updateForces();document.getElementById('status-dot').className='w-2 h-2 rounded-full bg-gray-500';document.getElementById('status-text').textContent='Listo';updatePauseBtn();draw();}\r\n function syncToggles(){config.E_on=document.getElementById('togE').checked;config.B_on=document.getElementById('togB').checked;document.getElementById('eCtrl').style.opacity=config.E_on?'1':'0.35';document.getElementById('eCtrl').style.pointerEvents=config.E_on?'auto':'none';document.getElementById('bCtrl').style.opacity=config.B_on?'1':'0.35';document.getElementById('bCtrl').style.pointerEvents=config.B_on?'auto':'none';updateForces();}\r\n function setVal(id,v){let e=document.getElementById(id);if(e)e.value=v;}\r\n function applyPreset(n){isRunning=false;if(n===0){setVal('input-q','1e-6');setVal('input-m','1e-6');setVal('input-vx0',50);setVal('input-vy0',0);setVal('input-x0',0);setVal('input-y0',1.5);setVal('input-ey',-500);setVal('input-bz',-0.05);document.getElementById('togE').checked=false;document.getElementById('togB').checked=true;syncToggles();}if(n===1){setVal('input-q','1e-6');setVal('input-m','1e-6');setVal('input-vx0',50);setVal('input-vy0',0);setVal('input-x0',0);setVal('input-y0',1.5);setVal('input-ey',-500);setVal('input-bz',0);document.getElementById('togE').checked=true;document.getElementById('togB').checked=false;syncToggles();}if(n===2){setVal('input-q','1e-6');setVal('input-m','1e-6');setVal('input-vx0',50);setVal('input-vy0',0);setVal('input-x0',0);setVal('input-y0',1.5);setVal('input-ey',0);setVal('input-bz',-0.05);document.getElementById('togE').checked=false;document.getElementById('togB').checked=true;syncToggles();}if(n===3){setVal('input-q','1e-6');setVal('input-m','1e-6');setVal('input-vx0',10);setVal('input-vy0',0);setVal('input-x0',0);setVal('input-y0',1.5);setVal('input-ey',-500);setVal('input-bz',-0.05);document.getElementById('togE').checked=true;document.getElementById('togB').checked=true;syncToggles();}resetSimulation();}\r\n function toggleGuia(){document.getElementById('guiaPanel').classList.toggle('visible');}\r\n function toggleSlowMode(){isSlowMode=!isSlowMode;let btn=document.getElementById('btn-slow'),indicator=document.getElementById('slow-indicator');if(isSlowMode){simSpeed=0.2;document.getElementById('input-speed').value=0.2;document.getElementById('val-speed').textContent='0.2x';btn.classList.add('active');indicator.style.display='inline-block';}else{simSpeed=1.0;document.getElementById('input-speed').value=1;document.getElementById('val-speed').textContent='1.0x';btn.classList.remove('active');indicator.style.display='none';}}\r\n\r\n document.getElementById('btn-start').addEventListener('click',()=>{if(!hasCollided){isRunning=true;updatePauseBtn();}});\r\n document.getElementById('btn-pause').addEventListener('click',()=>{if(!hasCollided){isRunning=!isRunning;updatePauseBtn();}});\r\n document.getElementById('btn-reset').addEventListener('click',resetSimulation);document.getElementById('btn-apply').addEventListener('click',resetSimulation);document.getElementById('btn-slow').addEventListener('click',toggleSlowMode);\r\n document.getElementById('input-speed').addEventListener('input',e=>{simSpeed=parseFloat(e.target.value);document.getElementById('val-speed').textContent=simSpeed.toFixed(1)+'x';if(isSlowMode&&simSpeed!==0.2){isSlowMode=false;document.getElementById('btn-slow').classList.remove('active');document.getElementById('slow-indicator').style.display='none';}});\r\n document.getElementById('input-fscale').addEventListener('input',e=>{fScale=parseFloat(e.target.value);document.getElementById('val-fscale').textContent=fScale.toFixed(1);});\r\n document.getElementById('input-vscale').addEventListener('input',e=>{vScale=parseFloat(e.target.value);document.getElementById('val-vscale').textContent=vScale.toFixed(1);});\r\n document.getElementById('togE').addEventListener('change',syncToggles);document.getElementById('togB').addEventListener('change',syncToggles);\r\n document.getElementById('input-ey').addEventListener('input',()=>{config.Ey=parseFloat(document.getElementById('input-ey').value)||0;});\r\n document.getElementById('input-bz').addEventListener('input',e=>{config.Bz=parseFloat(e.target.value)||0;});\r\n document.getElementById('chk-vecs').addEventListener('change',e=>{showVecs=e.target.checked;});document.getElementById('chk-trail').addEventListener('change',e=>{showTrail=e.target.checked;});\r\n document.addEventListener('keydown',e=>{if(e.code==='Space'){e.preventDefault();if(!hasCollided){isRunning=!isRunning;updatePauseBtn();}}if(e.code==='KeyR')resetSimulation();if(e.code==='KeyL')toggleSlowMode();});\r\n\r\n function loop(ts){if(ts-fpsTime>=1000){document.getElementById('fps-counter').textContent=fpsCount;fpsCount=0;fpsTime=ts;}fpsCount++;if(isRunning)updatePhysics(0.016);draw();requestAnimationFrame(loop);}\r\n resizeCanvases();resetSimulation();requestAnimationFrame(loop);\r\n <\/script>\r\n \r\n \r\n \r\n <style>\r\n .btn-guia {\r\n position: fixed;\r\n bottom: 200px;\r\n left: 80px;\r\n z-index: 999;\r\n background: #3fb950;\r\n color: #0d1117;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 0.82rem;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n padding: 8px 12px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n \r\n \r\n \r\n }\r\n .btn-guia:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 24px rgba(63,185,80,0.5);\r\n }\r\n .btn-guia svg { width: 12px; height: 12px; flex-shrink: 0; }\r\n .guia-panel {\r\n position: fixed;\r\n bottom: 72px;\r\n left: 24px;\r\n width: 400px;\r\n max-height: 70vh;\r\n z-index: 1000;\r\n background: #ffffff;\r\n border: 1px solid #d0d7de;\r\n border-radius: 12px;\r\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\r\n display: block;\r\n flex-direction: column;\r\n overflow: hidden;\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n .guia-panel.visible { display: flex; }\r\n .guia-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 16px;\r\n border-bottom: 1px solid #d0d7de;\r\n flex-shrink: 0;\r\n background: #f6f8fa;\r\n }\r\n .guia-header-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n }\r\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\r\n .guia-close {\r\n background: none;\r\n border: none;\r\n color: #636c76;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n padding: 2px 7px;\r\n border-radius: 4px;\r\n transition: color 0.2s, background 0.2s;\r\n line-height: 1;\r\n }\r\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\r\n .guia-body {\r\n overflow-y: auto;\r\n padding: 18px 18px 20px;\r\n color: #1f2328;\r\n font-size: 0.83rem;\r\n line-height: 1.65;\r\n background: #ffffff;\r\n }\r\n .guia-body::-webkit-scrollbar { width: 5px; }\r\n .guia-body::-webkit-scrollbar-track { background: transparent; }\r\n .guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\r\n .guia-section-title {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n margin: 0 0 12px 0;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid #d0d7de;\r\n }\r\n .guia-block { margin-bottom: 14px; }\r\n .guia-label {\r\n font-size: 0.72rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #636c76;\r\n margin-bottom: 4px;\r\n }\r\n .guia-text { color: #1f2328; }\r\n .guia-formula {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n text-align: center;\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.88rem;\r\n color: #0550ae;\r\n margin: 10px 0;\r\n }\r\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\r\n .guia-steps li {\r\n counter-increment: steps;\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n align-items: flex-start;\r\n color: #1f2328;\r\n }\r\n .guia-steps li::before {\r\n content: counter(steps);\r\n background: #dafbe1;\r\n color: #1a7f37;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-top: 1px;\r\n border: 1px solid #1a7f37;\r\n }\r\n .guia-result {\r\n background: #dafbe1;\r\n border-left: 3px solid #1a7f37;\r\n border-radius: 0 6px 6px 0;\r\n padding: 10px 14px;\r\n color: #1f2328;\r\n font-size: 0.82rem;\r\n margin-top: 10px;\r\n }\r\n .guia-params {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n font-size: 0.8rem;\r\n color: #1f2328;\r\n }\r\n .guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\r\n .var { font-family: 'JetBrains Mono', monospace; }\r\n .var.pos { color: #cf222e; }\r\n .var.neg { color: #0550ae; }\r\n .var.neu { color: #7d4e00; }\r\n .var.ok { color: #1a7f37; }\r\n<\/style>\r\n\r\n<div class=\"guia-panel\" id=\"guiaPanel\">\r\n <div class=\"guia-header\">\r\n <div class=\"guia-header-title\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n <\/div>\r\n <button class=\"guia-close\" onclick=\"toggleGuia()\">\u2715<\/button>\r\n <\/div>\r\n\r\n <div class=\"guia-body\">\r\n\r\n <!--\u2605 BORRAR DESDE AQUI \u2605-->\r\n\r\n\r\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\r\n<h3 style=\"color: #0056b3;\"><strong><span style=\"color: #000080; font-size: 16px;\"> Campo magn\u00e9tico de un conductor recto y largo <\/span><\/strong><strong><span style=\"font-size: 16px; color: #ff0000;\"> <\/span><\/strong><\/h3>\r\n<strong>Objetivo:<\/strong> Determinar las caracter\u00edsticas del campo magn\u00e9tico generado por una corriente el\u00e9ctrica que circula a trav\u00e9s de un conductor rectil\u00edneo, analizando la relaci\u00f3n entre la intensidad de corriente, la distancia al conductor y la permeabilidad del medio.\r\n\r\n<strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que permite visualizar las l\u00edneas de inducci\u00f3n magn\u00e9tica alrededor de un hilo conductor. Facilita la comprensi\u00f3n de la Ley de Biot-Savart aplicada a corrientes estacionarias y permite verificar experimentalmente c\u00f3mo la magnitud del campo \\(B\\) var\u00eda inversamente con la distancia \\(r\\):\r\n<div style=\"text-align: center; margin: 20px 0;\">\\( B = \\frac{\\mu_0 I}{2 \\pi r} \\)<\/div>\r\n<strong>C\u00f3mo usar (pasos):<\/strong>\r\n<ul style=\"margin-left: 20px;\">\r\n \t<li>Ajustar la intensidad de la corriente (\\(I\\)) y observar c\u00f3mo cambia la densidad de las l\u00edneas de campo.<\/li>\r\n \t<li>Invertir el sentido de la corriente para visualizar el cambio en la direcci\u00f3n del vector campo magn\u00e9tico mediante la Regla de la Mano Derecha.<\/li>\r\n \t<li>Desplazar el sensor de campo magn\u00e9tico (br\u00fajula o sonda) para medir la magnitud de \\(B\\) en diferentes puntos del espacio.<\/li>\r\n \t<li>Utilizar las herramientas de medici\u00f3n para graficar la relaci\u00f3n entre \\(B\\) y \\(1\/r\\), comprobando la linealidad del fen\u00f3meno.<\/li>\r\n \t<li>Activar la visualizaci\u00f3n de vectores para identificar la naturaleza tangencial de las l\u00edneas de campo respecto a las circunferencias conc\u00e9ntricas al conductor.<\/li>\r\n<\/ul>\r\n<strong>Par\u00e1metros ajustables:<\/strong> Intensidad de corriente (\\(A\\)), sentido del flujo el\u00e9ctrico, distancia del punto de observaci\u00f3n (\\(r\\)) y permeabilidad magn\u00e9tica del medio.\r\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><strong>Resultados esperados \/ observaciones:<\/strong> Se verifica que las l\u00edneas de campo magn\u00e9tico son c\u00edrculos conc\u00e9ntricos al conductor. El sentido del campo es perpendicular tanto al radio como a la direcci\u00f3n de la corriente. Al duplicar la distancia al hilo, la intensidad del campo se reduce a la mitad, confirmando la relaci\u00f3n de proporcionalidad inversa.<\/p>\r\n\r\n<\/div>\r\n\r\n\r\n <!--\u2605 BORRAR HASTA AQUI \u2605-->\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<button class=\"btn-guia-2\" onclick=\"toggleGuia2()\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n<\/button>\r\n\r\n<script>\r\n function toggleGuia() {\r\n document.getElementById('guiaPanel').classList.toggle('visible');\r\n }\r\n<\/script>\r\n\r\n \r\n<style>\r\n .btn-guia-2 {\r\n position: fixed;\r\n bottom: 150px;\r\n left: 80px;\r\n z-index: 999;\r\n background: #3fb950;\r\n color: #0d1117;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 0.82rem;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n padding: 8px 14px;\r\n border-radius: 7px;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-guia:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 24px rgba(63,185,80,0.5);\r\n }\r\n .btn-guia svg { width: 15px; height: 15px; flex-shrink: 0; }\r\n .guia-panel {\r\n position: fixed;\r\n bottom: 72px;\r\n left: 24px;\r\n width: 400px;\r\n max-height: 70vh;\r\n z-index: 1000;\r\n background: #ffffff;\r\n border: 1px solid #d0d7de;\r\n border-radius: 12px;\r\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\r\n display: none;\r\n flex-direction: column;\r\n overflow: hidden;\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n .guia-panel.visible { display: flex; }\r\n .guia-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 16px;\r\n border-bottom: 1px solid #d0d7de;\r\n flex-shrink: 0;\r\n background: #f6f8fa;\r\n }\r\n .guia-header-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n }\r\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\r\n .guia-close {\r\n background: none;\r\n border: none;\r\n color: #636c76;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n padding: 2px 7px;\r\n border-radius: 4px;\r\n transition: color 0.2s, background 0.2s;\r\n line-height: 1;\r\n }\r\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\r\n .guia-body {\r\n overflow-y: auto;\r\n padding: 18px 18px 20px;\r\n color: #1f2328;\r\n font-size: 0.83rem;\r\n line-height: 1.65;\r\n background: #ffffff;\r\n }\r\n .guia-body::-webkit-scrollbar { width: 5px; }\r\n .guia-body::-webkit-scrollbar-track { background: transparent; }\r\n .guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\r\n .guia-section-title {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n margin: 0 0 12px 0;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid #d0d7de;\r\n }\r\n .guia-block { margin-bottom: 14px; }\r\n .guia-label {\r\n font-size: 0.72rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #636c76;\r\n margin-bottom: 4px;\r\n }\r\n .guia-text { color: #1f2328; }\r\n .guia-formula {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n text-align: center;\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.88rem;\r\n color: #0550ae;\r\n margin: 10px 0;\r\n }\r\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\r\n .guia-steps li {\r\n counter-increment: steps;\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n align-items: flex-start;\r\n color: #1f2328;\r\n }\r\n .guia-steps li::before {\r\n content: counter(steps);\r\n background: #dafbe1;\r\n color: #1a7f37;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-top: 1px;\r\n border: 1px solid #1a7f37;\r\n }\r\n .guia-result {\r\n background: #dafbe1;\r\n border-left: 3px solid #1a7f37;\r\n border-radius: 0 6px 6px 0;\r\n padding: 10px 14px;\r\n color: #1f2328;\r\n font-size: 0.82rem;\r\n margin-top: 10px;\r\n }\r\n .guia-params {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n font-size: 0.8rem;\r\n color: #1f2328;\r\n }\r\n .guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\r\n .var { font-family: 'JetBrains Mono', monospace; }\r\n .var.pos { color: #cf222e; }\r\n .var.neg { color: #0550ae; }\r\n .var.neu { color: #7d4e00; }\r\n .var.ok { color: #1a7f37; }\r\n<\/style>\r\n\r\n<div class=\"guia-panel\" id=\"guiaPanel2\">\r\n <div class=\"guia-header\">\r\n <div class=\"guia-header-title\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n <\/div>\r\n <button class=\"guia-close\" onclick=\"toggleGuia2()\">\u2715<\/button>\r\n <\/div>\r\n \r\n \r\n <button class=\"guia-close\" onclick=\"toggleGuia2()\">\u2715<\/button>\r\n\r\n <div class=\"guia-body\">\r\n\r\n <!--\u2605 BORRAR DESDE AQUI \u2605-->\r\n\r\n\r\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\r\n<h3 style=\"color: #0056b3;\"><strong><span style=\"color: #000080; font-size: 16px;\"> Campo magn\u00e9tico de un conductor recto y largo <\/span><\/strong><strong><span style=\"font-size: 16px; color: #ff0000;\"> <\/span><\/strong><\/h3>\r\n<strong>Objetivo:<\/strong> Determinar las caracter\u00edsticas del campo magn\u00e9tico generado por una corriente el\u00e9ctrica que circula a trav\u00e9s de un conductor rectil\u00edneo, analizando la relaci\u00f3n entre la intensidad de corriente, la distancia al conductor y la permeabilidad del medio.\r\n\r\n<strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que permite visualizar las l\u00edneas de inducci\u00f3n magn\u00e9tica alrededor de un hilo conductor. Facilita la comprensi\u00f3n de la Ley de Biot-Savart aplicada a corrientes estacionarias y permite verificar experimentalmente c\u00f3mo la magnitud del campo \\(B\\) var\u00eda inversamente con la distancia \\(r\\):\r\n<div style=\"text-align: center; margin: 20px 0;\">\\( B = \\frac{\\mu_0 I}{2 \\pi r} \\)<\/div>\r\n<strong>C\u00f3mo usar (pasos):<\/strong>\r\n<ul style=\"margin-left: 20px;\">\r\n \t<li>Ajustar la intensidad de la corriente (\\(I\\)) y observar c\u00f3mo cambia la densidad de las l\u00edneas de campo.<\/li>\r\n \t<li>Invertir el sentido de la corriente para visualizar el cambio en la direcci\u00f3n del vector campo magn\u00e9tico mediante la Regla de la Mano Derecha.<\/li>\r\n \t<li>Desplazar el sensor de campo magn\u00e9tico (br\u00fajula o sonda) para medir la magnitud de \\(B\\) en diferentes puntos del espacio.<\/li>\r\n \t<li>Utilizar las herramientas de medici\u00f3n para graficar la relaci\u00f3n entre \\(B\\) y \\(1\/r\\), comprobando la linealidad del fen\u00f3meno.<\/li>\r\n \t<li>Activar la visualizaci\u00f3n de vectores para identificar la naturaleza tangencial de las l\u00edneas de campo respecto a las circunferencias conc\u00e9ntricas al conductor.<\/li>\r\n<\/ul>\r\n<strong>Par\u00e1metros ajustables:<\/strong> Intensidad de corriente (\\(A\\)), sentido del flujo el\u00e9ctrico, distancia del punto de observaci\u00f3n (\\(r\\)) y permeabilidad magn\u00e9tica del medio.\r\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><strong>Resultados esperados \/ observaciones:<\/strong> Se verifica que las l\u00edneas de campo magn\u00e9tico son c\u00edrculos conc\u00e9ntricos al conductor. El sentido del campo es perpendicular tanto al radio como a la direcci\u00f3n de la corriente. Al duplicar la distancia al hilo, la intensidad del campo se reduce a la mitad, confirmando la relaci\u00f3n de proporcionalidad inversa.<\/p>\r\n\r\n<\/div>\r\n\r\n\r\n <!--\u2605 BORRAR HASTA AQUI \u2605-->\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<button class=\"btn-guia\" onclick=\"toggleGuia()\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n<\/button>\r\n\r\n<script>\r\n function toggleGuia2() {\r\n document.getElementById('guiaPanel2').classList.toggle('visible');\r\n }\r\n<\/script>\r\n\r\n <style>\r\n.btn-guia-2 svg {\r\n width: 12px !important;\r\n height: 12px !important;\r\n}\r\n<\/style>\r\n \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>Simulador: Part\u00edcula Cargada en Campos E y B F Part\u00edcula Cargada en Campos E y B t = 0.000 s LENTO Listo FPS60 Vel F_E…<\/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-7300","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>selector_velocidades_fuerza_lorentz - 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\/selector_velocidades_fuerza_lorentz\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"selector_velocidades_fuerza_lorentz - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Simulador: Part\u00edcula Cargada en Campos E y B F Part\u00edcula Cargada en Campos E y B t = 0.000 s LENTO Listo FPS60 Vel F_E…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/selector_velocidades_fuerza_lorentz\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-05T22:50:30+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutos\" \/>\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\\\/selector_velocidades_fuerza_lorentz\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/selector_velocidades_fuerza_lorentz\\\/\",\"name\":\"selector_velocidades_fuerza_lorentz - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\"},\"datePublished\":\"2026-04-30T14:42:09+00:00\",\"dateModified\":\"2026-05-05T22:50:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/selector_velocidades_fuerza_lorentz\\\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/selector_velocidades_fuerza_lorentz\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/selector_velocidades_fuerza_lorentz\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"selector_velocidades_fuerza_lorentz\"}]},{\"@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":"selector_velocidades_fuerza_lorentz - 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\/selector_velocidades_fuerza_lorentz\/","og_locale":"es_ES","og_type":"article","og_title":"selector_velocidades_fuerza_lorentz - F\u00edsica 2","og_description":"Simulador: Part\u00edcula Cargada en Campos E y B F Part\u00edcula Cargada en Campos E y B t = 0.000 s LENTO Listo FPS60 Vel F_E…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/selector_velocidades_fuerza_lorentz\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-05-05T22:50:30+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/selector_velocidades_fuerza_lorentz\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/selector_velocidades_fuerza_lorentz\/","name":"selector_velocidades_fuerza_lorentz - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-04-30T14:42:09+00:00","dateModified":"2026-05-05T22:50:30+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/selector_velocidades_fuerza_lorentz\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/selector_velocidades_fuerza_lorentz\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/selector_velocidades_fuerza_lorentz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"selector_velocidades_fuerza_lorentz"}]},{"@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\/7300","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=7300"}],"version-history":[{"count":49,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/7300\/revisions"}],"predecessor-version":[{"id":7409,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/7300\/revisions\/7409"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=7300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}