Laboratorio Virtual - Asociaci\u00f3n de Capacitores<\/title>\r\n <style>\r\n :root {\r\n --bg-primary: #0f172a;\r\n --bg-secondary: #1e293b;\r\n --bg-tertiary: #334155;\r\n --fg-primary: #f1f5f9;\r\n --fg-secondary: #94a3b8;\r\n --fg-muted: #64748b;\r\n --accent: #38bdf8;\r\n --positive: #ef4444;\r\n --negative: #3b82f6;\r\n --success: #22c55e;\r\n --warning: #f59e0b;\r\n --border: #475569;\r\n --capacitor-body: #f97316;\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body {\r\n font-family: 'Segoe UI', system-ui, sans-serif;\r\n background: var(--bg-primary);\r\n color: var(--fg-primary);\r\n min-height: 100vh;\r\n overflow-x: hidden;\r\n }\r\n\r\n .container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n padding: 16px;\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n }\r\n\r\n header {\r\n background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);\r\n border: 1px solid var(--border);\r\n border-radius: 12px;\r\n padding: 12px 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n header h1 { font-size: 1.3rem; font-weight: 600; }\r\n header h1 span { color: var(--accent); }\r\n .mode-badge {\r\n background: var(--accent); color: var(--bg-primary);\r\n padding: 5px 14px; border-radius: 20px;\r\n font-size: 0.8rem; font-weight: 600; text-transform: uppercase;\r\n }\r\n\r\n .main-row {\r\n display: grid;\r\n grid-template-columns: 1fr 340px;\r\n gap: 16px;\r\n }\r\n\r\n .panel {\r\n background: var(--bg-secondary);\r\n border: 1px solid var(--border);\r\n border-radius: 12px;\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .section-title {\r\n font-size: 0.7rem; text-transform: uppercase;\r\n letter-spacing: 1.5px; color: var(--fg-muted);\r\n padding-bottom: 8px; border-bottom: 1px solid var(--border);\r\n margin-bottom: 12px;\r\n }\r\n\r\n .circuit-container {\r\n background: var(--bg-primary);\r\n border-radius: 8px; \r\n padding: 10px;\r\n height: 400px; \r\n position: relative;\r\n }\r\n #circuitCanvas { width: 100%; height: 100%; display: block; }\r\n\r\n .control-group { margin-bottom: 12px; }\r\n .control-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }\r\n .control-label { font-size: 0.8rem; color: var(--fg-secondary); }\r\n .control-value { font-family: 'Courier New', monospace; font-weight: 600; color: var(--accent); font-size: 0.85rem; }\r\n input[type=\"range\"] { width: 100%; height: 5px; background: var(--bg-tertiary); border-radius: 3px; appearance: none; cursor: pointer; }\r\n input[type=\"range\"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--accent); border-radius: 50%; cursor: pointer; }\r\n \r\n .mode-selector { display: flex; gap: 6px; margin-bottom: 12px; }\r\n .mode-btn {\r\n flex: 1; padding: 8px; background: var(--bg-tertiary); border: 1px solid var(--border);\r\n border-radius: 6px; color: var(--fg-secondary); cursor: pointer;\r\n font-size: 0.75rem; font-weight: 600; text-align: center; transition: all 0.2s;\r\n }\r\n .mode-btn.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }\r\n \r\n .action-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 8px;\r\n margin-top: 12px;\r\n padding-top: 12px;\r\n border-top: 1px solid var(--border);\r\n }\r\n \r\n .btn {\r\n padding: 10px 14px; border: none; border-radius: 6px;\r\n font-size: 0.8rem; font-weight: 600; cursor: pointer;\r\n transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px;\r\n width: 100%;\r\n }\r\n .btn-primary { background: var(--accent); color: var(--bg-primary); }\r\n .btn-secondary { background: var(--bg-tertiary); color: var(--fg-primary); border: 1px solid var(--border); }\r\n .btn-success { background: var(--success); color: white; }\r\n .btn-danger { background: var(--positive); color: white; }\r\n\r\n .table-container { max-height: 300px; overflow: auto; border-radius: 6px; border: 1px solid var(--border); }\r\n table { width: 100%; border-collapse: collapse; font-size: 0.65rem; min-width: 900px; }\r\n th { background: var(--bg-tertiary); padding: 6px 4px; text-align: center; color: var(--fg-secondary); position: sticky; top: 0; z-index:1;}\r\n td { padding: 6px 4px; text-align: center; border-top: 1px solid var(--border); color: #000000; }\r\n tr:hover td { background: var(--bg-tertiary); }\r\n input[type=\"number\"] { \r\n width: 40px; background: var(--bg-tertiary); border: 1px solid var(--border); \r\n color: var(--accent); text-align: right; font-family: monospace; font-size: 0.65rem;\r\n padding: 2px;\r\n }\r\n \r\n @media (max-width: 1024px) { .main-row { grid-template-columns: 1fr; } }\r\n\t\t\r\n\t\theader {\r\n display: flex;\r\n justify-content: space-between; \/* Crea las tres columnas *\/\r\n align-items: center;\r\n padding: 15px 25px;\r\n background-color: #1e293b; \/* Color oscuro para que resalte el blanco *\/\r\n min-height: 80px\r\n}\r\n\r\n\/* Columna Izquierda *\/\r\nheader h1 {\r\n flex: 1; \/* Ocupa el mismo espacio que la derecha para centrar el medio *\/\r\n margin: 0;\r\n font-size: 1.1rem;\r\n text-align: left;\r\n color: #ffffff; \/* Laboratorio Virtual en Blanco *\/\r\n}\r\n\r\nheader h1 span {\r\n color: #38bdf8; \/* Color para Asociaci\u00f3n de Capacitores *\/\r\n display: block; \/* Opcional: ponerlo debajo si el texto es muy largo *\/\r\n}\r\n\r\n\/* Columna Central *\/\r\n.header-center {\r\n flex: 2; \/* Espacio prioritario para el logo *\/\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 15px;\r\n}\r\n\r\n.header-logo {\r\n height: 50px; \/* <--- AJUSTA EL TAMA\u00d1O AQU\u00cd *\/\r\n width: 75px;\r\n filter: drop-shadow(0 0 5px rgba(0,0,0,0.2)); \/* Opcional: para que resalte *\/\r\n}\r\n\r\n.header-subtitle {\r\n font-size: 0.8rem;\r\n color: #94a3b8;\r\n margin: 0;\r\n white-space: nowrap;\r\n}\r\n\r\n\/* Columna Derecha *\/\r\n.mode-indicator {\r\n flex: 1;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \t\t\r\n\t\t<header>\r\n <h1>Laboratorio Virtual <br><span>Asociaci\u00f3n de Capacitores<\/span><\/h1>\r\n\r\n <div class=\"header-center\">\r\n <a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\r\n <img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"Fluxar Logo\" class=\"header-logo\"><\/a>\r\n <p class=\"header-subtitle\">Simulaciones Interactivas FICA-UNSL<\/p>\r\n <\/div>\r\n\r\n <div class=\"mode-indicator\">\r\n <span id=\"modeText\" style=\"color: #94a3b8; font-size: 0.85rem;\">Modo Normal<\/span>\r\n <span id=\"modeBadge\" class=\"mode-badge\">Normal<\/span>\r\n <\/div>\r\n<\/header>\r\n <div class=\"main-row\">\r\n <div class=\"panel viz-panel\">\r\n <div class=\"section-title\">\u00c1rea de Trabajo<\/div>\r\n <div class=\"circuit-container\">\r\n <canvas id=\"circuitCanvas\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"panel controls-panel\">\r\n <div class=\"section-title\">Par\u00e1metros<\/div>\r\n \r\n <div class=\"mode-selector\">\r\n <button class=\"mode-btn active\" data-mode=\"single\">Individual<\/button>\r\n <button class=\"mode-btn\" data-mode=\"series\">Serie<\/button>\r\n <button class=\"mode-btn\" data-mode=\"parallel\">Paralelo<\/button>\r\n <\/div>\r\n\r\n <div class=\"control-group\">\r\n <div class=\"control-row\">\r\n <span class=\"control-label\">Voltaje Fuente<\/span>\r\n <span class=\"control-value\" id=\"voltageVal\">10.0 V<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"voltageSlider\" min=\"1\" max=\"20\" step=\"0.5\" value=\"10\">\r\n <\/div>\r\n\r\n <div id=\"capacitorControls\">\r\n <div class=\"control-group\">\r\n <div class=\"control-row\">\r\n <span class=\"control-label\">C1 (\u00b5F)<\/span>\r\n <span class=\"control-value\" id=\"c1Val\">100 \u00b5F<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"c1Slider\" min=\"1\" max=\"1000\" step=\"1\" value=\"100\" class=\"cap-slider\">\r\n <\/div>\r\n\r\n <div class=\"control-group\" id=\"c2Group\" style=\"display: none;\">\r\n <div class=\"control-row\">\r\n <span class=\"control-label\">C2 (\u00b5F)<\/span>\r\n <span class=\"control-value\" id=\"c2Val\">200 \u00b5F<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"c2Slider\" min=\"1\" max=\"1000\" step=\"1\" value=\"200\" class=\"cap-slider\">\r\n <\/div>\r\n\r\n <div class=\"control-group\" id=\"c3Group\" style=\"display: none;\">\r\n <div class=\"control-row\">\r\n <span class=\"control-label\">C3 (\u00b5F)<\/span>\r\n <span class=\"control-value\" id=\"c3Val\">300 \u00b5F<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"c3Slider\" min=\"1\" max=\"1000\" step=\"1\" value=\"300\" class=\"cap-slider\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"control-group\" style=\"display: flex; gap: 15px; margin-bottom: 0;\">\r\n <div class=\"checkbox-item\" style=\"display: flex; align-items: center; gap: 6px; cursor: pointer;\">\r\n <input type=\"checkbox\" id=\"showValues\" checked>\r\n <label for=\"showValues\" style=\"font-size: 0.75rem; cursor: pointer;\">Mostrar Valores<\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"action-grid\">\r\n <button class=\"btn btn-primary\" id=\"btnCharge\">Iniciar Carga<\/button>\r\n <button class=\"btn btn-danger\" id=\"btnDischarge\">Descargar<\/button>\r\n <button class=\"btn btn-success\" id=\"btnRecord\">Registrar<\/button>\r\n <button class=\"btn btn-secondary\" id=\"btnReset\">Limpiar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"panel data-panel data-panel-wrapper\">\r\n <div class=\"section-title\">Registro de Datos<\/div>\r\n <div class=\"table-container\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>#<\/th><th>Tipo<\/th><th>V<\/th>\r\n <th>V1<\/th><th>V2<\/th><th>V3<\/th>\r\n <th>C1<\/th><th>C2<\/th><th>C3<\/th>\r\n <th>Ceq<br><span style=\"font-weight:normal\">Te\u00f3rica<\/span><\/th>\r\n <th>q1<br>(mC)<\/th><th>q2<br>(mC)<\/th><th>q3<br>(mC)<\/th><th>qt<br>(mC)<\/th>\r\n <th>Ceq<br>Medida<\/th><th>Error<br>%<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"dataTableBody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const state = {\r\n mode: 'single',\r\n voltage: 10,\r\n c1: 100e-6, c2: 200e-6, c3: 300e-6,\r\n chargeTime: 0,\r\n maxChargeTime: 1.5, \r\n isCharging: false,\r\n isCharged: false,\r\n isSwitchClosed: false, \r\n animationId: null,\r\n ceq: 0, qTotal: 0,\r\n v1: 0, v2: 0, v3: 0, \r\n q1: 0, q2: 0, q3: 0,\r\n records: [],\r\n showValues: true\r\n };\r\n\r\n const els = {\r\n canvas: document.getElementById('circuitCanvas'),\r\n voltageSlider: document.getElementById('voltageSlider'), voltageVal: document.getElementById('voltageVal'),\r\n c1Slider: document.getElementById('c1Slider'), c1Val: document.getElementById('c1Val'), c2Group: document.getElementById('c2Group'),\r\n c2Slider: document.getElementById('c2Slider'), c2Val: document.getElementById('c2Val'),\r\n c3Group: document.getElementById('c3Group'), c3Slider: document.getElementById('c3Slider'), c3Val: document.getElementById('c3Val'),\r\n modeBtns: document.querySelectorAll('.mode-btn'),\r\n chargeBtn: document.getElementById('btnCharge'), dischargeBtn: document.getElementById('btnDischarge'),\r\n resetBtn: document.getElementById('btnReset'), recordBtn: document.getElementById('btnRecord'),\r\n showValuesCb: document.getElementById('showValues'),\r\n dataTable: document.getElementById('dataTableBody')\r\n };\r\n\r\n function calcCapacitance() {\r\n const activeC = state.mode === 'single' ? [state.c1] : [state.c1, state.c2, state.c3];\r\n \r\n if (state.mode === 'single') state.ceq = state.c1;\r\n else if (state.mode === 'series') {\r\n let inv = 0; activeC.forEach(cap => inv += 1\/cap);\r\n state.ceq = 1\/inv;\r\n } else if (state.mode === 'parallel') {\r\n state.ceq = activeC.reduce((a, b) => a + b, 0);\r\n }\r\n \r\n state.qTotal = state.ceq * state.voltage;\r\n \r\n if (state.mode === 'series') {\r\n const q = state.qTotal;\r\n state.q1 = q; state.q2 = q; state.q3 = q;\r\n state.v1 = q \/ state.c1; state.v2 = q \/ state.c2; state.v3 = q \/ state.c3;\r\n } else if (state.mode === 'parallel') {\r\n const v = state.voltage;\r\n state.v1 = v; state.v2 = v; state.v3 = v;\r\n state.q1 = state.c1 * v; state.q2 = state.c2 * v; state.q3 = state.c3 * v;\r\n } else {\r\n state.q1 = state.qTotal; state.v1 = state.voltage;\r\n state.q2 = 0; state.q3 = 0; state.v2 = 0; state.v3 = 0;\r\n }\r\n }\r\n\r\n function draw() {\r\n const canvas = els.canvas;\r\n const ctx = canvas.getContext('2d');\r\n if (canvas.width !== canvas.clientWidth) canvas.width = canvas.clientWidth;\r\n if (canvas.height !== canvas.clientHeight) canvas.height = canvas.clientHeight;\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n \r\n const w = canvas.width, h = canvas.height, margin = 50;\r\n const topY = margin, botY = h - margin, leftX = margin, rightX = w - margin, cy = h \/ 2;\r\n \r\n \/\/ --- MARCO GENERAL ---\r\n ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.lineCap = 'round';\r\n ctx.beginPath(); ctx.moveTo(leftX, topY); ctx.lineTo(leftX, cy - 40); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(leftX, botY); ctx.lineTo(leftX, cy + 40); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(leftX, botY); ctx.lineTo(rightX, botY); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(rightX, topY); ctx.lineTo(rightX, botY); ctx.stroke();\r\n \r\n \/\/ --- INTERRUPTOR ---\r\n const switchX = leftX + 60;\r\n ctx.beginPath(); ctx.moveTo(leftX, topY); ctx.lineTo(switchX - 15, topY); ctx.stroke();\r\n ctx.strokeStyle = '#94a3b8';\r\n ctx.beginPath(); ctx.arc(switchX - 15, topY, 5, 0, Math.PI * 2); ctx.stroke();\r\n ctx.beginPath(); ctx.arc(switchX + 15, topY, 5, 0, Math.PI * 2); ctx.stroke();\r\n ctx.save(); ctx.translate(switchX - 15, topY);\r\n ctx.rotate(state.isSwitchClosed ? 0 : -0.5);\r\n ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(35, 0); ctx.stroke();\r\n ctx.restore();\r\n\r\n \/\/ --- BATERIA ---\r\n ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 4;\r\n ctx.beginPath(); ctx.moveTo(leftX - 15, cy - 25); ctx.lineTo(leftX + 15, cy - 25); ctx.stroke();\r\n ctx.lineWidth = 2;\r\n ctx.beginPath(); ctx.moveTo(leftX - 8, cy + 25); ctx.lineTo(leftX + 8, cy + 25); ctx.stroke();\r\n ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 14px monospace'; ctx.textAlign = 'center';\r\n ctx.fillText(state.voltage + 'V', leftX + 30, cy + 5);\r\n ctx.fillStyle = '#ef4444'; ctx.fillText('+', leftX - 25, cy - 20);\r\n ctx.fillStyle = '#3b82f6'; ctx.fillText('-', leftX - 25, cy + 20);\r\n \r\n \/\/ --- CAPACITORES ---\r\n const plateH = 50, plateGap = 20;\r\n const railStart = switchX + 15, railEnd = rightX;\r\n const railWidth = railEnd - railStart;\r\n\r\n if (state.mode === 'single') {\r\n const capX = railStart + railWidth \/ 2;\r\n ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3;\r\n ctx.beginPath(); ctx.moveTo(switchX + 15, topY); ctx.lineTo(capX - plateGap\/2, topY); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(capX + plateGap\/2, topY); ctx.lineTo(railEnd, topY); ctx.stroke();\r\n \r\n ctx.strokeStyle = '#f97316'; ctx.lineWidth = 4;\r\n ctx.beginPath(); ctx.moveTo(capX - plateGap\/2, topY - plateH\/2); ctx.lineTo(capX - plateGap\/2, topY + plateH\/2); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(capX + plateGap\/2, topY - plateH\/2); ctx.lineTo(capX + plateGap\/2, topY + plateH\/2); ctx.stroke();\r\n\r\n if (state.showValues) {\r\n ctx.fillStyle = '#f97316'; ctx.font = 'bold 12px monospace';\r\n ctx.fillText('C1', capX, topY - 35);\r\n ctx.fillText((state.c1*1e6).toFixed(0) + '\u00b5F', capX, topY + 45);\r\n }\r\n } else if (state.mode === 'series') {\r\n const numCaps = 3, spacing = railWidth \/ numCaps;\r\n let currentX = switchX + 15;\r\n for(let i=0; i<numCaps; i++) {\r\n const capX = railStart + (i + 0.5) * spacing;\r\n ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3;\r\n ctx.beginPath(); ctx.moveTo(currentX, topY); ctx.lineTo(capX - plateGap\/2, topY); ctx.stroke();\r\n \r\n ctx.strokeStyle = '#f97316'; ctx.lineWidth = 4;\r\n ctx.beginPath(); ctx.moveTo(capX - plateGap\/2, topY - plateH\/2); ctx.lineTo(capX - plateGap\/2, topY + plateH\/2); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(capX + plateGap\/2, topY - plateH\/2); ctx.lineTo(capX + plateGap\/2, topY + plateH\/2); ctx.stroke();\r\n currentX = capX + plateGap\/2;\r\n\r\n if (state.showValues) {\r\n let val = i==0 ? state.c1 : (i==1 ? state.c2 : state.c3);\r\n ctx.fillStyle = '#f97316'; ctx.font = 'bold 12px monospace';\r\n ctx.fillText('C' + (i+1), capX, topY - 35);\r\n ctx.fillText((val*1e6).toFixed(0) + '\u00b5F', capX, topY + 45);\r\n }\r\n }\r\n ctx.strokeStyle = '#64748b'; ctx.beginPath(); ctx.moveTo(currentX, topY); ctx.lineTo(railEnd, topY); ctx.stroke();\r\n } else if (state.mode === 'parallel') {\r\n const spacing = (railEnd - railStart - 40) \/ 3;\r\n ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3;\r\n ctx.beginPath(); ctx.moveTo(switchX + 15, topY); ctx.lineTo(railEnd, topY); ctx.stroke();\r\n for(let i=0; i<3; i++) {\r\n const branchX = railStart + 30 + (i * spacing);\r\n ctx.beginPath(); ctx.moveTo(branchX, topY); ctx.lineTo(branchX, topY + 30); ctx.stroke();\r\n ctx.strokeStyle = '#f97316'; ctx.lineWidth = 4;\r\n ctx.beginPath(); ctx.moveTo(branchX - 25, topY + 30); ctx.lineTo(branchX + 25, topY + 30); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(branchX - 25, topY + 30 + plateGap); ctx.lineTo(branchX + 25, topY + 30 + plateGap); ctx.stroke();\r\n ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3;\r\n ctx.beginPath(); ctx.moveTo(branchX, topY + 30 + plateGap); ctx.lineTo(branchX, botY); ctx.stroke();\r\n if (state.showValues) {\r\n let val = i==0 ? state.c1 : (i==1 ? state.c2 : state.c3);\r\n ctx.fillStyle = '#f97316'; ctx.font = 'bold 12px monospace'; ctx.textAlign = 'left';\r\n ctx.fillText('C' + (i+1) + ' ' + (val*1e6).toFixed(0) + '\u00b5F', branchX + 30, topY + 40);\r\n }\r\n }\r\n }\r\n if (state.isCharged || state.isCharging) drawCharges();\r\n }\r\n \r\n function drawCharges() {\r\n const ctx = els.canvas.getContext('2d'), progress = Math.min(state.chargeTime \/ state.maxChargeTime, 1);\r\n const margin = 50, railStart = margin + 75, railEnd = els.canvas.width - margin;\r\n const railWidth = railEnd - railStart, topY = margin, plateGap = 20;\r\n \r\n if (state.mode === 'single') {\r\n drawChargeOnCapH(ctx, railStart + railWidth\/2, topY, progress, state.c1, plateGap);\r\n } else if (state.mode === 'series') {\r\n for(let i=0; i<3; i++) drawChargeOnCapH(ctx, railStart + (i + 0.5) * (railWidth\/3), topY, progress, i==0?state.c1:i==1?state.c2:state.c3, plateGap);\r\n } else if (state.mode === 'parallel') {\r\n const spacing = (railEnd - railStart - 40) \/ 3;\r\n for(let i=0; i<3; i++) drawChargeOnCapV(ctx, railStart + 30 + (i * spacing), topY + 30, progress, i==0?state.c1:i==1?state.c2:state.c3, plateGap);\r\n }\r\n }\r\n \r\n function drawChargeOnCapH(ctx, x, y, t, c, gap) {\r\n const count = Math.floor(t * 3); if(count < 1) return;\r\n const h = 24, spacing = h \/ 3;\r\n for(let i=0; i<count; i++) {\r\n const yPos = y - h\/2 + (i+0.5)*spacing;\r\n ctx.fillStyle = '#ef4444'; ctx.fillText('+', x - gap\/2 - 10, yPos + 4);\r\n ctx.fillStyle = '#3b82f6'; ctx.fillText('-', x + gap\/2 + 10, yPos + 4);\r\n }\r\n }\r\n \r\n function drawChargeOnCapV(ctx, x, y, t, c, gap) {\r\n const count = Math.floor(t * 3); if(count < 1) return;\r\n const w = 40, spacing = w \/ 3;\r\n for(let i=0; i<count; i++) {\r\n const xPos = x - w\/2 + (i+0.5)*spacing;\r\n ctx.fillStyle = '#ef4444'; ctx.fillText('+', xPos, y - 5);\r\n ctx.fillStyle = '#3b82f6'; ctx.fillText('-', xPos, y + gap + 12);\r\n }\r\n }\r\n\r\n function simulate(timestamp) {\r\n if (!state.isCharging) return;\r\n if (!state.lastTimestamp) state.lastTimestamp = timestamp;\r\n const dt = (timestamp - state.lastTimestamp) \/ 1000;\r\n state.lastTimestamp = timestamp;\r\n state.chargeTime += dt;\r\n if (state.chargeTime >= state.maxChargeTime) {\r\n state.isCharging = false; state.isCharged = true; state.chargeTime = state.maxChargeTime;\r\n }\r\n draw();\r\n if (state.isCharging) state.animId = requestAnimationFrame(simulate);\r\n }\r\n \r\n function startCharge() {\r\n if (state.animId) cancelAnimationFrame(state.animId);\r\n state.isSwitchClosed = true; state.isCharging = true; state.isCharged = false;\r\n state.chargeTime = 0; state.lastTimestamp = 0;\r\n calcCapacitance();\r\n state.animId = requestAnimationFrame(simulate);\r\n }\r\n \r\n function discharge() {\r\n if (state.animId) cancelAnimationFrame(state.animId);\r\n state.isSwitchClosed = false; state.isCharging = false; state.isCharged = false;\r\n state.chargeTime = 0; draw();\r\n }\r\n\r\n function updateParams() {\r\n state.voltage = parseFloat(els.voltageSlider.value);\r\n state.c1 = parseFloat(els.c1Slider.value) * 1e-6;\r\n state.c2 = parseFloat(els.c2Slider.value) * 1e-6;\r\n state.c3 = parseFloat(els.c3Slider.value) * 1e-6;\r\n els.voltageVal.textContent = state.voltage.toFixed(1) + ' V';\r\n els.c1Val.textContent = (state.c1 * 1e6).toFixed(0) + ' \u00b5F';\r\n els.c2Val.textContent = (state.c2 * 1e6).toFixed(0) + ' \u00b5F';\r\n els.c3Val.textContent = (state.c3 * 1e6).toFixed(0) + ' \u00b5F';\r\n els.c2Group.style.display = state.mode === 'single' ? 'none' : 'block';\r\n els.c3Group.style.display = state.mode === 'single' ? 'none' : 'block';\r\n calcCapacitance(); draw();\r\n }\r\n\r\n function switchMode(mode) {\r\n state.mode = mode;\r\n els.modeBtns.forEach(b => b.classList.toggle('active', b.dataset.mode === mode));\r\n discharge(); updateParams();\r\n }\r\n\r\n function recordData() {\r\n if (!state.isCharged) return alert(\"Cargue el circuito primero.\");\r\n const type = state.mode === 'single' ? 'Individual' : state.mode === 'series' ? 'Serie' : 'Paralelo';\r\n state.records.push({\r\n type, v: state.voltage, v1: state.v1, v2: state.v2, v3: state.v3,\r\n c1: state.c1 * 1e6, c2: state.c2 * 1e6, c3: state.c3 * 1e6,\r\n ceqT: state.ceq * 1e6, q1: state.q1 * 1e3, q2: state.q2 * 1e3, q3: state.q3 * 1e3, qt: state.qTotal * 1e3,\r\n ceqM: null, err: null\r\n });\r\n renderTable();\r\n }\r\n \r\n window.calculateError = function(index) {\r\n const row = state.records[index];\r\n const measured = parseFloat(document.getElementById(`meas_${index}`).value);\r\n if (!isNaN(measured) && measured > 0) {\r\n row.ceqM = measured;\r\n row.err = Math.abs((measured - row.ceqT) \/ row.ceqT * 100);\r\n renderTable();\r\n }\r\n };\r\n\r\n function renderTable() {\r\n els.dataTable.innerHTML = state.records.map((r, i) => `\r\n <tr>\r\n <td>${i+1}<\/td><td>${r.type}<\/td><td>${r.v.toFixed(1)}<\/td>\r\n <td>${r.v1.toFixed(2)}<\/td><td>${r.v2.toFixed(2)}<\/td><td>${r.v3.toFixed(2)}<\/td>\r\n <td>${r.c1.toFixed(0)}<\/td><td>${r.c2.toFixed(0)}<\/td><td>${r.c3.toFixed(0)}<\/td>\r\n <td style=\"color: var(--accent); font-weight:bold;\">${r.ceqT.toFixed(2)}<\/td>\r\n <td>${r.q1.toFixed(2)}<\/td><td>${r.q2.toFixed(2)}<\/td><td>${r.q3.toFixed(2)}<\/td><td>${r.qt.toFixed(2)}<\/td>\r\n <td><input type=\"number\" id=\"meas_${i}\" step=\"0.01\" value=\"${r.ceqM || ''}\" onchange=\"calculateError(${i})\"><\/td>\r\n <td style=\"color: ${r.err !== null ? (r.err < 5 ? 'var(--success)' : 'var(--positive)') : 'inherit'}\">${r.err !== null ? r.err.toFixed(2) : '-'}<\/td>\r\n <\/tr>`).join('');\r\n }\r\n\r\n function init() {\r\n els.voltageSlider.oninput = updateParams;\r\n els.c1Slider.oninput = updateParams;\r\n els.c2Slider.oninput = updateParams;\r\n els.c3Slider.oninput = updateParams;\r\n els.modeBtns.forEach(b => b.onclick = () => switchMode(b.dataset.mode));\r\n els.chargeBtn.onclick = startCharge;\r\n els.dischargeBtn.onclick = discharge;\r\n els.recordBtn.onclick = recordData;\r\n els.resetBtn.onclick = () => { state.records = []; renderTable(); discharge(); };\r\n els.showValuesCb.onchange = (e) => { state.showValues = e.target.checked; draw(); };\r\n window.onresize = draw;\r\n updateParams();\r\n }\r\n\r\n init();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Laboratorio Virtual – Asociaci\u00f3n de Capacitores Laboratorio Virtual Asociaci\u00f3n de Capacitores Simulaciones Interactivas FICA-UNSL Modo Normal Normal \u00c1rea de Trabajo Par\u00e1metros Individual Serie Paralelo Voltaje…<\/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-6227","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>asociacion_capacitores - 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\/asociacion_capacitores\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"asociacion_capacitores - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Laboratorio Virtual – Asociaci\u00f3n de Capacitores Laboratorio Virtual Asociaci\u00f3n de Capacitores Simulaciones Interactivas FICA-UNSL Modo Normal Normal \u00c1rea de Trabajo Par\u00e1metros Individual Serie Paralelo Voltaje…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-19T17:56:00+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\/asociacion_capacitores\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/\",\"name\":\"asociacion_capacitores - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\"},\"datePublished\":\"2026-03-16T12:36:52+00:00\",\"dateModified\":\"2026-03-19T17:56:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"asociacion_capacitores\"}]},{\"@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_head_json":{"title":"asociacion_capacitores - 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\/asociacion_capacitores\/","og_locale":"es_ES","og_type":"article","og_title":"asociacion_capacitores - F\u00edsica 2","og_description":"Laboratorio Virtual – Asociaci\u00f3n de Capacitores Laboratorio Virtual Asociaci\u00f3n de Capacitores Simulaciones Interactivas FICA-UNSL Modo Normal Normal \u00c1rea de Trabajo Par\u00e1metros Individual Serie Paralelo Voltaje…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-03-19T17:56:00+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\/asociacion_capacitores\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/","name":"asociacion_capacitores - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-16T12:36:52+00:00","dateModified":"2026-03-19T17:56:00+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"asociacion_capacitores"}]},{"@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\/6227","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=6227"}],"version-history":[{"count":25,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6227\/revisions"}],"predecessor-version":[{"id":6700,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6227\/revisions\/6700"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=6227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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 Laboratorio Virtual - Asociaci\u00f3n de Capacitores<\/title>\r\n <style>\r\n :root {\r\n --bg-primary: #0f172a;\r\n --bg-secondary: #1e293b;\r\n --bg-tertiary: #334155;\r\n --fg-primary: #f1f5f9;\r\n --fg-secondary: #94a3b8;\r\n --fg-muted: #64748b;\r\n --accent: #38bdf8;\r\n --positive: #ef4444;\r\n --negative: #3b82f6;\r\n --success: #22c55e;\r\n --warning: #f59e0b;\r\n --border: #475569;\r\n --capacitor-body: #f97316;\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body {\r\n font-family: 'Segoe UI', system-ui, sans-serif;\r\n background: var(--bg-primary);\r\n color: var(--fg-primary);\r\n min-height: 100vh;\r\n overflow-x: hidden;\r\n }\r\n\r\n .container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n padding: 16px;\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n }\r\n\r\n header {\r\n background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);\r\n border: 1px solid var(--border);\r\n border-radius: 12px;\r\n padding: 12px 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n header h1 { font-size: 1.3rem; font-weight: 600; }\r\n header h1 span { color: var(--accent); }\r\n .mode-badge {\r\n background: var(--accent); color: var(--bg-primary);\r\n padding: 5px 14px; border-radius: 20px;\r\n font-size: 0.8rem; font-weight: 600; text-transform: uppercase;\r\n }\r\n\r\n .main-row {\r\n display: grid;\r\n grid-template-columns: 1fr 340px;\r\n gap: 16px;\r\n }\r\n\r\n .panel {\r\n background: var(--bg-secondary);\r\n border: 1px solid var(--border);\r\n border-radius: 12px;\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .section-title {\r\n font-size: 0.7rem; text-transform: uppercase;\r\n letter-spacing: 1.5px; color: var(--fg-muted);\r\n padding-bottom: 8px; border-bottom: 1px solid var(--border);\r\n margin-bottom: 12px;\r\n }\r\n\r\n .circuit-container {\r\n background: var(--bg-primary);\r\n border-radius: 8px; \r\n padding: 10px;\r\n height: 400px; \r\n position: relative;\r\n }\r\n #circuitCanvas { width: 100%; height: 100%; display: block; }\r\n\r\n .control-group { margin-bottom: 12px; }\r\n .control-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }\r\n .control-label { font-size: 0.8rem; color: var(--fg-secondary); }\r\n .control-value { font-family: 'Courier New', monospace; font-weight: 600; color: var(--accent); font-size: 0.85rem; }\r\n input[type=\"range\"] { width: 100%; height: 5px; background: var(--bg-tertiary); border-radius: 3px; appearance: none; cursor: pointer; }\r\n input[type=\"range\"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--accent); border-radius: 50%; cursor: pointer; }\r\n \r\n .mode-selector { display: flex; gap: 6px; margin-bottom: 12px; }\r\n .mode-btn {\r\n flex: 1; padding: 8px; background: var(--bg-tertiary); border: 1px solid var(--border);\r\n border-radius: 6px; color: var(--fg-secondary); cursor: pointer;\r\n font-size: 0.75rem; font-weight: 600; text-align: center; transition: all 0.2s;\r\n }\r\n .mode-btn.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }\r\n \r\n .action-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 8px;\r\n margin-top: 12px;\r\n padding-top: 12px;\r\n border-top: 1px solid var(--border);\r\n }\r\n \r\n .btn {\r\n padding: 10px 14px; border: none; border-radius: 6px;\r\n font-size: 0.8rem; font-weight: 600; cursor: pointer;\r\n transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px;\r\n width: 100%;\r\n }\r\n .btn-primary { background: var(--accent); color: var(--bg-primary); }\r\n .btn-secondary { background: var(--bg-tertiary); color: var(--fg-primary); border: 1px solid var(--border); }\r\n .btn-success { background: var(--success); color: white; }\r\n .btn-danger { background: var(--positive); color: white; }\r\n\r\n .table-container { max-height: 300px; overflow: auto; border-radius: 6px; border: 1px solid var(--border); }\r\n table { width: 100%; border-collapse: collapse; font-size: 0.65rem; min-width: 900px; }\r\n th { background: var(--bg-tertiary); padding: 6px 4px; text-align: center; color: var(--fg-secondary); position: sticky; top: 0; z-index:1;}\r\n td { padding: 6px 4px; text-align: center; border-top: 1px solid var(--border); color: #000000; }\r\n tr:hover td { background: var(--bg-tertiary); }\r\n input[type=\"number\"] { \r\n width: 40px; background: var(--bg-tertiary); border: 1px solid var(--border); \r\n color: var(--accent); text-align: right; font-family: monospace; font-size: 0.65rem;\r\n padding: 2px;\r\n }\r\n \r\n @media (max-width: 1024px) { .main-row { grid-template-columns: 1fr; } }\r\n\t\t\r\n\t\theader {\r\n display: flex;\r\n justify-content: space-between; \/* Crea las tres columnas *\/\r\n align-items: center;\r\n padding: 15px 25px;\r\n background-color: #1e293b; \/* Color oscuro para que resalte el blanco *\/\r\n min-height: 80px\r\n}\r\n\r\n\/* Columna Izquierda *\/\r\nheader h1 {\r\n flex: 1; \/* Ocupa el mismo espacio que la derecha para centrar el medio *\/\r\n margin: 0;\r\n font-size: 1.1rem;\r\n text-align: left;\r\n color: #ffffff; \/* Laboratorio Virtual en Blanco *\/\r\n}\r\n\r\nheader h1 span {\r\n color: #38bdf8; \/* Color para Asociaci\u00f3n de Capacitores *\/\r\n display: block; \/* Opcional: ponerlo debajo si el texto es muy largo *\/\r\n}\r\n\r\n\/* Columna Central *\/\r\n.header-center {\r\n flex: 2; \/* Espacio prioritario para el logo *\/\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 15px;\r\n}\r\n\r\n.header-logo {\r\n height: 50px; \/* <--- AJUSTA EL TAMA\u00d1O AQU\u00cd *\/\r\n width: 75px;\r\n filter: drop-shadow(0 0 5px rgba(0,0,0,0.2)); \/* Opcional: para que resalte *\/\r\n}\r\n\r\n.header-subtitle {\r\n font-size: 0.8rem;\r\n color: #94a3b8;\r\n margin: 0;\r\n white-space: nowrap;\r\n}\r\n\r\n\/* Columna Derecha *\/\r\n.mode-indicator {\r\n flex: 1;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \t\t\r\n\t\t<header>\r\n <h1>Laboratorio Virtual <br><span>Asociaci\u00f3n de Capacitores<\/span><\/h1>\r\n\r\n <div class=\"header-center\">\r\n <a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\r\n <img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"Fluxar Logo\" class=\"header-logo\"><\/a>\r\n <p class=\"header-subtitle\">Simulaciones Interactivas FICA-UNSL<\/p>\r\n <\/div>\r\n\r\n <div class=\"mode-indicator\">\r\n <span id=\"modeText\" style=\"color: #94a3b8; font-size: 0.85rem;\">Modo Normal<\/span>\r\n <span id=\"modeBadge\" class=\"mode-badge\">Normal<\/span>\r\n <\/div>\r\n<\/header>\r\n <div class=\"main-row\">\r\n <div class=\"panel viz-panel\">\r\n <div class=\"section-title\">\u00c1rea de Trabajo<\/div>\r\n <div class=\"circuit-container\">\r\n <canvas id=\"circuitCanvas\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"panel controls-panel\">\r\n <div class=\"section-title\">Par\u00e1metros<\/div>\r\n \r\n <div class=\"mode-selector\">\r\n <button class=\"mode-btn active\" data-mode=\"single\">Individual<\/button>\r\n <button class=\"mode-btn\" data-mode=\"series\">Serie<\/button>\r\n <button class=\"mode-btn\" data-mode=\"parallel\">Paralelo<\/button>\r\n <\/div>\r\n\r\n <div class=\"control-group\">\r\n <div class=\"control-row\">\r\n <span class=\"control-label\">Voltaje Fuente<\/span>\r\n <span class=\"control-value\" id=\"voltageVal\">10.0 V<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"voltageSlider\" min=\"1\" max=\"20\" step=\"0.5\" value=\"10\">\r\n <\/div>\r\n\r\n <div id=\"capacitorControls\">\r\n <div class=\"control-group\">\r\n <div class=\"control-row\">\r\n <span class=\"control-label\">C1 (\u00b5F)<\/span>\r\n <span class=\"control-value\" id=\"c1Val\">100 \u00b5F<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"c1Slider\" min=\"1\" max=\"1000\" step=\"1\" value=\"100\" class=\"cap-slider\">\r\n <\/div>\r\n\r\n <div class=\"control-group\" id=\"c2Group\" style=\"display: none;\">\r\n <div class=\"control-row\">\r\n <span class=\"control-label\">C2 (\u00b5F)<\/span>\r\n <span class=\"control-value\" id=\"c2Val\">200 \u00b5F<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"c2Slider\" min=\"1\" max=\"1000\" step=\"1\" value=\"200\" class=\"cap-slider\">\r\n <\/div>\r\n\r\n <div class=\"control-group\" id=\"c3Group\" style=\"display: none;\">\r\n <div class=\"control-row\">\r\n <span class=\"control-label\">C3 (\u00b5F)<\/span>\r\n <span class=\"control-value\" id=\"c3Val\">300 \u00b5F<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"c3Slider\" min=\"1\" max=\"1000\" step=\"1\" value=\"300\" class=\"cap-slider\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"control-group\" style=\"display: flex; gap: 15px; margin-bottom: 0;\">\r\n <div class=\"checkbox-item\" style=\"display: flex; align-items: center; gap: 6px; cursor: pointer;\">\r\n <input type=\"checkbox\" id=\"showValues\" checked>\r\n <label for=\"showValues\" style=\"font-size: 0.75rem; cursor: pointer;\">Mostrar Valores<\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"action-grid\">\r\n <button class=\"btn btn-primary\" id=\"btnCharge\">Iniciar Carga<\/button>\r\n <button class=\"btn btn-danger\" id=\"btnDischarge\">Descargar<\/button>\r\n <button class=\"btn btn-success\" id=\"btnRecord\">Registrar<\/button>\r\n <button class=\"btn btn-secondary\" id=\"btnReset\">Limpiar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"panel data-panel data-panel-wrapper\">\r\n <div class=\"section-title\">Registro de Datos<\/div>\r\n <div class=\"table-container\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>#<\/th><th>Tipo<\/th><th>V<\/th>\r\n <th>V1<\/th><th>V2<\/th><th>V3<\/th>\r\n <th>C1<\/th><th>C2<\/th><th>C3<\/th>\r\n <th>Ceq<br><span style=\"font-weight:normal\">Te\u00f3rica<\/span><\/th>\r\n <th>q1<br>(mC)<\/th><th>q2<br>(mC)<\/th><th>q3<br>(mC)<\/th><th>qt<br>(mC)<\/th>\r\n <th>Ceq<br>Medida<\/th><th>Error<br>%<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"dataTableBody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const state = {\r\n mode: 'single',\r\n voltage: 10,\r\n c1: 100e-6, c2: 200e-6, c3: 300e-6,\r\n chargeTime: 0,\r\n maxChargeTime: 1.5, \r\n isCharging: false,\r\n isCharged: false,\r\n isSwitchClosed: false, \r\n animationId: null,\r\n ceq: 0, qTotal: 0,\r\n v1: 0, v2: 0, v3: 0, \r\n q1: 0, q2: 0, q3: 0,\r\n records: [],\r\n showValues: true\r\n };\r\n\r\n const els = {\r\n canvas: document.getElementById('circuitCanvas'),\r\n voltageSlider: document.getElementById('voltageSlider'), voltageVal: document.getElementById('voltageVal'),\r\n c1Slider: document.getElementById('c1Slider'), c1Val: document.getElementById('c1Val'), c2Group: document.getElementById('c2Group'),\r\n c2Slider: document.getElementById('c2Slider'), c2Val: document.getElementById('c2Val'),\r\n c3Group: document.getElementById('c3Group'), c3Slider: document.getElementById('c3Slider'), c3Val: document.getElementById('c3Val'),\r\n modeBtns: document.querySelectorAll('.mode-btn'),\r\n chargeBtn: document.getElementById('btnCharge'), dischargeBtn: document.getElementById('btnDischarge'),\r\n resetBtn: document.getElementById('btnReset'), recordBtn: document.getElementById('btnRecord'),\r\n showValuesCb: document.getElementById('showValues'),\r\n dataTable: document.getElementById('dataTableBody')\r\n };\r\n\r\n function calcCapacitance() {\r\n const activeC = state.mode === 'single' ? [state.c1] : [state.c1, state.c2, state.c3];\r\n \r\n if (state.mode === 'single') state.ceq = state.c1;\r\n else if (state.mode === 'series') {\r\n let inv = 0; activeC.forEach(cap => inv += 1\/cap);\r\n state.ceq = 1\/inv;\r\n } else if (state.mode === 'parallel') {\r\n state.ceq = activeC.reduce((a, b) => a + b, 0);\r\n }\r\n \r\n state.qTotal = state.ceq * state.voltage;\r\n \r\n if (state.mode === 'series') {\r\n const q = state.qTotal;\r\n state.q1 = q; state.q2 = q; state.q3 = q;\r\n state.v1 = q \/ state.c1; state.v2 = q \/ state.c2; state.v3 = q \/ state.c3;\r\n } else if (state.mode === 'parallel') {\r\n const v = state.voltage;\r\n state.v1 = v; state.v2 = v; state.v3 = v;\r\n state.q1 = state.c1 * v; state.q2 = state.c2 * v; state.q3 = state.c3 * v;\r\n } else {\r\n state.q1 = state.qTotal; state.v1 = state.voltage;\r\n state.q2 = 0; state.q3 = 0; state.v2 = 0; state.v3 = 0;\r\n }\r\n }\r\n\r\n function draw() {\r\n const canvas = els.canvas;\r\n const ctx = canvas.getContext('2d');\r\n if (canvas.width !== canvas.clientWidth) canvas.width = canvas.clientWidth;\r\n if (canvas.height !== canvas.clientHeight) canvas.height = canvas.clientHeight;\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n \r\n const w = canvas.width, h = canvas.height, margin = 50;\r\n const topY = margin, botY = h - margin, leftX = margin, rightX = w - margin, cy = h \/ 2;\r\n \r\n \/\/ --- MARCO GENERAL ---\r\n ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.lineCap = 'round';\r\n ctx.beginPath(); ctx.moveTo(leftX, topY); ctx.lineTo(leftX, cy - 40); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(leftX, botY); ctx.lineTo(leftX, cy + 40); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(leftX, botY); ctx.lineTo(rightX, botY); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(rightX, topY); ctx.lineTo(rightX, botY); ctx.stroke();\r\n \r\n \/\/ --- INTERRUPTOR ---\r\n const switchX = leftX + 60;\r\n ctx.beginPath(); ctx.moveTo(leftX, topY); ctx.lineTo(switchX - 15, topY); ctx.stroke();\r\n ctx.strokeStyle = '#94a3b8';\r\n ctx.beginPath(); ctx.arc(switchX - 15, topY, 5, 0, Math.PI * 2); ctx.stroke();\r\n ctx.beginPath(); ctx.arc(switchX + 15, topY, 5, 0, Math.PI * 2); ctx.stroke();\r\n ctx.save(); ctx.translate(switchX - 15, topY);\r\n ctx.rotate(state.isSwitchClosed ? 0 : -0.5);\r\n ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(35, 0); ctx.stroke();\r\n ctx.restore();\r\n\r\n \/\/ --- BATERIA ---\r\n ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 4;\r\n ctx.beginPath(); ctx.moveTo(leftX - 15, cy - 25); ctx.lineTo(leftX + 15, cy - 25); ctx.stroke();\r\n ctx.lineWidth = 2;\r\n ctx.beginPath(); ctx.moveTo(leftX - 8, cy + 25); ctx.lineTo(leftX + 8, cy + 25); ctx.stroke();\r\n ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 14px monospace'; ctx.textAlign = 'center';\r\n ctx.fillText(state.voltage + 'V', leftX + 30, cy + 5);\r\n ctx.fillStyle = '#ef4444'; ctx.fillText('+', leftX - 25, cy - 20);\r\n ctx.fillStyle = '#3b82f6'; ctx.fillText('-', leftX - 25, cy + 20);\r\n \r\n \/\/ --- CAPACITORES ---\r\n const plateH = 50, plateGap = 20;\r\n const railStart = switchX + 15, railEnd = rightX;\r\n const railWidth = railEnd - railStart;\r\n\r\n if (state.mode === 'single') {\r\n const capX = railStart + railWidth \/ 2;\r\n ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3;\r\n ctx.beginPath(); ctx.moveTo(switchX + 15, topY); ctx.lineTo(capX - plateGap\/2, topY); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(capX + plateGap\/2, topY); ctx.lineTo(railEnd, topY); ctx.stroke();\r\n \r\n ctx.strokeStyle = '#f97316'; ctx.lineWidth = 4;\r\n ctx.beginPath(); ctx.moveTo(capX - plateGap\/2, topY - plateH\/2); ctx.lineTo(capX - plateGap\/2, topY + plateH\/2); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(capX + plateGap\/2, topY - plateH\/2); ctx.lineTo(capX + plateGap\/2, topY + plateH\/2); ctx.stroke();\r\n\r\n if (state.showValues) {\r\n ctx.fillStyle = '#f97316'; ctx.font = 'bold 12px monospace';\r\n ctx.fillText('C1', capX, topY - 35);\r\n ctx.fillText((state.c1*1e6).toFixed(0) + '\u00b5F', capX, topY + 45);\r\n }\r\n } else if (state.mode === 'series') {\r\n const numCaps = 3, spacing = railWidth \/ numCaps;\r\n let currentX = switchX + 15;\r\n for(let i=0; i<numCaps; i++) {\r\n const capX = railStart + (i + 0.5) * spacing;\r\n ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3;\r\n ctx.beginPath(); ctx.moveTo(currentX, topY); ctx.lineTo(capX - plateGap\/2, topY); ctx.stroke();\r\n \r\n ctx.strokeStyle = '#f97316'; ctx.lineWidth = 4;\r\n ctx.beginPath(); ctx.moveTo(capX - plateGap\/2, topY - plateH\/2); ctx.lineTo(capX - plateGap\/2, topY + plateH\/2); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(capX + plateGap\/2, topY - plateH\/2); ctx.lineTo(capX + plateGap\/2, topY + plateH\/2); ctx.stroke();\r\n currentX = capX + plateGap\/2;\r\n\r\n if (state.showValues) {\r\n let val = i==0 ? state.c1 : (i==1 ? state.c2 : state.c3);\r\n ctx.fillStyle = '#f97316'; ctx.font = 'bold 12px monospace';\r\n ctx.fillText('C' + (i+1), capX, topY - 35);\r\n ctx.fillText((val*1e6).toFixed(0) + '\u00b5F', capX, topY + 45);\r\n }\r\n }\r\n ctx.strokeStyle = '#64748b'; ctx.beginPath(); ctx.moveTo(currentX, topY); ctx.lineTo(railEnd, topY); ctx.stroke();\r\n } else if (state.mode === 'parallel') {\r\n const spacing = (railEnd - railStart - 40) \/ 3;\r\n ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3;\r\n ctx.beginPath(); ctx.moveTo(switchX + 15, topY); ctx.lineTo(railEnd, topY); ctx.stroke();\r\n for(let i=0; i<3; i++) {\r\n const branchX = railStart + 30 + (i * spacing);\r\n ctx.beginPath(); ctx.moveTo(branchX, topY); ctx.lineTo(branchX, topY + 30); ctx.stroke();\r\n ctx.strokeStyle = '#f97316'; ctx.lineWidth = 4;\r\n ctx.beginPath(); ctx.moveTo(branchX - 25, topY + 30); ctx.lineTo(branchX + 25, topY + 30); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(branchX - 25, topY + 30 + plateGap); ctx.lineTo(branchX + 25, topY + 30 + plateGap); ctx.stroke();\r\n ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3;\r\n ctx.beginPath(); ctx.moveTo(branchX, topY + 30 + plateGap); ctx.lineTo(branchX, botY); ctx.stroke();\r\n if (state.showValues) {\r\n let val = i==0 ? state.c1 : (i==1 ? state.c2 : state.c3);\r\n ctx.fillStyle = '#f97316'; ctx.font = 'bold 12px monospace'; ctx.textAlign = 'left';\r\n ctx.fillText('C' + (i+1) + ' ' + (val*1e6).toFixed(0) + '\u00b5F', branchX + 30, topY + 40);\r\n }\r\n }\r\n }\r\n if (state.isCharged || state.isCharging) drawCharges();\r\n }\r\n \r\n function drawCharges() {\r\n const ctx = els.canvas.getContext('2d'), progress = Math.min(state.chargeTime \/ state.maxChargeTime, 1);\r\n const margin = 50, railStart = margin + 75, railEnd = els.canvas.width - margin;\r\n const railWidth = railEnd - railStart, topY = margin, plateGap = 20;\r\n \r\n if (state.mode === 'single') {\r\n drawChargeOnCapH(ctx, railStart + railWidth\/2, topY, progress, state.c1, plateGap);\r\n } else if (state.mode === 'series') {\r\n for(let i=0; i<3; i++) drawChargeOnCapH(ctx, railStart + (i + 0.5) * (railWidth\/3), topY, progress, i==0?state.c1:i==1?state.c2:state.c3, plateGap);\r\n } else if (state.mode === 'parallel') {\r\n const spacing = (railEnd - railStart - 40) \/ 3;\r\n for(let i=0; i<3; i++) drawChargeOnCapV(ctx, railStart + 30 + (i * spacing), topY + 30, progress, i==0?state.c1:i==1?state.c2:state.c3, plateGap);\r\n }\r\n }\r\n \r\n function drawChargeOnCapH(ctx, x, y, t, c, gap) {\r\n const count = Math.floor(t * 3); if(count < 1) return;\r\n const h = 24, spacing = h \/ 3;\r\n for(let i=0; i<count; i++) {\r\n const yPos = y - h\/2 + (i+0.5)*spacing;\r\n ctx.fillStyle = '#ef4444'; ctx.fillText('+', x - gap\/2 - 10, yPos + 4);\r\n ctx.fillStyle = '#3b82f6'; ctx.fillText('-', x + gap\/2 + 10, yPos + 4);\r\n }\r\n }\r\n \r\n function drawChargeOnCapV(ctx, x, y, t, c, gap) {\r\n const count = Math.floor(t * 3); if(count < 1) return;\r\n const w = 40, spacing = w \/ 3;\r\n for(let i=0; i<count; i++) {\r\n const xPos = x - w\/2 + (i+0.5)*spacing;\r\n ctx.fillStyle = '#ef4444'; ctx.fillText('+', xPos, y - 5);\r\n ctx.fillStyle = '#3b82f6'; ctx.fillText('-', xPos, y + gap + 12);\r\n }\r\n }\r\n\r\n function simulate(timestamp) {\r\n if (!state.isCharging) return;\r\n if (!state.lastTimestamp) state.lastTimestamp = timestamp;\r\n const dt = (timestamp - state.lastTimestamp) \/ 1000;\r\n state.lastTimestamp = timestamp;\r\n state.chargeTime += dt;\r\n if (state.chargeTime >= state.maxChargeTime) {\r\n state.isCharging = false; state.isCharged = true; state.chargeTime = state.maxChargeTime;\r\n }\r\n draw();\r\n if (state.isCharging) state.animId = requestAnimationFrame(simulate);\r\n }\r\n \r\n function startCharge() {\r\n if (state.animId) cancelAnimationFrame(state.animId);\r\n state.isSwitchClosed = true; state.isCharging = true; state.isCharged = false;\r\n state.chargeTime = 0; state.lastTimestamp = 0;\r\n calcCapacitance();\r\n state.animId = requestAnimationFrame(simulate);\r\n }\r\n \r\n function discharge() {\r\n if (state.animId) cancelAnimationFrame(state.animId);\r\n state.isSwitchClosed = false; state.isCharging = false; state.isCharged = false;\r\n state.chargeTime = 0; draw();\r\n }\r\n\r\n function updateParams() {\r\n state.voltage = parseFloat(els.voltageSlider.value);\r\n state.c1 = parseFloat(els.c1Slider.value) * 1e-6;\r\n state.c2 = parseFloat(els.c2Slider.value) * 1e-6;\r\n state.c3 = parseFloat(els.c3Slider.value) * 1e-6;\r\n els.voltageVal.textContent = state.voltage.toFixed(1) + ' V';\r\n els.c1Val.textContent = (state.c1 * 1e6).toFixed(0) + ' \u00b5F';\r\n els.c2Val.textContent = (state.c2 * 1e6).toFixed(0) + ' \u00b5F';\r\n els.c3Val.textContent = (state.c3 * 1e6).toFixed(0) + ' \u00b5F';\r\n els.c2Group.style.display = state.mode === 'single' ? 'none' : 'block';\r\n els.c3Group.style.display = state.mode === 'single' ? 'none' : 'block';\r\n calcCapacitance(); draw();\r\n }\r\n\r\n function switchMode(mode) {\r\n state.mode = mode;\r\n els.modeBtns.forEach(b => b.classList.toggle('active', b.dataset.mode === mode));\r\n discharge(); updateParams();\r\n }\r\n\r\n function recordData() {\r\n if (!state.isCharged) return alert(\"Cargue el circuito primero.\");\r\n const type = state.mode === 'single' ? 'Individual' : state.mode === 'series' ? 'Serie' : 'Paralelo';\r\n state.records.push({\r\n type, v: state.voltage, v1: state.v1, v2: state.v2, v3: state.v3,\r\n c1: state.c1 * 1e6, c2: state.c2 * 1e6, c3: state.c3 * 1e6,\r\n ceqT: state.ceq * 1e6, q1: state.q1 * 1e3, q2: state.q2 * 1e3, q3: state.q3 * 1e3, qt: state.qTotal * 1e3,\r\n ceqM: null, err: null\r\n });\r\n renderTable();\r\n }\r\n \r\n window.calculateError = function(index) {\r\n const row = state.records[index];\r\n const measured = parseFloat(document.getElementById(`meas_${index}`).value);\r\n if (!isNaN(measured) && measured > 0) {\r\n row.ceqM = measured;\r\n row.err = Math.abs((measured - row.ceqT) \/ row.ceqT * 100);\r\n renderTable();\r\n }\r\n };\r\n\r\n function renderTable() {\r\n els.dataTable.innerHTML = state.records.map((r, i) => `\r\n <tr>\r\n <td>${i+1}<\/td><td>${r.type}<\/td><td>${r.v.toFixed(1)}<\/td>\r\n <td>${r.v1.toFixed(2)}<\/td><td>${r.v2.toFixed(2)}<\/td><td>${r.v3.toFixed(2)}<\/td>\r\n <td>${r.c1.toFixed(0)}<\/td><td>${r.c2.toFixed(0)}<\/td><td>${r.c3.toFixed(0)}<\/td>\r\n <td style=\"color: var(--accent); font-weight:bold;\">${r.ceqT.toFixed(2)}<\/td>\r\n <td>${r.q1.toFixed(2)}<\/td><td>${r.q2.toFixed(2)}<\/td><td>${r.q3.toFixed(2)}<\/td><td>${r.qt.toFixed(2)}<\/td>\r\n <td><input type=\"number\" id=\"meas_${i}\" step=\"0.01\" value=\"${r.ceqM || ''}\" onchange=\"calculateError(${i})\"><\/td>\r\n <td style=\"color: ${r.err !== null ? (r.err < 5 ? 'var(--success)' : 'var(--positive)') : 'inherit'}\">${r.err !== null ? r.err.toFixed(2) : '-'}<\/td>\r\n <\/tr>`).join('');\r\n }\r\n\r\n function init() {\r\n els.voltageSlider.oninput = updateParams;\r\n els.c1Slider.oninput = updateParams;\r\n els.c2Slider.oninput = updateParams;\r\n els.c3Slider.oninput = updateParams;\r\n els.modeBtns.forEach(b => b.onclick = () => switchMode(b.dataset.mode));\r\n els.chargeBtn.onclick = startCharge;\r\n els.dischargeBtn.onclick = discharge;\r\n els.recordBtn.onclick = recordData;\r\n els.resetBtn.onclick = () => { state.records = []; renderTable(); discharge(); };\r\n els.showValuesCb.onchange = (e) => { state.showValues = e.target.checked; draw(); };\r\n window.onresize = draw;\r\n updateParams();\r\n }\r\n\r\n init();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Laboratorio Virtual – Asociaci\u00f3n de Capacitores Laboratorio Virtual Asociaci\u00f3n de Capacitores Simulaciones Interactivas FICA-UNSL Modo Normal Normal \u00c1rea de Trabajo Par\u00e1metros Individual Serie Paralelo Voltaje…<\/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-6227","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>asociacion_capacitores - 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\/asociacion_capacitores\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"asociacion_capacitores - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Laboratorio Virtual – Asociaci\u00f3n de Capacitores Laboratorio Virtual Asociaci\u00f3n de Capacitores Simulaciones Interactivas FICA-UNSL Modo Normal Normal \u00c1rea de Trabajo Par\u00e1metros Individual Serie Paralelo Voltaje…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-19T17:56:00+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\/asociacion_capacitores\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/\",\"name\":\"asociacion_capacitores - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\"},\"datePublished\":\"2026-03-16T12:36:52+00:00\",\"dateModified\":\"2026-03-19T17:56:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"asociacion_capacitores\"}]},{\"@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_head_json":{"title":"asociacion_capacitores - 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\/asociacion_capacitores\/","og_locale":"es_ES","og_type":"article","og_title":"asociacion_capacitores - F\u00edsica 2","og_description":"Laboratorio Virtual – Asociaci\u00f3n de Capacitores Laboratorio Virtual Asociaci\u00f3n de Capacitores Simulaciones Interactivas FICA-UNSL Modo Normal Normal \u00c1rea de Trabajo Par\u00e1metros Individual Serie Paralelo Voltaje…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-03-19T17:56:00+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\/asociacion_capacitores\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/","name":"asociacion_capacitores - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-16T12:36:52+00:00","dateModified":"2026-03-19T17:56:00+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/asociacion_capacitores\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"asociacion_capacitores"}]},{"@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\/6227","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=6227"}],"version-history":[{"count":25,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6227\/revisions"}],"predecessor-version":[{"id":6700,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6227\/revisions\/6700"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=6227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}