{"id":482,"date":"2026-07-01T18:19:12","date_gmt":"2026-07-01T18:19:12","guid":{"rendered":"https:\/\/roque.tecnm.mx\/?page_id=482"},"modified":"2026-07-02T16:52:57","modified_gmt":"2026-07-02T16:52:57","slug":"estacion-climatologica-roque","status":"publish","type":"page","link":"https:\/\/roque.tecnm.mx\/?page_id=482","title":{"rendered":"Estacion Climatologica Roque"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center alignfull has-base-2-color has-text-color has-background has-link-color wp-elements-df3033dc7aa9f99683eb2ca62f3c8a2f\" style=\"background-color:#611232\">Estaci\u00f3n Climatol\u00f3gica del TecNM Roque<\/h3>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================\n   CONFIG GLOBAL\n========================= *\/\nbody {\n    background: linear-gradient(180deg, #eef4f8 0%, #f8fafc 100%);\n    font-family: Arial, Helvetica, sans-serif;\n}\n\n\/* Contenedor principal *\/\nmain {\n    width: min(1600px, 96%) !important;\n    max-width: none !important;\n    margin: 0 auto;\n}\n\n\/* =========================\n   HERO \/ HEADER\n========================= *\/\nheader {\n    border-radius: 0 0 24px 24px;\n    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);\n}\n\nheader h1 {\n    font-size: clamp(2rem, 5vw, 4rem) !important;\n    font-weight: 800;\n    letter-spacing: -0.03em;\n}\n\nheader p {\n    font-size: 1.1rem;\n}\n\n\/* Caja de \u00faltima actualizaci\u00f3n *\/\n#lblUltimaFecha {\n    font-size: 1rem;\n}\n\n\/* =========================\n   KPI CARDS\n========================= *\/\nsection:first-of-type > div {\n    transition: all 0.25s ease;\n    border-radius: 24px !important;\n    padding: 32px !important;\n    box-shadow: 0 8px 22px rgba(0,0,0,0.06);\n}\n\nsection:first-of-type > div:hover {\n    transform: translateY(-6px);\n    box-shadow: 0 18px 35px rgba(0,0,0,0.12);\n}\n\nsection:first-of-type span[id^=\"kpi\"] {\n    font-size: clamp(2.3rem, 3vw, 4rem) !important;\n    font-weight: 800 !important;\n}\n\n\/* =========================\n   PANEL DE GR\u00c1FICAS\n========================= *\/\n.chart-container {\n    border-radius: 18px;\n}\n\nsection:nth-of-type(2) {\n    border-radius: 28px !important;\n    box-shadow: 0 8px 30px rgba(0,0,0,0.07);\n}\n\n\/* Altura mayor para gr\u00e1ficas *\/\n.relative.h-80 {\n    height: 520px !important;\n}\n\n\/* Tabs *\/\n.tab-btn {\n    transition: all 0.25s ease;\n}\n\n.tab-btn:hover {\n    transform: translateY(-2px);\n}\n\n\/* Select *\/\nselect {\n    min-width: 150px;\n}\n\n\/* =========================\n   TABLA\n========================= *\/\nsection:nth-of-type(3) {\n    border-radius: 28px !important;\n    box-shadow: 0 8px 30px rgba(0,0,0,0.07);\n}\n\ntable {\n    width: 100%;\n    border-collapse: collapse;\n}\n\nthead tr {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n}\n\ntbody tr {\n    transition: background 0.2s ease;\n}\n\ntbody tr:hover {\n    background: #f1f5f9;\n}\n\n\/* Encabezados *\/\nth {\n    font-size: 0.85rem !important;\n}\n\n\/* Celdas *\/\ntd {\n    font-size: 0.95rem;\n}\n\n\/* =========================\n   BOTONES PAGINACI\u00d3N\n========================= *\/\nbutton {\n    transition: all 0.2s ease;\n}\n\nbutton:hover:not(:disabled) {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 18px rgba(0,0,0,0.1);\n}\n\nbutton:active:not(:disabled) {\n    transform: scale(0.98);\n}\n\n\/* =========================\n   RESPONSIVE\n========================= *\/\n@media (max-width: 1024px) {\n    .relative.h-80 {\n        height: 420px !important;\n    }\n}\n\n@media (max-width: 768px) {\n    main {\n        width: 98% !important;\n    }\n\n    header {\n        text-align: center;\n        padding: 30px 20px !important;\n    }\n\n    header h1 {\n        font-size: 2rem !important;\n    }\n\n    .relative.h-80 {\n        height: 340px !important;\n    }\n\n    table {\n        min-width: 700px;\n    }\n}\n<\/style>\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Estaci\u00f3n Climatol\u00f3gica TecNM Roque<\/title>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n\n\n    <header class=\"bg-gradient-to-r from-blue-700 to-indigo-800 text-white shadow-lg px-6 py-8 text-center md:text-left\">\n        <div class=\"max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\n            \n            <div class=\"bg-white\/10 backdrop-blur-md px-4 py-2 rounded-lg text-xs md:text-sm border border-white\/20\">\n                \u00daltima actualizaci\u00f3n <span id=\"lblUltimaFecha\" class=\"font-bold\">&#8212;<\/span>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <main class=\"max-w-7xl mx-auto px-4 py-8 space-y-8\">\n        \n        <section class=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n            <div class=\"bg-white p-5 rounded-2xl shadow-xs border border-slate-200\/80 flex flex-col justify-between\">\n                <span class=\"text-xs font-semibold text-slate-400 uppercase tracking-wider\">Precipitaci\u00f3n<\/span>\n                <div class=\"mt-2 flex items-baseline gap-1\">\n                    <span id=\"kpiPrec\" class=\"text-2xl md:text-3xl font-bold text-blue-600\">&#8212;<\/span>\n                    <span class=\"text-xs text-slate-500 font-medium\">mm<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"bg-white p-5 rounded-2xl shadow-xs border border-slate-200\/80 flex flex-col justify-between\">\n                <span class=\"text-xs font-semibold text-slate-400 uppercase tracking-wider\">Evaporaci\u00f3n<\/span>\n                <div class=\"mt-2 flex items-baseline gap-1\">\n                    <span id=\"kpiEvap\" class=\"text-2xl md:text-3xl font-bold text-amber-600\">&#8212;<\/span>\n                    <span class=\"text-xs text-slate-500 font-medium\">mm<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"bg-white p-5 rounded-2xl shadow-xs border border-slate-200\/80 flex flex-col justify-between\">\n                <span class=\"text-xs font-semibold text-slate-400 uppercase tracking-wider\">Temp. M\u00e1xima<\/span>\n                <div class=\"mt-2 flex items-baseline gap-1\">\n                    <span id=\"kpiTmax\" class=\"text-2xl md:text-3xl font-bold text-rose-500\">&#8212;<\/span>\n                    <span class=\"text-xs text-slate-500 font-medium\">\u00b0C<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"bg-white p-5 rounded-2xl shadow-xs border border-slate-200\/80 flex flex-col justify-between\">\n                <span class=\"text-xs font-semibold text-slate-400 uppercase tracking-wider\">Temp. M\u00ednima<\/span>\n                <div class=\"mt-2 flex items-baseline gap-1\">\n                    <span id=\"kpiTmin\" class=\"text-2xl md:text-3xl font-bold text-sky-500\">&#8212;<\/span>\n                    <span class=\"text-xs text-slate-500 font-medium\">\u00b0C<\/span>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section class=\"bg-white rounded-2xl shadow-xs border border-slate-200\/80 p-6 space-y-6\">\n            <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 border-b border-slate-100 pb-4\">\n                <div class=\"flex gap-2 bg-slate-100 p-1 rounded-xl w-full sm:w-auto\">\n                    <button onclick=\"cambiarTab('temp')\" id=\"tab-temp\" class=\"tab-btn flex-1 sm:flex-none px-4 py-2 rounded-lg text-sm font-medium transition bg-white text-slate-800 shadow-xs\">Temperaturas<\/button>\n                    <button onclick=\"cambiarTab('prec')\" id=\"tab-prec\" class=\"tab-btn flex-1 sm:flex-none px-4 py-2 rounded-lg text-sm font-medium transition text-slate-500 hover:text-slate-800\">Precipitaci\u00f3n<\/button>\n                    <button onclick=\"cambiarTab('evap')\" id=\"tab-evap\" class=\"tab-btn flex-1 sm:flex-none px-4 py-2 rounded-lg text-sm font-medium transition text-slate-500 hover:text-slate-800\">Evaporaci\u00f3n<\/button>\n                <\/div>\n\n                <div class=\"flex items-center gap-2 w-full sm:w-auto justify-end\">\n                    <label for=\"filtroRango\" class=\"text-xs text-slate-500 font-medium whitespace-nowrap\">Ver \u00faltimos:<\/label>\n                    <select id=\"filtroRango\" onchange=\"cambiarRangoGrafica()\" class=\"bg-slate-50 border border-slate-200 text-sm rounded-lg px-3 py-1.5 focus:outline-hidden focus:ring-2 focus:ring-blue-500\">\n                        <option value=\"15\" selected=\"\">15 d\u00edas<\/option>\n                        <option value=\"30\">30 d\u00edas<\/option>\n                        <option value=\"90\">3 meses<\/option>\n                        <option value=\"all\">Todo el Historial<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n\n            <div class=\"relative h-80 w-full\">\n                <div id=\"wrapper-temp\" class=\"chart-container w-full h-full\">\n                    <canvas id=\"chartTemperaturas\"><\/canvas>\n                <\/div>\n                <div id=\"wrapper-prec\" class=\"chart-container w-full h-full hidden\">\n                    <canvas id=\"chartPrecipitacion\"><\/canvas>\n                <\/div>\n                <div id=\"wrapper-evap\" class=\"chart-container w-full h-full hidden\">\n                    <canvas id=\"chartEvaporacion\"><\/canvas>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section class=\"bg-white rounded-2xl shadow-xs border border-slate-200\/80 overflow-hidden\">\n            <div class=\"p-5 bg-slate-50\/50 border-b border-slate-100 flex justify-between items-center flex-wrap gap-4\">\n                \n                    \n                <\/div>\n                <span id=\"infoPaginacion\" class=\"text-xs bg-slate-100 text-slate-600 font-semibold px-3 py-1.5 rounded-lg\"><\/span>\n            \n            \n            <div class=\"overflow-x-auto\">\n                <table class=\"w-full text-left border-collapse\">\n                    <thead>\n                        <tr class=\"bg-slate-50 text-slate-500 uppercase text-[11px] font-bold tracking-wider border-b border-slate-200\/60\">\n                            <th class=\"p-4 pl-6\">Fecha del Reporte<\/th>\n                            <th class=\"p-4\">Precipitaci\u00f3n<\/th>\n                            <th class=\"p-4\">Evaporaci\u00f3n<\/th>\n                            <th class=\"p-4\">Temp. M\u00e1xima<\/th>\n                            <th class=\"p-4 pr-6\">Temp. M\u00ednima<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody id=\"tablaCuerpo\" class=\"divide-y divide-slate-100 text-sm text-slate-700\">\n                        <tr>\n                            <td colspan=\"5\" class=\"p-12 text-center text-slate-400\">\n                                <div class=\"inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mb-2\"><\/div>\n                                <p class=\"text-xs font-medium\">Sincronizando con los datos de roque.tecnm.mx&#8230;<\/p>\n                            <\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n            <\/div>\n\n            <div class=\"p-4 bg-slate-50\/50 border-t border-slate-100 flex justify-between items-center px-6\">\n                <button id=\"btnAnterior\" class=\"px-4 py-2 bg-white border border-slate-200 shadow-2xs rounded-xl text-xs font-semibold text-slate-700 hover:bg-slate-50 active:scale-98 disabled:opacity-40 disabled:pointer-events-none transition flex items-center gap-1\">\n                    \u2190 Anterior\n                <\/button>\n                <div class=\"text-xs font-medium text-slate-500\">\n                    P\u00e1gina <span id=\"paginaActual\" class=\"font-bold text-slate-800\">1<\/span> de <span id=\"paginasTotales\" class=\"font-bold text-slate-800\">1<\/span>\n                <\/div>\n                <button id=\"btnSiguiente\" class=\"px-4 py-2 bg-white border border-slate-200 shadow-2xs rounded-xl text-xs font-semibold text-slate-700 hover:bg-slate-50 active:scale-98 disabled:opacity-40 disabled:pointer-events-none transition flex items-center gap-1\">\n                    Siguiente \u2192\n                <\/button>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <script>\n        const urlJSON = 'https:\/\/roque.tecnm.mx\/wp-content\/uploads\/2026\/07\/datos.json'; \n        const registrosPorPagina = 10;\n        \n        let datosClimaticos = [];\n        let paginaActual = 1;\n        let instanciasCharts = {}; \/\/ Para guardar los objetos de Chart.js y poder destruirlos\/actualizarlos\n\n        window.addEventListener('DOMContentLoaded', () => {\n            fetch(urlJSON)\n                .then(res => { if (!res.ok) throw new Error('Error de red'); return res.json(); })\n                .then(data => {\n                    datosClimaticos = Array.isArray(data) ? data : [];\n                    datosClimaticos = datosClimaticos.filter(row => row['Fecha'] || row['fecha']);\n                    \n                    \/\/ Ordenar: M\u00e1s reciente primero\n                    datosClimaticos.sort((a, b) => new Date(b['Fecha'] || b['fecha']) - new Date(a['Fecha'] || a['fecha']));\n                    \n                    \/\/ Cargar KPIs de la fila superior (El d\u00eda m\u00e1s reciente)\n                    establecerKPIs(datosClimaticos[0]);\n\n                    \/\/ Renderizar interfaces\n                    actualizarTabla();\n                    renderizarTodasLasGraficas();\n                })\n                .catch(err => {\n                    document.getElementById('tablaCuerpo').innerHTML = `\n                        <tr><td colspan=\"5\" class=\"p-12 text-center text-red-500 text-xs font-semibold\">\n                            No se pudo acceder al origen JSON en el servidor remoto. Comprueba la configuraci\u00f3n de origen cruzado (CORS).\n                        <\/td><\/tr>`;\n                });\n\n            \/\/ Handlers de paginaci\u00f3n\n            document.getElementById('btnAnterior').addEventListener('click', () => { if (paginaActual > 1) { paginaActual--; actualizarTabla(); } });\n            document.getElementById('btnSiguiente').addEventListener('click', () => {\n                if (paginaActual < Math.ceil(datosClimaticos.length \/ registrosPorPagina)) { paginaActual++; actualizarTabla(); }\n            });\n        });\n\n        \/\/ Configura los cuadros de la parte superior con el \u00faltimo registro disponible\n        function establecerKPIs(ultimoRegistro) {\n            if (!ultimoRegistro) return;\n            document.getElementById('lblUltimaFecha').textContent = ultimoRegistro['Fecha'] || ultimoRegistro['fecha'] || '--';\n            document.getElementById('kpiPrec').textContent = ultimoRegistro['Precipitaci\u00f3n (mm)'] || ultimoRegistro['precipitacion'] || 0;\n            document.getElementById('kpiEvap').textContent = ultimoRegistro['Evaporaci\u00f3n (mm)'] || ultimoRegistro['evaporacion'] || 0;\n            document.getElementById('kpiTmax').textContent = ultimoRegistro['TMAX (\u00b0C)'] || ultimoRegistro['tmax'] || '--';\n            document.getElementById('kpiTmin').textContent = ultimoRegistro['TMIN (\u00b0C)'] || ultimoRegistro['tmin'] || '--';\n        }\n\n        function actualizarTabla() {\n            const cuerpo = document.getElementById('tablaCuerpo');\n            cuerpo.innerHTML = '';\n\n            const totalPaginas = Math.ceil(datosClimaticos.length \/ registrosPorPagina) || 1;\n            const inicio = (paginaActual - 1) * registrosPorPagina;\n            const fin = inicio + registrosPorPagina;\n            const datosPagina = datosClimaticos.slice(inicio, fin);\n\n            datosPagina.forEach(row => {\n                const f = row['Fecha'] || row['fecha'] || '--';\n                const p = row['Precipitaci\u00f3n (mm)'] || row['precipitacion'] || 0;\n                const e = row['Evaporaci\u00f3n (mm)'] || row['evaporacion'] || 0;\n                const mx = row['TMAX (\u00b0C)'] || row['tmax'] || '--';\n                const mn = row['TMIN (\u00b0C)'] || row['tmin'] || '--';\n\n                const tr = document.createElement('tr');\n                tr.className = \"hover:bg-slate-50\/80 transition duration-150\";\n                tr.innerHTML = `\n                    <td class=\"p-4 pl-6 font-semibold text-slate-900\">${f}<\/td>\n                    <td class=\"p-4\"><span class=\"px-2 py-1 bg-blue-50 text-blue-700 rounded-md font-medium text-xs\">${p} mm<\/span><\/td>\n                    <td class=\"p-4\"><span class=\"px-2 py-1 bg-amber-50 text-amber-700 rounded-md font-medium text-xs\">${e} mm<\/span><\/td>\n                    <td class=\"p-4 text-rose-600 font-semibold\">${mx} \u00b0C<\/td>\n                    <td class=\"p-4 pr-6 text-sky-600 font-semibold\">${mn} \u00b0C<\/td>\n                `;\n                cuerpo.appendChild(tr);\n            });\n\n            document.getElementById('paginaActual').textContent = paginaActual;\n            document.getElementById('paginasTotales').textContent = totalPaginas;\n            document.getElementById('infoPaginacion').textContent = `${inicio + 1}-${Math.min(fin, datosClimaticos.length)} de ${datosClimaticos.length} d\u00edas`;\n            document.getElementById('btnAnterior').disabled = (paginaActual === 1);\n            document.getElementById('btnSiguiente').disabled = (paginaActual === totalPaginas);\n        }\n\n        \/\/ Navegaci\u00f3n entre las pesta\u00f1as (Tabs)\n        function cambiarTab(tipo) {\n            document.querySelectorAll('.chart-container').forEach(el => el.classList.add('hidden'));\n            document.querySelectorAll('.tab-btn').forEach(btn => {\n                btn.classList.remove('bg-white', 'text-slate-800', 'shadow-xs');\n                btn.classList.add('text-slate-500', 'hover:text-slate-800');\n            });\n\n            document.getElementById(`wrapper-${tipo}`).classList.remove('hidden');\n            const activo = document.getElementById(`tab-${tipo}`);\n            activo.classList.add('bg-white', 'text-slate-800', 'shadow-xs');\n            activo.classList.remove('text-slate-500', 'hover:text-slate-800');\n        }\n\n        function cambiarRangoGrafica() {\n            renderizarTodasLasGraficas();\n        }\n\n        function renderizarTodasLasGraficas() {\n            \/\/ Obtener el l\u00edmite de tiempo seleccionado\n            const filtro = document.getElementById('filtroRango').value;\n            let muestra = [...datosClimaticos].reverse(); \/\/ De pasado a presente para la l\u00ednea de tiempo\n            \n            if (filtro !== 'all') {\n                const limite = parseInt(filtro);\n                muestra = datosClimaticos.slice(0, limite).reverse();\n            }\n\n            const fechas = muestra.map(d => d['Fecha'] || d['fecha']);\n            const prec = muestra.map(d => d['Precipitaci\u00f3n (mm)'] || d['precipitacion'] || 0);\n            const evap = muestra.map(d => d['Evaporaci\u00f3n (mm)'] || d['evaporacion'] || 0);\n            const tmax = muestra.map(d => d['TMAX (\u00b0C)'] || d['tmax'] || null);\n            const tmin = muestra.map(d => d['TMIN (\u00b0C)'] || d['tmin'] || null);\n\n            const opcionesComunes = {\n                responsive: true,\n                maintainAspectRatio: false,\n                plugins: { legend: { position: 'top', labels: { boxWidth: 12, font: { size: 11, weight: '500' } } } },\n                scales: { \n                    x: { grid: { display: false }, ticks: { font: { size: 10 }, maxRotation: 45 } },\n                    y: { grid: { color: '#f1f5f9' }, ticks: { font: { size: 10 } } }\n                }\n            };\n\n            \/\/ Destruir instancias previas para evitar superposiciones de datos\n            if (instanciasCharts.temp) instanciasCharts.temp.destroy();\n            if (instanciasCharts.prec) instanciasCharts.prec.destroy();\n            if (instanciasCharts.evap) instanciasCharts.evap.destroy();\n\n            \/\/ 1. Gr\u00e1fica Temperaturas\n            instanciasCharts.temp = new Chart(document.getElementById('chartTemperaturas'), {\n                type: 'line',\n                data: {\n                    labels: fechas,\n                    datasets: [\n                        { label: 'M\u00e1xima (\u00b0C)', data: tmax, borderColor: '#f43f5e', backgroundColor: 'transparent', borderWidth: 2, tension: 0.25 },\n                        { label: 'M\u00ednima (\u00b0C)', data: tmin, borderColor: '#0ea5e9', backgroundColor: 'transparent', borderWidth: 2, tension: 0.25 }\n                    ]\n                },\n                options: opcionesComunes\n            });\n\n            \/\/ 2. Gr\u00e1fica Precipitaci\u00f3n\n            instanciasCharts.prec = new Chart(document.getElementById('chartPrecipitacion'), {\n                type: 'bar',\n                data: {\n                    labels: fechas,\n                    datasets: [{ label: 'Lluvia (mm)', data: prec, backgroundColor: 'rgba(37, 99, 235, 0.75)', borderRadius: 4 }]\n                },\n                options: opcionesComunes\n            });\n\n            \/\/ 3. Gr\u00e1fica Evaporaci\u00f3n\n            instanciasCharts.evap = new Chart(document.getElementById('chartEvaporacion'), {\n                type: 'line',\n                data: {\n                    labels: fechas,\n                    datasets: [{ label: 'Evaporaci\u00f3n (mm)', data: evap, borderColor: '#d97706', backgroundColor: 'rgba(217, 119, 6, 0.05)', fill: true, borderWidth: 2, tension: 0.2 }]\n                },\n                options: opcionesComunes\n            });\n        }\n    <\/script>\n\n\n\n<footer style=\"width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; position: relative !important; left: 50% !important; transform: translateX(-50%) !important; font-family: 'Open Sans', Helvetica, Arial, sans-serif; box-sizing: border-box; display: block !important; clear: both !important; margin: 0 !important; padding: 0 !important;\">\n  \n  <div style=\"background-color: #1B3660 !important; color: #ffffff !important; width: 100% !important; padding: 40px 0 !important; font-size: 14px !important;\">\n    <div style=\"max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; display: flex !important; flex-direction: row !important; justify-content: space-around !important; flex-wrap: wrap !important; gap: 40px !important; box-sizing: border-box !important;\">\n      \n      <div style=\"flex: 1 !important; min-width: 300px !important; text-align: center !important;\">\n        <h4 style=\"color: #ffffff !important; font-size: 18px !important; margin-bottom: 15px !important;\">CAMPUS ROQUE<\/h4>\n        <p style=\"line-height: 1.8 !important; margin: 10px 0 !important;\">\n          \ud83d\udccd Carretera Celaya-Juventino Rosas, Km.8, C.P. 38110<br>\n          \ud83d\udcde 461 6 11 59 03<br>\n          \ud83d\udcde 461 6 11 63 62\n        <\/p>\n        <div style=\"margin-top: 15px !important;\">\n          <center>\n            <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m14!1m8!1m3!1d14940.65323395766!2d-100.8268118!3d20.5813874!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x94dd9ba5b515776e!2sInstituto%20Tecnol%C3%B3gico%20de%20Roque!5e0!3m2!1ses-419!2smx!4v1618856305642!5m2!1ses-419!2smx\" width=\"80%\" height=\"250px\" style=\"border: 2px solid #ffffff !important;\" allowfullscreen=\"\" loading=\"lazy\"><\/iframe>\n          <\/center>\n        <\/div>\n      <\/div>\n\n      <div style=\"flex: 1 !important; min-width: 300px !important; text-align: center !important;\">\n        <h4 style=\"color: #ffffff !important; font-size: 18px !important; margin-bottom: 15px !important;\">CAMPUS APASEO EL ALTO<\/h4>\n        <p style=\"line-height: 1.8 !important; margin: 10px 0 !important;\">\n          \ud83d\udccd Carretera Apaseo el Alto &#8211; Jer\u00e9cuaro Km.12, C.P. 38525<br>\n          \ud83d\udcde 413 16 65 800<br>\n          Ext 101 y 102\n        <\/p>\n        <div style=\"margin-top: 15px !important;\">\n          <center>\n            <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m14!1m8!1m3!1d19697.48266874833!2d-100.56907744788188!3d20.357807750883044!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9f5e5ec41a7eca34!2sInstituto%20Tecnologico%20de%20Roque%20Extension%20Apaseo%20el%20Alto!5e0!3m2!1ses-419!2smx!4v1618259538693!5m2!1ses-419!2smx\" width=\"80%\" height=\"250px\" style=\"border: 2px solid #ffffff !important;\" allowfullscreen=\"\" loading=\"lazy\"><\/iframe>\n          <\/center>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <div style=\"background-color: #13322b !important; color: #ffffff !important; width: 100% !important; padding: 30px 0 !important; font-size: 13px !important; line-height: 1.8 !important;\">\n    <div style=\"max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 20px !important; box-sizing: border-box !important;\">\n      \n      <div style=\"flex: 1 !important; min-width: 220px !important;\">\n        <img decoding=\"async\" src=\"https:\/\/www.gob.mx\/resources\/img\/logo_gob_mx.png\" alt=\"Government Logo\" style=\"height: 40px !important; margin-bottom: 15px !important;\">\n      <\/div>\n      \n      <div style=\"flex: 1 !important; min-width: 200px !important;\">\n        <h5 style=\"margin: 0 0 10px 0 !important; font-size: 14px !important; color: #ffffff !important;\">Enlaces<\/h5>\n        <ul style=\"list-style: none !important; padding: 0 !important; margin: 0 !important;\">\n          <li><a href=\"https:\/\/www.gob.mx\/participa\" style=\"color: #ffffff !important; text-decoration: none !important;\">Participa<\/a><\/li>\n          <li><a href=\"https:\/\/www.gob.mx\/publicaciones\" style=\"color: #ffffff !important; text-decoration: none !important;\">Publicaciones Oficiales<\/a><\/li>\n          <li><a href=\"http:\/\/www.ordenjuridico.gob.mx\" style=\"color: #ffffff !important; text-decoration: none !important;\">Marco Jur\u00eddico<\/a><\/li>\n        <\/ul>\n      <\/div>\n      \n      <div style=\"flex: 1 !important; min-width: 200px !important;\">\n        <h5 style=\"margin: 0 0 10px 0 !important; font-size: 14px !important; color: #ffffff !important;\">\u00bfQu\u00e9 es gob.mx?<\/h5>\n        <p style=\"margin: 0 !important; color: #cccccc !important;\">Es el portal \u00fanico de tr\u00e1mites, informaci\u00f3n y participaci\u00f3n ciudadana. <a href=\"https:\/\/www.gob.mx\/que-es-gobmx\" style=\"color: #ffffff !important;\">Leer m\u00e1s<\/a><\/p>\n      <\/div>\n      \n      <div style=\"flex: 1 !important; min-width: 200px !important;\">\n        <h5 style=\"margin: 0 0 10px 0 !important; font-size: 14px !important; color: #ffffff !important;\">Denuncia<\/h5>\n        <ul style=\"list-style: none !important; padding: 0 !important; margin: 0 !important;\">\n          <li><a href=\"https:\/\/sidec.funcionpublicica.gob.mx\" style=\"color: #ffffff !important; text-decoration: none !important;\">Denuncia contra servidores p\u00fablicos<\/a><\/li>\n        <\/ul>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>Estaci\u00f3n Climatol\u00f3gica del TecNM Roque Estaci\u00f3n Climatol\u00f3gica TecNM Roque \u00daltima actualizaci\u00f3n &#8212; Precipitaci\u00f3n &#8212; mm Evaporaci\u00f3n &#8212; mm Temp. M\u00e1xima &#8212; \u00b0C Temp. M\u00ednima &#8212; \u00b0C Temperaturas Precipitaci\u00f3n Evaporaci\u00f3n Ver \u00faltimos: 15 d\u00edas30 d\u00edas3 mesesTodo el Historial Fecha del Reporte Precipitaci\u00f3n Evaporaci\u00f3n Temp. M\u00e1xima Temp. M\u00ednima Sincronizando con los datos de roque.tecnm.mx&#8230; \u2190 Anterior P\u00e1gina [&hellip;]<\/p>\n","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":"","footnotes":""},"class_list":["post-482","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},"uagb_author_info":{"display_name":"Carnero","author_link":"https:\/\/roque.tecnm.mx\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Estaci\u00f3n Climatol\u00f3gica del TecNM Roque Estaci\u00f3n Climatol\u00f3gica TecNM Roque \u00daltima actualizaci\u00f3n &#8212; Precipitaci\u00f3n &#8212; mm Evaporaci\u00f3n &#8212; mm Temp. M\u00e1xima &#8212; \u00b0C Temp. M\u00ednima &#8212; \u00b0C Temperaturas Precipitaci\u00f3n Evaporaci\u00f3n Ver \u00faltimos: 15 d\u00edas30 d\u00edas3 mesesTodo el Historial Fecha del Reporte Precipitaci\u00f3n Evaporaci\u00f3n Temp. M\u00e1xima Temp. M\u00ednima Sincronizando con los datos de roque.tecnm.mx&#8230; \u2190 Anterior P\u00e1gina&hellip;","_links":{"self":[{"href":"https:\/\/roque.tecnm.mx\/index.php?rest_route=\/wp\/v2\/pages\/482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roque.tecnm.mx\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roque.tecnm.mx\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roque.tecnm.mx\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roque.tecnm.mx\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=482"}],"version-history":[{"count":37,"href":"https:\/\/roque.tecnm.mx\/index.php?rest_route=\/wp\/v2\/pages\/482\/revisions"}],"predecessor-version":[{"id":524,"href":"https:\/\/roque.tecnm.mx\/index.php?rest_route=\/wp\/v2\/pages\/482\/revisions\/524"}],"wp:attachment":[{"href":"https:\/\/roque.tecnm.mx\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}