{"id":1971,"date":"2024-03-14T08:42:03","date_gmt":"2024-03-14T07:42:03","guid":{"rendered":"https:\/\/miguelbonal.com\/?page_id=1971"},"modified":"2026-06-02T08:43:13","modified_gmt":"2026-06-02T06:43:13","slug":"fotos-2","status":"publish","type":"page","link":"https:\/\/miguelbonal.com\/en\/fotos-2\/","title":{"rendered":"CONCERTS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1971\" class=\"elementor elementor-1971\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2a4f0b1 e-flex e-con-boxed e-con e-parent\" data-id=\"2a4f0b1\" 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-c88edd7 elementor-widget elementor-widget-html\" data-id=\"c88edd7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<meta charset=\"UTF-8\">\n\n<style>\n\/* \u2500\u2500 ROMPER CONTENEDOR ELEMENTOR \u2500\u2500 *\/\n.mb-concerts {\n  margin-left: calc(-50vw + 50%);\n  margin-right: calc(-50vw + 50%);\n  width: 100vw;\n  max-width: 100vw;\n}\n\n\/* \u2500\u2500 BASE \u2500\u2500 *\/\n.mb-concerts * { box-sizing: border-box; margin: 0; padding: 0; }\n.mb-concerts {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;\n  background: #fff;\n  color: #111;\n  padding: 60px 7% 100px;\n}\n\n\/* \u2500\u2500 T&Iacute;TULO \u2500\u2500 *\/\n.mb-c-heading {\n  font-size: 14px;\n  font-weight: 800;\n  letter-spacing: 5px;\n  text-transform: uppercase;\n  color: #c9a96e;\n  margin-bottom: 44px;\n}\n\n\/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\n.mb-c-layout {\n  display: grid;\n  grid-template-columns: 300px 1fr;\n  gap: 140px;\n  align-items: start;\n  max-width: 1140px;\n}\n\n\/* \u2500\u2500 SIDEBAR \u2500\u2500 *\/\n.mb-c-sidebar { position: sticky; top: 100px; }\n\n\/* \u2500\u2500 CALENDARIO \u2500\u2500 *\/\n.mb-c-cal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid #e0e0e0;\n}\n.mb-c-cal-month {\n  font-size: 14px;\n  font-weight: 800;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  color: #111;\n}\n.mb-c-cal-nav {\n  background: none;\n  border: 1px solid #ccc;\n  width: 32px; height: 32px;\n  cursor: pointer;\n  font-size: 15px;\n  color: #555;\n  display: flex; align-items: center; justify-content: center;\n  transition: border-color 0.2s, color 0.2s;\n}\n.mb-c-cal-nav:hover { border-color: #c9a96e; color: #c9a96e; }\n\n.mb-c-cal-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n  row-gap: 4px;\n}\n\n\/* Encabezados d\u00edas *\/\n.mb-c-day-name {\n  font-size: 12px;\n  font-weight: 800;\n  color: #111;\n  padding: 6px 0 10px;\n}\n\n\/* D\u00edas del mes *\/\n.mb-c-day {\n  font-size: 15px;\n  font-weight: 400;\n  color: #333;\n  padding: 8px 0;\n  border-radius: 50%;\n  cursor: default;\n  transition: background 0.15s;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto;\n}\n.mb-c-day.empty { visibility: hidden; }\n\n\/* Hoy \u2014 c\u00edrculo gris claro como Savall *\/\n.mb-c-day.today {\n  background: #d6d6d6;\n  color: #555;\n}\n\n\/* Con concierto \u2014 c\u00edrculo azul marino oscuro como Savall (adaptado: dorado oscuro para Miguel) *\/\n.mb-c-day.concert {\n  background: #1a1a6e;\n  color: #fff;\n  font-weight: 700;\n  cursor: pointer;\n}\n.mb-c-day.concert:hover { background: #c9a96e; }\n\n\/* \u2500\u2500 LISTA DE EVENTOS \u2500\u2500 *\/\n.mb-c-list {\n  border-top: 1px solid #ccc;\n}\n\n.mb-c-event {\n  padding: 60px 0 56px;\n  border-bottom: 1px solid #ccc;\n}\n\n\/* Fecha: negrita, dorado, espaciado *\/\n.mb-c-event-date {\n  font-size: 13px;\n  font-weight: 800;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  color: #c9a96e;\n  margin-bottom: 12px;\n}\n\n\/* T&iacute;tulo grande y en negrita como Savall *\/\n.mb-c-event-title {\n  font-size: clamp(1.5rem, 2.2vw, 2rem);\n  font-weight: 800;\n  line-height: 1.2;\n  color: #111;\n  margin-bottom: 10px;\n}\n\n\/* Ensemble\/descripci&oacute;n en negrita *\/\n.mb-c-event-program {\n  font-size: 14px;\n  font-weight: 700;\n  color: #111;\n  margin-bottom: 20px;\n  line-height: 1.6;\n}\n\n\/* Ciudad en negrita *\/\n.mb-c-event-city {\n  font-size: 14px;\n  font-weight: 700;\n  color: #111;\n  margin-bottom: 5px;\n}\n\n\/* Sala: color dorado + flecha, may\u00fasculas *\/\n.mb-c-event-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  color: #c9a96e;\n  text-decoration: none;\n  text-transform: uppercase;\n}\n.mb-c-event-venue:hover { color: #b8935a; }\n\n\/* Hora *\/\n.mb-c-event-time {\n  font-size: 14px;\n  color: #555;\n  margin-top: 5px;\n}\n\n\/* Sin eventos \/ cargando *\/\n.mb-c-status {\n  font-size: 1rem;\n  color: #aaa;\n  padding: 50px 0;\n  font-style: italic;\n}\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media (max-width: 760px) {\n  .mb-c-layout { grid-template-columns: 1fr; gap: 36px; }\n  .mb-c-sidebar { position: static; }\n}\n<\/style>\n\n<div class=\"mb-concerts\">\n  <p class=\"mb-c-heading\">Conciertos<\/p>\n\n  <div class=\"mb-c-layout\">\n\n    <!-- CALENDARIO -->\n    <div class=\"mb-c-sidebar\">\n      <div class=\"mb-c-cal-header\">\n        <button class=\"mb-c-cal-nav\" id=\"mbPrev\">&#8592;<\/button>\n        <span class=\"mb-c-cal-month\" id=\"mbMonthLabel\"><\/span>\n        <button class=\"mb-c-cal-nav\" id=\"mbNext\">&#8594;<\/button>\n      <\/div>\n      <div class=\"mb-c-cal-grid\" id=\"mbCalGrid\">\n        <div class=\"mb-c-day-name\">Lu<\/div>\n        <div class=\"mb-c-day-name\">Ma<\/div>\n        <div class=\"mb-c-day-name\">Mi<\/div>\n        <div class=\"mb-c-day-name\">Ju<\/div>\n        <div class=\"mb-c-day-name\">Vi<\/div>\n        <div class=\"mb-c-day-name\">Sa<\/div>\n        <div class=\"mb-c-day-name\">Do<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- LISTA -->\n    <div class=\"mb-c-list\" id=\"mbEventList\">\n      <div class=\"mb-c-status\">Cargando conciertos&hellip;<\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function () {\n  const API = 'https:\/\/miguelbonal.com\/wp-json\/tribe\/events\/v1\/events';\n  const MONTHS = ['Enero','Febrero','Marzo','Abril','Mayo','Junio',\n                  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];\n\n  let allEvents = [];\n  let calYear, calMonth;\n\n  \/* \u2500\u2500 Cargar eventos desde la API de The Events Calendar \u2500\u2500 *\/\n  async function loadEvents() {\n    try {\n      const today = new Date();\n      const start = today.toISOString().split('T')[0];\n      const r = await fetch(`${API}?per_page=100&start_date=${start}&status=publish`);\n      const d = await r.json();\n      allEvents = (d.events || []).sort((a, b) => new Date(a.start_date) - new Date(b.start_date));\n    } catch (e) { allEvents = []; }\n    initView();\n  }\n\n  function initView() {\n    const today = new Date();\n    if (allEvents.length > 0) {\n      const first = new Date(allEvents[0].start_date);\n      calYear = first.getFullYear();\n      calMonth = first.getMonth();\n    } else {\n      calYear = today.getFullYear();\n      calMonth = today.getMonth();\n    }\n    renderCalendar();\n    renderList();\n  }\n\n  \/* \u2500\u2500 CALENDARIO \u2500\u2500 *\/\n  function concertDaysInMonth(y, m) {\n    return allEvents\n      .filter(e => { const d = new Date(e.start_date); return d.getFullYear()===y && d.getMonth()===m; })\n      .map(e => new Date(e.start_date).getDate());\n  }\n\n  function renderCalendar() {\n    document.getElementById('mbMonthLabel').textContent =\n      MONTHS[calMonth].toUpperCase() + '\\u00A0' + calYear;\n\n    const grid = document.getElementById('mbCalGrid');\n    const headers = Array.from(grid.querySelectorAll('.mb-c-day-name'));\n    grid.innerHTML = '';\n    headers.forEach(h => grid.appendChild(h));\n\n    const concertDays = concertDaysInMonth(calYear, calMonth);\n    const today = new Date();\n    const firstDow = new Date(calYear, calMonth, 1).getDay(); \/\/ 0=Dom\n    const offset = firstDow === 0 ? 6 : firstDow - 1;\n\n    for (let i = 0; i < offset; i++) {\n      const el = document.createElement('div');\n      el.className = 'mb-c-day empty'; el.textContent = '-';\n      grid.appendChild(el);\n    }\n\n    const total = new Date(calYear, calMonth + 1, 0).getDate();\n    for (let d = 1; d <= total; d++) {\n      const el = document.createElement('div');\n      el.className = 'mb-c-day';\n      el.textContent = d;\n      const isToday = today.getFullYear()===calYear && today.getMonth()===calMonth && today.getDate()===d;\n      if (isToday) el.classList.add('today');\n      if (concertDays.includes(d)) {\n        el.classList.add('concert');\n        const dateStr = `${calYear}-${String(calMonth+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;\n        el.onclick = () => {\n          const target = document.querySelector(`[data-date=\"${dateStr}\"]`);\n          if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        };\n      }\n      grid.appendChild(el);\n    }\n  }\n\n  \/* \u2500\u2500 LISTA \u2500\u2500 *\/\n  function fmtDate(str) {\n    const d = new Date(str);\n    return `${d.getDate()} ${MONTHS[d.getMonth()].toUpperCase()}, ${d.getFullYear()}`;\n  }\n  function fmtTime(str) {\n    const d = new Date(str);\n    return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;\n  }\n  function stripHtml(s) { return s ? s.replace(\/<[^>]+>\/g,'').trim() : ''; }\n\n  function renderList() {\n    const list = document.getElementById('mbEventList');\n    if (!allEvents.length) {\n      list.innerHTML = '<div class=\"mb-c-status\">No hay pr&oacute;ximos conciertos programados.<\/div>';\n      return;\n    }\n    list.innerHTML = allEvents.map(ev => {\n      const dateStr   = ev.start_date.split(' ')[0];\n      const title     = ev.title || '';\n      const desc      = stripHtml(ev.description).substring(0, 200);\n      const venue     = ev.venue || {};\n      const venueName = venue.venue || '';\n      const city      = [venue.city, venue.country].filter(Boolean).join(', ');\n      const venueUrl  = venue.url || ev.url || '#';\n      const time      = fmtTime(ev.start_date);\n      const allDay    = ev.all_day;\n\n      return `\n        <div class=\"mb-c-event\" data-date=\"${dateStr}\">\n          <div class=\"mb-c-event-date\">${fmtDate(ev.start_date)}<\/div>\n          <div class=\"mb-c-event-title\">${title}<\/div>\n          ${desc ? `<div class=\"mb-c-event-program\">${desc}<\/div>` : ''}\n          ${city      ? `<div class=\"mb-c-event-city\">${city}<\/div>` : ''}\n          ${venueName ? `<a class=\"mb-c-event-venue\" href=\"${venueUrl}\" target=\"_blank\">${venueName} &rarr;<\/a>` : ''}\n          ${!allDay   ? `<div class=\"mb-c-event-time\">${time}<\/div>` : ''}\n        <\/div>`;\n    }).join('');\n  }\n\n  document.getElementById('mbPrev').onclick = () => {\n    if (--calMonth < 0) { calMonth = 11; calYear--; } renderCalendar();\n  };\n  document.getElementById('mbNext').onclick = () => {\n    if (++calMonth > 11) { calMonth = 0; calYear++; } renderCalendar();\n  };\n\n  loadEvents();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Conciertos &#8592; &#8594; Lu Ma Mi Ju Vi Sa Do Cargando conciertos&hellip;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-1971","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"miguelbonal.com","author_link":"https:\/\/miguelbonal.com\/en\/author\/miguelbonal-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Conciertos &#8592; &#8594; Lu Ma Mi Ju Vi Sa Do Cargando conciertos&hellip;","ticketed":false,"_links":{"self":[{"href":"https:\/\/miguelbonal.com\/en\/wp-json\/wp\/v2\/pages\/1971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miguelbonal.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/miguelbonal.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/miguelbonal.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miguelbonal.com\/en\/wp-json\/wp\/v2\/comments?post=1971"}],"version-history":[{"count":556,"href":"https:\/\/miguelbonal.com\/en\/wp-json\/wp\/v2\/pages\/1971\/revisions"}],"predecessor-version":[{"id":7800,"href":"https:\/\/miguelbonal.com\/en\/wp-json\/wp\/v2\/pages\/1971\/revisions\/7800"}],"wp:attachment":[{"href":"https:\/\/miguelbonal.com\/en\/wp-json\/wp\/v2\/media?parent=1971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}