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 \r\n \r\n \r\n \r\n \r\n <style>\r\n .btn-guia {\r\n position: fixed;\r\n bottom: 24px;\r\n left: 24px;\r\n z-index: 999;\r\n background: #3fb950;\r\n color: #0d1117;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 0.82rem;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n padding: 10px 18px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-guia:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 24px rgba(63,185,80,0.5);\r\n }\r\n .btn-guia svg { width: 15px; height: 15px; flex-shrink: 0; }\r\n .guia-panel {\r\n position: fixed;\r\n bottom: 72px;\r\n left: 24px;\r\n width: 400px;\r\n max-height: 70vh;\r\n z-index: 1000;\r\n background: #ffffff;\r\n border: 1px solid #d0d7de;\r\n border-radius: 12px;\r\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\r\n display: none;\r\n flex-direction: column;\r\n overflow: hidden;\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n .guia-panel.visible { display: flex; }\r\n .guia-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 16px;\r\n border-bottom: 1px solid #d0d7de;\r\n flex-shrink: 0;\r\n background: #f6f8fa;\r\n }\r\n .guia-header-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n }\r\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\r\n .guia-close {\r\n background: none;\r\n border: none;\r\n color: #636c76;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n padding: 2px 7px;\r\n border-radius: 4px;\r\n transition: color 0.2s, background 0.2s;\r\n line-height: 1;\r\n }\r\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\r\n .guia-body {\r\n overflow-y: auto;\r\n padding: 18px 18px 20px;\r\n color: #1f2328;\r\n font-size: 0.83rem;\r\n line-height: 1.65;\r\n background: #ffffff;\r\n }\r\n .guia-body::-webkit-scrollbar { width: 5px; }\r\n .guia-body::-webkit-scrollbar-track { background: transparent; }\r\n .guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\r\n .guia-section-title {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n margin: 0 0 12px 0;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid #d0d7de;\r\n }\r\n .guia-block { margin-bottom: 14px; }\r\n .guia-label {\r\n font-size: 0.72rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #636c76;\r\n margin-bottom: 4px;\r\n }\r\n .guia-text { color: #1f2328; }\r\n .guia-formula {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n text-align: center;\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.88rem;\r\n color: #0550ae;\r\n margin: 10px 0;\r\n }\r\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\r\n .guia-steps li {\r\n counter-increment: steps;\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n align-items: flex-start;\r\n color: #1f2328;\r\n }\r\n .guia-steps li::before {\r\n content: counter(steps);\r\n background: #dafbe1;\r\n color: #1a7f37;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-top: 1px;\r\n border: 1px solid #1a7f37;\r\n }\r\n .guia-result {\r\n background: #dafbe1;\r\n border-left: 3px solid #1a7f37;\r\n border-radius: 0 6px 6px 0;\r\n padding: 10px 14px;\r\n color: #1f2328;\r\n font-size: 0.82rem;\r\n margin-top: 10px;\r\n }\r\n .guia-params {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n font-size: 0.8rem;\r\n color: #1f2328;\r\n }\r\n .guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\r\n .var { font-family: 'JetBrains Mono', monospace; }\r\n .var.pos { color: #cf222e; }\r\n .var.neg { color: #0550ae; }\r\n .var.neu { color: #7d4e00; }\r\n .var.ok { color: #1a7f37; }\r\n<\/style>\r\n\r\n<div class=\"guia-panel\" id=\"guiaPanel\">\r\n <div class=\"guia-header\">\r\n <div class=\"guia-header-title\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n <\/div>\r\n <button class=\"guia-close\" onclick=\"toggleGuia()\">\u2715<\/button>\r\n <\/div>\r\n\r\n <div class=\"guia-body\">\r\n\r\n \r\n\r\n\r\n\r\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\r\n<h3 style=\"color: #0056b3;\"> <strong><span style=\"color: #000080; font-size: 16px;\">Asociaci\u00f3n de Capacitores: Serie y Paralelo<\/span><\/strong><strong><span style=\"font-size: 16px; color: #000080;\"> <\/span><span style=\"font-size: 16px; color: #ff0000;\"> <\/span><\/strong><\/h3>\r\n<span style=\"color: #000000; font-size: 16px;\"><strong>Objetivo:<\/strong> Comprender el comportamiento de los sistemas de almacenamiento de energ\u00eda mediante el an\u00e1lisis de configuraciones en serie y paralelo, y calcular la capacitancia equivalente resultante.<\/span>\r\n\r\n<span style=\"color: #000000; font-size: 16px;\"><strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que permite configurar arreglos de dos o m\u00e1s capacitores. Facilita la observaci\u00f3n de c\u00f3mo se distribuye la carga \$Q\$ y la diferencia de potencial \$V\$ seg\u00fan el tipo de conexi\u00f3n, verificando las relaciones matem\u00e1ticas fundamentales:<\/span>\r\n<div style=\"text-align: center; margin: 20px 0;\"><span style=\"color: #000000; font-size: 16px;\"><strong>Serie:<\/strong> \$ \\frac{1}{C_{eq}} = \\sum \\frac{1}{C_i} \$ | <strong>Paralelo:<\/strong> \$ C_{eq} = \\sum C_i \$<\/span><\/div>\r\n<span style=\"color: #000000; font-size: 16px;\"><strong>C\u00f3mo usar (pasos):<\/strong><\/span>\r\n<ul style=\"margin-left: 20px;\">\r\n \t<li><span style=\"color: #000000; font-size: 16px;\">Seleccionar el modo de conexi\u00f3n (Serie o Paralelo) en el panel de control.<\/span><\/li>\r\n \t<li><span style=\"color: #000000; font-size: 16px;\">Ajustar los valores de capacitancia para cada componente utilizando los controles deslizantes.<\/span><\/li>\r\n \t<li><span style=\"color: #000000; font-size: 16px;\">Observar c\u00f3mo cambia la energ\u00eda almacenada total y la carga en cada placa seg\u00fan la configuraci\u00f3n elegida.<\/span><\/li>\r\n \t<li><span style=\"color: #000000; font-size: 16px;\">Activar la visualizaci\u00f3n de \"Capacitor Equivalente\" para comparar el sistema complejo con un \u00fanico componente representativo.<\/span><\/li>\r\n \t<li><span style=\"color: #000000; font-size: 16px;\">Utilizar el volt\u00edmetro virtual para medir la ca\u00edda de tensi\u00f3n en cada capacitor individual.<\/span><\/li>\r\n<\/ul>\r\n<span style=\"color: #000000; font-size: 16px;\"><strong>Par\u00e1metros ajustables:<\/strong> Capacitancia de cada unidad (\$\\mu F\$), voltaje de la fuente, tipo de circuito (serie\/paralelo) y visualizaci\u00f3n de carga acumulada.<\/span>\r\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><span style=\"color: #000000; font-size: 16px;\"><strong>Resultados esperados \/ observaciones:<\/strong> En paralelo, la capacitancia total siempre es mayor que la mayor de las capacitancias individuales. En serie, la capacitancia equivalente es siempre menor que la menor de las individuales. Adem\u00e1s, se puede comprobar que en serie la carga es la misma para todos, mientras que en paralelo el voltaje es constante.<\/span><\/p>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n \r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<button class=\"btn-guia\" onclick=\"toggleGuia()\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n<\/button>\r\n\r\n<script>\r\n function toggleGuia() {\r\n document.getElementById('guiaPanel').classList.toggle('visible');\r\n }\r\n<\/script>\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-31d4733 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"31d4733\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d2a8f5d\" data-id=\"d2a8f5d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a2c3532 elementor-widget elementor-widget-text-editor\" data-id=\"a2c3532\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\"><h3 style=\"color: #0056b3;\"><strong><span style=\"color: #000080; font-size: 16px;\">Asociaci\u00f3n de Capacitores: Serie y Paralelo<\/span><\/strong><strong><span style=\"font-size: 16px; color: #000080;\">\u00a0<\/span><\/strong><\/h3><p><span style=\"color: #000000; font-size: 16px;\"><strong>Objetivo:<\/strong> Comprender el comportamiento de los sistemas de almacenamiento de energ\u00eda mediante el an\u00e1lisis de configuraciones en serie y paralelo, y calcular la capacitancia equivalente resultante.<\/span><\/p><p><span style=\"color: #000000; font-size: 16px;\"><strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que permite configurar arreglos de dos o m\u00e1s capacitores. Facilita la observaci\u00f3n de c\u00f3mo se distribuye la carga \$Q\$ y la diferencia de potencial \$V\$ seg\u00fan el tipo de conexi\u00f3n, verificando las relaciones matem\u00e1ticas fundamentales:<\/span><\/p><div style=\"text-align: center; margin: 20px 0;\"><span style=\"color: #000000; font-size: 16px;\"><strong>Serie:<\/strong> \$ \\frac{1}{C_{eq}} = \\sum \\frac{1}{C_i} \$ \u00a0\u00a0\u00a0 | \u00a0\u00a0\u00a0 <strong>Paralelo:<\/strong> \$ C_{eq} = \\sum C_i \$<\/span><\/div><p><span style=\"color: #000000; font-size: 16px;\"><strong>C\u00f3mo usar (pasos):<\/strong><\/span><\/p><ul style=\"margin-left: 20px;\"><li><span style=\"color: #000000; font-size: 16px;\">Seleccionar el modo de conexi\u00f3n (Serie o Paralelo) en el panel de control.<\/span><\/li><li><span style=\"color: #000000; font-size: 16px;\">Ajustar los valores de capacitancia para cada componente utilizando los controles deslizantes.<\/span><\/li><li><span style=\"color: #000000; font-size: 16px;\">Observar c\u00f3mo cambia la energ\u00eda almacenada total y la carga en cada placa seg\u00fan la configuraci\u00f3n elegida.<\/span><\/li><li><span style=\"color: #000000; font-size: 16px;\">Activar la visualizaci\u00f3n de “Capacitor Equivalente” para comparar el sistema complejo con un \u00fanico componente representativo.<\/span><\/li><li><span style=\"color: #000000; font-size: 16px;\">Utilizar el volt\u00edmetro virtual para medir la ca\u00edda de tensi\u00f3n en cada capacitor individual.<\/span><\/li><\/ul><p><span style=\"color: #000000; font-size: 16px;\"><strong>Par\u00e1metros ajustables:<\/strong> Capacitancia de cada unidad (\$\\mu F\$), voltaje de la fuente, tipo de circuito (serie\/paralelo) y visualizaci\u00f3n de carga acumulada.<\/span><\/p><p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><span style=\"color: #000000; font-size: 16px;\"><strong>Resultados esperados \/ observaciones:<\/strong> En paralelo, la capacitancia total siempre es mayor que la mayor de las capacitancias individuales. En serie, la capacitancia equivalente es siempre menor que la menor de las individuales. Adem\u00e1s, se puede comprobar que en serie la carga es la misma para todos, mientras que en paralelo el voltaje es constante.<\/span><\/p><\/div>\t\t\t\t\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-04-18T21:33:16+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/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-04-18T21:33:16+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-04-18T21:33:16+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/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-04-18T21:33:16+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":31,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6227\/revisions"}],"predecessor-version":[{"id":7121,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6227\/revisions\/7121"}],"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 \r\n \r\n \r\n \r\n \r\n <style>\r\n .btn-guia {\r\n position: fixed;\r\n bottom: 24px;\r\n left: 24px;\r\n z-index: 999;\r\n background: #3fb950;\r\n color: #0d1117;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 0.82rem;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n padding: 10px 18px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-guia:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 24px rgba(63,185,80,0.5);\r\n }\r\n .btn-guia svg { width: 15px; height: 15px; flex-shrink: 0; }\r\n .guia-panel {\r\n position: fixed;\r\n bottom: 72px;\r\n left: 24px;\r\n width: 400px;\r\n max-height: 70vh;\r\n z-index: 1000;\r\n background: #ffffff;\r\n border: 1px solid #d0d7de;\r\n border-radius: 12px;\r\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\r\n display: none;\r\n flex-direction: column;\r\n overflow: hidden;\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n .guia-panel.visible { display: flex; }\r\n .guia-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 16px;\r\n border-bottom: 1px solid #d0d7de;\r\n flex-shrink: 0;\r\n background: #f6f8fa;\r\n }\r\n .guia-header-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n }\r\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\r\n .guia-close {\r\n background: none;\r\n border: none;\r\n color: #636c76;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n padding: 2px 7px;\r\n border-radius: 4px;\r\n transition: color 0.2s, background 0.2s;\r\n line-height: 1;\r\n }\r\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\r\n .guia-body {\r\n overflow-y: auto;\r\n padding: 18px 18px 20px;\r\n color: #1f2328;\r\n font-size: 0.83rem;\r\n line-height: 1.65;\r\n background: #ffffff;\r\n }\r\n .guia-body::-webkit-scrollbar { width: 5px; }\r\n .guia-body::-webkit-scrollbar-track { background: transparent; }\r\n .guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\r\n .guia-section-title {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n margin: 0 0 12px 0;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid #d0d7de;\r\n }\r\n .guia-block { margin-bottom: 14px; }\r\n .guia-label {\r\n font-size: 0.72rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #636c76;\r\n margin-bottom: 4px;\r\n }\r\n .guia-text { color: #1f2328; }\r\n .guia-formula {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n text-align: center;\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.88rem;\r\n color: #0550ae;\r\n margin: 10px 0;\r\n }\r\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\r\n .guia-steps li {\r\n counter-increment: steps;\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n align-items: flex-start;\r\n color: #1f2328;\r\n }\r\n .guia-steps li::before {\r\n content: counter(steps);\r\n background: #dafbe1;\r\n color: #1a7f37;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-top: 1px;\r\n border: 1px solid #1a7f37;\r\n }\r\n .guia-result {\r\n background: #dafbe1;\r\n border-left: 3px solid #1a7f37;\r\n border-radius: 0 6px 6px 0;\r\n padding: 10px 14px;\r\n color: #1f2328;\r\n font-size: 0.82rem;\r\n margin-top: 10px;\r\n }\r\n .guia-params {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n font-size: 0.8rem;\r\n color: #1f2328;\r\n }\r\n .guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\r\n .var { font-family: 'JetBrains Mono', monospace; }\r\n .var.pos { color: #cf222e; }\r\n .var.neg { color: #0550ae; }\r\n .var.neu { color: #7d4e00; }\r\n .var.ok { color: #1a7f37; }\r\n<\/style>\r\n\r\n<div class=\"guia-panel\" id=\"guiaPanel\">\r\n <div class=\"guia-header\">\r\n <div class=\"guia-header-title\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n <\/div>\r\n <button class=\"guia-close\" onclick=\"toggleGuia()\">\u2715<\/button>\r\n <\/div>\r\n\r\n <div class=\"guia-body\">\r\n\r\n \r\n\r\n\r\n\r\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\r\n<h3 style=\"color: #0056b3;\"> <strong><span style=\"color: #000080; font-size: 16px;\">Asociaci\u00f3n de Capacitores: Serie y Paralelo<\/span><\/strong><strong><span style=\"font-size: 16px; color: #000080;\"> <\/span><span style=\"font-size: 16px; color: #ff0000;\"> <\/span><\/strong><\/h3>\r\n<span style=\"color: #000000; font-size: 16px;\"><strong>Objetivo:<\/strong> Comprender el comportamiento de los sistemas de almacenamiento de energ\u00eda mediante el an\u00e1lisis de configuraciones en serie y paralelo, y calcular la capacitancia equivalente resultante.<\/span>\r\n\r\n<span style=\"color: #000000; font-size: 16px;\"><strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que permite configurar arreglos de dos o m\u00e1s capacitores. Facilita la observaci\u00f3n de c\u00f3mo se distribuye la carga \$Q\$ y la diferencia de potencial \$V\$ seg\u00fan el tipo de conexi\u00f3n, verificando las relaciones matem\u00e1ticas fundamentales:<\/span>\r\n<div style=\"text-align: center; margin: 20px 0;\"><span style=\"color: #000000; font-size: 16px;\"><strong>Serie:<\/strong> \$ \\frac{1}{C_{eq}} = \\sum \\frac{1}{C_i} \$ | <strong>Paralelo:<\/strong> \$ C_{eq} = \\sum C_i \$<\/span><\/div>\r\n<span style=\"color: #000000; font-size: 16px;\"><strong>C\u00f3mo usar (pasos):<\/strong><\/span>\r\n<ul style=\"margin-left: 20px;\">\r\n \t<li><span style=\"color: #000000; font-size: 16px;\">Seleccionar el modo de conexi\u00f3n (Serie o Paralelo) en el panel de control.<\/span><\/li>\r\n \t<li><span style=\"color: #000000; font-size: 16px;\">Ajustar los valores de capacitancia para cada componente utilizando los controles deslizantes.<\/span><\/li>\r\n \t<li><span style=\"color: #000000; font-size: 16px;\">Observar c\u00f3mo cambia la energ\u00eda almacenada total y la carga en cada placa seg\u00fan la configuraci\u00f3n elegida.<\/span><\/li>\r\n \t<li><span style=\"color: #000000; font-size: 16px;\">Activar la visualizaci\u00f3n de \"Capacitor Equivalente\" para comparar el sistema complejo con un \u00fanico componente representativo.<\/span><\/li>\r\n \t<li><span style=\"color: #000000; font-size: 16px;\">Utilizar el volt\u00edmetro virtual para medir la ca\u00edda de tensi\u00f3n en cada capacitor individual.<\/span><\/li>\r\n<\/ul>\r\n<span style=\"color: #000000; font-size: 16px;\"><strong>Par\u00e1metros ajustables:<\/strong> Capacitancia de cada unidad (\$\\mu F\$), voltaje de la fuente, tipo de circuito (serie\/paralelo) y visualizaci\u00f3n de carga acumulada.<\/span>\r\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><span style=\"color: #000000; font-size: 16px;\"><strong>Resultados esperados \/ observaciones:<\/strong> En paralelo, la capacitancia total siempre es mayor que la mayor de las capacitancias individuales. En serie, la capacitancia equivalente es siempre menor que la menor de las individuales. Adem\u00e1s, se puede comprobar que en serie la carga es la misma para todos, mientras que en paralelo el voltaje es constante.<\/span><\/p>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n \r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<button class=\"btn-guia\" onclick=\"toggleGuia()\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n<\/button>\r\n\r\n<script>\r\n function toggleGuia() {\r\n document.getElementById('guiaPanel').classList.toggle('visible');\r\n }\r\n<\/script>\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-31d4733 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"31d4733\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d2a8f5d\" data-id=\"d2a8f5d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a2c3532 elementor-widget elementor-widget-text-editor\" data-id=\"a2c3532\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\"><h3 style=\"color: #0056b3;\"><strong><span style=\"color: #000080; font-size: 16px;\">Asociaci\u00f3n de Capacitores: Serie y Paralelo<\/span><\/strong><strong><span style=\"font-size: 16px; color: #000080;\">\u00a0<\/span><\/strong><\/h3><p><span style=\"color: #000000; font-size: 16px;\"><strong>Objetivo:<\/strong> Comprender el comportamiento de los sistemas de almacenamiento de energ\u00eda mediante el an\u00e1lisis de configuraciones en serie y paralelo, y calcular la capacitancia equivalente resultante.<\/span><\/p><p><span style=\"color: #000000; font-size: 16px;\"><strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que permite configurar arreglos de dos o m\u00e1s capacitores. Facilita la observaci\u00f3n de c\u00f3mo se distribuye la carga \$Q\$ y la diferencia de potencial \$V\$ seg\u00fan el tipo de conexi\u00f3n, verificando las relaciones matem\u00e1ticas fundamentales:<\/span><\/p><div style=\"text-align: center; margin: 20px 0;\"><span style=\"color: #000000; font-size: 16px;\"><strong>Serie:<\/strong> \$ \\frac{1}{C_{eq}} = \\sum \\frac{1}{C_i} \$ \u00a0\u00a0\u00a0 | \u00a0\u00a0\u00a0 <strong>Paralelo:<\/strong> \$ C_{eq} = \\sum C_i \$<\/span><\/div><p><span style=\"color: #000000; font-size: 16px;\"><strong>C\u00f3mo usar (pasos):<\/strong><\/span><\/p><ul style=\"margin-left: 20px;\"><li><span style=\"color: #000000; font-size: 16px;\">Seleccionar el modo de conexi\u00f3n (Serie o Paralelo) en el panel de control.<\/span><\/li><li><span style=\"color: #000000; font-size: 16px;\">Ajustar los valores de capacitancia para cada componente utilizando los controles deslizantes.<\/span><\/li><li><span style=\"color: #000000; font-size: 16px;\">Observar c\u00f3mo cambia la energ\u00eda almacenada total y la carga en cada placa seg\u00fan la configuraci\u00f3n elegida.<\/span><\/li><li><span style=\"color: #000000; font-size: 16px;\">Activar la visualizaci\u00f3n de “Capacitor Equivalente” para comparar el sistema complejo con un \u00fanico componente representativo.<\/span><\/li><li><span style=\"color: #000000; font-size: 16px;\">Utilizar el volt\u00edmetro virtual para medir la ca\u00edda de tensi\u00f3n en cada capacitor individual.<\/span><\/li><\/ul><p><span style=\"color: #000000; font-size: 16px;\"><strong>Par\u00e1metros ajustables:<\/strong> Capacitancia de cada unidad (\$\\mu F\$), voltaje de la fuente, tipo de circuito (serie\/paralelo) y visualizaci\u00f3n de carga acumulada.<\/span><\/p><p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><span style=\"color: #000000; font-size: 16px;\"><strong>Resultados esperados \/ observaciones:<\/strong> En paralelo, la capacitancia total siempre es mayor que la mayor de las capacitancias individuales. En serie, la capacitancia equivalente es siempre menor que la menor de las individuales. Adem\u00e1s, se puede comprobar que en serie la carga es la misma para todos, mientras que en paralelo el voltaje es constante.<\/span><\/p><\/div>\t\t\t\t\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-04-18T21:33:16+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/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-04-18T21:33:16+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-04-18T21:33:16+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/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-04-18T21:33:16+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":31,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6227\/revisions"}],"predecessor-version":[{"id":7121,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6227\/revisions\/7121"}],"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}]}}