{"id":494,"date":"2025-09-20T16:12:52","date_gmt":"2025-09-20T19:12:52","guid":{"rendered":"https:\/\/chilemosaico.cl\/acusgrafia\/?page_id=494"},"modified":"2025-09-21T05:12:14","modified_gmt":"2025-09-21T08:12:14","slug":"calculadora-para-trastes-de-charangos-y-guitarras","status":"publish","type":"page","link":"https:\/\/chilemosaico.cl\/acusgrafia\/calculadora-para-trastes-de-charangos-y-guitarras\/","title":{"rendered":"Calculadora para trastes de charangos y guitarras"},"content":{"rendered":"<style>.wp-block-kadence-advancedheading.kt-adv-heading494_46d6b7-d4, .wp-block-kadence-advancedheading.kt-adv-heading494_46d6b7-d4[data-kb-block=\"kb-adv-heading494_46d6b7-d4\"]{font-size:var(--global-kb-font-size-lg, 2rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading494_46d6b7-d4 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading494_46d6b7-d4[data-kb-block=\"kb-adv-heading494_46d6b7-d4\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading494_46d6b7-d4 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading494_46d6b7-d4[data-kb-block=\"kb-adv-heading494_46d6b7-d4\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h1 class=\"kt-adv-heading494_46d6b7-d4 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading494_46d6b7-d4\"><strong>Calculadora para trastes de charangos y guitarras<\/strong><\/h1>\n\n\n\n<p>Esta herramienta calcula las posiciones de los trastes para instrumentos de cuerda seg\u00fan el sistema de temperamento igual. Este sistema divide la octava en 12 semitonos iguales, siendo el est\u00e1ndar en la m\u00fasica occidental moderna. Es ideal para luthiers, fabricantes de instrumentos y entusiastas de la m\u00fasica que necesitan datos precisos para construir o reparar instrumentos.<\/p>\n\n\n\n<p><strong>Caracter\u00edsticas:<\/strong><\/p>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items494_a308df-3b:not(.this-stops-third-party-issues){margin-top:0px;margin-bottom:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items494_a308df-3b ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){margin-top:0px;margin-right:0px;margin-bottom:var(--global-kb-spacing-sm, 1.5rem);margin-left:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items494_a308df-3b ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items494_a308df-3b ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items494_a308df-3b ul.kt-svg-icon-list .kt-svg-icon-list-level-0 .kt-svg-icon-list-single svg{font-size:20px;}<\/style>\n<div class=\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items494_a308df-3b kt-svg-icon-list-columns-1 alignnone\"><ul class=\"kt-svg-icon-list\"><style>.kt-svg-icon-list-item-494_f1d319-a6 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-494_f1d319-a6\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">C\u00e1lculo de distancias desde la ceja y el puente<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-494_31a737-78 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-494_31a737-78\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Selector de n\u00famero de trastes.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-494_549b52-f0 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-494_549b52-f0\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Selector de unidades (cm, mm, pulgadas)<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-494_ac8f75-04 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-494_ac8f75-04\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Visualizaci\u00f3n gr\u00e1fica del diapas\u00f3n con detalles de distancias entre trastes<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-494_05f99e-72 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-494_05f99e-72\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Opci\u00f3n de exportar resultados en CSV<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-494_058b70-f3 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-494_058b70-f3\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Descarga visual de la escala<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-494_544fe7-1e .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-494_544fe7-1e\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Informaci\u00f3n te\u00f3rica sobre el temperamento igual<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" data-id=\"499\" src=\"https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Calculadora-para-guitarra-y-charango.jpg\" alt=\"\" class=\"wp-image-499\" srcset=\"https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Calculadora-para-guitarra-y-charango.jpg 800w, https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Calculadora-para-guitarra-y-charango-300x300.jpg 300w, https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Calculadora-para-guitarra-y-charango-150x150.jpg 150w, https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Calculadora-para-guitarra-y-charango-768x768.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" data-id=\"721\" src=\"https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Calculadora-para-charango-y-guitarra-chilemosaico.jpg\" alt=\"\" class=\"wp-image-721\" srcset=\"https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Calculadora-para-charango-y-guitarra-chilemosaico.jpg 800w, https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Calculadora-para-charango-y-guitarra-chilemosaico-300x300.jpg 300w, https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Calculadora-para-charango-y-guitarra-chilemosaico-150x150.jpg 150w, https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Calculadora-para-charango-y-guitarra-chilemosaico-768x768.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/figure>\n\n\n\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Calculadora de Trastes &#8211; Versi\u00f3n Mejorada<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <style>\n        #fret-calculator {\n            font-family: 'Inter', sans-serif;\n            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n            min-height: 100vh;\n        }\n        #fret-calculator .glass-effect {\n            background: rgba(255, 255, 255, 0.8);\n            backdrop-filter: blur(10px);\n            border: 1px solid rgba(255, 255, 255, 0.2);\n        }\n        #fret-calculator .tooltip {\n            position: relative;\n            display: inline-block;\n        }\n        #fret-calculator .tooltip .tooltiptext {\n            visibility: hidden;\n            width: 300px;\n            background-color: #1f2937;\n            color: #fff;\n            text-align: left;\n            border-radius: 8px;\n            padding: 15px;\n            position: absolute;\n            z-index: 1;\n            bottom: 125%;\n            left: 50%;\n            margin-left: -150px;\n            opacity: 0;\n            transition: opacity 0.3s;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n            font-size: 0.875rem;\n            line-height: 1.5;\n        }\n        #fret-calculator .tooltip .tooltiptext::after {\n            content: \"\";\n            position: absolute;\n            top: 100%;\n            left: 50%;\n            margin-left: -5px;\n            border-width: 5px;\n            border-style: solid;\n            border-color: #1f2937 transparent transparent transparent;\n        }\n        #fret-calculator .tooltip:hover .tooltiptext {\n            visibility: visible;\n            opacity: 1;\n        }\n        #fret-calculator .control-panel-shadow {\n            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.05);\n        }\n        #fret-calculator .fret-number {\n            fill: #4f46e5;\n            font-weight: 600;\n            font-size: 12px;\n        }\n        #fret-calculator .fret-distance {\n            fill: #dc2626;\n            font-weight: 500;\n            font-size: 10px;\n        }\n        #fret-calculator .fret-line {\n            stroke: #4b5563;\n            stroke-width: 2;\n        }\n        #fret-calculator .string-line {\n            stroke: #6b7280;\n            stroke-width: 1.5;\n        }\n        #fret-calculator .length-label {\n            fill: #059669;\n            font-weight: 600;\n            font-size: 12px;\n        }\n        #fret-calculator .ruler-mark {\n            stroke: #9ca3af;\n            stroke-width: 1;\n        }\n        #fret-calculator .ruler-text {\n            fill: #6b7280;\n            font-size: 9px;\n            font-weight: 500;\n        }\n        #fret-calculator .nut {\n            fill: #f3f4f6;\n            stroke: #374151;\n            stroke-width: 2;\n        }\n        #fret-calculator .bridge {\n            fill: #78350f;\n            stroke: #451a03;\n            stroke-width: 1;\n        }\n        #fret-calculator canvas {\n            border-radius: 8px;\n        }\n        #fret-calculator .print-mode {\n            display: none;\n        }\n        @media print {\n            #fret-calculator .no-print {\n                display: none;\n            }\n            #fret-calculator .print-mode {\n                display: block;\n                margin-top: 20px;\n            }\n        }\n        #fret-calculator .highlight-row {\n            transition: background-color 0.2s;\n        }\n        #fret-calculator .highlight-row:hover {\n            background-color: #f0f9ff;\n        }\n        #fret-calculator .export-notification {\n            position: fixed;\n            top: 20px;\n            right: 20px;\n            background: #10b981;\n            color: white;\n            padding: 12px 20px;\n            border-radius: 8px;\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n            z-index: 1000;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            transform: translateX(100%);\n            transition: transform 0.3s ease;\n        }\n        #fret-calculator .export-notification.show {\n            transform: translateX(0);\n        }\n        #fret-calculator .zoom-controls {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            display: flex;\n            gap: 5px;\n            z-index: 10;\n        }\n        #fret-calculator .zoom-btn {\n            background: rgba(255, 255, 255, 0.9);\n            border: 1px solid #d1d5db;\n            border-radius: 4px;\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            font-weight: bold;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        }\n        #fret-calculator .zoom-btn:hover {\n            background: #f3f4f6;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div id=\"fret-calculator\">\n        <div class=\"container mx-auto p-4 md:p-8 max-w-7xl\">\n            <header class=\"text-center mb-8\">\n                <h1 class=\"text-4xl font-bold text-gray-900 bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent\">Calculadora de Trastes <span class=\"text-sm font-semibold text-indigo-600 align-top\">v0.25<\/span><\/h1>\n                <p class=\"text-gray-600 mt-2\">Calcula las posiciones de los trastes para instrumentos de cuerda<\/p>\n            <\/header>\n\n            <main>\n                <!-- Panel de Controles -->\n                <div class=\"glass-effect rounded-2xl p-6 mb-8 control-panel-shadow sticky top-4 z-10\">\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 items-end\">\n                        <!-- Longitud de Escala -->\n                        <div>\n                            <label for=\"scaleLength\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n                                <i class=\"fas fa-ruler-combined mr-1 text-indigo-500\"><\/i>Longitud de Escala\n                            <\/label>\n                            <input type=\"number\" id=\"scaleLength\" value=\"38\" min=\"0\" step=\"0.01\" class=\"w-full bg-white text-gray-900 rounded-lg border-gray-300 focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition shadow-sm py-2.5 px-4\">\n                        <\/div>\n                        \n                        <!-- N\u00famero de Trastes -->\n                        <div>\n                            <label for=\"numFrets\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n                                <i class=\"fas fa-sliders-h mr-1 text-indigo-500\"><\/i>N\u00famero de Trastes\n                            <\/label>\n                            <input type=\"number\" id=\"numFrets\" value=\"18\" min=\"1\" max=\"36\" step=\"1\" class=\"w-full bg-white text-gray-900 rounded-lg border-gray-300 focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition shadow-sm py-2.5 px-4\">\n                        <\/div>\n\n                        <!-- Selector de Unidades -->\n                        <div>\n                            <label for=\"units\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n                                <i class=\"fas fa-ruler mr-1 text-indigo-500\"><\/i>Unidades\n                            <\/label>\n                            <select id=\"units\" class=\"w-full bg-white text-gray-900 rounded-lg border-gray-300 focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition shadow-sm py-2.5 px-4\">\n                                <option value=\"cm\">Cent\u00edmetros (cm)<\/option>\n                                <option value=\"mm\">Mil\u00edmetros (mm)<\/option>\n                                <option value=\"in\">Pulgadas (in)<\/option>\n                            <\/select>\n                        <\/div>\n\n                        <!-- Bot\u00f3n de C\u00e1lculo -->\n                        <div class=\"md:col-span-1\">\n                            <button id=\"calculateBtn\" class=\"w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2.5 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-[1.02] shadow-md flex items-center justify-center\">\n                                <i class=\"fas fa-calculator mr-2\"><\/i> Calcular\n                            <\/button>\n                        <\/div>\n\n                        <!-- Tooltip de Informaci\u00f3n -->\n                        <div class=\"flex items-center justify-start md:justify-end text-sm text-gray-500\">\n                            <div class=\"tooltip\">\n                                <span class=\"cursor-help border-b border-dashed border-gray-400 flex items-center\">\n                                    <i class=\"fas fa-info-circle mr-1 text-indigo-500\"><\/i> \u00bfC\u00f3mo funciona?\n                                <\/span>\n                                <span class=\"tooltiptext\">\n                                    <strong class=\"text-indigo-300 block mb-2 text-base\">Teor\u00eda del Temperamento Igual<\/strong>\n                                    Esta herramienta utiliza la constante &#8220;doceava ra\u00edz de dos&#8221; (\u22481.05946). Para encontrar la posici\u00f3n de un traste, se divide la longitud vibrante de la cuerda por esta constante. El resultado es la nueva longitud vibrante. La diferencia es donde se coloca el traste. Este sistema divide la octava en 12 semitonos iguales, siendo el est\u00e1ndar en la m\u00fasica occidental moderna.\n                                <\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"text-center text-xs text-gray-500 mt-4 flex items-center justify-center\">\n                        <i class=\"fas fa-lightbulb text-yellow-500 mr-1\"><\/i> Nota: Opciones avanzadas como la compensaci\u00f3n del puente se a\u00f1adir\u00e1n en futuras versiones.\n                    <\/div>\n                <\/div>\n\n                <!-- \u00c1rea de Resultados -->\n                <div id=\"resultsArea\" class=\"hidden\">\n                    <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n                        <!-- Tabla de Resultados -->\n                        <div class=\"glass-effect border border-gray-200 rounded-2xl p-6 shadow-md\">\n                            <div class=\"flex justify-between items-center mb-4\">\n                                <h2 class=\"text-2xl font-semibold text-gray-900 flex items-center\">\n                                    <i class=\"fas fa-table mr-2 text-indigo-500\"><\/i> Tabla de Posiciones\n                                <\/h2>\n                                <div class=\"flex space-x-2\">\n                                    <button id=\"exportCsvBtn\" class=\"bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 flex items-center\">\n                                        <i class=\"fas fa-file-csv mr-2\"><\/i> CSV\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                            <div class=\"overflow-auto max-h-[60vh] rounded-lg border border-gray-200\">\n                                <table class=\"w-full text-sm text-left text-gray-600\">\n                                    <thead class=\"text-xs text-gray-700 uppercase bg-gray-100\/80 sticky top-0\">\n                                        <tr>\n                                            <th scope=\"col\" class=\"py-3 px-4\">Traste<\/th>\n                                            <th scope=\"col\" class=\"py-3 px-4\">Desde Ceja<\/th>\n                                            <th scope=\"col\" class=\"py-3 px-4\">Desde Puente<\/th>\n                                            <th scope=\"col\" class=\"py-3 px-4\">Entre Trastes<\/th>\n                                        <\/tr>\n                                    <\/thead>\n                                    <tbody id=\"resultsTableBody\" class=\"divide-y divide-gray-200\">\n                                        <!-- Los resultados se insertar\u00e1n aqu\u00ed -->\n                                    <\/tbody>\n                                <\/table>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Visualizaci\u00f3n Gr\u00e1fica -->\n                        <div class=\"glass-effect border border-gray-200 rounded-2xl p-6 shadow-md\">\n                            <h2 class=\"text-2xl font-semibold mb-4 text-gray-900 flex items-center\">\n                                <i class=\"fas fa-guitar mr-2 text-indigo-500\"><\/i> Diagrama de la Escala\n                            <\/h2>\n                            <div class=\"bg-gray-100\/50 rounded-lg p-4 border border-gray-200 mb-4 relative\">\n                                <div class=\"zoom-controls\">\n                                    <button id=\"zoomInBtn\" class=\"zoom-btn\">+<\/button>\n                                    <button id=\"zoomOutBtn\" class=\"zoom-btn\">&#8211;<\/button>\n                                    <button id=\"resetZoomBtn\" class=\"zoom-btn\">\n                                        <i class=\"fas fa-sync-alt\" style=\"font-size: 12px;\"><\/i>\n                                    <\/button>\n                                <\/div>\n                                <div class=\"relative w-full h-64 overflow-hidden\" id=\"fretboardContainer\">\n                                    <svg id=\"fretboardSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 1000 240\" preserveAspectRatio=\"xMidYMid meet\"><\/svg>\n                                <\/div>\n                            <\/div>\n                            <div class=\"grid grid-cols-2 gap-3\">\n                                <button id=\"exportImageBtn\" class=\"bg-green-600 hover:bg-green-700 text-white font-bold py-2.5 rounded-lg transition duration-300 flex items-center justify-center\">\n                                    <i class=\"fas fa-download mr-2\"><\/i> Exportar Imagen\n                                <\/button>\n                                <button id=\"toggleDistancesBtn\" class=\"bg-purple-600 hover:bg-purple-700 text-white font-bold py-2.5 rounded-lg transition duration-300 flex items-center justify-center\">\n                                    <i class=\"fas fa-eye mr-2\"><\/i> Alternar Distancias\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Informaci\u00f3n adicional -->\n                    <div class=\"glass-effect border border-gray-200 rounded-2xl p-6 shadow-md mt-8\">\n                        <h2 class=\"text-xl font-semibold mb-3 text-gray-900 flex items-center\">\n                            <i class=\"fas fa-chart-line mr-2 text-indigo-500\"><\/i> Informaci\u00f3n de la Escala\n                        <\/h2>\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 text-sm\" id=\"scaleInfo\">\n                            <!-- La informaci\u00f3n se insertar\u00e1 aqu\u00ed -->\n                        <\/div>\n                    <\/div>\n\n                    <!-- Bot\u00f3n de impresi\u00f3n en la parte inferior -->\n                    <div class=\"mt-8 text-center\">\n                        <button id=\"printBtn\" class=\"bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center mx-auto\">\n                            <i class=\"fas fa-print mr-2\"><\/i> Imprimir Resultados\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Estado vac\u00edo -->\n                <div id=\"emptyState\" class=\"text-center py-16 glass-effect rounded-2xl mt-8\">\n                    <i class=\"fas fa-guitar text-gray-300 text-5xl mb-4\"><\/i>\n                    <h3 class=\"text-xl font-semibold text-gray-500\">Calculadora de Trastes<\/h3>\n                    <p class=\"text-gray-400 mt-2\">Ingresa los par\u00e1metros y haz clic en Calcular para ver los resultados<\/p>\n                <\/div>\n            <\/main>\n\n            <footer class=\"mt-12 text-center text-gray-500 text-sm pb-6\">\n                <p>Herramienta libre dise\u00f1ada para luthiers y fabricantes de instrumentos de cuerda<\/p>\n                <p class=\"mt-1\">\u00a9 Calculadora de Trastes &#8211; v0.25 &#8211; Made in Iquique<\/p>\n            <\/footer>\n        <\/div>\n\n        <!-- Notificaci\u00f3n de exportaci\u00f3n -->\n        <div id=\"exportNotification\" class=\"export-notification\">\n            <i class=\"fas fa-check-circle\"><\/i>\n            <span>Imagen exportada correctamente<\/span>\n        <\/div>\n    <\/div>\n\n    <!-- Script para exportar SVG a PNG -->\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ CONSTANTES\n            const TWELFTH_ROOT_OF_TWO = Math.pow(2, 1 \/ 12);\n\n            \/\/ SELECTORES DEL DOM\n            const scaleLengthInput = document.getElementById('scaleLength');\n            const numFretsInput = document.getElementById('numFrets');\n            const unitsSelect = document.getElementById('units');\n            const calculateBtn = document.getElementById('calculateBtn');\n            const resultsArea = document.getElementById('resultsArea');\n            const emptyState = document.getElementById('emptyState');\n            const tableBody = document.getElementById('resultsTableBody');\n            const fretboardSvg = document.getElementById('fretboardSvg');\n            const exportCsvBtn = document.getElementById('exportCsvBtn');\n            const exportImageBtn = document.getElementById('exportImageBtn');\n            const printBtn = document.getElementById('printBtn');\n            const toggleDistancesBtn = document.getElementById('toggleDistancesBtn');\n            const zoomInBtn = document.getElementById('zoomInBtn');\n            const zoomOutBtn = document.getElementById('zoomOutBtn');\n            const resetZoomBtn = document.getElementById('resetZoomBtn');\n            const scaleInfo = document.getElementById('scaleInfo');\n            const exportNotification = document.getElementById('exportNotification');\n            const fretboardContainer = document.getElementById('fretboardContainer');\n            \n            let fretData = [];\n            let currentUnit = 'cm';\n            let showDistances = true;\n            let currentZoom = 1;\n            \n            \/\/ --- L\u00d3GICA DE C\u00c1LCULO ---\n            function calculateFretPositions(scaleLength, numFrets) {\n                let data = [];\n                let remainingLength = scaleLength;\n                let distanceFromNutTotal = 0;\n\n                for (let i = 1; i <= numFrets; i++) {\n                    const newRemainingLength = remainingLength \/ TWELFTH_ROOT_OF_TWO;\n                    const fretDistance = remainingLength - newRemainingLength;\n                    distanceFromNutTotal += fretDistance;\n                    \n                    data.push({\n                        fret: i,\n                        fromNut: distanceFromNutTotal,\n                        fromBridge: newRemainingLength,\n                        betweenFrets: fretDistance,\n                    });\n                    \n                    remainingLength = newRemainingLength;\n                }\n                return data;\n            }\n\n            \/\/ --- L\u00d3GICA DE CONVERSI\u00d3N DE UNIDADES ---\n            function convertValue(value, fromUnit, toUnit) {\n                if (fromUnit === toUnit) return value;\n                \n                \/\/ Primero convertir a CM como base\n                let valueInCm;\n                if (fromUnit === 'mm') valueInCm = value \/ 10;\n                else if (fromUnit === 'in') valueInCm = value * 2.54;\n                else valueInCm = value;\n\n                \/\/ Ahora convertir de CM a la unidad deseada\n                if (toUnit === 'mm') return valueInCm * 10;\n                if (toUnit === 'in') return valueInCm \/ 2.54;\n                return valueInCm;\n            }\n\n            function getConvertedData(unit) {\n                const scaleInCm = convertValue(parseFloat(scaleLengthInput.value) || 0, unitsSelect.value, 'cm');\n                const numFrets = parseInt(numFretsInput.value, 10) || 0;\n                if (!scaleInCm || !numFrets) return [];\n\n                const cmData = calculateFretPositions(scaleInCm, numFrets);\n\n                return cmData.map(fret => ({\n                    ...fret,\n                    fromNut: convertValue(fret.fromNut, 'cm', unit),\n                    fromBridge: convertValue(fret.fromBridge, 'cm', unit),\n                    betweenFrets: convertValue(fret.betweenFrets, 'cm', unit),\n                }));\n            }\n            \n            \/\/ --- RENDERIZADO ---\n            function renderTable(data, unit) {\n                tableBody.innerHTML = '';\n                if (data.length === 0) return;\n\n                data.forEach(item => {\n                    const row = document.createElement('tr');\n                    row.className = 'highlight-row';\n                    row.innerHTML = `\n                        <td class=\"py-3 px-4 font-medium text-gray-900\">${item.fret}<\/td>\n                        <td class=\"py-3 px-4\">${item.fromNut.toFixed(3)} ${unit}<\/td>\n                        <td class=\"py-3 px-4\">${item.fromBridge.toFixed(3)} ${unit}<\/td>\n                        <td class=\"py-3 px-4\">${item.betweenFrets.toFixed(3)} ${unit}<\/td>\n                    `;\n                    tableBody.appendChild(row);\n                });\n            }\n\n            function renderDiagram(data, scaleLength, unit) {\n                \/\/ Limpiar SVG\n                fretboardSvg.innerHTML = '';\n                \n                const svgWidth = 1000;\n                const svgHeight = 240;\n                const padding = 60;\n                const drawWidth = svgWidth - 2 * padding;\n                const scaleFactor = drawWidth \/ scaleLength;\n                \n                \/\/ Dibujar fondo\n                const bgRect = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"rect\");\n                bgRect.setAttribute(\"width\", \"100%\");\n                bgRect.setAttribute(\"height\", \"100%\");\n                bgRect.setAttribute(\"fill\", \"#f9fafb\");\n                bgRect.setAttribute(\"rx\", \"8\");\n                fretboardSvg.appendChild(bgRect);\n                \n                \/\/ Dibujar ceja\n                const nut = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"rect\");\n                nut.setAttribute(\"x\", padding - 4);\n                nut.setAttribute(\"y\", 40);\n                nut.setAttribute(\"width\", 8);\n                nut.setAttribute(\"height\", svgHeight - 80);\n                nut.setAttribute(\"class\", \"nut\");\n                fretboardSvg.appendChild(nut);\n                \n                \/\/ Dibujar puente\n                const bridge = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"rect\");\n                bridge.setAttribute(\"x\", svgWidth - padding + 2);\n                bridge.setAttribute(\"y\", 40);\n                bridge.setAttribute(\"width\", 6);\n                bridge.setAttribute(\"height\", svgHeight - 80);\n                bridge.setAttribute(\"class\", \"bridge\");\n                fretboardSvg.appendChild(bridge);\n                \n                \/\/ Dibujar cuerdas\n                for (let i = 0; i < 5; i++) {\n                    const y = 60 + i * ((svgHeight - 120) \/ 4);\n                    const string = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"line\");\n                    string.setAttribute(\"x1\", padding);\n                    string.setAttribute(\"y1\", y);\n                    string.setAttribute(\"x2\", svgWidth - padding);\n                    string.setAttribute(\"y2\", y);\n                    string.setAttribute(\"class\", \"string-line\");\n                    fretboardSvg.appendChild(string);\n                }\n                \n                \/\/ Dibujar trastes\n                data.forEach((fret, index) => {\n                    const x = padding + fret.fromNut * scaleFactor;\n                    \n                    \/\/ L\u00ednea del traste\n                    const fretLine = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"line\");\n                    fretLine.setAttribute(\"x1\", x);\n                    fretLine.setAttribute(\"y1\", 40);\n                    fretLine.setAttribute(\"x2\", x);\n                    fretLine.setAttribute(\"y2\", svgHeight - 40);\n                    fretLine.setAttribute(\"class\", \"fret-line\");\n                    fretboardSvg.appendChild(fretLine);\n                    \n                    \/\/ N\u00famero del traste\n                    const fretText = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n                    fretText.setAttribute(\"x\", x);\n                    fretText.setAttribute(\"y\", svgHeight - 20);\n                    fretText.setAttribute(\"class\", \"fret-number\");\n                    fretText.setAttribute(\"text-anchor\", \"middle\");\n                    fretText.textContent = fret.fret;\n                    fretboardSvg.appendChild(fretText);\n                    \n                    \/\/ Distancia entre trastes (opcional)\n                    if (showDistances) {\n                        let midX, distanceValue;\n                        \n                        if (fret.fret === 1) {\n                            \/\/ Distancia desde la ceja hasta el primer traste\n                            midX = padding + (fret.fromNut * scaleFactor \/ 2);\n                            distanceValue = fret.fromNut;\n                        } else {\n                            \/\/ Distancia entre trastes\n                            const prevX = padding + data[index - 1].fromNut * scaleFactor;\n                            midX = (x + prevX) \/ 2;\n                            distanceValue = fret.betweenFrets;\n                        }\n                        \n                        const distanceText = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n                        distanceText.setAttribute(\"x\", midX);\n                        distanceText.setAttribute(\"y\", 25);\n                        distanceText.setAttribute(\"class\", \"fret-distance\");\n                        distanceText.setAttribute(\"text-anchor\", \"middle\");\n                        distanceText.textContent = distanceValue.toFixed(2);\n                        fretboardSvg.appendChild(distanceText);\n                    }\n                });\n                \n                \/\/ Etiqueta de longitud total\n                const lengthText = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n                lengthText.setAttribute(\"x\", svgWidth \/ 2);\n                lengthText.setAttribute(\"y\", svgHeight - 5);\n                lengthText.setAttribute(\"class\", \"length-label\");\n                lengthText.setAttribute(\"text-anchor\", \"middle\");\n                lengthText.textContent = `Longitud Total: ${scaleLength.toFixed(2)} ${unit}`;\n                fretboardSvg.appendChild(lengthText);\n                \n                \/\/ Regla con marcas\n                for (let i = 0; i <= scaleLength; i += 5) {\n                    const x = padding + i * scaleFactor;\n                    \n                    \/\/ Marca de la regla\n                    const mark = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"line\");\n                    mark.setAttribute(\"x1\", x);\n                    mark.setAttribute(\"y1\", 35);\n                    mark.setAttribute(\"x2\", x);\n                    mark.setAttribute(\"y2\", 40);\n                    mark.setAttribute(\"class\", \"ruler-mark\");\n                    fretboardSvg.appendChild(mark);\n                    \n                    \/\/ Texto de la regla\n                    if (i % 10 === 0) {\n                        const markText = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n                        markText.setAttribute(\"x\", x);\n                        markText.setAttribute(\"y\", 30);\n                        markText.setAttribute(\"class\", \"ruler-text\");\n                        markText.setAttribute(\"text-anchor\", \"middle\");\n                        markText.textContent = i;\n                        fretboardSvg.appendChild(markText);\n                    }\n                }\n            }\n\n            function updateScaleInfo(data, scaleLength, unit) {\n                if (!data.length) return;\n                \n                scaleInfo.innerHTML = `\n                    <div class=\"bg-indigo-50 p-4 rounded-lg\">\n                        <h3 class=\"font-semibold text-indigo-700 mb-2\">Longitud de escala<\/h3>\n                        <p class=\"text-2xl font-bold text-indigo-800\">${scaleLength.toFixed(2)} ${unit}<\/p>\n                    <\/div>\n                    <div class=\"bg-green-50 p-4 rounded-lg\">\n                        <h3 class=\"font-semibold text-green-700 mb-2\">N\u00famero de trastes<\/h3>\n                        <p class=\"text-2xl font-bold text-green-800\">${data.length}<\/p>\n                    <\/div>\n                `;\n            }\n            \n            \/\/ --- ZOOM FUNCTIONS ---\n            function applyZoom() {\n                fretboardContainer.style.transform = `scale(${currentZoom})`;\n                fretboardContainer.style.transformOrigin = 'center center';\n            }\n            \n            function zoomIn() {\n                if (currentZoom < 2) {\n                    currentZoom += 0.1;\n                    applyZoom();\n                }\n            }\n            \n            function zoomOut() {\n                if (currentZoom > 0.5) {\n                    currentZoom -= 0.1;\n                    applyZoom();\n                }\n            }\n            \n            function resetZoom() {\n                currentZoom = 1;\n                applyZoom();\n            }\n            \n            \/\/ --- EXPORTACI\u00d3N ---\n            function exportToCsv() {\n                const headers = ['Traste', `Desde_Ceja_(${currentUnit})`, `Desde_Puente_(${currentUnit})`, `Entre_Trastes_(${currentUnit})`];\n                let csvContent = \"data:text\/csv;charset=utf-8,\" + headers.join(',') + '\\n';\n                \n                const dataToExport = getConvertedData(currentUnit);\n\n                dataToExport.forEach(row => {\n                    const rowArray = [row.fret, row.fromNut.toFixed(4), row.fromBridge.toFixed(4), row.betweenFrets.toFixed(4)];\n                    csvContent += rowArray.join(',') + '\\n';\n                });\n\n                const encodedUri = encodeURI(csvContent);\n                const link = document.createElement('a');\n                link.setAttribute('href', encodedUri);\n                link.setAttribute('download', 'posiciones_trastes.csv');\n                document.body.appendChild(link);\n                link.click();\n                document.body.removeChild(link);\n            }\n\n            function exportToImage() {\n                \/\/ Crear un SVG temporal con mayor resoluci\u00f3n\n                const tempSvg = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"svg\");\n                tempSvg.setAttribute(\"width\", \"2000\");\n                tempSvg.setAttribute(\"height\", \"480\");\n                tempSvg.setAttribute(\"viewBox\", \"0 0 1000 240\");\n                \n                \/\/ Clonar el contenido del SVG original\n                const content = fretboardSvg.innerHTML;\n                tempSvg.innerHTML = content;\n                \n                \/\/ Asegurar que los estilos se apliquen correctamente\n                const style = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"style\");\n                style.textContent = `\n                    .fret-number { fill: #4f46e5; font-weight: 600; font-size: 12px; }\n                    .fret-distance { fill: #dc2626; font-weight: 500; font-size: 10px; }\n                    .fret-line { stroke: #4b5563; stroke-width: 2; }\n                    .string-line { stroke: #6b7280; stroke-width: 1.5; }\n                    .length-label { fill: #059669; font-weight: 600; font-size: 12px; }\n                    .ruler-mark { stroke: #9ca3af; stroke-width: 1; }\n                    .ruler-text { fill: #6b7280; font-size: 9px; font-weight: 500; }\n                    .nut { fill: #f3f4f6; stroke: #374151; stroke-width: 2; }\n                    .bridge { fill: #78350f; stroke: #451a03; stroke-width: 1; }\n                `;\n                tempSvg.prepend(style);\n                \n                \/\/ Serializar el SVG\n                const serializer = new XMLSerializer();\n                const svgStr = serializer.serializeToString(tempSvg);\n                \n                \/\/ Crear una imagen a partir del SVG\n                const img = new Image();\n                const blob = new Blob([svgStr], {type: 'image\/svg+xml;charset=utf-8'});\n                const url = URL.createObjectURL(blob);\n                \n                img.onload = function() {\n                    \/\/ Crear un canvas de alta resoluci\u00f3n\n                    const canvas = document.createElement('canvas');\n                    canvas.width = 2000;\n                    canvas.height = 480;\n                    const ctx = canvas.getContext('2d');\n                    \n                    \/\/ Dibujar la imagen en el canvas\n                    ctx.drawImage(img, 0, 0, 2000, 480);\n                    \n                    \/\/ Crear el enlace de descarga\n                    const link = document.createElement('a');\n                    link.download = 'diagrama_escala.png';\n                    link.href = canvas.toDataURL('image\/png');\n                    link.click();\n                    \n                    \/\/ Mostrar notificaci\u00f3n\n                    showExportNotification();\n                    \n                    \/\/ Liberar recursos\n                    URL.revokeObjectURL(url);\n                };\n                \n                img.src = url;\n            }\n            \n            function showExportNotification() {\n                exportNotification.classList.add('show');\n                setTimeout(() => {\n                    exportNotification.classList.remove('show');\n                }, 3000);\n            }\n            \n            \/\/ --- MANEJADOR PRINCIPAL ---\n            function handleCalculate() {\n                const scale = parseFloat(scaleLengthInput.value);\n                const numFrets = parseInt(numFretsInput.value, 10);\n                currentUnit = unitsSelect.value;\n                \n                let hasError = false;\n                [scaleLengthInput, numFretsInput].forEach(input => {\n                    input.classList.remove('ring-2', 'ring-red-500');\n                    const val = parseFloat(input.value);\n                    if (isNaN(val) || val <= 0) {\n                        input.classList.add('ring-2', 'ring-red-500');\n                        hasError = true;\n                        setTimeout(() => {\n                           input.classList.remove('ring-2', 'ring-red-500');\n                        }, 2500);\n                    }\n                });\n\n                if (hasError) return;\n                \n                fretData = getConvertedData(currentUnit);\n                \n                renderTable(fretData, currentUnit);\n                renderDiagram(fretData, scale, currentUnit);\n                updateScaleInfo(fretData, scale, currentUnit);\n                \n                resultsArea.classList.remove('hidden');\n                emptyState.classList.add('hidden');\n            }\n            \n            \/\/ --- EVENT LISTENERS ---\n            calculateBtn.addEventListener('click', handleCalculate);\n            unitsSelect.addEventListener('change', () => {\n                if (fretData.length > 0) {\n                    handleCalculate();\n                }\n            });\n            exportCsvBtn.addEventListener('click', exportToCsv);\n            exportImageBtn.addEventListener('click', exportToImage);\n            printBtn.addEventListener('click', () => window.print());\n            toggleDistancesBtn.addEventListener('click', () => {\n                showDistances = !showDistances;\n                handleCalculate();\n                toggleDistancesBtn.innerHTML = showDistances ? \n                    '<i class=\"fas fa-eye-slash mr-2\"><\/i> Ocultar Distancias' : \n                    '<i class=\"fas fa-eye mr-2\"><\/i> Mostrar Distancias';\n            });\n            zoomInBtn.addEventListener('click', zoomIn);\n            zoomOutBtn.addEventListener('click', zoomOut);\n            resetZoomBtn.addEventListener('click', resetZoom);\n\n            \/\/ Carga inicial\n            handleCalculate();\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-text-align-center has-medium-font-size\">\u00daselo con confianza y no desafine en la vida.<\/p>\n\n\n\n<p class=\"has-text-align-center has-medium-font-size\">Por Adolfo Vasquez Vergara \/ ingeniero ac\u00fastico \/ publicista \/ adolfov.v@yahoo.com <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/chilemosaico.cl\/eventos\/charlas-talleres-y-ponencias\/\"><img decoding=\"async\" src=\"https:\/\/chilemosaico.cl\/eventos\/wp-content\/uploads\/2025\/06\/charlas-talleres-y-ponencias.jpg\" alt=\"\" class=\"wp-image-12373\" style=\"width:298px;height:auto\"\/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium is-resized\"><a href=\"https:\/\/chilemosaico.cl\/eventos\/proyectos\/\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Otros-proyectos-avv-300x300.jpg\" alt=\"\" class=\"wp-image-620\" style=\"width:300px;height:auto\" srcset=\"https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Otros-proyectos-avv-300x300.jpg 300w, https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Otros-proyectos-avv-150x150.jpg 150w, https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Otros-proyectos-avv-768x768.jpg 768w, https:\/\/chilemosaico.cl\/acusgrafia\/wp-content\/uploads\/2025\/09\/Otros-proyectos-avv.jpg 800w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption class=\"wp-element-caption\">Otros proyectos realizados<\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Calculadora para trastes de charangos y guitarras Esta herramienta calcula las posiciones de los trastes para instrumentos de cuerda seg\u00fan el sistema de temperamento igual. Este sistema divide la octava en 12 semitonos iguales, siendo el est\u00e1ndar en la m\u00fasica occidental moderna. Es ideal para luthiers, fabricantes de instrumentos y entusiastas de la m\u00fasica que&#8230;<\/p>\n","protected":false},"author":1,"featured_media":499,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-494","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/pages\/494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":66,"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/pages\/494\/revisions"}],"predecessor-version":[{"id":870,"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/pages\/494\/revisions\/870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/media\/499"}],"wp:attachment":[{"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/media?parent=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}