{"id":16449,"date":"2025-11-04T18:06:14","date_gmt":"2025-11-05T00:06:14","guid":{"rendered":"https:\/\/urbanista.mx\/?page_id=16449"},"modified":"2025-11-04T18:23:07","modified_gmt":"2025-11-05T00:23:07","slug":"cada-llegada-nueva-le-cuesta-horas-a-rh","status":"publish","type":"page","link":"https:\/\/urbanista.mx\/en\/cada-llegada-nueva-le-cuesta-horas-a-rh\/","title":{"rendered":"Cada llegada nueva le cuesta horas a RH"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"16449\" class=\"elementor elementor-16449\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd8b062 e-flex e-con-boxed e-con e-parent\" data-id=\"fd8b062\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e23e3b elementor-widget elementor-widget-html\" data-id=\"1e23e3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Cada llegada nueva le cuesta horas a RH<\/title>\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            background: white;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        .pdf-container {\r\n            width: 100vw;\r\n            min-height: 100vh;\r\n            background: white;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            padding: 20px;\r\n        }\r\n\r\n        .page-container {\r\n            margin-bottom: 20px;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n            width: 920px;\r\n            max-width: 100%;\r\n            display: flex;\r\n            justify-content: center;\r\n            position: relative; \/* Importante para posicionar la capa de texto *\/\r\n        }\r\n\r\n        .pdf-canvas {\r\n            width: 100%;\r\n            height: auto;\r\n            background: white;\r\n            display: block;\r\n        }\r\n\r\n        \/* Estilos para la capa de texto *\/\r\n        .textLayer {\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            overflow: hidden;\r\n            opacity: 0.2;\r\n            line-height: 1.0;\r\n        }\r\n\r\n        .textLayer > span {\r\n            color: transparent;\r\n            position: absolute;\r\n            white-space: pre;\r\n            cursor: text;\r\n            transform-origin: 0% 0%;\r\n        }\r\n\r\n        .textLayer .highlight {\r\n            margin: -1px;\r\n            padding: 1px;\r\n            background-color: rgba(180, 0, 255, 0.2);\r\n            border-radius: 4px;\r\n        }\r\n\r\n        .textLayer .highlight.begin {\r\n            border-radius: 4px 0px 0px 4px;\r\n        }\r\n\r\n        .textLayer .highlight.end {\r\n            border-radius: 0px 4px 4px 0px;\r\n        }\r\n\r\n        .textLayer .highlight.middle {\r\n            border-radius: 0px;\r\n        }\r\n\r\n        .textLayer .highlight.selected {\r\n            background-color: rgba(0, 100, 255, 0.2);\r\n        }\r\n\r\n        .floating-controls {\r\n            position: fixed;\r\n            bottom: 5%;\r\n            right: 3%;\r\n            z-index: 9999;\r\n            opacity: 0.9;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .floating-controls:hover {\r\n            opacity: 1;\r\n            transform: translateY(-3px);\r\n        }\r\n\r\n        .btn {\r\n            background: rgba(33, 150, 243, 0.9);\r\n            border: none;\r\n            color: white;\r\n            padding: 15px;\r\n            border-radius: 50%;\r\n            cursor: pointer;\r\n            font-size: 20px;\r\n            width: 60px;\r\n            height: 60px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: all 0.3s ease;\r\n            backdrop-filter: blur(10px);\r\n            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\r\n        }\r\n\r\n        .btn:hover {\r\n            background: rgba(33, 150, 243, 1);\r\n            transform: scale(1.1);\r\n            box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);\r\n        }\r\n\r\n        .loading {\r\n            position: fixed;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            text-align: center;\r\n            color: #666;\r\n            font-size: 16px;\r\n            z-index: 999;\r\n        }\r\n\r\n        .spinner {\r\n            border: 3px solid #f3f3f3;\r\n            border-top: 3px solid #2196F3;\r\n            border-radius: 50%;\r\n            width: 40px;\r\n            height: 40px;\r\n            animation: spin 1s linear infinite;\r\n            margin: 0 auto 20px;\r\n        }\r\n\r\n        @keyframes spin {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        .page-info {\r\n            position: fixed;\r\n            bottom: 20px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            background: rgba(0, 0, 0, 0.7);\r\n            color: white;\r\n            padding: 8px 16px;\r\n            border-radius: 20px;\r\n            font-size: 14px;\r\n            opacity: 0.7;\r\n            backdrop-filter: blur(10px);\r\n            display: none !important;\r\n        }\r\n\r\n        \/* Responsive Design *\/\r\n        @media (max-width: 1024px) and (min-width: 768px) {\r\n            .pdf-container {\r\n                padding: 15px;\r\n            }\r\n            \r\n            .page-container {\r\n                width: 90%;\r\n                max-width: 90%;\r\n            }\r\n            \r\n            .btn {\r\n                width: 55px;\r\n                height: 55px;\r\n                font-size: 18px;\r\n            }\r\n            \r\n            .page-info {\r\n                font-size: 13px;\r\n                padding: 6px 12px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 767px) {\r\n            .pdf-container {\r\n                padding: 10px;\r\n            }\r\n            \r\n            .page-container {\r\n                width: 90%;\r\n                max-width: 90%;\r\n                margin-bottom: 15px;\r\n            }\r\n            \r\n            .floating-controls {\r\n                bottom: 8%;\r\n                right: 5%;\r\n            }\r\n            \r\n            .btn {\r\n                width: 50px;\r\n                height: 50px;\r\n                font-size: 16px;\r\n                padding: 12px;\r\n            }\r\n            \r\n            .btn:hover {\r\n                transform: none;\r\n            }\r\n            \r\n            .loading {\r\n                font-size: 14px;\r\n                padding: 0 20px;\r\n            }\r\n            \r\n            .spinner {\r\n                width: 35px;\r\n                height: 35px;\r\n                margin-bottom: 15px;\r\n            }\r\n            \r\n            .page-info {\r\n                font-size: 12px;\r\n                padding: 6px 12px;\r\n                bottom: 15px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .pdf-container {\r\n                padding: 8px;\r\n            }\r\n            \r\n            .page-container {\r\n                width: 95%;\r\n                margin-bottom: 12px;\r\n            }\r\n            \r\n            .floating-controls {\r\n                bottom: 10%;\r\n                right: 8%;\r\n            }\r\n            \r\n            .btn {\r\n                width: 45px;\r\n                height: 45px;\r\n                font-size: 14px;\r\n                padding: 10px;\r\n            }\r\n            \r\n            .page-info {\r\n                font-size: 11px;\r\n                padding: 5px 10px;\r\n                bottom: 12px;\r\n            }\r\n        }\r\n\r\n        @media (max-height: 500px) and (orientation: landscape) {\r\n            .floating-controls {\r\n                bottom: 15px;\r\n            }\r\n            \r\n            .page-info {\r\n                bottom: 10px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <center><div class=\"hs-cta-embed hs-cta-simple-placeholder hs-cta-embed-199077301297\"\r\n  style=\"max-width:100%; max-height:100%; width:182px;height:50.38728713989258px\" data-hubspot-wrapper-cta-id=\"199077301297\">\r\n  <a href=\"https:\/\/cta-service-cms2.hubspot.com\/web-interactives\/public\/v1\/track\/redirect?encryptedPayload=AVxigLLO4tni%2FuMAlNzssk6qBfriPa5%2BFSHbqQChZC82sRC%2FZv43hNTjIPzymn5QvzTbyqyHPomytbKz2H91vl9q%2FxTTXRlkCJlW2mk%2FAFZwBZBsRUwOjbks0PVkyB4%2BH3bMgHJK1%2F%2FDqwMXDRvyBGEyuhSOYl4aMV9zHJoHVt4kQL0C5GXGypdlnesak4TNKL6r&amp;webInteractiveContentId=199077301297&amp;portalId=47830887\" target=\"_blank\" rel=\"noopener\" crossorigin=\"anonymous\">\r\n    <img decoding=\"async\" alt=\"Descargar\" loading=\"lazy\" src=\"https:\/\/no-cache.hubspot.com\/cta\/default\/47830887\/interactive-199077301297.png\" style=\"height: 100%; width: 100%; object-fit: fill\"\r\n      onerror=\"this.style.display='none'\" \/>\r\n  <\/a>\r\n<\/div><\/center><br><br>\r\n\r\n    <div class=\"loading\" id=\"loading\">\r\n        <div class=\"spinner\"><\/div>\r\n        Cargando PDF...\r\n    <\/div>\r\n\r\n    <div class=\"pdf-container\" id=\"pdfContainer\" style=\"display: none;\">\r\n    <\/div>\r\n\r\n    <div class=\"page-info\" id=\"pageInfo\" style=\"display: none;\">\r\n        \r\n    <\/div>\r\n<br>\r\n    <center><div class=\"hs-cta-embed hs-cta-simple-placeholder hs-cta-embed-199077301297\"\r\n  style=\"max-width:100%; max-height:100%; width:182px;height:50.38728713989258px\" data-hubspot-wrapper-cta-id=\"199077301297\">\r\n  <a href=\"https:\/\/cta-service-cms2.hubspot.com\/web-interactives\/public\/v1\/track\/redirect?encryptedPayload=AVxigLLO4tni%2FuMAlNzssk6qBfriPa5%2BFSHbqQChZC82sRC%2FZv43hNTjIPzymn5QvzTbyqyHPomytbKz2H91vl9q%2FxTTXRlkCJlW2mk%2FAFZwBZBsRUwOjbks0PVkyB4%2BH3bMgHJK1%2F%2FDqwMXDRvyBGEyuhSOYl4aMV9zHJoHVt4kQL0C5GXGypdlnesak4TNKL6r&amp;webInteractiveContentId=199077301297&amp;portalId=47830887\" target=\"_blank\" rel=\"noopener\" crossorigin=\"anonymous\">\r\n    <img decoding=\"async\" alt=\"Descargar\" loading=\"lazy\" src=\"https:\/\/no-cache.hubspot.com\/cta\/default\/47830887\/interactive-199077301297.png\" style=\"height: 100%; width: 100%; object-fit: fill\"\r\n      onerror=\"this.style.display='none'\" \/>\r\n  <\/a>\r\n<\/div><\/center>\r\n    <div class=\"floating-controls\">\r\n        <button class=\"btn\" onclick=\"downloadPDF()\" title=\"Descargar PDF\">\r\n            \u2b07\r\n        <\/button>\r\n    <\/div>\r\n\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.min.js\"><\/script>\r\n    <script>\r\n        const pdfUrl = 'https:\/\/urbanista.mx\/wp-content\/uploads\/2025\/11\/Urbanista_Guia_Awareness_1-1.pdf';\r\n        let pdfDoc = null;\r\n        let totalPages = 0;\r\n\r\n        \/\/ Configurar PDF.js\r\n        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js';\r\n\r\n        function getOptimalScale() {\r\n            const screenWidth = window.innerWidth;\r\n            \r\n            if (screenWidth <= 480) {\r\n                return 1.2;\r\n            } else if (screenWidth <= 767) {\r\n                return 1.3;\r\n            } else if (screenWidth <= 1024) {\r\n                return 1.4;\r\n            } else {\r\n                return 1.5;\r\n            }\r\n        }\r\n\r\n        async function loadPDF() {\r\n            try {\r\n                const loadingTask = pdfjsLib.getDocument(pdfUrl);\r\n                pdfDoc = await loadingTask.promise;\r\n                totalPages = pdfDoc.numPages;\r\n\r\n                document.getElementById('loading').style.display = 'none';\r\n                document.getElementById('pdfContainer').style.display = 'flex';\r\n                document.getElementById('pageInfo').style.display = 'block';\r\n\r\n                document.getElementById('pageInfo').textContent = `P\u00e1gina 1 de ${totalPages}`;\r\n\r\n                for (let pageNum = 1; pageNum <= totalPages; pageNum++) {\r\n                    await renderPage(pageNum);\r\n                }\r\n\r\n            } catch (error) {\r\n                console.error('Error cargando PDF:', error);\r\n                document.getElementById('loading').innerHTML = '\u274c Error al cargar el PDF<br><small>Intenta descargar el archivo<\/small>';\r\n            }\r\n        }\r\n\r\n        async function renderPage(pageNum) {\r\n            try {\r\n                const page = await pdfDoc.getPage(pageNum);\r\n                const scale = getOptimalScale();\r\n                const viewport = page.getViewport({ scale: scale });\r\n\r\n                \/\/ Crear canvas\r\n                const canvas = document.createElement('canvas');\r\n                const context = canvas.getContext('2d');\r\n                canvas.height = viewport.height;\r\n                canvas.width = viewport.width;\r\n                canvas.className = 'pdf-canvas';\r\n\r\n                \/\/ Crear contenedor para la p\u00e1gina\r\n                const pageContainer = document.createElement('div');\r\n                pageContainer.className = 'page-container';\r\n                pageContainer.appendChild(canvas);\r\n\r\n                \/\/ Crear capa de texto\r\n                const textLayerDiv = document.createElement('div');\r\n                textLayerDiv.className = 'textLayer';\r\n                textLayerDiv.style.width = canvas.width + 'px';\r\n                textLayerDiv.style.height = canvas.height + 'px';\r\n                pageContainer.appendChild(textLayerDiv);\r\n\r\n                \/\/ Agregar al contenedor principal\r\n                document.getElementById('pdfContainer').appendChild(pageContainer);\r\n\r\n                \/\/ Renderizar la p\u00e1gina (canvas)\r\n                const renderContext = {\r\n                    canvasContext: context,\r\n                    viewport: viewport\r\n                };\r\n\r\n                await page.render(renderContext).promise;\r\n\r\n                \/\/ Renderizar la capa de texto\r\n                try {\r\n                    const textContent = await page.getTextContent();\r\n                    const textLayer = pdfjsLib.renderTextLayer({\r\n                        textContent: textContent,\r\n                        container: textLayerDiv,\r\n                        viewport: viewport,\r\n                        textDivs: []\r\n                    });\r\n                    await textLayer.promise;\r\n                } catch (textError) {\r\n                    console.warn('Error renderizando texto de p\u00e1gina', pageNum, ':', textError);\r\n                }\r\n\r\n                \/\/ Observador para actualizar el n\u00famero de p\u00e1gina visible\r\n                const observer = new IntersectionObserver((entries) => {\r\n                    entries.forEach(entry => {\r\n                        if (entry.isIntersecting) {\r\n                            const pageIndex = Array.from(document.querySelectorAll('.page-container')).indexOf(entry.target);\r\n                            document.getElementById('pageInfo').textContent = `P\u00e1gina ${pageIndex + 1} de ${totalPages}`;\r\n                        }\r\n                    });\r\n                }, { threshold: 0.5 });\r\n\r\n                observer.observe(pageContainer);\r\n\r\n            } catch (error) {\r\n                console.error('Error renderizando p\u00e1gina:', pageNum, error);\r\n            }\r\n        }\r\n\r\n        function downloadPDF() {\r\n            const link = document.createElement('a');\r\n            link.href = pdfUrl;\r\n            link.download = 'https:\/\/urbanista.mx\/cada-llegada-nueva-le-cuesta-horas-a-rh\/';\r\n            link.target = '_blank';\r\n            document.body.appendChild(link);\r\n            link.click();\r\n            document.body.removeChild(link);\r\n        }\r\n\r\n        \/\/ Re-renderizar cuando cambie la orientaci\u00f3n\r\n        window.addEventListener('orientationchange', () => {\r\n            setTimeout(() => {\r\n                location.reload();\r\n            }, 100);\r\n        });\r\n\r\n        \/\/ Cargar el PDF al iniciar\r\n        loadPDF();\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Cada llegada nueva le cuesta horas a RH Cargando PDF&#8230; \u2b07<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-16449","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/16449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/comments?post=16449"}],"version-history":[{"count":0,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/16449\/revisions"}],"wp:attachment":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/media?parent=16449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}