Cartelera de Eventos – Parque Estadio Nacional<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper@8\/swiper-bundle.min.css\" \/>\n <style>\n \/* Optional: Customize Swiper navigation buttons *\/\n .swiper-button-prev,\n .swiper-button-next {\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n width: 60px;\n height: 60px;\n z-index: 20;\n }\n .swiper-button-prev {\n background-image: url('\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-54.png');\n }\n .swiper-button-next {\n background-image: url('\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-53.png');\n }\n .swiper-button-prev::after,\n .swiper-button-next::after {\n display: none;\n }\n .swiper-pagination-bullet-active {\n background-color: rgba(0, 0, 0, 1);\n }\n .swiper-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n aspect-ratio: 4\/3;\n }\n \n \/* Contenedor principal de cartelera *\/\n .cartelera-container {\n width: 100% !important;\n max-width: none !important;\n display: flex;\n position: relative;\n overflow: visible !important;\n margin: 0 !important;\n margin-top: 0 !important;\n padding-top: 0 !important;\n margin-bottom: 6rem !important;\n }\n \n \/* Secci\u00f3n de texto izquierda *\/\n .text-section {\n width: 50%;\n padding-left: 2rem;\n padding-top: 3rem;\n padding-bottom: 3rem;\n z-index: 5;\n }\n \n \/* Contenedor para la mancha y slider *\/\n .visual-section {\n width: 50%;\n position: relative;\n overflow: visible !important;\n height: 100%;\n min-height: 400px;\n }\n \n \/* Mancha turquesa *\/\n .mancha-bg {\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n min-height: 400px;\n object-fit: cover;\n min-width: 100% !important;\n max-width: none !important;\n z-index: 1;\n overflow: visible !important;\n }\n \n \/* Posicionamos el slider dentro de la mancha *\/\n .swiper-container {\n position: relative;\n z-index: 10;\n width: 70%;\n max-width: 555px;\n aspect-ratio: 4\/3;\n margin: 0 auto;\n padding: 3rem 0;\n }\n \n .swiper, .swiper-wrapper, .swiper-slide {\n height: 100%;\n aspect-ratio: 4\/3;\n }\n \n \/* Contenedor del t\u00edtulo *\/\n .titulo-container {\n position: relative;\n z-index: 5;\n width: 100%;\n padding-top: 3rem;\n clear: both;\n }\n\n \/* Estilo para cr\u00e9ditos *\/\n .credito {\n position: absolute;\n bottom: 8px;\n right: 8px;\n background-color: rgba(0, 0, 0, 0.6);\n color: white;\n padding: 2px 6px;\n font-size: 10px;\n border-radius: 3px;\n }\n \n \/* Media queries para responsive *\/\n @media (max-width: 768px) {\n .cartelera-container {\n flex-direction: column;\n margin-bottom: 8rem !important;\n }\n \n .text-section,\n .visual-section {\n width: 100%;\n }\n \n .text-section {\n padding: 2rem 1rem;\n text-align: center;\n }\n \n .visual-section {\n min-height: 350px;\n }\n \n .mancha-bg {\n width: 100%;\n height: 100%;\n }\n \n .swiper-container {\n width: 96%;\n margin: 0 auto;\n max-width: none;\n padding: 2rem 0;\n }\n \n .titulo-container {\n padding-top: 4rem;\n }\n }\n\n \/* \u2500\u2500 Estilos del puntito admin y modales \u2500\u2500 *\/\n .admin-dot {\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #ccc;\n margin: 3rem auto 1rem auto;\n opacity: 0.3;\n cursor: default;\n border: none;\n transition: opacity 0.3s;\n }\n .admin-dot:hover { opacity: 0.6; }\n .btn-delete-evt {\n position: absolute; top: 8px; right: 8px;\n width: 28px; height: 28px;\n background: rgba(220,38,38,0.85);\n color: #fff; border: none; border-radius: 50%;\n font-size: 16px; font-weight: bold;\n cursor: pointer; z-index: 30;\n display: none; \/* se muestra solo en modo admin *\/\n align-items: center; justify-content: center;\n line-height: 1;\n }\n .btn-delete-evt:hover { background: #dc2626; }\n .admin-mode .btn-delete-evt { display: flex; }\n .modal-overlay {\n position: fixed; inset: 0;\n background: rgba(0,0,0,0.45);\n z-index: 9999;\n display: flex; align-items: center; justify-content: center;\n }\n .modal-overlay.hidden { display: none; }\n .shake { animation: shake 0.4s ease; }\n @keyframes shake {\n 0%,100% { transform: translateX(0); }\n 20%,60% { transform: translateX(-8px); }\n 40%,80% { transform: translateX(8px); }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"cartelera-container\">\n \n <div class=\"text-section\">\n <h2 class=\"text-[#00cec3] text-5xl font-bold mb-2\">Cartelera<\/h2>\n <h3 class=\"text-gray-500 text-4xl font-bold mb-4\">\u00a1Bienvenidos!<\/h3>\n <p class=\"text-gray-500\">Conoce los eventos que est\u00e1n oficializados en el Parque Estadio Nacional<\/p>\n <\/div>\n \n \n <div class=\"visual-section\">\n \n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/C8ngCCQ.png\" alt=\"Mancha de fondo\" class=\"mancha-bg\" \/>\n \n \n <div class=\"swiper-container\">\n <div class=\"swiper mySwiper\">\n <div class=\"swiper-wrapper\">\n \n <\/div>\n \n <div class=\"swiper-button-prev\"><\/div>\n <div class=\"swiper-button-next\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"titulo-container\">\n <h2 class=\"text-center font-bold text-2xl mb-6 w-full\"><\/h2>\n <\/div>\n\n <div class=\"flex flex-wrap justify-center gap-5 max-w-none\" id=\"eventos-container\">\n\n \n <div class=\"w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative\" data-start-date=\"2026-03-11\" data-end-date=\"2026-03-15\" data-evt-id=\"base-acdc\">\n <div class=\"relative w-full aspect-[4\/3] bg-gray-300\">\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/eAcNqyn.png\" alt=\"ACDC \u2013 Power Up Tour\" class=\"absolute inset-0 h-full w-full object-cover\" \/>\n <\/div>\n <div class=\"p-4 flex flex-col flex-grow\">\n <div class=\"my-2 text-3xl font-black tracking-tighter\">ACDC \u2013 Power Up Tour<\/div>\n <div class=\"my-3 flex justify-between text-sm\">\n <div>11 y 15 de marzo<\/div>\n <\/div>\n <div class=\"text-justify text-sm\">La m\u00edtica banda brit\u00e1nica australiana promete remecer el Parque Estadio Nacional, con un espect\u00e1culo donde repasar\u00e1 gran parte de los \u00e9xitos, que la han llevado a ser una de las bandas m\u00e1s influyentes del rock.<\/div>\n <div class=\"mt-auto flex gap-3\">\n <a href=\"https:\/\/www.ticketmaster.cl\/event\/acdc-2026-scl\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">\n <div>M\u00e1s informaci\u00f3n y tickets<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative\" data-start-date=\"2026-03-09\" data-end-date=\"2026-03-09\" data-evt-id=\"base-udechile\">\n <div class=\"relative w-full aspect-[4\/3] bg-gray-300\">\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/ZxGDoBx.png\" alt=\"U. de Chile vs. U. de Concepci\u00f3n\" class=\"absolute inset-0 h-full w-full object-cover\" \/>\n <\/div>\n <div class=\"p-4 flex flex-col flex-grow\">\n <div class=\"my-2 text-3xl font-black tracking-tighter\">U. de Chile vs. U. de Concepci\u00f3n<\/div>\n <div class=\"my-3 flex justify-between text-sm\">\n <div>9 de marzo<\/div>\n <\/div>\n <div class=\"text-justify text-sm\">Los azules recibir\u00e1n al “Campanil”, en un duelo v\u00e1lido por la sexta fecha del Campeonato Nacional, en el Coliseo Central.<\/div>\n <div class=\"mt-auto flex gap-3\">\n <a href=\"https:\/\/www.udechile.cl\/\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">\n <div>M\u00e1s informaci\u00f3n y tickets<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative\" data-start-date=\"2026-04-17\" data-end-date=\"2026-04-17\" data-evt-id=\"base-crismj\">\n <div class=\"relative w-full aspect-[4\/3] bg-gray-300\">\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/jA7H0vx.png\" alt=\"Cris MJ \u2013 El retorno del rey\" class=\"absolute inset-0 h-full w-full object-cover\" \/>\n <\/div>\n <div class=\"p-4 flex flex-col flex-grow\">\n <div class=\"my-2 text-3xl font-black tracking-tighter\">Cris MJ \u2013 El retorno del rey<\/div>\n <div class=\"my-3 flex justify-between text-sm\">\n <div>17 de abril<\/div>\n <\/div>\n <div class=\"text-justify text-sm\">Uno de los artistas m\u00e1s reconocidos de los \u00faltimos a\u00f1os, marcar\u00e1 un hito al ser el primer artista de m\u00fasica urbana chilena que se presentar\u00e1 en el Coliseo Central del Parque Estadio Nacional.<\/div>\n <div class=\"mt-auto flex gap-3\">\n <a href=\"https:\/\/www.puntoticket.com\/cris-mj\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">\n <div>M\u00e1s informaci\u00f3n y tickets<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n\n \n <div class=\"w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative\" data-start-date=\"2026-05-08\" data-end-date=\"2026-05-08\" data-evt-id=\"base-korn\">\n <div class=\"relative w-full aspect-[4\/3] bg-gray-300\">\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/zaUmGyT.png\" alt=\"Korn \u2013 Latin America 2026\" class=\"absolute inset-0 h-full w-full object-cover\" \/>\n <\/div>\n <div class=\"p-4 flex flex-col flex-grow\">\n <div class=\"my-2 text-3xl font-black tracking-tighter\">Korn \u2013 Latin America 2026<\/div>\n <div class=\"my-3 flex justify-between text-sm\">\n <div>8 de mayo<\/div>\n <\/div>\n <div class=\"text-justify text-sm\">La ic\u00f3nica banda de rock metal alternativa se presentar\u00e1 en Chile, en la zona del Parque Estadio Nacional, donde espera convocar a miles de fan\u00e1ticos, quienes han vibrado con su m\u00fasica desde los a\u00f1os ’90 hasta la fecha.<\/div>\n <div class=\"mt-auto flex gap-3\">\n <a href=\"https:\/\/www.ticketmaster.cl\/event\/korn-2026\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">\n <div>M\u00e1s informaci\u00f3n y tickets<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative\" data-start-date=\"2026-10-31\" data-end-date=\"2026-11-01\" data-evt-id=\"base-ironmaiden\">\n <div class=\"relative w-full aspect-[4\/3] bg-gray-300\">\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/WywKTgd.png\" alt=\"Iron Maiden \u2013 Run For Your Lives Tour\" class=\"absolute inset-0 h-full w-full object-cover\" \/>\n <\/div>\n <div class=\"p-4 flex flex-col flex-grow\">\n <div class=\"my-2 text-3xl font-black tracking-tighter\">Iron Maiden \u2013 Run For Your Lives Tour<\/div>\n <div class=\"my-3 flex justify-between text-sm\">\n <div>31 de octubre y 1 de noviembre<\/div>\n <\/div>\n <div class=\"text-justify text-sm\">La banda inglesa regresar\u00e1 al Coliseo Central, reafirmando su estrecho v\u00ednculo con el p\u00fablico chileno, al que ellos han reconocido como uno de sus favoritos a nivel mundial.<\/div>\n <div class=\"mt-auto flex gap-3\">\n <a href=\"https:\/\/www.ticketmaster.cl\/event\/iron-maiden-run-for-your-lives-scl-2026\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">\n <div>M\u00e1s informaci\u00f3n y tickets<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n \n <\/div>\n\n \n <button class=\"admin-dot\" id=\"btnAdminDot\" aria-label=\"Admin\"><\/button>\n\n \n <div class=\"modal-overlay hidden\" id=\"loginModal\">\n <div class=\"w-full max-w-sm mx-4 p-8 bg-white rounded-2xl shadow-2xl relative\" id=\"loginBox\">\n <button id=\"closeLogin\" class=\"absolute top-3 right-4 text-gray-400 hover:text-gray-600 text-xl font-bold\">×<\/button>\n <div class=\"text-center mb-8\">\n <div class=\"w-14 h-14 mx-auto mb-4 rounded-full bg-[#00cec3] flex items-center justify-center\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\/>\n <\/svg>\n <\/div>\n <h1 class=\"text-xl font-bold text-gray-700\">Administraci\u00f3n<\/h1>\n <p class=\"text-gray-400 text-sm mt-1\">Ingresa tus credenciales<\/p>\n <\/div>\n <form id=\"loginForm\" class=\"space-y-5\">\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Usuario<\/label>\n <input type=\"text\" id=\"loginUser\" autocomplete=\"username\"\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Contrase\u00f1a<\/label>\n <input type=\"password\" id=\"loginPass\" autocomplete=\"current-password\"\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\" \/>\n <\/div>\n <p id=\"loginError\" class=\"text-red-500 text-sm text-center hidden\">Usuario o contrase\u00f1a incorrectos<\/p>\n <button type=\"submit\" class=\"w-full py-2.5 bg-[#00cec3] hover:bg-[#00b5ab] text-white font-bold rounded-lg transition\">Ingresar<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay hidden\" id=\"eventModal\">\n <div class=\"w-full max-w-lg mx-4 p-8 bg-white rounded-2xl shadow-2xl relative max-h-[90vh] overflow-y-auto\">\n <button id=\"closeEventModal\" class=\"absolute top-3 right-4 text-gray-400 hover:text-gray-600 text-xl font-bold\">×<\/button>\n <h2 class=\"text-xl font-bold text-gray-700 mb-6\">Crear nuevo evento<\/h2>\n <form id=\"eventForm\" class=\"space-y-4\">\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">T\u00edtulo del evento *<\/label>\n <input type=\"text\" id=\"evtTitle\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\"\n placeholder=\"Ej: Coldplay \u2013 Music of the Spheres\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Fecha a mostrar *<\/label>\n <input type=\"text\" id=\"evtDate\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\"\n placeholder=\"Ej: 14 y 15 de marzo\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Fecha de inicio (para orden cronol\u00f3gico) *<\/label>\n <input type=\"date\" id=\"evtStartDate\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Fecha de t\u00e9rmino (para auto-eliminar) *<\/label>\n <input type=\"date\" id=\"evtEndDate\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">URL de la imagen *<\/label>\n <input type=\"url\" id=\"evtImage\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\"\n placeholder=\"https:\/\/i.imgur.com\/ejemplo.png\" \/>\n <\/div>\n <div id=\"imgPreview\" class=\"hidden\">\n <p class=\"text-xs text-gray-400 mb-1\">Vista previa:<\/p>\n <img id=\"imgPreviewSrc\" class=\"w-32 aspect-[4\/3] object-cover rounded-lg shadow border\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Link de tickets \/ m\u00e1s info *<\/label>\n <input type=\"url\" id=\"evtLink\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\"\n placeholder=\"https:\/\/www.ticketmaster.cl\/...\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Descripci\u00f3n *<\/label>\n <textarea id=\"evtDesc\" rows=\"3\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\"\n placeholder=\"Breve descripci\u00f3n del evento...\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"w-full py-2.5 bg-[#00cec3] hover:bg-[#00b5ab] text-white font-bold rounded-lg transition\">Publicar evento<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <script src=\"https:\/\/unpkg.com\/swiper@8\/swiper-bundle.min.js\"><\/script>\n\n \n <script>\n document.addEventListener('DOMContentLoaded', function() {\n let swiperInstance = null;\n\n \/\/ \u2500\u2500 Token de sesi\u00f3n (se obtiene del servidor al iniciar sesi\u00f3n) \u2500\u2500\n let adminToken = null;\n\n \/\/ \u2500\u2500 API para persistir eventos en WordPress \u2500\u2500\n const API_URL = '\/cartelera-api.php';\n\n \/\/ Eliminar evento del servidor y del DOM\n function deleteEvento(evtId, cardElement) {\n if (!confirm('\u00bfSeguro que quieres eliminar este evento?')) return;\n\n \/\/ Eventos hardcodeados (id empieza con \"base-\"): solo quitar del DOM\n if (evtId.indexOf('base-') === 0) {\n cardElement.remove();\n updateSwiper();\n return;\n }\n\n \/\/ Eventos din\u00e1micos: eliminar del servidor + DOM\n fetch(API_URL + '?id=' + encodeURIComponent(evtId), {\n method: 'DELETE',\n headers: { 'X-Admin-Token': adminToken || '' }\n })\n .then(function(resp) { return resp.json(); })\n .then(function(data) {\n if (data.success) {\n cardElement.remove();\n updateSwiper();\n } else {\n alert('No se pudo eliminar: ' + (data.error || 'Error desconocido'));\n }\n })\n .catch(function(err) {\n console.error(err);\n alert('Error de conexi\u00f3n al intentar eliminar.');\n });\n }\n\n \/\/ Crear tarjeta HTML para un evento din\u00e1mico (con bot\u00f3n eliminar)\n function crearTarjetaEvento(ev) {\n var card = document.createElement('div');\n card.className = 'w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative';\n card.setAttribute('data-start-date', ev.startDate);\n card.setAttribute('data-end-date', ev.endDate);\n card.setAttribute('data-evt-id', ev.id);\n card.innerHTML =\n '<button class=\"btn-delete-evt\" title=\"Eliminar evento\">×<\/button>' +\n '<div class=\"relative w-full aspect-[4\/3] bg-gray-300\">' +\n '<img decoding=\"async\" src=\"' + ev.image + '\" alt=\"' + ev.title + '\" class=\"absolute inset-0 h-full w-full object-cover\" \/>' +\n '<\/div>' +\n '<div class=\"p-4 flex flex-col flex-grow\">' +\n '<div class=\"my-2 text-3xl font-black tracking-tighter\">' + ev.title + '<\/div>' +\n '<div class=\"my-3 flex justify-between text-sm\">' +\n '<div>' + ev.date + '<\/div>' +\n '<\/div>' +\n '<div class=\"text-justify text-sm\">' + ev.description + '<\/div>' +\n '<div class=\"mt-auto flex gap-3\">' +\n '<a href=\"' + ev.link + '\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">' +\n '<div>M\u00e1s informaci\u00f3n y tickets<\/div>' +\n '<\/a>' +\n '<\/div>' +\n '<\/div>';\n \/\/ Listener del bot\u00f3n eliminar\n card.querySelector('.btn-delete-evt').addEventListener('click', function() {\n deleteEvento(ev.id, card);\n });\n return card;\n }\n\n \/\/ Ordenar tarjetas por data-start-date de menor a mayor\n function sortEventsByStartDate() {\n var container = document.getElementById('eventos-container');\n var cards = Array.prototype.slice.call(container.children);\n cards.sort(function(a, b) {\n var dateA = a.getAttribute('data-start-date') || '9999-12-31';\n var dateB = b.getAttribute('data-start-date') || '9999-12-31';\n return dateA.localeCompare(dateB);\n });\n cards.forEach(function(card) {\n container.appendChild(card);\n });\n }\n\n \/\/ Cargar eventos nuevos desde el servidor y agregarlos al DOM\n function loadNewEventsFromServer() {\n fetch(API_URL)\n .then(function(resp) { return resp.ok ? resp.json() : []; })\n .then(function(eventos) {\n var now = new Date();\n var container = document.getElementById('eventos-container');\n eventos.forEach(function(ev) {\n \/\/ No agregar si ya expir\u00f3\n if (now > new Date(ev.endDate + 'T23:59:59')) return;\n \/\/ No agregar si ya existe en el DOM (por ID)\n if (container.querySelector('[data-evt-id=\"' + ev.id + '\"]')) return;\n container.appendChild(crearTarjetaEvento(ev));\n });\n \/\/ Ordenar todos los eventos cronol\u00f3gicamente y actualizar carrusel\n sortEventsByStartDate();\n updateSwiper();\n })\n .catch(function(err) {\n console.log('API no disponible, solo se muestran eventos del HTML');\n });\n }\n\n \/\/ Funci\u00f3n para inicializar el carrusel con todos los eventos disponibles\n function initializeSwiper() {\n const visibleEvents = document.querySelectorAll('#eventos-container > div');\n const swiperWrapper = document.querySelector('.swiper-wrapper');\n \n \/\/ Limpiar slides existentes\n swiperWrapper.innerHTML = '';\n\n \/\/ Crear slides para cada evento visible\n visibleEvents.forEach(event => {\n const img = event.querySelector('img');\n if (img) {\n const slide = document.createElement('div');\n slide.className = 'swiper-slide';\n \n const slideImg = document.createElement('img');\n slideImg.src = img.src;\n slideImg.alt = img.alt;\n slideImg.className = 'rounded-lg shadow-lg';\n \n slide.appendChild(slideImg);\n swiperWrapper.appendChild(slide);\n }\n });\n\n \/\/ Inicializar Swiper\n if (visibleEvents.length > 0) {\n swiperInstance = new Swiper('.mySwiper', {\n loop: true,\n autoplay: {\n delay: 3000,\n disableOnInteraction: false,\n },\n speed: 500,\n navigation: {\n nextEl: '.swiper-button-next',\n prevEl: '.swiper-button-prev',\n },\n });\n }\n }\n\n \/\/ Funci\u00f3n para eliminar eventos expirados\n function removeExpiredEvents() {\n const now = new Date();\n const eventCards = document.querySelectorAll('[data-end-date]');\n let removedEvents = false;\n\n eventCards.forEach(card => {\n const endDateString = card.getAttribute('data-end-date');\n const endDate = new Date(endDateString + 'T23:59:59');\n \n if (now > endDate) {\n card.remove();\n removedEvents = true;\n console.log(`Evento eliminado: termin\u00f3 el ${endDateString}`);\n }\n });\n\n if (removedEvents) {\n updateSwiper();\n }\n }\n\n \/\/ Funci\u00f3n para actualizar el carrusel Swiper\n function updateSwiper() {\n if (swiperInstance) {\n swiperInstance.destroy(true, true);\n }\n initializeSwiper();\n }\n\n \/\/ Funci\u00f3n para programar verificaci\u00f3n diaria\n function scheduleNextCheck() {\n const now = new Date();\n const tomorrow = new Date(now);\n tomorrow.setDate(tomorrow.getDate() + 1);\n tomorrow.setHours(0, 0, 0, 0);\n \n const msUntilMidnight = tomorrow - now;\n \n setTimeout(() => {\n removeExpiredEvents();\n scheduleNextCheck();\n }, msUntilMidnight);\n \n console.log(`Pr\u00f3xima verificaci\u00f3n de eventos programada en ${Math.round(msUntilMidnight \/ (1000 * 60 * 60))} horas`);\n }\n\n \/\/ \u2500\u2500 LOGIN: puntito \u2192 modal \u2500\u2500\n document.getElementById('btnAdminDot').addEventListener('click', function() {\n document.getElementById('loginModal').classList.remove('hidden');\n document.getElementById('loginUser').focus();\n });\n\n document.getElementById('closeLogin').addEventListener('click', function() {\n document.getElementById('loginModal').classList.add('hidden');\n document.getElementById('loginError').classList.add('hidden');\n document.getElementById('loginForm').reset();\n });\n\n document.getElementById('loginModal').addEventListener('click', function(e) {\n if (e.target === this) {\n this.classList.add('hidden');\n document.getElementById('loginError').classList.add('hidden');\n document.getElementById('loginForm').reset();\n }\n });\n\n document.getElementById('loginForm').addEventListener('submit', function(e) {\n e.preventDefault();\n var u = document.getElementById('loginUser').value.trim();\n var p = document.getElementById('loginPass').value;\n\n \/\/ Validar credenciales en el SERVIDOR (nunca en el navegador)\n fetch(API_URL + '?action=login', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ user: u, pass: p })\n })\n .then(function(resp) { return resp.json(); })\n .then(function(data) {\n if (data.success && data.token) {\n adminToken = data.token;\n document.getElementById('loginModal').classList.add('hidden');\n document.getElementById('loginForm').reset();\n document.getElementById('loginError').classList.add('hidden');\n \/\/ Activar modo admin (muestra botones eliminar)\n var container = document.getElementById('eventos-container');\n container.classList.add('admin-mode');\n\n \/\/ Inyectar bot\u00f3n \u00d7 en TODAS las tarjetas que no lo tengan a\u00fan\n var allCards = container.querySelectorAll('[data-evt-id]');\n allCards.forEach(function(card) {\n if (!card.querySelector('.btn-delete-evt')) {\n var btn = document.createElement('button');\n btn.className = 'btn-delete-evt';\n btn.title = 'Eliminar evento';\n btn.innerHTML = '×';\n btn.addEventListener('click', function() {\n var evtId = card.getAttribute('data-evt-id');\n deleteEvento(evtId, card);\n });\n card.insertBefore(btn, card.firstChild);\n }\n });\n\n \/\/ Preguntar qu\u00e9 quiere hacer\n var accion = confirm('\u00bfQuieres CREAR un nuevo evento?\\n\\nAcepta \u2192 Crear evento\\nCancela \u2192 Gestionar (eliminar eventos existentes)');\n if (accion) {\n document.getElementById('eventModal').classList.remove('hidden');\n }\n } else {\n document.getElementById('loginError').classList.remove('hidden');\n document.getElementById('loginBox').classList.add('shake');\n setTimeout(function() {\n document.getElementById('loginBox').classList.remove('shake');\n }, 400);\n }\n })\n .catch(function(err) {\n console.error(err);\n alert('No se pudo conectar con el servidor.');\n });\n });\n\n \/\/ \u2500\u2500 FORMULARIO NUEVO EVENTO \u2500\u2500\n document.getElementById('closeEventModal').addEventListener('click', function() {\n document.getElementById('eventModal').classList.add('hidden');\n document.getElementById('eventForm').reset();\n document.getElementById('imgPreview').classList.add('hidden');\n });\n\n document.getElementById('eventModal').addEventListener('click', function(e) {\n if (e.target === this) {\n this.classList.add('hidden');\n document.getElementById('eventForm').reset();\n document.getElementById('imgPreview').classList.add('hidden');\n }\n });\n\n \/\/ Vista previa de imagen\n document.getElementById('evtImage').addEventListener('input', function() {\n var url = this.value.trim();\n var preview = document.getElementById('imgPreview');\n var img = document.getElementById('imgPreviewSrc');\n if (url && (url.startsWith('http:\/\/') || url.startsWith('https:\/\/'))) {\n img.src = url;\n preview.classList.remove('hidden');\n } else {\n preview.classList.add('hidden');\n }\n });\n\n \/\/ Publicar evento: guarda en servidor y agrega al DOM\n document.getElementById('eventForm').addEventListener('submit', function(e) {\n e.preventDefault();\n\n var title = document.getElementById('evtTitle').value.trim();\n var date = document.getElementById('evtDate').value.trim();\n var startDate = document.getElementById('evtStartDate').value;\n var endDate = document.getElementById('evtEndDate').value;\n var image = document.getElementById('evtImage').value.trim();\n var link = document.getElementById('evtLink').value.trim();\n var desc = document.getElementById('evtDesc').value.trim();\n\n var evtData = {\n id: 'evt-' + Date.now(),\n title: title,\n date: date,\n startDate: startDate,\n endDate: endDate,\n image: image,\n description: desc,\n link: link\n };\n\n \/\/ Guardar en WordPress v\u00eda API (con token de autenticaci\u00f3n)\n fetch(API_URL, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'X-Admin-Token': adminToken || ''\n },\n body: JSON.stringify(evtData)\n })\n .then(function(resp) { return resp.json(); })\n .then(function(data) {\n if (data.success) {\n \/\/ Crear la tarjeta y agregarla al DOM\n document.getElementById('eventos-container').appendChild(crearTarjetaEvento(evtData));\n sortEventsByStartDate();\n updateSwiper();\n\n \/\/ Cerrar modal y limpiar\n document.getElementById('eventModal').classList.add('hidden');\n document.getElementById('eventForm').reset();\n document.getElementById('imgPreview').classList.add('hidden');\n\n alert('\u00a1Evento publicado exitosamente! Todos los visitantes lo ver\u00e1n.');\n } else {\n alert('Error al guardar. Intenta de nuevo.');\n }\n })\n .catch(function(err) {\n console.error(err);\n alert('No se pudo conectar con el servidor. Verifica que el snippet PHP est\u00e9 activo.');\n });\n });\n\n \/\/ INICIALIZAR TODO AL CARGAR LA P\u00c1GINA\n removeExpiredEvents();\n \n if (document.querySelector('.swiper-wrapper').children.length === 0) {\n initializeSwiper();\n }\n\n \/\/ Cargar eventos nuevos desde el servidor (los que se agregaron por el admin)\n loadNewEventsFromServer();\n \n scheduleNextCheck();\n setInterval(removeExpiredEvents, 3600000);\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cartelera de Eventos – Parque Estadio Nacional Cartelera \u00a1Bienvenidos! Conoce los eventos que est\u00e1n oficializados en el Parque Estadio Nacional ACDC \u2013 Power Up Tour 11 y 15 de marzo La m\u00edtica banda brit\u00e1nica australiana promete remecer el Parque Estadio Nacional, con un espect\u00e1culo donde repasar\u00e1 gran parte de los \u00e9xitos, que la han llevado […]<\/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-207","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"\/index.php?rest_route=\/wp\/v2\/pages\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=207"}],"version-history":[{"count":96,"href":"\/index.php?rest_route=\/wp\/v2\/pages\/207\/revisions"}],"predecessor-version":[{"id":1731,"href":"\/index.php?rest_route=\/wp\/v2\/pages\/207\/revisions\/1731"}],"wp:attachment":[{"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":207,"date":"2024-12-03T18:51:15","date_gmt":"2024-12-03T18:51:15","guid":{"rendered":"\/?page_id=207"},"modified":"2026-03-23T19:36:13","modified_gmt":"2026-03-23T19:36:13","slug":"cartelera","status":"publish","type":"page","link":"\/?page_id=207","title":{"rendered":"Cartelera"},"content":{"rendered":"\n\n\n\n\n\n \n \n Cartelera de Eventos – Parque Estadio Nacional<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper@8\/swiper-bundle.min.css\" \/>\n <style>\n \/* Optional: Customize Swiper navigation buttons *\/\n .swiper-button-prev,\n .swiper-button-next {\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n width: 60px;\n height: 60px;\n z-index: 20;\n }\n .swiper-button-prev {\n background-image: url('\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-54.png');\n }\n .swiper-button-next {\n background-image: url('\/wp-content\/uploads\/2025\/02\/Diseno-sin-titulo-53.png');\n }\n .swiper-button-prev::after,\n .swiper-button-next::after {\n display: none;\n }\n .swiper-pagination-bullet-active {\n background-color: rgba(0, 0, 0, 1);\n }\n .swiper-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n aspect-ratio: 4\/3;\n }\n \n \/* Contenedor principal de cartelera *\/\n .cartelera-container {\n width: 100% !important;\n max-width: none !important;\n display: flex;\n position: relative;\n overflow: visible !important;\n margin: 0 !important;\n margin-top: 0 !important;\n padding-top: 0 !important;\n margin-bottom: 6rem !important;\n }\n \n \/* Secci\u00f3n de texto izquierda *\/\n .text-section {\n width: 50%;\n padding-left: 2rem;\n padding-top: 3rem;\n padding-bottom: 3rem;\n z-index: 5;\n }\n \n \/* Contenedor para la mancha y slider *\/\n .visual-section {\n width: 50%;\n position: relative;\n overflow: visible !important;\n height: 100%;\n min-height: 400px;\n }\n \n \/* Mancha turquesa *\/\n .mancha-bg {\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n min-height: 400px;\n object-fit: cover;\n min-width: 100% !important;\n max-width: none !important;\n z-index: 1;\n overflow: visible !important;\n }\n \n \/* Posicionamos el slider dentro de la mancha *\/\n .swiper-container {\n position: relative;\n z-index: 10;\n width: 70%;\n max-width: 555px;\n aspect-ratio: 4\/3;\n margin: 0 auto;\n padding: 3rem 0;\n }\n \n .swiper, .swiper-wrapper, .swiper-slide {\n height: 100%;\n aspect-ratio: 4\/3;\n }\n \n \/* Contenedor del t\u00edtulo *\/\n .titulo-container {\n position: relative;\n z-index: 5;\n width: 100%;\n padding-top: 3rem;\n clear: both;\n }\n\n \/* Estilo para cr\u00e9ditos *\/\n .credito {\n position: absolute;\n bottom: 8px;\n right: 8px;\n background-color: rgba(0, 0, 0, 0.6);\n color: white;\n padding: 2px 6px;\n font-size: 10px;\n border-radius: 3px;\n }\n \n \/* Media queries para responsive *\/\n @media (max-width: 768px) {\n .cartelera-container {\n flex-direction: column;\n margin-bottom: 8rem !important;\n }\n \n .text-section,\n .visual-section {\n width: 100%;\n }\n \n .text-section {\n padding: 2rem 1rem;\n text-align: center;\n }\n \n .visual-section {\n min-height: 350px;\n }\n \n .mancha-bg {\n width: 100%;\n height: 100%;\n }\n \n .swiper-container {\n width: 96%;\n margin: 0 auto;\n max-width: none;\n padding: 2rem 0;\n }\n \n .titulo-container {\n padding-top: 4rem;\n }\n }\n\n \/* \u2500\u2500 Estilos del puntito admin y modales \u2500\u2500 *\/\n .admin-dot {\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #ccc;\n margin: 3rem auto 1rem auto;\n opacity: 0.3;\n cursor: default;\n border: none;\n transition: opacity 0.3s;\n }\n .admin-dot:hover { opacity: 0.6; }\n .btn-delete-evt {\n position: absolute; top: 8px; right: 8px;\n width: 28px; height: 28px;\n background: rgba(220,38,38,0.85);\n color: #fff; border: none; border-radius: 50%;\n font-size: 16px; font-weight: bold;\n cursor: pointer; z-index: 30;\n display: none; \/* se muestra solo en modo admin *\/\n align-items: center; justify-content: center;\n line-height: 1;\n }\n .btn-delete-evt:hover { background: #dc2626; }\n .admin-mode .btn-delete-evt { display: flex; }\n .modal-overlay {\n position: fixed; inset: 0;\n background: rgba(0,0,0,0.45);\n z-index: 9999;\n display: flex; align-items: center; justify-content: center;\n }\n .modal-overlay.hidden { display: none; }\n .shake { animation: shake 0.4s ease; }\n @keyframes shake {\n 0%,100% { transform: translateX(0); }\n 20%,60% { transform: translateX(-8px); }\n 40%,80% { transform: translateX(8px); }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"cartelera-container\">\n \n <div class=\"text-section\">\n <h2 class=\"text-[#00cec3] text-5xl font-bold mb-2\">Cartelera<\/h2>\n <h3 class=\"text-gray-500 text-4xl font-bold mb-4\">\u00a1Bienvenidos!<\/h3>\n <p class=\"text-gray-500\">Conoce los eventos que est\u00e1n oficializados en el Parque Estadio Nacional<\/p>\n <\/div>\n \n \n <div class=\"visual-section\">\n \n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/C8ngCCQ.png\" alt=\"Mancha de fondo\" class=\"mancha-bg\" \/>\n \n \n <div class=\"swiper-container\">\n <div class=\"swiper mySwiper\">\n <div class=\"swiper-wrapper\">\n \n <\/div>\n \n <div class=\"swiper-button-prev\"><\/div>\n <div class=\"swiper-button-next\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"titulo-container\">\n <h2 class=\"text-center font-bold text-2xl mb-6 w-full\"><\/h2>\n <\/div>\n\n <div class=\"flex flex-wrap justify-center gap-5 max-w-none\" id=\"eventos-container\">\n\n \n <div class=\"w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative\" data-start-date=\"2026-03-11\" data-end-date=\"2026-03-15\" data-evt-id=\"base-acdc\">\n <div class=\"relative w-full aspect-[4\/3] bg-gray-300\">\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/eAcNqyn.png\" alt=\"ACDC \u2013 Power Up Tour\" class=\"absolute inset-0 h-full w-full object-cover\" \/>\n <\/div>\n <div class=\"p-4 flex flex-col flex-grow\">\n <div class=\"my-2 text-3xl font-black tracking-tighter\">ACDC \u2013 Power Up Tour<\/div>\n <div class=\"my-3 flex justify-between text-sm\">\n <div>11 y 15 de marzo<\/div>\n <\/div>\n <div class=\"text-justify text-sm\">La m\u00edtica banda brit\u00e1nica australiana promete remecer el Parque Estadio Nacional, con un espect\u00e1culo donde repasar\u00e1 gran parte de los \u00e9xitos, que la han llevado a ser una de las bandas m\u00e1s influyentes del rock.<\/div>\n <div class=\"mt-auto flex gap-3\">\n <a href=\"https:\/\/www.ticketmaster.cl\/event\/acdc-2026-scl\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">\n <div>M\u00e1s informaci\u00f3n y tickets<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative\" data-start-date=\"2026-03-09\" data-end-date=\"2026-03-09\" data-evt-id=\"base-udechile\">\n <div class=\"relative w-full aspect-[4\/3] bg-gray-300\">\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/ZxGDoBx.png\" alt=\"U. de Chile vs. U. de Concepci\u00f3n\" class=\"absolute inset-0 h-full w-full object-cover\" \/>\n <\/div>\n <div class=\"p-4 flex flex-col flex-grow\">\n <div class=\"my-2 text-3xl font-black tracking-tighter\">U. de Chile vs. U. de Concepci\u00f3n<\/div>\n <div class=\"my-3 flex justify-between text-sm\">\n <div>9 de marzo<\/div>\n <\/div>\n <div class=\"text-justify text-sm\">Los azules recibir\u00e1n al “Campanil”, en un duelo v\u00e1lido por la sexta fecha del Campeonato Nacional, en el Coliseo Central.<\/div>\n <div class=\"mt-auto flex gap-3\">\n <a href=\"https:\/\/www.udechile.cl\/\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">\n <div>M\u00e1s informaci\u00f3n y tickets<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative\" data-start-date=\"2026-04-17\" data-end-date=\"2026-04-17\" data-evt-id=\"base-crismj\">\n <div class=\"relative w-full aspect-[4\/3] bg-gray-300\">\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/jA7H0vx.png\" alt=\"Cris MJ \u2013 El retorno del rey\" class=\"absolute inset-0 h-full w-full object-cover\" \/>\n <\/div>\n <div class=\"p-4 flex flex-col flex-grow\">\n <div class=\"my-2 text-3xl font-black tracking-tighter\">Cris MJ \u2013 El retorno del rey<\/div>\n <div class=\"my-3 flex justify-between text-sm\">\n <div>17 de abril<\/div>\n <\/div>\n <div class=\"text-justify text-sm\">Uno de los artistas m\u00e1s reconocidos de los \u00faltimos a\u00f1os, marcar\u00e1 un hito al ser el primer artista de m\u00fasica urbana chilena que se presentar\u00e1 en el Coliseo Central del Parque Estadio Nacional.<\/div>\n <div class=\"mt-auto flex gap-3\">\n <a href=\"https:\/\/www.puntoticket.com\/cris-mj\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">\n <div>M\u00e1s informaci\u00f3n y tickets<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n\n \n <div class=\"w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative\" data-start-date=\"2026-05-08\" data-end-date=\"2026-05-08\" data-evt-id=\"base-korn\">\n <div class=\"relative w-full aspect-[4\/3] bg-gray-300\">\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/zaUmGyT.png\" alt=\"Korn \u2013 Latin America 2026\" class=\"absolute inset-0 h-full w-full object-cover\" \/>\n <\/div>\n <div class=\"p-4 flex flex-col flex-grow\">\n <div class=\"my-2 text-3xl font-black tracking-tighter\">Korn \u2013 Latin America 2026<\/div>\n <div class=\"my-3 flex justify-between text-sm\">\n <div>8 de mayo<\/div>\n <\/div>\n <div class=\"text-justify text-sm\">La ic\u00f3nica banda de rock metal alternativa se presentar\u00e1 en Chile, en la zona del Parque Estadio Nacional, donde espera convocar a miles de fan\u00e1ticos, quienes han vibrado con su m\u00fasica desde los a\u00f1os ’90 hasta la fecha.<\/div>\n <div class=\"mt-auto flex gap-3\">\n <a href=\"https:\/\/www.ticketmaster.cl\/event\/korn-2026\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">\n <div>M\u00e1s informaci\u00f3n y tickets<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative\" data-start-date=\"2026-10-31\" data-end-date=\"2026-11-01\" data-evt-id=\"base-ironmaiden\">\n <div class=\"relative w-full aspect-[4\/3] bg-gray-300\">\n <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/WywKTgd.png\" alt=\"Iron Maiden \u2013 Run For Your Lives Tour\" class=\"absolute inset-0 h-full w-full object-cover\" \/>\n <\/div>\n <div class=\"p-4 flex flex-col flex-grow\">\n <div class=\"my-2 text-3xl font-black tracking-tighter\">Iron Maiden \u2013 Run For Your Lives Tour<\/div>\n <div class=\"my-3 flex justify-between text-sm\">\n <div>31 de octubre y 1 de noviembre<\/div>\n <\/div>\n <div class=\"text-justify text-sm\">La banda inglesa regresar\u00e1 al Coliseo Central, reafirmando su estrecho v\u00ednculo con el p\u00fablico chileno, al que ellos han reconocido como uno de sus favoritos a nivel mundial.<\/div>\n <div class=\"mt-auto flex gap-3\">\n <a href=\"https:\/\/www.ticketmaster.cl\/event\/iron-maiden-run-for-your-lives-scl-2026\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">\n <div>M\u00e1s informaci\u00f3n y tickets<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n \n <\/div>\n\n \n <button class=\"admin-dot\" id=\"btnAdminDot\" aria-label=\"Admin\"><\/button>\n\n \n <div class=\"modal-overlay hidden\" id=\"loginModal\">\n <div class=\"w-full max-w-sm mx-4 p-8 bg-white rounded-2xl shadow-2xl relative\" id=\"loginBox\">\n <button id=\"closeLogin\" class=\"absolute top-3 right-4 text-gray-400 hover:text-gray-600 text-xl font-bold\">×<\/button>\n <div class=\"text-center mb-8\">\n <div class=\"w-14 h-14 mx-auto mb-4 rounded-full bg-[#00cec3] flex items-center justify-center\">\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\/>\n <\/svg>\n <\/div>\n <h1 class=\"text-xl font-bold text-gray-700\">Administraci\u00f3n<\/h1>\n <p class=\"text-gray-400 text-sm mt-1\">Ingresa tus credenciales<\/p>\n <\/div>\n <form id=\"loginForm\" class=\"space-y-5\">\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Usuario<\/label>\n <input type=\"text\" id=\"loginUser\" autocomplete=\"username\"\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Contrase\u00f1a<\/label>\n <input type=\"password\" id=\"loginPass\" autocomplete=\"current-password\"\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\" \/>\n <\/div>\n <p id=\"loginError\" class=\"text-red-500 text-sm text-center hidden\">Usuario o contrase\u00f1a incorrectos<\/p>\n <button type=\"submit\" class=\"w-full py-2.5 bg-[#00cec3] hover:bg-[#00b5ab] text-white font-bold rounded-lg transition\">Ingresar<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay hidden\" id=\"eventModal\">\n <div class=\"w-full max-w-lg mx-4 p-8 bg-white rounded-2xl shadow-2xl relative max-h-[90vh] overflow-y-auto\">\n <button id=\"closeEventModal\" class=\"absolute top-3 right-4 text-gray-400 hover:text-gray-600 text-xl font-bold\">×<\/button>\n <h2 class=\"text-xl font-bold text-gray-700 mb-6\">Crear nuevo evento<\/h2>\n <form id=\"eventForm\" class=\"space-y-4\">\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">T\u00edtulo del evento *<\/label>\n <input type=\"text\" id=\"evtTitle\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\"\n placeholder=\"Ej: Coldplay \u2013 Music of the Spheres\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Fecha a mostrar *<\/label>\n <input type=\"text\" id=\"evtDate\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\"\n placeholder=\"Ej: 14 y 15 de marzo\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Fecha de inicio (para orden cronol\u00f3gico) *<\/label>\n <input type=\"date\" id=\"evtStartDate\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Fecha de t\u00e9rmino (para auto-eliminar) *<\/label>\n <input type=\"date\" id=\"evtEndDate\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">URL de la imagen *<\/label>\n <input type=\"url\" id=\"evtImage\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\"\n placeholder=\"https:\/\/i.imgur.com\/ejemplo.png\" \/>\n <\/div>\n <div id=\"imgPreview\" class=\"hidden\">\n <p class=\"text-xs text-gray-400 mb-1\">Vista previa:<\/p>\n <img id=\"imgPreviewSrc\" class=\"w-32 aspect-[4\/3] object-cover rounded-lg shadow border\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Link de tickets \/ m\u00e1s info *<\/label>\n <input type=\"url\" id=\"evtLink\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\"\n placeholder=\"https:\/\/www.ticketmaster.cl\/...\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">Descripci\u00f3n *<\/label>\n <textarea id=\"evtDesc\" rows=\"3\" required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00cec3]\"\n placeholder=\"Breve descripci\u00f3n del evento...\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"w-full py-2.5 bg-[#00cec3] hover:bg-[#00b5ab] text-white font-bold rounded-lg transition\">Publicar evento<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <script src=\"https:\/\/unpkg.com\/swiper@8\/swiper-bundle.min.js\"><\/script>\n\n \n <script>\n document.addEventListener('DOMContentLoaded', function() {\n let swiperInstance = null;\n\n \/\/ \u2500\u2500 Token de sesi\u00f3n (se obtiene del servidor al iniciar sesi\u00f3n) \u2500\u2500\n let adminToken = null;\n\n \/\/ \u2500\u2500 API para persistir eventos en WordPress \u2500\u2500\n const API_URL = '\/cartelera-api.php';\n\n \/\/ Eliminar evento del servidor y del DOM\n function deleteEvento(evtId, cardElement) {\n if (!confirm('\u00bfSeguro que quieres eliminar este evento?')) return;\n\n \/\/ Eventos hardcodeados (id empieza con \"base-\"): solo quitar del DOM\n if (evtId.indexOf('base-') === 0) {\n cardElement.remove();\n updateSwiper();\n return;\n }\n\n \/\/ Eventos din\u00e1micos: eliminar del servidor + DOM\n fetch(API_URL + '?id=' + encodeURIComponent(evtId), {\n method: 'DELETE',\n headers: { 'X-Admin-Token': adminToken || '' }\n })\n .then(function(resp) { return resp.json(); })\n .then(function(data) {\n if (data.success) {\n cardElement.remove();\n updateSwiper();\n } else {\n alert('No se pudo eliminar: ' + (data.error || 'Error desconocido'));\n }\n })\n .catch(function(err) {\n console.error(err);\n alert('Error de conexi\u00f3n al intentar eliminar.');\n });\n }\n\n \/\/ Crear tarjeta HTML para un evento din\u00e1mico (con bot\u00f3n eliminar)\n function crearTarjetaEvento(ev) {\n var card = document.createElement('div');\n card.className = 'w-full max-w-sm bg-[#00cec3] text-white shadow-2xl flex flex-col relative';\n card.setAttribute('data-start-date', ev.startDate);\n card.setAttribute('data-end-date', ev.endDate);\n card.setAttribute('data-evt-id', ev.id);\n card.innerHTML =\n '<button class=\"btn-delete-evt\" title=\"Eliminar evento\">×<\/button>' +\n '<div class=\"relative w-full aspect-[4\/3] bg-gray-300\">' +\n '<img decoding=\"async\" src=\"' + ev.image + '\" alt=\"' + ev.title + '\" class=\"absolute inset-0 h-full w-full object-cover\" \/>' +\n '<\/div>' +\n '<div class=\"p-4 flex flex-col flex-grow\">' +\n '<div class=\"my-2 text-3xl font-black tracking-tighter\">' + ev.title + '<\/div>' +\n '<div class=\"my-3 flex justify-between text-sm\">' +\n '<div>' + ev.date + '<\/div>' +\n '<\/div>' +\n '<div class=\"text-justify text-sm\">' + ev.description + '<\/div>' +\n '<div class=\"mt-auto flex gap-3\">' +\n '<a href=\"' + ev.link + '\" target=\"_blank\" class=\"w-full cursor-pointer bg-white p-3 text-center font-bold uppercase text-[#019c9c]\">' +\n '<div>M\u00e1s informaci\u00f3n y tickets<\/div>' +\n '<\/a>' +\n '<\/div>' +\n '<\/div>';\n \/\/ Listener del bot\u00f3n eliminar\n card.querySelector('.btn-delete-evt').addEventListener('click', function() {\n deleteEvento(ev.id, card);\n });\n return card;\n }\n\n \/\/ Ordenar tarjetas por data-start-date de menor a mayor\n function sortEventsByStartDate() {\n var container = document.getElementById('eventos-container');\n var cards = Array.prototype.slice.call(container.children);\n cards.sort(function(a, b) {\n var dateA = a.getAttribute('data-start-date') || '9999-12-31';\n var dateB = b.getAttribute('data-start-date') || '9999-12-31';\n return dateA.localeCompare(dateB);\n });\n cards.forEach(function(card) {\n container.appendChild(card);\n });\n }\n\n \/\/ Cargar eventos nuevos desde el servidor y agregarlos al DOM\n function loadNewEventsFromServer() {\n fetch(API_URL)\n .then(function(resp) { return resp.ok ? resp.json() : []; })\n .then(function(eventos) {\n var now = new Date();\n var container = document.getElementById('eventos-container');\n eventos.forEach(function(ev) {\n \/\/ No agregar si ya expir\u00f3\n if (now > new Date(ev.endDate + 'T23:59:59')) return;\n \/\/ No agregar si ya existe en el DOM (por ID)\n if (container.querySelector('[data-evt-id=\"' + ev.id + '\"]')) return;\n container.appendChild(crearTarjetaEvento(ev));\n });\n \/\/ Ordenar todos los eventos cronol\u00f3gicamente y actualizar carrusel\n sortEventsByStartDate();\n updateSwiper();\n })\n .catch(function(err) {\n console.log('API no disponible, solo se muestran eventos del HTML');\n });\n }\n\n \/\/ Funci\u00f3n para inicializar el carrusel con todos los eventos disponibles\n function initializeSwiper() {\n const visibleEvents = document.querySelectorAll('#eventos-container > div');\n const swiperWrapper = document.querySelector('.swiper-wrapper');\n \n \/\/ Limpiar slides existentes\n swiperWrapper.innerHTML = '';\n\n \/\/ Crear slides para cada evento visible\n visibleEvents.forEach(event => {\n const img = event.querySelector('img');\n if (img) {\n const slide = document.createElement('div');\n slide.className = 'swiper-slide';\n \n const slideImg = document.createElement('img');\n slideImg.src = img.src;\n slideImg.alt = img.alt;\n slideImg.className = 'rounded-lg shadow-lg';\n \n slide.appendChild(slideImg);\n swiperWrapper.appendChild(slide);\n }\n });\n\n \/\/ Inicializar Swiper\n if (visibleEvents.length > 0) {\n swiperInstance = new Swiper('.mySwiper', {\n loop: true,\n autoplay: {\n delay: 3000,\n disableOnInteraction: false,\n },\n speed: 500,\n navigation: {\n nextEl: '.swiper-button-next',\n prevEl: '.swiper-button-prev',\n },\n });\n }\n }\n\n \/\/ Funci\u00f3n para eliminar eventos expirados\n function removeExpiredEvents() {\n const now = new Date();\n const eventCards = document.querySelectorAll('[data-end-date]');\n let removedEvents = false;\n\n eventCards.forEach(card => {\n const endDateString = card.getAttribute('data-end-date');\n const endDate = new Date(endDateString + 'T23:59:59');\n \n if (now > endDate) {\n card.remove();\n removedEvents = true;\n console.log(`Evento eliminado: termin\u00f3 el ${endDateString}`);\n }\n });\n\n if (removedEvents) {\n updateSwiper();\n }\n }\n\n \/\/ Funci\u00f3n para actualizar el carrusel Swiper\n function updateSwiper() {\n if (swiperInstance) {\n swiperInstance.destroy(true, true);\n }\n initializeSwiper();\n }\n\n \/\/ Funci\u00f3n para programar verificaci\u00f3n diaria\n function scheduleNextCheck() {\n const now = new Date();\n const tomorrow = new Date(now);\n tomorrow.setDate(tomorrow.getDate() + 1);\n tomorrow.setHours(0, 0, 0, 0);\n \n const msUntilMidnight = tomorrow - now;\n \n setTimeout(() => {\n removeExpiredEvents();\n scheduleNextCheck();\n }, msUntilMidnight);\n \n console.log(`Pr\u00f3xima verificaci\u00f3n de eventos programada en ${Math.round(msUntilMidnight \/ (1000 * 60 * 60))} horas`);\n }\n\n \/\/ \u2500\u2500 LOGIN: puntito \u2192 modal \u2500\u2500\n document.getElementById('btnAdminDot').addEventListener('click', function() {\n document.getElementById('loginModal').classList.remove('hidden');\n document.getElementById('loginUser').focus();\n });\n\n document.getElementById('closeLogin').addEventListener('click', function() {\n document.getElementById('loginModal').classList.add('hidden');\n document.getElementById('loginError').classList.add('hidden');\n document.getElementById('loginForm').reset();\n });\n\n document.getElementById('loginModal').addEventListener('click', function(e) {\n if (e.target === this) {\n this.classList.add('hidden');\n document.getElementById('loginError').classList.add('hidden');\n document.getElementById('loginForm').reset();\n }\n });\n\n document.getElementById('loginForm').addEventListener('submit', function(e) {\n e.preventDefault();\n var u = document.getElementById('loginUser').value.trim();\n var p = document.getElementById('loginPass').value;\n\n \/\/ Validar credenciales en el SERVIDOR (nunca en el navegador)\n fetch(API_URL + '?action=login', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ user: u, pass: p })\n })\n .then(function(resp) { return resp.json(); })\n .then(function(data) {\n if (data.success && data.token) {\n adminToken = data.token;\n document.getElementById('loginModal').classList.add('hidden');\n document.getElementById('loginForm').reset();\n document.getElementById('loginError').classList.add('hidden');\n \/\/ Activar modo admin (muestra botones eliminar)\n var container = document.getElementById('eventos-container');\n container.classList.add('admin-mode');\n\n \/\/ Inyectar bot\u00f3n \u00d7 en TODAS las tarjetas que no lo tengan a\u00fan\n var allCards = container.querySelectorAll('[data-evt-id]');\n allCards.forEach(function(card) {\n if (!card.querySelector('.btn-delete-evt')) {\n var btn = document.createElement('button');\n btn.className = 'btn-delete-evt';\n btn.title = 'Eliminar evento';\n btn.innerHTML = '×';\n btn.addEventListener('click', function() {\n var evtId = card.getAttribute('data-evt-id');\n deleteEvento(evtId, card);\n });\n card.insertBefore(btn, card.firstChild);\n }\n });\n\n \/\/ Preguntar qu\u00e9 quiere hacer\n var accion = confirm('\u00bfQuieres CREAR un nuevo evento?\\n\\nAcepta \u2192 Crear evento\\nCancela \u2192 Gestionar (eliminar eventos existentes)');\n if (accion) {\n document.getElementById('eventModal').classList.remove('hidden');\n }\n } else {\n document.getElementById('loginError').classList.remove('hidden');\n document.getElementById('loginBox').classList.add('shake');\n setTimeout(function() {\n document.getElementById('loginBox').classList.remove('shake');\n }, 400);\n }\n })\n .catch(function(err) {\n console.error(err);\n alert('No se pudo conectar con el servidor.');\n });\n });\n\n \/\/ \u2500\u2500 FORMULARIO NUEVO EVENTO \u2500\u2500\n document.getElementById('closeEventModal').addEventListener('click', function() {\n document.getElementById('eventModal').classList.add('hidden');\n document.getElementById('eventForm').reset();\n document.getElementById('imgPreview').classList.add('hidden');\n });\n\n document.getElementById('eventModal').addEventListener('click', function(e) {\n if (e.target === this) {\n this.classList.add('hidden');\n document.getElementById('eventForm').reset();\n document.getElementById('imgPreview').classList.add('hidden');\n }\n });\n\n \/\/ Vista previa de imagen\n document.getElementById('evtImage').addEventListener('input', function() {\n var url = this.value.trim();\n var preview = document.getElementById('imgPreview');\n var img = document.getElementById('imgPreviewSrc');\n if (url && (url.startsWith('http:\/\/') || url.startsWith('https:\/\/'))) {\n img.src = url;\n preview.classList.remove('hidden');\n } else {\n preview.classList.add('hidden');\n }\n });\n\n \/\/ Publicar evento: guarda en servidor y agrega al DOM\n document.getElementById('eventForm').addEventListener('submit', function(e) {\n e.preventDefault();\n\n var title = document.getElementById('evtTitle').value.trim();\n var date = document.getElementById('evtDate').value.trim();\n var startDate = document.getElementById('evtStartDate').value;\n var endDate = document.getElementById('evtEndDate').value;\n var image = document.getElementById('evtImage').value.trim();\n var link = document.getElementById('evtLink').value.trim();\n var desc = document.getElementById('evtDesc').value.trim();\n\n var evtData = {\n id: 'evt-' + Date.now(),\n title: title,\n date: date,\n startDate: startDate,\n endDate: endDate,\n image: image,\n description: desc,\n link: link\n };\n\n \/\/ Guardar en WordPress v\u00eda API (con token de autenticaci\u00f3n)\n fetch(API_URL, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'X-Admin-Token': adminToken || ''\n },\n body: JSON.stringify(evtData)\n })\n .then(function(resp) { return resp.json(); })\n .then(function(data) {\n if (data.success) {\n \/\/ Crear la tarjeta y agregarla al DOM\n document.getElementById('eventos-container').appendChild(crearTarjetaEvento(evtData));\n sortEventsByStartDate();\n updateSwiper();\n\n \/\/ Cerrar modal y limpiar\n document.getElementById('eventModal').classList.add('hidden');\n document.getElementById('eventForm').reset();\n document.getElementById('imgPreview').classList.add('hidden');\n\n alert('\u00a1Evento publicado exitosamente! Todos los visitantes lo ver\u00e1n.');\n } else {\n alert('Error al guardar. Intenta de nuevo.');\n }\n })\n .catch(function(err) {\n console.error(err);\n alert('No se pudo conectar con el servidor. Verifica que el snippet PHP est\u00e9 activo.');\n });\n });\n\n \/\/ INICIALIZAR TODO AL CARGAR LA P\u00c1GINA\n removeExpiredEvents();\n \n if (document.querySelector('.swiper-wrapper').children.length === 0) {\n initializeSwiper();\n }\n\n \/\/ Cargar eventos nuevos desde el servidor (los que se agregaron por el admin)\n loadNewEventsFromServer();\n \n scheduleNextCheck();\n setInterval(removeExpiredEvents, 3600000);\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cartelera de Eventos – Parque Estadio Nacional Cartelera \u00a1Bienvenidos! Conoce los eventos que est\u00e1n oficializados en el Parque Estadio Nacional ACDC \u2013 Power Up Tour 11 y 15 de marzo La m\u00edtica banda brit\u00e1nica australiana promete remecer el Parque Estadio Nacional, con un espect\u00e1culo donde repasar\u00e1 gran parte de los \u00e9xitos, que la han llevado […]<\/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-207","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"\/index.php?rest_route=\/wp\/v2\/pages\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=207"}],"version-history":[{"count":96,"href":"\/index.php?rest_route=\/wp\/v2\/pages\/207\/revisions"}],"predecessor-version":[{"id":1731,"href":"\/index.php?rest_route=\/wp\/v2\/pages\/207\/revisions\/1731"}],"wp:attachment":[{"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}