{"id":2891,"date":"2025-09-23T17:07:35","date_gmt":"2025-09-23T20:07:35","guid":{"rendered":"https:\/\/hubvitacura.glympses.cl\/home\/?page_id=2891"},"modified":"2026-04-28T14:01:08","modified_gmt":"2026-04-28T17:01:08","slug":"detalle-programa","status":"publish","type":"page","link":"https:\/\/hubvitacura.cl\/home\/detalle-programa\/","title":{"rendered":""},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2891\" class=\"elementor elementor-2891\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e837304 e-flex e-con-boxed e-con e-parent\" data-id=\"e837304\" 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-41620e5 elementor-widget elementor-widget-html\" data-id=\"41620e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- C\u00d3DIGO CORREGIDO + IMAGEN COMPLETA + TIPOGRAF\u00cdAS APEX NEW + NUEVOS CAMPOS -->\r\n<style>\r\n    @import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/css\/all.min.css');\r\n    @import url('https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css');\r\n  \r\n    \/* ===============================\r\n       1) Fuentes Apex New\r\n       =============================== *\/\r\n    @font-face {\r\n      font-family: 'Apex New Heavy';\r\n      src: url('\/fonts\/ApexNew-Heavy.woff2') format('woff2'),\r\n           url('\/fonts\/ApexNew-Heavy.woff') format('woff');\r\n      font-weight: 800;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'Apex New Light';\r\n      src: url('\/fonts\/ApexNew-Light.woff2') format('woff2'),\r\n           url('\/fonts\/ApexNew-Light.woff') format('woff');\r\n      font-weight: 400;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'Apex New Light';\r\n      src: url('\/fonts\/ApexNew-LightBold.woff2') format('woff2'),\r\n           url('\/fonts\/ApexNew-LightBold.woff') format('woff');\r\n      font-weight: 700;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n  \r\n    :root{\r\n      --f-title: 'Apex New Heavy', system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n      --f-text: 'Apex New Light', system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n  \r\n      --fs-title-main: 27px;\r\n      --fs-title-sec:  23px;\r\n      --fs-body:       18px;\r\n      --lh-body:       1.55;\r\n      --color-text:    #333;\r\n      --color-accent:  #009688;\r\n      --color-btn:     #00c4a7;\r\n      --color-success: #4caf50;\r\n      --color-warning: #ff9800;\r\n    }\r\n  \r\n    \/* ===============================\r\n       2) Estilos globales\r\n       =============================== *\/\r\n    #programa-detalle-container {\r\n      font-family: var(--f-text);\r\n      font-size: var(--fs-body);\r\n      line-height: var(--lh-body);\r\n      color: var(--color-text);\r\n      max-width: 900px;\r\n      margin: 40px auto;\r\n    }\r\n  \r\n    \/* ---- Secci\u00f3n superior: Imagen + Aside lado a lado ---- *\/\r\n    .programa-header-wrapper {\r\n      display: flex;\r\n      gap: 30px;\r\n      align-items: flex-start;\r\n      margin-bottom: 30px;\r\n    }\r\n  \r\n    .programa-header {\r\n      flex: 1;\r\n      min-width: 0;\r\n    }\r\n  \r\n    .programa-header img {\r\n      width: 100%;\r\n      height: auto;\r\n      max-height: 400px;\r\n      object-fit: cover;\r\n      object-position: center;\r\n      border-radius: 8px;\r\n      display: block;\r\n    }\r\n  \r\n    .inscripcion-box {\r\n      width: 300px;\r\n      flex-shrink: 0;\r\n      padding: 20px;\r\n      border: 1px solid #e0e0e0;\r\n      border-radius: 8px;\r\n      font-family: var(--f-text);\r\n      font-size: var(--fs-body);\r\n      background-color: #fff;\r\n      box-shadow: 0 2px 8px rgba(0,0,0,0.1);\r\n    }\r\n  \r\n    .inscripcion-box h4 {\r\n      font-family: var(--f-text);\r\n      font-size: var(--fs-title-sec);\r\n      font-weight: 400;\r\n      color: var(--color-accent);\r\n      margin: 0 0 12px 0;\r\n    }\r\n  \r\n    .programa-main-content {\r\n      width: 100%;\r\n    }\r\n  \r\n    .programa-titulo {\r\n      font-family: var(--f-title);\r\n      font-size: var(--fs-title-main);\r\n      font-weight: 800;\r\n      margin: 0 0 10px 0;\r\n      text-transform: uppercase;\r\n      letter-spacing: .02em;\r\n      line-height: 1.2;\r\n    }\r\n  \r\n    .programa-seccion {\r\n      border-top: 1px solid #e0e0e0;\r\n      padding: 25px 0;\r\n      margin-top: 20px;\r\n    }\r\n  \r\n    .programa-seccion h4 {\r\n      font-family: var(--f-text);\r\n      font-size: var(--fs-title-sec);\r\n      font-weight: 400;\r\n      color: var(--color-accent);\r\n      margin: 0 0 12px 0;\r\n      line-height: 1.25;\r\n    }\r\n  \r\n    .info-general, .calendario-fechas, .horario-jornada, .ubicacion-info,\r\n    .inscripcion-box p, .postulacion-fechas {\r\n      font-family: var(--f-text);\r\n      font-size: var(--fs-body);\r\n      line-height: var(--lh-body);\r\n    }\r\n  \r\n    .info-general b, .info-general strong,\r\n    .calendario-fechas b, .calendario-fechas strong,\r\n    .horario-jornada b, .horario-jornada strong,\r\n    .ubicacion-info b, .ubicacion-info strong,\r\n    .postulacion-fechas b, .postulacion-fechas strong {\r\n      font-weight: 700;\r\n    }\r\n  \r\n    .horario-jornada {\r\n      background-color: #f8f9fa;\r\n      padding: 15px;\r\n      border-radius: 8px;\r\n      border-left: 4px solid var(--color-accent);\r\n    }\r\n  \r\n    .horario-jornada .horario-display {\r\n      display: flex;\r\n      gap: 20px;\r\n      flex-wrap: wrap;\r\n      align-items: center;\r\n    }\r\n  \r\n    .horario-jornada .horario-item {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n    }\r\n  \r\n    .horario-jornada .horario-icon {\r\n      color: var(--color-accent);\r\n      font-size: 16px;\r\n    }\r\n  \r\n    \/* Estilos para la secci\u00f3n de postulaci\u00f3n *\/\r\n    .postulacion-box {\r\n      background-color: #f0f8ff;\r\n      padding: 15px;\r\n      border-radius: 8px;\r\n      border-left: 4px solid var(--color-accent);\r\n    }\r\n  \r\n    .postulacion-fechas {\r\n      display: flex;\r\n      gap: 20px;\r\n      flex-wrap: wrap;\r\n    }\r\n  \r\n    .postulacion-estado {\r\n      display: inline-block;\r\n      padding: 6px 12px;\r\n      border-radius: 20px;\r\n      font-size: 14px;\r\n      font-weight: 700;\r\n      margin-top: 10px;\r\n    }\r\n  \r\n    .postulacion-estado.abierta {\r\n      background-color: var(--color-success);\r\n      color: white;\r\n    }\r\n  \r\n    .postulacion-estado.cerrada {\r\n      background-color: var(--color-warning);\r\n      color: white;\r\n    }\r\n  \r\n    #mapa-detalle {\r\n      height: 300px;\r\n      width: 100%;\r\n      border-radius: 8px;\r\n      margin-top: 15px;\r\n    }\r\n\r\n    .my-maps-embed-wrap {\r\n      position: relative;\r\n      width: 100%;\r\n      margin-top: 15px;\r\n      padding-bottom: 56.25%;\r\n      height: 0;\r\n      overflow: hidden;\r\n      border-radius: 8px;\r\n      border: 1px solid #e0e0e0;\r\n      background: #f5f5f5;\r\n    }\r\n\r\n    .my-maps-embed-wrap iframe {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      border: 0;\r\n    }\r\n  \r\n    .btn-inscribirse, .btn-bases {\r\n      display: block;\r\n      width: 100%;\r\n      padding: 15px;\r\n      text-align: center;\r\n      text-decoration: none;\r\n      font-family: var(--f-text);\r\n      font-size: var(--fs-body);\r\n      font-weight: 700;\r\n      border-radius: 5px;\r\n      margin-top: 15px;\r\n      transition: background-color 0.3s ease;\r\n    }\r\n  \r\n    .btn-inscribirse {\r\n      background-color: var(--color-btn);\r\n      color: #fff;\r\n    }\r\n  \r\n    .btn-inscribirse:hover {\r\n      background-color: #00a88f;\r\n    }\r\n  \r\n    .btn-inscribirse.disabled {\r\n      background-color: #a0a0a0;\r\n      cursor: not-allowed;\r\n    }\r\n  \r\n    .btn-bases {\r\n      background-color: #e53935;\r\n      color: #fff;\r\n    }\r\n  \r\n    .btn-bases:hover {\r\n      background-color: #c62828;\r\n    }\r\n  \r\n    .btn-bases i {\r\n      margin-right: 8px;\r\n    }\r\n  \r\n    @media (max-width: 768px) {\r\n      .programa-header-wrapper {\r\n        flex-direction: column;\r\n      }\r\n      .inscripcion-box {\r\n        width: 100%;\r\n      }\r\n    }\r\n  <\/style>\r\n  \r\n  <div id=\"programa-detalle-container\">\r\n    <p>Cargando detalles del programa...<\/p>\r\n  <\/div>\r\n  \r\n  <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n  <script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    const container = document.getElementById('programa-detalle-container');\r\n    const API_BASE_URL = 'https:\/\/admin.hubvitacura.cl\/programas\/api\/';\r\n  \r\n    function normalizeExternalUrl(url) {\r\n      if (!url) return '';\r\n      const u = url.trim();\r\n      if (\/^https?:\\\/\\\/\/i.test(u)) return u;\r\n      if (\/^\\\/\\\/\/.test(u)) return u;\r\n      if (\/^[a-z0-9.-]+\\.[a-z]{2,}\\\/?\/i.test(u)) return 'https:\/\/' + u.replace(\/^\\\/+\/, '');\r\n      if (u.startsWith('\/')) {\r\n        try { return new URL(u, window.location.origin).href; } catch (_) { return u; }\r\n      }\r\n      return 'https:\/\/' + u.replace(\/^\\\/+\/, '');\r\n    }\r\n  \r\n    function formatTime(timeString) {\r\n      if (!timeString) return '';\r\n      return timeString.substring(0, 5);\r\n    }\r\n\r\n    \/** URLs de ejemplo: viewer, \/maps\/d\/edit?mid=\u2026, cualquier formato con mid= \u2192 embed legible p\u00fablico *\/\r\n    function googleMyMapsEmbedUrl(raw) {\r\n      if (!raw || typeof raw !== 'string') return '';\r\n      let s = raw.trim();\r\n      if (!s) return '';\r\n      if (!\/^https?:\\\/\\\/\/i.test(s)) {\r\n        s = 'https:\/\/' + s.replace(\/^\\\/+\/, '');\r\n      }\r\n      try {\r\n        var u = new URL(s);\r\n        var mid = u.searchParams.get('mid');\r\n        if (!mid) {\r\n          var m = s.match(\/[?&]mid=([^&#\\s\"']+)\/i);\r\n          mid = m ? decodeURIComponent(m[1]) : '';\r\n        }\r\n        if (!mid) return '';\r\n        return 'https:\/\/www.google.com\/maps\/d\/embed?mid=' + encodeURIComponent(mid);\r\n      } catch (e) {\r\n        var m2 = raw.match(\/[?&]mid=([^&#\\s\"']+)\/i);\r\n        if (!m2) return '';\r\n        try { return 'https:\/\/www.google.com\/maps\/d\/embed?mid=' + encodeURIComponent(decodeURIComponent(m2[1])); } catch (e2) {\r\n          return 'https:\/\/www.google.com\/maps\/d\/embed?mid=' + encodeURIComponent(m2[1]);\r\n        }\r\n      }\r\n    }\r\n  \r\n    const params = new URLSearchParams(window.location.search);\r\n    const programaId = params.get('id');\r\n    if (!programaId) {\r\n      container.innerHTML = '<p>Error: No se ha especificado un programa.<\/p>';\r\n      return;\r\n    }\r\n  \r\n    fetch(`${API_BASE_URL}${programaId}\/`)\r\n      .then(r => { if (!r.ok) throw new Error('Programa no encontrado.'); return r.json(); })\r\n      .then(programa => {\r\n        const fechaInicio = new Date(programa.fecha_inicio).toLocaleDateString('es-ES', { day:'numeric', month:'long', year:'numeric'});\r\n        const fechaTermino = new Date(programa.fecha_termino).toLocaleDateString('es-ES', { day:'numeric', month:'long', year:'numeric'});\r\n        const formHref = normalizeExternalUrl(programa.url_formulario||'');\r\n        const botonInscripcionHTML = programa.url_formulario\r\n          ? `<a href=\"${formHref}\" class=\"btn-inscribirse\" target=\"_blank\" rel=\"noopener\">INSCRIBIRSE<\/a>`\r\n          : `<a class=\"btn-inscribirse disabled\" href=\"#\" onclick=\"event.preventDefault();\">INSCRIPCI\u00d3N NO DISPONIBLE<\/a>`;\r\n  \r\n        \/\/ Bot\u00f3n de bases PDF\r\n        let botonBasesHTML = '';\r\n        if (programa.bases_pdf_url) {\r\n          const basesHref = normalizeExternalUrl(programa.bases_pdf_url);\r\n          botonBasesHTML = `<a href=\"${basesHref}\" class=\"btn-bases\" target=\"_blank\" rel=\"noopener\"><i class=\"fas fa-file-pdf\"><\/i>DESCARGAR BASES<\/a>`;\r\n        }\r\n  \r\n        \/\/ Horario de jornada\r\n        let horarioJornadaHTML = '';\r\n        if (programa.jornada_inicio || programa.jornada_fin) {\r\n          const horaInicio = formatTime(programa.jornada_inicio);\r\n          const horaFin = formatTime(programa.jornada_fin);\r\n          horarioJornadaHTML = `\r\n            <div class=\"programa-seccion horario-jornada\">\r\n              <h4><i class=\"fas fa-clock horario-icon\"><\/i> Horario de Jornada<\/h4>\r\n              <div class=\"horario-display\">\r\n                ${horaInicio ? `<div class=\"horario-item\"><i class=\"fas fa-play horario-icon\"><\/i><span><strong>Inicio:<\/strong> ${horaInicio}<\/span><\/div>`:''}\r\n                ${horaFin ? `<div class=\"horario-item\"><i class=\"fas fa-stop horario-icon\"><\/i><span><strong>Fin:<\/strong> ${horaFin}<\/span><\/div>`:''}\r\n              <\/div>\r\n            <\/div>`;\r\n        }\r\n  \r\n        \/\/ Fechas de postulaci\u00f3n\r\n        let postulacionHTML = '';\r\n        if (programa.fecha_inicio_postulacion || programa.fecha_fin_postulacion) {\r\n          let fechasHTML = '';\r\n          \r\n          if (programa.fecha_inicio_postulacion) {\r\n            const fechaInicioPost = new Date(programa.fecha_inicio_postulacion).toLocaleDateString('es-ES', { day:'numeric', month:'long', year:'numeric', hour:'2-digit', minute:'2-digit'});\r\n            fechasHTML += `<span><strong><i class=\"fas fa-calendar-alt\"><\/i> Inicio de Postulaci\u00f3n:<\/strong> ${fechaInicioPost}<\/span>`;\r\n          }\r\n          \r\n          if (programa.fecha_fin_postulacion) {\r\n            const fechaFinPost = new Date(programa.fecha_fin_postulacion).toLocaleDateString('es-ES', { day:'numeric', month:'long', year:'numeric', hour:'2-digit', minute:'2-digit'});\r\n            fechasHTML += `<span><strong><i class=\"fas fa-calendar-check\"><\/i> Cierre de Postulaci\u00f3n:<\/strong> ${fechaFinPost}<\/span>`;\r\n          }\r\n  \r\n          \/\/ Estado de postulaci\u00f3n\r\n          let estadoHTML = '';\r\n          if (programa.postulacion_abierta !== null && programa.postulacion_abierta !== undefined) {\r\n            if (programa.postulacion_abierta === true) {\r\n              estadoHTML = '<span class=\"postulacion-estado abierta\"><i class=\"fas fa-check-circle\"><\/i> POSTULACIONES ABIERTAS<\/span>';\r\n            } else if (programa.postulacion_abierta === false) {\r\n              estadoHTML = '<span class=\"postulacion-estado cerrada\"><i class=\"fas fa-times-circle\"><\/i> POSTULACIONES CERRADAS<\/span>';\r\n            }\r\n          }\r\n  \r\n          postulacionHTML = `\r\n            <div class=\"programa-seccion\">\r\n              <h4>Per\u00edodo de Postulaci\u00f3n<\/h4>\r\n              <div class=\"postulacion-box\">\r\n                <div class=\"postulacion-fechas\">\r\n                  ${fechasHTML}\r\n                <\/div>\r\n                ${estadoHTML}\r\n              <\/div>\r\n            <\/div>`;\r\n        }\r\n\r\n        var myMapsEmbed = googleMyMapsEmbedUrl(programa.google_my_maps_url || '');\r\n        var mapaUbicacionHTML = myMapsEmbed\r\n          ? ('<div class=\"my-maps-embed-wrap\"><iframe title=\"Mapa del programa\" src=\"' + myMapsEmbed.replace(\/\"\/g, '&quot;') + '\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\" allowfullscreen><\/iframe><\/div>')\r\n          : '<div id=\"mapa-detalle\"><\/div>';\r\n\r\n        container.innerHTML = `\r\n          <div class=\"programa-header-wrapper\">\r\n              <div class=\"programa-header\">\r\n                  <img decoding=\"async\" src=\"${programa.imagen_url}\" alt=\"${programa.titulo}\">\r\n              <\/div>\r\n              <aside class=\"inscripcion-box\">\r\n                  <h4>Tickets de la Actividad<\/h4>\r\n                  <p>${programa.modalidad_inscripcion||'No especificado'}<\/p>\r\n                  ${botonInscripcionHTML}\r\n                  ${botonBasesHTML}\r\n              <\/aside>\r\n          <\/div>\r\n  \r\n          <div class=\"programa-main-content\">\r\n              <h1 class=\"programa-titulo\">${programa.titulo}<\/h1>\r\n  \r\n              <div class=\"programa-seccion info-general\">\r\n                  <h4>Informaci\u00f3n General<\/h4>\r\n                  <div>${(programa.informacion_general||'').replace(\/\\n\/g,'<br>')}<\/div>\r\n              <\/div>\r\n  \r\n              <div class=\"programa-seccion\">\r\n                  <h4>Calendario del Programa<\/h4>\r\n                  <div class=\"calendario-fechas\" style=\"display:flex; gap:20px; flex-wrap:wrap\">\r\n                      <span><strong>Fecha de Inicio:<\/strong> ${fechaInicio}<\/span>\r\n                      <span><strong>Fecha de T\u00e9rmino:<\/strong> ${fechaTermino}<\/span>\r\n                  <\/div>\r\n              <\/div>\r\n  \r\n              ${postulacionHTML}\r\n  \r\n              ${horarioJornadaHTML}\r\n  \r\n              <div class=\"programa-seccion\">\r\n                  <h4>Ubicaci\u00f3n<\/h4>\r\n                  <div class=\"ubicacion-info\">\r\n                      <span><strong>Direcci\u00f3n:<\/strong> ${programa.ubicacion||'No informada'}<\/span>\r\n                  <\/div>\r\n                  ${mapaUbicacionHTML}\r\n              <\/div>\r\n          <\/div>`;\r\n\r\n        if (!myMapsEmbed && programa.latitud && programa.longitud) {\r\n          const map = L.map('mapa-detalle').setView([programa.latitud, programa.longitud], 15);\r\n          L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', { attribution: '&copy; OpenStreetMap contributors' }).addTo(map);\r\n          L.marker([programa.latitud, programa.longitud]).addTo(map).bindPopup(programa.ubicacion||'').openPopup();\r\n        } else if (!myMapsEmbed) {\r\n          const mapDiv = document.getElementById('mapa-detalle');\r\n          if (mapDiv) mapDiv.style.display='none';\r\n        }\r\n      })\r\n      .catch(e=>{console.error(e); container.innerHTML='<p style=\"color:red;\">Error al cargar la informaci\u00f3n del programa.<\/p>';});\r\n  });\r\n  <\/script>\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":"<p>Cargando detalles del programa&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2891","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/pages\/2891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/comments?post=2891"}],"version-history":[{"count":59,"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/pages\/2891\/revisions"}],"predecessor-version":[{"id":11012,"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/pages\/2891\/revisions\/11012"}],"wp:attachment":[{"href":"https:\/\/hubvitacura.cl\/home\/wp-json\/wp\/v2\/media?parent=2891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}