UEGP N\u00b057 – Widget<\/title>\n<style>\n html {\n height: 100%;\n }\n body {\n margin: 0;\n padding: 0; \n background-color: #e0e0e0; \/* Fondo general *\/\n font-family: Arial, sans-serif;\n min-height: 100%;\n box-sizing: border-box;\n }\n .page-wrapper {\n display: flex;\n flex-direction: column; \n align-items: center; \n justify-content: flex-start; \n min-height: 100vh;\n padding: 20px; \n box-sizing: border-box;\n }\n .widget-container {\n width: 100%;\n max-width: 380px; \/* Mobile first *\/\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n border-radius: 12px;\n overflow: hidden;\n margin: 20px auto; \/* Centering for standalone or iframe *\/\n }\n\n \/* Estilos del Logo UEGP (Cabecera) *\/\n .uegp-logo-header {\n background-color: #002b5c; \/* Color institucional *\/\n padding: 20px;\n color: white;\n text-align: center;\n box-sizing: border-box;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n }\n .uegp-logo-img {\n width: 80px;\n height: 80px;\n margin: 0 auto 10px auto;\n display: block;\n border-radius: 8px;\n }\n .uegp-logo-header h1 {\n margin: 10px 0 0 0;\n font-size: 1.8em;\n color: #ffffff;\n }\n\n \/* Estilos del Clima *\/\n .weather-display-section {\n background-color: #f7fafc; \n padding: 20px;\n color: #002b5c; \n box-sizing: border-box;\n }\n .weather-display-section h3.section-title {\n font-size: 1.5em;\n font-weight: 600;\n text-align: center;\n margin-top: 0;\n margin-bottom: 5px; \n color: #002b5c; \n }\n #currentDateTimeDisplay {\n text-align: center;\n font-size: 0.9em;\n color: #555;\n margin-bottom: 15px;\n }\n .weather-loading, .weather-error {\n text-align: center;\n padding: 20px;\n font-size: 1em;\n }\n .weather-error {\n color: #D32F2F; \n }\n .current-weather-card {\n background-color: #002b5c; \n color: white;\n padding: 15px;\n border-radius: 8px;\n text-align: center;\n margin-bottom: 20px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n }\n .current-weather-card .location {\n font-size: 1.25em;\n font-weight: bold;\n margin-bottom: 5px;\n }\n .current-weather-card .condition-text {\n font-size: 1em;\n margin-bottom: 8px;\n }\n .current-weather-card .temp {\n font-size: 2.5em;\n font-weight: bold;\n margin-bottom: 5px;\n }\n .current-weather-card .details {\n font-size: 0.85em;\n }\n .forecast-grid {\n display: grid;\n grid-template-columns: 1fr; \n gap: 10px;\n }\n @media (min-width: 370px) { \/* Small mobile landscape or wider *\/\n .forecast-grid {\n grid-template-columns: repeat(3, 1fr); \n }\n }\n \n .forecast-day-card {\n padding: 10px;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 2px 5px rgba(0,0,0,0.08);\n cursor: pointer; \n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n .forecast-day-card:hover {\n transform: translateY(-3px);\n box-shadow: 0 4px 10px rgba(0,0,0,0.12);\n }\n\n .forecast-day-card.today {\n background-color: #006a4e; \n color: white;\n }\n .forecast-day-card.today .day-name { color: #f0f0f0; }\n .forecast-day-card.today .condition { color: #e0e0e0; }\n .forecast-day-card.today .temp-range { color: #f0f0f0; }\n\n .forecast-day-card.other-day {\n background-color: #e6f2f0; \n color: #002b5c; \n }\n .forecast-day-card .day-name {\n font-weight: 600;\n font-size: 1em;\n margin-bottom: 5px;\n }\n .forecast-day-card .emoji {\n font-size: 2em; \n margin: 5px 0;\n }\n .forecast-day-card .condition {\n font-size: 0.8em;\n margin-bottom: 5px;\n min-height: 2.4em; \n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .forecast-day-card .temp-range {\n font-size: 0.9em;\n }\n\n \/* Footer *\/\n .page-footer {\n text-align: center;\n padding: 15px 0;\n font-size: 0.9em;\n color: #555; \n width: 100%;\n margin-top: 20px;\n box-sizing: border-box;\n }\n .page-footer .powered-by {\n font-size: 0.8em;\n color: #777;\n margin-top: 5px;\n }\n\n \/* Modal Styles (omitidos para brevedad, son los mismos que el original) *\/\n .modal-overlay { \/* ... *\/ }\n .modal-content { \/* ... *\/ }\n .modal-close-btn { \/* ... *\/ }\n .modal-title { \/* ... *\/ }\n .modal-astro-data { \/* ... *\/ }\n .modal-hourly-list { \/* ... *\/ }\n .hourly-item { \/* ... *\/ }\n\n \/* Reflections Section Styles *\/\n .reflections-section {\n background-color: #f0f4f8; \n padding: 20px;\n color: #333; \n box-sizing: border-box;\n margin-top: 0; \n border-top: 1px solid #ddd;\n }\n .reflections-section h3.section-title {\n font-size: 1.4em;\n font-weight: 600;\n text-align: center;\n margin-top: 0;\n margin-bottom: 15px;\n color: #004080; \n }\n \n #reflectionsContentContainer { \/* Styles for mobile (default) *\/ }\n\n .reflection-item { \n margin-bottom: 20px;\n padding-bottom: 15px;\n border-bottom: 1px solid #e0e0e0;\n }\n .reflection-item:last-of-type { \n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n .reflection-item h4 {\n font-size: 1.1em;\n font-weight: bold;\n color: #00509e;\n margin-top: 0;\n margin-bottom: 8px;\n text-align: center; \n }\n .reflection-item div img, .reflection-item p img, .reflection-item img { \n max-width: 100%; \n height: auto;\n border-radius: 4px;\n margin-top: 8px;\n margin-bottom: 12px;\n display: block; \n margin-left: auto;\n margin-right: auto;\n }\n .reflection-item p, .reflection-item div {\n font-size: 0.9em;\n line-height: 1.6;\n word-wrap: break-word;\n }\n .reflection-item div p { \n margin-bottom: 0.75em;\n }\n .reflection-item div strong, \n .reflection-item div b {\n color: #004080;\n }\n #purposeTextDisplay, #readingsTextDisplay, #saintTextDisplay, #topicTextDisplay { \n white-space: normal; \n overflow-wrap: break-word; \n min-height: 50px; \n overflow-x: auto;\n width: 100%;\n padding: 5px;\n box-sizing: border-box;\n }\n\n \/* Responsive Adjustments *\/\n @media (min-width: 768px) {\n .widget-container {\n max-width: 900px; \/* Wider container for desktop *\/\n }\n #reflectionsContentContainer {\n display: grid;\n grid-template-columns: repeat(2, 1fr); \/* 2 columns for reflections *\/\n gap: 20px;\n }\n .reflection-item {\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: none;\n border: 1px solid #e0e0e0;\n padding: 15px;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n }\n .reflection-item h4 {\n margin-bottom: 15px;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"page-wrapper\"> \n <div class=\"widget-container\">\n \n <div class=\"uegp-logo-header\">\n <img decoding=\"async\" src=\"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-content\/uploads\/2025\/06\/icon-192.png\" alt=\"UEGP N\u00b057 Logo\" class=\"uegp-logo-img\">\n <h1>UEGP N\u00b057<\/h1>\n <\/div>\n\n <div class=\"weather-display-section\">\n <h3 class=\"section-title\">Clima Actual<\/h3>\n <p id=\"currentDateTimeDisplay\"><\/p> \n <div id=\"weatherContent\">\n <p class=\"weather-loading\">Cargando clima…<\/p>\n <\/div>\n <\/div>\n\n <div class=\"reflections-section\">\n <h3 class=\"section-title\">Reflexiones Diarias<\/h3>\n <div id=\"reflectionsContentContainer\">\n <div class=\"reflection-item\" id=\"saintSection\">\n <h4>Santoral del D\u00eda<\/h4>\n <div id=\"saintTextDisplay\">\n <script language=\"JavaScript\" src=\"https:\/\/www.es.catholic.net\/contenidos\/santoral.php\"><\/script>\n <\/div>\n <\/div>\n <div class=\"reflection-item\" id=\"purposeSection\">\n <h4>Meditaci\u00f3n Diaria<\/h4>\n <div id=\"purposeTextDisplay\">\n <script language=\"JavaScript\" src=\"https:\/\/www.es.catholic.net\/contenidos\/meditacion.php\"><\/script>\n <\/div>\n <\/div>\n <div class=\"reflection-item\" id=\"readingsSection\">\n <h4>Evangelio y Lecturas del D\u00eda<\/h4>\n <div id=\"readingsTextDisplay\">\n <script language=\"JavaScript\" src=\"https:\/\/www.es.catholic.net\/contenidos\/evangelio.php\"><\/script>\n <\/div>\n <\/div>\n <div class=\"reflection-item\" id=\"topicSection\">\n <h4>Tema Actual<\/h4>\n <div id=\"topicTextDisplay\">\n <script language=\"JavaScript\" src=\"https:\/\/www.es.catholic.net\/contenidos\/controvertido.php\"><\/script>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div> \n\n <footer class=\"page-footer\">\n <p>© <span id=\"currentYear\"><\/span> UEGP N\u00b057. Todos los derechos reservados.<\/p>\n <p class=\"powered-by\">Power By Gustavo K.<\/p>\n <\/footer>\n<\/div>\n\n<div id=\"hourlyModal\" class=\"modal-overlay\" style=\"display: none;\">\n <div class=\"modal-content\">\n <button id=\"modalCloseBtn\" class=\"modal-close-btn\" aria-label=\"Cerrar modal\">×<\/button>\n <h4 id=\"modalTitle\" class=\"modal-title\">Detalles del Pron\u00f3stico<\/h4>\n <div class=\"modal-astro-data\">\n <p>Salida del Sol: <span id=\"modalSunrise\">–:–<\/span><\/p>\n <p>Puesta del Sol: <span id=\"modalSunset\">–:–<\/span><\/p>\n <\/div>\n <div id=\"modalHourlyList\" class=\"modal-hourly-list\">\n <\/div>\n <\/div>\n<\/div>\n\n\n<script>\n \/\/ --- L\u00f3gica del Clima ---\n const WEATHER_API_KEY = '0e2957c8c0a147ec8b1235439252905'; \n const WEATHER_API_BASE_URL = 'https:\/\/api.weatherapi.com\/v1\/forecast.json';\n const WEATHER_LOCATION = 'Charata,Argentina';\n const WEATHER_LANG = 'es';\n const WEATHER_DAYS_FORECAST = 3;\n const weatherContentDiv = document.getElementById('weatherContent');\n const currentDateTimeDisplayEl = document.getElementById('currentDateTimeDisplay');\n\n const hourlyModal = document.getElementById('hourlyModal');\n const modalCloseBtn = document.getElementById('modalCloseBtn');\n const modalTitleEl = document.getElementById('modalTitle');\n const modalSunriseEl = document.getElementById('modalSunrise');\n const modalSunsetEl = document.getElementById('modalSunset');\n const modalHourlyListEl = document.getElementById('modalHourlyList');\n let forecastDataCache = [];\n\n function getWeatherEmoji(conditionText) {\n if (!conditionText) return '🌈';\n const text = conditionText.toLowerCase();\n if (text.includes('sol') || text.includes('despejado') || text.includes('soleado')) return '☀️';\n if (text.includes('parcialmente nublado')) return '⛅';\n if (text.includes('nublado') || text.includes('cubierto')) return '☁️';\n if (text.includes('niebla') || text.includes('neblina')) return '🌫️';\n if (text.includes('lluvia') || text.includes('llovizna')) return '🌧️';\n if (text.includes('aguacero')) return '🌧️';\n if (text.includes('tormenta')) return '⛈️';\n if (text.includes('nieve')) return '❄️';\n if (text.includes('aguanieve')) return '🌨️';\n return '🌈'; \n }\n\n function formatDayName(dateString, index, lang = 'es-ES') {\n if (index === 0) return \"Hoy\";\n const date = new Date(dateString + 'T00:00:00'); \n let dayName = date.toLocaleDateString(lang, { weekday: 'long' });\n return dayName.charAt(0).toUpperCase() + dayName.slice(1);\n }\n\n function formatHourString(dateTimeString) {\n if (!dateTimeString) return '--:--';\n const date = new Date(dateTimeString);\n return date.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit', hour12: false });\n }\n\n function formatCurrentDateTimeForDisplay(date) {\n const d = String(date.getDate()).padStart(2, '0');\n const m = String(date.getMonth() + 1).padStart(2, '0');\n const y = date.getFullYear();\n const h = String(date.getHours()).padStart(2, '0');\n const min = String(date.getMinutes()).padStart(2, '0');\n return `${d}\/${m}\/${y} ${h}:${min}`;\n }\n\n function updateCurrentDateTime() {\n if (currentDateTimeDisplayEl) {\n currentDateTimeDisplayEl.textContent = formatCurrentDateTimeForDisplay(new Date());\n }\n }\n\n async function fetchAndDisplayWeather() {\n const url = `${WEATHER_API_BASE_URL}?key=${WEATHER_API_KEY}&q=${WEATHER_LOCATION}&lang=${WEATHER_LANG}&days=${WEATHER_DAYS_FORECAST}`;\n try {\n const response = await fetch(url);\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error?.message || `Error ${response.status}`);\n }\n const data = await response.json();\n displayWeather(data);\n } catch (error) {\n console.error(\"Error al cargar el clima:\", error);\n weatherContentDiv.innerHTML = `<p class=\"weather-error\">No se pudo cargar el clima: ${error.message}.<\/p>`;\n }\n }\n\n function displayWeather(data) {\n const { location, current, forecast } = data;\n forecastDataCache = forecast.forecastday; \n\n let html = `\n <div class=\"current-weather-card\">\n <p class=\"location\">${location.name}, ${location.region}<\/p>\n <p class=\"condition-text\">${current.condition.text} ${getWeatherEmoji(current.condition.text)}<\/p>\n <p class=\"temp\">${Math.round(current.temp_c)}\u00b0C<\/p>\n <p class=\"details\">Sensaci\u00f3n t\u00e9rmica: ${Math.round(current.feelslike_c)}\u00b0C<\/p>\n <p class=\"details\">Humedad: ${current.humidity}% | Viento: ${current.wind_dir} ${Math.round(current.wind_kph)} km\/h<\/p>\n <\/div>\n <div class=\"forecast-grid\">\n `;\n\n forecast.forecastday.forEach((day, index) => {\n const dayClass = index === 0 ? 'today' : 'other-day';\n html += `\n <div class=\"forecast-day-card ${dayClass}\" data-index=\"${index}\">\n <p class=\"day-name\">${formatDayName(day.date, index)}<\/p>\n <p class=\"emoji\">${getWeatherEmoji(day.day.condition.text)}<\/p>\n <p class=\"condition\">${day.day.condition.text}<\/p>\n <p class=\"temp-range\">${Math.round(day.day.mintemp_c)}\u00b0C \/ ${Math.round(day.day.maxtemp_c)}\u00b0C<\/p>\n <\/div>\n `;\n });\n\n html += `<\/div>`;\n weatherContentDiv.innerHTML = html;\n\n const forecastCards = weatherContentDiv.querySelectorAll('.forecast-day-card');\n forecastCards.forEach(card => {\n card.addEventListener('click', (event) => {\n const index = parseInt(event.currentTarget.dataset.index);\n if (forecastDataCache[index]) {\n openHourlyModal(forecastDataCache[index], index);\n }\n });\n });\n }\n\n function openHourlyModal(dayData, index) {\n if (!dayData) return;\n const dateForTitle = new Date(dayData.date + 'T00:00:00');\n modalTitleEl.textContent = `Pron\u00f3stico para ${formatDayName(dayData.date, index)} (${dateForTitle.toLocaleDateString('es-ES', { day: 'numeric', month: 'long' })})`;\n modalSunriseEl.textContent = dayData.astro.sunrise ? dayData.astro.sunrise.replace(\/^0\/, '') : '--:--';\n modalSunsetEl.textContent = dayData.astro.sunset ? dayData.astro.sunset.replace(\/^0\/, '') : '--:--';\n modalHourlyListEl.innerHTML = ''; \n if (dayData.hour && dayData.hour.length > 0) {\n dayData.hour.forEach(hour => {\n const itemHtml = `\n <div class=\"hourly-item\">\n <span class=\"time\">${formatHourString(hour.time)}<\/span>\n <span class=\"icon\">${getWeatherEmoji(hour.condition.text)}<\/span>\n <span class=\"condition-text\" title=\"${hour.condition.text}\">${hour.condition.text}<\/span>\n <span class=\"temp\">${Math.round(hour.temp_c)}\u00b0C<\/span>\n <span class=\"rain\" title=\"Prob. de lluvia\">💧 ${hour.chance_of_rain}%<\/span>\n <span class=\"wind\" title=\"Viento\">🌬️ ${hour.wind_dir} ${Math.round(hour.wind_kph)} km\/h<\/span>\n <\/div>\n `;\n modalHourlyListEl.insertAdjacentHTML('beforeend', itemHtml);\n });\n } else {\n modalHourlyListEl.innerHTML = '<p style=\"text-align:center; padding:10px;\">No hay datos horarios detallados disponibles.<\/p>';\n }\n hourlyModal.style.display = 'flex';\n }\n\n function closeHourlyModal() {\n hourlyModal.style.display = 'none';\n }\n \n function updateYear() {\n const yearEl = document.getElementById('currentYear');\n if (yearEl) {\n yearEl.textContent = new Date().getFullYear();\n }\n }\n\n modalCloseBtn.addEventListener('click', closeHourlyModal);\n hourlyModal.addEventListener('click', (event) => { \n if (event.target === hourlyModal) { closeHourlyModal(); }\n });\n document.addEventListener('keydown', (event) => { \n if (event.key === 'Escape' && hourlyModal.style.display === 'flex') { closeHourlyModal(); }\n });\n\n document.addEventListener('DOMContentLoaded', () => {\n updateCurrentDateTime(); \n setInterval(updateCurrentDateTime, 60000); \n fetchAndDisplayWeather();\n updateYear();\n });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>UEGP N\u00b057 – Widget UEGP N\u00b057 Clima Actual Cargando clima… Reflexiones Diarias Santoral del D\u00eda Meditaci\u00f3n Diaria Evangelio y Lecturas del D\u00eda Tema Actual © UEGP N\u00b057. Todos los derechos reservados. Power By Gustavo K. × Detalles del Pron\u00f3stico Salida del Sol: –:– Puesta del Sol: –:–<\/p>\n","protected":false},"author":39,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/1239"}],"collection":[{"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/comments?post=1239"}],"version-history":[{"count":9,"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/1239\/revisions"}],"predecessor-version":[{"id":1360,"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/1239\/revisions\/1360"}],"wp:attachment":[{"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/media?parent=1239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1239,"date":"2025-06-18T21:12:21","date_gmt":"2025-06-19T00:12:21","guid":{"rendered":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/?page_id=1239"},"modified":"2025-10-30T21:39:10","modified_gmt":"2025-10-31T00:39:10","slug":"radio-esquiu","status":"publish","type":"page","link":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/radio-esquiu\/","title":{"rendered":"Datos Acrtuales"},"content":{"rendered":"\n\n\n\n\n\nUEGP N\u00b057 – Widget<\/title>\n<style>\n html {\n height: 100%;\n }\n body {\n margin: 0;\n padding: 0; \n background-color: #e0e0e0; \/* Fondo general *\/\n font-family: Arial, sans-serif;\n min-height: 100%;\n box-sizing: border-box;\n }\n .page-wrapper {\n display: flex;\n flex-direction: column; \n align-items: center; \n justify-content: flex-start; \n min-height: 100vh;\n padding: 20px; \n box-sizing: border-box;\n }\n .widget-container {\n width: 100%;\n max-width: 380px; \/* Mobile first *\/\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n border-radius: 12px;\n overflow: hidden;\n margin: 20px auto; \/* Centering for standalone or iframe *\/\n }\n\n \/* Estilos del Logo UEGP (Cabecera) *\/\n .uegp-logo-header {\n background-color: #002b5c; \/* Color institucional *\/\n padding: 20px;\n color: white;\n text-align: center;\n box-sizing: border-box;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n }\n .uegp-logo-img {\n width: 80px;\n height: 80px;\n margin: 0 auto 10px auto;\n display: block;\n border-radius: 8px;\n }\n .uegp-logo-header h1 {\n margin: 10px 0 0 0;\n font-size: 1.8em;\n color: #ffffff;\n }\n\n \/* Estilos del Clima *\/\n .weather-display-section {\n background-color: #f7fafc; \n padding: 20px;\n color: #002b5c; \n box-sizing: border-box;\n }\n .weather-display-section h3.section-title {\n font-size: 1.5em;\n font-weight: 600;\n text-align: center;\n margin-top: 0;\n margin-bottom: 5px; \n color: #002b5c; \n }\n #currentDateTimeDisplay {\n text-align: center;\n font-size: 0.9em;\n color: #555;\n margin-bottom: 15px;\n }\n .weather-loading, .weather-error {\n text-align: center;\n padding: 20px;\n font-size: 1em;\n }\n .weather-error {\n color: #D32F2F; \n }\n .current-weather-card {\n background-color: #002b5c; \n color: white;\n padding: 15px;\n border-radius: 8px;\n text-align: center;\n margin-bottom: 20px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n }\n .current-weather-card .location {\n font-size: 1.25em;\n font-weight: bold;\n margin-bottom: 5px;\n }\n .current-weather-card .condition-text {\n font-size: 1em;\n margin-bottom: 8px;\n }\n .current-weather-card .temp {\n font-size: 2.5em;\n font-weight: bold;\n margin-bottom: 5px;\n }\n .current-weather-card .details {\n font-size: 0.85em;\n }\n .forecast-grid {\n display: grid;\n grid-template-columns: 1fr; \n gap: 10px;\n }\n @media (min-width: 370px) { \/* Small mobile landscape or wider *\/\n .forecast-grid {\n grid-template-columns: repeat(3, 1fr); \n }\n }\n \n .forecast-day-card {\n padding: 10px;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 2px 5px rgba(0,0,0,0.08);\n cursor: pointer; \n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n .forecast-day-card:hover {\n transform: translateY(-3px);\n box-shadow: 0 4px 10px rgba(0,0,0,0.12);\n }\n\n .forecast-day-card.today {\n background-color: #006a4e; \n color: white;\n }\n .forecast-day-card.today .day-name { color: #f0f0f0; }\n .forecast-day-card.today .condition { color: #e0e0e0; }\n .forecast-day-card.today .temp-range { color: #f0f0f0; }\n\n .forecast-day-card.other-day {\n background-color: #e6f2f0; \n color: #002b5c; \n }\n .forecast-day-card .day-name {\n font-weight: 600;\n font-size: 1em;\n margin-bottom: 5px;\n }\n .forecast-day-card .emoji {\n font-size: 2em; \n margin: 5px 0;\n }\n .forecast-day-card .condition {\n font-size: 0.8em;\n margin-bottom: 5px;\n min-height: 2.4em; \n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .forecast-day-card .temp-range {\n font-size: 0.9em;\n }\n\n \/* Footer *\/\n .page-footer {\n text-align: center;\n padding: 15px 0;\n font-size: 0.9em;\n color: #555; \n width: 100%;\n margin-top: 20px;\n box-sizing: border-box;\n }\n .page-footer .powered-by {\n font-size: 0.8em;\n color: #777;\n margin-top: 5px;\n }\n\n \/* Modal Styles (omitidos para brevedad, son los mismos que el original) *\/\n .modal-overlay { \/* ... *\/ }\n .modal-content { \/* ... *\/ }\n .modal-close-btn { \/* ... *\/ }\n .modal-title { \/* ... *\/ }\n .modal-astro-data { \/* ... *\/ }\n .modal-hourly-list { \/* ... *\/ }\n .hourly-item { \/* ... *\/ }\n\n \/* Reflections Section Styles *\/\n .reflections-section {\n background-color: #f0f4f8; \n padding: 20px;\n color: #333; \n box-sizing: border-box;\n margin-top: 0; \n border-top: 1px solid #ddd;\n }\n .reflections-section h3.section-title {\n font-size: 1.4em;\n font-weight: 600;\n text-align: center;\n margin-top: 0;\n margin-bottom: 15px;\n color: #004080; \n }\n \n #reflectionsContentContainer { \/* Styles for mobile (default) *\/ }\n\n .reflection-item { \n margin-bottom: 20px;\n padding-bottom: 15px;\n border-bottom: 1px solid #e0e0e0;\n }\n .reflection-item:last-of-type { \n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n .reflection-item h4 {\n font-size: 1.1em;\n font-weight: bold;\n color: #00509e;\n margin-top: 0;\n margin-bottom: 8px;\n text-align: center; \n }\n .reflection-item div img, .reflection-item p img, .reflection-item img { \n max-width: 100%; \n height: auto;\n border-radius: 4px;\n margin-top: 8px;\n margin-bottom: 12px;\n display: block; \n margin-left: auto;\n margin-right: auto;\n }\n .reflection-item p, .reflection-item div {\n font-size: 0.9em;\n line-height: 1.6;\n word-wrap: break-word;\n }\n .reflection-item div p { \n margin-bottom: 0.75em;\n }\n .reflection-item div strong, \n .reflection-item div b {\n color: #004080;\n }\n #purposeTextDisplay, #readingsTextDisplay, #saintTextDisplay, #topicTextDisplay { \n white-space: normal; \n overflow-wrap: break-word; \n min-height: 50px; \n overflow-x: auto;\n width: 100%;\n padding: 5px;\n box-sizing: border-box;\n }\n\n \/* Responsive Adjustments *\/\n @media (min-width: 768px) {\n .widget-container {\n max-width: 900px; \/* Wider container for desktop *\/\n }\n #reflectionsContentContainer {\n display: grid;\n grid-template-columns: repeat(2, 1fr); \/* 2 columns for reflections *\/\n gap: 20px;\n }\n .reflection-item {\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: none;\n border: 1px solid #e0e0e0;\n padding: 15px;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n }\n .reflection-item h4 {\n margin-bottom: 15px;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"page-wrapper\"> \n <div class=\"widget-container\">\n \n <div class=\"uegp-logo-header\">\n <img decoding=\"async\" src=\"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-content\/uploads\/2025\/06\/icon-192.png\" alt=\"UEGP N\u00b057 Logo\" class=\"uegp-logo-img\">\n <h1>UEGP N\u00b057<\/h1>\n <\/div>\n\n <div class=\"weather-display-section\">\n <h3 class=\"section-title\">Clima Actual<\/h3>\n <p id=\"currentDateTimeDisplay\"><\/p> \n <div id=\"weatherContent\">\n <p class=\"weather-loading\">Cargando clima…<\/p>\n <\/div>\n <\/div>\n\n <div class=\"reflections-section\">\n <h3 class=\"section-title\">Reflexiones Diarias<\/h3>\n <div id=\"reflectionsContentContainer\">\n <div class=\"reflection-item\" id=\"saintSection\">\n <h4>Santoral del D\u00eda<\/h4>\n <div id=\"saintTextDisplay\">\n <script language=\"JavaScript\" src=\"https:\/\/www.es.catholic.net\/contenidos\/santoral.php\"><\/script>\n <\/div>\n <\/div>\n <div class=\"reflection-item\" id=\"purposeSection\">\n <h4>Meditaci\u00f3n Diaria<\/h4>\n <div id=\"purposeTextDisplay\">\n <script language=\"JavaScript\" src=\"https:\/\/www.es.catholic.net\/contenidos\/meditacion.php\"><\/script>\n <\/div>\n <\/div>\n <div class=\"reflection-item\" id=\"readingsSection\">\n <h4>Evangelio y Lecturas del D\u00eda<\/h4>\n <div id=\"readingsTextDisplay\">\n <script language=\"JavaScript\" src=\"https:\/\/www.es.catholic.net\/contenidos\/evangelio.php\"><\/script>\n <\/div>\n <\/div>\n <div class=\"reflection-item\" id=\"topicSection\">\n <h4>Tema Actual<\/h4>\n <div id=\"topicTextDisplay\">\n <script language=\"JavaScript\" src=\"https:\/\/www.es.catholic.net\/contenidos\/controvertido.php\"><\/script>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div> \n\n <footer class=\"page-footer\">\n <p>© <span id=\"currentYear\"><\/span> UEGP N\u00b057. Todos los derechos reservados.<\/p>\n <p class=\"powered-by\">Power By Gustavo K.<\/p>\n <\/footer>\n<\/div>\n\n<div id=\"hourlyModal\" class=\"modal-overlay\" style=\"display: none;\">\n <div class=\"modal-content\">\n <button id=\"modalCloseBtn\" class=\"modal-close-btn\" aria-label=\"Cerrar modal\">×<\/button>\n <h4 id=\"modalTitle\" class=\"modal-title\">Detalles del Pron\u00f3stico<\/h4>\n <div class=\"modal-astro-data\">\n <p>Salida del Sol: <span id=\"modalSunrise\">–:–<\/span><\/p>\n <p>Puesta del Sol: <span id=\"modalSunset\">–:–<\/span><\/p>\n <\/div>\n <div id=\"modalHourlyList\" class=\"modal-hourly-list\">\n <\/div>\n <\/div>\n<\/div>\n\n\n<script>\n \/\/ --- L\u00f3gica del Clima ---\n const WEATHER_API_KEY = '0e2957c8c0a147ec8b1235439252905'; \n const WEATHER_API_BASE_URL = 'https:\/\/api.weatherapi.com\/v1\/forecast.json';\n const WEATHER_LOCATION = 'Charata,Argentina';\n const WEATHER_LANG = 'es';\n const WEATHER_DAYS_FORECAST = 3;\n const weatherContentDiv = document.getElementById('weatherContent');\n const currentDateTimeDisplayEl = document.getElementById('currentDateTimeDisplay');\n\n const hourlyModal = document.getElementById('hourlyModal');\n const modalCloseBtn = document.getElementById('modalCloseBtn');\n const modalTitleEl = document.getElementById('modalTitle');\n const modalSunriseEl = document.getElementById('modalSunrise');\n const modalSunsetEl = document.getElementById('modalSunset');\n const modalHourlyListEl = document.getElementById('modalHourlyList');\n let forecastDataCache = [];\n\n function getWeatherEmoji(conditionText) {\n if (!conditionText) return '🌈';\n const text = conditionText.toLowerCase();\n if (text.includes('sol') || text.includes('despejado') || text.includes('soleado')) return '☀️';\n if (text.includes('parcialmente nublado')) return '⛅';\n if (text.includes('nublado') || text.includes('cubierto')) return '☁️';\n if (text.includes('niebla') || text.includes('neblina')) return '🌫️';\n if (text.includes('lluvia') || text.includes('llovizna')) return '🌧️';\n if (text.includes('aguacero')) return '🌧️';\n if (text.includes('tormenta')) return '⛈️';\n if (text.includes('nieve')) return '❄️';\n if (text.includes('aguanieve')) return '🌨️';\n return '🌈'; \n }\n\n function formatDayName(dateString, index, lang = 'es-ES') {\n if (index === 0) return \"Hoy\";\n const date = new Date(dateString + 'T00:00:00'); \n let dayName = date.toLocaleDateString(lang, { weekday: 'long' });\n return dayName.charAt(0).toUpperCase() + dayName.slice(1);\n }\n\n function formatHourString(dateTimeString) {\n if (!dateTimeString) return '--:--';\n const date = new Date(dateTimeString);\n return date.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit', hour12: false });\n }\n\n function formatCurrentDateTimeForDisplay(date) {\n const d = String(date.getDate()).padStart(2, '0');\n const m = String(date.getMonth() + 1).padStart(2, '0');\n const y = date.getFullYear();\n const h = String(date.getHours()).padStart(2, '0');\n const min = String(date.getMinutes()).padStart(2, '0');\n return `${d}\/${m}\/${y} ${h}:${min}`;\n }\n\n function updateCurrentDateTime() {\n if (currentDateTimeDisplayEl) {\n currentDateTimeDisplayEl.textContent = formatCurrentDateTimeForDisplay(new Date());\n }\n }\n\n async function fetchAndDisplayWeather() {\n const url = `${WEATHER_API_BASE_URL}?key=${WEATHER_API_KEY}&q=${WEATHER_LOCATION}&lang=${WEATHER_LANG}&days=${WEATHER_DAYS_FORECAST}`;\n try {\n const response = await fetch(url);\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error?.message || `Error ${response.status}`);\n }\n const data = await response.json();\n displayWeather(data);\n } catch (error) {\n console.error(\"Error al cargar el clima:\", error);\n weatherContentDiv.innerHTML = `<p class=\"weather-error\">No se pudo cargar el clima: ${error.message}.<\/p>`;\n }\n }\n\n function displayWeather(data) {\n const { location, current, forecast } = data;\n forecastDataCache = forecast.forecastday; \n\n let html = `\n <div class=\"current-weather-card\">\n <p class=\"location\">${location.name}, ${location.region}<\/p>\n <p class=\"condition-text\">${current.condition.text} ${getWeatherEmoji(current.condition.text)}<\/p>\n <p class=\"temp\">${Math.round(current.temp_c)}\u00b0C<\/p>\n <p class=\"details\">Sensaci\u00f3n t\u00e9rmica: ${Math.round(current.feelslike_c)}\u00b0C<\/p>\n <p class=\"details\">Humedad: ${current.humidity}% | Viento: ${current.wind_dir} ${Math.round(current.wind_kph)} km\/h<\/p>\n <\/div>\n <div class=\"forecast-grid\">\n `;\n\n forecast.forecastday.forEach((day, index) => {\n const dayClass = index === 0 ? 'today' : 'other-day';\n html += `\n <div class=\"forecast-day-card ${dayClass}\" data-index=\"${index}\">\n <p class=\"day-name\">${formatDayName(day.date, index)}<\/p>\n <p class=\"emoji\">${getWeatherEmoji(day.day.condition.text)}<\/p>\n <p class=\"condition\">${day.day.condition.text}<\/p>\n <p class=\"temp-range\">${Math.round(day.day.mintemp_c)}\u00b0C \/ ${Math.round(day.day.maxtemp_c)}\u00b0C<\/p>\n <\/div>\n `;\n });\n\n html += `<\/div>`;\n weatherContentDiv.innerHTML = html;\n\n const forecastCards = weatherContentDiv.querySelectorAll('.forecast-day-card');\n forecastCards.forEach(card => {\n card.addEventListener('click', (event) => {\n const index = parseInt(event.currentTarget.dataset.index);\n if (forecastDataCache[index]) {\n openHourlyModal(forecastDataCache[index], index);\n }\n });\n });\n }\n\n function openHourlyModal(dayData, index) {\n if (!dayData) return;\n const dateForTitle = new Date(dayData.date + 'T00:00:00');\n modalTitleEl.textContent = `Pron\u00f3stico para ${formatDayName(dayData.date, index)} (${dateForTitle.toLocaleDateString('es-ES', { day: 'numeric', month: 'long' })})`;\n modalSunriseEl.textContent = dayData.astro.sunrise ? dayData.astro.sunrise.replace(\/^0\/, '') : '--:--';\n modalSunsetEl.textContent = dayData.astro.sunset ? dayData.astro.sunset.replace(\/^0\/, '') : '--:--';\n modalHourlyListEl.innerHTML = ''; \n if (dayData.hour && dayData.hour.length > 0) {\n dayData.hour.forEach(hour => {\n const itemHtml = `\n <div class=\"hourly-item\">\n <span class=\"time\">${formatHourString(hour.time)}<\/span>\n <span class=\"icon\">${getWeatherEmoji(hour.condition.text)}<\/span>\n <span class=\"condition-text\" title=\"${hour.condition.text}\">${hour.condition.text}<\/span>\n <span class=\"temp\">${Math.round(hour.temp_c)}\u00b0C<\/span>\n <span class=\"rain\" title=\"Prob. de lluvia\">💧 ${hour.chance_of_rain}%<\/span>\n <span class=\"wind\" title=\"Viento\">🌬️ ${hour.wind_dir} ${Math.round(hour.wind_kph)} km\/h<\/span>\n <\/div>\n `;\n modalHourlyListEl.insertAdjacentHTML('beforeend', itemHtml);\n });\n } else {\n modalHourlyListEl.innerHTML = '<p style=\"text-align:center; padding:10px;\">No hay datos horarios detallados disponibles.<\/p>';\n }\n hourlyModal.style.display = 'flex';\n }\n\n function closeHourlyModal() {\n hourlyModal.style.display = 'none';\n }\n \n function updateYear() {\n const yearEl = document.getElementById('currentYear');\n if (yearEl) {\n yearEl.textContent = new Date().getFullYear();\n }\n }\n\n modalCloseBtn.addEventListener('click', closeHourlyModal);\n hourlyModal.addEventListener('click', (event) => { \n if (event.target === hourlyModal) { closeHourlyModal(); }\n });\n document.addEventListener('keydown', (event) => { \n if (event.key === 'Escape' && hourlyModal.style.display === 'flex') { closeHourlyModal(); }\n });\n\n document.addEventListener('DOMContentLoaded', () => {\n updateCurrentDateTime(); \n setInterval(updateCurrentDateTime, 60000); \n fetchAndDisplayWeather();\n updateYear();\n });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>UEGP N\u00b057 – Widget UEGP N\u00b057 Clima Actual Cargando clima… Reflexiones Diarias Santoral del D\u00eda Meditaci\u00f3n Diaria Evangelio y Lecturas del D\u00eda Tema Actual © UEGP N\u00b057. Todos los derechos reservados. Power By Gustavo K. × Detalles del Pron\u00f3stico Salida del Sol: –:– Puesta del Sol: –:–<\/p>\n","protected":false},"author":39,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/1239"}],"collection":[{"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/comments?post=1239"}],"version-history":[{"count":9,"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/1239\/revisions"}],"predecessor-version":[{"id":1360,"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/1239\/revisions\/1360"}],"wp:attachment":[{"href":"https:\/\/uep57-cha.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/media?parent=1239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}