{"id":8,"date":"2026-10-27T16:59:30","date_gmt":"2026-10-27T16:59:30","guid":{"rendered":"https:\/\/magicafm.mx\/wordpress\/?page_id=8"},"modified":"2026-10-27T16:59:30","modified_gmt":"2026-10-27T16:59:30","slug":"programacion","status":"publish","type":"page","link":"https:\/\/magicafm.mx\/?page_id=8","title":{"rendered":"Programaci\u00f3n"},"content":{"rendered":"\n<div id=\"magica-programacion\">\n  <style>\n    #magica-programacion {\n      --rosa: #f01b8d;\n      --amarillo: #ffcf29;\n      --morado: #240d40;\n      --tarjeta: #32174f;\n      font-family: Arial, Helvetica, sans-serif;\n      color: #fff;\n      background: linear-gradient(145deg, #170b2d, #39115b 55%, #210b3b);\n      padding: 35px 20px;\n      border-radius: 20px;\n      max-width: 1150px;\n      margin: 20px auto;\n      box-sizing: border-box;\n    }\n\n    #magica-programacion * {\n      box-sizing: border-box;\n    }\n\n    #magica-programacion .mp-header {\n      text-align: center;\n      margin-bottom: 28px;\n    }\n\n    #magica-programacion .mp-station {\n      color: var(--amarillo);\n      font-size: 13px;\n      font-weight: 800;\n      letter-spacing: 3px;\n    }\n\n    #magica-programacion h2 {\n      color: #fff;\n      font-size: clamp(28px, 5vw, 44px);\n      margin: 12px 0;\n      line-height: 1.2;\n    }\n\n    #magica-programacion .mp-slogan {\n      color: #f6bbdf;\n      font-size: 16px;\n    }\n\n    #magica-programacion .mp-live {\n      background: linear-gradient(110deg, #f01b8d, #a514ac);\n      padding: 20px;\n      border-radius: 15px;\n      margin-bottom: 24px;\n      display: flex;\n      align-items: center;\n      gap: 15px;\n    }\n\n    #magica-programacion .mp-dot {\n      width: 13px;\n      height: 13px;\n      background: var(--amarillo);\n      border-radius: 50%;\n      flex-shrink: 0;\n      animation: mp-pulse 1.5s infinite;\n    }\n\n    @keyframes mp-pulse {\n      50% { opacity: .35; }\n    }\n\n    #magica-programacion .mp-live-label {\n      font-size: 12px;\n      font-weight: bold;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n    }\n\n    #magica-programacion #mp-current {\n      font-size: 20px;\n      font-weight: 800;\n      margin-top: 5px;\n    }\n\n    #magica-programacion #mp-clock {\n      font-size: 12px;\n      opacity: .9;\n      margin-top: 6px;\n    }\n\n    #magica-programacion .mp-tabs {\n      display: flex;\n      gap: 10px;\n      margin-bottom: 25px;\n    }\n\n    #magica-programacion .mp-tab {\n      flex: 1;\n      border: 1px solid #78509a;\n      border-radius: 10px;\n      background: #32174f;\n      color: #fff;\n      padding: 14px 8px;\n      font-size: 14px;\n      font-weight: bold;\n      cursor: pointer;\n      transition: background .2s;\n    }\n\n    #magica-programacion .mp-tab.active,\n    #magica-programacion .mp-tab:hover {\n      background: var(--rosa);\n      border-color: var(--rosa);\n    }\n\n    #magica-programacion .mp-tab:focus-visible {\n      outline: 3px solid var(--amarillo);\n      outline-offset: 3px;\n    }\n\n    #magica-programacion .mp-panel {\n      display: none;\n    }\n\n    #magica-programacion .mp-panel.active {\n      display: block;\n    }\n\n    #magica-programacion .mp-item {\n      background: var(--tarjeta);\n      border: 1px solid #654382;\n      border-radius: 12px;\n      padding: 17px 20px;\n      margin-bottom: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n    }\n\n    #magica-programacion .mp-item.on-air {\n      border: 2px solid var(--amarillo);\n      background: #50205c;\n    }\n\n    #magica-programacion .mp-time {\n      color: var(--amarillo);\n      font-size: 13px;\n      font-weight: 800;\n      margin-bottom: 7px;\n    }\n\n    #magica-programacion .mp-name {\n      font-size: 19px;\n      font-weight: 800;\n      line-height: 1.3;\n    }\n\n    #magica-programacion .mp-description {\n      font-size: 13px;\n      color: #dcc7e8;\n      margin-top: 5px;\n    }\n\n    #magica-programacion .mp-icon {\n      font-size: 26px;\n      flex-shrink: 0;\n    }\n\n    #magica-programacion .mp-badge {\n      display: inline-block;\n      margin-top: 8px;\n      color: #21102e;\n      background: var(--amarillo);\n      border-radius: 20px;\n      padding: 4px 10px;\n      font-size: 11px;\n      font-weight: 800;\n    }\n\n    #magica-programacion .mp-footer {\n      text-align: center;\n      margin-top: 28px;\n      padding-top: 20px;\n      border-top: 1px solid #654382;\n    }\n\n    #magica-programacion .mp-footer p {\n      color: #e8d3ef;\n      font-size: 13px;\n    }\n\n    @media(max-width: 600px) {\n      #magica-programacion {\n        padding: 22px 13px;\n        border-radius: 12px;\n      }\n\n      #magica-programacion .mp-tabs {\n        gap: 6px;\n      }\n\n      #magica-programacion .mp-tab {\n        font-size: 12px;\n        padding: 12px 5px;\n      }\n\n      #magica-programacion .mp-item {\n        padding: 14px;\n      }\n\n      #magica-programacion .mp-name {\n        font-size: 16px;\n      }\n    }\n  <\/style>\n\n  <header class=\"mp-header\">\n    <div class=\"mp-station\">M\u00c1GICA 100.1 FM<\/div>\n    <h2>Nuestra programaci\u00f3n<\/h2>\n    <div class=\"mp-slogan\">Tan diferente como t\u00fa<\/div>\n  <\/header>\n\n  <section class=\"mp-live\" aria-live=\"polite\">\n    <span class=\"mp-dot\"><\/span>\n    <div>\n      <div class=\"mp-live-label\">Ahora al aire<\/div>\n      <div id=\"mp-current\">Consultando programaci\u00f3n&#8230;<\/div>\n      <div id=\"mp-clock\"><\/div>\n    <\/div>\n  <\/section>\n\n  <nav class=\"mp-tabs\" aria-label=\"D\u00edas de programaci\u00f3n\">\n    <button class=\"mp-tab active\"\n      type=\"button\" data-day=\"weekday\"\n      aria-pressed=\"true\">Lunes a viernes<\/button>\n    <button class=\"mp-tab\" type=\"button\"\n      data-day=\"saturday\"\n      aria-pressed=\"false\">S\u00e1bado<\/button>\n    <button class=\"mp-tab\" type=\"button\"\n      data-day=\"sunday\"\n      aria-pressed=\"false\">Domingo<\/button>\n  <\/nav>\n\n  <div id=\"mp-weekday\" class=\"mp-panel active\"><\/div>\n  <div id=\"mp-saturday\" class=\"mp-panel\"><\/div>\n  <div id=\"mp-sunday\" class=\"mp-panel\"><\/div>\n\n  <footer class=\"mp-footer\">\n    <strong>M\u00e1gica 100.1 FM \u00b7 Parral, Chihuahua<\/strong>\n    <p>Tan diferente como t\u00fa<\/p>\n  <\/footer>\n\n  <script>\n    (function () {\n      \"use strict\";\n\n      const root = document.getElementById(\"magica-programacion\");\n      if (!root || root.dataset.ready === \"1\") return;\n      root.dataset.ready = \"1\";\n\n      \/\/ Horarios en formato de 24 horas.\n      \/\/ Los espacios no especificados se muestran como\n      \/\/ \"Programaci\u00f3n no especificada\".\n\n      const schedule = {\n        weekday: [\n          {\n            start: \"08:00\", end: \"09:00\",\n            name: \"Plataforma Informativa\",\n            description: \"Noticiero estatal\",\n            icon: \"\ud83d\udcf0\"\n          },\n          {\n            start: \"09:00\", end: \"10:00\",\n            name: \"Programaci\u00f3n musical\",\n            description: \"M\u00e1gica 100.1 FM\",\n            icon: \"\u266b\"\n          },\n          {\n            start: \"10:00\", end: \"11:00\",\n            name: \"Por el Placer de Vivir\",\n            description: \"Con el Dr. C\u00e9sar Lozano\",\n            icon: \"\ud83c\udf99\"\n          },\n          {\n            start: \"11:00\", end: \"13:00\",\n            name: \"Plataforma Informativa\",\n            description: \"Noticiero local\",\n            icon: \"\ud83d\udcf0\"\n          },\n          {\n            start: \"14:30\", end: \"20:00\",\n            name: \"Programaci\u00f3n musical\",\n            description: \"M\u00e1gica 100.1 FM\",\n            icon: \"\u266b\"\n          }\n        ],\n        saturday: [\n          {\n            start: \"00:00\", end: \"09:00\",\n            name: \"Programaci\u00f3n musical\",\n            description: \"M\u00e1gica 100.1 FM\",\n            icon: \"\u266b\"\n          },\n          {\n            start: \"11:00\", end: \"12:53\",\n            name: \"H\u00e9ctor Gabriel Luj\u00e1n\",\n            description: \"Programa de s\u00e1bado\",\n            icon: \"\ud83c\udf99\"\n          },\n          {\n            start: \"12:53\", end: \"24:00\",\n            name: \"Programaci\u00f3n musical\",\n            description: \"M\u00e1gica 100.1 FM\",\n            icon: \"\u266b\"\n          }\n        ],\n        sunday: [\n          {\n            start: \"00:00\", end: \"24:00\",\n            name: \"Programaci\u00f3n musical\",\n            description: \"M\u00e1gica 100.1 FM todo el d\u00eda\",\n            icon: \"\u266b\"\n          }\n        ]\n      };\n\n      const days = [\n        \"sunday\", \"weekday\", \"weekday\",\n        \"weekday\", \"weekday\", \"weekday\",\n        \"saturday\"\n      ];\n\n      const formatter = new Intl.DateTimeFormat(\n        \"en-US\", {\n          timeZone: \"America\/Chihuahua\",\n          weekday: \"short\",\n          hour: \"2-digit\",\n          minute: \"2-digit\",\n          second: \"2-digit\",\n          hourCycle: \"h23\"\n        }\n      );\n\n      function getLocalTime() {\n        const parts = formatter.formatToParts(new Date());\n        const values = {};\n        parts.forEach(function (part) {\n          values[part.type] = part.value;\n        });\n\n        const index = {\n          Sun: 0, Mon: 1, Tue: 2,\n          Wed: 3, Thu: 4, Fri: 5, Sat: 6\n        }[values.weekday];\n\n        return {\n          day: days[index],\n          minutes: Number(values.hour) * 60 +\n            Number(values.minute),\n          clock: values.hour + \":\" +\n            values.minute + \":\" + values.second\n        };\n      }\n\n      function toMinutes(time) {\n        const parts = time.split(\":\").map(Number);\n        return parts[0] * 60 + parts[1];\n      }\n\n      function activeProgram(day, minutes) {\n        return schedule[day].find(function (program) {\n          return minutes >= toMinutes(program.start) &&\n            minutes < toMinutes(program.end);\n        });\n      }\n\n      function createItem(program, active) {\n        const article = document.createElement(\"article\");\n        article.className = \"mp-item\" +\n          (active ? \" on-air\" : \"\");\n\n        const info = document.createElement(\"div\");\n        const time = document.createElement(\"div\");\n        time.className = \"mp-time\";\n        time.textContent =\n          program.start + \" \u2013 \" +\n          (program.end === \"24:00\" ?\n            \"23:59\" : program.end);\n\n        const name = document.createElement(\"div\");\n        name.className = \"mp-name\";\n        name.textContent = program.name;\n\n        const description = document.createElement(\"div\");\n        description.className = \"mp-description\";\n        description.textContent = program.description;\n\n        info.append(time, name, description);\n\n        if (active) {\n          const badge = document.createElement(\"span\");\n          badge.className = \"mp-badge\";\n          badge.textContent = \"AL AIRE\";\n          info.appendChild(badge);\n        }\n\n        const icon = document.createElement(\"span\");\n        icon.className = \"mp-icon\";\n        icon.textContent = program.icon;\n        icon.setAttribute(\"aria-hidden\", \"true\");\n\n        article.append(info, icon);\n        return article;\n      }\n\n      function render() {\n        const now = getLocalTime();\n        const current = activeProgram(now.day, now.minutes);\n\n        root.querySelector(\"#mp-current\").textContent =\n          current ? current.name :\n          \"Programaci\u00f3n no especificada\";\n\n        root.querySelector(\"#mp-clock\").textContent =\n          \"Hora de Parral: \" + now.clock;\n\n        Object.keys(schedule).forEach(function (day) {\n          const panel = root.querySelector(\"#mp-\" + day);\n          panel.replaceChildren();\n\n          schedule[day].forEach(function (program) {\n            const active = day === now.day &#038;&#038;\n              program === current;\n            panel.appendChild(createItem(program, active));\n          });\n        });\n      }\n\n      function selectDay(day) {\n        root.querySelectorAll(\".mp-tab\").forEach(\n          function (button) {\n            const active = button.dataset.day === day;\n            button.classList.toggle(\"active\", active);\n            button.setAttribute(\"aria-pressed\", String(active));\n          }\n        );\n\n        root.querySelectorAll(\".mp-panel\").forEach(\n          function (panel) {\n            panel.classList.toggle(\n              \"active\", panel.id === \"mp-\" + day\n            );\n          }\n        );\n      }\n\n      root.querySelectorAll(\".mp-tab\").forEach(\n        function (button) {\n          button.addEventListener(\"click\", function () {\n            selectDay(button.dataset.day);\n          });\n        }\n      );\n\n      selectDay(getLocalTime().day);\n      render();\n      setInterval(render, 30000);\n    })();\n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>M\u00c1GICA 100.1 FM Nuestra programaci\u00f3n Tan diferente como t\u00fa Ahora al aire Consultando programaci\u00f3n&#8230; Lunes a viernes S\u00e1bado Domingo M\u00e1gica 100.1 FM \u00b7 Parral, Chihuahua Tan diferente como t\u00fa<\/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-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/magicafm.mx\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magicafm.mx\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/magicafm.mx\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/magicafm.mx\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magicafm.mx\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":1,"href":"https:\/\/magicafm.mx\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/magicafm.mx\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/magicafm.mx\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}