Actividades Deportivas FIDEIMSS<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\"\/>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap\"\n rel=\"stylesheet\">\n \n <style>\n :root {\n --gold: #CEAE7C;\n --gold-light: #E8D5B0;\n --gold-dark: #b8954a;\n --green: #266657;\n --green-dark: #1a4a3d;\n --red: #A22338;\n --red-dark: #7a1a28;\n }\n \n body { font-family: 'Space Grotesk', sans-serif; background: #f5f0e8; color: #1e2a28; overflow-x: hidden; }\n \n .bg-primary { background: var(--green); }\n .bg-primary-dark { background: var(--green-dark); }\n .text-primary { color: var(--green); }\n .border-primary { border-color: var(--gold); }\n \n .glass {\n backdrop-filter: blur(16px);\n background: var(--green);\n border-bottom: 1px solid rgba(206,174,124,.35);\n }\n \n .hero {\n min-height: 100vh;\n background:\n linear-gradient(135deg, rgba(38,102,87,.90) 0%, rgba(38,102,87,.90) 100%),\n url('https:\/\/www.imss.gob.mx\/sites\/all\/statics\/bienestarsocial\/medios\/carrusel_actividades\/actividad_artesanal.jpg');\n background-size: cover;\n background-position: center;\n }\n \n .card { transition: .25s ease; }\n .card:hover { transform: translateY(-4px); }\n \n .btn-grad {\n background: linear-gradient(135deg, #CEAE7C 0%, #266657 100%);\n color: #fff;\n transition: opacity .2s;\n }\n .btn-grad:hover:not(:disabled) { opacity: .88; }\n .btn-grad:disabled { opacity: .4; cursor: not-allowed; }\n \n \/* \u2500\u2500 Loader de tres puntos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .dot-loader {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .dot-loader span {\n width: 10px; height: 10px;\n border-radius: 50%;\n background: var(--green);\n animation: dotBounce 1.2s ease-in-out infinite;\n }\n .dot-loader span:nth-child(2) { animation-delay: .2s; }\n .dot-loader span:nth-child(3) { animation-delay: .4s; }\n \n @keyframes dotBounce {\n 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }\n 40% { transform: scale(1); opacity: 1; }\n }\n \n select:focus, input:focus { outline: none; border-color: var(--gold); }\n \n .header-1 { background: linear-gradient(135deg, #266657, #1a4a3d); }\n .header-2 { background: linear-gradient(135deg, #A22338, #7a1a28); }\n .header-3 { background: linear-gradient(135deg, #266657, #A22338); }\n .header-4 { background: linear-gradient(135deg, #CEAE7C, #b8954a); color: #1e2a28 !important; }\n \n .tipo-icon-1 { color: #266657; }\n .tipo-icon-2 { color: #A22338; }\n .tipo-icon-3 { color: #266657; }\n .tipo-icon-4 { color: #b8954a; }\n \n \/* \u2500\u2500 Tabla de horarios \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n #tablaHorarios table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.875rem;\n }\n #tablaHorarios thead tr {\n background: linear-gradient(90deg, #266657, #CEAE7C);\n color: white;\n }\n #tablaHorarios thead th {\n padding: 12px 16px;\n text-align: left;\n font-weight: 600;\n white-space: nowrap;\n }\n #tablaHorarios tbody tr:nth-child(even) { background: rgba(38,102,87,.04); }\n #tablaHorarios tbody tr:hover { background: rgba(206,174,124,.18); }\n #tablaHorarios tbody td {\n padding: 10px 16px;\n border-bottom: 1px solid rgba(206,174,124,.22);\n vertical-align: middle;\n }\n \/* Ocultar columna de radio buttons *\/\n #tablaHorarios th:first-child,\n #tablaHorarios td:first-child { display: none; }\n \n .tabla-wrapper {\n overflow-x: auto;\n overflow-y: auto;\n max-height: 400px;\n border-radius: 16px;\n border: 1px solid rgba(206,174,124,.40);\n box-shadow: 0 4px 24px rgba(38,102,87,.10);\n position: relative;\n }\n @media (min-width: 768px) {\n .tabla-wrapper { max-height: 350px; }\n }\n \n \/* Cabecera fija al hacer scroll dentro del wrapper *\/\n #tablaHorarios thead tr {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n \n \/* Indicador \"m\u00e1s resultados\" *\/\n #scrollIndicador {\n background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(206,174,124,.20) 100%);\n transition: opacity .25s ease;\n }\n #scrollIndicador.oculto { opacity: 0; pointer-events: none; }\n <\/style>\n <\/head>\n <body>\n \n <section id=\"inicio\" class=\"hero flex items-center pt-24 sm:pt-32 pb-12 sm:pb-20\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-8 lg:gap-14 items-center w-full\">\n \n \n <div class=\"text-white\">\n \n <h2 class=\"text-3xl sm:text-4xl lg:text-6xl font-bold leading-tight mb-6 sm:mb-8\">\n Encuentra actividades del FIDEIMSS en todo M\u00e9xico\n <\/h2>\n \n <p class=\"text-base sm:text-lg text-gray-200 leading-relaxed mb-6 sm:mb-10\">\n Consulta actividades saludables, culturales, deportivas y de capacitaci\u00f3n\n disponibles en centros deportivos de tu entidad federativa.\n <\/p>\n \n <div class=\"grid grid-cols-2 gap-3 mb-6 sm:mb-10\">\n <div class=\"flex items-center gap-3 bg-white\/15 rounded-xl px-4 py-3\">\n <i class=\"fa-solid fa-heart-pulse text-green-300\"><\/i>\n <span class=\"text-sm font-medium\">Saludables<\/span>\n <\/div>\n <div class=\"flex items-center gap-3 bg-white\/15 rounded-xl px-4 py-3\">\n <i class=\"fa-solid fa-masks-theater text-pink-300\"><\/i>\n <span class=\"text-sm font-medium\">Culturales<\/span>\n <\/div>\n <div class=\"flex items-center gap-3 bg-white\/15 rounded-xl px-4 py-3\">\n <i class=\"fa-solid fa-graduation-cap text-orange-300\"><\/i>\n <span class=\"text-sm font-medium\">Capacitaci\u00f3n<\/span>\n <\/div>\n <div class=\"flex items-center gap-3 bg-white\/15 rounded-xl px-4 py-3\">\n <i class=\"fa-solid fa-dumbbell text-blue-300\"><\/i>\n <span class=\"text-sm font-medium\">Deportivas<\/span>\n <\/div>\n <\/div>\n \n <div class=\"flex flex-col sm:flex-row gap-3 sm:gap-4\">\n <a href=\"#busqueda\"\n class=\"bg-white px-6 py-3 sm:px-8 sm:py-4 rounded-xl font-semibold hover:bg-[#CEAE7C] hover:text-white transition text-center\"\n style=\"color: #266657;\">\n Buscar actividades\n <\/a>\n <a href=\"#resultados\"\n class=\"border border-white text-white px-6 py-3 sm:px-8 sm:py-4 rounded-xl font-semibold hover:bg-white transition text-center\"\n onmouseover=\"this.style.color='#266657'\" onmouseout=\"this.style.color=''\">\n Ver resultados\n <\/a>\n <\/div>\n <\/div>\n \n \n <div id=\"busqueda\" class=\"bg-white rounded-3xl p-4 sm:p-8 shadow-2xl w-full min-w-0\">\n \n <div class=\"flex items-center justify-between mb-6 sm:mb-8\">\n <div class=\"min-w-0 flex-1 mr-3\">\n <p class=\"font-semibold mb-1 text-sm tracking-wide\" style=\"color: var(--green);\">B\u00daSQUEDA<\/p>\n <h3 class=\"text-2xl sm:text-3xl font-bold\">Explorar actividades<\/h3>\n <\/div>\n <div class=\"w-12 h-12 sm:w-14 sm:h-14 rounded-2xl text-white flex items-center justify-center text-lg sm:text-xl shrink-0\"\n style=\"background: var(--green);\">\n <i class=\"fa-solid fa-magnifying-glass\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-4\">\n <label class=\"block mb-2 font-medium text-sm text-gray-700\">Entidad Federativa<\/label>\n <select id=\"estado\"\n class=\"w-full border border-gray-300 rounded-xl px-4 py-3.5 text-sm bg-white transition h-12\">\n <option value=\"\">Seleccionar estado<\/option>\n <\/select>\n <\/div>\n \n \n <div class=\"mb-4\">\n <label class=\"block mb-2 font-medium text-sm text-gray-700\">Centro deportivo<\/label>\n <select id=\"unidad\" disabled\n class=\"w-full border border-gray-300 rounded-xl px-4 py-3.5 text-sm bg-white transition h-12\">\n <option value=\"\">Primero selecciona un estado<\/option>\n <\/select>\n \n <div id=\"centroInfo\" class=\"hidden mt-3 rounded-xl overflow-hidden border border-[#CEAE7C]\/40 shadow-sm\">\n <div class=\"flex items-center gap-2 px-4 py-2\" style=\"background: linear-gradient(90deg, #266657,#CEAE7C)\">\n <i class=\"fa-solid fa-building-columns text-[#CEAE7C] text-xs\"><\/i>\n <span id=\"centroTipo\" class=\"text-white text-xs font-semibold tracking-wide uppercase\"><\/span>\n <\/div>\n <div class=\"px-4 py-3 space-y-2\" style=\"background: linear-gradient(135deg, rgba(38,102,87,.05), rgba(206,174,124,.10))\">\n <div class=\"flex items-start gap-2\">\n <i class=\"fa-solid fa-location-dot text-[#A22338] text-xs mt-0.5 shrink-0\"><\/i>\n <p id=\"centroDomicilio\" class=\"text-xs text-gray-600 leading-relaxed\"><\/p>\n <\/div>\n <div class=\"flex flex-wrap gap-x-5 gap-y-1 mt-1\">\n <div class=\"flex items-center gap-1.5\">\n <i class=\"fa-solid fa-clock text-[#266657] text-xs\"><\/i>\n <span id=\"centroHorario\" class=\"text-xs text-gray-600\"><\/span>\n <\/div>\n <div class=\"flex items-center gap-1.5\">\n <i class=\"fa-solid fa-phone text-[#266657] text-xs\"><\/i>\n <span id=\"centroTelefono\" class=\"text-xs text-gray-600\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-4\">\n <label class=\"block mb-2 font-medium text-sm text-gray-700\">Tipo de actividad<\/label>\n <select id=\"tipoActividad\" disabled\n class=\"w-full border border-gray-300 rounded-xl px-4 py-3.5 text-sm bg-white transition h-12\">\n <option value=\"\">Primero selecciona un centro<\/option>\n <\/select>\n <\/div>\n \n \n <div class=\"mb-7\">\n <label class=\"block mb-2 font-medium text-sm text-gray-700\">Actividad<\/label>\n <input id=\"inputBuscarActividad\"\n type=\"text\"\n placeholder=\"Filtrar por nombre\u2026\"\n disabled\n class=\"w-full border border-gray-300 rounded-xl px-4 py-3 text-sm mb-2 transition h-12\"\/>\n <select id=\"actividad\" disabled\n class=\"w-full border border-gray-300 rounded-xl px-4 py-3.5 text-sm bg-white transition h-12\">\n <option value=\"\">Primero selecciona un tipo<\/option>\n <\/select>\n <\/div>\n \n <button onclick=\"buscarCursos()\"\n id=\"btnBuscar\"\n disabled\n class=\"w-full btn-grad py-3 sm:py-4 rounded-xl font-semibold text-sm sm:text-base\">\n <i class=\"fa-solid fa-search mr-2\"><\/i>\n Consultar horarios y cursos\n <\/button>\n \n <\/div>\n \n <\/div>\n <\/section>\n \n \n <section id=\"resultados\" class=\"py-12 sm:py-24 bg-[#f5f0e8]\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6\">\n \n <div class=\"mb-10\">\n <p class=\"font-semibold mb-2 text-sm tracking-wide\" style=\"color: var(--gold-dark);\">RESULTADOS<\/p>\n <div class=\"w-16 h-1 rounded-full mb-3\" style=\"background: linear-gradient(90deg, #CEAE7C, #CEAE7C)\"><\/div>\n <h2 class=\"text-2xl sm:text-4xl font-bold\">Cursos y actividades disponibles<\/h2>\n <\/div>\n \n \n <div id=\"infoContexto\" class=\"hidden bg-white rounded-2xl px-6 py-5 mb-8 border border-gray-100 shadow-sm border-l-4\" style=\"border-left-color: #CEAE7C;\">\n <div class=\"flex flex-wrap gap-x-8 gap-y-3 text-sm\">\n <div>\n <span class=\"text-gray-400 font-medium uppercase text-xs tracking-wide\">Estado<\/span>\n <p id=\"ctxEstado\" class=\"font-semibold text-gray-800 mt-0.5\"><\/p>\n <\/div>\n <div>\n <span class=\"text-gray-400 font-medium uppercase text-xs tracking-wide\">Centro deportivo<\/span>\n <p id=\"ctxUnidad\" class=\"font-semibold text-gray-800 mt-0.5\"><\/p>\n <\/div>\n <div>\n <span class=\"text-gray-400 font-medium uppercase text-xs tracking-wide\">Tipo<\/span>\n <p id=\"ctxTipo\" class=\"font-semibold text-gray-800 mt-0.5\"><\/p>\n <\/div>\n <div>\n <span class=\"text-gray-400 font-medium uppercase text-xs tracking-wide\">Actividad<\/span>\n <p id=\"ctxActividad\" class=\"font-semibold text-gray-800 mt-0.5\"><\/p>\n <\/div>\n <div>\n <span class=\"text-gray-400 font-medium uppercase text-xs tracking-wide\">Detalles del centro deportivo<\/span>\n <div id=\"ctxCentroInfo\" class=\"px-4 py-3 space-y-2\" style=\"background: linear-gradient(135deg, rgba(38,102,87,.05), rgba(206,174,124,.10))\">\n <span id=\"ctxCentroDomicilio\" class=\"text-xs text-gray-600 leading-relaxed\"><\/span><br>\n <span id=\"ctxCentroHorario\" class=\"text-xs text-gray-600\"><\/span><br>\n <span id=\"ctxCentroTelefono\" class=\"text-xs text-gray-600\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"loader\" class=\"hidden justify-center items-center flex-col gap-5 py-20\">\n <div class=\"dot-loader\">\n <span><\/span><span><\/span><span><\/span>\n <\/div>\n <p class=\"font-medium text-sm tracking-wide\" style=\"color: var(--green);\">Consultando horarios\u2026<\/p>\n <\/div>\n \n \n <div id=\"empty\" class=\"bg-white rounded-3xl p-14 text-center shadow-lg\">\n <div class=\"w-24 h-24 rounded-full bg-[#f5f0e8] mx-auto mb-8 flex items-center justify-center text-4xl\" style=\"color: var(--green);\">\n <i class=\"fa-solid fa-dumbbell\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold mb-4\">Explora actividades<\/h3>\n <p class=\"text-gray-500 max-w-xl mx-auto\">\n Selecciona una entidad federativa, un centro deportivo, el tipo de actividad\n y la actividad espec\u00edfica para consultar horarios y cursos disponibles.\n <\/p>\n <\/div>\n \n \n <div id=\"tablaContainer\" class=\"hidden\">\n \n <div class=\"mb-4 flex items-center gap-3\">\n <div class=\"relative flex-1 max-w-sm\">\n <i class=\"fa-solid fa-magnifying-glass absolute left-3 top-1\/2 -translate-y-1\/2 text-gray-400 text-sm\"><\/i>\n <input id=\"inputFiltrarTabla\"\n type=\"text\"\n placeholder=\"Filtrar resultados\u2026\"\n class=\"w-full border border-gray-300 rounded-xl pl-9 pr-4 py-2.5 text-sm transition\"\/>\n <\/div>\n <span id=\"contadorFilas\" class=\"text-sm text-gray-500 font-medium\"><\/span>\n <\/div>\n <div class=\"tabla-wrapper\" id=\"tablaWrapper\">\n <div id=\"tablaHorarios\"><\/div>\n <\/div>\n \n \n <div id=\"scrollIndicador\" class=\"oculto -mt-px flex items-center justify-center gap-2 py-2.5 rounded-b-2xl border border-t-0 border-[#CEAE7C]\/40\">\n <i class=\"fa-solid fa-chevron-down text-[#b8954a] text-xs\" style=\"animation: dotBounce 1.4s ease-in-out infinite;\"><\/i>\n <span class=\"text-xs font-medium\" style=\"color: #b8954a;\">M\u00e1s horarios disponibles<\/span>\n <i class=\"fa-solid fa-chevron-down text-[#b8954a] text-xs\" style=\"animation: dotBounce 1.4s ease-in-out infinite .2s;\"><\/i>\n <\/div>\n \n \n <div class=\"mt-5 flex items-start gap-3 bg-white rounded-xl px-5 py-4 border border-[#CEAE7C]\/40 shadow-sm\">\n <i class=\"fa-solid fa-circle-info text-[#b8954a] text-base mt-0.5 shrink-0\"><\/i>\n <p class=\"text-lg text-gray-500 leading-relaxed\">\n Los siguientes horarios son de car\u00e1cter informativo y puede variar en la medida en que se cubran los cupos. Se recomienda verificar la disponibilidad al momento de realizar la inscripci\u00f3n.\n <\/p>\n <\/div>\n \n \n <div class=\"mt-6 flex justify-center\">\n <a href=\"https:\/\/sipsi.imss.gob.mx\/Internet\/SipsiWeb\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"inline-flex items-center gap-3 btn-grad px-10 py-4 rounded-xl font-semibold text-base shadow-lg hover:shadow-xl transition-shadow\">\n <i class=\"fa-solid fa-user-plus\"><\/i>\n Inscr\u00edbete\n <i class=\"fa-solid fa-arrow-up-right-from-square text-sm opacity-75\"><\/i>\n <\/a>\n <\/div>\n \n <\/div>\n \n <\/div>\n <\/section>\n \n \n <footer class=\"text-white py-16\" style=\"background: #0f1f1a;\">\n \n <\/footer>\n \n <script>\n \/\/ \u2500\u2500 Cat\u00e1logos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n const ESTADOS = [\n { id: \"01\", nombre: \"AGUASCALIENTES\" },\n { id: \"02\", nombre: \"BAJA CALIFORNIA\" },\n { id: \"03\", nombre: \"BAJA CALIFORNIA SUR\" },\n { id: \"04\", nombre: \"CAMPECHE\" },\n { id: \"05\", nombre: \"COAHUILA DE ZARAGOZA\" },\n { id: \"06\", nombre: \"COLIMA\" },\n { id: \"07\", nombre: \"CHIAPAS\" },\n { id: \"08\", nombre: \"CHIHUAHUA\" },\n { id: \"09\", nombre: \"CIUDAD DE M\u00c9XICO\" },\n { id: \"10\", nombre: \"DURANGO\" },\n { id: \"11\", nombre: \"GUANAJUATO\" },\n { id: \"12\", nombre: \"GUERRERO\" },\n { id: \"13\", nombre: \"HIDALGO\" },\n { id: \"14\", nombre: \"JALISCO\" },\n { id: \"15\", nombre: \"M\u00c9XICO\" },\n { id: \"16\", nombre: \"MICHOAC\u00c1N DE OCAMPO\" },\n { id: \"17\", nombre: \"MORELOS\" },\n { id: \"18\", nombre: \"NAYARIT\" },\n { id: \"19\", nombre: \"NUEVO LE\u00d3N\" },\n { id: \"20\", nombre: \"OAXACA\" },\n { id: \"21\", nombre: \"PUEBLA\" },\n { id: \"22\", nombre: \"QUER\u00c9TARO DE ARTEAGA\" },\n { id: \"23\", nombre: \"QUINTANA ROO\" },\n { id: \"24\", nombre: \"SAN LUIS POTOS\u00cd\" },\n { id: \"25\", nombre: \"SINALOA\" },\n { id: \"26\", nombre: \"SONORA\" },\n { id: \"27\", nombre: \"TABASCO\" },\n { id: \"28\", nombre: \"TAMAULIPAS\" },\n { id: \"29\", nombre: \"TLAXCALA\" },\n { id: \"30\", nombre: \"VERACRUZ DE IGNACIO DE LA LLAVE\" },\n { id: \"31\", nombre: \"YUCAT\u00c1N\" },\n { id: \"32\", nombre: \"ZACATECAS\" },\n ];\n \n const TIPOS_ACTIVIDAD = [\n { id: 1, nombre: \"Actividades Saludables\", icono: \"fa-heart-pulse\", clase: \"1\" },\n { id: 2, nombre: \"Actividades Culturales\", icono: \"fa-masks-theater\", clase: \"2\" },\n { id: 3, nombre: \"Actividades de Capacitaci\u00f3n\", icono: \"fa-graduation-cap\", clase: \"3\" },\n { id: 4, nombre: \"Actividades Deportivas\", icono: \"fa-dumbbell\", clase: \"4\" },\n ];\n \n \/\/ \u2500\u2500 Elementos DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n const $estado = document.getElementById('estado');\n const $unidad = document.getElementById('unidad');\n const $tipoActividad = document.getElementById('tipoActividad');\n const $actividad = document.getElementById('actividad');\n const $centroDomicilio = document.getElementById('centroDomicilio');\n const $centroHorario = document.getElementById('centroHorario');\n const $centroTelefono = document.getElementById('centroTelefono');\n const $inputBuscar = document.getElementById('inputBuscarActividad');\n const $btnBuscar = document.getElementById('btnBuscar');\n const $loader = document.getElementById('loader');\n const $empty = document.getElementById('empty');\n const $tablaContainer = document.getElementById('tablaContainer');\n const $tablaHorarios = document.getElementById('tablaHorarios');\n const $infoContexto = document.getElementById('infoContexto');\n const $inputFiltrarTabla = document.getElementById('inputFiltrarTabla');\n const $contadorFilas = document.getElementById('contadorFilas');\n \n \/\/ Todas las opciones del select #actividad (para restaurar al limpiar filtro)\n let _todasLasActividades = [];\n \n \/\/ Cat\u00e1logo de unidades UOPSI (cargado en background)\n let catalogoUopsi = [];\n \n \/\/ \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n (function init() {\n ESTADOS.forEach(e => $estado.add(new Option(e.nombre, e.id)));\n cargarCatalogoUopsi();\n })();\n \n \/\/ \u2500\u2500 Cat\u00e1logo UOPSI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n async function cargarCatalogoUopsi() {\n try {\n const res = await fetch('\/inicio\/proxy_sipsi.php?catalog=uopsi');\n if (res.ok) catalogoUopsi = await res.json();\n } catch { \/* continuar sin cat\u00e1logo *\/ }\n }\n \n function normalizarStr(s) {\n return s.toLowerCase()\n .normalize('NFD').replace(\/[\u0300-\u036f]\/g, '')\n .replace(\/\\s+\/g, ' ').trim();\n }\n \n function buscarEnCatalogo(nombreAPI) {\n if (!catalogoUopsi.length || !nombreAPI) return null;\n const q = normalizarStr(nombreAPI);\n return catalogoUopsi.find(u => normalizarStr(u.desc_uopsi) === q)\n || catalogoUopsi.find(u => {\n const d = normalizarStr(u.desc_uopsi);\n return d.includes(q) || q.includes(d);\n })\n || null;\n }\n \n function mostrarInfoCentro(nombreCentro) {\n const $card = document.getElementById('centroInfo');\n const centro = buscarEnCatalogo(nombreCentro);\n if (!centro) { $card.classList.add('hidden'); return; }\n document.getElementById('centroTipo').textContent = centro.tipo_unidad || '';\n document.getElementById('centroDomicilio').textContent = centro.domicilio || '';\n document.getElementById('centroHorario').textContent = centro.horario_atencion || '';\n document.getElementById('centroTelefono').textContent = centro.telefono || '';\n $card.classList.remove('hidden');\n }\n \n \/\/ \u2500\u2500 Cascada: Estado \u2192 Unidades \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $estado.addEventListener('change', async function () {\n const estadoId = this.value;\n \n resetSelect($unidad, 'Primero selecciona un estado');\n resetSelect($tipoActividad, 'Primero selecciona un centro');\n resetSelect($actividad, 'Primero selecciona un tipo');\n resetInputBuscar();\n $btnBuscar.disabled = true;\n document.getElementById('centroInfo').classList.add('hidden');\n \n if (!estadoId) return;\n \n setPlaceholder($unidad, 'Cargando centros deportivos\u2026');\n \n try {\n const data = await proxyJSON('ObtenerUnidadOperativaBaseDto', { idEntidadFederativa: estadoId });\n resetSelect($unidad, data.length ? 'Seleccionar centro deportivo' : 'Sin centros disponibles');\n data.forEach(item => $unidad.add(new Option(item.nombre, item.id)));\n $unidad.disabled = data.length === 0;\n } catch {\n setPlaceholder($unidad, 'Error al cargar centros');\n }\n });\n \n \/\/ \u2500\u2500 Cascada: Unidad \u2192 Tipos de actividad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $unidad.addEventListener('change', function () {\n resetSelect($tipoActividad, 'Primero selecciona un centro');\n resetSelect($actividad, 'Primero selecciona un tipo');\n resetInputBuscar();\n $btnBuscar.disabled = true;\n \n if (!this.value) {\n document.getElementById('centroInfo').classList.add('hidden');\n return;\n }\n \n const nombreCentro = $unidad.options[$unidad.selectedIndex].text;\n mostrarInfoCentro(nombreCentro);\n \n resetSelect($tipoActividad, 'Seleccionar tipo de actividad');\n TIPOS_ACTIVIDAD.forEach(t => $tipoActividad.add(new Option(t.nombre, t.id)));\n $tipoActividad.disabled = false;\n });\n \n \/\/ \u2500\u2500 Cascada: Tipo \u2192 Actividades espec\u00edficas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $tipoActividad.addEventListener('change', async function () {\n const tipoId = this.value;\n const unidadId = $unidad.value;\n \n resetSelect($actividad, 'Primero selecciona un tipo');\n resetInputBuscar();\n $btnBuscar.disabled = true;\n \n if (!tipoId || !unidadId) return;\n \n setPlaceholder($actividad, 'Cargando actividades\u2026');\n \n try {\n const data = await proxyJSON('ObtenerActividadBaseDto', {\n idArea: tipoId,\n idUopsi: unidadId,\n condicionUsuario: 1,\n \/\/ CURP lo agrega el proxy por defecto\n });\n \n if (!data || data.length === 0) {\n setPlaceholder($actividad, 'Sin actividades para este tipo');\n return;\n }\n \n resetSelect($actividad, 'Seleccionar actividad');\n data.forEach(item => $actividad.add(new Option(item.nombre, item.id)));\n _todasLasActividades = data;\n $actividad.disabled = false;\n $inputBuscar.disabled = false;\n $inputBuscar.placeholder = 'Filtrar actividades\u2026';\n \n } catch {\n setPlaceholder($actividad, 'Error al cargar actividades');\n }\n });\n \n \/\/ \u2500\u2500 Filtro de texto sobre el select #actividad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $inputBuscar.addEventListener('input', function () {\n const q = this.value.trim().toLowerCase();\n \n \/\/ Preservar selecci\u00f3n actual si a\u00fan coincide\n const selVal = $actividad.value;\n \n $actividad.innerHTML = '';\n $actividad.add(new Option('Seleccionar actividad', ''));\n \n const filtradas = q\n ? _todasLasActividades.filter(a => a.nombre.toLowerCase().includes(q))\n : _todasLasActividades;\n \n filtradas.forEach(item => $actividad.add(new Option(item.nombre, item.id)));\n \n \/\/ Restaurar selecci\u00f3n si sigue visible\n if (selVal && filtradas.some(a => String(a.id) === selVal)) {\n $actividad.value = selVal;\n } else {\n $actividad.value = '';\n $btnBuscar.disabled = true;\n }\n \n $actividad.disabled = filtradas.length === 0;\n });\n \n \/\/ \u2500\u2500 Habilitar bot\u00f3n al seleccionar actividad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $actividad.addEventListener('change', function () {\n $btnBuscar.disabled = !this.value;\n });\n \n \/\/ \u2500\u2500 Filtro de texto sobre la tabla de resultados \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $inputFiltrarTabla.addEventListener('input', function () {\n const q = this.value.trim().toLowerCase();\n const rows = $tablaHorarios.querySelectorAll('tbody tr');\n let visible = 0;\n \n rows.forEach(row => {\n const match = !q || row.textContent.toLowerCase().includes(q);\n row.style.display = match ? '' : 'none';\n if (match) visible++;\n });\n \n actualizarContador(visible, rows.length);\n });\n \n \/\/ \u2500\u2500 Buscar cursos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n async function buscarCursos() {\n const estadoId = $estado.value;\n const unidadId = $unidad.value;\n const tipoId = $tipoActividad.value;\n const actividadId = $actividad.value;\n \n if (!estadoId || !unidadId || !tipoId || !actividadId) return;\n \n actualizarContexto();\n mostrarLoader();\n \n try {\n let idExclusividad = 8;\n try {\n const excl = await proxyJSON('ObtenerListaExclusividadBaseDto', { idUnidad: unidadId });\n if (excl && excl.length > 0) idExclusividad = excl[0].id;\n } catch { \/* usar default *\/ }\n \n const html = await proxyText('ObtenerCursos', {\n idEntidadFederativa: estadoId,\n idUnidad: unidadId,\n idArea: tipoId,\n idActividad: actividadId,\n idExclusividad: idExclusividad,\n condicionUsuario: 1,\n });\n \n renderTabla(html);\n \n } catch (err) {\n console.error(err);\n mostrarError();\n } finally {\n ocultarLoader();\n document.getElementById('resultados').scrollIntoView({ behavior: 'smooth' });\n }\n }\n \n \/\/ \u2500\u2500 Inyectar HTML de tabla \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n function renderTabla(html) {\n \/\/ SIPSI puede devolver un fragmento o una p\u00e1gina entera; extraer la tabla\n const doc = new DOMParser().parseFromString(html, 'text\/html');\n const tabla = doc.querySelector('table');\n \n if (!tabla) {\n const nombre = $actividad.options[$actividad.selectedIndex].text;\n const unidad = $unidad.options[$unidad.selectedIndex].text;\n mostrarVacio(\n 'No hay cursos disponibles',\n `No se encontraron horarios para <strong>${nombre}<\/strong> en <strong>${unidad}<\/strong>.`\n );\n return;\n }\n \n $empty.classList.add('hidden');\n $tablaContainer.classList.remove('hidden');\n $inputFiltrarTabla.value = '';\n \n \/\/ Inyectar solo la tabla extra\u00edda (limpia de scripts externos)\n $tablaHorarios.innerHTML = '';\n $tablaHorarios.appendChild(tabla);\n \n const totalFilas = tabla.querySelectorAll('tbody tr').length;\n actualizarContador(totalFilas, totalFilas);\n \n \/\/ Scroll interno + indicador\n const wrapper = document.getElementById('tablaWrapper');\n wrapper.scrollTop = 0;\n actualizarIndicadorScroll();\n wrapper.onscroll = actualizarIndicadorScroll;\n }\n \n function actualizarIndicadorScroll() {\n const wrapper = document.getElementById('tablaWrapper');\n const indicador = document.getElementById('scrollIndicador');\n if (!wrapper || !indicador) return;\n const hayMas = wrapper.scrollTop + wrapper.clientHeight < wrapper.scrollHeight - 12;\n indicador.classList.toggle('oculto', !hayMas);\n }\n \n \/\/ \u2500\u2500 Utilidades UI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n function actualizarContexto() {\n document.getElementById('ctxEstado').textContent = $estado.options[$estado.selectedIndex].text;\n document.getElementById('ctxUnidad').textContent = $unidad.options[$unidad.selectedIndex].text;\n document.getElementById('ctxTipo').textContent = $tipoActividad.options[$tipoActividad.selectedIndex].text;\n document.getElementById('ctxActividad').textContent = $actividad.options[$actividad.selectedIndex].text;\n document.getElementById('ctxCentroDomicilio').textContent = $centroDomicilio.textContent;\n document.getElementById('ctxCentroHorario').textContent = $centroHorario.textContent;\n document.getElementById('ctxCentroTelefono').textContent = $centroTelefono.textContent;\n $infoContexto.classList.remove('hidden');\n }\n \n function actualizarContador(visible, total) {\n $contadorFilas.textContent = `${visible} de ${total} resultado${total !== 1 ? 's' : ''}`;\n }\n \n function mostrarLoader() {\n $loader.classList.remove('hidden');\n $loader.classList.add('flex');\n $empty.classList.add('hidden');\n $tablaContainer.classList.add('hidden');\n }\n \n function ocultarLoader() {\n $loader.classList.add('hidden');\n $loader.classList.remove('flex');\n }\n \n function mostrarVacio(titulo, msg) {\n $empty.classList.remove('hidden');\n $tablaContainer.classList.add('hidden');\n $empty.innerHTML = `\n <div class=\"p-14 text-center\">\n <div class=\"text-5xl mb-6\" style=\"color: var(--green);\"><i class=\"fa-solid fa-calendar-xmark\"><\/i><\/div>\n <h3 class=\"text-2xl font-bold mb-3\">${titulo}<\/h3>\n <p class=\"text-gray-500\">${msg}<\/p>\n <\/div>`;\n }\n \n function mostrarError() {\n $empty.classList.remove('hidden');\n $tablaContainer.classList.add('hidden');\n $empty.innerHTML = `\n <div class=\"bg-red-50 border border-red-200 rounded-3xl p-10 text-center\">\n <div class=\"text-red-500 text-5xl mb-5\"><i class=\"fa-solid fa-circle-exclamation\"><\/i><\/div>\n <h3 class=\"text-2xl font-bold mb-3\">No fue posible obtener los cursos<\/h3>\n <p class=\"text-gray-600\">El servicio del IMSS no respondi\u00f3 correctamente. Intenta de nuevo.<\/p>\n <\/div>`;\n }\n \n function resetSelect(el, placeholder) {\n el.innerHTML = '';\n el.add(new Option(placeholder, ''));\n el.disabled = true;\n }\n \n function setPlaceholder(el, text) {\n el.options[0].text = text;\n }\n \n function resetInputBuscar() {\n _todasLasActividades = [];\n $inputBuscar.value = '';\n $inputBuscar.disabled = true;\n $inputBuscar.placeholder = 'Filtrar por nombre\u2026';\n }\n \n \/\/ \u2500\u2500 Utilidades HTTP (v\u00eda proxy) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n function buildProxyURL(endpoint, params) {\n const qs = new URLSearchParams({ endpoint, ...params });\n return `\/inicio\/proxy_sipsi.php?${qs}`;\n }\n \n async function proxyJSON(endpoint, params = {}) {\n const res = await fetch(buildProxyURL(endpoint, params));\n if (!res.ok) throw new Error(res.status);\n const data = await res.json();\n if (data && data.error) throw new Error(data.error);\n return data;\n }\n \n async function proxyText(endpoint, params = {}) {\n const res = await fetch(buildProxyURL(endpoint, params));\n if (!res.ok) throw new Error(res.status);\n const ct = res.headers.get('Content-Type') || '';\n \/\/ Si el proxy detect\u00f3 error y devolvi\u00f3 JSON, lanzar el mensaje\n if (ct.includes('application\/json')) {\n const data = await res.json();\n throw new Error(data.error || 'Error desconocido');\n }\n return res.text();\n }\n <\/script>\n <\/body>\n <\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Actividades Deportivas FIDEIMSS Encuentra actividades del FIDEIMSS en todo M\u00e9xico Consulta actividades saludables, culturales, deportivas y de capacitaci\u00f3n disponibles en centros deportivos de tu entidad federativa. Saludables Culturales Capacitaci\u00f3n Deportivas Buscar actividades Ver resultados B\u00daSQUEDA Explorar actividades Entidad Federativa Seleccionar estado Centro deportivo Primero selecciona un estado Tipo de actividad Primero selecciona un centro Actividad […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4214","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/pages\/4214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/comments?post=4214"}],"version-history":[{"count":44,"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/pages\/4214\/revisions"}],"predecessor-version":[{"id":4280,"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/pages\/4214\/revisions\/4280"}],"wp:attachment":[{"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/media?parent=4214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\n \n \n \n Actividades Deportivas FIDEIMSS<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\"\/>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap\"\n rel=\"stylesheet\">\n \n <style>\n :root {\n --gold: #CEAE7C;\n --gold-light: #E8D5B0;\n --gold-dark: #b8954a;\n --green: #266657;\n --green-dark: #1a4a3d;\n --red: #A22338;\n --red-dark: #7a1a28;\n }\n \n body { font-family: 'Space Grotesk', sans-serif; background: #f5f0e8; color: #1e2a28; overflow-x: hidden; }\n \n .bg-primary { background: var(--green); }\n .bg-primary-dark { background: var(--green-dark); }\n .text-primary { color: var(--green); }\n .border-primary { border-color: var(--gold); }\n \n .glass {\n backdrop-filter: blur(16px);\n background: var(--green);\n border-bottom: 1px solid rgba(206,174,124,.35);\n }\n \n .hero {\n min-height: 100vh;\n background:\n linear-gradient(135deg, rgba(38,102,87,.90) 0%, rgba(38,102,87,.90) 100%),\n url('https:\/\/www.imss.gob.mx\/sites\/all\/statics\/bienestarsocial\/medios\/carrusel_actividades\/actividad_artesanal.jpg');\n background-size: cover;\n background-position: center;\n }\n \n .card { transition: .25s ease; }\n .card:hover { transform: translateY(-4px); }\n \n .btn-grad {\n background: linear-gradient(135deg, #CEAE7C 0%, #266657 100%);\n color: #fff;\n transition: opacity .2s;\n }\n .btn-grad:hover:not(:disabled) { opacity: .88; }\n .btn-grad:disabled { opacity: .4; cursor: not-allowed; }\n \n \/* \u2500\u2500 Loader de tres puntos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .dot-loader {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .dot-loader span {\n width: 10px; height: 10px;\n border-radius: 50%;\n background: var(--green);\n animation: dotBounce 1.2s ease-in-out infinite;\n }\n .dot-loader span:nth-child(2) { animation-delay: .2s; }\n .dot-loader span:nth-child(3) { animation-delay: .4s; }\n \n @keyframes dotBounce {\n 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }\n 40% { transform: scale(1); opacity: 1; }\n }\n \n select:focus, input:focus { outline: none; border-color: var(--gold); }\n \n .header-1 { background: linear-gradient(135deg, #266657, #1a4a3d); }\n .header-2 { background: linear-gradient(135deg, #A22338, #7a1a28); }\n .header-3 { background: linear-gradient(135deg, #266657, #A22338); }\n .header-4 { background: linear-gradient(135deg, #CEAE7C, #b8954a); color: #1e2a28 !important; }\n \n .tipo-icon-1 { color: #266657; }\n .tipo-icon-2 { color: #A22338; }\n .tipo-icon-3 { color: #266657; }\n .tipo-icon-4 { color: #b8954a; }\n \n \/* \u2500\u2500 Tabla de horarios \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n #tablaHorarios table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.875rem;\n }\n #tablaHorarios thead tr {\n background: linear-gradient(90deg, #266657, #CEAE7C);\n color: white;\n }\n #tablaHorarios thead th {\n padding: 12px 16px;\n text-align: left;\n font-weight: 600;\n white-space: nowrap;\n }\n #tablaHorarios tbody tr:nth-child(even) { background: rgba(38,102,87,.04); }\n #tablaHorarios tbody tr:hover { background: rgba(206,174,124,.18); }\n #tablaHorarios tbody td {\n padding: 10px 16px;\n border-bottom: 1px solid rgba(206,174,124,.22);\n vertical-align: middle;\n }\n \/* Ocultar columna de radio buttons *\/\n #tablaHorarios th:first-child,\n #tablaHorarios td:first-child { display: none; }\n \n .tabla-wrapper {\n overflow-x: auto;\n overflow-y: auto;\n max-height: 400px;\n border-radius: 16px;\n border: 1px solid rgba(206,174,124,.40);\n box-shadow: 0 4px 24px rgba(38,102,87,.10);\n position: relative;\n }\n @media (min-width: 768px) {\n .tabla-wrapper { max-height: 350px; }\n }\n \n \/* Cabecera fija al hacer scroll dentro del wrapper *\/\n #tablaHorarios thead tr {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n \n \/* Indicador \"m\u00e1s resultados\" *\/\n #scrollIndicador {\n background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(206,174,124,.20) 100%);\n transition: opacity .25s ease;\n }\n #scrollIndicador.oculto { opacity: 0; pointer-events: none; }\n <\/style>\n <\/head>\n <body>\n \n <section id=\"inicio\" class=\"hero flex items-center pt-24 sm:pt-32 pb-12 sm:pb-20\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 grid lg:grid-cols-2 gap-8 lg:gap-14 items-center w-full\">\n \n \n <div class=\"text-white\">\n \n <h2 class=\"text-3xl sm:text-4xl lg:text-6xl font-bold leading-tight mb-6 sm:mb-8\">\n Encuentra actividades del FIDEIMSS en todo M\u00e9xico\n <\/h2>\n \n <p class=\"text-base sm:text-lg text-gray-200 leading-relaxed mb-6 sm:mb-10\">\n Consulta actividades saludables, culturales, deportivas y de capacitaci\u00f3n\n disponibles en centros deportivos de tu entidad federativa.\n <\/p>\n \n <div class=\"grid grid-cols-2 gap-3 mb-6 sm:mb-10\">\n <div class=\"flex items-center gap-3 bg-white\/15 rounded-xl px-4 py-3\">\n <i class=\"fa-solid fa-heart-pulse text-green-300\"><\/i>\n <span class=\"text-sm font-medium\">Saludables<\/span>\n <\/div>\n <div class=\"flex items-center gap-3 bg-white\/15 rounded-xl px-4 py-3\">\n <i class=\"fa-solid fa-masks-theater text-pink-300\"><\/i>\n <span class=\"text-sm font-medium\">Culturales<\/span>\n <\/div>\n <div class=\"flex items-center gap-3 bg-white\/15 rounded-xl px-4 py-3\">\n <i class=\"fa-solid fa-graduation-cap text-orange-300\"><\/i>\n <span class=\"text-sm font-medium\">Capacitaci\u00f3n<\/span>\n <\/div>\n <div class=\"flex items-center gap-3 bg-white\/15 rounded-xl px-4 py-3\">\n <i class=\"fa-solid fa-dumbbell text-blue-300\"><\/i>\n <span class=\"text-sm font-medium\">Deportivas<\/span>\n <\/div>\n <\/div>\n \n <div class=\"flex flex-col sm:flex-row gap-3 sm:gap-4\">\n <a href=\"#busqueda\"\n class=\"bg-white px-6 py-3 sm:px-8 sm:py-4 rounded-xl font-semibold hover:bg-[#CEAE7C] hover:text-white transition text-center\"\n style=\"color: #266657;\">\n Buscar actividades\n <\/a>\n <a href=\"#resultados\"\n class=\"border border-white text-white px-6 py-3 sm:px-8 sm:py-4 rounded-xl font-semibold hover:bg-white transition text-center\"\n onmouseover=\"this.style.color='#266657'\" onmouseout=\"this.style.color=''\">\n Ver resultados\n <\/a>\n <\/div>\n <\/div>\n \n \n <div id=\"busqueda\" class=\"bg-white rounded-3xl p-4 sm:p-8 shadow-2xl w-full min-w-0\">\n \n <div class=\"flex items-center justify-between mb-6 sm:mb-8\">\n <div class=\"min-w-0 flex-1 mr-3\">\n <p class=\"font-semibold mb-1 text-sm tracking-wide\" style=\"color: var(--green);\">B\u00daSQUEDA<\/p>\n <h3 class=\"text-2xl sm:text-3xl font-bold\">Explorar actividades<\/h3>\n <\/div>\n <div class=\"w-12 h-12 sm:w-14 sm:h-14 rounded-2xl text-white flex items-center justify-center text-lg sm:text-xl shrink-0\"\n style=\"background: var(--green);\">\n <i class=\"fa-solid fa-magnifying-glass\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-4\">\n <label class=\"block mb-2 font-medium text-sm text-gray-700\">Entidad Federativa<\/label>\n <select id=\"estado\"\n class=\"w-full border border-gray-300 rounded-xl px-4 py-3.5 text-sm bg-white transition h-12\">\n <option value=\"\">Seleccionar estado<\/option>\n <\/select>\n <\/div>\n \n \n <div class=\"mb-4\">\n <label class=\"block mb-2 font-medium text-sm text-gray-700\">Centro deportivo<\/label>\n <select id=\"unidad\" disabled\n class=\"w-full border border-gray-300 rounded-xl px-4 py-3.5 text-sm bg-white transition h-12\">\n <option value=\"\">Primero selecciona un estado<\/option>\n <\/select>\n \n <div id=\"centroInfo\" class=\"hidden mt-3 rounded-xl overflow-hidden border border-[#CEAE7C]\/40 shadow-sm\">\n <div class=\"flex items-center gap-2 px-4 py-2\" style=\"background: linear-gradient(90deg, #266657,#CEAE7C)\">\n <i class=\"fa-solid fa-building-columns text-[#CEAE7C] text-xs\"><\/i>\n <span id=\"centroTipo\" class=\"text-white text-xs font-semibold tracking-wide uppercase\"><\/span>\n <\/div>\n <div class=\"px-4 py-3 space-y-2\" style=\"background: linear-gradient(135deg, rgba(38,102,87,.05), rgba(206,174,124,.10))\">\n <div class=\"flex items-start gap-2\">\n <i class=\"fa-solid fa-location-dot text-[#A22338] text-xs mt-0.5 shrink-0\"><\/i>\n <p id=\"centroDomicilio\" class=\"text-xs text-gray-600 leading-relaxed\"><\/p>\n <\/div>\n <div class=\"flex flex-wrap gap-x-5 gap-y-1 mt-1\">\n <div class=\"flex items-center gap-1.5\">\n <i class=\"fa-solid fa-clock text-[#266657] text-xs\"><\/i>\n <span id=\"centroHorario\" class=\"text-xs text-gray-600\"><\/span>\n <\/div>\n <div class=\"flex items-center gap-1.5\">\n <i class=\"fa-solid fa-phone text-[#266657] text-xs\"><\/i>\n <span id=\"centroTelefono\" class=\"text-xs text-gray-600\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-4\">\n <label class=\"block mb-2 font-medium text-sm text-gray-700\">Tipo de actividad<\/label>\n <select id=\"tipoActividad\" disabled\n class=\"w-full border border-gray-300 rounded-xl px-4 py-3.5 text-sm bg-white transition h-12\">\n <option value=\"\">Primero selecciona un centro<\/option>\n <\/select>\n <\/div>\n \n \n <div class=\"mb-7\">\n <label class=\"block mb-2 font-medium text-sm text-gray-700\">Actividad<\/label>\n <input id=\"inputBuscarActividad\"\n type=\"text\"\n placeholder=\"Filtrar por nombre\u2026\"\n disabled\n class=\"w-full border border-gray-300 rounded-xl px-4 py-3 text-sm mb-2 transition h-12\"\/>\n <select id=\"actividad\" disabled\n class=\"w-full border border-gray-300 rounded-xl px-4 py-3.5 text-sm bg-white transition h-12\">\n <option value=\"\">Primero selecciona un tipo<\/option>\n <\/select>\n <\/div>\n \n <button onclick=\"buscarCursos()\"\n id=\"btnBuscar\"\n disabled\n class=\"w-full btn-grad py-3 sm:py-4 rounded-xl font-semibold text-sm sm:text-base\">\n <i class=\"fa-solid fa-search mr-2\"><\/i>\n Consultar horarios y cursos\n <\/button>\n \n <\/div>\n \n <\/div>\n <\/section>\n \n \n <section id=\"resultados\" class=\"py-12 sm:py-24 bg-[#f5f0e8]\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6\">\n \n <div class=\"mb-10\">\n <p class=\"font-semibold mb-2 text-sm tracking-wide\" style=\"color: var(--gold-dark);\">RESULTADOS<\/p>\n <div class=\"w-16 h-1 rounded-full mb-3\" style=\"background: linear-gradient(90deg, #CEAE7C, #CEAE7C)\"><\/div>\n <h2 class=\"text-2xl sm:text-4xl font-bold\">Cursos y actividades disponibles<\/h2>\n <\/div>\n \n \n <div id=\"infoContexto\" class=\"hidden bg-white rounded-2xl px-6 py-5 mb-8 border border-gray-100 shadow-sm border-l-4\" style=\"border-left-color: #CEAE7C;\">\n <div class=\"flex flex-wrap gap-x-8 gap-y-3 text-sm\">\n <div>\n <span class=\"text-gray-400 font-medium uppercase text-xs tracking-wide\">Estado<\/span>\n <p id=\"ctxEstado\" class=\"font-semibold text-gray-800 mt-0.5\"><\/p>\n <\/div>\n <div>\n <span class=\"text-gray-400 font-medium uppercase text-xs tracking-wide\">Centro deportivo<\/span>\n <p id=\"ctxUnidad\" class=\"font-semibold text-gray-800 mt-0.5\"><\/p>\n <\/div>\n <div>\n <span class=\"text-gray-400 font-medium uppercase text-xs tracking-wide\">Tipo<\/span>\n <p id=\"ctxTipo\" class=\"font-semibold text-gray-800 mt-0.5\"><\/p>\n <\/div>\n <div>\n <span class=\"text-gray-400 font-medium uppercase text-xs tracking-wide\">Actividad<\/span>\n <p id=\"ctxActividad\" class=\"font-semibold text-gray-800 mt-0.5\"><\/p>\n <\/div>\n <div>\n <span class=\"text-gray-400 font-medium uppercase text-xs tracking-wide\">Detalles del centro deportivo<\/span>\n <div id=\"ctxCentroInfo\" class=\"px-4 py-3 space-y-2\" style=\"background: linear-gradient(135deg, rgba(38,102,87,.05), rgba(206,174,124,.10))\">\n <span id=\"ctxCentroDomicilio\" class=\"text-xs text-gray-600 leading-relaxed\"><\/span><br>\n <span id=\"ctxCentroHorario\" class=\"text-xs text-gray-600\"><\/span><br>\n <span id=\"ctxCentroTelefono\" class=\"text-xs text-gray-600\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"loader\" class=\"hidden justify-center items-center flex-col gap-5 py-20\">\n <div class=\"dot-loader\">\n <span><\/span><span><\/span><span><\/span>\n <\/div>\n <p class=\"font-medium text-sm tracking-wide\" style=\"color: var(--green);\">Consultando horarios\u2026<\/p>\n <\/div>\n \n \n <div id=\"empty\" class=\"bg-white rounded-3xl p-14 text-center shadow-lg\">\n <div class=\"w-24 h-24 rounded-full bg-[#f5f0e8] mx-auto mb-8 flex items-center justify-center text-4xl\" style=\"color: var(--green);\">\n <i class=\"fa-solid fa-dumbbell\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold mb-4\">Explora actividades<\/h3>\n <p class=\"text-gray-500 max-w-xl mx-auto\">\n Selecciona una entidad federativa, un centro deportivo, el tipo de actividad\n y la actividad espec\u00edfica para consultar horarios y cursos disponibles.\n <\/p>\n <\/div>\n \n \n <div id=\"tablaContainer\" class=\"hidden\">\n \n <div class=\"mb-4 flex items-center gap-3\">\n <div class=\"relative flex-1 max-w-sm\">\n <i class=\"fa-solid fa-magnifying-glass absolute left-3 top-1\/2 -translate-y-1\/2 text-gray-400 text-sm\"><\/i>\n <input id=\"inputFiltrarTabla\"\n type=\"text\"\n placeholder=\"Filtrar resultados\u2026\"\n class=\"w-full border border-gray-300 rounded-xl pl-9 pr-4 py-2.5 text-sm transition\"\/>\n <\/div>\n <span id=\"contadorFilas\" class=\"text-sm text-gray-500 font-medium\"><\/span>\n <\/div>\n <div class=\"tabla-wrapper\" id=\"tablaWrapper\">\n <div id=\"tablaHorarios\"><\/div>\n <\/div>\n \n \n <div id=\"scrollIndicador\" class=\"oculto -mt-px flex items-center justify-center gap-2 py-2.5 rounded-b-2xl border border-t-0 border-[#CEAE7C]\/40\">\n <i class=\"fa-solid fa-chevron-down text-[#b8954a] text-xs\" style=\"animation: dotBounce 1.4s ease-in-out infinite;\"><\/i>\n <span class=\"text-xs font-medium\" style=\"color: #b8954a;\">M\u00e1s horarios disponibles<\/span>\n <i class=\"fa-solid fa-chevron-down text-[#b8954a] text-xs\" style=\"animation: dotBounce 1.4s ease-in-out infinite .2s;\"><\/i>\n <\/div>\n \n \n <div class=\"mt-5 flex items-start gap-3 bg-white rounded-xl px-5 py-4 border border-[#CEAE7C]\/40 shadow-sm\">\n <i class=\"fa-solid fa-circle-info text-[#b8954a] text-base mt-0.5 shrink-0\"><\/i>\n <p class=\"text-lg text-gray-500 leading-relaxed\">\n Los siguientes horarios son de car\u00e1cter informativo y puede variar en la medida en que se cubran los cupos. Se recomienda verificar la disponibilidad al momento de realizar la inscripci\u00f3n.\n <\/p>\n <\/div>\n \n \n <div class=\"mt-6 flex justify-center\">\n <a href=\"https:\/\/sipsi.imss.gob.mx\/Internet\/SipsiWeb\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"inline-flex items-center gap-3 btn-grad px-10 py-4 rounded-xl font-semibold text-base shadow-lg hover:shadow-xl transition-shadow\">\n <i class=\"fa-solid fa-user-plus\"><\/i>\n Inscr\u00edbete\n <i class=\"fa-solid fa-arrow-up-right-from-square text-sm opacity-75\"><\/i>\n <\/a>\n <\/div>\n \n <\/div>\n \n <\/div>\n <\/section>\n \n \n <footer class=\"text-white py-16\" style=\"background: #0f1f1a;\">\n \n <\/footer>\n \n <script>\n \/\/ \u2500\u2500 Cat\u00e1logos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n const ESTADOS = [\n { id: \"01\", nombre: \"AGUASCALIENTES\" },\n { id: \"02\", nombre: \"BAJA CALIFORNIA\" },\n { id: \"03\", nombre: \"BAJA CALIFORNIA SUR\" },\n { id: \"04\", nombre: \"CAMPECHE\" },\n { id: \"05\", nombre: \"COAHUILA DE ZARAGOZA\" },\n { id: \"06\", nombre: \"COLIMA\" },\n { id: \"07\", nombre: \"CHIAPAS\" },\n { id: \"08\", nombre: \"CHIHUAHUA\" },\n { id: \"09\", nombre: \"CIUDAD DE M\u00c9XICO\" },\n { id: \"10\", nombre: \"DURANGO\" },\n { id: \"11\", nombre: \"GUANAJUATO\" },\n { id: \"12\", nombre: \"GUERRERO\" },\n { id: \"13\", nombre: \"HIDALGO\" },\n { id: \"14\", nombre: \"JALISCO\" },\n { id: \"15\", nombre: \"M\u00c9XICO\" },\n { id: \"16\", nombre: \"MICHOAC\u00c1N DE OCAMPO\" },\n { id: \"17\", nombre: \"MORELOS\" },\n { id: \"18\", nombre: \"NAYARIT\" },\n { id: \"19\", nombre: \"NUEVO LE\u00d3N\" },\n { id: \"20\", nombre: \"OAXACA\" },\n { id: \"21\", nombre: \"PUEBLA\" },\n { id: \"22\", nombre: \"QUER\u00c9TARO DE ARTEAGA\" },\n { id: \"23\", nombre: \"QUINTANA ROO\" },\n { id: \"24\", nombre: \"SAN LUIS POTOS\u00cd\" },\n { id: \"25\", nombre: \"SINALOA\" },\n { id: \"26\", nombre: \"SONORA\" },\n { id: \"27\", nombre: \"TABASCO\" },\n { id: \"28\", nombre: \"TAMAULIPAS\" },\n { id: \"29\", nombre: \"TLAXCALA\" },\n { id: \"30\", nombre: \"VERACRUZ DE IGNACIO DE LA LLAVE\" },\n { id: \"31\", nombre: \"YUCAT\u00c1N\" },\n { id: \"32\", nombre: \"ZACATECAS\" },\n ];\n \n const TIPOS_ACTIVIDAD = [\n { id: 1, nombre: \"Actividades Saludables\", icono: \"fa-heart-pulse\", clase: \"1\" },\n { id: 2, nombre: \"Actividades Culturales\", icono: \"fa-masks-theater\", clase: \"2\" },\n { id: 3, nombre: \"Actividades de Capacitaci\u00f3n\", icono: \"fa-graduation-cap\", clase: \"3\" },\n { id: 4, nombre: \"Actividades Deportivas\", icono: \"fa-dumbbell\", clase: \"4\" },\n ];\n \n \/\/ \u2500\u2500 Elementos DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n const $estado = document.getElementById('estado');\n const $unidad = document.getElementById('unidad');\n const $tipoActividad = document.getElementById('tipoActividad');\n const $actividad = document.getElementById('actividad');\n const $centroDomicilio = document.getElementById('centroDomicilio');\n const $centroHorario = document.getElementById('centroHorario');\n const $centroTelefono = document.getElementById('centroTelefono');\n const $inputBuscar = document.getElementById('inputBuscarActividad');\n const $btnBuscar = document.getElementById('btnBuscar');\n const $loader = document.getElementById('loader');\n const $empty = document.getElementById('empty');\n const $tablaContainer = document.getElementById('tablaContainer');\n const $tablaHorarios = document.getElementById('tablaHorarios');\n const $infoContexto = document.getElementById('infoContexto');\n const $inputFiltrarTabla = document.getElementById('inputFiltrarTabla');\n const $contadorFilas = document.getElementById('contadorFilas');\n \n \/\/ Todas las opciones del select #actividad (para restaurar al limpiar filtro)\n let _todasLasActividades = [];\n \n \/\/ Cat\u00e1logo de unidades UOPSI (cargado en background)\n let catalogoUopsi = [];\n \n \/\/ \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n (function init() {\n ESTADOS.forEach(e => $estado.add(new Option(e.nombre, e.id)));\n cargarCatalogoUopsi();\n })();\n \n \/\/ \u2500\u2500 Cat\u00e1logo UOPSI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n async function cargarCatalogoUopsi() {\n try {\n const res = await fetch('\/inicio\/proxy_sipsi.php?catalog=uopsi');\n if (res.ok) catalogoUopsi = await res.json();\n } catch { \/* continuar sin cat\u00e1logo *\/ }\n }\n \n function normalizarStr(s) {\n return s.toLowerCase()\n .normalize('NFD').replace(\/[\u0300-\u036f]\/g, '')\n .replace(\/\\s+\/g, ' ').trim();\n }\n \n function buscarEnCatalogo(nombreAPI) {\n if (!catalogoUopsi.length || !nombreAPI) return null;\n const q = normalizarStr(nombreAPI);\n return catalogoUopsi.find(u => normalizarStr(u.desc_uopsi) === q)\n || catalogoUopsi.find(u => {\n const d = normalizarStr(u.desc_uopsi);\n return d.includes(q) || q.includes(d);\n })\n || null;\n }\n \n function mostrarInfoCentro(nombreCentro) {\n const $card = document.getElementById('centroInfo');\n const centro = buscarEnCatalogo(nombreCentro);\n if (!centro) { $card.classList.add('hidden'); return; }\n document.getElementById('centroTipo').textContent = centro.tipo_unidad || '';\n document.getElementById('centroDomicilio').textContent = centro.domicilio || '';\n document.getElementById('centroHorario').textContent = centro.horario_atencion || '';\n document.getElementById('centroTelefono').textContent = centro.telefono || '';\n $card.classList.remove('hidden');\n }\n \n \/\/ \u2500\u2500 Cascada: Estado \u2192 Unidades \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $estado.addEventListener('change', async function () {\n const estadoId = this.value;\n \n resetSelect($unidad, 'Primero selecciona un estado');\n resetSelect($tipoActividad, 'Primero selecciona un centro');\n resetSelect($actividad, 'Primero selecciona un tipo');\n resetInputBuscar();\n $btnBuscar.disabled = true;\n document.getElementById('centroInfo').classList.add('hidden');\n \n if (!estadoId) return;\n \n setPlaceholder($unidad, 'Cargando centros deportivos\u2026');\n \n try {\n const data = await proxyJSON('ObtenerUnidadOperativaBaseDto', { idEntidadFederativa: estadoId });\n resetSelect($unidad, data.length ? 'Seleccionar centro deportivo' : 'Sin centros disponibles');\n data.forEach(item => $unidad.add(new Option(item.nombre, item.id)));\n $unidad.disabled = data.length === 0;\n } catch {\n setPlaceholder($unidad, 'Error al cargar centros');\n }\n });\n \n \/\/ \u2500\u2500 Cascada: Unidad \u2192 Tipos de actividad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $unidad.addEventListener('change', function () {\n resetSelect($tipoActividad, 'Primero selecciona un centro');\n resetSelect($actividad, 'Primero selecciona un tipo');\n resetInputBuscar();\n $btnBuscar.disabled = true;\n \n if (!this.value) {\n document.getElementById('centroInfo').classList.add('hidden');\n return;\n }\n \n const nombreCentro = $unidad.options[$unidad.selectedIndex].text;\n mostrarInfoCentro(nombreCentro);\n \n resetSelect($tipoActividad, 'Seleccionar tipo de actividad');\n TIPOS_ACTIVIDAD.forEach(t => $tipoActividad.add(new Option(t.nombre, t.id)));\n $tipoActividad.disabled = false;\n });\n \n \/\/ \u2500\u2500 Cascada: Tipo \u2192 Actividades espec\u00edficas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $tipoActividad.addEventListener('change', async function () {\n const tipoId = this.value;\n const unidadId = $unidad.value;\n \n resetSelect($actividad, 'Primero selecciona un tipo');\n resetInputBuscar();\n $btnBuscar.disabled = true;\n \n if (!tipoId || !unidadId) return;\n \n setPlaceholder($actividad, 'Cargando actividades\u2026');\n \n try {\n const data = await proxyJSON('ObtenerActividadBaseDto', {\n idArea: tipoId,\n idUopsi: unidadId,\n condicionUsuario: 1,\n \/\/ CURP lo agrega el proxy por defecto\n });\n \n if (!data || data.length === 0) {\n setPlaceholder($actividad, 'Sin actividades para este tipo');\n return;\n }\n \n resetSelect($actividad, 'Seleccionar actividad');\n data.forEach(item => $actividad.add(new Option(item.nombre, item.id)));\n _todasLasActividades = data;\n $actividad.disabled = false;\n $inputBuscar.disabled = false;\n $inputBuscar.placeholder = 'Filtrar actividades\u2026';\n \n } catch {\n setPlaceholder($actividad, 'Error al cargar actividades');\n }\n });\n \n \/\/ \u2500\u2500 Filtro de texto sobre el select #actividad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $inputBuscar.addEventListener('input', function () {\n const q = this.value.trim().toLowerCase();\n \n \/\/ Preservar selecci\u00f3n actual si a\u00fan coincide\n const selVal = $actividad.value;\n \n $actividad.innerHTML = '';\n $actividad.add(new Option('Seleccionar actividad', ''));\n \n const filtradas = q\n ? _todasLasActividades.filter(a => a.nombre.toLowerCase().includes(q))\n : _todasLasActividades;\n \n filtradas.forEach(item => $actividad.add(new Option(item.nombre, item.id)));\n \n \/\/ Restaurar selecci\u00f3n si sigue visible\n if (selVal && filtradas.some(a => String(a.id) === selVal)) {\n $actividad.value = selVal;\n } else {\n $actividad.value = '';\n $btnBuscar.disabled = true;\n }\n \n $actividad.disabled = filtradas.length === 0;\n });\n \n \/\/ \u2500\u2500 Habilitar bot\u00f3n al seleccionar actividad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $actividad.addEventListener('change', function () {\n $btnBuscar.disabled = !this.value;\n });\n \n \/\/ \u2500\u2500 Filtro de texto sobre la tabla de resultados \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n $inputFiltrarTabla.addEventListener('input', function () {\n const q = this.value.trim().toLowerCase();\n const rows = $tablaHorarios.querySelectorAll('tbody tr');\n let visible = 0;\n \n rows.forEach(row => {\n const match = !q || row.textContent.toLowerCase().includes(q);\n row.style.display = match ? '' : 'none';\n if (match) visible++;\n });\n \n actualizarContador(visible, rows.length);\n });\n \n \/\/ \u2500\u2500 Buscar cursos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n async function buscarCursos() {\n const estadoId = $estado.value;\n const unidadId = $unidad.value;\n const tipoId = $tipoActividad.value;\n const actividadId = $actividad.value;\n \n if (!estadoId || !unidadId || !tipoId || !actividadId) return;\n \n actualizarContexto();\n mostrarLoader();\n \n try {\n let idExclusividad = 8;\n try {\n const excl = await proxyJSON('ObtenerListaExclusividadBaseDto', { idUnidad: unidadId });\n if (excl && excl.length > 0) idExclusividad = excl[0].id;\n } catch { \/* usar default *\/ }\n \n const html = await proxyText('ObtenerCursos', {\n idEntidadFederativa: estadoId,\n idUnidad: unidadId,\n idArea: tipoId,\n idActividad: actividadId,\n idExclusividad: idExclusividad,\n condicionUsuario: 1,\n });\n \n renderTabla(html);\n \n } catch (err) {\n console.error(err);\n mostrarError();\n } finally {\n ocultarLoader();\n document.getElementById('resultados').scrollIntoView({ behavior: 'smooth' });\n }\n }\n \n \/\/ \u2500\u2500 Inyectar HTML de tabla \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n function renderTabla(html) {\n \/\/ SIPSI puede devolver un fragmento o una p\u00e1gina entera; extraer la tabla\n const doc = new DOMParser().parseFromString(html, 'text\/html');\n const tabla = doc.querySelector('table');\n \n if (!tabla) {\n const nombre = $actividad.options[$actividad.selectedIndex].text;\n const unidad = $unidad.options[$unidad.selectedIndex].text;\n mostrarVacio(\n 'No hay cursos disponibles',\n `No se encontraron horarios para <strong>${nombre}<\/strong> en <strong>${unidad}<\/strong>.`\n );\n return;\n }\n \n $empty.classList.add('hidden');\n $tablaContainer.classList.remove('hidden');\n $inputFiltrarTabla.value = '';\n \n \/\/ Inyectar solo la tabla extra\u00edda (limpia de scripts externos)\n $tablaHorarios.innerHTML = '';\n $tablaHorarios.appendChild(tabla);\n \n const totalFilas = tabla.querySelectorAll('tbody tr').length;\n actualizarContador(totalFilas, totalFilas);\n \n \/\/ Scroll interno + indicador\n const wrapper = document.getElementById('tablaWrapper');\n wrapper.scrollTop = 0;\n actualizarIndicadorScroll();\n wrapper.onscroll = actualizarIndicadorScroll;\n }\n \n function actualizarIndicadorScroll() {\n const wrapper = document.getElementById('tablaWrapper');\n const indicador = document.getElementById('scrollIndicador');\n if (!wrapper || !indicador) return;\n const hayMas = wrapper.scrollTop + wrapper.clientHeight < wrapper.scrollHeight - 12;\n indicador.classList.toggle('oculto', !hayMas);\n }\n \n \/\/ \u2500\u2500 Utilidades UI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n function actualizarContexto() {\n document.getElementById('ctxEstado').textContent = $estado.options[$estado.selectedIndex].text;\n document.getElementById('ctxUnidad').textContent = $unidad.options[$unidad.selectedIndex].text;\n document.getElementById('ctxTipo').textContent = $tipoActividad.options[$tipoActividad.selectedIndex].text;\n document.getElementById('ctxActividad').textContent = $actividad.options[$actividad.selectedIndex].text;\n document.getElementById('ctxCentroDomicilio').textContent = $centroDomicilio.textContent;\n document.getElementById('ctxCentroHorario').textContent = $centroHorario.textContent;\n document.getElementById('ctxCentroTelefono').textContent = $centroTelefono.textContent;\n $infoContexto.classList.remove('hidden');\n }\n \n function actualizarContador(visible, total) {\n $contadorFilas.textContent = `${visible} de ${total} resultado${total !== 1 ? 's' : ''}`;\n }\n \n function mostrarLoader() {\n $loader.classList.remove('hidden');\n $loader.classList.add('flex');\n $empty.classList.add('hidden');\n $tablaContainer.classList.add('hidden');\n }\n \n function ocultarLoader() {\n $loader.classList.add('hidden');\n $loader.classList.remove('flex');\n }\n \n function mostrarVacio(titulo, msg) {\n $empty.classList.remove('hidden');\n $tablaContainer.classList.add('hidden');\n $empty.innerHTML = `\n <div class=\"p-14 text-center\">\n <div class=\"text-5xl mb-6\" style=\"color: var(--green);\"><i class=\"fa-solid fa-calendar-xmark\"><\/i><\/div>\n <h3 class=\"text-2xl font-bold mb-3\">${titulo}<\/h3>\n <p class=\"text-gray-500\">${msg}<\/p>\n <\/div>`;\n }\n \n function mostrarError() {\n $empty.classList.remove('hidden');\n $tablaContainer.classList.add('hidden');\n $empty.innerHTML = `\n <div class=\"bg-red-50 border border-red-200 rounded-3xl p-10 text-center\">\n <div class=\"text-red-500 text-5xl mb-5\"><i class=\"fa-solid fa-circle-exclamation\"><\/i><\/div>\n <h3 class=\"text-2xl font-bold mb-3\">No fue posible obtener los cursos<\/h3>\n <p class=\"text-gray-600\">El servicio del IMSS no respondi\u00f3 correctamente. Intenta de nuevo.<\/p>\n <\/div>`;\n }\n \n function resetSelect(el, placeholder) {\n el.innerHTML = '';\n el.add(new Option(placeholder, ''));\n el.disabled = true;\n }\n \n function setPlaceholder(el, text) {\n el.options[0].text = text;\n }\n \n function resetInputBuscar() {\n _todasLasActividades = [];\n $inputBuscar.value = '';\n $inputBuscar.disabled = true;\n $inputBuscar.placeholder = 'Filtrar por nombre\u2026';\n }\n \n \/\/ \u2500\u2500 Utilidades HTTP (v\u00eda proxy) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \n function buildProxyURL(endpoint, params) {\n const qs = new URLSearchParams({ endpoint, ...params });\n return `\/inicio\/proxy_sipsi.php?${qs}`;\n }\n \n async function proxyJSON(endpoint, params = {}) {\n const res = await fetch(buildProxyURL(endpoint, params));\n if (!res.ok) throw new Error(res.status);\n const data = await res.json();\n if (data && data.error) throw new Error(data.error);\n return data;\n }\n \n async function proxyText(endpoint, params = {}) {\n const res = await fetch(buildProxyURL(endpoint, params));\n if (!res.ok) throw new Error(res.status);\n const ct = res.headers.get('Content-Type') || '';\n \/\/ Si el proxy detect\u00f3 error y devolvi\u00f3 JSON, lanzar el mensaje\n if (ct.includes('application\/json')) {\n const data = await res.json();\n throw new Error(data.error || 'Error desconocido');\n }\n return res.text();\n }\n <\/script>\n <\/body>\n <\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Actividades Deportivas FIDEIMSS Encuentra actividades del FIDEIMSS en todo M\u00e9xico Consulta actividades saludables, culturales, deportivas y de capacitaci\u00f3n disponibles en centros deportivos de tu entidad federativa. Saludables Culturales Capacitaci\u00f3n Deportivas Buscar actividades Ver resultados B\u00daSQUEDA Explorar actividades Entidad Federativa Seleccionar estado Centro deportivo Primero selecciona un estado Tipo de actividad Primero selecciona un centro Actividad […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4214","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/pages\/4214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/comments?post=4214"}],"version-history":[{"count":44,"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/pages\/4214\/revisions"}],"predecessor-version":[{"id":4280,"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/pages\/4214\/revisions\/4280"}],"wp:attachment":[{"href":"https:\/\/fideimss.org.mx\/inicio\/wp-json\/wp\/v2\/media?parent=4214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}