{"id":7190,"date":"2026-04-20T21:53:00","date_gmt":"2026-04-21T00:53:00","guid":{"rendered":"https:\/\/fisica2.fica.unsl.edu.ar\/?page_id=7190"},"modified":"2026-04-21T10:56:44","modified_gmt":"2026-04-21T13:56:44","slug":"leyes_de_kirchhoff_2","status":"publish","type":"page","link":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/leyes_de_kirchhoff_2\/","title":{"rendered":"leyes_de_kirchhoff_2"},"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\n\n\n\n\nLeyes de Kirchhoff \u2014 Simulador<\/title>\n<style>\n :root {\n --bg: #0f172a; --card: #1e293b; --border: #334155;\n --text: #e2e8f0; --muted: #94a3b8; --accent: #06b6d4;\n --green: #16a34a; --blue: #2563eb; --red: #dc2626;\n --green-l: #bbf7d0; --blue-l: #bfdbfe; --red-l: #fecaca;\n --amber: #f59e0b;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html, body { background: #0d1117 !important; }\n body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0d1117 !important; color: var(--text) !important; min-height: 100vh; display: flex; flex-direction: column; }\n \/* Root wrapper forces dark background for WordPress\/Elementor embedding *\/\n .kirchhoff-root { background: #0d1117 !important; color: #e2e8f0 !important; min-height: 100vh; }\n\n \/* Header *\/\n .header { border-bottom: 1px solid var(--border); background: #0d1117 !important; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 10; }\n .header-left { display: flex; align-items: center; gap: 12px; }\n .header-icon { padding: 8px; border-radius: 10px; background: rgba(6,182,212,0.1); }\n .header-icon svg { width: 20px; height: 20px; color: var(--accent); }\n .header h1 { font-size: 17px; font-weight: 700; color: #fff; }\n .header p { font-size: 11px; color: var(--muted); }\n .btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: all 0.15s; }\n .btn:hover { color: #fff; background: #1e293b; }\n\n \/* Toggles *\/\n .toggles { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px; margin-bottom: 16px; background: #1e293b !important; border: 1px solid var(--border); border-radius: 12px; }\n .toggles span.label { font-size: 11px; color: var(--muted); font-weight: 600; margin-right: 4px; }\n .toggle-group { display: flex; align-items: center; gap: 6px; }\n .toggle-group label { font-size: 12px; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 4px; }\n .switch { position: relative; width: 36px; height: 20px; }\n .switch input { opacity: 0; width: 0; height: 0; }\n .switch .slider { position: absolute; inset: 0; background: #475569; border-radius: 20px; cursor: pointer; transition: 0.2s; }\n .switch .slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: 0.2s; }\n .switch input:checked + .slider { background: var(--accent); }\n .switch input:checked + .slider::before { transform: translateX(16px); }\n\n \/* Main layout *\/\n .main { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 16px 20px; background: #0d1117 !important; }\n .grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }\n @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }\n\n \/* Cards *\/\n .card { background: #1e293b !important; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }\n .card-body { padding: 12px; }\n .card-header { padding: 12px 16px 8px; }\n .card-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }\n\n \/* Branch controls *\/\n .branch-ctrl { padding: 14px; border-radius: 12px; border: 2px solid; margin-bottom: 12px; transition: all 0.15s; }\n .branch-ctrl:last-child { margin-bottom: 0; }\n .branch-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }\n .branch-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }\n .branch-name { font-size: 13px; font-weight: 700; }\n .grid-2c { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n .ctrl-label { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; }\n .ctrl-label .val-display { color: #fff !important; font-family: monospace; font-weight: 700; font-size: 13px; background: #020617 !important; padding: 1px 8px; border-radius: 4px; border: 1px solid var(--border); min-width: 60px; text-align: center; display: inline-block; }\n .ctrl-input { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: #0f172a !important; color: #fff !important; font-size: 13px; font-family: monospace; }\n .ctrl-range { width: 100%; height: 6px; margin-top: 6px; cursor: pointer; }\n .ctrl-btn { width: 100%; height: 34px; border: 1px solid; border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }\n .ctrl-btn:hover { filter: brightness(1.15); }\n\n \/* Tabs *\/\n .tabs { margin-top: 24px; }\n .tab-list { display: flex; gap: 4px; flex-wrap: wrap; background: #1e293b !important; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }\n .tab-btn { padding: 8px 16px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; border-radius: 8px; display: flex; align-items: center; gap: 6px; transition: all 0.15s; }\n .tab-btn.active { background: rgba(6,182,212,0.15); color: var(--accent); }\n .tab-btn:hover:not(.active) { color: var(--text); }\n .tab-content { display: none; margin-top: 16px; }\n .tab-content.active { display: block; }\n\n \/* Results cards *\/\n .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n @media (max-width: 700px) { .result-grid { grid-template-columns: 1fr; } }\n .result-card { background: #1e293b; border: 1px solid var(--border); border-radius: 12px; padding: 16px; border-top: 3px solid; }\n .result-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 700; }\n .result-value { font-size: 28px; font-weight: 700; color: #fff !important; margin-bottom: 4px; }\n .result-detail { font-size: 11px; color: var(--muted); }\n .result-ok { color: #22c55e; }\n .result-bad { color: #ef4444; }\n .separator { border: none; border-top: 1px solid var(--border); margin: 12px 0; }\n\n \/* Power cards *\/\n .power-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n @media (max-width: 700px) { .power-grid { grid-template-columns: 1fr; } }\n .power-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: #1e293b; border-left: 3px solid; }\n .power-label { font-size: 13px; font-weight: 700; }\n .power-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }\n .power-val { font-size: 18px; font-weight: 700; }\n .power-delivers { color: #22c55e; }\n .power-absorbs { color: #ef4444; }\n .power-neutral { color: var(--muted); }\n .power-total { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 8px; }\n .power-total-label { font-size: 13px; font-weight: 600; }\n .power-total-val { font-size: 20px; font-weight: 700; }\n\n \/* Kirchhoff *\/\n .kcl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n @media (max-width: 700px) { .kcl-grid { grid-template-columns: 1fr; } }\n .law-box { padding: 14px; border-radius: 8px; background: #1e293b; border-left: 4px solid; }\n .law-title { font-size: 11px; font-weight: 600; margin-bottom: 6px; }\n .law-eq { font-family: monospace; font-size: 13px; color: #fff; margin-bottom: 4px; }\n .law-calc { font-family: monospace; font-size: 11px; color: var(--muted); }\n .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; margin-top: 6px; border: 1px solid; }\n .badge-ok { color: #22c55e; border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.05); }\n .badge-err { color: #ef4444; border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }\n\n \/* Equations *\/\n .eq-box { padding: 20px; background: #0f172a; border-radius: 12px; border: 1px solid var(--border); font-family: monospace; font-size: 13px; color: var(--text); overflow-x: auto; }\n .eq-title { color: var(--accent); font-weight: 600; }\n .eq-indent { padding-left: 16px; }\n\n \/* Balance *\/\n .balance { padding: 16px; background: #1e293b; border: 1px solid var(--border); border-radius: 12px; margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }\n .balance-title { font-size: 13px; font-weight: 600; }\n .balance-sub { font-size: 11px; color: var(--muted); }\n .balance-vals { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }\n\n \/* VAB *\/\n .vab-card { background: #1e293b; border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; }\n .vab-label { font-size: 13px; color: var(--text); }\n .vab-value { font-size: 22px; font-weight: 700; color: var(--amber); }\n\n \/* SVG container *\/\n .svg-wrap { background: #fff; border-radius: 10px; border: 1px solid #e2e8f0; overflow: hidden; }\n\n \/* Footer *\/\n .footer { margin-top: auto; border-top: 1px solid var(--border); background: #0d1117 !important; padding: 10px 20px; text-align: center; }\n .footer p { font-size: 11px; color: var(--muted); }\n\n \/* Detail table *\/\n .detail-table { width: 100%; margin-top: 12px; }\n .detail-table td { padding: 4px 0; font-size: 11px; background: transparent !important; }\n .detail-table .val { text-align: right; font-family: monospace; color: #fff !important; background: transparent !important; }\n\n \/* Range slider custom styling *\/\n input[type=\"range\"] { -webkit-appearance: none; appearance: none; background: transparent; }\n input[type=\"range\"]::-webkit-slider-runnable-track { height: 6px; background: #334155; border-radius: 3px; }\n input[type=\"range\"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--thumb-color, #06b6d4); cursor: pointer; margin-top: -6px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }\n input[type=\"range\"]::-moz-range-track { height: 6px; background: #334155; border-radius: 3px; border: none; }\n input[type=\"range\"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--thumb-color, #06b6d4); cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }\n<\/style>\n<\/head>\n<body>\n<div class=\"kirchhoff-root\" style=\"background:#0d1117 !important;color:#e2e8f0 !important;\">\n\n<!-- HEADER -->\n<div class=\"header\" style=\"background:#0d1117 !important;\">\n <div class=\"header-left\">\n <div class=\"header-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg><\/div>\n <div>\n <h1 style=\"color:#fff !important;\">Leyes de Kirchhoff \u2014 Simulador<\/h1>\n <p style=\"color:#94a3b8 !important;\">3 ramas en paralelo \u2014 An\u00e1lisis interactivo en tiempo real<\/p>\n <\/div>\n <\/div>\n <button class=\"btn\" onclick=\"resetParams()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><\/svg>\n Reset\n <\/button>\n<\/div>\n\n<!-- MAIN -->\n<div class=\"main\" style=\"background:#0d1117 !important;\">\n\n <!-- Toggles -->\n <div class=\"toggles\" style=\"background:#1e293b !important;\">\n <span class=\"label\" style=\"color:#94a3b8;\">Mostrar:<\/span>\n <div class=\"toggle-group\">\n <label class=\"switch\"><input type=\"checkbox\" id=\"tog-currents\" checked onchange=\"render()\"><span class=\"slider\"><\/span><\/label>\n <label for=\"tog-currents\" style=\"cursor:pointer;color:#e2e8f0;\">\u26a1 Corrientes<\/label>\n <\/div>\n <div class=\"toggle-group\">\n <label class=\"switch\"><input type=\"checkbox\" id=\"tog-polarity\" checked onchange=\"render()\"><span class=\"slider\"><\/span><\/label>\n <label for=\"tog-polarity\" style=\"cursor:pointer;color:#e2e8f0;\">\u00b1 Polaridades<\/label>\n <\/div>\n <div class=\"toggle-group\">\n <label class=\"switch\"><input type=\"checkbox\" id=\"tog-potentials\" onchange=\"render()\"><span class=\"slider\"><\/span><\/label>\n <label for=\"tog-potentials\" style=\"cursor:pointer;color:#e2e8f0;\">\ud83d\udd0c Potenciales<\/label>\n <\/div>\n <\/div>\n\n <!-- Circuit + Controls -->\n <div class=\"grid-2\">\n <!-- Circuit Diagram -->\n <div class=\"card\" style=\"background:#1e293b !important;\">\n <div class=\"card-body\">\n <div class=\"svg-wrap\">\n <svg id=\"circuit-svg\" viewBox=\"0 0 710 520\" style=\"width:100%;max-height:580px\"><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Controls -->\n <div id=\"controls-panel\"><\/div>\n <\/div>\n\n <!-- Results Tabs -->\n <div class=\"tabs\">\n <div class=\"tab-list\" style=\"background:#1e293b !important;\">\n <button class=\"tab-btn active\" data-tab=\"currents\" onclick=\"switchTab('currents')\" style=\"color:#06b6d4;background:rgba(6,182,212,0.15);\">\ud83d\udcca Corrientes<\/button>\n <button class=\"tab-btn\" data-tab=\"power\" onclick=\"switchTab('power')\" style=\"color:#94a3b8;\">\ud83d\udca1 Potencia<\/button>\n <button class=\"tab-btn\" data-tab=\"kirchhoff\" onclick=\"switchTab('kirchhoff')\" style=\"color:#94a3b8;\">\ud83d\udcd0 Leyes de Kirchhoff<\/button>\n <\/div>\n\n <div id=\"tab-currents\" class=\"tab-content active\"><\/div>\n <div id=\"tab-power\" class=\"tab-content\"><\/div>\n <div id=\"tab-kirchhoff\" class=\"tab-content\"><\/div>\n <\/div>\n<\/div>\n\n<!-- FOOTER -->\n<div class=\"footer\" style=\"background:#0d1117 !important;\">\n <p style=\"color:#94a3b8 !important;\">Simulador de Leyes de Kirchhoff \u2014 LVK (\u03a3V=0) & LCK (\u03a3I=0) \u2014 3 ramas en paralelo<\/p>\n<\/div>\n\n<script>\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ DATA & STATE\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nconst COLORS = ['#16a34a','#2563eb','#dc2626'];\nconst COLORS_L = ['#bbf7d0','#bfdbfe','#fecaca'];\nconst SUB = ['\u2081','\u2082','\u2083'];\nconst NAMES = ['Izquierda','Central','Derecha'];\n\nconst DEFAULT = [\n { E:12, R:4, polarity:1, currentDir:'down' },\n { E:6, R:3, polarity:-1, currentDir:'down' },\n { E:3, R:6, polarity:-1, currentDir:'down' },\n];\n\nlet branches = JSON.parse(JSON.stringify(DEFAULT));\nlet animTime = 0;\nlet animFrame;\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ SOLVER\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction solve() {\n if (branches.some(b => b.R <= 0)) return null;\n let sumG = 0, sumIS = 0;\n for (const b of branches) { sumG += 1\/b.R; sumIS += b.polarity*b.E\/b.R; }\n const V_AB = sumIS \/ sumG;\n\n const br = branches.map(b => {\n const I_branch = (V_AB - b.polarity*b.E) \/ b.R;\n const I_ref = b.currentDir === 'down' ? I_branch : -I_branch;\n const V_mid = V_AB - b.polarity*b.E;\n const V_R = Math.abs(I_branch) * b.R;\n const P_R = I_branch * I_branch * b.R;\n const P_E = -b.polarity * b.E * I_branch;\n return { I_branch, I_ref, V_mid, V_R, P_R, P_E };\n });\n\n const kclNodeA = br.reduce((s,b) => s + b.I_branch, 0);\n const P_dissipated = br.reduce((s,b) => s + b.P_R, 0);\n let P_delivered = 0, P_absorbed = 0;\n for (const b of br) { if (b.P_E > 0.001) P_delivered += b.P_E; else P_absorbed += Math.abs(b.P_E); }\n return { V_AB, branches: br, kclNodeA, P_delivered, P_absorbed, P_dissipated };\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ FORMAT\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction fmt(n, d=2) {\n const a = Math.abs(n);\n if (a < 1e-9) return '0';\n if (a >= 1e6) return (n\/1e6).toFixed(d)+' M';\n if (a >= 1e3) return (n\/1e3).toFixed(d)+' k';\n if (a < 1) return (n*1e3).toFixed(d)+' m';\n return n.toFixed(d);\n}\nconst fA = n => fmt(n)+' A';\nconst fV = n => fmt(n)+' V';\nconst fW = n => fmt(n)+' W';\nconst fO = n => fmt(n)+' \u03a9';\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ SVG DRAWING\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction drawResistor(x, y, h, col) {\n const lead = h*0.1, zH = h-2*lead, w=14, segs=6, segH=zH\/segs, zy=y+lead;\n const pts = [[x,y],[x,zy],[x+w,zy+segH*0.5],[x-w,zy+segH*1.5],[x+w,zy+segH*2.5],[x-w,zy+segH*3.5],[x+w,zy+segH*4.5],[x,zy+zH],[x,y+h]];\n return `<path d=\"${pts.map((p,i)=>`${i?'L':'M'}${p[0]},${p[1]}`).join(' ')}\" fill=\"none\" stroke=\"${col}\" stroke-width=\"2.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\"\/>`;\n}\n\nfunction drawBattery(x, y, h, pol, col) {\n \/\/ Battery symbol: only 2 plates (long=line + short=line), no middle segment\n \/\/ Long plate = + terminal, Short plate = - terminal\n const lw=28, sw=12; \/\/ long width, short width\n const plateGap = 8; \/\/ gap between the two plates\n const midY = y + h\/2;\n const topPlateY = midY - plateGap;\n const botPlateY = midY + plateGap;\n \/\/ pol=1: + on top \u2192 long on top, short on bottom\n \/\/ pol=-1: + on bottom \u2192 short on top, long on bottom\n const topW = pol===1 ? lw : sw;\n const botW = pol===1 ? sw : lw;\n \/\/ Top lead wire, top plate, bottom plate, bottom lead wire\n return `<line x1=\"${x}\" y1=\"${y}\" x2=\"${x}\" y2=\"${topPlateY}\" stroke=\"${col}\" stroke-width=\"2.5\"\/>` +\n `<line x1=\"${x-topW\/2}\" y1=\"${topPlateY}\" x2=\"${x+topW\/2}\" y2=\"${topPlateY}\" stroke=\"${col}\" stroke-width=\"${pol===1?4:3}\" stroke-linecap=\"round\"\/>` +\n `<line x1=\"${x-botW\/2}\" y1=\"${botPlateY}\" x2=\"${x+botW\/2}\" y2=\"${botPlateY}\" stroke=\"${col}\" stroke-width=\"${pol===1?3:4}\" stroke-linecap=\"round\"\/>` +\n `<line x1=\"${x}\" y1=\"${botPlateY}\" x2=\"${x}\" y2=\"${y+h}\" stroke=\"${col}\" stroke-width=\"2.5\"\/>`;\n}\n\nfunction drawArrow(x, y, dir, col, sz=9) {\n const s = sz;\n const pts = dir==='down'\n ? `${x},${y+s} ${x-s},${y-s*0.4} ${x+s},${y-s*0.4}`\n : `${x},${y-s} ${x-s},${y+s*0.4} ${x+s},${y+s*0.4}`;\n return `<polygon points=\"${pts}\" fill=\"${col}\"\/>`;\n}\n\nfunction drawDots(points, dir, current, col, t) {\n if (Math.abs(current) < 0.001) return '';\n let svg = '';\n const count = 5;\n for (let i = 0; i < count; i++) {\n let frac = ((i\/count) + t\/300) % 1;\n if (dir === 'up') frac = 1 - frac;\n const totalSegs = points.length - 1;\n const segF = frac * totalSegs;\n const idx = Math.min(Math.floor(segF), totalSegs-1);\n const lt = segF - idx;\n const cx = points[idx][0] + (points[idx+1][0]-points[idx][0])*lt;\n const cy = points[idx][1] + (points[idx+1][1]-points[idx][1])*lt;\n const op = 0.3 + 0.6 * Math.abs(Math.sin(t*0.02 + i));\n svg += `<circle cx=\"${cx}\" cy=\"${cy}\" r=\"3\" fill=\"${col}\" opacity=\"${op.toFixed(2)}\"\/>`;\n }\n return svg;\n}\n\nfunction renderSVG() {\n const r = solve();\n const svg = document.getElementById('circuit-svg');\n if (!svg) return;\n\n const showC = document.getElementById('tog-currents').checked;\n const showP = document.getElementById('tog-polarity').checked;\n const showV = document.getElementById('tog-potentials').checked;\n\n const bx=[140,350,560], nAy=55, nBy=455, busL=55, busR=650;\n const eTop=115, eH=70, rTop=255, rH=90;\n const eBot=eTop+eH, rBot=rTop+rH;\n\n let s = '';\n \/\/ Background\n s += `<rect width=\"710\" height=\"520\" fill=\"#fafafa\" rx=\"8\"\/>`;\n s += `<rect x=\"2\" y=\"2\" width=\"706\" height=\"516\" fill=\"none\" stroke=\"#e2e8f0\" stroke-width=\"2\" rx=\"7\"\/>`;\n s += `<defs><pattern id=\"grid\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><path d=\"M 20 0 L 0 0 0 20\" fill=\"none\" stroke=\"#f1f5f9\" stroke-width=\"0.5\"\/><\/pattern><\/defs>`;\n s += `<rect x=\"2\" y=\"2\" width=\"706\" height=\"516\" fill=\"url(#grid)\" rx=\"7\"\/>`;\n\n \/\/ Title\n s += `<text x=\"355\" y=\"25\" text-anchor=\"middle\" fill=\"#475569\" font-size=\"12\" font-weight=\"600\">Circuito de 3 ramas en paralelo \u2014 Leyes de Kirchhoff<\/text>`;\n\n \/\/ Bus bars\n s += `<line x1=\"${busL}\" y1=\"${nAy}\" x2=\"${busR}\" y2=\"${nAy}\" stroke=\"#334155\" stroke-width=\"4\" stroke-linecap=\"round\"\/>`;\n s += `<line x1=\"${busL}\" y1=\"${nBy}\" x2=\"${busR}\" y2=\"${nBy}\" stroke=\"#334155\" stroke-width=\"4\" stroke-linecap=\"round\"\/>`;\n\n \/\/ Node labels\n s += `<circle cx=\"${busL}\" cy=\"${nAy}\" r=\"8\" fill=\"#f59e0b\" stroke=\"#92400e\" stroke-width=\"2\"\/>`;\n s += `<text x=\"${busL}\" y=\"${nAy+5}\" text-anchor=\"middle\" fill=\"#fff\" font-size=\"11\" font-weight=\"bold\">A<\/text>`;\n s += `<circle cx=\"${busL}\" cy=\"${nBy}\" r=\"8\" fill=\"#64748b\" stroke=\"#334155\" stroke-width=\"2\"\/>`;\n s += `<text x=\"${busL}\" y=\"${nBy+5}\" text-anchor=\"middle\" fill=\"#fff\" font-size=\"11\" font-weight=\"bold\">B<\/text>`;\n\n for (let i = 0; i < 3; i++) {\n const b = branches[i], col = COLORS[i], cl = COLORS_L[i];\n const br = r ? r.branches[i] : null;\n const x = bx[i];\n\n \/\/ The animated dots follow the ASSIGNED current direction\n const assignedDir = b.currentDir;\n\n \/\/ Branch bg\n s += `<rect x=\"${x-40}\" y=\"${nAy}\" width=\"80\" height=\"${nBy-nAy}\" rx=\"6\" fill=\"${cl}\" fill-opacity=\"0.25\"\/>`;\n\n \/\/ Wires\n s += `<line x1=\"${x}\" y1=\"${nAy}\" x2=\"${x}\" y2=\"${eTop}\" stroke=\"${col}\" stroke-width=\"2.5\"\/>`;\n s += `<line x1=\"${x}\" y1=\"${eBot}\" x2=\"${x}\" y2=\"${rTop}\" stroke=\"${col}\" stroke-width=\"2.5\"\/>`;\n s += `<line x1=\"${x}\" y1=\"${rBot}\" x2=\"${x}\" y2=\"${nBy}\" stroke=\"${col}\" stroke-width=\"2.5\"\/>`;\n\n \/\/ Junction dots\n s += `<circle cx=\"${x}\" cy=\"${nAy}\" r=\"5\" fill=\"${col}\"\/>`;\n s += `<circle cx=\"${x}\" cy=\"${nBy}\" r=\"5\" fill=\"${col}\"\/>`;\n s += `<circle cx=\"${x}\" cy=\"${eBot}\" r=\"3\" fill=\"${col}\" opacity=\"0.6\"\/>`;\n\n \/\/ Components\n s += drawBattery(x, eTop, eH, b.polarity, col);\n s += drawResistor(x, rTop, rH, col);\n\n \/\/ E label\n s += `<rect x=\"${x+20}\" y=\"${eTop+eH\/2-14}\" width=\"58\" height=\"28\" rx=\"4\" fill=\"white\" fill-opacity=\"0.85\" stroke=\"${col}\" stroke-width=\"1\"\/>`;\n s += `<text x=\"${x+49}\" y=\"${eTop+eH\/2-1}\" text-anchor=\"middle\" fill=\"${col}\" font-size=\"13\" font-weight=\"bold\">E${SUB[i]}<\/text>`;\n s += `<text x=\"${x+49}\" y=\"${eTop+eH\/2+11}\" text-anchor=\"middle\" fill=\"#475569\" font-size=\"10\">${fV(b.E)}<\/text>`;\n\n \/\/ R label\n s += `<rect x=\"${x+20}\" y=\"${rTop+rH\/2-14}\" width=\"58\" height=\"28\" rx=\"4\" fill=\"white\" fill-opacity=\"0.85\" stroke=\"${col}\" stroke-width=\"1\"\/>`;\n s += `<text x=\"${x+49}\" y=\"${rTop+rH\/2-1}\" text-anchor=\"middle\" fill=\"${col}\" font-size=\"13\" font-weight=\"bold\">R${SUB[i]}<\/text>`;\n s += `<text x=\"${x+49}\" y=\"${rTop+rH\/2+11}\" text-anchor=\"middle\" fill=\"#475569\" font-size=\"10\">${fO(b.R)}<\/text>`;\n\n \/\/ +\/- on battery \u2014 these follow the POLARITY setting (not current direction)\n \/\/ polarity=1 means + terminal is near A (top), polarity=-1 means + terminal is near B (bottom)\n if (showP) {\n const batPlusY = b.polarity === 1 ? eTop + 14 : eBot - 6;\n const batMinusY = b.polarity === 1 ? eBot - 6 : eTop + 14;\n s += `<text x=\"${x-26}\" y=\"${batPlusY}\" fill=\"#16a34a\" font-size=\"17\" font-weight=\"bold\">+<\/text>`;\n s += `<text x=\"${x-26}\" y=\"${batMinusY}\" fill=\"#dc2626\" font-size=\"19\" font-weight=\"bold\">\u2212<\/text>`;\n }\n\n \/\/ +\/- on resistor \u2014 these follow the ASSIGNED current direction\n \/\/ In a resistor, current enters at (+) and exits at (\u2212)\n \/\/ If current is assigned \"down\" (A\u2192B): top is (+), bottom is (\u2212)\n \/\/ If current is assigned \"up\" (B\u2192A): bottom is (+), top is (\u2212)\n if (showP) {\n if (b.currentDir === 'down') {\n s += `<text x=\"${x-26}\" y=\"${rTop+14}\" fill=\"#dc2626\" font-size=\"15\" font-weight=\"bold\">+<\/text>`;\n s += `<text x=\"${x-26}\" y=\"${rBot-6}\" fill=\"#16a34a\" font-size=\"15\" font-weight=\"bold\">\u2212<\/text>`;\n } else {\n s += `<text x=\"${x-26}\" y=\"${rTop+14}\" fill=\"#16a34a\" font-size=\"15\" font-weight=\"bold\">\u2212<\/text>`;\n s += `<text x=\"${x-26}\" y=\"${rBot-6}\" fill=\"#dc2626\" font-size=\"15\" font-weight=\"bold\">+<\/text>`;\n }\n }\n\n \/\/ Potentials\n if (showV && r) {\n s += `<rect x=\"${x+80}\" y=\"${nAy+6}\" width=\"48\" height=\"16\" rx=\"3\" fill=\"white\" fill-opacity=\"0.9\" stroke=\"#f59e0b\" stroke-width=\"0.5\"\/>`;\n s += `<text x=\"${x+104}\" y=\"${nAy+18}\" text-anchor=\"middle\" fill=\"#92400e\" font-size=\"9\" font-weight=\"bold\">${fV(r.V_AB)}<\/text>`;\n s += `<rect x=\"${x+80}\" y=\"${eBot-2}\" width=\"48\" height=\"16\" rx=\"3\" fill=\"white\" fill-opacity=\"0.9\" stroke=\"#7c3aed\" stroke-width=\"0.5\"\/>`;\n s += `<text x=\"${x+104}\" y=\"${eBot+10}\" text-anchor=\"middle\" fill=\"#6d28d9\" font-size=\"9\">${fV(br.V_mid)}<\/text>`;\n s += `<rect x=\"${x+80}\" y=\"${nBy-22}\" width=\"48\" height=\"16\" rx=\"3\" fill=\"white\" fill-opacity=\"0.9\" stroke=\"#94a3b8\" stroke-width=\"0.5\"\/>`;\n s += `<text x=\"${x+104}\" y=\"${nBy-10}\" text-anchor=\"middle\" fill=\"#475569\" font-size=\"9\">0 V<\/text>`;\n }\n\n \/\/ Current arrow \u2014 follows the ASSIGNED direction\n if (showC && br) {\n s += drawArrow(x-30, rTop+rH\/2, b.currentDir, col);\n s += `<rect x=\"${x-68}\" y=\"${rTop+rH\/2-20}\" width=\"36\" height=\"18\" rx=\"3\" fill=\"white\" fill-opacity=\"0.9\" stroke=\"${col}\" stroke-width=\"0.8\"\/>`;\n s += `<text x=\"${x-50}\" y=\"${rTop+rH\/2-7}\" text-anchor=\"middle\" fill=\"${col}\" font-size=\"11\" font-weight=\"bold\">I${SUB[i]}<\/text>`;\n s += `<rect x=\"${x-40}\" y=\"${nBy+10}\" width=\"80\" height=\"32\" rx=\"4\" fill=\"white\" fill-opacity=\"0.9\" stroke=\"${col}\" stroke-width=\"1\"\/>`;\n s += `<text x=\"${x}\" y=\"${nBy+26}\" text-anchor=\"middle\" fill=\"${col}\" font-size=\"13\" font-weight=\"bold\">${fA(br.I_ref)}<\/text>`;\n s += `<text x=\"${x}\" y=\"${nBy+39}\" text-anchor=\"middle\" fill=\"#64748b\" font-size=\"8\">${br.I_ref>=0?(b.currentDir==='down'?'\u2193 coincide':'\u2191 coincide'):(b.currentDir==='down'?'\u2191 opuesto':'\u2193 opuesto')}<\/text>`;\n }\n\n \/\/ Animated dots \u2014 follow the ASSIGNED direction\n if (showC && br && Math.abs(br.I_branch) > 0.001) {\n s += drawDots([[x,nAy],[x,eTop],[x,eBot],[x,rTop],[x,rBot],[x,nBy]], assignedDir, br.I_branch, col, animTime);\n }\n }\n\n \/\/ V_AB on right\n if (r) {\n s += `<rect x=\"${busR-2}\" y=\"${nAy-2}\" width=\"55\" height=\"20\" rx=\"3\" fill=\"white\" fill-opacity=\"0.9\" stroke=\"#f59e0b\" stroke-width=\"1\"\/>`;\n s += `<text x=\"${busR+25}\" y=\"${nAy+12}\" text-anchor=\"middle\" fill=\"#92400e\" font-size=\"11\" font-weight=\"bold\">${fV(r.V_AB)}<\/text>`;\n s += `<rect x=\"${busR-2}\" y=\"${nBy-18}\" width=\"55\" height=\"20\" rx=\"3\" fill=\"white\" fill-opacity=\"0.9\" stroke=\"#94a3b8\" stroke-width=\"1\"\/>`;\n s += `<text x=\"${busR+25}\" y=\"${nBy-4}\" text-anchor=\"middle\" fill=\"#475569\" font-size=\"11\" font-weight=\"bold\">0 V<\/text>`;\n }\n\n svg.innerHTML = s;\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ CONTROLS \u2014 use targeted updates to avoid losing slider position\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nlet controlsBuilt = false;\n\nfunction buildControls() {\n const panel = document.getElementById('controls-panel');\n let html = '';\n for (let i = 0; i < 3; i++) {\n const b = branches[i], col = COLORS[i];\n html += `<div class=\"branch-ctrl\" style=\"border-color:${col}60;background:${col}08 !important;\">\n <div class=\"branch-header\">\n <div class=\"branch-dot\" style=\"background:${col}\"><\/div>\n <span class=\"branch-name\" style=\"color:${col}\">Rama ${SUB[i]} \u2014 ${NAMES[i]}<\/span>\n <\/div>\n <div class=\"grid-2c\">\n <div>\n <div class=\"ctrl-label\" style=\"color:#94a3b8;\">E${SUB[i]} (V) <span class=\"val-display\" id=\"e-val-${i}\" style=\"color:#fff !important;background:#020617 !important;\">${b.E}<\/span><\/div>\n <input class=\"ctrl-input\" id=\"e-input-${i}\" type=\"number\" value=\"${b.E}\" min=\"0\" max=\"100\" step=\"0.5\"\n style=\"background:#0f172a !important;color:#fff !important;\"\n oninput=\"updateE(${i},this.value)\">\n <input class=\"ctrl-range\" id=\"e-range-${i}\" type=\"range\" value=\"${b.E}\" min=\"0\" max=\"50\" step=\"0.5\"\n style=\"--thumb-color:${col}\" oninput=\"updateE(${i},this.value)\">\n <\/div>\n <div>\n <div class=\"ctrl-label\" style=\"color:#94a3b8;\">R${SUB[i]} (\u03a9) <span class=\"val-display\" id=\"r-val-${i}\" style=\"color:#fff !important;background:#020617 !important;\">${b.R}<\/span><\/div>\n <input class=\"ctrl-input\" id=\"r-input-${i}\" type=\"number\" value=\"${b.R}\" min=\"0.1\" max=\"100\" step=\"0.5\"\n style=\"background:#0f172a !important;color:#fff !important;\"\n oninput=\"updateR(${i},this.value)\">\n <input class=\"ctrl-range\" id=\"r-range-${i}\" type=\"range\" value=\"${b.R}\" min=\"0.1\" max=\"50\" step=\"0.5\"\n style=\"--thumb-color:${col}\" oninput=\"updateR(${i},this.value)\">\n <\/div>\n <\/div>\n <div class=\"grid-2c\" style=\"margin-top:12px\">\n <div>\n <div class=\"ctrl-label\" style=\"color:#94a3b8;\">Polaridad E${SUB[i]}<\/div>\n <button class=\"ctrl-btn\" id=\"pol-btn-${i}\" style=\"border-color:${col}50;background:${col}10;color:#e2e8f0;\"\n onclick=\"togglePolarity(${i})\">\n ${b.polarity===1?'\u27e8+\u27e9 en A (\u2191)':'\u27e8+\u27e9 en B (\u2193)'}\n <\/button>\n <\/div>\n <div>\n <div class=\"ctrl-label\" style=\"color:#94a3b8;\">Sentido I${SUB[i]}<\/div>\n <button class=\"ctrl-btn\" id=\"dir-btn-${i}\" style=\"border-color:${col}50;background:${col}10;color:#e2e8f0;\"\n onclick=\"toggleDirection(${i})\">\n ${b.currentDir==='down'?'\u2193 A \u2192 B':'\u2191 B \u2192 A'}\n <\/button>\n <\/div>\n <\/div>\n <\/div>`;\n }\n panel.innerHTML = html;\n controlsBuilt = true;\n}\n\nfunction updateE(i, val) {\n const v = Math.max(0, Number(val));\n branches[i].E = v;\n \/\/ Sync all three: input, range, and display\n const inp = document.getElementById('e-input-'+i);\n const rng = document.getElementById('e-range-'+i);\n const dsp = document.getElementById('e-val-'+i);\n if (inp && inp !== document.activeElement) inp.value = v;\n if (rng && rng !== document.activeElement) rng.value = v;\n if (dsp) dsp.textContent = v;\n renderResults();\n renderSVG();\n}\n\nfunction updateR(i, val) {\n const v = Math.max(0.1, Number(val));\n branches[i].R = v;\n const inp = document.getElementById('r-input-'+i);\n const rng = document.getElementById('r-range-'+i);\n const dsp = document.getElementById('r-val-'+i);\n if (inp && inp !== document.activeElement) inp.value = v;\n if (rng && rng !== document.activeElement) rng.value = v;\n if (dsp) dsp.textContent = v;\n renderResults();\n renderSVG();\n}\n\nfunction togglePolarity(i) {\n branches[i].polarity = branches[i].polarity === 1 ? -1 : 1;\n const btn = document.getElementById('pol-btn-'+i);\n if (btn) btn.innerHTML = branches[i].polarity===1?'\u27e8+\u27e9 en A (\u2191)':'\u27e8+\u27e9 en B (\u2193)';\n renderResults();\n renderSVG();\n}\n\nfunction toggleDirection(i) {\n branches[i].currentDir = branches[i].currentDir === 'down' ? 'up' : 'down';\n const btn = document.getElementById('dir-btn-'+i);\n if (btn) btn.innerHTML = branches[i].currentDir==='down'?'\u2193 A \u2192 B':'\u2191 B \u2192 A';\n renderResults();\n renderSVG();\n}\n\nfunction renderControls() {\n if (!controlsBuilt) {\n buildControls();\n } else {\n \/\/ Sync existing controls with current state\n for (let i = 0; i < 3; i++) {\n const b = branches[i];\n const eInp = document.getElementById('e-input-'+i);\n const eRng = document.getElementById('e-range-'+i);\n const eDsp = document.getElementById('e-val-'+i);\n const rInp = document.getElementById('r-input-'+i);\n const rRng = document.getElementById('r-range-'+i);\n const rDsp = document.getElementById('r-val-'+i);\n const polBtn = document.getElementById('pol-btn-'+i);\n const dirBtn = document.getElementById('dir-btn-'+i);\n \n if (eInp && eInp !== document.activeElement) eInp.value = b.E;\n if (eRng && eRng !== document.activeElement) eRng.value = b.E;\n if (eDsp) eDsp.textContent = b.E;\n if (rInp && rInp !== document.activeElement) rInp.value = b.R;\n if (rRng && rRng !== document.activeElement) rRng.value = b.R;\n if (rDsp) rDsp.textContent = b.R;\n if (polBtn) polBtn.innerHTML = b.polarity===1?'\u27e8+\u27e9 en A (\u2191)':'\u27e8+\u27e9 en B (\u2193)';\n if (dirBtn) dirBtn.innerHTML = b.currentDir==='down'?'\u2193 A \u2192 B':'\u2191 B \u2192 A';\n }\n }\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ RESULT TABS\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction renderCurrents() {\n const r = solve(); if (!r) return '';\n let html = '<div class=\"result-grid\">';\n for (let i = 0; i < 3; i++) {\n const br = r.branches[i], b = branches[i], col = COLORS[i];\n html += `<div class=\"result-card\" style=\"border-top-color:${col};background:#1e293b !important;\">\n <div class=\"result-title\"><div class=\"branch-dot\" style=\"background:${col};width:10px;height:10px;border-radius:50%\"><\/div><span style=\"color:${col}\">Rama ${SUB[i]} \u2014 ${NAMES[i]}<\/span><\/div>\n <div class=\"result-value\" style=\"color:#fff !important;\">${fA(br.I_ref)}<\/div>\n <div class=\"result-detail\" style=\"color:#94a3b8;\">Sentido asignado: ${b.currentDir==='down'?'\u2193 A\u2192B':'\u2191 B\u2192A'}<\/div>\n <div class=\"result-detail ${br.I_ref>=0?'result-ok':'result-bad'}\" style=\"color:${br.I_ref>=0?'#22c55e':'#ef4444'};\">${br.I_ref>=0?'\u2713 Coincide con el asignado':'\u2717 Opuesto al asignado'}<\/div>\n <div class=\"result-detail\" style=\"color:#94a3b8;\">Sentido real: ${br.I_branch>=0?'\u2193 A\u2192B':'\u2191 B\u2192A'}<\/div>\n <hr class=\"separator\">\n <table class=\"detail-table\">\n <tr><td style=\"color:#94a3b8;background:transparent !important;\">V en R${SUB[i]}<\/td><td class=\"val\" style=\"color:#fff !important;background:transparent !important;\">${fV(br.V_R)}<\/td><\/tr>\n <tr><td style=\"color:#94a3b8;background:transparent !important;\">P en R${SUB[i]}<\/td><td class=\"val\" style=\"color:#fff !important;background:transparent !important;\">${fW(br.P_R)}<\/td><\/tr>\n <\/table>\n <\/div>`;\n }\n html += '<\/div>';\n html += `<div class=\"vab-card\" style=\"background:#1e293b !important;\"><span class=\"vab-label\" style=\"color:#e2e8f0;\">Voltaje entre nodos (V<sub>A<\/sub> \u2212 V<sub>B<\/sub>)<\/span><span class=\"vab-value\" style=\"color:#f59e0b;\">V<sub>AB<\/sub> = ${fV(r.V_AB)}<\/span><\/div>`;\n document.getElementById('tab-currents').innerHTML = html;\n}\n\nfunction renderPower() {\n const r = solve(); if (!r) return '';\n let html = '<div class=\"power-grid\">';\n \/\/ Sources\n html += `<div class=\"card\" style=\"background:#1e293b !important;\"><div class=\"card-header\"><div class=\"card-title\" style=\"color:#f59e0b\">\u26a1 Potencia por Fuentes (E)<\/div><\/div><div class=\"card-body\" style=\"padding-top:0\">`;\n for (let i = 0; i < 3; i++) {\n const br = r.branches[i], col = COLORS[i];\n const isDel = br.P_E > 0.01, isAbs = br.P_E < -0.01;\n const cls = isDel ? 'power-delivers' : isAbs ? 'power-absorbs' : 'power-neutral';\n const label = isDel ? '\ud83d\udd0b Entrega' : isAbs ? '\u26a1 Absorbe' : '\u26aa Neutral';\n html += `<div class=\"power-item\" style=\"border-left-color:${col};background:#1e293b !important;\">\n <div><div class=\"power-label\" style=\"color:${col}\">E${SUB[i]} = ${fV(branches[i].E)}<\/div><div class=\"power-sub ${cls}\" style=\"color:${isDel?'#22c55e':isAbs?'#ef4444':'#94a3b8'};\">${label}<\/div><\/div>\n <div class=\"power-val ${cls}\" style=\"color:${isDel?'#22c55e':isAbs?'#ef4444':'#94a3b8'};\">${fW(br.P_E)}<\/div>\n <\/div>`;\n }\n html += `<hr class=\"separator\">`;\n html += `<div class=\"power-total\" style=\"background:#052e16;border:1px solid #166534;border-radius:8px\"><span class=\"power-total-label\" style=\"color:#22c55e\">Total Entregada<\/span><span class=\"power-total-val\" style=\"color:#86efac\">${fW(r.P_delivered)}<\/span><\/div>`;\n html += `<div class=\"power-total\" style=\"background:#2a0a0a;border:1px solid #7f1d1d;border-radius:8px;margin-top:8px\"><span class=\"power-total-label\" style=\"color:#ef4444\">Total Absorbida por fuentes<\/span><span class=\"power-total-val\" style=\"color:#fca5a5\">${fW(r.P_absorbed)}<\/span><\/div>`;\n html += '<\/div><\/div>';\n\n \/\/ Resistors\n html += `<div class=\"card\" style=\"background:#1e293b !important;\"><div class=\"card-header\"><div class=\"card-title\" style=\"color:#f43f5e\">\ud83d\udca1 Potencia Disipada en Resistencias<\/div><\/div><div class=\"card-body\" style=\"padding-top:0\">`;\n for (let i = 0; i < 3; i++) {\n const br = r.branches[i], col = COLORS[i];\n html += `<div class=\"power-item\" style=\"border-left-color:${col};background:#1e293b !important;\">\n <span class=\"power-label\" style=\"color:${col}\">R${SUB[i]} = ${fO(branches[i].R)}<\/span>\n <span class=\"power-val\" style=\"color:#fff !important;\">${fW(br.P_R)}<\/span>\n <\/div>`;\n }\n html += `<hr class=\"separator\">`;\n html += `<div class=\"power-total\" style=\"background:#2a0a0a;border:1px solid #7f1d1d;border-radius:8px\"><span class=\"power-total-label\" style=\"color:#f43f5e\">Total Disipada<\/span><span class=\"power-total-val\" style=\"color:#fda4af\">${fW(r.P_dissipated)}<\/span><\/div>`;\n html += '<\/div><\/div>';\n html += '<\/div>';\n\n \/\/ Balance\n const balanced = Math.abs(r.P_delivered - (r.P_dissipated + r.P_absorbed)) < 0.01;\n html += `<div class=\"balance\" style=\"background:#1e293b !important;\">\n <div><div class=\"balance-title\" style=\"color:#e2e8f0;\">\u2696\ufe0f Balance de Potencia (Conservaci\u00f3n de la Energ\u00eda)<\/div><div class=\"balance-sub\" style=\"color:#94a3b8;\">P<sub>entregada<\/sub> = P<sub>disipada<\/sub> + P<sub>absorbida<\/sub><\/div><\/div>\n <div class=\"balance-vals\"><span style=\"color:#86efac\">${fW(r.P_delivered)}<\/span><span style=\"color:#475569\">=<\/span><span style=\"color:#fda4af\">${fW(r.P_dissipated+r.P_absorbed)}<\/span><span class=\"badge ${balanced?'badge-ok':'badge-err'}\" style=\"color:${balanced?'#22c55e':'#ef4444'};border-color:${balanced?'rgba(34,197,94,0.3)':'rgba(239,68,68,0.3)'};background:${balanced?'rgba(34,197,94,0.05)':'rgba(239,68,68,0.05)'};\">${balanced?'\u2713 Balanceado':'\u2717 Error'}<\/span><\/div>\n <\/div>`;\n\n document.getElementById('tab-power').innerHTML = html;\n}\n\nfunction renderKirchhoff() {\n const r = solve(); if (!r) return '';\n let html = '<div class=\"kcl-grid\">';\n\n \/\/ KVL\n html += `<div class=\"card\" style='background:#1e293b !important;'><div class=\"card-header\"><div class=\"card-title\" style=\"color:#06b6d4\">\ud83d\udcd0 LVK \u2014 Ley de Voltajes<\/div><p style=\"font-size:11px;color:#94a3b8;margin-top:4px\">\u03a3 V = 0 en cada rama (A\u2192B)<\/p><\/div><div class=\"card-body\" style=\"padding-top:0\">`;\n for (let i = 0; i < 3; i++) {\n const b = branches[i], br = r.branches[i], col = COLORS[i];\n const sum = b.polarity*b.E + br.I_branch*b.R - r.V_AB;\n const ok = Math.abs(sum) < 0.01;\n html += `<div class=\"law-box\" style=\"border-left-color:${col};background:#1e293b !important;\">\n <div class=\"law-title\" style=\"color:${col}\">Rama ${SUB[i]}: ${b.polarity===1?'+':'\u2212'}E${SUB[i]} + I${SUB[i]}\u00b7R${SUB[i]} \u2212 V<sub>AB<\/sub> = 0<\/div>\n <div class=\"law-calc\" style=\"color:#94a3b8;\">${b.polarity===1?'':'\u2212'}${b.E.toFixed(1)} + (${br.I_branch.toFixed(4)})\u00d7${b.R.toFixed(1)} \u2212 ${r.V_AB.toFixed(4)} = <span style=\"color:${ok?'#22c55e':'#ef4444'}\">${sum.toFixed(6)}<\/span><\/div>\n <span class=\"badge ${ok?'badge-ok':'badge-err'}\" style=\"color:${ok?'#22c55e':'#ef4444'};border-color:${ok?'rgba(34,197,94,0.3)':'rgba(239,68,68,0.3)'};background:${ok?'rgba(34,197,94,0.05)':'rgba(239,68,68,0.05)'};\">${ok?'\u2713 LVK Verificada':'\u2717 Error'}<\/span>\n <\/div>`;\n }\n html += '<\/div><\/div>';\n\n \/\/ KCL\n html += `<div class=\"card\" style='background:#1e293b !important;'><div class=\"card-header\"><div class=\"card-title\" style=\"color:#22c55e\">\ud83d\udcca LCK \u2014 Ley de Corrientes<\/div><p style=\"font-size:11px;color:#94a3b8;margin-top:4px\">\u03a3 I = 0 en cada nodo<\/p><\/div><div class=\"card-body\" style=\"padding-top:0\">`;\n const kclOk = Math.abs(r.kclNodeA) < 0.01;\n html += `<div class=\"law-box\" style=\"border-left-color:#f59e0b;background:#1e293b !important;\">\n <div class=\"law-title\" style=\"color:#f59e0b\">Nodo A (corrientes A\u2192B)<\/div>\n <div class=\"law-eq\" style=\"color:#fff !important;\">I\u2081 + I\u2082 + I\u2083 = 0<\/div>\n <div class=\"law-calc\" style=\"color:#94a3b8;\">${fA(r.branches[0].I_branch)} + ${fA(r.branches[1].I_branch)} + ${fA(r.branches[2].I_branch)} = <span style=\"color:${kclOk?'#22c55e':'#ef4444'}\">${fA(r.kclNodeA,4)}<\/span><\/div>\n <span class=\"badge ${kclOk?'badge-ok':'badge-err'}\" style=\"color:${kclOk?'#22c55e':'#ef4444'};border-color:${kclOk?'rgba(34,197,94,0.3)':'rgba(239,68,68,0.3)'};background:${kclOk?'rgba(34,197,94,0.05)':'rgba(239,68,68,0.05)'};\">${kclOk?'\u2713 LCK Verificada':'\u2717 Error'}<\/span>\n <\/div>`;\n html += `<div class=\"law-box\" style=\"border-left-color:#64748b;margin-top:10px;background:#1e293b !important;\">\n <div class=\"law-title\" style=\"color:#64748b\">Nodo B (corrientes B\u2192A)<\/div>\n <div class=\"law-eq\" style=\"color:#fff !important;\">\u2212I\u2081 \u2212 I\u2082 \u2212 I\u2083 = 0<\/div>\n <div class=\"law-calc\" style=\"color:#94a3b8;\">= <span style=\"color:${kclOk?'#22c55e':'#ef4444'}\">${fA(-r.kclNodeA,4)}<\/span><\/div>\n <span class=\"badge ${kclOk?'badge-ok':'badge-err'}\" style=\"color:${kclOk?'#22c55e':'#ef4444'};border-color:${kclOk?'rgba(34,197,94,0.3)':'rgba(239,68,68,0.3)'};background:${kclOk?'rgba(34,197,94,0.05)':'rgba(239,68,68,0.05)'};\">${kclOk?'\u2713 LCK Verificada':'\u2717 Error'}<\/span>\n <\/div>`;\n\n \/\/ Detail with reference directions\n html += `<div style=\"padding:12px;background:#1e293b !important;border:1px solid #334155;border-radius:8px;margin-top:10px\">\n <div style=\"font-size:11px;font-weight:600;margin-bottom:6px;color:#e2e8f0;\">Con sentidos de referencia asignados<\/div>`;\n for (let i = 0; i < 3; i++) {\n const b = branches[i], br = r.branches[i], col = COLORS[i];\n html += `<div style=\"display:flex;justify-content:space-between;font-size:11px;padding:4px 0;border-bottom:1px solid #334155\">` +\n `<span style=\"color:${col};font-weight:600\">I${SUB[i]} (${b.currentDir==='down'?'\u2193':'\u2191'})<\/span>` +\n `<span style=\"font-family:monospace;color:#fff !important;font-weight:700\">${fA(br.I_ref)}<\/span>` +\n `<span style=\"font-family:monospace;color:#94a3b8;\">real: ${br.I_branch>=0?'\u2193':'\u2191'} ${fA(Math.abs(br.I_branch))}<\/span>` +\n `<\/div>`;\n }\n html += '<\/div><\/div><\/div>';\n\n \/\/ Equations\n html += `<div class=\"card\" style=\"margin-top:16px;background:#1e293b !important;\"><div class=\"card-header\"><div class=\"card-title\" style=\"color:#e2e8f0;\">\ud83d\udcd0 Sistema de Ecuaciones Completo<\/div><\/div><div class=\"card-body\" style=\"padding-top:0\">`;\n html += `<div class=\"eq-box\" style=\"background:#0d1117 !important;color:#e2e8f0 !important;\">\n <div class=\"eq-title\" style=\"color:#06b6d4;\">LCK en nodo A (\u03a3 I = 0):<\/div>\n <div class=\"eq-indent\" style=\"color:#e2e8f0;\">I\u2081 + I\u2082 + I\u2083 = 0<\/div>\n <hr class=\"separator\">\n <div class=\"eq-title\" style=\"color:#06b6d4;\">LVK por rama (A\u2192B):<\/div>`;\n for (let i = 0; i < 3; i++) {\n const b = branches[i], col = COLORS[i];\n html += `<div class=\"eq-indent\" style=\"color:#e2e8f0;\"><span style=\"color:${col}\">${b.polarity===1?'+':'\u2212'}E${SUB[i]}<\/span> + I${SUB[i]}\u00b7R${SUB[i]} = V<sub>AB<\/sub> \u2192 ${b.polarity===1?'':'\u2212'}${b.E} + I${SUB[i]}\u00b7${b.R} = ${fV(r.V_AB)}<\/div>`;\n }\n html += `<hr class=\"separator\">\n <div class=\"eq-title\" style=\"color:#06b6d4;\">Sustituyendo I\u1d62 = (V<sub>AB<\/sub> \u2212 polarity\u00b7E) \/ R:<\/div>\n <div class=\"eq-indent\" style=\"color:#94a3b8;\">V<sub>AB<\/sub> = \u03a3(polarity\u1d62\u00b7E\u1d62\/R\u1d62) \/ \u03a3(1\/R\u1d62)<\/div>\n <hr class=\"separator\">\n <div class=\"eq-title\" style=\"color:#06b6d4;\">Soluci\u00f3n:<\/div>\n <div class=\"eq-indent\" style=\"color:#e2e8f0;\">V<sub>AB<\/sub> = <span style=\"color:#f59e0b;font-weight:700\">${fV(r.V_AB)}<\/span><\/div>`;\n for (let i = 0; i < 3; i++) {\n html += `<div class=\"eq-indent\" style=\"color:#e2e8f0;\"><span style=\"color:${COLORS[i]}\">I${SUB[i]}<\/span> = <span style=\"color:#fff !important;font-weight:700\">${fA(r.branches[i].I_branch)}<\/span> (A\u2192B)<\/div>`;\n }\n html += '<\/div><\/div><\/div>';\n\n document.getElementById('tab-kirchhoff').innerHTML = html;\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ TABS\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction switchTab(name) {\n document.querySelectorAll('.tab-btn').forEach(b => {\n const isActive = b.dataset.tab === name;\n b.classList.toggle('active', isActive);\n b.style.color = isActive ? '#06b6d4' : '#94a3b8';\n b.style.background = isActive ? 'rgba(6,182,212,0.15)' : 'transparent';\n });\n document.querySelectorAll('.tab-content').forEach(c => c.classList.toggle('active', c.id === 'tab-'+name));\n if (name === 'currents') renderCurrents();\n if (name === 'power') renderPower();\n if (name === 'kirchhoff') renderKirchhoff();\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ RENDER ALL\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction renderResults() {\n renderCurrents();\n renderPower();\n renderKirchhoff();\n}\n\nfunction render() {\n renderControls();\n renderSVG();\n renderResults();\n}\n\nfunction resetParams() {\n branches = JSON.parse(JSON.stringify(DEFAULT));\n controlsBuilt = false;\n render();\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ ANIMATION LOOP\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction animate() {\n animTime = (animTime + 1) % 10000;\n renderSVG();\n animFrame = requestAnimationFrame(animate);\n}\n\n\/\/ Initial render\nrender();\nanimate();\n<\/script>\n<\/div>\n\n\n\n\n<style>\n .btn-guia {\n position: fixed;\n bottom: 24px;\n left: 24px;\n z-index: 999;\n background: #3fb950;\n color: #0d1117;\n font-family: 'Space Grotesk', sans-serif;\n font-size: 0.82rem;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n padding: 10px 18px;\n border-radius: 8px;\n border: none;\n cursor: pointer;\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\n transition: transform 0.2s, box-shadow 0.2s;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .btn-guia:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 24px rgba(63,185,80,0.5);\n }\n .btn-guia svg { width: 15px; height: 15px; flex-shrink: 0; }\n .guia-panel {\n position: fixed;\n bottom: 72px;\n left: 24px;\n width: 400px;\n max-height: 70vh;\n z-index: 1000;\n background: #ffffff;\n border: 1px solid #d0d7de;\n border-radius: 12px;\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\n display: none;\n flex-direction: column;\n overflow: hidden;\n font-family: 'Space Grotesk', sans-serif;\n }\n .guia-panel.visible { display: flex; }\n .guia-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid #d0d7de;\n flex-shrink: 0;\n background: #f6f8fa;\n }\n .guia-header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.85rem;\n font-weight: 700;\n color: #1f2328;\n }\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\n .guia-close {\n background: none;\n border: none;\n color: #636c76;\n font-size: 1rem;\n cursor: pointer;\n padding: 2px 7px;\n border-radius: 4px;\n transition: color 0.2s, background 0.2s;\n line-height: 1;\n }\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\n .guia-body {\n overflow-y: auto;\n padding: 18px 18px 20px;\n color: #1f2328;\n font-size: 0.83rem;\n line-height: 1.65;\n background: #ffffff;\n }\n .guia-body::-webkit-scrollbar { width: 5px; }\n .guia-body::-webkit-scrollbar-track { background: transparent; }\n .guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\n .guia-section-title {\n font-size: 1rem;\n font-weight: 700;\n color: #1f2328;\n margin: 0 0 12px 0;\n padding-bottom: 8px;\n border-bottom: 1px solid #d0d7de;\n }\n .guia-block { margin-bottom: 14px; }\n .guia-label {\n font-size: 0.72rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #636c76;\n margin-bottom: 4px;\n }\n .guia-text { color: #1f2328; }\n .guia-formula {\n background: #f6f8fa;\n border: 1px solid #d0d7de;\n border-radius: 6px;\n padding: 10px 14px;\n text-align: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.88rem;\n color: #0550ae;\n margin: 10px 0;\n }\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\n .guia-steps li {\n counter-increment: steps;\n display: flex;\n gap: 10px;\n margin-bottom: 8px;\n align-items: flex-start;\n color: #1f2328;\n }\n .guia-steps li::before {\n content: counter(steps);\n background: #dafbe1;\n color: #1a7f37;\n font-size: 0.72rem;\n font-weight: 700;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 1px;\n border: 1px solid #1a7f37;\n }\n .guia-result {\n background: #dafbe1;\n border-left: 3px solid #1a7f37;\n border-radius: 0 6px 6px 0;\n padding: 10px 14px;\n color: #1f2328;\n font-size: 0.82rem;\n margin-top: 10px;\n }\n .guia-params {\n background: #f6f8fa;\n border: 1px solid #d0d7de;\n border-radius: 6px;\n padding: 10px 14px;\n font-size: 0.8rem;\n color: #1f2328;\n }\n .guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\n .var { font-family: 'JetBrains Mono', monospace; }\n .var.pos { color: #cf222e; }\n .var.neg { color: #0550ae; }\n .var.neu { color: #7d4e00; }\n .var.ok { color: #1a7f37; }\n<\/style>\n\n<div class=\"guia-panel\" id=\"guiaPanel\">\n <div class=\"guia-header\">\n <div class=\"guia-header-title\">\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>\n Gu\u00eda de uso\n <\/div>\n <button class=\"guia-close\" onclick=\"toggleGuia()\">\u2715<\/button>\n <\/div>\n\n <div class=\"guia-body\">\n\n <!--\u2605 BORRAR DESDE AQUI \u2605-->\n\n\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\n<h3 style=\"color: #0056b3;\"><span style=\"color: #ff0000;\"><strong><span style=\"font-size: 16px;\"><span style=\"color: #000080;\"> Leyes de Kirchhoff: An\u00e1lisis de Circuitos Complejos <\/span> <\/span><\/strong><\/span><strong><span style=\"font-size: 16px; color: #ff0000;\"> <\/span><\/strong><\/h3>\n<strong>Objetivo:<\/strong> Aplicar los principios de conservaci\u00f3n de la carga y de la energ\u00eda para resolver circuitos el\u00e9ctricos que no pueden simplificarse mediante asociaciones serie-paralelo, analizando la distribuci\u00f3n de corrientes y potenciales en nodos y mallas.\n\n<strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que permite construir y analizar redes el\u00e9ctricas con m\u00faltiples fuentes y resistencias. Facilita la verificaci\u00f3n experimental de la Ley de Nodos y la Ley de Mallas, permitiendo visualizar el flujo de portadores de carga y las ca\u00eddas de tensi\u00f3n en cada rama del circuito:\n<div style=\"text-align: center; margin: 20px 0;\"><strong>1\u00aa Ley (Nodos):<\/strong> \\( \\sum I_{entrante} = \\sum I_{saliente} \\)\n<strong>2\u00aa Ley (Mallas):<\/strong> \\( \\sum \\Delta V = 0 \\)<\/div>\n<strong>C\u00f3mo usar (pasos):<\/strong>\n<ul style=\"margin-left: 20px;\">\n \t<li>Configurar la red el\u00e9ctrica ajustando los valores de las resistencias (\\(R\\)) y las fuerzas electromotrices (\\(\\varepsilon\\)) de las fuentes.<\/li>\n \t<li>Identificar los nodos del circuito y utilizar el amper\u00edmetro virtual para medir las intensidades de corriente en cada rama.<\/li>\n \t<li>Recorrer las mallas cerradas utilizando el volt\u00edmetro para registrar las subidas y ca\u00eddas de potencial, verificando que su suma algebraica sea nula.<\/li>\n \t<li>Observar la direcci\u00f3n convencional de la corriente y compararla con el movimiento real de los electrones mediante la animaci\u00f3n del flujo.<\/li>\n \t<li>Cambiar la polaridad de las fuentes para observar c\u00f3mo se reconfiguran las corrientes y los signos de las diferencias de potencial.<\/li>\n<\/ul>\n<strong>Par\u00e1metros ajustables:<\/strong> Resistencia de cada rama (\\(\\Omega\\)), voltaje de las fuentes (\\(V\\)), configuraci\u00f3n de la red y escalas de medici\u00f3n de los instrumentos.\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><strong>Resultados esperados \/ observaciones:<\/strong> Se comprueba que en cualquier nodo la suma de corrientes es cero, y que en cualquier trayectoria cerrada la energ\u00eda suministrada por las fuentes es igual a la energ\u00eda disipada por las resistencias. El simulador permite validar los resultados obtenidos mediante el m\u00e9todo de mallas o nodos estudiado en la teor\u00eda.<\/p>\n\n<\/div>\n\n\n <!--\u2605 BORRAR HASTA AQUI \u2605-->\n\n <\/div>\n<\/div>\n\n<button class=\"btn-guia\" onclick=\"toggleGuia()\">\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>\n Gu\u00eda de uso\n<\/button>\n\n<script>\n function toggleGuia() {\n document.getElementById('guiaPanel').classList.toggle('visible');\n }\n<\/script>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<\/body>\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>Leyes de Kirchhoff \u2014 Simulador Leyes de Kirchhoff \u2014 Simulador 3 ramas en paralelo \u2014 An\u00e1lisis interactivo en tiempo real Reset Mostrar: \u26a1 Corrientes \u00b1…<\/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-7190","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>leyes_de_kirchhoff_2 - 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\/leyes_de_kirchhoff_2\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"leyes_de_kirchhoff_2 - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Leyes de Kirchhoff \u2014 Simulador Leyes de Kirchhoff \u2014 Simulador 3 ramas en paralelo \u2014 An\u00e1lisis interactivo en tiempo real Reset Mostrar: \u26a1 Corrientes \u00b1…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/leyes_de_kirchhoff_2\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-21T13:56:44+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=\"1 minuto\" \/>\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\\\/leyes_de_kirchhoff_2\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/leyes_de_kirchhoff_2\\\/\",\"name\":\"leyes_de_kirchhoff_2 - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\"},\"datePublished\":\"2026-04-21T00:53:00+00:00\",\"dateModified\":\"2026-04-21T13:56:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/leyes_de_kirchhoff_2\\\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/leyes_de_kirchhoff_2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/leyes_de_kirchhoff_2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"leyes_de_kirchhoff_2\"}]},{\"@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":"leyes_de_kirchhoff_2 - 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\/leyes_de_kirchhoff_2\/","og_locale":"es_ES","og_type":"article","og_title":"leyes_de_kirchhoff_2 - F\u00edsica 2","og_description":"Leyes de Kirchhoff \u2014 Simulador Leyes de Kirchhoff \u2014 Simulador 3 ramas en paralelo \u2014 An\u00e1lisis interactivo en tiempo real Reset Mostrar: \u26a1 Corrientes \u00b1…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/leyes_de_kirchhoff_2\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-04-21T13:56:44+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/leyes_de_kirchhoff_2\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/leyes_de_kirchhoff_2\/","name":"leyes_de_kirchhoff_2 - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-04-21T00:53:00+00:00","dateModified":"2026-04-21T13:56:44+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/leyes_de_kirchhoff_2\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/leyes_de_kirchhoff_2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/leyes_de_kirchhoff_2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"leyes_de_kirchhoff_2"}]},{"@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\/7190","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=7190"}],"version-history":[{"count":13,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/7190\/revisions"}],"predecessor-version":[{"id":7214,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/7190\/revisions\/7214"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=7190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}