{"id":8,"date":"2026-09-14T18:19:25","date_gmt":"2026-09-14T18:19:25","guid":{"rendered":"http:\/\/casalobosprint.com\/?page_id=8"},"modified":"2026-09-14T18:19:25","modified_gmt":"2026-09-14T18:19:25","slug":"8-2","status":"publish","type":"page","link":"https:\/\/casalobosprint.com\/?page_id=8","title":{"rendered":""},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n    <div class=\"casalobos-container\">\r\n        <div class=\"cl-card cl-form-box\">\r\n            <h3>Calculadora de Impresi\u00f3n<\/h3>\r\n            <form id=\"cl-item-form\">\r\n                <div class=\"cl-group\">\r\n                    <label>Selecciona el Servicio \/ Material<\/label>\r\n                    <select id=\"cl-select-servicio\" required>\r\n                        <option value=\"\">-- Elige una opci\u00f3n --<\/option>\r\n                                                    <option value=\"7\">Banner<\/option>\r\n                                                    <option value=\"6\">Pendones<\/option>\r\n                                            <\/select>\r\n                <\/div>\r\n\r\n                <!-- Medidas (Se ocultan si es por unidad) -->\r\n                <div id=\"cl-medidas-wrap\" class=\"cl-row\" style=\"display:none;\">\r\n                    <div class=\"cl-col\">\r\n                        <label>Ancho (cm)<\/label>\r\n                        <input type=\"number\" id=\"cl-ancho\" min=\"1\" placeholder=\"Ej: 100\">\r\n                    <\/div>\r\n                    <div class=\"cl-col\">\r\n                        <label>Alto (cm)<\/label>\r\n                        <input type=\"number\" id=\"cl-alto\" min=\"1\" placeholder=\"Ej: 150\">\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"cl-group\">\r\n                    <label>Cantidad<\/label>\r\n                    <input type=\"number\" id=\"cl-cantidad\" min=\"1\" value=\"1\" required>\r\n                <\/div>\r\n\r\n                <div id=\"cl-adicionales-wrap\" class=\"cl-group\" style=\"display:none;\">\r\n                    <label>Opciones Adicionales \/ Acabados:<\/label>\r\n                    <div id=\"cl-adicionales-list\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"cl-preview-subtotal\">\r\n                    <span>Subtotal \u00edtem: <strong id=\"cl-subtotal-display\">$0.00<\/strong><\/span>\r\n                    <button type=\"button\" id=\"cl-btn-agregar\" class=\"cl-btn secondary\">A\u00f1adir al Carrito<\/button>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n\r\n        <!-- CARRITO DE COTIZACIONES -->\r\n        <div class=\"cl-card cl-cart-box\">\r\n            <h3>Tu Cotizaci\u00f3n Actual<\/h3>\r\n            <div id=\"cl-cart-items\">\r\n                <p class=\"cl-empty-cart\">A\u00fan no has agregado ning\u00fan servicio.<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"cl-cart-footer\" id=\"cl-cart-footer\" style=\"display:none;\">\r\n                <div class=\"cl-total-row\">\r\n                    <span>Total General:<\/span>\r\n                    <span id=\"cl-cart-total\">$0.00<\/span>\r\n                <\/div>\r\n                <button type=\"button\" id=\"cl-btn-whatsapp\" class=\"cl-btn primary\">Enviar Cotizaci\u00f3n a WhatsApp \ud83d\udcf2<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n        .casalobos-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-family: sans-serif; max-width: 900px; margin: 0 auto; }\r\n        @media(max-width: 768px) { .casalobos-container { grid-template-columns: 1fr; } }\r\n        .cl-card { background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #eee; }\r\n        .cl-card h3 { margin-top: 0; font-size: 18px; border-bottom: 2px solid #f4f4f4; padding-bottom: 12px; }\r\n        .cl-group { margin-bottom: 15px; }\r\n        .cl-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #444; }\r\n        .cl-group select, .cl-group input[type=\"number\"] { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }\r\n        .cl-row { display: flex; gap: 10px; margin-bottom: 15px; }\r\n        .cl-col { flex: 1; }\r\n        .cl-preview-subtotal { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 15px; border-top: 1px dashed #ddd; }\r\n        .cl-btn { padding: 10px 18px; border-radius: 6px; font-weight: 600; border: none; cursor: pointer; font-size: 14px; }\r\n        .cl-btn.secondary { background: #f0f0f0; color: #333; }\r\n        .cl-btn.secondary:hover { background: #e0e0e0; }\r\n        .cl-btn.primary { background: #25d366; color: #fff; width: 100%; text-align: center; }\r\n        .cl-btn.primary:hover { background: #1ebe5d; }\r\n        .cl-cart-item { padding: 12px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }\r\n        .cl-cart-item-details b { display: block; color: #111; font-size: 14px; }\r\n        .cl-cart-item-details span { color: #666; }\r\n        .cl-cart-item-price { font-weight: bold; font-size: 15px; color: #000; }\r\n        .cl-cart-item-delete { background: none; border: none; color: #ff4d4d; cursor: pointer; font-size: 16px; margin-left: 10px; }\r\n        .cl-empty-cart { color: #888; text-align: center; font-style: italic; padding: 20px 0; }\r\n        .cl-cart-footer { margin-top: 20px; padding-top: 15px; border-top: 2px solid #eee; }\r\n        .cl-total-row { display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; margin-bottom: 15px; }\r\n    <\/style>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const servicios = typeof casalobosData !== 'undefined' ? casalobosData : {};\r\n            let cart = [];\r\n\r\n            const selectServicio = document.getElementById('cl-select-servicio');\r\n            const medidasWrap = document.getElementById('cl-medidas-wrap');\r\n            const anchoInput = document.getElementById('cl-ancho');\r\n            const altoInput = document.getElementById('cl-alto');\r\n            const cantInput = document.getElementById('cl-cantidad');\r\n            const adicionalesWrap = document.getElementById('cl-adicionales-wrap');\r\n            const adicionalesList = document.getElementById('cl-adicionales-list');\r\n            const subtotalDisplay = document.getElementById('cl-subtotal-display');\r\n            const btnAgregar = document.getElementById('cl-btn-agregar');\r\n            \r\n            const cartItemsContainer = document.getElementById('cl-cart-items');\r\n            const cartFooter = document.getElementById('cl-cart-footer');\r\n            const cartTotalDisplay = document.getElementById('cl-cart-total');\r\n            const btnWhatsapp = document.getElementById('cl-btn-whatsapp');\r\n\r\n            let currentItemCalculated = 0;\r\n\r\n            function calcularItemActual() {\r\n                const id = selectServicio.value;\r\n                if (!id || !servicios[id]) {\r\n                    subtotalDisplay.innerText = '$0.00';\r\n                    currentItemCalculated = 0;\r\n                    return 0;\r\n                }\r\n\r\n                const serv = servicios[id];\r\n                const cantidad = parseFloat(cantInput.value) || 1;\r\n                let baseCost = 0;\r\n\r\n                if (serv.tipo_calculo === 'area') {\r\n                    const w = parseFloat(anchoInput.value) || 0;\r\n                    const h = parseFloat(altoInput.value) || 0;\r\n                    const m2 = (w * h) \/ 10000;\r\n                    baseCost = m2 * serv.precio_base;\r\n                } else {\r\n                    baseCost = serv.precio_base;\r\n                }\r\n\r\n                \/\/ Sumar adicionales seleccionados\r\n                let extrasCost = 0;\r\n                const checkboxes = adicionalesList.querySelectorAll('input[type=\"checkbox\"]:checked');\r\n                checkboxes.forEach(cb => {\r\n                    extrasCost += parseFloat(cb.value) || 0;\r\n                });\r\n\r\n                let totalItem = (baseCost + extrasCost) * cantidad;\r\n                subtotalDisplay.innerText = '$' + totalItem.toFixed(2);\r\n                currentItemCalculated = totalItem;\r\n                return totalItem;\r\n            }\r\n\r\n            selectServicio.addEventListener('change', function() {\r\n                const id = this.value;\r\n                adicionalesList.innerHTML = '';\r\n                if (!id || !servicios[id]) {\r\n                    medidasWrap.style.display = 'none';\r\n                    adicionalesWrap.style.display = 'none';\r\n                    return;\r\n                }\r\n\r\n                const serv = servicios[id];\r\n                if (serv.tipo_calculo === 'area') {\r\n                    medidasWrap.style.display = 'flex';\r\n                } else {\r\n                    medidasWrap.style.display = 'none';\r\n                }\r\n\r\n                if (serv.adicionales && serv.adicionales.length > 0) {\r\n                    adicionalesWrap.style.display = 'block';\r\n                    let html = '';\r\n                    serv.adicionales.forEach((ad, index) => {\r\n                        html += `<label style=\"font-weight:normal; margin-bottom:5px;\">\r\n                                    <input type=\"checkbox\" class=\"cl-adic-cb\" value=\"${ad.precio}\" data-nombre=\"${ad.nombre}\"> \r\n                                    ${ad.nombre} (+$${ad.precio.toFixed(2)})\r\n                                 <\/label>`;\r\n                    });\r\n                    adicionalesList.innerHTML = html;\r\n                } else {\r\n                    adicionalesWrap.style.display = 'none';\r\n                }\r\n                calcularItemActual();\r\n            });\r\n\r\n            document.getElementById('cl-item-form').addEventListener('input', calcularItemActual);\r\n            adicionalesList.addEventListener('change', calcularItemActual);\r\n\r\n            \/\/ A\u00f1adir al carrito\r\n            btnAgregar.addEventListener('click', function() {\r\n                const id = selectServicio.value;\r\n                if (!id || !servicios[id]) {\r\n                    alert('Por favor selecciona un servicio.');\r\n                    return;\r\n                }\r\n\r\n                const serv = servicios[id];\r\n                const cantidad = parseInt(cantInput.value) || 1;\r\n                let medidasText = '';\r\n                let ancho = 0, alto = 0;\r\n\r\n                if (serv.tipo_calculo === 'area') {\r\n                    ancho = parseFloat(anchoInput.value) || 0;\r\n                    alto = parseFloat(altoInput.value) || 0;\r\n                    if (ancho <= 0 || alto <= 0) {\r\n                        alert('Por favor ingresa las medidas v\u00e1lidas (ancho y alto).');\r\n                        return;\r\n                    }\r\n                    medidasText = `Medidas: ${ancho}cm x ${alto}cm | `;\r\n                }\r\n\r\n                \/\/ Recopilar adicionales seleccionados\r\n                let selectedExtras = [];\r\n                const checkboxes = adicionalesList.querySelectorAll('.cl-adic-cb:checked');\r\n                checkboxes.forEach(cb => {\r\n                    selectedExtras.push({\r\n                        nombre: cb.getAttribute('data-nombre'),\r\n                        precio: parseFloat(cb.value)\r\n                    });\r\n                });\r\n\r\n                const itemPrice = currentItemCalculated;\r\n\r\n                cart.push({\r\n                    nombre: serv.nombre,\r\n                    cantidad: cantidad,\r\n                    medidas: medidasText,\r\n                    extras: selectedExtras,\r\n                    total: itemPrice\r\n                });\r\n\r\n                renderCart();\r\n                \/\/ Reset form basico\r\n                cantInput.value = 1;\r\n                if(anchoInput) anchoInput.value = '';\r\n                if(altoInput) altoInput.value = '';\r\n                subtotalDisplay.innerText = '$0.00';\r\n            });\r\n\r\n            function renderCart() {\r\n                if (cart.length === 0) {\r\n                    cartItemsContainer.innerHTML = '<p class=\"cl-empty-cart\">A\u00fan no has agregado ning\u00fan servicio.<\/p>';\r\n                    cartFooter.style.display = 'none';\r\n                    return;\r\n                }\r\n\r\n                let html = '';\r\n                let cartTotal = 0;\r\n\r\n                cart.forEach((item, idx) => {\r\n                    cartTotal += item.total;\r\n                    let extrasStr = item.extras.length > 0 ? 'Extras: ' + item.extras.map(e => e.nombre).join(', ') : '';\r\n                    \r\n                    html += `<div class=\"cl-cart-item\">\r\n                                <div class=\"cl-cart-item-details\">\r\n                                    <b>${item.nombre} (Cant: ${item.cantidad})<\/b>\r\n                                    <span>${item.medidas} ${extrasStr}<\/span>\r\n                                <\/div>\r\n                                <div style=\"display:flex; align-items:center;\">\r\n                                    <span class=\"cl-cart-item-price\">$${item.total.toFixed(2)}<\/span>\r\n                                    <button type=\"button\" class=\"cl-cart-item-delete\" data-index=\"${idx}\">&times;<\/button>\r\n                                <\/div>\r\n                             <\/div>`;\r\n                });\r\n\r\n                cartItemsContainer.innerHTML = html;\r\n                cartTotalDisplay.innerText = '$' + cartTotal.toFixed(2);\r\n                cartFooter.style.display = 'block';\r\n\r\n                \/\/ Botones de eliminar item\r\n                document.querySelectorAll('.cl-cart-item-delete').forEach(btn => {\r\n                    btn.addEventListener('click', function() {\r\n                        const index = parseInt(this.getAttribute('data-index'));\r\n                        cart.splice(index, 1);\r\n                        renderCart();\r\n                    });\r\n                });\r\n            }\r\n\r\n            \/\/ Enviar a WhatsApp\r\n            btnWhatsapp.addEventListener('click', function() {\r\n                if (cart.length === 0) return;\r\n\r\n                let mensaje = \"\u00a1Hola Casalobos! \ud83d\udc3a Deseo solicitar la siguiente cotizaci\u00f3n:%0A%0A\";\r\n                let totalGral = 0;\r\n\r\n                cart.forEach((item, idx) => {\r\n                    mensaje += `*${idx + 1}. ${item.nombre}*%0A`;\r\n                    mensaje += `- Cantidad: ${item.cantidad}%0A`;\r\n                    if (item.medidas) mensaje += `- ${item.medidas}%0A`;\r\n                    if (item.extras.length > 0) {\r\n                        mensaje += `- Adicionales: ${item.extras.map(e => e.nombre).join(', ')}%0A`;\r\n                    }\r\n                    mensaje += `- Subtotal: *$${item.total.toFixed(2)}*%0A%0A`;\r\n                    totalGral += item.total;\r\n                });\r\n\r\n                mensaje += `*TOTAL GENERAL ESTIMADO: $${totalGral.toFixed(2)}*%0A%0AQuedo atento a las indicaciones para proceder. \u00a1Gracias!`;\r\n\r\n                const phone = casalobosSettings.whatsapp;\r\n                const url = `https:\/\/wa.me\/${phone}?text=${mensaje}`;\r\n                window.open(url, '_blank');\r\n            });\r\n        });\r\n    <\/script>\r\n    \n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\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":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/casalobosprint.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/casalobosprint.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/casalobosprint.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/casalobosprint.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/casalobosprint.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":1,"href":"https:\/\/casalobosprint.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/casalobosprint.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/casalobosprint.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}