(function () {
  const apps = document.querySelectorAll('[data-academic-calendar-app]');

  if (!apps.length) {
    return;
  }

  const pdfUrl = '/plantillajoomla5.3/media/idiomas/calendario/resolucion-academica-096-2024.pdf';
  const pdfViewerUrl = `${pdfUrl}#zoom=page-width&pagemode=none`;

  const render = (app) => {
    app.innerHTML = `
      <style>
        .com-content-article.item-page .page-header,
        .com-content-article.item-page .article-info,
        .com-content-article.item-page figure.item-image{display:none!important}
        #g-container-main,
        #g-container-main .g-container,
        #g-mainbar .g-content,
        .platform-content.container,
        .platform-content .row,
        .platform-content .col{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
        .com-content-article.item-page .com-content-article__body{width:100%!important;max-width:none!important;margin:0!important}
        html,body{overflow-x:hidden}
        .idioma-calendar-shell{position:relative;left:50%;width:100vw;margin-left:-50vw;margin-right:-50vw}
        .idioma-calendar{--red:#ef1b2d;--red-dark:#c91522;--ink:#28205c;--muted:#667085;--line:#e4e8ef;--soft:#fff3f4;display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:radial-gradient(circle at 50% 6rem,rgba(239,27,45,.08),transparent 24rem),linear-gradient(180deg,#fff 0,#fff8f9 50%,#fff 100%);color:#222838;overflow:hidden}
        .idioma-calendar *{box-sizing:border-box}
        .idioma-calendar__wrap{width:min(1180px,calc(100% - 2rem));min-height:clamp(620px,72vh,780px);margin:0 auto;padding:clamp(2.8rem,7vw,5.6rem) 0;display:grid;align-content:center}
        .idioma-calendar__hero{text-align:center;margin:0 auto clamp(2rem,5vw,3.2rem);max-width:900px;opacity:1;transform:none;transition:opacity .72s ease,transform .72s ease}
        .idioma-calendar:not(.is-ready) .idioma-calendar__hero{opacity:0;transform:translateY(24px)}
        .idioma-calendar__icon{display:grid;place-items:center;width:82px;height:82px;margin:0 auto 1rem;border-radius:999px;background:linear-gradient(135deg,var(--red),#ff4b59);color:#fff;font-size:2.55rem;box-shadow:0 22px 58px rgba(239,27,45,.26);animation:calendarPulse 3.6s ease-in-out infinite}
        .idioma-calendar__hero h1{margin:0 0 .85rem;color:var(--red);font-size:clamp(2.1rem,5vw,4.2rem);line-height:1.04;font-weight:950;letter-spacing:0}
        .idioma-calendar__hero p{margin:0 auto;color:var(--muted);font-size:clamp(1rem,1.8vw,1.22rem);line-height:1.58;max-width:760px}
        .idioma-calendar__card{position:relative;width:min(720px,100%);margin:0 auto;border:2px solid rgba(239,27,45,.18);border-radius:8px;background:#fff;box-shadow:0 24px 70px rgba(22,29,54,.13);overflow:hidden;opacity:1;transform:none;transition:opacity .72s ease .12s,transform .72s ease .12s,border-color .28s ease,box-shadow .28s ease}
        .idioma-calendar:not(.is-ready) .idioma-calendar__card{opacity:0;transform:translateY(28px) scale(.985)}
        .idioma-calendar__card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(239,27,45,.08),transparent);transform:translateX(-120%);transition:transform .9s ease;pointer-events:none}
        .idioma-calendar__card:hover{border-color:rgba(239,27,45,.34);box-shadow:0 32px 86px rgba(22,29,54,.18)}
        .idioma-calendar__card:hover::before{transform:translateX(120%)}
        .idioma-calendar__card-head{position:relative;padding:1.45rem 1.5rem;text-align:center;background:linear-gradient(135deg,#fff3f4,#fff8f9);border-bottom:1px solid rgba(239,27,45,.12)}
        .idioma-calendar__card-head h2{margin:0;color:var(--ink);font-size:clamp(1.45rem,2.6vw,2rem);font-weight:950;letter-spacing:0}
        .idioma-calendar__card-body{position:relative;padding:clamp(1.5rem,4vw,2.3rem);text-align:center}
        .idioma-calendar__card-body p{margin:0 auto 1.45rem;max-width:560px;color:#495266;line-height:1.64}
        .idioma-calendar__button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;max-width:100%;min-height:48px;padding:.82rem 1.35rem;border:0;border-radius:7px;background:var(--red);color:#fff!important;font-weight:900;text-align:center;text-decoration:none!important;line-height:1.2;white-space:normal;box-shadow:0 16px 38px rgba(239,27,45,.28);cursor:pointer;transition:transform .24s ease,box-shadow .24s ease,background .24s ease}
        .idioma-calendar__button:hover{background:var(--red-dark);transform:translateY(-3px);box-shadow:0 24px 52px rgba(239,27,45,.34)}
        .idioma-calendar__note{display:flex;align-items:flex-start;gap:.65rem;margin:2rem auto 0;padding:1rem;border-radius:8px;background:#f4f6fa;color:#596173;text-align:left;line-height:1.55}
        .idioma-calendar__note i{margin-top:.12rem;color:var(--red);font-size:1.2rem}
        .idioma-calendar__modal{--red:#ef1b2d;--red-dark:#c91522;position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:clamp(.7rem,2vw,1.2rem);background:rgba(14,17,35,.72);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .24s ease}
        .idioma-calendar__modal.is-open{opacity:1;pointer-events:auto}
        .idioma-calendar__dialog{position:relative;display:flex;flex-direction:column;width:min(1180px,calc(100vw - 1.4rem));height:min(900px,calc(100vh - 1.4rem));border-radius:8px;background:#fff;box-shadow:0 30px 100px rgba(0,0,0,.38);overflow:hidden;transform:translateY(18px) scale(.98);transition:transform .26s ease}
        .idioma-calendar__modal.is-open .idioma-calendar__dialog{transform:translateY(0) scale(1)}
        .idioma-calendar__viewer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:54px;padding:.7rem .9rem;background:#222;color:#fff}
        .idioma-calendar__viewer-title{display:flex;align-items:center;gap:.6rem;min-width:0;font-weight:900;line-height:1.15}
        .idioma-calendar__viewer-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .idioma-calendar__viewer-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
        .idioma-calendar__viewer-open{display:inline-flex;align-items:center;gap:.4rem;min-height:34px;padding:.45rem .75rem;border-radius:7px;background:#fff;color:#222!important;font-size:.86rem;font-weight:900;text-decoration:none!important;transition:transform .2s ease,background .2s ease}
        .idioma-calendar__viewer-open:hover{background:#f1f3f7;transform:translateY(-1px)}
        .idioma-calendar__close{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:999px;background:var(--red);color:#fff;font-size:1.05rem;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.2);transition:transform .2s ease,background .2s ease}
        .idioma-calendar__close:hover{background:var(--red-dark);transform:scale(1.06)}
        .idioma-calendar__frame{display:block;width:100%;height:100%;min-height:0;flex:1;border:0;background:#f4f6fa}
        @keyframes calendarPulse{0%,100%{transform:translateY(0);box-shadow:0 22px 58px rgba(239,27,45,.26)}50%{transform:translateY(-8px);box-shadow:0 30px 72px rgba(239,27,45,.34)}}
        @media (max-width:640px){
          .idioma-calendar__wrap{width:min(100% - 1rem,1180px);min-height:auto}
          .idioma-calendar__icon{width:66px;height:66px;font-size:2rem}
          .idioma-calendar__button{width:100%;padding-left:.8rem;padding-right:.8rem;font-size:.82rem}
          .idioma-calendar__note{display:block;text-align:center}
          .idioma-calendar__note i{display:block;margin:0 auto .45rem}
          .idioma-calendar__dialog{width:calc(100vw - .8rem);height:calc(100vh - .8rem)}
          .idioma-calendar__viewer-head{gap:.55rem;padding:.55rem}
          .idioma-calendar__viewer-title span{max-width:42vw}
          .idioma-calendar__viewer-open{font-size:.75rem;padding:.42rem .55rem}
          .idioma-calendar__close{width:34px;height:34px}
        }
        @media (prefers-reduced-motion:reduce){
          .idioma-calendar *{animation:none!important;transition:none!important}
          .idioma-calendar:not(.is-ready) .idioma-calendar__hero,
          .idioma-calendar:not(.is-ready) .idioma-calendar__card{opacity:1;transform:none}
        }
      </style>
      <section class="idioma-calendar" aria-labelledby="idioma-calendar-title">
        <div class="idioma-calendar__wrap">
          <header class="idioma-calendar__hero">
            <span class="idioma-calendar__icon" aria-hidden="true"><i class="fa fa-calendar"></i></span>
            <h1 id="idioma-calendar-title">Calendario Académico Vigente 2025</h1>
            <p>Consulta las fechas clave para inscripciones, matrículas, inicio de clases y periodos de evaluación.</p>
          </header>
          <article class="idioma-calendar__card">
            <div class="idioma-calendar__card-head">
              <h2>Resolución Oficial</h2>
            </div>
            <div class="idioma-calendar__card-body">
              <p>A continuación, puede consultar el documento oficial que rige todas las fechas importantes del Centro de Idiomas para el año 2025.</p>
              <button class="idioma-calendar__button" type="button" data-calendar-open>
                <i class="fa fa-search" aria-hidden="true"></i>
                VER RESOLUCIÓN ACADÉMICA N° 096 DE 2024
              </button>
              <div class="idioma-calendar__note">
                <i class="fa fa-info-circle" aria-hidden="true"></i>
                <span>Cualquier modificación a este calendario será actualizada y reflejada en esta misma sección. Le recomendamos verificarla con regularidad.</span>
              </div>
            </div>
          </article>
        </div>
        <div class="idioma-calendar__modal" data-calendar-modal aria-hidden="true">
          <div class="idioma-calendar__dialog" role="dialog" aria-modal="true" aria-label="Resolución Académica N° 096 de 2024">
            <div class="idioma-calendar__viewer-head">
              <div class="idioma-calendar__viewer-title">
                <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                <span>Resolución Académica N° 096 de 2024</span>
              </div>
              <div class="idioma-calendar__viewer-actions">
                <a class="idioma-calendar__viewer-open" href="${pdfUrl}" target="_blank" rel="noopener noreferrer">
                  <i class="fa fa-external-link" aria-hidden="true"></i>
                  Abrir PDF
                </a>
                <button class="idioma-calendar__close" type="button" data-calendar-close aria-label="Cerrar resolución"><i class="fa fa-times" aria-hidden="true"></i></button>
              </div>
            </div>
            <iframe class="idioma-calendar__frame" src="${pdfViewerUrl}" title="Resolución Académica N° 096 de 2024"></iframe>
          </div>
        </div>
      </section>`;

    const root = app.querySelector('.idioma-calendar');
    const modal = app.querySelector('[data-calendar-modal]');
    const openButton = app.querySelector('[data-calendar-open]');
    const closeButton = app.querySelector('[data-calendar-close]');

    document.body.appendChild(modal);

    const closeModal = () => {
      modal.classList.remove('is-open');
      modal.setAttribute('aria-hidden', 'true');
      document.documentElement.style.overflow = '';
    };
    const openModal = () => {
      modal.classList.add('is-open');
      modal.setAttribute('aria-hidden', 'false');
      document.documentElement.style.overflow = 'hidden';
      closeButton.focus();
    };

    openButton.addEventListener('click', openModal);
    closeButton.addEventListener('click', closeModal);
    modal.addEventListener('click', (event) => {
      if (event.target === modal) {
        closeModal();
      }
    });
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && modal.classList.contains('is-open')) {
        closeModal();
      }
    });

    requestAnimationFrame(() => {
      if (root) {
        root.classList.add('is-ready');
      }
    });
  };

  apps.forEach(render);
}());