{"id":2171,"date":"2026-04-09T15:42:36","date_gmt":"2026-04-09T21:42:36","guid":{"rendered":"https:\/\/imagora.mx\/?page_id=2171"},"modified":"2026-04-09T20:25:44","modified_gmt":"2026-04-10T02:25:44","slug":"calculadora2","status":"publish","type":"page","link":"https:\/\/imagora.mx\/sitio2025\/calculadora2\/","title":{"rendered":"calculadora2"},"content":{"rendered":"<div class=\"et_d4_element et_pb_section et_pb_section_0  et_pb_css_mix_blend_mode et_section_regular et_block_section\" >\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<div class=\"et_d4_element et_pb_row et_pb_row_0  et_pb_css_mix_blend_mode et_block_row\">\n\t\t\t\t<div class=\"et_d4_element et_pb_column_4_4 et_pb_column et_pb_column_0  et_pb_css_mix_blend_mode et-last-child et_block_column\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<div class=\"et_pb_module et_d4_element et_pb_code et_pb_code_0\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<div class=\"et_pb_code_inner\"><div class=\"dtf-calculator-wrapper\">\n    <div class=\"dtf-header\">\n        <h3>Calculadora de Cotizaciones de playeras en DTF<\/h3>\n        Ingresa tus costos y medidas (en cent\u00edmetros) para calcular el precio final y material requerido.\n    <\/div>\n\n    <form id=\"dtf-form\" class=\"dtf-grid\">\n        <div class=\"dtf-section\">\n            <h4>1. Datos de la Playera<\/h4>\n            <div class=\"dtf-input-group\">\n                <label>N\u00famero de playeras a producir<\/label>\n                <input type=\"number\" id=\"qty\" value=\"1\" min=\"1\" step=\"1\">\n            <\/div>\n            <div class=\"dtf-input-group\">\n                <label>Costo de cada playera ($)<\/label>\n                <input type=\"number\" id=\"tshirt-cost\" value=\"0\" min=\"0\" step=\"0.5\">\n            <\/div>\n        <\/div>\n\n        <div class=\"dtf-section\">\n            <h4>2. Datos del Material DTF<\/h4>\n            <div class=\"dtf-row\">\n                <div class=\"dtf-input-group\">\n                    <label>Ancho del pliego\/rollo (cm)<\/label>\n                    <input type=\"number\" id=\"sheet-w\" value=\"58\" min=\"1\" step=\"0.1\">\n                <\/div>\n                <div class=\"dtf-input-group\">\n                    <label>Largo del pliego (cm)<\/label>\n                    <input type=\"number\" id=\"sheet-l\" value=\"100\" min=\"1\" step=\"0.1\">\n                <\/div>\n            <\/div>\n            <div class=\"dtf-input-group\">\n                <label>Costo total del pliego\/metro ($)<\/label>\n                <input type=\"number\" id=\"sheet-cost\" value=\"0\" min=\"0\" step=\"1\">\n            <\/div>\n        <\/div>\n\n        <div class=\"dtf-section\" style=\"grid-column: 1 \/ -1;\">\n            <h4>3. Medidas de los Dise\u00f1os por Playera (cm)<\/h4>\n            <p style=\"font-size: 0.85em; color: #666; margin-bottom: 10px;\">Deja en 0 los dise\u00f1os que no vayas a utilizar.\n            <div class=\"dtf-grid-4\">\n                <div class=\"dtf-design-box\">\n                    <strong>Frente<\/strong>\n                    <label>Ancho<\/label><input type=\"number\" id=\"d1-w\" value=\"0\" min=\"0\" step=\"0.1\">\n                    <label>Largo<\/label><input type=\"number\" id=\"d1-l\" value=\"0\" min=\"0\" step=\"0.1\">\n                <\/div>\n                <div class=\"dtf-design-box\">\n                    <strong>Espalda<\/strong>\n                    <label>Ancho<\/label><input type=\"number\" id=\"d2-w\" value=\"0\" min=\"0\" step=\"0.1\">\n                    <label>Largo<\/label><input type=\"number\" id=\"d2-l\" value=\"0\" min=\"0\" step=\"0.1\">\n                <\/div>\n                <div class=\"dtf-design-box\">\n                    <strong>Manga izquierda<\/strong>\n                    <label>Ancho<\/label><input type=\"number\" id=\"d3-w\" value=\"0\" min=\"0\" step=\"0.1\">\n                    <label>Largo<\/label><input type=\"number\" id=\"d3-l\" value=\"0\" min=\"0\" step=\"0.1\">\n                <\/div>\n                <div class=\"dtf-design-box\">\n                    <strong>Manga derecha<\/strong>\n                    <label>Ancho<\/label><input type=\"number\" id=\"d4-w\" value=\"0\" min=\"0\" step=\"0.1\">\n                    <label>Largo<\/label><input type=\"number\" id=\"d4-l\" value=\"0\" min=\"0\" step=\"0.1\">\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"dtf-section\">\n            <h4>4. Operaci\u00f3n y Extras<\/h4>\n            <div class=\"dtf-input-group\">\n                <label>Costo de planchado (por playera)<\/label>\n                <input type=\"number\" id=\"press-cost\" value=\"0\" min=\"0\" step=\"0.5\">\n            <\/div>\n            <div class=\"dtf-input-group\">\n                <label>Costo de empaque (por playera)<\/label>\n                <input type=\"number\" id=\"pack-cost\" value=\"0\" min=\"0\" step=\"0.5\">\n            <\/div>\n            <div class=\"dtf-input-group\">\n                <label>Costo de mensajer\u00eda (total pedido)<\/label>\n                <input type=\"number\" id=\"ship-cost\" value=\"0\" min=\"0\" step=\"1\">\n            <\/div>\n        <\/div>\n\n        <div class=\"dtf-section\">\n            <h4>5. Ganancia<\/h4>\n            <div class=\"dtf-input-group highlight-input\">\n                <label>Margen de Utilidad Deseado (%)<\/label>\n                <input type=\"number\" id=\"margin\" value=\"30\" min=\"0\" max=\"500\" step=\"1\">\n            <\/div>\n        <\/div>\n    <\/form>\n\n    <div class=\"dtf-results\">\n        <div class=\"res-box metric-box\" style=\"grid-column: 1 \/ -1; background: #e3f2fd;\">\n            <span>Metros Lineales de DTF (Aprox.)<\/span>\n            <h2 id=\"res-meters\" style=\"color: #0073aa;\">0.00 m<\/h2>\n        <\/div>\n        <div class=\"res-box\">\n            <span>Costo de Producci\u00f3n (Total)<\/span>\n            <h2 id=\"res-cost\">$0.00<\/h2>\n        <\/div>\n        <div class=\"res-box\">\n            <span>Utilidad Neta Estimada<\/span>\n            <h2 id=\"res-profit\">$0.00<\/h2>\n        <\/div>\n        <div class=\"res-box primary-res\">\n            <span>Precio de Venta (Por Playera)<\/span>\n            <h2 id=\"res-unit-price\">$0.00<\/h2>\n        <\/div>\n        <div class=\"res-box primary-res\">\n            <span>Precio de Venta (Total Pedido)<\/span>\n            <h2 id=\"res-total-price\">$0.00<\/h2>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    \/* Dise\u00f1o integrado para Divi *\/\n    .dtf-calculator-wrapper {\n        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        background: #ffffff;\n        border-radius: 12px;\n        box-shadow: 0 8px 30px rgba(0,0,0,0.08);\n        padding: 30px;\n        max-width: 900px;\n        margin: 0 auto;\n        color: #333;\n    }\n    .dtf-header {\n        text-align: center;\n        margin-bottom: 30px;\n        border-bottom: 2px solid #f0f0f0;\n        padding-bottom: 20px;\n    }\n    .dtf-header h3 {\n        margin: 0 0 10px 0;\n        color: #2c3e50;\n        font-weight: 700;\n    }\n    .dtf-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 25px;\n    }\n    .dtf-section {\n        background: #f8f9fa;\n        padding: 20px;\n        border-radius: 8px;\n        border: 1px solid #e9ecef;\n    }\n    .dtf-section h4 {\n        margin-top: 0;\n        color: #0073aa; \n        font-size: 16px;\n        margin-bottom: 15px;\n        border-bottom: 1px solid #ddd;\n        padding-bottom: 8px;\n    }\n    .dtf-row {\n        display: flex;\n        gap: 15px;\n    }\n    .dtf-input-group {\n        display: flex;\n        flex-direction: column;\n        margin-bottom: 15px;\n        flex: 1;\n    }\n    .dtf-input-group label {\n        font-size: 13px;\n        font-weight: 600;\n        margin-bottom: 5px;\n        color: #555;\n    }\n    .dtf-input-group input {\n        padding: 10px;\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        font-size: 15px;\n        transition: border-color 0.3s;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .dtf-input-group input:focus {\n        border-color: #0073aa;\n        outline: none;\n    }\n    .highlight-input input {\n        border-color: #28a745;\n        background: #f1fdf3;\n        font-weight: bold;\n    }\n    .dtf-grid-4 {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 15px;\n    }\n    .dtf-design-box {\n        background: #fff;\n        padding: 10px;\n        border-radius: 6px;\n        border: 1px solid #ddd;\n    }\n    .dtf-design-box strong {\n        display: block;\n        margin-bottom: 10px;\n        font-size: 14px;\n        color: #333;\n        text-align: center;\n    }\n    .dtf-design-box label {\n        font-size: 12px;\n        display: block;\n        margin-top: 5px;\n    }\n    .dtf-design-box input {\n        width: 100%;\n        padding: 5px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        box-sizing: border-box;\n    }\n    .dtf-results {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 20px;\n        margin-top: 30px;\n        padding-top: 20px;\n        border-top: 2px solid #f0f0f0;\n    }\n    .res-box {\n        background: #e9ecef;\n        padding: 20px;\n        border-radius: 8px;\n        text-align: center;\n    }\n    .res-box.primary-res {\n        background: #2c3e50;\n        color: white;\n    }\n    .res-box span {\n        font-size: 14px;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        opacity: 0.8;\n    }\n    .res-box h2 {\n        margin: 10px 0 0 0;\n        font-size: 28px;\n        color: inherit;\n    }\n    \n    \/* Responsive para m\u00f3viles *\/\n    @media (max-width: 768px) {\n        .dtf-grid { grid-template-columns: 1fr; }\n        .dtf-grid-4 { grid-template-columns: 1fr 1fr; }\n        .dtf-results { grid-template-columns: 1fr; }\n    }\n<\/style>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const form = document.getElementById(\"dtf-form\");\n        const inputs = form.querySelectorAll(\"input\");\n\n        function calculate() {\n            \/\/ 1. Obtener valores\n            const qty = parseFloat(document.getElementById('qty').value) || 0;\n            const tshirtCost = parseFloat(document.getElementById('tshirt-cost').value) || 0;\n            \n            const sheetW = parseFloat(document.getElementById('sheet-w').value) || 1; \/\/ Evitar divisi\u00f3n por 0\n            const sheetL = parseFloat(document.getElementById('sheet-l').value) || 1;\n            const sheetCost = parseFloat(document.getElementById('sheet-cost').value) || 0;\n\n            const pressCost = parseFloat(document.getElementById('press-cost').value) || 0;\n            const packCost = parseFloat(document.getElementById('pack-cost').value) || 0;\n            const shipCost = parseFloat(document.getElementById('ship-cost').value) || 0;\n            const margin = parseFloat(document.getElementById('margin').value) || 0;\n\n            \/\/ 2. C\u00e1lculos de \u00c1rea de Dise\u00f1o\n            let totalDesignAreaPerShirt = 0;\n            for(let i=1; i<=4; i++) {\n                const w = parseFloat(document.getElementById(`d${i}-w`).value) || 0;\n                const l = parseFloat(document.getElementById(`d${i}-l`).value) || 0;\n                totalDesignAreaPerShirt += (w * l);\n            }\n\n            \/\/ 3. C\u00e1lculo de Metros Lineales Requeridos\n            \/\/ Multiplicamos el \u00e1rea de una playera por el total de playeras, \n            \/\/ lo dividimos entre el ancho del pliego y luego entre 100 para convertir cm a metros.\n            const totalAreaAllShirts = totalDesignAreaPerShirt * qty;\n            const linearMetersNeeded = (totalAreaAllShirts \/ sheetW) \/ 100;\n\n            \/\/ 4. C\u00e1lculos Financieros DTF (Por \u00c1rea en cm2)\n            const sheetArea = sheetW * sheetL;\n            const costPerCm2 = sheetCost \/ sheetArea;\n\n            const dtfCostPerShirt = totalDesignAreaPerShirt * costPerCm2;\n            const totalDtfCost = dtfCostPerShirt * qty;\n\n            \/\/ 5. C\u00e1lculos de Costos Totales\n            const totalTshirtCost = tshirtCost * qty;\n            const totalPressCost = pressCost * qty;\n            const totalPackCost = packCost * qty;\n\n            const totalProductionCost = totalTshirtCost + totalDtfCost + totalPressCost + totalPackCost + shipCost;\n\n            \/\/ 6. C\u00e1lculo de Precio de Venta y Utilidad\n            const totalSalePrice = totalProductionCost * (1 + (margin \/ 100));\n            const totalProfit = totalSalePrice - totalProductionCost;\n            \n            const unitSalePrice = qty > 0 ? totalSalePrice \/ qty : 0;\n\n            \/\/ 7. Actualizar la interfaz\n            document.getElementById('res-meters').innerText = linearMetersNeeded.toFixed(2) + ' m';\n            document.getElementById('res-cost').innerText = '$' + totalProductionCost.toFixed(2);\n            document.getElementById('res-profit').innerText = '$' + totalProfit.toFixed(2);\n            document.getElementById('res-unit-price').innerText = '$' + unitSalePrice.toFixed(2);\n            document.getElementById('res-total-price').innerText = '$' + totalSalePrice.toFixed(2);\n        }\n\n        \/\/ Agregar el evento a todos los inputs para que calcule en tiempo real\n        inputs.forEach(input => {\n            input.addEventListener('input', calculate);\n        });\n\n        \/\/ Retraso ligero para asegurar la carga en Divi\n        setTimeout(calculate, 500);\n    });\n<\/script><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\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":{"inline_featured_image":false,"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>&lt;div class=\"dtf-calculator-wrapper\">\n    &lt;div class=\"dtf-header\">\n        &lt;h3>Calculadora de Cotizaciones DTF&lt;\/h3>\n        &lt;p>Ingresa tus costos y medidas (en cent\u00edmetros) para calcular el precio final.&lt;\/p>\n    &lt;\/div>\n\n    &lt;form id=\"dtf-form\" class=\"dtf-grid\">\n        &lt;div class=\"dtf-section\">\n            &lt;h4>1. Datos de la Playera&lt;\/h4>\n            &lt;div class=\"dtf-input-group\">\n                &lt;label>N\u00famero de playeras a producir&lt;\/label>\n                &lt;input type=\"number\" id=\"qty\" value=\"1\" min=\"1\" step=\"1\">\n            &lt;\/div>\n            &lt;div class=\"dtf-input-group\">\n                &lt;label>Costo de cada playera ($)&lt;\/label>\n                &lt;input type=\"number\" id=\"tshirt-cost\" value=\"0\" min=\"0\" step=\"0.5\">\n            &lt;\/div>\n        &lt;\/div>\n\n        &lt;div class=\"dtf-section\">\n            &lt;h4>2. Datos del Pliego DTF&lt;\/h4>\n            &lt;div class=\"dtf-row\">\n                &lt;div class=\"dtf-input-group\">\n                    &lt;label>Ancho del pliego (cm)&lt;\/label>\n                    &lt;input type=\"number\" id=\"sheet-w\" value=\"58\" min=\"1\" step=\"0.1\">\n                &lt;\/div>\n                &lt;div class=\"dtf-input-group\">\n                    &lt;label>Largo del pliego (cm)&lt;\/label>\n                    &lt;input type=\"number\" id=\"sheet-l\" value=\"100\" min=\"1\" step=\"0.1\">\n                &lt;\/div>\n            &lt;\/div>\n            &lt;div class=\"dtf-input-group\">\n                &lt;label>Costo total del pliego ($)&lt;\/label>\n                &lt;input type=\"number\" id=\"sheet-cost\" value=\"0\" min=\"0\" step=\"1\">\n            &lt;\/div>\n        &lt;\/div>\n\n        &lt;div class=\"dtf-section\" style=\"grid-column: 1 \/ -1;\">\n            &lt;h4>3. Medidas de los Dise\u00f1os por Playera (cm)&lt;\/h4>\n            &lt;p style=\"font-size: 0.85em; color: #666; margin-bottom: 10px;\">Deja en 0 los dise\u00f1os que no vayas a utilizar.&lt;\/p>\n            &lt;div class=\"dtf-grid-4\">\n                &lt;div class=\"dtf-design-box\">\n                    &lt;strong>Dise\u00f1o 1&lt;\/strong>\n                    &lt;label>Ancho&lt;\/label>&lt;input type=\"number\" id=\"d1-w\" value=\"0\" min=\"0\" step=\"0.1\">\n                    &lt;label>Largo&lt;\/label>&lt;input type=\"number\" id=\"d1-l\" value=\"0\" min=\"0\" step=\"0.1\">\n                &lt;\/div>\n                &lt;div class=\"dtf-design-box\">\n                    &lt;strong>Dise\u00f1o 2&lt;\/strong>\n                    &lt;label>Ancho&lt;\/label>&lt;input type=\"number\" id=\"d2-w\" value=\"0\" min=\"0\" step=\"0.1\">\n                    &lt;label>Largo&lt;\/label>&lt;input type=\"number\" id=\"d2-l\" value=\"0\" min=\"0\" step=\"0.1\">\n                &lt;\/div>\n                &lt;div class=\"dtf-design-box\">\n                    &lt;strong>Dise\u00f1o 3&lt;\/strong>\n                    &lt;label>Ancho&lt;\/label>&lt;input type=\"number\" id=\"d3-w\" value=\"0\" min=\"0\" step=\"0.1\">\n                    &lt;label>Largo&lt;\/label>&lt;input type=\"number\" id=\"d3-l\" value=\"0\" min=\"0\" step=\"0.1\">\n                &lt;\/div>\n                &lt;div class=\"dtf-design-box\">\n                    &lt;strong>Dise\u00f1o 4&lt;\/strong>\n                    &lt;label>Ancho&lt;\/label>&lt;input type=\"number\" id=\"d4-w\" value=\"0\" min=\"0\" step=\"0.1\">\n                    &lt;label>Largo&lt;\/label>&lt;input type=\"number\" id=\"d4-l\" value=\"0\" min=\"0\" step=\"0.1\">\n                &lt;\/div>\n            &lt;\/div>\n        &lt;\/div>\n\n        &lt;div class=\"dtf-section\">\n            &lt;h4>4. Operaci\u00f3n y Extras&lt;\/h4>\n            &lt;div class=\"dtf-input-group\">\n                &lt;label>Costo de planchado (por playera)&lt;\/label>\n                &lt;input type=\"number\" id=\"press-cost\" value=\"0\" min=\"0\" step=\"0.5\">\n            &lt;\/div>\n            &lt;div class=\"dtf-input-group\">\n                &lt;label>Costo de empaque (por playera)&lt;\/label>\n                &lt;input type=\"number\" id=\"pack-cost\" value=\"0\" min=\"0\" step=\"0.5\">\n            &lt;\/div>\n            &lt;div class=\"dtf-input-group\">\n                &lt;label>Costo de mensajer\u00eda (total pedido)&lt;\/label>\n                &lt;input type=\"number\" id=\"ship-cost\" value=\"0\" min=\"0\" step=\"1\">\n            &lt;\/div>\n        &lt;\/div>\n\n        &lt;div class=\"dtf-section\">\n            &lt;h4>5. Ganancia&lt;\/h4>\n            &lt;div class=\"dtf-input-group highlight-input\">\n                &lt;label>Margen de Utilidad Deseado (%)&lt;\/label>\n                &lt;input type=\"number\" id=\"margin\" value=\"30\" min=\"0\" max=\"500\" step=\"1\">\n            &lt;\/div>\n        &lt;\/div>\n    &lt;\/form>\n\n    &lt;div class=\"dtf-results\">\n        &lt;div class=\"res-box\">\n            &lt;span>Costo de Producci\u00f3n (Total)&lt;\/span>\n            &lt;h2 id=\"res-cost\">$0.00&lt;\/h2>\n        &lt;\/div>\n        &lt;div class=\"res-box\">\n            &lt;span>Utilidad Neta Estimada&lt;\/span>\n            &lt;h2 id=\"res-profit\">$0.00&lt;\/h2>\n        &lt;\/div>\n        &lt;div class=\"res-box primary-res\">\n            &lt;span>Precio de Venta (Por Playera)&lt;\/span>\n            &lt;h2 id=\"res-unit-price\">$0.00&lt;\/h2>\n        &lt;\/div>\n        &lt;div class=\"res-box primary-res\">\n            &lt;span>Precio de Venta (Total Pedido)&lt;\/span>\n            &lt;h2 id=\"res-total-price\">$0.00&lt;\/h2>\n        &lt;\/div>\n    &lt;\/div>\n&lt;\/div>\n\n&lt;style>\n    \/* Dise\u00f1o integrado para Divi *\/\n    .dtf-calculator-wrapper {\n        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        background: #ffffff;\n        border-radius: 12px;\n        box-shadow: 0 8px 30px rgba(0,0,0,0.08);\n        padding: 30px;\n        max-width: 900px;\n        margin: 0 auto;\n        color: #333;\n    }\n    .dtf-header {\n        text-align: center;\n        margin-bottom: 30px;\n        border-bottom: 2px solid #f0f0f0;\n        padding-bottom: 20px;\n    }\n    .dtf-header h3 {\n        margin: 0 0 10px 0;\n        color: #2c3e50;\n        font-weight: 700;\n    }\n    .dtf-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 25px;\n    }\n    .dtf-section {\n        background: #f8f9fa;\n        padding: 20px;\n        border-radius: 8px;\n        border: 1px solid #e9ecef;\n    }\n    .dtf-section h4 {\n        margin-top: 0;\n        color: #0073aa; \/* Color que puedes adaptar a tu marca *\/\n        font-size: 16px;\n        margin-bottom: 15px;\n        border-bottom: 1px solid #ddd;\n        padding-bottom: 8px;\n    }\n    .dtf-row {\n        display: flex;\n        gap: 15px;\n    }\n    .dtf-input-group {\n        display: flex;\n        flex-direction: column;\n        margin-bottom: 15px;\n        flex: 1;\n    }\n    .dtf-input-group label {\n        font-size: 13px;\n        font-weight: 600;\n        margin-bottom: 5px;\n        color: #555;\n    }\n    .dtf-input-group input {\n        padding: 10px;\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        font-size: 15px;\n        transition: border-color 0.3s;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .dtf-input-group input:focus {\n        border-color: #0073aa;\n        outline: none;\n    }\n    .highlight-input input {\n        border-color: #28a745;\n        background: #f1fdf3;\n        font-weight: bold;\n    }\n    .dtf-grid-4 {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 15px;\n    }\n    .dtf-design-box {\n        background: #fff;\n        padding: 10px;\n        border-radius: 6px;\n        border: 1px solid #ddd;\n    }\n    .dtf-design-box strong {\n        display: block;\n        margin-bottom: 10px;\n        font-size: 14px;\n        color: #333;\n        text-align: center;\n    }\n    .dtf-design-box label {\n        font-size: 12px;\n        display: block;\n        margin-top: 5px;\n    }\n    .dtf-design-box input {\n        width: 100%;\n        padding: 5px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        box-sizing: border-box;\n    }\n    .dtf-results {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 20px;\n        margin-top: 30px;\n        padding-top: 20px;\n        border-top: 2px solid #f0f0f0;\n    }\n    .res-box {\n        background: #e9ecef;\n        padding: 20px;\n        border-radius: 8px;\n        text-align: center;\n    }\n    .res-box.primary-res {\n        background: #2c3e50;\n        color: white;\n    }\n    .res-box span {\n        font-size: 14px;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        opacity: 0.8;\n    }\n    .res-box h2 {\n        margin: 10px 0 0 0;\n        font-size: 28px;\n        color: inherit;\n    }\n    \n    \/* Responsive para m\u00f3viles *\/\n    @media (max-width: 768px) {\n        .dtf-grid { grid-template-columns: 1fr; }\n        .dtf-grid-4 { grid-template-columns: 1fr 1fr; }\n        .dtf-results { grid-template-columns: 1fr; }\n    }\n&lt;\/style>\n\n&lt;script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const form = document.getElementById(\"dtf-form\");\n        const inputs = form.querySelectorAll(\"input\");\n\n        function calculate() {\n            \/\/ 1. Obtener valores\n            const qty = parseFloat(document.getElementById('qty').value) || 0;\n            const tshirtCost = parseFloat(document.getElementById('tshirt-cost').value) || 0;\n            \n            const sheetW = parseFloat(document.getElementById('sheet-w').value) || 1; \/\/ Evitar divisi\u00f3n por 0\n            const sheetL = parseFloat(document.getElementById('sheet-l').value) || 1;\n            const sheetCost = parseFloat(document.getElementById('sheet-cost').value) || 0;\n\n            const pressCost = parseFloat(document.getElementById('press-cost').value) || 0;\n            const packCost = parseFloat(document.getElementById('pack-cost').value) || 0;\n            const shipCost = parseFloat(document.getElementById('ship-cost').value) || 0;\n            const margin = parseFloat(document.getElementById('margin').value) || 0;\n\n            \/\/ 2. C\u00e1lculos DTF (Por \u00c1rea en cm2)\n            const sheetArea = sheetW * sheetL;\n            const costPerCm2 = sheetCost \/ sheetArea;\n\n            let totalDesignAreaPerShirt = 0;\n            for(let i=1; i&lt;=4; i++) {\n                const w = parseFloat(document.getElementById(`d${i}-w`).value) || 0;\n                const l = parseFloat(document.getElementById(`d${i}-l`).value) || 0;\n                totalDesignAreaPerShirt += (w * l);\n            }\n\n            const dtfCostPerShirt = totalDesignAreaPerShirt * costPerCm2;\n            const totalDtfCost = dtfCostPerShirt * qty;\n\n            \/\/ 3. C\u00e1lculos de Costos Totales\n            const totalTshirtCost = tshirtCost * qty;\n            const totalPressCost = pressCost * qty;\n            const totalPackCost = packCost * qty;\n\n            const totalProductionCost = totalTshirtCost + totalDtfCost + totalPressCost + totalPackCost + shipCost;\n\n            \/\/ 4. C\u00e1lculo de Precio de Venta y Utilidad\n            \/\/ F\u00f3rmula de margen de marcado: Costo * (1 + (Margen \/ 100))\n            const totalSalePrice = totalProductionCost * (1 + (margin \/ 100));\n            const totalProfit = totalSalePrice - totalProductionCost;\n            \n            const unitSalePrice = qty > 0 ? totalSalePrice \/ qty : 0;\n\n            \/\/ 5. Actualizar la interfaz\n            document.getElementById('res-cost').innerText = '$' + totalProductionCost.toFixed(2);\n            document.getElementById('res-profit').innerText = '$' + totalProfit.toFixed(2);\n            document.getElementById('res-unit-price').innerText = '$' + unitSalePrice.toFixed(2);\n            document.getElementById('res-total-price').innerText = '$' + totalSalePrice.toFixed(2);\n        }\n\n        \/\/ Agregar el evento a todos los inputs para que calcule en tiempo real\n        inputs.forEach(input => {\n            input.addEventListener('input', calculate);\n        });\n\n        \/\/ C\u00e1lculo inicial al cargar\n        calculate();\n    });\n&lt;\/script><\/code><\/pre>\n<!-- \/wp:code -->","_et_gb_content_width":"","footnotes":""},"class_list":["post-2171","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/imagora.mx\/sitio2025\/wp-json\/wp\/v2\/pages\/2171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imagora.mx\/sitio2025\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/imagora.mx\/sitio2025\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/imagora.mx\/sitio2025\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imagora.mx\/sitio2025\/wp-json\/wp\/v2\/comments?post=2171"}],"version-history":[{"count":5,"href":"https:\/\/imagora.mx\/sitio2025\/wp-json\/wp\/v2\/pages\/2171\/revisions"}],"predecessor-version":[{"id":2180,"href":"https:\/\/imagora.mx\/sitio2025\/wp-json\/wp\/v2\/pages\/2171\/revisions\/2180"}],"wp:attachment":[{"href":"https:\/\/imagora.mx\/sitio2025\/wp-json\/wp\/v2\/media?parent=2171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}