{"id":499,"date":"2026-08-28T16:41:05","date_gmt":"2026-08-28T14:41:05","guid":{"rendered":"https:\/\/secic.fcyt.umss.edu.bo\/?page_id=499"},"modified":"2026-08-28T16:41:07","modified_gmt":"2026-08-28T14:41:07","slug":"carga-neta","status":"publish","type":"page","link":"https:\/\/secic.fcyt.umss.edu.bo\/index.php\/carga-neta\/","title":{"rendered":"Carga Neta"},"content":{"rendered":"<style>\r\n    .secic-nf-calc {\r\n        font-family: 'Inter', 'Segoe UI', sans-serif;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        color: #1e293b;\r\n        background: #f8fafc;\r\n        border-radius: 12px;\r\n        border: 1px solid #e2e8f0;\r\n        box-shadow: 0 10px 25px rgba(0,0,0,0.05);\r\n        overflow: hidden;\r\n    }\r\n\r\n    .ac-header { background: #0f172a; color: white; padding: 25px 30px; text-align: center; }\r\n    .ac-header h2 { margin: 0; font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.5px; }\r\n    .ac-header p { margin: 8px 0 0 0; color: #94a3b8; font-size: 15px; }\r\n\r\n    .ac-body { display: grid; grid-template-columns: 380px 1fr; gap: 0; }\r\n    \r\n    \/* Panel Lateral de Datos *\/\r\n    .ac-sidebar { background: white; padding: 30px; border-right: 1px solid #e2e8f0; }\r\n    .ac-group { margin-bottom: 22px; }\r\n    .ac-group label.title { display: block; font-size: 12px; font-weight: 800; color: #475569; text-transform: uppercase; margin-bottom: 10px; border-bottom: 2px solid #e2e8f0; padding-bottom: 5px; }\r\n    \r\n    .type-selector { width: 100%; padding: 10px; border: 2px solid #cbd5e1; border-radius: 8px; font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 15px; cursor: pointer; background: #f1f5f9; }\r\n    .type-selector:focus { border-color: #2563eb; outline: none; }\r\n\r\n    .ac-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }\r\n    .ac-input { position: relative; }\r\n    .ac-input span.label { font-size: 11.5px; font-weight: 700; color: #64748b; margin-bottom: 4px; display: block; }\r\n    .ac-input input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 2px solid #cbd5e1; border-radius: 6px; font-size: 14px; font-weight: 600; transition: border-color 0.2s; }\r\n    .ac-input input:focus { border-color: #2563eb; outline: none; }\r\n    .ac-input .unit { position: absolute; right: 10px; bottom: 9px; font-size: 11px; color: #94a3b8; font-weight: bold; pointer-events: none; }\r\n\r\n    \/* \u00c1rea Principal (Gr\u00e1fico y Memoria) *\/\r\n    .ac-main { padding: 30px; display: flex; flex-direction: column; gap: 25px; }\r\n    \r\n    .ac-canvas-container { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(rgba(203, 213, 225, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(203, 213, 225, 0.3) 1px, transparent 1px); background-size: 20px 20px; height: 350px; }\r\n    canvas { max-width: 100%; height: 100%; }\r\n\r\n    .ac-memoria { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 25px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }\r\n    .ac-memoria h3 { margin: 0 0 20px 0; font-size: 18px; color: #0f172a; border-bottom: 2px solid #2563eb; padding-bottom: 8px; display: inline-block; text-transform: uppercase; }\r\n    \r\n    .paso-calc { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #e2e8f0; }\r\n    .paso-calc:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }\r\n    .paso-title { font-size: 13px; font-weight: 800; color: #2563eb; text-transform: uppercase; margin-bottom: 12px; }\r\n    \r\n    \/* ESTILOS DE MATEM\u00c1TICAS AVANZADAS (Formato Ecuaci\u00f3n Real) *\/\r\n    .math-block { font-family: 'Cambria Math', 'Times New Roman', serif; font-size: 18px; color: #1e293b; background: #f8fafc; padding: 15px; border-radius: 8px; border-left: 4px solid #94a3b8; overflow-x: auto; display: flex; flex-direction: column; gap: 10px; }\r\n    .math-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }\r\n    .math-var { font-style: italic; color: #0f172a; }\r\n    .math-sub { font-size: 0.7em; vertical-align: sub; }\r\n    .math-val { color: #dc2626; font-weight: bold; }\r\n    .math-res { color: #059669; font-weight: bold; }\r\n    \r\n    \/* Fracciones Verticales en CSS *\/\r\n    .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 4px; }\r\n    .frac-top { border-bottom: 1px solid #1e293b; padding: 0 4px; font-size: 0.9em; }\r\n    .frac-bot { padding: 0 4px; font-size: 0.9em; }\r\n\r\n    @media (max-width: 900px) { .ac-body { grid-template-columns: 1fr; } }\r\n<\/style>\r\n\r\n<div class=\"secic-nf-calc\">\r\n    <div class=\"ac-header\">\r\n        <h2>C\u00e1lculo de Carga Neta y Esfuerzos<\/h2>\r\n        <p>An\u00e1lisis interactivo de presiones intersticiales (\u03bc) y acotaciones geom\u00e9tricas.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ac-body\">\r\n        <!-- BARRA LATERAL -->\r\n        <div class=\"ac-sidebar\">\r\n            <div class=\"ac-group\">\r\n                <label class=\"title\">Tipo de Fundaci\u00f3n<\/label>\r\n                <select class=\"type-selector\" id=\"f-tipo\">\r\n                    <option value=\"aislada\">Zapata Aislada<\/option>\r\n                    <option value=\"losa\">Losa de Fundaci\u00f3n<\/option>\r\n                <\/select>\r\n            <\/div>\r\n\r\n            <div class=\"ac-group\">\r\n                <label class=\"title\">Niveles Fre\u00e1ticos e Hidr\u00e1ulica<\/label>\r\n                <div class=\"ac-input-row\">\r\n                    <div class=\"ac-input\"><span class=\"label\">N.F. Inicial (NF\u2080)<\/span><input type=\"number\" id=\"f-nfo\" value=\"1.0\" step=\"0.1\"><span class=\"unit\">m<\/span><\/div>\r\n                    <div class=\"ac-input\"><span class=\"label\">N.F. Final (NF_f)<\/span><input type=\"number\" id=\"f-nff\" value=\"2.0\" step=\"0.1\"><span class=\"unit\">m<\/span><\/div>\r\n                <\/div>\r\n                <div class=\"ac-input-row\">\r\n                    <div class=\"ac-input\"><span class=\"label\">\u03b3_Agua (\u03b3_w)<\/span><input type=\"number\" id=\"f-gammaW\" value=\"9.81\" step=\"0.01\"><span class=\"unit\">kN\/m\u00b3<\/span><\/div>\r\n                    <div class=\"ac-input\"><span class=\"label\">\u03b3_Suelo (\u03b3)<\/span><input type=\"number\" id=\"f-gammaS\" value=\"20\" step=\"0.5\"><span class=\"unit\">kN\/m\u00b3<\/span><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ac-group\">\r\n                <label class=\"title\">Geometr\u00eda de Fundaci\u00f3n<\/label>\r\n                <div class=\"ac-input-row\">\r\n                    <div class=\"ac-input\"><span class=\"label\">Base (B)<\/span><input type=\"number\" id=\"f-B\" value=\"2.0\" step=\"0.1\"><span class=\"unit\">m<\/span><\/div>\r\n                    <div class=\"ac-input\"><span class=\"label\">Largo (L)<\/span><input type=\"number\" id=\"f-L\" value=\"3.0\" step=\"0.1\"><span class=\"unit\">m<\/span><\/div>\r\n                <\/div>\r\n                <div class=\"ac-input\"><span class=\"label\">Prof. Desplante (Df)<\/span><input type=\"number\" id=\"f-Df\" value=\"2.0\" step=\"0.1\" style=\"margin-top: 5px;\"><span class=\"unit\">m<\/span><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ac-group\" id=\"grp-aislada\">\r\n                <label class=\"title\">Datos Espec\u00edficos (Zapata)<\/label>\r\n                <div class=\"ac-input-row\">\r\n                    <div class=\"ac-input\"><span class=\"label\">Ancho Col. (b)<\/span><input type=\"number\" id=\"f-b\" value=\"0.4\" step=\"0.05\"><span class=\"unit\">m<\/span><\/div>\r\n                    <div class=\"ac-input\"><span class=\"label\">Largo Col. (l)<\/span><input type=\"number\" id=\"f-l\" value=\"0.3\" step=\"0.05\"><span class=\"unit\">m<\/span><\/div>\r\n                <\/div>\r\n                <div class=\"ac-input-row\">\r\n                    <div class=\"ac-input\"><span class=\"label\">Altura Zapata (h\u2081)<\/span><input type=\"number\" id=\"f-h1\" value=\"0.35\" step=\"0.05\"><span class=\"unit\">m<\/span><\/div>\r\n                    <div class=\"ac-input\"><span class=\"label\">Carga Puntual (P)<\/span><input type=\"number\" id=\"f-P\" value=\"750\" step=\"10\"><span class=\"unit\">kN<\/span><\/div>\r\n                <\/div>\r\n                <div class=\"ac-input-row\">\r\n                    <div class=\"ac-input\"><span class=\"label\">\u03b3_H\u00b0A\u00b0 (\u03b3_c)<\/span><input type=\"number\" id=\"f-gammaC\" value=\"24\" step=\"0.5\"><span class=\"unit\">kN\/m\u00b3<\/span><\/div>\r\n                    <div class=\"ac-input\"><span class=\"label\">\u03b3_Relleno (\u03b3_r)<\/span><input type=\"number\" id=\"f-gammaR\" value=\"22\" step=\"0.5\"><span class=\"unit\">kN\/m\u00b3<\/span><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ac-group\" id=\"grp-losa\" style=\"display:none;\">\r\n                <label class=\"title\">Datos Espec\u00edficos (Losa)<\/label>\r\n                <div class=\"ac-input\"><span class=\"label\">Presi\u00f3n Total Transmitida (q)<\/span><input type=\"number\" id=\"f-q\" value=\"100\" step=\"5\"><span class=\"unit\">kPa<\/span><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- \u00c1REA PRINCIPAL -->\r\n        <div class=\"ac-main\">\r\n            <!-- Gr\u00e1fico Interactivo -->\r\n            <div class=\"ac-canvas-container\">\r\n                <canvas id=\"cvsNF\" width=\"700\" height=\"350\"><\/canvas>\r\n            <\/div>\r\n\r\n            <!-- Memoria de C\u00e1lculo -->\r\n            <div class=\"ac-memoria\">\r\n                <h3>Memoria Anal\u00edtica (Incremento de Esfuerzos)<\/h3>\r\n                \r\n                <div class=\"paso-calc\" id=\"mem-paso1-container\">\r\n                    <div class=\"paso-title\">Paso 1: C\u00e1lculo de la Carga Bruta (q)<\/div>\r\n                    <div class=\"math-block\" id=\"mem-paso1\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"paso-calc\">\r\n                    <div class=\"paso-title\">Paso 2: Condici\u00f3n Inicial (Antes de la construcci\u00f3n)<\/div>\r\n                    <div class=\"math-block\" id=\"mem-paso2\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"paso-calc\">\r\n                    <div class=\"paso-title\">Paso 3: Condici\u00f3n Final (Despu\u00e9s de la construcci\u00f3n)<\/div>\r\n                    <div class=\"math-block\" id=\"mem-paso3\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"paso-calc\">\r\n                    <div class=\"paso-title\">Paso 4: Carga Neta (Incremento de esfuerzo efectivo)<\/div>\r\n                    <div class=\"math-block\" id=\"mem-paso4\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    const inputsNF = document.querySelectorAll('.ac-sidebar input, .ac-sidebar select');\r\n    inputsNF.forEach(input => input.addEventListener('input', calcularNeto));\r\n\r\n    function calcularNeto() {\r\n        const tipo = document.getElementById(\"f-tipo\").value;\r\n        const Df = parseFloat(document.getElementById(\"f-Df\").value) || 0;\r\n        const NFo = parseFloat(document.getElementById(\"f-nfo\").value) || 0;\r\n        const NFf = parseFloat(document.getElementById(\"f-nff\").value) || 0;\r\n        const gammaS = parseFloat(document.getElementById(\"f-gammaS\").value) || 0;\r\n        const gammaW = parseFloat(document.getElementById(\"f-gammaW\").value) || 0;\r\n        const B = parseFloat(document.getElementById(\"f-B\").value) || 0.1;\r\n        const L = parseFloat(document.getElementById(\"f-L\").value) || 0.1;\r\n\r\n        document.getElementById(\"grp-aislada\").style.display = tipo === 'aislada' ? 'block' : 'none';\r\n        document.getElementById(\"grp-losa\").style.display = tipo === 'losa' ? 'block' : 'none';\r\n\r\n        let q_bruta = 0;\r\n        let htmlPaso1 = \"\";\r\n\r\n        if (tipo === 'aislada') {\r\n            document.getElementById(\"mem-paso1-container\").style.display = \"block\";\r\n            const b = parseFloat(document.getElementById(\"f-b\").value) || 0;\r\n            const l = parseFloat(document.getElementById(\"f-l\").value) || 0;\r\n            const h1 = parseFloat(document.getElementById(\"f-h1\").value) || 0;\r\n            const P = parseFloat(document.getElementById(\"f-P\").value) || 0;\r\n            const gammaC = parseFloat(document.getElementById(\"f-gammaC\").value) || 0;\r\n            const gammaR = parseFloat(document.getElementById(\"f-gammaR\").value) || 0;\r\n\r\n            const h2 = Df - h1;\r\n            const Vc = (B * L * h1) + (b * l * h2);\r\n            const Wc = Vc * gammaC;\r\n            const Vs = (B * L * Df) - Vc;\r\n            const Ws = Vs * gammaR;\r\n            q_bruta = (Wc + Ws + P) \/ (B * L);\r\n\r\n            htmlPaso1 = `\r\n                <div class=\"math-line\"><span class=\"math-var\">V<span class=\"math-sub\">c<\/span><\/span> = (B \u00b7 L \u00b7 h\u2081) + (b \u00b7 l \u00b7 h\u2082) = (<span class=\"math-val\">${B}<\/span> \u00b7 <span class=\"math-val\">${L}<\/span> \u00b7 <span class=\"math-val\">${h1}<\/span>) + (<span class=\"math-val\">${b}<\/span> \u00b7 <span class=\"math-val\">${l}<\/span> \u00b7 <span class=\"math-val\">${h2.toFixed(2)}<\/span>) = <span class=\"math-res\">${Vc.toFixed(3)} m\u00b3<\/span><\/div>\r\n                <div class=\"math-line\"><span class=\"math-var\">W<span class=\"math-sub\">c<\/span><\/span> = V<span class=\"math-sub\">c<\/span> \u00b7 \u03b3<span class=\"math-sub\">c<\/span> = <span class=\"math-val\">${Vc.toFixed(3)}<\/span> \u00b7 <span class=\"math-val\">${gammaC}<\/span> = <span class=\"math-res\">${Wc.toFixed(2)} kN<\/span><\/div>\r\n                <div class=\"math-line\"><span class=\"math-var\">V<span class=\"math-sub\">s<\/span><\/span> = (B \u00b7 L \u00b7 Df) - V<span class=\"math-sub\">c<\/span> = (<span class=\"math-val\">${B}<\/span> \u00b7 <span class=\"math-val\">${L}<\/span> \u00b7 <span class=\"math-val\">${Df}<\/span>) - <span class=\"math-val\">${Vc.toFixed(3)}<\/span> = <span class=\"math-res\">${Vs.toFixed(3)} m\u00b3<\/span><\/div>\r\n                <div class=\"math-line\"><span class=\"math-var\">W<span class=\"math-sub\">s<\/span><\/span> = V<span class=\"math-sub\">s<\/span> \u00b7 \u03b3<span class=\"math-sub\">r<\/span> = <span class=\"math-val\">${Vs.toFixed(3)}<\/span> \u00b7 <span class=\"math-val\">${gammaR}<\/span> = <span class=\"math-res\">${Ws.toFixed(2)} kN<\/span><\/div>\r\n                <div class=\"math-line\" style=\"margin-top: 10px;\">\r\n                    <span class=\"math-var\">q<\/span> = \r\n                    <div class=\"frac\">\r\n                        <div class=\"frac-top\">W<span class=\"math-sub\">c<\/span> + W<span class=\"math-sub\">s<\/span> + P<\/div>\r\n                        <div class=\"frac-bot\">B \u00b7 L<\/div>\r\n                    <\/div> =\r\n                    <div class=\"frac\">\r\n                        <div class=\"frac-top\"><span class=\"math-val\">${Wc.toFixed(2)}<\/span> + <span class=\"math-val\">${Ws.toFixed(2)}<\/span> + <span class=\"math-val\">${P}<\/span><\/div>\r\n                        <div class=\"frac-bot\"><span class=\"math-val\">${B}<\/span> \u00b7 <span class=\"math-val\">${L}<\/span><\/div>\r\n                    <\/div> = <span class=\"math-res\" style=\"font-size:1.2em;\">${q_bruta.toFixed(2)} kPa<\/span>\r\n                <\/div>\r\n            `;\r\n        } else {\r\n            document.getElementById(\"mem-paso1-container\").style.display = \"none\";\r\n            q_bruta = parseFloat(document.getElementById(\"f-q\").value) || 0;\r\n        }\r\n\r\n        const qo = gammaS * Df;\r\n        const mu_o = NFo < Df ? gammaW * (Df - NFo) : 0;\r\n        const q_eff_o = qo - mu_o;\r\n        let strMuO = NFo < Df ? `\u03b3<span class=\"math-sub\">w<\/span>(Df - NF<span class=\"math-sub\">o<\/span>) = <span class=\"math-val\">${gammaW}<\/span>(<span class=\"math-val\">${Df}<\/span> - <span class=\"math-val\">${NFo}<\/span>)` : `0`;\r\n\r\n        document.getElementById(\"mem-paso2\").innerHTML = `\r\n            <div class=\"math-line\"><span class=\"math-var\">q<span class=\"math-sub\">o<\/span><\/span> = \u03b3 \u00b7 Df = <span class=\"math-val\">${gammaS}<\/span> \u00b7 <span class=\"math-val\">${Df}<\/span> = <span class=\"math-res\">${qo.toFixed(2)} kPa<\/span><\/div>\r\n            <div class=\"math-line\"><span class=\"math-var\">\u03bc<span class=\"math-sub\">o<\/span><\/span> = ${strMuO} = <span class=\"math-res\">${mu_o.toFixed(2)} kPa<\/span><\/div>\r\n            <div class=\"math-line\"><span class=\"math-var\">q'<span class=\"math-sub\">o<\/span><\/span> = q<span class=\"math-sub\">o<\/span> - \u03bc<span class=\"math-sub\">o<\/span> = <span class=\"math-val\">${qo.toFixed(2)}<\/span> - <span class=\"math-val\">${mu_o.toFixed(2)}<\/span> = <span class=\"math-res\" style=\"color:#0f172a;\">${q_eff_o.toFixed(2)} kPa<\/span><\/div>\r\n        `;\r\n\r\n        const mu_f = NFf < Df ? gammaW * (Df - NFf) : 0;\r\n        const q_eff_f = q_bruta - mu_f;\r\n        let strMuF = NFf < Df ? `\u03b3<span class=\"math-sub\">w<\/span>(Df - NF<span class=\"math-sub\">f<\/span>) = <span class=\"math-val\">${gammaW}<\/span>(<span class=\"math-val\">${Df}<\/span> - <span class=\"math-val\">${NFf}<\/span>)` : `0`;\r\n\r\n        document.getElementById(\"mem-paso3\").innerHTML = `\r\n            <div class=\"math-line\"><span class=\"math-var\">q<\/span> = <span class=\"math-val\">${q_bruta.toFixed(2)} kPa<\/span><\/div>\r\n            <div class=\"math-line\"><span class=\"math-var\">\u03bc<span class=\"math-sub\">f<\/span><\/span> = ${strMuF} = <span class=\"math-res\">${mu_f.toFixed(2)} kPa<\/span><\/div>\r\n            <div class=\"math-line\"><span class=\"math-var\">q'<\/span> = q - \u03bc<span class=\"math-sub\">f<\/span> = <span class=\"math-val\">${q_bruta.toFixed(2)}<\/span> - <span class=\"math-val\">${mu_f.toFixed(2)}<\/span> = <span class=\"math-res\" style=\"color:#0f172a;\">${q_eff_f.toFixed(2)} kPa<\/span><\/div>\r\n        `;\r\n\r\n        const qn = q_eff_f - q_eff_o;\r\n        document.getElementById(\"mem-paso4\").innerHTML = `\r\n            <div class=\"math-line\">\r\n                <span class=\"math-var\">q<span class=\"math-sub\">n<\/span><\/span> = q' - q'<span class=\"math-sub\">o<\/span> = \r\n                <span class=\"math-val\">${q_eff_f.toFixed(2)}<\/span> - <span class=\"math-val\">${q_eff_o.toFixed(2)}<\/span> = \r\n                <span class=\"math-res\" style=\"font-size:1.4em;\">${qn.toFixed(2)} kPa<\/span>\r\n            <\/div>\r\n        `;\r\n\r\n        if (tipo === 'aislada') document.getElementById(\"mem-paso1\").innerHTML = htmlPaso1;\r\n\r\n        dibujarEscenarioVisual(tipo, B, Df, NFo, NFf, gammaS);\r\n    }\r\n\r\n    function dibujarEscenarioVisual(tipo, B, Df, NFo, NFf, gammaS) {\r\n        const cvs = document.getElementById(\"cvsNF\");\r\n        const ctx = cvs.getContext(\"2d\");\r\n        ctx.clearRect(0, 0, cvs.width, cvs.height);\r\n\r\n        \/\/ Ajuste de escalas\r\n        const maxProf = Math.max(Df, NFo, NFf) + 1.5; \r\n        const scaleY = (cvs.height * 0.65) \/ maxProf;\r\n        const scaleX = Math.min((cvs.width * 0.3) \/ B, scaleY);\r\n        \r\n        const cx = cvs.width \/ 2;\r\n        const y_terreno = cvs.height * 0.20;\r\n        const y_base = y_terreno + Df * scaleY;\r\n\r\n        \/\/ 1. TERRENO Y ESTRATO\r\n        ctx.fillStyle = \"rgba(245, 230, 211, 0.3)\"; \r\n        ctx.fillRect(cx - 320, y_terreno, 640, cvs.height);\r\n        \r\n        ctx.beginPath(); ctx.moveTo(cx - 320, y_terreno); ctx.lineTo(cx + 320, y_terreno);\r\n        ctx.lineWidth = 2; ctx.strokeStyle = \"#475569\"; ctx.stroke();\r\n        \r\n        \/\/ Etiqueta Gamma (\u03b3)\r\n        ctx.fillStyle = \"#92400e\"; ctx.font = \"bold 13px 'Inter'\";\r\n        ctx.fillText(`\u03b3 = ${gammaS} kN\/m\u00b3`, cx - 300, y_terreno + 25);\r\n\r\n        \/\/ 2. FUNDACI\u00d3N\r\n        ctx.fillStyle = \"#cbd5e1\"; ctx.strokeStyle = \"#0f172a\"; ctx.lineWidth = 2;\r\n        \r\n        if (tipo === 'aislada') {\r\n            const h1 = parseFloat(document.getElementById(\"f-h1\").value) || 0.35;\r\n            const b = parseFloat(document.getElementById(\"f-b\").value) || 0.4;\r\n            const P = parseFloat(document.getElementById(\"f-P\").value) || 0;\r\n            const y_h1 = y_base - h1 * scaleY;\r\n            \r\n            \/\/ Losa zapata\r\n            ctx.fillRect(cx - (B\/2)*scaleX, y_h1, B*scaleX, h1*scaleY);\r\n            ctx.strokeRect(cx - (B\/2)*scaleX, y_h1, B*scaleX, h1*scaleY);\r\n            \r\n            \/\/ Columna (Ahora nace exactamente al ras del suelo)\r\n            ctx.fillRect(cx - (b\/2)*scaleX, y_terreno, b*scaleX, (Df-h1)*scaleY);\r\n            ctx.strokeRect(cx - (b\/2)*scaleX, y_terreno, b*scaleX, (Df-h1)*scaleY);\r\n\r\n            \/\/ Cota Df (Izquierda)\r\n            dibujarCotaVertical(ctx, cx - (B\/2)*scaleX - 35, y_terreno, y_base, `Df = ${Df}m`, \"#475569\");\r\n            \r\n            \/\/ Cota h1 (Derecha)\r\n            dibujarCotaVertical(ctx, cx + (B\/2)*scaleX + 25, y_h1, y_base, `h\u2081 = ${h1}m`, \"#475569\");\r\n\r\n            \/\/ Vector P (Carga Puntual) alineado sobre la columna al ras del suelo\r\n            dibujarFlecha(ctx, cx, y_terreno - 50, cx, y_terreno, \"#000000\");\r\n            ctx.fillStyle = \"#000000\"; ctx.textAlign = \"center\"; \r\n            ctx.fillText(`P = ${P} kN`, cx, y_terreno - 60);\r\n            ctx.textAlign = \"left\";\r\n            \r\n        } else {\r\n            \/\/ Losa\r\n            const h_losa = 0.5 * scaleY;\r\n            ctx.fillRect(cx - (B\/2)*scaleX, y_base - h_losa, B*scaleX, h_losa);\r\n            ctx.strokeRect(cx - (B\/2)*scaleX, y_base - h_losa, B*scaleX, h_losa);\r\n            \r\n            \/\/ Cota Df\r\n            dibujarCotaVertical(ctx, cx - (B\/2)*scaleX - 35, y_terreno, y_base, `Df = ${Df}m`, \"#475569\");\r\n\r\n            \/\/ Carga Distribuida q\r\n            ctx.strokeStyle = \"#000000\"; ctx.fillStyle = \"#000000\";\r\n            for(let i=0; i<=4; i++) {\r\n                let px = cx - (B\/2)*scaleX + (B*scaleX\/4)*i;\r\n                dibujarFlecha(ctx, px, y_terreno - 40, px, y_base - h_losa, \"#000000\");\r\n            }\r\n            const qVal = document.getElementById(\"f-q\").value;\r\n            ctx.fillText(`q = ${qVal} kPa`, cx - 35, y_terreno - 50);\r\n        }\r\n\r\n        \/\/ 3. NIVELES FRE\u00c1TICOS\r\n        \/\/ NF Inicial (Azul) - Se dibuja a la izquierda\r\n        dibujarSimbologiaNF(ctx, cx - (B\/2)*scaleX - 110, y_terreno + NFo * scaleY, \"#0284c7\", `NF\u2080 = ${NFo}m`);\r\n        \/\/ NF Final (Rojo) - Se dibuja a la derecha\r\n        dibujarSimbologiaNF(ctx, cx + (B\/2)*scaleX + 110, y_terreno + NFf * scaleY, \"#ef4444\", `NF_f = ${NFf}m`);\r\n    }\r\n\r\n    function dibujarCotaVertical(ctx, x, y1, y2, texto, color) {\r\n        \/\/ L\u00ednea principal\r\n        ctx.beginPath(); ctx.moveTo(x, y1); ctx.lineTo(x, y2);\r\n        ctx.lineWidth = 1.5; ctx.strokeStyle = color; ctx.stroke();\r\n        \/\/ Ticks horizontales\r\n        ctx.beginPath(); ctx.moveTo(x - 5, y1); ctx.lineTo(x + 5, y1); ctx.stroke();\r\n        ctx.beginPath(); ctx.moveTo(x - 5, y2); ctx.lineTo(x + 5, y2); ctx.stroke();\r\n        \/\/ Texto rotado\r\n        ctx.save();\r\n        ctx.translate(x - 8, (y1 + y2) \/ 2);\r\n        ctx.rotate(-Math.PI \/ 2);\r\n        ctx.fillStyle = color; ctx.font = \"bold 12px 'Inter'\";\r\n        ctx.textAlign = \"center\";\r\n        ctx.fillText(texto, 0, 0);\r\n        ctx.restore();\r\n    }\r\n\r\n    function dibujarSimbologiaNF(ctx, x, y, color, texto) {\r\n        \/\/ L\u00ednea de nivel de agua (punteada)\r\n        ctx.beginPath(); ctx.setLineDash([6, 4]);\r\n        ctx.moveTo(x - 50, y); ctx.lineTo(x + 50, y);\r\n        ctx.lineWidth = 1.5; ctx.strokeStyle = color; ctx.stroke(); ctx.setLineDash([]);\r\n        \r\n        \/\/ Tri\u00e1ngulo\r\n        ctx.beginPath();\r\n        ctx.moveTo(x, y); ctx.lineTo(x - 10, y - 14); ctx.lineTo(x + 10, y - 14); ctx.closePath();\r\n        ctx.fillStyle = color; ctx.fill();\r\n        \r\n        \/\/ Rayitas inferiores (saturaci\u00f3n)\r\n        ctx.beginPath(); ctx.moveTo(x - 7, y + 4); ctx.lineTo(x + 7, y + 4);\r\n        ctx.moveTo(x - 4, y + 8); ctx.lineTo(x + 4, y + 8); ctx.lineWidth = 1.5; ctx.stroke();\r\n\r\n        \/\/ Texto\r\n        ctx.font = \"bold 13px 'Inter'\"; ctx.fillText(texto, x - 35, y - 22);\r\n    }\r\n\r\n    function dibujarFlecha(ctx, fromx, fromy, tox, toy, color) {\r\n        const headlen = 8; const angle = Math.atan2(toy - fromy, tox - fromx);\r\n        ctx.beginPath(); ctx.moveTo(fromx, fromy); ctx.lineTo(tox, toy); \r\n        ctx.lineWidth = 2; ctx.strokeStyle = color; ctx.stroke();\r\n        ctx.beginPath(); ctx.moveTo(tox, toy);\r\n        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI \/ 6), toy - headlen * Math.sin(angle - Math.PI \/ 6));\r\n        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI \/ 6), toy - headlen * Math.sin(angle + Math.PI \/ 6));\r\n        ctx.closePath(); ctx.fillStyle = color; ctx.fill();\r\n    }\r\n\r\n    \/\/ Auto arrancar\r\n    window.addEventListener('DOMContentLoaded', calcularNeto);\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-499","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/secic.fcyt.umss.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/secic.fcyt.umss.edu.bo\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/secic.fcyt.umss.edu.bo\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/secic.fcyt.umss.edu.bo\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/secic.fcyt.umss.edu.bo\/index.php\/wp-json\/wp\/v2\/comments?post=499"}],"version-history":[{"count":1,"href":"https:\/\/secic.fcyt.umss.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/499\/revisions"}],"predecessor-version":[{"id":500,"href":"https:\/\/secic.fcyt.umss.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/499\/revisions\/500"}],"wp:attachment":[{"href":"https:\/\/secic.fcyt.umss.edu.bo\/index.php\/wp-json\/wp\/v2\/media?parent=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}