{"id":4656,"date":"2025-10-16T18:37:40","date_gmt":"2025-10-16T18:37:40","guid":{"rendered":"https:\/\/prototipo.inertia.design\/talentclout\/?page_id=4656"},"modified":"2025-10-22T13:21:52","modified_gmt":"2025-10-22T13:21:52","slug":"jobs","status":"publish","type":"page","link":"https:\/\/prototipo.inertia.design\/talentclout\/jobs\/","title":{"rendered":"Jobs"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1256.6px;margin-left: calc(-3% \/ 2 );margin-right: calc(-3% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-spacing-right-large:1.455%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.455%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.455%;--awb-spacing-left-medium:1.455%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.455%;--awb-spacing-left-small:1.455%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><!--\nPega TODO en un bloque \"HTML personalizado\" de WordPress\nVista en LISTA (l\u00edneas) en lugar de grilla, mismo estilo visual.\nIncluye carga incremental (\"Load more\") para manejar volumen.\n-->\n\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');\n\n  :root{\n    --brand:#1362a3; \n    --brand-hover:#0d4b7c; \n    --card-bg:#fff; \n    --card-border:#e5e7eb;\n    --text-dark:#1a1a1a; \n    --text-gray:#6b7280; \n    --text-muted:#9ca3af;\n    --row-hover:#f8fafc;\n  }\n  .material-symbols-outlined{\n    font-family:'Material Symbols Outlined'; font-weight:400; font-style:normal; line-height:1;\n    -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;\n  }\n\n  \/* ===== Contenedor blanco \"invisible\" ===== *\/\n  .jobs-white-container{ background:#fff; margin:0 auto; max-width:100%; padding:0; border:none; box-shadow:none; border-radius:0; }\n\n  \/* Secciones internas *\/\n  #job-search-section, #jobs-container{ font-family:'Inter',system-ui; max-width:1400px; margin:0 auto; background:transparent; }\n  #job-search-section{ padding:48px 24px 24px; }\n  #jobs-container{ padding:0 24px 60px; }\n\n  .search-header{ text-align:center; margin-bottom:32px; }\n  .search-header h1{\n    font-size:clamp(28px,4vw,44px); font-weight:800; margin:0 0 8px; line-height:1.1;\n    background:linear-gradient(135deg,var(--brand), #1362a3);\n    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;\n  }\n  .search-header p{ font-size:clamp(14px,2.5vw,18px); color:var(--text-gray); margin:0 auto; line-height:1.6; max-width:700px; }\n\n  .find-job{\n    background:#fff; border-radius:12px; padding:16px; box-shadow:0 4px 16px rgba(0,0,0,.06);\n    margin-bottom:24px; border:1px solid rgba(0,0,0,.06);\n  }\n  .find-job1{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:center; }\n  .salary-min,.salary-max{ position:relative; }\n  .salary-min::before,.salary-max::before{\n    font-family:'Material Symbols Outlined'; position:absolute; left:14px; top:50%; transform:translateY(-50%);\n    color:var(--brand); font-size:20px; pointer-events:none;\n  }\n  .salary-min::before{ content:\"search\"; } \n  .salary-max::before{ content:\"location_on\"; }\n  .salary-min input,.salary-max input{\n    width:100%; padding:12px 16px 12px 44px; border:2px solid var(--card-border); border-radius:10px;\n    font-size:15px; font-weight:500; color:var(--text-dark); background:#fff; transition:.2s;\n  }\n  .salary-min input:focus,.salary-max input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(19,98,163,.08); }\n\n  \/* Botones planos + hover oscuro *\/\n  .serch-btn button, .jobs-loadmore{\n    padding:12px 20px; background:var(--brand) !important; color:#fff; border:none; border-radius:10px;\n    font-size:15px; font-weight:700; cursor:pointer; transition:background-color .2s ease, box-shadow .2s ease; \n    white-space:nowrap; box-shadow:0 3px 12px rgba(0,0,0,.12);\n  }\n  .serch-btn button:hover, .serch-btn button:focus-visible,\n  .jobs-loadmore:hover, .jobs-loadmore:focus-visible{\n    background:var(--brand-hover) !important; box-shadow:0 5px 16px rgba(0,0,0,.18);\n  }\n\n  \/* ===== LIST VIEW ===== *\/\n  .jobs-list{\n    background:#fff; border:1px solid var(--card-border); border-radius:12px; overflow:hidden;\n  }\n  .jobs-list-header{\n    display:grid; grid-template-columns:2fr 1.2fr 1fr auto; gap:16px;\n    padding:14px 16px; font-size:13px; font-weight:700; color:#374151; background:#f9fafb;\n    border-bottom:1px solid var(--card-border);\n  }\n  .jobs-row{\n    display:grid; grid-template-columns:2fr 1.2fr 1fr auto; gap:16px; align-items:center;\n    padding:14px 16px; border-bottom:1px solid var(--card-border); background:#fff;\n  }\n  .jobs-row:hover{ background:var(--row-hover); }\n  .jobs-title{ font-size:16px; font-weight:700; color:var(--text-dark); line-height:1.3; }\n  .jobs-ref{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }\n  .badge-ref{\n    font-size:11px; color:#374151; text-transform:uppercase; letter-spacing:.08em; font-weight:700;\n    background:#eef2f7; padding:4px 8px; border-radius:999px;\n  }\n  .jobs-meta{\n    display:flex; align-items:center; gap:10px; color:var(--text-gray); font-size:14px; flex-wrap:wrap;\n  }\n  .jobs-meta .material-symbols-outlined{ font-size:18px; color:var(--brand); }\n  .jobs-worktype{ color:var(--text-gray); font-size:14px; }\n\n  .jobs-action{ display:flex; justify-content:flex-end; }\n  .jobs-action a{\n    background:var(--brand) !important; color:#fff !important; text-decoration:none !important; \n    padding:10px 14px; border-radius:10px; font-size:14px; font-weight:800; display:inline-block;\n    transition:background-color .2s ease, box-shadow .2s ease; box-shadow:0 2px 8px rgba(0,0,0,.12);\n  }\n  .jobs-action a:hover, .jobs-action a:focus-visible{ background:var(--brand-hover) !important; box-shadow:0 5px 14px rgba(0,0,0,.16); }\n\n  .loading, .no-jobs{ text-align:center; padding:32px; color:var(--text-gray); }\n  .jobs-controls{ display:flex; justify-content:center; padding:16px; }\n  .jobs-info{ text-align:center; color:var(--text-muted); font-size:13px; margin-top:6px; }\n  .is-hidden{ display:none !important; }\n\n  \/* Responsive: pilas en m\u00f3vil *\/\n  @media (max-width:900px){\n    .jobs-list-header{ display:none; }\n    .jobs-row{ grid-template-columns:1fr; gap:8px; }\n    .jobs-action{ justify-content:stretch; }\n    .jobs-action a{ width:100%; text-align:center; }\n    .jobs-meta{ gap:6px; }\n  }\n\n  \/* Ajustes de formulario en responsive *\/\n  @media (max-width:968px){\n    .find-job1{ grid-template-columns:1fr 1fr; }\n    .serch-btn{ grid-column:1 \/ -1; }\n    .serch-btn button{ width:100%; }\n  }\n  @media (max-width:640px){\n    #job-search-section{ padding:32px 16px 16px; }\n    #jobs-container{ padding:0 16px 40px; }\n    .find-job{ padding:12px; border-radius:10px; }\n  }\n<\/style>\n\n<section class=\"jobs-white-container\">\n  <div id=\"job-search-section\">\n    <div class=\"search-header\">\n      <h1>Find Your Next Opportunity<\/h1>\n      <p>Apply Now<\/p>\n    <\/div>\n    <form id=\"search-jobs-form\">\n      <div class=\"find-job\">\n        <div class=\"find-job1\">\n          <div class=\"salary-min\"><input type=\"text\" id=\"job_title\" placeholder=\"Job Title or Keywords\" autocomplete=\"off\"\/><\/div>\n          <div class=\"salary-max\"><input type=\"text\" id=\"location\" placeholder=\"Location\" autocomplete=\"off\"\/><\/div>\n          <div class=\"serch-btn\"><button type=\"submit\" id=\"search-job\">Search<\/button><\/div>\n        <\/div>\n      <\/div>\n    <\/form>\n  <\/div>\n\n  <div id=\"jobs-container\">\n    <div id=\"job-list\" class=\"jobs-list\">\n      <div class=\"loading\">Loading jobs...<\/div>\n    <\/div>\n    <div class=\"jobs-controls is-hidden\">\n      <button class=\"jobs-loadmore\" type=\"button\">Load more<\/button>\n    <\/div>\n    <div class=\"jobs-info is-hidden\"><\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  \/* ===== Config ===== *\/\n  var TRACKER_BASE='https:\/\/evoportalus.tracker-rms.com';\n  var TRACKER_DB='TalentClout';\n\n  \/* Volumen: controla p\u00e1ginas y lote de render *\/\n  var MAX_PAGES = 8;     \/\/ m\u00e1ximo de p\u00e1ginas a seguir\n  var MAX_JOBS  = 1000;  \/\/ m\u00e1ximo total por seguridad\n  var PAGE_SIZE = 25;    \/\/ cu\u00e1ntos renderizar por \"load more\"\n\n  \/* Estado *\/\n  var jobsAll = [];      \/\/ todos los jobs descargados\n  var shown   = 0;       \/\/ cu\u00e1ntos ya se muestran\n\n  \/* ===== Helpers URL\/Enlaces ===== *\/\n  function absUrl(u){ try{ return u?new URL(u,TRACKER_BASE).href:'' }catch(e){ return '' } }\n  function liteJobUrl(id){ return id ? TRACKER_BASE+'\/Opportunity\/LiteJob?db='+encodeURIComponent(TRACKER_DB)+'&id='+encodeURIComponent(id) : '' }\n\n  function extractIdFromAny(item, rawHref, referenceText){\n    try{\n      if(rawHref){\n        var u=new URL(rawHref,TRACKER_BASE);\n        var qid=u.searchParams.get('id'); if(qid) return qid;\n        var mPath=u.pathname.match(\/(\\d+)(?:\\\/)?$\/); if(mPath) return mPath[1];\n      }\n    }catch(e){}\n    var liData=item.getAttribute('data-id')||item.getAttribute('data-jobid')||item.id||'';\n    var mAttr=liData && String(liData).match(\/(\\d+)\/); if(mAttr) return mAttr[1];\n    if(referenceText){ var mRef=referenceText.match(\/(\\d{2,})\/); if(mRef) return mRef[1]; }\n    var anyDigits=(item.outerHTML.match(\/id=(\\d+)\/)||item.outerHTML.match(\/(\\d{3,})\/)); if(anyDigits) return anyDigits[1];\n    return '';\n  }\n\n  function extractRawHref(item){\n    var a=item.querySelector('.publish_link a, .publish_joblink a, a[href*=\"LiteJob\"], a[href*=\"\/job\/\"], a[href*=\"Opportunity\"]');\n    if(a && a.getAttribute('href')) return a.getAttribute('href');\n    var cand=item.getAttribute('data-joblink')||item.getAttribute('data-url')||''; if(cand) return cand;\n    var withOnclick=item.querySelector('[onclick*=\"LiteJob\"], [onclick*=\"Opportunity\"], [onclick*=\"window.open\"]');\n    if(withOnclick && withOnclick.getAttribute('onclick')){ var oc=withOnclick.getAttribute('onclick'); var m=oc.match(\/['\"]([^'\"]*LiteJob[^'\"]*)['\"]\/); if(m&&m[1]) return m[1]; }\n    var linkNode=item.querySelector('.publish_joblink, .publish_link, .publish_url');\n    if(linkNode){ var t=linkNode.textContent||''; var m2=t.match(\/https?:\\\/\\\/[^\\s)]+\/); if(m2) return m2[0]; }\n    return '';\n  }\n\n  \/* ===== Parseo de HTML de Tracker ===== *\/\n  function parseTrackerHTML(html){\n    var doc=new DOMParser().parseFromString(html,'text\/html'), jobs=[], items=doc.querySelectorAll('#trackerpublishlist > ul > li');\n    items.forEach(function(item){\n      var refEl=item.querySelector('.publish_reference'),\n          titleEl=item.querySelector('.publish_title'),\n          locEl=item.querySelector('.publish_location'),\n          workEl=item.querySelector('.publish_worktype');\n\n      var job={\n        reference: refEl ? refEl.textContent.trim() : '',\n        title:     titleEl? titleEl.textContent.trim() : '',\n        location:  locEl ? locEl.textContent.trim() : '',\n        worktype:  workEl ? workEl.textContent.trim() : ''\n      };\n\n      var rawHref=extractRawHref(item), id=extractIdFromAny(item, rawHref, job.reference);\n      job.link = id ? liteJobUrl(id) : absUrl(rawHref);\n\n      if(job.title) jobs.push(job);\n    });\n    return jobs;\n  }\n\n  \/* ===== Paginaci\u00f3n HTML (siguiente) ===== *\/\n  function extractNextUrl(html){\n    var doc = new DOMParser().parseFromString(html,'text\/html');\n    var link =\n      doc.querySelector('a[rel=\"next\"]') ||\n      doc.querySelector('.pager a.next, .pagination a.next, li.next a') ||\n      doc.querySelector('.pagination a[aria-label=\"Next\"], .pagination a[aria-label=\"Suivant\"]') ||\n      doc.querySelector('#trackerpublishlist .pager a[href*=\"page=\"]');\n    if(!link) return null;\n    try { return new URL(link.getAttribute('href'), TRACKER_BASE).href; }\n    catch(e){ return null; }\n  }\n\n  async function fetchAllPages(startUrl){\n    let all=[], url=startUrl, page=0;\n    while (url && page < MAX_PAGES && all.length < MAX_JOBS) {\n      const html = await fetch(url).then(r=>r.text());\n      const chunk = parseTrackerHTML(html);\n      all = all.concat(chunk);\n      if (all.length >= MAX_JOBS) break;\n      url = extractNextUrl(html);\n      page++;\n    }\n    return all.slice(0, MAX_JOBS);\n  }\n\n  \/* ===== Render (LIST VIEW) ===== *\/\n  function headerRow(){\n    return (\n      '<div class=\"jobs-list-header\">' +\n        '<div>Position<\/div>' +\n        '<div>Location<\/div>' +\n        '<div>Type<\/div>' +\n        '<div><\/div>' +\n      '<\/div>'\n    );\n  }\n\n  function rowHtml(job){\n    var location = job.location ? \n      '<span class=\"material-symbols-outlined\">location_on<\/span><span>'+job.location+'<\/span>' : '';\n    return (\n      '<div class=\"jobs-row\">' +\n        '<div class=\"jobs-title\">' +\n          job.title +\n          (job.reference ? ' <span class=\"badge-ref\">'+job.reference+'<\/span>' : '') +\n        '<\/div>' +\n        '<div class=\"jobs-meta\">'+ location +'<\/div>' +\n        '<div class=\"jobs-worktype\">'+ (job.worktype || '') +'<\/div>' +\n        '<div class=\"jobs-action\"><a href=\"'+(job.link||'#')+'\" target=\"_blank\" rel=\"noopener noreferrer\">View Job<\/a><\/div>' +\n      '<\/div>'\n    );\n  }\n\n  function renderChunk(){\n    var list = document.getElementById('job-list');\n    var controls = document.querySelector('.jobs-controls');\n    var info = document.querySelector('.jobs-info');\n\n    if (shown === 0){\n      list.innerHTML = headerRow(); \/\/ cabecera solo una vez\n    }\n\n    var next = Math.min(shown + PAGE_SIZE, jobsAll.length);\n    var fragHtml = '';\n    for (var i = shown; i < next; i++){\n      fragHtml += rowHtml(jobsAll[i]);\n    }\n    list.insertAdjacentHTML('beforeend', fragHtml);\n    shown = next;\n\n    var remaining = jobsAll.length - shown;\n    if (remaining > 0){\n      controls.classList.remove('is-hidden');\n      info.classList.remove('is-hidden');\n      info.textContent = remaining + ' more result' + (remaining===1?'':'s') + ' available';\n    } else {\n      controls.classList.add('is-hidden');\n      info.classList.add('is-hidden');\n    }\n  }\n\n  function renderEmpty(){\n    var list = document.getElementById('job-list');\n    list.innerHTML = '<div class=\"no-jobs\">No jobs found. Try adjusting your search.<\/div>';\n    document.querySelector('.jobs-controls').classList.add('is-hidden');\n    document.querySelector('.jobs-info').classList.add('is-hidden');\n  }\n\n  \/* ===== Carga principal ===== *\/\n  async function loadJobs(keywords, location){\n    shown = 0;\n    jobsAll = [];\n    var list = document.getElementById('job-list');\n    list.innerHTML = '<div class=\"loading\">Loading jobs...<\/div>';\n    document.querySelector('.jobs-controls').classList.add('is-hidden');\n    document.querySelector('.jobs-info').classList.add('is-hidden');\n\n    let url = TRACKER_BASE + '\/' + encodeURIComponent(TRACKER_DB) + '\/jobs'\n      + '?fields=reference,title,location,worktype,joblink&sorts=publishstartdate%20DESC';\n\n    const filters = [];\n    if (keywords) filters.push('keywords|' + encodeURIComponent(keywords));\n    if (location) filters.push('location|' + encodeURIComponent(location));\n    if (filters.length) url += '&filters=' + filters.join(',');\n\n    try{\n      jobsAll = await fetchAllPages(url);\n      if (!jobsAll.length) { renderEmpty(); return; }\n      renderChunk();\n    }catch(err){\n      console.error(err);\n      renderEmpty();\n    }\n  }\n\n  \/* ===== Eventos ===== *\/\n  document.querySelector('.jobs-loadmore').addEventListener('click', function(){\n    renderChunk();\n  });\n\n  document.getElementById('search-jobs-form').addEventListener('submit', function(e){\n    e.preventDefault();\n    loadJobs(\n      document.getElementById('job_title').value.trim(),\n      document.getElementById('location').value.trim()\n    );\n  });\n\n  document.getElementById('job_title').addEventListener('keypress', function(e){\n    if(e.key==='Enter'){\n      e.preventDefault();\n      loadJobs(this.value.trim(), document.getElementById('location').value.trim());\n    }\n  });\n  document.getElementById('location').addEventListener('keypress', function(e){\n    if(e.key==='Enter'){\n      e.preventDefault();\n      loadJobs(document.getElementById('job_title').value.trim(), this.value.trim());\n    }\n  });\n\n  \/* init *\/\n  loadJobs('', '');\n})();\n<\/script>\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-4656","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/prototipo.inertia.design\/talentclout\/wp-json\/wp\/v2\/pages\/4656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prototipo.inertia.design\/talentclout\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prototipo.inertia.design\/talentclout\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prototipo.inertia.design\/talentclout\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prototipo.inertia.design\/talentclout\/wp-json\/wp\/v2\/comments?post=4656"}],"version-history":[{"count":3,"href":"https:\/\/prototipo.inertia.design\/talentclout\/wp-json\/wp\/v2\/pages\/4656\/revisions"}],"predecessor-version":[{"id":4676,"href":"https:\/\/prototipo.inertia.design\/talentclout\/wp-json\/wp\/v2\/pages\/4656\/revisions\/4676"}],"wp:attachment":[{"href":"https:\/\/prototipo.inertia.design\/talentclout\/wp-json\/wp\/v2\/media?parent=4656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}