<style id="elementor-post-51596">.elementor-51596 .elementor-element.elementor-element-b2bee7c{--display:flex;}.elementor-51596 .elementor-element.elementor-element-0585c9b{width:var( --container-widget-width, 75% );max-width:75%;--container-widget-width:75%;--container-widget-flex-grow:0;}.elementor-51596 .elementor-element.elementor-element-0585c9b.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}</style>{"id":51596,"date":"2025-08-05T20:26:48","date_gmt":"2025-08-05T18:26:48","guid":{"rendered":"https:\/\/entretramites.com\/en\/?page_id=51596"},"modified":"2025-08-06T00:03:25","modified_gmt":"2025-08-05T22:03:25","slug":"search-engine-entre-tramites","status":"publish","type":"page","link":"https:\/\/entretramites.com\/en\/search-engine-entre-tramites","title":{"rendered":"Search engine &#8211; Entre Tr\u00e1mites"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"51596\" class=\"elementor elementor-51596\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b2bee7c e-flex e-con-boxed e-con e-parent\" data-id=\"b2bee7c\" 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-0585c9b elementor-widget__width-initial elementor-widget elementor-widget-shortcode\" data-id=\"0585c9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\n\/* ==========================================================================\n   TYPESENSE SEARCH ENGINE - STYLES (ENGLISH)\n   ========================================================================== *\/\n\n\/* Layout & Main Container *\/\n.ts-wrapper {\n    display: flex !important;\n    gap: 28px !important;\n    margin: 30px 0 !important;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important;\n    align-items: flex-start !important;\n    color: #2c3e50 !important;\n    position: relative !important;\n}\n\n\/* Sidebar (Sticky Filters) *\/\n.ts-sidebar {\n    width: 28% !important;\n    padding: 24px !important;\n    border: 1px solid #eef2f6 !important;\n    border-radius: 16px !important;\n    background: #ffffff !important;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.01) !important;\n    position: -webkit-sticky !important;\n    position: sticky !important;\n    top: 110px !important;\n    z-index: 10 !important;\n    box-sizing: border-box !important;\n}\n\n.ts-sidebar-header {\n    display: flex !important;\n    justify-content: space-between !important;\n    align-items: center !important;\n    margin-bottom: 20px !important;\n    padding-bottom: 12px !important;\n    border-bottom: 1px solid #f1f5f9 !important;\n}\n\n.ts-sidebar-main-title {\n    font-size: 13px !important;\n    font-weight: 700 !important;\n    text-transform: uppercase !important;\n    color: #0f172a !important;\n    letter-spacing: 0.8px !important;\n    margin: 0 !important;\n}\n\n.ts-clear-filters-btn {\n    font-size: 12px !important;\n    color: #0d6efd !important;\n    background: none !important;\n    border: none !important;\n    cursor: pointer !important;\n    padding: 0 !important;\n    font-weight: 600 !important;\n    display: none;\n    transition: color 0.2s ease !important;\n    box-shadow: none !important;\n    text-decoration: none !important;\n}\n\n.ts-clear-filters-btn:hover {\n    color: #0b5ed7 !important;\n    text-decoration: underline !important;\n    background: none !important;\n}\n\n.ts-filter-group {\n    margin-bottom: 18px !important;\n}\n\n.ts-filter-label {\n    display: block !important;\n    font-size: 13px !important;\n    font-weight: 600 !important;\n    color: #475569 !important;\n    margin-bottom: 8px !important;\n    text-transform: none !important;\n}\n\n.ts-filter {\n    width: 100% !important;\n    padding: 10px 14px !important;\n    border: 1px solid #cbd5e1 !important;\n    border-radius: 10px !important;\n    font-size: 14px !important;\n    color: #1e293b !important;\n    outline: none !important;\n    background-color: #ffffff !important;\n    transition: all 0.2s ease !important;\n    box-sizing: border-box !important;\n    cursor: pointer !important;\n    height: auto !important;\n}\n\n.ts-filter:focus,\n.ts-filter:hover:not(:disabled) {\n    border-color: #0d6efd !important;\n    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1) !important;\n}\n\n.ts-filter:disabled {\n    background-color: #f8fafc !important;\n    color: #94a3b8 !important;\n    cursor: wait !important;\n}\n\n.ts-filter.active-filter {\n    border-color: #0d6efd !important;\n    background-color: #f0f6ff !important;\n    font-weight: 600 !important;\n}\n\n\/* Results Section *\/\n.ts-results {\n    width: 72% !important;\n    position: relative !important;\n}\n\n\/* Sticky Search Bar *\/\n.ts-search-container {\n    display: flex !important;\n    gap: 12px !important;\n    position: -webkit-sticky !important;\n    position: sticky !important;\n    top: 110px !important;\n    z-index: 9 !important;\n    background: #ffffff !important;\n    padding: 10px 0 !important;\n    margin-bottom: 12px !important;\n}\n\n.ts-search-input-wrap {\n    position: relative !important;\n    flex-grow: 1 !important;\n}\n\n.ts-search-icon {\n    position: absolute !important;\n    left: 16px !important;\n    top: 50% !important;\n    transform: translateY(-50%) !important;\n    color: #94a3b8 !important;\n    width: 20px !important;\n    height: 20px !important;\n    pointer-events: none !important;\n    transition: color 0.2s ease !important;\n}\n\n#ts-search {\n    width: 100% !important;\n    padding: 14px 16px 14px 48px !important;\n    border: 1px solid #cbd5e1 !important;\n    border-radius: 30px !important;\n    font-size: 15px !important;\n    color: #0f172a !important;\n    outline: none !important;\n    box-sizing: border-box !important;\n    background: #ffffff !important;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;\n    transition: all 0.2s ease !important;\n    height: auto !important;\n}\n\n#ts-search:focus {\n    border-color: #0d6efd !important;\n    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15) !important;\n}\n\n.ts-btn-search {\n    padding: 0 28px !important;\n    background-color: #0d6efd !important;\n    color: #ffffff !important;\n    border: none !important;\n    border-radius: 30px !important;\n    font-size: 15px !important;\n    font-weight: 600 !important;\n    cursor: pointer !important;\n    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25) !important;\n    transition: all 0.2s ease !important;\n    height: auto !important;\n    line-height: normal !important;\n}\n\n.ts-btn-search:hover {\n    background-color: #0b5ed7 !important;\n    transform: translateY(-1px) !important;\n    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.35) !important;\n}\n\n.ts-results-info {\n    font-size: 13px !important;\n    color: #64748b !important;\n    margin-bottom: 16px !important;\n    font-weight: 500 !important;\n    min-height: 20px !important;\n}\n\n\/* Result Cards *\/\n.ts-card {\n    border: 1px solid #f1f5f9 !important;\n    border-radius: 14px !important;\n    padding: 22px !important;\n    margin-bottom: 16px !important;\n    background: #ffffff !important;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;\n    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;\n}\n\n.ts-card:hover {\n    transform: translateY(-2px) !important;\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06) !important;\n    border-color: #e2e8f0 !important;\n}\n\n.ts-card h3 {\n    margin: 0 0 10px 0 !important;\n    font-size: 18px !important;\n    line-height: 1.4 !important;\n}\n\n.ts-card h3 a.ts-link,\n.ts-link {\n    color: #0f172a !important;\n    text-decoration: none !important;\n    font-weight: 700 !important;\n    transition: color 0.2s ease !important;\n}\n\n.ts-card h3 a.ts-link:hover,\n.ts-link:hover {\n    color: #0d6efd !important;\n}\n\n.ts-card p {\n    color: #475569 !important;\n    font-size: 14px !important;\n    line-height: 1.6 !important;\n    margin: 0 0 16px 0 !important;\n}\n\n.ts-card mark,\n#lista-hits mark {\n    background-color: #fef08a !important;\n    color: #854d0e !important;\n    padding: 2px 6px !important;\n    border-radius: 4px !important;\n    font-weight: 600 !important;\n}\n\n.ts-meta {\n    display: flex !important;\n    flex-wrap: wrap !important;\n    gap: 8px !important;\n}\n\n.ts-tag {\n    display: inline-flex !important;\n    align-items: center !important;\n    padding: 4px 12px !important;\n    background: #f8fafc !important;\n    color: #64748b !important;\n    border: 1px solid #e2e8f0 !important;\n    border-radius: 20px !important;\n    font-size: 12px !important;\n    font-weight: 500 !important;\n}\n\n\/* Skeleton Loading *\/\n.ts-skeleton-card {\n    border: 1px solid #f1f5f9 !important;\n    border-radius: 14px !important;\n    padding: 22px !important;\n    margin-bottom: 16px !important;\n    background: #ffffff !important;\n}\n\n.ts-skeleton-line {\n    height: 14px !important;\n    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) !important;\n    background-size: 200% 100% !important;\n    animation: ts-shimmer 1.5s infinite !important;\n    border-radius: 6px !important;\n    margin-bottom: 12px !important;\n}\n\n.ts-skeleton-title { height: 20px !important; width: 60% !important; margin-bottom: 16px !important; }\n.ts-skeleton-p1 { width: 100% !important; }\n.ts-skeleton-p2 { width: 80% !important; }\n\n@keyframes ts-shimmer {\n    0% { background-position: 200% 0; }\n    100% { background-position: -200% 0; }\n}\n\n\/* Empty State *\/\n.ts-empty-state {\n    text-align: center !important;\n    padding: 48px 24px !important;\n    background: #f8fafc !important;\n    border: 1px dashed #cbd5e1 !important;\n    border-radius: 16px !important;\n    color: #64748b !important;\n    margin-top: 10px !important;\n}\n\n.ts-empty-state svg {\n    width: 48px !important;\n    height: 48px !important;\n    color: #94a3b8 !important;\n    margin-bottom: 12px !important;\n}\n\n.ts-empty-state h4 {\n    margin: 0 0 8px 0 !important;\n    color: #1e293b !important;\n    font-size: 16px !important;\n}\n\n.ts-empty-state p {\n    margin: 0 0 16px 0 !important;\n    font-size: 14px !important;\n}\n\n.ts-btn-reset {\n    padding: 8px 18px !important;\n    background: #ffffff !important;\n    border: 1px solid #cbd5e1 !important;\n    border-radius: 20px !important;\n    color: #1e293b !important;\n    font-size: 13px !important;\n    font-weight: 600 !important;\n    cursor: pointer !important;\n    transition: all 0.2s ease !important;\n}\n\n.ts-btn-reset:hover {\n    background: #f1f5f9 !important;\n    border-color: #94a3b8 !important;\n}\n\n\/* Pagination *\/\n#ts-pagination {\n    margin-top: 32px !important;\n    display: flex !important;\n    flex-wrap: wrap !important;\n    gap: 8px !important;\n    align-items: center !important;\n    justify-content: center !important;\n}\n\n.ts-page-btn {\n    border: 1px solid #e2e8f0 !important;\n    border-radius: 50% !important;\n    width: 38px !important;\n    height: 38px !important;\n    background: #ffffff !important;\n    color: #334155 !important;\n    font-size: 14px !important;\n    font-weight: 600 !important;\n    cursor: pointer !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    transition: all 0.2s ease !important;\n    padding: 0 !important;\n}\n\n.ts-page-btn:hover:not(:disabled) {\n    background: #f1f5f9 !important;\n    border-color: #cbd5e1 !important;\n    color: #0d6efd !important;\n}\n\n.ts-page-btn.active {\n    background: #0d6efd !important;\n    color: #ffffff !important;\n    border-color: #0d6efd !important;\n    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3) !important;\n}\n\n.ts-page-btn.ts-nav-btn {\n    border-radius: 20px !important;\n    width: auto !important;\n    padding: 0 18px !important;\n    background-color: #0d6efd !important;\n    color: #ffffff !important;\n    border: none !important;\n    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2) !important;\n}\n\n.ts-page-btn.ts-nav-btn:hover:not(:disabled) {\n    background-color: #0b5ed7 !important;\n    transform: translateY(-1px) !important;\n}\n\n.ts-page-btn:disabled {\n    opacity: 0.4 !important;\n    background: #f8fafc !important;\n    border-color: #f1f5f9 !important;\n    cursor: not-allowed !important;\n    box-shadow: none !important;\n}\n\n\/* BACK TO TOP BUTTON - ADAPTIVE *\/\n.ts-btn-cta-top {\n    position: fixed !important;\n    bottom: 30px !important;\n    z-index: 999 !important;\n    display: inline-flex !important;\n    align-items: center !important;\n    gap: 8px !important;\n    padding: 10px 20px !important;\n    background-color: #0d6efd !important;\n    color: #ffffff !important;\n    border: none !important;\n    border-radius: 30px !important;\n    font-size: 13px !important;\n    font-weight: 700 !important;\n    cursor: pointer !important;\n    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.35) !important;\n    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease !important;\n    opacity: 0 !important;\n    visibility: hidden !important;\n    transform: translateY(15px) !important;\n}\n\n.ts-btn-cta-top.show {\n    opacity: 1 !important;\n    visibility: visible !important;\n    transform: translateY(0) !important;\n}\n\n.ts-btn-cta-top.at-bottom {\n    position: absolute !important;\n    bottom: 10px !important;\n}\n\n.ts-btn-cta-top:hover {\n    background-color: #0b5ed7 !important;\n    transform: translateY(-3px) !important;\n    box-shadow: 0 8px 22px rgba(13, 110, 253, 0.45) !important;\n}\n\n.ts-btn-cta-top.at-bottom:hover {\n    transform: translateY(-3px) !important;\n}\n\n.ts-btn-cta-top svg {\n    width: 16px !important;\n    height: 16px !important;\n    stroke: #ffffff !important;\n    transition: transform 0.2s ease !important;\n}\n\n.ts-btn-cta-top:hover svg {\n    transform: translateY(-2px) !important;\n}\n\n\/* Responsive *\/\n@media (max-width: 868px) {\n    .ts-wrapper {\n        flex-direction: column !important;\n    }\n    .ts-sidebar, .ts-results {\n        width: 100% !important;\n    }\n    .ts-sidebar, .ts-search-container {\n        position: static !important;\n    }\n    .ts-btn-search {\n        padding: 0 20px !important;\n    }\n}\n<\/style>\n\n<div class=\"ts-wrapper\">\n    <aside class=\"ts-sidebar\">\n        <div class=\"ts-sidebar-header\">\n            <h3 class=\"ts-sidebar-main-title\">Filter<\/h3>\n            <button id=\"ts-clear-filters\" class=\"ts-clear-filters-btn\">Clear Filters<\/button>\n        <\/div>\n\n        <div class=\"ts-filter-group\">\n            <label class=\"ts-filter-label\" for=\"categoria-filtro\">Category<\/label>\n            <select id=\"categoria-filtro\" class=\"ts-filter\">\n                <option value=\"\">All Categories<\/option>\n            <\/select>\n        <\/div>\n\n        <div class=\"ts-filter-group\">\n            <label class=\"ts-filter-label\" for=\"keyword-filtro\">Keyword<\/label>\n            <select id=\"keyword-filtro\" class=\"ts-filter\">\n                <option value=\"\">All Keywords<\/option>\n            <\/select>\n        <\/div>\n    <\/aside>\n\n    <main class=\"ts-results\">\n        <div class=\"ts-search-container\">\n            <div class=\"ts-search-input-wrap\">\n                <svg class=\"ts-search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n                    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\n                <\/svg>\n                <input\n                    type=\"text\"\n                    id=\"ts-search\"\n                    placeholder=\"Search services, procedures or articles...\"\n                    autocomplete=\"off\"\n                >\n            <\/div>\n            <button id=\"ts-search-btn\" class=\"ts-btn-search\">Search<\/button>\n        <\/div>\n\n        <div id=\"ts-results-info\" class=\"ts-results-info\"><\/div>\n\n        <div id=\"lista-hits\"><\/div>\n\n        <div id=\"ts-pagination\"><\/div>\n    <\/main>\n\n    <!-- Sentinel marker to stop button before footer -->\n    <div id=\"ts-bottom-sentinel\" style=\"height: 1px; width: 100%; position: absolute; bottom: 0;\"><\/div>\n\n    <!-- Back to Top CTA Button -->\n    <button id=\"ts-back-to-top\" class=\"ts-btn-cta-top\" type=\"button\" title=\"Back to top\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"><\/line>\n            <polyline points=\"5 12 12 5 19 12\"><\/polyline>\n        <\/svg>\n    <\/button>\n<\/div>\n\n<script>\nwindow.addEventListener(\"DOMContentLoaded\", function(){\n\n    const searchBox = document.getElementById(\"ts-search\");\n    const searchBtn = document.getElementById(\"ts-search-btn\");\n    const listaHits = document.getElementById(\"lista-hits\");\n    const resultsInfo = document.getElementById(\"ts-results-info\");\n    const categoriaFiltro = document.getElementById(\"categoria-filtro\");\n    const keywordFiltro = document.getElementById(\"keyword-filtro\");\n    const clearFiltersBtn = document.getElementById(\"ts-clear-filters\");\n    const paginationContainer = document.getElementById(\"ts-pagination\");\n    const backToTopBtn = document.getElementById(\"ts-back-to-top\");\n    const bottomSentinel = document.getElementById(\"ts-bottom-sentinel\");\n    const tsResults = document.querySelector(\".ts-results\");\n\n    let categoriasSet = new Set();\n    let keywordsSet = new Set();\n\n    let paginaActual = 1;\n    let totalPaginas = 1;\n    let porPagina = 20;\n\n    \/\/ Dynamic Alignment Calculation for Back To Top Button\n    if (backToTopBtn && tsResults) {\n        function posicionarBotonExacto() {\n            if (!backToTopBtn.classList.contains(\"at-bottom\")) {\n                const rect = tsResults.getBoundingClientRect();\n                const rightPos = window.innerWidth - rect.right;\n                backToTopBtn.style.right = `${rightPos}px`;\n            } else {\n                backToTopBtn.style.right = \"0px\";\n            }\n        }\n\n        window.addEventListener(\"scroll\", function(){\n            if (window.scrollY > 200 || document.documentElement.scrollTop > 200) {\n                backToTopBtn.classList.add(\"show\");\n                posicionarBotonExacto();\n            } else {\n                backToTopBtn.classList.remove(\"show\");\n            }\n        }, { passive: true });\n\n        window.addEventListener(\"resize\", posicionarBotonExacto);\n\n        if (bottomSentinel && 'IntersectionObserver' in window) {\n            const observer = new IntersectionObserver(entries => {\n                entries.forEach(entry => {\n                    if (entry.isIntersecting) {\n                        backToTopBtn.classList.add(\"at-bottom\");\n                    } else {\n                        backToTopBtn.classList.remove(\"at-bottom\");\n                    }\n                    posicionarBotonExacto();\n                });\n            }, { root: null, threshold: 0 });\n\n            observer.observe(bottomSentinel);\n        }\n\n        backToTopBtn.addEventListener(\"click\", function(){\n            window.scrollTo({ top: 0, behavior: \"smooth\" });\n        });\n    }\n\n    \/\/ Search Events\n    searchBtn.addEventListener(\"click\", function(){\n        paginaActual = 1;\n        buscar();\n    });\n\n    searchBox.addEventListener(\"keypress\", function(e){\n        if(e.key === \"Enter\"){\n            paginaActual = 1;\n            buscar();\n        }\n    });\n\n    categoriaFiltro.addEventListener(\"change\", function(){\n        actualizarEstadoFiltros();\n        paginaActual = 1;\n        buscar();\n    });\n\n    keywordFiltro.addEventListener(\"change\", function(){\n        actualizarEstadoFiltros();\n        paginaActual = 1;\n        buscar();\n    });\n\n    clearFiltersBtn.addEventListener(\"click\", function(){\n        resetearFiltros();\n    });\n\n    function actualizarEstadoFiltros(){\n        if(categoriaFiltro.value !== \"\") {\n            categoriaFiltro.classList.add(\"active-filter\");\n        } else {\n            categoriaFiltro.classList.remove(\"active-filter\");\n        }\n\n        if(keywordFiltro.value !== \"\") {\n            keywordFiltro.classList.add(\"active-filter\");\n        } else {\n            keywordFiltro.classList.remove(\"active-filter\");\n        }\n\n        if(categoriaFiltro.value !== \"\" || keywordFiltro.value !== \"\"){\n            clearFiltersBtn.style.display = \"inline-block\";\n        } else {\n            clearFiltersBtn.style.display = \"none\";\n        }\n    }\n\n    window.resetearFiltros = function(){\n        categoriaFiltro.value = \"\";\n        keywordFiltro.value = \"\";\n        searchBox.value = \"\";\n        actualizarEstadoFiltros();\n        paginaActual = 1;\n        buscar();\n    };\n\n    cargarFiltrosIniciales();\n    buscar();\n\n    async function cargarFiltrosIniciales(){\n        try {\n            categoriaFiltro.disabled = true;\n            keywordFiltro.disabled = true;\n\n            categoriaFiltro.innerHTML = '<option value=\"\">Loading categories...<\/option>';\n            keywordFiltro.innerHTML = '<option value=\"\">Loading keywords...<\/option>';\n\n            let pagina = 1;\n            let perPage = 250;\n            let hayMasPaginas = true;\n\n            while (hayMasPaginas) {\n                const response = await fetch(`https:\/\/entretramites.com\/services-en-search?q=*&page=${pagina}&per_page=${perPage}`);\n                const data = await response.json();\n                let hits = data.hits || [];\n\n                hits.forEach(hit => {\n                    let doc = hit.document;\n\n                    if(doc.category && doc.category.trim() !== \"\") {\n                        categoriasSet.add(doc.category);\n                    }\n\n                    if(doc.keywords && Array.isArray(doc.keywords)){\n                        doc.keywords.forEach(x => {\n                            if(x && x.trim() !== \"\") {\n                                keywordsSet.add(x);\n                            }\n                        });\n                    }\n                });\n\n                let totalDevueltos = (pagina - 1) * perPage + hits.length;\n                if (hits.length === 0 || totalDevueltos >= (data.found || 0)) {\n                    hayMasPaginas = false;\n                } else {\n                    pagina++;\n                }\n            }\n\n            rellenarSelect(categoriaFiltro, categoriasSet, \"All Categories\");\n            rellenarSelect(keywordFiltro, keywordsSet, \"All Keywords\");\n\n            categoriaFiltro.disabled = false;\n            keywordFiltro.disabled = false;\n\n        } catch(e) {\n            console.error(\"Error loading initial filters\", e);\n            categoriaFiltro.innerHTML = '<option value=\"\">All Categories<\/option>';\n            keywordFiltro.innerHTML = '<option value=\"\">All Keywords<\/option>';\n            categoriaFiltro.disabled = false;\n            keywordFiltro.disabled = false;\n        }\n    }\n\n    async function buscar(){\n        let q = searchBox.value.trim();\n        let categoria = categoriaFiltro.value;\n        let keyword = keywordFiltro.value;\n\n        let url = \"https:\/\/entretramites.com\/services-en-search?q=\"\n            + encodeURIComponent(q === \"\" ? \"*\" : q)\n            + \"&page=\" + paginaActual\n            + \"&per_page=\" + porPagina;\n\n        let filterParts = [];\n        if(categoria) {\n            let catEscapada = encodeURIComponent(`\"${categoria}\"`);\n            filterParts.push(`category:=${catEscapada}`);\n        }\n        if(keyword) {\n            let kwEscapada = encodeURIComponent(`\"${keyword}\"`);\n            filterParts.push(`keywords:=${kwEscapada}`);\n        }\n\n        if(filterParts.length > 0) {\n            url += \"&filter_by=\" + filterParts.join(\" && \");\n        }\n\n        try {\n            renderizarSkeletons();\n\n            const response = await fetch(url);\n            const data = await response.json();\n\n            let totalEncontrados = data.found || 0;\n            totalPaginas = Math.ceil(totalEncontrados \/ porPagina) || 1;\n            let hits = data.hits || [];\n\n            if (totalEncontrados > 0) {\n                let inicio = ((paginaActual - 1) * porPagina) + 1;\n                let fin = Math.min(paginaActual * porPagina, totalEncontrados);\n                resultsInfo.innerHTML = `Showing <strong>${inicio}-${fin}<\/strong> of <strong>${totalEncontrados}<\/strong> results`;\n            } else {\n                resultsInfo.innerHTML = '';\n            }\n\n            renderizarResultados(hits);\n            renderizarPaginacion();\n\n        } catch(error){\n            console.error(error);\n            resultsInfo.innerHTML = '';\n            listaHits.innerHTML = `\n                <div class=\"ts-empty-state\">\n                    <h4>Error loading search results<\/h4>\n                    <p>There was a connection issue with the search index.<\/p>\n                    <button class=\"ts-btn-reset\" onclick=\"buscar()\">Retry Search<\/button>\n                <\/div>\n            `;\n        }\n    }\n\n    function renderizarSkeletons(){\n        let skeletonHTML = '';\n        for(let i = 0; i < 4; i++){\n            skeletonHTML += `\n                <div class=\"ts-skeleton-card\">\n                    <div class=\"ts-skeleton-line ts-skeleton-title\"><\/div>\n                    <div class=\"ts-skeleton-line ts-skeleton-p1\"><\/div>\n                    <div class=\"ts-skeleton-line ts-skeleton-p2\"><\/div>\n                <\/div>\n            `;\n        }\n        listaHits.innerHTML = skeletonHTML;\n    }\n\n    function rellenarSelect(select, valores, labelDefecto){\n        let actual = select.value;\n        select.innerHTML = `<option value=\"\">${labelDefecto}<\/option>`;\n\n        [...valores].sort().forEach(valor => {\n            select.innerHTML += `<option value=\"${valor}\">${valor}<\/option>`;\n        });\n\n        select.value = actual;\n    }\n\n    function renderizarResultados(hits){\n        if(hits.length === 0){\n            listaHits.innerHTML = `\n                <div class=\"ts-empty-state\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n                        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\n                        <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"><\/line>\n                    <\/svg>\n                    <h4>No matching results found<\/h4>\n                    <p>Try adjusting your search terms or clearing active filters.<\/p>\n                    <button class=\"ts-btn-reset\" onclick=\"resetearFiltros()\">Clear Search & Filters<\/button>\n                <\/div>\n            `;\n            return;\n        }\n\n        let html = \"\";\n        let terminoBusqueda = searchBox.value.trim();\n\n        hits.forEach(hit => {\n            let doc = hit.document;\n            let titulo = doc.title || 'Untitled';\n\n            let descripcion = doc.description || \"\";\n            descripcion = descripcion.replace(\/\\[[^[\\]]*(?:[^[\\]]*)\\]\/g, \"\");\n            descripcion = descripcion.replace(\/(<([^>]+)>)\/gi, '');\n            descripcion = descripcion.replace(\/\\s+\/g, ' ').trim();\n\n            if(descripcion.length > 260){\n                descripcion = descripcion.substring(0, 260) + \"...\";\n            }\n\n            if (terminoBusqueda.length > 1 && terminoBusqueda !== \"*\") {\n                let palabras = terminoBusqueda.split(\/\\s+\/).filter(p => p.length > 1);\n\n                palabras.forEach(palabra => {\n                    let palabraEscapada = palabra.replace(\/[-\\\/\\\\^$*+?.()|[\\]{}]\/g, '\\\\$&');\n                    let regex = new RegExp(`(${palabraEscapada})`, 'gi');\n\n                    titulo = titulo.replace(regex, '<mark>$1<\/mark>');\n                    descripcion = descripcion.replace(regex, '<mark>$1<\/mark>');\n                });\n            }\n\n            html += `\n            <article class=\"ts-card\">\n                <h3>\n                    <a href=\"${doc.url || '#'}\" class=\"ts-link\" target=\"_blank\">\n                        ${titulo}\n                    <\/a>\n                <\/h3>\n\n                <p>${descripcion}<\/p>\n\n                <div class=\"ts-meta\">\n                    ${doc.category ? `<span class=\"ts-tag\">${doc.category}<\/span>` : ''}\n                    ${doc.target_audience ? `<span class=\"ts-tag\">${doc.target_audience}<\/span>` : ''}\n                    ${\n                        doc.subcategories && Array.isArray(doc.subcategories) ?\n                        doc.subcategories.map(x => `<span class=\"ts-tag\">${x}<\/span>`).join(\"\") : \"\"\n                    }\n                    ${\n                        doc.keywords && Array.isArray(doc.keywords) ?\n                        doc.keywords.map(x => `<span class=\"ts-tag\">${x}<\/span>`).join(\"\") : \"\"\n                    }\n                <\/div>\n            <\/article>\n            `;\n        });\n\n        listaHits.innerHTML = html;\n    }\n\n    function renderizarPaginacion(){\n        if(totalPaginas <= 1) {\n            paginationContainer.innerHTML = '';\n            return;\n        }\n\n        let html = `\n            <button\n                class=\"ts-page-btn ts-nav-btn\"\n                ${paginaActual === 1 ? \"disabled\" : \"\"}\n                onclick=\"tsPrevPage()\"\n            >\n                \u2190 Previous\n            <\/button>\n        `;\n\n        let inicio = Math.max(1, paginaActual - 2);\n        let fin = Math.min(totalPaginas, inicio + 4);\n\n        if (fin - inicio < 4) {\n            inicio = Math.max(1, fin - 4);\n        }\n\n        for(let i = inicio; i <= fin; i++){\n            html += `\n                <button\n                    class=\"ts-page-btn ${i === paginaActual ? \"active\" : \"\"}\"\n                    onclick=\"tsGoPage(${i})\"\n                >\n                    ${i}\n                <\/button>\n            `;\n        }\n\n        if(fin < totalPaginas){\n            if(fin < totalPaginas - 1){\n                html += `<span style=\"align-self:center; color:#94a3b8;\">...<\/span>`;\n            }\n            html += `\n                <button\n                    class=\"ts-page-btn\"\n                    onclick=\"tsGoPage(${totalPaginas})\"\n                >\n                    ${totalPaginas}\n                <\/button>\n            `;\n        }\n\n        html += `\n            <button\n                class=\"ts-page-btn ts-nav-btn\"\n                ${paginaActual === totalPaginas ? \"disabled\" : \"\"}\n                onclick=\"tsNextPage()\"\n            >\n                Next \u2192\n            <\/button>\n        `;\n\n        paginationContainer.innerHTML = html;\n    }\n\n    window.tsGoPage = function(page){\n        paginaActual = page;\n        buscar();\n        window.scrollTo({ top: 0, behavior: 'smooth' });\n    };\n\n    window.tsPrevPage = function(){\n        if(paginaActual > 1){\n            paginaActual--;\n            buscar();\n            window.scrollTo({ top: 0, behavior: 'smooth' });\n        }\n    };\n\n    window.tsNextPage = function(){\n        if(paginaActual < totalPaginas){\n            paginaActual++;\n            buscar();\n            window.scrollTo({ top: 0, behavior: 'smooth' });\n        }\n    };\n});\n<\/script>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":25,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-51596","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/entretramites.com\/en\/wp-json\/wp\/v2\/pages\/51596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/entretramites.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/entretramites.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/entretramites.com\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/entretramites.com\/en\/wp-json\/wp\/v2\/comments?post=51596"}],"version-history":[{"count":10,"href":"https:\/\/entretramites.com\/en\/wp-json\/wp\/v2\/pages\/51596\/revisions"}],"predecessor-version":[{"id":57626,"href":"https:\/\/entretramites.com\/en\/wp-json\/wp\/v2\/pages\/51596\/revisions\/57626"}],"wp:attachment":[{"href":"https:\/\/entretramites.com\/en\/wp-json\/wp\/v2\/media?parent=51596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}