{"id":2812,"date":"2025-10-07T19:30:04","date_gmt":"2025-10-07T19:30:04","guid":{"rendered":"https:\/\/multicalculador.net\/?page_id=2812"},"modified":"2025-10-07T19:38:58","modified_gmt":"2025-10-07T19:38:58","slug":"longitud","status":"publish","type":"page","link":"https:\/\/multicalculador.net\/?page_id=2812","title":{"rendered":"longitud"},"content":{"rendered":"\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>Convertidor de Longitud<\/title>\n    <style>\n        :root {\n            --color-fondo: #f4f7f9;\n            --color-tarjeta: #ffffff;\n            --color-sombra: rgba(0,0,0,0.1);\n            --color-texto-principal: #2c3e50;\n            --color-texto-secundario: #5a738c;\n            --color-borde: #dcdcdc;\n            --color-input-fondo: #fdfdfd;\n        }\n\n        body.dark-mode {\n            --color-fondo: #2c3e50;\n            --color-tarjeta: #34495e;\n            --color-sombra: rgba(0,0,0,0.2);\n            --color-texto-principal: #ecf0f1;\n            --color-texto-secundario: #bdc3c7;\n            --color-borde: #5a738c;\n            --color-input-fondo: #2c3e50;\n        }\n\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            background-color: var(--color-fondo);\n            color: var(--color-texto-principal);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            margin: 0;\n            transition: background-color 0.3s, color 0.3s;\n        }\n\n        .calculadora-contenedor {\n            background-color: var(--color-tarjeta);\n            padding: 40px;\n            border-radius: 12px;\n            box-shadow: 0 8px 30px var(--color-sombra);\n            width: 90%;\n            max-width: 700px;\n            transition: background-color 0.3s;\n        }\n\n        .header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 20px;\n        }\n\n        h1 { margin: 0; font-size: 28px; }\n        \n        .btn-icono {\n            background: none;\n            border: 1px solid var(--color-borde);\n            border-radius: 50%;\n            width: 40px;\n            height: 40px;\n            cursor: pointer;\n            font-size: 20px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            color: var(--color-texto-secundario);\n            transition: background-color 0.2s, color 0.2s;\n        }\n        .btn-icono:hover {\n            background-color: var(--color-fondo);\n            color: var(--color-texto-principal);\n        }\n\n        .convertidor-flex {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            gap: 15px;\n        }\n\n        .panel {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n        }\n        \n        .controles-centrales {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n\n        .campo-resultado {\n            position: relative;\n        }\n\n        #btn-copiar {\n            position: absolute;\n            right: 5px;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 35px;\n            height: 35px;\n            font-size: 16px;\n            border: none;\n        }\n\n        input[type=\"text\"], input[type=\"number\"], select {\n            width: 100%;\n            padding: 12px;\n            margin-top: 8px;\n            border: 1px solid var(--color-borde);\n            border-radius: 8px;\n            box-sizing: border-box;\n            font-size: 18px;\n            background-color: var(--color-input-fondo);\n            color: var(--color-texto-principal);\n        }\n        select { margin-top: 10px; }\n\n        label { font-weight: 600; color: var(--color-texto-secundario); }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"calculadora-contenedor\">\n        <div class=\"header\">\n            <h1>Convertidor de Longitud<\/h1>\n            <button id=\"btn-tema\" class=\"btn-icono\">\ud83c\udf13<\/button>\n        <\/div>\n        <div class=\"convertidor-flex\">\n            <div class=\"panel\">\n                <label for=\"valor-desde\">Desde:<\/label>\n                <input type=\"number\" id=\"valor-desde\" value=\"1\">\n                <select id=\"unidad-desde\"><\/select>\n            <\/div>\n\n            <div class=\"controles-centrales\">\n                <button id=\"btn-intercambiar\" class=\"btn-icono\">\ud83d\udd04<\/button>\n            <\/div>\n\n            <div class=\"panel\">\n                <label for=\"valor-hasta\">Hasta:<\/label>\n                <div class=\"campo-resultado\">\n                    <input type=\"text\" id=\"valor-hasta\" readonly style=\"font-family: inherit;\">\n                    <button id=\"btn-copiar\" class=\"btn-icono\">\ud83d\udccb<\/button>\n                <\/div>\n                <select id=\"unidad-hasta\"><\/select>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const valorDesdeInput = document.getElementById('valor-desde');\n        const unidadDesdeSelect = document.getElementById('unidad-desde');\n        const valorHastaInput = document.getElementById('valor-hasta');\n        const unidadHastaSelect = document.getElementById('unidad-hasta');\n        const btnTema = document.getElementById('btn-tema');\n        const btnIntercambiar = document.getElementById('btn-intercambiar');\n        const btnCopiar = document.getElementById('btn-copiar');\n\n        const factores = {\n            'meter': { factor: 1, nombre: 'Metro' },\n            'kilometer': { factor: 1000, nombre: 'Kil\u00f3metro' },\n            'centimeter': { factor: 0.01, nombre: 'Cent\u00edmetro' },\n            'millimeter': { factor: 0.001, nombre: 'Mil\u00edmetro' },\n            'micrometer': { factor: 1e-6, nombre: 'Micr\u00f3metro' },\n            'nanometer': { factor: 1e-9, nombre: 'Nan\u00f3metro' },\n            'mile': { factor: 1609.34, nombre: 'Milla' },\n            'yard': { factor: 0.9144, nombre: 'Yarda' },\n            'foot': { factor: 0.3048, nombre: 'Pie' },\n            'inch': { factor: 0.0254, nombre: 'Pulgada' },\n            'light_year': { factor: 9.461e+15, nombre: 'A\u00f1o Luz' }\n        };\n\n        function popularUnidades() {\n            unidadDesdeSelect.innerHTML = '';\n            unidadHastaSelect.innerHTML = '';\n\n            for (const key in factores) {\n                const optionDesde = new Option(factores[key].nombre, key);\n                const optionHasta = new Option(factores[key].nombre, key);\n                unidadDesdeSelect.add(optionDesde);\n                unidadHastaSelect.add(optionHasta);\n            }\n            \n            unidadDesdeSelect.value = 'meter';\n            unidadHastaSelect.value = 'foot';\n            \n            convertir();\n        }\n\n        function convertir() {\n            const valorDesde = parseFloat(valorDesdeInput.value);\n            const unidadDesde = unidadDesdeSelect.value;\n            const unidadHasta = unidadHastaSelect.value;\n\n            if (isNaN(valorDesde)) {\n                valorHastaInput.value = '';\n                return;\n            }\n\n            const valorEnBase = valorDesde * factores[unidadDesde].factor;\n            const valorConvertido = valorEnBase \/ factores[unidadHasta].factor;\n            \n            if (valorConvertido > 0 && (valorConvertido < 0.0001 || valorConvertido > 1e15)) {\n                valorHastaInput.value = valorConvertido.toExponential(4);\n            } else {\n                valorHastaInput.value = parseFloat(valorConvertido.toFixed(6));\n            }\n        }\n        \n        btnTema.addEventListener('click', () => {\n            document.body.classList.toggle('dark-mode');\n        });\n\n        btnIntercambiar.addEventListener('click', () => {\n            const tempUnidad = unidadDesdeSelect.value;\n            unidadDesdeSelect.value = unidadHastaSelect.value;\n            unidadHastaSelect.value = tempUnidad;\n            convertir();\n        });\n\n        btnCopiar.addEventListener('click', () => {\n            navigator.clipboard.writeText(valorHastaInput.value).then(() => {\n                btnCopiar.textContent = '\u2705';\n                setTimeout(() => { btnCopiar.textContent = '\ud83d\udccb'; }, 1500);\n            });\n        });\n\n        valorDesdeInput.addEventListener('input', convertir);\n        unidadDesdeSelect.addEventListener('change', convertir);\n        unidadHastaSelect.addEventListener('change', convertir);\n\n        popularUnidades();\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Convertidor de Longitud Convertidor de Longitud \ud83c\udf13 Desde: \ud83d\udd04 Hasta: \ud83d\udccb<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-2812","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"fernando.facundo.gomez@gmail.com","author_link":"https:\/\/multicalculador.net\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Convertidor de Longitud Convertidor de Longitud \ud83c\udf13 Desde: \ud83d\udd04 Hasta: \ud83d\udccb","_links":{"self":[{"href":"https:\/\/multicalculador.net\/index.php?rest_route=\/wp\/v2\/pages\/2812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multicalculador.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/multicalculador.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/multicalculador.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/multicalculador.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2812"}],"version-history":[{"count":4,"href":"https:\/\/multicalculador.net\/index.php?rest_route=\/wp\/v2\/pages\/2812\/revisions"}],"predecessor-version":[{"id":2832,"href":"https:\/\/multicalculador.net\/index.php?rest_route=\/wp\/v2\/pages\/2812\/revisions\/2832"}],"wp:attachment":[{"href":"https:\/\/multicalculador.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}